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

package/dist/components/New/Dropdown/Dropdown.js

@@ -0,0 +1,304 @@
+import { jsxs as A, Fragment as E, jsx as s } from "react/jsx-runtime";
+import { useFloating as pe, autoUpdate as me, offset as he, autoPlacement as ye, flip as ge, shift as we, size as xe, useClick as ve, useHover as ke, useDismiss as be, useRole as Ce, useInteractions as Ee, FloatingPortal as Pe, FloatingFocusManager as Me } from "@floating-ui/react";
+import { useState as _, useRef as De, useCallback as m, useId as Ae, useEffect as $, useMemo as Ie } from "react";
+import { DropdownTrigger as g, DropdownItemType as W } from "../../../types/dropdown.js";
+import { MenuItemMark as Ne } from "../../../types/menu-item.js";
+import { dropdownGap as w, dropdownDividerClassName as Oe, dropdownBaseClassName as Fe, dropdownListBaseClassName as Re } from "./constants.js";
+import { CloseButton as Se } from "../CloseButton/CloseButton.js";
+import { MenuItem as Le } from "../MenuItem/MenuItem.js";
+import { useThemeScope as Be } from "../ThemeScope/ThemeScope.js";
+import { mergeClasses as x } from "../../../utils/merge-classes.js";
+import { DropdownSubMenuItem as Te } from "./DropdownSubMenuItem.js";
+import { resolveItemMark as Ye, getItemRole as _e } from "./item-mark.js";
+const $e = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', We = (r) => !r.hasAttribute("disabled") && r.getAttribute("aria-disabled") !== "true", je = ["ArrowDown", "ArrowUp", "Home", "End"], Ke = (r, u, d) => {
+  if (r === "Home") return 0;
+  if (r === "End") return d - 1;
+  const a = r === "ArrowDown" ? 1 : -1;
+  return u === -1 ? a === 1 ? 0 : d - 1 : (u + a + d) % d;
+}, Ue = (r) => "clientWidth" in r ? r.clientWidth : r.getBoundingClientRect?.()?.width ?? 0, ot = ({
+  children: r,
+  items: u,
+  onItemClick: d,
+  menuHeader: a,
+  menuFooter: h,
+  renderOverlay: P,
+  trigger: f = [g.Click],
+  placement: I,
+  disabled: i = !1,
+  open: N,
+  defaultOpen: j = !1,
+  onOpenChange: O,
+  closable: K = !1,
+  onClose: U,
+  className: V,
+  overlayContentClassName: F,
+  separatorClassName: R,
+  listClassName: X,
+  outsidePressIgnoreRef: S,
+  outsideClosable: q = !0,
+  allowedPlacements: z,
+  anchorToMouse: v = !1,
+  matchReferenceWidth: M = !0,
+  maxDropdownHeight: L
+}) => {
+  const G = Be(), [H, J] = _(j), D = N !== void 0, c = D ? !!N : H, k = De(null), [Q, Z] = _(!0), n = m(
+    (e, t, o) => {
+      e && Z(o !== "hover" && o !== "safe-polygon"), D || J(e), O?.(e);
+    },
+    [D, O]
+  ), B = Ae(), ee = I === void 0, { refs: p, floatingStyles: te, context: y } = pe({
+    placement: I,
+    open: c,
+    onOpenChange: n,
+    whileElementsMounted: me,
+    middleware: [
+      he({ mainAxis: w, crossAxis: 0 }),
+      ee ? ye({
+        alignment: "start",
+        crossAxis: !0,
+        padding: w,
+        allowedPlacements: z
+      }) : ge({ padding: w }),
+      we({ padding: w }),
+      xe({
+        padding: w,
+        apply({ availableWidth: e, availableHeight: t, elements: o }) {
+          const l = o.floating, C = Ue(o.reference);
+          l.style.setProperty(
+            "--fui-available-height",
+            `${Math.floor(t)}px`
+          ), l.style.setProperty(
+            "--reference-width",
+            M ? `${Math.round(C)}px` : "0px"
+          ), M ? l.style.minWidth = `${Math.round(C)}px` : l.style.removeProperty("min-width"), l.style.maxWidth = `${Math.floor(e)}px`;
+          const Y = Math.floor(t);
+          l.style.maxHeight = `${L ? Math.min(Y, L) : Y}px`;
+        }
+      })
+    ]
+  }), ne = ve(y, {
+    enabled: f.includes(g.Click) && !i
+  }), oe = ke(y, {
+    enabled: f.includes(g.Hover) && !i,
+    move: !1,
+    restMs: 40,
+    delay: { open: 80, close: 80 }
+  }), re = be(y, {
+    bubbles: !0,
+    referencePress: !1,
+    outsidePress: (e) => {
+      if (!q) return !1;
+      const t = e.target;
+      return !(S?.current && t instanceof Node && S.current.contains(t));
+    }
+  }), se = Ce(y, { role: "menu" }), { getReferenceProps: le, getFloatingProps: ie } = Ee([
+    ne,
+    oe,
+    re,
+    se
+  ]), b = m(
+    (e, t) => {
+      p.setPositionReference({
+        getBoundingClientRect: () => ({
+          width: 0,
+          height: 0,
+          x: e,
+          y: t,
+          top: t,
+          left: e,
+          right: e,
+          bottom: t
+        })
+      });
+    },
+    [p]
+  ), ce = m(
+    (e) => {
+      !f.includes(g.ContextMenu) || i || (e.preventDefault(), v && (b(e.clientX, e.clientY), k.current = document.elementFromPoint(
+        e.clientX,
+        e.clientY
+      )), n(!0));
+    },
+    [v, i, n, b, f]
+  ), ae = m(
+    (e) => {
+      !v || i || (f.includes(g.ContextMenu) && c && n(!1), b(e.clientX, e.clientY), k.current = document.elementFromPoint(
+        e.clientX,
+        e.clientY
+      ));
+    },
+    [v, i, b, c, f, n]
+  );
+  $(() => {
+    i && c && n(!1);
+  }, [i, c, n]);
+  const ue = m(
+    (e) => {
+      if (e.defaultPrevented || !je.includes(e.key)) return;
+      const t = Array.from(
+        e.currentTarget.querySelectorAll(
+          $e
+        )
+      ).filter(We);
+      if (t.length === 0) return;
+      e.preventDefault();
+      const o = e.currentTarget.ownerDocument.activeElement, l = t.findIndex((C) => C === o);
+      t[Ke(e.key, l, t.length)]?.focus();
+    },
+    []
+  ), T = m(
+    (e) => (t) => {
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), d?.({ key: e.key, domEvent: t }), e.selectable || n(!1));
+    },
+    [d, n]
+  ), de = Ie(() => P ? P() : u ? /* @__PURE__ */ A(E, { children: [
+    a && /* @__PURE__ */ s(E, { children: typeof a == "function" ? a() : a }),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        role: "none",
+        className: x("py-1", F),
+        "aria-label": "dropdown",
+        children: u.map((e) => {
+          if (e.type === W.Divider)
+            return /* @__PURE__ */ s(
+              "div",
+              {
+                role: "separator",
+                className: x(
+                  Oe,
+                  R
+                )
+              },
+              e.key
+            );
+          if (e.type === W.PlainText)
+            return /* @__PURE__ */ s(
+              "div",
+              {
+                className: x(
+                  "px-3 py-2 text-secondary dial-caption-text",
+                  e.className
+                ),
+                children: e.label
+              },
+              e.key
+            );
+          if (e.children?.length)
+            return /* @__PURE__ */ s(
+              Te,
+              {
+                item: e,
+                onRootClose: () => n(!1)
+              },
+              e.key
+            );
+          const t = Ye(e), o = _e(e);
+          return /* @__PURE__ */ s(
+            Le,
+            {
+              role: o,
+              "aria-checked": o === "menuitem" ? void 0 : !!e.checked,
+              "aria-current": t === Ne.Highlight && e.checked ? !0 : void 0,
+              "aria-disabled": !!e.disabled,
+              disabled: e.disabled,
+              mark: t,
+              selected: !!e.checked,
+              danger: e.danger,
+              icon: e.icon,
+              label: e.label,
+              className: e.className,
+              rightControl: e.rightControl,
+              onClick: T(e),
+              children: e.renderItem?.(e)
+            },
+            e.key
+          );
+        })
+      }
+    ),
+    h && /* @__PURE__ */ s(E, { children: typeof h == "function" ? h() : h })
+  ] }) : null, [
+    T,
+    u,
+    h,
+    a,
+    P,
+    n,
+    F,
+    R
+  ]), fe = le({
+    onContextMenu: ce,
+    onMouseDown: ae
+  });
+  return $(() => {
+    if (!c) return;
+    const e = p.reference.current;
+    let t = null;
+    if (e instanceof Element ? t = e : k.current instanceof Element && (t = k.current), !t) return;
+    const o = new IntersectionObserver(
+      ([l]) => {
+        l.isIntersecting || n(!1);
+      },
+      { root: null, threshold: 0 }
+    );
+    return o.observe(t), () => o.disconnect();
+  }, [c, p.reference, n]), /* @__PURE__ */ A(E, { children: [
+    /* @__PURE__ */ s(
+      "span",
+      {
+        ref: p.setReference,
+        className: x(
+          Fe,
+          i && "!cursor-not-allowed opacity-75",
+          V
+        ),
+        "aria-haspopup": "menu",
+        "aria-expanded": c,
+        "aria-controls": B,
+        ...fe,
+        children: r
+      }
+    ),
+    c && /* @__PURE__ */ s(Pe, { children: /* @__PURE__ */ s(
+      Me,
+      {
+        context: y,
+        modal: !1,
+        initialFocus: Q ? 0 : -1,
+        returnFocus: !0,
+        children: /* @__PURE__ */ A(
+          "div",
+          {
+            id: B,
+            ref: p.setFloating,
+            style: te,
+            className: x(
+              Re,
+              !M && "w-max",
+              "overflow-auto",
+              G,
+              X
+            ),
+            ...ie({ onKeyDown: ue }),
+            children: [
+              K && /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ s(
+                Se,
+                {
+                  ariaLabel: "Close dropdown",
+                  onClose: (e) => {
+                    U?.(e), n(!1);
+                  }
+                }
+              ) }),
+              de
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+};
+export {
+  ot as Dropdown
+};

package/dist/components/New/Dropdown/DropdownSubMenuItem.js

@@ -0,0 +1,85 @@
+import { jsxs as t, Fragment as d, jsx as a } from "react/jsx-runtime";
+import { useCallback as g } from "react";
+import { MenuItem as l } from "../MenuItem/MenuItem.js";
+import { MenuItemMark as k } from "../../../types/menu-item.js";
+import { useSubMenuFloating as M, SubMenuPanel as C } from "../../../utils/sub-menu-floating.js";
+import { getItemRole as I, resolveItemMark as m } from "./item-mark.js";
+import { dropdownGap as F, submenuCaretIcon as S, dropdownSubMenuClassName as y } from "./constants.js";
+const R = ({
+  item: r,
+  onRootClose: o
+}) => {
+  const {
+    isOpen: s,
+    refs: u,
+    floatingStyles: b,
+    context: p,
+    getReferenceProps: c,
+    getFloatingProps: f
+  } = M(F, "menu", !!r.disabled), i = g(
+    (e) => (n) => {
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: n }), e.selectable || o());
+    },
+    [o]
+  );
+  return /* @__PURE__ */ t(d, { children: [
+    /* @__PURE__ */ a(
+      l,
+      {
+        ref: u.setReference,
+        role: "menuitem",
+        "aria-haspopup": "menu",
+        "aria-expanded": s,
+        "aria-disabled": !!r.disabled,
+        disabled: r.disabled,
+        icon: r.icon,
+        label: r.label,
+        trailing: S,
+        className: r.className,
+        ...c(),
+        children: r.renderItem?.(r)
+      }
+    ),
+    s && /* @__PURE__ */ a(
+      C,
+      {
+        refs: u,
+        floatingStyles: b,
+        context: p,
+        getFloatingProps: f,
+        role: "menu",
+        surfaceClassName: y,
+        children: r.renderSubMenu ? r.renderSubMenu() : /* @__PURE__ */ t(d, { children: [
+          r.menuHeader && (typeof r.menuHeader == "function" ? r.menuHeader() : r.menuHeader),
+          r.children.map((e) => {
+            const n = I(e);
+            return /* @__PURE__ */ a(
+              l,
+              {
+                role: n,
+                "aria-checked": n === "menuitem" ? void 0 : !!e.checked,
+                "aria-current": m(e) === k.Highlight && e.checked ? !0 : void 0,
+                "aria-disabled": !!e.disabled,
+                disabled: e.disabled,
+                mark: m(e),
+                selected: !!e.checked,
+                danger: e.danger,
+                icon: e.icon,
+                label: e.label,
+                className: e.className,
+                rightControl: e.rightControl,
+                onClick: i(e),
+                children: e.renderItem?.(e)
+              },
+              e.key
+            );
+          }),
+          r.menuFooter && (typeof r.menuFooter == "function" ? r.menuFooter() : r.menuFooter)
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  R as DropdownSubMenuItem
+};

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

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import { IconChevronRight as e } from "@tabler/icons-react";
+import { overlayGap as s, overlaySubMenuClassName as a, overlaySurfaceClassName as t } from "../constants/overlay.js";
+import { DIAL_KIT_ICON_STROKE as n } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as m } from "../../../constants/icon.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+const C = o(
+  "flex items-center gap-2 align-middle",
+  "h-auto px-0 bg-transparent border-0"
+), f = o(
+  "z-[53] focus-visible:outline-none",
+  t
+), b = a, I = "my-1 border-t border-tertiary", N = s, v = /* @__PURE__ */ r(
+  e,
+  {
+    size: m.SM,
+    stroke: n,
+    "aria-hidden": "true"
+  }
+);
+export {
+  C as dropdownBaseClassName,
+  I as dropdownDividerClassName,
+  N as dropdownGap,
+  f as dropdownListBaseClassName,
+  b as dropdownSubMenuClassName,
+  v as submenuCaretIcon
+};

package/dist/components/New/Dropdown/item-mark.js

@@ -0,0 +1,6 @@
+import { MenuItemMark as t } from "../../../types/menu-item.js";
+const r = (e) => e.mark ?? (e.selectable ? t.Checkbox : t.None), m = (e) => e.selectable ? "menuitemcheckbox" : r(e) === t.Check ? "menuitemradio" : "menuitem";
+export {
+  m as getItemRole,
+  r as resolveItemMark
+};

package/dist/components/New/EllipsisTooltip/EllipsisTooltip.js

@@ -0,0 +1,45 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { useMemo as C } from "react";
+import { mergeClasses as T } from "../../../utils/merge-classes.js";
+import { TooltipContainer as x } from "../Tooltip/TooltipContainer.js";
+import { TooltipContent as g } from "../Tooltip/TooltipContent.js";
+import { TooltipTrigger as h } from "../Tooltip/TooltipTrigger.js";
+import { useTruncation as b } from "./use-truncation.js";
+const y = ({
+  text: r,
+  className: m,
+  contentClassName: a,
+  hideTooltip: n = !1,
+  id: p,
+  customTooltipContent: s,
+  ...u
+}) => {
+  const { ref: c, isTruncated: e, textContent: f, remeasure: i } = b(r), o = typeof r == "string" ? r : f, l = C(() => n || !e ? null : s ?? o, [s, o, n, e]);
+  return /* @__PURE__ */ d(x, { ...u, children: [
+    /* @__PURE__ */ t(
+      h,
+      {
+        asChild: !0,
+        onMouseEnter: i,
+        onFocusCapture: i,
+        children: /* @__PURE__ */ t(
+          "span",
+          {
+            id: p,
+            ref: c,
+            "aria-label": e && o ? o : void 0,
+            className: T(
+              "block min-w-0 max-w-full flex-1 truncate text-start",
+              m
+            ),
+            children: r
+          }
+        )
+      }
+    ),
+    !!l && /* @__PURE__ */ t(g, { className: a, children: l })
+  ] });
+};
+export {
+  y as EllipsisTooltip
+};

package/dist/components/New/EllipsisTooltip/use-truncation.js

@@ -0,0 +1,18 @@
+import { useRef as c, useState as u, useCallback as f, useEffect as i } from "react";
+import { scheduleMeasure as T, observeElementSize as p } from "../../../utils/element-size-observer.js";
+const h = (s) => {
+  const n = c(null), [l, a] = u(!1), [m, d] = u(""), o = c(!1), t = f(() => {
+    const e = n.current;
+    e && (o.current && d(e.textContent ?? ""), a(e.scrollWidth > e.clientWidth));
+  }, []), r = f(() => T(t), [t]);
+  return i(() => {
+    const e = n.current;
+    if (e)
+      return p(e, t);
+  }, [t]), i(() => {
+    o.current = typeof s != "string", r();
+  }, [s, r]), { ref: n, isTruncated: l, textContent: m, remeasure: r };
+};
+export {
+  h as useTruncation
+};

package/dist/components/New/FileDropzone/FileDropzone.js

@@ -0,0 +1,135 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { IconUpload as T } from "@tabler/icons-react";
+import { useId as $, useState as w, useRef as G, useCallback as t } from "react";
+import { ErrorText as R } from "../CaptionText/CaptionText.js";
+import { Label as U } from "../Label/Label.js";
+import { DIAL_KIT_ICON_STROKE as Z } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as q } from "../../../constants/icon.js";
+import { resolveAccessibleName as B } from "../../../utils/accessible-name.js";
+import { matchesAccept as E } from "../../../utils/file-accept.js";
+import { mergeClasses as d } from "../../../utils/merge-classes.js";
+const er = ({
+  labelProps: g,
+  label: h,
+  description: y,
+  onChange: x,
+  onReject: v,
+  accept: n,
+  multiple: f = !1,
+  disabled: r = !1,
+  errorText: a,
+  icon: L,
+  id: C,
+  ariaLabel: O,
+  className: _
+}) => {
+  const F = $(), s = C ?? `file-dropzone-${F}`, D = a ? `${s}-error` : void 0, [m, I] = w(!1), c = G(0), i = t(
+    (e) => {
+      if (e.length === 0) return;
+      const b = f ? e : e.slice(0, 1), N = b.filter((p) => E(p, n)), A = b.filter((p) => !E(p, n));
+      A.length > 0 && v?.(A), N.length > 0 && x(N);
+    },
+    [n, f, x, v]
+  ), j = t(
+    (e) => {
+      i(Array.from(e.target.files ?? [])), e.target.value = "";
+    },
+    [i]
+  ), l = t(() => {
+    c.current = 0, I(!1);
+  }, []), k = t(
+    (e) => {
+      r || (e.preventDefault(), c.current += 1, I(!0));
+    },
+    [r]
+  ), z = t(
+    (e) => {
+      r || (e.preventDefault(), e.dataTransfer.dropEffect = "copy");
+    },
+    [r]
+  ), S = t(() => {
+    r || (c.current -= 1, c.current <= 0 && l());
+  }, [r, l]), K = t(
+    (e) => {
+      e.preventDefault(), !r && (l(), i(Array.from(e.dataTransfer?.files ?? [])));
+    },
+    [r, l, i]
+  );
+  return /* @__PURE__ */ u("div", { className: "flex flex-col gap-1", children: [
+    g && /* @__PURE__ */ o(U, { ...g, htmlFor: s }),
+    /* @__PURE__ */ o(
+      "input",
+      {
+        id: s,
+        type: "file",
+        accept: n,
+        multiple: f,
+        disabled: r,
+        onChange: j,
+        "aria-label": B(
+          typeof h != "string" ? O : void 0
+        ),
+        "aria-describedby": D,
+        "aria-invalid": a ? !0 : void 0,
+        className: "peer sr-only"
+      }
+    ),
+    /* @__PURE__ */ u(
+      "label",
+      {
+        htmlFor: s,
+        onDragEnter: k,
+        onDragOver: z,
+        onDragLeave: S,
+        onDrop: K,
+        className: d(
+          "flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed px-6 py-10 text-center",
+          "transition-colors motion-reduce:transition-none",
+          "peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
+          r ? "cursor-not-allowed border-secondary bg-layer-sunken" : "cursor-pointer bg-layer-base",
+          !r && m && "border-accent bg-control-accent-alpha",
+          !r && !m && "border-secondary hover:border-accent",
+          a && !m && "border-error hover:border-error",
+          _
+        ),
+        children: [
+          L ?? /* @__PURE__ */ o(
+            T,
+            {
+              size: q.LG,
+              stroke: Z,
+              "aria-hidden": "true",
+              className: r ? "text-control-disable-primary" : "text-secondary"
+            }
+          ),
+          /* @__PURE__ */ u("span", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ o(
+              "span",
+              {
+                className: d(
+                  "dial-small-text",
+                  r ? "text-control-disable-primary" : "text-primary"
+                ),
+                children: h
+              }
+            ),
+            y && /* @__PURE__ */ o(
+              "span",
+              {
+                className: d(
+                  "dial-tiny-text",
+                  r ? "text-control-disable-primary" : "text-secondary"
+                ),
+                children: y
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(R, { id: D, text: a })
+  ] });
+};
+export {
+  er as FileDropzone
+};

package/dist/components/New/FolderPath/FolderPath.js

@@ -0,0 +1,64 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IconFolder as p, IconChevronRight as I } from "@tabler/icons-react";
+import { DialBreadcrumb as f } from "../../Breadcrumb/Breadcrumb.js";
+import { DialIcon as t } from "../../Icon/Icon.js";
+import { DIAL_KIT_ICON_STROKE as s } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as h } from "../../../constants/icon.js";
+import { mergeClasses as x } from "../../../utils/merge-classes.js";
+const F = ({
+  segments: r,
+  labelClassName: l = "dial-small-text",
+  leafClassName: m = "dial-small-semi-text",
+  className: i,
+  ariaLabel: c = "Folder path"
+}) => {
+  const n = /* @__PURE__ */ e(
+    t,
+    {
+      icon: /* @__PURE__ */ e(
+        p,
+        {
+          size: h.SM,
+          stroke: s,
+          "aria-hidden": "true"
+        }
+      ),
+      className: "text-secondary"
+    }
+  ), d = r.map((o, a) => ({
+    label: a === r.length - 1 ? /* @__PURE__ */ e("span", { className: m, children: o }) : o,
+    disabled: !0,
+    ...a === 0 ? { iconBefore: n } : {}
+  }));
+  return /* @__PURE__ */ e(
+    f,
+    {
+      className: i,
+      ariaLabel: c,
+      separator: /* @__PURE__ */ e(
+        t,
+        {
+          icon: /* @__PURE__ */ e(
+            I,
+            {
+              size: 14,
+              stroke: s,
+              "aria-hidden": "true",
+              className: "rtl:scale-x-[-1]"
+            }
+          ),
+          className: "text-secondary"
+        }
+      ),
+      pathItems: d,
+      labelClassName: x(
+        l,
+        "text-secondary",
+        "!cursor-default"
+      )
+    }
+  );
+};
+export {
+  F as FolderPath
+};