@transferwise/components 46.135.1 → 46.135.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.135.1",
+  "version": "46.135.3",
   "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/actionButton/ActionButton.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Settings } from '@transferwise/icons';
+import { Cog } from '@transferwise/icons';
 
 import ActionButton from './ActionButton';
 import { withVariantConfig } from '../../.storybook/helpers';
@@ -33,15 +33,15 @@ export const Basic: Story = {
       </div>
       <div>
         <ActionButton priority="primary" {...args}>
-          <Settings />
+          <Cog />
           Primary label
         </ActionButton>
         <ActionButton priority="secondary" {...args}>
-          <Settings />
+          <Cog />
           Secondary label
         </ActionButton>
         <ActionButton priority="tertiary" {...args}>
-          <Settings />
+          <Cog />
           Tertiary label
         </ActionButton>
       </div>

package/src/actionButton/ActionButton.test.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Settings } from '@transferwise/icons';
+import { Cog } from '@transferwise/icons';
 import ActionButton from './ActionButton';
 import { withVariantConfig } from '../../.storybook/helpers';
 
@@ -28,15 +28,15 @@ export const DisabledVariants: Story = {
       </div>
       <div>
         <ActionButton priority="primary" {...args}>
-          <Settings />
+          <Cog />
           Primary label
         </ActionButton>
         <ActionButton priority="secondary" {...args}>
-          <Settings />
+          <Cog />
           Secondary label
         </ActionButton>
         <ActionButton priority="tertiary" {...args}>
-          <Settings />
+          <Cog />
           Tertiary label
         </ActionButton>
       </div>

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -1,4 +1,4 @@
-import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
+import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';
 import { useState, useEffect } from 'react';
 
 import Avatar, { AvatarProps, AvatarType } from '../avatar';
@@ -112,7 +112,7 @@ const AvatarWrapper = ({
     if (profileType) {
       return {
         type: AvatarType.ICON,
-        children: isBusinessProfile ? <BriefcaseIcon size="24" /> : <ProfileIcon size="24" />,
+        children: isBusinessProfile ? <BriefcaseIcon size="24" /> : <Person size="24" />,
         ...updatedAvatarProps,
       };
     }
@@ -126,7 +126,7 @@ const AvatarWrapper = ({
     }
     return {
       type: AvatarType.ICON,
-      children: <ProfileIcon size="24" />,
+      children: <Person size="24" />,
       ...updatedAvatarProps,
     };
   };

package/src/common/circle/Circle.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Circle from './Circle';
-import { Profile } from '@transferwise/icons';
+import { Person } from '@transferwise/icons';
 import { CircleProps } from '.';
 import Body from '../../body';
 import { withVariantConfig } from '../../../.storybook/helpers';
@@ -27,7 +27,7 @@ export const Basic: Story = {
 
 export const Sizes: Story = {
   render: () => {
-    const content = <Profile size={16} />;
+    const content = <Person size={16} />;
     const sizes: CircleProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
     return (
       <div
@@ -52,7 +52,7 @@ export const Sizes: Story = {
 export const FixedSize: Story = {
   render: () => {
     const size = 72;
-    const content = <Profile size={16} />;
+    const content = <Person size={16} />;
     return (
       <div
         style={{

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/iconButton/IconButton.story.tsx

@@ -2,13 +2,12 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import {
   ArrowLeft,
   Cross,
-  Defrost,
   Edit,
   Menu,
   Plus,
-  Settings,
+  Cog,
   Star,
-  Travel,
+  Suitcase,
   Briefcase,
   Bank,
   Freeze,
@@ -96,7 +95,7 @@ export const Priority: Story = {
         <Plus />
       </IconButton>
       <IconButton priority="secondary" type={args.type} aria-label="Secondary" onClick={fn()}>
-        <Settings />
+        <Cog />
       </IconButton>
       <IconButton priority="tertiary" type={args.type} aria-label="Tertiary" onClick={fn()}>
         <Star />
@@ -363,7 +362,7 @@ export const SentimentAwareness: Story = {
               type="default"
               onClick={fn()}
             >
-              <Settings />
+              <Cog />
             </IconButton>
             <IconButton
               size={args.size}
@@ -381,7 +380,7 @@ export const SentimentAwareness: Story = {
               type="default"
               onClick={fn()}
             >
-              <Travel />
+              <Suitcase />
             </IconButton>
             <IconButton
               size={args.size}

package/src/iconButton/IconButton.test.story.tsx

@@ -2,9 +2,9 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import {
   Menu,
   Plus,
-  Settings,
+  Cog,
   Star,
-  Travel,
+  Suitcase,
   Cross,
   Edit,
   Briefcase,
@@ -109,7 +109,7 @@ export const Variants: Story = {
               type="default"
               onClick={fn()}
             >
-              <Settings />
+              <Cog />
             </IconButton>
             <IconButton
               size={size}
@@ -127,7 +127,7 @@ export const Variants: Story = {
               type="default"
               onClick={fn()}
             >
-              <Travel />
+              <Suitcase />
             </IconButton>
             <IconButton
               size={size}
@@ -261,13 +261,13 @@ export const KeyboardInteraction: Story = {
         type="default"
         onClick={fn()}
       >
-        <Settings />
+        <Cog />
       </IconButton>
       <IconButton size={48} aria-label="Tertiary" priority="tertiary" type="default" onClick={fn()}>
         <Star />
       </IconButton>
       <IconButton size={48} aria-label="Minimal" priority="minimal" type="default" onClick={fn()}>
-        <Travel />
+        <Suitcase />
       </IconButton>
       <IconButton
         size={48}
@@ -343,13 +343,13 @@ export const Zoom400: Story = {
         type="default"
         onClick={fn()}
       >
-        <Settings />
+        <Cog />
       </IconButton>
       <IconButton size={40} aria-label="Tertiary" priority="tertiary" type="default" onClick={fn()}>
         <Star />
       </IconButton>
       <IconButton size={40} aria-label="Minimal" priority="minimal" type="default" onClick={fn()}>
-        <Travel />
+        <Suitcase />
       </IconButton>
       <IconButton
         size={40}