@xcelsior/ui-spreadsheets 1.1.2 → 1.1.4

package/dist/index.d.mts

@@ -277,8 +277,14 @@ interface SpreadsheetProps<T = any> {
     onRowDelete?: (row: T, rowId: string | number) => void;
     /** Callback when a cell comment is added */
     onAddCellComment?: (rowId: string | number, columnId: string, comment: string) => void;
+    /** Callback when a comment's resolved status is toggled */
+    onToggleCommentResolved?: (commentId: string) => void;
     /** Callback when row highlight is toggled */
     onRowHighlight?: (rowId: string | number, color: string | null) => void;
+    /** Callback when column highlight is toggled */
+    onColumnHighlight?: (columnId: string, color: string | null) => void;
+    /** Callback when cell highlight is toggled */
+    onCellHighlight?: (rowId: string | number, columnId: string, color: string | null) => void;
     /** Whether to show the toolbar */
     showToolbar?: boolean;
     /** Whether to show pagination */
@@ -329,6 +335,10 @@ interface SpreadsheetProps<T = any> {
     emptyMessage?: string;
     /** Row highlights (externally controlled) */
     rowHighlights?: CellHighlight[];
+    /** Column highlights (externally controlled) */
+    columnHighlights?: Record<string, string>;
+    /** Cell highlights (externally controlled) */
+    cellHighlights?: CellHighlight[];
     /** Cell comments (externally controlled) */
     cellComments?: CellComment[];
     /** Custom row actions to display in the index column */
@@ -620,7 +630,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, pageSizeOptions, onSave, settings: initialSettings, onSettingsChange, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, sortConfig: controlledSortConfig, onPageChange, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onToggleCommentResolved, onRowHighlight, onColumnHighlight, onCellHighlight, showToolbar, showPagination, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, pageSizeOptions, onSave, settings: initialSettings, onSettingsChange, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, columnHighlights: externalColumnHighlights, cellHighlights: externalCellHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, sortConfig: controlledSortConfig, onPageChange, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -277,8 +277,14 @@ interface SpreadsheetProps<T = any> {
     onRowDelete?: (row: T, rowId: string | number) => void;
     /** Callback when a cell comment is added */
     onAddCellComment?: (rowId: string | number, columnId: string, comment: string) => void;
+    /** Callback when a comment's resolved status is toggled */
+    onToggleCommentResolved?: (commentId: string) => void;
     /** Callback when row highlight is toggled */
     onRowHighlight?: (rowId: string | number, color: string | null) => void;
+    /** Callback when column highlight is toggled */
+    onColumnHighlight?: (columnId: string, color: string | null) => void;
+    /** Callback when cell highlight is toggled */
+    onCellHighlight?: (rowId: string | number, columnId: string, color: string | null) => void;
     /** Whether to show the toolbar */
     showToolbar?: boolean;
     /** Whether to show pagination */
@@ -329,6 +335,10 @@ interface SpreadsheetProps<T = any> {
     emptyMessage?: string;
     /** Row highlights (externally controlled) */
     rowHighlights?: CellHighlight[];
+    /** Column highlights (externally controlled) */
+    columnHighlights?: Record<string, string>;
+    /** Cell highlights (externally controlled) */
+    cellHighlights?: CellHighlight[];
     /** Cell comments (externally controlled) */
     cellComments?: CellComment[];
     /** Custom row actions to display in the index column */
@@ -620,7 +630,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, pageSizeOptions, onSave, settings: initialSettings, onSettingsChange, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, sortConfig: controlledSortConfig, onPageChange, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onToggleCommentResolved, onRowHighlight, onColumnHighlight, onCellHighlight, showToolbar, showPagination, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, pageSizeOptions, onSave, settings: initialSettings, onSettingsChange, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, columnHighlights: externalColumnHighlights, cellHighlights: externalCellHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, sortConfig: controlledSortConfig, onPageChange, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }

package/dist/index.js

@@ -1121,71 +1121,56 @@ function ColumnHeaderActions({
   unpinnedTitle = "Pin column",
   className
 }) {
-  const handleClick = (e) => {
-    e.stopPropagation();
-  };
-  const handleKeyDown = (e) => {
-    e.stopPropagation();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "button",
-    {
-      type: "button",
-      className: cn("flex items-center gap-0.5", className),
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      children: [
-        enableFiltering && onFilterClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onFilterClick();
-            },
-            className: cn(
-              "p-0.5 hover:bg-gray-200 rounded transition-opacity",
-              hasActiveFilter ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
-            ),
-            title: filterTitle,
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiFilter, { className: "h-3 w-3" })
-          }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex items-center gap-0.5", className), children: [
+    enableFiltering && onFilterClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onFilterClick();
+        },
+        className: cn(
+          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
+          hasActiveFilter ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
         ),
-        enableHighlighting && onHighlightClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onHighlightClick();
-            },
-            className: cn(
-              "p-0.5 hover:bg-gray-200 rounded transition-opacity",
-              hasActiveHighlight ? "text-amber-500 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
-            ),
-            title: highlightTitle,
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AiFillHighlight, { className: "h-3 w-3" })
-          }
+        title: filterTitle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiFilter, { className: "h-3 w-3" })
+      }
+    ),
+    enableHighlighting && onHighlightClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onHighlightClick();
+        },
+        className: cn(
+          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
+          hasActiveHighlight ? "text-amber-500 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
         ),
-        enablePinning && onPinClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onPinClick();
-            },
-            className: cn(
-              "p-0.5 hover:bg-gray-200 rounded transition-opacity",
-              isPinned ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
-            ),
-            title: isPinned ? pinnedTitle : unpinnedTitle,
-            children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MdPushPin, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MdOutlinePushPin, { className: "h-3 w-3" })
-          }
-        )
-      ]
-    }
-  );
+        title: highlightTitle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AiFillHighlight, { className: "h-3 w-3" })
+      }
+    ),
+    enablePinning && onPinClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onPinClick();
+        },
+        className: cn(
+          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
+          isPinned ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
+        ),
+        title: isPinned ? pinnedTitle : unpinnedTitle,
+        children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MdPushPin, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MdOutlinePushPin, { className: "h-3 w-3" })
+      }
+    )
+  ] });
 }
 ColumnHeaderActions.displayName = "ColumnHeaderActions";
 
@@ -1507,15 +1492,21 @@ var HIGHLIGHT_COLORS = {
 };
 function useSpreadsheetHighlighting({
   externalRowHighlights,
-  onRowHighlight
+  onRowHighlight,
+  externalColumnHighlights,
+  onColumnHighlight,
+  externalCellHighlights,
+  onCellHighlight
 } = {}) {
-  const [cellHighlights, setCellHighlights] = (0, import_react7.useState)([]);
+  const [cellHighlightsInternal, setCellHighlightsInternal] = (0, import_react7.useState)([]);
   const [rowHighlightsInternal, setRowHighlightsInternal] = (0, import_react7.useState)([]);
-  const [columnHighlights, setColumnHighlights] = (0, import_react7.useState)({});
+  const [columnHighlightsInternal, setColumnHighlightsInternal] = (0, import_react7.useState)({});
   const [highlightPickerRow, setHighlightPickerRow] = (0, import_react7.useState)(null);
   const [highlightPickerColumn, setHighlightPickerColumn] = (0, import_react7.useState)(null);
   const [highlightPickerCell, setHighlightPickerCell] = (0, import_react7.useState)(null);
+  const cellHighlights = externalCellHighlights || cellHighlightsInternal;
   const rowHighlights = externalRowHighlights || rowHighlightsInternal;
+  const columnHighlights = externalColumnHighlights || columnHighlightsInternal;
   const getCellHighlight = (0, import_react7.useCallback)(
     (rowId, columnId) => {
       return cellHighlights.find((h) => h.rowId === rowId && h.columnId === columnId)?.color;
@@ -1524,24 +1515,28 @@ function useSpreadsheetHighlighting({
   );
   const handleCellHighlightToggle = (0, import_react7.useCallback)(
     (rowId, columnId, color = "#fef08a") => {
-      setCellHighlights((prev) => {
-        const existing = prev.find((h) => h.rowId === rowId && h.columnId === columnId);
-        if (existing) {
-          if (color === null) {
-            return prev.filter((h) => !(h.rowId === rowId && h.columnId === columnId));
+      if (onCellHighlight) {
+        onCellHighlight(rowId, columnId, color);
+      } else {
+        setCellHighlightsInternal((prev) => {
+          const existing = prev.find((h) => h.rowId === rowId && h.columnId === columnId);
+          if (existing) {
+            if (color === null) {
+              return prev.filter((h) => !(h.rowId === rowId && h.columnId === columnId));
+            }
+            return prev.map(
+              (h) => h.rowId === rowId && h.columnId === columnId ? { ...h, color } : h
+            );
           }
-          return prev.map(
-            (h) => h.rowId === rowId && h.columnId === columnId ? { ...h, color } : h
-          );
-        }
-        if (color) {
-          return [...prev, { rowId, columnId, color }];
-        }
-        return prev;
-      });
+          if (color) {
+            return [...prev, { rowId, columnId, color }];
+          }
+          return prev;
+        });
+      }
       setHighlightPickerCell(null);
     },
-    []
+    [onCellHighlight]
   );
   const getRowHighlight = (0, import_react7.useCallback)(
     (rowId) => {
@@ -1580,22 +1575,29 @@ function useSpreadsheetHighlighting({
     },
     [columnHighlights]
   );
-  const handleColumnHighlightToggle = (0, import_react7.useCallback)((columnId, color) => {
-    setColumnHighlights((prev) => {
-      const newHighlights = { ...prev };
-      if (color === null) {
-        delete newHighlights[columnId];
+  const handleColumnHighlightToggle = (0, import_react7.useCallback)(
+    (columnId, color) => {
+      if (onColumnHighlight) {
+        onColumnHighlight(columnId, color);
       } else {
-        newHighlights[columnId] = color;
+        setColumnHighlightsInternal((prev) => {
+          const newHighlights = { ...prev };
+          if (color === null) {
+            delete newHighlights[columnId];
+          } else {
+            newHighlights[columnId] = color;
+          }
+          return newHighlights;
+        });
       }
-      return newHighlights;
-    });
-    setHighlightPickerColumn(null);
-  }, []);
+      setHighlightPickerColumn(null);
+    },
+    [onColumnHighlight]
+  );
   const clearAllHighlights = (0, import_react7.useCallback)(() => {
-    setCellHighlights([]);
+    setCellHighlightsInternal([]);
     setRowHighlightsInternal([]);
-    setColumnHighlights({});
+    setColumnHighlightsInternal({});
   }, []);
   return {
     // Cell highlights
@@ -2230,13 +2232,14 @@ function useSpreadsheetFiltering({
   onSortChange,
   serverSide = false,
   controlledFilters,
-  controlledSortConfig
+  controlledSortConfig,
+  defaultSortConfig
 }) {
   const [internalFilters, setInternalFilters] = (0, import_react11.useState)(
     {}
   );
   const [internalSortConfig, setInternalSortConfig] = (0, import_react11.useState)(
-    null
+    defaultSortConfig ?? null
   );
   const [activeFilterColumn, setActiveFilterColumn] = (0, import_react11.useState)(null);
   const filters = controlledFilters ?? internalFilters;
@@ -2516,7 +2519,8 @@ function useSpreadsheetFiltering({
 var import_react12 = require("react");
 function useSpreadsheetComments({
   externalCellComments,
-  onAddCellComment
+  onAddCellComment,
+  onToggleCommentResolved
 } = {}) {
   const [cellCommentsInternal, setCellCommentsInternal] = (0, import_react12.useState)([]);
   const [commentModalCell, setCommentModalCell] = (0, import_react12.useState)(null);
@@ -2564,11 +2568,18 @@ function useSpreadsheetComments({
     },
     [onAddCellComment]
   );
-  const handleToggleCommentResolved = (0, import_react12.useCallback)((commentId) => {
-    setCellCommentsInternal(
-      (prev) => prev.map((c) => c.id === commentId ? { ...c, resolved: !c.resolved } : c)
-    );
-  }, []);
+  const handleToggleCommentResolved = (0, import_react12.useCallback)(
+    (commentId) => {
+      if (onToggleCommentResolved) {
+        onToggleCommentResolved(commentId);
+      } else {
+        setCellCommentsInternal(
+          (prev) => prev.map((c) => c.id === commentId ? { ...c, resolved: !c.resolved } : c)
+        );
+      }
+    },
+    [onToggleCommentResolved]
+  );
   return {
     // Comments data
     cellComments,
@@ -3310,7 +3321,10 @@ function Spreadsheet({
   onRowClone,
   onRowDelete,
   onAddCellComment,
+  onToggleCommentResolved,
   onRowHighlight,
+  onColumnHighlight,
+  onCellHighlight,
   showToolbar = true,
   showPagination = true,
   enableRowSelection = true,
@@ -3326,6 +3340,8 @@ function Spreadsheet({
   className,
   emptyMessage = "No data available",
   rowHighlights: externalRowHighlights,
+  columnHighlights: externalColumnHighlights,
+  cellHighlights: externalCellHighlights,
   cellComments: externalCellComments,
   rowActions,
   toolbarMenuItems,
@@ -3364,7 +3380,8 @@ function Spreadsheet({
     onSortChange,
     serverSide,
     controlledFilters,
-    controlledSortConfig: controlledSortConfig ?? spreadsheetSettings?.defaultSort
+    controlledSortConfig,
+    defaultSortConfig: spreadsheetSettings.defaultSort
   });
   const {
     getCellHighlight,
@@ -3381,7 +3398,11 @@ function Spreadsheet({
     setHighlightPickerCell
   } = useSpreadsheetHighlighting({
     externalRowHighlights,
-    onRowHighlight
+    onRowHighlight,
+    externalColumnHighlights,
+    onColumnHighlight,
+    externalCellHighlights,
+    onCellHighlight
   });
   const {
     pinnedColumns,
@@ -3411,7 +3432,8 @@ function Spreadsheet({
     handleToggleCommentResolved
   } = useSpreadsheetComments({
     externalCellComments,
-    onAddCellComment
+    onAddCellComment,
+    onToggleCommentResolved
   });
   const [showSettingsModal, setShowSettingsModal] = (0, import_react16.useState)(false);
   const {