@progress/kendo-react-dateinputs 9.3.0-develop.1 → 9.3.0-develop.2

package/daterangepicker/DateRangePicker.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 k=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),x=require("@progress/kendo-svg-icons"),T=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),P=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),n=require("../messages/index.js"),_=require("@progress/kendo-react-buttons"),A=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function F(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const i=F(k),l=class l extends i.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=i.createRef(),this._endDateInput=i.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(P.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),title:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(A.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{overflowHidden:!0},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},o.validatePackage(T.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}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 document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{autoFocus:a,inputAttributes:e}=this.props,s=this.value||h.EMPTY_SELECTIONRANGE,r=this.mobileMode&&this.show?this.state.currentValue:s,m=(this.props.startDateInputSettings||{}).id||this._startInputId,w=(this.props.endDateInputSettings||{}).id||this._endInputId,S=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),C=this.localizationService.toLanguageString(n.start,n.messages[n.start]),E=this.localizationService.toLanguageString(n.end,n.messages[n.end]),R=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:C,format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:r.start,onChange:this.handleStartChange,inputAttributes:this.props.inputAttributes},v={disableSelection:this.mobileMode&&!0,label:E,format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:r.end,onChange:this.handleEndChange,inputAttributes:this.props.inputAttributes},y=i.createElement(_.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":m+" "+w,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:x.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:O=>{this._element=O},className:S,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...f,autoFocus:a,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?y:R,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup())}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInputWithoutContext.propTypes),focusedDate: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"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),autoFocus:t.bool,inputAttributes:t.object},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const b=o.createPropsContext(),I=o.withIdHOC(o.withPropsContext(b,o.withAdaptiveModeContext(p)));I.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=I;exports.DateRangePickerPropsContext=b;exports.DateRangePickerWithoutContext=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),T=require("@progress/kendo-svg-icons"),x=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),P=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),n=require("../messages/index.js"),_=require("@progress/kendo-react-buttons"),A=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function F(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const i=F(k),l=class l extends i.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=i.createRef(),this._endDateInput=i.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(P.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),title:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(A.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{overflowHidden:!0},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},o.validatePackage(x.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}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 document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{autoFocus:a,inputAttributes:e}=this.props,s=this.value||h.EMPTY_SELECTIONRANGE,r=this.mobileMode&&this.show?this.state.currentValue:s,m=(this.props.startDateInputSettings||{}).id||this._startInputId,w=(this.props.endDateInputSettings||{}).id||this._endInputId,S=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),C=this.localizationService.toLanguageString(n.start,n.messages[n.start]),E=this.localizationService.toLanguageString(n.end,n.messages[n.end]),y=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:C,format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:r.start,onChange:this.handleStartChange,inputAttributes:this.props.inputAttributes},v={disableSelection:this.mobileMode&&!0,label:E,format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:r.end,onChange:this.handleEndChange,inputAttributes:this.props.inputAttributes},R=i.createElement(_.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":m+" "+w,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:T.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:O=>{this._element=O},className:S,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...f,autoFocus:a,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?R:y,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup())}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInput.propTypes),focusedDate: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"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date)),end:u.nullable(t.instanceOf(Date))}),autoFocus:t.bool,inputAttributes:t.object},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const b=o.createPropsContext(),I=o.withIdHOC(o.withPropsContext(b,o.withAdaptiveModeContext(p)));I.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=I;exports.DateRangePickerPropsContext=b;exports.DateRangePickerWithoutContext=p;

package/daterangepicker/DateRangePicker.mjs

@@ -9,19 +9,19 @@
 import * as i from "react";
 import e from "prop-types";
 import { Popup as _ } from "@progress/kendo-react-popup";
-import { cloneDate as v } from "@progress/kendo-date-math";
-import { classNames as w, Keys as c, validatePackage as F, canUseDOM as D, IconWrap as P, getActiveElement as z, createPropsContext as B, withIdHOC as N, withPropsContext as L, withAdaptiveModeContext as V } from "@progress/kendo-react-common";
+import { cloneDate as w } from "@progress/kendo-date-math";
+import { classNames as D, Keys as c, validatePackage as F, canUseDOM as b, IconWrap as P, getActiveElement as z, createPropsContext as B, withIdHOC as N, withPropsContext as L, withAdaptiveModeContext as V } from "@progress/kendo-react-common";
 import { provideLocalizationService as m, registerForLocalization as K } from "@progress/kendo-react-intl";
-import { arrowsSwapIcon as q } from "@progress/kendo-svg-icons";
-import { packageMetadata as U } from "../package-metadata.mjs";
-import { DateInputWithoutContext as W, DateInput as b } from "../dateinput/DateInput.mjs";
-import { MultiViewCalendar as H } from "../calendar/components/MultiViewCalendar.mjs";
+import { arrowsSwapIcon as U } from "@progress/kendo-svg-icons";
+import { packageMetadata as W } from "../package-metadata.mjs";
+import { DateInput as f } from "../dateinput/DateInput.mjs";
+import { MultiViewCalendar as q } from "../calendar/components/MultiViewCalendar.mjs";
 import { EMPTY_SELECTIONRANGE as r } from "../calendar/models/SelectionRange.mjs";
-import { nullable as h, MAX_DATE as j, MIN_DATE as G } from "../utils.mjs";
-import { dateRangePickerCancel as I, messages as l, dateRangePickerSet as C, start as S, end as y, separator as E, swapStartEnd as u } from "../messages/index.mjs";
-import { Button as X } from "@progress/kendo-react-buttons";
-import { AdaptiveMode as Y } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as Z } from "@progress/kendo-react-layout";
+import { nullable as h, MAX_DATE as H, MIN_DATE as j } from "../utils.mjs";
+import { dateRangePickerCancel as I, messages as l, dateRangePickerSet as C, start as S, end as y, separator as E, swapStartEnd as p } from "../messages/index.mjs";
+import { Button as G } from "@progress/kendo-react-buttons";
+import { AdaptiveMode as X } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as Y } from "@progress/kendo-react-layout";
 const o = class o extends i.Component {
   constructor(a) {
     super(a), this._element = null, this._calendar = null, this._startDateInput = i.createRef(), this._endDateInput = i.createRef(), this.shouldFocusDateInput = !1, this.shouldFocusCalendar = !1, this.focus = () => {
@@ -45,10 +45,10 @@ const o = class o extends i.Component {
         dir: this.props.dir,
         onChange: this.handleCalendarChange
       };
-      return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(H, { ...s, ref: this.setCalendarRef });
+      return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(q, { ...s, ref: this.setCalendarRef });
     }, this.renderPopup = () => {
       const t = {
-        popupClass: w("k-calendar-container", "k-daterangepicker-popup"),
+        popupClass: D("k-calendar-container", "k-daterangepicker-popup"),
         animate: this._element !== null,
         anchor: this._element,
         id: this._popupId,
@@ -80,7 +80,7 @@ const o = class o extends i.Component {
           onApply: this.handleBlur
         }
       };
-      return /* @__PURE__ */ i.createElement(Y, { ...s }, /* @__PURE__ */ i.createElement(Z, { overflowHidden: !0 }, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
+      return /* @__PURE__ */ i.createElement(X, { ...s }, /* @__PURE__ */ i.createElement(Y, { overflowHidden: !0 }, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
     }, this.handleReverseClick = (t) => {
       const s = {
         start: this.value.end,
@@ -113,12 +113,12 @@ const o = class o extends i.Component {
     }, this.handleEndChange = (t) => {
       const s = {
         start: this.value.start,
-        end: v(t.value || void 0)
+        end: w(t.value || void 0)
       };
       this.handleChange(s, t);
     }, this.handleStartChange = (t) => {
       const s = {
-        start: v(t.value || void 0),
+        start: w(t.value || void 0),
         end: this.value.end
       };
       this.handleChange(s, t);
@@ -150,7 +150,7 @@ const o = class o extends i.Component {
         n.call(void 0, d);
       }
       this.valueDuringOnChange = void 0;
-    }, F(U), this.state = {
+    }, F(W), this.state = {
       show: this.props.show || this.props.defaultShow || o.defaultProps.defaultShow,
       value: this.props.value || this.props.defaultValue || o.defaultProps.defaultValue,
       currentValue: r
@@ -208,7 +208,7 @@ const o = class o extends i.Component {
     return this.props.max !== void 0 ? this.props.max : o.defaultProps.max;
   }
   get document() {
-    if (D)
+    if (b)
       return this.element && this.element.ownerDocument || document;
   }
   get localizationService() {
@@ -226,7 +226,7 @@ const o = class o extends i.Component {
    */
   componentDidMount() {
     var a;
-    this.observerResize = D && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (a = this.document) != null && a.body && this.observerResize && this.observerResize.observe(this.document.body);
+    this.observerResize = b && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (a = this.document) != null && a.body && this.observerResize && this.observerResize.observe(this.document.body);
   }
   /**
    * @hidden
@@ -245,15 +245,15 @@ const o = class o extends i.Component {
    * @hidden
    */
   render() {
-    const { autoFocus: a, inputAttributes: t } = this.props, s = this.value || r, n = this.mobileMode && this.show ? this.state.currentValue : s, d = (this.props.startDateInputSettings || {}).id || this._startInputId, x = (this.props.endDateInputSettings || {}).id || this._endInputId, R = w(
+    const { autoFocus: a, inputAttributes: t } = this.props, s = this.value || r, n = this.mobileMode && this.show ? this.state.currentValue : s, d = (this.props.startDateInputSettings || {}).id || this._startInputId, x = (this.props.endDateInputSettings || {}).id || this._endInputId, O = D(
       "k-daterangepicker",
       {
         "k-disabled": this.props.disabled
       },
       this.props.className
-    ), O = this.localizationService.toLanguageString(S, l[S]), k = this.localizationService.toLanguageString(y, l[y]), M = this.localizationService.toLanguageString(E, l[E]), f = {
+    ), R = this.localizationService.toLanguageString(S, l[S]), k = this.localizationService.toLanguageString(y, l[y]), M = this.localizationService.toLanguageString(E, l[E]), g = {
       disableSelection: this.mobileMode && !0,
-      label: O,
+      label: R,
       format: this.props.format,
       min: this.min,
       max: this.max,
@@ -267,7 +267,7 @@ const o = class o extends i.Component {
       value: n.start,
       onChange: this.handleStartChange,
       inputAttributes: this.props.inputAttributes
-    }, g = {
+    }, v = {
       disableSelection: this.mobileMode && !0,
       label: k,
       format: this.props.format,
@@ -284,21 +284,21 @@ const o = class o extends i.Component {
       onChange: this.handleEndChange,
       inputAttributes: this.props.inputAttributes
     }, A = /* @__PURE__ */ i.createElement(
-      X,
+      G,
       {
         type: "button",
         className: "k-select",
         fillMode: "flat",
-        title: m(this).toLanguageString(u, l[u]),
+        title: m(this).toLanguageString(p, l[p]),
         onMouseDown: this.handleReverseMouseDown,
         onClick: this.handleReverseClick,
         "aria-controls": d + " " + x,
         "aria-label": m(this).toLanguageString(
-          u,
-          l[u]
+          p,
+          l[p]
         )
       },
-      /* @__PURE__ */ i.createElement(P, { style: { transform: "rotate(90deg)" }, name: "arrows-swap", icon: q })
+      /* @__PURE__ */ i.createElement(P, { style: { transform: "rotate(90deg)" }, name: "arrows-swap", icon: U })
     );
     return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
       "span",
@@ -306,7 +306,7 @@ const o = class o extends i.Component {
         ref: (T) => {
           this._element = T;
         },
-        className: R,
+        className: O,
         style: this.props.style,
         id: this.props.id,
         "aria-labelledby": this.props.ariaLabelledBy,
@@ -318,10 +318,10 @@ const o = class o extends i.Component {
         onBlur: this.mobileMode ? void 0 : this.handleBlur,
         dir: this.props.dir
       },
-      this.props.startDateInput ? /* @__PURE__ */ i.createElement(this.props.startDateInput, { ...f }) : /* @__PURE__ */ i.createElement(
-        b,
+      this.props.startDateInput ? /* @__PURE__ */ i.createElement(this.props.startDateInput, { ...g }) : /* @__PURE__ */ i.createElement(
+        f,
         {
-          ...f,
+          ...g,
           autoFocus: a,
           ref: this._startDateInput,
           ariaRole: "combobox",
@@ -329,10 +329,10 @@ const o = class o extends i.Component {
         }
       ),
       (this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ? A : M,
-      this.props.endDateInput ? /* @__PURE__ */ i.createElement(this.props.endDateInput, { ...g }) : /* @__PURE__ */ i.createElement(
-        b,
+      this.props.endDateInput ? /* @__PURE__ */ i.createElement(this.props.endDateInput, { ...v }) : /* @__PURE__ */ i.createElement(
+        f,
         {
-          ...g,
+          ...v,
           ref: this._endDateInput,
           ariaRole: "combobox",
           ariaControls: this._popupId
@@ -373,7 +373,7 @@ o.displayName = "DateRangePicker", o.propTypes = {
     end: h(e.instanceOf(Date).isRequired)
   }),
   disabled: e.bool,
-  endDateInputSettings: e.shape(W.propTypes),
+  endDateInputSettings: e.shape(f.propTypes),
   focusedDate: e.instanceOf(Date),
   format: e.oneOfType([
     e.string,
@@ -411,8 +411,8 @@ o.displayName = "DateRangePicker", o.propTypes = {
   tabIndex: e.number,
   dir: e.string,
   value: e.shape({
-    start: h(e.instanceOf(Date).isRequired),
-    end: h(e.instanceOf(Date).isRequired)
+    start: h(e.instanceOf(Date)),
+    end: h(e.instanceOf(Date))
   }),
   autoFocus: e.bool,
   inputAttributes: e.object
@@ -422,22 +422,22 @@ o.displayName = "DateRangePicker", o.propTypes = {
   defaultValue: r,
   disabled: !1,
   format: "d",
-  max: j,
-  min: G,
+  max: H,
+  min: j,
   swapButton: !1,
   autoFocus: !1
 };
-let p = o;
-const J = B(), Q = N(
+let u = o;
+const Z = B(), J = N(
   L(
-    J,
-    V(p)
+    Z,
+    V(u)
   )
 );
-Q.displayName = "KendoReactDateRangePicker";
-K(p);
+J.displayName = "KendoReactDateRangePicker";
+K(u);
 export {
-  Q as DateRangePicker,
-  J as DateRangePickerPropsContext,
-  p as DateRangePickerWithoutContext
+  J as DateRangePicker,
+  Z as DateRangePickerPropsContext,
+  u as DateRangePickerWithoutContext
 };