@progress/kendo-react-dropdowns 6.1.1 → 7.0.0-develop.10

package/dist/npm/MultiSelectTree/MultiSelectTree.js

@@ -1,622 +0,0 @@
-"use strict";
-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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    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");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_popup_1 = require("@progress/kendo-react-popup");
-var kendo_react_intl_1 = require("@progress/kendo-react-intl");
-var kendo_react_treeview_1 = require("@progress/kendo-react-treeview");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("./../package-metadata");
-var utils_1 = require("../common/utils");
-var useDropdownWidth_1 = require("./../DropDownTree/useDropdownWidth");
-var ListNoData_1 = require("./../DropDownTree/ListNoData");
-var messages_1 = require("./../messages");
-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) {
-    return hierarchicalIndex.split('_').map(function (i) { return parseInt(i, 10); });
-};
-var getValidity = function (parameters, hasValue) {
-    var validationMessage = parameters.validationMessage, valid = parameters.valid, required = parameters.required;
-    return ({
-        customError: validationMessage !== undefined,
-        valid: Boolean(valid !== undefined ? valid : (!required || hasValue)),
-        valueMissing: !hasValue
-    });
-};
-var defaultProps = {
-    checkField: 'checkField',
-    checkIndeterminateField: 'checkIndeterminateField',
-    subItemsField: 'items',
-    popupSettings: {
-        animate: true,
-        width: '200px',
-        height: '200px'
-    },
-    size: 'medium',
-    rounded: 'medium',
-    fillMode: 'solid',
-    required: false,
-    validityStyles: true
-};
-/**
- * Represents the PropsContext of the `MultiSelectTree` component.
- * Used for global configuration of all `MultiSelectTree` instances.
- *
- * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
- */
-exports.MultiSelectTreePropsContext = (0, kendo_react_common_1.createPropsContext)();
-/**
- * Represents the MultiSelectTree component.
- *
- * Accepts properties of type [MultiSelectTreeProps]({% slug api_dropdowns_multiselecttreeprops %}).
- * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle]({% slug api_dropdowns_multiselecttreehandle %}).
- *
- * @example
- * ```jsx
- *   const dataItemKey = 'id';
- *   const checkField = 'checkField';
- *   const checkIndeterminateField = 'checkIndeterminateField';
- *   const subItemsField = 'items';
- *   const expandField = 'expanded';
- *   const textField = 'text';
- *   const fields = {
- *    dataItemKey,
- *    checkField,
- *    checkIndeterminateField,
- *    expandField,
- *    subItemsField,
- *   };
- *   const App = () => {
- *    const [value, setValue] = React.useState([]);
- *    const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
- *    const onChange = (event) =>
- *       setValue(
- *       getMultiSelectTreeValue(data, {
- *           ...fields,
- *           ...event,
- *           value,
- *       })
- *       );
- *   const onExpandChange = React.useCallback(
- *       (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
- *       [expanded]
- *   );
- *   const treeData = React.useMemo(
- *       () =>
- *       processMultiSelectTreeData(data, {
- *           expanded,
- *           value,
- *           ...fields,
- *       }),
- *       [expanded, value]
- *   );
- *
- *   return (
- *       <div>
- *       <div>Categories:</div>
- *       <MultiSelectTree
- *           style={{
- *           width: '300px',
- *           }}
- *           data={treeData}
- *           value={value}
- *           onChange={onChange}
- *           placeholder="Please select ..."
- *           textField={textField}
- *           dataItemKey={dataItemKey}
- *           checkField={checkField}
- *           checkIndeterminateField={checkIndeterminateField}
- *           expandField={expandField}
- *           subItemsField={subItemsField}
- *           onExpandChange={onExpandChange}
- *       />
- *       </div>
- *   );
- *   };
- *   ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
-    var _a, _b;
-    var props = (0, kendo_react_common_1.usePropsContext)(exports.MultiSelectTreePropsContext, directProps);
-    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-    var componentGuid = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
-    var id = props.id || componentGuid;
-    var _c = props.data, data = _c === void 0 ? [] : _c, dataItemKey = props.dataItemKey, _d = props.popupSettings, popupSettings = _d === void 0 ? {} : _d, _e = props.style, style = _e === void 0 ? {} : _e, opened = props.opened, disabled = props.disabled, _f = props.onOpen, onOpen = _f === void 0 ? kendo_react_common_1.noop : _f, _g = props.onClose, onClose = _g === void 0 ? kendo_react_common_1.noop : _g, placeholder = props.placeholder, label = props.label, name = props.name, _h = props.checkField, checkField = _h === void 0 ? defaultProps.checkField : _h, _j = props.checkIndeterminateField, checkIndeterminateField = _j === void 0 ? defaultProps.checkIndeterminateField : _j, _k = props.subItemsField, subItemsField = _k === void 0 ? defaultProps.subItemsField : _k, validationMessage = props.validationMessage, valid = props.valid, tags = props.tags, value = props.value, _l = props.required, required = _l === void 0 ? defaultProps.required : _l, _m = props.validityStyles, validityStyles = _m === void 0 ? defaultProps.validityStyles : _m;
-    var tabIndex = (0, kendo_react_common_1.getTabIndex)(props.tabIndex, disabled);
-    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);
-    var tagsToRenderRef = React.useRef([]);
-    var popupRef = React.useRef(null);
-    var _o = React.useState(), focusedTagState = _o[0], setFocusedTagState = _o[1];
-    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(), windowWidth = _r[0], setWindowWidth = _r[1];
-    var _s = React.useState([]), currentTreeValue = _s[0], setCurrentTreeValue = _s[1];
-    var _t = React.useState(''), filterState = _t[0], setFilterState = _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);
-    var dir = (0, kendo_react_common_1.useRtl)(elementRef, props.dir);
-    var initialStyleWidth = popupSettings.width !== undefined ?
-        popupSettings.width : (style.width !== undefined ? style.width : defaultProps.popupSettings.width);
-    var popupWidth = (0, useDropdownWidth_1.useDropdownWidth)(elementRef, initialStyleWidth);
-    var popupStyles = __assign({ width: popupWidth }, (dir !== undefined ? { direction: dir } : {}));
-    var focus = React.useCallback(function () { return elementRef.current && elementRef.current.focus(); }, []);
-    tagsToRenderRef.current = tags === undefined ?
-        (value || []).map(function (item) { return ({ text: (0, utils_1.getItemValue)(item, props.textField), data: [item] }); }) : __spreadArray([], tags, true);
-    React.useImperativeHandle(targetRef, function () { return ({
-        props: props,
-        element: elementRef.current,
-        focus: focus
-    }); });
-    React.useImperativeHandle(ref, function () { return targetRef.current; });
-    var setValidity = React.useCallback(function () {
-        if (selectRef.current && selectRef.current.setCustomValidity) {
-            selectRef.current.setCustomValidity(validity.valid
-                ? ''
-                : validationMessage === undefined ? VALIDATION_MESSAGE : validationMessage);
-        }
-    }, [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 (observerResize) {
-                observerResize.disconnect();
-            }
-        };
-    }, []);
-    React.useEffect(function () {
-        if (popupRef.current && isOpen) {
-            popupRef.current.setPosition(popupRef.current._popup);
-        }
-    }, [value, isOpen]);
-    var changeValue = React.useCallback(function (event, relatedItems, operation) {
-        if (props.onChange) {
-            var changeEvent = __assign({ items: relatedItems, operation: operation }, event);
-            props.onChange.call(undefined, changeEvent);
-        }
-    }, [props.onChange]);
-    var onChange = React.useCallback(function (event) {
-        if ((0, utils_1.areSame)(event.item, value, dataItemKey) || !targetRef.current) {
-            return;
-        }
-        var item = event.item, nativeEvent = event.nativeEvent, syntheticEvent = event.syntheticEvent;
-        var ev = {
-            syntheticEvent: syntheticEvent,
-            nativeEvent: nativeEvent,
-            target: targetRef.current
-        };
-        changeValue(ev, [item], 'toggle');
-    }, [value, dataItemKey, changeValue]);
-    var openPopup = React.useCallback(function (event) {
-        if (!isOpen) {
-            if (onOpen) {
-                var openEvent = __assign({}, event);
-                onOpen.call(undefined, openEvent);
-            }
-            if (opened === undefined) {
-                setOpenState(true);
-                setCurrentTreeValue(value || []);
-                if (isAdaptive) {
-                    setTimeout(function () {
-                        var _a;
-                        focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
-                    }, 300);
-                }
-            }
-        }
-    }, [isOpen, opened, onOpen, isAdaptive, adaptiveInputRef]);
-    var closePopup = React.useCallback(function (event) {
-        if (isOpen) {
-            if (onClose) {
-                var closeEvent = __assign({}, event);
-                onClose.call(undefined, closeEvent);
-            }
-            if (opened === undefined) {
-                setOpenState(false);
-            }
-        }
-    }, [isOpen, opened, onClose]);
-    var switchFocus = React.useCallback(function (focusFn) {
-        skipFocusRef.current = true;
-        focusFn();
-        window.setTimeout(function () { return skipFocusRef.current = false; }, 0);
-    }, []);
-    var focusElement = React.useCallback(function (element) {
-        if (element) {
-            switchFocus(function () { return element.focus(); });
-        }
-    }, [switchFocus]);
-    var onPopupOpened = React.useCallback(function () {
-        var _a;
-        if (!focusedState && isOpen) {
-            closePopup({ target: targetRef.current });
-        }
-        else {
-            if (props.filterable) {
-                focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element);
-            }
-            else {
-                focusElement(treeViewRef.current && treeViewRef.current.element);
-            }
-        }
-    }, [focusedState, isOpen, focusElement, closePopup, props.filterable]);
-    var onPopupClosed = React.useCallback(function () {
-        if (focusedState) {
-            // Move the focus from treeview to dropdown without triggering Focus or Blur events.
-            focusElement(elementRef.current);
-        }
-    }, [focusedState, focusElement]);
-    var onFocus = React.useCallback(function (event) {
-        if (!focusedState && !skipFocusRef.current) {
-            setFocusedState(true);
-            if (props.onFocus && targetRef.current) {
-                var focusEvent = {
-                    syntheticEvent: event,
-                    nativeEvent: event.nativeEvent,
-                    target: targetRef.current
-                };
-                props.onFocus.call(undefined, focusEvent);
-            }
-        }
-    }, [focusedState, props.onFocus]);
-    var onBlur = React.useCallback(function (event) {
-        if (focusedState && !skipFocusRef.current && targetRef.current) {
-            setFocusedState(false);
-            var ev = {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                target: targetRef.current
-            };
-            if (props.onBlur) {
-                var focusEvent = __assign({}, ev);
-                props.onBlur.call(undefined, focusEvent);
-            }
-            if (!isAdaptive) {
-                closePopup(ev);
-            }
-        }
-    }, [focusedState, props.onBlur, isOpen, opened, onClose]);
-    var onWrapperMouseDown = React.useCallback(function () {
-        if (focusedState) {
-            // moving focus from treeview to dropdown triggers Focus and Blur events.
-            switchFocus(kendo_react_common_1.noop);
-        }
-    }, [focusedState, switchFocus]);
-    var onWrapperClick = React.useCallback(function (event) {
-        if (!event.isDefaultPrevented() && targetRef.current) {
-            setFocusedState(true);
-            var ev = {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                target: targetRef.current
-            };
-            if (!isOpen) {
-                openPopup(ev);
-            }
-        }
-    }, [isOpen, openPopup]);
-    var onWrapperKeyDown = React.useCallback(function (event) {
-        var _a, _b;
-        var keyCode = event.keyCode, altKey = event.altKey;
-        var treeviewElement = treeViewRef.current && treeViewRef.current.element;
-        if (!targetRef.current || (event.isDefaultPrevented() && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) === event.target)) {
-            return;
-        }
-        var ev = {
-            syntheticEvent: event,
-            nativeEvent: event.nativeEvent,
-            target: targetRef.current
-        };
-        if (value && value.length > 0 &&
-            (keyCode === kendo_react_common_1.Keys.left || keyCode === kendo_react_common_1.Keys.right ||
-                keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end ||
-                keyCode === kendo_react_common_1.Keys.delete)) {
-            var tagsToRender = tagsToRenderRef.current;
-            var focusedIndex = focusedTagState ?
-                tagsToRender.findIndex(function (t) { return (0, utils_1.matchTags)(t, focusedTagState, dataItemKey); }) : -1;
-            var newFocusedTag = undefined;
-            var hasFocused = focusedIndex !== -1;
-            if (keyCode === kendo_react_common_1.Keys.left) {
-                if (hasFocused) {
-                    focusedIndex = Math.max(0, focusedIndex - 1);
-                }
-                else {
-                    focusedIndex = tagsToRender.length - 1;
-                }
-                newFocusedTag = tagsToRender[focusedIndex];
-            }
-            else if (keyCode === kendo_react_common_1.Keys.right) {
-                if (focusedIndex === tagsToRender.length - 1) {
-                    newFocusedTag = undefined;
-                }
-                else if (hasFocused) {
-                    focusedIndex = Math.min(tagsToRender.length - 1, focusedIndex + 1);
-                    newFocusedTag = tagsToRender[focusedIndex];
-                }
-            }
-            else if (keyCode === kendo_react_common_1.Keys.home) {
-                newFocusedTag = tagsToRender[0];
-            }
-            else if (keyCode === kendo_react_common_1.Keys.end) {
-                newFocusedTag = tagsToRender[tagsToRender.length - 1];
-            }
-            else if (keyCode === kendo_react_common_1.Keys.delete) {
-                if (hasFocused) {
-                    changeValue(ev, tagsToRender[focusedIndex].data, 'delete');
-                }
-            }
-            if (newFocusedTag !== focusedTagState) {
-                setFocusedTagState(newFocusedTag);
-            }
-        }
-        if (isOpen) {
-            if (keyCode === kendo_react_common_1.Keys.esc || (altKey && keyCode === kendo_react_common_1.Keys.up)) {
-                event.preventDefault();
-                closePopup(ev);
-            }
-            else if (treeviewElement && treeviewElement.querySelector('.k-focus') &&
-                (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.down ||
-                    keyCode === kendo_react_common_1.Keys.left || keyCode === kendo_react_common_1.Keys.right ||
-                    keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end)) {
-                if (keyCode === kendo_react_common_1.Keys.up && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.element)) {
-                    var items = Array.from(treeviewElement.querySelectorAll('.k-treeview-item'));
-                    var focusedItem = __spreadArray([], items, true).reverse().find(function (i) { return Boolean(i && i.querySelector('.k-focus')); });
-                    if (focusedItem && items.indexOf(focusedItem) === 0) {
-                        return switchFocus(function () { var _a; focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element); });
-                    }
-                }
-                switchFocus(kendo_react_common_1.noop);
-            }
-            else if (keyCode === kendo_react_common_1.Keys.down) {
-                switchFocus(function () { var _a; focusElement(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) || treeviewElement); });
-            }
-        }
-        else {
-            if (altKey && keyCode === kendo_react_common_1.Keys.down) {
-                event.preventDefault();
-                openPopup(ev);
-            }
-        }
-    }, [isOpen, closePopup, focusElement, switchFocus, openPopup, focusedTagState, dataItemKey, value, changeValue]);
-    var onInputKeyDown = React.useCallback(function (event) {
-        var keyCode = event.keyCode, altKey = event.altKey;
-        if (altKey || (keyCode !== kendo_react_common_1.Keys.up && keyCode !== kendo_react_common_1.Keys.down)) {
-            return;
-        }
-        event.preventDefault();
-        switchFocus(keyCode === kendo_react_common_1.Keys.up ?
-            function () { focusElement(elementRef.current); } :
-            function () { focusElement(treeViewRef.current && treeViewRef.current.element); });
-    }, [focusElement, switchFocus]);
-    var onClear = React.useCallback(function (event) {
-        if (!targetRef.current) {
-            return;
-        }
-        var ev = {
-            syntheticEvent: event,
-            nativeEvent: event.nativeEvent,
-            target: targetRef.current
-        };
-        changeValue(ev, [], 'clear');
-        closePopup(ev);
-        event.preventDefault();
-    }, [changeValue, closePopup]);
-    var onTagDelete = React.useCallback(function (itemsToRemove, event) {
-        var _a;
-        closePopup({ target: targetRef.current });
-        if (!focusedState) {
-            focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element);
-        }
-        changeValue({
-            syntheticEvent: event,
-            nativeEvent: event.nativeEvent,
-            target: targetRef.current
-        }, itemsToRemove, 'delete');
-    }, [changeValue, closePopup, focusElement, focusedState]);
-    var onExpand = React.useCallback(function (event) {
-        if (props.onExpandChange && targetRef.current) {
-            var item = event.item, itemHierarchicalIndex = event.itemHierarchicalIndex, nativeEvent = event.nativeEvent, syntheticEvent = event.syntheticEvent;
-            var expandEvent = {
-                level: toLevel(itemHierarchicalIndex),
-                item: item,
-                nativeEvent: nativeEvent,
-                syntheticEvent: syntheticEvent,
-                target: targetRef.current
-            };
-            props.onExpandChange.call(undefined, expandEvent);
-        }
-    }, [props.onExpandChange]);
-    var onFilterChange = React.useCallback(function (event) {
-        if (props.onFilterChange && targetRef.current) {
-            var filterDesc = { field: props.textField, operator: 'contains', value: event.target.value };
-            var ev = {
-                filter: filterDesc,
-                syntheticEvent: event.syntheticEvent,
-                nativeEvent: event.nativeEvent,
-                target: targetRef.current
-            };
-            props.onFilterChange.call(undefined, ev);
-            if (props.filter === undefined) {
-                setFilterState(event.target.value);
-            }
-        }
-    }, [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, ref: 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, dir: dir })) : (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 currentTagsToRender = isAdaptive && isOpen ? currentTreeValue : tagsToRenderRef.current;
-    var multiselecttree = (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-multiselecttree 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": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy ? props.ariaDescribedBy : 'tagslist-' + id, "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 })) : placeholder),
-            React.createElement("span", { className: "k-input-inner" },
-                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-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, ref: 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, dir: dir })) : (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 = {
-    opened: PropTypes.bool,
-    disabled: PropTypes.bool,
-    dir: PropTypes.string,
-    tabIndex: PropTypes.number,
-    accessKey: PropTypes.string,
-    data: PropTypes.array,
-    value: PropTypes.any,
-    valueMap: PropTypes.func,
-    placeholder: PropTypes.string,
-    dataItemKey: PropTypes.string.isRequired,
-    textField: PropTypes.string.isRequired,
-    checkField: PropTypes.string,
-    checkIndeterminateField: PropTypes.string,
-    expandField: PropTypes.string,
-    subItemsField: PropTypes.string,
-    className: PropTypes.string,
-    style: PropTypes.object,
-    label: PropTypes.string,
-    validationMessage: PropTypes.string,
-    validityStyles: PropTypes.bool,
-    valid: PropTypes.bool,
-    required: PropTypes.bool,
-    name: PropTypes.string,
-    id: PropTypes.string,
-    ariaLabelledBy: PropTypes.string,
-    ariaDescribedBy: PropTypes.string,
-    filterable: PropTypes.bool,
-    filter: PropTypes.string,
-    loading: PropTypes.bool,
-    tags: PropTypes.arrayOf(PropTypes.shape({
-        text: PropTypes.string,
-        data: PropTypes.arrayOf(PropTypes.any)
-    })),
-    popupSettings: PropTypes.shape({
-        animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-                openDuration: PropTypes.number,
-                closeDuration: PropTypes.number
-            })]),
-        popupClass: PropTypes.string,
-        className: PropTypes.string,
-        appendTo: PropTypes.any,
-        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    }),
-    onOpen: PropTypes.func,
-    onClose: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    onFilterChange: PropTypes.func,
-    onExpandChange: PropTypes.func,
-    onCancel: PropTypes.func,
-    item: PropTypes.func,
-    listNoData: PropTypes.func,
-    adaptiveTitle: PropTypes.string,
-    adaptive: PropTypes.bool
-};
-exports.MultiSelectTree.displayName = 'KendoReactMultiSelectTree';
-exports.MultiSelectTree.defaultProps = defaultProps;
-exports.MultiSelectTree.propTypes = propTypes;