@transferwise/components 0.0.0-experimental-57e70f3 → 0.0.0-experimental-09066ec

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';

package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.css

@@ -0,0 +1,37 @@
+.np-select-input-option-content-container {
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-select-input-option-content-icon {
+  display: flex;
+}
+.np-select-input-option-content-icon--not-within-trigger {
+  align-self: flex-start;
+}
+.np-select-input-option-content-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+.np-select-input-option-content-text-secondary {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-select-input-option-content-text-within-trigger {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+}

package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.less

@@ -0,0 +1,38 @@
+.np-select-input-option-content-container {
+  display: flex;
+  align-items: center;
+  column-gap: var(--size-8);
+  color: var(--color-content-primary);
+}
+
+.np-select-input-option-content-icon {
+  display: flex;
+
+  &--not-within-trigger {
+    align-self: flex-start;
+  }
+}
+
+.np-select-input-option-content-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.np-select-input-option-content-text-secondary {
+  color: var(--color-content-secondary);
+}
+
+.np-select-input-option-content-text-within-trigger {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.np-select-input-option-content-text-line-1 {
+  > :not([hidden]) ~ :not([hidden]) {
+    margin-right: var(--size-8);
+    margin-left: var(--size-8);
+  }
+}

package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx

@@ -0,0 +1,72 @@
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import { SelectInputOptionContentWithinTriggerContext } from '../SelectInput.contexts';
+
+export interface SelectInputOptionContentProps {
+  title: React.ReactNode;
+  note?: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+
+/**
+ * Component for rendering structured content within a SelectInput option.
+ * Supports title, optional note, description, and icon with different styling
+ * based on whether it's rendered within the trigger button or the dropdown.
+ */
+export function SelectInputOptionContent({
+  title,
+  note,
+  description,
+  icon,
+}: SelectInputOptionContentProps) {
+  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
+
+  return (
+    <div
+      className={clsx(
+        'np-select-input-option-content-container',
+        (note || description) && 'np-text-body-large',
+      )}
+    >
+      {icon ? (
+        <div
+          className={clsx(
+            'np-select-input-option-content-icon',
+            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',
+          )}
+        >
+          {icon}
+        </div>
+      ) : null}
+
+      <div className="np-select-input-option-content-text">
+        <div
+          className={clsx(
+            'np-select-input-option-content-text-line-1',
+            withinTrigger && 'np-select-input-option-content-text-within-trigger',
+          )}
+        >
+          <div className="d-inline">{title}</div>
+          {note ? (
+            <span className="np-select-input-option-content-text-secondary np-text-body-default">
+              {note}
+            </span>
+          ) : null}
+        </div>
+
+        {description ? (
+          <div
+            className={clsx(
+              'np-select-input-option-content-text-secondary np-text-body-default',
+              withinTrigger &&
+                'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',
+            )}
+          >
+            {description}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

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