@formio/js 5.0.1-rc.1 → 5.1.0-dev.5965.5d8702c

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

@@ -6,7 +6,7 @@ import isMobile from 'ismobilejs';
 import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
 import { Formio } from '../../../Formio';
 import * as FormioUtils from '../../../utils/utils';
-import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone, getScriptPlugin } from '../../../utils/utils';
+import { fastCloneDeep, boolValue, isInsideScopingComponent, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils/utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
 import Widgets from '../../../widgets';
@@ -221,6 +221,10 @@ export default class Component extends Element {
          * @private
          */
         this._hasCondition = null;
+        /**
+         * The row index for this component.
+         */
+        this._rowIndex = undefined;
         /**
          * References to dom elements
          */
@@ -231,11 +235,6 @@ export default class Component extends Element {
             this.options.components[component.type]) {
             _.merge(component, this.options.components[component.type]);
         }
-        /**
-         * The data path to this specific component instance.
-         * @type {string}
-         */
-        this.path = component?.key || '';
         /**
          * An array of all the children components errors.
          */
@@ -304,15 +303,30 @@ export default class Component extends Element {
          * @type {Component}
          */
         this.parent = this.options.parent;
+        /**
+         * The component paths for this component.
+         * @type {import('@formio/core').ComponentPaths} - The component paths.
+         */
+        this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
+            ...this.parent?.paths,
+            dataIndex: this.options.rowIndex === undefined ? this.parent?.paths?.dataIndex : this.options.rowIndex
+        });
         this.options.name = this.options.name || 'data';
         this._path = '';
         // Needs for Nextgen Rules Engine
         this.resetCaches();
+        /**
+         * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
+         * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
+         * conditionallyHidden separately from "regular" visibility.
+         */
+        this._parentConditionallyHidden = this.options.hasOwnProperty('parentConditionallyHidden') ? this.options.parentConditionallyHidden : false;
+        this._conditionallyHidden = this.checkConditionallyHidden(null, data) || this._parentConditionallyHidden;
         /**
          * Determines if this component is visible, or not.
          */
         this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;
-        this._visible = this._parentVisible && this.conditionallyVisible(null, data);
+        this._visible = this._parentVisible && (this.hasCondition() ? !this._conditionallyHidden : !this.component.hidden);
         this._parentDisabled = false;
         /**
          * The reference attribute name for this component
@@ -381,7 +395,7 @@ export default class Component extends Element {
             if (this.allowData && this.key) {
                 this.options.name += `[${this.key}]`;
                 // If component is visible or not set to clear on hide, set the default value.
-                if (this.visible || !this.component.clearOnHide) {
+                if (!(this.conditionallyHidden && this.component.clearOnHide)) {
                     if (!this.hasValue()) {
                         if (this.shouldAddDefaultValue) {
                             this.dataValue = this.defaultValue;
@@ -409,12 +423,7 @@ export default class Component extends Element {
     }
     /* eslint-enable max-statements */
     get componentsMap() {
-        if (this.localRoot?.childComponentsMap) {
-            return this.localRoot.childComponentsMap;
-        }
-        const localMap = {};
-        localMap[this.path] = this;
-        return localMap;
+        return this.root?.childComponentsMap || {};
     }
     get data() {
         return this._data;
@@ -455,11 +464,31 @@ export default class Component extends Element {
     }
     init() {
         this.disabled = this.shouldDisabled;
-        this._visible = this.conditionallyVisible(null, null);
+        this._conditionallyHidden = this.checkConditionallyHidden();
+        this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if (this.component.addons?.length) {
             this.component.addons.forEach((addon) => this.createAddon(addon));
         }
     }
+    /**
+     * Get Row Index.
+     * @returns {number} - The row index.
+     */
+    get rowIndex() {
+        return this._rowIndex;
+    }
+    /**
+     * Set Row Index to row and update each component.
+     * @param {number} value - The row index.
+     * @returns {void}
+     */
+    set rowIndex(value) {
+        this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
+            ...(this.parent?.paths || {}),
+            ...{ dataIndex: value }
+        });
+        this._rowIndex = value;
+    }
     afterComponentAssign() {
         //implement in extended classes
     }
@@ -528,6 +557,12 @@ export default class Component extends Element {
     get key() {
         return _.get(this.component, 'key', '');
     }
+    get path() {
+        return this.paths.dataPath;
+    }
+    set path(path) {
+        throw new Error('Should not be setting the path of a component.');
+    }
     set parentVisible(value) {
         this._parentVisible = value;
     }
@@ -573,7 +608,6 @@ export default class Component extends Element {
                 return;
             }
             this._visible = value;
-            this.clearOnHide();
             this.redraw();
         }
     }
@@ -594,6 +628,21 @@ export default class Component extends Element {
         }
         return this._visible && this._parentVisible;
     }
+    get conditionallyHidden() {
+        return this._conditionallyHidden || this._parentConditionallyHidden;
+    }
+    /**
+     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
+     * @param {object} data - The data object to evaluate the condition against.
+     * @param {object} row - The row object to evaluate the condition against.
+     * @returns {boolean} - Whether the component is conditionally hidden.
+     */
+    checkConditionallyHidden(data = null, row = null) {
+        if (!this.hasCondition()) {
+            return false;
+        }
+        return !this.conditionallyVisible(data, row);
+    }
     get currentForm() {
         return this._currentForm;
     }
@@ -1013,6 +1062,14 @@ export default class Component extends Element {
     setOpenModalElement(template = null) {
         this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
     }
+    /**
+     * Renders a modal preview template and returns the markup as a string
+     * @param {object|null|undefined} ctx - The rendering context
+     * @returns {string} - The modal preview markup
+     */
+    renderModalPreview(ctx) {
+        return this.renderTemplate('modalPreview', ctx || {});
+    }
     /**
      * Returns the modal preview template.
      * @returns {string} - The modal preview template.
@@ -1023,7 +1080,7 @@ export default class Component extends Element {
         if (this.hasInput && this.component.validate?.required && !this.isPDFReadOnlyMode) {
             modalLabel = { className: 'field-required' };
         }
-        return this.renderTemplate('modalPreview', {
+        return this.renderModalPreview({
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
             messages: '',
             labelInfo: modalLabel,
@@ -1072,6 +1129,27 @@ export default class Component extends Element {
             }, topLevel);
         }
     }
+    /**
+     * Creates the tooltip instance using tippy.js and returns it
+     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+     * @param {object|null|undefined} settings - tippy.js options
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
+     */
+    createTooltip(tooltipEl, settings = {}) {
+        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 />');
+        return tippy(tooltipEl, {
+            allowHTML: true,
+            trigger: 'mouseenter click focus',
+            placement: 'right',
+            zIndex: 10000,
+            interactive: true,
+            ...settings,
+            content: this.t(this.sanitize(tooltipText), { _userInput: true }),
+        });
+    }
     /**
      * Attaches all the tooltips provided the refs object.
      * @param {object} toolTipsRefs - The refs for the tooltips within your template.
@@ -1080,18 +1158,7 @@ export default class Component extends Element {
     attachTooltips(toolTipsRefs) {
         toolTipsRefs?.forEach((tooltip, index) => {
             if (tooltip) {
-                const tooltipAttribute = tooltip.getAttribute('data-tooltip');
-                const tooltipDataTitle = tooltip.getAttribute('data-title');
-                const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
-                    .replace(/(?:\r\n|\r|\n)/g, '<br />');
-                this.tooltips[index] = tippy(tooltip, {
-                    allowHTML: true,
-                    trigger: 'mouseenter click focus',
-                    placement: 'right',
-                    zIndex: 10000,
-                    interactive: true,
-                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
-                });
+                this.tooltips[index] = this.createTooltip(tooltip);
             }
         });
     }
@@ -1228,7 +1295,7 @@ export default class Component extends Element {
         if (refreshData === 'data') {
             this.refresh(this.data, changed, flags);
         }
-        else if ((changePath && getComponentPath(changed.instance) === refreshData) && changed && changed.instance &&
+        else if ((changePath && (changed.instance?.paths?.localPath === refreshData)) && changed && changed.instance &&
             // Make sure the changed component is not in a different "context". Solves issues where refreshOn being set
             // in fields inside EditGrids could alter their state from other rows (which is bad).
             this.inContext(changed.instance)) {
@@ -1746,7 +1813,7 @@ export default class Component extends Element {
     rebuild() {
         this.destroy();
         this.init();
-        this.visible = this.conditionallyVisible(null, null);
+        this.visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
         return this.redraw();
     }
     /**
@@ -1813,8 +1880,8 @@ export default class Component extends Element {
     conditionallyVisible(data, row) {
         data = data || this.rootValue;
         row = row || this.data;
-        if (this.builderMode || this.previewMode || !this.hasCondition()) {
-            return !this.component.hidden;
+        if (this.builderMode || this.previewMode) {
+            return true;
         }
         data = data || (this.root ? this.root.data : {});
         return this.checkCondition(row, data);
@@ -1844,8 +1911,14 @@ export default class Component extends Element {
         if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {
             this.redraw();
         }
-        // Check advanced conditions
-        const visible = this.conditionallyVisible(data, row);
+        // Check advanced conditions (and cache the result)
+        const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;
+        if (isConditionallyHidden !== this._conditionallyHidden) {
+            this._conditionallyHidden = isConditionallyHidden;
+            this.clearOnHide();
+        }
+        // Check visibility
+        const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if (this.visible !== visible) {
             this.visible = visible;
         }
@@ -1955,6 +2028,12 @@ export default class Component extends Element {
                     FormioUtils.setActionProperty(newComponent, action, result, row, data, this);
                     const property = action.property.value;
                     if (!_.isEqual(_.get(this.component, property), _.get(newComponent, property))) {
+                        // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state
+                        // separately from the component's hidden property, and technically this Advanced Logic conditionally hides
+                        // a component, we need to set _conditionallyHidden to the new value
+                        if (property === 'hidden') {
+                            this._conditionallyHidden = newComponent.hidden;
+                        }
                         changed = true;
                     }
                     break;
@@ -1968,7 +2047,7 @@ export default class Component extends Element {
                         component: newComponent,
                         result,
                     });
-                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
+                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2001,7 +2080,7 @@ export default class Component extends Element {
                         component: newComponent,
                         result,
                     }, 'value');
-                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
+                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2112,7 +2191,7 @@ export default class Component extends Element {
             this.component.clearOnHide !== false &&
             !this.options.readOnly &&
             !this.options.showHiddenFields) {
-            if (!this.visible) {
+            if (this.conditionallyHidden) {
                 this.deleteValue();
             }
             else if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2333,6 +2412,13 @@ export default class Component extends Element {
             return editor;
         });
     }
+    async getDragula() {
+        return new Promise((resolve) => {
+            return Formio.requireLibrary('dragula', 'dragula', `${Formio.cdn.dragula}/dragula.js`, true, (ready) => {
+                return ready.then(resolve);
+            });
+        });
+    }
     get tree() {
         return this.component.tree || false;
     }
@@ -2367,7 +2453,7 @@ export default class Component extends Element {
      */
     get dataValue() {
         if (!this.key ||
-            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
+            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
             return this.emptyValue;
         }
         if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2386,7 +2472,7 @@ export default class Component extends Element {
     set dataValue(value) {
         if (!this.allowData ||
             !this.key ||
-            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
+            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
             return;
         }
         if ((value !== null) && (value !== undefined)) {
@@ -2457,7 +2543,7 @@ export default class Component extends Element {
             }
             return value;
         };
-        if (this.defaultMask) {
+        if (Array.isArray(this.defaultMask) ? this.defaultMask.length > 0 : this.defaultMask) {
             if (Array.isArray(defaultValue)) {
                 defaultValue = defaultValue.map(checkMask);
             }
@@ -2706,7 +2792,7 @@ export default class Component extends Element {
         // If no calculated value or
         // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
         const { clearOnHide } = this.component;
-        const shouldBeCleared = !this.visible && clearOnHide;
+        const shouldBeCleared = this.conditionallyHidden && clearOnHide;
         const allowOverride = _.get(this.component, 'allowCalculateOverride', false);
         if (shouldBeCleared) {
             // remove calculated value so that the value is recalculated once component becomes visible
@@ -2832,6 +2918,9 @@ export default class Component extends Element {
      * @returns {string} - The message to show when the component is invalid.
      */
     invalidMessage(data, dirty, ignoreCondition, row) {
+        if (!row) {
+            row = getContextualRowData(this.component, data, this.paths);
+        }
         if (!ignoreCondition && !this.checkCondition(row, data)) {
             return '';
         }
@@ -2849,6 +2938,8 @@ export default class Component extends Element {
             data,
             row,
             path: this.path || this.component.key,
+            parent: this.parent?.component,
+            paths: this.paths,
             scope: validationScope,
             instance: this,
             processors: [
@@ -2901,7 +2992,7 @@ export default class Component extends Element {
         if (flags.silentCheck) {
             return [];
         }
-        let isDirty = this.dirty || flags.dirty;
+        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);
         if (this.options.alwaysDirty) {
             isDirty = true;
         }
@@ -2926,7 +3017,10 @@ export default class Component extends Element {
             component: this.component,
             data,
             row,
+            local: !!flags.local,
             value: this.validationValue,
+            parent: this.parent?.component,
+            paths: this.paths,
             path: this.path || this.component.key,
             instance: this,
             form: this.root ? this.root._form : {},
@@ -3343,10 +3437,14 @@ export default class Component extends Element {
                         // If component definition changed, replace it.
                         if (!_.isEqual(this.component, newComponent)) {
                             this.component = newComponent;
-                            const visible = this.conditionallyVisible(null, null);
+                            const visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
                             const disabled = this.shouldDisabled;
                             // Change states which won't be recalculated during redrawing
                             if (this.visible !== visible) {
+                                // If the logic is triggered by an event and the action sets the hidden state then the original
+                                // component definition must be changed so that the components hidden state does not get flipped back by
+                                // the fieldLogic function
+                                this.originalComponent.hidden = !visible;
                                 this.visible = visible;
                             }
                             if (this.disabled !== disabled) {

package/lib/mjs/components/_classes/component/editForm/Component.edit.data.js

@@ -128,10 +128,10 @@ export default [
     {
         weight: 700,
         type: 'checkbox',
-        label: 'Clear Value When Hidden',
+        label: 'Omit Value From Submission Data When Conditionally Hidden',
         key: 'clearOnHide',
         defaultValue: true,
-        tooltip: 'When a field is hidden, clear the value.',
+        tooltip: 'When a field is conditionally hidden, omit the value from the submission data.',
         input: true
     },
     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>'),

package/lib/mjs/components/_classes/componentModal/ComponentModal.d.ts

@@ -22,6 +22,7 @@ export default class ComponentModal {
         modalOverlay: string;
         modalContents: string;
         modalClose: string;
+        componentContent: string;
         openModalWrapper: string;
         openModal: string;
         modalSave: string;

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -61,6 +61,7 @@ export default class ComponentModal {
             modalOverlay: 'single',
             modalContents: 'single',
             modalClose: 'single',
+            componentContent: 'single',
             openModalWrapper: 'single',
             openModal: 'single',
             modalSave: 'single',

package/lib/mjs/components/_classes/field/Field.d.ts

@@ -1,9 +1,9 @@
 export default class Field extends Component {
     /**
      * @param {object} element - The component to create.
-     * @returns {Field} - The created field.
+     * @returns {string} - The rendered HTML string of a component
      */
-    render(element: object): Field;
+    render(element: object): string;
     /**
     /* Saves current caret position to restore it after the component is redrawn
      * @param {HTMLElement} element - The element to save the caret position for.

package/lib/mjs/components/_classes/field/Field.js

@@ -6,7 +6,7 @@ import Component from '../component/Component';
 export default class Field extends Component {
     /**
      * @param {object} element - The component to create.
-     * @returns {Field} - The created field.
+     * @returns {string} - The rendered HTML string of a component
      */
     render(element) {
         if (this.noField) {

package/lib/mjs/components/_classes/input/Input.js

@@ -233,7 +233,28 @@ export default class Input extends Multivalue {
                 if (key === 13) {
                     event.preventDefault();
                     event.stopPropagation();
-                    this.emit('submitButton');
+                    let submitButton = null;
+                    if (this.root?.everyComponent) {
+                        this.root.everyComponent((component) => {
+                            if (component?.component.type === 'button' &&
+                                component?.component.action === 'submit') {
+                                submitButton = component;
+                                return false;
+                            }
+                        });
+                    }
+                    const options = {};
+                    if (submitButton) {
+                        options.instance = submitButton;
+                        options.component = submitButton.component;
+                        options.noValidate = this.component.state === 'draft';
+                        options.state = this.component.state || 'submitted';
+                        submitButton.loading = true;
+                        this.emit('submitButton', options);
+                    }
+                    else {
+                        this.emit('submitButton', options);
+                    }
                 }
             });
         }

package/lib/mjs/components/_classes/multivalue/Multivalue.d.ts

@@ -51,7 +51,7 @@ export default class Multivalue extends Field {
     attachMultiMask(index: number): boolean;
     /**
      * @param {any} input - The input element on which the mask is to be applied.
-     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.
      */
     updateMask(input: any, mask: string): void;
     /**

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -259,10 +259,17 @@ export default class Multivalue extends Field {
     }
     /**
      * @param {any} input - The input element on which the mask is to be applied.
-     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.
      */
     updateMask(input, mask) {
         if (!mask) {
+            if (input.mask) {
+                input.mask.destroy();
+            }
+            if (!this.component.placeholder) {
+                input.removeAttribute('placeholder');
+            }
+            input.value = '';
             return;
         }
         this.setInputMask(input, mask, !this.component.placeholder);

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -56,18 +56,6 @@ export default class NestedComponent extends Field {
      * @returns {object} - The current form object.
      */
     get currentForm(): object;
-    /**
-     * Set Row Index to row and update each component.
-     * @param {number} value - The row index.
-     * @returns {void}
-     */
-    set rowIndex(value: number);
-    /**
-     * Get Row Index.
-     * @returns {number} - The row index.
-     */
-    get rowIndex(): number;
-    _rowIndex: number | undefined;
     /**
      * Get Contextual data of the component.
      * @returns {object} - The contextual data of the component.
@@ -115,14 +103,11 @@ export default class NestedComponent extends Field {
      */
     eachComponent(fn: Function): void;
     /**
-     * Returns a component provided a key. This performs a deep search within the
-     * component tree.
+     * Returns a component provided a key. This performs a deep search within the component tree.
      * @param {string} path - The path to the component.
-     * @param {Function} [fn] - Called with the component once found.
-     * @param {string} [originalPath] - The original path to the component.
      * @returns {any} - The component that is located.
      */
-    getComponent(path: string, fn?: Function | undefined, originalPath?: string | undefined): any;
+    getComponent(path: string): any;
     /**
      * Return a component provided the Id of the component.
      * @param {string} id - The Id of the component.
@@ -161,7 +146,7 @@ export default class NestedComponent extends Field {
      */
     addComponent(component: import('@formio/core').Component, data?: object, before?: HTMLElement, noAdd?: boolean | undefined): any;
     beforeFocus(): void;
-    render(children: any): Field;
+    render(children: any): string;
     renderComponents(components: any): any;
     attach(element: any): Promise<[void, void]>;
     /**
@@ -211,12 +196,12 @@ export default class NestedComponent extends Field {
     calculateValue(data: any, flags: any, row: any): any;
     isLastPage(): boolean;
     isValid(data: any, dirty: any): any;
-    validationProcessor({ scope, data, row, instance, component }: {
+    validationProcessor({ scope, data, row, instance, paths }: {
         scope: any;
         data: any;
         row: any;
         instance: any;
-        component: any;
+        paths: any;
     }, flags: any): void;
     /**
      * Perform a validation on all child components of this nested component.