@renderlesskit/react/dist/types/calendar/CalendarState.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

/**
 * All credit goes to [React Spectrum](https://github.com/adobe/react-spectrum)
 * We improved the Calendar from Stately [useCalendarState](https://github.com/adobe/react-spectrum/tree/main/packages/%40react-stately/calendar)
 * to work with Reakit System
 */
import * as React from "react";
import { InputBase } from "@react-types/shared";
export declare function useCalendarState(props?: CalendarInitialState): CalendarStateReturn;
export declare type CalendarState = {
    /**
     * Id for the Calendar Header
     */
    calendarId: string | undefined;
    /**
     * Selected Date value
     */
    dateValue: Date;
    /**
     * Month of the current date value
     */
    month: number;
    /**
     * Year of the current date value
     */
    year: number;
    /**
     * Start of the week for the current date value
     */
    weekStart: number;
    /**
     * Generated week days for CalendarWeekTitle based on weekStart
     */
    weekDays: {
        title: string;
        abbr: string;
    }[];
    /**
     * Generated days in the current month
     */
    daysInMonth: Date[][];
    /**
     * `true` if the calendar is disabled
     */
    isDisabled: boolean;
    /**
     * `true` if the calendar is focused
     */
    isFocused: boolean;
    /**
     * `true` if the calendar is only readonly
     */
    isReadOnly: boolean;
    /**
     * Month of the current Date
     */
    currentMonth: Date;
    /**
     * Date value that is currently focused
     */
    focusedDate: Date;
    /**
     * Informs if the given date is within the min & max date.
     */
    isInvalidDateRange: (value: Date) => boolean;
    /**
     * `true` if the calendar is used as RangeCalendar
     */
    isRangeCalendar: boolean;
};
export declare type CalendarActions = {
    /**
     * Sets `isFocused`
     */
    setFocused: React.Dispatch<React.SetStateAction<boolean>>;
    /**
     * Sets `currentMonth`
     */
    setCurrentMonth: React.Dispatch<React.SetStateAction<Date>>;
    /**
     *  Sets `focusedDate`
     */
    setFocusedDate: React.Dispatch<React.SetStateAction<Date>>;
    /**
     * Sets `dateValue`
     */
    setDateValue: (value: Date) => void;
    /**
     * Focus the cell of the specified date
     */
    focusCell: (value: Date) => void;
    /**
     * Focus the cell next to the current date
     */
    focusNextDay: () => void;
    /**
     * Focus the cell prev to the current date
     */
    focusPreviousDay: () => void;
    /**
     * Focus the cell one week next to the current date
     */
    focusNextWeek: () => void;
    /**
     * Focus the cell one week prev to the current date
     */
    focusPreviousWeek: () => void;
    /**
     * Focus the cell one month next to the current date
     */
    focusNextMonth: () => void;
    /**
     * Focus the cell one month prev to the current date
     */
    focusPreviousMonth: () => void;
    /**
     * Focus the cell of the first day of the month
     */
    focusStartOfMonth: () => void;
    /**
     * Focus the cell of the last day of the month
     */
    focusEndOfMonth: () => void;
    /**
     * Focus the cell of the date one year from the current date
     */
    focusNextYear: () => void;
    /**
     * Focus the cell of the date one year before the current date
     */
    focusPreviousYear: () => void;
    /**
     * Selects the `focusedDate`
     */
    selectFocusedDate: () => void;
    /**
     * sets `dateValue`
     */
    selectDate: (value: Date) => void;
};
declare type ValueBase = {
    /** The current date (controlled). */
    value?: string;
    /** The default date (uncontrolled). */
    defaultValue?: string;
    /** Handler that is called when the date changes. */
    onChange?: (value: string) => void;
};
declare type RangeValueMinMax = {
    /** The lowest date allowed. */
    minValue?: string;
    /** The highest date allowed. */
    maxValue?: string;
};
export declare type CalendarInitialState = ValueBase & RangeValueMinMax & InputBase & {
    /**
     * Whether the element should receive focus on render.
     */
    autoFocus?: boolean;
    /**
     * Id for the calendar grid
     */
    id?: string;
};
export declare type CalendarStateReturn = CalendarState & CalendarActions;
export {};