@transferwise/components 46.135.1 → 46.135.2

package/build/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"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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"}
+{"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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"}

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, useEffect, cloneElement } from 'react';
-import { usePopper } from 'react-popper';
+import { useState, useRef, useId, cloneElement } from 'react';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';
@@ -26,7 +26,6 @@ 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,
@@ -35,51 +34,35 @@ const Tooltip = ({
   className
 }) => {
   const [open, setOpen] = useState(false);
-  const anchorReference = useRef(null);
-  const [arrowElement, setArrowElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
+  const arrowRef = useRef(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, {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = useFloating({
     placement: position,
-    modifiers
+    middleware: [offset(16), flip({
+      fallbackPlacements: [Position.TOP]
+    }), arrow({
+      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 = {
+    ...(middlewareData.arrow?.x != null ? {
+      left: middlewareData.arrow.x
+    } : {}),
+    ...(middlewareData.arrow?.y != null ? {
+      top: middlewareData.arrow.y
+    } : {})
+  };
   return /*#__PURE__*/jsxs("span", {
-    ref: anchorReference,
+    ref: refs.setReference,
     className: "tw-tooltip-container",
     onMouseOver: () => setOpen(true),
     onFocus: () => setOpen(true),
@@ -88,23 +71,19 @@ const Tooltip = ({
     children: [children ? /*#__PURE__*/cloneElement(children, {
       'aria-describedby': `${tooltipId}-tooltip`
     }) : null, /*#__PURE__*/jsx("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`,
       children: /*#__PURE__*/jsxs("div", {
         className: "np-panel__content tooltip-inner",
         children: [label, /*#__PURE__*/jsx("div", {
-          // @ts-expect-error
-          ref: setArrowElement,
+          ref: arrowRef,
           className: clsx('np-panel__arrow'),
-          style: styles.arrow
+          style: arrowStyle
         })]
       })
     })]

package/build/tooltip/Tooltip.mjs.map

@@ -1 +1 @@
-{"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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"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAMA,OAAO,GAAGA,CAAC;EACfC,QAAQ,GAAGC,QAAQ,CAACC,GAAG;AACvBC,EAAAA,QAAQ,GAAGC,SAAS;EACpBC,KAAK;EACLC,EAAE;AACFC,EAAAA;AAAS,CACI,KAAI;EACjB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AACvC,EAAA,MAAMC,QAAQ,GAAGC,MAAM,CAAwB,IAAI,CAAC;AAEpD,EAAA,MAAMC,UAAU,GAAGC,KAAK,EAAE;AAC1B,EAAA,MAAMC,SAAS,GAAGT,EAAE,IAAIO,UAAU;EAElC,MAAM;IAAEG,IAAI;IAAEC,cAAc;IAAEC,SAAS;AAAEC,IAAAA;GAAgB,GAAGC,WAAW,CAAC;AACtEF,IAAAA,SAAS,EAAElB,QAAQ;IACnBqB,UAAU,EAAE,CACVC,MAAM,CAAC,EAAE,CAAC,EACVC,IAAI,CAAC;AAAEC,MAAAA,kBAAkB,EAAE,CAACvB,QAAQ,CAACC,GAAG;KAAG,CAAC,EAC5CuB,KAAe,CAAC;AAAEC,MAAAA,OAAO,EAAEf,QAAQ;AAAEgB,MAAAA,OAAO,EAAE;AAAC,KAAE,CAAC,CACnD;AACDC,IAAAA,oBAAoB,EAAEpB,IAAI,GAAGqB,UAAU,GAAGzB,SAAS;AACnDI,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,MAAMsB,UAAU,GAAkB;AAChC,IAAA,IAAIX,cAAc,CAACY,KAAK,EAAEC,CAAC,IAAI,IAAI,GAAG;AAAEC,MAAAA,IAAI,EAAEd,cAAc,CAACY,KAAK,CAACC;KAAG,GAAG,EAAE,CAAC;AAC5E,IAAA,IAAIb,cAAc,CAACY,KAAK,EAAEG,CAAC,IAAI,IAAI,GAAG;AAAEC,MAAAA,GAAG,EAAEhB,cAAc,CAACY,KAAK,CAACG;KAAG,GAAG,EAAE;GAC3E;AAED,EAAA,oBACEE,IAAA,CAAA,MAAA,EAAA;IACEC,GAAG,EAAErB,IAAI,CAACsB,YAAa;AACvB/B,IAAAA,SAAS,EAAC,sBAAsB;AAChCgC,IAAAA,WAAW,EAAEA,MAAM9B,OAAO,CAAC,IAAI,CAAE;AACjC+B,IAAAA,OAAO,EAAEA,MAAM/B,OAAO,CAAC,IAAI,CAAE;AAC7BgC,IAAAA,UAAU,EAAEA,MAAMhC,OAAO,CAAC,KAAK,CAAE;AACjCiC,IAAAA,MAAM,EAAEA,MAAMjC,OAAO,CAAC,KAAK,CAAE;AAAAN,IAAAA,QAAA,GAE5BA,QAAQ,gBACLwC,YAAY,CAACxC,QAAkE,EAAE;MAC/E,kBAAkB,EAAE,GAAGY,SAAS,CAAA,QAAA;KACjC,CAAC,GACF,IAAI,eACR6B,GAAA,CAAA,KAAA,EAAA;MACEP,GAAG,EAAErB,IAAI,CAAC6B,WAAY;AACtBtC,MAAAA,SAAS,EAAEuC,IAAI,CACb,YAAY,EACZ,UAAU,EACVtC,IAAI,GAAG,CAAA,+BAAA,CAAiC,GAAG,IAAI,EAC/CD,SAAS,CACT;AACFwC,MAAAA,KAAK,EAAE9B,cAAe;AACtB,MAAA,uBAAA,EAAuBC,SAAU;AACjC,MAAA,aAAA,EAAa,CAACV,IAAK;AACnBwC,MAAAA,IAAI,EAAC,SAAS;MACd1C,EAAE,EAAE,CAAA,EAAGS,SAAS,CAAA,QAAA,CAAW;AAAAZ,MAAAA,QAAA,eAE3BiC,IAAA,CAAA,KAAA,EAAA;AAAK7B,QAAAA,SAAS,EAAC,iCAAiC;QAAAJ,QAAA,EAAA,CAC7CE,KAAK,eACNuC,GAAA,CAAA,KAAA,EAAA;AAAKP,UAAAA,GAAG,EAAE1B,QAAS;AAACJ,UAAAA,SAAS,EAAEuC,IAAI,CAAC,iBAAiB,CAAE;AAACC,UAAAA,KAAK,EAAEjB;AAAW,SAAA,CAC5E;OAAK;AACP,KAAK,CACP;AAAA,GAAM,CAAC;AAEX;;;;"}

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":"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"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/panel/Panel.tsx"],"names":[],"mappings":"AAWA,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;;;mFAiGxB,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":"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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.135.1",
+  "version": "46.135.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -49,11 +49,11 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.3.4",
-    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
     "@storybook/addon-mcp": "^0.4.1",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/react-webpack5": "^10.3.4",
+    "@storybook/react-webpack5": "^10.3.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -73,7 +73,7 @@
     "@wise/eslint-config": "^13.3.0",
     "babel-plugin-formatjs": "^10.5.41",
     "eslint": "^9.39.4",
-    "eslint-plugin-storybook": "^10.3.4",
+    "eslint-plugin-storybook": "^10.3.5",
     "gulp": "^5.0.1",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -83,7 +83,7 @@
     "react-intl": "^7.1.14",
     "rollup": "^4.60.1",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.3.4",
+    "storybook": "^10.3.5",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
@@ -103,11 +103,11 @@
   "dependencies": {
     "@babel/runtime": "^7.29.2",
     "@floating-ui/react": "^0.27.19",
-    "@headlessui/react": "^2.2.9",
-    "@popperjs/core": "^2.11.8",
+    "@headlessui/react": "^2.2.10",
     "@react-aria/focus": "^3.21.5",
     "@react-aria/overlays": "^3.31.2",
     "@transferwise/formatting": "^2.14.0",
+    "@transferwise/neptune-tokens": "^8.21.0",
     "@transferwise/neptune-validation": "^3.3.3",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
@@ -116,10 +116,8 @@
     "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.21.0"
+    "virtua": "^0.48.8"
   },
   "publishConfig": {
     "access": "public",

package/src/common/panel/Panel.tsx

@@ -1,3 +1,13 @@
+import {
+  arrow as arrowMiddleware,
+  autoUpdate,
+  flip as flipMiddleware,
+  offset,
+  type Placement,
+  shift,
+  size as sizeMiddleware,
+  useFloating,
+} from '@floating-ui/react';
 import { clsx } from 'clsx';
 import {
   CSSProperties,
@@ -7,21 +17,19 @@ import {
   SyntheticEvent,
   forwardRef,
   useContext,
-  useEffect,
-  useState,
+  useRef,
 } 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 = [0, 16];
+const POPOVER_OFFSET = 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 = {
+const fallbackPlacements: Record<string, Placement[]> = {
   [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
   [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
   [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
@@ -57,56 +65,57 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
   }: PanelProps,
   reference,
 ) {
-  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const arrowRef = useRef<HTMLDivElement | null>(null);
+
+  const middleware = [];
 
-  const modifiers = [];
+  if (arrow) {
+    middleware.push(offset(POPOVER_OFFSET));
+  }
+
+  if (flip && fallbackPlacements[position]) {
+    middleware.push(
+      flipMiddleware({
+        fallbackPlacements: fallbackPlacements[position],
+      }),
+    );
+  }
 
   if (altAxis) {
-    modifiers.push({
-      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
-      name: 'preventOverflow',
-      options: {
-        altAxis: true,
-        tether: false,
-      },
-    });
+    middleware.push(shift());
   }
 
   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 } });
+    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));
   }
-  if (flip && fallbackPlacements[position]) {
-    modifiers.push({
-      name: 'flip',
-      options: {
-        fallbackPlacements: fallbackPlacements[position],
-      },
-    });
+
+  if (considerHeight) {
+    middleware.push(
+      sizeMiddleware({
+        padding: POPOVER_OFFSET,
+        apply: ({ elements, availableHeight }) => {
+          elements.floating.style.setProperty(
+            '--np-panel-available-height',
+            `${availableHeight}px`,
+          );
+        },
+      }),
+    );
   }
 
-  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {
+  const { refs, floatingStyles, placement, middlewareData } = useFloating({
     placement: position,
-    modifiers,
+    middleware,
+    elements: {
+      reference: anchorRef.current,
+    },
+    whileElementsMounted: open ? autoUpdate : undefined,
   });
 
-  // 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 } : {}),
+  };
 
   const contentStyle: CSSProperties = {
     ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),
@@ -119,18 +128,16 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
       <div
         id={overlayId}
         {...rest}
-        ref={setPopperElement}
+        ref={refs.setFloating}
         role="dialog"
-        style={{ ...styles.popper }}
-        {...attributes.popper}
+        style={floatingStyles}
+        data-popper-placement={placement}
         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={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />
-          )}
+          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}
         </div>
       </div>
     </Dimmer>

package/src/main.css

@@ -31064,8 +31064,8 @@ button.np-link {
   box-shadow: none;
   background: #ffffff;
   background: var(--color-background-elevated);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
+  border-radius: 32px;
+  border-radius: var(--radius-xlarge);
 }
 
 .tw-modal.in .tw-modal-dialog {
@@ -32728,8 +32728,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 .np-dropdown-menu-desktop {
-  max-height: 70vh;
   max-height: 70svh;
+  max-height: var(--np-panel-available-height, 70svh);
   min-width: 160px;
   max-width: calc(100vw - 32px);
 }
@@ -32737,6 +32737,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 @media (min-height: 592px) {
   .np-dropdown-menu-desktop {
     max-height: 592px;
+    max-height: var(--np-panel-available-height, 592px);
   }
 }
 

package/src/modal/Modal.css

@@ -9,8 +9,8 @@
   box-shadow: none;
   background: #ffffff;
   background: var(--color-background-elevated);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
+  border-radius: 32px;
+  border-radius: var(--radius-xlarge);
 }
 .tw-modal.in .tw-modal-dialog {
   transform: translate(0);

package/src/modal/Modal.less

@@ -12,7 +12,7 @@
     transform: translateY(-25%);
     box-shadow: none;
     background: var(--color-background-elevated);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-xlarge);
   }
 
   &.in {

package/src/select/Select.css

@@ -123,14 +123,15 @@
   max-width: calc(100% - 32px);
 }
 .np-dropdown-menu-desktop {
-  max-height: 70vh;
   max-height: 70svh;
+  max-height: var(--np-panel-available-height, 70svh);
   min-width: 160px;
   max-width: calc(100vw - 32px);
 }
 @media (min-height: 592px) {
   .np-dropdown-menu-desktop {
     max-height: 592px;
+    max-height: var(--np-panel-available-height, 592px);
   }
 }
 .np-dropdown-menu {

package/src/select/Select.less

@@ -81,7 +81,7 @@
 
   // Override some of Button component styles
   .btn {
-    &:not(.disabled,:disabled,.btn-loading) {
+    &:not(.disabled, :disabled, .btn-loading) {
       color: var(--color-content-primary);
 
       &:hover {
@@ -108,15 +108,14 @@
 }
 
 .np-dropdown-menu-desktop {
-  max-height: 70vh;
-  max-height: 70svh;
+  max-height: var(--np-panel-available-height, 70svh);
   min-width: 160px;
   max-width: ~"calc(100vw - 32px)";
 }
 
 @media (min-height: 592px) {
   .np-dropdown-menu-desktop {
-    max-height: 592px;
+    max-height: var(--np-panel-available-height, 592px);
   }
 }
 
@@ -270,7 +269,9 @@
   /* stylelint-disable-next-line no-duplicate-selectors */
   .np-select .np-dropdown-toggle {
     background-color: unset;
-    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    transition:
+      background-color 0.3s ease-in-out,
+      box-shadow 0.3s ease-in-out;
     border: none;
     box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 

package/src/select/Select.test.story.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { useState } from 'react';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+import Select, { SelectOptionItem } from './Select';
+
+const meta = {
+  title: 'Forms/Select/Tests',
+  component: Select,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Select>;
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+const options: SelectOptionItem[] = Array.from({ length: 10 }, (_, i) => ({
+  value: i + 1,
+  label: `Option ${i + 1}`,
+}));
+
+/**
+ * Visual regression story: Select placed at the bottom of the viewport so the dropdown
+ * flips to the top when opened. The play function opens the dropdown automatically.
+ */
+export const DropdownFlipsToTop: Story = {
+  render: function Render() {
+    const [selected, setSelected] = useState<SelectOptionItem>(options[0]);
+    return (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-end',
+          minHeight: '50vh',
+        }}
+      >
+        <Select
+          id="flip-test-select"
+          size="md"
+          block
+          options={options}
+          selected={selected}
+          onChange={(option) => {
+            if (option && 'value' in option) {
+              setSelected(option as SelectOptionItem);
+            }
+          }}
+        />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: /Option 1/i });
+    await userEvent.click(trigger);
+  },
+  ...withVariantConfig(['default']),
+};

package/src/select/Select.tsx

@@ -608,8 +608,8 @@ export default function Select({
       ) : (
         <Panel
           open={open}
-          flip={false}
           altAxis
+          considerHeight
           anchorRef={selectReference}
           anchorWidth={isDropdownAutoWidth}
           position={dropdownUp ? Position.TOP : Position.BOTTOM}