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

package/dist/es/checkbox/Checkbox.d.ts

@@ -9,6 +9,13 @@ export interface CheckboxHandle {
     value?: string | number | string[] | boolean | null;
     name?: string | null;
 }
+/**
+ * Represents the PropsContext of the `Checkbox` component.
+ * Used for global configuration of all `Checkbox` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export declare const CheckboxPropsContext: React.Context<(p: CheckboxProps) => CheckboxProps>;
 /**
  * Represents the [KendoReact Checkbox component]({% slug overview_checkbox %}).
  *

package/dist/es/checkbox/Checkbox.js

@@ -20,11 +20,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { Keys, classNames, guid, useDir, getTabIndex, dispatchEvent } from '@progress/kendo-react-common';
+import { Keys, classNames, guid, useDir, getTabIndex, dispatchEvent, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { useLocalization } from '@progress/kendo-react-intl';
 import { messages, checkboxValidation, checkboxOptionalText } from './../messages';
+/**
+ * Represents the PropsContext of the `Checkbox` component.
+ * Used for global configuration of all `Checkbox` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export var CheckboxPropsContext = createPropsContext();
 /**
  * Represents the [KendoReact Checkbox component]({% slug overview_checkbox %}).
  *
@@ -38,8 +45,9 @@ import { messages, checkboxValidation, checkboxOptionalText } from './../message
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export var Checkbox = React.forwardRef(function (props, target) {
+export var Checkbox = React.forwardRef(function (directProps, target) {
     validatePackage(packageMetadata);
+    var props = usePropsContext(CheckboxPropsContext, directProps);
     var _a = props, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, checked = _a.checked, className = _a.className, children = _a.children, defaultChecked = _a.defaultChecked, disabled = _a.disabled, defaultValue = _a.defaultValue, id = _a.id, label = _a.label, labelPlacement = _a.labelPlacement, name = _a.name, labelOptional = _a.labelOptional, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, tabIndex = _a.tabIndex, value = _a.value, required = _a.required, valid = _a.valid, validationMessage = _a.validationMessage, validityStyles = _a.validityStyles, 
     // Removed to support direct use in Form Field component
     visited = _a.visited, touched = _a.touched, modified = _a.modified, others = __rest(_a, ["ariaDescribedBy", "ariaLabelledBy", "checked", "className", "children", "defaultChecked", "disabled", "defaultValue", "id", "label", "labelPlacement", "name", "labelOptional", "onChange", "onFocus", "onBlur", "tabIndex", "value", "required", "valid", "validationMessage", "validityStyles", "visited", "touched", "modified"]);

package/dist/es/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/es/colors/ColorGradient.js

@@ -13,7 +13,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { Draggable, guid, classNames, focusFirstFocusableChild, getTabIndex } from '@progress/kendo-react-common';
+import { Draggable, guid, classNames, focusFirstFocusableChild, getTabIndex, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Slider } from './../main';
@@ -25,22 +25,10 @@ import { ColorContrastLabels } from './ColorContrastLabels';
 import { ColorContrastSvg } from './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
@@ -129,23 +117,23 @@ var ColorGradient = /** @class */ (function (_super) {
         };
         validatePackage(packageMetadata);
         var value = props.value || props.defaultValue || parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
-        _this.state = Object.assign({}, ColorGradient.getStateFromValue(value), { isFirstRender: true, guid: guid() });
+        _this.state = Object.assign({}, ColorGradientWithoutContext.getStateFromValue(value), { isFirstRender: true, guid: 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 });
@@ -154,13 +142,13 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.prototype.componentWillUnmount = function () {
+    ColorGradientWithoutContext.prototype.componentWillUnmount = function () {
         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);
         }
@@ -168,7 +156,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();
@@ -182,7 +170,7 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.prototype.handleHsvaChange = function (hsva, syntheticEvent, nativeEvent) {
+    ColorGradientWithoutContext.prototype.handleHsvaChange = function (hsva, syntheticEvent, nativeEvent) {
         var value = getColorFromHSV(hsva);
         if (this.isUncontrolled) {
             var hex = parseColor(value, 'hex');
@@ -196,7 +184,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 });
         }
@@ -204,7 +192,7 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.getStateFromValue = function (value, componentGuid) {
+    ColorGradientWithoutContext.getStateFromValue = function (value, componentGuid) {
         if (!isPresent(parseColor(value, 'hex'))) {
             // Validate/sanitize the input.
             value = DEFAULT_SELECTED_COLOR;
@@ -218,12 +206,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
          */
@@ -236,13 +224,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 = 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: getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
@@ -259,10 +247,11 @@ var ColorGradient = /** @class */ (function (_super) {
             React.createElement(ColorInput, { 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, { bgColor: 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,
@@ -278,9 +267,35 @@ var ColorGradient = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorGradient.defaultProps = {
+    ColorGradientWithoutContext.defaultProps = {
         opacity: true
     };
-    return ColorGradient;
+    return ColorGradientWithoutContext;
 }(React.Component));
-export { ColorGradient };
+export { 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.
+ */
+export var ColorGradientPropsContext = 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'));
+ * ```
+ */
+export var ColorGradient = withPropsContext(ColorGradientPropsContext, ColorGradientWithoutContext);
+ColorGradient.displayName = 'KendoReactColorGradient';

package/dist/es/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/es/colors/ColorPalette.js

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { ColorPaletteService } from './utils/color-palette.service';
-import { classNames, Keys, dispatchEvent, guid, getTabIndex } from '@progress/kendo-react-common';
+import { classNames, Keys, dispatchEvent, guid, getTabIndex, withPropsContext, createPropsContext } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models/palette-presets';
@@ -32,22 +32,10 @@ export var DEFAULT_COLUMNS_COUNT = 10;
  * @hidden
  */
 export var 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
@@ -112,7 +100,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 ColorPaletteService();
@@ -135,7 +123,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) {
@@ -151,7 +139,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) });
@@ -160,30 +148,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) {
         dispatchEvent(this.props.onChange, event, this, { value: value, rgbaValue: 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 = PALETTEPRESETS[this.props.palette];
             if (isPresent(preset)) {
@@ -200,13 +188,13 @@ var ColorPalette = /** @class */ (function (_super) {
             return { colors: this.props.palette || [], columns: this.props.columns || 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;
@@ -225,14 +213,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,
@@ -248,10 +237,35 @@ var ColorPalette = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ColorPalette.defaultProps = {
+    ColorPaletteWithoutContext.defaultProps = {
         palette: DEFAULT_PRESET,
         tileSize: DEFAULT_TILE_SIZE
     };
-    return ColorPalette;
+    return ColorPaletteWithoutContext;
 }(React.Component));
-export { ColorPalette };
+export { 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.
+ */
+export var ColorPalettePropsContext = 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'));
+ * ```
+ */
+export var ColorPalette = withPropsContext(ColorPalettePropsContext, ColorPaletteWithoutContext);
+ColorPalette.displayName = 'KendoReactColorPalette';

package/dist/es/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/es/colors/ColorPicker.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys, useDir, getTabIndex } from '@progress/kendo-react-common';
+import { classNames, Keys, useDir, getTabIndex, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Picker } from './Picker';
@@ -36,6 +36,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.
+ */
+export var ColorPickerPropsContext = createPropsContext();
 /**
  * Represents the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
  *
@@ -49,8 +56,9 @@ var isControlled = function (prop) {
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export var ColorPicker = React.forwardRef(function (props, target) {
+export var ColorPicker = React.forwardRef(function (directProps, target) {
     validatePackage(packageMetadata);
+    var props = usePropsContext(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/es/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 {};