feat(Table): indeterminate state for selectable rows (#647)

Author: ariser

src/components/Table/Table.stories.tsx

@@ -13,6 +13,7 @@ const rows: TableRowType[] = [
       { label: "Maria Anders" },
       { label: "Germany" },
     ],
+    isIndeterminate: true,
   },
   {
     id: "row-2",
@@ -64,20 +65,31 @@ export const Selectable: StoryObj<typeof Table> = {
     isSelectable: true,
     selectedIds: [],
   },
-  render: ({ selectedIds, ...props }) => {
+  render: ({ selectedIds, rows: rowsProp, ...props }) => {
+    const [rows, setRows] = useState(rowsProp);
     const [selectedRows, setSelectedRows] = useState(selectedIds);
 
     useEffect(() => {
       setSelectedRows(selectedIds);
     }, [selectedIds]);
 
+    useEffect(() => {
+      setRows(prevState =>
+        prevState.map(row => ({
+          ...row,
+          isIndeterminate: selectedRows?.includes(row.id) ? false : row.isIndeterminate,
+        }))
+      );
+    }, [selectedRows]);
+
     return (
       <Table
         {...props}
+        rows={rows}
         selectedIds={selectedRows}
-        onSelect={selectedItems =>
-          setSelectedRows(selectedItems.map(({ item: { id } }) => id))
-        }
+        onSelect={selectedItems => {
+          setSelectedRows(selectedItems.map(({ item: { id } }) => id));
+        }}
       />
     );
   },

src/components/Table/Table.tsx

@@ -380,6 +380,8 @@ export interface TableRowType
   isDisabled?: boolean;
   isDeleted?: boolean;
   isActive?: boolean;
+  /** only works with <Table isSelectable={true} /> */
+  isIndeterminate?: boolean;
 }
 
 interface CommonTableProps
@@ -433,6 +435,7 @@ const TableBodyRow = ({
   onSelect,
   isSelectable,
   isSelected,
+  isIndeterminate,
   onDelete,
   onEdit,
   isDeleted,
@@ -458,7 +461,7 @@ const TableBodyRow = ({
       {isSelectable && (
         <SelectData $size={size}>
           <Checkbox
-            checked={isSelected}
+            checked={isIndeterminate ? "indeterminate" : isSelected}
             onCheckedChange={onSelect}
             disabled={isDisabled || isDeleted}
           />