` with `role="listbox"` */
root: Slot<'div'>;
};
/**
* State used in rendering Listbox
*/
export declare type ListboxState = ComponentState
& OptionCollectionState & Pick & SelectionState & {
/**
* @deprecated - no longer used internally
* @see activeDescendantController.active()
*/
activeOption?: OptionValue;
/**
* @deprecated - no longer used internally
*/
focusVisible: boolean;
/**
* @deprecated - no longer used internally
* @see activeDescendantController.focus(id)
*/
setActiveOption(option?: OptionValue): void;
standalone: boolean;
selectOption(event: SelectionEvents, option: OptionValue): void;
activeDescendantController: ActiveDescendantImperativeRef;
onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;
};
/**
* Option component: a styled child option of a Combobox
*/
declare const Option_2: ForwardRefComponent;
export { Option_2 as Option }
export declare const optionClassNames: SlotClassNames;
declare type OptionCollectionState = {
/**
* @deprecated - no longer used internally
*/
getIndexOfId(id: string): number;
/**
* @deprecated - no longer used internally
*/
getOptionAtIndex(index: number): OptionValue | undefined;
/**
* @deprecated - no longer used internally
*/
getOptionsMatchingText(matcher: (text: string) => boolean): OptionValue[];
/** The total number of options in the collection. */
getCount: () => number;
/** Returns the option data by key. */
getOptionById(id: string): OptionValue | undefined;
/** Returns an array of options filtered by a value matching function against the option's value string. */
getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];
/** The unordered option data. */
options: OptionValue[];
/** A function that child options call to register their values. Returns a function to unregister the option. */
registerOption: (option: OptionValue, element: HTMLElement) => () => void;
};
/**
* OptionGroup component: allows grouping of Option components within a Combobox
*/
export declare const OptionGroup: ForwardRefComponent;
export declare const optionGroupClassNames: SlotClassNames;
/**
* OptionGroup Props
*/
export declare type OptionGroupProps = ComponentProps>;
export declare type OptionGroupSlots = {
/** The root group wrapper */
root: NonNullable>;
/**
* The option group label, displayed as static text before the child options.
* If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.
*/
label?: Slot<'span'>;
};
/**
* State used in rendering OptionGroup
*/
export declare type OptionGroupState = ComponentState;
/**
* Data for the onOptionSelect callback.
* `optionValue` and `optionText` will be undefined if multiple options are modified at once.
*/
export declare type OptionOnSelectData = {
optionValue: string | undefined;
optionText: string | undefined;
selectedOptions: string[];
};
/**
* Option Props
*/
export declare type OptionProps = ComponentProps> & {
/**
* Sets an option to the `disabled` state.
* Disabled options cannot be selected, but are still keyboard navigable
*/
disabled?: boolean;
/**
* Defines a unique identifier for the option.
* Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.
* Defaults to `text` if not provided.
*/
value?: string;
} & ({
/**
* An optional override the string value of the Option's display text,
* defaulting to the Option's child content.
* This is used as the Dropdown button's or Combobox input's value when the option is selected,
* and as the comparison for type-to-find keyboard functionality.
*/
text?: string;
children: string;
} | {
/**
* The string value of the Option's display text when the Option's children are not a string.
* This is used as the Dropdown button's or Combobox input's value when the option is selected,
* and as the comparison for type-to-find keyboard functionality.
*/
text: string;
children?: React_2.ReactNode;
});
export declare type OptionSlots = {
/** The root option slot, with role="option" */
root: NonNullable>;
/** The check icon that is visible for selected options */
checkIcon: Slot<'span'>;
};
/**
* State used in rendering Option
*/
export declare type OptionState = ComponentState & Pick & {
/**
* @deprecated - no longer used internally
*/
active: boolean;
/**
* @deprecated - no longer used internally
*/
focusVisible: boolean;
/** If true, the option is part of a multiselect combobox or listbox */
multiselect?: boolean;
/** If true, the option is selected */
selected: boolean;
};
declare type OptionValue = {
/** The disabled state of the option. */
disabled?: boolean;
/** The `id` attribute of the option. */
id: string;
/** The `text` string for the option. */
text: string;
/** The value string of the option. */
value: string;
};
/**
* Render the final JSX of Combobox
*/
export declare const renderCombobox_unstable: (state: ComboboxState, contextValues: ComboboxContextValues) => JSX.Element;
/**
* Render the final JSX of Dropdown
*/
export declare const renderDropdown_unstable: (state: DropdownState, contextValues: DropdownContextValues) => JSX.Element;
/**
* Render the final JSX of Listbox
*/
export declare const renderListbox_unstable: (state: ListboxState, contextValues: ListboxContextValues) => JSX.Element;
/**
* Render the final JSX of Option
*/
export declare const renderOption_unstable: (state: OptionState) => JSX.Element;
/**
* Render the final JSX of OptionGroup
*/
export declare const renderOptionGroup_unstable: (state: OptionGroupState) => JSX.Element;
/** Possible event types for onOptionSelect */
export declare type SelectionEvents = React_2.ChangeEvent | React_2.KeyboardEvent | React_2.MouseEvent;
declare type SelectionProps = {
/**
* For an uncontrolled component, sets the initial selection.
* If this is set, the `defaultValue` prop MUST also be set.
*/
defaultSelectedOptions?: string[];
/**
* Sets the selection type to multiselect.
* Set this to true for multiselect, even if fully controlling selection state.
* This enables styles and accessibility properties to be set.
* @default false
*/
multiselect?: boolean;
/** Callback when an option is selected */
onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;
/**
* An array of selected option keys.
* Use this with `onOptionSelect` to directly control the selected option(s)
* If this is set, the `value` prop MUST also be controlled.
*/
selectedOptions?: string[];
};
/** Values returned by the useSelection hook */
declare type SelectionState = {
clearSelection: (event: SelectionEvents) => void;
selectedOptions: string[];
selectOption: (event: SelectionEvents, option: OptionValue) => void;
};
/**
* @internal
* useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,
* with the semantics and event handlers needed for the Combobox and Dropdown components.
* The element type of the ref should always match the element type used in the trigger shorthand.
*/
export declare function useButtonTriggerSlot(triggerFromProps: NonNullable>, ref: React_2.Ref, options: UseButtonTriggerSlotOptions): SlotComponentType>>;
declare type UseButtonTriggerSlotOptions = {
state: UseTriggerSlotState;
defaultProps: unknown;
activeDescendantController: ActiveDescendantImperativeRef;
};
/**
* Create the state required to render Combobox.
*
* The returned state can be modified with hooks such as useComboboxStyles_unstable,
* before being passed to renderCombobox_unstable.
*
* @param props - props from this instance of Combobox
* @param ref - reference to root HTMLElement of Combobox
*/
export declare const useCombobox_unstable: (props: ComboboxProps, ref: React_2.Ref) => ComboboxState;
/**
* @internal
* State shared between Combobox and Dropdown components
*/
export declare const useComboboxBaseState: (props: ComboboxBaseProps & {
children?: React_2.ReactNode;
editable?: boolean;
disabled?: boolean;
freeform?: boolean;
activeDescendantController: ActiveDescendantImperativeRef;
}) => ComboboxBaseState;
export declare function useComboboxContextValues(state: Omit & Pick): ComboboxBaseContextValues;
/**
* @internal
*/
export declare function useComboboxFilter(query: string, options: T[], config: UseComboboxFilterConfig): JSX.Element[];
declare type UseComboboxFilterConfig = {
/** Provides a custom filter for the option. */
filter?: (optionText: string, query: string) => boolean;
/** Provides a custom message to display when there are no options. */
noOptionsMessage?: React_2.ReactNode;
/** Provides a way to map an option object to a React key. By default, "value" is used. */
optionToReactKey?: (option: T) => string;
/** Provides a way to map an option object to a text used for search. By default, "value" is used. */
optionToText?: (option: T) => string;
/** Provides a custom render for the option. */
renderOption?: (option: T) => JSX.Element;
};
/**
* Apply styling to the Combobox slots based on the state
*/
export declare const useComboboxStyles_unstable: (state: ComboboxState) => ComboboxState;
declare type UsedComboboxState = UseTriggerSlotState & Pick;
/**
* Create the state required to render Dropdown.
*
* The returned state can be modified with hooks such as useDropdownStyles_unstable,
* before being passed to renderDropdown_unstable.
*
* @param props - props from this instance of Dropdown
* @param ref - reference to root HTMLElement of Dropdown
*/
export declare const useDropdown_unstable: (props: DropdownProps, ref: React_2.Ref) => DropdownState;
/**
* Apply styling to the Dropdown slots based on the state
*/
export declare const useDropdownStyles_unstable: (state: DropdownState) => DropdownState;
/**
* @internal
* useInputTriggerSlot returns a tuple of trigger/listbox shorthand,
* with the semantics and event handlers needed for the Combobox and Dropdown components.
* The element type of the ref should always match the element type used in the trigger shorthand.
*/
export declare function useInputTriggerSlot(triggerFromProps: NonNullable>, ref: React_2.Ref, options: UseInputTriggerSlotOptions): SlotComponentType>>;
declare type UseInputTriggerSlotOptions = {
state: UsedComboboxState;
freeform: boolean | undefined;
defaultProps?: Partial;
activeDescendantController: ActiveDescendantImperativeRef;
};
/**
* Create the state required to render Listbox.
*
* The returned state can be modified with hooks such as useListboxStyles_unstable,
* before being passed to renderListbox_unstable.
*
* @param props - props from this instance of Listbox
* @param ref - reference to root HTMLElement of Listbox
*/
export declare const useListbox_unstable: (props: ListboxProps, ref: React_2.Ref) => ListboxState;
export declare const useListboxContext_unstable: (selector: ContextSelector) => T;
export declare function useListboxContextValues(state: ListboxState): ListboxContextValues;
/**
* @internal
* @returns listbox slot with desired behaviour and props
*/
export declare function useListboxSlot(listboxSlotFromProp: Slot | undefined, ref: React_2.Ref, options: UseListboxSlotOptions): SlotComponentType>> | undefined;
declare type UseListboxSlotOptions = {
state: UseListboxSlotState;
triggerRef: React_2.RefObject | React_2.RefObject | React_2.RefObject;
defaultProps?: Partial;
};
declare type UseListboxSlotState = Pick;
/**
* Apply styling to the Listbox slots based on the state
*/
export declare const useListboxStyles_unstable: (state: ListboxState) => ListboxState;
/**
* Create the state required to render Option.
*
* The returned state can be modified with hooks such as useOptionStyles_unstable,
* before being passed to renderOption_unstable.
*
* @param props - props from this instance of Option
* @param ref - reference to root HTMLElement of Option
*/
export declare const useOption_unstable: (props: OptionProps, ref: React_2.Ref) => OptionState;
/**
* Create the state required to render OptionGroup.
*
* The returned state can be modified with hooks such as useOptionGroupStyles_unstable,
* before being passed to renderOptionGroup_unstable.
*
* @param props - props from this instance of OptionGroup
* @param ref - reference to root HTMLElement of OptionGroup
*/
export declare const useOptionGroup_unstable: (props: OptionGroupProps, ref: React_2.Ref) => OptionGroupState;
/**
* Apply styling to the OptionGroup slots based on the state
*/
export declare const useOptionGroupStyles_unstable: (state: OptionGroupState) => OptionGroupState;
/**
* Apply styling to the Option slots based on the state
*/
export declare const useOptionStyles_unstable: (state: OptionState) => OptionState;
declare type UseTriggerSlotState = Pick;
export { }