@ai-matrx/design-system 0.56.2 → 0.57.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.57.0
+
+- **One actions column.** A table that declares its own `customActions` column no longer also
+  draws the built-in row-actions column just to hold the row-copy icon: the copy rides inline at
+  the start of the first visible custom column. Before, records-ui's merged grid showed two
+  actions columns, and the second one, 225 px wide with only the copy icon in it, pushed the
+  grid's own Delete off the right edge. The built-in column is still drawn when the table has
+  standard icon `rowActions` or a window button, and it still holds the copy whenever no custom
+  column is visible. Under `fitToWidth` a custom column now takes its content width (its widest
+  row strip or its header), not a share of the space, and a custom strip gets compact rows'
+  24 px buttons. With no built-in column drawn, a custom column that ends the row takes the
+  built-in column's pin (sticky right from `sm:` up, `data-matrx-table-pinned-actions`), and the
+  sideways scroll control sits clear of it. Guards: `TableIconActions.test.tsx` and `MatrxDataTable.layout-look.test.tsx`
+  (red on 0.56.2).
+
+### Consumer action
+
+- None. A consumer that relied on a copy-only built-in column beside its own custom column sees
+  that column go away; its copy is in the custom column.
+
 ## 0.56.2
 
 - **`BottomSheetHeader`'s Back button has a name.** It was an unnamed icon button (screen
@@ -1239,7 +1259,7 @@ on the server; drop any app-side copy of the palette.
 
 ## 0.38.0 — 2026-09-23
 
-**On desktop a Dialog is a window, not a wall.** (register ARE-006, `common-docs/projects/ai-reachable-everywhere/REGISTER.md`.)
+**On desktop a Dialog is a window, not a wall.** (register ARE-006, `common-docs/systems/platform/ui-shell/projects/ai-reachable-everywhere/REGISTER.md`.)
 
 Arman, on a blocking settings dialog: *"none of the built-in page ai integrations are accessible because the page is totally blocked."* Unless the caller passes `modal`, a desktop `Dialog` no longer blocks the page: no overlay, and the page, its menus and every AI control beside it stay usable. It behaves like a light window:
 

package/README.md

@@ -242,4 +242,8 @@ button event for callers that need modifier keys. A menu, editor or other React
 be declared in its own column: `{ id: "workflow", header: "Workflow", customActions: (row,
 controls) => <WorkflowMenu row={row} controls={controls} /> }`. Custom columns carry live
 record controls, never participate in sort/filter/copy/spreadsheet data, and are not draggable
-(their headers may contain controls). Hidden custom columns stay hidden in mobile cards too.
+(their headers may contain controls). Hidden custom columns stay hidden in mobile cards too. A table with a visible custom column draws ONE actions column: the row copy rides inline at the
+start of the first visible custom column, and the built-in row-actions column is drawn only for
+standard icon `rowActions` or the window button. Under `fitToWidth` a custom column is as wide as
+its widest row strip or its header, never a scaled share; when it ends the row it is pinned right
+like the built-in column.

package/dist/data-table/index.cjs

@@ -52988,7 +52988,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);
@@ -53308,13 +53308,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();
@@ -53327,11 +53338,12 @@ function MatrxDataTableCore(coreProps) {
   }, [fitToWidth, data.length]);
   const fittedWidths = (0, import_react28.useMemo)(() => {
     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);
@@ -53339,6 +53351,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;
@@ -54021,7 +54040,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) {
@@ -54709,6 +54729,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 = (0, import_react28.useMemo)(
     () => new Set(selection?.selectedIds ?? []),
@@ -54781,15 +54803,28 @@ function MatrxDataTableCore(coreProps) {
     if (col.customActions) {
       const controls = suppliedControls ?? liveRecordControls(displayRow);
       const content = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(MatrxTableRowControlsScope, { value: controls, children: col.customActions(displayRow, controls) });
-      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)(
-        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__ */ (0, import_jsx_runtime59.jsxs)("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__ */ (0, import_jsx_runtime59.jsx)(
+          TableRowCopyControl,
+          {
+            size: "toolbar",
+            copy: effectiveCopy,
+            row: displayRow,
+            sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
+            ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+          }
+        ) : null,
+        effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          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;
@@ -55293,6 +55328,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"],
@@ -55331,6 +55367,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.
@@ -56313,6 +56354,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(
@@ -56340,7 +56382,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),