@progress/kendo-react-dateinputs 5.4.0-dev.202205200719 → 5.4.0-dev.202206061009

package/dist/es/calendar/services/DOMService.js

@@ -6,7 +6,25 @@ import { canUseDOM } from '@progress/kendo-react-common';
  */
 var DOMService = /** @class */ (function () {
     function DOMService() {
+        // heights
+        this.calendarHeight = 0;
+        this.headerHeight = 0;
+        this.monthViewHeight = 0;
+        this.yearViewHeight = 0;
+        this.decadeViewHeight = 0;
+        this.centuryViewHeight = 0;
+        this.navigationItemHeight = 0;
+        this.scrollableContentHeight = 0;
+        this.scrollableYearContentHeight = 0;
+        // widths
+        this.calendarWidth = 0;
+        this.monthViewWidth = 0;
+        this.yearViewWidth = 0;
+        this.decadeViewWidth = 0;
+        this.centuryViewWidth = 0;
+        this.scrollableContentWidth = 0;
         this.didCalculate = false;
+        this.hostContainer = null;
     }
     DOMService.prototype.ensureHeights = function () {
         if (this.calendarHeight !== undefined) {
@@ -38,7 +56,7 @@ var DOMService = /** @class */ (function () {
         var content = function (rows, cells) {
             if (cells === void 0) { cells = 1; }
             return (table([
-                tbody([tr([td('1', 'k-calendar-td k-alt')])].concat(repeat(rows, function () { return tr(repeat(cells, function (c) { return td("<span class=\"k-link\">" + c + "</span>", 'k-calendar-td'); }), 'k-calendar-tr'); })), 'k-calendar-tbody')
+                tbody([tr([td('1', 'k-calendar-td k-alt')])].concat(repeat(rows, function () { return tr(repeat(cells, function (c) { return td("<span class=\"k-link\">".concat(c, "</span>"), 'k-calendar-td'); }), 'k-calendar-tr'); })), 'k-calendar-tbody')
             ], 'k-calendar-table'));
         };
         var scrollable = function (children) { return div(children, 'k-content k-calendar-content k-scrollable'); };
@@ -80,7 +98,7 @@ var DOMService = /** @class */ (function () {
         var getScrollable = function (element) { return element.querySelector('.k-scrollable'); };
         var horizontal = function (element) {
             var scrollableElement = getScrollable(element);
-            scrollableElement.className = scrollableElement.className + " k-scrollable-horizontal";
+            scrollableElement.className = "".concat(scrollableElement.className, " k-scrollable-horizontal");
             return element;
         };
         var monthView = viewFactory({ cells: 7, rows: 6 }, 'k-calendar-view k-calendar-monthview k-vstack', true);
@@ -144,13 +162,13 @@ var DOMService = /** @class */ (function () {
         var viewProp = dimension === 'height' ? 'ViewHeight' : 'ViewWidth';
         switch (viewType) {
             case CalendarViewEnum.month:
-                return this["month" + viewProp];
+                return this["month".concat(viewProp)];
             case CalendarViewEnum.year:
-                return this["year" + viewProp];
+                return this["year".concat(viewProp)];
             case CalendarViewEnum.decade:
-                return this["decade" + viewProp];
+                return this["decade".concat(viewProp)];
             case CalendarViewEnum.century:
-                return this["century" + viewProp];
+                return this["century".concat(viewProp)];
             default:
                 return 1;
         }

package/dist/es/calendar/services/DecadeViewService.js

@@ -51,7 +51,7 @@ var DecadeViewService = /** @class */ (function () {
                     : _this.isSelectedFromArray(cellDate, selectedDate, min, max));
                 return intersects(cellDate, firstDate, lastDate) ? ({
                     formattedValue: _this.value(cellDate),
-                    id: "" + cellUID + cellDate.getTime(),
+                    id: "".concat(cellUID).concat(cellDate.getTime()),
                     isFocused: _this.isEqual(cellDate, focusedDate),
                     isSelected: isSelected,
                     isWeekend: false,
@@ -120,7 +120,7 @@ var DecadeViewService = /** @class */ (function () {
         if (!value) {
             return '';
         }
-        return firstYearOfDecade(value).getFullYear() + " - " + lastYearOfDecade(value).getFullYear();
+        return "".concat(firstYearOfDecade(value).getFullYear(), " - ").concat(lastYearOfDecade(value).getFullYear());
     };
     DecadeViewService.prototype.rowLength = function (_) {
         return CELLS_LENGTH;

package/dist/es/calendar/services/MonthViewService.js

@@ -60,7 +60,7 @@ var MonthViewService = /** @class */ (function () {
                     : _this.isSelectedFromArray(cellDate, selectedDate, min, max));
                 var cell = {
                     formattedValue: _this.value(cellDate),
-                    id: "" + cellUID + cellDate.getTime(),
+                    id: "".concat(cellUID).concat(cellDate.getTime()),
                     isFocused: _this.isEqual(cellDate, focusedDate),
                     isSelected: isSelected,
                     isInRange: isInRange(cellDate, min, max),
@@ -126,7 +126,7 @@ var MonthViewService = /** @class */ (function () {
         return this.isRangeStart(value) ? value.getFullYear().toString() : this.abbrMonthNames()[value.getMonth()];
     };
     MonthViewService.prototype.title = function (current) {
-        return this.wideMonthNames()[current.getMonth()] + " " + current.getFullYear();
+        return "".concat(this.wideMonthNames()[current.getMonth()], " ").concat(current.getFullYear());
     };
     MonthViewService.prototype.rowLength = function (prependCell) {
         return CELLS_LENGTH + (prependCell ? 1 : 0);

package/dist/es/calendar/services/NavigationService.js

@@ -19,7 +19,7 @@ var NavigationService = /** @class */ (function () {
         this.bus = bus;
     }
     NavigationService.prototype.action = function (event) {
-        var action = "" + (event.ctrlKey || event.metaKey ? 'meta+' : '') + event.keyCode;
+        var action = "".concat(event.ctrlKey || event.metaKey ? 'meta+' : '').concat(event.keyCode);
         return KEY_TO_ACTION[action];
     };
     NavigationService.prototype.move = function (value, action, activeView, service, event) {

package/dist/es/calendar/services/ScrollSyncService.js

@@ -6,6 +6,10 @@ var powerByMagnitude = function (magnitude) { return function (x) { return x * m
 var ScrollSyncService = /** @class */ (function () {
     function ScrollSyncService(dom) {
         this.dom = dom;
+        this.divideByMagnitude = null;
+        this.powerByMagnitude = null;
+        this.navigator = null;
+        this.view = null;
         this.monthScrolled = false;
         this.navScrolled = false;
     }
@@ -47,7 +51,7 @@ var ScrollSyncService = /** @class */ (function () {
     };
     ScrollSyncService.prototype.calculateScroll = function (component, scrollTop) {
         var modifier = component === this.navigator ? this.divideByMagnitude : this.powerByMagnitude;
-        return modifier(scrollTop);
+        return modifier ? modifier(scrollTop) : 0;
     };
     return ScrollSyncService;
 }());

package/dist/es/calendar/services/YearViewService.js

@@ -77,7 +77,7 @@ var YearViewService = /** @class */ (function () {
                     : _this.isSelectedFromArray(cellDate, selectedDate, min, max));
                 return {
                     formattedValue: months[cellDate.getMonth()],
-                    id: "" + cellUID + cellDate.getTime(),
+                    id: "".concat(cellUID).concat(cellDate.getTime()),
                     isFocused: _this.isEqual(cellDate, focusedDate),
                     isSelected: isSelected,
                     isInRange: isInRange(cellDate, min, max),
@@ -138,7 +138,7 @@ var YearViewService = /** @class */ (function () {
         return modifier(value);
     };
     YearViewService.prototype.cellTitle = function (value) {
-        return value.getFullYear() + " " + this.value(value);
+        return "".concat(value.getFullYear(), " ").concat(this.value(value));
     };
     YearViewService.prototype.navigationTitle = function (value) {
         return this.title(value);

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

@@ -18,6 +18,10 @@ export interface DateInputChangeEvent<T = DateInput> {
 export interface DateInputProps<T extends DateInput = any> extends FormComponentProps, DateInputSettings {
     /** @hidden */
     _ref?: React.MutableRefObject<DateInput | null>;
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
     /**
      * Sets a class of the DateInput DOM element.
      */
@@ -110,7 +114,7 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
             second: PropTypes.Requireable<string>;
             timeZoneName: PropTypes.Requireable<string>;
         }>>;
-        formatPlaceholder: PropTypes.Requireable<"narrow" | "short" | "wide" | "formatPattern" | PropTypes.InferProps<{
+        formatPlaceholder: PropTypes.Requireable<"short" | "narrow" | "wide" | "formatPattern" | PropTypes.InferProps<{
             year: PropTypes.Requireable<string>;
             month: PropTypes.Requireable<string>;
             day: PropTypes.Requireable<string>;
@@ -146,18 +150,18 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
         required: PropTypes.Requireable<boolean>;
         validate: PropTypes.Requireable<boolean>;
         valid: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "medium" | "large">;
-        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
-        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline">;
+        size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
+        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
+        fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
     };
     /**
      * @hidden
      */
     static defaultProps: {
         format: string;
-        size: "small" | "medium" | "large";
-        rounded: "small" | "medium" | "large" | "full";
-        fillMode: "solid" | "flat" | "outline";
+        size: "small" | "medium" | "large" | null | undefined;
+        rounded: "small" | "medium" | "full" | "large" | null | undefined;
+        fillMode: "flat" | "outline" | "solid" | null | undefined;
         formatPlaceholder: DateInputFormatPlaceholder;
         spinners: boolean;
         disabled: boolean;
@@ -168,7 +172,7 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
         required: boolean;
         validityStyles: boolean;
         validationMessage: string;
-        placeholder: any;
+        placeholder: null;
     };
     private kendoDate;
     private currentFormat;
@@ -198,21 +202,21 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
     /**
      * Gets the value of the DateInput.
      */
-    readonly value: Date | null;
+    get value(): Date | null;
     /**
      * Gets the `name` property of the DateInput.
      */
-    readonly name: string | undefined;
-    protected readonly min: Date;
-    protected readonly max: Date;
+    get name(): string | undefined;
+    protected get min(): Date;
+    protected get max(): Date;
     /**
      * @hidden
      */
-    readonly text: string;
+    get text(): string;
     /**
      * Represents the validity state into which the DateInput is set.
      */
-    readonly validity: FormComponentValidity;
+    get validity(): FormComponentValidity;
     /**
      * Gets the element of the DateInput.
      *
@@ -244,7 +248,7 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
      * );
      * ```
      */
-    readonly element: HTMLInputElement | null;
+    get element(): HTMLInputElement | null;
     /**
      * @hidden
      */
@@ -252,15 +256,15 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
     /**
      * @hidden
      */
-    protected readonly validityStyles: boolean;
+    protected get validityStyles(): boolean;
     /**
      * @hidden
      */
-    protected readonly required: boolean;
+    protected get required(): boolean;
     /**
      * @hidden
      */
-    protected readonly wrapper: HTMLSpanElement | null;
+    protected get wrapper(): HTMLSpanElement | null;
     /**
      * @hidden
      */
@@ -269,7 +273,7 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
      * @hidden
      */
     protected setValidity: () => void;
-    protected updateOnPaste: (event: React.SyntheticEvent<HTMLInputElement, Event>) => void;
+    protected updateOnPaste: (event: React.SyntheticEvent<HTMLInputElement>) => void;
     private spinnersMouseDown;
     private handlePaste;
     private elementChange;
@@ -281,7 +285,7 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
     private elementKeyDown;
     private elementOnFocus;
     private elementOnBlur;
-    private readonly selection;
+    private get selection();
     private setSelection;
     private triggerChange;
     private selectionBySymbol;

package/dist/es/dateinput/DateInput.js

@@ -2,10 +2,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -22,6 +24,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { isEqual, cloneDate } from '@progress/kendo-date-math';
@@ -45,10 +56,12 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
     function DateInputWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         _this.kendoDate = null;
+        _this.currentFormat = '';
         _this.paste = false;
         _this._element = null;
         _this._wrapper = null;
         _this._inputId = guid();
+        _this._lastSelectedSymbol = '';
         /**
          * @hidden
          */
@@ -238,7 +251,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
             this.props._ref.current = this;
         }
         var localizationService = provideLocalizationService(this);
-        var props = __assign({}, DateInputWithoutContext.defaultProps, this.props);
+        var props = __assign(__assign({}, DateInputWithoutContext.defaultProps), this.props);
         var min = props.min, max = props.max, name = props.name, label = props.label, id = props.id;
         var currentText = this.text;
         var text = currentText === this.props.placeholder ? '' : currentText;
@@ -253,19 +266,19 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         if (this.value !== null) {
             ariaProps['aria-valuenow'] = this.value.getTime();
         }
-        var wrapperClassesInstance = wrapperClasses.slice();
+        var wrapperClassesInstance = __spreadArray([], wrapperClasses, true);
         if (this.props.className) {
             wrapperClassesInstance.push(this.props.className);
         }
         var dateinput = (React.createElement(AsyncFocusBlur, { onFocus: this.elementOnFocus, onBlur: this.elementOnBlur }, function (_a) {
-            var onFocus = _a.onFocus, onBlur = _a.onBlur;
             var _b;
+            var onFocus = _a.onFocus, onBlur = _a.onBlur;
             return (React.createElement("span", { ref: function (span) { _this._wrapper = span; }, style: !label
                     ? { width: _this.props.width }
                     : undefined, dir: _this.props.dir, className: classNames('k-dateinput', 'k-input', (_b = {},
-                    _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
-                    _b["k-input-" + fillMode] = fillMode,
-                    _b["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                    _b["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+                    _b["k-input-".concat(fillMode)] = fillMode,
+                    _b["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
                     _b['k-invalid'] = !isValid,
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,
@@ -291,7 +304,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
             }
             return this.kendoDate && this.kendoDate.getDateObject();
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DateInputWithoutContext.prototype, "name", {
@@ -301,7 +314,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this.props.name;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DateInputWithoutContext.prototype, "min", {
@@ -310,7 +323,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
                 ? this.props.min
                 : DateInputWithoutContext.defaultProps.min;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DateInputWithoutContext.prototype, "max", {
@@ -319,7 +332,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
                 ? this.props.max
                 : DateInputWithoutContext.defaultProps.max;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DateInputWithoutContext.prototype, "text", {
@@ -327,7 +340,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
          * @hidden
          */
         get: function () {
-            var props = __assign({}, DateInput.defaultProps, this.props);
+            var props = __assign(__assign({}, DateInput.defaultProps), this.props);
             var _a = props.formatPlaceholder, formatPlaceholder = _a === void 0 ? DateInputWithoutContext.defaultProps.formatPlaceholder : _a, _b = props.format, format = _b === void 0 ? DateInputWithoutContext.defaultProps.format : _b, value = props.value, defaultValue = props.defaultValue;
             if (this.kendoDate === null) {
                 this.kendoDate = new KendoDate(this.intl.bind(this), formatPlaceholder, format);
@@ -348,7 +361,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
                 ? props.placeholder
                 : currentText;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DateInputWithoutContext.prototype, "validity", {
@@ -369,7 +382,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
                 valueMissing: this.value === null
             };
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DateInputWithoutContext.prototype, "element", {
@@ -407,7 +420,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this._element;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DateInputWithoutContext.prototype, "validityStyles", {
@@ -419,7 +432,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
                 ? this.props.validityStyles
                 : DateInputWithoutContext.defaultProps.validityStyles;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DateInputWithoutContext.prototype, "required", {
@@ -431,7 +444,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
                 ? this.props.required
                 : DateInputWithoutContext.defaultProps.required;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DateInputWithoutContext.prototype, "wrapper", {
@@ -441,7 +454,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this._wrapper;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     /**
@@ -459,7 +472,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
             }
             return returnValue;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     DateInputWithoutContext.prototype.setSelection = function (selection) {

package/dist/es/dateinput/models/DateInputSettings.js

@@ -1 +1,2 @@
+export {};
 // tslint:enable:max-line-length

package/dist/es/dateinput/models/format-placeholder.js

@@ -1 +1,2 @@
+export {};
 // tslint:enable:max-line-length

package/dist/es/dateinput/models/incremental-steps.js

@@ -0,0 +1 @@
+export {};

package/dist/es/dateinput/models/kendo-date.d.ts

@@ -25,9 +25,9 @@ export declare class KendoDate {
     private knownParts;
     private symbols;
     private intlProvider;
-    readonly intl: IntlService;
+    get intl(): IntlService;
     private _value;
-    readonly value: Date;
+    get value(): Date;
     constructor(intlProvider: () => IntlService, formatPlaceholder: DateInputFormatPlaceholder, format: string | DateFormatOptions);
     setValue(value: Date | null): void;
     hasValue(): boolean;

package/dist/es/dateinput/models/kendo-date.js

@@ -37,14 +37,14 @@ var KendoDate = /** @class */ (function () {
         get: function () {
             return this.intlProvider();
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(KendoDate.prototype, "value", {
         get: function () {
             return this._value;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     KendoDate.prototype.setValue = function (value) {

package/dist/es/dateinput/models/mask.js

@@ -4,6 +4,7 @@
 var Mask = /** @class */ (function () {
     function Mask() {
         this.symbols = '';
+        this.partMap = [];
     }
     return Mask;
 }());

package/dist/es/dateinput/models/selection.js

@@ -0,0 +1 @@
+export {};

package/dist/es/dateinput/utils.d.ts

@@ -21,7 +21,7 @@ export declare const dateSymbolMap: (map: any, part: any) => Function;
 /**
  * @hidden
  */
-export declare const isInRange: (candidate: Date, min: Date, max: Date) => boolean;
+export declare const isInRange: (candidate: Date | null, min: Date, max: Date) => boolean;
 /**
  * @hidden
  */

package/dist/es/datepicker/DatePicker.d.ts

@@ -113,7 +113,7 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
             second: PropTypes.Requireable<string>;
             timeZoneName: PropTypes.Requireable<string>;
         }>>;
-        formatPlaceholder: PropTypes.Requireable<"narrow" | "short" | "wide" | "formatPattern" | PropTypes.InferProps<{
+        formatPlaceholder: PropTypes.Requireable<"short" | "narrow" | "wide" | "formatPattern" | PropTypes.InferProps<{
             year: PropTypes.Requireable<string>;
             month: PropTypes.Requireable<string>;
             day: PropTypes.Requireable<string>;
@@ -143,16 +143,16 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
         required: PropTypes.Requireable<boolean>;
         validate: PropTypes.Requireable<boolean>;
         valid: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "medium" | "large">;
-        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
-        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline">;
+        size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
+        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
+        fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
     };
     /**
      * @hidden
      */
     static defaultProps: {
         defaultShow: boolean;
-        defaultValue: any;
+        defaultValue: null;
         dateInput: React.ComponentType<DateInputProps<any>>;
         calendar: React.ComponentType<CalendarProps<any>>;
         toggleButton: React.ComponentType<ToggleButtonProps>;
@@ -167,9 +167,9 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
         weekNumber: boolean;
         required: boolean;
         validityStyles: boolean;
-        size: "small" | "medium" | "large";
-        rounded: "small" | "medium" | "large" | "full";
-        fillMode: "solid" | "flat" | "outline";
+        size: "small" | "medium" | "large" | null | undefined;
+        rounded: "small" | "medium" | "full" | "large" | null | undefined;
+        fillMode: "flat" | "outline" | "solid" | null | undefined;
     };
     /**
      * @hidden
@@ -188,46 +188,46 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
     /**
      * Gets the wrapping element of the DatePickerWithoutContext.
      */
-    readonly element: HTMLSpanElement | null;
+    get element(): HTMLSpanElement | null;
     /**
      * Gets the DateInput component inside the DatePicker component.
      */
-    readonly dateInput: DateInput | null;
+    get dateInput(): DateInput | null;
     /**
      * Gets the Calendar component inside the DatePicker component.
      */
-    readonly calendar: Calendar | null;
+    get calendar(): Calendar | null;
     /**
      * Gets the value of the DatePickerWithoutContext.
      */
-    readonly value: Date | null;
+    get value(): Date | null;
     /**
      * Gets the popup state of the DatePickerWithoutContext.
      */
-    readonly show: boolean;
+    get show(): boolean;
     /**
      * Gets the `name` property of the DatePickerWithoutContext.
      */
-    readonly name: string | undefined;
-    protected readonly min: Date;
-    protected readonly max: Date;
-    protected readonly dateInputComp: React.ComponentType<DateInputProps<any>>;
-    protected readonly toggleButtonComp: React.ComponentType<ToggleButtonProps>;
-    protected readonly calendarComp: React.ComponentType<CalendarProps<any>>;
-    protected readonly popupComp: React.ComponentType<PopupProps>;
-    protected readonly pickerWrapComp: React.ComponentType<PickerWrapProps>;
+    get name(): string | undefined;
+    protected get min(): Date;
+    protected get max(): Date;
+    protected get dateInputComp(): React.ComponentType<DateInputProps<any>>;
+    protected get toggleButtonComp(): React.ComponentType<ToggleButtonProps>;
+    protected get calendarComp(): React.ComponentType<CalendarProps<any>>;
+    protected get popupComp(): React.ComponentType<PopupProps>;
+    protected get pickerWrapComp(): React.ComponentType<PickerWrapProps>;
     /**
      * Represents the validity state into which the DatePicker is set.
      */
-    readonly validity: FormComponentValidity;
+    get validity(): FormComponentValidity;
     /**
      * @hidden
      */
-    protected readonly validityStyles: boolean;
+    protected get validityStyles(): boolean;
     /**
      * @hidden
      */
-    protected readonly required: boolean;
+    protected get required(): boolean;
     /**
      * @hidden
      */
@@ -249,7 +249,7 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
      */
     render(): JSX.Element;
     protected setCalendarRef: (calendar: any) => void;
-    protected nextValue: (nextProps: DatePickerProps, nextState: DatePickerState) => Date;
+    protected nextValue: (nextProps: DatePickerProps, nextState: DatePickerState) => Date | null;
     protected nextShow: (nextProps: DatePickerProps, nextState: DatePickerState) => boolean;
     protected setShow(show: boolean): void;
     protected mergeTime(value: Date | null): Date | null;