@progress/kendo-react-dateinputs 8.3.0-develop.6 → 8.3.0-develop.8

package/calendar/components/View.mjs

@@ -8,29 +8,33 @@
 "use client";
 import * as i from "react";
 import s from "prop-types";
-import { cloneDate as p, weekInYear as w } from "@progress/kendo-date-math";
-import { provideIntlService as D, registerForIntl as v } from "@progress/kendo-react-intl";
-import { CalendarCell as g } from "./CalendarCell.mjs";
-import { CalendarWeekCell as y } from "./CalendarWeekCell.mjs";
-import { CalendarViewEnum as u } from "../models/CalendarViewEnum.mjs";
-import { getToday as d, setTime as N } from "../../utils.mjs";
-import { WeekNamesService as b } from "../services/WeekNamesService.mjs";
-const k = (f) => /* @__PURE__ */ i.createElement("td", { key: f, className: "k-calendar-td k-empty" }, " "), c = class c extends i.Component {
+import { cloneDate as k, weekInYear as R } from "@progress/kendo-date-math";
+import { provideIntlService as M, registerForIntl as q } from "@progress/kendo-react-intl";
+import { CalendarCell as x } from "./CalendarCell.mjs";
+import { CalendarWeekCell as I } from "./CalendarWeekCell.mjs";
+import { CalendarViewEnum as D } from "../models/CalendarViewEnum.mjs";
+import { getToday as v, setTime as V } from "../../utils.mjs";
+import { WeekNamesService as S } from "../services/WeekNamesService.mjs";
+import { classNames as l, uCalendar as c } from "@progress/kendo-react-common";
+const y = (g, t) => {
+  const e = t;
+  return /* @__PURE__ */ i.createElement("td", { key: g, role: "gridcell", className: l(c.td({ c: e, isEmpty: !0 })) }, " ");
+}, u = class u extends i.Component {
   constructor() {
     super(...arguments), this.intl = null, this.weekService = null, this.buildWeekNumber = (t, e) => {
       if (!this.firstDate(t))
-        return k(`week-cell-${e}`);
-      const a = this.firstDate(t), n = this.getWeekNumber(a), o = `kendo-react-calendar-week-cell-${n}`, l = {
-        className: "k-alt",
+        return y(`week-cell-${e}`);
+      const a = this.firstDate(t), n = this.getWeekNumber(a), o = `kendo-react-calendar-week-cell-${n}`, m = {
         value: n,
         firstDate: a,
         weekDays: t,
+        unstyled: this.props.unstyled,
         onClick: this.handleWeekCellClick
       };
-      return this.props.weekCell ? /* @__PURE__ */ i.createElement(this.props.weekCell, { ...l, key: o }, n) : /* @__PURE__ */ i.createElement(y, { ...l, key: o }, n);
+      return this.props.weekCell ? /* @__PURE__ */ i.createElement(this.props.weekCell, { ...m, key: o }, n) : /* @__PURE__ */ i.createElement(I, { ...m, key: o }, n);
     }, this.buildRow = (t) => t.map((e, r) => {
       if (!e)
-        return k(r);
+        return y(r);
       const a = { "aria-selected": e.isSelected }, n = `kendo-react-calendar-cell-${e.value.getTime()}`, o = {
         ...a,
         ...e,
@@ -38,11 +42,12 @@ const k = (f) => /* @__PURE__ */ i.createElement("td", { key: f, className: "k-c
         view: this.props.activeView,
         showOtherMonthDays: this.props.showOtherMonthDays,
         allowReverse: this.props.allowReverse,
+        unstyled: this.props.unstyled,
         onClick: this.handleClick,
         onMouseEnter: this.handleMouseEnter,
         onMouseLeave: this.handleMouseLeave
       };
-      return this.props.cell ? /* @__PURE__ */ i.createElement(this.props.cell, { ...o, key: n }, e.formattedValue) : /* @__PURE__ */ i.createElement(g, { ...o, key: n }, e.formattedValue);
+      return this.props.cell ? /* @__PURE__ */ i.createElement(this.props.cell, { ...o, key: n }, e.formattedValue) : /* @__PURE__ */ i.createElement(x, { ...o, key: n }, e.formattedValue);
     }), this.firstDate = (t) => {
       const e = this.firstWeekDateContext(t);
       return e ? e.value : null;
@@ -57,7 +62,7 @@ const k = (f) => /* @__PURE__ */ i.createElement("td", { key: f, className: "k-c
       const { onChange: r } = this.props;
       if (r && e) {
         const a = {
-          value: p(t),
+          value: k(t),
           target: this,
           nativeEvent: e && e.nativeEvent,
           syntheticEvent: e
@@ -69,10 +74,10 @@ const k = (f) => /* @__PURE__ */ i.createElement("td", { key: f, className: "k-c
       a && r && a.call(void 0, t, n, r);
     }, this.handleMouseEnter = (t) => {
       const { onCellEnter: e } = this.props;
-      e && e.call(void 0, p(t));
+      e && e.call(void 0, k(t));
     }, this.handleMouseLeave = (t) => {
       const { onCellLeave: e } = this.props;
-      e && e.call(void 0, p(t));
+      e && e.call(void 0, k(t));
     };
   }
   get min() {
@@ -85,56 +90,57 @@ const k = (f) => /* @__PURE__ */ i.createElement("td", { key: f, className: "k-c
     return this.props.direction === "horizontal";
   }
   get isMonthView() {
-    return this.props.activeView === u.month;
+    return this.props.activeView === D.month;
   }
   get weekNumber() {
-    return !!(this.props.showWeekNumbers && this.props.activeView === u.month);
+    return !!(this.props.showWeekNumbers && this.props.activeView === D.month);
   }
   get selectedDate() {
-    return this.props.selectedDate !== void 0 ? this.props.selectedDate : c.defaultProps.selectedDate;
+    return this.props.selectedDate !== void 0 ? this.props.selectedDate : u.defaultProps.selectedDate;
   }
   render() {
-    this.intl = D(this), this.weekService = new b(this.intl);
-    const t = this.weekService.getWeekNames(this.weekNumber, this.props.weekDaysFormat), e = this.props.service.rowLength(this.weekNumber), r = this.props.service.title(this.props.viewDate), a = d(), n = N(this.props.viewDate, a), o = this.props.service.data({
-      cellUID: this.props.cellUID,
+    const { service: t, weekDaysFormat: e, cellUID: r, focusedDate: a, bus: n, activeView: o, selectionRange: m, unstyled: w } = this.props, h = w && w.uCalendar;
+    this.intl = M(this), this.weekService = new S(this.intl);
+    const C = this.weekService.getWeekNames(this.weekNumber, e), N = t.rowLength(this.weekNumber), b = t.title(this.props.viewDate), E = v(), W = V(this.props.viewDate, E), O = t.data({
+      cellUID: r,
       min: this.min,
       max: this.max,
-      focusedDate: this.props.focusedDate,
-      isActiveView: !this.props.bus.canMoveDown(this.props.activeView),
+      focusedDate: a,
+      isActiveView: !n.canMoveDown(o),
       selectedDate: this.selectedDate,
-      selectionRange: this.props.selectionRange,
-      viewDate: n
+      selectionRange: m,
+      viewDate: W
     });
     return /* @__PURE__ */ i.createElement(i.Fragment, null, this.isMonthView && this.isHorizontal && /* @__PURE__ */ i.createElement(
       "thead",
       {
         role: "rowgroup",
-        className: "k-calendar-thead"
+        className: l(c.thead({ c: h }))
       },
-      /* @__PURE__ */ i.createElement("tr", { role: "row", className: "k-calendar-tr" }, t.map((l, h) => /* @__PURE__ */ i.createElement("th", { key: h, className: "k-calendar-th" }, l)))
+      /* @__PURE__ */ i.createElement("tr", { role: "row", className: l(c.tr({ c: h })) }, C.map((p, d) => /* @__PURE__ */ i.createElement("th", { key: d, className: l(c.th({ c: h })) }, p)))
     ), /* @__PURE__ */ i.createElement(
       "tbody",
       {
         role: "rowgroup",
-        className: "k-calendar-tbody"
+        className: l(c.tbody({ c: h }))
       },
-      !this.isHorizontal && /* @__PURE__ */ i.createElement("tr", { role: "presentation", className: "k-calendar-tr" }, /* @__PURE__ */ i.createElement(
+      !this.isHorizontal && /* @__PURE__ */ i.createElement("tr", { role: "presentation", className: l(c.tr({ c: h })) }, /* @__PURE__ */ i.createElement(
         "th",
         {
           scope: "col",
-          colSpan: e,
-          className: "k-calendar-caption"
+          colSpan: N,
+          className: l(c.caption({ c: h }))
         },
-        r
+        b
       )),
-      o.map((l, h) => /* @__PURE__ */ i.createElement("tr", { role: "row", className: "k-calendar-tr", key: h }, this.weekNumber && this.buildWeekNumber(l, h), this.buildRow(l)))
+      O.map((p, d) => /* @__PURE__ */ i.createElement("tr", { role: "row", className: l(c.tr({ c: h })), key: d }, this.weekNumber && this.buildWeekNumber(p, d), this.buildRow(p)))
     ));
   }
   getWeekNumber(t) {
-    return !this.weekNumber || !this.intl ? null : w(t, this.intl.firstDay());
+    return !this.weekNumber || !this.intl ? null : R(t, this.intl.firstDay());
   }
 };
-c.propTypes = {
+u.propTypes = {
   activeRangeEnd: s.oneOf(["start", "end", null]),
   activeView: s.number.isRequired,
   cellUID: s.string.isRequired,
@@ -149,13 +155,13 @@ c.propTypes = {
   showWeekNumbers: s.bool,
   showOtherMonthDays: s.bool,
   viewDate: s.instanceOf(Date).isRequired
-}, c.defaultProps = {
+}, u.defaultProps = {
   direction: "vertical",
-  selectedDate: d(),
+  selectedDate: v(),
   showWeekNumbers: !1
 };
-let m = c;
-v(m);
+let f = u;
+q(f);
 export {
-  m as View
+  f as View
 };

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

package/calendar/components/ViewList.mjs

@@ -6,25 +6,25 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as s from "react";
+import * as a from "react";
 import o from "prop-types";
-import { classNames as g } from "@progress/kendo-react-common";
-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 { WeekNamesService as C } from "../services/WeekNamesService.mjs";
-import { dateInRange as u, isInRange as E, getToday as N } from "../../utils.mjs";
-import { CalendarViewEnum as n } from "../models/CalendarViewEnum.mjs";
-import { TodayCommand as O } from "./TodayCommand.mjs";
-const H = 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 = () => {
+import { classNames as p, uCalendar as m } from "@progress/kendo-react-common";
+import { cloneDate as T, getDate as b, isEqualDate as E } from "@progress/kendo-date-math";
+import { provideIntlService as N, registerForIntl as O } from "@progress/kendo-react-intl";
+import { Virtualization as H } from "../../virtualization/Virtualization.mjs";
+import { View as z } from "./View.mjs";
+import { Header as A } from "./Header.mjs";
+import { WeekNamesService as R } from "../services/WeekNamesService.mjs";
+import { dateInRange as g, isInRange as _, getToday as q } from "../../utils.mjs";
+import { CalendarViewEnum as c } from "../models/CalendarViewEnum.mjs";
+import { TodayCommand as F } from "./TodayCommand.mjs";
+const M = 5, d = class d extends a.Component {
+  constructor(n) {
+    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"), 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;
+      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;
     }, this.blurActiveDate = () => {
       if (!this._element)
         return;
@@ -33,43 +33,46 @@ const H = 5, h = class h extends s.Component {
     }, this.handleVirtualizationMount = (e) => {
       if (this.virtualization = e, this.virtualization && this.table) {
         this.table.style.transform = `translateY(${this.viewOffset}px)`;
-        const t = u(this.props.focusedDate, this.props.min, this.props.max), i = this.props.service.skip(t, this.props.min);
-        this.virtualization.scrollToIndex(i);
+        const s = g(this.props.focusedDate, this.props.min, this.props.max), t = this.props.service.skip(s, this.props.min);
+        this.virtualization.scrollToIndex(t);
       }
-    }, this.buildMonthView = (e, t) => /* @__PURE__ */ s.createElement(
-      "table",
-      {
-        key: "calendar-view-list-weekdays",
-        className: "k-calendar-table k-calendar-weekdays",
-        role: "grid",
-        tabIndex: this.props.tabIndex
-      },
-      /* @__PURE__ */ s.createElement("colgroup", null, e.map((i, a) => /* @__PURE__ */ s.createElement("col", { key: a }))),
-      /* @__PURE__ */ s.createElement("thead", { className: "k-calendar-thead" }, /* @__PURE__ */ s.createElement("tr", { className: "k-calendar-tr" }, t.map((i, a) => /* @__PURE__ */ s.createElement("th", { key: a, className: "k-calendar-th" }, i))))
-    ), this.buildDates = (e, t) => {
-      const i = this.props.cellUID;
-      return /* @__PURE__ */ s.createElement(
+    }, this.buildMonthView = (e, s) => {
+      const { unstyled: t } = this.props, i = t && t.uCalendar;
+      return /* @__PURE__ */ a.createElement(
         "table",
         {
-          className: "k-calendar-table",
-          ref: (a) => this.table = a,
+          key: "calendar-view-list-weekdays",
+          className: p(m.table({ c: i, 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))))
+      );
+    }, this.buildDates = (e, s) => {
+      const t = this.props.cellUID, { unstyled: i } = this.props, l = i && i.uCalendar;
+      return /* @__PURE__ */ a.createElement(
+        "table",
+        {
+          className: p(m.table({ c: l })),
+          ref: (r) => this.table = r,
           role: "grid",
           tabIndex: this.props.tabIndex,
-          "aria-activedescendant": i + this.props.focusedDate.getTime()
+          "aria-activedescendant": t + this.props.focusedDate.getTime()
         },
-        /* @__PURE__ */ s.createElement("colgroup", null, e.map((a, r) => /* @__PURE__ */ s.createElement("col", { key: r }))),
-        t.map((a) => /* @__PURE__ */ s.createElement(
-          I,
+        /* @__PURE__ */ a.createElement("colgroup", null, e.map((r, h) => /* @__PURE__ */ a.createElement("col", { key: h }))),
+        s.map((r) => /* @__PURE__ */ a.createElement(
+          z,
           {
-            ref: (r) => {
-              this.calendarView || (this.calendarView = r);
+            ref: (h) => {
+              this.calendarView || (this.calendarView = h);
             },
-            key: a.getTime(),
+            key: r.getTime(),
             activeView: this.props.activeView,
-            viewDate: a,
+            viewDate: r,
             min: this.props.min,
             max: this.props.max,
-            cellUID: i,
+            cellUID: t,
             focusedDate: this.props.focusedDate,
             cell: this.props.cell,
             selectedDate: this.props.value,
@@ -78,34 +81,35 @@ const H = 5, h = class h extends s.Component {
             bus: this.props.bus,
             service: this.props.service,
             weekCell: this.props.weekCell,
-            showOtherMonthDays: this.props.showOtherMonthDays
+            showOtherMonthDays: this.props.showOtherMonthDays,
+            unstyled: i
           }
         ))
       );
     }, this.calculateHeights = () => {
       if (!this.props.dom)
         return;
-      const e = this.props.activeView === n.month ? this.props.dom.scrollableContentHeight : this.props.dom.scrollableYearContentHeight;
+      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, 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 r = `translateY(${t.offset}px)`;
-        this.table.style.transform = r;
+    }, 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.table.style.transform = l;
       }
     }, this.handleTodayClick = (e) => {
       this.shouldScroll = !0, this.handleDateChange.call(void 0, e, !0);
-    }, this.handleDateChange = (e, t = !1) => {
-      const { onChange: i } = this.props;
-      if (i) {
-        const a = {
+    }, this.handleDateChange = (e, s = !1) => {
+      const { onChange: t } = this.props;
+      if (t) {
+        const i = {
           syntheticEvent: e.syntheticEvent,
           nativeEvent: e.nativeEvent,
-          value: D(e.value),
+          value: T(e.value),
           target: this,
-          isTodayClick: t
+          isTodayClick: s
         };
-        i.call(void 0, a);
+        t.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),
@@ -116,40 +120,39 @@ const H = 5, h = class h extends s.Component {
     return this._element;
   }
   get weekNames() {
-    return this.intl = y(this), this.weekService = new C(this.intl), this.weekService.getWeekNames(this.weekNumber, this.props.weekDaysFormat);
+    return this.intl = N(this), this.weekService = new R(this.intl), this.weekService.getWeekNames(this.weekNumber, this.props.weekDaysFormat);
   }
   get weekNumber() {
-    return !!(this.props.showWeekNumbers && this.props.activeView === n.month);
+    return !!(this.props.showWeekNumbers && this.props.activeView === c.month);
   }
   get take() {
-    return this.props.take !== void 0 ? this.props.take : h.defaultProps.take;
+    return this.props.take !== void 0 ? this.props.take : d.defaultProps.take;
   }
   get animate() {
     return !!(this.props.smoothScroll && this.animateToIndex);
   }
   get todayIsInRange() {
-    return E(N(), d(this.props.min), d(this.props.max));
+    return _(q(), b(this.props.min), b(this.props.max));
   }
-  componentDidUpdate(l, e) {
+  componentDidUpdate(n, 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: n, min: e, max: s, service: t, unstyled: i } = this.props, l = i && i.uCalendar;
     this.calculateHeights();
-    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), c = 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 === 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(c, this.props.service.datesList(r, a)), k = /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
-      T,
+    const r = this.lastView !== n, h = g(this.props.focusedDate, e, s), u = r ? t.skip(h, e) : this.state.skip, v = t.total(e, s), D = this.getTake(u, v), x = t.addToDate(e, u), y = t.addToDate(e, this.state.index), w = new Array(t.rowLength(this.weekNumber)).fill(""), k = n !== this.lastView;
+    this.animateToIndex = !k, (k || !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 S = p(m.view({
+      c: l,
+      month: n === c.month,
+      year: n === c.year,
+      decade: n === c.decade,
+      century: n === c.century
+    })), C = this.buildDates(w, t.datesList(x, D)), I = /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+      A,
       {
         key: "calendar-view-list-header",
-        currentDate: v,
+        currentDate: y,
         min: this.props.min,
         max: this.props.max,
         activeView: this.props.activeView,
@@ -157,24 +160,26 @@ const H = 5, h = class h extends s.Component {
         service: this.props.service,
         headerTitle: this.props.headerTitle,
         header: this.props.header,
-        commands: /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
-          O,
+        unstyled: i,
+        commands: /* @__PURE__ */ a.createElement(
+          F,
           {
             min: this.props.min,
             max: this.props.max,
             onClick: this.handleTodayClick,
             disabled: !this.todayIsInRange,
-            tabIndex: this.props.tabIndex
+            tabIndex: this.props.tabIndex,
+            unstyled: i
           }
-        ))
+        )
       }
-    ), this.props.activeView === n.month && this.buildMonthView(c, this.weekNames), /* @__PURE__ */ s.createElement(
-      V,
+    ), this.props.activeView === c.month && this.buildMonthView(w, this.weekNames), /* @__PURE__ */ a.createElement(
+      H,
       {
         key: "calendar-view-list-content",
-        skip: t,
+        skip: u,
         take: this.take,
-        total: i,
+        total: v,
         itemHeight: this.viewHeight,
         topOffset: this.viewOffset,
         bottomOffset: this.bottomOffset,
@@ -183,23 +188,23 @@ const H = 5, h = class h extends s.Component {
         onScroll: this.props.onScroll,
         onScrollAction: this.handleScrollAction,
         onMount: this.handleVirtualizationMount,
-        children: w,
+        children: C,
         tabIndex: this.props.tabIndex
       }
     ));
-    return /* @__PURE__ */ s.createElement(
+    return /* @__PURE__ */ a.createElement(
       "div",
       {
-        ref: (b) => {
-          this._element = b;
+        ref: (V) => {
+          this._element = V;
         },
-        className: f
+        className: S
       },
-      this.props.dom.didCalculate ? k : null
+      this.props.dom.didCalculate ? I : null
     );
   }
 };
-h.propTypes = {
+d.propTypes = {
   activeView: o.number.isRequired,
   bottomOffset: o.number,
   cellUID: o.string.isRequired,
@@ -215,14 +220,14 @@ h.propTypes = {
   viewOffset: o.number,
   weekDaysFormat: o.oneOf(["short", "abbreviated", "narrow"]),
   tabIndex: o.number
-}, h.defaultProps = {
-  take: H,
+}, d.defaultProps = {
+  take: M,
   showWeekNumbers: !1,
   weekDaysFormat: "short",
   smoothScroll: !0
 };
-let p = h;
-S(p);
+let f = d;
+O(f);
 export {
-  p as ViewList
+  f as ViewList
 };

package/common/ClearButton.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";const i=require("react"),a=require("@progress/kendo-react-intl"),o=require("../messages/index.js"),l=require("@progress/kendo-react-common"),u=require("@progress/kendo-svg-icons");function p(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,c.get?c:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const r=p(i);class s extends r.Component{constructor(){super(...arguments),this.handelClick=e=>{e.stopPropagation();const{onClick:t}=this.props;t&&t.call(void 0,e)}}render(){const e=a.provideLocalizationService(this).toLanguageString(o.clear,o.messages[o.clear]);return r.createElement("span",{className:"k-clear-value",role:"button",onClick:this.handelClick,tabIndex:this.props.tabindex||-1,title:e,key:"clearbutton"},r.createElement(l.IconWrap,{name:"x",icon:u.xIcon}))}}a.registerForLocalization(s);module.exports=s;
+"use client";"use strict";const d=require("react"),m=require("@progress/kendo-react-intl"),a=require("../messages/index.js"),o=require("@progress/kendo-react-common"),g=require("@progress/kendo-svg-icons");function p(e){const n=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(n,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const l=p(d),b=e=>{const n=m.useLocalization(),t=o.useUnstyled(),c=t&&t.uDateInput,i=n.toLanguageString(a.clear,a.messages[a.clear]),u=s=>{s.stopPropagation();const{onClick:r}=e;r&&r.call(void 0,s)};return l.createElement("span",{className:o.classNames(o.uDateInput.clearButton({c})),role:"button",onClick:u,tabIndex:e.tabindex||-1,title:i,key:"clearbutton"},l.createElement(o.IconWrap,{name:"x",icon:g.xIcon}))};module.exports=b;

package/common/ClearButton.mjs

@@ -6,36 +6,30 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as e from "react";
-import { provideLocalizationService as a, registerForLocalization as n } from "@progress/kendo-react-intl";
-import { clear as r, messages as i } from "../messages/index.mjs";
-import { IconWrap as s } from "@progress/kendo-react-common";
-import { xIcon as c } from "@progress/kendo-svg-icons";
-class l extends e.Component {
-  constructor() {
-    super(...arguments), this.handelClick = (t) => {
-      t.stopPropagation();
-      const { onClick: o } = this.props;
-      o && o.call(void 0, t);
-    };
-  }
-  render() {
-    const t = a(this).toLanguageString(r, i[r]);
-    return /* @__PURE__ */ e.createElement(
-      "span",
-      {
-        className: "k-clear-value",
-        role: "button",
-        onClick: this.handelClick,
-        tabIndex: this.props.tabindex || -1,
-        title: t,
-        key: "clearbutton"
-      },
-      /* @__PURE__ */ e.createElement(s, { name: "x", icon: c })
-    );
-  }
-}
-n(l);
+import * as a from "react";
+import { useLocalization as m } from "@progress/kendo-react-intl";
+import { clear as c, messages as u } from "../messages/index.mjs";
+import { useUnstyled as p, classNames as d, uDateInput as f, IconWrap as g } from "@progress/kendo-react-common";
+import { xIcon as x } from "@progress/kendo-svg-icons";
+const y = (t) => {
+  const s = m(), e = p(), l = e && e.uDateInput, r = s.toLanguageString(c, u[c]), i = (o) => {
+    o.stopPropagation();
+    const { onClick: n } = t;
+    n && n.call(void 0, o);
+  };
+  return /* @__PURE__ */ a.createElement(
+    "span",
+    {
+      className: d(f.clearButton({ c: l })),
+      role: "button",
+      onClick: i,
+      tabIndex: t.tabindex || -1,
+      title: r,
+      key: "clearbutton"
+    },
+    /* @__PURE__ */ a.createElement(g, { name: "x", icon: x })
+  );
+};
 export {
-  l as default
+  y as default
 };