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

package/dist/es/AutoComplete/AutoComplete.js

@@ -1,652 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import SearchBar from './../common/SearchBar';
-import ListContainer from './../common/ListContainer';
-import List from './../common/List';
-import DropDownBase from '../common/DropDownBase';
-import GroupStickyHeader from '../common/GroupStickyHeader';
-import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils';
-import { guid, Keys, classNames, createPropsContext, withPropsContext, kendoThemeMaps, IconWrap } from '@progress/kendo-react-common';
-import { FloatingLabel } from '@progress/kendo-react-labels';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import ClearButton from '../common/ClearButton';
-var VALIDATION_MESSAGE = 'Please enter a valid value!';
-var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
-/** @hidden */
-var AutoCompleteWithoutContext = /** @class */ (function (_super) {
-    __extends(AutoCompleteWithoutContext, _super);
-    function AutoCompleteWithoutContext(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this.state = {};
-        _this.base = new DropDownBase(_this);
-        _this._element = null;
-        _this._inputId = guid();
-        _this._suggested = '';
-        _this._input = null;
-        _this._isScrolling = false;
-        _this.itemHeight = 0;
-        /**
-         * @hidden
-         */
-        _this.focus = function () {
-            if (_this._input) {
-                _this._input.focus();
-            }
-        };
-        /**
-         * @hidden
-         */
-        _this.handleItemSelect = function (index, state) {
-            var _a = _this.props.data, data = _a === void 0 ? [] : _a;
-            var newText = getItemValue(data[index], _this.props.textField);
-            _this.triggerOnChange(newText, state);
-        };
-        /**
-         * @hidden
-         */
-        _this.itemFocus = function (index, state) {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField;
-            var focusedItem = data[index];
-            if (!areSame(_this.state.focusedItem, focusedItem, textField)) {
-                state.data.focusedItem = focusedItem;
-            }
-        };
-        /**
-         * @hidden
-         */
-        _this.togglePopup = function (state) {
-            _this.base.togglePopup(state);
-        };
-        _this.setValidity = function () {
-            if (_this._input && _this._input.setCustomValidity) {
-                _this._input.setCustomValidity(_this.validity.valid
-                    ? ''
-                    : _this.props.validationMessage || VALIDATION_MESSAGE);
-            }
-        };
-        _this.onScroll = function (event) {
-            _this._isScrolling = true;
-            var list = _this.base.list;
-            var groupField = _this.props.groupField;
-            var _a = _this.props.data, data = _a === void 0 ? [] : _a;
-            if (!groupField || !data.length) {
-                return;
-            }
-            var itemHeight = _this.itemHeight || (list ? list.children[0].offsetHeight : 0);
-            var target = event.target;
-            var scrollTop = target.scrollTop;
-            if (groupField) {
-                data = _this.base.getGroupedDataModernMode(data, groupField);
-            }
-            ;
-            var group = data[0][groupField];
-            for (var i = 1; i < data.length; i++) {
-                if (itemHeight * i > scrollTop) {
-                    break;
-                }
-                if (data[i] && data[i][groupField]) {
-                    group = data[i][groupField];
-                }
-            }
-            if (group !== _this.state.group) {
-                _this.setState({
-                    group: group
-                });
-            }
-        };
-        _this.handleItemClick = function (index, event) {
-            _this.base.handleItemClick(index, event);
-            _this._valueDuringOnChange = undefined;
-        };
-        _this.onChangeHandler = function (event) {
-            var base = _this.base;
-            var state = base.initState();
-            var input = event.currentTarget;
-            var value = input.value;
-            var selectionAtEnd = input.selectionEnd === value.length;
-            state.syntheticEvent = event;
-            var prevSuggestion = _this._suggested;
-            var prevValue = _this.value;
-            var prevUserInput = prevValue &&
-                prevValue.substring(0, prevValue.length - prevSuggestion.length);
-            var deletedSuggestion = prevUserInput && prevUserInput === value;
-            var deleting = prevUserInput && prevUserInput.length > value.length;
-            var suggest = _this.props.suggest;
-            var opened = _this.props.opened !== undefined ?
-                _this.props.opened : _this.state.opened;
-            if (suggest !== undefined && suggest !== false) {
-                if (deletedSuggestion || deleting || !selectionAtEnd) {
-                    _this._suggested = '';
-                }
-                else {
-                    _this.suggestValue(value);
-                }
-                var newValue = value + _this._suggested;
-                var suggestion = { userInput: value, value: _this._suggested };
-                _this.triggerOnChange(newValue, state, { suggestion: suggestion });
-            }
-            else {
-                _this._suggested = '';
-                _this.triggerOnChange(value, state);
-            }
-            if ((!opened && value) || (opened && !value)) {
-                _this.togglePopup(state);
-            }
-            state.data.focusedItem = undefined;
-            _this.applyState(state);
-            _this.setState({ group: undefined });
-        };
-        _this.clearButtonClick = function (event) {
-            var base = _this.base;
-            var state = base.initState();
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            state.syntheticEvent = event;
-            var newValue = '';
-            _this._suggested = '';
-            _this.triggerOnChange(newValue, state);
-            if (_this.state.focusedItem !== undefined) {
-                state.data.focusedItem = undefined;
-            }
-            if (opened) {
-                _this.togglePopup(state);
-            }
-            _this.applyState(state);
-        };
-        _this.onInputKeyDown = function (event) {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, skipDisabledItems = _a.skipDisabledItems, groupField = _a.groupField, textField = _a.textField;
-            if (_this._isScrolling) {
-                _this._isScrolling = false;
-            }
-            var focusedIndex = _this.focusedIndex();
-            var focusedItem = data[focusedIndex];
-            var keyCode = event.keyCode;
-            var altOrOptionsKeyPressed = event.altKey;
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            var preventDefault = function () {
-                if (opened) {
-                    event.preventDefault();
-                }
-            };
-            if (altOrOptionsKeyPressed && keyCode === Keys.down) {
-                _this.setState({
-                    opened: true
-                });
-            }
-            else if (altOrOptionsKeyPressed && keyCode === Keys.up) {
-                _this.setState({
-                    opened: false
-                });
-            }
-            else if (opened && keyCode === Keys.pageUp) {
-                _this.base.scrollPopupByPageSize(-1);
-            }
-            else if (opened && keyCode === Keys.pageDown) {
-                _this.base.scrollPopupByPageSize(1);
-            }
-            else if (opened && (keyCode === Keys.enter || keyCode === Keys.esc)) {
-                preventDefault();
-                if (skipDisabledItems === false && focusedItem && focusedItem.disabled) {
-                    if (opened) {
-                        _this.togglePopup(state);
-                    }
-                    _this.applyState(state);
-                }
-                else {
-                    _this.applyInputValue(event.currentTarget.value, state, event.keyCode);
-                }
-            }
-            else if (!opened && keyCode === Keys.esc) {
-                var newValue = '';
-                _this._suggested = '';
-                _this.triggerOnChange(newValue, state);
-                if (_this.state.focusedItem !== undefined) {
-                    state.data.focusedItem = undefined;
-                }
-                _this.applyState(state);
-            }
-            else if (keyCode === Keys.up || keyCode === Keys.down) {
-                if (groupField !== '' && textField) {
-                    if (!_this.props.skipDisabledItems && opened) {
-                        _this.onNavigate(state, keyCode);
-                    }
-                    else {
-                        var newIndex = 0;
-                        if (keyCode === Keys.down || keyCode === Keys.right) {
-                            var tempnewIndex_1 = data.slice(focusedIndex + 1).find(function (i) { return !i.disabled && i[textField]; });
-                            newIndex = tempnewIndex_1 && data.findIndex(function (el) { return el[textField] === tempnewIndex_1[textField]; });
-                        }
-                        else if (keyCode === Keys.up || keyCode === Keys.left) {
-                            var dataToSearch = void 0;
-                            if (focusedIndex === -1) {
-                                dataToSearch = data;
-                                newIndex = data.findIndex(function (i) { return !i.disabled && i[textField]; });
-                            }
-                            else {
-                                dataToSearch = data.slice(0, focusedIndex);
-                                var tempnewIndex_2 = dataToSearch.pop();
-                                while (tempnewIndex_2 && tempnewIndex_2.disabled) {
-                                    tempnewIndex_2 = dataToSearch.pop();
-                                }
-                                newIndex = tempnewIndex_2 && data.findIndex(function (el) { return el[textField] === tempnewIndex_2[textField]; });
-                            }
-                        }
-                        if (newIndex !== undefined) {
-                            var skipItems = newIndex - focusedIndex;
-                            _this.onNavigate(state, keyCode, skipItems);
-                        }
-                        else if (newIndex === undefined && data.findIndex(function (el) { return el[textField]; }) === data.length - 1) {
-                            _this.onNavigate(state, keyCode);
-                        }
-                    }
-                }
-                else if (!_this.props.skipDisabledItems && opened) {
-                    _this.onNavigate(state, keyCode);
-                }
-                else {
-                    var newIndex = null;
-                    if (keyCode === Keys.down || keyCode === Keys.right) {
-                        newIndex = data.slice(focusedIndex + 1).find(function (i) { return !i.disabled; });
-                    }
-                    else if (keyCode === Keys.up || keyCode === Keys.left) {
-                        var dataTest = data.slice(0, focusedIndex);
-                        newIndex = dataTest.pop();
-                        while (newIndex && newIndex.disabled) {
-                            newIndex = dataTest.pop();
-                        }
-                    }
-                    if (newIndex) {
-                        var skipItems = newIndex.id - focusedIndex - 1;
-                        _this.onNavigate(state, keyCode, skipItems);
-                    }
-                    else {
-                        _this.onNavigate(state, keyCode);
-                    }
-                }
-                _this.applyState(state);
-                preventDefault();
-            }
-        };
-        _this.handleBlur = function (event) {
-            if (_this.state.focused) {
-                var state = _this.base.initState();
-                state.data.focused = false;
-                state.events.push({ type: 'onBlur' });
-                state.syntheticEvent = event;
-                _this.applyInputValue(event.currentTarget.value, state);
-            }
-        };
-        validatePackage(packageMetadata);
-        return _this;
-    }
-    Object.defineProperty(AutoCompleteWithoutContext.prototype, "element", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteWithoutContext.prototype, "value", {
-        /**
-         * The value of the AutoComplete.
-         */
-        get: function () {
-            if (this._valueDuringOnChange !== undefined) {
-                return this._valueDuringOnChange;
-            }
-            else if (this.props.value !== undefined) {
-                return this.props.value;
-            }
-            else if (this.state.value !== undefined) {
-                return this.state.value;
-            }
-            else if (this.props.defaultValue !== undefined) {
-                return this.props.defaultValue;
-            }
-            return '';
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteWithoutContext.prototype, "name", {
-        /**
-         * Gets the `name` property of the AutoComplete.
-         */
-        get: function () {
-            return this.props.name;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteWithoutContext.prototype, "validity", {
-        /**
-         * Represents the validity state into which the AutoComplete is set.
-         */
-        get: function () {
-            // The AutoComplete component is in a invalid state
-            // only if it's required and the value is null!
-            var customError = this.props.validationMessage !== undefined;
-            var isValid = (!this.required || this.value !== '');
-            var valid = this.props.valid !== undefined ? this.props.valid : isValid;
-            return {
-                customError: customError,
-                valid: valid,
-                valueMissing: this.value === null
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteWithoutContext.prototype, "validityStyles", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.props.validityStyles !== undefined
-                ? this.props.validityStyles
-                : AutoCompleteWithoutContext.defaultProps.validityStyles;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteWithoutContext.prototype, "required", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.props.required !== undefined
-                ? this.props.required
-                : AutoCompleteWithoutContext.defaultProps.required;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    AutoCompleteWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a;
-        var _b = this.props, _c = _b.groupField, groupField = _c === void 0 ? '' : _c, _d = _b.data, data = _d === void 0 ? [] : _d;
-        var _e = prevProps.data, prevData = _e === void 0 ? [] : _e;
-        var focusedIndex = this.focusedIndex();
-        var focusedItem = data[focusedIndex];
-        var dataChanged = prevData !== data;
-        var focusedItemChanged = focusedItem !== undefined && prevState.focusedItem !== focusedItem;
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
-        var opening = !prevOpened && opened;
-        if (groupField === '') {
-            if ((opened && (focusedItemChanged || dataChanged)) || opening) {
-                this.base.scrollToItem(focusedIndex);
-            }
-        }
-        else if (!this._isScrolling) {
-            var focusedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
-            if (opening) {
-                // Resets the sticky header group value for scenarios with open/close of component's popup
-                if (data && data.length !== 0) {
-                    this.base.resetGroupStickyHeader(data[0][groupField], this);
-                }
-                this.base.scrollToItem(focusedItemIndex);
-            }
-            ;
-            if (opened && prevOpened && focusedItemChanged) {
-                this.base.scrollToItem(focusedItemIndex);
-            }
-        }
-        this.setValidity();
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteWithoutContext.prototype.componentDidMount = function () {
-        this.base.didMount();
-        this.setValidity();
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteWithoutContext.prototype.render = function () {
-        var _a;
-        var _this = this;
-        var _b = this.props, dir = _b.dir, disabled = _b.disabled, label = _b.label, className = _b.className, style = _b.style, loading = _b.loading, suggest = _b.suggest, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
-        var isValid = !this.validityStyles || this.validity.valid;
-        var base = this.base;
-        var value = this.value;
-        var renderClearButton = this.props.clearButton !== false && !loading && !!value;
-        var id = this.props.id || this._inputId;
-        if (typeof suggest === 'string') {
-            this._suggested = suggest;
-        }
-        var autoComplete = (React.createElement("span", { className: classNames('k-autocomplete k-input', className, (_a = {},
-                _a["k-input-".concat(sizeMap[size] || size)] = size,
-                _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
-                _a["k-input-".concat(fillMode)] = fillMode,
-                _a['k-invalid'] = !isValid,
-                _a['k-loading'] = loading,
-                _a['k-required'] = this.required,
-                _a['k-disabled'] = disabled,
-                _a)), ref: function (element) {
-                _this._element = element;
-                base.wrapper = element;
-            }, style: !label
-                ? style
-                : __assign(__assign({}, style), { width: undefined }), dir: dir },
-            this.renderSearchBar(value || '', id),
-            loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-            renderClearButton && !loading && React.createElement(ClearButton, { onClick: this.clearButtonClick, key: "clearbutton" }),
-            this.renderListContainer()));
-        return label
-            ? (React.createElement(FloatingLabel, { label: label, editorId: id, editorValue: value, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: autoComplete }))
-            : autoComplete;
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteWithoutContext.prototype.onNavigate = function (state, keyCode, skipItems) {
-        var _this = this;
-        var typedText = this.value;
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex;
-        var focusedIndex = this.state.focusedItem !== undefined ?
-            data.findIndex(function (i) { return areSame(i, _this.state.focusedItem, textField); }) :
-            (focusedItemIndex ? focusedItemIndex(data, typedText, textField) :
-                data.indexOf(getFocusedItem(data, typedText, textField)));
-        var newFocused = this.base.navigation.navigate({
-            keyCode: keyCode,
-            current: focusedIndex,
-            max: data.length - 1,
-            min: 0,
-            skipItems: skipItems ? skipItems : undefined
-        });
-        if (newFocused !== undefined) {
-            this.itemFocus(newFocused, state);
-        }
-        this.applyState(state);
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteWithoutContext.prototype.applyInputValue = function (value, state, eventKey) {
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField;
-        var focusedIndex = this.focusedIndex();
-        var focusedItem = data[focusedIndex];
-        this._suggested = '';
-        if (opened && eventKey === Keys.enter) {
-            if (focusedItem && !focusedItem.disabled) {
-                var newValue = getItemValue(data[this.focusedIndex(value)], textField);
-                this.triggerOnChange(newValue, state);
-            }
-        }
-        if (opened) {
-            this.togglePopup(state);
-        }
-        this.applyState(state);
-    };
-    AutoCompleteWithoutContext.prototype.renderSearchBar = function (value, id) {
-        var _this = this;
-        var base = this.base;
-        var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, readonly = _a.readonly;
-        var focused = this.state.focused;
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, ariaRequired: this.required, render: this.props.valueRender }));
-    };
-    AutoCompleteWithoutContext.prototype.renderListContainer = function () {
-        var _a;
-        var base = this.base;
-        var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, size = _b.size, groupField = _b.groupField, list = _b.list, groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender;
-        var popupSettings = base.getPopupSettings();
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
-        var group = this.state.group;
-        if (group === undefined && groupField !== undefined) {
-            group = getItemValue(data[0], groupField);
-        }
-        return (React.createElement(ListContainer, { width: popupWidth, popupSettings: {
-                animate: popupSettings.animate,
-                anchor: this.element,
-                show: opened,
-                popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-autocomplete-popup'),
-                className: popupSettings.className,
-                appendTo: popupSettings.appendTo
-            }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
-            header && React.createElement("div", { className: "k-list-header" }, header),
-            React.createElement("div", { className: classNames('k-list', (_a = {},
-                    _a["k-list-".concat(sizeMap[size] || size)] = size,
-                    _a)) },
-                !list && group && data.length !== 0 && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
-                this.renderList()),
-            footer && React.createElement("div", { className: "k-list-footer" }, footer)));
-    };
-    AutoCompleteWithoutContext.prototype.renderList = function () {
-        var base = this.base;
-        var popupSettings = base.getPopupSettings();
-        var _a = this.props, textField = _a.textField, _b = _a.data, data = _b === void 0 ? [] : _b, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender, groupHeaderItemRender = _a.groupHeaderItemRender;
-        var value = this.value;
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        return (React.createElement(List, { id: base.listBoxId, show: opened, data: data.slice(), focusedIndex: this.focusedIndex(), value: value, textField: textField, valueField: textField, highlightSelected: false, optionsGuid: base.guid, groupField: this.props.groupField, groupMode: 'modern', listRef: function (list) { return base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", onClick: this.handleItemClick, itemRender: itemRender, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll }));
-    };
-    AutoCompleteWithoutContext.prototype.triggerOnChange = function (newValue, state, eventArgs) {
-        if (this.value === newValue && !eventArgs) {
-            return;
-        }
-        state.data.value = newValue;
-        this._valueDuringOnChange = newValue;
-        state.events.push(__assign({ type: 'onChange' }, (eventArgs || {})));
-    };
-    AutoCompleteWithoutContext.prototype.applyState = function (state) {
-        this.base.applyState(state);
-        this._valueDuringOnChange = undefined;
-    };
-    AutoCompleteWithoutContext.prototype.suggestValue = function (value) {
-        this._suggested = '';
-        if (value) {
-            var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField;
-            var suggestedItem = data[itemIndexStartsWith(data, value, textField)];
-            if (suggestedItem) {
-                var suggestedText = getItemValue(suggestedItem, textField);
-                if (value.toLowerCase() !== suggestedText.toLowerCase()) {
-                    this._suggested = suggestedText.substring(value.length);
-                }
-            }
-        }
-    };
-    AutoCompleteWithoutContext.prototype.focusedIndex = function (value) {
-        var _this = this;
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex, skipDisabledItems = _a.skipDisabledItems;
-        var inputValue = value !== undefined ? value : this.value;
-        if (this.state.focusedItem !== undefined) {
-            return data.findIndex(function (i) { return areSame(i, _this.state.focusedItem, textField); });
-        }
-        else if (focusedItemIndex) {
-            return focusedItemIndex(data, inputValue, textField);
-        }
-        else {
-            var indexOfFocusedItem = data.indexOf(getFocusedItem(data, inputValue, textField));
-            if (skipDisabledItems && textField && indexOfFocusedItem === -1) {
-                return data.findIndex(function (i) { return !i.disabled && i[textField]; });
-            }
-            return Math.max(0, indexOfFocusedItem);
-        }
-    };
-    AutoCompleteWithoutContext.displayName = 'AutoComplete';
-    /**
-     * @hidden
-     */
-    AutoCompleteWithoutContext.propTypes = __assign(__assign({}, DropDownBase.basicPropTypes), { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), groupField: PropTypes.string, suggest: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), placeholder: PropTypes.string, value: PropTypes.string, defaultValue: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, readonly: PropTypes.bool, clearButton: PropTypes.bool, valueRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, skipDisabledItems: PropTypes.bool });
-    /**
-     * @hidden
-     */
-    AutoCompleteWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { size: 'medium', rounded: 'medium', fillMode: 'solid', skipDisabledItems: true });
-    return AutoCompleteWithoutContext;
-}(React.Component));
-export { AutoCompleteWithoutContext };
-/**
- * Represents the PropsContext of the `AutoComplete` component.
- * Used for global configuration of all `AutoComplete` instances.
- *
- * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
- */
-export var AutoCompletePropsContext = createPropsContext();
-/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
-/**
- * Represents the [KendoReact AutoComplete component]({% slug overview_autocomplete %}).
- *
- * Accepts properties of type [AutoCompleteProps]({% slug api_dropdowns_autocompleteprops %}).
- * Obtaining the `ref` returns an object of type [AutoCompleteHandle]({% slug api_dropdowns_autocompletehandle %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    autocomplete = null;
- *    render() {
- *       return (
- *          <div>
- *              <AutoComplete
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.autocomplete = component}
- *              />
- *              <button onClick={() => alert(this.autocomplete.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export var AutoComplete = withPropsContext(AutoCompletePropsContext, AutoCompleteWithoutContext);
-AutoComplete.displayName = 'KendoReactAutoComplete';