@ai-matrx/design-system 0.42.0 → 0.43.0

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

@@ -168,8 +168,15 @@ interface SpreadsheetGrid {
     bounds: RangeBounds | null;
     /** True when this hook is doing anything at all. */
     enabled: boolean;
+    /** Props for the hidden textarea the grid's focus lives in (type-to-edit). */
+    typeCatcherProps: SpreadsheetTypeCatcherProps;
     /** Props for the scroll container that owns the keyboard and the clipboard. */
     containerProps: {
+        /** Focus landing on the container itself (Tab into the grid) moves on to the type catcher. */
+        onFocus: (event: {
+            target: unknown;
+            currentTarget: unknown;
+        }) => void;
         tabIndex: number;
         onKeyDown: (event: SpreadsheetKeyEvent) => void;
         onCopy: (event: SpreadsheetClipboardEvent) => void;
@@ -212,9 +219,56 @@ interface SpreadsheetClipboardEvent {
     target: EventTarget | null;
     preventDefault: () => void;
 }
+/** Marks the grid's hidden type catcher (type-to-edit). */
+declare const TYPE_CATCHER_ATTR = "data-matrx-type-catcher";
+/**
+ * Invisible and out of the layout, yet focusable (never `display: none` or `visibility:
+ * hidden`, which would make it unfocusable). `fixed` at the viewport's corner so focusing it
+ * never scrolls the page, 1px so a browser still treats it as a real text field for IME.
+ */
+declare const TYPE_CATCHER_STYLE: {
+    readonly position: "fixed";
+    readonly top: 0;
+    readonly left: 0;
+    readonly width: 1;
+    readonly height: 1;
+    readonly padding: 0;
+    readonly border: 0;
+    readonly opacity: 0;
+    readonly overflow: "hidden";
+    readonly resize: "none";
+    readonly pointerEvents: "none";
+};
+/** The hidden textarea the grid's keyboard focus lives in. */
+interface SpreadsheetTypeCatcherProps {
+    ref: (element: HTMLTextAreaElement | null) => void;
+    tabIndex: -1;
+    "aria-label": string;
+    inputMode: "none";
+    autoComplete: "off";
+    autoCorrect: "off";
+    autoCapitalize: "off";
+    spellCheck: false;
+    rows: 1;
+    [TYPE_CATCHER_ATTR]: "";
+    style: typeof TYPE_CATCHER_STYLE;
+    onInput: (event: {
+        currentTarget: {
+            value: string;
+        };
+        nativeEvent?: unknown;
+    }) => void;
+    onCompositionStart: () => void;
+    onCompositionEnd: (event: {
+        data?: string;
+        currentTarget: {
+            value: string;
+        };
+    }) => void;
+}
 declare const NOTHING: CellPatch[];
 /** What a refused write says on a read-only grid when the consumer names nothing better. */
 declare const READ_ONLY_REASON = "This table is view-only \u2014 you can select and copy, but not change cells.";
 declare function useSpreadsheetGrid(options: SpreadsheetGridOptions | null): SpreadsheetGrid;
 
-export { NOTHING as NO_PATCHES, type PasteRefusal, READ_ONLY_REASON, type SpreadsheetCellProps, type SpreadsheetClipboardEvent, type SpreadsheetGrid, type SpreadsheetGridOptions, type SpreadsheetIntent, type SpreadsheetKeyEvent, type SpreadsheetPastePlan, useSpreadsheetGrid };
+export { NOTHING as NO_PATCHES, type PasteRefusal, READ_ONLY_REASON, type SpreadsheetCellProps, type SpreadsheetClipboardEvent, type SpreadsheetGrid, type SpreadsheetGridOptions, type SpreadsheetIntent, type SpreadsheetKeyEvent, type SpreadsheetPastePlan, type SpreadsheetTypeCatcherProps, TYPE_CATCHER_ATTR, useSpreadsheetGrid };

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

@@ -168,8 +168,15 @@ interface SpreadsheetGrid {
     bounds: RangeBounds | null;
     /** True when this hook is doing anything at all. */
     enabled: boolean;
+    /** Props for the hidden textarea the grid's focus lives in (type-to-edit). */
+    typeCatcherProps: SpreadsheetTypeCatcherProps;
     /** Props for the scroll container that owns the keyboard and the clipboard. */
     containerProps: {
+        /** Focus landing on the container itself (Tab into the grid) moves on to the type catcher. */
+        onFocus: (event: {
+            target: unknown;
+            currentTarget: unknown;
+        }) => void;
         tabIndex: number;
         onKeyDown: (event: SpreadsheetKeyEvent) => void;
         onCopy: (event: SpreadsheetClipboardEvent) => void;
@@ -212,9 +219,56 @@ interface SpreadsheetClipboardEvent {
     target: EventTarget | null;
     preventDefault: () => void;
 }
+/** Marks the grid's hidden type catcher (type-to-edit). */
+declare const TYPE_CATCHER_ATTR = "data-matrx-type-catcher";
+/**
+ * Invisible and out of the layout, yet focusable (never `display: none` or `visibility:
+ * hidden`, which would make it unfocusable). `fixed` at the viewport's corner so focusing it
+ * never scrolls the page, 1px so a browser still treats it as a real text field for IME.
+ */
+declare const TYPE_CATCHER_STYLE: {
+    readonly position: "fixed";
+    readonly top: 0;
+    readonly left: 0;
+    readonly width: 1;
+    readonly height: 1;
+    readonly padding: 0;
+    readonly border: 0;
+    readonly opacity: 0;
+    readonly overflow: "hidden";
+    readonly resize: "none";
+    readonly pointerEvents: "none";
+};
+/** The hidden textarea the grid's keyboard focus lives in. */
+interface SpreadsheetTypeCatcherProps {
+    ref: (element: HTMLTextAreaElement | null) => void;
+    tabIndex: -1;
+    "aria-label": string;
+    inputMode: "none";
+    autoComplete: "off";
+    autoCorrect: "off";
+    autoCapitalize: "off";
+    spellCheck: false;
+    rows: 1;
+    [TYPE_CATCHER_ATTR]: "";
+    style: typeof TYPE_CATCHER_STYLE;
+    onInput: (event: {
+        currentTarget: {
+            value: string;
+        };
+        nativeEvent?: unknown;
+    }) => void;
+    onCompositionStart: () => void;
+    onCompositionEnd: (event: {
+        data?: string;
+        currentTarget: {
+            value: string;
+        };
+    }) => void;
+}
 declare const NOTHING: CellPatch[];
 /** What a refused write says on a read-only grid when the consumer names nothing better. */
 declare const READ_ONLY_REASON = "This table is view-only \u2014 you can select and copy, but not change cells.";
 declare function useSpreadsheetGrid(options: SpreadsheetGridOptions | null): SpreadsheetGrid;
 
-export { NOTHING as NO_PATCHES, type PasteRefusal, READ_ONLY_REASON, type SpreadsheetCellProps, type SpreadsheetClipboardEvent, type SpreadsheetGrid, type SpreadsheetGridOptions, type SpreadsheetIntent, type SpreadsheetKeyEvent, type SpreadsheetPastePlan, useSpreadsheetGrid };
+export { NOTHING as NO_PATCHES, type PasteRefusal, READ_ONLY_REASON, type SpreadsheetCellProps, type SpreadsheetClipboardEvent, type SpreadsheetGrid, type SpreadsheetGridOptions, type SpreadsheetIntent, type SpreadsheetKeyEvent, type SpreadsheetPastePlan, type SpreadsheetTypeCatcherProps, TYPE_CATCHER_ATTR, useSpreadsheetGrid };

package/dist/data-table/spreadsheet.js

@@ -608,8 +608,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;
@@ -630,6 +645,8 @@ function useSpreadsheetGrid(options) {
   const [fillTarget, setFillTarget] = useState(null);
   const [stack, setStack] = useState(() => createUndoStack(options?.undoDepth ?? 100));
   const draggingRef = useRef(null);
+  const catcherRef = useRef(null);
+  const composingRef = useRef(false);
   const optionsRef = useRef(options);
   optionsRef.current = options;
   const rowIds = options?.rowIds ?? [];
@@ -1008,7 +1025,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 }
@@ -1079,11 +1098,58 @@ function useSpreadsheetGrid(options) {
     window.addEventListener("mouseup", commit);
     return () => window.removeEventListener("mouseup", commit);
   }, [options, fillRequestBase, applyPatches, announceSkips, screenPatches, refuseWrite]);
+  const takeTypedText = 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,
@@ -1102,6 +1168,7 @@ function useSpreadsheetGrid(options) {
 export {
   NOTHING as NO_PATCHES,
   READ_ONLY_REASON,
+  TYPE_CATCHER_ATTR,
   useSpreadsheetGrid
 };
 //# sourceMappingURL=spreadsheet.js.map