@transferwise/components 46.130.2 → 46.131.0

package/src/info/Info.story.tsx

@@ -1,9 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
-
 import { lorem10 } from '../test-utils';
-
-import Info, { InfoPresentation } from '.';
+import Info from '.';
 import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta = {
@@ -14,7 +11,6 @@ const meta = {
     title: 'Fast transfer hint',
     content: lorem10,
   },
-
   render: (args) => (
     <p>
       <span>Fast transfer</span> <Info {...args} />
@@ -29,32 +25,3 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   ...withVariantConfig(['default', 'dark', 'rtl']),
 };
-
-export const OpenedPopover = {
-  parameters: {
-    chromatic: {
-      delay: 1000,
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-} satisfies Story;
-
-export const OpenedPopoverMobile: Story = {
-  ...OpenedPopover,
-  ...withVariantConfig(['mobile'], OpenedPopover),
-};
-
-export const OpenedModal = {
-  ...OpenedPopover,
-  args: {
-    presentation: InfoPresentation.MODAL,
-  },
-} satisfies Story;
-
-export const OpenedModalMobile: Story = {
-  ...OpenedModal,
-  ...withVariantConfig(['mobile'], OpenedModal),
-};

package/src/info/Info.test.story.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { lorem10 } from '../test-utils';
+import Info, { InfoPresentation } from '.';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+const meta: Meta<typeof Info> = {
+  component: Info,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Dialogs/Info/Tests',
+  args: {
+    'aria-label': 'Click here for more details',
+    title: 'Fast transfer hint',
+    content: lorem10,
+  },
+  render: (args) => (
+    <p>
+      <span>Fast transfer</span> <Info {...args} />
+    </p>
+  ),
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const OpenedPopover: Story = {
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
+
+export const OpenedPopoverMobile: Story = {
+  ...OpenedPopover,
+  ...withVariantConfig(['mobile'], OpenedPopover),
+};
+
+export const OpenedModal: Story = {
+  ...OpenedPopover,
+  args: {
+    presentation: InfoPresentation.MODAL,
+  },
+};
+
+export const OpenedModalMobile: Story = {
+  ...OpenedModal,
+  ...withVariantConfig(['mobile'], OpenedModal),
+};

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -65,15 +65,3 @@ export const SecurityPin: Story = {
     displayPattern: '*-*-*-*-*-*',
   },
 };
-
-export const SecurityPinPlay: Story = {
-  args: {
-    label: 'Security Pin Play',
-    placeholder: '*-*-*-*-*-*',
-    displayPattern: '*-*-*-*-*-*',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
-  },
-};

package/src/inputWithDisplayFormat/InputWithDisplayFormat.test.story.tsx

@@ -0,0 +1,33 @@
+import { userEvent, within } from 'storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
+import { Field, FieldProps } from '../field/Field';
+
+const meta: Meta<typeof InputWithDisplayFormat> = {
+  title: 'Forms/InputWithDisplayFormat/Tests',
+  component: InputWithDisplayFormat,
+  tags: ['!autodocs', '!manifest'],
+  render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {
+    return (
+      <Field label={label} id={args.id}>
+        <InputWithDisplayFormat id={args.id} {...args} />
+      </Field>
+    );
+  },
+};
+export default meta;
+
+type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
+
+export const SecurityPinPlay: Story = {
+  args: {
+    label: 'Security Pin Play',
+    placeholder: '*-*-*-*-*-*',
+    displayPattern: '*-*-*-*-*-*',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
+  },
+};

package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css

@@ -0,0 +1,96 @@
+.np-bottom-sheet-v2-container {
+  position: relative;
+  z-index: 1060;
+}
+.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;
+}
+.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 */
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+}
+.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 {
+  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: auto;
+}
+.np-bottom-sheet-v2-content-inner--has-title {
+  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;
+  color: var(--color-content-primary);
+}
+.np-bottom-sheet-v2-body {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}

package/src/inputs/{_BottomSheet.tsx → SelectInput/BottomSheet/SelectInputBottomSheet.tsx}

@@ -12,12 +12,12 @@ import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { Fragment, useState } from 'react';
 
-import { CloseButton } from '../common/closeButton';
-import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
-import { PreventScroll } from '../common/preventScroll/PreventScroll';
-import { Size } from '../common/propsValues/size';
+import { CloseButton } from '../../../common/closeButton';
+import { useVirtualKeyboard } from '../../../common/hooks/useVirtualKeyboard';
+import { PreventScroll } from '../../../common/preventScroll/PreventScroll';
+import { Size } from '../../../common/propsValues/size';
 
-export interface BottomSheetProps {
+export interface SelectInputBottomSheetProps {
   open: boolean;
   renderTrigger?: (args: {
     ref: React.RefCallback<Element>;
@@ -33,7 +33,7 @@ export interface BottomSheetProps {
   onCloseEnd?: () => void;
 }
 
-export function BottomSheet({
+export function SelectInputBottomSheet({
   open,
   renderTrigger,
   title,
@@ -42,7 +42,7 @@ export function BottomSheet({
   children,
   onClose,
   onCloseEnd,
-}: BottomSheetProps) {
+}: SelectInputBottomSheetProps) {
   useVirtualKeyboard(open);
 
   const { refs, context } = useFloating<Element>({

package/src/inputs/SelectInput/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { SelectInputBottomSheet } from './SelectInputBottomSheet';
+export type { SelectInputBottomSheetProps } from './SelectInputBottomSheet';

package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css

@@ -0,0 +1,16 @@
+.np-button-input {
+  display: inline-grid;
+  grid-auto-columns: minmax(0, 1fr);
+  align-content: center;
+  border-radius: 10px;
+  border-radius: var(--size-10);
+  text-align: start;
+}
+.np-button-input:has(.np-select-input-option-description-in-trigger) {
+  height: auto !important;
+  align-content: start;
+  padding-top: 12px !important;
+  padding-top: var(--size-12) !important;
+  padding-bottom: 12px !important;
+  padding-bottom: var(--size-12) !important;
+}

package/src/inputs/{_ButtonInput.tsx → SelectInput/ButtonInput/SelectInputButtonInput.tsx}

@@ -1,15 +1,15 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
-import { useInputPaddings } from './InputGroup';
-import { inputClassNameBase } from './_common';
+import { useInputPaddings } from '../../InputGroup';
+import { inputClassNameBase } from '../../_common';
 
-export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {
+export interface SelectInputButtonInputProps extends React.ComponentPropsWithRef<'button'> {
   size?: 'sm' | 'md' | 'lg';
 }
 
-export const ButtonInput = forwardRef(function ButtonInput(
-  { size = 'md', className, style, ...restProps }: ButtonInputProps,
+export const SelectInputButtonInput = forwardRef(function ButtonInput(
+  { size = 'md', className, style, ...restProps }: SelectInputButtonInputProps,
   ref: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
   const inputPaddings = useInputPaddings();

package/src/inputs/SelectInput/ButtonInput/index.ts

@@ -0,0 +1,2 @@
+export { SelectInputButtonInput } from './SelectInputButtonInput';
+export type { SelectInputButtonInputProps } from './SelectInputButtonInput';

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css

@@ -0,0 +1,46 @@
+.np-select-input-addon-container {
+  pointer-events: none;
+  margin-inline-start: 4px;
+  margin-inline-start: var(--size-4);
+  display: inline-flex;
+  align-items: center;
+}
+.np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
+  margin-inline-start: 4px;
+  margin-inline-start: var(--size-4);
+}
+.np-select-input-addon {
+  border-width: 0;
+  background: none;
+  display: inline-flex;
+  height: 24px;
+  height: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.125rem /* 2px */;
+  /* TODO: Tokenize */
+}
+.np-select-input-addon--interactive {
+  pointer-events: auto;
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+}
+.np-select-input-addon--interactive:hover {
+  color: #b5b7ba;
+  color: var(--color-interactive-secondary-hover);
+}
+.np-select-input-addon--interactive:focus {
+  outline: none;
+}
+.np-select-input-addon--interactive:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.less

@@ -0,0 +1,39 @@
+@import (reference) "./../../../styles/less/ring.less";
+
+.np-select-input-addon-container {
+  pointer-events: none;
+  margin-inline-start: var(--size-4);
+  display: inline-flex;
+  align-items: center;
+
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-inline-start: var(--size-4);
+  }
+}
+
+.np-select-input-addon {
+  border-width: 0;
+  background: none;
+  display: inline-flex;
+  height: var(--size-24);
+  width: var(--size-24);
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.125rem /* 2px */; /* TODO: Tokenize */
+
+  &--interactive {
+    pointer-events: auto;
+    color: var(--color-interactive-secondary);
+
+    &:hover {
+      color: var(--color-interactive-secondary-hover);
+    }
+
+    .focus-ring();
+  }
+}
+
+.np-select-input-addon-separator {
+  height: var(--size-24);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.tsx

@@ -0,0 +1,27 @@
+import { Cross } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import { useIntl } from 'react-intl';
+import dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';
+
+export interface SelectInputClearButtonProps extends Pick<
+  React.ComponentPropsWithoutRef<'button'>,
+  'className' | 'onClick'
+> {}
+
+/**
+ * A button component used to clear the selected value in a SelectInput.
+ */
+export function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {
+  const intl = useIntl();
+
+  return (
+    <button
+      type="button"
+      aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
+      className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}
+      onClick={onClick}
+    >
+      <Cross size={16} />
+    </button>
+  );
+}

package/src/inputs/SelectInput/ClearButton/index.ts

@@ -0,0 +1,2 @@
+export { SelectInputClearButton } from './SelectInputClearButton';
+export type { SelectInputClearButtonProps } from './SelectInputClearButton';

package/src/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.tsx

@@ -0,0 +1,74 @@
+import { ChevronDown } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { InputGroup } from '../../InputGroup';
+import { SelectInputClearButton } from '../ClearButton';
+import { SelectInputTriggerButton } from '../TriggerButton';
+import { SelectInputProps } from '../SelectInput.types';
+import { SelectInputButtonInput } from '../ButtonInput';
+
+export interface SelectInputDefaultRenderTriggerProps {
+  content: React.ReactNode;
+  placeholderShown: boolean;
+  clear: (() => void) | undefined;
+  disabled: boolean;
+  size: 'sm' | 'md' | 'lg';
+  className: string | undefined;
+}
+
+/**
+ * Default render function for the SelectInput trigger.
+ * Displays the selected value or placeholder with clear button and dropdown indicator.
+ */
+export function SelectInputDefaultRenderTrigger({
+  content,
+  placeholderShown,
+  clear,
+  disabled,
+  size,
+  className,
+}: SelectInputDefaultRenderTriggerProps) {
+  return (
+    <InputGroup
+      addonEnd={{
+        content: (
+          <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>
+            {clear != null && !placeholderShown ? (
+              <>
+                <SelectInputClearButton
+                  onClick={(event) => {
+                    event.preventDefault();
+                    clear();
+                  }}
+                />
+                <span className="np-select-input-addon-separator" />
+              </>
+            ) : null}
+            <span className="np-select-input-addon">
+              <ChevronDown size={16} />
+            </span>
+          </span>
+        ),
+        initialContentWidth: 24 + 4,
+        padding: 'sm',
+      }}
+      disabled={disabled}
+      className={className}
+    >
+      <SelectInputTriggerButton as={SelectInputButtonInput} size={size}>
+        <span
+          className={clsx(
+            'np-select-input-content',
+            placeholderShown && 'np-select-input-placeholder',
+          )}
+        >
+          {content}
+        </span>
+      </SelectInputTriggerButton>
+    </InputGroup>
+  );
+}
+
+export const DefaultRenderTrigger =
+  SelectInputDefaultRenderTrigger satisfies SelectInputProps['renderTrigger'];

package/src/inputs/SelectInput/DefaultRenderTrigger/index.ts

@@ -0,0 +1,5 @@
+export {
+  SelectInputDefaultRenderTrigger,
+  DefaultRenderTrigger,
+  type SelectInputDefaultRenderTriggerProps,
+} from './SelectInputDefaultRenderTrigger';

package/src/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.tsx

@@ -0,0 +1,61 @@
+import { clsx } from 'clsx';
+import { useId } from 'react';
+import Header from '../../../../header';
+import Section from '../../../../section';
+import { SelectInputGroupItem } from '../../SelectInput.types';
+import { SelectInputItemView, SelectInputItemViewProps } from '..';
+
+export interface SelectInputGroupItemViewProps<T = string> extends SelectInputItemViewProps<
+  T,
+  SelectInputGroupItem<T | undefined>
+> {}
+
+/**
+ * Component that renders a group of SelectInput options with a header.
+ */
+export function SelectInputGroupItemView<T = string>({
+  item,
+  renderValue,
+  needle,
+}: SelectInputGroupItemViewProps<T>) {
+  const headerId = useId();
+
+  const header = (
+    <Header
+      as="header"
+      role="none"
+      id={headerId}
+      title={item.label}
+      // @ts-expect-error when we migrate ActionButton to new Button this should be sorted
+      action={
+        item.action && {
+          text: item.action.label,
+          onClick: item.action.onClick,
+        }
+      }
+      className="np-select-input-group-item-header p-x-1"
+    />
+  );
+
+  return (
+    // An empty container may be rendered when no options match `needle`
+    // However, pre-filtering would result in worse performance overall
+    <Section
+      as="section"
+      role="group"
+      aria-labelledby={headerId}
+      className={clsx('m-y-0', needle === null && 'np-select-input-group-item--without-needle')}
+    >
+      {needle == null ? header : null}
+      {item.options.map((option, index) => (
+        <SelectInputItemView
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+          item={option}
+          renderValue={renderValue}
+          needle={needle}
+        />
+      ))}
+    </Section>
+  );
+}

package/src/inputs/SelectInput/ItemView/GroupItemView/index.ts

@@ -0,0 +1,2 @@
+export { SelectInputGroupItemView } from './SelectInputGroupItemView';
+export type { SelectInputGroupItemViewProps } from './SelectInputGroupItemView';

package/src/inputs/SelectInput/ItemView/SelectInputItemView.css

@@ -0,0 +1,16 @@
+.np-select-input-group-item--without-needle:first-child {
+  margin-top: calc(-1 * 8px);
+  margin-top: calc(-1 * var(--size-8));
+}
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+}
+.np-select-input-separator-item {
+  margin: 8px;
+  margin: var(--size-8);
+  border-top-width: 1px;
+}

package/src/inputs/SelectInput/ItemView/SelectInputItemView.less

@@ -0,0 +1,17 @@
+.np-select-input-group-item {
+  &--without-needle:first-child {
+    margin-top: calc(-1 * var(--size-8));
+  }
+}
+
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: var(--color-background-elevated);
+}
+
+.np-select-input-separator-item {
+  margin: var(--size-8);
+  border-top-width: 1px;
+}

package/src/inputs/SelectInput/ItemView/SelectInputItemView.tsx

@@ -0,0 +1,48 @@
+import { selectInputOptionItemIncludesNeedle } from '../SelectInput.utils';
+import { SelectInputItem, SelectInputProps } from '../SelectInput.types';
+import { SelectInputOption } from '../Option';
+import { SelectInputGroupItemView } from './GroupItemView';
+
+export interface SelectInputItemViewProps<
+  T = string,
+  I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,
+> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {
+  item: I;
+  needle: string | null | undefined;
+}
+
+/**
+ * Component that renders different types of SelectInput items:
+ * options, groups, or separators.
+ */
+export function SelectInputItemView<T = string>({
+  item,
+  renderValue,
+  needle,
+}: SelectInputItemViewProps<T>) {
+  switch (item.type) {
+    case 'option': {
+      if (
+        item.value != null &&
+        (needle == null || selectInputOptionItemIncludesNeedle(item, needle))
+      ) {
+        return (
+          <SelectInputOption value={item.value} disabled={item.disabled}>
+            {renderValue(item.value, false)}
+          </SelectInputOption>
+        );
+      }
+      break;
+    }
+    case 'group': {
+      return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;
+    }
+    case 'separator': {
+      if (needle == null) {
+        return <hr className="np-select-input-separator-item" />;
+      }
+      break;
+    }
+  }
+  return null;
+}