@ai-matrx/design-system 0.21.10 → 0.21.12

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { h as MatrxDataTableProps, i as TableViewSnapshot, c as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-BAJiOaQL.cjs';
-export { A as AnyOfColumnSearch, k as CellEditType, l as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, m as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, d as MatrxDataTableDensity, n as MatrxDataTableDetailConfig, o as MatrxDataTableEditConfig, p as MatrxDataTableEmptyState, q as MatrxDataTableFilterUi, r as MatrxDataTableHierarchyConfig, s as MatrxDataTableHierarchyMove, t as MatrxDataTableMobileCardControls, u as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, v as MatrxDataTableSelectionConfig, w as MatrxDataTableSourceProcessing, x as MatrxDataTableToolbar, y as MatrxDataTableUrlStateConfig, z as MatrxDataTableWindowConfig, B as MatrxTablePagination, D as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, E as TableViewQuery, F as TextFilterMode, G as ToolbarFacet } from '../types-BAJiOaQL.cjs';
+import { h as MatrxDataTableProps, i as TableViewSnapshot, c as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-9Ii-b9EJ.cjs';
+export { A as AnyOfColumnSearch, k as CellEditType, l as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, m as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, d as MatrxDataTableDensity, n as MatrxDataTableDetailConfig, o as MatrxDataTableEditConfig, p as MatrxDataTableEmptyState, q as MatrxDataTableExpandedDetailConfig, r as MatrxDataTableFilterUi, s as MatrxDataTableHierarchyConfig, t as MatrxDataTableHierarchyMove, u as MatrxDataTableMobileCardControls, v as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, w as MatrxDataTableSelectionConfig, x as MatrxDataTableSourceProcessing, y as MatrxDataTableToolbar, z as MatrxDataTableUrlStateConfig, B as MatrxDataTableWindowConfig, D as MatrxTablePagination, E as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, F as TableViewQuery, G as TextFilterMode, H as ToolbarFacet } from '../types-9Ii-b9EJ.cjs';
 export { MatrxDataTableHost, MatrxDataTableProvider, MatrxTableRowAlchemy, TableDoors, TableEntityRefProps, TableLinkProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost, useMatrxTableRowAlchemy } from './host.cjs';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput } from './copy-types.cjs';

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { h as MatrxDataTableProps, i as TableViewSnapshot, c as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-Da781-Wq.js';
-export { A as AnyOfColumnSearch, k as CellEditType, l as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, m as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, d as MatrxDataTableDensity, n as MatrxDataTableDetailConfig, o as MatrxDataTableEditConfig, p as MatrxDataTableEmptyState, q as MatrxDataTableFilterUi, r as MatrxDataTableHierarchyConfig, s as MatrxDataTableHierarchyMove, t as MatrxDataTableMobileCardControls, u as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, v as MatrxDataTableSelectionConfig, w as MatrxDataTableSourceProcessing, x as MatrxDataTableToolbar, y as MatrxDataTableUrlStateConfig, z as MatrxDataTableWindowConfig, B as MatrxTablePagination, D as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, E as TableViewQuery, F as TextFilterMode, G as ToolbarFacet } from '../types-Da781-Wq.js';
+import { h as MatrxDataTableProps, i as TableViewSnapshot, c as MatrxDataTableRecordControls, j as ColumnMarker, M as MatrxColumnDef } from '../types-wy1EEaeG.js';
+export { A as AnyOfColumnSearch, k as CellEditType, l as CellEditsMap, f as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, m as MatrxDataTableContextMenuConfig, g as MatrxDataTableCopyConfig, d as MatrxDataTableDensity, n as MatrxDataTableDetailConfig, o as MatrxDataTableEditConfig, p as MatrxDataTableEmptyState, q as MatrxDataTableExpandedDetailConfig, r as MatrxDataTableFilterUi, s as MatrxDataTableHierarchyConfig, t as MatrxDataTableHierarchyMove, u as MatrxDataTableMobileCardControls, v as MatrxDataTableQueryControl, e as MatrxDataTableQueryState, w as MatrxDataTableSelectionConfig, x as MatrxDataTableSourceProcessing, y as MatrxDataTableToolbar, z as MatrxDataTableUrlStateConfig, B as MatrxDataTableWindowConfig, D as MatrxTablePagination, E as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, F as TableViewQuery, G as TextFilterMode, H as ToolbarFacet } from '../types-wy1EEaeG.js';
 export { MatrxDataTableHost, MatrxDataTableProvider, MatrxTableRowAlchemy, TableDoors, TableEntityRefProps, TableLinkProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost, useMatrxTableRowAlchemy } from './host.js';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput } from './copy-types.js';

package/dist/data-table/index.js

@@ -5907,6 +5907,7 @@ function ColumnHeaderCell({
   onFilterChange,
   selectOptions = [],
   selectSingle = false,
+  selectAllowCustom = false,
   align = "left",
   className,
   compact = false,
@@ -5942,9 +5943,13 @@ function ColumnHeaderCell({
   const filterActive = isColumnFilterActive(filterValue);
   const deferredFilter = filterApplyLabel !== void 0 || filterShowCancel || filterFooterHint !== void 0;
   const [filterOpen, setFilterOpen] = useState14(false);
+  const [pendingNegation, setPendingNegation] = useState14(false);
   const [draftFilter, setDraftFilter] = useState14(filterValue);
   useEffect9(() => {
-    if (!filterOpen) setDraftFilter(filterValue);
+    if (!filterOpen) {
+      setDraftFilter(filterValue);
+      setPendingNegation(filterValue?.negated ?? false);
+    }
   }, [filterOpen, filterValue]);
   const applyFilter = () => {
     onFilterChange(draftFilter);
@@ -5956,6 +5961,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;
@@ -6032,12 +6038,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",
@@ -6048,18 +6055,18 @@ function ColumnHeaderCell({
             allowNullModes
           }
         ) : null,
-        filterKind && visibleFilter && allowNegation ? /* @__PURE__ */ jsxs22("div", { className: "mt-2 border-t border-border pt-2", children: [
+        filterKind && allowNegation ? /* @__PURE__ */ jsxs22("div", { className: "mt-2 border-t border-border pt-2", children: [
           /* @__PURE__ */ jsx31("p", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Match mode" }),
           /* @__PURE__ */ jsxs22("div", { className: "grid grid-cols-2 gap-1 rounded-md border p-0.5", children: [
             /* @__PURE__ */ jsx31(
               "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"
               }
@@ -6068,11 +6075,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"
               }
@@ -6260,6 +6267,7 @@ function FilterBody({
   onChange,
   selectOptions,
   selectSingle = false,
+  selectAllowCustom = false,
   allowNullModes = false,
   booleanLabels
 }) {
@@ -6323,15 +6331,29 @@ function FilterBody({
   }
   if (kind === "select") {
     const selected = value?.kind === "select" ? value.values ?? (value.value && value.value !== "__all__" ? [value.value] : []) : [];
-    return /* @__PURE__ */ jsx31(
-      SearchableSelectFilter,
-      {
-        selected,
-        options: selectOptions,
-        onChange,
-        single: selectSingle
-      }
-    );
+    return /* @__PURE__ */ jsxs22("div", { className: "space-y-2", children: [
+      allowNullModes && /* @__PURE__ */ jsx31("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__ */ jsx31(
+        "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__ */ jsx31(
+        SearchableSelectFilter,
+        {
+          selected,
+          options: selectOptions,
+          onChange,
+          single: selectSingle,
+          allowCustom: selectAllowCustom
+        }
+      )
+    ] });
   }
   if (kind === "boolean") {
     const current = value?.kind === "boolean" ? value.value : "__all__";
@@ -6363,7 +6385,8 @@ function SearchableSelectFilter({
   selected,
   options,
   onChange,
-  single = false
+  single = false,
+  allowCustom = false
 }) {
   const [query, setQuery] = useState14("");
   const filtered = useMemo5(() => {
@@ -6413,6 +6436,11 @@ function SearchableSelectFilter({
       /* @__PURE__ */ jsxs22(CommandList, { className: "max-h-48", children: [
         /* @__PURE__ */ jsx31(CommandEmpty, { className: "py-3 text-xs text-muted-foreground", children: "No matches" }),
         /* @__PURE__ */ jsxs22(CommandGroup, { children: [
+          allowCustom && query.trim() && !options.some((option) => option.value === query.trim()) && /* @__PURE__ */ jsxs22(CommandItem, { value: `custom:${query.trim()}`, onSelect: () => toggle(query.trim()), className: "text-xs", children: [
+            "Use \u201C",
+            query.trim(),
+            "\u201D"
+          ] }),
           /* @__PURE__ */ jsx31(
             CommandItem,
             {
@@ -8605,6 +8633,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,
@@ -8770,6 +8802,7 @@ function MatrxDataTableCore({
   hidePagination = false,
   filterUi,
   detail,
+  expandedDetail,
   window: windowConfig,
   copy,
   contextMenu,
@@ -9119,7 +9152,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;
@@ -9139,7 +9172,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;
@@ -9637,7 +9670,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;
@@ -9741,7 +9787,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;
@@ -10647,6 +10697,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__ */ jsx41("div", { "data-row-id": id, className: "contents", children: mobileCards(displayRow, index, {
                             renderCell: (columnKey) => {
@@ -10681,10 +10732,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__ */ jsxs31(
@@ -10874,6 +10930,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,
@@ -10951,6 +11008,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__ */ jsxs31(
                                     "tr",
@@ -10979,7 +11037,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",
@@ -11095,7 +11153,7 @@ function MatrxDataTableCore({
                                                       ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
                                                     }
                                                   ) : null,
-                                                  renderRowActions(displayRow, buildRecordControls(displayRow)),
+                                                  renderRowActions(displayRow, controls),
                                                   windowEnabled ? /* @__PURE__ */ jsxs31(Tooltip, { children: [
                                                     /* @__PURE__ */ jsx41(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx41(
                                                       Button,
@@ -11126,15 +11184,36 @@ function MatrxDataTableCore({
                                     id
                                   );
                                   const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
-                                  return hierarchy ? /* @__PURE__ */ jsx41(
-                                    HierarchyDroppableRow,
+                                  const inlineDetail = expandedDetail && isRowExpanded(row) ? /* @__PURE__ */ jsx41(
+                                    "tr",
                                     {
-                                      id,
-                                      disabled: !canDropOn(row),
-                                      children: wrappedRow
+                                      "data-matrx-table-expanded-detail": id,
+                                      className: cn("bg-muted/20", expandedDetail.className),
+                                      children: /* @__PURE__ */ jsx41(
+                                        "td",
+                                        {
+                                          colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
+                                          className: "p-4",
+                                          children: expandedDetail.render(displayRow, controls)
+                                        }
+                                      )
                                     },
-                                    id
-                                  ) : /* @__PURE__ */ jsx41(Fragment6, { children: wrappedRow }, id);
+                                    `${id}:expanded-detail`
+                                  ) : null;
+                                  return hierarchy ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
+                                    /* @__PURE__ */ jsx41(
+                                      HierarchyDroppableRow,
+                                      {
+                                        id,
+                                        disabled: !canDropOn(row),
+                                        children: wrappedRow
+                                      }
+                                    ),
+                                    inlineDetail
+                                  ] }, id) : /* @__PURE__ */ jsxs31(Fragment6, { children: [
+                                    wrappedRow,
+                                    inlineDetail
+                                  ] }, id);
                                 }),
                                 appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ jsx41("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ jsx41(
                                   "td",