@dust-tt/sparkle 0.2.561 → 0.2.563-rc-1

package/src/components/DataTable.tsx

@@ -39,6 +39,10 @@ import {
   Spinner,
   Tooltip,
 } from "@sparkle/components";
+import {
+  radioIndicatorStyles,
+  radioStyles,
+} from "@sparkle/components/RadioGroup";
 import { useCopyToClipboard } from "@sparkle/hooks";
 import {
   ArrowDownIcon,
@@ -107,6 +111,7 @@ interface DataTableProps<TData extends TBaseData> {
   rowSelection?: RowSelectionState;
   setRowSelection?: (rowSelection: RowSelectionState) => void;
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+  enableMultiRowSelection?: boolean;
 }
 
 export function DataTable<TData extends TBaseData>({
@@ -128,6 +133,7 @@ export function DataTable<TData extends TBaseData>({
   rowSelection,
   setRowSelection,
   enableRowSelection = false,
+  enableMultiRowSelection = true,
   getRowId,
 }: DataTableProps<TData>) {
   const windowSize = useWindowSize();
@@ -198,6 +204,7 @@ export function DataTable<TData extends TBaseData>({
     },
     onPaginationChange,
     enableRowSelection,
+    enableMultiRowSelection,
     getRowId,
   });
 
@@ -328,6 +335,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
   rowSelection,
   setRowSelection,
   enableRowSelection,
+  enableMultiRowSelection = true,
   getRowId,
 }: ScrollableDataTableProps<TData>) {
   const windowSize = useWindowSize();
@@ -369,7 +377,6 @@ export function ScrollableDataTable<TData extends TBaseData>({
     rowCount: totalRowCount,
     getCoreRowModel: getCoreRowModel(),
     enableColumnResizing: true,
-    onRowSelectionChange,
     ...(enableRowSelection && {
       onRowSelectionChange,
     }),
@@ -377,6 +384,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
       ...(enableRowSelection && { rowSelection }),
     },
     enableRowSelection,
+    enableMultiRowSelection,
     getRowId,
   });
 
@@ -693,8 +701,7 @@ DataTable.Row = function Row({
         onClick
           ? "s-cursor-pointer hover:s-bg-muted dark:hover:s-bg-muted-night"
           : "",
-        props["data-selected"] &&
-          "s-bg-highlight-50 dark:s-bg-highlight-900/10",
+        props["data-selected"] && "s-bg-muted/50 dark:s-bg-muted/50",
         widthClassName,
         className
       )}
@@ -1119,3 +1126,37 @@ export function createSelectionColumn<TData>(): ColumnDef<TData> {
     },
   };
 }
+
+export function createRadioSelectionColumn<TData>(): ColumnDef<TData> {
+  return {
+    id: "radio-select",
+    enableSorting: false,
+    enableHiding: false,
+    header: () => null,
+    cell: ({ row }) => (
+      <div className="s-flex s-h-full s-w-full s-items-center">
+        <button
+          type="button"
+          className={cn(
+            radioStyles({ size: "xs" }),
+            row.getIsSelected() && "s-bg-muted/50 dark:s-bg-muted/50",
+            row.getCanSelect() && "s-cursor-pointer"
+          )}
+          onClick={() =>
+            row.getCanSelect() && row.toggleSelected(!row.getIsSelected())
+          }
+          disabled={!row.getCanSelect()}
+          aria-checked={row.getIsSelected()}
+          role="radio"
+        >
+          {row.getIsSelected() && (
+            <div className={radioIndicatorStyles({ size: "xs" })} />
+          )}
+        </button>
+      </div>
+    ),
+    meta: {
+      className: "s-w-10",
+    },
+  };
+}

package/src/components/RadioGroup.tsx

@@ -7,7 +7,7 @@ import { Label } from "@sparkle/components/Label";
 import { Tooltip } from "@sparkle/components/Tooltip";
 import { cn } from "@sparkle/lib/utils";
 
-const radioStyles = cva(
+export const radioStyles = cva(
   cn(
     "s-aspect-square s-rounded-full s-border",
     "s-s-border-border-dark dark:s-border-primary-500",
@@ -32,7 +32,7 @@ const radioStyles = cva(
   }
 );
 
-const radioIndicatorStyles = cva(
+export const radioIndicatorStyles = cva(
   "s-bg-primary dark:s-bg-primary-night s-flex s-items-center s-justify-center s-rounded-full",
   {
     variants: {

package/src/components/index.ts

@@ -45,7 +45,12 @@ export {
 } from "./ConversationMessage";
 export { Counter } from "./Counter";
 export type { DataTableMoreButtonProps, MenuItem } from "./DataTable";
-export { DataTable, ScrollableDataTable } from "./DataTable";
+export {
+  createRadioSelectionColumn,
+  createSelectionColumn,
+  DataTable,
+  ScrollableDataTable,
+} from "./DataTable";
 export {
   Dialog,
   DialogClose,

package/src/stories/DataTable.stories.tsx

@@ -20,7 +20,11 @@ import {
   Input,
   ScrollableDataTable,
 } from "@sparkle/components/";
-import { createSelectionColumn, MenuItem } from "@sparkle/components/DataTable";
+import {
+  createRadioSelectionColumn,
+  createSelectionColumn,
+  MenuItem,
+} from "@sparkle/components/DataTable";
 import { FolderIcon } from "@sparkle/icons/app";
 
 const meta = {
@@ -649,3 +653,59 @@ export const DataTableWithRowSelectionExample = () => {
     </div>
   );
 };
+
+export const DataTableWithRadioSelectionExample = () => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [data] = useState<Data[]>(() => createData(0, 10));
+  const [filter, setFilter] = useState("");
+
+  const columnsWithRadioSelection: ColumnDef<Data>[] = useMemo(
+    () => [createRadioSelectionColumn<Data>(), ...columns],
+    []
+  );
+
+  // Get the selected row ID from rowSelection state
+  const selectedRowId = Object.keys(rowSelection).find(
+    (id) => rowSelection[id]
+  );
+
+  return (
+    <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
+      <h3 className="s-text-lg s-font-medium">
+        DataTable with Radio Selection (Single Row)
+      </h3>
+
+      <div className="s-flex s-flex-col s-gap-4">
+        <Input
+          name="filter"
+          placeholder="Filter"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+
+        <DataTable
+          data={data}
+          filter={filter}
+          filterColumn="name"
+          columns={columnsWithRadioSelection}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={true}
+          enableMultiRowSelection={false}
+          getRowId={(row) => row.name}
+        />
+
+        <div className="s-rounded-md s-border s-bg-muted/50 s-p-2">
+          <h4 className="s-mb-2 s-font-medium">Radio Selection State:</h4>
+          <pre className="s-overflow-auto s-text-xs">
+            {JSON.stringify(rowSelection, null, 2)}
+          </pre>
+          <p className="s-mt-2 s-text-sm">
+            {selectedRowId ? `Selected: ${selectedRowId}` : "No row selected"}{" "}
+            (only one row can be selected at a time)
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};