@progress/kendo-react-dateinputs 9.2.0 → 9.3.0-develop.2

package/index.d.ts

@@ -13,7 +13,6 @@ import { DateFormatOptions } from '@progress/kendo-react-intl';
 import { DateFormatOptions as DateFormatOptions_2 } from '@progress/kendo-intl';
 import { DateFormatPart } from '@progress/kendo-react-intl';
 import { DateFormatPart as DateFormatPart_2 } from '@progress/kendo-intl';
-import { DateInputIncrementalSteps as DateInputIncrementalSteps_2 } from './models';
 import { DateInputsClassStructure } from '@progress/kendo-react-common';
 import { default as default_2 } from 'prop-types';
 import { FormComponent } from '@progress/kendo-react-common';
@@ -549,21 +548,18 @@ export declare class CenturyViewService implements ViewService {
     private normalize;
 }
 
-/** @hidden */
-export declare type DateInput = DateInputHandle;
-
 /**
  * Represents the KendoReact DateInput Component.
  *
  * Accepts properties of type [DateInputProps]({% slug api_dateinputs_dateinputprops %}).
  * Obtaining the `ref` returns an object of type [DateInputHandle]({% slug api_dateinputs_dateinputhandle %}).
  */
-export declare const DateInput: React_2.ForwardRefExoticComponent<DateInputProps<any> & React_2.RefAttributes<any>>;
+export declare const DateInput: React_2.ForwardRefExoticComponent<DateInputProps<any> & React_2.RefAttributes<DateInputHandle>>;
 
 /**
  * The arguments for the `change` event of the DateInput. The generic argument sets the target type of the event. Defaults to `DateInput`.
  */
-export declare interface DateInputChangeEvent<T = DateInput> {
+export declare interface DateInputChangeEvent<T = DateInputHandle> {
     nativeEvent?: any;
     syntheticEvent: React_2.SyntheticEvent<any>;
     value: Date | null;
@@ -628,6 +624,33 @@ export declare interface DateInputCustomFormatPlaceholder {
     second?: string;
 }
 
+/**
+ * @hidden
+ */
+export declare const dateInputDefaultProps: {
+    format: string;
+    size: "small" | "large" | "medium" | null | undefined;
+    rounded: "small" | "large" | "medium" | "full" | null | undefined;
+    fillMode: "flat" | "solid" | "outline" | null | undefined;
+    formatPlaceholder: DateInputFormatPlaceholder;
+    spinners: boolean;
+    disabled: boolean;
+    max: Date;
+    min: Date;
+    minTime: Date;
+    maxTime: Date;
+    validityStyles: boolean;
+    validationMessage: string;
+    placeholder: null;
+    enableMouseWheel: boolean;
+    autoCorrectParts: boolean;
+    autoSwitchParts: boolean;
+    allowCaretMode: boolean;
+    twoDigitYearMax: number;
+    ariaHasPopup: string;
+    autoFocus: boolean;
+};
+
 /**
  * The union type which defines all possible format options of the DateInput placeholder.
  *
@@ -642,7 +665,27 @@ export declare type DateInputFormatPlaceholder = 'wide' | 'narrow' | 'short' | '
 /**
  * Represent the `ref` of the DateInput component.
  */
-export declare interface DateInputHandle extends Pick<DateInputWithoutContext, keyof DateInputWithoutContext> {
+export declare interface DateInputHandle {
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * @hidden
+     */
+    updateOnPaste: (event: React_2.SyntheticEvent<HTMLInputElement>) => void;
+    /**
+     * Represents the props of the DateInput component.
+     */
+    props: Readonly<DateInputProps>;
+    /**
+     * Represents the text of the DateInput component.
+     */
+    text: string;
+    /**
+     * Represents the options of the DateInput component.
+     */
+    options: DateInputOptions;
     /**
      * Returns the HTML element of the DateInput component.
      */
@@ -695,12 +738,96 @@ declare class DateInputIntl {
     constructor(service: IntlService);
 }
 
+/**
+ * Represents the options type of the DateInput.
+ */
+declare interface DateInputOptions {
+    /**
+     * Specifies the `date` format which is used for formatting the value ([see example]({% slug formats_dateinput %})). If not set, the default format will be used.
+     */
+    format: string | DateFormatOptions_2;
+    /**
+     * Specifies the incremental steps of the DateInput ([see example]({% slug incrementalsteps_dateinput %})).
+     *
+     * The available options are:
+     * - `year: Number`&mdash;Controls the incremental step of the year value.
+     * - `month: Number`&mdash;Controls the incremental step of the month value.
+     * - `day: Number`&mdash;Controls the incremental step of the day value.
+     * - `hour: Number`&mdash;Controls the incremental step of the hour value.
+     * - `minute: Number`&mdash;Controls the incremental step of the minute value.
+     * - `second: Number`&mdash;Controls the incremental step of the second value.
+     */
+    steps?: DateInputIncrementalSteps;
+    /**
+     * Specifies the descriptions of the format sections in the input field ([more information and example]({% slug placeholders_dateinput %})).
+     */
+    formatPlaceholder?: DateInputFormatPlaceholder;
+    /**
+     * Specifies the hint the DateInput displays when its value is `null` or there is no partial selection.
+     * For more information, refer to the article on
+     * [placeholders]({% slug placeholders_dateinput %}).
+     */
+    placeholder?: string | null;
+    /**
+     * Determines wether should select the previous segment on backspace.
+     *
+     * @default `true`
+     */
+    selectPreviousSegmentOnBackspace: boolean;
+    /**
+     * Specifies the value of the DateInput.
+     */
+    value: Date | null;
+    /**
+     * The Intl object that provides internationalization support.
+     */
+    intlService: DateInputIntl;
+    /**
+     * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill: boolean;
+    enableMouseWheel: boolean;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the date segments values.
+     *
+     * @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[];
+    /**
+     * 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;
+    /**
+     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     *
+     * @default `false`
+     */
+    allowCaretMode: boolean;
+}
+
 /**
  * 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, DateInputCommonPackageProps {
+export declare interface DateInputProps<T extends DateInputHandle = any> extends FormComponentProps, DateInputSettings, DateInputCommonPackageProps {
     /** @hidden */
-    _ref?: React_2.MutableRefObject<DateInput | null>;
+    _ref?: React_2.MutableRefObject<DateInputHandle | null>;
     /**
      * @hidden
      */
@@ -974,254 +1101,13 @@ declare interface DateInputsPopupSettings extends PopupProps {
     popupClass?: string;
 }
 
-/** @hidden */
-export declare class DateInputWithoutContext extends React_2.Component<DateInputProps, {
-    focused: boolean;
-}> implements FormComponent {
-    /**
-     * @hidden
-     */
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        value: default_2.Requireable<Date>;
-        format: default_2.Requireable<NonNullable<string | default_2.InferProps<{
-            skeleton: default_2.Requireable<string>;
-            pattern: default_2.Requireable<string>;
-            date: default_2.Requireable<string>;
-            time: default_2.Requireable<string>;
-            datetime: default_2.Requireable<string>;
-            era: default_2.Requireable<string>;
-            year: default_2.Requireable<string>;
-            month: default_2.Requireable<string>;
-            day: default_2.Requireable<string>;
-            weekday: default_2.Requireable<string>;
-            hour: default_2.Requireable<string>;
-            hour12: default_2.Requireable<boolean>;
-            minute: default_2.Requireable<string>;
-            second: default_2.Requireable<string>;
-            timeZoneName: default_2.Requireable<string>;
-        }> | null | undefined>>;
-        formatPlaceholder: default_2.Requireable<NonNullable<"short" | "narrow" | "wide" | "formatPattern" | default_2.InferProps<{
-            year: default_2.Requireable<string>;
-            month: default_2.Requireable<string>;
-            day: default_2.Requireable<string>;
-            hour: default_2.Requireable<string>;
-            minute: default_2.Requireable<string>;
-            second: default_2.Requireable<string>;
-        }> | null | undefined>>;
-        width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
-        tabIndex: default_2.Requireable<number>;
-        title: default_2.Requireable<string>;
-        steps: default_2.Requireable<default_2.InferProps<{
-            year: default_2.Requireable<number>;
-            month: default_2.Requireable<number>;
-            day: default_2.Requireable<number>;
-            hour: default_2.Requireable<number>;
-            minute: default_2.Requireable<number>;
-            second: default_2.Requireable<number>;
-        }>>;
-        min: default_2.Requireable<Date>;
-        max: default_2.Requireable<Date>;
-        disabled: default_2.Requireable<boolean>;
-        spinners: default_2.Requireable<boolean>;
-        name: default_2.Requireable<string>;
-        dir: default_2.Requireable<string>;
-        label: default_2.Requireable<string>;
-        id: default_2.Requireable<string>;
-        ariaLabelledBy: default_2.Requireable<string>;
-        ariaDescribedBy: default_2.Requireable<string>;
-        ariaLabel: default_2.Requireable<string>;
-        ariaRole: default_2.Requireable<string>;
-        ariaHasPopup: default_2.Requireable<NonNullable<string | boolean | null | undefined>>;
-        ariaExpanded: default_2.Requireable<NonNullable<boolean | null | undefined>>;
-        onChange: default_2.Requireable<(...args: any[]) => any>;
-        validationMessage: default_2.Requireable<string>;
-        required: default_2.Requireable<boolean>;
-        validate: default_2.Requireable<boolean>;
-        valid: default_2.Requireable<boolean>;
-        size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
-        rounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
-        fillMode: default_2.Requireable<"flat" | "solid" | "outline" | null | undefined>;
-        autoFocus: default_2.Requireable<boolean>;
-        inputAttributes: default_2.Requireable<object>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        format: string;
-        size: "small" | "large" | "medium" | null | undefined;
-        rounded: "small" | "large" | "medium" | "full" | null | undefined;
-        fillMode: "flat" | "solid" | "outline" | null | undefined;
-        formatPlaceholder: DateInputFormatPlaceholder;
-        spinners: boolean;
-        disabled: boolean;
-        max: Date;
-        min: Date;
-        minTime: Date;
-        maxTime: Date;
-        validityStyles: boolean;
-        validationMessage: string;
-        placeholder: null;
-        enableMouseWheel: boolean;
-        autoCorrectParts: boolean;
-        autoSwitchParts: boolean;
-        allowCaretMode: boolean;
-        twoDigitYearMax: number;
-        ariaHasPopup: string;
-        autoFocus: boolean;
-    };
-    private kendoDate;
-    private kendoDateObject;
-    private mounted;
-    private valueDuringOnChange;
-    private _element;
-    private _wrapper;
-    private _nativeEvent;
-    private get _inputId();
-    private isFormatChanged;
-    private mapFormatToCommonFormat;
-    constructor(props: DateInputProps);
-    /**
-     * Gets the value of the DateInput.
-     */
-    get value(): Date | null;
-    /**
-     * Gets the `name` property of the DateInput.
-     */
-    get name(): string | undefined;
-    protected get min(): Date;
-    protected get max(): Date;
-    protected get isInSegmentSelection(): Date;
-    /**
-     * @hidden
-     */
-    get text(): string;
-    /**
-     * Represents the validity state into which the DateInput is set.
-     */
-    get validity(): FormComponentValidity;
-    /**
-     * Gets the element of the DateInput.
-     *
-     * @return - An `HTMLInputElement`.
-     *
-     * @example
-     * ```jsx
-     * class App extends React.Component {
-     *     constructor(props) {
-     *         super(props);
-     *     }
-     *     element = null;
-     *     render() {
-     *         return (
-     *             <div>
-     *                 <DateInput
-     *                     ref={(dateInput) =>
-     *                         this.element = dateInput ? dateInput.element : null}
-     *                 />
-     *                 <button onClick={() => console.log(this.element)}>console.log the element</button>
-     *             </div>
-     *         );
-     *     }
-     * }
-     *
-     * ReactDOM.render(
-     *     <App />,
-     *     document.getElementsByTagName('my-app')[0]
-     * );
-     * ```
-     */
-    get element(): HTMLInputElement | null;
-    /**
-     * @hidden
-     */
-    focus: () => void;
-    /**
-     * @hidden
-     */
-    protected get validityStyles(): boolean;
-    /**
-     * @hidden
-     */
-    protected get required(): boolean;
-    /**
-     * @hidden
-     */
-    protected get wrapper(): HTMLSpanElement | null;
-    /**
-     * @hidden
-     */
-    get options(): {
-        format: string | DateFormatOptions | undefined;
-        steps: DateInputIncrementalSteps_2 | undefined;
-        formatPlaceholder: DateInputFormatPlaceholder | undefined;
-        placeholder: string | null | undefined;
-        selectPreviousSegmentOnBackspace: boolean;
-        value: Date | null;
-        intlService: DateInputIntl;
-        autoFill: boolean;
-        enableMouseWheel: boolean | undefined;
-        autoCorrectParts: boolean | undefined;
-        autoSwitchParts: boolean | undefined;
-        autoSwitchKeys: string[];
-        twoDigitYearMax: number | undefined;
-        allowCaretMode: boolean | undefined;
-    };
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(prevProps: DateInputProps): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
-     */
-    render(): any;
-    /**
-     * @hidden
-     */
-    intl(): IntlService;
-    /**
-     * @hidden
-     */
-    protected get intlCommon(): DateInputIntl;
-    /**
-     * @hidden
-     */
-    protected setValidity: () => void;
-    protected updateOnPaste: (event: React_2.SyntheticEvent<HTMLInputElement>) => void;
-    private spinnersMouseDown;
-    private handleClick;
-    private nativeWheel;
-    private increasePart;
-    private decreasePart;
-    private elementOnFocus;
-    private elementOnBlur;
-    private triggerChange;
-    private onChange;
-    private initKendoDate;
-}
-
-/** @hidden */
-export declare type DatePicker = DatePickerHandle;
-
 /**
  * Represents the KendoReact DatePicker Component.
  *
  * Accepts properties of type [DatePickerProps]({% slug api_dateinputs_datepickerprops %}).
  * Obtaining the `ref` returns an object of type [DatePickerHandle]({% slug api_dateinputs_datepickerhandle %}).
  */
-export declare const DatePicker: React_2.ForwardRefExoticComponent<DatePickerProps & React_2.RefAttributes<any>>;
+export declare const DatePicker: React_2.ForwardRefExoticComponent<DatePickerProps & React_2.RefAttributes<DatePickerHandle>>;
 
 /**
  * The arguments for the `onChange` event of the DatePicker.
@@ -1231,20 +1117,61 @@ export declare interface DatePickerChangeEvent {
     syntheticEvent: React_2.SyntheticEvent<any>;
     value: Date | null;
     show: boolean;
-    target: DatePicker;
+    target: DatePickerHandle;
 }
 
 /**
  * The arguments for the `onClose` event of the DatePicker.
  */
 export declare interface DatePickerCloseEvent {
-    target: DatePicker;
+    target: DatePickerHandle;
 }
 
+/**
+ * @hidden
+ */
+export declare const datePickerDefaultProps: {
+    defaultShow: boolean;
+    defaultValue: null;
+    dateInput: React_2.ComponentType<DateInputProps<any>>;
+    calendar: React_2.ComponentType<CalendarProps<any>>;
+    toggleButton: React_2.ComponentType<ToggleButtonProps>;
+    popup: React_2.ComponentType<PopupProps>;
+    pickerWrap: React_2.ComponentType<PickerWrapProps>;
+    disabled: boolean;
+    format: string;
+    max: Date;
+    min: Date;
+    popupSettings: any;
+    tabIndex: number;
+    weekNumber: boolean;
+    validityStyles: boolean;
+    size: "small" | "large" | "medium" | null | undefined;
+    rounded: "small" | "large" | "medium" | "full" | null | undefined;
+    fillMode: "flat" | "solid" | "outline" | null | undefined;
+    autoFocus: boolean;
+};
+
 /**
  * Represent the `ref` of the DatePicker component.
  */
-export declare interface DatePickerHandle extends Pick<DatePickerWithoutContext, keyof DatePickerWithoutContext> {
+export declare interface DatePickerHandle {
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * Toggles the popup of the DatePicker.
+     */
+    togglePopup: () => void;
+    /**
+     * Returns the props of the DatePicker component.
+     */
+    props: DatePickerProps;
+    /**
+     * Returns a boolean value indicating whether the DatePicker is in mobile mode.
+     */
+    mobileMode: boolean;
     /**
      * Returns the HTML element of the DatePicker component.
      */
@@ -1256,7 +1183,7 @@ export declare interface DatePickerHandle extends Pick<DatePickerWithoutContext,
     /**
      * Gets the DateInput component inside the DatePicker component.
      */
-    dateInput: DateInput | null;
+    dateInput: DateInputHandle | null;
     /**
      * Gets the `name` property of the DatePicker.
      */
@@ -1279,7 +1206,7 @@ export declare interface DatePickerHandle extends Pick<DatePickerWithoutContext,
  * The arguments for the `onOpen` event of the DatePicker.
  */
 export declare interface DatePickerOpenEvent {
-    target: DatePicker;
+    target: DatePickerHandle;
 }
 
 /**
@@ -1538,214 +1465,6 @@ export declare interface DatePickerSettings {
     placeholder?: string | null;
 }
 
-/**
- * @hidden
- */
-declare interface DatePickerState {
-    value: Date | null;
-    show: boolean;
-    focused: boolean;
-    windowWidth?: number;
-}
-
-/** @hidden */
-export declare class DatePickerWithoutContext extends React_2.Component<DatePickerProps, DatePickerState> implements FormComponent {
-    /**
-     * @hidden
-     */
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        className: default_2.Requireable<string>;
-        defaultShow: default_2.Requireable<boolean>;
-        defaultValue: default_2.Requireable<Date>;
-        disabled: default_2.Requireable<boolean>;
-        focusedDate: default_2.Requireable<Date>;
-        format: default_2.Requireable<NonNullable<string | default_2.InferProps<{
-            skeleton: default_2.Requireable<string>;
-            pattern: default_2.Requireable<string>;
-            date: default_2.Requireable<string>;
-            time: default_2.Requireable<string>;
-            datetime: default_2.Requireable<string>;
-            era: default_2.Requireable<string>;
-            year: default_2.Requireable<string>;
-            month: default_2.Requireable<string>;
-            day: default_2.Requireable<string>;
-            weekday: default_2.Requireable<string>;
-            hour: default_2.Requireable<string>;
-            hour12: default_2.Requireable<boolean>;
-            minute: default_2.Requireable<string>;
-            second: default_2.Requireable<string>;
-            timeZoneName: default_2.Requireable<string>;
-        }> | null | undefined>>;
-        formatPlaceholder: default_2.Requireable<NonNullable<"short" | "narrow" | "wide" | "formatPattern" | default_2.InferProps<{
-            year: default_2.Requireable<string>;
-            month: default_2.Requireable<string>;
-            day: default_2.Requireable<string>;
-            hour: default_2.Requireable<string>;
-            minute: default_2.Requireable<string>;
-            second: default_2.Requireable<string>;
-        }> | null | undefined>>;
-        id: default_2.Requireable<string>;
-        ariaLabelledBy: default_2.Requireable<string>;
-        ariaDescribedBy: default_2.Requireable<string>;
-        ariaLabel: default_2.Requireable<string>;
-        min: default_2.Requireable<Date>;
-        max: default_2.Requireable<Date>;
-        name: default_2.Requireable<string>;
-        popupSettings: default_2.Requireable<default_2.InferProps<{
-            animate: default_2.Requireable<boolean>;
-            appendTo: default_2.Requireable<any>;
-            popupClass: default_2.Requireable<string>;
-        }>>;
-        show: default_2.Requireable<boolean>;
-        tabIndex: default_2.Requireable<number>;
-        title: default_2.Requireable<string>;
-        value: default_2.Requireable<Date>;
-        weekNumber: default_2.Requireable<boolean>;
-        width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
-        validationMessage: default_2.Requireable<string>;
-        required: default_2.Requireable<boolean>;
-        validate: default_2.Requireable<boolean>;
-        valid: default_2.Requireable<boolean>;
-        size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
-        rounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
-        fillMode: default_2.Requireable<"flat" | "solid" | "outline" | null | undefined>;
-        adaptive: default_2.Requireable<boolean>;
-        adaptiveTitle: default_2.Requireable<string>;
-        autoFocus: default_2.Requireable<boolean>;
-        inputAttributes: default_2.Requireable<object>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        defaultShow: boolean;
-        defaultValue: null;
-        dateInput: React_2.ComponentType<DateInputProps<any>>;
-        calendar: React_2.ComponentType<CalendarProps<any>>;
-        toggleButton: React_2.ComponentType<ToggleButtonProps>;
-        popup: React_2.ComponentType<PopupProps>;
-        pickerWrap: React_2.ComponentType<PickerWrapProps>;
-        disabled: boolean;
-        format: string;
-        max: Date;
-        min: Date;
-        popupSettings: {};
-        tabIndex: number;
-        weekNumber: boolean;
-        validityStyles: boolean;
-        size: "small" | "large" | "medium" | null | undefined;
-        rounded: "small" | "large" | "medium" | "full" | null | undefined;
-        fillMode: "flat" | "solid" | "outline" | null | undefined;
-        autoFocus: boolean;
-    };
-    /**
-     * @hidden
-     */
-    readonly state: DatePickerState;
-    private get _popupId();
-    private _element;
-    private _dateInput;
-    private _calendar;
-    private valueDuringOnChange?;
-    private showDuringOnChange?;
-    private nextTickId;
-    private shouldFocusDateInput;
-    private prevShow;
-    private observerResize?;
-    private get document();
-    constructor(props: DatePickerProps);
-    /**
-     * Gets the wrapping element of the DatePickerWithoutContext.
-     */
-    get element(): HTMLSpanElement | null;
-    /**
-     * The mobile mode of the DatePicker.
-     */
-    get mobileMode(): boolean;
-    /**
-     * Gets the DateInput component inside the DatePicker component.
-     */
-    get dateInput(): DateInput | null;
-    /**
-     * Gets the Calendar component inside the DatePicker component.
-     */
-    get calendar(): Calendar | null;
-    /**
-     * Gets the value of the DatePickerWithoutContext.
-     */
-    get value(): Date | null;
-    /**
-     * Gets the popup state of the DatePickerWithoutContext.
-     */
-    get show(): boolean;
-    /**
-     * Gets the `name` property of the DatePickerWithoutContext.
-     */
-    get name(): string | undefined;
-    protected get min(): Date;
-    protected get max(): Date;
-    protected get dateInputComp(): React_2.ComponentType<DateInputProps<any>>;
-    protected get toggleButtonComp(): React_2.ComponentType<ToggleButtonProps>;
-    protected get calendarComp(): React_2.ComponentType<CalendarProps<any>>;
-    protected get popupComp(): React_2.ComponentType<PopupProps>;
-    protected get pickerWrapComp(): React_2.ComponentType<PickerWrapProps>;
-    /**
-     * Represents the validity state into which the DatePicker is set.
-     */
-    get validity(): FormComponentValidity;
-    /**
-     * @hidden
-     */
-    protected get validityStyles(): boolean;
-    /**
-     * @hidden
-     */
-    protected get required(): boolean;
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
-     */
-    focus: () => void;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    protected setCalendarRef: (calendar: any) => void;
-    protected nextValue: (nextProps: DatePickerProps, nextState: DatePickerState) => Date | null;
-    protected nextShow: (nextProps: DatePickerProps, nextState: DatePickerState) => boolean;
-    protected setShow(show: boolean): void;
-    protected mergeTime(value: Date | null): Date | null;
-    protected nextTick(f: () => any): void;
-    private renderPopup;
-    private renderAdaptivePopup;
-    private handleInputValueChange;
-    private handleCalendarValueChange;
-    private handleValueChange;
-    private handleFocus;
-    private handleBlur;
-    togglePopup: () => void;
-    private handleMouseDownOutside;
-    private handleIconClick;
-    private handleIconMouseDown;
-    private handleKeyDown;
-    private calculateMedia;
-}
-
 /** @hidden */
 export declare type DateRangePicker = DateRangePickerHandle;
 
@@ -1802,11 +1521,11 @@ export declare interface DateRangePickerHandle extends Pick<DateRangePickerWitho
     /**
      * Gets the end DateInput component inside the DateRangePicker component.
      */
-    endDateInput: DateInput | null;
+    endDateInput: DateInputHandle | null;
     /**
      * Gets the start DateInput component inside the DateRangePicker component.
      */
-    startDateInput: DateInput | null;
+    startDateInput: DateInputHandle | null;
     /**
      * Gets the value of the DateRangePicker.
      */
@@ -2045,69 +1764,7 @@ export declare class DateRangePickerWithoutContext extends React_2.Component<Dat
         defaultShow: default_2.Requireable<boolean>;
         defaultValue: default_2.Validator<SelectionRange>;
         disabled: default_2.Requireable<boolean>;
-        endDateInputSettings: default_2.Requireable<default_2.InferProps<{
-            value: default_2.Requireable<Date>;
-            format: default_2.Requireable<NonNullable<string | default_2.InferProps<{
-                skeleton: default_2.Requireable<string>;
-                pattern: default_2.Requireable<string>;
-                date: default_2.Requireable<string>;
-                time: default_2.Requireable<string>;
-                datetime: default_2.Requireable<string>;
-                era: default_2.Requireable<string>;
-                year: default_2.Requireable<string>;
-                month: default_2.Requireable<string>;
-                day: default_2.Requireable<string>;
-                weekday: default_2.Requireable<string>;
-                hour: default_2.Requireable<string>;
-                hour12: default_2.Requireable<boolean>;
-                minute: default_2.Requireable<string>;
-                second: default_2.Requireable<string>;
-                timeZoneName: default_2.Requireable<string>;
-            }> | null | undefined>>;
-            formatPlaceholder: default_2.Requireable<NonNullable<"short" | "narrow" | "wide" | "formatPattern" | default_2.InferProps<{
-                year: default_2.Requireable<string>;
-                month: default_2.Requireable<string>;
-                day: default_2.Requireable<string>;
-                hour: default_2.Requireable<string>;
-                minute: default_2.Requireable<string>;
-                second: default_2.Requireable<string>;
-            }> | null | undefined>>;
-            width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
-            tabIndex: default_2.Requireable<number>;
-            title: default_2.Requireable<string>;
-            steps: default_2.Requireable<default_2.InferProps<{
-                year: default_2.Requireable<number>;
-                month: default_2.Requireable<number>;
-                day: default_2.Requireable<number>;
-                hour: default_2.Requireable<number>;
-                minute: default_2.Requireable<number>;
-                second: default_2.Requireable<number>;
-            }>>;
-            min: default_2.Requireable<Date>;
-            max: default_2.Requireable<Date>;
-            disabled: default_2.Requireable<boolean>;
-            spinners: default_2.Requireable<boolean>;
-            name: default_2.Requireable<string>;
-            dir: default_2.Requireable<string>;
-            label: default_2.Requireable<string>;
-            id: default_2.Requireable<string>;
-            ariaLabelledBy: default_2.Requireable<string>;
-            ariaDescribedBy: default_2.Requireable<string>;
-            ariaLabel: default_2.Requireable<string>;
-            ariaRole: default_2.Requireable<string>;
-            ariaHasPopup: default_2.Requireable<NonNullable<string | boolean | null | undefined>>;
-            ariaExpanded: default_2.Requireable<NonNullable<boolean | null | undefined>>;
-            onChange: default_2.Requireable<(...args: any[]) => any>;
-            validationMessage: default_2.Requireable<string>;
-            required: default_2.Requireable<boolean>;
-            validate: default_2.Requireable<boolean>;
-            valid: default_2.Requireable<boolean>;
-            size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
-            rounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
-            fillMode: default_2.Requireable<"flat" | "solid" | "outline" | null | undefined>;
-            autoFocus: default_2.Requireable<boolean>;
-            inputAttributes: default_2.Requireable<object>;
-        }>>;
+        endDateInputSettings: default_2.Requireable<default_2.InferProps<default_2.ValidationMap<DateInputProps<any>>>>;
         focusedDate: default_2.Requireable<Date>;
         format: default_2.Requireable<NonNullable<string | default_2.InferProps<{
             skeleton: default_2.Requireable<string>;
@@ -2180,11 +1837,11 @@ export declare class DateRangePickerWithoutContext extends React_2.Component<Dat
     /**
      * Gets the start DateInput component inside the DatePicker component.
      */
-    get startDateInput(): DateInput | null;
+    get startDateInput(): DateInputHandle | null;
     /**
      * Gets the end DateInput component inside the DatePicker component.
      */
-    get endDateInput(): DateInput | null;
+    get endDateInput(): DateInputHandle | null;
     /**
      * Gets the MultiVieCalendar inside the DateRangePicker.
      */
@@ -2286,7 +1943,7 @@ export declare interface DateTimePickerHandle extends Pick<DateTimePickerWithout
     /**
      * Gets the DateInput component inside the DateTimePicker component.
      */
-    dateInput: DateInput | null;
+    dateInput: DateInputHandle | null;
     /**
      * Returns the HTML element of the DateTimePicker component.
      */
@@ -2698,7 +2355,7 @@ export declare class DateTimePickerWithoutContext extends React_2.Component<Date
     /**
      * Gets the DateInput component inside the DateTimePicker component.
      */
-    get dateInput(): DateInput | null;
+    get dateInput(): DateInputHandle | null;
     /**
      * Gets the value of the DateTimePicker.
      */
@@ -3920,7 +3577,7 @@ export declare interface TimePickerHandle extends Pick<TimePickerWithoutContext,
     /**
      * Gets the DateInput component inside the TimePicker component.
      */
-    dateInput: DateInput | null;
+    dateInput: DateInputHandle | null;
     /**
      * Returns the HTML element of the TimePicker component.
      */
@@ -4312,7 +3969,7 @@ export declare class TimePickerWithoutContext extends React_2.Component<TimePick
     /**
      * Gets the DateInput component inside the TimePicker component.
      */
-    get dateInput(): DateInput | null;
+    get dateInput(): DateInputHandle | null;
     /**
      * Gets the TimeSelector component inside the TimePicker component.
      */