npm - @evoke-platform/ui-components - Versions diffs - 1.10.0-testing.11 → 1.10.0-testing.12 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;