@epam/ai-dial-ui-kit 0.14.0-dev.32 → 0.14.0-dev.33

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

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