@transferwise/components 46.135.0 → 46.135.2

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -143,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal {
@@ -236,6 +237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -392,7 +394,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -485,6 +487,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -641,7 +644,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -734,6 +737,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -890,7 +894,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--dark {
@@ -983,6 +987,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1139,7 +1144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-platform {
@@ -1232,6 +1237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1322,7 +1328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1415,6 +1421,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1505,7 +1512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business {
@@ -1599,6 +1606,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1689,7 +1697,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business--dark {
@@ -1783,6 +1791,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1873,7 +1882,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1967,6 +1976,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -2057,7 +2067,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:01 GMT
  */
 
 .np-theme-business--bright-green {
@@ -2151,6 +2161,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -31053,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 {
@@ -32717,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);
 }
@@ -32726,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}

package/src/styles/less/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -143,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal {
@@ -236,6 +237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -392,7 +394,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -485,6 +487,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -641,7 +644,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -734,6 +737,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -890,7 +894,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--dark {
@@ -983,6 +987,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1139,7 +1144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-platform {
@@ -1232,6 +1237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1322,7 +1328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1415,6 +1421,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1505,7 +1512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business {
@@ -1599,6 +1606,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1689,7 +1697,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business--dark {
@@ -1783,6 +1791,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1873,7 +1882,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1967,6 +1976,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -2057,7 +2067,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:01 GMT
  */
 
 .np-theme-business--bright-green {
@@ -2151,6 +2161,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;