@progress/kendo-react-dropdowns - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0-dev.201802141312

dist/es/common/List.d.ts

@@ -10,3 +10,2 @@ /// <reference types="react" />
     data: any[];
-    selected?: number;
     value?: any;
@@ -21,2 +20,3 @@ textField?: string;
     skip?: number;
+    focusedIndex?: number;
     onClick: (index: number, event: React.MouseEvent<HTMLLIElement>) => void;
@@ -23,0 +23,0 @@ }

dist/es/common/List.js

@@ -24,8 +24,7 @@ var __extends = (this && this.__extends) || (function () {
         var _this = this;
-        var _a = this.props, textField = _a.textField, valueField = _a.valueField, value = _a.value, selected = _a.selected, optionPrefix = _a.optionPrefix;
-        var skip = this.props.skip || 0;
+        var _a = this.props, textField = _a.textField, valueField = _a.valueField, value = _a.value, optionPrefix = _a.optionPrefix, skip = _a.skip, focusedIndex = _a.focusedIndex;
         return this.props.data.map(function (item, index) {
             var itemValue = getter(item, valueField);
-            var realIndex = skip + index;
-            return (React.createElement(ListItem, { id: optionPrefix + '-' + (itemValue || realIndex.toString()), dataItem: item, selected: itemValue === value, focused: realIndex === 0 && selected === undefined, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField }));
+            var realIndex = (skip || 0) + index;
+            return (React.createElement(ListItem, { id: optionPrefix + '-' + (itemValue || realIndex.toString()), dataItem: item, selected: itemValue === value, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField }));
         });
@@ -32,0 +31,0 @@ };

dist/es/common/settings.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 /**
@@ -48,1 +49,30 @@ * Represents the `skip` and `take` configurations which are wrapped in the `page` object.
 }
+import { FilterDescriptor } from './filterDescriptor';
+/**
+ * @hidden
+ */
+export interface EventData {
+    type: string;
+    filter?: FilterDescriptor;
+    page?: Page;
+}
+/**
+ * @hidden
+ */
+export interface InternalState {
+    data: DropDownStateBase;
+    events: Array<EventData>;
+    syntheticEvent: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | React.FormEvent<HTMLInputElement> | React.KeyboardEvent<HTMLElement> | undefined;
+}
+/**
+ * @hidden
+ */
+export interface DropDownStateBase {
+    filterText?: string;
+    text?: string;
+    selectedIndex?: number;
+    skip?: number;
+    value?: any;
+    isFocused?: boolean;
+    opened?: boolean;
+}

dist/es/common/util.d.ts

@@ -28,2 +28,38 @@ /**
  */
+declare const isPrimitive: Function;
+/**
+ * @hidden
+ */
+declare const scrollToItem: Function;
+/**
+ * @hidden
+ */
+declare const itemIndexStartsWith: Function;
+/**
+ * @hidden
+ */
+declare const getItemIndex: Function;
+/**
+ * @hidden
+ */
+declare const getItemIndexByText: Function;
+/**
+ * @hidden
+ */
+declare const getItemText: Function;
+/**
+ * @hidden
+ */
+declare const getItemValue: Function;
+/**
+ * @hidden
+ */
+declare const getText: Function;
+/**
+ * @hidden
+ */
+declare const getValue: Function;
+/**
+ * @hidden
+ */
 declare const enum Keys {
@@ -74,2 +110,2 @@ 'backspace' = 8,
 }
-export { guid, isPresent, getter, Keys, sameCharsOnly, shuffleData, matchText };
+export { guid, isPresent, getter, Keys, sameCharsOnly, shuffleData, matchText, isPrimitive, scrollToItem, itemIndexStartsWith, getItemIndex, getItemIndexByText, getItemText, getItemValue, getText, getValue };

dist/es/common/util.js

@@ -69,3 +69,118 @@ /**
 };
-export { guid, isPresent, getter, sameCharsOnly, shuffleData, matchText };
+/**
+ * @hidden
+ */
+var primitiveTypes = ['string', 'number', 'undefined'];
+/**
+ * @hidden
+ */
+var isPrimitive = function (value) {
+    var type = typeof value;
+    return primitiveTypes.indexOf(type) !== -1;
+};
+/**
+ * @hidden
+ */
+var scrollToItem = function (scrollElem, itemHeight, itemIndex, translate, virtualScroll) {
+    var viewportHeight = scrollElem.offsetHeight;
+    var itemOffsetTop = (itemHeight * itemIndex) -
+        (virtualScroll ? (scrollElem.scrollTop - translate) : 0);
+    if (virtualScroll) {
+        var diff = 0;
+        if (itemOffsetTop + itemHeight > viewportHeight) {
+            diff = itemOffsetTop + itemHeight - viewportHeight;
+        }
+        else if (itemOffsetTop < 0) {
+            diff = itemOffsetTop;
+        }
+        if (diff !== 0) {
+            scrollElem.scrollTop += diff;
+        }
+        else if (scrollElem.scrollTop === 0 && translate !== 0) {
+            scrollElem.scrollTop = translate;
+        }
+    }
+    else {
+        if (itemOffsetTop + itemHeight > viewportHeight + scrollElem.scrollTop) {
+            scrollElem.scrollTop = (itemOffsetTop + itemHeight - viewportHeight);
+        }
+        else if (itemOffsetTop < scrollElem.scrollTop) {
+            scrollElem.scrollTop -= scrollElem.scrollTop - itemOffsetTop;
+        }
+    }
+};
+/**
+ * @hidden
+ */
+var itemIndexStartsWith = function (text, items, field) {
+    var result = -1;
+    if (text) {
+        text = text.toLowerCase();
+        for (var i = 0; i < items.length; i++) {
+            var itemText = (getter(items[i], field, isPrimitive(items[i])) || '') + '';
+            if (itemText && itemText.toLowerCase().startsWith(text)) {
+                result = i;
+                break;
+            }
+        }
+    }
+    return result;
+};
+/**
+ * @hidden
+ */
+var getItemIndex = function (props, value) {
+    var valueField = props.valueField;
+    var data = props.data || [];
+    return data.findIndex(function (item) {
+        return item === value || getter(item, valueField) === value;
+    });
+};
+/**
+ * @hidden
+ */
+var getItemIndexByText = function (data, text, textField) {
+    return data.findIndex(function (item) {
+        return isPrimitive(item) ? text.toLowerCase() === item.toString().toLowerCase() :
+            getItemText(item, textField).toLowerCase() === text.toLowerCase();
+    });
+};
+/**
+ * @hidden
+ */
+var getItemText = function (item, textField) {
+    return isPrimitive(item) ? item : getter(item, textField);
+};
+/**
+ * @hidden
+ */
+var getItemValue = function (item, valueField) {
+    return valueField ? getter(item, valueField) : item;
+};
+/**
+ * @hidden
+ */
+var getText = function (props, index) {
+    if (!props.data) {
+        return null;
+    }
+    if (index === -1) {
+        return getItemText(props.defaultItem, props.textField);
+    }
+    var item = props.data[index];
+    return getItemText(item, props.textField);
+};
+/**
+ * @hidden
+ */
+var getValue = function (props, index) {
+    if (index === -1) {
+        return getItemValue(props.defaultItem, props.valueField);
+    }
+    if (props.data) {
+        var item = props.data[index];
+        return getItemValue(item, props.valueField);
+    }
+};
+export { guid, isPresent, getter, sameCharsOnly, shuffleData, matchText, isPrimitive, scrollToItem, itemIndexStartsWith, getItemIndex, getItemIndexByText, getItemText, getItemValue, getText, getValue };
 //# sourceMappingURL=util.js.map

dist/es/common/VirtualScroll.d.ts

 /// <reference types="react" />
-import { Page } from './settings';
+import { Page, VirtualizationSettings, InternalState, DropDownStateBase } from './settings';
 /**
  * @hidden
  */
+export interface ComponentState {
+    skip?: number;
+    selectedIndex?: number;
+    opened?: boolean;
+    syntheticEvent?: React.SyntheticEvent<HTMLElement>;
+}
+/**
+ * @hidden
+ */
 export default class VirtualScroll {
@@ -22,2 +31,6 @@ container: HTMLDivElement;
     constructor();
+    initVirtualization(virtual: VirtualizationSettings | undefined, state: InternalState | undefined): void;
+    updateVirtualization(next: VirtualizationSettings | undefined, current: VirtualizationSettings | undefined, state: InternalState): void;
+    handleVirtualItemSelect(newState: InternalState, state: ComponentState, scrollElement: HTMLDivElement, index: number): void;
+    updateListScroll(state: DropDownStateBase, scrollElement: HTMLDivElement, callback: Function): void;
     readonly translate: number;
@@ -24,0 +37,0 @@ calculateScrollSizes: () => boolean;

dist/es/common/VirtualScroll.js

 import { isPresent } from './util';
 var maxHeightIE = 1533915;
+var addPageChange = function (state, skip, take) {
+    state.events.push({
+        type: 'onPageChange',
+        page: {
+            skip: skip,
+            take: take
+        }
+    });
+};
 /**
@@ -36,2 +45,87 @@ * @hidden
     }
+    VirtualScroll.prototype.initVirtualization = function (virtual, state) {
+        this.enabled = virtual !== undefined;
+        if (virtual !== undefined) {
+            this.skip = virtual.skip;
+            this.pageSize = virtual.pageSize;
+            this.total = virtual.total;
+            if (state !== undefined) {
+                state.data.skip = virtual.skip;
+            }
+        }
+    };
+    VirtualScroll.prototype.updateVirtualization = function (next, current, state) {
+        if (next !== undefined && current !== undefined && (current.total !== next.total || next.skip === 0)) {
+            var settings = Object.assign({}, next, { skip: 0 });
+            this.initVirtualization(settings, state);
+            if (this.calculateScrollSizes()) {
+                this.reset();
+            }
+        }
+        else {
+            this.initVirtualization(next, state);
+        }
+    };
+    VirtualScroll.prototype.handleVirtualItemSelect = function (newState, state, scrollElement, index) {
+        var skip = state.skip || 0;
+        var prevIndex = state.selectedIndex || 0;
+        var opened = state.opened && scrollElement;
+        var vs = this;
+        var take = vs.pageSize;
+        var listItemIndex = index - skip;
+        if (opened && index === 0) {
+            addPageChange(newState, 0, take);
+            vs.reset();
+        }
+        else if (opened && index === vs.total - 1) {
+            addPageChange(newState, vs.total - vs.pageSize, take);
+            vs.scrollToEnd();
+        }
+        else if (opened) {
+            var pageChange = vs.PageChange;
+            vs.PageChange = function (page) {
+                addPageChange(newState, page.skip, page.take);
+            };
+            var scrollHandler = index > prevIndex ? vs.localScrollDown : vs.localScrollUp;
+            scrollHandler.call(vs, state.syntheticEvent);
+            vs.PageChange = pageChange;
+        }
+        else if (!opened && index === 0) {
+            addPageChange(newState, 0, take);
+        }
+        else if (!opened && index === vs.total - 1) {
+            addPageChange(newState, vs.total - vs.pageSize, take);
+        }
+        else if (!opened) {
+            var newSkip = Math.max(0, skip + (listItemIndex < 0 ? -1 : 1));
+            addPageChange(newState, newSkip, take);
+        }
+        if (!state.opened) {
+            vs.reset();
+        }
+    };
+    VirtualScroll.prototype.updateListScroll = function (state, scrollElement, callback) {
+        var scrollTop = scrollElement.scrollTop;
+        var vs = this;
+        var translate = vs.translate;
+        var hidden = vs.hidden;
+        var skip = state.skip || 0;
+        if (scrollTop !== translate || (translate === 0 && scrollTop === 0 && skip > 0)) {
+            var resetScroll = function () {
+                vs.enabled = false;
+                var listOffsetTop = translate > 0 ?
+                    translate : (vs.itemHeight * skip);
+                scrollElement.scrollTop = listOffsetTop;
+                vs.translateTo(translate || listOffsetTop);
+                vs.enabled = true;
+                callback();
+            };
+            if (vs.itemHeight !== 0 && !hidden) {
+                resetScroll();
+            }
+            else {
+                setTimeout(resetScroll, 0);
+            }
+        }
+    };
     Object.defineProperty(VirtualScroll.prototype, "translate", {
@@ -38,0 +132,0 @@ get: function () {

dist/es/DropDownList/DropDownList.d.ts

 /// <reference types="react" />
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { NavigationEvent } from '../services/navigationService';
 import { DropDownListProps } from './DropDownListProps';
-import { Page, VirtualizationSettings } from './../common/settings';
-import { FilterDescriptor } from './../common/filterDescriptor';
+import { DropDownStateBase, InternalState } from './../common/settings';
 /**
  * @hidden
  */
-export interface DropDownListState {
-    filterText?: string;
+export interface DropDownListState extends DropDownStateBase {
     word?: string;
     last?: string;
-    selectedIndex?: number;
-    skip?: number;
-    isFocused?: boolean;
-    opened?: boolean;
 }
@@ -23,35 +16,13 @@ /**
  */
-export interface EventData {
-    type: string;
-    filter?: FilterDescriptor;
-    page?: Page;
-}
-/**
- * @hidden
- */
-export interface InternalState {
-    data: DropDownListState;
-    events: Array<EventData>;
-    syntheticEvent: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLElement> | undefined;
-}
-/**
- * @hidden
- */
 export default class DropDownList extends React.Component<DropDownListProps, DropDownListState> {
     static propTypes: {
         opened: PropTypes.Requireable<any>;
-        delay: PropTypes.Requireable<any>;
         disabled: PropTypes.Requireable<any>;
         dir: PropTypes.Requireable<any>;
         filterable: PropTypes.Requireable<any>;
-        ignoreCase: PropTypes.Requireable<any>;
-        loading: PropTypes.Requireable<any>;
         tabIndex: PropTypes.Requireable<any>;
         data: PropTypes.Requireable<any>;
-        value: PropTypes.Requireable<any>;
-        defaultValue: PropTypes.Requireable<any>;
         textField: PropTypes.Requireable<any>;
         valueField: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<any>;
-        iconClassName: PropTypes.Requireable<any>;
         popupSettings: PropTypes.Requireable<any>;
@@ -66,6 +37,10 @@ virtual: PropTypes.Requireable<any>;
         onPageChange: PropTypes.Requireable<any>;
+        delay: PropTypes.Requireable<any>;
+        ignoreCase: PropTypes.Requireable<any>;
+        loading: PropTypes.Requireable<any>;
+        value: PropTypes.Requireable<any>;
+        defaultValue: PropTypes.Requireable<any>;
+        iconClassName: PropTypes.Requireable<any>;
     };
     static defaultProps: {
-        delay: number;
-        ignoreCase: boolean;
         tabIndex: number;
@@ -76,22 +51,11 @@ popupSettings: {
         };
+        delay: number;
+        ignoreCase: boolean;
     };
     private _element;
-    private _value;
-    private _index;
-    private _text;
-    private valueDuringOnChange;
-    private indexDuringOnChange;
-    private _list;
-    private _scrollElement;
-    private listBoxId;
-    private optionPrefix;
-    private _navigationService;
-    private popupWidth;
     private _filteringWillFocus;
-    private _wrapper;
     private _typingTimeout;
     private vs;
-    private _valueNotInData;
     private _lastMousedown;
-    private _dirCalculated?;
+    private readonly base;
     readonly element: HTMLSpanElement;
@@ -106,4 +70,2 @@ readonly value: any;
     componentWillUnmount(): void;
-    updateVirtualization(nextProps: DropDownListProps, state: InternalState): void;
-    initVirtualization(virtual: VirtualizationSettings | undefined, state: InternalState | undefined): void;
     handleFocus: React.FocusEventHandler<HTMLSpanElement>;
@@ -117,4 +79,6 @@ handleBlur: React.FocusEventHandler<HTMLSpanElement>;
     handleItemSelect: (index: number, state: InternalState) => void;
-    handleNavigate: (eventData: NavigationEvent, state: InternalState) => void;
+    onNavigate(event: React.KeyboardEvent<HTMLElement>): void;
     handleListFilterChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    setValueSelection: (value: any, text: any, selected: any, state: InternalState) => void;
+    togglePopup: (state: InternalState) => void;
     render(): JSX.Element;
@@ -129,11 +93,4 @@ private renderDropDownWrapper;
     private scrollerRef;
-    private pageChange;
-    private scrollToSelectedItem(state);
-    private togglePopup;
     private search;
     private selectNext;
-    private setValueSelection;
-    private initState();
-    private applyState(state);
-    private updateSelectedItem;
     private filteringInputWillFocus;
@@ -140,0 +97,0 @@ private filteringInputDidFocus;

dist/es/DropDownList/DropDownList.js

@@ -28,5 +28,5 @@ var __extends = (this && this.__extends) || (function () {
 import List from '../common/List';
+import DropDownBase from '../common/DropDownBase';
 import VirtualScroll from '../common/VirtualScroll';
-import { NavigationService, NavigationAction } from '../services/navigationService';
-import { guid, isPresent, getter, sameCharsOnly, shuffleData, matchText } from '../common/util';
+import { isPresent, getter, getItemIndex, getItemText, getItemValue, getText, sameCharsOnly, shuffleData, matchText } from '../common/util';
 var defaultItemKey = 0;
@@ -40,47 +40,2 @@ var listKey = 1;
 };
-var isPrimitive = function (value) {
-    var type = typeof value;
-    return ['string', 'number', 'undefined'].indexOf(type) !== -1;
-};
-var getItemIndex = function (props, value) {
-    var valueField = props.valueField;
-    var data = props.data || [];
-    return data.findIndex(function (item) {
-        return item === value || getter(item, valueField) === value;
-    });
-};
-var getItemText = function (item, textField) {
-    return isPrimitive(item) ? item : getter(item, textField);
-};
-var getItemValue = function (item, valueField) {
-    return valueField ? getter(item, valueField) : item;
-};
-var getValue = function (props, index) {
-    if (index === -1) {
-        return getItemValue(props.defaultItem, props.valueField);
-    }
-    if (props.data) {
-        var item = props.data[index];
-        return getItemValue(item, props.valueField);
-    }
-};
-var getText = function (props, index) {
-    if (!props.data) {
-        return null;
-    }
-    if (index === -1) {
-        return getItemText(props.defaultItem, props.textField);
-    }
-    var item = props.data[index];
-    return getItemText(item, props.textField);
-};
-var addPageChange = function (state, skip, take) {
-    state.events.push({
-        type: 'onPageChange',
-        page: {
-            skip: skip,
-            take: take
-        }
-    });
-};
 /**
@@ -93,15 +48,6 @@ * @hidden
         var _this = _super.call(this, props) || this;
-        _this.valueDuringOnChange = undefined;
-        _this.indexDuringOnChange = undefined;
         _this.vs = new VirtualScroll();
-        _this._valueNotInData = false;
         _this._lastMousedown = 0;
         _this.handleFocus = function (event) {
-            if (!_this.state.isFocused) {
-                var state = _this.initState();
-                state.data.isFocused = true;
-                state.events.push({ type: 'onFocus' });
-                state.syntheticEvent = event;
-                _this.applyState(state);
-            }
+            _this.base.handleFocus(event);
         };
@@ -115,3 +61,3 @@ _this.handleBlur = function (event) {
                 }
-                var state = _this.initState();
+                var state = _this.base.initState();
                 state.data.isFocused = false;
@@ -124,20 +70,13 @@ state.data.opened = false;
                 }
-                _this.applyState(state);
+                _this.base.applyState(state);
             }
         };
         _this.handleWrapperClick = function (event) {
-            var state = _this.initState();
-            _this.togglePopup(state);
-            state.syntheticEvent = event;
-            _this.applyState(state);
+            _this.base.handleWrapperClick(event);
         };
         _this.handleItemClick = function (index, event) {
-            var state = _this.initState();
-            _this.handleItemSelect(index, state);
-            _this.togglePopup(state);
-            state.syntheticEvent = event;
-            _this.applyState(state);
+            _this.base.handleItemClick(index, event);
         };
         _this.handleDefaultItemClick = function (index, event) {
-            var state = _this.initState();
+            var state = _this.base.initState();
             var _a = _this.props, defaultItem = _a.defaultItem, valueField = _a.valueField, textField = _a.textField;
@@ -150,35 +89,6 @@ _this.togglePopup(state);
             state.syntheticEvent = event;
-            _this.applyState(state);
+            _this.base.applyState(state);
         };
         _this.handleKeyDown = function (event) {
-            var _a = _this.props, data = _a.data, filterable = _a.filterable, disabled = _a.disabled;
-            var keyCode = event.keyCode;
-            if (disabled) {
-                return;
-            }
-            var shouldNavigate = !(filterable &&
-                (keyCode === 37 /* left */ || keyCode === 39 /* right */ || keyCode === 32 /* space */ || keyCode === 16 /* shift */ ||
-                    keyCode === 36 /* home */ || keyCode === 35 /* end */));
-            if (shouldNavigate) {
-                var state = _this.initState();
-                state.syntheticEvent = event;
-                var indexByValue = getItemIndex(_this.props, _this.value);
-                var action = _this._navigationService.process({
-                    current: _this.vs.skip + indexByValue,
-                    max: (_this.vs.enabled ? _this.vs.total : (data || []).length) - 1,
-                    min: _this.props.defaultItem ? -1 : 0,
-                    event: event,
-                    state: state
-                });
-                var leftRightKeys = (action === NavigationAction.Left) || (action === NavigationAction.Right);
-                if (action !== NavigationAction.Undefined &&
-                    action !== NavigationAction.Tab &&
-                    action !== NavigationAction.Backspace &&
-                    action !== NavigationAction.Delete &&
-                    !(leftRightKeys && filterable) &&
-                    (action !== NavigationAction.Enter || (action === NavigationAction.Enter && _this.props.opened))) {
-                    event.preventDefault();
-                }
-                _this.applyState(state);
-            }
+            _this.base.handleKeyDown(event);
         };
@@ -202,104 +112,27 @@ _this.handleKeyPress = function (event) {
         _this.handleItemSelect = function (index, state) {
-            var skip = _this.state.skip || 0;
-            var listItemIndex = index - skip;
-            var data = _this.props.data || [];
-            var controlled = _this.props.value !== undefined;
-            if (!isPresent(index)) {
-                return;
+            _this.base.handleItemSelect(index, state);
+        };
+        _this.handleListFilterChange = function (event) {
+            var state = _this.base.initState();
+            _this.base.filterChanged(event.target.value, state);
+            state.syntheticEvent = event;
+            _this.base.applyState(state);
+        };
+        _this.setValueSelection = function (value, text, selected, state) {
+            if (value === void 0) { value = undefined; }
+            if (text === void 0) { text = undefined; }
+            if (selected === void 0) { selected = undefined; }
+            if (_this.state.selectedIndex !== selected) {
+                state.data.selectedIndex = selected;
             }
-            if ((listItemIndex >= 0 && listItemIndex < data.length) ||
-                (listItemIndex === -1 && _this.props.defaultItem)) {
-                var newValue = getValue(_this.props, listItemIndex);
-                var newText = getText(_this.props, listItemIndex);
-                var oldValue = _this.value;
-                if (controlled) {
-                    _this.valueDuringOnChange = newValue;
-                    _this.indexDuringOnChange = index;
-                }
-                else {
-                    _this._value = newValue;
-                    _this._index = index;
-                    _this._text = newText;
-                    state.data.selectedIndex = index;
-                }
-                if (newValue !== oldValue) {
-                    state.events.push({ type: 'onChange' });
-                }
-            }
-            else {
-                if (_this.props.virtual !== undefined) {
-                    var scrollEl = _this._scrollElement;
-                    var opened = _this.state.opened && scrollEl;
-                    var take = _this.vs.pageSize;
-                    if (opened && index === 0) {
-                        addPageChange(state, 0, take);
-                        _this.vs.reset();
-                    }
-                    else if (opened && index === _this.vs.total - 1) {
-                        addPageChange(state, _this.vs.total - _this.vs.pageSize, take);
-                        _this.vs.scrollToEnd();
-                    }
-                    else if (opened) {
-                        var pageChange = _this.vs.PageChange;
-                        _this.vs.PageChange = function (page) {
-                            addPageChange(state, page.skip, page.take);
-                        };
-                        var scrollHandler = index > _this.index ? _this.vs.localScrollDown : _this.vs.localScrollUp;
-                        scrollHandler.call(_this.vs, state.syntheticEvent);
-                        _this.vs.PageChange = pageChange;
-                    }
-                    else if (!opened && index === 0) {
-                        addPageChange(state, 0, take);
-                    }
-                    else if (!opened && index === _this.vs.total - 1) {
-                        addPageChange(state, _this.vs.total - _this.vs.pageSize, take);
-                    }
-                    else if (!opened) {
-                        var newSkip = Math.max(0, skip + (listItemIndex < 0 ? -1 : 1));
-                        addPageChange(state, newSkip, take);
-                    }
-                    if (!_this.state.opened) {
-                        _this.vs.reset();
-                    }
-                    _this._valueNotInData = true;
-                    if (controlled) {
-                        _this.indexDuringOnChange = index;
-                    }
-                    else {
-                        _this._index = index;
-                        state.data.selectedIndex = index;
-                    }
-                }
-            }
+            _this.base.value = value;
+            _this.base.text = text;
+            _this.base.index = selected;
         };
-        _this.handleNavigate = function (eventData, state) {
-            var event = eventData.event;
-            if ((eventData.action === NavigationAction.Open && !_this.state.opened)
-                || (eventData.action === NavigationAction.Close && _this.state.opened)) {
-                _this.togglePopup(state);
+        _this.togglePopup = function (state) {
+            _this.base.togglePopup(state);
+            if (!_this.state.opened) {
+                _this.base.calculatePopupWidth();
             }
-            else if (event.keyCode === 13 /* enter */ || event.keyCode === 32 /* space */) {
-                _this.togglePopup(state);
-            }
-            else if (eventData.index !== undefined) {
-                _this.handleItemSelect(eventData.index, state);
-            }
         };
-        _this.handleListFilterChange = function (event) {
-            var state = _this.initState();
-            var value = event.target.value;
-            var field = _this.props.textField;
-            state.data.filterText = value;
-            state.events.push({
-                type: 'onFilterChange',
-                filter: {
-                    field: field,
-                    operator: 'contains',
-                    ignoreCase: true,
-                    value: value
-                }
-            });
-            state.syntheticEvent = event;
-            _this.applyState(state);
-        };
         _this.renderDropDownWrapper = function () {
@@ -312,5 +145,5 @@ var _a = _this.props, defaultItem = _a.defaultItem, valueField = _a.valueField, disabled = _a.disabled, tabIndex = _a.tabIndex, loading = _a.loading, iconClassName = _a.iconClassName;
                 getItemValue(defaultItem, valueField) !== _this.value) {
-                text = _this._text;
+                text = _this.base.text;
             }
-            return (React.createElement(DropDownWrapper, { disabled: disabled, focused: isFocused, tabIndex: tabIndex, ariaExpanded: opened || false, ariaOwns: _this.listBoxId, ariaActiveDescendant: _this.optionPrefix + '-' + (_this.value || ''), onFocus: _this.handleFocus, onBlur: _this.handleBlur, onClick: _this.handleWrapperClick, onKeyDown: _this.handleKeyDown, onKeyPress: _this.handleKeyPress, ref: function (wrapper) { _this._wrapper = wrapper; } },
+            return (React.createElement(DropDownWrapper, { disabled: disabled, focused: isFocused, tabIndex: tabIndex, ariaExpanded: opened || false, ariaOwns: _this.base.listBoxId, ariaActiveDescendant: _this.base.optionPrefix + '-' + (_this.value || ''), onFocus: _this.handleFocus, onBlur: _this.handleBlur, onClick: _this.handleWrapperClick, onKeyDown: _this.handleKeyDown, onKeyPress: _this.handleKeyPress, ref: function (wrapper) { _this.base.wrapper = wrapper; } },
                 React.createElement("span", { className: "k-input" }, text),
@@ -327,2 +160,3 @@ React.createElement("span", { className: "k-select" },
             var virtual = _this.props.virtual !== undefined;
+            var vs = _this.base.vs;
             var listContainerProps = {
@@ -333,5 +167,5 @@ onMouseDown: function (e) {
                 },
-                dir: _this.props.dir !== undefined ? _this.props.dir : _this._dirCalculated,
+                dir: _this.props.dir !== undefined ? _this.props.dir : _this.base.dirCalculated,
                 onBlur: _this.handleBlur,
-                width: _this.popupWidth,
+                width: _this.base.popupWidth,
                 popupSettings: {
@@ -343,7 +177,7 @@ animate: (popupSettings || {}).animate,
                     open: function () {
-                        _this.vs.hidden = false;
+                        vs.hidden = false;
                     },
                     className: 'k-list-container k-reset',
                     close: function () {
-                        _this.vs.hidden = true;
+                        vs.hidden = true;
                         _this.onPopupClosed();
@@ -367,3 +201,4 @@ }
             var popupSettings = _this.props.popupSettings;
-            return _this.vs.enabled ? (React.createElement("div", { onScroll: _this.vs.scrollHandler, ref: _this.scrollerRef, style: {
+            var vs = _this.base.vs;
+            return vs.enabled ? (React.createElement("div", { onScroll: vs.scrollHandler, ref: _this.scrollerRef, style: {
                     height: (popupSettings || {}).height,
@@ -375,4 +210,5 @@ overflowY: 'scroll'
         _this.renderScrollElement = function () {
-            return _this.vs.enabled && (React.createElement("div", { ref: function (element) {
-                    _this.vs.scrollElement = element;
+            var vs = _this.base.vs;
+            return vs.enabled && (React.createElement("div", { ref: function (element) {
+                    vs.scrollElement = element;
                 }, key: scrollElemKey }));
@@ -382,2 +218,3 @@ };
             var _a = _this.props, data = _a.data, textField = _a.textField, valueField = _a.valueField, defaultItem = _a.defaultItem, popupSettings = _a.popupSettings;
+            var vs = _this.base.vs;
             var _b = _this.state, opened = _b.opened, skip = _b.skip;
@@ -387,9 +224,10 @@ var translate = "translateY(" + _this.vs.translate + "px)";
             var selectedIndex = getItemIndex(_this.props, value);
-            return (React.createElement(List, { id: _this.listBoxId, show: opened, data: (data || []).slice(), selected: selectedIndex === -1 && !defaultItem ? undefined : selectedIndex, value: value, textField: textField, valueField: valueField, optionPrefix: _this.optionPrefix, listRef: function (element) {
-                    if (_this.vs.enabled) {
-                        _this.vs.list = element;
+            var hasSelected = !(selectedIndex < 0 && !defaultItem);
+            return (React.createElement(List, { id: _this.base.listBoxId, show: opened, data: (data || []).slice(), focusedIndex: !hasSelected && skip === 0 ? 0 : undefined, value: value, textField: textField, valueField: valueField, optionPrefix: _this.base.optionPrefix, listRef: function (element) {
+                    if (vs.enabled) {
+                        vs.list = element;
                     }
-                    _this._list = element;
-                }, wrapperStyle: !_this.vs.enabled ?
-                    { maxHeight: (popupSettings || {}).height } : { float: 'left', width: '100%' }, wrapperCssClass: !_this.vs.enabled ? 'k-list-scroller' : undefined, listStyle: _this.vs.enabled ?
+                    _this.base.list = element;
+                }, wrapperStyle: !vs.enabled ?
+                    { maxHeight: (popupSettings || {}).height } : { float: 'left', width: '100%' }, wrapperCssClass: !vs.enabled ? 'k-list-scroller' : undefined, listStyle: vs.enabled ?
                     { transform: translate } : undefined, key: listKey, skip: skip, onClick: _this.handleItemClick }));
@@ -408,27 +246,7 @@ };
             if (element) {
-                _this.vs.container = element;
-                _this._scrollElement = element;
-                setTimeout(_this.vs.calculateScrollSizes.bind(_this.vs), 0);
+                var vs = _this.base.vs;
+                vs.container = element;
+                setTimeout(vs.calculateScrollSizes.bind(vs), 0);
             }
         };
-        _this.pageChange = function (page, _) {
-            if (_this.props.virtual) {
-                var state = _this.initState();
-                addPageChange(state, page.skip, page.take);
-                _this.applyState(state);
-            }
-        };
-        _this.togglePopup = function (state) {
-            state.data.isFocused = true;
-            state.data.opened = !_this.state.opened;
-            if (_this.state.opened) {
-                state.events.push({ type: 'onClose' });
-            }
-            else {
-                var popupWidth = (_this.props.popupSettings || {}).width;
-                _this.popupWidth = popupWidth !== undefined ? popupWidth :
-                    ReactDOM.findDOMNode(_this._wrapper).offsetWidth + 'px';
-                state.events.push({ type: 'onOpen' });
-            }
-        };
         _this.search = function () {
@@ -467,35 +285,7 @@ clearTimeout(_this._typingTimeout);
             if (index !== dataLength) {
-                var state = _this.initState();
+                var state = _this.base.initState();
                 _this.handleItemSelect(index, state);
-                _this.applyState(state);
+                _this.base.applyState(state);
             }
         };
-        _this.setValueSelection = function (value, text, selected, state) {
-            if (value === void 0) { value = undefined; }
-            if (text === void 0) { text = undefined; }
-            if (selected === void 0) { selected = undefined; }
-            if (_this.state.selectedIndex !== selected) {
-                state.data.selectedIndex = selected;
-            }
-            _this._value = value;
-            _this._text = text;
-            _this._index = selected;
-        };
-        _this.updateSelectedItem = function (props, state) {
-            var value = props.value !== undefined ? props.value : _this.value;
-            var selected = getItemIndex(props, value);
-            var text = getText(props, selected);
-            var defaultItemValue = props.defaultItem ?
-                getItemValue(props.defaultItem, props.valueField) : undefined;
-            if (isPresent(value) && selected === -1 && defaultItemValue === undefined) {
-                return;
-            }
-            if (selected === -1 && defaultItemValue !== undefined) {
-                value = defaultItemValue;
-                text = getItemText(props.defaultItem, _this.props.textField);
-            }
-            selected = selected !== -1 ? selected + (state.data.skip || 0) : selected;
-            _this._text = text;
-            _this.setValueSelection(value, text, selected, state);
-        };
         _this.filteringInputWillFocus = function () {
@@ -509,3 +299,3 @@ _this._filteringWillFocus = true;
             if (_this.state.isFocused) {
-                var wrapper_1 = ReactDOM.findDOMNode(_this._wrapper);
+                var wrapper_1 = ReactDOM.findDOMNode(_this.base.wrapper);
                 setTimeout(function () { wrapper_1.focus(); }, 0);
@@ -531,9 +321,5 @@ }
         };
-        _this._index = selected;
-        _this._value = value;
-        _this.listBoxId = guid();
-        _this.optionPrefix = guid();
-        _this._navigationService = new NavigationService(_this.handleNavigate);
-        _this.initVirtualization(_this.props.virtual, undefined);
-        _this.vs.PageChange = _this.pageChange;
+        _this.base = new DropDownBase(_this);
+        _this.base.index = selected;
+        _this.base.value = value;
         return _this;
@@ -550,8 +336,3 @@ }
         get: function () {
-            if (this.valueDuringOnChange !== undefined) {
-                return this.valueDuringOnChange;
-            }
-            else {
-                return this._value;
-            }
+            return this.base.value;
         },
@@ -563,8 +344,3 @@ enumerable: true,
         get: function () {
-            if (this.indexDuringOnChange !== undefined) {
-                return this.indexDuringOnChange;
-            }
-            else {
-                return this._index;
-            }
+            return this.base.index;
         },
@@ -575,102 +351,35 @@ enumerable: true,
     DropDownList.prototype.componentWillReceiveProps = function (nextProps) {
-        var state = this.initState();
-        if (nextProps.opened !== undefined) {
-            state.data.opened = nextProps.opened;
-        }
-        if (!nextProps.filterable && this.state.filterText) {
-            state.data.filterText = '';
-        }
-        else if (nextProps.filterable && nextProps.filter !== undefined) {
-            state.data.filterText = nextProps.filter;
-        }
-        this.updateVirtualization(nextProps, state);
-        var controlled = nextProps.value !== undefined;
-        if (this._valueNotInData && !controlled) {
-            var index = this.index - (state.data.skip || 0);
-            this._value = getValue(nextProps, index);
-            this._text = getText(nextProps, index);
-        }
-        else {
-            this.updateSelectedItem(nextProps, state);
-        }
-        this._valueNotInData = false;
-        this.applyState(state);
+        this.base.componentWillReceiveProps(nextProps);
     };
     DropDownList.prototype.componentWillUpdate = function (nextProps, nextState) {
-        if (nextState.opened && (this.state.selectedIndex !== nextState.selectedIndex) && this.state.opened) {
-            this.scrollToSelectedItem(nextState);
-        }
-        if (nextProps.value !== undefined && this.value === undefined) {
-            this._value = nextProps.value;
-        }
+        this.base.componentWillUpdate(nextProps, nextState);
     };
     DropDownList.prototype.componentDidUpdate = function (_, prevState) {
-        var _this = this;
-        if (this.state.opened && !prevState.opened) {
-            var scrollElement_1 = this._scrollElement;
-            if (scrollElement_1) {
-                var scrollTop = scrollElement_1.scrollTop;
-                var translate_1 = this.vs.translate;
-                var hidden = this.vs.hidden;
-                var skip_1 = this.state.skip || 0;
-                if (scrollTop !== translate_1 || (translate_1 === 0 && scrollTop === 0 && skip_1 > 0)) {
-                    var resetScroll = function () {
-                        _this.vs.enabled = false;
-                        var listOffsetTop = translate_1 > 0 ?
-                            translate_1 : (_this.vs.itemHeight * skip_1);
-                        scrollElement_1.scrollTop = listOffsetTop;
-                        _this.vs.translateTo(translate_1 || listOffsetTop);
-                        _this.vs.enabled = true;
-                        if (getItemIndex(_this.props, _this.value) >= 0) {
-                            _this.scrollToSelectedItem(_this.state);
-                        }
-                    };
-                    if (this.vs.itemHeight !== 0 && !hidden) {
-                        resetScroll();
-                    }
-                    else {
-                        setTimeout(resetScroll, 0);
-                    }
-                }
-            }
-            else {
-                this.scrollToSelectedItem(this.state);
-            }
-        }
+        this.base.componentDidUpdate(prevState);
     };
     DropDownList.prototype.componentDidMount = function () {
-        if (this.element) {
-            this._dirCalculated = window.getComputedStyle(this.element).direction || undefined;
-        }
+        this.base.componentDidMount();
     };
     DropDownList.prototype.componentWillUnmount = function () {
-        delete this.vs.container;
-        delete this.vs.list;
-        delete this._scrollElement;
+        this.base.componentWillUnmount();
     };
-    DropDownList.prototype.updateVirtualization = function (nextProps, state) {
-        var next = nextProps.virtual;
-        var current = this.props.virtual;
-        if (next !== undefined && current !== undefined && (current.total !== next.total || next.skip === 0)) {
-            var settings = Object.assign({}, next, { skip: 0 });
-            this.initVirtualization(settings, state);
-            if (this.vs.calculateScrollSizes()) {
-                this.vs.reset();
-            }
-        }
-        else {
-            this.initVirtualization(next, state);
-        }
+    DropDownList.prototype.onNavigate = function (event) {
+        var _a = this.props, data = _a.data, filterable = _a.filterable, defaultItem = _a.defaultItem;
+        var state = this.base.initState();
+        state.syntheticEvent = event;
+        var vs = this.base.vs;
+        var index = getItemIndex(this.props, this.value);
+        this.base.navigation.navigate({
+            opened: this.state.opened,
+            event: event,
+            state: state,
+            currentIndex: vs.skip + index,
+            max: (vs.enabled ? vs.total : (data || []).length) - 1,
+            min: defaultItem ? -1 : 0,
+            leftRightKeysNavigation: filterable,
+            togglePopup: this.togglePopup,
+            handleItemSelect: this.handleItemSelect
+        });
+        this.base.applyState(state);
     };
-    DropDownList.prototype.initVirtualization = function (virtual, state) {
-        this.vs.enabled = virtual !== undefined;
-        if (virtual !== undefined) {
-            this.vs.skip = virtual.skip;
-            this.vs.pageSize = virtual.pageSize;
-            this.vs.total = virtual.total;
-            if (state !== undefined) {
-                state.data.skip = virtual.skip;
-            }
-        }
-    };
     DropDownList.prototype.render = function () {
@@ -684,114 +393,7 @@ var _this = this;
     };
-    DropDownList.prototype.scrollToSelectedItem = function (state) {
-        var list = this._list;
-        var listItemIndex = (state.selectedIndex || 0) - (state.skip || 0);
-        var item = list ? list.children[0] : undefined;
-        if (!item) {
-            return;
-        }
-        var itemHeight = item.offsetHeight;
-        var virtualScroll = this.vs.enabled;
-        var scrollElement = (this._scrollElement || list.parentNode);
-        var viewportHeight = scrollElement.offsetHeight;
-        var itemOffsetTop = (itemHeight * listItemIndex) -
-            (virtualScroll ? (scrollElement.scrollTop - this.vs.translate) : 0);
-        if (virtualScroll) {
-            var diff = 0;
-            if (itemOffsetTop + itemHeight > viewportHeight) {
-                diff = itemOffsetTop + itemHeight - viewportHeight;
-            }
-            else if (itemOffsetTop < 0) {
-                diff = itemOffsetTop;
-            }
-            if (diff !== 0) {
-                scrollElement.scrollTop += diff;
-            }
-            else if (scrollElement.scrollTop === 0 && this.vs.translate !== 0) {
-                scrollElement.scrollTop = this.vs.translate;
-            }
-        }
-        else {
-            if (itemOffsetTop + itemHeight > viewportHeight + scrollElement.scrollTop) {
-                scrollElement.scrollTop = (itemOffsetTop + itemHeight - viewportHeight);
-            }
-            else if (itemOffsetTop < scrollElement.scrollTop) {
-                scrollElement.scrollTop -= scrollElement.scrollTop - itemOffsetTop;
-            }
-        }
-    };
-    DropDownList.prototype.initState = function () {
-        var state = {
-            data: {},
-            events: [],
-            syntheticEvent: undefined
-        };
-        return state;
-    };
-    DropDownList.prototype.applyState = function (state) {
-        var _this = this;
-        var eventArgs = {
-            syntheticEvent: state.syntheticEvent,
-            nativeEvent: state.syntheticEvent ? state.syntheticEvent.nativeEvent : undefined,
-            target: this
-        };
-        if (Object.keys(state.data).length > 0) {
-            this.setState(state.data);
-        }
-        state.events.forEach(function (eventData) {
-            var type = eventData.type;
-            delete eventData.type;
-            var handler = _this.props[type];
-            if (handler) {
-                handler.call(undefined, __assign({}, eventArgs, eventData));
-            }
-        });
-        this.indexDuringOnChange = undefined;
-        this.valueDuringOnChange = undefined;
-    };
     return DropDownList;
 }(React.Component));
 export default DropDownList;
-DropDownList.propTypes = {
-    opened: PropTypes.bool,
-    delay: PropTypes.number,
-    disabled: PropTypes.bool,
-    dir: PropTypes.string,
-    filterable: PropTypes.bool,
-    ignoreCase: PropTypes.bool,
-    loading: PropTypes.bool,
-    tabIndex: PropTypes.number,
-    data: PropTypes.array,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
-    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
-    textField: PropTypes.string,
-    valueField: PropTypes.string,
-    className: PropTypes.string,
-    iconClassName: PropTypes.string,
-    popupSettings: PropTypes.shape({
-        animate: PropTypes.bool,
-        width: PropTypes.string,
-        height: PropTypes.string
-    }),
-    virtual: PropTypes.shape({
-        pageSize: PropTypes.number.isRequired,
-        skip: PropTypes.number.isRequired,
-        total: PropTypes.number.isRequired
-    }),
-    onOpen: PropTypes.func,
-    onClose: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    onFilterChange: PropTypes.func,
-    onPageChange: PropTypes.func
-};
-DropDownList.defaultProps = {
-    delay: 500,
-    ignoreCase: true,
-    tabIndex: 0,
-    popupSettings: {
-        animate: true,
-        height: '200px'
-    }
-};
+DropDownList.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, loading: PropTypes.bool, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]), defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]), iconClassName: PropTypes.string }, DropDownBase.propTypes);
+DropDownList.defaultProps = __assign({ delay: 500, ignoreCase: true }, DropDownBase.defaultProps);
 //# sourceMappingURL=DropDownList.js.map

dist/es/DropDownList/DropDownListProps.d.ts

 /// <reference types="react" />
 import DropDownList from './DropDownList';
-import { PopupSettings, VirtualizationSettings } from './../common/settings';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
+import { VirtualizationSettings, PopupSettings } from '../common/settings';
 /**
@@ -6,0 +6,0 @@ * Represents the object of the `filterChange` DropDownList event.

dist/es/main.d.ts

 import { DropDownList, DropDownListProps } from './DropDownList/';
 import { DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent } from './DropDownList/DropDownListProps';
 import { Page, VirtualizationSettings, PopupSettings } from './common/settings';
-export { DropDownList, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, PopupSettings };
+import { ComboBox, ComboBoxProps } from './ComboBox/';
+import { ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent } from './ComboBox/ComboBoxProps';
+export { DropDownList, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, PopupSettings, ComboBox, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent };

dist/es/main.js

 import { DropDownList } from './DropDownList/';
-export { DropDownList };
+import { ComboBox } from './ComboBox/';
+export { DropDownList, ComboBox };
 //# sourceMappingURL=main.js.map

dist/npm/common/List.d.ts

@@ -10,3 +10,2 @@ /// <reference types="react" />
     data: any[];
-    selected?: number;
     value?: any;
@@ -21,2 +20,3 @@ textField?: string;
     skip?: number;
+    focusedIndex?: number;
     onClick: (index: number, event: React.MouseEvent<HTMLLIElement>) => void;
@@ -23,0 +23,0 @@ }

dist/npm/common/List.js

@@ -26,8 +26,7 @@ "use strict";
         var _this = this;
-        var _a = this.props, textField = _a.textField, valueField = _a.valueField, value = _a.value, selected = _a.selected, optionPrefix = _a.optionPrefix;
-        var skip = this.props.skip || 0;
+        var _a = this.props, textField = _a.textField, valueField = _a.valueField, value = _a.value, optionPrefix = _a.optionPrefix, skip = _a.skip, focusedIndex = _a.focusedIndex;
         return this.props.data.map(function (item, index) {
             var itemValue = util_1.getter(item, valueField);
-            var realIndex = skip + index;
-            return (React.createElement(ListItem_1.default, { id: optionPrefix + '-' + (itemValue || realIndex.toString()), dataItem: item, selected: itemValue === value, focused: realIndex === 0 && selected === undefined, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField }));
+            var realIndex = (skip || 0) + index;
+            return (React.createElement(ListItem_1.default, { id: optionPrefix + '-' + (itemValue || realIndex.toString()), dataItem: item, selected: itemValue === value, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField }));
         });
@@ -34,0 +33,0 @@ };

dist/npm/common/settings.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 /**
@@ -48,1 +49,30 @@ * Represents the `skip` and `take` configurations which are wrapped in the `page` object.
 }
+import { FilterDescriptor } from './filterDescriptor';
+/**
+ * @hidden
+ */
+export interface EventData {
+    type: string;
+    filter?: FilterDescriptor;
+    page?: Page;
+}
+/**
+ * @hidden
+ */
+export interface InternalState {
+    data: DropDownStateBase;
+    events: Array<EventData>;
+    syntheticEvent: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | React.FormEvent<HTMLInputElement> | React.KeyboardEvent<HTMLElement> | undefined;
+}
+/**
+ * @hidden
+ */
+export interface DropDownStateBase {
+    filterText?: string;
+    text?: string;
+    selectedIndex?: number;
+    skip?: number;
+    value?: any;
+    isFocused?: boolean;
+    opened?: boolean;
+}

dist/npm/common/util.d.ts

@@ -28,2 +28,38 @@ /**
  */
+declare const isPrimitive: Function;
+/**
+ * @hidden
+ */
+declare const scrollToItem: Function;
+/**
+ * @hidden
+ */
+declare const itemIndexStartsWith: Function;
+/**
+ * @hidden
+ */
+declare const getItemIndex: Function;
+/**
+ * @hidden
+ */
+declare const getItemIndexByText: Function;
+/**
+ * @hidden
+ */
+declare const getItemText: Function;
+/**
+ * @hidden
+ */
+declare const getItemValue: Function;
+/**
+ * @hidden
+ */
+declare const getText: Function;
+/**
+ * @hidden
+ */
+declare const getValue: Function;
+/**
+ * @hidden
+ */
 declare const enum Keys {
@@ -74,2 +110,2 @@ 'backspace' = 8,
 }
-export { guid, isPresent, getter, Keys, sameCharsOnly, shuffleData, matchText };
+export { guid, isPresent, getter, Keys, sameCharsOnly, shuffleData, matchText, isPrimitive, scrollToItem, itemIndexStartsWith, getItemIndex, getItemIndexByText, getItemText, getItemValue, getText, getValue };

dist/npm/common/util.js

@@ -77,2 +77,126 @@ "use strict";
 exports.matchText = matchText;
+/**
+ * @hidden
+ */
+var primitiveTypes = ['string', 'number', 'undefined'];
+/**
+ * @hidden
+ */
+var isPrimitive = function (value) {
+    var type = typeof value;
+    return primitiveTypes.indexOf(type) !== -1;
+};
+exports.isPrimitive = isPrimitive;
+/**
+ * @hidden
+ */
+var scrollToItem = function (scrollElem, itemHeight, itemIndex, translate, virtualScroll) {
+    var viewportHeight = scrollElem.offsetHeight;
+    var itemOffsetTop = (itemHeight * itemIndex) -
+        (virtualScroll ? (scrollElem.scrollTop - translate) : 0);
+    if (virtualScroll) {
+        var diff = 0;
+        if (itemOffsetTop + itemHeight > viewportHeight) {
+            diff = itemOffsetTop + itemHeight - viewportHeight;
+        }
+        else if (itemOffsetTop < 0) {
+            diff = itemOffsetTop;
+        }
+        if (diff !== 0) {
+            scrollElem.scrollTop += diff;
+        }
+        else if (scrollElem.scrollTop === 0 && translate !== 0) {
+            scrollElem.scrollTop = translate;
+        }
+    }
+    else {
+        if (itemOffsetTop + itemHeight > viewportHeight + scrollElem.scrollTop) {
+            scrollElem.scrollTop = (itemOffsetTop + itemHeight - viewportHeight);
+        }
+        else if (itemOffsetTop < scrollElem.scrollTop) {
+            scrollElem.scrollTop -= scrollElem.scrollTop - itemOffsetTop;
+        }
+    }
+};
+exports.scrollToItem = scrollToItem;
+/**
+ * @hidden
+ */
+var itemIndexStartsWith = function (text, items, field) {
+    var result = -1;
+    if (text) {
+        text = text.toLowerCase();
+        for (var i = 0; i < items.length; i++) {
+            var itemText = (getter(items[i], field, isPrimitive(items[i])) || '') + '';
+            if (itemText && itemText.toLowerCase().startsWith(text)) {
+                result = i;
+                break;
+            }
+        }
+    }
+    return result;
+};
+exports.itemIndexStartsWith = itemIndexStartsWith;
+/**
+ * @hidden
+ */
+var getItemIndex = function (props, value) {
+    var valueField = props.valueField;
+    var data = props.data || [];
+    return data.findIndex(function (item) {
+        return item === value || getter(item, valueField) === value;
+    });
+};
+exports.getItemIndex = getItemIndex;
+/**
+ * @hidden
+ */
+var getItemIndexByText = function (data, text, textField) {
+    return data.findIndex(function (item) {
+        return isPrimitive(item) ? text.toLowerCase() === item.toString().toLowerCase() :
+            getItemText(item, textField).toLowerCase() === text.toLowerCase();
+    });
+};
+exports.getItemIndexByText = getItemIndexByText;
+/**
+ * @hidden
+ */
+var getItemText = function (item, textField) {
+    return isPrimitive(item) ? item : getter(item, textField);
+};
+exports.getItemText = getItemText;
+/**
+ * @hidden
+ */
+var getItemValue = function (item, valueField) {
+    return valueField ? getter(item, valueField) : item;
+};
+exports.getItemValue = getItemValue;
+/**
+ * @hidden
+ */
+var getText = function (props, index) {
+    if (!props.data) {
+        return null;
+    }
+    if (index === -1) {
+        return getItemText(props.defaultItem, props.textField);
+    }
+    var item = props.data[index];
+    return getItemText(item, props.textField);
+};
+exports.getText = getText;
+/**
+ * @hidden
+ */
+var getValue = function (props, index) {
+    if (index === -1) {
+        return getItemValue(props.defaultItem, props.valueField);
+    }
+    if (props.data) {
+        var item = props.data[index];
+        return getItemValue(item, props.valueField);
+    }
+};
+exports.getValue = getValue;
 //# sourceMappingURL=util.js.map

dist/npm/common/VirtualScroll.d.ts

 /// <reference types="react" />
-import { Page } from './settings';
+import { Page, VirtualizationSettings, InternalState, DropDownStateBase } from './settings';
 /**
  * @hidden
  */
+export interface ComponentState {
+    skip?: number;
+    selectedIndex?: number;
+    opened?: boolean;
+    syntheticEvent?: React.SyntheticEvent<HTMLElement>;
+}
+/**
+ * @hidden
+ */
 export default class VirtualScroll {
@@ -22,2 +31,6 @@ container: HTMLDivElement;
     constructor();
+    initVirtualization(virtual: VirtualizationSettings | undefined, state: InternalState | undefined): void;
+    updateVirtualization(next: VirtualizationSettings | undefined, current: VirtualizationSettings | undefined, state: InternalState): void;
+    handleVirtualItemSelect(newState: InternalState, state: ComponentState, scrollElement: HTMLDivElement, index: number): void;
+    updateListScroll(state: DropDownStateBase, scrollElement: HTMLDivElement, callback: Function): void;
     readonly translate: number;
@@ -24,0 +37,0 @@ calculateScrollSizes: () => boolean;

dist/npm/common/VirtualScroll.js

@@ -5,2 +5,11 @@ "use strict";
 var maxHeightIE = 1533915;
+var addPageChange = function (state, skip, take) {
+    state.events.push({
+        type: 'onPageChange',
+        page: {
+            skip: skip,
+            take: take
+        }
+    });
+};
 /**
@@ -39,2 +48,87 @@ * @hidden
     }
+    VirtualScroll.prototype.initVirtualization = function (virtual, state) {
+        this.enabled = virtual !== undefined;
+        if (virtual !== undefined) {
+            this.skip = virtual.skip;
+            this.pageSize = virtual.pageSize;
+            this.total = virtual.total;
+            if (state !== undefined) {
+                state.data.skip = virtual.skip;
+            }
+        }
+    };
+    VirtualScroll.prototype.updateVirtualization = function (next, current, state) {
+        if (next !== undefined && current !== undefined && (current.total !== next.total || next.skip === 0)) {
+            var settings = Object.assign({}, next, { skip: 0 });
+            this.initVirtualization(settings, state);
+            if (this.calculateScrollSizes()) {
+                this.reset();
+            }
+        }
+        else {
+            this.initVirtualization(next, state);
+        }
+    };
+    VirtualScroll.prototype.handleVirtualItemSelect = function (newState, state, scrollElement, index) {
+        var skip = state.skip || 0;
+        var prevIndex = state.selectedIndex || 0;
+        var opened = state.opened && scrollElement;
+        var vs = this;
+        var take = vs.pageSize;
+        var listItemIndex = index - skip;
+        if (opened && index === 0) {
+            addPageChange(newState, 0, take);
+            vs.reset();
+        }
+        else if (opened && index === vs.total - 1) {
+            addPageChange(newState, vs.total - vs.pageSize, take);
+            vs.scrollToEnd();
+        }
+        else if (opened) {
+            var pageChange = vs.PageChange;
+            vs.PageChange = function (page) {
+                addPageChange(newState, page.skip, page.take);
+            };
+            var scrollHandler = index > prevIndex ? vs.localScrollDown : vs.localScrollUp;
+            scrollHandler.call(vs, state.syntheticEvent);
+            vs.PageChange = pageChange;
+        }
+        else if (!opened && index === 0) {
+            addPageChange(newState, 0, take);
+        }
+        else if (!opened && index === vs.total - 1) {
+            addPageChange(newState, vs.total - vs.pageSize, take);
+        }
+        else if (!opened) {
+            var newSkip = Math.max(0, skip + (listItemIndex < 0 ? -1 : 1));
+            addPageChange(newState, newSkip, take);
+        }
+        if (!state.opened) {
+            vs.reset();
+        }
+    };
+    VirtualScroll.prototype.updateListScroll = function (state, scrollElement, callback) {
+        var scrollTop = scrollElement.scrollTop;
+        var vs = this;
+        var translate = vs.translate;
+        var hidden = vs.hidden;
+        var skip = state.skip || 0;
+        if (scrollTop !== translate || (translate === 0 && scrollTop === 0 && skip > 0)) {
+            var resetScroll = function () {
+                vs.enabled = false;
+                var listOffsetTop = translate > 0 ?
+                    translate : (vs.itemHeight * skip);
+                scrollElement.scrollTop = listOffsetTop;
+                vs.translateTo(translate || listOffsetTop);
+                vs.enabled = true;
+                callback();
+            };
+            if (vs.itemHeight !== 0 && !hidden) {
+                resetScroll();
+            }
+            else {
+                setTimeout(resetScroll, 0);
+            }
+        }
+    };
     Object.defineProperty(VirtualScroll.prototype, "translate", {
@@ -41,0 +135,0 @@ get: function () {

dist/npm/DropDownList/DropDownList.d.ts

 /// <reference types="react" />
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { NavigationEvent } from '../services/navigationService';
 import { DropDownListProps } from './DropDownListProps';
-import { Page, VirtualizationSettings } from './../common/settings';
-import { FilterDescriptor } from './../common/filterDescriptor';
+import { DropDownStateBase, InternalState } from './../common/settings';
 /**
  * @hidden
  */
-export interface DropDownListState {
-    filterText?: string;
+export interface DropDownListState extends DropDownStateBase {
     word?: string;
     last?: string;
-    selectedIndex?: number;
-    skip?: number;
-    isFocused?: boolean;
-    opened?: boolean;
 }
@@ -23,35 +16,13 @@ /**
  */
-export interface EventData {
-    type: string;
-    filter?: FilterDescriptor;
-    page?: Page;
-}
-/**
- * @hidden
- */
-export interface InternalState {
-    data: DropDownListState;
-    events: Array<EventData>;
-    syntheticEvent: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLElement> | undefined;
-}
-/**
- * @hidden
- */
 export default class DropDownList extends React.Component<DropDownListProps, DropDownListState> {
     static propTypes: {
         opened: PropTypes.Requireable<any>;
-        delay: PropTypes.Requireable<any>;
         disabled: PropTypes.Requireable<any>;
         dir: PropTypes.Requireable<any>;
         filterable: PropTypes.Requireable<any>;
-        ignoreCase: PropTypes.Requireable<any>;
-        loading: PropTypes.Requireable<any>;
         tabIndex: PropTypes.Requireable<any>;
         data: PropTypes.Requireable<any>;
-        value: PropTypes.Requireable<any>;
-        defaultValue: PropTypes.Requireable<any>;
         textField: PropTypes.Requireable<any>;
         valueField: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<any>;
-        iconClassName: PropTypes.Requireable<any>;
         popupSettings: PropTypes.Requireable<any>;
@@ -66,6 +37,10 @@ virtual: PropTypes.Requireable<any>;
         onPageChange: PropTypes.Requireable<any>;
+        delay: PropTypes.Requireable<any>;
+        ignoreCase: PropTypes.Requireable<any>;
+        loading: PropTypes.Requireable<any>;
+        value: PropTypes.Requireable<any>;
+        defaultValue: PropTypes.Requireable<any>;
+        iconClassName: PropTypes.Requireable<any>;
     };
     static defaultProps: {
-        delay: number;
-        ignoreCase: boolean;
         tabIndex: number;
@@ -76,22 +51,11 @@ popupSettings: {
         };
+        delay: number;
+        ignoreCase: boolean;
     };
     private _element;
-    private _value;
-    private _index;
-    private _text;
-    private valueDuringOnChange;
-    private indexDuringOnChange;
-    private _list;
-    private _scrollElement;
-    private listBoxId;
-    private optionPrefix;
-    private _navigationService;
-    private popupWidth;
     private _filteringWillFocus;
-    private _wrapper;
     private _typingTimeout;
     private vs;
-    private _valueNotInData;
     private _lastMousedown;
-    private _dirCalculated?;
+    private readonly base;
     readonly element: HTMLSpanElement;
@@ -106,4 +70,2 @@ readonly value: any;
     componentWillUnmount(): void;
-    updateVirtualization(nextProps: DropDownListProps, state: InternalState): void;
-    initVirtualization(virtual: VirtualizationSettings | undefined, state: InternalState | undefined): void;
     handleFocus: React.FocusEventHandler<HTMLSpanElement>;
@@ -117,4 +79,6 @@ handleBlur: React.FocusEventHandler<HTMLSpanElement>;
     handleItemSelect: (index: number, state: InternalState) => void;
-    handleNavigate: (eventData: NavigationEvent, state: InternalState) => void;
+    onNavigate(event: React.KeyboardEvent<HTMLElement>): void;
     handleListFilterChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    setValueSelection: (value: any, text: any, selected: any, state: InternalState) => void;
+    togglePopup: (state: InternalState) => void;
     render(): JSX.Element;
@@ -129,11 +93,4 @@ private renderDropDownWrapper;
     private scrollerRef;
-    private pageChange;
-    private scrollToSelectedItem(state);
-    private togglePopup;
     private search;
     private selectNext;
-    private setValueSelection;
-    private initState();
-    private applyState(state);
-    private updateSelectedItem;
     private filteringInputWillFocus;
@@ -140,0 +97,0 @@ private filteringInputDidFocus;

dist/npm/DropDownList/DropDownList.js

@@ -30,4 +30,4 @@ "use strict";
 var List_1 = require("../common/List");
+var DropDownBase_1 = require("../common/DropDownBase");
 var VirtualScroll_1 = require("../common/VirtualScroll");
-var navigationService_1 = require("../services/navigationService");
 var util_1 = require("../common/util");
@@ -42,47 +42,2 @@ var defaultItemKey = 0;
 };
-var isPrimitive = function (value) {
-    var type = typeof value;
-    return ['string', 'number', 'undefined'].indexOf(type) !== -1;
-};
-var getItemIndex = function (props, value) {
-    var valueField = props.valueField;
-    var data = props.data || [];
-    return data.findIndex(function (item) {
-        return item === value || util_1.getter(item, valueField) === value;
-    });
-};
-var getItemText = function (item, textField) {
-    return isPrimitive(item) ? item : util_1.getter(item, textField);
-};
-var getItemValue = function (item, valueField) {
-    return valueField ? util_1.getter(item, valueField) : item;
-};
-var getValue = function (props, index) {
-    if (index === -1) {
-        return getItemValue(props.defaultItem, props.valueField);
-    }
-    if (props.data) {
-        var item = props.data[index];
-        return getItemValue(item, props.valueField);
-    }
-};
-var getText = function (props, index) {
-    if (!props.data) {
-        return null;
-    }
-    if (index === -1) {
-        return getItemText(props.defaultItem, props.textField);
-    }
-    var item = props.data[index];
-    return getItemText(item, props.textField);
-};
-var addPageChange = function (state, skip, take) {
-    state.events.push({
-        type: 'onPageChange',
-        page: {
-            skip: skip,
-            take: take
-        }
-    });
-};
 /**
@@ -95,15 +50,6 @@ * @hidden
         var _this = _super.call(this, props) || this;
-        _this.valueDuringOnChange = undefined;
-        _this.indexDuringOnChange = undefined;
         _this.vs = new VirtualScroll_1.default();
-        _this._valueNotInData = false;
         _this._lastMousedown = 0;
         _this.handleFocus = function (event) {
-            if (!_this.state.isFocused) {
-                var state = _this.initState();
-                state.data.isFocused = true;
-                state.events.push({ type: 'onFocus' });
-                state.syntheticEvent = event;
-                _this.applyState(state);
-            }
+            _this.base.handleFocus(event);
         };
@@ -117,3 +63,3 @@ _this.handleBlur = function (event) {
                 }
-                var state = _this.initState();
+                var state = _this.base.initState();
                 state.data.isFocused = false;
@@ -126,60 +72,24 @@ state.data.opened = false;
                 }
-                _this.applyState(state);
+                _this.base.applyState(state);
             }
         };
         _this.handleWrapperClick = function (event) {
-            var state = _this.initState();
-            _this.togglePopup(state);
-            state.syntheticEvent = event;
-            _this.applyState(state);
+            _this.base.handleWrapperClick(event);
         };
         _this.handleItemClick = function (index, event) {
-            var state = _this.initState();
-            _this.handleItemSelect(index, state);
-            _this.togglePopup(state);
-            state.syntheticEvent = event;
-            _this.applyState(state);
+            _this.base.handleItemClick(index, event);
         };
         _this.handleDefaultItemClick = function (index, event) {
-            var state = _this.initState();
+            var state = _this.base.initState();
             var _a = _this.props, defaultItem = _a.defaultItem, valueField = _a.valueField, textField = _a.textField;
             _this.togglePopup(state);
-            var value = getItemValue(defaultItem, valueField);
-            var text = getItemText(defaultItem, textField);
+            var value = util_1.getItemValue(defaultItem, valueField);
+            var text = util_1.getItemText(defaultItem, textField);
             _this.setValueSelection(value, text, index, state);
             state.events.push({ type: 'onChange' });
             state.syntheticEvent = event;
-            _this.applyState(state);
+            _this.base.applyState(state);
         };
         _this.handleKeyDown = function (event) {
-            var _a = _this.props, data = _a.data, filterable = _a.filterable, disabled = _a.disabled;
-            var keyCode = event.keyCode;
-            if (disabled) {
-                return;
-            }
-            var shouldNavigate = !(filterable &&
-                (keyCode === 37 /* left */ || keyCode === 39 /* right */ || keyCode === 32 /* space */ || keyCode === 16 /* shift */ ||
-                    keyCode === 36 /* home */ || keyCode === 35 /* end */));
-            if (shouldNavigate) {
-                var state = _this.initState();
-                state.syntheticEvent = event;
-                var indexByValue = getItemIndex(_this.props, _this.value);
-                var action = _this._navigationService.process({
-                    current: _this.vs.skip + indexByValue,
-                    max: (_this.vs.enabled ? _this.vs.total : (data || []).length) - 1,
-                    min: _this.props.defaultItem ? -1 : 0,
-                    event: event,
-                    state: state
-                });
-                var leftRightKeys = (action === navigationService_1.NavigationAction.Left) || (action === navigationService_1.NavigationAction.Right);
-                if (action !== navigationService_1.NavigationAction.Undefined &&
-                    action !== navigationService_1.NavigationAction.Tab &&
-                    action !== navigationService_1.NavigationAction.Backspace &&
-                    action !== navigationService_1.NavigationAction.Delete &&
-                    !(leftRightKeys && filterable) &&
-                    (action !== navigationService_1.NavigationAction.Enter || (action === navigationService_1.NavigationAction.Enter && _this.props.opened))) {
-                    event.preventDefault();
-                }
-                _this.applyState(state);
-            }
+            _this.base.handleKeyDown(event);
         };
@@ -203,114 +113,37 @@ _this.handleKeyPress = function (event) {
         _this.handleItemSelect = function (index, state) {
-            var skip = _this.state.skip || 0;
-            var listItemIndex = index - skip;
-            var data = _this.props.data || [];
-            var controlled = _this.props.value !== undefined;
-            if (!util_1.isPresent(index)) {
-                return;
+            _this.base.handleItemSelect(index, state);
+        };
+        _this.handleListFilterChange = function (event) {
+            var state = _this.base.initState();
+            _this.base.filterChanged(event.target.value, state);
+            state.syntheticEvent = event;
+            _this.base.applyState(state);
+        };
+        _this.setValueSelection = function (value, text, selected, state) {
+            if (value === void 0) { value = undefined; }
+            if (text === void 0) { text = undefined; }
+            if (selected === void 0) { selected = undefined; }
+            if (_this.state.selectedIndex !== selected) {
+                state.data.selectedIndex = selected;
             }
-            if ((listItemIndex >= 0 && listItemIndex < data.length) ||
-                (listItemIndex === -1 && _this.props.defaultItem)) {
-                var newValue = getValue(_this.props, listItemIndex);
-                var newText = getText(_this.props, listItemIndex);
-                var oldValue = _this.value;
-                if (controlled) {
-                    _this.valueDuringOnChange = newValue;
-                    _this.indexDuringOnChange = index;
-                }
-                else {
-                    _this._value = newValue;
-                    _this._index = index;
-                    _this._text = newText;
-                    state.data.selectedIndex = index;
-                }
-                if (newValue !== oldValue) {
-                    state.events.push({ type: 'onChange' });
-                }
-            }
-            else {
-                if (_this.props.virtual !== undefined) {
-                    var scrollEl = _this._scrollElement;
-                    var opened = _this.state.opened && scrollEl;
-                    var take = _this.vs.pageSize;
-                    if (opened && index === 0) {
-                        addPageChange(state, 0, take);
-                        _this.vs.reset();
-                    }
-                    else if (opened && index === _this.vs.total - 1) {
-                        addPageChange(state, _this.vs.total - _this.vs.pageSize, take);
-                        _this.vs.scrollToEnd();
-                    }
-                    else if (opened) {
-                        var pageChange = _this.vs.PageChange;
-                        _this.vs.PageChange = function (page) {
-                            addPageChange(state, page.skip, page.take);
-                        };
-                        var scrollHandler = index > _this.index ? _this.vs.localScrollDown : _this.vs.localScrollUp;
-                        scrollHandler.call(_this.vs, state.syntheticEvent);
-                        _this.vs.PageChange = pageChange;
-                    }
-                    else if (!opened && index === 0) {
-                        addPageChange(state, 0, take);
-                    }
-                    else if (!opened && index === _this.vs.total - 1) {
-                        addPageChange(state, _this.vs.total - _this.vs.pageSize, take);
-                    }
-                    else if (!opened) {
-                        var newSkip = Math.max(0, skip + (listItemIndex < 0 ? -1 : 1));
-                        addPageChange(state, newSkip, take);
-                    }
-                    if (!_this.state.opened) {
-                        _this.vs.reset();
-                    }
-                    _this._valueNotInData = true;
-                    if (controlled) {
-                        _this.indexDuringOnChange = index;
-                    }
-                    else {
-                        _this._index = index;
-                        state.data.selectedIndex = index;
-                    }
-                }
-            }
+            _this.base.value = value;
+            _this.base.text = text;
+            _this.base.index = selected;
         };
-        _this.handleNavigate = function (eventData, state) {
-            var event = eventData.event;
-            if ((eventData.action === navigationService_1.NavigationAction.Open && !_this.state.opened)
-                || (eventData.action === navigationService_1.NavigationAction.Close && _this.state.opened)) {
-                _this.togglePopup(state);
+        _this.togglePopup = function (state) {
+            _this.base.togglePopup(state);
+            if (!_this.state.opened) {
+                _this.base.calculatePopupWidth();
             }
-            else if (event.keyCode === 13 /* enter */ || event.keyCode === 32 /* space */) {
-                _this.togglePopup(state);
-            }
-            else if (eventData.index !== undefined) {
-                _this.handleItemSelect(eventData.index, state);
-            }
         };
-        _this.handleListFilterChange = function (event) {
-            var state = _this.initState();
-            var value = event.target.value;
-            var field = _this.props.textField;
-            state.data.filterText = value;
-            state.events.push({
-                type: 'onFilterChange',
-                filter: {
-                    field: field,
-                    operator: 'contains',
-                    ignoreCase: true,
-                    value: value
-                }
-            });
-            state.syntheticEvent = event;
-            _this.applyState(state);
-        };
         _this.renderDropDownWrapper = function () {
             var _a = _this.props, defaultItem = _a.defaultItem, valueField = _a.valueField, disabled = _a.disabled, tabIndex = _a.tabIndex, loading = _a.loading, iconClassName = _a.iconClassName;
             var _b = _this.state, opened = _b.opened, isFocused = _b.isFocused;
-            var index = getItemIndex(_this.props, _this.value);
-            var text = getText(_this.props, index);
+            var index = util_1.getItemIndex(_this.props, _this.value);
+            var text = util_1.getText(_this.props, index);
             if (!text && util_1.isPresent(_this.value) && index === -1 &&
-                getItemValue(defaultItem, valueField) !== _this.value) {
-                text = _this._text;
+                util_1.getItemValue(defaultItem, valueField) !== _this.value) {
+                text = _this.base.text;
             }
-            return (React.createElement(DropDownWrapper_1.default, { disabled: disabled, focused: isFocused, tabIndex: tabIndex, ariaExpanded: opened || false, ariaOwns: _this.listBoxId, ariaActiveDescendant: _this.optionPrefix + '-' + (_this.value || ''), onFocus: _this.handleFocus, onBlur: _this.handleBlur, onClick: _this.handleWrapperClick, onKeyDown: _this.handleKeyDown, onKeyPress: _this.handleKeyPress, ref: function (wrapper) { _this._wrapper = wrapper; } },
+            return (React.createElement(DropDownWrapper_1.default, { disabled: disabled, focused: isFocused, tabIndex: tabIndex, ariaExpanded: opened || false, ariaOwns: _this.base.listBoxId, ariaActiveDescendant: _this.base.optionPrefix + '-' + (_this.value || ''), onFocus: _this.handleFocus, onBlur: _this.handleBlur, onClick: _this.handleWrapperClick, onKeyDown: _this.handleKeyDown, onKeyPress: _this.handleKeyPress, ref: function (wrapper) { _this.base.wrapper = wrapper; } },
                 React.createElement("span", { className: "k-input" }, text),
@@ -327,2 +160,3 @@ React.createElement("span", { className: "k-select" },
             var virtual = _this.props.virtual !== undefined;
+            var vs = _this.base.vs;
             var listContainerProps = {
@@ -333,5 +167,5 @@ onMouseDown: function (e) {
                 },
-                dir: _this.props.dir !== undefined ? _this.props.dir : _this._dirCalculated,
+                dir: _this.props.dir !== undefined ? _this.props.dir : _this.base.dirCalculated,
                 onBlur: _this.handleBlur,
-                width: _this.popupWidth,
+                width: _this.base.popupWidth,
                 popupSettings: {
@@ -343,7 +177,7 @@ animate: (popupSettings || {}).animate,
                     open: function () {
-                        _this.vs.hidden = false;
+                        vs.hidden = false;
                     },
                     className: 'k-list-container k-reset',
                     close: function () {
-                        _this.vs.hidden = true;
+                        vs.hidden = true;
                         _this.onPopupClosed();
@@ -367,3 +201,4 @@ }
             var popupSettings = _this.props.popupSettings;
-            return _this.vs.enabled ? (React.createElement("div", { onScroll: _this.vs.scrollHandler, ref: _this.scrollerRef, style: {
+            var vs = _this.base.vs;
+            return vs.enabled ? (React.createElement("div", { onScroll: vs.scrollHandler, ref: _this.scrollerRef, style: {
                     height: (popupSettings || {}).height,
@@ -375,4 +210,5 @@ overflowY: 'scroll'
         _this.renderScrollElement = function () {
-            return _this.vs.enabled && (React.createElement("div", { ref: function (element) {
-                    _this.vs.scrollElement = element;
+            var vs = _this.base.vs;
+            return vs.enabled && (React.createElement("div", { ref: function (element) {
+                    vs.scrollElement = element;
                 }, key: scrollElemKey }));
@@ -382,13 +218,15 @@ };
             var _a = _this.props, data = _a.data, textField = _a.textField, valueField = _a.valueField, defaultItem = _a.defaultItem, popupSettings = _a.popupSettings;
+            var vs = _this.base.vs;
             var _b = _this.state, opened = _b.opened, skip = _b.skip;
             var translate = "translateY(" + _this.vs.translate + "px)";
             var value = _this.value;
-            var selectedIndex = getItemIndex(_this.props, value);
-            return (React.createElement(List_1.default, { id: _this.listBoxId, show: opened, data: (data || []).slice(), selected: selectedIndex === -1 && !defaultItem ? undefined : selectedIndex, value: value, textField: textField, valueField: valueField, optionPrefix: _this.optionPrefix, listRef: function (element) {
-                    if (_this.vs.enabled) {
-                        _this.vs.list = element;
+            var selectedIndex = util_1.getItemIndex(_this.props, value);
+            var hasSelected = !(selectedIndex < 0 && !defaultItem);
+            return (React.createElement(List_1.default, { id: _this.base.listBoxId, show: opened, data: (data || []).slice(), focusedIndex: !hasSelected && skip === 0 ? 0 : undefined, value: value, textField: textField, valueField: valueField, optionPrefix: _this.base.optionPrefix, listRef: function (element) {
+                    if (vs.enabled) {
+                        vs.list = element;
                     }
-                    _this._list = element;
-                }, wrapperStyle: !_this.vs.enabled ?
-                    { maxHeight: (popupSettings || {}).height } : { float: 'left', width: '100%' }, wrapperCssClass: !_this.vs.enabled ? 'k-list-scroller' : undefined, listStyle: _this.vs.enabled ?
+                    _this.base.list = element;
+                }, wrapperStyle: !vs.enabled ?
+                    { maxHeight: (popupSettings || {}).height } : { float: 'left', width: '100%' }, wrapperCssClass: !vs.enabled ? 'k-list-scroller' : undefined, listStyle: vs.enabled ?
                     { transform: translate } : undefined, key: listKey, skip: skip, onClick: _this.handleItemClick }));
@@ -407,27 +245,7 @@ };
             if (element) {
-                _this.vs.container = element;
-                _this._scrollElement = element;
-                setTimeout(_this.vs.calculateScrollSizes.bind(_this.vs), 0);
+                var vs = _this.base.vs;
+                vs.container = element;
+                setTimeout(vs.calculateScrollSizes.bind(vs), 0);
             }
         };
-        _this.pageChange = function (page, _) {
-            if (_this.props.virtual) {
-                var state = _this.initState();
-                addPageChange(state, page.skip, page.take);
-                _this.applyState(state);
-            }
-        };
-        _this.togglePopup = function (state) {
-            state.data.isFocused = true;
-            state.data.opened = !_this.state.opened;
-            if (_this.state.opened) {
-                state.events.push({ type: 'onClose' });
-            }
-            else {
-                var popupWidth = (_this.props.popupSettings || {}).width;
-                _this.popupWidth = popupWidth !== undefined ? popupWidth :
-                    ReactDOM.findDOMNode(_this._wrapper).offsetWidth + 'px';
-                state.events.push({ type: 'onOpen' });
-            }
-        };
         _this.search = function () {
@@ -466,35 +284,7 @@ clearTimeout(_this._typingTimeout);
             if (index !== dataLength) {
-                var state = _this.initState();
+                var state = _this.base.initState();
                 _this.handleItemSelect(index, state);
-                _this.applyState(state);
+                _this.base.applyState(state);
             }
         };
-        _this.setValueSelection = function (value, text, selected, state) {
-            if (value === void 0) { value = undefined; }
-            if (text === void 0) { text = undefined; }
-            if (selected === void 0) { selected = undefined; }
-            if (_this.state.selectedIndex !== selected) {
-                state.data.selectedIndex = selected;
-            }
-            _this._value = value;
-            _this._text = text;
-            _this._index = selected;
-        };
-        _this.updateSelectedItem = function (props, state) {
-            var value = props.value !== undefined ? props.value : _this.value;
-            var selected = getItemIndex(props, value);
-            var text = getText(props, selected);
-            var defaultItemValue = props.defaultItem ?
-                getItemValue(props.defaultItem, props.valueField) : undefined;
-            if (util_1.isPresent(value) && selected === -1 && defaultItemValue === undefined) {
-                return;
-            }
-            if (selected === -1 && defaultItemValue !== undefined) {
-                value = defaultItemValue;
-                text = getItemText(props.defaultItem, _this.props.textField);
-            }
-            selected = selected !== -1 ? selected + (state.data.skip || 0) : selected;
-            _this._text = text;
-            _this.setValueSelection(value, text, selected, state);
-        };
         _this.filteringInputWillFocus = function () {
@@ -508,3 +298,3 @@ _this._filteringWillFocus = true;
             if (_this.state.isFocused) {
-                var wrapper_1 = ReactDOM.findDOMNode(_this._wrapper);
+                var wrapper_1 = ReactDOM.findDOMNode(_this.base.wrapper);
                 setTimeout(function () { wrapper_1.focus(); }, 0);
@@ -516,6 +306,6 @@ }
         if (!util_1.isPresent(value) && util_1.isPresent(props.defaultItem)) {
-            value = getItemValue(props.defaultItem, props.valueField);
+            value = util_1.getItemValue(props.defaultItem, props.valueField);
         }
         else {
-            selected = getItemIndex(props, value);
+            selected = util_1.getItemIndex(props, value);
         }
@@ -531,9 +321,5 @@ _this.state = {
         };
-        _this._index = selected;
-        _this._value = value;
-        _this.listBoxId = util_1.guid();
-        _this.optionPrefix = util_1.guid();
-        _this._navigationService = new navigationService_1.NavigationService(_this.handleNavigate);
-        _this.initVirtualization(_this.props.virtual, undefined);
-        _this.vs.PageChange = _this.pageChange;
+        _this.base = new DropDownBase_1.default(_this);
+        _this.base.index = selected;
+        _this.base.value = value;
         return _this;
@@ -550,8 +336,3 @@ }
         get: function () {
-            if (this.valueDuringOnChange !== undefined) {
-                return this.valueDuringOnChange;
-            }
-            else {
-                return this._value;
-            }
+            return this.base.value;
         },
@@ -563,8 +344,3 @@ enumerable: true,
         get: function () {
-            if (this.indexDuringOnChange !== undefined) {
-                return this.indexDuringOnChange;
-            }
-            else {
-                return this._index;
-            }
+            return this.base.index;
         },
@@ -575,102 +351,35 @@ enumerable: true,
     DropDownList.prototype.componentWillReceiveProps = function (nextProps) {
-        var state = this.initState();
-        if (nextProps.opened !== undefined) {
-            state.data.opened = nextProps.opened;
-        }
-        if (!nextProps.filterable && this.state.filterText) {
-            state.data.filterText = '';
-        }
-        else if (nextProps.filterable && nextProps.filter !== undefined) {
-            state.data.filterText = nextProps.filter;
-        }
-        this.updateVirtualization(nextProps, state);
-        var controlled = nextProps.value !== undefined;
-        if (this._valueNotInData && !controlled) {
-            var index = this.index - (state.data.skip || 0);
-            this._value = getValue(nextProps, index);
-            this._text = getText(nextProps, index);
-        }
-        else {
-            this.updateSelectedItem(nextProps, state);
-        }
-        this._valueNotInData = false;
-        this.applyState(state);
+        this.base.componentWillReceiveProps(nextProps);
     };
     DropDownList.prototype.componentWillUpdate = function (nextProps, nextState) {
-        if (nextState.opened && (this.state.selectedIndex !== nextState.selectedIndex) && this.state.opened) {
-            this.scrollToSelectedItem(nextState);
-        }
-        if (nextProps.value !== undefined && this.value === undefined) {
-            this._value = nextProps.value;
-        }
+        this.base.componentWillUpdate(nextProps, nextState);
     };
     DropDownList.prototype.componentDidUpdate = function (_, prevState) {
-        var _this = this;
-        if (this.state.opened && !prevState.opened) {
-            var scrollElement_1 = this._scrollElement;
-            if (scrollElement_1) {
-                var scrollTop = scrollElement_1.scrollTop;
-                var translate_1 = this.vs.translate;
-                var hidden = this.vs.hidden;
-                var skip_1 = this.state.skip || 0;
-                if (scrollTop !== translate_1 || (translate_1 === 0 && scrollTop === 0 && skip_1 > 0)) {
-                    var resetScroll = function () {
-                        _this.vs.enabled = false;
-                        var listOffsetTop = translate_1 > 0 ?
-                            translate_1 : (_this.vs.itemHeight * skip_1);
-                        scrollElement_1.scrollTop = listOffsetTop;
-                        _this.vs.translateTo(translate_1 || listOffsetTop);
-                        _this.vs.enabled = true;
-                        if (getItemIndex(_this.props, _this.value) >= 0) {
-                            _this.scrollToSelectedItem(_this.state);
-                        }
-                    };
-                    if (this.vs.itemHeight !== 0 && !hidden) {
-                        resetScroll();
-                    }
-                    else {
-                        setTimeout(resetScroll, 0);
-                    }
-                }
-            }
-            else {
-                this.scrollToSelectedItem(this.state);
-            }
-        }
+        this.base.componentDidUpdate(prevState);
     };
     DropDownList.prototype.componentDidMount = function () {
-        if (this.element) {
-            this._dirCalculated = window.getComputedStyle(this.element).direction || undefined;
-        }
+        this.base.componentDidMount();
     };
     DropDownList.prototype.componentWillUnmount = function () {
-        delete this.vs.container;
-        delete this.vs.list;
-        delete this._scrollElement;
+        this.base.componentWillUnmount();
     };
-    DropDownList.prototype.updateVirtualization = function (nextProps, state) {
-        var next = nextProps.virtual;
-        var current = this.props.virtual;
-        if (next !== undefined && current !== undefined && (current.total !== next.total || next.skip === 0)) {
-            var settings = Object.assign({}, next, { skip: 0 });
-            this.initVirtualization(settings, state);
-            if (this.vs.calculateScrollSizes()) {
-                this.vs.reset();
-            }
-        }
-        else {
-            this.initVirtualization(next, state);
-        }
+    DropDownList.prototype.onNavigate = function (event) {
+        var _a = this.props, data = _a.data, filterable = _a.filterable, defaultItem = _a.defaultItem;
+        var state = this.base.initState();
+        state.syntheticEvent = event;
+        var vs = this.base.vs;
+        var index = util_1.getItemIndex(this.props, this.value);
+        this.base.navigation.navigate({
+            opened: this.state.opened,
+            event: event,
+            state: state,
+            currentIndex: vs.skip + index,
+            max: (vs.enabled ? vs.total : (data || []).length) - 1,
+            min: defaultItem ? -1 : 0,
+            leftRightKeysNavigation: filterable,
+            togglePopup: this.togglePopup,
+            handleItemSelect: this.handleItemSelect
+        });
+        this.base.applyState(state);
     };
-    DropDownList.prototype.initVirtualization = function (virtual, state) {
-        this.vs.enabled = virtual !== undefined;
-        if (virtual !== undefined) {
-            this.vs.skip = virtual.skip;
-            this.vs.pageSize = virtual.pageSize;
-            this.vs.total = virtual.total;
-            if (state !== undefined) {
-                state.data.skip = virtual.skip;
-            }
-        }
-    };
     DropDownList.prototype.render = function () {
@@ -684,114 +393,7 @@ var _this = this;
     };
-    DropDownList.prototype.scrollToSelectedItem = function (state) {
-        var list = this._list;
-        var listItemIndex = (state.selectedIndex || 0) - (state.skip || 0);
-        var item = list ? list.children[0] : undefined;
-        if (!item) {
-            return;
-        }
-        var itemHeight = item.offsetHeight;
-        var virtualScroll = this.vs.enabled;
-        var scrollElement = (this._scrollElement || list.parentNode);
-        var viewportHeight = scrollElement.offsetHeight;
-        var itemOffsetTop = (itemHeight * listItemIndex) -
-            (virtualScroll ? (scrollElement.scrollTop - this.vs.translate) : 0);
-        if (virtualScroll) {
-            var diff = 0;
-            if (itemOffsetTop + itemHeight > viewportHeight) {
-                diff = itemOffsetTop + itemHeight - viewportHeight;
-            }
-            else if (itemOffsetTop < 0) {
-                diff = itemOffsetTop;
-            }
-            if (diff !== 0) {
-                scrollElement.scrollTop += diff;
-            }
-            else if (scrollElement.scrollTop === 0 && this.vs.translate !== 0) {
-                scrollElement.scrollTop = this.vs.translate;
-            }
-        }
-        else {
-            if (itemOffsetTop + itemHeight > viewportHeight + scrollElement.scrollTop) {
-                scrollElement.scrollTop = (itemOffsetTop + itemHeight - viewportHeight);
-            }
-            else if (itemOffsetTop < scrollElement.scrollTop) {
-                scrollElement.scrollTop -= scrollElement.scrollTop - itemOffsetTop;
-            }
-        }
-    };
-    DropDownList.prototype.initState = function () {
-        var state = {
-            data: {},
-            events: [],
-            syntheticEvent: undefined
-        };
-        return state;
-    };
-    DropDownList.prototype.applyState = function (state) {
-        var _this = this;
-        var eventArgs = {
-            syntheticEvent: state.syntheticEvent,
-            nativeEvent: state.syntheticEvent ? state.syntheticEvent.nativeEvent : undefined,
-            target: this
-        };
-        if (Object.keys(state.data).length > 0) {
-            this.setState(state.data);
-        }
-        state.events.forEach(function (eventData) {
-            var type = eventData.type;
-            delete eventData.type;
-            var handler = _this.props[type];
-            if (handler) {
-                handler.call(undefined, __assign({}, eventArgs, eventData));
-            }
-        });
-        this.indexDuringOnChange = undefined;
-        this.valueDuringOnChange = undefined;
-    };
     return DropDownList;
 }(React.Component));
-DropDownList.propTypes = {
-    opened: PropTypes.bool,
-    delay: PropTypes.number,
-    disabled: PropTypes.bool,
-    dir: PropTypes.string,
-    filterable: PropTypes.bool,
-    ignoreCase: PropTypes.bool,
-    loading: PropTypes.bool,
-    tabIndex: PropTypes.number,
-    data: PropTypes.array,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
-    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
-    textField: PropTypes.string,
-    valueField: PropTypes.string,
-    className: PropTypes.string,
-    iconClassName: PropTypes.string,
-    popupSettings: PropTypes.shape({
-        animate: PropTypes.bool,
-        width: PropTypes.string,
-        height: PropTypes.string
-    }),
-    virtual: PropTypes.shape({
-        pageSize: PropTypes.number.isRequired,
-        skip: PropTypes.number.isRequired,
-        total: PropTypes.number.isRequired
-    }),
-    onOpen: PropTypes.func,
-    onClose: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    onFilterChange: PropTypes.func,
-    onPageChange: PropTypes.func
-};
-DropDownList.defaultProps = {
-    delay: 500,
-    ignoreCase: true,
-    tabIndex: 0,
-    popupSettings: {
-        animate: true,
-        height: '200px'
-    }
-};
+DropDownList.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, loading: PropTypes.bool, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]), defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]), iconClassName: PropTypes.string }, DropDownBase_1.default.propTypes);
+DropDownList.defaultProps = __assign({ delay: 500, ignoreCase: true }, DropDownBase_1.default.defaultProps);
 exports.default = DropDownList;
 //# sourceMappingURL=DropDownList.js.map

dist/npm/DropDownList/DropDownListProps.d.ts

 /// <reference types="react" />
 import DropDownList from './DropDownList';
-import { PopupSettings, VirtualizationSettings } from './../common/settings';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
+import { VirtualizationSettings, PopupSettings } from '../common/settings';
 /**
@@ -6,0 +6,0 @@ * Represents the object of the `filterChange` DropDownList event.

dist/npm/main.d.ts

 import { DropDownList, DropDownListProps } from './DropDownList/';
 import { DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent } from './DropDownList/DropDownListProps';
 import { Page, VirtualizationSettings, PopupSettings } from './common/settings';
-export { DropDownList, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, PopupSettings };
+import { ComboBox, ComboBoxProps } from './ComboBox/';
+import { ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent } from './ComboBox/ComboBoxProps';
+export { DropDownList, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, PopupSettings, ComboBox, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent };

dist/npm/main.js

@@ -5,2 +5,4 @@ "use strict";
 exports.DropDownList = _1.DropDownList;
+var _2 = require("./ComboBox/");
+exports.ComboBox = _2.ComboBox;
 //# sourceMappingURL=main.js.map

dist/systemjs/kendo-react-dropdowns.js

@@ -1,1 +0,1 @@
-System.register("@progress/kendo-react-dropdowns",["react","prop-types","react-dom","classnames","@progress/kendo-react-popup"],function(e){var t,n,i,o,r;function a(e){return e.__useDefault?e.default:e}return{setters:[function(e){t=a(e)},function(e){n=a(e)},function(e){i=a(e)},function(e){o=a(e)},function(e){r=a(e)}],execute:function(){!function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}n.m=e,n.c=t,n.p="",n(0)}([function(t,n,i){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=i(1);n.DropDownList=o.DropDownList,function(t){for(var n in t)e(n,t[n])}(n)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(2);t.DropDownList=i.default},function(e,t,n){"use strict";var i,o=this&&this.__extends||(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}),r=this&&this.__assign||Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e};Object.defineProperty(t,"__esModule",{value:!0});var a=n(3),s=n(4),l=n(5),p=n(6),c=n(7),u=n(8),d=n(10),h=n(11),f=n(13),v=n(15),g=n(16),m=n(12),y=0,_=1,x=2,b=function(e){"INPUT"!==e.target.nodeName&&e.preventDefault()},S=function(e,t){var n=e.valueField;return(e.data||[]).findIndex(function(e){return e===t||m.getter(e,n)===t})},k=function(e,t){return-1!==["string","number","undefined"].indexOf(typeof e)?e:m.getter(e,t)},C=function(e,t){return t?m.getter(e,t):e},w=function(e,t){if(-1===t)return C(e.defaultItem,e.valueField);if(e.data){var n=e.data[t];return C(n,e.valueField)}},O=function(e,t){if(!e.data)return null;if(-1===t)return k(e.defaultItem,e.textField);var n=e.data[t];return k(n,e.textField)},P=function(e,t,n){e.events.push({type:"onPageChange",page:{skip:t,take:n}})},D=function(e){function t(t){var n=e.call(this,t)||this;n.valueDuringOnChange=void 0,n.indexDuringOnChange=void 0,n.vs=new v.default,n._valueNotInData=!1,n._lastMousedown=0,n.handleFocus=function(e){if(!n.state.isFocused){var t=n.initState();t.data.isFocused=!0,t.events.push({type:"onFocus"}),t.syntheticEvent=e,n.applyState(t)}},n.handleBlur=function(e){if(n.state.isFocused&&!n._filteringWillFocus){if((new Date).getTime()-n._lastMousedown<500)return n._lastMousedown=0,e.target.focus();var t=n.initState();t.data.isFocused=!1,t.data.opened=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,n.state.opened&&t.events.push({type:"onClose"}),n.applyState(t)}},n.handleWrapperClick=function(e){var t=n.initState();n.togglePopup(t),t.syntheticEvent=e,n.applyState(t)},n.handleItemClick=function(e,t){var i=n.initState();n.handleItemSelect(e,i),n.togglePopup(i),i.syntheticEvent=t,n.applyState(i)},n.handleDefaultItemClick=function(e,t){var i=n.initState(),o=n.props,r=o.defaultItem,a=o.valueField,s=o.textField;n.togglePopup(i);var l=C(r,a),p=k(r,s);n.setValueSelection(l,p,e,i),i.events.push({type:"onChange"}),i.syntheticEvent=t,n.applyState(i)},n.handleKeyDown=function(e){var t=n.props,i=t.data,o=t.filterable,r=t.disabled,a=e.keyCode;if(!r&&!(o&&(37===a||39===a||32===a||16===a||36===a||35===a))){var s=n.initState();s.syntheticEvent=e;var l=S(n.props,n.value),p=n._navigationService.process({current:n.vs.skip+l,max:(n.vs.enabled?n.vs.total:(i||[]).length)-1,min:n.props.defaultItem?-1:0,event:e,state:s}),c=p===g.NavigationAction.Left||p===g.NavigationAction.Right;p===g.NavigationAction.Undefined||p===g.NavigationAction.Tab||p===g.NavigationAction.Backspace||p===g.NavigationAction.Delete||c&&o||!(p!==g.NavigationAction.Enter||p===g.NavigationAction.Enter&&n.props.opened)||e.preventDefault(),n.applyState(s)}},n.handleKeyPress=function(e){if(!n.props.filterable&&0!==e.which&&13!==e.keyCode){var t=String.fromCharCode(e.charCode||e.keyCode);n.props.ignoreCase&&(t=t.toLowerCase())," "===t&&e.preventDefault(),n.setState({word:n.state.word+t,last:n.state.last+t},n.search)}},n.handleItemSelect=function(e,t){var i=n.state.skip||0,o=e-i,r=n.props.data||[],a=void 0!==n.props.value;if(m.isPresent(e))if(o>=0&&o<r.length||-1===o&&n.props.defaultItem){var s=w(n.props,o),l=O(n.props,o),p=n.value;a?(n.valueDuringOnChange=s,n.indexDuringOnChange=e):(n._value=s,n._index=e,n._text=l,t.data.selectedIndex=e),s!==p&&t.events.push({type:"onChange"})}else if(void 0!==n.props.virtual){var c=n._scrollElement,u=n.state.opened&&c,d=n.vs.pageSize;if(u&&0===e)P(t,0,d),n.vs.reset();else if(u&&e===n.vs.total-1)P(t,n.vs.total-n.vs.pageSize,d),n.vs.scrollToEnd();else if(u){var h=n.vs.PageChange;n.vs.PageChange=function(e){P(t,e.skip,e.take)},(e>n.index?n.vs.localScrollDown:n.vs.localScrollUp).call(n.vs,t.syntheticEvent),n.vs.PageChange=h}else if(u||0!==e)if(u||e!==n.vs.total-1){if(!u){var f=Math.max(0,i+(o<0?-1:1));P(t,f,d)}}else P(t,n.vs.total-n.vs.pageSize,d);else P(t,0,d);n.state.opened||n.vs.reset(),n._valueNotInData=!0,a?n.indexDuringOnChange=e:(n._index=e,t.data.selectedIndex=e)}},n.handleNavigate=function(e,t){var i=e.event;e.action===g.NavigationAction.Open&&!n.state.opened||e.action===g.NavigationAction.Close&&n.state.opened?n.togglePopup(t):13===i.keyCode||32===i.keyCode?n.togglePopup(t):void 0!==e.index&&n.handleItemSelect(e.index,t)},n.handleListFilterChange=function(e){var t=n.initState(),i=e.target.value,o=n.props.textField;t.data.filterText=i,t.events.push({type:"onFilterChange",filter:{field:o,operator:"contains",ignoreCase:!0,value:i}}),t.syntheticEvent=e,n.applyState(t)},n.renderDropDownWrapper=function(){var e=n.props,t=e.defaultItem,i=e.valueField,o=e.disabled,r=e.tabIndex,s=e.loading,l=e.iconClassName,u=n.state,d=u.opened,h=u.isFocused,f=S(n.props,n.value),v=O(n.props,f);return!v&&m.isPresent(n.value)&&-1===f&&C(t,i)!==n.value&&(v=n._text),a.createElement(c.default,{disabled:o,focused:h,tabIndex:r,ariaExpanded:d||!1,ariaOwns:n.listBoxId,ariaActiveDescendant:n.optionPrefix+"-"+(n.value||""),onFocus:n.handleFocus,onBlur:n.handleBlur,onClick:n.handleWrapperClick,onKeyDown:n.handleKeyDown,onKeyPress:n.handleKeyPress,ref:function(e){n._wrapper=e}},a.createElement("span",{className:"k-input"},v),a.createElement("span",{className:"k-select"},a.createElement("span",{className:p("k-icon",l,{"k-i-arrow-s":!s&&!l,"k-i-loading":s&&!l})})))},n.renderListContainer=function(){var e=n.props.popupSettings,t=n.state.opened,i=void 0!==n.props.virtual,o={onMouseDown:function(e){n._lastMousedown=(new Date).getTime(),b(e)},dir:void 0!==n.props.dir?n.props.dir:n._dirCalculated,onBlur:n.handleBlur,width:n.popupWidth,popupSettings:{animate:(e||{}).animate,anchor:n.element,appendTo:document.body,show:t,open:function(){n.vs.hidden=!1},className:"k-list-container k-reset",close:function(){n.vs.hidden=!0,n.onPopupClosed()}}};return a.createElement(u.default,r({},o),n.renderListFilter(),i?n.renderDefaultItem():void 0,n.renderScrollWrapper(i?[n.renderList(),n.renderScrollElement()]:[n.renderDefaultItem(),n.renderList(),n.renderScrollElement()]))},n.renderScrollWrapper=function(e){var t=n.props.popupSettings;return n.vs.enabled?a.createElement("div",{onScroll:n.vs.scrollHandler,ref:n.scrollerRef,style:{height:(t||{}).height,overflowY:"scroll"}},e):e},n.renderScrollElement=function(){return n.vs.enabled&&a.createElement("div",{ref:function(e){n.vs.scrollElement=e},key:x})},n.renderList=function(){var e=n.props,t=e.data,i=e.textField,o=e.valueField,r=e.defaultItem,s=e.popupSettings,l=n.state,p=l.opened,c=l.skip,u="translateY("+n.vs.translate+"px)",d=n.value,h=S(n.props,d);return a.createElement(f.default,{id:n.listBoxId,show:p,data:(t||[]).slice(),selected:-1!==h||r?h:void 0,value:d,textField:i,valueField:o,optionPrefix:n.optionPrefix,listRef:function(e){n.vs.enabled&&(n.vs.list=e),n._list=e},wrapperStyle:n.vs.enabled?{float:"left",width:"100%"}:{maxHeight:(s||{}).height},wrapperCssClass:n.vs.enabled?void 0:"k-list-scroller",listStyle:n.vs.enabled?{transform:u}:void 0,key:_,skip:c,onClick:n.handleItemClick})},n.renderListFilter=function(){var e=n.props.filterable,t=n.state,i=t.opened,o=t.filterText;return e&&a.createElement(d.default,{value:o,focused:i,willFocus:n.filteringInputWillFocus,didFocus:n.filteringInputDidFocus,onChange:n.handleListFilterChange,onKeyDown:n.handleKeyDown})},n.renderDefaultItem=function(){var e=n.props,t=e.textField,i=e.defaultItem;return i&&a.createElement(h.default,{defaultItem:i,textField:t,selected:-1===n.index,key:y,onClick:n.handleDefaultItemClick})},n.scrollerRef=function(e){e&&(n.vs.container=e,n._scrollElement=e,setTimeout(n.vs.calculateScrollSizes.bind(n.vs),0))},n.pageChange=function(e,t){if(n.props.virtual){var i=n.initState();P(i,e.skip,e.take),n.applyState(i)}},n.togglePopup=function(e){if(e.data.isFocused=!0,e.data.opened=!n.state.opened,n.state.opened)e.events.push({type:"onClose"});else{var t=(n.props.popupSettings||{}).width;n.popupWidth=void 0!==t?t:s.findDOMNode(n._wrapper).offsetWidth+"px",e.events.push({type:"onOpen"})}},n.search=function(){clearTimeout(n._typingTimeout),n.props.filterable||(n._typingTimeout=setTimeout(function(){n.setState({word:""})},n.props.delay),n.selectNext())},n.selectNext=function(){var e,t,i,o=(n.props.data||[]).map(function(e,t){return{item:e,itemIndex:t}}),r=m.sameCharsOnly(n.state.word,n.state.last),a=o.length,s=n.state.selectedIndex||0;for(n.props.defaultItem&&(i={item:n.props.defaultItem,itemIndex:-1},a+=1,s+=1),s+=r?1:0,o=m.shuffleData(o,s,i),t=0;t<a;t++){e=m.getter(o[t].item,n.props.textField);var l=Boolean(r&&m.matchText(e,n.state.last,n.props.ignoreCase)),p=Boolean(m.matchText(e,n.state.word,n.props.ignoreCase));if(l||p){t=o[t].itemIndex;break}}if(t!==a){var c=n.initState();n.handleItemSelect(t,c),n.applyState(c)}},n.setValueSelection=function(e,t,i,o){void 0===e&&(e=void 0),void 0===t&&(t=void 0),void 0===i&&(i=void 0),n.state.selectedIndex!==i&&(o.data.selectedIndex=i),n._value=e,n._text=t,n._index=i},n.updateSelectedItem=function(e,t){var i=void 0!==e.value?e.value:n.value,o=S(e,i),r=O(e,o),a=e.defaultItem?C(e.defaultItem,e.valueField):void 0;m.isPresent(i)&&-1===o&&void 0===a||(-1===o&&void 0!==a&&(i=a,r=k(e.defaultItem,n.props.textField)),o=-1!==o?o+(t.data.skip||0):o,n._text=r,n.setValueSelection(i,r,o,t))},n.filteringInputWillFocus=function(){n._filteringWillFocus=!0},n.filteringInputDidFocus=function(){n._filteringWillFocus=!1},n.onPopupClosed=function(){if(n.state.isFocused){var e=s.findDOMNode(n._wrapper);setTimeout(function(){e.focus()},0)}};var i=void 0!==t.value?t.value:t.defaultValue,o=-1;return!m.isPresent(i)&&m.isPresent(t.defaultItem)?i=C(t.defaultItem,t.valueField):o=S(t,i),n.state={filterText:"",word:"",last:"",selectedIndex:o,skip:0,isFocused:!1,opened:n.props.opened},n._index=o,n._value=i,n.listBoxId=m.guid(),n.optionPrefix=m.guid(),n._navigationService=new g.NavigationService(n.handleNavigate),n.initVirtualization(n.props.virtual,void 0),n.vs.PageChange=n.pageChange,n}return o(t,e),Object.defineProperty(t.prototype,"element",{get:function(){return this._element},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"value",{get:function(){return void 0!==this.valueDuringOnChange?this.valueDuringOnChange:this._value},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"index",{get:function(){return void 0!==this.indexDuringOnChange?this.indexDuringOnChange:this._index},enumerable:!0,configurable:!0}),t.prototype.componentWillReceiveProps=function(e){var t=this.initState();void 0!==e.opened&&(t.data.opened=e.opened),!e.filterable&&this.state.filterText?t.data.filterText="":e.filterable&&void 0!==e.filter&&(t.data.filterText=e.filter),this.updateVirtualization(e,t);var n=void 0!==e.value;if(this._valueNotInData&&!n){var i=this.index-(t.data.skip||0);this._value=w(e,i),this._text=O(e,i)}else this.updateSelectedItem(e,t);this._valueNotInData=!1,this.applyState(t)},t.prototype.componentWillUpdate=function(e,t){t.opened&&this.state.selectedIndex!==t.selectedIndex&&this.state.opened&&this.scrollToSelectedItem(t),void 0!==e.value&&void 0===this.value&&(this._value=e.value)},t.prototype.componentDidUpdate=function(e,t){var n=this;if(this.state.opened&&!t.opened){var i=this._scrollElement;if(i){var o=i.scrollTop,r=this.vs.translate,a=this.vs.hidden,s=this.state.skip||0;if(o!==r||0===r&&0===o&&s>0){var l=function(){n.vs.enabled=!1;var e=r>0?r:n.vs.itemHeight*s;i.scrollTop=e,n.vs.translateTo(r||e),n.vs.enabled=!0,S(n.props,n.value)>=0&&n.scrollToSelectedItem(n.state)};0===this.vs.itemHeight||a?setTimeout(l,0):l()}}else this.scrollToSelectedItem(this.state)}},t.prototype.componentDidMount=function(){this.element&&(this._dirCalculated=window.getComputedStyle(this.element).direction||void 0)},t.prototype.componentWillUnmount=function(){delete this.vs.container,delete this.vs.list,delete this._scrollElement},t.prototype.updateVirtualization=function(e,t){var n=e.virtual,i=this.props.virtual;if(void 0===n||void 0===i||i.total===n.total&&0!==n.skip)this.initVirtualization(n,t);else{var o=Object.assign({},n,{skip:0});this.initVirtualization(o,t),this.vs.calculateScrollSizes()&&this.vs.reset()}},t.prototype.initVirtualization=function(e,t){this.vs.enabled=void 0!==e,void 0!==e&&(this.vs.skip=e.skip,this.vs.pageSize=e.pageSize,this.vs.total=e.total,void 0!==t&&(t.data.skip=e.skip))},t.prototype.render=function(){var e=this,t=this.props,n=t.style,i=t.className,o=t.dir,r=this.state.opened;return a.createElement("span",{ref:function(t){e._element=t},className:p("k-widget k-dropdown k-header",i),style:n,dir:o,onMouseDown:r?b:void 0},this.renderDropDownWrapper(),this.renderListContainer())},t.prototype.scrollToSelectedItem=function(e){var t=this._list,n=(e.selectedIndex||0)-(e.skip||0),i=t?t.children[0]:void 0;if(i){var o=i.offsetHeight,r=this.vs.enabled,a=this._scrollElement||t.parentNode,s=a.offsetHeight,l=o*n-(r?a.scrollTop-this.vs.translate:0);if(r){var p=0;l+o>s?p=l+o-s:l<0&&(p=l),0!==p?a.scrollTop+=p:0===a.scrollTop&&0!==this.vs.translate&&(a.scrollTop=this.vs.translate)}else l+o>s+a.scrollTop?a.scrollTop=l+o-s:l<a.scrollTop&&(a.scrollTop-=a.scrollTop-l)}},t.prototype.initState=function(){return{data:{},events:[],syntheticEvent:void 0}},t.prototype.applyState=function(e){var t=this,n={syntheticEvent:e.syntheticEvent,nativeEvent:e.syntheticEvent?e.syntheticEvent.nativeEvent:void 0,target:this};Object.keys(e.data).length>0&&this.setState(e.data),e.events.forEach(function(e){var i=e.type;delete e.type;var o=t.props[i];o&&o.call(void 0,r({},n,e))}),this.indexDuringOnChange=void 0,this.valueDuringOnChange=void 0},t}(a.Component);D.propTypes={opened:l.bool,delay:l.number,disabled:l.bool,dir:l.string,filterable:l.bool,ignoreCase:l.bool,loading:l.bool,tabIndex:l.number,data:l.array,value:l.oneOfType([l.string,l.number,l.object]),defaultValue:l.oneOfType([l.string,l.number,l.object]),textField:l.string,valueField:l.string,className:l.string,iconClassName:l.string,popupSettings:l.shape({animate:l.bool,width:l.string,height:l.string}),virtual:l.shape({pageSize:l.number.isRequired,skip:l.number.isRequired,total:l.number.isRequired}),onOpen:l.func,onClose:l.func,onFocus:l.func,onBlur:l.func,onChange:l.func,onFilterChange:l.func,onPageChange:l.func},D.defaultProps={delay:500,ignoreCase:!0,tabIndex:0,popupSettings:{animate:!0,height:"200px"}},t.default=D},function(e,n){e.exports=t},function(e,t){e.exports=i},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t,n){"use strict";var i,o=this&&this.__extends||(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var r=n(3),a=n(6),s=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return o(t,e),t.prototype.render=function(){var e=this.props,t=e.disabled,n=e.focused,i=e.style,o=e.ariaExpanded,s=e.ariaOwns,l=e.ariaActiveDescendant,p=e.tabIndex;return r.createElement("span",{role:"listbox",tabIndex:t?void 0:p,className:a("k-dropdown-wrap",this.props.className,{"k-state-default":!t,"k-state-focused":n,"k-state-disabled":t}),style:i,onFocus:this.props.onFocus,onBlur:this.props.onBlur,onKeyDown:this.props.onKeyDown,onKeyPress:this.props.onKeyPress,onClick:this.props.onClick,"aria-disabled":t||void 0,"aria-haspopup":!0,"aria-expanded":o,"aria-owns":s,"aria-activedescendant":l},this.props.children)},t}(r.Component);t.default=s},function(e,t,n){"use strict";var i,o=this&&this.__extends||(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}),r=this&&this.__assign||Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e};Object.defineProperty(t,"__esModule",{value:!0});var a=n(3),s=n(9),l=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return o(t,e),t.prototype.render=function(){var e=this.props,t=e.children,n=e.onMouseDown,i=e.onBlur,o=e.width,l=e.dir,p=e.popupSettings;return a.createElement(s.Popup,r({style:{width:o,direction:l}},p),a.createElement("div",{onMouseDown:n,onBlur:i},t))},t}(a.Component);t.default=l},function(e,t){e.exports=r},function(e,t,n){"use strict";var i,o=this&&this.__extends||(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var r=n(3),a=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return o(t,e),t.prototype.componentDidUpdate=function(){this._input&&this.props.focused&&(this.props.willFocus&&this.props.willFocus(),this._input.focus(),this.props.didFocus&&setTimeout(this.props.didFocus,0))},t.prototype.render=function(){var e=this;return r.createElement("span",{className:"k-list-filter"},r.createElement("input",{ref:function(t){e._input=t},value:this.props.value,className:"k-textbox",onChange:this.props.onChange,onKeyDown:this.props.onKeyDown}),r.createElement("span",{className:"k-icon k-i-search"}))},t}(r.Component);t.default=a},function(e,t,n){"use strict";var i,o=this&&this.__extends||(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var r=n(3),a=n(6),s=n(12),l=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.onMouseDown=function(e){e.preventDefault()},t.onClick=function(e){e.preventDefault(),t.props.onClick&&t.props.onClick(-1,e)},t}return o(t,e),t.prototype.render=function(){var e=this.props,t=e.selected,n=e.defaultItem,i=e.textField;return r.createElement("div",{onClick:this.onClick,onMouseDown:this.onMouseDown,className:a("k-list-optionlabel",{"k-state-selected":t})},s.getter(n,i)||"")},t}(r.Component);t.default=l},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.guid=function(){var e,t,n="";for(e=0;e<32;e++)t=16*Math.random()|0,8!==e&&12!==e&&16!==e&&20!==e||(n+="-"),n+=(12===e?4:16===e?3&t|8:t).toString(16);return n};var n=function(e){return null!==e&&void 0!==e};t.isPresent=n;t.getter=function(e,t,i){if(void 0===i&&(i=!1),n(e))return i?t&&n(e[t])?e[t]:e:t?e[t]:e};t.sameCharsOnly=function(e,t){for(var n=0;n<e.length;n++)if(e.charAt(n)!==t)return!1;return!0};t.shuffleData=function(e,t,n){var i=e;return n&&(i=[n].concat(i)),i.slice(t).concat(i.slice(0,t))};t.matchText=function(e,t,i){if(!n(e))return!1;var o=String(e);return i&&(o=o.toLowerCase()),0===o.indexOf(t)}},function(e,t,n){"use strict";var i,o=this&&this.__extends||(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var r=n(3),a=n(14),s=n(12),l=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return o(t,e),t.prototype.renderItems=function(){var e=this,t=this.props,n=t.textField,i=t.valueField,o=t.value,l=t.selected,p=t.optionPrefix,c=this.props.skip||0;return this.props.data.map(function(t,u){var d=s.getter(t,i),h=c+u;return r.createElement(a.default,{id:p+"-"+(d||h.toString()),dataItem:t,selected:d===o,focused:0===h&&void 0===l,index:h,key:h,onClick:e.props.onClick,textField:n})})},t.prototype.render=function(){var e=this.props,t=e.id,n=e.show,i=e.wrapperCssClass,o=e.wrapperStyle,a=e.listStyle,s=e.listRef,l=this.renderItems();return l.length?r.createElement("div",{className:i,style:o},r.createElement("ul",{id:t,role:"listbox","aria-hidden":!n||void 0,className:"k-list k-reset",ref:s,style:a},l)):r.createElement("div",{className:"k-nodata"},r.createElement("div",null,"NO DATA FOUND."))},t}(r.Component);t.default=l},function(e,t,n){"use strict";var i,o=this&&this.__extends||(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var r=n(3),a=n(6),s=n(12),l=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.handleClick=function(e){e.preventDefault(),t.props.onClick&&t.props.onClick(t.props.index||0,e)},t}return o(t,e),t.prototype.render=function(){var e=this.props,t=e.id,n=e.selected,i=e.focused,o=e.dataItem,l=e.textField;return r.createElement("li",{id:t,role:"option","aria-selected":n||!1,className:a("k-item",{"k-state-selected":n,"k-state-focused":i}),onClick:this.handleClick},s.getter(o,l))},t}(r.Component);t.default=l},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),o=1533915,r=function(){function e(){var e=this;this.containerHeight=0,this.skip=0,this.total=0,this.enabled=!1,this.pageSize=0,this.itemHeight=0,this.hidden=!1,this.prevScrollPos=0,this.listTranslate=0,this.scrollSyncing=!1,this.calculateScrollSizes=function(){e.scrollSyncing=!0;var t=!1;if(i.isPresent(e.list)){e.itemHeight=e.list?e.list.children[0].offsetHeight:e.itemHeight,e.containerHeight=Math.min(o,e.itemHeight*e.total);var n=e.containerHeight;(t=e.scrollElement.style.height!==n+"px")&&(e.scrollElement.style.height=n+"px")}return e.scrollSyncing=!1,t},this.scrollHandler=this.scrollHandler.bind(this)}return Object.defineProperty(e.prototype,"translate",{get:function(){return this.listTranslate},enumerable:!0,configurable:!0}),e.prototype.changePage=function(e,t){var n=Math.min(Math.max(0,e),this.total-this.pageSize);n!==this.skip&&this.PageChange({skip:n,take:this.pageSize},t)},e.prototype.translateTo=function(e){this.listTranslate=e,this.list&&(this.list.style.transform="translateY("+e+"px)")},e.prototype.reset=function(){this.scrollSyncing=!0,this.container&&(this.container.scrollTop=0),this.translateTo(0),this.scrollSyncing=!1},e.prototype.maxScroll=function(){return this.container.scrollHeight-this.container.offsetHeight},e.prototype.scrollToEnd=function(){if(this.container){var e=this.maxScroll();this.translateTo(e),this.container.scrollTop=e}},e.prototype.localScrollUp=function(e){var t,n=this.itemHeight,i=this.container.scrollTop,o=this.listTranslate,r=i-o;if(!(r>0)){for(t=0;t<this.skip&&!(o+n+r<=i);t++)o-=n;if(o=this.validateTranslate(o),this.skip-t<=0&&o>i)return this.translateTo(0),this.changePage(0,e),void(this.container.scrollTop=0);o!==this.listTranslate&&(this.translateTo(o),this.changePage(this.skip-t,e))}},e.prototype.localScrollDown=function(e){var t,n=this.itemHeight,i=this.container.scrollTop,o=this.listTranslate,r=this.list.children.length;for(t=0;t<r&&!(o+n>i);t++)o+=n;o=this.validateTranslate(o),t>=r&&this.skip+t>=this.total?(this.translateTo(o),this.changePage(this.total-1,e)):o!==this.listTranslate&&(this.translateTo(o),this.changePage(this.skip+t,e))},e.prototype.scrollNonStrict=function(e){var t=this.total*this.prevScrollPos/this.containerHeight,n=Math.min(Math.floor(t),this.total-1),i=this.containerHeight*t/this.total;i=this.validateTranslate(i),this.translateTo(i),this.changePage(n,e)},e.prototype.scrollHandler=function(e){if(this.enabled&&this.list&&!this.hidden&&!this.scrollSyncing){var t=this.container.scrollTop,n=this.prevScrollPos;this.prevScrollPos=t,t-n<0&&t>this.listTranslate-this.list.scrollHeight/10?this.localScrollUp(e):t-n>0&&t<this.listTranslate+2*this.list.scrollHeight/3?this.localScrollDown(e):this.scrollNonStrict(e)}},e.prototype.validateTranslate=function(e){return e=Math.max(0,e),e=Math.min(this.containerHeight-this.list.offsetHeight,e)},e}();t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i,o,r=n(12),a=function(){return function(e,t,n){this.index=e,this.event=t,this.action=n}}();t.NavigationEvent=a,(o=i=t.NavigationAction||(t.NavigationAction={}))[o.Undefined=0]="Undefined",o[o.Open=1]="Open",o[o.Close=2]="Close",o[o.Enter=3]="Enter",o[o.Space=4]="Space",o[o.Tab=5]="Tab",o[o.Esc=6]="Esc",o[o.Delete=7]="Delete",o[o.Backspace=8]="Backspace",o[o.Home=9]="Home",o[o.End=10]="End",o[o.Up=11]="Up",o[o.Down=12]="Down",o[o.Left=13]="Left",o[o.Right=14]="Right";var s=function(){function e(e){this.onNavigate=e}return e.prototype.process=function(e){var t=e.event,n=t.keyCode,o=t.altKey,r=e.state,s=void 0,l=i.Undefined;return o&&40===n?l=i.Open:o&&38===n?l=i.Close:13===n?l=i.Enter:32===n?l=i.Space:27===n?l=i.Close:9===n?l=i.Tab:38===n?(s=this.next({current:e.current,min:e.min,max:e.max,step:-1}),l=i.Up):37===n?(s=this.next({current:e.current,min:e.min,max:e.max,step:-1}),l=i.Left):40===n?(s=this.next({current:e.current,min:e.min,max:e.max,step:1}),l=i.Down):39===n?(s=this.next({current:e.current,min:e.min,max:e.max,step:1}),l=i.Right):36===n?(s=0,l=i.Home):35===n?(s=e.max,l=i.End):46===n?l=i.Delete:8===n&&(l=i.Backspace),l!==i.Undefined&&this.onNavigate(new a(s,t,l),r),l},e.prototype.next=function(e){return r.isPresent(e.current)?Math.min(e.max,Math.max(e.current+e.step,e.min)):e.min},e}();t.NavigationService=s}])}}});
+System.register("@progress/kendo-react-dropdowns",["react","prop-types","classnames","react-dom","@progress/kendo-react-popup"],function(e){var t,n,o,i,a;function s(e){return e.__useDefault?e.default:e}return{setters:[function(e){t=s(e)},function(e){n=s(e)},function(e){o=s(e)},function(e){i=s(e)},function(e){a=s(e)}],execute:function(){!function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}n.m=e,n.c=t,n.p="",n(0)}([function(t,n,o){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=o(1);n.DropDownList=i.DropDownList;var a=o(18);n.ComboBox=a.ComboBox,function(t){for(var n in t)e(n,t[n])}(n)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2);t.DropDownList=o.default},function(e,t,n){"use strict";var o,i=this&&this.__extends||(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}),a=this&&this.__assign||Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e};Object.defineProperty(t,"__esModule",{value:!0});var s=n(3),r=n(4),l=n(5),p=n(6),u=n(7),c=n(8),d=n(10),h=n(11),f=n(13),v=n(15),g=n(16),m=n(12),y=0,b=1,x=2,I=function(e){"INPUT"!==e.target.nodeName&&e.preventDefault()},C=function(e){function t(t){var n=e.call(this,t)||this;n.vs=new g.default,n._lastMousedown=0,n.handleFocus=function(e){n.base.handleFocus(e)},n.handleBlur=function(e){if(n.state.isFocused&&!n._filteringWillFocus){if((new Date).getTime()-n._lastMousedown<500)return n._lastMousedown=0,e.target.focus();var t=n.base.initState();t.data.isFocused=!1,t.data.opened=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,n.state.opened&&t.events.push({type:"onClose"}),n.base.applyState(t)}},n.handleWrapperClick=function(e){n.base.handleWrapperClick(e)},n.handleItemClick=function(e,t){n.base.handleItemClick(e,t)},n.handleDefaultItemClick=function(e,t){var o=n.base.initState(),i=n.props,a=i.defaultItem,s=i.valueField,r=i.textField;n.togglePopup(o);var l=m.getItemValue(a,s),p=m.getItemText(a,r);n.setValueSelection(l,p,e,o),o.events.push({type:"onChange"}),o.syntheticEvent=t,n.base.applyState(o)},n.handleKeyDown=function(e){n.base.handleKeyDown(e)},n.handleKeyPress=function(e){if(!n.props.filterable&&0!==e.which&&13!==e.keyCode){var t=String.fromCharCode(e.charCode||e.keyCode);n.props.ignoreCase&&(t=t.toLowerCase())," "===t&&e.preventDefault(),n.setState({word:n.state.word+t,last:n.state.last+t},n.search)}},n.handleItemSelect=function(e,t){n.base.handleItemSelect(e,t)},n.handleListFilterChange=function(e){var t=n.base.initState();n.base.filterChanged(e.target.value,t),t.syntheticEvent=e,n.base.applyState(t)},n.setValueSelection=function(e,t,o,i){void 0===e&&(e=void 0),void 0===t&&(t=void 0),void 0===o&&(o=void 0),n.state.selectedIndex!==o&&(i.data.selectedIndex=o),n.base.value=e,n.base.text=t,n.base.index=o},n.togglePopup=function(e){n.base.togglePopup(e),n.state.opened||n.base.calculatePopupWidth()},n.renderDropDownWrapper=function(){var e=n.props,t=e.defaultItem,o=e.valueField,i=e.disabled,a=e.tabIndex,r=e.loading,l=e.iconClassName,c=n.state,d=c.opened,h=c.isFocused,f=m.getItemIndex(n.props,n.value),v=m.getText(n.props,f);return!v&&m.isPresent(n.value)&&-1===f&&m.getItemValue(t,o)!==n.value&&(v=n.base.text),s.createElement(u.default,{disabled:i,focused:h,tabIndex:a,ariaExpanded:d||!1,ariaOwns:n.base.listBoxId,ariaActiveDescendant:n.base.optionPrefix+"-"+(n.value||""),onFocus:n.handleFocus,onBlur:n.handleBlur,onClick:n.handleWrapperClick,onKeyDown:n.handleKeyDown,onKeyPress:n.handleKeyPress,ref:function(e){n.base.wrapper=e}},s.createElement("span",{className:"k-input"},v),s.createElement("span",{className:"k-select"},s.createElement("span",{className:p("k-icon",l,{"k-i-arrow-s":!r&&!l,"k-i-loading":r&&!l})})))},n.renderListContainer=function(){var e=n.props.popupSettings,t=n.state.opened,o=void 0!==n.props.virtual,i=n.base.vs,r={onMouseDown:function(e){n._lastMousedown=(new Date).getTime(),I(e)},dir:void 0!==n.props.dir?n.props.dir:n.base.dirCalculated,onBlur:n.handleBlur,width:n.base.popupWidth,popupSettings:{animate:(e||{}).animate,anchor:n.element,appendTo:document.body,show:t,open:function(){i.hidden=!1},className:"k-list-container k-reset",close:function(){i.hidden=!0,n.onPopupClosed()}}};return s.createElement(c.default,a({},r),n.renderListFilter(),o?n.renderDefaultItem():void 0,n.renderScrollWrapper(o?[n.renderList(),n.renderScrollElement()]:[n.renderDefaultItem(),n.renderList(),n.renderScrollElement()]))},n.renderScrollWrapper=function(e){var t=n.props.popupSettings,o=n.base.vs;return o.enabled?s.createElement("div",{onScroll:o.scrollHandler,ref:n.scrollerRef,style:{height:(t||{}).height,overflowY:"scroll"}},e):e},n.renderScrollElement=function(){var e=n.base.vs;return e.enabled&&s.createElement("div",{ref:function(t){e.scrollElement=t},key:x})},n.renderList=function(){var e=n.props,t=e.data,o=e.textField,i=e.valueField,a=e.defaultItem,r=e.popupSettings,l=n.base.vs,p=n.state,u=p.opened,c=p.skip,d="translateY("+n.vs.translate+"px)",h=n.value,v=!(m.getItemIndex(n.props,h)<0&&!a);return s.createElement(f.default,{id:n.base.listBoxId,show:u,data:(t||[]).slice(),focusedIndex:v||0!==c?void 0:0,value:h,textField:o,valueField:i,optionPrefix:n.base.optionPrefix,listRef:function(e){l.enabled&&(l.list=e),n.base.list=e},wrapperStyle:l.enabled?{float:"left",width:"100%"}:{maxHeight:(r||{}).height},wrapperCssClass:l.enabled?void 0:"k-list-scroller",listStyle:l.enabled?{transform:d}:void 0,key:b,skip:c,onClick:n.handleItemClick})},n.renderListFilter=function(){var e=n.props.filterable,t=n.state,o=t.opened,i=t.filterText;return e&&s.createElement(d.default,{value:i,focused:o,willFocus:n.filteringInputWillFocus,didFocus:n.filteringInputDidFocus,onChange:n.handleListFilterChange,onKeyDown:n.handleKeyDown})},n.renderDefaultItem=function(){var e=n.props,t=e.textField,o=e.defaultItem;return o&&s.createElement(h.default,{defaultItem:o,textField:t,selected:-1===n.index,key:y,onClick:n.handleDefaultItemClick})},n.scrollerRef=function(e){if(e){var t=n.base.vs;t.container=e,setTimeout(t.calculateScrollSizes.bind(t),0)}},n.search=function(){clearTimeout(n._typingTimeout),n.props.filterable||(n._typingTimeout=setTimeout(function(){n.setState({word:""})},n.props.delay),n.selectNext())},n.selectNext=function(){var e,t,o,i=(n.props.data||[]).map(function(e,t){return{item:e,itemIndex:t}}),a=m.sameCharsOnly(n.state.word,n.state.last),s=i.length,r=n.state.selectedIndex||0;for(n.props.defaultItem&&(o={item:n.props.defaultItem,itemIndex:-1},s+=1,r+=1),r+=a?1:0,i=m.shuffleData(i,r,o),t=0;t<s;t++){e=m.getter(i[t].item,n.props.textField);var l=Boolean(a&&m.matchText(e,n.state.last,n.props.ignoreCase)),p=Boolean(m.matchText(e,n.state.word,n.props.ignoreCase));if(l||p){t=i[t].itemIndex;break}}if(t!==s){var u=n.base.initState();n.handleItemSelect(t,u),n.base.applyState(u)}},n.filteringInputWillFocus=function(){n._filteringWillFocus=!0},n.filteringInputDidFocus=function(){n._filteringWillFocus=!1},n.onPopupClosed=function(){if(n.state.isFocused){var e=r.findDOMNode(n.base.wrapper);setTimeout(function(){e.focus()},0)}};var o=void 0!==t.value?t.value:t.defaultValue,i=-1;return!m.isPresent(o)&&m.isPresent(t.defaultItem)?o=m.getItemValue(t.defaultItem,t.valueField):i=m.getItemIndex(t,o),n.state={filterText:"",word:"",last:"",selectedIndex:i,skip:0,isFocused:!1,opened:n.props.opened},n.base=new v.default(n),n.base.index=i,n.base.value=o,n}return i(t,e),Object.defineProperty(t.prototype,"element",{get:function(){return this._element},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"value",{get:function(){return this.base.value},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"index",{get:function(){return this.base.index},enumerable:!0,configurable:!0}),t.prototype.componentWillReceiveProps=function(e){this.base.componentWillReceiveProps(e)},t.prototype.componentWillUpdate=function(e,t){this.base.componentWillUpdate(e,t)},t.prototype.componentDidUpdate=function(e,t){this.base.componentDidUpdate(t)},t.prototype.componentDidMount=function(){this.base.componentDidMount()},t.prototype.componentWillUnmount=function(){this.base.componentWillUnmount()},t.prototype.onNavigate=function(e){var t=this.props,n=t.data,o=t.filterable,i=t.defaultItem,a=this.base.initState();a.syntheticEvent=e;var s=this.base.vs,r=m.getItemIndex(this.props,this.value);this.base.navigation.navigate({opened:this.state.opened,event:e,state:a,currentIndex:s.skip+r,max:(s.enabled?s.total:(n||[]).length)-1,min:i?-1:0,leftRightKeysNavigation:o,togglePopup:this.togglePopup,handleItemSelect:this.handleItemSelect}),this.base.applyState(a)},t.prototype.render=function(){var e=this,t=this.props,n=t.style,o=t.className,i=t.dir,a=this.state.opened;return s.createElement("span",{ref:function(t){e._element=t},className:p("k-widget k-dropdown k-header",o),style:n,dir:i,onMouseDown:a?I:void 0},this.renderDropDownWrapper(),this.renderListContainer())},t}(s.Component);C.propTypes=a({delay:l.number,ignoreCase:l.bool,loading:l.bool,value:l.oneOfType([l.string,l.number,l.object]),defaultValue:l.oneOfType([l.string,l.number,l.object]),iconClassName:l.string},v.default.propTypes),C.defaultProps=a({delay:500,ignoreCase:!0},v.default.defaultProps),t.default=C},function(e,n){e.exports=t},function(e,t){e.exports=i},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t,n){"use strict";var o,i=this&&this.__extends||(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var a=n(3),s=n(6),r=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return i(t,e),t.prototype.render=function(){var e=this.props,t=e.disabled,n=e.focused,o=e.style,i=e.ariaExpanded,r=e.ariaOwns,l=e.ariaActiveDescendant,p=e.tabIndex;return a.createElement("span",{role:"listbox",tabIndex:t?void 0:p,className:s("k-dropdown-wrap",this.props.className,{"k-state-default":!t,"k-state-focused":n,"k-state-disabled":t}),style:o,onFocus:this.props.onFocus,onBlur:this.props.onBlur,onKeyDown:this.props.onKeyDown,onKeyPress:this.props.onKeyPress,onClick:this.props.onClick,"aria-disabled":t||void 0,"aria-haspopup":!0,"aria-expanded":i,"aria-owns":r,"aria-activedescendant":l},this.props.children)},t}(a.Component);t.default=r},function(e,t,n){"use strict";var o,i=this&&this.__extends||(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}),a=this&&this.__assign||Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e};Object.defineProperty(t,"__esModule",{value:!0});var s=n(3),r=n(9),l=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return i(t,e),t.prototype.render=function(){var e=this.props,t=e.children,n=e.onMouseDown,o=e.onBlur,i=e.width,l=e.dir,p=e.popupSettings;return s.createElement(r.Popup,a({style:{width:i,direction:l}},p),s.createElement("div",{onMouseDown:n,onBlur:o},t))},t}(s.Component);t.default=l},function(e,t){e.exports=a},function(e,t,n){"use strict";var o,i=this&&this.__extends||(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var a=n(3),s=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return i(t,e),t.prototype.componentDidUpdate=function(){this._input&&this.props.focused&&(this.props.willFocus&&this.props.willFocus(),this._input.focus(),this.props.didFocus&&setTimeout(this.props.didFocus,0))},t.prototype.render=function(){var e=this;return a.createElement("span",{className:"k-list-filter"},a.createElement("input",{ref:function(t){e._input=t},value:this.props.value,className:"k-textbox",onChange:this.props.onChange,onKeyDown:this.props.onKeyDown}),a.createElement("span",{className:"k-icon k-i-search"}))},t}(a.Component);t.default=s},function(e,t,n){"use strict";var o,i=this&&this.__extends||(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var a=n(3),s=n(6),r=n(12),l=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.onMouseDown=function(e){e.preventDefault()},t.onClick=function(e){e.preventDefault(),t.props.onClick&&t.props.onClick(-1,e)},t}return i(t,e),t.prototype.render=function(){var e=this.props,t=e.selected,n=e.defaultItem,o=e.textField;return a.createElement("div",{onClick:this.onClick,onMouseDown:this.onMouseDown,className:s("k-list-optionlabel",{"k-state-selected":t})},r.getter(n,o)||"")},t}(a.Component);t.default=l},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.guid=function(){var e,t,n="";for(e=0;e<32;e++)t=16*Math.random()|0,8!==e&&12!==e&&16!==e&&20!==e||(n+="-"),n+=(12===e?4:16===e?3&t|8:t).toString(16);return n};var n=function(e){return null!=e};t.isPresent=n;var o=function(e,t,o){if(void 0===o&&(o=!1),n(e))return o?t&&n(e[t])?e[t]:e:t?e[t]:e};t.getter=o;t.sameCharsOnly=function(e,t){for(var n=0;n<e.length;n++)if(e.charAt(n)!==t)return!1;return!0};t.shuffleData=function(e,t,n){var o=e;return n&&(o=[n].concat(o)),o.slice(t).concat(o.slice(0,t))};t.matchText=function(e,t,o){if(!n(e))return!1;var i=String(e);return o&&(i=i.toLowerCase()),0===i.indexOf(t)};var i=["string","number","undefined"],a=function(e){var t=typeof e;return-1!==i.indexOf(t)};t.isPrimitive=a;t.scrollToItem=function(e,t,n,o,i){var a=e.offsetHeight,s=t*n-(i?e.scrollTop-o:0);if(i){var r=0;s+t>a?r=s+t-a:s<0&&(r=s),0!==r?e.scrollTop+=r:0===e.scrollTop&&0!==o&&(e.scrollTop=o)}else s+t>a+e.scrollTop?e.scrollTop=s+t-a:s<e.scrollTop&&(e.scrollTop-=e.scrollTop-s)};t.itemIndexStartsWith=function(e,t,n){var i=-1;if(e){e=e.toLowerCase();for(var s=0;s<t.length;s++){var r=(o(t[s],n,a(t[s]))||"")+"";if(r&&r.toLowerCase().startsWith(e)){i=s;break}}}return i};t.getItemIndex=function(e,t){var n=e.valueField;return(e.data||[]).findIndex(function(e){return e===t||o(e,n)===t})};t.getItemIndexByText=function(e,t,n){return e.findIndex(function(e){return a(e)?t.toLowerCase()===e.toString().toLowerCase():s(e,n).toLowerCase()===t.toLowerCase()})};var s=function(e,t){return a(e)?e:o(e,t)};t.getItemText=s;var r=function(e,t){return t?o(e,t):e};t.getItemValue=r;t.getText=function(e,t){if(!e.data)return null;if(-1===t)return s(e.defaultItem,e.textField);var n=e.data[t];return s(n,e.textField)};t.getValue=function(e,t){if(-1===t)return r(e.defaultItem,e.valueField);if(e.data){var n=e.data[t];return r(n,e.valueField)}}},function(e,t,n){"use strict";var o,i=this&&this.__extends||(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var a=n(3),s=n(14),r=n(12),l=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return i(t,e),t.prototype.renderItems=function(){var e=this,t=this.props,n=t.textField,o=t.valueField,i=t.value,l=t.optionPrefix,p=t.skip,u=t.focusedIndex;return this.props.data.map(function(t,c){var d=r.getter(t,o),h=(p||0)+c;return a.createElement(s.default,{id:l+"-"+(d||h.toString()),dataItem:t,selected:d===i,focused:u===c,index:h,key:h,onClick:e.props.onClick,textField:n})})},t.prototype.render=function(){var e=this.props,t=e.id,n=e.show,o=e.wrapperCssClass,i=e.wrapperStyle,s=e.listStyle,r=e.listRef,l=this.renderItems();return l.length?a.createElement("div",{className:o,style:i},a.createElement("ul",{id:t,role:"listbox","aria-hidden":!n||void 0,className:"k-list k-reset",ref:r,style:s},l)):a.createElement("div",{className:"k-nodata"},a.createElement("div",null,"NO DATA FOUND."))},t}(a.Component);t.default=l},function(e,t,n){"use strict";var o,i=this&&this.__extends||(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var a=n(3),s=n(6),r=n(12),l=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.handleClick=function(e){e.preventDefault(),t.props.onClick&&t.props.onClick(t.props.index||0,e)},t}return i(t,e),t.prototype.render=function(){var e=this.props,t=e.id,n=e.selected,o=e.focused,i=e.dataItem,l=e.textField;return a.createElement("li",{id:t,role:"option","aria-selected":n||!1,className:s("k-item",{"k-state-selected":n,"k-state-focused":o}),onClick:this.handleClick},r.getter(i,l))},t}(a.Component);t.default=l},function(e,t,n){"use strict";var o=this&&this.__assign||Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e};Object.defineProperty(t,"__esModule",{value:!0});var i=n(4),a=n(5),s=n(16),r=n(17),l=n(12),p=function(){function e(e){var t=this;this.valueDuringOnChange=void 0,this.indexDuringOnChange=void 0,this.valueNotInData=!1,this.text="",this.lastTextSelected="",this.selectedItemChanged=!1,this.vs=new s.default,this.navigation=new r.Navigation,this.handleKeyDown=function(e){var n=t.component.props,o=n.filterable,i=n.disabled,a=e.keyCode;i||!(o&&(37===a||39===a||32===a||16===a||36===a||35===a))&&t.component.onNavigate(e)},this.handleWrapperClick=function(e){var n=t.initState();t.component.togglePopup(n),n.syntheticEvent=e,t.applyState(n)},this.handleItemClick=function(e,n){var o=t.initState();t.component.handleItemSelect(e,o),t.component.togglePopup(o),o.syntheticEvent=n,t.applyState(o)},this.handleFocus=function(e){if(!t.component.state.isFocused){var n=t.initState();n.data.isFocused=!0,n.events.push({type:"onFocus"}),n.syntheticEvent=e,t.applyState(n)}},this.filterChanged=function(e,n){var o=t.component.props.textField;n.data.filterText=e,n.events.push({type:"onFilterChange",filter:{field:o,operator:"contains",ignoreCase:!0,value:e}})},this.togglePopup=function(e){e.data.isFocused=!0,e.data.opened=!t.component.state.opened,t.component.state.opened?e.events.push({type:"onClose"}):e.events.push({type:"onOpen"})},this.pageChange=function(e,n){if(t.component.props.virtual){var o=t.initState();o.events.push({type:"onPageChange",page:{skip:e.skip,take:e.take}}),o.syntheticEvent=n,t.applyState(o)}},this.handleItemSelect=function(e,n){var o=e-(t.component.state.skip||0),i=t.component.props,a=i.data||[],s=void 0!==i.value;if(l.isPresent(e))if(o>=0&&o<a.length||-1===o&&i.defaultItem){var r=l.getValue(i,o),p=l.getText(i,o),u=t.value;s?(t.valueDuringOnChange=r,t.indexDuringOnChange=e):(t.value=r,t.index=e,t.text=p,n.data.selectedIndex=e),r!==u&&(n.events.push({type:"onChange"}),t.selectedItemChanged=!0)}else void 0!==i.virtual&&(t.vs.handleVirtualItemSelect(n,t.component.state,t.vs.container,e),t.valueNotInData=!0,s?t.indexDuringOnChange=e:(t.index=e,n.data.selectedIndex=e),t.selectedItemChanged=!0)},this.listBoxId=l.guid(),this.optionPrefix=l.guid(),this.component=e,this.vs.initVirtualization(e.props.virtual,void 0),this.vs.PageChange=this.pageChange}return Object.defineProperty(e.prototype,"value",{get:function(){return void 0!==this.valueDuringOnChange?this.valueDuringOnChange:this._value},set:function(e){this._value=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"index",{get:function(){return void 0!==this.indexDuringOnChange?this.indexDuringOnChange:this._index},set:function(e){this._index=e},enumerable:!0,configurable:!0}),e.prototype.componentWillReceiveProps=function(e){var t=this.initState(),n=e.filterable&&void 0!==e.filter&&e.filter!==this.component.props.filter;void 0!==e.opened&&(t.data.opened=e.opened),!e.filterable&&this.component.state.filterText?t.data.filterText="":n&&(t.data.filterText=e.filter),this.vs.updateVirtualization(e.virtual,this.component.props.virtual,t);var o=void 0!==e.value,i=o&&e.value!==this.component.props.value;if(this.selectedItemChanged||i){if(this.valueNotInData&&!o){var a=this.index-(t.data.skip||0);this.value=l.getValue(e,a),this.text=l.getText(e,a)}else this.updateSelectedItem(e,t);this.lastValueSelected=this.value,this.lastTextSelected=this.text}this.selectedItemChanged=!1,this.valueNotInData=!1,this.applyState(t)},e.prototype.componentWillUpdate=function(e,t){t.opened&&this.component.state.opened&&-1!==t.selectedIndex&&this.component.state.selectedIndex!==t.selectedIndex&&this.scrollToSelectedItem(t),void 0!==e.value&&void 0===this.value&&(this.value=e.value)},e.prototype.componentDidUpdate=function(e){var t=this;if(this.component.state.opened&&!e.opened){var n=this.vs.container;if(n){this.vs.updateListScroll(this.component.state,n,function(){l.getItemIndex(t.component.props,t.value)>=0&&t.scrollToSelectedItem(t.component.state)})}else this.scrollToSelectedItem(this.component.state)}},e.prototype.componentDidMount=function(){this.component.element&&(this.dirCalculated=window.getComputedStyle(this.component.element).direction||void 0)},e.prototype.componentWillUnmount=function(){var e=this.vs;delete e.container,delete e.list},e.prototype.scrollToSelectedItem=function(e){var t=this.list||this.vs.list,n=(e.selectedIndex||0)-(e.skip||0),o=t?t.children[0]:void 0;if(o){var i=this.vs,a=i.container||t.parentNode;l.scrollToItem(a,o.offsetHeight,n,i.translate,i.enabled)}},e.prototype.initState=function(){return{data:{},events:[],syntheticEvent:void 0}},e.prototype.applyState=function(e){var t=this,n={syntheticEvent:e.syntheticEvent,nativeEvent:e.syntheticEvent?e.syntheticEvent.nativeEvent:void 0,target:this.component};Object.keys(e.data).length>0&&this.component.setState(e.data),e.events.forEach(function(e){var i=e.type;delete e.type;var a=t.component.props[i];a&&a.call(void 0,o({},n,e))}),this.indexDuringOnChange=void 0,this.valueDuringOnChange=void 0},e.prototype.calculatePopupWidth=function(){var e=(this.component.props.popupSettings||{}).width;this.popupWidth=void 0!==e?e:i.findDOMNode(this.wrapper).offsetWidth+"px"},e.prototype.updateSelectedItem=function(e,t){var n=void 0!==e.value?e.value:this.value,o=l.getItemIndex(e,n),i=l.getText(e,o),a=e.defaultItem?l.getItemValue(e.defaultItem,e.valueField):void 0;l.isPresent(n)&&-1===o&&void 0===a||(-1===o&&void 0!==a&&(n=a,i=l.getItemText(e.defaultItem,this.component.props.textField)),o=-1!==o?o+(t.data.skip||0):o,this.text=i,this.component.setValueSelection(n,i,o,t))},e}();p.propTypes={opened:a.bool,disabled:a.bool,dir:a.string,filterable:a.bool,tabIndex:a.number,data:a.array,textField:a.string,valueField:a.string,className:a.string,popupSettings:a.shape({animate:a.bool,width:a.string,height:a.string}),virtual:a.shape({pageSize:a.number.isRequired,skip:a.number.isRequired,total:a.number.isRequired}),onOpen:a.func,onClose:a.func,onFocus:a.func,onBlur:a.func,onChange:a.func,onFilterChange:a.func,onPageChange:a.func},p.defaultProps={tabIndex:0,popupSettings:{animate:!0,height:"200px"}},t.default=p},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(12),i=1533915,a=function(e,t,n){e.events.push({type:"onPageChange",page:{skip:t,take:n}})},s=function(){function e(){var e=this;this.containerHeight=0,this.skip=0,this.total=0,this.enabled=!1,this.pageSize=0,this.itemHeight=0,this.hidden=!1,this.prevScrollPos=0,this.listTranslate=0,this.scrollSyncing=!1,this.calculateScrollSizes=function(){e.scrollSyncing=!0;var t=!1;if(o.isPresent(e.list)){e.itemHeight=e.list?e.list.children[0].offsetHeight:e.itemHeight,e.containerHeight=Math.min(i,e.itemHeight*e.total);var n=e.containerHeight;(t=e.scrollElement.style.height!==n+"px")&&(e.scrollElement.style.height=n+"px")}return e.scrollSyncing=!1,t},this.scrollHandler=this.scrollHandler.bind(this)}return e.prototype.initVirtualization=function(e,t){this.enabled=void 0!==e,void 0!==e&&(this.skip=e.skip,this.pageSize=e.pageSize,this.total=e.total,void 0!==t&&(t.data.skip=e.skip))},e.prototype.updateVirtualization=function(e,t,n){if(void 0===e||void 0===t||t.total===e.total&&0!==e.skip)this.initVirtualization(e,n);else{var o=Object.assign({},e,{skip:0});this.initVirtualization(o,n),this.calculateScrollSizes()&&this.reset()}},e.prototype.handleVirtualItemSelect=function(e,t,n,o){var i=t.skip||0,s=t.selectedIndex||0,r=t.opened&&n,l=this,p=l.pageSize,u=o-i;if(r&&0===o)a(e,0,p),l.reset();else if(r&&o===l.total-1)a(e,l.total-l.pageSize,p),l.scrollToEnd();else if(r){var c=l.PageChange;l.PageChange=function(t){a(e,t.skip,t.take)},(o>s?l.localScrollDown:l.localScrollUp).call(l,t.syntheticEvent),l.PageChange=c}else if(r||0!==o)if(r||o!==l.total-1){if(!r){var d=Math.max(0,i+(u<0?-1:1));a(e,d,p)}}else a(e,l.total-l.pageSize,p);else a(e,0,p);t.opened||l.reset()},e.prototype.updateListScroll=function(e,t,n){var o=t.scrollTop,i=this,a=i.translate,s=i.hidden,r=e.skip||0;if(o!==a||0===a&&0===o&&r>0){var l=function(){i.enabled=!1;var e=a>0?a:i.itemHeight*r;t.scrollTop=e,i.translateTo(a||e),i.enabled=!0,n()};0===i.itemHeight||s?setTimeout(l,0):l()}},Object.defineProperty(e.prototype,"translate",{get:function(){return this.listTranslate},enumerable:!0,configurable:!0}),e.prototype.changePage=function(e,t){var n=Math.min(Math.max(0,e),this.total-this.pageSize);n!==this.skip&&this.PageChange({skip:n,take:this.pageSize},t)},e.prototype.translateTo=function(e){this.listTranslate=e,this.list&&(this.list.style.transform="translateY("+e+"px)")},e.prototype.reset=function(){this.scrollSyncing=!0,this.container&&(this.container.scrollTop=0),this.translateTo(0),this.scrollSyncing=!1},e.prototype.maxScroll=function(){return this.container.scrollHeight-this.container.offsetHeight},e.prototype.scrollToEnd=function(){if(this.container){var e=this.maxScroll();this.translateTo(e),this.container.scrollTop=e}},e.prototype.localScrollUp=function(e){var t,n=this.itemHeight,o=this.container.scrollTop,i=this.listTranslate,a=o-i;if(!(a>0)){for(t=0;t<this.skip&&!(i+n+a<=o);t++)i-=n;if(i=this.validateTranslate(i),this.skip-t<=0&&i>o)return this.translateTo(0),this.changePage(0,e),void(this.container.scrollTop=0);i!==this.listTranslate&&(this.translateTo(i),this.changePage(this.skip-t,e))}},e.prototype.localScrollDown=function(e){var t,n=this.itemHeight,o=this.container.scrollTop,i=this.listTranslate,a=this.list.children.length;for(t=0;t<a&&!(i+n>o);t++)i+=n;i=this.validateTranslate(i),t>=a&&this.skip+t>=this.total?(this.translateTo(i),this.changePage(this.total-1,e)):i!==this.listTranslate&&(this.translateTo(i),this.changePage(this.skip+t,e))},e.prototype.scrollNonStrict=function(e){var t=this.total*this.prevScrollPos/this.containerHeight,n=Math.min(Math.floor(t),this.total-1),o=this.containerHeight*t/this.total;o=this.validateTranslate(o),this.translateTo(o),this.changePage(n,e)},e.prototype.scrollHandler=function(e){if(this.enabled&&this.list&&!this.hidden&&!this.scrollSyncing){var t=this.container.scrollTop,n=this.prevScrollPos;this.prevScrollPos=t,t-n<0&&t>this.listTranslate-this.list.scrollHeight/10?this.localScrollUp(e):t-n>0&&t<this.listTranslate+2*this.list.scrollHeight/3?this.localScrollDown(e):this.scrollNonStrict(e)}},e.prototype.validateTranslate=function(e){return e=Math.max(0,e),e=Math.min(this.containerHeight-this.list.offsetHeight,e)},e}();t.default=s},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,i,a=n(12),s=function(){return function(e,t,n){this.index=e,this.event=t,this.action=n}}();t.NavigationData=s,(i=o=t.NavigationAction||(t.NavigationAction={}))[i.Undefined=0]="Undefined",i[i.Open=1]="Open",i[i.Close=2]="Close",i[i.Enter=3]="Enter",i[i.Space=4]="Space",i[i.Tab=5]="Tab",i[i.Esc=6]="Esc",i[i.Delete=7]="Delete",i[i.Backspace=8]="Backspace",i[i.Home=9]="Home",i[i.End=10]="End",i[i.Up=11]="Up",i[i.Down=12]="Down",i[i.Left=13]="Left",i[i.Right=14]="Right";var r=function(){function e(){}return e.prototype.navigate=function(e){var t=this.process({current:e.currentIndex,max:e.max,min:e.min,event:e.event}),n=t.action;n!==o.Undefined&&(n===o.Open&&!e.opened||n===o.Close&&e.opened||13===e.event.keyCode||32===e.event.keyCode?e.togglePopup(e.state):void 0!==t.index&&e.handleItemSelect(t.index,e.state));var i=n===o.Left||n===o.Right;n===o.Undefined||n===o.Tab||n===o.Backspace||n===o.Delete||i&&e.leftRightKeysNavigation||!(n!==o.Enter||n===o.Enter&&e.opened)||e.event.preventDefault()},e.prototype.process=function(e){var t=e.event,n=t.keyCode,i=t.altKey,a=void 0,r=o.Undefined;return i&&40===n?r=o.Open:i&&38===n?r=o.Close:13===n?r=o.Enter:32===n?r=o.Space:27===n?r=o.Close:9===n?r=o.Tab:38===n?(a=this.next({current:e.current,min:e.min,max:e.max,step:-1}),r=o.Up):37===n?(a=this.next({current:e.current,min:e.min,max:e.max,step:-1}),r=o.Left):40===n?(a=this.next({current:e.current,min:e.min,max:e.max,step:1}),r=o.Down):39===n?(a=this.next({current:e.current,min:e.min,max:e.max,step:1}),r=o.Right):36===n?(a=0,r=o.Home):35===n?(a=e.max,r=o.End):46===n?r=o.Delete:8===n&&(r=o.Backspace),new s(a,t,r)},e.prototype.next=function(e){return a.isPresent(e.current)?Math.min(e.max,Math.max(e.current+e.step,e.min)):e.min},e}();t.Navigation=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(19);t.ComboBox=o.default},function(e,t,n){"use strict";var o,i=this&&this.__extends||(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}),a=this&&this.__assign||Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e};Object.defineProperty(t,"__esModule",{value:!0});var s=n(3),r=n(5),l=n(6),p=n(15),u=n(8),c=n(13),d=n(20),h=n(12),f=1,v=2,g=function(e){function t(t){var n=e.call(this,t)||this;n._lastMousedown=0,n.handleItemSelect=function(e,t){n.base.handleItemSelect(e,t),n.base.selectedItemChanged&&(n.state.typedText&&(t.data.typedText=""),n.state.filterText&&(t.data.filterText=""))},n.togglePopup=function(e){n.base.togglePopup(e)},n.renderScrollWrapper=function(e){var t=n.props.popupSettings,o=n.base.vs;return o.enabled?s.createElement("div",{onScroll:o.scrollHandler,ref:n.scrollerRef,style:{height:(t||{}).height,overflowY:"scroll"}},e):e},n.renderScrollElement=function(){var e=n.base.vs;return e.enabled&&s.createElement("div",{ref:function(t){e.scrollElement=t},key:v})},n.renderList=function(){var e,t=n.props,o=t.textField,i=t.valueField,a=t.popupSettings,r=n.base,l=r.vs,p=n.state,u=p.opened,d=p.skip,v="translateY("+l.translate+"px)",g=n.valueToRender(),m=g.value,y=g.text,b=(n.props.data||[]).slice();return u&&(e=y?h.itemIndexStartsWith(y,b,o):0===d?0:void 0),s.createElement(c.default,{id:r.listBoxId,show:u,data:b,focusedIndex:e,value:m,textField:o,valueField:i,optionPrefix:r.optionPrefix,listRef:function(e){l.enabled&&(l.list=e),n.base.list=e},wrapperStyle:l.enabled?{float:"left",width:"100%"}:{maxHeight:(a||{}).height},wrapperCssClass:l.enabled?void 0:"k-list-scroller",listStyle:l.enabled?{transform:v}:void 0,key:f,skip:d,onClick:n.handleItemClick})},n.onInputKeyDown=function(e){var t=e.keyCode;if(13===t||27===t){e.preventDefault();var o=e.currentTarget.value,i=n.base.initState();i.syntheticEvent=e,n.applyInputValue(o,i,e.keyCode)}else 38!==t&&40!==t||(e.preventDefault(),n.handleKeyDown(e))},n.applyInputValue=function(e,t,o){void 0===o&&(o=void 0);var i=n.state.suggestedText||"",a=n.props,s=a.data,r=void 0===s?[]:s,l=a.textField,p=a.valueField,u=a.suggest,c=a.allowCustom,d=a.filterable,f=void 0===o||27===o,v=n.state.opened,g=h.getItemIndexByText(r,e,l);if(v&&(t.data.opened=!1),c&&-1===g&&n.value===e)return v&&t.events.push({type:"onClose"}),n.base.applyState(t);var m=void 0,y="";if(-1!==g?(m=h.getItemValue(r[g],p),y=h.getItemText(r[g],l)):c&&(m=e,y=e),u&&!f&&i.toLowerCase()===e.toLowerCase())y=m=i,t.data.typedText=i;else if(f)if(t.data.suggestedText=void 0,c||-1!==g||e!==n.base.lastTextSelected){if(!c&&-1===g&&e===n.state.typedText)return n.clearValue(t),n.base.applyState(t)}else m=n.base.lastValueSelected,y=n.base.lastTextSelected;else if(13===o&&!c){var b=h.itemIndexStartsWith(e,r,l);return n.handleItemSelect(b,t),v&&t.events.push({type:"onClose"}),n.state.typedText&&(t.data.typedText=""),d&&(t.data.filterText=n.base.text),n.base.applyState(t)}(n.value||"")!==m&&t.events.push({type:"onChange"}),v&&t.events.push({type:"onClose"}),n.base.value=m,n.base.text=y,n.base.applyState(t)},n.onInput=function(e){var t=n.base.initState(),o=e.currentTarget.value,i=void 0!==n.props.value;if(t.syntheticEvent=e,!o)return n.clearValue(t),delete t.data.opened,n.base.applyState(t);n.state.opened||(t.data.opened=!0),t.data.typedText=o,i||(t.data.selectedIndex=-1,n.base.index=-1),n.props.filterable&&n.filterChanged(o,t),n.state.opened===t.data.opened&&t.events.push({type:t.data.opened?"onOpen":"onClose"}),n.suggestValue(o,t),n.base.applyState(t)},n.clearButtonClick=function(e){var t=n.base.initState();t.syntheticEvent=e,n.clearValue(t),n.base.applyState(t)},n.handleFocus=function(e){n.base.handleFocus(e)},n.handleBlur=function(e){if(n.state.isFocused){if((new Date).getTime()-n._lastMousedown<500)return n._lastMousedown=0,e.currentTarget.focus();var t=n.base.initState();t.data.isFocused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,n.applyInputValue(e.currentTarget.value,t)}},n.handleWrapperClick=function(e){n.base.handleWrapperClick(e)},n.handleItemClick=function(e,t){n.base.handleItemClick(e,t)},n.handleKeyDown=function(e){n.base.handleKeyDown(e)},n.filterChanged=function(e,t){n.base.filterChanged(e,t)},n.setValueSelection=function(e,t,o,i){void 0===e&&(e=void 0),void 0===t&&(t=void 0),void 0===o&&(o=void 0),n.props.filterable||t===n.state.text||(i.data.text=t),i.data.selectedIndex!==n.state.selectedIndex&&(i.data.selectedIndex=o),n.base.value=e},n.scrollerRef=function(e){if(e){var t=n.base.vs;t.container=e,setTimeout(t.calculateScrollSizes.bind(t),0)}};var o=t.allowCustom,i=t.opened,a=t.textField,r=t.valueField,l=void 0!==t.value?t.value:t.defaultValue,u=-1,d="";o&&void 0!==l?(d=h.getItemText(l,a),u=h.getItemIndex(t,l)):o||(u=h.getItemIndex(t,l),d=h.getText(t,u)),n.state={filterText:"",typedText:"",text:d,selectedIndex:u,skip:0,isFocused:!1,opened:i};var g=n.base=new p.default(n);return g.value=h.getItemValue(l,r),g.index=u,g.text=d,n._inputId=h.guid(),n}return i(t,e),Object.defineProperty(t.prototype,"element",{get:function(){return this._element},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"value",{get:function(){return this.base.value},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"index",{get:function(){return this.base.index},enumerable:!0,configurable:!0}),t.prototype.componentWillReceiveProps=function(e){this.base.componentWillReceiveProps(e)},t.prototype.componentWillUpdate=function(e,t){this.base.componentWillUpdate(e,t),!this.state.opened&&t.opened&&this.base.calculatePopupWidth();var n=void 0!==t.selectedIndex&&this.state.selectedIndex!==t.selectedIndex,o=t.typedText||!t.typedText&&this.state.typedText&&void 0===this.base.lastValueSelected;if(n){var i=(e.data||[])[(t.selectedIndex||0)-(t.skip||0)];this.base.value=h.getItemValue(i,e.valueField),this.base.text=h.getItemText(i,e.textField),this.base.index=t.selectedIndex||0}else o&&(this.base.lastTextSelected="",this.base.lastValueSelected=void 0,this.base.value=void 0,this.base.index=-1,this.base.text="")},t.prototype.componentDidUpdate=function(e,t){this.base.componentDidUpdate(t)},t.prototype.componentDidMount=function(){this.base.componentDidMount()},t.prototype.componentWillUnmount=function(){this.base.componentWillUnmount()},t.prototype.onNavigate=function(e){var t=this.props,n=t.data,o=void 0===n?[]:n,i=t.filterable,a=t.textField,s=this.base.initState(),r=this.base.vs,l=h.getItemIndex(this.props,this.value),p=this.state.typedText,u=r.skip+l;if(u<0&&p&&(38===e.keyCode||40===e.keyCode)){var c=h.itemIndexStartsWith(p,o,a);c>=0&&(u=38===e.keyCode?c+1:c-1)}this.base.navigation.navigate({opened:this.state.opened,event:e,state:s,currentIndex:u,max:(r.enabled?r.total:o.length)-1,min:0,leftRightKeysNavigation:i,togglePopup:this.togglePopup,handleItemSelect:this.handleItemSelect}),s.syntheticEvent=e,this.base.applyState(s)},t.prototype.render=function(){var e=this,t=this.props,n=t.placeholder,o=t.tabIndex,i=t.dir,a=t.disabled,r=t.clearButton,p=t.popupSettings,c=t.className,h=t.style,f=t.loading,v=t.iconClassName,g=this.state,m=g.isFocused,y=g.opened,b=g.suggestedText,x=this.valueToRender().text,I=this.base.vs;return s.createElement("span",{className:l("k-widget k-combobox k-header",{"k-combobox-clearable":r},c),ref:function(t){e._element=t},style:h,dir:i},s.createElement("span",{ref:function(t){e.base.wrapper=t},className:l("k-dropdown-wrap",{"k-state-default":!a,"k-state-disabled":a,"k-state-focused":m&&!a})},s.createElement(d.default,{id:this._inputId,placeholder:n,tabIndex:o||void 0,value:x,suggestedText:b,focused:m,onKeyDown:this.onInputKeyDown,onInput:this.onInput,onFocus:this.handleFocus,onBlur:this.handleBlur,disabled:a,expanded:y,owns:this.base.listBoxId,activedescendant:this.base.optionPrefix+"-"+(this.value||""),clearButton:!(!r||!x),clearButtonClick:this.clearButtonClick}),s.createElement("span",{className:"k-select",onClick:this.handleWrapperClick,onMouseDown:function(t){t.preventDefault(),e.setState({isFocused:!0})}},s.createElement("span",{className:l("k-icon",v,{"k-i-arrow-s":!f&&!v,"k-i-loading":f&&!v})}))),s.createElement(u.default,{onMouseDown:function(){e._lastMousedown=(new Date).getTime()},width:this.base.popupWidth,popupSettings:{animate:(p||{}).animate,anchor:this.element,appendTo:document.body,show:y,open:function(){I.hidden=!1},className:"k-list-container k-reset",close:function(){I.hidden=!0}},dir:void 0!==this.props.dir?this.props.dir:this.base.dirCalculated},this.renderScrollWrapper([this.renderList(),this.renderScrollElement()])))},t.prototype.valueToRender=function(e,t){var n=e||this.state,o=n.typedText,i=n.filterText,a=void 0===i?"":i,s=n.opened,r=t||this.props,l=r.value,p=r.filterable,u=void 0!==l,c=this.base.text||"",d=u?l:this.base.value,h=p&&!!a;return s||!c||this.base.lastTextSelected!==c||h&&!this.base.lastTextSelected.toLowerCase().startsWith(a.toLowerCase())?h?{value:d,text:a}:o?{value:null,text:o}:{value:d,text:c}:{value:d,text:c}},t.prototype.suggestValue=function(e,t){if(void 0!==this.state.suggestedText&&(t.data.suggestedText=void 0),this.props.suggest&&e){var n=this.props.data||[],o=this.props.textField,i=n[h.itemIndexStartsWith(e,n,o)];i&&(t.data.suggestedText=h.getItemText(i,o))}},t.prototype.clearValue=function(e){var t=void 0!==this.props.value,n=this.value;t?(this.base.valueDuringOnChange=null,this.base.indexDuringOnChange=-1):(this.base.value=null,this.base.index=-1,this.base.text="",e.data.selectedIndex=-1),e.data.typedText="",void 0!==this.state.suggestedText&&(e.data.suggestedText=void 0),null!==n&&(e.events.push({type:"onChange"}),this.base.selectedItemChanged=!0,this.props.filterable&&this.filterChanged("",e)),this.state.opened&&(e.data.opened=!1,e.events.push({type:"onClose"}))},t}(s.Component);g.propTypes=a({clearButton:r.bool,allowCustom:r.bool,suggest:r.bool,placeholder:r.string,loading:r.bool,value:r.oneOfType([r.string,r.number,r.object]),defaultValue:r.oneOfType([r.string,r.number,r.object]),iconClassName:r.string},p.default.propTypes),g.defaultProps=a({},p.default.defaultProps,{clearButton:!0}),t.default=g},function(e,t,n){"use strict";var o,i=this&&this.__extends||(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var a=n(3),s=function(e){function t(t){var n=e.call(this,t)||this;return n.valueChanged=!1,n.deleting=!1,n.text="",n.text=t.value,n}return i(t,e),t.prototype.componentWillReceiveProps=function(e){e.focused&&this.input.focus()},t.prototype.componentWillUpdate=function(e,t){var n=this.props.value,o=e.value,i=e.suggestedText,a=this.input,s=a&&a.selectionEnd===a.value.length;this.valueChanged=n!==o,this.deleting=this.valueChanged&&n.startsWith(o),this.text=s&&i&&this.valueChanged&&!this.deleting?o+i.substring(o.length):o},t.prototype.componentDidUpdate=function(){var e=this.props,t=e.value,n=e.suggestedText,o=this.input;if(n&&this.valueChanged&&!this.deleting&&o){var i=o.selectionStart,a=o.selectionEnd,s=o.value.length;i===a&&i===s&&o.setSelectionRange(t.length,n.length)}},t.prototype.render=function(){var e=this,t=this.props,n=t.id,o=t.placeholder,i=t.tabIndex,s=t.onKeyDown,r=t.onInput,l=t.onFocus,p=t.onBlur,u=t.disabled,c=t.expanded,d=t.owns,h=t.activedescendant,f=t.clearButton,v=t.clearButtonClick;return[a.createElement("span",{className:"k-searchbar",key:"searchbar"},a.createElement("input",{autoComplete:"off",id:n,placeholder:o,className:"k-input",tabIndex:i,role:"listbox",value:this.text,onChange:function(){},ref:function(t){e.input=t},onKeyDown:s,onInput:r,onFocus:l,onBlur:p,"aria-disabled":u||void 0,disabled:u||void 0,"aria-haspopup":!0,"aria-expanded":c||!1,"aria-owns":d,"aria-activedescendant":h})),f&&a.createElement("span",{className:"k-icon k-clear-value k-i-close",role:"button",onClick:v,onMouseDown:function(e){e.preventDefault()},tabIndex:-1,title:"clear",key:"clearbutton"})]},t}(a.Component);t.default=s}])}}});

package.json

 {
   "name": "@progress/kendo-react-dropdowns",
-  "version": "0.3.0",
+  "version": "0.4.0-dev.201802141312",
   "description": "Kendo UI for React DropDowns package",
@@ -29,3 +29,3 @@ "repository": {
   "dependencies": {
-    "@progress/kendo-react-popup": "0.3.0",
+    "@progress/kendo-react-popup": "0.4.0-dev.201802141312",
     "classnames": "^2.1.5",
@@ -32,0 +32,0 @@ "prop-types": "^15.6.0"

No alert changes

Improved metrics

Total package byte prevSize

570109

increased by46.91%

Number of package files

131

increased by29.7%

Lines of code

6935

increased by51.85%

Dependency changes

• + Added@progress/kendo-react-animation@0.4.0-dev.201802141312(transitive)

• + Added@progress/kendo-react-popup@0.4.0-dev.201802141312(transitive)

• - Removed@progress/kendo-react-animation@0.3.0(transitive)

• - Removed@progress/kendo-react-popup@0.3.0(transitive)

• Updated@progress/kendo-react-popup@0.4.0-dev.201802141312