@ai-matrx/design-system 0.56.2 → 0.57.0

package/dist/data-table/index.js

@@ -52873,7 +52873,7 @@ function MatrxDataTableCore(coreProps) {
     if (!el) return;
     hintScrollLeft.current = el.scrollLeft;
     const hasRows = Boolean(el.querySelector("tbody tr[data-row-id]"));
-    const actions = el.querySelector("th[data-matrx-table-actions-column]");
+    const actions = el.querySelector("th[data-matrx-table-actions-column], th[data-matrx-table-pinned-actions]");
     setScrollHintRight(hasRows && el.scrollLeft + el.clientWidth < el.scrollWidth - 2);
     setScrollHintLeft(hasRows && el.scrollLeft > 2);
     setScrollHintRightInset(actions ? Math.ceil(actions.getBoundingClientRect().width) + 6 : 6);
@@ -53193,13 +53193,24 @@ function MatrxDataTableCore(coreProps) {
         ...strips.map((strip) => Math.ceil(strip.scrollWidth) + 16),
         actionsHeader ? Math.ceil(actionsHeader.scrollWidth) : 0
       );
+      const custom = {};
+      for (const strip of Array.from(el.querySelectorAll("[data-matrx-table-custom-actions]"))) {
+        const id = strip.closest("td")?.getAttribute("data-matrx-table-column-id");
+        if (id) custom[id] = Math.max(custom[id] ?? 0, Math.ceil(strip.scrollWidth) + 16);
+      }
+      for (const id of Object.keys(custom)) {
+        const header = Array.from(el.querySelectorAll("thead th[data-matrx-table-column-id]")).find((th) => th.getAttribute("data-matrx-table-column-id") === id);
+        const inner = header?.firstElementChild;
+        if (inner) custom[id] = Math.max(custom[id], Math.ceil(inner.scrollWidth) + 16);
+      }
       const table2 = el.querySelector(":scope > table");
       const spill = table2 && table2.hasAttribute("data-matrx-table-fit") ? Math.max(0, el.scrollWidth - el.clientWidth) : 0;
       setFitSpace((now) => {
         const sameWidth = now !== null && now.width === el.clientWidth;
         const slack = sameWidth ? now.slack + spill : spill;
-        const next = { width: el.clientWidth, actions, slack };
-        return now && now.width === next.width && now.actions === next.actions && now.slack === next.slack ? now : next;
+        const next = { width: el.clientWidth, actions, slack, custom };
+        const sameCustom = now !== null && Object.keys(now.custom).length === Object.keys(custom).length && Object.entries(custom).every(([id, w]) => now.custom[id] === w);
+        return now && sameCustom && now.width === next.width && now.actions === next.actions && now.slack === next.slack ? now : next;
       });
     };
     read2();
@@ -53212,11 +53223,12 @@ function MatrxDataTableCore(coreProps) {
   }, [fitToWidth, data.length]);
   const fittedWidths = useMemo12(() => {
     if (!fitToWidth || !fitSpace) return null;
-    const keepsItsWidth = (col) => resolveColumnMarker(col) !== void 0 || col.resizable === false && pixelWidth(col.width) !== void 0;
+    const contentWidth = (col) => col.customActions ? fitSpace.custom[columnId(col)] : void 0;
+    const keepsItsWidth = (col) => resolveColumnMarker(col) !== void 0 || col.resizable === false && pixelWidth(col.width) !== void 0 || contentWidth(col) !== void 0;
     const scaling = visibleColumns.filter((col) => !keepsItsWidth(col));
-    const fixed = visibleColumns.filter(keepsItsWidth).reduce((sum, col) => sum + (pixelWidth(col.width) ?? 40), 0);
+    const fixed = visibleColumns.filter(keepsItsWidth).reduce((sum, col) => sum + (contentWidth(col) ?? pixelWidth(col.width) ?? 40), 0);
     const utilities = (selection ? selectionColumnWidth ?? SELECTION_COLUMN_PX : 0) + fitSpace.actions;
-    return fitColumnWidths(
+    const shares = fitColumnWidths(
       scaling.map(columnId),
       (id) => {
         const col = scaling.find((c) => columnId(c) === id);
@@ -53224,6 +53236,13 @@ function MatrxDataTableCore(coreProps) {
       },
       fitSpace.width - utilities - fixed - fitSpace.slack
     );
+    if (!shares) return null;
+    const out = { ...shares };
+    for (const col of visibleColumns) {
+      const w = contentWidth(col);
+      if (w !== void 0) out[columnId(col)] = w;
+    }
+    return out;
   }, [fitToWidth, fitSpace, visibleColumns, selection, selectionColumnWidth, effectiveColumnWidths]);
   const fitActive = fittedWidths !== null;
   const actionsColumnWidth = fitActive && fitSpace ? fitSpace.actions : fixedTableGeometry?.actionsWidth;
@@ -53906,7 +53925,8 @@ function MatrxDataTableCore(coreProps) {
   const showRowCopy = effectiveCopy !== void 0 && effectiveCopy.showRow !== false;
   const menuActionsColumn = visibleColumns.find((column) => column.customActions);
   const rowCopyInMenu = rowCopyPlacement === "menu" && menuActionsColumn !== void 0;
-  const showInlineRowCopy = showRowCopy && !rowCopyInMenu;
+  const rowCopyInCustomColumn = showRowCopy && !rowCopyInMenu && menuActionsColumn !== void 0;
+  const showInlineRowCopy = showRowCopy && !rowCopyInMenu && !rowCopyInCustomColumn;
   const showToolbarCopy = effectiveCopy !== void 0 && effectiveCopy.showToolbar !== false;
   const placeToolbar = (node) => {
     if (toolbar && "portalInto" in toolbar) {
@@ -54594,6 +54614,8 @@ function MatrxDataTableCore(coreProps) {
     );
   }, [host.rowContextRegistry, tableContextMenuInstanceId]);
   const showActionsCol = windowEnabled || Boolean(rowActions) || showInlineRowCopy;
+  const lastVisibleColumn = visibleColumns[visibleColumns.length - 1];
+  const pinnedActionsColumnId = !showActionsCol && lastVisibleColumn?.customActions ? columnId(lastVisibleColumn) : void 0;
   const getSelectionId = selection?.getSelectionId ?? getRowId;
   const selectedIdSet = useMemo12(
     () => new Set(selection?.selectedIds ?? []),
@@ -54666,15 +54688,28 @@ function MatrxDataTableCore(coreProps) {
     if (col.customActions) {
       const controls = suppliedControls ?? liveRecordControls(displayRow);
       const content = /* @__PURE__ */ jsx59(MatrxTableRowControlsScope, { value: controls, children: col.customActions(displayRow, controls) });
-      return /* @__PURE__ */ jsx59("div", { "data-matrx-table-custom-actions": true, "data-matrx-cell-control": true, className: "inline-flex items-center justify-end gap-0", onClick: (event) => event.stopPropagation(), children: effectiveCopy && showRowCopy ? /* @__PURE__ */ jsx59(
-        MatrxTableRowAlchemyProvider,
-        {
-          copy: tableRowCopyProps(effectiveCopy, displayRow, `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`, copy === void 0 ? declaredVisibleCopyColumns : void 0),
-          placement: rowCopyInMenu && columnId(col) === (menuActionsColumn ? columnId(menuActionsColumn) : void 0) ? "menu" : "inline",
-          controls,
-          children: content
-        }
-      ) : content });
+      const copyHere = rowCopyInCustomColumn && effectiveCopy && menuActionsColumn !== void 0 && columnId(col) === columnId(menuActionsColumn);
+      return /* @__PURE__ */ jsxs48("div", { "data-matrx-table-custom-actions": true, "data-matrx-cell-control": true, className: cn("inline-flex items-center justify-end gap-0", compactRows && "[&_button]:h-6 [&_button]:min-h-6"), onClick: (event) => event.stopPropagation(), children: [
+        copyHere && effectiveCopy ? /* @__PURE__ */ jsx59(
+          TableRowCopyControl,
+          {
+            size: "toolbar",
+            copy: effectiveCopy,
+            row: displayRow,
+            sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
+            ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+          }
+        ) : null,
+        effectiveCopy && showRowCopy ? /* @__PURE__ */ jsx59(
+          MatrxTableRowAlchemyProvider,
+          {
+            copy: tableRowCopyProps(effectiveCopy, displayRow, `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`, copy === void 0 ? declaredVisibleCopyColumns : void 0),
+            placement: rowCopyInMenu && columnId(col) === (menuActionsColumn ? columnId(menuActionsColumn) : void 0) ? "menu" : "inline",
+            controls,
+            children: content
+          }
+        ) : content
+      ] });
     }
     const display = renderCell(displayRow, col, index);
     const href = col.href?.(row) ?? void 0;
@@ -55178,6 +55213,7 @@ function MatrxDataTableCore(coreProps) {
               "td",
               {
                 "data-matrx-table-column-id": columnId(col),
+                "data-matrx-table-pinned-actions": pinnedActionsColumnId === columnId(col) ? "" : void 0,
                 "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
                 ...sheetCell ? {
                   "data-matrx-cell-row": sheetCell["data-matrx-cell-row"],
@@ -55216,6 +55252,11 @@ function MatrxDataTableCore(coreProps) {
                   frozen && sheetCell?.["data-matrx-cell-selected"] && "sm:bg-[color-mix(in_oklab,var(--color-primary)_10%,var(--color-card))]",
                   frozen && canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]",
                   frozenEdgeId === columnId(col) && FROZEN_EDGE_CLASS,
+                  pinnedActionsColumnId === columnId(col) && [
+                    "text-right sm:sticky sm:right-0 sm:z-20 sm:shadow-[inset_1px_0_0_var(--color-border)]",
+                    frozenRowBackgroundClass,
+                    canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]"
+                  ],
                   // A cell tint paints OVER the row tint beneath
                   // it, and the consumer's own hook comes last so
                   // it can always win.
@@ -56198,6 +56239,7 @@ function MatrxDataTableCore(coreProps) {
                                             {
                                               "data-matrx-table-column-id": id,
                                               "data-matrx-header-column-id": id,
+                                              "data-matrx-table-pinned-actions": pinnedActionsColumnId === id ? "" : void 0,
                                               "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
                                               "aria-sort": isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : void 0,
                                               className: cn(
@@ -56225,7 +56267,9 @@ function MatrxDataTableCore(coreProps) {
                                                 frozenColumns.offsets[id] !== void 0 && FROZEN_HEADER_CLASS,
                                                 phoneFrozenId === id && FROZEN_PHONE_HEADER_CLASS,
                                                 embedded && (frozenColumns.offsets[id] !== void 0 || phoneFrozenId === id) && "sm:bg-card max-sm:bg-card",
-                                                frozenEdgeId === id && FROZEN_EDGE_CLASS
+                                                frozenEdgeId === id && FROZEN_EDGE_CLASS,
+                                                pinnedActionsColumnId === id && "sm:sticky sm:right-0 sm:z-30 sm:bg-muted sm:shadow-[inset_1px_0_0_var(--color-border)]",
+                                                pinnedActionsColumnId === id && embedded && "sm:bg-card"
                                               ),
                                               style: {
                                                 ...columnWidthVar(width, windowedWidthFor(id, width), id, columnResizable),