impact-nova 2.2.6 → 2.2.7

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

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

@@ -1,45 +1,82 @@
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
-import * as s from "react";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import * as T from "react";
 import * as r from "@radix-ui/react-tooltip";
-import { wrapRadixPart as c } from "../../../lib/primitives/create-compound.js";
-import { cn as a } from "../../../lib/utils.js";
-import { tooltipVariants as f } from "./tooltip.variants.js";
-function g(t) {
+import { wrapRadixPart as y } from "../../../lib/primitives/create-compound.js";
+import { useOverlayPortalContainer as C } from "../../../lib/overlay/overlay-portal-context.js";
+import { clearTooltipContentPointerGestureEnd as k, markTooltipContentPointerGestureStart as b } from "../../../lib/tooltip/tooltip-content-interaction.js";
+import { cn as l } from "../../../lib/utils.js";
+import { tooltipVariants as v } from "./tooltip.variants.js";
+function w(t) {
   return t === "primary" ? "default" : t ?? "tertiary";
 }
-const x = r.Provider, N = (t) => /* @__PURE__ */ i(r.Root, { "data-component": "tooltip", ...t }), R = c(
+const G = ({
+  disableHoverableContent: t = !1,
+  ...i
+}) => /* @__PURE__ */ n(
+  r.Provider,
+  {
+    disableHoverableContent: t,
+    ...i
+  }
+), A = ({
+  disableHoverableContent: t = !1,
+  ...i
+}) => /* @__PURE__ */ n(
+  r.Root,
+  {
+    "data-component": "tooltip",
+    disableHoverableContent: t,
+    ...i
+  }
+), E = y(
   "tooltip",
   "trigger",
   "TooltipTrigger",
   r.Trigger
-), u = s.forwardRef(
+), x = T.forwardRef(
   ({
     className: t,
-    sideOffset: n = 4,
-    variant: l = "tertiary",
-    showArrow: p = !0,
+    sideOffset: i = 4,
+    variant: p = "tertiary",
+    showArrow: s = !0,
+    onPointerDown: m,
+    onPointerUp: c,
+    onClick: d,
+    onDoubleClick: f,
     ...e
-  }, d) => {
-    const o = g(l);
-    return /* @__PURE__ */ i(r.Portal, { children: /* @__PURE__ */ m(
+  }, P) => {
+    const a = w(p), g = C();
+    return /* @__PURE__ */ n(r.Portal, { container: g, children: /* @__PURE__ */ u(
       r.Content,
       {
-        ref: d,
-        sideOffset: n,
+        ref: P,
+        sideOffset: i,
         "data-component": "tooltip-content",
-        "data-variant": o,
-        className: a(f({ variant: o }), t),
+        "data-variant": a,
+        className: l(v({ variant: a }), t),
+        onPointerDown: (o) => {
+          b(), o.stopPropagation(), m?.(o);
+        },
+        onPointerUp: (o) => {
+          k(), o.stopPropagation(), c?.(o);
+        },
+        onClick: (o) => {
+          o.stopPropagation(), d?.(o);
+        },
+        onDoubleClick: (o) => {
+          o.stopPropagation(), f?.(o);
+        },
         ...e,
         children: [
           e.children,
-          p && /* @__PURE__ */ i(
+          s && /* @__PURE__ */ n(
             r.Arrow,
             {
-              className: a(
+              className: l(
                 "fill-current",
-                o === "default" && "fill-brand",
-                o === "secondary" && "fill-background stroke-border",
-                o === "tertiary" && "fill-foreground"
+                a === "default" && "fill-brand",
+                a === "secondary" && "fill-background stroke-border",
+                a === "tertiary" && "fill-foreground"
               )
             }
           )
@@ -48,10 +85,10 @@ const x = r.Provider, N = (t) => /* @__PURE__ */ i(r.Root, { "data-component": "
     ) });
   }
 );
-u.displayName = r.Content.displayName;
+x.displayName = r.Content.displayName;
 export {
-  N as Tooltip,
-  u as TooltipContent,
-  x as TooltipProvider,
-  R as TooltipTrigger
+  A as Tooltip,
+  x as TooltipContent,
+  G as TooltipProvider,
+  E as TooltipTrigger
 };

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

@@ -1,6 +1,6 @@
 import { cva as t } from "class-variance-authority";
 const o = t(
-  "z-[100] overflow-hidden rounded-md px-4 py-2 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin] motion-reduce:animate-none motion-reduce:transition-none",
+  "z-[100] select-text overflow-hidden rounded-md px-4 py-2 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin] motion-reduce:animate-none motion-reduce:transition-none",
   {
     variants: {
       variant: {

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

@@ -1,55 +1,109 @@
-import * as s from "react";
-import { isTextOverflowing as v } from "../../../lib/overflow/is-text-overflowing.js";
-function R(r, n) {
-  return r !== void 0 ? r : typeof n == "string" ? n : null;
+import * as t from "react";
+import { isTextOverflowing as L } from "../../../lib/overflow/is-text-overflowing.js";
+const H = 500;
+function N(o, s) {
+  return o !== void 0 ? o : typeof s == "string" ? s : null;
 }
-function F(r, {
-  content: n,
-  overflowMode: f = "ellipsis",
+function B(o, {
+  content: s,
+  overflowMode: p = "ellipsis",
   alwaysShow: i = !1,
-  disabled: u = !1,
-  focusable: g = !1,
-  contentDependency: C
+  disabled: f = !1,
+  focusable: d = !1,
+  contentDependency: h
 } = {}) {
-  const c = s.useRef(null), [p, t] = s.useState(!1), [h, o] = s.useState(!1), l = R(n, r), T = typeof l == "string" ? l.trim().length > 0 : l != null;
-  s.useEffect(() => {
-    t(!1), o(!1);
-  }, [C, n, r, i, u, f]);
-  const I = s.useCallback((e) => {
-    c.current = e;
-  }, []), m = (e) => i || v(e, f), O = (e, a) => {
-    if (!(u || !T)) {
-      if (m(e)) {
-        t(!0), o(!0);
+  const g = t.useRef(null), a = t.useRef(!1), u = t.useRef(
+    null
+  ), m = t.useRef(null), [D, r] = t.useState(!1), [I, n] = t.useState(!1), O = t.useRef(!1), v = t.useRef(!1), T = N(s, o), P = typeof T == "string" ? T.trim().length > 0 : T != null, l = () => {
+    u.current && (clearTimeout(u.current), u.current = null);
+  }, c = () => {
+    const e = m.current;
+    e && (document.removeEventListener("scroll", e, !0), m.current = null);
+  }, A = () => {
+    l(), n(!1), r(!1);
+  }, _ = () => {
+    c();
+    const e = () => {
+      a.current = !1, A(), c();
+    };
+    m.current = e, document.addEventListener("scroll", e, {
+      capture: !0,
+      passive: !0
+    });
+  };
+  t.useEffect(() => {
+    r(!1), n(!1), l(), c();
+  }, [h, s, o, i, f, p]), t.useEffect(
+    () => () => {
+      l(), c();
+    },
+    []
+  );
+  const k = t.useCallback((e) => {
+    g.current = e;
+  }, []), E = (e) => i || L(e, p), C = (e, R) => {
+    if (!(f || !P)) {
+      if (E(e)) {
+        r(!0), n(!0);
         return;
       }
-      t(!1), o(!1);
+      r(!1), n(!1);
     }
+  }, F = (e) => {
+    l(), u.current = setTimeout(() => {
+      u.current = null, a.current && C(e);
+    }, H);
   };
   return {
-    setTriggerRef: I,
+    setTriggerRef: k,
     onTriggerPointerEnter: (e) => {
-      O(e.currentTarget);
+      if (!(f || !P)) {
+        if (a.current = !0, _(), i) {
+          C(e.currentTarget);
+          return;
+        }
+        F(e.currentTarget);
+      }
     },
-    onTriggerFocus: g ? (e) => {
-      O(e.currentTarget);
+    onTriggerPointerLeave: () => {
+      a.current = !1, l();
+    },
+    onTriggerFocus: d ? (e) => {
+      C(e.currentTarget);
     } : void 0,
-    triggerTabIndex: g ? 0 : void 0,
-    isTooltipArmed: p,
-    isTooltipOpen: h,
-    tooltipContent: l,
+    onContentPointerEnter: () => {
+      O.current = !0, n(!0);
+    },
+    onContentPointerDown: () => {
+      v.current = !0, n(!0);
+    },
+    onContentPointerLeave: () => {
+      O.current = !1;
+    },
+    onContentPointerUp: () => {
+      v.current = !1;
+    },
+    triggerTabIndex: d ? 0 : void 0,
+    isTooltipArmed: D,
+    isTooltipOpen: I,
+    tooltipContent: T,
     recheckOverflow: () => {
-      const e = c.current;
-      return !e || u || !T ? !1 : m(e) ? (t(!0), !0) : (t(!1), o(!1), !1);
+      const e = g.current;
+      return !e || f || !P ? !1 : E(e) ? (r(!0), !0) : (r(!1), n(!1), !1);
     },
     handleTooltipOpenChange: (e) => {
-      if (e && !p && !i || (o(e), e || i))
+      if (!e && (O.current || v.current) || e && !D && !i || (n(e), e))
         return;
-      const a = c.current;
-      a && (v(a, f) || t(!1));
+      c();
+      const R = g.current;
+      if (!R) {
+        r(!1);
+        return;
+      }
+      !i && !L(R, p) && r(!1);
     }
   };
 }
 export {
-  F as useOverflowTooltip
+  B as useOverflowTooltip
 };