impact-nova 2.2.6 → 2.2.8

package/dist/components/data/data-table/data-table-saved-views.js

@@ -1,48 +1,48 @@
 import { jsxs as l, Fragment as X, jsx as t } from "react/jsx-runtime";
 import * as n from "react";
-import { ChevronRight as ye, Star as I, Search as we, Bookmark as Ne, Pencil as Te, Bin as Ve } from "impact-nova-icons";
+import { ChevronRight as xe, Star as I, Search as ye, Bookmark as we, Pencil as Ne, Bin as Te } from "impact-nova-icons";
 import { cn as m } from "../../../lib/utils.js";
-import { useImpactNovaI18n as ke } from "../../../i18n/use-impact-nova-i18n.js";
-import { Popover as De, PopoverTrigger as Se, PopoverContent as Ce } from "../../feedback/popover/popover.js";
-import { OverflowTooltip as Z } from "../../feedback/tooltip/overflow-tooltip.js";
+import { useImpactNovaI18n as Ve } from "../../../i18n/use-impact-nova-i18n.js";
+import { Popover as ke, PopoverTrigger as De, PopoverContent as Ce } from "../../feedback/popover/popover.js";
+import { OverflowTooltip as Se } from "../../feedback/tooltip/overflow-tooltip.js";
+import { BadgeOverflowTooltip as ze } from "../../feedback/tooltip/badge-overflow-tooltip.js";
 import { Button as u } from "../../primitives/button/button.js";
-import { Badge as q } from "../../data-display/badge/badge.js";
-import { badgeVariants as ze } from "../../data-display/badge/badge.variants.js";
+import { Badge as Z } from "../../data-display/badge/badge.js";
 import { Input as Me } from "../../forms/input/input.js";
-import { Separator as ee } from "../../data-display/separator/separator.js";
+import { Separator as q } from "../../data-display/separator/separator.js";
 import { Skeleton as R } from "../../data-display/skeleton/skeleton.js";
 import { Prompt as Ae } from "../../forms/prompt/prompt.js";
 function Pe(v) {
   return v.isSystemView ? "system" : v.isDefaultView ? "default" : v.isActive ? "active" : "other";
 }
-const Oe = ["default", "active", "system"], Ge = ({
+const Oe = ["default", "active", "system"], We = ({
   isSaveViewEnabled: v = !0,
   views: o,
-  activeViewSummary: te,
-  viewTypeOptions: ae,
+  activeViewSummary: ee,
+  viewTypeOptions: te,
   menuOpen: E,
-  defaultMenuOpen: ne = !1,
+  defaultMenuOpen: ae = !1,
   onMenuOpenChange: j,
   onSearch: D,
   isLoadingViews: L = !1,
   customListContent: U,
-  disableApply: ie = !1,
-  className: re,
-  onSaveViewClick: le,
-  onApply: se,
-  onCancel: oe,
-  onEditView: de,
-  onDeleteView: ce,
+  disableApply: ne = !1,
+  className: ie,
+  onSaveViewClick: re,
+  onApply: le,
+  onCancel: se,
+  onEditView: oe,
+  onDeleteView: de,
   onSetDefaultView: Q
 }) => {
-  const { t: a } = ke(), S = E !== void 0, [me, N] = n.useState(null), [ue, pe] = n.useState(
-    ne
-  ), p = S ? !!E : ue, f = n.useCallback(
+  const { t: a } = Ve(), C = E !== void 0, [ce, N] = n.useState(null), [me, ue] = n.useState(
+    ae
+  ), p = C ? !!E : me, f = n.useCallback(
     (e) => {
-      S || pe(e), j?.(e);
+      C || ue(e), j?.(e);
     },
-    [S, j]
-  ), [x, C] = n.useState("All"), [T, z] = n.useState(""), [F, M] = n.useState("");
+    [C, j]
+  ), [x, S] = n.useState("All"), [T, z] = n.useState(""), [F, M] = n.useState("");
   n.useEffect(() => {
     const e = window.setTimeout(() => M(T), 300);
     return () => window.clearTimeout(e);
@@ -52,12 +52,12 @@ const Oe = ["default", "active", "system"], Ge = ({
   const Y = n.useMemo(
     () => o.find((e) => e.isActive),
     [o]
-  ), d = Y ?? null, _ = te ?? Y?.viewName ?? a("dataTable.savedViewsNotApplicable"), [V, A] = n.useState(null), [y, $] = n.useState(null), K = n.useRef(!1);
+  ), d = Y ?? null, _ = ee ?? Y?.viewName ?? a("dataTable.savedViewsNotApplicable"), [V, A] = n.useState(null), [y, $] = n.useState(null), K = n.useRef(!1);
   n.useEffect(() => {
     const e = p && !K.current;
     if (K.current = p, e) {
       const i = o.find((c) => c.isActive);
-      A(i?.id ?? null), C("All"), z(""), M("");
+      A(i?.id ?? null), S("All"), z(""), M("");
     }
   }, [p, o]);
   const w = n.useMemo(() => x === "All" ? o : o.filter((e) => e.viewType === x), [o, x]), h = T.trim().toLowerCase(), k = n.useCallback(
@@ -76,27 +76,27 @@ const Oe = ["default", "active", "system"], Ge = ({
   }, [w, h, k]), O = n.useMemo(() => {
     const e = new Set(b.map((i) => i.id));
     return P.filter((i) => !e.has(i.id));
-  }, [P, b]), G = V === null ? null : o.find((e) => e.id === V) ?? null, fe = () => {
-    se?.(G, { activeView: d }), f(!1);
-  }, he = () => {
-    oe?.({ activeView: d, pendingView: G }), f(!1);
-  }, be = (e) => {
+  }, [P, b]), W = V === null ? null : o.find((e) => e.id === V) ?? null, pe = () => {
+    le?.(W, { activeView: d }), f(!1);
+  }, fe = () => {
+    se?.({ activeView: d, pendingView: W }), f(!1);
+  }, he = (e) => {
     f(e), e || (z(""), M(""));
   };
   if (!v)
     return null;
-  const ge = o.length > 0, H = (e, i, c) => {
-    const B = V === e.id, s = me === e.id, J = i === "priority" && !!e.isActive, ve = i === "list" && !!e.isActive, xe = !!(e.isEditable || e.isDeletable), g = !e.hideDefaultStar, W = xe || g;
+  const be = o.length > 0, G = (e, i, c) => {
+    const B = V === e.id, s = ce === e.id, H = i === "priority" && !!e.isActive, ge = i === "list" && !!e.isActive, ve = !!(e.isEditable || e.isDeletable), g = !e.hideDefaultStar, J = ve || g;
     return /* @__PURE__ */ l(
       "div",
       {
         tabIndex: 0,
         className: m(
-          "group mb-1 flex min-w-0 cursor-pointer items-center rounded-lg px-3 py-2 text-left text-sm font-medium font-['Manrope'] transition-all duration-300 relative overflow-hidden",
+          "group mb-1 flex min-w-0 cursor-pointer items-stretch rounded-lg px-3 py-2 text-left text-sm font-medium font-['Manrope'] transition-all duration-300 relative overflow-hidden",
           !s && "hover:bg-canvas-muted",
-          !s && J && !B && "bg-primary/10 dark:bg-primary/15",
+          !s && H && !B && "bg-primary/10 dark:bg-primary/15",
           !s && B && "bg-badge-info-muted text-badge-info-foreground",
-          !s && !B && !J && "text-foreground",
+          !s && !B && !H && "text-foreground",
           s && "pointer-events-none"
         ),
         onClick: () => !s && A(e.id),
@@ -115,12 +115,12 @@ const Oe = ["default", "active", "system"], Ge = ({
             }
           ),
           /* @__PURE__ */ t(
-            Z,
+            Se,
             {
               triggerClassName: m(
-                "relative z-10 block min-w-0 w-full truncate text-start",
-                W && (e.isDefaultView && g ? "pe-7 group-hover:pe-[4.75rem]" : "pe-0 group-hover:pe-[4.75rem]"),
-                ve && "underline decoration-primary decoration-2 underline-offset-2"
+                "relative z-10 block min-w-0 flex-1 self-stretch truncate text-start overflow-hidden",
+                J && (e.isDefaultView && g ? "pe-7 group-hover:pe-[4.75rem]" : "pe-0 group-hover:pe-[4.75rem]"),
+                ge && "underline decoration-primary decoration-2 underline-offset-2"
               ),
               content: e.viewName,
               side: "right",
@@ -128,7 +128,7 @@ const Oe = ["default", "active", "system"], Ge = ({
               children: e.viewName
             }
           ),
-          W ? /* @__PURE__ */ l(
+          J ? /* @__PURE__ */ l(
             "div",
             {
               className: m(
@@ -148,9 +148,9 @@ const Oe = ["default", "active", "system"], Ge = ({
                     ),
                     "aria-label": a("dataTable.savedViewsEdit"),
                     onClick: (r) => {
-                      r.stopPropagation(), r.preventDefault(), f(!1), de?.(e, { activeView: d });
+                      r.stopPropagation(), r.preventDefault(), f(!1), oe?.(e, { activeView: d });
                     },
-                    children: /* @__PURE__ */ t(Te, { className: "size-3.5" })
+                    children: /* @__PURE__ */ t(Ne, { className: "size-3.5" })
                   }
                 ) : null,
                 e.isDeletable ? /* @__PURE__ */ t(
@@ -167,7 +167,7 @@ const Oe = ["default", "active", "system"], Ge = ({
                     onClick: (r) => {
                       r.stopPropagation(), r.preventDefault(), f(!1), $(e);
                     },
-                    children: /* @__PURE__ */ t(Ve, { className: "size-3.5" })
+                    children: /* @__PURE__ */ t(Te, { className: "size-3.5" })
                   }
                 ) : null,
                 g ? e.isDefaultView ? /* @__PURE__ */ t(
@@ -214,14 +214,14 @@ const Oe = ["default", "active", "system"], Ge = ({
         "data-component": "data-table-saved-views",
         className: m(
           "saved-view-bar-gradient mb-2 mx-4 flex min-w-0 flex-nowrap items-center justify-between gap-2 rounded-lg px-2 py-3",
-          re
+          ie
         ),
         children: [
           L ? /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: [
             /* @__PURE__ */ t(R, { className: "h-6 w-24 rounded-full bg-scrim-skeleton" }),
             /* @__PURE__ */ t(R, { className: "h-6 w-6 shrink-0 rounded-md bg-scrim-skeleton" })
-          ] }) : ge ? /* @__PURE__ */ t("div", { className: "flex min-w-0 flex-1 items-center justify-start gap-1 overflow-hidden", children: /* @__PURE__ */ l(De, { open: p, onOpenChange: be, children: [
-            /* @__PURE__ */ t(Se, { asChild: !0, children: /* @__PURE__ */ l(
+          ] }) : be ? /* @__PURE__ */ t("div", { className: "flex min-w-0 flex-1 items-center justify-start gap-1 overflow-hidden", children: /* @__PURE__ */ l(ke, { open: p, onOpenChange: he, children: [
+            /* @__PURE__ */ t(De, { asChild: !0, children: /* @__PURE__ */ l(
               "button",
               {
                 type: "button",
@@ -231,23 +231,14 @@ const Oe = ["default", "active", "system"], Ge = ({
                 "aria-label": a("dataTable.savedViewsOpenMenu"),
                 children: [
                   /* @__PURE__ */ t(
-                    Z,
+                    ze,
                     {
-                      as: "div",
-                      triggerClassName: m(
-                        ze({
-                          variant: "outline",
-                          color: "success",
-                          size: "md",
-                          shape: "circle",
-                          layout: "default"
-                        }),
-                        "w-fit max-w-full min-w-0 shrink truncate font-['Manrope']"
-                      ),
+                      label: _,
                       content: _,
+                      badgeColor: "success",
+                      maxWidthClassName: "max-w-full",
                       side: "top",
-                      variant: "tertiary",
-                      children: _
+                      variant: "tertiary"
                     }
                   ),
                   /* @__PURE__ */ t(
@@ -258,7 +249,7 @@ const Oe = ["default", "active", "system"], Ge = ({
                         p && "rotate-180"
                       ),
                       "aria-hidden": !0,
-                      children: /* @__PURE__ */ t(ye, { className: "size-3.5 rotate-90 text-content-charcoal" })
+                      children: /* @__PURE__ */ t(xe, { className: "size-3.5 rotate-90 text-content-charcoal" })
                     }
                   )
                 ]
@@ -284,9 +275,9 @@ const Oe = ["default", "active", "system"], Ge = ({
                       {
                         type: "button",
                         className: "border-none bg-transparent p-0",
-                        onClick: () => C("All"),
+                        onClick: () => S("All"),
                         children: /* @__PURE__ */ t(
-                          q,
+                          Z,
                           {
                             color: x === "All" ? "primary" : "neutral",
                             variant: "outline",
@@ -297,14 +288,14 @@ const Oe = ["default", "active", "system"], Ge = ({
                         )
                       }
                     ),
-                    ae?.map((e) => /* @__PURE__ */ t(
+                    te?.map((e) => /* @__PURE__ */ t(
                       "button",
                       {
                         type: "button",
                         className: "border-none bg-transparent p-0",
-                        onClick: () => C(e.value),
+                        onClick: () => S(e.value),
                         children: /* @__PURE__ */ t(
-                          q,
+                          Z,
                           {
                             color: x === e.value ? "primary" : "neutral",
                             variant: "outline",
@@ -325,7 +316,7 @@ const Oe = ["default", "active", "system"], Ge = ({
                       value: T,
                       onChange: (e) => z(e.target.value),
                       prefix: /* @__PURE__ */ t(
-                        we,
+                        ye,
                         {
                           className: "size-4 shrink-0 text-secondary-foreground",
                           "aria-hidden": !0
@@ -337,17 +328,17 @@ const Oe = ["default", "active", "system"], Ge = ({
                   ) }),
                   /* @__PURE__ */ t("div", { className: "min-h-[72px] px-1", children: U || (L ? /* @__PURE__ */ t("div", { className: "flex max-h-[160px] flex-col gap-2 overflow-y-auto px-2 py-1", children: [1, 2, 3, 4, 5].map((e) => /* @__PURE__ */ t(R, { className: "h-9 w-full rounded-lg" }, e)) }) : P.length === 0 && b.length === 0 ? /* @__PURE__ */ t("div", { className: "flex min-h-[100px] flex-col items-center justify-center px-4 py-6 text-center", children: /* @__PURE__ */ t("span", { className: "text-sm leading-relaxed text-content-tertiary font-['Manrope']", children: a("dataTable.savedViewsEmptyList") }) }) : /* @__PURE__ */ l("div", { className: "flex max-h-[220px] flex-col gap-0 overflow-y-auto", children: [
                     b.length > 0 ? /* @__PURE__ */ t("div", { className: "flex flex-col px-1 pb-1 ", children: b.map(
-                      (e) => H(
+                      (e) => G(
                         e,
                         "priority",
                         `priority-${e.id}`
                       )
                     ) }) : null,
-                    b.length > 0 && O.length > 0 ? /* @__PURE__ */ t(ee, { className: "mb-2 bg-stroke-hairline" }) : null,
+                    b.length > 0 && O.length > 0 ? /* @__PURE__ */ t(q, { className: "mb-2 bg-stroke-hairline" }) : null,
                     O.length > 0 ? /* @__PURE__ */ l(X, { children: [
                       /* @__PURE__ */ t("div", { className: "px-3 pb-1.5 pt-0.5 text-xs font-medium tracking-wide text-content-placeholder font-['Manrope']", children: a("dataTable.savedViewsAllSavedViews") }),
                       /* @__PURE__ */ t("div", { className: "flex flex-col px-1 pb-1", children: O.map(
-                        (e) => H(
+                        (e) => G(
                           e,
                           "list",
                           `list-${e.id}`
@@ -355,7 +346,7 @@ const Oe = ["default", "active", "system"], Ge = ({
                       ) })
                     ] }) : null
                   ] })) }),
-                  /* @__PURE__ */ t(ee, { className: "my-1 bg-[var(--color-border-hairline)]" }),
+                  /* @__PURE__ */ t(q, { className: "my-1 bg-[var(--color-border-hairline)]" }),
                   /* @__PURE__ */ l("div", { className: "flex justify-end gap-2 px-3 pt-1", children: [
                     /* @__PURE__ */ t(
                       u,
@@ -363,7 +354,7 @@ const Oe = ["default", "active", "system"], Ge = ({
                         type: "button",
                         variant: "tertiary",
                         size: "md",
-                        onClick: he,
+                        onClick: fe,
                         children: a("dataTable.savedViewsCancel")
                       }
                     ),
@@ -373,8 +364,8 @@ const Oe = ["default", "active", "system"], Ge = ({
                         type: "button",
                         variant: "default",
                         size: "md",
-                        disabled: ie || V === d?.id,
-                        onClick: fe,
+                        disabled: ne || V === d?.id,
+                        onClick: pe,
                         children: a("dataTable.savedViewsApply")
                       }
                     )
@@ -383,7 +374,7 @@ const Oe = ["default", "active", "system"], Ge = ({
               }
             )
           ] }) }) : /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-content-tertiary", children: [
-            /* @__PURE__ */ t(Ne, { className: "size-4 shrink-0", "aria-hidden": !0 }),
+            /* @__PURE__ */ t(we, { className: "size-4 shrink-0", "aria-hidden": !0 }),
             /* @__PURE__ */ t("span", { className: "text-sm font-medium font-['Manrope']", children: a("dataTable.savedViewsNoneYet") })
           ] }),
           /* @__PURE__ */ t(
@@ -394,7 +385,7 @@ const Oe = ["default", "active", "system"], Ge = ({
               size: "sm",
               className: "shrink-0 font-['Manrope']",
               onClick: () => {
-                f(!1), le?.({ activeView: d });
+                f(!1), re?.({ activeView: d });
               },
               children: a("dataTable.savedViewsSave")
             }
@@ -416,12 +407,12 @@ const Oe = ["default", "active", "system"], Ge = ({
         }) : void 0,
         confirmLabel: a("dataTable.savedViewsDeleteConfirmButton"),
         onConfirm: () => {
-          y && ce?.(y, { activeView: d });
+          y && de?.(y, { activeView: d });
         }
       }
     )
   ] });
 };
 export {
-  Ge as DataTableSavedViews
+  We as DataTableSavedViews
 };

package/dist/components/data-display/badge/badge.variants.d.ts

@@ -1,6 +1,6 @@
 export declare const badgeVariants: (props?: ({
-    variant?: "outline" | "solid" | "subtle" | null | undefined;
-    color?: "primary" | "destructive" | "warning" | "success" | "neutral" | null | undefined;
+    variant?: "solid" | "outline" | "subtle" | null | undefined;
+    color?: "primary" | "success" | "warning" | "destructive" | "neutral" | null | undefined;
     size?: "sm" | "md" | null | undefined;
     shape?: "circle" | "square" | null | undefined;
     layout?: "default" | "iconOnly" | null | undefined;

package/dist/components/feedback/alert/alert.variants.d.ts

@@ -1,4 +1,4 @@
 export declare const alertVariants: (props?: ({
-    variant?: "default" | "error" | "info" | "warning" | "success" | null | undefined;
+    variant?: "default" | "error" | "success" | "warning" | "info" | null | undefined;
     emphasis?: "flat" | "elevated" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/feedback/tooltip/badge-overflow-tooltip.d.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from 'class-variance-authority';
+import { badgeVariants } from '../../data-display/badge/badge.variants';
+import { OverflowTooltipProps } from './overflow-tooltip.types';
+type BadgeStyleProps = Pick<VariantProps<typeof badgeVariants>, 'variant' | 'color' | 'size' | 'shape'>;
+export interface BadgeOverflowTooltipProps extends Omit<OverflowTooltipProps, 'children' | 'triggerClassName' | 'as'> {
+    label: string;
+    badgeVariant?: BadgeStyleProps['variant'];
+    badgeColor?: BadgeStyleProps['color'];
+    badgeSize?: BadgeStyleProps['size'];
+    badgeShape?: BadgeStyleProps['shape'];
+    maxWidthClassName?: string;
+    triggerClassName?: string;
+}
+/**
+ * Badge shell + inner truncating OverflowTooltip trigger.
+ * SSOT for pill badges with ellipsis (Filters Applied, saved views, etc.).
+ */
+export declare function BadgeOverflowTooltip({ label, badgeVariant, badgeColor, badgeSize, badgeShape, maxWidthClassName, triggerClassName, content, ...overflowTooltipProps }: BadgeOverflowTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/feedback/tooltip/badge-overflow-tooltip.js

@@ -0,0 +1,48 @@
+import { jsx as o } from "react/jsx-runtime";
+import { badgeVariants as c } from "../../data-display/badge/badge.variants.js";
+import { cn as t } from "../../../lib/utils.js";
+import { OverflowTooltip as f } from "./overflow-tooltip.js";
+function x({
+  label: r,
+  badgeVariant: e = "outline",
+  badgeColor: a = "primary",
+  badgeSize: i = "md",
+  badgeShape: n = "circle",
+  maxWidthClassName: l = "max-w-[140px]",
+  triggerClassName: m,
+  content: p,
+  ...s
+}) {
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      className: t(
+        c({
+          variant: e,
+          color: a,
+          size: i,
+          shape: n,
+          layout: "default"
+        }),
+        l,
+        "min-w-0 shrink overflow-hidden"
+      ),
+      children: /* @__PURE__ */ o(
+        f,
+        {
+          as: "span",
+          content: p ?? r,
+          triggerClassName: t(
+            "block min-w-0 w-full truncate text-start font-['Manrope']",
+            m
+          ),
+          ...s,
+          children: r
+        }
+      )
+    }
+  );
+}
+export {
+  x as BadgeOverflowTooltip
+};

package/dist/components/feedback/tooltip/index.d.ts

@@ -4,6 +4,8 @@ export { tooltipVariants } from './tooltip.variants';
 export { ButtonIconTooltip } from './button-icon-tooltip';
 export type { ButtonIconTooltipProps } from './button-icon-tooltip';
 export { OverflowTooltip } from './overflow-tooltip';
+export { BadgeOverflowTooltip } from './badge-overflow-tooltip';
+export type { BadgeOverflowTooltipProps } from './badge-overflow-tooltip';
 export { useOverflowTooltip } from './use-overflow-tooltip';
 export type { OverflowTooltipProps, UseOverflowTooltipOptions, UseOverflowTooltipResult, } from './overflow-tooltip.types';
 export { defaultTabTooltipRender, defaultAccordionTooltipRender, } from './tab-tooltip-render';

package/dist/components/feedback/tooltip/index.js

@@ -1,18 +1,20 @@
-import { Tooltip as r, TooltipContent as e, TooltipProvider as p, TooltipTrigger as i } from "./tooltip.js";
-import { tooltipVariants as T } from "./tooltip.variants.js";
+import { Tooltip as r, TooltipContent as e, TooltipProvider as p, TooltipTrigger as l } from "./tooltip.js";
+import { tooltipVariants as f } from "./tooltip.variants.js";
 import { ButtonIconTooltip as n } from "./button-icon-tooltip.js";
 import { OverflowTooltip as m } from "./overflow-tooltip.js";
-import { useOverflowTooltip as a } from "./use-overflow-tooltip.js";
-import { defaultAccordionTooltipRender as c, defaultTabTooltipRender as v } from "./tab-tooltip-render.js";
+import { BadgeOverflowTooltip as a } from "./badge-overflow-tooltip.js";
+import { useOverflowTooltip as v } from "./use-overflow-tooltip.js";
+import { defaultAccordionTooltipRender as g, defaultTabTooltipRender as w } from "./tab-tooltip-render.js";
 export {
+  a as BadgeOverflowTooltip,
   n as ButtonIconTooltip,
   m as OverflowTooltip,
   r as Tooltip,
   e as TooltipContent,
   p as TooltipProvider,
-  i as TooltipTrigger,
-  c as defaultAccordionTooltipRender,
-  v as defaultTabTooltipRender,
-  T as tooltipVariants,
-  a as useOverflowTooltip
+  l as TooltipTrigger,
+  g as defaultAccordionTooltipRender,
+  w as defaultTabTooltipRender,
+  f as tooltipVariants,
+  v as useOverflowTooltip
 };

package/dist/components/feedback/tooltip/overflow-tooltip.js

@@ -1,63 +1,86 @@
-import { jsx as e, jsxs as F } from "react/jsx-runtime";
-import { cn as f } from "../../../lib/utils.js";
-import { Tooltip as I, TooltipTrigger as P, TooltipContent as b } from "./tooltip.js";
-import { useOverflowTooltip as y } from "./use-overflow-tooltip.js";
-function k({
+import { jsx as n, jsxs as A } from "react/jsx-runtime";
+import { cn as b } from "../../../lib/utils.js";
+import { Tooltip as G, TooltipTrigger as H, TooltipContent as R } from "./tooltip.js";
+import { useOverflowTooltip as q } from "./use-overflow-tooltip.js";
+function M({
   children: o,
-  content: t,
-  overflowMode: T = "ellipsis",
-  side: m = "top",
-  align: n,
-  variant: r,
-  className: i,
-  triggerClassName: p,
-  as: a = "span",
-  alwaysShow: c = !1,
-  disabled: l = !1,
-  focusable: u = !1
+  content: i,
+  overflowMode: m = "ellipsis",
+  side: P = "top",
+  align: l,
+  variant: s,
+  className: t,
+  triggerClassName: r,
+  as: x = "span",
+  alwaysShow: C = !1,
+  disabled: p = !1,
+  focusable: w = !1
 }) {
-  const s = a, d = t ?? o, {
-    setTriggerRef: x,
-    onTriggerPointerEnter: C,
-    onTriggerFocus: O,
-    triggerTabIndex: h,
-    isTooltipArmed: g,
-    isTooltipOpen: w,
-    tooltipContent: E,
-    handleTooltipOpenChange: j
-  } = y(o, {
-    content: t,
-    overflowMode: T,
-    alwaysShow: c,
-    disabled: l,
-    focusable: u,
+  const a = x, d = i ?? o, {
+    setTriggerRef: v,
+    onTriggerPointerEnter: h,
+    onTriggerPointerLeave: L,
+    onTriggerFocus: E,
+    onContentPointerEnter: O,
+    onContentPointerDown: F,
+    onContentPointerLeave: k,
+    onContentPointerUp: y,
+    triggerTabIndex: D,
+    isTooltipArmed: c,
+    isTooltipOpen: I,
+    tooltipContent: j,
+    handleTooltipOpenChange: U
+  } = q(o, {
+    content: i,
+    overflowMode: m,
+    alwaysShow: C,
+    disabled: p,
+    focusable: w,
     contentDependency: d
-  }), v = f("outline-none", p, i);
-  return l ? /* @__PURE__ */ e(s, { className: f(p, i), children: o }) : /* @__PURE__ */ F(
-    I,
+  }), e = `${r ?? ""} ${t ?? ""}`, f = /\btruncate\b/.test(e), g = /\b(inline-block|inline-flex|inline)\b/.test(
+    e
+  ), T = /\bflex\b/.test(e), u = /\bflex-1\b/.test(e), $ = b(
+    "outline-none min-w-0 max-w-full",
+    f && !g && !T && !u && "block w-full",
+    f && !g && !T && u && "block",
+    r,
+    t
+  );
+  return p ? /* @__PURE__ */ n(a, { className: b(r, t), children: o }) : /* @__PURE__ */ A(
+    G,
     {
-      open: g && w,
-      onOpenChange: j,
+      disableHoverableContent: !1,
+      open: c && I,
+      onOpenChange: U,
       children: [
-        /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ e(
-          s,
+        /* @__PURE__ */ n(H, { asChild: !0, children: /* @__PURE__ */ n(
+          a,
           {
-            ref: x,
+            ref: v,
             "data-component": "overflow-tooltip-trigger",
-            className: v,
-            onPointerEnter: C,
-            tabIndex: h,
-            onFocus: O,
+            className: $,
+            onPointerEnter: h,
+            onPointerLeave: L,
+            tabIndex: D,
+            onFocus: E,
             children: o
           }
         ) }),
-        g ? /* @__PURE__ */ e(
-          b,
+        c ? /* @__PURE__ */ n(
+          R,
           {
-            side: m,
-            ...n ? { align: n } : {},
-            ...r ? { variant: r } : {},
-            children: E
+            side: P,
+            ...l ? { align: l } : {},
+            ...s ? { variant: s } : {},
+            onPointerEnter: O,
+            onPointerLeave: k,
+            onPointerDown: () => {
+              F();
+            },
+            onPointerUp: () => {
+              y();
+            },
+            children: j
           }
         ) : null
       ]
@@ -65,5 +88,5 @@ function k({
   );
 }
 export {
-  k as OverflowTooltip
+  M as OverflowTooltip
 };

package/dist/components/feedback/tooltip/overflow-tooltip.types.d.ts

@@ -13,6 +13,7 @@ export interface UseOverflowTooltipOptions {
 export interface UseOverflowTooltipResult {
     setTriggerRef: React.RefCallback<HTMLElement>;
     onTriggerPointerEnter: React.PointerEventHandler<HTMLElement>;
+    onTriggerPointerLeave: React.PointerEventHandler<HTMLElement>;
     onTriggerFocus?: React.FocusEventHandler<HTMLElement>;
     triggerTabIndex?: number;
     isTooltipArmed: boolean;
@@ -20,6 +21,10 @@ export interface UseOverflowTooltipResult {
     tooltipContent: React.ReactNode;
     recheckOverflow: () => boolean;
     handleTooltipOpenChange: (isOpen: boolean) => void;
+    onContentPointerEnter: React.PointerEventHandler<HTMLElement>;
+    onContentPointerLeave: React.PointerEventHandler<HTMLElement>;
+    onContentPointerDown: () => void;
+    onContentPointerUp: () => void;
 }
 export interface OverflowTooltipProps {
     children: React.ReactNode;

package/dist/components/feedback/tooltip/tooltip.d.ts

@@ -1,8 +1,8 @@
 import { TooltipContentProps } from './tooltip.types';
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
-declare const Tooltip: (props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipProvider: ({ disableHoverableContent, ...providerProps }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ disableHoverableContent, ...tooltipProps }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };