@transferwise/components 0.0.0-experimental-88c518c → 0.0.0-experimental-656d955

package/build/index.esm.js

@@ -5486,12 +5486,15 @@ const Tooltip = ({
   position = Position.TOP,
   children = undefined,
   label,
+  id,
   className
 }) => {
   const [open, setOpen] = useState(false);
   const anchorReference = useRef(null);
   const [arrowElement, setArrowElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
+  const fallbackId = useId();
+  const tooltipId = id ?? fallbackId;
   const modifiers = [];
   modifiers.push({
     name: 'arrow',
@@ -5530,60 +5533,42 @@ const Tooltip = ({
       forceUpdate();
     }
   }, [open]);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("span", {
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs("span", {
       ref: anchorReference,
-      className: "d-inline-block",
-      children: children ? /*#__PURE__*/cloneElement(children, {
-        /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
-        onMouseOver: () => {
-          if (children?.props?.onMouseOver) {
-            children?.props?.onMouseOver();
-          }
-          setOpen(true);
-        },
-        onFocus: () => {
-          if (children?.props?.onFocus) {
-            children.props.onFocus();
-          }
-          setOpen(true);
-        },
-        onMouseOut: () => {
-          if (children?.props?.onMouseOver) {
-            children.props.onMouseOver();
-          }
-          setOpen(false);
+      className: "tw-tooltip-container",
+      onMouseOver: () => setOpen(true),
+      onFocus: () => setOpen(true),
+      onMouseOut: () => setOpen(false),
+      onBlur: () => setOpen(false),
+      children: [children ? /*#__PURE__*/cloneElement(children, {
+        'aria-describedby': `${tooltipId}-tooltip`
+      }) : null, /*#__PURE__*/jsx("div", {
+        // @ts-expect-error
+        ref: setPopperElement,
+        className: classNames('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
+        // eslint-disable-next-line react/forbid-dom-props
+        ,
+        style: {
+          ...styles.popper
         },
-        onBlur: () => {
-          if (children?.props?.onBlur) {
-            children.props.onBlur();
-          }
-          setOpen(false);
-        }
-        /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
-      }) : null
-    }), open ? /*#__PURE__*/jsx("div", {
-      // @ts-expect-error
-      ref: setPopperElement,
-      className: classNames('np-tooltip', 'np-panel', 'np-panel--open', 'bg-screen', className)
-      // eslint-disable-next-line react/forbid-dom-props
-      ,
-      style: {
-        ...styles.popper
-      },
-      ...attributes.popper,
-      children: /*#__PURE__*/jsxs("div", {
-        className: "np-panel__content tooltip-inner",
-        children: [label, /*#__PURE__*/jsx("div", {
-          // @ts-expect-error
-          ref: setArrowElement,
-          className: classNames('np-panel__arrow')
-          // eslint-disable-next-line react/forbid-dom-props
-          ,
-          style: styles.arrow
-        })]
-      })
-    }) : null]
+        ...attributes.popper,
+        "aria-hidden": !open,
+        role: "tooltip",
+        id: `${tooltipId}-tooltip`,
+        children: /*#__PURE__*/jsxs("div", {
+          className: "np-panel__content tooltip-inner",
+          children: [label, /*#__PURE__*/jsx("div", {
+            // @ts-expect-error
+            ref: setArrowElement,
+            className: classNames('np-panel__arrow')
+            // eslint-disable-next-line react/forbid-dom-props
+            ,
+            style: styles.arrow
+          })]
+        })
+      })]
+    })
   });
 };
 var Tooltip$1 = Tooltip;