@payfit/unity-components
Version:
107 lines (106 loc) • 4.39 kB
TypeScript
import { ReactNode } from 'react';
export interface InlineFieldEditViewProps {
/**
* The form field to display in edit mode.
*/
children?: ReactNode;
/**
* Optional callback fired when the cancel button is clicked.
* This is called before canceling and is useful for analytics or side effects.
* The form will be reset and edit mode exited automatically.
*/
onCancel?: () => void;
/**
* Optional callback fired when the save button is clicked.
* This is called before form submission and is useful for analytics or side effects.
* Note: Form submission is handled via the form's onSubmit configuration.
*/
onSave?: () => void;
/**
* Custom label for the save button.
* @default "Save" (translated)
*/
saveLabel?: string;
/**
* Custom label for the cancel button.
* @default "Cancel" (translated)
*/
cancelLabel?: string;
/**
* Helper text to display below the field.
* Useful for providing additional context or instructions.
*/
helperText?: ReactNode;
/**
* Error message to announce when save or validation fails.
* If not provided, generic validation errors are announced.
*/
errorMessage?: string;
}
/**
* InlineFieldEditView displays form fields only when the parent InlineField is in edit mode.
* Wrap form field components in this component to show them when editing.
* The component integrates with TanStack Form for validation and state management,
* automatically handling form submission, cancellation, and validation errors.
* It includes save and cancel icon buttons, keyboard navigation (Escape to cancel),
* and accessibility announcements via live regions.
* @example Basic usage with a text field
* ```tsx
* import { useTanstackUnityForm } from '@payfit/unity-components'
*
* function Example() {
* const form = useTanstackUnityForm({
* defaultValues: { email: 'john@example.com' }
* })
*
* return (
* <form.AppForm>
* <form.AppField name="email">
* {field => (
* <field.InlineField>
* <field.InlineFieldReadView>
* <div className="flex items-center gap-2">
* <Text>{form.state.values.email}</Text>
* <field.InlineFieldEditTrigger />
* </div>
* </field.InlineFieldReadView>
* <field.InlineFieldEditView>
* <field.TextField label="Email" isRequired />
* </field.InlineFieldEditView>
* </field.InlineField>
* )}
* </form.AppField>
* </form.AppForm>
* )
* }
* ```
* @example With custom messages and callbacks
* ```tsx
* <field.InlineFieldEditView
* successMessage="Email updated successfully!"
* errorMessage="Failed to update email. Please try again."
* helperText="Enter a valid email address"
* onSave={() => trackAnalytics('email_save_clicked')}
* onCancel={() => trackAnalytics('email_edit_cancelled')}
* >
* <field.TextField label="Email" isRequired />
* </field.InlineFieldEditView>
* ```
* @remarks
* - Must be used as a child of InlineField
* - Automatically exits edit mode on successful form submission
* - Press Escape to cancel editing and reset form values
* - Focus is retained within the edit view (FocusScope) while editing
* - The save button is disabled until the form has changes (isDirty)
* - Validation errors are announced via screen reader live regions
* - Content remains in the DOM but is hidden with `hidden`, `aria-hidden`, and `inert` attributes in read mode
* @see {@link InlineFieldEditViewProps} for all available props
* @see {@link InlineField} for the parent container component
* @see {@link InlineFieldReadView} 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 GitHub}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefield--docs unity-components.payfit.io}
*/
export declare function InlineFieldEditView({ children, onCancel, onSave, saveLabel, cancelLabel, helperText, errorMessage, }: InlineFieldEditViewProps): import("react/jsx-runtime").JSX.Element;
export declare namespace InlineFieldEditView {
var displayName: string;
}