@xcelsior/ui-spreadsheets 1.1.0 → 1.1.2

package/dist/index.d.mts

@@ -620,7 +620,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, 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, 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 namespace Spreadsheet {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -620,7 +620,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, 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, 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 namespace Spreadsheet {
     var displayName: string;
 }

package/dist/index.js

@@ -370,7 +370,7 @@ var SpreadsheetCell = ({
       onKeyDown: handleCellKeyDown,
       "data-cell-id": `${rowId}-${column.id}`,
       className: cn(
-        "border border-gray-200 group cursor-pointer select-none",
+        "border border-gray-200 group cursor-pointer transition-colors select-none",
         compactMode ? "text-[10px]" : "text-xs",
         cellPadding,
         column.align === "right" && "text-right",
@@ -1280,22 +1280,17 @@ function useSpreadsheetPinning({
   columns,
   columnGroups,
   showRowIndex = true,
-  defaultPinnedColumns = [],
-  defaultPinRowIndex = false
+  defaultPinnedColumns = []
 }) {
   const [pinnedColumns, setPinnedColumns] = (0, import_react6.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     defaultPinnedColumns.forEach((col) => {
-      if (col !== ROW_INDEX_COLUMN_ID) {
-        map.set(col, "left");
-      }
+      map.set(col, "left");
     });
     return map;
   });
-  const [isRowIndexPinned, setIsRowIndexPinned] = (0, import_react6.useState)(
-    defaultPinRowIndex || defaultPinnedColumns.includes(ROW_INDEX_COLUMN_ID)
-  );
   const [collapsedGroups, setCollapsedGroups] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
+  const isRowIndexPinned = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
   const handleTogglePin = (0, import_react6.useCallback)((columnId) => {
     setPinnedColumns((prev) => {
       const newMap = new Map(prev);
@@ -1307,21 +1302,12 @@ function useSpreadsheetPinning({
       return newMap;
     });
   }, []);
-  const handleToggleRowIndexPin = (0, import_react6.useCallback)(() => {
-    setIsRowIndexPinned((prev) => !prev);
-  }, []);
   const setPinnedColumnsFromIds = (0, import_react6.useCallback)((columnIds) => {
     const map = /* @__PURE__ */ new Map();
     columnIds.forEach((col) => {
-      if (col !== ROW_INDEX_COLUMN_ID) {
-        map.set(col, "left");
-      }
+      map.set(col, "left");
     });
     setPinnedColumns(map);
-    setIsRowIndexPinned(columnIds.includes(ROW_INDEX_COLUMN_ID));
-  }, []);
-  const setRowIndexPinned = (0, import_react6.useCallback)((pinned) => {
-    setIsRowIndexPinned(pinned);
   }, []);
   const handleToggleGroupCollapse = (0, import_react6.useCallback)((groupId) => {
     setCollapsedGroups((prev) => {
@@ -1347,14 +1333,17 @@ function useSpreadsheetPinning({
         return pinnedColumns.has(column.id);
       });
     }
-    if (pinnedColumns.size === 0) {
+    const nonRowIndexPinned = Array.from(pinnedColumns.keys()).filter(
+      (id) => id !== ROW_INDEX_COLUMN_ID
+    );
+    if (nonRowIndexPinned.length === 0) {
       return result;
     }
     const leftPinned = [];
     const unpinned = [];
     const rightPinned = [];
-    const pinnedLeftIds = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "left").map(([id]) => id);
-    const pinnedRightIds = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").map(([id]) => id);
+    const pinnedLeftIds = Array.from(pinnedColumns.entries()).filter(([id, side]) => side === "left" && id !== ROW_INDEX_COLUMN_ID).map(([id]) => id);
+    const pinnedRightIds = Array.from(pinnedColumns.entries()).filter(([id, side]) => side === "right" && id !== ROW_INDEX_COLUMN_ID).map(([id]) => id);
     for (const column of result) {
       const pinSide = pinnedColumns.get(column.id);
       if (pinSide === "left") {
@@ -1369,23 +1358,24 @@ function useSpreadsheetPinning({
     rightPinned.sort((a, b) => pinnedRightIds.indexOf(a.id) - pinnedRightIds.indexOf(b.id));
     return [...leftPinned, ...unpinned, ...rightPinned];
   }, [columns, columnGroups, collapsedGroups, pinnedColumns]);
-  const getRowIndexLeftOffset = (0, import_react6.useCallback)(() => {
-    return 0;
-  }, []);
   const getColumnLeftOffset = (0, import_react6.useCallback)(
     (columnId) => {
-      const pinnedLeft = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "left").map(([id]) => id);
+      if (columnId === ROW_INDEX_COLUMN_ID) {
+        return 0;
+      }
+      const pinnedLeft = Array.from(pinnedColumns.entries()).filter(([id, side]) => side === "left" && id !== ROW_INDEX_COLUMN_ID).map(([id]) => id);
       const index = pinnedLeft.indexOf(columnId);
-      const baseOffset = showRowIndex && isRowIndexPinned ? ROW_INDEX_COLUMN_WIDTH : 0;
+      const isRowIndexPinnedNow = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
+      const baseOffset = showRowIndex && isRowIndexPinnedNow ? ROW_INDEX_COLUMN_WIDTH : 0;
       if (index === -1) return baseOffset;
       let offset = baseOffset;
       for (let i = 0; i < index; i++) {
         const col = columns.find((c) => c.id === pinnedLeft[i]);
-        offset += col?.width || col?.minWidth || 100;
+        offset += col?.minWidth || col?.width || 100;
       }
       return offset;
     },
-    [pinnedColumns, columns, showRowIndex, isRowIndexPinned]
+    [pinnedColumns, columns, showRowIndex]
   );
   const isColumnPinned = (0, import_react6.useCallback)(
     (columnId) => {
@@ -1405,12 +1395,9 @@ function useSpreadsheetPinning({
     collapsedGroups,
     visibleColumns,
     handleTogglePin,
-    handleToggleRowIndexPin,
     handleToggleGroupCollapse,
     setPinnedColumnsFromIds,
-    setRowIndexPinned,
     getColumnLeftOffset,
-    getRowIndexLeftOffset,
     isColumnPinned,
     getColumnPinSide
   };
@@ -3347,6 +3334,7 @@ function Spreadsheet({
   totalItems,
   currentPage: controlledCurrentPage,
   pageSize: controlledPageSize,
+  sortConfig: controlledSortConfig,
   onPageChange,
   filters: controlledFilters
 }) {
@@ -3376,7 +3364,7 @@ function Spreadsheet({
     onSortChange,
     serverSide,
     controlledFilters,
-    controlledSortConfig: spreadsheetSettings?.defaultSort
+    controlledSortConfig: controlledSortConfig ?? spreadsheetSettings?.defaultSort
   });
   const {
     getCellHighlight,
@@ -3408,7 +3396,8 @@ function Spreadsheet({
     getColumnPinSide
   } = useSpreadsheetPinning({
     columns,
-    columnGroups
+    columnGroups,
+    defaultPinnedColumns: initialSettings?.defaultPinnedColumns
   });
   const {
     getCellComments,
@@ -3477,6 +3466,27 @@ function Spreadsheet({
       defaultSort: sortConfig
     }));
   }, [sortConfig]);
+  (0, import_react16.useEffect)(() => {
+    const pinnedColumnIds = Array.from(pinnedColumns.keys());
+    setSpreadsheetSettings((prev) => {
+      const prevIds = prev.defaultPinnedColumns;
+      if (prevIds.length === pinnedColumnIds.length && prevIds.every((id, idx) => id === pinnedColumnIds[idx])) {
+        return prev;
+      }
+      return {
+        ...prev,
+        defaultPinnedColumns: pinnedColumnIds
+      };
+    });
+  }, [pinnedColumns]);
+  const isInitialMount = (0, import_react16.useRef)(true);
+  (0, import_react16.useEffect)(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    onSettingsChange?.(spreadsheetSettings);
+  }, [spreadsheetSettings, onSettingsChange]);
   const applyUndo = (0, import_react16.useCallback)(() => {
     const entry = popUndoEntry();
     if (!entry || !onCellsEdit) return;