@formio/js 5.6.0 → 5.7.0-api912.2

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

@@ -437,6 +437,39 @@ export default class Component extends Element {
             currentRoot = currentRoot.root;
         }
     }
+    /**
+     * Registers this instance in every root's `childComponentsMap`. Several components can resolve
+     * to one data path — see `getSharedPathKey` in `@formio/core` for the rule this follows.
+     * @returns {void}
+     */
+    registerComponentInstance() {
+        const path = this.path;
+        if (!path) {
+            return;
+        }
+        // Recorded on every instance, not just the ones that lose the race for the path: it names
+        // this registration for `unregisterComponentInstance()`, which can run after `path` changed.
+        this.sharedPathKey = FormioUtils.getSharedPathKey(path, this.component.key);
+        this.eachRootChildComponentsMap((map) => {
+            FormioUtils.registerInstanceAtPath(map, path, this.component.key, this);
+        });
+    }
+    /**
+     * Removes this instance from every root's `childComponentsMap`.
+     * @param {string} [path] - The path this instance was registered under, when it has since
+     * been re-keyed (a DataGrid row index change regenerates paths before unregistering).
+     * @returns {void}
+     */
+    unregisterComponentInstance(path = this.path) {
+        this.eachRootChildComponentsMap((map) => {
+            if (map[path] === this) {
+                delete map[path];
+            }
+            if (this.sharedPathKey && map[this.sharedPathKey] === this) {
+                delete map[this.sharedPathKey];
+            }
+        });
+    }
     /**
      * Returns if the parent should conditionally clear.
      *
@@ -2562,19 +2595,6 @@ 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;
@@ -2601,58 +2621,6 @@ export default class Component extends Element {
                     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');

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

@@ -6,6 +6,19 @@ import Components from '../../Components';
  */
 export default function (...extend) {
     return Components.baseEditForm([
+        {
+            key: 'display',
+            components: [
+                {
+                    key: 'labelWidth',
+                    ignore: true,
+                },
+                {
+                    key: 'labelMargin',
+                    ignore: true,
+                },
+            ],
+        },
         {
             key: 'data',
             ignore: true,

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

@@ -553,11 +553,7 @@ export default class NestedComponent extends Field {
         components = components || this.components;
         component.destroy(all);
         _.remove(components, { id: component.id });
-        component.eachRootChildComponentsMap((map) => {
-            if (map[component.path]) {
-                delete map[component.path];
-            }
-        });
+        component.unregisterComponentInstance();
     }
     /**
      * Removes a component provided the API key of that component.
@@ -666,9 +662,11 @@ export default class NestedComponent extends Field {
     validationProcessor({ scope, data, row, instance, paths }, flags) {
         const { dirty } = flags;
         if (this.root && this.root.hasSubWizards && this.page !== this.root.page) {
-            instance = this.componentsMap?.hasOwnProperty(paths.dataPath)
-                ? this.componentsMap[paths.dataPath]
-                : this.getComponent(paths.dataPath);
+            // `instance` was resolved by @formio/core against this very map, shared-path rule and
+            // all, so only fill in what that lookup cannot reach: components keyed by their data
+            // path where core looked under a full path, and components absent from the map.
+            instance =
+                instance || this.componentsMap?.[paths.dataPath] || this.getComponent(paths.dataPath);
         }
         if (!instance) {
             return;
@@ -828,6 +826,10 @@ export default class NestedComponent extends Field {
         // if no value is provided and noDefault flag, set empty value
         else if (flags.noDefault && component.allowData) {
             flags.resetValue = true;
+            //  Preserve the live value instead of wiping it, so client-side calculations that read it don't blank out.
+            if (component.component.persistent === 'client-only') {
+                return false;
+            }
             return component.setValue(component.emptyValue, flags);
         }
         else if ((!this.rootPristine || component.visible) &&

package/lib/mjs/components/content/editForm/Content.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/components/currency/editForm/Currency.edit.display.js

@@ -3,10 +3,30 @@ export default [
         key: 'inputMask',
         ignore: true,
     },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
     {
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'showWordCount',
         ignore: true,

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

@@ -430,12 +430,8 @@ export default class DataGridComponent extends NestedArrayComponent {
             component.rowIndex = rowIndex;
             component.row = `${rowIndex}-${colIndex}`;
             entries.forEach(({ instance, oldPath }) => {
-                instance.eachRootChildComponentsMap((map) => {
-                    if (map[oldPath] === instance) {
-                        delete map[oldPath];
-                    }
-                    map[instance.paths.dataPath] = instance;
-                });
+                instance.unregisterComponentInstance(oldPath);
+                instance.registerComponentInstance();
             });
         });
     }

package/lib/mjs/components/day/editForm/Day.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         weight: 15,
         type: 'checkbox',

package/lib/mjs/components/editgrid/EditGrid.d.ts

@@ -48,6 +48,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     setVariableTypeComponents(): void;
     variableTypeComponentsIndexes: any[] | undefined;
     isOpen(editRow: any): boolean;
+    shouldBlockUnsavedOpenRows(): boolean;
     isComponentVisibleInSomeRow(component: any): any;
     visibleInHeader: any;
     flattenRowDataValue(dataValue: any): {};

package/lib/mjs/components/editgrid/EditGrid.js

@@ -310,6 +310,24 @@ export default class EditGridComponent extends NestedArrayComponent {
     isOpen(editRow) {
         return [EditRowState.New, EditRowState.Editing, EditRowState.Viewing].includes(editRow.state);
     }
+    shouldBlockUnsavedOpenRows() {
+        const openRows = this.editRows.filter((editRow) => this.isOpen(editRow));
+        if (!openRows.length) {
+            return false;
+        }
+        const isOnlyPristineOpenWhenEmptyRow = this.component.openWhenEmpty &&
+            openRows.length === 1 &&
+            openRows.every((row) => row.state === EditRowState.New) &&
+            openRows.every((row) => {
+                let isPristine = true;
+                eachComponent(row.components, (comp) => {
+                    isPristine =
+                        comp.type === 'form' ? _.isEqual(comp.emptyValue, comp.dataValue) : comp.pristine;
+                });
+                return isPristine;
+            });
+        return !isOnlyPristineOpenWhenEmptyRow;
+    }
     isComponentVisibleInSomeRow(component) {
         const rows = this.editRows;
         const savedStates = [EditRowState.Saved, EditRowState.Editing, EditRowState.Draft];
@@ -1070,7 +1088,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             if (valid === null) {
                 editRow.errors.push({
                     type: 'error',
-                    message: this.t('componentInvalidRowValidation', { componentKey: this.key })
+                    message: this.t('componentInvalidRowValidation', { componentKey: this.key }),
                 });
             }
         }
@@ -1142,7 +1160,9 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
             return false;
         }
-        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
+        else if (rowsEditing &&
+            this.saveEditMode &&
+            (this.shouldBlockUnsavedOpenRows() || this.errors.length)) {
             this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
             errors.push(...this._errors);
             return false;

package/lib/mjs/components/email/editForm/Email.edit.display.js

@@ -7,6 +7,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/mjs/components/fieldset/editForm/Fieldset.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/components/file/editForm/File.edit.file.js

@@ -290,7 +290,7 @@ export default [
         key: 'imageSize',
         label: 'Image Size',
         placeholder: '100',
-        tooltip: 'The image size, in square pixels, for previewing images.',
+        tooltip: 'The image size, in square pixels, for previewing images. If explicitly set, the frame of the component must be large enough to allow for the specified size.',
         weight: 40,
         clearOnHide: false,
         conditional: {

package/lib/mjs/components/form/Form.js

@@ -269,7 +269,7 @@ export default class FormComponent extends Component {
             return super.attach(element);
         }
         return super.attach(element).then(() => {
-            if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {
+            if (this.isSubFormLazyLoad() && !this.subForm && !this.subFormLoading) {
                 this.createSubForm(true);
             }
             if (!this.subFormReady) {
@@ -366,6 +366,26 @@ export default class FormComponent extends Component {
         }
         return super.redraw();
     }
+    /**
+     * Get Row Index. Declared so the setter below does not shadow the inherited getter.
+     * @returns {number} - The row index.
+     */
+    get rowIndex() {
+        return super.rowIndex;
+    }
+    /**
+     * Set Row Index to row and pass it down to the subform so that its components
+     * regenerate their paths. Unlike NestedComponent, the subform is not part of
+     * this.components, so the row index has to be forwarded explicitly.
+     * @param {number} value - The row index.
+     * @returns {void}
+     */
+    set rowIndex(value) {
+        super.rowIndex = value;
+        if (this.subForm) {
+            this.subForm.rowIndex = value;
+        }
+    }
     /**
      * Pass everyComponent to subform.
      * @param {any[]} args - Arguments to pass through to the subform's everyComponent method.

package/lib/mjs/components/hidden/Hidden.d.ts

@@ -10,7 +10,6 @@ export default class HiddenComponent extends Input {
     };
     get inputInfo(): any;
     labelIsHidden(): boolean;
-    get emptyValue(): string;
     setValue(value: any, flags?: {}): boolean;
 }
 import Input from '../_classes/input/Input';

package/lib/mjs/components/hidden/Hidden.js

@@ -43,7 +43,7 @@ export default class HiddenComponent extends Input {
         return true;
     }
     get emptyValue() {
-        return '';
+        return null;
     }
     setValue(value, flags = {}) {
         return this.updateValue(value, flags);

package/lib/mjs/components/hidden/editForm/Hidden.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/components/html/editForm/HTML.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/components/number/Number.d.ts

@@ -51,5 +51,16 @@ export default class NumberComponent extends Input {
     focus(): void;
     getMaskedValue(value: any): any;
     getValueAsString(value: any, options: any): any;
+    setErrorClasses(elements: any, dirty: any, hasErrors: any, hasMessages: any, element?: any): void;
+    /**
+     * Points the invalid inputs at the rendered error messages through `aria-describedby`, so a
+     * screen reader announces what is wrong with the value. The base class only marks the input
+     * `aria-invalid`, which says the value was rejected but not why.
+     * @param {Array<HTMLElement>} elements - The input elements the errors apply to.
+     * @param {boolean} hasErrors - TRUE if the component currently has errors.
+     * @returns {void}
+     */
+    linkErrorMessages(elements: Array<HTMLElement>, hasErrors: boolean): void;
+    errorMessageIds: any[] | undefined;
 }
 import Input from '../_classes/input/Input';

package/lib/mjs/components/number/Number.js

@@ -268,4 +268,38 @@ export default class NumberComponent extends Input {
             element.value = this.getValueAsString(this.formatValue(this.parseValue(element.value)));
         });
     }
+    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
+        super.setErrorClasses(elements, dirty, hasErrors, hasMessages, element);
+        this.linkErrorMessages(elements, hasErrors);
+    }
+    /**
+     * Points the invalid inputs at the rendered error messages through `aria-describedby`, so a
+     * screen reader announces what is wrong with the value. The base class only marks the input
+     * `aria-invalid`, which says the value was rejected but not why.
+     * @param {Array<HTMLElement>} elements - The input elements the errors apply to.
+     * @param {boolean} hasErrors - TRUE if the component currently has errors.
+     * @returns {void}
+     */
+    linkErrorMessages(elements, hasErrors) {
+        const previousIds = this.errorMessageIds || [];
+        const renderedMessages = Array.from(this.refs.messageContainer?.children || []);
+        const errorIds = hasErrors ? renderedMessages.map((message) => message.id).filter(Boolean) : [];
+        const invalidInputs = hasErrors ? Array.from(elements || []) : [];
+        const isOwnErrorId = (id) => previousIds.includes(id) || errorIds.includes(id);
+        Array.from(this.refs.input || []).forEach((input) => {
+            const describedBy = (input.getAttribute('aria-describedby') || '')
+                .split(' ')
+                .filter((id) => id && !isOwnErrorId(id));
+            if (invalidInputs.includes(input)) {
+                describedBy.push(...errorIds);
+            }
+            if (describedBy.length) {
+                input.setAttribute('aria-describedby', describedBy.join(' '));
+            }
+            else {
+                input.removeAttribute('aria-describedby');
+            }
+        });
+        this.errorMessageIds = errorIds;
+    }
 }

package/lib/mjs/components/number/editForm/Number.edit.display.js

@@ -11,6 +11,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/mjs/components/password/editForm/Password.edit.display.js

@@ -11,4 +11,16 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
 ];

package/lib/mjs/components/phonenumber/PhoneNumber.form.js

@@ -18,6 +18,14 @@ export default function (...extend) {
                     key: 'showCharCount',
                     ignore: true,
                 },
+                {
+                    key: 'widget.type',
+                    ignore: true,
+                },
+                {
+                    key: 'widget',
+                    ignore: true,
+                },
             ],
         },
         {

package/lib/mjs/components/select/editForm/Select.edit.data.d.ts

@@ -1057,6 +1057,7 @@ declare const _default: ({
     alwaysEnabled?: undefined;
 } | {
     key: string;
+    type: string;
     conditional: {
         json: {
             and: ({
@@ -1107,7 +1108,6 @@ declare const _default: ({
         };
     };
     data?: undefined;
-    type?: undefined;
     as?: undefined;
     editor?: undefined;
     weight?: undefined;

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -619,6 +619,7 @@ export default [
     },
     {
         key: 'selectData',
+        type: 'hidden',
         conditional: {
             json: {
                 and: [

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/components/textarea/editForm/TextArea.edit.display.js

@@ -9,10 +9,22 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
     {
         key: 'mask',
         ignore: true,
     },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
     {
         type: 'number',
         input: true,

package/lib/mjs/components/url/editForm/Url.edit.display.js

@@ -7,6 +7,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/mjs/components/well/editForm/Well.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/package.json

@@ -1,5 +1,5 @@
 {
     "type": "module",
-    "version": "5.6.0"
+    "version": "5.7.0-api912.2"
     
 }