@alphakits/ui 2.1.0 → 2.1.1

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

@@ -1,332 +1,321 @@
-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 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(
+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: 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,
+    className: R,
+    fieldClassName: le,
+    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: N,
+    popoverPosition: pe = "bottom-start",
+    offset: me,
+    withArrow: he,
+    preventFlip: ge = !0,
+    optionsListWidth: _ = "field",
+    name: h,
+    id: ye,
+    required: Ie,
     selected: C,
-    size: L = "m",
-    optionsSize: X = L,
-    error: xe,
-    hint: Pe,
-    block: Ce = !0,
+    size: S = "m",
+    optionsSize: q = S,
+    error: we,
+    hint: be,
+    block: ke = !0,
     label: O,
-    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(() => {
+    placeholder: ve,
+    fieldProps: xe = {},
+    optionsListProps: Re = {},
+    optionProps: z = {},
+    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, r) => {
-        e.set(t.key, r);
+      return i.forEach((t, o) => {
+        e.set(t.key, o);
       }), e;
-    }, [i]), $e = N(
+    }, [i]), je = T(
       () => ({
-        itemToString: ue,
+        itemToString: ce,
         onSelectedItemsChange: (e) => {
-          var r;
           const { selectedItems: t = [] } = e;
-          (r = D.current) == null || r.call(D, {
+          Y.current?.({
             selectedMultiple: t,
             selected: t.length ? t[0] : null,
-            name: g
+            name: h
           });
         },
         stateReducer: (e, t) => {
-          const { type: r, changes: n } = t;
-          return !E && r === de.stateChangeTypes.DropdownKeyDownBackspace ? e : n;
+          const { type: o, changes: n } = t;
+          return !M && o === oe.stateChangeTypes.DropdownKeyDownBackspace ? e : n;
         },
-        ...C !== void 0 ? { selectedItems: re } : {}
+        ...C !== void 0 ? { selectedItems: ee } : {}
       }),
-      [E, g, C, re, D]
+      [M, h, C, ee, Y]
     ), {
-      selectedItems: o,
-      addSelectedItem: He,
-      setSelectedItems: j,
-      removeSelectedItem: Ue,
-      getDropdownProps: Ve
-    } = de($e), A = N(
-      () => new Set(o.map((e) => e.key)),
-      [o]
+      selectedItems: s,
+      addSelectedItem: Ae,
+      setSelectedItems: E,
+      removeSelectedItem: $e,
+      getDropdownProps: He
+    } = oe(je), F = T(
+      () => new Set(s.map((e) => e.key)),
+      [s]
     ), {
-      isOpen: a,
-      getMenuProps: _e,
-      getInputProps: qe,
-      getItemProps: oe,
-      getComboboxProps: ze,
-      getLabelProps: Ge,
-      highlightedIndex: T,
-      toggleMenu: B,
-      openMenu: p
-    } = V({
-      id: ke,
-      isOpen: K,
-      circularNavigation: ge,
+      isOpen: l,
+      getMenuProps: Ue,
+      getInputProps: Ve,
+      getItemProps: ne,
+      getComboboxProps: _e,
+      getLabelProps: qe,
+      highlightedIndex: P,
+      toggleMenu: K,
+      openMenu: f
+    } = j({
+      id: ye,
+      isOpen: N,
+      circularNavigation: fe,
       items: i,
-      itemToString: ue,
-      defaultHighlightedIndex: o.length === 0 ? -1 : void 0,
+      itemToString: ce,
+      defaultHighlightedIndex: s.length === 0 ? -1 : void 0,
       onIsOpenChange: (e) => {
-        R.current && setTimeout(() => {
-          var t;
-          (t = R.current) == null || t.call(R, { open: e.isOpen, name: g });
+        Z.current && setTimeout(() => {
+          Z.current?.({ open: e.isOpen, name: h });
         }, 0);
       },
       stateReducer: (e, t) => {
-        const { type: r, changes: n } = t, { selectedItem: d } = n;
-        switch (r) {
-          case V.stateChangeTypes.InputKeyDownEnter:
-          case V.stateChangeTypes.ItemClick:
+        const { type: o, changes: n } = t, { selectedItem: d } = n;
+        switch (o) {
+          case j.stateChangeTypes.InputKeyDownEnter:
+          case j.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]));
+              const D = F.has(d.key), r = M || m && s.length > 1;
+              D && r && $e(d), D || (m ? Ae(d) : E([d]));
             }
             return {
               ...n,
-              isOpen: !G,
-              highlightedIndex: e.isOpen && !G ? e.highlightedIndex : n.highlightedIndex
+              isOpen: !U,
+              highlightedIndex: e.isOpen && !U ? e.highlightedIndex : n.highlightedIndex
             };
           default:
             return n;
         }
       }
-    }), Je = _e(
-      { ref: x },
+    }), ze = Ue(
+      { ref: v },
       { suppressRefError: !0 }
-    ), m = qe(Ve({ ref: ae([Be, te]) })), Qe = (e) => {
-      W == null || W(e), b && !a && p();
-    }, Xe = (e) => {
-      var n;
+    ), p = Ve(He({ ref: re([We, Q]) })), Ge = (e) => {
+      Te?.(e), w && !l && f();
+    }, Je = (e) => {
       const t = e.relatedTarget || document.activeElement;
-      !!(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(
+      !!(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) => {
-        j(
+        E(
           Array.from(e.target.options).reduce(
-            (t, r, n) => r.selected ? t.concat(i[n]) : t,
+            (t, o, n) => o.selected ? t.concat(i[n]) : t,
             []
           )
         );
       },
-      [i, j]
-    ), tt = H(
-      ({ option: e, index: t, ...r }) => {
+      [i, E]
+    ), Ze = L(
+      ({ option: e, index: t, ...o }) => {
         if (!e) return null;
-        const n = se.get(e.key);
+        const n = te.get(e.key);
         if (n === void 0) return null;
-        const d = i[n], M = oe({
+        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(ct.Fragment, { children: ee({
-          ...Y,
-          ...r,
-          className: q,
-          innerProps: M,
+        return /* @__PURE__ */ a(st.Fragment, { children: J({
+          ...z,
+          ...o,
+          className: $,
+          innerProps: D,
           index: t,
           option: e,
-          size: X,
+          size: q,
           disabled: e.disabled,
-          highlighted: n === T,
-          selected: A.has(e.key)
+          highlighted: n === P,
+          selected: F.has(e.key)
         }) }, e.key);
       },
       [
-        Y,
+        z,
         i,
-        se,
+        te,
+        $,
+        ne,
         q,
-        oe,
-        X,
-        T,
-        A,
-        ee
+        P,
+        F,
+        J
       ]
     );
-    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;
+    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`);
+    }, [_]);
+    W(() => {
+      if (!l || !k.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;
+        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;
       };
-    }, [a, $, w, o]);
-    const nt = h ? o.map((e) => {
-      var t;
-      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(
+    }, [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",
       {
-        ...ze({
-          ref: v,
-          ...f && { "aria-disabled": !0 },
-          className: le(P.component, { [P.block]: Ce }, u)
+        ..._e({
+          ref: k,
+          ...u && { "aria-disabled": !0 },
+          className: se(x.component, { [x.block]: ke }, R)
         }),
-        onKeyDown: f ? void 0 : Ye,
+        onKeyDown: u ? void 0 : Qe,
         tabIndex: -1,
         id: "slect_wrapper",
-        "data-test-id": _("combobox", c),
+        "data-test-id": A("combobox", c),
         children: [
-          k && /* @__PURE__ */ l(
-            ut,
+          b && /* @__PURE__ */ a(
+            at,
             {
-              className: P.nativeSelect,
-              disabled: f,
-              multiple: h,
-              name: g,
-              value: nt,
-              onChange: et,
-              options: w
+              className: x.nativeSelect,
+              disabled: u,
+              multiple: m,
+              name: h,
+              value: et,
+              onChange: Ye,
+              options: I
             }
           ),
-          /* @__PURE__ */ l(
-            Ke,
+          /* @__PURE__ */ a(
+            Se,
             {
-              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,
+              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: 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": b ? 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", c),
-              ...Re
+              dataTestId: A("field", c),
+              ...xe
             }
           ),
-          g && !k && o.map((e) => /* @__PURE__ */ l("input", { type: "hidden", name: g, value: e.key }, e.key)),
-          !k && /* @__PURE__ */ l(
-            lt,
+          h && !b && s.map((e) => /* @__PURE__ */ a("input", { type: "hidden", name: h, value: e.key }, e.key)),
+          !b && /* @__PURE__ */ a(
+            it,
             {
-              open: a,
+              open: l,
               withTransition: !1,
-              anchorElement: te.current,
-              position: ye,
-              offset: Ie,
-              withArrow: we,
-              preventFlip: be,
-              className: me,
-              popperClassName: P.popoverInner,
-              update: We,
-              zIndex: Fe,
-              children: rt && /* @__PURE__ */ l("div", { ...Je, className: le(he, P.optionsList), children: /* @__PURE__ */ l(
-                Le,
+              anchorElement: Q.current,
+              position: pe,
+              offset: me,
+              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,
                 {
-                  ...Te,
+                  ...Re,
                   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)
+                  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)
                 }
               ) })
             }
@@ -337,6 +326,5 @@ const ue = (c) => {
   }
 );
 export {
-  xt 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

@@ -1,4 +1,5 @@
-import './index.module.css';
+import * as __css from './index.css';
+export const __cssModule = __css;
 const o = "component_vbM1", n = "popoverInner_UhT2", t = "optionsList_catD", e = "nativeSelect_Ssnn", c = "block_kBj0", s = {
   component: o,
   popoverInner: n,
@@ -14,4 +15,3 @@ export {
   t as optionsList,
   n as popoverInner
 };
-//# sourceMappingURL=index.module.css.js.map

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

@@ -1,4 +1,5 @@
-import './index.module.css';
+import * as __css from './index.css';
+export const __cssModule = __css;
 const e = "checkmark_mZbF", c = "selected_3GdD", s = {
   checkmark: e,
   selected: c
@@ -8,4 +9,3 @@ export {
   s as default,
   c as selected
 };
-//# sourceMappingURL=index.module.css.js.map

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

@@ -1,4 +1,5 @@
-import './index.module.css';
+import * as __css from './index.css';
+export const __cssModule = __css;
 const e = "component_kQ9o", o = "field_WxOY", c = "disabled_GQwp", n = "arrow_4fEB", s = "placeholder_FY2i", t = "contentWrapper_MkCc", l = "value_0Are", a = "focusVisible_qhc9", r = {
   component: e,
   field: o,
@@ -20,4 +21,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