@xcelsior/ui-spreadsheets 1.1.13 → 1.1.14

package/dist/index.js

@@ -187,7 +187,162 @@ function cn(...inputs) {
 }
 
 // src/components/SpreadsheetCell.tsx
+var import_react4 = require("react");
+
+// src/hooks/useSpreadsheetPinning.ts
 var import_react3 = require("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] = (0, import_react3.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] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
+  const isRowIndexPinned = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
+  const handleTogglePin = (0, import_react3.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 = (0, import_react3.useCallback)((columnIds) => {
+    const map = /* @__PURE__ */ new Map();
+    columnIds.forEach((col) => {
+      map.set(col, "left");
+    });
+    setPinnedColumns(map);
+  }, []);
+  const handleToggleGroupCollapse = (0, import_react3.useCallback)((groupId) => {
+    setCollapsedGroups((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(groupId)) {
+        newSet.delete(groupId);
+      } else {
+        newSet.add(groupId);
+      }
+      return newSet;
+    });
+  }, []);
+  const visibleColumns = (0, import_react3.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 = (0, import_react3.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 = (0, import_react3.useCallback)(
+    (columnId) => {
+      return pinnedColumns.has(columnId);
+    },
+    [pinnedColumns]
+  );
+  const getColumnPinSide = (0, import_react3.useCallback)(
+    (columnId) => {
+      return pinnedColumns.get(columnId);
+    },
+    [pinnedColumns]
+  );
+  const getColumnRightOffset = (0, import_react3.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
 var import_jsx_runtime = require("react/jsx-runtime");
 var cellPaddingCompact = "px-1 py-px";
 var cellPaddingNormal = "px-2 py-1";
@@ -224,13 +379,13 @@ var SpreadsheetCell = ({
   onViewComments,
   className
 }) => {
-  const [localValue, setLocalValue] = (0, import_react3.useState)(value);
-  const inputRef = (0, import_react3.useRef)(null);
-  const selectRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const [localValue, setLocalValue] = (0, import_react4.useState)(value);
+  const inputRef = (0, import_react4.useRef)(null);
+  const selectRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     setLocalValue(value);
   }, [value]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (isEditing) {
       if (column.type === "select") {
         selectRef.current?.focus();
@@ -403,6 +558,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
       },
@@ -474,7 +635,7 @@ var SpreadsheetCell = ({
   );
 };
 SpreadsheetCell.displayName = "SpreadsheetCell";
-var MemoizedSpreadsheetCell = (0, import_react3.memo)(SpreadsheetCell, (prevProps, nextProps) => {
+var MemoizedSpreadsheetCell = (0, import_react4.memo)(SpreadsheetCell, (prevProps, nextProps) => {
   if (prevProps.isEditing !== nextProps.isEditing) return false;
   if (prevProps.isFocused !== nextProps.isFocused) return false;
   if (prevProps.value !== nextProps.value) return false;
@@ -503,7 +664,7 @@ var MemoizedSpreadsheetCell = (0, import_react3.memo)(SpreadsheetCell, (prevProp
 MemoizedSpreadsheetCell.displayName = "MemoizedSpreadsheetCell";
 
 // src/components/SpreadsheetFilterDropdown.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TEXT_OPERATORS = [
   { value: "contains", label: "Contains" },
@@ -549,28 +710,28 @@ var SpreadsheetFilterDropdown = ({
   onClose,
   className
 }) => {
-  const [textOperator, setTextOperator] = (0, import_react4.useState)(
+  const [textOperator, setTextOperator] = (0, import_react5.useState)(
     filter?.textCondition?.operator || "contains"
   );
-  const [textValue, setTextValue] = (0, import_react4.useState)(filter?.textCondition?.value || "");
-  const [numberOperator, setNumberOperator] = (0, import_react4.useState)(
+  const [textValue, setTextValue] = (0, import_react5.useState)(filter?.textCondition?.value || "");
+  const [numberOperator, setNumberOperator] = (0, import_react5.useState)(
     filter?.numberCondition?.operator || "equals"
   );
-  const [numberValue, setNumberValue] = (0, import_react4.useState)(
+  const [numberValue, setNumberValue] = (0, import_react5.useState)(
     filter?.numberCondition?.value?.toString() || ""
   );
-  const [numberValueTo, setNumberValueTo] = (0, import_react4.useState)(
+  const [numberValueTo, setNumberValueTo] = (0, import_react5.useState)(
     filter?.numberCondition?.valueTo?.toString() || ""
   );
-  const [dateOperator, setDateOperator] = (0, import_react4.useState)(
+  const [dateOperator, setDateOperator] = (0, import_react5.useState)(
     filter?.dateCondition?.operator || "equals"
   );
-  const [dateValue, setDateValue] = (0, import_react4.useState)(filter?.dateCondition?.value || "");
-  const [dateValueTo, setDateValueTo] = (0, import_react4.useState)(filter?.dateCondition?.valueTo || "");
-  const dropdownRef = (0, import_react4.useRef)(null);
+  const [dateValue, setDateValue] = (0, import_react5.useState)(filter?.dateCondition?.value || "");
+  const [dateValueTo, setDateValueTo] = (0, import_react5.useState)(filter?.dateCondition?.valueTo || "");
+  const dropdownRef = (0, import_react5.useRef)(null);
   const isNumeric = column.type === "number";
   const isDate = column.type === "date";
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         onClose();
@@ -808,7 +969,7 @@ var SpreadsheetFilterDropdown = ({
 SpreadsheetFilterDropdown.displayName = "SpreadsheetFilterDropdown";
 
 // src/components/SpreadsheetToolbar.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SpreadsheetToolbar = ({
   zoom,
@@ -835,9 +996,9 @@ var SpreadsheetToolbar = ({
   onClearFilters,
   className
 }) => {
-  const [showMoreMenu, setShowMoreMenu] = import_react5.default.useState(false);
-  const menuRef = import_react5.default.useRef(null);
-  import_react5.default.useEffect(() => {
+  const [showMoreMenu, setShowMoreMenu] = import_react6.default.useState(false);
+  const menuRef = import_react6.default.useRef(null);
+  import_react6.default.useEffect(() => {
     const handleClickOutside = (event) => {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
         setShowMoreMenu(false);
@@ -1244,6 +1405,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
@@ -1276,156 +1443,6 @@ var SpreadsheetHeader = ({
 };
 SpreadsheetHeader.displayName = "SpreadsheetHeader";
 
-// src/hooks/useSpreadsheetPinning.ts
-var import_react6 = require("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] = (0, import_react6.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] = (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);
-      if (newMap.has(columnId)) {
-        newMap.delete(columnId);
-      } else {
-        newMap.set(columnId, "left");
-      }
-      return newMap;
-    });
-  }, []);
-  const setPinnedColumnsFromIds = (0, import_react6.useCallback)((columnIds) => {
-    const map = /* @__PURE__ */ new Map();
-    columnIds.forEach((col) => {
-      map.set(col, "left");
-    });
-    setPinnedColumns(map);
-  }, []);
-  const handleToggleGroupCollapse = (0, import_react6.useCallback)((groupId) => {
-    setCollapsedGroups((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(groupId)) {
-        newSet.delete(groupId);
-      } else {
-        newSet.add(groupId);
-      }
-      return newSet;
-    });
-  }, []);
-  const visibleColumns = (0, import_react6.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 = (0, import_react6.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 = (0, import_react6.useCallback)(
-    (columnId) => {
-      return pinnedColumns.has(columnId);
-    },
-    [pinnedColumns]
-  );
-  const getColumnPinSide = (0, import_react6.useCallback)(
-    (columnId) => {
-      return pinnedColumns.get(columnId);
-    },
-    [pinnedColumns]
-  );
-  const getColumnRightOffset = (0, import_react6.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
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var cellPaddingCompact3 = "px-1 py-0.5";
@@ -4052,7 +4069,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}`