@ai-matrx/design-system 0.34.0 → 0.36.0

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

package/dist/data-table/index.cjs

@@ -2594,6 +2594,7 @@ var PopoverContent = React13.forwardRef(
     sideOffset = 4,
     container,
     animated = true,
+    sizing = "fixed",
     ...props
   }, ref) => {
     const portalContainer = usePortalContainer(container);
@@ -2610,7 +2611,8 @@ var PopoverContent = React13.forwardRef(
           // z, DOM portal order decides, so a dialog opened FROM a popover stacks
           // above it, and a popover opened from a dialog still stacks above the
           // dialog. z-[10001] buried dialogs behind fullscreen popovers.
-          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          "z-[10000] max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          sizing === "content" ? "w-auto min-w-[min(max(var(--radix-popover-trigger-width),20rem),calc(100vw-2rem))] max-w-[min(28rem,calc(100vw-2rem))]" : "w-72",
           animated && MOTION_POPPER,
           className
         ),
@@ -6296,8 +6298,9 @@ function ColumnHeaderCell({
   const menuContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     PopoverContent,
     {
+      sizing: "content",
       align: "start",
-      className: "w-64 p-2",
+      className: "p-2",
       onClick: (e) => e.stopPropagation(),
       onOpenAutoFocus: (event) => {
         const content = event.currentTarget;
@@ -8436,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);
@@ -8607,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();
@@ -8693,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();
@@ -8703,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();
@@ -8715,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();
@@ -8798,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) {
@@ -10995,8 +11016,9 @@ function EditableTableCell({
     /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       PopoverContent,
       {
+        sizing: "content",
         align: "start",
-        className: "w-56 p-2",
+        className: "p-2",
         onClick: (e) => e.stopPropagation(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -13158,14 +13180,14 @@ function MatrxDataTableCore({
   const coverageResult = (0, import_react21.useMemo)(() => {
     if (!coverage) return null;
     return describeCoverage({
-      loaded: processed.length,
+      loaded: data.length,
       ...coverage.matched === void 0 ? {} : { matched: coverage.matched },
       ...coverage.total === void 0 ? {} : { total: coverage.total },
       ...coverage.cap === void 0 ? {} : { cap: coverage.cap },
       answeredBy: coverage.answeredBy ?? "client",
       ...coverage.noun === void 0 ? {} : { noun: coverage.noun }
     });
-  }, [coverage, processed.length]);
+  }, [coverage, data.length]);
   const bodyEntries = (0, import_react21.useMemo)(() => {
     const from = effectiveRowWindow ? effectiveRowWindow.start : 0;
     const to = effectiveRowWindow ? effectiveRowWindow.end : void 0;
@@ -13386,13 +13408,26 @@ function MatrxDataTableCore({
     setWindowRowSnapshot(null);
   };
   const canExpandRow = (row) => Boolean(expandedDetail && (expandedDetail.canExpand?.(row) ?? true));
-  const isRowExpanded = (row) => canExpandRow(row) && expandedDetail?.expandedId === getRowId(row);
+  const isMultiExpandedDetail = (detail2) => "expandedIds" in detail2;
+  const isRowExpanded = (row) => {
+    if (!expandedDetail || !canExpandRow(row)) return false;
+    const id = getRowId(row);
+    return isMultiExpandedDetail(expandedDetail) ? expandedDetail.expandedIds.has(id) : expandedDetail.expandedId === id;
+  };
   const toggleExpanded = (row) => {
     if (!expandedDetail || !canExpandRow(row)) return;
     const id = getRowId(row);
-    expandedDetail.onExpandedIdChange(
-      expandedDetail.expandedId === id ? null : id
-    );
+    if (isMultiExpandedDetail(expandedDetail)) {
+      const nextExpandedIds = new Set(expandedDetail.expandedIds);
+      if (nextExpandedIds.has(id)) {
+        nextExpandedIds.delete(id);
+      } else {
+        nextExpandedIds.add(id);
+      }
+      expandedDetail.onExpandedIdsChange(nextExpandedIds);
+      return;
+    }
+    expandedDetail.onExpandedIdChange(expandedDetail.expandedId === id ? null : id);
   };
   const openRow = (row) => {
     if (canExpandRow(row)) {
@@ -14430,6 +14465,19 @@ 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)(
+                  "div",
+                  {
+                    "data-matrx-table-coverage": true,
+                    "data-matrx-table-coverage-scope": coverageResult.scope,
+                    role: "status",
+                    className: "flex shrink-0 items-start gap-2 rounded-md border border-amber-300/70 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-semibold", children: coverageResult.badge }),
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: coverageResult.notice })
+                    ]
+                  }
+                ) : null,
                 /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
                   mobileCards ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                     "div",
@@ -14536,19 +14584,6 @@ function MatrxDataTableCore({
                       ]
                     }
                   ) : null,
-                  coverageResult && coverageResult.notice ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-                    "div",
-                    {
-                      "data-matrx-table-coverage": true,
-                      "data-matrx-table-coverage-scope": coverageResult.scope,
-                      role: "status",
-                      className: "mb-1 flex items-start gap-2 rounded-md border border-amber-300/70 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-semibold", children: coverageResult.badge }),
-                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: coverageResult.notice })
-                      ]
-                    }
-                  ) : null,
                   /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                     "div",
                     {