@epam/ai-dial-ui-kit 0.15.0-dev.6 → 0.15.0-dev.7

package/dist/components/New/SegmentedControl/SegmentedControl.js

@@ -1,24 +1,25 @@
-import { jsx as x, jsxs as C } from "react/jsx-runtime";
-import { useRef as I, useCallback as k } from "react";
+import { jsx as v, jsxs as x } from "react/jsx-runtime";
+import { useRef as k, useCallback as A } from "react";
 import { mergeClasses as u } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as w } from "../../../utils/accessible-name.js";
-import { NAVIGATION_KEYS as h, segmentDisabledSelectedClassName as A, segmentDisabledUnselectedClassName as D, segmentSelectedInteractiveClassName as S, segmentUnselectedInteractiveClassName as y, segmentSelectedClassName as U, segmentUnselectedClassName as K, segmentClassName as R, containerClassName as j } from "./constants.js";
+import { resolveAccessibleName as S } from "../../../utils/accessible-name.js";
+import { NAVIGATION_KEYS as w, segmentDisabledSelectedClassName as D, segmentDisabledUnselectedClassName as h, segmentSelectedInteractiveClassName as y, segmentUnselectedInteractiveClassName as K, segmentSelectedClassName as U, segmentUnselectedClassName as L, segmentClassName as R, containerClassName as _ } from "./constants.js";
+import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
 const M = ({
   items: l,
   value: r,
   onChange: c,
   disabled: o,
-  className: f,
-  segmentClassName: g,
-  "aria-label": N
+  className: g,
+  segmentClassName: p,
+  "aria-label": C
 }) => {
-  const m = I({}), d = l.find((e) => e.value === r), p = d && !d.disabled ? d.value : l.find((e) => !e.disabled)?.value, v = k(
+  const b = k({}), d = l.find((e) => e.value === r), I = d && !d.disabled ? d.value : l.find((e) => !e.disabled)?.value, N = A(
     (e) => {
-      if (o || !h.includes(e.key)) return;
-      const a = l.filter((b) => !b.disabled);
+      if (o || !w.includes(e.key)) return;
+      const a = l.filter((m) => !m.disabled);
       if (a.length === 0) return;
       const s = Math.max(
-        a.findIndex((b) => b.value === r),
+        a.findIndex((m) => m.value === r),
         0
       ), t = a.length - 1;
       let n = s;
@@ -40,41 +41,46 @@ const M = ({
       }
       e.preventDefault();
       const i = a[n];
-      m.current[i.value]?.focus(), i.value !== r && c(i.value);
+      b.current[i.value]?.focus(), i.value !== r && c(i.value);
     },
     [o, l, r, c]
   );
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ v(
     "div",
     {
       role: "radiogroup",
-      "aria-label": N,
+      "aria-label": C,
       "aria-disabled": o || void 0,
-      onKeyDown: v,
-      className: u(j, f),
+      onKeyDown: N,
+      className: u(
+        f.segmentedControl,
+        _,
+        g
+      ),
       children: l.map((e) => {
         const a = e.value === r, s = o || e.disabled;
-        return /* @__PURE__ */ C(
+        return /* @__PURE__ */ x(
           "button",
           {
             ref: (t) => {
-              m.current[e.value] = t;
+              b.current[e.value] = t;
             },
             type: "button",
             role: "radio",
             "aria-checked": a,
-            "aria-label": w(
+            "aria-label": S(
               e["aria-label"],
               typeof e.label == "string" ? e.label : void 0
             ),
-            tabIndex: e.value === p ? 0 : -1,
+            tabIndex: e.value === I ? 0 : -1,
             disabled: s,
             onClick: () => c(e.value),
             className: u(
+              f.segmentedControlItem,
               R,
-              a ? U : K,
-              s ? a ? A : D : a ? S : y,
-              g
+              a ? U : L,
+              s ? a ? D : h : a ? y : K,
+              p
             ),
             children: [
               e.icon,

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

@@ -1,6 +1,6 @@
-import { jsx as l, jsxs as g, Fragment as Be } from "react/jsx-runtime";
-import { IconChevronDown as _e } from "@tabler/icons-react";
-import { useId as je, useState as j, useCallback as f, useMemo as m, useEffect as Ke, useImperativeHandle as ze, Fragment as Ue } from "react";
+import { jsx as l, jsxs as S, Fragment as _e } from "react/jsx-runtime";
+import { IconChevronDown as Be } from "@tabler/icons-react";
+import { useId as Ke, useState as K, useCallback as f, useMemo as m, useEffect as je, useImperativeHandle as ze, Fragment as Ue } from "react";
 import { Checkbox as Ve } from "../Checkbox/Checkbox.js";
 import { Dropdown as qe } from "../Dropdown/Dropdown.js";
 import { EllipsisTooltip as Ge } from "../EllipsisTooltip/EllipsisTooltip.js";
@@ -13,73 +13,74 @@ import { DialNoDataContent as Je } from "../../NoDataContent/NoDataContent.js";
 import { DIAL_KIT_ICON_STROKE as Xe } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as re } from "../../../constants/icon.js";
 import { MenuItem as ae } from "../MenuItem/MenuItem.js";
-import { MenuItemMark as K } from "../../../types/menu-item.js";
-import { ElementSize as O } from "../../../types/size.js";
+import { MenuItemMark as j } from "../../../types/menu-item.js";
+import { ElementSize as k } from "../../../types/size.js";
 import { resolveAccessibleName as ie } from "../../../utils/accessible-name.js";
 import { mergeClasses as p } from "../../../utils/merge-classes.js";
 import { MultiSelectTags as Ye } from "./MultiSelectTags.js";
 import { SelectSubMenuItem as Pe } from "./SelectSubMenuItem.js";
 import { selectFieldIconClassName as el, selectListWidthClassName as ll, selectOverlayBaseClassName as tl, selectSearchThreshold as nl, selectSearchIcon as rl, selectCloseIcon as al, selectOptionBaseClassName as il, selectOptionsScrollClassName as ol, selectEmptyStateIcon as sl } from "./constants.js";
-const Fl = ({
+import { DIAL_KIT_CLASS as cl } from "../../../constants/public-class-names.js";
+const El = ({
   options: a,
   multiple: n = !1,
   id: oe,
-  value: A,
+  value: O,
   defaultValue: se,
-  size: z = O.Standard,
+  size: z = k.Standard,
   prefix: U,
   customSelectedValue: V,
   placeholder: ce = "Select...",
-  labelProps: S,
+  labelProps: g,
   error: q,
   caption: de,
   ariaLabel: G,
   searchable: H = !1,
-  searchSize: fe = O.Standard,
+  searchSize: fe = k.Standard,
   searchPlaceholder: Q,
   selectAll: me = !1,
   invalid: ue,
   selectAllLabel: he = "Select all",
-  selectedOptionMark: R = K.Tint,
+  selectedOptionMark: R = j.Tint,
   emptyStateTitle: pe = "No options available",
   emptyStateDescription: ve,
   emptyStateIcon: be,
   disabled: v = !1,
   className: Ce,
   fieldClassName: Ne,
-  listClassName: ge,
+  listClassName: Se,
   closable: D = !1,
-  header: x,
-  footer: I,
+  header: I,
+  footer: x,
   onClose: W,
   onChange: Z,
-  dismissRef: Se,
+  dismissRef: ge,
   onFooterClick: J,
   open: X,
   onOpenChange: Y,
   onSearchQueryChange: P,
   customMultiSelectTagsRenderer: ee
 }) => {
-  const xe = je(), u = oe || xe, le = `list-${u}`, te = z === O.Small, [Ie, we] = j(!1), F = X !== void 0, d = F ? !!X : Ie, c = f(
+  const Ie = Ke(), u = oe || Ie, le = `list-${u}`, te = z === k.Small, [xe, we] = K(!1), F = X !== void 0, d = F ? !!X : xe, c = f(
     (e) => {
       F || we(e), Y?.(e);
     },
     [F, Y]
-  ), [h, ye] = j(""), L = f(
+  ), [h, ye] = K(""), L = f(
     (e) => {
       e !== h && (ye(e || ""), P?.(e || ""));
     },
     [P, h]
-  ), E = A !== void 0, [Te, ke] = j(se), b = E ? A : Te, r = m(() => n ? Array.isArray(b) ? b : [] : typeof b == "string" ? [b] : [], [b, n]), w = m(() => {
+  ), E = O !== void 0, [Te, Ae] = K(se), b = E ? O : Te, r = m(() => n ? Array.isArray(b) ? b : [] : typeof b == "string" ? [b] : [], [b, n]), w = m(() => {
     const e = h.trim().toLowerCase();
     return e ? a.filter((t) => t.label.toLowerCase().includes(e)) : a;
   }, [a, h]);
-  Ke(() => {
+  je(() => {
     d || L("");
   }, [d, L]);
   const s = f(
     (e) => {
-      E || ke(e), Z?.(e);
+      E || Ae(e), Z?.(e);
     },
     [E, Z]
   ), $ = f(
@@ -98,25 +99,25 @@ const Fl = ({
         s("");
         return;
       }
-      const k = r.filter((Me) => Me !== t);
-      s(k);
+      const A = r.filter((Me) => Me !== t);
+      s(A);
     },
     [n, r, s]
   ), o = m(
     () => w.filter((e) => !e.disabled),
     [w]
-  ), B = m(
+  ), _ = m(
     () => o.filter((e) => r.includes(e.value)).length,
     [o, r]
-  ), { allSelectedInFiltered: _, someSelectedInFiltered: Oe } = m(() => {
-    const e = o.length > 0 && B === o.length;
+  ), { allSelectedInFiltered: B, someSelectedInFiltered: ke } = m(() => {
+    const e = o.length > 0 && _ === o.length;
     return {
       allSelectedInFiltered: e,
-      someSelectedInFiltered: B > 0 && !e
+      someSelectedInFiltered: _ > 0 && !e
     };
-  }, [o, B]), Ae = f(() => {
+  }, [o, _]), Oe = f(() => {
     if (!(!n || o.length === 0))
-      if (_) {
+      if (B) {
         const e = new Set(o.map((t) => t.value));
         s(r.filter((t) => !e.has(t)));
       } else {
@@ -124,7 +125,7 @@ const Fl = ({
         o.forEach((t) => e.add(t.value)), s(Array.from(e));
       }
   }, [
-    _,
+    B,
     n,
     o,
     r,
@@ -143,7 +144,7 @@ const Fl = ({
       selectedValues: r,
       handleRemoveTag: M
     }
-  ) }) : null : !i || !i.labelNode && !i.description ? null : /* @__PURE__ */ g("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(
       Ge,
       {
@@ -160,11 +161,11 @@ const Fl = ({
     C,
     r,
     i
-  ]), De = n || N ? "" : C || (V && A ? V : ""), Fe = typeof S?.label == "string" ? S.label : void 0, Le = N ? [
+  ]), De = n || N ? "" : C || (V && O ? V : ""), Fe = typeof g?.label == "string" ? g.label : void 0, Le = N ? [
     ie(G, Fe),
     n ? r.map((e) => a.find((t) => t.value === e)?.label ?? e).join(", ") : C
   ].filter(Boolean).join(", ") || void 0 : ie(G);
-  ze(Se, () => ({
+  ze(ge, () => ({
     dismiss: () => {
       c(!1);
     }
@@ -174,7 +175,7 @@ const Fl = ({
       v || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d || c(!0));
     },
     [v, d, c]
-  ), $e = () => /* @__PURE__ */ g(
+  ), $e = () => /* @__PURE__ */ S(
     "div",
     {
       id: le,
@@ -182,8 +183,8 @@ const Fl = ({
       "aria-multiselectable": n || void 0,
       className: tl,
       children: [
-        x && /* @__PURE__ */ l(Be, { children: typeof x == "function" ? x() : x }),
-        (H || D) && (a.length > nl || !!h) && /* @__PURE__ */ g("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
+        I && /* @__PURE__ */ l(_e, { children: typeof I == "function" ? I() : I }),
+        (H || D) && (a.length > nl || !!h) && /* @__PURE__ */ S("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
           H && /* @__PURE__ */ l(
             ne,
             {
@@ -202,7 +203,7 @@ const Fl = ({
             {
               "aria-label": "Close select",
               className: "shrink-0",
-              size: O.Small,
+              size: k.Small,
               icon: al,
               onClick: (e) => {
                 W?.(e), c(!1);
@@ -215,9 +216,9 @@ const Fl = ({
           {
             id: `${u}-selectAll`,
             labelProps: { label: he },
-            isSelected: _,
-            isIndeterminate: Oe,
-            onChange: Ae
+            isSelected: B,
+            isIndeterminate: ke,
+            onChange: Oe
           }
         ) }),
         /* @__PURE__ */ l("div", { role: "none", className: ol, children: w.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
@@ -235,12 +236,12 @@ const Fl = ({
               {
                 opt: e,
                 selectedValues: r,
-                mark: n ? K.Checkbox : R,
+                mark: n ? j.Checkbox : R,
                 onSelect: $
               },
               e.value
             );
-          const k = n ? (
+          const A = n ? (
             /*
               The row itself is the control: one `option` whose state rides on
               `aria-selected`, with a decorative box drawing the check. A real
@@ -256,7 +257,7 @@ const Fl = ({
                 "aria-selected": t,
                 "aria-disabled": !!e.disabled,
                 disabled: e.disabled,
-                mark: K.Checkbox,
+                mark: j.Checkbox,
                 selected: t,
                 icon: e.icon,
                 label: e.labelNode ?? e.label,
@@ -289,91 +290,101 @@ const Fl = ({
               placement: e.interactiveTooltip.placement,
               content: e.interactiveTooltip.content,
               contentClassName: e.interactiveTooltip.contentClassName,
-              children: k
+              children: A
             }
-          ) : k }, e.value);
+          ) : A }, e.value);
         }) }),
-        I && /* @__PURE__ */ l(
+        x && /* @__PURE__ */ l(
           "div",
           {
             onClick: (e) => {
               J?.(e), J && c(!1);
             },
-            children: typeof I == "function" ? I() : I
+            children: typeof x == "function" ? x() : x
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ g("div", { className: p("flex w-full flex-col gap-2", Ce), children: [
-    S && /* @__PURE__ */ l(Ze, { ...S, htmlFor: u }),
-    /* @__PURE__ */ g("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ l(
-        qe,
-        {
-          open: d,
-          onOpenChange: c,
-          disabled: v,
-          closable: D,
-          onClose: W,
-          placement: "bottom-start",
-          allowedPlacements: ["bottom-start", "top-start"],
-          listClassName: p(ll, ge),
-          className: "w-full",
-          renderOverlay: $e,
-          children: /* @__PURE__ */ l(
-            ne,
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      className: p(
+        cl.select,
+        "flex w-full flex-col gap-2",
+        Ce
+      ),
+      children: [
+        g && /* @__PURE__ */ l(Ze, { ...g, htmlFor: u }),
+        /* @__PURE__ */ S("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ l(
+            qe,
             {
-              id: u,
-              size: z,
+              open: d,
+              onOpenChange: c,
               disabled: v,
-              invalid: ue,
-              value: De,
-              placeholder: N ? void 0 : ce,
-              readOnly: !0,
-              iconBefore: n ? void 0 : i?.icon,
-              iconAfter: /* @__PURE__ */ l(
-                _e,
+              closable: D,
+              onClose: W,
+              placement: "bottom-start",
+              allowedPlacements: ["bottom-start", "top-start"],
+              listClassName: p(ll, Se),
+              className: "w-full",
+              renderOverlay: $e,
+              children: /* @__PURE__ */ l(
+                ne,
                 {
-                  size: te ? re.SM : re.MD,
-                  stroke: Xe,
-                  "aria-hidden": "true",
+                  id: u,
+                  size: z,
+                  disabled: v,
+                  invalid: ue,
+                  value: De,
+                  placeholder: N ? void 0 : ce,
+                  readOnly: !0,
+                  iconBefore: n ? void 0 : i?.icon,
+                  iconAfter: /* @__PURE__ */ l(
+                    Be,
+                    {
+                      size: te ? re.SM : re.MD,
+                      stroke: Xe,
+                      "aria-hidden": "true",
+                      className: p(
+                        el,
+                        d && "rotate-180"
+                      )
+                    }
+                  ),
+                  role: "combobox",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": d,
+                  "aria-controls": le,
+                  "aria-autocomplete": "none",
+                  "aria-label": Le,
+                  containerClassName: "w-full",
+                  wrapperClassName: p(
+                    !v && "cursor-pointer",
+                    n && y && [
+                      "!h-auto flex-wrap py-1.5",
+                      te ? "min-h-[24px]" : "min-h-[40px]"
+                    ],
+                    Ne
+                  ),
                   className: p(
-                    el,
-                    d && "rotate-180"
-                  )
+                    "cursor-pointer",
+                    N && "w-0 min-w-0 flex-none p-0"
+                  ),
+                  onKeyDown: Ee,
+                  children: N
                 }
-              ),
-              role: "combobox",
-              "aria-haspopup": "listbox",
-              "aria-expanded": d,
-              "aria-controls": le,
-              "aria-autocomplete": "none",
-              "aria-label": Le,
-              containerClassName: "w-full",
-              wrapperClassName: p(
-                !v && "cursor-pointer",
-                n && y && [
-                  "!h-auto flex-wrap py-1.5",
-                  te ? "min-h-[24px]" : "min-h-[40px]"
-                ],
-                Ne
-              ),
-              className: p(
-                "cursor-pointer",
-                N && "w-0 min-w-0 flex-none p-0"
-              ),
-              onKeyDown: Ee,
-              children: N
+              )
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ l(Qe, { text: q }),
-      !q && /* @__PURE__ */ l(Re, { text: de })
-    ] })
-  ] });
+          ),
+          /* @__PURE__ */ l(Qe, { text: q }),
+          !q && /* @__PURE__ */ l(Re, { text: de })
+        ] })
+      ]
+    }
+  );
 };
 export {
-  Fl as Select
+  El as Select
 };

package/dist/components/New/Switch/Switch.js

@@ -1,11 +1,12 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { useId as b, useCallback as g } from "react";
 import { ElementSize as x } from "../../../types/size.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as y } from "../../../utils/accessible-name.js";
 import { Label as v } from "../Label/Label.js";
-const S = ({
-  id: m,
+import { DIAL_KIT_CLASS as N } from "../../../constants/public-class-names.js";
+const C = ({
+  id: d,
   labelProps: o,
   isOn: t = !1,
   disabled: l,
@@ -14,72 +15,82 @@ const S = ({
   className: u,
   ...i
 }) => {
-  const p = b(), s = m ?? p, n = c ? `${s}-caption` : void 0, f = g(
+  const p = b(), s = d ?? p, n = c ? `${s}-caption` : void 0, f = g(
     (h) => {
       a?.(h.target.checked);
     },
     [a]
   );
-  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ d("div", { className: r("flex items-center gap-2", u), children: [
-      /* @__PURE__ */ e(
-        "input",
-        {
-          ...i,
-          type: "checkbox",
-          role: "switch",
-          id: s,
-          checked: t,
-          "aria-checked": t,
-          disabled: l,
-          onChange: f,
-          "aria-label": y(
-            typeof o?.label != "string" ? i["aria-label"] : void 0
+  return /* @__PURE__ */ m("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: r(
+          N.switch,
+          "flex items-center gap-2",
+          u
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ...i,
+              type: "checkbox",
+              role: "switch",
+              id: s,
+              checked: t,
+              "aria-checked": t,
+              disabled: l,
+              onChange: f,
+              "aria-label": y(
+                typeof o?.label != "string" ? i["aria-label"] : void 0
+              ),
+              "aria-describedby": n,
+              className: "peer sr-only"
+            }
           ),
-          "aria-describedby": n,
-          className: "peer sr-only"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "label",
-        {
-          htmlFor: s,
-          className: r(
-            "flex h-[18px] w-[36px] shrink-0 items-center rounded-full p-0.5 transition-colors duration-200",
-            "peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
-            t ? "justify-end" : "justify-start",
-            l ? "cursor-not-allowed bg-control-disable-primary" : r(
-              "cursor-pointer",
-              t ? "bg-control-accent hover:bg-control-accent-hover" : "bg-control-neutral-default hover:bg-control-neutral-hover-strong"
-            )
+          /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: s,
+              className: r(
+                "flex h-[18px] w-[36px] shrink-0 items-center rounded-full p-0.5 transition-colors duration-200",
+                "peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
+                t ? "justify-end" : "justify-start",
+                l ? "cursor-not-allowed bg-control-disable-primary" : r(
+                  "cursor-pointer",
+                  t ? "bg-control-accent hover:bg-control-accent-hover" : "bg-control-neutral-default hover:bg-control-neutral-hover-strong"
+                )
+              ),
+              children: /* @__PURE__ */ e(
+                "span",
+                {
+                  className: r(
+                    "size-3.5 shrink-0 rounded-full",
+                    l ? "bg-control-disable-secondary" : "bg-control-neutral"
+                  )
+                }
+              )
+            }
           ),
-          children: /* @__PURE__ */ e(
-            "span",
+          o && /* @__PURE__ */ e(
+            v,
             {
+              size: x.Standard,
+              ...o,
+              htmlFor: s,
               className: r(
-                "size-3.5 shrink-0 rounded-full",
-                l ? "bg-control-disable-secondary" : "bg-control-neutral"
+                // `Label` defaults to the secondary colour; the switch's own label
+                // has always been primary while the control is usable.
+                "py-[1px]",
+                l ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                o.className
               )
             }
           )
-        }
-      ),
-      o && /* @__PURE__ */ e(
-        v,
-        {
-          size: x.Standard,
-          ...o,
-          htmlFor: s,
-          className: r(
-            // `Label` defaults to the secondary colour; the switch's own label
-            // has always been primary while the control is usable.
-            "py-[1px]",
-            l ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
-            o.className
-          )
-        }
-      )
-    ] }),
+        ]
+      }
+    ),
     c && /* @__PURE__ */ e(
       "span",
       {
@@ -91,5 +102,5 @@ const S = ({
   ] });
 };
 export {
-  S as Switch
+  C as Switch
 };