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

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

@@ -0,0 +1,368 @@
+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 { 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: se,
+  size: K = O.Standard,
+  prefix: z,
+  customSelectedValue: U,
+  placeholder: oe = "Select...",
+  labelProps: g,
+  error: V,
+  caption: ce,
+  ariaLabel: q,
+  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 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), X?.(e);
+    },
+    [T, X]
+  ), [h, we] = _(""), F = f(
+    (e) => {
+      e !== h && (we(e || ""), Y?.(e || ""));
+    },
+    [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 || ke(e), W?.(e);
+    },
+    [L, W]
+  ), E = f(
+    (e) => {
+      if (n) {
+        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, r]
+  ), M = f(
+    (e, t) => {
+      if (e.stopPropagation(), !n) {
+        o("");
+        return;
+      }
+      const Me = r.filter(($e) => $e !== t);
+      o(Me);
+    },
+    [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
+    };
+  }, [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(r);
+        s.forEach((t) => e.add(t.value)), o(Array.from(e));
+      }
+  }, [
+    B,
+    n,
+    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(
+    Je,
+    {
+      options: a,
+      selectedValues: r,
+      handleRemoveTag: M
+    }
+  ) }) : null : !i || !i.labelNode && !i.description ? null : /* @__PURE__ */ S("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+    /* @__PURE__ */ l(
+      qe,
+      {
+        text: i.labelNode ?? C
+      }
+    ),
+    i.description && /* @__PURE__ */ l("span", { className: "truncate text-secondary dial-tiny-text", children: i.description })
+  ] }), [
+    P,
+    M,
+    y,
+    n,
+    a,
+    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 = f(
+    (e) => {
+      b || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d || c(!0));
+    },
+    [b, d, c]
+  ), Ee = () => /* @__PURE__ */ S(
+    "div",
+    {
+      id: ee,
+      role: "listbox",
+      "aria-multiselectable": n || void 0,
+      className: el,
+      children: [
+        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-${u}`,
+              size: de,
+              placeholder: H,
+              "aria-label": H || "Search options",
+              onChange: (e) => F(e),
+              value: h,
+              iconBefore: tl,
+              containerClassName: "w-full"
+            }
+          ),
+          D && /* @__PURE__ */ l(
+            Qe,
+            {
+              "aria-label": "Close select",
+              className: "shrink-0",
+              size: O.Small,
+              icon: nl,
+              onClick: (e) => {
+                R?.(e), c(!1);
+              }
+            }
+          )
+        ] }),
+        n && fe && s.length > 0 && /* @__PURE__ */ l("div", { className: p(rl, "mt-2"), children: /* @__PURE__ */ l(
+          Ue,
+          {
+            id: `${u}-selectAll`,
+            labelProps: { label: ue },
+            isSelected: B,
+            isIndeterminate: Oe,
+            onChange: Ae
+          }
+        ) }),
+        /* @__PURE__ */ l("div", { role: "none", className: al, children: w.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
+          We,
+          {
+            icon: be ?? il,
+            title: he,
+            description: pe
+          }
+        ) }) : 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
+              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(
+              re,
+              {
+                id: `${u}-${e.value}`,
+                role: "option",
+                "aria-selected": t,
+                "aria-disabled": !!e.disabled,
+                disabled: e.disabled,
+                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
+            )
+          ) : /* @__PURE__ */ l(
+            re,
+            {
+              role: "option",
+              "aria-selected": t,
+              "aria-disabled": !!e.disabled,
+              disabled: e.disabled,
+              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
+          );
+        }) }),
+        I && /* @__PURE__ */ l(
+          "div",
+          {
+            onClick: (e) => {
+              Z?.(e), Z && c(!1);
+            },
+            children: typeof I == "function" ? I() : I
+          }
+        )
+      ]
+    }
+  );
+  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(
+        Ve,
+        {
+          open: d,
+          onOpenChange: c,
+          disabled: b,
+          closable: D,
+          onClose: R,
+          placement: "bottom-start",
+          allowedPlacements: ["bottom-start", "top-start"],
+          listClassName: p(Pe, Ne),
+          className: "w-full",
+          renderOverlay: Ee,
+          children: /* @__PURE__ */ l(
+            te,
+            {
+              id: u,
+              size: K,
+              disabled: b,
+              invalid: me,
+              value: De,
+              placeholder: N ? void 0 : oe,
+              readOnly: !0,
+              iconBefore: n ? void 0 : i?.icon,
+              iconAfter: /* @__PURE__ */ l(
+                _e,
+                {
+                  size: le ? ne.SM : ne.MD,
+                  stroke: Ze,
+                  "aria-hidden": "true",
+                  className: p(
+                    Ye,
+                    d && "rotate-180"
+                  )
+                }
+              ),
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-expanded": d,
+              "aria-controls": ee,
+              "aria-autocomplete": "none",
+              "aria-label": Fe,
+              containerClassName: "w-full",
+              wrapperClassName: p(
+                !b && "cursor-pointer",
+                n && y && [
+                  "!h-auto flex-wrap py-1.5",
+                  le ? "min-h-[24px]" : "min-h-[40px]"
+                ],
+                Ce
+              ),
+              className: p(
+                "cursor-pointer",
+                N && "w-0 min-w-0 flex-none p-0"
+              ),
+              onKeyDown: Le,
+              children: N
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ l(Ge, { text: V }),
+      !V && /* @__PURE__ */ l(He, { text: ce })
+    ] })
+  ] });
+};
+export {
+  Al as Select
+};

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

@@ -0,0 +1,73 @@
+import { jsxs as p, Fragment as f, jsx as r } from "react/jsx-runtime";
+import "react";
+import { MenuItem as s } from "../MenuItem/MenuItem.js";
+import { MenuItemMark as g } from "../../../types/menu-item.js";
+import { useSubMenuFloating as M, SubMenuPanel as S } from "../../../utils/sub-menu-floating.js";
+import { selectSubMenuGap as x, selectSubMenuCaretIcon as C, selectSubMenuClassName as v } from "./constants.js";
+const L = ({
+  opt: a,
+  selectedValues: l,
+  mark: o = g.Tint,
+  onSelect: t
+}) => {
+  const {
+    isOpen: i,
+    refs: n,
+    floatingStyles: b,
+    context: u,
+    getReferenceProps: d,
+    getFloatingProps: m
+  } = M(x, "listbox", !!a.disabled), c = a.children?.some(
+    (e) => l.includes(e.value)
+  );
+  return /* @__PURE__ */ p(f, { children: [
+    /* @__PURE__ */ r(
+      s,
+      {
+        ref: n.setReference,
+        role: "option",
+        "aria-haspopup": "listbox",
+        "aria-expanded": i,
+        "aria-selected": !!c,
+        "aria-disabled": !!a.disabled,
+        disabled: a.disabled,
+        ellipsisLabel: !0,
+        icon: a.icon,
+        label: a.labelNode ?? a.label,
+        trailing: C,
+        ...d()
+      }
+    ),
+    i && /* @__PURE__ */ r(
+      S,
+      {
+        refs: n,
+        floatingStyles: b,
+        context: u,
+        getFloatingProps: m,
+        role: "listbox",
+        surfaceClassName: v,
+        children: a.children.map((e) => /* @__PURE__ */ r(
+          s,
+          {
+            role: "option",
+            "aria-selected": l.includes(e.value),
+            "aria-disabled": !!e.disabled,
+            disabled: e.disabled,
+            mark: o,
+            selected: l.includes(e.value),
+            ellipsisLabel: !0,
+            icon: e.icon,
+            label: e.labelNode ?? e.label,
+            rightControl: e.rightControl,
+            onClick: () => !e.disabled && t(e.value)
+          },
+          e.value
+        ))
+      }
+    )
+  ] });
+};
+export {
+  L 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
+};

package/dist/components/New/Slider/Slider.js

@@ -0,0 +1,112 @@
+import { jsxs as n, jsx as e, Fragment as C } from "react/jsx-runtime";
+import { useId as w, useCallback as A } from "react";
+import { mergeClasses as i } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as B } from "../../../utils/accessible-name.js";
+import { ErrorText as H, CaptionText as L } from "../CaptionText/CaptionText.js";
+import { Label as U } from "../Label/Label.js";
+const Z = 16, _ = (o) => (o.toString().split(".")[1] ?? "").length, O = ({
+  id: o,
+  value: r,
+  min: d = 0,
+  max: h = 1,
+  step: x = 0.1,
+  disabled: a,
+  labelProps: l,
+  labels: t,
+  formatValue: m,
+  showValue: p = !1,
+  caption: f,
+  error: c,
+  onChange: g,
+  containerClassName: $,
+  trackClassName: F,
+  fillClassName: M,
+  className: S,
+  ...u
+}) => {
+  const T = w(), s = o ?? T, v = f && !c ? `${s}-caption` : void 0, N = c ? `${s}-error` : void 0, y = h - d, b = y > 0 ? Math.min(100, Math.max(0, (r - d) / y * 100)) : 0, j = `calc(${b}% + ${(0.5 - b / 100) * Z}px)`, I = m ? m(r) : r.toFixed(_(x)), k = A(
+    (E) => {
+      g?.(Number(E.target.value));
+    },
+    [g]
+  );
+  return /* @__PURE__ */ n("div", { className: i("flex flex-col gap-2", $), children: [
+    (l || p) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      l && /* @__PURE__ */ e(U, { ...l, htmlFor: s }),
+      p && // The input already reports its value to assistive tech, so this is
+      // a visual echo rather than a second announcement.
+      /* @__PURE__ */ e(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: i(
+            "dial-small-text ml-auto",
+            a ? "text-control-disable-primary" : "text-primary"
+          ),
+          children: I
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: i(
+              "pointer-events-none absolute inset-x-0 h-1 rounded-full",
+              a ? "bg-control-disable-primary" : "bg-control-neutral-active",
+              F
+            )
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: i(
+              "pointer-events-none absolute left-0 h-1 rounded-full",
+              a ? "bg-control-disable-secondary" : "bg-control-accent",
+              M
+            ),
+            style: { width: j }
+          }
+        ),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ...u,
+            type: "range",
+            id: s,
+            value: r,
+            min: d,
+            max: h,
+            step: x,
+            disabled: a,
+            onChange: k,
+            "aria-label": B(
+              typeof l?.label != "string" ? u["aria-label"] : void 0
+            ),
+            "aria-valuetext": m ? I : void 0,
+            "aria-describedby": N ?? v,
+            className: i(
+              "dial-kit-slider absolute inset-0 h-full w-full",
+              S
+            )
+          }
+        )
+      ] }),
+      t && /* @__PURE__ */ e("div", { className: "dial-tiny-text flex text-secondary", children: t.length === 3 ? /* @__PURE__ */ n(C, { children: [
+        /* @__PURE__ */ e("span", { children: t[0] }),
+        /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: t[1] }),
+        /* @__PURE__ */ e("span", { children: t[2] })
+      ] }) : /* @__PURE__ */ n(C, { children: [
+        /* @__PURE__ */ e("span", { children: t[0] }),
+        /* @__PURE__ */ e("span", { className: "ml-auto", children: t[1] })
+      ] }) }),
+      /* @__PURE__ */ e(H, { id: N, text: c }),
+      !c && /* @__PURE__ */ e(L, { id: v, text: f })
+    ] })
+  ] });
+};
+export {
+  O as Slider
+};

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

@@ -0,0 +1,95 @@
+import { jsxs as d, 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,
+  labelProps: o,
+  isOn: t = !1,
+  disabled: l,
+  onChange: a,
+  caption: c,
+  className: u,
+  ...i
+}) => {
+  const p = b(), s = m ?? 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
+          ),
+          "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"
+            )
+          ),
+          children: /* @__PURE__ */ e(
+            "span",
+            {
+              className: r(
+                "size-3.5 shrink-0 rounded-full",
+                l ? "bg-control-disable-secondary" : "bg-control-neutral"
+              )
+            }
+          )
+        }
+      ),
+      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",
+      {
+        id: n,
+        className: "dial-tiny-text text-secondary ml-[44px]",
+        children: c
+      }
+    )
+  ] });
+};
+export {
+  S as Switch
+};