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

package/dist/es/timepicker/TimePicker.js

@@ -35,7 +35,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Popup } from '@progress/kendo-react-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { classNames, guid, Keys, AsyncFocusBlur } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -45,9 +45,10 @@ import { TimeSelector } from './TimeSelector';
 import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME, setTime } from '../utils';
 import { isInRange, isSmallerThanMin, isBiggerThanMax } from './utils';
 import { PickerFloatingLabel } from '../hooks/usePickerFloatingLabel';
-var TimePicker = /** @class */ (function (_super) {
-    __extends(TimePicker, _super);
-    function TimePicker(props) {
+/** @hidden */
+var TimePickerWithoutContext = /** @class */ (function (_super) {
+    __extends(TimePickerWithoutContext, _super);
+    function TimePickerWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         _this._popupId = guid();
         _this._element = null;
@@ -137,8 +138,8 @@ var TimePicker = /** @class */ (function (_super) {
         };
         validatePackage(packageMetadata);
         _this.state = {
-            value: _this.props.defaultValue || TimePicker.defaultProps.defaultValue,
-            show: _this.props.defaultShow || TimePicker.defaultProps.defaultShow,
+            value: _this.props.defaultValue || TimePickerWithoutContext.defaultProps.defaultValue,
+            show: _this.props.defaultShow || TimePickerWithoutContext.defaultProps.defaultShow,
             focused: false
         };
         _this.normalizeTime = _this.normalizeTime.bind(_this);
@@ -147,7 +148,7 @@ var TimePicker = /** @class */ (function (_super) {
         _this.mergeTime = _this.mergeTime.bind(_this);
         return _this;
     }
-    Object.defineProperty(TimePicker.prototype, "element", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "element", {
         /**
          * Gets the wrapping element of the TimePicker.
          */
@@ -157,7 +158,7 @@ var TimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "dateInput", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "dateInput", {
         /**
          * Gets the DateInput component inside the TimePicker component.
          */
@@ -167,7 +168,7 @@ var TimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "timeSelector", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "timeSelector", {
         /**
          * Gets the TimeSelector component inside the TimePicker component.
          */
@@ -177,7 +178,7 @@ var TimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "value", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "value", {
         /**
          * Gets the value of the TimePicker.
          */
@@ -192,7 +193,7 @@ var TimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "show", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "show", {
         /**
          * Gets the popup state of the TimeSelector.
          */
@@ -206,7 +207,7 @@ var TimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "name", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "name", {
         /**
          * Gets the `name` property of the TimePicker.
          */
@@ -216,7 +217,7 @@ var TimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "validity", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "validity", {
         /**
          * Represents the validity state into which the TimePicker is set.
          */
@@ -239,54 +240,54 @@ var TimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "validityStyles", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "validityStyles", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.validityStyles !== undefined
                 ? this.props.validityStyles
-                : TimePicker.defaultProps.validityStyles;
+                : TimePickerWithoutContext.defaultProps.validityStyles;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "required", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "required", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.required !== undefined
                 ? this.props.required
-                : TimePicker.defaultProps.required;
+                : TimePickerWithoutContext.defaultProps.required;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "popupSettings", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "popupSettings", {
         get: function () {
-            return this.props.popupSettings || TimePicker.defaultProps.popupSettings;
+            return this.props.popupSettings || TimePickerWithoutContext.defaultProps.popupSettings;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "min", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "min", {
         get: function () {
-            return this.props.min !== undefined ? this.props.min : TimePicker.defaultProps.min;
+            return this.props.min !== undefined ? this.props.min : TimePickerWithoutContext.defaultProps.min;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "max", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "max", {
         get: function () {
-            return this.props.max !== undefined ? this.props.max : TimePicker.defaultProps.max;
+            return this.props.max !== undefined ? this.props.max : TimePickerWithoutContext.defaultProps.max;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TimePicker.prototype, "dateInputComp", {
+    Object.defineProperty(TimePickerWithoutContext.prototype, "dateInputComp", {
         get: function () {
-            return this.props.dateInput || TimePicker.defaultProps.dateInput;
+            return this.props.dateInput || TimePickerWithoutContext.defaultProps.dateInput;
         },
         enumerable: true,
         configurable: true
@@ -294,7 +295,7 @@ var TimePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    TimePicker.prototype.componentDidMount = function () {
+    TimePickerWithoutContext.prototype.componentDidMount = function () {
         if (this.show) {
             // If defaultShow is true during the initial render, the popup is not aligned.
             this.forceUpdate();
@@ -303,13 +304,13 @@ var TimePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    TimePicker.prototype.componentWillUnmount = function () {
+    TimePickerWithoutContext.prototype.componentWillUnmount = function () {
         clearTimeout(this.nextTickId);
     };
     /**
      * @hidden
      */
-    TimePicker.prototype.componentDidUpdate = function () {
+    TimePickerWithoutContext.prototype.componentDidUpdate = function () {
         if (this._timeSelector && this.show && !this.prevShow) {
             this._timeSelector.focusActiveList();
         }
@@ -325,7 +326,7 @@ var TimePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    TimePicker.prototype.render = function () {
+    TimePickerWithoutContext.prototype.render = function () {
         var _this = this;
         var _a = this.props, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, className = _a.className, format = _a.format, formatPlaceholder = _a.formatPlaceholder, smoothScroll = _a.smoothScroll, width = _a.width, name = _a.name, steps = _a.steps, cancelButton = _a.cancelButton, nowButton = _a.nowButton, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
         var _b = this.popupSettings, popupClass = _b.popupClass, otherPopupSettings = __rest(_b, ["popupClass"]);
@@ -391,28 +392,32 @@ var TimePicker = /** @class */ (function (_super) {
             ? (React.createElement(PickerFloatingLabel, { dateInput: this._dateInput, label: this.props.label, editorId: id, editorValid: isValid, editorDisabled: this.props.disabled, children: timepicker, style: { width: this.props.width } }))
             : timepicker;
     };
-    TimePicker.prototype.normalizeTime = function (date) {
+    TimePickerWithoutContext.prototype.normalizeTime = function (date) {
         return setTime(MIDNIGHT_DATE, date);
     };
-    TimePicker.prototype.setShow = function (show) {
+    TimePickerWithoutContext.prototype.setShow = function (show) {
         if (this.show === show) {
             return;
         }
         this.setState({ show: show });
     };
-    TimePicker.prototype.nextTick = function (f) {
+    TimePickerWithoutContext.prototype.nextTick = function (f) {
         // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
         // XXX: https://github.com/facebook/react/issues/3751
         clearTimeout(this.nextTickId);
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
-    TimePicker.prototype.mergeTime = function (value) {
+    TimePickerWithoutContext.prototype.mergeTime = function (value) {
         return this.value && value ? setTime(this.value, value) : value;
     };
     /**
      * @hidden
      */
-    TimePicker.propTypes = {
+    TimePickerWithoutContext.displayName = 'TimePicker';
+    /**
+     * @hidden
+     */
+    TimePickerWithoutContext.propTypes = {
         className: PropTypes.string,
         cancelButton: PropTypes.bool,
         nowButton: PropTypes.bool,
@@ -480,7 +485,7 @@ var TimePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    TimePicker.defaultProps = {
+    TimePickerWithoutContext.defaultProps = {
         defaultShow: false,
         defaultValue: null,
         disabled: false,
@@ -494,7 +499,23 @@ var TimePicker = /** @class */ (function (_super) {
         validityStyles: true,
         dateInput: DateInput
     };
-    return TimePicker;
+    return TimePickerWithoutContext;
 }(React.Component));
-export { TimePicker };
-registerForLocalization(TimePicker);
+export { TimePickerWithoutContext };
+/**
+ * Represents the PropsContext of the `TimePicker` component.
+ * Used for global configuration of all `TimePicker` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export var TimePickerPropsContext = createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare */
+/**
+ * Represents the KendoReact TimePicker Component.
+ *
+ * Accepts properties of type [TimePicker]({% slug api_dateinputs_timepickerprops %}).
+ * Obtaining the `ref` returns an object of type [TimePickerHandle]({% slug api_dateinputs_timepickerhandle %}).
+ */
+export var TimePicker = withPropsContext(TimePickerPropsContext, TimePickerWithoutContext);
+TimePicker.displayName = 'KendoReactTimePicker';
+registerForLocalization(TimePickerWithoutContext);

package/dist/es/utils.d.ts

@@ -4,6 +4,10 @@ import { CalendarViewEnum } from './calendar/models/CalendarViewEnum';
  * @hidden
  */
 export declare const isEqualRange: (initial: SelectionRange, updated: SelectionRange) => boolean;
+/**
+ * @hidden
+ */
+export declare function nullable(subRequirement: any): any;
 /**
  * @hidden
  */

package/dist/es/utils.js

@@ -12,6 +12,26 @@ export var isEqualRange = function (initial, updated) {
     }
     return isEqual(initialStart, updatedStart) && isEqual(initialEnd, updatedEnd);
 };
+// Polyfill for PropTypes.null
+/**
+ * @hidden
+ */
+export function nullable(subRequirement) {
+    var check = function (required, props, key) {
+        var rest = [];
+        for (var _i = 3; _i < arguments.length; _i++) {
+            rest[_i - 3] = arguments[_i];
+        }
+        if (props[key] === null) {
+            return null;
+        }
+        var sub = required ? subRequirement.isRequired : subRequirement;
+        return sub.apply(void 0, [props, key].concat(rest));
+    };
+    var fn = check.bind(null, false);
+    fn.isRequired = check.bind(null, true);
+    return fn;
+}
 /**
  * @hidden
  */

package/dist/npm/calendar/components/Calendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { CalendarViewEnum, CalendarSettings } from '../models';
+import { CalendarViewEnum, ActiveView, CalendarSettings } from '../models';
 import { DOMService, ScrollSyncService } from '../services';
 /**
  * The arguments for the `change` event of the Calendar. The generic argument sets the target type of the event. Defaults to `Calendar`.
@@ -26,7 +26,7 @@ export interface CalendarChangeEvent<T = Calendar> {
 /**
  * Represents the props of the [KendoReact Calendar component]({% slug overview_calendar %}). The generic argument is passed to the `onChange` property and is used as a target in the [`CalendarChangeEvent`]({% slug api_dateinputs_calendarchangeevent %}) interface.
  */
-export interface CalendarProps<T = Calendar> extends CalendarSettings {
+export interface CalendarProps<T = any> extends CalendarSettings {
     /** @hidden */
     _ref?: (instance: {
         element: HTMLDivElement | null;
@@ -52,13 +52,18 @@ export interface CalendarState {
     activeView: CalendarViewEnum;
     focusedDate: Date;
 }
-export declare class Calendar extends React.Component<CalendarProps, CalendarState> {
+/** @hidden */
+export declare class CalendarWithoutContext extends React.Component<CalendarProps, CalendarState> {
+    /**
+     * @hidden
+     */
+    static displayName: string;
     /**
      * @hidden
      */
     static propTypes: {
         className: PropTypes.Requireable<string>;
-        defaultActiveView: PropTypes.Requireable<string>;
+        defaultActiveView: PropTypes.Requireable<ActiveView>;
         defaultValue: PropTypes.Requireable<Date>;
         disabled: PropTypes.Requireable<boolean>;
         focusedDate: PropTypes.Requireable<Date>;
@@ -75,8 +80,8 @@ export declare class Calendar extends React.Component<CalendarProps, CalendarSta
         tabIndex: PropTypes.Requireable<number>;
         value: PropTypes.Requireable<Date>;
         weekNumber: PropTypes.Requireable<boolean>;
-        topView: (props: CalendarProps<Calendar>, propName: string, componentName: string) => Error;
-        bottomView: (props: CalendarProps<Calendar>, propName: string, componentName: string) => Error;
+        topView: (props: CalendarProps<any>, propName: string, componentName: string) => Error;
+        bottomView: (props: CalendarProps<any>, propName: string, componentName: string) => Error;
     };
     /**
      * @hidden
@@ -86,11 +91,11 @@ export declare class Calendar extends React.Component<CalendarProps, CalendarSta
         min: Date;
         max: Date;
         navigation: boolean;
-        defaultActiveView: string;
+        defaultActiveView: ActiveView;
         defaultValue: any;
         smoothScroll: boolean;
-        topView: string;
-        bottomView: string;
+        topView: ActiveView;
+        bottomView: ActiveView;
     };
     protected dom: DOMService;
     protected scrollSyncService: ScrollSyncService;
@@ -148,3 +153,32 @@ export declare class Calendar extends React.Component<CalendarProps, CalendarSta
     private handleMouseDown;
     private handleClick;
 }
+/**
+ * Represents the PropsContext of the `Calendar` component.
+ * Used for global configuration of all `Calendar` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export declare const CalendarPropsContext: React.Context<(p: CalendarProps<any>) => CalendarProps<any>>;
+/**
+ * Represent the `ref` of the Calendar component.
+ */
+export interface CalendarHandle extends Pick<CalendarWithoutContext, keyof CalendarWithoutContext> {
+    /**
+     * Returns the HTML element of the Calendar component.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Returns the `value` of the Calendar component.
+     */
+    value: Date | null;
+}
+/** @hidden */
+export declare type Calendar = CalendarHandle;
+/**
+ * Represents the KendoReact Calendar Component.
+ *
+ * Accepts properties of type [CalendarProps]({% slug api_dateinputs_calendarprops %}).
+ * Obtaining the `ref` returns an object of type [CalendarHandle]({% slug api_dateinputs_calendarhandle %}).
+ */
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps<any> & React.RefAttributes<any>>;

package/dist/npm/calendar/components/Calendar.js

@@ -29,7 +29,6 @@ var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_date_math_1 = require("@progress/kendo-date-math");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../../package-metadata");
 var ViewList_1 = require("./ViewList");
 var Navigation_1 = require("./Navigation");
@@ -39,8 +38,8 @@ var utils_1 = require("../../utils");
 var services_1 = require("../services");
 var virtualizationProp = function (x) { return x ? x.virtualization : null; };
 var calculateValue = function (min, max, stateValue, propValue) {
-    if (min === void 0) { min = Calendar.defaultProps.min; }
-    if (max === void 0) { max = Calendar.defaultProps.max; }
+    if (min === void 0) { min = CalendarWithoutContext.defaultProps.min; }
+    if (max === void 0) { max = CalendarWithoutContext.defaultProps.max; }
     return propValue !== undefined
         ? propValue !== null && utils_1.isInRange(kendo_date_math_1.getDate(propValue), min, max)
             ? propValue
@@ -49,9 +48,10 @@ var calculateValue = function (min, max, stateValue, propValue) {
             ? stateValue
             : null;
 };
-var Calendar = /** @class */ (function (_super) {
-    __extends(Calendar, _super);
-    function Calendar(props) {
+/** @hidden */
+var CalendarWithoutContext = /** @class */ (function (_super) {
+    __extends(CalendarWithoutContext, _super);
+    function CalendarWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         _this.cellUID = kendo_react_common_1.guid();
         _this.id = kendo_react_common_1.guid();
@@ -171,8 +171,8 @@ var Calendar = /** @class */ (function (_super) {
                 _this._element.focus({ preventScroll: true });
             }
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-        var value = calculateValue(_this.min, _this.max, _this.props.defaultValue || Calendar.defaultProps.defaultValue, _this.props.value);
+        kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
+        var value = calculateValue(_this.min, _this.max, _this.props.defaultValue || CalendarWithoutContext.defaultProps.defaultValue, _this.props.value);
         _this.state = {
             value: value,
             activeView: utils_1.viewInRange(models_1.CalendarViewEnum[props.defaultActiveView], _this.bottomView, _this.topView),
@@ -186,7 +186,7 @@ var Calendar = /** @class */ (function (_super) {
         _this.oldValue = value;
         return _this;
     }
-    Object.defineProperty(Calendar.prototype, "element", {
+    Object.defineProperty(CalendarWithoutContext.prototype, "element", {
         /**
          * Gets the wrapping element of the Calendar.
          */
@@ -196,7 +196,7 @@ var Calendar = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(Calendar.prototype, "value", {
+    Object.defineProperty(CalendarWithoutContext.prototype, "value", {
         /**
          * Gets the value of the Calendar.
          */
@@ -210,38 +210,38 @@ var Calendar = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(Calendar.prototype, "min", {
+    Object.defineProperty(CalendarWithoutContext.prototype, "min", {
         get: function () {
             return kendo_date_math_1.getDate(this.props.min !== undefined
                 ? this.props.min
-                : Calendar.defaultProps.min);
+                : CalendarWithoutContext.defaultProps.min);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(Calendar.prototype, "max", {
+    Object.defineProperty(CalendarWithoutContext.prototype, "max", {
         get: function () {
             return kendo_date_math_1.getDate(this.props.max !== undefined
                 ? this.props.max
-                : Calendar.defaultProps.max);
+                : CalendarWithoutContext.defaultProps.max);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(Calendar.prototype, "bottomView", {
+    Object.defineProperty(CalendarWithoutContext.prototype, "bottomView", {
         get: function () {
             return models_1.CalendarViewEnum[this.props.bottomView !== undefined
                 ? this.props.bottomView
-                : Calendar.defaultProps.bottomView];
+                : CalendarWithoutContext.defaultProps.bottomView];
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(Calendar.prototype, "topView", {
+    Object.defineProperty(CalendarWithoutContext.prototype, "topView", {
         get: function () {
             return models_1.CalendarViewEnum[this.props.topView !== undefined
                 ? this.props.topView
-                : Calendar.defaultProps.topView];
+                : CalendarWithoutContext.defaultProps.topView];
         },
         enumerable: true,
         configurable: true
@@ -249,7 +249,7 @@ var Calendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    Calendar.prototype.componentDidMount = function () {
+    CalendarWithoutContext.prototype.componentDidMount = function () {
         var _this = this;
         // Async calculation of height to avoid animation cancellation
         Promise.resolve().then(function () {
@@ -265,7 +265,7 @@ var Calendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    Calendar.prototype.componentDidUpdate = function (_, prevState) {
+    CalendarWithoutContext.prototype.componentDidUpdate = function (_, prevState) {
         if (prevState.activeView !== this.state.activeView) {
             this.scrollSyncService.configure(this.state.activeView);
         }
@@ -278,7 +278,7 @@ var Calendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    Calendar.prototype.render = function () {
+    CalendarWithoutContext.prototype.render = function () {
         var _this = this;
         if (this.props._ref) {
             this.props._ref(this);
@@ -288,9 +288,9 @@ var Calendar = /** @class */ (function (_super) {
             : this.value !== this.oldValue;
         var activeView = utils_1.viewInRange(this.state.activeView, models_1.CalendarViewEnum[this.props.bottomView !== undefined
             ? this.props.bottomView
-            : Calendar.defaultProps.bottomView], models_1.CalendarViewEnum[this.props.topView !== undefined
+            : CalendarWithoutContext.defaultProps.bottomView], models_1.CalendarViewEnum[this.props.topView !== undefined
             ? this.props.topView
-            : Calendar.defaultProps.topView]);
+            : CalendarWithoutContext.defaultProps.topView]);
         var value = calculateValue(this.min, this.max, this.value, this.value);
         var sanitizedValue = value ? kendo_date_math_1.getDate(value) : null;
         this.focusedDate = kendo_date_math_1.getDate(utils_1.dateInRange(didValueChange && value !== null
@@ -313,7 +313,11 @@ var Calendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    Calendar.propTypes = {
+    CalendarWithoutContext.displayName = 'Calendar';
+    /**
+     * @hidden
+     */
+    CalendarWithoutContext.propTypes = {
         className: PropTypes.string,
         defaultActiveView: PropTypes.oneOf(['month', 'year', 'decade', 'century']),
         defaultValue: PropTypes.instanceOf(Date),
@@ -352,7 +356,7 @@ var Calendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    Calendar.defaultProps = {
+    CalendarWithoutContext.defaultProps = {
         disabled: false,
         min: defaults_1.MIN_DATE,
         max: defaults_1.MAX_DATE,
@@ -363,7 +367,23 @@ var Calendar = /** @class */ (function (_super) {
         topView: 'century',
         bottomView: 'month'
     };
-    return Calendar;
+    return CalendarWithoutContext;
 }(React.Component));
-exports.Calendar = Calendar;
-kendo_react_intl_1.registerForIntl(Calendar);
+exports.CalendarWithoutContext = CalendarWithoutContext;
+/**
+ * Represents the PropsContext of the `Calendar` component.
+ * Used for global configuration of all `Calendar` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+exports.CalendarPropsContext = kendo_react_common_1.createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the KendoReact Calendar Component.
+ *
+ * Accepts properties of type [CalendarProps]({% slug api_dateinputs_calendarprops %}).
+ * Obtaining the `ref` returns an object of type [CalendarHandle]({% slug api_dateinputs_calendarhandle %}).
+ */
+exports.Calendar = kendo_react_common_1.withPropsContext(exports.CalendarPropsContext, CalendarWithoutContext);
+exports.Calendar.displayName = 'KendoReactCalendar';
+kendo_react_intl_1.registerForIntl(CalendarWithoutContext);