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

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

package/dist/es/DropDownTree/DropDownTree.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, noop, useRtl, getTabIndex, Keys, mapTree, extendDataItem, guid } from '@progress/kendo-react-common';
+import { classNames, noop, useRtl, getTabIndex, Keys, mapTree, extendDataItem, guid, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
 import { Popup } from '@progress/kendo-react-popup';
 import { useLocalization } from '@progress/kendo-react-intl';
 import { TreeView } from '@progress/kendo-react-treeview';
@@ -46,11 +46,22 @@ var defaultProps = {
     required: false,
     validityStyles: true
 };
+/**
+ * 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 var DropDownTreePropsContext = createPropsContext();
 /**
  * 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 var DropDownTree = React.forwardRef(function (props, ref) {
+export var DropDownTree = React.forwardRef(function (directProps, ref) {
     validatePackage(packageMetadata);
+    var props = usePropsContext(DropDownTreePropsContext, directProps);
     var calculatedId = React.useMemo(function () { return guid(); }, []);
     var id = props.id || calculatedId;
     var _a = props.data, data = _a === void 0 ? [] : _a, dataItemKey = props.dataItemKey, _b = props.popupSettings, popupSettings = _b === void 0 ? {} : _b, _c = props.style, style = _c === void 0 ? {} : _c, opened = props.opened, disabled = props.disabled, _d = props.onOpen, onOpen = _d === void 0 ? noop : _d, _e = props.onClose, onClose = _e === void 0 ? noop : _e, placeholder = props.placeholder, label = props.label, name = props.name, _f = props.selectField, selectField = _f === void 0 ? defaultProps.selectField : _f, _g = props.subItemsField, subItemsField = _g === void 0 ? defaultProps.subItemsField : _g, validationMessage = props.validationMessage, valid = props.valid, _h = props.required, required = _h === void 0 ? defaultProps.required : _h, _j = props.validityStyles, validityStyles = _j === void 0 ? defaultProps.validityStyles : _j;

package/dist/es/MultiColumnComboBox/MultiColumnComboBox.d.ts

@@ -190,7 +190,18 @@ export interface MultiColumnComboBoxChangeEvent {
      */
     syntheticEvent: React.SyntheticEvent<any>;
 }
+/**
+ * Represents the PropsContext of the `MultiColumnComboBox` component.
+ * Used for global configuration of all `MultiColumnComboBox` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const MultiColumnComboBoxPropsContext: React.Context<(p: MultiColumnComboBoxProps) => MultiColumnComboBoxProps>;
 /**
  * Represents the MultiColumnComboBox component.
+ *
+ * Accepts properties of type [MultiColumnComboBoxProps]({% slug api_dropdowns_multicolumncomboboxprops %}).
+ * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}).
+ *
  */
 export declare const MultiColumnComboBox: React.ForwardRefExoticComponent<MultiColumnComboBoxProps & React.RefAttributes<MultiColumnComboBoxHandle>>;

package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js

@@ -21,18 +21,30 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { MultiColumnList } from './../common/MultiColumnList';
-import { classNames, getScrollbarWidth, setScrollbarWidth, getter } from '@progress/kendo-react-common';
-import ComboBox from '../ComboBox/ComboBox';
+import { classNames, getScrollbarWidth, setScrollbarWidth, getter, usePropsContext, createPropsContext } from '@progress/kendo-react-common';
+import { ComboBox, ComboBoxWithoutContext } from '../ComboBox/ComboBox';
 var columnWidth = function (width, defaultWidth) {
     if (width) {
         return typeof width === 'number' ? width + 'px' : width;
     }
     return defaultWidth;
 };
+/**
+ * Represents the PropsContext of the `MultiColumnComboBox` component.
+ * Used for global configuration of all `MultiColumnComboBox` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export var MultiColumnComboBoxPropsContext = createPropsContext();
 /**
  * Represents the MultiColumnComboBox component.
+ *
+ * Accepts properties of type [MultiColumnComboBoxProps]({% slug api_dropdowns_multicolumncomboboxprops %}).
+ * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}).
+ *
  */
-export var MultiColumnComboBox = React.forwardRef(function (props, ref) {
+export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
+    var props = usePropsContext(MultiColumnComboBoxPropsContext, directProps);
     var target = React.useRef(null);
     var comboBoxRef = React.useRef(null);
     var scrollbarWidth = getScrollbarWidth();
@@ -103,7 +115,7 @@ export var MultiColumnComboBox = React.forwardRef(function (props, ref) {
     var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList, __assign({}, listProps)); }, []);
     return (React.createElement(ComboBox, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { popupClass: 'k-dropdowngrid-popup', className: classNames('k-popup-flush', popupSettings.className) }), ref: comboBoxRef, header: header, itemRender: itemRender, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler })));
 });
-var propTypes = __assign({}, ComboBox.propTypes, { columns: PropTypes.any.isRequired });
+var propTypes = __assign({}, ComboBoxWithoutContext.propTypes, { columns: PropTypes.any.isRequired });
 var defaultProps = {
     columns: [],
     popupSettings: {},

package/dist/es/MultiSelect/MultiSelect.d.ts

@@ -21,29 +21,9 @@ export interface MultiSelectState extends DropDownStateBase {
 export interface MultiSelectInternalState extends InternalState {
     data: MultiSelectState;
 }
-/**
- * Represents the [KendoReact MultiSelect component]({% slug overview_multiselect %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    multiselect = null;
- *    render() {
- *       return (
- *          <div>
- *              <MultiSelect
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.multiselect = component}
- *              />
- *              <button onClick={() => alert(this.multiselect.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export default class MultiSelect extends React.Component<MultiSelectProps, MultiSelectState> implements FormComponent {
+/** @hidden */
+export declare class MultiSelectWithoutContext extends React.Component<MultiSelectProps, MultiSelectState> implements FormComponent {
+    static displayName: string;
     /**
      * @hidden
      */
@@ -68,6 +48,9 @@ export default class MultiSelect extends React.Component<MultiSelectProps, Multi
             skip: PropTypes.Validator<number>;
             total: PropTypes.Validator<number>;
         }>>;
+        /**
+         * @hidden
+         */
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
         onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         opened: PropTypes.Requireable<boolean>;
@@ -202,3 +185,55 @@ export default class MultiSelect extends React.Component<MultiSelectProps, Multi
     private applyState;
     private setValidity;
 }
+/**
+ * Represents the PropsContext of the `MultiSelect` component.
+ * Used for global configuration of all `MultiSelect` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const MultiSelectPropsContext: React.Context<(p: MultiSelectProps) => MultiSelectProps>;
+/**
+ * Represent the `ref` of the MultiSelect component.
+ */
+export interface MultiSelectHandle extends Pick<MultiSelectWithoutContext, keyof MultiSelectWithoutContext> {
+    /**
+     * Gets the `name` property of the MultiSelect.
+     */
+    name: string | undefined;
+    /**
+     * Represents the validity state into which the MultiSelect is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * Represents the value of the MultiSelect.
+     */
+    value: Array<any>;
+}
+/** @hidden */
+export declare type MultiSelect = MultiSelectHandle;
+/**
+ * Represents the [KendoReact MultiSelect component]({% slug overview_multiselect %}).
+ *
+ * Accepts properties of type [MultiSelectProps]({% slug api_dropdowns_multiselectprops %}).
+ * Obtaining the `ref` returns an object of type [MultiSelectHandle]({% slug api_dropdowns_multiselecthandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    multiselect = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <MultiSelect
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.multiselect = component}
+ *              />
+ *              <button onClick={() => alert(this.multiselect.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<any>>;

package/dist/es/MultiSelect/MultiSelect.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, guid } from '@progress/kendo-react-common';
+import { classNames, Keys, guid, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import ListContainer from '../common/ListContainer';
 import List from '../common/List';
@@ -44,31 +44,10 @@ var FocusedItemType;
     FocusedItemType[FocusedItemType["ListItem"] = 1] = "ListItem";
     FocusedItemType[FocusedItemType["CustomItem"] = 2] = "CustomItem";
 })(FocusedItemType || (FocusedItemType = {}));
-/**
- * Represents the [KendoReact MultiSelect component]({% slug overview_multiselect %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    multiselect = null;
- *    render() {
- *       return (
- *          <div>
- *              <MultiSelect
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.multiselect = component}
- *              />
- *              <button onClick={() => alert(this.multiselect.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var MultiSelect = /** @class */ (function (_super) {
-    __extends(MultiSelect, _super);
-    function MultiSelect(props) {
+/** @hidden */
+var MultiSelectWithoutContext = /** @class */ (function (_super) {
+    __extends(MultiSelectWithoutContext, _super);
+    function MultiSelectWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         /**
          * @hidden
@@ -390,7 +369,7 @@ var MultiSelect = /** @class */ (function (_super) {
         validatePackage(packageMetadata);
         return _this;
     }
-    Object.defineProperty(MultiSelect.prototype, "element", {
+    Object.defineProperty(MultiSelectWithoutContext.prototype, "element", {
         /**
          * @hidden
          */
@@ -400,7 +379,7 @@ var MultiSelect = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiSelect.prototype, "value", {
+    Object.defineProperty(MultiSelectWithoutContext.prototype, "value", {
         /**
          * Represents the value of the MultiSelect.
          */
@@ -423,7 +402,7 @@ var MultiSelect = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiSelect.prototype, "name", {
+    Object.defineProperty(MultiSelectWithoutContext.prototype, "name", {
         /**
          * Gets the `name` property of the MultiSelect.
          */
@@ -433,7 +412,7 @@ var MultiSelect = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiSelect.prototype, "validity", {
+    Object.defineProperty(MultiSelectWithoutContext.prototype, "validity", {
         /**
          * Represents the validity state into which the MultiSelect is set.
          */
@@ -451,23 +430,23 @@ var MultiSelect = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiSelect.prototype, "required", {
+    Object.defineProperty(MultiSelectWithoutContext.prototype, "required", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.required !== undefined
                 ? this.props.required
-                : MultiSelect.defaultProps.required;
+                : MultiSelectWithoutContext.defaultProps.required;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiSelect.prototype, "validityStyles", {
+    Object.defineProperty(MultiSelectWithoutContext.prototype, "validityStyles", {
         get: function () {
             return this.props.validityStyles !== undefined
                 ? this.props.validityStyles
-                : MultiSelect.defaultProps.validityStyles;
+                : MultiSelectWithoutContext.defaultProps.validityStyles;
         },
         enumerable: true,
         configurable: true
@@ -475,7 +454,7 @@ var MultiSelect = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    MultiSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
+    MultiSelectWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
         var virtual = this.props.virtual;
         var skip = virtual ? virtual.skip : 0;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
@@ -509,14 +488,14 @@ var MultiSelect = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    MultiSelect.prototype.componentDidMount = function () {
+    MultiSelectWithoutContext.prototype.componentDidMount = function () {
         this.base.didMount();
         this.setValidity();
     };
     /**
      * @hidden
      */
-    MultiSelect.prototype.onNavigate = function (state, keyCode) {
+    MultiSelectWithoutContext.prototype.onNavigate = function (state, keyCode) {
         var _a = this.props, allowCustom = _a.allowCustom, _b = _a.data, data = _b === void 0 ? [] : _b;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
@@ -547,7 +526,7 @@ var MultiSelect = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    MultiSelect.prototype.render = function () {
+    MultiSelectWithoutContext.prototype.render = function () {
         var _this = this;
         var _a = this.props, style = _a.style, className = _a.className, label = _a.label, dir = _a.dir, disabled = _a.disabled, tags = _a.tags, textField = _a.textField, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
         var _b = this.state, focused = _b.focused, text = _b.text, focusedTag = _b.focusedTag;
@@ -583,7 +562,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.renderListContainer()));
         return label ? (React.createElement(FloatingLabel, { label: label, editorId: id, editorValue: text || getItemValue(this.value[0], textField), editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: component })) : component;
     };
-    MultiSelect.prototype.renderSearchbar = function (id) {
+    MultiSelectWithoutContext.prototype.renderSearchbar = function (id) {
         var _a = this.state, activedescendant = _a.activedescendant, focusedTag = _a.focusedTag;
         var _b = this.props, disabled = _b.disabled, placeholder = _b.placeholder, ariaDescribedBy = _b.ariaDescribedBy;
         var text = (this.props.filter !== undefined ? this.props.filter : this.state.text) || '';
@@ -596,7 +575,7 @@ var MultiSelect = /** @class */ (function (_super) {
             "option-" + this.base.guid + "-" + focusedIndex;
         return (React.createElement(SearchBar, { id: id, size: Math.max((placeholderToShow || '').length, text.length, 1), tabIndex: this.props.tabIndex, accessKey: this.props.accessKey, placeholder: placeholderToShow, value: text, onChange: this.onChangeHandler, onKeyDown: this.onInputKeyDown, ref: this.searchbarRef, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: ariaActivedescendant, ariaDescribedBy: "tagslist-" + this.base.guid + (ariaDescribedBy ? (' ' + ariaDescribedBy) : ''), clearButton: clearButton, clearButtonClick: this.clearButtonClick, loading: this.props.loading, ariaLabelledBy: this.props.ariaLabelledBy }));
     };
-    MultiSelect.prototype.onTagsNavigate = function (event, state) {
+    MultiSelectWithoutContext.prototype.onTagsNavigate = function (event, state) {
         var keyCode = event.keyCode;
         var focusedTag = this.state.focusedTag;
         var tags = this._tags;
@@ -654,7 +633,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.applyState(state);
     };
-    MultiSelect.prototype.triggerOnChange = function (items, state) {
+    MultiSelectWithoutContext.prototype.triggerOnChange = function (items, state) {
         if (this.props.value === undefined) {
             state.data.value = items.slice();
         }
@@ -662,7 +641,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.setItems(items, this._valueItemsDuringOnChange);
         state.events.push({ type: 'onChange' });
     };
-    MultiSelect.prototype.selectFocusedItem = function (event) {
+    MultiSelectWithoutContext.prototype.selectFocusedItem = function (event) {
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, virtual = _a.virtual;
         var focusedIndex = this.getFocusedState().focusedIndex;
         var skip = virtual ? virtual.skip : 0;
@@ -670,11 +649,11 @@ var MultiSelect = /** @class */ (function (_super) {
             this.handleItemClick(focusedIndex, event);
         }
     };
-    MultiSelect.prototype.setItems = function (srcItems, destItems) {
+    MultiSelectWithoutContext.prototype.setItems = function (srcItems, destItems) {
         destItems.length = 0;
         destItems.push.apply(destItems, srcItems);
     };
-    MultiSelect.prototype.getFocusedState = function () {
+    MultiSelectWithoutContext.prototype.getFocusedState = function () {
         var focusedIndex = this.state.focusedIndex;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
         var _a = this.props, allowCustom = _a.allowCustom, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual, textField = _a.textField, _c = _a.focusedItemIndex, focusedItemIndex = _c === void 0 ? itemIndexStartsWith : _c;
@@ -715,27 +694,63 @@ var MultiSelect = /** @class */ (function (_super) {
             { focusedItem: data[0], focusedIndex: 0, focusedType: FocusedItemType.ListItem } :
             { focusedType: FocusedItemType.None, focusedIndex: -1 };
     };
-    MultiSelect.prototype.focusElement = function (element) {
+    MultiSelectWithoutContext.prototype.focusElement = function (element) {
         var _this = this;
         this._skipFocusEvent = true;
         element.focus();
         window.setTimeout(function () { return _this._skipFocusEvent = false; }, 0);
     };
-    MultiSelect.prototype.applyState = function (state) {
+    MultiSelectWithoutContext.prototype.applyState = function (state) {
         this.base.applyState(state);
         this._valueItemsDuringOnChange = null;
     };
+    MultiSelectWithoutContext.displayName = 'MultiSelect';
     /**
      * @hidden
      */
-    MultiSelect.propTypes = __assign({}, DropDownBase.propTypes, { autoClose: PropTypes.bool, value: PropTypes.arrayOf(PropTypes.any), defaultValue: PropTypes.arrayOf(PropTypes.any), dataItemKey: PropTypes.string, placeholder: PropTypes.string, tags: PropTypes.arrayOf(PropTypes.shape({
+    MultiSelectWithoutContext.propTypes = __assign({}, DropDownBase.propTypes, { autoClose: PropTypes.bool, value: PropTypes.arrayOf(PropTypes.any), defaultValue: PropTypes.arrayOf(PropTypes.any), dataItemKey: PropTypes.string, placeholder: PropTypes.string, tags: PropTypes.arrayOf(PropTypes.shape({
             text: PropTypes.string,
             data: PropTypes.arrayOf(PropTypes.any)
         })), tagRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string });
     /**
      * @hidden
      */
-    MultiSelect.defaultProps = __assign({}, DropDownBase.defaultProps, { autoClose: true, required: false });
-    return MultiSelect;
+    MultiSelectWithoutContext.defaultProps = __assign({}, DropDownBase.defaultProps, { autoClose: true, required: false });
+    return MultiSelectWithoutContext;
 }(React.Component));
-export default MultiSelect;
+export { MultiSelectWithoutContext };
+/**
+ * Represents the PropsContext of the `MultiSelect` component.
+ * Used for global configuration of all `MultiSelect` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export var MultiSelectPropsContext = createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the [KendoReact MultiSelect component]({% slug overview_multiselect %}).
+ *
+ * Accepts properties of type [MultiSelectProps]({% slug api_dropdowns_multiselectprops %}).
+ * Obtaining the `ref` returns an object of type [MultiSelectHandle]({% slug api_dropdowns_multiselecthandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    multiselect = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <MultiSelect
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.multiselect = component}
+ *              />
+ *              <button onClick={() => alert(this.multiselect.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export var MultiSelect = withPropsContext(MultiSelectPropsContext, MultiSelectWithoutContext);
+MultiSelect.displayName = 'KendoReactMultiSelect';

package/dist/es/MultiSelect/MultiSelectProps.d.ts

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

package/dist/es/MultiSelectTree/MultiSelectTree.d.ts

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

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, noop, useRtl, getTabIndex, Keys, guid } from '@progress/kendo-react-common';
+import { classNames, noop, useRtl, getTabIndex, Keys, guid, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
 import { Popup } from '@progress/kendo-react-popup';
 import { useLocalization } from '@progress/kendo-react-intl';
 import { TreeView } from '@progress/kendo-react-treeview';
@@ -47,10 +47,21 @@ var defaultProps = {
     required: false,
     validityStyles: true
 };
+/**
+ * Represents the PropsContext of the `MultiSelectTree` component.
+ * Used for global configuration of all `MultiSelectTree` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export var MultiSelectTreePropsContext = createPropsContext();
 /**
  * Represents the MultiSelectTree component.
+ *
+ * Accepts properties of type [MultiSelectTreeProps]({% slug api_dropdowns_multiselecttreeprops %}).
+ * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle]({% slug api_dropdowns_multiselecttreehandle %}).
  */
-export var MultiSelectTree = React.forwardRef(function (props, ref) {
+export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
+    var props = usePropsContext(MultiSelectTreePropsContext, directProps);
     validatePackage(packageMetadata);
     var componentGuid = React.useMemo(function () { return guid(); }, []);
     var id = props.id || componentGuid;

package/dist/es/main.d.ts

@@ -1,19 +1,19 @@
 import { FormComponentValidity } from '@progress/kendo-react-common';
-import DropDownList from './DropDownList/DropDownList';
+import { DropDownList, DropDownListHandle, DropDownListPropsContext } from './DropDownList/DropDownList';
 import { DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent } from './DropDownList/DropDownListProps';
 import { Page, VirtualizationSettings, DropDownsPopupSettings, Suggestion } from './common/settings';
 import { ListItemProps } from './common/ListItem';
-import ComboBox from './ComboBox/ComboBox';
+import { ComboBox, ComboBoxPropsContext, ComboBoxHandle } from './ComboBox/ComboBox';
 import { ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent } from './ComboBox/ComboBoxProps';
-import AutoComplete from './AutoComplete/AutoComplete';
+import { AutoComplete, AutoCompleteHandle, AutoCompletePropsContext } from './AutoComplete/AutoComplete';
 import { AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent } from './AutoComplete/AutoCompleteProps';
-import MultiSelect from './MultiSelect/MultiSelect';
+import { MultiSelect, MultiSelectHandle, MultiSelectPropsContext } from './MultiSelect/MultiSelect';
 import { MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent } from './MultiSelect/MultiSelectProps';
 import { TagData as MultiSelectTagData, TagData } from './MultiSelect/TagList';
-import { MultiColumnComboBox, MultiColumnComboBoxProps, MultiColumnComboBoxHandle, MultiColumnComboBoxColumn, MultiColumnComboBoxChangeEvent } from './MultiColumnComboBox/MultiColumnComboBox';
-import { DropDownTree } from './DropDownTree/DropDownTree';
+import { MultiColumnComboBox, MultiColumnComboBoxPropsContext, MultiColumnComboBoxProps, MultiColumnComboBoxHandle, MultiColumnComboBoxColumn, MultiColumnComboBoxChangeEvent } from './MultiColumnComboBox/MultiColumnComboBox';
+import { DropDownTree, DropDownTreePropsContext } from './DropDownTree/DropDownTree';
 export * from './DropDownTree/DropDownTreeProps';
-import { MultiSelectTree } from './MultiSelectTree/MultiSelectTree';
+import { MultiSelectTree, MultiSelectTreePropsContext } from './MultiSelectTree/MultiSelectTree';
 export * from './MultiSelectTree/MultiSelectTreeProps';
 export * from './MultiSelectTree/utils';
-export { AutoComplete, AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity, MultiColumnComboBox, MultiColumnComboBoxColumn, MultiColumnComboBoxProps, MultiColumnComboBoxHandle, MultiColumnComboBoxChangeEvent, DropDownTree, MultiSelectTree, TagData };
+export { AutoComplete, AutoCompleteHandle, AutoCompleteProps, AutoCompletePropsContext, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListHandle, DropDownListProps, DropDownListPropsContext, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxHandle, ComboBoxProps, ComboBoxPropsContext, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectHandle, MultiSelectProps, MultiSelectPropsContext, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity, MultiColumnComboBox, MultiColumnComboBoxColumn, MultiColumnComboBoxProps, MultiColumnComboBoxPropsContext, MultiColumnComboBoxHandle, MultiColumnComboBoxChangeEvent, DropDownTree, DropDownTreePropsContext, MultiSelectTree, MultiSelectTreePropsContext, TagData };

package/dist/es/main.js

@@ -1,9 +1,9 @@
-import DropDownList from './DropDownList/DropDownList';
-import ComboBox from './ComboBox/ComboBox';
-import AutoComplete from './AutoComplete/AutoComplete';
-import MultiSelect from './MultiSelect/MultiSelect';
-import { MultiColumnComboBox } from './MultiColumnComboBox/MultiColumnComboBox';
-import { DropDownTree } from './DropDownTree/DropDownTree';
-import { MultiSelectTree } from './MultiSelectTree/MultiSelectTree';
+import { DropDownList, DropDownListPropsContext } from './DropDownList/DropDownList';
+import { ComboBox, ComboBoxPropsContext } from './ComboBox/ComboBox';
+import { AutoComplete, AutoCompletePropsContext } from './AutoComplete/AutoComplete';
+import { MultiSelect, MultiSelectPropsContext } from './MultiSelect/MultiSelect';
+import { MultiColumnComboBox, MultiColumnComboBoxPropsContext } from './MultiColumnComboBox/MultiColumnComboBox';
+import { DropDownTree, DropDownTreePropsContext } from './DropDownTree/DropDownTree';
+import { MultiSelectTree, MultiSelectTreePropsContext } from './MultiSelectTree/MultiSelectTree';
 export * from './MultiSelectTree/utils';
-export { AutoComplete, DropDownList, ComboBox, MultiSelect, MultiColumnComboBox, DropDownTree, MultiSelectTree };
+export { AutoComplete, AutoCompletePropsContext, DropDownList, DropDownListPropsContext, ComboBox, ComboBoxPropsContext, MultiSelect, MultiSelectPropsContext, MultiColumnComboBox, MultiColumnComboBoxPropsContext, DropDownTree, DropDownTreePropsContext, MultiSelectTree, MultiSelectTreePropsContext };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1638196763,
+    publishDate: 1638254452,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };