@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-a322f91

package/src/common/hooks/useLayout/useLayout.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from '../../propsValues/breakpoint';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useScreenSize } from '../useScreenSize';
 
 /**

package/src/common/hooks/useScreenSize.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from '../propsValues/breakpoint';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 
 import { useMedia } from './useMedia';
 

package/src/common/index.ts

@@ -4,8 +4,8 @@ export { addNoScrollClass, removeNoScrollClass } from './DOMOperations';
 export * from './theme';
 export * from './direction';
 // Props
+export { Breakpoint } from '@transferwise/neptune-tokens';
 export * from './propsValues/control';
-export { Breakpoint } from './propsValues/breakpoint';
 export * from './propsValues/size';
 export * from './propsValues/typography';
 export * from './propsValues/width';

package/src/common/locale/index.test.ts

@@ -120,12 +120,12 @@ describe('locale utils', () => {
       const result = getLocaleCurrencyName(intl, 'USD');
       expect(intl.formatDisplayName).toHaveBeenCalledWith('USD', {
         type: 'currency',
-        fallback: 'code',
+        fallback: 'none',
       });
       expect(result).toBe('US Dollar');
     });
 
-    it('should return the original currency code if Intl.DisplayNames is not supported', () => {
+    it('should return the formatted currency code if Intl.DisplayNames is not supported', () => {
       const intl = {
         formatDisplayName: jest.fn().mockReturnValue('US Dollar'),
       } as unknown as IntlShape;
@@ -134,8 +134,17 @@ describe('locale utils', () => {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       (Intl as any).DisplayNames = undefined;
 
-      const result = getLocaleCurrencyName(intl, 'USD');
-      expect(result).toBe('USD');
+      const result = getLocaleCurrencyName(intl, 'USC');
+      expect(result).toBe('USDC');
+    });
+
+    it('should return the formatted code when formatDisplayName does not support the currency code', () => {
+      const intl = {
+        formatDisplayName: jest.fn().mockReturnValue(undefined),
+      } as unknown as IntlShape;
+
+      const result = getLocaleCurrencyName(intl, 'USC');
+      expect(result).toBe('USDC');
     });
   });
 });

package/src/common/locale/index.ts

@@ -1,4 +1,5 @@
 import { IntlShape } from 'react-intl/src/types';
+import { formatCurrencyCode } from '@transferwise/formatting';
 import { Direction } from '../direction';
 
 export const DEFAULT_LANG = 'en';
@@ -105,7 +106,12 @@ export function getDirectionFromLocale(locale: string) {
  * @returns The localized currency name if Intl.DisplayNames is supported supported, otherwise returns the original currency code.
  */
 export function getLocaleCurrencyName(intl: IntlShape, currencyCode: string) {
-  return typeof Intl.DisplayNames === 'function'
-    ? intl.formatDisplayName(currencyCode, { type: 'currency', fallback: 'code' })
-    : currencyCode;
+  if (typeof Intl.DisplayNames === 'function') {
+    const localisedName = intl.formatDisplayName(currencyCode, {
+      type: 'currency',
+      fallback: 'none',
+    });
+    return localisedName != null ? localisedName : formatCurrencyCode(currencyCode);
+  }
+  return formatCurrencyCode(currencyCode);
 }

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/common/responsivePanel/ResponsivePanel.test.js

@@ -1,6 +1,7 @@
-import { Breakpoint, Position } from '..';
+import { Breakpoint } from '@transferwise/neptune-tokens';
+import { Position } from '..';
 import { mockMatchMedia, render, screen } from '../../test-utils';
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import ResponsivePanel from './ResponsivePanel';
 

package/src/criticalBanner/CriticalCommsBanner.css

@@ -44,7 +44,7 @@
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .critical-comms .alert-warning .alert__message,
   .critical-comms .alert-negative .alert__message,
   .critical-comms .alert-neutral .alert__message {

package/src/dateInput/DateInput.css

@@ -9,7 +9,7 @@
 .tw-date .tw-date--day {
   margin-bottom: 0;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-theme-personal .tw-date label {
     margin-bottom: 0;
   }

package/src/dateLookup/DateLookup.tsx

@@ -1,11 +1,11 @@
 import { clsx } from 'clsx';
 import { createRef, PureComponent, KeyboardEvent } from 'react';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 
 import {
   Size,
   MonthFormat,
   Position,
-  Breakpoint,
   type SizeSmall,
   type SizeMedium,
   type SizeLarge,

package/src/decision/Decision.test.tsx

@@ -1,4 +1,5 @@
-import { Breakpoint, Size } from '../common';
+import { Breakpoint } from '@transferwise/neptune-tokens';
+import { Size } from '../common';
 import { mockMatchMedia } from '../mocks';
 import { render, screen } from '../test-utils';
 

package/src/decision/Decision.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 
-import { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';
+import { Size, SizeSmall, SizeMedium } from '../common';
 import { useScreenSize } from '../common/hooks/useScreenSize';
 import NavigationOption from '../navigationOption';
 import Tile from '../tile';

package/src/definitionList/DefinitionList.css

@@ -9,12 +9,12 @@
 .tw-definition-list__button {
   margin-top: -50%;
 }
-@media (max-width: 576px) {
+@media (max-width: 599.98px) {
   .tw-definition-list--right-aligned-desktop {
     justify-content: space-between;
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .tw-definition-list--right-aligned-desktop {
     justify-content: flex-end;
   }

package/src/definitionList/DefinitionList.less

@@ -15,13 +15,13 @@
     margin-top: -50%;
   }
 
-  @media (max-width: 576px) {
+  @media (--screen-xs-max) {
     &--right-aligned-desktop {
       justify-content: space-between;
     }
   }
 
-  @media (min-width: 576px) {
+  @media (--screen-sm) {
     &--right-aligned-desktop {
       justify-content: flex-end;
     }

package/src/drawer/Drawer.css

@@ -43,7 +43,7 @@
   padding: 0 16px;
   padding: 0 var(--size-16);
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .np-drawer .np-drawer-header,
   .np-drawer .np-drawer-footer {
     padding: 24px;

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -161,6 +161,24 @@ 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,4 +1,11 @@
-import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../../test-utils';
+import {
+  mockMatchMedia,
+  mockResizeObserver,
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from '../../test-utils';
 
 import { CurrencySelector } from './CurrencySelector';
 
@@ -92,6 +99,112 @@ 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
@@ -155,6 +268,11 @@ const mockCurrencies = [
         label: 'Australian Dollar',
         keywords: ['AUD', 'australia'],
       },
+      {
+        code: 'USC',
+        label: 'Digital Dollar',
+        keywords: ['USDC', 'Digital Dollar'],
+      },
     ],
   },
 ];

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx

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

package/src/flowNavigation/FlowNavigation.test.js

@@ -1,5 +1,5 @@
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import AvatarView from '../avatarView';
-import { Breakpoint } from '../common';
 import { mockMatchMedia, render, screen } from '../test-utils';
 
 import FlowNavigation from './FlowNavigation';

package/src/flowNavigation/FlowNavigation.tsx

@@ -1,7 +1,8 @@
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 
-import { Breakpoint, Layout } from '../common';
+import { Layout } from '../common';
 import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader/FlowHeader';
 import Logo from '../logo';

package/src/i18n/en.json

@@ -16,8 +16,6 @@
   "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, CriticalBannerProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps } 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, CriticalBanner } from './prompt';
+export { InfoPrompt, InlinePrompt, ActionPrompt } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';
@@ -246,10 +246,10 @@ export { default as useSnackbar } from './snackbar/useSnackbar';
 /**
  * Enums
  */
+export { Breakpoint } from '@transferwise/neptune-tokens';
 export { AlertArrowPosition } from './alert/Alert';
 export { AvatarType } from './avatar';
 export {
-  Breakpoint,
   ControlType,
   DateMode,
   Direction,

package/src/inputs/Input.css

@@ -111,12 +111,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 768px) {
+  @media (min-width: 840px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -128,7 +128,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .np-form-control--size-lg {
       -webkit-hyphenate-limit-before: 4;
     }

package/src/inputs/SelectInput/Options/SelectInputOptions.css

@@ -6,7 +6,7 @@
 .np-select-input-options-container:focus {
   outline: none;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-select-input-options-container {
     max-height: 28rem /* 448px */;
   }
@@ -42,7 +42,7 @@
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-select-input-listbox-container {
     height: auto;
   }

package/src/inputs/SelectInput/SelectInput.css

@@ -250,7 +250,7 @@
 .np-select-input-options-container:focus {
   outline: none;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-select-input-options-container {
     max-height: 28rem /* 448px */;
   }
@@ -286,7 +286,7 @@
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-select-input-listbox-container {
     height: auto;
   }