@transferwise/components 46.135.0 → 46.135.2

package/src/tooltip/Tooltip.tsx

@@ -1,17 +1,22 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+import {
+  arrow as arrowMiddleware,
+  autoUpdate,
+  flip,
+  offset,
+  useFloating,
+} from '@floating-ui/react';
 import { clsx } from 'clsx';
 import {
   AriaAttributes,
+  CSSProperties,
   PropsWithChildren,
   ReactElement,
   ReactNode,
   cloneElement,
-  useEffect,
   useId,
   useRef,
   useState,
 } from 'react';
-import { usePopper } from 'react-popper';
 
 import { CommonProps, Position } from '../common';
 import {
@@ -36,48 +41,30 @@ const Tooltip = ({
   className,
 }: TooltipProps) => {
   const [open, setOpen] = useState(false);
-  const anchorReference = useRef(null);
-  const [arrowElement, setArrowElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
+  const arrowRef = useRef<HTMLDivElement | null>(null);
 
   const fallbackId = useId();
   const tooltipId = id ?? fallbackId;
-  const modifiers = [];
-
-  modifiers.push({
-    name: 'arrow',
-    options: {
-      element: arrowElement,
-      options: {
-        padding: 8, // 8px from the edges of the popper
-      },
-    },
-  });
-  // This lets you displace a popper element from its reference element.
-  modifiers.push({ name: 'offset', options: { offset: [0, 16] } });
-  modifiers.push({
-    name: 'flip',
-    options: {
-      fallbackPlacements: Position.TOP,
-    },
-  });
 
-  const { styles, attributes, forceUpdate } = usePopper(anchorReference.current, popperElement, {
+  const { refs, floatingStyles, placement, middlewareData } = useFloating({
     placement: position,
-    modifiers,
+    middleware: [
+      offset(16),
+      flip({ fallbackPlacements: [Position.TOP] }),
+      arrowMiddleware({ element: arrowRef, padding: 8 }),
+    ],
+    whileElementsMounted: open ? autoUpdate : undefined,
+    open,
   });
 
-  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
-  // it is most simple just to always position before opening
-  useEffect(() => {
-    if (open && forceUpdate) {
-      forceUpdate();
-    }
-  }, [open]);
+  const arrowStyle: CSSProperties = {
+    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),
+    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),
+  };
 
   return (
     <span
-      ref={anchorReference}
+      ref={refs.setReference}
       className="tw-tooltip-container"
       onMouseOver={() => setOpen(true)}
       onFocus={() => setOpen(true)}
@@ -90,28 +77,22 @@ const Tooltip = ({
           })
         : null}
       <div
-        // @ts-expect-error
-        ref={setPopperElement}
+        ref={refs.setFloating}
         className={clsx(
           'np-tooltip',
           'np-panel',
           open ? `np-panel--open np-tooltip--open` : null,
           className,
         )}
-        style={{ ...styles.popper }}
-        {...attributes.popper}
+        style={floatingStyles}
+        data-popper-placement={placement}
         aria-hidden={!open}
         role="tooltip"
         id={`${tooltipId}-tooltip`}
       >
         <div className="np-panel__content tooltip-inner">
           {label}
-          <div
-            // @ts-expect-error
-            ref={setArrowElement}
-            className={clsx('np-panel__arrow')}
-            style={styles.arrow}
-          />
+          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />
         </div>
       </div>
     </span>