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

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

@@ -251,9 +251,9 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
      */
     CalendarWithoutContext.prototype.componentDidMount = function () {
         var _this = this;
-        setScrollbarWidth();
         // Async calculation of height to avoid animation cancellation
         Promise.resolve().then(function () {
+            setScrollbarWidth();
             if (!_this._element) {
                 return;
             }

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+/** @hidden */
+export interface AdaptiveModeProps {
+    navigatable?: boolean;
+    navigatableElements?: string[];
+    expand: boolean;
+    animation?: boolean;
+    adaptiveTitle?: string | React.ReactNode;
+    onClose?: (event: React.SyntheticEvent) => void;
+    windowWidth?: number;
+    children: React.ReactNode;
+}
+/** @hidden */
+export declare const AdaptiveMode: (props: AdaptiveModeProps) => JSX.Element;

package/dist/es/common/AdaptiveMode.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { ActionSheet, ActionSheetHeader } from '@progress/kendo-react-layout';
+import { xIcon } from '@progress/kendo-svg-icons';
+import { Button } from '@progress/kendo-react-buttons';
+import { MOBILE_SMALL_DEVISE } from '../common/constants';
+/** @hidden */
+export var AdaptiveMode = function (props) {
+    var defaultProps = {
+        navigatable: props.navigatable || false,
+        navigatableElements: props.navigatableElements || [],
+        expand: props.expand,
+        animation: props.animation === false ? false : true,
+        onClose: props.onClose,
+        animationStyles: props.windowWidth && props.windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
+        className: props.windowWidth && props.windowWidth <= MOBILE_SMALL_DEVISE
+            ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
+            : 'k-adaptive-actionsheet k-actionsheet-bottom'
+    };
+    return (React.createElement(ActionSheet, __assign({}, defaultProps),
+        React.createElement(ActionSheetHeader, { className: 'k-text-center' },
+            React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
+                React.createElement("div", { className: "k-actionsheet-title" },
+                    React.createElement("div", null, props.adaptiveTitle)),
+                React.createElement("div", { className: "k-actionsheet-actions" },
+                    React.createElement(Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", icon: 'x', svgIcon: xIcon, onClick: props.onClose })))),
+        props.children));
+};

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

@@ -0,0 +1,4 @@
+/** @hidden */
+export declare const MOBILE_SMALL_DEVISE: number;
+/** @hidden */
+export declare const MOBILE_MEDIUM_DEVISE: number;

package/dist/es/common/constants.js

@@ -0,0 +1,4 @@
+/** @hidden */
+export var MOBILE_SMALL_DEVISE = 500;
+/** @hidden */
+export var MOBILE_MEDIUM_DEVISE = 768;

package/dist/es/datepicker/DatePicker.d.ts

@@ -72,6 +72,14 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
 }
 /**
  * @hidden
@@ -80,6 +88,7 @@ export interface DatePickerState {
     value: Date | null;
     show: boolean;
     focused: boolean;
+    windowWidth?: number;
 }
 /** @hidden */
 export declare class DatePickerWithoutContext extends React.Component<DatePickerProps, DatePickerState> implements FormComponent {
@@ -146,6 +155,8 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
         size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
         rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
         fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
+        adaptive: PropTypes.Requireable<boolean>;
+        adaptiveTitle: PropTypes.Requireable<string>;
     };
     /**
      * @hidden
@@ -184,11 +195,17 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
     private nextTickId;
     private shouldFocusDateInput;
     private prevShow;
+    private observerResize?;
+    private get document();
     constructor(props: DatePickerProps);
     /**
      * Gets the wrapping element of the DatePickerWithoutContext.
      */
     get element(): HTMLSpanElement | null;
+    /**
+     * The mobile mode of the DatePicker.
+     */
+    get mobileMode(): boolean;
     /**
      * Gets the DateInput component inside the DatePicker component.
      */
@@ -254,6 +271,8 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
     protected setShow(show: boolean): void;
     protected mergeTime(value: Date | null): Date | null;
     protected nextTick(f: () => any): void;
+    private renderPopup;
+    private renderAdaptivePopup;
     private handleInputValueChange;
     private handleCalendarValueChange;
     private handleValueChange;
@@ -262,6 +281,7 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
     private handleIconClick;
     private handleIconMouseDown;
     private handleKeyDown;
+    private calculateMedia;
 }
 /**
  * Represents the PropsContext of the `DatePicker` component.

package/dist/es/datepicker/DatePicker.js

@@ -39,7 +39,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Popup } from '@progress/kendo-react-popup';
 import { getDate, cloneDate } from '@progress/kendo-date-math';
-import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext, validatePackage, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext, validatePackage, kendoThemeMaps, canUseDOM } from '@progress/kendo-react-common';
 import { calendarIcon } from '@progress/kendo-svg-icons';
 import { packageMetadata } from '../package-metadata';
 import { DateInput } from '../dateinput/DateInput';
@@ -51,6 +51,9 @@ import { registerForLocalization, provideLocalizationService } from '@progress/k
 import { ToggleButton } from './ToggleButton';
 import { PickerWrap } from '../common/PickerWrap';
 import { PickerFloatingLabel } from '../hooks/usePickerFloatingLabel';
+import { ActionSheetContent } from '@progress/kendo-react-layout';
+import { AdaptiveMode } from '../common/AdaptiveMode';
+import { MOBILE_MEDIUM_DEVISE } from '../common/constants';
 /** @hidden */
 var DatePickerWithoutContext = /** @class */ (function (_super) {
     __extends(DatePickerWithoutContext, _super);
@@ -83,6 +86,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 && getDate(value);
+            var popupClassNames = 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, __assign({}, actionSheetProps),
+                React.createElement(ActionSheetContent, { className: '!k-overflow-hidden' }, _this.renderPopup())));
+        };
         _this.handleInputValueChange = function (event) {
             _this.handleValueChange(event.value, event);
         };
@@ -150,6 +193,17 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         };
         return _this;
     }
+    Object.defineProperty(DatePickerWithoutContext.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(DatePickerWithoutContext.prototype, "element", {
         /**
          * Gets the wrapping element of the DatePickerWithoutContext.
@@ -160,6 +214,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 <= 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.
@@ -320,10 +385,15 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DatePickerWithoutContext.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
@@ -345,20 +415,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 && getDate(value);
         var isValid = !this.validityStyles || this.validity.valid;
-        var popupClassNames = classNames('k-calendar-container k-group k-reset', popupClass);
+        var renderAdaptive = windowWidth <= MOBILE_MEDIUM_DEVISE && adaptive;
         var dateInputProps = {
             disabled: disabled,
             format: format,
@@ -385,39 +458,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 = provideLocalizationService(this)
             .toLanguageString(toggleCalendar, messages[toggleCalendar]);
         var datepicker = (React.createElement(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: classNames('k-input', 'k-datepicker', (_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', 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 }),
-                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: classNames('k-input', 'k-datepicker', (_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', 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()));
         }));
         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 } }))
@@ -439,6 +497,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
      */
@@ -507,7 +573,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/es/package-metadata.js

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

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

@@ -254,9 +254,9 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
      */
     CalendarWithoutContext.prototype.componentDidMount = function () {
         var _this = this;
-        (0, kendo_react_common_1.setScrollbarWidth)();
         // Async calculation of height to avoid animation cancellation
         Promise.resolve().then(function () {
+            (0, kendo_react_common_1.setScrollbarWidth)();
             if (!_this._element) {
                 return;
             }

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+/** @hidden */
+export interface AdaptiveModeProps {
+    navigatable?: boolean;
+    navigatableElements?: string[];
+    expand: boolean;
+    animation?: boolean;
+    adaptiveTitle?: string | React.ReactNode;
+    onClose?: (event: React.SyntheticEvent) => void;
+    windowWidth?: number;
+    children: React.ReactNode;
+}
+/** @hidden */
+export declare const AdaptiveMode: (props: AdaptiveModeProps) => JSX.Element;

package/dist/npm/common/AdaptiveMode.js

@@ -0,0 +1,42 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptiveMode = void 0;
+var React = require("react");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var constants_1 = require("../common/constants");
+/** @hidden */
+var AdaptiveMode = function (props) {
+    var defaultProps = {
+        navigatable: props.navigatable || false,
+        navigatableElements: props.navigatableElements || [],
+        expand: props.expand,
+        animation: props.animation === false ? false : true,
+        onClose: props.onClose,
+        animationStyles: props.windowWidth && props.windowWidth <= constants_1.MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
+        className: props.windowWidth && props.windowWidth <= constants_1.MOBILE_SMALL_DEVISE
+            ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
+            : 'k-adaptive-actionsheet k-actionsheet-bottom'
+    };
+    return (React.createElement(kendo_react_layout_1.ActionSheet, __assign({}, defaultProps),
+        React.createElement(kendo_react_layout_1.ActionSheetHeader, { className: 'k-text-center' },
+            React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
+                React.createElement("div", { className: "k-actionsheet-title" },
+                    React.createElement("div", null, props.adaptiveTitle)),
+                React.createElement("div", { className: "k-actionsheet-actions" },
+                    React.createElement(kendo_react_buttons_1.Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", icon: 'x', svgIcon: kendo_svg_icons_1.xIcon, onClick: props.onClose })))),
+        props.children));
+};
+exports.AdaptiveMode = AdaptiveMode;

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

@@ -0,0 +1,4 @@
+/** @hidden */
+export declare const MOBILE_SMALL_DEVISE: number;
+/** @hidden */
+export declare const MOBILE_MEDIUM_DEVISE: number;

package/dist/npm/common/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MOBILE_MEDIUM_DEVISE = exports.MOBILE_SMALL_DEVISE = void 0;
+/** @hidden */
+exports.MOBILE_SMALL_DEVISE = 500;
+/** @hidden */
+exports.MOBILE_MEDIUM_DEVISE = 768;

package/dist/npm/datepicker/DatePicker.d.ts

@@ -72,6 +72,14 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
 }
 /**
  * @hidden
@@ -80,6 +88,7 @@ export interface DatePickerState {
     value: Date | null;
     show: boolean;
     focused: boolean;
+    windowWidth?: number;
 }
 /** @hidden */
 export declare class DatePickerWithoutContext extends React.Component<DatePickerProps, DatePickerState> implements FormComponent {
@@ -146,6 +155,8 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
         size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
         rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
         fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
+        adaptive: PropTypes.Requireable<boolean>;
+        adaptiveTitle: PropTypes.Requireable<string>;
     };
     /**
      * @hidden
@@ -184,11 +195,17 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
     private nextTickId;
     private shouldFocusDateInput;
     private prevShow;
+    private observerResize?;
+    private get document();
     constructor(props: DatePickerProps);
     /**
      * Gets the wrapping element of the DatePickerWithoutContext.
      */
     get element(): HTMLSpanElement | null;
+    /**
+     * The mobile mode of the DatePicker.
+     */
+    get mobileMode(): boolean;
     /**
      * Gets the DateInput component inside the DatePicker component.
      */
@@ -254,6 +271,8 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
     protected setShow(show: boolean): void;
     protected mergeTime(value: Date | null): Date | null;
     protected nextTick(f: () => any): void;
+    private renderPopup;
+    private renderAdaptivePopup;
     private handleInputValueChange;
     private handleCalendarValueChange;
     private handleValueChange;
@@ -262,6 +281,7 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
     private handleIconClick;
     private handleIconMouseDown;
     private handleKeyDown;
+    private calculateMedia;
 }
 /**
  * Represents the PropsContext of the `DatePicker` component.