@evoke-platform/ui-components 1.16.0 → 1.18.0

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

@@ -562,6 +562,9 @@ const CriteriaBuilder = (props) => {
                     borderStyle: 'hidden',
                     background: '#fff',
                 },
+                '.ruleGroup:not(:has(.rule, .ruleGroup .ruleGroup))': {
+                    backgroundColor: 'transparent',
+                },
                 '.ruleGroup-header': {
                     display: 'block',
                 },

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

@@ -1,4 +1,4 @@
-import { ActionInput, ActionInputType, ApiServices, AxiosError, FormEntry, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType, UserAccount } from '@evoke-platform/context';
+import { ActionInput, ActionInputType, ApiServices, AxiosError, FormEntry, FormletReference, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType, UserAccount } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import { LocalDateTime } from '@js-joda/core';
 import { AutocompleteOption } from '../../core';
@@ -7,7 +7,7 @@ export declare function determineComponentType(properties: Property[], parameter
 export declare function determineParameterType(componentType: string): PropertyType;
 export declare function getFlattenEntries(entries: FormEntry[]): InputParameterReference[];
 export declare function convertFormToComponents(entries: FormEntry[], parameters: InputParameter[], object: Obj): ActionInput[];
-export declare function convertComponentsToForm(components: ActionInput[]): FormEntry[];
+export declare function convertComponentsToForm(components: ActionInput[]): Exclude<FormEntry, FormletReference>[];
 export declare function getMiddleObjectFilter(property: Property, instance: ObjectInstance): {
     where: {
         [x: string]: string;

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -48,7 +48,7 @@ const AddressFieldComponent = (props) => {
         !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: readOnly ? undefined : placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
-            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
+            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}), sx: { backgroundColor: 'white' } })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: 'none',

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

@@ -4,11 +4,17 @@ import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank, Help, ToggleOff, Toggle
 import { defaultTheme } from '../../../../theme/defaultTheme';
 import { Autocomplete, Checkbox, FormControl, FormControlLabel, FormHelperText, IconButton, Switch, TextField, Tooltip, Typography, } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
-const descriptionStyles = {
-    color: '#999 !important',
-    whiteSpace: 'normal',
-    paddingBottom: '4px',
-    marginX: 0,
+import { Box } from '../../../layout';
+const styles = {
+    descriptionStyles: { color: '#999 !important', whiteSpace: 'normal', paddingBottom: '4px', marginX: 0 },
+    checkboxIconBox: {
+        backgroundColor: 'white',
+        width: '18px',
+        height: '18px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
 };
 const BooleanSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, size, displayOption, label, strictlyTrue, tooltip, description, placeholder, onBlur, additionalProps, } = props;
@@ -31,7 +37,7 @@ const BooleanSelect = (props) => {
         },
     ];
     const descriptionComponent = () => {
-        return (description && (React.createElement(FormHelperText, { sx: descriptionStyles, component: Typography }, parse(description))));
+        return (description && (React.createElement(FormHelperText, { sx: styles.descriptionStyles, component: Typography }, parse(description))));
     };
     const labelComponent = () => {
         return (React.createElement(Typography, { component: "span", variant: "body2", sx: { wordWrap: 'break-word', ...defaultTheme.typography.body2 } },
@@ -58,7 +64,9 @@ const BooleanSelect = (props) => {
     return displayOption === 'dropdown' ? (React.createElement(Autocomplete, { renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, placeholder: placeholder, size: size ?? 'medium' })), value: booleanOptions.find((opt) => opt.value === value) ?? '', onChange: (e, selectedValue) => handleChange(selectedValue.value), isOptionEqualToValue: (option, val) => option?.value === val?.value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}), sortBy: "NONE", required: strictlyTrue })) : (React.createElement(FormControl, { required: strictlyTrue, error: error, fullWidth: true },
         React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), sx: { marginLeft: '-8px' }, control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
-                }, ...(additionalProps ?? {}) })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
+                }, ...(additionalProps ?? {}) })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), icon: React.createElement(Box, { sx: styles.checkboxIconBox },
+                    React.createElement(CheckBoxOutlineBlank, { fontSize: size ?? 'medium' })), checkedIcon: React.createElement(Box, { sx: styles.checkboxIconBox },
+                    React.createElement(CheckBoxIcon, { fontSize: size ?? 'medium' })), sx: {
                     alignSelf: 'start',
                     padding: '4px 9px 9px 9px',
                 }, ...(additionalProps ?? {}) })) }),

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

@@ -56,7 +56,6 @@ const InputFieldComponent = (props) => {
             : property.enum, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder })), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
         }, error: error, required: required, inputValue: inputValue ?? '', onInputChange: handleInputValueChange, ...(additionalProps ?? {}) })) : !mask || isValueProtected ? (React.createElement(TextField, { id: id, sx: {
-            background: 'white',
             borderRadius: '8px',
             ...(readOnly && {
                 '& .MuiOutlinedInput-notchedOutline': {
@@ -67,6 +66,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }),
+            backgroundColor: 'white',
         }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, endAdornment, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: readOnly ? undefined : placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {

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

@@ -161,7 +161,7 @@ const Select = (props) => {
             React.createElement(Typography, { variant: "caption" }, "Clear Selection"))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array', id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur, inputProps: {
                 ...params.inputProps,
                 'aria-describedby': isCombobox ? `${id}-instructions` : undefined,
-            } })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, filterOptions: (options, params) => {
+            }, sx: { backgroundColor: 'white', borderRadius: '8px' } })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, filterOptions: (options, params) => {
             const filtered = filter(options, params);
             const { inputValue } = params;
             // Suggest to the user to add a new value.

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

@@ -26,6 +26,7 @@ export type FormRendererProps = BaseProps & {
     };
     renderHeader?: (props: HeaderProps) => React.ReactNode;
     renderBody?: (props: BodyProps) => React.ReactNode;
+    readOnly?: boolean;
     renderFooter?: (props: FooterProps) => React.ReactNode;
 };
 export declare const FormRenderer: ((props: FormRendererProps) => React.JSX.Element) & {

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

@@ -14,7 +14,7 @@ import { assignIdsToSectionsAndRichText, convertPropertiesToParams, entryIsVisib
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 const FormRendererInternal = (props) => {
-    const { onSubmit, onDiscardChanges, onSubmitError: onSubmitErrorOverride, value, hideTitle = false, fieldHeight, richTextEditor, form, instance, onChange, onAutosave, associatedObject, renderHeader, renderBody, renderFooter, } = props;
+    const { onSubmit, onDiscardChanges, onSubmitError: onSubmitErrorOverride, value, hideTitle = false, fieldHeight, richTextEditor, form, instance, onChange, onAutosave, associatedObject, renderHeader, renderBody, renderFooter, readOnly, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
@@ -54,17 +54,17 @@ const FormRendererInternal = (props) => {
         enabled: !!objectId,
     });
     const updatedEntries = useMemo(() => {
-        return object ? assignIdsToSectionsAndRichText(entries, object, parameters) : [];
+        return assignIdsToSectionsAndRichText(entries, object, parameters);
     }, [entries, object, parameters]);
     useEffect(() => {
-        if (!object)
+        if (objectId && !object)
             return;
-        const action = object.actions?.find((a) => a.id === actionId);
+        const action = object?.actions?.find((a) => a.id === actionId);
         setAction(action);
         // if forms action is synced with object properties then convertPropertiesToParams
-        setParameters(action?.parameters ?? convertPropertiesToParams(object));
+        setParameters(action?.parameters ?? (object ? convertPropertiesToParams(object) : []));
         setIsInitializing(false);
-    }, [object, actionId]);
+    }, [object, actionId, objectId]);
     useEffect(() => {
         const currentValues = getValues();
         if (value) {
@@ -221,6 +221,7 @@ const FormRendererInternal = (props) => {
                     onCollapseAll: handleCollapseAll,
                     expandedSections,
                     hasAccordions: hasSections && isSmallerThanMd,
+                    readOnly,
                 })) : (React.createElement(Body, { ...{
                         isInitializing,
                         entries: updatedEntries,
@@ -230,8 +231,12 @@ const FormRendererInternal = (props) => {
                         onCollapseAll: handleCollapseAll,
                         expandedSections,
                         hasAccordions: hasSections && isSmallerThanMd,
+                        readOnly,
                     } })),
-                action && onSubmit && (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
+                readOnly !== true &&
+                    action &&
+                    onSubmit &&
+                    (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
 };
 export const FormRenderer = Object.assign(function FormRenderer(props) {
     return (React.createElement(ConditionalQueryClientProvider, null,

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

@@ -24,6 +24,7 @@ export type FormRendererContainerProps = BaseProps & {
     };
     display?: {
         fieldHeight?: 'small' | 'medium';
+        readOnly?: boolean;
     };
     actionId?: string;
     objectId: string;

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

@@ -1,6 +1,7 @@
 import { useApiServices, useApp, useAuthenticationContext, useNavigate, useObject, } from '@evoke-platform/context';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
+import { DepGraph } from 'dependency-graph';
 import { cloneDeep, get, isArray, isEmpty, isEqual, isObject, pick, set } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Skeleton, Snackbar } from '../../core';
@@ -9,9 +10,8 @@ import ErrorComponent from '../ErrorComponent';
 import ConditionalQueryClientProvider from './components/ConditionalQueryClientProvider';
 import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
 import Header from './components/Header';
-import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, extractAllCriteria, extractPresetValuesFromCriteria, extractPresetValuesFromDynamicDefaultValues, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, handleFileUpload, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
+import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, extractAllCriteria, extractPresetValuesFromCriteria, extractPresetValuesFromDynamicDefaultValues, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, handleFileUpload, getVisibleEditableFieldIds, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
 import FormRenderer from './FormRenderer';
-import { DepGraph } from 'dependency-graph';
 // Wrapper to provide QueryClient context for FormRendererContainer if this is not a nested form
 function FormRendererContainer(props) {
     return (React.createElement(ConditionalQueryClientProvider, null,
@@ -110,10 +110,16 @@ function FormRendererContainerInner(props) {
         setError(code ?? err);
     };
     const { data: sanitizedObject, error: sanitizedObjectError } = useQuery({
-        queryKey: [form?.objectId ?? objectId, ...(instanceId ? [instanceId] : []), 'sanitized'],
+        queryKey: [
+            form?.objectId ?? objectId,
+            ...(instanceId ? [instanceId] : []),
+            display?.readOnly ? 'unsanitized' : 'sanitized',
+        ],
         queryFn: () => 
         // form?.objectId is needed for subtype forms to get the correct object
-        apiServices.get(getPrefixedUrl(`/objects/${form?.objectId ?? objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } }),
+        apiServices.get(getPrefixedUrl(`/objects/${form?.objectId ?? objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), 
+        // when the form is readonly the action is still needed, so we need to get the unsanitized object
+        { params: { sanitizedVersion: display?.readOnly ? false : true } }),
         staleTime: Infinity,
         enabled: !!(form?.objectId || objectId),
     });
@@ -164,7 +170,11 @@ function FormRendererContainerInner(props) {
                     set(result, fieldId, fieldValue);
                 }
             }
-            else if (entry.type !== 'sections' && entry.type !== 'columns' && entry.type !== 'content') {
+            else if (entry.type !== 'sections' &&
+                entry.type !== 'columns' &&
+                entry.type !== 'content' &&
+                // there cannot be formlets here since the `form` is the effective form
+                entry.type !== 'formlet') {
                 const parameter = parameters?.find((param) => param.id === fieldId);
                 if (associatedObject &&
                     'propertyId' in associatedObject &&
@@ -185,9 +195,6 @@ function FormRendererContainerInner(props) {
                         console.error(error);
                     }
                 }
-                else if (entry.type === 'formlet') {
-                    // TODO: this should eventually fetch the formletId then get the fields and default values of those fields
-                }
                 else if (entry.type !== 'readonlyField') {
                     if (isEmptyWithDefault(fieldValue, entry, result)) {
                         if (fieldId && parameters && parameters.length > 0) {
@@ -227,28 +234,39 @@ function FormRendererContainerInner(props) {
             }
         }
         return result;
-    }, [action, parameters, associatedObject, uniquePresetValues, formDataRef, apiServices, userAccount]);
+    }, [action, associatedObject, uniquePresetValues, formDataRef, apiServices, userAccount]);
     useEffect(() => {
-        if (!sanitizedObject)
+        if (!sanitizedObject) {
             return;
-        const allCriterias = extractAllCriteria(flattenFormEntries, parameters || []);
-        const uniquePresetValues = new Set();
-        for (const criteria of allCriterias) {
-            const presetValues = extractPresetValuesFromCriteria(criteria);
-            presetValues.forEach((value) => uniquePresetValues.add(value));
         }
-        extractPresetValuesFromDynamicDefaultValues(flattenFormEntries).map((value) => uniquePresetValues.add(value));
-        setUniquePresetValues(Array.from(uniquePresetValues));
         const action = sanitizedObject.actions?.find((a) => a.id === (form?.actionId || actionId));
         if (action && (instanceId || action.type === 'create')) {
             setAction(action);
-            // Clear error if action is found after being missing
             setError((prevError) => (prevError === 'Action could not be found' ? undefined : prevError));
+            const getParamsFromObject = !action.parameters;
+            const parameters = (getParamsFromObject ? convertPropertiesToParams(sanitizedObject) : action.parameters) ?? [];
+            setParameters(parameters.filter((param) => param.type !== 'collection' && !param.formula));
         }
         else {
             setError('Action could not be found');
+            setAction(undefined);
+            setParameters([]);
+        }
+    }, [sanitizedObject, actionId, form?.actionId, instanceId]);
+    useEffect(() => {
+        if (!flattenFormEntries.length || !parameters.length) {
+            setUniquePresetValues([]);
+            return;
         }
-    }, [sanitizedObject, actionId, form?.actionId, instanceId, flattenFormEntries, parameters]);
+        const allCriterias = extractAllCriteria(flattenFormEntries, parameters);
+        const uniquePresetValues = new Set();
+        for (const criteria of allCriterias) {
+            const presetValues = extractPresetValuesFromCriteria(criteria);
+            presetValues.forEach((value) => uniquePresetValues.add(value));
+        }
+        extractPresetValuesFromDynamicDefaultValues(flattenFormEntries).forEach((value) => uniquePresetValues.add(value));
+        setUniquePresetValues(Array.from(uniquePresetValues));
+    }, [flattenFormEntries, parameters]);
     const { data: navigationSlug } = useQuery({
         queryKey: [appId, 'navigationSlug'],
         queryFn: () => apiServices.get(getPrefixedUrl(`/apps/${appId}/pages/${encodePageSlug(pageNavigation)}`)),
@@ -293,14 +311,6 @@ function FormRendererContainerInner(props) {
         if (error)
             onError(error);
     }, [sanitizedObjectError, fetchedFormError, instanceError]);
-    useEffect(() => {
-        if (!form || !action)
-            return;
-        // If no parameters are defined, then the action is synced with object properties
-        const getParamsFromObject = sanitizedObject && !action.parameters;
-        const parameters = (getParamsFromObject ? convertPropertiesToParams(sanitizedObject) : action.parameters) ?? [];
-        setParameters(parameters.filter((param) => param.type !== 'collection' && !param.formula));
-    }, [form, action?.parameters, sanitizedObject]);
     useEffect(() => {
         const getInitialValues = async () => {
             if (flattenFormEntries.length && (instance || !instanceId)) {
@@ -309,6 +319,10 @@ function FormRendererContainerInner(props) {
                 // Deep clone to avoid reference issues
                 setLastSavedData(cloneDeep(defaultValues));
             }
+            else {
+                // if there is a form with no entries
+                setFormData({});
+            }
         };
         getInitialValues();
     }, [instanceId, instance, flattenFormEntries, getDefaultValues]);
@@ -394,7 +408,7 @@ function FormRendererContainerInner(props) {
             }
             else if (instanceId && action) {
                 let response = undefined;
-                if ((await objectStore.get()).rootObjectId === 'sys__file') {
+                if ((await objectStore.get()).rootObjectId === 'sys__file' && action.type !== 'delete') {
                     response = await handleFileUpload(apiServices, submission, action.id, objectId, instanceId);
                 }
                 else {
@@ -447,6 +461,12 @@ function FormRendererContainerInner(props) {
         if (!form?.autosaveActionId || !formDataRef.current) {
             return;
         }
+        const visibleEditableFieldIds = getVisibleEditableFieldIds(form.entries ?? [], instance, formDataRef.current);
+        const allowedParameterIds = parameters?.filter((parameter) => parameter.type !== 'collection').map((parameter) => parameter.id) ?? [];
+        const autosaveFieldIds = visibleEditableFieldIds.filter((id) => allowedParameterIds.includes(id));
+        if (!autosaveFieldIds.includes(fieldId)) {
+            return;
+        }
         const currentValue = get(formDataRef.current, fieldId);
         const lastValue = get(lastSavedData, fieldId);
         if (isEqual(currentValue, lastValue)) {
@@ -455,7 +475,8 @@ function FormRendererContainerInner(props) {
         try {
             setIsSaving(true);
             const cleanedData = removeUneditedProtectedValues(formDataRef.current);
-            const submission = await formatSubmission(cleanedData, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
+            const scopedData = pick(cleanedData, autosaveFieldIds);
+            const submission = await formatSubmission(scopedData, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
             // Handle object instance autosave
             if (instanceId && action?.type === 'update') {
                 const pickedSubmission = pick(submission, sanitizedObject?.properties
@@ -508,7 +529,7 @@ function FormRendererContainerInner(props) {
             setFormData(newData);
         }
     }
-    const isLoading = (instanceId && !formDataRef.current) || !form || !sanitizedObject;
+    const isLoading = !form || !sanitizedObject || (instanceId && formDataRef.current === undefined);
     const status = error ? 'error' : isLoading ? 'loading' : 'ready';
     // Compose a header renderer that injects the saving indicator into the rendered header
     const composedRenderHeader = (props) => {
@@ -532,7 +553,7 @@ function FormRendererContainerInner(props) {
             border: !isLoading ? '1px solid #dbe0e4' : undefined,
             ...sx,
         } }, !isLoading ? (React.createElement(React.Fragment, null,
-        React.createElement(FormRenderer, { onSubmit: onSubmit ? async (data) => await onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, hideTitle: title?.hidden, fieldHeight: display?.fieldHeight ?? 'medium', value: formDataRef.current, form: form, instance: instance, onChange: onChange, onAutosave: onAutosave, associatedObject: associatedObject && 'propertyId' in associatedObject ? associatedObject : undefined, renderHeader: composedRenderHeader, renderBody: renderBody, renderFooter: renderFooter }))) : (React.createElement(Box, { sx: { padding: '20px' } },
+        React.createElement(FormRenderer, { onSubmit: onSubmit ? async (data) => await onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, hideTitle: title?.hidden, fieldHeight: display?.fieldHeight ?? 'medium', value: formDataRef.current, form: form, instance: instance, onChange: onChange, onAutosave: onAutosave, associatedObject: associatedObject && 'propertyId' in associatedObject ? associatedObject : undefined, renderHeader: composedRenderHeader, renderBody: renderBody, renderFooter: renderFooter, readOnly: display?.readOnly ?? false }))) : (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' } })),

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

@@ -13,6 +13,7 @@ export type BodyProps = {
     onExpandAll?: () => void;
     onCollapseAll?: () => void;
     sx?: SxProps;
+    readOnly?: boolean;
 };
 export declare const Body: React.FC<BodyProps>;
 export default Body;

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

@@ -3,9 +3,11 @@ import { FormContext } from '../..';
 import useWidgetSize from '../../../../theme/hooks';
 import { Skeleton } from '../../../core';
 import Box from '../../../layout/Box/Box';
+import ViewDetailsEntryRenderer from '../../ViewDetailsV2/InstanceEntryRenderer';
 import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
+import { convertToReadOnly } from './utils';
 export const Body = (props) => {
-    const { entries, isInitializing, sx } = props;
+    const { entries, isInitializing, sx, readOnly } = props;
     const { width } = useContext(FormContext);
     const { breakpoints } = useWidgetSize({
         scroll: false,
@@ -22,6 +24,6 @@ export const Body = (props) => {
             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(Box, { sx: { paddingX: isSm || isXs ? 2 : 3, paddingY: isSm || isXs ? '6px' : '14px', ...sx } }, entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry })))))));
+            React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } })))) : (React.createElement(Box, { sx: { paddingX: isSm || isXs ? 2 : 3, paddingY: isSm || isXs ? '6px' : '14px', ...sx } }, entries.map((entry, index) => readOnly === true ? (React.createElement(ViewDetailsEntryRenderer, { key: index, entry: convertToReadOnly(entry) })) : (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry })))))));
 };
 export default Body;

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

@@ -85,6 +85,9 @@ export const DropdownRepeatableFieldInput = (props) => {
                             : undefined),
                     }, onChange: (event) => {
                         setSearchValue(event.target.value);
+                    }, sx: {
+                        backgroundColor: 'white',
+                        borderRadius: '8px',
                     } })),
                 loading,
                 sortBy: 'NONE',

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

@@ -1,6 +1,6 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { get, omit, startCase } from 'lodash';
+import { get, pick, startCase } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import sift from 'sift';
@@ -308,10 +308,12 @@ const RepeatableField = (props) => {
             const relatedObjectId = relatedObject?.id;
             try {
                 let response = undefined;
-                const submission = omit(input, relatedObject?.properties
-                    ?.filter((property) => property.formula || property.type === 'collection')
-                    .map((property) => property.id) ?? []);
-                if (relatedObject?.rootObjectId === 'sys__file' && action?.id) {
+                const actionParameters = action?.parameters ?? (relatedObject ? convertPropertiesToParams(relatedObject) : undefined) ?? [];
+                const allowedFieldIds = actionParameters
+                    .filter((param) => param.type !== 'collection')
+                    .map((param) => param.id);
+                const submission = pick(input, allowedFieldIds);
+                if (relatedObject?.rootObjectId === 'sys__file' && action?.id && action?.type !== 'delete') {
                     response = await handleFileUpload(apiServices, submission, action.id, relatedObjectId, selectedInstanceId);
                 }
                 else {
@@ -472,7 +474,7 @@ const RepeatableField = (props) => {
                         React.createElement(TableRow, null,
                             columns?.map((prop) => (React.createElement(TableCell, { sx: styles.tableCell }, prop.name))),
                             canUpdateProperty && React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
-                    React.createElement(TableBody, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
+                    React.createElement(TableBody, { sx: { backgroundColor: 'white' } }, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
                         columns?.map((prop) => {
                             return (React.createElement(TableCell, { sx: { fontSize: '16px' } }, prop.type === 'document' ? (React.createElement(DocumentViewerCell, { instance: relatedInstance, propertyId: prop.id, setSnackbarError: setSnackbarError })) : (React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
                                     ? {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js

@@ -126,6 +126,7 @@ export const Document = (props) => {
                 border: `1px dashed ${error ? 'red' : uploadDisabled ? '#DFE3E8' : '#858585'}`,
                 position: 'relative',
                 cursor: uploadDisabled ? 'cursor' : 'pointer',
+                backgroundColor: 'white',
             }, ...getRootProps(), onClick: open },
             React.createElement("input", { ...getInputProps({ id }), disabled: uploadDisabled, ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined) }),
             React.createElement(Grid, { container: true, sx: { width: '100%' } },

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Image.js

@@ -29,6 +29,7 @@ const styles = {
         border: '1px dashed #858585',
         position: 'relative',
         cursor: 'pointer',
+        backgroundColor: 'white',
     },
     icon: {
         color: '#fff',

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.js

@@ -141,6 +141,8 @@ const UserProperty = (props) => {
                         },
                     }
                     : {}),
+                backgroundColor: 'white',
+                borderRadius: '8px',
             } })), size: fieldHeight ?? 'medium', readOnly: readOnly, error: error })));
 };
 export default UserProperty;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FormletReference } from '@evoke-platform/context';
+declare function FormletRenderer(props: {
+    entry: FormletReference;
+    readOnly?: boolean;
+}): React.JSX.Element;
+export default FormletRenderer;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useApiServices } from '@evoke-platform/context';
+import { convertToReadOnly, getPrefixedUrl } from './utils';
+import { useQuery } from '@tanstack/react-query';
+import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
+import { Skeleton } from '../../../core';
+import ViewDetailsEntryRenderer from '../../ViewDetailsV2/InstanceEntryRenderer';
+import MisconfiguredErrorMessage from './MisconfiguredErrorMessage';
+function FormletRenderer(props) {
+    const { entry, readOnly } = props;
+    const apiServices = useApiServices();
+    const { data: formlet, isLoading } = useQuery({
+        queryKey: [entry.formletId, 'formlet'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/formlets/${entry.formletId}`)),
+        staleTime: Infinity,
+        enabled: !!entry.formletId,
+    });
+    if (isLoading)
+        return React.createElement(Skeleton, null);
+    return formlet ? (React.createElement(React.Fragment, null, formlet.entries?.map((formletEntry, index) => readOnly === true ? (React.createElement(ViewDetailsEntryRenderer, { key: index, entry: convertToReadOnly(formletEntry) })) : (React.createElement(RecursiveEntryRenderer, { key: index, entry: formletEntry }))))) : (React.createElement(MisconfiguredErrorMessage, null));
+}
+export default FormletRenderer;

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

@@ -33,14 +33,21 @@ const HtmlView = ({ value }) => {
         quillRef.current.setContents([]);
         quillRef.current.clipboard.dangerouslyPasteHTML(DOMPurify.sanitize(value));
     }, [value]);
-    return (React.createElement(Box, { sx: {
-            width: '100%',
-            height: '100%',
-            '.ql-container.ql-snow': {
-                border: 'none',
-                minHeight: 20,
-            },
-        } },
-        React.createElement("div", { ref: containerRef })));
+    return (
+    // Needs to be wrapped in a Box to prevent quill from setting height: 100% on the container, which causes it to overflow its parent and ignore the maxHeight we set on the containerRef (only happens when in a grid item)
+    React.createElement(Box, null,
+        React.createElement(Box, { sx: {
+                width: '100%',
+                height: '100%',
+                '.ql-container.ql-snow': {
+                    border: 'none',
+                    minHeight: 20,
+                },
+                // Override Quill list markers for correct display
+                '.ql-editor ol li:before': {
+                    content: '""',
+                },
+            } },
+            React.createElement("div", { ref: containerRef }))));
 };
 export default HtmlView;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function MisconfiguredErrorMessage(): React.JSX.Element;

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

@@ -0,0 +1,15 @@
+import { WarningRounded } from '../../../../icons';
+import { Typography } from '../../../core';
+import { Box } from '../../../layout';
+import React from 'react';
+export default function MisconfiguredErrorMessage() {
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            backgroundColor: '#ffc1073b',
+            borderRadius: '8px',
+            padding: '16.5px 14px',
+            marginTop: '6px',
+        } },
+        React.createElement(WarningRounded, { sx: { paddingRight: '8px' }, color: "warning" }),
+        React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "This field was not configured correctly")));
+}