v9.6 – Animated DayPicker

[gpbl]

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 feat: month animation #2684
• feat(performance): add sideEffects property to package.json by @rodgobbi in performance: add sideEffects property to package.json #2673
• fix(accessibility): focus lost when navigation button is disabled by @gpbl in fix: focus lost when navigation button is disabled #2685
• fix: render selected days with selected modifier when disabled by @rodgobbi in fix: render selected days with selected modifier when disabled #2700
• fix(build): remove extra files from package.json by @gpbl in build: remove extra files from package.json #2692
• chore(types): fix deprecation of select event handler types by @timothyis in Fix deprecation suggestion of select event handler types #2680

New Contributors

• @timothyis made their first contribution in Fix deprecation suggestion of select event handler types #2680

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

---

This discussion was created from the release v9.6.1.

[jpmmadeira]

After updating to version v9.6.0, I'm encountering the following error: Module not found: Can't resolve 'react-day-picker/style.css'
This happens due to the line: import 'react-day-picker/style.css';

I saw that this issue has been addressed in v9.6.1, but it doesn't seem to be released yet.
Any idea when it will be available?

[gpbl]

@jpmmadeira, version 9.6.1 is now available and should resolve the issue. Thanks for your feedback!