@transferwise/components 46.42.0 → 46.43.0

package/src/circularButton/CircularButton.story.tsx

@@ -1,97 +1,66 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
-import { Freeze, Plus, Whatsapp } from '@transferwise/icons';
+import * as Icons from '@transferwise/icons';
 
-import { Priority, ControlType } from '../common';
+import { ControlType, Priority } from '../common';
 
+import { Meta, StoryObj } from '@storybook/react';
 import CircularButton from './CircularButton';
 
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
-};
+  args: {
+    children: 'Button text',
+    // Needs to be cast because we're mapping icon names to components
+    icon: 'Freeze' as unknown as React.ReactElement,
+  },
+  argTypes: {
+    icon: {
+      options: Object.keys(Icons),
+      mapping: Object.fromEntries(
+        Object.entries(Icons).map(([name, Icon]) => [name, <Icon key={name} />]),
+      ),
+    },
+  },
+} satisfies Meta<typeof CircularButton>;
 
-const icons = {
-  plus: <Plus />,
-  freeze: <Freeze />,
-  whatsapp: <Whatsapp />,
-};
+type Story = StoryObj<typeof CircularButton>;
 
-export const Basic = () => {
-  const icon = select('icon', ['freeze', 'plus', 'whatsapp'], 'freeze');
-  const priority = select('priority', [Priority.PRIMARY, Priority.SECONDARY], Priority.PRIMARY);
-  const type = select('type', Object.values(ControlType), ControlType.ACCENT);
-  const disabled = boolean('disabled', false);
-  const label = text('label', 'Button text');
-  const background = select('theme', ['light', 'blue'], 'light');
-  return (
-    <div className={background === 'blue' ? 'bg--dark p-a-3' : ''}>
-      <CircularButton
-        icon={icons[icon]}
-        priority={priority}
-        type={type}
-        disabled={disabled}
-        onClick={action('Button Clicked')}
-      >
-        {label}
-      </CircularButton>
-    </div>
-  );
+export const Basic: Story = {
+  args: {
+    priority: Priority.PRIMARY,
+    type: ControlType.ACCENT,
+    disabled: false,
+  },
 };
 
-export const deprecated = () => {
-  const icon = select('icon', ['freeze', 'plus', 'whatsapp'], 'freeze');
-  const disabled = boolean('disabled', false);
-  const label = text('label', 'Button text');
-  const background = select('theme', ['light', 'blue'], 'light');
-
-  const commonProps = {
-    label,
+export const All: Story = {
+  args: {
     className: 'm-r-2',
-    disabled,
-    icon: icons[icon],
-    onClick: action('Button Clicked'),
-  };
-
-  return (
-    <div className={background === 'blue' ? 'bg--dark p-a-3' : ''}>
-      <div className="m-b-2">
-        <div className="title-4 m-b-1">Accent</div>
-        <CircularButton priority={Priority.PRIMARY} type={ControlType.ACCENT} {...commonProps}>
-          {label}
-        </CircularButton>
-        <CircularButton priority={Priority.SECONDARY} type={ControlType.ACCENT} {...commonProps}>
-          {label}
-        </CircularButton>
-      </div>
-      <div className="m-b-2">
-        <div className="title-4 m-b-1">Positive</div>
-        <CircularButton priority={Priority.PRIMARY} type={ControlType.POSITIVE} {...commonProps}>
-          {label}
-        </CircularButton>
-
-        <CircularButton priority={Priority.SECONDARY} type={ControlType.POSITIVE} {...commonProps}>
-          {label}
-        </CircularButton>
-      </div>
-      <div className="m-b-2">
-        <div className="title-4 m-b-1">Negative</div>
-        <CircularButton priority={Priority.PRIMARY} type={ControlType.NEGATIVE} {...commonProps}>
-          {label}
-        </CircularButton>
-        <CircularButton priority={Priority.SECONDARY} type={ControlType.NEGATIVE} {...commonProps}>
-          {label}
-        </CircularButton>
-      </div>
-      <div className="m-b-2">
-        <div className="title-4 m-b-1">Disabled</div>
-        <CircularButton {...commonProps} disabled>
-          {label}
-        </CircularButton>
-        <CircularButton {...commonProps} priority={Priority.SECONDARY} disabled>
-          {label}
-        </CircularButton>
-      </div>
-    </div>
-  );
+  },
+  render: (props) => {
+    return (
+      <>
+        <div className="m-b-2">
+          <div className="title-4 m-b-1">Accent</div>
+          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
+          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
+        </div>
+        <div className="m-b-2">
+          <div className="title-4 m-b-1">Positive</div>
+          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
+          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
+        </div>
+        <div className="m-b-2">
+          <div className="title-4 m-b-1">Negative</div>
+          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
+          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
+        </div>
+        <div className="m-b-2">
+          <div className="title-4 m-b-1">Disabled</div>
+          <CircularButton {...props} disabled />
+          <CircularButton {...props} priority={Priority.SECONDARY} disabled />
+        </div>
+      </>
+    );
+  },
 };

package/src/common/hooks/useVirtualKeyboard.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+/**
+ * This progressive enhancement uses an experimental API, it might change, 
+ * and at the time of authoring is not supported on iOS or mobile Firefox.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
+ */
+export function useVirtualKeyboard() {
+  useEffect(() => {
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
+    if ('virtualKeyboard' in navigator) {
+      const virtualKeyboard: any = navigator.virtualKeyboard;
+      const initialOverlaysContent: unknown = virtualKeyboard.overlaysContent;
+      virtualKeyboard.overlaysContent = true;
+      return () => {
+        virtualKeyboard.overlaysContent = initialOverlaysContent;
+      };
+    }
+    /* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
+  }, []);
+}

package/src/inputs/InputGroup.spec.tsx

@@ -0,0 +1,26 @@
+import { Search } from '@transferwise/icons';
+
+import { Field } from '../field/Field';
+import { mockResizeObserver, render, screen } from '../test-utils';
+import { Input } from './Input';
+import { InputGroup } from './InputGroup';
+
+mockResizeObserver();
+
+describe('InputGroup', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Search…">
+        <InputGroup
+          addonStart={{
+            content: <Search size={24} />,
+            initialContentWidth: 24,
+          }}
+        >
+          <Input />
+        </InputGroup>
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Search…/);
+  });
+});

package/src/inputs/InputGroup.tsx

@@ -3,6 +3,13 @@ import { createContext, useContext, useMemo, useRef, useState } from 'react';
 
 import { useResizeObserver } from '../common/hooks/useResizeObserver';
 import { cssValueWithUnit } from '../utilities/cssValueWithUnit';
+import {
+  FieldLabelIdContextProvider,
+  InputDescribedByProvider,
+  InputIdContextProvider,
+  InputInvalidProvider,
+  useInputAttributes,
+} from './contexts';
 
 type InputPaddingContextType = [
   number | string | undefined,
@@ -60,23 +67,38 @@ export function InputGroup({
   className,
   children,
 }: InputGroupProps) {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
   const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
 
   return (
-    <InputPaddingStartContext.Provider
-      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
-    >
-      <InputPaddingEndContext.Provider
-        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
-      >
-        <fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>
-          {addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
-          {children}
-          {addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
-        </fieldset>
-      </InputPaddingEndContext.Provider>
-    </InputPaddingStartContext.Provider>
+    /* Prevent nested controls from being labeled redundantly */
+    <FieldLabelIdContextProvider value={undefined}>
+      <InputIdContextProvider value={undefined}>
+        <InputDescribedByProvider value={undefined}>
+          <InputInvalidProvider value={undefined}>
+            <InputPaddingStartContext.Provider
+              value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
+            >
+              <InputPaddingEndContext.Provider
+                value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
+              >
+                <fieldset
+                  {...inputAttributes}
+                  disabled={disabled}
+                  className={classNames(className, 'np-input-group')}
+                >
+                  {addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
+                  {children}
+                  {addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
+                </fieldset>
+              </InputPaddingEndContext.Provider>
+            </InputPaddingStartContext.Provider>
+          </InputInvalidProvider>
+        </InputDescribedByProvider>
+      </InputIdContextProvider>
+    </FieldLabelIdContextProvider>
   );
 }
 

package/src/inputs/SearchInput.spec.tsx

@@ -0,0 +1,16 @@
+import { Field } from '../field/Field';
+import { mockResizeObserver, render, screen } from '../test-utils';
+import { SearchInput } from './SearchInput';
+
+mockResizeObserver();
+
+describe('SearchInput', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Search…">
+        <SearchInput />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Search…/);
+  });
+});

package/src/inputs/SelectInput.css

@@ -2,67 +2,37 @@
   position: relative;
   z-index: 1060;
 }
-.np-bottom-sheet-v2-backdrop-container--enter,
-.np-bottom-sheet-v2-backdrop-container--leave {
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-.np-bottom-sheet-v2-backdrop-container--enter-from,
-.np-bottom-sheet-v2-backdrop-container--leave-to {
-  opacity: 0;
-}
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   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;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
   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;
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-top: 64px;
-  padding-top: var(--size-64);
 }
 .np-bottom-sheet-v2-content {
-  max-height: 100%;
-}
-.np-bottom-sheet-v2-content--enter,
-.np-bottom-sheet-v2-content--leave {
-  transition-property: transform;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter,
-  .np-bottom-sheet-v2-content--leave {
-    transition-property: opacity;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    transform: translateY(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    opacity: 0;
-  }
-}
-.np-bottom-sheet-v2-content-inner-container {
   display: flex;
-  height: 100%;
   flex-direction: column;
+  overflow: auto;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
   border-top-right-radius: 32px;
@@ -71,30 +41,50 @@
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content-inner-container:focus {
+.np-bottom-sheet-v2-content:focus {
   outline: none;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
   display: grid;
+  grid-template-rows: minmax(0, 1fr);
   grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  overflow: auto;
 }
 .np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
+  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;
@@ -141,10 +131,10 @@
   row-gap: 8px;
   row-gap: var(--size-8);
   overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  grid-template-rows: minmax(0, 1fr);
 }
 .np-popover-v2--has-title {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .np-popover-v2--padding-md {
   padding: 16px;

package/src/inputs/SelectInput.spec.tsx

@@ -214,6 +214,6 @@ describe('SelectInput', () => {
         <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
       </Field>,
     );
-    expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Currency/);
   });
 });

package/src/inputs/SelectInput.tsx

@@ -24,7 +24,7 @@ import { Merge } from '../utils';
 import { BottomSheet } from './_BottomSheet';
 import { ButtonInput } from './_ButtonInput';
 import { Popover } from './_Popover';
-import { useInputAttributes } from './contexts';
+import { useInputAttributes, WithInputAttributesProps } from './contexts';
 import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
 import messages from './SelectInput.messages';
@@ -162,6 +162,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   disabled?: boolean;
   size?: 'sm' | 'md' | 'lg';
   className?: string;
+  UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'];
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: M extends true ? T[] : T) => void;
   onClose?: () => void;
@@ -246,6 +247,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   disabled,
   size = 'md',
   className,
+  UNSAFE_triggerButtonProps,
   onFilterChange = noop,
   onChange,
   onClose,
@@ -321,6 +323,7 @@ export function SelectInput<T = string, M extends boolean = false>({
                     triggerRef.current = node;
                   },
                   ...inputAttributes,
+                  ...UNSAFE_triggerButtonProps,
                   id,
                   ...mergeProps(
                     {

package/src/inputs/_BottomSheet.less

@@ -3,98 +3,84 @@
   z-index: 1060;
 }
 
-.np-bottom-sheet-v2-backdrop-container {
-  &--enter, &--leave {
-    transition-property: opacity;
-    transition-timing-function: ease-out;
-    transition-duration: 300ms;
-  }
-
-  &--enter-from, &--leave-to {
-    opacity: 0;
-  }
-}
-
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: var(--color-content-primary);
   opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+
+  &--closed {
+    opacity: 0;
+  }
 }
 
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
+  margin-left: var(--size-8);
+  margin-right: var(--size-8);
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-left: var(--size-8);
-  padding-right: var(--size-8);
-  padding-top: var(--size-64);
 }
 
 .np-bottom-sheet-v2-content {
-  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  border-top-left-radius: 32px; /* TODO: Tokenize */
+  border-top-right-radius: 32px; /* TODO: Tokenize */
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
+
+  &:focus {
+    outline: none;
+  }
 
-  &--enter, &--leave {
+  @media (prefers-reduced-motion: no-preference) {
     transition-property: transform;
     transition-timing-function: ease-out;
     transition-duration: 300ms;
 
-    @media (prefers-reduced-motion: reduce) {
-      & {
-        transition-property: opacity;
-      }
+    &--closed {
+      transform: translateY(100%);
     }
   }
 
-  &--enter-from, &--leave-to {
-    @media (prefers-reduced-motion: no-preference) {
-      & {
-        transform: translateY(100%);
-      }
-    }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
 
-    @media (prefers-reduced-motion: reduce) {
-      & {
-        opacity: 0;
-      }
+    &--closed {
+      opacity: 0;
     }
   }
 }
 
-.np-bottom-sheet-v2-content-inner-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  border-top-left-radius: 32px; /* TODO: Tokenize */
-  border-top-right-radius: 32px; /* TODO: Tokenize */
-  background-color: var(--color-background-elevated);
-  box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
-
-  &:focus {
-    outline: none;
-  }
-}
-
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: var(--size-16);
 }
 
 .np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
   display: grid;
+  grid-template-rows: minmax(0, 1fr);
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  overflow: auto;
 
   &--has-title {
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
   }
 
   &--padding-md {
     padding: var(--size-16);
+    padding-top: 0px;
   }
 }