@evoke-platform/ui-components 1.10.0-dev.11 → 1.10.0-dev.13

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

@@ -7,7 +7,7 @@ import { Typography } from '../../../core/Typography';
 import Box from '../../../layout/Box/Box';
 import ValidationErrors from './ValidationFiles/ValidationErrors';
 const Header = (props) => {
-    const { title, errors, hasAccordions, shouldShowValidationErrors, validationErrorsRef, form, sx } = props;
+    const { title, errors, hasAccordions, shouldShowValidationErrors, validationErrorsRef, sx, isDeleteForm, autosaveEnabled, } = props;
     const { width } = useFormContext();
     const { breakpoints, isBelow } = useWidgetSize({
         scroll: false,
@@ -24,7 +24,7 @@ const Header = (props) => {
             flexWrap: 'wrap',
             paddingY: isSm || isXs ? 2 : 3,
             // when rendering the default delete action, we don't want a border
-            borderBottom: !form.id ? undefined : '1px solid #e9ecef',
+            borderBottom: isDeleteForm ? undefined : '1px solid #e9ecef',
             gap: isSm || isXs ? 2 : 3,
             '.evoke-form-renderer-header': {
                 flex: '1 1 100%',
@@ -37,14 +37,14 @@ const Header = (props) => {
         hasAccordions && (React.createElement(Box, { sx: { flex: '0 0 auto', display: 'flex', alignItems: 'center' } },
             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
                 React.createElement(AccordionActions, { ...props })),
-            React.createElement(Box, { sx: {
+            autosaveEnabled && (React.createElement(Box, { sx: {
                     width: '96px',
                     minWidth: '72px',
                     display: 'flex',
                     justifyContent: 'flex-end',
                     alignItems: 'center',
                     marginLeft: 0.5,
-                } }, props.autosaving && isSmall ? React.createElement(SavingIndicator, null) : React.createElement(Box, { sx: { width: '100%' } })))),
+                } }, props.autosaving && isSmall ? React.createElement(SavingIndicator, null) : React.createElement(Box, { sx: { width: '100%' } }))))),
         React.createElement("div", { ref: validationErrorsRef, className: 'evoke-form-renderer-header' }, shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null)));
 };
 // Default slot components for convenience

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

@@ -38,11 +38,7 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
 }
 export function RecursiveEntryRenderer(props) {
     const { entry } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, form, width, } = useFormContext();
-    // If the entry is hidden, clear its value and any nested values, and skip rendering
-    if (!entryIsVisible(entry, getValues(), instance)) {
-        return null;
-    }
+    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, form, width, } = useFormContext();
     const { isBelow, breakpoints } = useWidgetSize({
         scroll: false,
         defaultWidth: width,
@@ -53,20 +49,24 @@ export function RecursiveEntryRenderer(props) {
     const userAccount = useAuthenticationContext()?.account;
     const entryId = getEntryId(entry) || 'defaultId';
     const display = 'display' in entry ? entry.display : undefined;
-    const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues(entryId);
+    const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues ? getValues(entryId) : undefined;
     const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
     const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const fieldDefinition = useMemo(() => {
         return getFieldDefinition(entry, object, parameters, form?.id === 'documentForm');
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
-    if (associatedObject?.propertyId === entryId)
-        return null;
     useEffect(() => {
         if (fieldDefinition?.type === 'collection' && fieldDefinition?.manyToManyPropertyId && instance) {
             fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instance.id, fetchedOptions, initialMiddleObjectInstances);
         }
     }, [fieldDefinition, instance]);
+    if (associatedObject?.propertyId === entryId)
+        return null;
+    // If the entry is hidden, clear its value and any nested values, and skip rendering
+    if (!getValues || !entryIsVisible(entry, instance, getValues())) {
+        return null;
+    }
     if (entry.type === 'content') {
         return (React.createElement(Box, { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(entry.html) }, sx: {
                 fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
@@ -75,7 +75,7 @@ export function RecursiveEntryRenderer(props) {
     else if ((entry.type === 'input' || entry.type === 'readonlyField' || entry.type === 'inputField') &&
         fieldDefinition) {
         if (isAddressProperty(entryId)) {
-            return React.createElement(AddressFields, { entry: entry, entryId: entryId, fieldDefinition: fieldDefinition });
+            return (React.createElement(AddressFields, { entry: entry, entryId: entryId, fieldDefinition: fieldDefinition, readOnly: entry.type === 'readonlyField' }));
         }
         else if (fieldDefinition.type === 'image') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
@@ -118,16 +118,11 @@ export function RecursiveEntryRenderer(props) {
             }
         }
         else if (fieldDefinition.type === 'richText') {
-            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, RichTextEditor && handleChange ? (React.createElement(RichTextEditor
+            // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
+            , { 
                 // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
-                id: entry.uniqueId,
-                value: fieldValue,
-                handleUpdate: (value) => handleChange(entryId, value),
-                format: 'rtf',
-                disabled: entry.type === 'readonlyField',
-                rows: display?.rowCount,
-                hasError: !!errors?.[entryId],
-            })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, onBlur: () => {
+                id: entry.uniqueId, value: fieldValue, handleUpdate: (value) => handleChange(entryId, value), format: "rtf", disabled: entry.type === 'readonlyField', rows: display?.rowCount, hasError: !!errors?.[entryId] })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue, onChange: handleChange, onBlur: () => {
                     onAutosave?.(entryId)?.catch((error) => {
                         console.error('Autosave failed:', error);
                     });
@@ -174,7 +169,7 @@ export function RecursiveEntryRenderer(props) {
                     : `${entryId}-reset-false`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors), errorMessage: undefined },
                 React.createElement(FormField, { id: entryId, 
                     // TODO: Ideally the FormField prop should be called parameter but can't change the name for backwards compatibility reasons
-                    property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, onBlur: () => {
+                    property: fieldDefinition, defaultValue: fieldValue, onChange: handleChange, onBlur: () => {
                         // Blur event - reads current value from formData
                         onAutosave?.(entryId)?.catch((error) => {
                             console.error('Autosave failed:', error);

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

@@ -93,6 +93,7 @@ export type EntryRendererProps = {
 };
 export type SectionsProps = {
     entry: ExpandedSections;
+    readOnly?: boolean;
 };
 export type DocumentData = {
     id: string;

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

@@ -10,7 +10,7 @@ export declare function isAddressProperty(key: string): boolean;
 /**
  * Determine if a form entry is visible or not.
  */
-export declare const entryIsVisible: (entry: FormEntry, formValues: FieldValues, instance?: FieldValues) => boolean;
+export declare const entryIsVisible: (entry: FormEntry, instance?: FieldValues, formValues?: FieldValues) => boolean;
 /**
  * Recursively retrieves all parameter IDs from a given entry of type Sections or Columns.
  *
@@ -86,7 +86,7 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
     message?: string;
     isError: boolean;
 }>>): Promise<FieldValues>;
-export declare function filterEmptySections(entry: Sections | Columns, formData: FieldValues, instance?: FieldValues): Sections | Columns | null;
+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[];
 /**
  * Converts a plain text string to RTF format suitable for a RichTextEditor.

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

@@ -68,7 +68,7 @@ export function isAddressProperty(key) {
 /**
  * Determine if a form entry is visible or not.
  */
-export const entryIsVisible = (entry, formValues, instance) => {
+export const entryIsVisible = (entry, instance, formValues) => {
     const display = 'display' in entry ? entry.display : undefined;
     const { visibility } = display ?? ('visibility' in entry ? entry : {});
     if (isObject(visibility) && 'conditions' in visibility && isArray(visibility.conditions)) {
@@ -669,21 +669,21 @@ export async function formatSubmission(submission, apiServices, objectId, instan
     }
     return submission;
 }
-export function filterEmptySections(entry, formData, instance) {
+export function filterEmptySections(entry, instance, formData) {
     if (entry.type === 'sections' && isArray(entry.sections)) {
         const visibleSections = entry.sections.filter((section) => {
             if (!section.entries || section.entries.length === 0)
                 return false;
             for (const sectionEntry of section.entries) {
                 if (sectionEntry.type === 'sections' || sectionEntry.type === 'columns') {
-                    if (sectionEntry.visibility && !entryIsVisible(sectionEntry, formData, instance)) {
+                    if (sectionEntry.visibility && !entryIsVisible(sectionEntry, instance, formData)) {
                         return false;
                     }
-                    else if (filterEmptySections(sectionEntry, formData, instance)) {
+                    else if (filterEmptySections(sectionEntry, instance, formData)) {
                         return true;
                     }
                 }
-                else if (entryIsVisible(sectionEntry, formData, instance)) {
+                else if (entryIsVisible(sectionEntry, instance, formData)) {
                     return true;
                 }
             }
@@ -703,13 +703,13 @@ export function filterEmptySections(entry, formData, instance) {
             let hasVisibleEntry = false;
             for (const columnEntry of column.entries) {
                 if (columnEntry.type === 'sections' || columnEntry.type === 'columns') {
-                    if (filterEmptySections(columnEntry, formData, instance)) {
+                    if (filterEmptySections(columnEntry, instance, formData)) {
                         hasVisibleEntry = true;
                         break;
                     }
                 }
                 else {
-                    if (entryIsVisible(columnEntry, formData, instance)) {
+                    if (entryIsVisible(columnEntry, instance, formData)) {
                         hasVisibleEntry = true;
                         break;
                     }

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

@@ -123,8 +123,7 @@ describe('FormRendererContainer', () => {
                     license: null,
                 });
             }));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
             await waitFor(() => {
                 expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
             });
@@ -174,8 +173,7 @@ describe('FormRendererContainer', () => {
                     license: null,
                 });
             }));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
             await waitFor(() => {
                 expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
             });
@@ -222,8 +220,7 @@ describe('FormRendererContainer', () => {
                 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' })));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
             await waitFor(() => {
                 expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
             });
@@ -267,8 +264,7 @@ describe('FormRendererContainer', () => {
                     license: null,
                 });
             }));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
             await waitFor(() => {
                 expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
             });
@@ -321,8 +317,7 @@ describe('FormRendererContainer', () => {
                     },
                 });
             }));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' })));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
             await waitFor(() => {
                 expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
             });
@@ -382,8 +377,7 @@ describe('FormRendererContainer', () => {
                     address: body.input.address,
                 });
             }));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' })));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
             await waitFor(() => {
                 expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
             });
@@ -444,8 +438,7 @@ describe('FormRendererContainer', () => {
                     address: body.input.address,
                 });
             }));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' })));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
             await waitFor(() => {
                 expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
             });
@@ -492,8 +485,7 @@ describe('FormRendererContainer', () => {
                     autosaveActionId: '_autosave',
                 });
             }));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
             await waitFor(() => {
                 expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
             });
@@ -526,8 +518,7 @@ describe('FormRendererContainer', () => {
                 });
             }));
             const user = userEvent.setup();
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' })));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
             await waitFor(() => {
                 expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
             });

package/dist/published/components/custom/ViewDetailsV2/InstanceEntryRenderer.d.ts

@@ -0,0 +1,3 @@
+import { EntryRendererProps } from '../FormV2/components/types';
+declare function ViewOnlyEntryRenderer(props: EntryRendererProps): any;
+export default ViewOnlyEntryRenderer;

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

@@ -0,0 +1,155 @@
+import { useApiServices, useApp, } from '@evoke-platform/context';
+import { CancelRounded, CheckCircleRounded } from '@mui/icons-material';
+import DOMPurify from 'dompurify';
+import { isEmpty } from 'lodash';
+import { DateTime } from 'luxon';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useFormContext } from '../../../theme/hooks';
+import { Link, Typography } from '../../core';
+import { Box, Grid } from '../../layout';
+import AccordionSections from '../FormV2/components/AccordionSections';
+import FieldWrapper from '../FormV2/components/FieldWrapper';
+import AddressFields from '../FormV2/components/FormFieldTypes/AddressFields';
+import DropdownRepeatableField from '../FormV2/components/FormFieldTypes/CollectionFiles/DropdownRepeatableField';
+import RepeatableField from '../FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField';
+import Criteria from '../FormV2/components/FormFieldTypes/Criteria';
+import { Document } from '../FormV2/components/FormFieldTypes/DocumentFiles/Document';
+import { Image } from '../FormV2/components/FormFieldTypes/Image';
+import { entryIsVisible, fetchCollectionData, filterEmptySections, getDefaultPages, isAddressProperty, } from '../FormV2/components/utils';
+function ViewOnlyEntryRenderer(props) {
+    const { entry } = props;
+    const { fetchedOptions, setFetchedOptions, object, instance, richTextEditor: RichTextEditor } = useFormContext();
+    const entryId = entry.propertyId || 'defaultId';
+    const apiServices = useApiServices();
+    const { defaultPages, findDefaultPageSlugFor } = useApp();
+    const [navigationSlug, setNavigationSlug] = useState(fetchedOptions[`${entryId}NavigationSlug`]);
+    const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
+    const middleObject = fetchedOptions[`${entryId}MiddleObject`];
+    const display = 'display' in entry ? entry.display : undefined;
+    const fieldDefinition = useMemo(() => {
+        const def = entry.type === 'readonlyField'
+            ? isAddressProperty(entry.propertyId)
+                ? object?.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
+                : object?.properties?.find((prop) => prop.id === entry.propertyId)
+            : undefined;
+        if (def?.enum && def.type === 'string') {
+            const cloned = structuredClone(def);
+            // single select must be made to be type choices for label and error handling
+            cloned.type = 'choices';
+            return cloned;
+        }
+        return def;
+    }, [entry, object]);
+    useEffect(() => {
+        if (fieldDefinition?.type === 'collection' && fieldDefinition?.manyToManyPropertyId && instance) {
+            fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instance.id, fetchedOptions, initialMiddleObjectInstances);
+        }
+    }, [fieldDefinition, initialMiddleObjectInstances, setFetchedOptions, instance, fetchedOptions, apiServices]);
+    useEffect(() => {
+        (async () => {
+            if (object?.properties && !fetchedOptions[`${entryId}NavigationSlug`]) {
+                const pages = await getDefaultPages(object.properties, defaultPages, findDefaultPageSlugFor);
+                if (fieldDefinition?.objectId && pages[fieldDefinition.objectId]) {
+                    setNavigationSlug(pages[fieldDefinition.objectId]);
+                    setFetchedOptions({
+                        [`${entryId}NavigationSlug`]: pages[fieldDefinition.objectId],
+                    });
+                }
+            }
+        })();
+    }, [object, defaultPages, findDefaultPageSlugFor, fieldDefinition]);
+    // If the entry is hidden, clear its value and any nested values, and skip rendering
+    if (!entryIsVisible(entry, instance)) {
+        return null;
+    }
+    if (entry.type === 'content') {
+        return (React.createElement(Box, { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(entry.html) }, sx: {
+                fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+            } }));
+    }
+    else if (entry.type === 'readonlyField') {
+        if (isAddressProperty(entryId)) {
+            return (React.createElement(AddressFields, { entry: entry, viewOnly: true, entryId: entryId, fieldDefinition: fieldDefinition }));
+        }
+        else {
+            let fieldValue = instance?.[entryId] || '';
+            switch (fieldDefinition?.type) {
+                case 'object':
+                    if (navigationSlug && fieldDefinition?.objectId) {
+                        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;
+                    break;
+                case 'array':
+                    if (!isEmpty(fieldValue)) {
+                        fieldValue = fieldValue && fieldValue.join(', ');
+                    }
+                    else {
+                        fieldValue = '';
+                    }
+                    break;
+                case 'user':
+                    fieldValue = fieldValue && fieldValue.name;
+                    break;
+                case 'date':
+                    fieldValue = fieldValue && DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy');
+                    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');
+                    break;
+                case 'time':
+                    fieldValue =
+                        fieldValue &&
+                            DateTime.fromISO(DateTime.now().toISODate() + 'T' + fieldValue).toFormat('hh:mm a');
+                    break;
+                default:
+                    break;
+            }
+            if (fieldDefinition) {
+                if (fieldDefinition.type === 'image') {
+                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'image', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
+                        React.createElement(Image, { id: entryId, canUpdateProperty: false, value: fieldValue, hasDescription: !!display?.description })));
+                }
+                else if (fieldDefinition.type === 'richText') {
+                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'richText', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true }, RichTextEditor ? (React.createElement(RichTextEditor
+                    // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
+                    , { 
+                        // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
+                        id: entry.uniqueId, value: fieldValue, format: "rtf", disabled: true, rows: display?.rowCount, hasError: false })) : (React.createElement(Typography, { variant: "body1", key: entryId, sx: { height: '24px' } }, fieldValue))));
+                }
+                else if (fieldDefinition.type === 'document') {
+                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'document', 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 })));
+                }
+                else if (fieldDefinition.type === 'collection') {
+                    return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'collection', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
+                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] ||
+                                initialMiddleObjectInstances, id: entryId, middleObject: middleObject, fieldDefinition: fieldDefinition, readOnly: true })))) : (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'collection', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
+                        React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: false, entry: entry, viewLayout: display?.viewLayout })));
+                }
+                else if (fieldDefinition.type === 'criteria') {
+                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'criteria', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
+                        React.createElement(Criteria, { value: fieldValue, fieldDefinition: fieldDefinition, canUpdateProperty: false })));
+                }
+                else {
+                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: fieldDefinition?.type || 'string', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, prefix: display?.prefix, suffix: display?.suffix, viewOnly: true }, fieldDefinition?.type === 'boolean' && fieldValue ? (React.createElement(CheckCircleRounded, { "aria-label": "Checked", color: "success" })) : fieldDefinition?.type === 'boolean' ? (React.createElement(CancelRounded, { "aria-label": "Unchecked", color: "error" })) : (React.createElement(Typography, { variant: "body1", key: entryId, sx: { height: '24px' } }, fieldValue))));
+                }
+            }
+        }
+    }
+    else if (entry.type === 'columns') {
+        return (React.createElement(Grid, { container: true, spacing: 4 }, entry.columns.map((column, colIndex) => (React.createElement(Grid, { item: true, key: colIndex, xs: 12, sm: column.width }, column.entries?.map((columnEntry, entryIndex) => {
+            return (React.createElement(ViewOnlyEntryRenderer, { key: entryIndex + (columnEntry?.parameterId ?? ''), entry: columnEntry }));
+        }))))));
+    }
+    else if (entry.type === 'sections') {
+        const filteredEntry = filterEmptySections(entry, instance);
+        return filteredEntry ? React.createElement(AccordionSections, { entry: filteredEntry, readOnly: true }) : null;
+    }
+    return null;
+}
+export default ViewOnlyEntryRenderer;

package/dist/published/components/custom/ViewDetailsV2/ViewDetailsV2Renderer.d.ts

@@ -0,0 +1,13 @@
+import React, { ComponentType } from 'react';
+import { FormRendererProps } from '../FormV2/FormRenderer';
+import { BaseProps, SimpleEditorProps } from '../FormV2/components/types';
+export type ViewDetailsV2ContainerProps = BaseProps & {
+    panelLayoutId?: string;
+    instanceId?: string;
+    objectId: string;
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    renderHeader?: FormRendererProps['renderHeader'];
+    renderBody?: FormRendererProps['renderBody'];
+};
+declare function ViewDetailsV2Container(props: ViewDetailsV2ContainerProps): React.JSX.Element;
+export default ViewDetailsV2Container;

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

@@ -0,0 +1,140 @@
+import { useApiServices, useObject, } from '@evoke-platform/context';
+import axios from 'axios';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useWidgetSize } from '../../../theme';
+import { Skeleton, Snackbar } from '../../core';
+import { Box } from '../../layout';
+import ErrorComponent from '../ErrorComponent';
+import { FormContext } from '../FormV2';
+import Header from '../FormV2/components/Header';
+import { assignIdsToSectionsAndRichText, getPrefixedUrl } from '../FormV2/components/utils';
+import ViewOnlyEntryRenderer from './InstanceEntryRenderer';
+function ViewDetailsV2Container(props) {
+    const { instanceId, panelLayoutId, objectId, richTextEditor, renderHeader, renderBody } = props;
+    const apiServices = useApiServices();
+    const [sanitizedObject, setSanitizedObject] = useState();
+    const [instance, setInstance] = useState();
+    const [error, setError] = useState();
+    const [panelLayout, setPanelLayout] = useState();
+    const [expandedSections, setExpandedSections] = useState([]);
+    const [fetchedOptions, setFetchedOptions] = useState({});
+    const [expandAll, setExpandAll] = useState();
+    const [snackbarError, setSnackbarError] = useState({
+        showAlert: false,
+        isError: true,
+    });
+    function handleExpandAll() {
+        setExpandAll(true);
+    }
+    function handleCollapseAll() {
+        setExpandAll(false);
+    }
+    const updateFetchedOptions = (newData) => {
+        setFetchedOptions((prev) => ({
+            ...prev,
+            ...newData,
+        }));
+    };
+    const { ref: containerRef, breakpoints, width, } = useWidgetSize({
+        scroll: false,
+        defaultWidth: 1200,
+    });
+    const { isXs, isSm } = breakpoints;
+    const objectStore = useObject(panelLayout?.objectId ?? objectId);
+    const onError = (err) => {
+        const code = axios.isAxiosError(err) ? err.response?.status : undefined;
+        setSnackbarError({ ...snackbarError, isError: true });
+        setError(code ?? true);
+    };
+    useEffect(() => {
+        (async () => {
+            try {
+                if (instanceId) {
+                    const instance = await objectStore.getInstance(instanceId);
+                    setInstance(instance);
+                }
+                const object = await apiServices.get(getPrefixedUrl(`/objects/${objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } });
+                setSanitizedObject(object);
+            }
+            catch (error) {
+                const isAxiosErr = axios.isAxiosError(error);
+                console.error(isAxiosErr ? error.message : 'Error while fetching object');
+                setError(isAxiosErr ? error.status : true);
+            }
+        })();
+    }, [objectId, instanceId]);
+    useEffect(() => {
+        if (panelLayoutId || sanitizedObject?.defaultPanelLayoutId) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${objectId}/panelLayouts/${panelLayoutId || sanitizedObject?.defaultPanelLayoutId}`))
+                .then((evokeForm) => {
+                setPanelLayout(evokeForm);
+            })
+                .catch((error) => {
+                onError(error);
+            });
+        }
+    }, [panelLayoutId, sanitizedObject, objectId]);
+    const updatedEntries = useMemo(() => {
+        return assignIdsToSectionsAndRichText(panelLayout?.entries || []);
+    }, [panelLayout?.id]);
+    const isLoading = (instanceId && !instance) || !panelLayout || !sanitizedObject;
+    const hasSections = updatedEntries.some((entry) => entry.type === 'sections');
+    const headerProps = {
+        title: panelLayout?.name,
+        onExpandAll: handleExpandAll,
+        onCollapseAll: handleCollapseAll,
+        expandedSections,
+        hasAccordions: hasSections,
+        autosaveEnabled: false,
+    };
+    return !error ? (React.createElement(Box, { sx: {
+            backgroundColor: '#ffffff',
+            borderRadius: '6px',
+            padding: '0px',
+            border: !isLoading ? '1px solid #dbe0e4' : undefined,
+        } },
+        !isLoading ? (React.createElement(Box, { ref: containerRef },
+            (hasSections || panelLayout.name || renderHeader) &&
+                (renderHeader ? renderHeader({ ...headerProps }) : React.createElement(Header, { ...headerProps })),
+            React.createElement(Box, { sx: {
+                    paddingX: isSm || isXs ? 2 : 3,
+                    borderTop: '1px solid #e9ecef',
+                } },
+                React.createElement(FormContext.Provider, { value: {
+                        fetchedOptions,
+                        setFetchedOptions: updateFetchedOptions,
+                        object: sanitizedObject,
+                        instance,
+                        richTextEditor,
+                        expandedSections,
+                        setExpandedSections,
+                        expandAll,
+                        setExpandAll,
+                        width,
+                    } }, renderBody
+                    ? renderBody({
+                        isInitializing: isLoading,
+                        entries: updatedEntries,
+                        onExpandAll: handleExpandAll,
+                        onCollapseAll: handleCollapseAll,
+                        expandedSections,
+                        hasAccordions: hasSections,
+                    })
+                    : 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' },
+                React.createElement(Skeleton, { width: '78%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '20%', sx: { borderRadius: '8px', height: '40px' } })),
+            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+                React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '33%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } })),
+            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+                React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } })))),
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
+                isError: snackbarError.isError,
+                showAlert: false,
+            }), message: snackbarError.message, error: snackbarError.isError }))) : (React.createElement(ErrorComponent, { colspan: props.colspan, code: error === 403 ? 'AccessDenied' : error === 404 ? 'NotFound' : 'Misconfigured' }));
+}
+export default ViewDetailsV2Container;

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

@@ -0,0 +1,2 @@
+export { default as ViewOnlyEntryRenderer } from './InstanceEntryRenderer';
+export { default as ViewDetailsV2Container } from './ViewDetailsV2Renderer';

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

@@ -0,0 +1,2 @@
+export { default as ViewOnlyEntryRenderer } from './InstanceEntryRenderer';
+export { default as ViewDetailsV2Container } from './ViewDetailsV2Renderer';

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

@@ -14,3 +14,4 @@ export { RepeatableField } from './RepeatableField';
 export { ResponsiveOverflow } from './ResponsiveOverflow';
 export { RichTextViewer } from './RichTextViewer';
 export { UserAvatar } from './UserAvatar';
+export { ViewDetailsV2Container, ViewOnlyEntryRenderer } from './ViewDetailsV2';

package/dist/published/components/custom/index.js

@@ -12,3 +12,4 @@ export { RepeatableField } from './RepeatableField';
 export { ResponsiveOverflow } from './ResponsiveOverflow';
 export { RichTextViewer } from './RichTextViewer';
 export { UserAvatar } from './UserAvatar';
+export { ViewDetailsV2Container, ViewOnlyEntryRenderer } from './ViewDetailsV2';

package/dist/published/index.d.ts

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMe
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 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, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormContext, FormField, FormRenderer, FormRendererContainer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RecursiveEntryRenderer, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, ViewDetailsV2Container, ViewOnlyEntryRenderer, } from './components/custom';
 export type { BodyProps, FooterProps, FormRef, GridSortModel, HeaderProps } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';