react-day-picker 9.0.4 → 9.0.5

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;
 }

package/src/utils/addToRange.test.ts

@@ -1,119 +1,117 @@
-import { addDays, subDays } from "date-fns";
+import { addToRange } from "./addToRange";
 
-import type { DateRange } from "../types";
+describe("addToRange", () => {
+  test("add a date to an undefined range", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, undefined);
+    expect(range).toEqual({ from: date, to: date });
+  });
 
-import { addToRange } from "./addToRange";
+  test("add a date to an empty range", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, { from: undefined, to: undefined });
+    expect(range).toEqual({ from: date, to: date });
+  });
 
-describe('when no "from" is the range', () => {
-  const range = { from: undefined };
-  const day = new Date();
-  let result: DateRange | undefined;
-  beforeAll(() => {
-    result = addToRange(day, range);
+  test("add a date to an incomplete range with same start date", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, { from: date, to: undefined });
+    expect(range).toEqual(undefined);
   });
-  test('should set "from" as the given day', () => {
-    expect(result).toEqual({ from: day, to: undefined });
+
+  test("add a date to an incomplete range with earlier date", () => {
+    const from = new Date(2022, 0, 1);
+    const earlierDate = new Date(2021, 11, 31);
+    const range = addToRange(earlierDate, { from: from, to: undefined });
+    expect(range).toEqual({ from: earlierDate, to: from });
   });
-});
 
-describe('when no "to" is the range', () => {
-  const day = new Date();
-  const range = { from: day, to: undefined };
-  describe('and the day is the same as the "from" day', () => {
-    let result: DateRange | undefined;
-    beforeAll(() => {
-      result = addToRange(day, range);
-    });
-    test("should reset the range", () => {
-      expect(result).toEqual({ from: undefined, to: undefined });
-    });
-  });
-  describe('and the day is before "from" day', () => {
-    const day = subDays(range.from, 1);
-    let result: DateRange | undefined;
-    beforeAll(() => {
-      result = addToRange(day, range);
-    });
-    test('should set the day as the "from" range', () => {
-      expect(result).toEqual({ from: day, to: range.from });
-    });
-  });
-  describe('and the day is after the "from" day', () => {
-    const day = addDays(range.from, 1);
-    let result: DateRange | undefined;
-    beforeAll(() => {
-      result = addToRange(day, range);
-    });
-    test('should set the day as the "to" date', () => {
-      expect(result).toEqual({ from: range.from, to: day });
-    });
+  test("add a date to an incomplete range with later date", () => {
+    const from = new Date(2022, 0, 1);
+    const date = new Date(2022, 0, 2);
+    const range = addToRange(date, { from: from, to: undefined });
+    expect(range).toEqual({ from: from, to: date });
   });
-});
 
-describe('when "from", "to" and "day" are the same', () => {
-  const day = new Date();
-  const range = { from: day, to: day };
-  let result: DateRange | undefined;
-  beforeAll(() => {
-    result = addToRange(day, range);
+  test("add a date to a complete range with same start and end date", () => {
+    const date = new Date(2022, 0, 1);
+    const from = date;
+    const to = date;
+    const range = addToRange(date, { from, to }, 0, 0, false);
+    expect(range).toEqual(undefined);
   });
-  test("should return an undefined range (reset)", () => {
-    expect(result).toEqual({ from: undefined, to: undefined });
+
+  test("add a date to a complete range with same start date", () => {
+    const date = new Date(2022, 0, 1);
+    const to = new Date(2022, 0, 2);
+    const range = addToRange(date, { from: date, to: to });
+    expect(range).toEqual({ from: date, to: date });
   });
-});
 
-describe('when "to" and "day" are the same', () => {
-  const from = new Date();
-  const to = addDays(from, 4);
-  const day = to;
-  const range = { from, to };
-  let result: DateRange | undefined;
-  beforeAll(() => {
-    result = addToRange(day, range);
+  test("add a date to a complete range with same end date", () => {
+    const date = new Date(2022, 0, 2);
+    const from = new Date(2022, 0, 1);
+    const range = addToRange(date, { from: from, to: date });
+    expect(range).toEqual({ from: date, to: date });
   });
-  test('should set "to" to undefined', () => {
-    expect(result).toEqual({ from: to, to: undefined });
+
+  test("add a date when inside the range", () => {
+    const date = new Date(2022, 0, 1);
+    const from = new Date(2021, 11, 31);
+    const to = new Date(2022, 0, 2);
+    const range = addToRange(date, { from, to });
+    expect(range).toEqual({ from, to: date });
   });
-});
 
-describe('when "from" and "day" are the same', () => {
-  const from = new Date();
-  const to = addDays(from, 4);
-  const day = from;
-  const range = { from, to };
-  let result: DateRange | undefined;
-  beforeAll(() => {
-    result = addToRange(day, range);
+  test("add an earlier date to a complete range", () => {
+    const from = new Date(2022, 0, 1);
+    const to = new Date(2022, 0, 2);
+    const date = new Date(2021, 11, 31);
+    const range = addToRange(date, { from, to });
+    expect(range).toEqual({ from: date, to: to });
   });
-  test("should reset the range", () => {
-    expect(result).toEqual({ from: undefined, to: undefined });
+
+  test("add a later date to a complete range", () => {
+    const date = new Date(2022, 0, 2);
+    const from = new Date(2021, 11, 31);
+    const to = new Date(2022, 0, 1);
+    const range = addToRange(date, { from, to });
+    expect(range).toEqual({ from: from, to: date });
   });
-});
 
-describe('when "from" is after "day"', () => {
-  const day = new Date();
-  const from = addDays(day, 1);
-  const to = addDays(from, 4);
-  const range = { from, to };
-  let result: DateRange | undefined;
-  beforeAll(() => {
-    result = addToRange(day, range);
+  test("add a date with min > 0", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, undefined, 1, 0, false);
+    expect(range).toEqual({ from: date, to: undefined });
   });
-  test('should set the day as "from"', () => {
-    expect(result).toEqual({ from: day, to: range.to });
+
+  test("add a date with max > 0", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, undefined, 0, 1, false);
+    expect(range).toEqual({ from: date, to: date });
+  });
+
+  test("add a date with required set to true", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, undefined, 0, 0, true);
+    expect(range).toEqual({ from: date, to: date });
+  });
+
+  test("when exceeding max, set the start of the range", () => {
+    const from = new Date(2022, 0, 1);
+    const to = new Date(2022, 0, 2);
+    const date = new Date(2022, 0, 4);
+    const max = 2;
+    const range = addToRange(date, { from, to }, 0, max, false);
+    expect(range).toEqual({ from: date, to: undefined });
   });
-});
 
-describe('when "from" is before "day"', () => {
-  const day = new Date();
-  const from = subDays(day, 1);
-  const to = addDays(from, 4);
-  const range = { from, to };
-  let result: DateRange | undefined;
-  beforeAll(() => {
-    result = addToRange(day, range);
-  });
-  test('should set the day as "to"', () => {
-    expect(result).toEqual({ from: range.from, to: day });
+  test("when below min, set the start of the range", () => {
+    const from = new Date(2021, 11, 20);
+    const to = new Date(2022, 0, 2);
+    const date = new Date(2021, 11, 21);
+    const min = 5;
+    const range = addToRange(date, { from, to }, min, 0, false);
+    expect(range).toEqual({ from: date, to: undefined });
   });
 });

package/src/utils/addToRange.ts

@@ -10,42 +10,78 @@ import type { DateRange, DateLib } from "../types/index.js";
  * @group Utilities
  */
 export function addToRange(
+  /** The date to add to the range. */
   date: Date,
-  range: DateRange | undefined,
+  /** The range where to add `date`. */
+  initialRange: DateRange | undefined,
+  min = 0,
+  max = 0,
+  required = false,
   /** @ignore */
   dateLib: DateLib = defaultDateLib
-): DateRange {
-  const { from, to } = range || {};
+): DateRange | undefined {
+  const { from, to } = initialRange || {};
   const { isSameDay, isAfter, isBefore } = dateLib;
-  if (from && to) {
-    if (isSameDay(to, date) && isSameDay(from, date)) {
-      return { from: undefined, to: undefined };
-    }
-    if (isSameDay(to, date)) {
-      return { from: to, to: undefined };
-    }
+
+  let range: DateRange | undefined;
+
+  if (!from && !to) {
+    // the range is empty, add the date
+    range = { from: date, to: min > 0 ? undefined : date };
+  } else if (from && !to) {
+    // adding date to an incomplete range
     if (isSameDay(from, date)) {
-      return { from: undefined, to: undefined };
+      // adding a date equal to the start of the range
+      if (required) {
+        range = { from, to: undefined };
+      } else {
+        range = undefined;
+      }
+    } else if (isBefore(date, from)) {
+      // adding a date before the start of the range
+      range = { from: date, to: from };
+    } else {
+      // adding a date after the start of the range
+      range = { from, to: date };
     }
-    if (isAfter(from, date)) {
-      return { from: date, to };
+  } else if (from && to) {
+    // adding date to a complete range
+    if (isSameDay(from, date) && isSameDay(to, date)) {
+      // adding a date that is equal to both start and end of the range
+      if (required) {
+        range = { from, to };
+      } else {
+        range = undefined;
+      }
+    } else if (isSameDay(from, date)) {
+      // adding a date equal to the the start of the range
+      range = { from, to: min > 0 ? undefined : date };
+    } else if (isSameDay(to, date)) {
+      // adding a dare equal to the end of the range
+      range = { from: date, to: min > 0 ? undefined : date };
+    } else if (isBefore(date, from)) {
+      // adding a date before the start of the range
+      range = { from: date, to: to };
+    } else if (isAfter(date, from)) {
+      // adding a date after the start of the range
+      range = { from, to: date };
+    } else if (isAfter(date, to)) {
+      // adding a date after the end of the range
+      range = { from, to: date };
+    } else {
+      throw new Error("Invalid range");
     }
-    return { from, to: date };
   }
-  if (to) {
-    if (isAfter(date, to)) {
-      return { from: to, to: date };
-    }
-    return { from: date, to };
-  }
-  if (from) {
-    if (isBefore(date, from)) {
-      return { from: date, to: from };
-    }
-    if (isSameDay(date, from)) {
-      return { from: undefined, to: undefined };
+
+  // check for min / max
+  if (range?.from && range?.to) {
+    const diff = dateLib.differenceInCalendarDays(range.to, range.from);
+    if (max > 0 && diff > max) {
+      range = { from: date, to: undefined };
+    } else if (min > 1 && diff < min) {
+      range = { from: date, to: undefined };
     }
-    return { from, to: date };
   }
-  return { from: date, to: undefined };
+
+  return range;
 }

package/website/docs/docs/selection-modes.mdx

@@ -40,23 +40,13 @@ When the `mode` prop is set to `"single"`, only one day can be selected.
 | `onSelect` | `(selected, triggerDate, modifiers, e) => void` | Event callback when a date is selected. |
 | `required` | `boolean`                                       | Make the selection required.            |
 
-The following code snippet will render a date picker with a single selected date. When a day is clicked, the `selectedDate` state is updated.
+Use the `selected` and `onSelect` props to control the selected date:
 
 ```tsx
-import { useState } from "react";
-
-import { DayPicker } from "react-day-picker";
-
 export function App() {
-  const initiallySelectedDate = new Date();
-  const [selectedDate, setSelectedDate] = useState(initiallySelectedDate);
-  return (
-    <DayPicker
-      mode="single"
-      selected={selectedDate}
-      onSelect={setSelectedDate}
-    />
-  );
+  const [selected, setSelected] = React.useState<Date | undefined>();
+
+  return <DayPicker mode="single" selected={selected} onSelect={setSelected} />;
 }
 ```
 
@@ -93,103 +83,89 @@ By setting the `mode` prop to `"multiple"`, DayPicker allows selecting multiple
 | `min`      | `number`                                        | The minimum dates that can be selected. |
 | `max`      | `number`                                        | The maximum dates that can be selected. |
 
-### Min and Max Dates
-
-Use the `min` and `max` props to limit the number of selectable dates.
+Use the `selected` and `onSelect` props to control the selected date:
 
 ```tsx
-import { addDays } from "date-fns";
-import { DayPicker } from "react-day-picker";
+export function App() {
+  const [selected, setSelected] = React.useState<Date[] | undefined>();
 
-export function MultipleMinMax() {
-  const defaultSelected = [new Date(), addDays(new Date(), 1)];
   return (
-    <DayPicker
-      defaultSelected={defaultSelected}
-      mode="multiple"
-      min={2}
-      max={5}
-    />
+    <DayPicker mode="multiple" selected={selected} onSelect={setSelected} />
   );
 }
 ```
 
+### Min and Max Dates
+
+Use the `min` and `max` props to limit the number of selectable dates.
+
+```tsx
+<DayPicker mode="multiple" min={2} max={5} />
+```
+
 <BrowserWindow>
   <Examples.MultipleMinMax />
 </BrowserWindow>
 
-## Range Mode
+### Required Selection
 
-When the `mode` prop is set to `"range"`, DayPicker allows selecting a continuous range of dates.
+By setting the `required` prop, DayPicker requires at least one date to be selected.
 
 ```tsx
-<DayPicker mode="range" />
+<DayPicker mode="multiple" required selected={[new Date()]} />
 ```
 
-| Prop Name  | Type                                            | Description                             |
-| ---------- | ----------------------------------------------- | --------------------------------------- |
-| `selected` | [`DateRange`](../api/type-aliases/DateRange.md) | The selected range.                     |
-| `onSelect` | `(selected, triggerDate, modifiers, e) => void` | Event callback when a date is selected. |
-| `min`      | `number`                                        | The minimum dates that can be selected. |
-| `max`      | `number`                                        | The maximum dates that can be selected. |
-
-```tsx
-import { addDays, format } from "date-fns";
-import { DateRange, DayPicker } from "react-day-picker";
+<BrowserWindow>
+  <Examples.MultipleRequired />
+</BrowserWindow>
 
-export function RangeExample() {
-  const defaultMonth = new Date(2020, 5, 15);
+## Range Mode
 
-  const defaultSelected: DateRange = {
-    from: defaultMonth,
-    to: addDays(defaultMonth, 4)
-  };
-  const [range, setRange] = React.useState<DateRange | undefined>(
-    defaultSelected
-  );
+When the `mode` prop is set to `"range"`, DayPicker allows selecting a continuous range of dates.
 
-  return (
-    <DayPicker
-      mode="range"
-      defaultMonth={defaultMonth}
-      selected={range}
-      onSelect={setRange}
-    />
-  );
-}
+```tsx
+<DayPicker mode="range" />
 ```
 
 <BrowserWindow>
   <Examples.Range />
 </BrowserWindow>
 
+### Range Mode Props
+
+| Prop Name         | Type                                            | Description                             |
+| ----------------- | ----------------------------------------------- | --------------------------------------- |
+| `selected`        | [`DateRange`](../api/type-aliases/DateRange.md) | The selected range.                     |
+| `onSelect`        | `(selected, triggerDate, modifiers, e) => void` | Event callback when a date is selected. |
+| `required`        | `boolean`                                       | Make the selection required.            |
+| `min`             | `number`                                        | The minimum dates that can be selected. |
+| `max`             | `number`                                        | The maximum dates that can be selected. |
+| `excludeDisabled` | `boolean`                                       | Exclude disabled dates from the range.  |
+
 ### Min and Max Dates
 
-Also in range mode, you can set the `min` and `max` props to limit the number of selectable dates.
+As default, a range can have length of 0 nights, thus the start date can be the same as the end date. Use the `min` prop to set the minimum number of nights. The range will stay "open" until at least `min` nights are selected.
+
+Similarly, you can se the `max` prop to set the maximum number of nights.
 
 ```tsx
-import { useState } from "react";
+<DayPicker mode="range" min={1} max={6} />
+```
 
-import { DateRange, DayPicker } from "react-day-picker";
+<BrowserWindow bodyStyle={{ justifyContent: "start" }}>
+  <Examples.RangeMinMax />
+</BrowserWindow>
 
-export function RangeMinMax() {
-  const [range, setRange] = useState<DateRange | undefined>();
+### Required Ranges
 
-  return (
-    <DayPicker
-      defaultMonth={new Date(2022, 8)}
-      mode="range"
-      min={3}
-      max={9}
-      selected={range}
-      onSelect={setRange}
-    />
-  );
-}
+By setting the `required` prop, a range must be selected. 
+
+```tsx
+<DayPicker mode="range" required />
 ```
 
 <BrowserWindow>
-  <Examples.RangeMinMax />
+  <Examples.RangeRequired />
 </BrowserWindow>
 
 ## Disabling Dates