@transferwise/components 0.0.0-experimental-db313a8 → 0.0.0-experimental-d44d661

package/src/dateInput/DateInput.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../body';
@@ -19,7 +19,7 @@ import {
   Typography,
 } from '../common';
 import { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
-import { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';
+import { useInputAttributes } from '../inputs/contexts';
 import messages from './DateInput.messages';
 import { convertToLocalMidnight } from './utils';
 
@@ -31,8 +31,8 @@ export interface DateInputProps {
   size?: SizeSmall | SizeMedium | SizeLarge;
   value?: Date | string;
   onChange: (value: string | null) => void;
-  onFocus?: React.FocusEventHandler<HTMLFieldSetElement>;
-  onBlur?: React.FocusEventHandler<HTMLFieldSetElement>;
+  onFocus?: React.FocusEventHandler<HTMLDivElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
   dayLabel?: string;
   dayAutoComplete?: string;
   monthLabel?: string;
@@ -75,10 +75,6 @@ const DateInput = ({
   selectProps = {},
 }: DateInputProps) => {
   const inputAttributes = useInputAttributes({ nonLabelable: true });
-  const fieldLabelRef = useFieldLabelRef();
-  const dayRef = useRef<HTMLInputElement>(null);
-  const monthRef = useRef<HTMLButtonElement>(null);
-  const yearRef = useRef<HTMLInputElement>(null);
   const id = idProp ?? inputAttributes.id;
   const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
 
@@ -125,10 +121,6 @@ const DateInput = ({
   );
   const monthNames = getMonthNames(locale, monthFormat);
 
-  const monthYearOnly = mode === DateMode.MONTH_YEAR;
-  const monthBeforeDay = MDY.has(locale);
-  const yearFirst = YMD.has(locale);
-
   dayLabel ||= formatMessage(messages.dayLabel);
   monthLabel ||= formatMessage(messages.monthLabel);
   yearLabel ||= formatMessage(messages.yearLabel);
@@ -138,29 +130,6 @@ const DateInput = ({
     year: placeholders?.year || formatMessage(messages.yearPlaceholder),
   };
 
-  useEffect(() => {
-    const labelRef = fieldLabelRef?.current;
-
-    if (labelRef) {
-      const handleLabelClick = () => {
-        // Not the best way to do this, but we're forced to recreate the native Label-click behavior
-        if (monthYearOnly || monthBeforeDay) {
-          monthRef.current?.click();
-        } else if (yearFirst) {
-          yearRef.current?.focus();
-        } else {
-          dayRef.current?.focus();
-        }
-      };
-
-      labelRef.addEventListener('click', handleLabelClick);
-
-      return () => {
-        labelRef?.removeEventListener('click', handleLabelClick);
-      };
-    }
-  }, [fieldLabelRef, id, monthBeforeDay, monthYearOnly, yearFirst]);
-
   const getDateAsString = (date: Date) => {
     if (!isDateValid(date)) {
       return '';
@@ -183,7 +152,6 @@ const DateInput = ({
       <label className="d-flex flex-column">
         <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>
         <SelectInput
-          triggerRef={monthRef}
           id={`${id}:month`}
           parentId={DATE_INPUT_PARENT_ID}
           name="month"
@@ -277,6 +245,8 @@ const DateInput = ({
     }
   };
 
+  const monthYearOnly = mode === DateMode.MONTH_YEAR;
+
   const monthWidth = clsx({
     'col-sm-8 tw-date--month': monthYearOnly,
     'col-sm-5 tw-date--month': !monthYearOnly,
@@ -293,7 +263,6 @@ const DateInput = ({
           <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>
           <div className={`input-group input-group-${size}`}>
             <Input
-              ref={dayRef}
               id={`${id}:day`}
               type="text"
               inputMode="numeric"
@@ -321,7 +290,6 @@ const DateInput = ({
           <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>
           <div className={`input-group input-group-${size}`}>
             <Input
-              ref={yearRef}
               id={`${id}:year`}
               type="text"
               inputMode="numeric"
@@ -341,16 +309,18 @@ const DateInput = ({
       </div>
     );
   };
+  const monthBeforeDay = MDY.has(locale);
+  const yearFirst = YMD.has(locale);
 
   return (
-    <fieldset
+    <div
+      {...inputAttributes}
       id={id}
+      data-wds-dateinput=""
       className="tw-date"
-      aria-describedby={inputAttributes['aria-describedby']}
-      aria-invalid={inputAttributes['aria-invalid']}
       aria-labelledby={ariaLabelledBy}
       aria-label={ariaLabel}
-      data-wds-dateinput=""
+      role="group" // Add role attribute to indicate container for interactive elements
       onFocus={(event) =>
         shouldPropagateOnFocus(event) ? onFocus?.(event) : event.stopPropagation()
       }
@@ -394,7 +364,7 @@ const DateInput = ({
           );
         })()}
       </div>
-    </fieldset>
+    </div>
   );
 };
 

package/src/dateLookup/DateLookup.tsx

@@ -13,7 +13,7 @@ import {
 import { isWithinRange, moveToWithinRange, returnDateView } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
 import { WithInputAttributesProps, withInputAttributes } from '../inputs/contexts';
-import { OverlayIdProvider } from '../provider/overlay/OverlayIdProvider';
+import { OverlayIdContext, OverlayIdProvider } from '../provider/overlay/OverlayIdProvider';
 import DateTrigger from './dateTrigger';
 import DayCalendar from './dayCalendar';
 import { getStartOfDay } from './getStartOfDay';
@@ -319,15 +319,13 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     return (
       <div
         ref={this.element}
-        aria-labelledby={id}
-        aria-invalid={inputAttributes?.['aria-invalid']}
-        aria-describedby={inputAttributes?.['aria-describedby']}
+        {...inputAttributes}
+        id={id}
         className="input-group"
         onKeyDown={this.handleKeyDown}
       >
         <OverlayIdProvider open={open}>
           <DateTrigger
-            id={id}
             ariaLabelledBy={ariaLabelledBy}
             selectedDate={selectedDate}
             size={size}

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -21,7 +21,6 @@ interface DateTriggerProps {
   disabled: boolean;
   onClick: () => void;
   onClear?: () => void;
-  id?: string;
 }
 
 const DateTrigger: React.FC<DateTriggerProps> = ({
@@ -29,7 +28,6 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
   size = Size.MEDIUM,
   placeholder,
   label,
-  id,
   monthFormat,
   disabled,
   ariaLabelledBy,
@@ -44,7 +42,6 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
   return (
     <>
       <button
-        id={id}
         aria-haspopup="dialog"
         aria-expanded={overlayId != null}
         aria-controls={overlayId}

package/src/dimmer/Dimmer.css

@@ -1,5 +1,6 @@
 .no-scroll {
   overflow: hidden;
+  scroll-behavior: unset !important;
 }
 .dimmer {
   position: fixed;

package/src/dimmer/Dimmer.less

@@ -6,6 +6,7 @@
 // (see https://bugs.webkit.org/show_bug.cgi?id=153852 & https://bugs.webkit.org/show_bug.cgi?id=220908)
 .no-scroll {
   overflow: hidden;
+  scroll-behavior: unset !important;
 }
 
 .dimmer {

package/src/field/Field.tsx

@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
-import { useId, useRef } from 'react';
+import { useId } from 'react';
 
 import { Sentiment } from '../common';
 import InlineAlert from '../inlineAlert/InlineAlert';
 import {
-  FieldLabelContextProvider,
+  FieldLabelIdContextProvider,
   InputDescribedByProvider,
   InputIdContextProvider,
   InputInvalidProvider,
@@ -46,7 +46,6 @@ export const Field = ({
   children,
   ...props
 }: FieldProps) => {
-  const labelRef = useRef<HTMLLabelElement>(null);
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
   const message = propMessage || props.error;
   const hasError = sentiment === Sentiment.NEGATIVE;
@@ -75,7 +74,7 @@ export const Field = ({
   }
 
   return (
-    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>
+    <FieldLabelIdContextProvider value={labelId}>
       <InputIdContextProvider value={inputId}>
         <InputDescribedByProvider value={ariaDescribedbyByIds()}>
           <InputInvalidProvider value={hasError}>
@@ -93,7 +92,7 @@ export const Field = ({
             >
               {label != null ? (
                 <>
-                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>
+                  <Label id={labelId} htmlFor={inputId}>
                     {required ? label : <Label.Optional>{label}</Label.Optional>}
                   </Label>
                   <Label.Description id={descriptionId}>{description}</Label.Description>
@@ -112,6 +111,6 @@ export const Field = ({
           </InputInvalidProvider>
         </InputDescribedByProvider>
       </InputIdContextProvider>
-    </FieldLabelContextProvider>
+    </FieldLabelIdContextProvider>
   );
 };

package/src/inputs/InputGroup.tsx

@@ -4,10 +4,11 @@ import { createContext, useContext, useMemo, useRef, useState } from 'react';
 import { useResizeObserver } from '../common/hooks/useResizeObserver';
 import { cssValueWithUnit } from '../utilities/cssValueWithUnit';
 import {
-  FieldLabelContextProvider,
+  FieldLabelIdContextProvider,
   InputDescribedByProvider,
   InputIdContextProvider,
   InputInvalidProvider,
+  useInputAttributes,
 } from './contexts';
 
 type InputPaddingContextType = [
@@ -128,7 +129,7 @@ function InputAddon({
 
   return (
     /* Prevent nested controls from being labeled redundantly */
-    <FieldLabelContextProvider value={undefined}>
+    <FieldLabelIdContextProvider value={undefined}>
       <InputIdContextProvider value={undefined}>
         <InputDescribedByProvider value={undefined}>
           <InputInvalidProvider value={undefined}>
@@ -152,6 +153,6 @@ function InputAddon({
           </InputInvalidProvider>
         </InputDescribedByProvider>
       </InputIdContextProvider>
-    </FieldLabelContextProvider>
+    </FieldLabelIdContextProvider>
   );
 }

package/src/inputs/SelectInput.spec.tsx

@@ -3,13 +3,19 @@ import { userEvent } from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
+import { useScreenSize } from '../common/hooks/useScreenSize';
 import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
 import { Field } from '../field/Field';
 
 mockMatchMedia();
 mockResizeObserver();
+jest.mock('../common/hooks/useScreenSize');
 
 describe('SelectInput', () => {
+  beforeEach(() => {
+    (useScreenSize as jest.Mock).mockReturnValue(true);
+  });
+
   it('renders placeholder', () => {
     render(
       <SelectInput
@@ -309,4 +315,31 @@ describe('SelectInput', () => {
       expect(listBox).not.toHaveAttribute('aria-labelledby');
     });
   });
+
+  describe('smooth scroll reset', () => {
+    const options: SelectInputOptionItem[] = [
+      { type: 'option', value: 'Banana' },
+      { type: 'option', value: 'Orange' },
+      { type: 'option', value: 'Olive' },
+    ];
+
+    beforeEach(() => {
+      document.documentElement.style.scrollBehavior = 'smooth';
+      (useScreenSize as jest.Mock).mockReturnValue(false);
+    });
+
+    afterEach(() => {
+      document.documentElement.removeAttribute('style');
+    });
+
+    it('renders with custom scroll behavior', async () => {
+      const { container } = render(<SelectInput items={options} />);
+
+      await userEvent.click(screen.getByRole('combobox'));
+      expect(document.documentElement).toHaveStyle({ scrollBehavior: 'unset' });
+
+      await userEvent.click(document.documentElement);
+      expect(container).toHaveStyle({ scrollBehavior: '' });
+    });
+  });
 });

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

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn, type Mock, userEvent, within } from 'storybook/test';
+
+import { Field } from '../field/Field';
+import { SelectInput, type SelectInputProps } from './SelectInput';
+import { lorem5, lorem500 } from '../test-utils';
+import Body from '../body';
+import { allModes } from '../../.storybook/modes';
+
+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>>;
+
+/**
+ * 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 snapshot should start with green bar at the top, with yellow section
+ * not in the viewport
+ */
+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 style={{ maxWidth: 400 }}>
+          <div
+            className="d-flex align-items-center justify-content-center"
+            style={{ height: 400, backgroundColor: 'var(--color-bright-yellow)' }}
+          >
+            This block should not be visible on a snapshot
+          </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 }) => {
+    window.scrollTo({ top: 400, behavior: 'instant' });
+    const canvas = within(canvasElement);
+    const triggerButton = canvas.getByRole('combobox');
+    await userEvent.click(triggerButton);
+  },
+  globals: {
+    viewport: { value: allModes.largeMobile.viewport, isRotated: false },
+  },
+  parameters: {
+    chromatic: {
+      delay: 1000,
+      modes: {
+        largeMobile: allModes.largeMobile,
+      }
+    },
+  },
+};

package/src/inputs/SelectInput.tsx

@@ -181,8 +181,6 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'] & {
     'aria-label'?: string;
   };
-  /** Ref to the select trigger button element. */
-  triggerRef?: React.MutableRefObject<HTMLButtonElement | null>;
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: M extends true ? T[] : T) => void;
   onOpen?: () => void;
@@ -270,7 +268,6 @@ export function SelectInput<T = string, M extends boolean = false>({
   size = 'md',
   className,
   UNSAFE_triggerButtonProps,
-  triggerRef: externalTriggerRef,
   onFilterChange = noop,
   onChange,
   onOpen,
@@ -309,7 +306,7 @@ export function SelectInput<T = string, M extends boolean = false>({
     }
   });
 
-  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
 
   const screenSm = useScreenSize(Breakpoint.SMALL);
   const OptionsOverlay = screenSm ? Popover : BottomSheet;
@@ -377,12 +374,7 @@ export function SelectInput<T = string, M extends boolean = false>({
                 value={{
                   ref: (node) => {
                     ref(node);
-                    if (externalTriggerRef) {
-                      // eslint-disable-next-line no-param-reassign
-                      externalTriggerRef.current = node;
-                    } else {
-                      internalTriggerRef.current = node;
-                    }
+                    triggerRef.current = node;
                   },
                   ...inputAttributes,
                   ...UNSAFE_triggerButtonProps,
@@ -425,9 +417,7 @@ export function SelectInput<T = string, M extends boolean = false>({
                     onClear != null
                       ? () => {
                           onClear();
-                          (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({
-                            preventScroll: true,
-                          });
+                          triggerRef.current?.focus({ preventScroll: true });
                         }
                       : undefined,
                   disabled: uiDisabled,

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, useState, useEffect } 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.
+ */
+const freezeScroll = (shouldFreeze = true) => {
+  if (shouldFreeze) {
+    document.documentElement.style.scrollBehavior = 'unset';
+  } else {
+    document.documentElement.style.removeProperty('scroll-behavior');
+  }
+};
+
 export function BottomSheet({
   open,
   renderTrigger,
@@ -44,7 +56,6 @@ export function BottomSheet({
   onCloseEnd,
 }: BottomSheetProps) {
   useVirtualKeyboard();
-
   const { refs, context } = useFloating<Element>({
     open,
     onOpenChange: (value) => {
@@ -54,12 +65,14 @@ export function BottomSheet({
     },
   });
 
+  useEffect(() => {
+    freezeScroll(open);
+  }, [open]);
+
   const dismiss = useDismiss(context);
   const role = useRole(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);
-
   const [floatingKey, setFloatingKey] = useState(0);
-
   const { theme, screenMode } = useTheme();
 
   return (

package/src/inputs/contexts.tsx

@@ -1,12 +1,7 @@
 import { createContext, useContext } from 'react';
 
-type FieldLabelContextType = {
-  id?: string;
-  ref?: React.RefObject<HTMLLabelElement>;
-};
-
-const FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);
-export const FieldLabelContextProvider = FieldLabelContext.Provider;
+const FieldLabelIdContext = createContext<string | undefined>(undefined);
+export const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
 
 const InputIdContext = createContext<string | undefined>(undefined);
 export const InputIdContextProvider = InputIdContext.Provider;
@@ -23,7 +18,7 @@ interface UseInputAttributesArgs {
 }
 
 export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {
-  const labelId = useContext(FieldLabelContext)?.id;
+  const labelId = useContext(FieldLabelIdContext);
   return {
     id: useContext(InputIdContext),
     'aria-labelledby': nonLabelable ? labelId : undefined,
@@ -32,10 +27,6 @@ export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}
   } satisfies React.HTMLAttributes<HTMLElement>;
 }
 
-export function useFieldLabelRef() {
-  return useContext(FieldLabelContext)?.ref;
-}
-
 export interface WithInputAttributesProps {
   inputAttributes: ReturnType<typeof useInputAttributes>;
 }

package/src/label/Label.tsx

@@ -3,7 +3,7 @@ import messages from './Label.messages';
 import { useIntl } from 'react-intl';
 import Body from '../body';
 import { CommonProps } from '../common';
-import { forwardRef, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
 export type LabelProps = {
   id?: string;
@@ -21,29 +21,25 @@ export type LabelProps = {
  * <Field label={..} description={..} required={..}>..</Field>
  * ```
  */
-const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  ({ className, children, htmlFor, id }: LabelProps, ref) => {
-    return (
-      <label
-        ref={ref}
-        id={id}
-        htmlFor={htmlFor}
-        className={clsx(
-          'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',
-          className,
-        )}
-      >
-        {children}
-      </label>
-    );
-  },
-);
-
-Label.displayName = 'Label';
+const Label = ({ className, children, htmlFor, id }: LabelProps) => {
+  return (
+    <label
+      id={id}
+      htmlFor={htmlFor}
+      className={clsx(
+        'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',
+        className,
+      )}
+    >
+      {children}
+    </label>
+  );
+};
 
 export type LabelOptionalProps = PropsWithChildren<CommonProps>;
 
-const Optional = function Optional({ children, className }: LabelOptionalProps) {
+// eslint-disable-next-line functional/immutable-data
+Label.Optional = function Optional({ children, className }: LabelOptionalProps) {
   const { formatMessage } = useIntl();
   return (
     <div>
@@ -57,7 +53,8 @@ const Optional = function Optional({ children, className }: LabelOptionalProps)
 
 export type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };
 
-const Description = function Description({ id, children, className }: LabelDescriptionProps) {
+// eslint-disable-next-line functional/immutable-data
+Label.Description = function Description({ id, children, className }: LabelDescriptionProps) {
   return children ? (
     <Body id={id} className={clsx('text-secondary', className)}>
       {children}
@@ -65,7 +62,4 @@ const Description = function Description({ id, children, className }: LabelDescr
   ) : null;
 };
 
-// eslint-disable-next-line functional/immutable-data
-const LabelNamespace = Object.assign(Label, { Optional, Description });
-
-export { LabelNamespace as Label };
+export { Label };

package/src/main.css

@@ -2081,6 +2081,7 @@ button.np-option {
 }
 .no-scroll {
   overflow: hidden;
+  scroll-behavior: unset !important;
 }
 .dimmer {
   position: fixed;

package/src/moneyInput/MoneyInput.spec.tsx

@@ -406,7 +406,7 @@ describe('Money Input', () => {
       </>,
     );
 
-    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('np-form-control');
+    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
   });
 
   it('supports `Field` for labeling', () => {
@@ -415,7 +415,6 @@ describe('Money Input', () => {
         <MoneyInput {...initialProps} />
       </Field>,
     );
-
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
   });