@payfit/unity-components
Version:
57 lines (56 loc) • 2.7 kB
TypeScript
import { PropsWithChildren } from 'react';
export interface InlineFieldGroupReadViewProps extends PropsWithChildren {
/**
* Optional className for custom styling
*/
className?: string;
}
/**
* InlineFieldGroupReadView displays content only when the parent InlineFieldGroup is in read mode.
* Wrap read-only data displays (like DefinitionList) in this component to show them when not editing.
* The component automatically hides its content when entering edit mode using the `hidden` attribute
* and `inert` for proper accessibility, ensuring screen readers and keyboard navigation skip it.
* @example Basic usage with DefinitionList
* ```tsx
* import { useTanstackUnityForm, DefinitionList, DefinitionItem } from '@payfit/unity-components'
*
* function Example() {
* const form = useTanstackUnityForm({ defaultValues: { email: 'john@example.com' } })
*
* return (
* <form.AppForm>
* <form.InlineFieldGroup>
* <form.InlineFieldGroupHeader title="Contact" />
* <form.InlineFieldGroupReadView>
* <form.Subscribe selector={state => state.values}>
* {values => (
* <DefinitionList>
* <DefinitionItem term="Email" description={values.email} />
* </DefinitionList>
* )}
* </form.Subscribe>
* </form.InlineFieldGroupReadView>
* <form.InlineFieldGroupEditView legend="Edit contact">
* <form.AppField name="email">
* {field => <field.TextField label="Email" />}
* </form.AppField>
* </form.InlineFieldGroupEditView>
* </form.InlineFieldGroup>
* </form.AppForm>
* )
* }
* ```
* @remarks
* - Must be used as a child of InlineFieldGroup
* - Use `form.Subscribe` to display current form values that update after saving
* - The content remains in the DOM but is hidden with `hidden` and `inert` attributes in edit mode
* @see {@link InlineFieldGroupReadViewProps} for all available props
* @see {@link InlineFieldGroup} for the parent container component
* @see {@link InlineFieldGroupEditView} for the corresponding edit 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 InlineFieldGroupReadView({ children, className, }: InlineFieldGroupReadViewProps): import("react/jsx-runtime").JSX.Element;
export declare namespace InlineFieldGroupReadView {
var displayName: string;
}