@ai-matrx/design-system 0.21.10 → 0.21.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.21.12
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.21.11..npm/design-system/v0.21.12 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
+## 0.21.11
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.21.10..npm/design-system/v0.21.11 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.21.10
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

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-BAJiOaQL.cjs';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-9Ii-b9EJ.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-Da781-Wq.js';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-wy1EEaeG.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-BAJiOaQL.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-9Ii-b9EJ.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-Da781-Wq.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-wy1EEaeG.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
-import { b as TableSavedViewsProps, c as MatrxDataTableRecordControls, d as MatrxDataTableDensity } from '../types-BAJiOaQL.cjs';
+import { b as TableSavedViewsProps, c as MatrxDataTableRecordControls, d as MatrxDataTableDensity } from '../types-9Ii-b9EJ.cjs';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.cjs';
 import '../content-transfer.cjs';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
-import { b as TableSavedViewsProps, c as MatrxDataTableRecordControls, d as MatrxDataTableDensity } from '../types-Da781-Wq.js';
+import { b as TableSavedViewsProps, c as MatrxDataTableRecordControls, d as MatrxDataTableDensity } from '../types-wy1EEaeG.js';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.js';
 import '../content-transfer.js';

package/dist/data-table/index.cjs

@@ -5899,6 +5899,7 @@ function ColumnHeaderCell({
   onFilterChange,
   selectOptions = [],
   selectSingle = false,
+  selectAllowCustom = false,
   align = "left",
   className,
   compact = false,
@@ -5934,9 +5935,13 @@ function ColumnHeaderCell({
   const filterActive = isColumnFilterActive(filterValue);
   const deferredFilter = filterApplyLabel !== void 0 || filterShowCancel || filterFooterHint !== void 0;
   const [filterOpen, setFilterOpen] = (0, import_react13.useState)(false);
+  const [pendingNegation, setPendingNegation] = (0, import_react13.useState)(false);
   const [draftFilter, setDraftFilter] = (0, import_react13.useState)(filterValue);
   (0, import_react13.useEffect)(() => {
-    if (!filterOpen) setDraftFilter(filterValue);
+    if (!filterOpen) {
+      setDraftFilter(filterValue);
+      setPendingNegation(filterValue?.negated ?? false);
+    }
   }, [filterOpen, filterValue]);
   const applyFilter = () => {
     onFilterChange(draftFilter);
@@ -5948,6 +5953,7 @@ function ColumnHeaderCell({
   };
   const visibleFilter = deferredFilter ? draftFilter : filterValue;
   const setNegated = (negated) => {
+    setPendingNegation(negated);
     if (!visibleFilter) return;
     const next = { ...visibleFilter, ...negated ? { negated: true } : {} };
     if (!negated) delete next.negated;
@@ -6024,12 +6030,13 @@ function ColumnHeaderCell({
             kind: filterKind,
             value: visibleFilter,
             onChange: (next) => {
-              const preservingNegation = next && visibleFilter?.negated ? { ...next, negated: true } : next;
+              const preservingNegation = next && (visibleFilter?.negated ?? pendingNegation) ? { ...next, negated: true } : next;
               if (deferredFilter) setDraftFilter(preservingNegation);
               else onFilterChange(preservingNegation);
             },
             selectOptions,
             selectSingle,
+            selectAllowCustom,
             ...markerLabels ? {
               booleanLabels: {
                 all: "All",
@@ -6040,18 +6047,18 @@ function ColumnHeaderCell({
             allowNullModes
           }
         ) : null,
-        filterKind && visibleFilter && allowNegation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
+        filterKind && allowNegation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Match mode" }),
           /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "grid grid-cols-2 gap-1 rounded-md border p-0.5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "button",
               {
                 type: "button",
-                "aria-pressed": !visibleFilter.negated,
+                "aria-pressed": !(visibleFilter?.negated ?? pendingNegation),
                 onClick: () => setNegated(false),
                 className: cn(
                   "rounded px-2 py-1.5 text-xs transition-colors",
-                  !visibleFilter.negated ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
+                  !(visibleFilter?.negated ?? pendingNegation) ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
                 ),
                 children: "Include"
               }
@@ -6060,11 +6067,11 @@ function ColumnHeaderCell({
               "button",
               {
                 type: "button",
-                "aria-pressed": visibleFilter.negated === true,
+                "aria-pressed": visibleFilter?.negated ?? pendingNegation,
                 onClick: () => setNegated(true),
                 className: cn(
                   "rounded px-2 py-1.5 text-xs transition-colors",
-                  visibleFilter.negated ? "bg-destructive text-destructive-foreground" : "text-muted-foreground hover:bg-muted"
+                  visibleFilter?.negated ?? pendingNegation ? "bg-destructive text-destructive-foreground" : "text-muted-foreground hover:bg-muted"
                 ),
                 children: "Exclude"
               }
@@ -6252,6 +6259,7 @@ function FilterBody({
   onChange,
   selectOptions,
   selectSingle = false,
+  selectAllowCustom = false,
   allowNullModes = false,
   booleanLabels
 }) {
@@ -6315,15 +6323,29 @@ function FilterBody({
   }
   if (kind === "select") {
     const selected = value?.kind === "select" ? value.values ?? (value.value && value.value !== "__all__" ? [value.value] : []) : [];
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      SearchableSelectFilter,
-      {
-        selected,
-        options: selectOptions,
-        onChange,
-        single: selectSingle
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-2", children: [
+      allowNullModes && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-wrap gap-1", "aria-label": "Blank checks", children: [["empty", "(empty)"], ["not_empty", "(not empty)"], ["null", "(null)"], ["not_null", "(not null)"]].map(([mode, label]) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": value?.kind === "text" && value.mode === mode,
+          className: "rounded border px-1.5 py-0.5 text-[10px] hover:bg-muted",
+          onClick: () => onChange({ kind: "text", value: "", mode }),
+          children: label
+        },
+        mode
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        SearchableSelectFilter,
+        {
+          selected,
+          options: selectOptions,
+          onChange,
+          single: selectSingle,
+          allowCustom: selectAllowCustom
+        }
+      )
+    ] });
   }
   if (kind === "boolean") {
     const current = value?.kind === "boolean" ? value.value : "__all__";
@@ -6355,7 +6377,8 @@ function SearchableSelectFilter({
   selected,
   options,
   onChange,
-  single = false
+  single = false,
+  allowCustom = false
 }) {
   const [query, setQuery] = (0, import_react13.useState)("");
   const filtered = (0, import_react13.useMemo)(() => {
@@ -6405,6 +6428,11 @@ function SearchableSelectFilter({
       /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandList, { className: "max-h-48", children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CommandEmpty, { className: "py-3 text-xs text-muted-foreground", children: "No matches" }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandGroup, { children: [
+          allowCustom && query.trim() && !options.some((option) => option.value === query.trim()) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandItem, { value: `custom:${query.trim()}`, onSelect: () => toggle(query.trim()), className: "text-xs", children: [
+            "Use \u201C",
+            query.trim(),
+            "\u201D"
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             CommandItem,
             {
@@ -8588,6 +8616,10 @@ function TableToolbarAction({
 function hasSameRowReferences(previous, next) {
   return previous.length === next.length && previous.every((row, index) => row === next[index]);
 }
+var VERTICAL_SCROLL_GEOMETRY_TOLERANCE_PX = 2;
+function hasUsableVerticalScroll(element) {
+  return element.scrollHeight - element.clientHeight > VERTICAL_SCROLL_GEOMETRY_TOLERANCE_PX;
+}
 function TableRowCopyControl({
   copy,
   row,
@@ -8753,6 +8785,7 @@ function MatrxDataTableCore({
   hidePagination = false,
   filterUi,
   detail,
+  expandedDetail,
   window: windowConfig,
   copy,
   contextMenu,
@@ -9102,7 +9135,7 @@ function MatrxDataTableCore({
     if (!scroll || !table || !header || !stickyHeader) return;
     let frame = 0;
     const update = () => {
-      const hasInternalVerticalScroll = scroll.scrollHeight > scroll.clientHeight + 1;
+      const hasInternalVerticalScroll = hasUsableVerticalScroll(scroll);
       const nextDocumentSticky = !hasInternalVerticalScroll;
       if (documentStickyHeaderRef.current !== nextDocumentSticky) {
         documentStickyHeaderRef.current = nextDocumentSticky;
@@ -9122,7 +9155,7 @@ function MatrxDataTableCore({
       for (let ancestor = scroll.parentElement; ancestor; ancestor = ancestor.parentElement) {
         const ancestorStyle = window.getComputedStyle(ancestor);
         const overflowY = ancestorStyle.overflowY;
-        if (/^(auto|scroll|overlay)$/.test(overflowY) && ancestor.scrollHeight > ancestor.clientHeight + 1) {
+        if (/^(auto|scroll|overlay)$/.test(overflowY) && hasUsableVerticalScroll(ancestor)) {
           const scrollPaddingTop = Number.parseFloat(ancestorStyle.scrollPaddingTop) || 0;
           scrollTargetTop = ancestor.getBoundingClientRect().top + scrollPaddingTop;
           break;
@@ -9620,7 +9653,20 @@ function MatrxDataTableCore({
     setWindowRowId(null);
     setWindowRowSnapshot(null);
   };
+  const canExpandRow = (row) => Boolean(expandedDetail && (expandedDetail.canExpand?.(row) ?? true));
+  const isRowExpanded = (row) => canExpandRow(row) && expandedDetail?.expandedId === getRowId(row);
+  const toggleExpanded = (row) => {
+    if (!expandedDetail || !canExpandRow(row)) return;
+    const id = getRowId(row);
+    expandedDetail.onExpandedIdChange(
+      expandedDetail.expandedId === id ? null : id
+    );
+  };
   const openRow = (row) => {
+    if (canExpandRow(row)) {
+      toggleExpanded(row);
+      return;
+    }
     if (opensWindowOnRowClick) {
       openWindow(row);
       return;
@@ -9724,7 +9770,11 @@ function MatrxDataTableCore({
       } : {},
       ...editEnabled && visibleColumns.some(
         (column) => column.editable && (column.editableIf?.(row) ?? true)
-      ) ? { beginEdit: () => beginRowEdit(row) } : {}
+      ) ? { beginEdit: () => beginRowEdit(row) } : {},
+      ...canExpandRow(row) ? {
+        isExpanded: isRowExpanded(row),
+        toggleExpanded: () => toggleExpanded(row)
+      } : {}
     };
   };
   const hierarchyRows = hierarchy?.rows ?? data;
@@ -10630,6 +10680,7 @@ function MatrxDataTableCore({
                         ] }) }) : paginated.map((row, index) => {
                           const id = getRowId(row);
                           const displayRow = applyRowEdits(row, edits[id]);
+                          const controls = buildRecordControls(displayRow);
                           const selectable = selection?.isRowSelectable?.(row) ?? Boolean(selection);
                           return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { "data-row-id": id, className: "contents", children: mobileCards(displayRow, index, {
                             renderCell: (columnKey) => {
@@ -10664,10 +10715,15 @@ function MatrxDataTableCore({
                                       ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
                                     }
                                   ) : null,
-                                  renderRowActions(displayRow, buildRecordControls(displayRow))
+                                  renderRowActions(displayRow, controls)
                                 ]
                               }
-                            ) : null
+                            ) : null,
+                            ...canExpandRow(row) ? {
+                              isExpanded: isRowExpanded(row),
+                              toggleExpanded: () => toggleExpanded(row)
+                            } : {},
+                            expandedDetail: expandedDetail && isRowExpanded(row) ? expandedDetail.render(displayRow, controls) : null
                           }) }, id);
                         }),
                         appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -10857,6 +10913,7 @@ function MatrxDataTableCore({
                                                 onFilterChange: (next) => setColumnFilter(id, next),
                                                 selectOptions: meta?.options,
                                                 selectSingle: col.filterSingle,
+                                                selectAllowCustom: col.filterAllowCustom,
                                                 filterApplyLabel: filterUi?.applyLabel,
                                                 filterShowCancel: filterUi?.showCancel,
                                                 filterFooterHint: filterUi?.footerHint,
@@ -10934,6 +10991,7 @@ function MatrxDataTableCore({
                                   const isSelected = selectedId === id;
                                   const rowEdits = edits[id];
                                   const displayRow = applyRowEdits(row, rowEdits);
+                                  const controls = buildRecordControls(displayRow);
                                   const isChecked = selectedIdSet.has(id);
                                   const rowNode = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                                     "tr",
@@ -10962,7 +11020,7 @@ function MatrxDataTableCore({
                                         // horizontally. The translucent zebra/hover tints remain
                                         // desktop-only so densely layered mobile content stays crisp.
                                         "border-b border-border/60 bg-card transition-colors",
-                                        (detailEnabled || Boolean(onRowOpen)) && "cursor-pointer sm:hover:bg-muted/50",
+                                        (detailEnabled || Boolean(onRowOpen) || canExpandRow(row)) && "cursor-pointer sm:hover:bg-muted/50",
                                         isSelected && "bg-muted",
                                         isChecked && "bg-primary/5",
                                         highlightedIndex === index && "bg-muted ring-1 ring-inset ring-primary/60",
@@ -11078,7 +11136,7 @@ function MatrxDataTableCore({
                                                       ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
                                                     }
                                                   ) : null,
-                                                  renderRowActions(displayRow, buildRecordControls(displayRow)),
+                                                  renderRowActions(displayRow, controls),
                                                   windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
                                                     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                                                       Button,
@@ -11109,15 +11167,36 @@ function MatrxDataTableCore({
                                     id
                                   );
                                   const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
-                                  return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                                    HierarchyDroppableRow,
+                                  const inlineDetail = expandedDetail && isRowExpanded(row) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                    "tr",
                                     {
-                                      id,
-                                      disabled: !canDropOn(row),
-                                      children: wrappedRow
+                                      "data-matrx-table-expanded-detail": id,
+                                      className: cn("bg-muted/20", expandedDetail.className),
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                        "td",
+                                        {
+                                          colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
+                                          className: "p-4",
+                                          children: expandedDetail.render(displayRow, controls)
+                                        }
+                                      )
                                     },
-                                    id
-                                  ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react20.Fragment, { children: wrappedRow }, id);
+                                    `${id}:expanded-detail`
+                                  ) : null;
+                                  return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react20.Fragment, { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                      HierarchyDroppableRow,
+                                      {
+                                        id,
+                                        disabled: !canDropOn(row),
+                                        children: wrappedRow
+                                      }
+                                    ),
+                                    inlineDetail
+                                  ] }, id) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react20.Fragment, { children: [
+                                    wrappedRow,
+                                    inlineDetail
+                                  ] }, id);
                                 }),
                                 appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                                   "td",