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

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-dateinputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1784220802,version:"15.1.1-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-dateinputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1784273478,version:"15.2.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -6,8 +6,8 @@ export const packageMetadata = Object.freeze({
     productName: 'KendoReact',
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
-    publishDate: 1784220802,
-    version: '15.1.1-develop.2',
+    publishDate: 1784273478,
+    version: '15.2.0-develop.1',
     licensingDocsUrl:
         'https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-dateinputs",
-  "version": "15.1.1-develop.2",
+  "version": "15.2.0-develop.1",
   "description": "React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -28,12 +28,12 @@
     "@progress/kendo-date-math": "^1.4.0",
     "@progress/kendo-licensing": "^1.7.2",
     "@progress/kendo-dateinputs-common": "^0.4.7",
-    "@progress/kendo-react-buttons": "15.1.1-develop.2",
-    "@progress/kendo-react-common": "15.1.1-develop.2",
-    "@progress/kendo-react-intl": "15.1.1-develop.2",
-    "@progress/kendo-react-labels": "15.1.1-develop.2",
-    "@progress/kendo-react-layout": "15.1.1-develop.2",
-    "@progress/kendo-react-popup": "15.1.1-develop.2",
+    "@progress/kendo-react-buttons": "15.2.0-develop.1",
+    "@progress/kendo-react-common": "15.2.0-develop.1",
+    "@progress/kendo-react-intl": "15.2.0-develop.1",
+    "@progress/kendo-react-labels": "15.2.0-develop.1",
+    "@progress/kendo-react-layout": "15.2.0-develop.1",
+    "@progress/kendo-react-popup": "15.2.0-develop.1",
     "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -89,7 +89,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1784220802,
+      "publishDate": 1784273478,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
     }
   },

package/timepicker/TimePicker.d.ts

@@ -217,6 +217,7 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
         }> | null | undefined>>;
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
         min: PropTypes.Requireable<Date>;
         max: PropTypes.Requireable<Date>;

package/timepicker/TimePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("react"),e=require("prop-types"),$=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),J=require("@progress/kendo-svg-icons"),P=require("@progress/kendo-react-intl"),T=require("../package-metadata.js"),a=require("../messages/index.js"),Q=require("../dateinput/DateInput.js"),Y=require("./TimeSelector.js"),p=require("../utils.js"),g=require("./utils.js"),ee=require("../hooks/usePickerFloatingLabel.js"),te=require("@progress/kendo-react-buttons"),ie=require("../common/AdaptiveMode.js"),se=require("@progress/kendo-react-layout");function oe(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>c[t]})}}return s.default=c,Object.freeze(s)}const r=oe(Z),l=class l extends r.Component{constructor(s){super(s),this._element=null,this._dateInput=r.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.showLicenseWatermark=!1,this.handleKendoPasteValue=t=>{if(t instanceof Date&&!isNaN(t.getTime())){this.applyKendoPasteTime(t);return}const i=t!=null?String(t):"";if(!i)return;const o=new Date(i);isNaN(o.getTime())||this.applyKendoPasteTime(o)},this.applyKendoPasteTime=t=>{const i=this.normalizeTime(t);if(!g.isInRange(i,this.min,this.max))return;const o=new Event("change",{bubbles:!0}),h={target:this._element,currentTarget:this._element,nativeEvent:o};this.handleValueChange({syntheticEvent:h,nativeEvent:o,value:i})},this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:i,nowButton:o,disabled:h,format:d,steps:u,unstyled:f}=this.props;return r.createElement(Y.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:i,disabled:h,nowButton:o,format:d,min:this.min,max:this.max,steps:u,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:f})},this.renderPopup=()=>{const{popupClass:t,...i}=this.popupSettings,{unstyled:o}=this.props,h=o&&o.uTimePicker,d=n.classNames(t),u={popupClass:n.uTimePicker.popup({c:h}),show:this.show,animate:this.element!==null,anchor:this.element,className:d,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...i};return this.props.popup?r.createElement(this.props.popup,{...u},this.renderTimeSelector()):r.createElement($.Popup,{...u},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,i={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:this.localizationService.toLanguageString(a.toggleClock,a.messages[a.timePickerCancel]),onCancel:this.handleValueReject,applyText:this.localizationService.toLanguageString(a.timePickerSet,a.messages[a.timePickerSet]),onApply:o=>this.handleValueChange(o)}};return r.createElement(ie.AdaptiveMode,{...i},r.createElement(se.ActionSheetContent,null,this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,i)=>t.value!==void 0?t.value:i.value,this.nextShow=(t,i)=>t.show!==void 0?t.show:i.show,this.handleInputValueChange=t=>{const i=this.mergeTime(t.value);this.handleValueChange({...t,value:i})},this.handleTimeChange=t=>{this.setState({candidate:t.time})},this.handleValueChange=t=>{this.setState({value:y.cloneDate(t.value||this.state.candidate)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:i}=this.props,o=this.valueDuringOnChange!==void 0?this.value:this.state.candidate||this.value;i&&i.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:o,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setState({candidate:null}),this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleValueReject=t=>{this.mobileMode||(this.shouldFocusDateInput=!0),this.setShow(!1)},this.handleClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:i,keyCode:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},this.showLicenseWatermark=!n.validatePackage(T.packageMetadata,{component:"TimePicker"}),this.licenseMessage=n.getLicenseMessage(T.packageMetadata),this.state={value:this.props.defaultValue||l.defaultProps.defaultValue,show:this.props.defaultShow||l.defaultProps.defaultShow,focused:!1,candidate:null},this.normalizeTime=this.normalizeTime.bind(this),this.setShow=this.setShow.bind(this),this.mergeTime=this.mergeTime.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get timeSelector(){return this._timeSelector}get value(){const s=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return s!==null?y.cloneDate(s):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 validity(){const s=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),i=this.normalizeTime(this.max),o=g.isInRange(s,t,i),h=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,u=this.props.valid!==void 0?this.props.valid:d;return{customError:h,rangeOverflow:g.isBiggerThanMax(s,i),rangeUnderflow:g.isSmallerThanMin(s,t),valid:u,valueMissing:this.value===null}}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}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 popupSettings(){return this.props.popupSettings||l.defaultProps.popupSettings}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 dateInputComp(){return this.props.dateInput||l.defaultProps.dateInput}get localizationService(){return P.provideLocalizationService(this)}componentDidMount(){var t;this.observerResize=n.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);const s=this.props.name||this.props.id;this.KendoPasteSubscription=n.subscribeToKendoPaste(this._element,{fieldName:s,onValueChange:i=>{this.handleKendoPasteValue(i)}})}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow&&this._timeSelector.focusActiveList(),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._timeSelector&&this._timeSelector.focusActiveList()},300),this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var s,t;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect(),(t=this.KendoPasteSubscription)==null||t.unsubscribe()}render(){const{size:s=l.defaultProps.size,rounded:t=l.defaultProps.rounded,fillMode:i=l.defaultProps.fillMode,disabled:o,tabIndex:h,title:d,id:u,className:f,format:I,formatPlaceholder:D,width:k,name:O,steps:z,validationMessage:x,required:R,validityStyles:q,ariaLabelledBy:E,ariaDescribedBy:L,unstyled:v,enableMouseWheel:N,autoCorrectParts:B,autoSwitchParts:F,autoSwitchKeys:K,allowCaretMode:V,inputAttributes:A}=this.props,b=v&&v.uTimePicker,w=!this.validityStyles||this.validity.valid,_=this.localizationService.toLanguageString(a.selectTime,a.messages[a.selectTime]),j={disabled:o,format:I,formatPlaceholder:D,id:u,ariaLabelledBy:E,ariaDescribedBy:L,ariaLabel:_,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:O,onChange:this.handleInputValueChange,required:R,steps:z,tabIndex:this.show?-1:h,title:d,valid:this.validity.valid,validationMessage:x,validityStyles:q,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.show,enableMouseWheel:N,autoCorrectParts:B,autoSwitchParts:F,autoSwitchKeys:K,allowCaretMode:V,inputAttributes:A},W=this.localizationService.toLanguageString(a.toggleClock,a.messages[a.toggleClock]),U=this.localizationService.toLanguageString(a.toggleTimeSelector,a.messages[a.toggleTimeSelector]),S=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:H,onBlur:G})=>r.createElement(r.Fragment,null,r.createElement("span",{ref:X=>{this._element=X},className:n.classNames(n.uTimePicker.wrapper({c:b,size:s,rounded:t,fillMode:i,invalid:!w,required:this.required,disabled:o}),{"k-focus":this.state.focused},f),onKeyDown:this.handleKeyDown,style:{width:k},onFocus:this.mobileMode?this.handleClick:H,onBlur:G,onClick:this.mobileMode?this.handleClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0,...j}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:J.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:U,className:n.classNames(n.uTimePicker.inputButton({c:b})),fillMode:i,"aria-label":W}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&r.createElement(n.WatermarkOverlay,{message:this.licenseMessage})));return this.props.label?r.createElement(ee.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:u,editorValid:w,editorDisabled:this.props.disabled,children:S,style:{width:this.props.width}}):S}normalizeTime(s){return p.setTime(p.MIDNIGHT_DATE,s)}setShow(s){const{onOpen:t,onClose:i}=this.props;this.show!==s&&(this.setState({show:s}),s&&t&&t.call(void 0,{target:this}),!s&&i&&i.call(void 0,{target:this}))}mergeTime(s){return this.value&&s?p.setTime(this.value,s):s}calculateMedia(s){for(const t of s)this.setState({windowWidth:t.target.clientWidth})}};l.displayName="TimePicker",l.propTypes={className:e.string,cancelButton:e.bool,nowButton:e.bool,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,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}),dateInput:e.elementType,show:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),inputAttributes:e.object},l.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:p.MAX_TIME,min:p.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:Q.DateInputInner,size:void 0,rounded:void 0,fillMode:void 0};let m=l;const C=n.createPropsContext(),M=n.withIdHOC(n.withPropsContext(C,n.withUnstyledHOC(n.withAdaptiveModeContext(m))));M.displayName="KendoReactTimePicker";P.registerForLocalization(m);exports.TimePicker=M;exports.TimePickerPropsContext=C;exports.TimePickerWithoutContext=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),e=require("prop-types"),Z=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),$=require("@progress/kendo-svg-icons"),P=require("@progress/kendo-react-intl"),T=require("../package-metadata.js"),l=require("../messages/index.js"),J=require("../dateinput/DateInput.js"),Q=require("./TimeSelector.js"),p=require("../utils.js"),g=require("./utils.js"),Y=require("../hooks/usePickerFloatingLabel.js"),ee=require("@progress/kendo-react-buttons"),te=require("../common/AdaptiveMode.js"),ie=require("@progress/kendo-react-layout");function se(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>c[t]})}}return s.default=c,Object.freeze(s)}const a=se(X),r=class r extends a.Component{constructor(s){super(s),this._element=null,this._dateInput=a.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.showLicenseWatermark=!1,this.handleKendoPasteValue=t=>{if(t instanceof Date&&!isNaN(t.getTime())){this.applyKendoPasteTime(t);return}const i=t!=null?String(t):"";if(!i)return;const o=new Date(i);isNaN(o.getTime())||this.applyKendoPasteTime(o)},this.applyKendoPasteTime=t=>{const i=this.normalizeTime(t);if(!g.isInRange(i,this.min,this.max))return;const o=new Event("change",{bubbles:!0}),h={target:this._element,currentTarget:this._element,nativeEvent:o};this.handleValueChange({syntheticEvent:h,nativeEvent:o,value:i})},this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:i,nowButton:o,disabled:h,format:d,steps:u,unstyled:f}=this.props;return a.createElement(Q.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:i,disabled:h,nowButton:o,format:d,min:this.min,max:this.max,steps:u,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:f})},this.renderPopup=()=>{const{popupClass:t,...i}=this.popupSettings,{unstyled:o}=this.props,h=o&&o.uTimePicker,d=n.classNames(t),u={popupClass:n.uTimePicker.popup({c:h}),show:this.show,animate:this.element!==null,anchor:this.element,className:d,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...i};return this.props.popup?a.createElement(this.props.popup,{...u},this.renderTimeSelector()):a.createElement(Z.Popup,{...u},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,i={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:this.localizationService.toLanguageString(l.toggleClock,l.messages[l.timePickerCancel]),onCancel:this.handleValueReject,applyText:this.localizationService.toLanguageString(l.timePickerSet,l.messages[l.timePickerSet]),onApply:o=>this.handleValueChange(o)}};return a.createElement(te.AdaptiveMode,{...i},a.createElement(ie.ActionSheetContent,null,this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,i)=>t.value!==void 0?t.value:i.value,this.nextShow=(t,i)=>t.show!==void 0?t.show:i.show,this.handleInputValueChange=t=>{const i=this.mergeTime(t.value);this.handleValueChange({...t,value:i})},this.handleTimeChange=t=>{this.setState({candidate:t.time})},this.handleValueChange=t=>{this.setState({value:y.cloneDate(t.value||this.state.candidate)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:i}=this.props,o=this.valueDuringOnChange!==void 0?this.value:this.state.candidate||this.value;i&&i.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:o,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setState({candidate:null}),this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleValueReject=t=>{this.mobileMode||(this.shouldFocusDateInput=!0),this.setShow(!1)},this.handleClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:i,keyCode:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},this.showLicenseWatermark=!n.validatePackage(T.packageMetadata,{component:"TimePicker"}),this.licenseMessage=n.getLicenseMessage(T.packageMetadata),this.state={value:this.props.defaultValue||r.defaultProps.defaultValue,show:this.props.defaultShow||r.defaultProps.defaultShow,focused:!1,candidate:null},this.normalizeTime=this.normalizeTime.bind(this),this.setShow=this.setShow.bind(this),this.mergeTime=this.mergeTime.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get timeSelector(){return this._timeSelector}get value(){const s=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return s!==null?y.cloneDate(s):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 validity(){const s=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),i=this.normalizeTime(this.max),o=g.isInRange(s,t,i),h=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,u=this.props.valid!==void 0?this.props.valid:d;return{customError:h,rangeOverflow:g.isBiggerThanMax(s,i),rangeUnderflow:g.isSmallerThanMin(s,t),valid:u,valueMissing:this.value===null}}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:r.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get popupSettings(){return this.props.popupSettings||r.defaultProps.popupSettings}get min(){return this.props.min!==void 0?this.props.min:r.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:r.defaultProps.max}get dateInputComp(){return this.props.dateInput||r.defaultProps.dateInput}get localizationService(){return P.provideLocalizationService(this)}componentDidMount(){var t;this.observerResize=n.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);const s=this.props.name||this.props.id;this.KendoPasteSubscription=n.subscribeToKendoPaste(this._element,{fieldName:s,onValueChange:i=>{this.handleKendoPasteValue(i)}})}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow&&this._timeSelector.focusActiveList(),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._timeSelector&&this._timeSelector.focusActiveList()},300),this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var s,t;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect(),(t=this.KendoPasteSubscription)==null||t.unsubscribe()}render(){const{size:s=r.defaultProps.size,rounded:t=r.defaultProps.rounded,fillMode:i=r.defaultProps.fillMode,disabled:o,tabIndex:h,title:d,id:u,className:f,format:I,formatPlaceholder:D,width:k,name:O,steps:z,validationMessage:x,required:R,validityStyles:q,ariaLabelledBy:E,ariaDescribedBy:L,unstyled:v,enableMouseWheel:N,autoCorrectParts:B,autoSwitchParts:F,autoSwitchKeys:K,allowCaretMode:V,inputAttributes:A}=this.props,b=v&&v.uTimePicker,w=!this.validityStyles||this.validity.valid,_={disabled:o,format:I,formatPlaceholder:D,id:u,ariaLabelledBy:E,ariaDescribedBy:L,ariaLabel:this.props.ariaLabel,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:O,onChange:this.handleInputValueChange,required:R,steps:z,tabIndex:this.show?-1:h,title:d,valid:this.validity.valid,validationMessage:x,validityStyles:q,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.show,enableMouseWheel:N,autoCorrectParts:B,autoSwitchParts:F,autoSwitchKeys:K,allowCaretMode:V,inputAttributes:A},j=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),W=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),S=a.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:U,onBlur:H})=>a.createElement(a.Fragment,null,a.createElement("span",{ref:G=>{this._element=G},className:n.classNames(n.uTimePicker.wrapper({c:b,size:s,rounded:t,fillMode:i,invalid:!w,required:this.required,disabled:o}),{"k-focus":this.state.focused},f),onKeyDown:this.handleKeyDown,style:{width:k},onFocus:this.mobileMode?this.handleClick:U,onBlur:H,onClick:this.mobileMode?this.handleClick:void 0},a.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0,..._}),a.createElement(ee.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:$.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:W,className:n.classNames(n.uTimePicker.inputButton({c:b})),fillMode:i,"aria-label":j}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&a.createElement(n.WatermarkOverlay,{message:this.licenseMessage})));return this.props.label?a.createElement(Y.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:u,editorValid:w,editorDisabled:this.props.disabled,children:S,style:{width:this.props.width}}):S}normalizeTime(s){return p.setTime(p.MIDNIGHT_DATE,s)}setShow(s){const{onOpen:t,onClose:i}=this.props;this.show!==s&&(this.setState({show:s}),s&&t&&t.call(void 0,{target:this}),!s&&i&&i.call(void 0,{target:this}))}mergeTime(s){return this.value&&s?p.setTime(this.value,s):s}calculateMedia(s){for(const t of s)this.setState({windowWidth:t.target.clientWidth})}};r.displayName="TimePicker",r.propTypes={className:e.string,cancelButton:e.bool,nowButton:e.bool,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,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,ariaLabel: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}),dateInput:e.elementType,show:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),inputAttributes:e.object},r.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:p.MAX_TIME,min:p.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:J.DateInputInner,size:void 0,rounded:void 0,fillMode:void 0};let m=r;const C=n.createPropsContext(),M=n.withIdHOC(n.withPropsContext(C,n.withUnstyledHOC(n.withAdaptiveModeContext(m))));M.displayName="KendoReactTimePicker";P.registerForLocalization(m);exports.TimePicker=M;exports.TimePickerPropsContext=C;exports.TimePickerWithoutContext=m;

package/timepicker/TimePicker.mjs

@@ -5,26 +5,26 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as n from "react";
+import * as a from "react";
 import e from "prop-types";
-import { Popup as Y } from "@progress/kendo-react-popup";
+import { Popup as J } from "@progress/kendo-react-popup";
 import { cloneDate as y } from "@progress/kendo-date-math";
-import { createPropsContext as $, classNames as m, uTimePicker as g, Keys as d, validatePackage as ee, getLicenseMessage as te, canUseDOM as T, subscribeToKendoPaste as ie, AsyncFocusBlur as se, WatermarkOverlay as oe, withIdHOC as ne, withPropsContext as ae, withUnstyledHOC as re, withAdaptiveModeContext as le } from "@progress/kendo-react-common";
-import { clockIcon as he } from "@progress/kendo-svg-icons";
-import { provideLocalizationService as de, registerForLocalization as ue } from "@progress/kendo-react-intl";
+import { createPropsContext as Q, classNames as m, uTimePicker as g, Keys as d, validatePackage as Y, getLicenseMessage as $, canUseDOM as T, subscribeToKendoPaste as ee, AsyncFocusBlur as te, WatermarkOverlay as ie, withIdHOC as se, withPropsContext as oe, withUnstyledHOC as ae, withAdaptiveModeContext as ne } from "@progress/kendo-react-common";
+import { clockIcon as re } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as le, registerForLocalization as he } from "@progress/kendo-react-intl";
 import { packageMetadata as C } from "../package-metadata.mjs";
-import { timePickerSet as I, messages as u, toggleClock as f, timePickerCancel as pe, selectTime as M, toggleTimeSelector as P } from "../messages/index.mjs";
-import { DateInputInner as ce } from "../dateinput/DateInput.mjs";
-import { TimeSelector as me } from "./TimeSelector.mjs";
-import { MIN_TIME as ge, MAX_TIME as fe, setTime as D, MIDNIGHT_DATE as ve } from "../utils.mjs";
-import { isInRange as O, isSmallerThanMin as we, isBiggerThanMax as be } from "./utils.mjs";
-import { PickerFloatingLabel as Se } from "../hooks/usePickerFloatingLabel.mjs";
-import { Button as ye } from "@progress/kendo-react-buttons";
-import { AdaptiveMode as Te } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as Ce } from "@progress/kendo-react-layout";
-const a = class a extends n.Component {
+import { timePickerSet as I, messages as u, toggleClock as f, timePickerCancel as de, toggleTimeSelector as M } from "../messages/index.mjs";
+import { DateInputInner as ue } from "../dateinput/DateInput.mjs";
+import { TimeSelector as pe } from "./TimeSelector.mjs";
+import { MIN_TIME as ce, MAX_TIME as me, setTime as P, MIDNIGHT_DATE as ge } from "../utils.mjs";
+import { isInRange as D, isSmallerThanMin as fe, isBiggerThanMax as ve } from "./utils.mjs";
+import { PickerFloatingLabel as be } from "../hooks/usePickerFloatingLabel.mjs";
+import { Button as we } from "@progress/kendo-react-buttons";
+import { AdaptiveMode as Se } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as ye } from "@progress/kendo-react-layout";
+const n = class n extends a.Component {
   constructor(s) {
-    super(s), this._element = null, this._dateInput = n.createRef(), this._timeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.showLicenseWatermark = !1, this.handleKendoPasteValue = (t) => {
+    super(s), this._element = null, this._dateInput = a.createRef(), this._timeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.showLicenseWatermark = !1, this.handleKendoPasteValue = (t) => {
       if (t instanceof Date && !isNaN(t.getTime())) {
         this.applyKendoPasteTime(t);
         return;
@@ -36,7 +36,7 @@ const a = class a extends n.Component {
       isNaN(o.getTime()) || this.applyKendoPasteTime(o);
     }, this.applyKendoPasteTime = (t) => {
       const i = this.normalizeTime(t);
-      if (!O(i, this.min, this.max))
+      if (!D(i, this.min, this.max))
         return;
       const o = new Event("change", { bubbles: !0 }), r = {
         target: this._element,
@@ -52,8 +52,8 @@ const a = class a extends n.Component {
       this.dateInput && this.dateInput.focus();
     }, this.renderTimeSelector = () => {
       const { smoothScroll: t, cancelButton: i, nowButton: o, disabled: r, format: h, steps: l, unstyled: c } = this.props;
-      return /* @__PURE__ */ n.createElement(
-        me,
+      return /* @__PURE__ */ a.createElement(
+        pe,
         {
           ref: this.setTimeSelectorRef,
           mobileMode: this.mobileMode,
@@ -92,7 +92,7 @@ const a = class a extends n.Component {
         },
         ...i
       };
-      return this.props.popup ? /* @__PURE__ */ n.createElement(this.props.popup, { ...l }, this.renderTimeSelector()) : /* @__PURE__ */ n.createElement(Y, { ...l }, this.renderTimeSelector());
+      return this.props.popup ? /* @__PURE__ */ a.createElement(this.props.popup, { ...l }, this.renderTimeSelector()) : /* @__PURE__ */ a.createElement(J, { ...l }, this.renderTimeSelector());
     }, this.renderAdaptivePopup = () => {
       const { windowWidth: t = 0 } = this.state, i = {
         expand: this.show,
@@ -101,13 +101,13 @@ const a = class a extends n.Component {
         subTitle: this.props.adaptiveSubtitle,
         windowWidth: t,
         footer: {
-          cancelText: this.localizationService.toLanguageString(f, u[pe]),
+          cancelText: this.localizationService.toLanguageString(f, u[de]),
           onCancel: this.handleValueReject,
           applyText: this.localizationService.toLanguageString(I, u[I]),
           onApply: (o) => this.handleValueChange(o)
         }
       };
-      return /* @__PURE__ */ n.createElement(Te, { ...i }, /* @__PURE__ */ n.createElement(Ce, null, this.renderTimeSelector()));
+      return /* @__PURE__ */ a.createElement(Se, { ...i }, /* @__PURE__ */ a.createElement(ye, null, this.renderTimeSelector()));
     }, this.setTimeSelectorRef = (t) => {
       this._timeSelector = t;
     }, this.nextValue = (t, i) => t.value !== void 0 ? t.value : i.value, this.nextShow = (t, i) => t.show !== void 0 ? t.show : i.show, this.handleInputValueChange = (t) => {
@@ -144,9 +144,9 @@ const a = class a extends n.Component {
         return;
       }
       i && (o === d.up || o === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === d.up, this.setShow(o === d.down));
-    }, this.showLicenseWatermark = !ee(C, { component: "TimePicker" }), this.licenseMessage = te(C), this.state = {
-      value: this.props.defaultValue || a.defaultProps.defaultValue,
-      show: this.props.defaultShow || a.defaultProps.defaultShow,
+    }, this.showLicenseWatermark = !Y(C, { component: "TimePicker" }), this.licenseMessage = $(C), this.state = {
+      value: this.props.defaultValue || n.defaultProps.defaultValue,
+      show: this.props.defaultShow || n.defaultProps.defaultShow,
       focused: !1,
       candidate: null
     }, this.normalizeTime = this.normalizeTime.bind(this), this.setShow = this.setShow.bind(this), this.mergeTime = this.mergeTime.bind(this);
@@ -199,11 +199,11 @@ const a = class a extends n.Component {
    * Represents the validity state into which the TimePicker is set.
    */
   get validity() {
-    const s = this.value && this.normalizeTime(this.value), t = this.normalizeTime(this.min), i = this.normalizeTime(this.max), o = O(s, t, i), r = this.props.validationMessage !== void 0, h = (!this.required || this.value !== null) && o, l = this.props.valid !== void 0 ? this.props.valid : h;
+    const s = this.value && this.normalizeTime(this.value), t = this.normalizeTime(this.min), i = this.normalizeTime(this.max), o = D(s, t, i), r = this.props.validationMessage !== void 0, h = (!this.required || this.value !== null) && o, l = this.props.valid !== void 0 ? this.props.valid : h;
     return {
       customError: r,
-      rangeOverflow: be(s, i),
-      rangeUnderflow: we(s, t),
+      rangeOverflow: ve(s, i),
+      rangeUnderflow: fe(s, t),
       valid: l,
       valueMissing: this.value === null
     };
@@ -219,7 +219,7 @@ const a = class a extends n.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
@@ -228,19 +228,19 @@ const a = class a extends n.Component {
     return this.props.required !== void 0 ? this.props.required : !1;
   }
   get popupSettings() {
-    return this.props.popupSettings || a.defaultProps.popupSettings;
+    return this.props.popupSettings || n.defaultProps.popupSettings;
   }
   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 dateInputComp() {
-    return this.props.dateInput || a.defaultProps.dateInput;
+    return this.props.dateInput || n.defaultProps.dateInput;
   }
   get localizationService() {
-    return de(this);
+    return le(this);
   }
   /**
    * @hidden
@@ -249,7 +249,7 @@ const a = class a extends n.Component {
     var t;
     this.observerResize = T && 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);
     const s = this.props.name || this.props.id;
-    this.KendoPasteSubscription = ie(this._element, {
+    this.KendoPasteSubscription = ee(this._element, {
       fieldName: s,
       onValueChange: (i) => {
         this.handleKendoPasteValue(i);
@@ -276,85 +276,85 @@ const a = class a extends n.Component {
    */
   render() {
     const {
-      size: s = a.defaultProps.size,
-      rounded: t = a.defaultProps.rounded,
-      fillMode: i = a.defaultProps.fillMode,
+      size: s = n.defaultProps.size,
+      rounded: t = n.defaultProps.rounded,
+      fillMode: i = n.defaultProps.fillMode,
       disabled: o,
       tabIndex: r,
       title: h,
       id: l,
       className: c,
-      format: z,
-      formatPlaceholder: k,
-      width: x,
-      name: E,
-      steps: R,
-      validationMessage: V,
-      required: B,
-      validityStyles: F,
-      ariaLabelledBy: L,
-      ariaDescribedBy: A,
+      format: O,
+      formatPlaceholder: z,
+      width: k,
+      name: x,
+      steps: E,
+      validationMessage: R,
+      required: V,
+      validityStyles: B,
+      ariaLabelledBy: F,
+      ariaDescribedBy: L,
       unstyled: v,
-      enableMouseWheel: N,
-      autoCorrectParts: K,
-      autoSwitchParts: _,
-      autoSwitchKeys: q,
-      allowCaretMode: W,
-      inputAttributes: U
-    } = this.props, w = v && v.uTimePicker, b = !this.validityStyles || this.validity.valid, j = this.localizationService.toLanguageString(M, u[M]), H = {
+      enableMouseWheel: A,
+      autoCorrectParts: N,
+      autoSwitchParts: K,
+      autoSwitchKeys: _,
+      allowCaretMode: q,
+      inputAttributes: W
+    } = this.props, b = v && v.uTimePicker, w = !this.validityStyles || this.validity.valid, U = {
       disabled: o,
-      format: z,
-      formatPlaceholder: k,
+      format: O,
+      formatPlaceholder: z,
       id: l,
-      ariaLabelledBy: L,
-      ariaDescribedBy: A,
-      ariaLabel: j,
+      ariaLabelledBy: F,
+      ariaDescribedBy: L,
+      ariaLabel: this.props.ariaLabel,
       max: this.normalizeTime(this.max),
       min: this.normalizeTime(this.min),
-      name: E,
+      name: x,
       onChange: this.handleInputValueChange,
-      required: B,
-      steps: R,
+      required: V,
+      steps: E,
       tabIndex: this.show ? -1 : r,
       title: h,
       valid: this.validity.valid,
-      validationMessage: V,
-      validityStyles: F,
+      validationMessage: R,
+      validityStyles: B,
       value: this.value && this.normalizeTime(this.value),
       label: void 0,
       placeholder: this.state.focused ? null : this.props.placeholder,
       ariaHasPopup: "dialog",
       ariaExpanded: this.show,
-      enableMouseWheel: N,
-      autoCorrectParts: K,
-      autoSwitchParts: _,
-      autoSwitchKeys: q,
-      allowCaretMode: W,
-      inputAttributes: U
-    }, G = this.localizationService.toLanguageString(f, u[f]), X = this.localizationService.toLanguageString(
-      P,
-      u[P]
-    ), S = /* @__PURE__ */ n.createElement(
-      se,
+      enableMouseWheel: A,
+      autoCorrectParts: N,
+      autoSwitchParts: K,
+      autoSwitchKeys: _,
+      allowCaretMode: q,
+      inputAttributes: W
+    }, j = this.localizationService.toLanguageString(f, u[f]), H = this.localizationService.toLanguageString(
+      M,
+      u[M]
+    ), S = /* @__PURE__ */ a.createElement(
+      te,
       {
         onFocus: this.handleFocus,
         onBlur: this.mobileMode ? void 0 : this.handleBlur,
         onSyncBlur: this.props.onBlur,
         onSyncFocus: this.props.onFocus
       },
-      ({ onFocus: Z, onBlur: J }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      ({ onFocus: G, onBlur: X }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
         "span",
         {
-          ref: (Q) => {
-            this._element = Q;
+          ref: (Z) => {
+            this._element = Z;
           },
           className: m(
             g.wrapper({
-              c: w,
+              c: b,
               size: s,
               rounded: t,
               fillMode: i,
-              invalid: !b,
+              invalid: !w,
               required: this.required,
               disabled: o
             }),
@@ -362,45 +362,45 @@ const a = class a extends n.Component {
             c
           ),
           onKeyDown: this.handleKeyDown,
-          style: { width: x },
-          onFocus: this.mobileMode ? this.handleClick : Z,
-          onBlur: J,
+          style: { width: k },
+          onFocus: this.mobileMode ? this.handleClick : G,
+          onBlur: X,
           onClick: this.mobileMode ? this.handleClick : void 0
         },
-        /* @__PURE__ */ n.createElement(
+        /* @__PURE__ */ a.createElement(
           this.dateInputComp,
           {
             _ref: this._dateInput,
             ariaRole: "combobox",
             ariaControls: this.show ? this._popupId : void 0,
-            ...H
+            ...U
           }
         ),
-        /* @__PURE__ */ n.createElement(
-          ye,
+        /* @__PURE__ */ a.createElement(
+          we,
           {
             tabIndex: -1,
             type: "button",
             icon: "clock",
-            svgIcon: he,
+            svgIcon: re,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleClick,
-            title: X,
-            className: m(g.inputButton({ c: w })),
+            title: H,
+            className: m(g.inputButton({ c: b })),
             fillMode: i,
-            "aria-label": G
+            "aria-label": j
           }
         ),
         !this.mobileMode && this.renderPopup()
-      ), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ n.createElement(oe, { message: this.licenseMessage }))
+      ), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ a.createElement(ie, { message: this.licenseMessage }))
     );
-    return this.props.label ? /* @__PURE__ */ n.createElement(
-      Se,
+    return this.props.label ? /* @__PURE__ */ a.createElement(
+      be,
       {
         dateInput: this._dateInput,
         label: this.props.label,
         editorId: l,
-        editorValid: b,
+        editorValid: w,
         editorDisabled: this.props.disabled,
         children: S,
         style: { width: this.props.width }
@@ -408,7 +408,7 @@ const a = class a extends n.Component {
     ) : S;
   }
   normalizeTime(s) {
-    return D(ve, s);
+    return P(ge, s);
   }
   setShow(s) {
     const { onOpen: t, onClose: i } = this.props;
@@ -419,14 +419,14 @@ const a = class a extends n.Component {
     }));
   }
   mergeTime(s) {
-    return this.value && s ? D(this.value, s) : s;
+    return this.value && s ? P(this.value, s) : s;
   }
   calculateMedia(s) {
     for (const t of s)
       this.setState({ windowWidth: t.target.clientWidth });
   }
 };
-a.displayName = "TimePicker", a.propTypes = {
+n.displayName = "TimePicker", n.propTypes = {
   className: e.string,
   cancelButton: e.bool,
   nowButton: e.bool,
@@ -471,6 +471,7 @@ a.displayName = "TimePicker", a.propTypes = {
   ]),
   id: e.string,
   ariaLabelledBy: e.string,
+  ariaLabel: e.string,
   ariaDescribedBy: e.string,
   min: e.instanceOf(Date),
   max: e.instanceOf(Date),
@@ -500,33 +501,33 @@ a.displayName = "TimePicker", a.propTypes = {
   rounded: e.oneOf(["small", "medium", "large", "full", "none"]),
   fillMode: e.oneOf(["solid", "flat", "outline"]),
   inputAttributes: e.object
-}, a.defaultProps = {
+}, n.defaultProps = {
   defaultShow: !1,
   defaultValue: null,
   disabled: !1,
   format: "t",
-  max: fe,
-  min: ge,
+  max: me,
+  min: ce,
   popupSettings: {},
   tabIndex: 0,
   steps: {},
   validityStyles: !0,
-  dateInput: ce,
+  dateInput: ue,
   size: void 0,
   rounded: void 0,
   fillMode: void 0
 };
-let p = a;
-const Ie = $(), Me = ne(
-  ae(
-    Ie,
-    re(le(p))
+let p = n;
+const Te = Q(), Ce = se(
+  oe(
+    Te,
+    ae(ne(p))
   )
 );
-Me.displayName = "KendoReactTimePicker";
-ue(p);
+Ce.displayName = "KendoReactTimePicker";
+he(p);
 export {
-  Me as TimePicker,
-  Ie as TimePickerPropsContext,
+  Ce as TimePicker,
+  Te as TimePickerPropsContext,
   p as TimePickerWithoutContext
 };

package/timepicker/models/TimePickerSettings.d.ts

@@ -65,6 +65,13 @@ export interface TimePickerSettings {
      * This property is related to accessibility.
      */
     ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component.
+     *
+     * @remarks
+     * This property is related to accessibility.
+     */
+    ariaLabel?: string;
     /**
      * Specifies the greatest valid time ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/time-ranges)).
      */