@ariakit/react-core
Version:
Ariakit React core
53 lines (52 loc) • 2.23 kB
TypeScript
import type { ElementType } from "react";
import type { CompositeGroupLabelOptions } from "../composite/composite-group-label.tsx";
import type { Props } from "../utils/types.ts";
import type { ComboboxStore } from "./combobox-store.ts";
declare const TagName = "div";
type TagName = typeof TagName;
/**
* Returns props to create a `ComboboxGroupLabel` component. This hook should be
* used in a component that's wrapped with `ComboboxGroup` so the
* `aria-labelledby` is correctly set on the combobox group element.
* @see https://ariakit.org/components/combobox
* @example
* ```jsx
* // This component should be wrapped with ComboboxGroup
* const props = useComboboxGroupLabel();
* <Role {...props}>Label</Role>
* ```
*/
export declare const useComboboxGroupLabel: import("../utils/types.ts").Hook<"div", ComboboxGroupLabelOptions<"div">>;
/**
* Renders a label in a combobox group. This component should be wrapped with
* [`ComboboxGroup`](https://ariakit.org/reference/combobox-group) so the
* `aria-labelledby` is correctly set on the group element.
* @see https://ariakit.org/components/combobox
* @example
* ```jsx {5}
* <ComboboxProvider>
* <Combobox />
* <ComboboxPopover>
* <ComboboxGroup>
* <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>
* <ComboboxItem value="Apple" />
* <ComboboxItem value="Banana" />
* </ComboboxGroup>
* </ComboboxPopover>
* </ComboboxProvider>
* ```
*/
export declare const ComboboxGroupLabel: (props: ComboboxGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export interface ComboboxGroupLabelOptions<T extends ElementType = TagName> extends CompositeGroupLabelOptions<T> {
/**
* Object returned by the
* [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
* hook. If not provided, the closest
* [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
* [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
* components' context will be used.
*/
store?: ComboboxStore;
}
export type ComboboxGroupLabelProps<T extends ElementType = TagName> = Props<T, ComboboxGroupLabelOptions<T>>;
export {};