@transferwise/components 46.93.0 → 46.93.2

package/src/modal/Modal.story.tsx

@@ -30,11 +30,13 @@ export interface StoryContentProps {
 }
 
 const StoryContent = ({ args, screenMode }: StoryContentProps) => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [open, setOpen] = useState(args.open);
+
   return (
     <>
-      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button v2 onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         {...args}
         body={
@@ -62,7 +64,11 @@ export const Basic: Story = {
     title: 'Title',
     body: lorem10,
     scroll: Scroll.VIEWPORT,
-    footer: <Button block>Action</Button>,
+    footer: (
+      <Button v2 block>
+        Action
+      </Button>
+    ),
   },
   render: (args) => <StoryContent args={args} />,
 };
@@ -103,7 +109,11 @@ export const WithThemeProviderInContent: Story = {
     title: lorem10,
     body: lorem100,
     scroll: Scroll.VIEWPORT,
-    footer: <Button block>Action</Button>,
+    footer: (
+      <Button v2 block>
+        Action
+      </Button>
+    ),
   },
   render: (args, { globals: { screenMode } }) => (
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

package/src/moneyInput/currencyFormatting.ts

@@ -67,12 +67,12 @@ export function parseAmount(number: string, currency: string, locale = DEFAULT_L
   const precision = getCurrencyDecimals(currency);
   const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';
   const decimalSeparator = getDecimalSeparator(validLocale);
-  const numberWithStandardDecimalSeparator = (number ? `${number}` : '')
+  const numberWithStandardDecimalSeparator = (number || '')
     .replace(new RegExp(`\\${groupSeparator}`, 'g'), '')
     .replace(new RegExp(`\\${decimalSeparator}`, 'g'), '.')
     .replace(/[^0-9.]/g, '');
-  const parsedAmount = parseFloat(
-    parseFloat(numberWithStandardDecimalSeparator).toFixed(precision),
+  const parsedAmount = Number.parseFloat(
+    Number.parseFloat(numberWithStandardDecimalSeparator).toFixed(precision),
   );
   return Math.abs(parsedAmount);
 }

package/src/nudge/Nudge.tsx

@@ -22,7 +22,6 @@ const getLocalStorage = (): string[] => {
         return storage.map((item) => String(item));
       }
     }
-    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
   } catch (error) {}
 
   return [];
@@ -101,7 +100,6 @@ const Nudge = ({
     if (persistDismissal && id) {
       try {
         localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
-        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
       } catch (error) {}
 
       setIsDismissed(true);

package/src/popover/Popover.story.tsx

@@ -31,7 +31,11 @@ export default {
     preferredPlacement: Position.BOTTOM,
     title: 'Guaranteed rate',
     content: <Content />,
-    children: <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>,
+    children: (
+      <Button v2 onClick={action(`I'm also triggered`)}>
+        Click here to Open Popover!
+      </Button>
+    ),
   },
   argTypes: {
     preferredPlacement: {
@@ -61,6 +65,10 @@ export const WithoutVisibleTitle: Story = {
     title: undefined,
     'aria-label': 'Guaranteed rate',
     content: <Content />,
-    children: <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>,
+    children: (
+      <Button v2 onClick={action(`I'm also triggered`)}>
+        Click here to Open Popover!
+      </Button>
+    ),
   },
 } satisfies Meta<typeof Popover>;

package/src/promoCard/PromoCardContext.tsx

@@ -33,7 +33,6 @@ interface PromoCardContextType {
 const defaultPromoCardContext: PromoCardContextType = {
   state: '',
   isDisabled: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange: () => {},
 };
 

package/src/promoCard/PromoCardGroup.story.tsx

@@ -51,32 +51,20 @@ type Story = StoryObj<typeof PromoCardGroup>;
 
 export const Default: Story = {
   args: {
-    children: (
-      <>
-        <PromoCards />
-      </>
-    ),
+    children: <PromoCards />,
   },
 };
 
 export const DefaultChecked: Story = {
   args: {
-    children: (
-      <>
-        <PromoCards />
-      </>
-    ),
+    children: <PromoCards />,
     defaultChecked: 'standard',
   },
 };
 
 export const Disabled: Story = {
   args: {
-    children: (
-      <>
-        <PromoCards />
-      </>
-    ),
+    children: <PromoCards />,
     isDisabled: true,
   },
 };

package/src/promoCard/PromoCardGroup.tsx

@@ -64,7 +64,6 @@ const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
   defaultChecked = '',
   id,
   isDisabled = false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange = () => {},
   testId,
 }) => {

package/src/provider/theme/ThemeProvider.story.tsx

@@ -12,10 +12,8 @@ type Story = StoryObj<typeof ThemeProvider>;
 
 export const PlatformTheme: Story = {
   render: () => (
-    <>
-      <ThemeProvider theme="platform">
-        <Button>Button</Button>
-      </ThemeProvider>
-    </>
+    <ThemeProvider theme="platform">
+      <Button>Button</Button>
+    </ThemeProvider>
   ),
 };

package/src/select/Select.spec.tsx

@@ -31,7 +31,6 @@ describe('Select', () => {
   beforeEach(() => {
     global.requestAnimationFrame = (callback) => setTimeout(callback, 16);
 
-    // eslint-disable-next-line jest/prefer-spy-on
     Element.prototype.scrollIntoView = mockScrollIntoView;
 
     enableDesktopScreen();

package/src/select/Select.tsx

@@ -448,12 +448,10 @@ export default function Select({
     );
   }
 
-  // eslint-disable-next-line react/prop-types
   function SeparatorOption() {
     return <li className={s('np-separator')} aria-hidden />;
   }
 
-  // eslint-disable-next-line react/prop-types
   function HeaderOption({ children }: { children?: React.ReactNode }) {
     return (
       <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
@@ -500,7 +498,6 @@ export default function Select({
       : createSelectHandlerForOption(selectOption);
 
     return (
-      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
       <li
         ref={isFocusedWithKeyboard ? keyboardFocusedReference : undefined}
         key={index}

package/src/select/option/Option.spec.js

@@ -17,12 +17,12 @@ describe('option', () => {
 
   it('renders the given small note', () => {
     component.setProps({ note: 'whadup' });
-    expect(component.find(Body).last().props().children).toStrictEqual('whadup');
+    expect(component.find(Body).last().props().children).toBe('whadup');
   });
 
   it('renders the given secondary text in a separate line', () => {
     component.setProps({ secondary: 'secondary text' });
-    expect(component.find(Body).last().props().children).toStrictEqual('secondary text');
+    expect(component.find(Body).last().props().children).toBe('secondary text');
   });
 
   it('renders a given icon', () => {

package/src/selectOption/SelectOption.story.tsx

@@ -175,8 +175,8 @@ export const Basic: Story = {
     options: balances,
   },
   render: (args: SelectOptionProps) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selected, setSelected] = useState<SelectOptionValue | undefined>(undefined);
+
     function onChange(value: SelectOptionValue): void {
       setSelected(value);
     }
@@ -194,7 +194,6 @@ export const Basic: Story = {
 
 export const Variants: Story = {
   render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selected, setSelected] = useState<SelectOptionValue<CustomData>>({
       ...paymentMethods[1].options[1],
       content: null,

package/src/slidingPanel/SlidingPanel.story.tsx

@@ -17,7 +17,7 @@ export const Basic = () => {
 
   return (
     <>
-      <Button style={{ marginTop: 80 }} onClick={() => setOpen(!open)}>
+      <Button v2 style={{ marginTop: 80 }} onClick={() => setOpen(!open)}>
         Open Sliding Panel
       </Button>
       <SlidingPanel open={open} position={position}>

package/src/table/Table.tsx

@@ -113,7 +113,6 @@ const Table = ({
           'np-table-outer-container--center': !fullWidth,
           'np-table-outer-container--full-width': fullWidth,
         })}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
         data-testid="np-table-outer-container"
       >

package/src/test-utils/jest.setup.ts

@@ -7,7 +7,6 @@ import fetchMock from 'jest-fetch-mock';
 
 global.fetch = fetchMock as unknown as typeof global.fetch;
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
 Enzyme.configure({ adapter: new Adapter() });
 
 global.requestAnimationFrame = (callback: (time: number) => void): number => {

package/src/tooltip/Tooltip.tsx

@@ -98,7 +98,6 @@ const Tooltip = ({
           open ? `np-panel--open np-tooltip--open` : null,
           className,
         )}
-        // eslint-disable-next-line react/forbid-dom-props
         style={{ ...styles.popper }}
         {...attributes.popper}
         aria-hidden={!open}
@@ -111,7 +110,6 @@ const Tooltip = ({
             // @ts-expect-error
             ref={setArrowElement}
             className={clsx('np-panel__arrow')}
-            // eslint-disable-next-line react/forbid-dom-props
             style={styles.arrow}
           />
         </div>

package/src/typeahead/Typeahead.story.tsx

@@ -7,6 +7,8 @@ import { Size } from '../common';
 import { useState } from 'react';
 import { Input } from '../inputs/Input';
 import { Field } from '../field/Field';
+import Button from '../button';
+import Modal from '../modal';
 
 type Story = StoryObj<typeof Typeahead>;
 
@@ -231,3 +233,47 @@ export const Search: Story = {
     );
   },
 };
+
+export const AutoFocusInModal: Story = {
+  render: function Render() {
+    const [open, setOpen] = useState<boolean>(true);
+    return (
+      <>
+        <Button v2 onClick={() => setOpen(true)}>
+          Open Modal
+        </Button>
+        <Modal
+          title="Global Search"
+          body={
+            <Typeahead
+              id="typeahead"
+              name="search-input"
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus
+              size="md"
+              showSuggestions
+              showNewEntry={false}
+              addon={<SearchIcon size={24} />}
+              options={[
+                { label: 'Option 1' },
+                { label: 'Option 2' },
+                { label: 'Option 3' },
+                { label: 'Option 4' },
+              ]}
+              inputAutoComplete="off"
+              onSearch={(search) => {
+                console.log(search);
+              }}
+              onChange={(option) => {}}
+              onBlur={() => {}}
+            />
+          }
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+        />
+      </>
+    );
+  },
+};

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -46,7 +46,10 @@ export default class TypeaheadInput<T> extends Component<
   componentDidMount() {
     const { autoFocus } = this.props;
     if (autoFocus) {
-      this.inputRef.current?.focus();
+      // Autofocus after context code executions (e.g open Modal) is completed
+      setTimeout(() => {
+        this.inputRef.current?.focus();
+      });
     }
   }
 

package/src/upload/Upload.events.spec.js

@@ -31,19 +31,19 @@ describe('Upload (events)', () => {
 
     it('increments dragCounter on dragenter', () => {
       component.find('.droppable').simulate('dragenter', new Event('event'));
-      expect(component.instance().dragCounter).toStrictEqual(1);
+      expect(component.instance().dragCounter).toBe(1);
     });
 
     it('decrements dragCounter on dragleave', () => {
       component.find('.droppable').simulate('dragleave', new Event('event'));
-      expect(component.instance().dragCounter).toStrictEqual(-1);
+      expect(component.instance().dragCounter).toBe(-1);
     });
 
     it('reset dragCounter on drop', () => {
       component.find('.droppable').simulate('dragenter', new Event('event'));
-      expect(component.instance().dragCounter).toStrictEqual(1);
+      expect(component.instance().dragCounter).toBe(1);
       component.find('.droppable').simulate('drop', new Event('event'));
-      expect(component.instance().dragCounter).toStrictEqual(0);
+      expect(component.instance().dragCounter).toBe(0);
     });
   });
 });

package/src/upload/steps/completeStep/completeStep.tsx

@@ -49,7 +49,7 @@ export default function CompleteStep({
           )}
         </div>
         {csButtonText && (
-          <Button className="m-t-1" onClick={onClear}>
+          <Button v2 className="m-t-1" onClick={onClear}>
             {csButtonText}
           </Button>
         )}

package/src/upload/steps/processingStep/processingStep.tsx

@@ -43,7 +43,7 @@ export default function ProcessingStep({
           {psProcessingText}
         </Title>
         {psButtonText && (
-          <Button disabled={psButtonDisabled} onClick={onClear}>
+          <Button v2 disabled={psButtonDisabled} onClick={onClear}>
             {psButtonText}
           </Button>
         )}

package/src/withId/story/source.tsx

@@ -7,7 +7,7 @@ type DescribedButtonWithIdProps = WithIdProps<DescribedButtonProps>;
 function DescribedButton({ id }: DescribedButtonWithIdProps) {
   return (
     <>
-      <Button aria-describedby={id}>Continue</Button>
+      <Button v2 aria-describedby={id}>Continue</Button>
 
       <p id={id} className="text-xs-center m-t-2">
         Enter an amount in either GBP or PLN

package/src/withId/withId.story.tsx

@@ -9,7 +9,9 @@ type DescribedButtonWithIdProps = WithIdProps<DescribedButtonProps>;
 function CustomButton({ id }: DescribedButtonWithIdProps) {
   return (
     <>
-      <Button aria-describedby={id}>Continue</Button>
+      <Button v2 aria-describedby={id}>
+        Continue
+      </Button>
 
       <p id={id} className="text-xs-center m-t-2">
         Enter an amount in either GBP or PLN