@progress/kendo-react-dateinputs 8.4.0-develop.3 → 8.4.0-develop.4

package/calendar/components/Calendar.js

@@ -5,8 +5,8 @@
  * 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 M=require("react"),a=require("prop-types"),r=require("@progress/kendo-react-common"),o=require("@progress/kendo-date-math"),S=require("@progress/kendo-react-intl"),P=require("../../package-metadata.js"),q=require("./ViewList.js"),A=require("./Navigation.js"),d=require("../models/CalendarViewEnum.js"),l=require("../../utils.js"),L=require("../services/BusViewService.js"),T=require("../services/DOMService.js"),B=require("../services/NavigationService.js"),R=require("../services/ScrollSyncService.js");function K(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(s,t,e.get?e:{enumerable:!0,get:()=>c[t]})}}return s.default=c,Object.freeze(s)}const g=K(M),b=c=>c?c.virtualization:null,y=(c=v.defaultProps.min,s=v.defaultProps.max,t,e)=>e!==void 0?e!==null&&l.isInRange(o.getDate(e),c,s)?e:null:t!==null&&l.isInRange(o.getDate(t),c,s)?t:null,h=class h extends g.Component{constructor(s){super(s),this.scrollSyncService=null,this.focusedDate=null,this.Navigation=null,this.calendarViewList=null,this._element=null,this.intl=null,this.service=null,this.isActive=!1,this.didNavigationChange=!1,this.focus=()=>{this._element&&this._element.focus()},this.shouldScroll=()=>this.didNavigationChange,this.handleScroll=e=>{this.scrollSyncService&&this.scrollSyncService.sync(b(this.Navigation),b(this.calendarViewList),e)},this.handleNavigationChange=e=>{if(this.props.disabled)return;this.didNavigationChange=!0;const i=o.cloneDate(e.value);this.setState({focusedDate:i})},this.handleViewChange=({view:e})=>{this.scrollSyncService&&this.scrollSyncService.configure(e),this.setState({activeView:e})},this.handleDateChange=e=>{const i=o.cloneDate(e.value),n=o.cloneDate(e.value),f=this.bus.canMoveDown(this.state.activeView);if(this.props.disabled)return;if(f)if(e.isTodayClick)this.bus.moveToBottom(this.state.activeView);else{this.bus.moveDown(this.state.activeView,e.syntheticEvent),this.setState({focusedDate:n});return}this.setState({value:i,focusedDate:n}),this.valueDuringOnChange=i;const{onChange:p}=this.props;if(p){const u={syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,value:i,target:this};p.call(void 0,u)}this.valueDuringOnChange=void 0},this.handleFocus=e=>{if(this.isActive=!0,!this.calendarViewList)return;this.calendarViewList.focusActiveDate();const{onFocus:i}=this.props;i&&i.call(void 0,e)},this.handleBlur=e=>{if(this.isActive=!1,!this.calendarViewList)return;this.calendarViewList.blurActiveDate();const{onBlur:i}=this.props;i&&i.call(void 0,e)},this.handleKeyDown=e=>{const{keyCode:n,ctrlKey:f,metaKey:p}=e;if(!(!this.focusedDate||!this.service)){if(n===84&&this.setState({focusedDate:l.getToday()}),(f||p)&&(n===r.Keys.left||n===r.Keys.right)){if(this.props.disabled)return;this.didNavigationChange=!0,this.focusedDate.getDate()===31&&this.focusedDate.setDate(30);const u=n===r.Keys.left?this.focusedDate.getMonth()-1:this.focusedDate.getMonth()+1,m=new Date(this.focusedDate.setMonth(u)),V=o.cloneDate(m);this.setState({focusedDate:V})}if(n===r.Keys.enter){if(this.value!==null&&o.isEqualDate(this.focusedDate,this.value)){const m=l.dateInRange(this.focusedDate,this.min,this.max);b(this.calendarViewList).scrollToIndex(this.service.skip(m,this.min))}const u={syntheticEvent:e,nativeEvent:e.nativeEvent,value:this.focusedDate,target:this};this.handleDateChange(u)}else{const u=l.dateInRange(this.navigation.move(this.focusedDate,this.navigation.action(e),this.state.activeView,this.service,e),this.min,this.max);if(o.isEqualDate(this.focusedDate,u))return;this.setState({focusedDate:u})}e.preventDefault()}},this.handleMouseDown=e=>{e.preventDefault()},this.handleClick=e=>{this._element&&this._element.focus({preventScroll:!0})},r.validatePackage(P.packageMetadata);const t=y(this.min,this.max,this.props.defaultValue||h.defaultProps.defaultValue,this.props.value);this.state={value:t,activeView:l.viewInRange(d.CalendarViewEnum[s.defaultActiveView],this.bottomView,this.topView),focusedDate:l.dateInRange(s.focusedDate||t||l.getToday(),this.min,this.max)},this.dom=new T.DOMService,this.bus=new L.BusViewService(this.handleViewChange),this.navigation=new B.NavigationService(this.bus),this.oldValue=t}get cellUID(){return this.props.id+"-cell-uid"}get id(){return this.props.id+"-id"}get element(){return this._element}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value}get min(){return o.getDate(this.props.min!==void 0?this.props.min:h.defaultProps.min)}get max(){return o.getDate(this.props.max!==void 0?this.props.max:h.defaultProps.max)}get bottomView(){return d.CalendarViewEnum[this.props.bottomView!==void 0?this.props.bottomView:h.defaultProps.bottomView]}get topView(){return d.CalendarViewEnum[this.props.topView!==void 0?this.props.topView:h.defaultProps.topView]}componentDidMount(){Promise.resolve().then(()=>{r.setScrollbarWidth(),this._element&&(this.dom.calculateHeights(this._element),this.scrollSyncService=new R.ScrollSyncService(this.dom),this.scrollSyncService.configure(this.state.activeView),this.forceUpdate())})}componentDidUpdate(s,t){r.setScrollbarWidth(),t.activeView!==this.state.activeView&&this.scrollSyncService&&this.scrollSyncService.configure(this.state.activeView),this.calendarViewList&&(this.isActive?this.calendarViewList.focusActiveDate:this.calendarViewList.blurActiveDate)(),this.didNavigationChange=!1,this.isActive&&(this.oldValue=this.value)}render(){const{_ref:s,unstyled:t,bottomView:e,topView:i,disabled:n,weekNumber:f,mobileMode:p,className:u}=this.props;s&&s(this);const m=t&&t.uCalendar,V=this.value!==null&&this.oldValue!==null?!o.isEqualDate(this.value,this.oldValue):this.value!==this.oldValue,I=l.viewInRange(this.state.activeView,d.CalendarViewEnum[e!==void 0?e:h.defaultProps.bottomView],d.CalendarViewEnum[i!==void 0?i:h.defaultProps.topView]),D=y(this.min,this.max,this.value,this.value),O=D?o.getDate(D):null;this.focusedDate=o.getDate(l.dateInRange(V&&D!==null?D:this.state.focusedDate,this.min,this.max)),this.intl=S.provideIntlService(this),this.bus.configure(this.bottomView,this.topView),this.service=this.bus.service(I,this.intl);const{smoothScroll:k=Number.parseFloat(g.version)<18}=this.props,x=r.classNames(r.uCalendar.wrapper({c:m,disabled:n,weekNumber:f,mobileMode:p}),u),N=[this.props.navigation&&g.createElement(A.Navigation,{key:0,ref:w=>{this.Navigation=w},activeView:this.state.activeView,focusedDate:this.focusedDate,min:this.min,max:this.max,onScroll:this.handleScroll,onChange:this.handleNavigationChange,service:this.service,dom:this.dom,navigationItem:this.props.navigationItem,tabIndex:this.props.tabIndex,unstyled:t}),g.createElement(q.ViewList,{key:1,ref:w=>{this.calendarViewList=w},activeView:this.state.activeView,focusedDate:this.focusedDate,min:this.min,max:this.max,bus:this.bus,shouldScroll:this.shouldScroll,onScroll:this.handleScroll,service:this.service,cell:this.props.cell,weekCell:this.props.weekCell,dom:this.dom,smoothScroll:k,showWeekNumbers:this.props.weekNumber,onChange:this.handleDateChange,value:O,cellUID:this.cellUID,headerTitle:this.props.headerTitle,header:this.props.header,tabIndex:this.props.tabIndex,weekDaysFormat:this.props.weekDaysFormat,showOtherMonthDays:this.props.showOtherMonthDays,unstyled:t})];return g.createElement("div",{ref:w=>{this._element=w},className:x,id:this.props.id||this.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-disabled":this.props.disabled,tabIndex:this.props.disabled?void 0:this.props.tabIndex||0,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onClick:this.handleClick},N)}};h.displayName="Calendar",h.propTypes={className:a.string,defaultActiveView:a.oneOf(["month","year","decade","century"]),defaultValue:a.instanceOf(Date),disabled:a.bool,focusedDate:a.instanceOf(Date),id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,weekDaysFormat:a.oneOf(["short","abbreviated","narrow"]),max:a.instanceOf(Date),min:a.instanceOf(Date),navigation:a.bool,smoothScroll:a.bool,onBlur:a.func,onChange:a.func,onFocus:a.func,tabIndex:a.number,value:a.instanceOf(Date),weekNumber:a.bool,topView:(s,t,e)=>{const i=s[t],n=s.bottomView;return i&&n&&d.CalendarViewEnum[i]<d.CalendarViewEnum[n]?new Error(`Invalid prop + ${t} suplied to ${e}.
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react"),a=require("prop-types"),r=require("@progress/kendo-react-common"),o=require("@progress/kendo-date-math"),S=require("@progress/kendo-react-intl"),P=require("../../package-metadata.js"),q=require("./ViewList.js"),A=require("./Navigation.js"),d=require("../models/CalendarViewEnum.js"),l=require("../../utils.js"),L=require("../services/BusViewService.js"),T=require("../services/DOMService.js"),B=require("../services/NavigationService.js"),R=require("../services/ScrollSyncService.js");function K(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const g=K(M),b=c=>c?c.virtualization:null,y=(c=v.defaultProps.min,i=v.defaultProps.max,t,e)=>e!==void 0?e!==null&&l.isInRange(o.getDate(e),c,i)?e:null:t!==null&&l.isInRange(o.getDate(t),c,i)?t:null,h=class h extends g.Component{constructor(i){super(i),this.scrollSyncService=null,this.focusedDate=null,this.Navigation=null,this.calendarViewList=null,this._element=null,this.intl=null,this.service=null,this.isActive=!1,this.didNavigationChange=!1,this.focus=()=>{this._element&&this._element.focus()},this.shouldScroll=()=>this.didNavigationChange,this.handleScroll=e=>{this.scrollSyncService&&this.scrollSyncService.sync(b(this.Navigation),b(this.calendarViewList),e)},this.handleNavigationChange=e=>{if(this.props.disabled)return;this.didNavigationChange=!0;const s=o.cloneDate(e.value);this.setState({focusedDate:s})},this.handleViewChange=({view:e})=>{this.scrollSyncService&&this.scrollSyncService.configure(e),this.setState({activeView:e})},this.handleDateChange=e=>{const s=o.cloneDate(e.value),n=o.cloneDate(e.value),f=this.bus.canMoveDown(this.state.activeView);if(this.props.disabled)return;if(f)if(e.isTodayClick)this.bus.moveToBottom(this.state.activeView);else{this.bus.moveDown(this.state.activeView,e.syntheticEvent),this.setState({focusedDate:n});return}this.setState({value:s,focusedDate:n}),this.valueDuringOnChange=s;const{onChange:p}=this.props;if(p){const u={syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,value:s,target:this};p.call(void 0,u)}this.valueDuringOnChange=void 0},this.handleFocus=e=>{if(this.isActive=!0,!this.calendarViewList)return;this.calendarViewList.focusActiveDate();const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleBlur=e=>{if(this.isActive=!1,!this.calendarViewList)return;this.calendarViewList.blurActiveDate();const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleKeyDown=e=>{const{keyCode:n,ctrlKey:f,metaKey:p}=e;if(!(!this.focusedDate||!this.service)){if(n===84&&this.setState({focusedDate:l.getToday()}),(f||p)&&(n===r.Keys.left||n===r.Keys.right)){if(this.props.disabled)return;this.didNavigationChange=!0,this.focusedDate.getDate()===31&&this.focusedDate.setDate(30);const u=n===r.Keys.left?this.focusedDate.getMonth()-1:this.focusedDate.getMonth()+1,m=new Date(this.focusedDate.setMonth(u)),V=o.cloneDate(m);this.setState({focusedDate:V})}if(n===r.Keys.enter){if(this.value!==null&&o.isEqualDate(this.focusedDate,this.value)){const m=l.dateInRange(this.focusedDate,this.min,this.max);b(this.calendarViewList).scrollToIndex(this.service.skip(m,this.min))}const u={syntheticEvent:e,nativeEvent:e.nativeEvent,value:this.focusedDate,target:this};this.handleDateChange(u)}else{const u=l.dateInRange(this.navigation.move(this.focusedDate,this.navigation.action(e),this.state.activeView,this.service,e),this.min,this.max);if(o.isEqualDate(this.focusedDate,u))return;this.setState({focusedDate:u})}e.preventDefault()}},this.handleMouseDown=e=>{e.preventDefault()},this.handleClick=e=>{this._element&&this._element.focus({preventScroll:!0})},r.validatePackage(P.packageMetadata);const t=y(this.min,this.max,this.props.defaultValue||h.defaultProps.defaultValue,this.props.value);this.state={value:t,activeView:l.viewInRange(d.CalendarViewEnum[i.defaultActiveView],this.bottomView,this.topView),focusedDate:l.dateInRange(i.focusedDate||t||l.getToday(),this.min,this.max)},this.dom=new T.DOMService,this.bus=new L.BusViewService(this.handleViewChange),this.navigation=new B.NavigationService(this.bus),this.oldValue=t}get cellUID(){return this.props.id+"-cell-uid"}get id(){return this.props.id+"-id"}get element(){return this._element}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value}get min(){return o.getDate(this.props.min!==void 0?this.props.min:h.defaultProps.min)}get max(){return o.getDate(this.props.max!==void 0?this.props.max:h.defaultProps.max)}get bottomView(){return d.CalendarViewEnum[this.props.bottomView!==void 0?this.props.bottomView:h.defaultProps.bottomView]}get topView(){return d.CalendarViewEnum[this.props.topView!==void 0?this.props.topView:h.defaultProps.topView]}componentDidMount(){const{unstyled:i}=this.props;Promise.resolve().then(()=>{r.setScrollbarWidth(),this._element&&(this.dom.calculateHeights(this._element,i),this.scrollSyncService=new R.ScrollSyncService(this.dom),this.scrollSyncService.configure(this.state.activeView),this.forceUpdate())})}componentDidUpdate(i,t){r.setScrollbarWidth(),t.activeView!==this.state.activeView&&this.scrollSyncService&&this.scrollSyncService.configure(this.state.activeView),this.calendarViewList&&(this.isActive?this.calendarViewList.focusActiveDate:this.calendarViewList.blurActiveDate)(),this.didNavigationChange=!1,this.isActive&&(this.oldValue=this.value)}render(){const{_ref:i,unstyled:t,bottomView:e,topView:s,disabled:n,weekNumber:f,mobileMode:p,className:u}=this.props;i&&i(this);const m=t&&t.uCalendar,V=this.value!==null&&this.oldValue!==null?!o.isEqualDate(this.value,this.oldValue):this.value!==this.oldValue,I=l.viewInRange(this.state.activeView,d.CalendarViewEnum[e!==void 0?e:h.defaultProps.bottomView],d.CalendarViewEnum[s!==void 0?s:h.defaultProps.topView]),D=y(this.min,this.max,this.value,this.value),O=D?o.getDate(D):null;this.focusedDate=o.getDate(l.dateInRange(V&&D!==null?D:this.state.focusedDate,this.min,this.max)),this.intl=S.provideIntlService(this),this.bus.configure(this.bottomView,this.topView),this.service=this.bus.service(I,this.intl);const{smoothScroll:k=Number.parseFloat(g.version)<18}=this.props,x=r.classNames(r.uCalendar.wrapper({c:m,disabled:n,weekNumber:f,mobileMode:p}),u),N=[this.props.navigation&&g.createElement(A.Navigation,{key:0,ref:w=>{this.Navigation=w},activeView:this.state.activeView,focusedDate:this.focusedDate,min:this.min,max:this.max,onScroll:this.handleScroll,onChange:this.handleNavigationChange,service:this.service,dom:this.dom,navigationItem:this.props.navigationItem,tabIndex:this.props.tabIndex,unstyled:t}),g.createElement(q.ViewList,{key:1,ref:w=>{this.calendarViewList=w},activeView:this.state.activeView,focusedDate:this.focusedDate,min:this.min,max:this.max,bus:this.bus,shouldScroll:this.shouldScroll,onScroll:this.handleScroll,service:this.service,cell:this.props.cell,weekCell:this.props.weekCell,dom:this.dom,smoothScroll:k,showWeekNumbers:this.props.weekNumber,onChange:this.handleDateChange,value:O,cellUID:this.cellUID,headerTitle:this.props.headerTitle,header:this.props.header,tabIndex:this.props.tabIndex,weekDaysFormat:this.props.weekDaysFormat,showOtherMonthDays:this.props.showOtherMonthDays,unstyled:t})];return g.createElement("div",{ref:w=>{this._element=w},className:x,id:this.props.id||this.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-disabled":this.props.disabled,tabIndex:this.props.disabled?void 0:this.props.tabIndex||0,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onClick:this.handleClick},N)}};h.displayName="Calendar",h.propTypes={className:a.string,defaultActiveView:a.oneOf(["month","year","decade","century"]),defaultValue:a.instanceOf(Date),disabled:a.bool,focusedDate:a.instanceOf(Date),id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,weekDaysFormat:a.oneOf(["short","abbreviated","narrow"]),max:a.instanceOf(Date),min:a.instanceOf(Date),navigation:a.bool,smoothScroll:a.bool,onBlur:a.func,onChange:a.func,onFocus:a.func,tabIndex:a.number,value:a.instanceOf(Date),weekNumber:a.bool,topView:(i,t,e)=>{const s=i[t],n=i.bottomView;return s&&n&&d.CalendarViewEnum[s]<d.CalendarViewEnum[n]?new Error(`Invalid prop + ${t} suplied to ${e}.
                     ${t} can not be smaller than bottomView.
-                    `):null},bottomView:(s,t,e)=>{const i=s[t],n=s.topView;return i&&n&&d.CalendarViewEnum[i]>d.CalendarViewEnum[n]?new Error(`Invalid prop + ${t} suplied to ${e}.
+                    `):null},bottomView:(i,t,e)=>{const s=i[t],n=i.topView;return s&&n&&d.CalendarViewEnum[s]>d.CalendarViewEnum[n]?new Error(`Invalid prop + ${t} suplied to ${e}.
                     ${t} can not be bigger than topView.
                     `):null}},h.defaultProps={disabled:!1,min:l.MIN_DATE,max:l.MAX_DATE,weekDaysFormat:"short",navigation:!0,defaultActiveView:"month",defaultValue:null,topView:"century",bottomView:"month",showOtherMonthDays:!1};let v=h;const C=r.createPropsContext(),E=r.withIdHOC(r.withPropsContext(C,r.withUnstyledHOC(v)));E.displayName="KendoReactCalendar";S.registerForIntl(v);exports.Calendar=E;exports.CalendarPropsContext=C;exports.CalendarWithoutContext=v;

package/calendar/components/Calendar.mjs

@@ -39,10 +39,10 @@ const S = (u) => u ? u.virtualization : null, k = (u = d.defaultProps.min, a = d
     }, this.handleViewChange = ({ view: t }) => {
       this.scrollSyncService && this.scrollSyncService.configure(t), this.setState({ activeView: t });
     }, this.handleDateChange = (t) => {
-      const i = D(t.value), o = D(t.value), v = this.bus.canMoveDown(this.state.activeView);
+      const i = D(t.value), o = D(t.value), p = this.bus.canMoveDown(this.state.activeView);
       if (this.props.disabled)
         return;
-      if (v)
+      if (p)
         if (t.isTodayClick)
           this.bus.moveToBottom(this.state.activeView);
         else {
@@ -74,19 +74,19 @@ const S = (u) => u ? u.virtualization : null, k = (u = d.defaultProps.min, a = d
       const { onBlur: i } = this.props;
       i && i.call(void 0, t);
     }, this.handleKeyDown = (t) => {
-      const { keyCode: o, ctrlKey: v, metaKey: h } = t;
+      const { keyCode: o, ctrlKey: p, metaKey: h } = t;
       if (!(!this.focusedDate || !this.service)) {
-        if (o === 84 && this.setState({ focusedDate: x() }), (v || h) && (o === g.left || o === g.right)) {
+        if (o === 84 && this.setState({ focusedDate: x() }), (p || h) && (o === g.left || o === g.right)) {
           if (this.props.disabled)
             return;
           this.didNavigationChange = !0, this.focusedDate.getDate() === 31 && this.focusedDate.setDate(30);
-          const l = o === g.left ? this.focusedDate.getMonth() - 1 : this.focusedDate.getMonth() + 1, p = new Date(this.focusedDate.setMonth(l)), b = D(p);
+          const l = o === g.left ? this.focusedDate.getMonth() - 1 : this.focusedDate.getMonth() + 1, v = new Date(this.focusedDate.setMonth(l)), b = D(v);
           this.setState({ focusedDate: b });
         }
         if (o === g.enter) {
           if (this.value !== null && y(this.focusedDate, this.value)) {
-            const p = V(this.focusedDate, this.min, this.max);
-            S(this.calendarViewList).scrollToIndex(this.service.skip(p, this.min));
+            const v = V(this.focusedDate, this.min, this.max);
+            S(this.calendarViewList).scrollToIndex(this.service.skip(v, this.min));
           }
           const l = {
             syntheticEvent: t,
@@ -172,8 +172,9 @@ const S = (u) => u ? u.virtualization : null, k = (u = d.defaultProps.min, a = d
    * @hidden
    */
   componentDidMount() {
+    const { unstyled: a } = this.props;
     Promise.resolve().then(() => {
-      C(), this._element && (this.dom.calculateHeights(this._element), this.scrollSyncService = new Q(this.dom), this.scrollSyncService.configure(this.state.activeView), this.forceUpdate());
+      C(), this._element && (this.dom.calculateHeights(this._element, a), this.scrollSyncService = new Q(this.dom), this.scrollSyncService.configure(this.state.activeView), this.forceUpdate());
     });
   }
   /**
@@ -186,9 +187,9 @@ const S = (u) => u ? u.virtualization : null, k = (u = d.defaultProps.min, a = d
    * @hidden
    */
   render() {
-    const { _ref: a, unstyled: e, bottomView: t, topView: i, disabled: o, weekNumber: v, mobileMode: h, className: l } = this.props;
+    const { _ref: a, unstyled: e, bottomView: t, topView: i, disabled: o, weekNumber: p, mobileMode: h, className: l } = this.props;
     a && a(this);
-    const p = e && e.uCalendar, b = this.value !== null && this.oldValue !== null ? !y(this.value, this.oldValue) : this.value !== this.oldValue, E = I(
+    const v = e && e.uCalendar, b = this.value !== null && this.oldValue !== null ? !y(this.value, this.oldValue) : this.value !== this.oldValue, E = I(
       this.state.activeView,
       r[t !== void 0 ? t : n.defaultProps.bottomView],
       r[i !== void 0 ? i : n.defaultProps.topView]
@@ -200,9 +201,9 @@ const S = (u) => u ? u.virtualization : null, k = (u = d.defaultProps.min, a = d
     )), this.intl = R(this), this.bus.configure(this.bottomView, this.topView), this.service = this.bus.service(E, this.intl);
     const { smoothScroll: P = Number.parseFloat(f.version) < 18 } = this.props, A = B(
       T.wrapper({
-        c: p,
+        c: v,
         disabled: o,
-        weekNumber: v,
+        weekNumber: p,
         mobileMode: h
       }),
       l

package/calendar/components/CalendarNavigationItem.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 m=require("react"),c=require("@progress/kendo-react-common");function f(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const o=f(m),g=e=>{const{isRangeStart:n,value:t,text:a,...s}=e,r=c.useUnstyled(),i=r&&r.uCalendar,u=d=>{const{onClick:l}=e;l&&l.call(void 0,t,d)};return o.createElement("li",{...s,onClick:u},o.createElement("span",{className:c.classNames(c.uCalendar.navigationMarker({c:i,isRangeStart:n}))},e.children))};exports.CalendarNavigationItem=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),n=require("@progress/kendo-react-common");function f(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const o=f(m),g=e=>{const{isRangeStart:a,value:t,text:c,view:C,...i}=e,l=n.useUnstyled(),r=l&&l.uCalendar,u=d=>{const{onClick:s}=e;s&&s.call(void 0,t,d)};return o.createElement("li",{...i,onClick:u,className:n.classNames(n.uCalendar.li({c:r}))},o.createElement("span",{className:n.classNames(n.uCalendar.navigationMarker({c:r,isRangeStart:a}))},e.children))};exports.CalendarNavigationItem=g;

package/calendar/components/CalendarNavigationItem.mjs

@@ -6,20 +6,28 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as n from "react";
-import { useUnstyled as m, classNames as d, uCalendar as u } from "@progress/kendo-react-common";
-const v = (e) => {
-  const { isRangeStart: l, value: c, text: C, ...s } = e, a = m(), i = a && a.uCalendar, o = (r) => {
-    const { onClick: t } = e;
-    t && t.call(void 0, c, r);
+import * as l from "react";
+import { useUnstyled as u, classNames as c, uCalendar as s } from "@progress/kendo-react-common";
+const N = (e) => {
+  const { isRangeStart: i, value: o, text: C, view: v, ...r } = e, a = u(), t = a && a.uCalendar, m = (d) => {
+    const { onClick: n } = e;
+    n && n.call(void 0, o, d);
   };
-  return /* @__PURE__ */ n.createElement("li", { ...s, onClick: o }, /* @__PURE__ */ n.createElement("span", { className: d(
-    u.navigationMarker({
-      c: i,
-      isRangeStart: l
-    })
-  ) }, e.children));
+  return /* @__PURE__ */ l.createElement(
+    "li",
+    {
+      ...r,
+      onClick: m,
+      className: c(s.li({ c: t }))
+    },
+    /* @__PURE__ */ l.createElement("span", { className: c(
+      s.navigationMarker({
+        c: t,
+        isRangeStart: i
+      })
+    ) }, e.children)
+  );
 };
 export {
-  v as CalendarNavigationItem
+  N as CalendarNavigationItem
 };

package/calendar/components/ViewList.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 T=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),m=require("@progress/kendo-date-math"),C=require("@progress/kendo-react-intl"),N=require("../../virtualization/Virtualization.js"),O=require("./View.js"),q=require("./Header.js"),H=require("../services/WeekNamesService.js"),f=require("../../utils.js"),p=require("../models/CalendarViewEnum.js"),R=require("./TodayCommand.js");function z(d){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(r,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return r.default=d,Object.freeze(r)}const a=z(T),_=5,u=class u extends a.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.weekService=null,this.focusActiveDate=()=>{if(!this._element)return;const e=this._element.querySelector("td.k-focus"),t=this._element.querySelector(".k-state-pending-focus");e&&e[0]&&e[0].classList.remove("k-focus"),t&&t.classList.add("k-focus"),this.isActive=!0},this.blurActiveDate=()=>{if(!this._element)return;const e=this._element.querySelector("td.k-focus");e&&e.classList.remove("k-focus"),this.isActive=!1},this.handleVirtualizationMount=e=>{if(this.virtualization=e,this.virtualization&&this.table){this.table.style.transform=`translateY(${this.viewOffset}px)`;const t=f.dateInRange(this.props.focusedDate,this.props.min,this.props.max),s=this.props.service.skip(t,this.props.min);this.virtualization.scrollToIndex(s)}},this.buildMonthView=(e,t)=>{const{unstyled:s}=this.props,i=s&&s.uCalendar;return a.createElement("table",{key:"calendar-view-list-weekdays",className:n.classNames(n.uCalendar.table({c:i,weekdays:!0})),role:"grid",tabIndex:this.props.tabIndex},a.createElement("colgroup",null,e.map((h,l)=>a.createElement("col",{key:l}))),a.createElement("thead",{className:n.classNames(n.uCalendar.thead({c:i}))},a.createElement("tr",{className:n.classNames(n.uCalendar.tr({c:i}))},t.map((h,l)=>a.createElement("th",{key:l,className:n.classNames(n.uCalendar.th({c:i}))},h)))))},this.buildDates=(e,t)=>{const s=this.props.cellUID,{unstyled:i}=this.props,h=i&&i.uCalendar;return a.createElement("table",{className:n.classNames(n.uCalendar.table({c:h})),ref:l=>this.table=l,role:"grid",tabIndex:this.props.tabIndex,"aria-activedescendant":s+this.props.focusedDate.getTime()},a.createElement("colgroup",null,e.map((l,c)=>a.createElement("col",{key:c}))),t.map(l=>a.createElement(O.View,{ref:c=>{this.calendarView||(this.calendarView=c)},key:l.getTime(),activeView:this.props.activeView,viewDate:l,min:this.props.min,max:this.props.max,cellUID:s,focusedDate:this.props.focusedDate,cell:this.props.cell,selectedDate:this.props.value,showWeekNumbers:this.weekNumber,onChange:this.handleDateChange,bus:this.props.bus,service:this.props.service,weekCell:this.props.weekCell,showOtherMonthDays:this.props.showOtherMonthDays,unstyled:i})))},this.calculateHeights=()=>{if(!this.props.dom)return;const e=this.props.activeView===p.CalendarViewEnum.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:s})=>{const i=s?s.skip:this.state.skip;if((this.state.index!==e||this.state.skip!==i)&&this.setState({index:e,skip:i}),this.table&&t){const h=`translateY(${t.offset}px)`;this.table.style.transform=h}},this.handleTodayClick=e=>{this.shouldScroll=!0,this.handleDateChange.call(void 0,e,!0)},this.handleDateChange=(e,t=!1)=>{const{onChange:s}=this.props;if(s){const i={syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,value:m.cloneDate(e.value),target:this,isTodayClick:t};s.call(void 0,i)}},this.lastView=this.props.activeView,this.lastFocus=this.props.focusedDate,this.state={skip:this.props.service.skip(this.props.focusedDate,this.props.min),index:this.props.service.skip(this.props.focusedDate,this.props.min)}}get element(){return this._element}get weekNames(){return this.intl=C.provideIntlService(this),this.weekService=new H.WeekNamesService(this.intl),this.weekService.getWeekNames(this.weekNumber,this.props.weekDaysFormat)}get weekNumber(){return!!(this.props.showWeekNumbers&&this.props.activeView===p.CalendarViewEnum.month)}get take(){return this.props.take!==void 0?this.props.take:u.defaultProps.take}get animate(){return!!(this.props.smoothScroll&&this.animateToIndex)}get todayIsInRange(){return f.isInRange(f.getToday(),m.getDate(this.props.min),m.getDate(this.props.max))}componentDidUpdate(r,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(){const{activeView:r,min:e,max:t,service:s,unstyled:i}=this.props,h=i&&i.uCalendar;this.calculateHeights();const l=this.lastView!==r,c=f.dateInRange(this.props.focusedDate,e,t),w=l?s.skip(c,e):this.state.skip,b=s.total(e,t),y=this.getTake(w,b),x=s.addToDate(e,w),S=s.addToDate(e,this.state.index),g=new Array(s.rowLength(this.weekNumber)).fill(""),D=r!==this.lastView;this.animateToIndex=!D,(D||!m.isEqualDate(this.lastFocus,c)||this.shouldScroll||!this.props.shouldScroll||this.props.shouldScroll())&&(this.indexToScroll=this.props.service.skip(c,this.props.min)),this.lastFocus=c;const V=n.classNames(n.uCalendar.view({c:h,month:r===p.CalendarViewEnum.month,year:r===p.CalendarViewEnum.year,decade:r===p.CalendarViewEnum.decade,century:r===p.CalendarViewEnum.century})),E=this.buildDates(g,s.datesList(x,y)),I=a.createElement(a.Fragment,null,a.createElement(q.Header,{key:"calendar-view-list-header",currentDate:S,min:this.props.min,max:this.props.max,activeView:this.props.activeView,bus:this.props.bus,service:this.props.service,headerTitle:this.props.headerTitle,header:this.props.header,unstyled:i,commands:a.createElement(R.TodayCommand,{min:this.props.min,max:this.props.max,onClick:this.handleTodayClick,disabled:!this.todayIsInRange,tabIndex:this.props.tabIndex,unstyled:i})}),this.props.activeView===p.CalendarViewEnum.month&&this.buildMonthView(g,this.weekNames),a.createElement(N.Virtualization,{key:"calendar-view-list-content",skip:w,take:this.take,total:b,itemHeight:this.viewHeight,topOffset:this.viewOffset,bottomOffset:this.bottomOffset,scrollOffsetSize:this.viewOffset,maxScrollDifference:this.viewHeight,onScroll:this.props.onScroll,onScrollAction:this.handleScrollAction,onMount:k=>!this.virtualization&&this.handleVirtualizationMount(k),children:E,tabIndex:this.props.tabIndex}));return a.createElement("div",{ref:k=>{this._element=k},className:V},this.props.dom.didCalculate?I:null)}};u.propTypes={activeView:o.number.isRequired,bottomOffset:o.number,cellUID:o.string.isRequired,focusedDate:o.instanceOf(Date).isRequired,max:o.instanceOf(Date).isRequired,min:o.instanceOf(Date).isRequired,onChange:o.func,showWeekNumbers:o.bool,smoothScroll:o.bool,take:o.number,value:o.instanceOf(Date),viewHeight:o.number,viewOffset:o.number,weekDaysFormat:o.oneOf(["short","abbreviated","narrow"]),tabIndex:o.number},u.defaultProps={take:_,showWeekNumbers:!1,weekDaysFormat:"short",smoothScroll:!0};let v=u;C.registerForIntl(v);exports.ViewList=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),m=require("@progress/kendo-date-math"),C=require("@progress/kendo-react-intl"),N=require("../../virtualization/Virtualization.js"),O=require("./View.js"),q=require("./Header.js"),H=require("../services/WeekNamesService.js"),f=require("../../utils.js"),p=require("../models/CalendarViewEnum.js"),R=require("./TodayCommand.js");function z(d){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(r,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return r.default=d,Object.freeze(r)}const a=z(T),_=5,u=class u extends a.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.weekService=null,this.focusActiveDate=()=>{if(!this._element)return;const e=this._element.querySelector("td.k-focus"),t=this._element.querySelector(".k-state-pending-focus");e&&e[0]&&e[0].classList.remove("k-focus"),t&&t.classList.add("k-focus"),this.isActive=!0},this.blurActiveDate=()=>{if(!this._element)return;const e=this._element.querySelector("td.k-focus");e&&e.classList.remove("k-focus"),this.isActive=!1},this.handleVirtualizationMount=e=>{if(this.virtualization=e,this.virtualization&&this.table){this.table.style.transform=`translateY(${this.viewOffset}px)`;const t=f.dateInRange(this.props.focusedDate,this.props.min,this.props.max),s=this.props.service.skip(t,this.props.min);this.virtualization.scrollToIndex(s)}},this.buildMonthView=(e,t)=>{const{unstyled:s}=this.props,i=s&&s.uCalendar;return a.createElement("table",{key:"calendar-view-list-weekdays",className:n.classNames(n.uCalendar.table({c:i,weekdays:!0})),role:"grid",tabIndex:this.props.tabIndex},a.createElement("colgroup",null,e.map((h,l)=>a.createElement("col",{key:l}))),a.createElement("thead",{className:n.classNames(n.uCalendar.thead({c:i}))},a.createElement("tr",{className:n.classNames(n.uCalendar.tr({c:i}))},t.map((h,l)=>a.createElement("th",{key:l,className:n.classNames(n.uCalendar.th({c:i}))},h)))))},this.buildDates=(e,t)=>{const s=this.props.cellUID,{unstyled:i}=this.props,h=i&&i.uCalendar;return a.createElement("table",{className:n.classNames(n.uCalendar.table({c:h})),ref:l=>this.table=l,role:"grid",tabIndex:this.props.tabIndex,"aria-activedescendant":s+this.props.focusedDate.getTime()},a.createElement("colgroup",null,e.map((l,c)=>a.createElement("col",{key:c}))),t.map(l=>a.createElement(O.View,{ref:c=>{this.calendarView||(this.calendarView=c)},key:l.getTime(),activeView:this.props.activeView,viewDate:l,min:this.props.min,max:this.props.max,cellUID:s,focusedDate:this.props.focusedDate,cell:this.props.cell,selectedDate:this.props.value,showWeekNumbers:this.weekNumber,onChange:this.handleDateChange,bus:this.props.bus,service:this.props.service,weekCell:this.props.weekCell,showOtherMonthDays:this.props.showOtherMonthDays,unstyled:i})))},this.calculateHeights=()=>{if(!this.props.dom)return;const e=this.props.activeView===p.CalendarViewEnum.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:s})=>{const i=s?s.skip:this.state.skip;if((this.state.index!==e||this.state.skip!==i)&&this.setState({index:e,skip:i}),this.table&&t){const h=`translateY(${t.offset}px)`;this.table.style.transform=h}},this.handleTodayClick=e=>{this.shouldScroll=!0,this.handleDateChange.call(void 0,e,!0)},this.handleDateChange=(e,t=!1)=>{const{onChange:s}=this.props;if(s){const i={syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,value:m.cloneDate(e.value),target:this,isTodayClick:t};s.call(void 0,i)}},this.lastView=this.props.activeView,this.lastFocus=this.props.focusedDate,this.state={skip:this.props.service.skip(this.props.focusedDate,this.props.min),index:this.props.service.skip(this.props.focusedDate,this.props.min)}}get element(){return this._element}get weekNames(){return this.intl=C.provideIntlService(this),this.weekService=new H.WeekNamesService(this.intl),this.weekService.getWeekNames(this.weekNumber,this.props.weekDaysFormat)}get weekNumber(){return!!(this.props.showWeekNumbers&&this.props.activeView===p.CalendarViewEnum.month)}get take(){return this.props.take!==void 0?this.props.take:u.defaultProps.take}get animate(){return!!(this.props.smoothScroll&&this.animateToIndex)}get todayIsInRange(){return f.isInRange(f.getToday(),m.getDate(this.props.min),m.getDate(this.props.max))}componentDidUpdate(r,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(){const{activeView:r,min:e,max:t,service:s,unstyled:i}=this.props,h=i&&i.uCalendar;this.calculateHeights();const l=this.lastView!==r,c=f.dateInRange(this.props.focusedDate,e,t),w=l?s.skip(c,e):this.state.skip,b=s.total(e,t),y=this.getTake(w,b),x=s.addToDate(e,w),S=s.addToDate(e,this.state.index),g=new Array(s.rowLength(this.weekNumber)).fill(""),D=r!==this.lastView;this.animateToIndex=!D,(D||!m.isEqualDate(this.lastFocus,c)||this.shouldScroll||!this.props.shouldScroll||this.props.shouldScroll())&&(this.indexToScroll=this.props.service.skip(c,this.props.min)),this.lastFocus=c;const V=n.classNames(n.uCalendar.view({c:h,month:r===p.CalendarViewEnum.month,year:r===p.CalendarViewEnum.year,decade:r===p.CalendarViewEnum.decade,century:r===p.CalendarViewEnum.century})),E=this.buildDates(g,s.datesList(x,y)),I=a.createElement(a.Fragment,null,a.createElement(q.Header,{key:"calendar-view-list-header",currentDate:S,min:this.props.min,max:this.props.max,activeView:this.props.activeView,bus:this.props.bus,service:this.props.service,headerTitle:this.props.headerTitle,header:this.props.header,unstyled:i,commands:a.createElement(R.TodayCommand,{min:this.props.min,max:this.props.max,onClick:this.handleTodayClick,disabled:!this.todayIsInRange,tabIndex:this.props.tabIndex,unstyled:i})}),this.props.activeView===p.CalendarViewEnum.month&&this.buildMonthView(g,this.weekNames),a.createElement(N.Virtualization,{key:"calendar-view-list-content",skip:w,take:this.take,total:b,itemHeight:this.viewHeight,topOffset:this.viewOffset,bottomOffset:this.bottomOffset,scrollOffsetSize:this.viewOffset,maxScrollDifference:this.viewHeight,onScroll:this.props.onScroll,onScrollAction:this.handleScrollAction,onMount:k=>!this.virtualization&&this.handleVirtualizationMount(k),children:E,tabIndex:this.props.tabIndex,unstyled:i}));return a.createElement("div",{ref:k=>{this._element=k},className:V},this.props.dom.didCalculate?I:null)}};u.propTypes={activeView:o.number.isRequired,bottomOffset:o.number,cellUID:o.string.isRequired,focusedDate:o.instanceOf(Date).isRequired,max:o.instanceOf(Date).isRequired,min:o.instanceOf(Date).isRequired,onChange:o.func,showWeekNumbers:o.bool,smoothScroll:o.bool,take:o.number,value:o.instanceOf(Date),viewHeight:o.number,viewOffset:o.number,weekDaysFormat:o.oneOf(["short","abbreviated","narrow"]),tabIndex:o.number},u.defaultProps={take:_,showWeekNumbers:!1,weekDaysFormat:"short",smoothScroll:!0};let v=u;C.registerForIntl(v);exports.ViewList=v;

package/calendar/components/ViewList.mjs

@@ -23,8 +23,8 @@ const M = 5, d = class d extends a.Component {
     super(n), 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"), s = this._element.querySelector(".k-state-pending-focus");
-      e && e[0] && e[0].classList.remove("k-focus"), s && s.classList.add("k-focus"), this.isActive = !0;
+      const e = this._element.querySelector("td.k-focus"), i = this._element.querySelector(".k-state-pending-focus");
+      e && e[0] && e[0].classList.remove("k-focus"), i && i.classList.add("k-focus"), this.isActive = !0;
     }, this.blurActiveDate = () => {
       if (!this._element)
         return;
@@ -33,24 +33,24 @@ const M = 5, d = class d extends a.Component {
     }, this.handleVirtualizationMount = (e) => {
       if (this.virtualization = e, this.virtualization && this.table) {
         this.table.style.transform = `translateY(${this.viewOffset}px)`;
-        const s = D(this.props.focusedDate, this.props.min, this.props.max), t = this.props.service.skip(s, this.props.min);
+        const i = D(this.props.focusedDate, this.props.min, this.props.max), t = this.props.service.skip(i, this.props.min);
         this.virtualization.scrollToIndex(t);
       }
-    }, this.buildMonthView = (e, s) => {
-      const { unstyled: t } = this.props, i = t && t.uCalendar;
+    }, this.buildMonthView = (e, i) => {
+      const { unstyled: t } = this.props, s = t && t.uCalendar;
       return /* @__PURE__ */ a.createElement(
         "table",
         {
           key: "calendar-view-list-weekdays",
-          className: p(m.table({ c: i, weekdays: !0 })),
+          className: p(m.table({ c: s, weekdays: !0 })),
           role: "grid",
           tabIndex: this.props.tabIndex
         },
         /* @__PURE__ */ a.createElement("colgroup", null, e.map((l, r) => /* @__PURE__ */ a.createElement("col", { key: r }))),
-        /* @__PURE__ */ a.createElement("thead", { className: p(m.thead({ c: i })) }, /* @__PURE__ */ a.createElement("tr", { className: p(m.tr({ c: i })) }, s.map((l, r) => /* @__PURE__ */ a.createElement("th", { key: r, className: p(m.th({ c: i })) }, l))))
+        /* @__PURE__ */ a.createElement("thead", { className: p(m.thead({ c: s })) }, /* @__PURE__ */ a.createElement("tr", { className: p(m.tr({ c: s })) }, i.map((l, r) => /* @__PURE__ */ a.createElement("th", { key: r, className: p(m.th({ c: s })) }, l))))
       );
-    }, this.buildDates = (e, s) => {
-      const t = this.props.cellUID, { unstyled: i } = this.props, l = i && i.uCalendar;
+    }, this.buildDates = (e, i) => {
+      const t = this.props.cellUID, { unstyled: s } = this.props, l = s && s.uCalendar;
       return /* @__PURE__ */ a.createElement(
         "table",
         {
@@ -61,7 +61,7 @@ const M = 5, d = class d extends a.Component {
           "aria-activedescendant": t + this.props.focusedDate.getTime()
         },
         /* @__PURE__ */ a.createElement("colgroup", null, e.map((r, h) => /* @__PURE__ */ a.createElement("col", { key: h }))),
-        s.map((r) => /* @__PURE__ */ a.createElement(
+        i.map((r) => /* @__PURE__ */ a.createElement(
           z,
           {
             ref: (h) => {
@@ -82,7 +82,7 @@ const M = 5, d = class d extends a.Component {
             service: this.props.service,
             weekCell: this.props.weekCell,
             showOtherMonthDays: this.props.showOtherMonthDays,
-            unstyled: i
+            unstyled: s
           }
         ))
       );
@@ -91,25 +91,25 @@ const M = 5, d = class d extends a.Component {
         return;
       const e = this.props.activeView === c.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, s) => Math.min(s - e, this.take), this.handleScrollAction = ({ index: e, scrollAction: s, pageAction: t }) => {
-      const i = t ? t.skip : this.state.skip;
-      if ((this.state.index !== e || this.state.skip !== i) && this.setState({ index: e, skip: i }), this.table && s) {
-        const l = `translateY(${s.offset}px)`;
+    }, this.getTake = (e, i) => Math.min(i - e, this.take), this.handleScrollAction = ({ index: e, scrollAction: i, pageAction: t }) => {
+      const s = t ? t.skip : this.state.skip;
+      if ((this.state.index !== e || this.state.skip !== s) && this.setState({ index: e, skip: s }), this.table && i) {
+        const l = `translateY(${i.offset}px)`;
         this.table.style.transform = l;
       }
     }, this.handleTodayClick = (e) => {
       this.shouldScroll = !0, this.handleDateChange.call(void 0, e, !0);
-    }, this.handleDateChange = (e, s = !1) => {
+    }, this.handleDateChange = (e, i = !1) => {
       const { onChange: t } = this.props;
       if (t) {
-        const i = {
+        const s = {
           syntheticEvent: e.syntheticEvent,
           nativeEvent: e.nativeEvent,
           value: T(e.value),
           target: this,
-          isTodayClick: s
+          isTodayClick: i
         };
-        t.call(void 0, i);
+        t.call(void 0, s);
       }
     }, this.lastView = this.props.activeView, this.lastFocus = this.props.focusedDate, this.state = {
       skip: this.props.service.skip(this.props.focusedDate, this.props.min),
@@ -138,9 +138,9 @@ const M = 5, d = class d extends a.Component {
     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() {
-    const { activeView: n, min: e, max: s, service: t, unstyled: i } = this.props, l = i && i.uCalendar;
+    const { activeView: n, min: e, max: i, service: t, unstyled: s } = this.props, l = s && s.uCalendar;
     this.calculateHeights();
-    const r = this.lastView !== n, h = D(this.props.focusedDate, e, s), u = r ? t.skip(h, e) : this.state.skip, w = t.total(e, s), x = this.getTake(u, w), y = t.addToDate(e, u), S = t.addToDate(e, this.state.index), k = new Array(t.rowLength(this.weekNumber)).fill(""), b = n !== this.lastView;
+    const r = this.lastView !== n, h = D(this.props.focusedDate, e, i), u = r ? t.skip(h, e) : this.state.skip, w = t.total(e, i), x = this.getTake(u, w), y = t.addToDate(e, u), S = t.addToDate(e, this.state.index), k = new Array(t.rowLength(this.weekNumber)).fill(""), b = n !== this.lastView;
     this.animateToIndex = !b, (b || !E(this.lastFocus, h) || this.shouldScroll || !this.props.shouldScroll || this.props.shouldScroll()) && (this.indexToScroll = this.props.service.skip(h, this.props.min)), this.lastFocus = h;
     const C = p(
       m.view({
@@ -162,7 +162,7 @@ const M = 5, d = class d extends a.Component {
         service: this.props.service,
         headerTitle: this.props.headerTitle,
         header: this.props.header,
-        unstyled: i,
+        unstyled: s,
         commands: /* @__PURE__ */ a.createElement(
           F,
           {
@@ -171,7 +171,7 @@ const M = 5, d = class d extends a.Component {
             onClick: this.handleTodayClick,
             disabled: !this.todayIsInRange,
             tabIndex: this.props.tabIndex,
-            unstyled: i
+            unstyled: s
           }
         )
       }
@@ -191,7 +191,8 @@ const M = 5, d = class d extends a.Component {
         onScrollAction: this.handleScrollAction,
         onMount: (f) => !this.virtualization && this.handleVirtualizationMount(f),
         children: I,
-        tabIndex: this.props.tabIndex
+        tabIndex: this.props.tabIndex,
+        unstyled: s
       }
     ));
     return /* @__PURE__ */ a.createElement(

package/calendar/services/DOMService.js

@@ -5,10 +5,10 @@
  * 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 u=require("../models/CalendarViewEnum.js"),n=require("../../utils.js"),m=require("@progress/kendo-react-common");class N{constructor(){this.calendarHeight=0,this.headerHeight=0,this.monthViewHeight=0,this.yearViewHeight=0,this.decadeViewHeight=0,this.centuryViewHeight=0,this.navigationItemHeight=0,this.scrollableContentHeight=0,this.scrollableYearContentHeight=0,this.calendarWidth=0,this.monthViewWidth=0,this.yearViewWidth=0,this.decadeViewWidth=0,this.centuryViewWidth=0,this.scrollableContentWidth=0,this.didCalculate=!1,this.hostContainer=null}ensureHeights(){this.calendarHeight===void 0&&this.calculateHeights()}calculateHeights(a){if(!m.canUseDOM)return;const s=n.domContainerFactory("div"),i=n.domContainerFactory("ul"),l=n.domContainerFactory("li"),p=n.domContainerFactory("td"),F=n.domContainerFactory("th"),w=n.domContainerFactory("tr"),D=n.domContainerFactory("tbody"),S=n.domContainerFactory("thead"),v=n.domContainerFactory("table"),C=()=>s(`
-            <span class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-button-flat k-calendar-title">
-                <span className="k-button-text">March 2017</span>
-            </span>
-            <span class="k-spacer"></span>
-            <span class="k-calendar-nav k-hstack"><button class="k-calendar-nav-today">TODAY</button></span>
-        `,"k-calendar-header k-hstack"),M=()=>v([S([w([F("MO","k-calendar-th")],"k-calendar-tr")],"k-calendar-thead")],"k-calendar-table k-calendar-weekdays"),V=(t,e)=>new Array(t).fill("1").map(e),O=(t,e=1)=>v([D([w([p("1","k-calendar-td k-alt")])].concat(V(t,()=>w(V(e,c=>p(`<span class="k-link">${c}</span>`,"k-calendar-td")),"k-calendar-tr"))),"k-calendar-tbody")],"k-calendar-table"),k=t=>s(t,"k-content k-scrollable"),q=(t,e,c)=>s(c?[C(),M(),k([t,t])]:[C(),k([t,t])],e,{left:"-10000px",position:"absolute"}),$=(()=>{let t;return()=>m.canUseDOM?(t||(t=s([k([i([l("<span>FEB</span>")])])],"k-calendar-navigation",{left:"0px",position:"absolute"})),t):null})(),g=({cells:t,rows:e},c,E)=>{let y;return()=>m.canUseDOM?(y||(y=q(O(e,t),c,E)),y):null},d=t=>t.querySelector(".k-scrollable"),b=t=>{const e=d(t);return e.className=`${e.className} k-scrollable-horizontal`,t},H=g({cells:7,rows:6},"k-calendar-view k-calendar-monthview k-vstack",!0),f=g({cells:5,rows:3},"k-calendar-view k-calendar-yearview",!1),W=g({cells:5,rows:2},"k-calendar-view k-calendar-decadeview",!1),z=()=>b(H()),Y=()=>b(f()),x=()=>b(W()),r=t=>parseFloat(window.getComputedStyle(t).height)||t.offsetHeight,h=t=>{const e=window.getComputedStyle(t);return parseFloat(e.width)+parseFloat(e.paddingLeft)+parseFloat(e.paddingRight)||t.offsetWidth},o=t=>t.querySelector("tbody");this.didCalculate=!0,a&&(this.hostContainer=a),this.batch(H(),t=>{const e=o(t);this.calendarHeight=r(t),this.monthViewHeight=r(e),this.headerHeight=r(e.children[0]),this.scrollableContentHeight=r(d(t))}),this.batch(z(),t=>{const e=o(t);this.calendarWidth=h(t),this.monthViewWidth=h(e),this.scrollableContentWidth=h(d(t))}),this.batch(f(),t=>{this.yearViewHeight=r(o(t)),this.scrollableYearContentHeight=r(d(t))}),this.batch(Y(),t=>{this.yearViewWidth=h(o(t))}),this.batch(W(),t=>{this.decadeViewHeight=r(o(t)),this.centuryViewHeight=this.decadeViewHeight}),this.batch(x(),t=>{this.decadeViewWidth=h(o(t)),this.centuryViewWidth=this.decadeViewWidth}),this.batch($(),t=>{this.navigationItemHeight=r(t.querySelector("li"))})}viewHeight(a){return this.viewDimension(a,"height")}viewWidth(a){return this.viewDimension(a,"width")}viewDimension(a,s){const i=s==="height"?"ViewHeight":"ViewWidth";switch(a){case u.CalendarViewEnum.month:return this[`month${i}`];case u.CalendarViewEnum.year:return this[`year${i}`];case u.CalendarViewEnum.decade:return this[`decade${i}`];case u.CalendarViewEnum.century:return this[`century${i}`];default:return 1}}batch(a,s){const i=this.hostContainer||document.body,l=i.appendChild(a);s(l),i.removeChild(l)}}exports.DOMService=N;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../models/CalendarViewEnum.js"),n=require("../../utils.js"),e=require("@progress/kendo-react-common");class I{constructor(){this.calendarHeight=0,this.headerHeight=0,this.monthViewHeight=0,this.yearViewHeight=0,this.decadeViewHeight=0,this.centuryViewHeight=0,this.navigationItemHeight=0,this.scrollableContentHeight=0,this.scrollableYearContentHeight=0,this.calendarWidth=0,this.monthViewWidth=0,this.yearViewWidth=0,this.decadeViewWidth=0,this.centuryViewWidth=0,this.scrollableContentWidth=0,this.didCalculate=!1,this.hostContainer=null}ensureHeights(){this.calendarHeight===void 0&&this.calculateHeights()}calculateHeights(r,o){if(!e.canUseDOM)return;const i=n.domContainerFactory("div"),u=n.domContainerFactory("ul"),S=n.domContainerFactory("li"),V=n.domContainerFactory("td"),D=n.domContainerFactory("th"),m=n.domContainerFactory("tr"),M=n.domContainerFactory("tbody"),O=n.domContainerFactory("thead"),v=n.domContainerFactory("table"),s=o&&o.uCalendar,H=o&&o.uButton,z=e.strippedClassNames(e.uButton.wrapper({c:H,fillMode:"flat",size:"medium",rounded:"medium",themeColor:"primary"}),e.uCalendar.title({c:s})),N=()=>i(`
+                <span class="${z}">
+                    <span class="${e.strippedClassNames(e.uButton.text({c:H}))}">March 2017</span>
+                </span>
+                <span class="${e.strippedClassNames(e.uCalendar.spacer({c:s}))}"></span>
+                <span class="${e.strippedClassNames(e.uCalendar.nav({c:s}))}"><button class="${e.strippedClassNames(e.uCalendar.today({c:s}))}">TODAY</button></span>
+            `,e.strippedClassNames(e.uCalendar.header({c:s,vertical:!0}))),q=()=>v([O([m([D("MO",e.strippedClassNames(e.uCalendar.th({c:s})))],e.strippedClassNames(e.uCalendar.tr({c:s})))],e.strippedClassNames(e.uCalendar.thead({c:s})))],e.strippedClassNames(e.uCalendar.table({c:s,weekdays:!0}))),f=(t,a)=>new Array(t).fill("1").map(a),k=(t,a=1)=>v([M([m([V("1",e.strippedClassNames(e.uCalendar.td({c:s,isWeek:!0})))])].concat(f(t,()=>m(f(a,d=>V(`<span class="${e.strippedClassNames(e.uCalendar.link({c:s}))}">${d}</span>`,e.strippedClassNames(e.uCalendar.td({c:s})))),e.strippedClassNames(e.uCalendar.tr({c:s}))))),e.strippedClassNames(e.uCalendar.tbody({c:s})))],e.strippedClassNames(e.uCalendar.table({c:s}))),w=t=>i(t,e.strippedClassNames(e.uCalendar.scrollableSelector({c:s}),e.uCalendar.scrollable({c:s,horizontal:!0}))),B=(t,a,d)=>i(d?[N(),q(),w([t,t])]:[N(),w([t,t])],a,{left:"-10000px",position:"absolute"}),Y=(()=>{let t;return()=>e.canUseDOM?(t||(t=i([w([u([S("<span>FEB</span>")])])],e.strippedClassNames(e.uCalendar.navigation({c:s})),{left:"0px",position:"absolute"})),t):null})(),g=({cells:t,rows:a},d,A)=>{let b;return()=>e.canUseDOM?(b||(b=B(k(a,t),d,A)),b):null},p=t=>t.querySelector(`.${e.strippedClassNames(e.uCalendar.scrollableSelector({c:s}))}`),y=t=>{const a=p(t);return a.className=`${a.className} scrollable-horizontal`,t},W=g({cells:7,rows:6},e.strippedClassNames(e.uCalendar.view({c:s,month:!0})),!0),F=g({cells:5,rows:3},e.strippedClassNames(e.uCalendar.view({c:s,year:!0})),!1),$=g({cells:5,rows:2},e.strippedClassNames(e.uCalendar.view({c:s,decade:!0})),!1),x=()=>y(W()),E=()=>y(F()),U=()=>y($()),l=t=>parseFloat(window.getComputedStyle(t).height)||t.offsetHeight,h=t=>{const a=window.getComputedStyle(t);return parseFloat(a.width)+parseFloat(a.paddingLeft)+parseFloat(a.paddingRight)||t.offsetWidth},c=t=>t.querySelector("tbody");this.didCalculate=!0,r&&(this.hostContainer=r),this.batch(W(),t=>{const a=c(t);this.calendarHeight=l(t),this.monthViewHeight=l(a),this.headerHeight=l(a.children[0]),this.scrollableContentHeight=l(p(t))}),this.batch(x(),t=>{const a=c(t);this.calendarWidth=h(t),this.monthViewWidth=h(a),this.scrollableContentWidth=h(p(t))}),this.batch(F(),t=>{this.yearViewHeight=l(c(t)),this.scrollableYearContentHeight=l(p(t))}),this.batch(E(),t=>{this.yearViewWidth=h(c(t))}),this.batch($(),t=>{this.decadeViewHeight=l(c(t)),this.centuryViewHeight=this.decadeViewHeight}),this.batch(U(),t=>{this.decadeViewWidth=h(c(t)),this.centuryViewWidth=this.decadeViewWidth}),this.batch(Y(),t=>{this.navigationItemHeight=l(t.querySelector("li"))})}viewHeight(r){return this.viewDimension(r,"height")}viewWidth(r){return this.viewDimension(r,"width")}viewDimension(r,o){const i=o==="height"?"ViewHeight":"ViewWidth";switch(r){case C.CalendarViewEnum.month:return this[`month${i}`];case C.CalendarViewEnum.year:return this[`year${i}`];case C.CalendarViewEnum.decade:return this[`decade${i}`];case C.CalendarViewEnum.century:return this[`century${i}`];default:return 1}}batch(r,o){const i=this.hostContainer||document.body,u=i.appendChild(r);o(u),i.removeChild(u)}}exports.DOMService=I;