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

package/dist/npm/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/npm/daterangepicker/DateRangePicker.js

@@ -40,9 +40,12 @@ var DateInput_1 = require("../dateinput/DateInput");
 var MultiViewCalendar_1 = require("../calendar/components/MultiViewCalendar");
 var models_1 = require("../calendar/models");
 var utils_1 = require("../utils");
+var constants_1 = require("../common/constants");
 var messages_1 = require("../messages");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var utils_2 = require("../utils");
+var AdaptiveMode_1 = require("../common/AdaptiveMode");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
 /** @hidden */
 var DateRangePickerWithoutContext = /** @class */ (function (_super) {
     __extends(DateRangePickerWithoutContext, _super);
@@ -84,6 +87,43 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
                 ? nextProps.show
                 : nextState.show;
         };
+        _this.renderCalendar = function () {
+            var value = _this.value || models_1.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_1.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(kendo_react_popup_1.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(messages_1.dateRangePickerCancel, messages_1.messages[messages_1.dateRangePickerCancel]),
+                    onCancel: function (event) { return _this.handleCancel(event); },
+                    applyText: _this.localizationService.toLanguageString(messages_1.dateRangePickerConfirm, messages_1.messages[messages_1.dateRangePickerConfirm]),
+                    onApply: function (event) { return _this.handleBlur(event); }
+                }
+            };
+            return (React.createElement(AdaptiveMode_1.AdaptiveMode, __assign({}, actionSheetProps),
+                React.createElement(kendo_react_layout_1.ActionSheetContent, { className: '!k-overflow-hidden' },
+                    React.createElement("div", { className: 'k-scrollable-wrap' }, _this.renderCalendar()))));
+        };
         _this.handleReverseClick = function (event) {
             var value = {
                 start: _this.value.end,
@@ -102,6 +142,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) {
@@ -117,6 +160,16 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
                 onBlur.call(undefined, event);
             }
         };
+        _this.handleCancel = function (event) {
+            _this.nextTick(function () {
+                _this.setShow(false);
+                _this.setState({ currentValue: models_1.EMPTY_SELECTIONRANGE });
+            });
+            var onCancel = _this.props.onCancel;
+            if (onCancel) {
+                onCancel.call(undefined, event);
+            }
+        };
         _this.handleEndChange = function (event) {
             var value = {
                 start: _this.value.start,
@@ -188,7 +241,8 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         (0, kendo_react_common_2.validatePackage)(package_metadata_1.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: models_1.EMPTY_SELECTIONRANGE
         };
         _this.nextTick = _this.nextTick.bind(_this);
         _this.setShow = _this.setShow.bind(_this);
@@ -283,14 +337,49 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DateRangePickerWithoutContext.prototype, "document", {
+        get: function () {
+            if (!kendo_react_common_2.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 = (0, kendo_react_intl_1.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 <= constants_1.MOBILE_MEDIUM_DEVISE && this.props.adaptive;
+            return !!isAdaptive;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @hidden
      */
     DateRangePickerWithoutContext.prototype.componentDidMount = function () {
+        var _a;
+        this.observerResize = kendo_react_common_2.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
@@ -309,7 +398,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
@@ -317,28 +410,17 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
     DateRangePickerWithoutContext.prototype.render = function () {
         var _this = this;
         var value = this.value || models_1.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 = (0, kendo_react_common_1.classNames)('k-daterangepicker', {
             'k-disabled': this.props.disabled
         }, this.props.className);
-        var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
-        var startMessage = localizationService.toLanguageString(messages_1.start, messages_1.messages[messages_1.start]);
-        var endMessage = localizationService.toLanguageString(messages_1.end, messages_1.messages[messages_1.end]);
-        var separatorMessage = localizationService.toLanguageString(messages_1.separator, messages_1.messages[messages_1.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_1.MultiViewCalendar, __assign({}, calendarProps, { ref: this.setCalendarRef }));
+        var startMessage = this.localizationService.toLanguageString(messages_1.start, messages_1.messages[messages_1.start]);
+        var endMessage = this.localizationService.toLanguageString(messages_1.end, messages_1.messages[messages_1.end]);
+        var separatorMessage = this.localizationService.toLanguageString(messages_1.separator, messages_1.messages[messages_1.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(kendo_react_buttons_1.Button, __assign({ className: "k-select", fillMode: "flat", title: (0, kendo_react_intl_1.provideLocalizationService)(this)
                 .toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd]), onMouseDown: this.handleReverseMouseDown, onClick: this.handleReverseClick }, {
             'aria-controls': startDateInputId + ' ' + endDateInputId,
@@ -346,23 +428,23 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
                 .toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd])
         }),
             React.createElement(kendo_react_common_1.IconWrap, { style: { transform: 'rotate(90deg)' }, name: "arrows-swap", icon: kendo_svg_icons_1.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_1.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_1.DateInput, __assign({}, endDateInputProps, { ref: this._endDateInput, ariaRole: "combobox", ariaControls: this._popupId })),
-            this.props.popup
-                ? React.createElement(this.props.popup, __assign({}, popupProps), calendar)
-                : React.createElement(kendo_react_popup_1.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_1.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_1.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
@@ -390,6 +472,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/npm/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/npm/messages/index.js

@@ -1,7 +1,7 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.messages = exports.dateTimePickerSet = exports.dateTimePickerCancel = exports.time = exports.date = exports.toggleClock = exports.toggleTimeSelector = exports.timePickerSet = exports.timePickerCancel = exports.selectNow = exports.now = exports.toggleDateTimeSelector = exports.separator = exports.end = exports.start = exports.swapStartEnd = exports.toggleCalendar = exports.today = exports.decreaseValue = exports.increaseValue = exports.nextView = exports.prevView = void 0;
+exports.messages = exports.dateRangePickerConfirm = exports.dateRangePickerCancel = exports.dateTimePickerSet = exports.dateTimePickerCancel = exports.time = exports.date = exports.toggleClock = exports.toggleTimeSelector = exports.timePickerSet = exports.timePickerCancel = exports.selectNow = exports.now = exports.toggleDateTimeSelector = exports.separator = exports.end = exports.start = exports.swapStartEnd = exports.toggleCalendar = exports.today = exports.decreaseValue = exports.increaseValue = exports.nextView = exports.prevView = void 0;
 /**
  * @hidden
  */
@@ -86,6 +86,14 @@ exports.dateTimePickerCancel = 'datetimepicker.cancel';
  * @hidden
  */
 exports.dateTimePickerSet = 'datetimepicker.set';
+/**
+ * @hidden
+ */
+exports.dateRangePickerCancel = 'datetimepicker.cancel';
+/**
+ * @hidden
+ */
+exports.dateRangePickerConfirm = 'datetimepicker.confirm';
 /**
  * @hidden
  */
@@ -98,6 +106,8 @@ exports.messages = (_a = {},
     _a[exports.time] = 'Time',
     _a[exports.dateTimePickerCancel] = 'Cancel',
     _a[exports.dateTimePickerSet] = 'Set',
+    _a[exports.dateRangePickerCancel] = 'Cancel',
+    _a[exports.dateRangePickerConfirm] = 'Confirm Selection',
     _a[exports.start] = 'Start',
     _a[exports.end] = 'End',
     _a[exports.separator] = ' ',

package/dist/npm/package-metadata.js

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