@transferwise/components 0.0.0-experimental-a18466a → 0.0.0-experimental-e789c10

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) "../../../../node_modules/@transferwise/neptune-css/src/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;
+}

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

@@ -0,0 +1,3 @@
+export { SelectInputItemView } from './SelectInputItemView';
+export type { SelectInputItemViewProps } from './SelectInputItemView';
+export * from './GroupItemView';

package/src/inputs/SelectInput/Option/SelectInputOption.css

@@ -0,0 +1,33 @@
+.np-select-input-option-container {
+  display: flex;
+  cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  padding: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
+}
+.np-select-input-option-container:focus {
+  outline: none;
+}
+.np-select-input-option-container--active {
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+}
+.np-select-input-option-container--disabled {
+  opacity: 0.45;
+}
+.np-select-input-option-check--not-selected {
+  visibility: hidden;
+}
+.np-select-input-option {
+  flex: 1;
+}

package/src/inputs/SelectInput/Option/SelectInputOption.less

@@ -0,0 +1,32 @@
+.np-select-input-option-container {
+  display: flex;
+  cursor: default;
+  user-select: none;
+  align-items: center;
+  column-gap: var(--size-8);
+  border-radius: var(--radius-small);
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
+
+  &:focus {
+    outline: none;
+  }
+
+  &--active {
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+  }
+
+  &--disabled {
+    opacity: 0.45;
+  }
+}
+
+.np-select-input-option-check {
+  &--not-selected {
+    visibility: hidden;
+  }
+}
+
+.np-select-input-option {
+  flex: 1;
+}

package/src/inputs/SelectInput/Option/SelectInputOption.tsx

@@ -0,0 +1,57 @@
+import { Check } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import { ListboxOption } from '@headlessui/react';
+import {
+  SelectInputItemsCountContext,
+  SelectInputItemPositionContext,
+} from '../SelectInput.contexts';
+
+export interface SelectInputOptionProps<T = string> {
+  value: T;
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+/**
+ * A selectable option in a SelectInput dropdown.
+ * Includes accessibility support and styling for selected, active, and disabled states.
+ */
+export function SelectInputOption<T = string>({
+  value,
+  disabled,
+  children,
+}: SelectInputOptionProps<T>) {
+  const itemsCount = useContext(SelectInputItemsCountContext);
+  const itemPosition = useContext(SelectInputItemPositionContext);
+
+  return (
+    <ListboxOption
+      as="div"
+      value={value}
+      aria-setsize={itemsCount}
+      aria-posinset={itemPosition}
+      disabled={disabled}
+      className={({ active, disabled: uiDisabled }) =>
+        clsx(
+          'np-select-input-option-container np-text-body-large',
+          active && 'np-select-input-option-container--active',
+          uiDisabled && 'np-select-input-option-container--disabled',
+        )
+      }
+    >
+      {({ selected }) => (
+        <>
+          <div className="np-select-input-option">{children}</div>
+          <Check
+            size={16}
+            className={clsx(
+              'np-select-input-option-check',
+              !selected && 'np-select-input-option-check--not-selected',
+            )}
+          />
+        </>
+      )}
+    </ListboxOption>
+  );
+}

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

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