@formio/js 5.0.0-rc.18 → 5.0.0-rc.19

package/dist/formio.utils.min.js.LICENSE.txt

@@ -17,7 +17,7 @@
     MIT License: http://getify.mit-license.org
 */
 
-/*! formiojs v5.0.0-rc.18 | https://unpkg.com/formiojs@5.0.0-rc.18/LICENSE.txt */
+/*! formiojs v5.0.0-rc.19 | https://unpkg.com/formiojs@5.0.0-rc.19/LICENSE.txt */
 
 /**
  * @license

package/lib/cjs/Wizard.js

@@ -503,8 +503,8 @@ class Wizard extends Webform_1.default {
                         item.key = item.title;
                     }
                     let page = currentPages[item.key];
-                    const forceShow = this.options.show ? this.options.show[item.key] : false;
-                    const forceHide = this.options.hide ? this.options.hide[item.key] : false;
+                    const forceShow = this.shouldForceShow(item);
+                    const forceHide = this.shouldForceHide(item);
                     let isVisible = !page
                         ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden
                         : page.visible;

package/lib/cjs/components/_classes/component/Component.d.ts

@@ -184,6 +184,9 @@ declare class Component extends Element {
     get parentVisible(): any;
     set parentDisabled(arg: boolean);
     get parentDisabled(): boolean;
+    shouldForceVisibility(component: any, visibility: any): any;
+    shouldForceHide(component: any): any;
+    shouldForceShow(component: any): any;
     /**
      *
      * @param value {boolean}

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

@@ -552,12 +552,38 @@ class Component extends Element_1.default {
     get parentDisabled() {
         return this._parentDisabled;
     }
+    shouldForceVisibility(component, visibility) {
+        if (!this.options[visibility]) {
+            return false;
+        }
+        if (!component) {
+            component = this.component;
+        }
+        if (lodash_1.default.isArray(this.options[visibility])) {
+            return this.options[visibility].includes(component.key);
+        }
+        return this.options[visibility][component.key];
+    }
+    shouldForceHide(component) {
+        return this.shouldForceVisibility(component, 'hide');
+    }
+    shouldForceShow(component) {
+        return this.shouldForceVisibility(component, 'show');
+    }
     /**
      *
      * @param value {boolean}
      */
     set visible(value) {
         if (this._visible !== value) {
+            // Skip if this component is set to visible and is supposed to be hidden.
+            if (value && this.shouldForceHide()) {
+                return;
+            }
+            // Skip if this component is set to hidden and is supposed to be shown.
+            if (!value && this.shouldForceShow()) {
+                return;
+            }
             this._visible = value;
             this.clearOnHide();
             this.redraw();
@@ -572,12 +598,10 @@ class Component extends Element_1.default {
         if (this.builderMode || this.previewMode || this.options.showHiddenFields) {
             return true;
         }
-        if (this.options.hide &&
-            this.options.hide[this.component.key]) {
+        if (this.shouldForceHide()) {
             return false;
         }
-        if (this.options.show &&
-            this.options.show[this.component.key]) {
+        if (this.shouldForceShow()) {
             return true;
         }
         return this._visible && this._parentVisible;

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -50,8 +50,8 @@ class NestedComponent extends Field_1.default {
         const visibilityChanged = this._visible !== value;
         this._visible = value;
         const isVisible = this.visible;
-        const forceShow = this.options.show && this.options.show[this.component.key];
-        const forceHide = this.options.hide && this.options.hide[this.component.key];
+        const forceShow = this.shouldForceShow();
+        const forceHide = this.shouldForceHide();
         this.components.forEach(component => {
             // Set the parent visibility first since we may have nested components within nested components
             // and they need to be able to determine their visibility based on the parent visibility.

package/lib/mjs/Wizard.js

@@ -497,8 +497,8 @@ export default class Wizard extends Webform {
                         item.key = item.title;
                     }
                     let page = currentPages[item.key];
-                    const forceShow = this.options.show ? this.options.show[item.key] : false;
-                    const forceHide = this.options.hide ? this.options.hide[item.key] : false;
+                    const forceShow = this.shouldForceShow(item);
+                    const forceHide = this.shouldForceHide(item);
                     let isVisible = !page
                         ? checkCondition(item, data, data, this.component, this) && !item.hidden
                         : page.visible;

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -184,6 +184,9 @@ declare class Component extends Element {
     get parentVisible(): any;
     set parentDisabled(arg: boolean);
     get parentDisabled(): boolean;
+    shouldForceVisibility(component: any, visibility: any): any;
+    shouldForceHide(component: any): any;
+    shouldForceShow(component: any): any;
     /**
      *
      * @param value {boolean}

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

@@ -522,12 +522,38 @@ export default class Component extends Element {
     get parentDisabled() {
         return this._parentDisabled;
     }
+    shouldForceVisibility(component, visibility) {
+        if (!this.options[visibility]) {
+            return false;
+        }
+        if (!component) {
+            component = this.component;
+        }
+        if (_.isArray(this.options[visibility])) {
+            return this.options[visibility].includes(component.key);
+        }
+        return this.options[visibility][component.key];
+    }
+    shouldForceHide(component) {
+        return this.shouldForceVisibility(component, 'hide');
+    }
+    shouldForceShow(component) {
+        return this.shouldForceVisibility(component, 'show');
+    }
     /**
      *
      * @param value {boolean}
      */
     set visible(value) {
         if (this._visible !== value) {
+            // Skip if this component is set to visible and is supposed to be hidden.
+            if (value && this.shouldForceHide()) {
+                return;
+            }
+            // Skip if this component is set to hidden and is supposed to be shown.
+            if (!value && this.shouldForceShow()) {
+                return;
+            }
             this._visible = value;
             this.clearOnHide();
             this.redraw();
@@ -542,12 +568,10 @@ export default class Component extends Element {
         if (this.builderMode || this.previewMode || this.options.showHiddenFields) {
             return true;
         }
-        if (this.options.hide &&
-            this.options.hide[this.component.key]) {
+        if (this.shouldForceHide()) {
             return false;
         }
-        if (this.options.show &&
-            this.options.show[this.component.key]) {
+        if (this.shouldForceShow()) {
             return true;
         }
         return this._visible && this._parentVisible;

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -46,8 +46,8 @@ export default class NestedComponent extends Field {
         const visibilityChanged = this._visible !== value;
         this._visible = value;
         const isVisible = this.visible;
-        const forceShow = this.options.show && this.options.show[this.component.key];
-        const forceHide = this.options.hide && this.options.hide[this.component.key];
+        const forceShow = this.shouldForceShow();
+        const forceHide = this.shouldForceHide();
         this.components.forEach(component => {
             // Set the parent visibility first since we may have nested components within nested components
             // and they need to be able to determine their visibility based on the parent visibility.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.18",
+  "version": "5.0.0-rc.19",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -78,12 +78,12 @@
     "@formio/core": "1.3.0-rc.15",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
-    "autocompleter": "^8.0.3",
+    "autocompleter": "^8.0.4",
     "bootstrap": "^5.3.0",
     "browser-cookies": "^1.2.0",
     "browser-md5-file": "^1.1.1",
-    "compare-versions": "^6.0.0-rc.1",
-    "core-js": "^3.30.2",
+    "compare-versions": "^6.0.0-rc.2",
+    "core-js": "^3.31.0",
     "dialog-polyfill": "^0.5.6",
     "dom-autoscroller": "^2.3.4",
     "dompurify": "^3.0.3",
@@ -93,7 +93,7 @@
     "fast-deep-equal": "^3.1.3",
     "fast-json-patch": "^3.1.1",
     "fetch-ponyfill": "^7.1.0",
-    "i18next": "22.5.1",
+    "i18next": "23.2.3",
     "idb": "^7.1.1",
     "ismobilejs": "^1.1.1",
     "json-logic-js": "^2.0.2",
@@ -112,8 +112,8 @@
     "vanilla-picker": "^2.12.1"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
     "async-limiter": "^2.0.0",
     "bootstrap-icons": "^1.10.5",
     "bootswatch": "^5.3.0",
@@ -125,7 +125,7 @@
     "esdoc": "^1.1.0",
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
     "eslint-config-formio": "^1.1.4",
     "fetch-mock": "^9.11.0",
     "file-loader": "^6.2.0",
@@ -160,14 +160,14 @@
     "pretty": "^2.0.0",
     "pygments-css": "^1.0.0",
     "raw-loader": "^4.0.2",
-    "sass": "^1.63.2",
+    "sass": "^1.63.6",
     "shortcut-buttons-flatpickr": "^0.4.0",
-    "sinon": "^15.1.0",
+    "sinon": "^15.2.0",
     "string-replace-loader": "^3.1.0",
-    "ts-loader": "^9.4.3",
+    "ts-loader": "^9.4.4",
     "ts-node": "^10.9.1",
     "typescript": "~5.0.4",
-    "webpack": "^5.85.0",
+    "webpack": "^5.88.1",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^5.1.1",
     "webpack-node-externals": "^3.0.0",