@progress/kendo-react-dateinputs 10.3.0-develop.1 → 11.0.0-develop.10

package/index.d.mts

@@ -1407,12 +1407,21 @@ export declare interface DatePickerProps extends DatePickerSettings, FormCompone
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
      */
     adaptive?: boolean;
     /**
-     * Specifies the text that is rendered as title in the adaptive popup.
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
      */
     adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     */
+    adaptiveSubtitle?: string;
     /**
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DatePicker. (Defaults to `false`)
      */
@@ -1825,12 +1834,21 @@ export declare interface DateRangePickerProps extends DateRangePickerSettings {
     value?: SelectionRange;
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
      */
     adaptive?: boolean;
     /**
-     * Specifies the text that is rendered as title in the adaptive popup.
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
      */
     adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     */
+    adaptiveSubtitle?: string;
     /**
      * If `clearButton` is set to `true`, the DateRangePicker renders a button next to the start and end date values. Clicking this button resets the value of the date and triggers the `change` event.
      */
@@ -2286,12 +2304,21 @@ export declare interface DateTimePickerProps extends DateTimePickerSettings, For
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
      */
     adaptive?: boolean;
     /**
-     * Specifies the text that is rendered as title in the adaptive popup.
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
      */
     adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     */
+    adaptiveSubtitle?: string;
     /**
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DateTimePicker. (Defaults to `false`)
      */
@@ -2660,7 +2687,7 @@ export declare class DateTimePickerWithoutContext extends React_2.Component<Date
     private handleValueChange;
     private handleFocus;
     private handleBlur;
-    private handleDateIconClick;
+    private handleClick;
     private handleIconMouseDown;
     private handleKeyDown;
     private dateInputElement;
@@ -3928,12 +3955,21 @@ export declare interface TimePickerProps extends TimePickerSettings, FormCompone
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
      */
     adaptive?: boolean;
     /**
-     * Specifies the text that is rendered as title in the adaptive popup.
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
      */
     adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     */
+    adaptiveSubtitle?: string;
     /**
      * @hidden
      */
@@ -4286,7 +4322,7 @@ export declare class TimePickerWithoutContext extends React_2.Component<TimePick
     private handleFocus;
     private handleBlur;
     private handleValueReject;
-    private handleIconClick;
+    private handleClick;
     private handleIconMouseDown;
     private handleKeyDown;
     private calculateMedia;

package/index.d.ts

@@ -1407,12 +1407,21 @@ export declare interface DatePickerProps extends DatePickerSettings, FormCompone
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
      */
     adaptive?: boolean;
     /**
-     * Specifies the text that is rendered as title in the adaptive popup.
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
      */
     adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     */
+    adaptiveSubtitle?: string;
     /**
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DatePicker. (Defaults to `false`)
      */
@@ -1825,12 +1834,21 @@ export declare interface DateRangePickerProps extends DateRangePickerSettings {
     value?: SelectionRange;
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
      */
     adaptive?: boolean;
     /**
-     * Specifies the text that is rendered as title in the adaptive popup.
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
      */
     adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     */
+    adaptiveSubtitle?: string;
     /**
      * If `clearButton` is set to `true`, the DateRangePicker renders a button next to the start and end date values. Clicking this button resets the value of the date and triggers the `change` event.
      */
@@ -2286,12 +2304,21 @@ export declare interface DateTimePickerProps extends DateTimePickerSettings, For
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
      */
     adaptive?: boolean;
     /**
-     * Specifies the text that is rendered as title in the adaptive popup.
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
      */
     adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     */
+    adaptiveSubtitle?: string;
     /**
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DateTimePicker. (Defaults to `false`)
      */
@@ -2660,7 +2687,7 @@ export declare class DateTimePickerWithoutContext extends React_2.Component<Date
     private handleValueChange;
     private handleFocus;
     private handleBlur;
-    private handleDateIconClick;
+    private handleClick;
     private handleIconMouseDown;
     private handleKeyDown;
     private dateInputElement;
@@ -3928,12 +3955,21 @@ export declare interface TimePickerProps extends TimePickerSettings, FormCompone
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
      */
     adaptive?: boolean;
     /**
-     * Specifies the text that is rendered as title in the adaptive popup.
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
      */
     adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     */
+    adaptiveSubtitle?: string;
     /**
      * @hidden
      */
@@ -4286,7 +4322,7 @@ export declare class TimePickerWithoutContext extends React_2.Component<TimePick
     private handleFocus;
     private handleBlur;
     private handleValueReject;
-    private handleIconClick;
+    private handleClick;
     private handleIconMouseDown;
     private handleKeyDown;
     private calculateMedia;

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={name:"@progress/kendo-react-dateinputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1745484816,version:"10.3.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-dateinputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1747133152,version:"11.0.0-develop.10",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

@@ -10,8 +10,8 @@ const e = {
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1745484816,
-  version: "10.3.0-develop.1",
+  publishDate: 1747133152,
+  version: "11.0.0-develop.10",
   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"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-dateinputs",
-  "version": "10.3.0-develop.1",
+  "version": "11.0.0-develop.10",
   "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.5.1",
     "@progress/kendo-dateinputs-common": "^0.4.0",
-    "@progress/kendo-react-buttons": "10.3.0-develop.1",
-    "@progress/kendo-react-common": "10.3.0-develop.1",
-    "@progress/kendo-react-intl": "10.3.0-develop.1",
-    "@progress/kendo-react-labels": "10.3.0-develop.1",
-    "@progress/kendo-react-layout": "10.3.0-develop.1",
-    "@progress/kendo-react-popup": "10.3.0-develop.1",
+    "@progress/kendo-react-buttons": "11.0.0-develop.10",
+    "@progress/kendo-react-common": "11.0.0-develop.10",
+    "@progress/kendo-react-intl": "11.0.0-develop.10",
+    "@progress/kendo-react-labels": "11.0.0-develop.10",
+    "@progress/kendo-react-layout": "11.0.0-develop.10",
+    "@progress/kendo-react-popup": "11.0.0-develop.10",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -69,7 +69,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1745484816,
+      "publishDate": 1747133152,
       "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.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 G=require("react"),e=require("prop-types"),X=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Z=require("@progress/kendo-svg-icons"),T=require("@progress/kendo-react-intl"),$=require("../package-metadata.js"),l=require("../messages/index.js"),J=require("../dateinput/DateInput.js"),Q=require("./TimeSelector.js"),c=require("../utils.js"),f=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(p){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>p[t]})}}return i.default=p,Object.freeze(i)}const a=se(G),r=class r extends a.Component{constructor(i){super(i),this._element=null,this._dateInput=a.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.showLicenseWatermark=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:s,nowButton:n,disabled:u,format:d,steps:h,unstyled:g}=this.props;return a.createElement(Q.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:s,disabled:u,nowButton:n,format:d,min:this.min,max:this.max,steps:h,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:g})},this.renderPopup=()=>{const{popupClass:t,...s}=this.popupSettings,{unstyled:n}=this.props,u=n&&n.uTimePicker,d=o.classNames(t),h={popupClass:o.uTimePicker.popup({c:u}),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"},...s};return this.props.popup?a.createElement(this.props.popup,{...h},this.renderTimeSelector()):a.createElement(X.Popup,{...h},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle,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:n=>this.handleValueChange(n)}};return a.createElement(te.AdaptiveMode,{...s},a.createElement(ie.ActionSheetContent,null,this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,s)=>t.value!==void 0?t.value:s.value,this.nextShow=(t,s)=>t.show!==void 0?t.show:s.show,this.handleInputValueChange=t=>{const s=this.mergeTime(t.value);this.handleValueChange({...t,value:s})},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.shouldFocusDateInput=!0;const{onChange:s}=this.props,n=this.state.candidate||this.value;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:n,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleValueReject=t=>{this.setShow(!1)},this.handleIconClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:n}=t;if(n===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(n===o.Keys.up||n===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===o.Keys.up,this.setShow(n===o.Keys.down))},this.showLicenseWatermark=!o.validatePackage($.packageMetadata,{component:"TimePicker"}),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(o.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 i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?y.cloneDate(i):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 i=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),s=this.normalizeTime(this.max),n=f.isInRange(i,t,s),u=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&n,h=this.props.valid!==void 0?this.props.valid:d;return{customError:u,rangeOverflow:f.isBiggerThanMax(i,s),rangeUnderflow:f.isSmallerThanMin(i,t),valid:h,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 T.provideLocalizationService(this)}componentDidMount(){var i;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow?this._timeSelector.focusActiveList():this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=r.defaultProps.size,rounded:t=r.defaultProps.rounded,fillMode:s=r.defaultProps.fillMode,disabled:n,tabIndex:u,title:d,id:h,className:g,format:P,formatPlaceholder:M,width:O,name:k,steps:D,validationMessage:z,required:x,validityStyles:q,ariaLabelledBy:R,ariaDescribedBy:E,unstyled:v,enableMouseWheel:B,autoCorrectParts:A,autoSwitchParts:F,autoSwitchKeys:V,allowCaretMode:L,inputAttributes:N}=this.props,w=v&&v.uTimePicker,b=!this.validityStyles||this.validity.valid,_={disabled:n,format:P,formatPlaceholder:M,id:h,ariaLabelledBy:R,ariaDescribedBy:E,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:k,onChange:this.handleInputValueChange,required:x,steps:D,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:z,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,size:null,fillMode:null,rounded:null,enableMouseWheel:B,autoCorrectParts:A,autoSwitchParts:F,autoSwitchKeys:V,allowCaretMode:L,inputAttributes:N},K=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),j=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),S=a.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:W,onBlur:U})=>a.createElement(a.Fragment,null,a.createElement("span",{id:this.props.id,ref:H=>{this._element=H},className:o.classNames(o.uTimePicker.wrapper({c:w,size:i,rounded:t,fillMode:s,invalid:!b,required:this.required,disabled:n}),g),onKeyDown:this.handleKeyDown,style:{width:O},onFocus:W,onBlur:U,onClick:this.mobileMode?this.handleIconClick:void 0},a.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,..._}),a.createElement(ee.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:Z.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleIconClick,title:j,className:o.classNames(o.uTimePicker.inputButton({c:w})),rounded:null,fillMode:s,"aria-label":K}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&a.createElement(o.WatermarkOverlay,null)));return this.props.label?a.createElement(Y.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:h,editorValid:b,editorDisabled:this.props.disabled,children:S,style:{width:this.props.width}}):S}normalizeTime(i){return c.setTime(c.MIDNIGHT_DATE,i)}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}mergeTime(i){return this.value&&i?c.setTime(this.value,i):i}calculateMedia(i){for(const t of i)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,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),inputAttributes:e.object},r.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:c.MAX_TIME,min:c.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:J.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let m=r;const I=o.createPropsContext(),C=o.withIdHOC(o.withPropsContext(I,o.withUnstyledHOC(o.withAdaptiveModeContext(m))));C.displayName="KendoReactTimePicker";T.registerForLocalization(m);exports.TimePicker=C;exports.TimePickerPropsContext=I;exports.TimePickerWithoutContext=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),X=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Z=require("@progress/kendo-svg-icons"),T=require("@progress/kendo-react-intl"),$=require("../package-metadata.js"),l=require("../messages/index.js"),J=require("../dateinput/DateInput.js"),Q=require("./TimeSelector.js"),c=require("../utils.js"),f=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(p){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>p[t]})}}return i.default=p,Object.freeze(i)}const a=se(G),r=class r extends a.Component{constructor(i){super(i),this._element=null,this._dateInput=a.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.showLicenseWatermark=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:s,nowButton:n,disabled:u,format:d,steps:h,unstyled:g}=this.props;return a.createElement(Q.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:s,disabled:u,nowButton:n,format:d,min:this.min,max:this.max,steps:h,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:g})},this.renderPopup=()=>{const{popupClass:t,...s}=this.popupSettings,{unstyled:n}=this.props,u=n&&n.uTimePicker,d=o.classNames(t),h={popupClass:o.uTimePicker.popup({c:u}),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"},...s};return this.props.popup?a.createElement(this.props.popup,{...h},this.renderTimeSelector()):a.createElement(X.Popup,{...h},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={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:n=>this.handleValueChange(n)}};return a.createElement(te.AdaptiveMode,{...s},a.createElement(ie.ActionSheetContent,null,this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,s)=>t.value!==void 0?t.value:s.value,this.nextShow=(t,s)=>t.show!==void 0?t.show:s.show,this.handleInputValueChange=t=>{const s=this.mergeTime(t.value);this.handleValueChange({...t,value:s})},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.shouldFocusDateInput=!0;const{onChange:s}=this.props,n=this.state.candidate||this.value;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:n,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleValueReject=t=>{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:s,keyCode:n}=t;if(n===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(n===o.Keys.up||n===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===o.Keys.up,this.setShow(n===o.Keys.down))},this.showLicenseWatermark=!o.validatePackage($.packageMetadata,{component:"TimePicker"}),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(o.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 i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?y.cloneDate(i):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 i=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),s=this.normalizeTime(this.max),n=f.isInRange(i,t,s),u=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&n,h=this.props.valid!==void 0?this.props.valid:d;return{customError:u,rangeOverflow:f.isBiggerThanMax(i,s),rangeUnderflow:f.isSmallerThanMin(i,t),valid:h,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 T.provideLocalizationService(this)}componentDidMount(){var i;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}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 i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=r.defaultProps.size,rounded:t=r.defaultProps.rounded,fillMode:s=r.defaultProps.fillMode,disabled:n,tabIndex:u,title:d,id:h,className:g,format:M,formatPlaceholder:P,width:O,name:k,steps:D,validationMessage:z,required:x,validityStyles:q,ariaLabelledBy:R,ariaDescribedBy:E,unstyled:v,enableMouseWheel:B,autoCorrectParts:A,autoSwitchParts:F,autoSwitchKeys:V,allowCaretMode:L,inputAttributes:N}=this.props,w=v&&v.uTimePicker,b=!this.validityStyles||this.validity.valid,_={disabled:n,format:M,formatPlaceholder:P,id:h,ariaLabelledBy:R,ariaDescribedBy:E,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:k,onChange:this.handleInputValueChange,required:x,steps:D,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:z,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,size:null,fillMode:null,rounded:null,enableMouseWheel:B,autoCorrectParts:A,autoSwitchParts:F,autoSwitchKeys:V,allowCaretMode:L,inputAttributes:N},K=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),j=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),S=a.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:W,onBlur:U})=>a.createElement(a.Fragment,null,a.createElement("span",{ref:H=>{this._element=H},className:o.classNames(o.uTimePicker.wrapper({c:w,size:i,rounded:t,fillMode:s,invalid:!b,required:this.required,disabled:n}),g),onKeyDown:this.handleKeyDown,style:{width:O},onFocus:this.mobileMode?this.handleClick:W,onBlur:U,onClick:this.mobileMode?this.handleClick:void 0},a.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,..._}),a.createElement(ee.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:Z.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:j,className:o.classNames(o.uTimePicker.inputButton({c:w})),rounded:null,fillMode:s,"aria-label":K}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&a.createElement(o.WatermarkOverlay,null)));return this.props.label?a.createElement(Y.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:h,editorValid:b,editorDisabled:this.props.disabled,children:S,style:{width:this.props.width}}):S}normalizeTime(i){return c.setTime(c.MIDNIGHT_DATE,i)}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}mergeTime(i){return this.value&&i?c.setTime(this.value,i):i}calculateMedia(i){for(const t of i)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,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),inputAttributes:e.object},r.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:c.MAX_TIME,min:c.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:J.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let m=r;const C=o.createPropsContext(),I=o.withIdHOC(o.withPropsContext(C,o.withUnstyledHOC(o.withAdaptiveModeContext(m))));I.displayName="KendoReactTimePicker";T.registerForLocalization(m);exports.TimePicker=I;exports.TimePickerPropsContext=C;exports.TimePickerWithoutContext=m;

package/timepicker/TimePicker.mjs

@@ -9,19 +9,19 @@ import * as n from "react";
 import e from "prop-types";
 import { Popup as X } from "@progress/kendo-react-popup";
 import { cloneDate as y } from "@progress/kendo-date-math";
-import { classNames as c, uTimePicker as g, Keys as d, validatePackage as Z, canUseDOM as I, AsyncFocusBlur as J, WatermarkOverlay as Q, createPropsContext as Y, withIdHOC as $, withPropsContext as ee, withUnstyledHOC as te, withAdaptiveModeContext as ie } from "@progress/kendo-react-common";
+import { classNames as c, uTimePicker as g, Keys as u, validatePackage as Z, canUseDOM as C, AsyncFocusBlur as J, WatermarkOverlay as Q, createPropsContext as Y, withIdHOC as $, withPropsContext as ee, withUnstyledHOC as te, withAdaptiveModeContext as ie } from "@progress/kendo-react-common";
 import { clockIcon as se } from "@progress/kendo-svg-icons";
 import { provideLocalizationService as oe, registerForLocalization as ne } from "@progress/kendo-react-intl";
 import { packageMetadata as ae } from "../package-metadata.mjs";
-import { toggleClock as f, messages as u, timePickerCancel as re, timePickerSet as C, toggleTimeSelector as T } from "../messages/index.mjs";
+import { toggleClock as f, messages as d, timePickerCancel as re, timePickerSet as I, toggleTimeSelector as T } from "../messages/index.mjs";
 import { DateInput as le } from "../dateinput/DateInput.mjs";
 import { TimeSelector as he } from "./TimeSelector.mjs";
-import { MAX_TIME as de, MIN_TIME as ue, setTime as M, MIDNIGHT_DATE as pe } from "../utils.mjs";
+import { MAX_TIME as ue, MIN_TIME as de, setTime as M, MIDNIGHT_DATE as pe } from "../utils.mjs";
 import { isInRange as me, isBiggerThanMax as ce, isSmallerThanMin as ge } from "./utils.mjs";
 import { PickerFloatingLabel as fe } from "../hooks/usePickerFloatingLabel.mjs";
 import { Button as ve } from "@progress/kendo-react-buttons";
 import { AdaptiveMode as we } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as Se } from "@progress/kendo-react-layout";
+import { ActionSheetContent as be } from "@progress/kendo-react-layout";
 const a = class a extends n.Component {
   constructor(i) {
     super(i), this._element = null, this._dateInput = n.createRef(), this._timeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.showLicenseWatermark = !1, this.focus = () => {
@@ -73,16 +73,17 @@ const a = class a extends n.Component {
       const { windowWidth: t = 0 } = this.state, s = {
         expand: this.show,
         onClose: this.handleBlur,
-        title: this.props.adaptiveTitle,
+        title: this.props.adaptiveTitle || this.props.label,
+        subTitle: this.props.adaptiveSubtitle,
         windowWidth: t,
         footer: {
-          cancelText: this.localizationService.toLanguageString(f, u[re]),
+          cancelText: this.localizationService.toLanguageString(f, d[re]),
           onCancel: this.handleValueReject,
-          applyText: this.localizationService.toLanguageString(C, u[C]),
+          applyText: this.localizationService.toLanguageString(I, d[I]),
           onApply: (o) => this.handleValueChange(o)
         }
       };
-      return /* @__PURE__ */ n.createElement(we, { ...s }, /* @__PURE__ */ n.createElement(Se, null, this.renderTimeSelector()));
+      return /* @__PURE__ */ n.createElement(we, { ...s }, /* @__PURE__ */ n.createElement(be, null, this.renderTimeSelector()));
     }, this.setTimeSelectorRef = (t) => {
       this._timeSelector = t;
     }, this.nextValue = (t, s) => t.value !== void 0 ? t.value : s.value, this.nextShow = (t, s) => t.show !== void 0 ? t.show : s.show, this.handleInputValueChange = (t) => {
@@ -108,17 +109,17 @@ const a = class a extends n.Component {
       this.setState({ focused: !1 }), this.setShow(!1);
     }, this.handleValueReject = (t) => {
       this.setShow(!1);
-    }, this.handleIconClick = (t) => {
+    }, this.handleClick = (t) => {
       this.props.disabled || (this.shouldFocusDateInput = !0, this.setShow(!this.show));
     }, this.handleIconMouseDown = (t) => {
       t.preventDefault();
     }, this.handleKeyDown = (t) => {
       const { altKey: s, keyCode: o } = t;
-      if (o === d.esc) {
+      if (o === u.esc) {
         this.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      s && (o === d.up || o === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === d.up, this.setShow(o === d.down));
+      s && (o === u.up || o === u.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === u.up, this.setShow(o === u.down));
     }, this.showLicenseWatermark = !Z(ae, { component: "TimePicker" }), this.state = {
       value: this.props.defaultValue || a.defaultProps.defaultValue,
       show: this.props.defaultShow || a.defaultProps.defaultShow,
@@ -130,7 +131,7 @@ const a = class a extends n.Component {
     return this.props.id + "-popup-id";
   }
   get document() {
-    if (I)
+    if (C)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -222,13 +223,15 @@ const a = class a extends n.Component {
    */
   componentDidMount() {
     var i;
-    this.observerResize = I && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (i = this.document) != null && i.body && this.observerResize && this.observerResize.observe(this.document.body);
+    this.observerResize = C && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (i = this.document) != null && i.body && this.observerResize && this.observerResize.observe(this.document.body);
   }
   /**
    * @hidden
    */
   componentDidUpdate() {
-    this._timeSelector && this.show && !this.prevShow ? this._timeSelector.focusActiveList() : this.dateInput && this.dateInput.element && !this.show && this.shouldFocusDateInput && this.dateInput.element.focus({ preventScroll: !0 }), this.prevShow = this.show, this.shouldFocusDateInput = !1;
+    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;
   }
   /**
    * @hidden
@@ -259,21 +262,21 @@ const a = class a extends n.Component {
       required: E,
       validityStyles: R,
       ariaLabelledBy: B,
-      ariaDescribedBy: V,
+      ariaDescribedBy: A,
       unstyled: v,
-      enableMouseWheel: A,
-      autoCorrectParts: F,
+      enableMouseWheel: F,
+      autoCorrectParts: V,
       autoSwitchParts: L,
       autoSwitchKeys: N,
       allowCaretMode: _,
       inputAttributes: q
-    } = this.props, w = v && v.uTimePicker, S = !this.validityStyles || this.validity.valid, K = {
+    } = this.props, w = v && v.uTimePicker, b = !this.validityStyles || this.validity.valid, K = {
       disabled: o,
       format: O,
       formatPlaceholder: D,
       id: r,
       ariaLabelledBy: B,
-      ariaDescribedBy: V,
+      ariaDescribedBy: A,
       max: this.normalizeTime(this.max),
       min: this.normalizeTime(this.min),
       name: z,
@@ -293,16 +296,16 @@ const a = class a extends n.Component {
       size: null,
       fillMode: null,
       rounded: null,
-      enableMouseWheel: A,
-      autoCorrectParts: F,
+      enableMouseWheel: F,
+      autoCorrectParts: V,
       autoSwitchParts: L,
       autoSwitchKeys: N,
       allowCaretMode: _,
       inputAttributes: q
-    }, W = this.localizationService.toLanguageString(f, u[f]), U = this.localizationService.toLanguageString(
+    }, W = this.localizationService.toLanguageString(f, d[f]), U = this.localizationService.toLanguageString(
       T,
-      u[T]
-    ), b = /* @__PURE__ */ n.createElement(
+      d[T]
+    ), S = /* @__PURE__ */ n.createElement(
       J,
       {
         onFocus: this.handleFocus,
@@ -313,7 +316,6 @@ const a = class a extends n.Component {
       ({ onFocus: j, onBlur: H }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "span",
         {
-          id: this.props.id,
           ref: (G) => {
             this._element = G;
           },
@@ -323,7 +325,7 @@ const a = class a extends n.Component {
               size: i,
               rounded: t,
               fillMode: s,
-              invalid: !S,
+              invalid: !b,
               required: this.required,
               disabled: o
             }),
@@ -331,9 +333,9 @@ const a = class a extends n.Component {
           ),
           onKeyDown: this.handleKeyDown,
           style: { width: P },
-          onFocus: j,
+          onFocus: this.mobileMode ? this.handleClick : j,
           onBlur: H,
-          onClick: this.mobileMode ? this.handleIconClick : void 0
+          onClick: this.mobileMode ? this.handleClick : void 0
         },
         /* @__PURE__ */ n.createElement(
           this.dateInputComp,
@@ -352,7 +354,7 @@ const a = class a extends n.Component {
             icon: "clock",
             svgIcon: se,
             onMouseDown: this.handleIconMouseDown,
-            onClick: this.mobileMode ? void 0 : this.handleIconClick,
+            onClick: this.mobileMode ? void 0 : this.handleClick,
             title: U,
             className: c(g.inputButton({ c: w })),
             rounded: null,
@@ -369,12 +371,12 @@ const a = class a extends n.Component {
         dateInput: this._dateInput,
         label: this.props.label,
         editorId: r,
-        editorValid: S,
+        editorValid: b,
         editorDisabled: this.props.disabled,
-        children: b,
+        children: S,
         style: { width: this.props.width }
       }
-    ) : b;
+    ) : S;
   }
   normalizeTime(i) {
     return M(pe, i);
@@ -473,8 +475,8 @@ a.displayName = "TimePicker", a.propTypes = {
   defaultValue: null,
   disabled: !1,
   format: "t",
-  max: de,
-  min: ue,
+  max: ue,
+  min: de,
   popupSettings: {},
   tabIndex: 0,
   steps: {},
@@ -485,9 +487,9 @@ a.displayName = "TimePicker", a.propTypes = {
   fillMode: "solid"
 };
 let p = a;
-const be = Y(), ye = $(
+const Se = Y(), ye = $(
   ee(
-    be,
+    Se,
     te(ie(p))
   )
 );
@@ -495,6 +497,6 @@ ye.displayName = "KendoReactTimePicker";
 ne(p);
 export {
   ye as TimePicker,
-  be as TimePickerPropsContext,
+  Se as TimePickerPropsContext,
   p as TimePickerWithoutContext
 };

package/timepicker/TimeSelector.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 I=require("react"),e=require("prop-types"),g=require("@progress/kendo-date-math"),s=require("@progress/kendo-react-common"),f=require("@progress/kendo-react-intl"),l=require("../messages/index.js"),y=require("../utils.js"),m=require("./utils.js"),K=require("./TimePart.js"),O=require("@progress/kendo-react-buttons");function x(u){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const t in u)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(u,t);Object.defineProperty(i,t,n.get?n:{enumerable:!0,get:()=>u[t]})}}return i.default=u,Object.freeze(i)}const a=x(I),c=class c extends a.Component{constructor(i){super(i),this._element=null,this._cancelButton=null,this._acceptButton=null,this.timePart=null,this.focusActiveList=()=>{this.timePart&&this.timePart.focus({preventScroll:!0})},this.handleKeyDown=t=>{const{keyCode:n}=t;switch(n){case s.Keys.enter:this.hasActiveButton()||this.handleAccept(t);return;default:return}},this.revertToNowButton=t=>{const{keyCode:n,shiftKey:o}=t;!o&&n===s.Keys.tab&&(t.preventDefault(),this.props.nowButton!==!1?this.timePart&&this.timePart.focus({preventScroll:!0},!0):this.timePart&&this.timePart.focus({preventScroll:!0}))},this.handleNowKeyDown=t=>{var p;const{keyCode:n,shiftKey:o}=t;o&&n===s.Keys.tab?(t.preventDefault(),this._acceptButton&&((p=this._acceptButton.element)==null||p.focus({preventScroll:!0}))):n===s.Keys.enter&&(t.stopPropagation(),this.handleNowClick(t))},this.handleAccept=t=>{const n=this.mergeValue(g.cloneDate(this.value||m.getNow()),this.timePart?this.timePart.value:this.current);this.setState({value:n}),this.valueDuringOnChange=n;const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0},this.handleReject=t=>{this.setState({current:this.value});const{onReject:n}=this.props;n&&n.call(void 0,t)},this.handleNowClick=t=>{const n=this.mergeValue(g.cloneDate(this.value||m.getNow()),m.getNow());this.setState({current:n,value:n}),this.valueDuringOnChange=n;const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0},this.handleChange=t=>{this.setState({current:t});const{handleTimeChange:n}=this.props;n&&n.call(void 0,{time:t})},this.dateFormatParts=this.intl.splitDateFormat(this.props.format||c.defaultProps.format),this.mergeValue=m.valueMerger(m.generateGetters(this.dateFormatParts)),this.hasActiveButton=this.hasActiveButton.bind(this),this.state={current:this.props.value||y.MIDNIGHT_DATE,value:this.props.value||c.defaultProps.value}}get element(){return this._element}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?g.cloneDate(i):null}get intl(){return f.provideIntlService(this)}get current(){return this.state.current!==null?g.cloneDate(this.state.current):null}componentWillUnmount(){clearTimeout(this.nextTickId)}render(){const{format:i,cancelButton:t,disabled:n,tabIndex:o,className:p,smoothScroll:P,min:B,max:k,boundRange:N,nowButton:T,steps:S,show:E,mobileMode:C,unstyled:h}=this.props,_=h&&h.uTimePicker,v=h&&h.uTime,D=f.provideLocalizationService(this),b=D.toLanguageString(l.timePickerCancel,l.messages[l.timePickerCancel]),w=D.toLanguageString(l.timePickerSet,l.messages[l.timePickerSet]);return a.createElement(a.Fragment,null,a.createElement("div",{ref:r=>{this._element=r},tabIndex:n?void 0:o||0,className:s.classNames(s.uTimePicker.timeSelector({c:_,mobileMode:C,disabled:n}),p),onKeyDown:this.handleKeyDown},a.createElement(K.TimePart,{ref:r=>{this.timePart=r},value:this.current,onChange:this.handleChange,onNowClick:this.handleNowClick,format:i,smoothScroll:P,min:B,max:k,boundRange:N,disabled:n,nowButton:T,steps:S,show:E,mobileMode:C,onNowKeyDown:this.handleNowKeyDown,unstyled:h})),this.props.footer&&a.createElement("div",{className:s.classNames(s.uTime.footer({c:v}))},t&&a.createElement(O.Button,{type:"button",ref:r=>{this._cancelButton=r},className:s.classNames(s.uTime.cancel({c:v})),onClick:this.handleReject,title:b,"aria-label":b},b),a.createElement(O.Button,{type:"button",ref:r=>{this._acceptButton=r},className:s.classNames(s.uTime.accept({c:v})),themeColor:"primary",onClick:this.handleAccept,onKeyDown:this.revertToNowButton,title:w,"aria-label":w},w)))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}hasActiveButton(){if(!this._acceptButton||!this._acceptButton.element)return!1;const i=s.getActiveElement(document);return this._acceptButton&&i===this._acceptButton.element||this._cancelButton&&i===this._cancelButton.element}};c.propTypes={cancelButton:e.bool,className:e.string,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"])})]),max:e.instanceOf(Date),min:e.instanceOf(Date),nowButton:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,value:e.instanceOf(Date),show:e.bool},c.defaultProps={value:null,disabled:!1,cancelButton:!0,format:"t",min:y.MIN_TIME,max:y.MAX_TIME,boundRange:!1,footer:!0};let d=c;f.registerForIntl(d);f.registerForLocalization(d);exports.TimeSelector=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),e=require("prop-types"),g=require("@progress/kendo-date-math"),s=require("@progress/kendo-react-common"),f=require("@progress/kendo-react-intl"),r=require("../messages/index.js"),y=require("../utils.js"),m=require("./utils.js"),K=require("./TimePart.js"),O=require("@progress/kendo-react-buttons");function x(u){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const t in u)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(u,t);Object.defineProperty(i,t,n.get?n:{enumerable:!0,get:()=>u[t]})}}return i.default=u,Object.freeze(i)}const l=x(I),c=class c extends l.Component{constructor(i){super(i),this._element=null,this._cancelButton=null,this._acceptButton=null,this.timePart=null,this.focusActiveList=()=>{this.timePart&&this.timePart.focus({preventScroll:!0})},this.handleKeyDown=t=>{const{keyCode:n}=t;switch(n){case s.Keys.enter:this.hasActiveButton()||this.handleAccept(t);return;default:return}},this.revertToNowButton=t=>{const{keyCode:n,shiftKey:o}=t;!o&&n===s.Keys.tab&&(t.preventDefault(),this.props.nowButton!==!1?this.timePart&&this.timePart.focus({preventScroll:!0},!0):this.timePart&&this.timePart.focus({preventScroll:!0}))},this.handleNowKeyDown=t=>{var p;const{keyCode:n,shiftKey:o}=t;o&&n===s.Keys.tab?(t.preventDefault(),this._acceptButton&&((p=this._acceptButton.element)==null||p.focus({preventScroll:!0}))):n===s.Keys.enter&&(t.stopPropagation(),this.handleNowClick(t))},this.handleAccept=t=>{const n=this.mergeValue(g.cloneDate(this.value||m.getNow()),this.timePart?this.timePart.value:this.current);this.setState({value:n}),this.valueDuringOnChange=n;const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0},this.handleReject=t=>{this.setState({current:this.value});const{onReject:n}=this.props;n&&n.call(void 0,t)},this.handleNowClick=t=>{const n=this.mergeValue(g.cloneDate(this.value||m.getNow()),m.getNow());this.setState({current:n,value:n}),this.valueDuringOnChange=n;const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0},this.handleChange=t=>{this.setState({current:t});const{handleTimeChange:n}=this.props;n&&n.call(void 0,{time:t})},this.dateFormatParts=this.intl.splitDateFormat(this.props.format||c.defaultProps.format),this.mergeValue=m.valueMerger(m.generateGetters(this.dateFormatParts)),this.hasActiveButton=this.hasActiveButton.bind(this),this.state={current:this.props.value||y.MIDNIGHT_DATE,value:this.props.value||c.defaultProps.value}}get element(){return this._element}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?g.cloneDate(i):null}get intl(){return f.provideIntlService(this)}get current(){return this.state.current!==null?g.cloneDate(this.state.current):null}componentWillUnmount(){clearTimeout(this.nextTickId)}render(){const{format:i,cancelButton:t,disabled:n,tabIndex:o,className:p,smoothScroll:P,min:B,max:k,boundRange:N,nowButton:T,steps:S,show:_,mobileMode:C,unstyled:h}=this.props,E=h&&h.uTimePicker,v=h&&h.uTime,D=f.provideLocalizationService(this),b=D.toLanguageString(r.timePickerCancel,r.messages[r.timePickerCancel]),w=D.toLanguageString(r.timePickerSet,r.messages[r.timePickerSet]);return l.createElement("div",{ref:a=>{this._element=a},tabIndex:n?void 0:o||0,className:s.classNames(s.uTimePicker.timeSelector({c:E,mobileMode:C,disabled:n}),p),onKeyDown:this.handleKeyDown},l.createElement(K.TimePart,{ref:a=>{this.timePart=a},value:this.current,onChange:this.handleChange,onNowClick:this.handleNowClick,format:i,smoothScroll:P,min:B,max:k,boundRange:N,disabled:n,nowButton:T,steps:S,show:_,mobileMode:C,onNowKeyDown:this.handleNowKeyDown,unstyled:h}),this.props.footer&&l.createElement("div",{className:s.classNames(s.uTime.footer({c:v}))},t&&l.createElement(O.Button,{type:"button",ref:a=>{this._cancelButton=a},className:s.classNames(s.uTime.cancel({c:v})),onClick:this.handleReject,title:b,"aria-label":b},b),l.createElement(O.Button,{type:"button",ref:a=>{this._acceptButton=a},className:s.classNames(s.uTime.accept({c:v})),themeColor:"primary",onClick:this.handleAccept,onKeyDown:this.revertToNowButton,title:w,"aria-label":w},w)))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}hasActiveButton(){if(!this._acceptButton||!this._acceptButton.element)return!1;const i=s.getActiveElement(document);return this._acceptButton&&i===this._acceptButton.element||this._cancelButton&&i===this._cancelButton.element}};c.propTypes={cancelButton:e.bool,className:e.string,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"])})]),max:e.instanceOf(Date),min:e.instanceOf(Date),nowButton:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,value:e.instanceOf(Date),show:e.bool},c.defaultProps={value:null,disabled:!1,cancelButton:!0,format:"t",min:y.MIN_TIME,max:y.MAX_TIME,boundRange:!1,footer:!0};let d=c;f.registerForIntl(d);f.registerForLocalization(d);exports.TimeSelector=d;