@formio/js 5.4.0-api98.1 → 5.4.1

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,
@@ -426,6 +426,24 @@ export default class Component extends Element {
     get componentsMap() {
         return this.root?.childComponentsMap || {};
     }
+    /**
+     * Walks this component's root chain, invoking `fn` with each ancestor root's
+     * `childComponentsMap`. Component registration is propagated up the wizard /
+     * nested-form chain at create time, so any code that mutates a registration
+     * (creation, removal, path-driven re-key) must update every map in the chain.
+     * @param {(map: object) => void} fn - Called once per root that exposes a `childComponentsMap`.
+     */
+    eachRootChildComponentsMap(fn) {
+        let currentRoot = this.root;
+        let prevRootId = null;
+        while (currentRoot && currentRoot.id !== prevRootId) {
+            if (currentRoot.childComponentsMap) {
+                fn(currentRoot.childComponentsMap);
+            }
+            prevRootId = currentRoot.id;
+            currentRoot = currentRoot.root;
+        }
+    }
     /**
      * Returns if the parent should conditionally clear.
      *
@@ -1127,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.
@@ -1144,6 +1165,7 @@ export default class Component extends Element {
      * @returns {string} - The current timezone.
      */
     getTimezone(settings) {
+        settings = settings || {};
         if (settings.timezone) {
             return settings.timezone;
         }
@@ -1151,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();
     }
     /**
@@ -1183,6 +1212,19 @@ export default class Component extends Element {
             }
         }
     }
+    /**
+     * Announces a message to screen readers via the component's live region.
+     * @param {string} message - The message to announce.
+     */
+    announce(message) {
+        const liveRegion = this.refs.liveRegion;
+        if (liveRegion) {
+            liveRegion.textContent = '';
+            setTimeout(() => {
+                liveRegion.textContent = message;
+            }, 50);
+        }
+    }
     /**
      * Opens the modal element.
      * @param {string} template - The template to use for the modal dialog.
@@ -1323,6 +1365,7 @@ export default class Component extends Element {
         this.loadRefs(element, {
             messageContainer: 'single',
             tooltip: 'multiple',
+            liveRegion: 'single',
         });
         this.attachTooltips(this.refs.tooltip);
         // Attach logic.
@@ -1562,13 +1605,13 @@ export default class Component extends Element {
             value.forEach((val, index) => {
                 const widget = this.refs.input[index] && this.refs.input[index].widget;
                 if (widget) {
-                    values.push(widget.getValueAsString(val, options));
+                    values.push(widget.getValueAsString(val));
                 }
             });
             return values;
         }
         const widget = this.refs.input[0].widget;
-        return widget.getValueAsString(value, options);
+        return widget.getValueAsString(value);
     }
     /**
      * Returns the value of the component as a string.
@@ -2304,29 +2347,23 @@ export default class Component extends Element {
      * @returns {void}
      */
     setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
-        this.clearErrorClasses();
-        elements.forEach((element) => {
-            this.setElementInvalid(this.performInputMapping(element), hasErrors);
+        elements.forEach((el) => {
+            this.setElementInvalid(this.performInputMapping(el), hasErrors);
         });
         this.setInputWidgetErrorClasses(elements, hasErrors);
         // do not set error classes for hidden components
         if (!this.visible) {
+            this.clearErrorClasses(element);
             return;
         }
-        if (hasErrors) {
-            // Add error classes
-            elements.forEach((input) => {
-                this.setElementInvalid(this.performInputMapping(input), true);
-            });
-            if (dirty && this.options.highlightErrors) {
-                this.addClass(element, this.options.componentErrorClass);
-            }
-            else {
-                this.addClass(element, 'has-error');
-            }
-        }
-        if (hasMessages) {
-            this.addClass(element, 'has-message');
+        const wantHighlight = hasErrors && !!dirty && !!this.options.highlightErrors;
+        const wantHasError = hasErrors && !wantHighlight;
+        this.toggleClass(element, this.options.componentErrorClass, wantHighlight);
+        this.toggleClass(element, 'has-error', wantHasError);
+        this.toggleClass(element, 'has-message', hasMessages);
+        // Preserve previous clearErrorClasses() behavior: drop the 'alert alert-danger' pair if left over.
+        if (element?.classList?.contains('alert-danger')) {
+            this.removeClass(element, 'alert alert-danger');
         }
     }
     /**
@@ -2582,12 +2619,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');
@@ -2606,7 +2692,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');
                 }
@@ -3234,7 +3321,7 @@ export default class Component extends Element {
         if (flags.silentCheck) {
             return [];
         }
-        let isDirty = flags.dirty === false ? false : this.dirty || flags.dirty;
+        let isDirty = flags.dirty || this.dirty;
         if (this.options.alwaysDirty) {
             isDirty = true;
         }
@@ -3440,21 +3527,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.js

@@ -139,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

@@ -556,12 +556,11 @@ export default class NestedComponent extends Field {
         components = components || this.components;
         component.destroy(all);
         _.remove(components, { id: component.id });
-        if (this.componentsMap[component.path]) {
-            delete this.componentsMap[component.path];
-        }
-        if (this.root?.componentsMap[component.path]) {
-            delete this.root?.componentsMap[component.path];
-        }
+        component.eachRootChildComponentsMap((map) => {
+            if (map[component.path]) {
+                delete map[component.path];
+            }
+        });
     }
     /**
      * Removes a component provided the API key of that component.

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;

package/lib/mjs/components/button/Button.d.ts

@@ -29,6 +29,7 @@ export default class ButtonComponent extends Field {
     detach(element: any): void;
     onClick(event: any): void;
     openOauth(settings: any): void;
+    _handleOauthSessionExpired(): void;
     get oauthComponentPath(): any;
     focus(): void;
     triggerCaptcha(): void;

package/lib/mjs/components/button/Button.js

@@ -363,6 +363,12 @@ export default class ButtonComponent extends Field {
         }
     }
     openOauth(settings) {
+        // this is if the temp session (storing the state and code verifiers) expires in the db 
+        // and we need to fetch new oauth state
+        if (settings.sessionExpireAt && Date.now() >= settings.sessionExpireAt) {
+            this._handleOauthSessionExpired();
+            return;
+        }
         if (!this.root?.formio) {
             console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
             return;
@@ -378,7 +384,8 @@ export default class ButtonComponent extends Field {
         if (settings.state) {
             params.state = settings.state;
         }
-        else if (settings.code_challenge) {
+        // okta requires both a state and a code challenge for PKCE
+        if (settings.code_challenge) {
             params.code_challenge = settings.code_challenge;
             params.code_challenge_method = 'S256';
         }
@@ -420,6 +427,9 @@ export default class ButtonComponent extends Field {
                         this.root?.setAlert('danger', 'OAuth state does not match. Please try logging in again.');
                         return;
                     }
+                    if (settings.sessionId) {
+                        params.sessionId = settings.sessionId;
+                    }
                     // Depending on where the settings came from, submit to either the submission endpoint (old) or oauth endpoint (new).
                     let requestPromise = Promise.resolve();
                     if (_.has(this, 'root.form.config.oauth') &&
@@ -446,6 +456,11 @@ export default class ButtonComponent extends Field {
                         this.root?.onSubmit(result, true);
                     })
                         .catch((err) => {
+                        console.log(err);
+                        if (settings.sessionExpireAt && Date.now() >= settings.sessionExpireAt) {
+                            this._handleOauthSessionExpired();
+                            return;
+                        }
                         this.root?.onSubmissionError(err);
                     });
                 }
@@ -461,6 +476,11 @@ export default class ButtonComponent extends Field {
             }
         }, 100);
     }
+    _handleOauthSessionExpired() {
+        this.root?.setAlert('warning', this.t('oauthSessionExpired'));
+        this.loading = true;
+        setTimeout(() => window.location.reload(), 2000);
+    }
     get oauthComponentPath() {
         const pathArray = getArrayFromComponentPath(this.path);
         return _.chain(pathArray)

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

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
-import { fastCloneDeep, getFocusableElements, getComponent, eachComponent, screenReaderSpeech } from '../../utils';
+import { fastCloneDeep, getFocusableElements, getComponent, eachComponent } from '../../utils';
 import dragula from 'dragula';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
@@ -441,17 +441,25 @@ export default class DataGridComponent extends NestedArrayComponent {
             component: this.component,
             row,
         });
-        screenReaderSpeech('Row has been added');
         this.checkConditions();
         this.triggerChange?.({ modified: true, noPristineChangeOnModified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
+            this.announce(this.t('Row has been added'));
         });
     }
     updateComponentsRowIndex(components, rowIndex) {
         components.forEach((component, colIndex) => {
-            if (this.componentsMap[component.paths.dataPath]) {
-                delete this.componentsMap[component.paths.dataPath];
+            // The rowIndex setter cascades into descendants and regenerates their
+            // paths, but does not re-key them in componentsMap. Collect the slot
+            // and every descendant up front so we can re-key them after paths
+            // regenerate. Required for nested-form / sub-wizard scenarios where
+            // the outer wizard validates against its own componentsMap copy.
+            const entries = [{ instance: component, oldPath: component.paths.dataPath }];
+            if (typeof component.everyComponent === 'function') {
+                component.everyComponent((descendant) => {
+                    entries.push({ instance: descendant, oldPath: descendant.paths.dataPath });
+                });
             }
             if (component.options?.name) {
                 const newName = `[${this.key}][${rowIndex}]`;
@@ -459,7 +467,14 @@ export default class DataGridComponent extends NestedArrayComponent {
             }
             component.rowIndex = rowIndex;
             component.row = `${rowIndex}-${colIndex}`;
-            this.componentsMap[component.paths.dataPath] = component;
+            entries.forEach(({ instance, oldPath }) => {
+                instance.eachRootChildComponentsMap((map) => {
+                    if (map[oldPath] === instance) {
+                        delete map[oldPath];
+                    }
+                    map[instance.paths.dataPath] = instance;
+                });
+            });
         });
     }
     updateRowsComponents(rowIndex) {
@@ -472,15 +487,14 @@ export default class DataGridComponent extends NestedArrayComponent {
         const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
-        if (this.rows.length > 1) {
-            screenReaderSpeech('Row has been deleted');
-        }
         const [row,] = this.rows.splice(index, 1);
         this.removeSubmissionMetadataRow(index);
         this.removeRowComponents(row);
         this.updateRowsComponents(index);
         this.setValue(this.dataValue, flags);
-        this.redraw();
+        this.redraw().then(() => {
+            this.announce(this.t('Row has been deleted'));
+        });
     }
     removeRowComponents(row) {
         _.each(row, (component) => this.removeComponent(component));
@@ -530,8 +544,9 @@ export default class DataGridComponent extends NestedArrayComponent {
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
             options.onChange = (flags, changed, modified) => {
-                if (changed.component.type === 'form') {
-                    const formComp = getComponent(this.component.components, changed.component.key);
+                const changedComponent = changed.component;
+                if (changedComponent?.type === 'form' && changedComponent?.key) {
+                    const formComp = getComponent(this.component.components, changedComponent.key);
                     _.set(formComp, 'components', changed.component.components);
                 }
                 // If we're in a nested form we need to ensure our changes are triggered upstream
@@ -539,8 +554,21 @@ export default class DataGridComponent extends NestedArrayComponent {
                     changed.instance.root.triggerChange?.(flags, changed, modified);
                 }
                 else {
+                    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

@@ -15,14 +15,11 @@ export default class DataMapComponent extends DataGridComponent {
         disableBuilderActions: boolean;
     };
     get valueKey(): any;
-    get iteratableRows(): {
-        components: any;
-        data: any;
-    }[][];
     hasHeader(): boolean;
     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

@@ -118,15 +118,14 @@ export default class DataMapComponent extends DataGridComponent {
     }
     get iteratableRows() {
         return this.rows.map((row) => {
-            return Object.keys(row).map((key) => ({
-                components: row[key],
-                data: row[key].dataValue,
-            }));
+            return {
+                components: row,
+                data: _.mapValues(row, (comp) => comp.dataValue)
+            };
         });
     }
     componentContext(component) {
-        return this.iteratableRows[component.row].find((comp) => comp.components.key === component.key)
-            .data;
+        return this.iteratableRows[component.row].data[component.key];
     }
     hasHeader() {
         return true;
@@ -181,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;
@@ -204,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%">
@@ -211,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>
         `;
             });
@@ -249,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() {