@elytracms/studio 0.0.77 → 0.0.79

package/dist/components/cms/date-input.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Input } from '@elytracms/studio/ui';
+import { dateCommitDecision, dateInputValue, parseDateEntry, storedDateValue, } from './date-input-core.js';
+/**
+ * EC-463 — the studio's ONE `date` control: the document form, the inline table
+ * cell, and the filter/bulk scalar editor all render this, so the correctness
+ * rules below hold everywhere a date is entered.
+ *
+ * It is still a native `<input type="date">` (calendar picker, localized segment
+ * order, native keyboard handling — no bespoke date picker to maintain), wrapped
+ * with the three things the raw element does not give a CMS:
+ *
+ * 1. **A local draft.** The input is driven by its own state, not straight off
+ *    the document. An autosave round-trip, a query invalidation or any other
+ *    re-render arriving mid-entry can no longer rewrite `value` and blow away the
+ *    half-typed segments (live-reproduced: `2026-01-18` snapping back to
+ *    `2026-01-02` when a re-render landed between two keystrokes). External
+ *    updates — locale switch, version restore, an AI draft apply — still land,
+ *    they just wait until the control is not focused.
+ *
+ * 2. **Settle-gated commits.** Chrome fires `change` on every segment
+ *    transition, so typing a year emits the complete dates `0002-…`, `0020-…`,
+ *    `0202-…` before `2026-…`, and clearing a segment emits `""`. Those never
+ *    reach the document now ({@link dateCommitDecision}); blur and Enter commit
+ *    whatever is there, so nothing is unreachable.
+ *
+ * 3. **An insert path that works.** A native date input ignores `insertText`
+ *    entirely, which is why pasting `2026-09-18` does nothing and why every
+ *    documented automation verb (`fill`, `type`, `keyboard inserttext`,
+ *    `find label … fill`) reported success while silently clearing or ignoring
+ *    the field. Chrome still DISPATCHES `beforeinput`/`paste`, so this control
+ *    listens and applies an unambiguous ISO date itself — humans get working
+ *    paste, agent editors get a working `fill`.
+ */
+export function DateInput({ id, value, onChange, disabled = false, className, ariaLabel, testId, autoFocus = false, }) {
+    const incoming = dateInputValue(value);
+    const [draft, setDraft] = useState(incoming);
+    const ref = useRef(null);
+    const focusedRef = useRef(false);
+    // What we last handed to `onChange`, so a re-render carrying our own value
+    // back does not look like an external change (and we never re-emit it).
+    const committedRef = useRef(incoming);
+    const draftRef = useRef(draft);
+    draftRef.current = draft;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    // Accept external updates only while the editor is not mid-entry.
+    useEffect(() => {
+        if (focusedRef.current)
+            return;
+        if (incoming === committedRef.current)
+            return;
+        committedRef.current = incoming;
+        setDraft(incoming);
+    }, [incoming]);
+    function commit(next, reason) {
+        if (!dateCommitDecision({ draft: next, reason }).commit)
+            return;
+        if (next === committedRef.current)
+            return;
+        committedRef.current = next;
+        onChangeRef.current(storedDateValue(next));
+    }
+    // `beforeinput` / `paste` are dispatched on a date input but never applied by
+    // it. Native listeners (not React's synthetic `onBeforeInput`) so the
+    // `preventDefault` and the value write are unambiguous.
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        function apply(text, event) {
+            if (!text)
+                return;
+            const parsed = parseDateEntry(text);
+            if (parsed === null)
+                return;
+            event.preventDefault();
+            const input = ref.current;
+            if (input)
+                input.value = parsed;
+            setDraft(parsed);
+            // A whole value arriving at once is settled by definition.
+            commit(parsed, 'settle');
+        }
+        const onBeforeInput = (event) => apply(event.data, event);
+        const onPaste = (event) => apply(event.clipboardData?.getData('text'), event);
+        el.addEventListener('beforeinput', onBeforeInput);
+        el.addEventListener('paste', onPaste);
+        return () => {
+            el.removeEventListener('beforeinput', onBeforeInput);
+            el.removeEventListener('paste', onPaste);
+        };
+        // `commit` reads only refs, so one subscription lasts the control's life.
+    }, []);
+    return (_jsx(Input, { ref: ref, id: id, type: "date", disabled: disabled, autoFocus: autoFocus, "aria-label": ariaLabel, "data-testid": testId, className: className, value: draft, onFocus: () => {
+            focusedRef.current = true;
+        }, onChange: (event) => {
+            setDraft(event.target.value);
+            commit(event.target.value, 'edit');
+        }, onBlur: () => {
+            focusedRef.current = false;
+            commit(draftRef.current, 'settle');
+        }, onKeyDown: (event) => {
+            if (event.key === 'Enter')
+                commit(draftRef.current, 'settle');
+        } }));
+}
+//# sourceMappingURL=date-input.js.map

package/dist/components/cms/date-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.js","sourceRoot":"","sources":["../../../src/components/cms/date-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Input } from '@elytracms/studio/ui'\nimport {\n  dateCommitDecision,\n  dateInputValue,\n  parseDateEntry,\n  storedDateValue,\n} from './date-input-core'\nimport type { DateCommitReason } from './date-input-core'\n\n/**\n * EC-463 — the studio's ONE `date` control: the document form, the inline table\n * cell, and the filter/bulk scalar editor all render this, so the correctness\n * rules below hold everywhere a date is entered.\n *\n * It is still a native `<input type=\"date\">` (calendar picker, localized segment\n * order, native keyboard handling — no bespoke date picker to maintain), wrapped\n * with the three things the raw element does not give a CMS:\n *\n * 1. **A local draft.** The input is driven by its own state, not straight off\n *    the document. An autosave round-trip, a query invalidation or any other\n *    re-render arriving mid-entry can no longer rewrite `value` and blow away the\n *    half-typed segments (live-reproduced: `2026-01-18` snapping back to\n *    `2026-01-02` when a re-render landed between two keystrokes). External\n *    updates — locale switch, version restore, an AI draft apply — still land,\n *    they just wait until the control is not focused.\n *\n * 2. **Settle-gated commits.** Chrome fires `change` on every segment\n *    transition, so typing a year emits the complete dates `0002-…`, `0020-…`,\n *    `0202-…` before `2026-…`, and clearing a segment emits `\"\"`. Those never\n *    reach the document now ({@link dateCommitDecision}); blur and Enter commit\n *    whatever is there, so nothing is unreachable.\n *\n * 3. **An insert path that works.** A native date input ignores `insertText`\n *    entirely, which is why pasting `2026-09-18` does nothing and why every\n *    documented automation verb (`fill`, `type`, `keyboard inserttext`,\n *    `find label … fill`) reported success while silently clearing or ignoring\n *    the field. Chrome still DISPATCHES `beforeinput`/`paste`, so this control\n *    listens and applies an unambiguous ISO date itself — humans get working\n *    paste, agent editors get a working `fill`.\n */\nexport function DateInput({\n  id,\n  value,\n  onChange,\n  disabled = false,\n  className,\n  ariaLabel,\n  testId,\n  autoFocus = false,\n}: {\n  id?: string\n  /** The stored value (an ISO instant, a date-only string, or absent). */\n  value: unknown\n  /** Called with the storage-shaped value, or `undefined` when cleared. */\n  onChange: (stored: string | undefined) => void\n  disabled?: boolean\n  className?: string\n  ariaLabel?: string\n  testId?: string\n  autoFocus?: boolean\n}) {\n  const incoming = dateInputValue(value)\n  const [draft, setDraft] = useState(incoming)\n  const ref = useRef<HTMLInputElement>(null)\n  const focusedRef = useRef(false)\n  // What we last handed to `onChange`, so a re-render carrying our own value\n  // back does not look like an external change (and we never re-emit it).\n  const committedRef = useRef(incoming)\n  const draftRef = useRef(draft)\n  draftRef.current = draft\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n\n  // Accept external updates only while the editor is not mid-entry.\n  useEffect(() => {\n    if (focusedRef.current) return\n    if (incoming === committedRef.current) return\n    committedRef.current = incoming\n    setDraft(incoming)\n  }, [incoming])\n\n  function commit(next: string, reason: DateCommitReason) {\n    if (!dateCommitDecision({ draft: next, reason }).commit) return\n    if (next === committedRef.current) return\n    committedRef.current = next\n    onChangeRef.current(storedDateValue(next))\n  }\n\n  // `beforeinput` / `paste` are dispatched on a date input but never applied by\n  // it. Native listeners (not React's synthetic `onBeforeInput`) so the\n  // `preventDefault` and the value write are unambiguous.\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    function apply(text: string | null | undefined, event: Event): void {\n      if (!text) return\n      const parsed = parseDateEntry(text)\n      if (parsed === null) return\n      event.preventDefault()\n      const input = ref.current\n      if (input) input.value = parsed\n      setDraft(parsed)\n      // A whole value arriving at once is settled by definition.\n      commit(parsed, 'settle')\n    }\n    const onBeforeInput = (event: Event) => apply((event as InputEvent).data, event)\n    const onPaste = (event: Event) =>\n      apply((event as ClipboardEvent).clipboardData?.getData('text'), event)\n    el.addEventListener('beforeinput', onBeforeInput)\n    el.addEventListener('paste', onPaste)\n    return () => {\n      el.removeEventListener('beforeinput', onBeforeInput)\n      el.removeEventListener('paste', onPaste)\n    }\n    // `commit` reads only refs, so one subscription lasts the control's life.\n  }, [])\n\n  return (\n    <Input\n      ref={ref}\n      id={id}\n      type=\"date\"\n      disabled={disabled}\n      autoFocus={autoFocus}\n      aria-label={ariaLabel}\n      data-testid={testId}\n      className={className}\n      value={draft}\n      onFocus={() => {\n        focusedRef.current = true\n      }}\n      onChange={(event) => {\n        setDraft(event.target.value)\n        commit(event.target.value, 'edit')\n      }}\n      onBlur={() => {\n        focusedRef.current = false\n        commit(draftRef.current, 'settle')\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter') commit(draftRef.current, 'settle')\n      }}\n    />\n  )\n}\n"]}