@epam/ai-dial-ui-kit 0.15.0-dev.5 → 0.15.0-dev.51

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

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

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

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

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

@@ -1,28 +1,33 @@
-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 { jsx as e } from "react/jsx-runtime";
+import { IconChevronRight as s } from "@tabler/icons-react";
+import { overlayGap as r, overlaySubMenuClassName as a, overlaySubMenuListClassName as t, overlayListClassName as n, overlaySurfaceClassName as m } from "../constants/overlay.js";
+import { DIAL_KIT_ICON_STROKE as i } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as d } from "../../../constants/icon.js";
 import { mergeClasses as o } from "../../../utils/merge-classes.js";
-const C = o(
+const b = 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,
+  "z-floating focus-visible:outline-none",
+  m
+), I = a, v = t, y = o(
+  n,
+  "py-1"
+), S = "my-1 border-t border-tertiary", w = r, L = /* @__PURE__ */ e(
+  s,
   {
-    size: m.SM,
-    stroke: n,
+    size: d.SM,
+    stroke: i,
     "aria-hidden": "true"
   }
 );
 export {
-  C as dropdownBaseClassName,
-  I as dropdownDividerClassName,
-  N as dropdownGap,
+  b as dropdownBaseClassName,
+  S as dropdownDividerClassName,
+  w as dropdownGap,
+  y as dropdownItemListClassName,
   f as dropdownListBaseClassName,
-  b as dropdownSubMenuClassName,
-  v as submenuCaretIcon
+  I as dropdownSubMenuClassName,
+  v as dropdownSubMenuListClassName,
+  L as submenuCaretIcon
 };

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

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