@xcelsior/ui-spreadsheets 1.1.10 → 1.1.12

package/dist/index.js

@@ -403,6 +403,11 @@ var SpreadsheetCell = ({
       style: {
         backgroundColor: isInSelection ? "rgb(239 246 255)" : getBackgroundColor(),
         minWidth: column.minWidth || column.width,
+        // Pinned columns need fixed width so sticky offset calculations are accurate
+        ...isPinned && {
+          width: column.minWidth || column.width,
+          maxWidth: column.minWidth || column.width
+        },
         ...positionStyles,
         ...selectionBorderStyles
       },
@@ -1244,6 +1249,11 @@ var SpreadsheetHeader = ({
         backgroundColor: highlightColor || "rgb(243 244 246)",
         // gray-100
         minWidth: column.minWidth || column.width,
+        // Pinned columns need fixed width so sticky offset calculations are accurate
+        ...isPinned && {
+          width: column.minWidth || column.width,
+          maxWidth: column.minWidth || column.width
+        },
         top: 0,
         // For sticky header
         ...positionStyles
@@ -3881,11 +3891,13 @@ function Spreadsheet({
         column: col
       }));
     }
-    const items = [];
+    const leftPinnedItems = [];
+    const middleItems = [];
+    const rightPinnedItems = [];
     for (const group of columnGroups) {
       const isCollapsed = collapsedGroups.has(group.id);
       if (isCollapsed) {
-        items.push({
+        middleItems.push({
           type: "collapsed-placeholder",
           groupId: group.id,
           headerColor: group.headerColor
@@ -3897,7 +3909,14 @@ function Spreadsheet({
         return true;
       });
       for (const col of groupVisibleCols) {
-        items.push({ type: "column", column: col });
+        const pinSide = pinnedColumns.get(col.id);
+        if (pinSide === "left") {
+          leftPinnedItems.push({ type: "column", column: col });
+        } else if (pinSide === "right") {
+          rightPinnedItems.push({ type: "column", column: col });
+        } else {
+          middleItems.push({ type: "column", column: col });
+        }
       }
     }
     const allGroupedIds = new Set(
@@ -3905,11 +3924,78 @@ function Spreadsheet({
     );
     for (const col of visibleColumns) {
       if (!allGroupedIds.has(col.id)) {
-        items.push({ type: "column", column: col });
+        const pinSide = pinnedColumns.get(col.id);
+        if (pinSide === "left") {
+          leftPinnedItems.push({ type: "column", column: col });
+        } else if (pinSide === "right") {
+          rightPinnedItems.push({ type: "column", column: col });
+        } else {
+          middleItems.push({ type: "column", column: col });
+        }
       }
     }
-    return items;
+    const pinnedLeftOrder = Array.from(pinnedColumns.entries()).filter(([id, side]) => side === "left" && id !== ROW_INDEX_COLUMN_ID).map(([id]) => id);
+    const pinnedRightOrder = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").map(([id]) => id);
+    leftPinnedItems.sort(
+      (a, b) => pinnedLeftOrder.indexOf(a.column.id) - pinnedLeftOrder.indexOf(b.column.id)
+    );
+    rightPinnedItems.sort(
+      (a, b) => pinnedRightOrder.indexOf(a.column.id) - pinnedRightOrder.indexOf(b.column.id)
+    );
+    return [...leftPinnedItems, ...middleItems, ...rightPinnedItems];
   }, [columnGroups, collapsedGroups, columns, pinnedColumns, visibleColumns]);
+  const groupHeaderItems = (0, import_react17.useMemo)(() => {
+    if (!columnGroups || columnGroups.length === 0) return null;
+    const leftPinned = [];
+    const groups = [];
+    const rightPinned = [];
+    for (const group of columnGroups) {
+      const isCollapsed = collapsedGroups.has(group.id);
+      const groupColumns = (columns || []).filter((c) => group.columns.includes(c.id));
+      const visibleGroupColumns = isCollapsed ? groupColumns.filter((c) => pinnedColumns.has(c.id)) : groupColumns;
+      let movedLeftCount = 0;
+      let movedRightCount = 0;
+      for (const col of visibleGroupColumns) {
+        const pinSide = pinnedColumns.get(col.id);
+        if (pinSide === "left") {
+          movedLeftCount++;
+          leftPinned.push({
+            type: "pinned-column",
+            columnId: col.id,
+            headerColor: group.headerColor,
+            pinSide: "left"
+          });
+        } else if (pinSide === "right") {
+          movedRightCount++;
+          rightPinned.push({
+            type: "pinned-column",
+            columnId: col.id,
+            headerColor: group.headerColor,
+            pinSide: "right"
+          });
+        }
+      }
+      const remainingCols = visibleGroupColumns.length - movedLeftCount - movedRightCount;
+      const colSpan = remainingCols + (isCollapsed ? 1 : 0);
+      if (colSpan > 0) {
+        groups.push({
+          type: "group",
+          group,
+          colSpan,
+          isCollapsed
+        });
+      }
+    }
+    const pinnedLeftOrder = Array.from(pinnedColumns.entries()).filter(([id, side]) => side === "left" && id !== ROW_INDEX_COLUMN_ID).map(([id]) => id);
+    const pinnedRightOrder = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").map(([id]) => id);
+    leftPinned.sort(
+      (a, b) => pinnedLeftOrder.indexOf(a.columnId) - pinnedLeftOrder.indexOf(b.columnId)
+    );
+    rightPinned.sort(
+      (a, b) => pinnedRightOrder.indexOf(a.columnId) - pinnedRightOrder.indexOf(b.columnId)
+    );
+    return [...leftPinned, ...groups, ...rightPinned];
+  }, [columnGroups, collapsedGroups, columns, pinnedColumns]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
     showToolbar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       SpreadsheetToolbar,
@@ -3949,7 +4035,7 @@ function Spreadsheet({
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: "w-full border-separate border-spacing-0 text-xs select-none", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("thead", { children: [
-            columnGroups && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { children: [
+            columnGroups && groupHeaderItems && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 RowIndexColumnHeader,
                 {
@@ -3962,16 +4048,33 @@ function Spreadsheet({
                   compactMode: effectiveCompactMode
                 }
               ),
-              columnGroups.map((group) => {
-                const groupColumns = (columns || []).filter(
-                  (c) => group.columns.includes(c.id)
-                );
-                const isCollapsed = collapsedGroups.has(group.id);
-                const visibleGroupColumns = isCollapsed ? groupColumns.filter((c) => pinnedColumns.has(c.id)) : groupColumns;
-                const colSpan = Math.max(
-                  1,
-                  visibleGroupColumns.length + (isCollapsed ? 1 : 0)
-                );
+              groupHeaderItems.map((item) => {
+                if (item.type === "pinned-column") {
+                  const col = columns.find(
+                    (c) => c.id === item.columnId
+                  );
+                  const isPinnedLeft = item.pinSide === "left";
+                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "th",
+                    {
+                      className: cn(
+                        "border border-gray-200 px-2 py-1.5 text-center font-bold text-gray-700",
+                        "z-30"
+                      ),
+                      style: {
+                        backgroundColor: item.headerColor || "rgb(243 244 246)",
+                        position: "sticky",
+                        left: isPinnedLeft ? `${getColumnLeftOffset(item.columnId)}px` : void 0,
+                        right: !isPinnedLeft ? `${getColumnRightOffset(item.columnId)}px` : void 0,
+                        minWidth: col?.minWidth || col?.width,
+                        width: col?.minWidth || col?.width,
+                        maxWidth: col?.minWidth || col?.width
+                      }
+                    },
+                    `pinned-group-${item.columnId}`
+                  );
+                }
+                const { group, colSpan, isCollapsed } = item;
                 return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "th",
                   {