@progress/kendo-react-dateinputs 7.4.0 → 7.5.0-develop.10

package/calendar/components/ViewList.mjs

@@ -9,17 +9,18 @@
 import * as s from "react";
 import o from "prop-types";
 import { classNames as g } from "@progress/kendo-react-common";
-import { cloneDate as x, getDate as d, isEqualDate as D } from "@progress/kendo-date-math";
-import { provideIntlService as y, registerForIntl as V } from "@progress/kendo-react-intl";
-import { Virtualization as S } from "../../virtualization/Virtualization.mjs";
+import { cloneDate as D, getDate as d, isEqualDate as x } from "@progress/kendo-date-math";
+import { provideIntlService as y, registerForIntl as S } from "@progress/kendo-react-intl";
+import { Virtualization as V } from "../../virtualization/Virtualization.mjs";
 import { View as I } from "./View.mjs";
 import { Header as T } from "./Header.mjs";
-import { dateInRange as u, shiftWeekNames as C, isInRange as E, getToday as N } from "../../utils.mjs";
-import { CalendarViewEnum as l } from "../models/CalendarViewEnum.mjs";
-import { TodayCommand as O } from "./TodayCommand.mjs";
-const H = 5, h = class h extends s.Component {
-  constructor(r) {
-    super(r), this.virtualization = null, this.calendarView = null, this.table = null, this.intl = null, this.bottomOffset = 0, this.viewOffset = 0, this.viewHeight = 0, this._element = null, this.isActive = !1, this.animateToIndex = !0, this.shouldScroll = !1, this.focusActiveDate = () => {
+import { WeekNamesService as N } from "../services/WeekNamesService.mjs";
+import { dateInRange as u, shiftWeekNames as C, isInRange as E, getToday as O } from "../../utils.mjs";
+import { CalendarViewEnum as n } from "../models/CalendarViewEnum.mjs";
+import { TodayCommand as H } from "./TodayCommand.mjs";
+const z = 5, h = class h extends s.Component {
+  constructor(l) {
+    super(l), this.virtualization = null, this.calendarView = null, this.table = null, this.intl = null, this.bottomOffset = 0, this.viewOffset = 0, this.viewHeight = 0, this._element = null, this.isActive = !1, this.animateToIndex = !0, this.shouldScroll = !1, this.weekService = null, this.focusActiveDate = () => {
       if (!this._element)
         return;
       const e = this._element.querySelector("td.k-focus"), t = this._element.querySelector(".k-state-pending-focus");
@@ -56,12 +57,12 @@ const H = 5, h = class h extends s.Component {
           tabIndex: this.props.tabIndex,
           "aria-activedescendant": i + this.props.focusedDate.getTime()
         },
-        /* @__PURE__ */ s.createElement("colgroup", null, e.map((a, n) => /* @__PURE__ */ s.createElement("col", { key: n }))),
+        /* @__PURE__ */ s.createElement("colgroup", null, e.map((a, r) => /* @__PURE__ */ s.createElement("col", { key: r }))),
         t.map((a) => /* @__PURE__ */ s.createElement(
           I,
           {
-            ref: (n) => {
-              this.calendarView || (this.calendarView = n);
+            ref: (r) => {
+              this.calendarView || (this.calendarView = r);
             },
             key: a.getTime(),
             activeView: this.props.activeView,
@@ -83,13 +84,13 @@ const H = 5, h = class h extends s.Component {
     }, this.calculateHeights = () => {
       if (!this.props.dom)
         return;
-      const e = this.props.activeView === l.month ? this.props.dom.scrollableContentHeight : this.props.dom.scrollableYearContentHeight;
+      const e = this.props.activeView === n.month ? this.props.dom.scrollableContentHeight : this.props.dom.scrollableYearContentHeight;
       this.bottomOffset = e - this.props.dom.viewHeight(this.props.activeView), this.viewOffset = -1 * this.props.dom.headerHeight, this.viewHeight = this.props.dom.viewHeight(this.props.activeView) || 1;
     }, this.getTake = (e, t) => Math.min(t - e, this.take), this.handleScrollAction = ({ index: e, scrollAction: t, pageAction: i }) => {
       const a = i ? i.skip : this.state.skip;
       if ((this.state.index !== e || this.state.skip !== a) && this.setState({ index: e, skip: a }), this.table && t) {
-        const n = `translateY(${t.offset}px)`;
-        this.table.style.transform = n;
+        const r = `translateY(${t.offset}px)`;
+        this.table.style.transform = r;
       }
     }, this.handleTodayClick = (e) => {
       this.shouldScroll = !0, this.handleDateChange.call(void 0, e, !0);
@@ -99,7 +100,7 @@ const H = 5, h = class h extends s.Component {
         const a = {
           syntheticEvent: e.syntheticEvent,
           nativeEvent: e.nativeEvent,
-          value: x(e.value),
+          value: D(e.value),
           target: this,
           isTodayClick: t
         };
@@ -114,15 +115,12 @@ const H = 5, h = class h extends s.Component {
     return this._element;
   }
   get weekNames() {
-    this.intl = y(this);
-    const r = C(
-      this.intl.dateFormatNames({ nameType: "short", type: "days" }),
-      this.intl.firstDay()
-    );
-    return this.weekNumber ? [""].concat(r) : r;
+    this.intl = y(this), this.weekService = new N(this.intl);
+    const l = this.weekService.getWeekNames(this.weekNumber, this.props.weekDaysFormat), e = C(l, this.intl.firstDay());
+    return this.weekNumber ? [""].concat(e) : e;
   }
   get weekNumber() {
-    return !!(this.props.showWeekNumbers && this.props.activeView === l.month);
+    return !!(this.props.showWeekNumbers && this.props.activeView === n.month);
   }
   get take() {
     return this.props.take !== void 0 ? this.props.take : h.defaultProps.take;
@@ -131,28 +129,28 @@ const H = 5, h = class h extends s.Component {
     return !!(this.props.smoothScroll && this.animateToIndex);
   }
   get todayIsInRange() {
-    return E(N(), d(this.props.min), d(this.props.max));
+    return E(O(), d(this.props.min), d(this.props.max));
   }
-  componentDidUpdate(r, e) {
+  componentDidUpdate(l, e) {
     this.shouldScroll = !1, this.indexToScroll !== void 0 && this.virtualization && this.virtualization[this.animate ? "animateToIndex" : "scrollToIndex"](this.indexToScroll), this.isActive && this.focusActiveDate(), this.lastView = this.props.activeView, this.indexToScroll = void 0;
   }
   render() {
     this.calculateHeights();
-    const r = this.lastView !== this.props.activeView, e = u(this.props.focusedDate, this.props.min, this.props.max), t = r ? this.props.service.skip(e, this.props.min) : this.state.skip, i = this.props.service.total(this.props.min, this.props.max), a = this.getTake(t, i), n = this.props.service.addToDate(this.props.min, t), f = this.props.service.addToDate(this.props.min, this.state.index), p = new Array(this.props.service.rowLength(this.weekNumber)).fill(""), m = this.props.activeView !== this.lastView;
-    this.animateToIndex = !m, (m || !D(this.lastFocus, e) || this.shouldScroll || !this.props.shouldScroll || this.props.shouldScroll()) && (this.indexToScroll = this.props.service.skip(e, this.props.min)), this.lastFocus = e;
-    const v = g(
+    const l = this.lastView !== this.props.activeView, e = u(this.props.focusedDate, this.props.min, this.props.max), t = l ? this.props.service.skip(e, this.props.min) : this.state.skip, i = this.props.service.total(this.props.min, this.props.max), a = this.getTake(t, i), r = this.props.service.addToDate(this.props.min, t), v = this.props.service.addToDate(this.props.min, this.state.index), p = new Array(this.props.service.rowLength(this.weekNumber)).fill(""), m = this.props.activeView !== this.lastView;
+    this.animateToIndex = !m, (m || !x(this.lastFocus, e) || this.shouldScroll || !this.props.shouldScroll || this.props.shouldScroll()) && (this.indexToScroll = this.props.service.skip(e, this.props.min)), this.lastFocus = e;
+    const f = g(
       "k-calendar-view k-vstack",
       {
-        "k-calendar-monthview": this.props.activeView === l.month,
-        "k-calendar-yearview": this.props.activeView === l.year,
-        "k-calendar-decadeview": this.props.activeView === l.decade,
-        "k-calendar-centuryview": this.props.activeView === l.century
+        "k-calendar-monthview": this.props.activeView === n.month,
+        "k-calendar-yearview": this.props.activeView === n.year,
+        "k-calendar-decadeview": this.props.activeView === n.decade,
+        "k-calendar-centuryview": this.props.activeView === n.century
       }
-    ), w = this.buildDates(p, this.props.service.datesList(n, a)), k = /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
+    ), k = this.buildDates(p, this.props.service.datesList(r, a)), w = /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
       T,
       {
         key: "calendar-view-list-header",
-        currentDate: f,
+        currentDate: v,
         min: this.props.min,
         max: this.props.max,
         activeView: this.props.activeView,
@@ -160,7 +158,7 @@ const H = 5, h = class h extends s.Component {
         service: this.props.service,
         headerTitle: this.props.headerTitle,
         commands: /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
-          O,
+          H,
           {
             min: this.props.min,
             max: this.props.max,
@@ -170,8 +168,8 @@ const H = 5, h = class h extends s.Component {
           }
         ))
       }
-    ), this.props.activeView === l.month && this.buildMonthView(p, this.weekNames), /* @__PURE__ */ s.createElement(
-      S,
+    ), this.props.activeView === n.month && this.buildMonthView(p, this.weekNames), /* @__PURE__ */ s.createElement(
+      V,
       {
         key: "calendar-view-list-content",
         skip: t,
@@ -185,7 +183,7 @@ const H = 5, h = class h extends s.Component {
         onScroll: this.props.onScroll,
         onScrollAction: this.handleScrollAction,
         onMount: this.handleVirtualizationMount,
-        children: w,
+        children: k,
         tabIndex: this.props.tabIndex
       }
     ));
@@ -195,9 +193,9 @@ const H = 5, h = class h extends s.Component {
         ref: (b) => {
           this._element = b;
         },
-        className: v
+        className: f
       },
-      this.props.dom.didCalculate ? k : null
+      this.props.dom.didCalculate ? w : null
     );
   }
 };
@@ -215,14 +213,16 @@ h.propTypes = {
   value: o.instanceOf(Date),
   viewHeight: o.number,
   viewOffset: o.number,
+  weekDaysFormat: o.oneOf(["short", "abbreviated", "narrow"]),
   tabIndex: o.number
 }, h.defaultProps = {
-  take: H,
+  take: z,
   showWeekNumbers: !1,
+  weekDaysFormat: "short",
   smoothScroll: !0
 };
 let c = h;
-V(c);
+S(c);
 export {
   c as ViewList
 };

package/calendar/services/WeekNamesService.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../utils.js");class a{constructor(e){this.intl=e}getWeekNames(e=!1){const t=s.shiftWeekNames(this.intl.dateFormatNames({nameType:"short",type:"days"}),this.intl.firstDay());return e?[""].concat(t):t}}exports.WeekNamesService=a;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../utils.js");class c{constructor(e){this.intl=e}getWeekNames(e=!1,t){const s=i.shiftWeekNames(this.intl.dateFormatNames({nameType:t!=null?t:"short",type:"days"}),this.intl.firstDay());return e?[""].concat(s):s}}exports.WeekNamesService=c;

package/calendar/services/WeekNamesService.mjs

@@ -6,17 +6,17 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import { shiftWeekNames as s } from "../../utils.mjs";
+import { shiftWeekNames as i } from "../../utils.mjs";
 class r {
   constructor(e) {
     this.intl = e;
   }
-  getWeekNames(e = !1) {
-    const t = s(
-      this.intl.dateFormatNames({ nameType: "short", type: "days" }),
+  getWeekNames(e = !1, t) {
+    const s = i(
+      this.intl.dateFormatNames({ nameType: t != null ? t : "short", type: "days" }),
       this.intl.firstDay()
     );
-    return e ? [""].concat(t) : t;
+    return e ? [""].concat(s) : s;
   }
 }
 export {

package/datepicker/DatePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),e=require("prop-types"),_=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),U=require("@progress/kendo-svg-icons"),j=require("../package-metadata.js"),$=require("../dateinput/DateInput.js"),H=require("../calendar/components/Calendar.js"),m=require("../utils.js"),D=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),X=require("./ToggleButton.js"),Z=require("../common/PickerWrap.js"),G=require("../hooks/usePickerFloatingLabel.js"),J=require("@progress/kendo-react-layout"),Q=require("../common/AdaptiveMode.js"),Y=require("../common/constants.js");function ee(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>l[t]})}}return s.default=l,Object.freeze(s)}const r=ee(W),o=class o extends r.Component{constructor(s){super(s),this._element=null,this._dateInput=r.createRef(),this._calendar=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.setCalendarRef=t=>{this._calendar=t},this.nextValue=(t,i)=>t.value!==void 0?t.value:i.value,this.nextShow=(t,i)=>t.show!==void 0?t.show:i.show,this.renderPopup=()=>{const{disabled:t,min:i,max:a,weekNumber:g,focusedDate:f,popupSettings:d}=this.props,{popupClass:v,...w}=d,b=this.show,h=this.value,y=h&&I.getDate(h),p=n.classNames("k-calendar-container k-group k-reset",v),k={popupClass:"k-datepicker-popup",show:b,anchor:this._element,className:p,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...w},c={disabled:t,value:y,min:i,max:a,weekNumber:g,focusedDate:f,className:this.mobileMode?"k-calendar-lg":"",navigation:!this.mobileMode,onChange:this.handleCalendarValueChange};return this.mobileMode?r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}):r.createElement(this.popupComp,{...k},r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}))},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,i={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t};return r.createElement(Q.AdaptiveMode,{...i},r.createElement(J.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderPopup()))},this.handleInputValueChange=t=>{this.handleValueChange(t.value,t)},this.handleCalendarValueChange=t=>{const i=this.mergeTime(t.value);this.handleValueChange(i,t)},this.handleValueChange=(t,i)=>{this.setState({value:I.cloneDate(t||void 0)}),this.valueDuringOnChange=t,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:a}=this.props;a&&a.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:i,keyCode:a}=t;if(a===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(a===n.Keys.up||a===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=a===n.Keys.up,this.setShow(a===n.Keys.down))},n.validatePackage(j.packageMetadata),this.state={value:this.props.defaultValue||o.defaultProps.defaultValue,show:this.props.defaultShow||o.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=Y.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get dateInput(){return this._dateInput.current}get calendar(){return this._calendar}get value(){const s=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return s!==null?I.cloneDate(s):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get min(){return this.props.min!==void 0?this.props.min:o.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:o.defaultProps.max}get dateInputComp(){return this.props.dateInput||o.defaultProps.dateInput}get toggleButtonComp(){return this.props.toggleButton||o.defaultProps.toggleButton}get calendarComp(){return this.props.calendar||o.defaultProps.calendar}get popupComp(){return this.props.popup||o.defaultProps.popup}get pickerWrapComp(){return this.props.pickerWrap||o.defaultProps.pickerWrap}get validity(){const s=m.isInDateRange(this.value,this.min,this.max),t=this.props.validationMessage!==void 0,i=(!this.required||this.value!==null)&&s,a=this.props.valid!==void 0?this.props.valid:i;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:a,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:o.defaultProps.required}componentDidMount(){var s;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._calendar&&this._calendar.element&&this.show&&!this.prevShow&&this._calendar.element.focus({preventScroll:!0}),this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var s;clearTimeout(this.nextTickId),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:s=o.defaultProps.size,rounded:t=o.defaultProps.rounded,fillMode:i=o.defaultProps.fillMode,disabled:a,tabIndex:g,title:f,id:d,format:v,formatPlaceholder:w,min:b,max:h,className:y,width:p,name:k,validationMessage:c,required:E,validityStyles:R,ariaLabelledBy:z,ariaDescribedBy:F,ariaLabel:N,placeholder:V,label:C,popupSettings:te,defaultValue:se,defaultShow:ie,value:oe,popup:ae,weekNumber:ne,dateInput:re,calendar:le,toggleButton:ue,onChange:de,onBlur:he,onFocus:pe,show:ce,onOpen:me,pickerWrap:ge,...O}=this.props,A=this.value,S=!this.validityStyles||this.validity.valid,L={disabled:a,format:v,formatPlaceholder:w,id:d,ariaLabelledBy:z,ariaDescribedBy:F,ariaLabel:N,max:h,min:b,name:k,onChange:this.handleInputValueChange,required:E,tabIndex:this.show?-1:g,title:f,valid:this.validity.valid,validationMessage:c,validityStyles:R,value:A,label:void 0,placeholder:this.state.focused?null:V,ariaExpanded:this.show,size:null,fillMode:null,rounded:null},M=q.provideLocalizationService(this).toLanguageString(D.toggleCalendar,D.messages[D.toggleCalendar]),P=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},T=>r.createElement(r.Fragment,null,r.createElement("span",{...C?{}:O,ref:K=>{this._element=K},className:n.classNames("k-input","k-datepicker",{[`k-input-${n.kendoThemeMaps.sizeMap[s]||s}`]:s,[`k-rounded-${n.kendoThemeMaps.roundedMap[t]||t}`]:t,[`k-input-${i}`]:i,"k-invalid":!S,"k-required":this.required,"k-disabled":a},y),onKeyDown:this.handleKeyDown,style:{width:p},onFocus:T.onFocus,onBlur:T.onBlur,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",readonly:this.mobileMode,ariaExpanded:this.show,ariaControls:this._popupId,...L}),r.createElement(this.toggleButtonComp,{type:"button",icon:"calendar",svgIcon:U.calendarIcon,title:M,className:"k-input-button",rounded:null,onClick:this.mobileMode?void 0:this.handleIconClick,"aria-label":M,onMouseDown:this.handleIconMouseDown}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return C?r.createElement(G.PickerFloatingLabel,{dateInput:this._dateInput,label:C,editorId:d,editorValid:S,editorDisabled:a,children:P,style:{width:p},...O}):P}setShow(s){const{onOpen:t,onClose:i}=this.props;this.show!==s&&(this.setState({show:s}),s&&t&&t.call(void 0,{target:this}),!s&&i&&i.call(void 0,{target:this}))}mergeTime(s){return this.value&&s?m.setTime(s,this.value):s}nextTick(s){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>s())}calculateMedia(s){for(let t of s)this.setState({windowWidth:t.target.clientWidth})}};o.displayName="DatePicker",o.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),adaptive:e.bool,adaptiveTitle:e.string},o.defaultProps={defaultShow:!1,defaultValue:null,dateInput:$.DateInput,calendar:H.Calendar,toggleButton:X.ToggleButton,popup:_.Popup,pickerWrap:Z.PickerWrap,disabled:!1,format:"d",max:m.MAX_DATE,min:m.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,required:!1,validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid"};let u=o;const x=n.createPropsContext(),B=n.withIdHOC(n.withPropsContext(x,u));B.displayName="KendoReactDatePicker";q.registerForLocalization(u);exports.DatePicker=B;exports.DatePickerPropsContext=x;exports.DatePickerWithoutContext=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),e=require("prop-types"),_=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),U=require("@progress/kendo-svg-icons"),j=require("../package-metadata.js"),$=require("../dateinput/DateInput.js"),H=require("../calendar/components/Calendar.js"),m=require("../utils.js"),D=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),X=require("./ToggleButton.js"),Z=require("../common/PickerWrap.js"),G=require("../hooks/usePickerFloatingLabel.js"),J=require("@progress/kendo-react-layout"),Q=require("../common/AdaptiveMode.js"),Y=require("../common/constants.js");function ee(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>l[t]})}}return s.default=l,Object.freeze(s)}const r=ee(W),o=class o extends r.Component{constructor(s){super(s),this._element=null,this._dateInput=r.createRef(),this._calendar=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.setCalendarRef=t=>{this._calendar=t},this.nextValue=(t,i)=>t.value!==void 0?t.value:i.value,this.nextShow=(t,i)=>t.show!==void 0?t.show:i.show,this.renderPopup=()=>{const{disabled:t,min:i,max:a,weekNumber:g,focusedDate:f,popupSettings:d}=this.props,{popupClass:v,...w}=d,b=this.show,h=this.value,y=h&&I.getDate(h),p=n.classNames(v),C={popupClass:"k-datepicker-popup",show:b,anchor:this._element,className:p,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...w},c={disabled:t,value:y,min:i,max:a,weekNumber:g,focusedDate:f,className:this.mobileMode?"k-calendar-lg":"",navigation:!this.mobileMode,onChange:this.handleCalendarValueChange};return this.mobileMode?r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}):r.createElement(this.popupComp,{...C},r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}))},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,i={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t};return r.createElement(Q.AdaptiveMode,{...i},r.createElement(J.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderPopup()))},this.handleInputValueChange=t=>{this.handleValueChange(t.value,t)},this.handleCalendarValueChange=t=>{const i=this.mergeTime(t.value);this.handleValueChange(i,t)},this.handleValueChange=(t,i)=>{this.setState({value:I.cloneDate(t||void 0)}),this.valueDuringOnChange=t,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:a}=this.props;a&&a.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:i,keyCode:a}=t;if(a===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(a===n.Keys.up||a===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=a===n.Keys.up,this.setShow(a===n.Keys.down))},n.validatePackage(j.packageMetadata),this.state={value:this.props.defaultValue||o.defaultProps.defaultValue,show:this.props.defaultShow||o.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=Y.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get dateInput(){return this._dateInput.current}get calendar(){return this._calendar}get value(){const s=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return s!==null?I.cloneDate(s):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get min(){return this.props.min!==void 0?this.props.min:o.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:o.defaultProps.max}get dateInputComp(){return this.props.dateInput||o.defaultProps.dateInput}get toggleButtonComp(){return this.props.toggleButton||o.defaultProps.toggleButton}get calendarComp(){return this.props.calendar||o.defaultProps.calendar}get popupComp(){return this.props.popup||o.defaultProps.popup}get pickerWrapComp(){return this.props.pickerWrap||o.defaultProps.pickerWrap}get validity(){const s=m.isInDateRange(this.value,this.min,this.max),t=this.props.validationMessage!==void 0,i=(!this.required||this.value!==null)&&s,a=this.props.valid!==void 0?this.props.valid:i;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:a,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:o.defaultProps.required}componentDidMount(){var s;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._calendar&&this._calendar.element&&this.show&&!this.prevShow&&this._calendar.element.focus({preventScroll:!0}),this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var s;clearTimeout(this.nextTickId),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:s=o.defaultProps.size,rounded:t=o.defaultProps.rounded,fillMode:i=o.defaultProps.fillMode,disabled:a,tabIndex:g,title:f,id:d,format:v,formatPlaceholder:w,min:b,max:h,className:y,width:p,name:C,validationMessage:c,required:E,validityStyles:R,ariaLabelledBy:z,ariaDescribedBy:F,ariaLabel:N,placeholder:V,label:k,popupSettings:te,defaultValue:se,defaultShow:ie,value:oe,popup:ae,weekNumber:ne,dateInput:re,calendar:le,toggleButton:ue,onChange:de,onBlur:he,onFocus:pe,show:ce,onOpen:me,pickerWrap:ge,...O}=this.props,A=this.value,S=!this.validityStyles||this.validity.valid,L={disabled:a,format:v,formatPlaceholder:w,id:d,ariaLabelledBy:z,ariaDescribedBy:F,ariaLabel:N,max:h,min:b,name:C,onChange:this.handleInputValueChange,required:E,tabIndex:this.show?-1:g,title:f,valid:this.validity.valid,validationMessage:c,validityStyles:R,value:A,label:void 0,placeholder:this.state.focused?null:V,ariaExpanded:this.show,size:null,fillMode:null,rounded:null},M=q.provideLocalizationService(this).toLanguageString(D.toggleCalendar,D.messages[D.toggleCalendar]),P=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},T=>r.createElement(r.Fragment,null,r.createElement("span",{...k?{}:O,ref:K=>{this._element=K},className:n.classNames("k-input","k-datepicker",{[`k-input-${n.kendoThemeMaps.sizeMap[s]||s}`]:s,[`k-rounded-${n.kendoThemeMaps.roundedMap[t]||t}`]:t,[`k-input-${i}`]:i,"k-invalid":!S,"k-required":this.required,"k-disabled":a},y),onKeyDown:this.handleKeyDown,style:{width:p},onFocus:T.onFocus,onBlur:T.onBlur,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",readonly:this.mobileMode,ariaExpanded:this.show,ariaControls:this._popupId,...L}),r.createElement(this.toggleButtonComp,{type:"button",icon:"calendar",svgIcon:U.calendarIcon,title:M,className:"k-input-button",rounded:null,onClick:this.mobileMode?void 0:this.handleIconClick,"aria-label":M,onMouseDown:this.handleIconMouseDown}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return k?r.createElement(G.PickerFloatingLabel,{dateInput:this._dateInput,label:k,editorId:d,editorValid:S,editorDisabled:a,children:P,style:{width:p},...O}):P}setShow(s){const{onOpen:t,onClose:i}=this.props;this.show!==s&&(this.setState({show:s}),s&&t&&t.call(void 0,{target:this}),!s&&i&&i.call(void 0,{target:this}))}mergeTime(s){return this.value&&s?m.setTime(s,this.value):s}nextTick(s){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>s())}calculateMedia(s){for(let t of s)this.setState({windowWidth:t.target.clientWidth})}};o.displayName="DatePicker",o.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),adaptive:e.bool,adaptiveTitle:e.string},o.defaultProps={defaultShow:!1,defaultValue:null,dateInput:$.DateInput,calendar:H.Calendar,toggleButton:X.ToggleButton,popup:_.Popup,pickerWrap:Z.PickerWrap,disabled:!1,format:"d",max:m.MAX_DATE,min:m.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,required:!1,validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid"};let u=o;const x=n.createPropsContext(),B=n.withIdHOC(n.withPropsContext(x,u));B.displayName="KendoReactDatePicker";q.registerForLocalization(u);exports.DatePicker=B;exports.DatePickerPropsContext=x;exports.DatePickerWithoutContext=u;

package/datepicker/DatePicker.mjs

@@ -32,7 +32,6 @@ const o = class o extends n.Component {
       this._calendar = t;
     }, this.nextValue = (t, s) => t.value !== void 0 ? t.value : s.value, this.nextShow = (t, s) => t.show !== void 0 ? t.show : s.show, this.renderPopup = () => {
       const { disabled: t, min: s, max: a, weekNumber: c, focusedDate: m, popupSettings: l } = this.props, { popupClass: f, ...g } = l, v = this.show, d = this.value, w = d && W(d), u = M(
-        "k-calendar-container k-group k-reset",
         f
       ), b = {
         popupClass: "k-datepicker-popup",

package/daterangepicker/DateRangePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),r=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),O=require("@progress/kendo-svg-icons"),k=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),T=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),d=require("../utils.js"),x=require("../common/constants.js"),n=require("../messages/index.js"),P=require("@progress/kendo-react-buttons"),_=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function A(u){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>u[e]})}}return a.default=u,Object.freeze(a)}const i=A(R),l=class l extends i.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=i.createRef(),this._endDateInput=i.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={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:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(T.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={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?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:o=>this.handleCancel(o),adaptiveTitle:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(_.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{className:"!k-overflow-hidden"},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},o={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,o)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:o}=e;s===r.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):o&&s===r.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):o&&s===r.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:o}=this.props;if(o){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};o.call(void 0,m)}this.valueDuringOnChange=void 0},r.validatePackage(k.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(r.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=x.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const a=this.value||h.EMPTY_SELECTIONRANGE,e=this.mobileMode&&this.show?this.state.currentValue:a,s=(this.props.startDateInputSettings||{}).id||this._startInputId,o=(this.props.endDateInputSettings||{}).id||this._endInputId,m=r.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),b=this.localizationService.toLanguageString(n.start,n.messages[n.start]),E=this.localizationService.toLanguageString(n.end,n.messages[n.end]),S=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:b,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:e.start,onChange:this.handleStartChange},v={disableSelection:this.mobileMode&&!0,label:E,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:e.end,onChange:this.handleEndChange},C=i.createElement(P.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":s+" "+o,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(r.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:O.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:y=>{this._element=y},className:m,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,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...f,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?C:S,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup())}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=r.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(let e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:d.nullable(t.instanceOf(Date).isRequired),end:d.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInputWithoutContext.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:d.nullable(t.instanceOf(Date).isRequired),end:d.nullable(t.instanceOf(Date).isRequired)})},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:d.MAX_DATE,min:d.MIN_DATE,swapButton:!1};let p=l;const I=r.createPropsContext(),w=r.withIdHOC(r.withPropsContext(I,p));w.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=w;exports.DateRangePickerPropsContext=I;exports.DateRangePickerWithoutContext=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),O=require("@progress/kendo-svg-icons"),k=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),T=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),d=require("../utils.js"),x=require("../common/constants.js"),n=require("../messages/index.js"),P=require("@progress/kendo-react-buttons"),_=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function A(u){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>u[e]})}}return a.default=u,Object.freeze(a)}const i=A(R),l=class l extends i.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=i.createRef(),this._endDateInput=i.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={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:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(T.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","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?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),adaptiveTitle:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(_.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{className:"!k-overflow-hidden"},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},o.validatePackage(k.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=x.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const a=this.value||h.EMPTY_SELECTIONRANGE,e=this.mobileMode&&this.show?this.state.currentValue:a,s=(this.props.startDateInputSettings||{}).id||this._startInputId,r=(this.props.endDateInputSettings||{}).id||this._endInputId,m=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),b=this.localizationService.toLanguageString(n.start,n.messages[n.start]),E=this.localizationService.toLanguageString(n.end,n.messages[n.end]),S=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:b,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:e.start,onChange:this.handleStartChange},v={disableSelection:this.mobileMode&&!0,label:E,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:e.end,onChange:this.handleEndChange},C=i.createElement(P.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":s+" "+r,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:O.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:y=>{this._element=y},className:m,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,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...f,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?C:S,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup())}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(let e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:d.nullable(t.instanceOf(Date).isRequired),end:d.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInputWithoutContext.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:d.nullable(t.instanceOf(Date).isRequired),end:d.nullable(t.instanceOf(Date).isRequired)})},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:d.MAX_DATE,min:d.MIN_DATE,swapButton:!1};let p=l;const I=o.createPropsContext(),w=o.withIdHOC(o.withPropsContext(I,p));w.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=w;exports.DateRangePickerPropsContext=I;exports.DateRangePickerWithoutContext=p;

package/daterangepicker/DateRangePicker.mjs

@@ -8,18 +8,18 @@
 "use client";
 import * as i from "react";
 import e from "prop-types";
-import { Popup as k } from "@progress/kendo-react-popup";
+import { Popup as T } from "@progress/kendo-react-popup";
 import { cloneDate as v } from "@progress/kendo-date-math";
-import { Keys as c, validatePackage as T, canUseDOM as D, classNames as _, IconWrap as P, getActiveElement as F, createPropsContext as z, withIdHOC as A, withPropsContext as B } from "@progress/kendo-react-common";
+import { classNames as D, Keys as c, validatePackage as _, canUseDOM as I, IconWrap as P, getActiveElement as F, createPropsContext as z, withIdHOC as A, withPropsContext as B } from "@progress/kendo-react-common";
 import { provideLocalizationService as m, registerForLocalization as N } from "@progress/kendo-react-intl";
 import { arrowsSwapIcon as L } from "@progress/kendo-svg-icons";
 import { packageMetadata as V } from "../package-metadata.mjs";
-import { DateInputWithoutContext as K, DateInput as I } from "../dateinput/DateInput.mjs";
+import { DateInputWithoutContext as K, DateInput as w } from "../dateinput/DateInput.mjs";
 import { MultiViewCalendar as U } from "../calendar/components/MultiViewCalendar.mjs";
 import { EMPTY_SELECTIONRANGE as r } from "../calendar/models/SelectionRange.mjs";
 import { nullable as h, MAX_DATE as q, MIN_DATE as W } from "../utils.mjs";
 import { MOBILE_MEDIUM_DEVISE as G } from "../common/constants.mjs";
-import { dateRangePickerCancel as w, messages as l, dateRangePickerSet as b, start as C, end as S, separator as E, swapStartEnd as d } from "../messages/index.mjs";
+import { dateRangePickerCancel as b, messages as l, dateRangePickerSet as C, start as S, end as E, separator as y, swapStartEnd as d } from "../messages/index.mjs";
 import { Button as H } from "@progress/kendo-react-buttons";
 import { AdaptiveMode as X } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as Y } from "@progress/kendo-react-layout";
@@ -49,7 +49,7 @@ const o = class o extends i.Component {
       return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(U, { ...s, ref: this.setCalendarRef });
     }, this.renderPopup = () => {
       const t = {
-        popupClass: "k-daterangepicker-popup",
+        popupClass: D("k-calendar-container", "k-daterangepicker-popup"),
         animate: this._element !== null,
         anchor: this._element,
         id: this._popupId,
@@ -64,7 +64,7 @@ const o = class o extends i.Component {
         ...this.props.popupSettings,
         show: this.show
       };
-      return this.props.popup ? /* @__PURE__ */ i.createElement(this.props.popup, { ...t }, this.renderCalendar()) : /* @__PURE__ */ i.createElement(k, { ...t }, this.renderCalendar());
+      return this.props.popup ? /* @__PURE__ */ i.createElement(this.props.popup, { ...t }, this.renderCalendar()) : /* @__PURE__ */ i.createElement(T, { ...t }, this.renderCalendar());
     }, this.renderAdaptivePopup = () => {
       const { windowWidth: t = 0 } = this.state, s = {
         expand: this.show,
@@ -72,9 +72,9 @@ const o = class o extends i.Component {
         adaptiveTitle: this.props.adaptiveTitle,
         windowWidth: t,
         footer: {
-          cancelText: this.localizationService.toLanguageString(w, l[w]),
+          cancelText: this.localizationService.toLanguageString(b, l[b]),
           onCancel: this.handleCancel,
-          applyText: this.localizationService.toLanguageString(b, l[b]),
+          applyText: this.localizationService.toLanguageString(C, l[C]),
           onApply: this.handleBlur
         }
       };
@@ -148,7 +148,7 @@ const o = class o extends i.Component {
         n.call(void 0, u);
       }
       this.valueDuringOnChange = void 0;
-    }, T(V), this.state = {
+    }, _(V), this.state = {
       show: this.props.show || this.props.defaultShow || o.defaultProps.defaultShow,
       value: this.props.value || this.props.defaultValue || o.defaultProps.defaultValue,
       currentValue: r
@@ -206,7 +206,7 @@ const o = class o extends i.Component {
     return this.props.max !== void 0 ? this.props.max : o.defaultProps.max;
   }
   get document() {
-    if (D)
+    if (I)
       return this.element && this.element.ownerDocument || document;
   }
   get localizationService() {
@@ -223,7 +223,7 @@ const o = class o extends i.Component {
    */
   componentDidMount() {
     var a;
-    this.observerResize = D && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (a = this.document) != null && a.body && this.observerResize && this.observerResize.observe(this.document.body);
+    this.observerResize = I && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (a = this.document) != null && a.body && this.observerResize && this.observerResize.observe(this.document.body);
   }
   /**
    * @hidden
@@ -242,15 +242,15 @@ const o = class o extends i.Component {
    * @hidden
    */
   render() {
-    const a = this.value || r, t = this.mobileMode && this.show ? this.state.currentValue : a, s = (this.props.startDateInputSettings || {}).id || this._startInputId, n = (this.props.endDateInputSettings || {}).id || this._endInputId, u = _(
+    const a = this.value || r, t = this.mobileMode && this.show ? this.state.currentValue : a, s = (this.props.startDateInputSettings || {}).id || this._startInputId, n = (this.props.endDateInputSettings || {}).id || this._endInputId, u = D(
       "k-daterangepicker",
       {
         "k-disabled": this.props.disabled
       },
       this.props.className
-    ), y = this.localizationService.toLanguageString(C, l[C]), x = this.localizationService.toLanguageString(S, l[S]), R = this.localizationService.toLanguageString(E, l[E]), f = {
+    ), x = this.localizationService.toLanguageString(S, l[S]), R = this.localizationService.toLanguageString(E, l[E]), M = this.localizationService.toLanguageString(y, l[y]), f = {
       disableSelection: this.mobileMode && !0,
-      label: y,
+      label: x,
       format: this.props.format,
       min: this.min,
       max: this.max,
@@ -264,7 +264,7 @@ const o = class o extends i.Component {
       onChange: this.handleStartChange
     }, g = {
       disableSelection: this.mobileMode && !0,
-      label: x,
+      label: R,
       format: this.props.format,
       min: this.min,
       max: this.max,
@@ -276,7 +276,7 @@ const o = class o extends i.Component {
       ...this.props.endDateInputSettings,
       value: t.end,
       onChange: this.handleEndChange
-    }, M = /* @__PURE__ */ i.createElement(
+    }, O = /* @__PURE__ */ i.createElement(
       H,
       {
         type: "button",
@@ -293,8 +293,8 @@ const o = class o extends i.Component {
     return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
       "span",
       {
-        ref: (O) => {
-          this._element = O;
+        ref: (k) => {
+          this._element = k;
         },
         className: u,
         style: this.props.style,
@@ -309,7 +309,7 @@ const o = class o extends i.Component {
         dir: this.props.dir
       },
       this.props.startDateInput ? /* @__PURE__ */ i.createElement(this.props.startDateInput, { ...f }) : /* @__PURE__ */ i.createElement(
-        I,
+        w,
         {
           ...f,
           ref: this._startDateInput,
@@ -318,9 +318,9 @@ const o = class o extends i.Component {
           readonly: this.mobileMode
         }
       ),
-      (this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ? M : R,
+      (this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ? O : M,
       this.props.endDateInput ? /* @__PURE__ */ i.createElement(this.props.endDateInput, { ...g }) : /* @__PURE__ */ i.createElement(
-        I,
+        w,
         {
           ...g,
           ref: this._endDateInput,