@ai-matrx/design-system 0.42.1 → 0.43.0

package/dist/data-table/infer-filter.d.cts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, f as ColumnFilterKind } from '../types-q5ficDSo.cjs';
+import { M as MatrxColumnDef, f as ColumnFilterKind } from '../types-CqU57qk8.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/infer-filter.d.ts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, f as ColumnFilterKind } from '../types-afUz93xo.js';
+import { M as MatrxColumnDef, f as ColumnFilterKind } from '../types-CUR8Hbt5.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/layered-filters.d.cts

@@ -1,4 +1,4 @@
-export { _ as LAYERED_FILTER_OPERATORS, $ as LAYERED_FILTER_OPERATOR_LABELS, a0 as LayeredFilterField, a1 as LayeredFilterOperator, L as LayeredFilterRule, a2 as columnFiltersToLayeredRules, a3 as completeLayeredFilterRules, a4 as decodeLayeredFilterRules, a5 as encodeLayeredFilterRules, a6 as isCompleteLayeredFilterRule, a7 as isLayeredFilterOperator, a8 as layeredFilterMatchesValue, a9 as layeredFilterNeedsValue, aa as layeredFilterRuleSummary, ab as operatorsForLayeredField } from '../types-q5ficDSo.cjs';
+export { _ as LAYERED_FILTER_OPERATORS, $ as LAYERED_FILTER_OPERATOR_LABELS, a0 as LayeredFilterField, a1 as LayeredFilterOperator, L as LayeredFilterRule, a2 as columnFiltersToLayeredRules, a3 as completeLayeredFilterRules, a4 as decodeLayeredFilterRules, a5 as encodeLayeredFilterRules, a6 as isCompleteLayeredFilterRule, a7 as isLayeredFilterOperator, a8 as layeredFilterMatchesValue, a9 as layeredFilterNeedsValue, aa as layeredFilterRuleSummary, ab as operatorsForLayeredField } from '../types-CqU57qk8.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/layered-filters.d.ts

@@ -1,4 +1,4 @@
-export { _ as LAYERED_FILTER_OPERATORS, $ as LAYERED_FILTER_OPERATOR_LABELS, a0 as LayeredFilterField, a1 as LayeredFilterOperator, L as LayeredFilterRule, a2 as columnFiltersToLayeredRules, a3 as completeLayeredFilterRules, a4 as decodeLayeredFilterRules, a5 as encodeLayeredFilterRules, a6 as isCompleteLayeredFilterRule, a7 as isLayeredFilterOperator, a8 as layeredFilterMatchesValue, a9 as layeredFilterNeedsValue, aa as layeredFilterRuleSummary, ab as operatorsForLayeredField } from '../types-afUz93xo.js';
+export { _ as LAYERED_FILTER_OPERATORS, $ as LAYERED_FILTER_OPERATOR_LABELS, a0 as LayeredFilterField, a1 as LayeredFilterOperator, L as LayeredFilterRule, a2 as columnFiltersToLayeredRules, a3 as completeLayeredFilterRules, a4 as decodeLayeredFilterRules, a5 as encodeLayeredFilterRules, a6 as isCompleteLayeredFilterRule, a7 as isLayeredFilterOperator, a8 as layeredFilterMatchesValue, a9 as layeredFilterNeedsValue, aa as layeredFilterRuleSummary, ab as operatorsForLayeredField } from '../types-CUR8Hbt5.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/query-control.d.cts

@@ -1,5 +1,5 @@
 import { ResolvedFilterKind } from './infer-filter.cjs';
-import { e as MatrxDataTableQueryState, M as MatrxColumnDef } from '../types-q5ficDSo.cjs';
+import { e as MatrxDataTableQueryState, M as MatrxColumnDef } from '../types-CqU57qk8.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/query-control.d.ts

@@ -1,5 +1,5 @@
 import { ResolvedFilterKind } from './infer-filter.js';
-import { e as MatrxDataTableQueryState, M as MatrxColumnDef } from '../types-afUz93xo.js';
+import { e as MatrxDataTableQueryState, M as MatrxColumnDef } from '../types-CUR8Hbt5.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/spreadsheet.cjs

@@ -23,6 +23,7 @@ var useSpreadsheetGrid_exports = {};
 __export(useSpreadsheetGrid_exports, {
   NO_PATCHES: () => NOTHING,
   READ_ONLY_REASON: () => READ_ONLY_REASON,
+  TYPE_CATCHER_ATTR: () => TYPE_CATCHER_ATTR,
   useSpreadsheetGrid: () => useSpreadsheetGrid
 });
 module.exports = __toCommonJS(useSpreadsheetGrid_exports);
@@ -633,8 +634,23 @@ function undoEntryFor(before, after, label) {
 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;
@@ -655,6 +671,8 @@ function useSpreadsheetGrid(options) {
   const [fillTarget, setFillTarget] = (0, import_react.useState)(null);
   const [stack, setStack] = (0, import_react.useState)(() => createUndoStack(options?.undoDepth ?? 100));
   const draggingRef = (0, import_react.useRef)(null);
+  const catcherRef = (0, import_react.useRef)(null);
+  const composingRef = (0, import_react.useRef)(false);
   const optionsRef = (0, import_react.useRef)(options);
   optionsRef.current = options;
   const rowIds = options?.rowIds ?? [];
@@ -1033,7 +1051,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 }
@@ -1104,11 +1124,58 @@ function useSpreadsheetGrid(options) {
     window.addEventListener("mouseup", commit);
     return () => window.removeEventListener("mouseup", commit);
   }, [options, fillRequestBase, applyPatches, announceSkips, screenPatches, refuseWrite]);
+  const takeTypedText = (0, import_react.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,