@alphakits/ui 2.0.12 → 2.1.0

package/dist/select/components/base-select/component.js

@@ -1,174 +1,187 @@
-import { jsx as l, jsxs as Xe } from "react/jsx-runtime";
-import Ye, { forwardRef as Ze, useRef as k, useMemo as et, useCallback as R, useEffect as T } from "react";
-import se from "react-merge-refs";
-import oe from "classnames";
-import { useMultipleSelection as ce, useCombobox as j } from "downshift";
-import { ResizeObserver as tt } from "resize-observer";
-import { getDataTestId as $ } from "../../../__internal/utils/getDataTestId.js";
-import { Popover as rt } from "../../../popover/component.js";
-import { processOptions as nt } from "../../utils.js";
-import { NativeSelect as st } from "../native-select/component.js";
+import { jsx as l, jsxs as ot } from "react/jsx-runtime";
+import ct, { forwardRef as it, useRef as I, useMemo as N, useCallback as H, useEffect as U } from "react";
+import ae from "react-merge-refs";
+import le from "classnames";
+import { useMultipleSelection as de, useCombobox as V } from "downshift";
+import { ResizeObserver as at } from "resize-observer";
+import { getDataTestId as _ } from "../../../__internal/utils/getDataTestId.js";
+import { Popover as lt } from "../../../popover/component.js";
+import { processOptions as dt } from "../../utils.js";
+import { NativeSelect as ut } from "../native-select/component.js";
 import P from "./index.module.css.js";
-const pt = Ze(
+const ue = (c) => {
+  var u;
+  return c ? (u = c.key) == null ? void 0 : u.toString() : "";
+}, fe = (c) => {
+  const u = I(c);
+  return u.current = c, u;
+}, xt = it(
   ({
-    dataTestId: v = "",
-    className: ie,
-    fieldClassName: le,
-    filteredOptions: N,
-    popoverOuterClassname: ae,
-    optionsListClassName: de,
-    optionClassName: A,
-    options: g,
-    actionButton: B,
-    autocomplete: y = !1,
-    multiple: u = !1,
-    allowUnselect: H = !1,
-    disabled: a = !1,
-    closeOnSelect: U = !u,
-    circularNavigation: ue = !1,
-    nativeSelect: w = !1,
-    defaultOpen: V = !1,
-    open: M,
-    popoverPosition: fe = "bottom-start",
-    offset: me,
-    withArrow: ge,
-    preventFlip: he = !0,
-    optionsListWidth: _ = "field",
-    name: f,
-    id: pe,
-    required: Ie,
-    selected: S,
-    size: E = "m",
-    optionsSize: q = E,
-    error: ye,
-    hint: we,
-    block: be = !0,
+    dataTestId: c = "",
+    className: u,
+    fieldClassName: pe,
+    filteredOptions: S,
+    popoverOuterClassname: me,
+    optionsListClassName: he,
+    optionClassName: q,
+    options: w,
+    actionButton: z,
+    autocomplete: b = !1,
+    multiple: h = !1,
+    allowUnselect: E = !1,
+    disabled: f = !1,
+    closeOnSelect: G = !h,
+    circularNavigation: ge = !1,
+    nativeSelect: k = !1,
+    defaultOpen: J = !1,
+    open: K,
+    popoverPosition: ye = "bottom-start",
+    offset: Ie,
+    withArrow: we,
+    preventFlip: be = !0,
+    optionsListWidth: Q = "field",
+    name: g,
+    id: ke,
+    required: ve,
+    selected: C,
+    size: L = "m",
+    optionsSize: X = L,
+    error: xe,
+    hint: Pe,
+    block: Ce = !0,
     label: O,
-    placeholder: xe,
-    fieldProps: ke = {},
-    optionsListProps: Re = {},
-    optionProps: z = {},
-    valueRenderer: Pe,
-    onChange: G,
-    onOpen: J,
-    onFocus: K,
-    onBlur: L,
-    onScroll: Ce,
-    Arrow: Q,
-    Field: De = () => null,
-    OptionsList: Te = () => null,
-    Optgroup: ve = () => null,
-    Option: X = () => null,
-    updatePopover: Ne,
-    zIndexPopover: Me,
-    showEmptyOptionsList: Se = !1,
-    visibleOptions: Ee
-  }, Oe) => {
-    const b = k(null), Y = k(null), h = k(null), Z = (e) => {
-      var t;
-      return e ? (t = e.key) == null ? void 0 : t.toString() : "";
-    }, { flatOptions: d, selectedOptions: Ke } = et(
-      () => nt(g || [], S),
-      [g, S]
-    ), ee = {
-      itemToString: Z,
-      onSelectedItemsChange: (e) => {
-        if (G) {
+    placeholder: De,
+    fieldProps: Re = {},
+    optionsListProps: Te = {},
+    optionProps: Y = {},
+    valueRenderer: Me,
+    onChange: Ne,
+    onOpen: Se,
+    onFocus: W,
+    onBlur: F,
+    onScroll: Ee,
+    Arrow: Z,
+    Field: Ke = () => null,
+    OptionsList: Le = () => null,
+    Optgroup: Oe = () => null,
+    Option: ee = () => null,
+    updatePopover: We,
+    zIndexPopover: Fe,
+    showEmptyOptionsList: je = !1,
+    visibleOptions: Ae
+  }, Be) => {
+    var ce, ie;
+    const v = I(null), te = I(null), x = I(null), ne = I(null), y = I(null), D = fe(Ne), R = fe(Se), { flatOptions: i, selectedOptions: re } = N(
+      () => dt(w || [], C),
+      [w, C]
+    ), se = N(() => {
+      const e = /* @__PURE__ */ new Map();
+      return i.forEach((t, r) => {
+        e.set(t.key, r);
+      }), e;
+    }, [i]), $e = N(
+      () => ({
+        itemToString: ue,
+        onSelectedItemsChange: (e) => {
+          var r;
           const { selectedItems: t = [] } = e;
-          G({
+          (r = D.current) == null || r.call(D, {
             selectedMultiple: t,
             selected: t.length ? t[0] : null,
-            name: f
+            name: g
           });
-        }
-      },
-      stateReducer: (e, t) => {
-        const { type: c, changes: r } = t;
-        return !H && c === ce.stateChangeTypes.DropdownKeyDownBackspace ? e : r;
-      }
-    };
-    S !== void 0 && (ee.selectedItems = Ke);
-    const {
-      selectedItems: n,
-      addSelectedItem: Le,
-      setSelectedItems: F,
-      removeSelectedItem: Fe,
-      getDropdownProps: We
-    } = ce(ee), {
-      isOpen: o,
-      getMenuProps: je,
-      getInputProps: $e,
-      getItemProps: te,
-      getComboboxProps: Ae,
-      getLabelProps: Be,
-      highlightedIndex: C,
-      toggleMenu: W,
+        },
+        stateReducer: (e, t) => {
+          const { type: r, changes: n } = t;
+          return !E && r === de.stateChangeTypes.DropdownKeyDownBackspace ? e : n;
+        },
+        ...C !== void 0 ? { selectedItems: re } : {}
+      }),
+      [E, g, C, re, D]
+    ), {
+      selectedItems: o,
+      addSelectedItem: He,
+      setSelectedItems: j,
+      removeSelectedItem: Ue,
+      getDropdownProps: Ve
+    } = de($e), A = N(
+      () => new Set(o.map((e) => e.key)),
+      [o]
+    ), {
+      isOpen: a,
+      getMenuProps: _e,
+      getInputProps: qe,
+      getItemProps: oe,
+      getComboboxProps: ze,
+      getLabelProps: Ge,
+      highlightedIndex: T,
+      toggleMenu: B,
       openMenu: p
-    } = j({
-      id: pe,
-      isOpen: M,
-      circularNavigation: ue,
-      items: d,
-      itemToString: Z,
-      defaultHighlightedIndex: n.length === 0 ? -1 : void 0,
+    } = V({
+      id: ke,
+      isOpen: K,
+      circularNavigation: ge,
+      items: i,
+      itemToString: ue,
+      defaultHighlightedIndex: o.length === 0 ? -1 : void 0,
       onIsOpenChange: (e) => {
-        J && setTimeout(() => {
-          J({ open: e.isOpen, name: f });
+        R.current && setTimeout(() => {
+          var t;
+          (t = R.current) == null || t.call(R, { open: e.isOpen, name: g });
         }, 0);
       },
       stateReducer: (e, t) => {
-        const { type: c, changes: r } = t, { selectedItem: i } = r;
-        switch (c) {
-          case j.stateChangeTypes.InputKeyDownEnter:
-          case j.stateChangeTypes.ItemClick:
-            if (i && !i.disabled) {
-              const D = n.includes(i), s = H || u && n.length > 1;
-              D && s && Fe(i), D || (u ? Le(i) : F([i]));
+        const { type: r, changes: n } = t, { selectedItem: d } = n;
+        switch (r) {
+          case V.stateChangeTypes.InputKeyDownEnter:
+          case V.stateChangeTypes.ItemClick:
+            if (d && !d.disabled) {
+              const M = A.has(d.key), s = E || h && o.length > 1;
+              M && s && Ue(d), M || (h ? He(d) : j([d]));
             }
             return {
-              ...r,
-              isOpen: !U,
-              highlightedIndex: e.isOpen && !U ? e.highlightedIndex : r.highlightedIndex
+              ...n,
+              isOpen: !G,
+              highlightedIndex: e.isOpen && !G ? e.highlightedIndex : n.highlightedIndex
             };
           default:
-            return r;
+            return n;
         }
       }
-    }), He = je(
-      { ref: h },
+    }), Je = _e(
+      { ref: x },
       { suppressRefError: !0 }
-    ), m = $e(We({ ref: se([Oe, Y]) })), Ue = (e) => {
-      K == null || K(e), y && !o && p();
-    }, Ve = (e) => {
-      var r;
+    ), m = qe(Ve({ ref: ae([Be, te]) })), Qe = (e) => {
+      W == null || W(e), b && !a && p();
+    }, Xe = (e) => {
+      var n;
       const t = e.relatedTarget || document.activeElement;
-      !!(t && ((r = h.current) != null && r.contains(t))) || (L == null || L(e), m.onBlur(e));
-    }, _e = (e) => {
-      m.onKeyDown(e), y && !o && e.key.length === 1 && p(), [" ", "Enter"].includes(e.key) && !y && !w && e.target.tagName !== "INPUT" && (e.preventDefault(), (!o || C === -1) && W());
-    }, qe = (e) => {
-      h.current && h.current.contains(e.target) || (!y || e.target.tagName !== "INPUT" ? W() : p());
-    }, re = R(
+      !!(t && ((n = x.current) != null && n.contains(t))) || (F == null || F(e), m.onBlur(e));
+    }, Ye = (e) => {
+      m.onKeyDown(e), b && !a && e.key.length === 1 && p(), [" ", "Enter"].includes(e.key) && !b && !k && e.target.tagName !== "INPUT" && (e.preventDefault(), (!a || T === -1) && B());
+    }, Ze = (e) => {
+      var t;
+      (t = x.current) != null && t.contains(e.target) || (!b || e.target.tagName !== "INPUT" ? B() : p());
+    }, et = H(
       (e) => {
-        F(
-          [...e == null ? void 0 : e.target.options].reduce(
-            (t, c, r) => c.selected ? t.concat(d[r]) : t,
+        j(
+          Array.from(e.target.options).reduce(
+            (t, r, n) => r.selected ? t.concat(i[n]) : t,
             []
           )
         );
       },
-      [d, F]
-    ), ze = R(
-      ({ option: e, index: t, ...c }) => {
+      [i, j]
+    ), tt = H(
+      ({ option: e, index: t, ...r }) => {
         if (!e) return null;
-        const r = d.findIndex((s) => s.key === (e == null ? void 0 : e.key)), i = r === -1 ? null : d[r];
-        if (!i) return null;
-        const D = te({
-          item: i,
-          index: r,
+        const n = se.get(e.key);
+        if (n === void 0) return null;
+        const d = i[n], M = oe({
+          item: d,
+          index: n,
           disabled: e.disabled,
-          // десктоп
           onMouseDown: (s) => s.preventDefault(),
-          // мобилки: не даём событию «пробить» до поля и повторно открыть меню
           onPointerDown: (s) => {
             s.preventDefault(), s.stopPropagation();
           },
@@ -179,151 +192,141 @@ const pt = Ze(
             s.stopPropagation();
           }
         });
-        return /* @__PURE__ */ l(Ye.Fragment, { children: X({
-          ...z,
-          ...c,
-          className: A,
-          innerProps: D,
+        return /* @__PURE__ */ l(ct.Fragment, { children: ee({
+          ...Y,
+          ...r,
+          className: q,
+          innerProps: M,
           index: t,
           option: e,
-          size: q,
+          size: X,
           disabled: e.disabled,
-          highlighted: r === C,
-          selected: n.includes(e)
+          highlighted: n === T,
+          selected: A.has(e.key)
         }) }, e.key);
       },
       [
-        z,
-        d,
-        A,
-        te,
+        Y,
+        i,
+        se,
         q,
-        C,
-        n,
-        X
+        oe,
+        X,
+        T,
+        A,
+        ee
       ]
     );
-    T(() => {
-      V && p();
-    }, [V, p]), T(() => {
-      M === !0 && p();
-    }, [M]);
-    const ne = k(null), I = k(null), x = R(() => {
-      if (!h.current) return;
-      const e = _ === "field" ? "width" : "minWidth", t = b.current ? Math.round(b.current.getBoundingClientRect().width) : 0;
-      ne.current !== t && (ne.current = t, h.current.style[e] = `${t}px`);
-    }, [_]);
-    T(() => {
-      if (!o) return;
-      const e = new tt(() => {
-        I.current && window.clearTimeout(I.current), I.current = window.setTimeout(() => {
-          x();
-        }, 50);
-      });
-      return b.current && e.observe(b.current), x(), () => {
-        e.disconnect(), I.current && window.clearTimeout(I.current), I.current = null;
+    U(() => {
+      J && p();
+    }, [J, p]), U(() => {
+      K === !0 && p();
+    }, [K, p]);
+    const $ = H(() => {
+      if (!x.current || !v.current) return;
+      const e = Q === "field" ? "width" : "minWidth", t = Math.round(v.current.getBoundingClientRect().width);
+      ne.current !== t && (ne.current = t, x.current.style[e] = `${t}px`);
+    }, [Q]);
+    U(() => {
+      if (!a || !v.current) return;
+      const e = () => {
+        y.current && window.clearTimeout(y.current), y.current = window.setTimeout($, 50);
+      }, t = new at(e);
+      return t.observe(v.current), $(), () => {
+        t.disconnect(), y.current && window.clearTimeout(y.current), y.current = null;
       };
-    }, [o, x]), T(() => {
-      o && x();
-    }, [o, g, n, x]);
-    const Ge = R(
-      () => n.map((e) => /* @__PURE__ */ l("input", { type: "hidden", name: f, value: e.key }, e.key)),
-      [n, f]
-    ), Je = R(() => {
+    }, [a, $, w, o]);
+    const nt = h ? o.map((e) => {
       var t;
-      const e = u ? n.map((c) => {
-        var r;
-        return (r = c.key) == null ? void 0 : r.toString();
-      }) : (t = (n[0] || {}).key) == null ? void 0 : t.toString();
-      return /* @__PURE__ */ l(
-        st,
-        {
-          className: P.nativeSelect,
-          disabled: a,
-          multiple: u,
-          name: f,
-          value: e,
-          onChange: re,
-          options: g
-        }
-      );
-    }, [u, n, a, f, re, g]), Qe = d.length > 0 || Se || !!B;
-    return /* @__PURE__ */ Xe(
+      return (t = e.key) == null ? void 0 : t.toString();
+    }) : (ie = (ce = o[0]) == null ? void 0 : ce.key) == null ? void 0 : ie.toString(), rt = i.length > 0 || je || !!z, st = O ? /* @__PURE__ */ l("span", { ...Ge(), children: ve ? `${O} *` : O }) : void 0;
+    return /* @__PURE__ */ ot(
       "div",
       {
-        ...Ae({
-          ref: b,
-          ...a && { "aria-disabled": !0 },
-          className: oe(P.component, { [P.block]: be }, ie)
+        ...ze({
+          ref: v,
+          ...f && { "aria-disabled": !0 },
+          className: le(P.component, { [P.block]: Ce }, u)
         }),
-        onKeyDown: a ? void 0 : _e,
+        onKeyDown: f ? void 0 : Ye,
         tabIndex: -1,
         id: "slect_wrapper",
-        "data-test-id": $("combobox", v),
+        "data-test-id": _("combobox", c),
         children: [
-          w && Je(),
+          k && /* @__PURE__ */ l(
+            ut,
+            {
+              className: P.nativeSelect,
+              disabled: f,
+              multiple: h,
+              name: g,
+              value: nt,
+              onChange: et,
+              options: w
+            }
+          ),
           /* @__PURE__ */ l(
-            De,
+            Ke,
             {
-              selectedMultiple: n,
-              selected: n[0],
-              multiple: u,
-              open: o,
-              disabled: a,
-              size: E,
-              placeholder: xe,
-              label: O && /* @__PURE__ */ l("span", { ...Be(), children: Ie ? `${O} *` : O }),
-              Arrow: Q && /* @__PURE__ */ l(Q, { open: o }),
-              error: ye,
-              hint: we,
-              valueRenderer: Pe,
-              className: le,
+              selectedMultiple: o,
+              selected: o[0],
+              multiple: h,
+              open: a,
+              disabled: f,
+              size: L,
+              placeholder: De,
+              label: st,
+              Arrow: Z && /* @__PURE__ */ l(Z, { open: a }),
+              error: xe,
+              hint: Pe,
+              valueRenderer: Me,
+              className: pe,
               innerProps: {
-                onBlur: Ve,
-                onFocus: a ? void 0 : Ue,
-                onClick: a ? void 0 : qe,
-                tabIndex: w || a ? -1 : 0,
-                ref: se([m.ref]),
+                onBlur: Xe,
+                onFocus: f ? void 0 : Qe,
+                onClick: f ? void 0 : Ze,
+                tabIndex: k || f ? -1 : 0,
+                ref: ae([m.ref]),
                 id: m.id,
                 "aria-labelledby": m["aria-labelledby"],
                 "aria-controls": m["aria-controls"],
-                "aria-autocomplete": y ? m["aria-autocomplete"] : void 0
+                "aria-autocomplete": b ? m["aria-autocomplete"] : void 0
               },
-              dataTestId: $("field", v),
-              ...ke
+              dataTestId: _("field", c),
+              ...Re
             }
           ),
-          f && !w && Ge(),
-          !w && /* @__PURE__ */ l(
-            rt,
+          g && !k && o.map((e) => /* @__PURE__ */ l("input", { type: "hidden", name: g, value: e.key }, e.key)),
+          !k && /* @__PURE__ */ l(
+            lt,
             {
-              open: o,
+              open: a,
               withTransition: !1,
-              anchorElement: Y.current,
-              position: fe,
-              offset: me,
-              withArrow: ge,
-              preventFlip: he,
-              className: ae,
+              anchorElement: te.current,
+              position: ye,
+              offset: Ie,
+              withArrow: we,
+              preventFlip: be,
+              className: me,
               popperClassName: P.popoverInner,
-              update: Ne,
-              zIndex: Me,
-              children: Qe && /* @__PURE__ */ l("div", { ...He, className: oe(de, P.optionsList), children: /* @__PURE__ */ l(
-                Te,
+              update: We,
+              zIndex: Fe,
+              children: rt && /* @__PURE__ */ l("div", { ...Je, className: le(he, P.optionsList), children: /* @__PURE__ */ l(
+                Le,
                 {
-                  ...Re,
-                  flatOptions: d,
-                  highlightedIndex: C,
-                  open: o,
-                  size: E,
-                  toggleMenu: W,
-                  actionButton: B,
-                  options: N != null ? N : g,
-                  Optgroup: ve,
-                  Option: ze,
-                  visibleOptions: Ee,
-                  onScroll: Ce,
-                  dataTestId: $("options-list", v)
+                  ...Te,
+                  flatOptions: i,
+                  highlightedIndex: T,
+                  open: a,
+                  size: L,
+                  toggleMenu: B,
+                  actionButton: z,
+                  options: S != null ? S : w,
+                  Optgroup: Oe,
+                  Option: tt,
+                  visibleOptions: Ae,
+                  onScroll: Ee,
+                  dataTestId: _("options-list", c)
                 }
               ) })
             }
@@ -334,6 +337,6 @@ const pt = Ze(
   }
 );
 export {
-  pt as BaseSelect
+  xt as BaseSelect
 };
 //# sourceMappingURL=component.js.map