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

package/dist/npm/datepicker/DatePicker.js

@@ -49,9 +49,10 @@ var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var ToggleButton_1 = require("./ToggleButton");
 var PickerWrap_1 = require("../common/PickerWrap");
 var usePickerFloatingLabel_1 = require("../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 = kendo_react_common_1.guid();
         _this._element = null;
@@ -141,15 +142,15 @@ var DatePicker = /** @class */ (function (_super) {
         };
         kendo_react_common_2.validatePackage(package_metadata_1.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;
@@ -157,7 +158,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.
          */
@@ -167,7 +168,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.
          */
@@ -177,9 +178,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
@@ -192,9 +193,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
@@ -206,9 +207,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;
@@ -216,60 +217,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.
          */
@@ -289,26 +290,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
@@ -316,7 +317,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();
@@ -325,7 +326,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 });
         }
@@ -341,13 +342,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"]);
@@ -416,16 +417,16 @@ var DatePicker = /** @class */ (function (_super) {
             ? (React.createElement(usePickerFloatingLabel_1.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 ? utils_1.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.
@@ -435,7 +436,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),
@@ -497,7 +502,7 @@ var DatePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DatePicker.defaultProps = {
+    DatePickerWithoutContext.defaultProps = {
         defaultShow: false,
         defaultValue: null,
         dateInput: DateInput_1.DateInput,
@@ -515,7 +520,23 @@ var DatePicker = /** @class */ (function (_super) {
         required: false,
         validityStyles: true
     };
-    return DatePicker;
+    return DatePickerWithoutContext;
 }(React.Component));
-exports.DatePicker = DatePicker;
-kendo_react_intl_1.registerForLocalization(DatePicker);
+exports.DatePickerWithoutContext = 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.
+ */
+exports.DatePickerPropsContext = kendo_react_common_1.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 %}).
+ */
+exports.DatePicker = kendo_react_common_1.withPropsContext(exports.DatePickerPropsContext, DatePickerWithoutContext);
+exports.DatePicker.displayName = 'KendoReactDatePicker';
+kendo_react_intl_1.registerForLocalization(DatePickerWithoutContext);

package/dist/npm/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/npm/daterangepicker/DateRangePicker.js

@@ -38,10 +38,12 @@ var models_1 = require("../calendar/models");
 var defaults_1 = require("../defaults");
 var messages_1 = require("../messages");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var utils_1 = require("../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;
@@ -195,8 +197,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         };
         kendo_react_common_2.validatePackage(package_metadata_1.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);
@@ -204,7 +206,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.
          */
@@ -214,7 +216,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.
          */
@@ -224,7 +226,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.
          */
@@ -234,7 +236,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.
          */
@@ -244,7 +246,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.
          */
@@ -259,7 +261,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.
          */
@@ -273,20 +275,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
@@ -294,7 +296,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();
@@ -303,7 +305,7 @@ var DateRangePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateRangePicker.prototype.componentDidUpdate = function () {
+    DateRangePickerWithoutContext.prototype.componentDidUpdate = function () {
         if (this.shouldFocusCalendar) {
             this.focusCalendarElement();
         }
@@ -316,13 +318,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 || models_1.EMPTY_SELECTIONRANGE;
         var startDateInputId = (this.props.startDateInputSettings || {}).id || this._startInputId;
@@ -375,7 +377,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 ? React.createElement(this.props.popup, __assign({}, popupProps), calendar)
                 : React.createElement(kendo_react_popup_1.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;
@@ -388,14 +390,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;
         }
@@ -404,14 +406,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: utils_1.nullable(PropTypes.instanceOf(Date).isRequired),
+            end: utils_1.nullable(PropTypes.instanceOf(Date).isRequired)
+        }),
         disabled: PropTypes.bool,
-        endDateInputSettings: PropTypes.shape(DateInput_1.DateInput.propTypes),
+        endDateInputSettings: PropTypes.shape(DateInput_1.DateInputWithoutContext.propTypes),
         focusedDate: PropTypes.instanceOf(Date),
         format: PropTypes.oneOfType([
             PropTypes.string,
@@ -447,12 +456,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: utils_1.nullable(PropTypes.instanceOf(Date).isRequired),
+            end: utils_1.nullable(PropTypes.instanceOf(Date).isRequired)
+        })
     };
     /**
      * @hidden
      */
-    DateRangePicker.defaultProps = {
+    DateRangePickerWithoutContext.defaultProps = {
         allowReverse: false,
         defaultShow: false,
         defaultValue: models_1.EMPTY_SELECTIONRANGE,
@@ -462,7 +474,23 @@ var DateRangePicker = /** @class */ (function (_super) {
         min: defaults_1.MIN_DATE,
         swapButton: false
     };
-    return DateRangePicker;
+    return DateRangePickerWithoutContext;
 }(React.Component));
-exports.DateRangePicker = DateRangePicker;
-kendo_react_intl_1.registerForLocalization(DateRangePicker);
+exports.DateRangePickerWithoutContext = 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.
+ */
+exports.DateRangePickerPropsContext = kendo_react_common_1.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 %}).
+ */
+exports.DateRangePicker = kendo_react_common_1.withPropsContext(exports.DateRangePickerPropsContext, DateRangePickerWithoutContext);
+exports.DateRangePicker.displayName = 'KendoReactDateRangePicker';
+kendo_react_intl_1.registerForLocalization(DateRangePickerWithoutContext);