@transferwise/components 46.23.0 → 46.25.0

package/src/dateInput/DateInput.spec.js

@@ -1,11 +1,12 @@
 import { shallow, mount } from 'enzyme';
 import { useIntl } from 'react-intl';
 
-import { DateInput, Input } from '..';
+import { DateInput } from '..';
 import { mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 const LOCALES = {
   jp: 'ja-JP',
+  us: 'en-US',
 };
 const DEFAULT_LOCALE = 'en-GB';
 const FEBRUARY_INDEX = 1;
@@ -182,24 +183,43 @@ describe('Date Input Component', () => {
   });
 
   describe('when locale is provided', () => {
-    it('shows day before month if locale not US', () => {
+    it('shows day before month if locale is GB', () => {
+      useIntl.mockReturnValue({
+        locale: DEFAULT_LOCALE,
+        formatMessage: (message) => message.defaultMessage,
+      });
+
       component = shallow(<DateInput {...props} />);
 
-      const labels = component.find('label');
-      expect(labels.at(0).find(Input).exists()).toBe(true);
-      expect(labels.at(1).find(Input).exists()).toBe(false);
+      expect(component.find('span').at(0).text()).toBe('Day');
+      expect(component.find('span').at(1).text()).toBe('Month');
+      expect(component.find('span').at(2).text()).toBe('Year');
     });
 
-    it('shows day before month if locale is JP', () => {
+    it('shows month before day if locale is US', () => {
+      useIntl.mockReturnValue({
+        locale: LOCALES.us,
+        formatMessage: (message) => message.defaultMessage,
+      });
+
+      component = shallow(<DateInput {...props} />);
+
+      expect(component.find('span').at(0).text()).toBe('Month');
+      expect(component.find('span').at(1).text()).toBe('Day');
+      expect(component.find('span').at(2).text()).toBe('Year');
+    });
+
+    it('shows year, month, day if locale is JP', () => {
       useIntl.mockReturnValue({
         locale: LOCALES.jp,
         formatMessage: (message) => message.defaultMessage,
       });
+
       component = shallow(<DateInput {...props} />);
 
-      const labels = component.find('label');
-      expect(labels.at(0).find(Input).exists()).toBe(false);
-      expect(labels.at(1).find(Input).exists()).toBe(true);
+      expect(component.find('span').at(0).text()).toBe('Year');
+      expect(component.find('span').at(1).text()).toBe('Month');
+      expect(component.find('span').at(2).text()).toBe('Day');
     });
   });
 

package/src/dateInput/DateInput.story.tsx

@@ -16,9 +16,6 @@ export default {
     monthLabel: 'Month select',
     yearLabel: 'Year input',
     yearAutoComplete: 'bday-year',
-    selectProps: {
-      placeholder: 'Month',
-    },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;

package/src/dateInput/DateInput.tsx

@@ -4,13 +4,11 @@ import { useIntl } from 'react-intl';
 
 import { Input, SelectInput, SelectInputProps, SelectInputOptionContent } from '..';
 import { Size, DateMode, MonthFormat, SizeSmall, SizeMedium, SizeLarge } from '../common';
-import { getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
+import { getMonthNames, isDateValid, isMonthAndYearFormat, MDY, YMD } from '../common/dateUtils';
 
 import messages from './DateInput.messages';
 import { convertToLocalMidnight } from './utils';
 
-const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
-
 export interface DateInputProps {
   'aria-label'?: string;
   'aria-labelledby'?: string;
@@ -243,7 +241,59 @@ const DateInput = ({
     'col-sm-5': !monthYearOnly,
   });
 
-  const monthBeforeDay = MonthBeforeDay.has(locale);
+  const getMonth = () => {
+    return <div className={monthWidth}>{getSelectElement()}</div>;
+  };
+
+  const getDay = () => {
+    return (
+      <div className="col-sm-3">
+        <label>
+          <span className="sr-only">{dayLabel}</span>
+          <div className={`input-group input-group-${size}`}>
+            <Input
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              name="day"
+              autoComplete={dayAutoComplete}
+              value={day || ''}
+              placeholder={placeholders?.day}
+              disabled={disabled}
+              min={1}
+              onChange={(event) => handleDayChange(event)}
+            />
+          </div>
+        </label>
+      </div>
+    );
+  };
+
+  const getYear = () => {
+    return (
+      <div className="col-sm-4">
+        <label>
+          <span className="sr-only">{yearLabel}</span>
+          <div className={`input-group input-group-${size}`}>
+            <Input
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              name="year"
+              autoComplete={yearAutoComplete}
+              placeholder={placeholders?.year}
+              value={year || ''}
+              disabled={disabled}
+              min={1}
+              onChange={(event) => handleYearChange(event)}
+            />
+          </div>
+        </label>
+      </div>
+    );
+  };
+  const monthBeforeDay = MDY.has(locale);
+  const yearFirst = YMD.has(locale);
 
   return (
     <div
@@ -260,50 +310,42 @@ const DateInput = ({
       }
     >
       <div className="row">
-        {monthBeforeDay && <div className={monthWidth}>{getSelectElement()}</div>}
-        {!monthYearOnly && (
-          <div className="col-sm-3">
-            <label>
-              <span className="sr-only">{dayLabel}</span>
-              <div className={`input-group input-group-${size}`}>
-                <Input
-                  type="text"
-                  inputMode="numeric"
-                  pattern="[0-9]*"
-                  name="day"
-                  autoComplete={dayAutoComplete}
-                  value={day || ''}
-                  placeholder={placeholders.day}
-                  disabled={disabled}
-                  min={1}
-                  onChange={(event) => handleDayChange(event)}
-                />
-              </div>
-            </label>
-          </div>
-        )}
-
-        {!monthBeforeDay && <div className={monthWidth}>{getSelectElement()}</div>}
-
-        <div className="col-sm-4">
-          <label>
-            <span className="sr-only">{yearLabel}</span>
-            <div className={`input-group input-group-${size}`}>
-              <Input
-                type="text"
-                inputMode="numeric"
-                pattern="[0-9]*"
-                name="year"
-                autoComplete={yearAutoComplete}
-                placeholder={placeholders.year}
-                value={year || ''}
-                disabled={disabled}
-                min={1}
-                onChange={(event) => handleYearChange(event)}
-              />
-            </div>
-          </label>
-        </div>
+        {(() => {
+          if (monthYearOnly) {
+            return (
+              <>
+                {!yearFirst && getMonth()}
+                {getYear()}
+                {yearFirst && getMonth()}
+              </>
+            );
+          }
+          if (monthBeforeDay) {
+            return (
+              <>
+                {getMonth()}
+                {getDay()}
+                {getYear()}
+              </>
+            );
+          } else if (yearFirst) {
+            return (
+              <>
+                {getYear()}
+                {getMonth()}
+                {getDay()}
+              </>
+            );
+          } else {
+            return (
+              <>
+                {getDay()}
+                {getMonth()}
+                {getYear()}
+              </>
+            );
+          }
+        })()}
       </div>
     </div>
   );

package/src/emphasis/{Emphasis.spec.js → Emphasis.spec.tsx}

@@ -12,10 +12,11 @@ describe('Emphasis', () => {
       ${'<negative>negative</negative>'}    | ${'em.emphasis.emphasis--negative'}
       ${'<warning>warning</warning>'}       | ${'em.emphasis.emphasis--warning'}
     `('$text renders as expected with selectoe $selector', ({ text, selector }) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const { container } = render(<Emphasis text={text} />);
 
       expect(container.querySelector(selector)).toBeInTheDocument();
-      expect(container.firstElementChild.tagName).toBe('SPAN');
+      expect(container?.firstElementChild?.tagName).toBe('SPAN');
     });
   });
 

package/src/emphasis/Emphasis.tsx

@@ -5,7 +5,7 @@ import EmphasisHtmlTransformer from './EmphasisHtmlTransformer';
 const SUPPORTED_TAGS = ['important', 'positive', 'negative', 'warning'];
 const emphasisHtmlTransformer = new EmphasisHtmlTransformer(SUPPORTED_TAGS);
 
-type EmphasisProps = {
+export type EmphasisProps = {
   text?: string;
 };
 

package/src/emphasis/{EmphasisHtmlTransformer.spec.js → EmphasisHtmlTransformer.spec.tsx}

@@ -33,16 +33,4 @@ describe('creates safe, enphasised html', () => {
       expect(emphasisHtmlTransformer.transform('hello\nworld')).toStrictEqual('hello<br />world');
     });
   });
-
-  describe('returns null when no input provided', () => {
-    it('input is null', () => {
-      const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform(null)).toBeNull();
-    });
-
-    it('input is undefined', () => {
-      const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform(undefined)).toBeNull();
-    });
-  });
 });

package/src/emphasis/EmphasisHtmlTransformer.ts

@@ -15,7 +15,7 @@ type Tags = {
 class EmphasisHtmlTransformer {
   tags: Array<Tags>;
 
-  constructor(whitelistedTags: Array<string>) {
+  constructor(whitelistedTags?: Array<string>) {
     this.tags = (whitelistedTags || []).map((tag) => {
       return {
         transformed: {

package/src/emphasis/index.ts

@@ -1 +1,2 @@
 export { default } from './Emphasis';
+export type { EmphasisProps } from './Emphasis';

package/src/i18n/es.json

@@ -29,13 +29,13 @@
   "neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
   "neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
   "neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
-  "neptune.Upload.csTooLargeMessage": "Por favor, sube un archivo de menos de {maxSize}MB",
+  "neptune.Upload.csTooLargeMessage": "Proporciona un archivo menor de {maxSize} MB",
   "neptune.Upload.csWrongTypeMessage": "Tipo de archivo no aceptado. Por favor, inténtalo de nuevo con un archivo diferente",
   "neptune.Upload.psButtonText": "Cancela",
   "neptune.Upload.psProcessingText": "Subiendo...",
   "neptune.Upload.usButtonText": "O selecciona un archivo",
   "neptune.Upload.usDropMessage": "Arrastra un archivo para subirlo",
-  "neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo menor de {maxSize}MB",
+  "neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo de menos de {maxSize} MB",
   "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
   "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
   "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",

package/src/i18n/hu.json

@@ -29,13 +29,13 @@
   "neptune.Upload.csButtonText": "Másik fájl feltöltése?",
   "neptune.Upload.csFailureText": "Feltöltés sikertelen. Kérünk, próbáld újra",
   "neptune.Upload.csSuccessText": "Feltöltés sikeres",
-  "neptune.Upload.csTooLargeMessage": "Kérünk, {maxSize} MB-nál kisebb fájlt tölts fel",
+  "neptune.Upload.csTooLargeMessage": "Kérünk, olyan fájlt küldj el, amely kisebb mint {maxSize}MB",
   "neptune.Upload.csWrongTypeMessage": "Nem támogatott fájltípus. Kérünk, próbáld újra másik fájllal",
   "neptune.Upload.psButtonText": "Mégsem",
   "neptune.Upload.psProcessingText": "Feltöltés...",
   "neptune.Upload.usButtonText": "Vagy válaszd ki a fájlt",
   "neptune.Upload.usDropMessage": "Húzd ide a fájlokat a feltöltéshez",
-  "neptune.Upload.usPlaceholder": "Húzz ide egy {maxSize} MB-nál kisebb fájlt",
+  "neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize} MB méretű fájlt",
   "neptune.UploadButton.allFileTypes": "Összes fájltípus",
   "neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
   "neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",

package/src/i18n/index.ts

@@ -21,6 +21,7 @@ const translations: Record<string, Record<string, string>> = {
   cs,
   de,
   en,
+  'en-US': en,
   es,
   fr,
   hu,

package/src/i18n/zh-HK.json

@@ -4,10 +4,10 @@
   "neptune.ClearButton.ariaLabel": "清除",
   "neptune.CloseButton.ariaLabel": "關閉",
   "neptune.DateInput.day.label": "日",
-  "neptune.DateInput.day.placeholder": "DD",
+  "neptune.DateInput.day.placeholder": "日",
   "neptune.DateInput.month.label": "月",
   "neptune.DateInput.year.label": "年",
-  "neptune.DateInput.year.placeholder": "YYYY",
+  "neptune.DateInput.year.placeholder": "年",
   "neptune.DateLookup.day": "日",
   "neptune.DateLookup.goTo20YearView": "切換至20年視圖",
   "neptune.DateLookup.month": "月",

package/src/index.ts

@@ -2,16 +2,20 @@
  * Types
  */
 export type { AccordionProps, AccordionItem } from './accordion';
+export type { AvatarProps } from './avatar';
 export type { ActionOptionProps } from './actionOption';
 export type { BadgeProps } from './badge';
 export type { CircularButtonProps } from './circularButton';
 export type { DecisionProps } from './decision/Decision';
+export type { EmphasisProps } from './emphasis';
 export type { InfoProps } from './info';
 export type { SummaryProps } from './summary';
 export type { InputProps } from './inputs/Input';
 export type { DateInputProps } from './dateInput';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputGroupProps } from './inputs/InputGroup';
+export type { LoaderProps } from './loader';
+export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { SearchInputProps } from './inputs/SearchInput';
 export type {
   SelectInputGroupItem,
@@ -41,6 +45,7 @@ export type { TooltipProps } from './tooltip';
 export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';
+export type { MoneyProps } from './money';
 export type {
   CurrencyHeaderItem,
   CurrencyItem,

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js

@@ -34,14 +34,15 @@ const Template = (args) => {
   const placeholder = args.pattern;
   const displayPattern = args.pattern;
   const label = args.label;
+  const id = label.replaceAll(' ', '-').toLowerCase();
 
   return (
     <>
-      <label id="template" htmlFor="template">
+      <label id="template" htmlFor={id}>
         {label}
       </label>
       <InputWithDisplayFormat
-        id="template"
+        id={id}
         placeholder={placeholder}
         displayPattern={displayPattern}
         className="form-control"

package/src/inputs/SelectInput.tsx

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import mergeProps from 'merge-props';
 import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import mergeRefs from 'react-merge-refs';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
@@ -251,7 +250,7 @@ export function SelectInput<T = string, M extends boolean = false>({
     });
   });
 
-  const triggerRef = useRef<HTMLButtonElement>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
 
   const screenSm = useScreenSize(Breakpoint.SMALL);
   const OptionsOverlay = screenSm ? Popover : BottomSheet;
@@ -290,7 +289,10 @@ export function SelectInput<T = string, M extends boolean = false>({
               <SelectInputTriggerButtonPropsContext.Provider
                 // eslint-disable-next-line react/jsx-no-constructed-context-values
                 value={{
-                  ref: mergeRefs([ref, triggerRef]),
+                  ref: (node) => {
+                    ref(node);
+                    triggerRef.current = node;
+                  },
                   id,
                   ...mergeProps(
                     {

package/src/loader/Loader.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@wise/components-theming';
 import classnames from 'classnames';
-import { ReactElement, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';
 
@@ -9,7 +9,7 @@ type DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;
 
 type SizeType = SizeSmall | SizeMedium;
 
-type Props = {
+export type LoaderProps = {
   /**
    * @deprecated use `size` instead
    */
@@ -37,7 +37,7 @@ const Loader = ({
   displayInstantly = false,
   classNames = {},
   ...restProps
-}: Props): ReactElement => {
+}: LoaderProps) => {
   const { theme } = useTheme();
   const [hasDebounced, setHasDebounced] = useState(displayInstantly);
 

package/src/loader/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Loader';
+export type { LoaderProps } from './Loader';

package/src/money/{Money.spec.js → Money.spec.tsx}

@@ -11,7 +11,7 @@ describe('Money', () => {
   it('formats the string with amount, currency & the passed in locale', () => {
     const { container } = render(<Money amount={4.98} currency="GBP" />, {
       locale: 'fr',
-      messages: {},
+      messages: undefined,
     });
     expect(container).toHaveTextContent('4,98 GBP');
   });

package/src/money/{Money.js → Money.tsx}

@@ -1,15 +1,14 @@
 import { formatMoney } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-const Money = ({ amount, currency }) => {
+export interface MoneyProps {
+  amount: number;
+  currency: string;
+}
+
+const Money = ({ amount, currency }: MoneyProps) => {
   const { locale } = useIntl();
   return <>{formatMoney(amount, currency, locale)}</>;
 };
 
-Money.propTypes = {
-  amount: PropTypes.number.isRequired,
-  currency: PropTypes.string.isRequired,
-};
-
 export default Money;

package/src/money/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Money';
+export type { MoneyProps } from './Money';

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Children } from 'react';
+
+export interface NavigationOptionListProps {
+  children: React.ReactNode;
+}
+
+const NavigationOptionList = ({ children }: NavigationOptionListProps) => {
+  return (
+    <ul className="np-navigation-options-list">
+      {Children.map(children, (child) => (
+        <li key={child?.toString()} className="np-navigation-options-list__item">
+          {child}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default NavigationOptionList;

package/src/navigationOptionsList/index.ts

@@ -0,0 +1,2 @@
+export { default } from './NavigationOptionsList';
+export type { NavigationOptionListProps } from './NavigationOptionsList';

package/src/radio/Radio.story.tsx

@@ -44,7 +44,7 @@ export const Basic = () => {
         <Radio
           label={label}
           name="name"
-          id="id"
+          id="id1"
           checked={checked}
           disabled={disabled}
           secondary={secondary}
@@ -61,7 +61,7 @@ export const Basic = () => {
       <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
         <Checkbox
           label={label}
-          id="test"
+          id="id2"
           checked={checked}
           disabled={disabled}
           secondary={secondary}
@@ -71,10 +71,9 @@ export const Basic = () => {
       <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
         <Checkbox
           label={label}
-          id="test"
+          id="id3"
           checked={checked}
           disabled={disabled}
-          // secondary={secondary}
           onChange={() => setChecked(!checked)}
         />
       </div>

package/src/segmentedControl/SegmentedControl.tsx

@@ -101,6 +101,7 @@ const SegmentedControl = ({
         className={classNames('segmented-control__segments', {
           'segmented-control__segments--no-animate': !animate,
         })}
+        role={mode !== 'input' ? 'tablist' : undefined}
       >
         {segmentsWithRefs.map((segment) =>
           mode === 'input' ? (

package/src/slidingPanel/SlidingPanel.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef, useRef } from 'react';
-import mergeRefs from 'react-merge-refs';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import { Position } from '../common';
@@ -28,7 +27,8 @@ const SlidingPanel = forwardRef(
     }: Omit<SlidingPanelProps, 'ref'>,
     reference: React.ForwardedRef<HTMLDivElement>,
   ) => {
-    const localReference = useRef<HTMLDivElement>(null);
+    const localReference = useRef<HTMLDivElement>(null as never);
+    useImperativeHandle(reference, () => localReference.current, []);
 
     return (
       <CSSTransition
@@ -43,7 +43,7 @@ const SlidingPanel = forwardRef(
         unmountOnExit
       >
         <div
-          ref={mergeRefs([reference, localReference])}
+          ref={localReference}
           className={classNames(
             'sliding-panel',
             `sliding-panel--open-${position}`,

package/src/switch/Switch.story.tsx

@@ -39,6 +39,9 @@ export const Disabled = () => {
 
   return (
     <div className="d-flex flex-column">
+      <label id="labelID" htmlFor="switchId">
+        A switch with a label
+      </label>
       <Switch
         checked={checked}
         disabled
@@ -53,7 +56,7 @@ export const Disabled = () => {
         disabled
         className="a-class-name"
         aria-labelledby="labelID"
-        id="switchId"
+        id="switchId1"
         onClick={() => setCheck(!checked)}
       />
     </div>