@ai-matrx/design-system 0.35.0 → 0.37.1

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # Changelog
 
+## 0.37.1 — 2026-09-23 (0.37.0 was tagged but its dts build failed under TypeScript 6 before the registry; same contents)
+
+**Four data-table changes that were on main and never published.** (published by lane
+PUBLISH-SWEEP-4.)
+
+* **Keyboard multi-expand restored** — expanded-detail rows open and close from the keyboard in
+  the multi-expand arm again (`MatrxDataTable.expanded-detail.test.tsx`).
+* **`coverage.loaded`** — the number of rows loaded from the source BEFORE a host narrows `data`
+  with a domain filter; defaults to `data.length`, so a filtered page no longer reports the
+  filtered count as what was loaded.
+* **`toolbar.titleCount`** — a source-owned total shown beside the shared title.
+* **`toolbar.customSearch`** — a caller-owned search control in the canonical title-row search
+  slot, for a deliberately narrower query contract; it never changes table query state.
+
+No consumer action; every addition is optional. Toolchain moved to TypeScript 6.
+
+## 0.36.0 — 2026-09-23
+
+**A press inside a popover a grid cell opened is no longer a press on the cell.** (lane
+FIX-15.)
+
+React synthetic events propagate through the REACT tree, not the DOM tree. A Radix Popover
+portals its content to `document.body`, but that content is still a React child of the
+table cell that rendered it — so every mousedown, keystroke and clipboard event inside the
+popover was delivered to `useSpreadsheetGrid`'s own handlers as if the person had pressed
+the cell.
+
+On production (build `93970125f9`, 2026-09-22) that made the relation picker unusable: one
+real mouse click in its own `Search` box ran `cellProps.onMouseDown`, whose
+`preventDefault()` stopped the input taking focus and whose `focus()` moved focus to the
+spreadsheet scroll container; Radix saw focus leave its layer and dismissed the picker. The
+box could not be typed into at all, so 0.35.0's un-clipped Create offer behind it was
+unreachable by any person.
+
+* `useSpreadsheetGrid` now ignores any mouse, key or clipboard event whose real DOM target
+  is not inside the element the handler is bound to (`camePastAPortal`) — the test is DOM
+  containment, not a list of known overlays, so it covers a relation picker, a person
+  picker, a select, a date picker and a menu alike, today and tomorrow.
+* No consumer action. A table with no `spreadsheet` prop is untouched.
+
+Proof: `MatrxDataTable.sheet.test.tsx` clause 15 mounts a cell whose content is a real
+`createPortal` into `document.body` and fails on the pre-fix bytes (focus moved to the
+scroller) — RED then GREEN. Headless, against the live store on the records-ui grid harness
+at 1600×1000 and 375 wide: a real click leaves focus in the box, three typed characters
+keep the picker open and land in it, and the Create offer is hit-testable
+(`matrx-frontend/scripts/campaign-tests/fix15_the_pickers_search_box_survives_typing.mjs`;
+12 clauses fail on the pre-fix bytes).
+
 ## 0.35.0 — 2026-09-22
 
 **A popover may now be sized by its CONTENT, because a fixed width cannot be right for a

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

package/dist/data-table/index.cjs

@@ -8439,6 +8439,19 @@ function targetsAnEditor(target) {
   if (!element) return false;
   return element.closest("input, textarea, select, [contenteditable='true']") !== null;
 }
+function camePastAPortal(target, host) {
+  if (typeof Element === "undefined") return false;
+  const element = target instanceof Element ? target : null;
+  const owner = host instanceof Element ? host : null;
+  if (!element || !owner) return false;
+  return !owner.contains(element);
+}
+function camePastAPortalIntoTheContainer(target) {
+  if (typeof Element === "undefined") return false;
+  const element = target instanceof Element ? target : null;
+  if (!element) return false;
+  return element.closest('[data-matrx-table-spreadsheet="true"]') === null;
+}
 function useSpreadsheetGrid(options) {
   const [range, setRange] = (0, import_react15.useState)(null);
   const [fillTarget, setFillTarget] = (0, import_react15.useState)(null);
@@ -8610,6 +8623,7 @@ function useSpreadsheetGrid(options) {
       const current = optionsRef.current;
       if (!current) return;
       if (targetsAnEditor(event.target)) return;
+      if (camePastAPortalIntoTheContainer(event.target)) return;
       const accel = event.metaKey || event.ctrlKey;
       if (accel && (event.key === "z" || event.key === "Z")) {
         event.preventDefault();
@@ -8696,6 +8710,7 @@ function useSpreadsheetGrid(options) {
   const onCopy = (0, import_react15.useCallback)(
     (event) => {
       if (!optionsRef.current || !range || targetsAnEditor(event.target)) return;
+      if (camePastAPortalIntoTheContainer(event.target)) return;
       const text = selectionAsTsv();
       if (!text) return;
       event.preventDefault();
@@ -8706,6 +8721,7 @@ function useSpreadsheetGrid(options) {
   const onCut = (0, import_react15.useCallback)(
     (event) => {
       if (!optionsRef.current || !range || targetsAnEditor(event.target)) return;
+      if (camePastAPortalIntoTheContainer(event.target)) return;
       const text = selectionAsTsv();
       if (!text) return;
       event.preventDefault();
@@ -8718,6 +8734,7 @@ function useSpreadsheetGrid(options) {
     (event) => {
       const current = optionsRef.current;
       if (!current || current.paste === false || !range || targetsAnEditor(event.target)) return;
+      if (camePastAPortalIntoTheContainer(event.target)) return;
       const text = event.clipboardData?.getData("text/plain") ?? "";
       if (!text) return;
       event.preventDefault();
@@ -8801,6 +8818,7 @@ function useSpreadsheetGrid(options) {
         ...inFillPreview ? { "data-matrx-cell-fill-preview": "true" } : {},
         onMouseDown: (event) => {
           if (event.button !== 0) return;
+          if (camePastAPortal(event.target ?? null, event.currentTarget)) return;
           event.preventDefault();
           const origin = event.currentTarget;
           if (typeof HTMLElement !== "undefined" && origin instanceof HTMLElement) {
@@ -12126,6 +12144,7 @@ function MatrxDataTableCore({
   toolbar,
   hideToolbar = false,
   hidePagination = false,
+  paginationLabelFormat,
   filterUi,
   detail,
   expandedDetail,
@@ -13162,7 +13181,7 @@ function MatrxDataTableCore({
   const coverageResult = (0, import_react21.useMemo)(() => {
     if (!coverage) return null;
     return describeCoverage({
-      loaded: data.length,
+      loaded: coverage.loaded ?? data.length,
       ...coverage.matched === void 0 ? {} : { matched: coverage.matched },
       ...coverage.total === void 0 ? {} : { total: coverage.total },
       ...coverage.cap === void 0 ? {} : { cap: coverage.cap },
@@ -14165,11 +14184,12 @@ 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 || showSearch || 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)(
+              !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,
                 {
                   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 },
                   context: tableId && SavedViews ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     SavedViews,
                     {
@@ -14179,7 +14199,7 @@ function MatrxDataTableCore({
                       onApply: applySavedView
                     }
                   ) }) : void 0,
-                  search: showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  search: toolbar?.customSearch ?? (showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     TableSearch,
                     {
                       value: searchValue,
@@ -14250,7 +14270,7 @@ function MatrxDataTableCore({
                         ] }) : null
                       ]
                     }
-                  ) : null,
+                  ) : null),
                   children: [
                     toolbar?.layeredFilters ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       LayeredFilterBuilder,
@@ -14904,6 +14924,7 @@ function MatrxDataTableCore({
                                         leadingCols,
                                         showActionsCol,
                                         rowNoun: grouping?.rowNoun ?? "row",
+                                        ...grouping?.renderLabel ? { renderLabel: grouping.renderLabel } : {},
                                         onToggle: () => setCollapsedGroups(toggleGroupCollapsed(collapsedGroups, entry.group.key))
                                       },
                                       `matrx-group-${entry.group.key}`
@@ -15077,7 +15098,7 @@ function MatrxDataTableCore({
                                                   "div",
                                                   {
                                                     className: cn(
-                                                      colIdx === 0 && hierarchy && "flex min-w-0 items-center"
+                                                      colIdx === 0 && (hierarchy || canExpandRow(row)) && "flex min-w-0 items-center"
                                                     ),
                                                     children: [
                                                       colIdx === 0 && hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -15088,6 +15109,40 @@ function MatrxDataTableCore({
                                                           disabled: !(hierarchy.canReparent?.(row) ?? true)
                                                         }
                                                       ) : null,
+                                                      colIdx === 0 && canExpandRow(row) ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                                                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                                                          Button,
+                                                          {
+                                                            type: "button",
+                                                            variant: "ghost",
+                                                            size: "icon",
+                                                            "data-matrx-table-expand-toggle": true,
+                                                            className: "mr-1 h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground [&_svg]:size-4",
+                                                            "aria-label": isRowExpanded(row) ? "Collapse row details" : "Expand row details",
+                                                            "aria-expanded": isRowExpanded(row),
+                                                            onClick: (event) => {
+                                                              event.stopPropagation();
+                                                              toggleExpanded(row);
+                                                            },
+                                                            onKeyDown: (event) => {
+                                                              if (event.key !== "Enter" && event.key !== " ") return;
+                                                              event.preventDefault();
+                                                              event.stopPropagation();
+                                                              toggleExpanded(row);
+                                                            },
+                                                            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                                                              ChevronRight,
+                                                              {
+                                                                className: cn(
+                                                                  "transition-transform",
+                                                                  isRowExpanded(row) && "rotate-90"
+                                                                )
+                                                              }
+                                                            )
+                                                          }
+                                                        ) }),
+                                                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: isRowExpanded(row) ? "Collapse details" : "Expand details" })
+                                                      ] }) : null,
                                                       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                                         "div",
                                                         {
@@ -15430,7 +15485,7 @@ function MatrxDataTableCore({
                   GenericTablePagination,
                   {
                     totalItems,
-                    ...sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${(0, import_format5.formatCount)(start)}\u2013${(0, import_format5.formatCount)(end)} of ${(0, import_format5.formatCount)(total)} matching \xB7 ${(0, import_format5.formatCount)(data.length)} / ${(0, import_format5.formatCount)(sourceTotal)} loaded` },
+                    ...paginationLabelFormat ? { labelFormat: paginationLabelFormat } : sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${(0, import_format5.formatCount)(start)}\u2013${(0, import_format5.formatCount)(end)} of ${(0, import_format5.formatCount)(total)} matching \xB7 ${(0, import_format5.formatCount)(data.length)} / ${(0, import_format5.formatCount)(sourceTotal)} loaded` },
                     ...localProgressiveEnabled ? { progressive: {
                       shownCount: progressiveRows.shownCount,
                       loadedCount: data.length,
@@ -15948,6 +16003,7 @@ function TableGroupHeaderRow({
   leadingCols,
   showActionsCol,
   rowNoun,
+  renderLabel,
   onToggle
 }) {
   const count = group.rows.length;
@@ -15978,7 +16034,7 @@ function TableGroupHeaderRow({
                   children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronDown, { className: "h-4 w-4" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate text-sm font-semibold text-foreground", children: group.label }),
+              renderLabel ? renderLabel(group) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate text-sm font-semibold text-foreground", children: group.label }),
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "whitespace-nowrap text-xs text-muted-foreground", children: summary })
             ] }) }, id);
           }