@transferwise/components 0.0.0-experimental-4658255 → 0.0.0-experimental-07a2614

package/src/inputs/_BottomSheet.less

@@ -1,3 +1,12 @@
+.wds-select-input-scroll-freeze {
+  scroll-behavior: unset !important;
+  height: 100vh;
+
+  body{
+    height: 100vh;
+  }
+}
+
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
@@ -11,6 +20,8 @@
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
+  will-change: transform;
+  min-height: 100vh;
 
   &--closed {
     opacity: 0;
@@ -20,23 +31,25 @@
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(keyboard-inset-height, 0px);
+  bottom: env(safe-area-inset-bottom, 0);
   margin-left: var(--size-8);
   margin-right: var(--size-8);
   margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  height: calc(100vh - var(--size-64) - 40px);
 }
 
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-top-left-radius: 32px; /* TODO: Tokenize */
-  border-top-right-radius: 32px; /* TODO: Tokenize */
+  border-radius: var(--size-32);
+  margin-bottom: var(--size-8);
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
+  will-change: transform;
 
   &:focus {
     outline: none;

package/src/inputs/_BottomSheet.tsx

@@ -10,12 +10,11 @@ import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 
-import { CloseButton } from '../common/closeButton';
+import { CloseButton , Size } from '../common';
 import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
-import { Size } from '../common/propsValues/size';
 
 export interface BottomSheetProps {
   open: boolean;
@@ -33,6 +32,19 @@ 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. It complements <PreventScroll />.
+ */
+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,
@@ -54,6 +66,10 @@ 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

@@ -3524,6 +3524,13 @@ 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;
@@ -3537,6 +3544,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
+  will-change: transform;
+  min-height: 100vh;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
@@ -3544,7 +3553,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(keyboard-inset-height, 0px);
+  bottom: env(safe-area-inset-bottom, 0);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
@@ -3554,18 +3563,21 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-top-left-radius: 32px;
-  /* TODO: Tokenize */
-  border-top-right-radius: 32px;
-  /* TODO: Tokenize */
+  border-radius: 32px;
+  border-radius: var(--size-32);
+  margin-bottom: 8px;
+  margin-bottom: var(--size-8);
   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.test.story.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { 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();
+    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,
+    },
+  },
+};