@payfit/unity-components
Version:
58 lines (57 loc) • 2.43 kB
TypeScript
import { ToggleSwitchGroupProps } from './ToggleSwitchGroup.js';
export type TanstackToggleSwitchGroupProps = Omit<ToggleSwitchGroupProps, 'value' | 'defaultValue' | 'isInvalid' | 'feedbackText'>;
/**
* TanStack‑controlled group component for multiple `ToggleSwitch` children.
*
* `TanstackToggleSwitchGroup` wraps `ToggleSwitchGroup` and binds its value
* (a `string[]`) to the TanStack field context via `useFieldContext`. The
* selection state is fully driven by the form — do not pass `value` or
* `defaultValue` directly.
*
* Behavior:
* - The value comes from `field.state.value` (string[]), defaulting to `[]`.
* - Changes are propagated via `field.handleChange` and forwarded to `onChange`.
* - The invalid state (`isInvalid`) is derived from `field.state.meta`
* (`isTouched` && `!isValid`).
*
* Accessibility:
* - The group handles its own label and `helperText`.
* - For error feedback coming from the form, use the dedicated Field variant
* (`TanstackToggleSwitchGroupField`).
*
* Usage constraints:
* - Must be rendered inside `<form.AppField name="…">`.
* - Pre‑fill via `useTanstackUnityForm({ defaultValues: { … } })`.
*
* Example:
* ```tsx
* const form = useTanstackUnityForm({
* validators: { onBlur: z.object({ pref: z.array(z.string()).optional() }) },
* defaultValues: { pref: ['email'] },
* })
*
* return (
* <form.AppForm>
* <form.Form>
* <form.AppField name="pref">
* {() => (
* <TanstackToggleSwitchGroup label="Notifications">
* <ToggleSwitch value="email" label="Email" />
* <ToggleSwitch value="sms" label="SMS" />
* <ToggleSwitch value="push" label="Push" />
* </TanstackToggleSwitchGroup>
* )}
* </form.AppField>
* </form.Form>
* </form.AppForm>
* )
* ```
* @public
* @see ToggleSwitchGroup
* @see useFieldContext
* @remarks The `value`, `defaultValue`, `isInvalid`, and `feedbackText` props are handled by the TanStack integration and therefore omitted.
* @param props Group props (excluding `value`, `defaultValue`, `isInvalid`, `feedbackText`).
* @returns A form‑controlled `fieldset` containing the child switches.
*/
declare const TanstackToggleSwitchGroup: import('react').ForwardRefExoticComponent<TanstackToggleSwitchGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
export { TanstackToggleSwitchGroup };