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

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,213 @@
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { useState as w, useRef as g, useMemo as U, useCallback as x, useEffect as R } from "react";
+import { IconChevronDown as Y, IconDotsVertical as $ } from "@tabler/icons-react";
+import { DialButton as ee } from "../Button/Button.js";
+import { DialDropdown as k } from "../Dropdown/Dropdown.js";
+import { DialIcon as re } from "../Icon/Icon.js";
+import { DialTab as m } from "../Tab/Tab.js";
+import { DIAL_ICON_SIZE as oe, BASE_ICON_SIZE as le } from "../../constants/icon.js";
+import { useScreenType as te } from "../../hooks/use-screen-type.js";
+import { DropdownTrigger as M } from "../../types/dropdown.js";
+import { ScreenType as T } from "../../types/screen.js";
+import { ScreenResolution as E, TabOrientation as z, TabView as v } from "../../types/tab.js";
+import { mergeClasses as t } from "../../utils/merge-classes.js";
+import { DESKTOP_TABS_GAP_PX as ne } from "./constants.js";
+const Ce = ({
+  tabs: n,
+  activeTab: l,
+  onClick: C,
+  className: _,
+  orientation: B = z.Horizontal,
+  view: A = v.Default,
+  screenThreshold: L = E.Tablet,
+  smallScreenContainerClassName: P,
+  smallScreenDropdownItemClassName: W,
+  desktopDropdownClassName: j,
+  desktopTabClassName: H,
+  inlineContainerClassName: V,
+  inlineTabClassName: Z
+}) => {
+  const [D, N] = w(!1), [S, b] = w(!1), [G, K] = w(!1), O = te(), X = O === T.Mobile || L === E.Tablet && O === T.Tablet, u = B === z.Horizontal, q = g(null), f = g(null), y = g(null), F = n.find((e) => e.id === l), J = U(
+    () => t(
+      "flex gap-2",
+      u ? "flex-row flex-nowrap overflow-x-auto" : "flex-col flex-wrap w-full"
+    ),
+    [u]
+  ), h = x(() => {
+    const e = f.current;
+    e && K(e.scrollWidth > e.clientWidth);
+  }, []), d = x(() => {
+    const e = y.current, o = f.current;
+    if (!e || !o) return;
+    const c = e.getBoundingClientRect(), a = o.getBoundingClientRect();
+    if (c.width === 0 || a.width === 0) return;
+    const p = ne;
+    let i = o.scrollLeft;
+    if (c.left < a.left + p)
+      i -= a.left + p - c.left;
+    else if (c.right > a.right - p)
+      i += c.right - (a.right - p);
+    else
+      return;
+    const Q = Math.max(
+      0,
+      o.scrollWidth - o.clientWidth
+    );
+    i = Math.max(0, Math.min(i, Q)), i !== o.scrollLeft && o.scrollTo({
+      left: i,
+      behavior: "smooth"
+    });
+  }, []), s = x(
+    (e) => {
+      C(e), e === l && d();
+    },
+    [C, l, d]
+  );
+  return R(() => {
+    h();
+    const e = new ResizeObserver(() => h()), o = f.current;
+    return o && e.observe(o), () => e.disconnect();
+  }, [n, h]), R(() => {
+    d();
+  }, [l, d]), A === v.Inline ? /* @__PURE__ */ r(
+    "div",
+    {
+      role: "tablist",
+      className: t(
+        "flex flex-row items-center gap-0.5 bg-layer-4 rounded w-fit p-0.5",
+        V
+      ),
+      children: n.map((e) => /* @__PURE__ */ r(
+        m,
+        {
+          tab: e,
+          active: l === e.id,
+          view: v.Inline,
+          onClick: s,
+          className: Z
+        },
+        e.id
+      ))
+    }
+  ) : X ? /* @__PURE__ */ r(
+    "div",
+    {
+      role: "tablist",
+      className: t(
+        "h-11 flex items-center bg-layer-3 px-4",
+        P
+      ),
+      children: /* @__PURE__ */ r(
+        k,
+        {
+          trigger: [M.Click],
+          open: D,
+          onOpenChange: N,
+          placement: "bottom-start",
+          allowedPlacements: ["bottom-start", "top-start"],
+          renderOverlay: () => n.map((e) => /* @__PURE__ */ r(
+            m,
+            {
+              tab: e,
+              active: e.id === l,
+              onClick: (o) => {
+                s(o), N(!1);
+              },
+              className: t(
+                "w-full rounded-none h-11 items-center px-6",
+                W
+              )
+            },
+            e.id
+          )),
+          children: /* @__PURE__ */ I("div", { className: "flex gap-2 items-center h-11 cursor-pointer", children: [
+            /* @__PURE__ */ r(
+              m,
+              {
+                tab: F,
+                active: !0,
+                onClick: s,
+                className: "rounded-none bg-transparent border-l-0 border-b-0 h-full items-center px-0"
+              },
+              l
+            ),
+            /* @__PURE__ */ r(
+              re,
+              {
+                icon: /* @__PURE__ */ r(Y, { size: oe.SM }),
+                className: t(
+                  "text-primary transition-transform",
+                  D && "rotate-180"
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  ) : (
+    // Desktop
+    /* @__PURE__ */ I(
+      "div",
+      {
+        ref: q,
+        className: t("flex items-center", _),
+        children: [
+          /* @__PURE__ */ r("div", { ref: f, role: "tablist", className: J, children: n.map((e) => /* @__PURE__ */ r(
+            "div",
+            {
+              ref: l === e.id ? y : void 0,
+              className: "w-full",
+              children: /* @__PURE__ */ r(
+                m,
+                {
+                  tab: e,
+                  active: l === e.id,
+                  onClick: s,
+                  horizontal: u,
+                  className: t("w-full", H)
+                }
+              )
+            },
+            e.id
+          )) }),
+          G && /* @__PURE__ */ r("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ r(
+            k,
+            {
+              trigger: [M.Click],
+              open: S,
+              onOpenChange: b,
+              placement: "bottom-end",
+              renderOverlay: () => n.map((e) => /* @__PURE__ */ r(
+                m,
+                {
+                  tab: e,
+                  active: e.id === l,
+                  onClick: (o) => {
+                    s(o), b(!1);
+                  },
+                  className: "w-full rounded-none h-8 items-center px-3 py-2"
+                },
+                e.id
+              )),
+              children: /* @__PURE__ */ r(
+                ee,
+                {
+                  iconBefore: /* @__PURE__ */ r($, { size: le }),
+                  className: t(
+                    "w-8 h-8 flex items-center justify-center rounded border",
+                    S ? "bg-layer-4 border-transparent" : "border-primary",
+                    j
+                  )
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    )
+  );
+};
+export {
+  Ce as DialTabs
+};

package/dist/components/Tabs/constants.js

@@ -0,0 +1,4 @@
+const P = 12;
+export {
+  P as DESKTOP_TABS_GAP_PX
+};

package/dist/components/Tag/Tag.js

@@ -0,0 +1,37 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { DialButton as l } from "../Button/Button.js";
+import { DialEllipsisTooltip as x } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DialIcon as f } from "../Icon/Icon.js";
+import { DIAL_ICON_SIZE as d } from "../../constants/icon.js";
+import { mergeClasses as g } from "../../utils/merge-classes.js";
+import { IconX as y } from "@tabler/icons-react";
+const j = ({
+  label: o,
+  className: i,
+  icon: a,
+  selected: e,
+  closable: m,
+  onClick: p,
+  onRemove: t
+}) => {
+  const c = g(
+    "flex items-center gap-1 cursor-pointer dial-tiny-text px-2 h-[24px] border text-primary rounded-[8px]",
+    e ? "hover:bg-controls-accent-primary-alpha-active bg-accent-primary-alpha border-accent-primary" : "bg-neutral border-primary",
+    i
+  );
+  return /* @__PURE__ */ n("div", { className: c, onClick: p, children: [
+    /* @__PURE__ */ r(f, { icon: a }),
+    /* @__PURE__ */ r(x, { text: o }),
+    m && t && /* @__PURE__ */ r(
+      l,
+      {
+        className: "p-0",
+        iconAfter: /* @__PURE__ */ r(y, { size: d.SM }),
+        onClick: (s) => t(s)
+      }
+    )
+  ] }, o);
+};
+export {
+  j as DialTag
+};

package/dist/components/TagInput/TagInput.js

@@ -0,0 +1,179 @@
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import { useRef as C, useState as d, useCallback as H, useEffect as D } from "react";
+import v from "classnames";
+import { DialLabel as y } from "../Label/Label.js";
+import { DialTag as x } from "../Tag/Tag.js";
+import { DialErrorText as O, DialCaptionText as ee } from "../CaptionText/CaptionText.js";
+import { DialTooltip as te } from "../Tooltip/Tooltip.js";
+const k = 8, ne = 24, fe = ({
+  initialTags: a = [],
+  label: I,
+  required: K,
+  elementId: E,
+  placeholder: X,
+  captionDescription: _,
+  errorText: P,
+  invalid: F,
+  disabled: c,
+  collapseTagOverflow: i = !1,
+  readOnly: s = !1,
+  containerClassName: J,
+  tagClassName: V,
+  onChange: $
+}) => {
+  const o = C(null), b = C([]), S = C(null), [n, w] = d(a), [h, R] = d(""), [T, U] = d(!1), [m, g] = d(a.length), q = H((e) => (t) => {
+    b.current[e] = t;
+  }, []), W = H(() => {
+    if (!i) return;
+    const e = o.current;
+    if (!e) return;
+    const t = e.offsetWidth;
+    if (t === 0) return;
+    const u = S.current?.offsetWidth ?? 0, z = t - (s ? 0 : ne) - k;
+    let p = 0, l = 0;
+    for (let f = 0; f < n.length; f++) {
+      const B = b.current[f];
+      if (!B) continue;
+      const G = B.offsetWidth + k;
+      if (p + G > z) break;
+      p += G, l++;
+    }
+    if (l < n.length && l > 0)
+      for (; p + u > z && l > 0; ) {
+        l--;
+        const f = b.current[l]?.offsetWidth ?? 0;
+        p -= f + k;
+      }
+    g(l);
+  }, [i, s, n.length]), j = (e) => {
+    const t = e.trim().replace(/,$/, "");
+    if (t && !n.includes(t)) {
+      const u = [t, ...n];
+      w(u), $?.(u);
+    }
+  }, Q = (e) => {
+    (e.key === "," || e.key === "Enter") && (e.preventDefault(), j(h), R(""));
+  }, Y = () => {
+    h.trim() && (j(h), R(""));
+  }, A = (e) => {
+    const t = n.filter((u, M) => M !== e);
+    w(t), $?.(t);
+  }, Z = () => P ? /* @__PURE__ */ r(O, { text: P }) : _ ? /* @__PURE__ */ r(ee, { text: _ }) : null;
+  D(() => {
+    if (i) return;
+    const e = new ResizeObserver(() => {
+      if (o.current) {
+        const t = o.current.scrollHeight > o.current.clientHeight + 10;
+        U(t);
+      }
+    });
+    return o.current && e.observe(o.current), () => e.disconnect();
+  }, [n, i]), D(() => {
+    if (!i) {
+      g(n.length);
+      return;
+    }
+    g(n.length);
+    const e = new ResizeObserver(() => {
+      W();
+    }), t = o.current;
+    return t && e.observe(t), W(), () => e.disconnect();
+  }, [i, W, n]), D(() => {
+    w(a);
+  }, [JSON.stringify(a)]);
+  const L = /* @__PURE__ */ N(
+    "div",
+    {
+      ref: o,
+      className: v(
+        "flex gap-2 items-center relative",
+        i ? "flex-nowrap overflow-hidden w-full min-w-0" : v("flex-wrap", T ? "flex-col-reverse" : "flex-row"),
+        J
+      ),
+      children: [
+        (i ? n.slice(0, m) : n).map(
+          (e, t) => /* @__PURE__ */ r(
+            x,
+            {
+              label: e,
+              className: V,
+              closable: !c && !s,
+              onRemove: !c && !s ? () => A(t) : void 0
+            },
+            e + t
+          )
+        ),
+        i && m < n.length && /* @__PURE__ */ r(
+          te,
+          {
+            tooltip: n.slice(m).join(", "),
+            triggerClassName: "inline-flex shrink-0 cursor-pointer",
+            children: /* @__PURE__ */ r(x, { label: `+${n.length - m}` })
+          }
+        ),
+        !s && /* @__PURE__ */ r(
+          "input",
+          {
+            id: E,
+            type: "text",
+            value: h,
+            onChange: (e) => R(e.target.value),
+            onKeyDown: Q,
+            onBlur: Y,
+            className: v(
+              "dial-input outline-none !border-none w-full flex-1 !p-1 !h-auto",
+              i ? "min-w-0" : "min-w-[100px]"
+            ),
+            placeholder: X ?? "",
+            disabled: c
+          }
+        ),
+        i && /* @__PURE__ */ N(
+          "div",
+          {
+            className: "absolute left-0 top-0 invisible pointer-events-none h-0 overflow-hidden whitespace-nowrap",
+            "aria-hidden": !0,
+            children: [
+              n.map((e, t) => /* @__PURE__ */ r(
+                "div",
+                {
+                  ref: q(t),
+                  className: "inline-flex shrink-0",
+                  children: /* @__PURE__ */ r(
+                    x,
+                    {
+                      label: e,
+                      className: V,
+                      closable: !c && !s,
+                      onRemove: !c && !s ? () => A(t) : void 0
+                    }
+                  )
+                },
+                `measure-${e}-${t}`
+              )),
+              /* @__PURE__ */ r("div", { ref: S, className: "inline-flex shrink-0", children: /* @__PURE__ */ r(x, { label: `+${n.length}` }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return s ? L : /* @__PURE__ */ N("div", { className: "flex flex-col gap-2 w-full", children: [
+    /* @__PURE__ */ r(y, { label: I, required: K, htmlFor: E }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: v(
+          "dial-input min-h-[38px] p-[6px]",
+          F && "dial-input-error",
+          c && "dial-input-disable"
+        ),
+        children: L
+      }
+    ),
+    Z()
+  ] });
+};
+export {
+  fe as DialTagInput
+};

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,43 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import "react";
+import { mergeClasses as l } from "../../utils/merge-classes.js";
+import { DialErrorText as u, DialCaptionText as g } from "../CaptionText/CaptionText.js";
+import { DialLabel as v } from "../Label/Label.js";
+const b = ({
+  className: s = "",
+  value: o,
+  onChange: m,
+  error: t,
+  containerClassName: n,
+  resize: x = !1,
+  labelProps: i,
+  caption: d,
+  id: r,
+  ...a
+}) => {
+  const p = l(
+    "dial-textarea dial-input px-3 py-2",
+    a.invalid && "dial-input-error",
+    a.disabled && "dial-input-disable",
+    x ? "resize" : "resize-none",
+    s
+  );
+  return /* @__PURE__ */ f("div", { className: l("flex flex-col gap-y-1", n), children: [
+    i && /* @__PURE__ */ e(v, { ...i, htmlFor: r }),
+    /* @__PURE__ */ e(
+      "textarea",
+      {
+        id: r,
+        value: o || "",
+        className: p,
+        onChange: (c) => m?.(c.currentTarget.value),
+        ...a
+      }
+    ),
+    /* @__PURE__ */ e(u, { text: t }),
+    !t && /* @__PURE__ */ e(g, { text: d })
+  ] });
+};
+export {
+  b as DialTextarea
+};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,30 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { DialTooltipContainer as s } from "./TooltipContainer.js";
+import { DialTooltipContent as n } from "./TooltipContent.js";
+import { DialTooltipTrigger as c } from "./TooltipTrigger.js";
+import i from "classnames";
+const h = ({
+  hideTooltip: t,
+  tooltip: r,
+  children: m,
+  triggerClassName: a,
+  contentClassName: e,
+  ...l
+}) => /* @__PURE__ */ p(s, { ...l, children: [
+  /* @__PURE__ */ o(c, { className: i(a, "truncate"), children: m }),
+  /* @__PURE__ */ o(
+    n,
+    {
+      className: i(
+        "text-primary",
+        e,
+        "max-w-[300px]",
+        (t || !r) && "hidden"
+      ),
+      children: r
+    }
+  )
+] });
+export {
+  h as DialTooltip
+};

package/dist/components/Tooltip/TooltipContainer.js

@@ -0,0 +1,12 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useTooltip as e, TooltipContext as p } from "./TooltipContext.js";
+const m = ({
+  children: o,
+  ...t
+}) => {
+  const r = e(t);
+  return /* @__PURE__ */ i(p.Provider, { value: r, children: o });
+};
+export {
+  m as DialTooltipContainer
+};

package/dist/components/Tooltip/TooltipContent.js

@@ -0,0 +1,40 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { useMergeRefs as n, FloatingPortal as p, FloatingArrow as m } from "@floating-ui/react";
+import c from "classnames";
+import { useRef as f } from "react";
+import { useHasHover as d } from "../../hooks/use-has-hover.js";
+import { useTooltipContext as x } from "./TooltipContext.js";
+const F = ({ style: e, ...o }) => {
+  const r = x(), s = d(), a = f(null), l = n([r.refs.setFloating, a]);
+  return !r.open || !s ? null : /* @__PURE__ */ t(p, { id: "tooltip-portal", children: /* @__PURE__ */ i(
+    "div",
+    {
+      ref: l,
+      style: {
+        ...r.floatingStyles,
+        ...e
+      },
+      ...r.getFloatingProps(o),
+      className: c(
+        "z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-layer-0 px-2 py-1 dial-tiny-text shadow max-w-[300px]",
+        r.getFloatingProps(o).className
+      ),
+      children: [
+        o.children,
+        /* @__PURE__ */ t(
+          m,
+          {
+            ref: r.arrowRef,
+            context: r.context,
+            fill: "currentColor",
+            strokeWidth: 1,
+            className: "stroke-primary text-[var(--bg-layer-0,_#000000)]"
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  F as DialTooltipContent
+};

package/dist/components/Tooltip/TooltipContext.js

@@ -0,0 +1,66 @@
+import { useFloating as g, autoUpdate as v, offset as C, flip as O, shift as T, arrow as E, useHover as R, useFocus as A, useDismiss as I, useRole as H, useInteractions as y } from "@floating-ui/react";
+import { useState as D, useRef as F, useEffect as G, useMemo as M, createContext as S, useContext as U } from "react";
+const k = 7, P = 2, W = S(null), q = () => {
+  const n = U(W);
+  if (n == null)
+    throw new Error("Tooltip components must be wrapped in <Tooltip />");
+  return n;
+}, z = ({
+  initialOpen: n = !1,
+  placement: r = "bottom",
+  isTriggerClickable: a = !1,
+  open: s,
+  onOpenChange: f
+} = {}) => {
+  const [p, d] = D(n), c = F(null), t = s ?? p, o = f ?? d, e = g({
+    placement: r,
+    open: t,
+    onOpenChange: o,
+    whileElementsMounted: v,
+    middleware: [
+      C(k + P),
+      O({
+        crossAxis: r.includes("-"),
+        fallbackAxisSideDirection: "start",
+        padding: 5
+      }),
+      T({ padding: 5 }),
+      E({
+        element: c
+      })
+    ]
+  }), m = R(e.context, {
+    move: !1,
+    enabled: s == null,
+    mouseOnly: a,
+    delay: { open: 500, close: 0 }
+  }), x = A(e.context, {
+    enabled: s == null
+  }), b = I(e.context), h = H(e.context, { role: "tooltip" }), l = y([m, x, b, h]);
+  return G(() => {
+    if (!t) return;
+    const i = e.refs.reference.current;
+    if (!(i instanceof Element)) return;
+    const u = new IntersectionObserver(
+      ([w]) => {
+        w.isIntersecting || o(!1);
+      },
+      { root: null, threshold: 0 }
+    );
+    return u.observe(i), () => u.disconnect();
+  }, [t, e.refs.reference, o]), M(
+    () => ({
+      open: t,
+      setOpen: o,
+      arrowRef: c,
+      ...l,
+      ...e
+    }),
+    [t, o, l, e]
+  );
+};
+export {
+  W as TooltipContext,
+  z as useTooltip,
+  q as useTooltipContext
+};

package/dist/components/Tooltip/TooltipTrigger.js

@@ -0,0 +1,33 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useTooltipContext as l } from "./TooltipContext.js";
+import { useMergeRefs as a } from "@floating-ui/react";
+import { isValidElement as m, cloneElement as p } from "react";
+const R = ({
+  children: e,
+  asChild: n = !1,
+  ...t
+}) => {
+  const o = l(), r = n && m(e), s = r ? e.props?.ref : null, f = a([
+    o.refs.setReference,
+    ...s ? [s] : []
+  ]);
+  return r ? p(
+    e,
+    o.getReferenceProps({
+      ...e.props,
+      ...t,
+      ref: f
+    })
+  ) : /* @__PURE__ */ i(
+    "span",
+    {
+      ref: f,
+      ...o.getReferenceProps(t),
+      className: t.className ?? "dial-tooltip-trigger text-start",
+      children: e
+    }
+  );
+};
+export {
+  R as DialTooltipTrigger
+};