@epam/ai-dial-ui-kit 0.14.0-dev.4 → 0.14.0-dev.41

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

@@ -0,0 +1,92 @@
+import { jsx as x, jsxs as C } from "react/jsx-runtime";
+import { useRef as I, useCallback as k } 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";
+const M = ({
+  items: l,
+  value: r,
+  onChange: c,
+  disabled: o,
+  className: f,
+  segmentClassName: g,
+  "aria-label": N
+}) => {
+  const m = I({}), d = l.find((e) => e.value === r), p = d && !d.disabled ? d.value : l.find((e) => !e.disabled)?.value, v = k(
+    (e) => {
+      if (o || !h.includes(e.key)) return;
+      const a = l.filter((b) => !b.disabled);
+      if (a.length === 0) return;
+      const s = Math.max(
+        a.findIndex((b) => b.value === r),
+        0
+      ), t = a.length - 1;
+      let n = s;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          n = s === t ? 0 : s + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          n = s === 0 ? t : s - 1;
+          break;
+        case "Home":
+          n = 0;
+          break;
+        case "End":
+          n = t;
+          break;
+      }
+      e.preventDefault();
+      const i = a[n];
+      m.current[i.value]?.focus(), i.value !== r && c(i.value);
+    },
+    [o, l, r, c]
+  );
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": N,
+      "aria-disabled": o || void 0,
+      onKeyDown: v,
+      className: u(j, f),
+      children: l.map((e) => {
+        const a = e.value === r, s = o || e.disabled;
+        return /* @__PURE__ */ C(
+          "button",
+          {
+            ref: (t) => {
+              m.current[e.value] = t;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": a,
+            "aria-label": w(
+              e["aria-label"],
+              typeof e.label == "string" ? e.label : void 0
+            ),
+            tabIndex: e.value === p ? 0 : -1,
+            disabled: s,
+            onClick: () => c(e.value),
+            className: u(
+              R,
+              a ? U : K,
+              s ? a ? A : D : a ? S : y,
+              g
+            ),
+            children: [
+              e.icon,
+              e.label
+            ]
+          },
+          e.value
+        );
+      })
+    }
+  );
+};
+export {
+  M as SegmentedControl
+};

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

@@ -0,0 +1,19 @@
+const e = [
+  "ArrowRight",
+  "ArrowLeft",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End"
+], t = "inline-flex w-fit items-center gap-1 rounded-full border border-tertiary bg-layer-sunken p-[3px]", a = "flex h-8 min-w-8 grow shrink-0 basis-auto items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 dial-small-text transition-colors duration-200 outline-offset-0 focus-visible:outline focus-visible:outline-focus", o = "bg-layer-raised text-accent shadow-xs", s = "bg-transparent text-secondary", n = "cursor-pointer hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active", r = "cursor-pointer hover:bg-control-accent-alpha-hover hover:text-accent active:bg-control-accent-alpha-active", c = "cursor-not-allowed bg-control-disable-primary text-control-disable-primary shadow-none", l = "cursor-not-allowed bg-transparent text-control-disable-primary";
+export {
+  e as NAVIGATION_KEYS,
+  t as containerClassName,
+  a as segmentClassName,
+  c as segmentDisabledSelectedClassName,
+  l as segmentDisabledUnselectedClassName,
+  o as segmentSelectedClassName,
+  n as segmentSelectedInteractiveClassName,
+  s as segmentUnselectedClassName,
+  r as segmentUnselectedInteractiveClassName
+};

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

@@ -0,0 +1,23 @@
+import { jsx as l, Fragment as i } from "react/jsx-runtime";
+import { Tag as c } from "../Tag/Tag.js";
+const b = ({
+  options: a,
+  selectedValues: n,
+  handleRemoveTag: e
+}) => /* @__PURE__ */ l(i, { children: n.map((r) => {
+  const t = a.find((o) => o.value === r);
+  return /* @__PURE__ */ l(
+    c,
+    {
+      label: t?.label ?? r,
+      closable: !!e,
+      onRemove: (o) => e?.(o, r),
+      icon: t?.icon,
+      className: "max-w-full border border-tertiary"
+    },
+    r
+  );
+}) });
+export {
+  b as MultiSelectTags
+};

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

@@ -0,0 +1,379 @@
+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 { Checkbox as Ve } from "../Checkbox/Checkbox.js";
+import { Dropdown as qe } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as Ge } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { InteractiveTooltip as He } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { ErrorText as Qe, CaptionText as Re } from "../CaptionText/CaptionText.js";
+import { GhostIconButton as We } from "../IconButton/IconButtonWrappers.js";
+import { Input as ne } from "../Input/Input.js";
+import { Label as Ze } from "../Label/Label.js";
+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 { 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 = ({
+  options: a,
+  multiple: n = !1,
+  id: oe,
+  value: A,
+  defaultValue: se,
+  size: z = O.Standard,
+  prefix: U,
+  customSelectedValue: V,
+  placeholder: ce = "Select...",
+  labelProps: S,
+  error: q,
+  caption: de,
+  ariaLabel: G,
+  searchable: H = !1,
+  searchSize: fe = O.Standard,
+  searchPlaceholder: Q,
+  selectAll: me = !1,
+  invalid: ue,
+  selectAllLabel: he = "Select all",
+  selectedOptionMark: R = K.Tint,
+  emptyStateTitle: pe = "No options available",
+  emptyStateDescription: ve,
+  emptyStateIcon: be,
+  disabled: v = !1,
+  className: Ce,
+  fieldClassName: Ne,
+  listClassName: ge,
+  closable: D = !1,
+  header: x,
+  footer: I,
+  onClose: W,
+  onChange: Z,
+  dismissRef: Se,
+  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(
+    (e) => {
+      F || we(e), Y?.(e);
+    },
+    [F, Y]
+  ), [h, ye] = j(""), 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(() => {
+    const e = h.trim().toLowerCase();
+    return e ? a.filter((t) => t.label.toLowerCase().includes(e)) : a;
+  }, [a, h]);
+  Ke(() => {
+    d || L("");
+  }, [d, L]);
+  const s = f(
+    (e) => {
+      E || ke(e), Z?.(e);
+    },
+    [E, Z]
+  ), $ = f(
+    (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);
+    },
+    [n, s, c, r]
+  ), M = f(
+    (e, t) => {
+      if (e.stopPropagation(), !n) {
+        s("");
+        return;
+      }
+      const k = r.filter((Me) => Me !== t);
+      s(k);
+    },
+    [n, r, s]
+  ), o = m(
+    () => w.filter((e) => !e.disabled),
+    [w]
+  ), B = m(
+    () => o.filter((e) => r.includes(e.value)).length,
+    [o, r]
+  ), { allSelectedInFiltered: _, someSelectedInFiltered: Oe } = m(() => {
+    const e = o.length > 0 && B === o.length;
+    return {
+      allSelectedInFiltered: e,
+      someSelectedInFiltered: B > 0 && !e
+    };
+  }, [o, B]), Ae = f(() => {
+    if (!(!n || o.length === 0))
+      if (_) {
+        const e = new Set(o.map((t) => t.value));
+        s(r.filter((t) => !e.has(t)));
+      } else {
+        const e = new Set(r);
+        o.forEach((t) => e.add(t.value)), s(Array.from(e));
+      }
+  }, [
+    _,
+    n,
+    o,
+    r,
+    s
+  ]), y = r.length > 0, T = !n && y ? r[0] : void 0, i = m(
+    () => T ? a.find((e) => e.value === T) ?? a.flatMap((e) => e.children ?? []).find((e) => e.value === T) : void 0,
+    [a, T]
+  ), C = i ? U ? `${U} ${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: ee?.(
+    a,
+    r,
+    M
+  ) ?? /* @__PURE__ */ l(
+    Ye,
+    {
+      options: a,
+      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: [
+    /* @__PURE__ */ l(
+      Ge,
+      {
+        text: i.labelNode ?? C
+      }
+    ),
+    i.description && /* @__PURE__ */ l("span", { className: "truncate text-secondary dial-tiny-text", children: i.description })
+  ] }), [
+    ee,
+    M,
+    y,
+    n,
+    a,
+    C,
+    r,
+    i
+  ]), De = n || N ? "" : C || (V && A ? V : ""), Fe = typeof S?.label == "string" ? S.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, () => ({
+    dismiss: () => {
+      c(!1);
+    }
+  }));
+  const Ee = f(
+    (e) => {
+      v || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d || c(!0));
+    },
+    [v, d, c]
+  ), $e = () => /* @__PURE__ */ g(
+    "div",
+    {
+      id: le,
+      role: "listbox",
+      "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: [
+          H && /* @__PURE__ */ l(
+            ne,
+            {
+              id: `search-${u}`,
+              size: fe,
+              placeholder: Q,
+              "aria-label": Q || "Search options",
+              onChange: (e) => L(e),
+              value: h,
+              iconBefore: rl,
+              containerClassName: "w-full"
+            }
+          ),
+          D && /* @__PURE__ */ l(
+            We,
+            {
+              "aria-label": "Close select",
+              className: "shrink-0",
+              size: O.Small,
+              icon: al,
+              onClick: (e) => {
+                W?.(e), c(!1);
+              }
+            }
+          )
+        ] }),
+        n && me && o.length > 0 && /* @__PURE__ */ l("div", { className: p(il, "mt-2"), children: /* @__PURE__ */ l(
+          Ve,
+          {
+            id: `${u}-selectAll`,
+            labelProps: { label: he },
+            isSelected: _,
+            isIndeterminate: Oe,
+            onChange: Ae
+          }
+        ) }),
+        /* @__PURE__ */ l("div", { role: "none", className: ol, children: w.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
+          Je,
+          {
+            icon: be ?? sl,
+            title: pe,
+            description: ve
+          }
+        ) }) : w.map((e) => {
+          const t = r.includes(e.value);
+          if (e.children?.length)
+            return /* @__PURE__ */ l(
+              Pe,
+              {
+                opt: e,
+                selectedValues: r,
+                mark: n ? K.Checkbox : R,
+                onSelect: $
+              },
+              e.value
+            );
+          const k = n ? (
+            /*
+              The row itself is the control: one `option` whose state rides on
+              `aria-selected`, with a decorative box drawing the check. A real
+              nested checkbox would give the row two states to announce and
+              would leave the rest of the 40px rectangle inert — the design
+              has the whole row selecting the option.
+            */
+            /* @__PURE__ */ l(
+              ae,
+              {
+                id: `${u}-${e.value}`,
+                role: "option",
+                "aria-selected": t,
+                "aria-disabled": !!e.disabled,
+                disabled: e.disabled,
+                mark: K.Checkbox,
+                selected: t,
+                icon: e.icon,
+                label: e.labelNode ?? e.label,
+                description: e.description,
+                rightControl: e.rightControl,
+                onClick: () => $(e.value)
+              }
+            )
+          ) : /* @__PURE__ */ l(
+            ae,
+            {
+              role: "option",
+              "aria-selected": t,
+              "aria-disabled": !!e.disabled,
+              disabled: e.disabled,
+              mark: R,
+              selected: t,
+              ellipsisLabel: !0,
+              icon: e.icon,
+              label: e.labelNode ?? e.label,
+              description: e.description,
+              rightControl: e.rightControl,
+              onClick: () => !e.disabled && $(e.value)
+            }
+          );
+          return /* @__PURE__ */ l(Ue, { children: e.interactiveTooltip ? /* @__PURE__ */ l(
+            He,
+            {
+              asChild: !0,
+              placement: e.interactiveTooltip.placement,
+              content: e.interactiveTooltip.content,
+              contentClassName: e.interactiveTooltip.contentClassName,
+              children: k
+            }
+          ) : k }, e.value);
+        }) }),
+        I && /* @__PURE__ */ l(
+          "div",
+          {
+            onClick: (e) => {
+              J?.(e), J && c(!1);
+            },
+            children: typeof I == "function" ? I() : I
+          }
+        )
+      ]
+    }
+  );
+  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,
+            {
+              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(
+                _e,
+                {
+                  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(
+                "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 })
+    ] })
+  ] });
+};
+export {
+  Fl as Select
+};

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

@@ -0,0 +1,101 @@
+import { jsx as n, jsxs as g, Fragment as C } from "react/jsx-runtime";
+import { Fragment as T } from "react";
+import { InteractiveTooltip as s } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { MenuItem as c } from "../MenuItem/MenuItem.js";
+import { MenuItemMark as M } from "../../../types/menu-item.js";
+import { useSubMenuFloating as S, SubMenuPanel as x } from "../../../utils/sub-menu-floating.js";
+import { selectSubMenuGap as N, selectSubMenuCaretIcon as F, selectSubMenuClassName as I } from "./constants.js";
+const G = ({
+  opt: t,
+  selectedValues: a,
+  mark: m = M.Tint,
+  onSelect: u
+}) => {
+  const {
+    isOpen: i,
+    refs: l,
+    floatingStyles: b,
+    context: d,
+    getReferenceProps: p,
+    getFloatingProps: v
+  } = S(N, "listbox", !!t.disabled), f = t.children?.some(
+    (e) => a.includes(e.value)
+  ), r = (
+    /*
+      The trigger carries no mark of its own: the check belongs to the child
+      that is actually chosen, one panel over. While its panel is open the row
+      stays tinted, which is what the design shows for an open parent.
+    */
+    /* @__PURE__ */ n(
+      c,
+      {
+        ref: l.setReference,
+        role: "option",
+        "aria-haspopup": "listbox",
+        "aria-expanded": i,
+        "aria-selected": !!f,
+        "aria-disabled": !!t.disabled,
+        disabled: t.disabled,
+        ellipsisLabel: !0,
+        icon: t.icon,
+        label: t.labelNode ?? t.label,
+        trailing: F,
+        ...p()
+      }
+    )
+  );
+  return /* @__PURE__ */ g(C, { children: [
+    t.interactiveTooltip ? /* @__PURE__ */ n(
+      s,
+      {
+        asChild: !0,
+        placement: t.interactiveTooltip.placement,
+        content: t.interactiveTooltip.content,
+        contentClassName: t.interactiveTooltip.contentClassName,
+        children: r
+      }
+    ) : r,
+    i && /* @__PURE__ */ n(
+      x,
+      {
+        refs: l,
+        floatingStyles: b,
+        context: d,
+        getFloatingProps: v,
+        role: "listbox",
+        surfaceClassName: I,
+        children: t.children.map((e) => {
+          const o = /* @__PURE__ */ n(
+            c,
+            {
+              role: "option",
+              "aria-selected": a.includes(e.value),
+              "aria-disabled": !!e.disabled,
+              disabled: e.disabled,
+              mark: m,
+              selected: a.includes(e.value),
+              ellipsisLabel: !0,
+              icon: e.icon,
+              label: e.labelNode ?? e.label,
+              rightControl: e.rightControl,
+              onClick: () => !e.disabled && u(e.value)
+            }
+          );
+          return /* @__PURE__ */ n(T, { children: e.interactiveTooltip ? /* @__PURE__ */ n(
+            s,
+            {
+              asChild: !0,
+              placement: e.interactiveTooltip.placement,
+              content: e.interactiveTooltip.content,
+              contentClassName: e.interactiveTooltip.contentClassName,
+              children: o
+            }
+          ) : o }, e.value);
+        })
+      }
+    )
+  ] });
+};
+export {
+  G as SelectSubMenuItem
+};

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

@@ -0,0 +1,42 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IconSearch as o, IconX as a, IconClipboardX as r, IconChevronRight as c } from "@tabler/icons-react";
+import { overlayItemClassName as l, overlayGap as n, overlaySubMenuClassName as i } from "../constants/overlay.js";
+import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
+import { mergeClasses as m } from "../../../utils/merge-classes.js";
+const S = m("w-full flex flex-col"), f = l, N = "!max-w-[var(--reference-width)]", x = "max-h-[344px] overflow-y-auto", v = n, y = i, M = /* @__PURE__ */ e(
+  c,
+  {
+    size: s.SM,
+    stroke: t,
+    "aria-hidden": "true"
+  }
+), O = "text-secondary transition-transform", b = 8, _ = /* @__PURE__ */ e(
+  o,
+  {
+    size: s.MD,
+    stroke: t,
+    "aria-hidden": "true"
+  }
+), k = /* @__PURE__ */ e(
+  a,
+  {
+    size: s.SM,
+    stroke: t,
+    "aria-hidden": "true"
+  }
+), w = /* @__PURE__ */ e(r, { size: s.LG, stroke: 0.5, "aria-hidden": "true" });
+export {
+  k as selectCloseIcon,
+  w as selectEmptyStateIcon,
+  O as selectFieldIconClassName,
+  N as selectListWidthClassName,
+  f as selectOptionBaseClassName,
+  x as selectOptionsScrollClassName,
+  S as selectOverlayBaseClassName,
+  _ as selectSearchIcon,
+  b as selectSearchThreshold,
+  M as selectSubMenuCaretIcon,
+  y as selectSubMenuClassName,
+  v as selectSubMenuGap
+};