@transferwise/components 0.0.0-experimental-15e023f → 0.0.0-experimental-1b9f42b

package/build/common/panel/Panel.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('@floating-ui/react');
 var clsx = require('clsx');
 var React = require('react');
+var reactPopper = require('react-popper');
 require('../theme.js');
 require('../direction.js');
 require('../propsValues/control.js');
@@ -32,7 +32,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var Dimmer = require('../../dimmer/Dimmer.js');
 var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
 
-const POPOVER_OFFSET = 16;
+const POPOVER_OFFSET = [0, 16];
 // By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
 // the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
 // This mapping forces popover to try the four available positions before going back to the initial chosen one.
@@ -55,46 +55,60 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   considerHeight = false,
   ...rest
 }, reference) {
-  const arrowRef = React.useRef(null);
-  const middleware = [];
-  if (arrow) {
-    middleware.push(react.offset(POPOVER_OFFSET));
-  }
-  if (flip && fallbackPlacements[position$1]) {
-    middleware.push(react.flip({
-      fallbackPlacements: fallbackPlacements[position$1]
-    }));
-  }
+  const [arrowElement, setArrowElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const modifiers = [];
   if (altAxis) {
-    middleware.push(react.shift());
+    modifiers.push({
+      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
+      name: 'preventOverflow',
+      options: {
+        altAxis: true,
+        tether: false
+      }
+    });
   }
   if (arrow) {
-    middleware.push(react.arrow({
-      element: arrowRef,
-      padding: 8
-    }));
+    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: POPOVER_OFFSET
+      }
+    });
+  }
+  if (flip && fallbackPlacements[position$1]) {
+    modifiers.push({
+      name: 'flip',
+      options: {
+        fallbackPlacements: fallbackPlacements[position$1]
+      }
+    });
   }
   const {
-    refs,
-    floatingStyles,
-    placement,
-    middlewareData
-  } = react.useFloating({
+    styles,
+    attributes,
+    forceUpdate
+  } = reactPopper.usePopper(anchorRef.current, popperElement, {
     placement: position$1,
-    middleware,
-    elements: {
-      reference: anchorRef.current
-    },
-    whileElementsMounted: open ? react.autoUpdate : undefined
+    modifiers
   });
-  const arrowStyle = {
-    ...(middlewareData.arrow?.x != null ? {
-      left: middlewareData.arrow.x
-    } : {}),
-    ...(middlewareData.arrow?.y != null ? {
-      top: middlewareData.arrow.y
-    } : {})
-  };
+  // 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
+  React.useEffect(() => {
+    if (open && forceUpdate) {
+      forceUpdate();
+    }
+  }, [open]);
   const contentStyle = {
     ...(anchorWidth ? {
       width: anchorRef.current?.clientWidth
@@ -110,10 +124,12 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       id: overlayId,
       ...rest,
-      ref: refs.setFloating,
+      ref: setPopperElement,
       role: "dialog",
-      style: floatingStyles,
-      "data-popper-placement": placement,
+      style: {
+        ...styles.popper
+      },
+      ...attributes.popper,
       className: clsx.clsx('np-panel', {
         'np-panel--open': open
       }, rest.className),
@@ -122,9 +138,9 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
         style: contentStyle,
         className: clsx.clsx('np-panel__content'),
         children: [children, arrow && /*#__PURE__*/jsxRuntime.jsx("div", {
-          ref: arrowRef,
+          ref: setArrowElement,
           className: clsx.clsx('np-panel__arrow'),
-          style: arrowStyle
+          style: styles.arrow
         })]
       })
     })

package/build/common/panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[position]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[position],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","refs","floatingStyles","placement","middlewareData","useFloating","elements","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","style","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","role","style","popper","className","clsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,cAAc,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC;AAE9B;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG;AACzB,EAAA,CAACC,iBAAQ,CAACC,GAAG,GAAG,CAACD,iBAAQ,CAACE,MAAM,EAAEF,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,iBAAQ,CAACE,MAAM,GAAG,CAACF,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,iBAAQ,CAACI,IAAI,GAAG,CAACJ,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACE,MAAM,CAAC;AAChE,EAAA,CAACF,iBAAQ,CAACG,KAAK,GAAG,CAACH,iBAAQ,CAACI,IAAI,EAAEJ,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACE,MAAM;CAChE;AAeD,MAAMG,KAAK,gBAAGC,gBAAU,CAA6B,SAASD,KAAKA,CACjE;AACEE,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ;AACRC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;YACPC,UAAQ,GAAGb,iBAAQ,CAACE,MAAM;EAC1BY,SAAS;AACTC,EAAAA,WAAW,GAAG,KAAK;AACnBC,EAAAA,cAAc,GAAG,KAAK;EACtB,GAAGC;AAAI,CACI,EACbC,SAAS,EAAA;EAET,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;EAC7E,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGF,cAAQ,CAAwB,IAAI,CAAC;EAE/E,MAAMG,SAAS,GAAG,EAAE;AAEpB,EAAA,IAAIf,OAAO,EAAE;IACXe,SAAS,CAACC,IAAI,CAAC;AACb;AACAC,MAAAA,IAAI,EAAE,iBAAiB;AACvBC,MAAAA,OAAO,EAAE;AACPlB,QAAAA,OAAO,EAAE,IAAI;AACbmB,QAAAA,MAAM,EAAE;AACT;AACF,KAAA,CAAC;AACJ,EAAA;AAEA,EAAA,IAAIrB,KAAK,EAAE;IACTiB,SAAS,CAACC,IAAI,CAAC;AACbC,MAAAA,IAAI,EAAE,OAAO;AACbC,MAAAA,OAAO,EAAE;AACPE,QAAAA,OAAO,EAAEV,YAAY;AACrBQ,QAAAA,OAAO,EAAE;UACPG,OAAO,EAAE,CAAC;AACX;AACF;AACF,KAAA,CAAC;AACF;IACAN,SAAS,CAACC,IAAI,CAAC;AAAEC,MAAAA,IAAI,EAAE,QAAQ;AAAEC,MAAAA,OAAO,EAAE;AAAEI,QAAAA,MAAM,EAAEjC;AAAc;AAAE,KAAE,CAAC;AACzE,EAAA;AACA,EAAA,IAAIU,IAAI,IAAIT,kBAAkB,CAACc,UAAQ,CAAC,EAAE;IACxCW,SAAS,CAACC,IAAI,CAAC;AACbC,MAAAA,IAAI,EAAE,MAAM;AACZC,MAAAA,OAAO,EAAE;QACP5B,kBAAkB,EAAEA,kBAAkB,CAACc,UAAQ;AAChD;AACF,KAAA,CAAC;AACJ,EAAA;EAEA,MAAM;IAAEmB,MAAM;IAAEC,UAAU;AAAEC,IAAAA;GAAa,GAAGC,qBAAS,CAACrB,SAAS,CAACsB,OAAO,EAAEd,aAAa,EAAE;AACtFe,IAAAA,SAAS,EAAExB,UAAQ;AACnBW,IAAAA;AACD,GAAA,CAAC;AAEF;AACA;AACAc,EAAAA,eAAS,CAAC,MAAK;IACb,IAAI3B,IAAI,IAAIuB,WAAW,EAAE;AACvBA,MAAAA,WAAW,EAAE;AACf,IAAA;AACF,EAAA,CAAC,EAAE,CAACvB,IAAI,CAAC,CAAC;AAEV,EAAA,MAAM4B,YAAY,GAAkB;AAClC,IAAA,IAAIxB,WAAW,GAAG;AAAEyB,MAAAA,KAAK,EAAE1B,SAAS,CAACsB,OAAO,EAAEK;AAAW,KAAE,GAAGC,SAAS;GACxE;AAED,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACpC,IAAAA,IAAI,EAAEA,IAAK;IAACqC,WAAW,EAAA,IAAA;IAACC,kBAAkB,EAAA,IAAA;IAACC,iBAAiB,EAAA,IAAA;AAACtC,IAAAA,OAAO,EAAEA,OAAQ;AAAAF,IAAAA,QAAA,eACpFoC,cAAA,CAAA,KAAA,EAAA;AACEK,MAAAA,EAAE,EAAER,SAAU;AAAA,MAAA,GACV1B,IAAI;AACRmC,MAAAA,GAAG,EAAE7B,gBAAiB;AACtB8B,MAAAA,IAAI,EAAC,QAAQ;AACbC,MAAAA,KAAK,EAAE;AAAE,QAAA,GAAGtB,MAAM,CAACuB;OAAS;MAAA,GACxBtB,UAAU,CAACsB,MAAM;AACrBC,MAAAA,SAAS,EAAEC,SAAI,CAAC,UAAU,EAAE;AAAE,QAAA,gBAAgB,EAAE9C;AAAI,OAAE,EAAEM,IAAI,CAACuC,SAAS,CAAE;AAAA9C,MAAAA,QAAA,eAExEgD,eAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,GAAG,EAAElC,SAAU;AAACoC,QAAAA,KAAK,EAAEf,YAAa;AAACiB,QAAAA,SAAS,EAAEC,SAAI,CAAC,mBAAmB,CAAE;AAAA/C,QAAAA,QAAA,EAAA,CAC5EA,QAAQ,EAERH,KAAK,iBACJuC,cAAA,CAAA,KAAA,EAAA;AAAKM,UAAAA,GAAG,EAAEhC,eAAgB;AAACoC,UAAAA,SAAS,EAAEC,SAAI,CAAC,iBAAiB,CAAE;UAACH,KAAK,EAAEtB,MAAM,CAACzB;AAAM,SAAA,CACpF;OACE;KACF;AACP,GAAQ,CAAC;AAEb,CAAC;;;;"}

package/build/common/panel/Panel.mjs

@@ -1,6 +1,6 @@
-import { offset, flip, shift, arrow, useFloating, autoUpdate } from '@floating-ui/react';
 import { clsx } from 'clsx';
-import { forwardRef, useRef, useContext } from 'react';
+import { forwardRef, useState, useEffect, useContext } from 'react';
+import { usePopper } from 'react-popper';
 import '../theme.mjs';
 import '../direction.mjs';
 import '../propsValues/control.mjs';
@@ -28,7 +28,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import Dimmer from '../../dimmer/Dimmer.mjs';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
 
-const POPOVER_OFFSET = 16;
+const POPOVER_OFFSET = [0, 16];
 // By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
 // the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
 // This mapping forces popover to try the four available positions before going back to the initial chosen one.
@@ -39,8 +39,8 @@ const fallbackPlacements = {
   [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
 };
 const Panel = /*#__PURE__*/forwardRef(function Panel({
-  arrow: arrow$1 = false,
-  flip: flip$1 = true,
+  arrow = false,
+  flip = true,
   altAxis = false,
   children,
   open = false,
@@ -51,46 +51,60 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
   considerHeight = false,
   ...rest
 }, reference) {
-  const arrowRef = useRef(null);
-  const middleware = [];
-  if (arrow$1) {
-    middleware.push(offset(POPOVER_OFFSET));
-  }
-  if (flip$1 && fallbackPlacements[position]) {
-    middleware.push(flip({
-      fallbackPlacements: fallbackPlacements[position]
-    }));
-  }
+  const [arrowElement, setArrowElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const modifiers = [];
   if (altAxis) {
-    middleware.push(shift());
+    modifiers.push({
+      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
+      name: 'preventOverflow',
+      options: {
+        altAxis: true,
+        tether: false
+      }
+    });
   }
-  if (arrow$1) {
-    middleware.push(arrow({
-      element: arrowRef,
-      padding: 8
-    }));
+  if (arrow) {
+    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: POPOVER_OFFSET
+      }
+    });
+  }
+  if (flip && fallbackPlacements[position]) {
+    modifiers.push({
+      name: 'flip',
+      options: {
+        fallbackPlacements: fallbackPlacements[position]
+      }
+    });
   }
   const {
-    refs,
-    floatingStyles,
-    placement,
-    middlewareData
-  } = useFloating({
+    styles,
+    attributes,
+    forceUpdate
+  } = usePopper(anchorRef.current, popperElement, {
     placement: position,
-    middleware,
-    elements: {
-      reference: anchorRef.current
-    },
-    whileElementsMounted: open ? autoUpdate : undefined
+    modifiers
   });
-  const arrowStyle = {
-    ...(middlewareData.arrow?.x != null ? {
-      left: middlewareData.arrow.x
-    } : {}),
-    ...(middlewareData.arrow?.y != null ? {
-      top: middlewareData.arrow.y
-    } : {})
-  };
+  // 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 contentStyle = {
     ...(anchorWidth ? {
       width: anchorRef.current?.clientWidth
@@ -106,10 +120,12 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
     children: /*#__PURE__*/jsx("div", {
       id: overlayId,
       ...rest,
-      ref: refs.setFloating,
+      ref: setPopperElement,
       role: "dialog",
-      style: floatingStyles,
-      "data-popper-placement": placement,
+      style: {
+        ...styles.popper
+      },
+      ...attributes.popper,
       className: clsx('np-panel', {
         'np-panel--open': open
       }, rest.className),
@@ -117,10 +133,10 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
         ref: reference,
         style: contentStyle,
         className: clsx('np-panel__content'),
-        children: [children, arrow$1 && /*#__PURE__*/jsx("div", {
-          ref: arrowRef,
+        children: [children, arrow && /*#__PURE__*/jsx("div", {
+          ref: setArrowElement,
           className: clsx('np-panel__arrow'),
-          style: arrowStyle
+          style: styles.arrow
         })]
       })
     })

package/build/common/panel/Panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.mjs","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[position]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[position],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","refs","floatingStyles","placement","middlewareData","useFloating","elements","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","style","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.mjs","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","role","style","popper","className","clsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,cAAc,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC;AAE9B;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG;AACzB,EAAA,CAACC,QAAQ,CAACC,GAAG,GAAG,CAACD,QAAQ,CAACE,MAAM,EAAEF,QAAQ,CAACG,KAAK,EAAEH,QAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,QAAQ,CAACE,MAAM,GAAG,CAACF,QAAQ,CAACC,GAAG,EAAED,QAAQ,CAACG,KAAK,EAAEH,QAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,QAAQ,CAACI,IAAI,GAAG,CAACJ,QAAQ,CAACG,KAAK,EAAEH,QAAQ,CAACC,GAAG,EAAED,QAAQ,CAACE,MAAM,CAAC;AAChE,EAAA,CAACF,QAAQ,CAACG,KAAK,GAAG,CAACH,QAAQ,CAACI,IAAI,EAAEJ,QAAQ,CAACC,GAAG,EAAED,QAAQ,CAACE,MAAM;CAChE;AAeD,MAAMG,KAAK,gBAAGC,UAAU,CAA6B,SAASD,KAAKA,CACjE;AACEE,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ;AACRC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ,GAAGb,QAAQ,CAACE,MAAM;EAC1BY,SAAS;AACTC,EAAAA,WAAW,GAAG,KAAK;AACnBC,EAAAA,cAAc,GAAG,KAAK;EACtB,GAAGC;AAAI,CACI,EACbC,SAAS,EAAA;EAET,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAAwB,IAAI,CAAC;EAC7E,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGF,QAAQ,CAAwB,IAAI,CAAC;EAE/E,MAAMG,SAAS,GAAG,EAAE;AAEpB,EAAA,IAAIf,OAAO,EAAE;IACXe,SAAS,CAACC,IAAI,CAAC;AACb;AACAC,MAAAA,IAAI,EAAE,iBAAiB;AACvBC,MAAAA,OAAO,EAAE;AACPlB,QAAAA,OAAO,EAAE,IAAI;AACbmB,QAAAA,MAAM,EAAE;AACT;AACF,KAAA,CAAC;AACJ,EAAA;AAEA,EAAA,IAAIrB,KAAK,EAAE;IACTiB,SAAS,CAACC,IAAI,CAAC;AACbC,MAAAA,IAAI,EAAE,OAAO;AACbC,MAAAA,OAAO,EAAE;AACPE,QAAAA,OAAO,EAAEV,YAAY;AACrBQ,QAAAA,OAAO,EAAE;UACPG,OAAO,EAAE,CAAC;AACX;AACF;AACF,KAAA,CAAC;AACF;IACAN,SAAS,CAACC,IAAI,CAAC;AAAEC,MAAAA,IAAI,EAAE,QAAQ;AAAEC,MAAAA,OAAO,EAAE;AAAEI,QAAAA,MAAM,EAAEjC;AAAc;AAAE,KAAE,CAAC;AACzE,EAAA;AACA,EAAA,IAAIU,IAAI,IAAIT,kBAAkB,CAACc,QAAQ,CAAC,EAAE;IACxCW,SAAS,CAACC,IAAI,CAAC;AACbC,MAAAA,IAAI,EAAE,MAAM;AACZC,MAAAA,OAAO,EAAE;QACP5B,kBAAkB,EAAEA,kBAAkB,CAACc,QAAQ;AAChD;AACF,KAAA,CAAC;AACJ,EAAA;EAEA,MAAM;IAAEmB,MAAM;IAAEC,UAAU;AAAEC,IAAAA;GAAa,GAAGC,SAAS,CAACrB,SAAS,CAACsB,OAAO,EAAEd,aAAa,EAAE;AACtFe,IAAAA,SAAS,EAAExB,QAAQ;AACnBW,IAAAA;AACD,GAAA,CAAC;AAEF;AACA;AACAc,EAAAA,SAAS,CAAC,MAAK;IACb,IAAI3B,IAAI,IAAIuB,WAAW,EAAE;AACvBA,MAAAA,WAAW,EAAE;AACf,IAAA;AACF,EAAA,CAAC,EAAE,CAACvB,IAAI,CAAC,CAAC;AAEV,EAAA,MAAM4B,YAAY,GAAkB;AAClC,IAAA,IAAIxB,WAAW,GAAG;AAAEyB,MAAAA,KAAK,EAAE1B,SAAS,CAACsB,OAAO,EAAEK;AAAW,KAAE,GAAGC,SAAS;GACxE;AAED,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACpC,IAAAA,IAAI,EAAEA,IAAK;IAACqC,WAAW,EAAA,IAAA;IAACC,kBAAkB,EAAA,IAAA;IAACC,iBAAiB,EAAA,IAAA;AAACtC,IAAAA,OAAO,EAAEA,OAAQ;AAAAF,IAAAA,QAAA,eACpFoC,GAAA,CAAA,KAAA,EAAA;AACEK,MAAAA,EAAE,EAAER,SAAU;AAAA,MAAA,GACV1B,IAAI;AACRmC,MAAAA,GAAG,EAAE7B,gBAAiB;AACtB8B,MAAAA,IAAI,EAAC,QAAQ;AACbC,MAAAA,KAAK,EAAE;AAAE,QAAA,GAAGtB,MAAM,CAACuB;OAAS;MAAA,GACxBtB,UAAU,CAACsB,MAAM;AACrBC,MAAAA,SAAS,EAAEC,IAAI,CAAC,UAAU,EAAE;AAAE,QAAA,gBAAgB,EAAE9C;AAAI,OAAE,EAAEM,IAAI,CAACuC,SAAS,CAAE;AAAA9C,MAAAA,QAAA,eAExEgD,IAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,GAAG,EAAElC,SAAU;AAACoC,QAAAA,KAAK,EAAEf,YAAa;AAACiB,QAAAA,SAAS,EAAEC,IAAI,CAAC,mBAAmB,CAAE;AAAA/C,QAAAA,QAAA,EAAA,CAC5EA,QAAQ,EAERH,KAAK,iBACJuC,GAAA,CAAA,KAAA,EAAA;AAAKM,UAAAA,GAAG,EAAEhC,eAAgB;AAACoC,UAAAA,SAAS,EAAEC,IAAI,CAAC,iBAAiB,CAAE;UAACH,KAAK,EAAEtB,MAAM,CAACzB;AAAM,SAAA,CACpF;OACE;KACF;AACP,GAAQ,CAAC;AAEb,CAAC;;;;"}

package/build/tooltip/Tooltip.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('@floating-ui/react');
 var clsx = require('clsx');
 var React = require('react');
+var reactPopper = require('react-popper');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
@@ -30,6 +30,7 @@ require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 const Tooltip = ({
   position: position$1 = position.Position.TOP,
   children = undefined,
@@ -38,35 +39,51 @@ const Tooltip = ({
   className
 }) => {
   const [open, setOpen] = React.useState(false);
-  const arrowRef = React.useRef(null);
+  const anchorReference = React.useRef(null);
+  const [arrowElement, setArrowElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
   const fallbackId = React.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.Position.TOP
+    }
+  });
   const {
-    refs,
-    floatingStyles,
-    placement,
-    middlewareData
-  } = react.useFloating({
+    styles,
+    attributes,
+    forceUpdate
+  } = reactPopper.usePopper(anchorReference.current, popperElement, {
     placement: position$1,
-    middleware: [react.offset(16), react.flip({
-      fallbackPlacements: [position.Position.TOP]
-    }), react.arrow({
-      element: arrowRef,
-      padding: 8
-    })],
-    whileElementsMounted: open ? react.autoUpdate : undefined,
-    open
+    modifiers
   });
-  const arrowStyle = {
-    ...(middlewareData.arrow?.x != null ? {
-      left: middlewareData.arrow.x
-    } : {}),
-    ...(middlewareData.arrow?.y != null ? {
-      top: middlewareData.arrow.y
-    } : {})
-  };
+  // 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
+  React.useEffect(() => {
+    if (open && forceUpdate) {
+      forceUpdate();
+    }
+  }, [open]);
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    ref: refs.setReference,
+    ref: anchorReference,
     className: "tw-tooltip-container",
     onMouseOver: () => setOpen(true),
     onFocus: () => setOpen(true),
@@ -75,19 +92,23 @@ const Tooltip = ({
     children: [children ? /*#__PURE__*/React.cloneElement(children, {
       'aria-describedby': `${tooltipId}-tooltip`
     }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: refs.setFloating,
+      // @ts-expect-error
+      ref: setPopperElement,
       className: clsx.clsx('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className),
-      style: floatingStyles,
-      "data-popper-placement": placement,
+      style: {
+        ...styles.popper
+      },
+      ...attributes.popper,
       "aria-hidden": !open,
       role: "tooltip",
       id: `${tooltipId}-tooltip`,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "np-panel__content tooltip-inner",
         children: [label, /*#__PURE__*/jsxRuntime.jsx("div", {
-          ref: arrowRef,
+          // @ts-expect-error
+          ref: setArrowElement,
           className: clsx.clsx('np-panel__arrow'),
-          style: arrowStyle
+          style: styles.arrow
         })]
       })
     })]

package/build/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  CSSProperties,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/propsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware: [\n      offset(16),\n      flip({ fallbackPlacements: [Position.TOP] }),\n      arrowMiddleware({ element: arrowRef, padding: 8 }),\n    ],\n    whileElementsMounted: open ? autoUpdate : undefined,\n    open,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  return (\n    <span\n      ref={refs.setReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        ref={refs.setFloating}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={floatingStyles}\n        data-popper-placement={placement}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n        </div>\n      </div>\n    </span>\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { CommonProps, Position } from '../common';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/propsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const anchorReference = useRef(null);\n  const [arrowElement, setArrowElement] = useState(null);\n  const [popperElement, setPopperElement] = useState(null);\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n  const modifiers = [];\n\n  modifiers.push({\n    name: 'arrow',\n    options: {\n      element: arrowElement,\n      options: {\n        padding: 8, // 8px from the edges of the popper\n      },\n    },\n  });\n  // This lets you displace a popper element from its reference element.\n  modifiers.push({ name: 'offset', options: { offset: [0, 16] } });\n  modifiers.push({\n    name: 'flip',\n    options: {\n      fallbackPlacements: Position.TOP,\n    },\n  });\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorReference.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  return (\n    <span\n      ref={anchorReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        // @ts-expect-error\n        ref={setPopperElement}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div\n            // @ts-expect-error\n            ref={setArrowElement}\n            className={clsx('np-panel__arrow')}\n            style={styles.arrow}\n          />\n        </div>\n      </div>\n    </span>\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","anchorReference","useRef","arrowElement","setArrowElement","popperElement","setPopperElement","fallbackId","useId","tooltipId","modifiers","push","name","options","element","padding","offset","fallbackPlacements","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","_jsxs","ref","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","clsx","style","popper","role","arrow"],"mappings":"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"}

package/build/tooltip/Tooltip.mjs

@@ -1,6 +1,6 @@
-import { useFloating, autoUpdate, offset, flip, arrow } from '@floating-ui/react';
 import { clsx } from 'clsx';
-import { useState, useRef, useId, cloneElement } from 'react';
+import { useState, useRef, useId, useEffect, cloneElement } from 'react';
+import { usePopper } from 'react-popper';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';
@@ -26,6 +26,7 @@ import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 const Tooltip = ({
   position = Position.TOP,
   children = undefined,
@@ -34,35 +35,51 @@ const Tooltip = ({
   className
 }) => {
   const [open, setOpen] = useState(false);
-  const arrowRef = useRef(null);
+  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',
+    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 {
-    refs,
-    floatingStyles,
-    placement,
-    middlewareData
-  } = useFloating({
+    styles,
+    attributes,
+    forceUpdate
+  } = usePopper(anchorReference.current, popperElement, {
     placement: position,
-    middleware: [offset(16), flip({
-      fallbackPlacements: [Position.TOP]
-    }), arrow({
-      element: arrowRef,
-      padding: 8
-    })],
-    whileElementsMounted: open ? autoUpdate : undefined,
-    open
+    modifiers
   });
-  const arrowStyle = {
-    ...(middlewareData.arrow?.x != null ? {
-      left: middlewareData.arrow.x
-    } : {}),
-    ...(middlewareData.arrow?.y != null ? {
-      top: middlewareData.arrow.y
-    } : {})
-  };
+  // 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]);
   return /*#__PURE__*/jsxs("span", {
-    ref: refs.setReference,
+    ref: anchorReference,
     className: "tw-tooltip-container",
     onMouseOver: () => setOpen(true),
     onFocus: () => setOpen(true),
@@ -71,19 +88,23 @@ const Tooltip = ({
     children: [children ? /*#__PURE__*/cloneElement(children, {
       'aria-describedby': `${tooltipId}-tooltip`
     }) : null, /*#__PURE__*/jsx("div", {
-      ref: refs.setFloating,
+      // @ts-expect-error
+      ref: setPopperElement,
       className: clsx('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className),
-      style: floatingStyles,
-      "data-popper-placement": placement,
+      style: {
+        ...styles.popper
+      },
+      ...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", {
-          ref: arrowRef,
+          // @ts-expect-error
+          ref: setArrowElement,
           className: clsx('np-panel__arrow'),
-          style: arrowStyle
+          style: styles.arrow
         })]
       })
     })]

package/build/tooltip/Tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  CSSProperties,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/propsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware: [\n      offset(16),\n      flip({ fallbackPlacements: [Position.TOP] }),\n      arrowMiddleware({ element: arrowRef, padding: 8 }),\n    ],\n    whileElementsMounted: open ? autoUpdate : undefined,\n    open,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  return (\n    <span\n      ref={refs.setReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        ref={refs.setFloating}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={floatingStyles}\n        data-popper-placement={placement}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n        </div>\n      </div>\n    </span>\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}
+{"version":3,"file":"Tooltip.mjs","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { CommonProps, Position } from '../common';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/propsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const anchorReference = useRef(null);\n  const [arrowElement, setArrowElement] = useState(null);\n  const [popperElement, setPopperElement] = useState(null);\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n  const modifiers = [];\n\n  modifiers.push({\n    name: 'arrow',\n    options: {\n      element: arrowElement,\n      options: {\n        padding: 8, // 8px from the edges of the popper\n      },\n    },\n  });\n  // This lets you displace a popper element from its reference element.\n  modifiers.push({ name: 'offset', options: { offset: [0, 16] } });\n  modifiers.push({\n    name: 'flip',\n    options: {\n      fallbackPlacements: Position.TOP,\n    },\n  });\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorReference.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  return (\n    <span\n      ref={anchorReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        // @ts-expect-error\n        ref={setPopperElement}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div\n            // @ts-expect-error\n            ref={setArrowElement}\n            className={clsx('np-panel__arrow')}\n            style={styles.arrow}\n          />\n        </div>\n      </div>\n    </span>\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","anchorReference","useRef","arrowElement","setArrowElement","popperElement","setPopperElement","fallbackId","useId","tooltipId","modifiers","push","name","options","element","padding","offset","fallbackPlacements","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","_jsxs","ref","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","clsx","style","popper","role","arrow"],"mappings":"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"}

package/build/types/common/panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/panel/Panel.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAY,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAgBxF,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW,CAAC;IACvE,SAAS,EAAE,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAZD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW;eAC3D,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;kBAC7B,OAAO;qBACJ,OAAO;;;mFAmFxB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/panel/Panel.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EAKf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAY,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAgBxF,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW,CAAC;IACvE,SAAS,EAAE,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAZD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW;eAC3D,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;kBAC7B,OAAO;qBACJ,OAAO;;;mFAkGxB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/build/types/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,iBAAiB,EAEjB,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAY,MAAM,WAAW,CAAC;AAClD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACZ,MAAM,gCAAgC,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;IAC3C,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,GACA,WAAW,CAAC;AAEd,QAAA,MAAM,OAAO,GAAI,+CAMd,YAAY,gCA0Dd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,iBAAiB,EAEjB,SAAS,EAMV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,WAAW,EAAY,MAAM,WAAW,CAAC;AAClD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACZ,MAAM,gCAAgC,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;IAC3C,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,GACA,WAAW,CAAC;AAEd,QAAA,MAAM,OAAO,GAAI,+CAMd,YAAY,gCAkFd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-15e023f",
+  "version": "0.0.0-experimental-1b9f42b",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -104,6 +104,7 @@
     "@babel/runtime": "^7.29.2",
     "@floating-ui/react": "^0.27.19",
     "@headlessui/react": "^2.2.9",
+    "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.5",
     "@react-aria/overlays": "^3.31.2",
     "@transferwise/formatting": "^2.14.0",
@@ -115,6 +116,7 @@
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
+    "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "virtua": "^0.48.8",
     "@transferwise/neptune-tokens": "^8.20.3"

package/src/common/panel/Panel.tsx

@@ -1,12 +1,3 @@
-import {
-  arrow as arrowMiddleware,
-  autoUpdate,
-  flip as flipMiddleware,
-  offset,
-  type Placement,
-  shift,
-  useFloating,
-} from '@floating-ui/react';
 import { clsx } from 'clsx';
 import {
   CSSProperties,
@@ -16,19 +7,21 @@ import {
   SyntheticEvent,
   forwardRef,
   useContext,
-  useRef,
+  useEffect,
+  useState,
 } from 'react';
+import { usePopper } from 'react-popper';
 
 import { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';
 import Dimmer from '../../dimmer';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
 
-const POPOVER_OFFSET = 16;
+const POPOVER_OFFSET = [0, 16];
 
 // By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
 // the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
 // This mapping forces popover to try the four available positions before going back to the initial chosen one.
-const fallbackPlacements: Record<string, Placement[]> = {
+const fallbackPlacements = {
   [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
   [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
   [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
@@ -64,43 +57,56 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
   }: PanelProps,
   reference,
 ) {
-  const arrowRef = useRef<HTMLDivElement | null>(null);
-
-  const middleware = [];
-
-  if (arrow) {
-    middleware.push(offset(POPOVER_OFFSET));
-  }
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  if (flip && fallbackPlacements[position]) {
-    middleware.push(
-      flipMiddleware({
-        fallbackPlacements: fallbackPlacements[position],
-      }),
-    );
-  }
+  const modifiers = [];
 
   if (altAxis) {
-    middleware.push(shift());
+    modifiers.push({
+      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
+      name: 'preventOverflow',
+      options: {
+        altAxis: true,
+        tether: false,
+      },
+    });
   }
 
   if (arrow) {
-    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));
+    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: POPOVER_OFFSET } });
+  }
+  if (flip && fallbackPlacements[position]) {
+    modifiers.push({
+      name: 'flip',
+      options: {
+        fallbackPlacements: fallbackPlacements[position],
+      },
+    });
   }
 
-  const { refs, floatingStyles, placement, middlewareData } = useFloating({
+  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {
     placement: position,
-    middleware,
-    elements: {
-      reference: anchorRef.current,
-    },
-    whileElementsMounted: open ? autoUpdate : undefined,
+    modifiers,
   });
 
-  const arrowStyle: CSSProperties = {
-    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),
-    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),
-  };
+  // 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 contentStyle: CSSProperties = {
     ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),
@@ -113,16 +119,18 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
       <div
         id={overlayId}
         {...rest}
-        ref={refs.setFloating}
+        ref={setPopperElement}
         role="dialog"
-        style={floatingStyles}
-        data-popper-placement={placement}
+        style={{ ...styles.popper }}
+        {...attributes.popper}
         className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}
       >
         <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>
           {children}
           {/* Arrow has to stay inside content to get the same animations as the "dialog" and to get hidden when panel is closed. */}
-          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}
+          {arrow && (
+            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />
+          )}
         </div>
       </div>
     </Dimmer>

package/src/tooltip/Tooltip.tsx

@@ -1,22 +1,17 @@
-import {
-  arrow as arrowMiddleware,
-  autoUpdate,
-  flip,
-  offset,
-  useFloating,
-} from '@floating-ui/react';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 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 {
@@ -41,30 +36,48 @@ const Tooltip = ({
   className,
 }: TooltipProps) => {
   const [open, setOpen] = useState(false);
-  const arrowRef = useRef<HTMLDivElement | null>(null);
+  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',
+    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 { refs, floatingStyles, placement, middlewareData } = useFloating({
+  const { styles, attributes, forceUpdate } = usePopper(anchorReference.current, popperElement, {
     placement: position,
-    middleware: [
-      offset(16),
-      flip({ fallbackPlacements: [Position.TOP] }),
-      arrowMiddleware({ element: arrowRef, padding: 8 }),
-    ],
-    whileElementsMounted: open ? autoUpdate : undefined,
-    open,
+    modifiers,
   });
 
-  const arrowStyle: CSSProperties = {
-    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),
-    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),
-  };
+  // 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]);
 
   return (
     <span
-      ref={refs.setReference}
+      ref={anchorReference}
       className="tw-tooltip-container"
       onMouseOver={() => setOpen(true)}
       onFocus={() => setOpen(true)}
@@ -77,22 +90,28 @@ const Tooltip = ({
           })
         : null}
       <div
-        ref={refs.setFloating}
+        // @ts-expect-error
+        ref={setPopperElement}
         className={clsx(
           'np-tooltip',
           'np-panel',
           open ? `np-panel--open np-tooltip--open` : null,
           className,
         )}
-        style={floatingStyles}
-        data-popper-placement={placement}
+        style={{ ...styles.popper }}
+        {...attributes.popper}
         aria-hidden={!open}
         role="tooltip"
         id={`${tooltipId}-tooltip`}
       >
         <div className="np-panel__content tooltip-inner">
           {label}
-          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />
+          <div
+            // @ts-expect-error
+            ref={setArrowElement}
+            className={clsx('np-panel__arrow')}
+            style={styles.arrow}
+          />
         </div>
       </div>
     </span>