react-day-picker 9.0.1 → 9.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/selection/useRange.js +8 -2
  2. package/dist/cjs/selection/useRange.js.map +1 -1
  3. package/dist/cjs/types/props.d.ts +12 -0
  4. package/dist/esm/selection/useRange.js +8 -2
  5. package/dist/esm/selection/useRange.js.map +1 -1
  6. package/dist/esm/types/props.d.ts +12 -0
  7. package/examples/ModifiersDisabled.test.tsx +10 -3
  8. package/examples/ModifiersDisabled.tsx +1 -7
  9. package/examples/RangeExcludeDisabled.tsx +9 -0
  10. package/examples/index.ts +1 -0
  11. package/package.json +5 -5
  12. package/src/selection/useRange.test.tsx +141 -0
  13. package/src/selection/useRange.tsx +11 -1
  14. package/src/style.css +1 -27
  15. package/src/style.module.css +1 -27
  16. package/src/types/props.ts +12 -0
  17. package/website/docs/docs/selection-modes.mdx +24 -3
  18. package/website/docs/upgrading.mdx +13 -13
package/dist/cjs/selection/useRange.js CHANGED
@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
8
8
  const index_js_1 = require("../utils/index.js");
9
9
  const rangeIncludesDate_js_1 = require("../utils/rangeIncludesDate.js");
10
10
  function useRange(props, dateLib) {
11
- const { mode, disabled, selected: initiallySelected, required, onSelect } = props;
11
+ const { mode, disabled, excludeDisabled, selected: initiallySelected, required, onSelect } = props;
12
12
  const { differenceInCalendarDays } = dateLib;
13
13
  const [selected, setSelected] = react_1.default.useState(initiallySelected);
14
14
  // Update the selected date if the required flag is set.
@@ -17,6 +17,10 @@ function useRange(props, dateLib) {
17
17
  setSelected({ from: undefined, to: undefined });
18
18
  }
19
19
  }, [required, selected, mode]);
20
+ // Update the selected date if the `selected` prop changes.
21
+ react_1.default.useEffect(() => {
22
+ setSelected(initiallySelected);
23
+ }, [initiallySelected]);
20
24
  const isSelected = (date) => selected && (0, rangeIncludesDate_js_1.rangeIncludesDate)(selected, date, false, dateLib);
21
25
  const select = (triggerDate, modifiers, e) => {
22
26
  const newRange = triggerDate
@@ -43,7 +47,9 @@ function useRange(props, dateLib) {
43
47
  let newDate = newRange.from;
44
48
  while (dateLib.differenceInCalendarDays(newRange.to, newDate) > 0) {
45
49
  newDate = dateLib.addDays(newDate, 1);
46
- if (disabled && (0, index_js_1.dateMatchModifiers)(newDate, disabled, dateLib)) {
50
+ if (excludeDisabled &&
51
+ disabled &&
52
+ (0, index_js_1.dateMatchModifiers)(newDate, disabled, dateLib)) {
47
53
  newRange.from = triggerDate;
48
54
  newRange.to = undefined;
49
55
  break;
package/dist/cjs/selection/useRange.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useRange.js","sourceRoot":"","sources":["../../../src/selection/useRange.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useRange.js","sourceRoot":"","sources":["../../../src/selection/useRange.tsx"],"names":[],"mappings":"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"}
package/dist/cjs/types/props.d.ts CHANGED
@@ -492,6 +492,12 @@ export interface PropsRangeRequired {
492
492
  mode: "range";
493
493
  required: true;
494
494
  disabled?: Matcher | Matcher[] | undefined;
495
+ /**
496
+ * When `true`, the range will reset when including a disabled day.
497
+ *
498
+ * @since V9.0.2
499
+ */
500
+ excludeDisabled?: boolean | undefined;
495
501
  /** The selected range. */
496
502
  selected: DateRange;
497
503
  /** Event handler when a range is selected. */
@@ -510,6 +516,12 @@ export interface PropsRange {
510
516
  mode: "range";
511
517
  required?: false | undefined;
512
518
  disabled?: Matcher | Matcher[] | undefined;
519
+ /**
520
+ * When `true`, the range will reset when including a disabled day.
521
+ *
522
+ * @since V9.0.2
523
+ */
524
+ excludeDisabled?: boolean | undefined;
513
525
  /** The selected range. */
514
526
  selected?: DateRange | undefined;
515
527
  /** Event handler when the selection changes. */
package/dist/esm/selection/useRange.js CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { addToRange, dateMatchModifiers } from "../utils/index.js";
3
3
  import { rangeIncludesDate } from "../utils/rangeIncludesDate.js";
4
4
  export function useRange(props, dateLib) {
5
- const { mode, disabled, selected: initiallySelected, required, onSelect } = props;
5
+ const { mode, disabled, excludeDisabled, selected: initiallySelected, required, onSelect } = props;
6
6
  const { differenceInCalendarDays } = dateLib;
7
7
  const [selected, setSelected] = React.useState(initiallySelected);
8
8
  // Update the selected date if the required flag is set.
@@ -11,6 +11,10 @@ export function useRange(props, dateLib) {
11
11
  setSelected({ from: undefined, to: undefined });
12
12
  }
13
13
  }, [required, selected, mode]);
14
+ // Update the selected date if the `selected` prop changes.
15
+ React.useEffect(() => {
16
+ setSelected(initiallySelected);
17
+ }, [initiallySelected]);
14
18
  const isSelected = (date) => selected && rangeIncludesDate(selected, date, false, dateLib);
15
19
  const select = (triggerDate, modifiers, e) => {
16
20
  const newRange = triggerDate
@@ -37,7 +41,9 @@ export function useRange(props, dateLib) {
37
41
  let newDate = newRange.from;
38
42
  while (dateLib.differenceInCalendarDays(newRange.to, newDate) > 0) {
39
43
  newDate = dateLib.addDays(newDate, 1);
40
- if (disabled && dateMatchModifiers(newDate, disabled, dateLib)) {
44
+ if (excludeDisabled &&
45
+ disabled &&
46
+ dateMatchModifiers(newDate, disabled, dateLib)) {
41
47
  newRange.from = triggerDate;
42
48
  newRange.to = undefined;
43
49
  break;
package/dist/esm/selection/useRange.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useRange.js","sourceRoot":"","sources":["../../../src/selection/useRange.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useRange.js","sourceRoot":"","sources":["../../../src/selection/useRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,MAAM,UAAU,QAAQ,CACtB,KAAQ,EACR,OAAgB;IAEhB,MAAM,EACJ,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,QAAQ,EAAE,iBAAiB,EAC3B,QAAQ,EACR,QAAQ,EACT,GAAG,KAAmB,CAAC;IAExB,MAAM,EAAE,wBAAwB,EAAE,GAAG,OAAO,CAAC;IAC7C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAC5C,iBAAiB,CAClB,CAAC;IAEF,wDAAwD;IACxD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YACvC,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IAE/B,2DAA2D;IAC3D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,EAAE,CAChC,QAAQ,IAAI,iBAAiB,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;IAEhE,MAAM,MAAM,GAAG,CACb,WAAiB,EACjB,SAAoB,EACpB,CAAyC,EACzC,EAAE;QACF,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,UAAU,CAAC,WAAW,EAAE,QAAQ,EAAE,OAAO,CAAC;YAC5C,CAAC,CAAC,SAAS,CAAC;QACd,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAmB,CAAC;QAEzC,IAAI,GAAG,EAAE,CAAC;YACR,IACE,QAAQ,EAAE,IAAI;gBACd,QAAQ,CAAC,EAAE;gBACX,wBAAwB,CAAC,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,EAC9D,CAAC;gBACD,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC;gBAC5B,QAAQ,CAAC,EAAE,GAAG,SAAS,CAAC;YAC1B,CAAC;QACH,CAAC;QAED,IAAI,GAAG,EAAE,CAAC;YACR,IACE,QAAQ,EAAE,IAAI;gBACd,QAAQ,CAAC,EAAE;gBACX,wBAAwB,CAAC,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,GAAG,EAC3D,CAAC;gBACD,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC;gBAC5B,QAAQ,CAAC,EAAE,GAAG,SAAS,CAAC;YAC1B,CAAC;QACH,CAAC;QAED,IAAI,QAAQ,EAAE,IAAI,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;YAClC,IAAI,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC;YAC5B,OAAO,OAAO,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;gBAClE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;gBACtC,IACE,eAAe;oBACf,QAAQ;oBACR,kBAAkB,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAC9C,CAAC;oBACD,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC;oBAC5B,QAAQ,CAAC,EAAE,GAAG,SAAS,CAAC;oBACxB,MAAM;gBACR,CAAC;YACH,CAAC;QACH,CAAC;QAED,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtB,QAAQ,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;QAEhD,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,MAAM;QACN,UAAU;KACK,CAAC;AACpB,CAAC"}
package/dist/esm/types/props.d.ts CHANGED
@@ -492,6 +492,12 @@ export interface PropsRangeRequired {
492
492
  mode: "range";
493
493
  required: true;
494
494
  disabled?: Matcher | Matcher[] | undefined;
495
+ /**
496
+ * When `true`, the range will reset when including a disabled day.
497
+ *
498
+ * @since V9.0.2
499
+ */
500
+ excludeDisabled?: boolean | undefined;
495
501
  /** The selected range. */
496
502
  selected: DateRange;
497
503
  /** Event handler when a range is selected. */
@@ -510,6 +516,12 @@ export interface PropsRange {
510
516
  mode: "range";
511
517
  required?: false | undefined;
512
518
  disabled?: Matcher | Matcher[] | undefined;
519
+ /**
520
+ * When `true`, the range will reset when including a disabled day.
521
+ *
522
+ * @since V9.0.2
523
+ */
524
+ excludeDisabled?: boolean | undefined;
513
525
  /** The selected range. */
514
526
  selected?: DateRange | undefined;
515
527
  /** Event handler when the selection changes. */
package/examples/ModifiersDisabled.test.tsx CHANGED
@@ -5,13 +5,20 @@ import { render } from "@/test/render";
5
5
 
6
6
  import { ModifiersDisabled } from "./ModifiersDisabled";
7
7
 
8
+ const today = new Date(2024, 6, 22);
9
+
10
+ beforeAll(() => jest.setSystemTime(today));
11
+ afterAll(() => jest.useRealTimers());
12
+
8
13
  const days = [
9
- new Date(2024, 5, 2),
10
- new Date(2024, 5, 9),
11
- new Date(2024, 5, 29)
14
+ new Date(2024, 6, 6),
15
+ new Date(2024, 6, 13),
16
+ new Date(2024, 6, 20),
17
+ new Date(2024, 6, 27)
12
18
  ];
13
19
 
14
20
  test.each(days)("the day %s should be disabled", (day) => {
15
21
  render(<ModifiersDisabled />);
22
+ // return all month's
16
23
  expect(dateButton(day)).toBeDisabled();
17
24
  });
package/examples/ModifiersDisabled.tsx CHANGED
@@ -3,11 +3,5 @@ import React from "react";
3
3
  import { DayPicker } from "react-day-picker";
4
4
 
5
5
  export function ModifiersDisabled() {
6
- return (
7
- <DayPicker
8
- defaultMonth={new Date(2024, 5, 10)}
9
- mode="range"
10
- disabled={{ dayOfWeek: [0, 6] }}
11
- />
12
- );
6
+ return <DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />;
13
7
  }
package/examples/RangeExcludeDisabled.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+
3
+ import { DayPicker } from "react-day-picker";
4
+
5
+ export function RangeExcludeDisabled() {
6
+ return (
7
+ <DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} excludeDisabled />
8
+ );
9
+ }
package/examples/index.ts CHANGED
@@ -43,6 +43,7 @@ export * from "./MultipleMonthsPaged";
43
43
  export * from "./NumberingSystem";
44
44
  export * from "./OutsideDays";
45
45
  export * from "./Range";
46
+ export * from "./RangeExcludeDisabled";
46
47
  export * from "./RangeMinMax";
47
48
  export * from "./RangeShiftKey";
48
49
  export * from "./Rtl";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-day-picker",
3
- "version": "9.0.1",
3
+ "version": "9.0.3",
4
4
  "description": "Customizable Date Picker for React",
5
5
  "author": "Giampaolo Bellavite <io@gpbl.dev>",
6
6
  "homepage": "https://daypicker.dev",
@@ -135,7 +135,7 @@
135
135
  "devDependencies": {
136
136
  "@date-fns/utc": "^1.2.0",
137
137
  "@jest/types": "^29.6.3",
138
- "@testing-library/dom": "^10.3.1",
138
+ "@testing-library/dom": "^10.4.0",
139
139
  "@testing-library/jest-dom": "^6.4.5",
140
140
  "@testing-library/react": "^16.0.0",
141
141
  "@testing-library/user-event": "^14.5.2",
@@ -153,8 +153,8 @@
153
153
  "eslint-import-resolver-typescript": "^3.6.1",
154
154
  "eslint-plugin-import": "^2.29.1",
155
155
  "eslint-plugin-jest": "^28.6.0",
156
- "eslint-plugin-prettier": "^5.1.3",
157
- "eslint-plugin-react": "^7.34.4",
156
+ "eslint-plugin-prettier": "^5.2.1",
157
+ "eslint-plugin-react": "^7.35.0",
158
158
  "eslint-plugin-react-hooks": "^4.6.2",
159
159
  "eslint-plugin-require-extensions": "^0.1.3",
160
160
  "eslint-plugin-testing-library": "^6.2.2",
@@ -166,7 +166,7 @@
166
166
  "react": "^18.3.1",
167
167
  "react-classnaming": "^0.16.4",
168
168
  "react-dom": "^18.3.1",
169
- "ts-jest": "^29.2.2",
169
+ "ts-jest": "^29.2.3",
170
170
  "ts-node": "^10.9.2",
171
171
  "tslib": "^2.6.3",
172
172
  "typescript": "~5.5.3",
package/src/selection/useRange.test.tsx ADDED
@@ -0,0 +1,141 @@
1
+ /* eslint-disable @typescript-eslint/no-explicit-any */
2
+ import { DateRange, DayPickerProps } from "react-day-picker/types";
3
+
4
+ import { act, renderHook } from "@/test/render";
5
+
6
+ import { dateLib } from "../lib";
7
+
8
+ import { useRange } from "./useRange";
9
+
10
+ describe("useRange", () => {
11
+ test("initialize with initiallySelected date range", () => {
12
+ const initiallySelected = {
13
+ from: new Date(2023, 6, 1),
14
+ to: new Date(2023, 6, 5)
15
+ };
16
+ const { result } = renderHook(() =>
17
+ useRange(
18
+ { mode: "range", selected: initiallySelected, required: false },
19
+ dateLib
20
+ )
21
+ );
22
+
23
+ expect(result.current.selected).toEqual(initiallySelected);
24
+ });
25
+
26
+ test("update the selected range when the initially selected value changes", () => {
27
+ const initiallySelected: DateRange = {
28
+ from: new Date(2023, 6, 1),
29
+ to: new Date(2023, 6, 5)
30
+ };
31
+ const { result, rerender } = renderHook(
32
+ (props) => useRange(props, dateLib),
33
+ {
34
+ initialProps: {
35
+ mode: "range",
36
+ selected: initiallySelected,
37
+ required: false
38
+ } as DayPickerProps
39
+ }
40
+ );
41
+
42
+ rerender({
43
+ mode: "range",
44
+ selected: undefined,
45
+ required: false
46
+ });
47
+
48
+ expect(result.current.selected).toEqual(undefined);
49
+ });
50
+
51
+ test("update the selected range on select", () => {
52
+ const initiallySelected = {
53
+ from: new Date(2023, 6, 1),
54
+ to: new Date(2023, 6, 5)
55
+ };
56
+ const { result } = renderHook(() =>
57
+ useRange(
58
+ { mode: "range", selected: initiallySelected, required: false },
59
+ dateLib
60
+ )
61
+ );
62
+
63
+ act(() => {
64
+ result.current.select?.(new Date(2023, 6, 10), {}, {} as any);
65
+ });
66
+
67
+ expect(result.current.selected).toEqual({
68
+ from: new Date(2023, 6, 1),
69
+ to: new Date(2023, 6, 10)
70
+ });
71
+ });
72
+
73
+ test("reset range if new range exceeds max days", () => {
74
+ const { result } = renderHook(() =>
75
+ useRange(
76
+ {
77
+ mode: "range",
78
+ selected: undefined,
79
+ required: false,
80
+ max: 5
81
+ },
82
+ dateLib
83
+ )
84
+ );
85
+
86
+ act(() => {
87
+ result.current.select?.(new Date(2023, 6, 1), {}, {} as any);
88
+ result.current.select?.(new Date(2023, 6, 10), {}, {} as any);
89
+ });
90
+
91
+ expect(result.current.selected).toEqual({
92
+ from: new Date(2023, 6, 10),
93
+ to: undefined
94
+ });
95
+ });
96
+
97
+ test("reset range if new range is less than min days", () => {
98
+ const { result } = renderHook(() =>
99
+ useRange(
100
+ { mode: "range", selected: undefined, required: false, min: 5 },
101
+ dateLib
102
+ )
103
+ );
104
+
105
+ act(() => {
106
+ result.current.select?.(new Date(2023, 6, 1), {}, {} as any);
107
+ result.current.select?.(new Date(2023, 6, 3), {}, {} as any);
108
+ });
109
+
110
+ expect(result.current.selected).toEqual({
111
+ from: new Date(2023, 6, 3),
112
+ to: undefined
113
+ });
114
+ });
115
+
116
+ test("exclude disabled dates when selecting range", () => {
117
+ const disabled = [{ from: new Date(2023, 6, 5), to: new Date(2023, 6, 7) }];
118
+ const { result } = renderHook(() =>
119
+ useRange(
120
+ {
121
+ mode: "range",
122
+ selected: undefined,
123
+ required: false,
124
+ excludeDisabled: true,
125
+ disabled
126
+ },
127
+ dateLib
128
+ )
129
+ );
130
+
131
+ act(() => {
132
+ result.current.select?.(new Date(2023, 6, 1), {}, {} as any);
133
+ result.current.select?.(new Date(2023, 6, 10), {}, {} as any);
134
+ });
135
+
136
+ expect(result.current.selected).toEqual({
137
+ from: new Date(2023, 6, 10),
138
+ to: undefined
139
+ });
140
+ });
141
+ });
package/src/selection/useRange.tsx CHANGED
@@ -18,6 +18,7 @@ export function useRange<T extends DayPickerProps>(
18
18
  const {
19
19
  mode,
20
20
  disabled,
21
+ excludeDisabled,
21
22
  selected: initiallySelected,
22
23
  required,
23
24
  onSelect
@@ -35,6 +36,11 @@ export function useRange<T extends DayPickerProps>(
35
36
  }
36
37
  }, [required, selected, mode]);
37
38
 
39
+ // Update the selected date if the `selected` prop changes.
40
+ React.useEffect(() => {
41
+ setSelected(initiallySelected);
42
+ }, [initiallySelected]);
43
+
38
44
  const isSelected = (date: Date) =>
39
45
  selected && rangeIncludesDate(selected, date, false, dateLib);
40
46
 
@@ -74,7 +80,11 @@ export function useRange<T extends DayPickerProps>(
74
80
  let newDate = newRange.from;
75
81
  while (dateLib.differenceInCalendarDays(newRange.to, newDate) > 0) {
76
82
  newDate = dateLib.addDays(newDate, 1);
77
- if (disabled && dateMatchModifiers(newDate, disabled, dateLib)) {
83
+ if (
84
+ excludeDisabled &&
85
+ disabled &&
86
+ dateMatchModifiers(newDate, disabled, dateLib)
87
+ ) {
78
88
  newRange.from = triggerDate;
79
89
  newRange.to = undefined;
80
90
  break;
package/src/style.css CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
54
54
  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
55
- --rdp-weekday-padding: 0.5rem 0.75rem; /* THe padding of the weekday. */
55
+ --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
56
56
  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
57
57
 
58
58
  --rdp-gradient-direction: 90deg;
@@ -84,10 +84,6 @@
84
84
  }
85
85
 
86
86
  .rdp-day {
87
- justify-content: center;
88
- align-items: center;
89
- display: flex;
90
-
91
87
  width: var(--rdp-day-width);
92
88
  height: var(--rdp-day-height);
93
89
  font: var(--rdp-day-font);
@@ -222,15 +218,6 @@
222
218
  height: var(--rdp-nav-height);
223
219
  }
224
220
 
225
- .rdp-week {
226
- display: grid;
227
- grid-template-columns: repeat(7, 1fr);
228
- }
229
-
230
- .rdp-root[data-week-numbers="true"] .rdp-week {
231
- grid-template-columns: repeat(8, 1fr);
232
- }
233
-
234
221
  .rdp-weekday {
235
222
  opacity: var(--rdp-weekday-opacity);
236
223
  padding: var(--rdp-weekday-padding);
@@ -239,20 +226,7 @@
239
226
  text-transform: var(--rdp-weekday-text-transform);
240
227
  }
241
228
 
242
- .rdp-weekdays {
243
- display: grid;
244
- grid-template-columns: repeat(7, 1fr);
245
- }
246
-
247
- .rdp-root[data-week-numbers="true"] .rdp-weekdays {
248
- grid-template-columns: repeat(8, 1fr);
249
- }
250
-
251
229
  .rdp-week_number {
252
- justify-content: center;
253
- align-items: center;
254
- display: flex;
255
-
256
230
  opacity: var(--rdp-week_number-opacity);
257
231
  font: var(--rdp-week_number-font);
258
232
  height: var(--rdp-week_number-height);
package/src/style.module.css CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
54
54
  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
55
- --rdp-weekday-padding: 0.5rem 0.75rem; /* THe padding of the weekday. */
55
+ --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
56
56
  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
57
57
 
58
58
  --rdp-gradient-direction: 90deg;
@@ -84,10 +84,6 @@
84
84
  }
85
85
 
86
86
  .day {
87
- justify-content: center;
88
- align-items: center;
89
- display: flex;
90
-
91
87
  width: var(--rdp-day-width);
92
88
  height: var(--rdp-day-height);
93
89
  font: var(--rdp-day-font);
@@ -222,15 +218,6 @@
222
218
  height: var(--rdp-nav-height);
223
219
  }
224
220
 
225
- .week {
226
- display: grid;
227
- grid-template-columns: repeat(7, 1fr);
228
- }
229
-
230
- .root[data-week-numbers="true"] .week {
231
- grid-template-columns: repeat(8, 1fr);
232
- }
233
-
234
221
  .weekday {
235
222
  opacity: var(--rdp-weekday-opacity);
236
223
  padding: var(--rdp-weekday-padding);
@@ -239,20 +226,7 @@
239
226
  text-transform: var(--rdp-weekday-text-transform);
240
227
  }
241
228
 
242
- .weekdays {
243
- display: grid;
244
- grid-template-columns: repeat(7, 1fr);
245
- }
246
-
247
- .root[data-week-numbers="true"] .weekdays {
248
- grid-template-columns: repeat(8, 1fr);
249
- }
250
-
251
229
  .week_number {
252
- justify-content: center;
253
- align-items: center;
254
- display: flex;
255
-
256
230
  opacity: var(--rdp-week_number-opacity);
257
231
  font: var(--rdp-week_number-font);
258
232
  height: var(--rdp-week_number-height);
package/src/types/props.ts CHANGED
@@ -546,6 +546,12 @@ export interface PropsRangeRequired {
546
546
  mode: "range";
547
547
  required: true;
548
548
  disabled?: Matcher | Matcher[] | undefined;
549
+ /**
550
+ * When `true`, the range will reset when including a disabled day.
551
+ *
552
+ * @since V9.0.2
553
+ */
554
+ excludeDisabled?: boolean | undefined;
549
555
  /** The selected range. */
550
556
  selected: DateRange;
551
557
  /** Event handler when a range is selected. */
@@ -569,6 +575,12 @@ export interface PropsRange {
569
575
  mode: "range";
570
576
  required?: false | undefined;
571
577
  disabled?: Matcher | Matcher[] | undefined;
578
+ /**
579
+ * When `true`, the range will reset when including a disabled day.
580
+ *
581
+ * @since V9.0.2
582
+ */
583
+ excludeDisabled?: boolean | undefined;
572
584
  /** The selected range. */
573
585
  selected?: DateRange | undefined;
574
586
  /** Event handler when the selection changes. */
package/website/docs/docs/selection-modes.mdx CHANGED
@@ -194,17 +194,38 @@ export function RangeMinMax() {
194
194
 
195
195
  ## Disabling Dates
196
196
 
197
- To disable specific days, use the `disabled` prop. The prop accepts a [`Matcher`](../api/type-aliases/Matcher.md) or an array of matchers that can be used to make some days not selectable.
197
+ To disable specific days, use the `disabled` prop. Disabled dates cannot be selected.
198
+
199
+ The prop accepts a [`Matcher`](../api/type-aliases/Matcher.md) or an array of matchers that can be used to make some days not selectable.
200
+
201
+ ```tsx
202
+ // disable today
203
+ <DayPicker mode="single" disabled={ new Date() } />
204
+
205
+ // disable weekends
206
+ <DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />
207
+ ```
208
+
209
+ <BrowserWindow>
210
+ <Examples.ModifiersDisabled />
211
+ </BrowserWindow>
212
+
213
+ ### Excluding Disabled Dates from Range {#exclude-disabled}
214
+
215
+ When using the `range` mode, disabled dates will be included in the selected range. Use the `excludeDisabled` prop to prevent this behavior. The range will reset when a disabled date is included.
198
216
 
199
217
  ```tsx
200
218
  <DayPicker
201
219
  mode="range"
202
- disabled={{ dayOfWeek: [0, 6] }} // Disable including Sundays and Saturdays in range
220
+ // Disable weekends
221
+ disabled={{ dayOfWeek: [0, 6] }}
222
+ // Reset range when a disabled date is included
223
+ excludeDisabled
203
224
  />
204
225
  ```
205
226
 
206
227
  <BrowserWindow>
207
- <Examples.ModifiersDisabled />
228
+ <Examples.RangeExcludeDisabled />
208
229
  </BrowserWindow>
209
230
 
210
231
  ## Customizing Selections
package/website/docs/upgrading.mdx CHANGED
@@ -35,9 +35,9 @@ The default design is slightly changed, so you may need to adjust DayPicker agai
35
35
 
36
36
  ### 3. Update the class names
37
37
 
38
- This version updates the name of the [UI elements](./api/enumerations/UI.md) to be more clear and consistent, so the class names have changed. If you are using custom styles via `classNames` or `styles` prop, you will need to update some of them.
38
+ This version updates the name of the [UI elements](./api/enumerations/UI.md) to be more clear and consistent, so the class names have changed.
39
39
 
40
- If you are using custom styles via `classNames` or `styles` prop, you may need to rename some of them.
40
+ If you are using custom styles via `classNames` or `styles` prop, you will need to update some of them.
41
41
 
42
42
  For example, `day_disabled` is now `disabled`:
43
43
 
@@ -213,17 +213,17 @@ In case you are using the `components` prop, you may need to update your code, a
213
213
  <details>
214
214
  <summary>**List of Updated Components**</summary>
215
215
 
216
- | Components | Changes |
217
- | -------------- | ---------------------------------------------------------------------------- |
218
- | `Caption` | Renamed to [`MonthCaption`](./api/functions/MonthCaption.md). |
219
- | `Day` | Now it renders a [`DayButton`](./api/functions/DayButton.md). |
220
- | `DayContent` | Removed. Change its content with [`labelDay`]('./api/functions/labelDay.md). |
221
- | `Head` | Removed. |
222
- | `HeadRow` | Renamed to [`WeekDays`](./api/functions/WeekDays.md). |
223
- | `IconDropdown` | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md). |
224
- | `IconLeft` | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md). |
225
- | `IconRight` | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md). |
226
- | `Row` | Renamed to [`Week`](./api/functions/Week.md). |
216
+ | Components | Changes |
217
+ | -------------- | --------------------------------------------------------------------------------------- |
218
+ | `Caption` | Renamed to [`MonthCaption`](./api/functions/MonthCaption.md). |
219
+ | `Day` | Now it renders a [`DayButton`](./api/functions/DayButton.md). |
220
+ | `DayContent` | Removed. Change its content with [`labelDayButton`](./api/functions/labelDayButton.md). |
221
+ | `Head` | Removed. |
222
+ | `HeadRow` | Renamed to [`Weekdays`](./api/functions/Weekdays.md). |
223
+ | `IconDropdown` | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md). |
224
+ | `IconLeft` | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md). |
225
+ | `IconRight` | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md). |
226
+ | `Row` | Renamed to [`Week`](./api/functions/Week.md). |
227
227
 
228
228
  </details>
229
229