@progress/kendo-react-dateinputs 5.18.0-dev.202309081432 → 5.18.0-dev.202309111225

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

@@ -17,6 +17,18 @@ export interface DatePickerChangeEvent {
     show: boolean;
     target: DatePicker;
 }
+/**
+ * The arguments for the `onOpen` event of the DatePicker.
+ */
+export interface DatePickerOpenEvent {
+    target: DatePicker;
+}
+/**
+ * The arguments for the `onClose` event of the DatePicker.
+ */
+export interface DatePickerCloseEvent {
+    target: DatePicker;
+}
 /**
  * Represents the props of the [KendoReact DatePicker component]({% slug overview_datepicker %}).
  */
@@ -29,6 +41,14 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps
      * Fires each time the user selects a new value ([see example]({% slug controlled_datepicker %}#toc-controlling-the-date-value)).
      */
     onChange?: (event: DatePickerChangeEvent) => void;
+    /**
+     * Fires each time the popup is opened.
+     */
+    onOpen?: (event: DatePickerOpenEvent) => void;
+    /**
+     * Fires each time the popup is closed.
+     */
+    onClose?: (event: DatePickerCloseEvent) => void;
     /**
      * Specifies the value of the DatePicker ([see example]({% slug controlled_datepicker %}#toc-controlling-the-date-value)).
      *

package/dist/es/datepicker/DatePicker.js

@@ -137,8 +137,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         };
         _this.handleValueChange = function (value, event) {
             _this.setState({
-                value: cloneDate(value || undefined),
-                show: false
+                value: cloneDate(value || undefined)
             });
             _this.valueDuringOnChange = value;
             _this.showDuringOnChange = false;
@@ -157,6 +156,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             }
             _this.valueDuringOnChange = undefined;
             _this.showDuringOnChange = undefined;
+            _this.setShow(false);
         };
         _this.handleFocus = function () {
             _this.setState({ focused: true });
@@ -475,7 +475,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
                         _b['k-disabled'] = _this.props.disabled,
                         _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur, onClick: _this.mobileMode ? _this.handleIconClick : undefined },
                     React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput, ariaRole: 'combobox', readonly: _this.mobileMode, ariaExpanded: _this.show, ariaControls: _this._popupId }, dateInputProps)),
-                    React.createElement(_this.toggleButtonComp, { type: "button", icon: "calendar", svgIcon: calendarIcon, title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
+                    React.createElement(_this.toggleButtonComp, { type: "button", icon: "calendar", svgIcon: calendarIcon, title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.mobileMode ? undefined : _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
                     !_this.mobileMode && _this.renderPopup()),
                 _this.mobileMode && _this.renderAdaptivePopup()));
         }));
@@ -484,10 +484,21 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             : datepicker;
     };
     DatePickerWithoutContext.prototype.setShow = function (show) {
+        var _a = this.props, onOpen = _a.onOpen, onClose = _a.onClose;
         if (this.show === show) {
             return;
         }
         this.setState({ show: show });
+        if (show && onOpen) {
+            onOpen.call(undefined, {
+                target: this
+            });
+        }
+        if (!show && onClose) {
+            onClose.call(undefined, {
+                target: this
+            });
+        }
     };
     DatePickerWithoutContext.prototype.mergeTime = function (value) {
         return this.value && value ? setTime(value, this.value) : value;

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

@@ -21,6 +21,18 @@ export interface DateRangePickerChangeEvent {
     show?: boolean;
     target: DateRangePicker;
 }
+/**
+ * The arguments for the `onOpen` event of the DateRangePicker.
+ */
+export interface DateRangePickerOpenEvent {
+    target: DateRangePicker;
+}
+/**
+ * The arguments for the `onClose` event of the DateRangePicker.
+ */
+export interface DateRangePickerCloseEvent {
+    target: DateRangePicker;
+}
 /**
  * Represents the props of the [KendoReact DateRangePicker component]({% slug overview_daterangepicker %}).
  */
@@ -40,6 +52,14 @@ export interface DateRangePickerProps extends DateRangePickerSettings {
      * Fires each time the user selects a part of a date range ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-value)).
      */
     onChange?: (event: DateRangePickerChangeEvent) => void;
+    /**
+     * Fires each time the popup is opened.
+     */
+    onOpen?: (event: DateRangePickerOpenEvent) => void;
+    /**
+     * Fires each time the popup is closed.
+     */
+    onClose?: (event: DateRangePickerCloseEvent) => void;
     /**
      * Fires each time the popup of the DateRangePicker is about to cancel in ([adaptive mode]({% slug adaptive_rendering_daterangepicker %})).
      */

package/dist/es/daterangepicker/DateRangePicker.js

@@ -466,10 +466,21 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
     DateRangePickerWithoutContext.prototype.setShow = function (show) {
+        var _a = this.props, onOpen = _a.onOpen, onClose = _a.onClose;
         if (this.show === show) {
             return;
         }
         this.setState({ show: show });
+        if (show && onOpen) {
+            onOpen.call(undefined, {
+                target: this
+            });
+        }
+        if (!show && onClose) {
+            onClose.call(undefined, {
+                target: this
+            });
+        }
     };
     DateRangePickerWithoutContext.prototype.calculateMedia = function (entries) {
         for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {

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

@@ -13,6 +13,18 @@ export interface DateTimePickerChangeEvent {
     show: boolean;
     target: DateTimePicker;
 }
+/**
+ * The arguments for the `onOpen` event of the DateTimePicker.
+ */
+export interface DateTimePickerOpenEvent {
+    target: DateTimePicker;
+}
+/**
+ * The arguments for the `onClose` event of the DateTimePicker.
+ */
+export interface DateTimePickerCloseEvent {
+    target: DateTimePicker;
+}
 /**
  * Represents the props of the [KendoReact DateTimePicker component]({% slug overview_datetimepicker %}).
  */
@@ -29,6 +41,14 @@ export interface DateTimePickerProps extends DateTimePickerSettings, FormCompone
      * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-date-value)).
      */
     onChange?: (event: DateTimePickerChangeEvent) => void;
+    /**
+     * Fires each time the popup is opened.
+     */
+    onOpen?: (event: DateTimePickerOpenEvent) => void;
+    /**
+     * Fires each time the popup is closed.
+     */
+    onClose?: (event: DateTimePickerCloseEvent) => void;
     /**
      * Specifies the value of the DateTimePicker
      * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-date-value)).

package/dist/es/datetimepicker/DateTimePicker.js

@@ -95,8 +95,7 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         };
         _this.handleValueChange = function (event) {
             _this.setState({
-                value: cloneDate(event.value || undefined),
-                show: false
+                value: cloneDate(event.value || undefined)
             });
             _this.valueDuringOnChange = event.value;
             _this.showDuringOnChange = false;
@@ -115,6 +114,7 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
             }
             _this.valueDuringOnChange = undefined;
             _this.showDuringOnChange = undefined;
+            _this.setShow(false);
         };
         _this.handleFocus = function () {
             _this.setState({ focused: true });
@@ -403,7 +403,7 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
                         _b['k-disabled'] = _this.props.disabled,
                         _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: !_this.mobileMode ? onFocus : undefined, onBlur: onBlur, onClick: _this.mobileMode ? _this.handleDateIconClick : undefined },
                     React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput, ariaRole: "combobox", ariaControls: _this._popupId, readonly: _this.mobileMode }, dataInputProps)),
-                    React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', svgIcon: calendarIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: provideLocalizationService(_this)
+                    React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', svgIcon: calendarIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.mobileMode ? undefined : _this.handleDateIconClick, title: provideLocalizationService(_this)
                             .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]), className: "k-input-button", rounded: null }, {
                         'aria-label': provideLocalizationService(_this)
                             .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
@@ -422,10 +422,21 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
             : dateTimePicker;
     };
     DateTimePickerWithoutContext.prototype.setShow = function (show) {
+        var _a = this.props, onOpen = _a.onOpen, onClose = _a.onClose;
         if (this.show === show) {
             return;
         }
         this.setState({ show: show });
+        if (show && onOpen) {
+            onOpen.call(undefined, {
+                target: this
+            });
+        }
+        if (!show && onClose) {
+            onClose.call(undefined, {
+                target: this
+            });
+        }
     };
     DateTimePickerWithoutContext.prototype.nextTick = function (f) {
         // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.

package/dist/es/main.d.ts

@@ -1,16 +1,16 @@
 import { Calendar, CalendarWithoutContext, CalendarProps, CalendarPropsContext, CalendarHandle, CalendarChangeEvent } from './calendar/components/Calendar';
 import { DateInput, DateInputWithoutContext, DateInputProps, DateInputPropsContext, DateInputHandle, DateInputChangeEvent } from './dateinput/DateInput';
-import { DatePicker, DatePickerWithoutContext, DatePickerProps, DatePickerPropsContext, DatePickerHandle, DatePickerChangeEvent } from './datepicker/DatePicker';
-import { TimePicker, TimePickerWithoutContext, TimePickerProps, TimePickerPropsContext, TimePickerHandle, TimePickerChangeEvent } from './timepicker/TimePicker';
+import { DatePicker, DatePickerWithoutContext, DatePickerProps, DatePickerPropsContext, DatePickerHandle, DatePickerChangeEvent, DatePickerOpenEvent, DatePickerCloseEvent } from './datepicker/DatePicker';
+import { TimePicker, TimePickerWithoutContext, TimePickerProps, TimePickerPropsContext, TimePickerHandle, TimePickerChangeEvent, TimePickerOpenEvent, TimePickerCloseEvent } from './timepicker/TimePicker';
 import { MultiViewCalendar, MultiViewCalendarWithoutContext, MultiViewCalendarProps, MultiViewCalendarPropsContext, MultiViewCalendarHandle, MultiViewCalendarChangeEvent } from './calendar/components/MultiViewCalendar';
-import { DateRangePicker, DateRangePickerWithoutContext, DateRangePickerProps, DateRangePickerPropsContext, DateRangePickerHandle, DateRangePickerChangeEvent } from './daterangepicker/DateRangePicker';
+import { DateRangePicker, DateRangePickerWithoutContext, DateRangePickerProps, DateRangePickerPropsContext, DateRangePickerHandle, DateRangePickerChangeEvent, DateRangePickerOpenEvent, DateRangePickerCloseEvent } 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, DateTimePickerWithoutContext, DateTimePickerProps, DateTimePickerPropsContext, DateTimePickerHandle, DateTimePickerChangeEvent } from './datetimepicker/DateTimePicker';
+import { DateTimePicker, DateTimePickerWithoutContext, DateTimePickerProps, DateTimePickerPropsContext, DateTimePickerHandle, DateTimePickerChangeEvent, DateTimePickerOpenEvent, DateTimePickerCloseEvent } from './datetimepicker/DateTimePicker';
 import { DatePickerSettings } from './datepicker/models';
 import { DateTimePickerSettings } from './datetimepicker/models';
 import { TimePickerSettings } from './timepicker/models';
@@ -32,4 +32,4 @@ export { getToday, MIN_DATE, MAX_DATE, MAX_TIME, MIN_TIME } from './utils';
 export { getNow } from './timepicker/utils';
 import { HorizontalViewList, HorizontalViewListProps } from './calendar/components/HorizontalViewList';
 import { TimeSelector } from './timepicker/TimeSelector';
-export { dateInputsMessages, today, increaseValue, decreaseValue, toggleCalendar, swapStartEnd, separator, start, end, toggleDateTimeSelector, TimeSelector, ViewList, Virtualization, Header, TodayCommand, CalendarWithoutContext, DateInputWithoutContext, DatePickerWithoutContext, TimePickerWithoutContext, DateRangePickerWithoutContext, MultiViewCalendarWithoutContext, DateTimePickerWithoutContext, HorizontalViewList, HorizontalViewListProps, TimeList, TimePart, 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 };
+export { dateInputsMessages, today, increaseValue, decreaseValue, toggleCalendar, swapStartEnd, separator, start, end, toggleDateTimeSelector, TimeSelector, ViewList, Virtualization, Header, TodayCommand, CalendarWithoutContext, DateInputWithoutContext, DatePickerWithoutContext, TimePickerWithoutContext, DateRangePickerWithoutContext, MultiViewCalendarWithoutContext, DateTimePickerWithoutContext, HorizontalViewList, HorizontalViewListProps, TimeList, TimePart, 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, DatePickerOpenEvent, DatePickerCloseEvent, TimePicker, TimePickerProps, TimePickerPropsContext, TimePickerHandle, TimePickerSettings, TimePickerChangeEvent, TimePickerOpenEvent, TimePickerCloseEvent, MultiViewCalendar, MultiViewCalendarProps, MultiViewCalendarPropsContext, MultiViewCalendarHandle, MultiViewCalendarSettings, MultiViewCalendarMode, MultiViewCalendarChangeEvent, DateRangePicker, DateRangePickerProps, DateRangePickerPropsContext, DateRangePickerHandle, DateRangePickerSettings, DateRangePickerCalendarSettings, DateRangePickerDateInputSettings, DateRangePickerPopupSettings, DateRangePickerChangeEvent, DateRangePickerOpenEvent, DateRangePickerCloseEvent, DateTimePicker, DateTimePickerProps, DateTimePickerPropsContext, DateTimePickerHandle, DateTimePickerSettings, DateTimePickerChangeEvent, DateTimePickerOpenEvent, DateTimePickerCloseEvent, SelectionRange, FormComponentValidity };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1694181710,
+    publishDate: 1694433092,
     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/TimePicker.d.ts

@@ -15,6 +15,18 @@ export interface TimePickerChangeEvent {
     show: boolean;
     target: TimePicker;
 }
+/**
+ * The arguments for the `onOpen` event of the TimePicker.
+ */
+export interface TimePickerOpenEvent {
+    target: TimePicker;
+}
+/**
+ * The arguments for the `onClose` event of the TimePicker.
+ */
+export interface TimePickerCloseEvent {
+    target: TimePicker;
+}
 /**
  * Represents the props of the [KendoReact TimePicker component]({% slug overview_timepicker %}).
  */
@@ -27,6 +39,14 @@ export interface TimePickerProps extends TimePickerSettings, FormComponentProps
      * Fires each time the user selects a new value ([see example]({% slug controlled_timepicker %}#toc-controlling-the-date-value)).
      */
     onChange?: (event: TimePickerChangeEvent) => void;
+    /**
+     * Fires each time the popup is opened.
+     */
+    onOpen?: (event: TimePickerOpenEvent) => void;
+    /**
+     * Fires each time the popup is closed.
+     */
+    onClose?: (event: TimePickerCloseEvent) => void;
     /**
      * Specifies the value of the TimePicker ([see example]({% slug controlled_timepicker %}#toc-controlling-the-date-value)).
      *

package/dist/es/timepicker/TimePicker.js

@@ -130,8 +130,7 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         };
         _this.handleValueChange = function (event) {
             _this.setState({
-                value: cloneDate(event.value || _this.state.candidate),
-                show: false
+                value: cloneDate(event.value || _this.state.candidate)
             });
             _this.valueDuringOnChange = event.value;
             _this.showDuringOnChange = false;
@@ -149,6 +148,7 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             }
             _this.valueDuringOnChange = undefined;
             _this.showDuringOnChange = undefined;
+            _this.setShow(false);
         };
         _this.handleFocus = function () {
             _this.setState({ focused: true });
@@ -460,7 +460,7 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
                         _b['k-disabled'] = _this.props.disabled,
                         _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur, onClick: _this.mobileMode ? _this.handleIconClick : undefined },
                     React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput, ariaRole: "combobox", ariaControls: _this._popupId }, dateInputProps)),
-                    React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'clock', svgIcon: clockIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, className: "k-input-button", rounded: null }, {
+                    React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'clock', svgIcon: clockIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.mobileMode ? undefined : _this.handleIconClick, title: toggleTimeMessage, className: "k-input-button", rounded: null }, {
                         'aria-label': toggleClockMessage
                     })),
                     !_this.mobileMode && _this.renderPopup()),
@@ -474,10 +474,21 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         return setTime(MIDNIGHT_DATE, date);
     };
     TimePickerWithoutContext.prototype.setShow = function (show) {
+        var _a = this.props, onOpen = _a.onOpen, onClose = _a.onClose;
         if (this.show === show) {
             return;
         }
         this.setState({ show: show });
+        if (show && onOpen) {
+            onOpen.call(undefined, {
+                target: this
+            });
+        }
+        if (!show && onClose) {
+            onClose.call(undefined, {
+                target: this
+            });
+        }
     };
     TimePickerWithoutContext.prototype.mergeTime = function (value) {
         return this.value && value ? setTime(this.value, value) : value;

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

@@ -17,6 +17,18 @@ export interface DatePickerChangeEvent {
     show: boolean;
     target: DatePicker;
 }
+/**
+ * The arguments for the `onOpen` event of the DatePicker.
+ */
+export interface DatePickerOpenEvent {
+    target: DatePicker;
+}
+/**
+ * The arguments for the `onClose` event of the DatePicker.
+ */
+export interface DatePickerCloseEvent {
+    target: DatePicker;
+}
 /**
  * Represents the props of the [KendoReact DatePicker component]({% slug overview_datepicker %}).
  */
@@ -29,6 +41,14 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps
      * Fires each time the user selects a new value ([see example]({% slug controlled_datepicker %}#toc-controlling-the-date-value)).
      */
     onChange?: (event: DatePickerChangeEvent) => void;
+    /**
+     * Fires each time the popup is opened.
+     */
+    onOpen?: (event: DatePickerOpenEvent) => void;
+    /**
+     * Fires each time the popup is closed.
+     */
+    onClose?: (event: DatePickerCloseEvent) => void;
     /**
      * Specifies the value of the DatePicker ([see example]({% slug controlled_datepicker %}#toc-controlling-the-date-value)).
      *

package/dist/npm/datepicker/DatePicker.js

@@ -140,8 +140,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         };
         _this.handleValueChange = function (value, event) {
             _this.setState({
-                value: (0, kendo_date_math_1.cloneDate)(value || undefined),
-                show: false
+                value: (0, kendo_date_math_1.cloneDate)(value || undefined)
             });
             _this.valueDuringOnChange = value;
             _this.showDuringOnChange = false;
@@ -160,6 +159,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             }
             _this.valueDuringOnChange = undefined;
             _this.showDuringOnChange = undefined;
+            _this.setShow(false);
         };
         _this.handleFocus = function () {
             _this.setState({ focused: true });
@@ -478,7 +478,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
                         _b['k-disabled'] = _this.props.disabled,
                         _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur, onClick: _this.mobileMode ? _this.handleIconClick : undefined },
                     React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput, ariaRole: 'combobox', readonly: _this.mobileMode, ariaExpanded: _this.show, ariaControls: _this._popupId }, dateInputProps)),
-                    React.createElement(_this.toggleButtonComp, { type: "button", icon: "calendar", svgIcon: kendo_svg_icons_1.calendarIcon, title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
+                    React.createElement(_this.toggleButtonComp, { type: "button", icon: "calendar", svgIcon: kendo_svg_icons_1.calendarIcon, title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.mobileMode ? undefined : _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
                     !_this.mobileMode && _this.renderPopup()),
                 _this.mobileMode && _this.renderAdaptivePopup()));
         }));
@@ -487,10 +487,21 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             : datepicker;
     };
     DatePickerWithoutContext.prototype.setShow = function (show) {
+        var _a = this.props, onOpen = _a.onOpen, onClose = _a.onClose;
         if (this.show === show) {
             return;
         }
         this.setState({ show: show });
+        if (show && onOpen) {
+            onOpen.call(undefined, {
+                target: this
+            });
+        }
+        if (!show && onClose) {
+            onClose.call(undefined, {
+                target: this
+            });
+        }
     };
     DatePickerWithoutContext.prototype.mergeTime = function (value) {
         return this.value && value ? (0, utils_1.setTime)(value, this.value) : value;

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

@@ -21,6 +21,18 @@ export interface DateRangePickerChangeEvent {
     show?: boolean;
     target: DateRangePicker;
 }
+/**
+ * The arguments for the `onOpen` event of the DateRangePicker.
+ */
+export interface DateRangePickerOpenEvent {
+    target: DateRangePicker;
+}
+/**
+ * The arguments for the `onClose` event of the DateRangePicker.
+ */
+export interface DateRangePickerCloseEvent {
+    target: DateRangePicker;
+}
 /**
  * Represents the props of the [KendoReact DateRangePicker component]({% slug overview_daterangepicker %}).
  */
@@ -40,6 +52,14 @@ export interface DateRangePickerProps extends DateRangePickerSettings {
      * Fires each time the user selects a part of a date range ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-value)).
      */
     onChange?: (event: DateRangePickerChangeEvent) => void;
+    /**
+     * Fires each time the popup is opened.
+     */
+    onOpen?: (event: DateRangePickerOpenEvent) => void;
+    /**
+     * Fires each time the popup is closed.
+     */
+    onClose?: (event: DateRangePickerCloseEvent) => void;
     /**
      * Fires each time the popup of the DateRangePicker is about to cancel in ([adaptive mode]({% slug adaptive_rendering_daterangepicker %})).
      */

package/dist/npm/daterangepicker/DateRangePicker.js

@@ -469,10 +469,21 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
     DateRangePickerWithoutContext.prototype.setShow = function (show) {
+        var _a = this.props, onOpen = _a.onOpen, onClose = _a.onClose;
         if (this.show === show) {
             return;
         }
         this.setState({ show: show });
+        if (show && onOpen) {
+            onOpen.call(undefined, {
+                target: this
+            });
+        }
+        if (!show && onClose) {
+            onClose.call(undefined, {
+                target: this
+            });
+        }
     };
     DateRangePickerWithoutContext.prototype.calculateMedia = function (entries) {
         for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {

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

@@ -13,6 +13,18 @@ export interface DateTimePickerChangeEvent {
     show: boolean;
     target: DateTimePicker;
 }
+/**
+ * The arguments for the `onOpen` event of the DateTimePicker.
+ */
+export interface DateTimePickerOpenEvent {
+    target: DateTimePicker;
+}
+/**
+ * The arguments for the `onClose` event of the DateTimePicker.
+ */
+export interface DateTimePickerCloseEvent {
+    target: DateTimePicker;
+}
 /**
  * Represents the props of the [KendoReact DateTimePicker component]({% slug overview_datetimepicker %}).
  */
@@ -29,6 +41,14 @@ export interface DateTimePickerProps extends DateTimePickerSettings, FormCompone
      * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-date-value)).
      */
     onChange?: (event: DateTimePickerChangeEvent) => void;
+    /**
+     * Fires each time the popup is opened.
+     */
+    onOpen?: (event: DateTimePickerOpenEvent) => void;
+    /**
+     * Fires each time the popup is closed.
+     */
+    onClose?: (event: DateTimePickerCloseEvent) => void;
     /**
      * Specifies the value of the DateTimePicker
      * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-date-value)).

package/dist/npm/datetimepicker/DateTimePicker.js

@@ -98,8 +98,7 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         };
         _this.handleValueChange = function (event) {
             _this.setState({
-                value: (0, kendo_date_math_1.cloneDate)(event.value || undefined),
-                show: false
+                value: (0, kendo_date_math_1.cloneDate)(event.value || undefined)
             });
             _this.valueDuringOnChange = event.value;
             _this.showDuringOnChange = false;
@@ -118,6 +117,7 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
             }
             _this.valueDuringOnChange = undefined;
             _this.showDuringOnChange = undefined;
+            _this.setShow(false);
         };
         _this.handleFocus = function () {
             _this.setState({ focused: true });
@@ -406,7 +406,7 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
                         _b['k-disabled'] = _this.props.disabled,
                         _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: !_this.mobileMode ? onFocus : undefined, onBlur: onBlur, onClick: _this.mobileMode ? _this.handleDateIconClick : undefined },
                     React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput, ariaRole: "combobox", ariaControls: _this._popupId, readonly: _this.mobileMode }, dataInputProps)),
-                    React.createElement(kendo_react_buttons_1.Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', svgIcon: kendo_svg_icons_1.calendarIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: (0, kendo_react_intl_1.provideLocalizationService)(_this)
+                    React.createElement(kendo_react_buttons_1.Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', svgIcon: kendo_svg_icons_1.calendarIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.mobileMode ? undefined : _this.handleDateIconClick, title: (0, kendo_react_intl_1.provideLocalizationService)(_this)
                             .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector]), className: "k-input-button", rounded: null }, {
                         'aria-label': (0, kendo_react_intl_1.provideLocalizationService)(_this)
                             .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector])
@@ -425,10 +425,21 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
             : dateTimePicker;
     };
     DateTimePickerWithoutContext.prototype.setShow = function (show) {
+        var _a = this.props, onOpen = _a.onOpen, onClose = _a.onClose;
         if (this.show === show) {
             return;
         }
         this.setState({ show: show });
+        if (show && onOpen) {
+            onOpen.call(undefined, {
+                target: this
+            });
+        }
+        if (!show && onClose) {
+            onClose.call(undefined, {
+                target: this
+            });
+        }
     };
     DateTimePickerWithoutContext.prototype.nextTick = function (f) {
         // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.

package/dist/npm/main.d.ts

@@ -1,16 +1,16 @@
 import { Calendar, CalendarWithoutContext, CalendarProps, CalendarPropsContext, CalendarHandle, CalendarChangeEvent } from './calendar/components/Calendar';
 import { DateInput, DateInputWithoutContext, DateInputProps, DateInputPropsContext, DateInputHandle, DateInputChangeEvent } from './dateinput/DateInput';
-import { DatePicker, DatePickerWithoutContext, DatePickerProps, DatePickerPropsContext, DatePickerHandle, DatePickerChangeEvent } from './datepicker/DatePicker';
-import { TimePicker, TimePickerWithoutContext, TimePickerProps, TimePickerPropsContext, TimePickerHandle, TimePickerChangeEvent } from './timepicker/TimePicker';
+import { DatePicker, DatePickerWithoutContext, DatePickerProps, DatePickerPropsContext, DatePickerHandle, DatePickerChangeEvent, DatePickerOpenEvent, DatePickerCloseEvent } from './datepicker/DatePicker';
+import { TimePicker, TimePickerWithoutContext, TimePickerProps, TimePickerPropsContext, TimePickerHandle, TimePickerChangeEvent, TimePickerOpenEvent, TimePickerCloseEvent } from './timepicker/TimePicker';
 import { MultiViewCalendar, MultiViewCalendarWithoutContext, MultiViewCalendarProps, MultiViewCalendarPropsContext, MultiViewCalendarHandle, MultiViewCalendarChangeEvent } from './calendar/components/MultiViewCalendar';
-import { DateRangePicker, DateRangePickerWithoutContext, DateRangePickerProps, DateRangePickerPropsContext, DateRangePickerHandle, DateRangePickerChangeEvent } from './daterangepicker/DateRangePicker';
+import { DateRangePicker, DateRangePickerWithoutContext, DateRangePickerProps, DateRangePickerPropsContext, DateRangePickerHandle, DateRangePickerChangeEvent, DateRangePickerOpenEvent, DateRangePickerCloseEvent } 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, DateTimePickerWithoutContext, DateTimePickerProps, DateTimePickerPropsContext, DateTimePickerHandle, DateTimePickerChangeEvent } from './datetimepicker/DateTimePicker';
+import { DateTimePicker, DateTimePickerWithoutContext, DateTimePickerProps, DateTimePickerPropsContext, DateTimePickerHandle, DateTimePickerChangeEvent, DateTimePickerOpenEvent, DateTimePickerCloseEvent } from './datetimepicker/DateTimePicker';
 import { DatePickerSettings } from './datepicker/models';
 import { DateTimePickerSettings } from './datetimepicker/models';
 import { TimePickerSettings } from './timepicker/models';
@@ -32,4 +32,4 @@ export { getToday, MIN_DATE, MAX_DATE, MAX_TIME, MIN_TIME } from './utils';
 export { getNow } from './timepicker/utils';
 import { HorizontalViewList, HorizontalViewListProps } from './calendar/components/HorizontalViewList';
 import { TimeSelector } from './timepicker/TimeSelector';
-export { dateInputsMessages, today, increaseValue, decreaseValue, toggleCalendar, swapStartEnd, separator, start, end, toggleDateTimeSelector, TimeSelector, ViewList, Virtualization, Header, TodayCommand, CalendarWithoutContext, DateInputWithoutContext, DatePickerWithoutContext, TimePickerWithoutContext, DateRangePickerWithoutContext, MultiViewCalendarWithoutContext, DateTimePickerWithoutContext, HorizontalViewList, HorizontalViewListProps, TimeList, TimePart, 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 };
+export { dateInputsMessages, today, increaseValue, decreaseValue, toggleCalendar, swapStartEnd, separator, start, end, toggleDateTimeSelector, TimeSelector, ViewList, Virtualization, Header, TodayCommand, CalendarWithoutContext, DateInputWithoutContext, DatePickerWithoutContext, TimePickerWithoutContext, DateRangePickerWithoutContext, MultiViewCalendarWithoutContext, DateTimePickerWithoutContext, HorizontalViewList, HorizontalViewListProps, TimeList, TimePart, 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, DatePickerOpenEvent, DatePickerCloseEvent, TimePicker, TimePickerProps, TimePickerPropsContext, TimePickerHandle, TimePickerSettings, TimePickerChangeEvent, TimePickerOpenEvent, TimePickerCloseEvent, MultiViewCalendar, MultiViewCalendarProps, MultiViewCalendarPropsContext, MultiViewCalendarHandle, MultiViewCalendarSettings, MultiViewCalendarMode, MultiViewCalendarChangeEvent, DateRangePicker, DateRangePickerProps, DateRangePickerPropsContext, DateRangePickerHandle, DateRangePickerSettings, DateRangePickerCalendarSettings, DateRangePickerDateInputSettings, DateRangePickerPopupSettings, DateRangePickerChangeEvent, DateRangePickerOpenEvent, DateRangePickerCloseEvent, DateTimePicker, DateTimePickerProps, DateTimePickerPropsContext, DateTimePickerHandle, DateTimePickerSettings, DateTimePickerChangeEvent, DateTimePickerOpenEvent, DateTimePickerCloseEvent, SelectionRange, FormComponentValidity };

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1694181710,
+    publishDate: 1694433092,
     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'
 };