@mui/x-date-pickers-pro 6.0.0-alpha.11 → 6.0.0-alpha.13

package/CHANGELOG.md

@@ -3,6 +3,212 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.13
+
+_Dec 24, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 New column menu design and API
+- 🌍 Improve Russian (ru-RU) and Korean (ko-KR) locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@6.0.0-alpha.13` / `@mui/x-data-grid-pro@6.0.0-alpha.13` / `@mui/x-data-grid-premium@6.0.0-alpha.13`
+
+#### Breaking changes
+
+- New column menu design and API (#6619) MBilalShafi
+
+  The `currentColumn` prop passed to `components.ColumnMenu` was renamed to `colDef`.
+  The `column` prop passed to the items of the column menu was renamed to `colDef`.
+  The `DATA_GRID_DEFAULT_SLOTS_COMPONENTS` export has been removed.
+  The following components and interfaces were been renamed for consistency:
+
+  **Community Package:**
+
+  ```diff
+  -<GridFilterMenuItem />
+  +<GridColumnMenuFilterItem />
+  ```
+
+  ```diff
+  -<HideGridColMenuItem />
+  +<GridColumnMenuHideItem />
+  ```
+
+  ```diff
+  -<GridColumnsMenuItem />
+  +<GridColumnMenuColumnsItem />
+  ```
+
+  ```diff
+  -<SortGridMenuItems />
+  +<GridColumnMenuSortItem />
+  ```
+
+  ```diff
+  -interface GridFilterItemProps
+  +interface GridColumnMenuItemProps
+  ```
+
+  **Pro package:**
+
+  ```diff
+  -<GridColumnPinningMenuItems />
+  +<GridColumnMenuPinningItem />
+  ```
+
+  **Premium package:**
+
+  ```diff
+  -<GridAggregationColumnMenuItem />
+  +<GridColumnMenuAggregationItem />
+  ```
+
+  ```diff
+  -<GridRowGroupingColumnMenuItems />
+  -<GridRowGroupableColumnMenuItems />
+  +<GridColumnMenuGroupingItem />
+  ```
+
+- Improve column definition typing (#7224) @cherniavskii
+
+  The `GridColumns` type was removed. Use `GridColDef[]` instead.
+  The `GridActionsColDef` interface was removed. Use `GridColDef` instead.
+  The `GridEnrichedColDef` type was removed. Use `GridColDef` instead.
+  The `GridStateColDef` type was removed.
+
+    If you use it to type `searchPredicate`, use `GridColumnsPanelProps['searchPredicate']` instead.
+    If you use it to type `getApplyFilterFn`, `GridFilterOperator['getApplyFilterFn']` can be used as replacement.
+
+- Remove GridDensityType enum (#7304) @cherniavskii
+
+  The `GridDensityTypes` enum was removed. Use `GridDensity` type instead.
+
+#### Changes
+
+- [DataGrid] Allow disabling of buttons in column panel (#6947) @MBilalShafi
+- [DataGrid] Improve column definition typing (#7224) @cherniavskii
+- [DataGrid] Improve column menu design and API (#6619) @MBilalShafi
+- [DataGrid] Remove `GridDensityType` enum (#7304) @cherniavskii
+- [DataGrid] Remove `rowHeight` and `headerHeight` from state (#7199) @DanailH
+- [DataGrid] Remove column separator to match table styles (#7067) @MBilalShafi
+- [DataGrid] Update Russian (ru-RU) locale (#7220) @VeceluXa
+- [DataGridPro] Use row ID as `key` of the detail panels (#7302) @m4theushw
+- [DataGridPremium] Fix `exceljs` import with parcel (#7284) @alexfauquette
+
+### `@mui/x-date-pickers@6.0.0-alpha.13` / `@mui/x-date-pickers-pro@6.0.0-alpha.13`
+
+#### Breaking changes
+
+- Require Luxon 3.0.2 or higher (#7249) @flaviendelangle
+
+  `AdapterLuxon` now requires `luxon` in version `3.0.2` or higher in order to work.
+
+  Take a look at the [Upgrading Luxon](https://moment.github.io/luxon/#/upgrading) guide if you are using an older version.
+
+#### Changes
+
+- [DateRangePicker] Fix to propagate `disabled` and `readOnly` on multi input picker (#7135) @LukasTy
+- [fields] Fix multi input fields root element props order and types (#7225) @LukasTy
+- [fields] Support escaped characters (#7184) @flaviendelangle
+- [pickers] Allow to define custom view renderers on the pickers (#7176) @flaviendelangle
+- [pickers] Avoid running validation methods several times in `DateCalendar` (#7247) @flaviendelangle
+- [pickers] Improve Korean (ko-KR) locale (#7266) @hanbin9775
+- [pickers] Require Luxon 3.0.2 or higher (#7249) @flaviendelangle
+- [pickers] Rework view internals (#7097) @flaviendelangle
+
+### `@mui/x-codemod@6.0.0-alpha.13`
+
+#### Changes
+
+- [codemod] New codemod for view component renaming (#7264) @flaviendelangle
+
+### Docs
+
+- [docs] Fix some selectors not being documented (#7218) @cherniavskii
+- [docs] New page for `DateCalendar` (#7053) @flaviendelangle
+- [docs] Split selection docs (#7213) @m4theushw
+
+### Core
+
+- [core] Fix API demos callout spacing @oliviertassinari
+
+## 6.0.0-alpha.12
+
+_Dec 16, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 The `apiRef` prop is now available in the `@mui/x-data-grid` package:
+
+  ```tsx
+  const apiRef = useGridApiRef();
+
+  return (
+    <DataGrid apiRef={apiRef} {...other} />
+  )
+  ```
+
+  See [the documentation](https://next.mui.com/x/react-data-grid/api-object/) for more information.
+
+- 🎁 The `DataGridPremium` now supports cell selection:
+
+  ```tsx
+  <DataGridPremium unstable_cellSelection />
+  ```
+
+  See [the documentation](https://next.mui.com/x/react-data-grid/selection/#cell-selection) for more information
+
+- 🌍 Support the Right To Left orientation on the fields components
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.12` / `@mui/x-data-grid-pro@v6.0.0-alpha.12` / `@mui/x-data-grid-premium@v6.0.0-alpha.12`
+
+#### Breaking changes
+
+- The `showCellRightBorder` was renamed to `showCellVerticalBorder`
+- The `showColumnRightBorder` was renamed to `showColumnVerticalBorder`
+- The `.MuiDataGrid-withBorder` CSS class was renamed to `.MuiDataGrid-withBorderColor` and it only sets `border-color` CSS property now.
+- The following undocumented properties from `apiRef` were removed: `footerRef`, `headerRef`, `columnHeadersElementRef`, `columnHeadersContainerElementRef`
+- The `GridHeaderPlaceholder` component was removed.
+- The `MAX_PAGE_SIZE` constant was removed.
+- The `useGridScrollFn` hook was removed.
+
+#### Changes
+
+- [DataGrid] Display sort column menu items as per `sortingOrder` prop (#7180) @MBilalShafi
+- [DataGrid] Support `apiRef` in Community package (#6773) @cherniavskii
+- [DataGridPremium] Add support for cell selection (#6567) @m4theushw
+- [DataGridPremium] Use separate cache for aggregation columns pre-processor (#7142) @m4theushw
+- [DataGridPro] Fix missing border in right-pinned columns (#4197) @cherniavskii
+- [DataGridPro] Fix wrong border color on skeleton cells (#7202) @cherniavskii
+
+### `@mui/x-date-pickers@v6.0.0-alpha.12` / `@mui/x-date-pickers-pro@v6.0.0-alpha.12`
+
+#### Changes
+
+- [fields] Fix bug introduced by RTL in single input range fields (#7189) @alexfauquette
+- [fields] Support RTL out of the box (#6715) @alexfauquette
+- [pickers] Clean `autoFocus` behavior on fields and new pickers (#7153) @flaviendelangle
+- [pickers] Fix label on the new range pickers (#7210) @flaviendelangle
+- [pickers] Fix wrong component name on `StaticNextDateTime` (#7187) @flaviendelangle
+
+### Docs
+
+- [docs] Add docs section about field placeholders' localization (#7139) @flaviendelangle
+- [docs] Create a `DemoGrid` component to unify demos with several components (#7057) @flaviendelangle
+- [docs] Document aggregation selectors (#7148) @cherniavskii
+- [docs] Fix 301 links to demo pages in API pages (#7197) @oliviertassinari
+- [docs] Fix errors and warning in demos (#7209) @LukasTy
+- [docs] Use `DemoContainer` and `DemoItem` on every picker demo (#7149) @flaviendelangle
+
+### Core
+
+- [core] Fix broken test (#7179) @flaviendelangle
+
 ## 6.0.0-alpha.11
 
 _Dec 8, 2022_
@@ -1301,6 +1507,60 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.16
+
+_Dec 16, 2022_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.16` / `@mui/x-data-grid-pro@v5.17.16` / `@mui/x-data-grid-premium@v5.17.16`
+
+#### Changes
+
+- [DataGrid] Display sort column menu items as per `sortingOrder` prop (#7125) @hanbin9775
+- [DataGrid] Fix flickering on mount (#7155) @cherniavskii
+- [DataGridPremium] Use separate cache for aggregation columns pre-processor (#7174) @m4theushw
+
+### `@mui/x-date-pickers@v5.0.11` / `@mui/x-date-pickers-pro@v5.0.11`
+
+#### Changes
+
+- [DateTimePicker] Update export pattern (#7172) @kealjones-wk
+
+### Docs
+
+- [docs] Document aggregation selectors (#7151) @cherniavskii
+
+## 5.17.15
+
+_Dec 8, 2022_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Fix lazy-loading not working in `DataGridPremium` (#7130) @m4theushw
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.15` / `@mui/x-data-grid-pro@v5.17.15` / `@mui/x-data-grid-premium@v5.17.15`
+
+#### Changes
+
+- [DataGridPremium] Add support for lazy-loading (#7130) @m4theushw
+- [DataGridPremium] Pass `groupId` to the aggregation function (#7143) @m4theushw
+
+### `@mui/x-date-pickers@v5.0.10` / `@mui/x-date-pickers-pro@v5.0.10`
+
+#### Changes
+
+- [pickers] Initialize date without time when selecting year or month (#7136) @LukasTy
+
+### Docs
+
+- [docs] Fix the nested import on the api pages (#7134) @flaviendelangle
+- [docs] Keep track of the localization completion (#7099) @alexfauquette
+- [docs] Update localization doc to use existing locale (#7104) @LukasTy
+
 ## 5.17.14
 
 _Dec 1, 2022_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -11,7 +11,7 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
-import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext, useNow } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internal/utils/releaseInfo';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internal/utils/date-utils';
@@ -108,6 +108,7 @@ const useUtilityClasses = ownerState => {
 const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
   const utils = useUtils();
   const localeText = useLocaleText();
+  const now = useNow();
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   const isMobile = React.useContext(WrapperVariantContext) === 'mobile';
   const {
@@ -350,6 +351,26 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const visibleMonths = React.useMemo(() => Array.from({
     length: calendars
   }).map((_, index) => utils.setMonth(calendarState.currentMonth, utils.getMonth(calendarState.currentMonth) + index)), [utils, calendarState.currentMonth, calendars]);
+  const focusedMonth = React.useMemo(() => {
+    var _visibleMonths$find;
+    if (!autoFocus) {
+      return null;
+    }
+
+    // The focus priority of the "day" view is as follows:
+    // 1. Month of the `start` date
+    // 2. Month of the `end` date
+    // 3. Month of the current date
+    // 4. First visible month
+
+    if (value[0] != null) {
+      return visibleMonths.find(month => utils.isSameMonth(month, value[0]));
+    }
+    if (value[1] != null) {
+      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    }
+    return (_visibleMonths$find = visibleMonths.find(month => utils.isSameMonth(month, now))) != null ? _visibleMonths$find : visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(className, classes.root),
@@ -362,7 +383,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       className: classes.monthContainer,
       children: [calendars === 1 ? /*#__PURE__*/_jsx(PickersCalendarHeader, {
         views: ['day'],
-        openView: 'day',
+        view: 'day',
         currentMonth: calendarState.currentMonth,
         onMonthChange: (newMonth, direction) => handleChangeMonth({
           newMonth,
@@ -405,7 +426,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         renderLoading: renderLoading,
         components: componentsForDayCalendar,
         componentsProps: componentsPropsForDayCalendar,
-        autoFocus: autoFocus,
+        autoFocus: month === focusedMonth,
         fixedWeekNumber: fixedWeekNumber,
         displayWeekNumber: displayWeekNumber
       }), index)]
@@ -417,6 +438,12 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
   autoFocus: PropTypes.bool,
   /**
    * The number of calendars to render.

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base';
 import { Theme } from '@mui/material/styles';
-import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, DayCalendarProps } from '@mui/x-date-pickers/internals';
+import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, DayCalendarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
 import { DateRange, RangePositionProps, DayRangeValidationProps } from '../internal/models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
 import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';
@@ -21,41 +21,7 @@ export interface DateRangeCalendarSlotsComponentsProps<TDate> extends PickersArr
         selected: boolean;
     }>;
 }
-export interface DateRangeCalendarProps<TDate> extends ExportedDayCalendarProps<TDate>, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate>, Partial<RangePositionProps> {
-    /**
-     * The selected value.
-     * Used when the component is controlled.
-     */
-    value?: DateRange<TDate>;
-    /**
-     * The default selected value.
-     * Used when the component is not controlled.
-     */
-    defaultValue?: DateRange<TDate>;
-    /**
-     * Callback fired when the value changes.
-     * @template TDate
-     * @param {DateRange<TDate>} value The new value.
-     * @param {PickerSelectionState | undefined} selectionState Indicates if the date range selection is complete.
-     */
-    onChange?: (value: DateRange<TDate>, selectionState?: PickerSelectionState) => void;
-    autoFocus?: boolean;
-    className?: string;
-    classes?: Partial<DateRangeCalendarClasses>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * Overrideable components.
-     * @default {}
-     */
-    components?: DateRangeCalendarSlotsComponent<TDate>;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     */
-    componentsProps?: DateRangeCalendarSlotsComponentsProps<TDate>;
+export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalendarProps<TDate>, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate>, Pick<ExportedUseViewsOptions<'day'>, 'autoFocus'> {
     /**
      * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
      * @default false
@@ -98,8 +64,42 @@ export interface DateRangeCalendarProps<TDate> extends ExportedDayCalendarProps<
      */
     disableDragEditing?: boolean;
 }
+export interface DateRangeCalendarProps<TDate> extends ExportedDateRangeCalendarProps<TDate>, Partial<RangePositionProps> {
+    /**
+     * The selected value.
+     * Used when the component is controlled.
+     */
+    value?: DateRange<TDate>;
+    /**
+     * The default selected value.
+     * Used when the component is not controlled.
+     */
+    defaultValue?: DateRange<TDate>;
+    /**
+     * Callback fired when the value changes.
+     * @template TDate
+     * @param {DateRange<TDate>} value The new value.
+     * @param {PickerSelectionState | undefined} selectionState Indicates if the date range selection is complete.
+     */
+    onChange?: (value: DateRange<TDate>, selectionState?: PickerSelectionState) => void;
+    className?: string;
+    classes?: Partial<DateRangeCalendarClasses>;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Overrideable components.
+     * @default {}
+     */
+    components?: DateRangeCalendarSlotsComponent<TDate>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    componentsProps?: DateRangeCalendarSlotsComponentsProps<TDate>;
+}
 export interface DateRangeCalendarOwnerState<TDate> extends DateRangeCalendarProps<TDate> {
     isDragging: boolean;
 }
 export type DateRangeCalendarDefaultizedProps<TDate> = DefaultizedProps<DateRangeCalendarProps<TDate>, 'reduceAnimations' | 'calendars' | 'disableDragEditing' | keyof BaseDateValidationProps<TDate>>;
-export type ExportedDateRangeCalendarProps<TDate> = Omit<DateRangeCalendarProps<TDate>, 'defaultValue' | 'value' | 'onChange' | 'changeView' | 'slideDirection' | 'currentMonth' | 'className' | 'classes' | 'components' | 'componentsProps' | 'rangePosition' | 'onRangePositionChange'>;

package/DateRangePicker/DateRangePicker.js

@@ -55,7 +55,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2
@@ -235,11 +234,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: PropTypes.func,
   /**
    * Control the popup or dialog open state.
    */

package/DateRangePicker/DateRangePickerView.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ExportedDateCalendarProps, PickerStatePickerProps, BaseDateValidationProps, DayValidationProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
+import { ExportedDateCalendarProps, PickerStatePickerProps, BaseDateValidationProps, DayValidationProps, ExportedBaseToolbarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
 import { DateRange, RangePositionProps } from '../internal/models/range';
 import { DayRangeValidationProps } from '../internal/models/dateRange';
 import { DateRangePickerViewMobileSlotsComponent, DateRangePickerViewMobileSlotsComponentsProps } from './DateRangePickerViewMobile';
@@ -16,7 +16,7 @@ export interface DateRangePickerViewSlotsComponent<TDate> extends DateRangePicke
 export interface DateRangePickerViewSlotsComponentsProps<TDate> extends DateRangePickerViewMobileSlotsComponentsProps<TDate> {
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface ExportedDateRangePickerViewProps<TDate> extends ExportedDateRangePickerViewDesktopProps, DayRangeValidationProps<TDate>, Omit<ExportedDateCalendarProps<TDate>, 'onYearChange' | keyof BaseDateValidationProps<TDate> | keyof DayValidationProps<TDate>> {
+export interface ExportedDateRangePickerViewProps<TDate> extends ExportedDateRangePickerViewDesktopProps, DayRangeValidationProps<TDate>, Omit<ExportedDateCalendarProps<TDate>, 'value' | 'defaultValue' | 'onChange' | 'onYearChange' | keyof BaseDateValidationProps<TDate> | keyof DayValidationProps<TDate>> {
     /**
      * Overrideable components.
      * @default {}
@@ -41,7 +41,7 @@ export interface ExportedDateRangePickerViewProps<TDate> extends ExportedDateRan
      */
     className?: string;
 }
-interface DateRangePickerViewProps<TDate> extends RangePositionProps, ExportedDateRangePickerViewProps<TDate>, PickerStatePickerProps<DateRange<TDate>>, Required<BaseDateValidationProps<TDate>> {
+interface DateRangePickerViewProps<TDate> extends RangePositionProps, ExportedDateRangePickerViewProps<TDate>, PickerStatePickerProps<DateRange<TDate>>, Required<BaseDateValidationProps<TDate>>, Pick<ExportedUseViewsOptions<'day'>, 'onFocusedViewChange'> {
     calendars: 1 | 2 | 3;
     open: boolean;
     DateInputProps: DateRangePickerInputProps<TDate>;

package/DateRangePicker/DateRangePickerView.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps"];
+const _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps", "onFocusedViewChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license-pro';
@@ -40,7 +40,8 @@ function DateRangePickerViewRaw(props) {
       showToolbar,
       toggleMobileKeyboardView,
       components,
-      componentsProps
+      componentsProps,
+      onFocusedViewChange
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
@@ -123,7 +124,9 @@ function DateRangePickerViewRaw(props) {
       components,
       componentsProps,
       shouldDisableDate: wrappedShouldDisableDate
-    }, calendarState, other);
+    }, calendarState, {
+      onFocusedViewChange: onFocusedViewChange ? newHasFocus => onFocusedViewChange('day', newHasFocus) : undefined
+    }, other);
     switch (wrapperVariant) {
       case 'desktop':
         {

package/DateRangePicker/DateRangePickerViewMobile.js

@@ -66,7 +66,7 @@ export function DateRangePickerViewMobile(props) {
       maxDate: maxDateWithDisabled,
       minDate: minDateWithDisabled,
       onMonthChange: changeMonth,
-      openView: "day",
+      view: "day",
       views: onlyDayView,
       disabled: disabled
     }, other)), /*#__PURE__*/_jsx(DayCalendar, _extends({}, other, {

package/DateRangePickerDay/DateRangePickerDay.js

@@ -196,10 +196,26 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The date to show.
    */
@@ -219,6 +235,33 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   disableMargin: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
   isAnimating: PropTypes.bool,
   /**
    * Set to `true` if the `day` is the end of a highlighted date range.
@@ -249,6 +292,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    */
   isVisuallySelected: PropTypes.bool,
   onDaySelect: PropTypes.func.isRequired,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
   onMouseEnter: PropTypes.func,
   /**
    * If `true`, day is outside of month and will be hidden.
@@ -264,11 +312,34 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * @default 0
+   */
+  tabIndex: PropTypes.number,
   /**
    * If `true`, renders as today date.
    * @default false
    */
-  today: PropTypes.bool
+  today: PropTypes.bool,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      pulsate: PropTypes.func.isRequired,
+      start: PropTypes.func.isRequired,
+      stop: PropTypes.func.isRequired
+    })
+  })])
 } : void 0;
 
 /**

package/DesktopDateRangePicker/DesktopDateRangePicker.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SxProps } from '@mui/system';
 import { DesktopWrapperProps, DesktopWrapperSlotsComponent, DesktopWrapperSlotsComponentsProps, DateInputSlotsComponent } from '@mui/x-date-pickers/internals';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlotsComponent, BaseDateRangePickerSlotsComponentsProps } from '../DateRangePicker/shared';
 export interface DesktopDateRangePickerSlotsComponent<TDate> extends BaseDateRangePickerSlotsComponent<TDate>, DesktopWrapperSlotsComponent, DateInputSlotsComponent {
@@ -16,6 +17,10 @@ export interface DesktopDateRangePickerProps<TDate> extends BaseDateRangePickerP
      * @default {}
      */
     componentsProps?: DesktopDateRangePickerSlotsComponentsProps<TDate>;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps;
 }
 type DesktopDateRangePickerComponent = (<TDate>(props: DesktopDateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -75,7 +75,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2
@@ -249,11 +248,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: PropTypes.func,
   /**
    * Control the popup or dialog open state.
    */