@progress/kendo-react-dropdowns 4.13.0-dev.202111291459 → 4.13.0-dev.202111300702

package/dist/es/ComboBox/ComboBox.js

@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import DropDownBase from '../common/DropDownBase';
-import { guid, classNames, Keys } from '@progress/kendo-react-common';
+import { guid, classNames, Keys, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { areSame, itemIndexStartsWith, getItemIndexByText, getItemValue, isPresent, suggestValue } from '../common/utils';
 import SearchBar from '../common/SearchBar';
@@ -34,31 +34,10 @@ import List from '../common/List';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
-/**
- * Represents the [KendoReact ComboBox component]({% slug overview_combobox %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    combobox = null;
- *    render() {
- *       return (
- *          <div>
- *              <ComboBox
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.combobox = component}
- *              />
- *              <button onClick={() => alert(this.combobox.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var ComboBox = /** @class */ (function (_super) {
-    __extends(ComboBox, _super);
-    function ComboBox(props) {
+/** @hidden */
+var ComboBoxWithoutContext = /** @class */ (function (_super) {
+    __extends(ComboBoxWithoutContext, _super);
+    function ComboBoxWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         /**
          * @hidden
@@ -227,7 +206,7 @@ var ComboBox = /** @class */ (function (_super) {
         validatePackage(packageMetadata);
         return _this;
     }
-    Object.defineProperty(ComboBox.prototype, "element", {
+    Object.defineProperty(ComboBoxWithoutContext.prototype, "element", {
         /**
          * @hidden
          */
@@ -237,7 +216,7 @@ var ComboBox = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ComboBox.prototype, "value", {
+    Object.defineProperty(ComboBoxWithoutContext.prototype, "value", {
         /**
          * The value of the ComboBox.
          */
@@ -259,7 +238,7 @@ var ComboBox = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ComboBox.prototype, "index", {
+    Object.defineProperty(ComboBoxWithoutContext.prototype, "index", {
         /**
          * The index of the selected item.
          */
@@ -272,7 +251,7 @@ var ComboBox = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ComboBox.prototype, "name", {
+    Object.defineProperty(ComboBoxWithoutContext.prototype, "name", {
         /**
          * Gets the `name` property of the ComboBox.
          */
@@ -282,7 +261,7 @@ var ComboBox = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ComboBox.prototype, "validity", {
+    Object.defineProperty(ComboBoxWithoutContext.prototype, "validity", {
         /**
          * Represents the validity state into which the component is set.
          */
@@ -302,23 +281,23 @@ var ComboBox = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ComboBox.prototype, "validityStyles", {
+    Object.defineProperty(ComboBoxWithoutContext.prototype, "validityStyles", {
         get: function () {
             return this.props.validityStyles !== undefined
                 ? this.props.validityStyles
-                : ComboBox.defaultProps.validityStyles;
+                : ComboBoxWithoutContext.defaultProps.validityStyles;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ComboBox.prototype, "required", {
+    Object.defineProperty(ComboBoxWithoutContext.prototype, "required", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.required !== undefined
                 ? this.props.required
-                : ComboBox.defaultProps.required;
+                : ComboBoxWithoutContext.defaultProps.required;
         },
         enumerable: true,
         configurable: true
@@ -326,7 +305,7 @@ var ComboBox = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ComboBox.prototype.componentDidUpdate = function (prevProps, prevState) {
+    ComboBoxWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
@@ -360,16 +339,16 @@ var ComboBox = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ComboBox.prototype.componentDidMount = function () {
+    ComboBoxWithoutContext.prototype.componentDidMount = function () {
         this.base.didMount();
         this.setValidity();
     };
     /**
      * @hidden
      */
-    ComboBox.prototype.render = function () {
+    ComboBoxWithoutContext.prototype.render = function () {
         var _this = this;
-        var _a = this.props, dir = _a.dir, disabled = _a.disabled, _b = _a.clearButton, clearButton = _b === void 0 ? ComboBox.defaultProps.clearButton : _b, label = _a.label, textField = _a.textField, className = _a.className, style = _a.style, loading = _a.loading, iconClassName = _a.iconClassName, virtual = _a.virtual;
+        var _a = this.props, dir = _a.dir, disabled = _a.disabled, _b = _a.clearButton, clearButton = _b === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _b, label = _a.label, textField = _a.textField, className = _a.className, style = _a.style, loading = _a.loading, iconClassName = _a.iconClassName, virtual = _a.virtual;
         var focused = this.state.focused;
         var isValid = !this.validityStyles || this.validity.valid;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
@@ -409,7 +388,7 @@ var ComboBox = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ComboBox.prototype.onNavigate = function (state, keyCode) {
+    ComboBoxWithoutContext.prototype.onNavigate = function (state, keyCode) {
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
         var text = this.props.filter ? this.props.filter : this.state.text;
         var focusedIndex = this.getFocusedIndex();
@@ -435,7 +414,7 @@ var ComboBox = /** @class */ (function (_super) {
             }
         }
     };
-    ComboBox.prototype.applyValueOnEnter = function (value, state) {
+    ComboBoxWithoutContext.prototype.applyValueOnEnter = function (value, state) {
         var _a;
         var _b = this.props, _c = _b.data, data = _c === void 0 ? [] : _c, textField = _b.textField, allowCustom = _b.allowCustom;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
@@ -465,7 +444,7 @@ var ComboBox = /** @class */ (function (_super) {
         }
         this.applyState(state);
     };
-    ComboBox.prototype.applyValueOnRejectSuggestions = function (text, state) {
+    ComboBoxWithoutContext.prototype.applyValueOnRejectSuggestions = function (text, state) {
         var _a;
         var _b = this.props, _c = _b.data, data = _c === void 0 ? [] : _c, textField = _b.textField, allowCustom = _b.allowCustom;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
@@ -496,7 +475,7 @@ var ComboBox = /** @class */ (function (_super) {
         }
         this.applyState(state);
     };
-    ComboBox.prototype.selectFocusedItem = function (text, state) {
+    ComboBoxWithoutContext.prototype.selectFocusedItem = function (text, state) {
         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, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, _d = _a.focusedItemIndex, focusedItemIndex = _d === void 0 ? itemIndexStartsWith : _d;
         var skip = virtual.skip;
@@ -516,7 +495,7 @@ var ComboBox = /** @class */ (function (_super) {
         }
         return this.applyState(state);
     };
-    ComboBox.prototype.renderListContainer = function () {
+    ComboBoxWithoutContext.prototype.renderListContainer = function () {
         var base = this.base;
         var _a = this.props, dir = _a.dir, header = _a.header, footer = _a.footer, _b = _a.data, data = _b === void 0 ? [] : _b, groupField = _a.groupField;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
@@ -539,7 +518,7 @@ var ComboBox = /** @class */ (function (_super) {
             base.renderScrollWrapper([this.renderList(), base.renderScrollElement()], this.onScroll),
             footer));
     };
-    ComboBox.prototype.renderList = function () {
+    ComboBoxWithoutContext.prototype.renderList = function () {
         var _this = this;
         var base = this.base;
         var _a = this.props, textField = _a.textField, dataItemKey = _a.dataItemKey, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
@@ -557,7 +536,7 @@ var ComboBox = /** @class */ (function (_super) {
                 { 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, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll }));
     };
-    ComboBox.prototype.renderSearchBar = function (clearButton, text, id) {
+    ComboBoxWithoutContext.prototype.renderSearchBar = function (clearButton, text, id) {
         var _this = this;
         var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
@@ -568,7 +547,7 @@ var ComboBox = /** @class */ (function (_super) {
         }
         return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: this.base.guid + '-' + (selectedIndex + virtual.skip), role: "combobox", clearButton: clearButton, clearButtonClick: this.clearButtonClick, ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
-    ComboBox.prototype.triggerOnChange = function (item, state) {
+    ComboBoxWithoutContext.prototype.triggerOnChange = function (item, state) {
         var value = this.value;
         if ((!isPresent(value) && !isPresent(item)) || areSame(value, item, this.props.dataItemKey)) {
             return;
@@ -579,7 +558,7 @@ var ComboBox = /** @class */ (function (_super) {
         this._valueDuringOnChange = item;
         state.events.push({ type: 'onChange' });
     };
-    ComboBox.prototype.getFocusedIndex = function () {
+    ComboBoxWithoutContext.prototype.getFocusedIndex = function () {
         var value = this.value;
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, _d = _a.focusedItemIndex, focusedItemIndex = _d === void 0 ? itemIndexStartsWith : _d;
         var text = this.props.filter ? this.props.filter : this.state.text;
@@ -593,22 +572,58 @@ var ComboBox = /** @class */ (function (_super) {
             return virtual.skip === 0 ? 0 : -1;
         }
     };
-    ComboBox.prototype.suggestValue = function (value) {
+    ComboBoxWithoutContext.prototype.suggestValue = function (value) {
         var _a = this.props, data = _a.data, textField = _a.textField;
         this._suggested = suggestValue(value, data, textField);
     };
-    ComboBox.prototype.applyState = function (state) {
+    ComboBoxWithoutContext.prototype.applyState = function (state) {
         this.base.applyState(state);
         this._valueDuringOnChange = undefined;
     };
+    ComboBoxWithoutContext.displayName = 'ComboBox';
     /**
      * @hidden
      */
-    ComboBox.propTypes = __assign({}, DropDownBase.propTypes, { dataItemKey: PropTypes.string, groupField: PropTypes.string, suggest: PropTypes.bool, placeholder: PropTypes.string, allowCustom: PropTypes.bool, clearButton: PropTypes.bool, iconClassName: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func });
+    ComboBoxWithoutContext.propTypes = __assign({}, DropDownBase.propTypes, { dataItemKey: PropTypes.string, groupField: PropTypes.string, suggest: PropTypes.bool, placeholder: PropTypes.string, allowCustom: PropTypes.bool, clearButton: PropTypes.bool, iconClassName: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func });
     /**
      * @hidden
      */
-    ComboBox.defaultProps = __assign({}, DropDownBase.defaultProps, { allowCustom: false, clearButton: true, required: false });
-    return ComboBox;
+    ComboBoxWithoutContext.defaultProps = __assign({}, DropDownBase.defaultProps, { allowCustom: false, clearButton: true, required: false });
+    return ComboBoxWithoutContext;
 }(React.Component));
-export default ComboBox;
+export { ComboBoxWithoutContext };
+/**
+ * Represents the PropsContext of the `ComboBox` component.
+ * Used for global configuration of all `ComboBox` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export var ComboBoxPropsContext = createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the [KendoReact ComboBox component]({% slug overview_combobox %}).
+ *
+ * Accepts properties of type [ComboBoxProps]({% slug api_dropdowns_comboboxprops %}).
+ * Obtaining the `ref` returns an object of type [ComboBoxHandle]({% slug api_dropdowns_comboboxhandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    combobox = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <ComboBox
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.combobox = component}
+ *              />
+ *              <button onClick={() => alert(this.combobox.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export var ComboBox = withPropsContext(ComboBoxPropsContext, ComboBoxWithoutContext);
+ComboBox.displayName = 'KendoReactComboBox';

package/dist/es/ComboBox/ComboBoxProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ComboBox from './ComboBox';
+import { ComboBox } from './ComboBox';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { FormComponentProps } from '@progress/kendo-react-common';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';

package/dist/es/DropDownList/DropDownList.d.ts

@@ -10,28 +10,10 @@ import { DropDownStateBase, InternalState } from './../common/settings';
 export interface DropDownListState extends DropDownStateBase {
 }
 /**
- * Represents the [KendoReact DropDownList component]({% slug overview_dropdownlist %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    dropdownlist = null;
- *    render() {
- *       return (
- *          <div>
- *              <DropDownList
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.dropdownlist = component}
- *              />
- *              <button onClick={() => alert(this.dropdownlist.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
+ * @hidden
  */
-export default class DropDownList extends React.Component<DropDownListProps, DropDownListState> implements FormComponent {
+export declare class DropDownListWithoutContext extends React.Component<DropDownListProps, DropDownListState> implements FormComponent {
+    static displayName: string;
     /**
      * @hidden
      */
@@ -41,6 +23,9 @@ export default class DropDownList extends React.Component<DropDownListProps, Dro
         filterable: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string>;
         virtual: PropTypes.Requireable<PropTypes.InferProps<{
+            /**
+             * The value of the DropDownList.
+             */
             pageSize: PropTypes.Validator<number>;
             skip: PropTypes.Validator<number>;
             total: PropTypes.Validator<number>;
@@ -77,7 +62,9 @@ export default class DropDownList extends React.Component<DropDownListProps, Dro
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
         focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
         header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>; /**
+         * @hidden
+         */
         delay: PropTypes.Requireable<number>;
         ignoreCase: PropTypes.Requireable<boolean>;
         iconClassName: PropTypes.Requireable<string>;
@@ -196,3 +183,59 @@ export default class DropDownList extends React.Component<DropDownListProps, Dro
     private triggerOnChange;
     private applyState;
 }
+/**
+ * Represents the PropsContext of the `DropDownList` component.
+ * Used for global configuration of all `DropDownList` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const DropDownListPropsContext: React.Context<(p: DropDownListProps) => DropDownListProps>;
+/**
+ * Represent the `ref` of the DropDownList component.
+ */
+export interface DropDownListHandle extends Pick<DropDownListWithoutContext, keyof DropDownListWithoutContext> {
+    /**
+     * The index of the selected item.
+     */
+    index: number;
+    /**
+     * Gets the `name` property of the DropDownList.
+     */
+    name: string | undefined;
+    /**
+     * Represents the validity state into which the DropDownList is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * The value of the DropDownList.
+     */
+    value: any;
+}
+/** @hidden */
+export declare type DropDownList = DropDownListHandle;
+/**
+ * Represents the [KendoReact DropDownList component]({% slug overview_dropdownlist %}).
+ *
+ * Accepts properties of type [DropDownListProps]({% slug api_dropdowns_dropdownlistprops %}).
+ * Obtaining the `ref` returns an object of type [DropDownListHandle]({% slug api_dropdowns_dropdownlisthandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    dropdownlist = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <DropDownList
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.dropdownlist = component}
+ *              />
+ *              <button onClick={() => alert(this.dropdownlist.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const DropDownList: React.ForwardRefExoticComponent<DropDownListProps & React.RefAttributes<any>>;

package/dist/es/DropDownList/DropDownList.js

@@ -24,7 +24,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys, getTabIndex } from '@progress/kendo-react-common';
+import { classNames, Keys, getTabIndex, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import ListContainer from '../common/ListContainer';
 import ListFilter from '../common/ListFilter';
@@ -36,30 +36,11 @@ import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 /**
- * Represents the [KendoReact DropDownList component]({% slug overview_dropdownlist %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    dropdownlist = null;
- *    render() {
- *       return (
- *          <div>
- *              <DropDownList
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.dropdownlist = component}
- *              />
- *              <button onClick={() => alert(this.dropdownlist.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
+ * @hidden
  */
-var DropDownList = /** @class */ (function (_super) {
-    __extends(DropDownList, _super);
-    function DropDownList(props) {
+var DropDownListWithoutContext = /** @class */ (function (_super) {
+    __extends(DropDownListWithoutContext, _super);
+    function DropDownListWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         /**
          * @hidden
@@ -360,7 +341,7 @@ var DropDownList = /** @class */ (function (_super) {
         validatePackage(packageMetadata);
         return _this;
     }
-    Object.defineProperty(DropDownList.prototype, "element", {
+    Object.defineProperty(DropDownListWithoutContext.prototype, "element", {
         /**
          * @hidden
          */
@@ -370,7 +351,7 @@ var DropDownList = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DropDownList.prototype, "actionElement", {
+    Object.defineProperty(DropDownListWithoutContext.prototype, "actionElement", {
         /**
          * @hidden
          */
@@ -380,7 +361,7 @@ var DropDownList = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DropDownList.prototype, "value", {
+    Object.defineProperty(DropDownListWithoutContext.prototype, "value", {
         /**
          * The value of the DropDownList.
          */
@@ -406,7 +387,7 @@ var DropDownList = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DropDownList.prototype, "index", {
+    Object.defineProperty(DropDownListWithoutContext.prototype, "index", {
         /**
          * The index of the selected item.
          */
@@ -419,7 +400,7 @@ var DropDownList = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DropDownList.prototype, "name", {
+    Object.defineProperty(DropDownListWithoutContext.prototype, "name", {
         /**
          * Gets the `name` property of the DropDownList.
          */
@@ -429,7 +410,7 @@ var DropDownList = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DropDownList.prototype, "validity", {
+    Object.defineProperty(DropDownListWithoutContext.prototype, "validity", {
         /**
          * Represents the validity state into which the DropDownList is set.
          */
@@ -447,23 +428,23 @@ var DropDownList = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DropDownList.prototype, "validityStyles", {
+    Object.defineProperty(DropDownListWithoutContext.prototype, "validityStyles", {
         get: function () {
             return this.props.validityStyles !== undefined
                 ? this.props.validityStyles
-                : DropDownList.defaultProps.validityStyles;
+                : DropDownListWithoutContext.defaultProps.validityStyles;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DropDownList.prototype, "required", {
+    Object.defineProperty(DropDownListWithoutContext.prototype, "required", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.required !== undefined
                 ? this.props.required
-                : DropDownList.defaultProps.required;
+                : DropDownListWithoutContext.defaultProps.required;
         },
         enumerable: true,
         configurable: true
@@ -471,7 +452,7 @@ var DropDownList = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DropDownList.prototype.componentDidUpdate = function (prevProps, prevState) {
+    DropDownListWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
@@ -519,14 +500,14 @@ var DropDownList = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DropDownList.prototype.componentDidMount = function () {
+    DropDownListWithoutContext.prototype.componentDidMount = function () {
         this.base.didMount();
         this.setValidity();
     };
     /**
      * @hidden
      */
-    DropDownList.prototype.render = function () {
+    DropDownListWithoutContext.prototype.render = function () {
         var _this = this;
         var _a = this.props, style = _a.style, className = _a.className, label = _a.label, dir = _a.dir, virtual = _a.virtual;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
@@ -552,7 +533,7 @@ var DropDownList = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DropDownList.prototype.onNavigate = function (state, keyCode) {
+    DropDownListWithoutContext.prototype.onNavigate = function (state, keyCode) {
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, defaultItem = _a.defaultItem, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0, total: 0, pageSize: 0 } : _c;
         var vs = this.base.vs;
         var value = this.value;
@@ -568,7 +549,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         this.applyState(state);
     };
-    DropDownList.prototype.focusedIndex = function () {
+    DropDownListWithoutContext.prototype.focusedIndex = function () {
         var filterText = isPresent(this.props.filter) ? this.props.filter : this.state.text;
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, dataItemKey = _a.dataItemKey, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex;
         var value = this.value;
@@ -582,13 +563,13 @@ var DropDownList = /** @class */ (function (_super) {
             return !hasSelected && virtual.skip === 0 ? 0 : undefined;
         }
     };
-    DropDownList.prototype.focusElement = function (element) {
+    DropDownListWithoutContext.prototype.focusElement = function (element) {
         var _this = this;
         this._skipFocusEvent = true;
         element.focus();
         window.setTimeout(function () { return _this._skipFocusEvent = false; }, 30);
     };
-    DropDownList.prototype.triggerOnChange = function (item, state) {
+    DropDownListWithoutContext.prototype.triggerOnChange = function (item, state) {
         if (areSame(this.value, item, this.props.dataItemKey)) {
             return;
         }
@@ -598,18 +579,54 @@ var DropDownList = /** @class */ (function (_super) {
         this._valueDuringOnChange = item;
         state.events.push({ type: 'onChange' });
     };
-    DropDownList.prototype.applyState = function (state) {
+    DropDownListWithoutContext.prototype.applyState = function (state) {
         this.base.applyState(state);
         this._valueDuringOnChange = undefined;
     };
+    DropDownListWithoutContext.displayName = 'DropDownList';
     /**
      * @hidden
      */
-    DropDownList.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string }, DropDownBase.propTypes);
+    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string }, DropDownBase.propTypes);
     /**
      * @hidden
      */
-    DropDownList.defaultProps = __assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase.defaultProps, { required: false });
-    return DropDownList;
+    DropDownListWithoutContext.defaultProps = __assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase.defaultProps, { required: false });
+    return DropDownListWithoutContext;
 }(React.Component));
-export default DropDownList;
+export { DropDownListWithoutContext };
+/**
+ * Represents the PropsContext of the `DropDownList` component.
+ * Used for global configuration of all `DropDownList` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export var DropDownListPropsContext = createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the [KendoReact DropDownList component]({% slug overview_dropdownlist %}).
+ *
+ * Accepts properties of type [DropDownListProps]({% slug api_dropdowns_dropdownlistprops %}).
+ * Obtaining the `ref` returns an object of type [DropDownListHandle]({% slug api_dropdowns_dropdownlisthandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    dropdownlist = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <DropDownList
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.dropdownlist = component}
+ *              />
+ *              <button onClick={() => alert(this.dropdownlist.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export var DropDownList = withPropsContext(DropDownListPropsContext, DropDownListWithoutContext);
+DropDownList.displayName = 'KendoReactDropDownList';

package/dist/es/DropDownList/DropDownListProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import DropDownList from './DropDownList';
+import { DropDownList } from './DropDownList';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
 import { ListItemProps } from '../common/ListItem';