impact-nova 2.2.6 → 2.2.8

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

package/dist/components/flows/filter-panel/filter-panel.js

@@ -1,21 +1,22 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import v from "react";
-import { Sheet as b, SheetContent as g, SheetDescription as N, SheetTitle as y, SheetClose as w } from "../../feedback/sheet/sheet.js";
-import { createCompoundPart as k } from "../../../lib/primitives/create-compound.js";
+import b from "react";
+import { Sheet as g, SheetContent as N, SheetDescription as y, SheetTitle as w, SheetClose as k } from "../../feedback/sheet/sheet.js";
+import { createCompoundPart as C } from "../../../lib/primitives/create-compound.js";
 import { cn as o } from "../../../lib/utils.js";
-import { MultiColorFilter as C, Cross as F, InfoBadge as u } from "impact-nova-icons";
-import { Button as P } from "../../primitives/button/button.js";
+import { MultiColorFilter as F, Cross as P, InfoBadge as u } from "impact-nova-icons";
+import { Button as D } from "../../primitives/button/button.js";
 import { Tooltip as d, TooltipTrigger as f, TooltipContent as h } from "../../feedback/tooltip/tooltip.js";
 import { Kbd as S } from "../../primitives/kbd/kbd.js";
 import { OverflowTooltip as j } from "../../feedback/tooltip/overflow-tooltip.js";
-import { useImpactNovaI18n as x } from "../../../i18n/use-impact-nova-i18n.js";
+import { useImpactNovaI18n as v } from "../../../i18n/use-impact-nova-i18n.js";
 import { useOverlayHostDismissNestedLayersOnNavigation as I } from "../../../lib/overlay/overlay-portal-context.js";
-const T = ({
+import { preventDismissOnTooltipOutside as x } from "../../../lib/overlay/prevent-dismiss-on-tooltip-outside.js";
+const O = ({
   title: i,
   children: n,
   className: l
 }) => {
-  const { t: c } = x();
+  const { t: c } = v();
   return /* @__PURE__ */ a(
     "div",
     {
@@ -31,29 +32,29 @@ const T = ({
             {
               className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-brand-tint bg-canvas-elevated",
               "aria-hidden": !0,
-              children: /* @__PURE__ */ e(C, { className: "size-5 shrink-0" })
+              children: /* @__PURE__ */ e(F, { className: "size-5 shrink-0" })
             }
           ),
-          /* @__PURE__ */ e(y, { className: "text-lg font-bold text-content", children: i })
+          /* @__PURE__ */ e(w, { className: "text-lg font-bold text-content", children: i })
         ] }),
         /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
           n,
-          /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
-            P,
+          /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ e(
+            D,
             {
               variant: "secondary",
               size: "icon",
               tabIndex: -1,
               "aria-label": c("aria.close"),
               "data-component": "filter-panel-close",
-              children: /* @__PURE__ */ e(F, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ e(P, { className: "h-3 w-3" })
             }
           ) })
         ] })
       ]
     }
   );
-}, _ = ({
+}, G = ({
   open: i,
   onOpenChange: n,
   title: l = "Filter panel",
@@ -62,8 +63,8 @@ const T = ({
   sidebar: p,
   className: m,
   preventClose: t = !1
-}) => /* @__PURE__ */ e(b, { open: i, onOpenChange: n, children: /* @__PURE__ */ a(
-  g,
+}) => /* @__PURE__ */ e(g, { open: i, onOpenChange: n, children: /* @__PURE__ */ a(
+  N,
   {
     side: "right",
     className: o(
@@ -71,15 +72,18 @@ const T = ({
       m
     ),
     onInteractOutside: (r) => {
-      t && r.preventDefault();
+      x(r), t && r.preventDefault();
+    },
+    onPointerDownOutside: (r) => {
+      x(r), t && r.preventDefault();
     },
     onEscapeKeyDown: (r) => {
       t && r.preventDefault();
     },
     children: [
-      /* @__PURE__ */ e(N, { className: "sr-only", children: "Select filters to apply to the current view." }),
+      /* @__PURE__ */ e(y, { className: "sr-only", children: "Select filters to apply to the current view." }),
       /* @__PURE__ */ a("div", { className: "flex h-full flex-col bg-canvas-elevated", "data-component": "filter-panel", children: [
-        s || /* @__PURE__ */ e(T, { title: l }),
+        s || /* @__PURE__ */ e(O, { title: l }),
         /* @__PURE__ */ a("div", { className: "flex flex-1 overflow-hidden", children: [
           p,
           /* @__PURE__ */ e("div", { className: "flex flex-col flex-1 overflow-hidden", children: c })
@@ -87,13 +91,13 @@ const T = ({
       ] })
     ]
   }
-) }), q = ({
+) }), J = ({
   items: i,
   activeTab: n,
   onTabChange: l,
   className: c
 }) => {
-  const { t: s } = x(), p = I(), m = (t) => {
+  const { t: s } = v(), p = I(), m = (t) => {
     t !== n && p(), l(t);
   };
   return /* @__PURE__ */ e(
@@ -106,7 +110,7 @@ const T = ({
       ),
       children: /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col py-2 gap-1 overflow-y-auto", children: i.map((t) => {
         const r = n === t.id;
-        return /* @__PURE__ */ a(v.Fragment, { children: [
+        return /* @__PURE__ */ a(b.Fragment, { children: [
           t.separator && /* @__PURE__ */ e("div", { className: "my-2 h-px bg-stroke-hairline" }),
           /* @__PURE__ */ a(
             "button",
@@ -195,12 +199,12 @@ const T = ({
       }) })
     }
   );
-}, G = k("filter-panel", {
+}, Q = C("filter-panel", {
   part: "body",
   displayName: "FilterPanelBody",
   className: "flex flex-1 flex-col overflow-auto bg-canvas-elevated p-4",
   scrollSurface: !0
-}), J = ({
+}), U = ({
   children: i,
   className: n,
   leftAction: l
@@ -219,9 +223,9 @@ const T = ({
   }
 );
 export {
-  _ as FilterPanel,
-  G as FilterPanelBody,
-  J as FilterPanelFooter,
-  T as FilterPanelHeader,
-  q as FilterPanelSidebar
+  G as FilterPanel,
+  Q as FilterPanelBody,
+  U as FilterPanelFooter,
+  O as FilterPanelHeader,
+  J as FilterPanelSidebar
 };