react-day-picker 10.0.0-next.5 → 10.0.0-next.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -5
- package/dist/cjs/DayPicker.js +82 -84
- package/dist/cjs/locale.d.ts +0 -1
- package/dist/cjs/locale.js +2 -4
- package/dist/cjs/types/props.d.ts +2 -1
- package/dist/esm/DayPicker.js +82 -84
- package/dist/esm/locale.d.ts +0 -1
- package/dist/esm/locale.js +0 -1
- package/dist/esm/types/props.d.ts +2 -1
- package/package.json +1 -1
- package/dist/cjs/locale/am-ET.d.ts +0 -7
- package/dist/cjs/locale/am-ET.js +0 -131
- package/dist/esm/locale/am-ET.d.ts +0 -7
- package/dist/esm/locale/am-ET.js +0 -128
package/README.md
CHANGED
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
DayPicker is a [React](https://react.dev) component for creating date pickers, calendars, and date inputs for web applications.
|
|
4
4
|
|
|
5
|
+
You are reading the README for `react-day-picker`, the legacy DayPicker package name. It remains available for compatibility and exposes the same DayPicker API in v10, but new projects should use `@daypicker/react`.
|
|
6
|
+
|
|
5
7
|
## Documentation
|
|
6
8
|
|
|
7
|
-
See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API reference, or read [the docs in the repository](https://github.com/gpbl/react-day-picker/blob/main/apps/website/
|
|
9
|
+
See **[daypicker.dev](https://daypicker.dev)** for guides, examples, and API reference, or read [the v10 docs in the repository](https://github.com/gpbl/react-day-picker/blob/main/apps/website/versioned_docs/version-next/start.mdx).
|
|
8
10
|
|
|
9
11
|
<picture>
|
|
10
12
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/gpbl/react-day-picker/main/apps/website/static/img/screenshot-dark.png" />
|
|
@@ -27,15 +29,16 @@ DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies o
|
|
|
27
29
|
|
|
28
30
|
## Installation
|
|
29
31
|
|
|
32
|
+
Install the legacy DayPicker package name:
|
|
33
|
+
|
|
30
34
|
```bash
|
|
31
|
-
npm install react-day-picker
|
|
35
|
+
npm install react-day-picker@next
|
|
32
36
|
```
|
|
33
37
|
|
|
34
|
-
|
|
35
|
-
integrations, install both packages together. For example:
|
|
38
|
+
For new projects, prefer the `@daypicker/react` package name:
|
|
36
39
|
|
|
37
40
|
```bash
|
|
38
|
-
npm install
|
|
41
|
+
npm install @daypicker/react@next
|
|
39
42
|
```
|
|
40
43
|
|
|
41
44
|
<a href="https://www.npmjs.com/package/react-day-picker"><img src="https://img.shields.io/npm/v/react-day-picker" alt="npm version"/></a> <img src="https://img.shields.io/npm/dm/react-day-picker.svg" alt="npm downloads"/> <img src="https://img.shields.io/bundlephobia/minzip/react-day-picker" alt="Min gzipped size"/>
|
|
@@ -43,6 +46,8 @@ npm install react-day-picker@next @daypicker/persian@next
|
|
|
43
46
|
## Example
|
|
44
47
|
|
|
45
48
|
```tsx
|
|
49
|
+
import { useState } from "react";
|
|
50
|
+
|
|
46
51
|
import { DayPicker } from "react-day-picker";
|
|
47
52
|
import "react-day-picker/style.css";
|
|
48
53
|
|
package/dist/cjs/DayPicker.js
CHANGED
|
@@ -164,12 +164,8 @@ function DayPicker(initialProps) {
|
|
|
164
164
|
props.labels,
|
|
165
165
|
props.classNames,
|
|
166
166
|
]);
|
|
167
|
-
if (!props.today
|
|
168
|
-
props = {
|
|
169
|
-
...props,
|
|
170
|
-
today: props.today ?? dateLib.today(),
|
|
171
|
-
navLayout: props.navLayout ?? "after",
|
|
172
|
-
};
|
|
167
|
+
if (!props.today) {
|
|
168
|
+
props = { ...props, today: dateLib.today() };
|
|
173
169
|
}
|
|
174
170
|
const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, } = props;
|
|
175
171
|
const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown, } = formatters;
|
|
@@ -284,83 +280,85 @@ function DayPicker(initialProps) {
|
|
|
284
280
|
};
|
|
285
281
|
return (react_1.default.createElement(useDayPicker_js_1.dayPickerContext.Provider, { value: contextValue },
|
|
286
282
|
react_1.default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang ?? locale.code, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
|
|
287
|
-
react_1.default.createElement(components.Months, { className: classNames[UI_js_1.UI.Months], style: styles?.[UI_js_1.UI.Months] },
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
undefined, className: classNames[UI_js_1.UI.
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
(
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
283
|
+
react_1.default.createElement(components.Months, { className: classNames[UI_js_1.UI.Months], style: styles?.[UI_js_1.UI.Months] },
|
|
284
|
+
!props.hideNavigation && !navLayout && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
|
|
285
|
+
months.map((calendarMonth, displayIndex) => {
|
|
286
|
+
return (react_1.default.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month],
|
|
287
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
|
|
288
|
+
key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
|
|
289
|
+
navLayout === "around" &&
|
|
290
|
+
!props.hideNavigation &&
|
|
291
|
+
displayIndex === 0 && (react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
|
|
292
|
+
react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
|
|
293
|
+
react_1.default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(components.DropdownNav, { className: classNames[UI_js_1.UI.Dropdowns], style: styles?.[UI_js_1.UI.Dropdowns] },
|
|
294
|
+
(() => {
|
|
295
|
+
const monthControl = captionLayout === "dropdown" ||
|
|
296
|
+
captionLayout === "dropdown-months" ? (react_1.default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI_js_1.UI.MonthsDropdown], "aria-label": labelMonthDropdown(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: (0, getMonthOptions_js_1.getMonthOptions)(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (react_1.default.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
|
|
297
|
+
const yearControl = captionLayout === "dropdown" ||
|
|
298
|
+
captionLayout === "dropdown-years" ? (react_1.default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI_js_1.UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: (0, getYearOptions_js_1.getYearOptions)(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (react_1.default.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
|
|
299
|
+
const controls = dateLib.getMonthYearOrder() === "year-first"
|
|
300
|
+
? [yearControl, monthControl]
|
|
301
|
+
: [monthControl, yearControl];
|
|
302
|
+
return controls;
|
|
303
|
+
})(),
|
|
304
|
+
react_1.default.createElement("span", { role: "status", "aria-live": "polite", style: {
|
|
305
|
+
border: 0,
|
|
306
|
+
clip: "rect(0 0 0 0)",
|
|
307
|
+
height: "1px",
|
|
308
|
+
margin: "-1px",
|
|
309
|
+
overflow: "hidden",
|
|
310
|
+
padding: 0,
|
|
311
|
+
position: "absolute",
|
|
312
|
+
width: "1px",
|
|
313
|
+
whiteSpace: "nowrap",
|
|
314
|
+
wordWrap: "normal",
|
|
315
|
+
} }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (react_1.default.createElement(components.CaptionLabel, { className: classNames[UI_js_1.UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
|
|
316
|
+
navLayout === "around" &&
|
|
317
|
+
!props.hideNavigation &&
|
|
318
|
+
displayIndex === numberOfMonths - 1 && (react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
|
|
319
|
+
react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
|
|
320
|
+
displayIndex === numberOfMonths - 1 &&
|
|
321
|
+
navLayout === "after" &&
|
|
322
|
+
!props.hideNavigation && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
|
|
323
|
+
react_1.default.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
|
|
324
|
+
undefined, className: classNames[UI_js_1.UI.MonthGrid], style: styles?.[UI_js_1.UI.MonthGrid] },
|
|
325
|
+
!props.hideWeekdays && (react_1.default.createElement(components.Weekdays, { "data-animated-weekdays": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Weekdays], style: styles?.[UI_js_1.UI.Weekdays] },
|
|
326
|
+
showWeekNumber && (react_1.default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(dateLib.options), className: classNames[UI_js_1.UI.WeekNumberHeader], style: styles?.[UI_js_1.UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader())),
|
|
327
|
+
weekdays.map((weekday) => (react_1.default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI_js_1.UI.Weekday], key: String(weekday), style: styles?.[UI_js_1.UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
|
|
328
|
+
react_1.default.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Weeks], style: styles?.[UI_js_1.UI.Weeks] }, calendarMonth.weeks.map((week) => {
|
|
329
|
+
return (react_1.default.createElement(components.Week, { className: classNames[UI_js_1.UI.Week], key: week.weekNumber, style: styles?.[UI_js_1.UI.Week], week: week },
|
|
330
|
+
showWeekNumber && (react_1.default.createElement(components.WeekNumber, { week: week, style: styles?.[UI_js_1.UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
|
|
331
|
+
locale,
|
|
332
|
+
}), className: classNames[UI_js_1.UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
|
|
333
|
+
week.days.map((day) => {
|
|
334
|
+
const { date } = day;
|
|
335
|
+
const modifiers = getModifiers(day);
|
|
336
|
+
modifiers[UI_js_1.DayFlag.focused] =
|
|
337
|
+
!modifiers.hidden &&
|
|
338
|
+
Boolean(focused?.isEqualTo(day));
|
|
339
|
+
modifiers[UI_js_1.SelectionState.selected] =
|
|
340
|
+
isSelected?.(date) || modifiers.selected;
|
|
341
|
+
if ((0, typeguards_js_1.isDateRange)(selectedValue)) {
|
|
342
|
+
// add range modifiers
|
|
343
|
+
const { from, to } = selectedValue;
|
|
344
|
+
modifiers[UI_js_1.SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from));
|
|
345
|
+
modifiers[UI_js_1.SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to));
|
|
346
|
+
modifiers[UI_js_1.SelectionState.range_middle] =
|
|
347
|
+
(0, rangeIncludesDate_js_1.rangeIncludesDate)(selectedValue, date, true, dateLib);
|
|
348
|
+
}
|
|
349
|
+
const style = (0, getStyleForModifiers_js_1.getStyleForModifiers)(modifiers, styles, props.modifiersStyles);
|
|
350
|
+
const className = (0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(modifiers, classNames, props.modifiersClassNames);
|
|
351
|
+
const ariaLabel = !isInteractive && !modifiers.hidden
|
|
352
|
+
? labelGridcell(date, modifiers, dateLib.options, dateLib)
|
|
353
|
+
: undefined;
|
|
354
|
+
return (react_1.default.createElement(components.Day, { key: `${day.isoDate}_${day.displayMonthId}`, day: day, modifiers: modifiers, className: className.join(" "), style: style, role: "gridcell", "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, "data-day": day.isoDate, "data-month": day.outside ? day.dateMonthId : undefined, "data-selected": modifiers.selected || undefined, "data-disabled": modifiers.disabled || undefined, "data-hidden": modifiers.hidden || undefined, "data-outside": day.outside || undefined, "data-focused": modifiers.focused || undefined, "data-today": modifiers.today || undefined }, !modifiers.hidden && isInteractive ? (react_1.default.createElement(components.DayButton, { className: classNames[UI_js_1.UI.DayButton], style: styles?.[UI_js_1.UI.DayButton], type: "button", day: day, modifiers: modifiers, disabled: (!modifiers.focused &&
|
|
355
|
+
modifiers.disabled) ||
|
|
356
|
+
undefined, "aria-disabled": (modifiers.focused &&
|
|
357
|
+
modifiers.disabled) ||
|
|
358
|
+
undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, dateLib.options, dateLib))) : (!modifiers.hidden &&
|
|
359
|
+
formatDay(day.date, dateLib.options, dateLib))));
|
|
360
|
+
})));
|
|
361
|
+
})))));
|
|
362
|
+
})),
|
|
365
363
|
props.footer && (react_1.default.createElement(components.Footer, { className: classNames[UI_js_1.UI.Footer], style: styles?.[UI_js_1.UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
|
|
366
364
|
}
|
package/dist/cjs/locale.d.ts
CHANGED
|
@@ -11,7 +11,6 @@ export type { DayPickerLocale, DayPickerLocaleLabels, } from "./classes/DateLib.
|
|
|
11
11
|
* @since V9.12.0
|
|
12
12
|
*/
|
|
13
13
|
export { af } from "./locale/af.js";
|
|
14
|
-
export { amET } from "./locale/am-ET.js";
|
|
15
14
|
export { ar } from "./locale/ar.js";
|
|
16
15
|
export { arDZ } from "./locale/ar-DZ.js";
|
|
17
16
|
export { arEG } from "./locale/ar-EG.js";
|
package/dist/cjs/locale.js
CHANGED
|
@@ -14,8 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.id = exports.hy = exports.hu = exports.ht = exports.hr = exports.hi = exports.he = exports.gu = exports.gl = exports.gd = exports.fy = exports.frCH = exports.frCA = exports.fr = exports.fi = exports.faIR = exports.eu = exports.et = exports.es = exports.eo = exports.enZA = exports.enUS = exports.enNZ = exports.enIN = exports.enIE = exports.enGB = exports.enCA = exports.enAU = exports.el = exports.deAT = exports.de = exports.da = exports.cy = exports.cs = exports.ckb = exports.ca = exports.bs = exports.bn = exports.bg = exports.beTarask = exports.be = exports.az = exports.arTN = exports.arSA = exports.arMA = exports.arEG = exports.arDZ = exports.ar = exports.
|
|
18
|
-
exports.zhTW = exports.zhHK = exports.zhCN = exports.vi = exports.uzCyrl = exports.uz = exports.uk = exports.ug = exports.tr = exports.th = exports.te = exports.ta = exports.sv = exports.srLatn = exports.sr = exports.sq = exports.sl = exports.sk = exports.se = exports.ru = exports.ro = exports.ptBR = exports.pt = exports.pl = exports.oc = exports.nn = exports.nlBE = exports.nl = exports.nb = exports.mt = exports.ms = exports.mn = exports.mk = exports.lv = exports.lt = exports.lb = exports.ko = exports.kn = exports.km = exports.kk = exports.ka = exports.jaHira = exports.ja = exports.itCH = exports.it =
|
|
17
|
+
exports.is = exports.id = exports.hy = exports.hu = exports.ht = exports.hr = exports.hi = exports.he = exports.gu = exports.gl = exports.gd = exports.fy = exports.frCH = exports.frCA = exports.fr = exports.fi = exports.faIR = exports.eu = exports.et = exports.es = exports.eo = exports.enZA = exports.enUS = exports.enNZ = exports.enIN = exports.enIE = exports.enGB = exports.enCA = exports.enAU = exports.el = exports.deAT = exports.de = exports.da = exports.cy = exports.cs = exports.ckb = exports.ca = exports.bs = exports.bn = exports.bg = exports.beTarask = exports.be = exports.az = exports.arTN = exports.arSA = exports.arMA = exports.arEG = exports.arDZ = exports.ar = exports.af = void 0;
|
|
18
|
+
exports.zhTW = exports.zhHK = exports.zhCN = exports.vi = exports.uzCyrl = exports.uz = exports.uk = exports.ug = exports.tr = exports.th = exports.te = exports.ta = exports.sv = exports.srLatn = exports.sr = exports.sq = exports.sl = exports.sk = exports.se = exports.ru = exports.ro = exports.ptBR = exports.pt = exports.pl = exports.oc = exports.nn = exports.nlBE = exports.nl = exports.nb = exports.mt = exports.ms = exports.mn = exports.mk = exports.lv = exports.lt = exports.lb = exports.ko = exports.kn = exports.km = exports.kk = exports.ka = exports.jaHira = exports.ja = exports.itCH = exports.it = void 0;
|
|
19
19
|
__exportStar(require("date-fns/locale"), exports);
|
|
20
20
|
/**
|
|
21
21
|
* DayPicker locales extended with translated labels.
|
|
@@ -24,8 +24,6 @@ __exportStar(require("date-fns/locale"), exports);
|
|
|
24
24
|
*/
|
|
25
25
|
var af_js_1 = require("./locale/af.js");
|
|
26
26
|
Object.defineProperty(exports, "af", { enumerable: true, get: function () { return af_js_1.af; } });
|
|
27
|
-
var am_ET_js_1 = require("./locale/am-ET.js");
|
|
28
|
-
Object.defineProperty(exports, "amET", { enumerable: true, get: function () { return am_ET_js_1.amET; } });
|
|
29
27
|
var ar_js_1 = require("./locale/ar.js");
|
|
30
28
|
Object.defineProperty(exports, "ar", { enumerable: true, get: function () { return ar_js_1.ar; } });
|
|
31
29
|
var ar_DZ_js_1 = require("./locale/ar-DZ.js");
|
|
@@ -163,7 +163,8 @@ export interface PropsBase {
|
|
|
163
163
|
* - `after`: Displays the buttons after the caption. This ensures the tab order
|
|
164
164
|
* matches the visual order.
|
|
165
165
|
*
|
|
166
|
-
*
|
|
166
|
+
* If not set, DayPicker preserves its legacy layout, but the tab order may
|
|
167
|
+
* not align with the visual order when using `captionLayout="dropdown"`.
|
|
167
168
|
*
|
|
168
169
|
* @since 9.7.0
|
|
169
170
|
* @see https://daypicker.dev/docs/customization#navigation-layouts
|
package/dist/esm/DayPicker.js
CHANGED
|
@@ -128,12 +128,8 @@ export function DayPicker(initialProps) {
|
|
|
128
128
|
props.labels,
|
|
129
129
|
props.classNames,
|
|
130
130
|
]);
|
|
131
|
-
if (!props.today
|
|
132
|
-
props = {
|
|
133
|
-
...props,
|
|
134
|
-
today: props.today ?? dateLib.today(),
|
|
135
|
-
navLayout: props.navLayout ?? "after",
|
|
136
|
-
};
|
|
131
|
+
if (!props.today) {
|
|
132
|
+
props = { ...props, today: dateLib.today() };
|
|
137
133
|
}
|
|
138
134
|
const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, } = props;
|
|
139
135
|
const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown, } = formatters;
|
|
@@ -248,83 +244,85 @@ export function DayPicker(initialProps) {
|
|
|
248
244
|
};
|
|
249
245
|
return (React.createElement(dayPickerContext.Provider, { value: contextValue },
|
|
250
246
|
React.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang ?? locale.code, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
|
|
251
|
-
React.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
undefined, className: classNames[UI.
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
247
|
+
React.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
|
|
248
|
+
!props.hideNavigation && !navLayout && (React.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
|
|
249
|
+
months.map((calendarMonth, displayIndex) => {
|
|
250
|
+
return (React.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI.Month], style: styles?.[UI.Month],
|
|
251
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
|
|
252
|
+
key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
|
|
253
|
+
navLayout === "around" &&
|
|
254
|
+
!props.hideNavigation &&
|
|
255
|
+
displayIndex === 0 && (React.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
|
|
256
|
+
React.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
|
|
257
|
+
React.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
|
|
258
|
+
(() => {
|
|
259
|
+
const monthControl = captionLayout === "dropdown" ||
|
|
260
|
+
captionLayout === "dropdown-months" ? (React.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
|
|
261
|
+
const yearControl = captionLayout === "dropdown" ||
|
|
262
|
+
captionLayout === "dropdown-years" ? (React.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
|
|
263
|
+
const controls = dateLib.getMonthYearOrder() === "year-first"
|
|
264
|
+
? [yearControl, monthControl]
|
|
265
|
+
: [monthControl, yearControl];
|
|
266
|
+
return controls;
|
|
267
|
+
})(),
|
|
268
|
+
React.createElement("span", { role: "status", "aria-live": "polite", style: {
|
|
269
|
+
border: 0,
|
|
270
|
+
clip: "rect(0 0 0 0)",
|
|
271
|
+
height: "1px",
|
|
272
|
+
margin: "-1px",
|
|
273
|
+
overflow: "hidden",
|
|
274
|
+
padding: 0,
|
|
275
|
+
position: "absolute",
|
|
276
|
+
width: "1px",
|
|
277
|
+
whiteSpace: "nowrap",
|
|
278
|
+
wordWrap: "normal",
|
|
279
|
+
} }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (React.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
|
|
280
|
+
navLayout === "around" &&
|
|
281
|
+
!props.hideNavigation &&
|
|
282
|
+
displayIndex === numberOfMonths - 1 && (React.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
|
|
283
|
+
React.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
|
|
284
|
+
displayIndex === numberOfMonths - 1 &&
|
|
285
|
+
navLayout === "after" &&
|
|
286
|
+
!props.hideNavigation && (React.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
|
|
287
|
+
React.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
|
|
288
|
+
undefined, className: classNames[UI.MonthGrid], style: styles?.[UI.MonthGrid] },
|
|
289
|
+
!props.hideWeekdays && (React.createElement(components.Weekdays, { "data-animated-weekdays": props.animate ? "true" : undefined, className: classNames[UI.Weekdays], style: styles?.[UI.Weekdays] },
|
|
290
|
+
showWeekNumber && (React.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(dateLib.options), className: classNames[UI.WeekNumberHeader], style: styles?.[UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader())),
|
|
291
|
+
weekdays.map((weekday) => (React.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI.Weekday], key: String(weekday), style: styles?.[UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
|
|
292
|
+
React.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI.Weeks], style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week) => {
|
|
293
|
+
return (React.createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, style: styles?.[UI.Week], week: week },
|
|
294
|
+
showWeekNumber && (React.createElement(components.WeekNumber, { week: week, style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
|
|
295
|
+
locale,
|
|
296
|
+
}), className: classNames[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
|
|
297
|
+
week.days.map((day) => {
|
|
298
|
+
const { date } = day;
|
|
299
|
+
const modifiers = getModifiers(day);
|
|
300
|
+
modifiers[DayFlag.focused] =
|
|
301
|
+
!modifiers.hidden &&
|
|
302
|
+
Boolean(focused?.isEqualTo(day));
|
|
303
|
+
modifiers[SelectionState.selected] =
|
|
304
|
+
isSelected?.(date) || modifiers.selected;
|
|
305
|
+
if (isDateRange(selectedValue)) {
|
|
306
|
+
// add range modifiers
|
|
307
|
+
const { from, to } = selectedValue;
|
|
308
|
+
modifiers[SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from));
|
|
309
|
+
modifiers[SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to));
|
|
310
|
+
modifiers[SelectionState.range_middle] =
|
|
311
|
+
rangeIncludesDate(selectedValue, date, true, dateLib);
|
|
312
|
+
}
|
|
313
|
+
const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
|
|
314
|
+
const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames);
|
|
315
|
+
const ariaLabel = !isInteractive && !modifiers.hidden
|
|
316
|
+
? labelGridcell(date, modifiers, dateLib.options, dateLib)
|
|
317
|
+
: undefined;
|
|
318
|
+
return (React.createElement(components.Day, { key: `${day.isoDate}_${day.displayMonthId}`, day: day, modifiers: modifiers, className: className.join(" "), style: style, role: "gridcell", "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, "data-day": day.isoDate, "data-month": day.outside ? day.dateMonthId : undefined, "data-selected": modifiers.selected || undefined, "data-disabled": modifiers.disabled || undefined, "data-hidden": modifiers.hidden || undefined, "data-outside": day.outside || undefined, "data-focused": modifiers.focused || undefined, "data-today": modifiers.today || undefined }, !modifiers.hidden && isInteractive ? (React.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], type: "button", day: day, modifiers: modifiers, disabled: (!modifiers.focused &&
|
|
319
|
+
modifiers.disabled) ||
|
|
320
|
+
undefined, "aria-disabled": (modifiers.focused &&
|
|
321
|
+
modifiers.disabled) ||
|
|
322
|
+
undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, dateLib.options, dateLib))) : (!modifiers.hidden &&
|
|
323
|
+
formatDay(day.date, dateLib.options, dateLib))));
|
|
324
|
+
})));
|
|
325
|
+
})))));
|
|
326
|
+
})),
|
|
329
327
|
props.footer && (React.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
|
|
330
328
|
}
|
package/dist/esm/locale.d.ts
CHANGED
|
@@ -11,7 +11,6 @@ export type { DayPickerLocale, DayPickerLocaleLabels, } from "./classes/DateLib.
|
|
|
11
11
|
* @since V9.12.0
|
|
12
12
|
*/
|
|
13
13
|
export { af } from "./locale/af.js";
|
|
14
|
-
export { amET } from "./locale/am-ET.js";
|
|
15
14
|
export { ar } from "./locale/ar.js";
|
|
16
15
|
export { arDZ } from "./locale/ar-DZ.js";
|
|
17
16
|
export { arEG } from "./locale/ar-EG.js";
|
package/dist/esm/locale.js
CHANGED
|
@@ -163,7 +163,8 @@ export interface PropsBase {
|
|
|
163
163
|
* - `after`: Displays the buttons after the caption. This ensures the tab order
|
|
164
164
|
* matches the visual order.
|
|
165
165
|
*
|
|
166
|
-
*
|
|
166
|
+
* If not set, DayPicker preserves its legacy layout, but the tab order may
|
|
167
|
+
* not align with the visual order when using `captionLayout="dropdown"`.
|
|
167
168
|
*
|
|
168
169
|
* @since 9.7.0
|
|
169
170
|
* @see https://daypicker.dev/docs/customization#navigation-layouts
|
package/package.json
CHANGED
package/dist/cjs/locale/am-ET.js
DELETED
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.amET = void 0;
|
|
4
|
-
const DateLib_js_1 = require("../classes/DateLib.js");
|
|
5
|
-
const en_US_js_1 = require("./en-US.js");
|
|
6
|
-
/**
|
|
7
|
-
* Minimal Amharic (Ethiopia) locale for date-fns v4.
|
|
8
|
-
*
|
|
9
|
-
* - Uses `Intl.DateTimeFormat('am-ET')` to localize month and weekday names.
|
|
10
|
-
* - Reuses `en-US` implementations for `formatLong`, `formatDistance`,
|
|
11
|
-
* `formatRelative`, and `match` to keep the footprint small.
|
|
12
|
-
* - Ordinals are returned as plain numeric strings.
|
|
13
|
-
*/
|
|
14
|
-
// Map date-fns widths to Intl widths
|
|
15
|
-
function mapWidth(width) {
|
|
16
|
-
switch (width) {
|
|
17
|
-
case "narrow":
|
|
18
|
-
return "narrow";
|
|
19
|
-
case "short":
|
|
20
|
-
case "abbreviated":
|
|
21
|
-
return "short";
|
|
22
|
-
default:
|
|
23
|
-
return "long";
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
function buildMonthNames(width) {
|
|
27
|
-
const intlWidth = mapWidth(width);
|
|
28
|
-
const fmt = new Intl.DateTimeFormat("am-ET", {
|
|
29
|
-
month: intlWidth,
|
|
30
|
-
timeZone: "UTC",
|
|
31
|
-
});
|
|
32
|
-
const names = [];
|
|
33
|
-
for (let i = 0; i < 12; i++) {
|
|
34
|
-
// Use a fixed UTC date to avoid locale-specific DST artifacts
|
|
35
|
-
names.push(fmt.format(new Date(Date.UTC(2017, i, 1))));
|
|
36
|
-
}
|
|
37
|
-
return names;
|
|
38
|
-
}
|
|
39
|
-
function buildDayNames(width) {
|
|
40
|
-
const intlWidth = mapWidth(width);
|
|
41
|
-
const fmt = new Intl.DateTimeFormat("am-ET", {
|
|
42
|
-
weekday: intlWidth,
|
|
43
|
-
timeZone: "UTC",
|
|
44
|
-
});
|
|
45
|
-
const names = [];
|
|
46
|
-
// 2017-01-01 was a Sunday; iterate 0..6
|
|
47
|
-
const base = Date.UTC(2017, 0, 1);
|
|
48
|
-
for (let i = 0; i < 7; i++) {
|
|
49
|
-
names.push(fmt.format(new Date(base + i * 24 * 60 * 60 * 1000)));
|
|
50
|
-
}
|
|
51
|
-
return names;
|
|
52
|
-
}
|
|
53
|
-
function getDayPeriod(value, width) {
|
|
54
|
-
if (value === "am" || value === "pm") {
|
|
55
|
-
const sampleHour = value === "am" ? 1 : 13;
|
|
56
|
-
const parts = new Intl.DateTimeFormat("am-ET", {
|
|
57
|
-
hour: "numeric",
|
|
58
|
-
hour12: true,
|
|
59
|
-
timeZone: "UTC",
|
|
60
|
-
})
|
|
61
|
-
.formatToParts(new Date(Date.UTC(2017, 0, 1, sampleHour)))
|
|
62
|
-
.find((p) => p.type === "dayPeriod");
|
|
63
|
-
if (parts?.value)
|
|
64
|
-
return parts.value;
|
|
65
|
-
}
|
|
66
|
-
// Fallback: delegate to en-US for anything else
|
|
67
|
-
return en_US_js_1.enUS.localize.dayPeriod(value, { width: width });
|
|
68
|
-
}
|
|
69
|
-
const localize = {
|
|
70
|
-
...en_US_js_1.enUS.localize,
|
|
71
|
-
// Ordinals in Amharic are commonly written as cardinals; keep simple numeric output
|
|
72
|
-
ordinalNumber: (n) => String(n),
|
|
73
|
-
month: (value, options) => {
|
|
74
|
-
const names = buildMonthNames(options?.width);
|
|
75
|
-
// value is 0..11 in date-fns v4
|
|
76
|
-
return names[value];
|
|
77
|
-
},
|
|
78
|
-
day: (value, options) => {
|
|
79
|
-
const names = buildDayNames(options?.width);
|
|
80
|
-
// value is 0..6, where 0 = Sunday
|
|
81
|
-
return names[value];
|
|
82
|
-
},
|
|
83
|
-
dayPeriod: (value, options) => getDayPeriod(value, options?.width),
|
|
84
|
-
};
|
|
85
|
-
const options = {
|
|
86
|
-
weekStartsOn: 1,
|
|
87
|
-
firstWeekContainsDate: 1,
|
|
88
|
-
};
|
|
89
|
-
/**
|
|
90
|
-
* Amharic (Ethiopia) locale backed by Intl for core names plus DayPicker
|
|
91
|
-
* labels.
|
|
92
|
-
*/
|
|
93
|
-
exports.amET = {
|
|
94
|
-
code: "am-ET",
|
|
95
|
-
// Reuse en-US for distance/relative formatting and formatLong skeletons
|
|
96
|
-
formatDistance: en_US_js_1.enUS.formatDistance,
|
|
97
|
-
formatRelative: en_US_js_1.enUS.formatRelative,
|
|
98
|
-
formatLong: en_US_js_1.enUS.formatLong,
|
|
99
|
-
localize,
|
|
100
|
-
match: en_US_js_1.enUS.match,
|
|
101
|
-
options,
|
|
102
|
-
labels: {
|
|
103
|
-
labelDayButton: (date, modifiers, opts, dateLib) => {
|
|
104
|
-
const lib = dateLib ?? new DateLib_js_1.DateLib(opts);
|
|
105
|
-
let label = lib.format(date, "PPPP");
|
|
106
|
-
if (modifiers.today)
|
|
107
|
-
label = `ዛሬ፣ ${label}`;
|
|
108
|
-
if (modifiers.selected)
|
|
109
|
-
label = `${label}, ተመርጧል`;
|
|
110
|
-
return label;
|
|
111
|
-
},
|
|
112
|
-
labelMonthDropdown: "ወርን ይምረጡ",
|
|
113
|
-
labelNext: "ወደ ቀጣይ ወር ይሂዱ",
|
|
114
|
-
labelPrevious: "ወደ ቀዳሚ ወር ይሂዱ",
|
|
115
|
-
labelWeekNumber: (weekNumber) => `ሳምንት ${weekNumber}`,
|
|
116
|
-
labelYearDropdown: "ዓመቱን ይምረጡ",
|
|
117
|
-
labelGrid: (date, opts, dateLib) => (dateLib ?? new DateLib_js_1.DateLib(opts)).formatMonthYear(date),
|
|
118
|
-
labelGridcell: (date, modifiers, opts, dateLib) => {
|
|
119
|
-
const lib = dateLib ?? new DateLib_js_1.DateLib(opts);
|
|
120
|
-
let label = lib.format(date, "PPPP");
|
|
121
|
-
if (modifiers?.today) {
|
|
122
|
-
label = `ዛሬ፣ ${label}`;
|
|
123
|
-
}
|
|
124
|
-
return label;
|
|
125
|
-
},
|
|
126
|
-
labelNav: "መምሪያ አሞሌ",
|
|
127
|
-
labelWeekNumberHeader: "የሳምንት ቁጥር",
|
|
128
|
-
labelWeekday: (date, opts, dateLib) => (dateLib ?? new DateLib_js_1.DateLib(opts)).format(date, "cccc"),
|
|
129
|
-
},
|
|
130
|
-
};
|
|
131
|
-
exports.default = exports.amET;
|
package/dist/esm/locale/am-ET.js
DELETED
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import { DateLib } from "../classes/DateLib.js";
|
|
2
|
-
import { enUS } from "./en-US.js";
|
|
3
|
-
/**
|
|
4
|
-
* Minimal Amharic (Ethiopia) locale for date-fns v4.
|
|
5
|
-
*
|
|
6
|
-
* - Uses `Intl.DateTimeFormat('am-ET')` to localize month and weekday names.
|
|
7
|
-
* - Reuses `en-US` implementations for `formatLong`, `formatDistance`,
|
|
8
|
-
* `formatRelative`, and `match` to keep the footprint small.
|
|
9
|
-
* - Ordinals are returned as plain numeric strings.
|
|
10
|
-
*/
|
|
11
|
-
// Map date-fns widths to Intl widths
|
|
12
|
-
function mapWidth(width) {
|
|
13
|
-
switch (width) {
|
|
14
|
-
case "narrow":
|
|
15
|
-
return "narrow";
|
|
16
|
-
case "short":
|
|
17
|
-
case "abbreviated":
|
|
18
|
-
return "short";
|
|
19
|
-
default:
|
|
20
|
-
return "long";
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
function buildMonthNames(width) {
|
|
24
|
-
const intlWidth = mapWidth(width);
|
|
25
|
-
const fmt = new Intl.DateTimeFormat("am-ET", {
|
|
26
|
-
month: intlWidth,
|
|
27
|
-
timeZone: "UTC",
|
|
28
|
-
});
|
|
29
|
-
const names = [];
|
|
30
|
-
for (let i = 0; i < 12; i++) {
|
|
31
|
-
// Use a fixed UTC date to avoid locale-specific DST artifacts
|
|
32
|
-
names.push(fmt.format(new Date(Date.UTC(2017, i, 1))));
|
|
33
|
-
}
|
|
34
|
-
return names;
|
|
35
|
-
}
|
|
36
|
-
function buildDayNames(width) {
|
|
37
|
-
const intlWidth = mapWidth(width);
|
|
38
|
-
const fmt = new Intl.DateTimeFormat("am-ET", {
|
|
39
|
-
weekday: intlWidth,
|
|
40
|
-
timeZone: "UTC",
|
|
41
|
-
});
|
|
42
|
-
const names = [];
|
|
43
|
-
// 2017-01-01 was a Sunday; iterate 0..6
|
|
44
|
-
const base = Date.UTC(2017, 0, 1);
|
|
45
|
-
for (let i = 0; i < 7; i++) {
|
|
46
|
-
names.push(fmt.format(new Date(base + i * 24 * 60 * 60 * 1000)));
|
|
47
|
-
}
|
|
48
|
-
return names;
|
|
49
|
-
}
|
|
50
|
-
function getDayPeriod(value, width) {
|
|
51
|
-
if (value === "am" || value === "pm") {
|
|
52
|
-
const sampleHour = value === "am" ? 1 : 13;
|
|
53
|
-
const parts = new Intl.DateTimeFormat("am-ET", {
|
|
54
|
-
hour: "numeric",
|
|
55
|
-
hour12: true,
|
|
56
|
-
timeZone: "UTC",
|
|
57
|
-
})
|
|
58
|
-
.formatToParts(new Date(Date.UTC(2017, 0, 1, sampleHour)))
|
|
59
|
-
.find((p) => p.type === "dayPeriod");
|
|
60
|
-
if (parts?.value)
|
|
61
|
-
return parts.value;
|
|
62
|
-
}
|
|
63
|
-
// Fallback: delegate to en-US for anything else
|
|
64
|
-
return enUS.localize.dayPeriod(value, { width: width });
|
|
65
|
-
}
|
|
66
|
-
const localize = {
|
|
67
|
-
...enUS.localize,
|
|
68
|
-
// Ordinals in Amharic are commonly written as cardinals; keep simple numeric output
|
|
69
|
-
ordinalNumber: (n) => String(n),
|
|
70
|
-
month: (value, options) => {
|
|
71
|
-
const names = buildMonthNames(options?.width);
|
|
72
|
-
// value is 0..11 in date-fns v4
|
|
73
|
-
return names[value];
|
|
74
|
-
},
|
|
75
|
-
day: (value, options) => {
|
|
76
|
-
const names = buildDayNames(options?.width);
|
|
77
|
-
// value is 0..6, where 0 = Sunday
|
|
78
|
-
return names[value];
|
|
79
|
-
},
|
|
80
|
-
dayPeriod: (value, options) => getDayPeriod(value, options?.width),
|
|
81
|
-
};
|
|
82
|
-
const options = {
|
|
83
|
-
weekStartsOn: 1,
|
|
84
|
-
firstWeekContainsDate: 1,
|
|
85
|
-
};
|
|
86
|
-
/**
|
|
87
|
-
* Amharic (Ethiopia) locale backed by Intl for core names plus DayPicker
|
|
88
|
-
* labels.
|
|
89
|
-
*/
|
|
90
|
-
export const amET = {
|
|
91
|
-
code: "am-ET",
|
|
92
|
-
// Reuse en-US for distance/relative formatting and formatLong skeletons
|
|
93
|
-
formatDistance: enUS.formatDistance,
|
|
94
|
-
formatRelative: enUS.formatRelative,
|
|
95
|
-
formatLong: enUS.formatLong,
|
|
96
|
-
localize,
|
|
97
|
-
match: enUS.match,
|
|
98
|
-
options,
|
|
99
|
-
labels: {
|
|
100
|
-
labelDayButton: (date, modifiers, opts, dateLib) => {
|
|
101
|
-
const lib = dateLib ?? new DateLib(opts);
|
|
102
|
-
let label = lib.format(date, "PPPP");
|
|
103
|
-
if (modifiers.today)
|
|
104
|
-
label = `ዛሬ፣ ${label}`;
|
|
105
|
-
if (modifiers.selected)
|
|
106
|
-
label = `${label}, ተመርጧል`;
|
|
107
|
-
return label;
|
|
108
|
-
},
|
|
109
|
-
labelMonthDropdown: "ወርን ይምረጡ",
|
|
110
|
-
labelNext: "ወደ ቀጣይ ወር ይሂዱ",
|
|
111
|
-
labelPrevious: "ወደ ቀዳሚ ወር ይሂዱ",
|
|
112
|
-
labelWeekNumber: (weekNumber) => `ሳምንት ${weekNumber}`,
|
|
113
|
-
labelYearDropdown: "ዓመቱን ይምረጡ",
|
|
114
|
-
labelGrid: (date, opts, dateLib) => (dateLib ?? new DateLib(opts)).formatMonthYear(date),
|
|
115
|
-
labelGridcell: (date, modifiers, opts, dateLib) => {
|
|
116
|
-
const lib = dateLib ?? new DateLib(opts);
|
|
117
|
-
let label = lib.format(date, "PPPP");
|
|
118
|
-
if (modifiers?.today) {
|
|
119
|
-
label = `ዛሬ፣ ${label}`;
|
|
120
|
-
}
|
|
121
|
-
return label;
|
|
122
|
-
},
|
|
123
|
-
labelNav: "መምሪያ አሞሌ",
|
|
124
|
-
labelWeekNumberHeader: "የሳምንት ቁጥር",
|
|
125
|
-
labelWeekday: (date, opts, dateLib) => (dateLib ?? new DateLib(opts)).format(date, "cccc"),
|
|
126
|
-
},
|
|
127
|
-
};
|
|
128
|
-
export default amET;
|