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

package/dist/es/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/es/calendar/components/Calendar.js

@@ -24,10 +24,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, guid, Keys } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, validatePackage, withPropsContext, createPropsContext } from '@progress/kendo-react-common';
 import { cloneDate, getDate, isEqualDate } from '@progress/kendo-date-math';
 import { provideIntlService, registerForIntl } from '@progress/kendo-react-intl';
-import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../../package-metadata';
 import { ViewList } from './ViewList';
 import { Navigation } from './Navigation';
@@ -37,8 +36,8 @@ import { getToday, dateInRange, isInRange, viewInRange } from '../../utils';
 import { BusViewService, DOMService, ScrollSyncService, NavigationService } from '../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 && isInRange(getDate(propValue), min, max)
             ? propValue
@@ -47,9 +46,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 = guid();
         _this.id = guid();
@@ -170,7 +170,7 @@ var Calendar = /** @class */ (function (_super) {
             }
         };
         validatePackage(packageMetadata);
-        var value = calculateValue(_this.min, _this.max, _this.props.defaultValue || Calendar.defaultProps.defaultValue, _this.props.value);
+        var value = calculateValue(_this.min, _this.max, _this.props.defaultValue || CalendarWithoutContext.defaultProps.defaultValue, _this.props.value);
         _this.state = {
             value: value,
             activeView: viewInRange(CalendarViewEnum[props.defaultActiveView], _this.bottomView, _this.topView),
@@ -184,7 +184,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.
          */
@@ -194,7 +194,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.
          */
@@ -208,38 +208,38 @@ var Calendar = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(Calendar.prototype, "min", {
+    Object.defineProperty(CalendarWithoutContext.prototype, "min", {
         get: function () {
             return 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 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 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 CalendarViewEnum[this.props.topView !== undefined
                 ? this.props.topView
-                : Calendar.defaultProps.topView];
+                : CalendarWithoutContext.defaultProps.topView];
         },
         enumerable: true,
         configurable: true
@@ -247,7 +247,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 () {
@@ -263,7 +263,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);
         }
@@ -276,7 +276,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);
@@ -286,9 +286,9 @@ var Calendar = /** @class */ (function (_super) {
             : this.value !== this.oldValue;
         var activeView = viewInRange(this.state.activeView, CalendarViewEnum[this.props.bottomView !== undefined
             ? this.props.bottomView
-            : Calendar.defaultProps.bottomView], CalendarViewEnum[this.props.topView !== undefined
+            : CalendarWithoutContext.defaultProps.bottomView], 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 ? getDate(value) : null;
         this.focusedDate = getDate(dateInRange(didValueChange && value !== null
@@ -311,7 +311,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),
@@ -350,7 +354,7 @@ var Calendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    Calendar.defaultProps = {
+    CalendarWithoutContext.defaultProps = {
         disabled: false,
         min: MIN_DATE,
         max: MAX_DATE,
@@ -361,7 +365,23 @@ var Calendar = /** @class */ (function (_super) {
         topView: 'century',
         bottomView: 'month'
     };
-    return Calendar;
+    return CalendarWithoutContext;
 }(React.Component));
-export { Calendar };
-registerForIntl(Calendar);
+export { 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.
+ */
+export var CalendarPropsContext = 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 %}).
+ */
+export var Calendar = withPropsContext(CalendarPropsContext, CalendarWithoutContext);
+Calendar.displayName = 'KendoReactCalendar';
+registerForIntl(CalendarWithoutContext);

package/dist/es/calendar/components/MultiViewCalendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { Action, SelectionRange, CalendarViewEnum, SelectionRangeEnd, MultiViewCalendarSettings } from '../models';
+import { Action, ActiveView, SelectionRange, CalendarViewEnum, SelectionRangeEnd, MultiViewCalendarSettings } from '../models';
 /**
  * The arguments for the `onChange` event of the MultiViewCalendar. * The generic argument sets the target type of the event. Defaults to `MultiViewCalendar`.
  */
@@ -13,7 +13,7 @@ export interface MultiViewCalendarChangeEvent<T = MultiViewCalendar> {
 /**
  * Represents the props of the [KendoReact MultiViewCalendar component]({% slug overview_multiviewcalendar %}). The generic argument is passed to the `onChange` property and is used as a target in the [`MultiViewCalendarChangeEvent`]({% slug api_dateinputs_multiviewcalendarchangeevent %}) interface.
  */
-export interface MultiViewCalendarProps<T = MultiViewCalendar> extends MultiViewCalendarSettings {
+export interface MultiViewCalendarProps<T = any> extends MultiViewCalendarSettings {
     /** @hidden */
     _ref?: (instance: {
         element: HTMLDivElement | null;
@@ -39,20 +39,22 @@ export interface MultiViewCalendarState {
     activeView: CalendarViewEnum;
     focusedDate: Date;
 }
-export declare class MultiViewCalendar extends React.Component<MultiViewCalendarProps, MultiViewCalendarState> {
+/** @hidden */
+export declare class MultiViewCalendarWithoutContext extends React.Component<MultiViewCalendarProps, MultiViewCalendarState> {
+    /**
+     * @hidden
+     */
+    static displayName: string;
     /**
      * @hidden
      */
     static propTypes: {
-        activeRangeEnd: PropTypes.Requireable<string>;
+        activeRangeEnd: PropTypes.Requireable<SelectionRangeEnd>;
         allowReverse: PropTypes.Requireable<boolean>;
-        bottomView: PropTypes.Requireable<string>;
+        bottomView: PropTypes.Requireable<ActiveView>;
         className: PropTypes.Requireable<string>;
-        defaultActiveView: PropTypes.Requireable<string>;
-        defaultValue: PropTypes.Requireable<Date | Date[] | PropTypes.InferProps<{
-            start: PropTypes.Requireable<Date>;
-            end: PropTypes.Requireable<Date>;
-        }>>;
+        defaultActiveView: PropTypes.Requireable<ActiveView>;
+        defaultValue: PropTypes.Requireable<any>;
         disabled: PropTypes.Requireable<boolean>;
         focusedDate: PropTypes.Requireable<Date>;
         id: PropTypes.Requireable<string>;
@@ -60,16 +62,13 @@ export declare class MultiViewCalendar extends React.Component<MultiViewCalendar
         ariaDescribedBy: PropTypes.Requireable<string>;
         max: PropTypes.Requireable<Date>;
         min: PropTypes.Requireable<Date>;
-        mode: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<import("../models").MultiViewCalendarMode>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         tabIndex: PropTypes.Requireable<number>;
-        topView: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<Date | Date[] | PropTypes.InferProps<{
-            start: PropTypes.Requireable<Date>;
-            end: PropTypes.Requireable<Date>;
-        }>>;
+        topView: PropTypes.Requireable<ActiveView>;
+        value: PropTypes.Requireable<any>;
         views: (props: any, propName: any, componentName: any) => Error;
         weekNumber: PropTypes.Requireable<boolean>;
     };
@@ -81,11 +80,11 @@ export declare class MultiViewCalendar extends React.Component<MultiViewCalendar
         min: Date;
         max: Date;
         navigation: boolean;
-        defaultActiveView: string;
+        defaultActiveView: ActiveView;
         defaultValue: any;
-        topView: string;
+        topView: ActiveView;
         tabIndex: number;
-        bottomView: string;
+        bottomView: ActiveView;
         views: number;
         allowReverse: boolean;
     };
@@ -165,3 +164,36 @@ export declare class MultiViewCalendar extends React.Component<MultiViewCalendar
     private handleViewChange;
     private handleDateChange;
 }
+/**
+ * Represents the PropsContext of the `MultiViewCalendar` component.
+ * Used for global configuration of all `MultiViewCalendar` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export declare const MultiViewCalendarPropsContext: React.Context<(p: MultiViewCalendarProps<any>) => MultiViewCalendarProps<any>>;
+/**
+ * Represent the `ref` of the MultiViewCalendar component.
+ */
+export interface MultiViewCalendarHandle extends Pick<MultiViewCalendarWithoutContext, keyof MultiViewCalendarWithoutContext> {
+    /**
+     * Returns the HTML element of the MultiViewCalendar component.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Gets the current focused date of the MultiViewCalendar.
+     */
+    focusedDate: Date;
+    /**
+     * Gets the value of the MultiViewCalendar.
+     */
+    value: Date | Date[] | SelectionRange | null;
+}
+/** @hidden */
+export declare type MultiViewCalendar = MultiViewCalendarHandle;
+/**
+ * Represents the KendoReact MultiViewCalendar Component.
+ *
+ * Accepts properties of type [MultiViewCalendarProps]({% slug api_dateinputs_multiviewcalendarprops %}).
+ * Obtaining the `ref` returns an object of type [MultiViewCalendarHandle]({% slug api_dateinputs_multiviewcalendarhandle %}).
+ */
+export declare const MultiViewCalendar: React.ForwardRefExoticComponent<MultiViewCalendarProps<any> & React.RefAttributes<any>>;

package/dist/es/calendar/components/MultiViewCalendar.js

@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { registerForIntl, provideIntlService, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
-import { classNames, guid, Keys } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
 import { cloneDate, isEqualDate, getDate } from '@progress/kendo-date-math';
 import { Button } from '@progress/kendo-react-buttons';
 import { Action, CalendarViewEnum, EMPTY_SELECTIONRANGE } from '../models';
@@ -33,19 +33,19 @@ import { Header } from './Header';
 import { MIN_DATE, MAX_DATE } from '../../defaults';
 import { messages, prevView, nextView } from '../../messages';
 import { BusViewService, NavigationService } from '../services';
-import { dateInRange, isInRange, viewInRange, getToday } from '../../utils';
+import { dateInRange, isInRange, viewInRange, getToday, nullable } from '../../utils';
 import { HorizontalViewList } from './HorizontalViewList';
 import { TodayCommand } from './TodayCommand';
 var extractDateFromValue = function (min, max, value) {
-    if (min === void 0) { min = MultiViewCalendar.defaultProps.min; }
-    if (max === void 0) { max = MultiViewCalendar.defaultProps.max; }
+    if (min === void 0) { min = MultiViewCalendarWithoutContext.defaultProps.min; }
+    if (max === void 0) { max = MultiViewCalendarWithoutContext.defaultProps.max; }
     return value instanceof Date && !Array.isArray(value) && isInRange(getDate(value), min, max)
         ? getDate(value)
         : null;
 };
 var extractMultipleFromValue = function (min, max, value) {
-    if (min === void 0) { min = MultiViewCalendar.defaultProps.min; }
-    if (max === void 0) { max = MultiViewCalendar.defaultProps.max; }
+    if (min === void 0) { min = MultiViewCalendarWithoutContext.defaultProps.min; }
+    if (max === void 0) { max = MultiViewCalendarWithoutContext.defaultProps.max; }
     return Array.isArray(value)
         ? value.filter(function (date) { return isInRange(date, min, max); }).map(function (date) { return getDate(date); })
         : null;
@@ -65,9 +65,10 @@ var extractActiveRange = function (range, single) {
             ? 'end'
             : 'start';
 };
-var MultiViewCalendar = /** @class */ (function (_super) {
-    __extends(MultiViewCalendar, _super);
-    function MultiViewCalendar(props) {
+/** @hidden */
+var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
+    __extends(MultiViewCalendarWithoutContext, _super);
+    function MultiViewCalendarWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         _this.selectedDate = null;
         _this.selectedMultiple = null;
@@ -113,7 +114,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         };
         _this.isListInRange = function (list) {
             return _this.min < list[0]
-                && _this.max > list[Math.max(0, (_this.props.views || MultiViewCalendar.defaultProps.views) - 1)];
+                && _this.max > list[Math.max(0, (_this.props.views || MultiViewCalendarWithoutContext.defaultProps.views) - 1)];
         };
         _this.navigate = function (action) {
             _this.calculateFocusFromValue = false;
@@ -287,7 +288,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         };
         var value = props.value !== undefined
             ? props.value
-            : props.defaultValue || MultiViewCalendar.defaultProps.defaultValue;
+            : props.defaultValue || MultiViewCalendarWithoutContext.defaultProps.defaultValue;
         var selectedDate = extractDateFromValue(_this.min, _this.max, value);
         var selectedMultiple = extractMultipleFromValue(_this.min, _this.max, value);
         var selectedRange = extractRangeFromValue(value);
@@ -307,7 +308,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         _this.lastViewsCount = _this.props.views || HorizontalViewList.defaultProps.views;
         return _this;
     }
-    Object.defineProperty(MultiViewCalendar.prototype, "element", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "element", {
         /**
          * Gets the wrapping element of the MultiViewCalendar component.
          */
@@ -317,7 +318,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendar.prototype, "value", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "value", {
         /**
          * Gets the value of the MultiViewCalendar.
          */
@@ -331,7 +332,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendar.prototype, "focusedDate", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "focusedDate", {
         /**
          * Gets the current focused date of the MultiViewCalendar.
          */
@@ -341,43 +342,43 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendar.prototype, "min", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "min", {
         get: function () {
             return getDate(this.props.min !== undefined
                 ? this.props.min
-                : MultiViewCalendar.defaultProps.min);
+                : MultiViewCalendarWithoutContext.defaultProps.min);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendar.prototype, "max", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "max", {
         get: function () {
             return getDate(this.props.max !== undefined
                 ? this.props.max
-                : MultiViewCalendar.defaultProps.max);
+                : MultiViewCalendarWithoutContext.defaultProps.max);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendar.prototype, "bottomView", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "bottomView", {
         get: function () {
             return CalendarViewEnum[this.props.bottomView !== undefined
                 ? this.props.bottomView
-                : MultiViewCalendar.defaultProps.bottomView];
+                : MultiViewCalendarWithoutContext.defaultProps.bottomView];
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendar.prototype, "topView", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "topView", {
         get: function () {
             return CalendarViewEnum[this.props.topView !== undefined
                 ? this.props.topView
-                : MultiViewCalendar.defaultProps.topView];
+                : MultiViewCalendarWithoutContext.defaultProps.topView];
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendar.prototype, "activeRange", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "activeRange", {
         get: function () {
             return this.props.activeRangeEnd !== undefined
                 ? this.props.activeRangeEnd
@@ -386,7 +387,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendar.prototype, "todayIsInRange", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "todayIsInRange", {
         get: function () {
             return isInRange(getToday(), getDate(this.min), getDate(this.max));
         },
@@ -396,13 +397,13 @@ var MultiViewCalendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    MultiViewCalendar.prototype.componentDidMount = function () {
+    MultiViewCalendarWithoutContext.prototype.componentDidMount = function () {
         this.calculateFocusFromValue = true;
     };
     /**
      * @hidden
      */
-    MultiViewCalendar.prototype.componentDidUpdate = function () {
+    MultiViewCalendarWithoutContext.prototype.componentDidUpdate = function () {
         if (this.calendarViewList) {
             (this.isActive ? this.calendarViewList.focusActiveDate : this.calendarViewList.blurActiveDate)();
         }
@@ -416,7 +417,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    MultiViewCalendar.prototype.render = function () {
+    MultiViewCalendarWithoutContext.prototype.render = function () {
         var _this = this;
         if (this.props._ref) {
             this.props._ref(this);
@@ -464,16 +465,23 @@ var MultiViewCalendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    MultiViewCalendar.propTypes = {
+    MultiViewCalendarWithoutContext.displayName = 'MultiViewCalendar';
+    /**
+     * @hidden
+     */
+    MultiViewCalendarWithoutContext.propTypes = {
         activeRangeEnd: PropTypes.oneOf(['start', 'end']),
         allowReverse: PropTypes.bool,
         bottomView: PropTypes.oneOf(['month', 'year', 'decade', 'century']),
         className: PropTypes.string,
         defaultActiveView: PropTypes.oneOf(['month', 'year', 'decade', 'century']),
         defaultValue: PropTypes.oneOfType([
-            PropTypes.instanceOf(Date),
+            nullable(PropTypes.instanceOf(Date)),
             PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-            PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date) })
+            PropTypes.shape({
+                start: nullable(PropTypes.instanceOf(Date)),
+                end: nullable(PropTypes.instanceOf(Date))
+            })
         ]),
         disabled: PropTypes.bool,
         focusedDate: PropTypes.instanceOf(Date),
@@ -489,9 +497,12 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         tabIndex: PropTypes.number,
         topView: PropTypes.oneOf(['month', 'year', 'decade', 'century']),
         value: PropTypes.oneOfType([
-            PropTypes.instanceOf(Date),
+            nullable(PropTypes.instanceOf(Date)),
             PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-            PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date) })
+            PropTypes.shape({
+                start: nullable(PropTypes.instanceOf(Date).isRequired),
+                end: nullable(PropTypes.instanceOf(Date).isRequired)
+            })
         ]),
         views: function (props, propName, componentName) {
             var views = props[propName];
@@ -506,7 +517,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    MultiViewCalendar.defaultProps = {
+    MultiViewCalendarWithoutContext.defaultProps = {
         disabled: false,
         min: MIN_DATE,
         max: MAX_DATE,
@@ -519,8 +530,24 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         views: 2,
         allowReverse: false
     };
-    return MultiViewCalendar;
+    return MultiViewCalendarWithoutContext;
 }(React.Component));
-export { MultiViewCalendar };
-registerForIntl(MultiViewCalendar);
-registerForLocalization(MultiViewCalendar);
+export { MultiViewCalendarWithoutContext };
+/**
+ * Represents the PropsContext of the `MultiViewCalendar` component.
+ * Used for global configuration of all `MultiViewCalendar` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export var MultiViewCalendarPropsContext = createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the KendoReact MultiViewCalendar Component.
+ *
+ * Accepts properties of type [MultiViewCalendarProps]({% slug api_dateinputs_multiviewcalendarprops %}).
+ * Obtaining the `ref` returns an object of type [MultiViewCalendarHandle]({% slug api_dateinputs_multiviewcalendarhandle %}).
+ */
+export var MultiViewCalendar = withPropsContext(MultiViewCalendarPropsContext, MultiViewCalendarWithoutContext);
+MultiViewCalendar.displayName = 'KendoReactMultiViewCalendar';
+registerForIntl(MultiViewCalendarWithoutContext);
+registerForLocalization(MultiViewCalendarWithoutContext);