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

package/src/inputs/{_Popover.tsx → SelectInput/Popover/SelectInputPopover.tsx}

@@ -18,9 +18,9 @@ import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-import { PreventScroll } from '../common/preventScroll/PreventScroll';
+import { PreventScroll } from '../../../common/preventScroll/PreventScroll';
 
-export interface PopoverProps {
+export interface SelectInputPopoverProps {
   placement?: Placement;
   open: boolean;
   renderTrigger: (args: {
@@ -37,9 +37,9 @@ export interface PopoverProps {
   onCloseEnd?: () => void;
 }
 
-const floatingPadding = 16;
+const FLOATING_PADDING = 16;
 
-export function Popover({
+export function SelectInputPopover({
   placement,
   open,
   renderTrigger,
@@ -49,16 +49,16 @@ export function Popover({
   children,
   onClose,
   onCloseEnd,
-}: PopoverProps) {
+}: SelectInputPopoverProps) {
   const { refs, floatingStyles, context } = useFloating<Element>({
     strategy: 'fixed',
     placement,
     middleware: [
       offset(8),
-      flip({ padding: floatingPadding, crossAxis: false }),
+      flip({ padding: FLOATING_PADDING, crossAxis: false }),
       shift(),
       floatingSize({
-        padding: floatingPadding,
+        padding: FLOATING_PADDING,
         apply: ({ elements, rects, availableHeight }) => {
           elements.floating.style.setProperty('--max-height', `${availableHeight}px`);
           elements.floating.style.setProperty('--width', `${rects.reference.width}px`);

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

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

package/src/inputs/SelectInput/SelectInput.contexts.tsx

@@ -0,0 +1,40 @@
+import React, { createContext } from 'react';
+
+/**
+ * Context for passing props to the SelectInputTriggerButton component.
+ */
+export interface SelectInputTriggerButtonPropsContextValue {
+  ref?: React.ForwardedRef<HTMLButtonElement | null>;
+  id?: string;
+  onClick?: (event: React.MouseEvent) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  size?: 'sm' | 'md' | 'lg';
+  [key: string]: unknown;
+}
+
+/**
+ * Context for passing props to the SelectInputTriggerButton component.
+ */
+export const SelectInputTriggerButtonPropsContext =
+  createContext<SelectInputTriggerButtonPropsContextValue>({});
+
+/**
+ * Context for providing the total count of items in a SelectInput.
+ * Used for ARIA accessibility to inform screen readers about the total number of options.
+ */
+export const SelectInputItemsCountContext = createContext<number | undefined>(undefined);
+
+/**
+ * Context for providing the current item position in a SelectInput.
+ * Used for ARIA accessibility to inform screen readers about the position of the option.
+ */
+export const SelectInputItemPositionContext = createContext<number | undefined>(undefined);
+
+/**
+ * Context indicating whether an option's content is rendered within the trigger button.
+ * When true, certain styling adjustments are applied to make the content fit better in the trigger.
+ */
+export const SelectInputOptionContentWithinTriggerContext = createContext(false);
+
+// Re-export types from the original contexts module for backward compatibility
+export type { WithInputAttributesProps } from '../contexts';

package/src/inputs/SelectInput/SelectInput.css

@@ -0,0 +1,380 @@
+.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);
+}
+.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;
+}
+.np-popover-v2-container {
+  z-index: 1060;
+  display: flex;
+  max-height: var(--max-height);
+  width: var(--width);
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+}
+.np-popover-v2-container--size-md {
+  min-width: 20rem;
+}
+.np-popover-v2-container--size-lg {
+  min-width: 24rem;
+}
+.np-popover-v2-container:focus {
+  outline: none;
+}
+.np-popover-v2 {
+  display: grid;
+  grid-row-gap: 8px;
+  grid-row-gap: var(--size-8);
+  row-gap: 8px;
+  row-gap: var(--size-8);
+  overflow-y: auto;
+  grid-template-rows: minmax(0, 1fr);
+}
+.np-popover-v2--has-title {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.np-popover-v2--padding-md {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.np-popover-v2-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-popover-v2-content {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.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;
+}
+.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);
+}
+.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;
+}
+.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);
+}
+.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);
+}
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.np-select-input-placeholder {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}

package/src/inputs/SelectInput/SelectInput.less

@@ -0,0 +1,22 @@
+@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+// Import component styles
+@import "./BottomSheet/SelectInputBottomSheet.less";
+@import "./ButtonInput/SelectInputButtonInput.less";
+@import "./Popover/SelectInputPopover.less";
+@import "./Option/SelectInputOption.less";
+@import "./OptionContent/SelectInputOptionContent.less";
+@import "./ItemView/SelectInputItemView.less";
+@import "./Options/SelectInputOptions.less";
+@import "./ClearButton/SelectInputClearButton.less";
+
+// Main SelectInput styles
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.np-select-input-placeholder {
+  color: var(--color-content-tertiary);
+}

package/src/inputs/{SelectInput.test.tsx → SelectInput/SelectInput.test.tsx}

@@ -2,15 +2,15 @@ import { screen, waitFor, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { mockAnimationsApi } from 'jsdom-testing-mocks';
 
-import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
+import { render, mockMatchMedia, mockResizeObserver } from '../../test-utils';
 
 import {
   SelectInput,
   SelectInputOptionContent,
   type SelectInputOptionItem,
   type SelectInputProps,
-} from './SelectInput';
-import { Field } from '../field/Field';
+} from '.';
+import { Field } from '../../field/Field';
 
 mockMatchMedia();
 mockResizeObserver();
@@ -40,7 +40,7 @@ describe('SelectInput', () => {
         ]}
         renderFooter={({ queryNormalized: normalizedQuery }) =>
           normalizedQuery != null ? (
-            <>Showing results for ‘{normalizedQuery}’</>
+            <>Showing results for &apos;{normalizedQuery}&apos;</>
           ) : (
             <>All items shown</>
           )
@@ -56,16 +56,16 @@ describe('SelectInput', () => {
     expect(footer).toBeInTheDocument();
 
     await userEvent.keyboard('u');
-    expect(footer).toHaveTextContent(/‘u’$/);
+    expect(footer).toHaveTextContent(/'u'$/);
 
     await userEvent.keyboard('r');
-    expect(footer).toHaveTextContent(/‘ur’$/);
+    expect(footer).toHaveTextContent(/'ur'$/);
 
     await userEvent.keyboard('x');
-    expect(footer).toHaveTextContent(/‘urx’$/);
+    expect(footer).toHaveTextContent(/'urx'$/);
 
     await userEvent.keyboard('{Backspace}');
-    expect(footer).toHaveTextContent(/‘ur’$/);
+    expect(footer).toHaveTextContent(/'ur'$/);
   });
 
   it('allows navigating the listbox with cursors', async () => {
@@ -76,9 +76,7 @@ describe('SelectInput', () => {
           { type: 'option', value: 'EUR' },
           { type: 'option', value: 'USD' },
         ]}
-        renderFooter={({ queryNormalized: normalizedQuery }) => (
-          <button type="button">Footer button</button>
-        )}
+        renderFooter={() => <button type="button">Footer button</button>}
         filterable
       />,
     );