Back to Fluentui

React Combobox.Api

packages/react-components/react-combobox/library/etc/react-combobox.api.md

4.40.2-hotfix211.4 KB
Original Source

API Report File for "@fluentui/react-combobox"

Do not edit this file. It is a report generated by API Extractor.

ts

import { ActiveDescendantChangeEvent } from '@fluentui/react-aria';
import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
import { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ContextSelector } from '@fluentui/react-context-selector';
import { EventData } from '@fluentui/react-utilities';
import { EventHandler } from '@fluentui/react-utilities';
import type { ExtractSlotProps } from '@fluentui/react-utilities';
import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { PortalProps } from '@fluentui/react-portal';
import type { PositioningShorthand } from '@fluentui/react-positioning';
import { Provider } from 'react';
import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import { SlotClassNames } from '@fluentui/react-utilities';
import type { SlotComponentType } from '@fluentui/react-utilities';

// @public
export const Combobox: ForwardRefComponent<ComboboxProps>;

// @public
export type ComboboxBaseProps = SelectionProps & HighlightedOptionProps & Pick<PortalProps, 'mountNode'> & {
    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';
    clearable?: boolean;
    defaultOpen?: boolean;
    defaultValue?: string;
    disableAutoFocus?: boolean;
    inlinePopup?: boolean;
    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;
    open?: boolean;
    placeholder?: string;
    positioning?: PositioningShorthand;
    size?: 'small' | 'medium' | 'large';
    value?: string;
};

// @public
export type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
    activeOption?: OptionValue;
    focusVisible: boolean;
    ignoreNextBlur: React_2.MutableRefObject<boolean | null>;
    setActiveOption: React_2.Dispatch<React_2.SetStateAction<OptionValue | undefined>>;
    setFocusVisible(focusVisible: boolean): void;
    hasFocus: boolean;
    setHasFocus(hasFocus: boolean): void;
    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;
    setValue(newValue: string | undefined): void;
    onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
    disabled: boolean;
    freeform: boolean;
    onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;
};

// @public (undocumented)
export const comboboxClassNames: SlotClassNames<ComboboxSlots>;

// @public
export type ComboboxContextValue = Pick<ComboboxState, 'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'setActiveOption' | 'setOpen' | 'size'> & {
    selectedOptions: ComboboxState['selectedOptions'];
    selectOption: ComboboxState['selectOption'];
};

// @public (undocumented)
export type ComboboxContextValues = ComboboxBaseContextValues;

// @public (undocumented)
export type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;

// @public (undocumented)
export type ComboboxOpenEvents = ComboboxBaseOpenEvents;

// @public
export type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & ComboboxBaseProps & {
    freeform?: boolean;
    children?: React_2.ReactNode;
};

// @public @deprecated (undocumented)
export const ComboboxProvider: Provider<ComboboxContextValue> & FC<ProviderProps<ComboboxContextValue>>;

// @public (undocumented)
export type ComboboxSlots = {
    root: NonNullable<Slot<'div'>>;
    expandIcon?: Slot<'span'>;
    clearIcon?: Slot<'span'>;
    input: NonNullable<Slot<'input'>>;
    listbox?: Slot<typeof Listbox>;
};

// @public
export type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState & {
    showClearIcon?: boolean;
    activeDescendantController: ActiveDescendantImperativeRef;
};

// @public
export const Dropdown: ForwardRefComponent<DropdownProps>;

// @public (undocumented)
export const dropdownClassNames: SlotClassNames<DropdownSlots>;

// @public (undocumented)
export type DropdownContextValues = ComboboxBaseContextValues;

// @public (undocumented)
export type DropdownOpenChangeData = ComboboxBaseOpenChangeData;

// @public (undocumented)
export type DropdownOpenEvents = ComboboxBaseOpenEvents;

// @public
export type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;

// @public (undocumented)
export type DropdownSlots = {
    root: NonNullable<Slot<'div'>>;
    expandIcon?: Slot<'span'>;
    clearButton?: Slot<'button'>;
    button: NonNullable<Slot<'button'>>;
    listbox?: Slot<typeof Listbox>;
};

// @public
export type DropdownState = ComponentState<DropdownSlots> & Omit<ComboboxBaseState, 'freeform'> & {
    placeholderVisible: boolean;
    showClearButton?: boolean;
    activeDescendantController: ActiveDescendantImperativeRef;
};

// @public
export const Listbox: ForwardRefComponent<ListboxProps>;

// @public (undocumented)
export const listboxClassNames: SlotClassNames<ListboxSlots>;

// @public
export type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'focusVisible' | 'getOptionById' | 'getOptionsMatchingValue' | 'multiselect' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption'> & {
    onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
    onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;
};

// @public (undocumented)
export type ListboxContextValues = {
    listbox: ListboxContextValue;
    activeDescendant: ActiveDescendantContextValue;
};

// @public
export type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps & {
    disableAutoFocus?: boolean;
};

// @public (undocumented)
export const ListboxProvider: React_2.Provider<ListboxContextValue | undefined> & React_2.FC<React_2.ProviderProps<ListboxContextValue | undefined>>;

// @public (undocumented)
export type ListboxSlots = {
    root: Slot<'div'>;
};

// @public
export type ListboxState = ComponentState<ListboxSlots> & OptionCollectionState & Pick<SelectionProps, 'multiselect'> & SelectionState & {
    activeOption?: OptionValue;
    focusVisible: boolean;
    setActiveOption(option?: OptionValue): void;
    standalone: boolean;
    selectOption(event: SelectionEvents, option: OptionValue): void;
    activeDescendantController: ActiveDescendantImperativeRef;
    onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;
};

// @public
const Option_2: ForwardRefComponent<OptionProps>;
export { Option_2 as Option }

// @public (undocumented)
export const optionClassNames: SlotClassNames<OptionSlots>;

// @public
export const OptionGroup: ForwardRefComponent<OptionGroupProps>;

// @public (undocumented)
export const optionGroupClassNames: SlotClassNames<OptionGroupSlots>;

// @public
export type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;

// @public (undocumented)
export type OptionGroupSlots = {
    root: NonNullable<Slot<'div'>>;
    label?: Slot<'span'>;
};

// @public
export type OptionGroupState = ComponentState<OptionGroupSlots>;

// @public
export type OptionOnSelectData = {
    optionValue: string | undefined;
    optionText: string | undefined;
    selectedOptions: string[];
};

// @public
export type OptionProps = ComponentProps<Partial<OptionSlots>> & {
    disabled?: boolean;
    value?: string;
} & ({
    text?: string;
    children: string;
} | {
    text: string;
    children?: React_2.ReactNode;
});

// @public (undocumented)
export type OptionSlots = {
    root: NonNullable<Slot<'div'>>;
    checkIcon: Slot<'span'>;
};

// @public
export type OptionState = ComponentState<OptionSlots> & Pick<OptionProps, 'disabled'> & {
    active: boolean;
    focusVisible: boolean;
    multiselect?: boolean;
    selected: boolean;
};

// @public
export const renderCombobox_unstable: (state: ComboboxState, contextValues: ComboboxContextValues) => JSXElement;

// @public
export const renderDropdown_unstable: (state: DropdownState, contextValues: DropdownContextValues) => JSXElement;

// @public
export const renderListbox_unstable: (state: ListboxState, contextValues: ListboxContextValues) => JSXElement;

// @public
export const renderOption_unstable: (state: OptionState) => JSXElement;

// @public
export const renderOptionGroup_unstable: (state: OptionGroupState) => JSXElement;

// @public
export type SelectionEvents = React_2.ChangeEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;

// @internal
export function useButtonTriggerSlot(triggerFromProps: NonNullable<Slot<'button'>>, ref: React_2.Ref<HTMLButtonElement>, options: UseButtonTriggerSlotOptions): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;

// @public
export const useCombobox_unstable: (props: ComboboxProps, ref: React_2.Ref<HTMLInputElement>) => ComboboxState;

// @internal
export const useComboboxBaseState: (props: ComboboxBaseProps & {
    children?: React_2.ReactNode;
    editable?: boolean;
    disabled?: boolean;
    freeform?: boolean;
    activeDescendantController: ActiveDescendantImperativeRef;
}) => ComboboxBaseState;

// @public (undocumented)
export function useComboboxContextValues(state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>): ComboboxBaseContextValues;

// @internal (undocumented)
export function useComboboxFilter<T extends {
    children: React_2.ReactNode;
    value: string;
} | string>(query: string, options: T[], config: UseComboboxFilterConfig<T>): JSXElement[];

// @public
export const useComboboxStyles_unstable: (state: ComboboxState) => ComboboxState;

// @public
export const useDropdown_unstable: (props: DropdownProps, ref: React_2.Ref<HTMLButtonElement>) => DropdownState;

// @public
export const useDropdownStyles_unstable: (state: DropdownState) => DropdownState;

// @internal
export function useInputTriggerSlot(triggerFromProps: NonNullable<Slot<'input'>>, ref: React_2.Ref<HTMLInputElement>, options: UseInputTriggerSlotOptions): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;

// @public
export const useListbox_unstable: (props: ListboxProps, ref: React_2.Ref<HTMLElement>) => ListboxState;

// @public (undocumented)
export const useListboxContext_unstable: <T>(selector: ContextSelector<ListboxContextValue, T>) => T;

// @public (undocumented)
export function useListboxContextValues(state: ListboxState): ListboxContextValues;

// @internal (undocumented)
export function useListboxSlot(listboxSlotFromProp: Slot<typeof Listbox> | undefined, ref: React_2.Ref<HTMLDivElement>, options: UseListboxSlotOptions): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined;

// @public
export const useListboxStyles_unstable: (state: ListboxState) => ListboxState;

// @public
export const useOption_unstable: (props: OptionProps, ref: React_2.Ref<HTMLElement>) => OptionState;

// @public
export const useOptionGroup_unstable: (props: OptionGroupProps, ref: React_2.Ref<HTMLElement>) => OptionGroupState;

// @public
export const useOptionGroupStyles_unstable: (state: OptionGroupState) => OptionGroupState;

// @public
export const useOptionStyles_unstable: (state: OptionState) => OptionState;

// (No @packageDocumentation comment for this package)