@formio/js 5.3.0 → 5.4.0-api98.1

package/lib/mjs/Wizard.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
-import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent } from './utils';
+import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, screenReaderSpeech } from './utils';
 export default class Wizard extends Webform {
     /**
      * Constructor for wizard-based forms.
@@ -701,6 +701,7 @@ export default class Wizard extends Webform {
     }
     emitNextPage() {
         this.emit('nextPage', { page: this.page, submission: this.submission });
+        this.announceCurrentPage();
     }
     nextPage() {
         // Read-only forms should not worry about validation before going to next page, nor should they submit.
@@ -745,6 +746,16 @@ export default class Wizard extends Webform {
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
+        this.announceCurrentPage();
+    }
+    announceCurrentPage() {
+        if (_.get(this.form, 'settings.wizardHeaderType', '') === 'StepIndicator') {
+            screenReaderSpeech(`Now on step ${this.page + 1} of ${this.pages.length}: ${_.get(this.currentPage, 'component.title')}`);
+            const currentLink = _.get(this.refs, `${this.wizardKey}-link.[${this.page}]`);
+            if (currentLink) {
+                currentLink.focus();
+            }
+        }
     }
     prevPage() {
         return this.beforePage().then(() => {

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -169,6 +169,7 @@ declare class Component extends Element {
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear(): boolean;
+    hasCondionallyHiddenLayoutParent(): boolean;
     parentConditionallyHidden(): boolean;
     /**
      * Returns true if any of the parents default their component "hidden" property to true.
@@ -187,6 +188,7 @@ declare class Component extends Element {
         tooltipClass: string;
         for: any;
     };
+    getFieldsetLegendIds(): string;
     init(): void;
     /**
      * Disable this component.
@@ -584,6 +586,15 @@ declare class Component extends Element {
      * @returns {string} - The custom style
      */
     get customStyle(): string;
+    /**
+     * 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: string[]): {
+        [refName: string]: string[];
+    };
     /**
      * Returns if the application is on a mobile device.
      * @returns {boolean} - TRUE if the application is on a mobile device.
@@ -918,9 +929,9 @@ declare class Component extends Element {
      */
     get hasDefaultValue(): boolean;
     /**
-     * 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(): boolean;
     /**
      * Get the default value of this component.

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

@@ -442,6 +442,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) {
@@ -503,6 +513,17 @@ export default class Component extends Element {
         }
         return label;
     }
+    getFieldsetLegendIds() {
+        const legendIds = [];
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent.component?.type === 'fieldset' && currentParent.component?.legend) {
+                legendIds.push(`l-${currentParent.id}-legend`);
+            }
+            currentParent = currentParent.parent;
+        }
+        return legendIds.reverse().join(' ');
+    }
     init() {
         this.disabled = this.shouldDisabled;
         this._visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;
@@ -706,7 +727,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;
     }
     /**
@@ -961,8 +982,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;
@@ -984,18 +1017,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);
     }
     /**
@@ -1638,14 +1660,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();
@@ -1716,6 +1751,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.
@@ -2497,6 +2546,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;
@@ -2556,7 +2619,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) {
@@ -2574,6 +2637,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);
             }
@@ -2634,7 +2698,6 @@ export default class Component extends Element {
             return;
         }
         _.set(this._data, this.key, value);
-        return;
     }
     /**
      * Splice a value from the dataValue.
@@ -2681,9 +2744,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);
     }
@@ -3672,7 +3735,7 @@ export default class Component extends Element {
             class: 'form-control',
             lang: this.options.language,
         };
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !this.options?.readOnly) {
             attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });
         }
         if (this.component.tabindex) {

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',

package/lib/mjs/components/_classes/input/Input.js

@@ -1,5 +1,5 @@
 import Multivalue from '../multivalue/Multivalue';
-import { convertStringToHTMLElement } from '../../../utils/index';
+import { announceScreenReaderMessage, convertStringToHTMLElement } from '../../../utils/index';
 import Widgets from '../../../widgets/index';
 import _ from 'lodash';
 export default class Input extends Multivalue {
@@ -29,7 +29,7 @@ export default class Input extends Multivalue {
         if (this.component.inputMode) {
             attr.inputmode = this.component.inputMode;
         }
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !this.options?.readOnly) {
             attr.placeholder = this.getFormattedAttribute(this.component.placeholder);
         }
         if (this.component.tabindex) {
@@ -161,6 +161,9 @@ export default class Input extends Multivalue {
         }
     }
     updateValueAt(value, flags, index) {
+        if (flags.modified) {
+            announceScreenReaderMessage(this, value, index);
+        }
         flags = flags || {};
         if (_.get(this.component, 'showWordCount', false)) {
             if (this.refs.wordcount && this.refs.wordcount[index]) {
@@ -185,7 +188,7 @@ export default class Input extends Multivalue {
     updateValue(value, flags, index) {
         flags = flags || {};
         const changed = super.updateValue(value, flags);
-        this.triggerUpdateValueAt(this.dataValue, flags, index);
+        this.triggerUpdateValueAt(this.dataValue, { ...flags }, index);
         return changed;
     }
     parseValue(value) {
@@ -196,6 +199,7 @@ export default class Input extends Multivalue {
     }
     attach(element) {
         this.loadRefs(element, {
+            announceMessage: 'multiple',
             charcount: 'multiple',
             wordcount: 'multiple',
             prefix: 'multiple',
@@ -239,6 +243,15 @@ export default class Input extends Multivalue {
                 }
             });
         }
+        this.on('focus', (comp) => {
+            announceScreenReaderMessage(comp, comp.dataValue, 0, true);
+        });
+        this.on('blur', (comp) => {
+            const el = comp.refs?.["announceMessage"]?.[0];
+            if (el) {
+                el.textContent = "";
+            }
+        });
         return promise;
     }
     /**

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

@@ -829,6 +829,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

@@ -317,7 +317,7 @@ export default class AddressComponent extends ContainerComponent {
             lang: this.options.language,
             tabindex: this.component.tabindex || 0,
         };
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !this.options?.readOnly) {
             ((attr.placeholder = this.t(this.component.placeholder)), { _userInput: true });
         }
         if (this.disabled) {
@@ -416,6 +416,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 +438,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

@@ -108,6 +108,16 @@ export default class DataGridComponent extends NestedArrayComponent {
         for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {
             defaultValue.push({});
         }
+        if (this.component.customDefaultValue) {
+            return defaultValue;
+        }
+        if (defaultValue.length === 1 && this.columns) {
+            eachComponent(this.components, (comp, path) => {
+                if (comp.component?.input && comp.defaultValue) {
+                    _.set(defaultValue[0], path, comp.defaultValue);
+                }
+            });
+        }
         return defaultValue;
     }
     set disabled(disabled) {
@@ -433,7 +443,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         });
         screenReaderSpeech('Row has been added');
         this.checkConditions();
-        this.triggerChange?.({ modified: true });
+        this.triggerChange?.({ modified: true, noPristineChangeOnModified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });
@@ -529,7 +539,7 @@ export default class DataGridComponent extends NestedArrayComponent {
                     changed.instance.root.triggerChange?.(flags, changed, modified);
                 }
                 else {
-                    this.triggerChange?.({ modified });
+                    this.triggerRootChange(flags, changed, modified);
                 }
             };
             let columnComponent;

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

@@ -15,6 +15,10 @@ 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;

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

@@ -118,14 +118,15 @@ export default class DataMapComponent extends DataGridComponent {
     }
     get iteratableRows() {
         return this.rows.map((row) => {
-            return {
-                components: row,
-                data: _.mapValues(row, (comp) => comp.dataValue)
-            };
+            return Object.keys(row).map((key) => ({
+                components: row[key],
+                data: row[key].dataValue,
+            }));
         });
     }
     componentContext(component) {
-        return this.iteratableRows[component.row].data[component.key];
+        return this.iteratableRows[component.row].find((comp) => comp.components.key === component.key)
+            .data;
     }
     hasHeader() {
         return true;

package/lib/mjs/components/fieldset/Fieldset.d.ts

@@ -10,6 +10,7 @@ export default class FieldsetComponent extends NestedComponent {
     };
     static savedValueTypes(): never[];
     constructor(...args: any[]);
+    attach(element: any): Promise<void>;
     noField: boolean;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/mjs/components/fieldset/Fieldset.js

@@ -7,6 +7,7 @@ export default class FieldsetComponent extends NestedComponent {
             type: 'fieldset',
             legend: '',
             components: [],
+            clearOnHide: false,
             input: false,
             persistent: false,
         }, ...extend);
@@ -34,6 +35,13 @@ export default class FieldsetComponent extends NestedComponent {
     get templateName() {
         return 'fieldset';
     }
+    attach(element) {
+        return super.attach(element).then(() => {
+            if (this.component.legend && this.refs.header) {
+                this.refs.header.setAttribute('id', `l-${this.id}-legend`);
+            }
+        });
+    }
     constructor(...args) {
         super(...args);
         this.noField = true;

package/lib/mjs/components/file/File.d.ts

@@ -30,6 +30,8 @@ export default class FileComponent extends Field {
     } | undefined;
     isSyncing: boolean | undefined;
     abortUploads: any[] | undefined;
+    pendingfiles: any;
+    resolvedFiles: any[] | undefined;
     get dataReady(): Promise<any>;
     loadImage(fileInfo: any): any;
     get emptyValue(): never[];
@@ -147,7 +149,7 @@ export default class FileComponent extends Field {
     getMultipartOptions(fileToSync: any): any;
     uploadFile(fileToSync: any): Promise<any>;
     upload(): Promise<void | {
-        fileToSync: never;
+        fileToSync: any;
         fileInfo: any;
     }[]>;
     syncFiles(): Promise<void>;