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

package/dist/components/Dropdown/Dropdown.js

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

package/dist/components/Dropdown/DropdownSubMenuItem.js

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

package/dist/components/Dropdown/constants.js

@@ -0,0 +1,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import o from "classnames";
+import { IconChevronRight as r } from "@tabler/icons-react";
+const n = o(
+  "flex items-center gap-2 align-middle",
+  "h-auto px-0 bg-transparent border-0"
+), d = o(
+  "z-[53] overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none"
+), i = o(
+  "flex w-full cursor-pointer items-center gap-3",
+  "focus-visible:border-none focus-visible:outline-none",
+  "hover:bg-accent-primary-alpha px-3",
+  "dial-small-text h-[34px] rounded text-primary"
+), l = "opacity-75 !cursor-not-allowed", m = "text-error", p = "my-1 border-t border-hover border-secondary", c = 4, u = /* @__PURE__ */ e(r, { size: 14 });
+export {
+  n as dropdownBaseClassName,
+  p as dropdownDividerClassName,
+  c as dropdownGap,
+  i as dropdownItemBaseClassName,
+  m as dropdownItemDangerClassName,
+  l as dropdownItemDisabledClassName,
+  d as dropdownListBaseClassName,
+  u as submenuCaretIcon
+};

package/dist/components/DropdownIcon/DropdownIcon.js

@@ -0,0 +1,92 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { IconChevronDown as O } from "@tabler/icons-react";
+import { useState as j } from "react";
+import { DialDropdown as w } from "../Dropdown/Dropdown.js";
+import { DialIcon as m } from "../Icon/Icon.js";
+import { DIAL_ICON_SIZE as E } from "../../constants/icon.js";
+import { ElementSize as r } from "../../types/size.js";
+import { mergeClasses as o } from "../../utils/merge-classes.js";
+const F = ({
+  icon: p,
+  ariaLabel: b,
+  size: n = r.Standard,
+  disabled: a = !1,
+  className: f,
+  buttonClassName: u,
+  iconClassName: x,
+  caretIcon: h = /* @__PURE__ */ e(O, { size: E.SM }),
+  showCaret: t = !0,
+  placement: y = "bottom-start",
+  matchReferenceWidth: g = !1,
+  open: v,
+  onOpenChange: S,
+  defaultOpen: s = !1,
+  ...z
+}) => {
+  const i = n === r.Small, [D, C] = j(s), l = v ?? D, I = i ? "w-8 px-0" : "w-10 px-0", N = {
+    [r.Small]: "size-5",
+    [r.Standard]: "size-6",
+    [r.Large]: "size-7"
+  };
+  return /* @__PURE__ */ e(
+    w,
+    {
+      ...z,
+      disabled: a,
+      placement: y,
+      matchReferenceWidth: g,
+      className: f,
+      open: l,
+      onOpenChange: (c) => {
+        C(c), S?.(c);
+      },
+      defaultOpen: s,
+      children: /* @__PURE__ */ d(
+        "button",
+        {
+          type: "button",
+          "aria-label": b,
+          disabled: a,
+          className: o(
+            "group flex items-center justify-center rounded border border-transparent bg-layer-4 text-primary",
+            "enabled:hover:bg-accent-primary-alpha enabled:active:bg-controls-accent-primary-alpha-active",
+            "focus-visible:border-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:text-controls-secondary-disable disabled:opacity-75",
+            i ? "h-8 px-2" : "h-10 px-2",
+            t ? void 0 : I,
+            u
+          ),
+          children: [
+            /* @__PURE__ */ e(
+              m,
+              {
+                icon: p,
+                className: o(
+                  "flex items-center justify-center text-inherit",
+                  N[n],
+                  t && "-mr-2",
+                  x
+                )
+              }
+            ),
+            t && /* @__PURE__ */ d("div", { className: "relative z-10 inline-grid size-5 shrink-0 place-items-center", children: [
+              /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full bg-layer-2" }),
+              /* @__PURE__ */ e(
+                m,
+                {
+                  icon: h,
+                  className: o(
+                    "relative flex items-center justify-center text-secondary transition-transform group-hover:text-primary group-disabled:text-controls-secondary-disable",
+                    l && "rotate-180"
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  F as DialDropdownIcon
+};

package/dist/components/EllipsisTooltip/EllipsisTooltip.js

@@ -0,0 +1,75 @@
+import { jsxs as M, jsx as a } from "react/jsx-runtime";
+import { useRef as N, useState as f, useCallback as p, useEffect as d, useMemo as h } from "react";
+import { DialTooltipContainer as S } from "../Tooltip/TooltipContainer.js";
+import { DialTooltipContent as j } from "../Tooltip/TooltipContent.js";
+import { DialTooltipTrigger as k } from "../Tooltip/TooltipTrigger.js";
+import { tooltipContentBaseClassName as v } from "./constants.js";
+import { scheduleMeasure as w, observeElementSize as F } from "../../utils/element-size-observer.js";
+import { mergeClasses as C } from "../../utils/merge-classes.js";
+const G = ({
+  text: r,
+  className: T,
+  contentClassName: x,
+  hideTooltip: c,
+  id: E,
+  customTooltipContent: n,
+  ...b
+}) => {
+  const s = N(null), [l, g] = f(!1), [u, D] = f(""), o = p(() => {
+    const e = s.current;
+    e && (D(e.textContent ?? ""), g(e.scrollWidth > e.clientWidth));
+  }, []), t = p(
+    () => w(o),
+    [o]
+  );
+  d(() => {
+    const e = s.current;
+    if (e)
+      return F(e, o);
+  }, [o]), d(() => {
+    t();
+  }, [r, t]);
+  const i = h(
+    () => typeof r == "string" ? r : u,
+    [u, r]
+  ), m = h(() => c ? "" : n || (l ? i : ""), [n, i, c, l]);
+  return /* @__PURE__ */ M(S, { ...b, children: [
+    /* @__PURE__ */ a(
+      k,
+      {
+        asChild: !0,
+        onMouseEnter: t,
+        onFocusCapture: t,
+        children: /* @__PURE__ */ a(
+          "span",
+          {
+            id: E,
+            className: C(
+              "block truncate flex-1 min-w-0 max-w-full text-start",
+              T
+            ),
+            "aria-label": l ? i : void 0,
+            onMouseEnter: t,
+            onFocus: t,
+            ref: s,
+            children: r
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ a(
+      j,
+      {
+        className: C(
+          v,
+          x,
+          !m && "hidden"
+        ),
+        children: m
+      }
+    )
+  ] });
+};
+export {
+  G as DialEllipsisTooltip
+};

package/dist/components/EllipsisTooltip/constants.js

@@ -0,0 +1,4 @@
+const t = "text-primary";
+export {
+  t as tooltipContentBaseClassName
+};

package/dist/components/FabButton/FabButton.js

@@ -0,0 +1,35 @@
+import { jsx as t } from "react/jsx-runtime";
+import { DialTooltip as s } from "../Tooltip/Tooltip.js";
+import { mergeClasses as u } from "../../utils/merge-classes.js";
+import { resolveAccessibleName as c } from "../../utils/accessible-name.js";
+import { IconArrowNarrowDown as m } from "@tabler/icons-react";
+const x = ({
+  className: r,
+  icon: l,
+  tooltipProps: e,
+  type: a = "button",
+  ...o
+}) => {
+  const n = u(
+    "flex items-center justify-center rounded-full size-[40px]",
+    "dial-kit-enhanced-target",
+    "dial-kit-fab-button disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-focus outline-offset-0",
+    r
+  ), i = /* @__PURE__ */ t(
+    "button",
+    {
+      ...o,
+      type: a,
+      className: n,
+      "aria-label": c(
+        o["aria-label"],
+        e?.tooltip
+      ),
+      children: l || /* @__PURE__ */ t(m, { size: 24, stroke: 1.5, "aria-hidden": "true" })
+    }
+  );
+  return e ? /* @__PURE__ */ t(s, { ...e, children: i }) : i;
+};
+export {
+  x as FabButton
+};

package/dist/components/FileIcon/FileIcon.js

@@ -0,0 +1,37 @@
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import N from "classnames";
+import { DialIcon as b } from "../Icon/Icon.js";
+import { fileIconFactories as a } from "./constants.js";
+import { BASE_ICON_PROPS as l } from "../../constants/icon.js";
+const j = ({
+  extension: o,
+  size: n = l.size,
+  stroke: c = l.stroke,
+  className: m,
+  decorative: f = !1,
+  label: r,
+  indicator: t
+}) => {
+  const i = (() => {
+    if (!o) return "";
+    const e = o.trim().toLowerCase();
+    return e.startsWith(".") ? e : `.${e}`;
+  })(), p = (a[i] ?? a.default)({
+    size: n,
+    stroke: c
+  }), d = typeof r == "string" ? r : `${i.slice(1).toUpperCase()} file icon`;
+  return /* @__PURE__ */ u(
+    "span",
+    {
+      className: N("inline-flex relative", m),
+      ...f ? { "aria-hidden": !0 } : { role: "img", "aria-label": d },
+      children: [
+        /* @__PURE__ */ s(b, { icon: p, className: "inline-block align-middle" }),
+        t && /* @__PURE__ */ s("span", { className: "absolute -bottom-0.5 -left-0.5", children: t })
+      ]
+    }
+  );
+};
+export {
+  j as DialFileIcon
+};