@mui/x-date-pickers-pro 6.0.0-alpha.12 → 6.0.0-alpha.14

package/CHANGELOG.md

@@ -3,6 +3,217 @@
 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.14
+
+_Jan 5, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 📆 Add `SingleInputTimeRangeField` and `SingleInputDateTimeRangeField` components (#7186) @alexfauquette
+- 🚀 Use grid for modifying pickers layout (#6900) @alexfauquette
+- ✨ Improve field components editing experience (#7272) @flaviendelangle
+- 💻 Multiple codemods
+- 📚 Many documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.14` / `@mui/x-data-grid-pro@v6.0.0-alpha.14` / `@mui/x-data-grid-premium@v6.0.0-alpha.14`
+
+#### Breaking changes
+
+- [DataGrid] Set default `GridCellParams['value']` type to `unknown` (#6959) @cherniavskii
+
+  The default type of `GridCellParams['value']` was changed from `any` to `unknown`.
+
+#### Changes
+
+- [DataGrid] Fix flickering on mount (#7205) @cherniavskii
+- [DataGrid] Fix selected text in cell input not being copied in Firefox (#6593) @cherniavskii
+- [DataGrid] Invert generic parameters order (#6874) @DanailH
+- [DataGrid] Remove legacy logic for `singleSelect` inside `GridFilterInputValue` (#7386) @m4theushw
+- [DataGrid] Remove remaining props from legacy editing API (#7381) @m4theushw
+- [DataGrid] Set default `GridCellParams['value']` type to `unknown` (#6959) @cherniavskii
+
+### `@mui/x-date-pickers@v6.0.0-alpha.14` / `@mui/x-date-pickers-pro@v6.0.0-alpha.14`
+
+#### Breaking changes
+
+- [fields] Rename the `input` slot of the fields to `textField` to avoid confusion (#7369) @flaviendelangle
+
+#### Changes
+
+- [fields] Add `SingleInputTimeRangeField` and `SingleInputDateTimeRangeField` components (#7186) @alexfauquette
+- [fields] Improve editing (automatic section switch, allow letter editing in digit section, allow numeric editing in letter section) (#7272) @flaviendelangle
+- [fields] Rename the `input` slot of the fields to `textField` to avoid confusion (#7369) @flaviendelangle
+- [fields] Prevent date change on `TimeField` arrow edition (#7383) @flaviendelangle
+- [pickers] Clean some JSDoc descriptions (#7384) @flaviendelangle
+- [pickers] Remove redundant `variants` in theme augmentation (#7356) @LukasTy
+- [pickers] Remove the `PaperContent` slot from the new pickers (#7342) @flaviendelangle
+- [pickers] Use grid for modifying the layout (#6900) @alexfauquette
+
+### `@mui/x-codemod@v6.0.0-alpha.14`
+
+#### Changes
+
+- [codemod] Add new codemod for adapter import (#7348) @flaviendelangle
+- [codemod] Add new codemod for the value prop renaming on the view components (#7338) @flaviendelangle
+- [codemod] Reorganize codemods and add rename column menu components codemod (#7368) @MBilalShafi
+
+### Docs
+
+- [docs] Add example to add back the mobile keyboard view (#7347) @flaviendelangle
+- [docs] Cleanup the doc pages of the community pickers (#7339) @flaviendelangle
+- [docs] Drop security fixes support for v4 (#7322) @oliviertassinari
+- [docs] Fix `disablePast` and `disableFuture` definition swap (#7324) @alexfauquette
+- [docs] Hide ad for paid docs pages (#7321) @oliviertassinari
+- [docs] New page for `TimeClock` (#7280) @flaviendelangle
+- [docs] Note the pickers breaking changes supported by the codemod (#7337) @flaviendelangle
+- [docs] Redirect translated pages (#7341) @cherniavskii
+- [docs] Reorganize v6 pickers migration guide (#7257) @flaviendelangle
+
+### Core
+
+- [core] Apply eslint rule for React component @oliviertassinari
+- [core] Apply title capitalization convention @oliviertassinari
+- [core] Fix the product license reference name (#7367) @oliviertassinari
+- [core] Order the slots alphabetically in the JSON files (#7349) @flaviendelangle
+- [core] Remove blanklines in `_redirects` @oliviertassinari
+- [core] Remove dead prettier config @oliviertassinari
+- [core] Sync back with the mono repo (#7351) @oliviertassinari
+- [core] Sync monorepo, fix layout scrollbar @oliviertassinari
+- [core] Upgrade monorepo (#7307) @LukasTy
+
+## 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_
@@ -1375,6 +1586,61 @@ 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.18
+
+_Jan 5, 2023_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.18` / `@mui/x-data-grid-pro@v5.17.18` / `@mui/x-data-grid-premium@v5.17.18`
+
+#### Changes
+
+- [DataGrid] Fix rows not rendering properly after height change (#7376) @cherniavskii
+- [DataGrid] Fix selected text in cell input not being copied in Firefox (#7330) @cherniavskii
+- [DataGridPremium] Export row grouping column menu components (#7308) @cherniavskii
+
+### `@mui/x-date-pickers@v5.0.13` / `@mui/x-date-pickers-pro@v5.0.13`
+
+#### Changes
+
+- [pickers] Fix the product license reference name (#7367)
+
+### Docs
+
+- [docs] Redirect translated pages (#7370) @cherniavskii
+
+### Core
+
+- [core] Fix release date (#7314) @DanailH
+- [core] Fix the product license reference name (#7367) @oliviertassinari
+- [core] Upgrade monorepo (#7344) @cherniavskii
+
+## 5.17.17
+
+_Dec 24, 2022_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Russian (ru-RU) and Korean (ko-KR) locales
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.17` / `@mui/x-data-grid-pro@v5.17.17` / `@mui/x-data-grid-premium@v5.17.17`
+
+#### Changes
+
+- [DataGrid] Update Russian (ru-RU) locale (#7291) @VeceluXa
+- [DataGridPro] Use row ID as `key` of the detail panels (#7311) @m4theushw
+- [DataGridPremium] Fix `exceljs` import with parcel (#7285) @alexfauquette
+
+### `@mui/x-date-pickers@v5.0.12` / `@mui/x-date-pickers-pro@v5.0.12`
+
+#### Changes
+
+- [pickers] Improve Korean (ko-KR) locale (#7283) @hanbin9775
+
 ## 5.17.16
 
 _Dec 16, 2022_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -383,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,
@@ -438,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.
@@ -488,7 +494,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    */
   disableDragEditing: PropTypes.bool,
   /**
-   * If `true` disable values before the current date for date components, time for time components and both for date time components.
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
    * @default false
    */
   disableFuture: PropTypes.bool,
@@ -498,7 +504,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    */
   disableHighlightToday: PropTypes.bool,
   /**
-   * If `true` disable values after the current date for date components, time for time components and both for date time components.
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
    * @default false
    */
   disablePast: PropTypes.bool,
@@ -513,7 +519,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    */
   fixedWeekNumber: PropTypes.number,
   /**
-   * If `true` renders `LoadingComponent` in calendar instead of calendar view.
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.
    * @default false
    */

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

@@ -108,7 +108,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * If `true` disable values before the current date for date components, time for time components and both for date time components.
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
    * @default false
    */
   disableFuture: PropTypes.bool,
@@ -128,7 +128,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   disableOpenPicker: PropTypes.bool,
   /**
-   * If `true` disable values after the current date for date components, time for time components and both for date time components.
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
    * @default false
    */
   disablePast: PropTypes.bool,
@@ -169,7 +169,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   })]),
   label: PropTypes.node,
   /**
-   * If `true` renders `LoadingComponent` in calendar instead of calendar view.
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.
    * @default false
    */
@@ -234,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.
    */
@@ -303,14 +298,14 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Disable specific month.
    * @template TDate
    * @param {TDate} month The month to test.
-   * @returns {boolean} If `true` the month will be disabled.
+   * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific year.
    * @template TDate
    * @param {TDate} year The year to test.
-   * @returns {boolean} If `true` the year will be disabled.
+   * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,
   /**

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -10,4 +10,5 @@ export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbar
 /**
  * @ignore - internal component.
  */
-export declare const DateRangePickerToolbar: React.ForwardRefExoticComponent<DateRangePickerToolbarProps<unknown> & React.RefAttributes<HTMLDivElement>>;
+declare const DateRangePickerToolbar: React.ForwardRefExoticComponent<DateRangePickerToolbarProps<unknown> & React.RefAttributes<HTMLDivElement>>;
+export { DateRangePickerToolbar };

package/DateRangePicker/DateRangePickerToolbar.js

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -37,7 +39,7 @@ const DateRangePickerToolbarContainer = styled('div', {
 /**
  * @ignore - internal component.
  */
-export const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangePickerToolbar(inProps, ref) {
+const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangePickerToolbar(inProps, ref) {
   const utils = useUtils();
   const props = useThemeProps({
     props: inProps,
@@ -49,7 +51,8 @@ export const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function Dat
     toggleMobileKeyboardView,
     rangePosition,
     onRangePositionChange,
-    toolbarFormat
+    toolbarFormat,
+    className
   } = props;
   const localeText = useLocaleText();
   const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : localeText.start;
@@ -61,7 +64,7 @@ export const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function Dat
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: false,
-    className: classes.root,
+    className: clsx(className, classes.root),
     ownerState: ownerState,
     ref: ref,
     children: /*#__PURE__*/_jsxs(DateRangePickerToolbarContainer, {
@@ -82,4 +85,32 @@ export const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function Dat
       })]
     })
   });
-});
+});
+process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  /**
+   * className applied to the root component.
+   */
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  isMobileKeyboardViewOpen: PropTypes.bool,
+  onRangePositionChange: PropTypes.func.isRequired,
+  rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
+  readOnly: PropTypes.bool,
+  toggleMobileKeyboardView: PropTypes.func,
+  /**
+   * Toolbar date format.
+   */
+  toolbarFormat: PropTypes.string,
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder: PropTypes.node,
+  value: PropTypes.arrayOf(PropTypes.any).isRequired
+} : void 0;
+export { DateRangePickerToolbar };

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/DateRangePicker/index.d.ts

@@ -1,9 +1,11 @@
 export { DateRangePicker } from './DateRangePicker';
 export type { DateRangePickerProps } from './DateRangePicker';
-export { getDateRangePickerInputUtilityClass, dateRangePickerInputClasses, } from './dateRangePickerInputClasses';
-export type { DateRangePickerInputClasses, DateRangePickerInputClassKey, } from './dateRangePickerInputClasses';
+export { DateRangePickerToolbar } from './DateRangePickerToolbar';
+export type { DateRangePickerToolbarProps } from './DateRangePickerToolbar';
 export { getDateRangePickerToolbarUtilityClass, dateRangePickerToolbarClasses, } from './dateRangePickerToolbarClasses';
 export type { DateRangePickerToolbarClasses, DateRangePickerToolbarClassKey, } from './dateRangePickerToolbarClasses';
+export { getDateRangePickerInputUtilityClass, dateRangePickerInputClasses, } from './dateRangePickerInputClasses';
+export type { DateRangePickerInputClasses, DateRangePickerInputClassKey, } from './dateRangePickerInputClasses';
 export { getDateRangePickerViewDesktopUtilityClass, dateRangePickerViewDesktopClasses, } from './dateRangePickerViewDesktopClasses';
 export type { DateRangePickerViewDesktopClasses, DateRangePickerViewDesktopClassKey, } from './dateRangePickerViewDesktopClasses';
 export type { DateRange } from '../internal/models';

package/DateRangePicker/index.js

@@ -1,4 +1,5 @@
 export { DateRangePicker } from './DateRangePicker';
-export { getDateRangePickerInputUtilityClass, dateRangePickerInputClasses } from './dateRangePickerInputClasses';
+export { DateRangePickerToolbar } from './DateRangePickerToolbar';
 export { getDateRangePickerToolbarUtilityClass, dateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
+export { getDateRangePickerInputUtilityClass, dateRangePickerInputClasses } from './dateRangePickerInputClasses';
 export { getDateRangePickerViewDesktopUtilityClass, dateRangePickerViewDesktopClasses } from './dateRangePickerViewDesktopClasses';