@evoke-platform/ui-components 1.10.1-dev.1 → 1.10.1-dev.3

package/dist/published/components/custom/FormField/Select/Select.js

@@ -2,12 +2,14 @@ import { createFilterOptions, List, ListSubheader } from '@mui/material';
 import { uniq } from 'lodash';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { Clear } from '../../../../icons';
+import { useFormContext } from '../../../../theme/hooks';
 import { Autocomplete, FormControl, FormControlLabel, IconButton, Radio, RadioGroup, TextField, Typography, } from '../../../core';
 import { Box } from '../../../layout';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const filter = createFilterOptions();
 const Select = (props) => {
     const { id, property, defaultValue, error, errorMessage, onBlur, onChange, readOnly, isCombobox, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, displayOption, sortBy, } = props;
+    const { onAutosave } = useFormContext();
     const otherInputRef = useRef(null);
     const [isOther, setIsOther] = useState(!!isCombobox &&
         !!defaultValue &&
@@ -32,7 +34,7 @@ const Select = (props) => {
         setValue(defaultValue);
     }, [defaultValue]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const handleChange = (event, selected) => {
+    const handleChange = async (event, selected) => {
         if (Array.isArray(selected)) {
             const newValues = selected.map((option) => option.value ?? option);
             setValue(uniq(newValues));
@@ -56,6 +58,12 @@ const Select = (props) => {
                 onChange && onChange(property.id, selected, property);
             }
         }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleInputValueChange = (event, selectValue) => {
@@ -121,22 +129,29 @@ const Select = (props) => {
                             }
                             setIsOtherFocused(false);
                         } })))))),
-        displayOption === 'radioButton' && onChange && !readOnly && value && (React.createElement(Box, { sx: {
+        onChange && !readOnly && value && (React.createElement(Box, { sx: {
                 ':hover': { cursor: 'pointer' },
                 marginTop: '4px',
                 display: 'flex',
                 alignItems: 'center',
             } },
-            React.createElement(IconButton, { "aria-label": `Clear`, onClick: () => {
+            React.createElement(IconButton, { "aria-label": `Clear`, onClick: async () => {
                     setValue('');
                     property && onChange(property.id, '');
                     setIsOther(false);
+                    // Trigger autosave immediately when clearing radio selection
+                    try {
+                        await onAutosave?.(id);
+                    }
+                    catch (error) {
+                        console.error('Autosave failed:', error);
+                    }
                 }, sx: { padding: '3px', marginRight: '6px' } },
                 React.createElement(Clear, { sx: {
                         color: '#637381',
                         fontSize: '1.2rem',
                     } })),
-            React.createElement(Typography, { variant: "caption" }, "Clear Selection"))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur, inputProps: {
+            React.createElement(Typography, { variant: "caption" }, "Clear Selection"))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array', id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur, inputProps: {
                 ...params.inputProps,
                 'aria-describedby': isCombobox ? `${id}-instructions` : undefined,
             } })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, filterOptions: (options, params) => {
@@ -169,6 +184,10 @@ const Select = (props) => {
             '& button.MuiButtonBase-root': {
                 visibility: 'visible',
             },
+        }, slotProps: {
+            clearIndicator: {
+                'data-testid': 'autocomplete-clear-button',
+            },
         }, forcePopupIcon: true, ...(isCombobox ? { selectOnFocus: true, handleHomeEndKeys: true, freeSolo: true } : {}), ...(additionalProps ?? {}) }));
 };
 export default Select;

package/dist/published/components/custom/FormV2/FormRenderer.d.ts

@@ -19,8 +19,8 @@ export type FormRendererProps = BaseProps & {
     onChange: (id: string, value: unknown) => void | Promise<void>;
     onAutosave?: (fieldId: string) => void | Promise<void>;
     associatedObject?: {
-        instanceId?: string;
-        propertyId?: string;
+        instanceId: string;
+        propertyId: string;
     };
     renderHeader?: (props: HeaderProps) => React.ReactNode;
     renderBody?: (props: BodyProps) => React.ReactNode;

package/dist/published/components/custom/FormV2/FormRenderer.js

@@ -171,7 +171,13 @@ const FormRendererInternal = (props) => {
     async function unregisterHiddenFieldsAndSubmit() {
         unregisterHiddenFields(entries ?? []);
         removeUneditedProtectedValues();
-        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError(errors))();
+        await handleSubmit((data) => {
+            if (onSubmit) {
+                onSubmit(action?.type === 'delete' ? {} : data);
+                // clear fetched options after successful submit to allow re-evaluation with the new instance data
+                setFetchedOptions({});
+            }
+        }, (errors) => onSubmitError(errors))();
     }
     const headerProps = {
         title,

package/dist/published/components/custom/FormV2/FormRendererContainer.d.ts

@@ -30,8 +30,8 @@ export type FormRendererContainerProps = BaseProps & {
     onDiscardChanges?: FormRendererProps['onDiscardChanges'];
     onSubmitError?: FormRendererProps['onSubmitError'];
     associatedObject?: {
-        instanceId?: string;
-        propertyId?: string;
+        instanceId: string;
+        propertyId: string;
     };
     renderContainer?: (state: FormRendererState) => React.ReactNode;
     renderHeader?: FormRendererProps['renderHeader'];

package/dist/published/components/custom/FormV2/components/FormContext.d.ts

@@ -21,8 +21,8 @@ type FormContextType = {
     triggerFieldReset?: boolean;
     showSubmitError?: boolean;
     associatedObject?: {
-        instanceId?: string;
-        propertyId?: string;
+        instanceId: string;
+        propertyId: string;
     };
     form?: EvokeForm;
     width: number;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.d.ts

@@ -11,8 +11,8 @@ export type ActionDialogProps = {
     relatedParameter: InputParameter;
     relatedFormId?: string;
     associatedObject?: {
-        instanceId?: string;
-        propertyId?: string;
+        instanceId: string;
+        propertyId: string;
     };
 };
 export declare const ActionDialog: (props: ActionDialogProps) => React.JSX.Element;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js

@@ -249,8 +249,10 @@ const RepeatableField = (props) => {
             };
         }
     };
-    const checkCreateAccess = (relatedObject) => {
-        if (fieldDefinition.objectId && canUpdateProperty && !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
+    const checkCreateAccess = useCallback((relatedObject) => {
+        if (fieldDefinition.objectId &&
+            canUpdateProperty &&
+            !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
             apiServices
                 .get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
                 params: { action: 'execute', field: entry.display?.createActionId, scope: 'data' },
@@ -272,7 +274,11 @@ const RepeatableField = (props) => {
                 }
             });
         }
-    };
+    }, [fieldDefinition, canUpdateProperty, fetchedOptions, entry.display?.createActionId, instance, apiServices]);
+    useEffect(() => {
+        // Re-check create access when instance changes to re-evaluate the criteria
+        relatedObject && checkCreateAccess(relatedObject);
+    }, [relatedObject, checkCreateAccess]);
     useEffect(() => {
         const updatedOptions = {};
         if ((relatedInstances && !fetchedOptions[`${fieldDefinition.id}Options`]) ||
@@ -336,7 +342,9 @@ const RepeatableField = (props) => {
                     ? entry.display?.updateActionId
                     : entry.display?.deleteActionId));
         // when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
-        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : undefined);
+        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : undefined, undefined, instance?.id && fieldDefinition.relatedPropertyId
+            ? { instanceId: instance.id, propertyId: fieldDefinition.relatedPropertyId }
+            : undefined);
         if (action?.type === 'create' && entry.display?.createActionId) {
             const updatedInput = {
                 ...input,

package/dist/published/components/custom/FormV2/components/utils.d.ts

@@ -86,7 +86,10 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
     showAlert: boolean;
     message?: string;
     isError: boolean;
-}>>): Promise<FieldValues>;
+}>>, associatedObject?: {
+    instanceId: string;
+    propertyId: string;
+}): Promise<FieldValues>;
 export declare function filterEmptySections(entry: Sections | Columns, instance?: FieldValues, formData?: FieldValues): Sections | Columns | null;
 export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], object: Obj, parameters?: InputParameter[]): FormEntry[];
 /**

package/dist/published/components/custom/FormV2/components/utils.js

@@ -621,7 +621,10 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
  *
  * Returns the cleaned submission ready for submitting.
  */
-export async function formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError) {
+export async function formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError, associatedObject) {
+    if (associatedObject) {
+        delete submission[associatedObject.propertyId];
+    }
     const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
     for (const [key, value] of Object.entries(submission)) {
         const entry = allEntries?.find((entry) => getEntryId(entry) === key);

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

@@ -326,12 +326,7 @@ describe('FormRendererContainer', () => {
             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({
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
                 input: expect.objectContaining({
                     address: expect.objectContaining({
                         city: 'Cambridge',
@@ -448,15 +443,7 @@ describe('FormRendererContainer', () => {
             // 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({
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
                 input: expect.objectContaining({
                     address: expect.objectContaining({
                         line1: '456 Oak Street',
@@ -531,6 +518,484 @@ describe('FormRendererContainer', () => {
             // Verify autosave was not triggered
             expect(autosaveActionSpy).not.toHaveBeenCalled();
         });
+        it('should trigger autosave immediately when a radio button is selected', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            // Create a form with a status field displayed as radio buttons
+            const licenseFormWithRadioButtons = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: {
+                            label: 'License Number',
+                        },
+                    },
+                    {
+                        parameterId: 'status',
+                        type: 'input',
+                        display: {
+                            label: 'Status',
+                            choicesDisplay: {
+                                type: 'radioButton',
+                            },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => {
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    status: 'Active',
+                });
+            }), http.get('/api/data/objects/license/instances/test-license/object', () => {
+                return HttpResponse.json(licenseObject);
+            }), http.get('/api/data/forms/licenseForm', () => {
+                return HttpResponse.json(licenseFormWithRadioButtons);
+            }), 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',
+                    status: body.input.status,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Wait for the form to load and the radio buttons to appear
+            const inactiveRadio = await screen.findByRole('radio', { name: 'Inactive' });
+            // Click the "Inactive" radio button
+            await user.click(inactiveRadio);
+            // Verify autosave was triggered immediately with the new status
+            await waitFor(() => {
+                expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
+                    actionId: '_autosave',
+                    input: expect.objectContaining({
+                        status: 'Inactive',
+                    }),
+                }));
+            });
+        });
+        it('should trigger autosave when the selection is cleared', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithRadioButtons = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: {
+                            label: 'License Number',
+                        },
+                    },
+                    {
+                        parameterId: 'status',
+                        type: 'input',
+                        display: {
+                            label: 'Status',
+                            choicesDisplay: {
+                                type: 'radioButton',
+                            },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => {
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    status: 'Active',
+                });
+            }), http.get('/api/data/objects/license/instances/test-license/object', () => {
+                return HttpResponse.json(licenseObject);
+            }), http.get('/api/data/forms/licenseForm', () => {
+                return HttpResponse.json(licenseFormWithRadioButtons);
+            }), 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',
+                    status: body.input.status,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            const clearButton = await screen.findByRole('button', { name: 'Clear' });
+            await user.click(clearButton);
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    status: null,
+                }),
+            }));
+        });
+        it('should trigger autosave immediately when a dropdown option is selected', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithDropdown = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        parameterId: 'status',
+                        type: 'input',
+                        display: {
+                            label: 'Status',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json({ id: 'test-license', name: 'RN-123456', status: 'Active' })), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithDropdown)), 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', status: body.input.status });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Open the dropdown/combobox and choose an option
+            const combobox = await screen.findByRole('combobox', { name: 'Status' });
+            await user.click(combobox);
+            const inactiveOption = await screen.findByRole('option', { name: 'Inactive' });
+            await user.click(inactiveOption);
+            expect(autosaveActionSpy).toHaveBeenCalledWith({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    status: 'Inactive',
+                }),
+            });
+        });
+        it('should trigger autosave when dropdown selection is cleared', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithDropdown = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        parameterId: 'status',
+                        type: 'input',
+                        display: {
+                            label: 'Status',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json({ id: 'test-license', name: 'RN-123456', status: 'Active' })), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithDropdown)), 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', status: body.input.status });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            const combobox = await screen.findByRole('combobox', { name: 'Status' });
+            await user.click(combobox);
+            // Clear button has tabindex="-1" so find it via testid
+            const clearButton = await screen.findByTestId('autocomplete-clear-button');
+            await user.click(clearButton);
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    status: null,
+                }),
+            }));
+        });
+        it('should trigger autosave for multi-select when selecting an option', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithMultiSelect = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'categories',
+                            type: 'array',
+                            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+                        },
+                        display: {
+                            label: 'Categories',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            const licenseInstanceInitial = { id: 'test-license', name: 'RN-123456' };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json(licenseInstanceInitial)), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithMultiSelect)), 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',
+                    categories: body.input.categories,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Open the multi-select combobox and choose an additional option
+            const combobox = await screen.findByRole('combobox', { name: 'Categories' });
+            await user.click(combobox);
+            const plumbingOption = await screen.findByRole('option', { name: 'Electrical' });
+            await user.click(plumbingOption);
+            expect(autosaveActionSpy).toHaveBeenCalledWith({
+                actionId: '_autosave',
+                input: expect.objectContaining({ categories: ['Electrical'] }),
+            });
+        });
+        it('should trigger autosave for multi-select when adding an option', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithMultiSelect = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'categories',
+                            type: 'array',
+                            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+                        },
+                        display: {
+                            label: 'Categories',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            const licenseInstanceInitial = { id: 'test-license', name: 'RN-123456', categories: ['Electrical'] };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json(licenseInstanceInitial)), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithMultiSelect)), 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',
+                    categories: body.input.categories,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Open the multi-select combobox and choose an additional option
+            const combobox = await screen.findByRole('combobox', { name: 'Categories' });
+            await user.click(combobox);
+            const plumbingOption = await screen.findByRole('option', { name: 'Plumbing' });
+            await user.click(plumbingOption);
+            expect(autosaveActionSpy).toHaveBeenCalledWith({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    categories: expect.arrayContaining(['Electrical', 'Plumbing']),
+                }),
+            });
+        });
+        it('should trigger autosave when a multi-select option is removed', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithMultiSelect = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'categories',
+                            type: 'array',
+                            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+                        },
+                        display: {
+                            label: 'Categories',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json({
+                id: 'test-license',
+                name: 'RN-123456',
+                categories: ['Electrical', 'Plumbing'],
+            })), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithMultiSelect)), 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',
+                    categories: body.input.categories,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            const electricalChipLabel = await screen.findByRole('button', { name: 'Electrical' });
+            // Mui autoamtically provides a test id.
+            const deleteIcon = await within(electricalChipLabel).findByTestId('CancelIcon');
+            await user.click(deleteIcon);
+            // Autosave should be called with only Plumbing remaining
+            await waitFor(() => {
+                expect(autosaveActionSpy).toHaveBeenCalledWith({
+                    actionId: '_autosave',
+                    input: expect.objectContaining({
+                        categories: ['Plumbing'],
+                    }),
+                });
+            });
+        });
+        it('should trigger autosave when a single multi-select option is removed via the dropdown', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithMultiSelect = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'categories',
+                            type: 'array',
+                            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+                        },
+                        display: {
+                            label: 'Categories',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json({
+                id: 'test-license',
+                name: 'RN-123456',
+                categories: ['Electrical', 'Plumbing'],
+            })), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithMultiSelect)), 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',
+                    categories: body.input.categories,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Open the multi-select combobox and unselect the 'Plumbing' option
+            const combobox = await screen.findByRole('combobox', { name: 'Categories' });
+            await user.click(combobox);
+            // Click the option to toggle/unselect it (initially selected)
+            const plumbingOption = await screen.findByRole('option', { name: 'Plumbing' });
+            await user.click(plumbingOption);
+            // Expect autosave called with categories array no longer containing 'Plumbing'
+            expect(autosaveActionSpy).toHaveBeenCalledWith({
+                actionId: '_autosave',
+                input: expect.objectContaining({ categories: ['Electrical'] }),
+            });
+        });
+        it('should trigger autosave when multi-select is cleared', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithMultiSelect = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'categories',
+                            type: 'array',
+                            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+                        },
+                        display: {
+                            label: 'Categories',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json({
+                id: 'test-license',
+                name: 'RN-123456',
+                categories: ['Electrical', 'Plumbing'],
+            })), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithMultiSelect)), 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',
+                    categories: body.input.categories,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Open the multi-select combobox and click the clear button
+            const combobox = await screen.findByRole('combobox', { name: 'Categories' });
+            await user.click(combobox);
+            // Clear button has tabindex="-1" so find via testid
+            const clearButton = await screen.findByTestId('autocomplete-clear-button');
+            await user.click(clearButton);
+            expect(autosaveActionSpy).toHaveBeenCalledWith({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    categories: expect.arrayContaining([]),
+                }),
+            });
+        });
     });
     it('should display a submit button', async () => {
         const form = {

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

@@ -160,6 +160,12 @@ export const licenseObject = {
             type: 'string',
             enum: ['Active', 'Inactive'],
         },
+        {
+            id: 'categories',
+            name: 'Categories',
+            type: 'array',
+            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+        },
         {
             id: 'licenseType',
             name: 'License Type',
@@ -188,6 +194,13 @@ export const licenseObject = {
                     id: 'status',
                     name: 'Status',
                     type: 'string',
+                    enum: ['Active', 'Inactive'],
+                },
+                {
+                    id: 'categories',
+                    name: 'Categories',
+                    type: 'array',
+                    enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
                 },
                 {
                     id: 'address.line1',
@@ -236,6 +249,13 @@ export const licenseObject = {
                     id: 'status',
                     name: 'Status',
                     type: 'string',
+                    enum: ['Active', 'Inactive'],
+                },
+                {
+                    id: 'categories',
+                    name: 'Categories',
+                    type: 'array',
+                    enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
                 },
                 {
                     id: 'address.line1',

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

@@ -12,8 +12,8 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     onChange: (id: string, value: unknown) => void | Promise<void>;
     onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        instanceId: string;
+        propertyId: string;
     } | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
     renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
@@ -33,8 +33,8 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
     onChange: (id: string, value: unknown) => void | Promise<void>;
     onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        instanceId: string;
+        propertyId: string;
     } | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
     renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
@@ -53,8 +53,8 @@ export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<impo
     onChange: (id: string, value: unknown) => void | Promise<void>;
     onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        instanceId: string;
+        propertyId: string;
     } | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
     renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
@@ -73,8 +73,8 @@ export declare const DocumentForm: import("@storybook/types").AnnotatedStoryFn<i
     onChange: (id: string, value: unknown) => void | Promise<void>;
     onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        instanceId: string;
+        propertyId: string;
     } | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
     renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;

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

@@ -16,8 +16,8 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     onDiscardChanges?: (() => void) | undefined;
     onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        instanceId: string;
+        propertyId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
@@ -43,8 +43,8 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
     onDiscardChanges?: (() => void) | undefined;
     onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        instanceId: string;
+        propertyId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
@@ -69,8 +69,8 @@ export declare const DefaultForm: import("@storybook/types").AnnotatedStoryFn<im
     onDiscardChanges?: (() => void) | undefined;
     onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        instanceId: string;
+        propertyId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
@@ -95,8 +95,8 @@ export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<impo
     onDiscardChanges?: (() => void) | undefined;
     onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        instanceId: string;
+        propertyId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
@@ -121,8 +121,8 @@ export declare const DocumentForm: import("@storybook/types").AnnotatedStoryFn<i
     onDiscardChanges?: (() => void) | undefined;
     onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        instanceId: string;
+        propertyId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
@@ -147,8 +147,8 @@ export declare const FormWithSections: import("@storybook/types").AnnotatedStory
     onDiscardChanges?: (() => void) | undefined;
     onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined;
+        instanceId: string;
+        propertyId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;

package/dist/published/theme/hooks.d.ts

@@ -153,9 +153,9 @@ export declare function useFormContext(): {
     triggerFieldReset?: boolean | undefined;
     showSubmitError?: boolean | undefined;
     associatedObject?: {
-        instanceId?: string | undefined;
-        propertyId?: string | undefined; /** Extra large screens (1536px and up) */
-    } | undefined;
+        instanceId: string;
+        propertyId: string; /** Extra large screens (1536px and up) */
+    } | undefined; /** Extra large screens (1536px and up) */
     form?: import("@evoke-platform/context").EvokeForm | undefined;
     width: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.1-dev.1",
+    "version": "1.10.1-dev.3",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",