@formio/js 5.1.0-dev.6069.caec01d → 5.1.0-dev.6070.c51663f

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

@@ -1011,9 +1011,10 @@ declare class Component extends Element {
      * @param {boolean} dirty - If the component is dirty.
      * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.
      * @param {*} row - Contextual row data for this component.
+     * @param {*} options - Additional options for validation.
      * @returns {string} - The message to show when the component is invalid.
      */
-    invalidMessage(data: any, dirty: boolean, ignoreCondition: boolean, row: any): string;
+    invalidMessage(data: any, dirty: boolean, ignoreCondition: boolean, row: any, options?: any): string;
     /**
      * Returns if the component is valid or not.
      * @param {*} data - The data to check if the component is valid.

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

@@ -2999,10 +2999,12 @@ class Component extends Element_1.default {
      * @param {boolean} dirty - If the component is dirty.
      * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.
      * @param {*} row - Contextual row data for this component.
+     * @param {*} options - Additional options for validation.
      * @returns {string} - The message to show when the component is invalid.
      */
-    invalidMessage(data, dirty, ignoreCondition, row) {
+    invalidMessage(data, dirty, ignoreCondition, row, options = {}) {
         var _a;
+        const { local } = options;
         if (!row) {
             row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);
         }
@@ -3022,6 +3024,7 @@ class Component extends Element_1.default {
             component: this.component,
             data,
             row,
+            local,
             path: this.path || this.component.key,
             parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,
             paths: this.paths,
@@ -3200,7 +3203,7 @@ class Component extends Element_1.default {
         row = row || this.data;
         // Some components (for legacy reasons) have calls to "checkData" in inappropriate places such
         // as setValue. Historically, this was bypassed by a series of cached states around the data model
-        // which caused its own problems. We need to ensure that premium and custom components do not fall into 
+        // which caused its own problems. We need to ensure that premium and custom components do not fall into
         // an infinite loop by only checking this component once.
         if (this.checkingData) {
             return;

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

@@ -1107,7 +1107,9 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             errors.push(...this._errors);
             return false;
         }
-        const message = this.invalid || this.invalidMessage(data, dirty, false, row);
+        // TODO: this is the only place invalidMessage gets called, and it's not clear why it's needed - we already validate the editGrid
+        // component above with super.checkComponentValidity
+        const message = this.invalid || this.invalidMessage(data, dirty, false, row, options);
         if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);

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

@@ -17,8 +17,8 @@ declare const _default: ({
     tooltip?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -59,8 +59,8 @@ declare const _default: ({
         };
     };
     data?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -88,6 +88,7 @@ declare const _default: ({
     key: string;
     tooltip: string;
     weight: number;
+    defaultValue: boolean;
     conditional: {
         json: {
             and: ({
@@ -110,7 +111,6 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     reorder?: undefined;
-    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -220,8 +220,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     skipMerge?: undefined;
     refreshOn?: undefined;
@@ -256,8 +256,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -328,8 +328,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
     placeholder?: undefined;
@@ -363,8 +363,8 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
     valueProperty?: undefined;
@@ -395,8 +395,8 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -436,8 +436,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -478,8 +478,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -626,8 +626,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -669,8 +669,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -718,8 +718,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
     template?: undefined;
@@ -932,8 +932,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -965,8 +965,8 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1035,8 +1035,8 @@ declare const _default: ({
     tooltip?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1115,8 +1115,8 @@ declare const _default: ({
     label?: undefined;
     tooltip?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1150,8 +1150,8 @@ declare const _default: ({
     tooltip?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;

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

@@ -83,6 +83,7 @@ exports.default = [
         key: 'lazyLoad',
         tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\'s will only fire when the control is activated.',
         weight: 11,
+        defaultValue: true,
         conditional: {
             json: {
                 and: [

package/lib/cjs/components/survey/Survey.js

@@ -120,7 +120,7 @@ class SurveyComponent extends Field_1.default {
         return this.component.questions.reduce((result, question) => result && Boolean(value[question.value]), true);
     }
     getInputName(question) {
-        return `${this.options.name}[${question.value}]`;
+        return `${this.options.name}[${question.value}][${this.id}]`;
     }
     getValueAsString(value, options) {
         if (options === null || options === void 0 ? void 0 : options.email) {

package/lib/cjs/components/textarea/TextArea.js

@@ -62,7 +62,15 @@ class TextAreaComponent extends TextField_1.default {
         info.content = value;
         if ((this.options.readOnly || this.disabled) && !this.isHtmlRenderMode()) {
             const elementStyle = this.info.attr.style || '';
-            const children = `<div ${this._referenceAttributeName}="input" class="formio-editor-read-only-content" ${elementStyle ? `style='${elementStyle}'` : ''}></div>`;
+            const children = `
+        <div ${this._referenceAttributeName}="input" 
+          class="formio-editor-read-only-content" 
+          ${elementStyle ? `style='${elementStyle}'` : ''}
+          role="textbox"
+          aria-multiline="true"
+          aria-readonly="true"
+        >
+        </div>`;
             return this.renderTemplate('well', {
                 children,
                 nestedKey: this.key,

package/lib/cjs/components/unknown/Unknown.form.d.ts

@@ -1,5 +1,6 @@
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
-export default function _default(): object;
+export default function _default(...extend: any[]): object;

package/lib/cjs/components/unknown/Unknown.form.js

@@ -3,25 +3,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = require("lodash");
 const Unknown_edit_display_1 = __importDefault(require("./editForm/Unknown.edit.display"));
+const utils_1 = __importDefault(require("../../components/_classes/component/editForm/utils"));
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
-function default_1() {
+function default_1(...extend) {
+    const components = [
+        {
+            label: 'Custom',
+            key: 'display',
+            weight: 0,
+            components: Unknown_edit_display_1.default
+        }
+    ].concat(...extend);
     return {
         components: [
             {
                 type: 'tabs',
                 key: 'tabs',
-                components: [
-                    {
-                        label: 'Custom',
-                        key: 'display',
-                        weight: 0,
-                        components: Unknown_edit_display_1.default
-                    }
-                ]
+                components: (0, lodash_1.unionWith)(components, utils_1.default.unifyComponents)
             }
         ]
     };

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

@@ -1011,9 +1011,10 @@ declare class Component extends Element {
      * @param {boolean} dirty - If the component is dirty.
      * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.
      * @param {*} row - Contextual row data for this component.
+     * @param {*} options - Additional options for validation.
      * @returns {string} - The message to show when the component is invalid.
      */
-    invalidMessage(data: any, dirty: boolean, ignoreCondition: boolean, row: any): string;
+    invalidMessage(data: any, dirty: boolean, ignoreCondition: boolean, row: any, options?: any): string;
     /**
      * Returns if the component is valid or not.
      * @param {*} data - The data to check if the component is valid.

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

@@ -2967,9 +2967,11 @@ export default class Component extends Element {
      * @param {boolean} dirty - If the component is dirty.
      * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.
      * @param {*} row - Contextual row data for this component.
+     * @param {*} options - Additional options for validation.
      * @returns {string} - The message to show when the component is invalid.
      */
-    invalidMessage(data, dirty, ignoreCondition, row) {
+    invalidMessage(data, dirty, ignoreCondition, row, options = {}) {
+        const { local } = options;
         if (!row) {
             row = getContextualRowData(this.component, data, this.paths);
         }
@@ -2989,6 +2991,7 @@ export default class Component extends Element {
             component: this.component,
             data,
             row,
+            local,
             path: this.path || this.component.key,
             parent: this.parent?.component,
             paths: this.paths,
@@ -3165,7 +3168,7 @@ export default class Component extends Element {
         row = row || this.data;
         // Some components (for legacy reasons) have calls to "checkData" in inappropriate places such
         // as setValue. Historically, this was bypassed by a series of cached states around the data model
-        // which caused its own problems. We need to ensure that premium and custom components do not fall into 
+        // which caused its own problems. We need to ensure that premium and custom components do not fall into
         // an infinite loop by only checking this component once.
         if (this.checkingData) {
             return;

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

@@ -1099,7 +1099,9 @@ export default class EditGridComponent extends NestedArrayComponent {
             errors.push(...this._errors);
             return false;
         }
-        const message = this.invalid || this.invalidMessage(data, dirty, false, row);
+        // TODO: this is the only place invalidMessage gets called, and it's not clear why it's needed - we already validate the editGrid
+        // component above with super.checkComponentValidity
+        const message = this.invalid || this.invalidMessage(data, dirty, false, row, options);
         if (allRowErrors.length && this.root?.submitted && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);

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

@@ -17,8 +17,8 @@ declare const _default: ({
     tooltip?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -59,8 +59,8 @@ declare const _default: ({
         };
     };
     data?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -88,6 +88,7 @@ declare const _default: ({
     key: string;
     tooltip: string;
     weight: number;
+    defaultValue: boolean;
     conditional: {
         json: {
             and: ({
@@ -110,7 +111,6 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     reorder?: undefined;
-    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -220,8 +220,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     skipMerge?: undefined;
     refreshOn?: undefined;
@@ -256,8 +256,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -328,8 +328,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
     placeholder?: undefined;
@@ -363,8 +363,8 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
     valueProperty?: undefined;
@@ -395,8 +395,8 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -436,8 +436,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -478,8 +478,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -626,8 +626,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -669,8 +669,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -718,8 +718,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
     template?: undefined;
@@ -932,8 +932,8 @@ declare const _default: ({
     as?: undefined;
     editor?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -965,8 +965,8 @@ declare const _default: ({
     editor?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1035,8 +1035,8 @@ declare const _default: ({
     tooltip?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1115,8 +1115,8 @@ declare const _default: ({
     label?: undefined;
     tooltip?: undefined;
     description?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1150,8 +1150,8 @@ declare const _default: ({
     tooltip?: undefined;
     description?: undefined;
     conditional?: undefined;
-    reorder?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;

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

@@ -77,6 +77,7 @@ export default [
         key: 'lazyLoad',
         tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\'s will only fire when the control is activated.',
         weight: 11,
+        defaultValue: true,
         conditional: {
             json: {
                 and: [

package/lib/mjs/components/survey/Survey.js

@@ -118,7 +118,7 @@ export default class SurveyComponent extends Field {
         return this.component.questions.reduce((result, question) => result && Boolean(value[question.value]), true);
     }
     getInputName(question) {
-        return `${this.options.name}[${question.value}]`;
+        return `${this.options.name}[${question.value}][${this.id}]`;
     }
     getValueAsString(value, options) {
         if (options?.email) {

package/lib/mjs/components/textarea/TextArea.js

@@ -57,7 +57,15 @@ export default class TextAreaComponent extends TextFieldComponent {
         info.content = value;
         if ((this.options.readOnly || this.disabled) && !this.isHtmlRenderMode()) {
             const elementStyle = this.info.attr.style || '';
-            const children = `<div ${this._referenceAttributeName}="input" class="formio-editor-read-only-content" ${elementStyle ? `style='${elementStyle}'` : ''}></div>`;
+            const children = `
+        <div ${this._referenceAttributeName}="input" 
+          class="formio-editor-read-only-content" 
+          ${elementStyle ? `style='${elementStyle}'` : ''}
+          role="textbox"
+          aria-multiline="true"
+          aria-readonly="true"
+        >
+        </div>`;
             return this.renderTemplate('well', {
                 children,
                 nestedKey: this.key,

package/lib/mjs/components/unknown/Unknown.form.d.ts

@@ -1,5 +1,6 @@
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
-export default function _default(): object;
+export default function _default(...extend: any[]): object;

package/lib/mjs/components/unknown/Unknown.form.js

@@ -1,22 +1,26 @@
+import { unionWith } from 'lodash';
 import UnknownEditDisplay from './editForm/Unknown.edit.display';
+import EditFormUtils from '../../components/_classes/component/editForm/utils';
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
-export default function () {
+export default function (...extend) {
+    const components = [
+        {
+            label: 'Custom',
+            key: 'display',
+            weight: 0,
+            components: UnknownEditDisplay
+        }
+    ].concat(...extend);
     return {
         components: [
             {
                 type: 'tabs',
                 key: 'tabs',
-                components: [
-                    {
-                        label: 'Custom',
-                        key: 'display',
-                        weight: 0,
-                        components: UnknownEditDisplay
-                    }
-                ]
+                components: unionWith(components, EditFormUtils.unifyComponents)
             }
         ]
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-dev.6069.caec01d",
+  "version": "5.1.0-dev.6070.c51663f",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {