Planning v9

[gpbl]

v9 will improve accessibility, internationalization, performance and typings. For each of these areas, there are breaking changes that requires to bump the major version.

Others may use this thread to discuss each of those. This post will be updated.

---

Accessibility

DayPicker renders an HTMLTable that causes extra complications for accessibility:

• a11y: fix wrong role for day button #1708
• Bug: gridcell ARIA role incorrectly added to Day button element #1688
• Not seeing aria labels on day buttons #1545
• Ability to override the table element when the RowComponent is not returning `tr` element #1539
• Working with day button identifiers following recent accessibility changes #1716

We need to change the rendered HTML to adopt the latest accessibility standard about date pickers.

• Remove table and use div elements only (use ARIA-attributes and CSS display).
• Fix tab order for next/previous button on RTL: #1756

Internationalization

• Add support for Jalali calendar: #1825

To fix this, we would probably make DayPicker able to switch date library, which is a feature we dream since #1087.

Performance

• Fix performance issues: Too slow with higher numberOfMonths #1473

This will probably require to refactor some internals and the hooks.

Typings

• Use generic constraints: #1583
• Allow stricter TypeScript: #1769

Others

• Add a ref with focus method: #1735

In consideration

• Allow switch to other date libraries: #1087
• Animation when changing months: #87

[GeorgeTaveras1231]

@gpbl re: the point "Allow switch to other date libraries", have you considered allowing it to work with the Temporal.PlainDate object? It's at Stage 3 at the moment so it may be good to begin playing with it to possibly adopt. One downside is many developers may have to use polyfills for some time, but would be nice once the polyfills can be removed.

I hope at least that if you consider implementing the ability to work with many date libraries, you consider making the API work with different date objects (other than the [Now Legacy] Date object).

https://tc39.es/proposal-temporal/docs/plaindate.html

[gpbl]

I'd love to give a try to Temporal.PlainDate! Here is the polyfill: https://www.npmjs.com/package/@js-temporal/polyfill

[dimitur2204]

@gpbl I have been using the library somewhat extensively at work and could help out with some things in the future. Would love to play with the new Temporal.

[gpbl]

Hi @dimitur2204, your experience would be useful for sure - thanks!

I should say that relying on polyfills could be hard. Time ago, I tried to use Intl for localization when a polyfill was still required, and I had to give up: these kind of new API should be supported server-side too.

Anyway, it is indeed worth investigate how to replace date-fns with the Temporal API.

If you want to get started, please get familiar with the next major version in the branch https://github.com/gpbl/react-day-picker/tree/next.

There, you can search for the functions imported by date-fns, and see how to replace them. Typings, and that Locale object, may be difficult.

The goal could be switch to the different date library, e.g. using a dateLib prop:

// Render DayPicker using `Temporal` API
import { differenceInCalendarDays } from './temporal-date-lib'; // the module we are missing
<DayPicker dateLib={{ differenceInCalendarDays }} />

// Render using `date-fns`
import { differenceInCalendarDays } from 'date-fns';
<DayPicker dateLib={{ differenceInCalendarDays }} />

I'd suggest to start with some basic util, such as differenceInCalendarDays.

Please let us know if you make some progress or how we can help you...

[dimitur2204]

Thanks for the info. I will get into it and try to get an undertstanding of the repo. I will keep these things in mind.

[gpbl]

Related to this discussion: #1087 (comment)

[gpbl]

The first release candidate of DayPicker 9 has been released: http://react-day-picker.js.org/next

Looking for testers 👀

Please help testing this version and report any bug. Share your experience when upgrading existing DayPicker to this new version.

To help with the upgrade from v8 to v9, we provide an upgrading guide that likely need to be updated before the final release. I'd love to know your experience while upgrading.

Final Changelog

• Enhanced accessibility to better comply with WCAG21 recommendations.
• New HTML output using div grids instead of tables.
• Simplified styles and selectors with new CSS variables.
• Added support for UTC dates.
• Improved selection logic for range mode.
• Improved typings and props for better compatibility in strict mode.
• The custom components system has been updated. Now all components can be customized.
• Improved rendering performance and reduced memory impact.
• Added support for the Jalali Calendar.
• Added new hideWeekdayRow and hideNavigation props.
• New dropdown-years and dropdown-months caption layouts.

[oudoulj]

👋 I'm currently running 7.4.10
Can I directly upgrade from 7 to 9 or should I do 7 => 8 then 8 => 9?
Thank you.

[gpbl]

👋 I'm currently running 7.4.10 Can I directly upgrade from 7 to 9 or should I do 7 => 8 then 8 => 9? Thank you.

@oudoulj this is a good question!

You can install the version 9 directly. To upgrade, follow the upgrading guide for v8, as it is still valid: https://daypicker.dev/upgrading.

Nake sure you install react-day-picker@next and not @latest.

Please keep us updated about your upgrade process - we plan to add a guide for upgrading to v9 from v7 and your feedback would be appreciated.

[oudoulj]

We were able to migrate (roughly) from v7 to V9 RC2 with a mix of both migration guides (7=>8 and 8=>9)
We quickly gave up on the styling part because we had a hard time moving from styled-components to Tailwind by reading the doc 😓
But our main focus was to see if the performance issue while keyboard navigating had gone away: using arrow keys to navigate between cells on v7 is blazing fast when it's much slower on v8 and v9.
Not a dealbreaker but a little disappointing 😿

Version 7
When you press and hold the right arrow key, you can browse all cells very fast with no issue.

Version 9
When you do the same with v9, you start skipping cells, it stops, jumps to a few days later: it becomes laggy/unresponsive.