@xcelsior/ui-spreadsheets 1.1.13 → 1.1.14

package/dist/index.mjs

@@ -145,7 +145,162 @@ function cn(...inputs) {
 }
 
 // src/components/SpreadsheetCell.tsx
-import { useState, useRef, useEffect, memo } from "react";
+import { useState as useState2, useRef, useEffect, memo } from "react";
+
+// src/hooks/useSpreadsheetPinning.ts
+import { useCallback, useMemo, useState } from "react";
+var ROW_INDEX_COLUMN_ID = "__row_index__";
+var ROW_INDEX_COLUMN_WIDTH = 80;
+var MIN_PINNED_COLUMN_WIDTH = 100;
+function useSpreadsheetPinning({
+  columns,
+  columnGroups,
+  showRowIndex = true,
+  defaultPinnedColumns = [],
+  defaultPinnedRightColumns = []
+}) {
+  const [pinnedColumns, setPinnedColumns] = useState(() => {
+    const map = /* @__PURE__ */ new Map();
+    defaultPinnedColumns.forEach((col) => {
+      map.set(col, "left");
+    });
+    defaultPinnedRightColumns.forEach((col) => {
+      map.set(col, "right");
+    });
+    return map;
+  });
+  const [collapsedGroups, setCollapsedGroups] = useState(/* @__PURE__ */ new Set());
+  const isRowIndexPinned = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
+  const handleTogglePin = useCallback((columnId) => {
+    setPinnedColumns((prev) => {
+      const newMap = new Map(prev);
+      if (newMap.has(columnId)) {
+        newMap.delete(columnId);
+      } else {
+        newMap.set(columnId, "left");
+      }
+      return newMap;
+    });
+  }, []);
+  const setPinnedColumnsFromIds = useCallback((columnIds) => {
+    const map = /* @__PURE__ */ new Map();
+    columnIds.forEach((col) => {
+      map.set(col, "left");
+    });
+    setPinnedColumns(map);
+  }, []);
+  const handleToggleGroupCollapse = useCallback((groupId) => {
+    setCollapsedGroups((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(groupId)) {
+        newSet.delete(groupId);
+      } else {
+        newSet.add(groupId);
+      }
+      return newSet;
+    });
+  }, []);
+  const visibleColumns = useMemo(() => {
+    if (!columns || !Array.isArray(columns) || columns.length === 0) {
+      return [];
+    }
+    let result = [...columns];
+    if (columnGroups && Array.isArray(columnGroups)) {
+      result = result.filter((column) => {
+        const group = columnGroups.find((g) => g.columns.includes(column.id));
+        if (!group) return true;
+        if (!collapsedGroups.has(group.id)) return true;
+        return pinnedColumns.has(column.id);
+      });
+    }
+    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(([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") {
+        leftPinned.push(column);
+      } else if (pinSide === "right") {
+        rightPinned.push(column);
+      } else {
+        unpinned.push(column);
+      }
+    }
+    leftPinned.sort((a, b) => pinnedLeftIds.indexOf(a.id) - pinnedLeftIds.indexOf(b.id));
+    rightPinned.sort((a, b) => pinnedRightIds.indexOf(a.id) - pinnedRightIds.indexOf(b.id));
+    return [...leftPinned, ...unpinned, ...rightPinned];
+  }, [columns, columnGroups, collapsedGroups, pinnedColumns]);
+  const getColumnLeftOffset = useCallback(
+    (columnId) => {
+      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 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]);
+        const configuredWidth = col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH;
+        offset += Math.max(configuredWidth, MIN_PINNED_COLUMN_WIDTH);
+      }
+      return offset;
+    },
+    [pinnedColumns, columns, showRowIndex]
+  );
+  const isColumnPinned = useCallback(
+    (columnId) => {
+      return pinnedColumns.has(columnId);
+    },
+    [pinnedColumns]
+  );
+  const getColumnPinSide = useCallback(
+    (columnId) => {
+      return pinnedColumns.get(columnId);
+    },
+    [pinnedColumns]
+  );
+  const getColumnRightOffset = useCallback(
+    (columnId) => {
+      const pinnedRight = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").map(([id]) => id);
+      const index = pinnedRight.indexOf(columnId);
+      if (index === -1) return 0;
+      let offset = 0;
+      for (let i = pinnedRight.length - 1; i > index; i--) {
+        const col = columns.find((c) => c.id === pinnedRight[i]);
+        const configuredWidth = col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH;
+        offset += Math.max(configuredWidth, MIN_PINNED_COLUMN_WIDTH);
+      }
+      return offset;
+    },
+    [pinnedColumns, columns]
+  );
+  return {
+    pinnedColumns,
+    isRowIndexPinned,
+    collapsedGroups,
+    visibleColumns,
+    handleTogglePin,
+    handleToggleGroupCollapse,
+    setPinnedColumnsFromIds,
+    getColumnLeftOffset,
+    getColumnRightOffset,
+    isColumnPinned,
+    getColumnPinSide
+  };
+}
+
+// src/components/SpreadsheetCell.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var cellPaddingCompact = "px-1 py-px";
 var cellPaddingNormal = "px-2 py-1";
@@ -182,7 +337,7 @@ var SpreadsheetCell = ({
   onViewComments,
   className
 }) => {
-  const [localValue, setLocalValue] = useState(value);
+  const [localValue, setLocalValue] = useState2(value);
   const inputRef = useRef(null);
   const selectRef = useRef(null);
   useEffect(() => {
@@ -361,6 +516,12 @@ var SpreadsheetCell = ({
       style: {
         backgroundColor: isInSelection ? "rgb(239 246 255)" : getBackgroundColor(),
         minWidth: column.minWidth || column.width,
+        // Pinned columns must have a fixed width so sticky offsets stay correct.
+        // Enforce MIN_PINNED_COLUMN_WIDTH so header actions always fit.
+        ...isPinned && {
+          width: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
+          maxWidth: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH)
+        },
         ...positionStyles,
         ...selectionBorderStyles
       },
@@ -461,7 +622,7 @@ var MemoizedSpreadsheetCell = memo(SpreadsheetCell, (prevProps, nextProps) => {
 MemoizedSpreadsheetCell.displayName = "MemoizedSpreadsheetCell";
 
 // src/components/SpreadsheetFilterDropdown.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var TEXT_OPERATORS = [
   { value: "contains", label: "Contains" },
@@ -507,24 +668,24 @@ var SpreadsheetFilterDropdown = ({
   onClose,
   className
 }) => {
-  const [textOperator, setTextOperator] = useState2(
+  const [textOperator, setTextOperator] = useState3(
     filter?.textCondition?.operator || "contains"
   );
-  const [textValue, setTextValue] = useState2(filter?.textCondition?.value || "");
-  const [numberOperator, setNumberOperator] = useState2(
+  const [textValue, setTextValue] = useState3(filter?.textCondition?.value || "");
+  const [numberOperator, setNumberOperator] = useState3(
     filter?.numberCondition?.operator || "equals"
   );
-  const [numberValue, setNumberValue] = useState2(
+  const [numberValue, setNumberValue] = useState3(
     filter?.numberCondition?.value?.toString() || ""
   );
-  const [numberValueTo, setNumberValueTo] = useState2(
+  const [numberValueTo, setNumberValueTo] = useState3(
     filter?.numberCondition?.valueTo?.toString() || ""
   );
-  const [dateOperator, setDateOperator] = useState2(
+  const [dateOperator, setDateOperator] = useState3(
     filter?.dateCondition?.operator || "equals"
   );
-  const [dateValue, setDateValue] = useState2(filter?.dateCondition?.value || "");
-  const [dateValueTo, setDateValueTo] = useState2(filter?.dateCondition?.valueTo || "");
+  const [dateValue, setDateValue] = useState3(filter?.dateCondition?.value || "");
+  const [dateValueTo, setDateValueTo] = useState3(filter?.dateCondition?.valueTo || "");
   const dropdownRef = useRef2(null);
   const isNumeric = column.type === "number";
   const isDate = column.type === "date";
@@ -1202,6 +1363,12 @@ var SpreadsheetHeader = ({
         backgroundColor: highlightColor || "rgb(243 244 246)",
         // gray-100
         minWidth: column.minWidth || column.width,
+        // Pinned columns must have a fixed width so sticky offsets stay correct.
+        // Enforce MIN_PINNED_COLUMN_WIDTH so header actions (pin/filter/highlight) always fit.
+        ...isPinned && {
+          width: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
+          maxWidth: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH)
+        },
         top: 0,
         // For sticky header
         ...positionStyles
@@ -1234,156 +1401,6 @@ var SpreadsheetHeader = ({
 };
 SpreadsheetHeader.displayName = "SpreadsheetHeader";
 
-// src/hooks/useSpreadsheetPinning.ts
-import { useCallback, useMemo, useState as useState3 } from "react";
-var ROW_INDEX_COLUMN_ID = "__row_index__";
-var ROW_INDEX_COLUMN_WIDTH = 80;
-function useSpreadsheetPinning({
-  columns,
-  columnGroups,
-  showRowIndex = true,
-  defaultPinnedColumns = [],
-  defaultPinnedRightColumns = []
-}) {
-  const [pinnedColumns, setPinnedColumns] = useState3(() => {
-    const map = /* @__PURE__ */ new Map();
-    defaultPinnedColumns.forEach((col) => {
-      map.set(col, "left");
-    });
-    defaultPinnedRightColumns.forEach((col) => {
-      map.set(col, "right");
-    });
-    return map;
-  });
-  const [collapsedGroups, setCollapsedGroups] = useState3(/* @__PURE__ */ new Set());
-  const isRowIndexPinned = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
-  const handleTogglePin = useCallback((columnId) => {
-    setPinnedColumns((prev) => {
-      const newMap = new Map(prev);
-      if (newMap.has(columnId)) {
-        newMap.delete(columnId);
-      } else {
-        newMap.set(columnId, "left");
-      }
-      return newMap;
-    });
-  }, []);
-  const setPinnedColumnsFromIds = useCallback((columnIds) => {
-    const map = /* @__PURE__ */ new Map();
-    columnIds.forEach((col) => {
-      map.set(col, "left");
-    });
-    setPinnedColumns(map);
-  }, []);
-  const handleToggleGroupCollapse = useCallback((groupId) => {
-    setCollapsedGroups((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(groupId)) {
-        newSet.delete(groupId);
-      } else {
-        newSet.add(groupId);
-      }
-      return newSet;
-    });
-  }, []);
-  const visibleColumns = useMemo(() => {
-    if (!columns || !Array.isArray(columns) || columns.length === 0) {
-      return [];
-    }
-    let result = [...columns];
-    if (columnGroups && Array.isArray(columnGroups)) {
-      result = result.filter((column) => {
-        const group = columnGroups.find((g) => g.columns.includes(column.id));
-        if (!group) return true;
-        if (!collapsedGroups.has(group.id)) return true;
-        return pinnedColumns.has(column.id);
-      });
-    }
-    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(([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") {
-        leftPinned.push(column);
-      } else if (pinSide === "right") {
-        rightPinned.push(column);
-      } else {
-        unpinned.push(column);
-      }
-    }
-    leftPinned.sort((a, b) => pinnedLeftIds.indexOf(a.id) - pinnedLeftIds.indexOf(b.id));
-    rightPinned.sort((a, b) => pinnedRightIds.indexOf(a.id) - pinnedRightIds.indexOf(b.id));
-    return [...leftPinned, ...unpinned, ...rightPinned];
-  }, [columns, columnGroups, collapsedGroups, pinnedColumns]);
-  const getColumnLeftOffset = useCallback(
-    (columnId) => {
-      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 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?.minWidth || col?.width || 100;
-      }
-      return offset;
-    },
-    [pinnedColumns, columns, showRowIndex]
-  );
-  const isColumnPinned = useCallback(
-    (columnId) => {
-      return pinnedColumns.has(columnId);
-    },
-    [pinnedColumns]
-  );
-  const getColumnPinSide = useCallback(
-    (columnId) => {
-      return pinnedColumns.get(columnId);
-    },
-    [pinnedColumns]
-  );
-  const getColumnRightOffset = useCallback(
-    (columnId) => {
-      const pinnedRight = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").map(([id]) => id);
-      const index = pinnedRight.indexOf(columnId);
-      if (index === -1) return 0;
-      let offset = 0;
-      for (let i = pinnedRight.length - 1; i > index; i--) {
-        const col = columns.find((c) => c.id === pinnedRight[i]);
-        offset += col?.minWidth || col?.width || 100;
-      }
-      return offset;
-    },
-    [pinnedColumns, columns]
-  );
-  return {
-    pinnedColumns,
-    isRowIndexPinned,
-    collapsedGroups,
-    visibleColumns,
-    handleTogglePin,
-    handleToggleGroupCollapse,
-    setPinnedColumnsFromIds,
-    getColumnLeftOffset,
-    getColumnRightOffset,
-    isColumnPinned,
-    getColumnPinSide
-  };
-}
-
 // src/components/RowIndexColumnHeader.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var cellPaddingCompact3 = "px-1 py-0.5";
@@ -4010,7 +4027,9 @@ function Spreadsheet({
                         position: "sticky",
                         left: isPinnedLeft ? `${getColumnLeftOffset(item.columnId)}px` : void 0,
                         right: !isPinnedLeft ? `${getColumnRightOffset(item.columnId)}px` : void 0,
-                        minWidth: col?.minWidth || col?.width
+                        minWidth: Math.max(col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
+                        width: Math.max(col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
+                        maxWidth: Math.max(col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH)
                       }
                     },
                     `pinned-group-${item.columnId}`