@payfit/unity-components/dist/esm/components/inline-field/InlineField.d.ts

import { ReactNode } from 'react';
import { InlineFieldMode } from './InlineField.context.js';
export interface InlineFieldProps {
    /**
     * The form field to display in edit mode.
     */
    children?: ReactNode;
    /**
     * Controlled mode value. When provided, the component operates in controlled mode.
     */
    mode?: InlineFieldMode;
    /**
     * Default mode value for uncontrolled mode.
     * `@default` 'read'
     */
    defaultMode?: InlineFieldMode;
    /**
     * Callback fired when mode changes.
     */
    onModeChange?: (mode: InlineFieldMode) => void;
    /**
     * Whether the field is currently loading (saving).
     */
    isLoading?: boolean;
    /**
     * Callback to determine if mode should change.
     * Return `false` to prevent the mode transition.
     * Return `true` or `undefined` to allow the transition.
     */
    shouldModeChange?: (fromMode: InlineFieldMode, toMode: InlineFieldMode) => boolean | undefined;
}
/**
 * InlineField enables individual field inline editing with read/edit mode switching.
 * It integrates with TanStack Form for validation and state management, providing
 * a pattern for displaying a value in read mode and editing it in edit mode.
 * The component handles the edit lifecycle: mode transitions, form submission,
 * validation error handling, and accessibility announcements.
 * @example
 * ```tsx
 * import { useTanstackUnityForm } from '@payfit/unity-components'
 *
 * function EmailField() {
 *   const form = useTanstackUnityForm({
 *     defaultValues: { email: 'user@example.com' },
 *     onSubmit: async ({ value }) => {
 *       await saveEmail(value)
 *     }
 *   })
 *
 *   return (
 *     <form.AppForm>
 *       <DefinitionList>
 *         <form.AppField name="email">
 *           {field => (
 *             <field.InlineField>
 *               <field.InlineFieldReadView>
 *                 <DefinitionItem
 *                   term="Email"
 *                   description={form.state.values.email}
 *                   action={<field.InlineFieldEditTrigger />}
 *                 />
 *               </field.InlineFieldReadView>
 *               <field.InlineFieldEditView successMessage="Email updated!">
 *                 <field.TextField label="Email" isRequired />
 *               </field.InlineFieldEditView>
 *             </field.InlineField>
 *           )}
 *         </form.AppField>
 *       </DefinitionList>
 *     </form.AppForm>
 *   )
 * }
 * ```
 * @remarks
 * - The component automatically exits edit mode on successful form submission.
 * - Press Escape to cancel editing and reset the field value.
 * - Focus moves to the field when entering edit mode.
 * - Focus returns to the edit button when exiting edit mode.
 * - Focus is retained under a scope when in edit mode.
 * - Use `shouldModeChange` to intercept and conditionally prevent mode transitions.
 * - Use `successMessage` and `errorMessage` for accessible announcements via live regions.
 * @see {@link InlineFieldProps} for all available props
 * @see {@link InlineFieldReadView} for read mode content
 * @see {@link InlineFieldEditView} for edit mode form fields
 * @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 const InlineField: {
    ({ children, mode: controlledMode, defaultMode, onModeChange, isLoading, shouldModeChange, }: InlineFieldProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};