@renderlesskit/react/dist/types/datepicker/DatePicker.d.ts

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

/// <reference types="react" />
import { PickerBaseHTMLProps, PickerBaseOptions } from "../picker-base";
import { DatePickerStateReturn } from "./DatePickerState";
export declare type DatePickerOptions = PickerBaseOptions & Pick<DatePickerStateReturn, "validationState" | "isRequired">;
export declare type DatePickerHTMLProps = PickerBaseHTMLProps;
export declare type DatePickerProps = DatePickerOptions & DatePickerHTMLProps;
export declare const useDatePicker: {
    (options?: DatePickerOptions | undefined, htmlProps?: import("reakit/ts").RoleHTMLProps | undefined, unstable_ignoreUseOptions?: boolean | undefined): import("reakit/ts").RoleHTMLProps;
    unstable_propsAreEqual: (prev: import("reakit/ts").RoleOptions & Pick<{
        baseId: string;
        unstable_idCountRef: import("react").MutableRefObject<number>;
        visible: boolean;
        animated: number | boolean;
        animating: boolean;
        setBaseId: import("react").Dispatch<import("react").SetStateAction<string>>;
        show: () => void;
        hide: () => void;
        toggle: () => void;
        setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        setAnimated: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
        stopAnimation: () => void;
        modal: boolean;
        unstable_disclosureRef: import("react").MutableRefObject<HTMLElement | null>;
        setModal: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        unstable_referenceRef: import("react").RefObject<HTMLElement | null>;
        unstable_popoverRef: import("react").RefObject<HTMLElement | null>;
        unstable_arrowRef: import("react").RefObject<HTMLElement | null>;
        unstable_popoverStyles: import("react").CSSProperties;
        unstable_arrowStyles: import("react").CSSProperties;
        unstable_originalPlacement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
        unstable_update: () => boolean;
        placement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
        place: import("react").Dispatch<import("react").SetStateAction<"auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start">>;
        pickerId: string | undefined;
        dialogId: string | undefined;
        isDisabled: boolean | undefined;
        isReadOnly: boolean | undefined;
        segmentFocus: (() => void) | undefined;
    }, "visible" | "show" | "isDisabled" | "isReadOnly" | "pickerId" | "dialogId" | "segmentFocus"> & Pick<{
        calendar: import("..").CalendarStateReturn;
        isDateRangePicker: boolean;
        fieldValue: Date;
        setFieldValue: (value: Date) => void;
        segments: import("..").DateSegment[];
        dateFormatter: import("@internationalized/date").DateFormatter;
        increment(part: Intl.DateTimeFormatPartTypes): void;
        decrement(part: Intl.DateTimeFormatPartTypes): void;
        incrementPage(part: Intl.DateTimeFormatPartTypes): void;
        decrementPage(part: Intl.DateTimeFormatPartTypes): void;
        setSegment(part: Intl.DateTimeFormatPartTypes, v: number): void;
        confirmPlaceholder(part: Intl.DateTimeFormatPartTypes): void;
        baseId: string;
        unstable_idCountRef: import("react").MutableRefObject<number>;
        setBaseId: import("react").Dispatch<import("react").SetStateAction<string>>;
        unstable_virtual: boolean;
        rtl: boolean;
        orientation?: import("reakit/ts/Composite/__utils/types").Orientation | undefined;
        items: import("reakit/ts/Composite/__utils/types").Item[];
        groups: import("reakit/ts/Composite/__utils/types").Group[];
        currentId?: string | null | undefined;
        loop: boolean | import("reakit/ts/Composite/__utils/types").Orientation;
        wrap: boolean | import("reakit/ts/Composite/__utils/types").Orientation;
        shift: boolean;
        unstable_moves: number;
        unstable_hasActiveWidget: boolean;
        unstable_includesBaseElement: boolean;
        registerItem: (item: import("reakit/ts/Composite/__utils/types").Item) => void;
        unregisterItem: (id: string) => void;
        registerGroup: (group: import("reakit/ts/Composite/__utils/types").Group) => void;
        unregisterGroup: (id: string) => void;
        move: (id: string | null) => void;
        next: (unstable_allTheWay?: boolean | undefined) => void;
        previous: (unstable_allTheWay?: boolean | undefined) => void;
        up: (unstable_allTheWay?: boolean | undefined) => void;
        down: (unstable_allTheWay?: boolean | undefined) => void;
        first: () => void;
        last: () => void;
        sort: () => void;
        unstable_setVirtual: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        setRTL: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        setOrientation: import("react").Dispatch<import("react").SetStateAction<import("reakit/ts/Composite/__utils/types").Orientation | undefined>>;
        setCurrentId: import("react").Dispatch<import("react").SetStateAction<string | null | undefined>>;
        setLoop: import("react").Dispatch<import("react").SetStateAction<boolean | import("reakit/ts/Composite/__utils/types").Orientation>>;
        setWrap: import("react").Dispatch<import("react").SetStateAction<boolean | import("reakit/ts/Composite/__utils/types").Orientation>>;
        setShift: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        reset: () => void;
        unstable_setIncludesBaseElement: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        unstable_setHasActiveWidget: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        visible: boolean;
        animated: number | boolean;
        animating: boolean;
        show: () => void;
        hide: () => void;
        toggle: () => void;
        setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        setAnimated: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
        stopAnimation: () => void;
        modal: boolean;
        unstable_disclosureRef: import("react").MutableRefObject<HTMLElement | null>;
        setModal: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        unstable_referenceRef: import("react").RefObject<HTMLElement | null>;
        unstable_popoverRef: import("react").RefObject<HTMLElement | null>;
        unstable_arrowRef: import("react").RefObject<HTMLElement | null>;
        unstable_popoverStyles: import("react").CSSProperties;
        unstable_arrowStyles: import("react").CSSProperties;
        unstable_originalPlacement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
        unstable_update: () => boolean;
        placement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
        place: import("react").Dispatch<import("react").SetStateAction<"auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start">>;
        pickerId: string | undefined;
        dialogId: string | undefined;
        isDisabled: boolean | undefined;
        isReadOnly: boolean | undefined;
        segmentFocus: (() => void) | undefined;
        dateValue: string;
        setDateValue: import("react").Dispatch<import("react").SetStateAction<string>>;
        selectDate: (newValue: string) => void;
        validationState: import("@react-types/shared").ValidationState;
        minValue: string | undefined;
        maxValue: string | undefined;
        isRequired: boolean | undefined;
    }, "validationState" | "isRequired"> & import("react").HTMLAttributes<any> & import("react").RefAttributes<any> & {
        wrapElement?: ((element: import("react").ReactNode) => import("react").ReactNode) | undefined;
    }, next: import("reakit/ts").RoleOptions & Pick<{
        baseId: string;
        unstable_idCountRef: import("react").MutableRefObject<number>;
        visible: boolean;
        animated: number | boolean;
        animating: boolean;
        setBaseId: import("react").Dispatch<import("react").SetStateAction<string>>;
        show: () => void;
        hide: () => void;
        toggle: () => void;
        setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        setAnimated: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
        stopAnimation: () => void;
        modal: boolean;
        unstable_disclosureRef: import("react").MutableRefObject<HTMLElement | null>;
        setModal: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        unstable_referenceRef: import("react").RefObject<HTMLElement | null>;
        unstable_popoverRef: import("react").RefObject<HTMLElement | null>;
        unstable_arrowRef: import("react").RefObject<HTMLElement | null>;
        unstable_popoverStyles: import("react").CSSProperties;
        unstable_arrowStyles: import("react").CSSProperties;
        unstable_originalPlacement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
        unstable_update: () => boolean;
        placement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
        place: import("react").Dispatch<import("react").SetStateAction<"auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start">>;
        pickerId: string | undefined;
        dialogId: string | undefined;
        isDisabled: boolean | undefined;
        isReadOnly: boolean | undefined;
        segmentFocus: (() => void) | undefined;
    }, "visible" | "show" | "isDisabled" | "isReadOnly" | "pickerId" | "dialogId" | "segmentFocus"> & Pick<{
        calendar: import("..").CalendarStateReturn;
        isDateRangePicker: boolean;
        fieldValue: Date;
        setFieldValue: (value: Date) => void;
        segments: import("..").DateSegment[];
        dateFormatter: import("@internationalized/date").DateFormatter;
        increment(part: Intl.DateTimeFormatPartTypes): void;
        decrement(part: Intl.DateTimeFormatPartTypes): void;
        incrementPage(part: Intl.DateTimeFormatPartTypes): void;
        decrementPage(part: Intl.DateTimeFormatPartTypes): void;
        setSegment(part: Intl.DateTimeFormatPartTypes, v: number): void;
        confirmPlaceholder(part: Intl.DateTimeFormatPartTypes): void;
        baseId: string;
        unstable_idCountRef: import("react").MutableRefObject<number>;
        setBaseId: import("react").Dispatch<import("react").SetStateAction<string>>;
        unstable_virtual: boolean;
        rtl: boolean;
        orientation?: import("reakit/ts/Composite/__utils/types").Orientation | undefined;
        items: import("reakit/ts/Composite/__utils/types").Item[];
        groups: import("reakit/ts/Composite/__utils/types").Group[];
        currentId?: string | null | undefined;
        loop: boolean | import("reakit/ts/Composite/__utils/types").Orientation;
        wrap: boolean | import("reakit/ts/Composite/__utils/types").Orientation;
        shift: boolean;
        unstable_moves: number;
        unstable_hasActiveWidget: boolean;
        unstable_includesBaseElement: boolean;
        registerItem: (item: import("reakit/ts/Composite/__utils/types").Item) => void;
        unregisterItem: (id: string) => void;
        registerGroup: (group: import("reakit/ts/Composite/__utils/types").Group) => void;
        unregisterGroup: (id: string) => void;
        move: (id: string | null) => void;
        next: (unstable_allTheWay?: boolean | undefined) => void;
        previous: (unstable_allTheWay?: boolean | undefined) => void;
        up: (unstable_allTheWay?: boolean | undefined) => void;
        down: (unstable_allTheWay?: boolean | undefined) => void;
        first: () => void;
        last: () => void;
        sort: () => void;
        unstable_setVirtual: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        setRTL: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        setOrientation: import("react").Dispatch<import("react").SetStateAction<import("reakit/ts/Composite/__utils/types").Orientation | undefined>>;
        setCurrentId: import("react").Dispatch<import("react").SetStateAction<string | null | undefined>>;
        setLoop: import("react").Dispatch<import("react").SetStateAction<boolean | import("reakit/ts/Composite/__utils/types").Orientation>>;
        setWrap: import("react").Dispatch<import("react").SetStateAction<boolean | import("reakit/ts/Composite/__utils/types").Orientation>>;
        setShift: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        reset: () => void;
        unstable_setIncludesBaseElement: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        unstable_setHasActiveWidget: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        visible: boolean;
        animated: number | boolean;
        animating: boolean;
        show: () => void;
        hide: () => void;
        toggle: () => void;
        setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        setAnimated: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
        stopAnimation: () => void;
        modal: boolean;
        unstable_disclosureRef: import("react").MutableRefObject<HTMLElement | null>;
        setModal: import("react").Dispatch<import("react").SetStateAction<boolean>>;
        unstable_referenceRef: import("react").RefObject<HTMLElement | null>;
        unstable_popoverRef: import("react").RefObject<HTMLElement | null>;
        unstable_arrowRef: import("react").RefObject<HTMLElement | null>;
        unstable_popoverStyles: import("react").CSSProperties;
        unstable_arrowStyles: import("react").CSSProperties;
        unstable_originalPlacement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
        unstable_update: () => boolean;
        placement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
        place: import("react").Dispatch<import("react").SetStateAction<"auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start">>;
        pickerId: string | undefined;
        dialogId: string | undefined;
        isDisabled: boolean | undefined;
        isReadOnly: boolean | undefined;
        segmentFocus: (() => void) | undefined;
        dateValue: string;
        setDateValue: import("react").Dispatch<import("react").SetStateAction<string>>;
        selectDate: (newValue: string) => void;
        validationState: import("@react-types/shared").ValidationState;
        minValue: string | undefined;
        maxValue: string | undefined;
        isRequired: boolean | undefined;
    }, "validationState" | "isRequired"> & import("react").HTMLAttributes<any> & import("react").RefAttributes<any> & {
        wrapElement?: ((element: import("react").ReactNode) => import("react").ReactNode) | undefined;
    }) => boolean;
    __keys: readonly any[];
    __useOptions: (options: DatePickerOptions, htmlProps: import("reakit/ts").RoleHTMLProps) => DatePickerOptions;
};
export declare const DatePicker: import("../system").Component<"div", import("reakit/ts").RoleOptions & Pick<{
    baseId: string;
    unstable_idCountRef: import("react").MutableRefObject<number>;
    visible: boolean;
    animated: number | boolean;
    animating: boolean;
    setBaseId: import("react").Dispatch<import("react").SetStateAction<string>>;
    show: () => void;
    hide: () => void;
    toggle: () => void;
    setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
    setAnimated: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
    stopAnimation: () => void;
    modal: boolean;
    unstable_disclosureRef: import("react").MutableRefObject<HTMLElement | null>;
    setModal: import("react").Dispatch<import("react").SetStateAction<boolean>>;
    unstable_referenceRef: import("react").RefObject<HTMLElement | null>;
    unstable_popoverRef: import("react").RefObject<HTMLElement | null>;
    unstable_arrowRef: import("react").RefObject<HTMLElement | null>;
    unstable_popoverStyles: import("react").CSSProperties;
    unstable_arrowStyles: import("react").CSSProperties;
    unstable_originalPlacement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
    unstable_update: () => boolean;
    placement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
    place: import("react").Dispatch<import("react").SetStateAction<"auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start">>;
    pickerId: string | undefined;
    dialogId: string | undefined;
    isDisabled: boolean | undefined;
    isReadOnly: boolean | undefined;
    segmentFocus: (() => void) | undefined;
}, "visible" | "show" | "isDisabled" | "isReadOnly" | "pickerId" | "dialogId" | "segmentFocus"> & Pick<{
    calendar: import("..").CalendarStateReturn;
    isDateRangePicker: boolean;
    fieldValue: Date;
    setFieldValue: (value: Date) => void;
    segments: import("..").DateSegment[];
    dateFormatter: import("@internationalized/date").DateFormatter;
    increment(part: Intl.DateTimeFormatPartTypes): void;
    decrement(part: Intl.DateTimeFormatPartTypes): void;
    incrementPage(part: Intl.DateTimeFormatPartTypes): void;
    decrementPage(part: Intl.DateTimeFormatPartTypes): void;
    setSegment(part: Intl.DateTimeFormatPartTypes, v: number): void;
    confirmPlaceholder(part: Intl.DateTimeFormatPartTypes): void;
    baseId: string;
    unstable_idCountRef: import("react").MutableRefObject<number>;
    setBaseId: import("react").Dispatch<import("react").SetStateAction<string>>;
    unstable_virtual: boolean;
    rtl: boolean;
    orientation?: import("reakit/ts/Composite/__utils/types").Orientation | undefined;
    items: import("reakit/ts/Composite/__utils/types").Item[];
    groups: import("reakit/ts/Composite/__utils/types").Group[];
    currentId?: string | null | undefined;
    loop: boolean | import("reakit/ts/Composite/__utils/types").Orientation;
    wrap: boolean | import("reakit/ts/Composite/__utils/types").Orientation;
    shift: boolean;
    unstable_moves: number;
    unstable_hasActiveWidget: boolean;
    unstable_includesBaseElement: boolean;
    registerItem: (item: import("reakit/ts/Composite/__utils/types").Item) => void;
    unregisterItem: (id: string) => void;
    registerGroup: (group: import("reakit/ts/Composite/__utils/types").Group) => void;
    unregisterGroup: (id: string) => void;
    move: (id: string | null) => void;
    next: (unstable_allTheWay?: boolean | undefined) => void;
    previous: (unstable_allTheWay?: boolean | undefined) => void;
    up: (unstable_allTheWay?: boolean | undefined) => void;
    down: (unstable_allTheWay?: boolean | undefined) => void;
    first: () => void;
    last: () => void;
    sort: () => void;
    unstable_setVirtual: import("react").Dispatch<import("react").SetStateAction<boolean>>;
    setRTL: import("react").Dispatch<import("react").SetStateAction<boolean>>;
    setOrientation: import("react").Dispatch<import("react").SetStateAction<import("reakit/ts/Composite/__utils/types").Orientation | undefined>>;
    setCurrentId: import("react").Dispatch<import("react").SetStateAction<string | null | undefined>>;
    setLoop: import("react").Dispatch<import("react").SetStateAction<boolean | import("reakit/ts/Composite/__utils/types").Orientation>>;
    setWrap: import("react").Dispatch<import("react").SetStateAction<boolean | import("reakit/ts/Composite/__utils/types").Orientation>>;
    setShift: import("react").Dispatch<import("react").SetStateAction<boolean>>;
    reset: () => void;
    unstable_setIncludesBaseElement: import("react").Dispatch<import("react").SetStateAction<boolean>>;
    unstable_setHasActiveWidget: import("react").Dispatch<import("react").SetStateAction<boolean>>;
    visible: boolean;
    animated: number | boolean;
    animating: boolean;
    show: () => void;
    hide: () => void;
    toggle: () => void;
    setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
    setAnimated: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
    stopAnimation: () => void;
    modal: boolean;
    unstable_disclosureRef: import("react").MutableRefObject<HTMLElement | null>;
    setModal: import("react").Dispatch<import("react").SetStateAction<boolean>>;
    unstable_referenceRef: import("react").RefObject<HTMLElement | null>;
    unstable_popoverRef: import("react").RefObject<HTMLElement | null>;
    unstable_arrowRef: import("react").RefObject<HTMLElement | null>;
    unstable_popoverStyles: import("react").CSSProperties;
    unstable_arrowStyles: import("react").CSSProperties;
    unstable_originalPlacement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
    unstable_update: () => boolean;
    placement: "auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start";
    place: import("react").Dispatch<import("react").SetStateAction<"auto" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start">>;
    pickerId: string | undefined;
    dialogId: string | undefined;
    isDisabled: boolean | undefined;
    isReadOnly: boolean | undefined;
    segmentFocus: (() => void) | undefined;
    dateValue: string;
    setDateValue: import("react").Dispatch<import("react").SetStateAction<string>>;
    selectDate: (newValue: string) => void;
    validationState: import("@react-types/shared").ValidationState;
    minValue: string | undefined;
    maxValue: string | undefined;
    isRequired: boolean | undefined;
}, "validationState" | "isRequired"> & import("react").HTMLAttributes<any> & import("react").RefAttributes<any> & {
    wrapElement?: ((element: import("react").ReactNode) => import("react").ReactNode) | undefined;
}>;