react-day-picker 9.6.1

v9.6.1

on Node.js NPM

This release addresses an accessibility issue, adds a new animate prop and fixes other minor bugs.

Possible Breaking Change in Custom Styles

To address a focus lost bug affecting navigation buttons, we updated the buttons to use aria-disabled instead of the disabled attribute.

This change may cause custom styles for those disabled buttons to break. To fix it in your code, update the CSS selector to target [aria-disabled="true"]:

- .rdp-button_next:disabled,
+ .rdp-button_next[aria-disabled="true"] {
  /* your custom CSS */
}
- .rdp-button_previous:disabled,
+ .rdp-button_previous[aria-disabled="true"] {
  /* your custom CSS */
}

Animating Month Transitions

Thanks to the work by @rodgobbi, we have added animations to DayPicker. The new animate prop enables CSS transitions for captions and weeks when navigating between months:

<DayPicker animate />

Customizing the animation style can be challenging due to the HTML table structure of the grid. We may address this in the future. Please leave your feedback in DayPicker Discussions.

What's Changed

• feat: new animate prop by @rodgobbi in #2684
• feat(performance): add sideEffects property to package.json by @rodgobbi in #2673
• fix(accessibility): focus lost when navigation button is disabled by @gpbl in #2685
• fix: render selected days with selected modifier when disabled by @rodgobbi in #2700
• fix(build): remove extra files from package.json by @gpbl in #2692
• chore(types): fix deprecation of select event handler types by @timothyis in #2680

v9.6.1

• fix(build): add missing .css entries in package.json files by @gpbl in #2703

New Contributors

• @timothyis made their first contribution in #2680

Full Changelog: v9.5.1...v9.6.1