@xcelsior/ui-spreadsheets 1.0.11 → 1.0.13

package/dist/index.d.mts

@@ -297,6 +297,8 @@ interface SpreadsheetProps<T = any> {
     cellComments?: CellComment[];
     /** Custom row actions to display in the index column */
     rowActions?: RowAction<T>[];
+    /** Custom menu items to display in the toolbar's "More" dropdown menu */
+    toolbarMenuItems?: ToolbarMenuItem[];
     /**
      * Enable server-side mode for filtering, sorting, and pagination.
      * When enabled, the component will NOT perform client-side filtering, sorting, or pagination.
@@ -450,6 +452,21 @@ interface SpreadsheetFilterDropdownProps {
     /** Custom className */
     className?: string;
 }
+/**
+ * A menu item that can be added to the toolbar's "More" dropdown menu
+ */
+interface ToolbarMenuItem {
+    /** Unique identifier for the menu item */
+    id: string;
+    /** Display label for the menu item */
+    label: string;
+    /** Icon component to display (e.g., from react-icons) */
+    icon?: React$1.ReactNode;
+    /** Callback when menu item is clicked */
+    onClick: () => void;
+    /** Whether the menu item is disabled */
+    disabled?: boolean;
+}
 /**
  * Props for SpreadsheetToolbar component
  */
@@ -492,8 +509,8 @@ interface SpreadsheetToolbarProps {
     onClearSelection: () => void;
     /** Callback for manual save */
     onSave?: () => void;
-    /** Callback for export */
-    onExport?: () => void;
+    /** Custom menu items to display in the "More" dropdown menu */
+    menuItems?: ToolbarMenuItem[];
     /** Callback for settings */
     onSettings?: () => void;
     /** Callback for keyboard shortcuts */
@@ -556,7 +573,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }
@@ -672,4 +689,4 @@ interface SpreadsheetSettingsModalProps {
  */
 declare const SpreadsheetSettingsModal: React.FC<SpreadsheetSettingsModalProps>;
 
-export { type CellComment, type CellHighlight, type CellPosition, type PaginationState, type RowAction, type SelectionState, Spreadsheet, MemoizedSpreadsheetCell as SpreadsheetCell, type SpreadsheetCellProps, type SpreadsheetColumn, type SpreadsheetColumnFilter, type SpreadsheetColumnGroup, type SpreadsheetColumnGroupHeaderProps, SpreadsheetFilterDropdown, type SpreadsheetFilterDropdownProps, SpreadsheetHeader, type SpreadsheetHeaderProps, type SpreadsheetProps, type SpreadsheetSettings, SpreadsheetSettingsModal, type SpreadsheetSortConfig, type SpreadsheetState, SpreadsheetToolbar, type SpreadsheetToolbarProps };
+export { type CellComment, type CellHighlight, type CellPosition, type PaginationState, type RowAction, type SelectionState, Spreadsheet, MemoizedSpreadsheetCell as SpreadsheetCell, type SpreadsheetCellProps, type SpreadsheetColumn, type SpreadsheetColumnFilter, type SpreadsheetColumnGroup, type SpreadsheetColumnGroupHeaderProps, SpreadsheetFilterDropdown, type SpreadsheetFilterDropdownProps, SpreadsheetHeader, type SpreadsheetHeaderProps, type SpreadsheetProps, type SpreadsheetSettings, SpreadsheetSettingsModal, type SpreadsheetSortConfig, type SpreadsheetState, SpreadsheetToolbar, type SpreadsheetToolbarProps, type ToolbarMenuItem };

package/dist/index.d.ts

@@ -297,6 +297,8 @@ interface SpreadsheetProps<T = any> {
     cellComments?: CellComment[];
     /** Custom row actions to display in the index column */
     rowActions?: RowAction<T>[];
+    /** Custom menu items to display in the toolbar's "More" dropdown menu */
+    toolbarMenuItems?: ToolbarMenuItem[];
     /**
      * Enable server-side mode for filtering, sorting, and pagination.
      * When enabled, the component will NOT perform client-side filtering, sorting, or pagination.
@@ -450,6 +452,21 @@ interface SpreadsheetFilterDropdownProps {
     /** Custom className */
     className?: string;
 }
+/**
+ * A menu item that can be added to the toolbar's "More" dropdown menu
+ */
+interface ToolbarMenuItem {
+    /** Unique identifier for the menu item */
+    id: string;
+    /** Display label for the menu item */
+    label: string;
+    /** Icon component to display (e.g., from react-icons) */
+    icon?: React$1.ReactNode;
+    /** Callback when menu item is clicked */
+    onClick: () => void;
+    /** Whether the menu item is disabled */
+    disabled?: boolean;
+}
 /**
  * Props for SpreadsheetToolbar component
  */
@@ -492,8 +509,8 @@ interface SpreadsheetToolbarProps {
     onClearSelection: () => void;
     /** Callback for manual save */
     onSave?: () => void;
-    /** Callback for export */
-    onExport?: () => void;
+    /** Custom menu items to display in the "More" dropdown menu */
+    menuItems?: ToolbarMenuItem[];
     /** Callback for settings */
     onSettings?: () => void;
     /** Callback for keyboard shortcuts */
@@ -556,7 +573,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }
@@ -672,4 +689,4 @@ interface SpreadsheetSettingsModalProps {
  */
 declare const SpreadsheetSettingsModal: React.FC<SpreadsheetSettingsModalProps>;
 
-export { type CellComment, type CellHighlight, type CellPosition, type PaginationState, type RowAction, type SelectionState, Spreadsheet, MemoizedSpreadsheetCell as SpreadsheetCell, type SpreadsheetCellProps, type SpreadsheetColumn, type SpreadsheetColumnFilter, type SpreadsheetColumnGroup, type SpreadsheetColumnGroupHeaderProps, SpreadsheetFilterDropdown, type SpreadsheetFilterDropdownProps, SpreadsheetHeader, type SpreadsheetHeaderProps, type SpreadsheetProps, type SpreadsheetSettings, SpreadsheetSettingsModal, type SpreadsheetSortConfig, type SpreadsheetState, SpreadsheetToolbar, type SpreadsheetToolbarProps };
+export { type CellComment, type CellHighlight, type CellPosition, type PaginationState, type RowAction, type SelectionState, Spreadsheet, MemoizedSpreadsheetCell as SpreadsheetCell, type SpreadsheetCellProps, type SpreadsheetColumn, type SpreadsheetColumnFilter, type SpreadsheetColumnGroup, type SpreadsheetColumnGroupHeaderProps, SpreadsheetFilterDropdown, type SpreadsheetFilterDropdownProps, SpreadsheetHeader, type SpreadsheetHeaderProps, type SpreadsheetProps, type SpreadsheetSettings, SpreadsheetSettingsModal, type SpreadsheetSortConfig, type SpreadsheetState, SpreadsheetToolbar, type SpreadsheetToolbarProps, type ToolbarMenuItem };

package/dist/index.js

@@ -134,9 +134,6 @@ function HiCog(props) {
 function HiDotsVertical(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" } }] })(props);
 }
-function HiDownload(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z", "clipRule": "evenodd" } }] })(props);
-}
 function HiDuplicate(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z" } }, { "tag": "path", "attr": { "d": "M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z" } }] })(props);
 }
@@ -375,7 +372,7 @@ var SpreadsheetCell = ({
           {
             className: cn(
               "flex-1 truncate",
-              isEditable && "cursor-text hover:bg-gray-50 px-0.5 rounded min-h-[18px] flex items-center bg-blue-50"
+              isEditable && "cursor-text hover:bg-gray-50 px-0.5 rounded min-h-[18px] flex items-center bg-yellow-50/50"
             ),
             title: String(value ?? ""),
             children: renderContent()
@@ -806,7 +803,7 @@ var SpreadsheetToolbar = ({
   onRedo,
   onClearSelection,
   onSave,
-  onExport,
+  menuItems,
   onSettings,
   onShowShortcuts,
   hasActiveFilters,
@@ -1062,22 +1059,27 @@ var SpreadsheetToolbar = ({
                   ]
                 }
               ),
-              (onSettings || onShowShortcuts) && onExport && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-t border-gray-100 my-1" }),
-              onExport && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              menuItems && menuItems.length > 0 && (onSettings || onShowShortcuts) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-t border-gray-100 my-1" }),
+              menuItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "button",
                 {
                   type: "button",
+                  disabled: item.disabled,
                   onClick: () => {
-                    onExport();
+                    item.onClick();
                     setShowMoreMenu(false);
                   },
-                  className: "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
+                  className: cn(
+                    "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
+                    item.disabled && "opacity-50 cursor-not-allowed"
+                  ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiDownload, { className: "h-3.5 w-3.5 text-gray-500" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-gray-700", children: "Export" })
+                    item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "h-3.5 w-3.5 text-gray-500 flex items-center justify-center", children: item.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-gray-700", children: item.label })
                   ]
-                }
-              )
+                },
+                item.id
+              ))
             ] })
           ] })
         ] })
@@ -2900,6 +2902,7 @@ function Spreadsheet({
   rowHighlights: externalRowHighlights,
   cellComments: externalCellComments,
   rowActions,
+  toolbarMenuItems,
   // Server-side mode props
   serverSide = false,
   totalItems,
@@ -3304,7 +3307,7 @@ function Spreadsheet({
         onSave: handleSave,
         onSettings: () => setShowSettingsModal(true),
         onShowShortcuts: () => setShowKeyboardShortcuts(true),
-        onExport: () => console.log("Export clicked")
+        menuItems: toolbarMenuItems
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: tableRef, className: "flex-1 overflow-auto border border-gray-200 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(