Merge branch 'master' into feature/files-synchronization-5x

Changelog.md

@@ -29,7 +29,21 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - FIO-7146: formiojs-circleci-to-ghactions
  - FIO-6859: update-s3-to-accept-headers-from-signer-presign
  - FIO 7239: support for AWS S3 Multipart Upload
- - FIO-7239: add polyfill and include token in abort and complete requests for multipart upload
+ - FIO-7239: add polyfill and include token in abort and complete requests for multipart upload2
+ - FIO-7429: removed columns component settings(pull, offset, push)
+ - FIO-7466: Tooltips fix
+ - FIO-7355: fixed issue with HTML5 select flickering on initial click
+ - FIO-7530: added ability to pass onSetItems component setting as a string (needed for builder mode)
+ - FIO-7528: Revert FIO-4405: fixed an issue where walidation error displays with empty value even if it is not required (#4746)
+ - FIO-7547: Container hidden with conditional logic still appears in submission #5401
+ - FIO-7550: Fixing choices css issue
+ - FIO-7074/FIO-7379: Fixes some issues caused by Wizzard was not always setting _data to submission data
+ - FIO-7208: Moved Tree component to the contrib library
+ - FIO-7406 Fixed plain Textarea interpolating data in readonly mode [#5396](https://github.com/formio/formio.js/pull/5383)
+ - FIO-7112: fixed issues with calendar widget display for value components in new simple conditionals ui
+
+### Changed
+ - Add capability for adding sanitize profiles through sanitizeConfig in options
 
 ## 5.0.0-rc.26
 ### Changed

gulpfile.js

@@ -75,7 +75,7 @@ gulp.task('styles-builder', function builderStyles() {
 });
 gulp.task('styles-full', gulp.series('builder-fonts', function fullStyles() {
   return compileStyles([
-    './node_modules/@formio/choices.js/public/assets/styles/choices.min.css',
+    './node_modules/@formio/choices.js/public/assets/styles/choices.css',
     './node_modules/tippy.js/dist/tippy.css',
     './node_modules/dialog-polyfill/dialog-polyfill.css',
     './node_modules/dragula/dist/dragula.css',

src/Wizard.js

@@ -897,25 +897,23 @@ export default class Wizard extends Webform {
   }
 
   setValue(submission, flags = {}, ignoreEstablishment) {
-    this._submission = submission;
-    if (
-      (flags && flags.fromSubmission && (this.options.readOnly || this.editMode) && !this.isHtmlRenderMode()) ||
-      (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id) ||
-      (this.options.server && (this.prefixComps.length || this.suffixComps.length))
-    ) {
-      this._data = submission.data;
-    }
-
-    if (!ignoreEstablishment) {
-      this.establishPages(submission.data);
-    }
     const changed = this.getPages({ all: true }).reduce((changed, page) => {
       return this.setNestedValue(page, submission.data, flags, changed) || changed;
     }, false);
 
+    this.mergeData(this.data, submission.data);
+
     if (changed) {
       this.pageFieldLogic(this.page);
     }
+
+    submission.data = this.data;
+    this._submission = submission;
+
+    if (!ignoreEstablishment) {
+      this.establishPages(submission.data);
+    }
+
     this.setEditMode(submission);
 
     return changed;

src/components/_classes/component/Component.js

@@ -211,7 +211,12 @@ export default class Component extends Element {
     return {
       operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],
       valueComponent() {
-        return { type: 'textfield' };
+        return {
+          type: 'textfield',
+          widget: {
+            type: 'input'
+          }
+        };
       }
     };
   }
@@ -1223,7 +1228,7 @@ export default class Component extends Element {
           placement: 'right',
           zIndex: 10000,
           interactive: true,
-          content: this.t(tooltipText, { _userInput: true }),
+          content: this.t(this.sanitize(tooltipText), { _userInput: true }),
         });
       }
     });
@@ -3321,8 +3326,6 @@ export default class Component extends Element {
 
   shouldSkipValidation(data, dirty, row) {
     const rules = [
-      // Do not check custom validation for empty data if it is not required
-      () => this.component.validate.custom && !this.dataValue && !this.component.validate.required,
       // Force valid if component is read-only
       () => this.options.readOnly,
       // Do not check validations if component is not an input component.

src/components/_classes/component/Component.unit.js

@@ -9,6 +9,7 @@ import { comp1 } from './fixtures';
 import _merge from 'lodash/merge';
 import comp3 from './fixtures/comp3';
 import comp4 from './fixtures/comp4';
+import comp5 from './fixtures/comp5';
 
 describe('Component', () => {
   it('Should create a Component', (done) => {
@@ -356,4 +357,17 @@ describe('Component', () => {
       .catch(done);
     });
   });
+
+  it('Should not execute code inside Tooltips/Description', (done) => {
+    const formElement = document.createElement('div');
+    const form = new Webform(formElement);
+
+    form.setForm(comp5).then(() => {
+      setTimeout(() => {
+        assert.equal(window._ee, undefined, 'Should not execute code inside Tooltips/Description');
+        done();
+      }, 200);
+    })
+      .catch(done);
+  });
 });

src/components/_classes/component/fixtures/comp5.js

@@ -0,0 +1,24 @@
+export default {
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      label: 'Text Field',
+      description: "<img <img src='https://somesite' onerror='var _ee = 2' >",
+      tooltip: "<img src='https://somesite' onerror='var _ee = 1 >",
+      applyMaskOn: 'change',
+      tableView: true,
+      key: 'textField',
+      type: 'textfield',
+      input: true
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false
+    }
+  ],
+};

src/components/_classes/component/fixtures/index.js

@@ -2,4 +2,5 @@ import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
-export { comp1, comp2, comp3, comp4 };
+import comp5 from './comp5';
+export { comp1, comp2, comp3, comp4, comp5 };

src/components/_classes/nested/NestedComponent.js

@@ -617,7 +617,7 @@ export default class NestedComponent extends Field {
   clearOnHide(show) {
     super.clearOnHide(show);
     if (this.component.clearOnHide) {
-      if (this.allowData && !this.hasValue()) {
+      if (this.allowData && !this.hasValue() && !(this.options.server && !this.visible)) {
         this.dataValue = this.defaultValue;
       }
       if (this.hasValue()) {

src/components/builder.js

@@ -37,7 +37,6 @@ import TagsForm from './tags/Tags.form';
 import TextAreaForm from './textarea/TextArea.form';
 import TextfieldForm from './textfield/TextField.form';
 import TimeForm from './time/Time.form';
-import TreeForm from './tree/Tree.form';
 import UnknownForm from './unknown/Unknown.form';
 import UrlForm from './url/Url.form';
 import WellForm from './well/Well.form';
@@ -80,7 +79,6 @@ Components.tags.editForm = TagsForm;
 Components.textarea.editForm = TextAreaForm;
 Components.textfield.editForm = TextfieldForm;
 Components.time.editForm = TimeForm;
-Components.tree.editForm = TreeForm;
 Components.unknown.editForm = UnknownForm;
 Components.url.editForm = UrlForm;
 Components.well.editForm = WellForm;

src/components/columns/editForm/Columns.edit.display.js

@@ -84,24 +84,6 @@ export default [
         key: 'width',
         defaultValue: 6,
         label: 'Width'
-      },
-      {
-        type: 'number',
-        key: 'offset',
-        defaultValue: 0,
-        label: 'Offset'
-      },
-      {
-        type: 'number',
-        key: 'push',
-        defaultValue: 0,
-        label: 'Push'
-      },
-      {
-        type: 'number',
-        key: 'pull',
-        defaultValue: 0,
-        label: 'Pull'
       }
     ]
   },

src/components/container/Container.unit.js

@@ -6,7 +6,8 @@ import ContainerComponent from './Container';
 import {
   comp1,
   comp2,
-  comp3
+  comp3,
+  comp4,
 } from './fixtures';
 
 import { Formio } from '../../Formio';
@@ -77,4 +78,23 @@ describe('Container Component', () => {
       }, 100);
     }).catch(done);
   });
+
+  it('Should not set the default value when clearOnHide during the server-side validation', (done) => {
+    const form = _.cloneDeep(comp4);
+    const element = document.createElement('div');
+
+    Formio.createForm(element, form, { server: true, noDefaults: true }).then(form => {
+      form.setValue({ data: { checkbox: false } }, {
+        sanitize: true,
+      }, true);
+
+      form.checkConditions();
+      form.clearOnHide();
+
+      setTimeout(() => {
+        assert.deepEqual(form._data, { checkbox: false }, 'Should not add Container\'s key');
+        done();
+      }, 200);
+    }).catch(done);
+  });
 });

src/components/container/fixtures/comp4.js

@@ -0,0 +1,43 @@
+export default {
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      label: 'Checkbox',
+      tableView: false,
+      key: 'checkbox',
+      type: 'checkbox',
+      input: true,
+    },
+    {
+      label: 'Container',
+      tableView: false,
+      key: 'container',
+      conditional: {
+        show: true,
+        when: 'checkbox',
+        eq: 'true',
+      },
+      type: 'container',
+      input: true,
+      components: [
+        {
+          label: 'Text Field',
+          applyMaskOn: 'change',
+          tableView: true,
+          key: 'textField',
+          type: 'textfield',
+          input: true,
+        },
+      ],
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false,
+    },
+  ],
+};

src/components/container/fixtures/index.js

@@ -1,4 +1,5 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
-export { comp1, comp2, comp3 };
+import comp4 from './comp4';
+export { comp1, comp2, comp3, comp4 };

src/components/index.js

@@ -42,7 +42,6 @@ import TagsComponent from './tags/Tags';
 import TextAreaComponent from './textarea/TextArea';
 import TextFieldComponent from './textfield/TextField';
 import TimeComponent from './time/Time';
-import TreeComponent from './tree/Tree';
 import UnknownComponent from './unknown/Unknown';
 import UrlComponent from './url/Url';
 import WellComponent from './well/Well';
@@ -93,7 +92,6 @@ export default {
   textarea: TextAreaComponent,
   textfield: TextFieldComponent,
   time: TimeComponent,
-  tree: TreeComponent,
   unknown: UnknownComponent,
   url: UrlComponent,
   well: WellComponent,

src/components/select/Select.js

@@ -400,8 +400,10 @@ export default class SelectComponent extends ListComponent {
     }
 
     // Allow js processing (needed for form builder)
-    if (this.component.onSetItems && typeof this.component.onSetItems === 'function') {
-      const newItems = this.component.onSetItems(this, items);
+    if (this.component.onSetItems) {
+      const newItems = typeof this.component.onSetItems === 'function'
+        ? this.component.onSetItems(this, items)
+        : this.evaluate(this.component.onSetItems, { items: items }, 'items');
       if (newItems) {
         items = newItems;
       }
@@ -943,7 +945,11 @@ export default class SelectComponent extends ListComponent {
       }
 
       this.focusableElement = input;
-      this.addEventListener(input, 'focus', () => this.update());
+
+      if (this.component.dataSrc === 'custom') {
+        this.addEventListener(input, 'focus', () => this.updateCustomItems());
+      }
+
       this.addEventListener(input, 'keydown', (event) => {
         const { key } = event;
 

src/components/select/Select.unit.js

@@ -42,7 +42,7 @@ describe('Select Component', () => {
         assert.equal(component.dataValue.value, 'a');
         assert.equal(typeof component.dataValue , 'object');
         done();
-      }, 100);
+      }, 300);
     });
   });
 

src/components/textarea/TextArea.js

@@ -342,10 +342,10 @@ export default class TextAreaComponent extends TextFieldComponent {
     if (this.options.readOnly || this.disabled) {
       if (this.refs.input && this.refs.input[index]) {
         if (this.component.inputFormat === 'plain') {
-          this.refs.input[index].innerText = this.interpolate(value, {}, { noeval: true });
+          this.refs.input[index].innerText = this.isPlain ? value : this.interpolate(value, {}, { noeval: true });
         }
         else {
-          this.setContent(this.refs.input[index], this.interpolate(value, {}, { noeval: true }), this.shouldSanitizeValue);
+          this.setContent(this.refs.input[index], this.isPlain ? value : this.interpolate(value, {}, { noeval: true }), this.shouldSanitizeValue);
         }
       }
     }

src/components/textfield/TextField.js

@@ -44,6 +44,12 @@ export default class TextFieldComponent extends Input {
     return {
       ...super.conditionOperatorsSettings,
       operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes', 'endsWith', 'startsWith'],
+      valueComponent(classComp) {
+        return {
+          ...classComp,
+          type: 'textfield',
+        };
+      }
     };
   }