@payfit/unity-components
Version:
81 lines (80 loc) • 2.72 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { ForwardedRef } from 'react';
import { ListBoxSectionProps } from 'react-aria-components/ListBox';
export declare const autocompleteItemGroup: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
header?: import('tailwind-merge').ClassNameValue;
separator?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
header?: import('tailwind-merge').ClassNameValue;
separator?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
base: string;
header: string;
separator: string;
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
header?: import('tailwind-merge').ClassNameValue;
separator?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
base: string;
header: string;
separator: string;
}, import('tailwind-variants').TVReturnType<unknown, {
base: string;
header: string;
separator: string;
}, undefined, unknown, unknown, undefined>>;
export interface AutocompleteItemGroupProps<T> extends VariantProps<typeof autocompleteItemGroup>, ListBoxSectionProps<T> {
/**
* The label text displayed at the top of the group
*/
label: string;
}
type AutocompleteItemGroupComponent = (<TItems extends object>(props: AutocompleteItemGroupProps<TItems> & {
ref?: ForwardedRef<HTMLDivElement>;
}) => JSX.Element) & {
displayName?: string;
};
/**
* Groups related options within an `Autocomplete` component.
*
* This component provides two APIs for grouping options:
* 1. Static API - Directly nest AutocompleteItem components
* 2. Dynamic API - Provide an array of items and a render function for dynamic items
* @example
* ```tsx
* // Static API
* <AutocompleteItemGroup label="Fruits">
* <AutocompleteItem id="apple">Apple</AutocompleteItem>
* <AutocompleteItem id="banana">Banana</AutocompleteItem>
* </AutocompleteItemGroup>
*
* // Dynamic API
* <AutocompleteItemGroup
* label="Fruits"
* items={fruits}
* >
* {fruit => (
* <AutocompleteItem id={fruit.id}>
* {fruit.name}
* </AutocompleteItem>
* )}
* </AutocompleteItemGroup>
* ```
*/
declare const AutocompleteItemGroup: AutocompleteItemGroupComponent;
export { AutocompleteItemGroup };