@base-ui/react/combobox/store.d.ts

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.

import { Store } from '@base-ui/utils/store';
import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
import type { TransitionStatus } from "../internals/useTransitionStatus.js";
import type { HTMLProps } from "../internals/types.js";
import type { Side } from "../utils/useAnchorPositioning.js";
import type { AriaCombobox } from "./root/AriaCombobox.js";
export type State = {
  id: string | undefined;
  labelId: string | undefined;
  query: string;
  filter: (item: any, query: string) => boolean;
  items: readonly any[] | undefined;
  selectedValue: any;
  open: boolean;
  mounted: boolean;
  transitionStatus: TransitionStatus;
  forceMounted: boolean;
  inline: boolean;
  activeIndex: number | null;
  selectedIndex: number | null;
  popupProps: HTMLProps;
  inputProps: HTMLProps;
  triggerProps: HTMLProps;
  positionerElement: HTMLElement | null;
  listElement: HTMLElement | null;
  triggerElement: HTMLElement | null;
  inputElement: HTMLInputElement | null;
  inputGroupElement: HTMLDivElement | null;
  popupSide: Side | null;
  openMethod: InteractionType | null;
  inputInsidePopup: boolean;
  selectionMode: 'single' | 'multiple' | 'none';
  listRef: React.RefObject<Array<HTMLElement | null>>;
  labelsRef: React.RefObject<Array<string | null>>;
  popupRef: React.RefObject<HTMLDivElement | null>;
  emptyRef: React.RefObject<HTMLDivElement | null>;
  inputRef: React.RefObject<HTMLInputElement | null>;
  startDismissRef: React.RefObject<HTMLSpanElement | null>;
  endDismissRef: React.RefObject<HTMLSpanElement | null>;
  keyboardActiveRef: React.RefObject<boolean>;
  chipsContainerRef: React.RefObject<HTMLDivElement | null>;
  clearRef: React.RefObject<HTMLButtonElement | null>;
  valuesRef: React.RefObject<Array<any>>;
  allValuesRef: React.RefObject<Array<any>>;
  selectionEventRef: React.RefObject<MouseEvent | PointerEvent | KeyboardEvent | null>;
  setOpen: (open: boolean, eventDetails: AriaCombobox.ChangeEventDetails) => void;
  setInputValue: (value: string, eventDetails: AriaCombobox.ChangeEventDetails) => void;
  setSelectedValue: (value: any, eventDetails: AriaCombobox.ChangeEventDetails) => void;
  setIndices: (indices: {
    activeIndex?: number | null | undefined;
    selectedIndex?: number | null | undefined;
    type?: 'keyboard' | 'pointer' | 'none' | undefined;
  }) => void;
  onItemHighlighted: (item: any, eventDetails: AriaCombobox.HighlightEventDetails) => void;
  forceMount: () => void;
  handleSelection: (event: MouseEvent | PointerEvent | KeyboardEvent, passedValue?: any) => void;
  getItemProps: (props?: HTMLProps & {
    active?: boolean | undefined;
    selected?: boolean | undefined;
  }) => Record<string, unknown>;
  requestSubmit: () => void;
  name: string | undefined;
  form: string | undefined;
  disabled: boolean;
  readOnly: boolean;
  required: boolean;
  grid: boolean;
  isGrouped: boolean;
  virtualized: boolean;
  onOpenChangeComplete: (open: boolean) => void;
  openOnInputClick: boolean;
  itemToStringLabel?: ((item: any) => string) | undefined;
  isItemEqualToValue: (itemValue: any, selectedValue: any) => boolean;
  modal: boolean;
  autoHighlight: false | 'always' | 'input-change';
  submitOnItemClick: boolean;
  hasInputValue: boolean;
};
export type ComboboxStore = Store<State>;
export declare const selectors: {
  id: (state: State) => string | undefined;
  labelId: (state: State) => string | undefined;
  items: (state: State) => readonly any[] | undefined;
  selectedValue: (state: State) => any;
  hasSelectionChips: (state: State) => boolean;
  hasSelectedValue: (state: State) => boolean;
  hasNullItemLabel: (state: State, enabled: boolean) => boolean;
  open: (state: State) => boolean;
  mounted: (state: State) => boolean;
  forceMounted: (state: State) => boolean;
  inline: (state: State) => boolean;
  activeIndex: (state: State) => number | null;
  selectedIndex: (state: State) => number | null;
  isActive: (state: State, index: number) => boolean;
  isSelected: (state: State, itemValue: any) => boolean;
  transitionStatus: (state: State) => TransitionStatus;
  popupProps: (state: State) => HTMLProps;
  inputProps: (state: State) => HTMLProps;
  triggerProps: (state: State) => HTMLProps;
  getItemProps: (state: State) => (props?: HTMLProps & {
    active?: boolean | undefined;
    selected?: boolean | undefined;
  }) => Record<string, unknown>;
  positionerElement: (state: State) => HTMLElement | null;
  listElement: (state: State) => HTMLElement | null;
  triggerElement: (state: State) => HTMLElement | null;
  inputElement: (state: State) => HTMLInputElement | null;
  inputGroupElement: (state: State) => HTMLDivElement | null;
  popupSide: (state: State) => Side | null;
  openMethod: (state: State) => InteractionType | null;
  inputInsidePopup: (state: State) => boolean;
  selectionMode: (state: State) => "none" | "multiple" | "single";
  name: (state: State) => string | undefined;
  form: (state: State) => string | undefined;
  disabled: (state: State) => boolean;
  readOnly: (state: State) => boolean;
  required: (state: State) => boolean;
  grid: (state: State) => boolean;
  virtualized: (state: State) => boolean;
  itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
  isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
  modal: (state: State) => boolean;
  autoHighlight: (state: State) => false | "input-change" | "always";
  submitOnItemClick: (state: State) => boolean;
};