@xcelsior/ui-spreadsheets 1.1.1 → 1.1.3

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",
@@ -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";
 
@@ -1280,22 +1265,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 +1287,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 +1318,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 +1343,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 +1380,9 @@ function useSpreadsheetPinning({
     collapsedGroups,
     visibleColumns,
     handleTogglePin,
-    handleToggleRowIndexPin,
     handleToggleGroupCollapse,
     setPinnedColumnsFromIds,
-    setRowIndexPinned,
     getColumnLeftOffset,
-    getRowIndexLeftOffset,
     isColumnPinned,
     getColumnPinSide
   };
@@ -2243,13 +2215,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;
@@ -3377,7 +3350,8 @@ function Spreadsheet({
     onSortChange,
     serverSide,
     controlledFilters,
-    controlledSortConfig: controlledSortConfig ?? spreadsheetSettings?.defaultSort
+    controlledSortConfig,
+    defaultSortConfig: spreadsheetSettings.defaultSort
   });
   const {
     getCellHighlight,
@@ -3409,7 +3383,8 @@ function Spreadsheet({
     getColumnPinSide
   } = useSpreadsheetPinning({
     columns,
-    columnGroups
+    columnGroups,
+    defaultPinnedColumns: initialSettings?.defaultPinnedColumns
   });
   const {
     getCellComments,
@@ -3478,6 +3453,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;