@progress/kendo-vue-dropdowns 3.14.2 → 3.15.0-dev.202309281301

package/dist/esm/MultiSelect/MultiSelectProps.d.ts

@@ -279,4 +279,12 @@ export interface MultiSelectProps extends FormComponentProps {
      * Fires when a MultiSelect sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
      */
     groupStickyHeaderItemRender?: any;
+    /**
+     * Provides different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
 }

package/dist/esm/MultiSelectTree/MultiSelectTree.js

@@ -24,19 +24,24 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { classNames, noop, getTabIndex, Keys, guid, kendoThemeMaps, Icon, getRef, setRef, validatePackage, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { classNames, noop, getTabIndex, Keys, guid, kendoThemeMaps, Icon, getRef, setRef, validatePackage, templateRendering, getListeners, getTemplate, canUseDOM } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { TreeView } from '@progress/kendo-vue-treeview';
 import { packageMetadata } from './../package-metadata.js';
 import { getItemValue, areSame, matchTags } from '../common/utils.js';
 import { ListNoData } from './../DropDownTree/ListNoData.js';
-import { messages, nodata } from './../messages/main.js';
+import { messages, nodata, adaptiveModeFooterApply, adaptiveModeFooterCancel } from './../messages/main.js';
 import { FloatingLabel } from '@progress/kendo-vue-labels';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
 import { TagList } from '../MultiSelect/TagList.js';
 import { ClearButton } from '../common/ClearButton.js';
 import { ListFilter } from '../common/ListFilter.js';
 import { getMultiSelectTreeValue } from './utils.js';
+import { MOBILE_SMALL_DEVICE, MOBILE_MEDIUM_DEVICE } from '../common/constants.js';
+import { ActionSheet } from '@progress/kendo-vue-layout';
+import { xIcon } from '@progress/kendo-svg-icons';
+import DropDownBase from '../common/DropDownBase.js';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -169,7 +174,15 @@ var MultiSelectTreeVue2 = {
     tag: [String, Function, Object],
     header: [String, Function, Object],
     footer: [String, Function, Object],
-    listNoData: [String, Function, Object]
+    listNoData: [String, Function, Object],
+    adaptive: {
+      type: Boolean,
+      default: undefined
+    },
+    adaptiveTitle: {
+      type: String,
+      default: undefined
+    }
   },
   inject: {
     kendoLocalizationService: {
@@ -177,7 +190,9 @@ var MultiSelectTreeVue2 = {
     }
   },
   created: function created() {
+    this.observer = null;
     validatePackage(packageMetadata);
+    this.base = new DropDownBase(this);
     this.componentGuid = guid();
     this.anchor = guid();
   },
@@ -188,10 +203,31 @@ var MultiSelectTreeVue2 = {
       focusedState: false,
       filterState: '',
       currentValue: [],
-      popupWidth: '200px'
+      popupWidth: '200px',
+      windowWidth: 0,
+      initialAdaptiveRenderingValues: undefined
     };
   },
   computed: {
+    animationStyles: {
+      get: function get() {
+        return this.windowWidth <= MOBILE_SMALL_DEVICE ? {
+          top: 0,
+          width: '100%',
+          height: '100%'
+        } : undefined;
+      }
+    },
+    classNameAdaptive: {
+      get: function get() {
+        return this.windowWidth <= MOBILE_SMALL_DEVICE ? 'k-adaptive-actionsheet k-actionsheet-fullscreen' : 'k-adaptive-actionsheet k-actionsheet-bottom';
+      }
+    },
+    adaptiveState: {
+      get: function get() {
+        return this.windowWidth <= MOBILE_MEDIUM_DEVICE && this.$props.adaptive;
+      }
+    },
     isOpen: function isOpen() {
       return this.opened !== undefined ? this.opened : this.openState;
     },
@@ -203,15 +239,39 @@ var MultiSelectTreeVue2 = {
     },
     tagsToRenderRef: function tagsToRenderRef() {
       var _this = this;
-      return this.tags === undefined ? this.computedValue.map(function (item) {
-        return {
-          text: getItemValue(item, _this.$props.textField),
-          data: [item]
-        };
-      }) : __spreadArray([], this.tags, true);
+      if (this.initialAdaptiveRenderingValues === undefined) {
+        return this.tags === undefined ? this.computedValue.map(function (item) {
+          return {
+            text: getItemValue(item, _this.$props.textField),
+            data: [item]
+          };
+        }) : __spreadArray([], this.tags, true);
+      } else {
+        var valuesBeforeAdaptiveRendering = this.initialAdaptiveRenderingValues;
+        return valuesBeforeAdaptiveRendering.length > 0 && valuesBeforeAdaptiveRendering.map(function (item) {
+          return {
+            text: getItemValue(item, _this.$props.textField),
+            data: [item]
+          };
+        });
+      }
+    }
+  },
+  watch: {
+    // This watch gets the state of the data when the adaptive mode is activated
+    isOpen: function isOpen(newValue) {
+      if (newValue && this.value) {
+        this.initialAdaptiveRenderingValues = __spreadArray([], this.value, true);
+      } else {
+        this.initialAdaptiveRenderingValues = undefined;
+      }
     }
   },
   mounted: function mounted() {
+    this.observer = canUseDOM && new ResizeObserver(this.calculateMedia);
+    if ((document === null || document === void 0 ? void 0 : document.body) && this.observer) {
+      this.observer.observe(document.body);
+    }
     this.elementRef = getRef(this, 'kendoAnchor', this.anchor);
     this.inputRef = getRef(this, 'input');
     this.selectRef = getRef(this, 'select');
@@ -220,6 +280,11 @@ var MultiSelectTreeVue2 = {
     this.popupRef = getRef(this, 'popup');
     this.calculatePopupWidth();
   },
+  destroyed: !!isV3 ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
   updated: function updated() {
     this.inputRef = getRef(this, 'input');
     this.treeViewRef = getRef(this, 'treeView');
@@ -238,7 +303,6 @@ var MultiSelectTreeVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this2 = this;
     var _a, _b;
     var _this = this;
     var h = gh || createElement;
@@ -259,7 +323,8 @@ var MultiSelectTreeVue2 = {
       valid = _c.valid,
       value = _c.value,
       required = _c.required,
-      validityStyles = _c.validityStyles;
+      validityStyles = _c.validityStyles,
+      adaptiveTitle = _c.adaptiveTitle;
     var tabIndex = getTabIndex(this.$props.tabIndex, disabled);
     var localization = provideLocalizationService(this);
     var validity = getValidity({
@@ -268,6 +333,7 @@ var MultiSelectTreeVue2 = {
       required: required
     }, this.hasValue);
     var dir = this.$props.dir; // useRtl(elementRef,this.$props.dir);
+    var renderAdaptive = this.adaptiveState;
     var itemTemplate = templateRendering.call(this, this.item, getListeners.call(this));
     var tagTemplate = templateRendering.call(this, this.tag, getListeners.call(this));
     var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
@@ -296,7 +362,193 @@ var MultiSelectTreeVue2 = {
       size = _e.size,
       rounded = _e.rounded,
       fillMode = _e.fillMode;
-    var multiselecttree = h("span", {
+    var adaptiveActionSheetHeaderTemplateDef = function adaptiveActionSheetHeaderTemplateDef() {
+      return [h("div", {
+        "class": "k-actionsheet-titlebar-group k-hbox"
+      }, [h("div", {
+        "class": "k-actionsheet-title"
+      }, [h("div", {
+        "class": "k-text-center"
+      }, [adaptiveTitle]), h("div", {
+        "class": "k-actionsheet-subtitle k-text-center"
+      }, [placeholder])]), h("div", {
+        "class": "k-actionsheet-actions"
+      }, [h(KButton, {
+        tabindex: 5,
+        attrs: this.v3 ? undefined : {
+          tabindex: 5,
+          "aria-label": "Cancel",
+          "aria-disabled": "false",
+          type: "button",
+          fillMode: "flat",
+          icon: "x",
+          svgIcon: xIcon
+        },
+        "aria-label": "Cancel",
+        "aria-disabled": "false",
+        type: "button",
+        fillMode: "flat",
+        onClick: _this.onCancel,
+        on: this.v3 ? undefined : {
+          "click": _this.onCancel
+        },
+        icon: "x",
+        svgIcon: xIcon
+      })])]), h("div", {
+        "class": "k-actionsheet-titlebar-group k-actionsheet-filter"
+      }, [_this.$props.filterable &&
+      // @ts-ignore
+      h(ListFilter, {
+        value: _this.$props.filter === undefined ? _this.filterState : _this.$props.filter,
+        attrs: this.v3 ? undefined : {
+          value: _this.$props.filter === undefined ? _this.filterState : _this.$props.filter,
+          size: size,
+          rounded: rounded,
+          fillMode: fillMode
+        },
+        ref: setRef(_this, 'input'),
+        onChange: _this.onFilterChange,
+        on: this.v3 ? undefined : {
+          "change": _this.onFilterChange,
+          "keydown": _this.onInputKeyDown,
+          "focus": _this.onFocus,
+          "blur": _this.onBlur
+        },
+        onKeydown: _this.onInputKeyDown,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode,
+        onFocus: _this.onFocus,
+        onBlur: _this.onBlur
+      })])];
+    };
+    var adaptiveActionSheetHeaderTemplate = templateRendering.call(this, adaptiveActionSheetHeaderTemplateDef, getListeners.call(this));
+    var adaptiveActionSheetFooterTemplateDef = function adaptiveActionSheetFooterTemplateDef() {
+      var cancelText = localization.toLanguageString(adaptiveModeFooterCancel, messages[adaptiveModeFooterCancel]);
+      var applyText = localization.toLanguageString(adaptiveModeFooterApply, messages[adaptiveModeFooterApply]);
+      return [h(KButton, {
+        size: "large",
+        attrs: this.v3 ? undefined : {
+          size: "large",
+          "aria-label": cancelText,
+          "aria-disabled": "false",
+          type: "button"
+        },
+        "aria-label": cancelText,
+        "aria-disabled": "false",
+        type: "button",
+        onClick: _this.onCancel,
+        on: this.v3 ? undefined : {
+          "click": _this.onCancel
+        }
+      }, [cancelText]), h(KButton, {
+        themeColor: "primary",
+        attrs: this.v3 ? undefined : {
+          themeColor: "primary",
+          size: "large",
+          "aria-label": applyText,
+          "aria-disabled": "false",
+          type: "button"
+        },
+        size: "large",
+        "aria-label": applyText,
+        "aria-disabled": "false",
+        type: "button",
+        onClick: _this.closePopup,
+        on: this.v3 ? undefined : {
+          "click": _this.closePopup
+        }
+      }, [applyText])];
+    };
+    var adaptiveActionSheetFooterTemplate = templateRendering.call(this, adaptiveActionSheetFooterTemplateDef, getListeners.call(this));
+    var adaptiveActionSheetContentTemplateDef = function adaptiveActionSheetContentTemplateDef() {
+      var headerToRender = _this.base.getTemplateDef.call(_this, header, h);
+      var footerToRender = _this.base.getTemplateDef.call(_this, footer, h);
+      return [headerToRender && h("div", {
+        "class": "k-list-header"
+      }, [headerToRender]), dataItems.length > 0 ?
+      // @ts-ignore
+      h(TreeView, {
+        ref: setRef(_this, 'treeView'),
+        tabIndex: tabIndex,
+        attrs: this.v3 ? undefined : {
+          tabIndex: tabIndex,
+          dataItems: dataItems,
+          focusIdField: dataItemKey,
+          textField: _this.$props.textField,
+          checkField: checkField,
+          checkIndeterminateField: checkIndeterminateField,
+          expandField: _this.$props.expandField,
+          childrenField: subItemsField,
+          expandIcons: true,
+          checkboxes: true,
+          size: 'large',
+          item: itemTemplate
+        },
+        dataItems: dataItems,
+        focusIdField: dataItemKey,
+        textField: _this.$props.textField,
+        checkField: checkField,
+        checkIndeterminateField: checkIndeterminateField,
+        expandField: _this.$props.expandField,
+        childrenField: subItemsField,
+        expandIcons: true,
+        onItemclick: _this.onChange,
+        on: this.v3 ? undefined : {
+          "itemclick": _this.onChange,
+          "checkchange": _this.onChange,
+          "expandchange": _this.onExpand,
+          "focus": _this.onFocus,
+          "blur": _this.onBlur,
+          "keydown": _this.onWrapperKeyDown
+        },
+        onCheckchange: _this.onChange,
+        onExpandchange: _this.onExpand,
+        onFocus: _this.onFocus,
+        onBlur: _this.onBlur,
+        onKeydown: _this.onWrapperKeyDown,
+        checkboxes: true,
+        size: 'large',
+        item: itemTemplate
+      }) : noDataTemplate, footerToRender && h("div", {
+        className: "k-list-footer",
+        attrs: this.v3 ? undefined : {
+          className: "k-list-footer"
+        }
+      }, [footerToRender])];
+    };
+    var adaptiveActionSheetContentTemplate = templateRendering.call(this, adaptiveActionSheetContentTemplateDef, getListeners.call(this));
+    var renderAdaptiveListContainer = function renderAdaptiveListContainer() {
+      return h(ActionSheet, {
+        expand: this.isOpen,
+        attrs: this.v3 ? undefined : {
+          expand: this.isOpen,
+          animation: true,
+          animationStyles: this.animationStyles,
+          className: this.classNameAdaptive,
+          footerClassName: 'k-actions k-actions-stretched',
+          contentClassName: '!k-overflow-hidden',
+          header: adaptiveActionSheetHeaderTemplate,
+          content: adaptiveActionSheetContentTemplate,
+          footer: adaptiveActionSheetFooterTemplate,
+          navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
+        },
+        animation: true,
+        animationStyles: this.animationStyles,
+        className: this.classNameAdaptive,
+        footerClassName: 'k-actions k-actions-stretched',
+        contentClassName: '!k-overflow-hidden',
+        header: adaptiveActionSheetHeaderTemplate,
+        content: adaptiveActionSheetContentTemplate,
+        footer: adaptiveActionSheetFooterTemplate,
+        onClose: this.onCancel,
+        on: this.v3 ? undefined : {
+          "close": this.onCancel
+        },
+        navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
+      });
+    };
+    var component = h("span", {
       ref: setRef(this, 'kendoAnchor', this.anchor),
       "class": classNames('k-multiselecttree k-input', this.$props.className, (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-focus'] = this.focusedState && !disabled, _a['k-invalid'] = !isValid, _a['k-disabled'] = disabled, _a['k-loading'] = this.$props.loading, _a['k-required'] = required, _a)),
       tabIndex: tabIndex,
@@ -368,7 +620,7 @@ var MultiSelectTreeVue2 = {
       tagsRounded: rounded,
       size: size,
       fillMode: fillMode
-    }) : !this.hasValue && h("span", {
+    }) : h("span", {
       "class": "k-input-inner",
       role: 'combobox',
       attrs: this.v3 ? undefined : {
@@ -424,7 +676,7 @@ var MultiSelectTreeVue2 = {
       }
     })]),
     // @ts-ignore function children
-    h(Popup, {
+    !renderAdaptive && h(Popup, {
       style: {
         width: this.popupWidth,
         direction: dir
@@ -451,115 +703,45 @@ var MultiSelectTreeVue2 = {
       onClose: this.onPopupClosed,
       appendTo: popupSettings.appendTo,
       ref: setRef(this, 'popup')
-    }, this.v3 ? function () {
-      return [_this2.$props.filterable &&
-      // @ts-ignore
-      h(ListFilter, {
-        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
-        attrs: _this2.v3 ? undefined : {
-          value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
-          size: size,
-          rounded: rounded,
-          fillMode: fillMode
-        },
-        ref: setRef(_this2, 'input'),
-        onChange: _this2.onFilterChange,
-        on: _this2.v3 ? undefined : {
-          "change": _this2.onFilterChange,
-          "keydown": _this2.onInputKeyDown,
-          "focus": _this2.onFocus,
-          "blur": _this2.onBlur
-        },
-        onKeydown: _this2.onInputKeyDown,
-        size: size,
-        rounded: rounded,
-        fillMode: fillMode,
-        onFocus: _this2.onFocus,
-        onBlur: _this2.onBlur
-      }), header && h("div", {
-        "class": "k-list-header"
-      }, [header]), dataItems.length > 0 ?
-      // @ts-ignore
-      h(TreeView, {
-        ref: setRef(_this2, 'treeView'),
-        tabIndex: tabIndex,
-        attrs: _this2.v3 ? undefined : {
-          tabIndex: tabIndex,
-          dataItems: dataItems,
-          focusIdField: dataItemKey,
-          textField: _this2.$props.textField,
-          checkField: checkField,
-          checkIndeterminateField: checkIndeterminateField,
-          expandField: _this2.$props.expandField,
-          childrenField: subItemsField,
-          expandIcons: true,
-          checkboxes: true,
-          size: size,
-          item: itemTemplate
-        },
-        dataItems: dataItems,
-        focusIdField: dataItemKey,
-        textField: _this2.$props.textField,
-        checkField: checkField,
-        checkIndeterminateField: checkIndeterminateField,
-        expandField: _this2.$props.expandField,
-        childrenField: subItemsField,
-        expandIcons: true,
-        onItemclick: _this2.onChange,
-        on: _this2.v3 ? undefined : {
-          "itemclick": _this2.onChange,
-          "checkchange": _this2.onChange,
-          "expandchange": _this2.onExpand,
-          "focus": _this2.onFocus,
-          "blur": _this2.onBlur,
-          "keydown": _this2.onWrapperKeyDown
-        },
-        onCheckchange: _this2.onChange,
-        onExpandchange: _this2.onExpand,
-        onFocus: _this2.onFocus,
-        onBlur: _this2.onBlur,
-        onKeydown: _this2.onWrapperKeyDown,
-        checkboxes: true,
-        size: size,
-        item: itemTemplate
-      }) : noDataTemplate, footer && h("div", {
-        "class": "k-list-footer"
-      }, [footer])];
-    } : [_this2.$props.filterable && h(ListFilter, {
-      value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
-      attrs: _this2.v3 ? undefined : {
-        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+    }, [this.$props.filterable &&
+    // @ts-ignore
+    h(ListFilter, {
+      value: this.$props.filter === undefined ? this.filterState : this.$props.filter,
+      attrs: this.v3 ? undefined : {
+        value: this.$props.filter === undefined ? this.filterState : this.$props.filter,
         size: size,
         rounded: rounded,
         fillMode: fillMode
       },
-      ref: setRef(_this2, 'input'),
-      onChange: _this2.onFilterChange,
-      on: _this2.v3 ? undefined : {
-        "change": _this2.onFilterChange,
-        "keydown": _this2.onInputKeyDown,
-        "focus": _this2.onFocus,
-        "blur": _this2.onBlur
+      ref: setRef(this, 'input'),
+      onChange: this.onFilterChange,
+      on: this.v3 ? undefined : {
+        "change": this.onFilterChange,
+        "keydown": this.onInputKeyDown,
+        "focus": this.onFocus,
+        "blur": this.onBlur
       },
-      onKeydown: _this2.onInputKeyDown,
+      onKeydown: this.onInputKeyDown,
       size: size,
       rounded: rounded,
       fillMode: fillMode,
-      onFocus: _this2.onFocus,
-      onBlur: _this2.onBlur
+      onFocus: this.onFocus,
+      onBlur: this.onBlur
     }), header && h("div", {
       "class": "k-list-header"
-    }, [header]), dataItems.length > 0 ? h(TreeView, {
-      ref: setRef(_this2, 'treeView'),
+    }, [header]), dataItems.length > 0 ?
+    // @ts-ignore
+    h(TreeView, {
+      ref: setRef(this, 'treeView'),
       tabIndex: tabIndex,
-      attrs: _this2.v3 ? undefined : {
+      attrs: this.v3 ? undefined : {
         tabIndex: tabIndex,
         dataItems: dataItems,
         focusIdField: dataItemKey,
-        textField: _this2.$props.textField,
+        textField: this.$props.textField,
         checkField: checkField,
         checkIndeterminateField: checkIndeterminateField,
-        expandField: _this2.$props.expandField,
+        expandField: this.$props.expandField,
         childrenField: subItemsField,
         expandIcons: true,
         checkboxes: true,
@@ -568,32 +750,36 @@ var MultiSelectTreeVue2 = {
       },
       dataItems: dataItems,
       focusIdField: dataItemKey,
-      textField: _this2.$props.textField,
+      textField: this.$props.textField,
       checkField: checkField,
       checkIndeterminateField: checkIndeterminateField,
-      expandField: _this2.$props.expandField,
+      expandField: this.$props.expandField,
       childrenField: subItemsField,
       expandIcons: true,
-      onItemclick: _this2.onChange,
-      on: _this2.v3 ? undefined : {
-        "itemclick": _this2.onChange,
-        "checkchange": _this2.onChange,
-        "expandchange": _this2.onExpand,
-        "focus": _this2.onFocus,
-        "blur": _this2.onBlur,
-        "keydown": _this2.onWrapperKeyDown
+      onItemclick: this.onChange,
+      on: this.v3 ? undefined : {
+        "itemclick": this.onChange,
+        "checkchange": this.onChange,
+        "expandchange": this.onExpand,
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "keydown": this.onWrapperKeyDown
       },
-      onCheckchange: _this2.onChange,
-      onExpandchange: _this2.onExpand,
-      onFocus: _this2.onFocus,
-      onBlur: _this2.onBlur,
-      onKeydown: _this2.onWrapperKeyDown,
+      onCheckchange: this.onChange,
+      onExpandchange: this.onExpand,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      onKeydown: this.onWrapperKeyDown,
       checkboxes: true,
       size: size,
       item: itemTemplate
     }) : noDataTemplate, footer && h("div", {
       "class": "k-list-footer"
     }, [footer])])]);
+    // The following one combines the default rendering of the MultiSelect and the Adaptive rendering.
+    // This is needed because of Vue 2 specifics
+    var multiselecttree = [component, renderAdaptive && renderAdaptiveListContainer.call(this)];
+    var multiselecttreeToRender = isV3 ? multiselecttree : this.$props.adaptive ? h("span", [multiselecttree]) : component;
     return label ?
     // @ts-ignore function children
     h(FloatingLabel, {
@@ -614,10 +800,36 @@ var MultiSelectTreeVue2 = {
       editorId: id,
       dir: dir
     }, this.v3 ? function () {
-      return [multiselecttree];
-    } : [multiselecttree]) : multiselecttree;
+      return [multiselecttreeToRender];
+    } : [multiselecttreeToRender]) : multiselecttreeToRender;
   },
   methods: {
+    clearFilter: function clearFilter(event) {
+      this.onFilterChange(__assign(__assign({}, event), {
+        target: __assign(__assign({}, event.target), {
+          value: ''
+        })
+      }));
+    },
+    onCancel: function onCancel(event) {
+      var dropdownEvent = {
+        event: event,
+        target: this
+      };
+      var changeEvent = __assign({
+        items: [],
+        operation: 'toggle',
+        value: this.initialAdaptiveRenderingValues
+      }, dropdownEvent);
+      this.$emit('change', changeEvent);
+      this.closePopup(event);
+    },
+    calculateMedia: function calculateMedia(entries) {
+      for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+        var entry = entries_1[_i];
+        this.windowWidth = entry.target.clientWidth;
+      }
+    },
     calculatePopupWidth: function calculatePopupWidth() {
       if (this.elementRef) {
         this.popupWidth = this.popupSettings.width !== undefined ? this.popupSettings.width : this.elementRef.offsetWidth + 'px';
@@ -686,6 +898,7 @@ var MultiSelectTreeVue2 = {
       }
     },
     closePopup: function closePopup(event) {
+      this.clearFilter(event);
       if (this.isOpen) {
         var closeEvent = __assign({}, event);
         this.$emit('close', closeEvent);
@@ -740,7 +953,7 @@ var MultiSelectTreeVue2 = {
       }
     },
     onBlur: function onBlur(event) {
-      if (this.focusedState && !this.skipFocusRef) {
+      if (this.focusedState && !this.skipFocusRef && !this.adaptiveState) {
         this.focusedTagState = undefined;
         this.focusedState = false;
         var ev = {
@@ -860,7 +1073,11 @@ var MultiSelectTreeVue2 = {
         this.switchFocus(function () {
           _this.focusElement(_this.elementRef);
         });
-        this.closePopup(event);
+        if (keyCode === Keys.esc && this.adaptiveState) {
+          this.onCancel(event);
+        } else {
+          this.closePopup(event);
+        }
       }
       if (altKey || keyCode !== Keys.up && keyCode !== Keys.down) {
         return;
@@ -879,6 +1096,7 @@ var MultiSelectTreeVue2 = {
       };
       this.changeValue(ev, [], 'clear');
       this.closePopup(ev);
+      this.filterState = '';
       event.preventDefault();
     },
     onTagDelete: function onTagDelete(itemsToRemove, event) {

package/dist/esm/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -311,4 +311,12 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline' | string;
+    /**
+     * Provides different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
 }