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

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

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

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

@@ -0,0 +1,105 @@
+import { jsx as r, jsxs as c, Fragment as v } from "react/jsx-runtime";
+import { FloatingNode as N } from "@floating-ui/react";
+import { useCallback as F, Fragment as I } from "react";
+import { InteractiveTooltip as u } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { MenuItem as d } from "../MenuItem/MenuItem.js";
+import { MenuItemMark as M } from "../../../types/menu-item.js";
+import { useSubMenuFloating as T, SubMenuPanel as S } from "../../../utils/sub-menu-floating.js";
+import { getItemRole as y, resolveItemMark as m } from "./item-mark.js";
+import { dropdownGap as x, submenuCaretIcon as H, dropdownSubMenuClassName as w } from "./constants.js";
+const q = ({
+  item: n,
+  onRootClose: a
+}) => {
+  const {
+    isOpen: t,
+    nodeId: p,
+    refs: s,
+    floatingStyles: b,
+    context: f,
+    getReferenceProps: g,
+    getFloatingProps: C
+  } = T(x, "menu", !!n.disabled), k = F(
+    (e) => (o) => {
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: o }), e.selectable || a());
+    },
+    [a]
+  ), l = /* @__PURE__ */ r(
+    d,
+    {
+      ref: s.setReference,
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": t,
+      "aria-disabled": !!n.disabled,
+      disabled: n.disabled,
+      icon: n.icon,
+      label: n.label,
+      trailing: H,
+      className: n.className,
+      ...g(),
+      children: n.renderItem?.(n)
+    }
+  );
+  return /* @__PURE__ */ c(N, { id: p, children: [
+    n.interactiveTooltip ? /* @__PURE__ */ r(
+      u,
+      {
+        asChild: !0,
+        placement: n.interactiveTooltip.placement,
+        content: n.interactiveTooltip.content,
+        contentClassName: n.interactiveTooltip.contentClassName,
+        children: l
+      }
+    ) : l,
+    t && /* @__PURE__ */ r(
+      S,
+      {
+        refs: s,
+        floatingStyles: b,
+        context: f,
+        getFloatingProps: C,
+        role: "menu",
+        surfaceClassName: w,
+        children: n.renderSubMenu ? n.renderSubMenu() : /* @__PURE__ */ c(v, { children: [
+          n.menuHeader && (typeof n.menuHeader == "function" ? n.menuHeader() : n.menuHeader),
+          n.children.map((e) => {
+            const o = y(e), i = /* @__PURE__ */ r(
+              d,
+              {
+                role: o,
+                "aria-checked": o === "menuitem" ? void 0 : !!e.checked,
+                "aria-current": m(e) === M.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: k(e),
+                children: e.renderItem?.(e)
+              }
+            );
+            return /* @__PURE__ */ r(I, { children: e.interactiveTooltip ? /* @__PURE__ */ r(
+              u,
+              {
+                asChild: !0,
+                placement: e.interactiveTooltip.placement,
+                content: e.interactiveTooltip.content,
+                contentClassName: e.interactiveTooltip.contentClassName,
+                children: i
+              }
+            ) : i }, e.key);
+          }),
+          n.menuFooter && (typeof n.menuFooter == "function" ? n.menuFooter() : n.menuFooter)
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  q 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
+};