@code0-tech/pictor 0.0.0-mvp.31 → 0.0.0-mvp.33

package/dist/components/form/Input.js

@@ -1,21 +1,21 @@
-import { jsx as f, jsxs as z } from "react/jsx-runtime";
-import i, { useRef as y, useState as K, useMemo as L, useEffect as x } from "react";
-import Qe from "../../_virtual/react-contenteditable.js";
+import { jsxs as W, jsx as g } from "react/jsx-runtime";
+import l, { useRef as C, useState as j, useMemo as D, useEffect as I, useLayoutEffect as _e } from "react";
 import "../../utils/contextStore.js";
-import { mergeCode0Props as le } from "../../utils/utils.js";
+import { mergeCode0Props as me } from "../../utils/utils.js";
 import '../../assets/components/form/Input.style.css';/* empty css                 */
-import { InputLabel as Xe } from "./InputLabel.js";
-import { InputDescription as Ye } from "./InputDescription.js";
-import { InputMessage as Ze } from "./InputMessage.js";
-import { Menu as _e, MenuTrigger as et, MenuPortal as tt } from "../menu/Menu.js";
-import { InputSuggestionMenuContent as nt, InputSuggestionMenuContentItems as rt } from "./InputSuggestion.js";
-import { getSelectionMetrics as ot, setElementKey as st, setSelectionRangeSafe as at } from "./Input.utils.js";
-import { Card as ut } from "../card/Card.js";
-import { useContentEditableController as it } from "./InputContentEditable.hook.js";
-const X = (u) => {
-  const k = u ?? "";
-  return typeof k == "string" ? k : String(k);
-}, $e = (u) => {
+import { InputLabel as et } from "./InputLabel.js";
+import { InputDescription as tt } from "./InputDescription.js";
+import { InputMessage as nt } from "./InputMessage.js";
+import { Menu as rt, MenuTrigger as ot, MenuPortal as st } from "../menu/Menu.js";
+import { InputSuggestionMenuContent as at, InputSuggestionMenuContentItems as ut } from "./InputSuggestion.js";
+import { buildDefaultSyntax as it } from "./Input.syntax.hook.js";
+import { getSelectionMetrics as lt, setElementKey as ct, setSelectionRangeSafe as ft } from "./Input.utils.js";
+import { Card as dt } from "../card/Card.js";
+import { useContentEditableController as pt, setSelectionOffsetsInValue as gt } from "./InputContentEditable.hook.js";
+const q = (u) => {
+  const x = u ?? "";
+  return typeof x == "string" ? x : String(x);
+}, ae = (u) => {
   if (u == null) return "";
   if (typeof u == "string") return u;
   try {
@@ -23,207 +23,220 @@ const X = (u) => {
   } catch {
     return String(u ?? "");
   }
-}, Fe = (u) => {
+}, ht = (u) => {
+  if (u && typeof u == "object") {
+    const {
+      children: x,
+      __contentHtml: Q,
+      ...U
+    } = u;
+    return U;
+  }
+  return {
+    value: u
+  };
+}, Ae = (u) => {
   if (!u) return null;
-  const k = u.value ?? "", Y = u.selectionStart ?? k.length, E = k.slice(0, Y).match(/\S+$/);
-  if (!E || E.index === void 0) return null;
-  const g = E[0], $ = E.index, N = $ + g.length;
+  const x = u.value ?? "", Q = u.selectionStart ?? x.length, T = x.slice(0, Q).match(/\S+$/);
+  if (!T || T.index === void 0) return null;
+  const b = T[0], H = T.index, G = H + b.length;
   return {
-    token: g,
-    start: $,
-    end: N
+    token: b,
+    start: H,
+    end: G
   };
-}, lt = i.forwardRef((u, k) => {
+}, mt = l.forwardRef((u, x) => {
   const {
-    wrapperComponent: Y = {},
-    title: Z,
-    description: E,
-    disabled: g = !1,
-    left: $,
-    right: N,
-    leftType: Be = "icon",
-    rightType: Ae = "action",
-    formValidation: V = {
+    wrapperComponent: Q = {},
+    title: U,
+    description: T,
+    disabled: b = !1,
+    left: H,
+    right: G,
+    leftType: Ne = "icon",
+    rightType: ze = "action",
+    formValidation: P = {
       valid: !0,
       notValidMessage: null,
       setValue: null
     },
-    suggestions: l,
-    suggestionsHeader: ce,
-    suggestionsFooter: fe,
-    onSuggestionSelect: de,
-    disableOnValue: pe = () => !1,
-    transformSyntax: P,
-    validationUsesSyntax: j = !1,
-    filterSuggestionsByLastToken: h = !1,
-    enforceUniqueSuggestions: ge = !1,
-    onLastTokenChange: he,
-    suggestionsEmptyState: me,
-    ...ze
+    suggestions: f,
+    suggestionsHeader: ye,
+    suggestionsFooter: Se,
+    onSuggestionSelect: Ce,
+    disableOnValue: be = () => !1,
+    transformSyntax: X,
+    validationUsesSyntax: ue = !1,
+    filterSuggestionsByLastToken: k = !1,
+    enforceUniqueSuggestions: ke = !1,
+    onLastTokenChange: ve,
+    suggestionsEmptyState: xe,
+    ...We
   } = u, {
-    onFocus: Se,
-    onBlur: _,
-    onKeyDown: q,
-    onKeyDownCapture: ee,
-    onChange: F,
-    onInput: B,
-    ...m
-  } = ze, W = y(null), d = y(null), H = y(null), M = y(null), te = y(null), D = y(!1), Ne = y(0), Ce = y(null), ne = m.value ?? u.initialValue ?? u.defaultValue, [ye, je] = K(!1), R = y(!1), a = i.useCallback((e) => {
-    R.current = e, je(e);
-  }, []), [w, re] = K(ne), [ve, be] = K([]), [ke, oe] = K([]), [we, qe] = K(null), [xe, Ee] = K(null), o = !!P, I = L(() => pe(w), [pe, w]), v = L(() => o ? H : d, [o]);
-  i.useImperativeHandle(k, () => v.current ?? null, [v]);
-  const We = L(() => ({
-    ...m,
-    onChange: F,
-    onInput: B
-  }), [m, F, B]), He = L(() => {
+    onFocus: we,
+    onBlur: Y,
+    onKeyDown: Z,
+    onKeyDownCapture: ie,
+    onChange: R,
+    onInput: O,
+    ...h
+  } = We, _ = C(null), S = C(null), $ = C(null), F = C(null), le = C(null), w = C(!1), ce = C(!1), je = C(0), Ve = C(null), fe = h.value ?? u.initialValue ?? u.defaultValue, [Ee, qe] = j(!1), B = C(!1), i = l.useCallback((e) => {
+    B.current = e, qe(e);
+  }, []), [m, de] = j(fe), [De, Ie] = j([]), [K, pe] = j([]), [Te, Ue] = j(null), [A, He] = j(null), s = !!X, L = D(() => be(m), [be, m]), v = D(() => s ? $ : S, [s]);
+  l.useImperativeHandle(x, () => v.current ?? null);
+  const Je = D(() => ({
+    ...h
+  }), [h]), Qe = D(() => {
     const {
       value: e,
       defaultValue: t,
       ...n
-    } = m;
-    return le("input__control", n);
-  }, [m]), U = i.useCallback(() => {
+    } = h;
+    return me("input__control", n);
+  }, [h]), ee = l.useCallback(() => {
     const e = v.current;
-    !e || g || I || e.focus({
+    !e || b || L || e.focus({
       preventScroll: !0
     });
-  }, [v, g, I]), T = i.useCallback(() => {
-    l && a(!0);
-  }, [l, a]), se = i.useCallback((e) => {
-    h && (qe(e), e && a(!0), he?.(e));
-  }, [h, he, a]), ae = i.useCallback((e, t) => {
-    if (!V?.setValue) return;
-    const n = m.type !== "checkbox" ? X(e) : e, r = j ? t : n;
-    Object.is(Ce.current, r) || (Ce.current = r, V.setValue(r));
-  }, [V?.setValue, m.type, j]), p = it({
-    editorRef: H,
-    transformSyntax: P,
-    filterSuggestionsByLastToken: h,
-    onLastTokenChange: se,
+  }, [v, b, L]), N = l.useCallback(() => {
+    f && i(!0);
+  }, [f, i]), ge = l.useCallback((e) => {
+    k && (Ue(e), e && i(!0), ve?.(e));
+  }, [k, ve, i]), J = l.useCallback((e, t) => {
+    if (!P?.setValue) return;
+    const n = h.type !== "checkbox" ? q(e) : e, o = ue ? t : n;
+    Object.is(Ve.current, o) || (Ve.current = o, P.setValue(o));
+  }, [P?.setValue, h.type, ue]), Pe = l.useCallback((e) => {
+    const t = e.currentTarget, n = h.type === "checkbox" ? t.checked : t.value;
+    de(n), J(n, null);
+  }, [h.type, J]), p = pt({
+    editorRef: $,
+    transformSyntax: X,
+    filterSuggestionsByLastToken: k,
+    onLastTokenChange: ge,
     onStateChange: ({
       value: e,
       tokens: t,
       segments: n
     }) => {
-      re(e), oe(t), Ee(n ?? null), ae(e, n ?? null);
+      de(e), pe(t), He(n ?? null), J(e, n ?? null);
     }
-  }), Ve = y(!1);
-  x(() => {
-    if (!o || !P || Ve.current) return;
-    const e = X(ne);
-    re(e), p.initializeFromExternalValue(e), j && P && Ee(P(e, [])), Ve.current = !0;
-  }, [o, P, ne, j, p]), x(() => {
-    o || m.value !== void 0 && re(m.value);
-  }, [m.value, o]), x(() => {
-    ae(w, xe);
-  }, [ae, xe, w]), x(() => {
-    if (!l) return;
+  }), Le = C(!1);
+  I(() => {
+    if (!s || !X || Le.current) return;
+    const e = q(fe);
+    p.initializeFromExternalValue(e), Le.current = !0;
+  }, [s, X, fe, ue, p]), I(() => {
+    s || h.value !== void 0 && de(h.value);
+  }, [h.value, s]), I(() => {
+    J(m, A);
+  }, [J, A, m]), I(() => {
+    if (!f) return;
     const e = (t) => {
-      const n = t.target, r = !!H.current?.contains(n), s = !!d.current?.contains(n), c = !!te.current?.contains(n), S = !!W.current?.contains(n), C = r || s || c || S;
-      D.current = C, !C && R.current && a(!1);
+      const n = t.target, o = !!$.current?.contains(n), a = !!S.current?.contains(n), r = !!le.current?.contains(n), y = !!_.current?.contains(n), c = o || a || r || y;
+      w.current = c, !c && B.current && i(!1);
     };
     return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
-  }, [l, a]), x(() => {
-    const e = W.current;
+  }, [f, i]), I(() => {
+    const e = _.current;
     if (!e) return;
-    const t = () => T();
+    const t = () => N();
     return e.addEventListener("focusin", t), () => e.removeEventListener("focusin", t);
-  }, [T]);
-  const De = i.useCallback((e, t, n) => {
+  }, [N]);
+  const Me = l.useCallback((e, t, n) => {
     if (e.length === 0) return t <= n.length ? t : null;
-    let r = n.indexOf(e);
-    if (r === -1) return null;
-    let s = r;
-    for (; s !== -1; )
-      Math.abs(s - t) < Math.abs(r - t) && (r = s), s = n.indexOf(e, s + 1);
-    return r;
-  }, []), J = i.useCallback((e, t) => {
+    let o = n.indexOf(e);
+    if (o === -1) return null;
+    let a = o;
+    for (; a !== -1; )
+      Math.abs(a - t) < Math.abs(o - t) && (o = a), a = n.indexOf(e, a + 1);
+    return o;
+  }, []), te = l.useCallback((e, t) => {
     const n = [];
-    return e.forEach((r) => {
-      const s = De(r.text, r.start, t);
-      if (s === null) return;
-      const c = s + r.text.length;
-      t.slice(s, c) === r.text && n.push({
-        ...r,
-        start: s,
-        end: c
+    return e.forEach((o) => {
+      const a = Me(o.text, o.start, t);
+      if (a === null) return;
+      const r = a + o.text.length;
+      t.slice(a, r) === o.text && n.push({
+        ...o,
+        start: a,
+        end: r
       });
     }), n;
-  }, [De]);
-  x(() => {
-    if (o) return;
-    const e = X(d.current?.value ?? w);
-    be((t) => {
-      const n = J(t, e);
-      return oe(n.map((r) => r.suggestion)), n;
+  }, [Me]);
+  I(() => {
+    if (s) return;
+    const e = q(S.current?.value ?? m);
+    Ie((t) => {
+      const n = te(t, e);
+      return pe(n.map((o) => o.suggestion)), n;
     });
-  }, [o, J, w]), x(() => {
-    if (!h || o) return;
-    const e = d.current;
+  }, [s, te, m]), I(() => {
+    if (!k || s) return;
+    const e = S.current;
     if (!e) return;
-    const t = () => se(Fe(e)?.token ?? null);
+    const t = () => ge(Ae(e)?.token ?? null);
     return e.addEventListener("input", t), e.addEventListener("keyup", t), e.addEventListener("mouseup", t), t(), () => {
       e.removeEventListener("input", t), e.removeEventListener("keyup", t), e.removeEventListener("mouseup", t);
     };
-  }, [h, o, se]);
-  const O = L(() => {
-    if (!h || !l) return l;
-    const e = we?.trim();
-    return e?.length ? l.filter((t) => String(t?.value ?? "").toLowerCase().startsWith(e.toLowerCase())) : l;
-  }, [h, we, l]), G = L(() => {
-    if (!ge || !O) return O;
-    if (o) {
-      const t = new Set((ke ?? []).map((n) => $e(n?.value ?? n)));
-      return O.filter((n) => !t.has($e(n?.value ?? n)));
+  }, [k, s, ge]);
+  const z = D(() => {
+    if (!k || !f) return f;
+    const e = Te?.trim();
+    return e?.length ? f.filter((t) => String(t?.value ?? "").toLowerCase().startsWith(e.toLowerCase())) : f;
+  }, [k, Te, f]), ne = D(() => {
+    if (!ke || !z) return z;
+    if (s) {
+      const t = new Set((K ?? []).map((n) => ae(n?.value ?? n)));
+      return z.filter((n) => !t.has(ae(n?.value ?? n)));
     }
-    const e = new Set(ve.map((t) => t.suggestion));
-    return O.filter((t) => !e.has(t));
-  }, [ve, ke, ge, O, o]), Ie = i.useCallback((e) => {
-    if (!d.current) return;
-    const t = typeof w == "object" ? JSON.stringify(e.value) : e.value, n = t == null ? "" : String(t), r = e.insertMode ?? "replace", s = d.current.value ?? "";
-    let c = s, S = null, C = 0;
-    const A = h ? Fe(d.current) : null;
-    if (h && A)
-      c = `${s.slice(0, A.start)}${n}${s.slice(A.end)}`, S = A.start + n.length, C = A.start;
+    const e = new Set(De.map((t) => t.suggestion));
+    return z.filter((t) => !e.has(t));
+  }, [De, K, ke, z, s]), Re = l.useCallback((e) => {
+    if (!S.current) return;
+    const t = typeof m == "object" ? JSON.stringify(e.value) : e.value, n = t == null ? "" : String(t), o = e.insertMode ?? "replace", a = S.current.value ?? "";
+    let r = a, y = null, c = 0;
+    const V = k ? Ae(S.current) : null;
+    if (k && V)
+      r = `${a.slice(0, V.start)}${n}${a.slice(V.end)}`, y = V.start + n.length, c = V.start;
     else
-      switch (r) {
+      switch (o) {
         case "append":
-          c = `${s}${n}`, S = c.length, C = s.length;
+          r = `${a}${n}`, y = r.length, c = a.length;
           break;
         case "prepend":
-          c = `${n}${s}`, S = n.length, C = 0;
+          r = `${n}${a}`, y = n.length, c = 0;
           break;
         case "insert": {
           const {
-            rawStart: b,
-            rawEnd: ie
-          } = ot(d.current);
-          c = `${s.slice(0, b)}${n}${s.slice(ie)}`, S = b + n.length, C = b;
+            rawStart: d,
+            rawEnd: M
+          } = lt(S.current);
+          r = `${a.slice(0, d)}${n}${a.slice(M)}`, y = d + n.length, c = d;
           break;
         }
         case "replace":
         default:
-          c = n, S = n.length, C = 0;
+          r = n, y = n.length, c = 0;
           break;
       }
-    st(d.current, "value", c, "change"), be((b) => {
-      const ie = X(c), Te = J(b, ie), Oe = n.length ? {
-        id: Ne.current++,
+    ct(S.current, "value", r, "change"), Ie((d) => {
+      const M = q(r), oe = te(d, M), E = n.length ? {
+        id: je.current++,
         suggestion: e,
         text: n,
-        start: C,
-        end: C + n.length
-      } : null, Ke = Oe ? [...Te, Oe] : Te;
-      return oe(Ke.map((Ge) => Ge.suggestion)), Ke;
-    }), S !== null && requestAnimationFrame(() => {
-      const b = d.current;
-      b && (b.focus({
+        start: c,
+        end: c + n.length
+      } : null, se = E ? [...oe, E] : oe;
+      return pe(se.map((Ze) => Ze.suggestion)), se;
+    }), y !== null && requestAnimationFrame(() => {
+      const d = S.current;
+      d && (d.focus({
         preventScroll: !0
-      }), at(b, S, S));
+      }), ft(d, y, y));
     });
-  }, [h, J, w]), Le = i.useCallback((e) => {
-    if (o ? p.applySuggestionValueSyntax(e) : Ie(e), de?.(e), o) {
+  }, [k, te, m]), Oe = l.useCallback((e) => {
+    if (s ? p.applySuggestionValueSyntax(e) : Re(e), Ce?.(e), s) {
       const t = v.current;
       requestAnimationFrame(() => {
         if (!t) return;
@@ -234,114 +247,187 @@ const X = (u) => {
         };
         t.dispatchEvent(new Event("input", {
           bubbles: !0
-        })), B?.(n), F?.(n);
+        })), O?.(n), R?.(n);
       });
     }
-    a(!1), D.current = !1, requestAnimationFrame(() => {
-      U();
+    i(!1), w.current = !1, requestAnimationFrame(() => {
+      ee();
     });
-  }, [v, Ie, p, U, o, de, a, F, B]), Pe = i.useCallback((e) => {
-    T(), Se?.(e);
-  }, [T, Se]), Q = i.useCallback((e) => {
-    if (D.current) {
-      _?.(e);
+  }, [v, Re, p, ee, s, Ce, i, R, O]), $e = l.useCallback((e) => {
+    N(), we?.(e);
+  }, [N, we]), re = l.useCallback((e) => {
+    if (ce.current) {
+      ce.current = !1, Y?.(e);
       return;
     }
-    a(!1), _?.(e);
-  }, [_, a]), Me = i.useCallback((e) => {
-    if (o) {
-      p.handleKeyDownCapture(e), ee?.(e);
+    if (w.current) {
+      Y?.(e);
       return;
     }
-    (e.key === " " || e.code === "Space") && (e.stopPropagation(), e.nativeEvent?.stopImmediatePropagation?.()), ee?.(e);
-  }, [p, o, ee]), Re = i.useCallback((e) => {
-    if (l) {
+    i(!1), Y?.(e);
+  }, [Y, i]), Fe = l.useCallback((e) => {
+    if (s) {
+      p.handleKeyDownCapture(e), ie?.(e);
+      return;
+    }
+    (e.key === " " || e.code === "Space") && (e.stopPropagation(), e.nativeEvent?.stopImmediatePropagation?.()), ie?.(e);
+  }, [p, s, ie]), Be = l.useCallback((e) => {
+    if (f) {
       if (e.key === "ArrowDown") {
-        e.preventDefault(), e.stopPropagation(), R.current ? M.current?.highlightNextItem?.() : (a(!0), setTimeout(() => M.current?.focusFirstItem?.(), 0));
+        e.preventDefault(), e.stopPropagation(), B.current ? F.current?.highlightNextItem?.() : (i(!0), setTimeout(() => F.current?.focusFirstItem?.(), 0));
         return;
       }
       if (e.key === "ArrowUp") {
-        e.preventDefault(), e.stopPropagation(), R.current ? M.current?.highlightPreviousItem?.() : (a(!0), setTimeout(() => M.current?.focusLastItem?.(), 0));
+        e.preventDefault(), e.stopPropagation(), B.current ? F.current?.highlightPreviousItem?.() : (i(!0), setTimeout(() => F.current?.focusLastItem?.(), 0));
         return;
       }
-      if (e.key === "Enter" && R.current) {
-        e.preventDefault(), e.stopPropagation(), M.current?.selectActiveItem?.() && a(!1);
+      if (e.key === "Enter" && B.current) {
+        e.preventDefault(), e.stopPropagation(), F.current?.selectActiveItem?.() && i(!1);
         return;
       }
-      if (e.key === "Escape" && R.current) {
-        e.preventDefault(), e.stopPropagation(), a(!1);
+      if (e.key === "Escape" && B.current) {
+        e.preventDefault(), e.stopPropagation(), i(!1);
         return;
       }
     }
-    if (o && p.handleKeyDown(e)) {
-      q?.(e);
+    if (s && p.handleKeyDown(e)) {
+      if (e.key === "Backspace" || e.key === "Delete") {
+        const n = v.current;
+        if (n) {
+          const o = {
+            type: "change",
+            target: n,
+            currentTarget: n
+          };
+          O?.(o), R?.(o);
+        }
+      }
+      Z?.(e);
       return;
     }
-    if (o && e.key === "Enter") {
-      e.preventDefault(), q?.(e);
+    if (s && e.key === "Enter") {
+      e.preventDefault(), Z?.(e);
       return;
     }
-    q?.(e);
-  }, [p, o, l, a, q]), ue = o ? /* @__PURE__ */ f(Qe, { innerRef: H, html: p.editorHtml, ...He, disabled: g || I, onChange: (e) => {
-    p.handleChange(e), F?.(e), B?.(e);
-  }, onPaste: p.handlePaste, onFocus: Pe, onBlur: Q, onKeyDownCapture: Me, onKeyDown: Re, spellCheck: !1, contentEditable: !g && !I }) : /* @__PURE__ */ f("input", { ref: d, ...le("input__control", We), onFocus: Pe, onBlur: Q, onKeyDownCapture: Me, onKeyDown: Re, spellCheck: !1, disabled: g || I }), Ue = i.useCallback((e) => {
-    if (g || I) return;
+    Z?.(e);
+  }, [v, p, s, f, i, R, O, Z]), Ke = D(() => {
+    if (!s) return null;
+    const e = q(m), t = (A ?? []).filter(Boolean).filter((r) => r && (r.type === "text" || r.type === "block") && Number.isFinite(r.start) && Number.isFinite(r.end) && r.start <= r.end), n = t.length ? t : it(e), o = (K ?? []).slice(), a = [];
+    return n.forEach((r, y) => {
+      const c = r.value ?? e.slice(r.start, r.end);
+      if (r.type === "text") {
+        const E = typeof r.content == "string" ? r.content : typeof c == "string" ? c : e.slice(r.start, r.end);
+        E?.length && a.push(E);
+        return;
+      }
+      const V = ae(c);
+      let d;
+      if (o.length) {
+        const E = o[0], se = ae(E?.value ?? E);
+        (V === "" || se === V) && (d = E, o.shift());
+      }
+      d || (d = {
+        value: c
+      });
+      const M = ht(d), oe = r.content && typeof r.content != "string" || typeof r.content == "string" ? r.content : M?.label ?? M?.value ?? "";
+      a.push(/* @__PURE__ */ W(l.Fragment, { children: [
+        "​",
+        /* @__PURE__ */ g("span", { className: "input__token", contentEditable: !1, "aria-data": JSON.stringify(M), style: {
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "middle",
+          userSelect: "text",
+          WebkitUserSelect: "text"
+        }, children: oe }),
+        "​"
+      ] }, `${y}-${V}`));
+    }), a;
+  }, [K, s, A, m]);
+  _e(() => {
+    if (!s) return;
+    const e = $.current;
+    if (!e) return;
+    const t = p.takePendingSelection();
+    t && gt(e, t.start, t.end);
+  }, [p, s, Ke]);
+  const Ge = D(() => {
+    if (!s) return "plain";
+    const e = q(m), t = K?.length ?? 0, n = A?.length ?? 0;
+    return `${e}-${t}-${n}`;
+  }, [K, s, A, m]), he = s ? /* @__PURE__ */ g("div", { ref: $, ...Qe, contentEditable: !b && !L, suppressContentEditableWarning: !0, "aria-disabled": b || L, onInput: (e) => {
+    p.updateEditorState($.current), f && (w.current = !0, ce.current = !0, i(!0), requestAnimationFrame(() => {
+      w.current = !1;
+    }));
+    const t = e.currentTarget, n = {
+      type: "change",
+      target: t,
+      currentTarget: t
+    };
+    O?.(n), R?.(n);
+  }, onChange: (e) => {
+    p.handleChange(e);
+  }, onPaste: p.handlePaste, onFocus: $e, onBlur: re, onKeyDownCapture: Fe, onKeyDown: Be, spellCheck: !1, children: Ke }, Ge) : /* @__PURE__ */ g("input", { ref: S, ...me("input__control", Je), onFocus: $e, onBlur: re, onKeyDownCapture: Fe, onKeyDown: Be, onInput: (e) => {
+    Pe(e), O?.(e);
+  }, onChange: (e) => {
+    Pe(e), R?.(e);
+  }, spellCheck: !1, disabled: b || L }), Xe = l.useCallback((e) => {
+    if (b || L) return;
     const t = e.target;
-    te.current?.contains(t) || (D.current = !0, U(), T());
-  }, [g, I, U, T]);
-  x(() => {
-    const e = W.current;
+    le.current?.contains(t) || (w.current = !0, ee(), N());
+  }, [b, L, ee, N]);
+  I(() => {
+    const e = _.current;
     if (!e) return;
     const t = (n) => {
-      const r = n.relatedTarget;
-      r && e.contains(r) || Q(n);
+      const o = n.relatedTarget;
+      o && e.contains(o) || re(n);
     };
     return e.addEventListener("focusout", t), () => e.removeEventListener("focusout", t);
-  }, [Q]);
-  const Je = L(() => /* @__PURE__ */ z(_e, { open: ye, modal: !1, onOpenChange: (e) => {
-    !e && D.current || a(e);
+  }, [re]);
+  const Ye = D(() => /* @__PURE__ */ W(rt, { open: Ee, modal: !1, onOpenChange: (e) => {
+    !e && w.current || i(e);
   }, children: [
-    /* @__PURE__ */ f(et, { asChild: !0, children: /* @__PURE__ */ f("button", { type: "button", tabIndex: -1, "aria-hidden": !0, style: {
+    /* @__PURE__ */ g(ot, { asChild: !0, children: /* @__PURE__ */ g("button", { type: "button", tabIndex: -1, "aria-hidden": !0, style: {
       position: "absolute",
       inset: 0,
       opacity: 0,
       pointerEvents: "none"
     }, onMouseDown: (e) => e.preventDefault() }) }),
-    ue,
-    /* @__PURE__ */ f(tt, { children: /* @__PURE__ */ f("div", { ref: te, onPointerDownCapture: () => {
-      D.current = !0;
+    he,
+    /* @__PURE__ */ g(st, { children: /* @__PURE__ */ g("div", { ref: le, onPointerDownCapture: () => {
+      w.current = !0;
     }, onMouseDownCapture: (e) => {
-      e.preventDefault(), D.current = !0;
-    }, children: /* @__PURE__ */ z(nt, { color: "secondary", inputRef: v, children: [
-      ce,
-      /* @__PURE__ */ z(ut, { paddingSize: "xxs", mt: -0.35, mx: -0.35, style: {
+      e.preventDefault(), w.current = !0;
+    }, children: /* @__PURE__ */ W(at, { color: "secondary", inputRef: v, children: [
+      ye,
+      /* @__PURE__ */ W(dt, { paddingSize: "xxs", mt: -0.35, mx: -0.35, style: {
         borderWidth: "2px"
       }, children: [
-        G?.length === 0 && me,
-        !!G?.length && /* @__PURE__ */ f(
-          rt,
+        ne?.length === 0 && xe,
+        !!ne?.length && /* @__PURE__ */ g(
+          ut,
           {
-            ref: M,
+            ref: F,
             inputRef: v,
-            suggestions: G,
-            onSuggestionSelect: Le
+            suggestions: ne,
+            onSuggestionSelect: Oe
           }
         )
       ] }),
-      fe
+      Se
     ] }) }) })
-  ] }), [ye, ue, o, G, ce, fe, me, Le, v, a]);
-  return /* @__PURE__ */ z("div", { children: [
-    Z && /* @__PURE__ */ f(Xe, { children: Z }),
-    E && /* @__PURE__ */ f(Ye, { children: E }),
-    /* @__PURE__ */ z("div", { ref: W, ...le(`input ${V?.valid ? "" : "input--not-valid"}`, Y), onPointerDown: Ue, children: [
-      $ && /* @__PURE__ */ f("div", { className: `input__left input__left--${Be}`, children: $ }),
-      l ? Je : ue,
-      N && /* @__PURE__ */ f("div", { className: `input__right input__right--${Ae}`, children: N })
+  ] }), [Ee, he, s, ne, ye, Se, xe, Oe, v, i]);
+  return /* @__PURE__ */ W("div", { children: [
+    U && /* @__PURE__ */ g(et, { children: U }),
+    T && /* @__PURE__ */ g(tt, { children: T }),
+    /* @__PURE__ */ W("div", { ref: _, ...me(`input ${P?.valid ? "" : "input--not-valid"}`, Q), onPointerDown: Xe, children: [
+      H && /* @__PURE__ */ g("div", { className: `input__left input__left--${Ne}`, children: H }),
+      f ? Ye : he,
+      G && /* @__PURE__ */ g("div", { className: `input__right input__right--${ze}`, children: G })
     ] }),
-    !V?.valid && V?.notValidMessage && /* @__PURE__ */ f(Ze, { children: V.notValidMessage })
+    !P?.valid && P?.notValidMessage && /* @__PURE__ */ g(nt, { children: P.notValidMessage })
   ] });
-}), xt = lt;
+}), Lt = mt;
 export {
-  xt as Input
+  Lt as Input
 };