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

package/dist/npm/colors/ColorGradient.d.ts

@@ -16,20 +16,9 @@ export interface ColorGradientState {
     isFirstRender: boolean;
     guid: string;
 }
-/**
- * Represents the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorGradient />;
- *     }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare class ColorGradient extends React.Component<ColorGradientProps, ColorGradientState> {
+/** @hidden */
+export declare class ColorGradientWithoutContext extends React.Component<ColorGradientProps, ColorGradientState> {
+    static displayName: string;
     /**
      * @hidden
      */
@@ -158,3 +147,34 @@ export declare class ColorGradient extends React.Component<ColorGradientProps, C
      */
     render(): JSX.Element;
 }
+/**
+ * Represents the PropsContext of the `ColorGradient` component.
+ * Used for global configuration of all `ColorGradient` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export declare const ColorGradientPropsContext: React.Context<(p: ColorGradientProps) => ColorGradientProps>;
+/**
+ * Represent the `ref` of the ColorGradient component.
+ */
+export interface ColorGradientHandle extends Pick<ColorGradientWithoutContext, keyof ColorGradientWithoutContext> {
+}
+/** @hidden */
+export declare type ColorGradient = ColorGradientHandle;
+/**
+ * Represents the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
+ *
+ * Accepts properties of type [ColorGradientProps]({% slug api_inputs_colorgradientprops %}).
+ * Obtaining the `ref` returns an object of type [ColorGradientHandle]({% slug api_inputs_colorgradienthandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *     render() {
+ *         return <ColorGradient />;
+ *     }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const ColorGradient: React.ForwardRefExoticComponent<ColorGradientProps & React.RefAttributes<any>>;

package/dist/npm/colors/ColorGradient.js

@@ -27,22 +27,10 @@ var ColorContrastLabels_1 = require("./ColorContrastLabels");
 var ColorContrastSvg_1 = require("./ColorContrastSvg");
 var FORMAT = 'rgba';
 var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
-/**
- * Represents the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorGradient />;
- *     }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var ColorGradient = /** @class */ (function (_super) {
-    __extends(ColorGradient, _super);
-    function ColorGradient(props) {
+/** @hidden */
+var ColorGradientWithoutContext = /** @class */ (function (_super) {
+    __extends(ColorGradientWithoutContext, _super);
+    function ColorGradientWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         /**
          * @hidden
@@ -131,23 +119,23 @@ var ColorGradient = /** @class */ (function (_super) {
         };
         kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
         var value = props.value || props.defaultValue || color_parser_1.parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
-        _this.state = Object.assign({}, ColorGradient.getStateFromValue(value), { isFirstRender: true, guid: kendo_react_common_1.guid() });
+        _this.state = Object.assign({}, ColorGradientWithoutContext.getStateFromValue(value), { isFirstRender: true, guid: kendo_react_common_1.guid() });
         return _this;
     }
     /**
      * @hidden
      */
-    ColorGradient.getDerivedStateFromProps = function (props, state) {
+    ColorGradientWithoutContext.getDerivedStateFromProps = function (props, state) {
         if (props.value && !state.isFirstRender) {
             // The component is in controlled mode.
-            return ColorGradient.getStateFromValue(props.value, state.guid);
+            return ColorGradientWithoutContext.getStateFromValue(props.value, state.guid);
         }
         return null;
     };
     /**
      * @hidden
      */
-    ColorGradient.prototype.componentDidMount = function () {
+    ColorGradientWithoutContext.prototype.componentDidMount = function () {
         this.setAlphaSliderBackground(this.state.backgroundColor);
         if (this.state.isFirstRender) {
             this.setState({ isFirstRender: false });
@@ -156,13 +144,13 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.prototype.componentWillUnmount = function () {
+    ColorGradientWithoutContext.prototype.componentWillUnmount = function () {
         color_cache_1.removeCachedColor(this.state.guid);
     };
     /**
      * @hidden
      */
-    ColorGradient.prototype.componentDidUpdate = function (_, prevState) {
+    ColorGradientWithoutContext.prototype.componentDidUpdate = function (_, prevState) {
         if (prevState.backgroundColor !== this.state.backgroundColor) {
             this.setAlphaSliderBackground(this.state.backgroundColor);
         }
@@ -170,7 +158,7 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.prototype.renderRectangleDragHandle = function () {
+    ColorGradientWithoutContext.prototype.renderRectangleDragHandle = function () {
         var style = {};
         if (!this.state.isFirstRender) {
             var gradientRectMetrics = this.getGradientRectMetrics();
@@ -184,7 +172,7 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.prototype.handleHsvaChange = function (hsva, syntheticEvent, nativeEvent) {
+    ColorGradientWithoutContext.prototype.handleHsvaChange = function (hsva, syntheticEvent, nativeEvent) {
         var value = color_parser_1.getColorFromHSV(hsva);
         if (this.isUncontrolled) {
             var hex = color_parser_1.parseColor(value, 'hex');
@@ -198,7 +186,7 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.prototype.dispatchChangeEvent = function (value, syntheticEvent, nativeEvent) {
+    ColorGradientWithoutContext.prototype.dispatchChangeEvent = function (value, syntheticEvent, nativeEvent) {
         if (this.props.onChange) {
             this.props.onChange.call(undefined, { syntheticEvent: syntheticEvent, nativeEvent: nativeEvent, target: this, value: value });
         }
@@ -206,7 +194,7 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.getStateFromValue = function (value, componentGuid) {
+    ColorGradientWithoutContext.getStateFromValue = function (value, componentGuid) {
         if (!misc_1.isPresent(color_parser_1.parseColor(value, 'hex'))) {
             // Validate/sanitize the input.
             value = DEFAULT_SELECTED_COLOR;
@@ -220,12 +208,12 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.prototype.setAlphaSliderBackground = function (backgroundColor) {
+    ColorGradientWithoutContext.prototype.setAlphaSliderBackground = function (backgroundColor) {
         if (this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack) {
             this.alphaSlider.sliderTrack.style.background = "linear-gradient(to top, transparent, " + backgroundColor + ")";
         }
     };
-    Object.defineProperty(ColorGradient.prototype, "isUncontrolled", {
+    Object.defineProperty(ColorGradientWithoutContext.prototype, "isUncontrolled", {
         /**
          * @hidden
          */
@@ -238,13 +226,13 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.prototype.getGradientRectMetrics = function () {
+    ColorGradientWithoutContext.prototype.getGradientRectMetrics = function () {
         return this.gradientWrapper.getBoundingClientRect();
     };
     /**
      * @hidden
      */
-    ColorGradient.prototype.render = function () {
+    ColorGradientWithoutContext.prototype.render = function () {
         var _this = this;
         var className = kendo_react_common_1.classNames('k-colorgradient', { 'k-state-disabled': this.props.disabled });
         return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
@@ -261,10 +249,11 @@ var ColorGradient = /** @class */ (function (_super) {
             React.createElement(ColorInput_1.default, { rgba: this.state.rgba, onRgbaChange: this.onRgbaChange, hex: this.state.hex, onHexChange: this.onHexChange, opacity: this.props.opacity, disabled: this.props.disabled }),
             this.props.backgroundColor && (React.createElement(ColorContrastLabels_1.ColorContrastLabels, { bgColor: color_parser_1.getRGBA(this.props.backgroundColor), rgba: this.state.rgba }))));
     };
+    ColorGradientWithoutContext.displayName = 'ColorGradient';
     /**
      * @hidden
      */
-    ColorGradient.propTypes = {
+    ColorGradientWithoutContext.propTypes = {
         defaultValue: PropTypes.string,
         value: PropTypes.string,
         onChange: PropTypes.func,
@@ -280,9 +269,35 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.defaultProps = {
+    ColorGradientWithoutContext.defaultProps = {
         opacity: true
     };
-    return ColorGradient;
+    return ColorGradientWithoutContext;
 }(React.Component));
-exports.ColorGradient = ColorGradient;
+exports.ColorGradientWithoutContext = ColorGradientWithoutContext;
+/**
+ * Represents the PropsContext of the `ColorGradient` component.
+ * Used for global configuration of all `ColorGradient` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+exports.ColorGradientPropsContext = kendo_react_common_1.createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
+ *
+ * Accepts properties of type [ColorGradientProps]({% slug api_inputs_colorgradientprops %}).
+ * Obtaining the `ref` returns an object of type [ColorGradientHandle]({% slug api_inputs_colorgradienthandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *     render() {
+ *         return <ColorGradient />;
+ *     }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+exports.ColorGradient = kendo_react_common_1.withPropsContext(exports.ColorGradientPropsContext, ColorGradientWithoutContext);
+exports.ColorGradient.displayName = 'KendoReactColorGradient';

package/dist/npm/colors/ColorPalette.d.ts

@@ -21,20 +21,9 @@ export interface ColorPaletteState {
     focusedColor?: string;
     isFirstRender: boolean;
 }
-/**
- * Represents the [KendoReact ColorPalette component]({% slug overview_colorpalette %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPalette palette='basic' />;
- *     }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare class ColorPalette extends React.Component<ColorPaletteProps, ColorPaletteState> {
+/** @hidden */
+export declare class ColorPaletteWithoutContext extends React.Component<ColorPaletteProps, ColorPaletteState> {
+    static displayName: string;
     /**
      * @hidden
      */
@@ -98,3 +87,33 @@ export declare class ColorPalette extends React.Component<ColorPaletteProps, Col
     private renderColumns;
     private createCellId;
 }
+/**
+ * Represents the PropsContext of the `ColorPalette` component.
+ * Used for global configuration of all `ColorPalette` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export declare const ColorPalettePropsContext: React.Context<(p: ColorPaletteProps) => ColorPaletteProps>;
+/**
+ * Represent the `ref` of the ColorPalette component.
+ */
+export interface ColorPaletteHandle extends Pick<ColorPaletteWithoutContext, keyof ColorPaletteWithoutContext> {
+}
+/** @hidden */
+export declare type ColorPalette = ColorPaletteHandle;
+/**
+ * Represents the [KendoReact ColorPalette component]({% slug overview_colorpalette %}).
+ *
+ * Accepts properties of type [ColorPaletteProps]({% slug api_inputs_colorpaletteprops %}).
+ * Obtaining the `ref` returns an object of type [ColorPaletteHandle]({% slug api_inputs_colorpalettehandle %}).
+ *
+ * ```jsx
+ * class App extends React.Component {
+ *     render() {
+ *         return <ColorPalette palette='basic' />;
+ *     }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const ColorPalette: React.ForwardRefExoticComponent<ColorPaletteProps & React.RefAttributes<any>>;

package/dist/npm/colors/ColorPalette.js

@@ -34,22 +34,10 @@ exports.DEFAULT_COLUMNS_COUNT = 10;
  * @hidden
  */
 exports.DEFAULT_PRESET = 'office';
-/**
- * Represents the [KendoReact ColorPalette component]({% slug overview_colorpalette %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPalette palette='basic' />;
- *     }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var ColorPalette = /** @class */ (function (_super) {
-    __extends(ColorPalette, _super);
-    function ColorPalette(props) {
+/** @hidden */
+var ColorPaletteWithoutContext = /** @class */ (function (_super) {
+    __extends(ColorPaletteWithoutContext, _super);
+    function ColorPaletteWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         /**
          * @hidden
@@ -114,7 +102,7 @@ var ColorPalette = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorPalette.prototype.render = function () {
+    ColorPaletteWithoutContext.prototype.render = function () {
         var _this = this;
         var paletteInfo = this.getPaletteInfo();
         var svc = this.paletteService = new color_palette_service_1.ColorPaletteService();
@@ -137,7 +125,7 @@ var ColorPalette = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorPalette.getDerivedStateFromProps = function (props, state) {
+    ColorPaletteWithoutContext.getDerivedStateFromProps = function (props, state) {
         if (!state.isFirstRender && props.value !== undefined) {
             // The component is in controlled mode.
             if (props.value === '' && state.selectedColor !== undefined) {
@@ -153,7 +141,7 @@ var ColorPalette = /** @class */ (function (_super) {
         }
         return null;
     };
-    ColorPalette.prototype.handleCellNavigation = function (horizontalStep, verticalStep) {
+    ColorPaletteWithoutContext.prototype.handleCellNavigation = function (horizontalStep, verticalStep) {
         if (this.focusedColorCooridanates) {
             var newCoords = this.paletteService.getNextCell(this.focusedColorCooridanates, horizontalStep, verticalStep);
             this.setState({ focusedColor: this.paletteService.getColorAt(newCoords) });
@@ -162,30 +150,30 @@ var ColorPalette = /** @class */ (function (_super) {
             this.setState({ focusedColor: this.paletteService.colorRows[0][0] });
         }
     };
-    ColorPalette.prototype.handleEnter = function (event) {
+    ColorPaletteWithoutContext.prototype.handleEnter = function (event) {
         if (this.isUncontrolled) {
             this.setState({ selectedColor: this.state.focusedColor });
         }
         this.dispatchChangeEvent(this.state.focusedColor, event);
     };
-    ColorPalette.prototype.dispatchChangeEvent = function (value, event) {
+    ColorPaletteWithoutContext.prototype.dispatchChangeEvent = function (value, event) {
         kendo_react_common_1.dispatchEvent(this.props.onChange, event, this, { value: value, rgbaValue: color_parser_1.parseColor(value, 'rgba') });
     };
-    Object.defineProperty(ColorPalette.prototype, "focusedColorCooridanates", {
+    Object.defineProperty(ColorPaletteWithoutContext.prototype, "focusedColorCooridanates", {
         get: function () {
             return this.state.focusedColor ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : undefined;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPalette.prototype, "isUncontrolled", {
+    Object.defineProperty(ColorPaletteWithoutContext.prototype, "isUncontrolled", {
         get: function () {
             return this.props.value === undefined;
         },
         enumerable: true,
         configurable: true
     });
-    ColorPalette.prototype.getPaletteInfo = function () {
+    ColorPaletteWithoutContext.prototype.getPaletteInfo = function () {
         if (typeof this.props.palette === 'string') {
             var preset = palette_presets_1.PALETTEPRESETS[this.props.palette];
             if (misc_1.isPresent(preset)) {
@@ -202,13 +190,13 @@ var ColorPalette = /** @class */ (function (_super) {
             return { colors: this.props.palette || [], columns: this.props.columns || exports.DEFAULT_COLUMNS_COUNT };
         }
     };
-    ColorPalette.prototype.renderRows = function (rows, selectedCellCoords, focusedCellCoords) {
+    ColorPaletteWithoutContext.prototype.renderRows = function (rows, selectedCellCoords, focusedCellCoords) {
         var _this = this;
         return rows.map(function (row, i) {
             return React.createElement("tr", { role: "row", key: i }, _this.renderColumns(row, i, selectedCellCoords, focusedCellCoords));
         });
     };
-    ColorPalette.prototype.renderColumns = function (columns, rowIndex, selectedCellCoords, focusedCellCoords) {
+    ColorPaletteWithoutContext.prototype.renderColumns = function (columns, rowIndex, selectedCellCoords, focusedCellCoords) {
         var _this = this;
         var rowIsSelected = selectedCellCoords !== undefined && selectedCellCoords.row === rowIndex;
         var selectedColumn = selectedCellCoords && selectedCellCoords.col;
@@ -227,14 +215,15 @@ var ColorPalette = /** @class */ (function (_super) {
             return (React.createElement("td", { className: className, "aria-label": color, "aria-selected": isSelected ? true : _this.props.disabled ? undefined : false, style: { backgroundColor: color, width: width, height: height, minWidth: width }, onClick: function (event) { return _this.onColorClick(color, event); }, id: _this.createCellId({ row: rowIndex, col: i }), key: i }));
         });
     };
-    ColorPalette.prototype.createCellId = function (cellCoords) {
+    ColorPaletteWithoutContext.prototype.createCellId = function (cellCoords) {
         return this.guid + "_" + cellCoords.row + "_" + cellCoords.col;
     };
+    ColorPaletteWithoutContext.displayName = 'ColorPalette';
     /**
      * @hidden
      */
-    ColorPalette.propTypes = {
-        palette: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
+    ColorPaletteWithoutContext.propTypes = {
+        palette: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.string]),
         columns: PropTypes.number,
         tileSize: PropTypes.any,
         defaultValue: PropTypes.string,
@@ -250,10 +239,35 @@ var ColorPalette = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorPalette.defaultProps = {
+    ColorPaletteWithoutContext.defaultProps = {
         palette: exports.DEFAULT_PRESET,
         tileSize: exports.DEFAULT_TILE_SIZE
     };
-    return ColorPalette;
+    return ColorPaletteWithoutContext;
 }(React.Component));
-exports.ColorPalette = ColorPalette;
+exports.ColorPaletteWithoutContext = ColorPaletteWithoutContext;
+/**
+ * Represents the PropsContext of the `ColorPalette` component.
+ * Used for global configuration of all `ColorPalette` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+exports.ColorPalettePropsContext = kendo_react_common_1.createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the [KendoReact ColorPalette component]({% slug overview_colorpalette %}).
+ *
+ * Accepts properties of type [ColorPaletteProps]({% slug api_inputs_colorpaletteprops %}).
+ * Obtaining the `ref` returns an object of type [ColorPaletteHandle]({% slug api_inputs_colorpalettehandle %}).
+ *
+ * ```jsx
+ * class App extends React.Component {
+ *     render() {
+ *         return <ColorPalette palette='basic' />;
+ *     }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+exports.ColorPalette = kendo_react_common_1.withPropsContext(exports.ColorPalettePropsContext, ColorPaletteWithoutContext);
+exports.ColorPalette.displayName = 'KendoReactColorPalette';

package/dist/npm/colors/ColorPicker.d.ts

@@ -6,6 +6,13 @@ import { ColorPickerProps } from './interfaces/ColorPickerProps';
 export interface ColorPickerHandle {
     element: HTMLSpanElement | null;
 }
+/**
+ * Represents the PropsContext of the `ColorPicker` component.
+ * Used for global configuration of all `ColorPicker` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export declare const ColorPickerPropsContext: React.Context<(p: ColorPickerProps) => ColorPickerProps>;
 /**
  * Represents the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
  *

package/dist/npm/colors/ColorPicker.js

@@ -38,6 +38,13 @@ var DEFAULT_PALETTE_SETTINGS = {
 var isControlled = function (prop) {
     return prop !== undefined;
 };
+/**
+ * Represents the PropsContext of the `ColorPicker` component.
+ * Used for global configuration of all `ColorPicker` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+exports.ColorPickerPropsContext = kendo_react_common_1.createPropsContext();
 /**
  * Represents the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
  *
@@ -51,8 +58,9 @@ var isControlled = function (prop) {
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-exports.ColorPicker = React.forwardRef(function (props, target) {
+exports.ColorPicker = React.forwardRef(function (directProps, target) {
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+    var props = kendo_react_common_1.usePropsContext(exports.ColorPickerPropsContext, directProps);
     var popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
     var focusableElementRef = React.useRef(null);
     var gradientRef = React.useRef(null);

package/dist/npm/input/Input.d.ts

@@ -43,10 +43,9 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
 export interface InputState {
     value?: string | string[] | number;
 }
-/**
- * Represents the Input component.
- */
-export declare class Input extends React.Component<InputProps, InputState> implements FormComponent {
+/** @hidden */
+export declare class InputWithoutContext extends React.Component<InputProps, InputState> implements FormComponent {
+    static displayName: string;
     /**
      * @hidden
      */
@@ -118,4 +117,41 @@ export declare class Input extends React.Component<InputProps, InputState> imple
      */
     private handleAutoFill;
 }
+/**
+ * Represents the PropsContext of the `Input` component.
+ * Used for global configuration of all `Input` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export declare const InputPropsContext: React.Context<(p: InputProps) => InputProps>;
+/**
+ * Represent the `ref` of the Input component.
+ */
+export interface InputHandle extends Pick<InputWithoutContext, keyof InputWithoutContext> {
+    /**
+     * Gets the native input element of the Input component.
+     */
+    element: HTMLInputElement | null;
+    /**
+     * Gets the `name` property of the Input.
+     */
+    name: string | undefined;
+    /**
+     * Represents the validity state into which the Input is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * Gets the value of the Input.
+     */
+    value: string | string[] | number | undefined;
+}
+/** @hidden */
+export declare type Input = InputHandle;
+/**
+ * Represents the [KendoReact Input component]({% slug overview_textbox %}).
+ *
+ * Accepts properties of type [InputProps]({% slug api_inputs_inputprops %}).
+ * Obtaining the `ref` returns an object of type [InputHandle]({% slug api_inputs_inputhandle %}).
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<any>>;
 export {};