@transferwise/components 46.50.1 → 46.52.0

package/src/dateLookup/tableLink/TableLink.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
@@ -55,11 +55,10 @@ const TableLink = ({
   };
 
   return (
-    <>
-      <button
+    <button
         ref={buttonRef}
         type="button"
-        className={classNames(
+        className={clsx(
           `tw-date-lookup-${type}-option np-text-body-default-bold`,
           { active: !!active },
           { today: !!today },
@@ -72,7 +71,6 @@ const TableLink = ({
       >
         {title || item}
       </button>
-    </>
   );
 };
 

package/src/decision/Decision.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';
 import { useScreenSize } from '../common/hooks/useScreenSize';
@@ -88,7 +88,7 @@ const Decision = ({
 
       return (
         <div
-          className={classNames(
+          className={clsx(
             'np-decision d-flex',
             {
               'np-decision--small': isSmall,
@@ -106,7 +106,7 @@ const Decision = ({
                   <Tile
                     // eslint-disable-next-line react/no-array-index-key
                     key={`tile-${key}`}
-                    className={classNames(`np-decision__tile${isSmall ? '--small' : ''}`, {
+                    className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {
                       'np-decision__tile--fixed-width': isGrid,
                     })}
                     description={description}

package/src/definitionList/DefinitionList.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import ActionButton from '../actionButton';
 import { Layout } from '../common';
@@ -63,7 +63,7 @@ export default function DefinitionList({
 }: DefinitionListProps) {
   return (
     <dl
-      className={classNames('tw-definition-list d-flex ', {
+      className={clsx('tw-definition-list d-flex ', {
         'text-muted': muted,
         'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
         'tw-definition-list--columns flex-column flex-row--sm':
@@ -76,11 +76,11 @@ export default function DefinitionList({
         .map(({ action, title, value, key }) => (
           <div key={key} className="tw-definition-list__item">
             <dt>{title}</dt>
-            <dd className={classNames(...getAlignmentClasses(layout, action))}>
+            <dd className={clsx(...getAlignmentClasses(layout, action))}>
               <div>{value}</div>
               {action ? (
                 <div
-                  className={classNames(
+                  className={clsx(
                     isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',
                     'tw-definition-list__action',
                   )}

package/src/dimmer/Dimmer.tsx

@@ -1,5 +1,5 @@
 import { ThemeProvider, useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
@@ -126,11 +126,11 @@ const Dimmer = ({
         // Wait for animation to finish before unmount.
         timeout={{ enter: 0, exit: EXIT_ANIMATION }}
         classNames={{
-          enter: classNames({ 'dimmer--enter-fade': fadeContentOnEnter }),
-          enterDone: classNames('dimmer--enter-done', {
+          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),
+          enterDone: clsx('dimmer--enter-done', {
             'dimmer--enter-fade': fadeContentOnEnter,
           }),
-          exit: classNames('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),
+          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),
         }}
         unmountOnExit
         onEnter={onEnter}
@@ -140,7 +140,7 @@ const Dimmer = ({
           <FocusBoundary>
             <div
               ref={dimmerReference}
-              className={classNames(
+              className={clsx(
                 'dimmer',
                 { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },
                 className,
@@ -149,7 +149,7 @@ const Dimmer = ({
               onClick={handleClick}
             >
               <div
-                className={classNames(
+                className={clsx(
                   'dimmer-content-positioner',
                   contentPosition != null && [
                     'd-flex justify-content-center',

package/src/display/Display.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { PropsWithChildren } from 'react';
 
 import { DisplayTypes, Typography } from '../common';
@@ -18,7 +18,7 @@ function Display({
   id,
 }: Props) {
   return (
-    <Heading id={id} className={classNames(`np-text-${type}`, 'text-primary', className)}>
+    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>
       {children}
     </Heading>
   );

package/src/drawer/Drawer.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useContext, useId } from 'react';
 
 import { Position, Typography } from '../common';
@@ -53,10 +53,10 @@ export default function Drawer({
           role="dialog"
           aria-modal
           aria-labelledby={headerTitle ? titleId : undefined}
-          className={classNames('np-drawer', className)}
+          className={clsx('np-drawer', className)}
         >
           <div
-            className={classNames('np-drawer-header', {
+            className={clsx('np-drawer-header', {
               'np-drawer-header--withborder': headerTitle,
             })}
           >
@@ -67,8 +67,8 @@ export default function Drawer({
             )}
             <CloseButton onClick={onClose} />
           </div>
-          {children && <div className={classNames('np-drawer-content')}>{children}</div>}
-          {footerContent && <div className={classNames('np-drawer-footer')}>{footerContent}</div>}
+          {children && <div className={clsx('np-drawer-content')}>{children}</div>}
+          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}
         </div>
       </SlidingPanel>
     </Dimmer>

package/src/field/Field.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useId } from 'react';
 
 import { Sentiment } from '../common';
@@ -42,7 +42,7 @@ export const Field = ({
   const labelId = useId();
 
   const fallbackInputId = useId();
-  const inputId = id !== null ? id ?? fallbackInputId : undefined;
+  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;
 
   const descriptionId = useId();
 
@@ -52,7 +52,7 @@ export const Field = ({
         <InputDescribedByProvider value={message ? descriptionId : undefined}>
           <InputInvalidProvider value={hasError}>
             <div
-              className={classNames(
+              className={clsx(
                 'form-group d-block',
                 {
                   'has-success': sentiment === Sentiment.POSITIVE,

package/src/flowNavigation/FlowNavigation.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 
 import { Breakpoint, Layout } from '../common';
@@ -47,13 +47,12 @@ const FlowNavigation = ({
 
   return (
     <div
-      className={classNames(
-        'np-flow-navigation d-flex align-items-center justify-content-center p-y-3',
-        { 'np-flow-navigation--border-bottom': !done },
-      )}
+      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
+        'np-flow-navigation--border-bottom': !done,
+      })}
     >
       <FlowHeader
-        className={classNames(
+        className={clsx(
           'np-flow-navigation__content p-x-3',
           screenSm == null
             ? 'np-flow-navigation--hidden'
@@ -92,7 +91,7 @@ const FlowNavigation = ({
             <Stepper
               activeStep={activeStep}
               steps={steps}
-              className={classNames('np-flow-navigation__stepper')}
+              className={clsx('np-flow-navigation__stepper')}
             />
           )
         }

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 
 import Body from '../../body';
@@ -12,13 +12,13 @@ export interface AnimatedLabelProps {
 
 const AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {
   return (
-    <Body type={Typography.BODY_LARGE_BOLD} className={classNames('np-animated-label', className)}>
+    <Body type={Typography.BODY_LARGE_BOLD} className={clsx('np-animated-label', className)}>
       {labels.map((label, index) => {
         const nextLabel = index - 1;
         return (
           <div
             key={nextLabel}
-            className={classNames('text-xs-center', {
+            className={clsx('text-xs-center', {
               'np-animated-label--in text-ellipsis': index === activeLabel,
             })}
           >

package/src/flowNavigation/backButton/BackButton.tsx

@@ -1,5 +1,5 @@
 import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import Avatar, { AvatarType } from '../../avatar';
 
@@ -19,7 +19,7 @@ export default function BackButton({
       <button
         type="button"
         aria-label={ariaLabel}
-        className={classNames('np-back-button', 'btn-unstyled', className)}
+        className={clsx('np-back-button', 'btn-unstyled', className)}
         onClick={onClick}
       >
         <ArrowLeftIcon size={24} />

package/src/header/Header.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import ActionButton, { ActionButtonProps } from '../actionButton/ActionButton';
 import Button from '../button';
@@ -71,7 +71,7 @@ export const Header = ({ action, as = 'h5', title, className }: HeaderProps) =>
       <Title
         as={as}
         type={Typography.TITLE_GROUP}
-        className={classNames('np-header', 'np-header__title', className)}
+        className={clsx('np-header', 'np-header__title', className)}
       >
         {title}
       </Title>
@@ -86,7 +86,7 @@ export const Header = ({ action, as = 'h5', title, className }: HeaderProps) =>
   }
 
   return (
-    <div className={classNames('np-header', className)}>
+    <div className={clsx('np-header', className)}>
       <Title as={as} type={Typography.TITLE_GROUP} className="np-header__title">
         {title}
       </Title>

package/src/i18n/zh-HK.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
   "neptune.Select.searchPlaceholder": "搜尋…",
   "neptune.SelectInput.noResultsFound": "找不到任何結果",
+  "neptune.SelectOption.action.label": "選擇",
+  "neptune.SelectOption.selected.action.label": "更改已選選項",
   "neptune.Summary.statusDone": "已完成事項",
   "neptune.Summary.statusNotDone": "未完成事項",
   "neptune.Summary.statusPending": "待處理事項",

package/src/image/Image.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { useRef } from 'react';
 
 import { useHasIntersected } from '../common/hooks';
@@ -47,7 +47,7 @@ const Image = ({
       id={id}
       alt={alt}
       src={imageSource}
-      className={classnames([
+      className={clsx([
         'tw-image',
         {
           'tw-image__stretch': stretch,

package/src/info/Info.tsx

@@ -1,5 +1,5 @@
 import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
@@ -63,7 +63,7 @@ const Info = ({
 
   return (
     <span
-      className={classNames(className, 'np-info', {
+      className={clsx(className, 'np-info', {
         'np-info__small': isSmall,
         'np-info__large': !isSmall,
       })}

package/src/inlineAlert/InlineAlert.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { ReactNode } from 'react';
 
 import { Sentiment, Size } from '../common';
@@ -29,7 +29,7 @@ export default function InlineAlert({
     <div
       role="alert"
       id={id}
-      className={classNames(
+      className={clsx(
         'alert alert-detach',
         `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,
         className,

package/src/inputs/Input.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
 import { SizeLarge, SizeMedium, SizeSmall } from '../common';
@@ -27,7 +27,7 @@ export const Input = forwardRef(function Input(
   return (
     <input
       ref={reference}
-      className={classNames(className, inputClassNameBase({ size }), 'np-input', {
+      className={clsx(className, inputClassNameBase({ size }), 'np-input', {
         'np-input--shape-rectangle': shape === 'rectangle',
         'np-input--shape-pill': shape === 'pill',
       })}

package/src/inputs/InputGroup.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { createContext, useContext, useMemo, useRef, useState } from 'react';
 
 import { useResizeObserver } from '../common/hooks/useResizeObserver';
@@ -77,7 +77,7 @@ export function InputGroup({
       <InputPaddingEndContext.Provider
         value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
       >
-        <fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>
+        <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>
           {addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
           {children}
           {addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
@@ -135,7 +135,7 @@ function InputAddon({
           <InputInvalidProvider value={undefined}>
             <span
               ref={ref}
-              className={classNames(
+              className={clsx(
                 'np-input-addon',
                 {
                   'np-input-addon--placement-start': placement === 'start',

package/src/inputs/SelectInput.css

@@ -206,6 +206,10 @@
     height: auto;
   }
 }
+.np-select-input-listbox-container--virtualized {
+  /* The wrapping element shrinks this as needed */
+  height: 100vh;
+}
 .np-select-input-listbox-container--has-group {
   scroll-padding-top: 32px;
   scroll-padding-top: var(--size-32);
@@ -224,6 +228,12 @@
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
+.np-select-input-listbox-container--virtualized .np-select-input-listbox {
+  /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
+  overflow-y: auto;
+  contain: strict;
+  height: 100%;
+}
 .np-select-input-separator-item {
   margin: 8px;
   margin: var(--size-8);

package/src/inputs/SelectInput.less

@@ -60,6 +60,11 @@
     }
   }
 
+  &--virtualized {
+    /* The wrapping element shrinks this as needed */
+    height: 100vh;
+  }
+
   &--has-group {
     scroll-padding-top: var(--size-32);
   }
@@ -71,6 +76,13 @@
 
   .focus-ring();
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+
+  .np-select-input-listbox-container--virtualized & {
+    /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
+    overflow-y: auto;
+    contain: strict;
+    height: 100%;
+  }
 }
 
 .np-select-input-separator-item {

package/src/inputs/SelectInput.story.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, screen, userEvent, within, type Mock } from '@storybook/test';
 import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useState } from 'react';
 
 import Button from '../button/Button';
@@ -260,7 +260,7 @@ export const CustomTrigger: Story<Month> = {
       withinTrigger ? month.name : <SelectInputOptionContent title={month.name} />,
     renderTrigger: ({ content, className }) => (
       <SelectInputTriggerButton
-        className={classNames(className, 'btn-unstyled np-text-link-large align-items-center')}
+        className={clsx(className, 'btn-unstyled np-text-link-large align-items-center')}
         style={{ display: 'inline-flex', columnGap: '0.25rem' }}
       >
         {content}
@@ -322,6 +322,26 @@ export const Advanced: Story<Month> = {
   },
 };
 
+export const ManyItems: Story<string, true> = {
+  args: {
+    multiple: true,
+    items: Array.from({ length: 1000 }, (_, index) => ({
+      type: 'option',
+      value: String(index + 1),
+    })),
+    renderValue: (value, withinTrigger) =>
+      withinTrigger ? (
+        value
+      ) : (
+        <SelectInputOptionContent
+          title={value}
+          description={Number(value) % 10 === 0 ? 'Divisible by 10' : undefined}
+        />
+      ),
+    filterable: true,
+  },
+};
+
 export const WithinDrawer: Story<Currency> = {
   args: CurrenciesArgs,
   decorators: [