@dust-tt/sparkle 0.2.643 → 0.2.645

package/src/components/DataTable.tsx

@@ -961,12 +961,14 @@ export interface DataTableMoreButtonProps {
     React.ComponentPropsWithoutRef<typeof DropdownMenu>,
     "modal"
   >;
+  disabled?: boolean;
 }
 
 DataTable.MoreButton = function MoreButton({
   className,
   menuItems,
   dropdownMenuProps,
+  disabled,
 }: DataTableMoreButtonProps) {
   if (!menuItems?.length) {
     return null;
@@ -984,11 +986,15 @@ DataTable.MoreButton = function MoreButton({
           icon={MoreIcon}
           size="mini"
           variant="ghost-secondary"
-          className={cn(className)}
+          disabled={disabled}
+          className={cn(
+            disabled && "s-cursor-not-allowed s-opacity-50",
+            className
+          )}
         />
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent align="end" hidden={disabled}>
         <DropdownMenuGroup>
           {menuItems.map((item, index) => renderMenuItem(item, index))}
         </DropdownMenuGroup>
@@ -1032,6 +1038,11 @@ interface CellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   description?: string;
   grow?: boolean;
+  disabled?: boolean;
+  avatarStack?: {
+    items: { name: string; visual: string }[];
+    nbVisibleItems?: number;
+  };
 }
 
 DataTable.CellContent = function CellContent({
@@ -1044,6 +1055,8 @@ DataTable.CellContent = function CellContent({
   iconClassName,
   description,
   grow = false,
+  disabled,
+  avatarStack,
   ...props
 }: CellContentProps) {
   return (
@@ -1051,8 +1064,10 @@ DataTable.CellContent = function CellContent({
       className={cn(
         "s-flex s-items-center",
         grow ? "s-flex-grow" : "",
+        disabled && "s-cursor-not-allowed s-opacity-50",
         className
       )}
+      aria-disabled={disabled || undefined}
       {...props}
     >
       {avatarUrl && avatarTooltipLabel && (
@@ -1076,6 +1091,14 @@ DataTable.CellContent = function CellContent({
           isRounded={roundedAvatar ?? false}
         />
       )}
+      {avatarStack && (
+        <Avatar.Stack
+          avatars={avatarStack.items}
+          nbVisibleItems={avatarStack.nbVisibleItems}
+          size="xs"
+          isRounded={roundedAvatar ?? false}
+        />
+      )}
       {icon && (
         <Icon
           visual={icon}
@@ -1117,6 +1140,7 @@ interface BasicCellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   label: string | number;
   tooltip?: string | number;
   textToCopy?: string | number;
+  disabled?: boolean;
 }
 
 DataTable.BasicCellContent = function BasicCellContent({
@@ -1124,6 +1148,7 @@ DataTable.BasicCellContent = function BasicCellContent({
   tooltip,
   className,
   textToCopy,
+  disabled,
   ...props
 }: BasicCellContentProps) {
   const [isCopied, copyToClipboard] = useCopyToClipboard();
@@ -1150,8 +1175,10 @@ DataTable.BasicCellContent = function BasicCellContent({
                 cellHeight,
                 "s-group s-flex s-items-center s-gap-2 s-text-sm",
                 "s-text-muted-foreground dark:s-text-muted-foreground-night",
+                disabled && "s-cursor-not-allowed s-opacity-50",
                 className
               )}
+              aria-disabled={disabled || undefined}
               {...props}
             >
               <span className="s-truncate">{label}</span>
@@ -1177,8 +1204,10 @@ DataTable.BasicCellContent = function BasicCellContent({
             cellHeight,
             "s-group s-flex s-items-center s-gap-2 s-text-sm",
             "s-text-muted-foreground dark:s-text-muted-foreground-night",
+            disabled && "s-cursor-not-allowed s-opacity-50",
             className
           )}
+          aria-disabled={disabled || undefined}
           {...props}
         >
           <span className="s-truncate">{label}</span>

package/src/stories/DataTable.stories.tsx

@@ -52,6 +52,7 @@ type Data = {
   >;
   id?: number;
   roundedAvatar?: boolean;
+  avatarStack?: { name: string; visual: string }[];
 };
 
 type TransformedData = {
@@ -181,6 +182,130 @@ const data: TransformedData[] = [
   },
 ];
 
+const avatarStackData: TransformedData[] = [
+  {
+    name: "Team Alpha",
+    description: "Development team",
+    usedBy: 12,
+    addedBy: "Project Manager",
+    lastUpdated: "2024-01-15",
+    size: "256kb",
+    avatarStack: [
+      {
+        name: "Alice Johnson",
+        visual: "https://avatars.githubusercontent.com/u/1?s=200&v=4",
+      },
+      {
+        name: "Bob Smith",
+        visual: "https://avatars.githubusercontent.com/u/2?s=200&v=4",
+      },
+      {
+        name: "Carol Davis",
+        visual: "https://avatars.githubusercontent.com/u/3?s=200&v=4",
+      },
+      {
+        name: "David Wilson",
+        visual: "https://avatars.githubusercontent.com/u/4?s=200&v=4",
+      },
+      {
+        name: "Eve Brown",
+        visual: "https://avatars.githubusercontent.com/u/5?s=200&v=4",
+      },
+    ],
+    onClick: () => alert("Team Alpha clicked"),
+  },
+  {
+    name: "Marketing Team",
+    description: "Marketing and communications",
+    usedBy: 8,
+    addedBy: "Marketing Director",
+    lastUpdated: "2024-01-14",
+    size: "128kb",
+    avatarStack: [
+      {
+        name: "Frank Miller",
+        visual: "https://avatars.githubusercontent.com/u/6?s=200&v=4",
+      },
+      {
+        name: "Grace Lee",
+        visual: "https://avatars.githubusercontent.com/u/7?s=200&v=4",
+      },
+      {
+        name: "Henry Taylor",
+        visual: "https://avatars.githubusercontent.com/u/8?s=200&v=4",
+      },
+    ],
+    onClick: () => alert("Marketing Team clicked"),
+  },
+  {
+    name: "Design Squad",
+    description: "UI/UX design team",
+    usedBy: 6,
+    addedBy: "Design Lead",
+    lastUpdated: "2024-01-13",
+    size: "512kb",
+    avatarStack: [
+      {
+        name: "Ivy Chen",
+        visual: "https://avatars.githubusercontent.com/u/9?s=200&v=4",
+      },
+      {
+        name: "Jack Rodriguez",
+        visual: "https://avatars.githubusercontent.com/u/10?s=200&v=4",
+      },
+      {
+        name: "Kate Anderson",
+        visual: "https://avatars.githubusercontent.com/u/11?s=200&v=4",
+      },
+      {
+        name: "Liam Thompson",
+        visual: "https://avatars.githubusercontent.com/u/12?s=200&v=4",
+      },
+    ],
+    roundedAvatar: true,
+    onClick: () => alert("Design Squad clicked"),
+  },
+  {
+    name: "Large Team",
+    description: "Cross-functional team with many members",
+    usedBy: 25,
+    addedBy: "Team Lead",
+    lastUpdated: "2024-01-12",
+    size: "1.2mb",
+    avatarStack: [
+      {
+        name: "Maya Patel",
+        visual: "https://avatars.githubusercontent.com/u/13?s=200&v=4",
+      },
+      {
+        name: "Noah Garcia",
+        visual: "https://avatars.githubusercontent.com/u/14?s=200&v=4",
+      },
+      {
+        name: "Olivia Martinez",
+        visual: "https://avatars.githubusercontent.com/u/15?s=200&v=4",
+      },
+      {
+        name: "Paul Kim",
+        visual: "https://avatars.githubusercontent.com/u/16?s=200&v=4",
+      },
+      {
+        name: "Quinn White",
+        visual: "https://avatars.githubusercontent.com/u/17?s=200&v=4",
+      },
+      {
+        name: "Rachel Green",
+        visual: "https://avatars.githubusercontent.com/u/18?s=200&v=4",
+      },
+      {
+        name: "Sam Johnson",
+        visual: "https://avatars.githubusercontent.com/u/19?s=200&v=4",
+      },
+    ],
+    onClick: () => alert("Large Team clicked"),
+  },
+];
+
 const columns: ColumnDef<Data>[] = [
   {
     accessorKey: "name",
@@ -770,3 +895,113 @@ export const DataTableWithRadioSelectionExample = () => {
     </div>
   );
 };
+
+// Column definition for avatar stack story
+const avatarStackColumns: ColumnDef<Data>[] = [
+  {
+    accessorKey: "name",
+    header: "Team Name",
+    sortingFn: "text",
+    id: "name",
+    meta: {
+      className: "s-w-full",
+      tooltip: "Team name with member avatars",
+    },
+    cell: (info) => (
+      <DataTable.CellContent
+        avatarStack={
+          info.row.original.avatarStack
+            ? {
+                items: info.row.original.avatarStack,
+                nbVisibleItems: 3,
+              }
+            : undefined
+        }
+        description={info.row.original.description}
+        roundedAvatar={info.row.original.roundedAvatar}
+      >
+        {info.row.original.name}
+      </DataTable.CellContent>
+    ),
+  },
+  {
+    accessorKey: "usedBy",
+    id: "usedBy",
+    meta: {
+      className: "s-w-[82px] s-hidden @xs/table:s-table-cell",
+    },
+    header: "Members",
+    cell: (info) => (
+      <DataTable.BasicCellContent label={info.row.original.usedBy} />
+    ),
+  },
+  {
+    accessorKey: "addedBy",
+    header: "Created by",
+    id: "addedBy",
+    meta: {
+      className: "s-w-[128px]",
+    },
+    cell: (info) => (
+      <DataTable.BasicCellContent
+        label={info.row.original.addedBy}
+        textToCopy={info.row.original.addedBy}
+        tooltip={info.row.original.addedBy}
+      />
+    ),
+  },
+  {
+    accessorKey: "lastUpdated",
+    id: "lastUpdated",
+    header: "Last updated",
+    meta: {
+      className: "s-w-[128px] s-hidden @sm/table:s-table-cell",
+    },
+    cell: (info) => (
+      <DataTable.BasicCellContent label={info.row.original.lastUpdated} />
+    ),
+    enableSorting: false,
+  },
+  {
+    accessorKey: "size",
+    id: "size",
+    header: "Size",
+    meta: {
+      className: "s-w-[48px] s-hidden @sm/table:s-table-cell",
+    },
+    cell: (info) => (
+      <DataTable.BasicCellContent label={info.row.original.size} />
+    ),
+  },
+];
+
+export const DataTableWithAvatarStackExample = () => {
+  const [filter, setFilter] = React.useState<string>("");
+
+  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 Avatar Stack</h3>
+      <p className="s-text-sm s-text-muted-foreground">
+        This example demonstrates the DataTable with avatar stacks showing team
+        members. The avatar stack displays up to 4 visible avatars with a count
+        indicator for additional members.
+      </p>
+
+      <div className="s-flex s-flex-col s-gap-4">
+        <Input
+          name="filter"
+          placeholder="Filter teams..."
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+
+        <DataTable
+          data={avatarStackData}
+          filter={filter}
+          filterColumn="name"
+          columns={avatarStackColumns}
+        />
+      </div>
+    </div>
+  );
+};