@versini/ui-tooltip 1.0.1 → 1.1.0

package/dist/index.d.ts

@@ -4,6 +4,6 @@ import { TooltipTypes } from '@versini/ui-types';
 declare const TOOLTIP_CLASSNAME = "av-tooltip";
 declare const TOOLTIP_ARROW_CLASSNAME = "av-tooltip-arrow";
 
-declare const Tooltip: ({ trigger, label, placement, mode, }: TooltipTypes.Props) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: ({ trigger, label, placement, mode, initialOpen, open: controlledOpen, onOpenChange: setControlledOpen, delay, }: TooltipTypes.Props) => react_jsx_runtime.JSX.Element;
 
 export { TOOLTIP_ARROW_CLASSNAME, TOOLTIP_CLASSNAME, Tooltip };

package/dist/index.js

@@ -1,117 +1,149 @@
-import { jsxs as c, Fragment as _, jsx as f } from "react/jsx-runtime";
-import { useFloating as w, autoUpdate as C, arrow as I, offset as O, flip as S, shift as A, useTransitionStyles as R, useHover as v, useFocus as E, useDismiss as F, useRole as P, useInteractions as L, FloatingPortal as N, FloatingArrow as M } from "@floating-ui/react";
-import { useState as U, useRef as j, cloneElement as B } from "react";
-import e from "clsx";
+import { jsxs as T, Fragment as F, jsx as w } from "react/jsx-runtime";
+import { useFloating as L, autoUpdate as N, arrow as M, offset as U, flip as V, shift as D, useTransitionStyles as j, useHover as B, useFocus as H, useDismiss as W, useRole as q, useInteractions as z, FloatingPortal as G, FloatingArrow as J } from "@floating-ui/react";
+import { useState as _, useRef as u, cloneElement as K, useCallback as Q, useEffect as b } from "react";
+import n from "clsx";
 /*!
-  @versini/ui-tooltip v1.0.1
+  @versini/ui-tooltip v1.1.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TOOLTIP__ || (window.__VERSINI_UI_TOOLTIP__ = {
-    version: "1.0.1",
-    buildTime: "01/14/2025 10:39 AM EST",
+    version: "1.1.0",
+    buildTime: "01/19/2025 01:35 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const D = "av-tooltip", V = "av-tooltip-arrow", H = () => e("w-max py-1 px-2 rounded text-sm"), W = ({
+const X = "av-tooltip", Y = "av-tooltip-arrow", Z = () => n("w-max py-1 px-2 rounded text-sm"), $ = ({
   mode: t
-}) => e({
+}) => n({
   "bg-surface-darker": t === "dark" || t === "system",
   "bg-surface-light": t === "light" || t === "alt-system",
   "dark:bg-surface-light": t === "system",
   "dark:bg-surface-darker": t === "alt-system"
-}), q = ({
+}), tt = ({
   mode: t
-}) => e({
+}) => n({
   "text-copy-light": t === "dark" || t === "system",
   "text-copy-dark": t === "light" || t === "alt-system",
   "dark:text-copy-dark": t === "system",
   "dark:text-copy-light": t === "alt-system"
-}), z = ({
+}), et = ({
   mode: t
-}) => e({
+}) => n({
   "fill-surface-darker [&>path:first-of-type]:bg-surface-darker [&>path:last-of-type]:bg-surface-darker": t === "dark" || t === "system",
   "fill-surface-light [&>path:first-of-type]:bg-surface-light [&>path:last-of-type]:bg-surface-light": t === "light" || t === "alt-system",
   "dark:fill-surface-light dark:[&>path:first-of-type]:bg-surface-light dark:[&>path:last-of-type]:bg-surface-light": t === "system",
   "dark:fill-surface-darker dark:[&>path:first-of-type]:bg-surface-darker dark:[&>path:last-of-type]:bg-surface-darker": t === "alt-system"
-}), G = ({
+}), st = ({
   mode: t
 }) => {
-  const r = e(
-    D,
-    H(),
-    W({ mode: t }),
-    q({ mode: t })
-  ), a = e(
-    V,
-    z({ mode: t })
+  const e = n(
+    X,
+    Z(),
+    $({ mode: t }),
+    tt({ mode: t })
+  ), s = n(
+    Y,
+    et({ mode: t })
   );
-  return { tooltip: r, arrow: a };
-}, Y = ({
+  return { tooltip: e, arrow: s };
+};
+function rt(t, e, s = { active: !0 }) {
+  const [p, l] = _(t), o = u(!1), r = u(null), c = u(!1), a = Q(() => {
+    const f = r.current;
+    f && window.clearTimeout(f);
+  }, []);
+  return b(() => {
+    if (!s.active) {
+      l(t);
+      return;
+    }
+    o.current && (a(), r.current = window.setTimeout(() => {
+      c.current = !1, l(t);
+    }, e));
+  }, [t, s, e, a]), b(() => (o.current = !0, a), [a]), [p];
+}
+const ct = ({
   trigger: t,
-  label: r,
-  placement: a = "top",
-  mode: p = "system"
+  label: e,
+  placement: s = "top",
+  mode: p = "system",
+  initialOpen: l = !1,
+  open: o,
+  onOpenChange: r,
+  delay: c = 300
 }) => {
-  const [o, g] = U(!1), l = j(null), { refs: i, floatingStyles: u, context: s } = w({
-    open: o,
-    onOpenChange: g,
-    placement: a,
+  const [a, f] = _(l), h = o !== void 0;
+  h && o === !1 && (c = 0);
+  const [g] = rt(
+    o ?? a,
+    c,
+    {
+      active: h
+    }
+  ), x = r ?? f, y = u(null), { refs: k, floatingStyles: I, context: i } = L({
+    open: g,
+    onOpenChange: (m) => {
+      x(m), r == null || r(m);
+    },
+    placement: s,
     // Make sure the tooltip stays on the screen
-    whileElementsMounted: C,
+    whileElementsMounted: N,
     middleware: [
-      I({
-        element: l
+      M({
+        element: y
       }),
-      O(10),
-      S({
-        crossAxis: a.includes("-"),
+      U(11),
+      V({
+        crossAxis: s.includes("-"),
         fallbackAxisSideDirection: "start"
       }),
-      A()
+      D()
     ]
-  }), { styles: y } = R(s), n = G({ mode: p }), h = v(s, { move: !1, delay: { open: 300 } }), d = E(s), k = F(s), m = P(s, { role: "tooltip" }), { getReferenceProps: T, getFloatingProps: b } = L([
-    h,
-    d,
-    k,
-    m
-  ]), x = B(
+  }), { styles: R } = j(i), d = st({ mode: p }), S = B(i, { move: !1, delay: { open: c } }), C = H(i), v = W(i, {
+    referencePress: !0
+  }), A = q(i, { role: "tooltip" }), { getReferenceProps: E, getFloatingProps: P } = z([
+    S,
+    C,
+    v,
+    A
+  ]), O = K(
     t,
     {
-      "aria-label": r,
-      "data-open": String(o),
-      ref: i.setReference,
-      ...T()
+      "aria-label": e,
+      "data-open": String(g),
+      ref: k.setReference,
+      ...E()
     }
   );
-  return /* @__PURE__ */ c(_, { children: [
-    x,
-    /* @__PURE__ */ f(N, { children: o && /* @__PURE__ */ c(
+  return /* @__PURE__ */ T(F, { children: [
+    O,
+    /* @__PURE__ */ w(G, { children: g && /* @__PURE__ */ T(
       "div",
       {
-        className: n.tooltip,
-        ref: i.setFloating,
-        style: { ...u, ...y },
-        ...b(),
+        className: d.tooltip,
+        ref: k.setFloating,
+        style: { ...I, ...R },
+        ...P(),
         children: [
-          /* @__PURE__ */ f(
-            M,
+          /* @__PURE__ */ w(
+            J,
             {
-              ref: l,
-              context: s,
-              className: n.arrow
+              ref: y,
+              context: i,
+              className: d.arrow
             }
           ),
-          r
+          e
         ]
       }
     ) })
   ] });
 };
 export {
-  V as TOOLTIP_ARROW_CLASSNAME,
-  D as TOOLTIP_CLASSNAME,
-  Y as Tooltip
+  Y as TOOLTIP_ARROW_CLASSNAME,
+  X as TOOLTIP_CLASSNAME,
+  ct as Tooltip
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-tooltip",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -38,7 +38,7 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "4.1.0"
+		"@versini/ui-types": "4.3.0"
 	},
 	"dependencies": {
 		"@floating-ui/react": "0.27.3",
@@ -49,5 +49,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "4c958ec69e74cca8bba692d7988f47151f39f2b7"
+	"gitHead": "bcefcad80e918262a953b30742e66db32b2fefa5"
 }