@progress/kendo-react-dateinputs 13.3.0 → 13.4.0-develop.2

package/timepicker/TimePicker.d.ts

@@ -0,0 +1,417 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { FormComponent, FormComponentProps, FormComponentValidity, DateInputsClassStructure, AdaptiveModeContextType } from '@progress/kendo-react-common';
+import { LocalizationService } from '@progress/kendo-react-intl';
+import { DateInputHandle, DateInputProps } from '../dateinput/DateInput.js';
+import { TimeSelector } from './TimeSelector.js';
+import { TimePickerSettings } from './models/index.js';
+import { DateInputCommonPackageProps } from '../dateinput/models/common-package-props.js';
+import * as React from 'react';
+/**
+ * The arguments for the `onChange` event of the TimePicker.
+ */
+export interface TimePickerChangeEvent {
+    /** The native DOM event. */
+    nativeEvent?: any;
+    /** The React synthetic event. */
+    syntheticEvent: React.SyntheticEvent<any>;
+    /** The new `value`. */
+    value: Date | null;
+    /** The current popup state. */
+    show: boolean;
+    /** The component instance that fired the event. */
+    target: TimePicker;
+}
+/**
+ * The arguments for the `onOpen` event of the TimePicker.
+ */
+export interface TimePickerOpenEvent {
+    /** The component instance that fired the event. */
+    target: TimePicker;
+}
+/**
+ * The arguments for the `onClose` event of the TimePicker.
+ */
+export interface TimePickerCloseEvent {
+    /** The component instance that fired the event. */
+    target: TimePicker;
+}
+/**
+ * Represents the props of the [KendoReact TimePicker component](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker).
+ */
+export interface TimePickerProps extends TimePickerSettings, FormComponentProps, DateInputCommonPackageProps {
+    /**
+     * Sets the default value of the TimePicker ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/default-value#toc-setting-the-default-value)).
+     */
+    defaultValue?: Date | null;
+    /**
+     * Fires each time the user selects a new value ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/controlled-state#toc-controlling-the-date-value)).
+     */
+    onChange?: (event: TimePickerChangeEvent) => void;
+    /**
+     * Fires each time the popup is opened.
+     */
+    onOpen?: (event: TimePickerOpenEvent) => void;
+    /**
+     * Fires each time the popup is closed.
+     */
+    onClose?: (event: TimePickerCloseEvent) => void;
+    /**
+     * Specifies the value of the TimePicker ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/controlled-state#toc-controlling-the-date-value)).
+     *
+     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance.
+     */
+    value?: Date | null;
+    /**
+     * Configures the `size` of the TimePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <TimePicker size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the TimePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <TimePicker rounded="full" />
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the TimePicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <TimePicker fillMode="outline" />
+     * ```
+     */
+    fillMode?: '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(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
+     */
+    unstyled?: DateInputsClassStructure;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
+    /**
+     * Sets the HTML attributes of the inner focusable input element.
+     * Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * @hidden
+     * This prop is provided by the withAdaptiveModeContext HOC to subscribe to AdaptiveModeContext.
+     */
+    _adaptiveMode?: AdaptiveModeContextType;
+}
+/**
+ * @hidden
+ */
+export interface TimePickerState {
+    value: Date | null;
+    show: boolean;
+    focused: boolean;
+    windowWidth?: number;
+    candidate: Date | null;
+}
+/** @hidden */
+export declare class TimePickerWithoutContext extends React.Component<TimePickerProps, TimePickerState> implements FormComponent {
+    /**
+     * @hidden
+     */
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        cancelButton: PropTypes.Requireable<boolean>;
+        nowButton: PropTypes.Requireable<boolean>;
+        defaultShow: PropTypes.Requireable<boolean>;
+        defaultValue: PropTypes.Requireable<Date>;
+        disabled: PropTypes.Requireable<boolean>;
+        format: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<{
+            skeleton: PropTypes.Requireable<string>;
+            pattern: PropTypes.Requireable<string>;
+            date: PropTypes.Requireable<string>;
+            time: PropTypes.Requireable<string>;
+            datetime: PropTypes.Requireable<string>;
+            era: PropTypes.Requireable<string>;
+            year: PropTypes.Requireable<string>;
+            month: PropTypes.Requireable<string>;
+            day: PropTypes.Requireable<string>;
+            weekday: PropTypes.Requireable<string>;
+            hour: PropTypes.Requireable<string>;
+            hour12: PropTypes.Requireable<boolean>;
+            minute: PropTypes.Requireable<string>;
+            second: PropTypes.Requireable<string>;
+            timeZoneName: PropTypes.Requireable<string>;
+        }> | null | undefined>>;
+        formatPlaceholder: PropTypes.Requireable<NonNullable<"short" | "narrow" | "wide" | "formatPattern" | PropTypes.InferProps<{
+            year: PropTypes.Requireable<string>;
+            month: PropTypes.Requireable<string>;
+            day: PropTypes.Requireable<string>;
+            hour: PropTypes.Requireable<string>;
+            minute: PropTypes.Requireable<string>;
+            second: PropTypes.Requireable<string>;
+        }> | null | undefined>>;
+        id: PropTypes.Requireable<string>;
+        ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        min: PropTypes.Requireable<Date>;
+        max: PropTypes.Requireable<Date>;
+        name: PropTypes.Requireable<string>;
+        popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
+            animate: PropTypes.Requireable<boolean>;
+            appendTo: PropTypes.Requireable<any>;
+            popupClass: PropTypes.Requireable<string>;
+        }>>;
+        show: PropTypes.Requireable<boolean>;
+        steps: PropTypes.Requireable<PropTypes.InferProps<{
+            hour: PropTypes.Requireable<number>;
+            minute: PropTypes.Requireable<number>;
+            second: PropTypes.Requireable<number>;
+        }>>;
+        smoothScroll: PropTypes.Requireable<boolean>;
+        tabIndex: PropTypes.Requireable<number>;
+        title: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<Date>;
+        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        validationMessage: PropTypes.Requireable<string>;
+        required: PropTypes.Requireable<boolean>;
+        validate: PropTypes.Requireable<boolean>;
+        valid: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<"small" | "medium" | "large" | undefined>;
+        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full" | undefined>;
+        fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | undefined>;
+        inputAttributes: PropTypes.Requireable<object>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        defaultShow: boolean;
+        defaultValue: null;
+        disabled: boolean;
+        format: string;
+        max: Date;
+        min: Date;
+        popupSettings: {};
+        tabIndex: number;
+        steps: {};
+        validityStyles: boolean;
+        dateInput: React.ComponentType<DateInputProps<any>>;
+        size: "small" | "medium" | "large" | undefined;
+        rounded: "small" | "medium" | "large" | "full" | undefined;
+        fillMode: "flat" | "solid" | "outline" | undefined;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: TimePickerState;
+    private get _popupId();
+    private _element;
+    private _dateInput;
+    private _timeSelector;
+    private valueDuringOnChange?;
+    private showDuringOnChange?;
+    private shouldFocusDateInput;
+    private prevShow;
+    private observerResize?;
+    private get document();
+    private readonly showLicenseWatermark;
+    private readonly licenseMessage?;
+    constructor(props: TimePickerProps);
+    /**
+     * Gets the wrapping element of the TimePicker.
+     */
+    get element(): HTMLSpanElement | null;
+    /**
+     * Gets the DateInput component inside the TimePicker component.
+     */
+    get dateInput(): DateInputHandle | null;
+    /**
+     * Gets the TimeSelector component inside the TimePicker component.
+     */
+    get timeSelector(): TimeSelector | null;
+    /**
+     * Gets the value of the TimePicker.
+     */
+    get value(): Date | null;
+    /**
+     * Gets the popup state of the TimeSelector.
+     */
+    get show(): boolean;
+    /**
+     * Gets the `name` property of the TimePicker.
+     */
+    get name(): string | undefined;
+    /**
+     * Represents the validity state into which the TimePicker is set.
+     */
+    get validity(): FormComponentValidity;
+    /**
+     * Returns a boolean value indicating whether the TimePicker is in mobile mode.
+     */
+    get mobileMode(): boolean;
+    /**
+     * @hidden
+     */
+    protected get validityStyles(): boolean;
+    /**
+     * @hidden
+     */
+    protected get required(): boolean;
+    private get popupSettings();
+    private get min();
+    private get max();
+    protected get dateInputComp(): React.ComponentType<DateInputProps<any>>;
+    protected get localizationService(): LocalizationService;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    private renderTimeSelector;
+    private renderPopup;
+    private renderAdaptivePopup;
+    protected setTimeSelectorRef: (timeSelector: TimeSelector | null) => void;
+    protected nextValue: (nextProps: TimePickerProps, nextState: TimePickerState) => Date | null;
+    protected nextShow: (nextProps: TimePickerProps, nextState: TimePickerState) => boolean;
+    protected normalizeTime(date: Date): Date;
+    protected setShow(show: boolean): void;
+    protected mergeTime(value: Date | null): Date | null;
+    private handleInputValueChange;
+    private handleTimeChange;
+    private handleValueChange;
+    private handleFocus;
+    private handleBlur;
+    private handleValueReject;
+    private handleClick;
+    private handleIconMouseDown;
+    private handleKeyDown;
+    private calculateMedia;
+}
+/**
+ * Represents the PropsContext of the `TimePicker` component.
+ * Used for global configuration of all `TimePicker` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context](https://www.telerik.com/kendo-react-ui/components/dateinputs/props-context) article.
+ */
+export declare const TimePickerPropsContext: React.Context<(p: TimePickerProps) => TimePickerProps>;
+/**
+ * Represent the `ref` of the TimePicker component.
+ */
+export interface TimePickerHandle extends Pick<TimePickerWithoutContext, keyof TimePickerWithoutContext> {
+    /**
+     * Gets the DateInput component inside the TimePicker component.
+     */
+    dateInput: DateInputHandle | null;
+    /**
+     * Returns the HTML element of the TimePicker component.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * Returns a boolean value indicating whether the TimePicker is in mobile mode.
+     */
+    mobileMode: boolean;
+    /**
+     * Gets the `name` property of the TimePicker.
+     */
+    name: string | undefined;
+    /**
+     * The props of the TimePickerHandle component.
+     */
+    props: Readonly<TimePickerProps>;
+    /**
+     * Gets the popup state of the TimeSelector.
+     */
+    show: boolean;
+    /**
+     * Represents the validity state into which the TimePicker is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * Gets the value of the TimePicker.
+     */
+    value: Date | null;
+    /**
+     * Gets the TimeSelector component inside the TimePicker component.
+     */
+    timeSelector: TimeSelector | null;
+}
+/** @hidden */
+export type TimePicker = TimePickerHandle;
+/**
+ * Represents the KendoReact TimePicker Component.
+ *
+ * Accepts properties of type [TimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/timepickerprops).
+ * Obtaining the `ref` returns an object of type [TimePickerHandle](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/timepickerhandle).
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<any>>;

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 X=require("react"),e=require("prop-types"),Z=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),$=require("@progress/kendo-svg-icons"),M=require("@progress/kendo-react-intl"),T=require("../package-metadata.js"),l=require("../messages/index.js"),J=require("../dateinput/DateInput.js"),Q=require("./TimeSelector.js"),p=require("../utils.js"),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(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 a=se(X),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(Z.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(T.packageMetadata,{component:"TimePicker"}),this.licenseMessage=o.getLicenseMessage(T.packageMetadata),this.state={value:this.props.defaultValue||r.defaultProps.defaultValue,show:this.props.defaultShow||r.defaultProps.defaultShow,focused:!1,candidate:null},this.normalizeTime=this.normalizeTime.bind(this),this.setShow=this.setShow.bind(this),this.mergeTime=this.mergeTime.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get document(){if(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 M.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:P,formatPlaceholder:k,width:O,name:D,steps:z,validationMessage:x,required:q,validityStyles:R,ariaLabelledBy:E,ariaDescribedBy:B,unstyled:v,enableMouseWheel:A,autoCorrectParts:F,autoSwitchParts:L,autoSwitchKeys:V,allowCaretMode:N,inputAttributes:_}=this.props,w=v&&v.uTimePicker,b=!this.validityStyles||this.validity.valid,K={disabled:n,format:P,formatPlaceholder:k,id:h,ariaLabelledBy:E,ariaDescribedBy:B,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:D,onChange:this.handleInputValueChange,required:q,steps:z,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:x,validityStyles:R,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:A,autoCorrectParts:F,autoSwitchParts:L,autoSwitchKeys:V,allowCaretMode:N,inputAttributes:_},j=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),W=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:U,onBlur:H})=>a.createElement(a.Fragment,null,a.createElement("span",{ref:G=>{this._element=G},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:U,onBlur:H,onClick:this.mobileMode?this.handleClick:void 0},a.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,...K}),a.createElement(ee.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:$.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:W,className:o.classNames(o.uTimePicker.inputButton({c:w})),rounded:null,fillMode:s,"aria-label":j}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&a.createElement(o.WatermarkOverlay,{message:this.licenseMessage})));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 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})}};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:p.MAX_TIME,min:p.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";M.registerForLocalization(m);exports.TimePicker=I;exports.TimePickerPropsContext=C;exports.TimePickerWithoutContext=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),e=require("prop-types"),Z=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),$=require("@progress/kendo-svg-icons"),C=require("@progress/kendo-react-intl"),T=require("../package-metadata.js"),l=require("../messages/index.js"),J=require("../dateinput/DateInput.js"),Q=require("./TimeSelector.js"),p=require("../utils.js"),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(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 a=se(X),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(Z.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(T.packageMetadata,{component:"TimePicker"}),this.licenseMessage=o.getLicenseMessage(T.packageMetadata),this.state={value:this.props.defaultValue||r.defaultProps.defaultValue,show:this.props.defaultShow||r.defaultProps.defaultShow,focused:!1,candidate:null},this.normalizeTime=this.normalizeTime.bind(this),this.setShow=this.setShow.bind(this),this.mergeTime=this.mergeTime.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get document(){if(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 C.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:P,formatPlaceholder:k,width:O,name:D,steps:z,validationMessage:x,required:q,validityStyles:R,ariaLabelledBy:E,ariaDescribedBy:B,unstyled:v,enableMouseWheel:A,autoCorrectParts:F,autoSwitchParts:L,autoSwitchKeys:V,allowCaretMode:N,inputAttributes:_}=this.props,w=v&&v.uTimePicker,b=!this.validityStyles||this.validity.valid,K={disabled:n,format:P,formatPlaceholder:k,id:h,ariaLabelledBy:E,ariaDescribedBy:B,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:D,onChange:this.handleInputValueChange,required:q,steps:z,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:x,validityStyles:R,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.show,enableMouseWheel:A,autoCorrectParts:F,autoSwitchParts:L,autoSwitchKeys:V,allowCaretMode:N,inputAttributes:_},j=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),W=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:U,onBlur:H})=>a.createElement(a.Fragment,null,a.createElement("span",{ref:G=>{this._element=G},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:U,onBlur:H,onClick:this.mobileMode?this.handleClick:void 0},a.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,...K}),a.createElement(ee.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:$.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:W,className:o.classNames(o.uTimePicker.inputButton({c:w})),fillMode:s,"aria-label":j}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&a.createElement(o.WatermarkOverlay,{message:this.licenseMessage})));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 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})}};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(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full"]),fillMode:e.oneOf(["solid","flat","outline"]),inputAttributes:e.object},r.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:p.MAX_TIME,min:p.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:J.DateInput,size:void 0,rounded:void 0,fillMode:void 0};let m=r;const M=o.createPropsContext(),I=o.withIdHOC(o.withPropsContext(M,o.withUnstyledHOC(o.withAdaptiveModeContext(m))));I.displayName="KendoReactTimePicker";C.registerForLocalization(m);exports.TimePicker=I;exports.TimePickerPropsContext=M;exports.TimePickerWithoutContext=m;