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

package/src/inputs/SelectInput/SelectInput.tsx

@@ -1,247 +0,0 @@
-import { Listbox as ListboxBase } from '@headlessui/react';
-import mergeProps from 'merge-props';
-import { useDeferredValue, useEffect, useRef, useState } from 'react';
-
-import { useEffectEvent } from '../../common/hooks/useEffectEvent';
-import { useScreenSize } from '../../common/hooks/useScreenSize';
-import { Breakpoint } from '../../common/propsValues/breakpoint';
-
-import { BottomSheet } from '../_BottomSheet';
-import { Popover } from '../_Popover';
-import { useInputAttributes } from '../contexts';
-import { searchableString } from './SelectInput.helpers';
-import { SelectInputProps } from './SelectInput.types';
-import { SelectInputTriggerButtonPropsContext } from './components/SelectInputTriggerButton';
-import { SelectInputOptions } from './components/SelectInputOptions';
-import { SelectInputOptionContentWithinTriggerContext } from './components/SelectInputOptionContent';
-import { SelectInputDefaultTrigger } from './components/SelectInputDefaultTrigger';
-
-const noop = () => {};
-
-export function SelectInput<T = string, M extends boolean = false>({
-  id: idProp,
-  parentId,
-  name,
-  multiple,
-  placeholder,
-  autocomplete,
-  items,
-  defaultValue,
-  value: controlledValue,
-  compareValues,
-  renderValue = String,
-  renderFooter,
-  renderTrigger = SelectInputDefaultTrigger,
-  filterable,
-  filterPlaceholder,
-  sortFilteredOptions,
-  disabled,
-  size = 'md',
-  className,
-  UNSAFE_triggerButtonProps,
-  triggerRef: externalTriggerRef,
-  onFilterChange = noop,
-  onChange,
-  onOpen,
-  onClose,
-  onClear,
-}: SelectInputProps<T, M>) {
-  const inputAttributes = useInputAttributes({ nonLabelable: true });
-  const id = idProp ?? inputAttributes.id;
-
-  const [open, setOpen] = useState(false);
-  const initialized = useRef(false);
-  const handleClose = useEffectEvent(onClose ?? (() => {}));
-  const handleOpen = useEffectEvent(onOpen ?? (() => {}));
-
-  useEffect(() => {
-    if (initialized.current) {
-      if (open) {
-        handleOpen?.();
-      } else {
-        handleClose?.();
-      }
-    } else {
-      initialized.current = true;
-    }
-  }, [handleClose, handleOpen, open]);
-
-  const [filterQuery, _setFilterQuery] = useState('');
-  const deferredFilterQuery = useDeferredValue(filterQuery);
-  const setFilterQuery = useEffectEvent((query: string) => {
-    _setFilterQuery(query);
-    if (query !== filterQuery) {
-      onFilterChange({
-        query,
-        queryNormalized: query ? searchableString(query) : null,
-      });
-    }
-  });
-
-  const internalTriggerRef = useRef<HTMLButtonElement | null>(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;
-
-  /**
-   * Attempts to resolve the `listbox` label
-   * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling
-   */
-  const getListBoxLabelProps = (): {
-    listBoxLabel?: string;
-    listBoxLabelledBy?: string;
-  } => {
-    if (UNSAFE_triggerButtonProps?.['aria-label']) {
-      return {
-        listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],
-      };
-    }
-
-    if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {
-      return {
-        listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],
-      };
-    }
-
-    if (inputAttributes['aria-labelledby']) {
-      return {
-        listBoxLabelledBy: inputAttributes['aria-labelledby'],
-      };
-    }
-
-    return {};
-  };
-
-  return (
-    <ListboxBase
-      name={name}
-      multiple={multiple}
-      defaultValue={defaultValue as M extends true ? T[] : T}
-      value={controlledValue as M extends true ? T[] : T}
-      by={compareValues}
-      disabled={disabled}
-      onChange={
-        ((value) => {
-          if (!multiple) {
-            setOpen(false);
-          }
-          onChange?.(value);
-        }) satisfies SelectInputProps<T, M>['onChange']
-      }
-    >
-      {({ disabled: uiDisabled, value }) => {
-        const placeholderShown =
-          multiple && Array.isArray(value) ? value.length === 0 : value == null;
-        return (
-          <OptionsOverlay
-            placement="bottom-start"
-            open={open}
-            renderTrigger={({ ref, getInteractionProps }) => (
-              <SelectInputTriggerButtonPropsContext.Provider
-                // eslint-disable-next-line react/jsx-no-constructed-context-values
-                value={{
-                  ref: (node) => {
-                    ref(node);
-                    if (externalTriggerRef) {
-                      // eslint-disable-next-line no-param-reassign
-                      externalTriggerRef.current = node;
-                    } else {
-                      internalTriggerRef.current = node;
-                    }
-                  },
-                  ...inputAttributes,
-                  ...UNSAFE_triggerButtonProps,
-                  id,
-                  ...mergeProps(
-                    {
-                      onClick: () => {
-                        setOpen((prev) => !prev);
-                      },
-                      onKeyDown: (event: React.KeyboardEvent) => {
-                        if (
-                          event.key === ' ' ||
-                          event.key === 'Enter' ||
-                          event.key === 'ArrowDown' ||
-                          event.key === 'ArrowUp'
-                        ) {
-                          setOpen((prev) => !prev);
-                        }
-                      },
-                    },
-                    getInteractionProps(),
-                  ),
-                }}
-              >
-                {renderTrigger({
-                  content: !placeholderShown ? (
-                    <SelectInputOptionContentWithinTriggerContext.Provider value>
-                      {multiple && Array.isArray(value)
-                        ? (value as readonly NonNullable<T>[])
-                            .map((option) => renderValue(option, true))
-                            .filter((node) => node != null)
-                            .join(', ')
-                        : renderValue(value as NonNullable<T>, true)}
-                    </SelectInputOptionContentWithinTriggerContext.Provider>
-                  ) : (
-                    placeholder
-                  ),
-                  placeholderShown,
-                  clear:
-                    onClear != null
-                      ? () => {
-                          onClear();
-                          (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({
-                            preventScroll: true,
-                          });
-                        }
-                      : undefined,
-                  disabled: uiDisabled,
-                  size,
-                  className,
-                })}
-              </SelectInputTriggerButtonPropsContext.Provider>
-            )}
-            initialFocusRef={controllerRef}
-            size={filterable ? 'lg' : 'md'}
-            padding="none"
-            onClose={() => {
-              setOpen(false);
-            }}
-            onCloseEnd={() => {
-              setFilterQuery('');
-            }}
-          >
-            <SelectInputOptions
-              id={id ? `${id}Search` : undefined}
-              parentId={parentId}
-              items={items}
-              compareValues={compareValues}
-              renderValue={renderValue}
-              renderFooter={renderFooter}
-              filterable={filterable}
-              filterPlaceholder={filterPlaceholder}
-              sortFilteredOptions={sortFilteredOptions}
-              searchInputRef={searchInputRef}
-              listboxRef={listboxRef}
-              filterQuery={deferredFilterQuery}
-              autocomplete={autocomplete}
-              name={name}
-              onFilterChange={setFilterQuery}
-              onAutocompleteSelect={(matchedValue) => {
-                onChange?.(matchedValue as M extends true ? T[] : T);
-                if (!multiple) {
-                  setOpen(false);
-                }
-              }}
-              {...getListBoxLabelProps()}
-            />
-          </OptionsOverlay>
-        );
-      }}
-    </ListboxBase>
-  );
-}

package/src/inputs/SelectInput/SelectInput.types.ts

@@ -1,114 +0,0 @@
-import { ReactNode } from 'react';
-
-import { Merge } from '../../utils';
-import { ButtonProps } from '../../button/Button.types';
-import { WithInputAttributesProps } from '../contexts';
-
-export interface SelectInputOptionItem<T = string> {
-  type: 'option';
-  value: T;
-  filterMatchers?: readonly string[];
-  disabled?: boolean;
-}
-
-export interface SelectInputGroupItem<T = string> {
-  type: 'group';
-  label: ReactNode;
-  options: readonly SelectInputOptionItem<T>[];
-  action?: {
-    label: string;
-    onClick: ButtonProps['onClick'];
-  };
-}
-
-export interface SelectInputSeparatorItem {
-  type: 'separator';
-}
-
-export type SelectInputItem<T = string> =
-  | SelectInputOptionItem<T>
-  | SelectInputGroupItem<T>
-  | SelectInputSeparatorItem;
-
-export interface SelectInputProps<T = string, M extends boolean = false> {
-  id?: string;
-  /**
-   * Sets the `data-wds-parent` attribute on the listbox container, which is needed for complex components like DateInput to correctly manage event handling.
-   * @internal
-   */
-  parentId?: string;
-  name?: string;
-  multiple?: M;
-  placeholder?: string;
-  items: readonly SelectInputItem<NonNullable<T>>[];
-  /**
-   * Enables browser autocomplete integration through the search input.
-   * Accepts standard HTML autocomplete values (e.g., "country-name", "address-level1").
-   *
-   * Requires `filterable={true}` to enable the search input.
-   *
-   * @example
-   * <SelectInput
-   *   name="country"
-   *   autocomplete="country-name"
-   *   filterable={true}
-   *   items={[{
-   *     type: 'option',
-   *     value: 'GB',
-   *     filterMatchers: ['United Kingdom', 'UK']
-   *   }]}
-   * />
-   */
-  autocomplete?: string;
-  defaultValue?: M extends true ? readonly T[] : T;
-  value?: M extends true ? readonly T[] : T;
-  compareValues?:
-    | (keyof NonNullable<T> & string)
-    | ((a: T | undefined, b: T | undefined) => boolean);
-  renderValue?: (value: NonNullable<T>, withinTrigger: boolean) => React.ReactNode;
-  renderFooter?: (args: {
-    resultsEmpty: boolean;
-    queryNormalized: string | null | undefined;
-  }) => React.ReactNode;
-  renderTrigger?: (args: {
-    content: React.ReactNode;
-    placeholderShown: boolean;
-    clear: (() => void) | undefined;
-    disabled: boolean;
-    size: 'sm' | 'md' | 'lg';
-    className: string | undefined;
-  }) => React.ReactNode;
-  filterable?: boolean;
-  filterPlaceholder?: string;
-  sortFilteredOptions?: (
-    a: SelectInputOptionItem<NonNullable<T>>,
-    b: SelectInputOptionItem<NonNullable<T>>,
-    searchQuery: string,
-  ) => number;
-  disabled?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-  className?: string;
-  UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'] & {
-    'aria-label'?: string;
-  };
-  /** Ref to the select trigger button element. */
-  triggerRef?: React.MutableRefObject<HTMLButtonElement | null>;
-  onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
-  onChange?: (value: M extends true ? T[] : T) => void;
-  onOpen?: () => void;
-  onClose?: () => void;
-  onClear?: () => void;
-}
-
-type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
-
-export type SelectInputTriggerButtonProps<
-  T extends SelectInputTriggerButtonElementType = 'button',
-> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;
-
-export interface SelectInputOptionContentProps {
-  title: string;
-  note?: string;
-  description?: string;
-  icon?: React.ReactNode;
-}

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

@@ -1,25 +0,0 @@
-import { Cross } from '@transferwise/icons';
-import { clsx } from 'clsx';
-import { useIntl } from 'react-intl';
-
-import dateTriggerMessages from '../../../../dateLookup/dateTrigger/DateTrigger.messages';
-
-interface SelectInputClearButtonProps extends Pick<
-  React.ComponentPropsWithoutRef<'button'>,
-  'className' | 'onClick'
-> {}
-
-export function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {
-  const intl = useIntl();
-
-  return (
-    <button
-      type="button"
-      aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
-      className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}
-      onClick={onClick}
-    >
-      <Cross size={16} />
-    </button>
-  );
-}

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

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

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

@@ -1,17 +0,0 @@
-.np-select-input-addon-container {
-  pointer-events: none;
-  margin-inline-start: 4px;
-  margin-inline-start: var(--size-4);
-  display: inline-flex;
-  align-items: center;
-}
-.np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
-  margin-inline-start: 4px;
-  margin-inline-start: var(--size-4);
-}
-.np-select-input-addon-separator {
-  height: 24px;
-  height: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
-  border-inline-start: 1px solid var(--color-border-neutral);
-}

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

@@ -1,15 +0,0 @@
-.np-select-input-addon-container {
-  pointer-events: none;
-  margin-inline-start: var(--size-4);
-  display: inline-flex;
-  align-items: center;
-
-  & > :not([hidden]) ~ :not([hidden]) {
-    margin-inline-start: var(--size-4);
-  }
-}
-
-.np-select-input-addon-separator {
-  height: var(--size-24);
-  border-inline-start: 1px solid var(--color-border-neutral);
-}

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

@@ -1,56 +0,0 @@
-import { ChevronDown } from '@transferwise/icons';
-import { clsx } from 'clsx';
-
-import { ButtonInput } from '../../../_ButtonInput';
-import { InputGroup } from '../../../InputGroup';
-import { SelectInputClearButton } from '../SelectInputClearButton';
-import { SelectInputTriggerButton } from '../SelectInputTriggerButton';
-import type { SelectInputProps } from '../../SelectInput.types';
-
-export const SelectInputDefaultTrigger = (({
-  content,
-  placeholderShown,
-  clear,
-  disabled,
-  size,
-  className,
-}) => (
-  <InputGroup
-    addonEnd={{
-      content: (
-        <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>
-          {clear != null && !placeholderShown ? (
-            <>
-              <SelectInputClearButton
-                onClick={(event) => {
-                  event.preventDefault();
-                  clear();
-                }}
-              />
-              <span className="np-select-input-addon-separator" />
-            </>
-          ) : null}
-
-          <span className="np-select-input-addon">
-            <ChevronDown size={16} />
-          </span>
-        </span>
-      ),
-      initialContentWidth: 24 + 4,
-      padding: 'sm',
-    }}
-    disabled={disabled}
-    className={className}
-  >
-    <SelectInputTriggerButton as={ButtonInput} size={size}>
-      <span
-        className={clsx(
-          'np-select-input-content',
-          placeholderShown && 'np-select-input-placeholder',
-        )}
-      >
-        {content}
-      </span>
-    </SelectInputTriggerButton>
-  </InputGroup>
-)) satisfies SelectInputProps['renderTrigger'];

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

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

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

@@ -1,64 +0,0 @@
-import { clsx } from 'clsx';
-import { useId } from 'react';
-
-import Header from '../../../../header';
-import Section from '../../../../section';
-import type {
-  SelectInputGroupItem,
-  SelectInputProps,
-} from '../../SelectInput.types';
-
-import { SelectInputItemView } from '../SelectInputItemView';
-
-interface SelectInputGroupItemViewProps<T = string> {
-  item: SelectInputGroupItem<T | undefined>;
-  renderValue: Required<Pick<SelectInputProps<T>, 'renderValue'>>['renderValue'];
-  needle: string | null | undefined;
-}
-
-export function SelectInputGroupItemView<T = string>({
-  item,
-  renderValue,
-  needle,
-}: SelectInputGroupItemViewProps<T>) {
-  const headerId = useId();
-
-  const header = (
-    <Header
-      as="header"
-      role="none"
-      id={headerId}
-      title={item.label}
-      // @ts-expect-error when we migrate ActionButton to new Button this should be sorted
-      action={
-        item.action && {
-          text: item.action.label,
-          onClick: item.action.onClick,
-        }
-      }
-      className="np-select-input-group-item-header p-x-1"
-    />
-  );
-
-  return (
-    // An empty container may be rendered when no options match `needle`
-    // However, pre-filtering would result in worse performance overall
-    <Section
-      as="section"
-      role="group"
-      aria-labelledby={headerId}
-      className={clsx('m-y-0', needle === null && 'np-select-input-group-item--without-needle')}
-    >
-      {needle == null ? 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>
-  );
-}

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

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

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

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

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

@@ -1,17 +0,0 @@
-.np-select-input-separator-item {
-  margin: var(--size-8);
-  border-top-width: 1px;
-}
-
-.np-select-input-group-item {
-  &--without-needle:first-child {
-    margin-top: calc(-1 * var(--size-8));
-  }
-
-  &-header {
-    position: sticky;
-    top: 0px;
-    z-index: 10;
-    background-color: var(--color-background-elevated);
-  }
-}

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

@@ -1,55 +0,0 @@
-import { clsx } from 'clsx';
-import { useId } from 'react';
-
-import Header from '../../../../header';
-import Section from '../../../../section';
-import { selectInputOptionItemIncludesNeedle } from '../../SelectInput.helpers';
-import type {
-  SelectInputGroupItem,
-  SelectInputProps,
-  SelectInputItem,
-} from '../../SelectInput.types';
-import { SelectInputOption } from '../SelectInputOption';
-
-import { SelectInputGroupItemView } from '../SelectInputGroupItemView';
-
-interface SelectInputItemViewProps<
-  T = string,
-  I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,
-> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {
-  item: I;
-  needle: string | null | undefined;
-}
-
-export function SelectInputItemView<T = string>({
-  item,
-  renderValue,
-  needle,
-}: SelectInputItemViewProps<T>) {
-  switch (item.type) {
-    case 'option': {
-      if (
-        item.value != null &&
-        (needle == null || selectInputOptionItemIncludesNeedle(item, 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" />;
-      }
-      break;
-    }
-  }
-  return null;
-}
-

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

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

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

@@ -1,33 +0,0 @@
-.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 {
-  flex: 1;
-}
-.np-select-input-option-check--not-selected {
-  visibility: hidden;
-}