@progress/kendo-react-dateinputs 5.14.0-dev.202305171438 → 5.14.0-dev.202305231015

package/dist/es/calendar/components/MultiViewCalendar.d.ts

@@ -108,6 +108,7 @@ export declare class MultiViewCalendarWithoutContext extends React.Component<Mul
     private calendarViewList;
     private isActive;
     private calculateFocusFromValue;
+    private isRtl;
     /**
      * Gets the wrapping element of the MultiViewCalendar component.
      */

package/dist/es/calendar/components/MultiViewCalendar.js

@@ -39,6 +39,12 @@ import { BusViewService, NavigationService } from '../services';
 import { dateInRange, isInRange, viewInRange, getToday, nullable } from '../../utils';
 import { HorizontalViewList } from './HorizontalViewList';
 import { TodayCommand } from './TodayCommand';
+/**
+ * @hidden
+ */
+function isRtl(element) {
+    return Boolean(element && getComputedStyle(element).direction === 'rtl');
+}
 var extractDateFromValue = function (min, max, value) {
     if (min === void 0) { min = MultiViewCalendarWithoutContext.defaultProps.min; }
     if (max === void 0) { max = MultiViewCalendarWithoutContext.defaultProps.max; }
@@ -88,6 +94,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         _this.calendarViewList = null;
         _this.isActive = false;
         _this.calculateFocusFromValue = true;
+        _this.isRtl = false;
         /**
          * @hidden
          */
@@ -409,6 +416,11 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
      */
     MultiViewCalendarWithoutContext.prototype.componentDidMount = function () {
         this.calculateFocusFromValue = true;
+        var rtl = isRtl(this._element);
+        this.isRtl = rtl;
+        if (this.isRtl) {
+            this.forceUpdate();
+        }
     };
     /**
      * @hidden
@@ -463,9 +475,9 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         var activeDate = cloneDate(this.dates && this.dates[0] ? this.dates[0] : getToday());
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-disabled": this.props.disabled },
             React.createElement(Header, { key: ".kendo.calendar.header.".concat(activeDate.getTime()), activeView: activeView, currentDate: activeDate, min: this.min, max: this.max, rangeLength: this.props.views, bus: this.bus, service: this.service, headerTitle: this.props.headerTitle, commands: (React.createElement(React.Fragment, null,
-                    React.createElement(Button, __assign({ type: "button", className: "k-calendar-nav-prev", icon: "chevron-left", svgIcon: chevronLeftIcon, fillMode: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
+                    React.createElement(Button, __assign({ type: "button", className: "k-calendar-nav-prev", icon: this.isRtl ? 'chevron-right' : 'chevron-left', svgIcon: this.isRtl ? chevronRightIcon : chevronLeftIcon, fillMode: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
                     React.createElement(TodayCommand, { min: this.min, max: this.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }),
-                    React.createElement(Button, __assign({ type: "button", className: "k-calendar-nav-next", icon: "chevron-right", svgIcon: chevronRightIcon, fillMode: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
+                    React.createElement(Button, __assign({ type: "button", className: "k-calendar-nav-next", icon: this.isRtl ? 'chevron-left' : 'chevron-right', svgIcon: this.isRtl ? chevronLeftIcon : chevronRightIcon, fillMode: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
             React.createElement(HorizontalViewList, { ref: function (el) { _this.calendarViewList = el; }, dates: this.dates, activeView: activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, service: this.service, selectionRange: visualizedRange, value: this.selectedMultiple || this.selectedDate, cellUID: this.cellUID, views: this.props.views, onChange: this.handleDateChange, showWeekNumbers: this.props.weekNumber, onCellEnter: this.handleCellEnter, cell: this.props.cell, weekCell: this.props.weekCell, headerTitle: this.props.headerTitle })));
     };
     /**

package/dist/es/datepicker/DatePicker.js

@@ -142,7 +142,9 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             });
             _this.valueDuringOnChange = value;
             _this.showDuringOnChange = false;
-            _this.shouldFocusDateInput = true;
+            if (!_this.mobileMode) {
+                _this.shouldFocusDateInput = true;
+            }
             var onChange = _this.props.onChange;
             if (onChange) {
                 onChange.call(undefined, {
@@ -428,12 +430,10 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
      */
     DatePickerWithoutContext.prototype.render = function () {
         var _this = this;
-        var _a = this.props, _b = _a.size, size = _b === void 0 ? DatePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? DatePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? DatePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, format = _a.format, formatPlaceholder = _a.formatPlaceholder, min = _a.min, max = _a.max, className = _a.className, width = _a.width, name = _a.name, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, ariaLabel = _a.ariaLabel, adaptive = _a.adaptive;
-        var _e = this.state.windowWidth, windowWidth = _e === void 0 ? 0 : _e;
+        var _a = this.props, _b = _a.size, size = _b === void 0 ? DatePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? DatePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? DatePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, format = _a.format, formatPlaceholder = _a.formatPlaceholder, min = _a.min, max = _a.max, className = _a.className, width = _a.width, name = _a.name, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, ariaLabel = _a.ariaLabel;
         var show = this.show;
         var value = this.value;
         var isValid = !this.validityStyles || this.validity.valid;
-        var renderAdaptive = windowWidth <= MOBILE_MEDIUM_DEVISE && adaptive;
         var dateInputProps = {
             disabled: disabled,
             format: format,
@@ -476,8 +476,8 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
                         _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 }),
-                    !renderAdaptive && _this.renderPopup()),
-                renderAdaptive && _this.renderAdaptivePopup()));
+                    !_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: datepicker, style: { width: this.props.width } }))

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

@@ -74,6 +74,14 @@ export interface DateTimePickerProps extends DateTimePickerSettings, FormCompone
      * @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
@@ -82,6 +90,7 @@ export interface DateTimePickerState {
     value: Date | null;
     show: boolean;
     focused: boolean;
+    windowWidth?: number;
 }
 /** @hidden */
 export declare class DateTimePickerWithoutContext extends React.Component<DateTimePickerProps, DateTimePickerState> implements FormComponent {
@@ -183,6 +192,8 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
     private nextTickId;
     private shouldFocusDateInput;
     private prevShow;
+    private observerResize?;
+    private get document();
     constructor(props: DateTimePickerProps);
     /**
      * Gets the wrapping element of the DateTimePicker.
@@ -204,6 +215,10 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
      * Gets the `name` property of the DateTimePicker.
      */
     get name(): string | undefined;
+    /**
+     * The mobile mode of the ComboBox.
+     */
+    get mobileMode(): boolean;
     protected get min(): Date;
     protected get max(): Date;
     /**
@@ -242,6 +257,8 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
      * @hidden
      */
     render(): JSX.Element;
+    private renderPicker;
+    private renderAdaptivePopup;
     protected setShow(show: boolean): void;
     protected nextTick(f: () => any): void;
     private handleReject;
@@ -252,6 +269,7 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
     private handleIconMouseDown;
     private handleKeyDown;
     private dateInputElement;
+    private calculateMedia;
 }
 /**
  * Represents the PropsContext of the `DateTimePicker` component.

package/dist/es/datetimepicker/DateTimePicker.js

@@ -31,16 +31,19 @@ import { cloneDate } from '@progress/kendo-date-math';
 import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { calendarIcon } from '@progress/kendo-svg-icons';
 import { DateInput } from '../dateinput/DateInput';
-import { validatePackage } from '@progress/kendo-react-common';
+import { validatePackage, canUseDOM } from '@progress/kendo-react-common';
 import { Button } from '@progress/kendo-react-buttons';
 import { packageMetadata } from '../package-metadata';
 import { MIN_DATE, MAX_DATE, isInDateRange, MAX_TIME } from '../utils';
-import { messages, toggleDateTimeSelector } from '../messages';
+import { MOBILE_MEDIUM_DEVISE } from '../common/constants';
+import { dateTimePickerCancel, dateTimePickerSet, messages, toggleDateTimeSelector } from '../messages';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { DateTimeSelector } from './DateTimeSelector';
 import { isInTimeRange } from '../timepicker/utils';
 import { MIN_TIME } from '../utils';
 import { PickerFloatingLabel } from '../hooks/usePickerFloatingLabel';
+import { AdaptiveMode } from '../common/AdaptiveMode';
+import { ActionSheetContent } from '@progress/kendo-react-layout';
 /** @hidden */
 var DateTimePickerWithoutContext = /** @class */ (function (_super) {
     __extends(DateTimePickerWithoutContext, _super);
@@ -61,6 +64,31 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
                 dateInputElement.focus();
             }
         };
+        _this.renderPicker = function () {
+            var _a = _this.props, disabled = _a.disabled, minTime = _a.minTime, maxTime = _a.maxTime, format = _a.format, calendar = _a.calendar, cancelButton = _a.cancelButton, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate;
+            return (React.createElement(DateTimeSelector, { ref: function (dateTimeSelector) { _this._dateTimeSelector = dateTimeSelector; }, cancelButton: cancelButton, steps: _this.props.steps, value: _this.value, onChange: _this.handleValueChange, onReject: _this.handleReject, disabled: disabled, weekNumber: weekNumber, min: _this.min, max: _this.max, minTime: minTime, maxTime: maxTime, focusedDate: focusedDate, format: format, calendar: calendar, mobileMode: _this.mobileMode, footerActions: !_this.mobileMode }));
+        };
+        _this.renderAdaptivePopup = function () {
+            var _a = _this.state.windowWidth, windowWidth = _a === void 0 ? 0 : _a;
+            var cancelText = provideLocalizationService(_this)
+                .toLanguageString(dateTimePickerCancel, messages[dateTimePickerCancel]);
+            var applyText = provideLocalizationService(_this)
+                .toLanguageString(dateTimePickerSet, messages[dateTimePickerSet]);
+            var actionSheetProps = {
+                expand: _this.show,
+                onClose: _this.handleBlur,
+                adaptiveTitle: _this.props.adaptiveTitle,
+                windowWidth: windowWidth,
+                footer: {
+                    cancelText: cancelText,
+                    onCancel: function (event) { var _a; return (_a = _this._dateTimeSelector) === null || _a === void 0 ? void 0 : _a.handleReject(event); },
+                    applyText: applyText,
+                    onApply: function (event) { var _a; return (_a = _this._dateTimeSelector) === null || _a === void 0 ? void 0 : _a.handleAccept(event); }
+                }
+            };
+            return (React.createElement(AdaptiveMode, __assign({}, actionSheetProps),
+                React.createElement(ActionSheetContent, { className: '!k-overflow-hidden' }, _this.renderPicker())));
+        };
         _this.handleReject = function () {
             _this.shouldFocusDateInput = true;
             _this.setShow(false);
@@ -72,7 +100,9 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
             });
             _this.valueDuringOnChange = event.value;
             _this.showDuringOnChange = false;
-            _this.shouldFocusDateInput = true;
+            if (!_this.mobileMode) {
+                _this.shouldFocusDateInput = true;
+            }
             var onChange = _this.props.onChange;
             if (onChange) {
                 onChange.call(undefined, {
@@ -129,6 +159,17 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         };
         return _this;
     }
+    Object.defineProperty(DateTimePickerWithoutContext.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(DateTimePickerWithoutContext.prototype, "element", {
         /**
          * Gets the wrapping element of the DateTimePicker.
@@ -188,6 +229,17 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DateTimePickerWithoutContext.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(DateTimePickerWithoutContext.prototype, "min", {
         get: function () {
             return this.props.min !== undefined
@@ -265,10 +317,15 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DateTimePickerWithoutContext.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
@@ -290,14 +347,18 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DateTimePickerWithoutContext.prototype.componentWillUnmount = function () {
+        var _a;
         clearTimeout(this.nextTickId);
+        if (((_a = this.document) === null || _a === void 0 ? void 0 : _a.body) && this.observerResize) {
+            this.observerResize.disconnect();
+        }
     };
     /**
      * @hidden
      */
     DateTimePickerWithoutContext.prototype.render = function () {
         var _this = this;
-        var _a = this.props, _b = _a.size, size = _b === void 0 ? DateTimePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? DateTimePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? DateTimePickerWithoutContext.defaultProps.fillMode : _d, 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, _e = _a.popup, PopupComponent = _e === void 0 ? Popup : _e, calendar = _a.calendar;
+        var _a = this.props, _b = _a.size, size = _b === void 0 ? DateTimePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? DateTimePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? DateTimePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, format = _a.format, formatPlaceholder = _a.formatPlaceholder, min = _a.min, max = _a.max, className = _a.className, width = _a.width, name = _a.name, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, minTime = _a.minTime, maxTime = _a.maxTime, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, _e = _a.popup, PopupComponent = _e === void 0 ? Popup : _e;
         var isValid = !this.validityStyles || this.validity.valid;
         var dataInputProps = {
             id: id,
@@ -330,30 +391,31 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         var dateTimePicker = (React.createElement(AsyncFocusBlur, { onFocus: this.handleFocus, onBlur: this.handleBlur, onSyncFocus: this.props.onFocus, onSyncBlur: this.props.onBlur }, function (_a) {
             var _b;
             var onFocus = _a.onFocus, onBlur = _a.onBlur;
-            return (React.createElement("div", { ref: function (div) {
-                    _this._element = div;
-                }, className: classNames('k-input', 'k-datetimepicker', (_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 }, dataInputProps)),
-                React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', svgIcon: calendarIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: provideLocalizationService(_this)
-                        .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]), className: "k-input-button", rounded: null }, {
-                    'aria-label': provideLocalizationService(_this)
-                        .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
-                })),
-                React.createElement(PopupComponent, { show: _this.show, animate: _this.element !== null, anchor: _this.element, popupClass: "k-datetime-container k-reset", id: _this._popupId, anchorAlign: {
-                        horizontal: 'left',
-                        vertical: 'bottom'
-                    }, popupAlign: {
-                        horizontal: 'left',
-                        vertical: 'top'
-                    } },
-                    React.createElement(DateTimeSelector, { ref: function (dateTimeSelector) { _this._dateTimeSelector = dateTimeSelector; }, cancelButton: cancelButton, steps: _this.props.steps, value: _this.value, onChange: _this.handleValueChange, onReject: _this.handleReject, disabled: disabled, weekNumber: weekNumber, min: _this.min, max: _this.max, minTime: minTime, maxTime: maxTime, focusedDate: focusedDate, format: format, calendar: calendar }))));
+            return (React.createElement(React.Fragment, null,
+                React.createElement("div", { ref: function (div) {
+                        _this._element = div;
+                    }, className: classNames('k-input', 'k-datetimepicker', (_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: !_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)
+                            .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]), className: "k-input-button", rounded: null }, {
+                        'aria-label': provideLocalizationService(_this)
+                            .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
+                    })),
+                    React.createElement(PopupComponent, { show: _this.show, animate: _this.element !== null, anchor: _this.element, popupClass: "k-datetime-container k-reset", id: _this._popupId, anchorAlign: {
+                            horizontal: 'left',
+                            vertical: 'bottom'
+                        }, popupAlign: {
+                            horizontal: 'left',
+                            vertical: 'top'
+                        } }, !_this.mobileMode && _this.renderPicker())),
+                _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: dateTimePicker, style: { width: this.props.width } }))
@@ -372,6 +434,14 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         clearTimeout(this.nextTickId);
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
+    DateTimePickerWithoutContext.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/datetimepicker/DateTimeSelector.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DateFormatOptions } from '@progress/kendo-react-intl';
+import { LocalizationService, DateFormatOptions } from '@progress/kendo-react-intl';
 import { Calendar, CalendarProps } from '../calendar/components/Calendar';
 import { TimePart } from '../timepicker/TimePart';
 import { DateInputIncrementalSteps } from '../dateinput/models';
@@ -41,6 +41,8 @@ export interface DateTimeSelectorProps<T = DateTimeSelector> {
     format?: string | DateFormatOptions;
     calendar?: React.ComponentType<CalendarProps<any>>;
     steps?: DateInputIncrementalSteps;
+    mobileMode?: boolean;
+    footerActions?: boolean;
 }
 /**
  * @hidden
@@ -54,6 +56,12 @@ export interface DateTimeSelectorState {
  * @hidden
  */
 export declare class DateTimeSelector extends React.Component<DateTimeSelectorProps, DateTimeSelectorState> {
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        footerActions: boolean;
+    };
     private _calendar;
     private _timePart;
     private _cancelButton;
@@ -63,6 +71,7 @@ export declare class DateTimeSelector extends React.Component<DateTimeSelectorPr
     get calendar(): Calendar | null;
     get timePart(): TimePart | null;
     protected get hasDateValue(): boolean;
+    protected get localizationService(): LocalizationService;
     constructor(props: DateTimeSelectorProps);
     componentDidUpdate(): void;
     render(): JSX.Element;
@@ -75,8 +84,9 @@ export declare class DateTimeSelector extends React.Component<DateTimeSelectorPr
     protected mergeTime(current: Date | null, candidate: Date | null): Date | null;
     protected mergeDate(candidate: Date | null, value: Date): Date | null;
     protected move: (direction: 'left' | 'right') => void;
-    private handleReject;
-    private handleAccept;
+    private dateTimeFooter;
+    handleReject: (event: React.SyntheticEvent<any>) => void;
+    handleAccept: (event: React.SyntheticEvent<any>, timeOverride?: Date) => void;
     private handleNowClick;
     private handleCalendarValueChange;
     private handleTimeListContainerChange;

package/dist/es/datetimepicker/DateTimeSelector.js

@@ -75,6 +75,14 @@ var DateTimeSelector = /** @class */ (function (_super) {
             _this.shouldFocusPart = true;
             _this.setState({ tab: nextPart });
         };
+        _this.dateTimeFooter = function () {
+            var cancelButton = _this.props.cancelButton;
+            var cancelMessage = _this.localizationService.toLanguageString(cancel, messages[cancel]);
+            var setMessage = _this.localizationService.toLanguageString(set, messages[set]);
+            return (React.createElement("div", { className: "k-datetime-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", themeColor: "primary", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", disabled: !_this.hasDateValue, onClick: _this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage)));
+        };
         _this.handleReject = function (event) {
             _this.setState({ dateValue: _this.props.value, timeValue: _this.props.value || MIDNIGHT_DATE });
             var value = _this.mergeDate(_this.props.value, _this.props.value || MIDNIGHT_DATE);
@@ -175,6 +183,13 @@ var DateTimeSelector = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DateTimeSelector.prototype, "localizationService", {
+        get: function () {
+            return provideLocalizationService(this);
+        },
+        enumerable: false,
+        configurable: true
+    });
     DateTimeSelector.prototype.componentDidUpdate = function () {
         if (this.shouldFocusPart) {
             this.focus({ preventScroll: true });
@@ -183,17 +198,14 @@ var DateTimeSelector = /** @class */ (function (_super) {
     };
     DateTimeSelector.prototype.render = function () {
         var _this = this;
-        var _a = this.props, disabled = _a.disabled, cancelButton = _a.cancelButton, min = _a.min, max = _a.max, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate, format = _a.format;
+        var _a = this.props, disabled = _a.disabled, min = _a.min, max = _a.max, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate, format = _a.format, mobileMode = _a.mobileMode, footerActions = _a.footerActions;
         var rootClassName = classNames({
             'k-date-tab': this.state.tab === 'date',
             'k-time-tab': this.state.tab === 'time',
             'k-disabled': disabled
         }, 'k-datetime-wrap');
-        var localizationService = provideLocalizationService(this);
-        var dateMessage = localizationService.toLanguageString(date, messages[date]);
-        var timeMessage = localizationService.toLanguageString(time, messages[time]);
-        var cancelMessage = localizationService.toLanguageString(cancel, messages[cancel]);
-        var setMessage = localizationService.toLanguageString(set, messages[set]);
+        var dateMessage = this.localizationService.toLanguageString(date, messages[date]);
+        var timeMessage = this.localizationService.toLanguageString(time, messages[time]);
         var calendarProps = {
             min: min,
             max: max,
@@ -213,10 +225,9 @@ var DateTimeSelector = /** @class */ (function (_super) {
                 React.createElement("div", { className: "k-datetime-calendar-wrap", ref: function (e) { return _this._calendarWrap = e; } }, this.props.calendar ?
                     React.createElement(this.props.calendar, __assign({}, calendarProps)) :
                     React.createElement(Calendar, __assign({ ref: function (calendar) { _this._calendar = calendar; } }, calendarProps))),
-                React.createElement("div", { className: "k-datetime-time-wrap" }, React.createElement(TimePart, { key: 1, onNowClick: this.handleNowClick, disabled: disabled || this.state.tab !== 'time', ref: function (timePart) { _this._timePart = timePart; }, min: this.minTime || MIN_TIME, max: this.maxTime || MAX_TIME, steps: this.props.steps, value: this.state.timeValue, format: format, onChange: this.handleTimeListContainerChange, onMount: this.handleTimePartMount }))),
-            React.createElement("div", { className: "k-datetime-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", themeColor: "primary", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", disabled: !this.hasDateValue, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
+                React.createElement("div", { className: "k-datetime-time-wrap" },
+                    React.createElement("div", { className: mobileMode ? 'k-reset k-timeselector-lg k-timeselector' : '' }, React.createElement(TimePart, { key: 1, onNowClick: this.handleNowClick, disabled: disabled || this.state.tab !== 'time', ref: function (timePart) { _this._timePart = timePart; }, min: this.minTime || MIN_TIME, max: this.maxTime || MAX_TIME, steps: this.props.steps, value: this.state.timeValue, format: format, onChange: this.handleTimeListContainerChange, onMount: this.handleTimePartMount, mobileMode: mobileMode })))),
+            footerActions && this.dateTimeFooter()));
     };
     Object.defineProperty(DateTimeSelector.prototype, "minTime", {
         get: function () {
@@ -254,6 +265,12 @@ var DateTimeSelector = /** @class */ (function (_super) {
     DateTimeSelector.prototype.mergeDate = function (candidate, value) {
         return candidate ? setTime(candidate || getToday(), value) : value;
     };
+    /**
+     * @hidden
+     */
+    DateTimeSelector.defaultProps = {
+        footerActions: true
+    };
     return DateTimeSelector;
 }(React.Component));
 export { DateTimeSelector };

package/dist/es/package-metadata.js

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

@@ -108,6 +108,7 @@ export declare class MultiViewCalendarWithoutContext extends React.Component<Mul
     private calendarViewList;
     private isActive;
     private calculateFocusFromValue;
+    private isRtl;
     /**
      * Gets the wrapping element of the MultiViewCalendar component.
      */

package/dist/npm/calendar/components/MultiViewCalendar.js

@@ -42,6 +42,12 @@ var services_1 = require("../services");
 var utils_2 = require("../../utils");
 var HorizontalViewList_1 = require("./HorizontalViewList");
 var TodayCommand_1 = require("./TodayCommand");
+/**
+ * @hidden
+ */
+function isRtl(element) {
+    return Boolean(element && getComputedStyle(element).direction === 'rtl');
+}
 var extractDateFromValue = function (min, max, value) {
     if (min === void 0) { min = MultiViewCalendarWithoutContext.defaultProps.min; }
     if (max === void 0) { max = MultiViewCalendarWithoutContext.defaultProps.max; }
@@ -91,6 +97,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         _this.calendarViewList = null;
         _this.isActive = false;
         _this.calculateFocusFromValue = true;
+        _this.isRtl = false;
         /**
          * @hidden
          */
@@ -412,6 +419,11 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
      */
     MultiViewCalendarWithoutContext.prototype.componentDidMount = function () {
         this.calculateFocusFromValue = true;
+        var rtl = isRtl(this._element);
+        this.isRtl = rtl;
+        if (this.isRtl) {
+            this.forceUpdate();
+        }
     };
     /**
      * @hidden
@@ -466,9 +478,9 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         var activeDate = (0, kendo_date_math_1.cloneDate)(this.dates && this.dates[0] ? this.dates[0] : (0, utils_2.getToday)());
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-disabled": this.props.disabled },
             React.createElement(Header_1.Header, { key: ".kendo.calendar.header.".concat(activeDate.getTime()), activeView: activeView, currentDate: activeDate, min: this.min, max: this.max, rangeLength: this.props.views, bus: this.bus, service: this.service, headerTitle: this.props.headerTitle, commands: (React.createElement(React.Fragment, null,
-                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-calendar-nav-prev", icon: "chevron-left", svgIcon: kendo_svg_icons_1.chevronLeftIcon, fillMode: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
+                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-calendar-nav-prev", icon: this.isRtl ? 'chevron-right' : 'chevron-left', svgIcon: this.isRtl ? kendo_svg_icons_1.chevronRightIcon : kendo_svg_icons_1.chevronLeftIcon, fillMode: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
                     React.createElement(TodayCommand_1.TodayCommand, { min: this.min, max: this.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }),
-                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-calendar-nav-next", icon: "chevron-right", svgIcon: kendo_svg_icons_1.chevronRightIcon, fillMode: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
+                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-calendar-nav-next", icon: this.isRtl ? 'chevron-left' : 'chevron-right', svgIcon: this.isRtl ? kendo_svg_icons_1.chevronLeftIcon : kendo_svg_icons_1.chevronRightIcon, fillMode: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
             React.createElement(HorizontalViewList_1.HorizontalViewList, { ref: function (el) { _this.calendarViewList = el; }, dates: this.dates, activeView: activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, service: this.service, selectionRange: visualizedRange, value: this.selectedMultiple || this.selectedDate, cellUID: this.cellUID, views: this.props.views, onChange: this.handleDateChange, showWeekNumbers: this.props.weekNumber, onCellEnter: this.handleCellEnter, cell: this.props.cell, weekCell: this.props.weekCell, headerTitle: this.props.headerTitle })));
     };
     /**

package/dist/npm/datepicker/DatePicker.js

@@ -145,7 +145,9 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             });
             _this.valueDuringOnChange = value;
             _this.showDuringOnChange = false;
-            _this.shouldFocusDateInput = true;
+            if (!_this.mobileMode) {
+                _this.shouldFocusDateInput = true;
+            }
             var onChange = _this.props.onChange;
             if (onChange) {
                 onChange.call(undefined, {
@@ -431,12 +433,10 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
      */
     DatePickerWithoutContext.prototype.render = function () {
         var _this = this;
-        var _a = this.props, _b = _a.size, size = _b === void 0 ? DatePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? DatePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? DatePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, format = _a.format, formatPlaceholder = _a.formatPlaceholder, min = _a.min, max = _a.max, className = _a.className, width = _a.width, name = _a.name, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, ariaLabel = _a.ariaLabel, adaptive = _a.adaptive;
-        var _e = this.state.windowWidth, windowWidth = _e === void 0 ? 0 : _e;
+        var _a = this.props, _b = _a.size, size = _b === void 0 ? DatePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? DatePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? DatePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, format = _a.format, formatPlaceholder = _a.formatPlaceholder, min = _a.min, max = _a.max, className = _a.className, width = _a.width, name = _a.name, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, ariaLabel = _a.ariaLabel;
         var show = this.show;
         var value = this.value;
         var isValid = !this.validityStyles || this.validity.valid;
-        var renderAdaptive = windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && adaptive;
         var dateInputProps = {
             disabled: disabled,
             format: format,
@@ -479,8 +479,8 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
                         _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 }),
-                    !renderAdaptive && _this.renderPopup()),
-                renderAdaptive && _this.renderAdaptivePopup()));
+                    !_this.mobileMode && _this.renderPopup()),
+                _this.mobileMode && _this.renderAdaptivePopup()));
         }));
         return this.props.label
             ? (React.createElement(usePickerFloatingLabel_1.PickerFloatingLabel, { dateInput: this._dateInput, label: this.props.label, editorId: id, editorValid: isValid, editorDisabled: this.props.disabled, children: datepicker, style: { width: this.props.width } }))