UEA-PRODEM
This commit is contained in:
+1
-1
@@ -18,7 +18,7 @@ See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API refe
|
||||
- 🎨 Minimal design that can be [easily styled](https://daypicker.dev/docs/styling) with CSS or any CSS framework.
|
||||
- 📅 Supports [selections](https://daypicker.dev/docs/selection-modes) of single days, multiple days, ranges of days, or [custom selections](https://daypicker.dev/guides/custom-selections).
|
||||
- 🌍 Can be [localized](https://daypicker.dev/docs/localization) into any language and [time zones](https://daypicker.dev/docs/time-zone).
|
||||
- 🌐 Support for [ISO 8601](https://daypicker.dev/docs/localization#iso-week-dates), [Persian](https://daypicker.dev/docs/localization#persian-calendar), [Buddhist (Thai)](https://daypicker.dev/docs/localization#buddhist-thai-calendar), [Ethiopic](https://daypicker.dev/docs/localization#ethiopic-calendar), [Hebrew](https://daypicker.dev/docs/localization#hebrew-calendar) and [broadcast](https://daypicker.dev/docs/localization#broadcast-calendar) calendar.
|
||||
- 🌐 Support for [ISO 8601](http://daypicker.dev/localization/iso-and-broadcast#iso-8601-calendar), [Persian](http://daypicker.dev/localization/persian), [Hijri](http://daypicker.dev/localization/hijri), [Buddhist (Thai)](http://daypicker.dev/localization/buddhist), [Ethiopic](http://daypicker.dev/localization/ethiopic), [Hebrew](http://daypicker.dev/localization/hebrew) and [broadcast](http://daypicker.dev/localization/iso-and-broadcast#broadcast-calendar) calendar.
|
||||
- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](https://daypicker.dev/guides/accessibility).
|
||||
- ⚙️ [Customizable components](https://daypicker.dev/guides/custom-components) to extend the rendered elements.
|
||||
- 🔤 Easy integration [with input fields](https://daypicker.dev/guides/input-fields).
|
||||
|
||||
+1
-1
@@ -279,7 +279,7 @@ function DayPicker(initialProps) {
|
||||
formatters,
|
||||
};
|
||||
return (react_1.default.createElement(useDayPicker_js_1.dayPickerContext.Provider, { value: contextValue },
|
||||
react_1.default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
|
||||
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 },
|
||||
react_1.default.createElement(components.Months, { className: classNames[UI_js_1.UI.Months], style: styles?.[UI_js_1.UI.Months] },
|
||||
!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 })),
|
||||
months.map((calendarMonth, displayIndex) => {
|
||||
|
||||
+42
-35
@@ -66,7 +66,7 @@ export declare enum UI {
|
||||
/** The dropdown with the years. */
|
||||
YearsDropdown = "years_dropdown"
|
||||
}
|
||||
/** Enum representing flags for the {@link UI.Day} element. */
|
||||
/** Enum representing flags for the {@link UI | UI.Day} element. */
|
||||
export declare enum DayFlag {
|
||||
/** The day is disabled. */
|
||||
disabled = "disabled",
|
||||
@@ -80,8 +80,8 @@ export declare enum DayFlag {
|
||||
today = "today"
|
||||
}
|
||||
/**
|
||||
* Enum representing selection states that can be applied to the {@link UI.Day}
|
||||
* element in selection mode.
|
||||
* Enum representing selection states that can be applied to the
|
||||
* {@link UI | UI.Day} element in selection mode.
|
||||
*/
|
||||
export declare enum SelectionState {
|
||||
/** The day is at the end of a selected range. */
|
||||
@@ -131,40 +131,42 @@ export declare enum Animation {
|
||||
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.PreviousMonthButton} and {@link UI.NextMonthButton}.
|
||||
* replaced by {@link UI | UI.PreviousMonthButton} and
|
||||
* {@link UI | UI.NextMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
button: T;
|
||||
/**
|
||||
* This element was resetting the style of any button in DayPicker and it is
|
||||
* replaced by {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
|
||||
* replaced by {@link UI | UI.PreviousMonthButton} and
|
||||
* {@link UI | UI.NextMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
button_reset: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.MonthCaption}.
|
||||
* This element has been renamed to {@link UI | UI.MonthCaption}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
caption: T;
|
||||
/**
|
||||
* This element has been removed. Captions are styled via
|
||||
* {@link UI.MonthCaption}.
|
||||
* {@link UI | UI.MonthCaption}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
caption_between: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Dropdowns}.
|
||||
* This element has been renamed to {@link UI | UI.Dropdowns}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
caption_dropdowns: T;
|
||||
/**
|
||||
* This element has been removed. Captions are styled via
|
||||
* {@link UI.MonthCaption}.
|
||||
* {@link UI | UI.MonthCaption}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
@@ -176,74 +178,78 @@ export type DeprecatedUI<T extends CSSProperties | string> = {
|
||||
*/
|
||||
caption_start: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Day}.
|
||||
* This element has been renamed to {@link UI | UI.Day}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
cell: T;
|
||||
/**
|
||||
* This element has been renamed to {@link DayFlag.disabled}.
|
||||
* This element has been renamed to {@link DayFlag | DayFlag.disabled}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_disabled: T;
|
||||
/**
|
||||
* This element has been renamed to {@link DayFlag.hidden}.
|
||||
* This element has been renamed to {@link DayFlag | DayFlag.hidden}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_hidden: T;
|
||||
/**
|
||||
* This element has been renamed to {@link DayFlag.outside}.
|
||||
* This element has been renamed to {@link DayFlag | DayFlag.outside}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_outside: T;
|
||||
/**
|
||||
* This element has been renamed to {@link SelectionState.range_end}.
|
||||
* This element has been renamed to
|
||||
* {@link SelectionState | SelectionState.range_end}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_range_end: T;
|
||||
/**
|
||||
* This element has been renamed to {@link SelectionState.range_middle}.
|
||||
* This element has been renamed to
|
||||
* {@link SelectionState | SelectionState.range_middle}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_range_middle: T;
|
||||
/**
|
||||
* This element has been renamed to {@link SelectionState.range_start}.
|
||||
* This element has been renamed to
|
||||
* {@link SelectionState | SelectionState.range_start}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_range_start: T;
|
||||
/**
|
||||
* This element has been renamed to {@link SelectionState.selected}.
|
||||
* This element has been renamed to
|
||||
* {@link SelectionState | SelectionState.selected}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_selected: T;
|
||||
/**
|
||||
* This element has been renamed to {@link DayFlag.today}.
|
||||
* This element has been renamed to {@link DayFlag | DayFlag.today}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_today: T;
|
||||
/**
|
||||
* This element has been removed. The dropdown icon is now {@link UI.Chevron}
|
||||
* inside a {@link UI.CaptionLabel}.
|
||||
* This element has been removed. The dropdown icon is now
|
||||
* {@link UI | UI.Chevron} inside a {@link UI | UI.CaptionLabel}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
dropdown_icon: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.MonthsDropdown}.
|
||||
* This element has been renamed to {@link UI | UI.MonthsDropdown}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
dropdown_month: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.YearsDropdown}.
|
||||
* This element has been renamed to {@link UI | UI.YearsDropdown}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
@@ -255,13 +261,13 @@ export type DeprecatedUI<T extends CSSProperties | string> = {
|
||||
*/
|
||||
head: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Weekday}.
|
||||
* This element has been renamed to {@link UI | UI.Weekday}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
head_cell: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Weekdays}.
|
||||
* This element has been renamed to {@link UI | UI.Weekdays}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
@@ -275,51 +281,52 @@ export type DeprecatedUI<T extends CSSProperties | string> = {
|
||||
multiple_months: T;
|
||||
/**
|
||||
* This element has been removed. To style the navigation buttons, use
|
||||
* {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
|
||||
* {@link UI | UI.PreviousMonthButton} and {@link UI | UI.NextMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
nav_button: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.NextMonthButton}.
|
||||
* This element has been renamed to {@link UI | UI.NextMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
nav_button_next: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.PreviousMonthButton}.
|
||||
* This element has been renamed to {@link UI | UI.PreviousMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
nav_button_previous: T;
|
||||
/**
|
||||
* This element has been removed. The dropdown icon is now {@link UI.Chevron}
|
||||
* inside a {@link UI.NextMonthButton} or a {@link UI.PreviousMonthButton}.
|
||||
* This element has been removed. The dropdown icon is now
|
||||
* {@link UI | UI.Chevron} inside a {@link UI | UI.NextMonthButton} or a
|
||||
* {@link UI | UI.PreviousMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
nav_icon: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Week}.
|
||||
* This element has been renamed to {@link UI | UI.Week}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
row: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.MonthGrid}.
|
||||
* This element has been renamed to {@link UI | UI.MonthGrid}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
table: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Weeks}.
|
||||
* This element has been renamed to {@link UI | UI.Weeks}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
tbody: T;
|
||||
/**
|
||||
* This element has been removed. The {@link UI.Footer} is now a single element
|
||||
* below the months.
|
||||
* This element has been removed. The {@link UI | UI.Footer} is now a single
|
||||
* element below the months.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
@@ -332,7 +339,7 @@ export type DeprecatedUI<T extends CSSProperties | string> = {
|
||||
*/
|
||||
vhidden: T;
|
||||
/**
|
||||
* This element has been renamed. Use {@link UI.WeekNumber} instead.
|
||||
* This element has been renamed. Use {@link UI | UI.WeekNumber} instead.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
|
||||
+3
-3
@@ -69,7 +69,7 @@ var UI;
|
||||
/** The dropdown with the years. */
|
||||
UI["YearsDropdown"] = "years_dropdown";
|
||||
})(UI || (exports.UI = UI = {}));
|
||||
/** Enum representing flags for the {@link UI.Day} element. */
|
||||
/** Enum representing flags for the {@link UI | UI.Day} element. */
|
||||
var DayFlag;
|
||||
(function (DayFlag) {
|
||||
/** The day is disabled. */
|
||||
@@ -84,8 +84,8 @@ var DayFlag;
|
||||
DayFlag["today"] = "today";
|
||||
})(DayFlag || (exports.DayFlag = DayFlag = {}));
|
||||
/**
|
||||
* Enum representing selection states that can be applied to the {@link UI.Day}
|
||||
* element in selection mode.
|
||||
* Enum representing selection states that can be applied to the
|
||||
* {@link UI | UI.Day} element in selection mode.
|
||||
*/
|
||||
var SelectionState;
|
||||
(function (SelectionState) {
|
||||
|
||||
+1
-1
@@ -30,7 +30,7 @@ exports.jaHira = {
|
||||
}
|
||||
return label;
|
||||
},
|
||||
labelNav: "ナビゲーションバー",
|
||||
labelNav: "なびげえしょんばあ",
|
||||
labelWeekNumberHeader: "しゅうばんごう",
|
||||
labelWeekday: (date, options, dateLib) => (dateLib ?? new DateLib_js_1.DateLib(options)).format(date, "cccc"),
|
||||
},
|
||||
|
||||
+2
-2
@@ -11,7 +11,7 @@ exports.se = {
|
||||
const lib = dateLib ?? new DateLib_js_1.DateLib(options);
|
||||
let label = lib.format(date, "PPPP");
|
||||
if (modifiers.today)
|
||||
label = `Ođđaid, ${label}`;
|
||||
label = `Odne, ${label}`;
|
||||
if (modifiers.selected)
|
||||
label = `${label}, válljejuvvon`;
|
||||
return label;
|
||||
@@ -26,7 +26,7 @@ exports.se = {
|
||||
const lib = dateLib ?? new DateLib_js_1.DateLib(options);
|
||||
let label = lib.format(date, "PPPP");
|
||||
if (modifiers?.today) {
|
||||
label = `Ođđaid, ${label}`;
|
||||
label = `Odne, ${label}`;
|
||||
}
|
||||
return label;
|
||||
},
|
||||
|
||||
+9
-1
@@ -74,7 +74,15 @@ function DayPicker(props) {
|
||||
noonSafe,
|
||||
overrides: dateLibProp,
|
||||
});
|
||||
return (react_1.default.createElement(index_js_1.DayPicker, { ...restProps, locale: localeProp ?? exports.faIR, numerals: numerals ?? "arabext", dir: dir ?? "rtl", dateLib: dateLib }));
|
||||
const locale = localeProp ?? exports.faIR;
|
||||
return (react_1.default.createElement(index_js_1.DayPicker, { ...restProps, locale: locale, numerals: numerals ?? "arabext", dir: dir ?? "rtl", dateLib: dateLib, formatters: {
|
||||
formatWeekdayName: (date, _options, lib) => {
|
||||
const activeLib = lib ?? dateLib;
|
||||
const isPersian = activeLib.options.locale?.code?.startsWith("fa");
|
||||
return activeLib.format(date, isPersian ? "ccccc" : "cccccc");
|
||||
},
|
||||
...props.formatters,
|
||||
} }));
|
||||
}
|
||||
/**
|
||||
* Returns the date library used in the Persian calendar.
|
||||
|
||||
+22
-4
@@ -14,15 +14,33 @@ const rangeIncludesDate_js_1 = require("../utils/rangeIncludesDate.js");
|
||||
* range, and a function to check if a date is within the range.
|
||||
*/
|
||||
function useRange(props, dateLib) {
|
||||
const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect, } = props;
|
||||
const { disabled, excludeDisabled, resetOnSelect, selected: initiallySelected, required, onSelect, } = props;
|
||||
const [internallySelected, setSelected] = (0, useControlledValue_js_1.useControlledValue)(initiallySelected, onSelect ? initiallySelected : undefined);
|
||||
const selected = !onSelect ? internallySelected : initiallySelected;
|
||||
const isSelected = (date) => selected && (0, rangeIncludesDate_js_1.rangeIncludesDate)(selected, date, false, dateLib);
|
||||
const select = (triggerDate, modifiers, e) => {
|
||||
const { min, max } = props;
|
||||
const newRange = triggerDate
|
||||
? (0, index_js_1.addToRange)(triggerDate, selected, min, max, required, dateLib)
|
||||
: undefined;
|
||||
let newRange;
|
||||
if (triggerDate) {
|
||||
const selectedFrom = selected?.from;
|
||||
const selectedTo = selected?.to;
|
||||
const hasFullRange = !!selectedFrom && !!selectedTo;
|
||||
const isClickingSingleDayRange = !!selectedFrom &&
|
||||
!!selectedTo &&
|
||||
dateLib.isSameDay(selectedFrom, selectedTo) &&
|
||||
dateLib.isSameDay(triggerDate, selectedFrom);
|
||||
if (resetOnSelect && (hasFullRange || !selected?.from)) {
|
||||
if (!required && isClickingSingleDayRange) {
|
||||
newRange = undefined;
|
||||
}
|
||||
else {
|
||||
newRange = { from: triggerDate, to: undefined };
|
||||
}
|
||||
}
|
||||
else {
|
||||
newRange = (0, index_js_1.addToRange)(triggerDate, selected, min, max, required, dateLib);
|
||||
}
|
||||
}
|
||||
if (excludeDisabled && disabled && newRange?.from && newRange.to) {
|
||||
if ((0, index_js_1.rangeContainsModifiers)({ from: newRange.from, to: newRange.to }, disabled, dateLib)) {
|
||||
// if a disabled days is found, the range is reset
|
||||
|
||||
+27
-3
@@ -399,7 +399,12 @@ export interface PropsBase {
|
||||
nonce?: HTMLDivElement["nonce"];
|
||||
/** Add a `title` attribute to the container element. */
|
||||
title?: HTMLDivElement["title"];
|
||||
/** Add the language tag to the container element. */
|
||||
/**
|
||||
* Add the language tag to the container element.
|
||||
*
|
||||
* When omitted, DayPicker uses the active locale code (`locale.code`).
|
||||
* Set this prop to override the language tag.
|
||||
*/
|
||||
lang?: HTMLDivElement["lang"];
|
||||
/**
|
||||
* The locale object used to localize dates. Pass a locale from
|
||||
@@ -654,9 +659,18 @@ export interface PropsRangeRequired {
|
||||
/**
|
||||
* When `true`, the range will reset when including a disabled day.
|
||||
*
|
||||
* @since V9.0.2
|
||||
* @since 9.0.2
|
||||
*/
|
||||
excludeDisabled?: boolean | undefined;
|
||||
/**
|
||||
* When `true`, clicking a day starts a new range if there is no current start
|
||||
* date or if a range is already complete. In those cases, the clicked day
|
||||
* becomes the start of the new range.
|
||||
*
|
||||
* @since 9.14
|
||||
* @see https://daypicker.dev/selections/range-mode#reset-selection
|
||||
*/
|
||||
resetOnSelect?: boolean | undefined;
|
||||
/** The selected range. */
|
||||
selected: DateRange | undefined;
|
||||
/** Event handler when a range is selected. */
|
||||
@@ -685,10 +699,20 @@ export interface PropsRange {
|
||||
/**
|
||||
* When `true`, the range will reset when including a disabled day.
|
||||
*
|
||||
* @since V9.0.2
|
||||
* @since 9.0.2
|
||||
* @see https://daypicker.dev/docs/selection-modes#exclude-disabled
|
||||
*/
|
||||
excludeDisabled?: boolean | undefined;
|
||||
/**
|
||||
* When `true`, clicking a day starts a new range if there is no current start
|
||||
* date or if a range is already complete. In those cases, the clicked day
|
||||
* becomes the start of the new range. When `required` is `false`, clicking
|
||||
* the same day of a single-day range clears the selection.
|
||||
*
|
||||
* @since 9.14
|
||||
* @see https://daypicker.dev/selections/range-mode#reset-selection
|
||||
*/
|
||||
resetOnSelect?: boolean | undefined;
|
||||
/** The selected range. */
|
||||
selected?: DateRange | undefined;
|
||||
/** Event handler when the selection changes. */
|
||||
|
||||
+1
-1
@@ -243,7 +243,7 @@ export function DayPicker(initialProps) {
|
||||
formatters,
|
||||
};
|
||||
return (React.createElement(dayPickerContext.Provider, { value: contextValue },
|
||||
React.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
|
||||
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 },
|
||||
React.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
|
||||
!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 })),
|
||||
months.map((calendarMonth, displayIndex) => {
|
||||
|
||||
+42
-35
@@ -66,7 +66,7 @@ export declare enum UI {
|
||||
/** The dropdown with the years. */
|
||||
YearsDropdown = "years_dropdown"
|
||||
}
|
||||
/** Enum representing flags for the {@link UI.Day} element. */
|
||||
/** Enum representing flags for the {@link UI | UI.Day} element. */
|
||||
export declare enum DayFlag {
|
||||
/** The day is disabled. */
|
||||
disabled = "disabled",
|
||||
@@ -80,8 +80,8 @@ export declare enum DayFlag {
|
||||
today = "today"
|
||||
}
|
||||
/**
|
||||
* Enum representing selection states that can be applied to the {@link UI.Day}
|
||||
* element in selection mode.
|
||||
* Enum representing selection states that can be applied to the
|
||||
* {@link UI | UI.Day} element in selection mode.
|
||||
*/
|
||||
export declare enum SelectionState {
|
||||
/** The day is at the end of a selected range. */
|
||||
@@ -131,40 +131,42 @@ export declare enum Animation {
|
||||
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.PreviousMonthButton} and {@link UI.NextMonthButton}.
|
||||
* replaced by {@link UI | UI.PreviousMonthButton} and
|
||||
* {@link UI | UI.NextMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
button: T;
|
||||
/**
|
||||
* This element was resetting the style of any button in DayPicker and it is
|
||||
* replaced by {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
|
||||
* replaced by {@link UI | UI.PreviousMonthButton} and
|
||||
* {@link UI | UI.NextMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
button_reset: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.MonthCaption}.
|
||||
* This element has been renamed to {@link UI | UI.MonthCaption}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
caption: T;
|
||||
/**
|
||||
* This element has been removed. Captions are styled via
|
||||
* {@link UI.MonthCaption}.
|
||||
* {@link UI | UI.MonthCaption}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
caption_between: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Dropdowns}.
|
||||
* This element has been renamed to {@link UI | UI.Dropdowns}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
caption_dropdowns: T;
|
||||
/**
|
||||
* This element has been removed. Captions are styled via
|
||||
* {@link UI.MonthCaption}.
|
||||
* {@link UI | UI.MonthCaption}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
@@ -176,74 +178,78 @@ export type DeprecatedUI<T extends CSSProperties | string> = {
|
||||
*/
|
||||
caption_start: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Day}.
|
||||
* This element has been renamed to {@link UI | UI.Day}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
cell: T;
|
||||
/**
|
||||
* This element has been renamed to {@link DayFlag.disabled}.
|
||||
* This element has been renamed to {@link DayFlag | DayFlag.disabled}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_disabled: T;
|
||||
/**
|
||||
* This element has been renamed to {@link DayFlag.hidden}.
|
||||
* This element has been renamed to {@link DayFlag | DayFlag.hidden}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_hidden: T;
|
||||
/**
|
||||
* This element has been renamed to {@link DayFlag.outside}.
|
||||
* This element has been renamed to {@link DayFlag | DayFlag.outside}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_outside: T;
|
||||
/**
|
||||
* This element has been renamed to {@link SelectionState.range_end}.
|
||||
* This element has been renamed to
|
||||
* {@link SelectionState | SelectionState.range_end}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_range_end: T;
|
||||
/**
|
||||
* This element has been renamed to {@link SelectionState.range_middle}.
|
||||
* This element has been renamed to
|
||||
* {@link SelectionState | SelectionState.range_middle}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_range_middle: T;
|
||||
/**
|
||||
* This element has been renamed to {@link SelectionState.range_start}.
|
||||
* This element has been renamed to
|
||||
* {@link SelectionState | SelectionState.range_start}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_range_start: T;
|
||||
/**
|
||||
* This element has been renamed to {@link SelectionState.selected}.
|
||||
* This element has been renamed to
|
||||
* {@link SelectionState | SelectionState.selected}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_selected: T;
|
||||
/**
|
||||
* This element has been renamed to {@link DayFlag.today}.
|
||||
* This element has been renamed to {@link DayFlag | DayFlag.today}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
day_today: T;
|
||||
/**
|
||||
* This element has been removed. The dropdown icon is now {@link UI.Chevron}
|
||||
* inside a {@link UI.CaptionLabel}.
|
||||
* This element has been removed. The dropdown icon is now
|
||||
* {@link UI | UI.Chevron} inside a {@link UI | UI.CaptionLabel}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
dropdown_icon: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.MonthsDropdown}.
|
||||
* This element has been renamed to {@link UI | UI.MonthsDropdown}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
dropdown_month: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.YearsDropdown}.
|
||||
* This element has been renamed to {@link UI | UI.YearsDropdown}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
@@ -255,13 +261,13 @@ export type DeprecatedUI<T extends CSSProperties | string> = {
|
||||
*/
|
||||
head: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Weekday}.
|
||||
* This element has been renamed to {@link UI | UI.Weekday}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
head_cell: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Weekdays}.
|
||||
* This element has been renamed to {@link UI | UI.Weekdays}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
@@ -275,51 +281,52 @@ export type DeprecatedUI<T extends CSSProperties | string> = {
|
||||
multiple_months: T;
|
||||
/**
|
||||
* This element has been removed. To style the navigation buttons, use
|
||||
* {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
|
||||
* {@link UI | UI.PreviousMonthButton} and {@link UI | UI.NextMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
nav_button: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.NextMonthButton}.
|
||||
* This element has been renamed to {@link UI | UI.NextMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
nav_button_next: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.PreviousMonthButton}.
|
||||
* This element has been renamed to {@link UI | UI.PreviousMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
nav_button_previous: T;
|
||||
/**
|
||||
* This element has been removed. The dropdown icon is now {@link UI.Chevron}
|
||||
* inside a {@link UI.NextMonthButton} or a {@link UI.PreviousMonthButton}.
|
||||
* This element has been removed. The dropdown icon is now
|
||||
* {@link UI | UI.Chevron} inside a {@link UI | UI.NextMonthButton} or a
|
||||
* {@link UI | UI.PreviousMonthButton}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
nav_icon: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Week}.
|
||||
* This element has been renamed to {@link UI | UI.Week}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
row: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.MonthGrid}.
|
||||
* This element has been renamed to {@link UI | UI.MonthGrid}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
table: T;
|
||||
/**
|
||||
* This element has been renamed to {@link UI.Weeks}.
|
||||
* This element has been renamed to {@link UI | UI.Weeks}.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
tbody: T;
|
||||
/**
|
||||
* This element has been removed. The {@link UI.Footer} is now a single element
|
||||
* below the months.
|
||||
* This element has been removed. The {@link UI | UI.Footer} is now a single
|
||||
* element below the months.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
@@ -332,7 +339,7 @@ export type DeprecatedUI<T extends CSSProperties | string> = {
|
||||
*/
|
||||
vhidden: T;
|
||||
/**
|
||||
* This element has been renamed. Use {@link UI.WeekNumber} instead.
|
||||
* This element has been renamed. Use {@link UI | UI.WeekNumber} instead.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
|
||||
+3
-3
@@ -66,7 +66,7 @@ export var UI;
|
||||
/** The dropdown with the years. */
|
||||
UI["YearsDropdown"] = "years_dropdown";
|
||||
})(UI || (UI = {}));
|
||||
/** Enum representing flags for the {@link UI.Day} element. */
|
||||
/** Enum representing flags for the {@link UI | UI.Day} element. */
|
||||
export var DayFlag;
|
||||
(function (DayFlag) {
|
||||
/** The day is disabled. */
|
||||
@@ -81,8 +81,8 @@ export var DayFlag;
|
||||
DayFlag["today"] = "today";
|
||||
})(DayFlag || (DayFlag = {}));
|
||||
/**
|
||||
* Enum representing selection states that can be applied to the {@link UI.Day}
|
||||
* element in selection mode.
|
||||
* Enum representing selection states that can be applied to the
|
||||
* {@link UI | UI.Day} element in selection mode.
|
||||
*/
|
||||
export var SelectionState;
|
||||
(function (SelectionState) {
|
||||
|
||||
+1
-1
@@ -27,7 +27,7 @@ export const jaHira = {
|
||||
}
|
||||
return label;
|
||||
},
|
||||
labelNav: "ナビゲーションバー",
|
||||
labelNav: "なびげえしょんばあ",
|
||||
labelWeekNumberHeader: "しゅうばんごう",
|
||||
labelWeekday: (date, options, dateLib) => (dateLib ?? new DateLib(options)).format(date, "cccc"),
|
||||
},
|
||||
|
||||
+2
-2
@@ -8,7 +8,7 @@ export const se = {
|
||||
const lib = dateLib ?? new DateLib(options);
|
||||
let label = lib.format(date, "PPPP");
|
||||
if (modifiers.today)
|
||||
label = `Ođđaid, ${label}`;
|
||||
label = `Odne, ${label}`;
|
||||
if (modifiers.selected)
|
||||
label = `${label}, válljejuvvon`;
|
||||
return label;
|
||||
@@ -23,7 +23,7 @@ export const se = {
|
||||
const lib = dateLib ?? new DateLib(options);
|
||||
let label = lib.format(date, "PPPP");
|
||||
if (modifiers?.today) {
|
||||
label = `Ođđaid, ${label}`;
|
||||
label = `Odne, ${label}`;
|
||||
}
|
||||
return label;
|
||||
},
|
||||
|
||||
+9
-1
@@ -34,7 +34,15 @@ export function DayPicker(props) {
|
||||
noonSafe,
|
||||
overrides: dateLibProp,
|
||||
});
|
||||
return (React.createElement(DayPickerComponent, { ...restProps, locale: localeProp ?? faIR, numerals: numerals ?? "arabext", dir: dir ?? "rtl", dateLib: dateLib }));
|
||||
const locale = localeProp ?? faIR;
|
||||
return (React.createElement(DayPickerComponent, { ...restProps, locale: locale, numerals: numerals ?? "arabext", dir: dir ?? "rtl", dateLib: dateLib, formatters: {
|
||||
formatWeekdayName: (date, _options, lib) => {
|
||||
const activeLib = lib ?? dateLib;
|
||||
const isPersian = activeLib.options.locale?.code?.startsWith("fa");
|
||||
return activeLib.format(date, isPersian ? "ccccc" : "cccccc");
|
||||
},
|
||||
...props.formatters,
|
||||
} }));
|
||||
}
|
||||
/**
|
||||
* Returns the date library used in the Persian calendar.
|
||||
|
||||
+22
-4
@@ -11,15 +11,33 @@ import { rangeIncludesDate } from "../utils/rangeIncludesDate.js";
|
||||
* range, and a function to check if a date is within the range.
|
||||
*/
|
||||
export function useRange(props, dateLib) {
|
||||
const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect, } = props;
|
||||
const { disabled, excludeDisabled, resetOnSelect, selected: initiallySelected, required, onSelect, } = props;
|
||||
const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
|
||||
const selected = !onSelect ? internallySelected : initiallySelected;
|
||||
const isSelected = (date) => selected && rangeIncludesDate(selected, date, false, dateLib);
|
||||
const select = (triggerDate, modifiers, e) => {
|
||||
const { min, max } = props;
|
||||
const newRange = triggerDate
|
||||
? addToRange(triggerDate, selected, min, max, required, dateLib)
|
||||
: undefined;
|
||||
let newRange;
|
||||
if (triggerDate) {
|
||||
const selectedFrom = selected?.from;
|
||||
const selectedTo = selected?.to;
|
||||
const hasFullRange = !!selectedFrom && !!selectedTo;
|
||||
const isClickingSingleDayRange = !!selectedFrom &&
|
||||
!!selectedTo &&
|
||||
dateLib.isSameDay(selectedFrom, selectedTo) &&
|
||||
dateLib.isSameDay(triggerDate, selectedFrom);
|
||||
if (resetOnSelect && (hasFullRange || !selected?.from)) {
|
||||
if (!required && isClickingSingleDayRange) {
|
||||
newRange = undefined;
|
||||
}
|
||||
else {
|
||||
newRange = { from: triggerDate, to: undefined };
|
||||
}
|
||||
}
|
||||
else {
|
||||
newRange = addToRange(triggerDate, selected, min, max, required, dateLib);
|
||||
}
|
||||
}
|
||||
if (excludeDisabled && disabled && newRange?.from && newRange.to) {
|
||||
if (rangeContainsModifiers({ from: newRange.from, to: newRange.to }, disabled, dateLib)) {
|
||||
// if a disabled days is found, the range is reset
|
||||
|
||||
+27
-3
@@ -399,7 +399,12 @@ export interface PropsBase {
|
||||
nonce?: HTMLDivElement["nonce"];
|
||||
/** Add a `title` attribute to the container element. */
|
||||
title?: HTMLDivElement["title"];
|
||||
/** Add the language tag to the container element. */
|
||||
/**
|
||||
* Add the language tag to the container element.
|
||||
*
|
||||
* When omitted, DayPicker uses the active locale code (`locale.code`).
|
||||
* Set this prop to override the language tag.
|
||||
*/
|
||||
lang?: HTMLDivElement["lang"];
|
||||
/**
|
||||
* The locale object used to localize dates. Pass a locale from
|
||||
@@ -654,9 +659,18 @@ export interface PropsRangeRequired {
|
||||
/**
|
||||
* When `true`, the range will reset when including a disabled day.
|
||||
*
|
||||
* @since V9.0.2
|
||||
* @since 9.0.2
|
||||
*/
|
||||
excludeDisabled?: boolean | undefined;
|
||||
/**
|
||||
* When `true`, clicking a day starts a new range if there is no current start
|
||||
* date or if a range is already complete. In those cases, the clicked day
|
||||
* becomes the start of the new range.
|
||||
*
|
||||
* @since 9.14
|
||||
* @see https://daypicker.dev/selections/range-mode#reset-selection
|
||||
*/
|
||||
resetOnSelect?: boolean | undefined;
|
||||
/** The selected range. */
|
||||
selected: DateRange | undefined;
|
||||
/** Event handler when a range is selected. */
|
||||
@@ -685,10 +699,20 @@ export interface PropsRange {
|
||||
/**
|
||||
* When `true`, the range will reset when including a disabled day.
|
||||
*
|
||||
* @since V9.0.2
|
||||
* @since 9.0.2
|
||||
* @see https://daypicker.dev/docs/selection-modes#exclude-disabled
|
||||
*/
|
||||
excludeDisabled?: boolean | undefined;
|
||||
/**
|
||||
* When `true`, clicking a day starts a new range if there is no current start
|
||||
* date or if a range is already complete. In those cases, the clicked day
|
||||
* becomes the start of the new range. When `required` is `false`, clicking
|
||||
* the same day of a single-day range clears the selection.
|
||||
*
|
||||
* @since 9.14
|
||||
* @see https://daypicker.dev/selections/range-mode#reset-selection
|
||||
*/
|
||||
resetOnSelect?: boolean | undefined;
|
||||
/** The selected range. */
|
||||
selected?: DateRange | undefined;
|
||||
/** Event handler when the selection changes. */
|
||||
|
||||
+26
-13
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-day-picker",
|
||||
"version": "9.13.0",
|
||||
"version": "9.14.0",
|
||||
"description": "Customizable Date Picker for React",
|
||||
"author": "Giampaolo Bellavite <io@gpbl.dev>",
|
||||
"homepage": "https://daypicker.dev",
|
||||
@@ -85,6 +85,16 @@
|
||||
"default": "./dist/cjs/ethiopic/index.js"
|
||||
}
|
||||
},
|
||||
"./hijri": {
|
||||
"import": {
|
||||
"types": "./dist/esm/hijri/index.d.ts",
|
||||
"default": "./dist/esm/hijri/index.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/cjs/hijri/index.d.ts",
|
||||
"default": "./dist/cjs/hijri/index.js"
|
||||
}
|
||||
},
|
||||
"./style": {
|
||||
"sass": "./src/style.css"
|
||||
},
|
||||
@@ -93,11 +103,11 @@
|
||||
"default": "./src/style.css"
|
||||
},
|
||||
"import": {
|
||||
"types": "./src/style.module.css.d.ts",
|
||||
"types": "./src/style.css.d.ts",
|
||||
"default": "./src/style.css"
|
||||
},
|
||||
"require": {
|
||||
"types": "./src/style.module.css.d.ts",
|
||||
"types": "./src/style.css.d.ts",
|
||||
"default": "./src/style.css"
|
||||
}
|
||||
},
|
||||
@@ -228,36 +238,39 @@
|
||||
"buddhist.d.ts",
|
||||
"hebrew.js",
|
||||
"hebrew.d.ts",
|
||||
"hijri.js",
|
||||
"hijri.d.ts",
|
||||
"locale.js",
|
||||
"locale.d.ts"
|
||||
],
|
||||
"dependencies": {
|
||||
"@date-fns/tz": "^1.4.1",
|
||||
"@tabby_ai/hijri-converter": "1.0.5",
|
||||
"date-fns": "^4.1.0",
|
||||
"date-fns-jalali": "^4.1.0-0"
|
||||
"date-fns-jalali": "4.1.0-0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "2.3.8",
|
||||
"@biomejs/biome": "2.3.14",
|
||||
"@jest/types": "^30.2.0",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@swc/core": "^1.15.3",
|
||||
"@swc/core": "^1.15.11",
|
||||
"@swc/jest": "^0.2.39",
|
||||
"@testing-library/dom": "^10.4.1",
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/jest": "^30.0.0",
|
||||
"@types/node": "^24.10.1",
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/node": "^25.2.3",
|
||||
"@types/react": "^19.2.13",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"jest": "^30.2.0",
|
||||
"jest-environment-jsdom": "^30.2.0",
|
||||
"jest-transform-css": "^6.0.3",
|
||||
"mockdate": "^3.0.5",
|
||||
"prettier": "^3.7.1",
|
||||
"prettier-plugin-jsdoc": "^1.7.0",
|
||||
"react": "^19.2.1",
|
||||
"react-dom": "^19.2.1",
|
||||
"prettier": "^3.8.1",
|
||||
"prettier-plugin-jsdoc": "^1.8.0",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"ts-node": "^10.9.2",
|
||||
"tslib": "^2.8.1",
|
||||
"typescript": "^5.9.3",
|
||||
|
||||
Reference in New Issue
Block a user