@formio/js 5.3.6 → 5.4.0

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

@@ -145,7 +145,7 @@ class Component extends Element_1.default {
                 unique: false,
             },
             /**
-             * The simple conditional settings for a component.
+             * the simple conditional settings for a component.
              */
             conditional: {
                 show: null,
@@ -464,6 +464,16 @@ class Component extends Element_1.default {
         }
         return false;
     }
+    hasCondionallyHiddenLayoutParent() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent._conditionallyHidden && utils_1.default.isLayoutComponent(currentParent) && currentParent.component.clearOnHide === true) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
@@ -740,7 +750,7 @@ class Component extends Element_1.default {
             this._conditionallyClear = true;
             return this._conditionallyClear;
         }
-        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
+        this._conditionallyClear = this.hasSetValue ? this.hasCondionallyHiddenLayoutParent() : this.parentShouldConditionallyClear();
         return this._conditionallyClear;
     }
     /**
@@ -995,8 +1005,20 @@ class Component extends Element_1.default {
         return this.options.renderMode === 'html';
     }
     renderTemplate(name, data = {}, modeOption = '') {
-        // Need to make this fall back to form if renderMode is not found similar to how we search templates.
+        // Allow more specific template names
+        const names = [
+            `${name}-${this.component.type}-${this.key}`,
+            `${name}-${this.component.type}`,
+            `${name}-${this.key}`,
+            `${name}`,
+        ];
+        // Allow template alters.
         const mode = modeOption || this.options.renderMode || 'form';
+        const { referenceAttributeName, template } = this.getTemplate(names, mode);
+        if (referenceAttributeName) {
+            this._referenceAttributeName = referenceAttributeName;
+        }
+        // Need to make this fall back to form if renderMode is not found similar to how we search templates.
         data.component = this.component;
         data.self = this;
         data.options = this.options;
@@ -1018,18 +1040,7 @@ class Component extends Element_1.default {
         };
         data.label = data.labelInfo || this.labelInfo;
         data.tooltip = this.getFormattedTooltip(this.component.tooltip);
-        // Allow more specific template names
-        const names = [
-            `${name}-${this.component.type}-${this.key}`,
-            `${name}-${this.component.type}`,
-            `${name}-${this.key}`,
-            `${name}`,
-        ];
-        // Allow template alters.
-        const { referenceAttributeName, template } = this.getTemplate(names, mode);
-        if (referenceAttributeName) {
-            this._referenceAttributeName = referenceAttributeName;
-        }
+        data.customStyles = this.getCustomStyles(names);
         return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);
     }
     /**
@@ -1141,9 +1152,12 @@ class Component extends Element_1.default {
      * @returns {string} - The submission timezone.
      */
     get submissionTimezone() {
-        this.options.submissionTimezone =
-            this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');
-        return this.options.submissionTimezone;
+        if (!this.options.submissionTimezone) {
+            this.options.submissionTimezone = lodash_1.default.get(this.root, 'options.submissionTimezone');
+        }
+        return (this.options.submissionTimezone ||
+            lodash_1.default.get(this.root, '_submission.metadata.timezone') ||
+            lodash_1.default.get(this.component, 'widget.submissionTimezone'));
     }
     /**
      * Return the current timezone.
@@ -1158,6 +1172,7 @@ class Component extends Element_1.default {
      * @returns {string} - The current timezone.
      */
     getTimezone(settings) {
+        settings = settings || {};
         if (settings.timezone) {
             return settings.timezone;
         }
@@ -1165,12 +1180,19 @@ class Component extends Element_1.default {
             return 'UTC';
         }
         const submissionTimezone = this.submissionTimezone;
+        const mode = settings.displayInTimezone === '' || settings.displayInTimezone == null
+            ? 'viewer'
+            : settings.displayInTimezone;
+        if (this.options.pdf && submissionTimezone) {
+            return submissionTimezone;
+        }
+        const staticSnapshot = this.options.server ||
+            this.options.renderMode === 'html' ||
+            !!this.options.viewAsHtml;
         if (submissionTimezone &&
-            (settings.displayInTimezone === 'submission' ||
-                ((this.options.pdf || this.options.server) && settings.displayInTimezone === 'viewer'))) {
+            (mode === 'submission' || (staticSnapshot && (mode === 'viewer' || mode === 'location')))) {
             return submissionTimezone;
         }
-        // Return current timezone if none are provided.
         return (0, utils_2.currentTimezone)();
     }
     /**
@@ -1663,6 +1685,7 @@ class Component extends Element_1.default {
      * @returns {HTMLElement} - The created modal element.
      */
     createModal(element, attr, confirm) {
+        var _a;
         const dialog = this.ce('div', attr || {});
         this.setContent(dialog, this.renderTemplate('dialog'));
         // Add refs to dialog, not "this".
@@ -1672,14 +1695,27 @@ class Component extends Element_1.default {
             dialogContents: 'single',
             dialogClose: 'single',
         });
+        // Check if an element is inside shadow dom
+        const isInShadowDOM = typeof ShadowRoot !== 'undefined' && ((_a = this.element) === null || _a === void 0 ? void 0 : _a.getRootNode()) instanceof ShadowRoot;
+        // if we render shadow dom inside <iframe>'s we need to get the body from the current iframe,
+        // not the general body. This is necessary to hide and show the scroll bar correctly.
+        const body = isInShadowDOM ? this.element.getRootNode().host.ownerDocument.body : document.body;
+        const rootEl = isInShadowDOM ? this.element.closest('.formio-form-wrapper') : document.body;
+        const checkModal = (method) => {
+            if (isInShadowDOM) {
+                body.style.overflow = method === 'add' ? 'hidden' : '';
+                return;
+            }
+            body.classList[method]('modal-open');
+        };
         dialog.refs.dialogContents.appendChild(element);
-        document.body.appendChild(dialog);
-        document.body.classList.add('modal-open');
+        rootEl.appendChild(dialog);
+        checkModal('add');
         dialog.close = () => {
-            document.body.classList.remove('modal-open');
+            checkModal('remove');
             dialog.dispatchEvent(new CustomEvent('close'));
         };
-        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));
+        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, rootEl));
         const close = (event) => {
             event.preventDefault();
             dialog.close();
@@ -1750,6 +1786,21 @@ class Component extends Element_1.default {
         });
         return customCSS;
     }
+    /**
+     * Build custom styles from the styles form option or global config.
+     * @param {string[]} templateNames - The possible template names.
+     * @returns {{ [refName: string]: string[] }} - The custom styles object for the named template.
+     * @todo - Rename this to a better method name that doesn't clash
+     */
+    getCustomStyles(templateNames) {
+        var _a;
+        for (const name of templateNames) {
+            if ((_a = this.options.styles) === null || _a === void 0 ? void 0 : _a[name]) {
+                return this.options.styles[name];
+            }
+        }
+        return {};
+    }
     /**
      * Returns the component condition operator settings if available.
      * @returns {object} - The component condition operator settings.
@@ -2527,6 +2578,20 @@ class Component extends Element_1.default {
                 return Promise.resolve(editor);
             }
             else {
+                // Due to an issue with ckeditor not loading styles in the shadowdom (https://github.com/ckeditor/ckeditor5/issues/15824), we need to copy cke-styles to the shadowdom
+                let current = element;
+                while (current) {
+                    if (current instanceof ShadowRoot) {
+                        const ckeStyles = document.querySelector('style[data-cke="true"]');
+                        const clone = document.createElement('style');
+                        clone.setAttribute('data-cke', 'true');
+                        clone.textContent = ckeStyles.textContent;
+                        current.prepend(clone);
+                        break;
+                    }
+                    ;
+                    current = current.parentNode || current.host;
+                }
                 return ClassicEditor.create(element, settings).then((editor) => {
                     editor.model.document.on('change', () => onChange(editor.data.get()));
                     return editor;
@@ -2543,12 +2608,61 @@ class Component extends Element_1.default {
             { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` },
         ], true);
         // Lazy load the quill library.
-        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true).then(() => {
+        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.js`), true).then(() => {
             return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true).then(() => {
                 if (!element.parentNode) {
                     return Promise.reject();
                 }
                 this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);
+                const root = element.getRootNode();
+                if (root instanceof ShadowRoot && root.getSelection) {
+                    const sel = this.quill.selection;
+                    // 1. getNativeRange: read selection from shadowRoot instead of document
+                    sel.getNativeRange = () => {
+                        const shadowSelection = root.getSelection();
+                        if (shadowSelection == null || shadowSelection.rangeCount <= 0)
+                            return null;
+                        const nativeRange = shadowSelection.getRangeAt(0);
+                        if (nativeRange == null)
+                            return null;
+                        return sel.normalizeNative(nativeRange);
+                    };
+                    // 2. hasFocus: check shadowRoot.activeElement instead of document.activeElement
+                    sel.hasFocus = () => {
+                        return root.activeElement === sel.root ||
+                            (root.activeElement != null && sel.root.contains(root.activeElement));
+                    };
+                    // 3. setNativeRange: use shadowRoot's selection to add/remove ranges
+                    const origSetNativeRange = sel.setNativeRange.bind(sel);
+                    sel.setNativeRange = (startNode, startOffset, endNode, endOffset, force) => {
+                        // Delegate to original logic for the null case (blur)
+                        if (startNode == null) {
+                            origSetNativeRange(null);
+                            return;
+                        }
+                        if (!sel.hasFocus()) {
+                            sel.root.focus({ preventScroll: true });
+                        }
+                        const shadowSelection = root.getSelection();
+                        if (shadowSelection == null)
+                            return;
+                        const { native } = sel.getNativeRange() || {};
+                        endNode = endNode !== null && endNode !== void 0 ? endNode : startNode;
+                        endOffset = endOffset !== null && endOffset !== void 0 ? endOffset : startOffset;
+                        if (native == null || force ||
+                            startNode !== native.startContainer || startOffset !== native.startOffset ||
+                            endNode !== native.endContainer || endOffset !== native.endOffset) {
+                            const range = document.createRange();
+                            range.setStart(startNode, startOffset);
+                            range.setEnd(endNode, endOffset);
+                            shadowSelection.removeAllRanges();
+                            shadowSelection.addRange(range);
+                        }
+                    };
+                    document.addEventListener('selectionchange', () => {
+                        sel.update();
+                    });
+                }
                 /** 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');
@@ -2567,7 +2681,8 @@ class Component extends Element_1.default {
                 // 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
-                const elm = document.querySelectorAll('.ql-formats > button');
+                const queryRoot = element.getRootNode() || document;
+                const elm = queryRoot.querySelectorAll('.ql-formats > button');
                 for (let i = 0; i < elm.length; i++) {
                     elm[i].setAttribute('tabindex', '-1');
                 }
@@ -2581,7 +2696,7 @@ class Component extends Element_1.default {
     }
     get shouldSanitizeValue() {
         var _a;
-        // Sanitize value if sanitizing for thw whole content is turned off
+        // Sanitize value if sanitizing for the whole content is turned off
         return ((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false;
     }
     addAce(element, settings, onChange) {
@@ -2599,6 +2714,7 @@ class Component extends Element_1.default {
             editor.setOptions(settings);
             editor.getSession().setMode(settings.mode);
             editor.on('change', () => onChange(editor.getValue()));
+            editor.renderer.attachToShadowRoot();
             if (settings.isUseWorkerDisabled) {
                 editor.session.setUseWorker(false);
             }
@@ -2659,7 +2775,6 @@ class Component extends Element_1.default {
             return;
         }
         lodash_1.default.set(this._data, this.key, value);
-        return;
     }
     /**
      * Splice a value from the dataValue.
@@ -2707,9 +2822,9 @@ class Component extends Element_1.default {
                 this.component.defaultValue !== undefined));
     }
     /**
-     * Determine if we should add a default value for this component.
-     * @returns {boolean} - TRUE if a default value should be set
-     */
+    * Determine if we should add a default value for this component.
+    * @returns {boolean} - TRUE if a default value should be set
+    */
     get shouldAddDefaultValue() {
         return this.pristine && this.allowData && (this.hasDefaultValue || !this.options.noDefaults);
     }
@@ -3409,22 +3524,27 @@ class Component extends Element_1.default {
             }
         });
         this.addEventListener(element, 'blur', () => {
-            if (this.root) {
-                this.root.pendingBlur = utils_1.default.delay(() => {
-                    var _a, _b;
-                    this.emit('blur', this);
-                    if (this.component.validateOn === 'blur') {
-                        (_b = (_a = this.root).triggerChange) === null || _b === void 0 ? void 0 : _b.call(_a, { fromBlur: true }, {
-                            instance: this,
-                            component: this.component,
-                            value: this.dataValue,
-                            flags: { fromBlur: true },
-                        });
-                    }
-                    this.root.focusedComponent = null;
-                    this.root.pendingBlur = null;
-                });
+            const root = this.root;
+            if (!root) {
+                return;
             }
+            root.pendingBlur = utils_1.default.delay(() => {
+                var _a;
+                if (!root) {
+                    return;
+                }
+                this.emit('blur', this);
+                if (this.component.validateOn === 'blur') {
+                    (_a = root.triggerChange) === null || _a === void 0 ? void 0 : _a.call(root, { fromBlur: true }, {
+                        instance: this,
+                        component: this.component,
+                        value: this.dataValue,
+                        flags: { fromBlur: true },
+                    });
+                }
+                root.focusedComponent = null;
+                root.pendingBlur = null;
+            });
         });
     }
     setCustomValidity(messages, dirty, external) {

package/lib/cjs/components/_classes/component/editForm/Component.edit.conditional.js

@@ -49,5 +49,5 @@ exports.default = [
     },
     utils_1.default.javaScriptValue('Advanced Conditions', 'customConditional', 'conditional.json', 110, '<p>You must assign the <strong>show</strong> variable a boolean result.</p>' +
         '<p><strong>Note: Advanced Conditional logic will override the results of the Simple Conditional logic.</strong></p>' +
-        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>'),
+        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', utils_1.default.tokenVariableDescription()),
 ];

package/lib/cjs/components/_classes/component/editForm/Component.edit.data.d.ts

@@ -82,6 +82,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -101,6 +102,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -126,6 +128,7 @@ declare const _default: ({
         value: string;
     })[];
     placeholder?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -141,6 +144,7 @@ declare const _default: ({
     tooltip: string;
     key: string;
     input: boolean;
+    customConditional: string;
     logic: ({
         name: string;
         trigger: {
@@ -211,6 +215,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     as?: undefined;
     editor?: undefined;
@@ -226,6 +231,7 @@ declare const _default: ({
     placeholder?: undefined;
     inline?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -248,6 +254,7 @@ declare const _default: ({
     placeholder?: undefined;
     inline?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;

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

@@ -60,6 +60,7 @@ exports.default = [
         tooltip: 'Encrypt this field on the server. This is two way encryption which is not suitable for passwords.',
         key: 'encrypted',
         input: true,
+        customConditional: 'show = data.encrypted;',
         logic: [
             {
                 name: 'disabled',
@@ -143,7 +144,7 @@ exports.default = [
         input: true,
     },
     utils_1.default.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>'),
-    utils_1.default.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>'),
+    utils_1.default.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', utils_1.default.tokenVariableDescription()),
     {
         type: 'checkbox',
         input: true,

package/lib/cjs/components/_classes/component/editForm/utils.d.ts

@@ -2,6 +2,7 @@ export default EditFormUtils;
 declare namespace EditFormUtils {
     function sortAndFilterComponents(components: any): any;
     function unifyComponents(objValue: any, srcValue: any): any;
+    function tokenVariableDescription(): string;
     function logicVariablesTable(additional: any): {
         type: string;
         tag: string;

package/lib/cjs/components/_classes/component/editForm/utils.js

@@ -37,6 +37,9 @@ const EditFormUtils = {
         }
         return lodash_1.default.isEqual(objValue, srcValue);
     },
+    tokenVariableDescription() {
+        return '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>';
+    },
     logicVariablesTable(additional) {
         additional = additional || '';
         return {

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -833,6 +833,11 @@ class NestedComponent extends Field_1.default {
         else if (value && component.hasValue(value)) {
             return component.setValue(lodash_1.default.get(value, component.key), flags);
         }
+        // if no value is provided and noDefault flag, set empty value
+        else if (flags.noDefault && component.allowData) {
+            flags.resetValue = true;
+            return component.setValue(component.emptyValue, flags);
+        }
         else if ((!this.rootPristine || component.visible) &&
             (flags.resetValue || component.shouldAddDefaultValue)) {
             flags.noValidate = !flags.dirty;

package/lib/cjs/components/address/Address.js

@@ -265,6 +265,8 @@ class AddressComponent extends Container_1.default {
             this.restoreComponentsContext();
         }
         if (changed || (!lodash_1.default.isEmpty(value) && flags.fromSubmission)) {
+            // Recheck conditions on child components before redraw so their visibility is updated
+            this.getComponents().forEach((comp) => { var _a; return comp.checkConditions((_a = this.root) === null || _a === void 0 ? void 0 : _a.data); });
             this.redraw();
         }
         return changed;
@@ -403,6 +405,7 @@ class AddressComponent extends Container_1.default {
         super.redraw();
     }
     attach(element) {
+        var _a;
         const result = (this.builderMode || this.manualMode ? super.attach : Field_1.default.prototype.attach).call(this, element);
         if (!this.builderMode) {
             if (!this.provider && this.component.provider) {
@@ -418,6 +421,20 @@ class AddressComponent extends Container_1.default {
             [AddressComponent.removeValueIconRef]: 'multiple',
             [AddressComponent.searchInputRef]: 'multiple',
         });
+        // We define a container for rendering autocomplete.
+        // If isInShadowDOM=true then we render it in shadow dom otherwise in the document body.
+        const isInShadowDOM = typeof ShadowRoot !== 'undefined' && ((_a = this.element) === null || _a === void 0 ? void 0 : _a.getRootNode()) instanceof ShadowRoot;
+        let container;
+        if (isInShadowDOM) {
+            const shadowRoot = this.element.getRootNode();
+            container = document.createElement('div');
+            const target = shadowRoot.querySelector('.formio-form-wrapper');
+            target.appendChild(container);
+        }
+        else {
+            container = document.createElement('div');
+            document.body.appendChild(container);
+        }
         this.searchInput.forEach((element, index) => {
             if (!this.builderMode && element && this.provider) {
                 if (this.component.provider === 'google') {
@@ -426,6 +443,7 @@ class AddressComponent extends Container_1.default {
                 else {
                     (0, autocompleter_1.default)({
                         input: element,
+                        container,
                         debounceWaitMs: 300,
                         fetch: (text, update) => {
                             const query = text;

package/lib/cjs/components/datagrid/DataGrid.js

@@ -551,7 +551,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
             options.onChange = (flags, changed, modified) => {
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d;
                 const changedComponent = changed.component;
                 if ((changedComponent === null || changedComponent === void 0 ? void 0 : changedComponent.type) === 'form' && (changedComponent === null || changedComponent === void 0 ? void 0 : changedComponent.key)) {
                     const formComp = (0, utils_1.getComponent)(this.component.components, changedComponent.key);
@@ -562,8 +562,18 @@ class DataGridComponent extends NestedArrayComponent_1.default {
                     (_d = (_c = changed.instance.root).triggerChange) === null || _d === void 0 ? void 0 : _d.call(_c, flags, changed, modified);
                 }
                 else {
-                    (_e = this.triggerChange) === null || _e === void 0 ? void 0 : _e.call(this, { modified });
+                    if (modified && !flags.noPristineChangeOnModified) {
+                        this.pristine = false;
+                    }
+                    this.triggerRootChange(flags, {
+                        instance: this,
+                        component: this.component,
+                        value: this.dataValue,
+                        flags,
+                    }, modified);
+                    this.triggerRootChange(flags, changed, modified);
                 }
+                this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), row, lodash_1.default.toArray(this.rows[rowIndex]));
             };
             let columnComponent;
             if (this.builderMode) {

package/lib/cjs/components/datamap/DataMap.d.ts

@@ -19,6 +19,7 @@ export default class DataMapComponent extends DataGridComponent {
     getRowKey(rowIndex: any): string;
     get defaultRowKey(): string;
     getValueAsString(value: any, options: any): any;
+    findComponentInstance(key: any): any;
     createRowComponents(row: any, rowIndex: any): {
         __key: any;
     };

package/lib/cjs/components/datamap/DataMap.js

@@ -185,10 +185,14 @@ class DataMapComponent extends DataGrid_1.default {
           <tbody>
       `;
             result = Object.keys(value).reduce((result, key) => {
+                const componentInstance = this.findComponentInstance(key);
+                const viewValue = componentInstance
+                    ? componentInstance.getView(value[key], options)
+                    : this.getView(value[key], options);
                 result += `
           <tr>
             <th style="padding: 5px 10px;">${key}</th>
-            <td style="width:100%;padding:5px 10px;">${this.getView(value[key], options)}</td>
+            <td style="width:100%;padding:5px 10px;">${viewValue}</td>
           </tr>
         `;
                 return result;
@@ -208,6 +212,19 @@ class DataMapComponent extends DataGrid_1.default {
         }
         return typeof value === 'object' ? '[Complex Data]' : value;
     }
+    findComponentInstance(key) {
+        var _a;
+        if (!this.rows || !this.rows.length) {
+            return null;
+        }
+        // Find component instance with matching key
+        const foundRow = lodash_1.default.find(this.rows, (row) => { var _a; return ((_a = row === null || row === void 0 ? void 0 : row[this.valueKey]) === null || _a === void 0 ? void 0 : _a.key) === key; });
+        if (foundRow === null || foundRow === void 0 ? void 0 : foundRow[this.valueKey]) {
+            return foundRow[this.valueKey];
+        }
+        // If not found by key, return the first row's value component as fallback
+        return ((_a = this.rows[0]) === null || _a === void 0 ? void 0 : _a[this.valueKey]) || null;
+    }
     getDataValueAsTable(value, options) {
         let result = `
       <table border="1" style="width:100%">
@@ -215,10 +232,14 @@ class DataMapComponent extends DataGrid_1.default {
     `;
         if (this.visible && lodash_1.default.isObject(value)) {
             Object.keys(value).forEach((key) => {
+                const componentInstance = this.findComponentInstance(key);
+                const viewValue = componentInstance
+                    ? componentInstance.getView(value[key], options)
+                    : this.getView(value[key], options);
                 result += `
           <tr>
             <th style="padding: 5px 10px;">${key}</th>
-            <td style="width:100%;padding:5px 10px;">${this.getView(value[key], options)}</td>
+            <td style="width:100%;padding:5px 10px;">${viewValue}</td>
           </tr>
         `;
             });
@@ -253,9 +274,21 @@ class DataMapComponent extends DataGrid_1.default {
         });
         const valueComponent = lodash_1.default.clone(this.component.valueComponent);
         valueComponent.key = key;
-        const componentOptions = this.options;
+        const componentOptions = lodash_1.default.clone(this.options);
         componentOptions.row = options.row;
-        components[this.valueKey] = this.createComponent(valueComponent, componentOptions, this.dataValue);
+        if (this.submissionTimezone) {
+            componentOptions.submissionTimezone = this.submissionTimezone;
+            if (valueComponent.type === 'datetime') {
+                valueComponent.widget = Object.assign(Object.assign({}, valueComponent.widget), { submissionTimezone: this.submissionTimezone });
+            }
+        }
+        const createdComponent = this.createComponent(valueComponent, componentOptions, this.dataValue);
+        // Ensure submissionTimezone is set on datetime component instance's widget and options
+        if ((createdComponent === null || createdComponent === void 0 ? void 0 : createdComponent.type) === 'datetime' && this.submissionTimezone) {
+            createdComponent.component.widget = Object.assign(Object.assign({}, createdComponent.component.widget), { submissionTimezone: this.submissionTimezone });
+            createdComponent.options.submissionTimezone = this.submissionTimezone;
+        }
+        components[this.valueKey] = createdComponent;
         return components;
     }
     get canAddColumn() {

package/lib/cjs/components/datetime/DateTime.js

@@ -139,6 +139,13 @@ class DateTimeComponent extends Input_1.default {
     get momentFormat() {
         return utils_1.default.convertFormatToMoment(this.component.format);
     }
+    get timezone() {
+        const widget = this.component.widget;
+        if (widget && widget.type === 'calendar') {
+            return this.getTimezone(widget);
+        }
+        return super.timezone;
+    }
     isEmpty(value = this.dataValue) {
         if (value && value.toString() === 'Invalid Date') {
             return true;
@@ -170,7 +177,10 @@ class DateTimeComponent extends Input_1.default {
         let format = utils_1.default.convertFormatToMoment(this.component.format);
         format += format.match(/z$/) ? '' : ' z';
         const timezone = this.timezone;
-        if (value && !this.attached && timezone) {
+        const useTimezoneAwareFormat = value &&
+            timezone &&
+            (this.options.pdf || (options === null || options === void 0 ? void 0 : options.email));
+        if (useTimezoneAwareFormat) {
             if (Array.isArray(value) && this.component.multiple) {
                 return value
                     .map((item) => lodash_1.default.trim(utils_1.default.momentDate(item, format, timezone, options).format(format)))