@dust-tt/sparkle 0.2.206 → 0.2.207

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.206",
+  "version": "0.2.207",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

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>

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,7 @@ type Data = {
   avatarUrl?: string;
   icon?: React.ComponentType<{ className?: string }>;
   onClick?: () => void;
-  onMoreClick?: () => void;
+  moreMenuItems?: DropdownItemProps[];
   roundedAvatar?: boolean;
 };
 
@@ -37,7 +39,6 @@ export const DataTableExample = () => {
       avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
       roundedAvatar: true,
       onClick: () => console.log("hehe"),
-      onMoreClick: () => console.log("show more"),
     },
     {
       name: "Design",
@@ -46,6 +47,12 @@ export const DataTableExample = () => {
       lastUpdated: "2023-07-09",
       size: "64kb",
       icon: FolderIcon,
+      moreMenuItems: [
+        {
+          label: "Edit",
+          onClick: () => console.log("Edit"),
+        },
+      ],
     },
     {
       name: "Development",