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

Comparing version 3.3.27-tooltip.0 to 3.3.27

dist/main.js

@@ -7,7 +7,6 @@ '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');
@@ -115,25 +114,9 @@ var designSystemPrimitive = require('@mirohq/design-system-primitive');
 const Trigger = React__default["default"].forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
-  const { triggerRef, hoveredRef, focusedRef } = React.useContext(
-    TooltipTriggerContext
-  );
-  const { hoverProps } = interactions.useHover({
-    onHoverStart: () => {
-      hoveredRef.current = true;
-    },
-    onHoverEnd: () => {
-      hoveredRef.current = false;
-    }
-  });
+  const { triggerRef, id } = React.useContext(TooltipTriggerContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledTrigger,
     {
-      ...utils.mergeProps(restProps, hoverProps, {
-        onFocus: () => {
-          focusedRef.current = true;
-        },
-        onBlur: () => {
-          focusedRef.current = false;
-        }
-      }),
+      ...restProps,
       onClick: onPress != null ? onPress : onClick,
+      "data-tooltip-trigger": id,
       ref: designSystemUtils.mergeRefs([triggerRef, forwardRef])
@@ -167,5 +150,3 @@ }
 const TooltipTriggerContext = React.createContext({
-  triggerRef: { current: null },
-  hoveredRef: { current: false },
-  focusedRef: { current: false }
+  triggerRef: { current: null }
 });
@@ -187,5 +168,3 @@ const Tooltip = ({
   const _skipDelayDuration = (_a = skipDelayDuration != null ? skipDelayDuration : context.skipDelayDuration) != null ? _a : DEFAULT_SKIP_DELAY_DURATION;
-  const triggerRef = React.useRef(null);
-  const hoveredRef = React.useRef(false);
-  const focusedRef = React.useRef(false);
+  const triggerId = designSystemUseId.useId();
   const [openState, setOpenState] = React.useState(defaultOpen);
@@ -197,2 +176,3 @@ const setDelayedOpen = React.useCallback(
       clearTimeout(skipDelayTimer);
+      const triggerSelector = '[data-tooltip-trigger="'.concat(triggerId, '"]');
       if (!newOpenState) {
@@ -206,3 +186,3 @@ skipDelayTimer = setTimeout(() => {
       }
-      if (shouldSkipDelay || focusedRef.current) {
+      if (shouldSkipDelay || document.querySelector("".concat(triggerSelector, ":focus")) != null) {
         setOpenState(newOpenState);
@@ -212,3 +192,3 @@ return;
       delayTimer = setTimeout(() => {
-        if (!hoveredRef.current && process.env.NODE_ENV !== "test") {
+        if (document.querySelector("".concat(triggerSelector, ":hover")) == null && process.env.NODE_ENV !== "test") {
           return;
@@ -223,3 +203,10 @@ }
     },
-    [delayDuration, context.delayDuration, _skipDelayDuration, onClose, onOpen]
+    [
+      delayDuration,
+      context.delayDuration,
+      _skipDelayDuration,
+      onClose,
+      onOpen,
+      triggerId
+    ]
   );
@@ -252,2 +239,3 @@ const handleOpenChange = React.useCallback(
   }, []);
+  const triggerRef = React.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -257,5 +245,4 @@ TooltipTriggerContext.Provider,
       value: {
-        triggerRef,
-        hoveredRef,
-        focusedRef
+        id: triggerId,
+        triggerRef
       },
@@ -262,0 +249,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';
@@ -106,25 +105,9 @@ import { Primitive } from '@mirohq/design-system-primitive';
 const Trigger = React.forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
-  const { triggerRef, hoveredRef, focusedRef } = useContext(
-    TooltipTriggerContext
-  );
-  const { hoverProps } = useHover({
-    onHoverStart: () => {
-      hoveredRef.current = true;
-    },
-    onHoverEnd: () => {
-      hoveredRef.current = false;
-    }
-  });
+  const { triggerRef, id } = useContext(TooltipTriggerContext);
   return /* @__PURE__ */ jsx(
     StyledTrigger,
     {
-      ...mergeProps(restProps, hoverProps, {
-        onFocus: () => {
-          focusedRef.current = true;
-        },
-        onBlur: () => {
-          focusedRef.current = false;
-        }
-      }),
+      ...restProps,
       onClick: onPress != null ? onPress : onClick,
+      "data-tooltip-trigger": id,
       ref: mergeRefs([triggerRef, forwardRef])
@@ -158,5 +141,3 @@ }
 const TooltipTriggerContext = createContext({
-  triggerRef: { current: null },
-  hoveredRef: { current: false },
-  focusedRef: { current: false }
+  triggerRef: { current: null }
 });
@@ -178,5 +159,3 @@ const Tooltip = ({
   const _skipDelayDuration = (_a = skipDelayDuration != null ? skipDelayDuration : context.skipDelayDuration) != null ? _a : DEFAULT_SKIP_DELAY_DURATION;
-  const triggerRef = useRef(null);
-  const hoveredRef = useRef(false);
-  const focusedRef = useRef(false);
+  const triggerId = useId();
   const [openState, setOpenState] = useState(defaultOpen);
@@ -188,2 +167,3 @@ const setDelayedOpen = useCallback(
       clearTimeout(skipDelayTimer);
+      const triggerSelector = '[data-tooltip-trigger="'.concat(triggerId, '"]');
       if (!newOpenState) {
@@ -197,3 +177,3 @@ skipDelayTimer = setTimeout(() => {
       }
-      if (shouldSkipDelay || focusedRef.current) {
+      if (shouldSkipDelay || document.querySelector("".concat(triggerSelector, ":focus")) != null) {
         setOpenState(newOpenState);
@@ -203,3 +183,3 @@ return;
       delayTimer = setTimeout(() => {
-        if (!hoveredRef.current && process.env.NODE_ENV !== "test") {
+        if (document.querySelector("".concat(triggerSelector, ":hover")) == null && process.env.NODE_ENV !== "test") {
           return;
@@ -214,3 +194,10 @@ }
     },
-    [delayDuration, context.delayDuration, _skipDelayDuration, onClose, onOpen]
+    [
+      delayDuration,
+      context.delayDuration,
+      _skipDelayDuration,
+      onClose,
+      onOpen,
+      triggerId
+    ]
   );
@@ -243,2 +230,3 @@ const handleOpenChange = useCallback(
   }, []);
+  const triggerRef = useRef(null);
   return /* @__PURE__ */ jsx(Provider$1, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsx(
@@ -248,5 +236,4 @@ TooltipTriggerContext.Provider,
       value: {
-        triggerRef,
-        hoveredRef,
-        focusedRef
+        id: triggerId,
+        triggerRef
       },
@@ -253,0 +240,0 @@ children: /* @__PURE__ */ jsx(

package.json

 {
   "name": "@mirohq/design-system-tooltip",
-  "version": "3.3.27-tooltip.0",
+  "version": "3.3.27",
   "description": "",
@@ -31,8 +31,7 @@ "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-stitches": "^2.6.18"
+    "@mirohq/design-system-base-hotkey": "^0.1.20",
+    "@mirohq/design-system-stitches": "^2.6.19",
+    "@mirohq/design-system-use-id": "^0.1.2",
+    "@mirohq/design-system-utils": "^0.15.4"
   },
@@ -39,0 +38,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

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

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

Improved metrics

Dependency count

9

decreased by-10%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

73283

decreased by-2.48%

Lines of code

704

decreased by-3.56%

Dependency changes

• + Added@mirohq/design-system-use-id@^0.1.2

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

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

• - Removed@react-aria/interactions@^3.13.0

• - Removed@react-aria/utils@^3.13.0

• - Removed@react-aria/interactions@3.22.5(transitive)

• - Removed@react-aria/ssr@3.9.7(transitive)

• - Removed@react-aria/utils@3.26.0(transitive)

• - Removed@react-stately/utils@3.10.5(transitive)

• - Removed@react-types/shared@3.26.0(transitive)

• - Removed@swc/helpers@0.5.15(transitive)

• - Removedclsx@2.1.1(transitive)

• - Removedtslib@2.8.1(transitive)

• Updated@mirohq/design-system-base-hotkey@^0.1.20

• Updated@mirohq/design-system-stitches@^2.6.19