@progress/kendo-react-dateinputs 5.13.0-dev.202303301815 → 5.13.0-dev.202304110959

package/dist/npm/datepicker/DatePicker.js

@@ -54,6 +54,9 @@ var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var ToggleButton_1 = require("./ToggleButton");
 var PickerWrap_1 = require("../common/PickerWrap");
 var usePickerFloatingLabel_1 = require("../hooks/usePickerFloatingLabel");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var AdaptiveMode_1 = require("../common/AdaptiveMode");
+var constants_1 = require("../common/constants");
 /** @hidden */
 var DatePickerWithoutContext = /** @class */ (function (_super) {
     __extends(DatePickerWithoutContext, _super);
@@ -86,6 +89,46 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
                 ? nextProps.show
                 : nextState.show;
         };
+        _this.renderPopup = function () {
+            var _a = _this.props, disabled = _a.disabled, min = _a.min, max = _a.max, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate;
+            var _b = _this.props.popupSettings, popupClass = _b.popupClass, otherPopupSettings = __rest(_b, ["popupClass"]);
+            var show = _this.show;
+            var value = _this.value;
+            var sanitizedValue = value && (0, kendo_date_math_1.getDate)(value);
+            var popupClassNames = (0, kendo_react_common_1.classNames)('k-calendar-container k-group k-reset', popupClass);
+            var popupProps = __assign({ popupClass: 'k-datepicker-popup', show: show, anchor: _this._element, className: popupClassNames, id: _this._popupId, anchorAlign: {
+                    horizontal: 'left',
+                    vertical: 'bottom'
+                }, popupAlign: {
+                    horizontal: 'left',
+                    vertical: 'top'
+                } }, otherPopupSettings);
+            var calendarProps = {
+                disabled: disabled,
+                value: sanitizedValue,
+                min: min,
+                max: max,
+                weekNumber: weekNumber,
+                focusedDate: focusedDate,
+                onChange: _this.handleCalendarValueChange
+            };
+            if (_this.mobileMode) {
+                return React.createElement(_this.calendarComp, __assign({ _ref: _this.setCalendarRef }, calendarProps));
+            }
+            return (React.createElement(_this.popupComp, __assign({}, popupProps),
+                React.createElement(_this.calendarComp, __assign({ _ref: _this.setCalendarRef }, calendarProps))));
+        };
+        _this.renderAdaptivePopup = function () {
+            var _a = _this.state.windowWidth, windowWidth = _a === void 0 ? 0 : _a;
+            var actionSheetProps = {
+                expand: _this.show,
+                onClose: _this.handleBlur,
+                adaptiveTitle: _this.props.adaptiveTitle,
+                windowWidth: windowWidth
+            };
+            return (React.createElement(AdaptiveMode_1.AdaptiveMode, __assign({}, actionSheetProps),
+                React.createElement(kendo_react_layout_1.ActionSheetContent, { className: '!k-overflow-hidden' }, _this.renderPopup())));
+        };
         _this.handleInputValueChange = function (event) {
             _this.handleValueChange(event.value, event);
         };
@@ -153,6 +196,17 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         };
         return _this;
     }
+    Object.defineProperty(DatePickerWithoutContext.prototype, "document", {
+        get: function () {
+            if (!kendo_react_common_1.canUseDOM) {
+                return;
+            }
+            // useful only for user actions
+            return (this.element && this.element.ownerDocument) || document;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DatePickerWithoutContext.prototype, "element", {
         /**
          * Gets the wrapping element of the DatePickerWithoutContext.
@@ -163,6 +217,17 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DatePickerWithoutContext.prototype, "mobileMode", {
+        /**
+         * The mobile mode of the DatePicker.
+         */
+        get: function () {
+            var isAdaptive = this.state.windowWidth && this.state.windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && this.props.adaptive;
+            return !!isAdaptive;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DatePickerWithoutContext.prototype, "dateInput", {
         /**
          * Gets the DateInput component inside the DatePicker component.
@@ -323,10 +388,15 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DatePickerWithoutContext.prototype.componentDidMount = function () {
+        var _a;
+        this.observerResize = kendo_react_common_1.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
@@ -348,20 +418,23 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DatePickerWithoutContext.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
      */
     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, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate, 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 _e = this.props.popupSettings, popupClass = _e.popupClass, otherPopupSettings = __rest(_e, ["popupClass"]);
+        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 show = this.show;
         var value = this.value;
-        var sanitizedValue = value && (0, kendo_date_math_1.getDate)(value);
         var isValid = !this.validityStyles || this.validity.valid;
-        var popupClassNames = (0, kendo_react_common_1.classNames)('k-calendar-container k-group k-reset', popupClass);
+        var renderAdaptive = windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && adaptive;
         var dateInputProps = {
             disabled: disabled,
             format: format,
@@ -388,39 +461,24 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             fillMode: null,
             rounded: null
         };
-        var popupProps = __assign({ popupClass: 'k-datepicker-popup', show: show, anchor: this._element, className: popupClassNames, id: this._popupId, anchorAlign: {
-                horizontal: 'left',
-                vertical: 'bottom'
-            }, popupAlign: {
-                horizontal: 'left',
-                vertical: 'top'
-            } }, otherPopupSettings);
-        var calendarProps = {
-            disabled: disabled,
-            value: sanitizedValue,
-            min: min,
-            max: max,
-            weekNumber: weekNumber,
-            focusedDate: focusedDate,
-            onChange: this.handleCalendarValueChange
-        };
         var toggleButtonTitle = (0, kendo_react_intl_1.provideLocalizationService)(this)
             .toLanguageString(messages_1.toggleCalendar, messages_1.messages[messages_1.toggleCalendar]);
         var datepicker = (React.createElement(kendo_react_common_1.AsyncFocusBlur, { onFocus: this.handleFocus, onBlur: this.handleBlur, onSyncBlur: this.props.onBlur, onSyncFocus: this.props.onFocus }, function (_a) {
             var _b;
             var onFocus = _a.onFocus, onBlur = _a.onBlur;
-            return (React.createElement("span", { ref: function (span) { _this._element = span; }, className: (0, kendo_react_common_1.classNames)('k-input', 'k-datepicker', (_b = {},
-                    _b["k-input-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
-                    _b["k-rounded-".concat(kendo_react_common_1.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', ariaExpanded: _this.show, ariaControls: _this._popupId }, dateInputProps)),
-                React.createElement(_this.toggleButtonComp, { type: "button", icon: "calendar", svgIcon: kendo_svg_icons_1.calendarIcon, title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
-                React.createElement(_this.popupComp, __assign({}, popupProps),
-                    React.createElement(_this.calendarComp, __assign({ _ref: _this.setCalendarRef }, calendarProps)))));
+            return (React.createElement(React.Fragment, null,
+                React.createElement("span", { ref: function (span) { _this._element = span; }, className: (0, kendo_react_common_1.classNames)('k-input', 'k-datepicker', (_b = {},
+                        _b["k-input-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+                        _b["k-rounded-".concat(kendo_react_common_1.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', 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()));
         }));
         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 } }))
@@ -442,6 +500,14 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         clearTimeout(this.nextTickId);
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
+    DatePickerWithoutContext.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
      */
@@ -510,7 +576,9 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         valid: PropTypes.bool,
         size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
         rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
-        fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
+        fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']),
+        adaptive: PropTypes.bool,
+        adaptiveTitle: PropTypes.string
     };
     /**
      * @hidden

package/dist/npm/package-metadata.js

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