@ai-matrx/design-system 0.39.5 → 0.40.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.40.0 (2026-09-25 — version and notes set by PUBLISHER-5)
+
+### Lane TABLE-PAGE-CHROME (2026-09-25)
+
+* **The table's toolbar can live in the page's one row.** `MatrxDataTableToolbar.portalInto`
+  (an element, or `null` while it mounts) draws the toolbar row INTO the placing page's own
+  toolbar row, so a page and its table share one row instead of stacking two bars (records-ui's
+  `TablePage`: the view picker, the layout chooser and the table's search side by side).
+  `MatrxDataTableToolbar.singleRow` (and `TableTitleRow.singleRow`) keeps the row one line at
+  every width: nothing wraps, a narrow screen scrolls it sideways, the search keeps its place.
+  With `singleRow`, what the answer covers ("Unknown total", "Partial") is a badge IN the row with the
+  whole sentence on hover and to a screen reader, never a band between the toolbar and the column
+  headers. Both are additive; without them nothing changes. Suite
+  `MatrxDataTable.toolbar-into-the-page-row.test.tsx` RED 1/2 on the prior bytes, GREEN 4/4;
+  data-table 649/649. **Consumer action:** none.
+
 ## 0.39.5
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see
@@ -14,11 +30,8 @@ No source changes intended and no consumer action required.
 
 ## 0.39.3
 
-Automatic changed-only republish (docs/metadata drift since the last tag — see
-`git diff npm/design-system/v0.39.2..npm/design-system/v0.39.3 -- apps/shared/design-system`).
-No source changes intended and no consumer action required.
-
-## Unreleased
+The auto release stubbed this version as a docs-only republish; it carried UI-FIX-19's source
+change below (notes placed under it by PUBLISHER-5, 2026-09-25).
 
 ### Lane UI-FIX-19 (2026-09-24)
 

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 '../types-D7O3uOIs.cjs';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-oVyZbfwn.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 '../types-p13OrDj-.js';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-Z32pxexx.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 '../types-D7O3uOIs.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-oVyZbfwn.cjs';
 import '../content-transfer.cjs';
 import 'react';
 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 '../types-p13OrDj-.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-Z32pxexx.js';
 import '../content-transfer.js';
 import 'react';
 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 { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-D7O3uOIs.cjs';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-oVyZbfwn.cjs';
 import { MatrxTableMenuTarget, MatrxTableMenuPayload } from './menu-targets.cjs';
 import '../content-transfer.cjs';
 import '@ai-matrx/kit/content-transfer';

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 { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-p13OrDj-.js';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-Z32pxexx.js';
 import { MatrxTableMenuTarget, MatrxTableMenuPayload } from './menu-targets.js';
 import '../content-transfer.js';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/index.cjs

@@ -152,6 +152,7 @@ module.exports = __toCommonJS(data_table_exports);
 
 // src/data-table/MatrxDataTable.tsx
 var import_react21 = require("react");
+var import_react_dom2 = require("react-dom");
 var import_core3 = require("@dnd-kit/core");
 
 // src/data-table/icons.tsx
@@ -1069,6 +1070,7 @@ function TableTitleRow({
   tabs,
   actions,
   children,
+  singleRow = false,
   className
 }) {
   const Heading = headingLevel === 1 ? "h1" : "h2";
@@ -1077,7 +1079,8 @@ function TableTitleRow({
     {
       "data-matrx-table-toolbar": true,
       className: cn(
-        "relative flex min-w-0 shrink-0 flex-wrap items-center gap-2",
+        "relative flex min-w-0 shrink-0 items-center gap-2",
+        singleRow ? "flex-nowrap overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "flex-wrap",
         className
       ),
       children: [
@@ -1096,7 +1099,7 @@ function TableTitleRow({
           "div",
           {
             "data-matrx-table-title-search": true,
-            className: "order-last w-full min-w-0 sm:order-none sm:w-64 sm:shrink-0 sm:max-w-md",
+            className: singleRow ? "w-44 min-w-[9rem] shrink-0 sm:w-64 sm:max-w-md" : "order-last w-full min-w-0 sm:order-none sm:w-64 sm:shrink-0 sm:max-w-md",
             children: search
           }
         ) : null,
@@ -1106,7 +1109,7 @@ function TableTitleRow({
           "div",
           {
             "data-matrx-table-actions": true,
-            className: "ml-auto flex min-w-0 flex-wrap items-center gap-0",
+            className: cn("ml-auto flex min-w-0 items-center gap-0", singleRow ? "shrink-0 flex-nowrap" : "flex-wrap"),
             children: actions
           }
         ) : null
@@ -13495,6 +13498,11 @@ function MatrxDataTableCore({
   const rowCopyInMenu = rowCopyPlacement === "menu" && Boolean(rowActions);
   const showInlineRowCopy = showRowCopy && !rowCopyInMenu;
   const showToolbarCopy = effectiveCopy !== void 0 && effectiveCopy.showToolbar !== false;
+  const placeToolbar = (node) => {
+    if (!toolbar || !("portalInto" in toolbar)) return node;
+    const target = toolbar.portalInto;
+    return target ? (0, import_react_dom2.createPortal)(node, target) : null;
+  };
   const renderRowActions = (row, controls) => {
     const actions = rowActions?.(row, controls);
     const scopedActions = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MatrxTableRowControlsScope, { value: controls, children: actions });
@@ -14322,9 +14330,10 @@ function MatrxDataTableCore({
               notice,
               savedViewError ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
               toolbarActionError ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
-              !hideToolbar && (viewTabs || 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 || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+              placeToolbar(!hideToolbar && (viewTabs || 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 || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                 TableTitleRow,
                 {
+                  ...toolbar?.singleRow ? { singleRow: true } : {},
                   tabs: viewTabs ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applySavedView, related: relatedTableActions }, tableId ?? "table") : void 0,
                   ...toolbar?.title === void 0 ? {} : { title: toolbar.title },
                   ...toolbar?.titleCount === void 0 ? {} : { count: toolbar.titleCount },
@@ -14459,8 +14468,31 @@ function MatrxDataTableCore({
                       "div",
                       {
                         "data-matrx-table-actions": true,
-                        className: "ml-auto flex min-w-0 flex-wrap items-center gap-0",
+                        className: cn(
+                          "ml-auto flex min-w-0 items-center gap-0",
+                          toolbar?.singleRow ? "shrink-0 flex-nowrap" : "flex-wrap"
+                        ),
                         children: [
+                          toolbar?.singleRow && coverageResult && coverageResult.notice ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                              "span",
+                              {
+                                "data-matrx-table-coverage": true,
+                                "data-matrx-table-coverage-scope": coverageResult.scope,
+                                role: "status",
+                                tabIndex: 0,
+                                className: "mr-1 inline-flex shrink-0 items-center whitespace-nowrap rounded-md border border-amber-300/70 bg-amber-50 px-2 py-0.5 text-[11px] font-semibold text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
+                                children: [
+                                  coverageResult.badge,
+                                  /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "sr-only", children: [
+                                    ": ",
+                                    coverageResult.notice
+                                  ] })
+                                ]
+                              }
+                            ) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { className: "max-w-xs", children: coverageResult.notice })
+                          ] }) : null,
                           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             TableToolbarAction,
                             {
@@ -14603,9 +14635,9 @@ function MatrxDataTableCore({
                     )
                   ]
                 }
-              ),
+              )),
               /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { "data-matrx-table-body-region": true, className: "flex min-h-0 flex-1 flex-col gap-2", children: [
-                coverageResult && coverageResult.notice ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                coverageResult && coverageResult.notice && !toolbar?.singleRow ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                   "div",
                   {
                     "data-matrx-table-coverage": true,