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

package/calendar/services/DOMService.mjs

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

package/dateinput/DateInput.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 _=require("react"),t=require("prop-types"),g=require("@progress/kendo-date-math"),F=require("@progress/kendo-react-buttons"),I=require("@progress/kendo-svg-icons"),v=require("@progress/kendo-react-intl"),N=require("./models/kendo-date.js"),o=require("@progress/kendo-react-common"),A=require("@progress/kendo-react-labels"),L=require("../package-metadata.js"),y=require("./utils.js"),b=require("../utils.js"),h=require("../messages/index.js"),R=require("../timepicker/utils.js"),z=require("../common/ClearButton.js");function j(f){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const e in f)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(f,e);Object.defineProperty(s,e,i.get?i:{enumerable:!0,get:()=>f[e]})}}return s.default=f,Object.freeze(s)}const c=j(_),K="Please enter a valid value!",l=class l extends c.Component{constructor(s){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(this.validity.valid?"":this.props.validationMessage||l.defaultProps.validationMessage)},this.updateOnPaste=e=>{if(!this.element||!this.kendoDate)return;const i=v.provideIntlService(this).parseDate(this.element.value,this.props.format)||this.value,a=this.value;this.kendoDate.setValue(i),this.triggerChange(e,a)},this.spinnersMouseDown=e=>{e.preventDefault();const i=o.getActiveElement(document);this.element&&i!==this.element&&this.element.focus({preventScroll:!0})},this.handlePaste=()=>{this.paste=!0},this.handleClick=e=>{this.props.onChange&&this.props.onChange(e)},this.elementChange=e=>{if(!this.element||!this.kendoDate)return;if(this.paste){this.updateOnPaste(e),this.paste=!1;return}const{text:i,format:a}=this.kendoDate.getTextAndFormat();this.currentFormat=a;const r=this.value,n=y.approximateStringMatching(i,this.currentFormat,this.element.value,this.selection.start),u=n.length===1&&n[0][1]==="_";if(!u)for(let d=0;d<n.length;d++)this.kendoDate.parsePart(n[d][0],n[d][1]);n.length&&n[0][0]!=="_"&&this.setSelection(this.selectionBySymbol(n[0][0])),u&&this.switchDateSegment(1),this.triggerChange(e,r)},this.elementClick=e=>{this.setSelection(this.selectionByIndex(this.selection.start))},this.nativeWheel=e=>{o.getActiveElement(document)===this.element&&e.preventDefault()},this.wheel=e=>{o.getActiveElement(document)===this.element&&(e.nativeEvent.deltaY<0&&this.increasePart(e),e.nativeEvent.deltaY>0&&this.decreasePart(e))},this.increasePart=e=>{this.modifyDateSegmentValue(1,e)},this.decreasePart=e=>{this.modifyDateSegmentValue(-1,e)},this.elementKeyDown=e=>{if(!e.altKey){switch(e.keyCode){case 37:this.switchDateSegment(-1);break;case 38:this.modifyDateSegmentValue(1,e);break;case 39:this.switchDateSegment(1);break;case 40:this.modifyDateSegmentValue(-1,e);break;default:return}e.preventDefault()}},this.elementOnFocus=e=>{this.wrapper&&this.wrapper.classList.add("k-focus"),this.setState({focused:!0})},this.elementOnBlur=e=>{this.wrapper&&this.wrapper.classList.remove("k-focus"),this.setState({focused:!1})},o.validatePackage(L.packageMetadata),this.state={focused:!1}}get _inputId(){return this.props.id+"-accessibility-id"}componentDidMount(){this.setValidity(),this.wrapper&&this.wrapper.addEventListener("wheel",this.nativeWheel,{passive:!1})}componentDidUpdate(s,e){this._lastSelectedSymbol&&e.focused===this.state.focused?this.setSelection(this.selectionBySymbol(this._lastSelectedSymbol)):this.props.placeholder!==void 0&&this.selection.start===this.selection.end&&this.setSelection({start:0,end:this.currentFormat.length}),this.setValidity()}componentWillUnmount(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.nativeWheel)}render(){const{size:s=l.defaultProps.size,fillMode:e=l.defaultProps.fillMode,rounded:i=l.defaultProps.rounded,autoFocus:a=l.defaultProps.autoFocus,unstyled:r}=this.props,n=r&&r.uDateInput;this.props._ref&&(this.props._ref.current=this);const u=v.provideLocalizationService(this),d={...l.defaultProps,...this.props},{name:E,label:D,id:x,disabled:V}=d,p=this.text,M=p===this.props.placeholder?"":p,T=p===this.props.placeholder?p:void 0,O=x||this._inputId,S=!this.validityStyles||this.validity.valid,P=c.createElement(o.AsyncFocusBlur,{onFocus:this.elementOnFocus,onBlur:this.elementOnBlur},({onFocus:q,onBlur:B})=>c.createElement("span",{ref:k=>{this._wrapper=k},style:D?void 0:{width:this.props.width},dir:this.props.dir,className:o.classNames(o.uDateInput.wrapper({c:n,size:s,fillMode:e,rounded:i,disabled:V,required:this.required,invalid:!S}),this.props.className),onFocus:q,onBlur:B},c.createElement("input",{role:this.props.ariaRole||"textbox",readOnly:this.props.readonly,tabIndex:this.props.tabIndex,disabled:this.props.disabled,title:this.props.title!==void 0?this.props.title:p,type:"text",spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:a,className:o.classNames(o.uDateInput.input({c:n})),id:O,"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-haspopup":this.props.ariaHasPopup,"aria-disabled":this.props.disabled,"aria-expanded":this.props.ariaExpanded,"aria-controls":this.props.ariaControls,"aria-required":this.props.required,"aria-invalid":!S,onWheel:this.wheel,onClick:this.elementClick,onInput:this.elementChange,onPaste:this.handlePaste,onKeyDown:this.elementKeyDown,onChange:o.noop,value:M,placeholder:T,name:E,ref:k=>this._element=k}),this.props.children,this.props.clearButton&&this.props.value&&c.createElement(z,{onClick:this.handleClick,key:"clearbutton"}),this.props.spinners&&c.createElement("span",{className:o.classNames(o.uDateInput.inputSpinner({c:n})),onMouseDown:this.spinnersMouseDown},c.createElement(F.Button,{tabIndex:-1,type:"button",rounded:null,className:o.classNames(o.uDateInput.spinnerIncrease({c:n})),icon:"caret-alt-up",svgIcon:I.caretAltUpIcon,"aria-label":u.toLanguageString(h.increaseValue,h.messages[h.increaseValue]),title:u.toLanguageString(h.increaseValue,h.messages[h.increaseValue]),onClick:this.increasePart}),c.createElement(F.Button,{tabIndex:-1,type:"button",rounded:null,className:o.classNames(o.uDateInput.spinnerDecrease({c:n})),icon:"caret-alt-down",svgIcon:I.caretAltDownIcon,"aria-label":u.toLanguageString(h.decreaseValue,h.messages[h.decreaseValue]),title:u.toLanguageString(h.decreaseValue,h.messages[h.decreaseValue]),onClick:this.decreasePart}))));return D?c.createElement(A.FloatingLabel,{label:D,editorId:O,editorValue:p,editorValid:S,editorDisabled:this.props.disabled,children:P,style:{width:this.props.width}}):P}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.kendoDate&&this.kendoDate.getDateObject()}get name(){return this.props.name}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get text(){const s={...w.defaultProps,...this.props},{formatPlaceholder:e=l.defaultProps.formatPlaceholder,format:i=l.defaultProps.format,value:a,defaultValue:r}=s;this.kendoDate===null?(this.kendoDate=new N.KendoDate(this.intl.bind(this),e,i),this.kendoDate.setValue(a||r||null)):(this.kendoDate.format=i,this.kendoDate.formatPlaceholder=e),a!==void 0&&this.value!==a&&this.kendoDate.setValue(a);const{text:n,format:u}=this.kendoDate.getTextAndFormat();return this.currentFormat=u,s.placeholder!==null&&s.placeholder!==void 0&&!this.state.focused&&!this.kendoDate.hasValue()?s.placeholder:n}get validity(){const s=y.isInRange(this.value,this.min,this.max)&&R.isInTimeRange(this.value,this.props.minTime,this.props.maxTime),e=this.props.validationMessage!==void 0,i=(!this.required||this.value!==null)&&s,a=this.props.valid!==void 0?this.props.valid:i;return{customError:e,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:a,valueMissing:this.value===null}}get element(){return this._element}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:l.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get wrapper(){return this._wrapper}intl(){return v.provideIntlService(this)}get selection(){let s={start:0,end:0};return this.element!==null&&this.element.selectionStart!==void 0&&(s={start:this.element.selectionStart,end:this.element.selectionEnd}),s}setSelection(s){this._lastSelectedSymbol=this.currentFormat[s.start],window.requestAnimationFrame(()=>{const e=o.getActiveElement(document);this.element&&e===this.element&&!this.props.disableSelection&&this.element.setSelectionRange(s.start,s.end)})}triggerChange(s,e){this.valueDuringOnChange=this.value,this.forceUpdate(),this.props.onChange&&!g.isEqual(e,this.value)&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:s.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0}selectionBySymbol(s){let e=-1,i=0;for(let a=0;a<this.currentFormat.length;a++)this.currentFormat[a]===s&&(i=a+1,e===-1&&(e=a));return e<0&&(e=0),{start:e,end:i}}selectionByIndex(s){let e={start:s,end:s};for(let i=s,a=s-1;i<this.currentFormat.length||a>=0;i++,a--){if(i<this.currentFormat.length&&this.currentFormat[i]!=="_"){e=this.selectionBySymbol(this.currentFormat[i]);break}if(a>=0&&this.currentFormat[a]!=="_"){e=this.selectionBySymbol(this.currentFormat[a]);break}}return e}switchDateSegment(s){const{start:e,end:i}=this.selection;if(e<i&&this.currentFormat[e]!==this.currentFormat[i-1]){this.setSelection(this.selectionByIndex(s>0?e:i-1));return}const a=this.currentFormat[e];let r=e+s;for(;r>0&&r<this.currentFormat.length&&!(this.currentFormat[r]!==a&&this.currentFormat[r]!=="_");)r+=s;if(this.currentFormat[r]==="_")return;let n=r;for(;n>=0&&n<this.currentFormat.length&&this.currentFormat[n]===this.currentFormat[r];)n+=s;r>n&&(n+1!==e||r+1!==i)?this.setSelection({start:n+1,end:r+1}):r<n&&(r!==e||n!==i)&&this.setSelection({start:r,end:n})}modifyDateSegmentValue(s,e){if(!this.kendoDate)return;const i=this.value,a=this.currentFormat[this.selection.start],r=this.kendoDate.symbolMap(a),n=((this.props.steps||{})[r]||1)*s;this.kendoDate.modifyPart(a,n),this.triggerChange(e,i)}};l.displayName="DateInput",l.propTypes={value:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),formatPlaceholder:t.oneOfType([t.oneOf(["wide","narrow","short","formatPattern"]),t.shape({year:t.string,month:t.string,day:t.string,hour:t.string,minute:t.string,second:t.string})]),width:t.oneOfType([t.string,t.number]),tabIndex:t.number,title:t.string,steps:t.shape({year:t.number,month:t.number,day:t.number,hour:t.number,minute:t.number,second:t.number}),min:t.instanceOf(Date),max:t.instanceOf(Date),disabled:t.bool,spinners:t.bool,name:t.string,dir:t.string,label:t.string,id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,ariaLabel:t.string,ariaRole:t.string,ariaHasPopup:t.oneOfType([t.bool,t.string]),ariaExpanded:t.oneOfType([t.bool]),onChange:t.func,validationMessage:t.string,required:t.bool,validate:t.bool,valid:t.bool,size:t.oneOf([null,"small","medium","large"]),rounded:t.oneOf([null,"small","medium","large","full"]),fillMode:t.oneOf([null,"solid","flat","outline"]),autoFocus:t.bool},l.defaultProps={format:y.defaultFormat,size:"medium",rounded:"medium",fillMode:"solid",formatPlaceholder:y.defaultFormatPlaceholder,spinners:!1,disabled:!1,max:g.cloneDate(b.MAX_DATE),min:g.cloneDate(b.MIN_DATE),minTime:g.cloneDate(b.MIN_TIME),maxTime:g.cloneDate(b.MAX_TIME),validityStyles:!0,validationMessage:K,placeholder:null,ariaHasPopup:"grid",autoFocus:!1};let m=l;const C=o.createPropsContext(),w=o.withIdHOC(o.withPropsContext(C,o.withUnstyledHOC(m)));w.displayName="KendoReactDateInput";v.registerForIntl(m);v.registerForLocalization(m);exports.DateInput=w;exports.DateInputPropsContext=C;exports.DateInputWithoutContext=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),t=require("prop-types"),g=require("@progress/kendo-date-math"),F=require("@progress/kendo-react-buttons"),I=require("@progress/kendo-svg-icons"),v=require("@progress/kendo-react-intl"),N=require("./models/kendo-date.js"),o=require("@progress/kendo-react-common"),A=require("@progress/kendo-react-labels"),L=require("../package-metadata.js"),y=require("./utils.js"),b=require("../utils.js"),h=require("../messages/index.js"),R=require("../timepicker/utils.js"),z=require("../common/ClearButton.js");function j(f){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const e in f)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(f,e);Object.defineProperty(s,e,i.get?i:{enumerable:!0,get:()=>f[e]})}}return s.default=f,Object.freeze(s)}const c=j(_),K="Please enter a valid value!",l=class l extends c.Component{constructor(s){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(this.validity.valid?"":this.props.validationMessage||l.defaultProps.validationMessage)},this.updateOnPaste=e=>{if(!this.element||!this.kendoDate)return;const i=v.provideIntlService(this).parseDate(this.element.value,this.props.format)||this.value,a=this.value;this.kendoDate.setValue(i),this.triggerChange(e,a)},this.spinnersMouseDown=e=>{e.preventDefault();const i=o.getActiveElement(document);this.element&&i!==this.element&&this.element.focus({preventScroll:!0})},this.handlePaste=()=>{this.paste=!0},this.handleClick=e=>{this.props.onChange&&this.props.onChange(e)},this.elementChange=e=>{if(!this.element||!this.kendoDate)return;if(this.paste){this.updateOnPaste(e),this.paste=!1;return}const{text:i,format:a}=this.kendoDate.getTextAndFormat();this.currentFormat=a;const r=this.value,n=y.approximateStringMatching(i,this.currentFormat,this.element.value,this.selection.start),u=n.length===1&&n[0][1]==="_";if(!u)for(let d=0;d<n.length;d++)this.kendoDate.parsePart(n[d][0],n[d][1]);n.length&&n[0][0]!=="_"&&this.setSelection(this.selectionBySymbol(n[0][0])),u&&this.switchDateSegment(1),this.triggerChange(e,r)},this.elementClick=e=>{this.setSelection(this.selectionByIndex(this.selection.start))},this.nativeWheel=e=>{o.getActiveElement(document)===this.element&&e.preventDefault()},this.wheel=e=>{o.getActiveElement(document)===this.element&&(e.nativeEvent.deltaY<0&&this.increasePart(e),e.nativeEvent.deltaY>0&&this.decreasePart(e))},this.increasePart=e=>{this.modifyDateSegmentValue(1,e)},this.decreasePart=e=>{this.modifyDateSegmentValue(-1,e)},this.elementKeyDown=e=>{if(!e.altKey){switch(e.keyCode){case 37:this.switchDateSegment(-1);break;case 38:this.modifyDateSegmentValue(1,e);break;case 39:this.switchDateSegment(1);break;case 40:this.modifyDateSegmentValue(-1,e);break;default:return}e.preventDefault()}},this.elementOnFocus=e=>{this.wrapper&&this.wrapper.classList.add("k-focus"),this.setState({focused:!0})},this.elementOnBlur=e=>{this.wrapper&&this.wrapper.classList.remove("k-focus"),this.setState({focused:!1})},o.validatePackage(L.packageMetadata),this.state={focused:!1}}get _inputId(){return this.props.id+"-accessibility-id"}componentDidMount(){this.setValidity(),this.wrapper&&this.wrapper.addEventListener("wheel",this.nativeWheel,{passive:!1})}componentDidUpdate(s,e){this._lastSelectedSymbol&&e.focused===this.state.focused?this.setSelection(this.selectionBySymbol(this._lastSelectedSymbol)):this.props.placeholder!==void 0&&this.selection.start===this.selection.end&&this.setSelection({start:0,end:this.currentFormat.length}),this.setValidity()}componentWillUnmount(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.nativeWheel)}render(){const{size:s=l.defaultProps.size,fillMode:e=l.defaultProps.fillMode,rounded:i=l.defaultProps.rounded,autoFocus:a=l.defaultProps.autoFocus,unstyled:r}=this.props,n=r&&r.uDateInput;this.props._ref&&(this.props._ref.current=this);const u=v.provideLocalizationService(this),d={...l.defaultProps,...this.props},{name:E,label:D,id:x,disabled:V}=d,p=this.text,M=p===this.props.placeholder?"":p,T=p===this.props.placeholder?p:void 0,O=x||this._inputId,S=!this.validityStyles||this.validity.valid,P=c.createElement(o.AsyncFocusBlur,{onFocus:this.elementOnFocus,onBlur:this.elementOnBlur},({onFocus:q,onBlur:B})=>c.createElement("span",{ref:k=>{this._wrapper=k},style:D?void 0:{width:this.props.width},dir:this.props.dir,className:o.classNames(o.uDateInput.wrapper({c:n,size:s,fillMode:e,rounded:i,disabled:V,required:this.required,invalid:!S}),this.props.className),onFocus:q,onBlur:B},c.createElement("input",{role:this.props.ariaRole||"textbox",readOnly:this.props.readonly,tabIndex:this.props.tabIndex,disabled:this.props.disabled,title:this.props.title!==void 0?this.props.title:p,type:"text",spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:a,className:o.classNames(o.uDateInput.inputInner({c:n})),id:O,"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-haspopup":this.props.ariaHasPopup,"aria-disabled":this.props.disabled,"aria-expanded":this.props.ariaExpanded,"aria-controls":this.props.ariaControls,"aria-required":this.props.required,"aria-invalid":!S,onWheel:this.wheel,onClick:this.elementClick,onInput:this.elementChange,onPaste:this.handlePaste,onKeyDown:this.elementKeyDown,onChange:o.noop,value:M,placeholder:T,name:E,ref:k=>this._element=k}),this.props.children,this.props.clearButton&&this.props.value&&c.createElement(z,{onClick:this.handleClick,key:"clearbutton"}),this.props.spinners&&c.createElement("span",{className:o.classNames(o.uDateInput.inputSpinner({c:n})),onMouseDown:this.spinnersMouseDown},c.createElement(F.Button,{tabIndex:-1,type:"button",rounded:null,className:o.classNames(o.uDateInput.spinnerIncrease({c:n})),icon:"caret-alt-up",svgIcon:I.caretAltUpIcon,"aria-label":u.toLanguageString(h.increaseValue,h.messages[h.increaseValue]),title:u.toLanguageString(h.increaseValue,h.messages[h.increaseValue]),onClick:this.increasePart}),c.createElement(F.Button,{tabIndex:-1,type:"button",rounded:null,className:o.classNames(o.uDateInput.spinnerDecrease({c:n})),icon:"caret-alt-down",svgIcon:I.caretAltDownIcon,"aria-label":u.toLanguageString(h.decreaseValue,h.messages[h.decreaseValue]),title:u.toLanguageString(h.decreaseValue,h.messages[h.decreaseValue]),onClick:this.decreasePart}))));return D?c.createElement(A.FloatingLabel,{label:D,editorId:O,editorValue:p,editorValid:S,editorDisabled:this.props.disabled,children:P,style:{width:this.props.width}}):P}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.kendoDate&&this.kendoDate.getDateObject()}get name(){return this.props.name}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get text(){const s={...w.defaultProps,...this.props},{formatPlaceholder:e=l.defaultProps.formatPlaceholder,format:i=l.defaultProps.format,value:a,defaultValue:r}=s;this.kendoDate===null?(this.kendoDate=new N.KendoDate(this.intl.bind(this),e,i),this.kendoDate.setValue(a||r||null)):(this.kendoDate.format=i,this.kendoDate.formatPlaceholder=e),a!==void 0&&this.value!==a&&this.kendoDate.setValue(a);const{text:n,format:u}=this.kendoDate.getTextAndFormat();return this.currentFormat=u,s.placeholder!==null&&s.placeholder!==void 0&&!this.state.focused&&!this.kendoDate.hasValue()?s.placeholder:n}get validity(){const s=y.isInRange(this.value,this.min,this.max)&&R.isInTimeRange(this.value,this.props.minTime,this.props.maxTime),e=this.props.validationMessage!==void 0,i=(!this.required||this.value!==null)&&s,a=this.props.valid!==void 0?this.props.valid:i;return{customError:e,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:a,valueMissing:this.value===null}}get element(){return this._element}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:l.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get wrapper(){return this._wrapper}intl(){return v.provideIntlService(this)}get selection(){let s={start:0,end:0};return this.element!==null&&this.element.selectionStart!==void 0&&(s={start:this.element.selectionStart,end:this.element.selectionEnd}),s}setSelection(s){this._lastSelectedSymbol=this.currentFormat[s.start],window.requestAnimationFrame(()=>{const e=o.getActiveElement(document);this.element&&e===this.element&&!this.props.disableSelection&&this.element.setSelectionRange(s.start,s.end)})}triggerChange(s,e){this.valueDuringOnChange=this.value,this.forceUpdate(),this.props.onChange&&!g.isEqual(e,this.value)&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:s.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0}selectionBySymbol(s){let e=-1,i=0;for(let a=0;a<this.currentFormat.length;a++)this.currentFormat[a]===s&&(i=a+1,e===-1&&(e=a));return e<0&&(e=0),{start:e,end:i}}selectionByIndex(s){let e={start:s,end:s};for(let i=s,a=s-1;i<this.currentFormat.length||a>=0;i++,a--){if(i<this.currentFormat.length&&this.currentFormat[i]!=="_"){e=this.selectionBySymbol(this.currentFormat[i]);break}if(a>=0&&this.currentFormat[a]!=="_"){e=this.selectionBySymbol(this.currentFormat[a]);break}}return e}switchDateSegment(s){const{start:e,end:i}=this.selection;if(e<i&&this.currentFormat[e]!==this.currentFormat[i-1]){this.setSelection(this.selectionByIndex(s>0?e:i-1));return}const a=this.currentFormat[e];let r=e+s;for(;r>0&&r<this.currentFormat.length&&!(this.currentFormat[r]!==a&&this.currentFormat[r]!=="_");)r+=s;if(this.currentFormat[r]==="_")return;let n=r;for(;n>=0&&n<this.currentFormat.length&&this.currentFormat[n]===this.currentFormat[r];)n+=s;r>n&&(n+1!==e||r+1!==i)?this.setSelection({start:n+1,end:r+1}):r<n&&(r!==e||n!==i)&&this.setSelection({start:r,end:n})}modifyDateSegmentValue(s,e){if(!this.kendoDate)return;const i=this.value,a=this.currentFormat[this.selection.start],r=this.kendoDate.symbolMap(a),n=((this.props.steps||{})[r]||1)*s;this.kendoDate.modifyPart(a,n),this.triggerChange(e,i)}};l.displayName="DateInput",l.propTypes={value:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),formatPlaceholder:t.oneOfType([t.oneOf(["wide","narrow","short","formatPattern"]),t.shape({year:t.string,month:t.string,day:t.string,hour:t.string,minute:t.string,second:t.string})]),width:t.oneOfType([t.string,t.number]),tabIndex:t.number,title:t.string,steps:t.shape({year:t.number,month:t.number,day:t.number,hour:t.number,minute:t.number,second:t.number}),min:t.instanceOf(Date),max:t.instanceOf(Date),disabled:t.bool,spinners:t.bool,name:t.string,dir:t.string,label:t.string,id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,ariaLabel:t.string,ariaRole:t.string,ariaHasPopup:t.oneOfType([t.bool,t.string]),ariaExpanded:t.oneOfType([t.bool]),onChange:t.func,validationMessage:t.string,required:t.bool,validate:t.bool,valid:t.bool,size:t.oneOf([null,"small","medium","large"]),rounded:t.oneOf([null,"small","medium","large","full"]),fillMode:t.oneOf([null,"solid","flat","outline"]),autoFocus:t.bool},l.defaultProps={format:y.defaultFormat,size:"medium",rounded:"medium",fillMode:"solid",formatPlaceholder:y.defaultFormatPlaceholder,spinners:!1,disabled:!1,max:g.cloneDate(b.MAX_DATE),min:g.cloneDate(b.MIN_DATE),minTime:g.cloneDate(b.MIN_TIME),maxTime:g.cloneDate(b.MAX_TIME),validityStyles:!0,validationMessage:K,placeholder:null,ariaHasPopup:"grid",autoFocus:!1};let m=l;const C=o.createPropsContext(),w=o.withIdHOC(o.withPropsContext(C,o.withUnstyledHOC(m)));w.displayName="KendoReactDateInput";v.registerForIntl(m);v.registerForLocalization(m);exports.DateInput=w;exports.DateInputPropsContext=C;exports.DateInputWithoutContext=m;

package/dateinput/DateInput.mjs

@@ -168,7 +168,7 @@ const oe = "Please enter a valid value!", o = class o extends h.Component {
           autoComplete: "off",
           autoCorrect: "off",
           autoFocus: r,
-          className: p(c.input({ c: a })),
+          className: p(c.inputInner({ c: a })),
           id: k,
           "aria-label": this.props.ariaLabel,
           "aria-labelledby": this.props.ariaLabelledBy,

package/datetimepicker/DateTimePicker.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 j=require("react"),e=require("prop-types"),U=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),H=require("@progress/kendo-svg-icons"),W=require("../dateinput/DateInput.js"),X=require("@progress/kendo-react-buttons"),Z=require("../package-metadata.js"),p=require("../utils.js"),$=require("../common/constants.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),G=require("./DateTimeSelector.js"),J=require("../timepicker/utils.js"),Q=require("../hooks/usePickerFloatingLabel.js"),Y=require("../common/AdaptiveMode.js"),ee=require("@progress/kendo-react-layout");function te(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:()=>c[i]})}}return t.default=c,Object.freeze(t)}const r=te(j),n=class n extends r.Component{constructor(t){super(t),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const i=this.dateInputElement();i&&i.focus()},this.renderPicker=()=>{const{disabled:i,minTime:s,maxTime:a,format:h,calendar:d,cancelButton:u,weekNumber:f,focusedDate:v}=this.props;return r.createElement(G.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:f,min:this.min,max:this.max,minTime:s,maxTime:a,focusedDate:v,format:h,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode})},this.renderAdaptivePopup=()=>{const{windowWidth:i=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),a=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),h={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:i,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:a,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(Y.AdaptiveMode,{...h},r.createElement(ee.ActionSheetContent,{overflowHidden:!0},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=i=>{this.setState({value:I.cloneDate(i.value||void 0)}),this.valueDuringOnChange=i.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleDateIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=i=>{i.preventDefault()},this.handleKeyDown=i=>{const{altKey:s,keyCode:a}=i;if(a===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===o.Keys.up||a===o.Keys.down)&&(i.preventDefault(),i.stopPropagation(),this.shouldFocusDateInput=a===o.Keys.up,this.setShow(a===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),o.validatePackage(Z.packageMetadata),this.state={value:this.props.defaultValue||n.defaultProps.defaultValue,show:this.props.defaultShow||n.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const t=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return t!==null?I.cloneDate(t):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=$.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:n.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:n.defaultProps.max}get validity(){const t=p.isInDateRange(this.value,this.min,this.max)&&J.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),i=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&t,a=this.props.valid!==void 0?this.props.valid:s;return{customError:i,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:a,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:n.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||n.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){const t=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),t&&!this.show&&this.shouldFocusDateInput&&t.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var t;clearTimeout(this.nextTickId),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:t=n.defaultProps.size,rounded:i=n.defaultProps.rounded,fillMode:s=n.defaultProps.fillMode,autoFocus:a=n.defaultProps.autoFocus,disabled:h,tabIndex:d,title:u,id:f,format:v,formatPlaceholder:w,min:O,max:k,className:M,width:C,name:x,validationMessage:E,required:q,validityStyles:R,minTime:F,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:A,popup:N=U.Popup,unstyled:y}=this.props,b=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,L={id:f,ariaLabelledBy:B,ariaDescribedBy:A,format:v,formatPlaceholder:w,disabled:h,title:u,validityStyles:R,validationMessage:E,required:q,min:O,max:k,minTime:F,maxTime:z,name:x,tabIndex:this.show?-1:d,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,size:null,fillMode:null,rounded:null},S=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:_,onBlur:V})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:K=>{this._element=K},className:o.classNames(o.uDateTimePicker.wrapper({c:b,size:t,fillMode:s,rounded:i,disabled:h,required:this.required,invalid:!D}),M),onKeyDown:this.handleKeyDown,style:{width:C},onFocus:this.mobileMode?void 0:_,onBlur:V,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",readonly:this.mobileMode,autoFocus:a,...L}),r.createElement(X.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:H.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:b})),rounded:null,fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(N,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:b})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(Q.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:S,style:{width:this.props.width}}):S}setShow(t){const{onOpen:i,onClose:s}=this.props;this.show!==t&&(this.setState({show:t}),t&&i&&i.call(void 0,{target:this}),!t&&s&&s.call(void 0,{target:this}))}nextTick(t){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>t())}calculateMedia(t){for(const i of t)this.setState({windowWidth:i.target.clientWidth})}};n.displayName="DateTimePicker",n.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool},n.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:W.DateInput,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=n;const T=o.createPropsContext(),P=o.withIdHOC(o.withPropsContext(T,o.withUnstyledHOC(g)));P.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=P;exports.DateTimePickerPropsContext=T;exports.DateTimePickerWithoutContext=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),e=require("prop-types"),U=require("@progress/kendo-react-popup"),T=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),H=require("@progress/kendo-svg-icons"),W=require("../dateinput/DateInput.js"),X=require("@progress/kendo-react-buttons"),Z=require("../package-metadata.js"),p=require("../utils.js"),$=require("../common/constants.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),G=require("./DateTimeSelector.js"),J=require("../timepicker/utils.js"),Q=require("../hooks/usePickerFloatingLabel.js"),Y=require("../common/AdaptiveMode.js"),ee=require("@progress/kendo-react-layout");function te(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:()=>c[i]})}}return t.default=c,Object.freeze(t)}const r=te(j),n=class n extends r.Component{constructor(t){super(t),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const i=this.dateInputElement();i&&i.focus()},this.renderPicker=()=>{const{disabled:i,minTime:s,maxTime:a,format:h,calendar:d,cancelButton:u,weekNumber:f,focusedDate:v,unstyled:w}=this.props;return r.createElement(G.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:f,min:this.min,max:this.max,minTime:s,maxTime:a,focusedDate:v,format:h,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:i=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),a=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),h={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:i,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:a,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(Y.AdaptiveMode,{...h},r.createElement(ee.ActionSheetContent,{overflowHidden:!0},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=i=>{this.setState({value:T.cloneDate(i.value||void 0)}),this.valueDuringOnChange=i.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleDateIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=i=>{i.preventDefault()},this.handleKeyDown=i=>{const{altKey:s,keyCode:a}=i;if(a===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===o.Keys.up||a===o.Keys.down)&&(i.preventDefault(),i.stopPropagation(),this.shouldFocusDateInput=a===o.Keys.up,this.setShow(a===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),o.validatePackage(Z.packageMetadata),this.state={value:this.props.defaultValue||n.defaultProps.defaultValue,show:this.props.defaultShow||n.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const t=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return t!==null?T.cloneDate(t):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=$.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:n.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:n.defaultProps.max}get validity(){const t=p.isInDateRange(this.value,this.min,this.max)&&J.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),i=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&t,a=this.props.valid!==void 0?this.props.valid:s;return{customError:i,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:a,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:n.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||n.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){const t=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),t&&!this.show&&this.shouldFocusDateInput&&t.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var t;clearTimeout(this.nextTickId),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:t=n.defaultProps.size,rounded:i=n.defaultProps.rounded,fillMode:s=n.defaultProps.fillMode,autoFocus:a=n.defaultProps.autoFocus,disabled:h,tabIndex:d,title:u,id:f,format:v,formatPlaceholder:w,min:b,max:k,className:M,width:C,name:x,validationMessage:E,required:q,validityStyles:R,minTime:F,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:A,popup:N=U.Popup,unstyled:y}=this.props,D=y&&y.uDateTimePicker,S=!this.validityStyles||this.validity.valid,L={id:f,ariaLabelledBy:B,ariaDescribedBy:A,format:v,formatPlaceholder:w,disabled:h,title:u,validityStyles:R,validationMessage:E,required:q,min:b,max:k,minTime:F,maxTime:z,name:x,tabIndex:this.show?-1:d,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,size:null,fillMode:null,rounded:null,unstyled:y},I=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:_,onBlur:V})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:K=>{this._element=K},className:o.classNames(o.uDateTimePicker.wrapper({c:D,size:t,fillMode:s,rounded:i,disabled:h,required:this.required,invalid:!S}),M),onKeyDown:this.handleKeyDown,style:{width:C},onFocus:this.mobileMode?void 0:_,onBlur:V,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",readonly:this.mobileMode,autoFocus:a,...L}),r.createElement(X.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:H.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:D})),rounded:null,fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(N,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:D})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(Q.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:S,editorDisabled:this.props.disabled,children:I,style:{width:this.props.width}}):I}setShow(t){const{onOpen:i,onClose:s}=this.props;this.show!==t&&(this.setState({show:t}),t&&i&&i.call(void 0,{target:this}),!t&&s&&s.call(void 0,{target:this}))}nextTick(t){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>t())}calculateMedia(t){for(const i of t)this.setState({windowWidth:i.target.clientWidth})}};n.displayName="DateTimePicker",n.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool},n.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:W.DateInput,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=n;const P=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(P,o.withUnstyledHOC(g)));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=P;exports.DateTimePickerWithoutContext=g;

package/datetimepicker/DateTimePicker.mjs

@@ -9,15 +9,15 @@
 import * as a from "react";
 import e from "prop-types";
 import { Popup as H } from "@progress/kendo-react-popup";
-import { cloneDate as T } from "@progress/kendo-date-math";
-import { Keys as d, validatePackage as W, canUseDOM as O, AsyncFocusBlur as X, classNames as b, uDateTimePicker as y, createPropsContext as Z, withIdHOC as G, withPropsContext as J, withUnstyledHOC as Q } from "@progress/kendo-react-common";
+import { cloneDate as O } from "@progress/kendo-date-math";
+import { Keys as d, validatePackage as W, canUseDOM as M, AsyncFocusBlur as X, classNames as I, uDateTimePicker as D, createPropsContext as Z, withIdHOC as G, withPropsContext as J, withUnstyledHOC as Q } from "@progress/kendo-react-common";
 import { calendarIcon as Y } from "@progress/kendo-svg-icons";
 import { DateInput as $ } from "../dateinput/DateInput.mjs";
 import { Button as ee } from "@progress/kendo-react-buttons";
 import { packageMetadata as te } from "../package-metadata.mjs";
 import { MAX_DATE as ie, MIN_DATE as se, isInDateRange as oe, MAX_TIME as ne, MIN_TIME as ae } from "../utils.mjs";
 import { MOBILE_MEDIUM_DEVISE as re } from "../common/constants.mjs";
-import { dateTimePickerCancel as M, messages as p, dateTimePickerSet as P, toggleDateTimeSelector as c } from "../messages/index.mjs";
+import { dateTimePickerCancel as P, messages as p, dateTimePickerSet as C, toggleDateTimeSelector as c } from "../messages/index.mjs";
 import { provideLocalizationService as m, registerForLocalization as le } from "@progress/kendo-react-intl";
 import { DateTimeSelector as he } from "./DateTimeSelector.mjs";
 import { isInTimeRange as de } from "../timepicker/utils.mjs";
@@ -38,13 +38,14 @@ const o = class o extends a.Component {
         calendar: l,
         cancelButton: r,
         weekNumber: u,
-        focusedDate: g
+        focusedDate: g,
+        unstyled: v
       } = this.props;
       return /* @__PURE__ */ a.createElement(
         he,
         {
-          ref: (v) => {
-            this._dateTimeSelector = v;
+          ref: (w) => {
+            this._dateTimeSelector = w;
           },
           cancelButton: r,
           steps: this.props.steps,
@@ -61,11 +62,12 @@ const o = class o extends a.Component {
           format: h,
           calendar: l,
           mobileMode: this.mobileMode,
-          footerActions: !this.mobileMode
+          footerActions: !this.mobileMode,
+          unstyled: v
         }
       );
     }, this.renderAdaptivePopup = () => {
-      const { windowWidth: i = 0 } = this.state, s = m(this).toLanguageString(M, p[M]), n = m(this).toLanguageString(P, p[P]), h = {
+      const { windowWidth: i = 0 } = this.state, s = m(this).toLanguageString(P, p[P]), n = m(this).toLanguageString(C, p[C]), h = {
         expand: this.show,
         onClose: this.handleBlur,
         adaptiveTitle: this.props.adaptiveTitle,
@@ -88,7 +90,7 @@ const o = class o extends a.Component {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (i) => {
       this.setState({
-        value: T(i.value || void 0)
+        value: O(i.value || void 0)
       }), this.valueDuringOnChange = i.value, this.showDuringOnChange = !1, this.mobileMode || (this.shouldFocusDateInput = !0);
       const { onChange: s } = this.props;
       s && s.call(void 0, {
@@ -123,7 +125,7 @@ const o = class o extends a.Component {
     return this.props.id + "-popup-id";
   }
   get document() {
-    if (O)
+    if (M)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -143,7 +145,7 @@ const o = class o extends a.Component {
    */
   get value() {
     const t = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
-    return t !== null ? T(t) : null;
+    return t !== null ? O(t) : null;
   }
   /**
    * Gets the popup state of the DateTimePicker.
@@ -205,7 +207,7 @@ const o = class o extends a.Component {
    */
   componentDidMount() {
     var t;
-    this.observerResize = O && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (t = this.document) != null && t.body && this.observerResize && this.observerResize.observe(this.document.body);
+    this.observerResize = M && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (t = this.document) != null && t.body && this.observerResize && this.observerResize.observe(this.document.body);
   }
   /**
    * @hidden
@@ -236,7 +238,7 @@ const o = class o extends a.Component {
       id: u,
       format: g,
       formatPlaceholder: v,
-      min: C,
+      min: w,
       max: x,
       className: E,
       width: k,
@@ -249,8 +251,8 @@ const o = class o extends a.Component {
       ariaLabelledBy: V,
       ariaDescribedBy: L,
       popup: _ = H,
-      unstyled: I
-    } = this.props, w = I && I.uDateTimePicker, D = !this.validityStyles || this.validity.valid, q = {
+      unstyled: b
+    } = this.props, y = b && b.uDateTimePicker, S = !this.validityStyles || this.validity.valid, q = {
       id: u,
       ariaLabelledBy: V,
       ariaDescribedBy: L,
@@ -261,7 +263,7 @@ const o = class o extends a.Component {
       validityStyles: z,
       validationMessage: R,
       required: B,
-      min: C,
+      min: w,
       max: x,
       minTime: A,
       maxTime: N,
@@ -276,8 +278,9 @@ const o = class o extends a.Component {
       ariaExpanded: this.show,
       size: null,
       fillMode: null,
-      rounded: null
-    }, S = /* @__PURE__ */ a.createElement(
+      rounded: null,
+      unstyled: b
+    }, T = /* @__PURE__ */ a.createElement(
       X,
       {
         onFocus: this.handleFocus,
@@ -291,15 +294,15 @@ const o = class o extends a.Component {
           ref: (j) => {
             this._element = j;
           },
-          className: b(
-            y.wrapper({
-              c: w,
+          className: I(
+            D.wrapper({
+              c: y,
               size: t,
               fillMode: s,
               rounded: i,
               disabled: h,
               required: this.required,
-              invalid: !D
+              invalid: !S
             }),
             E
           ),
@@ -331,7 +334,7 @@ const o = class o extends a.Component {
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleDateIconClick,
             title: m(this).toLanguageString(c, p[c]),
-            className: b(y.inputButton({ c: w })),
+            className: I(D.inputButton({ c: y })),
             rounded: null,
             fillMode: s,
             "aria-label": m(this).toLanguageString(c, p[c])
@@ -343,7 +346,7 @@ const o = class o extends a.Component {
             show: this.show,
             animate: this.element !== null,
             anchor: this.element,
-            popupClass: b(y.popup({ c: w })),
+            popupClass: I(D.popup({ c: y })),
             id: this._popupId,
             anchorAlign: {
               horizontal: "left",
@@ -364,12 +367,12 @@ const o = class o extends a.Component {
         dateInput: this._dateInput,
         label: this.props.label,
         editorId: u,
-        editorValid: D,
+        editorValid: S,
         editorDisabled: this.props.disabled,
-        children: S,
+        children: T,
         style: { width: this.props.width }
       }
-    ) : S;
+    ) : T;
   }
   setShow(t) {
     const { onOpen: i, onClose: s } = this.props;

package/datetimepicker/DateTimeSelector.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 E=require("react"),_=require("@progress/kendo-react-intl"),l=require("../messages/index.js"),p=require("@progress/kendo-react-buttons"),N=require("../calendar/components/Calendar.js"),B=require("../timepicker/TimePart.js"),c=require("../utils.js"),y=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),b=require("../timepicker/utils.js");function V(d){const s=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(s,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return s.default=d,Object.freeze(s)}const n=V(E),D=class D extends n.Component{constructor(s){super(s),this._calendar=null,this._timePart=null,this._cancelButton=null,this._acceptButton=null,this._dateButtonRef=null,this._calendarWrap=null,this.shouldFocusPart=!1,this.focus=e=>{Promise.resolve().then(()=>{this.state.tab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.state.tab==="date"&&t&&t.focus(e)})},this.calendarElement=()=>this._calendar&&this._calendar.element||this._calendarWrap&&this._calendarWrap.querySelector(".k-calendar"),this.move=e=>{if(e==="right"&&this.state.tab==="time"||e==="left"&&this.state.tab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.setState({tab:t})},this.dateTimeFooter=()=>{const{cancelButton:e,unstyled:t}=this.props,i=t&&t.uDateTimePicker,o=this.localizationService.toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),h=this.localizationService.toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]);return n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeFooter({c:i}))},e&&n.createElement(p.Button,{type:"button",ref:r=>{this._cancelButton=r},className:a.classNames(a.uTime.cancel({c:i})),onClick:this.handleReject,onKeyDown:this.handleCancelKeyDown,title:o,"aria-label":o},o),n.createElement(p.Button,{type:"button",themeColor:"primary",ref:r=>{this._acceptButton=r},className:a.classNames(a.uTime.accept({c:i})),disabled:!this.hasDateValue,onClick:this.handleAccept,onKeyDown:this.handleSetKeyDown,title:h,"aria-label":h},h))},this.handleReject=e=>{this.setState({dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE});const t=this.mergeDate(this.props.value,this.props.value||c.MIDNIGHT_DATE);if(this.props.onReject){const i={nativeEvent:e.nativeEvent,syntheticEvent:e,target:this,value:t};this.props.onReject.call(void 0,i)}},this.handleAccept=(e,t)=>{if(!this.state.dateValue||!this.state.timeValue||!this.hasDateValue)return;const i=this.mergeDate(this.state.dateValue,t||this.state.timeValue);this.props.onChange.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:i,target:this})},this.handleNowClick=e=>{this.setState({timeValue:b.getNow()}),this.handleAccept(e,b.getNow())},this.handleCalendarValueChange=e=>{e.syntheticEvent.stopPropagation(),this.setState({dateValue:e.value,tab:"time"}),this.shouldFocusPart=!0},this.handleTimeListContainerChange=e=>{this.setState({timeValue:e})},this.handleDateClick=e=>{e.stopPropagation(),this.move("left")},this.handleTimeClick=e=>{e.stopPropagation(),this.move("right")},this.handleKeyDown=e=>{const{keyCode:t,altKey:i}=e;if(!this.props.disabled)switch(t){case a.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case a.Keys.left:if(!i)return;this.move("left");return;case a.Keys.right:if(!i)return;this.move("right");return;default:return}},this.handleCancelKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.tab&&this._dateButtonRef&&this._dateButtonRef.element&&!this.hasDateValue&&(e.preventDefault(),this._dateButtonRef.element.focus())},this.handleSetKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.tab&&this._dateButtonRef&&this._dateButtonRef.element&&(e.preventDefault(),this._dateButtonRef.element.focus())},this.handleDateKeyDown=e=>{var o,h,r,g;const{keyCode:t,shiftKey:i}=e;i&&t===a.Keys.tab&&(e.stopPropagation(),this.hasDateValue?(g=(r=this._acceptButton)==null?void 0:r.element)==null||g.focus():(h=(o=this._cancelButton)==null?void 0:o.element)==null||h.focus()),t===a.Keys.enter&&(e.stopPropagation(),this.move("left"))},this.handleTimeKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.enter&&(e.stopPropagation(),this.move("right"))},this.handleTimePartMount=e=>{this.setState({timeValue:e})},this.state={tab:"date",dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE}}get calendar(){return this._calendar}get timePart(){return this._timePart}get hasDateValue(){return this.state.dateValue!==null}get localizationService(){return _.provideLocalizationService(this)}componentDidUpdate(s,e){var t,i;this.shouldFocusPart&&this.focus({preventScroll:!0}),(((t=s.value)==null?void 0:t.getTime())!==((i=this.props.value)==null?void 0:i.getTime())||this.state.tab!==e.tab&&this.props.value)&&this.setState(o=>({dateValue:s.value&&this.props.value&&y.isEqualDate(s.value,this.props.value)?o.dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE})),this.shouldFocusPart=!1}render(){const{disabled:s,min:e,max:t,weekNumber:i,focusedDate:o,format:h,mobileMode:r,footerActions:g,unstyled:v}=this.props,m=v&&v.uDateTimePicker,k=a.classNames(a.uDateTimePicker.wrap({c:m,date:this.state.tab==="date",time:this.state.tab==="time",disabled:s})),C=this.localizationService.toLanguageString(l.date,l.messages[l.date]),P=this.localizationService.toLanguageString(l.time,l.messages[l.time]),T={min:e,max:t,weekNumber:i,focusedDate:o,disabled:s||this.state.tab!=="date",value:this.state.dateValue,onChange:this.handleCalendarValueChange,navigation:!1,tabIndex:s||this.state.tab!=="date"?-1:void 0,mobileMode:r};return n.createElement("div",{onKeyDown:this.handleKeyDown,className:k,tabIndex:-1},n.createElement("div",{className:a.classNames(a.uDateTimePicker.buttonGroup({c:m}))},n.createElement(p.ButtonGroup,{width:"100%"},n.createElement(p.Button,{ref:u=>this._dateButtonRef=u,type:"button",selected:this.state.tab==="date",togglable:!0,onClick:this.handleDateClick,onKeyDown:this.handleDateKeyDown},C),n.createElement(p.Button,{type:"button",selected:this.state.tab==="time",togglable:!0,onClick:this.handleTimeClick,onKeyDown:this.handleTimeKeyDown},P))),n.createElement("div",{className:a.classNames(a.uDateTimePicker.selector({c:m}))},n.createElement("div",{className:a.classNames(a.uDateTimePicker.calendarWrap({c:m})),ref:u=>this._calendarWrap=u},this.props.calendar?n.createElement(this.props.calendar,{key:this.state.tab,...T}):n.createElement(N.Calendar,{key:this.state.tab,ref:u=>{this._calendar=u},...T})),n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeWrap({c:m}))},n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeSelector({c:m,mobileMode:r}))},n.createElement(B.TimePart,{key:1,onNowClick:this.handleNowClick,disabled:s||this.state.tab!=="time",ref:u=>{this._timePart=u},min:this.minTime||c.MIN_TIME,max:this.maxTime||c.MAX_TIME,steps:this.props.steps,value:this.state.timeValue,format:h,onChange:this.handleTimeListContainerChange,onMount:this.handleTimePartMount,mobileMode:r,unstyled:v})))),g&&this.dateTimeFooter())}get minTime(){return this.props.minTime!==void 0?this.props.minTime:this.normalizeRange(this.props.min,this.state.dateValue)}get maxTime(){return this.props.maxTime!==void 0?this.props.maxTime:this.normalizeRange(this.props.max,this.state.dateValue)}normalizeRange(s,e){return y.isEqualDate(s,e||c.getToday())?s:null}hasActiveButton(){if(!this._acceptButton)return!1;const s=a.getActiveElement(document);return this._acceptButton&&s===this._acceptButton.element||this._cancelButton&&s===this._cancelButton.element}mergeTime(s,e){return s&&e?c.setTime(e,s):e}mergeDate(s,e){return s?c.setTime(s||c.getToday(),e):e}};D.defaultProps={footerActions:!0};let f=D;_.registerForLocalization(f);exports.DateTimeSelector=f;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),_=require("@progress/kendo-react-intl"),l=require("../messages/index.js"),p=require("@progress/kendo-react-buttons"),N=require("../calendar/components/Calendar.js"),B=require("../timepicker/TimePart.js"),c=require("../utils.js"),y=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),b=require("../timepicker/utils.js");function V(d){const s=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(s,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return s.default=d,Object.freeze(s)}const n=V(E),D=class D extends n.Component{constructor(s){super(s),this._calendar=null,this._timePart=null,this._cancelButton=null,this._acceptButton=null,this._dateButtonRef=null,this._calendarWrap=null,this.shouldFocusPart=!1,this.focus=e=>{Promise.resolve().then(()=>{this.state.tab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.state.tab==="date"&&t&&t.focus(e)})},this.calendarElement=()=>this._calendar&&this._calendar.element||this._calendarWrap&&this._calendarWrap.querySelector(".k-calendar"),this.move=e=>{if(e==="right"&&this.state.tab==="time"||e==="left"&&this.state.tab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.setState({tab:t})},this.dateTimeFooter=()=>{const{cancelButton:e,unstyled:t}=this.props,i=t&&t.uDateTimePicker,o=this.localizationService.toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),h=this.localizationService.toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]);return n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeFooter({c:i}))},e&&n.createElement(p.Button,{type:"button",ref:r=>{this._cancelButton=r},className:a.classNames(a.uTime.cancel({c:i})),onClick:this.handleReject,onKeyDown:this.handleCancelKeyDown,title:o,"aria-label":o},o),n.createElement(p.Button,{type:"button",themeColor:"primary",ref:r=>{this._acceptButton=r},className:a.classNames(a.uTime.accept({c:i})),disabled:!this.hasDateValue,onClick:this.handleAccept,onKeyDown:this.handleSetKeyDown,title:h,"aria-label":h},h))},this.handleReject=e=>{this.setState({dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE});const t=this.mergeDate(this.props.value,this.props.value||c.MIDNIGHT_DATE);if(this.props.onReject){const i={nativeEvent:e.nativeEvent,syntheticEvent:e,target:this,value:t};this.props.onReject.call(void 0,i)}},this.handleAccept=(e,t)=>{if(!this.state.dateValue||!this.state.timeValue||!this.hasDateValue)return;const i=this.mergeDate(this.state.dateValue,t||this.state.timeValue);this.props.onChange.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:i,target:this})},this.handleNowClick=e=>{this.setState({timeValue:b.getNow()}),this.handleAccept(e,b.getNow())},this.handleCalendarValueChange=e=>{e.syntheticEvent.stopPropagation(),this.setState({dateValue:e.value,tab:"time"}),this.shouldFocusPart=!0},this.handleTimeListContainerChange=e=>{this.setState({timeValue:e})},this.handleDateClick=e=>{e.stopPropagation(),this.move("left")},this.handleTimeClick=e=>{e.stopPropagation(),this.move("right")},this.handleKeyDown=e=>{const{keyCode:t,altKey:i}=e;if(!this.props.disabled)switch(t){case a.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case a.Keys.left:if(!i)return;this.move("left");return;case a.Keys.right:if(!i)return;this.move("right");return;default:return}},this.handleCancelKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.tab&&this._dateButtonRef&&this._dateButtonRef.element&&!this.hasDateValue&&(e.preventDefault(),this._dateButtonRef.element.focus())},this.handleSetKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.tab&&this._dateButtonRef&&this._dateButtonRef.element&&(e.preventDefault(),this._dateButtonRef.element.focus())},this.handleDateKeyDown=e=>{var o,h,r,g;const{keyCode:t,shiftKey:i}=e;i&&t===a.Keys.tab&&(e.stopPropagation(),this.hasDateValue?(g=(r=this._acceptButton)==null?void 0:r.element)==null||g.focus():(h=(o=this._cancelButton)==null?void 0:o.element)==null||h.focus()),t===a.Keys.enter&&(e.stopPropagation(),this.move("left"))},this.handleTimeKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.enter&&(e.stopPropagation(),this.move("right"))},this.handleTimePartMount=e=>{this.setState({timeValue:e})},this.state={tab:"date",dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE}}get calendar(){return this._calendar}get timePart(){return this._timePart}get hasDateValue(){return this.state.dateValue!==null}get localizationService(){return _.provideLocalizationService(this)}componentDidUpdate(s,e){var t,i;this.shouldFocusPart&&this.focus({preventScroll:!0}),(((t=s.value)==null?void 0:t.getTime())!==((i=this.props.value)==null?void 0:i.getTime())||this.state.tab!==e.tab&&this.props.value)&&this.setState(o=>({dateValue:s.value&&this.props.value&&y.isEqualDate(s.value,this.props.value)?o.dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE})),this.shouldFocusPart=!1}render(){const{disabled:s,min:e,max:t,weekNumber:i,focusedDate:o,format:h,mobileMode:r,footerActions:g,unstyled:f}=this.props,m=f&&f.uDateTimePicker,k=a.classNames(a.uDateTimePicker.wrap({c:m,date:this.state.tab==="date",time:this.state.tab==="time",disabled:s})),C=this.localizationService.toLanguageString(l.date,l.messages[l.date]),P=this.localizationService.toLanguageString(l.time,l.messages[l.time]),T={min:e,max:t,weekNumber:i,focusedDate:o,disabled:s||this.state.tab!=="date",value:this.state.dateValue,onChange:this.handleCalendarValueChange,navigation:!1,tabIndex:s||this.state.tab!=="date"?-1:void 0,mobileMode:r};return n.createElement("div",{onKeyDown:this.handleKeyDown,className:k,tabIndex:-1},n.createElement("div",{className:a.classNames(a.uDateTimePicker.buttonGroup({c:m}))},n.createElement(p.ButtonGroup,{width:"100%",unstyled:f},n.createElement(p.Button,{ref:u=>this._dateButtonRef=u,type:"button",selected:this.state.tab==="date",togglable:!0,onClick:this.handleDateClick,onKeyDown:this.handleDateKeyDown},C),n.createElement(p.Button,{type:"button",selected:this.state.tab==="time",togglable:!0,onClick:this.handleTimeClick,onKeyDown:this.handleTimeKeyDown},P))),n.createElement("div",{className:a.classNames(a.uDateTimePicker.selector({c:m}))},n.createElement("div",{className:a.classNames(a.uDateTimePicker.calendarWrap({c:m})),ref:u=>this._calendarWrap=u},this.props.calendar?n.createElement(this.props.calendar,{key:this.state.tab,...T}):n.createElement(N.Calendar,{key:this.state.tab,ref:u=>{this._calendar=u},...T})),n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeWrap({c:m}))},n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeSelector({c:m,mobileMode:r}))},n.createElement(B.TimePart,{key:1,onNowClick:this.handleNowClick,disabled:s||this.state.tab!=="time",ref:u=>{this._timePart=u},min:this.minTime||c.MIN_TIME,max:this.maxTime||c.MAX_TIME,steps:this.props.steps,value:this.state.timeValue,format:h,onChange:this.handleTimeListContainerChange,onMount:this.handleTimePartMount,mobileMode:r,unstyled:f})))),g&&this.dateTimeFooter())}get minTime(){return this.props.minTime!==void 0?this.props.minTime:this.normalizeRange(this.props.min,this.state.dateValue)}get maxTime(){return this.props.maxTime!==void 0?this.props.maxTime:this.normalizeRange(this.props.max,this.state.dateValue)}normalizeRange(s,e){return y.isEqualDate(s,e||c.getToday())?s:null}hasActiveButton(){if(!this._acceptButton)return!1;const s=a.getActiveElement(document);return this._acceptButton&&s===this._acceptButton.element||this._cancelButton&&s===this._cancelButton.element}mergeTime(s,e){return s&&e?c.setTime(e,s):e}mergeDate(s,e){return s?c.setTime(s||c.getToday(),e):e}};D.defaultProps={footerActions:!0};let v=D;_.registerForLocalization(v);exports.DateTimeSelector=v;