acinguiux-ds-react-framework 0.1.18 → 0.1.19

package/build/esm/components/Select/Select.js

@@ -1,173 +1,167 @@
-import { jsxs as H, jsx as u } from "react/jsx-runtime";
-import { forwardRef as Ee, useRef as z, useState as v, useId as Ie, useMemo as A, useEffect as ee, useCallback as E, useImperativeHandle as Oe } from "react";
-import { Sizes as f } from "../../react-base/src/consts/index.js";
-import $e from "classnames";
-import { isOption as te } from "../../react-base/src/components/Select/Select.utils.js";
-import { Popover as Ge, PopoverTrigger as Ae } from "../Popover/Popover.js";
-import le from "../Icon/components/ChevronDown.js";
-import { useFocusRingOnKeyboard as Ce } from "../../hooks/useFocusRingOnKeyboard.js";
-import { SelectInput as Me, SelectedSingleOptionLabel as Pe, SelectTag as Te, SelectPopoverContent as Be } from "./Select.styles.js";
-import { SelectListItemHeader as re, SelectListItem as Le } from "../ListItem/SelectListItem.js";
-import { useOptions as Ne } from "./hooks/useOptions.js";
-import { useElementRect as Re } from "./hooks/useElementRect.js";
+import { jsxs as A, jsx as i } from "react/jsx-runtime";
+import { forwardRef as we, useRef as Z, useState as S, useId as Ee, useMemo as $, useEffect as B, useCallback as C, useImperativeHandle as Ge } from "react";
+import { Sizes as c } from "../../react-base/src/consts/index.js";
+import De from "classnames";
+import { isOption as z } from "../../react-base/src/components/Select/Select.utils.js";
+import { Popover as Te, PopoverTrigger as Me } from "../Popover/Popover.js";
+import ee from "../Icon/components/ChevronDown.js";
+import { useFocusRingOnKeyboard as Re } from "../../hooks/useFocusRingOnKeyboard.js";
+import { SelectInput as Ke, SelectedSingleOptionLabel as Ne, SelectTag as Pe, SelectPopoverContent as Ae } from "./Select.styles.js";
+import Be from "../ListItem/ListItem.js";
+import { useOptions as He } from "./hooks/useOptions.js";
+import { useElementRect as Le } from "./hooks/useElementRect.js";
 import { strIncludes as Fe } from "./utils/strUtils.js";
-import { updateSelectedValues as He } from "./utils/selection.js";
+import { updateSelectedValues as Ve } from "./utils/selection.js";
 import { asArray as Xe } from "./utils/props.js";
 import je from "../Flexbox/Flexbox.js";
-import { SelectLoading as Ve } from "./components/SelectLoading.js";
-import { SELECT_CLASS as Ue } from "../../react-base/src/consts/classes.js";
-const dt = Ee(
+import { SelectLoading as We } from "./components/SelectLoading.js";
+import { onKeyDownHandle as _e } from "./utils/keydown.js";
+import te from "../ListItem/ListItemHeader.js";
+import { SELECT_CLASS as qe } from "../../react-base/src/consts/classes.js";
+const gt = we(
   ({
-    id: ne,
-    defaultOpen: se,
-    className: ie,
-    size: o = f.Medium,
-    mode: c = "single",
+    id: le,
+    defaultOpen: re,
+    className: ne,
+    size: n = c.Medium,
+    mode: l = "single",
     placeholder: ae,
-    loading: I = !1,
-    invalid: X = !1,
-    showSearch: C = !0,
-    allowClear: x,
-    placement: _e,
-    disabled: b,
-    options: oe,
-    onFocus: ue,
-    onBlur: ce,
-    onClick: de,
-    children: fe,
-    optionFilterProp: j = "label",
-    optionLabelProp: V = "label",
-    onSearch: O,
-    onSelect: M,
-    onDeselect: P,
-    onClear: T,
-    onChange: m,
-    defaultValue: pe,
-    suffix: U,
-    value: me,
+    loading: O = !1,
+    invalid: H = !1,
+    showSearch: w = !0,
+    allowClear: m,
+    placement: Je,
+    disabled: h,
+    options: ie,
+    onFocus: se,
+    onBlur: oe,
+    onClick: ce,
+    children: ue,
+    optionFilterProp: L = "label",
+    optionLabelProp: F = "label",
+    optionSelectionType: de,
+    optionShowInputControls: pe,
+    optionMutliline: fe = !1,
+    onKeyDown: V,
+    onSearch: X,
+    onSelect: E,
+    onDeselect: G,
+    onClear: me,
+    onChange: D,
+    defaultValue: he,
+    suffix: j,
+    value: g,
     style: ge,
     // This prop is not used in the new Select implementation, but kept for compatibility.
     // If you need virtualized options, please use the DeprecatedSelect component.
-    virtual: We = !1,
-    ...he
-  }, ke) => {
-    var Z, K;
-    const p = z(null), xe = z(null), [w, g] = v(se ?? !1), s = Ie(), [_, B] = v(!1), W = ne ?? `select-${s}-input`, [i, L] = v(""), [n, be] = v(() => Xe(pe ?? me)), $ = Ne(fe, `select-${s}`, oe), d = A(
-      () => $.flatMap((e) => e.isGroup ? [e, ...e.options] : [e]),
-      [$]
-    ), y = A(
-      () => i && i.trim().length > 0 ? d.filter(
-        (e) => (e == null ? void 0 : e.isGroup) || Fe(e == null ? void 0 : e[j], i)
-      ) : d,
-      [d, i, j]
-    ), r = A(
+    virtual: Qe = !1,
+    ...be
+  }, ye) => {
+    const u = Z(null), ve = Z(null), [v, b] = S(re ?? !1), r = Ee(), [W, T] = S(!1), _ = le ?? `select-${r}-input`, [s, M] = S(""), [a, R] = S(() => Xe(he ?? g)), I = He(ue, `select-${r}`, ie), o = $(
+      () => I.flatMap((e) => e.isGroup ? [e, ...e.options] : [e]),
+      [I]
+    ), y = $(
+      () => s && s.trim().length > 0 ? o.filter(
+        (e) => e?.isGroup || Fe(e?.[L], s)
+      ) : o,
+      [o, s, L]
+    ), q = $(
       () => y.filter((e) => e && !e.isGroup && e.disabled !== !0).map((e) => e.key),
       [y]
-    ), [h, G] = v(null);
-    ee(() => {
-      var e;
-      G(((e = d.find((t) => !t.isGroup && !t.disabled)) == null ? void 0 : e.key) ?? null);
-    }, [d]);
-    const q = E(
+    ), [p, K] = S(null);
+    B(() => {
+      K(o.find((e) => !e.isGroup && !e.disabled)?.key ?? null);
+    }, [o]);
+    const J = C(
       (e) => {
-        if (c === "single") {
-          m == null || m(e.length === 1 ? e[0] : null);
+        if (l === "single") {
+          D?.(e.length === 1 ? e[0] : null);
           return;
         }
-        m == null || m(e);
+        D?.(e);
       },
-      [c, m]
-    ), S = E(
+      [l, D]
+    );
+    B(() => {
+      l === "single" ? R(g ? [g] : []) : Array.isArray(g) && R(g);
+    }, [g, l]);
+    const x = C(
       (e) => {
         const {
           current: t,
-          added: l,
-          removed: a
-        } = He(n, e, c, x);
-        l.forEach((F) => {
-          const k = d.find((D) => !D.isGroup && D.value === F);
-          te(k) && M && M(k.value, k);
-        }), a.forEach((F) => {
-          const k = d.find((D) => !D.isGroup && D.value === F);
-          te(k) && P && P(k.value, k);
-        }), be(t), q(t), L(""), c === "single" && g(!1);
+          added: d,
+          removed: $e
+        } = Ve(a, e, l, m);
+        d.forEach((P) => {
+          const f = o.find((k) => !k.isGroup && k.value === P);
+          z(f) && E && E(f.value, f);
+        }), $e.forEach((P) => {
+          const f = o.find((k) => !k.isGroup && k.value === P);
+          z(f) && G && G(f.value, f);
+        }), R(t), J(t), M(""), l === "single" && b(!1);
       },
-      [n, c, x, q, d, M, P]
-    ), J = A(
-      () => n == null ? void 0 : n.map(
-        (e) => {
-          var t;
-          return ((t = $.flatMap((l) => l.isGroup ? l.options : [l]).find((l) => !l.isGroup && l.value === e)) == null ? void 0 : t[V]) ?? e;
-        }
+      [a, l, m, J, o, E, G]
+    ), Q = $(
+      () => a?.map(
+        (e) => I.flatMap((t) => t.isGroup ? t.options : [t]).find((t) => !t.isGroup && t.value === e)?.[F] ?? e
       ),
-      [$, n, V]
+      [I, a, F]
     );
-    ee(() => {
-      var e;
-      h && ((e = document.getElementById(h)) == null || e.scrollIntoView({ block: "nearest", inline: "nearest" }));
-    }, [h]);
-    const N = Re((K = (Z = p.current) == null ? void 0 : Z.parentElement) == null ? void 0 : K.parentElement);
-    Oe(ke, () => p.current);
-    const { focusKind: ye, handleOnClick: Se, handleOnFocus: R, handleOnBlur: Q, handleOnMouseDownCapture: we } = Ce({
-      inputRef: p,
-      onFocus: ue,
-      onBlur: ce,
-      onClick: de
-    }), De = E(
+    B(() => {
+      p && document.getElementById(p)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }, [p]);
+    const xe = Le(u.current?.parentElement?.parentElement);
+    Ge(ye, () => u.current);
+    const { focusKind: ke, handleOnClick: Se, handleOnFocus: N, handleOnBlur: U, handleOnMouseDownCapture: Ce } = Re({
+      inputRef: u,
+      onFocus: se,
+      onBlur: oe,
+      onClick: ce
+    }), Oe = C(
       (e) => {
-        var t, l;
-        _ || (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget) && e.relatedTarget.id !== `select-${s}-controls` && ((t = e.relatedTarget.parentElement) == null ? void 0 : t.id) !== `select-${s}-options-container` ? (L(""), Q(e), g(!1)) : (R(e), (l = p.current) == null || l.focus()));
+        W || (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget) && e.relatedTarget.id !== `select-${r}-controls` && e.relatedTarget.parentElement?.id !== `select-${r}-options-container` ? (M(""), U(e), b(!1)) : (N(e), u.current?.focus()));
       },
-      [Q, R, s, _]
-    ), Y = E(
+      [U, N, r, W]
+    ), Y = C(
       (e) => {
-        var t;
-        if (!w && ["Enter", "ArrowUp", "ArrowDown", " "].includes(e.key)) {
-          e.preventDefault(), e.stopPropagation(), g(!0);
-          return;
-        }
-        if (e.key === "Escape") {
-          e.preventDefault(), g(!1);
-          return;
-        }
-        if ((t = p.current) == null || t.focus(), x && (e.key === "Backspace" || e.key === "Delete") && (!i || i.trim().length === 0) && n.length > 0 && S(n[n.length - 1]), r.length !== 0) {
-          if (e.key === "Enter" || (!i || i.trim().length === 0) && e.key === " ") {
-            e.preventDefault();
-            const l = d.find((a) => !a.isGroup && a.key === h);
-            S(l && !(l != null && l.isGroup) ? l.value ?? null : null);
-          }
-          e.key === "ArrowDown" && (e.preventDefault(), G((l) => {
-            const a = l ? r.indexOf(l) : -1;
-            return a === -1 || a === r.length - 1 ? (r == null ? void 0 : r[0]) ?? null : (r == null ? void 0 : r[a + 1]) ?? null;
-          })), e.key === "ArrowUp" && (e.preventDefault(), G((l) => {
-            const a = l ? r.indexOf(l) : -1;
-            return a <= 0 ? (r == null ? void 0 : r[r.length - 1]) ?? null : (r == null ? void 0 : r[a - 1]) ?? null;
-          }));
-        }
+        _e(e, {
+          isOpen: v,
+          setIsOpen: b,
+          input: u.current,
+          allowClear: !!m,
+          availableOptionKeys: q,
+          searchValue: s,
+          selectedNodeValues: a,
+          selectNodeValue: x,
+          flatOptions: o,
+          currentNodeKey: p,
+          setCurrentNodeKey: K
+        }), V?.(e);
       },
       [
-        w,
+        V,
+        v,
+        m,
+        q,
+        s,
+        a,
         x,
-        r,
-        i,
-        n,
-        S,
-        d,
-        h
+        o,
+        p
       ]
-    ), ve = E(
+    ), Ie = C(
       (e) => {
         const t = e.target.value;
-        L(t), O == null || O(t);
+        M(t), X?.(t);
       },
-      [O]
+      [X]
     );
-    return /* @__PURE__ */ H(Ge, { open: w, onOpenChange: g, children: [
-      /* @__PURE__ */ u(
+    return /* @__PURE__ */ A(Te, { open: v, onOpenChange: b, children: [
+      /* @__PURE__ */ i(
         "label",
         {
-          htmlFor: W,
-          id: `select-${s}-label`,
+          htmlFor: _,
+          id: `select-${r}-label`,
           tabIndex: -1,
           style: {
             position: "absolute",
@@ -180,100 +174,98 @@ const dt = Ee(
             whiteSpace: "nowrap",
             borderWidth: "0px"
           },
-          children: n.join(", ")
+          children: a.join(", ")
         }
       ),
-      /* @__PURE__ */ u(Ae, { asChild: !0, children: /* @__PURE__ */ u(
-        Me,
+      /* @__PURE__ */ i(Me, { asChild: !0, children: /* @__PURE__ */ i(
+        Ke,
         {
-          inputRef: p,
-          "data-focused": ye,
-          $mode: c,
-          className: $e(Ue, ie),
+          inputRef: u,
+          "data-focused": ke,
+          $mode: l,
+          className: De(qe, ne),
           style: ge,
-          size: o,
+          size: n,
           allowReadOnlyClear: !0,
-          readOnly: !C,
-          onFocus: R,
-          onBlur: De,
+          readOnly: !w,
+          onFocus: N,
+          onBlur: Oe,
           wrapperProps: {
             onMouseDownCapture: (e) => {
-              B(!0), we(e);
+              T(!0), Ce(e);
             },
             onClick: (e) => {
-              var t;
-              e.isDefaultPrevented() || (t = p.current) == null || t.click(), B(!1), Se(e);
+              e.isDefaultPrevented() || u.current?.click(), T(!1), Se(e);
             }
           },
           onClick: (e) => {
-            C && !b && !e.isDefaultPrevented() && (g(!0), e.preventDefault()), B(!1), e.stopPropagation();
+            w && !h && !e.isDefaultPrevented() && (b(!0), e.preventDefault()), T(!1), e.stopPropagation();
           },
-          invalid: X,
-          loading: I,
-          disabled: b,
+          invalid: H,
+          loading: O,
+          disabled: h,
           onKeyDown: Y,
-          value: i,
-          onChange: ve,
+          value: s,
+          onChange: Ie,
           name: "select-input",
           type: "text",
-          customPrefix: c === "multiple" && n.map((e, t) => /* @__PURE__ */ u(
-            Te,
+          customPrefix: l === "multiple" && a.map((e, t) => /* @__PURE__ */ i(
+            Pe,
             {
               sentiment: "information",
-              $disabled: b,
-              $invalid: X,
-              size: o,
-              closeButton: !b && x,
+              $disabled: h,
+              $invalid: H,
+              size: n,
+              closeButton: !h && m,
               onCloseClick: () => {
-                S(e);
+                x(e);
               },
-              children: J[t]
+              children: Q[t]
             },
-            `select-${s}-value-${e}`
+            `select-${r}-value-${e}`
           )),
-          customSuffix: n.length > 0 && c === "single" && (!i || i.trim().length === 0) && /* @__PURE__ */ u(Pe, { disabled: b, id: `select-${s}-value`, size: o, children: J[0] }),
+          customSuffix: a.length > 0 && l === "single" && (!s || s.trim().length === 0) && /* @__PURE__ */ i(Ne, { disabled: h, id: `select-${r}-value`, size: n, children: Q[0] }),
           suffix: {
             transparent: !0,
-            node: U ? /* @__PURE__ */ H(je, { gap: "2px", children: [
-              U,
-              /* @__PURE__ */ u(le, {})
-            ] }) : /* @__PURE__ */ u(le, {}),
+            node: j ? /* @__PURE__ */ A(je, { gap: "2px", children: [
+              j,
+              /* @__PURE__ */ i(ee, {})
+            ] }) : /* @__PURE__ */ i(ee, {}),
             onClick: (e) => {
-              var l;
               const t = new Event("click", { bubbles: !0, cancelable: !0 });
-              C && !b && (g((a) => !a), t.preventDefault(), e.preventDefault()), (l = p.current) == null || l.dispatchEvent(t);
+              w && !h && (b((d) => !d), t.preventDefault(), e.preventDefault()), u.current?.dispatchEvent(t);
             }
           },
-          placeholder: !i && (n.length === 0 && c === "single" || c === "multiple") ? ae : "",
-          allowClear: x && ((e) => e !== "" || n.length > 0),
+          placeholder: !s && (a.length === 0 && l === "single" || l === "multiple") ? ae : "",
+          allowClear: m && ((e) => e !== "" || a.length > 0),
           onClear: () => {
-            S(null), T == null || T();
+            x(null), me?.();
           },
           autoComplete: "off",
           autoCorrect: "off",
-          multiple: c !== "single",
+          multiple: l !== "single",
           spellCheck: "false",
           "aria-autocomplete": "list",
           role: "combobox",
           "aria-haspopup": "listbox",
-          "aria-controls": w ? `select-${s}-controls` : void 0,
-          "aria-labelledby": `select-${s}-label`,
-          id: W,
-          "aria-activedescendant": w ? h ?? void 0 : void 0,
-          ...he
+          "aria-controls": v ? `select-${r}-controls` : void 0,
+          "aria-labelledby": `select-${r}-label`,
+          id: _,
+          "aria-activedescendant": v ? p ?? void 0 : void 0,
+          ...be
         }
       ) }),
-      /* @__PURE__ */ H(
-        Be,
+      /* @__PURE__ */ A(
+        Ae,
         {
           role: "listbox",
           align: "start",
           side: "bottom",
-          ref: xe,
+          ref: ve,
           style: {
-            width: (N == null ? void 0 : N.width) ?? "auto"
+            width: xe?.width ?? "auto"
           },
-          size: o === f.XSmall ? f.Small : o,
+          size: n === c.XSmall ? c.Small : n,
           sideOffset: 4,
           alignOffset: 0,
           tabIndex: -1,
@@ -281,49 +273,55 @@ const dt = Ee(
             e.preventDefault(), e.stopPropagation();
           },
           "aria-label": "Suggestions",
-          id: `select-${s}-controls`,
+          id: `select-${r}-controls`,
           padding: !1,
           children: [
-            /* @__PURE__ */ u("div", { id: `select-${s}-options-container`, role: "presentation", tabIndex: -1, children: !I && y.map((e) => e.isGroup && y.some((t) => !t.isGroup && t.key.startsWith(e.key)) ? /* @__PURE__ */ u(
-              re,
+            /* @__PURE__ */ i("div", { id: `select-${r}-options-container`, role: "presentation", tabIndex: -1, children: !O && y.map((e, t) => e.isGroup && y.some((d) => !d.isGroup && d.key.startsWith(e.key)) ? /* @__PURE__ */ i(
+              te,
               {
-                size: o === f.XSmall ? f.Small : o,
+                size: n === c.XSmall ? c.Small : n,
                 id: e.key,
                 role: "group",
-                label: e.label
+                label: e.label,
+                divider: t !== 0
               },
               e.key
-            ) : e.isGroup ? null : /* @__PURE__ */ u(
-              Le,
+            ) : e.isGroup ? null : /* @__PURE__ */ i(
+              Be,
               {
                 id: e.key,
-                size: o === f.XSmall ? f.Small : o,
+                size: n === c.XSmall ? c.Small : n,
                 role: "option",
                 tabIndex: -1,
-                onMouseMove: () => !e.disabled && G(e.key),
-                onClick: () => !e.disabled && S(e.value ?? null),
-                onKeyDown: (t) => Y(t),
-                selected: n.includes(e.value ?? null),
-                "aria-selected": h === e.key,
+                onMouseMove: () => !e.disabled && K(e.key),
+                onClick: () => !e.disabled && x(e.value ?? null),
+                onKeyDown: (d) => Y(d),
+                selected: a.includes(e.value ?? null),
+                "aria-selected": p === e.key,
                 disabled: e.disabled,
-                label: e.label
+                multiline: fe,
+                label: e.label,
+                optionItem: !0,
+                selectionType: de ?? (!l || l === "single" ? "radio" : "checkbox"),
+                showInputControls: pe
               },
               e.key
             )) }),
-            !I && (y.length === 0 || y.every((e) => e.isGroup)) && /* @__PURE__ */ u(
-              re,
+            !O && (y.length === 0 || y.every((e) => e.isGroup)) && /* @__PURE__ */ i(
+              te,
               {
                 style: { textAlign: "center" },
-                size: o === f.XSmall ? f.Small : o,
-                id: `select-${s}-options-not-found`,
+                size: n === c.XSmall ? c.Small : n,
+                id: `select-${r}-options-not-found`,
                 role: "alert",
                 "aria-live": "polite",
                 "aria-atomic": !0,
                 "aria-label": "No options found",
-                label: "No options found"
+                label: "No options found",
+                divider: !1
               }
             ),
-            I && /* @__PURE__ */ u(Ve, { id: s, size: o })
+            O && /* @__PURE__ */ i(We, { id: r, size: n })
           ]
         }
       )
@@ -331,6 +329,6 @@ const dt = Ee(
   }
 );
 export {
-  dt as default
+  gt as default
 };
 //# sourceMappingURL=Select.js.map