@transferwise/components 0.0.0-experimental-bcfa03a → 0.0.0-experimental-5cd0315

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

@@ -1,372 +0,0 @@
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
-import { Virtualizer, type VirtualizerHandle } from 'virtua';
-import { ListboxOptions } from '@headlessui/react';
-import { CrossCircle } from '@transferwise/icons';
-import { useIntl } from 'react-intl';
-import { clsx } from 'clsx';
-
-import { SearchInput } from '../../SearchInput';
-import messages from '../SelectInput.messages';
-import type {
-  SelectInputProps,
-  SelectInputOptionItem,
-  SelectInputItem,
-} from '../SelectInput.types';
-import {
-  searchableString,
-  dedupeSelectInputItems,
-  filterSelectInputItems,
-  selectInputOptionItemIncludesNeedle,
-  sortSelectInputItems,
-} from '../SelectInput.helpers';
-import { SELECT_INPUT_MAX_ITEMS_WITHOUT_VIRTUALIZATION } from '../SelectInput.constants';
-
-import { SelectInputOptionsContainer } from './OptionsContainer';
-import { SelectInputItemView } from './ItemView';
-import { SelectInputItemsCountContext, SelectInputItemPositionContext } from './ItemView/Option';
-
-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;
-}
-
-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 filtered = filterSelectInputItems(dedupeSelectInputItems(items, compareValues), (item) =>
-      selectInputOptionItemIncludesNeedle(item, needle),
-    );
-
-    if (sortFilteredOptions) {
-      return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
-    }
-
-    return filtered;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [needle, items, compareValues]);
-  const resultsEmpty = needle != null && filteredItems.length === 0;
-
-  const virtualized = filteredItems.length > SELECT_INPUT_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[]>([]);
-  useEffect(() => {
-    // Ensure the 'End' key works as intended by keeping the last item mounted
-    setMountedIndexes((prevMountedIndexes) => {
-      const indexes = new Set(prevMountedIndexes);
-      indexes.add(filteredItems.length - 1);
-      return [...indexes]; // Sorting is redundant by nature here
-    });
-  }, [
-    needle, // Needed as `filteredItems.length` may be equal between two updates
-    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) => {
-              // 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}
-              key={needle}
-              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) => {
-                  const indexes = new Set(prevMountedIndexes);
-
-                  for (let index = startIndex; index <= endIndex; index += 1) {
-                    indexes.add(index);
-                  }
-
-                  return [...indexes].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

@@ -1 +0,0 @@
-export { SelectInputOptions } from './SelectInputOptions';

package/src/inputs/SelectInput/SelectInput.constants.ts

@@ -1 +0,0 @@
-export const SELECT_INPUT_MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;

package/src/inputs/SelectInput/SelectInput.helpers.ts

@@ -1,152 +0,0 @@
-import type { SelectInputOptionItem, SelectInputItem } from './SelectInput.types';
-
-/**
- * Normalises a string for searching by trimming, normalising whitespace,
- * removing diacritics, and 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()
-  );
-}
-
-/**
- * Infers searchable strings from a value.
- * Extracts string values from objects or returns the string itself.
- */
-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 [];
-}
-
-/**
- * Checks if a select input option item matches the search needle.
- */
-export function selectInputOptionItemIncludesNeedle<T>(
-  item: SelectInputOptionItem<T>,
-  needle: string,
-) {
-  return inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
-    haystack.includes(needle),
-  );
-}
-
-/**
- * Deduplicates a single option item by checking against existing values.
- * Returns the item with value set to undefined if it's a duplicate.
- */
-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;
-  });
-}
-
-/**
- * Filters select input items based on a predicate function.
- * Groups are included if at least one option matches 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));
-}

package/src/inputs/SelectInput/SelectInput.less

@@ -1,40 +0,0 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
-@import "../_BottomSheet.less";
-@import "../_ButtonInput.less";
-@import "../_Popover.less";
-@import "./Options/SelectInputOptions.less";
-@import "./OptionContent/SelectInputOptionContent.less";
-@import "./DefaultTrigger/SelectInputDefaultTrigger.less";
-
-.np-select-input-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.np-select-input-placeholder {
-  color: var(--color-content-tertiary);
-}
-
-.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();
-  }
-}