@transferwise/components 0.0.0-experimental-a9ab536 → 0.0.0-experimental-3df0347

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

@@ -1,418 +0,0 @@
-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, virtualization, 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

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

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

@@ -1,46 +0,0 @@
-.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/SelectInput/Popover/index.ts

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

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

@@ -1,40 +0,0 @@
-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

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