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

package/dist/es/AutoComplete/AutoComplete.d.ts

@@ -17,29 +17,9 @@ export interface AutoCompleteState extends DropDownStateBase {
 export interface AutoCompleteInternalState extends InternalState {
     data: AutoCompleteState;
 }
-/**
- * Represents the [KendoReact AutoComplete component]({% slug overview_autocomplete %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    autocomplete = null;
- *    render() {
- *       return (
- *          <div>
- *              <AutoComplete
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.autocomplete = component}
- *              />
- *              <button onClick={() => alert(this.autocomplete.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export default class AutoComplete extends React.Component<AutoCompleteProps, AutoCompleteState> implements FormComponent {
+/** @hidden */
+export declare class AutoCompleteWithoutContext extends React.Component<AutoCompleteProps, AutoCompleteState> implements FormComponent {
+    static displayName: string;
     /**
      * @hidden
      */
@@ -75,6 +55,9 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, Aut
             className: PropTypes.Requireable<string>;
             appendTo: PropTypes.Requireable<any>;
             width: PropTypes.Requireable<string | number>;
+            /**
+             * @hidden
+             */
             height: PropTypes.Requireable<string | number>;
         }>>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
@@ -183,3 +166,55 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, Aut
     private suggestValue;
     private focusedIndex;
 }
+/**
+ * Represents the PropsContext of the `AutoComplete` component.
+ * Used for global configuration of all `AutoComplete` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const AutoCompletePropsContext: React.Context<(p: AutoCompleteProps) => AutoCompleteProps>;
+/**
+ * Represent the `ref` of the AutoComplete component.
+ */
+export interface AutoCompleteHandle extends Pick<AutoCompleteWithoutContext, keyof AutoCompleteWithoutContext> {
+    /**
+     * Gets the `name` property of the AutoComplete.
+     */
+    name: string | undefined;
+    /**
+     * Represents the validity state into which the AutoComplete is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * The value of the AutoComplete.
+     */
+    value: string;
+}
+/** @hidden */
+export declare type AutoComplete = AutoCompleteHandle;
+/**
+ * Represents the [KendoReact AutoComplete component]({% slug overview_autocomplete %}).
+ *
+ * Accepts properties of type [AutoCompleteProps]({% slug api_dropdowns_autocompleteprops %}).
+ * Obtaining the `ref` returns an object of type [AutoCompleteHandle]({% slug api_dropdowns_autocompletehandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    autocomplete = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <AutoComplete
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.autocomplete = component}
+ *              />
+ *              <button onClick={() => alert(this.autocomplete.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const AutoComplete: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<any>>;

package/dist/es/AutoComplete/AutoComplete.js

@@ -29,36 +29,15 @@ import ListContainer from './../common/ListContainer';
 import List from './../common/List';
 import DropDownBase from '../common/DropDownBase';
 import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils';
-import { guid, Keys, classNames } from '@progress/kendo-react-common';
+import { guid, Keys, classNames, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
-/**
- * Represents the [KendoReact AutoComplete component]({% slug overview_autocomplete %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    autocomplete = null;
- *    render() {
- *       return (
- *          <div>
- *              <AutoComplete
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.autocomplete = component}
- *              />
- *              <button onClick={() => alert(this.autocomplete.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var AutoComplete = /** @class */ (function (_super) {
-    __extends(AutoComplete, _super);
-    function AutoComplete(props) {
+/** @hidden */
+var AutoCompleteWithoutContext = /** @class */ (function (_super) {
+    __extends(AutoCompleteWithoutContext, _super);
+    function AutoCompleteWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         /**
          * @hidden
@@ -194,7 +173,7 @@ var AutoComplete = /** @class */ (function (_super) {
         validatePackage(packageMetadata);
         return _this;
     }
-    Object.defineProperty(AutoComplete.prototype, "element", {
+    Object.defineProperty(AutoCompleteWithoutContext.prototype, "element", {
         /**
          * @hidden
          */
@@ -204,7 +183,7 @@ var AutoComplete = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(AutoComplete.prototype, "value", {
+    Object.defineProperty(AutoCompleteWithoutContext.prototype, "value", {
         /**
          * The value of the AutoComplete.
          */
@@ -226,7 +205,7 @@ var AutoComplete = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(AutoComplete.prototype, "name", {
+    Object.defineProperty(AutoCompleteWithoutContext.prototype, "name", {
         /**
          * Gets the `name` property of the AutoComplete.
          */
@@ -236,7 +215,7 @@ var AutoComplete = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(AutoComplete.prototype, "validity", {
+    Object.defineProperty(AutoCompleteWithoutContext.prototype, "validity", {
         /**
          * Represents the validity state into which the AutoComplete is set.
          */
@@ -255,26 +234,26 @@ var AutoComplete = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(AutoComplete.prototype, "validityStyles", {
+    Object.defineProperty(AutoCompleteWithoutContext.prototype, "validityStyles", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.validityStyles !== undefined
                 ? this.props.validityStyles
-                : AutoComplete.defaultProps.validityStyles;
+                : AutoCompleteWithoutContext.defaultProps.validityStyles;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(AutoComplete.prototype, "required", {
+    Object.defineProperty(AutoCompleteWithoutContext.prototype, "required", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.required !== undefined
                 ? this.props.required
-                : AutoComplete.defaultProps.required;
+                : AutoCompleteWithoutContext.defaultProps.required;
         },
         enumerable: true,
         configurable: true
@@ -282,7 +261,7 @@ var AutoComplete = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    AutoComplete.prototype.componentDidUpdate = function (prevProps, prevState) {
+    AutoCompleteWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a = this.props.data, data = _a === void 0 ? [] : _a;
         var _b = prevProps.data, prevData = _b === void 0 ? [] : _b;
         var focusedIndex = this.focusedIndex();
@@ -300,14 +279,14 @@ var AutoComplete = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    AutoComplete.prototype.componentDidMount = function () {
+    AutoCompleteWithoutContext.prototype.componentDidMount = function () {
         this.base.didMount();
         this.setValidity();
     };
     /**
      * @hidden
      */
-    AutoComplete.prototype.render = function () {
+    AutoCompleteWithoutContext.prototype.render = function () {
         var _this = this;
         var _a = this.props, dir = _a.dir, disabled = _a.disabled, label = _a.label, className = _a.className, style = _a.style, loading = _a.loading, suggest = _a.suggest;
         var isValid = !this.validityStyles || this.validity.valid;
@@ -339,7 +318,7 @@ var AutoComplete = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    AutoComplete.prototype.onNavigate = function (state, keyCode) {
+    AutoCompleteWithoutContext.prototype.onNavigate = function (state, keyCode) {
         var _this = this;
         var typedText = this.value;
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex;
@@ -361,7 +340,7 @@ var AutoComplete = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    AutoComplete.prototype.applyInputValue = function (value, state, eventKey) {
+    AutoCompleteWithoutContext.prototype.applyInputValue = function (value, state, eventKey) {
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField;
         this._suggested = '';
@@ -374,7 +353,7 @@ var AutoComplete = /** @class */ (function (_super) {
         }
         this.applyState(state);
     };
-    AutoComplete.prototype.renderSearchBar = function (clearButton, value, id) {
+    AutoCompleteWithoutContext.prototype.renderSearchBar = function (clearButton, value, id) {
         var _this = this;
         var base = this.base;
         var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, readonly = _a.readonly;
@@ -382,7 +361,7 @@ var AutoComplete = /** @class */ (function (_super) {
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", clearButton: clearButton, clearButtonClick: this.clearButtonClick, ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
-    AutoComplete.prototype.renderListContainer = function () {
+    AutoCompleteWithoutContext.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;
         var popupSettings = base.getPopupSettings();
@@ -400,7 +379,7 @@ var AutoComplete = /** @class */ (function (_super) {
             this.renderList(),
             footer));
     };
-    AutoComplete.prototype.renderList = function () {
+    AutoCompleteWithoutContext.prototype.renderList = function () {
         var base = this.base;
         var popupSettings = base.getPopupSettings();
         var _a = this.props, textField = _a.textField, _b = _a.data, data = _b === void 0 ? [] : _b, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender;
@@ -408,7 +387,7 @@ var AutoComplete = /** @class */ (function (_super) {
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         return (React.createElement(List, { id: base.listBoxId, show: opened, data: data.slice(), focusedIndex: this.focusedIndex(), value: value, textField: textField, valueField: textField, highlightSelected: false, optionsGuid: base.guid, listRef: function (list) { return base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-scroller", onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); } }));
     };
-    AutoComplete.prototype.triggerOnChange = function (newValue, state, eventArgs) {
+    AutoCompleteWithoutContext.prototype.triggerOnChange = function (newValue, state, eventArgs) {
         if (this.value === newValue && !eventArgs) {
             return;
         }
@@ -416,11 +395,11 @@ var AutoComplete = /** @class */ (function (_super) {
         this._valueDuringOnChange = newValue;
         state.events.push(__assign({ type: 'onChange' }, (eventArgs || {})));
     };
-    AutoComplete.prototype.applyState = function (state) {
+    AutoCompleteWithoutContext.prototype.applyState = function (state) {
         this.base.applyState(state);
         this._valueDuringOnChange = undefined;
     };
-    AutoComplete.prototype.suggestValue = function (value) {
+    AutoCompleteWithoutContext.prototype.suggestValue = function (value) {
         this._suggested = '';
         if (value) {
             var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField;
@@ -433,7 +412,7 @@ var AutoComplete = /** @class */ (function (_super) {
             }
         }
     };
-    AutoComplete.prototype.focusedIndex = function (value) {
+    AutoCompleteWithoutContext.prototype.focusedIndex = function (value) {
         var _this = this;
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex;
         var inputValue = value !== undefined ? value : this.value;
@@ -442,14 +421,50 @@ var AutoComplete = /** @class */ (function (_super) {
             (focusedItemIndex ? focusedItemIndex(data, inputValue, textField) :
                 Math.max(0, data.indexOf(getFocusedItem(data, inputValue, textField))));
     };
+    AutoCompleteWithoutContext.displayName = 'AutoComplete';
     /**
      * @hidden
      */
-    AutoComplete.propTypes = __assign({}, DropDownBase.basicPropTypes, { suggest: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), placeholder: PropTypes.string, value: PropTypes.string, defaultValue: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, readonly: PropTypes.bool, clearButton: PropTypes.bool, valueRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string });
+    AutoCompleteWithoutContext.propTypes = __assign({}, DropDownBase.basicPropTypes, { suggest: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), placeholder: PropTypes.string, value: PropTypes.string, defaultValue: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, readonly: PropTypes.bool, clearButton: PropTypes.bool, valueRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string });
     /**
      * @hidden
      */
-    AutoComplete.defaultProps = __assign({}, DropDownBase.defaultProps);
-    return AutoComplete;
+    AutoCompleteWithoutContext.defaultProps = __assign({}, DropDownBase.defaultProps);
+    return AutoCompleteWithoutContext;
 }(React.Component));
-export default AutoComplete;
+export { AutoCompleteWithoutContext };
+/**
+ * Represents the PropsContext of the `AutoComplete` component.
+ * Used for global configuration of all `AutoComplete` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export var AutoCompletePropsContext = createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the [KendoReact AutoComplete component]({% slug overview_autocomplete %}).
+ *
+ * Accepts properties of type [AutoCompleteProps]({% slug api_dropdowns_autocompleteprops %}).
+ * Obtaining the `ref` returns an object of type [AutoCompleteHandle]({% slug api_dropdowns_autocompletehandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    autocomplete = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <AutoComplete
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.autocomplete = component}
+ *              />
+ *              <button onClick={() => alert(this.autocomplete.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export var AutoComplete = withPropsContext(AutoCompletePropsContext, AutoCompleteWithoutContext);
+AutoComplete.displayName = 'KendoReactAutoComplete';

package/dist/es/AutoComplete/AutoCompleteProps.d.ts

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

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

@@ -17,29 +17,9 @@ export interface ComboBoxState extends DropDownStateBase {
 export interface ComboInternalState extends InternalState {
     data: ComboBoxState;
 }
-/**
- * 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'));
- * ```
- */
-export default class ComboBox extends React.Component<ComboBoxProps, ComboBoxState> implements FormComponent {
+/** @hidden */
+export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProps, ComboBoxState> implements FormComponent {
+    static displayName: string;
     /**
      * @hidden
      */
@@ -194,3 +174,59 @@ export default class ComboBox extends React.Component<ComboBoxProps, ComboBoxSta
     private applyState;
     private setValidity;
 }
+/**
+ * Represents the PropsContext of the `ComboBox` component.
+ * Used for global configuration of all `ComboBox` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const ComboBoxPropsContext: React.Context<(p: ComboBoxProps) => ComboBoxProps>;
+/**
+ * Represent the `ref` of the ComboBox component.
+ */
+export interface ComboBoxHandle extends Pick<ComboBoxWithoutContext, keyof ComboBoxWithoutContext> {
+    /**
+     * The index of the selected item.
+     */
+    index: number;
+    /**
+     * Gets the `name` property of the ComboBox.
+     */
+    name: string | undefined;
+    /**
+     * Represents the validity state into which the component is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * The value of the ComboBox.
+     */
+    value: any;
+}
+/** @hidden */
+export declare type ComboBox = ComboBoxHandle;
+/**
+ * Represents the [KendoReact ComboBox component]({% slug overview_combobox %}).
+ *
+ * Accepts properties of type [ComboBoxProps]({% slug api_dropdowns_comboboxprops %}).
+ * Obtaining the `ref` returns an object of type [ComboBoxHandle]({% slug api_dropdowns_comboboxhandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    combobox = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <ComboBox
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.combobox = component}
+ *              />
+ *              <button onClick={() => alert(this.combobox.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<any>>;