@evoke-platform/ui-components 1.0.0-dev.229 → 1.0.0-dev.231

package/dist/published/components/custom/Form/Common/Form.js

@@ -36,7 +36,7 @@ export function Form(props) {
             ViewOnlyTextField: ViewOnlyComponent,
             ViewOnlyDecimal: ViewOnlyComponent,
             ViewOnlyInteger: ViewOnlyComponent,
-            ViewOnlyRichText: richTextEditor,
+            ViewOnlyRichText: richTextEditor ?? ViewOnlyComponent,
             ViewOnlySection: Components.components.fieldset,
             ViewOnlyManyToManyRepeatableField: RepeatableFieldComponent,
             ViewOnlyRepeatableField: RepeatableFieldComponent,
@@ -59,7 +59,7 @@ export function Form(props) {
             Integer: FormFieldComponent,
             Buttons: ButtonComponent,
             Content: Components.components.content,
-            RichText: richTextEditor,
+            RichText: richTextEditor ?? FormFieldComponent,
             Section: Components.components.tabs,
             ManyToManyRepeatableField: RepeatableFieldComponent,
             RepeatableField: RepeatableFieldComponent,
@@ -124,7 +124,7 @@ export function Form(props) {
                     navigateTo,
                     apiServices,
                     user: userAccount,
-                }, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight);
+                }, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight, richTextEditor);
                 const components = isReadOnly ? newComponentProps : [...newComponentProps, BottomButtons];
                 setComponentProps(components);
             }
@@ -205,7 +205,7 @@ export function Form(props) {
                         navigateTo,
                         apiServices,
                         user: userAccount,
-                    }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight)),
+                    }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor)),
                     BottomButtons,
                 ]);
             }
@@ -221,7 +221,7 @@ export function Form(props) {
                     navigateTo,
                     apiServices,
                     user,
-                }, !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight),
+                }, !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight, richTextEditor),
                 !isReadOnly && BottomButtons,
             ]);
         }

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentComponent.d.ts

@@ -20,4 +20,5 @@ export declare class DocumentComponent extends ReactComponent {
     handleValidation(value?: (File | SavedDocumentReference)[] | null): void;
     beforeSubmit(): Promise<void>;
     attachReact(element: Element): void;
+    detachReact(element: Element): void;
 }

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentComponent.js

@@ -28,20 +28,6 @@ export class DocumentComponent extends ReactComponent {
         this.handleChange = this.handleChange.bind(this);
     }
     init() {
-        this.on('changed-' + this.component.conditional.when, (value) => {
-            // set default value when conditional field is shown
-            if (this.component.defaultValue && value === this.component.conditional.eq) {
-                this.setValue(this.component.defaultValue);
-                this.updateValue(this.component.defaultValue, { modified: true });
-            }
-            // clear data and errors when a true conditional field is hidden
-            if (this.component.conditional.show && value !== this.component.conditional.eq) {
-                this.setValue('');
-                this.updateValue('', { modified: true });
-                this.clearErrors();
-                super.detach();
-            }
-        });
         this.on(`api-error`, (details) => {
             const error = details.find((detail) => detail.code === 'errorMessage' && detail.path.replace('/', '') === this.component.key);
             if (error) {
@@ -147,4 +133,7 @@ export class DocumentComponent extends ReactComponent {
             React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
                 React.createElement(Document, { ...this.component, id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue }))), root);
     }
+    detachReact(element) {
+        ReactDOM.unmountComponentAtNode(element);
+    }
 }

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.d.ts

@@ -38,5 +38,6 @@ export declare class FormFieldComponent extends ReactComponent {
     handleComponentChange: (components: any, value: any) => void;
     handleChange: (key: string, value: any) => void;
     attachReact(element: Element): void;
+    detachReact(element: Element): void;
 }
 export {};

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.js

@@ -145,20 +145,6 @@ export class FormFieldComponent extends ReactComponent {
         this.handleChange = this.handleChange.bind(this);
     }
     init() {
-        this.on('changed-' + this.component.conditional.when, (value) => {
-            //set default value when conditional field is shown
-            if (this.component.defaultValue && value === this.component.conditional.eq) {
-                this.setValue(this.component.defaultValue);
-                this.updateValue(this.component.defaultValue, { modified: true });
-            }
-            //clear data and errors when a true conditional field is hidden
-            if (value !== this.component.conditional.eq) {
-                this.setValue('');
-                this.updateValue('', { modified: true });
-                this.clearErrors();
-                super.detach();
-            }
-        });
         if (this.component.key.includes('.city') ||
             this.component.key.includes('.county') ||
             this.component.key.includes('.state') ||
@@ -481,4 +467,7 @@ export class FormFieldComponent extends ReactComponent {
                             this.emit('changed-' + this.component.key, e.target.value);
                     }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium' }))), root);
     }
+    detachReact(element) {
+        ReactDOM.unmountComponentAtNode(element);
+    }
 }

package/dist/published/components/custom/Form/FormComponents/ImageComponent/ImageComponent.d.ts

@@ -22,4 +22,5 @@ export declare class ImageComponent extends ReactComponent {
     handleChange: (key: string, value: string | null) => void;
     beforeSubmit(): void;
     attachReact(element: Element): void;
+    detachReact(element: Element): void;
 }

package/dist/published/components/custom/Form/FormComponents/ImageComponent/ImageComponent.js

@@ -1,7 +1,7 @@
 import { ReactComponent } from '@formio/react';
 import { isEmpty } from 'lodash';
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import { FormComponentWrapper } from '../../Common';
 import { isPropertyVisible } from '../../utils';
 import { Image } from './Image';
@@ -27,25 +27,6 @@ export class ImageComponent extends ReactComponent {
         this.handleChange = this.handleChange.bind(this);
     }
     init() {
-        this.on('changed-' + this.component.conditional.when, (value) => {
-            //set default value when conditional field is shown
-            if (this.component.defaultValue && value === this.component.conditional.eq) {
-                this.setValue(this.component.defaultValue);
-                this.updateValue(this.component.defaultValue, { modified: true });
-            }
-            //clear data and errors when a true conditional field is hidden
-            if (this.component.conditional.show && value !== this.component.conditional.eq) {
-                this.setValue('');
-                this.updateValue('', { modified: true });
-                this.clearErrors();
-                super.detach();
-                // Detach the componentRoot when the component is hidden
-                if (this.componentRoot) {
-                    this.componentRoot.unmount();
-                    this.componentRoot = undefined;
-                }
-            }
-        });
         if (this.component.initialValue && /^{{.*}}$/.test(this.component.initialValue)) {
             const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
             const groups = regex.exec(this.component.initialValue)?.groups;
@@ -122,12 +103,19 @@ export class ImageComponent extends ReactComponent {
         this.element && this.attach(this.element);
     }
     attachReact(element) {
-        if (!this.componentRoot) {
-            this.componentRoot = createRoot(element);
+        let root = ReactDOM.findDOMNode(element);
+        if (!root) {
+            root = element;
         }
         // FormIO uses id for an enclosing div, so we need to give the input field a different id.
         const inputId = `${this.component.id}-input`;
-        return this.componentRoot.render(React.createElement("div", null, !this.component.hidden ? (React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
-            React.createElement(Image, { ...this.component, id: inputId, value: this.dataValue, handleChange: this.handleChange, error: this.hasErrors() }))) : null));
+        /* TODO: You'll see warnings to upgrade to React 18's createRoot();
+         * It'll cause issues with: field-level errors not showing up, conditional visibility not working, focus moving out of the form on keypress
+         * Will need to be revisited later. Possibly look into using this.ref */
+        return ReactDOM.render(React.createElement("div", null, !this.component.hidden ? (React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
+            React.createElement(Image, { ...this.component, id: inputId, value: this.dataValue, handleChange: this.handleChange, error: this.hasErrors() }))) : null), root);
+    }
+    detachReact(element) {
+        ReactDOM.unmountComponentAtNode(element);
     }
 }

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectComponent.d.ts

@@ -6,6 +6,7 @@ interface ObjectComponentProps extends BaseFormComponentProps {
     mode: 'default' | 'existingOnly';
     defaultValueCriteria?: Record<string, unknown>;
     initialValue?: string;
+    richTextEditor?: typeof ReactComponent;
 }
 export declare class ObjectComponent extends ReactComponent {
     relatedObject?: Obj;
@@ -31,5 +32,6 @@ export declare class ObjectComponent extends ReactComponent {
     handleChangeObjectProperty: (key: string, value?: ObjectInstance | null) => void;
     beforeSubmit(): void;
     attachReact(element: Element): void;
+    detachReact(element: Element): void;
 }
 export {};

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectComponent.js

@@ -2,7 +2,7 @@ import { ReactComponent } from '@formio/react';
 import dot from 'dot-object';
 import { cloneDeep, isEmpty, pick } from 'lodash';
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import { FormComponentWrapper } from '../../Common';
 import { getAllCriteriaInputs, getPrefixedUrl, isPropertyVisible, transformToWhere, updateCriteriaInputs, } from '../../utils';
 import { ObjectPropertyInput } from './ObjectPropertyInput';
@@ -33,25 +33,6 @@ export class ObjectComponent extends ReactComponent {
         this.handleChangeObjectProperty = this.handleChangeObjectProperty.bind(this);
     }
     init() {
-        this.on('changed-' + this.component.conditional.when, (value) => {
-            //set default value when conditional field is shown
-            if (this.component.defaultValue && value === this.component.conditional.eq) {
-                this.setValue(this.component.defaultValue);
-                this.updateValue(this.component.defaultValue, { modified: true });
-            }
-            //clear data and errors when a true conditional field is hidden
-            if (this.component.conditional.show && value !== this.component.conditional.eq) {
-                this.setValue('');
-                this.updateValue('', { modified: true });
-                this.clearErrors();
-                super.detach();
-                // Detach the componentRoot when the component is hidden
-                if (this.componentRoot) {
-                    this.componentRoot.unmount();
-                    this.componentRoot = undefined;
-                }
-            }
-        });
         const data = dot.dot(this.root._data);
         if (this.criteria) {
             const inputProps = getAllCriteriaInputs(this.criteria);
@@ -182,6 +163,10 @@ export class ObjectComponent extends ReactComponent {
         this.element && this.attach(this.element);
     }
     attachReact(element) {
+        let root = ReactDOM.findDOMNode(element);
+        if (!root) {
+            root = element;
+        }
         const updatedComponent = {
             ...this.component,
             instance: {
@@ -190,13 +175,16 @@ export class ObjectComponent extends ReactComponent {
             },
             defaultValueCriteria: this.updatedDefaultValueCriteria,
         };
-        if (!this.componentRoot) {
-            this.componentRoot = createRoot(element);
-        }
         // FormIO uses id for an enclosing div, so we need to give the input field a different id.
         const inputId = `${this.component.id}-input`;
-        return this.componentRoot.render(React.createElement("div", null,
+        /* TODO: You'll see warnings to upgrade to React 18's createRoot();
+         * It'll cause issues with: field-level errors not showing up, conditional visibility not working, focus moving out of the form on keypress
+         * Will need to be revisited later. Possibly look into using this.ref */
+        return ReactDOM.render(React.createElement("div", null,
             React.createElement(FormComponentWrapper, { ...updatedComponent, inputId: inputId, errorMessage: this.errorMessages() },
-                React.createElement(ObjectPropertyInput, { ...updatedComponent, id: inputId, handleChangeObjectProperty: this.handleChangeObjectProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined }))));
+                React.createElement(ObjectPropertyInput, { ...updatedComponent, id: inputId, handleChangeObjectProperty: this.handleChangeObjectProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined, richTextEditor: this.component.richTextEditor }))), root);
+    }
+    detachReact(element) {
+        ReactDOM.unmountComponentAtNode(element);
     }
 }

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -8,7 +8,7 @@ import { Box } from '../../../../layout';
 import { getPrefixedUrl, normalizeDates, transformToWhere } from '../../utils';
 import { RelatedObjectInstance } from './RelatedObjectInstance';
 export const ObjectPropertyInput = (props) => {
-    const { id, instance, property, apiServices, defaultPages, handleChangeObjectProperty, nestedFieldsView, canUpdateProperty, error, navigateTo, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, setSnackbarError, isModal, user, viewLayout, } = props;
+    const { id, instance, property, apiServices, defaultPages, handleChangeObjectProperty, nestedFieldsView, canUpdateProperty, error, navigateTo, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, setSnackbarError, isModal, user, viewLayout, richTextEditor, } = props;
     const [relatedObject, setRelatedObject] = useState();
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
     const [selectedInstance, setSelectedInstance] = useState();
@@ -333,7 +333,7 @@ export const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add`, disabled: !canUpdateProperty }, "Add")))),
-        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout })) : (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, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout, richTextEditor: richTextEditor })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
             React.createElement(Typography, { sx: {
                     marginTop: '28px',
                     fontSize: '22px',
@@ -341,5 +341,5 @@ export const ObjectPropertyInput = (props) => {
                     marginLeft: '24px',
                     marginBottom: '10px',
                 } }, `Add ${property.name}`),
-            React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSnackbarError: setSnackbarError, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, property: property, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout })))))));
+            React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSnackbarError: setSnackbarError, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, property: property, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout, richTextEditor: richTextEditor })))))));
 };

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ApiServices, Obj, ObjectInstance, Property, TableViewLayout, UserAccount } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
 export declare type RelatedObjectInstanceProps = {
     relatedObject?: Obj;
     property: Property;
@@ -21,5 +22,6 @@ export declare type RelatedObjectInstanceProps = {
     filter?: Record<string, unknown>;
     user?: UserAccount;
     layout?: TableViewLayout;
+    richTextEditor?: typeof ReactComponent;
 };
 export declare const RelatedObjectInstance: (props: RelatedObjectInstanceProps) => JSX.Element;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.js

@@ -20,7 +20,7 @@ const styles = {
 };
 const DEFAULT_CREATE_ACTION = '_create';
 export const RelatedObjectInstance = (props) => {
-    const { relatedObject, property, setSelectedInstance, handleChangeObjectProperty, handleClose, apiServices, setSnackbarError, nestedFieldsView, mode, displayOption, setOptions, options, filter, user, layout, } = props;
+    const { relatedObject, property, setSelectedInstance, handleChangeObjectProperty, handleClose, apiServices, setSnackbarError, nestedFieldsView, mode, displayOption, setOptions, options, filter, user, layout, richTextEditor, } = props;
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' ? 'new' : 'existing');
     const [selectedRow, setSelectedRow] = useState();
     const [errors, setErrors] = useState([]);
@@ -104,7 +104,7 @@ export const RelatedObjectInstance = (props) => {
                 React.createElement(Form, { actionId: "_create", actionType: "create", object: relatedObject, onSave: createNewInstance, submitButtonLabel: 'Add', closeModal: onClose, apiServices: apiServices, clearable: true, objectInputCommonProps: {
                         apiServices: apiServices,
                         setSnackbarError: setSnackbarError,
-                    }, queryAddresses: queryAddresses, user: userAccount }))) : (relatedObject && (React.createElement(React.Fragment, null,
+                    }, queryAddresses: queryAddresses, user: userAccount, richTextEditor: richTextEditor }))) : (relatedObject && (React.createElement(React.Fragment, null,
                 React.createElement(InstanceLookup, { apiServices: apiServices, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter, layout: layout }))))),
         relationType !== 'new' && (React.createElement(Box, { sx: styles.actionButtons },
             React.createElement(Button, { onClick: onClose, color: 'inherit', sx: {

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserComponent.d.ts

@@ -25,4 +25,5 @@ export declare class UserComponent extends ReactComponent {
     handleChangeUserProperty: (value: AutocompleteOption) => void;
     beforeSubmit(): void;
     attachReact(element: Element): void;
+    detachReact(element: Element): void;
 }

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserComponent.js

@@ -1,9 +1,9 @@
 import { ReactComponent } from '@formio/react';
 import { cloneDeep, isEmpty } from 'lodash';
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import { FormComponentWrapper } from '../../Common';
-import { isPropertyVisible, transformToWhere } from '../../utils';
+import { transformToWhere } from '../../utils';
 import { UserProperty } from './UserProperty';
 export class UserComponent extends ReactComponent {
     constructor(component, options, data) {
@@ -29,25 +29,6 @@ export class UserComponent extends ReactComponent {
         this.handleChangeUserProperty = this.handleChangeUserProperty.bind(this);
     }
     init() {
-        this.on('changed-' + this.component.conditional.when, (value) => {
-            // set default value when conditional field is shown
-            if (this.component.defaultValue && value === this.component.conditional.eq) {
-                this.setValue(this.component.defaultValue);
-                this.updateValue(this.component.defaultValue, { modified: true });
-            }
-            // clear data and errors when a true conditional field is hidden
-            if (this.component.conditional.show && value !== this.component.conditional.eq) {
-                this.setValue('');
-                this.updateValue('', { modified: true });
-                this.clearErrors();
-                super.detach();
-                // Detach the componentRoot when the component is hidden
-                if (this.componentRoot) {
-                    this.componentRoot.unmount();
-                    this.componentRoot = undefined;
-                }
-            }
-        });
         if (this.component.initialValue && /^{{.*}}$/.test(this.component.initialValue)) {
             const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
             const groups = regex.exec(this.component.initialValue)?.groups;
@@ -90,7 +71,7 @@ export class UserComponent extends ReactComponent {
         this.root.customErrors = this.root.customErrors.filter((error) => error.formattedKeyOrPath !== this.component.key);
     }
     handleValidation() {
-        if (!isPropertyVisible(this.component.conditional, this.root.data)) {
+        if (!this.visible) {
             return;
         }
         // check for out-of-the-box formio errors which store on this.root.errors
@@ -123,6 +104,10 @@ export class UserComponent extends ReactComponent {
         this.element && this.attach(this.element);
     }
     attachReact(element) {
+        let root = ReactDOM.findDOMNode(element);
+        if (!root) {
+            root = element;
+        }
         const updatedComponent = {
             ...this.component,
             instance: {
@@ -130,13 +115,16 @@ export class UserComponent extends ReactComponent {
                 [this.component.key]: isEmpty(this.dataValue) ? null : this.dataValue,
             },
         };
-        if (!this.componentRoot) {
-            this.componentRoot = createRoot(element, { onRecoverableError: console.error });
-        }
         // FormIO uses id for an enclosing div, so we need to give the input field a different id.
         const inputId = `${this.component.id}-input`;
-        return this.componentRoot.render(React.createElement("div", null,
+        /* TODO: You'll see warnings to upgrade to React 18's createRoot();
+         * It'll cause issues with: field-level errors not showing up, conditional visibility not working, focus moving out of the form on keypress
+         * Will need to be revisited later. Possibly look into using this.ref */
+        return ReactDOM.render(React.createElement("div", null,
             React.createElement(FormComponentWrapper, { ...updatedComponent, inputId: inputId, errorMessage: this.errorMessages() },
-                React.createElement(UserProperty, { ...updatedComponent, id: inputId, value: this.dataValue ?? '', handleChangeUserProperty: this.handleChangeUserProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined }))));
+                React.createElement(UserProperty, { ...updatedComponent, id: inputId, value: this.dataValue ?? '', handleChangeUserProperty: this.handleChangeUserProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined }))), root);
+    }
+    detachReact(element) {
+        ReactDOM.unmountComponentAtNode(element);
     }
 }

package/dist/published/components/custom/Form/FormComponents/ViewOnlyComponent.d.ts

@@ -17,4 +17,5 @@ export declare class ViewOnlyComponent extends ReactComponent {
     constructor(component: BaseFormComponentProps, options: any, data: any);
     showValue(value: unknown): {} | undefined;
     attachReact(element: Element): void;
+    detachReact(element: Element): void;
 }

package/dist/published/components/custom/Form/FormComponents/ViewOnlyComponent.js

@@ -3,7 +3,6 @@ import { get, isEmpty } from 'lodash';
 import { DateTime } from 'luxon';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { createRoot } from 'react-dom/client';
 import { Link, Typography } from '../../../core';
 import { FormComponentWrapper } from '../Common/FormComponentWrapper';
 export class ViewOnlyComponent extends ReactComponent {
@@ -74,13 +73,16 @@ export class ViewOnlyComponent extends ReactComponent {
         if (!root) {
             root = element;
         }
-        if (!this.componentRoot) {
-            this.componentRoot = createRoot(root);
-        }
-        return this.componentRoot.render(React.createElement("div", null,
+        /* TODO: You'll see warnings to upgrade to React 18's createRoot();
+         * It'll cause issues with: field-level errors not showing up, conditional visibility not working, focus moving out of the form on keypress
+         * Will need to be revisited later. Possibly look into using this.ref */
+        return ReactDOM.render(React.createElement("div", null,
             React.createElement(FormComponentWrapper, { ...this.component, viewOnly: true },
                 React.createElement(Typography, { variant: "body1", key: this.component.key }, this.showValue(this.component.instance
                     ? get(this.component.instance, this.component.key)
-                    : this.component.defaultValue)))));
+                    : this.component.defaultValue)))), root);
+    }
+    detachReact(element) {
+        ReactDOM.unmountComponentAtNode(element);
     }
 }

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

@@ -1,4 +1,5 @@
 import { ApiServices, ObjectInstance, Property, UserAccount, ViewLayoutEntityReference } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
 import { AutocompleteOption } from '../../core';
 export declare type BaseFormComponentProps = {
     key: string;
@@ -76,6 +77,7 @@ export declare type ObjectPropertyInputProps = {
     isModal?: boolean;
     label?: string;
     viewLayout?: ViewLayoutEntityReference;
+    richTextEditor?: typeof ReactComponent;
 };
 export declare type Address = {
     line1?: string;

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

@@ -1,4 +1,5 @@
 import { ActionInput, ActionInputType, ApiServices, FormEntry, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
 import { LocalDateTime } from '@js-joda/core';
 import { AutocompleteOption } from '../../core';
 import { ObjectPropertyInputProps } from './types';
@@ -20,9 +21,9 @@ export declare function getMiddleObject(instance: ObjectInstance, property: Prop
 } | undefined;
 export declare function getMiddleInstance(instanceId: string, property: Property, middleObjectInstances: ObjectInstance[]): ObjectInstance | undefined;
 export declare function getPrefixedUrl(url: string): string;
-export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: unknown, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium'): Promise<ActionInput[]>;
+export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: unknown, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent): Promise<ActionInput[]>;
 export declare function getDefaultValue(initialValue: unknown, selectOptions?: AutocompleteOption[]): unknown;
-export declare const buildComponentPropsFromObjectProperties: (properties: Property[], objectId: string, instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, hasActionPermissions?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, readOnly?: boolean, queryAddresses?: unknown, isModal?: boolean, fieldHeight?: 'small' | 'medium') => unknown[];
+export declare const buildComponentPropsFromObjectProperties: (properties: Property[], objectId: string, instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, hasActionPermissions?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, readOnly?: boolean, queryAddresses?: unknown, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent) => unknown[];
 export declare const buildComponentPropsFromDocumentProperties: (documentProperties: [string, unknown][], readOnly?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, fieldHeight?: 'small' | 'medium') => {
     type: string;
     key: string;

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

@@ -468,7 +468,7 @@ export function getPrefixedUrl(url) {
 // This function is used when there is no form configured in the form builder.
 export async function addObjectPropertiesToComponentProps(properties, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight) {
+formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor) {
     return [
         ...(await Promise.all(formComponents
             ?.filter((component) => !isUndefined(component) && !isNil(component))
@@ -625,6 +625,9 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                         middleObject,
                         getMiddleObjectInstances,
                         isModal,
+                        richTextEditor: ['RepeatableField', 'Object'].includes(component.type)
+                            ? richTextEditor
+                            : undefined,
                     };
                 }
                 const defaultValue = getDefaultValue(isNil(instanceValue) ? component.initialValue : instanceValue, component?.data?.values);
@@ -665,11 +668,14 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                         }
                         : undefined,
                     isModal,
+                    richTextEditor: ['RepeatableField', 'Object'].includes(component.type)
+                        ? richTextEditor
+                        : undefined,
                 };
             }
             if (component.columns) {
                 for (const column of component.columns) {
-                    column.components = await addObjectPropertiesToComponentProps(properties, column.components, instance, objectPropertyInputProps, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight);
+                    column.components = await addObjectPropertiesToComponentProps(properties, column.components, instance, objectPropertyInputProps, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor);
                 }
                 return component;
             }
@@ -703,6 +709,9 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                     item.navigateTo = navigateTo;
                     item.isModal = isModal;
                     item.fieldHeight = fieldHeight;
+                    item.richTextEditor = ['RepeatableField', 'Object'].includes(item.type)
+                        ? richTextEditor
+                        : undefined;
                     if (item.addressPropertyId) {
                         item.queryAddresses = queryAddresses;
                     }
@@ -724,7 +733,7 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                     }
                 }
                 return {
-                    components: await addObjectPropertiesToComponentProps(properties, component.components, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight),
+                    components: await addObjectPropertiesToComponentProps(properties, component.components, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor),
                     ...component,
                     ...(component.type === 'Object' && objectPropertyInputProps),
                     type: `${readOnly ? 'ViewOnly' : ''}${component.type}`,
@@ -738,6 +747,9 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                     queryAddresses: component.isAddressLine1 ? queryAddresses : undefined,
                     isModal,
                     fieldHeight,
+                    richTextEditor: ['RepeatableField', 'Object'].includes(component.type)
+                        ? richTextEditor
+                        : undefined,
                 };
             }
         }))).filter((component) => !!component),
@@ -788,7 +800,7 @@ export function getDefaultValue(initialValue, selectOptions) {
 }
 // The following function adds the configured properties to the form components.
 // This function is used when there is a form configured in the form builder.
-export const buildComponentPropsFromObjectProperties = (properties, objectId, instance, objectPropertyInputProps, hasActionPermissions, autoSave, readOnly, queryAddresses, isModal, fieldHeight) => {
+export const buildComponentPropsFromObjectProperties = (properties, objectId, instance, objectPropertyInputProps, hasActionPermissions, autoSave, readOnly, queryAddresses, isModal, fieldHeight, richTextEditor) => {
     const matchType = (type) => {
         switch (type) {
             case 'boolean':
@@ -1049,6 +1061,7 @@ export const buildComponentPropsFromObjectProperties = (properties, objectId, in
             autoSave,
             queryAddresses: ['collection', 'object'].includes(property?.type) ? queryAddresses : undefined,
             isModal,
+            richTextEditor: property.type === 'object' ? richTextEditor : undefined,
         };
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.229",
+    "version": "1.0.0-dev.231",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",