formio · mikekotikov · Oct 4, 2024 · Oct 14, 2024 · Oct 17, 2024 · Oct 23, 2024
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
   "dependencies": {
     "@formio/bootstrap": "3.0.0-dev.98.17ba6ea",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "v2.1.0-dev.174.9a3c6ec",
+    "@formio/core": "2.1.0-dev.183.b3387fc",
     "@formio/text-mask-addons": "^3.8.0-formio.3",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",

diff --git a/src/components/_classes/component/Component.js b/src/components/_classes/component/Component.js
@@ -3,7 +3,7 @@
 import tippy from 'tippy.js';
 import _ from 'lodash';
 import isMobile from 'ismobilejs';
-import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
+import { processOne, processOneSync, validateProcessInfo, conditionProcessInfo } from '@formio/core/process';
 
 import { Formio } from '../../../Formio';
 import * as FormioUtils from '../../../utils/utils';
@@ -227,7 +227,7 @@
    * @param options
    */
   /* eslint-disable no-unused-vars */
-  static tableView(value, options) {}
+  static tableView(value, options) { }
   /* eslint-enable no-unused-vars */
 
   /**
@@ -867,9 +867,9 @@
   labelIsHidden() {
     return !this.component.label ||
       ((!this.isInDataGrid && this.component.hideLabel) ||
-      (this.isInDataGrid && !this.component.dataGridLabel) ||
-      this.options.floatingLabels ||
-      this.options.inputsOnly) && !this.builderMode;
+        (this.isInDataGrid && !this.component.dataGridLabel) ||
+        this.options.floatingLabels ||
+        this.options.inputsOnly) && !this.builderMode;
   }
 
   transform(type, value) {
@@ -1056,7 +1056,7 @@
       settings.shadowRoot = this.root.shadowRoot;
     }
 
-    const widget = settings && Widgets[settings.type] ? new Widgets[settings.type](settings, this.component, this): null;
+    const widget = settings && Widgets[settings.type] ? new Widgets[settings.type](settings, this.component, this) : null;
     return widget;
   }
 
@@ -1278,7 +1278,7 @@
     const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
     const tooltipDataTitle = tooltipEl.getAttribute('data-title');
     const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
-                            .replace(/(?:\r\n|\r|\n)/g, '<br />');
+      .replace(/(?:\r\n|\r|\n)/g, '<br />');
 
     return tippy(tooltipEl, {
       allowHTML: true,
@@ -1733,7 +1733,7 @@
     const handleCloseClick = (e) => {
       if (confirm) {
         confirm().then(() => close(e))
-        .catch(() => {});
+          .catch(() => { });
       }
       else {
         close(e);
@@ -1763,7 +1763,7 @@
    * @returns {string} - The class name of this component.
    */
   get className() {
-    let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback `: '';
+    let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';
     className += `formio-component formio-component-${this.component.type} `;
     // TODO: find proper way to avoid overriding of default type-based component styles
     if (this.key && this.key !== 'form') {
@@ -1957,7 +1957,7 @@
    * @returns {string} - The error message configured for this component.
    */
   errorMessage(type) {
-    return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] :  type;
+    return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;
   }
 
   /**
@@ -2137,6 +2137,7 @@
    * @param {any} row - The row data to check against.
    * @returns {boolean} - TRUE if the component is visible.
    */
+
   checkComponentConditions(data, flags, row) {
     data = data || this.rootValue;
     flags = flags || {};
@@ -2146,9 +2147,37 @@
       this.redraw();
     }
 
+    let pathCorrect = this.path;
+
+    if (this.parent?.type !== 'datagrid') {
+      pathCorrect = this.path.replace(/\[[0-9]+\]/g, '');
+    }
+
     // Check advanced conditions
-    const visible = this.conditionallyVisible(data, row);
+    const processContext = {
+      component: this.component,
+      data,
+      row,
+      value: this.validationValue,
+      path: pathCorrect || this.component.key,
+      instance: this,
+      scope: { errors: [] },
+      form: this.root,
+      processors: [
+        conditionProcessInfo
+      ]
+    };
 
+    let visible = true;
+    if (this.builderMode || this.previewMode || !this.hasCondition()) {
+      visible = !this.component.hidden;
+    }
+    else {
+      processOneSync(processContext);
+      const componentPath = pathCorrect || this.component.key;
+      const componentCondition = processContext.scope?.conditionals?.find(x => x.path === componentPath);
+      visible = !componentCondition?.conditionallyHidden;
+    }
     if (this.visible !== visible) {
       this.visible = visible;
     }
@@ -2346,11 +2375,11 @@
             value: _.clone(oldValue),
             data,
             row,
-			input: oldValue,
+            input: oldValue,
             component: newComponent,
             result,
           },
-          'value');
+            'value');
 
           if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
             this.setValue(newValue);
@@ -2621,8 +2650,8 @@
       'ckeditor',
       isIEBrowser ? 'CKEDITOR' : 'ClassicEditor',
       _.get(this.options, 'editors.ckeditor.src',
-      `${Formio.cdn.ckeditor}/ckeditor.js`
-    ), true)
+        `${Formio.cdn.ckeditor}/ckeditor.js`
+      ), true)
       .then(() => {
         if (!element.parentNode) {
           return Promise.reject();
@@ -2846,7 +2875,7 @@
 
   getCustomDefaultValue(defaultValue) {
     if (this.component.customDefaultValue && !this.options.preview) {
-     defaultValue = this.evaluate(
+      defaultValue = this.evaluate(
         this.component.customDefaultValue,
         { value: '' },
         'value'
@@ -2969,7 +2998,7 @@

  /**
   * Returns if the value (e.g. array) should be divided between several inputs
   * @returns {boolean}
   */
  isSingleInputValue() {
    return false;
@@ -3136,21 +3165,21 @@
   }
 
   convertNumberOrBoolToString(value) {
-    if (typeof value === 'number' || typeof value === 'boolean' ) {
+    if (typeof value === 'number' || typeof value === 'boolean') {
       return value.toString();
     }
     return value;
   }
 
   doValueCalculation(dataValue, data, row) {
-      return this.evaluate(this.component.calculateValue, {
-        value: dataValue,
-        data,
-        row: row || this.data,
-        submission: this.root?._submission || {
-          data: this.rootValue
-        }
-      }, 'value');
+    return this.evaluate(this.component.calculateValue, {
+      value: dataValue,
+      data,
+      row: row || this.data,
+      submission: this.root?._submission || {
+        data: this.rootValue
+      }
+    }, 'value');
   }
 
   /* eslint-disable max-statements */
@@ -3833,7 +3862,7 @@
   getRelativePath(path) {
     const keyPart = `.${this.key}`;
     const thisPath = this.isInputComponent ? this.path
-                                           : this.path.slice(0).replace(keyPart, '');
+      : this.path.slice(0).replace(keyPart, '');
     return path.replace(thisPath, '');
   }
 
@@ -4003,15 +4032,15 @@
     return formio;
   }
 
-  resetCaches() {}
+  resetCaches() { }
 
   get previewMode() {
     return false;
   }
 }
 
 Component.externalLibraries = {};
-Component.requireLibrary = function(name, property, src, polling) {
+Component.requireLibrary = function (name, property, src, polling) {
   if (!Component.externalLibraries.hasOwnProperty(name)) {
     Component.externalLibraries[name] = {};
     Component.externalLibraries[name].ready = new Promise((resolve, reject) => {
@@ -4022,7 +4051,7 @@
     const callbackName = `${name}Callback`;
 
     if (!polling && !window[callbackName]) {
-      window[callbackName] = function() {
+      window[callbackName] = function () {
         this.resolve();
       }.bind(Component.externalLibraries[name]);
     }
@@ -4087,7 +4116,7 @@
   return Component.externalLibraries[name].ready;
 };
 
-Component.libraryReady = function(name) {
+Component.libraryReady = function (name) {
   if (
     Component.externalLibraries.hasOwnProperty(name) &&
     Component.externalLibraries[name].ready

diff --git a/src/components/select/Select.js b/src/components/select/Select.js
@@ -1487,7 +1487,6 @@ export default class SelectComponent extends ListComponent {
         }
         templateData[value] = this.templateData[value];
       }
-
       _.set(submission.metadata.selectData, this.path, templateData);
     }
     if (flags.resetValue && this.root?.submission && !this.options.readOnly) {

diff --git a/test/unit/Webform.unit.js b/test/unit/Webform.unit.js
@@ -3310,8 +3310,8 @@ describe('Webform tests', function() {
           setTimeout(() => {
             assert.equal(conditionalComponent.visible, false, '(3) Component should be conditionally visible');
             done();
-          }, 300);
-        }, 300);
+          }, 500);
+        }, 500);
       }).catch((err) => done(err));
     });
   });

diff --git a/yarn.lock b/yarn.lock
@@ -381,15 +381,15 @@
     fuse.js "^6.6.2"
     redux "^4.2.0"
 
-"@formio/core@v2.1.0-dev.174.9a3c6ec":
-  version "2.1.0-dev.174.9a3c6ec"
-  resolved "https://registry.yarnpkg.com/@formio/core/-/core-2.1.0-dev.174.9a3c6ec.tgz#f223b5ce4f374a9f4e922dada0af7c029320e035"
-  integrity sha512-QQK04dP0xBFa3vuhiOi+TUP8Zwqlg38qxzHgDmBwSlRO5XqQIObPJpSSnv2VA8H7fBWWiV2g7AErHBxugJW7Rw==
+"@formio/core@2.1.0-dev.183.b3387fc":
+  version "2.1.0-dev.183.b3387fc"
+  resolved "https://registry.yarnpkg.com/@formio/core/-/core-2.1.0-dev.183.b3387fc.tgz#c10a87daff08018484e7d7e2b85dd88190f77253"
+  integrity sha512-aev1pLaLsmlNLYMo0zVyHD+jXWy7rjuA5jtphCcTVGqVza7p3rNDy22iwv0FvJR5e3ruWiUzo3nzqh6C2okURw==
   dependencies:
     browser-cookies "^1.2.0"
     core-js "^3.38.0"
     dayjs "^1.11.12"
-    dompurify "^3.1.6"
+    dompurify "^3.1.7"
     eventemitter3 "^5.0.0"
     fast-json-patch "^3.1.1"
     fetch-ponyfill "^7.1.0"
@@ -2498,6 +2498,11 @@ dompurify@^3.1.6:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2"
   integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==
 
+dompurify@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.7.tgz#711a8c96479fb6ced93453732c160c3c72418a6a"
+  integrity sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==
+
 downloadjs@^1.4.7:
   version "1.4.7"
   resolved "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz#f69f96f940e0d0553dac291139865a3cd0101e3c"
@@ -7319,7 +7324,7 @@ string-replace-loader@^3.1.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7337,15 +7342,6 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-string-width@^4.1.0, string-width@^4.2.0:
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -7406,7 +7402,7 @@ stringifier@^1.3.0:
     traverse "^0.6.6"
     type-name "^2.0.1"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -7427,13 +7423,6 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -8496,7 +8485,7 @@ [email protected]:
   resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -8522,15 +8511,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
-Original file line number
+Diff line change
@@ Expand Up @@
             }
             templateData[value] = this.templateData[value];
           }
           _.set(submission.metadata.selectData, this.path, templateData);
         }
         if (flags.resetValue && this.root?.submission && !this.options.readOnly) {
@@ Expand Down @@