@payfit/unity-components/dist/esm/components/multi-select/parts/MultiSelectOptGroup.d.ts

import { ReactNode } from 'react';
import { ListBoxSectionProps } from 'react-aria-components/ListBox';
/**
 * Base props for both static and dynamic MultiSelectOptGroup variants.
 */
type BaseOptGroupProps = {
    /** The label text displayed at the top of the group */
    label: string;
    /** Whether to show a separator line after the group */
    withSeparator?: boolean;
    /** Additional class name for the group wrapper */
    className?: string;
};
/**
 * Props for the dynamic API of MultiSelectOptGroup.
 * @template T - The type of items in the group.
 */
export interface DynamicMultiSelectOptGroup<T> extends BaseOptGroupProps, Omit<ListBoxSectionProps<T>, 'children' | 'id' | 'items' | 'className'> {
    /** Array of items to render as options within the group */
    items: T[];
    /** Render function that converts each item into a MultiSelectOption */
    children: (item: T) => React.JSX.Element;
}
/**
 * Props for the static API of MultiSelectOptGroup.
 */
export interface StaticMultiSelectOptGroup extends BaseOptGroupProps {
    /** Not used in static API */
    items?: never;
    /** Static MultiSelectOption components to render within the group */
    children: ReactNode;
}
/**
 * Combined props type for MultiSelectOptGroup.
 * @template T - The type of items when using the dynamic API.
 */
export type MultiSelectOptGroupProps<T = unknown> = DynamicMultiSelectOptGroup<T> | StaticMultiSelectOptGroup;
/**
 * Groups related options within a `MultiSelect` component.
 *
 * This component renders a React Aria `ListBoxSection`, so grouped options keep
 * keyboard navigation, filtering, and selection behavior aligned with the parent
 * multiselect.
 *
 * The component provides two APIs for grouping options:
 * 1. Static API - Directly nest MultiSelectOption components
 * 2. Dynamic API - Provide an array of items and a render function for dynamic items
 * @example
 * ```tsx
 * // Static API
 * <MultiSelectOptGroup label="Fruits" withSeparator>
 *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
 *   <MultiSelectOption value="banana">Banana</MultiSelectOption>
 * </MultiSelectOptGroup>
 *
 * // Dynamic API
 * <MultiSelectOptGroup
 *   label="Fruits"
 *   items={fruits}
 *   withSeparator
 * >
 *   {fruit => (
 *     <MultiSelectOption value={fruit.id} textValue={fruit.name}>
 *       {fruit.name}
 *     </MultiSelectOption>
 *   )}
 * </MultiSelectOptGroup>
 * ```
 * @template T - The type of items when using the dynamic API.
 * @see {@link MultiSelectOption} for the child component API.
 */
declare function MultiSelectOptGroup<T>(props: MultiSelectOptGroupProps<T>): import("react/jsx-runtime").JSX.Element;
declare namespace MultiSelectOptGroup {
    var displayName: string;
}
export { MultiSelectOptGroup };