@evoke-platform/ui-components 1.10.0-testing.2 → 1.10.0-testing.21

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

@@ -23,3 +23,4 @@ export declare const users: {
     email: string;
     name: string;
 }[];
+export declare const licenseForm: EvokeForm;

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

@@ -116,6 +116,8 @@ export const UpdateAccessibilityFormOne = {
             display: {
                 label: 'License',
                 relatedObjectDisplay: 'dropdown',
+                createActionId: '_create',
+                createFormId: 'specialtyForm',
             },
         },
     ],
@@ -164,6 +166,11 @@ export const licenseObject = {
             type: 'object',
             objectId: 'licenseType',
         },
+        {
+            id: 'address',
+            name: 'Licensee Address',
+            type: 'address',
+        },
     ],
     actions: [
         {
@@ -171,6 +178,96 @@ export const licenseObject = {
             name: 'Update',
             type: 'update',
             outputEvent: 'License Updated',
+            parameters: [
+                {
+                    id: 'name',
+                    name: 'License Number',
+                    type: 'string',
+                },
+                {
+                    id: 'status',
+                    name: 'Status',
+                    type: 'string',
+                },
+                {
+                    id: 'address.line1',
+                    name: 'Address Line 1',
+                    type: 'string',
+                },
+                {
+                    id: 'address.line2',
+                    name: 'Address Line 2',
+                    type: 'string',
+                },
+                {
+                    id: 'address.city',
+                    name: 'City',
+                    type: 'string',
+                },
+                {
+                    id: 'address.county',
+                    name: 'County',
+                    type: 'string',
+                },
+                {
+                    id: 'address.state',
+                    name: 'State',
+                    type: 'string',
+                },
+                {
+                    id: 'address.zipCode',
+                    name: 'Zip Code',
+                    type: 'string',
+                },
+            ],
+        },
+        {
+            id: '_autosave',
+            name: 'Autosave',
+            type: 'update',
+            outputEvent: 'License Autosaved',
+            parameters: [
+                {
+                    id: 'name',
+                    name: 'License Number',
+                    type: 'string',
+                },
+                {
+                    id: 'status',
+                    name: 'Status',
+                    type: 'string',
+                },
+                {
+                    id: 'address.line1',
+                    name: 'Address Line 1',
+                    type: 'string',
+                },
+                {
+                    id: 'address.line2',
+                    name: 'Address Line 2',
+                    type: 'string',
+                },
+                {
+                    id: 'address.city',
+                    name: 'City',
+                    type: 'string',
+                },
+                {
+                    id: 'address.county',
+                    name: 'County',
+                    type: 'string',
+                },
+                {
+                    id: 'address.state',
+                    name: 'State',
+                    type: 'string',
+                },
+                {
+                    id: 'address.zipCode',
+                    name: 'Zip Code',
+                    type: 'string',
+                },
+            ],
         },
         {
             id: '_delete',
@@ -526,3 +623,46 @@ export const users = [
         name: 'User 2',
     },
 ];
+export const licenseForm = {
+    id: 'licenseForm',
+    name: 'License Form',
+    objectId: 'license',
+    actionId: '_update',
+    entries: [
+        {
+            parameterId: 'name',
+            type: 'input',
+            display: {
+                label: 'License Number',
+            },
+        },
+        {
+            parameterId: 'address.line1',
+            type: 'input',
+            display: {
+                label: 'Address Line 1',
+            },
+        },
+        {
+            parameterId: 'address.city',
+            type: 'input',
+            display: {
+                label: 'City',
+            },
+        },
+        {
+            parameterId: 'address.state',
+            type: 'input',
+            display: {
+                label: 'State',
+            },
+        },
+        {
+            parameterId: 'address.zipCode',
+            type: 'input',
+            display: {
+                label: 'Zip Code',
+            },
+        },
+    ],
+};

package/dist/published/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/ViewDetailsV2Container.d.ts

@@ -0,0 +1,13 @@
+import React, { ComponentType } from 'react';
+import { BaseProps, SimpleEditorProps } from '../FormV2/components/types';
+import { FormRendererProps } from '../FormV2/FormRenderer';
+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/ViewDetailsV2Container.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,3 @@
+export { default as ViewOnlyEntryRenderer } from './InstanceEntryRenderer';
+export { default as ViewDetailsV2Container } from './ViewDetailsV2Container';
+export type { ViewDetailsV2ContainerProps } from './ViewDetailsV2Container';

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

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

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

@@ -14,3 +14,5 @@ export { RepeatableField } from './RepeatableField';
 export { ResponsiveOverflow } from './ResponsiveOverflow';
 export { RichTextViewer } from './RichTextViewer';
 export { UserAvatar } from './UserAvatar';
+export { ViewDetailsV2Container, ViewOnlyEntryRenderer } from './ViewDetailsV2';
+export type { ViewDetailsV2ContainerProps } 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

@@ -1,15 +1,15 @@
 export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
+export type { AutocompleteRenderGroupParams, ButtonBaseActions, ButtonBaseClasses, FormControlProps, FormHelperTextProps, GridSize, MenuItemClasses, TextFieldProps, Theme, } from '@mui/material';
+export type { TouchRippleActions, TouchRippleProps } from '@mui/material/ButtonBase/TouchRipple';
+export type { CommonProps } from '@mui/material/OverridableComponent';
+export type { SxProps } from '@mui/system';
 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 type { BodyProps, FooterProps, FormRef, GridSortModel, HeaderProps } 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, ViewDetailsV2ContainerProps, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';
 export * as EVOKE_TYPES from './types';
 export * from './util';
-export type { AutocompleteRenderGroupParams, ButtonBaseActions, ButtonBaseClasses, FormControlProps, FormHelperTextProps, GridSize, MenuItemClasses, TextFieldProps, Theme, } from '@mui/material';
-export type { TouchRippleActions, TouchRippleProps } from '@mui/material/ButtonBase/TouchRipple';
-export type { CommonProps } from '@mui/material/OverridableComponent';
-export type { SxProps } from '@mui/system';

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/FormRenderer.stories.d.ts

@@ -9,7 +9,8 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     form: import("@evoke-platform/context").EvokeForm;
     title?: React.ReactNode;
     instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
         instanceId?: string | undefined;
         propertyId?: string | undefined;
@@ -29,7 +30,8 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
     form: import("@evoke-platform/context").EvokeForm;
     title?: React.ReactNode;
     instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
         instanceId?: string | undefined;
         propertyId?: string | undefined;
@@ -48,7 +50,8 @@ export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<impo
     form: import("@evoke-platform/context").EvokeForm;
     title?: React.ReactNode;
     instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
         instanceId?: string | undefined;
         propertyId?: string | undefined;
@@ -67,7 +70,8 @@ export declare const DocumentForm: import("@storybook/types").AnnotatedStoryFn<i
     form: import("@evoke-platform/context").EvokeForm;
     title?: React.ReactNode;
     instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: ((fieldId: string) => void | Promise<void>) | undefined;
     associatedObject?: {
         instanceId?: string | undefined;
         propertyId?: string | undefined;

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

@@ -52,6 +52,32 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
     renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
     sx?: import("@mui/material").SxProps<{}> | undefined;
 }>;
+export declare const DefaultForm: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
+    formId?: string | undefined;
+    instanceId?: string | undefined;
+    defaultPages?: Record<string, string> | undefined;
+    pageNavigation?: string | undefined;
+    documentId?: string | undefined;
+    dataType?: "documents" | "objectInstances" | undefined;
+    display?: {
+        fieldHeight?: "medium" | "small" | undefined;
+    } | undefined;
+    actionId?: string | undefined;
+    objectId: string;
+    richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
+    onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;
+    onDiscardChanges?: (() => void) | undefined;
+    onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
+    associatedObject?: {
+        instanceId?: string | undefined;
+        propertyId?: string | undefined;
+    } | undefined;
+    renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
+    renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
+    renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
+    renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
+    sx?: import("@mui/material").SxProps<{}> | undefined;
+}>;
 export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
     formId?: string | undefined;
     instanceId?: string | undefined;

package/dist/published/stories/FormRendererContainer.stories.js

@@ -46,6 +46,11 @@ export const Editable = Template.bind({});
 Editable.args = {
     ...mockProps,
 };
+export const DefaultForm = Template.bind({});
+DefaultForm.args = {
+    ...mockProps,
+    formId: undefined,
+};
 export const NoButtons = Template.bind({});
 NoButtons.args = {
     ...mockProps,

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;
+};