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

package/dist/npm/DropDownTree/DropDownTree.js

@@ -48,11 +48,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.
+ */
+exports.DropDownTreePropsContext = kendo_react_common_1.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 %}).
  */
-exports.DropDownTree = React.forwardRef(function (props, ref) {
+exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+    var props = kendo_react_common_1.usePropsContext(exports.DropDownTreePropsContext, directProps);
     var calculatedId = React.useMemo(function () { return kendo_react_common_1.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 ? kendo_react_common_1.noop : _d, _e = props.onClose, onClose = _e === void 0 ? kendo_react_common_1.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/npm/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/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -31,10 +31,22 @@ var columnWidth = function (width, defaultWidth) {
     }
     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.
+ */
+exports.MultiColumnComboBoxPropsContext = kendo_react_common_1.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 %}).
+ *
  */
-exports.MultiColumnComboBox = React.forwardRef(function (props, ref) {
+exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
+    var props = kendo_react_common_1.usePropsContext(exports.MultiColumnComboBoxPropsContext, directProps);
     var target = React.useRef(null);
     var comboBoxRef = React.useRef(null);
     var scrollbarWidth = kendo_react_common_1.getScrollbarWidth();
@@ -103,9 +115,9 @@ exports.MultiColumnComboBox = React.forwardRef(function (props, ref) {
     var onPageChangeHandler = React.useCallback(function (event) { return handleEvent(onPageChange, event); }, [onPageChange]);
     React.useEffect(function () { kendo_react_common_1.setScrollbarWidth(); });
     var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList_1.MultiColumnList, __assign({}, listProps)); }, []);
-    return (React.createElement(ComboBox_1.default, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { popupClass: 'k-dropdowngrid-popup', className: kendo_react_common_1.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 })));
+    return (React.createElement(ComboBox_1.ComboBox, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { popupClass: 'k-dropdowngrid-popup', className: kendo_react_common_1.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_1.default.propTypes, { columns: PropTypes.any.isRequired });
+var propTypes = __assign({}, ComboBox_1.ComboBoxWithoutContext.propTypes, { columns: PropTypes.any.isRequired });
 var defaultProps = {
     columns: [],
     popupSettings: {},

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

@@ -46,31 +46,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
@@ -392,7 +371,7 @@ var MultiSelect = /** @class */ (function (_super) {
         kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
         return _this;
     }
-    Object.defineProperty(MultiSelect.prototype, "element", {
+    Object.defineProperty(MultiSelectWithoutContext.prototype, "element", {
         /**
          * @hidden
          */
@@ -402,7 +381,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.
          */
@@ -425,7 +404,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.
          */
@@ -435,7 +414,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.
          */
@@ -453,23 +432,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
@@ -477,7 +456,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;
@@ -511,14 +490,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;
@@ -549,7 +528,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;
@@ -585,7 +564,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.renderListContainer()));
         return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: id, editorValue: text || utils_1.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) || '';
@@ -598,7 +577,7 @@ var MultiSelect = /** @class */ (function (_super) {
             "option-" + this.base.guid + "-" + focusedIndex;
         return (React.createElement(SearchBar_1.default, { 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;
@@ -656,7 +635,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();
         }
@@ -664,7 +643,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;
@@ -672,11 +651,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 ? utils_1.itemIndexStartsWith : _c;
@@ -717,27 +696,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_1.default.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_1.default.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_1.default.defaultProps, { autoClose: true, required: false });
-    return MultiSelect;
+    MultiSelectWithoutContext.defaultProps = __assign({}, DropDownBase_1.default.defaultProps, { autoClose: true, required: false });
+    return MultiSelectWithoutContext;
 }(React.Component));
-exports.default = MultiSelect;
+exports.MultiSelectWithoutContext = 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.
+ */
+exports.MultiSelectPropsContext = kendo_react_common_1.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'));
+ * ```
+ */
+exports.MultiSelect = kendo_react_common_1.withPropsContext(exports.MultiSelectPropsContext, MultiSelectWithoutContext);
+exports.MultiSelect.displayName = 'KendoReactMultiSelect';

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

@@ -49,10 +49,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.
+ */
+exports.MultiSelectTreePropsContext = kendo_react_common_1.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 %}).
  */
-exports.MultiSelectTree = React.forwardRef(function (props, ref) {
+exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
+    var props = kendo_react_common_1.usePropsContext(exports.MultiSelectTreePropsContext, directProps);
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
     var componentGuid = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
     var id = props.id || componentGuid;

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

@@ -4,17 +4,24 @@ function __export(m) {
 }
 Object.defineProperty(exports, "__esModule", { value: true });
 var DropDownList_1 = require("./DropDownList/DropDownList");
-exports.DropDownList = DropDownList_1.default;
+exports.DropDownList = DropDownList_1.DropDownList;
+exports.DropDownListPropsContext = DropDownList_1.DropDownListPropsContext;
 var ComboBox_1 = require("./ComboBox/ComboBox");
-exports.ComboBox = ComboBox_1.default;
+exports.ComboBox = ComboBox_1.ComboBox;
+exports.ComboBoxPropsContext = ComboBox_1.ComboBoxPropsContext;
 var AutoComplete_1 = require("./AutoComplete/AutoComplete");
-exports.AutoComplete = AutoComplete_1.default;
+exports.AutoComplete = AutoComplete_1.AutoComplete;
+exports.AutoCompletePropsContext = AutoComplete_1.AutoCompletePropsContext;
 var MultiSelect_1 = require("./MultiSelect/MultiSelect");
-exports.MultiSelect = MultiSelect_1.default;
+exports.MultiSelect = MultiSelect_1.MultiSelect;
+exports.MultiSelectPropsContext = MultiSelect_1.MultiSelectPropsContext;
 var MultiColumnComboBox_1 = require("./MultiColumnComboBox/MultiColumnComboBox");
 exports.MultiColumnComboBox = MultiColumnComboBox_1.MultiColumnComboBox;
+exports.MultiColumnComboBoxPropsContext = MultiColumnComboBox_1.MultiColumnComboBoxPropsContext;
 var DropDownTree_1 = require("./DropDownTree/DropDownTree");
 exports.DropDownTree = DropDownTree_1.DropDownTree;
+exports.DropDownTreePropsContext = DropDownTree_1.DropDownTreePropsContext;
 var MultiSelectTree_1 = require("./MultiSelectTree/MultiSelectTree");
 exports.MultiSelectTree = MultiSelectTree_1.MultiSelectTree;
+exports.MultiSelectTreePropsContext = MultiSelectTree_1.MultiSelectTreePropsContext;
 __export(require("./MultiSelectTree/utils"));

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.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'
 };