@base-ui-components/react
Version:
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.
129 lines • 5.91 kB
TypeScript
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;
};