@xcelsior/ui-spreadsheets 1.1.9 → 1.1.11

package/dist/index.js

@@ -3874,6 +3874,118 @@ function Spreadsheet({
   const handleRowIndexHighlightClick = (0, import_react17.useCallback)(() => {
     setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
   }, [setHighlightPickerColumn]);
+  const columnRenderItems = (0, import_react17.useMemo)(() => {
+    if (!columnGroups || columnGroups.length === 0) {
+      return visibleColumns.map((col) => ({
+        type: "column",
+        column: col
+      }));
+    }
+    const leftPinnedItems = [];
+    const middleItems = [];
+    const rightPinnedItems = [];
+    for (const group of columnGroups) {
+      const isCollapsed = collapsedGroups.has(group.id);
+      if (isCollapsed) {
+        middleItems.push({
+          type: "collapsed-placeholder",
+          groupId: group.id,
+          headerColor: group.headerColor
+        });
+      }
+      const groupVisibleCols = (columns || []).filter((c) => {
+        if (!group.columns.includes(c.id)) return false;
+        if (isCollapsed) return pinnedColumns.has(c.id);
+        return true;
+      });
+      for (const col of groupVisibleCols) {
+        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(
+      columnGroups.flatMap((g) => g.columns)
+    );
+    for (const col of visibleColumns) {
+      if (!allGroupedIds.has(col.id)) {
+        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 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,
@@ -3909,13 +4021,11 @@ function Spreadsheet({
       "div",
       {
         style: {
-          transform: `scale(${zoom / 100})`,
-          transformOrigin: "top left",
-          width: `${100 / (zoom / 100)}%`
+          zoom: zoom / 100
         },
         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,
                 {
@@ -3928,16 +4038,31 @@ 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
+                      }
+                    },
+                    `pinned-group-${item.columnId}`
+                  );
+                }
+                const { group, colSpan, isCollapsed } = item;
                 return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "th",
                   {
@@ -3972,7 +4097,22 @@ function Spreadsheet({
                   compactMode: effectiveCompactMode
                 }
               ),
-              visibleColumns.map((column) => {
+              columnRenderItems.map((item) => {
+                if (item.type === "collapsed-placeholder") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "th",
+                    {
+                      className: "border border-gray-200 px-2 py-1 text-center text-gray-400",
+                      style: {
+                        backgroundColor: item.headerColor || "rgb(243 244 246)",
+                        minWidth: "30px"
+                      },
+                      children: "..."
+                    },
+                    `${item.groupId}-placeholder`
+                  );
+                }
+                const column = item.column;
                 const isPinnedLeft = isColumnPinned(column.id) && getColumnPinSide(column.id) === "left";
                 const isPinnedRight = isColumnPinned(column.id) && getColumnPinSide(column.id) === "right";
                 return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -4011,7 +4151,7 @@ function Spreadsheet({
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "td",
             {
-              colSpan: visibleColumns.length + 1,
+              colSpan: columnRenderItems.length + 1,
               className: "text-center py-8 text-gray-500",
               children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
@@ -4021,7 +4161,7 @@ function Spreadsheet({
           ) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "td",
             {
-              colSpan: visibleColumns.length + 1,
+              colSpan: columnRenderItems.length + 1,
               className: "text-center py-8 text-gray-500",
               children: emptyMessage
             }
@@ -4166,7 +4306,20 @@ function Spreadsheet({
                       ] })
                     }
                   ),
-                  visibleColumns.map((column) => {
+                  columnRenderItems.map((item) => {
+                    if (item.type === "collapsed-placeholder") {
+                      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "td",
+                        {
+                          className: "border border-gray-200 px-2 py-1 text-center text-gray-300",
+                          style: {
+                            backgroundColor: item.headerColor || "rgb(243 244 246)"
+                          }
+                        },
+                        `${item.groupId}-placeholder`
+                      );
+                    }
+                    const column = item.column;
                     const value = column.getValue ? column.getValue(row) : row[column.id];
                     const isEditing = editingCell?.rowId === rowId && editingCell?.columnId === column.id;
                     const isFocused = focusedCell?.rowId === rowId && focusedCell?.columnId === column.id;
@@ -4201,7 +4354,9 @@ function Spreadsheet({
                         isPinned: isColPinned,
                         pinSide: colPinSide,
                         leftOffset: getColumnLeftOffset(column.id),
-                        rightOffset: getColumnRightOffset(column.id),
+                        rightOffset: getColumnRightOffset(
+                          column.id
+                        ),
                         onClick: (e) => handleCellClick(rowId, column.id, e),
                         onConfirm: handleConfirmEdit,
                         onCancel: handleCancelEdit,