@base-ui-components/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-components/utils/store';
import type { InteractionType } from '@base-ui-components/utils/useEnhancedClickHandler';
import type { TransitionStatus } from "../utils/useTransitionStatus.js";
import type { HTMLProps } from "../utils/types.js";
import type { useFieldControlValidation } from "../field/control/useFieldControlValidation.js";
import type { ComboboxRootInternal } from "./root/ComboboxRootInternal.js";
export type State = {
  id: string | undefined;
  query: string;
  filter: (item: any, query: string) => boolean;
  items: any[] | undefined;
  selectedValue: any;
  inputValue: React.ComponentProps<'input'>['value'];
  open: boolean;
  mounted: boolean;
  transitionStatus: TransitionStatus;
  forceMounted: boolean;
  inline: boolean;
  activeIndex: number | null;
  selectedIndex: number | null;
  popupProps: HTMLProps;
  inputProps: HTMLProps;
  triggerProps: HTMLProps;
  typeaheadTriggerProps: HTMLProps;
  positionerElement: HTMLElement | null;
  listElement: HTMLElement | null;
  triggerElement: HTMLElement | null;
  inputElement: HTMLInputElement | null;
  openMethod: InteractionType | null;
  inputInsidePopup: boolean;
  selectionMode: 'single' | 'multiple' | 'none';
  listRef: React.RefObject<Array<HTMLElement | null>>;
  popupRef: React.RefObject<HTMLDivElement | null>;
  inputRef: React.RefObject<HTMLInputElement | 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>>;
  setOpen: (open: boolean, eventDetails: ComboboxRootInternal.ChangeEventDetails) => void;
  setInputValue: (value: string, eventDetails: ComboboxRootInternal.ChangeEventDetails) => void;
  setSelectedValue: (value: any, eventDetails: ComboboxRootInternal.ChangeEventDetails) => void;
  setIndices: (indices: {
    activeIndex?: number | null;
    selectedIndex?: number | null;
    type?: 'keyboard' | 'pointer' | 'none';
  }) => void;
  onItemHighlighted: (item: any, info: {
    type: 'keyboard' | 'pointer' | 'none';
    index: number;
  }) => void;
  forceMount: () => void;
  handleEnterSelection: (event: Event) => void;
  getItemProps: (props?: HTMLProps & {
    active?: boolean;
    selected?: boolean;
  }) => Record<string, unknown>;
  name: string | undefined;
  disabled: boolean;
  readOnly: boolean;
  required: boolean;
  fieldControlValidation: ReturnType<typeof useFieldControlValidation>;
  cols: number;
  isGrouped: boolean;
  virtualized: boolean;
  onOpenChangeComplete: (open: boolean) => void;
  openOnInputClick: boolean;
  itemToStringLabel?: (item: any) => string;
  modal: boolean;
  autoHighlight: boolean;
};
export type ComboboxStore = Store<State>;
export declare const selectors: {
  id: (state: State) => string | undefined;
  query: (state: State) => string;
  items: (state: State) => any[] | undefined;
  selectedValue: (state: State) => any;
  inputValue: (state: State) => string | number | readonly string[] | undefined;
  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, selectedValue: any) => boolean;
  transitionStatus: (state: State) => TransitionStatus;
  popupProps: (state: State) => HTMLProps;
  inputProps: (state: State) => HTMLProps;
  triggerProps: (state: State) => HTMLProps;
  typeaheadTriggerProps: (state: State) => HTMLProps;
  getItemProps: (state: State) => (props?: HTMLProps & {
    active?: boolean;
    selected?: boolean;
  }) => Record<string, unknown>;
  positionerElement: (state: State) => HTMLElement | null;
  listElement: (state: State) => HTMLElement | null;
  triggerElement: (state: State) => HTMLElement | null;
  inputElement: (state: State) => HTMLInputElement | null;
  openMethod: (state: State) => InteractionType | null;
  inputInsidePopup: (state: State) => boolean;
  selectionMode: (state: State) => "none" | "multiple" | "single";
  listRef: (state: State) => import("react").RefObject<(HTMLElement | null)[]>;
  popupRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
  inputRef: (state: State) => import("react").RefObject<HTMLInputElement | null>;
  keyboardActiveRef: (state: State) => import("react").RefObject<boolean>;
  chipsContainerRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
  clearRef: (state: State) => import("react").RefObject<HTMLButtonElement | null>;
  valuesRef: (state: State) => import("react").RefObject<any[]>;
  allValuesRef: (state: State) => import("react").RefObject<any[]>;
  name: (state: State) => string | undefined;
  disabled: (state: State) => boolean;
  readOnly: (state: State) => boolean;
  required: (state: State) => boolean;
  fieldControlValidation: (state: State) => {
    getValidationProps: (externalProps?: {}) => import("../utils/types.js").WithBaseUIEvent<any>;
    getInputValidationProps: (externalProps?: {}) => import("../utils/types.js").WithBaseUIEvent<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>;
    inputRef: import("react").RefObject<HTMLInputElement | null>;
    commitValidation: (value: unknown, revalidate?: any) => Promise<void>;
  };
  cols: (state: State) => number;
  isGrouped: (state: State) => boolean;
  virtualized: (state: State) => boolean;
  onOpenChangeComplete: (state: State) => (open: boolean) => void;
  openOnInputClick: (state: State) => boolean;
  itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
  modal: (state: State) => boolean;
  autoHighlight: (state: State) => boolean;
};