import { ComponentPropsWithoutRef, Dispatch, SetStateAction, ReactNode, MutableRefObject } from 'react'; import { UseComboboxProps as UseDownshiftComboboxProps, UseMultipleSelectionProps as UseDownshiftMultipleSelectionProps, UseComboboxReturnValue as UseDownshiftComboboxReturnValue, UseMultipleSelectionReturnValue as UseDownshiftMultipleSelectionReturnValue, UseComboboxState as UseDownshiftComboboxState, UseMultipleSelectionState as UseDownshiftMultipleSelectionState, UseSelectProps as UseDownshiftSelectProps, UseSelectReturnValue as UseDownshiftSelectReturnValue, UseSelectState as UseDownshiftSelectState } from 'downshift'; import { MatchSorterOptions } from 'match-sorter'; import { LayoutUtilProps } from '../../types'; import { ComboboxGroupByValue } from './internal/ComboboxGroupContext'; /** * Props for the ComboboxContext component * @extends Required | UseDownshiftSelectProps, "items" | "itemToString" | "itemToKey" | "selectedItem">> * @extends Pick | UseDownshiftSelectReturnValue, "getToggleButtonProps" | "getItemProps" | "getLabelProps" | "getMenuProps" | "closeMenu" | "selectItem" | "highlightedIndex" | "isOpen" | "inputValue"> * @extends Partial, "getInputProps">> * @extends Partial, "getSelectedItemProps" | "getDropdownProps" | "addSelectedItem" | "removeSelectedItem" | "setSelectedItems" | "reset">> * @extends Partial | UseDownshiftSelectReturnValue, "reset">> * @extends LayoutUtilProps */ export type ComboboxContextProps = Required | UseDownshiftSelectProps, "items" | "itemToString" | "itemToKey" | "selectedItem">> & Pick | UseDownshiftSelectReturnValue, "getToggleButtonProps" | "getItemProps" | "getLabelProps" | "getMenuProps" | "closeMenu" | "selectItem" | "highlightedIndex" | "isOpen" | "inputValue"> & Partial, "getInputProps">> & Partial, "getSelectedItemProps" | "getDropdownProps" | "addSelectedItem" | "removeSelectedItem" | "setSelectedItems" | "reset">> & Partial | UseDownshiftSelectReturnValue, "reset">> & LayoutUtilProps & { disableClearSelection?: boolean; isReadOnly?: boolean; isDisabled?: boolean; /** @deprecated to be removed on next major - this is replaced by Combobox's disabled and readOnly props */ setIsReadOnly: Dispatch>; /** @deprecated to be removed on next major - this is replaced by Combobox's disabled and readOnly props */ setIsDisabled: Dispatch>; hasDisabledPopover: boolean; setHasDisabledPopover: Dispatch>; hasEmpty: boolean; setHasEmpty: Dispatch>; multiple: boolean; select: boolean; selectedItems: Item[]; disabledItems: Item[]; setDisabledItems: Dispatch>; setForceCloseOnSelectItems: Dispatch>; setForceClearInputValueOnSelectItems: Dispatch>; loading: boolean; referenceRef: MutableRefObject; contentRef: MutableRefObject; hasAddNew?: boolean; setHasAddNew?: Dispatch>; onSelectItemAddNew?: (inputValue: UseDownshiftComboboxReturnValue["inputValue"]) => void; setOnSelectItemAddNew?: Dispatch["inputValue"]) => void) | undefined>>; hasExactMatch?: boolean; setHasExactMatch?: Dispatch>; groupBy?: string; groupToString?: (groupByValue: ComboboxGroupByValue) => string | null; groups: { key: ComboboxGroupByValue; label: string | null; items: Item[]; }[]; }; export declare const ComboboxContext: import('react').Context | null>; /** * Hook to access the Combobox context * @returns The Combobox context value * @throws Error if used outside of a Combobox component */ export declare const useCombobox: () => ComboboxContextProps; /** * Props for shared functionality across all combobox variants * @extends LayoutUtilProps * @extends Pick, "className" | "style"> */ type SharedProps = LayoutUtilProps & Pick, "className" | "style"> & { children?: ReactNode; /** * @default false */ disabled?: boolean; /** * @default false */ readOnly?: boolean; /** * @default false */ loading?: boolean; /** * @default false */ disableCloseOnClickOutside?: boolean; /** * @default false */ disableMatchReferenceWidth?: boolean; /** * @deprecated to be removed on next major * This is not needed anymore as the Popover API is used. * Popover API uses top-layer for its popover content. */ root?: HTMLElement | React.MutableRefObject | null; /** * @default false */ open?: boolean; /** * @default false */ disableCloseOnSelectItem?: boolean; onStateChange?: (changes: { type: string; } & Partial> & Partial> & Partial>) => void; minPopoverHeight?: string | number; groupBy?: string; groupToString?: (groupByValue: ComboboxGroupByValue) => string | null; /** Accepts groupBy values `a` and `b` -- must return a negative if `a` before `b` and a positive if `b` before `a`. * @default {func} (a, b) => `${a}`.localeCompare(`${b}`) */ groupSorter?: (a: ComboboxGroupByValue, b: ComboboxGroupByValue) => number; }; /** * Props for combobox-specific functionality * @extends Omit, "onStateChange" | "onInputValueChange"> */ type SharedComboboxProps = Omit, "onStateChange" | "onInputValueChange"> & { filterOptions?: MatchSorterOptions; disableFilter?: boolean; /** * @deprecated Please use `Combobox.SearchField`'s `onChange` method instead */ onInputValueChange?: UseDownshiftComboboxProps["onInputValueChange"]; }; /** * Props for select-specific functionality * @extends Omit, "onStateChange" | "onInputValueChange"> */ type SharedSelectProps = Omit, "onStateChange" | "onInputValueChange">; /** * Props for single selection functionality */ type SharedSingleProps = { multiple?: never; onChange?: Dispatch> | ((arg: Item | null) => void); }; /** * Props for multiple selection functionality * @extends Partial, "onSelectedItemsChange" | "initialSelectedItems" | "initialActiveIndex" | "defaultSelectedItems" | "defaultActiveIndex" | "activeIndex" | "selectedItems">> */ type SharedMultipleProps = { multiple: true; onChange?: Dispatch> | ((arg: Item[] | null) => void); } & Partial, "onSelectedItemsChange" | "initialSelectedItems" | "initialActiveIndex" | "defaultSelectedItems" | "defaultActiveIndex" | "activeIndex" | "selectedItems">>; /** * Props for single select functionality * @extends SharedProps * @extends SharedSelectProps * @extends SharedSingleProps */ type SelectSingleProps = SharedProps & SharedSelectProps & SharedSingleProps & { disableClearSelection?: boolean; }; /** * Props for multiple select functionality * @extends SharedProps * @extends SharedSelectProps * @extends SharedMultipleProps */ type SelectMultipleProps = SharedProps & SharedSelectProps & SharedMultipleProps; /** * Props for single combobox functionality * @extends SharedProps * @extends SharedComboboxProps * @extends SharedSingleProps */ type ComboboxSingleProps = SharedProps & SharedComboboxProps & SharedSingleProps; /** * Props for multiple combobox functionality * @extends Omit, "open" | "disableCloseOnSelectItem"> * @extends SharedComboboxProps * @extends SharedMultipleProps */ type ComboboxMultipleProps = Omit, "open" | "disableCloseOnSelectItem"> & SharedComboboxProps & SharedMultipleProps & ({ disableClearInputValueOnSelectItem: true; disableCloseOnSelectItem: true; open?: boolean; } | { disableClearInputValueOnSelectItem: true; open: true; disableCloseOnSelectItem?: boolean; } | { disableClearInputValueOnSelectItem?: never; disableCloseOnSelectItem?: boolean; open?: boolean; }); /** * Props for the Combobox component * @extends ComboboxSingleProps | ComboboxMultipleProps */ export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps; type SelectProps = SelectSingleProps | SelectMultipleProps; export type ComboboxSelectProps = SelectProps; /** * ComboboxSingle component for single-item selection with search functionality. * * Features: * - Single item selection with search and filtering * - Configurable filtering options with match-sorter * - Optional "Add New" item functionality * - Grouping support with custom group labels and sorting * - Loading states with spinner indicators * - Disabled and read-only states * - Customizable popover behavior and positioning * - Full accessibility support with ARIA attributes * - Keyboard navigation support * - Layout utility props for positioning and spacing * * @example * item.name} * onChange={setSelectedItem} * filterOptions={{ keys: ["name"] }} * > * * * {({ items }) => ( * * {items.map((item, i) => ( * * {item.name} * * ))} * * )} * * */ export declare const ComboboxSingle: (props: ComboboxSingleProps) => import("react/jsx-runtime").JSX.Element; export declare const ComboboxMultiple: (props: ComboboxMultipleProps) => import("react/jsx-runtime").JSX.Element; /** * NOTE: There is a lot of duplicated code here! Here's a list of the /actual/ * differences between select-only and regular combobox to help with * refactoring this later! * * 1) Using Downshift's `useSelect` hook instead of `useCombobox` * - Swapping out the stateChangeTypes for their equivalents * 2) Since there's no input, we don't need to passthrough `getInputProps` * 3) Since we don't do any sorting or filtering, we can remove: * - onInputValueChange function and prop * - setInputValue function * - onIsOpenChange function * - filterOptions prop * - internal `items` state and useEffect to keep it in sync * - useEffect to track first render * 4) Multiple-specific * - Remove `disableClearInputValueOnSelectItem` prop * - No need to store `setInputValue` function * - Remove all state reducer references to `inputValue` * - Remove `onStateChange` function from `useMultipleSelection` */ export declare const SelectSingle: (props: SelectSingleProps) => import("react/jsx-runtime").JSX.Element; export declare const SelectMultiple: (props: SelectMultipleProps) => import("react/jsx-runtime").JSX.Element; export declare const ComboboxElement: (props: ComboboxProps) => import("react/jsx-runtime").JSX.Element; export declare const ComboboxSelect: (props: SelectProps) => import("react/jsx-runtime").JSX.Element; export declare const Combobox: ((props: ComboboxProps) => import("react/jsx-runtime").JSX.Element) & { Select: (props: SelectProps) => import("react/jsx-runtime").JSX.Element; SearchField: (props: Omit & Pick & LayoutUtilProps & { maxRows?: number; selectedItemProps?: ((item: Item) => Partial) | undefined; } & { disabled?: boolean; readOnly?: boolean; }) => import("react/jsx-runtime").JSX.Element; SelectTrigger: (props: Omit & Pick & LayoutUtilProps & { maxRows?: number; selectedItemProps?: ((item: Item) => Partial) | undefined; } & { disabled?: boolean; readOnly?: boolean; }) => import("react/jsx-runtime").JSX.Element; Content: ({ children, className, disablePopover, ...rest }: import('./ComboboxContent').ComboboxContentProps) => import("react/jsx-runtime").JSX.Element; List: ({ children, className, ...rest }: import('./ComboboxList').ComboboxListProps) => import("react/jsx-runtime").JSX.Element; Item: (props: import('./ComboboxItem').ComboboxItemProps) => import("react/jsx-runtime").JSX.Element; ItemAddNew: (props: import('./ComboboxItem').ComboboxItemAddNewProps) => import("react/jsx-runtime").JSX.Element; Empty: ({ children, }: import('./ComboboxEmpty').ComboboxEmptyProps) => import("react/jsx-runtime").JSX.Element; }; export {};