@transferwise/components 0.0.0-experimental-c7da7db → 0.0.0-experimental-b03ca75

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/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -161,24 +161,6 @@ export const WithInlinePromptSentiment = {
   },
 };
 
-export const WithFormattedCurrencyCode = {
-  args: {
-    currency: 'USC',
-    currencySelector: {
-      ...getCurrencySelectorProps({ logEvents: true }),
-      options: [
-        {
-          title: 'Popular',
-          currencies: [
-            { code: 'USC', label: 'Digital Dollar', keywords: ['USDC', 'Digital Dollar'] },
-            { code: 'USD', label: 'US Dollar', keywords: ['dollar', 'us'] },
-          ],
-        },
-      ],
-    },
-  },
-};
-
 export const WithSecondaryCurrencySelectorAvatar = {
   args: {
     currencySelector: getCurrencySelectorProps({ logEvents: true, secondAvatar: true }),

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.test.tsx

@@ -1,11 +1,4 @@
-import {
-  mockMatchMedia,
-  mockResizeObserver,
-  render,
-  screen,
-  userEvent,
-  waitFor,
-} from '../../test-utils';
+import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../../test-utils';
 
 import { CurrencySelector } from './CurrencySelector';
 
@@ -99,112 +92,6 @@ describe('CurrencySelector', () => {
     expect(screen.getByRole('combobox')).toBeDisabled();
   });
 
-  it('displays formatted currency code when the currency is selected', () => {
-    render(<CurrencySelector options={mockCurrencies} id="id" currency="USC" labelId="labelId" />);
-
-    expect(screen.getByRole('combobox', { name: 'Select currency' })).toHaveTextContent('USDC');
-  });
-
-  it('displays formatted currency code in the selected option content', async () => {
-    render(
-      <CurrencySelector
-        options={[
-          {
-            title: 'All',
-            currencies: [
-              { code: 'USC', label: 'USDC', keywords: ['USDC'] },
-              { code: 'EUR', label: 'Euro', keywords: ['EUR'] },
-            ],
-          },
-        ]}
-        id="id"
-        currency="USC"
-        labelId="labelId"
-        onChange={jest.fn()}
-      />,
-    );
-
-    await userEvent.click(screen.getByRole('combobox'));
-
-    expect(screen.getByRole('option', { name: /^usdc/iu })).toHaveTextContent('USDC');
-  });
-
-  it('fires onChange with the raw currency code when selecting a formatted currency', async () => {
-    const onChange = jest.fn();
-    render(
-      <CurrencySelector
-        options={[
-          {
-            title: 'All',
-            currencies: [
-              { code: 'USC', label: 'USDC', keywords: ['USC'] },
-              { code: 'EUR', label: 'Euro', keywords: ['EUR'] },
-            ],
-          },
-        ]}
-        id="id"
-        currency="EUR"
-        labelId="labelId"
-        onChange={onChange}
-      />,
-    );
-
-    await userEvent.click(screen.getByRole('combobox'));
-    await userEvent.click(screen.getByRole('option', { name: /^usdc/iu }));
-
-    expect(onChange).toHaveBeenCalledWith('USC');
-  });
-
-  it('returns USC option when searching by the formatted code USDC', async () => {
-    render(
-      <CurrencySelector
-        options={mockCurrencies}
-        id="id"
-        currency="USD"
-        labelId="labelId"
-        onChange={jest.fn()}
-      />,
-    );
-
-    await userEvent.click(screen.getByRole('combobox', { name: 'Select currency' }));
-
-    await userEvent.type(
-      screen.getByRole('combobox', {
-        name: /type a currency \/ country/iu,
-      }),
-      'USDC',
-    );
-
-    await waitFor(() => {
-      expect(screen.getByRole('option', { name: /usdc/iu })).toBeInTheDocument();
-    });
-  });
-
-  it('does not return USDC option when searching by the raw code USC', async () => {
-    render(
-      <CurrencySelector
-        options={mockCurrencies}
-        id="id"
-        currency="USD"
-        labelId="labelId"
-        onChange={jest.fn()}
-      />,
-    );
-
-    await userEvent.click(screen.getByRole('combobox', { name: 'Select currency' }));
-
-    await userEvent.type(
-      screen.getByRole('combobox', {
-        name: /type a currency \/ country/iu,
-      }),
-      'USC',
-    );
-
-    await waitFor(() => {
-      expect(screen.queryByRole('option')).not.toBeInTheDocument();
-    });
-  });
-
   it('deduplicates currencies while searching', async () => {
     render(
       <CurrencySelector
@@ -268,11 +155,6 @@ const mockCurrencies = [
         label: 'Australian Dollar',
         keywords: ['AUD', 'australia'],
       },
-      {
-        code: 'USC',
-        label: 'Digital Dollar',
-        keywords: ['USDC', 'Digital Dollar'],
-      },
     ],
   },
 ];

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx

@@ -19,7 +19,6 @@ import { useIntl } from 'react-intl';
 
 import messages from '../ExpressiveMoneyInput.messages';
 import { getLocaleCurrencyName } from '../../common';
-import { formatCurrencyCode } from '@transferwise/formatting';
 
 export interface CurrencyOption {
   label?: string;
@@ -100,7 +99,7 @@ export const CurrencySelector = ({
       renderValue={({ code, label }) => {
         return (
           <SelectInputOptionContent
-            title={formatCurrencyCode(code)}
+            title={code}
             note={label}
             icon={<Flag code={code} intrinsicSize={24} />}
           />
@@ -129,7 +128,7 @@ export const CurrencySelector = ({
           onClick={(event) => handleTriggerClick(event)}
         >
           <>
-            <span aria-hidden>{formatCurrencyCode(currency)}</span>
+            <span aria-hidden>{currency}</span>
             <span className="sr-only">{getLocaleCurrencyName(intl, currency)}</span>
           </>
         </SelectInputTriggerButton>
@@ -204,7 +203,7 @@ const filterAndSortCurrenciesForQuery = (
     currencies
       .filter((currency) => {
         return (
-          formatCurrencyCode(currency.code).toLowerCase().includes(query) ||
+          currency.code.toLowerCase().includes(query) ||
           (currency.label ?? '').toLowerCase().includes(query) ||
           currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))
         );

package/src/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.Expander.collapseAriaLabel": "Collapse",
+  "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",

package/src/index.ts

@@ -35,7 +35,7 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
-export type { InlinePromptProps, ActionPromptProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps, CriticalBannerProps } from './prompt';
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
@@ -173,7 +173,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
-export { InfoPrompt, InlinePrompt, ActionPrompt } from './prompt';
+export { InfoPrompt, InlinePrompt, ActionPrompt, CriticalBanner } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';

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
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 :root {
@@ -142,8 +142,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal {
@@ -391,8 +391,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -640,8 +640,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -889,8 +889,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal--dark {
@@ -1138,8 +1138,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-platform {
@@ -1321,8 +1321,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1504,8 +1504,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business {
@@ -1688,8 +1688,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business--dark {
@@ -1872,8 +1872,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business--forest-green {
@@ -2056,8 +2056,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business--bright-green {
@@ -32176,6 +32176,114 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
 }
 
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}
+
+.wds-critical-banner {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: 0;
+  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
+     actions only go full-width below 480px (--screen-xs) */
+}
+
+.wds-critical-banner__mobile--collapsed {
+  max-height: 30vh;
+}
+
+.wds-critical-banner--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.wds-critical-banner__title--collapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wds-critical-banner__description--collapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wds-critical-banner .wds-prompt__content-wrapper {
+  grid-template-columns: auto 1fr auto;
+  align-items: flex-start;
+}
+
+.wds-critical-banner__text-wrapper {
+  min-width: 0;
+  max-width: 480px;
+  height: 100%;
+}
+
+.wds-critical-banner .wds-prompt__actions-wrapper {
+  grid-column-start: 2;
+  grid-column-end: 3;
+}
+
+@media not (min-width: 480px) {
+  .wds-critical-banner .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+    width: 100%;
+  }
+}
+
+@media not (min-width: 480px) {
+  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+.wds-expander-toggle {
+  align-self: flex-start;
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+.wds-expander-toggle--collapsed {
+  transform: rotate(180deg);
+}
+
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }
@@ -34600,32 +34708,3 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
-
-.wds-action-prompt {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: var(--radius-large);
-}
-
-.wds-action-prompt--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-@media (max-width: 767px) {
-  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}
-
-.wds-action-prompt__content {
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
-}

package/src/main.less

@@ -66,6 +66,9 @@
 @import "./prompt/PrimitivePrompt/PrimitivePrompt.less";
 @import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./prompt/InfoPrompt/InfoPrompt.less";
+@import "./prompt/ActionPrompt/ActionPrompt.less";
+@import "./prompt/CriticalBanner/CriticalBanner.less";
+@import "./prompt/common/Expander/Expander.less";
 @import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
@@ -90,7 +93,6 @@
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
 @import "./legacylistItem/LegacyListItem.less";
-@import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { within, userEvent, expect } from 'storybook/test';
+import { within, userEvent } from 'storybook/test';
 import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
@@ -155,15 +155,6 @@ export const BalanceCurrencies: Story = {
   },
 };
 
-export const WithDecimals: Story = {
-  args: {
-    currencies: [],
-    selectedCurrency: exampleCurrency.eur,
-    decimals: 4,
-    amount: 1234.1412,
-  },
-};
-
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {