@epam/ai-dial-ui-kit 0.14.0-dev.3 → 0.14.0-dev.32

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

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

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

@@ -0,0 +1,127 @@
+import { jsxs as s, Fragment as o, jsx as n } from "react/jsx-runtime";
+import { useCallback as y } from "react";
+import { DialIcon as u } from "../../Icon/Icon.js";
+import { mergeClasses as r } from "../../../utils/merge-classes.js";
+import { useSubMenuFloating as g, SubMenuPanel as C } from "../../../utils/sub-menu-floating.js";
+import { dropdownGap as I, submenuCaretIcon as k, dropdownItemDisabledClassName as b, dropdownItemBaseClassName as c, dropdownSubMenuClassName as F, dropdownItemDangerClassName as S } from "./constants.js";
+const v = ({
+  item: e,
+  onRootClose: d
+}) => {
+  const {
+    isOpen: t,
+    refs: l,
+    floatingStyles: m,
+    context: p,
+    getReferenceProps: i,
+    getFloatingProps: f
+  } = g(I, "menu", !!e.disabled), x = y(
+    (a) => (N) => {
+      a.disabled || (a.onClick?.({ key: a.key, domEvent: N }), d());
+    },
+    [d]
+  );
+  return /* @__PURE__ */ s(o, { children: [
+    /* @__PURE__ */ s(
+      "button",
+      {
+        ref: l.setReference,
+        type: "button",
+        role: "menuitem",
+        "aria-haspopup": "menu",
+        "aria-expanded": t,
+        "aria-disabled": !!e.disabled,
+        disabled: e.disabled,
+        className: r(
+          c,
+          e.disabled && b,
+          e.className
+        ),
+        ...i(),
+        children: [
+          e.renderItem ? e.renderItem(e) : /* @__PURE__ */ s(o, { children: [
+            e.icon && /* @__PURE__ */ n("span", { className: r(e.disabled && "text-secondary"), children: /* @__PURE__ */ n(u, { icon: e.icon }) }),
+            /* @__PURE__ */ n(
+              "span",
+              {
+                className: r(
+                  "flex-1 truncate text-start",
+                  e.disabled && "text-secondary"
+                ),
+                children: e.label
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: r(
+                "ml-auto shrink-0",
+                e.disabled && "text-secondary"
+              ),
+              children: k
+            }
+          )
+        ]
+      }
+    ),
+    t && /* @__PURE__ */ n(
+      C,
+      {
+        refs: l,
+        floatingStyles: m,
+        context: p,
+        getFloatingProps: f,
+        role: "menu",
+        surfaceClassName: F,
+        children: e.renderSubMenu ? e.renderSubMenu() : /* @__PURE__ */ s(o, { children: [
+          e.menuHeader && (typeof e.menuHeader == "function" ? e.menuHeader() : e.menuHeader),
+          e.children.map((a) => /* @__PURE__ */ n(
+            "button",
+            {
+              role: "menuitem",
+              type: "button",
+              "aria-disabled": !!a.disabled,
+              disabled: a.disabled,
+              className: r(
+                c,
+                a.disabled && b,
+                a.danger && S,
+                a.className
+              ),
+              onClick: x(a),
+              children: a.renderItem ? a.renderItem(a) : /* @__PURE__ */ s(o, { children: [
+                a.icon && /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: r(
+                      a.danger && "text-error",
+                      a.disabled && "text-secondary"
+                    ),
+                    children: /* @__PURE__ */ n(u, { icon: a.icon })
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: r(
+                      "flex-1 truncate text-start",
+                      a.danger && "text-error",
+                      a.disabled && "text-secondary"
+                    ),
+                    children: a.label
+                  }
+                )
+              ] })
+            },
+            a.key
+          )),
+          e.menuFooter && (typeof e.menuFooter == "function" ? e.menuFooter() : e.menuFooter)
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  v as DropdownSubMenuItem
+};

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

@@ -0,0 +1,35 @@
+import { jsx as o } from "react/jsx-runtime";
+import { IconChevronRight as s } from "@tabler/icons-react";
+import { overlayGap as r, overlayItemSelectedClassName as a, overlayItemClassName as t, overlaySubMenuClassName as m, overlayItemDisabledClassName as n, overlaySurfaceClassName as d } from "../constants/overlay.js";
+import { DIAL_KIT_ICON_STROKE as l } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as i } from "../../../constants/icon.js";
+import { mergeClasses as e } from "../../../utils/merge-classes.js";
+const b = e(
+  "flex items-center gap-2 align-middle",
+  "h-auto px-0 bg-transparent border-0"
+), w = e(
+  "z-[53] focus-visible:outline-none",
+  d
+), f = m, v = t, y = a, S = e(
+  n,
+  "!cursor-not-allowed"
+), g = "text-error", D = "my-1 border-t border-tertiary", x = r, _ = /* @__PURE__ */ o(
+  s,
+  {
+    size: i.SM,
+    stroke: l,
+    "aria-hidden": "true"
+  }
+);
+export {
+  b as dropdownBaseClassName,
+  D as dropdownDividerClassName,
+  x as dropdownGap,
+  v as dropdownItemBaseClassName,
+  g as dropdownItemDangerClassName,
+  S as dropdownItemDisabledClassName,
+  y as dropdownItemSelectedClassName,
+  w as dropdownListBaseClassName,
+  f as dropdownSubMenuClassName,
+  _ as submenuCaretIcon
+};

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
+};