@progress/kendo-react-dateinputs 9.1.0 → 9.1.1-develop.1

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 V=require("react"),e=require("prop-types"),g=require("@progress/kendo-date-math"),x=require("@progress/kendo-react-buttons"),P=require("@progress/kendo-svg-icons"),f=require("@progress/kendo-react-intl"),n=require("@progress/kendo-react-common"),_=require("@progress/kendo-react-labels"),L=require("@progress/kendo-dateinputs-common"),w=require("./utils.js"),N=require("../package-metadata.js"),v=require("../utils.js"),r=require("../messages/index.js"),A=require("../timepicker/utils.js"),F=require("../common/ClearButton.js"),R=require("./dateInputIntl.js");function B(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const d=B(V),j="Please enter a valid value!",a=class a extends d.Component{constructor(i){super(i),this.kendoDate=null,this.kendoDateObject=null,this.mounted=!1,this._element=null,this._wrapper=null,this._nativeEvent=null,this.focus=()=>{this._element&&this._element.focus()},this.setValidity=()=>{this.element&&this.element.setCustomValidity&&this.element.setCustomValidity(this.validity.valid?"":this.props.validationMessage||a.defaultProps.validationMessage)},this.updateOnPaste=t=>{!this.element||!this.kendoDate||this.triggerChange(t)},this.spinnersMouseDown=t=>{t.preventDefault();const s=n.getActiveElement(document);this.element&&s!==this.element&&this.element.focus({preventScroll:!0})},this.handleClick=t=>{this.props.onChange&&this.props.onChange(t)},this.nativeWheel=t=>{n.getActiveElement(document)===this.element&&t.preventDefault()},this.increasePart=t=>{var s;(s=this.kendoDate)==null||s.modifyDateSegmentValue(1),this.onChange(t)},this.decreasePart=t=>{var s;(s=this.kendoDate)==null||s.modifyDateSegmentValue(-1),this.onChange(t)},this.elementOnFocus=t=>{this.wrapper&&this.wrapper.classList.add("k-focus"),this.setState({focused:!0})},this.elementOnBlur=t=>{this.wrapper&&this.wrapper.classList.remove("k-focus"),this.setState({focused:!1})},n.validatePackage(N.packageMetadata),this.state={focused:!1}}get _inputId(){return this.props.id+"-accessibility-id"}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.kendoDate&&this.kendoDate.value}get name(){return this.props.name}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get isInSegmentSelection(){const{year:i,month:t,day:s,hours:l,minutes:u,seconds:o}=this.kendoDateObject;return(!i||!t||!s||!l||!u||!o)&&(i||t||s||l||u||o)}get text(){const{placeholder:i}=this.props,t=this.kendoDate&&this.kendoDate.currentText||"";return i!=null&&!this.state.focused&&!this.value?i:t}get validity(){const i=w.isInRange(this.value,this.min,this.max)&&A.isInTimeRange(this.value,this.props.minTime,this.props.maxTime),t=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&i,l=this.props.valid!==void 0?this.props.valid:s;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:l,valueMissing:this.value===null}}get element(){return this._element}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get wrapper(){return this._wrapper}get options(){const{format:i,steps:t,placeholder:s,value:l,autoFill:u,enableMouseWheel:o,autoCorrectParts:h,autoSwitchParts:b,autoSwitchKeys:D,twoDigitYearMax:m,allowCaretMode:y,formatPlaceholder:O}=this.props;return{format:i,steps:t,formatPlaceholder:O,placeholder:s,selectPreviousSegmentOnBackspace:!0,value:l||this.value,intlService:this.intlCommon,autoFill:u!==void 0?u:!1,enableMouseWheel:o,autoCorrectParts:h,autoSwitchParts:b,autoSwitchKeys:D||[],twoDigitYearMax:m,allowCaretMode:y}}componentDidMount(){this.setValidity(),this.mounted||(this.wrapper&&this.wrapper.addEventListener("wheel",this.nativeWheel,{passive:!1}),this.kendoDate=this.initKendoDate(),this.kendoDateObject=this.kendoDate.dateObject,this.mounted=!0)}componentDidUpdate(i){this.setValidity(),this.kendoDate&&((i.format!==this.props.format||i.readonly!==this.props.readonly||i.steps!==this.props.steps||this.intlCommon.locale!==this.kendoDate.options.intlService.locale)&&this.kendoDate.setOptions(this.options,!0),i.value!==this.props.value&&(this.kendoDateObject.getValue()!==null||this.isInSegmentSelection&&this.props.value!==null)&&this.kendoDateObject.setValue(this.props.value),this.props.ariaExpanded!==void 0&&this.props.ariaExpanded&&(this.kendoDate.options.placeholder=null),this.props.ariaExpanded!==void 0&&!this.props.ariaExpanded&&(this.kendoDate.options.placeholder=this.props.placeholder),this.kendoDate.refreshElementValue())}componentWillUnmount(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.nativeWheel)}render(){var S;const{size:i=a.defaultProps.size,fillMode:t=a.defaultProps.fillMode,rounded:s=a.defaultProps.rounded,autoFocus:l=a.defaultProps.autoFocus,unstyled:u}=this.props,o=u&&u.uDateInput;this.props._ref&&(this.props._ref.current=this);const h=f.provideLocalizationService(this),b={...a.defaultProps,...this.props},{name:D,label:m,id:y,disabled:O}=b,q=this.text,I=y||this._inputId,C=!this.validityStyles||this.validity.valid,E=d.createElement("span",{ref:k=>{this._wrapper=k},style:m?void 0:{width:this.props.width},dir:this.props.dir,className:n.classNames(n.uDateInput.wrapper({c:o,size:i,fillMode:t,rounded:s,disabled:O,required:this.required,invalid:!C}),this.props.className)},d.createElement("input",{role:this.props.ariaRole||"textbox",readOnly:this.props.readonly,tabIndex:this.props.tabIndex||0,disabled:this.props.disabled,title:this.props.title!==void 0?this.props.title:q,type:"text",spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:l,className:n.classNames(n.uDateInput.inputInner({c:o})),id:I,"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":!C,onKeyDown:this.onChange.bind(this),onChange:this.onChange.bind(this),onWheel:this.onChange.bind(this),onInput:this.onChange.bind(this),onClick:this.onChange.bind(this),name:D,ref:k=>this._element=k}),this.props.children,this.props.clearButton&&this.props.value&&d.createElement(F,{onClick:this.handleClick,key:"clearbutton"}),this.props.spinners&&d.createElement("span",{className:n.classNames(n.uDateInput.inputSpinner({c:o})),onMouseDown:this.spinnersMouseDown},d.createElement(x.Button,{tabIndex:-1,type:"button",rounded:null,className:n.classNames(n.uDateInput.spinnerIncrease({c:o})),icon:"caret-alt-up",svgIcon:P.caretAltUpIcon,"aria-label":h.toLanguageString(r.increaseValue,r.messages[r.increaseValue]),title:h.toLanguageString(r.increaseValue,r.messages[r.increaseValue]),onClick:this.increasePart}),d.createElement(x.Button,{tabIndex:-1,type:"button",rounded:null,className:n.classNames(n.uDateInput.spinnerDecrease({c:o})),icon:"caret-alt-down",svgIcon:P.caretAltDownIcon,"aria-label":h.toLanguageString(r.decreaseValue,r.messages[r.decreaseValue]),title:h.toLanguageString(r.decreaseValue,r.messages[r.decreaseValue]),onClick:this.decreasePart})));return m?d.createElement(_.FloatingLabel,{label:m,editorId:I,editorValue:(S=this._element)==null?void 0:S.value,editorValid:C,editorDisabled:this.props.disabled,children:E,style:{width:this.props.width}}):E}intl(){return f.provideIntlService(this)}get intlCommon(){return new R.DateInputIntl(f.provideIntlService(this))}triggerChange(i){this.valueDuringOnChange=this.value,this.forceUpdate(),this._nativeEvent=i,this.valueDuringOnChange=void 0}onChange(i){this._nativeEvent&&this.props.onChange&&!g.isEqual(this._nativeEvent.oldValue,this.value)&&this.props.onChange.call(void 0,{syntheticEvent:i,nativeEvent:this._nativeEvent.event,value:this._nativeEvent.value,target:this}),this._nativeEvent=null}initKendoDate(){return new L.DateInput(this._element,{...this.options,events:{focus:this.elementOnFocus.bind(this),blur:this.elementOnBlur.bind(this),valueChange:this.triggerChange.bind(this),click:this.handleClick.bind(this)}})}};a.displayName="DateInput",a.propTypes={value: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})]),width:e.oneOfType([e.string,e.number]),tabIndex:e.number,title:e.string,steps:e.shape({year:e.number,month:e.number,day:e.number,hour:e.number,minute:e.number,second:e.number}),min:e.instanceOf(Date),max:e.instanceOf(Date),disabled:e.bool,spinners:e.bool,name:e.string,dir:e.string,label:e.string,id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,ariaRole:e.string,ariaHasPopup:e.oneOfType([e.bool,e.string]),ariaExpanded:e.oneOfType([e.bool]),onChange:e.func,validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool},a.defaultProps={format:w.DEFAULT_FORMAT,size:"medium",rounded:"medium",fillMode:"solid",formatPlaceholder:w.DEFAULT_FORMAT_PLACEHOLDER,spinners:!1,disabled:!1,max:g.cloneDate(v.MAX_DATE),min:g.cloneDate(v.MIN_DATE),minTime:g.cloneDate(v.MIN_TIME),maxTime:g.cloneDate(v.MAX_TIME),validityStyles:!0,validationMessage:j,placeholder:null,enableMouseWheel:!0,autoCorrectParts:!0,autoSwitchParts:!0,allowCaretMode:!1,twoDigitYearMax:68,ariaHasPopup:"grid",autoFocus:!1};let p=a;const M=n.createPropsContext(),T=n.withIdHOC(n.withPropsContext(M,n.withUnstyledHOC(p)));T.displayName="KendoReactDateInput";f.registerForIntl(p);f.registerForLocalization(p);exports.DateInput=T;exports.DateInputPropsContext=M;exports.DateInputWithoutContext=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react"),e=require("prop-types"),g=require("@progress/kendo-date-math"),P=require("@progress/kendo-react-buttons"),M=require("@progress/kendo-svg-icons"),f=require("@progress/kendo-react-intl"),n=require("@progress/kendo-react-common"),_=require("@progress/kendo-react-labels"),L=require("@progress/kendo-dateinputs-common"),w=require("./utils.js"),N=require("../package-metadata.js"),v=require("../utils.js"),o=require("../messages/index.js"),A=require("../timepicker/utils.js"),F=require("../common/ClearButton.js"),R=require("./dateInputIntl.js");function j(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 d=j(V),B="Please enter a valid value!",a=class a extends d.Component{constructor(t){super(t),this.kendoDate=null,this.kendoDateObject=null,this.mounted=!1,this._element=null,this._wrapper=null,this._nativeEvent=null,this.focus=()=>{this._element&&this._element.focus()},this.setValidity=()=>{this.element&&this.element.setCustomValidity&&this.element.setCustomValidity(this.validity.valid?"":this.props.validationMessage||a.defaultProps.validationMessage)},this.updateOnPaste=i=>{!this.element||!this.kendoDate||this.triggerChange(i)},this.spinnersMouseDown=i=>{i.preventDefault();const s=n.getActiveElement(document);this.element&&s!==this.element&&this.element.focus({preventScroll:!0})},this.handleClick=i=>{this.props.onChange&&this.props.onChange(i)},this.nativeWheel=i=>{n.getActiveElement(document)===this.element&&i.preventDefault()},this.increasePart=i=>{var s;(s=this.kendoDate)==null||s.modifyDateSegmentValue(1),this.onChange(i)},this.decreasePart=i=>{var s;(s=this.kendoDate)==null||s.modifyDateSegmentValue(-1),this.onChange(i)},this.elementOnFocus=i=>{this.wrapper&&this.wrapper.classList.add("k-focus"),this.setState({focused:!0})},this.elementOnBlur=i=>{this.wrapper&&this.wrapper.classList.remove("k-focus"),this.setState({focused:!1})},n.validatePackage(N.packageMetadata),this.state={focused:!1}}get _inputId(){return this.props.id+"-accessibility-id"}isFormatChanged(t,i){return typeof t!=typeof i?!0:typeof t=="string"&&typeof i=="string"?t!==i:typeof t=="object"&&typeof i=="object"?JSON.stringify(t)!==JSON.stringify(i):!1}mapFormatToCommonFormat(t){return typeof t=="string"?t:{inputFormat:t,displayFormat:t}}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.kendoDate&&this.kendoDate.value}get name(){return this.props.name}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get isInSegmentSelection(){const{year:t,month:i,day:s,hours:l,minutes:u,seconds:r}=this.kendoDateObject;return(!t||!i||!s||!l||!u||!r)&&(t||i||s||l||u||r)}get text(){const{placeholder:t}=this.props,i=this.kendoDate&&this.kendoDate.currentText||"";return t!=null&&!this.state.focused&&!this.value?t:i}get validity(){const t=w.isInRange(this.value,this.min,this.max)&&A.isInTimeRange(this.value,this.props.minTime,this.props.maxTime),i=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&t,l=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:l,valueMissing:this.value===null}}get element(){return this._element}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get wrapper(){return this._wrapper}get options(){const{format:t,steps:i,placeholder:s,value:l,autoFill:u,enableMouseWheel:r,autoCorrectParts:h,autoSwitchParts:b,autoSwitchKeys:y,twoDigitYearMax:m,allowCaretMode:D,formatPlaceholder:C}=this.props;return{format:t,steps:i,formatPlaceholder:C,placeholder:s,selectPreviousSegmentOnBackspace:!0,value:l||this.value,intlService:this.intlCommon,autoFill:u!==void 0?u:!1,enableMouseWheel:r,autoCorrectParts:h,autoSwitchParts:b,autoSwitchKeys:y||[],twoDigitYearMax:m,allowCaretMode:D}}componentDidMount(){this.setValidity(),this.mounted||(this.wrapper&&this.wrapper.addEventListener("wheel",this.nativeWheel,{passive:!1}),this.kendoDate=this.initKendoDate(),this.kendoDateObject=this.kendoDate.dateObject,this.mounted=!0)}componentDidUpdate(t){this.setValidity(),this.kendoDate&&((this.isFormatChanged(t.format,this.props.format)||t.readonly!==this.props.readonly||t.steps!==this.props.steps||this.intlCommon.locale!==this.kendoDate.options.intlService.locale)&&this.kendoDate.setOptions(this.options,!0),t.value!==this.props.value&&(this.kendoDateObject.getValue()!==null||this.isInSegmentSelection&&this.props.value!==null)&&this.kendoDateObject.setValue(this.props.value),this.props.ariaExpanded!==void 0&&this.props.ariaExpanded&&(this.kendoDate.options.placeholder=null),this.props.ariaExpanded!==void 0&&!this.props.ariaExpanded&&(this.kendoDate.options.placeholder=this.props.placeholder),this.kendoDate.refreshElementValue())}componentWillUnmount(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.nativeWheel)}render(){var x;const{size:t=a.defaultProps.size,fillMode:i=a.defaultProps.fillMode,rounded:s=a.defaultProps.rounded,autoFocus:l=a.defaultProps.autoFocus,unstyled:u}=this.props,r=u&&u.uDateInput;this.props._ref&&(this.props._ref.current=this);const h=f.provideLocalizationService(this),b={...a.defaultProps,...this.props},{name:y,label:m,id:D,disabled:C}=b,I=this.text,E=D||this._inputId,O=!this.validityStyles||this.validity.valid,S=d.createElement("span",{ref:k=>{this._wrapper=k},style:m?void 0:{width:this.props.width},dir:this.props.dir,className:n.classNames(n.uDateInput.wrapper({c:r,size:t,fillMode:i,rounded:s,disabled:C,required:this.required,invalid:!O}),this.props.className)},d.createElement("input",{role:this.props.ariaRole||"textbox",readOnly:this.props.readonly,tabIndex:this.props.tabIndex||0,disabled:this.props.disabled,title:this.props.title!==void 0?this.props.title:I,value:I,type:"text",spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:l,className:n.classNames(n.uDateInput.inputInner({c:r})),id:E,"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":!O,onKeyDown:this.onChange.bind(this),onChange:this.onChange.bind(this),onWheel:this.onChange.bind(this),onInput:this.onChange.bind(this),onClick:this.onChange.bind(this),name:y,ref:k=>this._element=k}),this.props.children,this.props.clearButton&&this.props.value&&d.createElement(F,{onClick:this.handleClick,key:"clearbutton"}),this.props.spinners&&d.createElement("span",{className:n.classNames(n.uDateInput.inputSpinner({c:r})),onMouseDown:this.spinnersMouseDown},d.createElement(P.Button,{tabIndex:-1,type:"button",rounded:null,className:n.classNames(n.uDateInput.spinnerIncrease({c:r})),icon:"caret-alt-up",svgIcon:M.caretAltUpIcon,"aria-label":h.toLanguageString(o.increaseValue,o.messages[o.increaseValue]),title:h.toLanguageString(o.increaseValue,o.messages[o.increaseValue]),onClick:this.increasePart}),d.createElement(P.Button,{tabIndex:-1,type:"button",rounded:null,className:n.classNames(n.uDateInput.spinnerDecrease({c:r})),icon:"caret-alt-down",svgIcon:M.caretAltDownIcon,"aria-label":h.toLanguageString(o.decreaseValue,o.messages[o.decreaseValue]),title:h.toLanguageString(o.decreaseValue,o.messages[o.decreaseValue]),onClick:this.decreasePart})));return m?d.createElement(_.FloatingLabel,{label:m,editorId:E,editorValue:(x=this._element)==null?void 0:x.value,editorValid:O,editorDisabled:this.props.disabled,children:S,style:{width:this.props.width}}):S}intl(){return f.provideIntlService(this)}get intlCommon(){return new R.DateInputIntl(f.provideIntlService(this))}triggerChange(t){this.valueDuringOnChange=this.value,this.forceUpdate(),this._nativeEvent=t,this.valueDuringOnChange=void 0}onChange(t){this._nativeEvent&&this.props.onChange&&!g.isEqual(this._nativeEvent.oldValue,this.value)&&this.props.onChange.call(void 0,{syntheticEvent:t,nativeEvent:this._nativeEvent.event,value:this._nativeEvent.value,target:this}),this._nativeEvent=null}initKendoDate(){return new L.DateInput(this._element,{...this.options,format:this.mapFormatToCommonFormat(this.options.format),events:{focus:this.elementOnFocus.bind(this),blur:this.elementOnBlur.bind(this),valueChange:this.triggerChange.bind(this),click:this.handleClick.bind(this)}})}};a.displayName="DateInput",a.propTypes={value: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})]),width:e.oneOfType([e.string,e.number]),tabIndex:e.number,title:e.string,steps:e.shape({year:e.number,month:e.number,day:e.number,hour:e.number,minute:e.number,second:e.number}),min:e.instanceOf(Date),max:e.instanceOf(Date),disabled:e.bool,spinners:e.bool,name:e.string,dir:e.string,label:e.string,id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,ariaRole:e.string,ariaHasPopup:e.oneOfType([e.bool,e.string]),ariaExpanded:e.oneOfType([e.bool]),onChange:e.func,validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool},a.defaultProps={format:w.DEFAULT_FORMAT,size:"medium",rounded:"medium",fillMode:"solid",formatPlaceholder:w.DEFAULT_FORMAT_PLACEHOLDER,spinners:!1,disabled:!1,max:g.cloneDate(v.MAX_DATE),min:g.cloneDate(v.MIN_DATE),minTime:g.cloneDate(v.MIN_TIME),maxTime:g.cloneDate(v.MAX_TIME),validityStyles:!0,validationMessage:B,placeholder:null,enableMouseWheel:!0,autoCorrectParts:!0,autoSwitchParts:!0,allowCaretMode:!1,twoDigitYearMax:68,ariaHasPopup:"grid",autoFocus:!1};let p=a;const T=n.createPropsContext(),q=n.withIdHOC(n.withPropsContext(T,n.withUnstyledHOC(p)));q.displayName="KendoReactDateInput";f.registerForIntl(p);f.registerForLocalization(p);exports.DateInput=q;exports.DateInputPropsContext=T;exports.DateInputWithoutContext=p;

package/dateinput/DateInput.mjs

@@ -11,35 +11,35 @@ import e from "prop-types";
 import { cloneDate as c, isEqual as T } from "@progress/kendo-date-math";
 import { Button as x } from "@progress/kendo-react-buttons";
 import { caretAltUpIcon as L, caretAltDownIcon as _ } from "@progress/kendo-svg-icons";
-import { provideLocalizationService as V, provideIntlService as S, registerForIntl as A, registerForLocalization as F } from "@progress/kendo-react-intl";
-import { getActiveElement as P, validatePackage as N, classNames as p, uDateInput as u, createPropsContext as q, withIdHOC as B, withPropsContext as R, withUnstyledHOC as U } from "@progress/kendo-react-common";
-import { FloatingLabel as z } from "@progress/kendo-react-labels";
-import { DateInput as j } from "@progress/kendo-dateinputs-common";
+import { provideLocalizationService as V, provideIntlService as P, registerForIntl as A, registerForLocalization as F } from "@progress/kendo-react-intl";
+import { getActiveElement as M, validatePackage as N, classNames as d, uDateInput as u, createPropsContext as q, withIdHOC as B, withPropsContext as R, withUnstyledHOC as j } from "@progress/kendo-react-common";
+import { FloatingLabel as U } from "@progress/kendo-react-labels";
+import { DateInput as z } from "@progress/kendo-dateinputs-common";
 import { DEFAULT_FORMAT as H, DEFAULT_FORMAT_PLACEHOLDER as K, isInRange as W } from "./utils.mjs";
-import { packageMetadata as X } from "../package-metadata.mjs";
-import { MAX_DATE as Y, MIN_DATE as G, MIN_TIME as Z, MAX_TIME as $ } from "../utils.mjs";
-import { increaseValue as g, messages as f, decreaseValue as v } from "../messages/index.mjs";
-import { isInTimeRange as J } from "../timepicker/utils.mjs";
+import { packageMetadata as J } from "../package-metadata.mjs";
+import { MAX_DATE as X, MIN_DATE as Y, MIN_TIME as G, MAX_TIME as Z } from "../utils.mjs";
+import { increaseValue as f, messages as g, decreaseValue as v } from "../messages/index.mjs";
+import { isInTimeRange as $ } from "../timepicker/utils.mjs";
 import Q from "../common/ClearButton.mjs";
 import { DateInputIntl as ee } from "./dateInputIntl.mjs";
-const te = "Please enter a valid value!", a = class a extends l.Component {
+const te = "Please enter a valid value!", n = class n extends l.Component {
   constructor(t) {
     super(t), this.kendoDate = null, this.kendoDateObject = null, this.mounted = !1, this._element = null, this._wrapper = null, this._nativeEvent = null, this.focus = () => {
       this._element && this._element.focus();
     }, this.setValidity = () => {
       this.element && this.element.setCustomValidity && this.element.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || a.defaultProps.validationMessage
+        this.validity.valid ? "" : this.props.validationMessage || n.defaultProps.validationMessage
       );
     }, this.updateOnPaste = (i) => {
       !this.element || !this.kendoDate || this.triggerChange(i);
     }, this.spinnersMouseDown = (i) => {
       i.preventDefault();
-      const s = P(document);
+      const s = M(document);
       this.element && s !== this.element && this.element.focus({ preventScroll: !0 });
     }, this.handleClick = (i) => {
       this.props.onChange && this.props.onChange(i);
     }, this.nativeWheel = (i) => {
-      P(document) === this.element && i.preventDefault();
+      M(document) === this.element && i.preventDefault();
     }, this.increasePart = (i) => {
       var s;
       (s = this.kendoDate) == null || s.modifyDateSegmentValue(1), this.onChange(i);
@@ -50,13 +50,22 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
       this.wrapper && this.wrapper.classList.add("k-focus"), this.setState({ focused: !0 });
     }, this.elementOnBlur = (i) => {
       this.wrapper && this.wrapper.classList.remove("k-focus"), this.setState({ focused: !1 });
-    }, N(X), this.state = {
+    }, N(J), this.state = {
       focused: !1
     };
   }
   get _inputId() {
     return this.props.id + "-accessibility-id";
   }
+  isFormatChanged(t, i) {
+    return typeof t != typeof i ? !0 : typeof t == "string" && typeof i == "string" ? t !== i : typeof t == "object" && typeof i == "object" ? JSON.stringify(t) !== JSON.stringify(i) : !1;
+  }
+  mapFormatToCommonFormat(t) {
+    return typeof t == "string" ? t : {
+      inputFormat: t,
+      displayFormat: t
+    };
+  }
   /* Public Getters */
   /**
    * Gets the value of the DateInput.
@@ -71,14 +80,14 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
     return this.props.name;
   }
   get min() {
-    return this.props.min !== void 0 ? this.props.min : a.defaultProps.min;
+    return this.props.min !== void 0 ? this.props.min : n.defaultProps.min;
   }
   get max() {
-    return this.props.max !== void 0 ? this.props.max : a.defaultProps.max;
+    return this.props.max !== void 0 ? this.props.max : n.defaultProps.max;
   }
   get isInSegmentSelection() {
-    const { year: t, month: i, day: s, hours: o, minutes: r, seconds: n } = this.kendoDateObject;
-    return (!t || !i || !s || !o || !r || !n) && (t || i || s || o || r || n);
+    const { year: t, month: i, day: s, hours: o, minutes: r, seconds: a } = this.kendoDateObject;
+    return (!t || !i || !s || !o || !r || !a) && (t || i || s || o || r || a);
   }
   /**
    * @hidden
@@ -91,7 +100,7 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
    * Represents the validity state into which the DateInput is set.
    */
   get validity() {
-    const t = W(this.value, this.min, this.max) && J(this.value, this.props.minTime, this.props.maxTime), i = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && t, o = this.props.valid !== void 0 ? this.props.valid : s;
+    const t = W(this.value, this.min, this.max) && $(this.value, this.props.minTime, this.props.maxTime), i = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && t, o = this.props.valid !== void 0 ? this.props.valid : s;
     return {
       customError: i,
       rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
@@ -138,7 +147,7 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : a.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : n.defaultProps.validityStyles;
   }
   /**
    * @hidden
@@ -162,11 +171,11 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
       placeholder: s,
       value: o,
       autoFill: r,
-      enableMouseWheel: n,
+      enableMouseWheel: a,
       autoCorrectParts: h,
-      autoSwitchParts: b,
-      autoSwitchKeys: y,
-      twoDigitYearMax: d,
+      autoSwitchParts: y,
+      autoSwitchKeys: b,
+      twoDigitYearMax: p,
       allowCaretMode: D,
       formatPlaceholder: C
     } = this.props;
@@ -179,11 +188,11 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
       value: o || this.value,
       intlService: this.intlCommon,
       autoFill: r !== void 0 ? r : !1,
-      enableMouseWheel: n,
+      enableMouseWheel: a,
       autoCorrectParts: h,
-      autoSwitchParts: b,
-      autoSwitchKeys: y || [],
-      twoDigitYearMax: d,
+      autoSwitchParts: y,
+      autoSwitchKeys: b || [],
+      twoDigitYearMax: p,
       allowCaretMode: D
     };
   }
@@ -197,7 +206,7 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
    * @hidden
    */
   componentDidUpdate(t) {
-    this.setValidity(), this.kendoDate && ((t.format !== this.props.format || t.readonly !== this.props.readonly || t.steps !== this.props.steps || this.intlCommon.locale !== this.kendoDate.options.intlService.locale) && this.kendoDate.setOptions(this.options, !0), t.value !== this.props.value && (this.kendoDateObject.getValue() !== null || this.isInSegmentSelection && this.props.value !== null) && this.kendoDateObject.setValue(this.props.value), this.props.ariaExpanded !== void 0 && this.props.ariaExpanded && (this.kendoDate.options.placeholder = null), this.props.ariaExpanded !== void 0 && !this.props.ariaExpanded && (this.kendoDate.options.placeholder = this.props.placeholder), this.kendoDate.refreshElementValue());
+    this.setValidity(), this.kendoDate && ((this.isFormatChanged(t.format, this.props.format) || t.readonly !== this.props.readonly || t.steps !== this.props.steps || this.intlCommon.locale !== this.kendoDate.options.intlService.locale) && this.kendoDate.setOptions(this.options, !0), t.value !== this.props.value && (this.kendoDateObject.getValue() !== null || this.isInSegmentSelection && this.props.value !== null) && this.kendoDateObject.setValue(this.props.value), this.props.ariaExpanded !== void 0 && this.props.ariaExpanded && (this.kendoDate.options.placeholder = null), this.props.ariaExpanded !== void 0 && !this.props.ariaExpanded && (this.kendoDate.options.placeholder = this.props.placeholder), this.kendoDate.refreshElementValue());
   }
   /**
    * @hidden
@@ -209,26 +218,26 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
    * @hidden
    */
   render() {
-    var I;
+    var S;
     const {
-      size: t = a.defaultProps.size,
-      fillMode: i = a.defaultProps.fillMode,
-      rounded: s = a.defaultProps.rounded,
-      autoFocus: o = a.defaultProps.autoFocus,
+      size: t = n.defaultProps.size,
+      fillMode: i = n.defaultProps.fillMode,
+      rounded: s = n.defaultProps.rounded,
+      autoFocus: o = n.defaultProps.autoFocus,
       unstyled: r
-    } = this.props, n = r && r.uDateInput;
+    } = this.props, a = r && r.uDateInput;
     this.props._ref && (this.props._ref.current = this);
-    const h = V(this), b = { ...a.defaultProps, ...this.props }, { name: y, label: d, id: D, disabled: C } = b, M = this.text, E = D || this._inputId, O = !this.validityStyles || this.validity.valid, k = /* @__PURE__ */ l.createElement(
+    const h = V(this), y = { ...n.defaultProps, ...this.props }, { name: b, label: p, id: D, disabled: C } = y, E = this.text, k = D || this._inputId, O = !this.validityStyles || this.validity.valid, I = /* @__PURE__ */ l.createElement(
       "span",
       {
         ref: (w) => {
           this._wrapper = w;
         },
-        style: d ? void 0 : { width: this.props.width },
+        style: p ? void 0 : { width: this.props.width },
         dir: this.props.dir,
-        className: p(
+        className: d(
           u.wrapper({
-            c: n,
+            c: a,
             size: t,
             fillMode: i,
             rounded: s,
@@ -246,14 +255,15 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
           readOnly: this.props.readonly,
           tabIndex: this.props.tabIndex || 0,
           disabled: this.props.disabled,
-          title: this.props.title !== void 0 ? this.props.title : M,
+          title: this.props.title !== void 0 ? this.props.title : E,
+          value: E,
           type: "text",
           spellCheck: !1,
           autoComplete: "off",
           autoCorrect: "off",
           autoFocus: o,
-          className: p(u.inputInner({ c: n })),
-          id: E,
+          className: d(u.inputInner({ c: a })),
+          id: k,
           "aria-label": this.props.ariaLabel,
           "aria-labelledby": this.props.ariaLabelledBy,
           "aria-describedby": this.props.ariaDescribedBy,
@@ -268,7 +278,7 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
           onWheel: this.onChange.bind(this),
           onInput: this.onChange.bind(this),
           onClick: this.onChange.bind(this),
-          name: y,
+          name: b,
           ref: (w) => this._element = w
         }
       ),
@@ -277,7 +287,7 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
       this.props.spinners && /* @__PURE__ */ l.createElement(
         "span",
         {
-          className: p(u.inputSpinner({ c: n })),
+          className: d(u.inputSpinner({ c: a })),
           onMouseDown: this.spinnersMouseDown
         },
         /* @__PURE__ */ l.createElement(
@@ -286,11 +296,11 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
             tabIndex: -1,
             type: "button",
             rounded: null,
-            className: p(u.spinnerIncrease({ c: n })),
+            className: d(u.spinnerIncrease({ c: a })),
             icon: "caret-alt-up",
             svgIcon: L,
-            "aria-label": h.toLanguageString(g, f[g]),
-            title: h.toLanguageString(g, f[g]),
+            "aria-label": h.toLanguageString(f, g[f]),
+            title: h.toLanguageString(f, g[f]),
             onClick: this.increasePart
           }
         ),
@@ -300,40 +310,40 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
             tabIndex: -1,
             type: "button",
             rounded: null,
-            className: p(u.spinnerDecrease({ c: n })),
+            className: d(u.spinnerDecrease({ c: a })),
             icon: "caret-alt-down",
             svgIcon: _,
-            "aria-label": h.toLanguageString(v, f[v]),
-            title: h.toLanguageString(v, f[v]),
+            "aria-label": h.toLanguageString(v, g[v]),
+            title: h.toLanguageString(v, g[v]),
             onClick: this.decreasePart
           }
         )
       )
     );
-    return d ? /* @__PURE__ */ l.createElement(
-      z,
+    return p ? /* @__PURE__ */ l.createElement(
+      U,
       {
-        label: d,
-        editorId: E,
-        editorValue: (I = this._element) == null ? void 0 : I.value,
+        label: p,
+        editorId: k,
+        editorValue: (S = this._element) == null ? void 0 : S.value,
         editorValid: O,
         editorDisabled: this.props.disabled,
-        children: k,
+        children: I,
         style: { width: this.props.width }
       }
-    ) : k;
+    ) : I;
   }
   /**
    * @hidden
    */
   intl() {
-    return S(this);
+    return P(this);
   }
   /**
    * @hidden
    */
   get intlCommon() {
-    return new ee(S(this));
+    return new ee(P(this));
   }
   /*  end handlers */
   triggerChange(t) {
@@ -348,8 +358,9 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
     }), this._nativeEvent = null;
   }
   initKendoDate() {
-    return new j(this._element, {
+    return new z(this._element, {
       ...this.options,
+      format: this.mapFormatToCommonFormat(this.options.format),
       events: {
         focus: this.elementOnFocus.bind(this),
         blur: this.elementOnBlur.bind(this),
@@ -359,7 +370,7 @@ const te = "Please enter a valid value!", a = class a extends l.Component {
     });
   }
 };
-a.displayName = "DateInput", a.propTypes = {
+n.displayName = "DateInput", n.propTypes = {
   value: e.instanceOf(Date),
   format: e.oneOfType([
     e.string,
@@ -431,7 +442,7 @@ a.displayName = "DateInput", a.propTypes = {
   rounded: e.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: e.oneOf([null, "solid", "flat", "outline"]),
   autoFocus: e.bool
-}, a.defaultProps = {
+}, n.defaultProps = {
   format: H,
   size: "medium",
   rounded: "medium",
@@ -439,10 +450,10 @@ a.displayName = "DateInput", a.propTypes = {
   formatPlaceholder: K,
   spinners: !1,
   disabled: !1,
-  max: c(Y),
-  min: c(G),
-  minTime: c(Z),
-  maxTime: c($),
+  max: c(X),
+  min: c(Y),
+  minTime: c(G),
+  maxTime: c(Z),
   validityStyles: !0,
   validationMessage: te,
   placeholder: null,
@@ -455,11 +466,11 @@ a.displayName = "DateInput", a.propTypes = {
   ariaHasPopup: "grid",
   autoFocus: !1
 };
-let m = a;
+let m = n;
 const ie = q(), se = B(
   R(
     ie,
-    U(m)
+    j(m)
   )
 );
 se.displayName = "KendoReactDateInput";