createAutocompletePropGetters.ts

import { find } from '../../lib';

import type { ComponentProps, MutableRef } from '../../types';

type BaseHit = Record<string, unknown>;

export type AutocompleteIndexConfig<TItem extends BaseHit> = {
  indexName: string;
  getQuery?: (item: TItem) => string;
  getURL?: (item: TItem) => string;
  onSelect?: (params: {
    item: TItem;
    query: string;
    setQuery: (query: string) => void;
    url?: string;
  }) => void;
};

type GetInputProps = () => ComponentProps<'input'>;

type ValidAriaRole = 'combobox' | 'row' | 'grid';

type GetItemProps = (
  item: { __indexName: string } & Record<string, unknown>,
  index: number
) => {
  id?: string;
  role?: ValidAriaRole;
  'aria-selected'?: boolean;
} & {
  onSelect: () => void;
  onApply: () => void;
};

type GetPanelProps = () => {
  id?: string;
  hidden?: boolean;
  role?: ValidAriaRole;
  'aria-labelledby'?: string;
};

type GetRootProps = () => { ref?: MutableRef<HTMLDivElement | null> };

type CreateAutocompletePropGettersParams = {
  useEffect: (effect: () => void, inputs?: readonly unknown[]) => void;
  useId: () => string;
  useMemo: <TType>(factory: () => TType, inputs: readonly unknown[]) => TType;
  useRef: <TType>(initialValue: TType | null) => { current: TType | null };
  useState: <TType>(
    initialState: TType
  ) => [TType, (newState: TType) => unknown];
};

export type UsePropGetters<TItem extends BaseHit> = (params: {
  indices: Array<{
    indexName: string;
    indexId: string;
    hits: Array<{ [key: string]: unknown }>;
  }>;
  indicesConfig: Array<AutocompleteIndexConfig<TItem>>;
  onRefine: (query: string) => void;
  onSelect: NonNullable<AutocompleteIndexConfig<TItem>['onSelect']>;
  onApply: (query: string) => void;
  /**
   * Called when the form is submitted (Enter pressed).
   * Useful for detached mode to close the modal.
   */
  onSubmit?: () => void;
  placeholder?: string;
  /**
   * Whether the autocomplete is in detached mode (mobile).
   * In detached mode:
   * - Panel stays open (doesn't close on body click)
   * - Tab key doesn't close panel
   */
  isDetached?: boolean;
  /**
   * Whether the panel should be hidden even when open
   * (e.g., when all sources are empty and there's no custom content to show).
   */
  shouldHidePanel?: boolean;
  /**
   * Whether the input should be focused and the panel open initially.
   */
  autoFocus?: boolean;
}) => {
  getInputProps: GetInputProps;
  getItemProps: GetItemProps;
  getPanelProps: GetPanelProps;
  getRootProps: GetRootProps;
  /**
   * Whether the panel is open.
   */
  isOpen: boolean;
  /**
   * Function to set the panel open state. Useful for detached mode.
   */
  setIsOpen: (isOpen: boolean) => void;
  /**
   * Function to focus the input. Useful for detached mode to show the keyboard.
   */
  focusInput: () => void;
};

export function createAutocompletePropGetters({
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
}: CreateAutocompletePropGettersParams) {
  return function usePropGetters<TItem extends BaseHit>({
    indices,
    indicesConfig,
    onRefine,
    onSelect: globalOnSelect,
    onApply,
    onSubmit,
    placeholder,
    isDetached = false,
    shouldHidePanel = false,
    autoFocus = false,
  }: Parameters<UsePropGetters<TItem>>[0]): ReturnType<UsePropGetters<TItem>> {
    const getElementId = createGetElementId(useId());
    const inputRef = useRef<HTMLInputElement>(null);
    const rootRef = useRef<HTMLDivElement>(null);
    const [isOpen, setIsOpen] = useState(autoFocus);
    const [activeDescendant, setActiveDescendant] = useState<
      string | undefined
    >(undefined);

    const { items, itemsIds } = useMemo(
      () => buildItems({ indices, indicesConfig, getElementId }),
      [indices, indicesConfig, getElementId]
    );

    useEffect(() => {
      // In detached mode, we don't close the panel on body click
      // because the overlay handles closing
      if (isDetached) {
        return () => {};
      }

      const onBodyClick = (event: MouseEvent) => {
        if (unwrapRef(rootRef)?.contains(event.target as HTMLElement)) {
          return;
        }

        setIsOpen(false);
      };

      document.body.addEventListener('click', onBodyClick);

      return () => {
        document.body.removeEventListener('click', onBodyClick);
      };
    }, [rootRef, isDetached]);

    const getNextActiveDescendant = (key: string): string | undefined => {
      switch (key) {
        case 'ArrowUp': {
          const prevIndex = itemsIds.indexOf(activeDescendant || '') - 1;
          return itemsIds[prevIndex] || itemsIds[itemsIds.length - 1];
        }
        case 'ArrowDown': {
          const nextIndex = itemsIds.indexOf(activeDescendant || '') + 1;
          return itemsIds[nextIndex] || itemsIds[0];
        }
        default:
          return undefined;
      }
    };

    const submit = (
      override: {
        query?: string;
        activeDescendant?: string;
      } = {}
    ) => {
      if (isOpen) {
        setIsOpen(false);
      } else {
        inputRef.current?.blur();
      }

      const actualDescendant = override.activeDescendant ?? activeDescendant;

      if (!actualDescendant && override.query) {
        onRefine(override.query);
      }

      if (actualDescendant && items.has(actualDescendant)) {
        const {
          item,
          config: { onSelect: indexOnSelect, getQuery, getURL },
        } = items.get(actualDescendant)!;
        const actualOnSelect = indexOnSelect ?? globalOnSelect;
        actualOnSelect({
          item,
          query: getQuery?.(item) ?? '',
          url: getURL?.(item),
          setQuery: (query) => onRefine(query),
        });
        setActiveDescendant(undefined);
      }

      onSubmit?.();
    };

    return {
      getInputProps: () => ({
        id: getElementId('input'),
        ref: inputRef,
        role: 'combobox',
        autoFocus,
        'aria-autocomplete': 'list',
        'aria-expanded': isOpen,
        'aria-haspopup': 'grid',
        'aria-controls': getElementId('panel'),
        'aria-activedescendant': activeDescendant,
        placeholder,
        onFocus: () => setIsOpen(true),
        onKeyDown: (event) => {
          switch (event.key) {
            case 'Escape': {
              if (isOpen) {
                setIsOpen(false);
                event.preventDefault();
              } else {
                setActiveDescendant(undefined);
              }
              break;
            }
            case 'ArrowUp':
            case 'ArrowDown': {
              setIsOpen(true);

              const nextActiveDescendant = getNextActiveDescendant(event.key)!;
              setActiveDescendant(nextActiveDescendant);
              document
                .getElementById(nextActiveDescendant)
                ?.scrollIntoView(false);

              event.preventDefault();
              break;
            }
            case 'Enter': {
              submit({ query: (event.target as HTMLInputElement).value });
              break;
            }
            case 'Tab':
              // In detached mode, Tab doesn't close the panel
              if (!isDetached) {
                setIsOpen(false);
              }
              break;
            default:
              setIsOpen(true);
              return;
          }
        },
        onKeyUp: (event) => {
          switch (event.key) {
            case 'ArrowLeft':
            case 'ArrowUp':
            case 'ArrowRight':
            case 'ArrowDown':
            case 'Escape':
            case 'Return':
              event.preventDefault();
              return;
            default:
              setActiveDescendant(undefined);
              break;
          }
        },
      }),
      getItemProps: (item, index) => {
        const id = getElementId('item', item.__indexName, index);

        return {
          id,
          role: 'row',
          'aria-selected': id === activeDescendant,
          onSelect: () => submit({ activeDescendant: id }),
          onApply: () => {
            const {
              item: currentItem,
              config: { getQuery },
            } = items.get(id)!;
            onApply(getQuery?.(currentItem) ?? '');
          },
        };
      },
      getPanelProps: () => ({
        hidden: !isOpen || shouldHidePanel,
        id: getElementId('panel'),
        role: 'grid',
        'aria-labelledby': getElementId('input'),
      }),
      getRootProps: () => ({
        ref: rootRef,
      }),
      isOpen,
      setIsOpen,
      focusInput: () => {
        inputRef.current?.focus();
      },
    };
  };
}

function buildItems<TItem extends BaseHit>({
  indices,
  indicesConfig,
  getElementId,
}: Pick<Parameters<UsePropGetters<TItem>>[0], 'indices' | 'indicesConfig'> & {
  getElementId: ReturnType<typeof createGetElementId>;
}) {
  const itemsIds = [];
  const items = new Map<
    string,
    { item: TItem; config: AutocompleteIndexConfig<TItem> }
  >();

  for (let i = 0; i < indices.length; i++) {
    const currentIndexConfig = find(
      indicesConfig,
      (config) => config.indexName === indices[i].indexName
    );

    const hits = indices[i]?.hits || [];

    for (let position = 0; position < hits.length; position++) {
      const itemId = getElementId(
        'item',
        currentIndexConfig?.indexName || indices[i].indexName,
        position
      );
      items.set(itemId, {
        item: hits[position] as TItem,
        config: currentIndexConfig!,
      });
      itemsIds.push(itemId);
    }
  }
  return { items, itemsIds };
}

function createGetElementId(autocompleteId: string) {
  return function getElementId(...suffixes: Array<string | number>) {
    const prefix = 'autocomplete';
    return `${prefix}${autocompleteId}${suffixes.join(':')}`;
  };
}

/**
 * Returns the framework-agnostic value of a ref.
 */
function unwrapRef<TType>(ref: { current: TType | null }): TType | null {
  return ref.current && typeof ref.current === 'object' && 'base' in ref.current
    ? (ref.current.base as TType) // Preact
    : ref.current; // React
}