@progress/kendo-react-dropdowns 5.13.0-dev.202304051130 → 5.13.0-dev.202304131123

package/dist/es/MultiSelectTree/MultiSelectTree.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, guid, kendoThemeMaps, createPropsContext, usePropsContext, IconWrap } from '@progress/kendo-react-common';
+import { classNames, noop, useRtl, getTabIndex, Keys, guid, kendoThemeMaps, createPropsContext, 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';
@@ -29,11 +30,14 @@ import { packageMetadata } from './../package-metadata';
 import { getItemValue, areSame, matchTags } from '../common/utils';
 import { useDropdownWidth } from './../DropDownTree/useDropdownWidth';
 import { ListNoData } from './../DropDownTree/ListNoData';
-import { messages, nodata } from './../messages';
+import { messages, nodata, adaptiveModeFooterCancel, adaptiveModeFooterApply } from './../messages';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import TagList from '../MultiSelect/TagList';
 import ClearButton from '../common/ClearButton';
 import ListFilter from '../common/ListFilter';
+import { AdaptiveMode } from '../common/AdaptiveMode';
+import { ActionSheetContent } from '@progress/kendo-react-layout';
+import { MOBILE_MEDIUM_DEVISE } from '../common/constants';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 var toLevel = function (hierarchicalIndex) {
@@ -86,6 +90,7 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var targetRef = 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);
@@ -95,6 +100,9 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var _p = React.useState(false), openState = _p[0], setOpenState = _p[1];
     var _q = React.useState(false), focusedState = _q[0], setFocusedState = _q[1];
     var _r = React.useState(''), filterState = _r[0], setFilterState = _r[1];
+    var _s = React.useState(), windowWidth = _s[0], setWindowWidth = _s[1];
+    var _t = React.useState([]), currentTreeValue = _t[0], setCurrentTreeValue = _t[1];
+    var isAdaptive = !!(windowWidth && windowWidth <= MOBILE_MEDIUM_DEVISE && props.adaptive);
     var isOpen = opened !== undefined ? opened : openState;
     var hasValue = Boolean(Array.isArray(value) && value.length);
     var validity = getValidity({ validationMessage: validationMessage, valid: valid, required: required }, hasValue);
@@ -120,6 +128,15 @@ export var MultiSelectTree = 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 () {
+            observerResize.disconnect();
+        };
+    }, []);
     React.useEffect(function () {
         if (popupRef.current && isOpen) {
             popupRef.current.setPosition(popupRef.current._popup);
@@ -151,9 +168,15 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
             }
             if (opened === undefined) {
                 setOpenState(true);
+                setCurrentTreeValue(value || []);
+                if (isAdaptive) {
+                    setTimeout(function () {
+                        focusElement(adaptiveInputRef.current);
+                    }, 300);
+                }
             }
         }
-    }, [isOpen, opened, onOpen]);
+    }, [isOpen, opened, onOpen, isAdaptive]);
     var closePopup = React.useCallback(function (event) {
         if (isOpen) {
             if (onClose) {
@@ -219,7 +242,9 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
                 var focusEvent = __assign({}, ev);
                 props.onBlur.call(undefined, focusEvent);
             }
-            closePopup(ev);
+            if (!isAdaptive) {
+                closePopup(ev);
+            }
         }
     }, [focusedState, props.onBlur, isOpen, opened, onClose]);
     var onWrapperMouseDown = React.useCallback(function () {
@@ -385,33 +410,80 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
             }
         }
     }, [props.onFilterChange, props.filter, props.textField]);
+    var onCancel = React.useCallback(function (event) {
+        if (!targetRef.current) {
+            return;
+        }
+        var ev = {
+            syntheticEvent: event,
+            nativeEvent: event.nativeEvent,
+            target: targetRef.current
+        };
+        if (props.onCancel) {
+            props.onCancel.call(undefined, ev);
+        }
+        ;
+        closePopup(ev);
+        event.preventDefault();
+    }, [props.onCancel, closePopup]);
+    var renderAdaptiveListContainer = function () {
+        var mobileFilter = props.filterable ? (React.createElement(ListFilter, { value: props.filter === undefined ? filterState : 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 props.onCancel ? onCancel(event) : onClear(event); },
+            windowWidth: windowWidth,
+            mobileFilter: mobileFilter,
+            footer: {
+                cancelText: localization.toLanguageString(adaptiveModeFooterCancel, messages[adaptiveModeFooterCancel]),
+                onCancel: function (event) { return props.onCancel ? onCancel(event) : onClear(event); },
+                applyText: localization.toLanguageString(adaptiveModeFooterApply, messages[adaptiveModeFooterApply]),
+                onApply: function (event) { return closePopup(event); }
+            }
+        };
+        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: data, focusIdField: dataItemKey, textField: props.textField, checkField: checkField, checkIndeterminateField: checkIndeterminateField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onCheckChange: onChange, onExpandChange: onExpand, checkboxes: true, 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 NoData = props.listNoData || ListNoData;
     var localization = useLocalization();
     var isValid = !validityStyles || validity.valid;
     var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
-    var multiselecttree = (React.createElement("span", { className: classNames('k-multiselect k-input', 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'] = focusedState && !disabled,
-            _a['k-invalid'] = !isValid,
-            _a['k-disabled'] = disabled,
-            _a['k-loading'] = props.loading,
-            _a['k-required'] = required,
-            _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, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": props.required, onClick: disabled ? undefined : onWrapperClick },
-        React.createElement("div", { id: 'tagslist-' + id, className: classNames('k-input-values k-chip-list k-selection-multiple', (_b = {},
-                _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
-                _b)) }, tagsToRenderRef.current.length > 0 && (React.createElement(TagList, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return matchTags(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
-        !hasValue &&
-            React.createElement("span", { className: "k-input-inner", role: 'combobox', tabIndex: tabIndex, "aria-expanded": isOpen, "aria-describedby": 'tagslist-' + id, "aria-label": props.ariaLabelledBy },
-                React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
-        props.loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-        hasValue && !disabled && React.createElement(ClearButton, { onClick: onClear }),
-        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, { popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup'), className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo, ref: popupRef },
-            props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filterState : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, tabIndex: tabIndex, size: size, rounded: rounded, fillMode: fillMode })),
-            data.length > 0 ? (React.createElement(TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: data, focusIdField: dataItemKey, textField: props.textField, checkField: checkField, checkIndeterminateField: checkIndeterminateField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onCheckChange: onChange, onExpandChange: onExpand, checkboxes: true, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(nodata, messages[nodata]))))));
+    var currentTagsToRender = isAdaptive && isOpen ? currentTreeValue : tagsToRenderRef.current;
+    var multiselecttree = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: classNames('k-multiselect k-input', 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'] = focusedState && !disabled,
+                _a['k-invalid'] = !isValid,
+                _a['k-disabled'] = disabled,
+                _a['k-loading'] = props.loading,
+                _a['k-required'] = required,
+                _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, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": props.required, onClick: disabled ? undefined : onWrapperClick },
+            React.createElement("div", { id: 'tagslist-' + id, className: classNames('k-input-values k-chip-list k-selection-multiple', (_b = {},
+                    _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
+                    _b)) }, currentTagsToRender.length > 0 && (React.createElement(TagList, { tag: props.tag, onTagDelete: onTagDelete, data: currentTagsToRender, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return matchTags(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
+            (!hasValue || isAdaptive) &&
+                React.createElement("span", { className: "k-input-inner", role: 'combobox', tabIndex: tabIndex, "aria-expanded": isOpen, "aria-describedby": 'tagslist-' + id, "aria-label": props.ariaLabelledBy },
+                    React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
+            props.loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
+            hasValue && !disabled && currentTagsToRender.length > 0 &&
+                React.createElement(ClearButton, { onClick: onClear }),
+            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, { popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup'), className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo, ref: popupRef },
+                props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filterState : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, tabIndex: tabIndex, size: size, rounded: rounded, fillMode: fillMode })),
+                data.length > 0 ? (React.createElement(TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: data, focusIdField: dataItemKey, textField: props.textField, checkField: checkField, checkIndeterminateField: checkIndeterminateField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onCheckChange: onChange, onExpandChange: onExpand, checkboxes: true, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(nodata, messages[nodata]))))),
+        isAdaptive && renderAdaptiveListContainer()));
     return label ? (React.createElement(FloatingLabel, { label: label, editorValue: hasValue, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: multiselecttree, dir: dir })) : multiselecttree;
 });
 var propTypes = {
@@ -466,8 +538,11 @@ var propTypes = {
     onChange: PropTypes.func,
     onFilterChange: PropTypes.func,
     onExpandChange: PropTypes.func,
+    onCancel: PropTypes.func,
     item: PropTypes.func,
-    listNoData: PropTypes.func
+    listNoData: PropTypes.func,
+    adaptiveTitle: PropTypes.string,
+    adaptive: PropTypes.bool
 };
 MultiSelectTree.displayName = 'KendoReactMultiSelectTree';
 MultiSelectTree.defaultProps = defaultProps;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FormComponentProps } from '@progress/kendo-react-common';
 import { ItemRenderProps } from '@progress/kendo-react-treeview';
-import { FilterChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events';
+import { FilterChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent, CancelEvent } from '../common/events';
 import { DropDownsPopupSettings } from '../common/settings';
 import { TagData } from '../MultiSelect/TagList';
 /**
@@ -64,6 +64,11 @@ export interface MultiSelectTreeFocusEvent extends FocusEvent<MultiSelectTreeHan
  */
 export interface MultiSelectTreeBlurEvent extends BlurEvent<MultiSelectTreeHandle> {
 }
+/**
+ * Represents the object of the `onCancel` MultiSelectTree event.
+ */
+export interface MultiSelectTreeCancelEvent extends CancelEvent<MultiSelectTreeHandle> {
+}
 /**
  * Represents the object of the `onExpandChange` MultiSelectTree event.
  */
@@ -242,6 +247,10 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      * Fires each time the value of the MultiSelectTree is about to change ([see examples]({% slug overview_multiselecttree %})).
      */
     onChange?: (event: MultiSelectTreeChangeEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelectTree is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselecttree %})).
+     */
+    onCancel?: (event: MultiSelectTreeCancelEvent) => void;
     /**
      * Fires each time the user types in the filter input
      * ([see example]({% slug filtering_multiselecttree %}#toc-basic-configuration)).
@@ -300,4 +309,12 @@ export interface MultiSelectTreeProps 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 | React.ReactNode;
 }

package/dist/es/common/AdaptiveMode.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/** @hidden */
+export interface AdaptiveModeProps {
+    navigatable?: boolean;
+    navigatableElements?: string[];
+    expand: boolean;
+    animation?: boolean;
+    adaptiveTitle?: string | React.ReactNode;
+    onClose?: (event: React.SyntheticEvent) => void;
+    windowWidth?: number;
+    mobileFilter?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: {
+        cancelText: string;
+        onCancel: (event: React.SyntheticEvent) => void;
+        applyText: string;
+        onApply: (event: React.SyntheticEvent) => void;
+    };
+}
+/** @hidden */
+export declare const AdaptiveMode: (props: AdaptiveModeProps) => JSX.Element;

package/dist/es/common/AdaptiveMode.js

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '@progress/kendo-react-layout';
+import { xIcon } from '@progress/kendo-svg-icons';
+import { Button } from '@progress/kendo-react-buttons';
+/** @hidden */
+var MOBILE_SMALL_DEVISE = 500;
+/** @hidden */
+export var AdaptiveMode = function (props) {
+    var footer = props.footer, children = props.children, _a = props.windowWidth, windowWidth = _a === void 0 ? 0 : _a, navigatable = props.navigatable, navigatableElements = props.navigatableElements, expand = props.expand, animation = props.animation, onClose = props.onClose, adaptiveTitle = props.adaptiveTitle, mobileFilter = props.mobileFilter;
+    var defaultProps = {
+        navigatable: navigatable || false,
+        navigatableElements: navigatableElements || [],
+        expand: expand,
+        animation: animation || true,
+        onClose: onClose,
+        animationStyles: windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
+        className: windowWidth <= MOBILE_SMALL_DEVISE
+            ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
+            : 'k-adaptive-actionsheet k-actionsheet-bottom'
+    };
+    return (React.createElement(ActionSheet, __assign({}, defaultProps),
+        React.createElement(ActionSheetHeader, { className: 'k-text-center' },
+            React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
+                React.createElement("div", { className: "k-actionsheet-title" },
+                    React.createElement("div", null, adaptiveTitle)),
+                React.createElement("div", { className: "k-actionsheet-actions" },
+                    React.createElement(Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", icon: 'x', svgIcon: xIcon, onClick: onClose }))),
+            mobileFilter &&
+                React.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, mobileFilter)),
+        children,
+        footer && React.createElement(ActionSheetFooter, { className: 'k-actions k-actions-stretched' },
+            React.createElement(Button, { size: "large", tabIndex: 0, "aria-label": footer.cancelText, "aria-disabled": "false", type: "button", onClick: function (event) { return footer.onCancel(event); } }, footer.cancelText),
+            React.createElement(Button, { tabIndex: 0, themeColor: "primary", size: "large", "aria-label": footer.applyText, "aria-disabled": "false", type: "button", onClick: function (event) { return footer.onApply(event); } }, footer.applyText))));
+};

package/dist/es/common/events.d.ts

@@ -60,6 +60,11 @@ export interface FocusEvent<T> extends DropdownEvent<T> {
  */
 export interface BlurEvent<T> extends DropdownEvent<T> {
 }
+/**
+ * @hidden
+ */
+export interface CancelEvent<T> extends DropdownEvent<T> {
+}
 /**
  * @hidden
  */

package/dist/es/messages/index.d.ts

@@ -18,6 +18,14 @@ export declare const comboArrowBtnAriaLabelCollapse = "dropdowns.comboArrowBtnAr
  * @hidden
  */
 export declare const dropDownListArrowBtnAriaLabel = "dropdowns.dropDownListArrowBtnAriaLabel";
+/**
+ * @hidden
+ */
+export declare const adaptiveModeFooterApply = "dropdowns.apply";
+/**
+ * @hidden
+ */
+export declare const adaptiveModeFooterCancel = "dropdowns.cancel";
 /**
  * @hidden
  */
@@ -27,4 +35,6 @@ export declare const messages: {
     "dropdowns.comboArrowBtnAriaLabelExpand": string;
     "dropdowns.comboArrowBtnAriaLabelCollapse": string;
     "dropdowns.dropDownListArrowBtnAriaLabel": string;
+    "dropdowns.apply": string;
+    "dropdowns.cancel": string;
 };

package/dist/es/messages/index.js

@@ -19,6 +19,14 @@ export var comboArrowBtnAriaLabelCollapse = 'dropdowns.comboArrowBtnAriaLabelCol
  * @hidden
  */
 export var dropDownListArrowBtnAriaLabel = 'dropdowns.dropDownListArrowBtnAriaLabel';
+/**
+ * @hidden
+ */
+export var adaptiveModeFooterApply = 'dropdowns.apply';
+/**
+ * @hidden
+ */
+export var adaptiveModeFooterCancel = 'dropdowns.cancel';
 /**
  * @hidden
  */
@@ -28,4 +36,6 @@ export var messages = (_a = {},
     _a[comboArrowBtnAriaLabelExpand] = 'expand combobox',
     _a[comboArrowBtnAriaLabelCollapse] = 'collapse combobox',
     _a[dropDownListArrowBtnAriaLabel] = 'select',
+    _a[adaptiveModeFooterApply] = 'Apply',
+    _a[adaptiveModeFooterCancel] = 'Cancel',
     _a);

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1680692409,
+    publishDate: 1681383607,
     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/MultiSelectTree/MultiSelectTree.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.MultiSelectTree = exports.MultiSelectTreePropsContext = void 0;
 var React = require("react");
@@ -37,6 +38,9 @@ var kendo_react_labels_1 = require("@progress/kendo-react-labels");
 var TagList_1 = require("../MultiSelect/TagList");
 var ClearButton_1 = require("../common/ClearButton");
 var ListFilter_1 = require("../common/ListFilter");
+var AdaptiveMode_1 = require("../common/AdaptiveMode");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var constants_1 = require("../common/constants");
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 var toLevel = function (hierarchicalIndex) {
@@ -89,6 +93,7 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var targetRef = 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);
@@ -98,6 +103,9 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var _p = React.useState(false), openState = _p[0], setOpenState = _p[1];
     var _q = React.useState(false), focusedState = _q[0], setFocusedState = _q[1];
     var _r = React.useState(''), filterState = _r[0], setFilterState = _r[1];
+    var _s = React.useState(), windowWidth = _s[0], setWindowWidth = _s[1];
+    var _t = React.useState([]), currentTreeValue = _t[0], setCurrentTreeValue = _t[1];
+    var isAdaptive = !!(windowWidth && windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && props.adaptive);
     var isOpen = opened !== undefined ? opened : openState;
     var hasValue = Boolean(Array.isArray(value) && value.length);
     var validity = getValidity({ validationMessage: validationMessage, valid: valid, required: required }, hasValue);
@@ -123,6 +131,15 @@ exports.MultiSelectTree = 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 () {
+            observerResize.disconnect();
+        };
+    }, []);
     React.useEffect(function () {
         if (popupRef.current && isOpen) {
             popupRef.current.setPosition(popupRef.current._popup);
@@ -154,9 +171,15 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
             }
             if (opened === undefined) {
                 setOpenState(true);
+                setCurrentTreeValue(value || []);
+                if (isAdaptive) {
+                    setTimeout(function () {
+                        focusElement(adaptiveInputRef.current);
+                    }, 300);
+                }
             }
         }
-    }, [isOpen, opened, onOpen]);
+    }, [isOpen, opened, onOpen, isAdaptive]);
     var closePopup = React.useCallback(function (event) {
         if (isOpen) {
             if (onClose) {
@@ -222,7 +245,9 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
                 var focusEvent = __assign({}, ev);
                 props.onBlur.call(undefined, focusEvent);
             }
-            closePopup(ev);
+            if (!isAdaptive) {
+                closePopup(ev);
+            }
         }
     }, [focusedState, props.onBlur, isOpen, opened, onClose]);
     var onWrapperMouseDown = React.useCallback(function () {
@@ -388,33 +413,80 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
             }
         }
     }, [props.onFilterChange, props.filter, props.textField]);
+    var onCancel = React.useCallback(function (event) {
+        if (!targetRef.current) {
+            return;
+        }
+        var ev = {
+            syntheticEvent: event,
+            nativeEvent: event.nativeEvent,
+            target: targetRef.current
+        };
+        if (props.onCancel) {
+            props.onCancel.call(undefined, ev);
+        }
+        ;
+        closePopup(ev);
+        event.preventDefault();
+    }, [props.onCancel, closePopup]);
+    var renderAdaptiveListContainer = function () {
+        var mobileFilter = props.filterable ? (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filterState : 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 props.onCancel ? onCancel(event) : onClear(event); },
+            windowWidth: windowWidth,
+            mobileFilter: mobileFilter,
+            footer: {
+                cancelText: localization.toLanguageString(messages_1.adaptiveModeFooterCancel, messages_1.messages[messages_1.adaptiveModeFooterCancel]),
+                onCancel: function (event) { return props.onCancel ? onCancel(event) : onClear(event); },
+                applyText: localization.toLanguageString(messages_1.adaptiveModeFooterApply, messages_1.messages[messages_1.adaptiveModeFooterApply]),
+                onApply: function (event) { return closePopup(event); }
+            }
+        };
+        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: data, focusIdField: dataItemKey, textField: props.textField, checkField: checkField, checkIndeterminateField: checkIndeterminateField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onCheckChange: onChange, onExpandChange: onExpand, checkboxes: true, 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 NoData = props.listNoData || ListNoData_1.ListNoData;
     var localization = (0, kendo_react_intl_1.useLocalization)();
     var isValid = !validityStyles || validity.valid;
     var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
-    var multiselecttree = (React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-multiselect k-input', 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'] = focusedState && !disabled,
-            _a['k-invalid'] = !isValid,
-            _a['k-disabled'] = disabled,
-            _a['k-loading'] = props.loading,
-            _a['k-required'] = required,
-            _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, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": props.required, onClick: disabled ? undefined : onWrapperClick },
-        React.createElement("div", { id: 'tagslist-' + id, className: (0, kendo_react_common_1.classNames)('k-input-values k-chip-list k-selection-multiple', (_b = {},
-                _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
-                _b)) }, tagsToRenderRef.current.length > 0 && (React.createElement(TagList_1.default, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return (0, utils_1.matchTags)(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
-        !hasValue &&
-            React.createElement("span", { className: "k-input-inner", role: 'combobox', tabIndex: tabIndex, "aria-expanded": isOpen, "aria-describedby": 'tagslist-' + id, "aria-label": props.ariaLabelledBy },
-                React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
-        props.loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-        hasValue && !disabled && React.createElement(ClearButton_1.default, { onClick: onClear }),
-        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, { popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup'), className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo, ref: popupRef },
-            props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filterState : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, tabIndex: tabIndex, size: size, rounded: rounded, fillMode: fillMode })),
-            data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: data, focusIdField: dataItemKey, textField: props.textField, checkField: checkField, checkIndeterminateField: checkIndeterminateField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onCheckChange: onChange, onExpandChange: onExpand, checkboxes: true, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))));
+    var currentTagsToRender = isAdaptive && isOpen ? currentTreeValue : tagsToRenderRef.current;
+    var multiselecttree = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-multiselect k-input', 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'] = focusedState && !disabled,
+                _a['k-invalid'] = !isValid,
+                _a['k-disabled'] = disabled,
+                _a['k-loading'] = props.loading,
+                _a['k-required'] = required,
+                _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, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": props.required, onClick: disabled ? undefined : onWrapperClick },
+            React.createElement("div", { id: 'tagslist-' + id, className: (0, kendo_react_common_1.classNames)('k-input-values k-chip-list k-selection-multiple', (_b = {},
+                    _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
+                    _b)) }, currentTagsToRender.length > 0 && (React.createElement(TagList_1.default, { tag: props.tag, onTagDelete: onTagDelete, data: currentTagsToRender, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return (0, utils_1.matchTags)(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
+            (!hasValue || isAdaptive) &&
+                React.createElement("span", { className: "k-input-inner", role: 'combobox', tabIndex: tabIndex, "aria-expanded": isOpen, "aria-describedby": 'tagslist-' + id, "aria-label": props.ariaLabelledBy },
+                    React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
+            props.loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
+            hasValue && !disabled && currentTagsToRender.length > 0 &&
+                React.createElement(ClearButton_1.default, { onClick: onClear }),
+            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, { popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup'), className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo, ref: popupRef },
+                props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filterState : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, tabIndex: tabIndex, size: size, rounded: rounded, fillMode: fillMode })),
+                data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: data, focusIdField: dataItemKey, textField: props.textField, checkField: checkField, checkIndeterminateField: checkIndeterminateField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onCheckChange: onChange, onExpandChange: onExpand, checkboxes: true, 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: hasValue, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: multiselecttree, dir: dir })) : multiselecttree;
 });
 var propTypes = {
@@ -469,8 +541,11 @@ var propTypes = {
     onChange: PropTypes.func,
     onFilterChange: PropTypes.func,
     onExpandChange: PropTypes.func,
+    onCancel: PropTypes.func,
     item: PropTypes.func,
-    listNoData: PropTypes.func
+    listNoData: PropTypes.func,
+    adaptiveTitle: PropTypes.string,
+    adaptive: PropTypes.bool
 };
 exports.MultiSelectTree.displayName = 'KendoReactMultiSelectTree';
 exports.MultiSelectTree.defaultProps = defaultProps;