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

package/dist/es/DropDownList/DropDownListProps.js

@@ -1,2 +0,0 @@
-export {};
-// tslint:enable:max-line-length

package/dist/es/DropDownTree/DropDownTree.js

@@ -1,540 +0,0 @@
-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;
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-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';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from './../package-metadata';
-import { getItemValue, areSame, isPresent } from '../common/utils';
-import { useDropdownWidth } from './useDropdownWidth';
-import { ListNoData } from './ListNoData';
-import { messages, clear, nodata } from './../messages';
-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) {
-    return React.createElement("span", { className: "k-input-value-text" }, props.children);
-};
-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 = {
-    selectField: 'selected',
-    subItemsField: 'items',
-    popupSettings: {
-        animate: true,
-        width: '200px',
-        height: '200px'
-    },
-    data: [],
-    required: false,
-    style: {},
-    validityStyles: true,
-    size: 'medium',
-    rounded: 'medium',
-    fillMode: 'solid'
-};
-/**
- * Represents the PropsContext of the `DropDownTree` component.
- * Used for global configuration of all `DropDownTree` instances.
- *
- * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
- */
-export var DropDownTreePropsContext = createPropsContext();
-/**
- * Represents the DropDownTree component.
- *
- * Accepts properties of type [DropDownTreeProps]({% slug api_dropdowns_dropdowntreeprops %}).
- * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
- *
- * @example
- * ```jsx
- * const selectField = "selected";
- * const expandField = "expanded";
- * const dataItemKey = "id";
- * const textField = "text";
- * const subItemsField = "items";
- * const fields = {
- *  selectField,
- *  expandField,
- *  dataItemKey,
- *  subItemsField,
- * };
- *  const App = () => {
- *  const [value, setValue] = React.useState(null);
- *  const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
- *  const onChange = (event) => setValue(event.value);
- *  const onExpandChange = React.useCallback(
- *    (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
- *    [expanded]
- *  );
- *  const treeData = React.useMemo(
- *    () =>
- *      processTreeData(
- *        data,
- *        {
- *          expanded,
- *          value,
- *        },
- *        fields
- *      ),
- *    [expanded, value]
- *  );
- *
- *  return (
- *      <DropDownTree
- *        style={{
- *          width: '300px',
- *        }}
- *        placeholder="Please select ..."
- *        data={treeData}
- *        value={value}
- *        onChange={onChange}
- *        textField={textField}
- *        dataItemKey={dataItemKey}
- *        selectField={selectField}
- *        expandField={expandField}
- *        onExpandChange={onExpandChange}
- *      />
- *  );
- * };
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export var DropDownTree = React.forwardRef(function (directProps, ref) {
-    var _a;
-    validatePackage(packageMetadata);
-    var props = usePropsContext(DropDownTreePropsContext, directProps);
-    var combinedProps = __assign(__assign({}, defaultProps), props);
-    var calculatedId = React.useMemo(function () { return guid(); }, []);
-    var id = combinedProps.id || calculatedId;
-    var data = combinedProps.data, dataItemKey = combinedProps.dataItemKey, popupSettings = combinedProps.popupSettings, style = combinedProps.style, opened = combinedProps.opened, disabled = combinedProps.disabled, _b = combinedProps.onOpen, onOpen = _b === void 0 ? noop : _b, _c = combinedProps.onClose, onClose = _c === void 0 ? noop : _c, placeholder = combinedProps.placeholder, label = combinedProps.label, name = combinedProps.name, selectField = combinedProps.selectField, subItemsField = combinedProps.subItemsField, validationMessage = combinedProps.validationMessage, valid = combinedProps.valid, required = combinedProps.required, validityStyles = combinedProps.validityStyles;
-    var tabIndex = getTabIndex(combinedProps.tabIndex, disabled);
-    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);
-    var _d = React.useState(undefined), stateValue = _d[0], setStateValue = _d[1];
-    var controlled = combinedProps.value !== undefined;
-    var value = controlled ? combinedProps.value : (stateValue !== undefined ? stateValue : combinedProps.defaultValue);
-    var hasValue = isPresent(value);
-    var currentValueText = hasValue ? getItemValue(value, combinedProps.textField) : '';
-    var validity = getValidity({ validationMessage: validationMessage, valid: valid, required: required }, hasValue);
-    var focus = React.useCallback(function () { return elementRef.current && elementRef.current.focus(); }, []);
-    React.useImperativeHandle(target, function () { return ({
-        props: combinedProps,
-        element: elementRef.current,
-        focus: focus
-    }); });
-    React.useImperativeHandle(ref, function () { return target.current; });
-    var dir = useRtl(elementRef, combinedProps.dir);
-    var initialStyleWidth = popupSettings.width !== undefined ?
-        popupSettings.width : (style.width !== undefined ? style.width : defaultProps.popupSettings.width);
-    var popupWidth = useDropdownWidth(elementRef, initialStyleWidth);
-    var popupStyles = __assign({ width: popupWidth }, (dir !== undefined ? { direction: dir } : {}));
-    var _e = React.useState(false), open = _e[0], setOpen = _e[1];
-    var isOpen = opened !== undefined ? opened : open;
-    var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
-    var _g = React.useState(), windowWidth = _g[0], setWindowWidth = _g[1];
-    var isAdaptive = !!(windowWidth && windowWidth <= MOBILE_MEDIUM_DEVISE && combinedProps.adaptive);
-    var _h = React.useState(''), filter = _h[0], setFilter = _h[1];
-    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 = 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) {
-                var openEvent = __assign({}, event);
-                onOpen.call(undefined, openEvent);
-            }
-            if (opened === undefined) {
-                setOpen(true);
-            }
-        }
-    }, [isOpen, opened, onOpen]);
-    var closePopup = React.useCallback(function (event) {
-        if (isOpen) {
-            if (onClose) {
-                var closeEvent = __assign({}, event);
-                onClose.call(undefined, closeEvent);
-            }
-            if (opened === undefined) {
-                setOpen(false);
-                if (isAdaptive) {
-                    setTimeout(function () {
-                        var _a;
-                        focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
-                    }, 300);
-                }
-            }
-        }
-    }, [isOpen, opened, onClose, isAdaptive]);
-    var onWrapperClick = React.useCallback(function (event) {
-        if (!event.isDefaultPrevented() && target.current) {
-            setFocused(true);
-            var ev = {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                target: target.current
-            };
-            (isOpen ? closePopup : openPopup)(ev);
-        }
-    }, [isOpen, opened, onOpen, onClose]);
-    var switchFocus = React.useCallback(function (focusFn) {
-        skipFocusRef.current = true;
-        focusFn();
-        window.setTimeout(function () { return skipFocusRef.current = false; }, 0);
-    }, []);
-    var onWrapperKeyDown = React.useCallback(function (event) {
-        var _a, _b;
-        var keyCode = event.keyCode, altKey = event.altKey;
-        var treeview = treeViewRef.current && treeViewRef.current.element;
-        if (!target.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: target.current
-        };
-        if (isOpen) {
-            if (keyCode === Keys.esc || (altKey && keyCode === Keys.up)) {
-                event.preventDefault();
-                closePopup(ev);
-            }
-            else if (treeview && treeview.querySelector('.k-focus') &&
-                (keyCode === Keys.up || keyCode === Keys.down ||
-                    keyCode === Keys.left || keyCode === Keys.right ||
-                    keyCode === Keys.home || keyCode === Keys.end)) {
-                if (keyCode === Keys.up && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.element)) {
-                    var items = Array.from(treeview.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(noop);
-            }
-            else if (keyCode === Keys.down) {
-                switchFocus(function () { var _a; focusElement(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) || treeview); });
-            }
-        }
-        else if (altKey && keyCode === Keys.down) {
-            event.preventDefault();
-            openPopup(ev);
-        }
-        else if (!isOpen) {
-            if (keyCode === Keys.esc) {
-                onClear(event);
-            }
-        }
-    }, [isOpen, opened, onOpen, onClose]);
-    var onInputKeyDown = React.useCallback(function (event) {
-        var keyCode = event.keyCode, altKey = event.altKey;
-        if (altKey || (keyCode !== Keys.up && keyCode !== Keys.down)) {
-            return;
-        }
-        event.preventDefault();
-        switchFocus(keyCode === Keys.up ?
-            function () { focusElement(elementRef.current); } :
-            function () { focusElement(treeViewRef.current && treeViewRef.current.element); });
-    }, []);
-    var focusElement = React.useCallback(function (element) {
-        if (element) {
-            switchFocus(function () { return element.focus(); });
-        }
-    }, []);
-    var onPopupOpened = React.useCallback(function () {
-        var _a;
-        if (!focused && isOpen && !opened) {
-            closePopup({ target: target.current });
-        }
-        else {
-            if (props.filterable) {
-                focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element);
-            }
-            else {
-                focusElement(treeViewRef.current && treeViewRef.current.element);
-            }
-        }
-    }, [onClose, props.filterable, focused, opened, isOpen]);
-    var onPopupClosed = React.useCallback(function () {
-        if (focused) {
-            // Move the focus from treeview to dropdown without triggering Focus or Blur events.
-            focusElement(elementRef.current);
-        }
-    }, [focused]);
-    var onFocus = React.useCallback(function (event) {
-        if (!focused && !skipFocusRef.current) {
-            setFocused(true);
-            if (props.onFocus && target.current) {
-                var focusEvent = {
-                    syntheticEvent: event,
-                    nativeEvent: event.nativeEvent,
-                    target: target.current
-                };
-                props.onFocus.call(undefined, focusEvent);
-            }
-        }
-    }, [focused, props.onFocus]);
-    var onBlur = React.useCallback(function (event) {
-        if (focused && !skipFocusRef.current && target.current) {
-            setFocused(false);
-            var ev = {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                target: target.current
-            };
-            if (props.onBlur) {
-                var focusEvent = __assign({}, ev);
-                props.onBlur.call(undefined, focusEvent);
-            }
-            if (!isAdaptive) {
-                closePopup(ev);
-            }
-        }
-    }, [focused, props.onBlur, isOpen, opened, onClose]);
-    var onWrapperMouseDown = React.useCallback(function () {
-        if (focused) {
-            // moving focus from treeview to dropdown triggers Focus and Blur events.
-            switchFocus(noop);
-        }
-        if (isAdaptive) {
-            setTimeout(function () {
-                var _a;
-                focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
-            }, 300);
-        }
-    }, [focused, isAdaptive]);
-    var changeValue = React.useCallback(function (event, newValue, hierarchicalIndex) {
-        if (props.onChange) {
-            var changeEvent = __assign({ value: newValue, level: hierarchicalIndex ? toLevel(hierarchicalIndex) : [] }, event);
-            props.onChange.call(undefined, changeEvent);
-        }
-        if (!controlled) {
-            setStateValue(newValue);
-        }
-    }, [props.onChange, controlled]);
-    var onChange = React.useCallback(function (event) {
-        if (areSame(event.item, value, dataItemKey) || !target.current) {
-            return;
-        }
-        var item = event.item, itemHierarchicalIndex = event.itemHierarchicalIndex, nativeEvent = event.nativeEvent, syntheticEvent = event.syntheticEvent;
-        var ev = {
-            syntheticEvent: syntheticEvent,
-            nativeEvent: nativeEvent,
-            target: target.current
-        };
-        changeValue(ev, item, itemHierarchicalIndex);
-        closePopup(ev);
-    }, [controlled, value, props.onChange, dataItemKey, isOpen, opened, onClose]);
-    var onClear = React.useCallback(function (event) {
-        if (!target.current) {
-            return;
-        }
-        var ev = {
-            syntheticEvent: event,
-            nativeEvent: event.nativeEvent,
-            target: target.current
-        };
-        changeValue(ev, null);
-        closePopup(ev);
-        event.preventDefault();
-    }, [controlled, props.onChange, isOpen, opened, onClose]);
-    var onExpand = React.useCallback(function (event) {
-        event.syntheticEvent.stopPropagation();
-        if (props.onExpandChange && target.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: target.current
-            };
-            props.onExpandChange.call(undefined, expandEvent);
-        }
-    }, [props.onExpandChange]);
-    var onFilterChange = React.useCallback(function (event) {
-        if (props.onFilterChange && target.current) {
-            var filterDesc = { field: props.textField, operator: 'contains', value: event.target.value };
-            var ev = {
-                filter: filterDesc,
-                syntheticEvent: event.syntheticEvent,
-                nativeEvent: event.nativeEvent,
-                target: target.current
-            };
-            props.onFilterChange.call(undefined, ev);
-            if (props.filter === undefined) {
-                setFilter(event.target.value);
-            }
-        }
-    }, [props.onFilterChange, props.filter, props.textField]);
-    var renderAdaptiveListContainer = function () {
-        var mobileFilter = combinedProps.filterable ? (React.createElement(ListFilter, { value: combinedProps.filter === undefined ? filter : combinedProps.filter, ref: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
-        var actionSheetProps = {
-            adaptiveTitle: combinedProps.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: combinedProps.textField, selectField: selectField, expandField: combinedProps.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: combinedProps.item, dir: dir })) : (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) {
-                var _a;
-                return extendDataItem(item, subItemsField, (_a = {}, _a[selectField] = areSame(item, value, dataItemKey), _a));
-            });
-    }, [data, value, controlled, hasValue, selectField, subItemsField]);
-    var NoData = combinedProps.listNoData || ListNoData;
-    var ValueComponent = combinedProps.valueHolder || ValueHolder;
-    var localization = useLocalization();
-    var isValid = !validityStyles || validity.valid;
-    var size = combinedProps.size, rounded = combinedProps.rounded, fillMode = combinedProps.fillMode;
-    var dropdowntree = (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: classNames('k-dropdowntree k-picker', combinedProps.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'] = combinedProps.loading,
-                _a['k-required'] = required,
-                _a['k-disabled'] = combinedProps.disabled,
-                _a)), tabIndex: tabIndex, accessKey: combinedProps.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": combinedProps.ariaLabelledBy, "aria-describedby": combinedProps.ariaDescribedBy, "aria-required": required },
-            React.createElement("span", { className: "k-input-inner" },
-                React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
-            combinedProps.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: combinedProps.valueMap ? combinedProps.valueMap.call(undefined, value) : value })),
-            !isAdaptive && React.createElement(Popup, { className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: classNames(popupSettings.popupClass, 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
-                combinedProps.filterable && (React.createElement(ListFilter, { value: combinedProps.filter === undefined ? filter : combinedProps.filter, ref: 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: combinedProps.textField, selectField: selectField, expandField: combinedProps.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: combinedProps.item, dir: dir })) : (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 = {
-    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,
-    selectField: 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,
-    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,
-    item: PropTypes.func,
-    valueHolder: PropTypes.func,
-    listNoData: PropTypes.func,
-    adaptiveTitle: PropTypes.string,
-    adaptive: PropTypes.bool
-};
-DropDownTree.displayName = 'KendoReactDropDownTree';
-DropDownTree.propTypes = propTypes;