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

package/dist/es/datepicker/DatePicker.js

@@ -35,7 +35,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Popup } from '@progress/kendo-react-popup';
 import { getDate, 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 { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { DateInput } from '../dateinput/DateInput';
@@ -47,9 +47,10 @@ import { registerForLocalization, provideLocalizationService } from '@progress/k
 import { ToggleButton } from './ToggleButton';
 import { PickerWrap } from '../common/PickerWrap';
 import { PickerFloatingLabel } from '../hooks/usePickerFloatingLabel';
-var DatePicker = /** @class */ (function (_super) {
-    __extends(DatePicker, _super);
-    function DatePicker(props) {
+/** @hidden */
+var DatePickerWithoutContext = /** @class */ (function (_super) {
+    __extends(DatePickerWithoutContext, _super);
+    function DatePickerWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         _this._popupId = guid();
         _this._element = null;
@@ -139,15 +140,15 @@ var DatePicker = /** @class */ (function (_super) {
         };
         validatePackage(packageMetadata);
         _this.state = {
-            value: _this.props.defaultValue || DatePicker.defaultProps.defaultValue,
-            show: _this.props.defaultShow || DatePicker.defaultProps.defaultShow,
+            value: _this.props.defaultValue || DatePickerWithoutContext.defaultProps.defaultValue,
+            show: _this.props.defaultShow || DatePickerWithoutContext.defaultProps.defaultShow,
             focused: false
         };
         return _this;
     }
-    Object.defineProperty(DatePicker.prototype, "element", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "element", {
         /**
-         * Gets the wrapping element of the DatePicker.
+         * Gets the wrapping element of the DatePickerWithoutContext.
          */
         get: function () {
             return this._element;
@@ -155,7 +156,7 @@ var DatePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "dateInput", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "dateInput", {
         /**
          * Gets the DateInput component inside the DatePicker component.
          */
@@ -165,7 +166,7 @@ var DatePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "calendar", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "calendar", {
         /**
          * Gets the Calendar component inside the DatePicker component.
          */
@@ -175,9 +176,9 @@ var DatePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "value", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "value", {
         /**
-         * Gets the value of the DatePicker.
+         * Gets the value of the DatePickerWithoutContext.
          */
         get: function () {
             var value = this.valueDuringOnChange !== undefined
@@ -190,9 +191,9 @@ var DatePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "show", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "show", {
         /**
-         * Gets the popup state of the DatePicker.
+         * Gets the popup state of the DatePickerWithoutContext.
          */
         get: function () {
             return this.showDuringOnChange !== undefined
@@ -204,9 +205,9 @@ var DatePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "name", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "name", {
         /**
-         * Gets the `name` property of the DatePicker.
+         * Gets the `name` property of the DatePickerWithoutContext.
          */
         get: function () {
             return this.props.name;
@@ -214,60 +215,60 @@ var DatePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "min", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "min", {
         get: function () {
             return this.props.min !== undefined
                 ? this.props.min
-                : DatePicker.defaultProps.min;
+                : DatePickerWithoutContext.defaultProps.min;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "max", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "max", {
         get: function () {
             return this.props.max !== undefined
                 ? this.props.max
-                : DatePicker.defaultProps.max;
+                : DatePickerWithoutContext.defaultProps.max;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "dateInputComp", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "dateInputComp", {
         get: function () {
-            return this.props.dateInput || DatePicker.defaultProps.dateInput;
+            return this.props.dateInput || DatePickerWithoutContext.defaultProps.dateInput;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "toggleButtonComp", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "toggleButtonComp", {
         get: function () {
-            return this.props.toggleButton || DatePicker.defaultProps.toggleButton;
+            return this.props.toggleButton || DatePickerWithoutContext.defaultProps.toggleButton;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "calendarComp", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "calendarComp", {
         get: function () {
-            return this.props.calendar || DatePicker.defaultProps.calendar;
+            return this.props.calendar || DatePickerWithoutContext.defaultProps.calendar;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "popupComp", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "popupComp", {
         get: function () {
-            return this.props.popup || DatePicker.defaultProps.popup;
+            return this.props.popup || DatePickerWithoutContext.defaultProps.popup;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "pickerWrapComp", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "pickerWrapComp", {
         get: function () {
-            return this.props.pickerWrap || DatePicker.defaultProps.pickerWrap;
+            return this.props.pickerWrap || DatePickerWithoutContext.defaultProps.pickerWrap;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "validity", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "validity", {
         /**
          * Represents the validity state into which the DatePicker is set.
          */
@@ -287,26 +288,26 @@ var DatePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "validityStyles", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "validityStyles", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.validityStyles !== undefined
                 ? this.props.validityStyles
-                : DatePicker.defaultProps.validityStyles;
+                : DatePickerWithoutContext.defaultProps.validityStyles;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "required", {
+    Object.defineProperty(DatePickerWithoutContext.prototype, "required", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.required !== undefined
                 ? this.props.required
-                : DatePicker.defaultProps.required;
+                : DatePickerWithoutContext.defaultProps.required;
         },
         enumerable: true,
         configurable: true
@@ -314,7 +315,7 @@ var DatePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DatePicker.prototype.componentDidMount = function () {
+    DatePickerWithoutContext.prototype.componentDidMount = function () {
         if (this.show) {
             // If defaultShow is true during the initial render, the popup is not aligned.
             this.forceUpdate();
@@ -323,7 +324,7 @@ var DatePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DatePicker.prototype.componentDidUpdate = function () {
+    DatePickerWithoutContext.prototype.componentDidUpdate = function () {
         if (this._calendar && this._calendar.element && this.show && !this.prevShow) {
             this._calendar.element.focus({ preventScroll: true });
         }
@@ -339,13 +340,13 @@ var DatePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DatePicker.prototype.componentWillUnmount = function () {
+    DatePickerWithoutContext.prototype.componentWillUnmount = function () {
         clearTimeout(this.nextTickId);
     };
     /**
      * @hidden
      */
-    DatePicker.prototype.render = function () {
+    DatePickerWithoutContext.prototype.render = function () {
         var _this = this;
         var _a = this.props, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, format = _a.format, formatPlaceholder = _a.formatPlaceholder, min = _a.min, max = _a.max, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate, className = _a.className, width = _a.width, name = _a.name, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
         var _b = this.props.popupSettings, popupClass = _b.popupClass, otherPopupSettings = __rest(_b, ["popupClass"]);
@@ -414,16 +415,16 @@ var DatePicker = /** @class */ (function (_super) {
             ? (React.createElement(PickerFloatingLabel, { dateInput: this._dateInput, label: this.props.label, editorId: id, editorValid: isValid, editorDisabled: this.props.disabled, children: datepicker, style: { width: this.props.width } }))
             : datepicker;
     };
-    DatePicker.prototype.setShow = function (show) {
+    DatePickerWithoutContext.prototype.setShow = function (show) {
         if (this.show === show) {
             return;
         }
         this.setState({ show: show });
     };
-    DatePicker.prototype.mergeTime = function (value) {
+    DatePickerWithoutContext.prototype.mergeTime = function (value) {
         return this.value && value ? setTime(value, this.value) : value;
     };
-    DatePicker.prototype.nextTick = function (f) {
+    DatePickerWithoutContext.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
         // Handles multiple focus events happening at the same time.
@@ -433,7 +434,11 @@ var DatePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DatePicker.propTypes = {
+    DatePickerWithoutContext.displayName = 'DatePicker';
+    /**
+     * @hidden
+     */
+    DatePickerWithoutContext.propTypes = {
         className: PropTypes.string,
         defaultShow: PropTypes.bool,
         defaultValue: PropTypes.instanceOf(Date),
@@ -495,7 +500,7 @@ var DatePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DatePicker.defaultProps = {
+    DatePickerWithoutContext.defaultProps = {
         defaultShow: false,
         defaultValue: null,
         dateInput: DateInput,
@@ -513,7 +518,23 @@ var DatePicker = /** @class */ (function (_super) {
         required: false,
         validityStyles: true
     };
-    return DatePicker;
+    return DatePickerWithoutContext;
 }(React.Component));
-export { DatePicker };
-registerForLocalization(DatePicker);
+export { DatePickerWithoutContext };
+/**
+ * Represents the PropsContext of the `DatePicker` component.
+ * Used for global configuration of all `DatePicker` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export var DatePickerPropsContext = createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare */
+/**
+ * Represents the KendoReact DatePicker Component.
+ *
+ * Accepts properties of type [DatePickerProps]({% slug api_dateinputs_datepickerprops %}).
+ * Obtaining the `ref` returns an object of type [DatePickerHandle]({% slug api_dateinputs_datepickerhandle %}).
+ */
+export var DatePicker = withPropsContext(DatePickerPropsContext, DatePickerWithoutContext);
+DatePicker.displayName = 'KendoReactDatePicker';
+registerForLocalization(DatePickerWithoutContext);

package/dist/es/daterangepicker/DateRangePicker.d.ts

@@ -54,7 +54,12 @@ export interface DateRangePickerState {
     show: boolean;
     value: SelectionRange;
 }
-export declare class DateRangePicker extends React.Component<DateRangePickerProps, DateRangePickerState> {
+/** @hidden */
+export declare class DateRangePickerWithoutContext extends React.Component<DateRangePickerProps, DateRangePickerState> {
+    /**
+     * @hidden
+     */
+    static displayName: string;
     /**
      * @hidden
      */
@@ -63,10 +68,7 @@ export declare class DateRangePicker extends React.Component<DateRangePickerProp
         calendarSettings: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<string>;
         defaultShow: PropTypes.Requireable<boolean>;
-        defaultValue: PropTypes.Requireable<PropTypes.InferProps<{
-            start: PropTypes.Requireable<Date>;
-            end: PropTypes.Requireable<Date>;
-        }>>;
+        defaultValue: PropTypes.Validator<SelectionRange>;
         disabled: PropTypes.Requireable<boolean>;
         endDateInputSettings: PropTypes.Requireable<PropTypes.InferProps<{
             value: PropTypes.Requireable<Date>;
@@ -87,7 +89,7 @@ export declare class DateRangePicker extends React.Component<DateRangePickerProp
                 second: PropTypes.Requireable<string>;
                 timeZoneName: PropTypes.Requireable<string>;
             }>>;
-            formatPlaceholder: PropTypes.Requireable<string | PropTypes.InferProps<{
+            formatPlaceholder: PropTypes.Requireable<"narrow" | "short" | "wide" | "formatPattern" | PropTypes.InferProps<{
                 year: PropTypes.Requireable<string>;
                 month: PropTypes.Requireable<string>;
                 day: PropTypes.Requireable<string>;
@@ -116,7 +118,7 @@ export declare class DateRangePicker extends React.Component<DateRangePickerProp
             id: PropTypes.Requireable<string>;
             ariaLabelledBy: PropTypes.Requireable<string>;
             ariaDescribedBy: PropTypes.Requireable<string>;
-            ariaExpanded: PropTypes.Requireable<string | boolean>;
+            ariaExpanded: PropTypes.Requireable<boolean>;
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             validationMessage: PropTypes.Requireable<string>;
             required: PropTypes.Requireable<boolean>;
@@ -155,10 +157,7 @@ export declare class DateRangePicker extends React.Component<DateRangePickerProp
         style: PropTypes.Requireable<any>;
         swapButton: PropTypes.Requireable<any>;
         tabIndex: PropTypes.Requireable<number>;
-        value: PropTypes.Requireable<PropTypes.InferProps<{
-            start: PropTypes.Requireable<Date>;
-            end: PropTypes.Requireable<Date>;
-        }>>;
+        value: PropTypes.Validator<SelectionRange>;
     };
     /**
      * @hidden
@@ -251,3 +250,44 @@ export declare class DateRangePicker extends React.Component<DateRangePickerProp
     private handleKeyDown;
     private handleChange;
 }
+/**
+ * Represents the PropsContext of the `DateRangePicker` component.
+ * Used for global configuration of all `DateRangePicker` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export declare const DateRangePickerPropsContext: React.Context<(p: DateRangePickerProps) => DateRangePickerProps>;
+/**
+ * Represent the `ref` of the DateRangePicker component.
+ */
+export interface DateRangePickerHandle extends Pick<DateRangePickerWithoutContext, keyof DateRangePickerWithoutContext> {
+    /**
+     * Gets the MultiVieCalendar inside the DateRangePicker.
+     */
+    calendar: MultiViewCalendar | null;
+    /**
+     * Returns the HTML element of the DateRangePicker component.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * Gets the end DateInput component inside the DateRangePicker component.
+     */
+    endDateInput: DateInput | null;
+    /**
+     * Gets the start DateInput component inside the DateRangePicker component.
+     */
+    startDateInput: DateInput | null;
+    /**
+     * Gets the value of the DateRangePicker.
+     */
+    value: SelectionRange;
+}
+/** @hidden */
+export declare type DateRangePicker = DateRangePickerHandle;
+/**
+ * Represents the KendoReact DateRangePicker Component.
+ *
+ * Accepts properties of type [DateRangePickerProps]({% slug api_dateinputs_daterangepickerprops %}).
+ * Obtaining the `ref` returns an object of type [DateRangePickerHandle]({% slug api_dateinputs_daterangepickerhandle %}).
+ */
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<any>>;

package/dist/es/daterangepicker/DateRangePicker.js

@@ -26,20 +26,22 @@ 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 { guid, classNames, Keys } from '@progress/kendo-react-common';
+import { guid, classNames, Keys, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
-import { DateInput } from '../dateinput/DateInput';
+import { DateInput, DateInputWithoutContext } from '../dateinput/DateInput';
 import { MultiViewCalendar } from '../calendar/components/MultiViewCalendar';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models';
 import { MIN_DATE, MAX_DATE } from '../defaults';
 import { swapStartEnd, start, end, separator, messages } from '../messages';
 import { Button } from '@progress/kendo-react-buttons';
+import { nullable } from '../utils';
 var WRAPPER_STYLES = { display: 'inline-block' };
-var DateRangePicker = /** @class */ (function (_super) {
-    __extends(DateRangePicker, _super);
-    function DateRangePicker(props) {
+/** @hidden */
+var DateRangePickerWithoutContext = /** @class */ (function (_super) {
+    __extends(DateRangePickerWithoutContext, _super);
+    function DateRangePickerWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         _this._element = null;
         _this._wrapper = null;
@@ -193,8 +195,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         };
         validatePackage(packageMetadata);
         _this.state = {
-            show: _this.props.show || _this.props.defaultShow || DateRangePicker.defaultProps.defaultShow,
-            value: _this.props.value || _this.props.defaultValue || DateRangePicker.defaultProps.defaultValue
+            show: _this.props.show || _this.props.defaultShow || DateRangePickerWithoutContext.defaultProps.defaultShow,
+            value: _this.props.value || _this.props.defaultValue || DateRangePickerWithoutContext.defaultProps.defaultValue
         };
         _this.nextTick = _this.nextTick.bind(_this);
         _this.setShow = _this.setShow.bind(_this);
@@ -202,7 +204,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         _this.focusDateInputElement = _this.focusDateInputElement.bind(_this);
         return _this;
     }
-    Object.defineProperty(DateRangePicker.prototype, "element", {
+    Object.defineProperty(DateRangePickerWithoutContext.prototype, "element", {
         /**
          * Gets the wrapping element of the DateRangePicker.
          */
@@ -212,7 +214,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateRangePicker.prototype, "startDateInput", {
+    Object.defineProperty(DateRangePickerWithoutContext.prototype, "startDateInput", {
         /**
          * Gets the start DateInput component inside the DatePicker component.
          */
@@ -222,7 +224,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateRangePicker.prototype, "endDateInput", {
+    Object.defineProperty(DateRangePickerWithoutContext.prototype, "endDateInput", {
         /**
          * Gets the end DateInput component inside the DatePicker component.
          */
@@ -232,7 +234,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateRangePicker.prototype, "calendar", {
+    Object.defineProperty(DateRangePickerWithoutContext.prototype, "calendar", {
         /**
          * Gets the MultiVieCalendar inside the DateRangePicker.
          */
@@ -242,7 +244,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateRangePicker.prototype, "value", {
+    Object.defineProperty(DateRangePickerWithoutContext.prototype, "value", {
         /**
          * Gets the value of the DateRangePicker.
          */
@@ -257,7 +259,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateRangePicker.prototype, "show", {
+    Object.defineProperty(DateRangePickerWithoutContext.prototype, "show", {
         /**
          * Gets the popup state of the DateRangePicker.
          */
@@ -271,20 +273,20 @@ var DateRangePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateRangePicker.prototype, "min", {
+    Object.defineProperty(DateRangePickerWithoutContext.prototype, "min", {
         get: function () {
             return this.props.min !== undefined
                 ? this.props.min
-                : DateRangePicker.defaultProps.min;
+                : DateRangePickerWithoutContext.defaultProps.min;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateRangePicker.prototype, "max", {
+    Object.defineProperty(DateRangePickerWithoutContext.prototype, "max", {
         get: function () {
             return this.props.max !== undefined
                 ? this.props.max
-                : DateRangePicker.defaultProps.max;
+                : DateRangePickerWithoutContext.defaultProps.max;
         },
         enumerable: true,
         configurable: true
@@ -292,7 +294,7 @@ var DateRangePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateRangePicker.prototype.componentDidMount = function () {
+    DateRangePickerWithoutContext.prototype.componentDidMount = function () {
         if (this.show) {
             // If defaultShow is true during the initial render, the popup is not aligned.
             this.forceUpdate();
@@ -301,7 +303,7 @@ var DateRangePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateRangePicker.prototype.componentDidUpdate = function () {
+    DateRangePickerWithoutContext.prototype.componentDidUpdate = function () {
         if (this.shouldFocusCalendar) {
             this.focusCalendarElement();
         }
@@ -314,13 +316,13 @@ var DateRangePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateRangePicker.prototype.componentWillUnmount = function () {
+    DateRangePickerWithoutContext.prototype.componentWillUnmount = function () {
         clearTimeout(this.nextTickId);
     };
     /**
      * @hidden
      */
-    DateRangePicker.prototype.render = function () {
+    DateRangePickerWithoutContext.prototype.render = function () {
         var _this = this;
         var value = this.value || EMPTY_SELECTIONRANGE;
         var startDateInputId = (this.props.startDateInputSettings || {}).id || this._startInputId;
@@ -373,7 +375,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 ? React.createElement(this.props.popup, __assign({}, popupProps), calendar)
                 : React.createElement(Popup, __assign({}, popupProps), calendar)));
     };
-    DateRangePicker.prototype.focusDateInputElement = function () {
+    DateRangePickerWithoutContext.prototype.focusDateInputElement = function () {
         if (!document || !this.startDateInput || !this.startDateInput.element
             || !this.endDateInput || !this.endDateInput.element) {
             return;
@@ -386,14 +388,14 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.endDateInput.element.focus({ preventScroll: true });
         }
     };
-    DateRangePicker.prototype.nextTick = function (f) {
+    DateRangePickerWithoutContext.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
         // Handles multiple focus events happening at the same time.
         clearTimeout(this.nextTickId);
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
-    DateRangePicker.prototype.setShow = function (show) {
+    DateRangePickerWithoutContext.prototype.setShow = function (show) {
         if (this.show === show) {
             return;
         }
@@ -402,14 +404,21 @@ var DateRangePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateRangePicker.propTypes = {
+    DateRangePickerWithoutContext.displayName = 'DateRangePicker';
+    /**
+     * @hidden
+     */
+    DateRangePickerWithoutContext.propTypes = {
         allowReverse: PropTypes.bool,
         calendarSettings: PropTypes.any,
         className: PropTypes.string,
         defaultShow: PropTypes.bool,
-        defaultValue: PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date) }),
+        defaultValue: PropTypes.shape({
+            start: nullable(PropTypes.instanceOf(Date).isRequired),
+            end: nullable(PropTypes.instanceOf(Date).isRequired)
+        }),
         disabled: PropTypes.bool,
-        endDateInputSettings: PropTypes.shape(DateInput.propTypes),
+        endDateInputSettings: PropTypes.shape(DateInputWithoutContext.propTypes),
         focusedDate: PropTypes.instanceOf(Date),
         format: PropTypes.oneOfType([
             PropTypes.string,
@@ -445,12 +454,15 @@ var DateRangePicker = /** @class */ (function (_super) {
         style: PropTypes.any,
         swapButton: PropTypes.any,
         tabIndex: PropTypes.number,
-        value: PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date) })
+        value: PropTypes.shape({
+            start: nullable(PropTypes.instanceOf(Date).isRequired),
+            end: nullable(PropTypes.instanceOf(Date).isRequired)
+        })
     };
     /**
      * @hidden
      */
-    DateRangePicker.defaultProps = {
+    DateRangePickerWithoutContext.defaultProps = {
         allowReverse: false,
         defaultShow: false,
         defaultValue: EMPTY_SELECTIONRANGE,
@@ -460,7 +472,23 @@ var DateRangePicker = /** @class */ (function (_super) {
         min: MIN_DATE,
         swapButton: false
     };
-    return DateRangePicker;
+    return DateRangePickerWithoutContext;
 }(React.Component));
-export { DateRangePicker };
-registerForLocalization(DateRangePicker);
+export { DateRangePickerWithoutContext };
+/**
+ * Represents the PropsContext of the `DateRangePicker` component.
+ * Used for global configuration of all `DateRangePicker` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export var DateRangePickerPropsContext = createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare */
+/**
+ * Represents the KendoReact DateRangePicker Component.
+ *
+ * Accepts properties of type [DateRangePickerProps]({% slug api_dateinputs_daterangepickerprops %}).
+ * Obtaining the `ref` returns an object of type [DateRangePickerHandle]({% slug api_dateinputs_daterangepickerhandle %}).
+ */
+export var DateRangePicker = withPropsContext(DateRangePickerPropsContext, DateRangePickerWithoutContext);
+DateRangePicker.displayName = 'KendoReactDateRangePicker';
+registerForLocalization(DateRangePickerWithoutContext);