@progress/kendo-react-dateinputs 5.14.0-dev.202305100821 → 5.14.0-dev.202305151331

package/dist/es/common/AdaptiveMode.d.ts

@@ -8,7 +8,14 @@ export interface AdaptiveModeProps {
     adaptiveTitle?: string | React.ReactNode;
     onClose?: (event: React.SyntheticEvent) => void;
     windowWidth?: number;
+    mobileFilter?: React.ReactNode;
     children: React.ReactNode;
+    footer?: {
+        cancelText: string;
+        onCancel: (event: React.SyntheticEvent) => void;
+        applyText: string;
+        onApply: (event: React.SyntheticEvent) => void;
+    };
 }
 /** @hidden */
 export declare const AdaptiveMode: (props: AdaptiveModeProps) => JSX.Element;

package/dist/es/common/AdaptiveMode.js

@@ -10,20 +10,22 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
-import { ActionSheet, ActionSheetHeader } from '@progress/kendo-react-layout';
+import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '@progress/kendo-react-layout';
 import { xIcon } from '@progress/kendo-svg-icons';
 import { Button } from '@progress/kendo-react-buttons';
-import { MOBILE_SMALL_DEVISE } from '../common/constants';
+/** @hidden */
+var MOBILE_SMALL_DEVISE = 500;
 /** @hidden */
 export var AdaptiveMode = function (props) {
+    var footer = props.footer, children = props.children, _a = props.windowWidth, windowWidth = _a === void 0 ? 0 : _a, navigatable = props.navigatable, navigatableElements = props.navigatableElements, expand = props.expand, animation = props.animation, onClose = props.onClose, adaptiveTitle = props.adaptiveTitle, mobileFilter = props.mobileFilter;
     var defaultProps = {
-        navigatable: props.navigatable || false,
-        navigatableElements: props.navigatableElements || [],
-        expand: props.expand,
-        animation: props.animation === false ? false : true,
-        onClose: props.onClose,
-        animationStyles: props.windowWidth && props.windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
-        className: props.windowWidth && props.windowWidth <= MOBILE_SMALL_DEVISE
+        navigatable: navigatable || false,
+        navigatableElements: navigatableElements || [],
+        expand: expand,
+        animation: animation === false ? false : true,
+        onClose: onClose,
+        animationStyles: windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
+        className: windowWidth <= MOBILE_SMALL_DEVISE
             ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
             : 'k-adaptive-actionsheet k-actionsheet-bottom'
     };
@@ -31,8 +33,13 @@ export var AdaptiveMode = function (props) {
         React.createElement(ActionSheetHeader, { className: 'k-text-center' },
             React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
                 React.createElement("div", { className: "k-actionsheet-title" },
-                    React.createElement("div", null, props.adaptiveTitle)),
+                    React.createElement("div", null, adaptiveTitle)),
                 React.createElement("div", { className: "k-actionsheet-actions" },
-                    React.createElement(Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", icon: 'x', svgIcon: xIcon, onClick: props.onClose })))),
-        props.children));
+                    React.createElement(Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", icon: 'x', svgIcon: xIcon, onClick: onClose }))),
+            mobileFilter &&
+                React.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, mobileFilter)),
+        children,
+        footer && React.createElement(ActionSheetFooter, { className: 'k-actions k-actions-stretched' },
+            React.createElement(Button, { size: "large", tabIndex: 0, "aria-label": footer.cancelText, "aria-disabled": "false", type: "button", onClick: function (event) { return footer.onCancel(event); } }, footer.cancelText),
+            React.createElement(Button, { tabIndex: 0, themeColor: "primary", size: "large", "aria-label": footer.applyText, "aria-disabled": "false", type: "button", onClick: function (event) { return footer.onApply(event); } }, footer.applyText))));
 };

package/dist/es/package-metadata.js

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

@@ -20,6 +20,7 @@ export interface TimeListProps {
     boundRange?: boolean;
     disabled?: boolean;
     show?: boolean;
+    mobileMode?: boolean;
 }
 /**
  * @hidden

package/dist/es/timepicker/TimeList.js

@@ -27,6 +27,7 @@ var SCROLL_THRESHOLD = 2; // < 2px threshold
 var SNAP_THRESHOLD = 0.05; // % of the item height
 var SCROLL_THROTTLE = 100; // ms
 var SKIP = 0;
+var MOBILE_MODE_OFFSET = 9;
 var getters = (_a = {},
     _a[Keys.end] = function (data, _) { return data[data.length - 1]; },
     _a[Keys.home] = function (data, _) { return data[0]; },
@@ -88,6 +89,10 @@ var TimeList = /** @class */ (function (_super) {
             _this.listHeight = _this.dom.timeListHeight;
             _this.topOffset = (_this.listHeight - _this.itemHeight) / 2;
             _this.bottomOffset = _this.listHeight - _this.itemHeight;
+            if (_this.props.mobileMode) {
+                _this.topOffset += MOBILE_MODE_OFFSET;
+                _this.bottomOffset += MOBILE_MODE_OFFSET * 2;
+            }
             _this.topThreshold = _this.itemHeight * SNAP_THRESHOLD;
             _this.bottomThreshold = _this.itemHeight * (1 - SNAP_THRESHOLD);
         };

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

@@ -37,6 +37,7 @@ export interface TimePartProps {
     className?: string;
     onMount?: (value: Date) => void;
     show?: boolean;
+    mobileMode?: boolean;
 }
 /**
  * @hidden

package/dist/es/timepicker/TimePart.js

@@ -207,7 +207,7 @@ var TimePart = /** @class */ (function (_super) {
      */
     TimePart.prototype.render = function () {
         var _this = this;
-        var _a = this.props, format = _a.format, smoothScroll = _a.smoothScroll, onNowClick = _a.onNowClick, className = _a.className, disabled = _a.disabled;
+        var _a = this.props, format = _a.format, smoothScroll = _a.smoothScroll, onNowClick = _a.onNowClick, className = _a.className, disabled = _a.disabled, mobileMode = _a.mobileMode, show = _a.show;
         this.snapTime = snapTime(generateSnappers(this.steps, this.min));
         this.dateFormatParts = this.intl
             .splitDateFormat(format || TimePart.defaultProps.format)
@@ -233,7 +233,7 @@ var TimePart = /** @class */ (function (_super) {
                             React.createElement("span", { className: "k-title", onMouseDown: function (e) { e.preventDefault(); } }, _this.intl.dateFieldName(part)),
                             React.createElement(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, show: _this.props.show }))
+                                } _this.timeLists.push(el); }, id: idx, onFocus: function () { _this.handleListFocus(idx); }, onBlur: _this.handleListBlur, onChange: _this.handleChange, value: _this.value, disabled: disabled, show: show, mobileMode: mobileMode }))
                         : React.createElement("div", { key: idx, className: "k-time-separator" }, part.pattern));
                 }))));
     };

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { FormComponent, FormComponentProps, FormComponentValidity } from '@progress/kendo-react-common';
+import { LocalizationService } from '@progress/kendo-react-intl';
 import { DateInput, DateInputProps } from '../dateinput/DateInput';
 import { TimeSelector } from './TimeSelector';
 import { TimePickerSettings } from './models';
@@ -69,6 +70,14 @@ export interface TimePickerProps extends TimePickerSettings, FormComponentProps
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
 }
 /**
  * @hidden
@@ -77,6 +86,8 @@ export interface TimePickerState {
     value: Date | null;
     show: boolean;
     focused: boolean;
+    windowWidth?: number;
+    candidate: Date | null;
 }
 /** @hidden */
 export declare class TimePickerWithoutContext extends React.Component<TimePickerProps, TimePickerState> implements FormComponent {
@@ -181,6 +192,8 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
     private showDuringOnChange?;
     private shouldFocusDateInput;
     private prevShow;
+    private observerResize?;
+    private get document();
     constructor(props: TimePickerProps);
     /**
      * Gets the wrapping element of the TimePicker.
@@ -210,6 +223,10 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
      * Represents the validity state into which the TimePicker is set.
      */
     get validity(): FormComponentValidity;
+    /**
+     * The mobile mode of the ComboBox.
+     */
+    get mobileMode(): boolean;
     /**
      * @hidden
      */
@@ -222,6 +239,7 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
     private get min();
     private get max();
     protected get dateInputComp(): React.ComponentType<DateInputProps<any>>;
+    protected get localizationService(): LocalizationService;
     /**
      * @hidden
      */
@@ -230,6 +248,10 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
      * @hidden
      */
     componentDidUpdate(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
     /**
      * @hidden
      */
@@ -238,6 +260,9 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
      * @hidden
      */
     render(): JSX.Element;
+    private renderTimeSelector;
+    private renderPopup;
+    private renderAdaptivePopup;
     protected setTimeSelectorRef: (timeSelector: TimeSelector | null) => void;
     protected nextValue: (nextProps: TimePickerProps, nextState: TimePickerState) => Date | null;
     protected nextShow: (nextProps: TimePickerProps, nextState: TimePickerState) => boolean;
@@ -245,6 +270,7 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
     protected setShow(show: boolean): void;
     protected mergeTime(value: Date | null): Date | null;
     private handleInputValueChange;
+    private handleTimeChange;
     private handleValueChange;
     private handleFocus;
     private handleBlur;
@@ -252,6 +278,7 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
     private handleIconClick;
     private handleIconMouseDown;
     private handleKeyDown;
+    private calculateMedia;
 }
 /**
  * Represents the PropsContext of the `TimePicker` component.

package/dist/es/timepicker/TimePicker.js

@@ -39,18 +39,21 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Popup } from '@progress/kendo-react-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext, kendoThemeMaps, canUseDOM } from '@progress/kendo-react-common';
 import { clockIcon } from '@progress/kendo-svg-icons';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
-import { messages, toggleTimeSelector, toggleClock } from '../messages';
+import { messages, toggleTimeSelector, toggleClock, timePickerSet, timePickerCancel } from '../messages';
 import { DateInput } from '../dateinput/DateInput';
 import { TimeSelector } from './TimeSelector';
 import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME, setTime } from '../utils';
 import { isInRange, isSmallerThanMin, isBiggerThanMax } from './utils';
 import { PickerFloatingLabel } from '../hooks/usePickerFloatingLabel';
 import { Button } from '@progress/kendo-react-buttons';
+import { MOBILE_MEDIUM_DEVISE } from '../common/constants';
+import { AdaptiveMode } from '../common/AdaptiveMode';
+import { ActionSheetContent } from '@progress/kendo-react-layout';
 /** @hidden */
 var TimePickerWithoutContext = /** @class */ (function (_super) {
     __extends(TimePickerWithoutContext, _super);
@@ -70,6 +73,41 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
                 _this.dateInput.focus();
             }
         };
+        _this.renderTimeSelector = function () {
+            var _a = _this.props, smoothScroll = _a.smoothScroll, cancelButton = _a.cancelButton, nowButton = _a.nowButton, disabled = _a.disabled, format = _a.format, steps = _a.steps;
+            return (React.createElement(TimeSelector, { ref: _this.setTimeSelectorRef, className: _this.mobileMode ? 'k-reset k-timeselector-lg' : '', mobileMode: _this.mobileMode, show: _this.show, cancelButton: cancelButton, disabled: disabled, nowButton: nowButton, format: format, min: _this.min, max: _this.max, steps: steps, smoothScroll: smoothScroll, value: _this.value, footer: _this.mobileMode ? false : true, handleTimeChange: _this.mobileMode && _this.handleTimeChange, onChange: _this.handleValueChange, onReject: _this.handleValueReject }));
+        };
+        _this.renderPopup = function () {
+            var _a = _this.popupSettings, popupClass = _a.popupClass, otherPopupSettings = __rest(_a, ["popupClass"]);
+            var popupClassNames = classNames('k-group k-reset', popupClass);
+            var popupProps = __assign({ popupClass: 'k-timepicker-popup', show: _this.show, animate: _this.element !== null, anchor: _this.element, className: popupClassNames, id: _this._popupId, anchorAlign: {
+                    horizontal: 'left',
+                    vertical: 'bottom'
+                }, popupAlign: {
+                    horizontal: 'left',
+                    vertical: 'top'
+                } }, otherPopupSettings);
+            return (_this.props.popup
+                ? React.createElement(_this.props.popup, __assign({}, popupProps), _this.renderTimeSelector())
+                : React.createElement(Popup, __assign({}, popupProps), _this.renderTimeSelector()));
+        };
+        _this.renderAdaptivePopup = function () {
+            var _a = _this.state.windowWidth, windowWidth = _a === void 0 ? 0 : _a;
+            var actionSheetProps = {
+                expand: _this.show,
+                onClose: _this.handleBlur,
+                adaptiveTitle: _this.props.adaptiveTitle,
+                windowWidth: windowWidth,
+                footer: {
+                    cancelText: _this.localizationService.toLanguageString(toggleClock, messages[timePickerCancel]),
+                    onCancel: function (event) { return _this.handleValueReject(event); },
+                    applyText: _this.localizationService.toLanguageString(timePickerSet, messages[timePickerSet]),
+                    onApply: function (event) { return _this.handleValueChange(event); }
+                }
+            };
+            return (React.createElement(AdaptiveMode, __assign({}, actionSheetProps),
+                React.createElement(ActionSheetContent, { className: '!k-overflow-hidden' }, _this.renderTimeSelector())));
+        };
         _this.setTimeSelectorRef = function (timeSelector) {
             _this._timeSelector = timeSelector;
         };
@@ -87,20 +125,24 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             var value = _this.mergeTime(event.value);
             _this.handleValueChange(__assign(__assign({}, event), { value: value }));
         };
+        _this.handleTimeChange = function (date) {
+            _this.setState({ candidate: date.time });
+        };
         _this.handleValueChange = function (event) {
             _this.setState({
-                value: cloneDate(event.value),
+                value: cloneDate(event.value || _this.state.candidate),
                 show: false
             });
             _this.valueDuringOnChange = event.value;
             _this.showDuringOnChange = false;
             _this.shouldFocusDateInput = true;
             var onChange = _this.props.onChange;
+            var value = _this.value || _this.state.candidate;
             if (onChange) {
                 onChange.call(undefined, {
                     syntheticEvent: event.syntheticEvent,
                     nativeEvent: event.nativeEvent,
-                    value: _this.value,
+                    value: value,
                     show: _this.show,
                     target: _this
                 });
@@ -146,13 +188,25 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         _this.state = {
             value: _this.props.defaultValue || TimePickerWithoutContext.defaultProps.defaultValue,
             show: _this.props.defaultShow || TimePickerWithoutContext.defaultProps.defaultShow,
-            focused: false
+            focused: false,
+            candidate: null
         };
         _this.normalizeTime = _this.normalizeTime.bind(_this);
         _this.setShow = _this.setShow.bind(_this);
         _this.mergeTime = _this.mergeTime.bind(_this);
         return _this;
     }
+    Object.defineProperty(TimePickerWithoutContext.prototype, "document", {
+        get: function () {
+            if (!canUseDOM) {
+                return;
+            }
+            // useful only for user actions
+            return (this.element && this.element.ownerDocument) || document;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TimePickerWithoutContext.prototype, "element", {
         /**
          * Gets the wrapping element of the TimePicker.
@@ -245,6 +299,17 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TimePickerWithoutContext.prototype, "mobileMode", {
+        /**
+         * The mobile mode of the ComboBox.
+         */
+        get: function () {
+            var isAdaptive = this.state.windowWidth && this.state.windowWidth <= MOBILE_MEDIUM_DEVISE && this.props.adaptive;
+            return !!isAdaptive;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TimePickerWithoutContext.prototype, "validityStyles", {
         /**
          * @hidden
@@ -297,14 +362,26 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TimePickerWithoutContext.prototype, "localizationService", {
+        get: function () {
+            return provideLocalizationService(this);
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @hidden
      */
     TimePickerWithoutContext.prototype.componentDidMount = function () {
+        var _a;
+        this.observerResize = canUseDOM && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this));
         if (this.show) {
             // If defaultShow is true during the initial render, the popup is not aligned.
             this.forceUpdate();
         }
+        if (((_a = this.document) === null || _a === void 0 ? void 0 : _a.body) && this.observerResize) {
+            this.observerResize.observe(this.document.body);
+        }
     };
     /**
      * @hidden
@@ -322,15 +399,23 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         this.prevShow = this.show;
         this.shouldFocusDateInput = false;
     };
+    /**
+     * @hidden
+     */
+    TimePickerWithoutContext.prototype.componentWillUnmount = function () {
+        var _a;
+        if (((_a = this.document) === null || _a === void 0 ? void 0 : _a.body) && this.observerResize) {
+            this.observerResize.disconnect();
+        }
+    };
+    ;
     /**
      * @hidden
      */
     TimePickerWithoutContext.prototype.render = function () {
         var _this = this;
-        var _a = this.props, _b = _a.size, size = _b === void 0 ? TimePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? TimePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? TimePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, className = _a.className, format = _a.format, formatPlaceholder = _a.formatPlaceholder, smoothScroll = _a.smoothScroll, width = _a.width, name = _a.name, steps = _a.steps, cancelButton = _a.cancelButton, nowButton = _a.nowButton, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
-        var _e = this.popupSettings, popupClass = _e.popupClass, otherPopupSettings = __rest(_e, ["popupClass"]);
+        var _a = this.props, _b = _a.size, size = _b === void 0 ? TimePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? TimePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? TimePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, className = _a.className, format = _a.format, formatPlaceholder = _a.formatPlaceholder, width = _a.width, name = _a.name, steps = _a.steps, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
         var isValid = !this.validityStyles || this.validity.valid;
-        var popupClassNames = classNames('k-group k-reset', popupClass);
         var dateInputProps = {
             disabled: disabled,
             format: format,
@@ -356,38 +441,30 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             ariaExpanded: this.show,
             size: null,
             fillMode: null,
-            rounded: null
+            rounded: null,
+            readonly: this.mobileMode
         };
-        var popupProps = __assign({ popupClass: 'k-timepicker-popup', show: this.show, animate: this.element !== null, anchor: this.element, className: popupClassNames, id: this._popupId, anchorAlign: {
-                horizontal: 'left',
-                vertical: 'bottom'
-            }, popupAlign: {
-                horizontal: 'left',
-                vertical: 'top'
-            } }, otherPopupSettings);
-        var timeSelector = (React.createElement(TimeSelector, { ref: this.setTimeSelectorRef, show: this.show, cancelButton: cancelButton, disabled: disabled, nowButton: nowButton, format: format, min: this.min, max: this.max, steps: steps, smoothScroll: smoothScroll, value: this.value, onChange: this.handleValueChange, onReject: this.handleValueReject }));
-        var localizationService = provideLocalizationService(this);
-        var toggleClockMessage = localizationService.toLanguageString(toggleClock, messages[toggleClock]);
-        var toggleTimeMessage = localizationService
+        var toggleClockMessage = this.localizationService.toLanguageString(toggleClock, messages[toggleClock]);
+        var toggleTimeMessage = this.localizationService
             .toLanguageString(toggleTimeSelector, messages[toggleTimeSelector]);
-        var timepicker = (React.createElement(AsyncFocusBlur, { onFocus: this.handleFocus, onBlur: this.handleBlur, onSyncBlur: this.props.onBlur, onSyncFocus: this.props.onFocus }, function (_a) {
+        var timepicker = (React.createElement(AsyncFocusBlur, { onFocus: this.handleFocus, onBlur: !this.mobileMode ? this.handleBlur : undefined, onSyncBlur: this.props.onBlur, onSyncFocus: this.props.onFocus }, function (_a) {
             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-".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,
-                    _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
-                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 }, {
-                    'aria-label': toggleClockMessage
-                })),
-                _this.props.popup
-                    ? React.createElement(_this.props.popup, __assign({}, popupProps), timeSelector)
-                    : React.createElement(Popup, __assign({}, popupProps), timeSelector)));
+            return (React.createElement(React.Fragment, null,
+                React.createElement("div", { ref: function (span) { _this._element = span; }, className: classNames('k-input', 'k-timepicker', (_b = {},
+                        _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,
+                        _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 }, {
+                        'aria-label': toggleClockMessage
+                    })),
+                    !_this.mobileMode && _this.renderPopup()),
+                _this.mobileMode && _this.renderAdaptivePopup()));
         }));
         return this.props.label
             ? (React.createElement(PickerFloatingLabel, { dateInput: this._dateInput, label: this.props.label, editorId: id, editorValid: isValid, editorDisabled: this.props.disabled, children: timepicker, style: { width: this.props.width } }))
@@ -405,6 +482,14 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
     TimePickerWithoutContext.prototype.mergeTime = function (value) {
         return this.value && value ? setTime(this.value, value) : value;
     };
+    TimePickerWithoutContext.prototype.calculateMedia = function (entries) {
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+            var entry = entries_1[_i];
+            this.setState({ windowWidth: entry.target.clientWidth });
+        }
+        ;
+    };
+    ;
     /**
      * @hidden
      */

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

@@ -18,6 +18,12 @@ export interface TimeSelectorChangeEvent {
     value: Date;
     target: TimeSelector;
 }
+/**
+ * @hidden
+ */
+export interface TimeSelectorTimeChangeEvent {
+    time: Date;
+}
 /**
  * @hidden
  */
@@ -30,6 +36,7 @@ export interface TimeSelectorProps {
     min?: Date;
     nowButton?: boolean;
     onChange?: any;
+    handleTimeChange?: any;
     onReject?: any;
     steps?: TimePickerIncrementalSteps;
     smoothScroll?: boolean;
@@ -37,6 +44,8 @@ export interface TimeSelectorProps {
     value?: Date | null;
     boundRange?: boolean;
     show?: boolean;
+    footer?: boolean;
+    mobileMode?: boolean;
 }
 /**
  * @hidden
@@ -91,6 +100,7 @@ export declare class TimeSelector extends React.Component<TimeSelectorProps, Tim
         min: Date;
         max: Date;
         boundRange: boolean;
+        footer: boolean;
     };
     readonly state: TimeSelectorState;
     private _element;

package/dist/es/timepicker/TimeSelector.js

@@ -113,6 +113,12 @@ var TimeSelector = /** @class */ (function (_super) {
         };
         _this.handleChange = function (candidate) {
             _this.setState({ current: candidate });
+            var handleTimeChange = _this.props.handleTimeChange;
+            if (handleTimeChange) {
+                handleTimeChange.call(undefined, {
+                    time: candidate
+                });
+            }
         };
         _this.dateFormatParts = _this.intl.splitDateFormat(_this.props.format || TimeSelector.defaultProps.format);
         _this.mergeValue = valueMerger(generateGetters(_this.dateFormatParts));
@@ -174,15 +180,15 @@ var TimeSelector = /** @class */ (function (_super) {
      */
     TimeSelector.prototype.render = function () {
         var _this = this;
-        var _a = this.props, format = _a.format, cancelButton = _a.cancelButton, disabled = _a.disabled, tabIndex = _a.tabIndex, className = _a.className, smoothScroll = _a.smoothScroll, min = _a.min, max = _a.max, boundRange = _a.boundRange, nowButton = _a.nowButton, steps = _a.steps;
+        var _a = this.props, format = _a.format, cancelButton = _a.cancelButton, disabled = _a.disabled, tabIndex = _a.tabIndex, className = _a.className, smoothScroll = _a.smoothScroll, min = _a.min, max = _a.max, boundRange = _a.boundRange, nowButton = _a.nowButton, steps = _a.steps, show = _a.show, mobileMode = _a.mobileMode;
         var localizationService = provideLocalizationService(this);
         var cancelMessage = localizationService.toLanguageString(timePickerCancel, messages[timePickerCancel]);
         var setMessage = localizationService.toLanguageString(timePickerSet, messages[timePickerSet]);
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, tabIndex: !disabled ? tabIndex || 0 : undefined, className: classNames('k-timeselector', className, {
                 'k-disabled': disabled
             }), onKeyDown: this.handleKeyDown },
-            React.createElement(TimePart, { ref: function (el) { _this.timePart = el; }, value: this.current, onChange: this.handleChange, onNowClick: this.handleNowClick, format: format, smoothScroll: smoothScroll, min: min, max: max, boundRange: boundRange, disabled: disabled, nowButton: nowButton, steps: steps, show: this.props.show }),
-            React.createElement("div", { className: "k-time-footer k-actions k-actions-stretched" },
+            React.createElement(TimePart, { ref: function (el) { _this.timePart = el; }, value: this.current, onChange: this.handleChange, onNowClick: this.handleNowClick, format: format, smoothScroll: smoothScroll, min: min, max: max, boundRange: boundRange, disabled: disabled, nowButton: nowButton, steps: steps, show: show, mobileMode: mobileMode }),
+            this.props.footer && React.createElement("div", { className: "k-time-footer k-actions k-actions-stretched" },
                 cancelButton &&
                     React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
                 React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", themeColor: 'primary', onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
@@ -244,7 +250,8 @@ var TimeSelector = /** @class */ (function (_super) {
         format: 't',
         min: MIN_TIME,
         max: MAX_TIME,
-        boundRange: false
+        boundRange: false,
+        footer: true
     };
     return TimeSelector;
 }(React.Component));

package/dist/npm/common/AdaptiveMode.d.ts

@@ -8,7 +8,14 @@ export interface AdaptiveModeProps {
     adaptiveTitle?: string | React.ReactNode;
     onClose?: (event: React.SyntheticEvent) => void;
     windowWidth?: number;
+    mobileFilter?: React.ReactNode;
     children: React.ReactNode;
+    footer?: {
+        cancelText: string;
+        onCancel: (event: React.SyntheticEvent) => void;
+        applyText: string;
+        onApply: (event: React.SyntheticEvent) => void;
+    };
 }
 /** @hidden */
 export declare const AdaptiveMode: (props: AdaptiveModeProps) => JSX.Element;

package/dist/npm/common/AdaptiveMode.js

@@ -16,17 +16,19 @@ var React = require("react");
 var kendo_react_layout_1 = require("@progress/kendo-react-layout");
 var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
-var constants_1 = require("../common/constants");
+/** @hidden */
+var MOBILE_SMALL_DEVISE = 500;
 /** @hidden */
 var AdaptiveMode = function (props) {
+    var footer = props.footer, children = props.children, _a = props.windowWidth, windowWidth = _a === void 0 ? 0 : _a, navigatable = props.navigatable, navigatableElements = props.navigatableElements, expand = props.expand, animation = props.animation, onClose = props.onClose, adaptiveTitle = props.adaptiveTitle, mobileFilter = props.mobileFilter;
     var defaultProps = {
-        navigatable: props.navigatable || false,
-        navigatableElements: props.navigatableElements || [],
-        expand: props.expand,
-        animation: props.animation === false ? false : true,
-        onClose: props.onClose,
-        animationStyles: props.windowWidth && props.windowWidth <= constants_1.MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
-        className: props.windowWidth && props.windowWidth <= constants_1.MOBILE_SMALL_DEVISE
+        navigatable: navigatable || false,
+        navigatableElements: navigatableElements || [],
+        expand: expand,
+        animation: animation === false ? false : true,
+        onClose: onClose,
+        animationStyles: windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
+        className: windowWidth <= MOBILE_SMALL_DEVISE
             ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
             : 'k-adaptive-actionsheet k-actionsheet-bottom'
     };
@@ -34,9 +36,14 @@ var AdaptiveMode = function (props) {
         React.createElement(kendo_react_layout_1.ActionSheetHeader, { className: 'k-text-center' },
             React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
                 React.createElement("div", { className: "k-actionsheet-title" },
-                    React.createElement("div", null, props.adaptiveTitle)),
+                    React.createElement("div", null, adaptiveTitle)),
                 React.createElement("div", { className: "k-actionsheet-actions" },
-                    React.createElement(kendo_react_buttons_1.Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", icon: 'x', svgIcon: kendo_svg_icons_1.xIcon, onClick: props.onClose })))),
-        props.children));
+                    React.createElement(kendo_react_buttons_1.Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", icon: 'x', svgIcon: kendo_svg_icons_1.xIcon, onClick: onClose }))),
+            mobileFilter &&
+                React.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, mobileFilter)),
+        children,
+        footer && React.createElement(kendo_react_layout_1.ActionSheetFooter, { className: 'k-actions k-actions-stretched' },
+            React.createElement(kendo_react_buttons_1.Button, { size: "large", tabIndex: 0, "aria-label": footer.cancelText, "aria-disabled": "false", type: "button", onClick: function (event) { return footer.onCancel(event); } }, footer.cancelText),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: 0, themeColor: "primary", size: "large", "aria-label": footer.applyText, "aria-disabled": "false", type: "button", onClick: function (event) { return footer.onApply(event); } }, footer.applyText))));
 };
 exports.AdaptiveMode = AdaptiveMode;