react-day-picker 9.0.6 → 9.0.7

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 (52) hide show
  1. package/dist/cjs/DayPicker.js +6 -3
  2. package/dist/cjs/DayPicker.js.map +1 -1
  3. package/dist/cjs/index.d.ts +1 -0
  4. package/dist/cjs/index.js +3 -0
  5. package/dist/cjs/index.js.map +1 -1
  6. package/dist/cjs/selection/useMulti.js +1 -7
  7. package/dist/cjs/selection/useMulti.js.map +1 -1
  8. package/dist/cjs/selection/useRange.js +1 -7
  9. package/dist/cjs/selection/useRange.js.map +1 -1
  10. package/dist/cjs/selection/useSingle.js +2 -8
  11. package/dist/cjs/selection/useSingle.js.map +1 -1
  12. package/dist/cjs/types/props.d.ts +16 -8
  13. package/dist/cjs/useCalendar.d.ts +1 -1
  14. package/dist/cjs/useCalendar.js +26 -2
  15. package/dist/cjs/useCalendar.js.map +1 -1
  16. package/dist/cjs/useDayPicker.d.ts +1 -0
  17. package/dist/cjs/useDayPicker.js +1 -1
  18. package/dist/cjs/useDayPicker.js.map +1 -1
  19. package/dist/esm/DayPicker.js +6 -3
  20. package/dist/esm/DayPicker.js.map +1 -1
  21. package/dist/esm/index.d.ts +1 -0
  22. package/dist/esm/index.js +1 -0
  23. package/dist/esm/index.js.map +1 -1
  24. package/dist/esm/selection/useMulti.js +1 -7
  25. package/dist/esm/selection/useMulti.js.map +1 -1
  26. package/dist/esm/selection/useRange.js +1 -7
  27. package/dist/esm/selection/useRange.js.map +1 -1
  28. package/dist/esm/selection/useSingle.js +2 -8
  29. package/dist/esm/selection/useSingle.js.map +1 -1
  30. package/dist/esm/types/props.d.ts +16 -8
  31. package/dist/esm/useCalendar.d.ts +1 -1
  32. package/dist/esm/useCalendar.js +26 -2
  33. package/dist/esm/useCalendar.js.map +1 -1
  34. package/dist/esm/useDayPicker.d.ts +1 -0
  35. package/dist/esm/useDayPicker.js +1 -1
  36. package/dist/esm/useDayPicker.js.map +1 -1
  37. package/examples/SingleRequired.tsx +1 -1
  38. package/package.json +4 -4
  39. package/src/DayPicker.test.tsx +49 -5
  40. package/src/DayPicker.tsx +20 -17
  41. package/src/index.ts +2 -0
  42. package/src/selection/useMulti.tsx +1 -8
  43. package/src/selection/useRange.tsx +0 -8
  44. package/src/selection/useSingle.tsx +2 -9
  45. package/src/types/props.test.tsx +10 -3
  46. package/src/types/props.ts +16 -8
  47. package/src/useCalendar.ts +63 -6
  48. package/src/useDayPicker.ts +1 -1
  49. package/website/docs/docs/localization.mdx +21 -0
  50. package/website/docs/docs/selection-modes.mdx +9 -8
  51. package/website/docs/docs/styling.mdx +2 -2
  52. package/website/docs/upgrading.mdx +2 -2
@@ -76,12 +76,13 @@ By setting the `mode` prop to `"multiple"`, DayPicker allows selecting multiple
76
76
 
77
77
  ### Multiple Mode Props
78
78
 
79
- | Prop Name | Type | Description |
80
- | ---------- | ----------------------------------------------- | --------------------------------------- |
81
- | `selected` | `Date[] \| undefined` | The selected dates. |
82
- | `onSelect` | `(selected, triggerDate, modifiers, e) => void` | Event callback when a date is selected. |
83
- | `min` | `number` | The minimum dates that can be selected. |
84
- | `max` | `number` | The maximum dates that can be selected. |
79
+ | Prop Name | Type | Description |
80
+ | ---------- | ---------------------------------------- | --------------------------------------- |
81
+ | `selected` | `Date[] \| undefined` | The selected dates. |
82
+ | `onSelect` | `(selected, date, modifiers, e) => void` | Event callback when a date is selected. |
83
+ | `min` | `number` | The minimum dates that can be selected. |
84
+ | `max` | `number` | The maximum dates that can be selected. |
85
+ | `required` | `boolean` | Make the selection required. |
85
86
 
86
87
  Use the `selected` and `onSelect` props to control the selected date:
87
88
 
@@ -109,7 +110,7 @@ Use the `min` and `max` props to limit the number of selectable dates.
109
110
 
110
111
  ### Required Selection
111
112
 
112
- By setting the `required` prop, DayPicker requires at least one date to be selected.
113
+ By setting the `required` prop, DayPicker won't allow unselect the selected dates.
113
114
 
114
115
  ```tsx
115
116
  <DayPicker mode="multiple" required selected={[new Date()]} />
@@ -158,7 +159,7 @@ Similarly, you can se the `max` prop to set the maximum number of nights.
158
159
 
159
160
  ### Required Ranges
160
161
 
161
- By setting the `required` prop, a range must be selected.
162
+ By setting the `required` prop, DayPicker won't allow unselect the selected range.
162
163
 
163
164
  ```tsx
164
165
  <DayPicker mode="range" required />
@@ -137,7 +137,7 @@ They are the value of the [`UI`](../api/enumerations/UI.md), [`DayFlag`](../api/
137
137
  For example, to change the class name of the calendar container:
138
138
 
139
139
  ```tsx
140
- <DayPicker classNames={{ calendar: "my-calendar" }} />
140
+ <DayPicker classNames={{ root: "my-calendar" }} />
141
141
  ```
142
142
 
143
143
  Or the disabled days:
@@ -166,7 +166,7 @@ export function MyCalendar() {
166
166
  classNames={{
167
167
  today: `border-amber-500`, // Add a border to today's date
168
168
  selected: `bg-amber-500 border-amber-500 text-white`, // Highlight the selected day
169
- calendar: `${defaultClassNames.calendar} shadow-lg p-5` // Add a shadow to the calendar
169
+ root: `${defaultClassNames.root} shadow-lg p-5`, // Add a shadow to the root element
170
170
  chevron: `${defaultClassNames.chevron} fill-amber-500` // Change the color of the chevron
171
171
  }}
172
172
  />
@@ -108,8 +108,8 @@ In case you are using `fromDate` or `toDate`, replace them with the `hidden` and
108
108
 
109
109
  | Removed prop | Notes |
110
110
  | ------------ | ------------------------------------------------------------------------------------------------------------ |
111
- | ~`fromDate`~ | Replace it with `fromMonth` and the `hidden` prop and the `before` [Matcher](./api/type-aliases/Matcher.md). |
112
- | ~`toDate`~ | Replace it with `toMonth` the `hidden` prop and the `after` [Matcher](./api/type-aliases/Matcher.md). |
111
+ | ~`fromDate`~ | Replace it with `startMonth` and the `hidden` prop and the `before` [Matcher](./api/type-aliases/Matcher.md). |
112
+ | ~`toDate`~ | Replace it with `endMonth` the `hidden` prop and the `after` [Matcher](./api/type-aliases/Matcher.md). |
113
113
 
114
114
  #### Example
115
115