import { ReactNode } from 'react'; import { CaptionElementProps } from 'react-day-picker'; import { SupportedWixLocales } from '@wix/design-systems-locale-utils'; export interface BaseCalendarProps { /** Applies as data-hook HTML attribute that can be used in the tests. */ dataHook?: string; /** Focus selected day automatically when component mounts or updates. * @default true */ autoFocus?: boolean; /** Allows to display multiple months at once. Currently it shows 1 or 2 months only. * @default 1 */ numOfMonths?: 1 | 2; /** First day of the week, allowing only from 0 to 6 (Sunday to Saturday). The default value is 1 which means Monday. */ firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6; /** A single CSS class name to be appended to the root element. * @default '' */ className?: string; /** Provides a callback function when day in selected in the calendar. */ onChange: (date: { from: Date; to?: Date; } | Date, modifiers: any) => void; /** Defines a callback function that is called whenever a user presses escape, clicks outside of the element or a date is selected and `shouldCloseOnSelect` is set. Receives an event as a first argument. */ onClose?: (event?: any) => void; /** Provides a callback function when any key is clicked in the calendar. */ onKeyDown?: (event: React.KeyboardEvent) => void; /** Specify whether past dates should be selectable or not. * @default false */ excludePastDates?: boolean; /** * ##### Specify selectable dates: * * `param` {Date} `date` - a date to check * * `return` {boolean} - true if `date` should be selectable, false otherwise */ filterDate?: (date: Date) => boolean; /** Defines the selected date. */ value?: Date | { from?: Date; to?: Date; }; /** Whether the user should be able to select a date range, or just a single day. * @default 'day' */ selectionMode?: 'day' | 'range'; /** Specify whether the calendar closes on day selection. * @default true */ shouldCloseOnSelect?: boolean; /** Specify date picker instance locale. */ locale?: SupportedWixLocales; /** Specify whether RTL mode is enabled or not. When true, the keyboard navigation is changed, meaning pressing the right arrow navigates to the previous day, and pressing the left arrow navigates to the next day. */ rtl?: boolean; /** ##### Add an indication under a specific date. Function returns the indication node of a specific date or null if this day doesn't have an indication. * - `param` {date: Date, isSelected: boolean } * - `date` - a date * - `isSelected` - whether this date is the selected date * - `return` {React.node} - the indication node of a specific date or null if this day doesn't have an indication. */ dateIndication?: (param: { date: Date; isSelected: boolean; }) => ReactNode; /** Sets today's date. The today indication is added automatically according to the user timezone but in some cases, we need the ability to add the today indication based on the business timezone. */ today?: Date; /** The current displayed month. */ displayedMonth: Date; /** * ##### A callback function that would be invoked every time that the displayed month / week would be changed. * ##### This would be passed as a prop (onMonthChange) for the ReactDayPicker component. * - `month` - The current displayed month * `return` void. */ onDisplayedViewChange?: (month: Date) => void; /** The Calendar head components which includes the navigation arrows, and the captions elements. */ captionElement: React.ReactElement> | React.ComponentClass | React.FC; /** Adds modifiers to the day elements, for example `hidden` for dates that shouldn't be displayed. Accepts an object in the modifiers format of the `react-day-picker` library. */ modifiers?: Record; /** Allow selecting dates that are outside of the current displayed month. * @default false */ allowSelectingOutsideDays?: boolean; /** Controls the size of the calendar. * @default 'medium' */ size?: 'small' | 'medium'; } //# sourceMappingURL=BaseCalendar.types.d.ts.map