@progress/kendo-react-dateinputs 9.0.0-develop.9 → 9.0.0

package/index.d.mts

@@ -568,6 +568,34 @@ export declare interface DateInputChangeEvent<T = DateInput> {
     target: T;
 }
 
+/** @hidden */
+declare interface DateInputCommonPackageProps {
+    /**
+     * Determines whether to autocorrect invalid segments automatically.
+     *
+     * @default `true`
+     */
+    autoCorrectParts?: boolean;
+    /**
+     * Determines whether to automatically move to the next segment after the user completes the current one.
+     *
+     * @default `true`
+     */
+    autoSwitchParts?: boolean;
+    /**
+     * A string array representing custom keys, which will move the focus to the next date format segment.
+     *
+     * @default `[]`
+     */
+    autoSwitchKeys?: string[];
+    /**
+     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     *
+     * @default `false`
+     */
+    allowCaretMode?: boolean;
+}
+
 /**
  * The interface which defines a custom-format placeholder structure in the DateInput.
  */
@@ -665,7 +693,7 @@ declare class DateInputIntl {
 /**
  * Represents the props of the [KendoReact DateInput component]({% slug overview_dateinput %}). The generic argument is passed to the `onChange` property and is used as a target in the [`DateInputChangeEvent`]({% slug api_dateinputs_dateinputchangeevent %}) interface.
  */
-export declare interface DateInputProps<T extends DateInput = any> extends FormComponentProps, DateInputSettings {
+export declare interface DateInputProps<T extends DateInput = any> extends FormComponentProps, DateInputSettings, DateInputCommonPackageProps {
     /** @hidden */
     _ref?: React_2.MutableRefObject<DateInput | null>;
     /**
@@ -690,6 +718,8 @@ export declare interface DateInputProps<T extends DateInput = any> extends FormC
     defaultValue?: Date | null;
     /**
      * Indicates the availability of interactive popup element that can be triggered by an element. By default the property is set to `grid`.
+     *
+     * @default `grid`
      */
     ariaHasPopup?: boolean | 'grid' | 'dialog';
     /**
@@ -755,8 +785,29 @@ export declare interface DateInputProps<T extends DateInput = any> extends FormC
     clearButton?: boolean;
     /**
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DateInput. (Defaults to `false`)
+     *
+     * @default `false`
      */
     autoFocus?: boolean;
+    /**
+     * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill?: boolean;
+    /**
+     * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)).
+     * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax?: number;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the date segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
     /**
      * @hidden
      */
@@ -1004,6 +1055,11 @@ export declare class DateInputWithoutContext extends React_2.Component<DateInput
         validityStyles: boolean;
         validationMessage: string;
         placeholder: null;
+        enableMouseWheel: boolean;
+        autoCorrectParts: boolean;
+        autoSwitchParts: boolean;
+        allowCaretMode: boolean;
+        twoDigitYearMax: number;
         ariaHasPopup: string;
         autoFocus: boolean;
     };
@@ -1092,14 +1148,15 @@ export declare class DateInputWithoutContext extends React_2.Component<DateInput
         formatPlaceholder: string;
         placeholder: string | null | undefined;
         selectPreviousSegmentOnBackspace: boolean;
-        allowCaretMode: boolean;
         value: Date | null;
         intlService: DateInputIntl;
-        enableMouseWheel: boolean;
-        autoCorrectParts: boolean;
-        autoSwitchParts: boolean;
-        autoSwitchKeys: never[];
-        twoDigitYearMax: number;
+        autoFill: boolean;
+        enableMouseWheel: boolean | undefined;
+        autoCorrectParts: boolean | undefined;
+        autoSwitchParts: boolean | undefined;
+        autoSwitchKeys: string[];
+        twoDigitYearMax: number | undefined;
+        allowCaretMode: boolean | undefined;
     };
     /**
      * @hidden
@@ -1216,7 +1273,7 @@ export declare interface DatePickerOpenEvent {
 /**
  * Represents the props of the [KendoReact DatePicker component]({% slug overview_datepicker %}).
  */
-export declare interface DatePickerProps extends DatePickerSettings, FormComponentProps, Omit<React_2.HTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'onBlur' | 'onFocus' | 'placeholder'> {
+export declare interface DatePickerProps extends DatePickerSettings, FormComponentProps, DateInputCommonPackageProps, Omit<React_2.HTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'onBlur' | 'onFocus' | 'placeholder'> {
     /**
      * Sets the default value of the DatePicker ([see example]({% slug default_value_datepicker %})).
      */
@@ -1300,6 +1357,25 @@ export declare interface DatePickerProps extends DatePickerSettings, FormCompone
      * @hidden
      */
     modified?: boolean;
+    /**
+     * When enabled, the DatePicker will autofill the rest of the date to the current date when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill?: boolean;
+    /**
+     * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)).
+     * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax?: number;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the date segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
 }
 
 /**
@@ -2208,7 +2284,7 @@ export declare interface DateTimePickerOpenEvent {
 /**
  * Represents the props of the [KendoReact DateTimePicker component]({% slug overview_datetimepicker %}).
  */
-export declare interface DateTimePickerProps extends DateTimePickerSettings, FormComponentProps {
+export declare interface DateTimePickerProps extends DateTimePickerSettings, FormComponentProps, DateInputCommonPackageProps {
     /**
      * Sets the default value of the DateTimePicker
      * ([see example]({% slug default_value_datetimepicker %})).
@@ -2290,6 +2366,25 @@ export declare interface DateTimePickerProps extends DateTimePickerSettings, For
      * @hidden
      */
     unstyled?: DateInputsClassStructure;
+    /**
+     * When enabled, the DateTimePicker will autofill the rest of the date/time to the current date/time when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill?: boolean;
+    /**
+     * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)).
+     * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax?: number;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the datetime segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
 }
 
 /**
@@ -3825,7 +3920,7 @@ export declare interface TimePickerOpenEvent {
 /**
  * Represents the props of the [KendoReact TimePicker component]({% slug overview_timepicker %}).
  */
-export declare interface TimePickerProps extends TimePickerSettings, FormComponentProps {
+export declare interface TimePickerProps extends TimePickerSettings, FormComponentProps, DateInputCommonPackageProps {
     /**
      * Sets the default value of the TimePicker ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-value)).
      */
@@ -3897,6 +3992,12 @@ export declare interface TimePickerProps extends TimePickerSettings, FormCompone
      * @hidden
      */
     unstyled?: DateInputsClassStructure;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
 }
 
 /**

package/index.d.ts

@@ -568,6 +568,34 @@ export declare interface DateInputChangeEvent<T = DateInput> {
     target: T;
 }
 
+/** @hidden */
+declare interface DateInputCommonPackageProps {
+    /**
+     * Determines whether to autocorrect invalid segments automatically.
+     *
+     * @default `true`
+     */
+    autoCorrectParts?: boolean;
+    /**
+     * Determines whether to automatically move to the next segment after the user completes the current one.
+     *
+     * @default `true`
+     */
+    autoSwitchParts?: boolean;
+    /**
+     * A string array representing custom keys, which will move the focus to the next date format segment.
+     *
+     * @default `[]`
+     */
+    autoSwitchKeys?: string[];
+    /**
+     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     *
+     * @default `false`
+     */
+    allowCaretMode?: boolean;
+}
+
 /**
  * The interface which defines a custom-format placeholder structure in the DateInput.
  */
@@ -665,7 +693,7 @@ declare class DateInputIntl {
 /**
  * Represents the props of the [KendoReact DateInput component]({% slug overview_dateinput %}). The generic argument is passed to the `onChange` property and is used as a target in the [`DateInputChangeEvent`]({% slug api_dateinputs_dateinputchangeevent %}) interface.
  */
-export declare interface DateInputProps<T extends DateInput = any> extends FormComponentProps, DateInputSettings {
+export declare interface DateInputProps<T extends DateInput = any> extends FormComponentProps, DateInputSettings, DateInputCommonPackageProps {
     /** @hidden */
     _ref?: React_2.MutableRefObject<DateInput | null>;
     /**
@@ -690,6 +718,8 @@ export declare interface DateInputProps<T extends DateInput = any> extends FormC
     defaultValue?: Date | null;
     /**
      * Indicates the availability of interactive popup element that can be triggered by an element. By default the property is set to `grid`.
+     *
+     * @default `grid`
      */
     ariaHasPopup?: boolean | 'grid' | 'dialog';
     /**
@@ -755,8 +785,29 @@ export declare interface DateInputProps<T extends DateInput = any> extends FormC
     clearButton?: boolean;
     /**
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DateInput. (Defaults to `false`)
+     *
+     * @default `false`
      */
     autoFocus?: boolean;
+    /**
+     * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill?: boolean;
+    /**
+     * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)).
+     * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax?: number;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the date segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
     /**
      * @hidden
      */
@@ -1004,6 +1055,11 @@ export declare class DateInputWithoutContext extends React_2.Component<DateInput
         validityStyles: boolean;
         validationMessage: string;
         placeholder: null;
+        enableMouseWheel: boolean;
+        autoCorrectParts: boolean;
+        autoSwitchParts: boolean;
+        allowCaretMode: boolean;
+        twoDigitYearMax: number;
         ariaHasPopup: string;
         autoFocus: boolean;
     };
@@ -1092,14 +1148,15 @@ export declare class DateInputWithoutContext extends React_2.Component<DateInput
         formatPlaceholder: string;
         placeholder: string | null | undefined;
         selectPreviousSegmentOnBackspace: boolean;
-        allowCaretMode: boolean;
         value: Date | null;
         intlService: DateInputIntl;
-        enableMouseWheel: boolean;
-        autoCorrectParts: boolean;
-        autoSwitchParts: boolean;
-        autoSwitchKeys: never[];
-        twoDigitYearMax: number;
+        autoFill: boolean;
+        enableMouseWheel: boolean | undefined;
+        autoCorrectParts: boolean | undefined;
+        autoSwitchParts: boolean | undefined;
+        autoSwitchKeys: string[];
+        twoDigitYearMax: number | undefined;
+        allowCaretMode: boolean | undefined;
     };
     /**
      * @hidden
@@ -1216,7 +1273,7 @@ export declare interface DatePickerOpenEvent {
 /**
  * Represents the props of the [KendoReact DatePicker component]({% slug overview_datepicker %}).
  */
-export declare interface DatePickerProps extends DatePickerSettings, FormComponentProps, Omit<React_2.HTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'onBlur' | 'onFocus' | 'placeholder'> {
+export declare interface DatePickerProps extends DatePickerSettings, FormComponentProps, DateInputCommonPackageProps, Omit<React_2.HTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'onBlur' | 'onFocus' | 'placeholder'> {
     /**
      * Sets the default value of the DatePicker ([see example]({% slug default_value_datepicker %})).
      */
@@ -1300,6 +1357,25 @@ export declare interface DatePickerProps extends DatePickerSettings, FormCompone
      * @hidden
      */
     modified?: boolean;
+    /**
+     * When enabled, the DatePicker will autofill the rest of the date to the current date when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill?: boolean;
+    /**
+     * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)).
+     * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax?: number;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the date segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
 }
 
 /**
@@ -2208,7 +2284,7 @@ export declare interface DateTimePickerOpenEvent {
 /**
  * Represents the props of the [KendoReact DateTimePicker component]({% slug overview_datetimepicker %}).
  */
-export declare interface DateTimePickerProps extends DateTimePickerSettings, FormComponentProps {
+export declare interface DateTimePickerProps extends DateTimePickerSettings, FormComponentProps, DateInputCommonPackageProps {
     /**
      * Sets the default value of the DateTimePicker
      * ([see example]({% slug default_value_datetimepicker %})).
@@ -2290,6 +2366,25 @@ export declare interface DateTimePickerProps extends DateTimePickerSettings, For
      * @hidden
      */
     unstyled?: DateInputsClassStructure;
+    /**
+     * When enabled, the DateTimePicker will autofill the rest of the date/time to the current date/time when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill?: boolean;
+    /**
+     * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)).
+     * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax?: number;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the datetime segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
 }
 
 /**
@@ -3825,7 +3920,7 @@ export declare interface TimePickerOpenEvent {
 /**
  * Represents the props of the [KendoReact TimePicker component]({% slug overview_timepicker %}).
  */
-export declare interface TimePickerProps extends TimePickerSettings, FormComponentProps {
+export declare interface TimePickerProps extends TimePickerSettings, FormComponentProps, DateInputCommonPackageProps {
     /**
      * Sets the default value of the TimePicker ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-value)).
      */
@@ -3897,6 +3992,12 @@ export declare interface TimePickerProps extends TimePickerSettings, FormCompone
      * @hidden
      */
     unstyled?: DateInputsClassStructure;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
 }
 
 /**

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-dateinputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1730208312,
+  publishDate: 1731417760,
   version: "",
   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": "9.0.0-develop.9",
+  "version": "9.0.0",
   "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",
@@ -24,14 +24,14 @@
   "peerDependencies": {
     "@progress/kendo-date-math": "^1.4.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-dateinputs-common": "0.3.5",
-    "@progress/kendo-react-buttons": "9.0.0-develop.9",
-    "@progress/kendo-react-common": "9.0.0-develop.9",
-    "@progress/kendo-react-intl": "9.0.0-develop.9",
-    "@progress/kendo-react-labels": "9.0.0-develop.9",
-    "@progress/kendo-react-layout": "9.0.0-develop.9",
-    "@progress/kendo-react-popup": "9.0.0-develop.9",
-    "@progress/kendo-svg-icons": "^3.0.0",
+    "@progress/kendo-dateinputs-common": "0.4.0",
+    "@progress/kendo-react-buttons": "9.0.0",
+    "@progress/kendo-react-common": "9.0.0",
+    "@progress/kendo-react-intl": "9.0.0",
+    "@progress/kendo-react-labels": "9.0.0",
+    "@progress/kendo-react-layout": "9.0.0",
+    "@progress/kendo-react-popup": "9.0.0",
+    "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
   },

package/timepicker/TimePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),e=require("prop-types"),K=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),j=require("@progress/kendo-svg-icons"),I=require("@progress/kendo-react-intl"),U=require("../package-metadata.js"),l=require("../messages/index.js"),H=require("../dateinput/DateInput.js"),W=require("./TimeSelector.js"),p=require("../utils.js"),f=require("./utils.js"),G=require("../hooks/usePickerFloatingLabel.js"),X=require("@progress/kendo-react-buttons"),Z=require("../common/constants.js"),$=require("../common/AdaptiveMode.js"),J=require("@progress/kendo-react-layout");function Q(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const r=Q(_),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:s,nowButton:o,disabled:u,format:d,steps:h,unstyled:g}=this.props;return r.createElement(W.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:s,disabled:u,nowButton:o,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:o}=this.props,u=o&&o.uTimePicker,d=n.classNames(t),h={popupClass:n.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?r.createElement(this.props.popup,{...h},this.renderTimeSelector()):r.createElement(K.Popup,{...h},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,adaptiveTitle: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:o=>this.handleValueChange(o)}};return r.createElement($.AdaptiveMode,{...s},r.createElement(J.ActionSheetContent,{overflowHidden:!0},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,o=this.state.candidate||this.value;s&&s.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.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:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},n.validatePackage(U.packageMetadata),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.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 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),o=f.isInRange(i,t,s),u=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,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(){return!!(this.state.windowWidth&&this.state.windowWidth<=Z.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get popupSettings(){return this.props.popupSettings||a.defaultProps.popupSettings}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}get localizationService(){return I.provideLocalizationService(this)}componentDidMount(){var i;this.observerResize=n.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=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,disabled:o,tabIndex:u,title:d,id:h,className:g,format:M,formatPlaceholder:D,width:O,name:P,steps:k,validationMessage:z,required:q,validityStyles:x,ariaLabelledBy:R,ariaDescribedBy:E,unstyled:v}=this.props,w=v&&v.uTimePicker,S=!this.validityStyles||this.validity.valid,B={disabled:o,format:M,formatPlaceholder:D,id:h,ariaLabelledBy:R,ariaDescribedBy:E,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:P,onChange:this.handleInputValueChange,required:q,steps:k,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:z,validityStyles:x,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,readonly:this.mobileMode},V=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),F=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),b=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:N,onBlur:A})=>r.createElement(r.Fragment,null,r.createElement("span",{id:this.props.id,ref:L=>{this._element=L},className:n.classNames(n.uTimePicker.wrapper({c:w,size:i,rounded:t,fillMode:s,invalid:!S,required:this.required,disabled:o}),g),onKeyDown:this.handleKeyDown,style:{width:O},onFocus:N,onBlur:A,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,...B}),r.createElement(X.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:j.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleIconClick,title:F,className:n.classNames(n.uTimePicker.inputButton({c:w})),rounded:null,fillMode:s,"aria-label":V}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(G.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:h,editorValid:S,editorDisabled:this.props.disabled,children:b,style:{width:this.props.width}}):b}normalizeTime(i){return p.setTime(p.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?p.setTime(this.value,i):i}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="TimePicker",a.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"])},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:p.MAX_TIME,min:p.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:H.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let m=a;const T=n.createPropsContext(),C=n.withIdHOC(n.withPropsContext(T,n.withUnstyledHOC(m)));C.displayName="KendoReactTimePicker";I.registerForLocalization(m);exports.TimePicker=C;exports.TimePickerPropsContext=T;exports.TimePickerWithoutContext=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),e=require("prop-types"),G=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),X=require("@progress/kendo-svg-icons"),I=require("@progress/kendo-react-intl"),Z=require("../package-metadata.js"),l=require("../messages/index.js"),$=require("../dateinput/DateInput.js"),J=require("./TimeSelector.js"),p=require("../utils.js"),f=require("./utils.js"),Q=require("../hooks/usePickerFloatingLabel.js"),Y=require("@progress/kendo-react-buttons"),ee=require("../common/constants.js"),te=require("../common/AdaptiveMode.js"),ie=require("@progress/kendo-react-layout");function se(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const r=se(W),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:s,nowButton:o,disabled:u,format:d,steps:h,unstyled:g}=this.props;return r.createElement(J.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:s,disabled:u,nowButton:o,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:o}=this.props,u=o&&o.uTimePicker,d=n.classNames(t),h={popupClass:n.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?r.createElement(this.props.popup,{...h},this.renderTimeSelector()):r.createElement(G.Popup,{...h},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,adaptiveTitle: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:o=>this.handleValueChange(o)}};return r.createElement(te.AdaptiveMode,{...s},r.createElement(ie.ActionSheetContent,{overflowHidden:!0},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,o=this.state.candidate||this.value;s&&s.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.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:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},n.validatePackage(Z.packageMetadata),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.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 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),o=f.isInRange(i,t,s),u=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,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(){return!!(this.state.windowWidth&&this.state.windowWidth<=ee.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get popupSettings(){return this.props.popupSettings||a.defaultProps.popupSettings}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}get localizationService(){return I.provideLocalizationService(this)}componentDidMount(){var i;this.observerResize=n.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=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,disabled:o,tabIndex:u,title:d,id:h,className:g,format:M,formatPlaceholder:P,width:D,name:O,steps:k,validationMessage:z,required:q,validityStyles:x,ariaLabelledBy:R,ariaDescribedBy:E,unstyled:v,enableMouseWheel:B,autoCorrectParts:V,autoSwitchParts:F,autoSwitchKeys:N,allowCaretMode:A}=this.props,w=v&&v.uTimePicker,S=!this.validityStyles||this.validity.valid,L={disabled:o,format:M,formatPlaceholder:P,id:h,ariaLabelledBy:R,ariaDescribedBy:E,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:O,onChange:this.handleInputValueChange,required:q,steps:k,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:z,validityStyles:x,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,readonly:this.mobileMode,enableMouseWheel:B,autoCorrectParts:V,autoSwitchParts:F,autoSwitchKeys:N,allowCaretMode:A},_=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),K=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),b=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:j,onBlur:U})=>r.createElement(r.Fragment,null,r.createElement("span",{id:this.props.id,ref:H=>{this._element=H},className:n.classNames(n.uTimePicker.wrapper({c:w,size:i,rounded:t,fillMode:s,invalid:!S,required:this.required,disabled:o}),g),onKeyDown:this.handleKeyDown,style:{width:D},onFocus:j,onBlur:U,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,...L}),r.createElement(Y.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:X.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleIconClick,title:K,className:n.classNames(n.uTimePicker.inputButton({c:w})),rounded:null,fillMode:s,"aria-label":_}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(Q.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:h,editorValid:S,editorDisabled:this.props.disabled,children:b,style:{width:this.props.width}}):b}normalizeTime(i){return p.setTime(p.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?p.setTime(this.value,i):i}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="TimePicker",a.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"])},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:p.MAX_TIME,min:p.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:$.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let m=a;const T=n.createPropsContext(),C=n.withIdHOC(n.withPropsContext(T,n.withUnstyledHOC(m)));C.displayName="KendoReactTimePicker";I.registerForLocalization(m);exports.TimePicker=C;exports.TimePickerPropsContext=T;exports.TimePickerWithoutContext=m;