@progress/kendo-react-dateinputs 7.0.0-develop.9 → 7.0.1-develop.1

package/index.mjs

@@ -2,11 +2,12 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------*/
+"use client";
 import * as o from "react";
 import * as n from "prop-types";
-import { classNames as P, canUseDOM as J, createPropsContext as yt, withPropsContext as St, guid as at, Keys as C, validatePackage as Pt, setScrollbarWidth as fs, getActiveElement as lt, AsyncFocusBlur as we, kendoThemeMaps as ft, noop as Rs, IconWrap as ei } from "@progress/kendo-react-common";
-import { getDate as x, cloneDate as v, addDecades as it, addCenturies as qt, firstDecadeOfCentury as oe, lastDecadeOfCentury as He, firstYearOfDecade as st, durationInCenturies as se, addYears as nt, lastYearOfDecade as Ae, durationInDecades as ie, addDays as Wt, addWeeks as gs, addMonths as $, firstDayOfMonth as fe, lastDayOfMonth as Ot, dayOfWeek as si, durationInMonths as ne, firstMonthOfYear as Ns, lastMonthOfYear as _s, createDate as le, durationInYears as ae, weekInYear as ii, isEqualDate as bt, isEqual as ct } from "@progress/kendo-date-math";
-import { registerForIntl as gt, provideIntlService as ut, registerForLocalization as rt, provideLocalizationService as q } from "@progress/kendo-react-intl";
+import { classNames as P, canUseDOM as J, createPropsContext as Dt, withIdHOC as yt, withPropsContext as St, Keys as C, validatePackage as Pt, setScrollbarWidth as fs, getActiveElement as ot, AsyncFocusBlur as we, kendoThemeMaps as mt, noop as Rs, IconWrap as ei } from "@progress/kendo-react-common";
+import { getDate as x, cloneDate as v, addDecades as it, addCenturies as qt, firstDecadeOfCentury as oe, lastDecadeOfCentury as He, firstYearOfDecade as st, durationInCenturies as se, addYears as nt, lastYearOfDecade as Ae, durationInDecades as ie, addDays as Wt, addWeeks as gs, addMonths as $, firstDayOfMonth as fe, lastDayOfMonth as Ot, dayOfWeek as si, durationInMonths as ne, firstMonthOfYear as Ns, lastMonthOfYear as _s, createDate as le, durationInYears as ae, weekInYear as ii, isEqualDate as wt, isEqual as ht } from "@progress/kendo-date-math";
+import { registerForIntl as ft, provideIntlService as ct, registerForLocalization as at, provideLocalizationService as q } from "@progress/kendo-react-intl";
 import { Button as N, ButtonGroup as ni } from "@progress/kendo-react-buttons";
 import { caretAltUpIcon as ai, caretAltDownIcon as ri, xIcon as oi, calendarIcon as Fs, clockIcon as li, chevronRightIcon as vs, chevronLeftIcon as ws, arrowsSwapIcon as hi } from "@progress/kendo-svg-icons";
 import { FloatingLabel as Ls } from "@progress/kendo-react-labels";
@@ -16,7 +17,7 @@ const Rt = {
   name: "@progress/kendo-react-dateinputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1701354669,
+  publishDate: 1702313896,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
 }, pi = (s, t, e) => [
@@ -404,11 +405,11 @@ class xi extends o.Component {
 }
 var b = /* @__PURE__ */ ((s) => (s[s.Left = 0] = "Left", s[s.Right = 1] = "Right", s[s.Up = 2] = "Up", s[s.Down = 3] = "Down", s[s.PrevView = 4] = "PrevView", s[s.NextView = 5] = "NextView", s[s.FirstInView = 6] = "FirstInView", s[s.LastInView = 7] = "LastInView", s[s.LowerView = 8] = "LowerView", s[s.UpperView = 9] = "UpperView", s))(b || {}), D = /* @__PURE__ */ ((s) => (s[s.month = 0] = "month", s[s.year = 1] = "year", s[s.decade = 2] = "decade", s[s.century = 3] = "century", s))(D || {});
 const z = { start: null, end: null };
-function ot(s) {
+function rt(s) {
   const t = (i, a, r, ...l) => a[r] === null ? null : (i ? s.isRequired : s)(a, r, ...l), e = t.bind(null, !1);
   return e.isRequired = t.bind(null, !0), e;
 }
-const ge = (s, t, e) => t === void 0 || e === void 0 || t <= s && s <= e ? s : s < t ? t : e, L = new Date(1980, 0, 1), dt = new Date(1900, 0, 1), pt = new Date(2099, 11, 31), Nt = new Date(1980, 0, 1), xt = new Date(1980, 0, 1, 23, 59, 59), W = (s, t) => {
+const ge = (s, t, e) => t === void 0 || e === void 0 || t <= s && s <= e ? s : s < t ? t : e, L = new Date(1980, 0, 1), ut = new Date(1900, 0, 1), dt = new Date(2099, 11, 31), Nt = new Date(1980, 0, 1), xt = new Date(1980, 0, 1, 23, 59, 59), W = (s, t) => {
   const e = v(s);
   return e.setHours(
     t.getHours(),
@@ -1055,7 +1056,7 @@ let ji = class {
     }, g = (k) => k.querySelector(".k-scrollable"), H = (k) => {
       const _ = g(k);
       return _.className = `${_.className} k-scrollable-horizontal`, k;
-    }, V = E({ cells: 7, rows: 6 }, "k-calendar-view k-calendar-monthview k-vstack", !0), R = E({ cells: 5, rows: 3 }, "k-calendar-view k-calendar-yearview", !1), A = E({ cells: 5, rows: 2 }, "k-calendar-view k-calendar-decadeview", !1), S = () => H(V()), O = () => H(R()), tt = () => H(A()), j = (k) => parseFloat(window.getComputedStyle(k).height) || k.offsetHeight, vt = (k) => {
+    }, V = E({ cells: 7, rows: 6 }, "k-calendar-view k-calendar-monthview k-vstack", !0), R = E({ cells: 5, rows: 3 }, "k-calendar-view k-calendar-yearview", !1), A = E({ cells: 5, rows: 2 }, "k-calendar-view k-calendar-decadeview", !1), S = () => H(V()), O = () => H(R()), tt = () => H(A()), j = (k) => parseFloat(window.getComputedStyle(k).height) || k.offsetHeight, gt = (k) => {
       const _ = window.getComputedStyle(k);
       return parseFloat(_.width) + parseFloat(_.paddingLeft) + parseFloat(_.paddingRight) || k.offsetWidth;
     }, It = (k) => k.querySelector("tbody");
@@ -1064,15 +1065,15 @@ let ji = class {
       this.calendarHeight = j(k), this.monthViewHeight = j(_), this.headerHeight = j(_.children[0]), this.scrollableContentHeight = j(g(k));
     }), this.batch(S(), (k) => {
       const _ = It(k);
-      this.calendarWidth = vt(k), this.monthViewWidth = vt(_), this.scrollableContentWidth = vt(g(k));
+      this.calendarWidth = gt(k), this.monthViewWidth = gt(_), this.scrollableContentWidth = gt(g(k));
     }), this.batch(R(), (k) => {
       this.yearViewHeight = j(It(k)), this.scrollableYearContentHeight = j(g(k));
     }), this.batch(O(), (k) => {
-      this.yearViewWidth = vt(It(k));
+      this.yearViewWidth = gt(It(k));
     }), this.batch(A(), (k) => {
       this.decadeViewHeight = j(It(k)), this.centuryViewHeight = this.decadeViewHeight;
     }), this.batch(tt(), (k) => {
-      this.decadeViewWidth = vt(It(k)), this.centuryViewWidth = this.decadeViewWidth;
+      this.decadeViewWidth = gt(It(k)), this.centuryViewWidth = this.decadeViewWidth;
     }), this.batch(w(), (k) => {
       this.navigationItemHeight = j(k.querySelector("li"));
     });
@@ -1250,7 +1251,7 @@ const bs = (s) => /* @__PURE__ */ o.createElement("td", { key: s, className: "k-
     return this.props.selectedDate !== void 0 ? this.props.selectedDate : Ws.defaultProps.selectedDate;
   }
   render() {
-    this.intl = ut(this), this.weekService = new Qi(this.intl);
+    this.intl = ct(this), this.weekService = new Qi(this.intl);
     const s = this.weekService.getWeekNames(this.weekNumber), t = this.props.service.rowLength(this.weekNumber), e = this.props.service.title(this.props.viewDate), i = U(), a = W(this.props.viewDate, i), r = this.props.service.data({
       cellUID: this.props.cellUID,
       min: this.min,
@@ -1311,7 +1312,7 @@ jt.defaultProps = {
   selectedDate: U(),
   showWeekNumbers: !1
 };
-gt(jt);
+ft(jt);
 class tn extends o.PureComponent {
   /**
    * @return
@@ -1380,10 +1381,10 @@ Zt.propTypes = {
 };
 Zt.defaultProps = {
   rangeLength: 1,
-  min: dt,
-  max: pt
+  min: ut,
+  max: dt
 };
-rt(Zt);
+at(Zt);
 const Be = "multiviewcalendar.prevView", ze = "multiviewcalendar.nextView", Ft = "dateinput.increment", Lt = "dateinput.decrement", qe = "calendar.today", We = "datepicker.toggleCalendar", Ht = "daterangepicker.swapStartEnd", Ue = "daterangepicker.start", $e = "daterangepicker.end", Ye = "daterangepicker.separator", At = "datetimepicker.toggleDateTimeSelector", Ke = "timepicker.now", je = "timepicker.selectNow", ve = "timepicker.cancel", Ut = "timepicker.set", Ze = "timepicker.toggleTimeSelector", ue = "timepicker.toggleClock", Ge = "datetimepicker.date", Xe = "datetimepicker.time", $t = "datetimepicker.cancel", Yt = "datetimepicker.set", Je = "daterangepicker.cancel", Qe = "daterangepicker.set", T = {
   [qe]: "TODAY",
   [Ke]: "NOW",
@@ -1460,10 +1461,10 @@ Gt.propTypes = {
   disabled: n.bool
 };
 Gt.defaultProps = {
-  min: dt,
-  max: pt
+  min: ut,
+  max: dt
 };
-rt(Gt);
+at(Gt);
 const en = 5, Us = class extends o.Component {
   constructor(s) {
     super(s), this.virtualization = null, this.calendarView = null, this.table = null, this.intl = null, this.bottomOffset = 0, this.viewOffset = 0, this.viewHeight = 0, this._element = null, this.isActive = !1, this.animateToIndex = !0, this.shouldScroll = !1, this.focusActiveDate = () => {
@@ -1561,7 +1562,7 @@ const en = 5, Us = class extends o.Component {
     return this._element;
   }
   get weekNames() {
-    this.intl = ut(this);
+    this.intl = ct(this);
     const s = Bs(
       this.intl.dateFormatNames({ nameType: "short", type: "days" }),
       this.intl.firstDay()
@@ -1586,7 +1587,7 @@ const en = 5, Us = class extends o.Component {
   render() {
     this.calculateHeights();
     const s = this.lastView !== this.props.activeView, t = K(this.props.focusedDate, this.props.min, this.props.max), e = s ? this.props.service.skip(t, this.props.min) : this.state.skip, i = this.props.service.total(this.props.min, this.props.max), a = this.getTake(e, i), r = this.props.service.addToDate(this.props.min, e), l = this.props.service.addToDate(this.props.min, this.state.index), c = new Array(this.props.service.rowLength(this.weekNumber)).fill(""), h = this.props.activeView !== this.lastView;
-    this.animateToIndex = !h, (h || !bt(this.lastFocus, t) || this.shouldScroll || !this.props.shouldScroll || this.props.shouldScroll()) && (this.indexToScroll = this.props.service.skip(t, this.props.min)), this.lastFocus = t;
+    this.animateToIndex = !h, (h || !wt(this.lastFocus, t) || this.shouldScroll || !this.props.shouldScroll || this.props.shouldScroll()) && (this.indexToScroll = this.props.service.skip(t, this.props.min)), this.lastFocus = t;
     const u = P(
       "k-calendar-view k-vstack",
       {
@@ -1670,7 +1671,7 @@ ye.defaultProps = {
   showWeekNumbers: !1,
   smoothScroll: !0
 };
-gt(ye);
+ft(ye);
 class sn extends o.Component {
   constructor() {
     super(...arguments), this.handleClick = (t) => {
@@ -1742,7 +1743,7 @@ const nn = 30, $s = class extends o.Component {
   render() {
     this.calculateHeights();
     const s = this.lastView !== this.props.activeView, t = K(this.props.focusedDate, this.props.min, this.props.max), e = s ? this.props.service.skip(t, this.props.min) : this.state.skip, i = this.props.service.total(this.props.min, this.props.max), a = this.getTake(e, i), r = this.props.service.addToDate(this.props.min, e), l = this.props.service.datesList(r, a);
-    (this.props.activeView !== this.lastView || !ct(t, this.lastFocus)) && (this.indexToScroll = this.props.service.skip(t, this.props.min));
+    (this.props.activeView !== this.lastView || !ht(t, this.lastFocus)) && (this.indexToScroll = this.props.service.skip(t, this.props.min));
     const c = /* @__PURE__ */ o.createElement(
       Kt,
       {
@@ -1788,9 +1789,9 @@ ns.propTypes = {
 ns.defaultProps = {
   take: nn
 };
-const Re = (s) => s ? s.virtualization : null, ks = (s = kt.defaultProps.min, t = kt.defaultProps.max, e, i) => i !== void 0 ? i !== null && F(x(i), s, t) ? i : null : e !== null && F(x(e), s, t) ? e : null, mt = class extends o.Component {
+const Re = (s) => s ? s.virtualization : null, ks = (s = bt.defaultProps.min, t = bt.defaultProps.max, e, i) => i !== void 0 ? i !== null && F(x(i), s, t) ? i : null : e !== null && F(x(e), s, t) ? e : null, pt = class extends o.Component {
   constructor(s) {
-    super(s), this.scrollSyncService = null, this.focusedDate = null, this.cellUID = at(), this.id = at(), this.Navigation = null, this.calendarViewList = null, this._element = null, this.intl = null, this.service = null, this.isActive = !1, this.didNavigationChange = !1, this.focus = () => {
+    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(
@@ -1845,7 +1846,7 @@ const Re = (s) => s ? s.virtualization : null, ks = (s = kt.defaultProps.min, t
       const { keyCode: i } = e;
       if (!(!this.focusedDate || !this.service)) {
         if (i === C.enter) {
-          if (this.value !== null && bt(this.focusedDate, this.value)) {
+          if (this.value !== null && wt(this.focusedDate, this.value)) {
             const r = K(this.focusedDate, this.min, this.max);
             Re(this.calendarViewList).scrollToIndex(this.service.skip(r, this.min));
           }
@@ -1868,7 +1869,7 @@ const Re = (s) => s ? s.virtualization : null, ks = (s = kt.defaultProps.min, t
             this.min,
             this.max
           );
-          if (bt(this.focusedDate, a))
+          if (wt(this.focusedDate, a))
             return;
           this.setState({ focusedDate: a });
         }
@@ -1882,7 +1883,7 @@ const Re = (s) => s ? s.virtualization : null, ks = (s = kt.defaultProps.min, t
     const t = ks(
       this.min,
       this.max,
-      this.props.defaultValue || mt.defaultProps.defaultValue,
+      this.props.defaultValue || pt.defaultProps.defaultValue,
       this.props.value
     );
     this.state = {
@@ -1899,6 +1900,12 @@ const Re = (s) => s ? s.virtualization : null, ks = (s = kt.defaultProps.min, t
       )
     }, this.dom = new ji(), this.bus = new zs(this.handleViewChange), this.navigation = new qs(this.bus), this.oldValue = t;
   }
+  get cellUID() {
+    return this.props.id + "-cell-uid";
+  }
+  get id() {
+    return this.props.id + "-id";
+  }
   /**
    * Gets the wrapping element of the Calendar.
    */
@@ -1912,16 +1919,16 @@ const Re = (s) => s ? s.virtualization : null, ks = (s = kt.defaultProps.min, t
     return this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
   }
   get min() {
-    return x(this.props.min !== void 0 ? this.props.min : mt.defaultProps.min);
+    return x(this.props.min !== void 0 ? this.props.min : pt.defaultProps.min);
   }
   get max() {
-    return x(this.props.max !== void 0 ? this.props.max : mt.defaultProps.max);
+    return x(this.props.max !== void 0 ? this.props.max : pt.defaultProps.max);
   }
   get bottomView() {
-    return D[this.props.bottomView !== void 0 ? this.props.bottomView : mt.defaultProps.bottomView];
+    return D[this.props.bottomView !== void 0 ? this.props.bottomView : pt.defaultProps.bottomView];
   }
   get topView() {
-    return D[this.props.topView !== void 0 ? this.props.topView : mt.defaultProps.topView];
+    return D[this.props.topView !== void 0 ? this.props.topView : pt.defaultProps.topView];
   }
   /**
    * @hidden
@@ -1942,16 +1949,16 @@ const Re = (s) => s ? s.virtualization : null, ks = (s = kt.defaultProps.min, t
    */
   render() {
     this.props._ref && this.props._ref(this);
-    const s = this.value !== null && this.oldValue !== null ? !bt(this.value, this.oldValue) : this.value !== this.oldValue, t = ge(
+    const s = this.value !== null && this.oldValue !== null ? !wt(this.value, this.oldValue) : this.value !== this.oldValue, t = ge(
       this.state.activeView,
-      D[this.props.bottomView !== void 0 ? this.props.bottomView : mt.defaultProps.bottomView],
-      D[this.props.topView !== void 0 ? this.props.topView : mt.defaultProps.topView]
+      D[this.props.bottomView !== void 0 ? this.props.bottomView : pt.defaultProps.bottomView],
+      D[this.props.topView !== void 0 ? this.props.topView : pt.defaultProps.topView]
     ), e = ks(this.min, this.max, this.value, this.value), i = e ? x(e) : null;
     this.focusedDate = x(K(
       s && e !== null ? e : this.state.focusedDate,
       this.min,
       this.max
-    )), this.intl = ut(this), this.bus.configure(this.bottomView, this.topView), this.service = this.bus.service(t, this.intl);
+    )), this.intl = ct(this), this.bus.configure(this.bottomView, this.topView), this.service = this.bus.service(t, this.intl);
     const { smoothScroll: a = Number.parseFloat(o.version) < 18 } = this.props, r = P(
       "k-widget k-calendar k-calendar-infinite",
       {
@@ -2027,9 +2034,9 @@ const Re = (s) => s ? s.virtualization : null, ks = (s = kt.defaultProps.min, t
     );
   }
 };
-let kt = mt;
-kt.displayName = "Calendar";
-kt.propTypes = {
+let bt = pt;
+bt.displayName = "Calendar";
+bt.propTypes = {
   className: n.string,
   defaultActiveView: n.oneOf(["month", "year", "decade", "century"]),
   defaultValue: n.instanceOf(Date),
@@ -2065,19 +2072,19 @@ kt.propTypes = {
     ) : null;
   }
 };
-kt.defaultProps = {
+bt.defaultProps = {
   disabled: !1,
-  min: dt,
-  max: pt,
+  min: ut,
+  max: dt,
   navigation: !0,
   defaultActiveView: "month",
   defaultValue: null,
   topView: "century",
   bottomView: "month"
 };
-const an = yt(), as = St(an, kt);
+const an = Dt(), as = yt(St(an, bt));
 as.displayName = "KendoReactCalendar";
-gt(kt);
+ft(bt);
 class rn {
   constructor() {
     this.symbols = "", this.partMap = [];
@@ -2126,7 +2133,7 @@ class pn {
     return this._value;
   }
   setValue(t) {
-    t ? ct(t, this._value) || (this._value = v(t), this.modifyExisting(!0)) : (this._value = x(/* @__PURE__ */ new Date()), this.modifyExisting(!1));
+    t ? ht(t, this._value) || (this._value = v(t), this.modifyExisting(!0)) : (this._value = x(/* @__PURE__ */ new Date()), this.modifyExisting(!1));
   }
   hasValue() {
     const t = (e, i) => e || i.type !== "literal" && i.type !== "dayperiod" && this.getExisting(i.pattern[0]);
@@ -2395,7 +2402,7 @@ const X = {
   return W(L, t).getTime() < e.getHours();
 }, Mn = "Please enter a valid value!", Z = class extends o.Component {
   constructor(s) {
-    super(s), this.kendoDate = null, this.currentFormat = "", this.paste = !1, this._element = null, this._wrapper = null, this._inputId = at(), this._lastSelectedSymbol = "", this.focus = () => {
+    super(s), this.kendoDate = null, this.currentFormat = "", this.paste = !1, this._element = null, this._wrapper = null, this._lastSelectedSymbol = "", this.focus = () => {
       this._element && this._element.focus();
     }, this.setValidity = () => {
       this.element && this.element.setCustomValidity && this.element.setCustomValidity(
@@ -2404,11 +2411,11 @@ const X = {
     }, this.updateOnPaste = (t) => {
       if (!this.element || !this.kendoDate)
         return;
-      const e = ut(this).parseDate(this.element.value, this.props.format) || this.value, i = this.value;
+      const e = ct(this).parseDate(this.element.value, this.props.format) || this.value, i = this.value;
       this.kendoDate.setValue(e), this.triggerChange(t, i);
     }, this.spinnersMouseDown = (t) => {
       t.preventDefault();
-      const e = lt(document);
+      const e = ot(document);
       this.element && e !== this.element && this.element.focus({ preventScroll: !0 });
     }, this.handlePaste = () => {
       this.paste = !0;
@@ -2434,9 +2441,9 @@ const X = {
     }, this.elementClick = (t) => {
       this.setSelection(this.selectionByIndex(this.selection.start));
     }, this.nativeWheel = (t) => {
-      lt(document) === this.element && t.preventDefault();
+      ot(document) === this.element && t.preventDefault();
     }, this.wheel = (t) => {
-      lt(document) === this.element && (t.nativeEvent.deltaY < 0 && this.increasePart(t), t.nativeEvent.deltaY > 0 && this.decreasePart(t));
+      ot(document) === this.element && (t.nativeEvent.deltaY < 0 && this.increasePart(t), t.nativeEvent.deltaY > 0 && this.decreasePart(t));
     }, this.increasePart = (t) => {
       this.modifyDateSegmentValue(1, t);
     }, this.decreasePart = (t) => {
@@ -2469,6 +2476,9 @@ const X = {
       focused: !1
     };
   }
+  get _inputId() {
+    return this.props.id + "-accessibility-id";
+  }
   /**
    * @hidden
    */
@@ -2512,9 +2522,9 @@ const X = {
           "k-dateinput",
           "k-input",
           {
-            [`k-input-${ft.sizeMap[s] || s}`]: s,
+            [`k-input-${mt.sizeMap[s] || s}`]: s,
             [`k-input-${t}`]: t,
-            [`k-rounded-${ft.roundedMap[e] || e}`]: e,
+            [`k-rounded-${mt.roundedMap[e] || e}`]: e,
             "k-invalid": !m,
             "k-required": this.required,
             "k-disabled": this.props.disabled
@@ -2622,7 +2632,7 @@ const X = {
    * @hidden
    */
   get text() {
-    const s = { ...Dt.defaultProps, ...this.props }, {
+    const s = { ...kt.defaultProps, ...this.props }, {
       formatPlaceholder: t = Z.defaultProps.formatPlaceholder,
       format: e = Z.defaultProps.format,
       value: i,
@@ -2701,7 +2711,7 @@ const X = {
    * @hidden
    */
   intl() {
-    return ut(this);
+    return ct(this);
   }
   /*  end handlers */
   get selection() {
@@ -2710,12 +2720,12 @@ const X = {
   }
   setSelection(s) {
     this._lastSelectedSymbol = this.currentFormat[s.start], window.requestAnimationFrame(() => {
-      const t = lt(document);
+      const t = ot(document);
       this.element && t === this.element && !this.props.disableSelection && this.element.setSelectionRange(s.start, s.end);
     });
   }
   triggerChange(s, t) {
-    this.valueDuringOnChange = this.value, this.forceUpdate(), this.props.onChange && !ct(t, this.value) && this.props.onChange.call(void 0, {
+    this.valueDuringOnChange = this.value, this.forceUpdate(), this.props.onChange && !ht(t, this.value) && this.props.onChange.call(void 0, {
       syntheticEvent: s,
       nativeEvent: s.nativeEvent,
       value: this.value,
@@ -2853,8 +2863,8 @@ Ct.defaultProps = {
   // defaultValue: null as Date | null,
   spinners: !1,
   disabled: !1,
-  max: v(pt),
-  min: v(dt),
+  max: v(dt),
+  min: v(ut),
   minTime: v(Nt),
   maxTime: v(xt),
   required: !1,
@@ -2864,10 +2874,10 @@ Ct.defaultProps = {
   // the rest of the properties are undefined by default
   ariaHasPopup: "grid"
 };
-const Tn = yt(), Dt = St(Tn, Ct);
-Dt.displayName = "KendoReactDateInput";
-gt(Ct);
-rt(Ct);
+const Tn = Dt(), kt = yt(St(Tn, Ct));
+kt.displayName = "KendoReactDateInput";
+ft(Ct);
+at(Ct);
 const En = N, Vn = o.forwardRef((s, t) => {
   const { _ref: e } = s, i = o.useRef(null);
   o.useImperativeHandle(t, () => i.current), o.useImperativeHandle(e, () => i.current);
@@ -2961,7 +2971,7 @@ const En = N, Vn = o.forwardRef((s, t) => {
   )));
 }, xe = 768, B = class extends o.Component {
   constructor(s) {
-    super(s), this._popupId = at(), this._element = null, this._dateInput = o.createRef(), this._calendar = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
+    super(s), this._element = null, this._dateInput = o.createRef(), this._calendar = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
       this.dateInput && this.dateInput.focus();
     }, this.setCalendarRef = (t) => {
       this._calendar = t;
@@ -3042,6 +3052,9 @@ const En = N, Vn = o.forwardRef((s, t) => {
       focused: !1
     };
   }
+  get _popupId() {
+    return this.props.id + "-popup-id";
+  }
   get document() {
     if (J)
       return this.element && this.element.ownerDocument || document;
@@ -3216,15 +3229,15 @@ const En = N, Vn = o.forwardRef((s, t) => {
       ({ onFocus: tt, onBlur: j }) => /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
         "span",
         {
-          ref: (vt) => {
-            this._element = vt;
+          ref: (gt) => {
+            this._element = gt;
           },
           className: P(
             "k-input",
             "k-datepicker",
             {
-              [`k-input-${ft.sizeMap[s] || s}`]: s,
-              [`k-rounded-${ft.roundedMap[t] || t}`]: t,
+              [`k-input-${mt.sizeMap[s] || s}`]: s,
+              [`k-rounded-${mt.roundedMap[t] || t}`]: t,
               [`k-input-${e}`]: e,
               ["k-invalid"]: !R,
               ["k-required"]: this.required,
@@ -3368,15 +3381,15 @@ Xt.propTypes = {
 Xt.defaultProps = {
   defaultShow: !1,
   defaultValue: null,
-  dateInput: Dt,
+  dateInput: kt,
   calendar: as,
   toggleButton: En,
   popup: be,
   pickerWrap: Vn,
   disabled: !1,
   format: "d",
-  max: pt,
-  min: dt,
+  max: dt,
+  min: ut,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
@@ -3386,9 +3399,9 @@ Xt.defaultProps = {
   rounded: "medium",
   fillMode: "solid"
 };
-const Pn = yt(), Rn = St(Pn, Xt);
+const Pn = Dt(), Rn = yt(St(Pn, Xt));
 Rn.displayName = "KendoReactDatePicker";
-rt(Xt);
+at(Xt);
 const Ne = (s, t) => {
   const e = v(s);
   return e.setHours(t), e;
@@ -3517,7 +3530,7 @@ class Wn {
     return this.addLast(r), t && this.addMissing(r, t), r;
   }
   isRangeChanged(t, e) {
-    return !this.min || !this.max ? !1 : !ct(this.min, t) || !ct(this.max, e);
+    return !this.min || !this.max ? !1 : !ht(this.min, t) || !ht(this.max, e);
   }
   limitRange(t, e, i) {
     return this.boundRange ? [zn(t, i), qn(e, i)] : [t, e];
@@ -3594,7 +3607,7 @@ class jn {
     return this.addLast(r), t && this.addMissing(r, t), r;
   }
   isRangeChanged(t, e) {
-    return this.min !== null && this.max !== null && (!ct(this.min, t) || !ct(this.max, e));
+    return this.min !== null && this.max !== null && (!ht(this.min, t) || !ht(this.max, e));
   }
   limitRange(t, e, i) {
     return [Yn(t, i), Kn(e, i)];
@@ -3671,7 +3684,7 @@ class Qn {
     return this.addLast(r), t && this.addMissing(r, t), r;
   }
   isRangeChanged(t, e) {
-    return this.min !== null && this.max !== null && (!ct(this.min, t) || !ct(this.max, e));
+    return this.min !== null && this.max !== null && (!ht(this.min, t) || !ht(this.max, e));
   }
   limitRange(t, e, i) {
     return [Xn(t, i), Jn(e, i)];
@@ -3775,7 +3788,7 @@ const ta = 2, Ms = 0.05, ea = 100, sa = 0, Ts = 9, ia = {
     }, this.handleMouseOver = () => {
       if (!this._element)
         return;
-      const t = lt(document);
+      const t = ot(document);
       document && t !== this._element && this.props.show && this._element.focus({ preventScroll: !0 });
     }, this.handleKeyDown = (t) => {
       if (!this.service)
@@ -3835,7 +3848,7 @@ const ta = 2, Ms = 0.05, ea = 100, sa = 0, Ts = 9, ia = {
   render() {
     if (!this.props.part.type || !es[this.props.part.type])
       return;
-    this.calculateHeights(), this.intl = ut(this), this.service = new es[this.props.part.type](this.intl), this.configureServices();
+    this.calculateHeights(), this.intl = ct(this), this.service = new es[this.props.part.type](this.intl), this.configureServices();
     const s = this.service.data(this.props.value), t = "translateY(" + this.topOffset + "px)", e = this.service.total(this.props.value), i = /* @__PURE__ */ o.createElement(
       "ul",
       {
@@ -3925,8 +3938,8 @@ Ce.defaultProps = {
   step: 1,
   smoothScroll: !0
 };
-gt(Ce);
-const Fe = new RegExp(`${X.hour}|${X.minute}|${X.second}|${X.dayperiod}|literal`), wt = class extends o.Component {
+ft(Ce);
+const Fe = new RegExp(`${X.hour}|${X.minute}|${X.second}|${X.dayperiod}|literal`), vt = class extends o.Component {
   constructor(s) {
     super(s), this._element = null, this._nowButton = null, this.dateFormatParts = [], this.timeLists = [], this.focus = (t) => {
       Promise.resolve().then(() => {
@@ -3971,7 +3984,7 @@ const Fe = new RegExp(`${X.hour}|${X.minute}|${X.second}|${X.dayperiod}|literal`
       const { onChange: e } = this.props;
       e && e.call(void 0, t);
     }, this.snapTime = ys(
-      Ds(this.props.steps, this.props.min || wt.defaultProps.min)
+      Ds(this.props.steps, this.props.min || vt.defaultProps.min)
     ), this.state = {
       activeListIndex: -1
     }, this.hasActiveButton = this.hasActiveButton.bind(this);
@@ -3990,19 +4003,19 @@ const Fe = new RegExp(`${X.hour}|${X.minute}|${X.second}|${X.dayperiod}|literal`
     );
   }
   get intl() {
-    return ut(this);
+    return ct(this);
   }
   get min() {
-    return this.snapTime(this.props.min || wt.defaultProps.min);
+    return this.snapTime(this.props.min || vt.defaultProps.min);
   }
   get max() {
-    return this.snapTime(this.props.max || wt.defaultProps.max);
+    return this.snapTime(this.props.max || vt.defaultProps.max);
   }
   get steps() {
-    return this.props.steps || wt.defaultProps.steps;
+    return this.props.steps || vt.defaultProps.steps;
   }
   get boundRange() {
-    return this.props.boundRange !== void 0 ? this.props.boundRange : wt.defaultProps.boundRange;
+    return this.props.boundRange !== void 0 ? this.props.boundRange : vt.defaultProps.boundRange;
   }
   /**
    * @hidden
@@ -4027,7 +4040,7 @@ const Fe = new RegExp(`${X.hour}|${X.minute}|${X.second}|${X.dayperiod}|literal`
       mobileMode: r,
       show: l
     } = this.props;
-    this.snapTime = ys(Ds(this.steps, this.min)), this.dateFormatParts = this.intl.splitDateFormat(s || wt.defaultProps.format).filter(this.timeFormatFilter);
+    this.snapTime = ys(Ds(this.steps, this.min)), this.dateFormatParts = this.intl.splitDateFormat(s || vt.defaultProps.format).filter(this.timeFormatFilter);
     const c = P(
       {
         "k-disabled": a,
@@ -4111,7 +4124,7 @@ const Fe = new RegExp(`${X.hour}|${X.minute}|${X.second}|${X.dayperiod}|literal`
     clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => s());
   }
   hasActiveButton() {
-    const s = lt(document);
+    const s = ot(document);
     return this._nowButton && s === this._nowButton.element;
   }
   hasSteps() {
@@ -4119,7 +4132,7 @@ const Fe = new RegExp(`${X.hour}|${X.minute}|${X.second}|${X.dayperiod}|literal`
     return s.length !== s.reduce((t, e) => t + this.steps[e], 0);
   }
 };
-let _t = wt;
+let _t = vt;
 _t.propTypes = {
   cancelButton: n.bool,
   disabled: n.bool,
@@ -4167,8 +4180,8 @@ _t.defaultProps = {
   steps: {},
   boundRange: !1
 };
-gt(_t);
-rt(_t);
+ft(_t);
+at(_t);
 const ss = class extends o.Component {
   constructor(s) {
     super(s), this._element = null, this._cancelButton = null, this._acceptButton = null, this.timePart = null, this.focusActiveList = () => {
@@ -4237,7 +4250,7 @@ const ss = class extends o.Component {
     return s !== null ? v(s) : null;
   }
   get intl() {
-    return ut(this);
+    return ct(this);
   }
   get current() {
     return this.state.current !== null ? v(this.state.current) : null;
@@ -4336,7 +4349,7 @@ const ss = class extends o.Component {
   hasActiveButton() {
     if (!this._acceptButton || !this._acceptButton.element)
       return !1;
-    const s = lt(document);
+    const s = ot(document);
     return this._acceptButton && s === this._acceptButton.element || this._cancelButton && s === this._cancelButton.element;
   }
 };
@@ -4388,11 +4401,11 @@ Jt.defaultProps = {
   boundRange: !1,
   footer: !0
 };
-gt(Jt);
-rt(Jt);
+ft(Jt);
+at(Jt);
 const G = class extends o.Component {
   constructor(s) {
-    super(s), this._popupId = at(), this._element = null, this._dateInput = o.createRef(), this._timeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
+    super(s), this._element = null, this._dateInput = o.createRef(), this._timeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
       this.dateInput && this.dateInput.focus();
     }, this.renderTimeSelector = () => {
       const { smoothScroll: t, cancelButton: e, nowButton: i, disabled: a, format: r, steps: l } = this.props;
@@ -4497,6 +4510,9 @@ const G = class extends o.Component {
       candidate: null
     }, this.normalizeTime = this.normalizeTime.bind(this), this.setShow = this.setShow.bind(this), this.mergeTime = this.mergeTime.bind(this);
   }
+  get _popupId() {
+    return this.props.id + "-popup-id";
+  }
   get document() {
     if (J)
       return this.element && this.element.ownerDocument || document;
@@ -4665,6 +4681,7 @@ const G = class extends o.Component {
       ({ onFocus: A, onBlur: S }) => /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
         "div",
         {
+          id: this.props.id,
           ref: (O) => {
             this._element = O;
           },
@@ -4672,8 +4689,8 @@ const G = class extends o.Component {
             "k-input",
             "k-timepicker",
             {
-              [`k-input-${ft.sizeMap[s] || s}`]: s,
-              [`k-rounded-${ft.roundedMap[t] || t}`]: t,
+              [`k-input-${mt.sizeMap[s] || s}`]: s,
+              [`k-rounded-${mt.roundedMap[t] || t}`]: t,
               [`k-input-${e}`]: e,
               ["k-invalid"]: !E,
               ["k-required"]: this.required,
@@ -4828,14 +4845,14 @@ Qt.defaultProps = {
   steps: {},
   required: !1,
   validityStyles: !0,
-  dateInput: Dt,
+  dateInput: kt,
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
 };
-const na = yt(), aa = St(na, Qt);
+const na = Dt(), aa = yt(St(na, Qt));
 aa.displayName = "KendoReactTimePicker";
-rt(Qt);
+at(Qt);
 const Es = 2, is = class extends o.Component {
   constructor(s) {
     super(s), this._element = null, this.isActive = !1, this.focusActiveDate = () => {
@@ -4936,12 +4953,12 @@ Bt.defaultProps = {
   views: Es,
   take: Es,
   allowReverse: !0,
-  min: dt,
-  max: pt
+  min: ut,
+  max: dt
 };
-const Le = (s = ht.defaultProps.min, t = ht.defaultProps.max, e) => e instanceof Date && !Array.isArray(e) && F(x(e), s, t) ? x(e) : null, Vs = (s = ht.defaultProps.min, t = ht.defaultProps.max, e) => Array.isArray(e) ? e.filter((i) => F(i, s, t)).map((i) => x(i)) : null, Os = (s) => typeof s == "object" && !(s instanceof Date) && s !== null && !Array.isArray(s) ? s : z, Ps = (s, t, e) => s || t && t[0] || e && e.start, ra = (s, t) => s.start === null && t === null ? "start" : s.end === null ? "end" : "start", Et = class extends o.Component {
+const Le = (s = lt.defaultProps.min, t = lt.defaultProps.max, e) => e instanceof Date && !Array.isArray(e) && F(x(e), s, t) ? x(e) : null, Vs = (s = lt.defaultProps.min, t = lt.defaultProps.max, e) => Array.isArray(e) ? e.filter((i) => F(i, s, t)).map((i) => x(i)) : null, Os = (s) => typeof s == "object" && !(s instanceof Date) && s !== null && !Array.isArray(s) ? s : z, Ps = (s, t, e) => s || t && t[0] || e && e.start, ra = (s, t) => s.start === null && t === null ? "start" : s.end === null ? "end" : "start", Et = class extends o.Component {
   constructor(s) {
-    super(s), this.dates = [], this.selectedDate = null, this.selectedMultiple = null, this.selectedRange = z, this._focusedDate = /* @__PURE__ */ new Date(), this.cellUID = at(), this.activeRangeEnd = "start", this._element = null, this.intl = null, this.localization = null, this.service = null, this.wrapperID = at(), this.calendarViewList = null, this.isActive = !1, this.calculateFocusFromValue = !0, this.focus = () => {
+    super(s), this.dates = [], this.selectedDate = null, this.selectedMultiple = null, this.selectedRange = z, this._focusedDate = /* @__PURE__ */ new Date(), this.cellUID = this.props.id + "-cell-uid", this.activeRangeEnd = "start", this._element = null, this.intl = null, this.localization = null, this.service = null, this.calendarViewList = null, this.isActive = !1, this.calculateFocusFromValue = !0, this.focus = () => {
       this._element && this._element.focus();
     }, this.clampRange = (h) => ({ start: h, end: null }), this.rangeWithFocused = (h, u) => ({
       start: h.start,
@@ -5016,7 +5033,7 @@ const Le = (s = ht.defaultProps.min, t = ht.defaultProps.max, e) => e instanceof
           this.min,
           this.max
         );
-        if (bt(this.focusedDate, d))
+        if (wt(this.focusedDate, d))
           return;
         this.dates && this.service && !this.service.isInArray(d, this.dates) && this.setState({ navigateDate: d }), this.calculateFocusFromValue = !1, this.setState({ focusedDate: d });
       }
@@ -5044,7 +5061,7 @@ const Le = (s = ht.defaultProps.min, t = ht.defaultProps.max, e) => e instanceof
           if (Array.isArray(this.selectedMultiple)) {
             let f = this.selectedMultiple.slice(), y = -1;
             f.forEach((I, M) => {
-              bt(I, h.value) && (y = M);
+              wt(I, h.value) && (y = M);
             }), y !== -1 ? f.splice(y, 1) : f.push(v(h.value)), p = f.slice();
           } else
             this.selectedDate ? p = [v(this.selectedDate), v(h.value)] : p = [v(h.value)];
@@ -5086,6 +5103,9 @@ const Le = (s = ht.defaultProps.min, t = ht.defaultProps.max, e) => e instanceof
       navigateDate: c
     }, this.activeRangeEnd = ra(a, e), this.bus = new zs(this.handleViewChange), this.navigation = new qs(this.bus), this.calculateFocusFromValue = !1, this.lastView = l, this.lastViewsCount = this.props.views || Bt.defaultProps.views;
   }
+  get wrapperID() {
+    return this.props.id + "-wrapper-id";
+  }
   get isRtl() {
     return this.props.dir === "rtl";
   }
@@ -5143,7 +5163,7 @@ const Le = (s = ht.defaultProps.min, t = ht.defaultProps.max, e) => e instanceof
    * @hidden
    */
   render() {
-    this.props._ref && this.props._ref(this), this.intl = ut(this), this.localization = q(this), this.bus.configure(this.bottomView, this.topView);
+    this.props._ref && this.props._ref(this), this.intl = ct(this), this.localization = q(this), this.bus.configure(this.bottomView, this.topView);
     const s = ge(this.state.activeView, this.bottomView, this.topView);
     this.service = this.bus.service(s, this.intl), this.selectedDate = Le(this.min, this.max, this.value), this.selectedMultiple = Vs(this.min, this.max, this.value), this.selectedRange = Os(this.value);
     const t = Ps(this.selectedDate, this.selectedMultiple, this.selectedRange);
@@ -5269,20 +5289,20 @@ const Le = (s = ht.defaultProps.min, t = ht.defaultProps.max, e) => e instanceof
     return !!t && fe(t) <= s && s <= Ot(t);
   }
 };
-let ht = Et;
-ht.displayName = "MultiViewCalendar";
-ht.propTypes = {
+let lt = Et;
+lt.displayName = "MultiViewCalendar";
+lt.propTypes = {
   activeRangeEnd: n.oneOf(["start", "end"]),
   allowReverse: n.bool,
   bottomView: n.oneOf(["month", "year", "decade", "century"]),
   className: n.string,
   defaultActiveView: n.oneOf(["month", "year", "decade", "century"]),
   defaultValue: n.oneOfType([
-    ot(n.instanceOf(Date)),
+    rt(n.instanceOf(Date)),
     n.arrayOf(n.instanceOf(Date)),
     n.shape({
-      start: ot(n.instanceOf(Date)),
-      end: ot(n.instanceOf(Date))
+      start: rt(n.instanceOf(Date)),
+      end: rt(n.instanceOf(Date))
     })
   ]),
   disabled: n.bool,
@@ -5299,11 +5319,11 @@ ht.propTypes = {
   tabIndex: n.number,
   topView: n.oneOf(["month", "year", "decade", "century"]),
   value: n.oneOfType([
-    ot(n.instanceOf(Date)),
+    rt(n.instanceOf(Date)),
     n.arrayOf(n.instanceOf(Date)),
     n.shape({
-      start: ot(n.instanceOf(Date).isRequired),
-      end: ot(n.instanceOf(Date).isRequired)
+      start: rt(n.instanceOf(Date).isRequired),
+      end: rt(n.instanceOf(Date).isRequired)
     })
   ]),
   views: (s, t, e) => {
@@ -5315,10 +5335,10 @@ ht.propTypes = {
   weekNumber: n.bool,
   dir: n.string
 };
-ht.defaultProps = {
+lt.defaultProps = {
   disabled: !1,
-  min: dt,
-  max: pt,
+  min: ut,
+  max: dt,
   navigation: !0,
   defaultActiveView: "month",
   defaultValue: null,
@@ -5328,13 +5348,13 @@ ht.defaultProps = {
   views: 2,
   allowReverse: !1
 };
-const oa = yt(), Qs = St(oa, ht);
+const oa = Dt(), Qs = yt(St(oa, lt));
 Qs.displayName = "KendoReactMultiViewCalendar";
-gt(ht);
-rt(ht);
+ft(lt);
+at(lt);
 const zt = class extends o.Component {
   constructor(s) {
-    super(s), this._element = null, this._calendar = null, this._startDateInput = o.createRef(), this._endDateInput = o.createRef(), this._popupId = at(), this._startInputId = at(), this._endInputId = at(), this.shouldFocusDateInput = !1, this.shouldFocusCalendar = !1, this.focus = () => {
+    super(s), this._element = null, this._calendar = null, this._startDateInput = o.createRef(), this._endDateInput = o.createRef(), this.shouldFocusDateInput = !1, this.shouldFocusCalendar = !1, this.focus = () => {
       this.startDateInput && this.startDateInput.focus();
     }, this.setCalendarRef = (t) => {
       this._calendar = t;
@@ -5439,7 +5459,7 @@ const zt = class extends o.Component {
       const e = this.extractRangeFromValue(t);
       this.handleChange(e, t);
     }, this.handleKeyDown = (t) => {
-      const { keyCode: e, altKey: i } = t, a = lt(document);
+      const { keyCode: e, altKey: i } = t, a = ot(document);
       e === C.esc ? (t.preventDefault(), this.shouldFocusDateInput = !0, this.setShow(!1)) : i && e === C.down ? (t.preventDefault(), this.shouldFocusCalendar = !0, this.setShow(!0)) : e === C.tab && this.show && this._calendar && this._calendar.element && this.endDateInput && this.endDateInput.element && document && a === this.endDateInput.element && (t.preventDefault(), this.focusCalendarElement());
     }, this.handleChange = (t, e) => {
       this.setState({ value: t }), this.valueDuringOnChange = t;
@@ -5461,6 +5481,15 @@ const zt = class extends o.Component {
       currentValue: z
     }, this.nextTick = this.nextTick.bind(this), this.setShow = this.setShow.bind(this), this.focusCalendarElement = this.focusCalendarElement.bind(this), this.focusDateInputElement = this.focusDateInputElement.bind(this);
   }
+  get _popupId() {
+    return this.props.id + "-popup-id";
+  }
+  get _startInputId() {
+    return this.props.id + "-start-input-id";
+  }
+  get _endInputId() {
+    return this.props.id + "-end-input-id";
+  }
   /**
    * Gets the wrapping element of the DateRangePicker.
    */
@@ -5606,7 +5635,7 @@ const zt = class extends o.Component {
         dir: this.props.dir
       },
       this.props.startDateInput ? /* @__PURE__ */ o.createElement(this.props.startDateInput, { ...h }) : /* @__PURE__ */ o.createElement(
-        Dt,
+        kt,
         {
           ...h,
           ref: this._startDateInput,
@@ -5617,7 +5646,7 @@ const zt = class extends o.Component {
       ),
       (this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ? d : c,
       this.props.endDateInput ? /* @__PURE__ */ o.createElement(this.props.endDateInput, { ...u }) : /* @__PURE__ */ o.createElement(
-        Dt,
+        kt,
         {
           ...u,
           ref: this._endDateInput,
@@ -5632,7 +5661,7 @@ const zt = class extends o.Component {
   focusDateInputElement() {
     if (!document || !this.startDateInput || !this.startDateInput.element || !this.endDateInput || !this.endDateInput.element)
       return;
-    const s = lt(document);
+    const s = ot(document);
     (this.value.start === null || this.value.end !== null) && s !== this.endDateInput.element ? this.startDateInput.element.focus({ preventScroll: !0 }) : s !== this.startDateInput.element && this.endDateInput.element.focus({ preventScroll: !0 });
   }
   nextTick(s) {
@@ -5659,8 +5688,8 @@ te.propTypes = {
   className: n.string,
   defaultShow: n.bool,
   defaultValue: n.shape({
-    start: ot(n.instanceOf(Date).isRequired),
-    end: ot(n.instanceOf(Date).isRequired)
+    start: rt(n.instanceOf(Date).isRequired),
+    end: rt(n.instanceOf(Date).isRequired)
   }),
   disabled: n.bool,
   endDateInputSettings: n.shape(Ct.propTypes),
@@ -5701,8 +5730,8 @@ te.propTypes = {
   tabIndex: n.number,
   dir: n.string,
   value: n.shape({
-    start: ot(n.instanceOf(Date).isRequired),
-    end: ot(n.instanceOf(Date).isRequired)
+    start: rt(n.instanceOf(Date).isRequired),
+    end: rt(n.instanceOf(Date).isRequired)
   })
 };
 te.defaultProps = {
@@ -5711,13 +5740,13 @@ te.defaultProps = {
   defaultValue: z,
   disabled: !1,
   format: "d",
-  max: pt,
-  min: dt,
+  max: dt,
+  min: ut,
   swapButton: !1
 };
-const la = yt(), ha = St(la, te);
+const la = Dt(), ha = yt(St(la, te));
 ha.displayName = "KendoReactDateRangePicker";
-rt(te);
+at(te);
 class ms extends o.Component {
   constructor(t) {
     super(t), this._calendar = null, this._timePart = null, this._cancelButton = null, this._acceptButton = null, this._calendarWrap = null, this.shouldFocusPart = !1, this.focus = (e) => {
@@ -5927,12 +5956,12 @@ class ms extends o.Component {
     return this.props.maxTime !== void 0 ? this.props.maxTime : this.normalizeRange(this.props.max, this.state.dateValue);
   }
   normalizeRange(t, e) {
-    return bt(t, e || U()) ? t : null;
+    return wt(t, e || U()) ? t : null;
   }
   hasActiveButton() {
     if (!this._acceptButton)
       return !1;
-    const t = lt(document);
+    const t = ot(document);
     return this._acceptButton && t === this._acceptButton.element || this._cancelButton && t === this._cancelButton.element;
   }
   mergeTime(t, e) {
@@ -5945,10 +5974,10 @@ class ms extends o.Component {
 ms.defaultProps = {
   footerActions: !0
 };
-rt(ms);
+at(ms);
 const et = class extends o.Component {
   constructor(s) {
-    super(s), this._popupId = at(), this._element = null, this._dateInput = o.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
+    super(s), this._element = null, this._dateInput = o.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
       const t = this.dateInputElement();
       t && t.focus();
     }, this.renderPicker = () => {
@@ -6041,6 +6070,9 @@ const et = class extends o.Component {
       focused: !1
     };
   }
+  get _popupId() {
+    return this.props.id + "-popup-id";
+  }
   get document() {
     if (J)
       return this.element && this.element.ownerDocument || document;
@@ -6212,8 +6244,8 @@ const et = class extends o.Component {
             "k-input",
             "k-datetimepicker",
             {
-              [`k-input-${ft.sizeMap[s] || s}`]: s,
-              [`k-rounded-${ft.roundedMap[t] || t}`]: t,
+              [`k-input-${mt.sizeMap[s] || s}`]: s,
+              [`k-rounded-${mt.roundedMap[t] || t}`]: t,
               [`k-input-${e}`]: e,
               ["k-invalid"]: !R,
               ["k-required"]: this.required,
@@ -6373,22 +6405,22 @@ ee.defaultProps = {
   disabled: !1,
   format: "g",
   // general date and time pattern (short time): "M/d/y h:mm a" for en.
-  max: pt,
-  min: dt,
+  max: dt,
+  min: ut,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   required: !1,
   validityStyles: !0,
   cancelButton: !0,
-  dateInput: Dt,
+  dateInput: kt,
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
 };
-const ca = yt(), ua = St(ca, ee);
+const ca = Dt(), ua = yt(St(ca, ee));
 ua.displayName = "KendoReactDateTimePicker";
-rt(ee);
+at(ee);
 export {
   b as Action,
   zs as BusViewService,
@@ -6399,10 +6431,10 @@ export {
   an as CalendarPropsContext,
   D as CalendarViewEnum,
   xi as CalendarWeekCell,
-  kt as CalendarWithoutContext,
+  bt as CalendarWithoutContext,
   Ei as CenturyViewService,
   ji as DOMService,
-  Dt as DateInput,
+  kt as DateInput,
   Tn as DateInputPropsContext,
   Ct as DateInputWithoutContext,
   Rn as DatePicker,
@@ -6420,15 +6452,15 @@ export {
   Zt as Header,
   Bt as HorizontalViewList,
   Wn as HoursService,
-  pt as MAX_DATE,
+  dt as MAX_DATE,
   xt as MAX_TIME,
-  dt as MIN_DATE,
+  ut as MIN_DATE,
   Nt as MIN_TIME,
   jn as MinutesService,
   Ai as MonthViewService,
   Qs as MultiViewCalendar,
   oa as MultiViewCalendarPropsContext,
-  ht as MultiViewCalendarWithoutContext,
+  lt as MultiViewCalendarWithoutContext,
   qs as NavigationService,
   Vn as PickerWrap,
   Ji as ScrollSyncService,