@transferwise/components 0.0.0-experimental-e95c8a5 → 0.0.0-experimental-39ab3ec

package/src/inputs/SelectInput.tsx

@@ -1,565 +0,0 @@
-import { Listbox as ListboxBase } from '@headlessui/react';
-import { useId } from '@radix-ui/react-id';
-import { Check, ChevronDown, Cross } from '@transferwise/icons';
-import classNames from 'classnames';
-import { createContext, useState, useRef, forwardRef, useEffect, useMemo, useContext } from 'react';
-import { useIntl } from 'react-intl';
-import mergeRefs from 'react-merge-refs';
-
-import { useEffectEvent } from '../common/hooks/useEffectEvent';
-import { useScreenSize } from '../common/hooks/useScreenSize';
-import { Breakpoint } from '../common/propsValues/breakpoint';
-import messages from '../dateLookup/dateTrigger/DateTrigger.messages';
-import { wrapInFragment } from '../utilities/wrapInFragment';
-
-import { InputGroup } from './InputGroup';
-import { SearchInput } from './SearchInput';
-import { BottomSheet } from './_BottomSheet';
-import { ButtonInput, type ButtonInputProps } from './_ButtonInput';
-import { Popover } from './_Popover';
-
-function searchableString(value: string) {
-  return value.trim().replace(/\s+/gu, ' ').toLowerCase();
-}
-
-function inferSearchableStrings(value: unknown) {
-  if (typeof value === 'string') {
-    return [searchableString(value)];
-  }
-
-  if (typeof value === 'object' && value != null) {
-    return Object.values(value)
-      .filter((innerValue): innerValue is string => typeof innerValue === 'string')
-      .map((innerValue) => searchableString(innerValue));
-  }
-
-  return [];
-}
-
-const SelectInputHasValueContext = createContext(false);
-
-const SelectInputOptionContentCompactContext = createContext(false);
-
-interface SelectInputOptionItem<T = string> {
-  type: 'option';
-  value: T;
-  filterMatchers?: readonly string[];
-  disabled?: boolean;
-}
-
-interface SelectInputGroupItem<T = string> {
-  type: 'group';
-  label: string;
-  options: readonly SelectInputOptionItem<T>[];
-}
-
-interface SelectInputSeparatorItem {
-  type: 'separator';
-}
-
-export type SelectInputItem<T = string> =
-  | SelectInputOptionItem<T>
-  | SelectInputGroupItem<T>
-  | SelectInputSeparatorItem;
-
-function dedupeSelectInputOptionItem<T>(
-  item: SelectInputOptionItem<T>,
-  existingValues: Set<T>,
-): SelectInputOptionItem<T | undefined> {
-  if (existingValues.has(item.value)) {
-    return {
-      ...item,
-      value: undefined,
-    };
-  }
-  existingValues.add(item.value);
-  return item;
-}
-
-function dedupeSelectInputItems<T>(
-  items: readonly SelectInputItem<T>[],
-): SelectInputItem<T | undefined>[] {
-  const existingValues = new Set<T>();
-  return items.map((item) => {
-    switch (item.type) {
-      case 'option': {
-        return dedupeSelectInputOptionItem(item, existingValues);
-      }
-      case 'group': {
-        return {
-          ...item,
-          options: item.options.map((option) =>
-            dedupeSelectInputOptionItem(option, existingValues),
-          ),
-        };
-      }
-      default:
-    }
-    return item;
-  });
-}
-
-export interface SelectInputProps<T = string> {
-  name?: string;
-  placeholder?: string;
-  // TODO: multiple?: boolean;
-  items: readonly SelectInputItem<NonNullable<T>>[];
-  defaultValue?: T;
-  value?: T;
-  renderValue?: (value: NonNullable<T>, compact: boolean) => React.ReactNode;
-  compareValues?:
-    | (keyof NonNullable<T> & string)
-    | ((a: T | undefined, b: T | undefined) => boolean);
-  filterable?: boolean;
-  filterPlaceholder?: string;
-  disabled?: boolean;
-  className?: string;
-  onChange?: (value: T) => void;
-  onClear?: () => void;
-}
-
-export function SelectInput<T>({
-  name,
-  placeholder,
-  items,
-  defaultValue,
-  value: controlledValue,
-  renderValue = wrapInFragment,
-  compareValues,
-  filterable,
-  filterPlaceholder,
-  disabled,
-  className,
-  onChange,
-  onClear,
-}: SelectInputProps<T>) {
-  const intl = useIntl();
-
-  const [open, setOpen] = useState(false);
-
-  const triggerRef = useRef<HTMLButtonElement>(null);
-
-  const screenSm = useScreenSize(Breakpoint.SMALL);
-  const OptionsOverlay = screenSm ? Popover : BottomSheet;
-
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const listboxRef = useRef<HTMLDivElement>(null);
-  const controllerRef = filterable ? searchInputRef : listboxRef;
-
-  return (
-    <ListboxBase
-      name={name}
-      defaultValue={defaultValue}
-      value={controlledValue}
-      // TODO: Remove assertion when upgrading TypeScript to v5
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      by={compareValues as any}
-      disabled={disabled}
-      onChange={(value) => {
-        setOpen(false);
-        onChange?.(value);
-      }}
-    >
-      {({ disabled: uiDisabled, value }) => (
-        <SelectInputHasValueContext.Provider value={value != null}>
-          <InputGroup
-            addonEnd={{
-              content: (
-                <span
-                  className={classNames(
-                    'np-select-input-addon-container',
-                    uiDisabled && 'disabled',
-                  )}
-                >
-                  {onClear != null && value != null ? (
-                    <>
-                      <button
-                        type="button"
-                        aria-label={intl.formatMessage(messages.ariaLabel)}
-                        disabled={uiDisabled}
-                        className="np-select-input-addon np-select-input-addon--interactive"
-                        onClick={(event) => {
-                          event.preventDefault();
-                          onClear();
-                          triggerRef.current?.focus({ preventScroll: true });
-                        }}
-                      >
-                        <Cross size={16} />
-                      </button>
-                      <span className="np-select-input-addon-separator" />
-                    </>
-                  ) : null}
-
-                  <span className="np-select-input-addon">
-                    <ChevronDown size={16} />
-                  </span>
-                </span>
-              ),
-              padding: 'sm',
-            }}
-            className={className}
-          >
-            <OptionsOverlay
-              open={open}
-              renderTrigger={({ ref, getInteractionProps }) => (
-                <ListboxBase.Button
-                  ref={mergeRefs([ref, triggerRef])}
-                  as={SelectInputButton}
-                  overrides={getInteractionProps()}
-                  onClick={() => {
-                    setOpen((prev) => !prev);
-                  }}
-                >
-                  {value != null ? (
-                    <SelectInputOptionContentCompactContext.Provider value>
-                      {renderValue(value, true)}
-                    </SelectInputOptionContentCompactContext.Provider>
-                  ) : (
-                    <span className="np-select-input-placeholder">{placeholder}</span>
-                  )}
-                </ListboxBase.Button>
-              )}
-              initialFocusRef={controllerRef}
-              padding="none"
-              onClose={() => {
-                setOpen(false);
-              }}
-            >
-              <SelectInputOptions
-                items={items}
-                renderValue={renderValue}
-                filterable={filterable}
-                filterPlaceholder={filterPlaceholder}
-                searchInputRef={searchInputRef}
-                listboxRef={listboxRef}
-              />
-            </OptionsOverlay>
-          </InputGroup>
-        </SelectInputHasValueContext.Provider>
-      )}
-    </ListboxBase>
-  );
-}
-
-interface SelectInputButtonProps extends ButtonInputProps {
-  overrides?: { [key: string]: unknown };
-}
-
-const SelectInputButton = forwardRef(function SelectInputButton(
-  { overrides, ...restProps }: SelectInputButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement>,
-) {
-  return <ButtonInput ref={ref} {...restProps} {...overrides} />;
-});
-
-interface SelectInputOptionsContainerProps extends React.ComponentPropsWithRef<'div'> {
-  onAriaActiveDescendantChange: (value: React.AriaAttributes['aria-activedescendant']) => void;
-}
-
-const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContainer(
-  {
-    'aria-orientation': ariaOrientation,
-    'aria-activedescendant': ariaActiveDescendant,
-    role,
-    tabIndex,
-    onAriaActiveDescendantChange,
-    onKeyDown,
-    ...restProps
-  }: SelectInputOptionsContainerProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
-  useEffect(() => {
-    handleAriaActiveDescendantChange(ariaActiveDescendant);
-  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div
-      ref={ref}
-      onKeyDown={(event) => {
-        // Prevent absorbing dismissal requests too early
-        if (event.key !== 'Escape') {
-          onKeyDown?.(event);
-        }
-      }}
-      {...restProps}
-    />
-  );
-});
-
-interface SelectInputOptionsProps<T = string>
-  extends Pick<SelectInputProps<T>, 'items' | 'renderValue' | 'filterable' | 'filterPlaceholder'> {
-  searchInputRef: React.RefObject<HTMLInputElement>;
-  listboxRef: React.RefObject<HTMLDivElement>;
-}
-
-function SelectInputOptions<T>({
-  items,
-  renderValue = wrapInFragment,
-  filterable,
-  filterPlaceholder,
-  searchInputRef,
-  listboxRef,
-}: SelectInputOptionsProps<T>) {
-  const [query, setQuery] = useState('');
-  const needle = useMemo(() => (query ? searchableString(query) : null), [query]);
-
-  const listboxContainerRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (listboxContainerRef.current != null) {
-      listboxContainerRef.current.style.setProperty(
-        '--initial-height',
-        `${listboxContainerRef.current.offsetHeight}px`,
-      );
-    }
-  }, []);
-
-  const listboxId = useId();
-
-  const controllerRef = filterable ? searchInputRef : listboxRef;
-
-  return (
-    <ListboxBase.Options
-      as={SelectInputOptionsContainer}
-      static
-      className="np-select-input-options-container"
-      onAriaActiveDescendantChange={(value: React.AriaAttributes['aria-activedescendant']) => {
-        if (controllerRef.current != null) {
-          if (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}
-            shape="rectangle"
-            placeholder={filterPlaceholder}
-            value={query}
-            aria-controls={listboxId}
-            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) => {
-              setQuery(event.currentTarget.value);
-            }}
-          />
-        </div>
-      ) : null}
-
-      <div
-        ref={listboxContainerRef}
-        className={classNames(
-          'np-select-input-listbox-container',
-          items.some((item) => item.type === 'group') &&
-            'np-select-input-listbox-container--has-group',
-        )}
-      >
-        <div
-          ref={listboxRef}
-          id={listboxId}
-          role="listbox"
-          aria-orientation="vertical"
-          tabIndex={0}
-          className="np-select-input-listbox"
-        >
-          {(needle == null ? items : dedupeSelectInputItems(items)).map((item, index) => (
-            <SelectInputItemView
-              // eslint-disable-next-line react/no-array-index-key
-              key={index}
-              item={item}
-              renderValue={renderValue}
-              needle={needle}
-            />
-          ))}
-        </div>
-      </div>
-    </ListboxBase.Options>
-  );
-}
-
-interface SelectInputItemViewProps<
-  T = string,
-  I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,
-> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {
-  item: I;
-  needle: string | null;
-}
-
-function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemViewProps<T>) {
-  switch (item.type) {
-    case 'option': {
-      if (
-        item.value != null &&
-        (!needle ||
-          inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
-            haystack.includes(needle),
-          ))
-      ) {
-        return (
-          <SelectInputOption value={item.value} disabled={item.disabled}>
-            {renderValue(item.value, false)}
-          </SelectInputOption>
-        );
-      }
-      break;
-    }
-    case 'group': {
-      return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;
-    }
-    case 'separator': {
-      if (needle == null) {
-        return <hr className="np-select-input-separator-item" aria-hidden />;
-      }
-      break;
-    }
-  }
-  return null;
-}
-
-interface SelectInputGroupItemViewProps<T = string>
-  extends SelectInputItemViewProps<T, SelectInputGroupItem<T | undefined>> {}
-
-function SelectInputGroupItemView<T>({
-  item,
-  renderValue,
-  needle,
-}: SelectInputGroupItemViewProps<T>) {
-  const headerId = useId();
-
-  return (
-    // An empty container may be rendered when no options match `needle`
-    // However, pre-filtering would result in worse performance overall
-    <section
-      role="group"
-      aria-labelledby={headerId}
-      className={classNames(needle == null && 'np-select-input-group-item--without-needle')}
-    >
-      {needle == null ? (
-        <header
-          id={headerId}
-          role="presentation"
-          className="np-select-input-group-item-header np-text-title-group"
-        >
-          {item.label}
-        </header>
-      ) : null}
-      {item.options.map((option, index) => (
-        <SelectInputItemView
-          // eslint-disable-next-line react/no-array-index-key
-          key={index}
-          item={option}
-          renderValue={renderValue}
-          needle={needle}
-        />
-      ))}
-    </section>
-  );
-}
-
-interface SelectInputOptionProps<T = string> {
-  value: T;
-  disabled?: boolean;
-  children?: React.ReactNode;
-}
-
-function SelectInputOption<T>({ value, disabled, children }: SelectInputOptionProps<T>) {
-  const parentHasValue = useContext(SelectInputHasValueContext);
-
-  // Avoid flash during exit transition
-  const { current: cachedParentHasValue } = useRef(parentHasValue);
-
-  return (
-    <ListboxBase.Option
-      as="div"
-      value={value}
-      disabled={disabled}
-      className={({ active, disabled: uiDisabled }) =>
-        classNames(
-          'np-select-input-option-container np-text-body-large',
-          active && 'np-select-input-option-container--active',
-          uiDisabled && 'np-select-input-option-container--disabled',
-        )
-      }
-    >
-      {({ selected }) => (
-        <>
-          {cachedParentHasValue ? (
-            <Check
-              size={16}
-              className={classNames(!selected && 'np-select-input-option-check--not-selected')}
-            />
-          ) : null}
-          <div className="np-select-input-option">{children}</div>
-        </>
-      )}
-    </ListboxBase.Option>
-  );
-}
-
-export interface SelectInputOptionContentProps {
-  title: string;
-  note?: string;
-  description?: string;
-  icon?: React.ReactNode;
-}
-
-export function SelectInputOptionContent({
-  title,
-  note,
-  description,
-  icon,
-}: SelectInputOptionContentProps) {
-  const compact = useContext(SelectInputOptionContentCompactContext);
-
-  return (
-    <div className="np-select-input-option-content-container np-text-body-large">
-      {icon ? (
-        <div
-          className={classNames(
-            'np-select-input-option-content-icon',
-            !compact && 'np-select-input-option-content-icon--not-compact',
-          )}
-        >
-          {icon}
-        </div>
-      ) : null}
-
-      <div className="np-select-input-option-content-text">
-        <div
-          className={classNames(
-            'np-select-input-option-content-text-line-1',
-            compact && 'np-select-input-option-content-text-compact',
-          )}
-        >
-          <h4 className="d-inline np-text-body-large">{title}</h4>
-          {note ? (
-            <span className="np-select-input-option-content-text-secondary np-text-body-default">
-              {note}
-            </span>
-          ) : null}
-        </div>
-
-        {description ? (
-          <div
-            className={classNames(
-              'np-select-input-option-content-text-secondary np-text-body-default',
-              compact && 'np-select-input-option-content-text-compact',
-            )}
-          >
-            {description}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/src/inputs/_BottomSheet.less

@@ -1,107 +0,0 @@
-.np-bottom-sheet-v2-container {
-  position: relative;
-  z-index: 50;
-}
-
-.np-bottom-sheet-v2-backdrop-container {
-  &--enter, &--leave {
-    transition-property: opacity;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-  }
-
-  &--enter-from, &--leave-to {
-    opacity: 0;
-  }
-}
-
-.np-bottom-sheet-v2-backdrop {
-  position: fixed;
-  inset: 0px;
-  background-color: var(--color-content-primary);
-  opacity: 0.4;
-}
-
-.np-bottom-sheet-v2 {
-  position: fixed;
-  inset: 0px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  padding-left: var(--size-8);
-  padding-right: var(--size-8);
-  padding-top: var(--size-64);
-}
-
-.np-bottom-sheet-v2-content {
-  max-height: 100%;
-
-  &--enter, &--leave {
-    transition-property: transform;
-    transition-timing-function: ease-out;
-    transition-duration: 300ms;
-
-    @media (prefers-reduced-motion: reduce) {
-      & {
-        transition-property: opacity;
-      }
-    }
-  }
-
-  &--enter-from, &--leave-to {
-    @media (prefers-reduced-motion: no-preference) {
-      & {
-        transform: translateY(100%);
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      & {
-        opacity: 0;
-      }
-    }
-  }
-}
-
-.np-bottom-sheet-v2-content-inner-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  border-top-left-radius: 32px; /* TODO: Tokenize */
-  border-top-right-radius: 32px; /* TODO: Tokenize */
-  background-color: var(--color-background-elevated);
-  box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.np-bottom-sheet-v2-header {
-  align-self: flex-end;
-  padding: var(--size-16);
-}
-
-.np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
-  display: grid;
-  row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-
-  &--has-title {
-    grid-template-rows: auto 1fr;
-  }
-
-  &--padding-md {
-    padding: var(--size-16);
-  }
-}
-
-.np-bottom-sheet-v2-title {
-  color: var(--color-content-primary);
-}
-
-.np-bottom-sheet-v2-body {
-  color: var(--color-content-secondary);
-}