@progress/kendo-react-dropdowns 5.13.0-dev.202304180747 → 5.13.0-dev.202304200559

package/dist/es/DropDownTree/DropDownTree.js

@@ -18,9 +18,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var _this = this;
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, noop, useRtl, getTabIndex, Keys, mapTree, extendDataItem, guid, createPropsContext, kendoThemeMaps, usePropsContext, IconWrap } from '@progress/kendo-react-common';
+import { classNames, noop, useRtl, getTabIndex, Keys, mapTree, extendDataItem, guid, createPropsContext, kendoThemeMaps, usePropsContext, IconWrap, canUseDOM } from '@progress/kendo-react-common';
 import { Popup } from '@progress/kendo-react-popup';
 import { useLocalization } from '@progress/kendo-react-intl';
 import { TreeView } from '@progress/kendo-react-treeview';
@@ -34,6 +35,9 @@ import { FloatingLabel } from '@progress/kendo-react-labels';
 import ListFilter from '../common/ListFilter';
 import { Button } from '@progress/kendo-react-buttons';
 import { xIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { AdaptiveMode } from '../common/AdaptiveMode';
+import { ActionSheetContent } from '@progress/kendo-react-layout';
+import { MOBILE_MEDIUM_DEVISE } from '../common/constants';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var ValueHolder = function (props) {
@@ -88,6 +92,7 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
     var target = React.useRef(null);
     var elementRef = React.useRef(null);
     var inputRef = React.useRef(null);
+    var adaptiveInputRef = React.useRef(null);
     var selectRef = React.useRef(null);
     var treeViewRef = React.useRef(null);
     var skipFocusRef = React.useRef(false);
@@ -113,6 +118,8 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
     var isOpen = opened !== undefined ? opened : open;
     var _l = React.useState(false), focused = _l[0], setFocused = _l[1];
     var _m = React.useState(''), filter = _m[0], setFilter = _m[1];
+    var _o = React.useState(), windowWidth = _o[0], setWindowWidth = _o[1];
+    var isAdaptive = !!(windowWidth && windowWidth <= MOBILE_MEDIUM_DEVISE && props.adaptive);
     var setValidity = React.useCallback(function () {
         if (selectRef.current && selectRef.current.setCustomValidity) {
             selectRef.current.setCustomValidity(validity.valid
@@ -121,6 +128,17 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
         }
     }, [validationMessage, validity]);
     React.useEffect(setValidity);
+    React.useEffect(function () {
+        var observerResize = canUseDOM && window.ResizeObserver && new window.ResizeObserver(calculateMedia.bind(_this));
+        if ((document === null || document === void 0 ? void 0 : document.body) && observerResize) {
+            observerResize.observe(document.body);
+        }
+        return function () {
+            if ((document === null || document === void 0 ? void 0 : document.body) && observerResize) {
+                observerResize.disconnect();
+            }
+        };
+    }, []);
     var openPopup = React.useCallback(function (event) {
         if (!isOpen) {
             if (onOpen) {
@@ -140,9 +158,14 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
             }
             if (opened === undefined) {
                 setOpen(false);
+                if (isAdaptive) {
+                    setTimeout(function () {
+                        focusElement(adaptiveInputRef.current);
+                    }, 300);
+                }
             }
         }
-    }, [isOpen, opened, onClose]);
+    }, [isOpen, opened, onClose, isAdaptive]);
     var onWrapperClick = React.useCallback(function (event) {
         if (!event.isDefaultPrevented() && target.current) {
             setFocused(true);
@@ -258,7 +281,9 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
                 var focusEvent = __assign({}, ev);
                 props.onBlur.call(undefined, focusEvent);
             }
-            closePopup(ev);
+            if (!isAdaptive) {
+                closePopup(ev);
+            }
         }
     }, [focused, props.onBlur, isOpen, opened, onClose]);
     var onWrapperMouseDown = React.useCallback(function () {
@@ -266,7 +291,12 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
             // moving focus from treeview to dropdown triggers Focus and Blur events.
             switchFocus(noop);
         }
-    }, [focused]);
+        if (isAdaptive) {
+            setTimeout(function () {
+                focusElement(adaptiveInputRef.current);
+            }, 300);
+        }
+    }, [focused, isAdaptive]);
     var changeValue = React.useCallback(function (event, newValue, hierarchicalIndex) {
         if (props.onChange) {
             var changeEvent = __assign({ value: newValue, level: hierarchicalIndex ? toLevel(hierarchicalIndex) : [] }, event);
@@ -331,6 +361,27 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
             }
         }
     }, [props.onFilterChange, props.filter, props.textField]);
+    var renderAdaptiveListContainer = function () {
+        var mobileFilter = props.filterable ? (React.createElement(ListFilter, { value: props.filter === undefined ? filter : props.filter, inputRef: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
+        var actionSheetProps = {
+            adaptiveTitle: props.adaptiveTitle,
+            expand: isOpen,
+            onClose: function (event) { return closePopup(event); },
+            windowWidth: windowWidth,
+            mobileFilter: mobileFilter
+        };
+        return (React.createElement(AdaptiveMode, __assign({}, actionSheetProps),
+            React.createElement(ActionSheetContent, { className: '!k-overflow-hidden' },
+                React.createElement("div", { className: 'k-list-container' },
+                    React.createElement("div", { className: 'k-list k-list-lg' }, data.length > 0 ? (React.createElement(TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(nodata, messages[nodata]))))))));
+    };
+    var calculateMedia = React.useCallback(function (entries) {
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+            var entry = entries_1[_i];
+            setWindowWidth(entry.target.clientWidth);
+        }
+        ;
+    }, []);
     var treeViewData = React.useMemo(function () {
         return (controlled || !hasValue) ? data :
             mapTree(data, subItemsField, function (item) {
@@ -343,27 +394,29 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
     var localization = useLocalization();
     var isValid = !validityStyles || validity.valid;
     var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
-    var dropdowntree = (React.createElement("span", { className: classNames('k-dropdowntree k-picker', props.className, (_a = {},
-            _a["k-picker-".concat(sizeMap[size] || size)] = size,
-            _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
-            _a["k-picker-".concat(fillMode)] = fillMode,
-            _a['k-focus'] = focused,
-            _a['k-invalid'] = !isValid,
-            _a['k-loading'] = props.loading,
-            _a['k-required'] = required,
-            _a['k-disabled'] = props.disabled,
-            _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": required },
-        React.createElement("span", { className: "k-input-inner" },
-            React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
-        props.loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-        hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(clear, messages[clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } },
-            React.createElement(IconWrap, { name: 'x', icon: xIcon }))),
-        React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: caretAltDownIcon }),
-        React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
-            React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
-        React.createElement(Popup, { className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
-            props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
-            data.length > 0 ? (React.createElement(TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(nodata, messages[nodata]))))));
+    var dropdowntree = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: classNames('k-dropdowntree k-picker', props.className, (_a = {},
+                _a["k-picker-".concat(sizeMap[size] || size)] = size,
+                _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
+                _a["k-picker-".concat(fillMode)] = fillMode,
+                _a['k-focus'] = focused,
+                _a['k-invalid'] = !isValid,
+                _a['k-loading'] = props.loading,
+                _a['k-required'] = required,
+                _a['k-disabled'] = props.disabled,
+                _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": required },
+            React.createElement("span", { className: "k-input-inner" },
+                React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
+            props.loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
+            hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(clear, messages[clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } },
+                React.createElement(IconWrap, { name: 'x', icon: xIcon }))),
+            React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: caretAltDownIcon }),
+            React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
+                React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
+            !isAdaptive && React.createElement(Popup, { className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
+                props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
+                data.length > 0 ? (React.createElement(TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(nodata, messages[nodata]))))),
+        isAdaptive && renderAdaptiveListContainer()));
     return label ? (React.createElement(FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;
 });
 var propTypes = {
@@ -415,7 +468,9 @@ var propTypes = {
     onExpandChange: PropTypes.func,
     item: PropTypes.func,
     valueHolder: PropTypes.func,
-    listNoData: PropTypes.func
+    listNoData: PropTypes.func,
+    adaptiveTitle: PropTypes.string,
+    adaptive: PropTypes.bool
 };
 DropDownTree.displayName = 'KendoReactDropDownTree';
 DropDownTree.defaultProps = defaultProps;

package/dist/es/DropDownTree/DropDownTreeProps.d.ts

@@ -283,4 +283,12 @@ export interface DropDownTreeProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing 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/es/common/AdaptiveMode.js

@@ -22,7 +22,7 @@ export var AdaptiveMode = function (props) {
         navigatable: navigatable || false,
         navigatableElements: navigatableElements || [],
         expand: expand,
-        animation: animation || true,
+        animation: animation === false ? false : true,
         onClose: onClose,
         animationStyles: windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
         className: windowWidth <= MOBILE_SMALL_DEVISE

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1681802673,
+    publishDate: 1681969040,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/DropDownTree/DropDownTree.js

@@ -19,6 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropDownTree = exports.DropDownTreePropsContext = void 0;
 var React = require("react");
@@ -37,6 +38,9 @@ var kendo_react_labels_1 = require("@progress/kendo-react-labels");
 var ListFilter_1 = require("../common/ListFilter");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var AdaptiveMode_1 = require("../common/AdaptiveMode");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var constants_1 = require("../common/constants");
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var ValueHolder = function (props) {
@@ -91,6 +95,7 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var target = React.useRef(null);
     var elementRef = React.useRef(null);
     var inputRef = React.useRef(null);
+    var adaptiveInputRef = React.useRef(null);
     var selectRef = React.useRef(null);
     var treeViewRef = React.useRef(null);
     var skipFocusRef = React.useRef(false);
@@ -116,6 +121,8 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var isOpen = opened !== undefined ? opened : open;
     var _l = React.useState(false), focused = _l[0], setFocused = _l[1];
     var _m = React.useState(''), filter = _m[0], setFilter = _m[1];
+    var _o = React.useState(), windowWidth = _o[0], setWindowWidth = _o[1];
+    var isAdaptive = !!(windowWidth && windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && props.adaptive);
     var setValidity = React.useCallback(function () {
         if (selectRef.current && selectRef.current.setCustomValidity) {
             selectRef.current.setCustomValidity(validity.valid
@@ -124,6 +131,17 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         }
     }, [validationMessage, validity]);
     React.useEffect(setValidity);
+    React.useEffect(function () {
+        var observerResize = kendo_react_common_1.canUseDOM && window.ResizeObserver && new window.ResizeObserver(calculateMedia.bind(_this));
+        if ((document === null || document === void 0 ? void 0 : document.body) && observerResize) {
+            observerResize.observe(document.body);
+        }
+        return function () {
+            if ((document === null || document === void 0 ? void 0 : document.body) && observerResize) {
+                observerResize.disconnect();
+            }
+        };
+    }, []);
     var openPopup = React.useCallback(function (event) {
         if (!isOpen) {
             if (onOpen) {
@@ -143,9 +161,14 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             }
             if (opened === undefined) {
                 setOpen(false);
+                if (isAdaptive) {
+                    setTimeout(function () {
+                        focusElement(adaptiveInputRef.current);
+                    }, 300);
+                }
             }
         }
-    }, [isOpen, opened, onClose]);
+    }, [isOpen, opened, onClose, isAdaptive]);
     var onWrapperClick = React.useCallback(function (event) {
         if (!event.isDefaultPrevented() && target.current) {
             setFocused(true);
@@ -261,7 +284,9 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
                 var focusEvent = __assign({}, ev);
                 props.onBlur.call(undefined, focusEvent);
             }
-            closePopup(ev);
+            if (!isAdaptive) {
+                closePopup(ev);
+            }
         }
     }, [focused, props.onBlur, isOpen, opened, onClose]);
     var onWrapperMouseDown = React.useCallback(function () {
@@ -269,7 +294,12 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             // moving focus from treeview to dropdown triggers Focus and Blur events.
             switchFocus(kendo_react_common_1.noop);
         }
-    }, [focused]);
+        if (isAdaptive) {
+            setTimeout(function () {
+                focusElement(adaptiveInputRef.current);
+            }, 300);
+        }
+    }, [focused, isAdaptive]);
     var changeValue = React.useCallback(function (event, newValue, hierarchicalIndex) {
         if (props.onChange) {
             var changeEvent = __assign({ value: newValue, level: hierarchicalIndex ? toLevel(hierarchicalIndex) : [] }, event);
@@ -334,6 +364,27 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             }
         }
     }, [props.onFilterChange, props.filter, props.textField]);
+    var renderAdaptiveListContainer = function () {
+        var mobileFilter = props.filterable ? (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
+        var actionSheetProps = {
+            adaptiveTitle: props.adaptiveTitle,
+            expand: isOpen,
+            onClose: function (event) { return closePopup(event); },
+            windowWidth: windowWidth,
+            mobileFilter: mobileFilter
+        };
+        return (React.createElement(AdaptiveMode_1.AdaptiveMode, __assign({}, actionSheetProps),
+            React.createElement(kendo_react_layout_1.ActionSheetContent, { className: '!k-overflow-hidden' },
+                React.createElement("div", { className: 'k-list-container' },
+                    React.createElement("div", { className: 'k-list k-list-lg' }, data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))))));
+    };
+    var calculateMedia = React.useCallback(function (entries) {
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+            var entry = entries_1[_i];
+            setWindowWidth(entry.target.clientWidth);
+        }
+        ;
+    }, []);
     var treeViewData = React.useMemo(function () {
         return (controlled || !hasValue) ? data :
             (0, kendo_react_common_1.mapTree)(data, subItemsField, function (item) {
@@ -346,27 +397,29 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var localization = (0, kendo_react_intl_1.useLocalization)();
     var isValid = !validityStyles || validity.valid;
     var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
-    var dropdowntree = (React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-dropdowntree k-picker', props.className, (_a = {},
-            _a["k-picker-".concat(sizeMap[size] || size)] = size,
-            _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
-            _a["k-picker-".concat(fillMode)] = fillMode,
-            _a['k-focus'] = focused,
-            _a['k-invalid'] = !isValid,
-            _a['k-loading'] = props.loading,
-            _a['k-required'] = required,
-            _a['k-disabled'] = props.disabled,
-            _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": required },
-        React.createElement("span", { className: "k-input-inner" },
-            React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
-        props.loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-        hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } },
-            React.createElement(kendo_react_common_1.IconWrap, { name: 'x', icon: kendo_svg_icons_1.xIcon }))),
-        React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: kendo_svg_icons_1.caretAltDownIcon }),
-        React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
-            React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
-        React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
-            props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
-            data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))));
+    var dropdowntree = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-dropdowntree k-picker', props.className, (_a = {},
+                _a["k-picker-".concat(sizeMap[size] || size)] = size,
+                _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
+                _a["k-picker-".concat(fillMode)] = fillMode,
+                _a['k-focus'] = focused,
+                _a['k-invalid'] = !isValid,
+                _a['k-loading'] = props.loading,
+                _a['k-required'] = required,
+                _a['k-disabled'] = props.disabled,
+                _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": required },
+            React.createElement("span", { className: "k-input-inner" },
+                React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
+            props.loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
+            hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } },
+                React.createElement(kendo_react_common_1.IconWrap, { name: 'x', icon: kendo_svg_icons_1.xIcon }))),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: kendo_svg_icons_1.caretAltDownIcon }),
+            React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
+                React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
+            !isAdaptive && React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
+                props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
+                data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))),
+        isAdaptive && renderAdaptiveListContainer()));
     return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;
 });
 var propTypes = {
@@ -418,7 +471,9 @@ var propTypes = {
     onExpandChange: PropTypes.func,
     item: PropTypes.func,
     valueHolder: PropTypes.func,
-    listNoData: PropTypes.func
+    listNoData: PropTypes.func,
+    adaptiveTitle: PropTypes.string,
+    adaptive: PropTypes.bool
 };
 exports.DropDownTree.displayName = 'KendoReactDropDownTree';
 exports.DropDownTree.defaultProps = defaultProps;

package/dist/npm/DropDownTree/DropDownTreeProps.d.ts

@@ -283,4 +283,12 @@ export interface DropDownTreeProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing 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/AdaptiveMode.js

@@ -25,7 +25,7 @@ var AdaptiveMode = function (props) {
         navigatable: navigatable || false,
         navigatableElements: navigatableElements || [],
         expand: expand,
-        animation: animation || true,
+        animation: animation === false ? false : true,
         onClose: onClose,
         animationStyles: windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
         className: windowWidth <= MOBILE_SMALL_DEVISE

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1681802673,
+    publishDate: 1681969040,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };