@xcelsior/ui-spreadsheets 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xcelsior/ui-spreadsheets",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/Spreadsheet.tsx

@@ -102,6 +102,7 @@ export function Spreadsheet<T extends Record<string, any>>({
     rowHighlights: externalRowHighlights,
     cellComments: externalCellComments,
     rowActions,
+    toolbarMenuItems,
     // Server-side mode props
     serverSide = false,
     totalItems,
@@ -595,7 +596,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                     onSave={handleSave}
                     onSettings={() => setShowSettingsModal(true)}
                     onShowShortcuts={() => setShowKeyboardShortcuts(true)}
-                    onExport={() => console.log('Export clicked')}
+                    menuItems={toolbarMenuItems}
                 />
             )}
 

package/src/components/SpreadsheetCell.tsx

@@ -230,7 +230,7 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
                         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'
+                                'cursor-text hover:bg-gray-50 px-0.5 rounded min-h-[18px] flex items-center bg-yellow-50/50'
                         )}
                         title={String(value ?? '')}
                     >

package/src/components/SpreadsheetToolbar.tsx

@@ -3,7 +3,6 @@ import {
     HiCheck,
     HiCog,
     HiDotsVertical,
-    HiDownload,
     HiFilter,
     HiOutlineQuestionMarkCircle,
     HiReply,
@@ -56,7 +55,7 @@ export const SpreadsheetToolbar: React.FC<SpreadsheetToolbarProps> = ({
     onRedo,
     onClearSelection,
     onSave,
-    onExport,
+    menuItems,
     onSettings,
     onShowShortcuts,
     hasActiveFilters,
@@ -318,23 +317,33 @@ export const SpreadsheetToolbar: React.FC<SpreadsheetToolbarProps> = ({
                                 </button>
                             )}
 
-                            {(onSettings || onShowShortcuts) && onExport && (
+                            {/* Custom menu items */}
+                            {menuItems && menuItems.length > 0 && (onSettings || onShowShortcuts) && (
                                 <div className="border-t border-gray-100 my-1" />
                             )}
 
-                            {onExport && (
+                            {menuItems?.map((item) => (
                                 <button
+                                    key={item.id}
                                     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'
+                                    )}
                                 >
-                                    <HiDownload className="h-3.5 w-3.5 text-gray-500" />
-                                    <span className="text-gray-700">Export</span>
+                                    {item.icon && (
+                                        <span className="h-3.5 w-3.5 text-gray-500 flex items-center justify-center">
+                                            {item.icon}
+                                        </span>
+                                    )}
+                                    <span className="text-gray-700">{item.label}</span>
                                 </button>
-                            )}
+                            ))}
                         </div>
                     )}
                 </div>

package/src/index.ts

@@ -28,4 +28,5 @@ export type {
     SelectionState,
     PaginationState,
     RowAction,
+    ToolbarMenuItem,
 } from './types';

package/src/types.ts

@@ -356,6 +356,8 @@ export 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[];
 
     // ==================== SERVER-SIDE MODE ====================
     /**
@@ -541,6 +543,22 @@ export interface SpreadsheetPaginationProps {
     className?: string;
 }
 
+/**
+ * A menu item that can be added to the toolbar's "More" dropdown menu
+ */
+export 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.ReactNode;
+    /** Callback when menu item is clicked */
+    onClick: () => void;
+    /** Whether the menu item is disabled */
+    disabled?: boolean;
+}
+
 /**
  * Props for SpreadsheetToolbar component
  */
@@ -583,8 +601,8 @@ export 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 */