react-day-picker 9.1.4 → 9.2.1

package/examples/index.ts

@@ -66,6 +66,7 @@ export * from "./TailwindCSS";
 export * from "./Testcase1567";
 export * from "./TestCase2047";
 export * from "./TestCase2389";
+export * from "./TestCase2511";
 export * from "./TimeZone";
 export * from "./Utc";
 export * from "./WeekIso";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "9.1.4",
+  "version": "9.2.1",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",
@@ -19,7 +19,7 @@
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
   "module": "./dist/esm/index.js",
-  "style": "./style.css",
+  "style": "./src/style.css",
   "type": "module",
   "exports": {
     ".": {
@@ -52,44 +52,88 @@
         "default": "./dist/cjs/locale.js"
       }
     },
+    "./style": {
+      "sass": "./src/style.css"
+    },
     "./style.css": {
+      "style": {
+        "default": "./src/style.css"
+      },
       "import": {
-        "types": "./style.css.d.ts",
-        "default": "./style.css"
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.css"
       },
       "require": {
-        "types": "./style.css.d.ts",
-        "default": "./style.css"
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.css"
       }
     },
+    "./style.module": {
+      "sass": "./src/style.module.css"
+    },
     "./style.module.css": {
+      "style": {
+        "default": "./src/style.module.css"
+      },
+      "import": {
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.module.css"
+      },
+      "require": {
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.module.css"
+      }
+    },
+    "./src/style.css": {
+      "style": {
+        "default": "./src/style.css"
+      },
       "import": {
-        "types": "./style.css.d.ts",
-        "default": "./style.module.css"
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.css"
       },
       "require": {
-        "types": "./style.css.d.ts",
-        "default": "./style.module.css"
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.css"
+      }
+    },
+    "./src/style.module.css": {
+      "style": {
+        "default": "./src/style.module.css"
+      },
+      "import": {
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.module.css"
+      },
+      "require": {
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.module.css"
       }
     },
     "./dist/style.css": {
+      "style": {
+        "default": "./src/style.css"
+      },
       "import": {
-        "types": "./style.css.d.ts",
-        "default": "./style.css"
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.css"
       },
       "require": {
-        "types": "./style.css.d.ts",
-        "default": "./style.css"
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.css"
       }
     },
     "./dist/style.module.css": {
+      "style": {
+        "default": "./src/style.module.css"
+      },
       "import": {
-        "types": "./style.css.d.ts",
-        "default": "./style.module.css"
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.module.css"
       },
       "require": {
-        "types": "./style.css.d.ts",
-        "default": "./style.module.css"
+        "types": "./src/style.module.css.d.ts",
+        "default": "./src/style.module.css"
       }
     },
     "./package.json": {
@@ -107,7 +151,7 @@
     "build": "pnpm build:cjs && pnpm build:esm && pnpm build:css",
     "build:cjs": "tsc --project tsconfig-cjs.json && echo '{ \"type\": \"commonjs\" }' > dist/cjs/package.json",
     "build:esm": "tsc --project tsconfig-esm.json",
-    "build:css": "./scripts/build-css.sh ./style.css ./style.module.css",
+    "build:css": "./scripts/build-css.sh ./src/style.css ./src/style.module.css",
     "lint": "eslint .",
     "test": "jest",
     "test-watch": "jest --watch",
@@ -135,29 +179,28 @@
   "devDependencies": {
     "@jest/types": "^29.6.3",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^22.5.4",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.4.0",
-    "@typescript-eslint/parser": "^8.6.0",
-    "date-fns": "^3.6.0",
-    "date-fns-jalali": "3.6.0-1",
-    "eslint": "^8.57.0",
+    "@types/jest": "^29.5.13",
+    "@types/node": "^22.7.7",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.10.0",
+    "@typescript-eslint/parser": "^8.10.0",
+    "date-fns-jalali": "^3.6.0-1",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-require-extensions": "^0.1.3",
-    "eslint-plugin-testing-library": "^6.3.0",
-    "html-validate": "^8.23.0",
+    "eslint-plugin-testing-library": "^6.4.0",
+    "html-validate": "^8.24.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "mockdate": "^3.0.5",
@@ -167,7 +210,7 @@
     "react-dom": "^18.3.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "tslib": "^2.7.0",
+    "tslib": "^2.8.0",
     "typescript": "~5.5.4",
     "typescript-css-modules": "^1.0.4"
   },

package/src/DayPicker.tsx

@@ -8,10 +8,10 @@ import type {
 
 import { UI, DayFlag, SelectionState } from "./UI.js";
 import type { CalendarDay } from "./classes/CalendarDay.js";
+import { DateLib, defaultLocale } from "./classes/DateLib.js";
 import { getClassNamesForModifiers } from "./helpers/getClassNamesForModifiers.js";
 import { getComponents } from "./helpers/getComponents.js";
 import { getDataAttributes } from "./helpers/getDataAttributes.js";
-import { getDateLib } from "./helpers/getDateLib.js";
 import { getDefaultClassNames } from "./helpers/getDefaultClassNames.js";
 import { getFormatters } from "./helpers/getFormatters.js";
 import { getMonthOptions } from "./helpers/getMonthOptions.js";
@@ -19,8 +19,6 @@ import { getStyleForModifiers } from "./helpers/getStyleForModifiers.js";
 import { getWeekdays } from "./helpers/getWeekdays.js";
 import { getYearOptions } from "./helpers/getYearOptions.js";
 import * as defaultLabels from "./labels/index.js";
-import type { FormatOptions, LabelOptions } from "./lib/dateLib.js";
-import { enUS } from "./lib/locales.js";
 import type {
   DayPickerProps,
   Modifiers,
@@ -45,28 +43,43 @@ import { isDateRange } from "./utils/typeguards.js";
  */
 export function DayPicker(props: DayPickerProps) {
   const { components, formatters, labels, dateLib, locale, classNames } =
-    useMemo(
-      () => ({
-        dateLib: getDateLib(props.dateLib),
+    useMemo(() => {
+      const locale = { ...defaultLocale, ...props.locale };
+
+      const dateLib = new DateLib(
+        {
+          locale,
+          weekStartsOn: props.weekStartsOn,
+          firstWeekContainsDate: props.firstWeekContainsDate,
+          useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
+          useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
+        },
+        props.dateLib
+      );
+
+      return {
+        dateLib,
         components: getComponents(props.components),
         formatters: getFormatters(props.formatters),
         labels: { ...defaultLabels, ...props.labels },
-        locale: { ...enUS, ...props.locale },
+        locale,
         classNames: { ...getDefaultClassNames(), ...props.classNames }
-      }),
-      [
-        props.classNames,
-        props.components,
-        props.dateLib,
-        props.formatters,
-        props.labels,
-        props.locale
-      ]
-    );
+      };
+    }, [
+      props.classNames,
+      props.components,
+      props.dateLib,
+      props.firstWeekContainsDate,
+      props.formatters,
+      props.labels,
+      props.locale,
+      props.useAdditionalDayOfYearTokens,
+      props.useAdditionalWeekYearTokens,
+      props.weekStartsOn
+    ]);
 
   const {
     captionLayout,
-    firstWeekContainsDate,
     mode,
     onDayBlur,
     onDayClick,
@@ -77,22 +90,9 @@ export function DayPicker(props: DayPickerProps) {
     onNextClick,
     onPrevClick,
     showWeekNumber,
-    styles,
-    useAdditionalDayOfYearTokens,
-    useAdditionalWeekYearTokens,
-    weekStartsOn
+    styles
   } = props;
 
-  const formatOptions: FormatOptions = {
-    locale,
-    weekStartsOn,
-    firstWeekContainsDate,
-    useAdditionalWeekYearTokens,
-    useAdditionalDayOfYearTokens
-  };
-
-  const labelOptions: LabelOptions = formatOptions;
-
   const {
     formatCaption,
     formatDay,
@@ -144,15 +144,8 @@ export function DayPicker(props: DayPickerProps) {
   } = labels;
 
   const weekdays = useMemo(
-    () =>
-      getWeekdays(
-        locale,
-        props.weekStartsOn,
-        props.ISOWeek,
-        props.timeZone,
-        dateLib
-      ),
-    [dateLib, locale, props.ISOWeek, props.timeZone, props.weekStartsOn]
+    () => getWeekdays(dateLib, props.ISOWeek, props.timeZone),
+    [dateLib, props.ISOWeek, props.timeZone]
   );
 
   const isInteractive = mode !== undefined || onDayClick !== undefined;
@@ -317,7 +310,6 @@ export function DayPicker(props: DayPickerProps) {
               navStart,
               navEnd,
               formatters,
-              locale,
               dateLib
             );
 
@@ -373,7 +365,7 @@ export function DayPicker(props: DayPickerProps) {
                       captionLayout === "dropdown-years" ? (
                         <components.YearsDropdown
                           className={classNames[UI.YearsDropdown]}
-                          aria-label={labelYearDropdown(labelOptions)}
+                          aria-label={labelYearDropdown(dateLib.options)}
                           classNames={classNames}
                           components={components}
                           disabled={Boolean(props.disableNavigation)}
@@ -396,7 +388,7 @@ export function DayPicker(props: DayPickerProps) {
                     >
                       {formatCaption(
                         calendarMonth.date,
-                        formatOptions,
+                        dateLib.options,
                         dateLib
                       )}
                     </components.CaptionLabel>
@@ -406,7 +398,7 @@ export function DayPicker(props: DayPickerProps) {
                   role="grid"
                   aria-multiselectable={mode === "multiple" || mode === "range"}
                   aria-label={
-                    labelGrid(calendarMonth.date, labelOptions, dateLib) ||
+                    labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
                     undefined
                   }
                   className={classNames[UI.MonthGrid]}
@@ -419,7 +411,7 @@ export function DayPicker(props: DayPickerProps) {
                     >
                       {showWeekNumber && (
                         <components.WeekNumberHeader
-                          aria-label={labelWeekNumberHeader(labelOptions)}
+                          aria-label={labelWeekNumberHeader(dateLib.options)}
                           className={classNames[UI.WeekNumberHeader]}
                           style={styles?.[UI.WeekNumberHeader]}
                           scope="col"
@@ -431,7 +423,7 @@ export function DayPicker(props: DayPickerProps) {
                         <components.Weekday
                           aria-label={labelWeekday(
                             weekday,
-                            labelOptions,
+                            dateLib.options,
                             dateLib
                           )}
                           className={classNames[UI.Weekday]}
@@ -439,7 +431,7 @@ export function DayPicker(props: DayPickerProps) {
                           style={styles?.[UI.Weekday]}
                           scope="col"
                         >
-                          {formatWeekdayName(weekday, formatOptions, dateLib)}
+                          {formatWeekdayName(weekday, dateLib.options, dateLib)}
                         </components.Weekday>
                       ))}
                     </components.Weekdays>
@@ -515,7 +507,7 @@ export function DayPicker(props: DayPickerProps) {
                               ? labelGridcell(
                                   date,
                                   modifiers,
-                                  labelOptions,
+                                  dateLib.options,
                                   dateLib
                                 )
                               : undefined;
@@ -555,7 +547,7 @@ export function DayPicker(props: DayPickerProps) {
                                     aria-label={labelDayButton(
                                       date,
                                       modifiers,
-                                      labelOptions,
+                                      dateLib.options,
                                       dateLib
                                     )}
                                     onClick={handleDayClick(day, modifiers)}
@@ -571,10 +563,10 @@ export function DayPicker(props: DayPickerProps) {
                                       modifiers
                                     )}
                                   >
-                                    {formatDay(date, formatOptions, dateLib)}
+                                    {formatDay(date, dateLib.options, dateLib)}
                                   </components.DayButton>
                                 ) : (
-                                  formatDay(day.date, formatOptions, dateLib)
+                                  formatDay(day.date, dateLib.options, dateLib)
                                 )}
                               </components.Day>
                             );

package/src/classes/CalendarDay.ts

@@ -1,5 +1,4 @@
-import type { DateLib } from "../lib/index.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { type DateLib, defaultDateLib } from "./DateLib.js";
 
 /**
  * Represent the day displayed in the calendar.
@@ -12,7 +11,6 @@ export class CalendarDay {
   constructor(
     date: Date,
     displayMonth: Date,
-    /** @ignore */
     dateLib: DateLib = defaultDateLib
   ) {
     this.date = date;