mui-x [POC][pickers] Explore the Base UI Picker components

Closes #15598 Doc preview

There is a lot of polishing to do before considering any of this to be ready. This POC is mostly here to test some of the assumption I made in my RFC.

New features compared to MUI

[x] Grid layout for the months
[x] Grid layout for the years
[x] Multiple month rendered at once in the day view
[x] Multiple years rendered at once in the month view
[x] Month / year navigation in the range calendar (#4546)
[x] Month / year range edition in the range calendar (#4995)
[ ] Multi date selection (not a range, just a list of date) => standalone component? what about typing?

Steps before creating the Base UI X pickers package

[ ] Decide how to name the package that will validate the license (it can use @mui/x-license temporarily even if we don't want any @mui deps for the launch
[ ] Decide how to name the Base UI X pickers packages
[ ] Expose the utilities of Base UI that we need (CompositeList and a lot of things in the utils package)
[ ] Move the adapters into a standalone package (can't be moved to the Base UI package, otherwise they won't be accessible in the scheduler when we start working on it)
[ ] Decide how we structure the doc (for shared features between MUI X and Base UI X like the localization or the validation, when do we duplicate? when do we link to the Base UI X doc)
[ ] Validate how we want to structure MIT / commercial features for the Base UI X offering

Work

Components

`Calendar.*`

[x] Calendar.Root
[x] Calendar.SetVisibleMonth
[x] Calendar.SetVisibleYear
[x] Calendar.DayGrid
[x] Calendar.DayGridHeader
[x] Calendar.DayGridHeaderCell
[x] Calendar.DayGridBody
[x] Calendar.DayWeekRow
[x] Calendar.DayCell
[x] Calendar.MonthList
[x] Calendar.MonthGrid
[x] Calendar.MonthCell
[x] Calendar.YearList
[x] Calendar.YearGrid
[x] Calendar.YearCell

`RangeCalendar.*`

[x] RangeCalendar.Root
[x] RangeCalendar.SetVisibleMonth
[x] RangeCalendar.SetVisibleYear
[x] RangeCalendar.DaysGrid
[x] RangeCalendar.DaysGridHeader
[x] RangeCalendar.DaysGridHeaderCell
[x] RangeCalendar.DaysGridBody
[x] RangeCalendar.DaysWeekRow
[x] RangeCalendar.DaysCell
[x] RangeCalendar.MonthsList (no range selection for now, only usable for navigation)
[x] RangeCalendar.MonthsGrid(no range selection for now, only usable for navigation)
[ ] RangeCalendar.MonthsCell
[x] RangeCalendar.YearList (no range selection for now, only usable for navigation)
[x] RangeCalendar.YearGrid (no range selection for now, only usable for navigation)
[ ] RangeCalendar.YearCell

Keyboard navigation

[x] Calendar.DaysGrid
- [x] Navigation inside a given month
- [x] Navigation that triggers a change in the visible month
- [x] Navigation that moves the focus to another visible month (when rendering several at once)
- [x] Support monthPageSize
- [ ] Only add the default tabbable day (on the reference date or 1st day of the month) when the other rendered month also have no tabbable day
[ ] Calendar.MonthsList
- [x] Navigation inside a given year
- [x] Navigation that triggers a change in the visible year
- [ ] Navigation that moves the focus to another visible month (when rendering several at once)
[ ] Calendar.MonthsGrid
- [x] Navigation inside a given year
- [x] Navigation that triggers a change in the visible year
- [ ] Navigation that moves the focus to another visible month (when rendering several at once)
[x] Calendar.YearList
- [x] Navigation inside the list
[x] Calendar.YearGrid
- [x] Navigation inside the grid
[ ] RangeCalendar.DayGrid
- [ ] Range expand / collapse using keyboard

Validation

[x] Apply the same rules to disable day / month and year buttons as on the MUI version
[x] Apply the same rules to disable the navigation button as on the MUI version

Focus

[x] Calendar.Root
- [x] Support focusing tabbable cell on mount
[x] Calendar.DaysGrid
- [x] Add tabIndex={0} on the right cell
- [x] Get focus on mount when it was inside the previous view
[x] Calendar.MonthsGrid / Calendar.MonthsList
- [x] Add tabIndex={0} on the right cell
- [x] Scroll to the tabbable cell if needed
- [x] Get focus on mount when it was inside the previous view
[x] Calendar.YearGrid / Calendar.YearList
- [x] Add tabIndex={0} on the right cell
- [x] Scroll to the tabbable cell if needed
- [x] Get focus on mount when it was inside the previous view

Other

[x] Support value, defaultValue, referenceDate, onValueChange, onError and timezone with the same behavior as on the MUI version (just onChange is renamed onValueChange)
[x] Support fixedWeekNumber
[x] Support monthPageSize on <Calendar.SetVisibleMonth />
[x] Support yearPageSize on <Calendar.SetVisibleYear />
[x] Support offset on <Calendar.DaysGrid />
[ ] Support offset on <Calendar.MonthsGrid /> and <Calendar.MonthsList />
[x] Support same value lifecycle when clicking on a day, a month a year as on the MUI version
[ ] Check that availableRangePositions is always applied
[ ] Add visibleDate and onVisibleDateChange props

Proposed breaking changes

Stop using disable in validation terminology to clearly differentiate the "disabled" and "invalid" state:
- shouldDisableDate => isDateInvalid
- shouldDisableMonth => isMonthInvalid
- shouldDisableYear => isYearInvalid
Change the availableRangePosition signature from RangePosition[] to { start?: boolean, end?: boolean } (unsure)

Planned recipes

Full replication of our current Date Calendar
Horizontal swipe to navigate month
Vertical scroll to navigate month

Jan 03 '25 14:01 flaviendelangle

Deploy preview: https://deploy-preview-16069--material-ui-x.netlify.app/

Updated pages:

Generated by :no_entry_sign: dangerJS against db849a08a63e465d16e65b389fc06f83e9322dbf