@epam/ai-dial-ui-kit 0.14.0-dev.9 → 0.15.0-dev.1

package/dist/components/Select/Select.js

@@ -0,0 +1,435 @@
+import { jsx as t, jsxs as b, Fragment as ne } from "react/jsx-runtime";
+import { IconX as Te, IconClipboardX as Be } from "@tabler/icons-react";
+import I from "classnames";
+import { useId as Le, useState as j, useCallback as g, useRef as le, useMemo as y, useEffect as G, useImperativeHandle as Pe } from "react";
+import { DialIcon as A } from "../Icon/Icon.js";
+import { DialButton as ze } from "../Button/Button.js";
+import { DialDropdown as Re } from "../Dropdown/Dropdown.js";
+import { DialNoDataContent as qe } from "../NoDataContent/NoDataContent.js";
+import { DialCheckbox as se } from "../Checkbox/Checkbox.js";
+import { DialSearch as He } from "../Search/Search.js";
+import { SIZE_CONFIG as _e } from "../Search/constants.js";
+import { DialEllipsisTooltip as ie } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DialMultiSelectTags as je } from "./MultiSelectTags.js";
+import { SelectVariant as oe, SelectSize as ce } from "../../types/select.js";
+import { ElementSize as Ge } from "../../types/size.js";
+import { DIAL_ICON_SIZE as de } from "../../constants/icon.js";
+import { dropdownMenuMaxHeight as Ke, selectChevronIcon as Qe, selectTriggerBaseClassName as Ue, selectOverlayBaseClassName as Xe, selectOptionBaseClassName as K, selectOptionSelectedClassName as Ze, selectOptionDisabledClassName as fe, selectOptionSingleSelectedClassName as Je } from "./constants.js";
+import { mergeClasses as me } from "../../utils/merge-classes.js";
+import { SelectSubMenuItem as We } from "./SelectSubMenuItem.js";
+const vt = ({
+  options: s,
+  multiple: a = !1,
+  elementId: N,
+  value: O,
+  defaultValue: ue,
+  variant: ge = oe.Primary,
+  size: pe = ce.Md,
+  prefix: E,
+  customSelectedValue: p,
+  placeholder: S = "Select...",
+  searchable: T = !1,
+  searchSize: Q = Ge.Standard,
+  searchPlaceholder: U,
+  selectAll: he = !1,
+  invalid: ve,
+  selectAllLabel: X = "Select all",
+  emptyStateTitle: be = "No options available",
+  emptyStateDescription: Ne,
+  emptyStateIcon: xe,
+  disabled: c = !1,
+  className: ye,
+  listClassName: Ce,
+  closable: B = !1,
+  header: k,
+  footer: M,
+  onClose: Z,
+  onChange: J,
+  inlineSearch: n = !1,
+  dismissRef: we,
+  onFooterClick: W,
+  open: Y,
+  onOpenChange: V,
+  onInlineQueryChange: ee,
+  customMultiSelectTagsRenderer: te
+}) => {
+  const x = Le(), [De, Ie] = j(!1), L = Y !== void 0, i = L ? !!Y : De, d = g(
+    (e) => {
+      L || Ie(e), V?.(e);
+    },
+    [L, V]
+  ), [f, Oe] = j(
+    n && p || ""
+  ), P = le(null), m = g(
+    (e) => {
+      e !== f && (Oe(e || ""), ee?.(e || ""));
+    },
+    [ee, f]
+  ), z = O !== void 0, [Se, ke] = j(ue), C = z ? O : Se, l = y(() => a ? Array.isArray(C) ? C : [] : typeof C == "string" ? [C] : [], [C, a]), w = y(() => {
+    const e = f.trim().toLowerCase();
+    return e ? s.filter((r) => r.label.toLowerCase().includes(e)) : s;
+  }, [s, f]);
+  G(() => {
+    !i && !n && m("");
+  }, [n, i, m]);
+  const re = le(p);
+  G(() => {
+    n && p !== re.current && (i || (re.current = p, m(p || "")));
+  }, [p, n, i, m]);
+  const h = g(
+    (e) => {
+      z || ke(e), J?.(e);
+    },
+    [z, J]
+  ), D = g(
+    (e) => {
+      if (a) {
+        const r = new Set(l);
+        r.has(e) ? r.delete(e) : r.add(e), h(Array.from(r));
+        return;
+      }
+      if (h(e), n) {
+        const r = s.find((v) => v.value === e) ?? s.flatMap((v) => v.children ?? []).find((v) => v.value === e);
+        r && m(r.label);
+      }
+      d(!1);
+    },
+    [
+      a,
+      h,
+      n,
+      d,
+      l,
+      s,
+      m
+    ]
+  ), R = g(
+    (e, r) => {
+      if (e.stopPropagation(), !a) {
+        h("");
+        return;
+      }
+      const v = l.filter((Ee) => Ee !== r);
+      h(v);
+    },
+    [a, l, h]
+  ), u = y(
+    () => w.filter((e) => !e.disabled),
+    [w]
+  ), q = y(
+    () => u.filter((e) => l.includes(e.value)).length,
+    [u, l]
+  ), Me = g(
+    (e) => {
+      n && !a && !e && D(f), d(e);
+    },
+    [D, n, a, f, d]
+  ), { allSelectedInFiltered: H, someSelectedInFiltered: Fe } = y(() => {
+    const e = u.length > 0 && q === u.length;
+    return {
+      allSelectedInFiltered: e,
+      someSelectedInFiltered: q > 0 && !e
+    };
+  }, [u, q]), $e = g(() => {
+    if (!(!a || u.length === 0))
+      if (H) {
+        const e = new Set(u.map((r) => r.value));
+        h(l.filter((r) => !e.has(r)));
+      } else {
+        const e = new Set(l);
+        u.forEach((r) => e.add(r.value)), h(Array.from(e));
+      }
+  }, [
+    H,
+    a,
+    u,
+    l,
+    h
+  ]), _ = l.length > 0;
+  G(() => {
+    i && n && !a && !c && requestAnimationFrame(() => {
+      const e = P.current;
+      if (!e) return;
+      e.focus();
+      const r = e.value?.length ?? 0;
+      e.setSelectionRange?.(r, r);
+    });
+  }, [i, n, a, c]);
+  const F = !a && _ ? l[0] : void 0, o = y(
+    () => F ? s.find((e) => e.value === F) ?? s.flatMap((e) => e.children ?? []).find((e) => e.value === F) : void 0,
+    [s, F]
+  ), Ae = g(() => a ? _ ? te?.(
+    s,
+    l,
+    R
+  ) || /* @__PURE__ */ t(
+    je,
+    {
+      options: s,
+      selectedValues: l,
+      handleRemoveTag: R
+    }
+  ) : /* @__PURE__ */ t("span", { className: "text-secondary truncate", children: S }) : o ? /* @__PURE__ */ b(ne, { children: [
+    o.icon && /* @__PURE__ */ t(A, { icon: o.icon }),
+    /* @__PURE__ */ t(
+      ie,
+      {
+        text: o.labelNode ?? (E ? `${E} ${o.label}` : o.label)
+      }
+    ),
+    o?.description && /* @__PURE__ */ t("div", { className: "text-secondary dial-small-text", children: o.description })
+  ] }) : p && O ? p : /* @__PURE__ */ t("span", { className: "text-secondary truncate", children: S }), [
+    _,
+    a,
+    p,
+    E,
+    O,
+    S,
+    o,
+    s,
+    l,
+    R,
+    te
+  ]);
+  Pe(we, () => ({
+    dismiss: () => {
+      d(!1);
+    }
+  }));
+  const $ = g(() => {
+    m(
+      l.length === 1 ? o?.label ?? f : ""
+    );
+  }, [f, l.length, m, o?.label]), ae = g(() => {
+    c || (d(!i), n && !a && ($(), P.current?.focus()));
+  }, [c, n, i, a, $, d]);
+  return /* @__PURE__ */ t(
+    Re,
+    {
+      open: i,
+      onOpenChange: Me,
+      disabled: c,
+      closable: B,
+      onClose: Z,
+      placement: "bottom-start",
+      allowedPlacements: ["bottom-start", "top-start"],
+      maxDropdownHeight: T ? null : Ke,
+      listClassName: Ce,
+      renderOverlay: () => /* @__PURE__ */ b(
+        "div",
+        {
+          id: `list-${N || x}`,
+          role: "listbox",
+          "aria-multiselectable": a || void 0,
+          className: Xe,
+          children: [
+            k && /* @__PURE__ */ t(ne, { children: typeof k == "function" ? k() : k }),
+            (T || B) && s.length > 8 && /* @__PURE__ */ b("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
+              T && /* @__PURE__ */ t(
+                He,
+                {
+                  size: Q,
+                  placeholder: U,
+                  onChange: m,
+                  value: f,
+                  id: `search-${N || x}`,
+                  containerClassName: me(
+                    _e[Q].containerClassName,
+                    "w-full"
+                  )
+                }
+              ),
+              B && /* @__PURE__ */ t(
+                ze,
+                {
+                  "aria-label": "Close select",
+                  className: "shrink-0",
+                  iconBefore: /* @__PURE__ */ t(Te, { size: de.SM }),
+                  onClick: (e) => {
+                    Z?.(e), d(!1);
+                  }
+                }
+              )
+            ] }),
+            a && he && u.length > 0 && /* @__PURE__ */ t("div", { className: I(K, "mt-2"), children: /* @__PURE__ */ t(
+              se,
+              {
+                id: `${N || x}-selectAll`,
+                label: X,
+                checked: H,
+                indeterminate: Fe,
+                onChange: $e,
+                ariaLabel: X
+              }
+            ) }),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: I(
+                  "overflow-y-auto max-h-[352px]",
+                  n && w.length === 0 ? "" : "py-1"
+                ),
+                children: w.length === 0 ? !n && /* @__PURE__ */ t("div", { className: "px-2 py-3", children: /* @__PURE__ */ t(
+                  qe,
+                  {
+                    icon: xe ?? /* @__PURE__ */ t(
+                      Be,
+                      {
+                        size: de.LG,
+                        stroke: 0.5
+                      }
+                    ),
+                    title: be,
+                    description: Ne
+                  }
+                ) }) : w.map((e) => {
+                  const r = l.includes(e.value);
+                  return a ? /* @__PURE__ */ b(
+                    "div",
+                    {
+                      role: "option",
+                      "aria-selected": r,
+                      "aria-disabled": !!e.disabled,
+                      className: I(
+                        K,
+                        r && Ze,
+                        e.disabled && fe,
+                        "w-full"
+                      ),
+                      children: [
+                        /* @__PURE__ */ t(
+                          se,
+                          {
+                            id: `${N || x}-${e.value}`,
+                            label: /* @__PURE__ */ b("span", { className: "flex w-full flex-1 pl-2 min-w-0 items-center gap-2 text-primary", children: [
+                              e.icon && /* @__PURE__ */ t(A, { icon: e.icon }),
+                              /* @__PURE__ */ t("span", { className: "truncate", children: e.labelNode ?? e.label })
+                            ] }),
+                            checked: r,
+                            disabled: e.disabled,
+                            onChange: () => !e.disabled && D(e.value),
+                            ariaLabel: e.label
+                          }
+                        ),
+                        e.description && /* @__PURE__ */ t("div", { className: "text-secondary dial-small-text", children: e.description })
+                      ]
+                    },
+                    e.value
+                  ) : e.children?.length ? /* @__PURE__ */ t(
+                    We,
+                    {
+                      opt: e,
+                      selectedValues: l,
+                      onSelect: D
+                    },
+                    e.value
+                  ) : /* @__PURE__ */ t(
+                    "button",
+                    {
+                      role: "option",
+                      type: "button",
+                      "aria-selected": r,
+                      "aria-disabled": !!e.disabled,
+                      disabled: e.disabled,
+                      className: I(
+                        K,
+                        r && Je,
+                        e.disabled && fe
+                      ),
+                      onClick: () => !e.disabled && D(e.value),
+                      children: /* @__PURE__ */ b("div", { className: "flex items-center gap-2 w-full", children: [
+                        e.icon && /* @__PURE__ */ t(A, { icon: e.icon }),
+                        /* @__PURE__ */ t(
+                          ie,
+                          {
+                            text: e.labelNode ?? e.label
+                          }
+                        ),
+                        e.description && /* @__PURE__ */ t("div", { className: "text-secondary dial-small-text", children: e.description })
+                      ] })
+                    },
+                    e.value
+                  );
+                })
+              }
+            ),
+            M && /* @__PURE__ */ t(
+              "div",
+              {
+                onClick: (e) => {
+                  W?.(e), W && d(!1);
+                },
+                children: typeof M == "function" ? M() : M
+              }
+            )
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ b(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          "aria-roledescription": "button to open select list",
+          "aria-haspopup": "listbox",
+          "aria-expanded": i,
+          "aria-controls": `list-${N || x}`,
+          className: me(
+            Ue,
+            c && "opacity-75 !cursor-not-allowed !border-primary",
+            pe === ce.Sm ? "min-h-[25px] px-1.5 py-1" : "min-h-[38px] px-3 py-2",
+            ve && "dial-input-error",
+            ge === oe.Secondary ? "!bg-layer-4 !h-auto" : "",
+            ye
+          ),
+          onMouseDown: (e) => {
+            c || n && !a && ($(), e.preventDefault());
+          },
+          onClick: () => {
+            ae();
+          },
+          onKeyDown: (e) => {
+            (e.key === " " || e.code === "Space") && (e.preventDefault(), ae());
+          },
+          children: [
+            n && !a ? /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-2 text-primary flex-1", children: /* @__PURE__ */ t(
+              "input",
+              {
+                id: `inline-${N || x}`,
+                type: "text",
+                placeholder: U ?? S,
+                value: f || "",
+                onChange: (e) => m(e.currentTarget.value.trimStart()),
+                onFocus: () => !c && d(!0),
+                onMouseDown: (e) => {
+                  $(), e.stopPropagation();
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                onKeyDown: (e) => {
+                  e.stopPropagation();
+                },
+                className: "bg-transparent outline-none w-full dial-small-text",
+                ref: P,
+                disabled: c,
+                "aria-disabled": c,
+                autoComplete: "off"
+              }
+            ) }) : /* @__PURE__ */ t("div", { className: "flex w-full min-w-0 items-center gap-2 text-primary", children: Ae() }),
+            !n && /* @__PURE__ */ t(
+              A,
+              {
+                icon: Qe,
+                className: I("text-primary", i && "rotate-180")
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  vt as DialSelect
+};

package/dist/components/Select/SelectSubMenuItem.js

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

package/dist/components/Select/constants.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+import { DIAL_ICON_SIZE as t } from "../../constants/icon.js";
+import { IconChevronDown as a } from "@tabler/icons-react";
+const c = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer", r = "w-full rounded flex flex-col", n = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none", i = "bg-accent-primary-alpha", p = "bg-accent-primary-alpha border-l border-accent-primary border-1", m = "opacity-75", u = 352, f = 4, d = /* @__PURE__ */ e(a, { size: t.SM });
+export {
+  u as dropdownMenuMaxHeight,
+  d as selectChevronIcon,
+  n as selectOptionBaseClassName,
+  m as selectOptionDisabledClassName,
+  i as selectOptionSelectedClassName,
+  p as selectOptionSingleSelectedClassName,
+  r as selectOverlayBaseClassName,
+  f as selectSubMenuGap,
+  c as selectTriggerBaseClassName
+};

package/dist/components/SelectField/SelectField.js

@@ -0,0 +1,66 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useCallback as D } from "react";
+import { DialFormItem as N } from "../FormItem/FormItem.js";
+import { DialSelect as g } from "../Select/Select.js";
+import { DialMultiSelectTags as h } from "../Select/MultiSelectTags.js";
+const k = ({
+  label: a,
+  required: s,
+  captionDescription: l,
+  containerClassName: m,
+  selectClassName: c,
+  error: e,
+  id: t,
+  caption: p,
+  readonly: d,
+  value: i,
+  defaultEmptyText: n,
+  ...r
+}) => {
+  const f = D(() => {
+    if (!i || Array.isArray(i) && i.length === 0)
+      return n ?? "None";
+    if (Array.isArray(i))
+      return /* @__PURE__ */ o(
+        h,
+        {
+          options: r.options,
+          selectedValues: i
+        }
+      );
+    {
+      const y = r.options?.find(
+        (A) => A.value === i
+      );
+      return /* @__PURE__ */ o("span", { "aria-readonly": !0, className: "text-primary", children: y?.label || i });
+    }
+  }, [i, r.options, n]);
+  return /* @__PURE__ */ o(
+    N,
+    {
+      id: t,
+      label: a,
+      required: s,
+      description: p,
+      error: e,
+      captionDescription: l,
+      className: m,
+      readonly: d,
+      value: f(),
+      defaultEmptyText: n,
+      children: /* @__PURE__ */ o(
+        g,
+        {
+          className: c,
+          value: i,
+          elementId: t,
+          invalid: !!e,
+          ...r
+        }
+      )
+    }
+  );
+};
+export {
+  k as DialSelectField
+};

package/dist/components/SharedEntityIndicator/SharedEntityIndicator.js

@@ -0,0 +1,34 @@
+import { jsx as r } from "react/jsx-runtime";
+import { DialIcon as l } from "../Icon/Icon.js";
+import { mergeClasses as n } from "../../utils/merge-classes.js";
+import { IconArrowUpRight as p } from "@tabler/icons-react";
+import { DialTooltip as c } from "../Tooltip/Tooltip.js";
+const y = ({
+  label: o = "Shared entity",
+  size: t = 14,
+  className: i,
+  containerClassName: e,
+  stroke: a = 1.5,
+  sharedIndicatorTooltip: m
+}) => /* @__PURE__ */ r(c, { tooltip: m || "Shared", children: /* @__PURE__ */ r(
+  l,
+  {
+    className: n(
+      "text-accent-primary flex bg-layer-3",
+      e
+    ),
+    icon: /* @__PURE__ */ r(
+      p,
+      {
+        size: t,
+        stroke: a,
+        "aria-label": typeof o == "string" ? o : void 0,
+        className: i,
+        role: "img"
+      }
+    )
+  }
+) });
+export {
+  y as DialSharedEntityIndicator
+};