@formio/js 5.0.0-dev.5646.8734cf4 → 5.0.0-dev.5650.cd53187

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

@@ -165,9 +165,7 @@ export default class Component extends Element {
     }
     /**
      * Return the simple condition settings as part of the component.
-     *
-     * @return {Object}
-     *
+     * @returns {object} - The simple conditional settings.
      */
     static get conditionOperatorsSettings() {
         return {
@@ -184,10 +182,8 @@ export default class Component extends Element {
     }
     /**
      * Return the array of possible types of component value absed on its schema.
-     *
      * @param schema
-     * @return {Array}
-     *
+     * @returns {Array}
      */
     static savedValueTypes(schema) {
         schema = schema || {};
@@ -196,7 +192,6 @@ export default class Component extends Element {
     /**
      * Provides a table view for this component. Override if you wish to do something different than using getView
      * method of your instance.
-     *
      * @param value
      * @param options
      */
@@ -205,10 +200,9 @@ export default class Component extends Element {
     /* eslint-enable no-unused-vars */
     /**
      * Initialize a new Component.
-     *
-     * @param {Object} component - The component JSON you wish to initialize.
-     * @param {Object} options - The options for this component.
-     * @param {Object} data - The global data submission object this component will belong.
+     * @param {object} component - The component JSON you wish to initialize.
+     * @param {object} options - The options for this component.
+     * @param {object} data - The global data submission object this component will belong.
      */
     /* eslint-disable max-statements */
     constructor(component, options, data) {
@@ -239,7 +233,6 @@ export default class Component extends Element {
         }
         /**
          * The data path to this specific component instance.
-         *
          * @type {string}
          */
         this.path = component?.key || '';
@@ -287,32 +280,27 @@ export default class Component extends Element {
         this.row = this.options.row;
         /**
          * Points to a flat map of child components (if applicable).
-         *
-         * @type {Object}
+         * @type {object}
          */
         this.childComponentsMap = {};
         /**
          * Determines if this component is disabled, or not.
-         *
          * @type {boolean}
          */
         this._disabled = boolValue(this.component.disabled) ? this.component.disabled : false;
         /**
          * Points to the root component, usually the FormComponent.
-         *
          * @type {Component}
          */
         this.root = this.options.root || this;
         this.localRoot = this.options.localRoot || this;
         /**
          * If this input has been input and provided value.
-         *
          * @type {boolean}
          */
         this.pristine = true;
         /**
          * Points to the parent component.
-         *
          * @type {Component}
          */
         this.parent = this.options.parent;
@@ -332,7 +320,7 @@ export default class Component extends Element {
         this._referenceAttributeName = 'ref';
         /**
          * Used to trigger a new change in this component.
-         * @type {function} - Call to trigger a change in this component.
+         * @type {Function} - Call to trigger a change in this component.
          */
         let changes = [];
         let lastChanged = null;
@@ -373,7 +361,6 @@ export default class Component extends Element {
         };
         /**
          * Used to trigger a redraw event within this component.
-         *
          * @type {Function}
          */
         this.triggerRedraw = _.debounce(this.redraw.bind(this), 100);
@@ -572,8 +559,8 @@ export default class Component extends Element {
         return this.shouldForceVisibility(component, 'show');
     }
     /**
-     *
-     * @param value {boolean}
+     * Sets the component visibility.
+     * @param {boolean} value - Whether the component should be visible or not.
      */
     set visible(value) {
         if (this._visible !== value) {
@@ -591,8 +578,8 @@ export default class Component extends Element {
         }
     }
     /**
-     *
-     * @returns {boolean}
+     * Returns the component visibility
+     * @returns {boolean} - Whether the component is visible or not.
      */
     get visible() {
         // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.
@@ -682,9 +669,10 @@ export default class Component extends Element {
     }
     /**
      * Returns only the schema that is different from the default.
-     *
-     * @param schema
-     * @param defaultSchema
+     * @param {object} schema - The "full" json schema for the component.
+     * @param {object} defaultSchema - The "default" json schema for the component.
+     * @param {boolean} recursion - If we are currently in a recursive loop.
+     * @returns {object} - The minified json schema for this component.
      */
     getModifiedSchema(schema, defaultSchema, recursion) {
         const modified = {};
@@ -718,21 +706,24 @@ export default class Component extends Element {
     }
     /**
      * Returns the JSON schema for this component.
+     * @returns {object} - The JSON schema for this component.
      */
     get schema() {
         return fastCloneDeep(this.getModifiedSchema(_.omit(this.component, 'id'), this.defaultSchema));
     }
     /**
      * Returns true if component is inside DataGrid
+     * @returns {boolean} - True if component is inside DataGrid
      */
     get isInDataGrid() {
         return this.inDataGrid;
     }
     /**
      * Translate a text using the i18n system.
-     *
      * @param {string} text - The i18n identifier.
-     * @param {Object} params - The i18n parameters to use for translation.
+     * @param {object} params - The i18n parameters to use for translation.
+     * @param {...any} args - Additional arguments to pass to the translation library.
+     * @returns {string} - The translated text.
      */
     t(text, params = {}, ...args) {
         if (!text) {
@@ -822,7 +813,7 @@ export default class Component extends Element {
     isHtmlRenderMode() {
         return this.options.renderMode === 'html';
     }
-    renderTemplate(name, data = {}, modeOption) {
+    renderTemplate(name, data = {}, modeOption = '') {
         // Need to make this fall back to form if renderMode is not found similar to how we search templates.
         const mode = modeOption || this.options.renderMode || 'form';
         data.component = this.component;
@@ -862,11 +853,12 @@ export default class Component extends Element {
     }
     /**
      * Sanitize an html string.
-     *
-     * @param string
-     * @returns {*}
+     * @param {string} dirty - The dirty html string to sanitize.
+     * @param {boolean} forceSanitize - If we should force the sanitize to occur.
+     * @param {object} options - The options for the sanitize.
+     * @returns {*} - The sanitized html string.
      */
-    sanitize(dirty, forceSanitize, options) {
+    sanitize(dirty, forceSanitize = false, options = {}) {
         if (!this.shouldSanitizeValue && !forceSanitize) {
             return dirty;
         }
@@ -876,12 +868,9 @@ export default class Component extends Element {
     }
     /**
      * Render a template string into html.
-     *
-     * @param template
-     * @param data
-     * @param actions
-     *
-     * @return {HTMLElement|String} - The created element or an empty string if template is not specified.
+     * @param {string} template - The template to render.
+     * @param {object} data - The data to provide to the template.
+     * @returns {HTMLElement | string} - The created element or an empty string if template is not specified.
      */
     renderString(template, data) {
         if (!template) {
@@ -890,9 +879,18 @@ export default class Component extends Element {
         // Interpolate the template and populate
         return this.interpolate(template, data);
     }
+    /**
+     * Allows for modification of the component value prior to submission.
+     * @param {*} input - The input to be modified.
+     * @returns {*} - The modified input mapping for the extended component.
+     */
     performInputMapping(input) {
         return input;
     }
+    /**
+     * Returns the component "widget" if one is available.
+     * @returns {Widget|null} - The widget instance. null if not available.
+     */
     get widget() {
         const settings = this.component.widget;
         if (settings && this.root?.shadowRoot) {
@@ -901,6 +899,10 @@ export default class Component extends Element {
         const widget = settings && Widgets[settings.type] ? new Widgets[settings.type](settings, this.component, this) : null;
         return widget;
     }
+    /**
+     * Returns the native supported browser language.
+     * @returns {string|null} - The native browser language that is supported.
+     */
     getBrowserLanguage() {
         const nav = window.navigator;
         const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];
@@ -924,38 +926,46 @@ export default class Component extends Element {
         return null;
     }
     /**
-     * Called before a next and previous page is triggered allowing the components
-     * to perform special functions.
-     *
-     * @return {*}
+     * Called before a next and previous page is triggered allowing the components to perform special functions.
+     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.
      */
     beforePage() {
         return Promise.resolve(true);
     }
+    /**
+     * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.
+     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.
+     */
     beforeNext() {
         return this.beforePage(true);
     }
     /**
-     * Called before a submission is triggered allowing the components
-     * to perform special async functions.
-     *
-     * @return {*}
+     * Called before a submission is triggered allowing the components to perform special async functions.
+     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.
      */
     beforeSubmit() {
         return Promise.resolve(true);
     }
     /**
      * Return the submission timezone.
-     *
-     * @return {*}
+     * @returns {string} - The submission timezone.
      */
     get submissionTimezone() {
         this.options.submissionTimezone = this.options.submissionTimezone || _.get(this.root, 'options.submissionTimezone');
         return this.options.submissionTimezone;
     }
+    /**
+     * Return the current timezone.
+     * @returns {string} - The current timezone.
+     */
     get timezone() {
         return this.getTimezone(this.component);
     }
+    /**
+     * Return the current timezone.
+     * @param {object} settings - Settings to control how the timezone should be returned.
+     * @returns {string} - The current timezone.
+     */
     getTimezone(settings) {
         if (settings.timezone) {
             return settings.timezone;
@@ -979,6 +989,9 @@ export default class Component extends Element {
      * @param {string} [referenceAttributeName] - The attribute name to use for the reference.
      */
     loadRefs(element, refs, referenceAttributeName) {
+        if (!element) {
+            return;
+        }
         for (const ref in refs) {
             const refType = refs[ref];
             const isString = typeof refType === 'string';
@@ -993,21 +1006,42 @@ export default class Component extends Element {
             }
         }
     }
-    setOpenModalElement(template) {
+    /**
+     * Opens the modal element.
+     * @param {string} template - The template to use for the modal dialog.
+     */
+    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.
+     */
     getModalPreviewTemplate() {
         const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;
         let modalLabel;
         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,
         });
     }
+    /**
+     * Performs a complete build of a component, which empties, renders, sets the content in the DOM, and then finally attaches events.
+     * @param {HTMLElement} element - The element to attach this component to.
+     * @returns {Promise<void>} - A promise that resolves when the component has been built.
+     */
     build(element) {
         element = element || this.element;
         this.empty(element);
@@ -1017,6 +1051,12 @@ export default class Component extends Element {
     get hasModalSaveButton() {
         return true;
     }
+    /**
+     * Renders a component as an HTML string.
+     * @param {string} children - The contents of all the children HTML as a string.
+     * @param {boolean} topLevel - If this is the topmost component that is being rendered.
+     * @returns {string} - The rendered HTML string of a component.
+     */
     render(children = `Unknown component: ${this.component.type}`, topLevel = false) {
         const isVisible = this.visible;
         this.rendered = true;
@@ -1040,27 +1080,54 @@ 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.
+     * @returns {void}
+     */
     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);
             }
         });
     }
+    /**
+     * Create a new component modal for this component.
+     * @param {HTMLElement} element - The element to attach the modal to.
+     * @param {boolean} modalShouldBeOpened - TRUE if the modal should open immediately.
+     * @param {any} currentValue - The current value of the component.
+     * @returns {ComponentModal} - The created component modal.
+     */
     createComponentModal(element, modalShouldBeOpened, currentValue) {
         return new ComponentModal(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
     }
+    /**
+     * Attaches all event listensers for this component to the DOM elements that were rendered.
+     * @param {HTMLElement} element - The element to attach the listeners to.
+     * @returns {Promise<void>} - Resolves when the component is done attaching to the DOM.
+     */
     attach(element) {
         if (!this.builderMode && !this.previewMode && this.component.modalEdit) {
             const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
@@ -1098,6 +1165,9 @@ export default class Component extends Element {
         this.addons.forEach((addon) => addon.attach(element));
         return Promise.resolve();
     }
+    /**
+     * Restors the "focus" on a component after a redraw event has occured.
+     */
     restoreFocus() {
         const isFocused = this.root?.focusedComponent?.path === this.path;
         if (isFocused) {
@@ -1106,6 +1176,12 @@ export default class Component extends Element {
             this.restoreCaretPosition();
         }
     }
+    /**
+     * Adds a keyboard shortcut to this component.
+     * @param {HTMLElement} element - The element to attach the keyboard shortcut to.
+     * @param {string} shortcut - The keyboard shortcut to add.
+     * @returns {void}
+     */
     addShortcut(element, shortcut) {
         // Avoid infinite recursion.
         if (!element || !this.root || (this.root === this)) {
@@ -1116,6 +1192,12 @@ export default class Component extends Element {
         }
         this.root.addShortcut(element, shortcut);
     }
+    /**
+     * Removes a keyboard shortcut from this component.
+     * @param {HTMLElement} element - The element to remove the keyboard shortcut from.
+     * @param {string} shortcut - The keyboard shortcut to remove.
+     * @returns {void}
+     */
     removeShortcut(element, shortcut) {
         // Avoid infinite recursion.
         if (!element || (this.root === this)) {
@@ -1148,6 +1230,13 @@ export default class Component extends Element {
             this.tooltip.destroy();
         }
     }
+    /**
+     * Determines if the component should be refreshed based on the path of another component that changed.
+     * @param {string} refreshData - The path of the data that needs to trigger a refresh.
+     * @param {boolean} changed - Flag that is true if the data has been changed.
+     * @param {any} flags - The flags for the checkData procedure.
+     * @returns {void}
+     */
     checkRefresh(refreshData, changed, flags) {
         const changePath = _.get(changed, 'instance.path', false);
         // Don't let components change themselves.
@@ -1164,6 +1253,12 @@ export default class Component extends Element {
             this.refresh(changed.value, changed, flags);
         }
     }
+    /**
+     * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.
+     * @param {Array<any>} changes - The list of components that have changed.
+     * @param {any} flags - The checkData flags.
+     * @returns {void}
+     */
     checkRefreshOn(changes, flags = {}) {
         changes = changes || [];
         if (flags.noRefresh) {
@@ -1185,8 +1280,8 @@ export default class Component extends Element {
     }
     /**
      * Refreshes the component with a new value.
-     *
-     * @param value
+     * @param {any} value - The latest value of the component to check if it needs to be refreshed.
+     * @returns {void}
      */
     refresh(value) {
         if (this.hasOwnProperty('refreshOnValue')) {
@@ -1209,8 +1304,8 @@ export default class Component extends Element {
      * with the components data and returns true if they are in the same context.
      *
      * Different rows of the same EditGrid, for example, are in different contexts.
-     *
-     * @param component
+     * @param {any} component - The component to check if it is in the same context as this component.
+     * @returns {boolean} - TRUE if the component is in the same context as this component.
      */
     inContext(component) {
         if (component.data === this.data) {
@@ -1225,9 +1320,18 @@ export default class Component extends Element {
         }
         return false;
     }
+    /**
+     * Determines if we are in "view" only mode.
+     * @returns {boolean} - TRUE if we are in "view" only mode.
+     */
     get viewOnly() {
         return this.options.readOnly && this.options.viewAsHtml;
     }
+    /**
+     * Sets the HTMLElement for this component.
+     * @param {HTMLElement} element - The element that is attached to this component.
+     * @returns {void}
+     */
     setElement(element) {
         if (this.element) {
             delete this.element.component;
@@ -1235,6 +1339,10 @@ export default class Component extends Element {
         }
         this.element = element;
     }
+    /**
+     * Creates an element to hold the "view only" version of this component.
+     * @returns {HTMLElement} - The element for this component.
+     */
     createViewOnlyElement() {
         this.setElement(this.ce('dl', {
             id: this.id
@@ -1245,14 +1353,18 @@ export default class Component extends Element {
         }
         return this.element;
     }
+    /**
+     * The default value for the "view only" mode of a component if the value is not provided.
+     * @returns {string} - The default value for this component.
+     */
     get defaultViewOnlyValue() {
         return '-';
     }
     /**
      * Uses the widget to determine the output string.
-     *
-     * @param value
-     * @return {*}
+     * @param {any} value - The current value of the component.
+     * @param {any} options - The options for getValueAsString.
+     * @returns {any|Array<any>} - The value as a string.
      */
     getWidgetValueAsString(value, options) {
         const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;
@@ -1277,6 +1389,12 @@ export default class Component extends Element {
         const widget = this.refs.input[0].widget;
         return widget.getValueAsString(value, options);
     }
+    /**
+     * Returns the value of the component as a string.
+     * @param {any} value - The value for this component.
+     * @param {any} options - The options for this component.
+     * @returns {string} - The string representation of the value of this component.
+     */
     getValueAsString(value, options) {
         if (!value) {
             return '';
@@ -1294,20 +1412,32 @@ export default class Component extends Element {
         const stringValue = value.toString();
         return this.sanitize(stringValue);
     }
+    /**
+     * Returns the string representation "view" of the component value.
+     * @param {any} value - The value of the component.
+     * @param {any} options - The options for this component.
+     * @returns {string} - The string representation of the value of this component.
+     */
     getView(value, options) {
         if (this.component.protected) {
             return '--- PROTECTED ---';
         }
         return this.getValueAsString(value, options);
     }
+    /**
+     * Updates the items list for this component. Useful for Select and other List component types.
+     * @param {...any} args - The arguments to pass to the onChange event.
+     * @returns {void}
+     */
     updateItems(...args) {
         this.restoreValue();
         this.onChange(...args);
     }
     /**
-     * @param {*} data
-     * @param {boolean} [forceUseValue=false] - if true, return 'value' property of the data
-     * @return {*}
+     * Returns the value for a specific item in a List type component.
+     * @param {any} data - The data for this component.
+     * @param {boolean} [forceUseValue] - if true, return 'value' property of the data
+     * @returns {any} - The value of the item.
      */
     itemValue(data, forceUseValue = false) {
         if (_.isObject(data) && !_.isArray(data)) {
@@ -1320,6 +1450,11 @@ export default class Component extends Element {
         }
         return data;
     }
+    /**
+     * Returns the item value for html mode.
+     * @param {any} value - The value for this component.
+     * @returns {any} - The value of the item for html mode.
+     */
     itemValueForHTMLMode(value) {
         if (Array.isArray(value)) {
             const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));
@@ -1327,6 +1462,13 @@ export default class Component extends Element {
         }
         return this.itemValue(value);
     }
+    /**
+     * Creates a modal to input the value of this component.
+     * @param {HTMLElement} element - The element to attach the modal to.
+     * @param {any} attr - A list of attributes to add to the modal.
+     * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.
+     * @returns {HTMLElement} - The created modal element.
+     */
     createModal(element, attr, confirm) {
         const dialog = this.ce('div', attr || {});
         this.setContent(dialog, this.renderTemplate('dialog'));
@@ -1362,6 +1504,10 @@ export default class Component extends Element {
         this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);
         return dialog;
     }
+    /**
+     * Uses CSS classes to show or hide an element.
+     * @returns {boolean} - TRUE if the element has been css removed.
+     */
     get optimizeRedraw() {
         if (this.options.optimizeRedraw && this.element && !this.visible) {
             this.addClass(this.element, 'formio-removed');
@@ -1399,7 +1545,7 @@ export default class Component extends Element {
     }
     /**
      * Build the custom style from the layout values
-     * @return {string} - The custom style
+     * @returns {string} - The custom style
      */
     get customStyle() {
         let customCSS = '';
@@ -1410,24 +1556,31 @@ export default class Component extends Element {
         });
         return customCSS;
     }
+    /**
+     * Returns the component condition operator settings if available.
+     * @returns {object} - The component condition operator settings.
+     */
     static get serverConditionSettings() {
         return Component.conditionOperatorsSettings;
     }
+    /**
+     * Returns if the application is on a mobile device.
+     * @returns {boolean} - TRUE if the application is on a mobile device.
+     */
     get isMobile() {
         return isMobile();
     }
     /**
      * Returns the outside wrapping element of this component.
-     * @returns {HTMLElement}
+     * @returns {HTMLElement} - The wrapping element of this component.
      */
     getElement() {
         return this.element;
     }
     /**
      * Create an evaluation context for all script executions and interpolations.
-     *
-     * @param additional
-     * @return {*}
+     * @param {any} additional - Additional context to provide.
+     * @returns {any} - The evaluation context.
      */
     evalContext(additional) {
         return super.evalContext(Object.assign({
@@ -1449,18 +1602,29 @@ export default class Component extends Element {
     }
     /**
      * Sets the pristine flag for this component.
-     *
-     * @param pristine {boolean} - TRUE to make pristine, FALSE not pristine.
+     * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.
      */
     setPristine(pristine) {
         this.pristine = pristine;
     }
+    /**
+     * Returns if the component is pristine.
+     * @returns {boolean} - TRUE if the component is pristine.
+     */
     get isPristine() {
         return this.pristine;
     }
+    /**
+     * Sets the dirty flag for this component.
+     * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.
+     */
     setDirty(dirty) {
         this.dirty = dirty;
     }
+    /**
+     * Returns if the component is dirty.
+     * @returns {boolean} - TRUE if the component is dirty.
+     */
     get isDirty() {
         return this.dirty;
     }
@@ -1474,12 +1638,23 @@ export default class Component extends Element {
         this.restoreValue();
         this.triggerRootChange();
     }
+    /**
+     * Returns the icon class for a given icon name.
+     * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the "font awesome" version of the name of the icon.
+     * @param {boolean} spinning - If the component should be spinning.
+     * @returns {string} - The icon class for the equivalent icon in the iconset we are using.
+     */
     iconClass(name, spinning) {
         const iconset = this.options.iconset || Templates.current.defaultIconset || 'fa';
         return Templates.current.hasOwnProperty('iconClass')
             ? Templates.current.iconClass(iconset, name, spinning)
             : this.options.iconset === 'fa' ? Templates.defaultTemplates.iconClass(iconset, name, spinning) : name;
     }
+    /**
+     * Returns the size css class names for our current template.
+     * @param {string} size - The size class name for the default iconset.
+     * @returns {string} - The size class for our component.
+     */
     size(size) {
         return Templates.current.hasOwnProperty('size')
             ? Templates.current.size(size)
@@ -1492,15 +1667,23 @@ export default class Component extends Element {
     get name() {
         return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });
     }
+    /**
+     * Returns the visible errors for this component.
+     * @returns {Array<object>} - The visible errors for this component.
+     */
     get visibleErrors() {
         return this._visibleErrors;
     }
+    /**
+     * Returns all the errors for this component, visible or not.
+     * @returns {Array<object>} - All the errors for this component.
+     */
     get errors() {
         return this._errors;
     }
     /**
      * Returns the error label for this component.
-     * @return {*}
+     * @returns {string} - The error label for this component.
      */
     get errorLabel() {
         return this.t(this.component.errorLabel
@@ -1510,12 +1693,20 @@ export default class Component extends Element {
     }
     /**
      * Get the error message provided a certain type of error.
-     * @param type
-     * @return {*}
+     * @param {string} type - The type of error to fetch the message for.
+     * @returns {string} - The error message configured for this component.
      */
     errorMessage(type) {
         return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;
     }
+    /**
+     * Sets the content, innerHTML, of an element to the sanitized content.
+     * @param {HTMLElement} element - The element to set the innerHTML to.
+     * @param {string} content - The HTML string content that we wish to set.
+     * @param {boolean} forceSanitize - If we should force the content to be sanitized.
+     * @param {any} sanitizeOptions - The options for the sanitize function.
+     * @returns {boolean} - TRUE if the content was sanitized and set.
+     */
     setContent(element, content, forceSanitize, sanitizeOptions) {
         if (element instanceof HTMLElement) {
             element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);
@@ -1523,6 +1714,9 @@ export default class Component extends Element {
         }
         return false;
     }
+    /**
+     * Restores the caret position in the input element after a refresh occurs.
+     */
     restoreCaretPosition() {
         if (this.root?.currentSelection) {
             if (this.refs.input?.length) {
@@ -1544,6 +1738,10 @@ export default class Component extends Element {
             }
         }
     }
+    /**
+     * Redraw the component.
+     * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.
+     */
     redraw() {
         // Don't bother if we have not built yet.
         if (!this.element || !this.element.parentNode || this.optimizeRedraw) {
@@ -1559,29 +1757,54 @@ export default class Component extends Element {
         this.setElement(parent.children[index]);
         return this.attach(this.element);
     }
+    /**
+     * Rebuild and redraw a component.
+     * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.
+     */
     rebuild() {
         this.destroy();
         this.init();
         this.visible = this.conditionallyVisible(null, null);
         return this.redraw();
     }
+    /**
+     * Removes all event listeners attached to this component.
+     */
     removeEventListeners() {
         super.removeEventListeners();
         this.tooltips.forEach(tooltip => tooltip.destroy());
         this.tooltips = [];
     }
+    /**
+     * Returns if the dom node has the classes provided.
+     * @param {HTMLElement} element - The element to check for the class.
+     * @param {string} className - The name of the class to check.
+     * @returns {boolean|void} - TRUE if the element has the class.
+     */
     hasClass(element, className) {
         if (!element) {
             return;
         }
         return super.hasClass(element, this.transform('class', className));
     }
+    /**
+     * Adds a class to an HTML element.
+     * @param {HTMLElement} element - The dom element to add the class to.
+     * @param {string} className - The class name you wish to add.
+     * @returns {this|void} - The component instance.
+     */
     addClass(element, className) {
         if (!element) {
             return;
         }
         return super.addClass(element, this.transform('class', className));
     }
+    /**
+     * Removes a class from an element.
+     * @param {HTMLElement} element - The element to remove the class from.
+     * @param {string} className - The class name to remove.
+     * @returns {this|void} - The component instance.
+     */
     removeClass(element, className) {
         if (!element) {
             return;
@@ -1590,8 +1813,7 @@ export default class Component extends Element {
     }
     /**
      * Determines if this component has a condition defined.
-     *
-     * @return {null}
+     * @returns {boolean} - TRUE if the component has a condition defined.
      */
     hasCondition() {
         if (this._hasCondition !== null) {
@@ -1602,9 +1824,9 @@ export default class Component extends Element {
     }
     /**
      * Check if this component is conditionally visible.
-     *
-     * @param data
-     * @return {boolean}
+     * @param {any} data - The data to check against.
+     * @param {any} row - The row data to check against.
+     * @returns {boolean} - TRUE if the component is conditionally visible.
      */
     conditionallyVisible(data, row) {
         data = data || this.rootValue;
@@ -1619,16 +1841,19 @@ export default class Component extends Element {
      * Checks the condition of this component.
      *
      * TODO: Switch row and data parameters to be consistent with other methods.
-     *
-     * @param row - The row contextual data.
-     * @param data - The global data object.
-     * @return {boolean} - True if the condition applies to this component.
+     * @param {any} row - The row contextual data.
+     * @param {any} data - The global data object.
+     * @returns {boolean} - True if the condition applies to this component.
      */
     checkCondition(row, data) {
         return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);
     }
     /**
      * Check for conditionals and hide/show the element based on those conditions.
+     * @param {any} data - The data to check against.
+     * @param {any} flags - The flags passed to checkData function.
+     * @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;
@@ -1646,8 +1871,10 @@ export default class Component extends Element {
     }
     /**
      * Checks conditions for this component and any sub components.
-     * @param args
-     * @return {boolean}
+     * @param {any} data - The data to check against.
+     * @param {any} flags - The flags passed to checkData function.
+     * @param {any} row - The row data to check against.
+     * @returns {boolean} - TRUE if the component is visible.
      */
     checkConditions(data, flags, row) {
         data = data || this.rootValue;
@@ -1655,17 +1882,20 @@ export default class Component extends Element {
         row = row || this.data;
         return this.checkComponentConditions(data, flags, row);
     }
+    /**
+     * Returns the component logic if applicable.
+     * @returns {Array<object>} - The component logic.
+     */
     get logic() {
         return this.component.logic || [];
     }
     /**
      * Check all triggers and apply necessary actions.
-     *
-     * @param data
+     * @param {any} data - The data to check against.
+     * @param {any} row - The row data to check against.
+     * @returns {boolean|void} - TRUE if the component was altered.
      */
-    fieldLogic(data, row) {
-        data = data || this.rootValue;
-        row = row || this.data;
+    fieldLogic(data = this.rootValue, row = this.data) {
         const logics = this.logic;
         // If there aren't logic, don't go further.
         if (logics.length === 0) {
@@ -1688,6 +1918,10 @@ export default class Component extends Element {
         }
         return changed;
     }
+    /**
+     * Retuns if the browser is Internet Explorer.
+     * @returns {boolean} - TRUE if the browser is IE.
+     */
     isIE() {
         if (typeof window === 'undefined') {
             return false;
@@ -1712,9 +1946,24 @@ export default class Component extends Element {
         // other browser
         return false;
     }
+    /**
+     * Defines the logic action value through evaluation.
+     * @param {object} action - The action within the Logic system to perform.
+     * @param {object} argsObject - The arguments to pass to the evaluation.
+     * @returns {any} - The result of the evaluation.
+     */
     defineActionValue(action, argsObject) {
         return this.evaluate(action.value, argsObject, 'value');
     }
+    /**
+     * Apply the actions of Logic for a component once the conditions have been met.
+     * @param {object} newComponent - The new component to apply the actions to.
+     * @param {Array<object>} actions - An array of actions
+     * @param {any} result - The result of the conditional check in order to evaluate the actions.
+     * @param {any} row - The contextual row data for this component.
+     * @param {any} data - The global data object for the submission.
+     * @returns {boolean} - TRUE if the component was altered.
+     */
     applyActions(newComponent, actions, result, row, data) {
         data = data || this.rootValue;
         row = row || this.data;
@@ -1794,8 +2043,8 @@ export default class Component extends Element {
     }
     /**
      * Add a new input error to this element.
-     *
-     * @param {{level: string, message: string}[]} messages
+     * @param {Array<object>|string} messages - An array of messages to add to the element.
+     * @returns {void}
      */
     addMessages(messages) {
         if (!messages) {
@@ -1818,6 +2067,15 @@ export default class Component extends Element {
             }).join(''));
         }
     }
+    /**
+     * Sets the form input widget error classes.
+     * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.
+     * @param {boolean} dirty - If the input is dirty.
+     * @param {boolean} hasErrors - If the input has errors.
+     * @param {boolean} hasMessages - If the input has messages.
+     * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.
+     * @returns {void}
+     */
     setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
         this.clearErrorClasses();
         elements.forEach((element) => {
@@ -1844,6 +2102,12 @@ export default class Component extends Element {
             this.addClass(element, 'has-message');
         }
     }
+    /**
+     * Adds the classes necessary to mark an element as invalid.
+     * @param {HTMLElement} element - The element you wish to add the invalid classes to.
+     * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.
+     * @returns {void}
+     */
     setElementInvalid(element, invalid) {
         if (!element)
             return;
@@ -1855,6 +2119,9 @@ export default class Component extends Element {
         }
         element.setAttribute('aria-invalid', invalid ? 'true' : 'false');
     }
+    /**
+     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.
+     */
     clearOnHide() {
         // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.
         if (
@@ -1874,6 +2141,10 @@ export default class Component extends Element {
             }
         }
     }
+    /**
+     * Triggers a debounced onChange event for the root component (usually Webform).
+     * @param {...any} args - The arguments to pass to the onChange event.
+     */
     triggerRootChange(...args) {
         if (this.options.onChange) {
             this.options.onChange(...args);
@@ -1882,6 +2153,13 @@ export default class Component extends Element {
             this.root.triggerChange(...args);
         }
     }
+    /**
+     * Called when the component value has been changed. This will then trigger the root level onChange handler which
+     * propagates the checkData methods for the full component tree.
+     * @param {any} flags - The flags for the change event propagation.
+     * @param {boolean} fromRoot - If the change event is from the root component.
+     * @returns {boolean} - TRUE if the component has changed.
+     */
     onChange(flags, fromRoot) {
         flags = flags || {};
         if (flags.modified) {
@@ -1891,7 +2169,7 @@ export default class Component extends Element {
             this.addClass(this.getElement(), 'formio-modified');
         }
         // If we are supposed to validate on blur, then don't trigger validation yet.
-        if (this.component.validateOn === 'blur') {
+        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {
             flags.noValidate = true;
         }
         if (this.component.onChange) {
@@ -2017,7 +2295,7 @@ export default class Component extends Element {
                     return Promise.reject();
                 }
                 this.quill = new Quill(element, isIEBrowser ? { ...settings, modules: {} } : settings);
-                /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ **/
+                /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ */
                 const txtArea = document.createElement('textarea');
                 txtArea.setAttribute('class', 'quill-source-code');
                 this.quill.addContainer('ql-custom').appendChild(txtArea);
@@ -2031,7 +2309,7 @@ export default class Component extends Element {
                         txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';
                     });
                 }
-                /** END CODEBLOCK **/
+                /** END CODEBLOCK */
                 // Make sure to select cursor when they click on the element.
                 this.addEventListener(element, 'click', () => this.quill.focus());
                 // Allows users to skip toolbar items when tabbing though form
@@ -2073,28 +2351,34 @@ 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;
     }
     /**
      * The empty value for this component.
-     *
-     * @return {null}
+     * @returns {null} - The empty value for this component.
      */
     get emptyValue() {
         return null;
     }
     /**
      * Returns if this component has a value set.
-     *
+     * @param {any} data - The global data object.
+     * @returns {boolean} - TRUE if a value is set.
      */
     hasValue(data) {
         return !_.isUndefined(_.get(data || this.data, this.key));
     }
     /**
      * Get the data value at the root level.
-     *
-     * @return {*}
+     * @returns {*} - The root value for the component, typically the Webform data object.
      */
     get rootValue() {
         return this.root ? this.root.data : this.data;
@@ -2104,7 +2388,7 @@ export default class Component extends Element {
     }
     /**
      * Get the static value of this component.
-     * @return {*}
+     * @returns {*} - The value for this component.
      */
     get dataValue() {
         if (!this.key ||
@@ -2122,8 +2406,7 @@ export default class Component extends Element {
     }
     /**
      * Sets the static value of this component.
-     *
-     * @param value
+     * @param {*} value - The value to set for this component.
      */
     set dataValue(value) {
         if (!this.allowData ||
@@ -2143,8 +2426,8 @@ export default class Component extends Element {
     }
     /**
      * Splice a value from the dataValue.
-     *
-     * @param index
+     * @param {number} index - The index to splice for an array component values.
+     * @param {*} flags - The flags to use when splicing the value.
      */
     splice(index, flags = {}) {
         if (this.hasValue()) {
@@ -2212,8 +2495,7 @@ export default class Component extends Element {
     }
     /**
      * Get the input value of this component.
-     *
-     * @return {*}
+     * @returns {*} - The value for the component.
      */
     getValue() {
         if (!this.hasInput || this.viewOnly || !this.refs.input || !this.refs.input.length) {
@@ -2235,9 +2517,8 @@ export default class Component extends Element {
     }
     /**
      * Get the value at a specific index.
-     *
-     * @param index
-     * @returns {*}
+     * @param {number} index - For an array component or multiple values, this returns the value at a specific index.
+     * @returns {*} - The value at the specified index.
      */
     getValueAt(index) {
         const input = this.performInputMapping(this.refs.input[index]);
@@ -2245,11 +2526,9 @@ export default class Component extends Element {
     }
     /**
      * Set the value of this component.
-     *
-     * @param value
-     * @param flags
-     *
-     * @return {boolean} - If the value changed.
+     * @param {*} value - The value to set for this component.
+     * @param {*} flags - The flags to use when setting the value.
+     * @returns {boolean} - If the value changed.
      */
     setValue(value, flags = {}) {
         const changed = this.updateValue(value, flags);
@@ -2273,16 +2552,23 @@ export default class Component extends Element {
         }
         for (const i in this.refs.input) {
             if (this.refs.input.hasOwnProperty(i)) {
-                this.setValueAt(i, isArray ? value[i] : value, flags);
+                this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);
             }
         }
         return changed;
     }
+    /**
+     * Returns if the value (e.g. array) should be divided between several inputs
+     * @returns {boolean}
+     */
+    isSingleInputValue() {
+        return false;
+    }
     /**
      * Set the value at a specific index.
-     *
-     * @param index
-     * @param value
+     * @param {number} index - The index to set the value at.
+     * @param {*} value - The value to set at the specified index.
+     * @param {*} flags - The flags to use when setting the value.
      */
     setValueAt(index, value, flags = {}) {
         if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {
@@ -2329,20 +2615,17 @@ export default class Component extends Element {
     }
     /**
      * Normalize values coming into updateValue.
-     *
-     * @param value
-     * @return {*}
+     * @param {*} value - The value to normalize before setting.
+     * @returns {*} - The normalized value.
      */
     normalizeValue(value) {
-        if (this.component.multiple && !Array.isArray(value)) {
-            value = value ? [value] : [];
-        }
         return value;
     }
     /**
      * Update a value of this component.
-     *
-     * @param flags
+     * @param {*} value - The value to update.
+     * @param {*} flags - The flags to use when updating the value.
+     * @returns {boolean} - If the value changed.
      */
     updateComponentValue(value, flags = {}) {
         let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;
@@ -2361,9 +2644,8 @@ export default class Component extends Element {
     }
     /**
      * Updates the value of this component plus all sub-components.
-     *
-     * @param args
-     * @return {boolean}
+     * @param {...any} args - The arguments to pass to updateValue.
+     * @returns {boolean} - If the value changed.
      */
     updateValue(...args) {
         return this.updateComponentValue(...args);
@@ -2381,7 +2663,7 @@ export default class Component extends Element {
      */
     resetValue() {
         this.unset();
-        this.setValue(this.emptyValue, {
+        this.setValue(this.defaultValue || this.emptyValue, {
             noUpdateEvent: true,
             noValidate: true,
             resetValue: true
@@ -2389,10 +2671,9 @@ export default class Component extends Element {
     }
     /**
      * Determine if the value of this component has changed.
-     *
-     * @param newValue
-     * @param oldValue
-     * @return {boolean}
+     * @param {*} newValue - The new value to check.
+     * @param {*} oldValue - The existing value of the component.
+     * @returns {boolean} - TRUE if the value has changed.
      */
     hasChanged(newValue, oldValue) {
         if (((newValue === undefined) || (newValue === null)) &&
@@ -2410,8 +2691,9 @@ export default class Component extends Element {
     }
     /**
      * Update the value on change.
-     *
-     * @param flags
+     * @param {*} flags - The flags to use when triggering the on change event.
+     * @param {boolean} changed - If the value has changed.
+     * @returns {boolean} - If the value changed.
      */
     updateOnChange(flags = {}, changed = false) {
         if (!flags.noUpdateEvent && changed) {
@@ -2424,13 +2706,6 @@ export default class Component extends Element {
         }
         return false;
     }
-    /**
-     * Perform a calculated value operation.
-     *
-     * @param data - The global data object.
-     *
-     * @return {boolean} - If the value changed during calculation.
-     */
     convertNumberOrBoolToString(value) {
         if (typeof value === 'number' || typeof value === 'boolean') {
             return value.toString();
@@ -2538,9 +2813,10 @@ export default class Component extends Element {
     /* eslint-enable max-statements */
     /**
      * Performs calculations in this component plus any child components.
-     *
-     * @param args
-     * @return {boolean}
+     * @param {*} data - The data to perform the calculation with.
+     * @param {*} flags - The flags to use when calculating the value.
+     * @param {*} row - The contextual row data to use when performing the calculation.
+     * @returns {boolean} - TRUE if the value changed.
      */
     calculateValue(data, flags, row) {
         data = data || this.rootValue;
@@ -2550,15 +2826,14 @@ export default class Component extends Element {
     }
     /**
      * Get this component's label text.
-     *
+     * @returns {string} - The label text for this component.
      */
     get label() {
         return this.component.label;
     }
     /**
      * Set this component's label text and render it.
-     *
-     * @param value - The new label text.
+     * @param {string} value - The new label text.
      */
     set label(value) {
         this.component.label = value;
@@ -2568,17 +2843,18 @@ export default class Component extends Element {
     }
     /**
      * Get FormioForm element at the root of this component tree.
-     *
+     * @returns {*} root - The root component to search from.
      */
     getRoot() {
         return this.root;
     }
     /**
      * Returns the invalid message, or empty string if the component is valid.
-     *
-     * @param data
-     * @param dirty
-     * @return {*}
+     * @param {*} data - The data to check if the component is valid.
+     * @param {boolean} dirty - If the component is dirty.
+     * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.
+     * @param {*} row - Contextual row data for this component.
+     * @returns {string} - The message to show when the component is invalid.
      */
     invalidMessage(data, dirty, ignoreCondition, row) {
         if (!ignoreCondition && !this.checkCondition(row, data)) {
@@ -2610,10 +2886,9 @@ export default class Component extends Element {
     }
     /**
      * Returns if the component is valid or not.
-     *
-     * @param data
-     * @param dirty
-     * @return {boolean}
+     * @param {*} data - The data to check if the component is valid.
+     * @param {boolean} dirty - If the component is dirty.
+     * @returns {boolean} - TRUE if the component is valid.
      */
     isValid(data, dirty) {
         return !this.invalidMessage(data, dirty);
@@ -2632,8 +2907,8 @@ export default class Component extends Element {
     }
     /**
      * Interpolate errors from the validation methods.
-     * @param {*} errors
-     * @returns
+     * @param {Array<any>} errors - An array of errors to interpolate.
+     * @returns {Array<any>} - The interpolated errors.
      */
     interpolateErrors(errors) {
         const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
@@ -2645,7 +2920,7 @@ export default class Component extends Element {
      * @param {*} data - The root submission data.
      * @param {*} row - The contextual row data.
      * @param {*} flags - The flags to perform validation.
-     * @returns
+     * @returns {boolean} - TRUE if the component is valid.
      */
     showValidationErrors(errors, data, row, flags) {
         if (flags.silentCheck) {
@@ -2655,7 +2930,7 @@ export default class Component extends Element {
             flags.dirty = true;
         }
         if (flags.fromSubmission && this.hasValue(data)) {
-            flags.dirty = true;
+            flags.dirty = this.pristine && this.component.protected ? false : true;
         }
         this.setDirty(flags.dirty);
         return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);
@@ -2665,9 +2940,9 @@ export default class Component extends Element {
      * @param {*} data - The root data you wish to use for this component.
      * @param {*} row - The contextual row data you wish to use for this component.
      * @param {*} flags - The flags to control the behavior of the validation.
-     * @returns
+     * @returns {Array<any>} - An array of errors if the component is invalid.
      */
-    validateComponent(data, row, flags = {}) {
+    validateComponent(data = null, row = null, flags = {}) {
         data = data || this.rootValue;
         row = row || this.data;
         const { async = false } = flags;
@@ -2681,6 +2956,7 @@ export default class Component extends Element {
             value: this.validationValue,
             path: this.path || this.component.key,
             instance: this,
+            form: this.root ? this.root._form : {},
             scope: { errors: [] },
             processors: [
                 validateProcessInfo
@@ -2698,13 +2974,14 @@ export default class Component extends Element {
     }
     /**
      * Checks the validity of this component and sets the error message if it is invalid.
-     *
-     * @param data
-     * @param dirty
-     * @param row
-     * @return {boolean}
-     */
-    checkComponentValidity(data, dirty, row, flags = {}, allErrors = []) {
+     * @param {*} data - The data to check if the component is valid.
+     * @param {boolean} dirty - If the component is dirty.
+     * @param {*} row - The contextual row data for this component.
+     * @param {*} flags - The flags to use when checking the validity.
+     * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.
+     * @returns {boolean} - TRUE if the component is valid.
+     */
+    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {
         data = data || this.rootValue;
         row = row || this.data;
         flags.dirty = dirty || false;
@@ -2716,7 +2993,7 @@ export default class Component extends Element {
                         this.parent.childErrors.push(...errors);
                     }
                     else {
-                        _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                        _.remove(this.parent.childErrors, (err) => (err?.component?.key || err?.context?.key) === this.component.key);
                     }
                 }
                 this.showValidationErrors(errors, data, row, flags);
@@ -2732,7 +3009,7 @@ export default class Component extends Element {
                     this.parent.childErrors.push(...errors);
                 }
                 else {
-                    _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                    _.remove(this.parent.childErrors, (err) => (err?.component?.key || err?.context?.key) === this.component.key);
                 }
             }
             return errors.length === 0;
@@ -2740,32 +3017,30 @@ export default class Component extends Element {
     }
     /**
      * Checks the validity of the component.
-     * @param {*} data
-     * @param {*} dirty
-     * @param {*} row
-     * @param {*} silentCheck
-     * @returns
-     */
-    checkValidity(data, dirty, row, silentCheck, errors = []) {
+     * @param {*} data - The data to check if the component is valid.
+     * @param {boolean} dirty - If the component is dirty.
+     * @param {*} row - The contextual row data for this component.
+     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.
+     * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.
+     * @returns {boolean} - TRUE if the component is valid.
+     */
+    checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {
         data = data || this.rootValue;
         row = row || this.data;
-        console.log('Deprecation warning:  Component.checkValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');
         return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);
     }
-    checkAsyncValidity(data, dirty, row, silentCheck, errors = []) {
-        console.log('Deprecation warning:  Component.checkAsyncValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');
+    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {
         return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);
     }
     /**
      * Check the conditions, calculations, and validity of a single component and triggers an update if
      * something changed.
-     *
-     * @param data - The root data of the change event.
-     * @param flags - The flags from this change event.
-     *
-     * @return boolean - If component is valid or not.
+     * @param {*} data - The root data of the change event.
+     * @param {*} flags - The flags from this change event.
+     * @param {*} row - The contextual row data for this component.
+     * @returns {void|boolean} - TRUE if no check should be performed on the component.
      */
-    checkData(data, flags, row) {
+    checkData(data = null, flags = null, row = null) {
         data = data || this.rootValue;
         flags = flags || {};
         row = row || this.data;
@@ -2808,8 +3083,7 @@ export default class Component extends Element {
     }
     /**
      * Check if a component is eligible for multiple validation
-     *
-     * @return {boolean}
+     * @returns {boolean} - TRUE if the component is eligible for multiple validation.
      */
     validateMultiple() {
         return true;
@@ -2927,8 +3201,7 @@ export default class Component extends Element {
     /**
      * Determines if the value of this component is hidden from the user as if it is coming from the server, but is
      * protected.
-     *
-     * @return {boolean|*}
+     * @returns {boolean|*} - TRUE if the value is hidden.
      */
     isValueHidden() {
         if (this.component.protected && this.root.editing) {
@@ -2973,6 +3246,8 @@ export default class Component extends Element {
     }
     /**
      * Prints out the value of this component as a string value.
+     * @param {*} value - The value to print out.
+     * @returns {string} - The string representation of the value.
      */
     asString(value) {
         value = value || this.getValue();
@@ -2980,15 +3255,14 @@ export default class Component extends Element {
     }
     /**
      * Return if the component is disabled.
-     * @return {boolean}
+     * @returns {boolean} - TRUE if the component is disabled.
      */
     get disabled() {
         return this._disabled || this.parentDisabled;
     }
     /**
      * Disable this component.
-     *
-     * @param {boolean} disabled
+     * @param {boolean} disabled - TRUE to disable the component.
      */
     set disabled(disabled) {
         this._disabled = disabled;
@@ -3099,6 +3373,10 @@ export default class Component extends Element {
                             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) {
@@ -3113,6 +3391,7 @@ export default class Component extends Element {
     }
     /**
      * Get the element information.
+     * @returns {*} - The components "input" DOM element information.
      */
     elementInfo() {
         const attributes = {
@@ -3144,21 +3423,22 @@ export default class Component extends Element {
             this.on('render', () => this.focus(), true);
         }
     }
-    scrollIntoView(element = this.element) {
+    scrollIntoView(element = this.element, verticalOnly) {
         if (!element) {
             return;
         }
         const { left, top } = element.getBoundingClientRect();
-        window.scrollTo(left + window.scrollX, top + window.scrollY);
+        window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);
     }
     focus(index) {
         if ('beforeFocus' in this.parent) {
             this.parent.beforeFocus(this);
         }
+        if (!index && !_.isNumber(index) && this.refs?.input?.length) {
+            index = this.refs.input.length - 1;
+        }
         if (this.refs.input?.length) {
-            const focusingInput = typeof index === 'number' && this.refs.input[index]
-                ? this.refs.input[index]
-                : this.refs.input[this.refs.input.length - 1];
+            const focusingInput = this.refs.input[index];
             if (this.component.widget?.type === 'calendar') {
                 const sibling = focusingInput.nextSibling;
                 if (sibling) {
@@ -3178,6 +3458,7 @@ export default class Component extends Element {
     }
     /**
      * Get `Formio` instance for working with files
+     * @returns {import('@formio/core').Formio} - The Formio instance file service.
      */
     get fileService() {
         if (this.options.fileService) {