@transferwise/components 46.50.0 → 46.51.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/__snapshots__/FlowNavigation.spec.js.snap

@@ -71,7 +71,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
               style="width: 50%;"
             />
           </div>
-          <ul
+          <ol
             class="tw-stepper-steps p-t-1 m-b-0"
           >
             <li
@@ -107,7 +107,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
                 label-2
               </span>
             </li>
-          </ul>
+          </ol>
         </div>
       </div>
     </div>
@@ -187,7 +187,7 @@ exports[`FlowNavigation renders as expected 1`] = `
               style="width: 0%;"
             />
           </div>
-          <ul
+          <ol
             class="tw-stepper-steps p-t-1 m-b-0"
           >
             <li
@@ -223,7 +223,7 @@ exports[`FlowNavigation renders as expected 1`] = `
                 label-2
               </span>
             </li>
-          </ul>
+          </ol>
         </div>
       </div>
     </div>

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.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}

package/src/inputs/SelectInput.tsx

@@ -1,6 +1,6 @@
 import { Listbox as ListboxBase } from '@headlessui/react';
 import { Check, ChevronDown, Cross, CrossCircle } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import mergeProps from 'merge-props';
 import {
   createContext,
@@ -173,7 +173,7 @@ const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, siz
   <InputGroup
     addonEnd={{
       content: (
-        <span className={classNames('np-select-input-addon-container', disabled && 'disabled')}>
+        <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>
           {clear != null && !placeholderShown ? (
             <>
               <SelectInputClearButton
@@ -199,7 +199,7 @@ const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, siz
   >
     <SelectInputTriggerButton as={ButtonInput} size={size}>
       <span
-        className={classNames(
+        className={clsx(
           'np-select-input-content',
           placeholderShown && 'np-select-input-placeholder',
         )}
@@ -220,7 +220,7 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
     <button
       type="button"
       aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
-      className={classNames(className, 'np-select-input-addon np-select-input-addon--interactive')}
+      className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}
       onClick={onClick}
     >
       <Cross size={16} />
@@ -569,7 +569,7 @@ function SelectInputOptions<T = string>({
       <section
         ref={listboxContainerRef}
         tabIndex={-1}
-        className={classNames(
+        className={clsx(
           'np-select-input-listbox-container',
           items.some((item) => item.type === 'group') &&
             'np-select-input-listbox-container--has-group',
@@ -677,7 +677,7 @@ function SelectInputGroupItemView<T = string>({
     <section
       role="group"
       aria-labelledby={headerId}
-      className={classNames(needle === null && 'np-select-input-group-item--without-needle')}
+      className={clsx(needle === null && 'np-select-input-group-item--without-needle')}
     >
       {needle == null ? (
         <header
@@ -714,7 +714,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
       value={value}
       disabled={disabled}
       className={({ active, disabled: uiDisabled }) =>
-        classNames(
+        clsx(
           'np-select-input-option-container np-text-body-large',
           active && 'np-select-input-option-container--active',
           uiDisabled && 'np-select-input-option-container--disabled',
@@ -726,7 +726,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
           <div className="np-select-input-option">{children}</div>
           <Check
             size={16}
-            className={classNames(
+            className={clsx(
               'np-select-input-option-check',
               !selected && 'np-select-input-option-check--not-selected',
             )}
@@ -754,14 +754,14 @@ export function SelectInputOptionContent({
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         'np-select-input-option-content-container',
         (note || description) && 'np-text-body-large',
       )}
     >
       {icon ? (
         <div
-          className={classNames(
+          className={clsx(
             'np-select-input-option-content-icon',
             !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',
           )}
@@ -772,7 +772,7 @@ export function SelectInputOptionContent({
 
       <div className="np-select-input-option-content-text">
         <div
-          className={classNames(
+          className={clsx(
             'np-select-input-option-content-text-line-1',
             withinTrigger && 'np-select-input-option-content-text-within-trigger',
           )}
@@ -787,7 +787,7 @@ export function SelectInputOptionContent({
 
         {description ? (
           <div
-            className={classNames(
+            className={clsx(
               'np-select-input-option-content-text-secondary np-text-body-default',
               withinTrigger && 'np-select-input-option-content-text-within-trigger',
             )}

package/src/inputs/TextArea.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
@@ -22,7 +22,7 @@ export const TextArea = forwardRef(function TextArea(
   return (
     <textarea
       ref={reference}
-      className={classNames(className, inputClassNameBase(), 'np-text-area')}
+      className={clsx(className, inputClassNameBase(), 'np-text-area')}
       {...inputAttributes}
       {...restProps}
     />

package/src/inputs/_BottomSheet.tsx

@@ -9,7 +9,7 @@ import {
 import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Fragment, useState } from 'react';
 
 import { CloseButton } from '../common/closeButton';
@@ -112,7 +112,7 @@ export function BottomSheet({
                         />
                       </div>
                       <div
-                        className={classNames(
+                        className={clsx(
                           'np-bottom-sheet-v2-content-inner',
                           title && 'np-bottom-sheet-v2-content-inner--has-title',
                           padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',

package/src/inputs/_ButtonInput.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
 import { useInputPaddings } from './InputGroup';
@@ -18,7 +18,7 @@ export const ButtonInput = forwardRef(function ButtonInput(
     <button
       ref={ref}
       type="button"
-      className={classNames(className, inputClassNameBase({ size }), 'np-button-input')}
+      className={clsx(className, inputClassNameBase({ size }), 'np-button-input')}
       // eslint-disable-next-line react/forbid-dom-props
       style={{ ...inputPaddings, ...style }}
       {...restProps}

package/src/inputs/_Popover.tsx

@@ -15,7 +15,7 @@ import {
 import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useState } from 'react';
 
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
@@ -109,7 +109,7 @@ export function Popover({
                 <div
                   key={floatingKey} // Force inner state invalidation on open
                   ref={refs.setFloating}
-                  className={classNames('np-popover-v2-container', {
+                  className={clsx('np-popover-v2-container', {
                     'np-popover-v2-container--size-md': size === 'md',
                     'np-popover-v2-container--size-lg': size === 'lg',
                   })}
@@ -118,7 +118,7 @@ export function Popover({
                   {...getFloatingProps()}
                 >
                   <div
-                    className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {
                       'np-popover-v2--padding-md': padding === 'md',
                     })}
                   >

package/src/inputs/_common.ts

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import { SizeLarge, SizeMedium, SizeSmall } from '../common';
 
@@ -7,7 +7,7 @@ export type InputPropsBase = {
 };
 
 export function inputClassNameBase({ size = 'auto' }: InputPropsBase = {}) {
-  return classNames(
+  return clsx(
     'form-control', // TODO: Deprecate
     'np-form-control',
     {