[POC][pickers] Explore the Base UI Calendar component

[flaviendelangle]

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.
For example I think having a view lifecycle inside Calendar is a bad idea, it creates too much complexity and letting the developper handle it works great.

New features compared to MUI

• Grid layout for the months
• Grid layout for the years
• Multiple month rendered at once in the day view
• Multiple years rendered at once in the month view

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)

Work

Components

Calendar.*

• Calendar.Root
• Calendar.SetVisibleMonth
• Calendar.SetVisibleYear
• Calendar.DaysGrid
• Calendar.DaysGridHeader
• Calendar.DaysGridHeaderCell
• Calendar.DaysGridBody
• Calendar.DaysWeekRow
• Calendar.DaysCell
• Calendar.MonthsList
• Calendar.MonthsGrid
• Calendar.MonthsCell
• Calendar.YearsList
• Calendar.YearsGrid
• Calendar.YearsCell

RangeCalendar.*

• RangeCalendar.Root
• RangeCalendar.SetVisibleMonth
• RangeCalendar.SetVisibleYear
• RangeCalendar.DaysGrid
• RangeCalendar.DaysGridHeader
• RangeCalendar.DaysGridHeaderCell
• RangeCalendar.DaysGridBody
• RangeCalendar.DaysWeekRow
• RangeCalendar.DaysCell
• RangeCalendar.MonthsList (not supported in MUI, can be done later)
• RangeCalendar.MonthsGrid (not supported in MUI, can be done later)
• RangeCalendar.MonthsCell (not supported in MUI, can be done later)
• RangeCalendar.YearsList (not supported in MUI, can be done later)
• RangeCalendar.YearsGrid (not supported in MUI, can be done later)
• RangeCalendar.YearsCell (not supported in MUI, can be done later)

Keyboard navigation

• Calendar.DaysGrid
  • Navigation inside a given month
  • Navigation that triggers a change in the visible month
  • Navigation that moves the focus to another visible month (when rendering several at once)
  • Support monthPageSize
• Calendar.MonthsList
  • Navigation inside a given year
  • 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
  • Navigation inside a given year
  • Navigation that triggers a change in the visible year
  • Navigation that moves the focus to another visible month (when rendering several at once)
• Calendar.YearsList
  • Navigation inside the list
• Calendar.YearsGrid
  • Navigation inside the grid
• RangeCalendar.DaysGrid
  • Range expand / collapse using keyboard

Validation

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

Focus

• Calendar.Root
  • Support autoFocus (check the Base UI nomenclature)
• Calendar.DaysGrid
  • Add tabIndex={0} on the right cell
  • Get focus on mount when it was inside the previous view
• Calendar.MonthsGrid / Calendar.MonthsList
  • Add tabIndex={0} on the right cell
  • Scroll to the tabbable cell if needed
  • Get focus on mount when it was inside the previous view
• Calendar.YearsGrid / Calendar.YearsList
  • Add tabIndex={0} on the right cell
  • Scroll to the tabbable cell if needed
  • Get focus on mount when it was inside the previous view

Other

• Support value, defaultValue, referenceDate, onValueChange, onError and timezone with the same behavior as on the MUI version (just onChange is renamed onValueChange)
• Support fixedWeekNumber
• Support monthPageSize on <Calendar.SetVisibleMonth />
• Support yearPageSize on <Calendar.SetVisibleYear />
• Support offset on <Calendar.DaysGrid />
• Support offset on <Calendar.MonthsGrid /> and <Calendar.MonthsList />
• Support same value lifecycle when clicking on a day, a month a year as on the MUI version

[mui-bot]

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

Updated pages:

• docs/data/date-pickers/base-calendar/base-calendar.md

Generated by 🚫 dangerJS against 5c728a8