@transferwise/components 46.23.0 → 46.24.0

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/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>

package/build/types/common/dateUtils/getDayNames/index.d.ts

@@ -1,2 +0,0 @@
-export { getDayNames } from './getDayNames';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/dateUtils/getDayNames/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/getDayNames/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/build/types/common/dateUtils/getMonthNames/index.d.ts

@@ -1,2 +0,0 @@
-export { getMonthNames } from './getMonthNames';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/dateUtils/getMonthNames/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/getMonthNames/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/build/types/common/dateUtils/isDateValid/index.d.ts

@@ -1,2 +0,0 @@
-export { isDateValid, validDateString } from './isDateValid';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/dateUtils/isDateValid/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/isDateValid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/build/types/common/dateUtils/isWithinRange/index.d.ts

@@ -1,2 +0,0 @@
-export { isWithinRange } from './isWithinRange';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/dateUtils/isWithinRange/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/isWithinRange/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/build/types/common/dateUtils/moveToWithinRange/index.d.ts

@@ -1,2 +0,0 @@
-export { moveToWithinRange } from './moveToWithinRange';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/dateUtils/moveToWithinRange/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/moveToWithinRange/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/src/common/dateUtils/getDayNames/index.ts

@@ -1 +0,0 @@
-export { getDayNames } from './getDayNames';

package/src/common/dateUtils/getMonthNames/index.ts

@@ -1 +0,0 @@
-export { getMonthNames } from './getMonthNames';

package/src/common/dateUtils/isDateValid/index.ts

@@ -1 +0,0 @@
-export { isDateValid, validDateString } from './isDateValid';

package/src/common/dateUtils/isWithinRange/index.ts

@@ -1 +0,0 @@
-export { isWithinRange } from './isWithinRange';

package/src/common/dateUtils/moveToWithinRange/index.ts

@@ -1 +0,0 @@
-export { moveToWithinRange } from './moveToWithinRange';

package/src/loader/index.js

@@ -1,3 +0,0 @@
-import Loader from './Loader';
-
-export default Loader;

package/src/money/index.js

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

package/src/navigationOptionsList/NavigationOptionsList.js

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-import { Children } from 'react';
-
-const NavigationOptionList = ({ children }) => {
-  return (
-    <ul className="np-navigation-options-list">
-      {Children.map(children, (child) => (
-        <li key={child.key} className="np-navigation-options-list__item">
-          {child}
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-NavigationOptionList.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default NavigationOptionList;

package/src/navigationOptionsList/index.js

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