@transferwise/components 0.0.0-experimental-303fd87 → 0.0.0-experimental-1aabc72

package/src/inputs/_BottomSheet.tsx

@@ -10,7 +10,7 @@ import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, useState } from 'react';
 
 import { CloseButton } from '../common/closeButton';
 import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
@@ -33,19 +33,6 @@ export interface BottomSheetProps {
   onCloseEnd?: () => void;
 }
 
-/**
- * App pages set scroll-behavior to 'smooth' which causes mobile Safari to
- * slow-scroll and glitch. This function temporarily disables that behaviour
- * while the BottomSheet is open.
- */
-const freezeScroll = (shouldFreeze = true) => {
-  if (shouldFreeze) {
-    document.documentElement.classList.add('wds-select-input-scroll-freeze');
-  } else {
-    document.documentElement.classList.remove('wds-select-input-scroll-freeze');
-  }
-};
-
 export function BottomSheet({
   open,
   renderTrigger,
@@ -67,10 +54,6 @@ export function BottomSheet({
     },
   });
 
-  useEffect(() => {
-    freezeScroll(open);
-  }, [open]);
-
   const dismiss = useDismiss(context);
   const role = useRole(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);

package/src/main.css

@@ -3519,73 +3519,48 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
-.wds-select-input-scroll-freeze {
-  scroll-behavior: unset !important;
-  height: 100vh;
-}
-.wds-select-input-scroll-freeze body {
-  height: 100vh;
-}
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
 }
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0px);
-  background-color: rgba(55, 81, 126, 0.4);
+  inset: 0px;
+  background-color: #37517e;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  min-height: 100vh;
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.np-bottom-sheet-v2-backdrop {
-  background-color: color-mix(in srgb, var(--color-content-primary) 40%, transparent);
-}
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0);
-  margin-top: 64px;
-  margin-top: var(--size-64);
+  inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
   margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: calc(100vh - 64px - 40px);
-  height: calc(100vh - var(--size-64) - 40px);
-}
-.np-bottom-sheet-v2:after {
-  content: '';
-  position: fixed;
-  bottom: -74px;
-  width: 100%;
-  background: #ffffff;
-  background: var(--color-background-elevated);
-  height: 32px;
-  z-index: 1500;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  border-top-left-radius: var(--size-32);
+  /* TODO: Tokenize */
   border-top-right-radius: 32px;
-  border-top-right-radius: var(--size-32);
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/src/moneyInput/MoneyInput.spec.tsx

@@ -419,6 +419,20 @@ describe('Money Input', () => {
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
   });
 
+  it('focuses money input when `Field` label is clicked', async () => {
+    const label = 'Recipient gets';
+
+    render(
+      <Field label={label}>
+        <MoneyInput {...initialProps} />
+      </Field>,
+    );
+
+    const input = screen.getByRole('textbox');
+    await userEvent.click(screen.getByLabelText(label));
+    expect(input).toHaveFocus();
+  });
+
   describe('ids', () => {
     it('renders Select component with generated id when id is not provided', () => {
       customRender();

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

@@ -314,4 +314,36 @@ describe('PhoneNumberInput', () => {
     );
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Phone number/);
   });
+
+  it('focuses country code input when `Field` label is clicked', async () => {
+    const label = 'Phone number';
+
+    render(
+      <Field label={label}>
+        <PhoneNumberInput initialValue="+12345678" onChange={() => {}} />
+      </Field>,
+    );
+
+    await userEvent.click(screen.getByText(label, { selector: 'label:not(.sr-only)' })); // Have to use `getByText` due to the way `Field` handles group labelling
+    const countryCodeFilterInput = screen.getByRole('combobox');
+    expect(countryCodeFilterInput).toHaveFocus();
+  });
+
+  it('focuses number input when `Field` label is clicked and country code is disabled', async () => {
+    const label = 'Phone number';
+
+    render(
+      <Field label={label}>
+        <PhoneNumberInput
+          initialValue="+12345678"
+          selectProps={{ disabled: true }}
+          onChange={() => {}}
+        />
+      </Field>,
+    );
+
+    const phoneNumberInput = screen.getByRole('textbox');
+    await userEvent.click(screen.getByText(label, { selector: 'label:not(.sr-only)' })); // Have to use `getByText` due to the way `Field` handles group labelling
+    expect(phoneNumberInput).toHaveFocus();
+  });
 });

package/src/common/bottomSheet/BottomSheet.test.story.tsx

@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
-import { lorem100, lorem500 } from '../../test-utils';
-import { Typography } from '../propsValues/typography';
-import Alert from '../../alert';
-import Body from '../../body';
-import Button from '../../button';
-import Title from '../../title';
-import BottomSheet from './BottomSheet';
-
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-export default {
-  component: BottomSheet,
-  title: 'Dialogs/BottomSheet/tests',
-  tags: ['!autodocs'],
-  args: {
-    open: false,
-  },
-} satisfies Meta<typeof BottomSheet>;
-
-type Story = StoryObj<typeof BottomSheet>;
-
-/**
- * This test ensures that when the SelectInput is used within a scrollable page,
- * opening the dropdown does not cause any unwanted scrolling or layout shifts.
- * Expected preview should start with green bar at the top, with yellow section
- * not in the viewport.
- *
- * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
- */
-export const SmoothScrollReset: Story = {
-  args: {
-    children: (
-      <>
-        <Title type={Typography.TITLE_SECTION}>Observe the document</Title>
-        <Alert className="m-t-2" type="warning">
-          Once the <code>BottomSheet</code> opens, the document underneath should be static and
-          should not scroll.
-        </Alert>
-        <Body as="p">{lorem100}</Body>
-        <Body as="p">{lorem100}</Body>
-      </>
-    ),
-  },
-  decorators: [
-    (Story) => (
-      <>
-        <style>{'html { scroll-behavior: smooth; }'}</style>
-        <div style={{ maxWidth: 500 }}>
-          <Body>
-            <p>{lorem100}</p>
-            <p>{lorem100}</p>
-          </Body>
-          <Story />
-          <Body as="p" className="m-t-5 disabled">
-            {lorem500}
-          </Body>
-        </div>
-      </>
-    ),
-  ],
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-  play: async ({ canvasElement }) => {
-    document.documentElement.scrollTop = 400;
-    await wait(500);
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-  render: ({ open, ...args }) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-      <div>
-        <Button onClick={() => setIsOpen(true)}>Open BottomSheet</Button>
-        <BottomSheet
-          {...args}
-          open={isOpen}
-          onClose={() => {
-            setIsOpen(false);
-          }}
-        />
-      </div>
-    );
-  },
-};

package/src/inputs/SelectInput.test.story.tsx

@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn, type Mock, userEvent, within } from 'storybook/test';
-import { allModes } from '../../.storybook/modes';
-import { lorem5, lorem500 } from '../test-utils';
-import { Field } from '../field/Field';
-import Body from '../body';
-import { SelectInput, type SelectInputProps } from './SelectInput';
-
-const meta = {
-  title: 'Forms/SelectInput/tests',
-  component: SelectInput,
-  args: {
-    onFilterChange: fn() satisfies Mock,
-    onChange: fn() satisfies Mock,
-    onClose: fn() satisfies Mock,
-    onOpen: fn() satisfies Mock,
-  },
-  tags: ['!autodocs'],
-} satisfies Meta<typeof SelectInput>;
-export default meta;
-
-type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
-
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-/**
- * This test ensures that when the SelectInput is used within a scrollable page,
- * opening the dropdown does not cause any unwanted scrolling or layout shifts.
- * Expected preview should start with green bar at the top, with yellow section
- * not in the viewport.
- *
- * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
- */
-export const SmoothScrollReset: Story<string> = {
-  args: {
-    items: Array.from({ length: 15 }).map((_, id) => ({
-      type: 'option',
-      value: `option ${id + 1}`,
-    })),
-    placeholder: 'Select option',
-  },
-  decorators: [
-    (Story) => (
-      <>
-        <style>{`html { scroll-behavior: smooth; }`}</style>
-        <div>
-          <div
-            className="d-flex align-items-center justify-content-center"
-            style={{
-              backgroundColor: 'var(--color-bright-yellow)',
-              height: 400,
-            }}
-          >
-            This block should not be in the viewport.
-          </div>
-          <div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
-          <Field id="el1" label={lorem5}>
-            <Story />
-          </Field>
-          <Body as="p">{lorem500}</Body>
-        </div>
-      </>
-    ),
-  ],
-  play: async ({ canvasElement }) => {
-    document.documentElement.scrollTop = 400;
-    await wait();
-    const canvas = within(canvasElement);
-    const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
-  },
-  globals: {
-    viewport: { value: allModes.largeMobile.viewport, isRotated: false },
-  },
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};

package/src/moneyInput/MoneyInput.test.story.tsx

@@ -1,101 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn, type Mock, userEvent, within } from 'storybook/test';
-import { allModes } from '../../.storybook/modes';
-import { lorem500 } from '../test-utils';
-import { Field } from '../field/Field';
-import Body from '../body';
-import MoneyInput from './MoneyInput';
-
-const meta = {
-  title: 'Forms/MoneyInput/tests',
-  component: MoneyInput,
-  args: {
-    amount: 1000,
-    id: 'moneyInput',
-    currencies: [
-      {
-        value: 'EUR',
-        label: 'EUR',
-        note: 'Euro',
-        currency: 'eur',
-        searchable: 'Spain, Germany, France, Austria',
-      },
-      {
-        value: 'GBP',
-        label: 'GBP',
-        note: 'British pound',
-        currency: 'gbp',
-        searchable: 'England, Scotland, Wales',
-      },
-    ],
-    selectedCurrency: {
-      value: 'EUR',
-      label: 'EUR',
-      note: 'Euro',
-      currency: 'eur',
-      searchable: 'Spain, Germany, France, Austria',
-    },
-    searchPlaceholder: '',
-    onAmountChange: () => {},
-    onCurrencyChange: () => {},
-  },
-  tags: ['!autodocs'],
-} satisfies Meta<typeof MoneyInput>;
-export default meta;
-
-type Story = StoryObj<typeof MoneyInput>;
-
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-/**
- * This test ensures that when the SelectInput is used within a scrollable page,
- * opening the dropdown does not cause any unwanted scrolling or layout shifts.
- * Expected preview should start with green bar at the top, with yellow section
- * not in the viewport.
- *
- * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
- */
-export const SmoothScrollReset: Story = {
-  decorators: [
-    (Story) => (
-      <>
-        <style>{`html { scroll-behavior: smooth; }`}</style>
-        <div>
-          <div
-            className="d-flex align-items-center justify-content-center"
-            style={{
-              backgroundColor: 'var(--color-bright-yellow)',
-              height: 400,
-            }}
-          >
-            This block should not be in the viewport.
-          </div>
-          <div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
-          <Field id="el1" label="Select currency">
-            <Story />
-          </Field>
-          <Body as="p">{lorem500}</Body>
-        </div>
-      </>
-    ),
-  ],
-  play: async ({ canvasElement }) => {
-    await wait(2000);
-    document.documentElement.scrollTop = 400;
-    await wait(2000);
-    const canvas = within(canvasElement);
-    const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
-  },
-  globals: {
-    viewport: { value: allModes.largeMobile.viewport, isRotated: false },
-  },
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};