@payfit/unity-components
Version:
49 lines (48 loc) • 2.78 kB
TypeScript
import { Key } from 'react-aria-components/Breadcrumbs';
import { AIStructuredInputAnswerItem, AIStructuredInputAnswersProps } from '../parts/AIStructuredInputAnswers.js';
import { AIStructuredInputFreeTextAnswerProps } from '../parts/AIStructuredInputFreeTextAnswer.js';
/** A form-owned answer: unanswered, selected string or numeric keys, or a free-text draft. */
export type AIStructuredInputAnswerValue = null | {
kind: 'choices';
keys: Key[];
} | {
kind: 'text';
text: string;
};
/** Props for the AI Kit form-connected choice and optional free-text field. */
export type TanstackAIStructuredInputAnswersFieldProps<TItem extends AIStructuredInputAnswerItem> = Omit<AIStructuredInputAnswersProps<TItem>, 'value' | 'onChange'> & {
/** Called after a choice update; useful for consumer-owned navigation. */
onAnswerChange?: (value: AIStructuredInputAnswerValue) => void;
/** Optional text control. Its submit action is local, not a form submission. */
freeText?: Omit<AIStructuredInputFreeTextAnswerProps, 'value' | 'onChange' | 'isInvalid' | 'feedbackMessage' | 'feedbackId'>;
/** Override feedback from the field, for example after batch validation. */
feedbackMessage?: string;
};
/**
* Binds choice and optional text drafts to one AI Kit form field.
* Render inside `form.AppField` and initialize the field to an
* `AIStructuredInputAnswerValue`. Editing either answer kind replaces the
* other; focus alone does not change the answer. Text confirmation calls the
* supplied local `freeText.onSubmit`, not the form's submit action.
* The list and optional text input need accessible names. Field validation
* feedback is associated with the answer group and text input.
* @param props - Choice options, optional free text, and local callbacks.
* @param props.freeText - Optional free-text control and local confirmation action.
* @param props.onAnswerChange - Receives the new draft after a choice or text edit.
* @param props.feedbackMessage - Optional application-owned validation message.
* @example
* ```tsx
* <form.AppField name="answers.country">
* {field => (
* <field.StructuredInputAnswersField
* aria-label="Country"
* items={countries}
* freeText={{ 'aria-label': 'Other country', onSubmit: advance }}
* >
* {country => <AIStructuredInputAnswer id={country.id} number={country.number}>{country.label}</AIStructuredInputAnswer>}
* </field.StructuredInputAnswersField>
* )}
* </form.AppField>
* ```
*/
export declare function TanstackAIStructuredInputAnswersField<TItem extends AIStructuredInputAnswerItem>({ freeText, onAnswerChange, feedbackMessage, ...props }: TanstackAIStructuredInputAnswersFieldProps<TItem>): import('react/jsx-runtime').JSX.Element;