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

package/dist/npm/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/npm/calendar/components/MultiViewCalendar.js

@@ -39,15 +39,15 @@ var utils_1 = require("../../utils");
 var HorizontalViewList_1 = require("./HorizontalViewList");
 var TodayCommand_1 = require("./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) && utils_1.isInRange(kendo_date_math_1.getDate(value), min, max)
         ? kendo_date_math_1.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 utils_1.isInRange(date, min, max); }).map(function (date) { return kendo_date_math_1.getDate(date); })
         : null;
@@ -67,9 +67,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;
@@ -115,7 +116,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;
@@ -289,7 +290,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);
@@ -309,7 +310,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         _this.lastViewsCount = _this.props.views || HorizontalViewList_1.HorizontalViewList.defaultProps.views;
         return _this;
     }
-    Object.defineProperty(MultiViewCalendar.prototype, "element", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "element", {
         /**
          * Gets the wrapping element of the MultiViewCalendar component.
          */
@@ -319,7 +320,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.
          */
@@ -333,7 +334,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.
          */
@@ -343,43 +344,43 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendar.prototype, "min", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "min", {
         get: function () {
             return kendo_date_math_1.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 kendo_date_math_1.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 models_1.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 models_1.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
@@ -388,7 +389,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendar.prototype, "todayIsInRange", {
+    Object.defineProperty(MultiViewCalendarWithoutContext.prototype, "todayIsInRange", {
         get: function () {
             return utils_1.isInRange(utils_1.getToday(), kendo_date_math_1.getDate(this.min), kendo_date_math_1.getDate(this.max));
         },
@@ -398,13 +399,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)();
         }
@@ -418,7 +419,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);
@@ -466,16 +467,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),
+            utils_1.nullable(PropTypes.instanceOf(Date)),
             PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-            PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date) })
+            PropTypes.shape({
+                start: utils_1.nullable(PropTypes.instanceOf(Date)),
+                end: utils_1.nullable(PropTypes.instanceOf(Date))
+            })
         ]),
         disabled: PropTypes.bool,
         focusedDate: PropTypes.instanceOf(Date),
@@ -491,9 +499,12 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         tabIndex: PropTypes.number,
         topView: PropTypes.oneOf(['month', 'year', 'decade', 'century']),
         value: PropTypes.oneOfType([
-            PropTypes.instanceOf(Date),
+            utils_1.nullable(PropTypes.instanceOf(Date)),
             PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-            PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date) })
+            PropTypes.shape({
+                start: utils_1.nullable(PropTypes.instanceOf(Date).isRequired),
+                end: utils_1.nullable(PropTypes.instanceOf(Date).isRequired)
+            })
         ]),
         views: function (props, propName, componentName) {
             var views = props[propName];
@@ -508,7 +519,7 @@ var MultiViewCalendar = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    MultiViewCalendar.defaultProps = {
+    MultiViewCalendarWithoutContext.defaultProps = {
         disabled: false,
         min: defaults_1.MIN_DATE,
         max: defaults_1.MAX_DATE,
@@ -521,8 +532,24 @@ var MultiViewCalendar = /** @class */ (function (_super) {
         views: 2,
         allowReverse: false
     };
-    return MultiViewCalendar;
+    return MultiViewCalendarWithoutContext;
 }(React.Component));
-exports.MultiViewCalendar = MultiViewCalendar;
-kendo_react_intl_1.registerForIntl(MultiViewCalendar);
-kendo_react_intl_1.registerForLocalization(MultiViewCalendar);
+exports.MultiViewCalendarWithoutContext = 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.
+ */
+exports.MultiViewCalendarPropsContext = kendo_react_common_1.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 %}).
+ */
+exports.MultiViewCalendar = kendo_react_common_1.withPropsContext(exports.MultiViewCalendarPropsContext, MultiViewCalendarWithoutContext);
+exports.MultiViewCalendar.displayName = 'KendoReactMultiViewCalendar';
+kendo_react_intl_1.registerForIntl(MultiViewCalendarWithoutContext);
+kendo_react_intl_1.registerForLocalization(MultiViewCalendarWithoutContext);

package/dist/npm/dateinput/DateInput.d.ts

@@ -15,7 +15,7 @@ export interface DateInputChangeEvent<T = DateInput> {
 /**
  * Represents the props of the [KendoReact DateInput component]({% slug overview_dateinput %}). The generic argument is passed to the `onChange` property and is used as a target in the [`DateInputChangeEvent`]({% slug api_dateinputs_dateinputchangeevent %}) interface.
  */
-export interface DateInputProps<T = DateInput> extends FormComponentProps, DateInputSettings {
+export interface DateInputProps<T extends DateInput = any> extends FormComponentProps, DateInputSettings {
     /** @hidden */
     _ref?: React.MutableRefObject<DateInput | null>;
     /**
@@ -43,9 +43,14 @@ export interface DateInputProps<T = DateInput> extends FormComponentProps, DateI
      */
     onChange?: (event: DateInputChangeEvent<T>) => void;
 }
-export declare class DateInput extends React.Component<DateInputProps, {
+/** @hidden */
+export declare class DateInputWithoutContext extends React.Component<DateInputProps, {
     focused: boolean;
 }> implements FormComponent {
+    /**
+     * @hidden
+     */
+    static displayName: string;
     /**
      * @hidden
      */
@@ -68,7 +73,7 @@ export declare class DateInput extends React.Component<DateInputProps, {
             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>;
@@ -97,7 +102,7 @@ export declare class DateInput extends React.Component<DateInputProps, {
         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>;
@@ -240,3 +245,40 @@ export declare class DateInput extends React.Component<DateInputProps, {
     private switchDateSegment;
     private modifyDateSegmentValue;
 }
+/**
+ * Represents the PropsContext of the `DateInput` component.
+ * Used for global configuration of all `DateInput` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export declare const DateInputPropsContext: React.Context<(p: DateInputProps<any>) => DateInputProps<any>>;
+/**
+ * Represent the `ref` of the DateInput component.
+ */
+export interface DateInputHandle extends Pick<DateInputWithoutContext, keyof DateInputWithoutContext> {
+    /**
+     * Returns the HTML element of the DateInput component.
+     */
+    element: HTMLInputElement | null;
+    /**
+     * Gets the `name` property of the DateInput.
+     */
+    name: string | undefined;
+    /**
+     * Returns the `value` of the DateInput component.
+     */
+    value: Date | null;
+    /**
+     * Represents the validity state into which the DateInput is set.
+     */
+    validity: FormComponentValidity;
+}
+/** @hidden */
+export declare type DateInput = DateInputHandle;
+/**
+ * Represents the KendoReact DateInput Component.
+ *
+ * Accepts properties of type [DateInputProps]({% slug api_dateinputs_dateinputprops %}).
+ * Obtaining the `ref` returns an object of type [DateInputHandle]({% slug api_dateinputs_dateinputhandle %}).
+ */
+export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps<any> & React.RefAttributes<any>>;