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

package/lib/mjs/Wizard.d.ts

@@ -6,7 +6,6 @@ declare class Wizard extends Webform {
     originalComponents: any[];
     page: number;
     currentPanel: any;
-    currentPanels: any[] | null;
     currentNextPage: number;
     _seenPages: number[];
     subWizards: any[];
@@ -17,7 +16,7 @@ declare class Wizard extends Webform {
     originalOptions: any;
     isLastPage(): any;
     getPages(args?: {}): any[];
-    get hasExtraPages(): boolean;
+    get hasSubWizards(): boolean;
     get localData(): any;
     get wizardKey(): string;
     set wizard(form: object);

package/lib/mjs/Wizard.js

@@ -29,7 +29,6 @@ export default class Wizard extends Webform {
         this.originalComponents = [];
         this.page = 0;
         this.currentPanel = null;
-        this.currentPanels = null;
         this.currentNextPage = 0;
         this._seenPages = [0];
         this.subWizards = [];
@@ -48,12 +47,12 @@ export default class Wizard extends Webform {
     }
     getPages(args = {}) {
         const { all = false } = args;
-        const pages = this.hasExtraPages ? this.components : this.pages;
+        const pages = this.hasSubWizards ? this.components : this.pages;
         const filteredPages = pages
             .filter(all ? _.identity : (p, index) => this._seenPages.includes(index));
         return filteredPages;
     }
-    get hasExtraPages() {
+    get hasSubWizards() {
         return !_.isEmpty(this.subWizards);
     }
     get data() {
@@ -177,9 +176,9 @@ export default class Wizard extends Webform {
     }
     render() {
         const ctx = this.renderContext;
-        if (this.component.key) {
-            ctx.panels.map(panel => {
-                if (panel.key === this.component.key) {
+        if (this.component.id) {
+            ctx.panels.forEach(panel => {
+                if (panel.id === this.component.id) {
                     this.currentPanel = panel;
                     ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);
                 }
@@ -580,7 +579,7 @@ export default class Wizard extends Webform {
             this.pageFieldLogic(num);
             this.getNextPage();
             let parentNum = num;
-            if (this.hasExtraPages) {
+            if (this.hasSubWizards) {
                 const pageFromPages = this.pages[num];
                 const pageFromComponents = this.components[num];
                 if (!pageFromComponents || pageFromPages?.id !== pageFromComponents.id) {
@@ -869,23 +868,18 @@ export default class Wizard extends Webform {
             this.showErrors(errors, true, true);
         }
         // If the pages change, need to redraw the header.
-        let currentPanels;
-        let panels;
+        const currentPanels = this.pages;
+        // calling this.establishPages() updates/mutates this.pages to be the current pages
+        this.establishPages();
+        const newPanels = this.pages;
         const currentNextPage = this.currentNextPage;
-        if (this.hasExtraPages) {
-            currentPanels = this.pages.map(page => page.component.key);
-            this.establishPages();
-            panels = this.pages.map(page => page.component.key);
-        }
-        else {
-            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);
-            panels = this.establishPages().map(panel => panel.key);
-            this.currentPanels = panels;
-            if (this.currentPanel?.key && this.currentPanels?.length) {
-                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));
-            }
+        const panelsUpdated = !_.isEqual(newPanels, currentPanels);
+        if (this.currentPanel?.id && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
+            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);
+            if (newIndex !== -1)
+                this.setPage(newIndex);
         }
-        if (!_.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {
+        if (panelsUpdated || (flags && flags.fromSubmission)) {
             this.redrawHeader();
         }
         // If the next page changes, then make sure to redraw navigation.

package/lib/mjs/components/Components.js

@@ -54,7 +54,7 @@ export default class Components {
             // eslint-disable-next-line new-cap
             comp = new Components.components['datagrid'](component, options, data);
         }
-        else if (component.tree) {
+        else if (component.tree || (component.input && Array.isArray(component.components))) {
             // eslint-disable-next-line new-cap
             comp = new Components.components['nesteddata'](component, options, data);
         }
@@ -72,6 +72,12 @@ export default class Components {
         if (comp.path) {
             comp.componentsMap[comp.path] = comp;
         }
+        // Reset the componentMatches on the root element if any new component is created.
+        let parent = comp.parent;
+        while (parent) {
+            parent.componentMatches = {};
+            parent = parent.parent;
+        }
         return comp;
     }
 }

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

@@ -165,10 +165,16 @@ declare class Component extends Element {
     get componentsMap(): object;
     /**
      * Returns if the parent should conditionally clear.
+     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear(): boolean;
     parentConditionallyHidden(): boolean;
+    /**
+     * Returns true if any of the parents default their component "hidden" property to true.
+     * @returns {boolean} - If any parent defaults the hidden property to true.
+     */
+    anyParentDefaultsHidden(): boolean;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -232,8 +238,23 @@ declare class Component extends Element {
     get visible(): boolean;
     get logicallyHidden(): any;
     _logicallyHidden: any;
-    shouldConditionallyClear(skipParent?: boolean): boolean;
-    conditionallyHidden(skipParent?: boolean): boolean;
+    /**
+     * Determines if the component should clear its value when the root form is pristine.
+     * @returns {boolean} - If the component should clear its value when the root form is pristine.
+     */
+    shouldConditionallyClearOnPristine(): boolean;
+    /**
+     * Returns if the component should clear its value when conditionally hidden.
+     * @returns {boolean} - If the component should clear its value when conditionally hidden.
+     */
+    shouldConditionallyClear(): boolean;
+    _conditionallyClear: boolean | undefined;
+    /**
+     * Returns if the component is conditionally hidden.
+     * @returns {boolean} - If the component is conditionally hidden.
+     */
+    conditionallyHidden(): boolean;
+    _conditionallyHidden: boolean | undefined;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;

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

@@ -420,12 +420,14 @@ export default class Component extends Element {
     }
     /**
      * Returns if the parent should conditionally clear.
+     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent.shouldConditionallyClear(true)) {
+            if ((currentParent.allowData && currentParent._conditionallyClear) ||
+                (!currentParent.allowData && currentParent._conditionallyHidden)) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -435,7 +437,21 @@ export default class Component extends Element {
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent.conditionallyHidden(true)) {
+            if (currentParent._conditionallyHidden) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
+    /**
+     * Returns true if any of the parents default their component "hidden" property to true.
+     * @returns {boolean} - If any parent defaults the hidden property to true.
+     */
+    anyParentDefaultsHidden() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent.component.hidden) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -650,48 +666,58 @@ export default class Component extends Element {
         }
         return this._logicallyHidden;
     }
-    shouldConditionallyClear(skipParent = false) {
+    /**
+     * Determines if the component should clear its value when the root form is pristine.
+     * @returns {boolean} - If the component should clear its value when the root form is pristine.
+     */
+    shouldConditionallyClearOnPristine() {
+        // If the form is pristine, we should NOT clear the value of a conditionally hidden child component
+        // of a layout component that defaults to hidden using the "hidden" component property.
+        return !this.anyParentDefaultsHidden();
+    }
+    /**
+     * Returns if the component should clear its value when conditionally hidden.
+     * @returns {boolean} - If the component should clear its value when conditionally hidden.
+     */
+    shouldConditionallyClear() {
         // Skip if this component has clearOnHide set to false.
         if (this.component.clearOnHide === false) {
-            return false;
+            this._conditionallyClear = false;
+            return this._conditionallyClear;
         }
         // If the component is logically hidden, then it is conditionally hidden and should clear.
         if (this.logicallyHidden) {
-            return true;
+            this._conditionallyClear = true;
+            return this._conditionallyClear;
         }
         // If we have a condition and it is not conditionally visible, the it should conditionally clear.
-        if (this.hasCondition() && !this.conditionallyVisible()) {
-            return true;
-        }
-        if (skipParent) {
-            // Stop recurrsion for the parent checks.
-            return false;
-        }
-        // If this component has a set value, then it should ONLY clear if a parent is hidden
-        // and has the clearOnHide set to true.
-        if (this.hasSetValue) {
-            return this.parentShouldConditionallyClear();
+        if (this.hasCondition() &&
+            !this.conditionallyVisible() &&
+            (!this.rootPristine || this.shouldConditionallyClearOnPristine())) {
+            this._conditionallyClear = true;
+            return this._conditionallyClear;
         }
-        // Clear the value if the parent is conditionally hidden.
-        return this.parentConditionallyHidden();
+        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
+        return this._conditionallyClear;
     }
-    conditionallyHidden(skipParent = false) {
+    /**
+     * Returns if the component is conditionally hidden.
+     * @returns {boolean} - If the component is conditionally hidden.
+     */
+    conditionallyHidden() {
+        // If it is logically hidden, then it is conditionally hidden.
         if (this.logicallyHidden) {
-            return true;
+            this._conditionallyHidden = true;
+            return this._conditionallyHidden;
         }
-        if (!this.hasCondition() && !skipParent) {
-            return this.parentConditionallyHidden();
-        }
-        // Return if we are not conditionally visible (conditionallyHidden)
-        if (!this.conditionallyVisible()) {
-            return true;
-        }
-        if (skipParent) {
-            // Stop recurrsion for the parent checks.
-            return false;
+        // If it has a condition, and is not conditionally visible, then it is conditionally hidden.
+        if (this.hasCondition() && !this.conditionallyVisible()) {
+            this._conditionallyHidden = true;
+            return this._conditionallyHidden;
         }
-        // Check the parent.
-        return this.parentConditionallyHidden();
+        // It is conditionally hidden if its parent is conditionally hidden.
+        this._conditionallyHidden = this.parentConditionallyHidden();
+        return this._conditionallyHidden;
     }
     get currentForm() {
         return this._currentForm;
@@ -3162,6 +3188,9 @@ export default class Component extends Element {
         data = data || this.rootValue;
         flags = flags || {};
         row = row || this.data;
+        if (flags.noCheck) {
+            return true;
+        }
         // 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
@@ -3176,9 +3205,6 @@ export default class Component extends Element {
         if (!flags.fromBlur) {
             this.checkRefreshOn(flags.changes, flags);
         }
-        if (flags.noCheck) {
-            return true;
-        }
         this.checkComponentConditions(data, flags, row);
         if (this.id !== flags.triggeredComponentId) {
             this.calculateComponentValue(data, flags, row);

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

@@ -108,6 +108,7 @@ export default class NestedComponent extends Field {
      * @returns {any} - The component that is located.
      */
     getComponent(path: string): any;
+    componentMatches: {} | undefined;
     /**
      * Return a component provided the Id of the component.
      * @param {string} id - The Id of the component.

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

@@ -308,6 +308,13 @@ export default class NestedComponent extends Field {
      * @returns {any} - The component that is located.
      */
     getComponent(path) {
+        // If the component is found
+        if (!this.componentMatches) {
+            this.componentMatches = {};
+        }
+        if (this.componentMatches && this.componentMatches[path]) {
+            return this.componentMatches[path];
+        }
         path = FormioUtils.getStringFromComponentPath(path);
         const matches = {
             path: undefined,
@@ -332,7 +339,8 @@ export default class NestedComponent extends Field {
                 return match;
             });
         });
-        return FormioUtils.getBestMatch(matches)?.instance;
+        this.componentMatches[path] = FormioUtils.getBestMatch(matches)?.instance;
+        return this.componentMatches[path];
     }
     /**
      * Return a component provided the Id of the component.
@@ -659,7 +667,7 @@ export default class NestedComponent extends Field {
     }
     validationProcessor({ scope, data, row, instance, paths }, flags) {
         const { dirty } = flags;
-        if (this.root.hasExtraPages && this.page !== this.root.page) {
+        if (this.root && this.root.hasSubWizards && this.page !== this.root.page) {
             instance = this.componentsMap?.hasOwnProperty(paths.dataPath)
                 ? this.componentsMap[paths.dataPath]
                 : this.getComponent(paths.dataPath);
@@ -808,7 +816,7 @@ export default class NestedComponent extends Field {
             return false;
         }
         if (component.type === 'components') {
-            if (component.tree && component.hasValue(value)) {
+            if ((component.tree || component.hasInput) && component.hasValue(value)) {
                 return component.setValue(_.get(value, component.key), flags);
             }
             return component.setValue(value, flags);

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

@@ -33,7 +33,7 @@ export default class FileComponent extends Field {
     get dataReady(): Promise<any>;
     loadImage(fileInfo: any): any;
     get emptyValue(): never[];
-    getValueAsString(value: any): any;
+    getValueAsString(value: any, options: any): any;
     get defaultValue(): any[];
     get hasTypes(): any;
     _fileBrowseHidden: any;

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

@@ -103,7 +103,12 @@ export default class FileComponent extends Field {
     get emptyValue() {
         return [];
     }
-    getValueAsString(value) {
+    getValueAsString(value, options) {
+        if (options?.review && !this.component.uploadOnly) {
+            return _.map(value, (val, index) => {
+                return `<a href="${val.url || '#'}" target="_blank" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;
+            }).join(', ');
+        }
         if (_.isArray(value)) {
             return _.map(value, 'originalName').join(', ');
         }

package/lib/mjs/components/form/Form.d.ts

@@ -98,8 +98,6 @@ export default class FormComponent extends Component {
      * @returns {void}
      */
     onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
-    areAllComponentsEmpty(data: any): boolean;
-    conditionallyHidden(): boolean;
     updateSubFormVisibility(): void;
     /**
      * Determines if this form is a Nested Wizard

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

@@ -96,6 +96,9 @@ export default class FormComponent extends Component {
         }
         return this.createSubForm();
     }
+    shouldConditionallyClearOnPristine() {
+        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();
+    }
     get dataReady() {
         return this.subFormReady || Promise.resolve();
     }
@@ -289,11 +292,13 @@ export default class FormComponent extends Component {
                     }
                     this.subForm.attach(element);
                     this.valueChanged = this.hasSetValue;
-                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {
-                        this.setDefaultValue();
-                    }
-                    else {
-                        this.restoreValue();
+                    if (!this.shouldConditionallyClear()) {
+                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {
+                            this.setDefaultValue();
+                        }
+                        else {
+                            this.restoreValue();
+                        }
                     }
                 }
                 if (!this.builderMode && this.component.modalEdit) {
@@ -409,7 +414,7 @@ export default class FormComponent extends Component {
                 this.component.components = this.subForm._form?.components;
                 this.component.display = this.subForm._form?.display;
                 this.subForm.on('change', () => {
-                    if (this.subForm) {
+                    if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
                         this.triggerChange({
                             noEmit: true
@@ -669,20 +674,7 @@ export default class FormComponent extends Component {
         this.subForm.setValue(submission, flags);
     }
     isEmpty(value = this.dataValue) {
-        return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value?.data) && !value?._id);
-    }
-    areAllComponentsEmpty(data) {
-        let res = true;
-        if (this.subForm) {
-            this.subForm.everyComponent((comp) => {
-                const componentValue = _.get(data, comp.key);
-                res &= comp.isEmpty(componentValue);
-            });
-        }
-        else {
-            res = false;
-        }
-        return res;
+        return value === null || _.isEqual(value, this.emptyValue);
     }
     getValue() {
         if (this.subForm) {

package/lib/mjs/components/select/Select.d.ts

@@ -89,6 +89,7 @@ export default class SelectComponent extends ListComponent {
     disableInfiniteScroll(): void;
     set serverCount(value: any);
     get serverCount(): any;
+    shouldResetChoicesItems(items: any): boolean;
     setItems(items: any, fromSearch: any): void;
     selectItems: any;
     set downloadedResources(value: any);
@@ -126,7 +127,6 @@ export default class SelectComponent extends ListComponent {
     get isLoadingAvailable(): any;
     onScroll(): void;
     attachRefreshOnBlur(): void;
-    addPlaceholderItem(placeholderValue: any): void;
     update(): void;
     addCurrentChoices(values: any, items: any, keyValue: any): any;
     getValueAsString(data: any, options: any): any;

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

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
-import Input from '../_classes/input/Input';
 import Form from '../../Form';
 import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils';
 import Choices from '../../utils/ChoicesWrapper';
@@ -360,6 +359,18 @@ export default class SelectComponent extends ListComponent {
         this.downloadedResources.serverCount = this.downloadedResources.length;
         this.serverCount = this.downloadedResources.length;
     }
+    shouldResetChoicesItems(items) {
+        if (this.choices._store.choices.length !== items.length) {
+            return true;
+        }
+        for (let item of items) {
+            const choicesItem = this.choices._store.choices.find((i) => i.label === item.label);
+            if (!choicesItem) {
+                return true;
+            }
+        }
+        return false;
+    }
     /* eslint-disable max-statements */
     setItems(items, fromSearch) {
         this.selectItems = items;
@@ -445,7 +456,7 @@ export default class SelectComponent extends ListComponent {
             this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, _.get(item, this.component.idPath, String(index)));
         });
         if (this.choices) {
-            this.choices.setChoices(this.selectOptions, 'value', 'label', true);
+            this.choices.setChoices(this.selectOptions, 'value', 'label', true, true, !fromSearch && this.shouldResetChoicesItems(this.selectOptions));
         }
         else if (this.loading) {
             // Re-attach select input.
@@ -773,8 +784,8 @@ export default class SelectComponent extends ListComponent {
             removeItemButton: this.component.disabled ? false : _.get(this.component, 'removeItemButton', true),
             itemSelectText: '',
             classNames: {
-                containerOuter: 'choices form-group formio-choices',
-                containerInner: this.transform('class', 'form-control ui fluid selection dropdown')
+                containerOuter: ['choices', 'form-group', 'formio-choices'],
+                containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),
             },
             addItemText: false,
             allowHTML: true,
@@ -802,6 +813,7 @@ export default class SelectComponent extends ListComponent {
                 }),
             valueComparer: _.isEqual,
             resetScrollPosition: false,
+            duplicateItemsAllowed: false,
             ...customOptions,
         };
     }
@@ -868,7 +880,7 @@ export default class SelectComponent extends ListComponent {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            Input.prototype.addFocusBlurEvents.call(this, this.focusableElement);
+            this.addFocusBlurEvents(this.choices.input.element);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
@@ -934,12 +946,6 @@ export default class SelectComponent extends ListComponent {
                 this.positionDropdown();
             });
         }
-        if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {
-            this.addPlaceholderItem(choicesOptions.placeholderValue);
-            this.addEventListener(input, 'removeItem', () => {
-                this.addPlaceholderItem(choicesOptions.placeholderValue);
-            });
-        }
         // Add value options.
         this.addValueOptions();
         this.setChoicesValue(this.dataValue);
@@ -1025,20 +1031,6 @@ export default class SelectComponent extends ListComponent {
             });
         }
     }
-    addPlaceholderItem(placeholderValue) {
-        const items = this.choices._store.activeItems;
-        if (!items.length) {
-            this.choices._addItem({
-                value: '',
-                label: placeholderValue,
-                choiceId: 0,
-                groupId: -1,
-                customProperties: null,
-                placeholder: true,
-                keyCode: null
-            });
-        }
-    }
     /* eslint-enable max-statements */
     update() {
         if (this.component.dataSrc === 'custom') {

package/lib/mjs/components/tags/Tags.d.ts

@@ -24,4 +24,4 @@ export default class TagsComponent extends Input {
     getValueAsString(value: any): any;
 }
 import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';

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

@@ -1,6 +1,6 @@
 import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';
 export default class TagsComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -127,7 +127,7 @@ export default class TagsComponent extends Input {
         const changed = super.setValue(value, flags);
         if (this.choices) {
             let dataValue = this.dataValue;
-            this.choices.removeActiveItems();
+            this.choices.clearStore();
             if (dataValue) {
                 if (typeof dataValue === 'string') {
                     dataValue = dataValue.split(this.delimiter).filter(result => result);

package/lib/mjs/formio.form.js

@@ -56,6 +56,7 @@ export function registerModule(mod, defaultFn = null, options = {}) {
             case 'templates':
                 for (const framework of Object.keys(mod.templates)) {
                     Formio.Templates.extendTemplate(framework, mod.templates[framework]);
+                    Formio.Templates.defaultTemplates = _.defaults(mod.templates[framework], Formio.Templates.defaultTemplates);
                 }
                 if (mod.templates[current]) {
                     Formio.Templates.current = mod.templates[current];

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

@@ -1,38 +1,17 @@
-export namespace KEY_CODES {
-    let BACK_KEY: number;
-    let DELETE_KEY: number;
-    let TAB_KEY: number;
-    let ENTER_KEY: number;
-    let A_KEY: number;
-    let ESC_KEY: number;
-    let UP_KEY: number;
-    let DOWN_KEY: number;
-    let PAGE_UP_KEY: number;
-    let PAGE_DOWN_KEY: number;
-}
 export default ChoicesWrapper;
 declare class ChoicesWrapper extends Choices {
     constructor(...args: any[]);
-    _onTabKey({ activeItems, hasActiveDropdown }: {
-        activeItems: any;
-        hasActiveDropdown: any;
-    }): void;
+    _onTabKey(): void;
     isDirectionUsing: boolean;
     shouldOpenDropDown: boolean;
     _onTouchEnd(event: any): void;
-    _handleButtonAction(activeItems: any, element: any): void;
-    _onEnterKey(args: any): void;
+    _onEnterKey(...args: any[]): void;
     _onDirectionKey(...args: any[]): void;
     timeout: NodeJS.Timeout | undefined;
     _selectHighlightedChoice(): void;
     _onKeyDown(event: any): void;
-    onSelectValue({ event, activeItems, hasActiveDropdown }: {
-        event: any;
-        activeItems: any;
-        hasActiveDropdown: any;
-    }): void;
+    onSelectValue(event: any, hasActiveDropdown: any): void;
     showDropdown(...args: any[]): void;
     hideDropdown(...args: any[]): void;
-    _onBlur(...args: any[]): void;
 }
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';