@evoke-platform/ui-components 1.10.0-testing.15 → 1.10.0-testing.16

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/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';

package/dist/published/index.js

@@ -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 { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';

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

@@ -121,3 +121,15 @@ export declare const users: {
     email: string;
     name: string;
 }[];
+export declare const customerLayout: {
+    id: string;
+    name: string;
+    properties: {
+        id: string;
+    }[];
+    sort: {
+        colId: string;
+        sort: string;
+    };
+    objectId: string;
+};

package/dist/published/stories/FormRendererData.js

@@ -93,6 +93,11 @@ export const mockGenericEvokeFormObject = {
             name: 'User',
             type: 'user',
         },
+        {
+            id: 'boolean',
+            name: 'Boolean',
+            type: 'boolean',
+        },
     ],
     actions: [
         {
@@ -1054,3 +1059,21 @@ export const users = [
         name: 'User 2',
     },
 ];
+// Layouts
+export const customerLayout = {
+    id: 'layoutId',
+    name: 'Generic Layout 3',
+    properties: [
+        {
+            id: 'name',
+        },
+        {
+            id: 'document',
+        },
+    ],
+    sort: {
+        colId: 'name',
+        sort: 'asc',
+    },
+    objectId: 'customers',
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
+    panelLayoutId?: string | undefined;
+    instanceId?: string | undefined;
+    objectId: string;
+    richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
+    renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
+    renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
+}>;
+export default _default;
+export declare const ViewDetails: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
+    panelLayoutId?: string | undefined;
+    instanceId?: string | undefined;
+    objectId: string;
+    richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
+    renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
+    renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
+}>;
+export declare const ViewWithSections: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
+    panelLayoutId?: string | undefined;
+    instanceId?: string | undefined;
+    objectId: string;
+    richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
+    renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
+    renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
+}>;

package/dist/published/stories/ViewDetailsV2Container.stories.js

@@ -0,0 +1,37 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { ViewDetailsV2Container } from '../components/custom';
+import { sharedObjectHandlers } from './sharedMswHandlers';
+export default {
+    title: 'Custom/ViewDetailsV2Container',
+    component: ViewDetailsV2Container,
+    parameters: {
+        layout: 'fullscreen',
+        msw: {
+            handlers: [sharedObjectHandlers],
+        },
+    },
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { padding: '2rem', paddingBottom: 0, '& .css-x8wy7h': { bottom: -1 } } },
+            React.createElement(Story, null))),
+    ],
+};
+const mockProps = {
+    panelLayoutId: 'genericEvokeView',
+    instanceId: 'genericEvokeViewInstanceId',
+    objectId: 'genericEvokeForm',
+};
+const Template = (args) => {
+    return (React.createElement(MemoryRouter, null,
+        React.createElement(ViewDetailsV2Container, { ...args })));
+};
+export const ViewDetails = Template.bind({});
+ViewDetails.args = {
+    ...mockProps,
+};
+export const ViewWithSections = Template.bind({});
+ViewWithSections.args = {
+    ...mockProps,
+    panelLayoutId: 'genericEvokeViewWithSections',
+};

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

@@ -0,0 +1,4 @@
+import { EvokeForm, ObjectInstance } from '@evoke-platform/context';
+export declare const viewInstance: ObjectInstance;
+export declare const mockGenericEvokeView: Omit<EvokeForm, 'actionId'>;
+export declare const mockGenericEvokeViewWithSections: EvokeForm;