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

import { Node } from '@react-types/shared';
import { ForwardedRef, JSX, ReactNode } from 'react';
import { PopoverProps as AriaPopoverProps, SelectProps as AriaSelectProps } from 'react-aria-components/Select';
export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'style' | 'className' | 'value' | 'defaultValue' | 'onChange' | 'selectionMode'> {
    /** In static mode, contains <SelectOption /> and <SelectOptionGroup /> components, in dynamic mode, contains a function to render items passed to the component*/
    children: ReactNode | ((item: T) => ReactNode);
    /** In dynamic mode, contains the items to display in the select */
    items?: Iterable<T>;
    /** Whether the field is read-only */
    isReadOnly?: boolean;
    /** The value of the selected item */
    value?: AriaSelectProps<T>['value'];
    /** The default value of the selected item in uncontrolled mode */
    defaultValue?: AriaSelectProps<T>['defaultValue'];
    /** Function trigger when a item is selected */
    onChange?: AriaSelectProps<T>['onChange'];
    /** Whether the search input should be displayed or not */
    isSearchable?: boolean;
    /** The placement of the popover */
    placement?: Extract<AriaPopoverProps['placement'], 'top' | 'bottom'>;
    /** The aria-label for the search input when isSearchable is true */
    searchInputAriaLabel?: string;
    /**
     * Custom content to render when the listbox has no options to display.
     * This can occur when `items` is empty or when search filtering returns no results.
     * If not provided, the listbox will appear empty.
     * @example
     * ```tsx
     * <Select
     *   items={[]}
     *   renderEmptyState={
     *     <EmptyStateNoSearchResults description="No options available" />
     *   }
     * >
     *   {item => <SelectOption>{item.name}</SelectOption>}
     * </Select>
     * ```
     */
    renderEmptyState?: ReactNode | (() => ReactNode);
    /** Custom render function to format the selected value display */
    renderValue?: (value: Node<T>) => ReactNode;
}
type SelectComponent = (<TItems extends object>(props: SelectProps<TItems> & {
    ref?: ForwardedRef<HTMLDivElement>;
}) => JSX.Element) & {
    displayName?: string;
};
/**
 * The `Select` component is used to render a list of options
 * @example
 * ```tsx
 * const schema = z.object({
 *  vegetable: z.string()
 * })
 *
 * function MyForm() {
 *   const { Form, FormField } = useUnityForm(schema)
 *
 *   return (
 *    <Form action={handleSubmit}>
 *      <FormField name="vegetable">
 *        <FormLabel>Vegetables</FormLabel>
 *        <FormHelperText>Select your favorite vegetable</FormHelperText>
 *        <FormControl>
 *          <Select>
 *            <SelectOption id="Cabbage">Cabbage</SelectOption>
 *            <SelectOption id="Broccoli">Broccoli</SelectOption>
 *           <SelectOption id="Carrots">Carrots</SelectOption>
 *          </Select>
 *        </FormControl>
 *      </FormField>
 *    </Form>
 *   )
 * }
 * ```
 */
declare const Select: SelectComponent;
export { Select };