import type { DropdownBaseHookProps } from '@fluentui/react-combobox';
import type { DropdownBaseHookState } from '@fluentui/react-combobox';
import { DropdownContextValues } from '@fluentui/react-combobox';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { ListboxContextValues } from '@fluentui/react-combobox';
import { ListboxProps } from '@fluentui/react-combobox';
import { ListboxSlots } from '@fluentui/react-combobox';
import { ListboxState } from '@fluentui/react-combobox';
import { OptionGroupProps } from '@fluentui/react-combobox';
import { OptionGroupSlots } from '@fluentui/react-combobox';
import { OptionGroupState } from '@fluentui/react-combobox';
import { OptionProps } from '@fluentui/react-combobox';
import { OptionSlots } from '@fluentui/react-combobox';
import type { OptionState as OptionState_2 } from '@fluentui/react-combobox';
import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
import type { PositioningShorthandValue } from '@fluentui/react-positioning';
import type * as React_2 from 'react';
import { renderListbox_unstable as renderListbox } from '@fluentui/react-combobox';
import { renderOption_unstable as renderOption } from '@fluentui/react-combobox';
import { renderOptionGroup_unstable as renderOptionGroup } from '@fluentui/react-combobox';
import { useListboxContextValues } from '@fluentui/react-combobox';

/**
 * Dropdown component - TODO: add more docs
 */
export declare const Dropdown: ForwardRefComponent<DropdownProps>;

export declare type DropdownProps = Omit<DropdownBaseHookProps, 'inlinePopup' | 'mountNode' | 'positioning'> & {
    positioning?: PositioningShorthand;
};

export declare type DropdownState = DropdownBaseHookState & {
    root: DropdownBaseHookState['root'] & {
        /**
         * Whether the dropdown is currently open.
         */
        'data-open'?: string;
        /**
         * Whether the trigger element is currently disabled.
         */
        'data-disabled'?: string;
        /**
         * Whether the trigger element is currently displaying a placeholder.
         */
        'data-placeholder'?: string;
        /**
         * Whether the trigger element is currently invalid.
         */
        'data-invalid'?: string;
        /**
         * Wether the clear icon is visible.
         */
        'data-clearable'?: string;
    };
};

/**
 * Listbox component: a standalone selection control, or the popup in a Combobox.
 */
export declare const Listbox: ForwardRefComponent<ListboxProps>;

export { ListboxContextValues }

export { ListboxProps }

export { ListboxSlots }

export { ListboxState }

/**
 * Option component used inside Listbox.
 */
declare const Option_2: ForwardRefComponent<OptionProps>;
export { Option_2 as Option }

/**
 * OptionGroup component used inside Listbox.
 */
export declare const OptionGroup: ForwardRefComponent<OptionGroupProps>;

export { OptionGroupProps }

export { OptionGroupSlots }

export { OptionGroupState }

export { OptionProps }

export { OptionSlots }

/**
 * State used in rendering Option
 */
export declare type OptionState = OptionState_2 & {
    root: {
        /**
         * Whether the option is currently disabled.
         */
        'data-disabled'?: string;
        /**
         * Whether the option is currently selected.
         */
        'data-selected'?: string;
        /**
         * Whether the option belongs to a multiselect listbox.
         */
        'data-multiselect'?: string;
    };
};

declare type PositioningProps = Pick<PositioningProps_2, 'align' | 'coverTarget' | 'fallbackPositions' | 'matchTargetSize' | 'offset' | 'pinned' | 'position' | 'positioningRef' | 'strategy' | 'target'>;

declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;

/**
 * Render the final JSX of Dropdown
 */
export declare const renderDropdown: (state: DropdownState, contextValues: DropdownContextValues) => JSXElement;

export { renderListbox }

export { renderOption }

export { renderOptionGroup }

/**
 * Create the state required to render Dropdown.
 *
 * The returned state can be modified with hooks such as useDropdownStyles,
 * before being passed to renderDropdown.
 *
 * @param props - props from this instance of Dropdown
 * @param ref - reference to root HTMLButtonElement of Dropdown
 */
export declare const useDropdown: (props: DropdownProps, ref: React_2.Ref<HTMLButtonElement>) => DropdownState;

export declare const useDropdownContextValues: (state: DropdownState) => DropdownContextValues;

/**
 * Returns the state for a Listbox component, given its props and ref.
 * The returned state can be modified with hooks before being passed to `renderListbox`.
 */
export declare const useListbox: (props: ListboxProps, ref: React_2.Ref<HTMLElement>) => ListboxState;

export { useListboxContextValues }

/**
 * Returns the state for an Option component, given its props and ref.
 * The returned state can be modified with hooks before being passed to `renderOption`.
 */
export declare const useOption: (props: OptionProps, ref: React_2.Ref<HTMLElement>) => OptionState;

/**
 * Returns the state for an OptionGroup component, given its props and ref.
 * The returned state can be modified with hooks before being passed to `renderOptionGroup`.
 */
export declare const useOptionGroup: (props: OptionGroupProps, ref: React_2.Ref<HTMLElement>) => OptionGroupState;

export { }