@alphakits/ui 2.0.13 → 2.2.0

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

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

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

@@ -2,4 +2,3 @@ import { BaseSelect as r } from "./component.js";
 export {
   r as BaseSelect
 };
-//# sourceMappingURL=index.js.map

package/dist/select/components/base-select/index.module.css.js

@@ -14,4 +14,3 @@ export {
   t as optionsList,
   n as popoverInner
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/select/components/checkmark/component.d.ts

@@ -1,2 +1,3 @@
+import { default as React } from 'react';
 import { CheckmarkProps } from '../../typings';
-export declare const Checkmark: ({ selected }: CheckmarkProps) => JSX.Element;
+export declare const Checkmark: ({ selected }: CheckmarkProps) => React.JSX.Element;

package/dist/select/components/checkmark/component.js

@@ -12,4 +12,3 @@ const a = ({ selected: r }) => /* @__PURE__ */ e(
 export {
   a as Checkmark
 };
-//# sourceMappingURL=component.js.map

package/dist/select/components/checkmark/index.js

@@ -2,4 +2,3 @@ import { Checkmark as k } from "./component.js";
 export {
   k as Checkmark
 };
-//# sourceMappingURL=index.js.map

package/dist/select/components/checkmark/index.module.css.js

@@ -8,4 +8,3 @@ export {
   s as default,
   c as selected
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/select/components/field/component.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { FormControlProps } from '../../../form-control';
 import { SelectFieldProps as BaseFieldProps } from '../../typings';
-export declare const SelectField: ({ size, open, multiple, error, hint, disabled, label, placeholder, selectedMultiple, selected, rightAddons, valueRenderer, Arrow, innerProps, dataTestId, fieldClassName, ...restProps }: BaseFieldProps & FormControlProps) => JSX.Element;
+export declare const SelectField: ({ size, open, multiple, error, hint, disabled, label, placeholder, selectedMultiple, selected, rightAddons, valueRenderer, Arrow, innerProps, dataTestId, fieldClassName, ...restProps }: BaseFieldProps & FormControlProps) => React.JSX.Element;

package/dist/select/components/field/component.js

@@ -66,4 +66,3 @@ const P = ({
 export {
   P as SelectField
 };
-//# sourceMappingURL=component.js.map

package/dist/select/components/field/index.js

@@ -2,4 +2,3 @@ import { SelectField as o } from "./component.js";
 export {
   o as SelectField
 };
-//# sourceMappingURL=index.js.map

package/dist/select/components/field/index.module.css.js

@@ -20,4 +20,3 @@ export {
   s as placeholder,
   l as value
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/select/components/index.js

@@ -14,4 +14,3 @@ export {
   i as SelectField,
   c as VirtualOptionsList
 };
-//# sourceMappingURL=index.js.map