UNPKG

8.65 kBTypeScriptView Raw
1import { 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 */
9export 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}. */
63export 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 */
79export 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 */
112export 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};