@ai-matrx/design-system 0.42.1 → 0.44.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-q5ficDSo.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-CqU57qk8.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-afUz93xo.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-CUR8Hbt5.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-q5ficDSo.cjs';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-CqU57qk8.cjs';
 import { MatrxTableMenuTarget, MatrxTableMenuPayload, MatrxTableMenuSectionsResolver, MatrxTableMenuIconName } from './menu-targets.cjs';
 export { MatrxTableMenuItem, MatrxTableMenuSection } from './menu-targets.cjs';
 import '../content-transfer.cjs';

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-afUz93xo.js';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-CUR8Hbt5.js';
 import { MatrxTableMenuTarget, MatrxTableMenuPayload, MatrxTableMenuSectionsResolver, MatrxTableMenuIconName } from './menu-targets.js';
 export { MatrxTableMenuItem, MatrxTableMenuSection } from './menu-targets.js';
 import '../content-transfer.js';

package/dist/data-table/index.cjs

@@ -1658,6 +1658,15 @@ function useIsMobile() {
   return isMobile;
 }
 
+// src/layer-front.ts
+var LAYER_FRONT_EVENT = "matrx:layer-front";
+function announceLayerFront(element) {
+  if (typeof document === "undefined") return;
+  document.dispatchEvent(
+    new CustomEvent(LAYER_FRONT_EVENT, { detail: { element } })
+  );
+}
+
 // src/dialog.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var DialogWindowedByDefaultContext = React11.createContext(false);
@@ -1728,6 +1737,8 @@ var DialogContent = React11.forwardRef(
     dismissOnOutsideClick = false,
     onInteractOutside,
     onEscapeKeyDown,
+    onPointerDownCapture,
+    onFocusCapture,
     style,
     ...props
   }, ref) => {
@@ -1740,6 +1751,24 @@ var DialogContent = React11.forwardRef(
     const [containerEl, setContainerEl] = React11.useState(
       null
     );
+    const stacks = windowed && windowedByDefault;
+    const [behind, setBehind] = React11.useState(false);
+    React11.useEffect(() => {
+      if (!stacks || !containerEl) return;
+      const onFront = (event) => {
+        const element = event.detail?.element ?? null;
+        if (element && (element === containerEl || containerEl.contains(element))) return;
+        setBehind(true);
+      };
+      document.addEventListener(LAYER_FRONT_EVENT, onFront);
+      announceLayerFront(containerEl);
+      return () => document.removeEventListener(LAYER_FRONT_EVENT, onFront);
+    }, [stacks, containerEl]);
+    const bringToFront = () => {
+      if (!stacks || !containerEl) return;
+      setBehind(false);
+      announceLayerFront(containerEl);
+    };
     const [offset, setOffset] = React11.useState({ x: 0, y: 0 });
     const dragRef = React11.useRef(null);
     const handle = React11.useMemo(() => {
@@ -1798,10 +1827,20 @@ var DialogContent = React11.forwardRef(
             // z=1000); staying below that boundary makes a newly focused window
             // usable without coupling the two systems.
             !isModal && !windowedByDefault && "z-[900]",
+            // Another layer came to the front after this window (layer-front.ts).
+            stacks && behind && "z-[999]",
             // Without an overlay the card needs its own separation from the page.
             windowed && "shadow-2xl ring-1 ring-border/60"
           ),
           style: windowed && (offset.x !== 0 || offset.y !== 0) ? { ...style, translate: `${offset.x}px ${offset.y}px` } : style,
+          onPointerDownCapture: (event) => {
+            onPointerDownCapture?.(event);
+            if (behind) bringToFront();
+          },
+          onFocusCapture: (event) => {
+            onFocusCapture?.(event);
+            if (behind) bringToFront();
+          },
           onInteractOutside: (event) => {
             onInteractOutside?.(event);
             if (windowed && !dismissOnOutsideClick) event.preventDefault();
@@ -8608,8 +8647,23 @@ function canRedo(stack) {
 function targetsAnEditor(target) {
   const element = target instanceof Element ? target : null;
   if (!element) return false;
+  if (element.closest(`[${TYPE_CATCHER_ATTR}]`)) return false;
   return element.closest("input, textarea, select, [contenteditable='true']") !== null;
 }
+var TYPE_CATCHER_ATTR = "data-matrx-type-catcher";
+var TYPE_CATCHER_STYLE = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: 1,
+  height: 1,
+  padding: 0,
+  border: 0,
+  opacity: 0,
+  overflow: "hidden",
+  resize: "none",
+  pointerEvents: "none"
+};
 function camePastAPortal(target, host) {
   if (typeof Element === "undefined") return false;
   const element = target instanceof Element ? target : null;
@@ -8629,6 +8683,8 @@ function useSpreadsheetGrid(options) {
   const [fillTarget, setFillTarget] = (0, import_react15.useState)(null);
   const [stack, setStack] = (0, import_react15.useState)(() => createUndoStack(options?.undoDepth ?? 100));
   const draggingRef = (0, import_react15.useRef)(null);
+  const catcherRef = (0, import_react15.useRef)(null);
+  const composingRef = (0, import_react15.useRef)(false);
   const optionsRef = (0, import_react15.useRef)(options);
   optionsRef.current = options;
   const rowIds = options?.rowIds ?? [];
@@ -9007,7 +9063,9 @@ function useSpreadsheetGrid(options) {
           event.preventDefault();
           const origin = event.currentTarget;
           if (typeof HTMLElement !== "undefined" && origin instanceof HTMLElement) {
-            origin.closest('[data-matrx-table-spreadsheet="true"]')?.focus({ preventScroll: true });
+            const container = origin.closest('[data-matrx-table-spreadsheet="true"]');
+            const catcher = container?.querySelector(`[${TYPE_CATCHER_ATTR}]`);
+            (catcher ?? container)?.focus({ preventScroll: true });
           }
           setRange(
             (previous) => event.shiftKey && previous ? { anchor: previous.anchor, focus: address } : { anchor: address, focus: address }
@@ -9078,11 +9136,58 @@ function useSpreadsheetGrid(options) {
     window.addEventListener("mouseup", commit);
     return () => window.removeEventListener("mouseup", commit);
   }, [options, fillRequestBase, applyPatches, announceSkips, screenPatches, refuseWrite]);
+  const takeTypedText = (0, import_react15.useCallback)(
+    (text) => {
+      if (catcherRef.current) catcherRef.current.value = "";
+      const current = optionsRef.current;
+      const focused = range?.focus;
+      if (!current || !focused || current.readOnly || !current.onEditRequest) return;
+      if (text.trim() === "") return;
+      current.onEditRequest(focused, text);
+    },
+    [range]
+  );
+  const typeCatcherProps = {
+    ref: (element) => {
+      catcherRef.current = element;
+    },
+    tabIndex: -1,
+    "aria-label": "Type to edit the selected cell",
+    inputMode: "none",
+    autoComplete: "off",
+    autoCorrect: "off",
+    autoCapitalize: "off",
+    spellCheck: false,
+    rows: 1,
+    [TYPE_CATCHER_ATTR]: "",
+    style: TYPE_CATCHER_STYLE,
+    onInput: (event) => {
+      const kind = event.nativeEvent?.inputType;
+      if (typeof kind === "string" && (kind.startsWith("insertFromPaste") || kind.startsWith("insertFromDrop"))) {
+        event.currentTarget.value = "";
+        return;
+      }
+      if (composingRef.current) return;
+      takeTypedText(event.currentTarget.value);
+    },
+    onCompositionStart: () => {
+      composingRef.current = true;
+    },
+    onCompositionEnd: (event) => {
+      composingRef.current = false;
+      takeTypedText(event.data || event.currentTarget.value);
+    }
+  };
   return {
     range,
     bounds,
     enabled: options !== null,
+    typeCatcherProps,
     containerProps: {
+      onFocus: (event) => {
+        if (event.target !== event.currentTarget) return;
+        catcherRef.current?.focus({ preventScroll: true });
+      },
       tabIndex: options ? 0 : -1,
       onKeyDown,
       onCopy,
@@ -14069,13 +14174,17 @@ function MatrxDataTableCore({
     }));
   };
   const requestCellEdit = (address, seed) => {
-    if (!editEnabled) return false;
+    if (!editEnabled && !spreadsheet?.onEditRequest) return false;
     const row = data.find((candidate) => getRowId(candidate) === address.rowId);
     if (!row) return false;
     const column = visibleColumns.find(
       (candidate) => columnId(candidate) === address.fieldName
     );
-    if (!column?.editable || !(column.editableIf?.(row) ?? true)) return false;
+    if (!column?.editable) {
+      const own = spreadsheet?.onEditRequest;
+      return own ? own({ rowId: address.rowId, columnId: address.fieldName }, seed) : false;
+    }
+    if (!(column.editableIf?.(row) ?? true)) return false;
     const field = column.accessorKey ? String(column.accessorKey) : columnId(column);
     setEditRequest((current) => ({
       rowId: address.rowId,
@@ -15204,6 +15313,7 @@ function MatrxDataTableCore({
                             onCopy: sheet.containerProps.onCopy,
                             onCut: sheet.containerProps.onCut,
                             onPaste: sheet.containerProps.onPaste,
+                            onFocus: sheet.containerProps.onFocus,
                             "data-matrx-table-spreadsheet": "true"
                           } : {},
                           "aria-busy": isLoading || isFetching,
@@ -15214,6 +15324,7 @@ function MatrxDataTableCore({
                             tableClassName
                           ),
                           children: [
+                            spreadsheetEnabled ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("textarea", { ...sheet.typeCatcherProps }) : null,
                             hierarchy && draggedRow ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                               HierarchyRootDropTarget,
                               {