@evoke-platform/ui-components 1.10.0-testing.10 → 1.10.0-testing.12

package/dist/published/components/custom/FormV2/tests/FormRendererContainer.test.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { expect, it } from 'vitest';
 import FormRendererContainer from '../FormRendererContainer';
-import { createSpecialtyForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
+import { createSpecialtyForm, licenseForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
 expect.extend(matchers);
 // Mock ResizeObserver
 global.ResizeObserver = class ResizeObserver {
@@ -94,6 +94,454 @@ describe('FormRendererContainer', () => {
             });
         });
     });
+    describe('autosave functionality', () => {
+        it('should trigger autosave when field loses focus', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: 'Original Name',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                    autosaveActionId: '_autosave',
+                });
+            }), http.post('/api/data/objects/specialty/instances/test-instance/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: body.input.name,
+                    specialtyType: null,
+                    license: null,
+                });
+            }));
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            const nameField = await screen.findByRole('textbox', { name: 'Name' });
+            // Clear the existing value and type new value
+            await user.clear(nameField);
+            await user.type(nameField, 'Test Specialty');
+            await user.tab(); // Blur the field
+            // Verify the data being saved
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    name: 'Test Specialty',
+                }),
+            }));
+        });
+        it('should show saving indicator during autosave', async () => {
+            const user = userEvent.setup();
+            let resolveSave;
+            const savePromise = new Promise((resolve) => {
+                resolveSave = resolve;
+            });
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: '',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                    autosaveActionId: '_autosave',
+                });
+            }), http.post('/api/data/objects/specialty/instances/test-instance/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                await savePromise; // Wait for manual resolution
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: body.input.name,
+                    specialtyType: null,
+                    license: null,
+                });
+            }));
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            const nameField = await screen.findByRole('textbox', { name: 'Name' });
+            await user.type(nameField, 'Test Specialty');
+            await user.tab();
+            // Should show saving indicator
+            await waitFor(() => {
+                expect(screen.getByText('Saving')).toBeInTheDocument();
+            });
+            // Verify the API was called
+            expect(autosaveActionSpy).toHaveBeenCalled();
+            // Complete the save
+            resolveSave({
+                id: 'test-instance',
+                name: 'Test Specialty',
+                specialtyType: null,
+                license: null,
+            });
+            // Saving indicator should disappear
+            await waitFor(() => {
+                expect(screen.queryByText('Saving')).not.toBeInTheDocument();
+            });
+        });
+        it('should hide saving indicator after autosave fails', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: '',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                    autosaveActionId: '_autosave',
+                });
+            }), http.post('/api/data/objects/specialty/instances/test-instance/actions', () => {
+                autosaveActionSpy();
+                return HttpResponse.json({ error: 'Save failed' }, { status: 500 });
+            }));
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            const nameField = await screen.findByRole('textbox', { name: 'Name' });
+            await user.type(nameField, 'Test Specialty');
+            await user.tab();
+            // Wait for autosave to complete
+            await waitFor(() => {
+                expect(autosaveActionSpy).toHaveBeenCalled();
+            });
+            // Saving indicator should be hidden after error
+            await waitFor(() => {
+                expect(screen.queryByText('Saving')).not.toBeInTheDocument();
+            });
+        });
+        it('should not trigger autosave when field value has not changed', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: 'Original Name',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                    autosaveActionId: '_autosave',
+                });
+            }), http.post('/api/data/objects/specialty/instances/test-instance/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: body.input.name,
+                    specialtyType: null,
+                    license: null,
+                });
+            }));
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            const nameField = await screen.findByRole('textbox', { name: 'Name' });
+            // Click into the field and blur it without changing value
+            await user.click(nameField);
+            await user.tab(); // Blur the field
+            await waitFor(() => {
+                expect(nameField).not.toHaveFocus();
+            });
+            // Wait a bit to ensure no autosave is triggered
+            await new Promise((r) => setTimeout(r, 500));
+            // Verify autosave was NOT called since value didn't change
+            expect(autosaveActionSpy).not.toHaveBeenCalled();
+        });
+        it('should trigger autosave when address field loses focus after change', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => {
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    address: {
+                        line1: '123 Main St',
+                        city: 'Boston',
+                        state: 'MA',
+                        zipCode: '02101',
+                    },
+                });
+            }), http.get('/api/data/objects/license/instances/test-license/object', () => {
+                return HttpResponse.json(licenseObject);
+            }), http.get('/api/data/forms/licenseForm', () => {
+                return HttpResponse.json({
+                    ...licenseForm,
+                    autosaveActionId: '_autosave',
+                });
+            }), http.get('/api/data/locations/search', () => {
+                return HttpResponse.json([]);
+            }), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: body.input.name || 'RN-123456',
+                    address: body.input.address || {
+                        line1: '123 Main St',
+                        city: 'Boston',
+                        state: 'MA',
+                        zipCode: '02101',
+                    },
+                });
+            }));
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' })));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            // Find the city field
+            const cityField = await screen.findByRole('textbox', { name: 'City' });
+            // Clear and type new value
+            await user.clear(cityField);
+            await user.type(cityField, 'Cambridge');
+            await user.tab(); // Blur the field
+            // Verify autosave was eventually called and the final call contains the updated city
+            await waitFor(() => {
+                expect(autosaveActionSpy).toHaveBeenCalled();
+            });
+            const lastCall = autosaveActionSpy.mock.lastCall[0];
+            expect(lastCall).toEqual(expect.objectContaining({
+                input: expect.objectContaining({
+                    address: expect.objectContaining({
+                        city: 'Cambridge',
+                    }),
+                }),
+            }));
+        });
+        it('should not trigger autosave when address field loses focus without changes', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => {
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    address: {
+                        line1: '123 Main St',
+                        city: 'Boston',
+                        state: 'MA',
+                        zipCode: '02101',
+                    },
+                });
+            }), http.get('/api/data/objects/license/instances/test-license/object', () => {
+                return HttpResponse.json(licenseObject);
+            }), http.get('/api/data/objects/license/effective', (req) => {
+                const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
+                if (sanitizedVersion === 'true') {
+                    return HttpResponse.json(licenseObject);
+                }
+            }), http.get('/api/data/forms/licenseForm', () => {
+                return HttpResponse.json({
+                    ...licenseForm,
+                    autosaveActionId: '_autosave',
+                });
+            }), http.get('/api/data/locations/search', () => {
+                return HttpResponse.json([]);
+            }), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    address: body.input.address,
+                });
+            }));
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' })));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            // Find the city field
+            const cityField = await screen.findByRole('textbox', { name: 'City' });
+            // Click into field and blur without changing
+            await user.click(cityField);
+            await user.tab();
+            // Wait to ensure no autosave is triggered
+            await new Promise((r) => setTimeout(r, 500));
+            // Verify autosave was NOT called since value didn't change
+            expect(autosaveActionSpy).not.toHaveBeenCalled();
+        });
+        it('should trigger autosave for multiple address fields when line1 autocompletes', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => {
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    address: {
+                        line1: '',
+                        city: '',
+                        state: '',
+                        zipCode: '',
+                    },
+                });
+            }), http.get('/api/data/objects/license/instances/test-license/object', () => {
+                return HttpResponse.json(licenseObject);
+            }), http.get('/api/data/objects/license/effective', (req) => {
+                const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
+                if (sanitizedVersion === 'true') {
+                    return HttpResponse.json(licenseObject);
+                }
+            }), http.get('/api/data/forms/licenseForm', () => {
+                return HttpResponse.json({
+                    ...licenseForm,
+                    autosaveActionId: '_autosave',
+                });
+            }), http.get('/api/data/locations/search', () => {
+                return HttpResponse.json([
+                    {
+                        address: {
+                            line1: '456 Oak Street',
+                            city: 'Springfield',
+                            state: 'MA',
+                            zipCode: '01101',
+                            county: 'Hampden',
+                        },
+                    },
+                ]);
+            }), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    address: body.input.address,
+                });
+            }));
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' })));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            // Find the line1 field (it's a searchbox because of address autocomplete)
+            const line1Field = await screen.findByRole('searchbox', { name: 'Address Line 1' });
+            // Type to trigger autocomplete
+            await user.type(line1Field, '456');
+            // Wait for and select the autocomplete option
+            const autocompleteOption = await screen.findByText('456 Oak Street');
+            await user.click(autocompleteOption);
+            // Verify autosave was eventually called and the final call contains the expected address values
+            await waitFor(() => {
+                expect(autosaveActionSpy).toHaveBeenCalled();
+            });
+            // The autosave is triggered twice when selecting the autocomplete option,
+            // once by the selection and once by the onBlur event. We want to verify the last call
+            // has the correct data.
+            const lastCall = autosaveActionSpy.mock.lastCall[0];
+            expect(lastCall).toEqual(expect.objectContaining({
+                input: expect.objectContaining({
+                    address: expect.objectContaining({
+                        line1: '456 Oak Street',
+                        city: 'Springfield',
+                        state: 'MA',
+                        zipCode: '01101',
+                    }),
+                }),
+            }));
+        });
+        it('should hide discard changes button when autosave is configured', async () => {
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: '',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                    autosaveActionId: '_autosave',
+                });
+            }));
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            // When autosaveActionId is present the discard button should be hidden
+            expect(screen.queryByRole('button', { name: /discard/i })).not.toBeInTheDocument();
+        });
+        it('should not trigger autosave when field changes but auto save is not configured', async () => {
+            server.use(http.get('/api/data/objects/specialty/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: '',
+                    specialtyType: null,
+                    license: null,
+                });
+            }), http.get('/api/data/objects/specialty/instances/test-instance/object', () => {
+                return HttpResponse.json(specialtyObject);
+            }), http.get('/api/data/forms/specialtyForm', () => {
+                return HttpResponse.json({
+                    ...createSpecialtyForm,
+                    actionId: '_update',
+                });
+            }));
+            const autosaveActionSpy = vi.fn();
+            server.use(http.post('/api/data/objects/specialty/instances/test-instance/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    ...body.input,
+                });
+            }));
+            const user = userEvent.setup();
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            });
+            // Change a field value
+            const nameInput = screen.getByRole('textbox', { name: /name/i });
+            await user.clear(nameInput);
+            await user.type(nameInput, 'Test Specialty');
+            await user.tab();
+            // Wait a bit to ensure no autosave happens
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            // Verify autosave was not triggered
+            expect(autosaveActionSpy).not.toHaveBeenCalled();
+        });
+    });
     it('should display a submit button', async () => {
         const form = {
             id: 'simpleForm',

package/dist/published/components/custom/FormV2/tests/test-data.d.ts

@@ -23,3 +23,4 @@ export declare const users: {
     email: string;
     name: string;
 }[];
+export declare const licenseForm: EvokeForm;

package/dist/published/components/custom/FormV2/tests/test-data.js

@@ -166,6 +166,11 @@ export const licenseObject = {
             type: 'object',
             objectId: 'licenseType',
         },
+        {
+            id: 'address',
+            name: 'Licensee Address',
+            type: 'address',
+        },
     ],
     actions: [
         {
@@ -173,6 +178,96 @@ export const licenseObject = {
             name: 'Update',
             type: 'update',
             outputEvent: 'License Updated',
+            parameters: [
+                {
+                    id: 'name',
+                    name: 'License Number',
+                    type: 'string',
+                },
+                {
+                    id: 'status',
+                    name: 'Status',
+                    type: 'string',
+                },
+                {
+                    id: 'address.line1',
+                    name: 'Address Line 1',
+                    type: 'string',
+                },
+                {
+                    id: 'address.line2',
+                    name: 'Address Line 2',
+                    type: 'string',
+                },
+                {
+                    id: 'address.city',
+                    name: 'City',
+                    type: 'string',
+                },
+                {
+                    id: 'address.county',
+                    name: 'County',
+                    type: 'string',
+                },
+                {
+                    id: 'address.state',
+                    name: 'State',
+                    type: 'string',
+                },
+                {
+                    id: 'address.zipCode',
+                    name: 'Zip Code',
+                    type: 'string',
+                },
+            ],
+        },
+        {
+            id: '_autosave',
+            name: 'Autosave',
+            type: 'update',
+            outputEvent: 'License Autosaved',
+            parameters: [
+                {
+                    id: 'name',
+                    name: 'License Number',
+                    type: 'string',
+                },
+                {
+                    id: 'status',
+                    name: 'Status',
+                    type: 'string',
+                },
+                {
+                    id: 'address.line1',
+                    name: 'Address Line 1',
+                    type: 'string',
+                },
+                {
+                    id: 'address.line2',
+                    name: 'Address Line 2',
+                    type: 'string',
+                },
+                {
+                    id: 'address.city',
+                    name: 'City',
+                    type: 'string',
+                },
+                {
+                    id: 'address.county',
+                    name: 'County',
+                    type: 'string',
+                },
+                {
+                    id: 'address.state',
+                    name: 'State',
+                    type: 'string',
+                },
+                {
+                    id: 'address.zipCode',
+                    name: 'Zip Code',
+                    type: 'string',
+                },
+            ],
         },
         {
             id: '_delete',
@@ -528,3 +623,46 @@ export const users = [
         name: 'User 2',
     },
 ];
+export const licenseForm = {
+    id: 'licenseForm',
+    name: 'License Form',
+    objectId: 'license',
+    actionId: '_update',
+    entries: [
+        {
+            parameterId: 'name',
+            type: 'input',
+            display: {
+                label: 'License Number',
+            },
+        },
+        {
+            parameterId: 'address.line1',
+            type: 'input',
+            display: {
+                label: 'Address Line 1',
+            },
+        },
+        {
+            parameterId: 'address.city',
+            type: 'input',
+            display: {
+                label: 'City',
+            },
+        },
+        {
+            parameterId: 'address.state',
+            type: 'input',
+            display: {
+                label: 'State',
+            },
+        },
+        {
+            parameterId: 'address.zipCode',
+            type: 'input',
+            display: {
+                label: 'Zip Code',
+            },
+        },
+    ],
+};

package/dist/published/stories/FormRenderer.stories.d.ts

@@ -9,7 +9,8 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     form: import("@evoke-platform/context").EvokeForm;
     title?: React.ReactNode;
     instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
         instanceId?: string | undefined;
         propertyId?: string | undefined;
@@ -29,7 +30,8 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
     form: import("@evoke-platform/context").EvokeForm;
     title?: React.ReactNode;
     instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
         instanceId?: string | undefined;
         propertyId?: string | undefined;
@@ -48,7 +50,8 @@ export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<impo
     form: import("@evoke-platform/context").EvokeForm;
     title?: React.ReactNode;
     instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
         instanceId?: string | undefined;
         propertyId?: string | undefined;
@@ -67,7 +70,8 @@ export declare const DocumentForm: import("@storybook/types").AnnotatedStoryFn<i
     form: import("@evoke-platform/context").EvokeForm;
     title?: React.ReactNode;
     instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
         instanceId?: string | undefined;
         propertyId?: string | undefined;