@payfit/unity-components
Version:
74 lines (73 loc) • 2.92 kB
TypeScript
import { JSX, Ref } from 'react';
import { Key } from 'react-aria-components/Breadcrumbs';
import { SelectListProps } from '../../../../../core/components/select-list/SelectList.js';
/** An answer collection item must have an explicit, stable ID. */
export interface AIStructuredInputAnswerItem {
id: Key;
}
/** Props for a structured-input choice collection. */
export interface AIStructuredInputAnswersProps<TItem extends AIStructuredInputAnswerItem> extends Omit<SelectListProps<TItem>, 'items' | 'children' | 'value' | 'onChange'> {
/** The ordered answer options. Each item must have an explicit ID. */
items: readonly TItem[];
/** Renders each item, typically as an `AIStructuredInputAnswer`. */
children: SelectListProps<TItem>['children'];
/** The selected answer keys. Keep this value in application or form state. */
value: NonNullable<SelectListProps<TItem>['value']>;
/** Receives selection changes so the consumer can update its answer draft. */
onChange: NonNullable<SelectListProps<TItem>['onChange']>;
}
type AIStructuredInputAnswersComponent = {
<TItem extends AIStructuredInputAnswerItem>(props: AIStructuredInputAnswersProps<TItem> & {
ref?: Ref<HTMLDivElement>;
}): JSX.Element;
displayName: string;
};
/**
* Presents choice answers in the compact layout designed for structured questions.
* @param props - A controlled answer selection, ordered items, and an option renderer.
* @see {@link AIStructuredInputAnswersProps} for the complete API.
* @example
* ```tsx
* <AIStructuredInputAnswers
* aria-label="Choose a bonus type"
* items={answers}
* selectionMode="single"
* value={selectedAnswerIds}
* onChange={setSelectedAnswerIds}
* >
* {answer => (
* <AIStructuredInputAnswer id={answer.id} number={answer.number}>
* {answer.label}
* </AIStructuredInputAnswer>
* )}
* </AIStructuredInputAnswers>
* ```
* @remarks
* - Selection remains controlled by the consumer.
* - The defaults are multiple selection, end-position indicators, no search field, and a transparent wrapper.
* - The first option is hinted until the user changes the selection.
* - Unmounting and remounting resets the transient hint.
* @example Static option data
* ```tsx
* const bonusTypes = [
* { id: 'one-off', number: 1, label: 'One-off bonus' },
* { id: 'recurring', number: 2, label: 'Recurring bonus' },
* ]
*
* <AIStructuredInputAnswers
* aria-label="Choose a bonus type"
* items={bonusTypes}
* selectionMode="single"
* value={selectedBonusType}
* onChange={setSelectedBonusType}
* >
* {answer => (
* <AIStructuredInputAnswer id={answer.id} number={answer.number}>
* {answer.label}
* </AIStructuredInputAnswer>
* )}
* </AIStructuredInputAnswers>
* ```
*/
declare const AIStructuredInputAnswers: AIStructuredInputAnswersComponent;
export { AIStructuredInputAnswers };