@progress/kendo-react-dateinputs 5.4.0-dev.202205271059 → 5.4.0-dev.202206090823

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.
      */
@@ -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" | "full" | "large">;
-        fillMode: PropTypes.Requireable<"flat" | "solid" | "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" | "full" | "large";
-        fillMode: "flat" | "solid" | "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;

package/dist/es/dateinput/DateInput.js

@@ -24,10 +24,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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';
@@ -52,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
          */
@@ -260,7 +266,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         if (this.value !== null) {
             ariaProps['aria-valuenow'] = this.value.getTime();
         }
-        var wrapperClassesInstance = __spreadArray([], wrapperClasses);
+        var wrapperClassesInstance = __spreadArray([], wrapperClasses, true);
         if (this.props.className) {
             wrapperClassesInstance.push(this.props.className);
         }
@@ -270,9 +276,9 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
             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,

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

@@ -324,7 +324,7 @@ var KendoDate = /** @class */ (function () {
         return { text: resultText, format: resultFormat };
     };
     KendoDate.prototype.dateFieldName = function (part) {
-        var formatPlaceholder = this.formatPlaceholder || 'wide';
+        var formatPlaceholder = (this.formatPlaceholder || 'wide');
         if (formatPlaceholder[part.type]) {
             return formatPlaceholder[part.type];
         }

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/utils.d.ts

@@ -9,7 +9,7 @@ export declare const defaultFormatPlaceholder = "wide";
 /**
  * @hidden
  */
-export declare const padZero: (length: any) => string;
+export declare const padZero: (length: number) => string;
 /**
  * @hidden
  */

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

@@ -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" | "full" | "large">;
-        fillMode: PropTypes.Requireable<"flat" | "solid" | "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" | "full" | "large";
-        fillMode: "flat" | "solid" | "outline";
+        size: "small" | "medium" | "large" | null | undefined;
+        rounded: "small" | "medium" | "full" | "large" | null | undefined;
+        fillMode: "flat" | "outline" | "solid" | null | undefined;
     };
     /**
      * @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;

package/dist/es/datepicker/DatePicker.js

@@ -60,6 +60,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         _this._dateInput = React.createRef();
         _this._calendar = null;
         _this.shouldFocusDateInput = false;
+        _this.prevShow = false;
         /**
          * @hidden
          */
@@ -406,9 +407,9 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             var _b;
             var onFocus = _a.onFocus, onBlur = _a.onBlur;
             return (React.createElement("span", { role: "group", "aria-expanded": _this.show, ref: function (span) { _this._element = span; }, className: classNames('k-input', 'k-datepicker', (_b = {},
-                    _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
-                    _b["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
-                    _b["k-input-" + fillMode] = fillMode,
+                    _b["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+                    _b["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                    _b["k-input-".concat(fillMode)] = fillMode,
                     _b['k-invalid'] = !isValid,
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { DateInput } from '../dateinput/DateInput';
-import { MultiViewCalendar } from '../calendar/components/MultiViewCalendar';
+import { MultiViewCalendar, MultiViewCalendarHandle } from '../calendar/components/MultiViewCalendar';
 import { SelectionRange } from '../calendar/models';
 import { DateRangePickerSettings } from './models';
 /**
@@ -125,9 +125,11 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
             required: PropTypes.Requireable<boolean>;
             validate: PropTypes.Requireable<boolean>;
             valid: PropTypes.Requireable<boolean>;
-            size: PropTypes.Requireable<"small" | "medium" | "large">;
-            rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large">;
-            fillMode: PropTypes.Requireable<"flat" | "solid" | "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>; /**
+             * Gets the wrapping element of the DateRangePicker.
+             */
         }>>;
         focusedDate: PropTypes.Requireable<Date>;
         format: PropTypes.Requireable<string | PropTypes.InferProps<{
@@ -235,7 +237,7 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
      * @hidden
      */
     render(): JSX.Element;
-    protected setCalendarRef: (calendar: any) => void;
+    protected setCalendarRef: (calendar: MultiViewCalendarHandle | null) => void;
     protected focusCalendarElement: () => void;
     protected focusDateInputElement(): void;
     protected calculateValue: (props: DateRangePickerProps, state: DateRangePickerState) => SelectionRange;

package/dist/es/datetimepicker/DateTimePicker.d.ts

@@ -145,16 +145,16 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
         validate: PropTypes.Requireable<boolean>;
         valid: PropTypes.Requireable<boolean>;
         cancelButton: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "medium" | "large">;
-        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large">;
-        fillMode: PropTypes.Requireable<"flat" | "solid" | "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;
         disabled: boolean;
         format: string;
         max: Date;
@@ -166,9 +166,9 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
         validityStyles: boolean;
         cancelButton: boolean;
         dateInput: React.ComponentType<DateInputProps<any>>;
-        size: "small" | "medium" | "large";
-        rounded: "small" | "medium" | "full" | "large";
-        fillMode: "flat" | "solid" | "outline";
+        size: "small" | "medium" | "large" | null | undefined;
+        rounded: "small" | "medium" | "full" | "large" | null | undefined;
+        fillMode: "flat" | "outline" | "solid" | null | undefined;
     };
     /**
      * @hidden

package/dist/es/datetimepicker/DateTimePicker.js

@@ -333,9 +333,9 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
             return (React.createElement("div", { ref: function (div) {
                     _this._element = div;
                 }, className: classNames('k-input', 'k-datetimepicker', (_b = {},
-                    _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
-                    _b["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
-                    _b["k-input-" + fillMode] = fillMode,
+                    _b["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+                    _b["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                    _b["k-input-".concat(fillMode)] = fillMode,
                     _b['k-invalid'] = !isValid,
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,

package/dist/es/datetimepicker/DateTimeSelector.d.ts

@@ -71,7 +71,7 @@ export declare class DateTimeSelector extends React.Component<DateTimeSelectorPr
     protected get minTime(): Date | null;
     protected get maxTime(): Date | null;
     protected normalizeRange(candidate: Date, value: Date | null): Date | null;
-    protected hasActiveButton(): boolean;
+    protected hasActiveButton(): boolean | null;
     protected mergeTime(current: Date | null, candidate: Date | null): Date | null;
     protected mergeDate(candidate: Date | null, value: Date): Date | null;
     protected move: (direction: 'left' | 'right') => void;

package/dist/es/datetimepicker/DateTimeSelector.js

@@ -42,7 +42,12 @@ var DateTimeSelector = /** @class */ (function (_super) {
     __extends(DateTimeSelector, _super);
     function DateTimeSelector(props) {
         var _this = _super.call(this, props) || this;
+        _this._calendar = null;
+        _this._timePart = null;
+        _this._cancelButton = null;
+        _this._acceptButton = null;
         _this._calendarWrap = null;
+        _this.shouldFocusPart = false;
         _this.focus = function (args) {
             // Async to avoid stealing the focus from the DateInput on close
             Promise.resolve().then(function () {

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1653648109,
+    publishDate: 1654761838,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/timepicker/TimeList.d.ts

@@ -29,8 +29,8 @@ export declare class TimeList extends React.Component<TimeListProps, {}> {
         id: PropTypes.Requireable<number>;
         max: PropTypes.Requireable<Date>;
         min: PropTypes.Requireable<Date>;
-        part: (props: TimeListProps, propName: string, componentName: string) => any;
-        step: (props: TimeListProps, propName: string, componentName: string) => any;
+        part: (props: TimeListProps, propName: string, componentName: string) => null;
+        step: (props: TimeListProps, propName: string, componentName: string) => null;
         value: PropTypes.Requireable<Date>;
         smoothScroll: PropTypes.Requireable<boolean>;
         show: PropTypes.Requireable<boolean>;
@@ -71,7 +71,7 @@ export declare class TimeList extends React.Component<TimeListProps, {}> {
     /**
      * @hidden
      */
-    render(): JSX.Element;
+    render(): JSX.Element | undefined;
     focus: (args?: any) => void;
     protected itemOffset: (scrollTop: number) => number;
     protected calculateHeights: () => void;

package/dist/es/timepicker/TimeList.js

@@ -45,6 +45,16 @@ var TimeList = /** @class */ (function (_super) {
     __extends(TimeList, _super);
     function TimeList(props) {
         var _this = _super.call(this, props) || this;
+        _this.intl = null;
+        _this._element = null;
+        _this.service = null;
+        _this.virtualization = null;
+        _this.topOffset = 0;
+        _this.bottomOffset = 0;
+        _this.itemHeight = 0;
+        _this.listHeight = 0;
+        _this.topThreshold = 0;
+        _this.bottomThreshold = 0;
         _this.animateToIndex = false;
         _this.focus = function (args) {
             Promise.resolve().then(function () {
@@ -55,7 +65,7 @@ var TimeList = /** @class */ (function (_super) {
             });
         };
         _this.itemOffset = function (scrollTop) {
-            if (!_this.virtualization) {
+            if (!_this.virtualization || !_this.service) {
                 return -1;
             }
             var valueIndex = _this.service.selectedIndex(_this.props.value);
@@ -82,8 +92,10 @@ var TimeList = /** @class */ (function (_super) {
         };
         _this.configureServices = function (_a) {
             var _b = _a === void 0 ? _this.props : _a, min = _b.min, max = _b.max, value = _b.value;
-            var _c = _this.service.limitRange(min || _this.min, max || _this.max, value || _this.props.value), newMin = _c[0], newMax = _c[1];
-            _this.service.configure(_this.serviceSettings({ min: newMin, max: newMax }));
+            if (_this.service) {
+                var _c = _this.service.limitRange(min || _this.min, max || _this.max, value || _this.props.value), newMin = _c[0], newMax = _c[1];
+                _this.service.configure(_this.serviceSettings({ min: newMin, max: newMax }));
+            }
         };
         _this.serviceSettings = function (settings) {
             var defaults = {
@@ -100,7 +112,7 @@ var TimeList = /** @class */ (function (_super) {
         };
         _this.handleScrollAction = function (_a) {
             var target = _a.target, animationInProgress = _a.animationInProgress;
-            if (!_this.virtualization) {
+            if (!_this.virtualization || !_this.service) {
                 return;
             }
             if (target && !animationInProgress) {
@@ -131,6 +143,9 @@ var TimeList = /** @class */ (function (_super) {
             }
         };
         _this.handleKeyDown = function (event) {
+            if (!_this.service) {
+                return;
+            }
             var keyCode = event.keyCode;
             if (keyCode === Keys.down
                 || keyCode === Keys.up
@@ -145,6 +160,9 @@ var TimeList = /** @class */ (function (_super) {
             }
         };
         _this.handleChange = function (dataItem) {
+            if (!_this.service) {
+                return;
+            }
             var candidate = _this.service.apply(_this.props.value, dataItem.value);
             if (_this.props.value.getTime() === candidate.getTime()) {
                 return;
@@ -215,7 +233,7 @@ var TimeList = /** @class */ (function (_super) {
      * @hidden
      */
     TimeList.prototype.componentDidUpdate = function () {
-        if (!this.virtualization) {
+        if (!this.virtualization || !this.service) {
             return;
         }
         var index = this.service.selectedIndex(this.props.value);
@@ -252,14 +270,14 @@ var TimeList = /** @class */ (function (_super) {
         part: function (props, propName, componentName) {
             var prop = props[propName];
             if (!prop || !services[prop.type]) {
-                throw new Error("\n                    Invalid prop '" + propName + "' supplied to " + componentName + ".\n                    Supported part types are hour|minute|second|dayperiod.\n                ");
+                throw new Error("\n                    Invalid prop '".concat(propName, "' supplied to ").concat(componentName, ".\n                    Supported part types are hour|minute|second|dayperiod.\n                "));
             }
             return null;
         },
         step: function (props, propName, componentName) {
             var prop = props[propName];
             if (prop !== undefined && prop <= 0) {
-                throw new Error("\n                    Invalid prop '" + propName + "' supplied to " + componentName + ".\n                    " + propName + " cannot be less than 1.\n                ");
+                throw new Error("\n                    Invalid prop '".concat(propName, "' supplied to ").concat(componentName, ".\n                    ").concat(propName, " cannot be less than 1.\n                "));
             }
             return null;
         },

package/dist/es/timepicker/TimePart.d.ts

@@ -82,7 +82,7 @@ export declare class TimePart extends React.Component<TimePartProps, TimePartSta
         show: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
-        value: any;
+        value: null;
         disabled: boolean;
         nowButton: boolean;
         cancelButton: boolean;
@@ -123,10 +123,10 @@ export declare class TimePart extends React.Component<TimePartProps, TimePartSta
     protected timeFormatReducer: (acc: string, current: DateFormatPart) => string;
     protected timeFormatFilter: (part: DateFormatPart, index: number, all: DateFormatPart[]) => boolean;
     protected nextTick(f: () => any): void;
-    protected hasActiveButton(): boolean;
+    protected hasActiveButton(): boolean | null;
     protected focusList: (dir: Direction) => void;
-    protected listReducer: (state: any, list: any, idx: any, all: any) => any;
-    protected showNowButton: () => boolean;
+    protected listReducer: (state: any, list: any, idx: number, all: any) => any;
+    protected showNowButton: () => boolean | undefined;
     protected hasSteps(): boolean;
     private handleKeyDown;
     private handleListBlur;

package/dist/es/timepicker/TimePart.js

@@ -35,7 +35,7 @@ import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME } from '../utils';
 import { TIME_PART } from './models/TimePart';
 import { generateSnappers, getNow, isInTimeRange, snapTime, timeInRange } from './utils';
 import { Button } from '@progress/kendo-react-buttons';
-var formatRegExp = new RegExp(TIME_PART.hour + "|" + TIME_PART.minute + "|" + TIME_PART.second + "|" + TIME_PART.dayperiod + "|literal");
+var formatRegExp = new RegExp("".concat(TIME_PART.hour, "|").concat(TIME_PART.minute, "|").concat(TIME_PART.second, "|").concat(TIME_PART.dayperiod, "|literal"));
 /**
  * @hidden
  */
@@ -51,6 +51,9 @@ var TimePart = /** @class */ (function (_super) {
     __extends(TimePart, _super);
     function TimePart(props) {
         var _this = _super.call(this, props) || this;
+        _this._element = null;
+        _this._nowButton = null;
+        _this.dateFormatParts = [];
         _this.timeLists = [];
         _this.focus = function (args) {
             Promise.resolve().then(function () {

package/dist/es/timepicker/TimePicker.d.ts

@@ -145,16 +145,16 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
         required: PropTypes.Requireable<boolean>;
         validate: PropTypes.Requireable<boolean>;
         valid: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "medium" | "large">;
-        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large">;
-        fillMode: PropTypes.Requireable<"flat" | "solid" | "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;
         disabled: boolean;
         format: string;
         max: Date;
@@ -165,9 +165,9 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
         required: boolean;
         validityStyles: boolean;
         dateInput: React.ComponentType<DateInputProps<any>>;
-        size: "small" | "medium" | "large";
-        rounded: "small" | "medium" | "full" | "large";
-        fillMode: "flat" | "solid" | "outline";
+        size: "small" | "medium" | "large" | null | undefined;
+        rounded: "small" | "medium" | "full" | "large" | null | undefined;
+        fillMode: "flat" | "outline" | "solid" | null | undefined;
     };
     /**
      * @hidden
@@ -238,7 +238,7 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
      * @hidden
      */
     render(): JSX.Element;
-    protected setTimeSelectorRef: (timeSelector: any) => void;
+    protected setTimeSelectorRef: (timeSelector: TimeSelector | null) => void;
     protected nextValue: (nextProps: TimePickerProps, nextState: TimePickerState) => Date | null;
     protected nextShow: (nextProps: TimePickerProps, nextState: TimePickerState) => boolean;
     protected normalizeTime(date: Date): Date;

package/dist/es/timepicker/TimePicker.js

@@ -60,6 +60,7 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         _this._dateInput = React.createRef();
         _this._timeSelector = null;
         _this.shouldFocusDateInput = false;
+        _this.prevShow = false;
         /**
          * @hidden
          */
@@ -372,9 +373,9 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             var _b;
             var onFocus = _a.onFocus, onBlur = _a.onBlur;
             return (React.createElement("div", { ref: function (span) { _this._element = span; }, className: classNames('k-input', 'k-timepicker', (_b = {},
-                    _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
-                    _b["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
-                    _b["k-input-" + fillMode] = fillMode,
+                    _b["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+                    _b["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                    _b["k-input-".concat(fillMode)] = fillMode,
                     _b['k-invalid'] = !isValid,
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,

package/dist/es/timepicker/TimeSelector.d.ts

@@ -84,7 +84,7 @@ export declare class TimeSelector extends React.Component<TimeSelectorProps, Tim
         show: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
-        value: any;
+        value: null;
         disabled: boolean;
         cancelButton: boolean;
         format: string;
@@ -119,7 +119,7 @@ export declare class TimeSelector extends React.Component<TimeSelectorProps, Tim
     render(): JSX.Element;
     focusActiveList: () => void;
     protected nextTick(f: () => any): void;
-    protected hasActiveButton(): boolean;
+    protected hasActiveButton(): boolean | null;
     private handleKeyDown;
     private handleAccept;
     private handleReject;

package/dist/es/timepicker/TimeSelector.js

@@ -49,6 +49,10 @@ var TimeSelector = /** @class */ (function (_super) {
     __extends(TimeSelector, _super);
     function TimeSelector(props) {
         var _this = _super.call(this, props) || this;
+        _this._element = null;
+        _this._cancelButton = null;
+        _this._acceptButton = null;
+        _this.timePart = null;
         _this.focusActiveList = function () {
             if (!_this.timePart) {
                 return;

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

@@ -5,6 +5,8 @@ import { canUseDOM } from '@progress/kendo-react-common';
  */
 var DOMService = /** @class */ (function () {
     function DOMService() {
+        this.itemHeight = 0;
+        this.timeListHeight = 0;
         this.didCalculate = false;
     }
     DOMService.prototype.ensureHeights = function () {

package/dist/es/timepicker/services/DayPeriodService.js

@@ -14,6 +14,9 @@ var inReverseRange = function (value, min, max) { return ((!min && !max) || valu
 var DayPeriodService = /** @class */ (function () {
     function DayPeriodService(intl) {
         this.intl = intl;
+        this.min = null;
+        this.max = null;
+        this.part = null;
     }
     /**
      * @hidden
@@ -42,8 +45,8 @@ var DayPeriodService = /** @class */ (function () {
      * @hidden
      */
     DayPeriodService.prototype.data = function (_) {
-        var names = this.part.names;
-        if (!names) {
+        var names = this.part && this.part.names;
+        if (!names || !this.min) {
             return [];
         }
         var data = [];
@@ -86,7 +89,7 @@ var DayPeriodService = /** @class */ (function () {
      * @hidden
      */
     DayPeriodService.prototype.selectedIndex = function (value) {
-        if (!this.valueInList(value)) {
+        if (!this.valueInList(value) || !this.min) {
             return -1;
         }
         var index = Math.floor(value.getHours() / 12);
@@ -96,6 +99,9 @@ var DayPeriodService = /** @class */ (function () {
      * @hidden
      */
     DayPeriodService.prototype.valueInList = function (value) {
+        if (!this.min || !this.max) {
+            return false;
+        }
         var reverse = this.min.getHours() !== this.normalizedRange()[0];
         var isInRange = reverse ? inReverseRange : inRange;
         return isInRange(value.getHours(), this.min.getHours(), this.max.getHours());