@ai-matrx/design-system 0.61.3 → 0.61.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.61.4
+### one actions column per table
+
+- A `customActions` column headed "Actions" (or id `actions` / `custom-actions` / `row-actions`) IS
+  the row's actions column: the built-in controls — `rowActions` icons and open-in-window / side
+  panel — are drawn inside it, and the built-in "Actions" column is not drawn beside it (two
+  "ACTIONS" columns on /education/overview's "Recently created"). A differently named custom
+  column ("Workflow") stays its own column beside the built-in one, as before.
+- A table that still renders two columns headed "Actions" logs one `[matrx-table]` console error.
+- The saved-view strip drawn through `toolbar.tabsPortalInto` shrinks and scrolls inside its slot
+  (two tabs and their "+" ran over the page's search).
+- 0.60.9 also drew a focused row's own ring (`focus-visible`), replacing a host
+  `[&_[data-row-id]:focus-visible]` reach.
+
+Consumer action: none for a single declared "Actions" column. A host that declared its own
+"Actions" column AND relied on the built-in column beside it now gets one column.
+
 ## 0.61.3 — the controls cover the sample pages
 
 - `SplitButton` (controls): two Buttons joined — the act and its menu — carrying one half-gap.

package/dist/data-table/copy-helpers.d.cts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.cjs';
-import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-dlFZjEqc.cjs';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-DL5BU8Mf.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/copy-helpers.d.ts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.js';
-import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-CkkbZfmk.js';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-CCWzLsOC.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/filter-engine.d.cts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../layered-filters-dlFZjEqc.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../layered-filters-DL5BU8Mf.cjs';
 import 'react';
 import '../content-transfer.cjs';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/filter-engine.d.ts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../layered-filters-CkkbZfmk.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../layered-filters-CCWzLsOC.js';
 import 'react';
 import '../content-transfer.js';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/host.d.cts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.cjs';
-import { M as MatrxColumnDef, b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../layered-filters-dlFZjEqc.cjs';
+import { M as MatrxColumnDef, b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../layered-filters-DL5BU8Mf.cjs';
 import { MatrxTableMenuItem, MatrxTableMenuTarget, MatrxTableMenuPayload, MatrxTableMenuSectionsResolver, MatrxTableMenuIconName } from './menu-targets.cjs';
 export { MatrxTableMenuSection } from './menu-targets.cjs';
 import '../content-transfer.cjs';

package/dist/data-table/host.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.js';
-import { M as MatrxColumnDef, b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../layered-filters-CkkbZfmk.js';
+import { M as MatrxColumnDef, b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../layered-filters-CCWzLsOC.js';
 import { MatrxTableMenuItem, MatrxTableMenuTarget, MatrxTableMenuPayload, MatrxTableMenuSectionsResolver, MatrxTableMenuIconName } from './menu-targets.js';
 export { MatrxTableMenuSection } from './menu-targets.js';
 import '../content-transfer.js';

package/dist/data-table/index.cjs

@@ -54415,6 +54415,9 @@ function MatrxDataTableCore(coreProps) {
   const menuActionsColumn = visibleColumns.find((column) => column.customActions);
   const rowCopyInMenu = rowCopyPlacement === "menu" && menuActionsColumn !== void 0;
   const rowCopyInCustomColumn = showRowCopy && !rowCopyInMenu && menuActionsColumn !== void 0;
+  const declaredActionsColumn = visibleColumns.find(
+    (column) => column.customActions && (typeof column.header === "string" && column.header.trim().toLowerCase() === "actions" || ["actions", "custom-actions", "row-actions"].includes(columnId(column)))
+  );
   const showInlineRowCopy = showRowCopy && !rowCopyInMenu && !rowCopyInCustomColumn;
   const showToolbarCopy = effectiveCopy !== void 0 && effectiveCopy.showToolbar !== false && copyControls?.table !== false;
   const placeToolbar = (node) => {
@@ -54556,6 +54559,7 @@ function MatrxDataTableCore(coreProps) {
   const summaryMetrics = summary?.metrics.map((metric) => ({
     id: metric.id,
     label: metric.label,
+    description: metric.description,
     ...resolveSummaryValue(summary.source?.metrics?.[metric.id], metric.value)
   })) ?? [];
   const summaryTotals = Object.entries(summary?.totals ?? {}).map(([id, value]) => ({
@@ -55110,7 +55114,35 @@ function MatrxDataTableCore(coreProps) {
       (target) => resolveMenuLevelRef.current(target)
     );
   }, [host.rowContextRegistry, tableContextMenuInstanceId]);
-  const showActionsCol = windowEnabled || Boolean(rowActions) || showInlineRowCopy;
+  const showActionsCol = declaredActionsColumn === void 0 && (windowEnabled || Boolean(rowActions) || showInlineRowCopy);
+  const actionsHeaderCount = visibleColumns.filter((column) => typeof column.header === "string" && column.header.trim().toLowerCase() === "actions").length + (showActionsCol ? 1 : 0);
+  (0, import_react31.useEffect)(() => {
+    if (actionsHeaderCount > 1) {
+      console.error(
+        `[matrx-table] ${actionsHeaderCount} "Actions" columns in one table \u2014 a table has ONE actions column. Declare one customActions column headed "Actions"; the table folds copy, row actions and open-in-window into it.`
+      );
+    }
+  }, [actionsHeaderCount]);
+  const renderWindowOpen = (row) => windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        "data-matrx-table-icon-action": true,
+        className: "h-11 w-11 text-muted-foreground hover:text-foreground [&_svg]:size-5",
+        "aria-label": windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window",
+        onClick: (e) => {
+          e.stopPropagation();
+          if (windowConfig?.openOnRowClick === true) rowLatest.current.openDetail(row);
+          else rowLatest.current.openWindow(row);
+        },
+        children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PanelRight, { className: "h-5 w-5" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipContent, { children: windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window" })
+  ] }) : null;
   const lastVisibleColumn = visibleColumns[visibleColumns.length - 1];
   const pinnedActionsColumnId = !showActionsCol && lastVisibleColumn?.customActions ? columnId(lastVisibleColumn) : void 0;
   const getSelectionId = selection?.getSelectionId ?? getRowId;
@@ -55205,7 +55237,11 @@ function MatrxDataTableCore(coreProps) {
             controls,
             children: content
           }
-        ) : content
+        ) : content,
+        declaredActionsColumn !== void 0 && columnId(col) === columnId(declaredActionsColumn) ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+          renderRowActions(displayRow, controls),
+          renderWindowOpen(row)
+        ] }) : null
       ] });
     }
     const display = renderCell(displayRow, col, index);
@@ -55901,26 +55937,7 @@ function MatrxDataTableCore(coreProps) {
                       }
                     ) : null,
                     renderRowActions(displayRow, controls),
-                    windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Tooltip, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                        Button,
-                        {
-                          type: "button",
-                          variant: "ghost",
-                          size: "icon",
-                          "data-matrx-table-icon-action": true,
-                          className: "h-11 w-11 text-muted-foreground hover:text-foreground [&_svg]:size-5",
-                          "aria-label": windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window",
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            if (windowConfig?.openOnRowClick === true) rowLatest.current.openDetail(row);
-                            else rowLatest.current.openWindow(row);
-                          },
-                          children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PanelRight, { className: "h-5 w-5" })
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipContent, { children: windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window" })
-                    ] }) : null
+                    renderWindowOpen(row)
                   ]
                 }
               )
@@ -56067,6 +56084,7 @@ function MatrxDataTableCore(coreProps) {
                 "data-matrx-table-density": resolvedDensity,
                 "data-url-state-table": urlState?.id,
                 "data-matrx-table-appearance": appearance,
+                "data-matrx-table-embedded": embedded || void 0,
                 className: cn(
                   "flex h-full min-h-0 flex-col gap-2 px-0 pt-2 pb-0",
                   embedded && "h-auto gap-0 pt-0",
@@ -56080,15 +56098,17 @@ function MatrxDataTableCore(coreProps) {
                     "section",
                     {
                       "data-matrx-table-summary": true,
+                      "data-matrx-table-summary-variant": summary?.variant ?? "compact",
                       "data-matrx-table-summary-scope": summaryUsesSource ? "source" : summaryCoverage,
                       "aria-label": `Table summary: ${summaryCaption}`,
-                      className: "flex w-full min-w-0 shrink-0 flex-nowrap items-stretch gap-2 overflow-x-auto overscroll-x-contain",
-                      children: summaryMetrics.map((metric) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "min-w-24 shrink-0 whitespace-nowrap rounded-md border border-border bg-card px-3 py-2 shadow-xs", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-sm font-medium text-muted-foreground", children: metric.label }),
-                        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "mt-0.5 text-sm font-semibold tabular-nums text-foreground", children: [
+                      className: "flex w-full min-w-0 shrink-0 flex-nowrap items-stretch gap-3 overflow-x-auto overscroll-x-contain",
+                      children: summaryMetrics.map((metric) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { "data-matrx-table-summary-card": true, className: cn("shrink-0 whitespace-nowrap rounded-md border border-border bg-card shadow-xs", summary?.variant === "large" ? "w-56 min-w-56 px-4 py-4" : "min-w-24 px-3.5 py-2.5"), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "truncate text-sm font-medium text-muted-foreground", title: metric.label, children: metric.label }),
+                        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: cn("font-semibold tabular-nums text-foreground", summary?.variant === "large" ? "mt-1 text-xl" : "mt-0.5 text-sm"), children: [
                           metric.value,
                           metric.unavailable ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ErrorBox, { as: "span", className: "sr-only", message: `${metric.label} is unavailable`, operation: "Summarize this table", origin: "design-system/MatrxDataTable" }) : null
-                        ] })
+                        ] }),
+                        summary?.variant === "large" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-matrx-table-summary-description": true, className: "mt-2 min-h-5 truncate text-sm font-normal text-muted-foreground", title: metric.description, children: metric.description }) : null
                       ] }, metric.id))
                     }
                   ) : null,
@@ -56099,7 +56119,7 @@ function MatrxDataTableCore(coreProps) {
                     const tabsTarget = toolbar && "tabsPortalInto" in toolbar ? toolbar.tabsPortalInto : null;
                     return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
                       tabsPlaced && tabsTarget && tabsNode && !hideToolbar ? (0, import_react_dom4.createPortal)(
-                        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-matrx-table-toolbar-tabs": "", "data-matrx-table-tabs-placed": "", className: "flex min-w-0 max-w-full [&_[data-matrx-table-tabs]]:border-b-0", children: tabsNode }),
+                        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-matrx-table-toolbar-tabs": "", "data-matrx-table-tabs-placed": "", className: "flex min-w-0 max-w-full [&_[data-matrx-table-tabs]]:min-w-0 [&_[data-matrx-table-tabs]]:shrink [&_[data-matrx-table-tabs]]:border-b-0", children: tabsNode }),
                         tabsTarget
                       ) : null,
                       placeToolbar(!hideToolbar && (showViewTabs || toolbar?.title || toolbar?.titleCount || showSearch || toolbar?.customSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || toolbar?.refresh || toolbar?.add || savedViewsId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(