@transferwise/components 0.0.0-experimental-bcfa03a → 0.0.0-experimental-3cdcd93

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 { SelectInputTriggerButtonPropsContext } from './TriggerButton';
-import { SelectInputOptions } from './Options';
-import { SelectInputOptionContentWithinTriggerContext } from './OptionContent';
-import { SelectInputDefaultTrigger } from './DefaultTrigger';
-import type { SelectInputProps } from './SelectInput.types';
-
-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,127 +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;
-}
-
-export 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 interface SelectInputGroupItemViewProps<T = string> extends SelectInputItemViewProps<
-  T,
-  SelectInputGroupItem<T | undefined>
-> {}

package/src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx

@@ -1,39 +0,0 @@
-import { useContext, createContext } from 'react';
-import { ListboxButton } from '@headlessui/react';
-import mergeProps from 'merge-props';
-
-import { PolymorphicWithOverrides } from '../../../common/polymorphicWithOverrides/PolymorphicWithOverrides';
-import { Merge } from '../../../utils';
-
-export const SelectInputTriggerButtonPropsContext = createContext<{
-  ref?: React.ForwardedRef<HTMLButtonElement | null>;
-  id?: string;
-  onClick?: (event: React.MouseEvent) => void;
-  onKeyDown?: (event: React.KeyboardEvent) => void;
-  [key: string]: unknown;
-}>({});
-
-type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
-
-export type SelectInputTriggerButtonProps<
-  T extends SelectInputTriggerButtonElementType = 'button',
-> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;
-
-export function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({
-  as = 'button' as T,
-  ...restProps
-}: SelectInputTriggerButtonProps<T>) {
-  const { ref, onClick, onKeyDown, ...interactionProps } = useContext(
-    SelectInputTriggerButtonPropsContext,
-  );
-
-  return (
-    <ListboxButton
-      ref={ref}
-      as={PolymorphicWithOverrides}
-      role="combobox"
-      __overrides={{ as, ...interactionProps }}
-      {...mergeProps({ onClick, onKeyDown }, restProps)}
-    />
-  );
-}

package/src/inputs/SelectInput/TriggerButton/index.ts

@@ -1,5 +0,0 @@
-export {
-  SelectInputTriggerButton,
-  SelectInputTriggerButtonPropsContext,
-} from './SelectInputTriggerButton';
-export type { SelectInputTriggerButtonProps } from './SelectInputTriggerButton';

package/src/inputs/SelectInput/index.ts

@@ -1,13 +0,0 @@
-export { SelectInput } from './SelectInput';
-export { SelectInputOptionContent } from './OptionContent';
-export { SelectInputTriggerButton } from './TriggerButton';
-
-export type {
-  SelectInputGroupItem,
-  SelectInputItem,
-  SelectInputOptionContentProps,
-  SelectInputOptionItem,
-  SelectInputProps,
-  SelectInputSeparatorItem,
-  SelectInputTriggerButtonProps,
-} from './SelectInput.types';