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

package/dist/npm/ComboBox/ComboBox.js

@@ -36,31 +36,10 @@ var List_1 = require("../common/List");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../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
@@ -229,7 +208,7 @@ var ComboBox = /** @class */ (function (_super) {
         kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
         return _this;
     }
-    Object.defineProperty(ComboBox.prototype, "element", {
+    Object.defineProperty(ComboBoxWithoutContext.prototype, "element", {
         /**
          * @hidden
          */
@@ -239,7 +218,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.
          */
@@ -261,7 +240,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.
          */
@@ -274,7 +253,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.
          */
@@ -284,7 +263,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.
          */
@@ -304,23 +283,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
@@ -328,7 +307,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;
@@ -362,16 +341,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;
@@ -411,7 +390,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();
@@ -437,7 +416,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;
@@ -467,7 +446,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;
@@ -498,7 +477,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 ? utils_1.itemIndexStartsWith : _d;
         var skip = virtual.skip;
@@ -518,7 +497,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;
@@ -541,7 +520,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;
@@ -559,7 +538,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;
@@ -570,7 +549,7 @@ var ComboBox = /** @class */ (function (_super) {
         }
         return (React.createElement(SearchBar_1.default, { 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 ((!utils_1.isPresent(value) && !utils_1.isPresent(item)) || utils_1.areSame(value, item, this.props.dataItemKey)) {
             return;
@@ -581,7 +560,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 ? utils_1.itemIndexStartsWith : _d;
         var text = this.props.filter ? this.props.filter : this.state.text;
@@ -595,22 +574,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 = utils_1.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_1.default.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_1.default.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_1.default.defaultProps, { allowCustom: false, clearButton: true, required: false });
-    return ComboBox;
+    ComboBoxWithoutContext.defaultProps = __assign({}, DropDownBase_1.default.defaultProps, { allowCustom: false, clearButton: true, required: false });
+    return ComboBoxWithoutContext;
 }(React.Component));
-exports.default = ComboBox;
+exports.ComboBoxWithoutContext = 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.
+ */
+exports.ComboBoxPropsContext = kendo_react_common_1.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'));
+ * ```
+ */
+exports.ComboBox = kendo_react_common_1.withPropsContext(exports.ComboBoxPropsContext, ComboBoxWithoutContext);
+exports.ComboBox.displayName = 'KendoReactComboBox';

package/dist/npm/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/npm/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/npm/DropDownList/DropDownList.js

@@ -38,30 +38,11 @@ var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../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
@@ -362,7 +343,7 @@ var DropDownList = /** @class */ (function (_super) {
         kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
         return _this;
     }
-    Object.defineProperty(DropDownList.prototype, "element", {
+    Object.defineProperty(DropDownListWithoutContext.prototype, "element", {
         /**
          * @hidden
          */
@@ -372,7 +353,7 @@ var DropDownList = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DropDownList.prototype, "actionElement", {
+    Object.defineProperty(DropDownListWithoutContext.prototype, "actionElement", {
         /**
          * @hidden
          */
@@ -382,7 +363,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.
          */
@@ -408,7 +389,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.
          */
@@ -421,7 +402,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.
          */
@@ -431,7 +412,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.
          */
@@ -449,23 +430,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
@@ -473,7 +454,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;
@@ -521,14 +502,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;
@@ -554,7 +535,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;
@@ -570,7 +551,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         this.applyState(state);
     };
-    DropDownList.prototype.focusedIndex = function () {
+    DropDownListWithoutContext.prototype.focusedIndex = function () {
         var filterText = utils_1.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;
@@ -584,13 +565,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 (utils_1.areSame(this.value, item, this.props.dataItemKey)) {
             return;
         }
@@ -600,18 +581,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_1.default.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_1.default.propTypes);
     /**
      * @hidden
      */
-    DropDownList.defaultProps = __assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase_1.default.defaultProps, { required: false });
-    return DropDownList;
+    DropDownListWithoutContext.defaultProps = __assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase_1.default.defaultProps, { required: false });
+    return DropDownListWithoutContext;
 }(React.Component));
-exports.default = DropDownList;
+exports.DropDownListWithoutContext = 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.
+ */
+exports.DropDownListPropsContext = kendo_react_common_1.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'));
+ * ```
+ */
+exports.DropDownList = kendo_react_common_1.withPropsContext(exports.DropDownListPropsContext, DropDownListWithoutContext);
+exports.DropDownList.displayName = 'KendoReactDropDownList';

package/dist/npm/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';

package/dist/npm/DropDownTree/DropDownTree.d.ts

@@ -1,6 +1,16 @@
 import * as React from 'react';
 import { DropDownTreeProps, DropDownTreeHandle } from './DropDownTreeProps';
+/**
+ * Represents the PropsContext of the `DropDownTree` component.
+ * Used for global configuration of all `DropDownTree` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const DropDownTreePropsContext: React.Context<(p: DropDownTreeProps) => DropDownTreeProps>;
 /**
  * Represents the DropDownTree component.
+ *
+ * Accepts properties of type [DropDownTreeProps]({% slug api_dropdowns_dropdowntreeprops %}).
+ * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
  */
 export declare const DropDownTree: React.ForwardRefExoticComponent<DropDownTreeProps & React.RefAttributes<DropDownTreeHandle>>;