@payfit/unity-components
Version:
72 lines (71 loc) • 3 kB
TypeScript
import { ReactNode } from 'react';
export interface InlineFieldGroupHeaderProps {
/**
* The title to display in the header.
* This will be used for aria-labelledby on the form element.
*/
title: ReactNode;
/**
* Optional subtitle to display below the title.
*/
subtitle?: ReactNode;
/**
* Additional custom actions to render alongside the default buttons.
* These will be displayed between the title and the edit/save/cancel buttons.
*/
customActions?: ReactNode;
}
/**
* InlineFieldGroupHeader renders the title and contextual action buttons for an InlineFieldGroup.
* It automatically switches between Edit button (read mode) and Save/Cancel buttons (edit mode)
* based on the parent InlineFieldGroup's current mode.
* The Save button integrates with TanStack Form and remains disabled until the form has changes.
* Cancel resets the form and returns to read mode.
* @example Basic usage
* ```tsx
* import { useTanstackUnityForm } from '@payfit/unity-components'
*
* function Example() {
* const form = useTanstackUnityForm({ defaultValues: { name: 'John' } })
*
* return (
* <form.AppForm>
* <form.InlineFieldGroup>
* <form.InlineFieldGroupHeader title="Contact Information" />
* <form.InlineFieldGroupReadView>...</form.InlineFieldGroupReadView>
* <form.InlineFieldGroupEditView legend="Edit">...</form.InlineFieldGroupEditView>
* </form.InlineFieldGroup>
* </form.AppForm>
* )
* }
* ```
* @example Custom button labels and actions
* ```tsx
* <form.InlineFieldGroup
* editLabel="Modify"
* saveLabel="Confirm"
* cancelLabel="Discard"
* onSavePress={() => trackAnalytics('save_clicked')}
* >
* <form.InlineFieldGroupHeader
* title="Contact Information"
* customActions={<Button onPress={handleDelete}>Delete</Button>}
* />
* ...
* </form.InlineFieldGroup>
* ```
* @remarks
* - Must be used as a child of InlineFieldGroup
* - The title serves as the accessible label for the form via `aria-labelledby`
* - The Edit button uses `aria-expanded` and `aria-controls` for accessibility
* - Use `customActions` to add buttons that appear in both read and edit modes
* - Use `onEditPress`, `onSavePress`, `onCancelPress` for analytics or side effects
* @see {@link InlineFieldGroupHeaderProps} for all available props
* @see {@link InlineFieldGroup} for the parent container 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 InlineFieldGroupHeader({ title, subtitle, customActions, }: InlineFieldGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
export declare namespace InlineFieldGroupHeader {
var displayName: string;
}