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

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

@@ -23,7 +23,7 @@ export interface DateTimePickerProps extends DateTimePickerSettings, FormCompone
      *  For more information, refer to the article on
      * [uncontrolled components in React](https://reactjs.org/docs/uncontrolled-components.html).
      */
-    defaultValue?: Date;
+    defaultValue?: Date | null;
     /**
      * Fires each time the user selects a new value
      * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-date-value)).
@@ -46,7 +46,12 @@ export interface DateTimePickerState {
     show: boolean;
     focused: boolean;
 }
-export declare class DateTimePicker extends React.Component<DateTimePickerProps, DateTimePickerState> implements FormComponent {
+/** @hidden */
+export declare class DateTimePickerWithoutContext extends React.Component<DateTimePickerProps, DateTimePickerState> implements FormComponent {
+    /**
+     * @hidden
+     */
+    static displayName: string;
     /**
      * @hidden
      */
@@ -73,7 +78,7 @@ export declare class DateTimePicker extends React.Component<DateTimePickerProps,
             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>;
@@ -120,7 +125,7 @@ export declare class DateTimePicker extends React.Component<DateTimePickerProps,
         required: boolean;
         validityStyles: boolean;
         cancelButton: boolean;
-        dateInput: React.ComponentType<DateInputProps<DateInput>>;
+        dateInput: React.ComponentType<DateInputProps<any>>;
     };
     /**
      * @hidden
@@ -206,3 +211,48 @@ export declare class DateTimePicker extends React.Component<DateTimePickerProps,
     private handleKeyDown;
     private dateInputElement;
 }
+/**
+ * Represents the PropsContext of the `DateTimePicker` component.
+ * Used for global configuration of all `DateTimePicker` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export declare const DateTimePickerPropsContext: React.Context<(p: DateTimePickerProps) => DateTimePickerProps>;
+/**
+ * Represent the `ref` of the DateTimePicker component.
+ */
+export interface DateTimePickerHandle extends Pick<DateTimePickerWithoutContext, keyof DateTimePickerWithoutContext> {
+    /**
+     * Gets the DateInput component inside the DateTimePicker component.
+     */
+    dateInput: DateInput | null;
+    /**
+     * Returns the HTML element of the DateTimePicker component.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * Gets the `name` property of the DateTimePicker.
+     */
+    name: string | undefined;
+    /**
+     * Gets the popup state of the DateTimePicker.
+     */
+    show: boolean;
+    /**
+     * Represents the validity state into which the DateTimePicker is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * Gets the value of the DateTimePicker.
+     */
+    value: Date | null;
+}
+/** @hidden */
+export declare type DateTimePicker = DateTimePickerHandle;
+/**
+ * Represents the KendoReact DateTimePicker Component.
+ *
+ * Accepts properties of type [DateTimePickerProps]({% slug api_dateinputs_datetimepickerprops %}).
+ * Obtaining the `ref` returns an object of type [DateTimePickerHandle]({% slug api_dateinputs_datetimepickerhandle %}).
+ */
+export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<any>>;

package/dist/npm/datetimepicker/DateTimePicker.js

@@ -39,9 +39,10 @@ var DateTimeSelector_1 = require("./DateTimeSelector");
 var utils_2 = require("../timepicker/utils");
 var defaults_1 = require("../defaults");
 var usePickerFloatingLabel_1 = require("../hooks/usePickerFloatingLabel");
-var DateTimePicker = /** @class */ (function (_super) {
-    __extends(DateTimePicker, _super);
-    function DateTimePicker(props) {
+/** @hidden */
+var DateTimePickerWithoutContext = /** @class */ (function (_super) {
+    __extends(DateTimePickerWithoutContext, _super);
+    function DateTimePickerWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         _this._popupId = kendo_react_common_1.guid();
         _this._element = null;
@@ -121,13 +122,13 @@ var DateTimePicker = /** @class */ (function (_super) {
         };
         kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
         _this.state = {
-            value: _this.props.defaultValue || DateTimePicker.defaultProps.defaultValue,
-            show: _this.props.defaultShow || DateTimePicker.defaultProps.defaultShow,
+            value: _this.props.defaultValue || DateTimePickerWithoutContext.defaultProps.defaultValue,
+            show: _this.props.defaultShow || DateTimePickerWithoutContext.defaultProps.defaultShow,
             focused: false
         };
         return _this;
     }
-    Object.defineProperty(DateTimePicker.prototype, "element", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "element", {
         /**
          * Gets the wrapping element of the DateTimePicker.
          */
@@ -137,7 +138,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateTimePicker.prototype, "dateInput", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "dateInput", {
         /**
          * Gets the DateInput component inside the DateTimePicker component.
          */
@@ -147,7 +148,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateTimePicker.prototype, "value", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "value", {
         /**
          * Gets the value of the DateTimePicker.
          */
@@ -162,7 +163,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateTimePicker.prototype, "show", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "show", {
         /**
          * Gets the popup state of the DateTimePicker.
          */
@@ -176,7 +177,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateTimePicker.prototype, "name", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "name", {
         /**
          * Gets the `name` property of the DateTimePicker.
          */
@@ -186,25 +187,25 @@ var DateTimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateTimePicker.prototype, "min", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "min", {
         get: function () {
             return this.props.min !== undefined
                 ? this.props.min
-                : DateTimePicker.defaultProps.min;
+                : DateTimePickerWithoutContext.defaultProps.min;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateTimePicker.prototype, "max", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "max", {
         get: function () {
             return this.props.max !== undefined
                 ? this.props.max
-                : DateTimePicker.defaultProps.max;
+                : DateTimePickerWithoutContext.defaultProps.max;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateTimePicker.prototype, "validity", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "validity", {
         /**
          * Represents the validity state into which the DateTimePicker is set.
          */
@@ -225,36 +226,36 @@ var DateTimePicker = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateTimePicker.prototype, "validityStyles", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "validityStyles", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.validityStyles !== undefined
                 ? this.props.validityStyles
-                : DateTimePicker.defaultProps.validityStyles;
+                : DateTimePickerWithoutContext.defaultProps.validityStyles;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateTimePicker.prototype, "required", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "required", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.required !== undefined
                 ? this.props.required
-                : DateTimePicker.defaultProps.required;
+                : DateTimePickerWithoutContext.defaultProps.required;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateTimePicker.prototype, "dateInputComp", {
+    Object.defineProperty(DateTimePickerWithoutContext.prototype, "dateInputComp", {
         /**
          * @hidden
          */
         get: function () {
-            return this.props.dateInput || DateTimePicker.defaultProps.dateInput;
+            return this.props.dateInput || DateTimePickerWithoutContext.defaultProps.dateInput;
         },
         enumerable: true,
         configurable: true
@@ -262,7 +263,7 @@ var DateTimePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateTimePicker.prototype.componentDidMount = function () {
+    DateTimePickerWithoutContext.prototype.componentDidMount = function () {
         if (this.show) {
             // If defaultShow is true during the initial render, the popup is not aligned.
             this.forceUpdate();
@@ -271,7 +272,7 @@ var DateTimePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateTimePicker.prototype.componentDidUpdate = function () {
+    DateTimePickerWithoutContext.prototype.componentDidUpdate = function () {
         var dateInputElement = this.dateInputElement();
         if (this._dateTimeSelector && this.show && !this.prevShow) {
             this._dateTimeSelector.focus({ preventScroll: true });
@@ -287,13 +288,13 @@ var DateTimePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateTimePicker.prototype.componentWillUnmount = function () {
+    DateTimePickerWithoutContext.prototype.componentWillUnmount = function () {
         clearTimeout(this.nextTickId);
     };
     /**
      * @hidden
      */
-    DateTimePicker.prototype.render = function () {
+    DateTimePickerWithoutContext.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, cancelButton = _a.cancelButton, minTime = _a.minTime, maxTime = _a.maxTime, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, _b = _a.popup, PopupComponent = _b === void 0 ? kendo_react_popup_1.Popup : _b, calendar = _a.calendar;
         var isValid = !this.validityStyles || this.validity.valid;
@@ -345,13 +346,13 @@ var DateTimePicker = /** @class */ (function (_super) {
             ? (React.createElement(usePickerFloatingLabel_1.PickerFloatingLabel, { dateInput: this._dateInput, label: this.props.label, editorId: id, editorValid: isValid, editorDisabled: this.props.disabled, children: dateTimePicker, style: { width: this.props.width } }))
             : dateTimePicker;
     };
-    DateTimePicker.prototype.setShow = function (show) {
+    DateTimePickerWithoutContext.prototype.setShow = function (show) {
         if (this.show === show) {
             return;
         }
         this.setState({ show: show });
     };
-    DateTimePicker.prototype.nextTick = function (f) {
+    DateTimePickerWithoutContext.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.
@@ -361,7 +362,11 @@ var DateTimePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateTimePicker.propTypes = {
+    DateTimePickerWithoutContext.displayName = 'DateTimePicker';
+    /**
+     * @hidden
+     */
+    DateTimePickerWithoutContext.propTypes = {
         className: PropTypes.string,
         defaultShow: PropTypes.bool,
         defaultValue: PropTypes.instanceOf(Date),
@@ -424,7 +429,7 @@ var DateTimePicker = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateTimePicker.defaultProps = {
+    DateTimePickerWithoutContext.defaultProps = {
         defaultShow: false,
         defaultValue: null,
         disabled: false,
@@ -439,7 +444,23 @@ var DateTimePicker = /** @class */ (function (_super) {
         cancelButton: true,
         dateInput: DateInput_1.DateInput
     };
-    return DateTimePicker;
+    return DateTimePickerWithoutContext;
 }(React.Component));
-exports.DateTimePicker = DateTimePicker;
-kendo_react_intl_1.registerForLocalization(DateTimePicker);
+exports.DateTimePickerWithoutContext = DateTimePickerWithoutContext;
+/**
+ * Represents the PropsContext of the `DateTimePicker` component.
+ * Used for global configuration of all `DateTimePicker` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+exports.DateTimePickerPropsContext = kendo_react_common_1.createPropsContext();
+/* eslint-disable @typescript-eslint/no-redeclare */
+/**
+ * Represents the KendoReact DateTimePicker Component.
+ *
+ * Accepts properties of type [DateTimePickerProps]({% slug api_dateinputs_datetimepickerprops %}).
+ * Obtaining the `ref` returns an object of type [DateTimePickerHandle]({% slug api_dateinputs_datetimepickerhandle %}).
+ */
+exports.DateTimePicker = kendo_react_common_1.withPropsContext(exports.DateTimePickerPropsContext, DateTimePickerWithoutContext);
+exports.DateTimePicker.displayName = 'KendoReactDateTimePicker';
+kendo_react_intl_1.registerForLocalization(DateTimePickerWithoutContext);

package/dist/npm/hooks/usePickerFloatingLabel.d.ts

@@ -11,7 +11,7 @@ export declare type PickerFloatingLabelProps = FloatingLabelProps & {
 /**
  * @hidden
  */
-export declare const usePickerFloatingLabel: (dateInput: React.RefObject<DateInput>) => {
+export declare const usePickerFloatingLabel: (dateInput: React.RefObject<import("../dateinput/DateInput").DateInputHandle>) => {
     editorValue: boolean;
 };
 /**

package/dist/npm/main.d.ts

@@ -1,16 +1,16 @@
-import { Calendar, CalendarProps, CalendarChangeEvent } from './calendar/components/Calendar';
-import { DateInput, DateInputProps, DateInputChangeEvent } from './dateinput/DateInput';
-import { DatePicker, DatePickerProps, DatePickerChangeEvent } from './datepicker/DatePicker';
-import { TimePicker, TimePickerProps, TimePickerChangeEvent } from './timepicker/TimePicker';
-import { MultiViewCalendar, MultiViewCalendarProps, MultiViewCalendarChangeEvent } from './calendar/components/MultiViewCalendar';
-import { DateRangePicker, DateRangePickerProps, DateRangePickerChangeEvent } from './daterangepicker/DateRangePicker';
+import { Calendar, CalendarProps, CalendarPropsContext, CalendarHandle, CalendarChangeEvent } from './calendar/components/Calendar';
+import { DateInput, DateInputProps, DateInputPropsContext, DateInputHandle, DateInputChangeEvent } from './dateinput/DateInput';
+import { DatePicker, DatePickerProps, DatePickerPropsContext, DatePickerHandle, DatePickerChangeEvent } from './datepicker/DatePicker';
+import { TimePicker, TimePickerProps, TimePickerPropsContext, TimePickerHandle, TimePickerChangeEvent } from './timepicker/TimePicker';
+import { MultiViewCalendar, MultiViewCalendarProps, MultiViewCalendarPropsContext, MultiViewCalendarHandle, MultiViewCalendarChangeEvent } from './calendar/components/MultiViewCalendar';
+import { DateRangePicker, DateRangePickerProps, DateRangePickerPropsContext, DateRangePickerHandle, DateRangePickerChangeEvent } from './daterangepicker/DateRangePicker';
 import { CalendarCell, CalendarCellProps } from './calendar/components/CalendarCell';
 import { CalendarWeekCell, CalendarWeekCellProps } from './calendar/components/CalendarWeekCell';
 import { CalendarHeaderTitle, CalendarHeaderTitleProps } from './calendar/components/CalendarHeaderTitle';
 import { CalendarNavigationItem, CalendarNavigationItemProps } from './calendar/components/CalendarNavigationItem';
 import { ActiveView, SelectionRange, CalendarSettings, CalendarViewEnum, MultiViewCalendarMode, MultiViewCalendarSettings } from './calendar/models';
 import { DateInputSettings, DateInputIncrementalSteps, DateInputFormatPlaceholder, DateInputCustomFormatPlaceholder } from './dateinput/models';
-import { DateTimePicker, DateTimePickerProps, DateTimePickerChangeEvent } from './datetimepicker/DateTimePicker';
+import { DateTimePicker, DateTimePickerProps, DateTimePickerPropsContext, DateTimePickerHandle, DateTimePickerChangeEvent } from './datetimepicker/DateTimePicker';
 import { DatePickerSettings } from './datepicker/models';
 import { DateTimePickerSettings } from './datetimepicker/models';
 import { TimePickerSettings } from './timepicker/models';
@@ -18,4 +18,4 @@ import { DateRangePickerSettings, DateRangePickerPopupSettings, DateRangePickerC
 import { ToggleButton, ToggleButtonProps } from './datepicker/ToggleButton';
 import { PickerWrap, PickerWrapProps } from './common/PickerWrap';
 import { FormComponentValidity } from '@progress/kendo-react-common';
-export { PickerWrap, PickerWrapProps, ToggleButton, ToggleButtonProps, ActiveView, Calendar, CalendarProps, CalendarSettings, CalendarViewEnum, CalendarChangeEvent, CalendarCell, CalendarCellProps, CalendarWeekCell, CalendarWeekCellProps, CalendarHeaderTitle, CalendarHeaderTitleProps, CalendarNavigationItem, CalendarNavigationItemProps, DateInput, DateInputProps, DateInputSettings, DateInputChangeEvent, DateInputIncrementalSteps, DateInputFormatPlaceholder, DateInputCustomFormatPlaceholder, DatePicker, DatePickerProps, DatePickerSettings, DatePickerChangeEvent, TimePicker, TimePickerProps, TimePickerSettings, TimePickerChangeEvent, MultiViewCalendar, MultiViewCalendarProps, MultiViewCalendarSettings, MultiViewCalendarMode, MultiViewCalendarChangeEvent, DateRangePicker, DateRangePickerProps, DateRangePickerSettings, DateRangePickerCalendarSettings, DateRangePickerDateInputSettings, DateRangePickerPopupSettings, DateRangePickerChangeEvent, DateTimePicker, DateTimePickerProps, DateTimePickerSettings, DateTimePickerChangeEvent, SelectionRange, FormComponentValidity };
+export { PickerWrap, PickerWrapProps, ToggleButton, ToggleButtonProps, ActiveView, Calendar, CalendarProps, CalendarPropsContext, CalendarHandle, CalendarSettings, CalendarViewEnum, CalendarChangeEvent, CalendarCell, CalendarCellProps, CalendarWeekCell, CalendarWeekCellProps, CalendarHeaderTitle, CalendarHeaderTitleProps, CalendarNavigationItem, CalendarNavigationItemProps, DateInput, DateInputProps, DateInputPropsContext, DateInputHandle, DateInputSettings, DateInputChangeEvent, DateInputIncrementalSteps, DateInputFormatPlaceholder, DateInputCustomFormatPlaceholder, DatePicker, DatePickerProps, DatePickerPropsContext, DatePickerHandle, DatePickerSettings, DatePickerChangeEvent, TimePicker, TimePickerProps, TimePickerPropsContext, TimePickerHandle, TimePickerSettings, TimePickerChangeEvent, MultiViewCalendar, MultiViewCalendarProps, MultiViewCalendarPropsContext, MultiViewCalendarHandle, MultiViewCalendarSettings, MultiViewCalendarMode, MultiViewCalendarChangeEvent, DateRangePicker, DateRangePickerProps, DateRangePickerPropsContext, DateRangePickerHandle, DateRangePickerSettings, DateRangePickerCalendarSettings, DateRangePickerDateInputSettings, DateRangePickerPopupSettings, DateRangePickerChangeEvent, DateTimePicker, DateTimePickerProps, DateTimePickerPropsContext, DateTimePickerHandle, DateTimePickerSettings, DateTimePickerChangeEvent, SelectionRange, FormComponentValidity };

package/dist/npm/main.js

@@ -2,16 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var Calendar_1 = require("./calendar/components/Calendar");
 exports.Calendar = Calendar_1.Calendar;
+exports.CalendarPropsContext = Calendar_1.CalendarPropsContext;
 var DateInput_1 = require("./dateinput/DateInput");
 exports.DateInput = DateInput_1.DateInput;
+exports.DateInputPropsContext = DateInput_1.DateInputPropsContext;
 var DatePicker_1 = require("./datepicker/DatePicker");
 exports.DatePicker = DatePicker_1.DatePicker;
+exports.DatePickerPropsContext = DatePicker_1.DatePickerPropsContext;
 var TimePicker_1 = require("./timepicker/TimePicker");
 exports.TimePicker = TimePicker_1.TimePicker;
+exports.TimePickerPropsContext = TimePicker_1.TimePickerPropsContext;
 var MultiViewCalendar_1 = require("./calendar/components/MultiViewCalendar");
 exports.MultiViewCalendar = MultiViewCalendar_1.MultiViewCalendar;
+exports.MultiViewCalendarPropsContext = MultiViewCalendar_1.MultiViewCalendarPropsContext;
 var DateRangePicker_1 = require("./daterangepicker/DateRangePicker");
 exports.DateRangePicker = DateRangePicker_1.DateRangePicker;
+exports.DateRangePickerPropsContext = DateRangePicker_1.DateRangePickerPropsContext;
 var CalendarCell_1 = require("./calendar/components/CalendarCell");
 exports.CalendarCell = CalendarCell_1.CalendarCell;
 var CalendarWeekCell_1 = require("./calendar/components/CalendarWeekCell");
@@ -24,6 +30,7 @@ var models_1 = require("./calendar/models");
 exports.CalendarViewEnum = models_1.CalendarViewEnum;
 var DateTimePicker_1 = require("./datetimepicker/DateTimePicker");
 exports.DateTimePicker = DateTimePicker_1.DateTimePicker;
+exports.DateTimePickerPropsContext = DateTimePicker_1.DateTimePickerPropsContext;
 var ToggleButton_1 = require("./datepicker/ToggleButton");
 exports.ToggleButton = ToggleButton_1.ToggleButton;
 var PickerWrap_1 = require("./common/PickerWrap");

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1638196680,
+    publishDate: 1638776616,
     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/npm/timepicker/TimeList.d.ts

@@ -19,6 +19,7 @@ export interface TimeListProps {
     smoothScroll?: boolean;
     boundRange?: boolean;
     disabled?: boolean;
+    show?: boolean;
 }
 /**
  * @hidden
@@ -32,6 +33,7 @@ export declare class TimeList extends React.Component<TimeListProps, {}> {
         step: (props: TimeListProps, propName: string, componentName: string) => any;
         value: PropTypes.Requireable<Date>;
         smoothScroll: PropTypes.Requireable<boolean>;
+        show: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         boundRange: boolean;

package/dist/npm/timepicker/TimeList.js

@@ -126,7 +126,7 @@ var TimeList = /** @class */ (function (_super) {
             if (!_this._element) {
                 return;
             }
-            if (document && document.activeElement !== _this._element) {
+            if (document && document.activeElement !== _this._element && _this.props.show) {
                 _this._element.focus({ preventScroll: true });
             }
         };
@@ -264,7 +264,8 @@ var TimeList = /** @class */ (function (_super) {
             return null;
         },
         value: PropTypes.instanceOf(Date),
-        smoothScroll: PropTypes.bool
+        smoothScroll: PropTypes.bool,
+        show: PropTypes.bool
     };
     TimeList.defaultProps = {
         boundRange: false,

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

@@ -36,6 +36,7 @@ export interface TimePartProps {
     onNowClick?: any;
     className?: string;
     onMount?: (value: Date) => void;
+    show?: boolean;
 }
 /**
  * @hidden
@@ -78,6 +79,7 @@ export declare class TimePart extends React.Component<TimePartProps, TimePartSta
         smoothScroll: PropTypes.Requireable<boolean>;
         tabIndex: PropTypes.Requireable<number>;
         value: PropTypes.Requireable<Date>;
+        show: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         value: any;

package/dist/npm/timepicker/TimePart.js

@@ -230,7 +230,7 @@ var TimePart = /** @class */ (function (_super) {
                             React.createElement("span", { className: "k-title", onMouseDown: function (e) { e.preventDefault(); } }, _this.intl.dateFieldName(part)),
                             React.createElement(TimeList_1.TimeList, { min: _this.min, max: _this.max, boundRange: _this.boundRange, part: part, step: part.type ? _this.steps[part.type] : 1, smoothScroll: smoothScroll, ref: function (el) { if (!el) {
                                     return;
-                                } _this.timeLists.push(el); }, id: idx, onFocus: function () { _this.handleListFocus(idx); }, onBlur: _this.handleListBlur, onChange: _this.handleChange, value: _this.value, disabled: disabled }))
+                                } _this.timeLists.push(el); }, id: idx, onFocus: function () { _this.handleListFocus(idx); }, onBlur: _this.handleListBlur, onChange: _this.handleChange, value: _this.value, disabled: disabled, show: _this.props.show }))
                         : React.createElement("div", { key: idx, className: "k-time-separator" }, part.pattern));
                 }))));
     };
@@ -281,7 +281,8 @@ var TimePart = /** @class */ (function (_super) {
         }),
         smoothScroll: PropTypes.bool,
         tabIndex: PropTypes.number,
-        value: PropTypes.instanceOf(Date)
+        value: PropTypes.instanceOf(Date),
+        show: PropTypes.bool
     };
     TimePart.defaultProps = {
         value: null,

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

@@ -21,7 +21,7 @@ export interface TimePickerProps extends TimePickerSettings, FormComponentProps
     /**
      * Sets the default value of the TimePicker ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-value)).
      */
-    defaultValue?: Date;
+    defaultValue?: Date | null;
     /**
      * Fires each time the user selects a new value ([see example]({% slug controlled_timepicker %}#toc-controlling-the-date-value)).
      */
@@ -41,7 +41,12 @@ export interface TimePickerState {
     show: boolean;
     focused: boolean;
 }
-export declare class TimePicker extends React.Component<TimePickerProps, TimePickerState> implements FormComponent {
+/** @hidden */
+export declare class TimePickerWithoutContext extends React.Component<TimePickerProps, TimePickerState> implements FormComponent {
+    /**
+     * @hidden
+     */
+    static displayName: string;
     /**
      * @hidden
      */
@@ -69,7 +74,7 @@ export declare class TimePicker extends React.Component<TimePickerProps, TimePic
             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>;
@@ -119,7 +124,7 @@ export declare class TimePicker extends React.Component<TimePickerProps, TimePic
         steps: {};
         required: boolean;
         validityStyles: boolean;
-        dateInput: React.ComponentType<DateInputProps<DateInput>>;
+        dateInput: React.ComponentType<DateInputProps<any>>;
     };
     /**
      * @hidden
@@ -212,3 +217,52 @@ export declare class TimePicker extends React.Component<TimePickerProps, TimePic
     private handleIconMouseDown;
     private handleKeyDown;
 }
+/**
+ * Represents the PropsContext of the `TimePicker` component.
+ * Used for global configuration of all `TimePicker` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export declare const TimePickerPropsContext: React.Context<(p: TimePickerProps) => TimePickerProps>;
+/**
+ * Represent the `ref` of the TimePicker component.
+ */
+export interface TimePickerHandle extends Pick<TimePickerWithoutContext, keyof TimePickerWithoutContext> {
+    /**
+     * Gets the DateInput component inside the TimePicker component.
+     */
+    dateInput: DateInput | null;
+    /**
+     * Returns the HTML element of the TimePicker component.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * Gets the `name` property of the TimePicker.
+     */
+    name: string | undefined;
+    /**
+     * Gets the popup state of the TimeSelector.
+     */
+    show: boolean;
+    /**
+     * Represents the validity state into which the TimePicker is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * Gets the value of the TimePicker.
+     */
+    value: Date | null;
+    /**
+     * Gets the TimeSelector component inside the TimePicker component.
+     */
+    timeSelector: TimeSelector | null;
+}
+/** @hidden */
+export declare type TimePicker = TimePickerHandle;
+/**
+ * Represents the KendoReact TimePicker Component.
+ *
+ * Accepts properties of type [TimePicker]({% slug api_dateinputs_timepickerprops %}).
+ * Obtaining the `ref` returns an object of type [TimePickerHandle]({% slug api_dateinputs_timepickerhandle %}).
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<any>>;