@transferwise/components 46.135.1 → 46.135.3

package/src/prompt/InfoPrompt/InfoPrompt.accessibility.docs.mdx

@@ -64,7 +64,7 @@ Custom media icons should include their own accessibility attributes. Use the `t
 <InfoPrompt
   sentiment="success"
   description="Your travel account is ready!"
-  media={{ asset: <Travel title="Travel feature" /> }}
+  media={{ asset: <Suitcase title="Travel feature" /> }}
 />
 
 <InfoPrompt

package/src/prompt/InfoPrompt/InfoPrompt.story.tsx

@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Confetti, GiftBox, Star, Travel, Briefcase, Plane } from '@transferwise/icons';
+import { Confetti, GiftBox, Star, Suitcase, Briefcase, Plane } from '@transferwise/icons';
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
@@ -90,7 +90,7 @@ const MEDIA_OPTIONS: Record<string, { asset: ReactElement } | undefined> = {
   star: { asset: <Star title="Starred" /> },
   confetti: { asset: <Confetti size={24} title="Celebration" /> },
   giftbox: { asset: <GiftBox title="Gift" /> },
-  travel: { asset: <Travel title="Travel" /> },
+  travel: { asset: <Suitcase title="Travel" /> },
   briefcase: { asset: <Briefcase title="Business" /> },
   plane: { asset: <Plane title="Travel" /> },
 };
@@ -297,7 +297,7 @@ export const MediaTypes: StoryObj<InfoPromptProps> = {
       <InfoPrompt
         sentiment="success"
         description="Your travel account is ready!"
-        media={{ asset: <Travel title="Travel" /> }}
+        media={{ asset: <Suitcase title="Travel" /> }}
       />
       <InfoPrompt
         sentiment="warning"

package/src/prompt/InlinePrompt/InlinePrompt.accessibility.docs.mdx

@@ -30,7 +30,7 @@ By default, sentiment icons have these labels:
   dark
   code={`
 <InlinePrompt 
-  media={<Travel />} 
+  media={<Suitcase />} 
   sentiment="positive" 
   mediaLabel="Travel feature enabled: "
 >

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Clock, Taxi, Travel } from '@transferwise/icons';
+import { Clock, Taxi, Suitcase } from '@transferwise/icons';
 import { lorem5 } from '../../test-utils';
 import Link from '../../link';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
@@ -233,7 +233,7 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
         <InlinePrompt {...args} media={<Clock title="Processing: " />} sentiment="warning">
           The account verification is taking longer than usual.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Travel title="Activated: " />} sentiment="positive">
+        <InlinePrompt {...args} media={<Suitcase title="Activated: " />} sentiment="positive">
           Your travel account is set up and ready to use.
         </InlinePrompt>
         <InlinePrompt {...args} media={<Taxi title="Taxi addon: " />} sentiment="proposition">
@@ -256,13 +256,13 @@ export const SizingStrategies: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
     return (
       <>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive" width="full">
+        <InlinePrompt {...args} media={<Suitcase />} sentiment="positive" width="full">
           This prompt will take the full width of its container.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
+        <InlinePrompt {...args} media={<Suitcase />} sentiment="positive">
           This prompt will hug its content.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
+        <InlinePrompt {...args} media={<Suitcase />} sentiment="positive">
           This prompt is configured to hug its content, but since the content is long enough to span
           across multiple lines, it will expand to the full width of its container. And no, you
           should not put pages of text here in the first place, but we recognise that some

package/src/prompt/InlinePrompt/InlinePrompt.test.story.tsx

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react-webpack5';
-import { Travel } from '@transferwise/icons';
+import { Suitcase } from '@transferwise/icons';
 import { InlinePrompt } from './InlinePrompt';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof InlinePrompt>;
 
 export const TinyScreen: Story = {
   render: () => (
-    <InlinePrompt sentiment="positive" media={<Travel />}>
+    <InlinePrompt sentiment="positive" media={<Suitcase />}>
       Your travel money account is now active and ready to use for international transactions.
     </InlinePrompt>
   ),

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.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Person as ProfileIcon, Globe as GlobeIcon } from '@transferwise/icons';
+import { Person, Globe as GlobeIcon } from '@transferwise/icons';
 import { useState } from 'react';
 import Select, { SelectItem, SelectOptionItem } from './Select';
 
@@ -75,7 +75,7 @@ export const Basic: Story = {
       { value: 2, label: 'A disabled thing', disabled: true },
       { separator: true },
       { header: 'Icons' },
-      { value: 3, label: 'Profile', icon: <ProfileIcon /> },
+      { value: 3, label: 'Profile', icon: <Person /> },
       {
         value: 4,
         label: 'USD',
@@ -312,7 +312,7 @@ export const AdvancedSearch: Story = {
       { value: 2, label: 'A disabled thing', disabled: true },
       { separator: true },
       { header: 'Icons' },
-      { value: 3, label: 'Profile', icon: <ProfileIcon /> },
+      { value: 3, label: 'Profile', icon: <Person /> },
       { value: 4, label: 'Globe', icon: <GlobeIcon /> },
       { header: 'Currencies' },
       { value: 5, label: 'British pound', currency: 'gbp' },

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/select/option/Option.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Person as ProfileIcon } from '@transferwise/icons';
+import { Person } from '@transferwise/icons';
 
 import Option, { Props as OptionProps } from './Option';
 
@@ -31,7 +31,7 @@ describe('Option', () => {
   });
 
   it('should render the given icon', () => {
-    renderOption({ icon: <ProfileIcon /> });
+    renderOption({ icon: <Person /> });
     const optionElement = screen.getByTestId('test-option');
     expect(optionElement.querySelector('svg')).toBeInTheDocument();
   });
@@ -43,7 +43,7 @@ describe('Option', () => {
   });
 
   it('should override the currency flag with the given icon', () => {
-    renderOption({ currency: 'USD', icon: <ProfileIcon /> });
+    renderOption({ currency: 'USD', icon: <Person /> });
     const optionElement = screen.getByTestId('test-option');
     expect(optionElement.querySelector('svg')).toBeInTheDocument();
     expect(optionElement.querySelectorAll('svg')).toHaveLength(1);

package/src/summary/Summary.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from 'storybook/actions';
-import { Home as HomeIcon } from '@transferwise/icons';
+import { House } from '@transferwise/icons';
 import { Status } from '../common';
 import { InfoPresentation } from '../info';
 import Summary, { type Props as SummaryProps } from './Summary';
@@ -32,7 +32,7 @@ export const Basic = (args: SummaryProps) => {
         }}
         as="li"
         description={description}
-        icon={<HomeIcon size={24} />}
+        icon={<House size={24} />}
         title="Verify your address"
         status={Status.NOT_DONE}
       />
@@ -51,7 +51,7 @@ export const Basic = (args: SummaryProps) => {
           'aria-label': 'Please click here to know more about your address update status',
           onClick: action('Summary Info clicked'),
         }}
-        icon={<HomeIcon size={24} />}
+        icon={<House size={24} />}
         title="You verified your address"
         status={Status.DONE}
       />
@@ -72,7 +72,7 @@ export const Basic = (args: SummaryProps) => {
           'aria-label': 'Please click here to know more about your address update status',
           onClick: action('Summary Info clicked'),
         }}
-        icon={<HomeIcon size={24} />}
+        icon={<House size={24} />}
         title="We’re verifying your address"
         status={Status.PENDING}
       />
@@ -85,7 +85,7 @@ export const Basic = (args: SummaryProps) => {
         }}
         as="li"
         description={description}
-        icon={<HomeIcon size={24} />}
+        icon={<House size={24} />}
         title="We’re verifying your address"
         status={Status.PENDING}
       />

package/src/summary/Summary.test.story.tsx

@@ -1,4 +1,4 @@
-import { Home as HomeIcon } from '@transferwise/icons';
+import { House } from '@transferwise/icons';
 import { Status } from '../common';
 import Summary, { type SummaryProps } from '.';
 
@@ -16,7 +16,7 @@ export const LongText = () => {
       'aria-label': ' Click here to change address',
     },
     as: 'li',
-    icon: <HomeIcon size={24} />,
+    icon: <House size={24} />,
     status: Status.NOT_DONE,
     info: {
       title: 'Title',

package/src/tooltip/Tooltip.tsx

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