@transferwise/components 46.130.2 → 46.131.0

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

package/src/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.tsx

@@ -0,0 +1,59 @@
+import { forwardRef, useEffect } from 'react';
+import { useEffectEvent } from '../../../../common/hooks/useEffectEvent';
+
+export interface SelectInputOptionsContainerProps extends React.ComponentPropsWithRef<'div'> {
+  onAriaActiveDescendantChange: (value: React.AriaAttributes['aria-activedescendant']) => void;
+}
+
+/**
+ * Container component for SelectInput options.
+ * Handles keyboard navigation and accessibility features.
+ */
+export const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContainer(
+  {
+    'aria-orientation': ariaOrientation,
+    'aria-activedescendant': ariaActiveDescendant,
+    role,
+    tabIndex,
+    onAriaActiveDescendantChange,
+    onKeyDown,
+    ...restProps
+  }: SelectInputOptionsContainerProps,
+  ref: React.ForwardedRef<HTMLDivElement | null>,
+) {
+  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
+  useEffect(() => {
+    handleAriaActiveDescendantChange(ariaActiveDescendant);
+  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
+
+  return (
+    <div
+      ref={ref}
+      role="none"
+      onKeyDown={(event) => {
+        // Prevent confirmation close without an active item
+        if (event.key === 'Enter' && ariaActiveDescendant == null) {
+          return;
+        }
+
+        // Required to make ListBox focusable
+        if (event.key === 'Tab') {
+          return;
+        }
+
+        // Prevent absorbing Escape early
+        if (event.key === 'Escape') {
+          onKeyDown?.({
+            ...event,
+            preventDefault: () => {},
+            stopPropagation: () => {},
+          });
+          return;
+        }
+
+        onKeyDown?.(event);
+      }}
+      {...restProps}
+    />
+  );
+});

package/src/inputs/SelectInput/Options/OptionsContainer/index.ts

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

package/src/inputs/SelectInput/Options/SelectInputOptions.css

@@ -0,0 +1,81 @@
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+.np-select-input-options-container:focus {
+  outline: none;
+}
+@media (min-width: 576px) {
+  .np-select-input-options-container {
+    max-height: 28rem /* 448px */;
+  }
+}
+.np-select-input-options-status {
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  padding: 8px 24px 0px;
+  padding: var(--size-8) var(--size-24) 0px;
+}
+.np-select-input-options-status-icon {
+  padding: 0 4px;
+  padding: 0 var(--size-4);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-select-input-query-container {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  padding: var(--size-8);
+}
+.np-select-input-listbox-container {
+  position: relative;
+  height: var(--initial-height);
+  scroll-padding-top: 8px;
+  scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
+  scroll-padding-bottom: var(--size-8);
+  overflow-y: auto;
+}
+@media (min-width: 576px) {
+  .np-select-input-listbox-container {
+    height: auto;
+  }
+}
+.np-select-input-listbox-container--virtualized {
+  /* The wrapping element shrinks this as needed */
+  height: 100vh;
+}
+.np-select-input-listbox-container--has-group {
+  scroll-padding-top: 32px;
+  scroll-padding-top: var(--size-32);
+}
+.np-select-input-listbox {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  padding: 8px;
+  padding: var(--size-8);
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+}
+.np-select-input-listbox:focus {
+  outline: none;
+}
+.np-select-input-listbox:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-select-input-listbox-container--virtualized .np-select-input-listbox {
+  /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
+  overflow-y: auto;
+  contain: strict;
+  height: 100%;
+}
+.np-select-input-footer {
+  padding: 4px 24px 16px;
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}

package/src/inputs/SelectInput/Options/SelectInputOptions.less

@@ -0,0 +1,77 @@
+@import (reference) "./../../../styles/less/ring.less";
+
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (--screen-sm) {
+    & {
+      max-height: 28rem /* 448px */;
+    }
+  }
+}
+
+.np-select-input-options-status {
+  display: flex;
+  align-items: center;
+  column-gap: var(--size-8);
+  padding: var(--size-8) var(--size-24) 0px;
+}
+
+.np-select-input-options-status-icon {
+  padding: 0 var(--size-4);
+  color: var(--color-content-tertiary);
+}
+
+.np-select-input-query-container {
+  display: flex;
+  flex-direction: column;
+  padding: var(--size-8);
+}
+
+.np-select-input-listbox-container {
+  position: relative;
+  height: var(--initial-height);
+  scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: var(--size-8);
+  overflow-y: auto;
+
+  @media (--screen-sm) {
+    & {
+      height: auto;
+    }
+  }
+
+  &--virtualized {
+    /* The wrapping element shrinks this as needed */
+    height: 100vh;
+  }
+
+  &--has-group {
+    scroll-padding-top: var(--size-32);
+  }
+}
+
+.np-select-input-listbox {
+  border-radius: var(--radius-small);
+  padding: var(--size-8);
+
+  .focus-ring();
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+
+  .np-select-input-listbox-container--virtualized & {
+    /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
+    overflow-y: auto;
+    contain: strict;
+    height: 100%;
+  }
+}
+
+.np-select-input-footer {
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}