@l3mpire/ui 3.5.0 → 3.5.1

package/dist/index.js

@@ -7268,6 +7268,18 @@ function ColumnFilterPopover({
     ) })
   ] });
 }
+function pinnedStickyStyle(pinned, offset, zIndex) {
+  if (pinned === "left") return { position: "sticky", left: offset, zIndex };
+  if (pinned === "right") return { position: "sticky", right: offset, zIndex };
+  return {};
+}
+function pinnedDividerClass(pinned) {
+  if (pinned === "left")
+    return "shadow-[1px_0_0_0_var(--core-border-main-primary)]";
+  if (pinned === "right")
+    return "shadow-[-1px_0_0_0_var(--core-border-main-primary)]";
+  return "";
+}
 function DraggableHeaderCell({
   header,
   enableSorting,
@@ -7295,6 +7307,7 @@ function DraggableHeaderCell({
     disabled: !canDrag
   });
   const pinned = header.column.getIsPinned();
+  const pinOffset = pinned === "left" ? header.column.getStart("left") : pinned === "right" ? header.column.getAfter("right") : void 0;
   const style = {
     width: enableColumnResizing ? header.getSize() : void 0,
     minWidth: enableColumnResizing ? header.column.columnDef.minSize : void 0,
@@ -7305,18 +7318,7 @@ function DraggableHeaderCell({
     // Pinning sticky positioning — must override the default `relative` we
     // also use for the resize handle. The resize handle is still absolutely
     // positioned because it references `right: 0` relative to the cell.
-    ...pinned === "left" ? {
-      position: "sticky",
-      left: header.column.getStart("left"),
-      zIndex: isDragging ? 5 : 3
-    } : pinned === "right" ? {
-      position: "sticky",
-      right: header.column.getAfter("right"),
-      zIndex: isDragging ? 5 : 3
-    } : {
-      position: "relative",
-      zIndex: isDragging ? 1 : void 0
-    }
+    ...pinned ? pinnedStickyStyle(pinned, pinOffset, isDragging ? 5 : 3) : { position: "relative", zIndex: isDragging ? 1 : void 0 }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     TableHead,
@@ -7330,8 +7332,7 @@ function DraggableHeaderCell({
         // Pinned columns keep their bg so the scrolling content can pass
         // under them. The default `bg-table-head-bg-default` is already on
         // <th> so we only need to add a divider on the boundary.
-        pinned === "left" && "shadow-[1px_0_0_0_var(--core-border-main-primary)]",
-        pinned === "right" && "shadow-[-1px_0_0_0_var(--core-border-main-primary)]"
+        pinnedDividerClass(pinned)
       ),
       onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
       onMouseEnter: () => setIsHovered(true),
@@ -7560,15 +7561,22 @@ function DataTableInner({
     }).filter(Boolean),
     [columns]
   );
+  const lastSyncedColumnIdsRef = React54.useRef(null);
   React54.useEffect(() => {
     if (!enableColumnDrag) return;
+    const signature = allColumnIds.join(" ");
+    if (signature === lastSyncedColumnIdsRef.current) return;
+    lastSyncedColumnIdsRef.current = signature;
     if (columnOrder.length === 0) {
       setColumnOrder(allColumnIds);
       return;
     }
-    const missing = allColumnIds.filter((id) => !columnOrder.includes(id));
-    if (missing.length > 0) {
-      setColumnOrder([...columnOrder, ...missing]);
+    const pruned = columnOrder.filter((id) => allColumnIds.includes(id));
+    const missing = allColumnIds.filter((id) => !pruned.includes(id));
+    const next = [...pruned, ...missing];
+    const changed = next.length !== columnOrder.length || next.some((id, i) => id !== columnOrder[i]);
+    if (changed) {
+      setColumnOrder(next);
     }
   }, [enableColumnDrag, columnOrder, allColumnIds, setColumnOrder]);
   const table = (0, import_react_table.useReactTable)({
@@ -7685,6 +7693,16 @@ function DataTableInner({
     return vars;
   }, [enableColumnResizing, table.getState().columnSizing]);
   const totalSize = enableColumnResizing ? table.getTotalSize() : void 0;
+  const pinnedOffsets = React54.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const col of table.getVisibleLeafColumns()) {
+      const p = col.getIsPinned();
+      if (p === "left") map.set(col.id, { side: "left", offset: col.getStart("left") });
+      else if (p === "right")
+        map.set(col.id, { side: "right", offset: col.getAfter("right") });
+    }
+    return map;
+  }, [table, table.getState().columnPinning, table.getState().columnSizing]);
   const tableContent = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cn("w-full", className), style: columnSizeVars, children: [
     /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       Table,
@@ -7760,17 +7778,10 @@ function DataTableInner({
               "data-state": row.getIsSelected() ? "selected" : void 0,
               children: row.getVisibleCells().map((cell) => {
                 const cellPinned = cell.column.getIsPinned();
+                const pin = cellPinned ? pinnedOffsets.get(cell.column.id) : void 0;
                 const cellStyle = {
                   ...enableColumnResizing ? { width: `var(--col-${cell.column.id}-size)` } : {},
-                  ...cellPinned === "left" ? {
-                    position: "sticky",
-                    left: cell.column.getStart("left"),
-                    zIndex: 2
-                  } : cellPinned === "right" ? {
-                    position: "sticky",
-                    right: cell.column.getAfter("right"),
-                    zIndex: 2
-                  } : {}
+                  ...pinnedStickyStyle(cellPinned, pin?.offset, 2)
                 };
                 return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                   TableCell,
@@ -7781,8 +7792,8 @@ function DataTableInner({
                       enableColumnResizing && "truncate",
                       // Pinned cells need an opaque background so scrolled
                       // content does not show through.
-                      cellPinned === "left" && "bg-table-row-bg-default group-hover/row:bg-table-row-bg-hover data-[state=selected]:bg-table-row-bg-selected shadow-[1px_0_0_0_var(--core-border-main-primary)]",
-                      cellPinned === "right" && "bg-table-row-bg-default group-hover/row:bg-table-row-bg-hover data-[state=selected]:bg-table-row-bg-selected shadow-[-1px_0_0_0_var(--core-border-main-primary)]"
+                      cellPinned && "bg-table-row-bg-default group-hover/row:bg-table-row-bg-hover data-[state=selected]:bg-table-row-bg-selected",
+                      pinnedDividerClass(cellPinned)
                     ),
                     children: (0, import_react_table.flexRender)(
                       cell.column.columnDef.cell,