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

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

@@ -31,5 +31,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 }))), root);
+    }
+    detachReact(element) {
+        ReactDOM.unmountComponentAtNode(element);
     }
 }

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/package.json

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