@formio/js 5.1.0-dev.6073.1f3d9c8 → 5.1.0-dev.6074.9c916f1

package/lib/cjs/components/_classes/list/ListComponent.js

@@ -29,9 +29,9 @@ class ListComponent extends Field_1.default {
     get dataReady() {
         // If the root submission has been set, and we are still not attached, then assume
         // that our data is ready.
-        if (this.root &&
+        if ((this.root &&
             this.root.submissionSet &&
-            !this.attached) {
+            !this.attached) || !this.visible) {
             return Promise.resolve();
         }
         return this.itemsLoaded;

package/lib/cjs/components/datetime/editForm/DateTime.edit.validation.d.ts

@@ -6,36 +6,87 @@ declare const _default: ({
     persistent: boolean;
     weight: number;
     tooltip: string;
+    applyMaskOn?: undefined;
+    logic?: undefined;
     skipMerge?: undefined;
-    customConditional?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
-    key: string;
-    label: string;
     skipMerge: boolean;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): boolean;
     persistent?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    tableView: boolean;
+    validateWhenHidden: boolean;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
     enableTime: boolean;
-    key: string;
     skipMerge: boolean;
-    label: string;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): any;
     persistent?: undefined;
 })[];
 export default _default;

package/lib/cjs/components/datetime/editForm/DateTime.edit.validation.js

@@ -11,35 +11,44 @@ exports.default = [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Minimum Date',
+        tooltip: "The minimum date that can be picked. You can also use Moment.js functions. For example: moment().subtract(10, 'days')",
+        applyMaskOn: 'change',
         key: 'datePicker.minDate',
-        label: 'Use calendar to set minDate',
-        skipMerge: true,
-        weight: 10,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMinDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMinDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set minDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMinDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMinDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
-        enableTime: false,
-        key: 'datePicker.minDate',
         skipMerge: true,
-        label: 'Minimum Date',
         weight: 10,
-        tooltip: 'The minimum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().subtract(10, \'days\')',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMinDateInput;
-        },
     },
     {
         type: 'checkbox',
@@ -51,34 +60,46 @@ exports.default = [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Maximum Date',
+        tooltip: "The maximum date that can be picked. You can also use Moment.js functions. For example: moment().add(10, 'days')",
+        applyMaskOn: 'change',
+        tableView: true,
+        validateWhenHidden: false,
         key: 'datePicker.maxDate',
-        skipMerge: true,
-        label: 'Use calendar to set maxDate',
-        weight: 20,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMaxDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMaxDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set maxDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMaxDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMaxDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
         enableTime: false,
-        key: 'datePicker.maxDate',
         skipMerge: true,
-        label: 'Maximum Date',
-        tooltip: 'The maximum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().add(10, \'days\')',
         weight: 20,
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMaxDateInput;
-        },
     }
 ];

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/utils/formUtils.d.ts

@@ -26,8 +26,8 @@ export const getBestMatch: typeof Utils.getBestMatch;
 export const getComponentFromPath: typeof Utils.getComponentFromPath;
 export const getComponentValue: typeof Utils.getComponentValue;
 export const findComponents: typeof Utils.findComponents;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => void;
+export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => Promise<void>;
+export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;

package/lib/cjs/utils/utils.js

@@ -34,6 +34,7 @@ const Evaluator_1 = require("./Evaluator");
 Object.defineProperty(exports, "Evaluator", { enumerable: true, get: function () { return Evaluator_1.Evaluator; } });
 const conditionOperators_1 = __importDefault(require("./conditionOperators"));
 exports.ConditionOperators = conditionOperators_1.default;
+const core_1 = require("@formio/core");
 const interpolate = Evaluator_1.Evaluator.interpolate;
 exports.interpolate = interpolate;
 __exportStar(require("./formUtils"), exports);
@@ -271,7 +272,7 @@ function checkSimpleConditional(component, condition, row, data, instance) {
             default:
                 result = lodash_1.default.every(conditionsResult.flat(), res => !!res);
         }
-        return show ? result : !result;
+        return (0, core_1.convertShowToBoolean)(show) ? result : !result;
     }
 }
 exports.checkSimpleConditional = checkSimpleConditional;

package/lib/mjs/components/_classes/list/ListComponent.js

@@ -24,9 +24,9 @@ export default class ListComponent extends Field {
     get dataReady() {
         // If the root submission has been set, and we are still not attached, then assume
         // that our data is ready.
-        if (this.root &&
+        if ((this.root &&
             this.root.submissionSet &&
-            !this.attached) {
+            !this.attached) || !this.visible) {
             return Promise.resolve();
         }
         return this.itemsLoaded;

package/lib/mjs/components/datetime/editForm/DateTime.edit.validation.d.ts

@@ -6,36 +6,87 @@ declare const _default: ({
     persistent: boolean;
     weight: number;
     tooltip: string;
+    applyMaskOn?: undefined;
+    logic?: undefined;
     skipMerge?: undefined;
-    customConditional?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
-    key: string;
-    label: string;
     skipMerge: boolean;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): boolean;
     persistent?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    tableView: boolean;
+    validateWhenHidden: boolean;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
     enableTime: boolean;
-    key: string;
     skipMerge: boolean;
-    label: string;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): any;
     persistent?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/datetime/editForm/DateTime.edit.validation.js

@@ -9,35 +9,44 @@ export default [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Minimum Date',
+        tooltip: "The minimum date that can be picked. You can also use Moment.js functions. For example: moment().subtract(10, 'days')",
+        applyMaskOn: 'change',
         key: 'datePicker.minDate',
-        label: 'Use calendar to set minDate',
-        skipMerge: true,
-        weight: 10,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMinDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMinDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set minDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMinDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMinDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
-        enableTime: false,
-        key: 'datePicker.minDate',
         skipMerge: true,
-        label: 'Minimum Date',
         weight: 10,
-        tooltip: 'The minimum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().subtract(10, \'days\')',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMinDateInput;
-        },
     },
     {
         type: 'checkbox',
@@ -49,34 +58,46 @@ export default [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Maximum Date',
+        tooltip: "The maximum date that can be picked. You can also use Moment.js functions. For example: moment().add(10, 'days')",
+        applyMaskOn: 'change',
+        tableView: true,
+        validateWhenHidden: false,
         key: 'datePicker.maxDate',
-        skipMerge: true,
-        label: 'Use calendar to set maxDate',
-        weight: 20,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMaxDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMaxDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set maxDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMaxDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMaxDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
         enableTime: false,
-        key: 'datePicker.maxDate',
         skipMerge: true,
-        label: 'Maximum Date',
-        tooltip: 'The maximum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().add(10, \'days\')',
         weight: 20,
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMaxDateInput;
-        },
     }
 ];

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/utils/formUtils.d.ts

@@ -26,8 +26,8 @@ export const getBestMatch: typeof Utils.getBestMatch;
 export const getComponentFromPath: typeof Utils.getComponentFromPath;
 export const getComponentValue: typeof Utils.getComponentValue;
 export const findComponents: typeof Utils.findComponents;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => void;
+export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => Promise<void>;
+export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;

package/lib/mjs/utils/utils.js

@@ -8,6 +8,7 @@ import dompurify from 'dompurify';
 import { getValue } from './formUtils';
 import { Evaluator } from './Evaluator';
 import ConditionOperators from './conditionOperators';
+import { convertShowToBoolean } from '@formio/core';
 const interpolate = Evaluator.interpolate;
 export * from './formUtils';
 // Configure JsonLogic
@@ -236,7 +237,7 @@ export function checkSimpleConditional(component, condition, row, data, instance
             default:
                 result = _.every(conditionsResult.flat(), res => !!res);
         }
-        return show ? result : !result;
+        return convertShowToBoolean(show) ? result : !result;
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-dev.6073.1f3d9c8",
+  "version": "5.1.0-dev.6074.9c916f1",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -81,7 +81,7 @@
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
     "@formio/bootstrap": "v3.0.0-dev.121.085d187",
-    "@formio/core": "v2.4.0-dev.2",
+    "@formio/core": "v2.4.0-dev.232.d91b1e4",
     "@formio/text-mask-addons": "3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",