@evoke-platform/ui-components 1.17.0 → 1.18.0

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

@@ -8,6 +8,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { expect, it } from 'vitest';
 import FormRenderer from '../FormRenderer';
+import { convertToReadOnly } from '../components/utils';
 import { accessibility508Object, createSpecialtyForm, jsonLogicDisplayTestSpecialtyForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, simpleConditionDisplayTestSpecialtyForm, specialtyObject, specialtyTypeObject, UpdateAccessibilityFormOne, UpdateAccessibilityFormTwo, users, } from './test-data';
 // Mock ResizeObserver
 global.ResizeObserver = class ResizeObserver {
@@ -1330,12 +1331,16 @@ describe('FormRenderer', () => {
                     display: {
                         label: 'Collection',
                         createActionId: '_create',
+                        updateActionId: '_update',
                     },
                 },
             ],
             actionId: '_update',
             objectId: 'testObjectForCollections',
         };
+        let collectionObject;
+        let collectionObjectForm;
+        let collectionObjectUpdateForm;
         let scrollIntoViewMock;
         let originalScrollIntoView;
         beforeEach(() => {
@@ -1364,7 +1369,7 @@ describe('FormRenderer', () => {
                 ],
             };
             setupTestMocks(collectionFormObject, form);
-            const collectionObject = {
+            collectionObject = {
                 id: 'collectionObject',
                 name: 'Collection Object',
                 properties: [
@@ -1401,9 +1406,23 @@ describe('FormRenderer', () => {
                         ],
                         defaultFormId: 'collectionObjectForm',
                     },
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        outputEvent: 'updated',
+                        parameters: [
+                            {
+                                id: 'name',
+                                name: 'Name',
+                                type: 'string',
+                            },
+                        ],
+                        defaultFormId: 'collectionObjectUpdateForm',
+                    },
                 ],
             };
-            const collectionObjectForm = {
+            collectionObjectForm = {
                 id: 'collectionObjectForm',
                 name: 'Collection Object Form',
                 entries: [
@@ -1431,6 +1450,26 @@ describe('FormRenderer', () => {
                 },
             };
             setupTestMocks(collectionObject, collectionObjectForm);
+            collectionObjectUpdateForm = {
+                id: 'collectionObjectUpdateForm',
+                name: 'Collection Object Update Form',
+                entries: [
+                    {
+                        type: 'input',
+                        parameterId: 'name',
+                        display: {
+                            label: 'Name',
+                            required: true,
+                        },
+                    },
+                ],
+                actionId: '_update',
+                objectId: 'collectionObject',
+                display: {
+                    submitLabel: 'Update Collection Item',
+                },
+            };
+            setupTestMocks(collectionObject, collectionObjectUpdateForm);
         });
         afterEach(() => {
             Element.prototype.scrollIntoView = originalScrollIntoView;
@@ -1528,6 +1567,48 @@ describe('FormRenderer', () => {
             await screen.findByRole('columnheader', { name: 'Name' });
             screen.getByRole('cell', { name: 'New Collection Item' });
         });
+        it('should not send instance metadata fields when updating a collection item', async () => {
+            const user = userEvent.setup();
+            const updateRequestSpy = vitest.fn();
+            const parentInstance = {
+                id: 'testInstanceId',
+                name: 'Test Instance',
+                objectId: 'testObjectForCollections',
+            };
+            const existingCollectionItem = {
+                id: 'existingCollectionItemId',
+                version: 1,
+                objectId: 'collectionObject',
+                name: 'Existing Collection Item',
+                relatedObject: {
+                    id: parentInstance.id,
+                    name: parentInstance.name,
+                },
+            };
+            server.use(http.get('/api/data/objects/collectionObject/instances', () => HttpResponse.json([existingCollectionItem])), http.get('/api/data/objects/collectionObject/instances/existingCollectionItemId', () => HttpResponse.json(existingCollectionItem)), http.get('/api/data/objects/collectionObject/instances/existingCollectionItemId/object', () => HttpResponse.json(collectionObject)), http.get('/api/data/objects/collectionObject/instances/existingCollectionItemId/checkAccess', () => HttpResponse.json({ result: true })), http.post('/api/data/objects/collectionObject/instances/existingCollectionItemId/actions', async ({ request }) => {
+                const body = (await request.json());
+                updateRequestSpy(body);
+                return HttpResponse.json({
+                    ...existingCollectionItem,
+                    name: body.input.name ?? existingCollectionItem.name,
+                });
+            }));
+            render(React.createElement(FormRenderer, { form: form, instance: parentInstance, onChange: () => { } }));
+            await screen.findByRole('cell', { name: 'Existing Collection Item' });
+            await user.click(await screen.findByLabelText('edit-collection-instance-0'));
+            await screen.findByRole('dialog');
+            const nameField = await screen.findByRole('textbox', { name: /Name */i });
+            await user.clear(nameField);
+            await user.type(nameField, 'Updated Collection Item');
+            await user.click(screen.getByRole('button', { name: 'Update Collection Item' }));
+            await waitFor(() => expect(updateRequestSpy).toHaveBeenCalled());
+            const body = updateRequestSpy.mock.calls[0][0];
+            expect(body.actionId).toBe('_update');
+            expect(body.input).toMatchObject({ name: 'Updated Collection Item' });
+            expect(body.input).not.toHaveProperty('id');
+            expect(body.input).not.toHaveProperty('objectId');
+            expect(body.input).not.toHaveProperty('version');
+        });
         it('should show validation errors', async () => {
             const user = userEvent.setup();
             render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
@@ -1691,4 +1772,101 @@ describe('FormRenderer', () => {
             await screen.findByLabelText('Date 2');
         });
     });
+    describe('convertToReadOnly', () => {
+        it('converts input entries to readonlyField entries', () => {
+            const inputEntry = {
+                type: 'input',
+                parameterId: 'name',
+                display: {
+                    label: 'Name',
+                    required: true,
+                },
+            };
+            const result = convertToReadOnly(inputEntry);
+            const display = inputEntry.display;
+            expect(result).toEqual({
+                type: 'readonlyField',
+                propertyId: 'name',
+                display,
+            });
+        });
+        it('converts inputField entries to readonlyField entries', () => {
+            const inputFieldEntry = {
+                type: 'inputField',
+                input: {
+                    id: 'description',
+                    type: 'string',
+                },
+                display: {
+                    label: 'Description',
+                },
+            };
+            const result = convertToReadOnly(inputFieldEntry);
+            const display = inputFieldEntry.display;
+            expect(result).toEqual({
+                type: 'readonlyField',
+                propertyId: 'description',
+                display,
+            });
+        });
+        it('recursively converts nested section and column entries', () => {
+            const nestedEntry = {
+                type: 'sections',
+                sections: [
+                    {
+                        entries: [
+                            {
+                                type: 'input',
+                                parameterId: 'firstName',
+                                display: {
+                                    label: 'First Name',
+                                },
+                            },
+                            {
+                                type: 'columns',
+                                columns: [
+                                    {
+                                        entries: [
+                                            {
+                                                type: 'inputField',
+                                                input: {
+                                                    id: 'lastName',
+                                                    type: 'string',
+                                                },
+                                                display: {
+                                                    label: 'Last Name',
+                                                },
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            };
+            const result = convertToReadOnly(nestedEntry);
+            expect(result.sections[0].entries?.[0]).toMatchObject({
+                type: 'readonlyField',
+                propertyId: 'firstName',
+            });
+            expect(result.sections[0].entries?.[1]).toMatchObject({
+                type: 'columns',
+            });
+            const nestedColumnEntry = (result.sections[0].entries?.[1])
+                .columns[0].entries?.[0];
+            expect(nestedColumnEntry).toMatchObject({
+                type: 'readonlyField',
+                propertyId: 'lastName',
+            });
+        });
+        it('returns unsupported entry types unchanged', () => {
+            const contentEntry = {
+                type: 'content',
+                html: '<div>Read only content</div>',
+            };
+            const result = convertToReadOnly(contentEntry);
+            expect(result).toBe(contentEntry);
+        });
+    });
 });

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

@@ -116,6 +116,73 @@ describe('FormRendererContainer', () => {
             });
         });
     });
+    it('keeps the rich text editor mounted while typing when autosave is not configured', async () => {
+        const user = userEvent.setup();
+        const mountSpy = vi.fn();
+        const richTextForm = {
+            id: 'richTextForm',
+            name: 'Rich Text Form',
+            actionId: '_update',
+            objectId: 'richTextObject',
+            entries: [
+                {
+                    parameterId: 'notes',
+                    type: 'input',
+                    display: {
+                        label: 'Notes',
+                    },
+                },
+            ],
+        };
+        const richTextObject = {
+            id: 'richTextObject',
+            name: 'Rich Text Object',
+            actions: [
+                {
+                    id: '_update',
+                    name: 'Update',
+                    type: 'update',
+                    parameters: [
+                        {
+                            id: 'notes',
+                            name: 'Notes',
+                            type: 'richText',
+                        },
+                    ],
+                    outputEvent: 'updated',
+                },
+            ],
+            properties: [
+                {
+                    id: 'notes',
+                    name: 'Notes',
+                    type: 'richText',
+                },
+            ],
+        };
+        const TestRichTextEditor = (props) => {
+            React.useEffect(() => {
+                mountSpy();
+            }, []);
+            return (React.createElement("textarea", { "aria-label": "Notes", value: props.value || '', onChange: (event) => props.handleUpdate?.(event.target.value), onBlur: () => props.onBlur?.() }));
+        };
+        server.use(http.get('/api/data/objects/richTextObject/effective', () => HttpResponse.json(richTextObject)), http.get('/api/data/objects/richTextObject/instances/test-instance', () => {
+            return HttpResponse.json({
+                id: 'test-instance',
+                name: 'Rich Text Instance',
+                notes: '',
+            });
+        }), http.get('/api/data/objects/richTextObject/instances/test-instance/object', () => {
+            return HttpResponse.json(richTextObject);
+        }), http.get('/api/data/forms/richTextForm/effective', () => HttpResponse.json(richTextForm)));
+        render(React.createElement(FormRendererContainer, { objectId: "richTextObject", formId: "richTextForm", dataType: "objectInstances", actionId: "_update", instanceId: "test-instance", richTextEditor: TestRichTextEditor }));
+        const notesField = await screen.findByRole('textbox', { name: 'Notes' });
+        await user.click(notesField);
+        await user.type(notesField, 'Focus should stay here');
+        const updatedNotesField = await screen.findByRole('textbox', { name: 'Notes' });
+        expect(updatedNotesField).toHaveFocus();
+        expect(mountSpy).toHaveBeenCalledTimes(1);
+    });
     describe('autosave functionality', () => {
         it('should trigger autosave when field loses focus', async () => {
             const user = userEvent.setup();
@@ -387,6 +454,10 @@ describe('FormRendererContainer', () => {
             render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
             const cityField = await screen.findByRole('textbox', { name: 'City' });
             await user.clear(cityField);
+            // react state may not have finished updating state internally yet, so wait for the field to be cleared before proceeding
+            await waitFor(() => {
+                expect(cityField).toHaveValue('');
+            });
             await user.type(cityField, 'Cambridge');
             await user.tab();
             await waitFor(() => {
@@ -758,6 +829,81 @@ describe('FormRendererContainer', () => {
             // Verify autosave was not triggered
             expect(autosaveActionSpy).not.toHaveBeenCalled();
         });
+        it('should trigger autosave when a rich text field loses focus', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const richTextForm = {
+                id: 'richTextAutosaveForm',
+                name: 'Rich Text Autosave Form',
+                objectId: 'richTextObject',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'notes',
+                        type: 'input',
+                        display: {
+                            label: 'Notes',
+                        },
+                    },
+                ],
+            };
+            const richTextObject = {
+                id: 'richTextObject',
+                name: 'Rich Text Object',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        parameters: [
+                            {
+                                id: 'notes',
+                                name: 'Notes',
+                                type: 'richText',
+                            },
+                        ],
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [
+                    {
+                        id: 'notes',
+                        name: 'Notes',
+                        type: 'richText',
+                    },
+                ],
+            };
+            const TestRichTextEditor = (props) => {
+                return (React.createElement("textarea", { "aria-label": "Notes", value: props.value || '', onChange: (event) => props.handleUpdate?.(event.target.value), onBlur: () => props.onBlur?.() }));
+            };
+            server.use(http.get('/api/data/objects/richTextObject/effective', () => HttpResponse.json(richTextObject)), http.get('/api/data/objects/richTextObject/instances/test-instance', () => {
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    name: 'Rich Text Instance',
+                    notes: '',
+                });
+            }), http.get('/api/data/objects/richTextObject/instances/test-instance/object', () => {
+                return HttpResponse.json(richTextObject);
+            }), http.get('/api/data/forms/richTextAutosaveForm/effective', () => HttpResponse.json(richTextForm)), http.post('/api/data/objects/richTextObject/instances/test-instance/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-instance',
+                    ...body.input,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: "richTextObject", formId: "richTextAutosaveForm", dataType: "objectInstances", actionId: "_update", instanceId: "test-instance", richTextEditor: TestRichTextEditor }));
+            const notesField = await screen.findByRole('textbox', { name: 'Notes' });
+            await user.type(notesField, 'Autosave me');
+            await user.tab();
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    notes: expect.stringContaining('Autosave me'),
+                }),
+            }));
+        });
         it('should trigger autosave immediately when a radio button is selected', async () => {
             const user = userEvent.setup();
             const autosaveActionSpy = vi.fn();
@@ -1420,6 +1566,72 @@ describe('FormRendererContainer', () => {
         await user.click(discardButton);
         await waitFor(() => expect(firstNameInput).toHaveValue(''));
     });
+    it('should reset rich text content without remounting the editor when discarding changes', async () => {
+        const user = userEvent.setup();
+        const mountSpy = vi.fn();
+        const form = {
+            id: 'richTextDiscardForm',
+            name: 'Rich Text Form',
+            entries: [
+                {
+                    type: 'input',
+                    parameterId: 'notes',
+                    display: {
+                        label: 'Notes',
+                    },
+                },
+            ],
+            actionId: '_update',
+            objectId: 'richTextDiscardObject',
+        };
+        const richTextObject = {
+            id: 'richTextDiscardObject',
+            name: 'Rich Text Object',
+            actions: [
+                {
+                    id: '_update',
+                    name: 'Update',
+                    type: 'update',
+                    parameters: [
+                        {
+                            id: 'notes',
+                            name: 'Notes',
+                            type: 'richText',
+                        },
+                    ],
+                    outputEvent: 'updated',
+                },
+            ],
+            properties: [
+                {
+                    id: 'notes',
+                    name: 'Notes',
+                    type: 'richText',
+                },
+            ],
+        };
+        const TestRichTextEditor = (props) => {
+            React.useEffect(() => {
+                mountSpy();
+            }, []);
+            return (React.createElement("textarea", { "aria-label": "Notes", value: props.value || '', onChange: (event) => props.handleUpdate?.(event.target.value), onBlur: () => props.onBlur?.() }));
+        };
+        server.use(http.get('/api/data/objects/richTextDiscardObject/effective', () => HttpResponse.json(richTextObject)), http.get('/api/data/forms/richTextDiscardForm/effective', () => HttpResponse.json(form)), http.get('/api/data/objects/richTextDiscardObject/instances/test-instance', () => HttpResponse.json({
+            id: 'test-instance',
+            name: 'Rich Text Instance',
+            notes: 'Original notes',
+        })), http.get('/api/data/objects/richTextDiscardObject/instances/test-instance/object', () => HttpResponse.json(richTextObject)));
+        render(React.createElement(FormRendererContainer, { objectId: "richTextDiscardObject", formId: "richTextDiscardForm", dataType: "objectInstances", actionId: "_update", instanceId: "test-instance", richTextEditor: TestRichTextEditor }));
+        const notesField = await screen.findByRole('textbox', { name: 'Notes' });
+        expect(notesField).toHaveValue('{\\rtf1\\ansi\\deff0 {\\fonttbl {\\f0 Calibri;}} \\f0\\fs22 Original notes}');
+        await user.clear(notesField);
+        await user.type(notesField, 'Updated notes');
+        expect(notesField).toHaveValue('Updated notes');
+        const discardButton = await screen.findByRole('button', { name: 'Discard Changes' });
+        await user.click(discardButton);
+        await waitFor(() => expect(notesField).toHaveValue('{\\rtf1\\ansi\\deff0 {\\fonttbl {\\f0 Calibri;}} \\f0\\fs22 Original notes}'));
+        expect(mountSpy).toHaveBeenCalledTimes(1);
+    });
     it('should show a not found error if the instance cannot be found', async () => {
         const form = {
             id: 'simpleForm',

package/dist/published/components/custom/ViewDetailsV2/InstanceEntryRenderer.js

@@ -14,10 +14,13 @@ import DropdownRepeatableField from '../FormV2/components/FormFieldTypes/Collect
 import RepeatableField from '../FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField';
 import Criteria from '../FormV2/components/FormFieldTypes/Criteria';
 import { Document } from '../FormV2/components/FormFieldTypes/DocumentFiles/Document';
+import { FileContent } from '../FormV2/components/FormFieldTypes/FileContent';
 import { Image } from '../FormV2/components/FormFieldTypes/Image';
 import PropertyProtection from '../FormV2/components/PropertyProtection';
 import { entryIsVisible, fetchInitialMiddleObjectInstances, fetchMiddleObject, filterEmptySections, getDefaultPages, isAddressProperty, } from '../FormV2/components/utils';
 import HtmlView from '../FormV2/components/HtmlView';
+import FormletRenderer from '../FormV2/components/FormletRenderer';
+import MisconfiguredErrorMessage from '../FormV2/components/MisconfiguredErrorMessage';
 function ViewOnlyEntryRenderer(props) {
     const { entry } = props;
     const { fetchedOptions, setFetchedOptions, object, instance, richTextEditor: RichTextEditor } = useFormContext();
@@ -28,6 +31,7 @@ function ViewOnlyEntryRenderer(props) {
     const [currentDisplayValue, setCurrentDisplayValue] = useState(instance?.[entryId]);
     const [protectionMode, setProtectionMode] = useState('mask');
     const display = 'display' in entry ? entry.display : undefined;
+    const isReference = (value) => !!value && typeof value === 'object' && 'id' in value && 'name' in value;
     const fieldDefinition = useMemo(() => {
         const def = entry.type === 'readonlyField'
             ? isAddressProperty(entry.propertyId)
@@ -110,14 +114,14 @@ function ViewOnlyEntryRenderer(props) {
             return (React.createElement(AddressFields, { entry: entry, viewOnly: true, entryId: entryId, fieldDefinition: fieldDefinition }));
         }
         else {
-            let fieldValue = currentDisplayValue ?? (instance?.[entryId] || '');
+            let fieldValue = currentDisplayValue ?? instance?.[entryId];
             switch (fieldDefinition?.type) {
                 case 'object':
-                    if (navigationSlug && fieldDefinition?.objectId) {
+                    if (navigationSlug && fieldDefinition?.objectId && isReference(fieldValue)) {
                         return (React.createElement(FieldWrapper, { inputId: entryId, inputType: "object", label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
                             React.createElement(Link, { sx: { cursor: 'pointer', fontFamily: 'sans-serif' }, href: `${'/app'}${navigationSlug.replace(':instanceId', fieldValue.id)}` }, fieldValue.name)));
                     }
-                    fieldValue = fieldValue.name;
+                    fieldValue = isReference(fieldValue) ? fieldValue.name : undefined;
                     break;
                 case 'array':
                     if (!isEmpty(fieldValue)) {
@@ -128,24 +132,29 @@ function ViewOnlyEntryRenderer(props) {
                     }
                     break;
                 case 'user':
-                    fieldValue = fieldValue && fieldValue.name;
+                    fieldValue = isReference(fieldValue) ? fieldValue.name : undefined;
                     break;
                 case 'date':
                     fieldValue =
                         isProtectedProperty && protectionMode === 'mask'
                             ? fieldValue
-                            : fieldValue && DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy');
+                            : typeof fieldValue === 'string'
+                                ? DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy')
+                                : undefined;
                     break;
                 case 'date-time':
                     fieldValue =
                         fieldValue && fieldValue instanceof Date
                             ? DateTime.fromJSDate(fieldValue).toFormat('MM/dd/yyyy hh:mm a')
-                            : fieldValue && DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy hh:mm a');
+                            : typeof fieldValue === 'string'
+                                ? DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy hh:mm a')
+                                : undefined;
                     break;
                 case 'time':
                     fieldValue =
-                        fieldValue &&
-                            DateTime.fromISO(DateTime.now().toISODate() + 'T' + fieldValue).toFormat('hh:mm a');
+                        typeof fieldValue === 'string'
+                            ? DateTime.fromISO(`${DateTime.now().toISODate()}T${fieldValue}`).toFormat('hh:mm a')
+                            : undefined;
                     break;
                 default:
                     break;
@@ -164,7 +173,11 @@ function ViewOnlyEntryRenderer(props) {
                 }
                 else if (fieldDefinition.type === 'document' || fieldDefinition.type === 'file') {
                     return (React.createElement(FieldWrapper, { inputId: entryId, inputType: fieldDefinition.type, label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, prefix: display?.prefix, suffix: display?.suffix, viewOnly: true },
-                        React.createElement(Document, { id: entryId, error: false, value: fieldValue, canUpdateProperty: false })));
+                        React.createElement(Document, { id: entryId, fieldType: fieldDefinition.type, error: false, value: fieldValue, canUpdateProperty: false })));
+                }
+                else if (fieldDefinition.type === 'fileContent') {
+                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'fileContent', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
+                        React.createElement(FileContent, { id: entryId, error: false, value: fieldValue, canUpdateProperty: false })));
                 }
                 else if (fieldDefinition.type === 'collection') {
                     if (fieldDefinition.manyToManyPropertyId && !isEmpty(middleObject)) {
@@ -195,6 +208,9 @@ function ViewOnlyEntryRenderer(props) {
         const filteredEntry = filterEmptySections(entry, instance);
         return filteredEntry ? React.createElement(AccordionSections, { entry: filteredEntry, readOnly: true }) : null;
     }
-    return null;
+    else if (entry.type === 'formlet') {
+        return React.createElement(FormletRenderer, { entry: entry, readOnly: true });
+    }
+    return React.createElement(MisconfiguredErrorMessage, null);
 }
 export default ViewOnlyEntryRenderer;

package/dist/published/components/custom/ViewDetailsV2/ViewDetailsV2Container.js

@@ -131,6 +131,7 @@ function ViewDetailsV2ContainerInner(props) {
                         onCollapseAll: handleCollapseAll,
                         expandedSections,
                         hasAccordions: hasSections,
+                        readOnly: true,
                     })
                     : updatedEntries.map((entry, index) => (React.createElement(ViewOnlyEntryRenderer, { entry: entry, key: index }))))))) : (React.createElement(Box, { sx: { padding: '20px' } },
             React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },

package/dist/published/components/custom/index.d.ts

@@ -16,5 +16,6 @@ export { RichTextViewer } from './RichTextViewer';
 export { UserAvatar } from './UserAvatar';
 export { ViewDetailsV2Container, ViewOnlyEntryRenderer } from './ViewDetailsV2';
 export type { ViewDetailsV2ContainerProps } from './ViewDetailsV2';
+export type { TreeViewObject, TreeViewProperty } from './CriteriaBuilder/types';
 export * from './util';
 export type { MongoDBQueryValue } from './types';

package/dist/published/index.d.ts

@@ -7,7 +7,7 @@ export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTime
 export * from './colors';
 export * from './components/core';
 export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormContext, FormField, FormRenderer, FormRendererContainer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RecursiveEntryRenderer, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, ViewDetailsV2Container, ViewOnlyEntryRenderer, parseMongoDB, difference, } from './components/custom';
-export type { BodyProps, FooterProps, FormRef, GridSortModel, HeaderProps, MongoDBQueryValue, ViewDetailsV2ContainerProps, } from './components/custom';
+export type { BodyProps, FooterProps, FormRef, GridSortModel, HeaderProps, MongoDBQueryValue, ViewDetailsV2ContainerProps, TreeViewObject, TreeViewProperty, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';