@alphakits/ui 2.3.1 → 2.4.1

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

@@ -1,35 +1,35 @@
 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 re from "classnames";
+import { useMultipleSelection as se, useCombobox as L } from "downshift";
+import st, { forwardRef as ot, useRef as y, useMemo as T, useCallback as W, useEffect as j } from "react";
+import oe from "react-merge-refs";
 import { ResizeObserver as ct } from "resize-observer";
-import { getDataTestId as A } from "../../../__internal/utils/getDataTestId.js";
+import { getDataTestId as A } from "../../../__internal/utils/get-data-test-id.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;
+import v from "./index.module.css.js";
+const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
+  const x = y(o);
+  return x.current = o, x;
 }, kt = ot(
   ({
-    dataTestId: c = "",
-    className: R,
+    dataTestId: o = "",
+    className: x,
     fieldClassName: le,
     filteredOptions: ae,
     popoverOuterClassname: de,
     optionsListClassName: ue,
     optionClassName: $,
-    options: I,
+    options: R,
     actionButton: H,
-    autocomplete: w = !1,
+    autocomplete: I = !1,
     multiple: m = !1,
     allowUnselect: M = !1,
     disabled: u = !1,
     closeOnSelect: U = !m,
     circularNavigation: fe = !1,
-    nativeSelect: b = !1,
+    nativeSelect: w = !1,
     defaultOpen: V = !1,
     open: N,
     popoverPosition: pe = "bottom-start",
@@ -67,15 +67,15 @@ const ce = (c) => c ? c.key?.toString() : "", ie = (c) => {
     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]
+    const b = y(null), Q = y(null), k = y(null), X = y(null), g = y(null), Y = ie(Pe), Z = ie(De), { flatOptions: c, selectedOptions: ee } = T(
+      () => lt(R || [], C),
+      [R, C]
     ), te = T(() => {
       const e = /* @__PURE__ */ new Map();
-      return i.forEach((t, o) => {
-        e.set(t.key, o);
+      return c.forEach((t, s) => {
+        e.set(t.key, s);
       }), e;
-    }, [i]), je = T(
+    }, [c]), je = T(
       () => ({
         itemToString: ce,
         onSelectedItemsChange: (e) => {
@@ -87,21 +87,21 @@ const ce = (c) => c ? c.key?.toString() : "", ie = (c) => {
           });
         },
         stateReducer: (e, t) => {
-          const { type: o, changes: n } = t;
-          return !M && o === oe.stateChangeTypes.DropdownKeyDownBackspace ? e : n;
+          const { type: s, changes: n } = t;
+          return !M && s === se.stateChangeTypes.DropdownKeyDownBackspace ? e : n;
         },
         ...C !== void 0 ? { selectedItems: ee } : {}
       }),
       [M, h, C, ee, Y]
     ), {
-      selectedItems: s,
+      selectedItems: i,
       addSelectedItem: Ae,
       setSelectedItems: E,
       removeSelectedItem: $e,
       getDropdownProps: He
-    } = oe(je), F = T(
-      () => new Set(s.map((e) => e.key)),
-      [s]
+    } = se(je), F = T(
+      () => new Set(i.map((e) => e.key)),
+      [i]
     ), {
       isOpen: l,
       getMenuProps: Ue,
@@ -112,25 +112,25 @@ const ce = (c) => c ? c.key?.toString() : "", ie = (c) => {
       highlightedIndex: P,
       toggleMenu: K,
       openMenu: f
-    } = j({
+    } = L({
       id: ye,
       isOpen: N,
       circularNavigation: fe,
-      items: i,
+      items: c,
       itemToString: ce,
-      defaultHighlightedIndex: s.length === 0 ? -1 : void 0,
+      defaultHighlightedIndex: i.length === 0 ? -1 : void 0,
       onIsOpenChange: (e) => {
         Z.current && setTimeout(() => {
           Z.current?.({ open: e.isOpen, name: h });
         }, 0);
       },
       stateReducer: (e, t) => {
-        const { type: o, changes: n } = t, { selectedItem: d } = n;
-        switch (o) {
-          case j.stateChangeTypes.InputKeyDownEnter:
-          case j.stateChangeTypes.ItemClick:
+        const { type: s, changes: n } = t, { selectedItem: d } = n;
+        switch (s) {
+          case L.stateChangeTypes.InputKeyDownEnter:
+          case L.stateChangeTypes.ItemClick:
             if (d && !d.disabled) {
-              const D = F.has(d.key), r = M || m && s.length > 1;
+              const D = F.has(d.key), r = M || m && i.length > 1;
               D && r && $e(d), D || (m ? Ae(d) : E([d]));
             }
             return {
@@ -143,33 +143,33 @@ const ce = (c) => c ? c.key?.toString() : "", ie = (c) => {
         }
       }
     }), ze = Ue(
-      { ref: v },
+      { ref: k },
       { suppressRefError: !0 }
-    ), p = Ve(He({ ref: re([We, Q]) })), Ge = (e) => {
-      Te?.(e), w && !l && f();
+    ), p = Ve(He({ ref: oe([We, Q]) })), Ge = (e) => {
+      Te?.(e), I && !l && f();
     }, Je = (e) => {
       const t = e.relatedTarget || document.activeElement;
-      !!(t && v.current?.contains(t)) || (Me?.(e), p.onBlur(e));
+      !!(t && k.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());
+      p.onKeyDown(e), I && !l && e.key.length === 1 && f(), [" ", "Enter"].includes(e.key) && !I && !w && 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(
+      k.current?.contains(e.target) || (!I || e.target.tagName !== "INPUT" ? K() : f());
+    }, Ye = W(
       (e) => {
         E(
           Array.from(e.target.options).reduce(
-            (t, o, n) => o.selected ? t.concat(i[n]) : t,
+            (t, s, n) => s.selected ? t.concat(c[n]) : t,
             []
           )
         );
       },
-      [i, E]
-    ), Ze = L(
-      ({ option: e, index: t, ...o }) => {
+      [c, E]
+    ), Ze = W(
+      ({ option: e, index: t, ...s }) => {
         if (!e) return null;
         const n = te.get(e.key);
         if (n === void 0) return null;
-        const d = i[n], D = ne({
+        const d = c[n], D = ne({
           item: d,
           index: n,
           disabled: e.disabled,
@@ -186,7 +186,7 @@ const ce = (c) => c ? c.key?.toString() : "", ie = (c) => {
         });
         return /* @__PURE__ */ a(st.Fragment, { children: J({
           ...z,
-          ...o,
+          ...s,
           className: $,
           innerProps: D,
           index: t,
@@ -199,7 +199,7 @@ const ce = (c) => c ? c.key?.toString() : "", ie = (c) => {
       },
       [
         z,
-        i,
+        c,
         te,
         $,
         ne,
@@ -209,56 +209,56 @@ const ce = (c) => c ? c.key?.toString() : "", ie = (c) => {
         J
       ]
     );
-    W(() => {
+    j(() => {
       V && f();
-    }, [V, f]), W(() => {
+    }, [V, f]), j(() => {
       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`);
+    const B = W(() => {
+      if (!k.current || !b.current) return;
+      const e = _ === "field" ? "width" : "minWidth", t = Math.round(b.current.getBoundingClientRect().width);
+      X.current !== t && (X.current = t, k.current.style[e] = `${t}px`);
     }, [_]);
-    W(() => {
-      if (!l || !k.current) return;
+    j(() => {
+      if (!l || !b.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(), () => {
+      return t.observe(b.current), B(), () => {
         t.disconnect(), g.current && window.clearTimeout(g.current), g.current = null;
       };
-    }, [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;
+    }, [l, B]);
+    const et = m ? i.map((e) => e.key?.toString()) : i[0]?.key?.toString(), tt = c.length > 0 || Be || !!H, nt = O ? /* @__PURE__ */ a("span", { ...qe(), children: Ie ? `${O} *` : O }) : void 0;
     return /* @__PURE__ */ rt(
       "div",
       {
         ..._e({
-          ref: k,
+          ref: b,
           ...u && { "aria-disabled": !0 },
-          className: se(x.component, { [x.block]: ke }, R)
+          className: re(v.component, { [v.block]: ke }, x)
         }),
         onKeyDown: u ? void 0 : Qe,
         tabIndex: -1,
         id: "slect_wrapper",
-        "data-test-id": A("combobox", c),
+        "data-test-id": A("combobox", o),
         children: [
-          b && /* @__PURE__ */ a(
+          w && /* @__PURE__ */ a(
             at,
             {
-              className: x.nativeSelect,
+              className: v.nativeSelect,
               disabled: u,
               multiple: m,
               name: h,
               value: et,
               onChange: Ye,
-              options: I
+              options: R
             }
           ),
           /* @__PURE__ */ a(
             Se,
             {
-              selectedMultiple: s,
-              selected: s[0],
+              selectedMultiple: i,
+              selected: i[0],
               multiple: m,
               open: l,
               disabled: u,
@@ -274,19 +274,19 @@ const ce = (c) => c ? c.key?.toString() : "", ie = (c) => {
                 onBlur: Je,
                 onFocus: u ? void 0 : Ge,
                 onClick: u ? void 0 : Xe,
-                tabIndex: b || u ? -1 : 0,
-                ref: re([p.ref]),
+                tabIndex: w || u ? -1 : 0,
+                ref: oe([p.ref]),
                 id: p.id,
                 "aria-labelledby": p["aria-labelledby"],
                 "aria-controls": p["aria-controls"],
-                "aria-autocomplete": w ? p["aria-autocomplete"] : void 0
+                "aria-autocomplete": I ? p["aria-autocomplete"] : void 0
               },
-              dataTestId: A("field", c),
+              dataTestId: A("field", o),
               ...xe
             }
           ),
-          h && !b && s.map((e) => /* @__PURE__ */ a("input", { type: "hidden", name: h, value: e.key }, e.key)),
-          !b && /* @__PURE__ */ a(
+          h && !w && i.map((e) => /* @__PURE__ */ a("input", { type: "hidden", name: h, value: e.key }, e.key)),
+          !w && /* @__PURE__ */ a(
             it,
             {
               open: l,
@@ -297,27 +297,34 @@ const ce = (c) => c ? c.key?.toString() : "", ie = (c) => {
               withArrow: he,
               preventFlip: ge,
               className: de,
-              popperClassName: x.popoverInner,
+              popperClassName: v.popoverInner,
               update: Fe,
               zIndex: Ke,
-              children: tt && /* @__PURE__ */ a("div", { ...ze, className: se(ue, x.optionsList), children: /* @__PURE__ */ a(
-                Oe,
+              children: tt && /* @__PURE__ */ a(
+                "div",
                 {
-                  ...Re,
-                  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)
+                  ...ze,
+                  className: re(ue, v.optionsList),
+                  children: /* @__PURE__ */ a(
+                    Oe,
+                    {
+                      ...Re,
+                      flatOptions: c,
+                      highlightedIndex: P,
+                      open: l,
+                      size: S,
+                      toggleMenu: K,
+                      actionButton: H,
+                      options: ae ?? R,
+                      Optgroup: Ee,
+                      Option: Ze,
+                      visibleOptions: Le,
+                      onScroll: Ne,
+                      dataTestId: A("options-list", o)
+                    }
+                  )
                 }
-              ) })
+              )
             }
           )
         ]

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

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

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

@@ -1,4 +1,3 @@
-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) => React.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) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import d, { useState as w, useRef as E, useCallback as f } from "react";
-import L from "classnames";
+import w from "classnames";
+import d, { useState as E, useRef as L, useCallback as f } from "react";
 import { FormControl as O } from "../../../form-control/component.js";
 import { useFocus as W } from "../../../hooks/useFocus/index.js";
 import { joinOptions as q } from "../../utils.js";
@@ -24,7 +24,7 @@ const P = ({
   fieldClassName: B,
   ...C
 }) => {
-  const [R, a] = w(!1), i = E(null), [y] = W(i, "keyboard"), S = f(() => a(!0), []), V = f(() => a(!1), []), m = j({ selected: v, selectedMultiple: N }), s = !!m, g = !!n && (s || !l);
+  const [R, a] = E(!1), i = L(null), [y] = W(i, "keyboard"), S = f(() => a(!0), []), V = f(() => a(!1), []), m = j({ selected: v, selectedMultiple: N }), s = !!m, g = !!n && (s || !l);
   return /* @__PURE__ */ o(
     "div",
     {
@@ -35,7 +35,7 @@ const P = ({
       children: /* @__PURE__ */ o(
         O,
         {
-          fieldClassName: L(e.field, B, {
+          fieldClassName: w(e.field, B, {
             [e.disabled]: c,
             [e.focusVisible]: y
           }),
@@ -49,7 +49,10 @@ const P = ({
           hint: b,
           rightAddons: (t || r) && /* @__PURE__ */ u(d.Fragment, { children: [
             r,
-            t ? d.cloneElement(t, { className: e.arrow }) : null
+            t ? d.cloneElement(
+              t,
+              { className: e.arrow }
+            ) : null
           ] }),
           "data-test-id": x,
           ...C,

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

@@ -2,16 +2,7 @@ import { jsx as l } from "react/jsx-runtime";
 import { forwardRef as f, useCallback as p, createElement as u } from "react";
 import { isGroup as y } from "../../utils.js";
 const a = ({ option: e }) => /* @__PURE__ */ l("option", { value: e.key, disabled: e.disabled, children: typeof e.content == "string" ? e.content : e.key }), b = ({ label: e, options: c }) => /* @__PURE__ */ l("optgroup", { label: e, children: c.map((t) => /* @__PURE__ */ l(a, { option: t }, t.key)) }), v = f(
-  ({
-    className: e,
-    disabled: c,
-    multiple: t,
-    value: s,
-    name: n,
-    options: d,
-    onChange: m,
-    ...k
-  }, o) => {
+  ({ className: e, disabled: c, multiple: t, value: s, name: n, options: d, onChange: m, ...k }, o) => {
     const i = p((r) => {
       r.stopPropagation();
     }, []);
@@ -27,7 +18,9 @@ const a = ({ option: e }) => /* @__PURE__ */ l("option", { value: e.key, disable
         onClick: i,
         ref: o,
         ...k,
-        children: d.map((r) => y(r) ? /* @__PURE__ */ u(b, { ...r, key: r.label }) : /* @__PURE__ */ l(a, { option: r }, r.key))
+        children: d.map(
+          (r) => y(r) ? /* @__PURE__ */ u(b, { ...r, key: r.label }) : /* @__PURE__ */ l(a, { option: r }, r.key)
+        )
       }
     );
   }

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

@@ -1,3 +1,2 @@
-import { default as React } from 'react';
 import { OptgroupProps } from '../../typings';
-export declare const Optgroup: ({ children, label, size }: OptgroupProps) => React.JSX.Element;
+export declare const Optgroup: ({ children, label, size }: OptgroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import p from "react";
-import a from "classnames";
+import p from "classnames";
+import a from "react";
 import r from "./index.module.css.js";
-const d = ({ children: s, label: m, size: t = "s" }) => /* @__PURE__ */ e(p.Fragment, { children: [
-  /* @__PURE__ */ o("div", { className: a(r.optgroup, r[t]), children: /* @__PURE__ */ o("span", { className: r.label, children: m }) }),
+const d = ({ children: s, label: m, size: t = "s" }) => /* @__PURE__ */ e(a.Fragment, { children: [
+  /* @__PURE__ */ o("div", { className: p(r.optgroup, r[t]), children: /* @__PURE__ */ o("span", { className: r.label, children: m }) }),
   s
 ] });
 export {

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

@@ -1,6 +1,6 @@
 import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { isValidElement as k } from "react";
 import s from "classnames";
+import { isValidElement as k } from "react";
 import { Skeleton as x } from "../../../skeleton/component.js";
 import { Checkmark as g } from "../checkmark/component.js";
 import t from "./index.module.css.js";

package/dist/select/components/options-list/component.d.ts

@@ -1,3 +1,2 @@
-import { default as React } from 'react';
 import { OptionsListProps } from '../../typings';
-export declare const OptionsList: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<unknown>>;
+export declare const OptionsList: import('react').ForwardRefExoticComponent<OptionsListProps & import('react').RefAttributes<unknown>>;

package/dist/select/components/options-list/component.js

@@ -1,52 +1,54 @@
-import { jsx as s, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as R, useRef as g, useCallback as N } from "react";
-import j from "react-merge-refs";
-import w from "@alphakits/icons/dist/ClockCircleM";
-import G from "classnames";
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+import R from "@alphakits/icons/dist/ClockCircleM";
+import N from "classnames";
+import { forwardRef as g, useRef as j, useCallback as w } from "react";
+import G from "react-merge-refs";
 import { Button as L } from "../../../button/component.js";
-import { useVisibleOptions as O, isGroup as M } from "../../utils.js";
+import { useVisibleOptions as M, isGroup as O } from "../../utils.js";
 import { Optgroup as V } from "../optgroup/component.js";
 import t from "./index.module.css.js";
 const W = () => {
   let e = 0;
   return () => e++;
-}, K = R(
+}, K = g(
   ({
     size: e = "s",
-    className: f,
-    Option: o,
+    className: d,
+    Option: m,
     options: l = [],
     actionButton: i,
-    Optgroup: d = V,
+    Optgroup: c = V,
     dataTestId: p,
-    emptyPlaceholder: m,
+    emptyPlaceholder: o,
     visibleOptions: u = 5,
     onScroll: b,
     toggleMenu: h,
     open: x
   }, C) => {
-    const c = g(null), n = W(), v = N(
-      (r) => /* @__PURE__ */ s(d, { label: r.label, size: e, children: r.options.map((k) => o({ option: k, index: n() })) }, r.label),
+    const a = j(null), n = W(), v = w(
+      (r) => /* @__PURE__ */ s(c, { label: r.label, size: e, children: r.options.map((k) => m({ option: k, index: n() })) }, r.label),
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [o, n, e]
+      [m, n, e, c]
     );
-    return O({
+    return M({
       visibleOptions: u,
-      listRef: c,
+      listRef: a,
       open: x,
       invalidate: l
-    }), l.length === 0 && !m && !i ? null : /* @__PURE__ */ a(
+    }), l.length === 0 && !o && !i ? null : /* @__PURE__ */ f(
       "div",
       {
-        className: G(t.optionsList, t[e], f),
+        className: N(t.optionsList, t[e], d),
         "data-test-id": p,
-        ref: j([c, C]),
+        ref: G([a, C]),
         onScroll: b,
         children: [
-          l.map((r) => M(r) ? v(r) : o({ option: r, index: n() })),
-          m && l.length === 0 && /* @__PURE__ */ a("div", { className: t.emptyPlaceholder, children: [
-            /* @__PURE__ */ s(w, {}),
-            m
+          l.map(
+            (r) => O(r) ? v(r) : m({ option: r, index: n() })
+          ),
+          o && l.length === 0 && /* @__PURE__ */ f("div", { className: t.emptyPlaceholder, children: [
+            /* @__PURE__ */ s(R, {}),
+            o
           ] }),
           !!i && /* @__PURE__ */ s("div", { className: t.actionButtonWrapper, children: /* @__PURE__ */ s(
             L,

package/dist/select/components/select-search/index.d.ts

@@ -8,4 +8,4 @@ type SelectSearchProps = Omit<SelectProps, 'options'> & {
     options: any;
     searchType?: 'text' | 'number';
 };
-export declare const SelectSearch: ({ options, searchType, onChange, selected, ...restProps }: SelectSearchProps) => React.JSX.Element;
+export declare const SelectSearch: ({ options, searchType, onChange, selected, ...restProps }: SelectSearchProps) => import("react/jsx-runtime").JSX.Element;