@versini/ui-tooltip 1.0.2 → 1.1.1

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,150 @@
-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 P, useRole as F, 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 w, Fragment as N, jsx as b } from "react/jsx-runtime";
+import { useFloating as M, autoUpdate as U, arrow as V, offset as D, flip as j, shift as B, useTransitionStyles as H, useHover as W, useFocus as q, useDismiss as z, useRole as G, useInteractions as J, FloatingPortal as K, FloatingArrow as Q } from "@floating-ui/react";
+import { useState as x, useRef as u, cloneElement as X, useCallback as Y, useEffect as _ } from "react";
+import n from "clsx";
 /*!
-  @versini/ui-tooltip v1.0.2
+  @versini/ui-tooltip v1.1.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TOOLTIP__ || (window.__VERSINI_UI_TOOLTIP__ = {
-    version: "1.0.2",
-    buildTime: "01/16/2025 07:57 PM EST",
+    version: "1.1.1",
+    buildTime: "01/19/2025 03:47 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 Z = "av-tooltip", $ = "av-tooltip-arrow", tt = () => n("w-max py-1 px-2 rounded text-sm"), et = ({
   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 = ({
+}), st = ({
   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 = ({
+}), rt = ({
   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 = ({
+}), ot = ({
   mode: t
 }) => {
-  const r = e(
-    D,
-    H(),
-    W({ mode: t }),
-    q({ mode: t })
-  ), a = e(
-    V,
-    z({ mode: t })
+  const e = n(
+    Z,
+    tt(),
+    et({ mode: t }),
+    st({ mode: t })
+  ), s = n(
+    $,
+    rt({ mode: t })
   );
-  return { tooltip: r, arrow: a };
-}, Y = ({
+  return { tooltip: e, arrow: s };
+};
+function at(t, e, s = { active: !0 }) {
+  const [p, l] = x(t), o = u(!1), r = u(null), c = u(!1), a = Y(() => {
+    const f = r.current;
+    f && window.clearTimeout(f);
+  }, []);
+  return _(() => {
+    if (!s.active) {
+      l(t);
+      return;
+    }
+    o.current && (a(), r.current = window.setTimeout(() => {
+      c.current = !1, l(t);
+    }, e));
+  }, [t, s, e, a]), _(() => (o.current = !0, a), [a]), [p];
+}
+const ft = ({
   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] = x(l), h = o !== void 0;
+  h && o === !1 && (c = 0);
+  const [g] = at(
+    o ?? a,
+    c,
+    {
+      active: h
+    }
+  ), I = r ?? f, y = u(null), { refs: d, floatingStyles: R, context: i } = M({
+    open: g,
+    onOpenChange: (T) => {
+      I(T), r == null || r(T);
+    },
+    placement: s,
     // Make sure the tooltip stays on the screen
-    whileElementsMounted: C,
+    whileElementsMounted: U,
     middleware: [
-      I({
-        element: l
+      V({
+        element: y
       }),
-      O(10),
-      S({
-        crossAxis: a.includes("-"),
+      D(11),
+      j({
+        crossAxis: s.includes("-"),
         fallbackAxisSideDirection: "start"
       }),
-      A()
+      B()
     ]
-  }), { styles: y } = R(s), n = G({ mode: p }), h = v(s, { move: !1, delay: { open: 300 } }), d = E(s), k = P(s), m = F(s, { role: "tooltip" }), { getReferenceProps: T, getFloatingProps: b } = L([
-    h,
-    d,
-    k,
-    m
-  ]), x = B(
-    t,
+  }), { styles: S } = H(i), k = ot({ mode: p }), C = W(i, { move: !1, delay: { open: c } }), v = q(i), P = z(i, {
+    referencePress: !0
+  }), A = G(i, { role: "tooltip" }), { getReferenceProps: E, getFloatingProps: O } = J([
+    C,
+    v,
+    P,
+    A
+  ]), m = t, F = m.props, L = X(
+    m,
     {
-      "aria-label": r,
-      "data-open": String(o),
-      ref: i.setReference,
-      ...T()
+      "aria-label": e,
+      "data-open": String(g),
+      ref: d.setReference,
+      ...E(),
+      ...F
     }
   );
-  return /* @__PURE__ */ c(_, { children: [
-    x,
-    /* @__PURE__ */ f(N, { children: o && /* @__PURE__ */ c(
+  return /* @__PURE__ */ w(N, { children: [
+    L,
+    /* @__PURE__ */ b(K, { children: g && /* @__PURE__ */ w(
       "div",
       {
-        className: n.tooltip,
-        ref: i.setFloating,
-        style: { ...u, ...y },
-        ...b(),
+        className: k.tooltip,
+        ref: d.setFloating,
+        style: { ...R, ...S },
+        ...O(),
         children: [
-          /* @__PURE__ */ f(
-            M,
+          /* @__PURE__ */ b(
+            Q,
             {
-              ref: l,
-              context: s,
-              className: n.arrow
+              ref: y,
+              context: i,
+              className: k.arrow
             }
           ),
-          r
+          e
         ]
       }
     ) })
   ] });
 };
 export {
-  V as TOOLTIP_ARROW_CLASSNAME,
-  D as TOOLTIP_CLASSNAME,
-  Y as Tooltip
+  $ as TOOLTIP_ARROW_CLASSNAME,
+  Z as TOOLTIP_CLASSNAME,
+  ft as Tooltip
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-tooltip",
-	"version": "1.0.2",
+	"version": "1.1.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -38,7 +38,7 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "4.2.0"
+		"@versini/ui-types": "4.3.0"
 	},
 	"dependencies": {
 		"@floating-ui/react": "0.27.3",
@@ -49,5 +49,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "2be4fd5fe7dd74804533efdedcc6cfa4023a739a"
+	"gitHead": "47ca6cc4fdd05d5b5a384026188e28a254f14e57"
 }