@formio/js 5.1.0-dev.6068.fbce2f7 → 5.1.0-dev.6070.c51663f

package/lib/mjs/components/_classes/component/Component.js

@@ -422,20 +422,10 @@ export default class Component extends Element {
     get componentsMap() {
         return this.root?.childComponentsMap || {};
     }
-    /**
-     * Returns if the parent should conditionally clear.
-     * This method does not need to walk up the parent tree since the variables
-     * _conditionallyClear and _conditionallyHidden are set on the parent component
-     * before the child component is determined, and the parent component also references
-     * its parent component.
-     *
-     * @returns {boolean} - If the parent should conditionally clear.
-     */
     parentShouldConditionallyClear() {
         let currentParent = this.parent;
         while (currentParent) {
-            if ((currentParent.allowData && currentParent._conditionallyClear) ||
-                (!currentParent.allowData && currentParent._conditionallyHidden)) {
+            if (currentParent.shouldConditionallyClear(true)) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -445,21 +435,7 @@ export default class Component extends Element {
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent._conditionallyHidden) {
-                return true;
-            }
-            currentParent = currentParent.parent;
-        }
-        return false;
-    }
-    /**
-     * Returns true if any of the parents default their component "hidden" property to true.
-     * @returns {boolean} - If any parent defaults the hidden property to true.
-     */
-    anyParentDefaultsHidden() {
-        let currentParent = this.parent;
-        while (currentParent) {
-            if (currentParent.component.hidden) {
+            if (currentParent.conditionallyHidden(true)) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -677,58 +653,48 @@ export default class Component extends Element {
         }
         return this._logicallyHidden;
     }
-    /**
-     * Determines if the component should clear its value when the root form is pristine.
-     * @returns {boolean} - If the component should clear its value when the root form is pristine.
-     */
-    shouldConditionallyClearOnPristine() {
-        // If the form is pristine, we should NOT clear the value of a conditionally hidden child component
-        // of a layout component that defaults to hidden using the "hidden" component property.
-        return !this.anyParentDefaultsHidden();
-    }
-    /**
-     * Returns if the component should clear its value when conditionally hidden.
-     * @returns {boolean} - If the component should clear its value when conditionally hidden.
-     */
-    shouldConditionallyClear() {
+    shouldConditionallyClear(skipParent = false) {
         // Skip if this component has clearOnHide set to false.
         if (this.component.clearOnHide === false) {
-            this._conditionallyClear = false;
-            return this._conditionallyClear;
+            return false;
         }
         // If the component is logically hidden, then it is conditionally hidden and should clear.
         if (this.logicallyHidden) {
-            this._conditionallyClear = true;
-            return this._conditionallyClear;
+            return true;
         }
         // If we have a condition and it is not conditionally visible, the it should conditionally clear.
-        if (this.hasCondition() &&
-            !this.conditionallyVisible() &&
-            (!this.rootPristine || this.shouldConditionallyClearOnPristine())) {
-            this._conditionallyClear = true;
-            return this._conditionallyClear;
+        if (this.hasCondition() && !this.conditionallyVisible()) {
+            return true;
+        }
+        if (skipParent) {
+            // Stop recurrsion for the parent checks.
+            return false;
+        }
+        // If this component has a set value, then it should ONLY clear if a parent is hidden
+        // and has the clearOnHide set to true.
+        if (this.hasSetValue) {
+            return this.parentShouldConditionallyClear();
         }
-        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
-        return this._conditionallyClear;
+        // Clear the value if the parent is conditionally hidden.
+        return this.parentConditionallyHidden();
     }
-    /**
-     * Returns if the component is conditionally hidden.
-     * @returns {boolean} - If the component is conditionally hidden.
-     */
-    conditionallyHidden() {
-        // If it is logically hidden, then it is conditionally hidden.
+    conditionallyHidden(skipParent = false) {
         if (this.logicallyHidden) {
-            this._conditionallyHidden = true;
-            return this._conditionallyHidden;
+            return true;
         }
-        // If it has a condition, and is not conditionally visible, then it is conditionally hidden.
-        if (this.hasCondition() && !this.conditionallyVisible()) {
-            this._conditionallyHidden = true;
-            return this._conditionallyHidden;
+        if (!this.hasCondition() && !skipParent) {
+            return this.parentConditionallyHidden();
+        }
+        // Return if we are not conditionally visible (conditionallyHidden)
+        if (!this.conditionallyVisible()) {
+            return true;
+        }
+        if (skipParent) {
+            // Stop recurrsion for the parent checks.
+            return false;
         }
-        // It is conditionally hidden if its parent is conditionally hidden.
-        this._conditionallyHidden = this.parentConditionallyHidden();
-        return this._conditionallyHidden;
+        // Check the parent.
+        return this.parentConditionallyHidden();
     }
     get currentForm() {
         return this._currentForm;
@@ -3001,9 +2967,11 @@ export default class Component extends Element {
      * @param {boolean} dirty - If the component is dirty.
      * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.
      * @param {*} row - Contextual row data for this component.
+     * @param {*} options - Additional options for validation.
      * @returns {string} - The message to show when the component is invalid.
      */
-    invalidMessage(data, dirty, ignoreCondition, row) {
+    invalidMessage(data, dirty, ignoreCondition, row, options = {}) {
+        const { local } = options;
         if (!row) {
             row = getContextualRowData(this.component, data, this.paths);
         }
@@ -3023,6 +2991,7 @@ export default class Component extends Element {
             component: this.component,
             data,
             row,
+            local,
             path: this.path || this.component.key,
             parent: this.parent?.component,
             paths: this.paths,
@@ -3199,7 +3168,7 @@ export default class Component extends Element {
         row = row || this.data;
         // Some components (for legacy reasons) have calls to "checkData" in inappropriate places such
         // as setValue. Historically, this was bypassed by a series of cached states around the data model
-        // which caused its own problems. We need to ensure that premium and custom components do not fall into 
+        // which caused its own problems. We need to ensure that premium and custom components do not fall into
         // an infinite loop by only checking this component once.
         if (this.checkingData) {
             return;

package/lib/mjs/components/editgrid/EditGrid.js

@@ -1099,7 +1099,9 @@ export default class EditGridComponent extends NestedArrayComponent {
             errors.push(...this._errors);
             return false;
         }
-        const message = this.invalid || this.invalidMessage(data, dirty, false, row);
+        // TODO: this is the only place invalidMessage gets called, and it's not clear why it's needed - we already validate the editGrid
+        // component above with super.checkComponentValidity
+        const message = this.invalid || this.invalidMessage(data, dirty, false, row, options);
         if (allRowErrors.length && this.root?.submitted && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);

package/lib/mjs/components/form/Form.d.ts

@@ -98,6 +98,7 @@ export default class FormComponent extends Component {
      * @returns {void}
      */
     onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
+    areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**
      * Determines if this form is a Nested Wizard

package/lib/mjs/components/form/Form.js

@@ -96,9 +96,6 @@ export default class FormComponent extends Component {
         }
         return this.createSubForm();
     }
-    shouldConditionallyClearOnPristine() {
-        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();
-    }
     get dataReady() {
         return this.subForm?.dataReady || this.subFormReady || Promise.resolve();
     }
@@ -289,13 +286,11 @@ export default class FormComponent extends Component {
                     }
                     this.subForm.attach(element);
                     this.valueChanged = this.hasSetValue;
-                    if (!this.shouldConditionallyClear()) {
-                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {
-                            this.setDefaultValue();
-                        }
-                        else {
-                            this.restoreValue();
-                        }
+                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {
+                        this.setDefaultValue();
+                    }
+                    else {
+                        this.restoreValue();
                     }
                 }
                 if (!this.builderMode && this.component.modalEdit) {
@@ -410,7 +405,7 @@ export default class FormComponent extends Component {
                 _.assign(componentsMap, formComponentsMap);
                 this.component.components = this.subForm.components.map((comp) => comp.component);
                 this.subForm.on('change', () => {
-                    if (this.subForm && !this.shouldConditionallyClear()) {
+                    if (this.subForm) {
                         this.dataValue = this.subForm.getValue();
                         this.triggerChange({
                             noEmit: true
@@ -673,7 +668,20 @@ export default class FormComponent extends Component {
         }
     }
     isEmpty(value = this.dataValue) {
-        return value === null || _.isEqual(value, this.emptyValue);
+        return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value?.data) && !value?._id);
+    }
+    areAllComponentsEmpty(data) {
+        let res = true;
+        if (this.subForm) {
+            this.subForm.everyComponent((comp) => {
+                const componentValue = _.get(data, comp.key);
+                res &= comp.isEmpty(componentValue);
+            });
+        }
+        else {
+            res = false;
+        }
+        return res;
     }
     getValue() {
         if (this.subForm) {

package/lib/mjs/components/select/editForm/Select.edit.data.d.ts

@@ -17,8 +17,8 @@ declare const _default: ({
     tooltip?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -59,8 +59,8 @@ declare const _default: ({
         };
     };
     data?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -88,6 +88,7 @@ declare const _default: ({
     key: string;
     tooltip: string;
     weight: number;
+    defaultValue: boolean;
     conditional: {
         json: {
             and: ({
@@ -110,7 +111,6 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     reorder?: undefined;
-    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -220,8 +220,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     skipMerge?: undefined;
     refreshOn?: undefined;
@@ -256,8 +256,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -328,8 +328,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
     placeholder?: undefined;
@@ -363,8 +363,8 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
     valueProperty?: undefined;
@@ -395,8 +395,8 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -436,8 +436,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -478,8 +478,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -626,8 +626,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -669,8 +669,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -718,8 +718,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
     template?: undefined;
@@ -932,8 +932,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -965,8 +965,8 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1035,8 +1035,8 @@ declare const _default: ({
     tooltip?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1115,8 +1115,8 @@ declare const _default: ({
     label?: undefined;
     tooltip?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1150,8 +1150,8 @@ declare const _default: ({
     tooltip?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -77,6 +77,7 @@ export default [
         key: 'lazyLoad',
         tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\'s will only fire when the control is activated.',
         weight: 11,
+        defaultValue: true,
         conditional: {
             json: {
                 and: [

package/lib/mjs/components/survey/Survey.js

@@ -118,7 +118,7 @@ export default class SurveyComponent extends Field {
         return this.component.questions.reduce((result, question) => result && Boolean(value[question.value]), true);
     }
     getInputName(question) {
-        return `${this.options.name}[${question.value}]`;
+        return `${this.options.name}[${question.value}][${this.id}]`;
     }
     getValueAsString(value, options) {
         if (options?.email) {

package/lib/mjs/components/textarea/TextArea.js

@@ -57,7 +57,15 @@ export default class TextAreaComponent extends TextFieldComponent {
         info.content = value;
         if ((this.options.readOnly || this.disabled) && !this.isHtmlRenderMode()) {
             const elementStyle = this.info.attr.style || '';
-            const children = `<div ${this._referenceAttributeName}="input" class="formio-editor-read-only-content" ${elementStyle ? `style='${elementStyle}'` : ''}></div>`;
+            const children = `
+        <div ${this._referenceAttributeName}="input" 
+          class="formio-editor-read-only-content" 
+          ${elementStyle ? `style='${elementStyle}'` : ''}
+          role="textbox"
+          aria-multiline="true"
+          aria-readonly="true"
+        >
+        </div>`;
             return this.renderTemplate('well', {
                 children,
                 nestedKey: this.key,

package/lib/mjs/components/unknown/Unknown.form.d.ts

@@ -1,5 +1,6 @@
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
-export default function _default(): object;
+export default function _default(...extend: any[]): object;

package/lib/mjs/components/unknown/Unknown.form.js

@@ -1,22 +1,26 @@
+import { unionWith } from 'lodash';
 import UnknownEditDisplay from './editForm/Unknown.edit.display';
+import EditFormUtils from '../../components/_classes/component/editForm/utils';
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
-export default function () {
+export default function (...extend) {
+    const components = [
+        {
+            label: 'Custom',
+            key: 'display',
+            weight: 0,
+            components: UnknownEditDisplay
+        }
+    ].concat(...extend);
     return {
         components: [
             {
                 type: 'tabs',
                 key: 'tabs',
-                components: [
-                    {
-                        label: 'Custom',
-                        key: 'display',
-                        weight: 0,
-                        components: UnknownEditDisplay
-                    }
-                ]
+                components: unionWith(components, EditFormUtils.unifyComponents)
             }
         ]
     };

package/lib/mjs/utils/formUtils.d.ts

@@ -26,8 +26,8 @@ export const getBestMatch: typeof Utils.getBestMatch;
 export const getComponentFromPath: typeof Utils.getComponentFromPath;
 export const getComponentValue: typeof Utils.getComponentValue;
 export const findComponents: typeof Utils.findComponents;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => void;
+export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => Promise<void>;
+export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;

package/lib/mjs/utils/utils.js

@@ -8,6 +8,7 @@ import dompurify from 'dompurify';
 import { getValue } from './formUtils';
 import { Evaluator } from './Evaluator';
 import ConditionOperators from './conditionOperators';
+import { convertShowToBoolean } from '@formio/core';
 const interpolate = Evaluator.interpolate;
 export * from './formUtils';
 // Configure JsonLogic
@@ -236,7 +237,7 @@ export function checkSimpleConditional(component, condition, row, data, instance
             default:
                 result = _.every(conditionsResult.flat(), res => !!res);
         }
-        return show ? result : !result;
+        return convertShowToBoolean(show) ? result : !result;
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-dev.6068.fbce2f7",
+  "version": "5.1.0-dev.6070.c51663f",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -81,7 +81,7 @@
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
     "@formio/bootstrap": "v3.0.0-dev.121.085d187",
-    "@formio/core": "v2.4.0-dev.2",
+    "@formio/core": "v2.4.0-dev.232.d91b1e4",
     "@formio/text-mask-addons": "3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",