@epam/ai-dial-ui-kit 0.16.0-dev.6 → 0.16.0-dev.61

package/dist/components/Select/Select.js

@@ -1,435 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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
-};