@formio/js 5.4.0-api98.1 → 5.4.1

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,
@@ -430,6 +430,24 @@ class Component extends Element_1.default {
         var _a;
         return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.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.
      *
@@ -1134,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.
@@ -1151,6 +1172,7 @@ class Component extends Element_1.default {
      * @returns {string} - The current timezone.
      */
     getTimezone(settings) {
+        settings = settings || {};
         if (settings.timezone) {
             return settings.timezone;
         }
@@ -1158,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)();
     }
     /**
@@ -1190,6 +1219,19 @@ class Component extends Element_1.default {
             }
         }
     }
+    /**
+     * 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 @@ class Component extends Element_1.default {
         this.loadRefs(element, {
             messageContainer: 'single',
             tooltip: 'multiple',
+            liveRegion: 'single',
         });
         this.attachTooltips(this.refs.tooltip);
         // Attach logic.
@@ -1567,13 +1610,13 @@ class Component extends Element_1.default {
             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.
@@ -2312,29 +2355,24 @@ class Component extends Element_1.default {
      * @returns {void}
      */
     setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
-        this.clearErrorClasses();
-        elements.forEach((element) => {
-            this.setElementInvalid(this.performInputMapping(element), hasErrors);
+        var _a;
+        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 ((_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.contains('alert-danger')) {
+            this.removeClass(element, 'alert alert-danger');
         }
     }
     /**
@@ -2584,12 +2622,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');
@@ -2608,7 +2695,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');
                 }
@@ -3243,7 +3331,7 @@ class Component extends Element_1.default {
         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;
         }
@@ -3450,22 +3538,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.js

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

@@ -557,16 +557,14 @@ class NestedComponent extends Field_1.default {
      * @param {boolean} [all] - If set to TRUE will cascade remove all components.
      */
     removeComponent(component, components, all = false) {
-        var _a, _b;
         components = components || this.components;
         component.destroy(all);
         lodash_1.default.remove(components, { id: component.id });
-        if (this.componentsMap[component.path]) {
-            delete this.componentsMap[component.path];
-        }
-        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.componentsMap[component.path]) {
-            (_b = this.root) === null || _b === void 0 ? true : delete _b.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/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;

package/lib/cjs/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/cjs/components/button/Button.js

@@ -371,6 +371,12 @@ class ButtonComponent extends Field_1.default {
     }
     openOauth(settings) {
         var _a;
+        // 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 (!((_a = this.root) === null || _a === void 0 ? void 0 : _a.formio)) {
             console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
             return;
@@ -386,7 +392,8 @@ class ButtonComponent extends Field_1.default {
         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';
         }
@@ -429,6 +436,9 @@ class ButtonComponent extends Field_1.default {
                         (_b = this.root) === null || _b === void 0 ? void 0 : _b.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 (lodash_1.default.has(this, 'root.form.config.oauth') &&
@@ -457,6 +467,11 @@ class ButtonComponent extends Field_1.default {
                     })
                         .catch((err) => {
                         var _a;
+                        console.log(err);
+                        if (settings.sessionExpireAt && Date.now() >= settings.sessionExpireAt) {
+                            this._handleOauthSessionExpired();
+                            return;
+                        }
                         (_a = this.root) === null || _a === void 0 ? void 0 : _a.onSubmissionError(err);
                     });
                 }
@@ -472,6 +487,12 @@ class ButtonComponent extends Field_1.default {
             }
         }, 100);
     }
+    _handleOauthSessionExpired() {
+        var _a;
+        (_a = this.root) === null || _a === void 0 ? void 0 : _a.setAlert('warning', this.t('oauthSessionExpired'));
+        this.loading = true;
+        setTimeout(() => window.location.reload(), 2000);
+    }
     get oauthComponentPath() {
         const pathArray = (0, utils_1.getArrayFromComponentPath)(this.path);
         return lodash_1.default.chain(pathArray)

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

@@ -446,18 +446,26 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             component: this.component,
             row,
         });
-        (0, utils_1.screenReaderSpeech)('Row has been added');
         this.checkConditions();
         (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, { 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) => {
             var _a;
-            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 ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {
                 const newName = `[${this.key}][${rowIndex}]`;
@@ -465,7 +473,14 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             }
             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) {
@@ -478,15 +493,14 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
-        if (this.rows.length > 1) {
-            (0, utils_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) {
         lodash_1.default.each(row, (component) => this.removeComponent(component));
@@ -537,8 +551,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             options.rowIndex = rowIndex;
             options.onChange = (flags, changed, modified) => {
                 var _a, _b, _c, _d;
-                if (changed.component.type === 'form') {
-                    const formComp = (0, utils_1.getComponent)(this.component.components, changed.component.key);
+                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);
                     lodash_1.default.set(formComp, 'components', changed.component.components);
                 }
                 // If we're in a nested form we need to ensure our changes are triggered upstream
@@ -546,8 +561,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 {
+                    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

@@ -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/cjs/components/datamap/DataMap.js

@@ -123,15 +123,14 @@ class DataMapComponent extends DataGrid_1.default {
     }
     get iteratableRows() {
         return this.rows.map((row) => {
-            return Object.keys(row).map((key) => ({
-                components: row[key],
-                data: row[key].dataValue,
-            }));
+            return {
+                components: row,
+                data: lodash_1.default.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;
@@ -186,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;
@@ -209,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%">
@@ -216,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>
         `;
             });
@@ -254,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() {