@payfit/unity-components
Version:
65 lines (64 loc) • 3.04 kB
TypeScript
import { PropsWithChildren, ReactNode } from 'react';
export interface InlineFieldGroupEditViewProps extends PropsWithChildren {
/**
* Optional className for custom styling
*/
className?: string;
/**
* Legend text for the fieldset. Should describe the group of fields.
* This is required for accessibility but will be visually hidden.
*/
legend?: ReactNode;
}
/**
* InlineFieldGroupEditView displays form fields only when the parent InlineFieldGroup is in edit mode.
* Wrap form field components in this component to show them when editing.
* The component uses a semantic `<fieldset>` with a visually hidden `<legend>` for accessibility.
* It automatically disables all fields during loading states and hides content in read mode.
* @example Basic usage with form fields
* ```tsx
* import { useTanstackUnityForm } from '@payfit/unity-components'
*
* function Example() {
* const form = useTanstackUnityForm({
* defaultValues: { email: 'john@example.com', phone: '+33123456789' }
* })
*
* return (
* <form.AppForm>
* <form.InlineFieldGroup>
* <form.InlineFieldGroupHeader title="Contact" />
* <form.InlineFieldGroupReadView>
* <DefinitionList>
* <DefinitionItem term="Email" description={form.state.values.email} />
* </DefinitionList>
* </form.InlineFieldGroupReadView>
* <form.InlineFieldGroupEditView legend="Edit contact information">
* <form.AppField name="email">
* {field => <field.TextField label="Email" isRequired />}
* </form.AppField>
* <form.AppField name="phone">
* {field => <field.PhoneNumberField label="Phone" />}
* </form.AppField>
* </form.InlineFieldGroupEditView>
* </form.InlineFieldGroup>
* </form.AppForm>
* )
* }
* ```
* @remarks
* - Must be used as a child of InlineFieldGroup
* - Set the `legend` prop to describe the group of fields for screen readers
* - The fieldset is disabled automatically when the parent's `isLoading` prop is true
* - Uses `aria-busy` to indicate loading state to assistive technologies
* - Content remains in the DOM but is hidden with `hidden` and `inert` attributes in read mode
* @see {@link InlineFieldGroupEditViewProps} for all available props
* @see {@link InlineFieldGroup} for the parent container component
* @see {@link InlineFieldGroupReadView} for the corresponding read mode component
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field-group GitHub}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefieldgroup--docs unity-components.payfit.io}
*/
export declare function InlineFieldGroupEditView({ children, className, legend, }: InlineFieldGroupEditViewProps): import("react/jsx-runtime").JSX.Element;
export declare namespace InlineFieldGroupEditView {
var displayName: string;
}