@formio/js 5.3.6 → 5.4.0

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

@@ -140,7 +140,7 @@ export default class Component extends Element {
                 unique: false,
             },
             /**
-             * The simple conditional settings for a component.
+             * the simple conditional settings for a component.
              */
             conditional: {
                 show: null,
@@ -460,6 +460,16 @@ export default class Component extends Element {
         }
         return false;
     }
+    hasCondionallyHiddenLayoutParent() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent._conditionallyHidden && FormioUtils.isLayoutComponent(currentParent) && currentParent.component.clearOnHide === true) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
@@ -735,7 +745,7 @@ export default class Component extends Element {
             this._conditionallyClear = true;
             return this._conditionallyClear;
         }
-        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
+        this._conditionallyClear = this.hasSetValue ? this.hasCondionallyHiddenLayoutParent() : this.parentShouldConditionallyClear();
         return this._conditionallyClear;
     }
     /**
@@ -990,8 +1000,20 @@ export default class Component extends Element {
         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;
@@ -1013,18 +1035,7 @@ export default class Component extends Element {
         };
         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);
     }
     /**
@@ -1134,9 +1145,12 @@ export default class Component extends Element {
      * @returns {string} - The submission timezone.
      */
     get submissionTimezone() {
-        this.options.submissionTimezone =
-            this.options.submissionTimezone || _.get(this.root, 'options.submissionTimezone');
-        return this.options.submissionTimezone;
+        if (!this.options.submissionTimezone) {
+            this.options.submissionTimezone = _.get(this.root, 'options.submissionTimezone');
+        }
+        return (this.options.submissionTimezone ||
+            _.get(this.root, '_submission.metadata.timezone') ||
+            _.get(this.component, 'widget.submissionTimezone'));
     }
     /**
      * Return the current timezone.
@@ -1151,6 +1165,7 @@ export default class Component extends Element {
      * @returns {string} - The current timezone.
      */
     getTimezone(settings) {
+        settings = settings || {};
         if (settings.timezone) {
             return settings.timezone;
         }
@@ -1158,12 +1173,19 @@ export default class Component extends Element {
             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 currentTimezone();
     }
     /**
@@ -1667,14 +1689,27 @@ export default class Component extends Element {
             dialogContents: 'single',
             dialogClose: 'single',
         });
+        // Check if an element is inside shadow dom
+        const isInShadowDOM = typeof ShadowRoot !== 'undefined' && this.element?.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();
@@ -1745,6 +1780,20 @@ export default class Component extends Element {
         });
         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) {
+        for (const name of templateNames) {
+            if (this.options.styles?.[name]) {
+                return this.options.styles[name];
+            }
+        }
+        return {};
+    }
     /**
      * Returns the component condition operator settings if available.
      * @returns {object} - The component condition operator settings.
@@ -2520,6 +2569,20 @@ export default class Component extends Element {
                 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;
@@ -2542,12 +2605,61 @@ export default class Component extends Element {
             { type: 'styles', src: `${Formio.cdn.quill}/quill.${settings.theme}.css` },
         ], true);
         // Lazy load the quill library.
-        return Formio.requireLibrary('quill', 'Quill', _.get(this.options, 'editors.quill.src', `${Formio.cdn.quill}/quill.min.js`), true).then(() => {
+        return Formio.requireLibrary('quill', 'Quill', _.get(this.options, 'editors.quill.src', `${Formio.cdn.quill}/quill.js`), true).then(() => {
             return Formio.requireLibrary('quill-table', 'Quill', `${Formio.cdn.baseUrl}/quill/quill-table.js`, true).then(() => {
                 if (!element.parentNode) {
                     return Promise.reject();
                 }
                 this.quill = new Quill(element, isIEBrowser ? { ...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 ?? startNode;
+                        endOffset = 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');
@@ -2566,7 +2678,8 @@ export default class Component extends Element {
                 // 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');
                 }
@@ -2579,7 +2692,7 @@ export default class Component extends Element {
         });
     }
     get shouldSanitizeValue() {
-        // Sanitize value if sanitizing for thw whole content is turned off
+        // Sanitize value if sanitizing for the whole content is turned off
         return this.options?.sanitize !== false;
     }
     addAce(element, settings, onChange) {
@@ -2597,6 +2710,7 @@ export default class Component extends Element {
             editor.setOptions(settings);
             editor.getSession().setMode(settings.mode);
             editor.on('change', () => onChange(editor.getValue()));
+            editor.renderer.attachToShadowRoot();
             if (settings.isUseWorkerDisabled) {
                 editor.session.setUseWorker(false);
             }
@@ -2657,7 +2771,6 @@ export default class Component extends Element {
             return;
         }
         _.set(this._data, this.key, value);
-        return;
     }
     /**
      * Splice a value from the dataValue.
@@ -2704,9 +2817,9 @@ export default class Component extends Element {
                 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);
     }
@@ -3400,21 +3513,26 @@ export default class Component extends Element {
             }
         });
         this.addEventListener(element, 'blur', () => {
-            if (this.root) {
-                this.root.pendingBlur = FormioUtils.delay(() => {
-                    this.emit('blur', this);
-                    if (this.component.validateOn === 'blur') {
-                        this.root.triggerChange?.({ 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 = FormioUtils.delay(() => {
+                if (!root) {
+                    return;
+                }
+                this.emit('blur', this);
+                if (this.component.validateOn === 'blur') {
+                    root.triggerChange?.({ 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/mjs/components/_classes/component/editForm/Component.edit.conditional.js

@@ -44,5 +44,5 @@ export default [
     },
     EditFormUtils.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>', EditFormUtils.tokenVariableDescription()),
 ];

package/lib/mjs/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/mjs/components/_classes/component/editForm/Component.edit.data.js

@@ -55,6 +55,7 @@ export 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',
@@ -138,7 +139,7 @@ export default [
         input: true,
     },
     EditFormUtils.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
-    EditFormUtils.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>'),
+    EditFormUtils.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>', EditFormUtils.tokenVariableDescription()),
     {
         type: 'checkbox',
         input: true,

package/lib/mjs/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/mjs/components/_classes/component/editForm/utils.js

@@ -32,6 +32,9 @@ const EditFormUtils = {
         }
         return _.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/mjs/components/_classes/nested/NestedComponent.js

@@ -828,6 +828,11 @@ export default class NestedComponent extends Field {
         else if (value && component.hasValue(value)) {
             return component.setValue(_.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/mjs/components/address/Address.js

@@ -261,6 +261,8 @@ export default class AddressComponent extends ContainerComponent {
             this.restoreComponentsContext();
         }
         if (changed || (!_.isEmpty(value) && flags.fromSubmission)) {
+            // Recheck conditions on child components before redraw so their visibility is updated
+            this.getComponents().forEach((comp) => comp.checkConditions(this.root?.data));
             this.redraw();
         }
         return changed;
@@ -416,6 +418,20 @@ export default class AddressComponent extends ContainerComponent {
             [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' && this.element?.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') {
@@ -424,6 +440,7 @@ export default class AddressComponent extends ContainerComponent {
                 else {
                     autocompleter({
                         input: element,
+                        container,
                         debounceWaitMs: 300,
                         fetch: (text, update) => {
                             const query = text;

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

@@ -555,8 +555,21 @@ export default class DataGridComponent extends NestedArrayComponent {
                     changed.instance.root.triggerChange?.(flags, changed, modified);
                 }
                 else {
-                    this.triggerChange?.({ 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, {
+                    ...flags,
+                    changed,
+                }, row, _.toArray(this.rows[rowIndex]));
             };
             let columnComponent;
             if (this.builderMode) {

package/lib/mjs/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/mjs/components/datamap/DataMap.js

@@ -180,10 +180,14 @@ export default class DataMapComponent extends DataGridComponent {
           <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;
@@ -203,6 +207,18 @@ export default class DataMapComponent extends DataGridComponent {
         }
         return typeof value === 'object' ? '[Complex Data]' : value;
     }
+    findComponentInstance(key) {
+        if (!this.rows || !this.rows.length) {
+            return null;
+        }
+        // Find component instance with matching key
+        const foundRow = _.find(this.rows, (row) => row?.[this.valueKey]?.key === key);
+        if (foundRow?.[this.valueKey]) {
+            return foundRow[this.valueKey];
+        }
+        // If not found by key, return the first row's value component as fallback
+        return this.rows[0]?.[this.valueKey] || null;
+    }
     getDataValueAsTable(value, options) {
         let result = `
       <table border="1" style="width:100%">
@@ -210,10 +226,14 @@ export default class DataMapComponent extends DataGridComponent {
     `;
         if (this.visible && _.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>
         `;
             });
@@ -248,9 +268,21 @@ export default class DataMapComponent extends DataGridComponent {
         });
         const valueComponent = _.clone(this.component.valueComponent);
         valueComponent.key = key;
-        const componentOptions = this.options;
+        const componentOptions = _.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 = { ...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?.type === 'datetime' && this.submissionTimezone) {
+            createdComponent.component.widget = { ...createdComponent.component.widget, submissionTimezone: this.submissionTimezone };
+            createdComponent.options.submissionTimezone = this.submissionTimezone;
+        }
+        components[this.valueKey] = createdComponent;
         return components;
     }
     get canAddColumn() {

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

@@ -163,6 +163,13 @@ export default class DateTimeComponent extends Input {
     get momentFormat() {
         return FormioUtils.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;
@@ -194,7 +201,10 @@ export default class DateTimeComponent extends Input {
         let format = FormioUtils.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?.email);
+        if (useTimezoneAwareFormat) {
             if (Array.isArray(value) && this.component.multiple) {
                 return value
                     .map((item) => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format)))

package/lib/mjs/components/day/Day.d.ts

@@ -57,10 +57,6 @@ export default class DayComponent extends Field {
         value: string;
         label: any;
     }[];
-    _days: {
-        value: string;
-        label: any;
-    }[] | undefined;
     get months(): ({
         value: string;
         label: any;
@@ -68,21 +64,10 @@ export default class DayComponent extends Field {
         value: number;
         label: string;
     })[];
-    _months: ({
-        value: string;
-        label: any;
-    } | {
-        value: number;
-        label: string;
-    })[] | undefined;
     get years(): {
         value: string;
         label: any;
     }[];
-    _years: {
-        value: string;
-        label: any;
-    }[] | undefined;
     setErrorClasses(elements: any, dirty: any, hasError: any): void;
     dayFirst: any;
     render(): string;