@xcelsior/ui-spreadsheets 1.1.3 → 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

@@ -1492,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;
@@ -1509,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) => {
@@ -1565,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
@@ -2502,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);
@@ -2550,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,
@@ -3296,7 +3321,10 @@ function Spreadsheet({
   onRowClone,
   onRowDelete,
   onAddCellComment,
+  onToggleCommentResolved,
   onRowHighlight,
+  onColumnHighlight,
+  onCellHighlight,
   showToolbar = true,
   showPagination = true,
   enableRowSelection = true,
@@ -3312,6 +3340,8 @@ function Spreadsheet({
   className,
   emptyMessage = "No data available",
   rowHighlights: externalRowHighlights,
+  columnHighlights: externalColumnHighlights,
+  cellHighlights: externalCellHighlights,
   cellComments: externalCellComments,
   rowActions,
   toolbarMenuItems,
@@ -3368,7 +3398,11 @@ function Spreadsheet({
     setHighlightPickerCell
   } = useSpreadsheetHighlighting({
     externalRowHighlights,
-    onRowHighlight
+    onRowHighlight,
+    externalColumnHighlights,
+    onColumnHighlight,
+    externalCellHighlights,
+    onCellHighlight
   });
   const {
     pinnedColumns,
@@ -3398,7 +3432,8 @@ function Spreadsheet({
     handleToggleCommentResolved
   } = useSpreadsheetComments({
     externalCellComments,
-    onAddCellComment
+    onAddCellComment,
+    onToggleCommentResolved
   });
   const [showSettingsModal, setShowSettingsModal] = (0, import_react16.useState)(false);
   const {