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

import { MultiSelectComponent } from './MultiselectTypes.js';
/**
 * The MultiSelect component allows users to select multiple items from a dropdown list.
 * The component provides two different APIs:
 * 1. Static API - For simple cases where options are defined as direct children and use primitive values as keys (strings or numbers)
 * 2. Dynamic API - For data-driven cases where options are generated from a dynamic collection with typed objects
 *
 * Selection is backed by React Aria and exposed as a Set of option keys. For dynamic options,
 * the selected keys are resolved back to their original items before calling `renderValue`.
 * Searchable multiselects use each option's `textValue` when provided, then fall back to
 * string children for filtering and typeahead.
 * @example
 * ```tsx
 * import { MultiSelect, MultiSelectOption, MultiSelectOptGroup } from '@payfit/unity-components'
 *
 * // Static API - Options defined as direct children
 * <MultiSelect
 *   placeholder="Select fruits..."
 *   onChange={(selected) => console.log(selected)}
 * >
 *   <MultiSelectOptGroup label="Citrus" withSeparator>
 *     <MultiSelectOption value="orange">Orange</MultiSelectOption>
 *     <MultiSelectOption value="lemon">Lemon</MultiSelectOption>
 *   </MultiSelectOptGroup>
 *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
 * </MultiSelect>
 *
 * // Dynamic API - Options generated from a collection with typed objects
 * interface Fruit {
 *   id: string;
 *   name: string;
 *   category: string;
 * }
 *
 * const fruits: Set<Fruit> = new Set([
 *   { id: 'apple-1', name: 'Apple', category: 'Core' },
 *   { id: 'orange-1', name: 'Orange', category: 'Citrus' }
 * ]);
 *
 * <MultiSelect
 *   items={fruits}
 *   placeholder="Select fruits..."
 *   value={new Set(['apple-1'])}
 *   getItemValue={item => item.id}
 *   renderValue={(items) =>
 *     Array.from(items)
 *       .map(item => item.name)
 *       .join(', ')
 *   }
 * >
 *   {(item) => (
 *     <MultiSelectOption value={item.id} textValue={item.name}>
 *       {item.name}
 *     </MultiSelectOption>
 *   )}
 * </MultiSelect>
 * ```
 * @component
 * @template TItems - The type of the items collection. Use `Set<T>` for flat lists or `Map<string, T[]>` for grouped lists. When omitted or undefined, the component uses the static API with React children.
 * @remarks
 * [API & Docs](https://unity-components.payfit.io/?path=/docs/inputs-multiselect--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
 */
export declare const MultiSelect: MultiSelectComponent & {
    displayName: string;
};