@formio/js 5.2.0-rc.9 → 5.2.1-dev.6186.ffe4f6c

package/lib/mjs/utils/ChoicesWrapper.js

@@ -1,41 +1,7 @@
-import Choices from '@formio/choices.js';
-/**
- * TODO: REMOVE THIS ONCE THE PULL REQUEST HAS BEEN RESOLVED.
- *
- * https://github.com/jshjohnson/Choices/pull/788
- *
- * This is intentionally not part of the extended class, since other components use Choices and need this fix as well.
- * @type {Choices._generatePlaceholderValue}
- * @private
- */
-Choices.prototype._generatePlaceholderValue = function () {
-    if (this._isSelectElement && this.passedElement.placeholderOption) {
-        const { placeholderOption } = this.passedElement;
-        return placeholderOption ? placeholderOption.text : false;
-    }
-    const { placeholder, placeholderValue } = this.config;
-    const { element: { dataset }, } = this.passedElement;
-    if (placeholder) {
-        if (placeholderValue) {
-            return placeholderValue;
-        }
-        if (dataset.placeholder) {
-            return dataset.placeholder;
-        }
-    }
-    return false;
-};
-export const KEY_CODES = {
-    BACK_KEY: 46,
-    DELETE_KEY: 8,
+import Choices, { KeyCodeMap } from 'choices.js';
+const ExtendedKeyCodeMap = {
+    ...KeyCodeMap,
     TAB_KEY: 9,
-    ENTER_KEY: 13,
-    A_KEY: 65,
-    ESC_KEY: 27,
-    UP_KEY: 38,
-    DOWN_KEY: 40,
-    PAGE_UP_KEY: 33,
-    PAGE_DOWN_KEY: 34,
 };
 class ChoicesWrapper extends Choices {
     constructor(...args) {
@@ -63,24 +29,13 @@ class ChoicesWrapper extends Choices {
         }
         this._wasTap = true;
     }
-    _handleButtonAction(activeItems, element) {
-        if (!this._isSelectOneElement) {
-            return super._handleButtonAction(activeItems, element);
-        }
-        if (!activeItems ||
-            !element ||
-            !this.config.removeItems ||
-            !this.config.removeItemButton) {
-            return;
-        }
-        super._handleButtonAction(activeItems, element);
-    }
-    _onEnterKey(args) {
+    _onEnterKey(...args) {
+        const [event] = args;
         // Prevent dropdown form opening when removeItemButton was pressed using 'Enter' on keyboard
-        if (args.event.target.className === 'choices__button') {
+        if (event.target.className === 'choices__button') {
             this.shouldOpenDropDown = false;
         }
-        super._onEnterKey(args);
+        super._onEnterKey(...args);
     }
     _onDirectionKey(...args) {
         if (!this._isSelectOneElement) {
@@ -94,17 +49,18 @@ class ChoicesWrapper extends Choices {
             this.isDirectionUsing = false;
         }, 250);
     }
-    _onTabKey({ activeItems, hasActiveDropdown }) {
-        if (hasActiveDropdown) {
-            this._selectHighlightedChoice(activeItems);
+    _onTabKey() {
+        if (this.dropdown.isActive) {
+            this._selectHighlightedChoice();
         }
     }
     _selectHighlightedChoice() {
-        const highlightedChoice = this.dropdown.getChild(`.${this.config.classNames.highlightedState}`);
+        const highlightedChoice = this.dropdown.element.querySelector(`.${this.config.classNames.highlightedState}`);
         if (highlightedChoice) {
             const id = highlightedChoice.dataset.id;
-            const choice = id && this._store.getChoiceById(id);
+            const choice = id && this._store.getChoiceById(Number(id));
             this._addItem({
+                id: choice.id,
                 value: choice.value,
                 label: choice.label,
                 choiceId: choice.id,
@@ -115,61 +71,16 @@ class ChoicesWrapper extends Choices {
             });
             this._triggerChange(choice.value);
         }
-        event.preventDefault();
     }
     _onKeyDown(event) {
-        if (!this._isSelectOneElement) {
-            return super._onKeyDown(event);
-        }
-        const { target, keyCode, ctrlKey, metaKey } = event;
-        if (target !== this.input.element &&
-            !this.containerOuter.element.contains(target)) {
-            return;
-        }
-        const activeItems = this._store.activeItems;
-        const hasFocusedInput = this.input.isFocussed;
-        const hasActiveDropdown = this.dropdown.isActive;
-        const hasItems = this.itemList.hasChildren;
-        const keyString = String.fromCharCode(keyCode);
-        const { BACK_KEY, DELETE_KEY, TAB_KEY, ENTER_KEY, A_KEY, ESC_KEY, UP_KEY, DOWN_KEY, PAGE_UP_KEY, PAGE_DOWN_KEY, } = KEY_CODES;
-        const hasCtrlDownKeyPressed = ctrlKey || metaKey;
-        // If a user is typing and the dropdown is not active
-        if (!hasActiveDropdown && !this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
-            const currentValue = this.input.element.value;
-            this.input.element.value = currentValue ? `${currentValue}${keyString}` : keyString;
-            this.showDropdown();
-        }
-        // Map keys to key actions
-        const keyDownActions = {
-            [A_KEY]: this._onAKey,
-            [TAB_KEY]: this._onTabKey,
-            [ENTER_KEY]: this._onEnterKey,
-            [ESC_KEY]: this._onEscapeKey,
-            [UP_KEY]: this._onDirectionKey,
-            [PAGE_UP_KEY]: this._onDirectionKey,
-            [DOWN_KEY]: this._onDirectionKey,
-            [PAGE_DOWN_KEY]: this._onDirectionKey,
-            [DELETE_KEY]: this._onDeleteKey,
-            [BACK_KEY]: this._onDeleteKey,
-        };
-        // If keycode has a function, run it
-        if (keyDownActions[keyCode]) {
-            keyDownActions[keyCode]({
-                event,
-                target,
-                keyCode,
-                metaKey,
-                activeItems,
-                hasFocusedInput,
-                hasActiveDropdown,
-                hasItems,
-                hasCtrlDownKeyPressed,
-            });
-        }
+        const keyCode = event.keyCode;
+        return this._isSelectOneElement && keyCode === ExtendedKeyCodeMap.TAB_KEY
+            ? this._onTabKey()
+            : super._onKeyDown(event);
     }
-    onSelectValue({ event, activeItems, hasActiveDropdown }) {
+    onSelectValue(event, hasActiveDropdown) {
         if (hasActiveDropdown) {
-            this._selectHighlightedChoice(activeItems);
+            this._selectHighlightedChoice();
         }
         else if (this._isSelectOneElement) {
             this.showDropdown();
@@ -177,11 +88,13 @@ class ChoicesWrapper extends Choices {
         }
     }
     showDropdown(...args) {
-        if (!this.shouldOpenDropDown) {
-            this.shouldOpenDropDown = true;
-            return;
-        }
-        super.showDropdown(...args);
+        setTimeout(() => {
+            if (!this.shouldOpenDropDown) {
+                this.shouldOpenDropDown = true;
+                return;
+            }
+            super.showDropdown(...args);
+        }, 0);
     }
     hideDropdown(...args) {
         if (this.isDirectionUsing) {
@@ -189,11 +102,5 @@ class ChoicesWrapper extends Choices {
         }
         super.hideDropdown(...args);
     }
-    _onBlur(...args) {
-        if (this._isScrollingOnIe) {
-            return;
-        }
-        super._onBlur(...args);
-    }
 }
 export default ChoicesWrapper;

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

@@ -26,10 +26,10 @@ 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: 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 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, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataAsyncCallback | 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, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataCallback | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
-export const getContextualRowPath: typeof Utils.getContextualRowPath;
+export const getContextualRowPath: any;
 export const getContextualRowData: typeof Utils.getContextualRowData;
 export const componentInfo: typeof Utils.componentInfo;
 export const eachComponent: typeof Utils.eachComponent;

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

@@ -37,10 +37,10 @@ declare const FormioUtils: {
     getComponentFromPath: typeof import("@formio/core/lib/utils/formUtil").getComponentFromPath;
     getComponentValue: typeof import("@formio/core/lib/utils/formUtil").getComponentValue;
     findComponents: typeof import("@formio/core/lib/utils/formUtil").findComponents;
-    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>;
-    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;
+    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, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataAsyncCallback | undefined) => Promise<void>;
+    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, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataCallback | undefined) => void;
     getComponentKey: typeof import("@formio/core/lib/utils/formUtil").getComponentKey;
-    getContextualRowPath: typeof import("@formio/core/lib/utils/formUtil").getContextualRowPath;
+    getContextualRowPath: any;
     getContextualRowData: typeof import("@formio/core/lib/utils/formUtil").getContextualRowData;
     componentInfo: typeof import("@formio/core/lib/utils/formUtil").componentInfo;
     eachComponent: typeof import("@formio/core/lib/utils/formUtil").eachComponent;
@@ -137,8 +137,8 @@ declare const FormioUtils: {
     translateHTMLTemplate(template: string, translate: Function): string;
     sanitize(string: string, options: any): string;
     fastCloneDeep(obj: any): any;
-    isInputComponent(componentJson: import("@formio/core").Component): bool;
-    getArrayFromComponentPath(pathStr: string): Arryay<number>;
+    isInputComponent(componentJson: import("@formio/core").Component): boolean;
+    getArrayFromComponentPath(pathStr: string): string[];
     isChildOf(child: any, parent: any): boolean;
     getStringFromComponentPath(path: number[]): string;
     round(number: number, precision: number): string;

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

@@ -414,15 +414,15 @@ export function fastCloneDeep(obj: any): any;
 /**
  * Returns if the component is an input component.
  * @param {import('@formio/core').Component} componentJson - The JSON of a component.
- * @returns {bool} - TRUE if the component is an input component; FALSE otherwise.
+ * @returns {boolean} - TRUE if the component is an input component; FALSE otherwise.
  */
-export function isInputComponent(componentJson: import('@formio/core').Component): bool;
+export function isInputComponent(componentJson: import('@formio/core').Component): boolean;
 /**
  * Takes a component path, and returns a component path array.
  * @param {string} pathStr - The path string to convert to an array.
- * @returns {Arryay<number>} - The array of paths.
+ * @returns {Array<string>} - The array of paths.
  */
-export function getArrayFromComponentPath(pathStr: string): Arryay<number>;
+export function getArrayFromComponentPath(pathStr: string): Array<string>;
 /**
  * Returns true if the component is a child of the parent.
  * @param {any} child - The child component to check.

package/lib/mjs/utils/utils.js

@@ -1295,7 +1295,7 @@ export function fastCloneDeep(obj) {
 /**
  * Returns if the component is an input component.
  * @param {import('@formio/core').Component} componentJson - The JSON of a component.
- * @returns {bool} - TRUE if the component is an input component; FALSE otherwise.
+ * @returns {boolean} - TRUE if the component is an input component; FALSE otherwise.
  */
 export function isInputComponent(componentJson) {
     if (componentJson.input === false || componentJson.input === true) {
@@ -1319,7 +1319,7 @@ export function isInputComponent(componentJson) {
 /**
  * Takes a component path, and returns a component path array.
  * @param {string} pathStr - The path string to convert to an array.
- * @returns {Arryay<number>} - The array of paths.
+ * @returns {Array<string>} - The array of paths.
  */
 export function getArrayFromComponentPath(pathStr) {
     if (!pathStr || !_.isString(pathStr)) {

package/lib/mjs/widgets/CalendarWidget.d.ts

@@ -84,7 +84,7 @@ export default class CalendarWidget extends InputWidget {
      * @returns {void}
      */
     setValue(value: any): void;
-    getValueAsString(value: any, format: any): string;
+    getValueAsString(value: any, format?: string): string;
     setErrorClasses(hasErrors: any): void;
     isCalendarElement(element: any): any;
     initFlatpickr(Flatpickr: any): void;

package/lib/mjs/widgets/CalendarWidget.js

@@ -307,7 +307,7 @@ export default class CalendarWidget extends InputWidget {
             this.calendar.clear(false);
         }
     }
-    getValueAsString(value, format) {
+    getValueAsString(value, format = '') {
         const inputFormat = format || this.dateFormat;
         const valueFormat = this.calendar ? this.valueFormat : this.settings.dateFormat;
         if (this.settings.saveAs === 'text' && this.componentInstance.parent && !this.settings.readOnly) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.2.0-rc.9",
+  "version": "5.2.1-dev.6186.ffe4f6c",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -79,9 +79,8 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "3.1.1",
-    "@formio/choices.js": "^10.2.1",
-    "@formio/core": "2.5.0-rc.5",
+    "@formio/bootstrap": "3.1.2-rc.1",
+    "@formio/core": "2.5.1-rc.5",
     "@formio/text-mask-addons": "^3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",
@@ -89,7 +88,8 @@
     "bootstrap": "^5.3.3",
     "browser-cookies": "^1.2.0",
     "browser-md5-file": "^1.1.1",
-    "compare-versions": "^6.0.0-rc.2",
+    "choices.js": "^11.0.6",
+    "compare-versions": "^6.1.1",
     "core-js": "^3.37.1",
     "dialog-polyfill": "^0.5.6",
     "dom-autoscroller": "^2.3.4",