@epam/ai-dial-ui-kit 0.16.0-dev.5 → 0.16.0-dev.50

package/dist/components/New/Select/Select.js

@@ -1,124 +1,125 @@
-import { jsx as l, jsxs as g, Fragment as je } from "react/jsx-runtime";
-import { IconChevronDown as ze } from "@tabler/icons-react";
-import { useId as Ue, useState as z, useCallback as f, useMemo as m, useEffect as Ve, useImperativeHandle as qe, Fragment as Ge } from "react";
-import { Checkbox as He } from "../Checkbox/Checkbox.js";
-import { Dropdown as Qe } from "../Dropdown/Dropdown.js";
-import { EllipsisTooltip as We } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { InteractiveTooltip as Ze } from "../InteractiveTooltip/InteractiveTooltip.js";
-import { ErrorText as Je, CaptionText as Re } from "../CaptionText/CaptionText.js";
-import { GhostIconButton as Xe } from "../IconButton/IconButtonWrappers.js";
-import { Input as re } from "../Input/Input.js";
-import { Label as Ye } from "../Label/Label.js";
-import { DialNoDataContent as Pe } from "../../NoDataContent/NoDataContent.js";
-import { DIAL_KIT_ICON_STROKE as el } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as ae } from "../../../constants/icon.js";
-import { MenuItem as ie } from "../MenuItem/MenuItem.js";
-import { MenuItemMark as U } from "../../../types/menu-item.js";
-import { ElementSize as O } from "../../../types/size.js";
-import { useIsMobileScreen as ll } from "../../../hooks/use-is-mobile-screen.js";
-import { resolveAccessibleName as oe } from "../../../utils/accessible-name.js";
+import { jsx as l, jsxs as N, Fragment as Ve } from "react/jsx-runtime";
+import { IconChevronDown as qe } from "@tabler/icons-react";
+import { useId as Ge, useState as U, useCallback as m, useMemo as u, useEffect as He, useImperativeHandle as Qe, Fragment as We } from "react";
+import { Checkbox as Ze } from "../Checkbox/Checkbox.js";
+import { Dropdown as Je } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as Re } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { InteractiveTooltip as Xe } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { ErrorText as Ye, CaptionText as Pe } from "../CaptionText/CaptionText.js";
+import { GhostIconButton as el } from "../IconButton/IconButtonWrappers.js";
+import { Input as se } from "../Input/Input.js";
+import { Label as ll } from "../Label/Label.js";
+import { NoDataContent as tl } from "../NoDataContent/NoDataContent.js";
+import { DIAL_KIT_ICON_STROKE as nl } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as ce } from "../../../constants/icon.js";
+import { MenuItem as de } from "../MenuItem/MenuItem.js";
+import { MenuItemMark as V } from "../../../types/menu-item.js";
+import { ElementSize as D } from "../../../types/size.js";
+import { useIsMobileScreen as rl } from "../../../hooks/use-is-mobile-screen.js";
+import { resolveAccessibleName as fe } from "../../../utils/accessible-name.js";
 import { mergeClasses as p } from "../../../utils/merge-classes.js";
-import { CollapsedSelectTags as tl } from "./CollapsedSelectTags.js";
-import { MultiSelectTags as nl } from "./MultiSelectTags.js";
-import { SelectSubMenuItem as rl } from "./SelectSubMenuItem.js";
-import { selectFieldIconClassName as al, selectListWidthClassName as il, selectOverlayBaseClassName as ol, selectSearchThreshold as sl, selectSearchIcon as cl, selectCloseIcon as dl, selectOptionBaseClassName as fl, selectOptionsScrollClassName as ml, selectEmptyStateIcon as ul } from "./constants.js";
-import { DIAL_KIT_CLASS as hl } from "../../../constants/public-class-names.js";
-const zl = ({
-  options: a,
+import { CollapsedSelectTags as il } from "./CollapsedSelectTags.js";
+import { MultiSelectTags as al } from "./MultiSelectTags.js";
+import { SelectSubMenuItem as ol } from "./SelectSubMenuItem.js";
+import { selectFieldIconClassName as sl, selectListWidthClassName as cl, selectOverlayBaseClassName as dl, selectSearchThreshold as fl, selectSearchIcon as ml, selectCloseIcon as ul, selectOptionBaseClassName as hl, selectOptionsScrollClassName as pl } from "./constants.js";
+import { DIAL_KIT_CLASS as vl } from "../../../constants/public-class-names.js";
+const Vl = ({
+  options: i,
   multiple: n = !1,
-  id: se,
-  value: D,
-  defaultValue: ce,
-  size: V = O.Standard,
-  prefix: q,
-  customSelectedValue: G,
-  placeholder: de = "Select...",
-  labelProps: N,
-  error: H,
-  caption: fe,
-  ariaLabel: Q,
-  searchable: W = !1,
-  searchSize: me = O.Standard,
-  searchPlaceholder: Z,
-  selectAll: ue = !1,
-  invalid: he,
-  selectAllLabel: pe = "Select all",
-  collapseTagOverflow: be = !1,
-  selectedOptionMark: J = U.Tint,
-  emptyStateTitle: ve = "No options available",
-  emptyStateDescription: Ce,
+  id: me,
+  value: F,
+  defaultValue: ue,
+  size: q = D.Standard,
+  prefix: G,
+  customSelectedValue: H,
+  placeholder: he = "Select...",
+  labelProps: S,
+  error: v,
+  caption: Q,
+  ariaLabel: W,
+  ariaDescribedBy: pe,
+  searchable: Z = !1,
+  searchSize: ve = D.Standard,
+  searchPlaceholder: J,
+  selectAll: be = !1,
+  invalid: R,
+  selectAllLabel: Ce = "Select all",
+  collapseTagOverflow: ge = !1,
+  selectedOptionMark: X = V.Tint,
+  emptyStateTitle: Ie = "No options available",
+  emptyStateDescription: Ne,
   emptyStateIcon: Se,
   disabled: b = !1,
-  className: ge,
-  fieldClassName: Ne,
-  listClassName: Ie,
-  closable: F = !1,
-  header: I,
-  footer: x,
-  onClose: R,
-  onChange: X,
-  dismissRef: xe,
-  onFooterClick: Y,
-  open: P,
-  onOpenChange: ee,
-  onSearchQueryChange: le,
-  customMultiSelectTagsRenderer: L
+  className: xe,
+  fieldClassName: we,
+  listClassName: ye,
+  closable: L = !1,
+  header: x,
+  footer: w,
+  onClose: Y,
+  onChange: P,
+  dismissRef: Te,
+  onFooterClick: ee,
+  open: le,
+  onOpenChange: te,
+  onSearchQueryChange: ne,
+  customMultiSelectTagsRenderer: $
 }) => {
-  const we = Ue(), u = se || we, te = `list-${u}`, ne = V === O.Small, [ye, Te] = z(!1), E = P !== void 0, d = E ? !!P : ye, c = f(
+  const Ae = Ge(), c = me || Ae, re = `list-${c}`, ie = v ? `${c}-error` : void 0, ae = !v && Q ? `${c}-caption` : void 0, oe = q === D.Small, [ke, Oe] = U(!1), M = le !== void 0, f = M ? !!le : ke, d = m(
     (e) => {
-      E || Te(e), ee?.(e);
+      M || Oe(e), te?.(e);
     },
-    [E, ee]
-  ), [h, Ae] = z(""), M = f(
+    [M, te]
+  ), [h, De] = U(""), B = m(
     (e) => {
-      e !== h && (Ae(e || ""), le?.(e || ""));
+      e !== h && (De(e || ""), ne?.(e || ""));
     },
-    [le, h]
-  ), $ = D !== void 0, [ke, Oe] = z(ce), v = $ ? D : ke, r = m(() => n ? Array.isArray(v) ? v : [] : typeof v == "string" ? [v] : [], [v, n]), w = m(() => {
+    [ne, h]
+  ), E = F !== void 0, [Fe, Le] = U(ue), C = E ? F : Fe, r = u(() => n ? Array.isArray(C) ? C : [] : typeof C == "string" ? [C] : [], [C, n]), y = u(() => {
     const e = h.trim().toLowerCase();
-    return e ? a.filter((t) => t.label.toLowerCase().includes(e)) : a;
-  }, [a, h]);
-  Ve(() => {
-    d || M("");
-  }, [d, M]);
-  const s = f(
+    return e ? i.filter((t) => t.label.toLowerCase().includes(e)) : i;
+  }, [i, h]);
+  He(() => {
+    f || B("");
+  }, [f, B]);
+  const s = m(
     (e) => {
-      $ || Oe(e), X?.(e);
+      E || Le(e), P?.(e);
     },
-    [$, X]
-  ), _ = f(
+    [E, P]
+  ), _ = m(
     (e) => {
       if (n) {
         const t = new Set(r);
         t.has(e) ? t.delete(e) : t.add(e), s(Array.from(t));
         return;
       }
-      s(e), c(!1);
+      s(e), d(!1);
     },
-    [n, s, c, r]
-  ), y = f(
+    [n, s, d, r]
+  ), T = m(
     (e, t) => {
       if (e.stopPropagation(), !n) {
         s("");
         return;
       }
-      const k = r.filter((Ke) => Ke !== t);
-      s(k);
+      const O = r.filter((Ue) => Ue !== t);
+      s(O);
     },
     [n, r, s]
-  ), o = m(
-    () => w.filter((e) => !e.disabled),
-    [w]
-  ), B = m(
+  ), o = u(
+    () => y.filter((e) => !e.disabled),
+    [y]
+  ), j = u(
     () => o.filter((e) => r.includes(e.value)).length,
     [o, r]
-  ), { allSelectedInFiltered: K, someSelectedInFiltered: De } = m(() => {
-    const e = o.length > 0 && B === o.length;
+  ), { allSelectedInFiltered: K, someSelectedInFiltered: $e } = u(() => {
+    const e = o.length > 0 && j === o.length;
     return {
       allSelectedInFiltered: e,
-      someSelectedInFiltered: B > 0 && !e
+      someSelectedInFiltered: j > 0 && !e
     };
-  }, [o, B]), Fe = f(() => {
+  }, [o, j]), Me = m(() => {
     if (!(!n || o.length === 0))
       if (K) {
         const e = new Set(o.map((t) => t.value));
@@ -133,126 +134,126 @@ const zl = ({
     o,
     r,
     s
-  ]), T = r.length > 0, A = !n && T ? r[0] : void 0, i = m(
-    () => A ? a.find((e) => e.value === A) ?? a.flatMap((e) => e.children ?? []).find((e) => e.value === A) : void 0,
-    [a, A]
-  ), C = i ? q ? `${q} ${i.label}` : i.label : void 0, Le = ll(), j = n && be && !L && !Le, S = m(() => n ? T ? j ? /* @__PURE__ */ l(
-    tl,
+  ]), A = r.length > 0, k = !n && A ? r[0] : void 0, a = u(
+    () => k ? i.find((e) => e.value === k) ?? i.flatMap((e) => e.children ?? []).find((e) => e.value === k) : void 0,
+    [i, k]
+  ), g = a ? G ? `${G} ${a.label}` : a.label : void 0, Be = rl(), z = n && ge && !$ && !Be, I = u(() => n ? A ? z ? /* @__PURE__ */ l(
+    il,
     {
-      options: a,
+      options: i,
       selectedValues: r,
-      handleRemoveTag: y
+      handleRemoveTag: T
     }
-  ) : /* @__PURE__ */ l("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: L?.(
-    a,
+  ) : /* @__PURE__ */ l("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: $?.(
+    i,
     r,
-    y
+    T
   ) ?? /* @__PURE__ */ l(
-    nl,
+    al,
     {
-      options: a,
+      options: i,
       selectedValues: r,
-      handleRemoveTag: y
+      handleRemoveTag: T
     }
-  ) }) : null : !i || !i.labelNode && !i.description ? null : /* @__PURE__ */ g("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+  ) }) : null : !a || !a.labelNode && !a.description ? null : /* @__PURE__ */ N("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
     /* @__PURE__ */ l(
-      We,
+      Re,
       {
-        text: i.labelNode ?? C
+        text: a.labelNode ?? g
       }
     ),
-    i.description && /* @__PURE__ */ l("span", { className: "truncate text-secondary dial-tiny-text", children: i.description })
+    a.description && /* @__PURE__ */ l("span", { className: "truncate text-secondary dial-tiny-text", children: a.description })
   ] }), [
-    j,
-    L,
-    y,
+    z,
+    $,
     T,
+    A,
     n,
-    a,
-    C,
+    i,
+    g,
     r,
-    i
-  ]), Ee = n || S ? "" : C || (G && D ? G : ""), Me = typeof N?.label == "string" ? N.label : void 0, $e = S ? [
-    oe(Q, Me),
-    n ? r.map((e) => a.find((t) => t.value === e)?.label ?? e).join(", ") : C
-  ].filter(Boolean).join(", ") || void 0 : oe(Q);
-  qe(xe, () => ({
+    a
+  ]), Ee = n || I ? "" : g || (H && F ? H : ""), _e = typeof S?.label == "string" ? S.label : void 0, je = I ? [
+    fe(W, _e),
+    n ? r.map((e) => i.find((t) => t.value === e)?.label ?? e).join(", ") : g
+  ].filter(Boolean).join(", ") || void 0 : fe(W);
+  Qe(Te, () => ({
     dismiss: () => {
-      c(!1);
+      d(!1);
     }
   }));
-  const _e = f(
+  const Ke = m(
     (e) => {
-      b || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d || c(!0));
+      b || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), f || d(!0));
     },
-    [b, d, c]
-  ), Be = () => /* @__PURE__ */ g(
+    [b, f, d]
+  ), ze = () => /* @__PURE__ */ N(
     "div",
     {
-      id: te,
+      id: re,
       role: "listbox",
       "aria-multiselectable": n || void 0,
-      className: ol,
+      className: dl,
       children: [
-        I && /* @__PURE__ */ l(je, { children: typeof I == "function" ? I() : I }),
-        (W || F) && (a.length > sl || !!h) && /* @__PURE__ */ g("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
-          W && /* @__PURE__ */ l(
-            re,
+        x && /* @__PURE__ */ l(Ve, { children: typeof x == "function" ? x() : x }),
+        (Z || L) && (i.length > fl || !!h) && /* @__PURE__ */ N("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
+          Z && /* @__PURE__ */ l(
+            se,
             {
-              id: `search-${u}`,
-              size: me,
-              placeholder: Z,
-              "aria-label": Z || "Search options",
-              onChange: (e) => M(e),
+              id: `search-${c}`,
+              size: ve,
+              placeholder: J,
+              "aria-label": J || "Search options",
+              onChange: (e) => B(e),
               value: h,
-              iconBefore: cl,
+              iconBefore: ml,
               containerClassName: "w-full"
             }
           ),
-          F && /* @__PURE__ */ l(
-            Xe,
+          L && /* @__PURE__ */ l(
+            el,
             {
               "aria-label": "Close select",
               className: "shrink-0",
-              size: O.Small,
-              icon: dl,
+              size: D.Small,
+              icon: ul,
               onClick: (e) => {
-                R?.(e), c(!1);
+                Y?.(e), d(!1);
               }
             }
           )
         ] }),
-        n && ue && o.length > 0 && /* @__PURE__ */ l("div", { className: p(fl, "mt-2"), children: /* @__PURE__ */ l(
-          He,
+        n && be && o.length > 0 && /* @__PURE__ */ l("div", { className: p(hl, "mt-2"), children: /* @__PURE__ */ l(
+          Ze,
           {
-            id: `${u}-selectAll`,
-            labelProps: { label: pe },
+            id: `${c}-selectAll`,
+            labelProps: { label: Ce },
             isSelected: K,
-            isIndeterminate: De,
-            onChange: Fe
+            isIndeterminate: $e,
+            onChange: Me
           }
         ) }),
-        /* @__PURE__ */ l("div", { role: "none", className: ml, children: w.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
-          Pe,
+        /* @__PURE__ */ l("div", { role: "none", className: pl, children: y.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
+          tl,
           {
-            icon: Se ?? ul,
-            title: ve,
-            description: Ce
+            icon: Se,
+            title: Ie,
+            description: Ne
           }
-        ) }) : w.map((e) => {
+        ) }) : y.map((e) => {
           const t = r.includes(e.value);
           if (e.children?.length)
             return /* @__PURE__ */ l(
-              rl,
+              ol,
               {
                 opt: e,
                 selectedValues: r,
-                mark: n ? U.Checkbox : J,
+                mark: n ? V.Checkbox : X,
                 onSelect: _
               },
               e.value
             );
-          const k = n ? (
+          const O = n ? (
             /*
               The row itself is the control: one `option` whose state rides on
               `aria-selected`, with a decorative box drawing the check. A real
@@ -261,14 +262,14 @@ const zl = ({
               has the whole row selecting the option.
             */
             /* @__PURE__ */ l(
-              ie,
+              de,
               {
-                id: `${u}-${e.value}`,
+                id: `${c}-${e.value}`,
                 role: "option",
                 "aria-selected": t,
                 "aria-disabled": !!e.disabled,
                 disabled: e.disabled,
-                mark: U.Checkbox,
+                mark: V.Checkbox,
                 selected: t,
                 icon: e.icon,
                 label: e.labelNode ?? e.label,
@@ -278,13 +279,13 @@ const zl = ({
               }
             )
           ) : /* @__PURE__ */ l(
-            ie,
+            de,
             {
               role: "option",
               "aria-selected": t,
               "aria-disabled": !!e.disabled,
               disabled: e.disabled,
-              mark: J,
+              mark: X,
               selected: t,
               ellipsisLabel: !0,
               icon: e.icon,
@@ -294,108 +295,110 @@ const zl = ({
               onClick: () => !e.disabled && _(e.value)
             }
           );
-          return /* @__PURE__ */ l(Ge, { children: e.interactiveTooltip ? /* @__PURE__ */ l(
-            Ze,
+          return /* @__PURE__ */ l(We, { children: e.interactiveTooltip ? /* @__PURE__ */ l(
+            Xe,
             {
               asChild: !0,
               placement: e.interactiveTooltip.placement,
               content: e.interactiveTooltip.content,
               contentClassName: e.interactiveTooltip.contentClassName,
-              children: k
+              children: O
             }
-          ) : k }, e.value);
+          ) : O }, e.value);
         }) }),
-        x && /* @__PURE__ */ l(
+        w && /* @__PURE__ */ l(
           "div",
           {
             onClick: (e) => {
-              Y?.(e), Y && c(!1);
+              ee?.(e), ee && d(!1);
             },
-            children: typeof x == "function" ? x() : x
+            children: typeof w == "function" ? w() : w
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ N(
     "div",
     {
       className: p(
         "flex w-full flex-col gap-2",
-        ge,
-        hl.select
+        xe,
+        vl.select
       ),
       children: [
-        N && /* @__PURE__ */ l(Ye, { ...N, htmlFor: u }),
-        /* @__PURE__ */ g("div", { className: "flex flex-col gap-1", children: [
+        S && /* @__PURE__ */ l(ll, { ...S, htmlFor: c }),
+        /* @__PURE__ */ N("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ l(
-            Qe,
+            Je,
             {
-              open: d,
-              onOpenChange: c,
+              open: f,
+              onOpenChange: d,
               disabled: b,
-              closable: F,
-              onClose: R,
+              closable: L,
+              onClose: Y,
               placement: "bottom-start",
               allowedPlacements: ["bottom-start", "top-start"],
-              listClassName: p(il, Ie),
+              listClassName: p(cl, ye),
               className: "w-full",
-              renderOverlay: Be,
+              renderOverlay: ze,
               children: /* @__PURE__ */ l(
-                re,
+                se,
                 {
-                  id: u,
-                  size: V,
+                  id: c,
+                  size: q,
                   disabled: b,
-                  invalid: he,
+                  invalid: R,
                   value: Ee,
-                  placeholder: S ? void 0 : de,
+                  placeholder: I ? void 0 : he,
                   readOnly: !0,
-                  iconBefore: n ? void 0 : i?.icon,
+                  iconBefore: n ? void 0 : a?.icon,
                   iconAfter: /* @__PURE__ */ l(
-                    ze,
+                    qe,
                     {
-                      size: ne ? ae.SM : ae.MD,
-                      stroke: el,
+                      size: oe ? ce.SM : ce.MD,
+                      stroke: nl,
                       "aria-hidden": "true",
                       className: p(
-                        al,
-                        d && "rotate-180"
+                        sl,
+                        f && "rotate-180"
                       )
                     }
                   ),
                   role: "combobox",
                   "aria-haspopup": "listbox",
-                  "aria-expanded": d,
-                  "aria-controls": te,
+                  "aria-expanded": f,
+                  "aria-controls": re,
                   "aria-autocomplete": "none",
-                  "aria-label": $e,
+                  "aria-label": je,
+                  "aria-describedby": [pe, ie, ae].filter(Boolean).join(" ") || void 0,
+                  "aria-invalid": v || R ? !0 : void 0,
                   containerClassName: "w-full",
                   wrapperClassName: p(
                     !b && "cursor-pointer",
-                    n && T && !j && [
+                    n && A && !z && [
                       "!h-auto flex-wrap py-2",
-                      ne ? "min-h-[24px]" : "min-h-[40px]"
+                      oe ? "min-h-[24px]" : "min-h-[40px]"
                     ],
-                    Ne
+                    we
                   ),
                   className: p(
                     "cursor-pointer",
-                    S && "w-0 min-w-0 flex-none p-0"
+                    I && "w-0 min-w-0 flex-none p-0"
                   ),
-                  onKeyDown: _e,
-                  children: S
+                  onKeyDown: Ke,
+                  children: I
                 }
               )
             }
           ),
-          /* @__PURE__ */ l(Je, { text: H }),
-          !H && /* @__PURE__ */ l(Re, { text: fe })
+          /* @__PURE__ */ l(Ye, { id: ie, text: v }),
+          !v && /* @__PURE__ */ l(Pe, { id: ae, text: Q })
         ] })
       ]
     }
   );
 };
 export {
-  zl as Select
+  Vl as Select
 };