react-day-picker
Advanced tools
react-day-picker - npm Package Compare versions
Comparing version 9.0.0 to 9.0.1
@@ -9,2 +9,2 @@ import React from "react"; | ||
| */ | ||
| export declare function DayPicker<T extends DayPickerProps>(props: T): React.JSX.Element; | ||
| export declare function DayPicker(props: DayPickerProps): React.JSX.Element; |
| import React from "react"; | ||
| import type { DeprecatedUI } from "../UI.js"; | ||
| import type { Locale } from "../lib/dateLib.js"; | ||
@@ -40,3 +41,3 @@ import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared.js"; | ||
| */ | ||
| classNames?: Partial<ClassNames>; | ||
| classNames?: Partial<ClassNames> & Partial<DeprecatedUI<string>>; | ||
| /** | ||
@@ -55,3 +56,3 @@ * Change the class name for the day matching the `modifiers`. | ||
| */ | ||
| styles?: Partial<Styles>; | ||
| styles?: Partial<Styles> & Partial<DeprecatedUI<React.CSSProperties>>; | ||
| /** | ||
@@ -435,3 +436,5 @@ * Change the class name for the day matching the {@link modifiers}. | ||
| required: true; | ||
| /** The selected date. */ | ||
| selected: Date; | ||
| /** Event handler when a day is selected. */ | ||
| onSelect?: (selected: Date, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined; | ||
@@ -447,3 +450,5 @@ } | ||
| required?: false | undefined; | ||
| /** The selected date. */ | ||
| selected?: Date | undefined; | ||
| /** Event handler when a day is selected. */ | ||
| onSelect?: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
@@ -459,5 +464,9 @@ } | ||
| required: true; | ||
| /** The selected dates. */ | ||
| selected: Date[]; | ||
| /** Event handler when days are selected. */ | ||
| onSelect?: (selected: Date[], triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
| /** The minimum number of selectable days. */ | ||
| min?: number; | ||
| /** The maximum number of selectable days. */ | ||
| max?: number; | ||
@@ -473,5 +482,9 @@ } | ||
| required?: false | undefined; | ||
| /** The selected dates. */ | ||
| selected?: Date[] | undefined; | ||
| /** Event handler when days are selected. */ | ||
| onSelect?: (selected: Date[] | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
| /** The minimum number of selectable days. */ | ||
| min?: number; | ||
| /** The maximum number of selectable days. */ | ||
| max?: number; | ||
@@ -487,5 +500,10 @@ } | ||
| required: true; | ||
| disabled?: Matcher | Matcher[] | undefined; | ||
| /** The selected range. */ | ||
| selected: DateRange; | ||
| /** Event handler when a range is selected. */ | ||
| onSelect?: (selected: DateRange, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
| /** The minimum number of days to include in the range. */ | ||
| min?: number; | ||
| /** The maximum number of days to include in the range. */ | ||
| max?: number; | ||
@@ -501,7 +519,11 @@ } | ||
| required?: false | undefined; | ||
| disabled?: Matcher | Matcher[] | undefined; | ||
| /** The selected range. */ | ||
| selected?: DateRange | undefined; | ||
| disabled?: Matcher | Matcher[] | undefined; | ||
| /** Event handler when the selection changes. */ | ||
| onSelect?: (selected: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined; | ||
| /** The minimum number of days to include in the range. */ | ||
| min?: number; | ||
| /** The maximum number of days to include in the range. */ | ||
| max?: number; | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { CSSProperties } from "react"; | ||
| /** | ||
@@ -48,3 +49,3 @@ * The UI elements composing DayPicker. These elements are mapped to | ||
| Week = "week", | ||
| /** The group of row weeks in a month. */ | ||
| /** The group of row weeks in a month (`tbody`). */ | ||
| Weeks = "weeks", | ||
@@ -55,5 +56,5 @@ /** The column header with the weekday. */ | ||
| Weekdays = "weekdays", | ||
| /** The row header containing the week number. */ | ||
| /** The cell containing the week number. */ | ||
| WeekNumber = "week_number", | ||
| /** The row header containing the week number. */ | ||
| /** The cell header of the week numbers column. */ | ||
| WeekNumberHeader = "week_number_header", | ||
@@ -90,1 +91,240 @@ /** The dropdown with the years. */ | ||
| } | ||
| /** | ||
| * Deprecated UI elements and flags. | ||
| * | ||
| * These elements were used in previous version of DayPicker and are kept here | ||
| * to help the transition to the new {@link UI | UI elements}. | ||
| * | ||
| * ```diff | ||
| * <DayPicker classNames={{ | ||
| * - cell: "my-cell", | ||
| * + day: "my-cell", | ||
| * - day: "my-day", | ||
| * + day_button: "my-day", | ||
| * - day_disabled: "my-day_disabled", | ||
| * + disabled: "my-day_disabled", | ||
| * // etc. | ||
| * }}/> | ||
| * ``` | ||
| * | ||
| * @deprecated | ||
| * @since 9.0.1 | ||
| * @see https://daypicker.dev/upgrading | ||
| * @see https://daypicker.dev/docs/styling | ||
| */ | ||
| export type DeprecatedUI<T extends CSSProperties | string> = { | ||
| /** | ||
| * This element was applied to the style of any button in DayPicker and it is | ||
| * replaced by {@link UI.ButtonPrevious} and {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| button: T; | ||
| /** | ||
| * This element was resetting the style of any button in DayPicker and it is | ||
| * replaced by {@link UI.ButtonPrevious} and {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| button_reset: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.MonthCaption}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption: T; | ||
| /** | ||
| * This element has been removed. Captions are styled via | ||
| * {@link UI.MonthCaption}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_between: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Dropdowns}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_dropdowns: T; | ||
| /** | ||
| * This element has been removed. Captions are styled via | ||
| * {@link UI.MonthCaption}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_end: T; | ||
| /** | ||
| * This element has been removed. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_start: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Day}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| cell: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.disabled}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_disabled: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.hidden}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_hidden: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.outside}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_outside: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.range_end}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_range_end: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.range_middle}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_range_middle: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.range_start}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_range_start: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.selected}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_selected: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.today}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_today: T; | ||
| /** | ||
| * This element has been removed. The dropdown icon is now {@link UI.Chevron} | ||
| * inside a {@link UI.CaptionLabel}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| dropdown_icon: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.MonthsDropdown}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| dropdown_month: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.YearsDropdown}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| dropdown_year: T; | ||
| /** | ||
| * This element has been removed. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| head: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Weekday}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| head_cell: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Weekdays}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| head_row: T; | ||
| /** | ||
| * This flag has been removed. Use `data-multiple-months` in your CSS | ||
| * selectors. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| multiple_months: T; | ||
| /** | ||
| * This element has been removed. To style the navigation buttons, use | ||
| * {@link UI.ButtonPrevious} and {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_button: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_button_next: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.ButtonPrevious}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_button_previous: T; | ||
| /** | ||
| * This element has been removed. The dropdown icon is now {@link UI.Chevron} | ||
| * inside a {@link UI.ButtonNext} or a {@link UI.ButtonPrevious}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_icon: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Week}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| row: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.MonthGrid}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| table: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Weeks}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| tbody: T; | ||
| /** | ||
| * This element has been removed. The {@link UI.Footer} is now a single element | ||
| * below the months. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| tfoot: T; | ||
| /** | ||
| * This flag has been removed. There are no "visually hidden" elements in | ||
| * DayPicker 9. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| vhidden: T; | ||
| /** | ||
| * This element has been renamed. Use {@link UI.WeekNumber} instead. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| weeknumber: T; | ||
| /** | ||
| * This flag has been removed. Use `data-week-numbers` in your CSS. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| with_weeknumber: T; | ||
| }; |
@@ -52,3 +52,3 @@ "use strict"; | ||
| UI["Week"] = "week"; | ||
| /** The group of row weeks in a month. */ | ||
| /** The group of row weeks in a month (`tbody`). */ | ||
| UI["Weeks"] = "weeks"; | ||
@@ -59,5 +59,5 @@ /** The column header with the weekday. */ | ||
| UI["Weekdays"] = "weekdays"; | ||
| /** The row header containing the week number. */ | ||
| /** The cell containing the week number. */ | ||
| UI["WeekNumber"] = "week_number"; | ||
| /** The row header containing the week number. */ | ||
| /** The cell header of the week numbers column. */ | ||
| UI["WeekNumberHeader"] = "week_number_header"; | ||
@@ -64,0 +64,0 @@ /** The dropdown with the years. */ |
@@ -9,2 +9,2 @@ import React from "react"; | ||
| */ | ||
| export declare function DayPicker<T extends DayPickerProps>(props: T): React.JSX.Element; | ||
| export declare function DayPicker(props: DayPickerProps): React.JSX.Element; |
| import React from "react"; | ||
| import type { DeprecatedUI } from "../UI.js"; | ||
| import type { Locale } from "../lib/dateLib.js"; | ||
@@ -40,3 +41,3 @@ import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared.js"; | ||
| */ | ||
| classNames?: Partial<ClassNames>; | ||
| classNames?: Partial<ClassNames> & Partial<DeprecatedUI<string>>; | ||
| /** | ||
@@ -55,3 +56,3 @@ * Change the class name for the day matching the `modifiers`. | ||
| */ | ||
| styles?: Partial<Styles>; | ||
| styles?: Partial<Styles> & Partial<DeprecatedUI<React.CSSProperties>>; | ||
| /** | ||
@@ -435,3 +436,5 @@ * Change the class name for the day matching the {@link modifiers}. | ||
| required: true; | ||
| /** The selected date. */ | ||
| selected: Date; | ||
| /** Event handler when a day is selected. */ | ||
| onSelect?: (selected: Date, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined; | ||
@@ -447,3 +450,5 @@ } | ||
| required?: false | undefined; | ||
| /** The selected date. */ | ||
| selected?: Date | undefined; | ||
| /** Event handler when a day is selected. */ | ||
| onSelect?: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
@@ -459,5 +464,9 @@ } | ||
| required: true; | ||
| /** The selected dates. */ | ||
| selected: Date[]; | ||
| /** Event handler when days are selected. */ | ||
| onSelect?: (selected: Date[], triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
| /** The minimum number of selectable days. */ | ||
| min?: number; | ||
| /** The maximum number of selectable days. */ | ||
| max?: number; | ||
@@ -473,5 +482,9 @@ } | ||
| required?: false | undefined; | ||
| /** The selected dates. */ | ||
| selected?: Date[] | undefined; | ||
| /** Event handler when days are selected. */ | ||
| onSelect?: (selected: Date[] | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
| /** The minimum number of selectable days. */ | ||
| min?: number; | ||
| /** The maximum number of selectable days. */ | ||
| max?: number; | ||
@@ -487,5 +500,10 @@ } | ||
| required: true; | ||
| disabled?: Matcher | Matcher[] | undefined; | ||
| /** The selected range. */ | ||
| selected: DateRange; | ||
| /** Event handler when a range is selected. */ | ||
| onSelect?: (selected: DateRange, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
| /** The minimum number of days to include in the range. */ | ||
| min?: number; | ||
| /** The maximum number of days to include in the range. */ | ||
| max?: number; | ||
@@ -501,7 +519,11 @@ } | ||
| required?: false | undefined; | ||
| disabled?: Matcher | Matcher[] | undefined; | ||
| /** The selected range. */ | ||
| selected?: DateRange | undefined; | ||
| disabled?: Matcher | Matcher[] | undefined; | ||
| /** Event handler when the selection changes. */ | ||
| onSelect?: (selected: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined; | ||
| /** The minimum number of days to include in the range. */ | ||
| min?: number; | ||
| /** The maximum number of days to include in the range. */ | ||
| max?: number; | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { CSSProperties } from "react"; | ||
| /** | ||
@@ -48,3 +49,3 @@ * The UI elements composing DayPicker. These elements are mapped to | ||
| Week = "week", | ||
| /** The group of row weeks in a month. */ | ||
| /** The group of row weeks in a month (`tbody`). */ | ||
| Weeks = "weeks", | ||
@@ -55,5 +56,5 @@ /** The column header with the weekday. */ | ||
| Weekdays = "weekdays", | ||
| /** The row header containing the week number. */ | ||
| /** The cell containing the week number. */ | ||
| WeekNumber = "week_number", | ||
| /** The row header containing the week number. */ | ||
| /** The cell header of the week numbers column. */ | ||
| WeekNumberHeader = "week_number_header", | ||
@@ -90,1 +91,240 @@ /** The dropdown with the years. */ | ||
| } | ||
| /** | ||
| * Deprecated UI elements and flags. | ||
| * | ||
| * These elements were used in previous version of DayPicker and are kept here | ||
| * to help the transition to the new {@link UI | UI elements}. | ||
| * | ||
| * ```diff | ||
| * <DayPicker classNames={{ | ||
| * - cell: "my-cell", | ||
| * + day: "my-cell", | ||
| * - day: "my-day", | ||
| * + day_button: "my-day", | ||
| * - day_disabled: "my-day_disabled", | ||
| * + disabled: "my-day_disabled", | ||
| * // etc. | ||
| * }}/> | ||
| * ``` | ||
| * | ||
| * @deprecated | ||
| * @since 9.0.1 | ||
| * @see https://daypicker.dev/upgrading | ||
| * @see https://daypicker.dev/docs/styling | ||
| */ | ||
| export type DeprecatedUI<T extends CSSProperties | string> = { | ||
| /** | ||
| * This element was applied to the style of any button in DayPicker and it is | ||
| * replaced by {@link UI.ButtonPrevious} and {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| button: T; | ||
| /** | ||
| * This element was resetting the style of any button in DayPicker and it is | ||
| * replaced by {@link UI.ButtonPrevious} and {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| button_reset: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.MonthCaption}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption: T; | ||
| /** | ||
| * This element has been removed. Captions are styled via | ||
| * {@link UI.MonthCaption}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_between: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Dropdowns}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_dropdowns: T; | ||
| /** | ||
| * This element has been removed. Captions are styled via | ||
| * {@link UI.MonthCaption}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_end: T; | ||
| /** | ||
| * This element has been removed. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_start: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Day}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| cell: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.disabled}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_disabled: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.hidden}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_hidden: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.outside}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_outside: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.range_end}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_range_end: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.range_middle}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_range_middle: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.range_start}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_range_start: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.selected}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_selected: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.today}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_today: T; | ||
| /** | ||
| * This element has been removed. The dropdown icon is now {@link UI.Chevron} | ||
| * inside a {@link UI.CaptionLabel}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| dropdown_icon: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.MonthsDropdown}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| dropdown_month: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.YearsDropdown}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| dropdown_year: T; | ||
| /** | ||
| * This element has been removed. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| head: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Weekday}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| head_cell: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Weekdays}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| head_row: T; | ||
| /** | ||
| * This flag has been removed. Use `data-multiple-months` in your CSS | ||
| * selectors. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| multiple_months: T; | ||
| /** | ||
| * This element has been removed. To style the navigation buttons, use | ||
| * {@link UI.ButtonPrevious} and {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_button: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_button_next: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.ButtonPrevious}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_button_previous: T; | ||
| /** | ||
| * This element has been removed. The dropdown icon is now {@link UI.Chevron} | ||
| * inside a {@link UI.ButtonNext} or a {@link UI.ButtonPrevious}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_icon: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Week}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| row: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.MonthGrid}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| table: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Weeks}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| tbody: T; | ||
| /** | ||
| * This element has been removed. The {@link UI.Footer} is now a single element | ||
| * below the months. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| tfoot: T; | ||
| /** | ||
| * This flag has been removed. There are no "visually hidden" elements in | ||
| * DayPicker 9. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| vhidden: T; | ||
| /** | ||
| * This element has been renamed. Use {@link UI.WeekNumber} instead. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| weeknumber: T; | ||
| /** | ||
| * This flag has been removed. Use `data-week-numbers` in your CSS. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| with_weeknumber: T; | ||
| }; |
@@ -49,3 +49,3 @@ /** | ||
| UI["Week"] = "week"; | ||
| /** The group of row weeks in a month. */ | ||
| /** The group of row weeks in a month (`tbody`). */ | ||
| UI["Weeks"] = "weeks"; | ||
@@ -56,5 +56,5 @@ /** The column header with the weekday. */ | ||
| UI["Weekdays"] = "weekdays"; | ||
| /** The row header containing the week number. */ | ||
| /** The cell containing the week number. */ | ||
| UI["WeekNumber"] = "week_number"; | ||
| /** The row header containing the week number. */ | ||
| /** The cell header of the week numbers column. */ | ||
| UI["WeekNumberHeader"] = "week_number_header"; | ||
@@ -61,0 +61,0 @@ /** The dropdown with the years. */ |
| { | ||
| "name": "react-day-picker", | ||
| "version": "9.0.0", | ||
| "version": "9.0.1", | ||
| "description": "Customizable Date Picker for React", | ||
@@ -5,0 +5,0 @@ "author": "Giampaolo Bellavite <io@gpbl.dev>", |
| import React from "react"; | ||
| import type { DeprecatedUI } from "../UI.js"; | ||
| import type { Locale } from "../lib/dateLib.js"; | ||
@@ -66,3 +67,3 @@ | ||
| */ | ||
| classNames?: Partial<ClassNames>; | ||
| classNames?: Partial<ClassNames> & Partial<DeprecatedUI<string>>; | ||
| /** | ||
@@ -81,3 +82,3 @@ * Change the class name for the day matching the `modifiers`. | ||
| */ | ||
| styles?: Partial<Styles>; | ||
| styles?: Partial<Styles> & Partial<DeprecatedUI<React.CSSProperties>>; | ||
| /** | ||
@@ -469,3 +470,5 @@ * Change the class name for the day matching the {@link modifiers}. | ||
| required: true; | ||
| /** The selected date. */ | ||
| selected: Date; | ||
| /** Event handler when a day is selected. */ | ||
| onSelect?: ( | ||
@@ -486,3 +489,5 @@ selected: Date, | ||
| required?: false | undefined; | ||
| /** The selected date. */ | ||
| selected?: Date | undefined; | ||
| /** Event handler when a day is selected. */ | ||
| onSelect?: ( | ||
@@ -503,3 +508,5 @@ selected: Date | undefined, | ||
| required: true; | ||
| /** The selected dates. */ | ||
| selected: Date[]; | ||
| /** Event handler when days are selected. */ | ||
| onSelect?: ( | ||
@@ -511,3 +518,5 @@ selected: Date[], | ||
| ) => void; | ||
| /** The minimum number of selectable days. */ | ||
| min?: number; | ||
| /** The maximum number of selectable days. */ | ||
| max?: number; | ||
@@ -523,3 +532,5 @@ } | ||
| required?: false | undefined; | ||
| /** The selected dates. */ | ||
| selected?: Date[] | undefined; | ||
| /** Event handler when days are selected. */ | ||
| onSelect?: ( | ||
@@ -531,3 +542,5 @@ selected: Date[] | undefined, | ||
| ) => void; | ||
| /** The minimum number of selectable days. */ | ||
| min?: number; | ||
| /** The maximum number of selectable days. */ | ||
| max?: number; | ||
@@ -543,3 +556,6 @@ } | ||
| required: true; | ||
| disabled?: Matcher | Matcher[] | undefined; | ||
| /** The selected range. */ | ||
| selected: DateRange; | ||
| /** Event handler when a range is selected. */ | ||
| onSelect?: ( | ||
@@ -551,3 +567,5 @@ selected: DateRange, | ||
| ) => void; | ||
| /** The minimum number of days to include in the range. */ | ||
| min?: number; | ||
| /** The maximum number of days to include in the range. */ | ||
| max?: number; | ||
@@ -563,4 +581,6 @@ } | ||
| required?: false | undefined; | ||
| disabled?: Matcher | Matcher[] | undefined; | ||
| /** The selected range. */ | ||
| selected?: DateRange | undefined; | ||
| disabled?: Matcher | Matcher[] | undefined; | ||
| /** Event handler when the selection changes. */ | ||
| onSelect?: ( | ||
@@ -572,4 +592,6 @@ selected: DateRange | undefined, | ||
| ) => void | undefined; | ||
| /** The minimum number of days to include in the range. */ | ||
| min?: number; | ||
| /** The maximum number of days to include in the range. */ | ||
| max?: number; | ||
| } |
248
src/UI.ts
@@ -0,1 +1,3 @@ | ||
| import { CSSProperties } from "react"; | ||
| import type { CustomComponents, ClassNames, Styles } from "./types/index.js"; | ||
@@ -50,3 +52,3 @@ | ||
| Week = "week", | ||
| /** The group of row weeks in a month. */ | ||
| /** The group of row weeks in a month (`tbody`). */ | ||
| Weeks = "weeks", | ||
@@ -57,5 +59,5 @@ /** The column header with the weekday. */ | ||
| Weekdays = "weekdays", | ||
| /** The row header containing the week number. */ | ||
| /** The cell containing the week number. */ | ||
| WeekNumber = "week_number", | ||
| /** The row header containing the week number. */ | ||
| /** The cell header of the week numbers column. */ | ||
| WeekNumberHeader = "week_number_header", | ||
@@ -94,1 +96,241 @@ /** The dropdown with the years. */ | ||
| } | ||
| /** | ||
| * Deprecated UI elements and flags. | ||
| * | ||
| * These elements were used in previous version of DayPicker and are kept here | ||
| * to help the transition to the new {@link UI | UI elements}. | ||
| * | ||
| * ```diff | ||
| * <DayPicker classNames={{ | ||
| * - cell: "my-cell", | ||
| * + day: "my-cell", | ||
| * - day: "my-day", | ||
| * + day_button: "my-day", | ||
| * - day_disabled: "my-day_disabled", | ||
| * + disabled: "my-day_disabled", | ||
| * // etc. | ||
| * }}/> | ||
| * ``` | ||
| * | ||
| * @deprecated | ||
| * @since 9.0.1 | ||
| * @see https://daypicker.dev/upgrading | ||
| * @see https://daypicker.dev/docs/styling | ||
| */ | ||
| export type DeprecatedUI<T extends CSSProperties | string> = { | ||
| /** | ||
| * This element was applied to the style of any button in DayPicker and it is | ||
| * replaced by {@link UI.ButtonPrevious} and {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| button: T; | ||
| /** | ||
| * This element was resetting the style of any button in DayPicker and it is | ||
| * replaced by {@link UI.ButtonPrevious} and {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| button_reset: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.MonthCaption}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption: T; | ||
| /** | ||
| * This element has been removed. Captions are styled via | ||
| * {@link UI.MonthCaption}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_between: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Dropdowns}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_dropdowns: T; | ||
| /** | ||
| * This element has been removed. Captions are styled via | ||
| * {@link UI.MonthCaption}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_end: T; | ||
| /** | ||
| * This element has been removed. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| caption_start: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Day}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| cell: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.disabled}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_disabled: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.hidden}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_hidden: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.outside}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_outside: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.range_end}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_range_end: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.range_middle}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_range_middle: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.range_start}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_range_start: T; | ||
| /** | ||
| * This element has been renamed to {@link SelectionState.selected}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_selected: T; | ||
| /** | ||
| * This element has been renamed to {@link DayFlag.today}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| day_today: T; | ||
| /** | ||
| * This element has been removed. The dropdown icon is now {@link UI.Chevron} | ||
| * inside a {@link UI.CaptionLabel}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| dropdown_icon: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.MonthsDropdown}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| dropdown_month: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.YearsDropdown}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| dropdown_year: T; | ||
| /** | ||
| * This element has been removed. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| head: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Weekday}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| head_cell: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Weekdays}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| head_row: T; | ||
| /** | ||
| * This flag has been removed. Use `data-multiple-months` in your CSS | ||
| * selectors. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| multiple_months: T; | ||
| /** | ||
| * This element has been removed. To style the navigation buttons, use | ||
| * {@link UI.ButtonPrevious} and {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_button: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.ButtonNext}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_button_next: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.ButtonPrevious}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_button_previous: T; | ||
| /** | ||
| * This element has been removed. The dropdown icon is now {@link UI.Chevron} | ||
| * inside a {@link UI.ButtonNext} or a {@link UI.ButtonPrevious}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| nav_icon: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Week}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| row: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.MonthGrid}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| table: T; | ||
| /** | ||
| * This element has been renamed to {@link UI.Weeks}. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| tbody: T; | ||
| /** | ||
| * This element has been removed. The {@link UI.Footer} is now a single element | ||
| * below the months. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| tfoot: T; | ||
| /** | ||
| * This flag has been removed. There are no "visually hidden" elements in | ||
| * DayPicker 9. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| vhidden: T; | ||
| /** | ||
| * This element has been renamed. Use {@link UI.WeekNumber} instead. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| weeknumber: T; | ||
| /** | ||
| * This flag has been removed. Use `data-week-numbers` in your CSS. | ||
| * | ||
| * @deprecated | ||
| */ | ||
| with_weeknumber: T; | ||
| }; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.65%
1002218
- Lines of code
- increased by4.19%
19545
No dependency changes