1 | import { CSSProperties } from "react";
|
2 | /**
|
3 | * The UI elements composing DayPicker. These elements are mapped to
|
4 | * {@link CustomComponents}, the {@link ClassNames} and the {@link Styles} used by
|
5 | * DayPicker.
|
6 | *
|
7 | * Some of these elements are extended by flags and modifiers.
|
8 | */
|
9 | export declare enum UI {
|
10 | /** The previous button in the navigation. */
|
11 | ButtonPrevious = "button_previous",
|
12 | /** The next button the navigation. */
|
13 | ButtonNext = "button_next",
|
14 | /** The root component displaying the months and the navigation bar. */
|
15 | Root = "root",
|
16 | /** The Chevron SVG element used by navigation buttons and dropdowns. */
|
17 | Chevron = "chevron",
|
18 | /**
|
19 | * The grid cell with the day's date. Extended by {@link DayFlag} and
|
20 | * {@link SelectionFlag}.
|
21 | */
|
22 | Day = "day",
|
23 | /** The button containing the formatted day's date, inside the grid cell. */
|
24 | DayButton = "day_button",
|
25 | /** The caption label of the month (when not showing the dropdown navigation). */
|
26 | CaptionLabel = "caption_label",
|
27 | /** The container of the dropdown navigation (when enabled). */
|
28 | Dropdowns = "dropdowns",
|
29 | /** The dropdown element to select for years and months. */
|
30 | Dropdown = "dropdown",
|
31 | /** The container element of the dropdown. */
|
32 | DropdownRoot = "dropdown_root",
|
33 | /** The root element of the footer. */
|
34 | Footer = "footer",
|
35 | /** The month grid. */
|
36 | MonthGrid = "month_grid",
|
37 | /** Contains the dropdown navigation or the caption label. */
|
38 | MonthCaption = "month_caption",
|
39 | /** The dropdown with the months. */
|
40 | MonthsDropdown = "months_dropdown",
|
41 | /** Wrapper of the month grid. */
|
42 | Month = "month",
|
43 | /** The container of the displayed months. */
|
44 | Months = "months",
|
45 | /** The navigation bar with the previous and next buttons. */
|
46 | Nav = "nav",
|
47 | /** The row containing the week. */
|
48 | Week = "week",
|
49 | /** The group of row weeks in a month (`tbody`). */
|
50 | Weeks = "weeks",
|
51 | /** The column header with the weekday. */
|
52 | Weekday = "weekday",
|
53 | /** The row grouping the weekdays in the column headers. */
|
54 | Weekdays = "weekdays",
|
55 | /** The cell containing the week number. */
|
56 | WeekNumber = "week_number",
|
57 | /** The cell header of the week numbers column. */
|
58 | WeekNumberHeader = "week_number_header",
|
59 | /** The dropdown with the years. */
|
60 | YearsDropdown = "years_dropdown"
|
61 | }
|
62 | /** The flags for the {@link UI.Day}. */
|
63 | export declare enum DayFlag {
|
64 | /** The day is disabled. */
|
65 | disabled = "disabled",
|
66 | /** The day is hidden. */
|
67 | hidden = "hidden",
|
68 | /** The day is outside the current month. */
|
69 | outside = "outside",
|
70 | /** The day is focused. */
|
71 | focused = "focused",
|
72 | /** The day is today. */
|
73 | today = "today"
|
74 | }
|
75 | /**
|
76 | * The state that can be applied to the {@link UI.Day} element when in selection
|
77 | * mode.
|
78 | */
|
79 | export declare enum SelectionState {
|
80 | /** The day is at the end of a selected range. */
|
81 | range_end = "range_end",
|
82 | /** The day is at the middle of a selected range. */
|
83 | range_middle = "range_middle",
|
84 | /** The day is at the start of a selected range. */
|
85 | range_start = "range_start",
|
86 | /** The day is selected. */
|
87 | selected = "selected"
|
88 | }
|
89 | /**
|
90 | * Deprecated UI elements and flags.
|
91 | *
|
92 | * These elements were used in previous version of DayPicker and are kept here
|
93 | * to help the transition to the new {@link UI | UI elements}.
|
94 | *
|
95 | * ```diff
|
96 | * <DayPicker classNames={{
|
97 | * - cell: "my-cell",
|
98 | * + day: "my-cell",
|
99 | * - day: "my-day",
|
100 | * + day_button: "my-day",
|
101 | * - day_disabled: "my-day_disabled",
|
102 | * + disabled: "my-day_disabled",
|
103 | * // etc.
|
104 | * }}/>
|
105 | * ```
|
106 | *
|
107 | * @deprecated
|
108 | * @since 9.0.1
|
109 | * @see https://daypicker.dev/upgrading
|
110 | * @see https://daypicker.dev/docs/styling
|
111 | */
|
112 | export type DeprecatedUI<T extends CSSProperties | string> = {
|
113 | /**
|
114 | * This element was applied to the style of any button in DayPicker and it is
|
115 | * replaced by {@link UI.ButtonPrevious} and {@link UI.ButtonNext}.
|
116 | *
|
117 | * @deprecated
|
118 | */
|
119 | button: T;
|
120 | /**
|
121 | * This element was resetting the style of any button in DayPicker and it is
|
122 | * replaced by {@link UI.ButtonPrevious} and {@link UI.ButtonNext}.
|
123 | *
|
124 | * @deprecated
|
125 | */
|
126 | button_reset: T;
|
127 | /**
|
128 | * This element has been renamed to {@link UI.MonthCaption}.
|
129 | *
|
130 | * @deprecated
|
131 | */
|
132 | caption: T;
|
133 | /**
|
134 | * This element has been removed. Captions are styled via
|
135 | * {@link UI.MonthCaption}.
|
136 | *
|
137 | * @deprecated
|
138 | */
|
139 | caption_between: T;
|
140 | /**
|
141 | * This element has been renamed to {@link UI.Dropdowns}.
|
142 | *
|
143 | * @deprecated
|
144 | */
|
145 | caption_dropdowns: T;
|
146 | /**
|
147 | * This element has been removed. Captions are styled via
|
148 | * {@link UI.MonthCaption}.
|
149 | *
|
150 | * @deprecated
|
151 | */
|
152 | caption_end: T;
|
153 | /**
|
154 | * This element has been removed.
|
155 | *
|
156 | * @deprecated
|
157 | */
|
158 | caption_start: T;
|
159 | /**
|
160 | * This element has been renamed to {@link UI.Day}.
|
161 | *
|
162 | * @deprecated
|
163 | */
|
164 | cell: T;
|
165 | /**
|
166 | * This element has been renamed to {@link DayFlag.disabled}.
|
167 | *
|
168 | * @deprecated
|
169 | */
|
170 | day_disabled: T;
|
171 | /**
|
172 | * This element has been renamed to {@link DayFlag.hidden}.
|
173 | *
|
174 | * @deprecated
|
175 | */
|
176 | day_hidden: T;
|
177 | /**
|
178 | * This element has been renamed to {@link DayFlag.outside}.
|
179 | *
|
180 | * @deprecated
|
181 | */
|
182 | day_outside: T;
|
183 | /**
|
184 | * This element has been renamed to {@link SelectionState.range_end}.
|
185 | *
|
186 | * @deprecated
|
187 | */
|
188 | day_range_end: T;
|
189 | /**
|
190 | * This element has been renamed to {@link SelectionState.range_middle}.
|
191 | *
|
192 | * @deprecated
|
193 | */
|
194 | day_range_middle: T;
|
195 | /**
|
196 | * This element has been renamed to {@link SelectionState.range_start}.
|
197 | *
|
198 | * @deprecated
|
199 | */
|
200 | day_range_start: T;
|
201 | /**
|
202 | * This element has been renamed to {@link SelectionState.selected}.
|
203 | *
|
204 | * @deprecated
|
205 | */
|
206 | day_selected: T;
|
207 | /**
|
208 | * This element has been renamed to {@link DayFlag.today}.
|
209 | *
|
210 | * @deprecated
|
211 | */
|
212 | day_today: T;
|
213 | /**
|
214 | * This element has been removed. The dropdown icon is now {@link UI.Chevron}
|
215 | * inside a {@link UI.CaptionLabel}.
|
216 | *
|
217 | * @deprecated
|
218 | */
|
219 | dropdown_icon: T;
|
220 | /**
|
221 | * This element has been renamed to {@link UI.MonthsDropdown}.
|
222 | *
|
223 | * @deprecated
|
224 | */
|
225 | dropdown_month: T;
|
226 | /**
|
227 | * This element has been renamed to {@link UI.YearsDropdown}.
|
228 | *
|
229 | * @deprecated
|
230 | */
|
231 | dropdown_year: T;
|
232 | /**
|
233 | * This element has been removed.
|
234 | *
|
235 | * @deprecated
|
236 | */
|
237 | head: T;
|
238 | /**
|
239 | * This element has been renamed to {@link UI.Weekday}.
|
240 | *
|
241 | * @deprecated
|
242 | */
|
243 | head_cell: T;
|
244 | /**
|
245 | * This element has been renamed to {@link UI.Weekdays}.
|
246 | *
|
247 | * @deprecated
|
248 | */
|
249 | head_row: T;
|
250 | /**
|
251 | * This flag has been removed. Use `data-multiple-months` in your CSS
|
252 | * selectors.
|
253 | *
|
254 | * @deprecated
|
255 | */
|
256 | multiple_months: T;
|
257 | /**
|
258 | * This element has been removed. To style the navigation buttons, use
|
259 | * {@link UI.ButtonPrevious} and {@link UI.ButtonNext}.
|
260 | *
|
261 | * @deprecated
|
262 | */
|
263 | nav_button: T;
|
264 | /**
|
265 | * This element has been renamed to {@link UI.ButtonNext}.
|
266 | *
|
267 | * @deprecated
|
268 | */
|
269 | nav_button_next: T;
|
270 | /**
|
271 | * This element has been renamed to {@link UI.ButtonPrevious}.
|
272 | *
|
273 | * @deprecated
|
274 | */
|
275 | nav_button_previous: T;
|
276 | /**
|
277 | * This element has been removed. The dropdown icon is now {@link UI.Chevron}
|
278 | * inside a {@link UI.ButtonNext} or a {@link UI.ButtonPrevious}.
|
279 | *
|
280 | * @deprecated
|
281 | */
|
282 | nav_icon: T;
|
283 | /**
|
284 | * This element has been renamed to {@link UI.Week}.
|
285 | *
|
286 | * @deprecated
|
287 | */
|
288 | row: T;
|
289 | /**
|
290 | * This element has been renamed to {@link UI.MonthGrid}.
|
291 | *
|
292 | * @deprecated
|
293 | */
|
294 | table: T;
|
295 | /**
|
296 | * This element has been renamed to {@link UI.Weeks}.
|
297 | *
|
298 | * @deprecated
|
299 | */
|
300 | tbody: T;
|
301 | /**
|
302 | * This element has been removed. The {@link UI.Footer} is now a single element
|
303 | * below the months.
|
304 | *
|
305 | * @deprecated
|
306 | */
|
307 | tfoot: T;
|
308 | /**
|
309 | * This flag has been removed. There are no "visually hidden" elements in
|
310 | * DayPicker 9.
|
311 | *
|
312 | * @deprecated
|
313 | */
|
314 | vhidden: T;
|
315 | /**
|
316 | * This element has been renamed. Use {@link UI.WeekNumber} instead.
|
317 | *
|
318 | * @deprecated
|
319 | */
|
320 | weeknumber: T;
|
321 | /**
|
322 | * This flag has been removed. Use `data-week-numbers` in your CSS.
|
323 | *
|
324 | * @deprecated
|
325 | */
|
326 | with_weeknumber: T;
|
327 | };
|