@transferwise/components 0.0.0-experimental-e9426b6 → 0.0.0-experimental-0397551

package/src/inputs/SelectInput/components/SelectInputOption/SelectInputOption.less

@@ -1,32 +0,0 @@
-.np-select-input-option-container {
-  display: flex;
-  cursor: default;
-  user-select: none;
-  align-items: center;
-  column-gap: var(--size-8);
-  border-radius: var(--radius-small);
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-interactive-primary);
-
-  &:focus {
-    outline: none;
-  }
-
-  &--active {
-    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-  }
-
-  &--disabled {
-    opacity: 0.45;
-  }
-}
-
-.np-select-input-option {
-  flex: 1;
-}
-
-.np-select-input-option-check {
-  &--not-selected {
-    visibility: hidden;
-  }
-}

package/src/inputs/SelectInput/components/SelectInputOption/SelectInputOption.tsx

@@ -1,51 +0,0 @@
-import { ListboxOption } from '@headlessui/react';
-import { Check } from '@transferwise/icons';
-import { clsx } from 'clsx';
-import { useContext, createContext } from 'react';
-
-export const SelectInputItemsCountContext = createContext<number | undefined>(undefined);
-export const SelectInputItemPositionContext = createContext<number | undefined>(undefined);
-
-interface SelectInputOptionProps<T = string> {
-  value: T;
-  disabled?: boolean;
-  children?: React.ReactNode;
-}
-
-export function SelectInputOption<T = string>({
-  value,
-  disabled,
-  children,
-}: SelectInputOptionProps<T>) {
-  const itemsCount = useContext(SelectInputItemsCountContext);
-  const itemPosition = useContext(SelectInputItemPositionContext);
-  return (
-    <ListboxOption
-      as="div"
-      value={value}
-      aria-setsize={itemsCount}
-      aria-posinset={itemPosition}
-      disabled={disabled}
-      className={({ active, disabled: uiDisabled }) =>
-        clsx(
-          'np-select-input-option-container np-text-body-large',
-          active && 'np-select-input-option-container--active',
-          uiDisabled && 'np-select-input-option-container--disabled',
-        )
-      }
-    >
-      {({ selected }) => (
-        <>
-          <div className="np-select-input-option">{children}</div>
-          <Check
-            size={16}
-            className={clsx(
-              'np-select-input-option-check',
-              !selected && 'np-select-input-option-check--not-selected',
-            )}
-          />
-        </>
-      )}
-    </ListboxOption>
-  );
-}

package/src/inputs/SelectInput/components/SelectInputOption/index.ts

@@ -1,5 +0,0 @@
-export {
-  SelectInputOption,
-  SelectInputItemsCountContext,
-  SelectInputItemPositionContext,
-} from './SelectInputOption';

package/src/inputs/SelectInput/components/SelectInputOptionContent/SelectInputOptionContent.css

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

package/src/inputs/SelectInput/components/SelectInputOptionContent/SelectInputOptionContent.less

@@ -1,38 +0,0 @@
-.np-select-input-option-content-container {
-  display: flex;
-  align-items: center;
-  column-gap: var(--size-8);
-  color: var(--color-content-primary);
-}
-
-.np-select-input-option-content-icon {
-  display: flex;
-
-  &--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: 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: var(--size-8);
-    margin-left: var(--size-8);
-  }
-}

package/src/inputs/SelectInput/components/SelectInputOptionContent/SelectInputOptionContent.tsx

@@ -1,67 +0,0 @@
-import { clsx } from 'clsx';
-import { useContext, createContext } from 'react';
-
-export const SelectInputOptionContentWithinTriggerContext = createContext(false);
-
-export interface SelectInputOptionContentProps {
-  title: string;
-  note?: string;
-  description?: string;
-  icon?: React.ReactNode;
-}
-
-export function SelectInputOptionContent({
-  title,
-  note,
-  description,
-  icon,
-}: SelectInputOptionContentProps) {
-  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
-
-  return (
-    <div
-      className={clsx(
-        'np-select-input-option-content-container',
-        (note || description) && 'np-text-body-large',
-      )}
-    >
-      {icon ? (
-        <div
-          className={clsx(
-            'np-select-input-option-content-icon',
-            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',
-          )}
-        >
-          {icon}
-        </div>
-      ) : null}
-
-      <div className="np-select-input-option-content-text">
-        <div
-          className={clsx(
-            'np-select-input-option-content-text-line-1',
-            withinTrigger && 'np-select-input-option-content-text-within-trigger',
-          )}
-        >
-          <div className="d-inline">{title}</div>
-          {note ? (
-            <span className="np-select-input-option-content-text-secondary np-text-body-default">
-              {note}
-            </span>
-          ) : null}
-        </div>
-
-        {description ? (
-          <div
-            className={clsx(
-              'np-select-input-option-content-text-secondary np-text-body-default',
-              withinTrigger && 'np-select-input-option-content-text-within-trigger',
-            )}
-          >
-            {description}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/src/inputs/SelectInput/components/SelectInputOptionContent/index.ts

@@ -1,5 +0,0 @@
-export {
-  SelectInputOptionContent,
-  SelectInputOptionContentWithinTriggerContext,
-} from './SelectInputOptionContent';
-export type { SelectInputOptionContentProps } from './SelectInputOptionContent';

package/src/inputs/SelectInput/components/SelectInputOptions/SelectInputOptions.less

@@ -1,75 +0,0 @@
-.np-select-input-options-status {
-  display: flex;
-  align-items: center;
-  column-gap: var(--size-8);
-  padding: var(--size-8) var(--size-24) 0px;
-}
-
-.np-select-input-options-status-icon {
-  padding: 0 var(--size-4);
-  color: var(--color-content-tertiary);
-}
-
-.np-select-input-query-container {
-  display: flex;
-  flex-direction: column;
-  padding: var(--size-8);
-}
-
-.np-select-input-listbox-container {
-  position: relative;
-  height: var(--initial-height);
-  scroll-padding-top: var(--size-8);
-  scroll-padding-bottom: var(--size-8);
-  overflow-y: auto;
-
-  @media (--screen-sm) {
-    & {
-      height: auto;
-    }
-  }
-
-  &--virtualized {
-    /* The wrapping element shrinks this as needed */
-    height: 100vh;
-  }
-
-  &--has-group {
-    scroll-padding-top: var(--size-32);
-  }
-}
-
-.np-select-input-listbox {
-  border-radius: var(--radius-small);
-  padding: var(--size-8);
-
-  .focus-ring();
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-
-  .np-select-input-listbox-container--virtualized & {
-    /* 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-options-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-
-  &:focus {
-    outline: none;
-  }
-
-  @media (--screen-sm) {
-    & {
-      max-height: 28rem /* 448px */;
-    }
-  }
-}
-
-.np-select-input-footer {
-  padding: var(--size-4) var(--size-24) var(--size-16);
-}

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

@@ -1,369 +0,0 @@
-import { ListboxOptions } from '@headlessui/react';
-import { CrossCircle } from '@transferwise/icons';
-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 messages from '../../SelectInput.messages';
-import { SelectInputProps, SelectInputOptionItem, SelectInputItem } from '../../SelectInput.types';
-import {
-  searchableString,
-  dedupeSelectInputItems,
-  filterSelectInputItems,
-  selectInputOptionItemIncludesNeedle,
-  sortSelectInputItems,
-} from '../../SelectInput.helpers';
-
-import { SelectInputOptionsContainer } from '../SelectInputOptionsContainer';
-import { SelectInputItemView } from '../SelectInputItemView';
-import { SelectInputItemsCountContext, SelectInputItemPositionContext } from '../SelectInputOption';
-
-const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
-
-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 > 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/components/SelectInputOptions/index.ts

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