@transferwise/components 46.130.2 → 46.131.0

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

@@ -0,0 +1,411 @@
+import { CrossCircle } from '@transferwise/icons';
+import { ListboxOptions } from '@headlessui/react';
+import { clsx } from 'clsx';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Virtualizer, type VirtualizerHandle } from 'virtua';
+
+import { SearchInput } from '../../SearchInput';
+import {
+  SelectInputItemsCountContext,
+  SelectInputItemPositionContext,
+} from '../SelectInput.contexts';
+import {
+  dedupeSelectInputItems,
+  filterSelectInputItems,
+  MAX_ITEMS_WITHOUT_VIRTUALIZATION,
+  searchableString,
+  selectInputOptionItemIncludesNeedle,
+  sortSelectInputItems,
+} from '../SelectInput.utils';
+import { SelectInputOptionItem, SelectInputProps, SelectInputItem } from '../SelectInput.types';
+import messages from '../SelectInput.messages';
+
+import { SelectInputItemView } from '../ItemView';
+import { SelectInputOptionsContainer } from './OptionsContainer';
+
+/**
+ * Props for the SelectInputOptions component.
+ */
+export interface SelectInputOptionsProps<T = string> extends Pick<
+  SelectInputProps<T>,
+  | 'items'
+  | 'renderValue'
+  | 'renderFooter'
+  | 'filterable'
+  | 'filterPlaceholder'
+  | 'id'
+  | 'parentId'
+  | 'compareValues'
+  | 'sortFilteredOptions'
+> {
+  searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
+  listboxRef: React.MutableRefObject<HTMLDivElement | null>;
+  filterQuery: string;
+  onFilterChange: (query: string) => void;
+  listBoxLabel?: string;
+  listBoxLabelledBy?: string;
+  autocomplete?: string;
+  name?: string;
+  onAutocompleteSelect?: (value: T) => void;
+}
+
+/**
+ * The main options container component for SelectInput.
+ * Manages filtering, virtualisation, and rendering of options.
+ */
+export function SelectInputOptions<T = string>({
+  id,
+  parentId,
+  items,
+  compareValues: compareValuesProp,
+  renderValue = String,
+  renderFooter,
+  filterable = false,
+  filterPlaceholder,
+  sortFilteredOptions,
+  searchInputRef,
+  listboxRef,
+  filterQuery,
+  onFilterChange,
+  listBoxLabel,
+  listBoxLabelledBy,
+  autocomplete,
+  name,
+  onAutocompleteSelect,
+}: SelectInputOptionsProps<T>) {
+  const intl = useIntl();
+  const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+  const [initialRender, setInitialRender] = useState(true);
+
+  const needle = useMemo(() => {
+    if (filterable) {
+      return filterQuery ? searchableString(filterQuery) : null;
+    }
+    return undefined;
+  }, [filterQuery, filterable]);
+  useEffect(() => {
+    if (needle) {
+      // Ensure having an active option while filtering.
+      // Without `requestAnimationFrame` upon which React depends for scheduling
+      // updates, the active status would only show for a split second and then
+      // disappear inadvertently.
+      requestAnimationFrame(() => {
+        if (
+          controllerRef.current != null &&
+          !controllerRef.current.hasAttribute('aria-activedescendant')
+        ) {
+          // Activate first option via synthetic key press
+          controllerRef.current.dispatchEvent(
+            new KeyboardEvent('keydown', { key: 'Home', bubbles: true }),
+          );
+        }
+      });
+    }
+  }, [controllerRef, needle]);
+
+  const compareValues = useMemo(() => {
+    if (!compareValuesProp) {
+      return undefined;
+    }
+
+    if (typeof compareValuesProp === 'function') {
+      return (a: NonNullable<T>, b: NonNullable<T>) => compareValuesProp(a, b);
+    }
+
+    const key = compareValuesProp;
+    return (a: NonNullable<T>, b: NonNullable<T>) => {
+      if (typeof a === 'object' && a != null && typeof b === 'object' && b != null) {
+        return (a as Record<string, unknown>)[key] === (b as Record<string, unknown>)[key];
+      }
+      return a === b;
+    };
+  }, [compareValuesProp]);
+
+  const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] = useMemo(() => {
+    if (needle == null) {
+      return items;
+    }
+
+    const dedupedItems = dedupeSelectInputItems(items, compareValues);
+
+    if (sortFilteredOptions) {
+      // When sorting, filter out non-matching items completely to avoid ghost items
+      const filtered = dedupedItems.map((item) => {
+        if (item.type === 'option') {
+          return selectInputOptionItemIncludesNeedle(item, needle)
+            ? item
+            : { ...item, value: undefined };
+        }
+        if (item.type === 'group') {
+          return {
+            ...item,
+            options: item.options.map((option) =>
+              selectInputOptionItemIncludesNeedle(option, needle)
+                ? option
+                : { ...option, value: undefined },
+            ),
+          };
+        }
+        return item;
+      });
+
+      return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
+    }
+
+    return filterSelectInputItems(dedupedItems, (item) =>
+      selectInputOptionItemIncludesNeedle(item, needle),
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [needle, items, compareValues]);
+  const resultsEmpty = needle != null && filteredItems.length === 0;
+
+  const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
+
+  // Items shown once shall be kept mounted until the needle changes, otherwise
+  // the scroll position may jump around inadvertently. Pattern adopted from:
+  // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
+  const [mountedIndexes, setMountedIndexes] = useState<number[]>([]);
+  const prevNeedleRef = useRef(needle);
+
+  useEffect(() => {
+    const needleChanged = prevNeedleRef.current !== needle;
+    prevNeedleRef.current = needle;
+
+    if (needleChanged) {
+      // Reset mounted indexes when search changes to avoid stale scroll positions
+      setMountedIndexes([]);
+      return;
+    }
+
+    // Ensure the 'End' key works as intended by keeping the last item mounted.
+    // Skipped on needle change to prevent auto-scrolling on search.
+    if (filteredItems.length > 0) {
+      setMountedIndexes((prevMountedIndexes) => {
+        // Create a new array with existing indexes plus the last item index
+        return [...new Set([...prevMountedIndexes, filteredItems.length - 1])]; // Sorting is redundant by nature here
+      });
+    }
+  }, [needle, filteredItems.length]);
+
+  const listboxContainerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (listboxContainerRef.current != null) {
+      listboxContainerRef.current.style.setProperty(
+        '--initial-height',
+        `${listboxContainerRef.current.offsetHeight}px`,
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    setInitialRender(false);
+  }, []);
+
+  const showStatus = resultsEmpty;
+  const statusId = useId();
+  const listboxId = useId();
+
+  const getItemNode = (index: number) => {
+    const item = filteredItems[index];
+    return (
+      <SelectInputItemView key={index} item={item} renderValue={renderValue} needle={needle} />
+    );
+  };
+
+  const findMatchingItem = (autocompleteValue: string): T | null => {
+    const flatOptions = items
+      .flatMap((item) =>
+        item.type === 'group' ? item.options : item.type === 'option' ? [item] : [],
+      )
+      .filter(
+        (item): item is SelectInputOptionItem<NonNullable<T>> =>
+          item.type === 'option' && item.value != null,
+      );
+
+    const exactMatch = flatOptions.find(
+      (option) =>
+        String(option.value) === autocompleteValue ||
+        option.filterMatchers?.some((matcher) => matcher === autocompleteValue),
+    );
+
+    if (exactMatch) {
+      return exactMatch.value;
+    }
+
+    const fuzzyMatch = flatOptions.find((option) =>
+      option.filterMatchers?.some((matcher) =>
+        matcher.toLowerCase().includes(autocompleteValue.toLowerCase()),
+      ),
+    );
+
+    return fuzzyMatch ? fuzzyMatch.value : null;
+  };
+
+  return (
+    <ListboxOptions
+      modal
+      as={SelectInputOptionsContainer}
+      static
+      className="np-select-input-options-container"
+      onAriaActiveDescendantChange={(value: React.AriaAttributes['aria-activedescendant']) => {
+        if (controllerRef.current != null) {
+          if (!initialRender && value != null) {
+            controllerRef.current.setAttribute('aria-activedescendant', value);
+          } else {
+            controllerRef.current.removeAttribute('aria-activedescendant');
+          }
+        }
+      }}
+    >
+      {filterable ? (
+        <div className="np-select-input-query-container">
+          <SearchInput
+            ref={searchInputRef}
+            id={id}
+            name={name}
+            autoComplete={autocomplete}
+            role="combobox"
+            shape="rectangle"
+            placeholder={filterPlaceholder}
+            aria-label={filterPlaceholder}
+            defaultValue={filterQuery}
+            aria-autocomplete="list"
+            aria-expanded
+            aria-controls={listboxId}
+            aria-describedby={showStatus ? statusId : undefined}
+            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              // Prevent interfering with the matcher of Headless UI
+              // https://mathiasbynens.be/notes/javascript-unicode#regex
+              if (/^.$/u.test(event.key)) {
+                event.stopPropagation();
+              }
+            }}
+            onChange={(event) => {
+              // Free up resources and ensure not to go out of bounds when the
+              // resulting item count is less than before
+              const inputValue = event.currentTarget.value;
+
+              // Free up resources and ensure not to go out of bounds
+              setMountedIndexes([]);
+              onFilterChange(inputValue);
+            }}
+            onInput={(event) => {
+              const inputValue = event.currentTarget.value;
+              const inputElement = event.currentTarget;
+
+              if (autocomplete && onAutocompleteSelect && inputValue) {
+                setTimeout(() => {
+                  if (inputElement.value === inputValue && inputValue.length > 2) {
+                    const matchedValue = findMatchingItem(inputValue);
+                    if (matchedValue !== null) {
+                      onAutocompleteSelect(matchedValue);
+                    }
+                  }
+                }, 50);
+              }
+            }}
+          />
+        </div>
+      ) : null}
+
+      <section
+        ref={listboxContainerRef}
+        tabIndex={-1}
+        className={clsx(
+          'np-select-input-listbox-container',
+          virtualized && 'np-select-input-listbox-container--virtualized',
+          needle == null && // Groups aren't shown when filtering
+            items.some((item) => item.type === 'group') &&
+            'np-select-input-listbox-container--has-group',
+        )}
+        data-wds-parent={parentId ?? undefined}
+      >
+        {resultsEmpty ? (
+          <div id={statusId} className="np-select-input-options-status">
+            <CrossCircle size={16} className="np-select-input-options-status-icon" />
+            {intl.formatMessage(messages.noResultsFound)}
+          </div>
+        ) : null}
+
+        <div
+          ref={listboxRef}
+          id={listboxId}
+          role="listbox"
+          aria-orientation="vertical"
+          aria-label={listBoxLabel}
+          aria-labelledby={listBoxLabelledBy}
+          tabIndex={0}
+          className="np-select-input-listbox"
+        >
+          {!virtualized ? (
+            filteredItems.map((_, index) => getItemNode(index))
+          ) : (
+            <Virtualizer
+              ref={virtualiserHandlerRef}
+              data={filteredItems}
+              keepMounted={mountedIndexes}
+              scrollRef={listboxRef} // `VList` doesn't expose this
+              onScroll={async () => {
+                if (!virtualiserHandlerRef.current) return;
+
+                const startIndex = virtualiserHandlerRef.current.findItemIndex(
+                  virtualiserHandlerRef.current.scrollOffset,
+                );
+                const endIndex = virtualiserHandlerRef.current.findItemIndex(
+                  virtualiserHandlerRef.current.scrollOffset +
+                    virtualiserHandlerRef.current.viewportSize,
+                );
+
+                setMountedIndexes((prevMountedIndexes) => {
+                  // Create an array of all indexes that should be visible
+
+                  const visibleIndexes = [];
+                  for (let index = startIndex; index <= endIndex; index += 1) {
+                    // eslint-disable-next-line functional/immutable-data
+                    visibleIndexes.push(index);
+                  }
+
+                  // Combine with previous indexes and sort
+                  return [...new Set([...prevMountedIndexes, ...visibleIndexes])].sort(
+                    (a, b) => a - b,
+                  );
+                });
+              }}
+            >
+              {(item, index) => (
+                // The position of each item can't be inferred by browsers when
+                // virtualizing, as some of the items may not be in the DOM
+                <SelectInputItemsCountContext.Provider value={filteredItems.length}>
+                  <SelectInputItemPositionContext.Provider value={index + 1}>
+                    {getItemNode(index)}
+                  </SelectInputItemPositionContext.Provider>
+                </SelectInputItemsCountContext.Provider>
+              )}
+            </Virtualizer>
+          )}
+        </div>
+
+        {renderFooter != null ? (
+          <footer className="np-select-input-footer">
+            <div
+              role="none"
+              onKeyDown={(event) => {
+                // Prevent interfering with Headless UI
+                if (event.key !== 'Escape') {
+                  event.stopPropagation();
+                }
+              }}
+            >
+              {renderFooter({
+                resultsEmpty,
+                queryNormalized: needle,
+              })}
+            </div>
+          </footer>
+        ) : null}
+      </section>
+    </ListboxOptions>
+  );
+}

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

@@ -0,0 +1,3 @@
+export { SelectInputOptions } from './SelectInputOptions';
+export type { SelectInputOptionsProps } from './SelectInputOptions';
+export * from './OptionsContainer';

package/src/inputs/SelectInput/Popover/SelectInputPopover.css

@@ -0,0 +1,46 @@
+.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);
+}

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.less

@@ -0,0 +1,22 @@
+@import (reference) "./../../styles/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
       />,
     );