@transferwise/components 0.0.0-experimental-3b64f23 → 0.0.0-experimental-ddcff61

package/src/inputs/SelectInput/SelectInput.utils.ts

@@ -0,0 +1,205 @@
+import { SelectInputItem, SelectInputOptionItem } from './SelectInput.types';
+
+export const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
+
+/**
+ * Converts a string to a normalized, searchable format by:
+ * - Trimming whitespace
+ * - Normalizing whitespace (convert multiple spaces to single space)
+ * - Converting to NFD normalization form to handle diacritics
+ * - Removing combining diacritical marks
+ * - Converting to lowercase
+ */
+export function searchableString(value: string) {
+  return (
+    value
+      .trim()
+      .replace(/\s+/gu, ' ')
+      // NFD converts an Å to A +  ̊ (and other special characters)
+      .normalize('NFD')
+      // and then this replaces the  ̊ with nothing (and other special characters)
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+  );
+}
+
+/**
+ * Extracts searchable strings from a value.
+ * - If the value is a string, returns a normalized version.
+ * - If the value is an object, extracts all string values and normalizes them.
+ * - Otherwise returns an empty array.
+ */
+export function inferSearchableStrings(value: unknown) {
+  if (typeof value === 'string') {
+    return [searchableString(value)];
+  }
+
+  if (typeof value === 'object' && value != null) {
+    return Object.values(value)
+      .filter((innerValue) => typeof innerValue === 'string')
+      .map((innerValue) => searchableString(innerValue));
+  }
+
+  return [];
+}
+
+/**
+ * Sets the value of a duplicate option item to undefined, effectively hiding it when rendered.
+ */
+export function dedupeSelectInputOptionItem<T>(
+  item: SelectInputOptionItem<T>,
+  existingValues: Set<T>,
+  compareValues?: (a: T, b: T) => boolean,
+): SelectInputOptionItem<T | undefined> {
+  const isDuplicate = compareValues
+    ? Array.from(existingValues).some((existingValue) => compareValues(item.value, existingValue))
+    : existingValues.has(item.value);
+
+  if (!isDuplicate) {
+    existingValues.add(item.value);
+    return item;
+  }
+  return { ...item, value: undefined };
+}
+
+/**
+ * Sets the `value` of duplicate option items to `undefined`, hiding them when
+ * rendered. Indexes are kept intact within groups to preserve the active item
+ * between filter changes when possible.
+ */
+export function dedupeSelectInputItems<T>(
+  items: readonly SelectInputItem<T>[],
+  compareValues?: (a: T, b: T) => boolean,
+): SelectInputItem<T | undefined>[] {
+  const existingValues = new Set<T>();
+
+  return items.map((item) => {
+    switch (item.type) {
+      case 'option': {
+        return dedupeSelectInputOptionItem(item, existingValues, compareValues);
+      }
+      case 'group': {
+        return {
+          ...item,
+          options: item.options.map((option) =>
+            dedupeSelectInputOptionItem(option, existingValues, compareValues),
+          ),
+        };
+      }
+      default:
+    }
+    return item;
+  });
+}
+
+/**
+ * Checks if a SelectInputOptionItem matches the search needle.
+ */
+export function selectInputOptionItemIncludesNeedle<T>(
+  item: SelectInputOptionItem<T>,
+  needle: string,
+) {
+  return inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
+    haystack.includes(needle),
+  );
+}
+
+/**
+ * Filters SelectInputItems based on the provided predicate function.
+ * For group items, it checks if any of their options match the predicate.
+ */
+export function filterSelectInputItems<T>(
+  items: readonly SelectInputItem<T>[],
+  predicate: (item: SelectInputOptionItem<T>) => boolean,
+) {
+  return items.filter((item) => {
+    switch (item.type) {
+      case 'option': {
+        return predicate(item);
+      }
+      case 'group': {
+        return item.options.some((option) => predicate(option));
+      }
+      default:
+    }
+    return false;
+  });
+}
+
+/**
+ * Flattens and sorts filtered options using the provided comparator.
+ * Extracts all options from groups, filters out undefined values (deduplicated items),
+ * sorts them, and returns as a flat list of option items.
+ */
+export function sortSelectInputItems<T>(
+  items: readonly SelectInputItem<T | undefined>[],
+  compareFn: (
+    a: SelectInputOptionItem<NonNullable<T>>,
+    b: SelectInputOptionItem<NonNullable<T>>,
+    searchQuery: string,
+  ) => number,
+  searchQuery: string,
+): SelectInputItem<NonNullable<T>>[] {
+  const flattenedOption = items.flatMap((item) => {
+    if (item.type === 'option') {
+      return item.value !== undefined ? [item as SelectInputOptionItem<NonNullable<T>>] : [];
+    }
+
+    if (item.type === 'group') {
+      return item.options.filter(
+        (option): option is SelectInputOptionItem<NonNullable<T>> => option.value !== undefined,
+      );
+    }
+
+    return [];
+  });
+
+  // eslint-disable-next-line functional/immutable-data
+  return flattenedOption.sort((a, b) => compareFn(a, b, searchQuery));
+}
+
+/**
+ * A prebuilt sort function for `sortFilteredOptions` that sorts options by relevance to the search query.
+ * Prioritizes: exact matches > starts with > contains > alphabetical.
+ *
+ * @param getLabel - Function to extract the label string from the option value. Defaults to using `title` property.
+ *
+ * @example
+ * ```tsx
+ * <SelectInput
+ *   filterable
+ *   sortFilteredOptions={sortByRelevance((value) => value.name)}
+ *   // ...
+ * />
+ * ```
+ */
+export function sortByRelevance<T>(
+  getLabel: (value: T) => string = (value) => (value as { title: string }).title,
+): (a: SelectInputOptionItem<T>, b: SelectInputOptionItem<T>, searchQuery: string) => number {
+  return (a, b, searchQuery) => {
+    const normalizedQuery = searchQuery.toLowerCase();
+    const labelA = getLabel(a.value).toLowerCase();
+    const labelB = getLabel(b.value).toLowerCase();
+
+    // Prioritize exact matches
+    const aExactMatch = labelA === normalizedQuery;
+    const bExactMatch = labelB === normalizedQuery;
+    if (aExactMatch && !bExactMatch) return -1;
+    if (!aExactMatch && bExactMatch) return 1;
+
+    // Then prioritize options where label starts with the search query
+    const aStartsWith = labelA.startsWith(normalizedQuery);
+    const bStartsWith = labelB.startsWith(normalizedQuery);
+    if (aStartsWith && !bStartsWith) return -1;
+    if (!aStartsWith && bStartsWith) return 1;
+
+    // Then prioritize options where label contains the search query
+    const aContains = labelA.includes(normalizedQuery);
+    const bContains = labelB.includes(normalizedQuery);
+    if (aContains && !bContains) return -1;
+    if (!aContains && bContains) return 1;
+
+    // Finally sort alphabetically
+    return labelA.localeCompare(labelB);
+  };
+}

package/src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx

@@ -0,0 +1,36 @@
+import { ListboxButton } from '@headlessui/react';
+import mergeProps from 'merge-props';
+import { useContext } from 'react';
+import { PolymorphicWithOverrides } from '../../../common/polymorphicWithOverrides/PolymorphicWithOverrides';
+import { Merge } from '../../../utils';
+import { SelectInputTriggerButtonPropsContext } from '../SelectInput.contexts';
+
+export type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
+
+export type SelectInputTriggerButtonProps<
+  T extends SelectInputTriggerButtonElementType = 'button',
+> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;
+
+/**
+ * The trigger button component for SelectInput.
+ * Uses Headless UI's ListboxButton with polymorphic support to allow
+ * rendering as different element types.
+ */
+export function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({
+  as = 'button' as T,
+  ...restProps
+}: SelectInputTriggerButtonProps<T>) {
+  const { ref, onClick, onKeyDown, size, ...interactionProps } = useContext(
+    SelectInputTriggerButtonPropsContext,
+  );
+
+  return (
+    <ListboxButton
+      ref={ref}
+      as={PolymorphicWithOverrides}
+      role="combobox"
+      __overrides={{ as, size, ...interactionProps } as Record<string, unknown>}
+      {...mergeProps({ onClick, onKeyDown }, restProps)}
+    />
+  );
+}

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

@@ -0,0 +1,5 @@
+export { SelectInputTriggerButton } from './SelectInputTriggerButton';
+export type {
+  SelectInputTriggerButtonElementType,
+  SelectInputTriggerButtonProps,
+} from './SelectInputTriggerButton';

package/src/inputs/{SelectInput.docs.mdx → SelectInput/_stories/SelectInput.docs.mdx}

@@ -1,5 +1,4 @@
 import { Meta } from '@storybook/addon-docs/blocks';
-import { MoneyInput } from '..';
 
 <Meta title="Forms/SelectInput/Accessibility" />
 

package/src/inputs/{SelectInput.story.tsx → SelectInput/_stories/SelectInput.story.tsx}

@@ -5,19 +5,19 @@ import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-import Button from '../button';
-import { getMonthNames } from '../common/dateUtils';
-import Drawer from '../drawer';
-import { Field } from '../field/Field';
-import Modal from '../modal';
-import { wait } from '../test-utils/wait';
+import Button from '../../../button';
+import { getMonthNames } from '../../../common/dateUtils';
+import Drawer from '../../../drawer';
+import { Field } from '../../../field/Field';
+import Modal from '../../../modal';
+import { wait } from '../../../test-utils/wait';
 import {
   SelectInput,
   type SelectInputItem,
   SelectInputOptionContent,
   type SelectInputProps,
   SelectInputTriggerButton,
-} from './SelectInput';
+} from '..';
 
 const meta = {
   title: 'Forms/SelectInput',
@@ -35,7 +35,10 @@ const meta = {
       },
     },
   },
-  parameters: { actions: { argTypesRegex: '' } },
+  parameters: {
+    docs: { toc: true },
+    actions: { argTypesRegex: '' },
+  },
 } satisfies Meta<typeof SelectInput>;
 export default meta;
 

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

@@ -2,16 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fireEvent, fn, type Mock, screen, userEvent, within } from 'storybook/test';
 import { useState } from 'react';
 
-import { allModes } from '../../.storybook/modes';
-import Body from '../body';
-import { Field } from '../field/Field';
-import { lorem5, lorem500 } from '../test-utils';
-import {
-  SelectInput,
-  SelectInputOptionContent,
-  type SelectInputProps,
-  sortByRelevance,
-} from './SelectInput';
+import { allModes } from '../../../../.storybook/modes';
+import Body from '../../../body';
+import { Field } from '../../../field/Field';
+import { lorem5, lorem500 } from '../../../test-utils';
+import { sortByRelevance } from '../SelectInput.utils';
+import { SelectInput, SelectInputOptionContent, type SelectInputProps } from '..';
 
 const meta = {
   title: 'Forms/SelectInput/Tests',

package/src/inputs/SelectInput/components.ts

@@ -0,0 +1,10 @@
+// Re-export all components from their new locations
+export * from './ClearButton';
+export * from './Option';
+export * from './OptionContent';
+export * from './TriggerButton';
+export * from './ItemView';
+export * from './Options';
+export * from './BottomSheet';
+export * from './Popover';
+export * from './ButtonInput';

package/src/inputs/SelectInput/index.ts

@@ -0,0 +1,12 @@
+// Export from the new structure
+export * from './SelectInput';
+export * from './SelectInput.types';
+
+// Export components directly
+export * from './ClearButton';
+export * from './Option';
+export * from './OptionContent';
+export * from './TriggerButton';
+export * from './DefaultRenderTrigger';
+export * from './ItemView';
+export * from './Options';

package/src/main.css

@@ -4002,14 +4002,91 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-.np-select-input-content {
+.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-placeholder {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
+.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;
@@ -4088,92 +4165,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   contain: strict;
   height: 100%;
 }
-.np-select-input-separator-item {
-  margin: 8px;
-  margin: var(--size-8);
-  border-top-width: 1px;
-}
-.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-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-footer {
   padding: 4px 24px 16px;
   padding: var(--size-4) var(--size-24) var(--size-16);
@@ -4224,6 +4215,15 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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);
+}
 .np-text-area {
   min-height: 72px;
   min-height: var(--size-72);

package/src/main.less

@@ -44,7 +44,7 @@
 @import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
-@import "./inputs/SelectInput.less";
+@import "./inputs/SelectInput/SelectInput.less";
 @import "./inputs/TextArea.less";
 @import "./instructionsList/InstructionsList.less";
 @import "./link/Link.less";