@evoke-platform/ui-components 1.7.0-testing.8 → 1.8.0-dev.0

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

@@ -140,20 +140,32 @@ function FormRenderer(props) {
                                 fontWeight: 400,
                                 fontSize: '14px',
                             }, onClick: handleCollapseAll }, "Collapse all")))),
-                React.createElement(ValidationErrorDisplay, { errors: errors, show: !!(isSubmitted && errors), formId: form.id, title: title })),
+                React.createElement(ValidationErrorDisplay, { formId: form.id, title: title })),
             React.createElement(FormContext.Provider, { value: {
                     fetchedOptions,
                     setFetchedOptions: updateFetchedOptions,
                     getValues,
                     stickyFooter,
                     object,
+                    errors,
+                    instance,
+                    richTextEditor,
+                    expandedSections,
+                    setExpandedSections,
+                    expandAll,
+                    setExpandAll,
+                    parameters,
+                    fieldHeight,
+                    handleChange: onChange,
+                    triggerFieldReset,
+                    showSubmitError: isSubmitted,
                 } },
                 React.createElement(Box, { sx: {
                         padding: isModal ? '0px' : isSm || isXs ? 2 : 3,
                         paddingBottom: '0px',
                         paddingTop: !hasSections ? undefined : '0px',
                     } },
-                    entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { fieldHeight: fieldHeight, key: index, entry: entry, handleChange: onChange, errors: errors, showSubmitError: !!(isSubmitted && errors), instance: instance, richTextEditor: richTextEditor, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, triggerFieldReset: triggerFieldReset, parameters: parameters, isDocument: !!(form.id === 'documentForm') }))),
+                    entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry, isDocument: !!(form.id === 'documentForm') }))),
                     !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
                             ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
                             bottom: isModal ? -5 : isSmallerThanMd ? 0 : 24,
@@ -169,7 +181,7 @@ function FormRenderer(props) {
                             marginBottom: '1px',
                             borderRadius: '0px 0px 6px 6px',
                         } },
-                        React.createElement(ActionButtons, { onSubmit: onSubmit, handleSubmit: handleSubmit, isModal: isModal, actionType: action?.type, submitButtonLabel: display?.submitLabel, onReset: handleReset, errors: errors, unregister: unregister, entries: entries, setValue: setValue, formId: form.id, instance: instance })))))));
+                        React.createElement(ActionButtons, { onSubmit: onSubmit, handleSubmit: handleSubmit, isModal: isModal, actionType: action?.type, submitButtonLabel: display?.submitLabel, onReset: handleReset, unregister: unregister, entries: entries, setValue: setValue, formId: form.id })))))));
     }
     else {
         return (React.createElement(Box, { p: 2 },

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

@@ -463,12 +463,7 @@ function FormRendererContainer(props) {
         })();
     }
     const isLoading = (instanceId && !formData && !document) || !form || !sanitizedObject;
-    return !error ? (React.createElement(Box, { sx: {
-            backgroundColor: '#ffffff',
-            borderRadius: '6px',
-            padding: '0px',
-            border: !isLoading ? '1px solid #dbe0e4' : undefined,
-        } },
+    return !error ? (React.createElement(React.Fragment, null,
         !isLoading ? (React.createElement(React.Fragment, null,
             React.createElement(FormRenderer, { onSubmit: saveHandler, hideButtons: document && !hasDocumentUpdateAccess, richTextEditor: richTextEditor, fieldHeight: display?.fieldHeight ?? 'medium', value: formData, stickyFooter: stickyFooter, form: form, instance: dataType !== 'documents' ? instance : document, onChange: onChange, onCancel: onCancel }))) : (React.createElement(Box, { sx: { padding: '20px' } },
             React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },

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

@@ -2,13 +2,15 @@ import { ExpandMoreOutlined } from '@mui/icons-material';
 import { nanoid } from 'nanoid';
 import React, { useEffect } from 'react';
 import { useResponsive } from '../../../../theme';
+import { useFormContext } from '../../../../theme/hooks';
 import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../../core';
 import { Box } from '../../../layout';
 import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
 import { getErrorCountForSection } from './utils';
 function AccordionSections(props) {
-    const { entry, handleChange, fieldHeight, richTextEditor, instance, expandedSections, setExpandedSections, expandAll, setExpandAll, errors, parameters, triggerFieldReset, showSubmitError, } = props;
+    const { entry } = props;
     const { isMd, isLg, isXl } = useResponsive();
+    const { errors, expandedSections, setExpandedSections, expandAll, setExpandAll, showSubmitError } = useFormContext();
     const lastSection = entry.sections.length - 1;
     const sectionsWithIds = React.useMemo(() => assignIds(entry.sections), [entry]);
     function collectNestedSections(entries = []) {
@@ -65,17 +67,18 @@ function AccordionSections(props) {
     }
     useEffect(() => {
         if (expandAll !== null) {
-            setExpandedSections(getExpandedSections(sectionsWithIds, expandAll));
+            setExpandedSections && setExpandedSections(getExpandedSections(sectionsWithIds, expandAll));
         }
     }, [expandAll, sectionsWithIds]);
     const handleAccordionChange = (id) => {
-        const updatedSections = expandedSections.map((section) => section.id === id ? { ...section, expanded: !section.expanded } : section);
-        setExpandedSections(updatedSections);
-        setExpandAll(null);
+        const updatedSections = expandedSections?.map((section) => section.id === id ? { ...section, expanded: !section.expanded } : section);
+        if (setExpandedSections && updatedSections)
+            setExpandedSections(updatedSections);
+        setExpandAll && setExpandAll(null);
     };
     return (React.createElement(Box, null, sectionsWithIds.map((section, sectionIndex) => {
         const errorCount = getErrorCountForSection(section, errors);
-        return (React.createElement(Accordion, { key: section.id, expanded: expandedSections.find((expandedSection) => expandedSection.id === section.id)?.expanded ??
+        return (React.createElement(Accordion, { key: section.id, expanded: expandedSections?.find((expandedSection) => expandedSection.id === section.id)?.expanded ??
                 !!expandAll, onChange: () => handleAccordionChange(section.id), defaultExpanded: sectionIndex === 0, sx: {
                 border: '1px solid #dbe0e4',
                 boxShadow: 'none',
@@ -125,7 +128,7 @@ function AccordionSections(props) {
                             margin: '0px',
                             marginRight: '16px',
                         } }, errorCount)))),
-            React.createElement(AccordionDetails, null, section.entries?.map((sectionEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry, handleChange: handleChange, errors: errors, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, parameters: parameters, triggerFieldReset: triggerFieldReset, showSubmitError: showSubmitError }))))));
+            React.createElement(AccordionDetails, null, section.entries?.map((sectionEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry }))))));
     })));
 }
 export default AccordionSections;

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

@@ -1,6 +1,6 @@
 import { ActionType, FormEntry } from '@evoke-platform/context';
 import React from 'react';
-import { FieldErrors, FieldValues, UseFormReturn, UseFormSetValue, UseFormUnregister } from 'react-hook-form';
+import { FieldValues, UseFormReturn, UseFormSetValue, UseFormUnregister } from 'react-hook-form';
 type ActionButtonProps = {
     onSubmit: (data: FieldValues) => void;
     handleSubmit: UseFormReturn['handleSubmit'];
@@ -8,12 +8,10 @@ type ActionButtonProps = {
     submitButtonLabel?: string;
     actionType?: ActionType;
     onReset: () => void;
-    errors?: FieldErrors;
     unregister: UseFormUnregister<FieldValues>;
     entries: FormEntry[];
     setValue: UseFormSetValue<FieldValues>;
     formId?: string;
-    instance?: FieldValues;
 };
 declare function ActionButtons(props: ActionButtonProps): React.JSX.Element;
 export default ActionButtons;

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

@@ -6,10 +6,10 @@ import { Box } from '../../../layout';
 import { FormContext } from './FormContext';
 import { entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, scrollIntoViewWithOffset, } from './utils';
 function ActionButtons(props) {
-    const { onSubmit, submitButtonLabel, actionType, handleSubmit, onReset, unregister, errors, isModal, entries, setValue, formId, instance, } = props;
+    const { onSubmit, submitButtonLabel, actionType, handleSubmit, onReset, unregister, isModal, entries, setValue, formId, } = props;
     const { isXs } = useResponsive();
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const { getValues } = useContext(FormContext);
+    const { getValues, instance, errors } = useContext(FormContext);
     const unregisterHiddenFields = (entriesToCheck) => {
         entriesToCheck.forEach((entry) => {
             if (entry.type === 'sections' || entry.type === 'columns') {
@@ -35,11 +35,12 @@ function ActionButtons(props) {
     };
     const processFieldUnregister = (fieldId) => {
         if (isAddressProperty(fieldId)) {
-            // Unregister entire 'address' to clear hidden field errors, then restore existing values since unregistering address.line1 etc is not working
-            let addressValues = getValues('address');
-            addressValues = omit(addressValues, fieldId.split('.')[1]);
-            unregister('address');
-            setValue('address', addressValues);
+            // Unregister entire addressObject to clear hidden field errors, then restore existing values since unregistering address.line1 etc is not working
+            const [addressObject, addressField] = fieldId.split('.');
+            let addressValues = getValues(addressObject);
+            addressValues = omit(addressValues, addressField);
+            unregister(addressObject);
+            setValue(addressObject, addressValues);
         }
         else {
             unregister(fieldId);

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

@@ -13,7 +13,6 @@ type FieldWrapperProps = {
     viewOnly: boolean;
     children: ReactNode;
     required: boolean;
-    fieldHeight?: 'small' | 'medium';
     maxLength?: number;
 };
 /**

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

@@ -1,5 +1,6 @@
 import { Help, InfoRounded } from '@mui/icons-material';
 import React from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { IconButton, InputLabel, Tooltip, Typography } from '../../../core';
 import { Box } from '../../../layout';
 const underFieldStyles = {
@@ -48,7 +49,8 @@ const PrefixSuffix = (props) => {
  * description, tooltip, prefix, suffix and word/char counts
  */
 const FieldWrapper = (props) => {
-    const { inputId, label, description, tooltip, prefix, suffix, value, maxLength, errorMessage, showCharCount, inputType, viewOnly, children, fieldHeight, required, } = props;
+    const { inputId, label, description, tooltip, prefix, suffix, value, maxLength, errorMessage, showCharCount, inputType, viewOnly, children, required, } = props;
+    const { fieldHeight } = useFormContext();
     const charCount = typeof value === 'string' ? value.length : 0;
     const remainingChars = maxLength ? maxLength - charCount : undefined;
     return (React.createElement(Box, null,

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

@@ -1,12 +1,25 @@
-/// <reference types="react" />
-import { Obj } from '@evoke-platform/context';
+import { InputParameter, Obj } from '@evoke-platform/context';
+import { ComponentType } from 'react';
 import { FieldValues, UseFormGetValues } from 'react-hook-form';
+import { ExpandedSection, SimpleEditorProps } from './types';
 type FormContextType = {
     fetchedOptions: FieldValues;
     setFetchedOptions: (newData: FieldValues) => void;
     getValues: UseFormGetValues<FieldValues>;
     stickyFooter?: boolean;
     object?: Obj;
+    errors?: FieldValues;
+    instance?: FieldValues;
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    expandAll?: boolean | undefined | null;
+    expandedSections?: ExpandedSection[];
+    setExpandedSections?: React.Dispatch<React.SetStateAction<ExpandedSection[]>>;
+    setExpandAll?: React.Dispatch<React.SetStateAction<boolean | undefined | null>>;
+    parameters?: InputParameter[];
+    handleChange: (name: string, value: unknown) => void;
+    fieldHeight?: 'small' | 'medium';
+    triggerFieldReset?: boolean;
+    showSubmitError?: boolean;
 };
 export declare const FormContext: import("react").Context<FormContextType>;
 export {};

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

@@ -5,4 +5,13 @@ export const FormContext = createContext({
     getValues: (() => ({})),
     stickyFooter: false,
     object: undefined,
+    errors: {},
+    instance: {},
+    expandAll: undefined,
+    expandedSections: [],
+    parameters: [],
+    showSubmitError: false,
+    triggerFieldReset: false,
+    handleChange: () => { },
+    fieldHeight: 'medium',
 });

package/dist/published/components/custom/FormV2/components/FormFieldTypes/AddressFields.d.ts

@@ -1,15 +1,8 @@
 import { InputField, InputParameter, InputParameterReference, Property, ReadonlyField } from '@evoke-platform/context';
 import React from 'react';
-import { FieldErrors, FieldValues } from 'react-hook-form';
-import { Address } from '../../../FormField/AddressFieldComponent';
 interface AddressProps {
     entry: InputParameterReference | ReadonlyField | InputField;
-    errors?: FieldErrors;
-    handleChange: (propertyId: string, value: string | Address | undefined) => void;
-    fieldHeight?: 'small' | 'medium';
     readOnly?: boolean;
-    parameters?: InputParameter[];
-    instance?: FieldValues;
     entryId: string;
     fieldDefinition: InputParameter | Property;
 }

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

@@ -6,8 +6,8 @@ import FormField from '../../../FormField';
 import FieldWrapper from '../FieldWrapper';
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 function AddressFields(props) {
-    const { entry, errors, handleChange, fieldHeight, readOnly, parameters, instance, entryId, fieldDefinition } = props;
-    const { getValues } = useFormContext();
+    const { entry, readOnly, entryId, fieldDefinition } = props;
+    const { getValues, instance, errors, handleChange, fieldHeight, parameters } = useFormContext();
     const apiServices = useApiServices();
     const addressObject = entryId.split('.')[0];
     const addressField = entryId.split('.')[1];

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/DropdownRepeatableField.d.ts

@@ -1,15 +1,12 @@
 import { ObjWithRoot as EvokeObjectWithRoot, InputParameter, ObjectInstance, Property, ViewLayoutEntityReference } from '@evoke-platform/context';
 import React from 'react';
-import { FieldValues } from 'react-hook-form';
 export type DropdownRepeatableFieldProps = {
     id: string;
     fieldDefinition: InputParameter | Property;
-    instance?: FieldValues;
     criteria?: object;
     readOnly: boolean;
     initialMiddleObjectInstances: ObjectInstance[];
     middleObject: EvokeObjectWithRoot;
-    fieldHeight?: 'small' | 'medium';
     hasDescription?: boolean;
     viewLayout?: ViewLayoutEntityReference;
 };

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

@@ -7,8 +7,8 @@ import { retrieveCustomErrorMessage } from '../../../../Form/utils';
 import { getMiddleObject, getMiddleObjectFilter, getPrefixedUrl, transformToWhere } from '../../utils';
 import { DropdownRepeatableFieldInput } from './DropdownRepeatableFieldInput';
 const DropdownRepeatableField = (props) => {
-    const { id, fieldDefinition, criteria, instance, readOnly, initialMiddleObjectInstances, middleObject, fieldHeight, hasDescription, viewLayout, } = props;
-    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const { id, fieldDefinition, criteria, readOnly, initialMiddleObjectInstances, middleObject, hasDescription, viewLayout, } = props;
+    const { fetchedOptions, setFetchedOptions, instance } = useFormContext();
     const [layout, setLayout] = useState();
     const [loading, setLoading] = useState(false);
     const [layoutLoaded, setLayoutLoaded] = useState(false);
@@ -228,6 +228,6 @@ const DropdownRepeatableField = (props) => {
             });
         }
     };
-    return initialLoading || !middleObject || !middleObjectInstances || !endObjectInstances || !endObject ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, fieldDefinition: fieldDefinition, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight, hasDescription: hasDescription }))));
+    return initialLoading || !middleObject || !middleObjectInstances || !endObjectInstances || !endObject ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, fieldDefinition: fieldDefinition, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, hasDescription: hasDescription }))));
 };
 export default DropdownRepeatableField;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/DropdownRepeatableFieldInput.d.ts

@@ -11,7 +11,6 @@ type DropdownRepeatableFieldInputProps = {
     endObject: Pick<Obj, 'id' | 'name' | 'properties'>;
     searchValue: string;
     loading: boolean;
-    fieldHeight?: 'small' | 'medium';
     handleSaveMiddleInstance: (endObjectId: string, endObjectName: string) => void;
     handleRemoveMiddleInstance: (instanceId: string) => void;
     setSearchValue: (value: string) => void;

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

@@ -1,12 +1,14 @@
 import { difference, isEmpty, isObject } from 'lodash';
 import Handlebars from 'no-eval-handlebars';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../../../theme/hooks';
 import { Snackbar, TextField, Typography } from '../../../../../core';
 import FormField from '../../../../FormField';
 import { normalizeDates } from '../../utils';
 const isDropdownRepeatableFieldInputOption = (option) => isObject(option) && 'label' in option && 'endObjectId' in option;
 export const DropdownRepeatableFieldInput = (props) => {
-    const { id, fieldDefinition, readOnly, layout, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, fieldHeight, hasDescription, } = props;
+    const { id, fieldDefinition, readOnly, layout, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, hasDescription, } = props;
+    const { fieldHeight } = useFormContext();
     const [selectOptions, setSelectOptions] = useState([]);
     useEffect(() => {
         setDropdownSelections && setDropdownSelections(middleObjectInstances);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.d.ts

@@ -1,9 +1,7 @@
 import { InputParameter, Property, ViewLayoutEntityReference } from '@evoke-platform/context';
 import React from 'react';
-import { FieldValues } from 'react-hook-form';
 export type ObjectPropertyInputProps = {
     fieldDefinition: InputParameter | Property;
-    instance?: FieldValues;
     canUpdateProperty: boolean;
     criteria?: object;
     viewLayout?: ViewLayoutEntityReference;

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

@@ -36,8 +36,8 @@ const styles = {
     },
 };
 const RepeatableField = (props) => {
-    const { fieldDefinition, instance, canUpdateProperty, criteria, viewLayout } = props;
-    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const { fieldDefinition, canUpdateProperty, criteria, viewLayout } = props;
+    const { fetchedOptions, setFetchedOptions, instance } = useFormContext();
     const { instanceChanges } = useNotification();
     const apiServices = useApiServices();
     const { smallerThan } = useResponsive();

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Criteria.d.ts

@@ -3,7 +3,6 @@ import React from 'react';
 type CriteriaProps = {
     fieldDefinition: InputParameter | Property;
     value?: CriteriaValue | null;
-    handleChange: (propertyId: string, value: CriteriaValue | null) => void;
     canUpdateProperty: boolean;
     error?: boolean;
 };

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

@@ -6,9 +6,9 @@ import { Box } from '../../../../layout';
 import CriteriaBuilder from '../../../CriteriaBuilder';
 import { addressProperties, getPrefixedUrl } from '../utils';
 export default function Criteria(props) {
-    const { handleChange, value, canUpdateProperty, fieldDefinition, error } = props;
+    const { value, canUpdateProperty, fieldDefinition, error } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, handleChange } = useFormContext();
     const [loadingError, setLoadingError] = useState(false);
     const [loading, setLoading] = useState(false);
     const [properties, setProperties] = useState(fetchedOptions[`${fieldDefinition.id}Options`] || []);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.d.ts

@@ -1,11 +1,8 @@
 import { DocumentParameterValidation } from '@evoke-platform/context';
 import React from 'react';
-import { FieldValues } from 'react-hook-form';
 import { SavedDocumentReference } from '../../types';
 type DocumentProps = {
     id: string;
-    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
-    instance?: FieldValues;
     canUpdateProperty: boolean;
     error: boolean;
     validate?: DocumentParameterValidation;

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

@@ -10,9 +10,9 @@ import { Box, Grid } from '../../../../../layout';
 import { getPrefixedUrl } from '../../utils';
 import { DocumentList } from './DocumentList';
 export const Document = (props) => {
-    const { id, handleChange, canUpdateProperty, error, instance, value, validate, hasDescription } = props;
+    const { id, canUpdateProperty, error, value, validate, hasDescription } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, object } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, object, handleChange, instance } = useFormContext();
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
     const [hasUpdatePermission, setHasUpdatePermission] = useState(fetchedOptions[`${id}UpdatePermission`]);
@@ -110,7 +110,7 @@ export const Document = (props) => {
                         ? `Maximum size is ${formattedMaxSize}.`
                         : `The maximum size of each document is ${formattedMaxSize}.`)))))),
         canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })),
-        React.createElement(DocumentList, { id: id, instance: instance, handleChange: handleChange, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission }),
+        React.createElement(DocumentList, { id: id, handleChange: handleChange, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission }),
         React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' }),
         errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
             React.createElement(InfoRounded, { sx: { fontSize: '.75rem', marginRight: '3px', color: '#D3271B' } }),

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
-import { FieldValues } from 'react-hook-form';
 import { SavedDocumentReference } from '../../types';
 type DocumentListProps = {
     handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
     id: string;
-    instance?: FieldValues;
     canUpdateProperty: boolean;
     value: (File | SavedDocumentReference)[] | undefined;
     setSnackbarError: (type: 'error' | 'success', message: string) => void;

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

@@ -24,9 +24,9 @@ const viewableFileTypes = [
     'text/plain',
 ];
 export const DocumentList = (props) => {
-    const { handleChange, id, canUpdateProperty, instance, value: documents, setSnackbarError } = props;
+    const { handleChange, id, canUpdateProperty, value: documents, setSnackbarError } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, object } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, object, instance } = useFormContext();
     const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
     const [savedDocuments, setSavedDocuments] = useState(fetchedOptions[`${id}SavedDocuments`]);
     useEffect(() => {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Image.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 export declare function blobToDataUrl(blob: Blob): Promise<string>;
 type ImageProps = {
     id: string;
-    handleChange: (propertyId: string, value: string | null) => void;
     canUpdateProperty?: boolean;
     error?: boolean;
     value?: string;

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

@@ -2,6 +2,7 @@ import { BackupOutlined, ClearRounded } from '@mui/icons-material';
 import { CardMedia } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { useFormContext } from '../../../../../theme/hooks';
 import { IconButton, Typography } from '../../../../core';
 import { Box, Grid } from '../../../../layout';
 export function blobToDataUrl(blob) {
@@ -54,7 +55,8 @@ const styles = {
     },
 };
 export const Image = (props) => {
-    const { id, handleChange, canUpdateProperty, error, value, hasDescription } = props;
+    const { id, canUpdateProperty, error, value, hasDescription } = props;
+    const { handleChange } = useFormContext();
     const [image, setImage] = useState();
     useEffect(() => {
         if (typeof value === 'string') {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.d.ts

@@ -1,14 +1,11 @@
-import { UserAccount } from '@evoke-platform/context';
 import React from 'react';
 export type UserPropertyProps = {
     id: string;
-    handleChange: (id: string, user: UserAccount | undefined) => void;
     error?: boolean;
     value?: {
         id: string;
         name: string;
     };
-    fieldHeight?: 'small' | 'medium';
     readOnly?: boolean;
     hasDescription?: boolean;
 };

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

@@ -5,8 +5,8 @@ import { useFormContext } from '../../../../../theme/hooks';
 import { Autocomplete, Paper, TextField, Typography } from '../../../../core';
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 const UserProperty = (props) => {
-    const { id, handleChange, error, value, fieldHeight, readOnly, hasDescription } = props;
-    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const { id, error, value, readOnly, hasDescription } = props;
+    const { fetchedOptions, setFetchedOptions, handleChange, fieldHeight } = useFormContext();
     const [loadingOptions, setLoadingOptions] = useState(false);
     const apiServices = useApiServices();
     const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js

@@ -10,8 +10,8 @@ import { Box } from '../../../../../layout';
 import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
 import RelatedObjectInstance from './RelatedObjectInstance';
 const ObjectPropertyInput = (props) => {
-    const { id, instance, fieldDefinition, handleChangeObjectProperty, nestedFieldsView, readOnly, error, mode, parameters, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, fieldHeight, richTextEditor, viewLayout, hasDescription, } = props;
-    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const { id, fieldDefinition, nestedFieldsView, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, } = props;
+    const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, instance, } = useFormContext();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
@@ -86,7 +86,7 @@ const ObjectPropertyInput = (props) => {
                     }
                     if (instances && instances.length > 0) {
                         setSelectedInstance(instances[0]);
-                        handleChangeObjectProperty(id, instances[0]);
+                        handleChangeObjectField(id, instances[0]);
                     }
                     setLoadingOptions(false);
                 });
@@ -313,12 +313,12 @@ const ObjectPropertyInput = (props) => {
                     if (isNil(value)) {
                         setDropdownInput(undefined);
                         setSelectedInstance(undefined);
-                        handleChangeObjectProperty(id, null);
+                        handleChangeObjectField(id, null);
                     }
                     else {
                         const selectedInstance = options.find((o) => o.id === value?.value);
                         setSelectedInstance(selectedInstance);
-                        handleChangeObjectProperty(id, selectedInstance);
+                        handleChangeObjectField(id, selectedInstance);
                     }
                 }, selectOnFocus: false, onBlur: () => setDropdownInput(undefined), renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: selectedInstance?.id || readOnly ? '' : 'Select', readOnly: !loadingOptions && !selectedInstance?.id && readOnly, onChange: (event) => setDropdownInput(event.target.value), onClick: (e) => {
                         if (openOptions &&
@@ -398,7 +398,7 @@ const ObjectPropertyInput = (props) => {
                 React.createElement("span", null,
                     React.createElement(IconButton, { onClick: (event) => {
                             event.stopPropagation();
-                            handleChangeObjectProperty(id, null);
+                            handleChangeObjectField(id, null);
                             setSelectedInstance(undefined);
                         }, sx: { p: 0, marginBottom: '4px' }, "aria-label": `Unlink` },
                         React.createElement(Close, { sx: { width: '20px', height: '20px' } }))))) : (React.createElement(Button, { sx: {
@@ -422,7 +422,7 @@ const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add` }, "Add")))),
-        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { id: id, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, nestedFieldsView: nestedFieldsView, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, fieldHeight: fieldHeight, richTextEditor: richTextEditor, form: form, action: action, setSnackbarError: setSnackbarError, selectedInstance: selectedInstance })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { id: id, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, nestedFieldsView: nestedFieldsView, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, form: form, action: action, setSnackbarError: setSnackbarError, selectedInstance: selectedInstance })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
             React.createElement(Typography, { sx: {
                     marginTop: '28px',
                     fontSize: '22px',
@@ -430,7 +430,7 @@ const ObjectPropertyInput = (props) => {
                     marginLeft: '24px',
                     marginBottom: '10px',
                 } }, `Add ${fieldDefinition.name}`),
-            React.createElement(RelatedObjectInstance, { handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, fieldHeight: fieldHeight, richTextEditor: richTextEditor, form: form, action: action, setSnackbarError: setSnackbarError, selectedInstance: selectedInstance }))))),
+            React.createElement(RelatedObjectInstance, { handleClose: handleClose, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, form: form, action: action, setSnackbarError: setSnackbarError, selectedInstance: selectedInstance }))))),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
                 isError: snackbarError.isError,
                 showAlert: false,

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.d.ts

@@ -1,11 +1,10 @@
 import { Action, EvokeForm, Obj, ObjectInstance, TableViewLayout } from '@evoke-platform/context';
-import React, { ComponentType } from 'react';
-import { BaseProps, SimpleEditorProps } from '../../types';
+import React from 'react';
+import { BaseProps } from '../../types';
 export type RelatedObjectInstanceProps = BaseProps & {
     relatedObject: Obj | undefined;
     id: string;
     setSelectedInstance: (selectedInstance: ObjectInstance) => void;
-    handleChangeObjectProperty: (propertyId: string, instance?: any) => void;
     handleClose: () => void;
     mode: 'default' | 'existingOnly' | 'newOnly';
     setSnackbarError: React.Dispatch<React.SetStateAction<{
@@ -19,8 +18,6 @@ export type RelatedObjectInstanceProps = BaseProps & {
     options: ObjectInstance[];
     filter?: Record<string, unknown>;
     layout?: TableViewLayout;
-    fieldHeight?: 'small' | 'medium';
-    richTextEditor?: ComponentType<SimpleEditorProps>;
     form?: EvokeForm;
     action?: Action;
     selectedInstance?: ObjectInstance;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.js

@@ -1,5 +1,6 @@
 import { InfoRounded } from '@mui/icons-material';
 import React, { useState } from 'react';
+import { useFormContext } from '../../../../../../theme/hooks';
 import { Alert, Button, FormControlLabel, Radio, RadioGroup } from '../../../../../core';
 import { Box, Grid } from '../../../../../layout';
 import InstanceLookup from './InstanceLookup';
@@ -13,14 +14,15 @@ const styles = {
     },
 };
 const RelatedObjectInstance = (props) => {
-    const { relatedObject, id, setSelectedInstance, handleChangeObjectProperty, handleClose, nestedFieldsView, mode, displayOption, filter, layout, form, } = props;
+    const { relatedObject, id, setSelectedInstance, handleClose, nestedFieldsView, mode, displayOption, filter, layout, form, } = props;
+    const { handleChange: handleChangeObjectField } = useFormContext();
     const [errors, setErrors] = useState([]);
     const [selectedRow, setSelectedRow] = useState();
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' ? 'new' : 'existing');
     const linkExistingInstance = async () => {
         if (selectedRow) {
             setSelectedInstance(selectedRow);
-            handleChangeObjectProperty(id, selectedRow);
+            handleChangeObjectField(id, selectedRow);
         }
         onClose();
     };

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

@@ -1,13 +1,15 @@
 import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
 import { TabContext, TabPanel } from '@mui/lab';
 import React, { useRef, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { Tab, Tabs, Typography } from '../../../core';
 import { Box } from '../../../layout';
 import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
 import TabNav from './TabNav';
 import { getErrorCountForSection, scrollIntoViewWithOffset } from './utils';
 function FormSections(props) {
-    const { entry, errors, handleChange, showSubmitError, fieldHeight, richTextEditor, instance, expandedSections, setExpandedSections, expandAll, setExpandAll, parameters, triggerFieldReset, } = props;
+    const { entry } = props;
+    const { errors, showSubmitError } = useFormContext();
     const tabPanelsRef = useRef(null);
     const [tabValue, setTabValue] = useState(0);
     const handleTabChange = (type, newValue) => {
@@ -97,7 +99,7 @@ function FormSections(props) {
                         } },
                         React.createElement(Box, null, section.entries &&
                             section.entries.map((sectionEntry, index) => {
-                                return (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry, handleChange: handleChange, errors: errors, showSubmitError: showSubmitError, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, parameters: parameters, triggerFieldReset: triggerFieldReset }));
+                                return (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry }));
                             })),
                         React.createElement(TabNav, { prevTabLabel: prevTabLabel, nextTabLabel: nextTabLabel, numberOfTabs: entry.sections.length, tabValue: tabValue, handleTabChange: handleTabChange })))))))));
 }

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

@@ -19,7 +19,7 @@ import ObjectPropertyInput from './FormFieldTypes/relatedObjectFiles/ObjectPrope
 import UserProperty from './FormFieldTypes/UserProperty';
 import FormSections from './FormSections';
 import { docProperties, entryIsVisible, fetchCollectionData, getEntryId, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
-function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors, validation) {
+function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors, validation) {
     return {
         inputId: entryId,
         inputType: fieldDefinition.type,
@@ -33,13 +33,12 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
         prefix: display?.prefix,
         suffix: display?.suffix,
         viewOnly: entry.type === 'readonlyField',
-        fieldHeight,
         errorMessage: errors?.[entryId]?.message,
     };
 }
 export function RecursiveEntryRenderer(props) {
-    const { handleChange, errors, showSubmitError, fieldHeight, instance, richTextEditor, expandedSections, setExpandedSections, expandAll, setExpandAll, parameters, entry, triggerFieldReset, isDocument, } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues } = useFormContext();
+    const { entry, isDocument } = props;
+    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, fieldHeight, triggerFieldReset, } = useFormContext();
     // If the entry is hidden, clear its value and any nested values, and skip rendering
     if (!entryIsVisible(entry, getValues(), instance)) {
         return null;
@@ -92,51 +91,51 @@ export function RecursiveEntryRenderer(props) {
     else if ((entry.type === 'input' || entry.type === 'readonlyField' || entry.type === 'inputField') &&
         fieldDefinition) {
         if (isAddressProperty(entryId)) {
-            return (React.createElement(AddressFields, { entry: entry, errors: errors, handleChange: handleChange, fieldHeight: fieldHeight, parameters: parameters, instance: instance, entryId: entryId, fieldDefinition: fieldDefinition }));
+            return React.createElement(AddressFields, { entry: entry, entryId: entryId, fieldDefinition: fieldDefinition });
         }
         else if (fieldDefinition.type === 'image') {
-            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
-                React.createElement(Image, { id: entryId, handleChange: handleChange, canUpdateProperty: entry.type !== 'readonlyField', error: !!errors[entryId], value: fieldValue, hasDescription: !!display?.description })));
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                React.createElement(Image, { id: entryId, canUpdateProperty: entry.type !== 'readonlyField', error: !!errors?.[entryId], value: fieldValue, hasDescription: !!display?.description })));
         }
         else if (fieldDefinition.type === 'object') {
-            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
-                React.createElement(ObjectPropertyInput, { instance: instance, fieldDefinition: fieldDefinition, id: entryId, handleChangeObjectProperty: handleChange, mode: display?.mode || 'default', error: !!errors[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, parameters: parameters, readOnly: entry.type === 'readonlyField', filter: validation?.criteria
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                React.createElement(ObjectPropertyInput, { fieldDefinition: fieldDefinition, id: entryId, mode: display?.mode || 'default', error: !!errors?.[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, readOnly: entry.type === 'readonlyField', filter: validation?.criteria
                         ? updateCriteriaInputs(validation.criteria, getValues(), userAccount)
                         : undefined, sortBy: typeof display?.defaultValue === 'object' && 'sortBy' in display.defaultValue
                         ? display?.defaultValue.sortBy
                         : undefined, orderBy: typeof display?.defaultValue === 'object' && 'orderBy' in display.defaultValue
                         ? display?.defaultValue.orderBy
-                        : undefined, fieldHeight: fieldHeight, richTextEditor: richTextEditor, defaultValueCriteria: typeof display?.defaultValue === 'object' && 'criteria' in display.defaultValue
+                        : undefined, defaultValueCriteria: typeof display?.defaultValue === 'object' && 'criteria' in display.defaultValue
                         ? display?.defaultValue?.criteria
                         : undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description })));
         }
         else if (fieldDefinition.type === 'user') {
-            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
-                React.createElement(UserProperty, { id: entryId, value: fieldValue, handleChange: handleChange, error: !!errors[entryId], readOnly: entry.type === 'readonlyField', fieldHeight: fieldHeight, hasDescription: !!display?.description })));
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                React.createElement(UserProperty, { id: entryId, value: fieldValue, error: !!errors?.[entryId], readOnly: entry.type === 'readonlyField', hasDescription: !!display?.description })));
         }
         else if (fieldDefinition.type === 'collection') {
-            return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
-                React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] || initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, instance: instance, readOnly: entry.type === 'readonlyField', fieldHeight: fieldHeight, criteria: validation?.criteria, hasDescription: !!display?.description })))) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
-                React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, instance: instance })));
+            return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] || initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description })))) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout })));
         }
         else if (fieldDefinition.type === 'richText') {
-            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
                 id: entryId,
                 value: fieldValue,
                 handleUpdate: (value) => handleChange(entryId, value),
                 format: 'rtf',
                 disabled: entry.type === 'readonlyField',
                 rows: display?.rowCount,
-                hasError: !!errors[entryId],
-            })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, error: !!errors[entryId], errorMessage: errors[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, size: fieldHeight }))));
+                hasError: !!errors?.[entryId],
+            })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, size: fieldHeight }))));
         }
         else if (fieldDefinition.type === 'document') {
-            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
-                React.createElement(Document, { id: entryId, handleChange: handleChange, error: !!errors[entryId], value: fieldValue, instance: instance, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description, validate: validation })));
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                React.createElement(Document, { id: entryId, error: !!errors?.[entryId], value: fieldValue, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description, validate: validation })));
         }
         else if (fieldDefinition.type === 'criteria') {
-            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
-                React.createElement(Criteria, { key: triggerFieldReset ? `${entryId}-reset-true` : `${entryId}-reset-false`, fieldDefinition: fieldDefinition, value: fieldValue, handleChange: handleChange, canUpdateProperty: !(entry.type === 'readonlyField'), error: !!errors[entryId] })));
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                React.createElement(Criteria, { key: triggerFieldReset ? `${entryId}-reset-true` : `${entryId}-reset-false`, fieldDefinition: fieldDefinition, value: fieldValue, canUpdateProperty: !(entry.type === 'readonlyField'), error: !!errors?.[entryId] })));
         }
         else {
             // Add `aria-describedby` to ensure screen readers read the description
@@ -169,10 +168,10 @@ export function RecursiveEntryRenderer(props) {
                     fieldDefinition?.type === 'boolean') &&
                     triggerFieldReset
                     ? `${entryId}-reset-true`
-                    : `${entryId}-reset-false`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors), errorMessage: undefined },
+                    : `${entryId}-reset-false`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors), errorMessage: undefined },
                 React.createElement(FormField, { id: entryId, 
                     // TODO: Ideally the FormField prop should be called parameter but can't change the name for backwards compatibility reasons
-                    property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors[entryId], errorMessage: errors[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, getOptionLabel: (option) => {
+                    property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, getOptionLabel: (option) => {
                         if (typeof option === 'string') {
                             return (entry?.enumWithLabels?.find((e) => e.value === option)
                                 ?.label ?? option);
@@ -190,11 +189,11 @@ export function RecursiveEntryRenderer(props) {
         return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: '30px', flexDirection: isXs ? 'column' : 'row' } }, entry.columns.map((column, colIndex) => (
         // calculating the width like this rather than flex={column.width} to prevent collections from being too wide
         React.createElement(Box, { key: colIndex, sx: { width: isXs ? '100%' : `calc(${(column.width / 12) * 100}% - 15px)` } }, column.entries?.map((columnEntry, entryIndex) => {
-            return (React.createElement(RecursiveEntryRenderer, { key: entryIndex + (columnEntry?.parameterId ?? ''), entry: columnEntry, handleChange: handleChange, errors: errors, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, parameters: parameters, triggerFieldReset: triggerFieldReset }));
+            return (React.createElement(RecursiveEntryRenderer, { key: entryIndex + (columnEntry?.parameterId ?? ''), entry: columnEntry }));
         }))))));
     }
     else if (entry.type === 'sections') {
-        return smallerThan('md') ? (React.createElement(AccordionSections, { entry: entry, handleChange: handleChange, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, errors: errors, parameters: parameters, triggerFieldReset: triggerFieldReset })) : (React.createElement(FormSections, { entry: entry, errors: errors, handleChange: handleChange, showSubmitError: showSubmitError, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, parameters: parameters }));
+        return smallerThan('md') ? React.createElement(AccordionSections, { entry: entry }) : React.createElement(FormSections, { entry: entry });
     }
     else if (!fieldDefinition) {
         return (React.createElement(Box, { sx: {

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
-import { FieldErrors } from 'react-hook-form';
 export type ValidationErrorDisplayProps = {
-    errors: FieldErrors;
-    show: boolean;
     formId: string;
     title?: string;
 };

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useResponsive } from '../../../../../theme';
+import { useFormContext } from '../../../../../theme/hooks';
 import { List, ListItem, Typography } from '../../../../core';
 import { Box } from '../../../../layout';
 function ValidationErrorDisplay(props) {
-    const { errors, show, formId, title } = props;
+    const { formId, title } = props;
+    const { errors, showSubmitError } = useFormContext();
     const { isSm, isXs } = useResponsive();
     function extractErrorMessages(errors) {
         const messages = [];
@@ -24,7 +26,7 @@ function ValidationErrorDisplay(props) {
         return messages;
     }
     const errorMessages = extractErrorMessages(errors);
-    return show && errorMessages.length > 0 ? (React.createElement(Box, { id: `validation-error-display-${formId}`, sx: {
+    return showSubmitError && errorMessages.length > 0 ? (React.createElement(Box, { id: `validation-error-display-${formId}`, sx: {
             backgroundColor: '#f8d7da',
             borderColor: '#f5c6cb',
             color: '#721c24',

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

@@ -1,7 +1,5 @@
 import { FormEntry, InputParameter, ObjectInstance, Property, Section, Sections, ViewLayoutEntityReference } from '@evoke-platform/context';
 import { GridSize } from '@mui/material';
-import { ComponentType } from 'react';
-import { FieldErrors, FieldValues } from 'react-hook-form';
 export type FieldAddress = {
     line1?: string;
     line2?: string;
@@ -40,9 +38,7 @@ export type SimpleEditorProps = {
 };
 export type ObjectPropertyInputProps = {
     id: string;
-    instance?: FieldValues;
     fieldDefinition: InputParameter;
-    handleChangeObjectProperty: (propertyId: string, instance?: ObjectInstance | null) => void;
     mode: 'default' | 'existingOnly' | 'newOnly';
     nestedFieldsView?: boolean;
     readOnly?: boolean;
@@ -55,11 +51,8 @@ export type ObjectPropertyInputProps = {
     isModal?: boolean;
     label?: string;
     initialValue?: ObjectInstance | null;
-    fieldHeight?: 'small' | 'medium';
-    richTextEditor?: ComponentType<SimpleEditorProps>;
     viewLayout?: ViewLayoutEntityReference;
     hasDescription?: boolean;
-    parameters?: InputParameter[];
 };
 export type Page = {
     id: string;
@@ -91,35 +84,10 @@ export type ExpandedSection = Section & {
 };
 export type EntryRendererProps = BaseProps & {
     entry: FormEntry;
-    errors: FieldErrors;
-    handleChange: (name: string, value: unknown) => void;
-    showSubmitError?: boolean;
-    fieldHeight?: 'small' | 'medium';
-    instance?: FieldValues;
-    richTextEditor?: ComponentType<SimpleEditorProps>;
-    expandedSections: ExpandedSection[];
-    setExpandedSections: React.Dispatch<React.SetStateAction<ExpandedSection[]>>;
-    expandAll?: boolean | undefined | null;
-    setExpandAll: React.Dispatch<React.SetStateAction<boolean | undefined | null>>;
-    parameters?: InputParameter[];
-    readOnly?: boolean;
-    triggerFieldReset?: boolean;
     isDocument?: boolean;
 };
 export type SectionsProps = {
     entry: Sections;
-    handleChange: (propertyId: string, value: unknown) => void;
-    fieldHeight?: 'small' | 'medium';
-    richTextEditor?: ComponentType<SimpleEditorProps>;
-    instance?: FieldValues;
-    expandAll?: boolean | undefined | null;
-    expandedSections: ExpandedSection[];
-    setExpandedSections: React.Dispatch<React.SetStateAction<ExpandedSection[]>>;
-    setExpandAll: React.Dispatch<React.SetStateAction<boolean | undefined | null>>;
-    errors: FieldErrors;
-    parameters?: InputParameter[];
-    triggerFieldReset?: boolean;
-    showSubmitError?: boolean;
 };
 export type DocumentData = {
     id: string;

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

@@ -40,7 +40,7 @@ export declare function getDefaultPages(parameters: InputParameter[], defaultPag
 }>;
 export declare function updateCriteriaInputs(criteria: Record<string, unknown>, data: Record<string, unknown>, user?: UserAccount): Record<string, unknown>;
 export declare function fetchCollectionData(apiServices: ApiServices, fieldDefinition: InputParameter | Property, setFetchedOptions: (newData: FieldValues) => void, instanceId?: string, fetchedOptions?: Record<string, unknown>, initialMiddleObjectInstances?: ObjectInstance[]): Promise<void>;
-export declare const getErrorCountForSection: (section: Section | Column, errors: FieldErrors) => number;
+export declare const getErrorCountForSection: (section: Section | Column, errors?: FieldErrors) => number;
 export declare const convertDocToParameters: (obj: Document) => InputParameter[];
 export declare const propertyToParameter: (property: Property) => InputParameter;
 export declare const propertyValidationToParameterValidation: (property: Property) => InputParameter['validation'];

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

@@ -1,2 +1,4 @@
+export { FormContext } from './components/FormContext';
+export { RecursiveEntryRenderer } from './components/RecursiveEntryRenderer';
 export { default as FormRenderer } from './FormRenderer';
 export { default as FormRendererContainer } from './FormRendererContainer';

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

@@ -1,2 +1,4 @@
+export { FormContext } from './components/FormContext';
+export { RecursiveEntryRenderer } from './components/RecursiveEntryRenderer';
 export { default as FormRenderer } from './FormRenderer';
 export { default as FormRendererContainer } from './FormRendererContainer';

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

@@ -5,7 +5,7 @@ export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
 export type { FormRef } from './Form';
 export { FormField } from './FormField';
-export { FormRenderer, FormRendererContainer } from './FormV2';
+export { FormContext, FormRenderer, FormRendererContainer, RecursiveEntryRenderer } from './FormV2';
 export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

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

@@ -4,7 +4,7 @@ export { DataGrid } from './DataGrid';
 export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
 export { FormField } from './FormField';
-export { FormRenderer, FormRendererContainer } from './FormV2';
+export { FormContext, FormRenderer, FormRendererContainer, RecursiveEntryRenderer } from './FormV2';
 export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

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, FormField, FormRenderer, FormRendererContainer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, 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, } from './components/custom';
 export type { FormRef } 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, FormField, FormRenderer, FormRendererContainer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, 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, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';

package/dist/published/theme/hooks.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Breakpoint } from '@mui/material/styles';
 /**
  * Custom hook for responsive design breakpoints using size terminology.
@@ -113,4 +114,16 @@ export declare function useFormContext(): {
     getValues: import("react-hook-form").UseFormGetValues<import("react-hook-form").FieldValues>;
     stickyFooter?: boolean | undefined;
     object?: import("@evoke-platform/context").Obj | undefined;
+    errors?: import("react-hook-form").FieldValues | undefined;
+    instance?: import("react-hook-form").FieldValues | undefined;
+    richTextEditor?: import("react").ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
+    expandAll?: boolean | null | undefined;
+    expandedSections?: import("../components/custom/FormV2/components/types").ExpandedSection[] | undefined;
+    setExpandedSections?: import("react").Dispatch<import("react").SetStateAction<import("../components/custom/FormV2/components/types").ExpandedSection[]>> | undefined;
+    setExpandAll?: import("react").Dispatch<import("react").SetStateAction<boolean | null | undefined>> | undefined; /** Small screens (600px to 899px) */
+    parameters?: import("@evoke-platform/context").InputParameter[] | undefined;
+    handleChange: (name: string, value: unknown) => void;
+    fieldHeight?: "medium" | "small" | undefined;
+    triggerFieldReset?: boolean | undefined;
+    showSubmitError?: boolean | undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.7.0-testing.8",
+    "version": "1.8.0-dev.0",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -9,6 +9,7 @@
         "icons.ts",
         "colors.ts"
     ],
+    "sideEffects": false,
     "exports": {
         ".": "./dist/published/index.js",
         "./colors": "./dist/published/colors/index.js",
@@ -87,7 +88,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.3.1-0",
+        "@evoke-platform/context": "^1.4.0-dev.5",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },