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

package/dist/npm/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/npm/MultiSelectTree/MultiSelectTree.js

@@ -39,10 +39,15 @@ var utils_1 = require("../common/utils");
 var ListNoData_1 = require("./../DropDownTree/ListNoData");
 var main_1 = require("./../messages/main");
 var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var TagList_1 = require("../MultiSelect/TagList");
 var ClearButton_1 = require("../common/ClearButton");
 var ListFilter_1 = require("../common/ListFilter");
 var utils_2 = require("./utils");
+var constants_1 = require("../common/constants");
+var kendo_vue_layout_1 = require("@progress/kendo-vue-layout");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var DropDownBase_1 = require("../common/DropDownBase");
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
   roundedMap = kendo_vue_common_1.kendoThemeMaps.roundedMap;
@@ -175,7 +180,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: {
@@ -183,7 +196,9 @@ var MultiSelectTreeVue2 = {
     }
   },
   created: function created() {
+    this.observer = null;
     (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
+    this.base = new DropDownBase_1.default(this);
     this.componentGuid = (0, kendo_vue_common_1.guid)();
     this.anchor = (0, kendo_vue_common_1.guid)();
   },
@@ -194,10 +209,31 @@ var MultiSelectTreeVue2 = {
       focusedState: false,
       filterState: '',
       currentValue: [],
-      popupWidth: '200px'
+      popupWidth: '200px',
+      windowWidth: 0,
+      initialAdaptiveRenderingValues: undefined
     };
   },
   computed: {
+    animationStyles: {
+      get: function get() {
+        return this.windowWidth <= constants_1.MOBILE_SMALL_DEVICE ? {
+          top: 0,
+          width: '100%',
+          height: '100%'
+        } : undefined;
+      }
+    },
+    classNameAdaptive: {
+      get: function get() {
+        return this.windowWidth <= constants_1.MOBILE_SMALL_DEVICE ? 'k-adaptive-actionsheet k-actionsheet-fullscreen' : 'k-adaptive-actionsheet k-actionsheet-bottom';
+      }
+    },
+    adaptiveState: {
+      get: function get() {
+        return this.windowWidth <= constants_1.MOBILE_MEDIUM_DEVICE && this.$props.adaptive;
+      }
+    },
     isOpen: function isOpen() {
       return this.opened !== undefined ? this.opened : this.openState;
     },
@@ -209,15 +245,39 @@ var MultiSelectTreeVue2 = {
     },
     tagsToRenderRef: function tagsToRenderRef() {
       var _this = this;
-      return this.tags === undefined ? this.computedValue.map(function (item) {
-        return {
-          text: (0, utils_1.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: (0, utils_1.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: (0, utils_1.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 = kendo_vue_common_1.canUseDOM && new ResizeObserver(this.calculateMedia);
+    if ((document === null || document === void 0 ? void 0 : document.body) && this.observer) {
+      this.observer.observe(document.body);
+    }
     this.elementRef = (0, kendo_vue_common_1.getRef)(this, 'kendoAnchor', this.anchor);
     this.inputRef = (0, kendo_vue_common_1.getRef)(this, 'input');
     this.selectRef = (0, kendo_vue_common_1.getRef)(this, 'select');
@@ -226,6 +286,11 @@ var MultiSelectTreeVue2 = {
     this.popupRef = (0, kendo_vue_common_1.getRef)(this, 'popup');
     this.calculatePopupWidth();
   },
+  destroyed: !!isV3 ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
   updated: function updated() {
     this.inputRef = (0, kendo_vue_common_1.getRef)(this, 'input');
     this.treeViewRef = (0, kendo_vue_common_1.getRef)(this, 'treeView');
@@ -244,7 +309,6 @@ var MultiSelectTreeVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this2 = this;
     var _a, _b;
     var _this = this;
     var h = gh || createElement;
@@ -265,7 +329,8 @@ var MultiSelectTreeVue2 = {
       valid = _c.valid,
       value = _c.value,
       required = _c.required,
-      validityStyles = _c.validityStyles;
+      validityStyles = _c.validityStyles,
+      adaptiveTitle = _c.adaptiveTitle;
     var tabIndex = (0, kendo_vue_common_1.getTabIndex)(this.$props.tabIndex, disabled);
     var localization = (0, kendo_vue_intl_1.provideLocalizationService)(this);
     var validity = getValidity({
@@ -274,6 +339,7 @@ var MultiSelectTreeVue2 = {
       required: required
     }, this.hasValue);
     var dir = this.$props.dir; // useRtl(elementRef,this.$props.dir);
+    var renderAdaptive = this.adaptiveState;
     var itemTemplate = kendo_vue_common_1.templateRendering.call(this, this.item, kendo_vue_common_1.getListeners.call(this));
     var tagTemplate = kendo_vue_common_1.templateRendering.call(this, this.tag, kendo_vue_common_1.getListeners.call(this));
     var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
@@ -302,7 +368,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(kendo_vue_buttons_1.Button, {
+        tabindex: 5,
+        attrs: this.v3 ? undefined : {
+          tabindex: 5,
+          "aria-label": "Cancel",
+          "aria-disabled": "false",
+          type: "button",
+          fillMode: "flat",
+          icon: "x",
+          svgIcon: kendo_svg_icons_1.xIcon
+        },
+        "aria-label": "Cancel",
+        "aria-disabled": "false",
+        type: "button",
+        fillMode: "flat",
+        onClick: _this.onCancel,
+        on: this.v3 ? undefined : {
+          "click": _this.onCancel
+        },
+        icon: "x",
+        svgIcon: kendo_svg_icons_1.xIcon
+      })])]), h("div", {
+        "class": "k-actionsheet-titlebar-group k-actionsheet-filter"
+      }, [_this.$props.filterable &&
+      // @ts-ignore
+      h(ListFilter_1.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: (0, kendo_vue_common_1.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 = kendo_vue_common_1.templateRendering.call(this, adaptiveActionSheetHeaderTemplateDef, kendo_vue_common_1.getListeners.call(this));
+    var adaptiveActionSheetFooterTemplateDef = function adaptiveActionSheetFooterTemplateDef() {
+      var cancelText = localization.toLanguageString(main_1.adaptiveModeFooterCancel, main_1.messages[main_1.adaptiveModeFooterCancel]);
+      var applyText = localization.toLanguageString(main_1.adaptiveModeFooterApply, main_1.messages[main_1.adaptiveModeFooterApply]);
+      return [h(kendo_vue_buttons_1.Button, {
+        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(kendo_vue_buttons_1.Button, {
+        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 = kendo_vue_common_1.templateRendering.call(this, adaptiveActionSheetFooterTemplateDef, kendo_vue_common_1.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(kendo_vue_treeview_1.TreeView, {
+        ref: (0, kendo_vue_common_1.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 = kendo_vue_common_1.templateRendering.call(this, adaptiveActionSheetContentTemplateDef, kendo_vue_common_1.getListeners.call(this));
+    var renderAdaptiveListContainer = function renderAdaptiveListContainer() {
+      return h(kendo_vue_layout_1.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: (0, kendo_vue_common_1.setRef)(this, 'kendoAnchor', this.anchor),
       "class": (0, kendo_vue_common_1.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,
@@ -374,7 +626,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 : {
@@ -430,7 +682,7 @@ var MultiSelectTreeVue2 = {
       }
     })]),
     // @ts-ignore function children
-    h(kendo_vue_popup_1.Popup, {
+    !renderAdaptive && h(kendo_vue_popup_1.Popup, {
       style: {
         width: this.popupWidth,
         direction: dir
@@ -457,115 +709,45 @@ var MultiSelectTreeVue2 = {
       onClose: this.onPopupClosed,
       appendTo: popupSettings.appendTo,
       ref: (0, kendo_vue_common_1.setRef)(this, 'popup')
-    }, this.v3 ? function () {
-      return [_this2.$props.filterable &&
-      // @ts-ignore
-      h(ListFilter_1.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: (0, kendo_vue_common_1.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(kendo_vue_treeview_1.TreeView, {
-        ref: (0, kendo_vue_common_1.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_1.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_1.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: (0, kendo_vue_common_1.setRef)(_this2, 'input'),
-      onChange: _this2.onFilterChange,
-      on: _this2.v3 ? undefined : {
-        "change": _this2.onFilterChange,
-        "keydown": _this2.onInputKeyDown,
-        "focus": _this2.onFocus,
-        "blur": _this2.onBlur
+      ref: (0, kendo_vue_common_1.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(kendo_vue_treeview_1.TreeView, {
-      ref: (0, kendo_vue_common_1.setRef)(_this2, 'treeView'),
+    }, [header]), dataItems.length > 0 ?
+    // @ts-ignore
+    h(kendo_vue_treeview_1.TreeView, {
+      ref: (0, kendo_vue_common_1.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,
@@ -574,32 +756,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(kendo_vue_labels_1.FloatingLabel, {
@@ -620,10 +806,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';
@@ -692,6 +904,7 @@ var MultiSelectTreeVue2 = {
       }
     },
     closePopup: function closePopup(event) {
+      this.clearFilter(event);
       if (this.isOpen) {
         var closeEvent = __assign({}, event);
         this.$emit('close', closeEvent);
@@ -746,7 +959,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 = {
@@ -866,7 +1079,11 @@ var MultiSelectTreeVue2 = {
         this.switchFocus(function () {
           _this.focusElement(_this.elementRef);
         });
-        this.closePopup(event);
+        if (keyCode === kendo_vue_common_1.Keys.esc && this.adaptiveState) {
+          this.onCancel(event);
+        } else {
+          this.closePopup(event);
+        }
       }
       if (altKey || keyCode !== kendo_vue_common_1.Keys.up && keyCode !== kendo_vue_common_1.Keys.down) {
         return;
@@ -885,6 +1102,7 @@ var MultiSelectTreeVue2 = {
       };
       this.changeValue(ev, [], 'clear');
       this.closePopup(ev);
+      this.filterState = '';
       event.preventDefault();
     },
     onTagDelete: function onTagDelete(itemsToRemove, event) {

package/dist/npm/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;
 }

package/dist/npm/common/DropDownBase.d.ts

@@ -2,6 +2,11 @@ import VirtualScroll from './VirtualScroll';
 import { Navigation } from './Navigation';
 import { ListItemProps } from './ListItem';
 import { InternalState, DropDownStateBase, Page, DropDownsPopupSettings, VirtualizationSettings } from './settings';
+import { DropDownListAll } from '../DropDownList/DropDownList';
+import { ComboBoxAll } from '../ComboBox/ComboBox';
+import { DropDownTreeAll } from '../DropDownTree/DropDownTree';
+import { MultiSelectAll } from '../MultiSelect/MultiSelect';
+import { CreateElement } from 'vue';
 /**
  * @hidden
  */
@@ -84,4 +89,6 @@ export default class DropDownBase {
     scrollToVirtualItem: (virtual: VirtualizationSettings, selectedItemIndex: number) => void;
     getGroupedDataModernMode: (data: any[], groupField: string) => any[];
     resetGroupStickyHeader: (groupName: string, that: any) => void;
+    getTemplateDef(this: DropDownListAll | ComboBoxAll | DropDownTreeAll | MultiSelectAll, template: string, h: CreateElement): any;
+    getListItemHeight(listItem: HTMLElement): string | 0;
 }