@mirohq/design-system-tooltip - npm Package Compare versions

Comparing version 3.3.26 to 3.3.27-tooltip.0

dist/main.js

@@ -7,6 +7,7 @@ 'use strict';
 var React = require('react');
-var designSystemUseId = require('@mirohq/design-system-use-id');
 var reactTooltip = require('@radix-ui/react-tooltip');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemUtils = require('@mirohq/design-system-utils');
+var interactions = require('@react-aria/interactions');
+var utils = require('@react-aria/utils');
 var designSystemBaseHotkey = require('@mirohq/design-system-base-hotkey');
@@ -114,9 +115,25 @@ var designSystemPrimitive = require('@mirohq/design-system-primitive');
 const Trigger = React__default["default"].forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
-  const { triggerRef, id } = React.useContext(TooltipTriggerContext);
+  const { triggerRef, hoveredRef, focusedRef } = React.useContext(
+    TooltipTriggerContext
+  );
+  const { hoverProps } = interactions.useHover({
+    onHoverStart: () => {
+      hoveredRef.current = true;
+    },
+    onHoverEnd: () => {
+      hoveredRef.current = false;
+    }
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledTrigger,
     {
-      ...restProps,
+      ...utils.mergeProps(restProps, hoverProps, {
+        onFocus: () => {
+          focusedRef.current = true;
+        },
+        onBlur: () => {
+          focusedRef.current = false;
+        }
+      }),
       onClick: onPress != null ? onPress : onClick,
-      "data-tooltip-trigger": id,
       ref: designSystemUtils.mergeRefs([triggerRef, forwardRef])
@@ -150,3 +167,5 @@ }
 const TooltipTriggerContext = React.createContext({
-  triggerRef: { current: null }
+  triggerRef: { current: null },
+  hoveredRef: { current: false },
+  focusedRef: { current: false }
 });
@@ -168,3 +187,5 @@ const Tooltip = ({
   const _skipDelayDuration = (_a = skipDelayDuration != null ? skipDelayDuration : context.skipDelayDuration) != null ? _a : DEFAULT_SKIP_DELAY_DURATION;
-  const triggerId = designSystemUseId.useId();
+  const triggerRef = React.useRef(null);
+  const hoveredRef = React.useRef(false);
+  const focusedRef = React.useRef(false);
   const [openState, setOpenState] = React.useState(defaultOpen);
@@ -176,3 +197,2 @@ const setDelayedOpen = React.useCallback(
       clearTimeout(skipDelayTimer);
-      const triggerSelector = '[data-tooltip-trigger="'.concat(triggerId, '"]');
       if (!newOpenState) {
@@ -186,3 +206,3 @@ skipDelayTimer = setTimeout(() => {
       }
-      if (shouldSkipDelay || document.querySelector("".concat(triggerSelector, ":focus")) != null) {
+      if (shouldSkipDelay || focusedRef.current) {
         setOpenState(newOpenState);
@@ -192,3 +212,3 @@ return;
       delayTimer = setTimeout(() => {
-        if (document.querySelector("".concat(triggerSelector, ":hover")) == null && process.env.NODE_ENV !== "test") {
+        if (!hoveredRef.current && process.env.NODE_ENV !== "test") {
           return;
@@ -203,10 +223,3 @@ }
     },
-    [
-      delayDuration,
-      context.delayDuration,
-      _skipDelayDuration,
-      onClose,
-      onOpen,
-      triggerId
-    ]
+    [delayDuration, context.delayDuration, _skipDelayDuration, onClose, onOpen]
   );
@@ -239,3 +252,2 @@ const handleOpenChange = React.useCallback(
   }, []);
-  const triggerRef = React.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -245,4 +257,5 @@ TooltipTriggerContext.Provider,
       value: {
-        id: triggerId,
-        triggerRef
+        triggerRef,
+        hoveredRef,
+        focusedRef
       },
@@ -249,0 +262,0 @@ children: /* @__PURE__ */ jsxRuntime.jsx(

dist/module.js

 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useContext, useEffect, createContext, useRef, useState, useCallback } from 'react';
-import { useId } from '@mirohq/design-system-use-id';
 import { Arrow, Content as Content$1, Trigger as Trigger$1, Portal as Portal$1, Provider as Provider$1, Root } from '@radix-ui/react-tooltip';
 import { styled } from '@mirohq/design-system-stitches';
 import { mergeRefs } from '@mirohq/design-system-utils';
+import { useHover } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
 import { Hotkey as Hotkey$1 } from '@mirohq/design-system-base-hotkey';
@@ -105,9 +106,25 @@ import { Primitive } from '@mirohq/design-system-primitive';
 const Trigger = React.forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
-  const { triggerRef, id } = useContext(TooltipTriggerContext);
+  const { triggerRef, hoveredRef, focusedRef } = useContext(
+    TooltipTriggerContext
+  );
+  const { hoverProps } = useHover({
+    onHoverStart: () => {
+      hoveredRef.current = true;
+    },
+    onHoverEnd: () => {
+      hoveredRef.current = false;
+    }
+  });
   return /* @__PURE__ */ jsx(
     StyledTrigger,
     {
-      ...restProps,
+      ...mergeProps(restProps, hoverProps, {
+        onFocus: () => {
+          focusedRef.current = true;
+        },
+        onBlur: () => {
+          focusedRef.current = false;
+        }
+      }),
       onClick: onPress != null ? onPress : onClick,
-      "data-tooltip-trigger": id,
       ref: mergeRefs([triggerRef, forwardRef])
@@ -141,3 +158,5 @@ }
 const TooltipTriggerContext = createContext({
-  triggerRef: { current: null }
+  triggerRef: { current: null },
+  hoveredRef: { current: false },
+  focusedRef: { current: false }
 });
@@ -159,3 +178,5 @@ const Tooltip = ({
   const _skipDelayDuration = (_a = skipDelayDuration != null ? skipDelayDuration : context.skipDelayDuration) != null ? _a : DEFAULT_SKIP_DELAY_DURATION;
-  const triggerId = useId();
+  const triggerRef = useRef(null);
+  const hoveredRef = useRef(false);
+  const focusedRef = useRef(false);
   const [openState, setOpenState] = useState(defaultOpen);
@@ -167,3 +188,2 @@ const setDelayedOpen = useCallback(
       clearTimeout(skipDelayTimer);
-      const triggerSelector = '[data-tooltip-trigger="'.concat(triggerId, '"]');
       if (!newOpenState) {
@@ -177,3 +197,3 @@ skipDelayTimer = setTimeout(() => {
       }
-      if (shouldSkipDelay || document.querySelector("".concat(triggerSelector, ":focus")) != null) {
+      if (shouldSkipDelay || focusedRef.current) {
         setOpenState(newOpenState);
@@ -183,3 +203,3 @@ return;
       delayTimer = setTimeout(() => {
-        if (document.querySelector("".concat(triggerSelector, ":hover")) == null && process.env.NODE_ENV !== "test") {
+        if (!hoveredRef.current && process.env.NODE_ENV !== "test") {
           return;
@@ -194,10 +214,3 @@ }
     },
-    [
-      delayDuration,
-      context.delayDuration,
-      _skipDelayDuration,
-      onClose,
-      onOpen,
-      triggerId
-    ]
+    [delayDuration, context.delayDuration, _skipDelayDuration, onClose, onOpen]
   );
@@ -230,3 +243,2 @@ const handleOpenChange = useCallback(
   }, []);
-  const triggerRef = useRef(null);
   return /* @__PURE__ */ jsx(Provider$1, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsx(
@@ -236,4 +248,5 @@ TooltipTriggerContext.Provider,
       value: {
-        id: triggerId,
-        triggerRef
+        triggerRef,
+        hoveredRef,
+        focusedRef
       },
@@ -240,0 +253,0 @@ children: /* @__PURE__ */ jsx(

package.json

 {
   "name": "@mirohq/design-system-tooltip",
-  "version": "3.3.26",
+  "version": "3.3.27-tooltip.0",
   "description": "",
@@ -31,7 +31,8 @@ "author": "Miro",
     "@radix-ui/react-tooltip": "^1.0.3",
+    "@react-aria/interactions": "^3.13.0",
+    "@react-aria/utils": "^3.13.0",
+    "@mirohq/design-system-base-hotkey": "^0.1.19",
+    "@mirohq/design-system-utils": "^0.15.4",
     "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-base-hotkey": "^0.1.19",
-    "@mirohq/design-system-stitches": "^2.6.18",
-    "@mirohq/design-system-use-id": "^0.1.2",
-    "@mirohq/design-system-utils": "^0.15.4"
+    "@mirohq/design-system-stitches": "^2.6.18"
   },
@@ -38,0 +39,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75147

increased by2.54%

Lines of code

730

increased by3.69%

Worsened metrics

Dependency count

10

increased by11.11%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@react-aria/interactions@^3.13.0

• + Added@react-aria/utils@^3.13.0

• + Added@react-aria/interactions@3.22.5(transitive)

• + Added@react-aria/ssr@3.9.7(transitive)

• + Added@react-aria/utils@3.26.0(transitive)

• + Added@react-stately/utils@3.10.5(transitive)

• + Added@react-types/shared@3.26.0(transitive)

• + Added@swc/helpers@0.5.15(transitive)

• + Addedclsx@2.1.1(transitive)

• + Addedtslib@2.8.1(transitive)

• - Removed@mirohq/design-system-use-id@^0.1.2

• - Removed@mirohq/design-system-use-id@0.1.2(transitive)

• - Removed@mirohq/design-system-use-layout-effect@0.2.1(transitive)