@evoke-platform/ui-components 1.0.0-dev.228 → 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/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.js

@@ -8,8 +8,8 @@ const BooleanSelect = (props) => {
         setValue(defaultValue);
     }, [defaultValue]);
     const handleChange = (event, selected) => {
-        setValue(selected.label);
-        props.onChange(property.id, selected.label, property);
+        setValue(selected.value);
+        props.onChange(property.id, selected.value, property);
     };
     const booleanOptions = [
         {
@@ -21,6 +21,19 @@ const BooleanSelect = (props) => {
             value: false,
         },
     ];
-    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, size: size ?? 'medium', placeholder: placeholder })), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}) }));
+    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, size: size ?? 'medium', placeholder: placeholder })), value: value, onChange: handleChange, isOptionEqualToValue: (option, val) => {
+            if (typeof val === 'boolean') {
+                return option.value === val;
+            }
+            return option.value === val?.value;
+        }, getOptionLabel: (option) => {
+            if (typeof option === 'boolean') {
+                const opt = booleanOptions.find((o) => o.value === option);
+                return opt ? opt.label : option;
+            }
+            if (typeof option === 'string')
+                return option;
+            return option.label;
+        }, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}) }));
 };
 export default BooleanSelect;

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

@@ -18,6 +18,5 @@ test('returns selected option', async () => {
     await user.click(inputField);
     const yesOption = await screen.findByRole('option', { name: 'Yes' });
     await user.click(yesOption);
-    expect(onChangeMock).toBeCalledWith('theQuestion', 'Yes', // ?? why not true/false?
-    booleanProperty);
+    expect(onChangeMock).toBeCalledWith('theQuestion', true, booleanProperty);
 });

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

@@ -37,7 +37,7 @@ const FormField = (props) => {
     }
     switch (property.type) {
         case 'boolean':
-            control = (React.createElement(BooleanSelect, { ...commonProps, defaultValue: defaultValue ? 'Yes' : defaultValue === undefined ? '' : 'No' }));
+            control = React.createElement(BooleanSelect, { ...commonProps, defaultValue: defaultValue });
             break;
         case 'date':
             control = React.createElement(DatePickerSelect, { ...commonProps });

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

@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import InputMask from 'react-input-mask';
 import NumberFormat from 'react-number-format';
@@ -39,14 +40,15 @@ const InputFieldComponent = (props) => {
         : property.type === 'integer'
             ? { inputProps: { min, max } }
             : null;
-    const selectOptions = property.enum ?? [];
-    if (property.enum && !property.enum.includes(value)) {
-        //note: this is different between widgets and builder
-        //builder had select options being {label, value}
-        //widgets had it like this, as strings w/isOptionEqualToValue
-        selectOptions.push(value);
-    }
-    return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder })), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
+    return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, 
+        // note: this is different between widgets and builder
+        // builder had select options being {label, value}
+        // widgets had it like this, as strings w/isOptionEqualToValue
+        options: typeof defaultValue === 'string' &&
+            !isEmpty(defaultValue) &&
+            !property.enum.find((val) => val === defaultValue)
+            ? [...property.enum, defaultValue]
+            : property.enum, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder })), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
         }, error: error, required: required, inputValue: inputValue ?? '', onInputChange: handleInputValueChange, ...(additionalProps ?? {}) })) : !mask ? (React.createElement(TextField, { id: id, sx: {
             background: 'white',

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

@@ -40,4 +40,21 @@ describe('Autocomplete', () => {
         await user.click(option2);
         expect(onChangeMock).toBeCalledWith('enumField', 'option 2', enumProperty);
     });
+    test('does not include blank default value in options', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = jest.fn((name, value, property) => { });
+        render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock, defaultValue: null }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        const blankOption = screen.queryByRole('option', { name: '' });
+        expect(blankOption).not.toBeInTheDocument();
+    });
+    test('includes default value in options', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = jest.fn((name, value, property) => { });
+        render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock, defaultValue: 'Default' }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        await screen.findByRole('option', { name: 'Default' });
+    });
 });

package/package.json

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