@epam/ai-dial-ui-kit 0.14.0-dev.3 → 0.14.0-dev.30

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

@@ -0,0 +1,379 @@
+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 { 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,
+  multiple: n = !1,
+  id: ie,
+  value: A,
+  defaultValue: oe,
+  size: z = D.Standard,
+  prefix: H,
+  customSelectedValue: U,
+  placeholder: ce = "Select...",
+  labelProps: g,
+  error: V,
+  caption: de,
+  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
+}) => {
+  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(
+    (e) => {
+      T || Ie(e), J?.(e);
+    },
+    [T, J]
+  ), [b, ye] = j(""), E = u(
+    (e) => {
+      e !== b && (ye(e || ""), X?.(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(
+    (e) => {
+      L || De(e), R?.(e);
+    },
+    [L, R]
+  ), B = u(
+    (e) => {
+      if (n) {
+        const t = new Set(a);
+        t.has(e) ? t.delete(e) : t.add(e), o(Array.from(t));
+        return;
+      }
+      o(e), c(!1);
+    },
+    [n, o, c, a]
+  ), M = u(
+    (e, t) => {
+      if (e.stopPropagation(), !n) {
+        o("");
+        return;
+      }
+      const Me = a.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;
+    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)));
+      } else {
+        const e = new Set(a);
+        i.forEach((t) => e.add(t.value)), o(Array.from(e));
+      }
+  }, [
+    _,
+    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,
+    a,
+    M
+  ) ?? /* @__PURE__ */ l(
+    Xe,
+    {
+      options: s,
+      selectedValues: a,
+      handleRemoveTag: M
+    }
+  ) }) : null : !r || !r.labelNode && !r.description ? null : /* @__PURE__ */ d("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+    /* @__PURE__ */ l(
+      le,
+      {
+        text: r.labelNode ?? v
+      }
+    ),
+    r.description && /* @__PURE__ */ l("span", { className: "truncate text-secondary dial-tiny-text", children: r.description })
+  ] }), [
+    Y,
+    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, () => ({
+    dismiss: () => {
+      c(!1);
+    }
+  }));
+  const Le = u(
+    (e) => {
+      x || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), m || c(!0));
+    },
+    [x, m, c]
+  ), Be = () => /* @__PURE__ */ d(
+    "div",
+    {
+      id: P,
+      role: "listbox",
+      "aria-multiselectable": n || void 0,
+      className: tl,
+      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,
+            {
+              id: `search-${p}`,
+              size: fe,
+              placeholder: G,
+              "aria-label": G || "Search options",
+              onChange: (e) => E(e),
+              value: b,
+              iconBefore: al,
+              containerClassName: "w-full"
+            }
+          ),
+          F && /* @__PURE__ */ l(
+            Re,
+            {
+              "aria-label": "Close select",
+              className: "shrink-0",
+              size: D.Small,
+              icon: sl,
+              onClick: (e) => {
+                Q?.(e), c(!1);
+              }
+            }
+          )
+        ] }),
+        n && me && i.length > 0 && /* @__PURE__ */ l("div", { className: f(K, "mt-2"), children: /* @__PURE__ */ l(
+          Ue,
+          {
+            id: `${p}-selectAll`,
+            labelProps: { label: he },
+            isSelected: _,
+            isIndeterminate: Ae,
+            onChange: ke
+          }
+        ) }),
+        I.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
+          Ze,
+          {
+            icon: xe ?? rl,
+            title: pe,
+            description: be
+          }
+        ) }) : I.map((e) => {
+          const t = a.includes(e.value);
+          return 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__ */ d(
+              "button",
+              {
+                id: `${p}-${e.value}`,
+                type: "button",
+                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 })
+                ]
+              },
+              e.value
+            )
+          ) : e.children?.length ? /* @__PURE__ */ l(
+            Ye,
+            {
+              opt: e,
+              selectedValues: a,
+              onSelect: B
+            },
+            e.value
+          ) : /* @__PURE__ */ d(
+            "button",
+            {
+              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
+              ]
+            },
+            e.value
+          );
+        }),
+        w && /* @__PURE__ */ l(
+          "div",
+          {
+            onClick: (e) => {
+              W?.(e), W && c(!1);
+            },
+            children: typeof w == "function" ? w() : w
+          }
+        )
+      ]
+    }
+  );
+  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: [
+      /* @__PURE__ */ l(
+        qe,
+        {
+          open: m,
+          onOpenChange: c,
+          disabled: x,
+          closable: F,
+          onClose: Q,
+          placement: "bottom-start",
+          allowedPlacements: ["bottom-start", "top-start"],
+          maxDropdownHeight: k ? null : Pe,
+          listClassName: f(ll, Se),
+          className: "w-full",
+          renderOverlay: Be,
+          children: /* @__PURE__ */ l(
+            ne,
+            {
+              id: p,
+              size: z,
+              disabled: x,
+              invalid: ue,
+              value: Fe,
+              placeholder: S ? void 0 : ce,
+              readOnly: !0,
+              iconBefore: n ? void 0 : r?.icon,
+              iconAfter: /* @__PURE__ */ l(
+                je,
+                {
+                  size: ee ? ae.SM : ae.MD,
+                  stroke: Je,
+                  "aria-hidden": "true",
+                  className: f(
+                    el,
+                    m && "rotate-180"
+                  )
+                }
+              ),
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-expanded": m,
+              "aria-controls": P,
+              "aria-autocomplete": "none",
+              "aria-label": Ee,
+              containerClassName: "w-full",
+              wrapperClassName: f(
+                !x && "cursor-pointer",
+                n && y && [
+                  "!h-auto flex-wrap py-1.5",
+                  ee ? "min-h-[24px]" : "min-h-[40px]"
+                ],
+                ve
+              ),
+              className: f(
+                "cursor-pointer",
+                S && "w-0 min-w-0 flex-none p-0"
+              ),
+              onKeyDown: Le,
+              children: S
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ l(Ge, { text: V }),
+      !V && /* @__PURE__ */ l(Qe, { text: de })
+    ] })
+  ] });
+};
+export {
+  Fl as Select
+};

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

@@ -0,0 +1,90 @@
+import { jsxs as l, Fragment as g, jsx as a } from "react/jsx-runtime";
+import "react";
+import { DialIcon as o } from "../../Icon/Icon.js";
+import { EllipsisTooltip as c } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { mergeClasses as d } from "../../../utils/merge-classes.js";
+import { useSubMenuFloating as C, SubMenuPanel as v } from "../../../utils/sub-menu-floating.js";
+import { selectSubMenuGap as M, selectSubMenuCaretIcon as w, selectOptionDisabledClassName as m, selectOptionBaseClassName as b, selectSubMenuClassName as I, selectOptionCheckIcon as O } from "./constants.js";
+const R = ({
+  opt: s,
+  selectedValues: n,
+  onSelect: u
+}) => {
+  const {
+    isOpen: i,
+    refs: t,
+    floatingStyles: p,
+    context: f,
+    getReferenceProps: x,
+    getFloatingProps: N
+  } = C(M, "listbox", !!s.disabled), S = s.children?.some(
+    (e) => n.includes(e.value)
+  );
+  return /* @__PURE__ */ l(g, { children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        ref: t.setReference,
+        type: "button",
+        role: "option",
+        "aria-haspopup": "listbox",
+        "aria-expanded": i,
+        "aria-selected": !!S,
+        "aria-disabled": !!s.disabled,
+        disabled: s.disabled,
+        className: d(
+          b,
+          s.disabled && m
+        ),
+        ...x(),
+        children: [
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
+            s.icon && /* @__PURE__ */ a(o, { icon: s.icon }),
+            /* @__PURE__ */ a(c, { text: s.labelNode ?? s.label })
+          ] }),
+          /* @__PURE__ */ a("span", { className: "shrink-0", children: w })
+        ]
+      }
+    ),
+    i && /* @__PURE__ */ a(
+      v,
+      {
+        refs: t,
+        floatingStyles: p,
+        context: f,
+        getFloatingProps: N,
+        role: "listbox",
+        surfaceClassName: I,
+        children: s.children.map((e) => {
+          const r = n.includes(e.value);
+          return /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": r,
+              "aria-disabled": !!e.disabled,
+              disabled: e.disabled,
+              className: d(
+                b,
+                e.disabled && m
+              ),
+              onClick: () => !e.disabled && u(e.value),
+              children: [
+                /* @__PURE__ */ l("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
+                  e.icon && /* @__PURE__ */ a(o, { icon: e.icon }),
+                  /* @__PURE__ */ a(c, { text: e.labelNode ?? e.label })
+                ] }),
+                r && O
+              ]
+            },
+            e.value
+          );
+        })
+      }
+    )
+  ] });
+};
+export {
+  R as SelectSubMenuItem
+};

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

@@ -0,0 +1,57 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IconSearch as a, IconX as c, IconClipboardX as r, IconCheck as n, IconChevronRight as l } from "@tabler/icons-react";
+import { overlayItemDisabledClassName as i, overlayItemSelectedClassName as m, overlayItemClassName as d, overlayGap as C, 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 o } from "../../../utils/merge-classes.js";
+const M = o("w-full flex flex-col"), y = o(
+  d,
+  // The row ends with a check icon, so label and mark sit at opposite edges.
+  "justify-between"
+), b = m, k = "!max-w-[var(--reference-width)]", v = i, O = 352, x = C, w = I, z = /* @__PURE__ */ e(
+  l,
+  {
+    size: s.SM,
+    stroke: t,
+    "aria-hidden": "true"
+  }
+), D = "text-secondary transition-transform", _ = 8, L = /* @__PURE__ */ e(
+  a,
+  {
+    size: s.MD,
+    stroke: t,
+    "aria-hidden": "true"
+  }
+), g = /* @__PURE__ */ e(
+  c,
+  {
+    size: s.SM,
+    stroke: t,
+    "aria-hidden": "true"
+  }
+), E = /* @__PURE__ */ e(
+  n,
+  {
+    size: s.SM,
+    stroke: t,
+    className: "shrink-0",
+    "aria-hidden": !0
+  }
+), G = /* @__PURE__ */ e(r, { size: s.LG, stroke: 0.5, "aria-hidden": "true" });
+export {
+  O as dropdownMenuMaxHeight,
+  g as selectCloseIcon,
+  G as selectEmptyStateIcon,
+  D as selectFieldIconClassName,
+  k as selectListWidthClassName,
+  y as selectOptionBaseClassName,
+  E as selectOptionCheckIcon,
+  v as selectOptionDisabledClassName,
+  b as selectOptionSelectedClassName,
+  M as selectOverlayBaseClassName,
+  L as selectSearchIcon,
+  _ as selectSearchThreshold,
+  z as selectSubMenuCaretIcon,
+  w as selectSubMenuClassName,
+  x 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
+};