@dust-tt/sparkle 0.2.206 → 0.2.207-pr

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.206",
+  "version": "0.2.207-pr",
   "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,21 +233,47 @@ 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>
   );
 };
-interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+
+interface CellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  children: ReactNode;
+}
+
+DataTable.Cell = function Cell({ children, className, ...props }: CellProps) {
+  return (
+    <td
+      className={classNames(
+        "s-whitespace-nowrap s-py-2 s-pl-0.5 s-text-element-800",
+        className || ""
+      )}
+      {...props}
+    >
+      {children}
+    </td>
+  );
+};
+
+interface CellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   avatarUrl?: string;
   icon?: React.ComponentType<{ className?: string }>;
   iconClassName?: string;
@@ -255,7 +282,7 @@ interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
   description?: string;
 }
 
-DataTable.Cell = function Cell({
+DataTable.CellContent = function CellContent({
   children,
   className,
   avatarUrl,
@@ -264,44 +291,36 @@ DataTable.Cell = function Cell({
   iconClassName,
   description,
   ...props
-}: CellProps) {
+}: CellContentProps) {
   return (
-    <td
-      className={classNames(
-        "s-whitespace-nowrap s-py-2 s-pl-0.5 s-text-element-800",
-        className || ""
+    <div className={classNames("s-flex s-py-2", className || "")} {...props}>
+      {avatarUrl && (
+        <Avatar
+          visual={avatarUrl}
+          size="xs"
+          className="s-mr-2"
+          isRounded={roundedAvatar ?? false}
+        />
+      )}
+      {icon && (
+        <Icon
+          visual={icon}
+          size="sm"
+          className={classNames(
+            "s-mr-2 s-text-element-600",
+            iconClassName || ""
+          )}
+        />
       )}
-      {...props}
-    >
       <div className="s-flex">
-        {avatarUrl && (
-          <Avatar
-            visual={avatarUrl}
-            size="xs"
-            className="s-mr-2"
-            isRounded={roundedAvatar ?? false}
-          />
+        <span className="s-text-sm s-text-element-800">{children}</span>
+        {description && (
+          <span className="s-pl-2 s-text-sm s-text-element-600">
+            {description}
+          </span>
         )}
-        {icon && (
-          <Icon
-            visual={icon}
-            size="sm"
-            className={classNames(
-              "s-mr-2 s-text-element-600",
-              iconClassName || ""
-            )}
-          />
-        )}
-        <div className="s-flex">
-          <span className="s-text-sm s-text-element-800">{children}</span>
-          {description && (
-            <span className="s-pl-2 s-text-sm s-text-element-600">
-              {description}
-            </span>
-          )}
-        </div>
       </div>
-    </td>
+    </div>
   );
 };
 

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/Citation.stories.tsx

@@ -201,6 +201,7 @@ export const CitationsExample = () => (
     <h2>With zoom effect</h2>
     <div className="s-flex s-gap-2">
       <ZoomableImageCitationWrapper
+        size="sm"
         title="With imgSrc"
         // size="xs"
         imgSrc="https://dust.tt/static/droidavatar/Droid_Black_4.jpg"

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",
@@ -75,42 +82,50 @@ export const DataTableExample = () => {
       accessorKey: "name",
       header: "Name",
       cell: (info) => (
-        <DataTable.Cell
+        <DataTable.CellContent
           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>
+        </DataTable.CellContent>
       ),
     },
     {
       accessorKey: "usedBy",
       header: "Used by",
       cell: (info) => (
-        <DataTable.Cell>{info.row.original.usedBy}</DataTable.Cell>
+        <DataTable.CellContent>
+          {info.row.original.usedBy}
+        </DataTable.CellContent>
       ),
     },
     {
       accessorKey: "addedBy",
       header: "Added by",
       cell: (info) => (
-        <DataTable.Cell>{info.row.original.addedBy}</DataTable.Cell>
+        <DataTable.CellContent>
+          {info.row.original.addedBy}
+        </DataTable.CellContent>
       ),
     },
     {
       accessorKey: "lastUpdated",
       header: "Last updated",
       cell: (info) => (
-        <DataTable.Cell>{info.row.original.lastUpdated}</DataTable.Cell>
+        <DataTable.CellContent>
+          {info.row.original.lastUpdated}
+        </DataTable.CellContent>
       ),
       enableSorting: false,
     },
     {
       accessorKey: "size",
       header: "Size",
-      cell: (info) => <DataTable.Cell>{info.row.original.size}</DataTable.Cell>,
+      cell: (info) => (
+        <DataTable.CellContent>{info.row.original.size}</DataTable.CellContent>
+      ),
     },
   ];