@progress/kendo-vue-dropdowns 3.10.2 → 3.11.0-dev.202305230623

package/dist/es/DropDownTree/DropDownTree.js

@@ -1,639 +1,864 @@
-// // @ts-ignore
-// import * as Vue from 'vue';
-// const allVue = Vue as any;
-// const gh = allVue.h;
-// const isV3 = allVue.version && allVue.version[0] === '3';
-// import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
-// type DefaultData<V> =  object | ((this: V) => {});
-// type DefaultMethods<V> =  { [key: string]: (this: V, ...args: any[]) => any };
-// import {
-//     classNames,
-//     noop,
-//     useRtl,
-//     getTabIndex,
-//     Keys,
-//     mapTree,
-//     extendDataItem,
-//     guid,
-//     kendoThemeMaps,
-//     Icon
-// } from '@progress/kendo-vue-common';
-// import { Popup } from '@progress/kendo-vue-popup';
-// import { provideLocalizationService } from '@progress/kendo-vue-intl';
-// import { TreeView, TreeViewExpandChangeEvent, TreeViewItemClickEvent } from '@progress/kendo-vue-treeview';
-// import { FilterDescriptor } from '@progress/kendo-data-query';
-// import { validatePackage } from '@progress/kendo-vue-common';
-// import { packageMetadata } from './../package-metadata';
-// import {
-//     DropDownTreeProps, DropDownTreeHandle, DropDownTreeFilterChangeEvent,
-//     DropDownTreeFocusEvent, DropDownTreeBlurEvent,
-//     DropDownTreeChangeEvent, DropDownTreeOpenEvent, DropDownTreeCloseEvent, DropDownTreeExpandEvent,
-//     ValueHolderProps
-// } from './DropDownTreeProps';
-// import { getItemValue, areSame, isPresent } from '../common/utils';
-// import { useDropdownWidth } from './useDropdownWidth';
-// import { ListNoData } from './ListNoData';
-// import { DropdownEvent } from '../common/events';
-// import { messages, clear, nodata } from './../messages/main';
-// import { FloatingLabel } from '@progress/kendo-vue-labels';
-// import { ListFilter } from '../common/ListFilter';
-// import { Button } from '@progress/kendo-vue-buttons';
-// import { xIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
-// const { sizeMap, roundedMap } = kendoThemeMaps;
-// const VALIDATION_MESSAGE: string = 'Please select a value from the list!';
+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));
+};
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames, noop,
+//  useRtl,
+getTabIndex, Keys, guid, kendoThemeMaps, Icon, getRef, templateRendering, getListeners, getTemplate, setRef } from '@progress/kendo-vue-common';
+import { Popup } from '@progress/kendo-vue-popup';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { TreeView } from '@progress/kendo-vue-treeview';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from './../package-metadata';
+import { getItemValue, areSame, isPresent } from '../common/utils';
+import { ListNoData } from './ListNoData';
+import { messages, clear, nodata } from './../messages/main';
+import { FloatingLabel } from '@progress/kendo-vue-labels';
+import { ListFilter } from '../common/ListFilter';
+import { Button } from '@progress/kendo-vue-buttons';
+import { xIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
+var sizeMap = kendoThemeMaps.sizeMap,
+  roundedMap = kendoThemeMaps.roundedMap;
+var VALIDATION_MESSAGE = 'Please select a value from the list!';
 // const ValueHolder: React.FunctionComponent<ValueHolderProps> = props =>
-//   <span className="k-input-value-text">{props.children}</span>;
-// const toLevel = (hierarchicalIndex: string): number[] =>
-//     hierarchicalIndex.split('_').map(i => parseInt(i, 10));
-// const getValidity = (parameters: { validationMessage?: string; valid?: 
-// boolean; required?: boolean }, hasValue: boolean) => {
-//     const {validationMessage, valid, required } = parameters;
-//     return ({
-//         customError: validationMessage !== undefined,
-//         valid: Boolean(valid !== undefined ? valid : (!required || hasValue)),
-//         valueMissing: !hasValue
-//     });
-// };
-// const defaultProps = {
-//     selectField: 'selected',
-//     subItemsField: 'items',
-//     popupSettings: {
-//         animate: true,
-//         width: '200px',
-//         height: '200px'
-//     },
-//     required: false,
-//     validityStyles: true,
-//     size: 'medium' as DropDownTreeProps['size'],
-//     rounded: 'medium' as DropDownTreeProps['rounded'],
-//     fillMode: 'solid' as DropDownTreeProps['fillMode']
-// };
-// /**
-//  * @hidden
-//  */
-// export interface DropDownTreeState {
-//     calculatedId: string;
-// }
-// /**
-//  * @hidden
-//  */
-// export interface DropDownTreeComputed {
-//     [key: string]: any;
-//     wrapperClass: object;
-// }
-// /**
-//  * @hidden
-//  */
-// export interface DropDownTreeMethods {
-//     [key: string]: any;
-// }
-// /**
-//  * @hidden
-//  */
-// export interface DropDownTreeData {
-// }
-// /**
-//  * @hidden
-//  */
-// export interface DropDownTreeAll extends Vue2type, DropDownTreeMethods,
-//     DropDownTreeData, DropDownTreeComputed, DropDownTreeState { 
-// }
-// /**
-//  * @hidden
-//  */
-// let DropDownTreeVue2: ComponentOptions<DropDownTreeAll, DefaultData<DropDownTreeData>, 
-// DefaultMethods<DropDownTreeAll>, DropDownTreeComputed, RecordPropsDefinition<DropDownTreeProps>> = {
-//     name: 'KendoDropDownTree',
-//     props: {
-//     validatePackage(packageMetadata);
-//     const props: DropDownTreeProps = usePropsContext<DropDownTreeProps>(DropDownTreePropsContext, directProps);
-//     const calculatedId = React.useMemo(() => guid(), []);
-//     const id: string = props.id || calculatedId;
-//     const {
-//         data = [], dataItemKey, popupSettings = {}, style = {},
-//         opened, disabled, onOpen = noop, onClose = noop,
-//         placeholder, label, name, selectField = defaultProps.selectField,
-//         subItemsField = defaultProps.subItemsField,
-//         validationMessage, valid,
-//         required, validityStyles
-//     } = props;
-//     const tabIndex = getTabIndex(props.tabIndex, disabled);
-//     const target = React.useRef<DropDownTreeHandle>(null);
-//     const elementRef = React.useRef<HTMLSpanElement>(null);
-//     const inputRef = React.useRef<HTMLInputElement>(null);
-//     const selectRef = React.useRef<HTMLSelectElement>(null);
-//     const treeViewRef = React.useRef<TreeView>(null);
-//     const skipFocusRef = React.useRef<boolean>(false);
-//     const [ stateValue, setStateValue ] = React.useState<any>(undefined);
-//     const controlled = props.value !== undefined;
-//     const value = controlled ? props.value : (stateValue !== undefined ? stateValue : props.defaultValue);
-//     const hasValue = isPresent(value);
-//     const currentValueText = hasValue ? getItemValue(value, props.textField) : '';
-//     const validity = getValidity({ validationMessage, valid, required }, hasValue);
-//     const focus = React.useCallback(() => elementRef.current && elementRef.current.focus(), []);
-//     React.useImperativeHandle(
-//         target,
-//         () => ({
-//             props,
-//             element: elementRef.current,
-//             focus
-//         })
-//     );
-//     React.useImperativeHandle<DropDownTreeHandle | null, DropDownTreeHandle | null>(ref, () => target.current);
-//     const dir = useRtl(elementRef, props.dir);
-//     const initialStyleWidth = popupSettings.width !== undefined ?
-//         popupSettings.width : (style.width !== undefined ? style.width : defaultProps.popupSettings.width);
-//     const popupWidth = useDropdownWidth(elementRef, initialStyleWidth);
-//     const popupStyles: React.CSSProperties = {
-//         width: popupWidth,
-//         ...(dir !== undefined ? { direction: (dir as any) } : {})
-//     };
-//     const [open, setOpen] = React.useState(false);
-//     const isOpen = opened !== undefined ? opened : open;
-//     const [focused, setFocused] = React.useState(false);
-//     const [filter, setFilter] = React.useState('');
-//     const setValidity = React.useCallback(
-//         () => {
-//             if (selectRef.current && selectRef.current.setCustomValidity) {
-//                 selectRef.current.setCustomValidity(
-//                     validity.valid
-//                         ? ''
-//                         : validationMessage === undefined ? VALIDATION_MESSAGE : validationMessage
-//                 );
-//             }
-//         },
-//         [validationMessage, validity]
-//     );
-//     React.useEffect(setValidity);
-//     const openPopup = React.useCallback(
-//         (event: DropdownEvent<DropDownTreeHandle>) => {
-//             if (!isOpen) {
-//                 if (onOpen) {
-//                     const openEvent: DropDownTreeOpenEvent = { ...event };
-//                     onOpen.call(undefined, openEvent);
-//                 }
-//                 if (opened === undefined) {
-//                     setOpen(true);
-//                 }
-//             }
-//         },
-//         [isOpen, opened, onOpen]
-//     );
-//     const closePopup = React.useCallback(
-//         (event: DropdownEvent<DropDownTreeHandle>) => {
-//             if (isOpen) {
-//                 if (onClose) {
-//                     const closeEvent: DropDownTreeCloseEvent = { ...event };
-//                     onClose.call(undefined, closeEvent);
-//                 }
-//                 if (opened === undefined) {
-//                     setOpen(false);
-//                 }
-//             }
-//         },
-//         [isOpen, opened, onClose]
-//     );
-//     const onWrapperClick = React.useCallback(
-//         (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-//             if (!event.isDefaultPrevented() && target.current) {
-//                 setFocused(true);
-//                 const ev: DropdownEvent<DropDownTreeHandle> = {
-//                     syntheticEvent: event,
-//                     nativeEvent: event.nativeEvent,
-//                     target: target.current
-//                 };
-//                 (isOpen ? closePopup : openPopup)(ev);
-//             }
-//         },
-//         [isOpen, opened, onOpen, onClose]
-//     );
-//     const switchFocus = React.useCallback(
-//         (focusFn: () => void) => {
-//             skipFocusRef.current = true;
-//             focusFn();
-//             window.setTimeout(() => skipFocusRef.current = false, 0);
-//         },
-//         []
-//     );
-//     const onWrapperKeyDown = React.useCallback(
-//         (event: React.KeyboardEvent<HTMLSpanElement>) => {
-//             const { keyCode, altKey } = event;
-//             const treeview = treeViewRef.current && treeViewRef.current.element;
-//             if (!target.current || (event.isDefaultPrevented() && inputRef.current === event.target)) {
-//                 return;
-//             }
-//             const ev: DropdownEvent<DropDownTreeHandle> = {
-//                 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 && inputRef.current) {
-//                         const items = 
-// Array.from(treeview.querySelectorAll('.k-treeview-item'));
-//                         const focusedItem = 
-// [...items].reverse().find(i => Boolean(i && i.querySelector('.k-focus')));
-//                         if (focusedItem && items.indexOf(focusedItem) === 0) {
-//                             return switchFocus(() => { focusElement(inputRef.current); });
-//                         }
-//                     }
-//                     switchFocus(noop);
-//                 } else if (keyCode === Keys.down) {
-//                     switchFocus(() => { focusElement(inputRef.current || treeview); });
-//                 }
-//             } else {
-//                 if (altKey && keyCode === Keys.down) {
-//                     event.preventDefault();
-//                     openPopup(ev);
-//                 }
-//             }
-//         },
-//         [isOpen, opened, onOpen, onClose]
-//     );
-//     const onInputKeyDown = React.useCallback(
-//         (event: React.KeyboardEvent<HTMLSpanElement>) => {
-//             const { keyCode, altKey } = event;
-//             if (altKey || (keyCode !== Keys.up && keyCode !== Keys.down)) {
-//                 return;
-//             }
-//             event.preventDefault();
-//             switchFocus(
-//                 keyCode === Keys.up ?
-//                     () => { focusElement(elementRef.current); } :
-//                     () => { focusElement(treeViewRef.current && treeViewRef.current.element); }
-//             );
-//         },
-//         []
-//     );
-//     const focusElement = React.useCallback(
-//         (element: HTMLElement | null) => {
-//             if (element) {
-//                 switchFocus(() => element.focus());
-//             }
-//         },
-//         []
-//     );
-//     const onPopupOpened = React.useCallback(
-//         () => {
-//             if (!focused && isOpen && !opened) {
-//                 closePopup({ target: target.current } as any);
-//             } else {
-//                 if (props.filterable) {
-//                     focusElement(inputRef.current);
-//                 } else {
-//                     focusElement(treeViewRef.current && treeViewRef.current.element);
-//                 }
-//             }
-//         },
-//         [onClose, props.filterable, focused, opened, isOpen]
-//     );
-//     const onPopupClosed = React.useCallback(
-//         () => {
-//             if (focused) {
-//                 // Move the focus from treeview to dropdown without triggering Focus or Blur events.
-//                 focusElement(elementRef.current);
-//             }
-//         },
-//         [focused]
-//     );
-//     const onFocus = React.useCallback(
-//         (event: React.FocusEvent<HTMLSpanElement>) => {
-//             if (!focused && !skipFocusRef.current) {
-//                 setFocused(true);
-//                 if (props.onFocus && target.current) {
-//                     const focusEvent: DropDownTreeFocusEvent = {
-//                         syntheticEvent: event,
-//                         nativeEvent: event.nativeEvent,
-//                         target: target.current
-//                     };
-//                     props.onFocus.call(undefined, focusEvent);
-//                 }
-//             }
-//         },
-//         [focused, props.onFocus]
-//     );
-//     const onBlur = React.useCallback(
-//         (event: React.FocusEvent<HTMLSpanElement>) => {
-//             if (focused && !skipFocusRef.current && target.current) {
-//                 setFocused(false);
-//                 const ev: DropdownEvent<DropDownTreeHandle> = {
-//                     syntheticEvent: event,
-//                     nativeEvent: event.nativeEvent,
-//                     target: target.current
-//                 };
-//                 if (props.onBlur) {
-//                     const focusEvent: DropDownTreeBlurEvent = { ...ev };
-//                     props.onBlur.call(undefined, focusEvent);
-//                 }
-//                 closePopup(ev);
-//             }
-//         },
-//         [focused, props.onBlur, isOpen, opened, onClose]
-//     );
-//     const onWrapperMouseDown = React.useCallback(
-//         () => {
-//             if (focused) {
-//                 // moving focus from treeview to dropdown triggers Focus and Blur events.
-//                 switchFocus(noop);
-//             }
-//         },
-//         [focused]
-//     );
-//     const changeValue = React.useCallback(
-//         (event: DropdownEvent<DropDownTreeHandle>, newValue: any, hierarchicalIndex?: string) => {
-//             if (props.onChange) {
-//                 const changeEvent: DropDownTreeChangeEvent = {
-//                     value: newValue,
-//                     level: hierarchicalIndex ? toLevel(hierarchicalIndex) : [],
-//                     ...event
-//                 };
-//                 props.onChange.call(undefined, changeEvent);
-//             }
-//             if (!controlled) {
-//                 setStateValue(newValue);
-//             }
-//         },
-//         [props.onChange, controlled]
-//     );
-//     const onChange = React.useCallback(
-//         (event: TreeViewItemClickEvent) => {
-//             if (areSame(event.item, value, dataItemKey) || !target.current) {
-//                 return;
-//             }
-//             const { item, itemHierarchicalIndex, nativeEvent, syntheticEvent } = event;
-//             const ev: DropdownEvent<DropDownTreeHandle> = {
-//                 syntheticEvent,
-//                 nativeEvent: nativeEvent,
-//                 target: target.current
-//             };
-//             changeValue(ev, item, itemHierarchicalIndex);
-//             closePopup(ev);
-//         },
-//         [controlled, value, props.onChange, dataItemKey, isOpen, opened, onClose]
-//     );
-//     const onClear = React.useCallback(
-//         (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-//             if (!target.current) {
-//                 return;
-//             }
-//             const ev: DropdownEvent<DropDownTreeHandle> = {
-//                 syntheticEvent: event,
-//                 nativeEvent: event.nativeEvent,
-//                 target: target.current
-//             };
-//             changeValue(ev, null);
-//             closePopup(ev);
-//             event.preventDefault();
-//         },
-//         [controlled, props.onChange, isOpen, opened, onClose]
-//     );
-//     const onExpand = React.useCallback(
-//         (event: TreeViewExpandChangeEvent) => {
-//             event.syntheticEvent.stopPropagation();
-//             if (props.onExpandChange && target.current) {
-//                 const { item, itemHierarchicalIndex, nativeEvent, syntheticEvent } = event;
-//                 const expandEvent: DropDownTreeExpandEvent = {
-//                     level: toLevel(itemHierarchicalIndex),
-//                     item, nativeEvent, syntheticEvent, target: target.current
-//                 };
-//                 props.onExpandChange.call(undefined, expandEvent);
-//             }
-//         },
-//         [props.onExpandChange]
-//     );
-//     const onFilterChange = React.useCallback(
-//         (event: React.ChangeEvent<HTMLInputElement>) => {
-//             if (props.onFilterChange && target.current) {
-//                 const filterDesc: FilterDescriptor
-// = { field: props.textField, operator: 'contains', value: event.target.value };
-//                 const ev: DropDownTreeFilterChangeEvent = {
-//                     filter: filterDesc,
-//                     syntheticEvent: event,
-//                     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]
-//     );
-//     const treeViewData = React.useMemo(
-//         () => {
-//             return (controlled || !hasValue) ? data :
-//                 mapTree(
-//                     data,
-//                     subItemsField,
-//                     item => extendDataItem(
-//                         item,
-//                         subItemsField,
-//                         { [selectField]: areSame(item, value, dataItemKey) }
-//                     )
-//                 );
-//         },
-//         [data, value, controlled, hasValue, selectField, subItemsField]
-//     );
-//     const NoData = props.listNoData || ListNoData;
-//     const ValueComponent = props.valueHolder || ValueHolder;
-//     const localization = useLocalization();
-//     const isValid = !validityStyles || validity.valid;
-//     const { size, rounded, fillMode } = props;
-//     const dropdowntree = (
-//       <span
-//         className={
-//             classNames('k-dropdowntree k-picker', props.className, {
-//                 [`k-picker-${sizeMap[size!] || size}`]: size,
-//                 [`k-rounded-${roundedMap[rounded!] || rounded}`]: rounded,
-//                 [`k-picker-${fillMode}`]: fillMode,
-//                 'k-focus': focused,
-//                 'k-invalid': !isValid,
-//                 'k-loading': props.loading,
-//                 'k-required': required,
-//                 'k-disabled': props.disabled
-//             })}
-//         tabIndex={tabIndex}
-//         accessKey={props.accessKey}
-//         id={id}
-//         style={label ? { ...style, width: undefined } : style}
-//         dir={dir}
-//         ref={elementRef}
-//         onKeyDown={disabled ? undefined : onWrapperKeyDown}
-//         onMouseDown={onWrapperMouseDown}
-//         onClick={disabled ? undefined : onWrapperClick}
-//         onFocus={onFocus}
-//         onBlur={onBlur}
-//         role="combobox"
-//         aria-haspopup="tree"
-//         aria-expanded={isOpen}
-//         aria-disabled={disabled}
-//         aria-label={label}
-//         aria-labelledby={props.ariaLabelledBy}
-//         aria-describedby={props.ariaDescribedBy}
-//         aria-required={required}
-//       >
-//         <span className="k-input-inner">
-//           <ValueComponent item={value}>{currentValueText || placeholder}</ValueComponent>
-//         </span>
-//         {props.loading && <IconWrap className="k-input-loading-icon" name='loading' />}
-//         {hasValue && !disabled && (
-//         <span
-//           onClick={onClear}
-//           className="k-clear-value"
-//           title={localization.toLanguageString(clear, messages[clear])}
-//           role="button"
-//           tabIndex={-1}
-//           onMouseDown={(e: any) => e.preventDefault()}
-//         >
-//           <IconWrap name='x' icon={xIcon} />
-//         </span>
-//         )}
-//         <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}
-//         />
-//         {/* Dummy component to support forms */}
-//         <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%' }}
-//         >
-//           <option value={props.valueMap ? props.valueMap.call(undefined, value) : value} />
-//         </select>
-//         <Popup
-//           className={classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' })}
-//           popupClass={classNames(
-//             popupSettings.popupClass,
-//             'k-list-container',
-//             'k-dropdowntree-popup'
-//           )}
-//           style={popupStyles}
-//           animate={popupSettings.animate}
-//           anchor={elementRef.current}
-//           show={isOpen}
-//           onOpen={onPopupOpened}
-//           onClose={onPopupClosed}
-//           appendTo={popupSettings.appendTo}
-//             >
-//           {props.filterable && (
-//             <ListFilter
-//               value={props.filter === undefined ? filter : props.filter}
-//               inputRef={inputRef}
-//               onChange={onFilterChange}
-//               onKeyDown={onInputKeyDown}
-//               size={size}
-//               rounded={rounded}
-//               fillMode={fillMode}
-//             />
-//                 )}
-//           {data.length > 0 ? (
-//             <TreeView
-//               ref={treeViewRef}
-//               tabIndex={tabIndex}
-//               data={treeViewData}
-//               focusIdField={dataItemKey}
-//               textField={props.textField}
-//               selectField={selectField}
-//               expandField={props.expandField}
-//               childrenField={subItemsField}
-//               expandIcons={true}
-//               onItemClick={onChange}
-//               onExpandChange={onExpand}
-//               size={size}
-//               item={props.item}
-//                     />
-//                 ) : (
-//                   <NoData>
-//                     {localization.toLanguageString(nodata, messages[nodata])}
-//                   </NoData>
-//                 )}
-//         </Popup>
-//       </span>
-//     );
-//     return label ? (
-//       <FloatingLabel
-//         label={label}
-//         editorValue={currentValueText}
-//         editorPlaceholder={placeholder}
-//         editorValid={isValid}
-//         editorDisabled={disabled}
-//         editorId={id}
-//         style={{ width: style ? style.width : undefined }}
-//         children={dropdowntree}
-//         dir={dir}
-//         />
-//     ) : dropdowntree;
-// });
-// const 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
-// };
-// DropDownTree.displayName = 'KendoReactDropDownTree';
-// DropDownTree.defaultProps = defaultProps;
-// (DropDownTree as any).propTypes = propTypes;
+//   <span class="k-input-value-text">{props.children}</span>;
+var toLevel = function toLevel(hierarchicalIndex) {
+  return hierarchicalIndex.split('_').map(function (i) {
+    return parseInt(i, 10);
+  });
+};
+var getValidity = function getValidity(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
+  };
+};
+/**
+ * @hidden
+ */
+var DropDownTreeVue2 = {
+  name: 'KendoDropDownTree',
+  model: {
+    event: 'changemodel'
+  },
+  // @ts-ignore
+  emits: {
+    open: null,
+    close: null,
+    focus: null,
+    blur: null,
+    change: null,
+    filterchange: null,
+    expandchange: null,
+    'changemodel': null,
+    'update:modelValue': null
+  },
+  props: {
+    opened: {
+      type: Boolean,
+      default: undefined
+    },
+    disabled: Boolean,
+    dir: String,
+    tabIndex: Number,
+    accessKey: String,
+    dataItems: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    value: {
+      type: [Object, String, Number, Boolean],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    modelValue: {
+      type: [Object, String, Number, Boolean],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    valueMap: Function,
+    placeholder: String,
+    dataItemKey: {
+      type: String,
+      required: true
+    },
+    textField: {
+      type: String,
+      required: true
+    },
+    selectField: {
+      type: String,
+      default: 'selected'
+    },
+    expandField: String,
+    subItemsField: {
+      type: String,
+      default: 'items'
+    },
+    className: String,
+    label: String,
+    validationMessage: String,
+    validityStyles: {
+      type: Boolean,
+      default: true
+    },
+    valid: {
+      type: Boolean,
+      default: undefined
+    },
+    required: Boolean,
+    name: String,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    filterable: Boolean,
+    filter: String,
+    loading: Boolean,
+    popupSettings: {
+      type: Object,
+      default: function _default() {
+        return {
+          animate: true,
+          height: '200px'
+        };
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'flat', 'outline', 'solid'].includes(value);
+      }
+    },
+    item: [String, Function, Object],
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
+    valueRender: [String, Function, Object],
+    listNoData: [String, Function, Object]
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.calculatedId = guid();
+    this.anchor = guid();
+  },
+  data: function data() {
+    return {
+      currentOpened: false,
+      focused: false,
+      filterState: '',
+      currentValue: undefined,
+      popupWidth: '200px'
+    };
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a;
+      var _b = this.$props,
+        validationMessage = _b.validationMessage,
+        valid = _b.valid,
+        required = _b.required,
+        validityStyles = _b.validityStyles;
+      var validity = getValidity({
+        validationMessage: validationMessage,
+        valid: valid,
+        required: required
+      }, this.hasValue);
+      var isValid = !validityStyles || validity.valid;
+      var _c = this.$props,
+        size = _c.size,
+        rounded = _c.rounded,
+        fillMode = _c.fillMode;
+      return _a = {
+        'k-dropdowntree': true,
+        'k-picker': true
+      }, _a[this.$props.className] = this.$props.className, _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'] = this.focused, _a['k-invalid'] = !isValid, _a['k-loading'] = this.$props.loading, _a['k-required'] = required, _a['k-disabled'] = this.$props.disabled, _a;
+    },
+    isOpen: function isOpen() {
+      return this.opened !== undefined ? this.opened : this.currentOpened;
+    },
+    computedValue: function computedValue() {
+      return this.value !== undefined ? this.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
+    },
+    hasValue: function hasValue() {
+      return isPresent(this.computedValue);
+    },
+    currentValueText: function currentValueText() {
+      return this.hasValue ? getItemValue(this.computedValue, this.$props.textField) : '';
+    }
+  },
+  mounted: function mounted() {
+    this.elementRef = getRef(this, 'kendoAnchor', this.anchor);
+    this.inputRef = getRef(this, 'input');
+    this.selectRef = getRef(this, 'select');
+    this.treeViewRef = getRef(this, 'treeView');
+    this.skipFocusRef = false;
+    this.popupRef = getRef(this, 'popup');
+    this.calculatePopupWidth();
+  },
+  updated: function updated() {
+    this.inputRef = getRef(this, 'input');
+    this.treeViewRef = getRef(this, 'treeView');
+    if (this.popupRef && this.isOpen && this.hasValue) {
+      this.popupRef.reposition();
+    }
+    this.setValidity();
+    this.calculatePopupWidth();
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+    var h = gh || createElement;
+    var id = this.$props.id || this.calculatedId;
+    var _a = this.$props,
+      dataItems = _a.dataItems,
+      dataItemKey = _a.dataItemKey,
+      popupSettings = _a.popupSettings,
+      disabled = _a.disabled,
+      placeholder = _a.placeholder,
+      label = _a.label,
+      name = _a.name,
+      selectField = _a.selectField,
+      subItemsField = _a.subItemsField,
+      validationMessage = _a.validationMessage,
+      valid = _a.valid,
+      required = _a.required,
+      validityStyles = _a.validityStyles;
+    var tabIndex = getTabIndex(this.$props.tabIndex, disabled);
+    var localization = provideLocalizationService(this);
+    var validity = getValidity({
+      validationMessage: validationMessage,
+      valid: valid,
+      required: required
+    }, this.hasValue);
+    var dir = this.$props.dir; // useRtl(elementRef, props.dir);
+    var itemTemplate = templateRendering.call(this, this.item, getListeners.call(this));
+    var valueTemplate = templateRendering.call(this, this.valueRender, getListeners.call(this));
+    var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
+    var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
+    var header = getTemplate.call(this, {
+      h: h,
+      template: headerTemplate
+    });
+    var footer = getTemplate.call(this, {
+      h: h,
+      template: footerTemplate
+    });
+    var listNoDataRender = templateRendering.call(this, this.$props.listNoData, getListeners.call(this));
+    var noDataDefault =
+    // @ts-ignore function children
+    h(ListNoData, this.v3 ? function () {
+      return [localization.toLanguageString(nodata, messages[nodata])];
+    } : [localization.toLanguageString(nodata, messages[nodata])]);
+    var noDataTemplate = getTemplate.call(this, {
+      h: h,
+      defaultRendering: noDataDefault,
+      template: listNoDataRender
+    });
+    var valueDefault = h("span", {
+      "class": "k-input-value-text"
+    }, [this.currentValueText || placeholder]);
+    var valueToRender = getTemplate.call(this, {
+      h: h,
+      defaultRendering: valueDefault,
+      template: valueTemplate,
+      additionalProps: {
+        value: this.computedValue
+      }
+    });
+    var isValid = !validityStyles || validity.valid;
+    var _b = this.$props,
+      size = _b.size,
+      rounded = _b.rounded,
+      fillMode = _b.fillMode;
+    var dropdowntree = h("span", {
+      "class": this.wrapperClass,
+      tabIndex: tabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: tabIndex,
+        accessKey: this.$props.accessKey,
+        id: id,
+        dir: dir,
+        role: "combobox",
+        "aria-haspopup": "tree",
+        "aria-expanded": this.isOpen,
+        "aria-disabled": disabled,
+        "aria-label": label,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-required": required
+      },
+      accessKey: this.$props.accessKey,
+      id: id,
+      dir: dir,
+      ref: setRef(this, 'kendoAnchor', this.anchor),
+      onKeydown: this.onWrapperKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.onWrapperKeyDown,
+        "click": this.onWrapperClick,
+        "mousedown": this.onWrapperMouseDown,
+        "focusin": this.onFocus,
+        "focusout": this.onBlur
+      },
+      onClick: this.onWrapperClick,
+      onMousedown: this.onWrapperMouseDown,
+      onFocusin: this.onFocus,
+      onFocusout: this.onBlur,
+      role: "combobox",
+      "aria-haspopup": "tree",
+      "aria-expanded": this.isOpen,
+      "aria-disabled": disabled,
+      "aria-label": label,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-required": required
+    }, [h("span", {
+      "class": "k-input-inner"
+    }, [valueToRender]), this.$props.loading && h(Icon, {
+      "class": "k-input-loading-icon",
+      name: "loading",
+      attrs: this.v3 ? undefined : {
+        name: "loading"
+      }
+    }), this.hasValue && !disabled && h("span", {
+      onClick: this.onClear,
+      on: this.v3 ? undefined : {
+        "click": this.onClear,
+        "mousedown": function mousedown(e) {
+          return e.preventDefault();
+        }
+      },
+      "class": "k-clear-value",
+      title: localization.toLanguageString(clear, messages[clear]),
+      attrs: this.v3 ? undefined : {
+        title: localization.toLanguageString(clear, messages[clear]),
+        role: "button",
+        tabIndex: -1
+      },
+      role: "button",
+      tabIndex: -1,
+      onMousedown: function mousedown(e) {
+        return e.preventDefault();
+      }
+    }, [h(Icon, {
+      name: "x",
+      attrs: this.v3 ? undefined : {
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
+    })]), h(Button, {
+      tabIndex: -1,
+      attrs: this.v3 ? undefined : {
+        tabIndex: -1,
+        type: "button",
+        "aria-label": "select",
+        size: size,
+        fillMode: fillMode,
+        themeColor: "base",
+        rounded: null,
+        icon: "caret-alt-down",
+        svgIcon: caretAltDownIcon
+      },
+      type: "button",
+      "aria-label": "select",
+      "class": "k-input-button",
+      size: size,
+      fillMode: fillMode,
+      themeColor: "base",
+      rounded: null,
+      icon: "caret-alt-down",
+      svgIcon: caretAltDownIcon
+    }), /* Dummy component to support forms */h("select", {
+      name: name,
+      attrs: this.v3 ? undefined : {
+        name: name,
+        tabIndex: -1,
+        "aria-hidden": true,
+        title: label
+      },
+      ref: setRef(this, 'select'),
+      tabIndex: -1,
+      "aria-hidden": true,
+      title: label,
+      style: {
+        opacity: 0,
+        width: 1,
+        border: 0,
+        zIndex: -1,
+        position: 'absolute',
+        left: '50%'
+      }
+    }, [h("option", {
+      value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined, this.computedValue) : this.computedValue : null,
+      domProps: this.v3 ? undefined : {
+        "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, this.computedValue) : this.computedValue
+      }
+    })]),
+    // @ts-ignore function children
+    h(Popup, {
+      style: {
+        width: this.popupWidth,
+        direction: dir
+      },
+      ref: setRef(this, 'popup'),
+      "class": classNames(popupSettings.className, {
+        'k-rtl': dir === 'rtl'
+      }),
+      popupClass: classNames(popupSettings.popupClass, 'k-dropdowntree-popup', 'popup-' + this.componentGuid),
+      attrs: this.v3 ? undefined : {
+        popupClass: classNames(popupSettings.popupClass, 'k-dropdowntree-popup', 'popup-' + this.componentGuid),
+        animate: popupSettings.animate,
+        anchor: this.anchor,
+        show: this.isOpen,
+        appendTo: popupSettings.appendTo
+      },
+      animate: popupSettings.animate,
+      anchor: this.anchor,
+      show: this.isOpen,
+      onOpen: this.onPopupOpened,
+      on: this.v3 ? undefined : {
+        "open": this.onPopupOpened,
+        "close": this.onPopupClosed
+      },
+      onClose: this.onPopupClosed,
+      appendTo: popupSettings.appendTo
+    }, this.v3 ? function () {
+      return [_this2.$props.filterable &&
+      // @ts-ignore
+      h(ListFilter, {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+        attrs: _this2.v3 ? undefined : {
+          value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+          size: size,
+          rounded: rounded,
+          fillMode: fillMode
+        },
+        ref: setRef(_this2, 'input'),
+        onChange: _this2.onFilterChange,
+        on: _this2.v3 ? undefined : {
+          "change": _this2.onFilterChange,
+          "keydown": _this2.onInputKeyDown
+        },
+        onKeydown: _this2.onInputKeyDown,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode
+      }), header && h("div", {
+        "class": "k-list-header"
+      }, [header]), dataItems.length > 0 ?
+      // @ts-ignore
+      h(TreeView, {
+        ref: setRef(_this2, 'treeView'),
+        tabIndex: tabIndex,
+        attrs: _this2.v3 ? undefined : {
+          tabIndex: tabIndex,
+          dataItems: dataItems,
+          focusIdField: dataItemKey,
+          textField: _this2.$props.textField,
+          selectField: selectField,
+          expandField: _this2.$props.expandField,
+          childrenField: subItemsField,
+          expandIcons: true,
+          size: size,
+          item: itemTemplate
+        },
+        dataItems: dataItems,
+        focusIdField: dataItemKey,
+        textField: _this2.$props.textField,
+        selectField: selectField,
+        expandField: _this2.$props.expandField,
+        childrenField: subItemsField,
+        expandIcons: true,
+        onItemclick: _this2.onChange,
+        on: _this2.v3 ? undefined : {
+          "itemclick": _this2.onChange,
+          "expandchange": _this2.onExpand,
+          "focus": _this2.onFocus,
+          "blur": _this2.onBlur,
+          "keydown": _this2.onWrapperKeyDown
+        },
+        onExpandchange: _this2.onExpand,
+        onFocus: _this2.onFocus,
+        onBlur: _this2.onBlur,
+        onKeydown: _this2.onWrapperKeyDown,
+        size: size,
+        item: itemTemplate
+      }) : noDataTemplate, footer && h("div", {
+        "class": "k-list-footer"
+      }, [footer])];
+    } : [_this2.$props.filterable && h(ListFilter, {
+      value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+      attrs: _this2.v3 ? undefined : {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode
+      },
+      ref: setRef(_this2, 'input'),
+      onChange: _this2.onFilterChange,
+      on: _this2.v3 ? undefined : {
+        "change": _this2.onFilterChange,
+        "keydown": _this2.onInputKeyDown
+      },
+      onKeydown: _this2.onInputKeyDown,
+      size: size,
+      rounded: rounded,
+      fillMode: fillMode
+    }), header && h("div", {
+      "class": "k-list-header"
+    }, [header]), dataItems.length > 0 ? h(TreeView, {
+      ref: setRef(_this2, 'treeView'),
+      tabIndex: tabIndex,
+      attrs: _this2.v3 ? undefined : {
+        tabIndex: tabIndex,
+        dataItems: dataItems,
+        focusIdField: dataItemKey,
+        textField: _this2.$props.textField,
+        selectField: selectField,
+        expandField: _this2.$props.expandField,
+        childrenField: subItemsField,
+        expandIcons: true,
+        size: size,
+        item: itemTemplate
+      },
+      dataItems: dataItems,
+      focusIdField: dataItemKey,
+      textField: _this2.$props.textField,
+      selectField: selectField,
+      expandField: _this2.$props.expandField,
+      childrenField: subItemsField,
+      expandIcons: true,
+      onItemclick: _this2.onChange,
+      on: _this2.v3 ? undefined : {
+        "itemclick": _this2.onChange,
+        "expandchange": _this2.onExpand,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur,
+        "keydown": _this2.onWrapperKeyDown
+      },
+      onExpandchange: _this2.onExpand,
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur,
+      onKeydown: _this2.onWrapperKeyDown,
+      size: size,
+      item: itemTemplate
+    }) : noDataTemplate, footer && h("div", {
+      "class": "k-list-footer"
+    }, [footer])])]);
+    return label ?
+    // @ts-ignore function children
+    h(FloatingLabel, {
+      label: label,
+      attrs: this.v3 ? undefined : {
+        label: label,
+        editorValue: this.currentValueText,
+        editorPlaceholder: placeholder,
+        editorValid: isValid,
+        editorDisabled: disabled,
+        editorId: id,
+        dir: dir
+      },
+      editorValue: this.currentValueText,
+      editorPlaceholder: placeholder,
+      editorValid: isValid,
+      editorDisabled: disabled,
+      editorId: id,
+      dir: dir
+    }, this.v3 ? function () {
+      return [dropdowntree];
+    } : [dropdowntree]) : dropdowntree;
+  },
+  methods: {
+    calculatePopupWidth: function calculatePopupWidth() {
+      if (this.elementRef) {
+        this.popupWidth = this.popupSettings.width !== undefined ? this.popupSettings.width : this.elementRef.offsetWidth + 'px';
+      }
+    },
+    focus: function focus() {
+      if (this.$el) {
+        this.$el.focus();
+      }
+    },
+    setValidity: function setValidity() {
+      if (this.selectRef && this.selectRef.setCustomValidity) {
+        var _a = this.$props,
+          validationMessage = _a.validationMessage,
+          valid = _a.valid,
+          required = _a.required;
+        var validity = getValidity({
+          validationMessage: validationMessage,
+          valid: valid,
+          required: required
+        }, this.hasValue);
+        this.selectRef.setCustomValidity(validity.valid ? '' : this.validationMessage === undefined ? VALIDATION_MESSAGE : this.validationMessage);
+      }
+    },
+    openPopup: function openPopup(event) {
+      if (!this.isOpen) {
+        var openEvent = __assign({}, event);
+        this.$emit('open', openEvent);
+        this.currentOpened = true;
+      }
+    },
+    closePopup: function closePopup(event) {
+      if (this.isOpen) {
+        var closeEvent = __assign({}, event);
+        this.$emit('close', closeEvent);
+        this.currentOpened = false;
+      }
+    },
+    onWrapperClick: function onWrapperClick(event) {
+      if (!event.defaultPrevented && this.$el) {
+        this.focused = true;
+        var ev = {
+          event: event,
+          target: this
+        };
+        (this.isOpen ? this.closePopup : this.openPopup)(ev);
+      }
+    },
+    switchFocus: function switchFocus(focusFn) {
+      var _this = this;
+      this.skipFocusRef = true;
+      focusFn();
+      window.setTimeout(function () {
+        return _this.skipFocusRef = false;
+      }, 0);
+    },
+    onWrapperKeyDown: function onWrapperKeyDown(event) {
+      var _this = this;
+      var keyCode = event.keyCode,
+        altKey = event.altKey;
+      var treeview = this.treeViewRef && this.treeViewRef.$el;
+      var inputElement = this.inputRef && this.inputRef.input;
+      if (this.$props.disabled || event.defaultPrevented && inputElement === event.target) {
+        return;
+      }
+      var ev = {
+        event: event,
+        target: this
+      };
+      if (this.isOpen) {
+        if (keyCode === Keys.esc || altKey && keyCode === Keys.up) {
+          event.preventDefault();
+          this.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 && inputElement) {
+            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 this.switchFocus(function () {
+                _this.focusElement(inputElement);
+              });
+            }
+          }
+          this.switchFocus(noop);
+        } else if (keyCode === Keys.down) {
+          this.switchFocus(function () {
+            _this.focusElement(inputElement || treeview);
+          });
+        }
+      } else {
+        if (altKey && keyCode === Keys.down) {
+          event.preventDefault();
+          this.openPopup(ev);
+        }
+      }
+    },
+    onInputKeyDown: function onInputKeyDown(event) {
+      var _this = this;
+      var keyCode = event.keyCode,
+        altKey = event.altKey;
+      if (altKey || keyCode !== Keys.up && keyCode !== Keys.down) {
+        return;
+      }
+      event.preventDefault();
+      this.switchFocus(keyCode === Keys.up ? function () {
+        _this.focusElement(_this.elementRef);
+      } : function () {
+        _this.focusElement(_this.treeViewRef && _this.treeViewRef.$el);
+      });
+    },
+    focusElement: function focusElement(element) {
+      if (element) {
+        this.switchFocus(function () {
+          return element.focus();
+        });
+      }
+    },
+    onPopupOpened: function onPopupOpened() {
+      if (!this.focused && this.isOpen && !this.currentOpened) {
+        this.closePopup({
+          target: this
+        });
+      } else {
+        if (this.$props.filterable) {
+          var inputElement = this.inputRef && this.inputRef.input;
+          this.focusElement(inputElement);
+        } else {
+          this.focusElement(this.treeViewRef && this.treeViewRef.$el);
+        }
+      }
+    },
+    onPopupClosed: function onPopupClosed() {
+      if (this.focused) {
+        // Move the focus from treeview to dropdown without triggering Focus or Blur events.
+        this.focusElement(this.elementRef);
+      }
+    },
+    onFocus: function onFocus(event) {
+      if (!this.focused && !this.skipFocusRef) {
+        this.focused = true;
+        var focusEvent = {
+          event: event,
+          target: this
+        };
+        this.$emit('focus', focusEvent);
+      }
+    },
+    onBlur: function onBlur(event) {
+      if (this.focused && !this.skipFocusRef) {
+        this.focused = false;
+        var ev = {
+          event: event,
+          target: this
+        };
+        var focusEvent = __assign({}, ev);
+        if (!event.relatedTarget || !event.relatedTarget.closest('.popup-' + this.componentGuid)) {
+          this.$emit('blur', focusEvent);
+          this.closePopup(ev);
+        }
+      }
+    },
+    onWrapperMouseDown: function onWrapperMouseDown() {
+      if (this.focused) {
+        // moving focus from treeview to dropdown triggers Focus and Blur events.
+        this.switchFocus(noop);
+      }
+    },
+    changeValue: function changeValue(event, newValue, hierarchicalIndex) {
+      var changeEvent = __assign({
+        value: newValue,
+        level: hierarchicalIndex ? toLevel(hierarchicalIndex) : []
+      }, event);
+      this.$emit('changemodel', newValue);
+      this.$emit('update:modelValue', newValue);
+      this.$emit('change', changeEvent);
+      this.currentValue = newValue;
+    },
+    onChange: function onChange(e) {
+      if (areSame(e.item, this.computedValue, this.dataItemKey) || !this.$el) {
+        return;
+      }
+      var item = e.item,
+        itemHierarchicalIndex = e.itemHierarchicalIndex,
+        event = e.event;
+      var ev = {
+        event: event,
+        target: this
+      };
+      this.changeValue(ev, item, itemHierarchicalIndex);
+      this.closePopup(ev);
+    },
+    onClear: function onClear(event) {
+      var ev = {
+        event: event,
+        target: this
+      };
+      this.changeValue(ev, null);
+      this.closePopup(ev);
+      event.preventDefault();
+    },
+    onExpand: function onExpand(e) {
+      var item = e.item,
+        itemHierarchicalIndex = e.itemHierarchicalIndex,
+        event = e.event;
+      var expandEvent = {
+        level: toLevel(itemHierarchicalIndex),
+        item: item,
+        event: event,
+        target: this
+      };
+      this.$emit('expandchange', expandEvent);
+    },
+    onFilterChange: function onFilterChange(event) {
+      var filterDesc = {
+        field: this.$props.textField,
+        operator: 'contains',
+        value: event.target.value
+      };
+      var ev = {
+        filter: filterDesc,
+        event: event,
+        target: this
+      };
+      this.$emit('filterchange', ev);
+      if (this.$props.filter === undefined) {
+        this.filterState = event.target.value;
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+var DropDownTree = DropDownTreeVue2;
+export { DropDownTree, DropDownTreeVue2 };