@mui/x-date-pickers-pro 6.0.0-beta.0 → 6.0.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-beta.1
+
+_Jan 27, 2023_
+
+We'd like to offer a big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 New shortcuts component for the date pickers (#7154) @alexfauquette
+- 🌍 Add Belarusian (be-BY), Czech (cs-CZ) and Russian (ru-RU) locales
+- 🌍 Improve Spanish (es-ES), Japanese (ja-JP), Slovak (sk-SK), and Vietnamese (vi-VN) locales
+- ✨ New codemods for migrating to v6
+- 📚 Documentation improvements
+- 🐞 Bug fixes
+
+### `@mui/x-data-grid@v6.0.0-beta.1` / `@mui/x-data-grid-pro@v6.0.0-beta.1` / `@mui/x-data-grid-premium@v6.0.0-beta.1`
+
+#### Changes
+
+- [DataGrid] Add `title` attribute to cells (#7682) @thupi
+- [DataGrid] Fix `autoHeight` not working properly inside of a flex container (#7701) @cherniavskii
+- [DataGrid] Fix grid state not being updated after print preview is closed (#7642) @cherniavskii
+- [DataGrid] Fix non-hideable columns visibility toggling (#7637) @cherniavskii
+- [DataGrid] Fix scrolling on resize for data grids inside shadow root (#7298) @akiradev
+- [l10n] Add Slovak (sk-SK) translation for aggregation functions (#7702) @msidlo
+- [l10n] Add missing core locales for `MuiTablePagination` (#7717) @MBilalShafi
+- [l10n] Improve Spanish (es-ES) and Vietnamese (vi-VN) locale (#7634) @WiXSL and @SpacerZ
+- [l10n] Add Belarusian (be-BY) locale (#7646) @volhalink
+
+### `@mui/x-date-pickers@v6.0.0-beta.1` / `@mui/x-date-pickers-pro@v6.0.0-beta.1`
+
+#### Changes
+
+- [pickers] Fix `aria-labelledby` assignment to dialog (#7608) @LukasTy
+- [pickers] Support `UTC` with `dayjs` (#7610) @flaviendelangle
+- [pickers] Update focus when opening a UI view (#7620) @alexfauquette
+- [DateRangePickers] Add shortcuts component (#7154) @alexfauquette
+- [l10n] Add Czech (cs-CZ) locale (#7645) @OndrejHj04
+- [l10n] Add Russian (ru-RU) locale (#7706) @rstmzh
+- [l10n] Improve Japanese (ja-JP) locale (#7624) @makoto14
+
+### `@mui/x-codemod@v6.0.0-beta.1`
+
+#### Changes
+
+- [codemod] Add pickers `replace-toolbar-props-by-slot` codemod (#7687) @alexfauquette
+- [codemod] Add `GridColumnMenuItemProps` to `column-menu-components-rename` codemod (#7710) @MBilalShafi
+- [codemod] Add `headerHeight` prop update to `row-selection-props-rename` codemod (#7711) @MBilalShafi
+- [codemod] Add pickers codemod for `components` to `slots` renaming (#7533) @alexfauquette
+- [codemod] Add pickers `migrate-to-components-componentsProps` and `replace-arrows-button-slot` codemods (#7698) @alexfauquette
+- [codemod] Add data grid codemod renaming `rowsPerPageOptions` prop to `pageSizeOptions` (#7603) @MBilalShafi
+- [codemod] Add pickers `rename-should-disable-time` codemod (#7709) @alexfauquette
+- [codemod] Add data grid `row-selection-props-rename` codemod (#7485) @MBilalShafi
+- [codemod] Add data grid `rename-selectors-and-events` codemod (#7699) @MBilalShafi
+- [codemod] Add pickers `replace-tabs-props` codemod (#7639) @alexfauquette
+
+### Docs
+
+- [docs] Add info callout about available component `slots` (#7714) @Vivek-Prajapatii
+- [docs] Add recipe for pinning grouped column (#7712) @MBilalShafi
+- [docs] Fix 404 links to picker API page @oliviertassinari
+- [docs] Update `DemoContainer` `components` prop using a codemod (#7574) @alexfauquette
+
+### Core
+
+- [core] Fix `innerslotProps` typo (#7697) @LukasTy
+- [core] Upgrade monorepo (#7676) @cherniavskii
+
 ## 6.0.0-beta.0
 
 _Jan 19, 2023_
@@ -342,7 +408,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
   ```diff
    <DateTimePicker
   -   shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
-  +   shouldDisableTime={(time, view) => view === 'hours' && value.hour() < 12}
+  +   shouldDisableTime={(value, view) => view === 'hours' && value.hour() < 12}
    />
   ```
 
@@ -1426,7 +1492,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
    // TimePicker, MobileTimePicker, DateRangePicker and MobileDateRangePicker.
    <DatePicker
   -  DialogProps={{ backgroundColor: 'red' }}
-  +  componentsProps={{ dialog: { backgroundColor: 'red }}}
+  +  componentsProps={{ dialog: { backgroundColor: 'red' }}}
    />
   ```
 
@@ -1437,7 +1503,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
    // TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
    <DatePicker
   -  PaperProps={{ backgroundColor: 'red' }}
-  +  componentsProps={{ desktopPaper: { backgroundColor: 'red }}}
+  +  componentsProps={{ desktopPaper: { backgroundColor: 'red' }}}
    />
   ```
 
@@ -1956,6 +2022,44 @@ 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
 
+## v5.17.21
+
+_Jan 27, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Belarusian (be-BY), Czech (cs-CZ), and Russian (ru-RU) locales
+- 🌍 Improve Slovak (sk-SK), Japanese (ja-JP), Vietnamese (vi-VN), and Spanish (es-ES) locales
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.21` / `@mui/x-data-grid-pro@v5.17.21` / `@mui/x-data-grid-premium@v5.17.21`
+
+#### Changes
+
+- [DataGrid] Add `title` attribute to cells (#7695) @thupi
+- [DataGrid] Fix grid state not being updated after print preview is closed (#7680) @cherniavskii
+- [DataGrid] Fix non-hideable columns visibility toggling (#7716) @cherniavskii
+- [DataGrid] Fix scrolling on resize for data grids inside shadow root (#7722) @cherniavskii
+- [DataGridPremium] Create aggregation footer row with `isAutoGenerated: true` (#7681) @m4theushw
+- [l10n] Add Belarusian (be-BY) locale (#7718) @volhalink
+- [l10n] Add Slovak (sk-SK) translation for aggregation functions (#7690) @msidlo
+- [l10n] Add missing core locales for `MuiTablePagination` (#7719) @MBilalShafi
+- [l10n] Improve Japanese (ja-JP) locale (#7627) @makoto14
+- [l10n] Improve Vietnamese (vi-VN) locale (#7601) @SpacerZ
+
+### `@mui/x-date-pickers@v5.0.16` / `@mui/x-date-pickers-pro@v5.0.16`
+
+#### Changes
+
+- [pickers] Add missing components to `themeAugmentation` (#7677) @LukasTy
+- [l10n] Add Czech (cs-CZ) locale (#7666) @OndrejHj04
+- [l10n] Add Russian (ru-RU) locale (#7708) @rstmzh
+- [l10n] Improve Spanish (es-ES) locale (#7614) @WiXSL
+
+### Docs
+
+- [docs] Add info callout about available component `slots` (#7723) @Vivek-Prajapatii
+
 ## 5.17.20
 
 _Jan 19, 2023_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -133,7 +133,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       components,
       componentsProps,
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       loading,
       renderLoading,
       disableHighlightToday,
@@ -149,7 +149,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const [value, setValue] = useControlled({
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : rangeValueManager.emptyValue,

package/DateRangePicker/DateRangePickerToolbar.js

@@ -101,6 +101,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   onRangePositionChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   readOnly: PropTypes.bool,
+  titleId: PropTypes.string,
   /**
    * Toolbar date format.
    */

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -42,7 +42,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   });
   const {
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       components,
       componentsProps,
       value,
@@ -63,7 +63,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const ownerState = themeProps;
   const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputDateRangeFieldRoot;
   const rootProps = useSlotProps({

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -42,7 +42,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   });
   const {
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       components,
       componentsProps,
       value,
@@ -69,7 +69,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const ownerState = themeProps;
   const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputDateTimeRangeFieldRoot;
   const rootProps = useSlotProps({

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -42,7 +42,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   });
   const {
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       components,
       componentsProps,
       value,
@@ -64,7 +64,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const ownerState = themeProps;
   const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputTimeRangeFieldRoot;
   const rootProps = useSlotProps({

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.0.0-beta.0
+ * @mui/x-date-pickers-pro v6.0.0-beta.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -19,7 +19,7 @@ export const useDesktopRangePicker = ({
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   const {
     slots: innerSlots,
-    slotProps: innerslotProps,
+    slotProps: innerSlotProps,
     components,
     componentsProps,
     className,
@@ -32,7 +32,7 @@ export const useDesktopRangePicker = ({
     localeText
   } = props;
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const fieldRef = React.useRef(null);
   const popperRef = React.useRef(null);
   const [rangePosition, setRangePosition] = React.useState('start');

package/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts

@@ -7,7 +7,7 @@ import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponen
 import { DateOrTimeView, UsePickerParams, BasePickerProps, PickersPopperSlotsComponent, PickersPopperSlotsComponentsProps, ExportedBaseToolbarProps, UsePickerViewsProps, UncapitalizeObjectKeys, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps } from '@mui/x-date-pickers/internals';
 import { DateRange, RangePositionProps } from '../../models';
 import { BaseMultiInputFieldProps } from '../../models/fields';
-export interface UseDesktopRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponent, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TView> {
+export interface UseDesktopRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends Pick<PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper'>, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView> {
     Field: React.ElementType;
     FieldRoot?: React.ElementType<StackProps>;
     FieldSeparator?: React.ElementType<TypographyProps>;
@@ -19,7 +19,7 @@ export interface UseDesktopRangePickerSlotsComponent<TDate, TView extends DateOr
      */
     TextField?: React.ElementType<TextFieldProps>;
 }
-export interface UseDesktopRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TView> {
+export interface UseDesktopRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> {
     field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, unknown>>, {}, unknown>;
     fieldRoot?: SlotComponentProps<typeof Stack, {}, unknown>;
     fieldSeparator?: SlotComponentProps<typeof Typography, {}, unknown>;

package/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -4,7 +4,8 @@ import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import { useLicenseVerifier } from '@mui/x-license-pro';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, WrapperVariantContext, PickersModalDialog } from '@mui/x-date-pickers/internals';
+import { usePicker, WrapperVariantContext, PickersModalDialog, useLocaleText } from '@mui/x-date-pickers/internals';
+import useId from '@mui/utils/useId';
 import { useRangePickerInputProps } from '../useRangePickerInputProps';
 import { getReleaseInfo } from '../../utils/releaseInfo';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,11 +16,11 @@ export const useMobileRangePicker = ({
   valueManager,
   validator
 }) => {
-  var _slots$layout;
+  var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$layout;
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   const {
     slots,
-    slotProps,
+    slotProps: innerSlotProps,
     className,
     sx,
     format,
@@ -29,6 +30,8 @@ export const useMobileRangePicker = ({
     localeText
   } = props;
   const [rangePosition, setRangePosition] = React.useState('start');
+  const labelId = useId();
+  const contextLocaleText = useLocaleText();
   const {
     open,
     actions,
@@ -60,7 +63,7 @@ export const useMobileRangePicker = ({
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.field,
+    externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
     additionalProps: _extends({}, pickerFieldProps, {
       readOnly: readOnly != null ? readOnly : true,
       disabled,
@@ -73,36 +76,57 @@ export const useMobileRangePicker = ({
   const slotsForField = _extends({
     textField: slots.textField
   }, fieldProps.slots);
+  const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
   const slotPropsForField = _extends({}, fieldProps.slotProps, {
     textField: ownerState => {
       var _fieldProps$slotProps;
-      const externalInputProps = resolveComponentProps(slotProps == null ? void 0 : slotProps.textField, ownerState);
+      const externalInputProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.textField, ownerState);
       const inputPropsPassedByField = resolveComponentProps((_fieldProps$slotProps = fieldProps.slotProps) == null ? void 0 : _fieldProps$slotProps.textField, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput;
-      return _extends({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
+      return _extends({}, isToolbarHidden && {
+        id: `${labelId}-${ownerState.position}`
+      }, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
         inputProps: _extends({}, externalInputProps == null ? void 0 : externalInputProps.inputProps, inputPropsPassedByField == null ? void 0 : inputPropsPassedByField.inputProps)
       });
     },
     root: ownerState => {
       var _fieldProps$slotProps2;
-      const externalRootProps = resolveComponentProps(slotProps == null ? void 0 : slotProps.fieldRoot, ownerState);
+      const externalRootProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.fieldRoot, ownerState);
       const rootPropsPassedByField = resolveComponentProps((_fieldProps$slotProps2 = fieldProps.slotProps) == null ? void 0 : _fieldProps$slotProps2.root, ownerState);
       return _extends({}, externalRootProps, rootPropsPassedByField, fieldSlotProps.root);
     },
     separator: ownerState => {
       var _fieldProps$slotProps3;
-      const externalSeparatorProps = resolveComponentProps(slotProps == null ? void 0 : slotProps.fieldSeparator, ownerState);
+      const externalSeparatorProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.fieldSeparator, ownerState);
       const separatorPropsPassedByField = resolveComponentProps((_fieldProps$slotProps3 = fieldProps.slotProps) == null ? void 0 : _fieldProps$slotProps3.separator, ownerState);
       return _extends({}, externalSeparatorProps, separatorPropsPassedByField, fieldSlotProps.root);
     }
   });
-  const slotPropsForLayout = _extends({}, slotProps, {
-    toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {
+  const slotPropsForLayout = _extends({}, innerSlotProps, {
+    toolbar: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.toolbar, {
+      titleId: labelId,
       rangePosition,
       onRangePositionChange: setRangePosition
     })
   });
   const Layout = (_slots$layout = slots == null ? void 0 : slots.layout) != null ? _slots$layout : PickersLayout;
+  const finalLocaleText = _extends({}, contextLocaleText, localeText);
+  let labelledById = labelId;
+  if (isToolbarHidden) {
+    const labels = [];
+    if (finalLocaleText.start) {
+      labels.push(`${labelId}-start-label`);
+    }
+    if (finalLocaleText.end) {
+      labels.push(`${labelId}-end-label`);
+    }
+    labelledById = labels.length > 0 ? labels.join(' ') : undefined;
+  }
+  const slotProps = _extends({}, innerSlotProps, {
+    mobilePaper: _extends({
+      'aria-labelledby': labelledById
+    }, innerSlotProps == null ? void 0 : innerSlotProps.mobilePaper)
+  });
   const renderPicker = () => /*#__PURE__*/_jsx(LocalizationProvider, {
     localeText: localeText,
     children: /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {

package/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts

@@ -7,7 +7,7 @@ import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponen
 import { DateOrTimeView, UsePickerParams, BasePickerProps, PickersModalDialogSlotsComponent, PickersModalDialogSlotsComponentsProps, ExportedBaseToolbarProps, UsePickerViewsProps, UncapitalizeObjectKeys, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps } from '@mui/x-date-pickers/internals';
 import { DateRange, RangePositionProps } from '../../models';
 import { BaseMultiInputFieldProps } from '../../models/fields';
-export interface UseMobileRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponent, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TView> {
+export interface UseMobileRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponent, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView> {
     Field: React.ElementType;
     FieldRoot?: React.ElementType<StackProps>;
     FieldSeparator?: React.ElementType<TypographyProps>;
@@ -18,7 +18,7 @@ export interface UseMobileRangePickerSlotsComponent<TDate, TView extends DateOrT
      */
     TextField?: React.ElementType<TextFieldProps>;
 }
-export interface UseMobileRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TView> {
+export interface UseMobileRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> {
     field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, unknown>>, {}, unknown>;
     fieldRoot?: SlotComponentProps<typeof Stack, {}, unknown>;
     fieldSeparator?: SlotComponentProps<typeof Typography, {}, unknown>;

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '@mui/x-date-pickers/PickersLayout/PickersLayout.types';
 import { DateOrTimeView, BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { DateRange } from '../../models/range';
-export interface UseStaticRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TView> {
+export interface UseStaticRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView> {
 }
-export interface UseStaticRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TView> {
+export interface UseStaticRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> {
     toolbar?: ExportedBaseToolbarProps;
 }
 export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps {

package/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3NDE2OTIwMDAwMA==";
+  const releaseInfo = "MTY3NDc1OTYwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/legacy/DateRangeCalendar/DateRangeCalendar.js

@@ -136,7 +136,7 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
     components = props.components,
     componentsProps = props.componentsProps,
     innerSlots = props.slots,
-    innerslotProps = props.slotProps,
+    innerSlotProps = props.slotProps,
     loading = props.loading,
     renderLoading = props.renderLoading,
     disableHighlightToday = props.disableHighlightToday,
@@ -151,7 +151,7 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
     displayWeekNumber = props.displayWeekNumber,
     other = _objectWithoutProperties(props, _excluded);
   var slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  var slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  var slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   var _useControlled = useControlled({
       controlled: valueProp,
       default: defaultValue != null ? defaultValue : rangeValueManager.emptyValue,

package/legacy/DateRangePicker/DateRangePickerToolbar.js

@@ -107,6 +107,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   onRangePositionChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   readOnly: PropTypes.bool,
+  titleId: PropTypes.string,
   /**
    * Toolbar date format.
    */

package/legacy/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -47,7 +47,7 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     name: 'MuiMultiInputDateRangeField'
   });
   var innerSlots = themeProps.slots,
-    innerslotProps = themeProps.slotProps,
+    innerSlotProps = themeProps.slotProps,
     components = themeProps.components,
     componentsProps = themeProps.componentsProps,
     value = themeProps.value,
@@ -67,7 +67,7 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     autoFocus = themeProps.autoFocus,
     other = _objectWithoutProperties(themeProps, _excluded);
   var slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  var slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  var slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   var ownerState = themeProps;
   var Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputDateRangeFieldRoot;
   var rootProps = useSlotProps({

package/legacy/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -47,7 +47,7 @@ var MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiI
     name: 'MuiMultiInputDateTimeRangeField'
   });
   var innerSlots = themeProps.slots,
-    innerslotProps = themeProps.slotProps,
+    innerSlotProps = themeProps.slotProps,
     components = themeProps.components,
     componentsProps = themeProps.componentsProps,
     value = themeProps.value,
@@ -73,7 +73,7 @@ var MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiI
     onSelectedSectionsChange = themeProps.onSelectedSectionsChange,
     other = _objectWithoutProperties(themeProps, _excluded);
   var slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  var slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  var slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   var ownerState = themeProps;
   var Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputDateTimeRangeFieldRoot;
   var rootProps = useSlotProps({

package/legacy/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -47,7 +47,7 @@ var MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     name: 'MuiMultiInputTimeRangeField'
   });
   var innerSlots = themeProps.slots,
-    innerslotProps = themeProps.slotProps,
+    innerSlotProps = themeProps.slotProps,
     components = themeProps.components,
     componentsProps = themeProps.componentsProps,
     value = themeProps.value,
@@ -68,7 +68,7 @@ var MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     onSelectedSectionsChange = themeProps.onSelectedSectionsChange,
     other = _objectWithoutProperties(themeProps, _excluded);
   var slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  var slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  var slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   var ownerState = themeProps;
   var Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputTimeRangeFieldRoot;
   var rootProps = useSlotProps({

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.0.0-beta.0
+ * @mui/x-date-pickers-pro v6.0.0-beta.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -18,7 +18,7 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     validator = _ref.validator;
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   var innerSlots = props.slots,
-    innerslotProps = props.slotProps,
+    innerSlotProps = props.slotProps,
     components = props.components,
     componentsProps = props.componentsProps,
     className = props.className,
@@ -30,7 +30,7 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     disableOpenPicker = props.disableOpenPicker,
     localeText = props.localeText;
   var slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  var slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  var slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   var fieldRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var _React$useState = React.useState('start'),

package/legacy/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -5,20 +5,21 @@ import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import { useLicenseVerifier } from '@mui/x-license-pro';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, WrapperVariantContext, PickersModalDialog } from '@mui/x-date-pickers/internals';
+import { usePicker, WrapperVariantContext, PickersModalDialog, useLocaleText } from '@mui/x-date-pickers/internals';
+import useId from '@mui/utils/useId';
 import { useRangePickerInputProps } from '../useRangePickerInputProps';
 import { getReleaseInfo } from '../../utils/releaseInfo';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var releaseInfo = getReleaseInfo();
 export var useMobileRangePicker = function useMobileRangePicker(_ref) {
-  var _slots$layout;
+  var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$layout;
   var props = _ref.props,
     valueManager = _ref.valueManager,
     validator = _ref.validator;
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   var slots = props.slots,
-    slotProps = props.slotProps,
+    innerSlotProps = props.slotProps,
     className = props.className,
     sx = props.sx,
     format = props.format,
@@ -30,6 +31,8 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     rangePosition = _React$useState2[0],
     setRangePosition = _React$useState2[1];
+  var labelId = useId();
+  var contextLocaleText = useLocaleText();
   var _usePicker = usePicker({
       props: props,
       valueManager: valueManager,
@@ -60,7 +63,7 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
   var Field = slots.field;
   var fieldProps = useSlotProps({
     elementType: Field,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.field,
+    externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
     additionalProps: _extends({}, pickerFieldProps, {
       readOnly: readOnly != null ? readOnly : true,
       disabled: disabled,
@@ -73,36 +76,57 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
   var slotsForField = _extends({
     textField: slots.textField
   }, fieldProps.slots);
+  var isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
   var slotPropsForField = _extends({}, fieldProps.slotProps, {
     textField: function textField(ownerState) {
       var _fieldProps$slotProps;
-      var externalInputProps = resolveComponentProps(slotProps == null ? void 0 : slotProps.textField, ownerState);
+      var externalInputProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.textField, ownerState);
       var inputPropsPassedByField = resolveComponentProps((_fieldProps$slotProps = fieldProps.slotProps) == null ? void 0 : _fieldProps$slotProps.textField, ownerState);
       var inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput;
-      return _extends({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
+      return _extends({}, isToolbarHidden && {
+        id: "".concat(labelId, "-").concat(ownerState.position)
+      }, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
         inputProps: _extends({}, externalInputProps == null ? void 0 : externalInputProps.inputProps, inputPropsPassedByField == null ? void 0 : inputPropsPassedByField.inputProps)
       });
     },
     root: function root(ownerState) {
       var _fieldProps$slotProps2;
-      var externalRootProps = resolveComponentProps(slotProps == null ? void 0 : slotProps.fieldRoot, ownerState);
+      var externalRootProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.fieldRoot, ownerState);
       var rootPropsPassedByField = resolveComponentProps((_fieldProps$slotProps2 = fieldProps.slotProps) == null ? void 0 : _fieldProps$slotProps2.root, ownerState);
       return _extends({}, externalRootProps, rootPropsPassedByField, fieldSlotProps.root);
     },
     separator: function separator(ownerState) {
       var _fieldProps$slotProps3;
-      var externalSeparatorProps = resolveComponentProps(slotProps == null ? void 0 : slotProps.fieldSeparator, ownerState);
+      var externalSeparatorProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.fieldSeparator, ownerState);
       var separatorPropsPassedByField = resolveComponentProps((_fieldProps$slotProps3 = fieldProps.slotProps) == null ? void 0 : _fieldProps$slotProps3.separator, ownerState);
       return _extends({}, externalSeparatorProps, separatorPropsPassedByField, fieldSlotProps.root);
     }
   });
-  var slotPropsForLayout = _extends({}, slotProps, {
-    toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {
+  var slotPropsForLayout = _extends({}, innerSlotProps, {
+    toolbar: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.toolbar, {
+      titleId: labelId,
       rangePosition: rangePosition,
       onRangePositionChange: setRangePosition
     })
   });
   var Layout = (_slots$layout = slots == null ? void 0 : slots.layout) != null ? _slots$layout : PickersLayout;
+  var finalLocaleText = _extends({}, contextLocaleText, localeText);
+  var labelledById = labelId;
+  if (isToolbarHidden) {
+    var labels = [];
+    if (finalLocaleText.start) {
+      labels.push("".concat(labelId, "-start-label"));
+    }
+    if (finalLocaleText.end) {
+      labels.push("".concat(labelId, "-end-label"));
+    }
+    labelledById = labels.length > 0 ? labels.join(' ') : undefined;
+  }
+  var slotProps = _extends({}, innerSlotProps, {
+    mobilePaper: _extends({
+      'aria-labelledby': labelledById
+    }, innerSlotProps == null ? void 0 : innerSlotProps.mobilePaper)
+  });
   var renderPicker = function renderPicker() {
     return /*#__PURE__*/_jsx(LocalizationProvider, {
       localeText: localeText,

package/legacy/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY3NDE2OTIwMDAwMA==";
+  var releaseInfo = "MTY3NDc1OTYwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -132,7 +132,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       components,
       componentsProps,
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       loading,
       renderLoading,
       disableHighlightToday,
@@ -148,7 +148,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const slots = innerSlots ?? uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps ?? componentsProps;
+  const slotProps = innerSlotProps ?? componentsProps;
   const [value, setValue] = useControlled({
     controlled: valueProp,
     default: defaultValue ?? rangeValueManager.emptyValue,

package/modern/DateRangePicker/DateRangePickerToolbar.js

@@ -101,6 +101,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   onRangePositionChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   readOnly: PropTypes.bool,
+  titleId: PropTypes.string,
   /**
    * Toolbar date format.
    */

package/modern/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -38,7 +38,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   });
   const {
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       components,
       componentsProps,
       value,
@@ -59,7 +59,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const slots = innerSlots ?? uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps ?? componentsProps;
+  const slotProps = innerSlotProps ?? componentsProps;
   const ownerState = themeProps;
   const Root = slots?.root ?? MultiInputDateRangeFieldRoot;
   const rootProps = useSlotProps({

package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -38,7 +38,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   });
   const {
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       components,
       componentsProps,
       value,
@@ -65,7 +65,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const slots = innerSlots ?? uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps ?? componentsProps;
+  const slotProps = innerSlotProps ?? componentsProps;
   const ownerState = themeProps;
   const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
   const rootProps = useSlotProps({

package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -38,7 +38,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   });
   const {
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       components,
       componentsProps,
       value,
@@ -60,7 +60,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const slots = innerSlots ?? uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps ?? componentsProps;
+  const slotProps = innerSlotProps ?? componentsProps;
   const ownerState = themeProps;
   const Root = slots?.root ?? MultiInputTimeRangeFieldRoot;
   const rootProps = useSlotProps({

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.0.0-beta.0
+ * @mui/x-date-pickers-pro v6.0.0-beta.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -18,7 +18,7 @@ export const useDesktopRangePicker = ({
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   const {
     slots: innerSlots,
-    slotProps: innerslotProps,
+    slotProps: innerSlotProps,
     components,
     componentsProps,
     className,
@@ -31,7 +31,7 @@ export const useDesktopRangePicker = ({
     localeText
   } = props;
   const slots = innerSlots ?? uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps ?? componentsProps;
+  const slotProps = innerSlotProps ?? componentsProps;
   const fieldRef = React.useRef(null);
   const popperRef = React.useRef(null);
   const [rangePosition, setRangePosition] = React.useState('start');

package/modern/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -4,7 +4,8 @@ import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import { useLicenseVerifier } from '@mui/x-license-pro';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, WrapperVariantContext, PickersModalDialog } from '@mui/x-date-pickers/internals';
+import { usePicker, WrapperVariantContext, PickersModalDialog, useLocaleText } from '@mui/x-date-pickers/internals';
+import useId from '@mui/utils/useId';
 import { useRangePickerInputProps } from '../useRangePickerInputProps';
 import { getReleaseInfo } from '../../utils/releaseInfo';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,7 +19,7 @@ export const useMobileRangePicker = ({
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   const {
     slots,
-    slotProps,
+    slotProps: innerSlotProps,
     className,
     sx,
     format,
@@ -28,6 +29,8 @@ export const useMobileRangePicker = ({
     localeText
   } = props;
   const [rangePosition, setRangePosition] = React.useState('start');
+  const labelId = useId();
+  const contextLocaleText = useLocaleText();
   const {
     open,
     actions,
@@ -59,7 +62,7 @@ export const useMobileRangePicker = ({
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
-    externalSlotProps: slotProps?.field,
+    externalSlotProps: innerSlotProps?.field,
     additionalProps: _extends({}, pickerFieldProps, {
       readOnly: readOnly ?? true,
       disabled,
@@ -72,33 +75,54 @@ export const useMobileRangePicker = ({
   const slotsForField = _extends({
     textField: slots.textField
   }, fieldProps.slots);
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const slotPropsForField = _extends({}, fieldProps.slotProps, {
     textField: ownerState => {
-      const externalInputProps = resolveComponentProps(slotProps?.textField, ownerState);
+      const externalInputProps = resolveComponentProps(innerSlotProps?.textField, ownerState);
       const inputPropsPassedByField = resolveComponentProps(fieldProps.slotProps?.textField, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput;
-      return _extends({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
+      return _extends({}, isToolbarHidden && {
+        id: `${labelId}-${ownerState.position}`
+      }, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
         inputProps: _extends({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps)
       });
     },
     root: ownerState => {
-      const externalRootProps = resolveComponentProps(slotProps?.fieldRoot, ownerState);
+      const externalRootProps = resolveComponentProps(innerSlotProps?.fieldRoot, ownerState);
       const rootPropsPassedByField = resolveComponentProps(fieldProps.slotProps?.root, ownerState);
       return _extends({}, externalRootProps, rootPropsPassedByField, fieldSlotProps.root);
     },
     separator: ownerState => {
-      const externalSeparatorProps = resolveComponentProps(slotProps?.fieldSeparator, ownerState);
+      const externalSeparatorProps = resolveComponentProps(innerSlotProps?.fieldSeparator, ownerState);
       const separatorPropsPassedByField = resolveComponentProps(fieldProps.slotProps?.separator, ownerState);
       return _extends({}, externalSeparatorProps, separatorPropsPassedByField, fieldSlotProps.root);
     }
   });
-  const slotPropsForLayout = _extends({}, slotProps, {
-    toolbar: _extends({}, slotProps?.toolbar, {
+  const slotPropsForLayout = _extends({}, innerSlotProps, {
+    toolbar: _extends({}, innerSlotProps?.toolbar, {
+      titleId: labelId,
       rangePosition,
       onRangePositionChange: setRangePosition
     })
   });
   const Layout = slots?.layout ?? PickersLayout;
+  const finalLocaleText = _extends({}, contextLocaleText, localeText);
+  let labelledById = labelId;
+  if (isToolbarHidden) {
+    const labels = [];
+    if (finalLocaleText.start) {
+      labels.push(`${labelId}-start-label`);
+    }
+    if (finalLocaleText.end) {
+      labels.push(`${labelId}-end-label`);
+    }
+    labelledById = labels.length > 0 ? labels.join(' ') : undefined;
+  }
+  const slotProps = _extends({}, innerSlotProps, {
+    mobilePaper: _extends({
+      'aria-labelledby': labelledById
+    }, innerSlotProps?.mobilePaper)
+  });
   const renderPicker = () => /*#__PURE__*/_jsx(LocalizationProvider, {
     localeText: localeText,
     children: /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {

package/modern/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3NDE2OTIwMDAwMA==";
+  const releaseInfo = "MTY3NDc1OTYwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -140,7 +140,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       components,
       componentsProps,
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       loading,
       renderLoading,
       disableHighlightToday,
@@ -156,7 +156,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
-  const slotProps = innerslotProps ?? componentsProps;
+  const slotProps = innerSlotProps ?? componentsProps;
   const [value, setValue] = (0, _useControlled.default)({
     controlled: valueProp,
     default: defaultValue ?? _valueManagers.rangeValueManager.emptyValue,

package/node/DateRangePicker/DateRangePickerToolbar.js

@@ -110,6 +110,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   onRangePositionChange: _propTypes.default.func.isRequired,
   rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
   readOnly: _propTypes.default.bool,
+  titleId: _propTypes.default.string,
   /**
    * Toolbar date format.
    */

package/node/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -46,7 +46,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   });
   const {
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       components,
       componentsProps,
       value,
@@ -67,7 +67,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
-  const slotProps = innerslotProps ?? componentsProps;
+  const slotProps = innerSlotProps ?? componentsProps;
   const ownerState = themeProps;
   const Root = slots?.root ?? MultiInputDateRangeFieldRoot;
   const rootProps = (0, _utils.useSlotProps)({

package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -46,7 +46,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   });
   const {
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       components,
       componentsProps,
       value,
@@ -73,7 +73,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
-  const slotProps = innerslotProps ?? componentsProps;
+  const slotProps = innerSlotProps ?? componentsProps;
   const ownerState = themeProps;
   const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
   const rootProps = (0, _utils.useSlotProps)({

package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -46,7 +46,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   });
   const {
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       components,
       componentsProps,
       value,
@@ -68,7 +68,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
-  const slotProps = innerslotProps ?? componentsProps;
+  const slotProps = innerSlotProps ?? componentsProps;
   const ownerState = themeProps;
   const Root = slots?.root ?? MultiInputTimeRangeFieldRoot;
   const rootProps = (0, _utils.useSlotProps)({

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.0.0-beta.0
+ * @mui/x-date-pickers-pro v6.0.0-beta.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -26,7 +26,7 @@ const useDesktopRangePicker = ({
   (0, _xLicensePro.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
   const {
     slots: innerSlots,
-    slotProps: innerslotProps,
+    slotProps: innerSlotProps,
     components,
     componentsProps,
     className,
@@ -39,7 +39,7 @@ const useDesktopRangePicker = ({
     localeText
   } = props;
   const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
-  const slotProps = innerslotProps ?? componentsProps;
+  const slotProps = innerSlotProps ?? componentsProps;
   const fieldRef = React.useRef(null);
   const popperRef = React.useRef(null);
   const [rangePosition, setRangePosition] = React.useState('start');

package/node/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -12,6 +12,7 @@ var _xLicensePro = require("@mui/x-license-pro");
 var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
 var _PickersLayout = require("@mui/x-date-pickers/PickersLayout");
 var _internals = require("@mui/x-date-pickers/internals");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useRangePickerInputProps = require("../useRangePickerInputProps");
 var _releaseInfo = require("../../utils/releaseInfo");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,7 +27,7 @@ const useMobileRangePicker = ({
   (0, _xLicensePro.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
   const {
     slots,
-    slotProps,
+    slotProps: innerSlotProps,
     className,
     sx,
     format,
@@ -36,6 +37,8 @@ const useMobileRangePicker = ({
     localeText
   } = props;
   const [rangePosition, setRangePosition] = React.useState('start');
+  const labelId = (0, _useId.default)();
+  const contextLocaleText = (0, _internals.useLocaleText)();
   const {
     open,
     actions,
@@ -67,7 +70,7 @@ const useMobileRangePicker = ({
   const Field = slots.field;
   const fieldProps = (0, _utils.useSlotProps)({
     elementType: Field,
-    externalSlotProps: slotProps?.field,
+    externalSlotProps: innerSlotProps?.field,
     additionalProps: (0, _extends2.default)({}, pickerFieldProps, {
       readOnly: readOnly ?? true,
       disabled,
@@ -80,33 +83,54 @@ const useMobileRangePicker = ({
   const slotsForField = (0, _extends2.default)({
     textField: slots.textField
   }, fieldProps.slots);
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const slotPropsForField = (0, _extends2.default)({}, fieldProps.slotProps, {
     textField: ownerState => {
-      const externalInputProps = (0, _utils.resolveComponentProps)(slotProps?.textField, ownerState);
+      const externalInputProps = (0, _utils.resolveComponentProps)(innerSlotProps?.textField, ownerState);
       const inputPropsPassedByField = (0, _utils.resolveComponentProps)(fieldProps.slotProps?.textField, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput;
-      return (0, _extends2.default)({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
+      return (0, _extends2.default)({}, isToolbarHidden && {
+        id: `${labelId}-${ownerState.position}`
+      }, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
         inputProps: (0, _extends2.default)({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps)
       });
     },
     root: ownerState => {
-      const externalRootProps = (0, _utils.resolveComponentProps)(slotProps?.fieldRoot, ownerState);
+      const externalRootProps = (0, _utils.resolveComponentProps)(innerSlotProps?.fieldRoot, ownerState);
       const rootPropsPassedByField = (0, _utils.resolveComponentProps)(fieldProps.slotProps?.root, ownerState);
       return (0, _extends2.default)({}, externalRootProps, rootPropsPassedByField, fieldSlotProps.root);
     },
     separator: ownerState => {
-      const externalSeparatorProps = (0, _utils.resolveComponentProps)(slotProps?.fieldSeparator, ownerState);
+      const externalSeparatorProps = (0, _utils.resolveComponentProps)(innerSlotProps?.fieldSeparator, ownerState);
       const separatorPropsPassedByField = (0, _utils.resolveComponentProps)(fieldProps.slotProps?.separator, ownerState);
       return (0, _extends2.default)({}, externalSeparatorProps, separatorPropsPassedByField, fieldSlotProps.root);
     }
   });
-  const slotPropsForLayout = (0, _extends2.default)({}, slotProps, {
-    toolbar: (0, _extends2.default)({}, slotProps?.toolbar, {
+  const slotPropsForLayout = (0, _extends2.default)({}, innerSlotProps, {
+    toolbar: (0, _extends2.default)({}, innerSlotProps?.toolbar, {
+      titleId: labelId,
       rangePosition,
       onRangePositionChange: setRangePosition
     })
   });
   const Layout = slots?.layout ?? _PickersLayout.PickersLayout;
+  const finalLocaleText = (0, _extends2.default)({}, contextLocaleText, localeText);
+  let labelledById = labelId;
+  if (isToolbarHidden) {
+    const labels = [];
+    if (finalLocaleText.start) {
+      labels.push(`${labelId}-start-label`);
+    }
+    if (finalLocaleText.end) {
+      labels.push(`${labelId}-end-label`);
+    }
+    labelledById = labels.length > 0 ? labels.join(' ') : undefined;
+  }
+  const slotProps = (0, _extends2.default)({}, innerSlotProps, {
+    mobilePaper: (0, _extends2.default)({
+      'aria-labelledby': labelledById
+    }, innerSlotProps?.mobilePaper)
+  });
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
     localeText: localeText,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.WrapperVariantContext.Provider, {

package/node/internal/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY3NDE2OTIwMDAwMA==";
+  const releaseInfo = "MTY3NDc1OTYwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "6.0.0-beta.0",
+  "version": "6.0.0-beta.1",
   "description": "The commercial edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -36,7 +36,7 @@
     "@date-io/luxon": "^2.16.1",
     "@date-io/moment": "^2.16.1",
     "@mui/utils": "^5.11.2",
-    "@mui/x-date-pickers": "6.0.0-beta.0",
+    "@mui/x-date-pickers": "6.0.0-beta.1",
     "@mui/x-license-pro": "6.0.0-beta.0",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",