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

Comparing version 3.3.18-combobox.0 to 3.3.18

dist/main.js

@@ -7,5 +7,5 @@ '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 designSystemStyles = require('@mirohq/design-system-styles');
 var designSystemBaseHotkey = require('@mirohq/design-system-base-hotkey');
@@ -33,13 +33,2 @@ var designSystemPrimitive = require('@mirohq/design-system-primitive');
   padding: "$150",
-  "@media (prefers-reduced-motion: no-preference)": {
-    animationDuration: "220ms",
-    animationTimingFunction: "ease",
-    willChange: "opacity",
-    '&[data-state="delayed-open"]': {
-      animationName: designSystemStyles.animations.fadeIn
-    },
-    '&[data-state="closed"]': {
-      animationName: designSystemStyles.animations.fadeOut
-    }
-  },
   zIndex: "$tooltip"
@@ -84,11 +73,14 @@ });
 
-const Trigger = React__default["default"].forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
-  StyledTrigger,
-  {
-    ...restProps,
-    onClick: onPress != null ? onPress : onClick,
-    "data-tooltip-trigger": "",
-    ref: forwardRef
-  }
-));
+const Trigger = React__default["default"].forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
+  const { id } = React.useContext(TooltipTriggerContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledTrigger,
+    {
+      ...restProps,
+      onClick: onPress != null ? onPress : onClick,
+      "data-tooltip-trigger": id,
+      ref: forwardRef
+    }
+  );
+});
 Trigger.displayName = "Tooltip.Trigger";
@@ -117,2 +109,3 @@
 const DEFAULT_DELAY_DURATION = 200;
+const TooltipTriggerContext = React.createContext({});
 const Tooltip = ({
@@ -133,2 +126,3 @@ defaultOpen = false,
   const _skipDelayDuration = (_a = skipDelayDuration != null ? skipDelayDuration : context.skipDelayDuration) != null ? _a : DEFAULT_SKIP_DELAY_DURATION;
+  const triggerId = designSystemUseId.useId();
   const [openState, setOpenState] = React.useState(defaultOpen);
@@ -140,2 +134,3 @@ const setDelayedOpen = React.useCallback(
       clearTimeout(skipDelayTimer);
+      const triggerSelector = '[data-tooltip-trigger="'.concat(triggerId, '"]');
       if (!newOpenState) {
@@ -149,3 +144,3 @@ skipDelayTimer = setTimeout(() => {
       }
-      if (shouldSkipDelay || document.querySelector("[data-tooltip-trigger]:focus") != null) {
+      if (shouldSkipDelay || document.querySelector("".concat(triggerSelector, ":focus")) != null) {
         setOpenState(newOpenState);
@@ -155,3 +150,3 @@ return;
       delayTimer = setTimeout(() => {
-        if (document.querySelector("[data-tooltip-trigger]:hover") == null && process.env.NODE_ENV !== "test") {
+        if (document.querySelector("".concat(triggerSelector, ":hover")) == null && process.env.NODE_ENV !== "test") {
           return;
@@ -166,3 +161,10 @@ }
     },
-    [delayDuration, context.delayDuration, _skipDelayDuration, onClose, onOpen]
+    [
+      delayDuration,
+      context.delayDuration,
+      _skipDelayDuration,
+      onClose,
+      onOpen,
+      triggerId
+    ]
   );
@@ -195,3 +197,3 @@ const handleOpenChange = React.useCallback(
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerContext.Provider, { value: { id: triggerId }, children: /* @__PURE__ */ jsxRuntime.jsx(
     reactTooltip.Root,
@@ -205,3 +207,3 @@ {
     }
-  ) });
+  ) }) });
 };
@@ -208,0 +210,0 @@ Tooltip.Trigger = Trigger;

dist/module.js

 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { createContext, useContext, useRef, useState, useCallback, useEffect } from 'react';
+import React, { useContext, createContext, useRef, useState, useCallback, useEffect } 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 { animations } from '@mirohq/design-system-styles';
 import { Hotkey as Hotkey$1 } from '@mirohq/design-system-base-hotkey';
@@ -24,13 +24,2 @@ import { Primitive } from '@mirohq/design-system-primitive';
   padding: "$150",
-  "@media (prefers-reduced-motion: no-preference)": {
-    animationDuration: "220ms",
-    animationTimingFunction: "ease",
-    willChange: "opacity",
-    '&[data-state="delayed-open"]': {
-      animationName: animations.fadeIn
-    },
-    '&[data-state="closed"]': {
-      animationName: animations.fadeOut
-    }
-  },
   zIndex: "$tooltip"
@@ -75,11 +64,14 @@ });
 
-const Trigger = React.forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(
-  StyledTrigger,
-  {
-    ...restProps,
-    onClick: onPress != null ? onPress : onClick,
-    "data-tooltip-trigger": "",
-    ref: forwardRef
-  }
-));
+const Trigger = React.forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
+  const { id } = useContext(TooltipTriggerContext);
+  return /* @__PURE__ */ jsx(
+    StyledTrigger,
+    {
+      ...restProps,
+      onClick: onPress != null ? onPress : onClick,
+      "data-tooltip-trigger": id,
+      ref: forwardRef
+    }
+  );
+});
 Trigger.displayName = "Tooltip.Trigger";
@@ -108,2 +100,3 @@
 const DEFAULT_DELAY_DURATION = 200;
+const TooltipTriggerContext = createContext({});
 const Tooltip = ({
@@ -124,2 +117,3 @@ defaultOpen = false,
   const _skipDelayDuration = (_a = skipDelayDuration != null ? skipDelayDuration : context.skipDelayDuration) != null ? _a : DEFAULT_SKIP_DELAY_DURATION;
+  const triggerId = useId();
   const [openState, setOpenState] = useState(defaultOpen);
@@ -131,2 +125,3 @@ const setDelayedOpen = useCallback(
       clearTimeout(skipDelayTimer);
+      const triggerSelector = '[data-tooltip-trigger="'.concat(triggerId, '"]');
       if (!newOpenState) {
@@ -140,3 +135,3 @@ skipDelayTimer = setTimeout(() => {
       }
-      if (shouldSkipDelay || document.querySelector("[data-tooltip-trigger]:focus") != null) {
+      if (shouldSkipDelay || document.querySelector("".concat(triggerSelector, ":focus")) != null) {
         setOpenState(newOpenState);
@@ -146,3 +141,3 @@ return;
       delayTimer = setTimeout(() => {
-        if (document.querySelector("[data-tooltip-trigger]:hover") == null && process.env.NODE_ENV !== "test") {
+        if (document.querySelector("".concat(triggerSelector, ":hover")) == null && process.env.NODE_ENV !== "test") {
           return;
@@ -157,3 +152,10 @@ }
     },
-    [delayDuration, context.delayDuration, _skipDelayDuration, onClose, onOpen]
+    [
+      delayDuration,
+      context.delayDuration,
+      _skipDelayDuration,
+      onClose,
+      onOpen,
+      triggerId
+    ]
   );
@@ -186,3 +188,3 @@ const handleOpenChange = useCallback(
   }, []);
-  return /* @__PURE__ */ jsx(Provider$1, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Provider$1, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsx(TooltipTriggerContext.Provider, { value: { id: triggerId }, children: /* @__PURE__ */ jsx(
     Root,
@@ -196,3 +198,3 @@ {
     }
-  ) });
+  ) }) });
 };
@@ -199,0 +201,0 @@ Tooltip.Trigger = Trigger;

package.json

 {
   "name": "@mirohq/design-system-tooltip",
-  "version": "3.3.18-combobox.0",
+  "version": "3.3.18",
   "description": "",
@@ -32,7 +32,7 @@ "author": "Miro",
     "@mirohq/design-system-base-hotkey": "^0.1.11",
-    "@mirohq/design-system-primitive": "^1.1.2",
+    "@mirohq/design-system-use-id": "^0.1.2",
     "@mirohq/design-system-stitches": "^2.6.10",
-    "@mirohq/design-system-styles": "^1.2.10-combobox.0",
     "@mirohq/design-system-utils": "^0.15.4",
-    "@mirohq/design-tokens": "^5.1.0"
+    "@mirohq/design-tokens": "^5.1.0",
+    "@mirohq/design-system-primitive": "^1.1.2"
   },
@@ -39,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

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

Total package byte prevSize

62102

increased by1.57%

Lines of code

598

increased by0.67%

Number of low quality alerts

1

decreased by-50%

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@mirohq/design-system-styles@^1.2.10-combobox.0

• - Removed@mirohq/design-system-styles@1.2.30(transitive)

• - Removedwhat-input@5.2.12(transitive)