react-day-picker 9.0.4 → 9.0.6

package/examples/RangeMinMax.test.tsx

@@ -8,6 +8,11 @@ import { user } from "@/test/user";
 
 import { RangeMinMax } from "./RangeMinMax";
 
+const today = new Date(2022, 8, 12);
+
+beforeAll(() => jest.setSystemTime(today));
+afterAll(() => jest.useRealTimers());
+
 beforeEach(() => render(<RangeMinMax />));
 
 describe("when a day is clicked", () => {
@@ -18,22 +23,6 @@ describe("when a day is clicked", () => {
   test("should be selected", () => {
     expect(gridcell(firstDay, true)).toHaveAttribute("aria-selected", "true");
   });
-  describe("when the day before min is clicked", () => {
-    const dayAfter = addDays(firstDay, 1);
-    beforeEach(async () => {
-      await user.click(dateButton(dayAfter));
-    });
-    test("the first day should not be selected", () => {
-      expect(gridcell(firstDay, true)).not.toHaveAttribute(
-        "aria-selected",
-        "true"
-      );
-    });
-    test("the day after should be selected", () => {
-      expect(gridcell(dayAfter, true)).toHaveAttribute("aria-selected", "true");
-    });
-  });
-
   describe("when the day after min is clicked", () => {
     const dayAfter = addDays(firstDay, 4);
     beforeEach(async () => {

package/examples/RangeMinMax.tsx

@@ -9,20 +9,19 @@ export function RangeMinMax() {
   let footer = `Please pick the first day.`;
   if (range?.from) {
     if (!range.to) {
-      footer = format(range.from, "PPP");
+      footer = `${format(range.from, "PPP")}—`;
     } else if (range.to) {
-      footer = `${format(range.from, "PPP")}–${format(range.to, "PPP")}`;
+      footer = `${format(range.from, "PPP")}—${format(range.to, "PPP")}`;
     }
   }
 
   return (
     <div>
-      <p>Select a range between 3 and 9 days.</p>
+      <p>Select up to 6 nights.</p>
       <DayPicker
-        defaultMonth={new Date(2022, 8)}
         mode="range"
-        min={3}
-        max={9}
+        min={1}
+        max={6}
         selected={range}
         onSelect={setRange}
         footer={footer}

package/examples/RangeRequired.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+
+import { addDays, format, startOfMonth } from "date-fns";
+import { DateRange, DayPicker } from "react-day-picker";
+
+export function RangeRequired() {
+  const [range, setRange] = useState<DateRange>({
+    from: startOfMonth(new Date()),
+    to: addDays(startOfMonth(new Date()), 4)
+  });
+
+  let footer = `Please pick the first day.`;
+  if (range?.from) {
+    if (!range.to) {
+      footer = `${format(range.from, "PPP")}—`;
+    } else if (range.to) {
+      footer = `${format(range.from, "PPP")}—${format(range.to, "PPP")}`;
+    }
+  }
+
+  return (
+    <DayPicker
+      mode="range"
+      required
+      selected={range}
+      onSelect={setRange}
+      footer={footer}
+    />
+  );
+}

package/examples/RangeShiftKey.tsx

@@ -13,9 +13,7 @@ function DayWithShiftKey(props: DayButtonProps) {
 
   const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
     const requireShiftKey =
-      selected?.from &&
-      !selected.to &&
-      !isSameDay(props.day.date, selected.from);
+      selected?.from && !isSameDay(props.day.date, selected.from);
 
     if (!e.shiftKey && requireShiftKey) {
       return;

package/examples/__snapshots__/Range.test.tsx.snap

@@ -136,7 +136,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-05-31"
+                data-hidden="true"
                 data-month="2020-05"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -343,6 +345,7 @@ exports[`should match the snapshot 1`] = `
                 aria-selected="true"
                 class="rdp-day rdp-range_start rdp-selected"
                 data-day="2020-06-15"
+                data-selected="true"
                 role="gridcell"
               >
                 <button
@@ -357,6 +360,7 @@ exports[`should match the snapshot 1`] = `
                 aria-selected="true"
                 class="rdp-day rdp-range_middle rdp-selected"
                 data-day="2020-06-16"
+                data-selected="true"
                 role="gridcell"
               >
                 <button
@@ -371,6 +375,7 @@ exports[`should match the snapshot 1`] = `
                 aria-selected="true"
                 class="rdp-day rdp-range_middle rdp-selected"
                 data-day="2020-06-17"
+                data-selected="true"
                 role="gridcell"
               >
                 <button
@@ -385,6 +390,7 @@ exports[`should match the snapshot 1`] = `
                 aria-selected="true"
                 class="rdp-day rdp-range_middle rdp-selected"
                 data-day="2020-06-18"
+                data-selected="true"
                 role="gridcell"
               >
                 <button
@@ -399,6 +405,7 @@ exports[`should match the snapshot 1`] = `
                 aria-selected="true"
                 class="rdp-day rdp-range_end rdp-selected"
                 data-day="2020-06-19"
+                data-selected="true"
                 role="gridcell"
               >
                 <button
@@ -566,7 +573,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-01"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -581,7 +590,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-02"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -596,7 +607,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-03"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -611,7 +624,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-04"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -774,7 +789,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-05-31"
+                data-hidden="true"
                 data-month="2020-05"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -1006,6 +1023,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               <td
                 class="rdp-day rdp-focused"
                 data-day="2020-06-17"
+                data-focused="true"
                 role="gridcell"
               >
                 <button
@@ -1199,7 +1217,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-01"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -1214,7 +1234,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-02"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -1229,7 +1251,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-03"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -1244,7 +1268,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-04"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button

package/examples/__snapshots__/StylingCssModules.test.tsx.snap

@@ -137,7 +137,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-10-31"
+                data-hidden="true"
                 data-month="2021-10"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -478,6 +480,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day rdp-today"
                 data-day="2021-11-25"
+                data-today="true"
                 role="gridcell"
               >
                 <button
@@ -562,7 +565,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-01"
+                data-hidden="true"
                 data-month="2021-12"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -577,7 +582,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-02"
+                data-hidden="true"
                 data-month="2021-12"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -592,7 +599,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-03"
+                data-hidden="true"
                 data-month="2021-12"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -607,7 +616,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-04"
+                data-hidden="true"
                 data-month="2021-12"
+                data-outside="true"
                 role="gridcell"
               >
                 <button

package/examples/index.ts

@@ -38,6 +38,7 @@ export * from "./ModifiersStyle";
 export * from "./ModifiersToday";
 export * from "./Multiple";
 export * from "./MultipleMinMax";
+export * from "./MultipleRequired";
 export * from "./MultipleMonths";
 export * from "./MultipleMonthsPaged";
 export * from "./NumberingSystem";
@@ -45,6 +46,7 @@ export * from "./OutsideDays";
 export * from "./Range";
 export * from "./RangeExcludeDisabled";
 export * from "./RangeMinMax";
+export * from "./RangeRequired";
 export * from "./RangeShiftKey";
 export * from "./Rtl";
 export * from "./Single";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "9.0.4",
+  "version": "9.0.6",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",
@@ -113,7 +113,7 @@
   "scripts": {
     "prepublish": "pnpm build",
     "build": "pnpm build:cjs && pnpm build:esm && pnpm build:css",
-    "build:cjs": "tsc --project tsconfig-cjs.json",
+    "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 ./src/style.css ./src/style.module.css",
     "lint": "eslint .",
@@ -136,16 +136,16 @@
     "@date-fns/utc": "^1.2.0",
     "@jest/types": "^29.6.3",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.10",
+    "@types/node": "^22.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.16.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "date-fns": "^3.6.0",
     "date-fns-jalali": "3.6.0-1",
     "eslint": "^8.57.0",
@@ -169,7 +169,7 @@
     "ts-jest": "^29.2.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.3",
-    "typescript": "~5.5.3",
+    "typescript": "~5.5.4",
     "typescript-css-modules": "^1.0.4"
   },
   "peerDependencies": {

package/src/DayPicker.tsx

@@ -531,12 +531,6 @@ export function DayPicker(props: DayPickerProps) {
                                 )
                               : undefined;
 
-                            const dataAttributes = {
-                              "data-day": dateLib.format(date, "yyyy-MM-dd"),
-                              "data-month": day.outside
-                                ? dateLib.format(date, "yyyy-MM")
-                                : undefined
-                            };
                             return (
                               <components.Day
                                 key={`${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`}
@@ -548,7 +542,18 @@ export function DayPicker(props: DayPickerProps) {
                                 aria-hidden={modifiers.hidden || undefined}
                                 aria-selected={modifiers.selected || undefined}
                                 aria-label={ariaLabel}
-                                {...dataAttributes}
+                                data-day={dateLib.format(date, "yyyy-MM-dd")}
+                                data-month={
+                                  day.outside
+                                    ? dateLib.format(date, "yyyy-MM")
+                                    : 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}
                               >
                                 {isInteractive ? (
                                   <components.DayButton

package/src/selection/useRange.test.tsx

@@ -90,7 +90,7 @@ describe("useRange", () => {
 
     expect(result.current.selected).toEqual({
       from: new Date(2023, 6, 10),
-      to: undefined
+      to: new Date(2023, 6, 10)
     });
   });
 
@@ -135,7 +135,7 @@ describe("useRange", () => {
 
     expect(result.current.selected).toEqual({
       from: new Date(2023, 6, 10),
-      to: undefined
+      to: new Date(2023, 6, 10)
     });
   });
 });

package/src/selection/useRange.tsx

@@ -24,7 +24,6 @@ export function useRange<T extends DayPickerProps>(
     onSelect
   } = props as PropsRange;
 
-  const { differenceInCalendarDays } = dateLib;
   const [selected, setSelected] = React.useState<DateRange | undefined>(
     initiallySelected
   );
@@ -49,32 +48,10 @@ export function useRange<T extends DayPickerProps>(
     modifiers: Modifiers,
     e: React.MouseEvent | React.KeyboardEvent
   ) => {
+    const { min, max } = props as PropsRange;
     const newRange = triggerDate
-      ? addToRange(triggerDate, selected, dateLib)
+      ? addToRange(triggerDate, selected, min, max, required, dateLib)
       : undefined;
-    const { min, max } = props as PropsRange;
-
-    if (min) {
-      if (
-        newRange?.from &&
-        newRange.to &&
-        differenceInCalendarDays(newRange.to, newRange.from) < min - 1
-      ) {
-        newRange.from = triggerDate;
-        newRange.to = undefined;
-      }
-    }
-
-    if (max) {
-      if (
-        newRange?.from &&
-        newRange.to &&
-        differenceInCalendarDays(newRange.to, newRange.from) >= max
-      ) {
-        newRange.from = triggerDate;
-        newRange.to = undefined;
-      }
-    }
 
     if (newRange?.from && newRange.to) {
       let newDate = newRange.from;
@@ -85,6 +62,7 @@ export function useRange<T extends DayPickerProps>(
           disabled &&
           dateMatchModifiers(newDate, disabled, dateLib)
         ) {
+          // if a disabled days is found, the range is reset
           newRange.from = triggerDate;
           newRange.to = undefined;
           break;

package/src/style.css

@@ -49,7 +49,8 @@
   --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
   --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
   --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
-  
+  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
+
   --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
   --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
   --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
@@ -207,6 +208,10 @@
   max-width: fit-content;
 }
 
+.rdp-month_grid {
+  border-collapse: collapse;
+}
+
 .rdp-nav {
   position: absolute;
   inset-block-start: 0;
@@ -233,10 +238,7 @@
   width: var(--rdp-week_number-width);
   border: var(--rdp-week_number-border);
   border-radius: var(--rdp-week_number-border-radius);
-}
-
-.rdp-week_number_interactive {
-  cursor: pointer;
+  text-align: var(--rdp-weeknumber-text-align);
 }
 
 /* DAY MODIFIERS */
@@ -296,6 +298,10 @@
   background-color: var(--rdp-range_end-date-background-color);
 }
 
+.rdp-range_start.rdp-range_end {
+  background: revert;
+}
+
 .rdp-focusable {
   cursor: pointer;
 }

package/src/style.module.css

@@ -49,7 +49,8 @@
   --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
   --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
   --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
-  
+  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
+
   --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
   --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
   --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
@@ -207,6 +208,10 @@
   max-width: fit-content;
 }
 
+.month_grid {
+  border-collapse: collapse;
+}
+
 .nav {
   position: absolute;
   inset-block-start: 0;
@@ -233,10 +238,7 @@
   width: var(--rdp-week_number-width);
   border: var(--rdp-week_number-border);
   border-radius: var(--rdp-week_number-border-radius);
-}
-
-.week_number_interactive {
-  cursor: pointer;
+  text-align: var(--rdp-weeknumber-text-align);
 }
 
 /* DAY MODIFIERS */
@@ -262,7 +264,7 @@
 
 .hidden {
   visibility: hidden;
-  color: var(end-range_start-color);
+  color: var(--rdp-range_start-color);
 }
 
 .range_start {
@@ -296,6 +298,10 @@
   background-color: var(--rdp-range_end-date-background-color);
 }
 
+.range_start.range_end {
+  background: revert;
+}
+
 .focusable {
   cursor: pointer;
 }