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

import { ForwardedRef, JSX } from 'react';
import { SelectProps } from './Select.js';
export type TanstackSelectProps<T extends object> = Omit<SelectProps<T>, 'value' | 'defaultValue' | 'onChange' | 'isInvalid' | 'name'>;
type TanstackSelectComponent = (<TItems extends object>(props: TanstackSelectProps<TItems> & {
    ref?: ForwardedRef<HTMLDivElement>;
}) => JSX.Element) & {
    displayName?: string;
};
/**
 * `TanstackSelect` is a controlled select component wired to the TanStack Form field context.
 * It is based on the Unity `Select` component.
 *
 * The component supports both static and dynamic options, search functionality, and grouping.
 * It manages field state via the TanStack Form context, including validation and accessibility.
 *
 * Example (static options):
 * ```tsx
 * import { useTanstackUnityForm } from '@payfit/unity-components'
 * import { z } from 'zod'
 *
 * function ExampleField() {
 *   const schema = z.object({
 *     fruit: z.string().min(1, 'Please select a fruit'),
 *   })
 *
 *   const form = useTanstackUnityForm({
 *     validators: { onBlur: schema },
 *     defaultValues: { fruit: '' }
 *   })
 *
 *   return (
 *     <form>
 *       <form.AppField name="fruit">
 *         {() => (
 *           <TanstackSelect placeholder="Choose a fruit">
 *             <SelectOption id="Apple">Apple</SelectOption>
 *             <SelectOption id="Banana">Banana</SelectOption>
 *             <SelectOption id="Orange">Orange</SelectOption>
 *           </TanstackSelect>
 *         )}
 *       </form.AppField>
 *     </form>
 *   )
 * }
 * ```
 *
 * Example (dynamic items):
 * ```tsx
 * function ExampleWithDynamicItems() {
 *   const items = [
 *     { id: 'Apple', name: 'Apple' },
 *     { id: 'Banana', name: 'Banana' },
 *     { id: 'Orange', name: 'Orange' },
 *   ]
 *
 *   const form = useTanstackUnityForm({
 *     validators: {},
 *     defaultValues: { fruit: '' }
 *   })
 *
 *   return (
 *     <form>
 *       <form.AppField name="fruit">
 *         {() => (
 *           <form.Select items={items}>
 *             {item => <SelectOption id={item.id}>{item.name}</SelectOption>}
 *           </form.Select>
 *         )}
 *       </form.AppField>
 *     </form>
 *   )
 * }
 * ```
 * @remarks Migration from `Select` (non-TanStack):
 * - Do not pass `value`, `defaultValue`, `onChange`, or `name` props: these are managed by the TanStack form context.
 * - `isInvalid` is automatically derived from the field's validation state.
 * - Use within `<form.AppField name="...">` to connect to the form state.
 */
declare const TanstackSelect: TanstackSelectComponent;
export { TanstackSelect };