@progress/kendo-react-dateinputs 5.14.0-dev.202305191608 → 5.14.0-dev.202305250741

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

@@ -26,6 +26,7 @@ export interface HeaderProps {
     service: ViewService;
     headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
     commands?: React.ReactNode;
+    verticalView?: boolean;
 }
 /**
  * @hidden

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

@@ -103,7 +103,10 @@ var Header = /** @class */ (function (_super) {
         var headerTitle = this.props.headerTitle
             ? React.createElement(this.props.headerTitle, __assign({}, headerTitleProps), title)
             : React.createElement(CalendarHeaderTitle, __assign({}, headerTitleProps), title);
-        return (React.createElement("div", { className: "k-calendar-header k-hstack" },
+        return (React.createElement("div", { className: classNames('k-calendar-header', {
+                'k-vstack': this.props.verticalView,
+                'k-hstack': !this.props.verticalView
+            }) },
             headerTitle,
             React.createElement("span", { className: "k-spacer" }),
             React.createElement("span", { className: "k-calendar-nav k-hstack" }, this.props.commands)));

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

@@ -37,6 +37,7 @@ export interface HorizontalViewListProps {
     weekCell?: React.ComponentType<CalendarWeekCellProps>;
     headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
     dates: any[];
+    verticalView?: boolean;
 }
 /**
  * @hidden

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

@@ -121,7 +121,9 @@ var HorizontalViewList = /** @class */ (function (_super) {
         var selectionRange = this.props.allowReverse
             ? this.rotateSelectionRange(this.props.selectionRange)
             : this.props.selectionRange;
-        var rootClassNames = classNames('k-calendar-view k-hstack k-align-items-start k-justify-content-center', {
+        var rootClassNames = classNames('k-calendar-view k-align-items-start k-justify-content-center', {
+            'k-vstack': this.props.verticalView,
+            'k-hstack': !this.props.verticalView,
             'k-calendar-monthview': this.props.activeView === CalendarViewEnum.month,
             'k-calendar-yearview': this.props.activeView === CalendarViewEnum.year,
             'k-calendar-decadeview': this.props.activeView === CalendarViewEnum.decade,

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

@@ -30,6 +30,8 @@ export interface MultiViewCalendarProps<T = any> extends MultiViewCalendarSettin
      * Sets the value of the MultiViewCalendar. Based on the value type, the MultiViewcalendar renders a single, multiple, or range selection.
      */
     value?: Date | Date[] | SelectionRange | null;
+    /** @hidden */
+    mobileMode?: boolean;
 }
 /**
  * @hidden
@@ -108,6 +110,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
@@ -462,11 +474,11 @@ 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(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, verticalView: this.props.mobileMode, commands: (React.createElement(React.Fragment, null,
+                    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(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 })));
+                    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, verticalView: this.props.mobileMode })));
     };
     /**
      * @hidden

package/dist/es/dateinput/DateInput.d.ts

@@ -22,6 +22,10 @@ export interface DateInputProps<T extends DateInput = any> extends FormComponent
      * @hidden
      */
     children?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    disableSelection?: boolean;
     /**
      * Sets a class of the DateInput DOM element.
      */

package/dist/es/dateinput/DateInput.js

@@ -474,7 +474,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         var _this = this;
         this._lastSelectedSymbol = this.currentFormat[selection.start];
         window.requestAnimationFrame(function () {
-            if (_this.element && document.activeElement === _this.element) {
+            if (_this.element && document.activeElement === _this.element && !_this.props.disableSelection) {
                 _this.element.setSelectionRange(selection.start, selection.end);
             }
         });

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

@@ -40,12 +40,24 @@ 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 of the DateRangePicker is about to cancel in ([adaptive mode]({% slug adaptive_rendering_daterangepicker %})).
+     */
+    onCancel?: (event: React.PointerEvent<HTMLSpanElement>) => void;
     /**
      * Specifies the selected date range of the DateRangePicker ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-value)).
      *
      * > The `value` has to be an object with `start` and `end` valid JavaScript [`Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instances or `null`.
      */
     value?: SelectionRange;
+    /**
+     * 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
@@ -53,6 +65,8 @@ export interface DateRangePickerProps extends DateRangePickerSettings {
 export interface DateRangePickerState {
     show: boolean;
     value: SelectionRange;
+    windowWidth?: number;
+    currentValue: SelectionRange;
 }
 /** @hidden */
 export declare class DateRangePickerWithoutContext extends React.Component<DateRangePickerProps, DateRangePickerState> {
@@ -190,6 +204,7 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
     private _endInputId;
     private shouldFocusDateInput;
     private shouldFocusCalendar;
+    private observerResize?;
     constructor(props: DateRangePickerProps);
     /**
      * Gets the wrapping element of the DateRangePicker.
@@ -217,6 +232,12 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
     get show(): boolean;
     protected get min(): Date;
     protected get max(): Date;
+    private get document();
+    private get localizationService();
+    /**
+     * The mobile mode of the DateRangePicker.
+     */
+    get mobileMode(): boolean;
     /**
      * @hidden
      */
@@ -244,16 +265,21 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
     protected calculateShow: (nextProps: DateRangePickerProps, nextState: DateRangePickerState) => boolean;
     protected nextTick(f: () => any): void;
     protected setShow(show: boolean): void;
+    private renderCalendar;
+    private renderPopup;
+    private renderAdaptivePopup;
     private handleReverseClick;
     private handleReverseMouseDown;
     private handleFocus;
     private handleBlur;
+    private handleCancel;
     private handleEndChange;
     private handleStartChange;
     private extractRangeFromValue;
     private handleCalendarChange;
     private handleKeyDown;
     private handleChange;
+    private calculateMedia;
 }
 /**
  * Represents the PropsContext of the `DateRangePicker` component.

package/dist/es/daterangepicker/DateRangePicker.js

@@ -31,15 +31,18 @@ import { cloneDate } from '@progress/kendo-date-math';
 import { guid, classNames, Keys, createPropsContext, withPropsContext, IconWrap } from '@progress/kendo-react-common';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
 import { arrowsSwapIcon } from '@progress/kendo-svg-icons';
-import { validatePackage } from '@progress/kendo-react-common';
+import { validatePackage, canUseDOM } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { DateInput, DateInputWithoutContext } from '../dateinput/DateInput';
 import { MultiViewCalendar } from '../calendar/components/MultiViewCalendar';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models';
 import { MIN_DATE, MAX_DATE } from '../utils';
-import { swapStartEnd, start, end, separator, messages } from '../messages';
+import { MOBILE_MEDIUM_DEVISE } from '../common/constants';
+import { swapStartEnd, start, end, separator, messages, dateRangePickerConfirm, dateRangePickerCancel } from '../messages';
 import { Button } from '@progress/kendo-react-buttons';
 import { nullable } from '../utils';
+import { AdaptiveMode } from '../common/AdaptiveMode';
+import { ActionSheetContent } from '@progress/kendo-react-layout';
 /** @hidden */
 var DateRangePickerWithoutContext = /** @class */ (function (_super) {
     __extends(DateRangePickerWithoutContext, _super);
@@ -81,6 +84,43 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
                 ? nextProps.show
                 : nextState.show;
         };
+        _this.renderCalendar = function () {
+            var value = _this.value || EMPTY_SELECTIONRANGE;
+            var calendarProps = __assign(__assign({ min: _this.min, max: _this.max, allowReverse: _this.props.allowReverse, mode: 'range', focusedDate: _this.props.focusedDate, disabled: _this.props.disabled, className: _this.mobileMode ? 'k-calendar-lg' : '', mobileMode: _this.mobileMode }, _this.props.calendarSettings), { value: value, onChange: _this.handleCalendarChange });
+            return _this.props.calendar
+                ? React.createElement(_this.props.calendar, __assign({}, calendarProps, { className: '' }))
+                : React.createElement(MultiViewCalendar, __assign({}, calendarProps, { ref: _this.setCalendarRef, className: 'k-calendar-lg' }));
+        };
+        _this.renderPopup = function () {
+            var popupProps = __assign(__assign({ popupClass: 'k-daterangepicker-popup', animate: _this._element !== null, anchor: _this._element, id: _this._popupId, anchorAlign: {
+                    horizontal: 'left',
+                    vertical: 'bottom'
+                }, popupAlign: {
+                    horizontal: 'left',
+                    vertical: 'top'
+                } }, _this.props.popupSettings), { show: _this.show });
+            return (_this.props.popup
+                ? React.createElement(_this.props.popup, __assign({}, popupProps), _this.renderCalendar())
+                : React.createElement(Popup, __assign({}, popupProps), _this.renderCalendar()));
+        };
+        _this.renderAdaptivePopup = function () {
+            var _a = _this.state.windowWidth, windowWidth = _a === void 0 ? 0 : _a;
+            var actionSheetProps = {
+                expand: _this.show,
+                onClose: function (event) { return _this.handleCancel(event); },
+                adaptiveTitle: _this.props.adaptiveTitle,
+                windowWidth: windowWidth,
+                footer: {
+                    cancelText: _this.localizationService.toLanguageString(dateRangePickerCancel, messages[dateRangePickerCancel]),
+                    onCancel: function (event) { return _this.handleCancel(event); },
+                    applyText: _this.localizationService.toLanguageString(dateRangePickerConfirm, messages[dateRangePickerConfirm]),
+                    onApply: function (event) { return _this.handleBlur(event); }
+                }
+            };
+            return (React.createElement(AdaptiveMode, __assign({}, actionSheetProps),
+                React.createElement(ActionSheetContent, { className: '!k-overflow-hidden' },
+                    React.createElement("div", { className: 'k-scrollable-wrap' }, _this.renderCalendar()))));
+        };
         _this.handleReverseClick = function (event) {
             var value = {
                 start: _this.value.end,
@@ -99,6 +139,9 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
             clearTimeout(_this.nextTickId);
             if (!_this.shouldFocusDateInput) {
                 _this.setShow(true);
+                if (_this.mobileMode) {
+                    _this.setState({ currentValue: _this.value });
+                }
             }
             var onFocus = _this.props.onFocus;
             if (onFocus) {
@@ -114,6 +157,16 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
                 onBlur.call(undefined, event);
             }
         };
+        _this.handleCancel = function (event) {
+            _this.nextTick(function () {
+                _this.setShow(false);
+                _this.setState({ currentValue: EMPTY_SELECTIONRANGE });
+            });
+            var onCancel = _this.props.onCancel;
+            if (onCancel) {
+                onCancel.call(undefined, event);
+            }
+        };
         _this.handleEndChange = function (event) {
             var value = {
                 start: _this.value.start,
@@ -185,7 +238,8 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         validatePackage(packageMetadata);
         _this.state = {
             show: _this.props.show || _this.props.defaultShow || DateRangePickerWithoutContext.defaultProps.defaultShow,
-            value: _this.props.value || _this.props.defaultValue || DateRangePickerWithoutContext.defaultProps.defaultValue
+            value: _this.props.value || _this.props.defaultValue || DateRangePickerWithoutContext.defaultProps.defaultValue,
+            currentValue: EMPTY_SELECTIONRANGE
         };
         _this.nextTick = _this.nextTick.bind(_this);
         _this.setShow = _this.setShow.bind(_this);
@@ -280,14 +334,49 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DateRangePickerWithoutContext.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(DateRangePickerWithoutContext.prototype, "localizationService", {
+        get: function () {
+            var localization = provideLocalizationService(this);
+            return localization;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DateRangePickerWithoutContext.prototype, "mobileMode", {
+        /**
+         * The mobile mode of the DateRangePicker.
+         */
+        get: function () {
+            var isAdaptive = this.state.windowWidth && this.state.windowWidth <= MOBILE_MEDIUM_DEVISE && this.props.adaptive;
+            return !!isAdaptive;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @hidden
      */
     DateRangePickerWithoutContext.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
@@ -306,7 +395,11 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DateRangePickerWithoutContext.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
@@ -314,28 +407,17 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
     DateRangePickerWithoutContext.prototype.render = function () {
         var _this = this;
         var value = this.value || EMPTY_SELECTIONRANGE;
+        var valueToShow = (this.mobileMode && this.show) ? this.state.currentValue : value;
         var startDateInputId = (this.props.startDateInputSettings || {}).id || this._startInputId;
         var endDateInputId = (this.props.endDateInputSettings || {}).id || this._endInputId;
         var rootClassName = classNames('k-daterangepicker', {
             'k-disabled': this.props.disabled
         }, this.props.className);
-        var localizationService = provideLocalizationService(this);
-        var startMessage = localizationService.toLanguageString(start, messages[start]);
-        var endMessage = localizationService.toLanguageString(end, messages[end]);
-        var separatorMessage = localizationService.toLanguageString(separator, messages[separator]);
-        var startDateInputProps = __assign(__assign({ label: startMessage, format: this.props.format, min: this.min, max: this.max, id: this._startInputId, disabled: this.props.disabled, valid: this.props.valid, tabIndex: this.props.tabIndex, ariaExpanded: this.show }, this.props.startDateInputSettings), { value: value.start, onChange: this.handleStartChange });
-        var endDateInputProps = __assign(__assign({ label: endMessage, format: this.props.format, min: this.min, max: this.max, id: this._endInputId, disabled: this.props.disabled, valid: this.props.valid, tabIndex: this.props.tabIndex, ariaExpanded: this.show }, this.props.endDateInputSettings), { value: value.end, onChange: this.handleEndChange });
-        var popupProps = __assign(__assign({ popupClass: 'k-daterangepicker-popup', animate: this._element !== null, anchor: this._element, id: this._popupId, anchorAlign: {
-                horizontal: 'left',
-                vertical: 'bottom'
-            }, popupAlign: {
-                horizontal: 'left',
-                vertical: 'top'
-            } }, this.props.popupSettings), { show: this.show });
-        var calendarProps = __assign(__assign({ min: this.min, max: this.max, allowReverse: this.props.allowReverse, mode: 'range', focusedDate: this.props.focusedDate, disabled: this.props.disabled }, this.props.calendarSettings), { value: value, onChange: this.handleCalendarChange });
-        var calendar = this.props.calendar
-            ? React.createElement(this.props.calendar, __assign({}, calendarProps))
-            : React.createElement(MultiViewCalendar, __assign({}, calendarProps, { ref: this.setCalendarRef }));
+        var startMessage = this.localizationService.toLanguageString(start, messages[start]);
+        var endMessage = this.localizationService.toLanguageString(end, messages[end]);
+        var separatorMessage = this.localizationService.toLanguageString(separator, messages[separator]);
+        var startDateInputProps = __assign(__assign({ disableSelection: this.mobileMode && true, label: startMessage, format: this.props.format, min: this.min, max: this.max, id: this._startInputId, disabled: this.props.disabled, valid: this.props.valid, tabIndex: this.props.tabIndex, ariaExpanded: this.show }, this.props.startDateInputSettings), { value: valueToShow.start, onChange: this.handleStartChange });
+        var endDateInputProps = __assign(__assign({ disableSelection: this.mobileMode && true, label: endMessage, format: this.props.format, min: this.min, max: this.max, id: this._endInputId, disabled: this.props.disabled, valid: this.props.valid, tabIndex: this.props.tabIndex, ariaExpanded: this.show }, this.props.endDateInputSettings), { value: valueToShow.end, onChange: this.handleEndChange });
         var reverseButton = (React.createElement(Button, __assign({ className: "k-select", fillMode: "flat", title: provideLocalizationService(this)
                 .toLanguageString(swapStartEnd, messages[swapStartEnd]), onMouseDown: this.handleReverseMouseDown, onClick: this.handleReverseClick }, {
             'aria-controls': startDateInputId + ' ' + endDateInputId,
@@ -343,23 +425,23 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
                 .toLanguageString(swapStartEnd, messages[swapStartEnd])
         }),
             React.createElement(IconWrap, { style: { transform: 'rotate(90deg)' }, name: "arrows-swap", icon: arrowsSwapIcon })));
-        return (React.createElement("span", { ref: function (span) {
-                _this._element = span;
-            }, className: rootClassName, style: this.props.style, id: this.props.id, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: this.props.tabIndex, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown },
-            this.props.startDateInput
-                ? React.createElement(this.props.startDateInput, __assign({}, startDateInputProps))
-                : React.createElement(DateInput, __assign({}, startDateInputProps, { ref: this._startDateInput, ariaRole: "combobox", ariaControls: this._popupId })),
-            (this.props.allowReverse
-                || (this.props.calendarSettings && this.props.calendarSettings.allowReverse))
-                && this.props.swapButton
-                ? (reverseButton)
-                : (separatorMessage),
-            this.props.endDateInput
-                ? React.createElement(this.props.endDateInput, __assign({}, endDateInputProps))
-                : React.createElement(DateInput, __assign({}, endDateInputProps, { ref: this._endDateInput, ariaRole: "combobox", ariaControls: this._popupId })),
-            this.props.popup
-                ? React.createElement(this.props.popup, __assign({}, popupProps), calendar)
-                : React.createElement(Popup, __assign({}, popupProps), calendar)));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("span", { ref: function (span) {
+                    _this._element = span;
+                }, className: rootClassName, style: this.props.style, id: this.props.id, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: this.props.tabIndex, onFocus: this.handleFocus, onBlur: !this.mobileMode ? this.handleBlur : undefined, onKeyDown: this.handleKeyDown },
+                this.props.startDateInput
+                    ? React.createElement(this.props.startDateInput, __assign({}, startDateInputProps))
+                    : React.createElement(DateInput, __assign({}, startDateInputProps, { ref: this._startDateInput, ariaRole: "combobox", ariaControls: this._popupId, readonly: this.mobileMode })),
+                (this.props.allowReverse
+                    || (this.props.calendarSettings && this.props.calendarSettings.allowReverse))
+                    && this.props.swapButton
+                    ? (reverseButton)
+                    : (separatorMessage),
+                this.props.endDateInput
+                    ? React.createElement(this.props.endDateInput, __assign({}, endDateInputProps))
+                    : React.createElement(DateInput, __assign({}, endDateInputProps, { ref: this._endDateInput, ariaRole: "combobox", ariaControls: this._popupId, readonly: this.mobileMode })),
+                !this.mobileMode && this.renderPopup()),
+            this.mobileMode && this.renderAdaptivePopup()));
     };
     DateRangePickerWithoutContext.prototype.focusDateInputElement = function () {
         if (!document || !this.startDateInput || !this.startDateInput.element
@@ -387,6 +469,14 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         }
         this.setState({ show: show });
     };
+    DateRangePickerWithoutContext.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/messages/index.d.ts

@@ -82,6 +82,14 @@ export declare const dateTimePickerCancel = "datetimepicker.cancel";
  * @hidden
  */
 export declare const dateTimePickerSet = "datetimepicker.set";
+/**
+ * @hidden
+ */
+export declare const dateRangePickerCancel = "datetimepicker.cancel";
+/**
+ * @hidden
+ */
+export declare const dateRangePickerConfirm = "datetimepicker.confirm";
 /**
  * @hidden
  */
@@ -94,6 +102,7 @@ export declare const messages: {
     "datetimepicker.time": string;
     "datetimepicker.cancel": string;
     "datetimepicker.set": string;
+    "datetimepicker.confirm": string;
     "daterangepicker.start": string;
     "daterangepicker.end": string;
     "daterangepicker.separator": string;

package/dist/es/messages/index.js

@@ -83,6 +83,14 @@ export var dateTimePickerCancel = 'datetimepicker.cancel';
  * @hidden
  */
 export var dateTimePickerSet = 'datetimepicker.set';
+/**
+ * @hidden
+ */
+export var dateRangePickerCancel = 'datetimepicker.cancel';
+/**
+ * @hidden
+ */
+export var dateRangePickerConfirm = 'datetimepicker.confirm';
 /**
  * @hidden
  */
@@ -95,6 +103,8 @@ export var messages = (_a = {},
     _a[time] = 'Time',
     _a[dateTimePickerCancel] = 'Cancel',
     _a[dateTimePickerSet] = 'Set',
+    _a[dateRangePickerCancel] = 'Cancel',
+    _a[dateRangePickerConfirm] = 'Confirm Selection',
     _a[start] = 'Start',
     _a[end] = 'End',
     _a[separator] = ' ',

package/dist/es/package-metadata.js

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

@@ -26,6 +26,7 @@ export interface HeaderProps {
     service: ViewService;
     headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
     commands?: React.ReactNode;
+    verticalView?: boolean;
 }
 /**
  * @hidden

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

@@ -106,7 +106,10 @@ var Header = /** @class */ (function (_super) {
         var headerTitle = this.props.headerTitle
             ? React.createElement(this.props.headerTitle, __assign({}, headerTitleProps), title)
             : React.createElement(CalendarHeaderTitle_1.CalendarHeaderTitle, __assign({}, headerTitleProps), title);
-        return (React.createElement("div", { className: "k-calendar-header k-hstack" },
+        return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-calendar-header', {
+                'k-vstack': this.props.verticalView,
+                'k-hstack': !this.props.verticalView
+            }) },
             headerTitle,
             React.createElement("span", { className: "k-spacer" }),
             React.createElement("span", { className: "k-calendar-nav k-hstack" }, this.props.commands)));

package/dist/npm/calendar/components/HorizontalViewList.d.ts

@@ -37,6 +37,7 @@ export interface HorizontalViewListProps {
     weekCell?: React.ComponentType<CalendarWeekCellProps>;
     headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
     dates: any[];
+    verticalView?: boolean;
 }
 /**
  * @hidden

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

@@ -124,7 +124,9 @@ var HorizontalViewList = /** @class */ (function (_super) {
         var selectionRange = this.props.allowReverse
             ? this.rotateSelectionRange(this.props.selectionRange)
             : this.props.selectionRange;
-        var rootClassNames = (0, kendo_react_common_1.classNames)('k-calendar-view k-hstack k-align-items-start k-justify-content-center', {
+        var rootClassNames = (0, kendo_react_common_1.classNames)('k-calendar-view k-align-items-start k-justify-content-center', {
+            'k-vstack': this.props.verticalView,
+            'k-hstack': !this.props.verticalView,
             'k-calendar-monthview': this.props.activeView === models_1.CalendarViewEnum.month,
             'k-calendar-yearview': this.props.activeView === models_1.CalendarViewEnum.year,
             'k-calendar-decadeview': this.props.activeView === models_1.CalendarViewEnum.decade,

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

@@ -30,6 +30,8 @@ export interface MultiViewCalendarProps<T = any> extends MultiViewCalendarSettin
      * Sets the value of the MultiViewCalendar. Based on the value type, the MultiViewcalendar renders a single, multiple, or range selection.
      */
     value?: Date | Date[] | SelectionRange | null;
+    /** @hidden */
+    mobileMode?: boolean;
 }
 /**
  * @hidden
@@ -108,6 +110,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
@@ -465,11 +477,11 @@ 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(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, verticalView: this.props.mobileMode, commands: (React.createElement(React.Fragment, null,
+                    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(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 })));
+                    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, verticalView: this.props.mobileMode })));
     };
     /**
      * @hidden