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

Comparing version 3.3.18 to 3.3.19

dist/main.js

@@ -10,2 +10,3 @@ 'use strict';
 var designSystemStitches = require('@mirohq/design-system-stitches');
+var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemBaseHotkey = require('@mirohq/design-system-base-hotkey');
@@ -48,21 +49,61 @@ var designSystemPrimitive = require('@mirohq/design-system-primitive');
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(
-    StyledContent,
-    {
-      ...restProps,
-      ref: forwardRef,
-      align,
-      alignOffset,
-      avoidCollisions,
-      collisionPadding,
-      hideWhenDetached,
-      side,
-      sideOffset,
-      sticky,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(StyledArrowIcon, {})
-      ]
-    }
-  )
+  }, forwardRef) => {
+    const { triggerRef } = React.useContext(TooltipTriggerContext);
+    const removeDuplicateAriaDescription = (element) => {
+      var _a, _b;
+      const ariaDescribedBy = element.getAttribute("aria-describedby");
+      if (ariaDescribedBy !== null) {
+        const ariaDescription = (_a = document.getElementById(ariaDescribedBy)) == null ? void 0 : _a.textContent;
+        const areAriaLabelAndAriaDescriptionEqual = (ariaDescription == null ? void 0 : ariaDescription.trim()) === ((_b = element == null ? void 0 : element.getAttribute("aria-label")) == null ? void 0 : _b.trim());
+        if (areAriaLabelAndAriaDescriptionEqual) {
+          element.removeAttribute("aria-describedby");
+        }
+      }
+    };
+    React.useEffect(() => {
+      const element = triggerRef.current;
+      if (element != null) {
+        const handleMutation = (mutationsList) => {
+          for (const mutation of mutationsList) {
+            if (mutation.type === "attributes" && mutation.attributeName === "aria-describedby") {
+              removeDuplicateAriaDescription(element);
+            }
+          }
+        };
+        const observer = new MutationObserver(handleMutation);
+        observer.observe(element, {
+          attributes: true
+        });
+        return () => {
+          observer.disconnect();
+        };
+      }
+      return () => {
+      };
+    }, [triggerRef]);
+    React.useEffect(() => {
+      if (triggerRef.current === null)
+        return;
+      removeDuplicateAriaDescription(triggerRef.current);
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledContent,
+      {
+        ...restProps,
+        ref: forwardRef,
+        align,
+        alignOffset,
+        avoidCollisions,
+        collisionPadding,
+        hideWhenDetached,
+        side,
+        sideOffset,
+        sticky,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(StyledArrowIcon, {})
+        ]
+      }
+    );
+  }
 );
@@ -74,3 +115,3 @@ Content.displayName = "Tooltip.Content";
 const Trigger = React__default["default"].forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
-  const { id } = React.useContext(TooltipTriggerContext);
+  const { triggerRef, id } = React.useContext(TooltipTriggerContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -82,3 +123,3 @@ StyledTrigger,
       "data-tooltip-trigger": id,
-      ref: forwardRef
+      ref: designSystemUtils.mergeRefs([triggerRef, forwardRef])
     }
@@ -110,3 +151,5 @@ );
 const DEFAULT_DELAY_DURATION = 200;
-const TooltipTriggerContext = React.createContext({});
+const TooltipTriggerContext = React.createContext({
+  triggerRef: { current: null }
+});
 const Tooltip = ({
@@ -193,12 +236,22 @@ defaultOpen = false,
   }, []);
-  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,
+  const triggerRef = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipTriggerContext.Provider,
     {
-      disableHoverableContent,
-      open: open != null ? open : openState,
-      delayDuration: 0,
-      onOpenChange: handleOpenChange,
-      children
+      value: {
+        id: triggerId,
+        triggerRef
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactTooltip.Root,
+        {
+          disableHoverableContent,
+          open: open != null ? open : openState,
+          delayDuration: 0,
+          onOpenChange: handleOpenChange,
+          children
+        }
+      )
     }
-  ) }) });
+  ) });
 };
@@ -205,0 +258,0 @@ Tooltip.Trigger = Trigger;

dist/module.js

 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useContext, createContext, useRef, useState, useCallback, useEffect } from 'react';
+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 { Hotkey as Hotkey$1 } from '@mirohq/design-system-base-hotkey';
@@ -39,21 +40,61 @@ import { Primitive } from '@mirohq/design-system-primitive';
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ jsxs(
-    StyledContent,
-    {
-      ...restProps,
-      ref: forwardRef,
-      align,
-      alignOffset,
-      avoidCollisions,
-      collisionPadding,
-      hideWhenDetached,
-      side,
-      sideOffset,
-      sticky,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(StyledArrowIcon, {})
-      ]
-    }
-  )
+  }, forwardRef) => {
+    const { triggerRef } = useContext(TooltipTriggerContext);
+    const removeDuplicateAriaDescription = (element) => {
+      var _a, _b;
+      const ariaDescribedBy = element.getAttribute("aria-describedby");
+      if (ariaDescribedBy !== null) {
+        const ariaDescription = (_a = document.getElementById(ariaDescribedBy)) == null ? void 0 : _a.textContent;
+        const areAriaLabelAndAriaDescriptionEqual = (ariaDescription == null ? void 0 : ariaDescription.trim()) === ((_b = element == null ? void 0 : element.getAttribute("aria-label")) == null ? void 0 : _b.trim());
+        if (areAriaLabelAndAriaDescriptionEqual) {
+          element.removeAttribute("aria-describedby");
+        }
+      }
+    };
+    useEffect(() => {
+      const element = triggerRef.current;
+      if (element != null) {
+        const handleMutation = (mutationsList) => {
+          for (const mutation of mutationsList) {
+            if (mutation.type === "attributes" && mutation.attributeName === "aria-describedby") {
+              removeDuplicateAriaDescription(element);
+            }
+          }
+        };
+        const observer = new MutationObserver(handleMutation);
+        observer.observe(element, {
+          attributes: true
+        });
+        return () => {
+          observer.disconnect();
+        };
+      }
+      return () => {
+      };
+    }, [triggerRef]);
+    useEffect(() => {
+      if (triggerRef.current === null)
+        return;
+      removeDuplicateAriaDescription(triggerRef.current);
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      StyledContent,
+      {
+        ...restProps,
+        ref: forwardRef,
+        align,
+        alignOffset,
+        avoidCollisions,
+        collisionPadding,
+        hideWhenDetached,
+        side,
+        sideOffset,
+        sticky,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(StyledArrowIcon, {})
+        ]
+      }
+    );
+  }
 );
@@ -65,3 +106,3 @@ Content.displayName = "Tooltip.Content";
 const Trigger = React.forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
-  const { id } = useContext(TooltipTriggerContext);
+  const { triggerRef, id } = useContext(TooltipTriggerContext);
   return /* @__PURE__ */ jsx(
@@ -73,3 +114,3 @@ StyledTrigger,
       "data-tooltip-trigger": id,
-      ref: forwardRef
+      ref: mergeRefs([triggerRef, forwardRef])
     }
@@ -101,3 +142,5 @@ );
 const DEFAULT_DELAY_DURATION = 200;
-const TooltipTriggerContext = createContext({});
+const TooltipTriggerContext = createContext({
+  triggerRef: { current: null }
+});
 const Tooltip = ({
@@ -184,12 +227,22 @@ defaultOpen = false,
   }, []);
-  return /* @__PURE__ */ jsx(Provider$1, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsx(TooltipTriggerContext.Provider, { value: { id: triggerId }, children: /* @__PURE__ */ jsx(
-    Root,
+  const triggerRef = useRef(null);
+  return /* @__PURE__ */ jsx(Provider$1, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsx(
+    TooltipTriggerContext.Provider,
     {
-      disableHoverableContent,
-      open: open != null ? open : openState,
-      delayDuration: 0,
-      onOpenChange: handleOpenChange,
-      children
+      value: {
+        id: triggerId,
+        triggerRef
+      },
+      children: /* @__PURE__ */ jsx(
+        Root,
+        {
+          disableHoverableContent,
+          open: open != null ? open : openState,
+          delayDuration: 0,
+          onOpenChange: handleOpenChange,
+          children
+        }
+      )
     }
-  ) }) });
+  ) });
 };
@@ -196,0 +249,0 @@ Tooltip.Trigger = Trigger;

package.json

 {
   "name": "@mirohq/design-system-tooltip",
-  "version": "3.3.18",
+  "version": "3.3.19",
   "description": "",
@@ -32,7 +32,7 @@ "author": "Miro",
     "@mirohq/design-system-base-hotkey": "^0.1.11",
-    "@mirohq/design-system-use-id": "^0.1.2",
+    "@mirohq/design-system-primitive": "^1.1.2",
     "@mirohq/design-system-stitches": "^2.6.10",
     "@mirohq/design-system-utils": "^0.15.4",
     "@mirohq/design-tokens": "^5.1.0",
-    "@mirohq/design-system-primitive": "^1.1.2"
+    "@mirohq/design-system-use-id": "^0.1.2"
   },
@@ -39,0 +39,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

73322

increased by18.07%

Lines of code

704

increased by17.73%

No dependency changes