/** * Copyright 2024, SumUp Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { type HTMLAttributes } from 'react'; import { Temporal } from 'temporal-polyfill'; import type { Locale } from '../../util/i18n.js'; import { type FirstDayOfWeek, type PlainDateRange } from '../../util/date.js'; type DateModifiers = { disabled?: boolean; description?: string; }; interface SharedProps { /** * The currently selected date. */ selection?: Temporal.PlainDate | PlainDateRange; /** * A callback that is called when a user selects a date. */ onSelect?: (date: Temporal.PlainDate) => void; /** * The minimum selectable date (inclusive). */ minDate?: Temporal.PlainDate; /** * The maximum selectable date (inclusive). */ maxDate?: Temporal.PlainDate; /** * One or more [IETF BCP 47](https://en.wikipedia.org/wiki/IETF_language_tag) * locale identifiers such as `'de-DE'` or `['GB', 'en-US']`. * When passing an array, the first supported locale is used. * Defaults to `navigator.language` in supported environments. */ locale?: Locale; /** * An integer indicating the first day of the week. Can be either `1` (Monday) * or `7` (Sunday). Default: `1`. */ firstDayOfWeek?: FirstDayOfWeek; /** * A map of dates and their modifiers, which can be used to disable or add a * description to a specific date. The date key must be in the * [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) format (`YYYY-MM-DD`). * * @example * { * '2020-03-15': { disabled: true }, * '2020-03-20': { description: 'Booked' }, * } */ modifiers?: Record; } export interface CalendarProps extends SharedProps, Omit, 'onSelect'> { /** * A callback that is called with the visible months on the initial render and * whenever a user navigates to different months. */ onMonthsChange?: (months: Temporal.PlainYearMonth[]) => void; /** * Text label for the button to navigate to the previous month. */ prevMonthButtonLabel?: string; /** * Text label for the button to navigate to the next month. */ nextMonthButtonLabel?: string; /** * The number of months to display at a time. Default: `1`. */ numberOfMonths?: number; } /** * The Calendar component displays a monthly date grid. This is a low-level * component for advanced use cases; you likely want to use the DateInput * component instead. */ export declare const Calendar: import("react").ForwardRefExoticComponent>; export {};