@formio/js 5.0.0 → 5.1.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/dist/formio.embed.js +1 -1
  2. package/dist/formio.embed.min.js +1 -1
  3. package/dist/formio.embed.min.js.LICENSE.txt +1 -1
  4. package/dist/formio.form.js +127 -116
  5. package/dist/formio.form.min.js +1 -1
  6. package/dist/formio.form.min.js.LICENSE.txt +3 -3
  7. package/dist/formio.full.js +128 -117
  8. package/dist/formio.full.min.js +1 -1
  9. package/dist/formio.full.min.js.LICENSE.txt +3 -3
  10. package/dist/formio.js +3013 -283
  11. package/dist/formio.min.js +1 -1
  12. package/dist/formio.min.js.LICENSE.txt +14 -2
  13. package/dist/formio.utils.js +60 -49
  14. package/dist/formio.utils.min.js +1 -1
  15. package/dist/formio.utils.min.js.LICENSE.txt +3 -3
  16. package/lib/cjs/Webform.d.ts +8 -1
  17. package/lib/cjs/Webform.js +40 -32
  18. package/lib/cjs/WebformBuilder.js +4 -12
  19. package/lib/cjs/Wizard.js +4 -11
  20. package/lib/cjs/components/Components.d.ts +0 -7
  21. package/lib/cjs/components/Components.js +1 -33
  22. package/lib/cjs/components/_classes/component/Component.d.ts +52 -7
  23. package/lib/cjs/components/_classes/component/Component.js +120 -42
  24. package/lib/cjs/components/_classes/component/editForm/Component.edit.data.js +2 -2
  25. package/lib/cjs/components/_classes/componentModal/ComponentModal.d.ts +1 -0
  26. package/lib/cjs/components/_classes/componentModal/ComponentModal.js +1 -0
  27. package/lib/cjs/components/_classes/nested/NestedComponent.d.ts +4 -19
  28. package/lib/cjs/components/_classes/nested/NestedComponent.js +54 -60
  29. package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.d.ts +2 -1
  30. package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js +7 -44
  31. package/lib/cjs/components/datagrid/DataGrid.d.ts +0 -1
  32. package/lib/cjs/components/datagrid/DataGrid.js +1 -45
  33. package/lib/cjs/components/datamap/DataMap.js +2 -3
  34. package/lib/cjs/components/editgrid/EditGrid.js +8 -11
  35. package/lib/cjs/components/form/Form.d.ts +8 -3
  36. package/lib/cjs/components/form/Form.js +31 -29
  37. package/lib/cjs/components/html/HTML.js +15 -3
  38. package/lib/cjs/components/selectboxes/SelectBoxes.js +0 -1
  39. package/lib/cjs/components/signature/Signature.d.ts +0 -1
  40. package/lib/cjs/components/signature/Signature.js +1 -1
  41. package/lib/cjs/utils/conditionOperators/DateGreaterThan.js +2 -2
  42. package/lib/cjs/utils/conditionOperators/IsEmptyValue.d.ts +2 -2
  43. package/lib/cjs/utils/conditionOperators/IsEmptyValue.js +2 -2
  44. package/lib/cjs/utils/conditionOperators/IsEqualTo.d.ts +2 -2
  45. package/lib/cjs/utils/conditionOperators/IsEqualTo.js +2 -2
  46. package/lib/cjs/utils/formUtils.d.ts +25 -14
  47. package/lib/cjs/utils/formUtils.js +11 -16
  48. package/lib/cjs/utils/utils.d.ts +1 -3
  49. package/lib/cjs/utils/utils.js +19 -35
  50. package/lib/mjs/Webform.d.ts +8 -1
  51. package/lib/mjs/Webform.js +37 -31
  52. package/lib/mjs/WebformBuilder.js +4 -12
  53. package/lib/mjs/Wizard.js +2 -8
  54. package/lib/mjs/components/Components.d.ts +0 -7
  55. package/lib/mjs/components/Components.js +1 -32
  56. package/lib/mjs/components/_classes/component/Component.d.ts +52 -7
  57. package/lib/mjs/components/_classes/component/Component.js +130 -43
  58. package/lib/mjs/components/_classes/component/editForm/Component.edit.data.js +2 -2
  59. package/lib/mjs/components/_classes/componentModal/ComponentModal.d.ts +1 -0
  60. package/lib/mjs/components/_classes/componentModal/ComponentModal.js +1 -0
  61. package/lib/mjs/components/_classes/nested/NestedComponent.d.ts +4 -19
  62. package/lib/mjs/components/_classes/nested/NestedComponent.js +55 -61
  63. package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts +2 -1
  64. package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js +8 -43
  65. package/lib/mjs/components/datagrid/DataGrid.d.ts +0 -1
  66. package/lib/mjs/components/datagrid/DataGrid.js +1 -45
  67. package/lib/mjs/components/datamap/DataMap.js +2 -3
  68. package/lib/mjs/components/editgrid/EditGrid.js +11 -11
  69. package/lib/mjs/components/form/Form.d.ts +8 -3
  70. package/lib/mjs/components/form/Form.js +32 -29
  71. package/lib/mjs/components/html/HTML.js +15 -3
  72. package/lib/mjs/components/selectboxes/SelectBoxes.js +0 -1
  73. package/lib/mjs/components/signature/Signature.d.ts +0 -1
  74. package/lib/mjs/components/signature/Signature.js +1 -1
  75. package/lib/mjs/utils/conditionOperators/DateGreaterThan.js +2 -2
  76. package/lib/mjs/utils/conditionOperators/IsEmptyValue.d.ts +2 -2
  77. package/lib/mjs/utils/conditionOperators/IsEmptyValue.js +2 -2
  78. package/lib/mjs/utils/conditionOperators/IsEqualTo.d.ts +2 -2
  79. package/lib/mjs/utils/conditionOperators/IsEqualTo.js +2 -2
  80. package/lib/mjs/utils/formUtils.d.ts +25 -14
  81. package/lib/mjs/utils/formUtils.js +2 -12
  82. package/lib/mjs/utils/utils.d.ts +1 -3
  83. package/lib/mjs/utils/utils.js +18 -33
  84. package/package.json +4 -4
@@ -6,7 +6,7 @@ import isMobile from 'ismobilejs';
6
6
  import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
7
7
  import { Formio } from '../../../Formio';
8
8
  import * as FormioUtils from '../../../utils/utils';
9
- import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone, getScriptPlugin } from '../../../utils/utils';
9
+ import { fastCloneDeep, boolValue, isInsideScopingComponent, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils/utils';
10
10
  import Element from '../../../Element';
11
11
  import ComponentModal from '../componentModal/ComponentModal';
12
12
  import Widgets from '../../../widgets';
@@ -221,6 +221,10 @@ export default class Component extends Element {
221
221
  * @private
222
222
  */
223
223
  this._hasCondition = null;
224
+ /**
225
+ * The row index for this component.
226
+ */
227
+ this._rowIndex = undefined;
224
228
  /**
225
229
  * References to dom elements
226
230
  */
@@ -231,11 +235,6 @@ export default class Component extends Element {
231
235
  this.options.components[component.type]) {
232
236
  _.merge(component, this.options.components[component.type]);
233
237
  }
234
- /**
235
- * The data path to this specific component instance.
236
- * @type {string}
237
- */
238
- this.path = component?.key || '';
239
238
  /**
240
239
  * An array of all the children components errors.
241
240
  */
@@ -304,15 +303,30 @@ export default class Component extends Element {
304
303
  * @type {Component}
305
304
  */
306
305
  this.parent = this.options.parent;
306
+ /**
307
+ * The component paths for this component.
308
+ * @type {import('@formio/core').ComponentPaths} - The component paths.
309
+ */
310
+ this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
311
+ ...this.parent?.paths,
312
+ dataIndex: this.options.rowIndex === undefined ? this.parent?.paths?.dataIndex : this.options.rowIndex
313
+ });
307
314
  this.options.name = this.options.name || 'data';
308
315
  this._path = '';
309
316
  // Needs for Nextgen Rules Engine
310
317
  this.resetCaches();
318
+ /**
319
+ * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
320
+ * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
321
+ * conditionallyHidden separately from "regular" visibility.
322
+ */
323
+ this._parentConditionallyHidden = this.options.hasOwnProperty('parentConditionallyHidden') ? this.options.parentConditionallyHidden : false;
324
+ this._conditionallyHidden = this.checkConditionallyHidden(null, data) || this._parentConditionallyHidden;
311
325
  /**
312
326
  * Determines if this component is visible, or not.
313
327
  */
314
328
  this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;
315
- this._visible = this._parentVisible && this.conditionallyVisible(null, data);
329
+ this._visible = this._parentVisible && (this.hasCondition() ? !this._conditionallyHidden : !this.component.hidden);
316
330
  this._parentDisabled = false;
317
331
  /**
318
332
  * The reference attribute name for this component
@@ -381,7 +395,7 @@ export default class Component extends Element {
381
395
  if (this.allowData && this.key) {
382
396
  this.options.name += `[${this.key}]`;
383
397
  // If component is visible or not set to clear on hide, set the default value.
384
- if (this.visible || !this.component.clearOnHide) {
398
+ if (!(this.conditionallyHidden && this.component.clearOnHide)) {
385
399
  if (!this.hasValue()) {
386
400
  if (this.shouldAddDefaultValue) {
387
401
  this.dataValue = this.defaultValue;
@@ -409,12 +423,7 @@ export default class Component extends Element {
409
423
  }
410
424
  /* eslint-enable max-statements */
411
425
  get componentsMap() {
412
- if (this.localRoot?.childComponentsMap) {
413
- return this.localRoot.childComponentsMap;
414
- }
415
- const localMap = {};
416
- localMap[this.path] = this;
417
- return localMap;
426
+ return this.root?.childComponentsMap || {};
418
427
  }
419
428
  get data() {
420
429
  return this._data;
@@ -455,11 +464,31 @@ export default class Component extends Element {
455
464
  }
456
465
  init() {
457
466
  this.disabled = this.shouldDisabled;
458
- this._visible = this.conditionallyVisible(null, null);
467
+ this._conditionallyHidden = this.checkConditionallyHidden();
468
+ this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
459
469
  if (this.component.addons?.length) {
460
470
  this.component.addons.forEach((addon) => this.createAddon(addon));
461
471
  }
462
472
  }
473
+ /**
474
+ * Get Row Index.
475
+ * @returns {number} - The row index.
476
+ */
477
+ get rowIndex() {
478
+ return this._rowIndex;
479
+ }
480
+ /**
481
+ * Set Row Index to row and update each component.
482
+ * @param {number} value - The row index.
483
+ * @returns {void}
484
+ */
485
+ set rowIndex(value) {
486
+ this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
487
+ ...(this.parent?.paths || {}),
488
+ ...{ dataIndex: value }
489
+ });
490
+ this._rowIndex = value;
491
+ }
463
492
  afterComponentAssign() {
464
493
  //implement in extended classes
465
494
  }
@@ -528,6 +557,12 @@ export default class Component extends Element {
528
557
  get key() {
529
558
  return _.get(this.component, 'key', '');
530
559
  }
560
+ get path() {
561
+ return this.paths.dataPath;
562
+ }
563
+ set path(path) {
564
+ throw new Error('Should not be setting the path of a component.');
565
+ }
531
566
  set parentVisible(value) {
532
567
  this._parentVisible = value;
533
568
  }
@@ -573,7 +608,6 @@ export default class Component extends Element {
573
608
  return;
574
609
  }
575
610
  this._visible = value;
576
- this.clearOnHide();
577
611
  this.redraw();
578
612
  }
579
613
  }
@@ -594,6 +628,21 @@ export default class Component extends Element {
594
628
  }
595
629
  return this._visible && this._parentVisible;
596
630
  }
631
+ get conditionallyHidden() {
632
+ return this._conditionallyHidden || this._parentConditionallyHidden;
633
+ }
634
+ /**
635
+ * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
636
+ * @param {object} data - The data object to evaluate the condition against.
637
+ * @param {object} row - The row object to evaluate the condition against.
638
+ * @returns {boolean} - Whether the component is conditionally hidden.
639
+ */
640
+ checkConditionallyHidden(data = null, row = null) {
641
+ if (!this.hasCondition()) {
642
+ return false;
643
+ }
644
+ return !this.conditionallyVisible(data, row);
645
+ }
597
646
  get currentForm() {
598
647
  return this._currentForm;
599
648
  }
@@ -1013,6 +1062,14 @@ export default class Component extends Element {
1013
1062
  setOpenModalElement(template = null) {
1014
1063
  this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
1015
1064
  }
1065
+ /**
1066
+ * Renders a modal preview template and returns the markup as a string
1067
+ * @param {object|null|undefined} ctx - The rendering context
1068
+ * @return {string} - The modal preview markup
1069
+ */
1070
+ renderModalPreview(ctx) {
1071
+ return this.renderTemplate('modalPreview', ctx || {});
1072
+ }
1016
1073
  /**
1017
1074
  * Returns the modal preview template.
1018
1075
  * @returns {string} - The modal preview template.
@@ -1023,7 +1080,7 @@ export default class Component extends Element {
1023
1080
  if (this.hasInput && this.component.validate?.required && !this.isPDFReadOnlyMode) {
1024
1081
  modalLabel = { className: 'field-required' };
1025
1082
  }
1026
- return this.renderTemplate('modalPreview', {
1083
+ return this.renderModalPreview({
1027
1084
  previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
1028
1085
  messages: '',
1029
1086
  labelInfo: modalLabel,
@@ -1072,6 +1129,27 @@ export default class Component extends Element {
1072
1129
  }, topLevel);
1073
1130
  }
1074
1131
  }
1132
+ /**
1133
+ * Creates the tooltip instance using tippy.js and returns it
1134
+ * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
1135
+ * @param {object|null|undefined} settings - tippy.js options
1136
+ * @return {import('tippy.js').Tippy} - tippy.js instance
1137
+ */
1138
+ createTooltip(tooltipEl, settings = {}) {
1139
+ const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
1140
+ const tooltipDataTitle = tooltipEl.getAttribute('data-title');
1141
+ const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
1142
+ .replace(/(?:\r\n|\r|\n)/g, '<br />');
1143
+ return tippy(tooltipEl, {
1144
+ allowHTML: true,
1145
+ trigger: 'mouseenter click focus',
1146
+ placement: 'right',
1147
+ zIndex: 10000,
1148
+ interactive: true,
1149
+ ...settings,
1150
+ content: this.t(this.sanitize(tooltipText), { _userInput: true }),
1151
+ });
1152
+ }
1075
1153
  /**
1076
1154
  * Attaches all the tooltips provided the refs object.
1077
1155
  * @param {object} toolTipsRefs - The refs for the tooltips within your template.
@@ -1080,18 +1158,7 @@ export default class Component extends Element {
1080
1158
  attachTooltips(toolTipsRefs) {
1081
1159
  toolTipsRefs?.forEach((tooltip, index) => {
1082
1160
  if (tooltip) {
1083
- const tooltipAttribute = tooltip.getAttribute('data-tooltip');
1084
- const tooltipDataTitle = tooltip.getAttribute('data-title');
1085
- const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
1086
- .replace(/(?:\r\n|\r|\n)/g, '<br />');
1087
- this.tooltips[index] = tippy(tooltip, {
1088
- allowHTML: true,
1089
- trigger: 'mouseenter click focus',
1090
- placement: 'right',
1091
- zIndex: 10000,
1092
- interactive: true,
1093
- content: this.t(this.sanitize(tooltipText), { _userInput: true }),
1094
- });
1161
+ this.tooltips[index] = this.createTooltip(tooltip);
1095
1162
  }
1096
1163
  });
1097
1164
  }
@@ -1228,7 +1295,7 @@ export default class Component extends Element {
1228
1295
  if (refreshData === 'data') {
1229
1296
  this.refresh(this.data, changed, flags);
1230
1297
  }
1231
- else if ((changePath && getComponentPath(changed.instance) === refreshData) && changed && changed.instance &&
1298
+ else if ((changePath && (changed.instance?.paths?.localPath === refreshData)) && changed && changed.instance &&
1232
1299
  // Make sure the changed component is not in a different "context". Solves issues where refreshOn being set
1233
1300
  // in fields inside EditGrids could alter their state from other rows (which is bad).
1234
1301
  this.inContext(changed.instance)) {
@@ -1746,7 +1813,7 @@ export default class Component extends Element {
1746
1813
  rebuild() {
1747
1814
  this.destroy();
1748
1815
  this.init();
1749
- this.visible = this.conditionallyVisible(null, null);
1816
+ this.visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
1750
1817
  return this.redraw();
1751
1818
  }
1752
1819
  /**
@@ -1813,8 +1880,8 @@ export default class Component extends Element {
1813
1880
  conditionallyVisible(data, row) {
1814
1881
  data = data || this.rootValue;
1815
1882
  row = row || this.data;
1816
- if (this.builderMode || this.previewMode || !this.hasCondition()) {
1817
- return !this.component.hidden;
1883
+ if (this.builderMode || this.previewMode) {
1884
+ return true;
1818
1885
  }
1819
1886
  data = data || (this.root ? this.root.data : {});
1820
1887
  return this.checkCondition(row, data);
@@ -1844,8 +1911,14 @@ export default class Component extends Element {
1844
1911
  if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {
1845
1912
  this.redraw();
1846
1913
  }
1847
- // Check advanced conditions
1848
- const visible = this.conditionallyVisible(data, row);
1914
+ // Check advanced conditions (and cache the result)
1915
+ const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;
1916
+ if (isConditionallyHidden !== this._conditionallyHidden) {
1917
+ this._conditionallyHidden = isConditionallyHidden;
1918
+ this.clearOnHide();
1919
+ }
1920
+ // Check visibility
1921
+ const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
1849
1922
  if (this.visible !== visible) {
1850
1923
  this.visible = visible;
1851
1924
  }
@@ -1955,6 +2028,12 @@ export default class Component extends Element {
1955
2028
  FormioUtils.setActionProperty(newComponent, action, result, row, data, this);
1956
2029
  const property = action.property.value;
1957
2030
  if (!_.isEqual(_.get(this.component, property), _.get(newComponent, property))) {
2031
+ // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state
2032
+ // separately from the component's hidden property, and technically this Advanced Logic conditionally hides
2033
+ // a component, we need to set _conditionallyHidden to the new value
2034
+ if (property === 'hidden') {
2035
+ this._conditionallyHidden = newComponent.hidden;
2036
+ }
1958
2037
  changed = true;
1959
2038
  }
1960
2039
  break;
@@ -1968,7 +2047,7 @@ export default class Component extends Element {
1968
2047
  component: newComponent,
1969
2048
  result,
1970
2049
  });
1971
- if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
2050
+ if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
1972
2051
  this.setValue(newValue);
1973
2052
  if (this.viewOnly) {
1974
2053
  this.dataValue = newValue;
@@ -2001,7 +2080,7 @@ export default class Component extends Element {
2001
2080
  component: newComponent,
2002
2081
  result,
2003
2082
  }, 'value');
2004
- if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
2083
+ if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
2005
2084
  this.setValue(newValue);
2006
2085
  if (this.viewOnly) {
2007
2086
  this.dataValue = newValue;
@@ -2112,7 +2191,7 @@ export default class Component extends Element {
2112
2191
  this.component.clearOnHide !== false &&
2113
2192
  !this.options.readOnly &&
2114
2193
  !this.options.showHiddenFields) {
2115
- if (!this.visible) {
2194
+ if (this.conditionallyHidden) {
2116
2195
  this.deleteValue();
2117
2196
  }
2118
2197
  else if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2367,7 +2446,7 @@ export default class Component extends Element {
2367
2446
  */
2368
2447
  get dataValue() {
2369
2448
  if (!this.key ||
2370
- (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
2449
+ (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
2371
2450
  return this.emptyValue;
2372
2451
  }
2373
2452
  if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2386,7 +2465,7 @@ export default class Component extends Element {
2386
2465
  set dataValue(value) {
2387
2466
  if (!this.allowData ||
2388
2467
  !this.key ||
2389
- (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
2468
+ (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
2390
2469
  return;
2391
2470
  }
2392
2471
  if ((value !== null) && (value !== undefined)) {
@@ -2706,7 +2785,7 @@ export default class Component extends Element {
2706
2785
  // If no calculated value or
2707
2786
  // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
2708
2787
  const { clearOnHide } = this.component;
2709
- const shouldBeCleared = !this.visible && clearOnHide;
2788
+ const shouldBeCleared = this.conditionallyHidden && clearOnHide;
2710
2789
  const allowOverride = _.get(this.component, 'allowCalculateOverride', false);
2711
2790
  if (shouldBeCleared) {
2712
2791
  // remove calculated value so that the value is recalculated once component becomes visible
@@ -2832,6 +2911,9 @@ export default class Component extends Element {
2832
2911
  * @returns {string} - The message to show when the component is invalid.
2833
2912
  */
2834
2913
  invalidMessage(data, dirty, ignoreCondition, row) {
2914
+ if (!row) {
2915
+ row = getContextualRowData(this.component, data, this.paths);
2916
+ }
2835
2917
  if (!ignoreCondition && !this.checkCondition(row, data)) {
2836
2918
  return '';
2837
2919
  }
@@ -2849,6 +2931,8 @@ export default class Component extends Element {
2849
2931
  data,
2850
2932
  row,
2851
2933
  path: this.path || this.component.key,
2934
+ parent: this.parent?.component,
2935
+ paths: this.paths,
2852
2936
  scope: validationScope,
2853
2937
  instance: this,
2854
2938
  processors: [
@@ -2901,7 +2985,7 @@ export default class Component extends Element {
2901
2985
  if (flags.silentCheck) {
2902
2986
  return [];
2903
2987
  }
2904
- let isDirty = this.dirty || flags.dirty;
2988
+ let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);
2905
2989
  if (this.options.alwaysDirty) {
2906
2990
  isDirty = true;
2907
2991
  }
@@ -2926,7 +3010,10 @@ export default class Component extends Element {
2926
3010
  component: this.component,
2927
3011
  data,
2928
3012
  row,
3013
+ local: !!flags.local,
2929
3014
  value: this.validationValue,
3015
+ parent: this.parent?.component,
3016
+ paths: this.paths,
2930
3017
  path: this.path || this.component.key,
2931
3018
  instance: this,
2932
3019
  form: this.root ? this.root._form : {},
@@ -3343,7 +3430,7 @@ export default class Component extends Element {
3343
3430
  // If component definition changed, replace it.
3344
3431
  if (!_.isEqual(this.component, newComponent)) {
3345
3432
  this.component = newComponent;
3346
- const visible = this.conditionallyVisible(null, null);
3433
+ const visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
3347
3434
  const disabled = this.shouldDisabled;
3348
3435
  // Change states which won't be recalculated during redrawing
3349
3436
  if (this.visible !== visible) {
@@ -128,10 +128,10 @@ export default [
128
128
  {
129
129
  weight: 700,
130
130
  type: 'checkbox',
131
- label: 'Clear Value When Hidden',
131
+ label: 'Omit Value From Submission Data When Conditionally Hidden',
132
132
  key: 'clearOnHide',
133
133
  defaultValue: true,
134
- tooltip: 'When a field is hidden, clear the value.',
134
+ tooltip: 'When a field is conditionally hidden, omit the value from the submission data.',
135
135
  input: true
136
136
  },
137
137
  EditFormUtils.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
@@ -22,6 +22,7 @@ export default class ComponentModal {
22
22
  modalOverlay: string;
23
23
  modalContents: string;
24
24
  modalClose: string;
25
+ componentContent: string;
25
26
  openModalWrapper: string;
26
27
  openModal: string;
27
28
  modalSave: string;
@@ -61,6 +61,7 @@ export default class ComponentModal {
61
61
  modalOverlay: 'single',
62
62
  modalContents: 'single',
63
63
  modalClose: 'single',
64
+ componentContent: 'single',
64
65
  openModalWrapper: 'single',
65
66
  openModal: 'single',
66
67
  modalSave: 'single',
@@ -56,18 +56,6 @@ export default class NestedComponent extends Field {
56
56
  * @returns {object} - The current form object.
57
57
  */
58
58
  get currentForm(): object;
59
- /**
60
- * Set Row Index to row and update each component.
61
- * @param {number} value - The row index.
62
- * @returns {void}
63
- */
64
- set rowIndex(value: number);
65
- /**
66
- * Get Row Index.
67
- * @returns {number} - The row index.
68
- */
69
- get rowIndex(): number;
70
- _rowIndex: number | undefined;
71
59
  /**
72
60
  * Get Contextual data of the component.
73
61
  * @returns {object} - The contextual data of the component.
@@ -115,14 +103,11 @@ export default class NestedComponent extends Field {
115
103
  */
116
104
  eachComponent(fn: Function): void;
117
105
  /**
118
- * Returns a component provided a key. This performs a deep search within the
119
- * component tree.
106
+ * Returns a component provided a key. This performs a deep search within the component tree.
120
107
  * @param {string} path - The path to the component.
121
- * @param {Function} [fn] - Called with the component once found.
122
- * @param {string} [originalPath] - The original path to the component.
123
108
  * @returns {any} - The component that is located.
124
109
  */
125
- getComponent(path: string, fn?: Function | undefined, originalPath?: string | undefined): any;
110
+ getComponent(path: string): any;
126
111
  /**
127
112
  * Return a component provided the Id of the component.
128
113
  * @param {string} id - The Id of the component.
@@ -211,12 +196,12 @@ export default class NestedComponent extends Field {
211
196
  calculateValue(data: any, flags: any, row: any): any;
212
197
  isLastPage(): boolean;
213
198
  isValid(data: any, dirty: any): any;
214
- validationProcessor({ scope, data, row, instance, component }: {
199
+ validationProcessor({ scope, data, row, instance, paths }: {
215
200
  scope: any;
216
201
  data: any;
217
202
  row: any;
218
203
  instance: any;
219
- component: any;
204
+ paths: any;
220
205
  }, flags: any): void;
221
206
  /**
222
207
  * Perform a validation on all child components of this nested component.