@base-ui/react/combobox/utils/parts.mjs

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

'use client';

import { useStore } from '@base-ui/utils/store';
import { useComboboxDerivedItemsContext } from "../root/ComboboxRootContext.mjs";
import { selectors } from "../store.mjs";
/**
 * The popup side is only meaningful while the positioner is mounted, as the store retains the
 * last resolved side after the popup unmounts.
 */
export function usePopupSide(store) {
  const mounted = useStore(store, selectors.mounted);
  const popupSide = useStore(store, selectors.popupSide);
  const positionerElement = useStore(store, selectors.positionerElement);
  return mounted && positionerElement ? popupSide : null;
}

/**
 * Whether the filtered list has no items to show.
 */
export function useListEmpty() {
  return useComboboxDerivedItemsContext().filteredItems.length === 0;
}

/**
 * The arrow keys that move the chip highlight backwards and forwards, in that order.
 */
export function getChipNavigationKeys(direction) {
  return direction === 'rtl' ? ['ArrowRight', 'ArrowLeft'] : ['ArrowLeft', 'ArrowRight'];
}

/**
 * Where the highlight lands once the chip at `index` is removed, or `undefined` for no highlight.
 */
export function getIndexAfterChipRemoval(index, chipCount) {
  const nextIndex = index >= chipCount - 1 ? chipCount - 2 : index;
  return nextIndex >= 0 ? nextIndex : undefined;
}

/**
 * Commits the highlighted item by clicking it, tagging the originating event so the item's
 * handler can attribute the selection to it.
 */
export function clickHighlightedItem(store, activeIndex, nativeEvent) {
  const listItem = store.state.listRef.current[activeIndex];
  if (listItem) {
    store.state.selectionEventRef.current = nativeEvent;
    listItem.click();
    store.state.selectionEventRef.current = null;
  }
}