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

package/datetimepicker/DateTimePicker.d.ts

@@ -0,0 +1,420 @@
+/**
+ * @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 { DateInputHandle, DateInputProps } from '../dateinput/DateInput.js';
+import { DateTimePickerSettings } 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 DateTimePicker.
+ */
+export interface DateTimePickerChangeEvent {
+    /** 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: DateTimePicker;
+}
+/**
+ * The arguments for the `onOpen` event of the DateTimePicker.
+ */
+export interface DateTimePickerOpenEvent {
+    /** The component instance that fired the event. */
+    target: DateTimePicker;
+}
+/**
+ * The arguments for the `onClose` event of the DateTimePicker.
+ */
+export interface DateTimePickerCloseEvent {
+    /** The component instance that fired the event. */
+    target: DateTimePicker;
+}
+/**
+ * Represents the props of the [KendoReact DateTimePicker component](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker).
+ */
+export interface DateTimePickerProps extends DateTimePickerSettings, FormComponentProps, DateInputCommonPackageProps {
+    /**
+     * Set the initial `value` when uncontrolled ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/default-value)).
+     * See also [uncontrolled components](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+     */
+    defaultValue?: Date | null;
+    /**
+    /**
+     * Fires when the user selects a new `value` ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/controlled-state#toc-controlling-the-date-value)).
+     */
+    onChange?: (event: DateTimePickerChangeEvent) => void;
+    /**
+    /**
+     * Fires when the popup opens.
+     */
+    onOpen?: (event: DateTimePickerOpenEvent) => void;
+    /**
+    /**
+     * Fires when the popup closes.
+     */
+    onClose?: (event: DateTimePickerCloseEvent) => void;
+    /**
+    /**
+     * Set the current `value` ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/controlled-state#toc-controlling-the-date-value)).
+     * Provide a valid `Date` or `null`.
+     */
+    value?: Date | null;
+    /**
+    /**
+     * Control the `size` of the DateTimePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <DateTimePicker size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Control the corner `rounded` style of the DateTimePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <DateTimePicker rounded="full" />
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Control the `fillMode` (background) of the DateTimePicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <DateTimePicker fillMode="outline" />
+     * ```
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * Enable adaptive popup rendering based on viewport width.
+     *
+     * @default `false`
+     */
+    adaptive?: boolean;
+    /**
+     * Set the title text in the adaptive popup (action sheet). Use only when `adaptive` is `true`.
+     * If not set, it matches the `label`.
+     */
+    adaptiveTitle?: string;
+    /**
+     * Set the subtitle text in the adaptive popup (action sheet). Use only when `adaptive` is `true`.
+     */
+    adaptiveSubtitle?: string;
+    /**
+     * Apply the `autoFocus` attribute to the internal input.
+     *
+     * @default `false`
+     */
+    autoFocus?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
+    /**
+     * Autofill missing date or time parts with the current date/time on blur.
+     *
+     * @default `false`
+     */
+    autoFill?: boolean;
+    /**
+     * Set the upper threshold for interpreting a two-digit year as part of the current century ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/formats#toc-two---digit-year-max)).
+     * Values smaller than (`twoDigitYearMax` + 1) map to 20xx. Larger map to 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax?: number;
+    /**
+     * Enable mouse wheel to increment or decrement segments.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
+    /**
+     * Pass HTML attributes to the internal focusable input.
+     * Attributes required for core logic are ignored.
+     */
+    inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * @hidden
+     * This prop is provided by the withAdaptiveModeContext HOC to subscribe to AdaptiveModeContext.
+     */
+    _adaptiveMode?: AdaptiveModeContextType;
+}
+/**
+ * @hidden
+ */
+export interface DateTimePickerState {
+    value: Date | null;
+    show: boolean;
+    focused: boolean;
+    windowWidth?: number;
+}
+/** @hidden */
+export declare class DateTimePickerWithoutContext extends React.Component<DateTimePickerProps, DateTimePickerState> implements FormComponent {
+    /**
+     * @hidden
+     */
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        defaultShow: PropTypes.Requireable<boolean>;
+        defaultValue: PropTypes.Requireable<Date>;
+        disabled: PropTypes.Requireable<boolean>;
+        focusedDate: PropTypes.Requireable<Date>;
+        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>;
+        tabIndex: PropTypes.Requireable<number>;
+        title: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<Date>;
+        weekNumber: PropTypes.Requireable<boolean>;
+        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        validationMessage: PropTypes.Requireable<string>;
+        required: PropTypes.Requireable<boolean>;
+        validate: PropTypes.Requireable<boolean>;
+        valid: PropTypes.Requireable<boolean>;
+        cancelButton: 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>;
+        autoFocus: PropTypes.Requireable<boolean>;
+        inputAttributes: PropTypes.Requireable<object>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        defaultShow: boolean;
+        defaultValue: null;
+        disabled: boolean;
+        format: string;
+        max: Date;
+        min: Date;
+        popupSettings: {};
+        tabIndex: number;
+        weekNumber: boolean;
+        validityStyles: boolean;
+        cancelButton: boolean;
+        dateInput: React.ComponentType<DateInputProps<any>>;
+        size: "small" | "medium" | "large" | undefined;
+        rounded: "small" | "medium" | "large" | "full" | undefined;
+        fillMode: "flat" | "solid" | "outline" | undefined;
+        autoFocus: boolean;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: DateTimePickerState;
+    private get _popupId();
+    private _element;
+    private _dateInput;
+    private _dateTimeSelector;
+    private valueDuringOnChange?;
+    private showDuringOnChange?;
+    private nextTickId;
+    private shouldFocusDateInput;
+    private prevShow;
+    private observerResize?;
+    private get document();
+    constructor(props: DateTimePickerProps);
+    /**
+     * Gets the wrapping element of the DateTimePicker.
+     */
+    get element(): HTMLSpanElement | null;
+    /**
+     * Gets the DateInput component inside the DateTimePicker component.
+     */
+    get dateInput(): DateInputHandle | null;
+    /**
+     * Gets the value of the DateTimePicker.
+     */
+    get value(): Date | null;
+    /**
+     * Gets the popup state of the DateTimePicker.
+     */
+    get show(): boolean;
+    /**
+     * Gets the `name` property of the DateTimePicker.
+     */
+    get name(): string | undefined;
+    /**
+     * Returns a boolean value indicating whether the DateTimePicker is in mobile mode.
+     */
+    get mobileMode(): boolean;
+    protected get min(): Date;
+    protected get max(): Date;
+    /**
+     * Represents the validity state into which the DateTimePicker is set.
+     */
+    get validity(): FormComponentValidity;
+    /**
+     * @hidden
+     */
+    protected get validityStyles(): boolean;
+    /**
+     * @hidden
+     */
+    protected get required(): boolean;
+    /**
+     * @hidden
+     */
+    protected get dateInputComp(): React.ComponentType<DateInputProps<any>>;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    private renderPicker;
+    private renderAdaptivePopup;
+    protected setShow(show: boolean): void;
+    protected nextTick(f: () => any): void;
+    private handleReject;
+    private handleValueChange;
+    private handleFocus;
+    private handleBlur;
+    private handleClick;
+    private handleIconMouseDown;
+    private handleKeyDown;
+    private dateInputElement;
+    private calculateMedia;
+}
+/**
+ * Represents the PropsContext of the `DateTimePicker` component.
+ * Used for global configuration of all `DateTimePicker` 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 DateTimePickerPropsContext: React.Context<(p: DateTimePickerProps) => DateTimePickerProps>;
+/**
+ * Represent the `ref` of the DateTimePicker component.
+ */
+export interface DateTimePickerHandle extends Pick<DateTimePickerWithoutContext, keyof DateTimePickerWithoutContext> {
+    /**
+     * Gets the DateInput component inside the DateTimePicker component.
+     */
+    dateInput: DateInputHandle | null;
+    /**
+     * Returns the HTML element of the DateTimePicker component.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * Returns a boolean value indicating whether the DateTimePicker is in mobile mode.
+     */
+    mobileMode: boolean;
+    /**
+     * Gets the `name` property of the DateTimePicker.
+     */
+    name: string | undefined;
+    /**
+     * The props of the DateTimePickerHandle component.
+     */
+    props: Readonly<DateTimePickerProps>;
+    /**
+     * Gets the popup state of the DateTimePicker.
+     */
+    show: boolean;
+    /**
+     * Represents the validity state into which the DateTimePicker is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * Gets the value of the DateTimePicker.
+     */
+    value: Date | null;
+}
+/** @hidden */
+export type DateTimePicker = DateTimePickerHandle;
+/**
+ * Represents the KendoReact DateTimePicker Component.
+ *
+ * Accepts properties of type [DateTimePickerProps](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datetimepickerprops).
+ * Obtaining the `ref` returns an object of type [DateTimePickerHandle](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datetimepickerhandle).
+ */
+export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<any>>;

package/datetimepicker/DateTimePicker.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"),J=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),p=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),ie=require("./DateTimeSelector.js"),se=require("../timepicker/utils.js"),oe=require("../hooks/usePickerFloatingLabel.js"),ne=require("../common/AdaptiveMode.js"),ae=require("@progress/kendo-react-layout");function re(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const r=re(G),n=class n extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:a,format:c,calendar:d,cancelButton:u,weekNumber:v,focusedDate:f,unstyled:w}=this.props;return r.createElement(ie.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:s,maxTime:a,focusedDate:f,format:c,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),a=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),c={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:a,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(ne.AdaptiveMode,{...c},r.createElement(ae.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:I.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:this.value,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.handleClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:a}=t;if(a===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===o.Keys.up||a===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=a===o.Keys.up,this.setShow(a===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),this.state={value:this.props.defaultValue||n.defaultProps.defaultValue,show:this.props.defaultShow||n.defaultProps.defaultShow,focused:!1}}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 value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?I.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 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 min(){return this.props.min!==void 0?this.props.min:n.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:n.defaultProps.max}get validity(){const i=p.isInDateRange(this.value,this.min,this.max)&&se.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),t=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&i,a=this.props.valid!==void 0?this.props.valid:s;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:a,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:n.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||n.defaultProps.dateInput}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(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._dateTimeSelector&&this._dateTimeSelector.focus({preventScroll:!0})},300),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=n.defaultProps.size,rounded:t=n.defaultProps.rounded,fillMode:s=n.defaultProps.fillMode,autoFocus:a=n.defaultProps.autoFocus,inputAttributes:c,disabled:d,tabIndex:u,title:v,id:f,format:w,formatPlaceholder:b,min:M,max:k,className:C,width:x,name:q,validationMessage:E,required:F,validityStyles:R,minTime:z,maxTime:A,ariaLabelledBy:B,ariaDescribedBy:N,popup:_=J.Popup,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,S=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:B,ariaDescribedBy:N,format:w,formatPlaceholder:b,disabled:d,title:v,validityStyles:R,validationMessage:E,required:F,min:M,max:k,minTime:z,maxTime:A,name:q,tabIndex:this.show?-1:u,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,size:null,fillMode:null,rounded:null,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H},T=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:o.classNames(o.uDateTimePicker.wrapper({c:S,size:i,fillMode:s,rounded:t,disabled:d,required:this.required,invalid:!D}),C),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?this.handleClick:Y,onBlur:Z,onClick:this.mobileMode?this.handleClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",autoFocus:a,inputAttributes:c,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:S})),rounded:null,fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(_,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:S})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(oe.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:T,style:{width:this.props.width}}):T}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}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};n.displayName="DateTimePicker",n.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),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,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},n.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInput,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=n;const P=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(P,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=P;exports.DateTimePickerWithoutContext=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),p=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),ie=require("./DateTimeSelector.js"),se=require("../timepicker/utils.js"),oe=require("../hooks/usePickerFloatingLabel.js"),ae=require("../common/AdaptiveMode.js"),ne=require("@progress/kendo-react-layout");function re(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const r=re(G),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:n,format:c,calendar:d,cancelButton:u,weekNumber:v,focusedDate:f,unstyled:w}=this.props;return r.createElement(ie.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:s,maxTime:n,focusedDate:f,format:c,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),n=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),c={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:n,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(ae.AdaptiveMode,{...c},r.createElement(ne.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:I.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:this.value,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.handleClick=()=>{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.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1}}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 value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?I.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 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 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 validity(){const i=p.isInDateRange(this.value,this.min,this.max)&&se.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),t=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&i,n=this.props.valid!==void 0?this.props.valid:s;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:n,valueMissing:this.value===null}}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 dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}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(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._dateTimeSelector&&this._dateTimeSelector.focus({preventScroll:!0})},300),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;clearTimeout(this.nextTickId),(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,autoFocus:n=a.defaultProps.autoFocus,inputAttributes:c,disabled:d,tabIndex:u,title:v,id:f,format:w,formatPlaceholder:b,min:M,max:k,className:C,width:x,name:q,validationMessage:E,required:F,validityStyles:R,minTime:A,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:N,popup:_=J.Popup,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,S=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:B,ariaDescribedBy:N,format:w,formatPlaceholder:b,disabled:d,title:v,validityStyles:R,validationMessage:E,required:F,min:M,max:k,minTime:A,maxTime:z,name:q,tabIndex:this.show?-1:u,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H},T=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:o.classNames(o.uDateTimePicker.wrapper({c:S,size:i,fillMode:s,rounded:t,disabled:d,required:this.required,invalid:!D}),C),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?this.handleClick:Y,onBlur:Z,onClick:this.mobileMode?this.handleClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",autoFocus:n,inputAttributes:c,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:S})),fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(_,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:S})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(oe.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:T,style:{width:this.props.width}}):T}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}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="DateTimePicker",a.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),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,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInput,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=a;const P=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(P,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=P;exports.DateTimePickerWithoutContext=g;

package/datetimepicker/DateTimePicker.mjs

@@ -9,11 +9,11 @@ import * as n from "react";
 import e from "prop-types";
 import { Popup as $ } from "@progress/kendo-react-popup";
 import { cloneDate as M } from "@progress/kendo-date-math";
-import { Keys as d, canUseDOM as O, AsyncFocusBlur as ee, classNames as S, uDateTimePicker as I, createPropsContext as te, withIdHOC as ie, withPropsContext as se, withUnstyledHOC as oe, withAdaptiveModeContext as ae } from "@progress/kendo-react-common";
+import { withIdHOC as ee, createPropsContext as te, Keys as d, canUseDOM as O, AsyncFocusBlur as ie, classNames as S, uDateTimePicker as I, withPropsContext as se, withUnstyledHOC as oe, withAdaptiveModeContext as ae } from "@progress/kendo-react-common";
 import { calendarIcon as ne } from "@progress/kendo-svg-icons";
 import { DateInput as re } from "../dateinput/DateInput.mjs";
 import { Button as le } from "@progress/kendo-react-buttons";
-import { MAX_DATE as he, MIN_DATE as de, isInDateRange as ue, MAX_TIME as pe, MIN_TIME as ce } from "../utils.mjs";
+import { MIN_DATE as he, MAX_DATE as de, isInDateRange as ue, MAX_TIME as pe, MIN_TIME as ce } from "../utils.mjs";
 import { dateTimePickerCancel as C, messages as p, dateTimePickerSet as P, toggleDateTimeSelector as c } from "../messages/index.mjs";
 import { provideLocalizationService as m, registerForLocalization as me } from "@progress/kendo-react-intl";
 import { DateTimeSelector as fe } from "./DateTimeSelector.mjs";
@@ -242,8 +242,8 @@ const o = class o extends n.Component {
       width: F,
       name: A,
       validationMessage: R,
-      required: z,
-      validityStyles: B,
+      required: B,
+      validityStyles: z,
       minTime: N,
       maxTime: _,
       ariaLabelledBy: V,
@@ -265,9 +265,9 @@ const o = class o extends n.Component {
       formatPlaceholder: w,
       disabled: l,
       title: g,
-      validityStyles: B,
+      validityStyles: z,
       validationMessage: R,
-      required: z,
+      required: B,
       min: x,
       max: k,
       minTime: N,
@@ -281,9 +281,6 @@ const o = class o extends n.Component {
       label: void 0,
       placeholder: this.state.focused ? null : this.props.placeholder,
       ariaExpanded: this.show,
-      size: null,
-      fillMode: null,
-      rounded: null,
       unstyled: b,
       autoFill: K,
       twoDigitYearMax: U,
@@ -293,7 +290,7 @@ const o = class o extends n.Component {
       autoSwitchKeys: X,
       allowCaretMode: Y
     }, T = /* @__PURE__ */ n.createElement(
-      ee,
+      ie,
       {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
@@ -350,7 +347,6 @@ const o = class o extends n.Component {
               p[c]
             ),
             className: S(I.inputButton({ c: y })),
-            rounded: null,
             fillMode: s,
             "aria-label": m(this).toLanguageString(
               c,
@@ -472,9 +468,9 @@ o.displayName = "DateTimePicker", o.propTypes = {
   validate: e.bool,
   valid: e.bool,
   cancelButton: e.bool,
-  size: e.oneOf([null, "small", "medium", "large"]),
-  rounded: e.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: e.oneOf([null, "solid", "flat", "outline"]),
+  size: e.oneOf(["small", "medium", "large"]),
+  rounded: e.oneOf(["small", "medium", "large", "full"]),
+  fillMode: e.oneOf(["solid", "flat", "outline"]),
   autoFocus: e.bool,
   inputAttributes: e.object
 }, o.defaultProps = {
@@ -483,21 +479,21 @@ o.displayName = "DateTimePicker", o.propTypes = {
   disabled: !1,
   format: "g",
   // general date and time pattern (short time): "M/d/y h:mm a" for en.
-  max: he,
-  min: de,
+  max: de,
+  min: he,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   validityStyles: !0,
   cancelButton: !0,
   dateInput: re,
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
   autoFocus: !1
 };
 let f = o;
-const ye = te(), Se = ie(
+const ye = te(), Se = ee(
   se(
     ye,
     oe(