@dust-tt/sparkle 0.2.205 → 0.2.207

package/dist/cjs/components/DataTable.d.ts

@@ -1,8 +1,9 @@
 import { type ColumnDef, type SortingState } from "@tanstack/react-table";
 import React, { ReactNode } from "react";
+import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
 interface TBaseData {
     onClick?: () => void;
-    onMoreClick?: () => void;
+    moreMenuItems?: DropdownItemProps[];
 }
 interface ColumnBreakpoint {
     [columnId: string]: "xs" | "sm" | "md" | "lg" | "xl";
@@ -22,8 +23,8 @@ export declare namespace DataTable {
     var Header: ({ children, className, ...props }: HeaderProps) => React.JSX.Element;
     var Head: ({ children, className, ...props }: HeadProps) => React.JSX.Element;
     var Body: ({ children, className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
-    var Row: ({ children, className, onClick, onMoreClick, ...props }: RowProps) => React.JSX.Element;
-    var Cell: ({ children, className, avatarUrl, icon, iconClassName, description, ...props }: CellProps) => React.JSX.Element;
+    var Row: ({ children, className, onClick, moreMenuItems, ...props }: RowProps) => React.JSX.Element;
+    var Cell: ({ children, className, avatarUrl, roundedAvatar, icon, iconClassName, description, ...props }: CellProps) => React.JSX.Element;
     var Caption: ({ children, className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>) => React.JSX.Element;
 }
 interface DataTableRootProps extends React.HTMLAttributes<HTMLTableElement> {
@@ -38,7 +39,7 @@ interface HeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
 interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     children: ReactNode;
     onClick?: () => void;
-    onMoreClick?: () => void;
+    moreMenuItems?: DropdownItemProps[];
 }
 interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     avatarUrl?: string;
@@ -46,6 +47,7 @@ interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
         className?: string;
     }>;
     iconClassName?: string;
+    roundedAvatar?: boolean;
     children?: ReactNode;
     description?: string;
 }

package/dist/cjs/components/DropdownMenu.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentType, JSXElementConstructor, ReactElement } from "react";
+import React, { ComponentType, JSXElementConstructor, MouseEventHandler, ReactElement } from "react";
 import { TooltipProps } from "./Tooltip";
 export interface DropdownMenuProps {
     className?: string;
@@ -23,9 +23,9 @@ export interface DropdownButtonProps {
     className?: string;
     disabled?: boolean;
     children?: React.ReactNode;
-    onClick?: () => void;
+    onClick?: MouseEventHandler;
 }
-interface DropdownItemProps {
+export interface DropdownItemProps {
     variant?: "default" | "warning";
     label: string;
     description?: string;

package/dist/cjs/index.js

@@ -128933,7 +128933,7 @@ function DataTable(_a) {
                             : SvgArrowDown$1, size: "xs", className: classNames("s-ml-1", header.column.getIsSorted()
                         ? "s-opacity-100"
                         : "s-opacity-0") }))))); }))); })),
-        React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) { return (React.createElement(DataTable.Row, { key: row.id, onClick: row.original.onClick, onMoreClick: row.original.onMoreClick }, row.getVisibleCells().map(function (cell) { return (React.createElement(DataTable.Cell, { key: cell.id, className: classNames(columnsBreakpoints[cell.column.id]
+        React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) { return (React.createElement(DataTable.Row, { key: row.id, onClick: row.original.onClick, moreMenuItems: row.original.moreMenuItems }, row.getVisibleCells().map(function (cell) { return (React.createElement(DataTable.Cell, { key: cell.id, className: classNames(columnsBreakpoints[cell.column.id]
                 ? "s-hidden ".concat(columnsBreakpoints[cell.column.id], ":s-block")
                 : "") }, flexRender(cell.column.columnDef.cell, cell.getContext()))); }))); }))));
 }
@@ -128954,20 +128954,22 @@ DataTable.Body = function Body(_a) {
     return (React.createElement("tbody", __assign({ className: className }, props), children));
 };
 DataTable.Row = function Row(_a) {
-    var children = _a.children, className = _a.className, onClick = _a.onClick, onMoreClick = _a.onMoreClick, props = __rest(_a, ["children", "className", "onClick", "onMoreClick"]);
+    var children = _a.children, className = _a.className, onClick = _a.onClick, moreMenuItems = _a.moreMenuItems, props = __rest(_a, ["children", "className", "onClick", "moreMenuItems"]);
     return (React.createElement("tr", __assign({ className: classNames("s-border-b s-border-structure-200 s-text-sm", onClick ? "s-cursor-pointer hover:s-bg-gray-50" : "", className || ""), onClick: onClick ? onClick : undefined }, props),
         children,
-        onMoreClick && (React.createElement("td", { className: "s-w-1 s-cursor-pointer s-pl-1 s-text-element-600", onClick: function (e) {
-                e.stopPropagation(); // Prevent row click event
-                onMoreClick === null || onMoreClick === void 0 ? void 0 : onMoreClick();
-            } },
-            React.createElement(Icon, { visual: SvgMore$1, size: "sm" })))));
+        moreMenuItems && (React.createElement("td", { className: "s-w-1 s-cursor-pointer s-pl-1 s-text-element-600" },
+            React.createElement(DropdownMenu, { className: "s-flex" },
+                React.createElement(DropdownMenu.Button, { onClick: function (e) {
+                        e.stopPropagation();
+                    } },
+                    React.createElement(Icon, { visual: SvgMore$1, size: "sm" })),
+                React.createElement(DropdownMenu.Items, { origin: "topRight", width: 220 }, moreMenuItems === null || moreMenuItems === void 0 ? void 0 : moreMenuItems.map(function (item, index) { return (React.createElement(DropdownMenu.Item, __assign({ key: index }, item))); })))))));
 };
 DataTable.Cell = function Cell(_a) {
-    var children = _a.children, className = _a.className, avatarUrl = _a.avatarUrl, icon = _a.icon, iconClassName = _a.iconClassName, description = _a.description, props = __rest(_a, ["children", "className", "avatarUrl", "icon", "iconClassName", "description"]);
+    var children = _a.children, className = _a.className, avatarUrl = _a.avatarUrl, roundedAvatar = _a.roundedAvatar, icon = _a.icon, iconClassName = _a.iconClassName, description = _a.description, props = __rest(_a, ["children", "className", "avatarUrl", "roundedAvatar", "icon", "iconClassName", "description"]);
     return (React.createElement("td", __assign({ className: classNames("s-whitespace-nowrap s-py-2 s-pl-0.5 s-text-element-800", className || "") }, props),
         React.createElement("div", { className: "s-flex" },
-            avatarUrl && (React.createElement(Avatar, { visual: avatarUrl, size: "xs", className: "s-mr-2" })),
+            avatarUrl && (React.createElement(Avatar, { visual: avatarUrl, size: "xs", className: "s-mr-2", isRounded: roundedAvatar !== null && roundedAvatar !== void 0 ? roundedAvatar : false })),
             icon && (React.createElement(Icon, { visual: icon, size: "sm", className: classNames("s-mr-2 s-text-element-600", iconClassName || "") })),
             React.createElement("div", { className: "s-flex" },
                 React.createElement("span", { className: "s-text-sm s-text-element-800" }, children),