feat: INITIATE-3198: Made changes for expand icon (#550)

* Made changes for expand icon

* Fixed lint errors

* Format fix

* Added changeset

* Changed name to showCanExpandIcon

* Fixed pr comments

---------

Co-authored-by: Vishwath <vishwath@p44-vreddy.local>

.changeset/warm-nails-knock.md

@@ -0,0 +1,5 @@
+---
+'@project44-manifest/react': minor
+---
+
+Changed row expand icon design

packages/react/src/components/DataTable/DataTable.tsx

@@ -42,6 +42,7 @@ export function DataTable<TData extends RowData>(props: DataTableProps<TData>) {
     enableSelectAll = true,
     enableSorting = true,
     enableStickyHeader = false,
+    showCanExpandIcon = true,
     expandAllButtonProps = {},
     expandButtonProps = {},
     initialState,
@@ -80,7 +81,7 @@ export function DataTable<TData extends RowData>(props: DataTableProps<TData>) {
             enableExpandAll && <DataTableExpandAllButton table={table} />,
           // eslint-disable-next-line react/no-unstable-nested-components
           cell: ({ row, table }: { row: Row<TData>; table: DataTable<TData> }) => (
-            <DataTableExpandButton row={row} table={table} />
+            <DataTableExpandButton row={row} showCanExpandIcon={showCanExpandIcon} table={table} />
           ),
           size: 40,
         },
@@ -97,7 +98,14 @@ export function DataTable<TData extends RowData>(props: DataTableProps<TData>) {
         },
         ...columnsProp,
       ].filter(Boolean) as ColumnDef<TData>[],
-    [columnsProp, enableExpandAll, enableExpanding, enableRowSelection, enableSelectAll],
+    [
+      columnsProp,
+      enableExpandAll,
+      enableExpanding,
+      enableRowSelection,
+      enableSelectAll,
+      showCanExpandIcon,
+    ],
   );
 
   const data: TData[] = React.useMemo(

packages/react/src/components/DataTable/DataTable.types.ts

@@ -136,6 +136,11 @@ export interface DataTableProps<TData extends RowData> {
    * @default false
    */
   enableStickyHeader?: boolean;
+  /**
+   * Whether the canExpand icon is visible or not.
+   * @default true
+   */
+  showCanExpandIcon?: boolean;
   /**
    * Props passed to the expand all button component
    */

packages/react/src/components/DataTable/components/DataTableExpandButton/DataTableExpandButton.tsx

@@ -8,7 +8,7 @@ import type { DataTableExpandButtonProps } from './DataTableExpandButton.types';
 export function DataTableExpandButton<TData extends RowData>(
   props: DataTableExpandButtonProps<TData>,
 ) {
-  const { row, table } = props;
+  const { row, table, showCanExpandIcon } = props;
 
   const { options } = table;
   const { expandButtonProps, isLoading } = options;
@@ -31,14 +31,15 @@ export function DataTableExpandButton<TData extends RowData>(
   return (
     <IconButton
       {...parsedProps}
+      css={{ display: canExpand || showCanExpandIcon ? 'block' : 'none' }}
       isDisabled={isLoading || !canExpand}
       size="small"
       variant="tertiary"
       onPress={handleToggleExpand}
     >
       <ChevronDown
         style={{
-          transform: `rotate(${isExpanded ? -180 : 0}deg)`,
+          transform: `rotate(${isExpanded ? 0 : -90}deg)`,
           transition: 'transform 100ms',
         }}
       />

packages/react/src/components/DataTable/components/DataTableExpandButton/DataTableExpandButton.types.ts

@@ -4,4 +4,5 @@ import type { DataTable } from '../../DataTable.types';
 export interface DataTableExpandButtonProps<TData extends RowData> {
   row: Row<TData>;
   table: DataTable<TData>;
+  showCanExpandIcon: boolean;
 }

packages/react/src/components/DataTable/story/DataTable.stories.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
 import { faker } from '@faker-js/faker';
 import { ClipboardWithCheck, Clock } from '@project44-manifest/react-icons';
+import { RowSelectionState } from '@tanstack/react-table';
 import { createDataTableColumnHelper, DataTable, DataTableColumnDef, Link, Pill } from '../../..';
 import { TotalsDataObj } from '../DataTable.types';
 
@@ -356,6 +358,70 @@ export const RowExpanding = () => {
   return <DataTable enableExpanding columns={columns} data={data} />;
 };
 
+export const RowExpandingAndSelection = () => {
+  interface Person {
+    firstName: string;
+    lastName: string;
+    age: number;
+    address: string;
+    phoneNumber: string;
+  }
+  const columns: DataTableColumnDef<Person>[] = [
+    {
+      header: 'First Name',
+      accessorKey: 'firstName',
+    },
+    {
+      header: 'Last Name',
+      accessorKey: 'lastName',
+    },
+    {
+      header: 'Age',
+      accessorKey: 'age',
+    },
+    {
+      header: 'Address',
+      accessorKey: 'address',
+    },
+    {
+      header: 'Phone Number',
+      accessorKey: 'phoneNumber',
+    },
+  ];
+
+  const data = React.useMemo(
+    () =>
+      [...Array.from({ length: 5 })].map(() => ({
+        firstName: faker.name.firstName(),
+        lastName: faker.name.lastName(),
+        age: faker.datatype.number(80),
+        address: faker.address.streetAddress(),
+        phoneNumber: faker.phone.number(),
+        subRows: [...Array.from({ length: faker.datatype.number(4) })].map(() => ({
+          firstName: faker.name.firstName(),
+          lastName: faker.name.lastName(),
+          age: faker.datatype.number(80),
+          address: faker.address.streetAddress(),
+          phoneNumber: faker.phone.number(),
+        })),
+      })),
+    [],
+  );
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
+  return (
+    <DataTable
+      enableExpanding
+      enableRowSelection
+      columns={columns}
+      data={data}
+      showCanExpandIcon={false}
+      state={{ rowSelection }}
+      onRowSelectionChange={setRowSelection}
+    />
+  );
+};
+
 export const Loading = () => {
   interface Person {
     firstName: string;