@smwb/ui-react 2.6.3 → 2.8.0

package/dist/headless/components/inputs/selectField/selectField.js

@@ -1,232 +1,382 @@
-import { jsx as a, jsxs as b, Fragment as Ce } from "react/jsx-runtime";
-import { forwardRef as Ne, useState as D, useRef as S, useMemo as Fe, useEffect as U } from "react";
-import V from "clsx";
-import { useSafeLayoutEffect as Me } from "../../../hooks/useSafeLayoutEffect.js";
-import { useForkRef as Re } from "../../../hooks/useForkRef.js";
-import { DropdownMenu as Ve } from "./dropdownMenu.js";
-import { Chip as Ee } from "../../dataDisplay/chip/chip.js";
-import { Icon as q } from "../../base/icon/icon.js";
-import { TextFieldWrapper as Le } from "../textField/textFieldWrapper.js";
-const ke = (i) => /* @__PURE__ */ a(q, { name: "arrow_drop_down", ...i }), Pe = (i) => /* @__PURE__ */ a(q, { name: "close", size: 20, ...i });
-function $(i) {
-  i.preventDefault(), i.stopPropagation();
+import { jsx as f, jsxs as O, Fragment as gt } from "react/jsx-runtime";
+import { forwardRef as xt, useState as P, useRef as R, useMemo as He, useEffect as z } from "react";
+import Y from "clsx";
+import { useSafeLayoutEffect as Ve } from "../../../hooks/useSafeLayoutEffect.js";
+import { useForkRef as vt } from "../../../hooks/useForkRef.js";
+import { useId as Dt } from "../../../hooks/useId.js";
+import { DropdownMenu as At, dropdownOptionId as St } from "./dropdownMenu.js";
+import { firstOption as Z, lastOption as Be, moveOption as he, matchOption as Ct } from "./optionNavigation.js";
+import { Chip as Rt } from "../../dataDisplay/chip/chip.js";
+import { useHelperText as Nt } from "../../../hooks/useHelperText.js";
+import { Icon as qe } from "../../base/icon/icon.js";
+import { TextFieldWrapper as Et } from "../textField/textFieldWrapper.js";
+const Kt = (n) => /* @__PURE__ */ f(qe, { name: "arrow_drop_down", ...n }), Mt = (n) => /* @__PURE__ */ f(qe, { name: "close", size: 20, ...n });
+function ze(n) {
+  n.preventDefault(), n.stopPropagation();
 }
-const $e = Ne(function(E, G) {
+function we(n, m) {
+  if (Array.isArray(m))
+    return n.filter((_) => m.includes(_.value));
+  if (m == null || m === "")
+    return [];
+  const N = n.find((_) => _.value === m);
+  return N ? [N] : [];
+}
+function Ue(n, m) {
+  if (!m)
+    return n;
+  const N = new RegExp(m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i");
+  return n.filter((_) => _.text.search(N) !== -1);
+}
+function We(n) {
+  return n.key.length === 1 && n.key !== " " && !n.altKey && !n.ctrlKey && !n.metaKey;
+}
+const Ut = xt(function(m, N) {
   const {
-    className: L,
-    value: _,
-    defaultValue: k,
-    onChange: C,
-    disabled: f,
-    readOnly: N,
-    name: J,
-    multiple: P,
-    menuMaxHeight: Q,
-    menuMiddleware: X,
-    menuNoItemsMessage: Y,
-    menuContainer: Z,
-    search: c,
-    chips: ee,
-    isFocused: K,
-    error: O,
-    items: r,
-    label: W,
-    variant: j = "outlined",
-    fullWidth: se,
-    helperText: le,
-    onSearch: v,
-    resetSearch: y,
-    isLoading: te,
-    inline: z,
-    endAdornment: ne,
-    hideSelectArrowIcon: oe,
-    optionRenderer: ae,
-    clearable: re,
-    creatable: ie,
-    onCreate: F,
-    virtualized: ce,
-    itemHeight: ue,
-    "aria-label": de,
-    id: fe,
-    ...me
-  } = E, [o, u] = D(!1), [pe, we] = D(k), [m, p] = D(() => {
-    const e = _ != null ? _ : k;
-    if (Array.isArray(e))
-      return r.filter((t) => e.includes(t.value));
-    const s = e == null ? void 0 : r.find((t) => t.value === e);
-    return s ? [s] : [];
-  }), [n, x] = D(""), { current: he } = S(_ != null), h = S(null), be = Re(G, h), A = S(null), H = S(null), l = he ? _ : pe, g = Fe(() => K || o, [K, o]), _e = (e) => {
+    className: _,
+    value: ye,
+    defaultValue: Ie,
+    onChange: ee,
+    disabled: p,
+    readOnly: w,
+    name: Ge,
+    multiple: v,
+    menuMaxHeight: Je,
+    menuMiddleware: Qe,
+    menuNoItemsMessage: Xe,
+    menuContainer: Ye,
+    search: i,
+    chips: D,
+    isFocused: _e,
+    error: ge,
+    items: u,
+    label: T,
+    variant: xe = "outlined",
+    size: te = "medium",
+    fullWidth: Ze,
+    helperText: ve,
+    onSearch: L,
+    resetSearch: U,
+    isLoading: De,
+    inline: E,
+    endAdornment: et,
+    hideSelectArrowIcon: tt,
+    optionRenderer: st,
+    clearable: ot,
+    creatable: Ae,
+    onCreate: se,
+    virtualized: lt,
+    itemHeight: nt,
+    "aria-label": A,
+    id: rt,
+    ...at
+  } = m, oe = Nt(ve, { inline: E }), [r, $] = P(!1), [ct, it] = P(Ie), [Se, Ce] = P(() => we(u, Ie)), [b, W] = P(""), [Re, K] = P(-1), [le, k] = P(!1), Ne = R({ text: "" }), S = ye !== void 0, Ee = R(null), M = R(null), ut = vt(N, M), q = R(null), Ke = R(null), ne = R(null), Me = R(null), l = S ? ye : ct, g = He(
+    () => S ? we(u, l) : Se,
+    [S, u, l, Se]
+  ), G = He(() => _e || r, [_e, r]), re = Dt(), J = `${re}-label`, Q = `${re}-value`, ae = `${re}-listbox`, j = D ? g.map((e, t) => `${Q}-${t}`) : [Q], ce = D ? j : [], ie = A ? void 0 : T && !E ? [J, ...ce].join(" ") : ce.length > 0 ? ce.join(" ") : !D && g.length > 0 ? Q : void 0, dt = A ? void 0 : T && !E ? [J, ...j].join(" ") : D && j.length > 0 ? j.join(" ") : void 0, X = i === !0 && !w, h = L ? u : Ue(u, b), F = Ae && b && !u.some((e) => e.text.toLowerCase() === String(b).toLowerCase()) ? {
+    text: `Создать "${b}"`,
+    onCreate: (e) => {
+      se == null || se(String(b), e), W(""), y();
+    }
+  } : void 0, Fe = F ? h.length : -1, x = h.length + (F ? 1 : 0), d = (e) => e >= 0 && (e === Fe || !De && e < h.length && !h[e].disabled), a = r && d(Re) ? Re : -1, ue = le && a >= 0 ? St(ae, a) : void 0, Oe = (e) => Array.isArray(l) ? l.includes(e.value) : l != null && l !== "" && l === e.value, Pe = () => {
+    const e = h.findIndex(Oe);
+    return d(e) ? e : Z(x, d);
+  }, Te = () => {
+    const e = h.findIndex(Oe);
+    return d(e) ? e : -1;
+  }, H = (e, t) => {
+    K(e), k(t), $(!0);
+  }, y = () => {
+    var e, t;
+    (e = ne.current) != null && e.contains(ne.current.ownerDocument.activeElement) && ((t = M.current) == null || t.focus()), $(!1), K(-1), k(!1);
+  }, ft = (e) => {
+    var t;
+    e.button === 0 && (e.preventDefault(), (t = M.current) == null || t.focus(), r ? y() : H(Te(), !1));
+  }, mt = (e) => {
+    var t;
+    X && e.target === e.currentTarget && ((t = Ke.current) == null || t.focus());
+  }, de = (e) => {
+    S || Ce(e);
+  }, fe = (e, t) => {
+    ee == null || ee(e, { ...m, value: t, name: Ge || void 0 }), S || it(t);
+  }, Le = (e, t, s) => {
+    let o, c;
+    if (v) {
+      const I = Array.isArray(l) ? l : [l].filter(Boolean);
+      o = I.slice(), c = g.slice();
+      const C = I.findIndex((_t) => _t === t.value);
+      C === -1 ? (o.push(t.value), c.push(t)) : (o.splice(C, 1), c.splice(C, 1));
+    } else {
+      if (l === t.value && !s)
+        return;
+      o = l === t.value ? "" : t.value, c = [t];
+    }
+    b && W(""), de(c), fe(e, o);
+  }, pt = (e, t) => {
     var s;
-    e.button === 0 && (e.preventDefault(), (s = h.current) == null || s.focus(), u(!o));
-  }, ve = () => {
-    var e;
-    u(!1), (e = h.current) == null || e.focus();
-  }, ye = () => {
-    var e;
-    c === !0 && ((e = H.current) == null || e.focus());
-  }, xe = (e) => {
-    N || [" ", "ArrowUp", "ArrowDown", "Enter"].includes(e.key) && (e.preventDefault(), u(!o));
+    Le(e, t, !0), v ? K(u.indexOf(t)) : (y(), (s = M.current) == null || s.focus());
+  }, me = (e) => {
+    le && (a === Fe ? F == null || F.onCreate(e) : a >= 0 && (Le(e, h[a], !1), v ? K(b ? u.indexOf(h[a]) : a) : y()));
+  }, V = (e, t) => {
+    e.preventDefault(), t >= 0 && K(t), k(!0);
+  }, $e = (e) => {
+    const t = Ne.current;
+    clearTimeout(t.timer), t.text += e, t.timer = setTimeout(() => {
+      t.text = "";
+    }, 500);
+    const s = h.map((o) => o.text);
+    return Ct(s, d, t.text, a);
   };
-  U(() => {
-    (!g || c === "menu" && !o) && (x(""), y == null || y());
-  }, [g, c, o, y]), U(() => {
-    if (Array.isArray(l))
-      p(r.filter((e) => l.includes(e.value)));
-    else if (l == null || l === "")
-      p([]);
-    else {
-      const e = r.find((s) => s.value === l);
-      p(e ? [e] : []);
+  z(() => {
+    const e = Ne.current;
+    return () => clearTimeout(e.timer);
+  }, []);
+  const pe = (e, t) => {
+    const { key: s } = e;
+    if (p || w || e.ctrlKey || e.metaKey)
+      return;
+    const o = t === "control";
+    if (!r) {
+      if (s === "ArrowDown" || s === "ArrowUp" || s === "Enter" || o && s === " ")
+        e.preventDefault(), H(Pe(), !0);
+      else if (o && (s === "Home" || s === "End"))
+        e.preventDefault(), H(
+          s === "Home" ? Z(x, d) : Be(x, d),
+          !0
+        );
+      else if (o && !i && We(e)) {
+        e.preventDefault();
+        const c = $e(s);
+        H(c >= 0 ? c : Pe(), !0);
+      }
+      return;
+    }
+    if (s === "ArrowDown")
+      V(e, e.altKey ? a : he(x, d, a, 1));
+    else if (s === "ArrowUp" && e.altKey)
+      e.preventDefault(), v || me(e), y();
+    else if (s === "ArrowUp")
+      V(e, he(x, d, a, -1));
+    else if (s === "PageDown" || s === "PageUp")
+      V(e, he(x, d, a, s === "PageDown" ? 10 : -10));
+    else if (o && (s === "Home" || s === "End"))
+      V(
+        e,
+        s === "Home" ? Z(x, d) : Be(x, d)
+      );
+    else if (s === "Enter" || o && s === " ")
+      e.preventDefault(), me(e), k(!0), !v && a < 0 && o && y();
+    else if (s === "Escape")
+      e.preventDefault(), y();
+    else if (s === "Tab")
+      t === "menuSearch" ? e.preventDefault() : o && !v && me(e), y();
+    else if (o && !i && We(e)) {
+      const c = $e(s);
+      V(e, c);
     }
-  }, [l, r]), Me(() => {
-    A.current && (A.current.scrollLeft = A.current.scrollWidth);
+  }, bt = (e) => {
+    e.target !== e.currentTarget || X || pe(e, "control");
+  };
+  z(() => {
+    w && r && $(!1);
+  }, [w, r]), z(() => {
+    (!G || i === "menu" && !r) && (W(""), U == null || U());
+  }, [G, i, r, U]), z(() => {
+    p && r && $(!1);
+  }, [p, r]), Ve(() => {
+    var e;
+    r && i === "menu" && ((e = Me.current) == null || e.focus());
+  }, [r, i]), z(() => {
+    S || Ce(we(u, l));
+  }, [S, l, u]), Ve(() => {
+    q.current && (q.current.scrollLeft = q.current.scrollWidth);
   }, [l]);
-  const M = (e, s) => {
-    C == null || C(e, { ...E, value: s, name: J || void 0 }), we(s);
-  }, Ae = (e, s) => {
-    var w;
-    let t, d;
-    if (P) {
-      const B = Array.isArray(l) ? l : [l].filter(Boolean);
-      t = B.slice(), d = m.slice();
-      const R = B.findIndex((Se) => Se === s.value);
-      R === -1 ? (t.push(s.value), d.push(s)) : (t.splice(R, 1), d.splice(R, 1));
-    } else
-      t = l === s.value ? "" : s.value, d = [s];
-    n && x(""), P || (u(!1), (w = h.current) == null || w.focus()), p(d), M(e, t);
-  }, T = (e) => {
-    x(e.target.value), v == null || v(e), o || u(!0);
-  }, ge = (e) => (s) => {
+  const ke = (e) => {
+    const t = e.target.value;
+    W(t), L == null || L(e);
+    const s = Ue(u, t), o = Ae && t && !u.some((I) => I.text.toLowerCase() === t.toLowerCase()), c = L ? 0 : s.length + (o ? 1 : 0);
+    K(Z(c, (I) => I >= s.length || !s[I].disabled)), k(!0), r || $(!0);
+  }, je = (e) => e.currentTarget.contains(e.currentTarget.ownerDocument.activeElement), ht = (e) => (t) => {
+    var s;
     if (Array.isArray(l)) {
-      const t = l.filter((w) => e !== w);
-      M(s, t);
-      const d = m.filter((w) => w.value !== e);
-      p(d);
+      const o = je(t), c = l.filter((C) => e !== C);
+      fe(t, c);
+      const I = g.filter((C) => C.value !== e);
+      de(I), o && ((s = M.current) == null || s.focus());
     }
-  }, Ie = (e) => {
-    M(e, []), p([]);
+  }, wt = (e) => {
+    var s;
+    const t = je(e);
+    fe(e, []), de([]), t && ((s = M.current) == null || s.focus());
   };
-  let I;
-  const De = V("smwb-select-field", L, {
-    "smwb-select-field--filled": j === "filled" && W,
-    "smwb-select-field--disabled": f,
-    "smwb-select-field--search": c,
-    "smwb-select-field--inline": z
+  let B;
+  const yt = Y("smwb-select-field", _, {
+    "smwb-select-field--filled": xe === "filled" && T,
+    "smwb-select-field--disabled": p,
+    "smwb-select-field--search": i,
+    "smwb-select-field--inline": E
   });
-  return ee ? I = m.map(({ key: e, value: s, text: t }) => /* @__PURE__ */ a(Ee, { label: t, onDelete: ge(s), onDeleteMouseDown: $ }, e || s)) : I = m.map((e) => e.text).join(", "), /* @__PURE__ */ b(Ce, { children: [
-    /* @__PURE__ */ a(
-      Le,
+  D ? B = g.map(({ key: e, value: t, text: s }, o) => /* @__PURE__ */ f(
+    Rt,
+    {
+      label: s,
+      labelId: j[o],
+      deleteAriaLabel: `Remove ${s}`,
+      size: te === "small" ? "small" : "medium",
+      onDelete: w ? void 0 : ht(t),
+      onDeleteMouseDown: ze,
+      disabled: p
+    },
+    e || t
+  )) : B = g.map((e) => e.text).join(", ");
+  const It = (Array.isArray(l) && l.length > 0 || ot && g.length > 0) && !p && !w, be = {
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": r,
+    "aria-controls": r ? ae : void 0
+  };
+  return /* @__PURE__ */ O(gt, { children: [
+    /* @__PURE__ */ f(
+      Et,
       {
-        label: W,
-        helperText: le,
-        variant: j,
-        disabled: f,
-        className: L,
-        error: O,
-        fullWidth: se,
-        isFilledState: !!m.length || !!n,
-        isFocused: g,
-        inline: z,
-        ...me,
-        children: /* @__PURE__ */ b(
-          "span",
-          {
-            ref: be,
-            id: fe,
-            className: De,
-            tabIndex: f ? void 0 : 0,
-            role: "button",
-            "aria-haspopup": "listbox",
-            "aria-expanded": o,
-            "aria-disabled": f || void 0,
-            "aria-label": de,
-            onMouseDown: f || N ? void 0 : _e,
-            onFocus: ye,
-            onKeyDown: xe,
-            "data-testid": "select-field",
-            children: [
-              /* @__PURE__ */ b("span", { className: "smwb-select-field__search-wrapper", ref: A, children: [
-                I && /* @__PURE__ */ a("span", { className: "smwb-select-field__values", children: I }),
-                c && typeof c == "boolean" && !N && /* @__PURE__ */ b("span", { className: "smwb-select-field__search", children: [
-                  /* @__PURE__ */ a("span", { className: "smwb-select-field__search-text", children: n }),
-                  /* @__PURE__ */ a(
-                    "input",
-                    {
-                      className: "smwb-select-field__search-input",
-                      ref: H,
-                      type: "text",
-                      value: n,
-                      onChange: T,
-                      onMouseDown: (e) => {
-                        e.stopPropagation(), u(!0);
-                      },
-                      onKeyDown: (e) => {
-                        e.stopPropagation();
-                      },
-                      "data-testid": "search-input"
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ b("span", { className: "smwb-select-field__actions", children: [
-                (Array.isArray(l) && l.length > 0 || re && m.length > 0) && !f && /* @__PURE__ */ a(
-                  Pe,
-                  {
-                    onClick: Ie,
-                    onMouseDown: $,
-                    className: V("smwb-select-field__icon", "smwb-select-field__icon--close"),
-                    "aria-label": "Clear selection",
-                    role: "button"
-                  }
-                ),
-                ne,
-                !oe && /* @__PURE__ */ a(
-                  ke,
-                  {
-                    className: V("smwb-select-field__icon", "smwb-select-field__icon--arrow", {
-                      "smwb-select-field__icon--opened": o,
-                      "smwb-select-field__icon--focused": g,
-                      "smwb-select-field__icon--error": O
-                    })
-                  }
-                )
-              ] })
-            ]
-          }
-        )
+        labelId: J,
+        label: T,
+        helperText: ve,
+        helperTextId: oe.id,
+        variant: xe,
+        disabled: p,
+        className: Y(_, te !== "medium" && `smwb-text-field_size-${te}`),
+        error: ge,
+        fullWidth: Ze,
+        isFilledState: !!g.length || !!b,
+        isFocused: G,
+        inline: E,
+        ...at,
+        children: /* @__PURE__ */ O("span", { ref: Ee, className: yt, onMouseDown: p || w ? void 0 : ft, children: [
+          /* @__PURE__ */ O("span", { className: "smwb-select-field__search-wrapper", ref: q, children: [
+            D && /* @__PURE__ */ f("span", { className: "smwb-select-field__values", children: B }),
+            /* @__PURE__ */ O(
+              "span",
+              {
+                ref: ut,
+                id: rt,
+                className: "smwb-select-field__control",
+                tabIndex: p ? void 0 : X ? -1 : 0,
+                ...X ? void 0 : {
+                  ...be,
+                  "aria-labelledby": ie,
+                  "aria-label": A,
+                  "aria-activedescendant": i === "menu" ? void 0 : ue,
+                  "aria-disabled": p || void 0,
+                  "aria-readonly": w || void 0,
+                  "aria-describedby": oe.describedBy
+                },
+                onFocus: mt,
+                onKeyDown: bt,
+                "data-testid": "select-field",
+                children: [
+                  !D && B && /* @__PURE__ */ f("span", { id: Q, className: "smwb-select-field__values", children: B }),
+                  i && typeof i == "boolean" && !w && /* @__PURE__ */ O("span", { className: "smwb-select-field__search", children: [
+                    /* @__PURE__ */ f("span", { className: "smwb-select-field__search-text", children: b }),
+                    /* @__PURE__ */ f(
+                      "input",
+                      {
+                        className: "smwb-select-field__search-input",
+                        ref: Ke,
+                        type: "text",
+                        disabled: p,
+                        value: b,
+                        ...be,
+                        "aria-autocomplete": "list",
+                        "aria-activedescendant": ue,
+                        autoComplete: "off",
+                        "aria-label": A,
+                        "aria-labelledby": dt,
+                        "aria-describedby": oe.describedBy,
+                        onChange: ke,
+                        onMouseDown: (e) => {
+                          e.stopPropagation(), r || H(Te(), !1);
+                        },
+                        onKeyDown: (e) => {
+                          pe(e, "search"), e.key !== "Escape" && e.stopPropagation();
+                        },
+                        "data-testid": "search-input"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ O("span", { className: "smwb-select-field__actions", children: [
+            It && /* @__PURE__ */ f(
+              "button",
+              {
+                type: "button",
+                className: "smwb-select-field__clear",
+                "aria-label": "Clear selection",
+                onClick: wt,
+                onMouseDown: ze,
+                children: /* @__PURE__ */ f(Mt, { className: Y("smwb-select-field__icon", "smwb-select-field__icon--close") })
+              }
+            ),
+            et,
+            !tt && /* @__PURE__ */ f(
+              Kt,
+              {
+                className: Y("smwb-select-field__icon", "smwb-select-field__icon--arrow", {
+                  "smwb-select-field__icon--opened": r,
+                  "smwb-select-field__icon--focused": G,
+                  "smwb-select-field__icon--error": ge
+                })
+              }
+            )
+          ] })
+        ] })
       }
     ),
-    /* @__PURE__ */ a(
-      Ve,
+    /* @__PURE__ */ f(
+      At,
       {
-        anchorElementRef: h,
-        menuMaxHeight: Q,
-        menuMiddleware: X,
-        search: c === "menu",
-        onSearchInputChange: T,
-        optionRenderer: ae,
-        items: v ? r : n ? r.filter((e) => e.text.search(new RegExp(n, "i")) !== -1) : r,
-        searchValue: n,
-        isOpen: o,
-        onClose: ve,
-        onItemClick: Ae,
+        anchorElementRef: Ee,
+        menuRef: ne,
+        menuMaxHeight: Je,
+        menuMiddleware: Qe,
+        search: i === "menu",
+        onSearchInputChange: ke,
+        searchInputRef: Me,
+        searchInputProps: {
+          ...be,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": ue,
+          "aria-labelledby": ie,
+          "aria-label": A,
+          onKeyDown: (e) => pe(e, "menuSearch")
+        },
+        optionRenderer: st,
+        items: h,
+        searchValue: b,
+        isOpen: r,
+        onClose: y,
+        onItemClick: pt,
         value: l,
-        isLoading: te,
-        menuNoItemsMessage: Y,
-        container: Z,
-        virtualized: ce,
-        itemHeight: ue,
-        createOption: ie && n && !r.some((e) => e.text.toLowerCase() === String(n).toLowerCase()) ? {
-          text: `Создать "${n}"`,
-          onCreate: (e) => {
-            F == null || F(String(n), e), x(""), u(!1);
-          }
-        } : void 0
+        isLoading: De,
+        menuNoItemsMessage: Xe,
+        container: Ye,
+        virtualized: lt,
+        itemHeight: nt,
+        createOption: F,
+        listboxId: ae,
+        labelledBy: A ? void 0 : T && !E ? J : ie,
+        label: A,
+        multiple: v,
+        activeIndex: a,
+        showActive: le
       }
     )
   ] });
 });
 export {
-  $e as SelectField
+  Ut as SelectField
 };
 //# sourceMappingURL=selectField.js.map