@dust-tt/sparkle 0.2.205 → 0.2.207

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.205",
+  "version": "0.2.207",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",
@@ -92,4 +92,4 @@
     "tailwind-scrollbar-hide": "^1.1.7"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

package/src/components/DataTable.tsx

@@ -10,7 +10,8 @@ import {
 } from "@tanstack/react-table";
 import React, { ReactNode, useEffect, useState } from "react";
 
-import { Avatar, MoreIcon } from "@sparkle/index";
+import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
+import { Avatar, DropdownMenu, MoreIcon } from "@sparkle/index";
 import { ArrowDownIcon, ArrowUpIcon } from "@sparkle/index";
 import { classNames } from "@sparkle/lib/utils";
 
@@ -18,7 +19,7 @@ import { Icon } from "./Icon";
 
 interface TBaseData {
   onClick?: () => void;
-  onMoreClick?: () => void;
+  moreMenuItems?: DropdownItemProps[];
 }
 
 interface ColumnBreakpoint {
@@ -119,7 +120,7 @@ export function DataTable<TData extends TBaseData, TValue>({
           <DataTable.Row
             key={row.id}
             onClick={row.original.onClick}
-            onMoreClick={row.original.onMoreClick}
+            moreMenuItems={row.original.moreMenuItems}
           >
             {row.getVisibleCells().map((cell) => (
               <DataTable.Cell
@@ -211,14 +212,14 @@ DataTable.Body = function Body({
 interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   children: ReactNode;
   onClick?: () => void;
-  onMoreClick?: () => void;
+  moreMenuItems?: DropdownItemProps[];
 }
 
 DataTable.Row = function Row({
   children,
   className,
   onClick,
-  onMoreClick,
+  moreMenuItems,
   ...props
 }: RowProps) {
   return (
@@ -232,15 +233,22 @@ DataTable.Row = function Row({
       {...props}
     >
       {children}
-      {onMoreClick && (
-        <td
-          className="s-w-1 s-cursor-pointer s-pl-1 s-text-element-600"
-          onClick={(e) => {
-            e.stopPropagation(); // Prevent row click event
-            onMoreClick?.();
-          }}
-        >
-          <Icon visual={MoreIcon} size="sm" />
+      {moreMenuItems && (
+        <td className="s-w-1 s-cursor-pointer s-pl-1 s-text-element-600">
+          <DropdownMenu className="s-flex">
+            <DropdownMenu.Button
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <Icon visual={MoreIcon} size="sm" />
+            </DropdownMenu.Button>
+            <DropdownMenu.Items origin="topRight" width={220}>
+              {moreMenuItems?.map((item, index) => (
+                <DropdownMenu.Item key={index} {...item} />
+              ))}
+            </DropdownMenu.Items>
+          </DropdownMenu>
         </td>
       )}
     </tr>
@@ -250,6 +258,7 @@ interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
   avatarUrl?: string;
   icon?: React.ComponentType<{ className?: string }>;
   iconClassName?: string;
+  roundedAvatar?: boolean;
   children?: ReactNode;
   description?: string;
 }
@@ -258,6 +267,7 @@ DataTable.Cell = function Cell({
   children,
   className,
   avatarUrl,
+  roundedAvatar,
   icon,
   iconClassName,
   description,
@@ -273,7 +283,12 @@ DataTable.Cell = function Cell({
     >
       <div className="s-flex">
         {avatarUrl && (
-          <Avatar visual={avatarUrl} size="xs" className="s-mr-2" />
+          <Avatar
+            visual={avatarUrl}
+            size="xs"
+            className="s-mr-2"
+            isRounded={roundedAvatar ?? false}
+          />
         )}
         {icon && (
           <Icon

package/src/components/DropdownMenu.tsx

@@ -3,6 +3,7 @@ import React, {
   ComponentType,
   Fragment,
   JSXElementConstructor,
+  MouseEventHandler,
   MutableRefObject,
   ReactElement,
   useContext,
@@ -97,7 +98,7 @@ export interface DropdownButtonProps {
   className?: string;
   disabled?: boolean;
   children?: React.ReactNode;
-  onClick?: () => void;
+  onClick?: MouseEventHandler;
 }
 
 DropdownMenu.Button = function ({
@@ -227,7 +228,7 @@ DropdownMenu.Button = function ({
   );
 };
 
-interface DropdownItemProps {
+export interface DropdownItemProps {
   variant?: "default" | "warning";
   label: string;
   description?: string;

package/src/stories/DataTable.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta } from "@storybook/react";
 import { ColumnDef } from "@tanstack/react-table";
 import React from "react";
 
+import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
+
 import { DataTable, FolderIcon } from "../index_with_tw_base";
 
 const meta = {
@@ -21,7 +23,8 @@ type Data = {
   avatarUrl?: string;
   icon?: React.ComponentType<{ className?: string }>;
   onClick?: () => void;
-  onMoreClick?: () => void;
+  moreMenuItems?: DropdownItemProps[];
+  roundedAvatar?: boolean;
 };
 
 export const DataTableExample = () => {
@@ -34,8 +37,8 @@ export const DataTableExample = () => {
       lastUpdated: "July 8, 2023",
       size: "32kb",
       avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+      roundedAvatar: true,
       onClick: () => console.log("hehe"),
-      onMoreClick: () => console.log("show more"),
     },
     {
       name: "Design",
@@ -44,6 +47,12 @@ export const DataTableExample = () => {
       lastUpdated: "2023-07-09",
       size: "64kb",
       icon: FolderIcon,
+      moreMenuItems: [
+        {
+          label: "Edit",
+          onClick: () => console.log("Edit"),
+        },
+      ],
     },
     {
       name: "Development",
@@ -77,6 +86,7 @@ export const DataTableExample = () => {
           avatarUrl={info.row.original.avatarUrl}
           icon={info.row.original.icon}
           description={info.row.original.description}
+          roundedAvatar={info.row.original.roundedAvatar}
         >
           {info.row.original.name}
         </DataTable.Cell>