@formio/js 5.0.0-dev.5614.ea3660d → 5.0.0-dev.5620.dedc19b

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

@@ -6,7 +6,7 @@ import isMobile from 'ismobilejs';
 import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
 import { Formio } from '../../../Formio';
 import * as FormioUtils from '../../../utils/utils';
-import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone } from '../../../utils/utils';
+import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone, getScriptPlugin } from '../../../utils/utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
 import Widgets from '../../../widgets';
@@ -498,10 +498,30 @@ export default class Component extends Element {
         }
         return addon;
     }
-    destroy() {
-        super.destroy();
+    teardown() {
+        if (this.element) {
+            delete this.element.component;
+            delete this.element;
+        }
+        delete this._currentForm;
+        delete this.parent;
+        delete this.root;
+        delete this.triggerChange;
+        delete this.triggerRedraw;
+        if (this.options) {
+            delete this.options.root;
+            delete this.options.parent;
+            delete this.options.i18next;
+        }
+        super.teardown();
+    }
+    destroy(all = false) {
+        super.destroy(all);
         this.detach();
         this.addons.forEach((addon) => addon.destroy());
+        if (all) {
+            this.teardown();
+        }
     }
     get shouldDisabled() {
         return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);
@@ -1052,7 +1072,7 @@ export default class Component extends Element {
             this.setOpenModalElement(openModalTemplate);
         }
         this.attached = true;
-        this.element = element;
+        this.setElement(element);
         element.component = this;
         // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.
         if (this.element.id) {
@@ -1110,6 +1130,17 @@ export default class Component extends Element {
      * Remove all event handlers.
      */
     detach() {
+        // First iterate through each ref and delete the component so there are no dangling component references.
+        _.each(this.refs, (ref) => {
+            if (typeof ref === NodeList) {
+                ref.forEach((elem) => {
+                    delete elem.component;
+                });
+            }
+            else if (ref) {
+                delete ref.component;
+            }
+        });
         this.refs = {};
         this.removeEventListeners();
         this.detachLogic();
@@ -1197,10 +1228,17 @@ export default class Component extends Element {
     get viewOnly() {
         return this.options.readOnly && this.options.viewAsHtml;
     }
+    setElement(element) {
+        if (this.element) {
+            delete this.element.component;
+            delete this.element;
+        }
+        this.element = element;
+    }
     createViewOnlyElement() {
-        this.element = this.ce('dl', {
+        this.setElement(this.ce('dl', {
             id: this.id
-        });
+        }));
         if (this.element) {
             // Ensure you can get the component info from the element.
             this.element.component = this;
@@ -1518,7 +1556,7 @@ export default class Component extends Element {
         const parent = this.element.parentNode;
         const index = Array.prototype.indexOf.call(parent.children, this.element);
         this.element.outerHTML = this.sanitize(this.render());
-        this.element = parent.children[index];
+        this.setElement(parent.children[index]);
         return this.attach(this.element);
     }
     rebuild() {
@@ -3182,7 +3220,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             }.bind(Component.externalLibraries[name]);
         }
         // See if the plugin already exists.
-        const plugin = _.get(window, property);
+        const plugin = getScriptPlugin(property);
         if (plugin) {
             Component.externalLibraries[name].resolve(plugin);
         }
@@ -3225,7 +3263,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             // if no callback is provided, then check periodically for the script.
             if (polling) {
                 setTimeout(function checkLibrary() {
-                    const plugin = _.get(window, property);
+                    const plugin = getScriptPlugin(property);
                     if (plugin) {
                         Component.externalLibraries[name].resolve(plugin);
                     }

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

@@ -266,8 +266,22 @@ export default class Input extends Multivalue {
         widget.on('redraw', () => this.redraw(), true);
         return widget;
     }
+    teardown() {
+        if (this.element && this.element.widget) {
+            this.element.widget.destroy();
+            delete this.element.widget;
+        }
+        if (this.refs && this.refs.input) {
+            for (let i = 0; i <= this.refs.input.length; i++) {
+                const widget = this.getWidget(i);
+                if (widget) {
+                    widget.destroy();
+                }
+            }
+        }
+        super.teardown();
+    }
     detach() {
-        super.detach();
         if (this.refs && this.refs.input) {
             for (let i = 0; i <= this.refs.input.length; i++) {
                 const widget = this.getWidget(i);
@@ -277,5 +291,6 @@ export default class Input extends Multivalue {
             }
         }
         this.refs.input = [];
+        super.detach();
     }
 }

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -82,7 +82,7 @@ export default class NestedComponent extends Field {
      * @param {Component} component - The component to remove from the components.
      * @param {Array<Component>} components - An array of components to remove this component from.
      */
-    removeComponent(component: Component, components: Array<Component>): void;
+    removeComponent(component: Component, components: Array<Component>, all?: boolean): void;
     /**
      * Removes a component provided the API key of that component.
      *
@@ -140,7 +140,7 @@ export default class NestedComponent extends Field {
     checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): Promise<any>;
     setPristine(pristine: any): void;
     get isPristine(): any;
-    destroyComponents(): void;
+    destroyComponents(all?: boolean): void;
     get visibleErrors(): any;
     get errors(): any;
     get dataReady(): Promise<any[]>;

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

@@ -325,6 +325,7 @@ export default class NestedComponent extends Field {
      */
     addComponents(data, options) {
         data = data || this.data;
+        this.components = this.components || [];
         options = options || this.options;
         if (options.components) {
             this.components = options.components;
@@ -436,9 +437,9 @@ export default class NestedComponent extends Field {
      * @param {Component} component - The component to remove from the components.
      * @param {Array<Component>} components - An array of components to remove this component from.
      */
-    removeComponent(component, components) {
+    removeComponent(component, components, all = false) {
         components = components || this.components;
-        component.destroy();
+        component.destroy(all);
         _.remove(components, { id: component.id });
         if (this.componentsMap[component.path]) {
             delete this.componentsMap[component.path];
@@ -663,13 +664,13 @@ export default class NestedComponent extends Field {
         });
         super.clear();
     }
-    destroy() {
-        this.destroyComponents();
-        super.destroy();
+    destroy(all = false) {
+        this.destroyComponents(all);
+        super.destroy(all);
     }
-    destroyComponents() {
+    destroyComponents(all = false) {
         const components = this.getComponents().slice();
-        components.forEach((comp) => this.removeComponent(comp, this.components));
+        components.forEach((comp) => this.removeComponent(comp, this.components, all));
         this.components = [];
     }
     get visibleErrors() {

package/lib/mjs/components/columns/Columns.js

@@ -145,8 +145,8 @@ export default class ColumnsComponent extends NestedComponent {
     detach(all) {
         super.detach(all);
     }
-    destroy() {
-        super.destroy();
+    destroy(all = false) {
+        super.destroy(all);
         this.columns = [];
     }
 }

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

@@ -52,7 +52,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     renderRow(row: any, rowIndex: any): any;
     eachComponent(fn: any, rowIndex: any): void;
     flattenComponents(rowIndex: any): {};
-    destroyComponents(rowIndex: any): void;
+    destroyComponents(all?: boolean, rowIndex?: number): void;
     createRow(dataObj: any, rowIndex: any): {
         components: any;
         data: any;

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

@@ -567,15 +567,19 @@ export default class EditGridComponent extends NestedArrayComponent {
         return this.builderMode
             ? super.getComponents()
             : _.isNumber(rowIndex)
-                ? (this.editRows[rowIndex].components || [])
+                ? (this.editRows[rowIndex]?.components || [])
                 : this.editRows.reduce((result, row) => result.concat(row.components || []), []);
     }
-    destroyComponents(rowIndex) {
+    destroy(all = false) {
+        this.calculatedValue = undefined;
+        super.destroy(all);
+    }
+    destroyComponents(all = false, rowIndex = 0) {
         if (this.builderMode) {
-            return super.destroyComponents();
+            return super.destroyComponents(all);
         }
         const components = this.getComponents(rowIndex).slice();
-        components.forEach((comp) => this.removeComponent(comp, this.components));
+        components.forEach((comp) => this.removeComponent(comp, this.components, all));
     }
     createRow(dataObj, rowIndex) {
         const editRow = {
@@ -748,7 +752,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             case EditRowState.New: {
                 editRow.state = EditRowState.Removed;
                 this.clearErrors(rowIndex);
-                this.destroyComponents(rowIndex);
+                this.destroyComponents(false, rowIndex);
                 if (this.inlineEditMode) {
                     this.splice(rowIndex);
                 }
@@ -866,7 +870,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     baseRemoveRow(rowIndex) {
         const editRow = this.editRows[rowIndex];
         editRow.state = EditRowState.Removed;
-        this.destroyComponents(rowIndex);
+        this.destroyComponents(false, rowIndex);
         return editRow;
     }
     removeRow(rowIndex, modified) {
@@ -889,6 +893,15 @@ export default class EditGridComponent extends NestedArrayComponent {
         this.redraw();
     }
     createRowComponents(row, rowIndex, recreatePartially) {
+        // Iterate through existing components and destroy the ones with the same rowIndex.
+        if (this.components) {
+            for (let i = 0; i < this.components.length; i++) {
+                if (this.components[i].rowIndex === rowIndex) {
+                    this.components[i].destroy();
+                    this.components.splice(i, 1);
+                }
+            }
+        }
         const currentRowComponents = _.get(this.editRows, `[${rowIndex}].components`, null);
         return this.component.components.map((col, colIndex) => {
             if (recreatePartially && currentRowComponents && this.variableTypeComponentsIndexes.length) {
@@ -1168,7 +1181,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         });
     }
     emptyRows() {
-        this.editRows.forEach((editRow, index) => this.destroyComponents(index));
+        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));
         this.editRows = [];
     }
     resetValue() {

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

@@ -167,5 +167,6 @@ export default class FileComponent extends Field {
     getFile(fileInfo: any): any;
     focus(): void;
     beforeSubmit(): Promise<void>;
+    destroy(all: any): void;
 }
 import Field from '../_classes/field/Field';

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

@@ -1022,8 +1022,8 @@ export default class FileComponent extends Field {
             return Promise.reject(error.message);
         }
     }
-    destroy() {
+    destroy(all) {
         this.stopVideo();
-        super.destroy();
+        super.destroy(all);
     }
 }

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

@@ -329,13 +329,13 @@ export default class FormComponent extends Component {
             && _.isNumber(this.formObj._vid)
             && this.formObj._vid !== this.subFormRevision;
     }
-    destroy() {
+    destroy(all = false) {
         if (this.subForm) {
-            this.subForm.destroy();
+            this.subForm.destroy(all);
             this.subForm = null;
             this.subFormReady = null;
         }
-        super.destroy();
+        super.destroy(all);
     }
     redraw() {
         if (this.subForm) {

package/lib/mjs/components/radio/Radio.d.ts

@@ -71,7 +71,7 @@ export default class RadioComponent extends ListComponent {
     detach(element: any): void;
     validateValueProperty(): boolean;
     validateValueAvailability(setting: any, value: any): boolean;
-    getValueAsString(value: any): any;
+    getValueAsString(value: any, options?: {}): any;
     setValueAt(index: any, value: any): void;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     loadItemsFromMetadata(): void;

package/lib/mjs/components/radio/Radio.js

@@ -226,17 +226,19 @@ export default class RadioComponent extends ListComponent {
         }
         return false;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (_.isObject(value)) {
             value = JSON.stringify(value);
         }
         else if (!_.isString(value)) {
             value = _.toString(value);
         }
-        if (this.component.dataSrc !== 'values') {
+        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
+        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
             return value;
         }
-        const option = _.find(this.component.values, (v) => v.value === value);
+        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
+        const option = _.find(values, (v) => v.value === value);
         if (!value) {
             return _.get(option, 'label', '');
         }

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.d.ts

@@ -7,6 +7,9 @@ declare const _default: ({
         label: string;
         value: string;
     }[];
+    validate: {
+        required: boolean;
+    };
     weight: number;
     input?: undefined;
     dataSrc?: undefined;
@@ -28,6 +31,7 @@ declare const _default: ({
         custom(context: any): any[];
     };
     values?: undefined;
+    validate?: undefined;
     ignore?: undefined;
 } | {
     key: string;
@@ -36,6 +40,7 @@ declare const _default: ({
     tooltip?: undefined;
     type?: undefined;
     values?: undefined;
+    validate?: undefined;
     weight?: undefined;
     input?: undefined;
     dataSrc?: undefined;

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -15,6 +15,9 @@ export default [
                 value: 'buttonClick'
             }
         ],
+        validate: {
+            required: true
+        },
         weight: 650
     },
     {

package/lib/mjs/components/select/Select.js

@@ -226,9 +226,10 @@ export default class SelectComponent extends ListComponent {
     }
     selectValueAndLabel(data) {
         const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
+        const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;
         return {
             value,
-            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : data, value)
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
         };
     }
     itemTemplate(data, value) {
@@ -840,7 +841,9 @@ export default class SelectComponent extends ListComponent {
         }
         const tabIndex = input.tabIndex;
         this.addPlaceholder();
-        input.setAttribute('dir', this.i18next.dir());
+        if (this.i18next) {
+            input.setAttribute('dir', this.i18next.dir());
+        }
         if (this.choices?.containerOuter?.element?.parentNode) {
             this.choices.destroy();
         }
@@ -1493,6 +1496,10 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
+        if (options.modalPreview && this.selectData) {
+            const { label } = this.selectValueAndLabel(value);
+            return label;
+        }
         //need to convert values to strings to be able to compare values with available options that are strings
         const convertToString = (data, valueProperty) => {
             if (valueProperty) {
@@ -1568,7 +1575,6 @@ export default class SelectComponent extends ListComponent {
             : '-';
     }
     detach() {
-        super.detach();
         this.off('blur');
         if (this.choices) {
             if (this.choices.containerOuter?.element?.parentNode) {
@@ -1576,6 +1582,7 @@ export default class SelectComponent extends ListComponent {
             }
             this.choices = null;
         }
+        super.detach();
     }
     focus() {
         if (this.focusableElement) {

package/lib/mjs/components/select/fixtures/comp23.d.ts

@@ -0,0 +1,47 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        widget: string;
+        tableView: boolean;
+        dataSrc: string;
+        data: {
+            resource: string;
+        };
+        template: string;
+        validate: {
+            select: boolean;
+        };
+        key: string;
+        type: string;
+        searchField: string;
+        input: boolean;
+        noRefreshOnScroll: boolean;
+        addResource: boolean;
+        reference: boolean;
+        valueProperty: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        widget?: undefined;
+        dataSrc?: undefined;
+        data?: undefined;
+        template?: undefined;
+        validate?: undefined;
+        searchField?: undefined;
+        noRefreshOnScroll?: undefined;
+        addResource?: undefined;
+        reference?: undefined;
+        valueProperty?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/select/fixtures/comp23.js

@@ -0,0 +1,38 @@
+export default {
+    title: 'FIO-8234',
+    name: 'fio8234',
+    path: 'fio8234',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            dataSrc: 'resource',
+            data: {
+                resource: '665446284c9b0163c3e0c7e6',
+            },
+            template: '<span>{{ item.data.textField1 }}</span>',
+            validate: {
+                select: false,
+            },
+            key: 'select',
+            type: 'select',
+            searchField: 'data.textField2__regex',
+            input: true,
+            noRefreshOnScroll: false,
+            addResource: false,
+            reference: false,
+            valueProperty: 'data.textField2',
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

package/lib/mjs/components/select/fixtures/index.d.ts

@@ -19,5 +19,6 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './comp23';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23 };
 export { multiSelect, multiSelectOptions } from "./comp3";

package/lib/mjs/components/select/fixtures/index.js

@@ -20,4 +20,5 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './comp23';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23 };

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -162,11 +162,14 @@ export default class SelectBoxesComponent extends RadioComponent {
         }
         return changed;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (!value) {
             return '';
         }
         if (this.isSelectURL) {
+            if (options.modalPreview && this.loadedOptions) {
+                return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+            }
             return _(value).pickBy((val) => val).keys().join(', ');
         }
         return _(this.component.values || [])

package/lib/mjs/components/table/Table.d.ts

@@ -19,6 +19,5 @@ export default class TableComponent extends NestedComponent {
     noField: boolean;
     table: any[] | undefined;
     render(): any;
-    destroy(all: any): void;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/mjs/components/table/Table.js

@@ -162,7 +162,7 @@ export default class TableComponent extends NestedComponent {
         });
         return superAttach;
     }
-    destroy(all) {
+    destroy(all = false) {
         super.destroy(all);
         delete this.table;
     }

package/lib/mjs/components/tags/Tags.js

@@ -59,7 +59,9 @@ export default class TagsComponent extends Input {
         if (!element) {
             return;
         }
-        element.setAttribute('dir', this.i18next.dir());
+        if (this.i18next) {
+            element.setAttribute('dir', this.i18next.dir());
+        }
         if (this.choices) {
             this.choices.destroy();
         }
@@ -106,11 +108,11 @@ export default class TagsComponent extends Input {
         });
     }
     detach() {
-        super.detach();
         if (this.choices) {
             this.choices.destroy();
             this.choices = null;
         }
+        super.detach();
     }
     normalizeValue(value) {
         if (this.component.storeas === 'string' && Array.isArray(value)) {

package/lib/mjs/utils/utils.d.ts

@@ -27,6 +27,12 @@ export function getElementRect(element: any): {
     width: string;
     height: string;
 };
+/**
+ * Get non HTMLElement property in the window object
+ * @param {String} property
+ * @return {any || undefined}
+ */
+export function getScriptPlugin(property: string): any;
 /**
  * Determines the boolean value of a setting.
  *
@@ -374,4 +380,4 @@ import jsonLogic from 'json-logic-js';
 import ConditionOperators from './conditionOperators';
 import Evaluator from './Evaluator';
 export const interpolate: (rawTemplate: any, data: any, _options: any) => any;
-export { jsonLogic, moment, ConditionOperators, Evaluator, _ };
+export { jsonLogic, ConditionOperators, Evaluator, _ };

package/lib/mjs/utils/utils.js

@@ -28,7 +28,8 @@ jsonLogic.add_operation('relativeMinDate', (relativeMinDate) => {
 jsonLogic.add_operation('relativeMaxDate', (relativeMaxDate) => {
     return moment().add(relativeMaxDate, 'days').toISOString();
 });
-export { jsonLogic, moment, ConditionOperators };
+export { jsonLogic, ConditionOperators };
+export * as moment from 'moment-timezone/moment-timezone';
 function setPathToComponentAndPerentSchema(component) {
     component.path = getComponentPath(component);
     const dataParent = getDataParentComponent(component);
@@ -130,6 +131,19 @@ export function getElementRect(element) {
         height: getPropertyValue(style, 'height')
     };
 }
+/**
+ * Get non HTMLElement property in the window object
+ * @param {String} property
+ * @return {any || undefined}
+ */
+export function getScriptPlugin(property) {
+    const obj = window[property];
+    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2
+        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {
+        return undefined;
+    }
+    return obj;
+}
 /**
  * Determines the boolean value of a setting.
  *