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

package/CHANGELOG.md

@@ -3,6 +3,124 @@
 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.2
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Support week day formats in the field components
+- 🌍 Add Hungarian (hu-HU) and Urdu (ur-PK) locales
+- 🌍 Improve French (fr-FR) and Italian (it-IT) locales
+- ✨ New codemods for migrating to v6
+- 📚 Documentation improvements
+- 🐞 Bug fixes
+
+### `@mui/x-data-grid@v6.0.0-beta.2` / `@mui/x-data-grid-pro@v6.0.0-beta.2` / `@mui/x-data-grid-premium@v6.0.0-beta.2`
+
+#### Changes
+
+- [DataGrid] Handle non-numeric values returned by `getRowHeight` prop (#7703) @cherniavskii
+- [DataGrid] Merge row styles with `componentsProps.row.style` (#7641) @marktoman
+- [l10n] Add Hungarian (hu-HU) locale (#7776) @noherczeg
+- [l10n] Add Urdu (ur-PK) locale (#6866) @MBilalShafi
+- [l10n] Improve French (fr-FR) locale (#7777) @Vivek-Prajapatii
+- [l10n] Improve Italian (it-IT) locale (#7761) @simonecervini
+
+### `@mui/x-date-pickers@v6.0.0-beta.2` / `@mui/x-date-pickers-pro@v6.0.0-beta.2`
+
+#### Changes
+
+- [fields] Support week day formats (#7392) @flaviendelangle
+- [pickers] Allow to initialize and control the `rangePosition` on all range components (#7764) @flaviendelangle
+- [pickers] Fix theme augmentation (#7800) @LukasTy
+- [pickers] Hide scrollbars in the date calendar container (#7766) @Vivek-Prajapatii
+- [pickers] Remove the dependency on `rifm` (#7785) @alexfauquette
+
+### `@mui/x-codemod@v6.0.0-beta.2`
+
+#### Changes
+
+- [codemod] Add pickers `rename-default-toolbar-title-localeText` codemod (#7752) @LukasTy
+- [codemod] Add pickers `rename-inputFormat-prop` codemod (#7736) @LukasTy
+
+### Docs
+
+- [docs] Fix a typo in data grid layout page (#7113) @sfbaker7
+- [docs] Fix require context path to avoid duplicate key creation (#7781) @LukasTy
+- [docs] Polish pickers migration docs (#7737) @LukasTy
+- [docs] Rename `next` translation docs and remove duplicates with `-next` (#7729) @LukasTy
+
+### Core
+
+- [core] Fix l10n data file (#7804) @flaviendelangle
+- [core] Fix Next.js warning (#7754) @oliviertassinari
+- [core] Remove unused demos (#7758) @flaviendelangle
+
+## 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 +460,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}
    />
   ```
 
@@ -1302,8 +1420,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 - The toolbar related translation keys have been renamed to better fit their usage:
 
   ```diff
-   // Same on all other pickers
-   <DatePicker
+   <LocalizationProvider
      localeText={{
   -    datePickerDefaultToolbarTitle: 'Date Picker',
   +    datePickerToolbarTitle: 'Date Picker',
@@ -1426,7 +1543,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 +1554,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 +2073,70 @@ 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.22
+
+_Feb 2, 2023_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Urdu (ur-PK) locale
+- 🌍 Improve French (fr-FR) and Italian (it-IT) locales
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.22` / `@mui/x-data-grid-pro@v5.17.22` / `@mui/x-data-grid-premium@v5.17.22`
+
+#### Changes
+
+- [DataGrid] Fix an error when deleting pinned row using the buttons in the `actions` column (#7767) @cherniavskii
+- [DataGrid] Fix print preview regression in Chrome browser (#7405) @cherniavskii
+- [l10n] Add Urdu (ur-PK) locale (#7778) @MBilalShafi
+- [l10n] Improve French (fr-FR) locale (#7795) @Vivek-Prajapatii
+
+### `@mui/x-date-pickers@v5.0.17` / `@mui/x-date-pickers-pro@v5.0.17`
+
+#### Changes
+
+- [TimePicker] Add missing `themeAugmentation` entry (#7732) @LukasTy
+- [l10n] Improve Italian (it-IT) locale (#7761) @simonecervini
+
+## 5.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

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "onRangePositionChange", "calendars", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber"],
+const _excluded = ["value", "defaultValue", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -20,6 +20,7 @@ import { calculateRangeChange, calculateRangePreview } from '../internal/utils/d
 import { DateRangePickerDay, dateRangePickerDayClasses as dayClasses } from '../DateRangePickerDay';
 import { rangeValueManager } from '../internal/utils/valueManagers';
 import { useDragRange } from './useDragRange';
+import { useRangePosition } from '../internal/hooks/useRangePosition';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
@@ -127,13 +128,14 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       reduceAnimations,
       onMonthChange,
       defaultCalendarMonth,
-      rangePosition: rangePositionProps,
-      onRangePositionChange,
+      rangePosition: rangePositionProp,
+      defaultRangePosition: inDefaultRangePosition,
+      onRangePositionChange: inOnRangePositionChange,
       calendars,
       components,
       componentsProps,
       slots: innerSlots,
-      slotProps: innerslotProps,
+      slotProps: innerSlotProps,
       loading,
       renderLoading,
       disableHighlightToday,
@@ -149,22 +151,24 @@ 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,
     name: 'DateRangeCalendar',
     state: 'value'
   });
-  const [rangePosition, setRangePosition] = useControlled({
-    controlled: rangePositionProps,
-    default: 'start',
-    name: 'DateRangeCalendar',
-    state: 'rangePosition'
+  const {
+    rangePosition,
+    onRangePositionChange
+  } = useRangePosition({
+    rangePosition: rangePositionProp,
+    defaultRangePosition: inDefaultRangePosition,
+    onRangePositionChange: inOnRangePositionChange
   });
   const handleDatePositionChange = useEventCallback(position => {
     if (rangePosition !== position) {
-      setRangePosition(position);
+      onRangePositionChange(position);
     }
   });
   const handleSelectedDayChange = useEventCallback((newDate, selectionState, allowRangeFlip = false) => {
@@ -178,8 +182,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       rangePosition,
       allowRangeFlip
     });
-    setRangePosition(nextSelection);
-    onRangePositionChange == null ? void 0 : onRangePositionChange(nextSelection);
+    onRangePositionChange(nextSelection);
     const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
     setValue(newRange);
     onChange == null ? void 0 : onChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
@@ -482,6 +485,12 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * Default calendar month displayed when `value={[null, null]}`.
    */
   defaultCalendarMonth: PropTypes.any,
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition: PropTypes.oneOf(['end', 'start']),
   /**
    * The default selected value.
    * Used when the component is not controlled.
@@ -555,7 +564,15 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @returns {void|Promise} -
    */
   onMonthChange: PropTypes.func,
+  /**
+   * Callback fired when the range position changes.
+   * @param {RangePosition} rangePosition The new range position.
+   */
   onRangePositionChange: PropTypes.func,
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
   rangePosition: PropTypes.oneOf(['end', 'start']),
   /**
    * Make picker read only.

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -3,9 +3,10 @@ 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, ExportedUseViewsOptions, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
-import { DateRange, RangePositionProps, DayRangeValidationProps } from '../internal/models';
+import { DateRange, DayRangeValidationProps } from '../internal/models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
 import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';
+import { UseRangePositionProps } from '../internal/hooks/useRangePosition';
 export type DateRangePosition = 'start' | 'end';
 export interface DateRangeCalendarSlotsComponent<TDate> extends PickersArrowSwitcherSlotsComponent, Omit<DayCalendarSlotsComponent<TDate>, 'Day'>, PickersCalendarHeaderSlotsComponent {
     /**
@@ -64,7 +65,7 @@ export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalend
      */
     disableDragEditing?: boolean;
 }
-export interface DateRangeCalendarProps<TDate> extends ExportedDateRangeCalendarProps<TDate>, Partial<RangePositionProps> {
+export interface DateRangeCalendarProps<TDate> extends ExportedDateRangeCalendarProps<TDate>, UseRangePositionProps {
     /**
      * The selected value.
      * Used when the component is controlled.

package/DateRangeCalendar/index.d.ts

@@ -1,3 +1,4 @@
 export { DateRangeCalendar } from './DateRangeCalendar';
 export type { DateRangeCalendarProps, DateRangeCalendarSlotsComponent, DateRangeCalendarSlotsComponentsProps, ExportedDateRangeCalendarProps, } from './DateRangeCalendar.types';
 export { getDateRangeCalendarUtilityClass, dateRangeCalendarClasses, } from './dateRangeCalendarClasses';
+export type { DateRangeCalendarClassKey, DateRangeCalendarClasses, } from './dateRangeCalendarClasses';

package/DateRangePicker/DateRangePicker.js

@@ -80,6 +80,12 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Default calendar month displayed when `value={[null, null]}`.
    */
   defaultCalendarMonth: PropTypes.any,
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition: PropTypes.oneOf(['end', 'start']),
   /**
    * The default value.
    * Used when the component is not controlled.
@@ -199,6 +205,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
+  /**
+   * Callback fired when the range position changes.
+   * @param {RangePosition} rangePosition The new range position.
+   */
+  onRangePositionChange: PropTypes.func,
   /**
    * Callback fired when the selected sections change.
    * @param {FieldSelectedSections} newValue The new selected sections.
@@ -209,6 +220,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default false
    */
   open: PropTypes.bool,
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition: PropTypes.oneOf(['end', 'start']),
   readOnly: PropTypes.bool,
   /**
    * Disable heavy animations.
@@ -230,7 +246,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
-import { DateRange, RangePositionProps } from '../internal/models';
+import { DateRange } from '../internal/models';
+import { UseRangePositionResponse } from '../internal/hooks/useRangePosition';
 import { DateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
-export interface DateRangePickerToolbarProps<TDate> extends Omit<BaseToolbarProps<DateRange<TDate>, 'day'>, 'views' | 'view' | 'onViewChange' | 'onChange' | 'isLandscape'>, RangePositionProps {
+export interface DateRangePickerToolbarProps<TDate> extends Omit<BaseToolbarProps<DateRange<TDate>, 'day'>, 'views' | 'view' | 'onViewChange' | 'onChange' | 'isLandscape'>, UseRangePositionResponse {
     classes?: Partial<DateRangePickerToolbarClasses>;
 }
 export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {

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/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -94,6 +94,12 @@ DesktopDateRangePicker.propTypes = {
    * Default calendar month displayed when `value={[null, null]}`.
    */
   defaultCalendarMonth: PropTypes.any,
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition: PropTypes.oneOf(['end', 'start']),
   /**
    * The default value.
    * Used when the component is not controlled.
@@ -207,6 +213,11 @@ DesktopDateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
+  /**
+   * Callback fired when the range position changes.
+   * @param {RangePosition} rangePosition The new range position.
+   */
+  onRangePositionChange: PropTypes.func,
   /**
    * Callback fired when the selected sections change.
    * @param {FieldSelectedSections} newValue The new selected sections.
@@ -217,6 +228,11 @@ DesktopDateRangePicker.propTypes = {
    * @default false
    */
   open: PropTypes.bool,
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition: PropTypes.oneOf(['end', 'start']),
   readOnly: PropTypes.bool,
   /**
    * Disable heavy animations.
@@ -238,7 +254,7 @@ DesktopDateRangePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -97,6 +97,12 @@ MobileDateRangePicker.propTypes = {
    * Default calendar month displayed when `value={[null, null]}`.
    */
   defaultCalendarMonth: PropTypes.any,
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition: PropTypes.oneOf(['end', 'start']),
   /**
    * The default value.
    * Used when the component is not controlled.
@@ -210,6 +216,11 @@ MobileDateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
+  /**
+   * Callback fired when the range position changes.
+   * @param {RangePosition} rangePosition The new range position.
+   */
+  onRangePositionChange: PropTypes.func,
   /**
    * Callback fired when the selected sections change.
    * @param {FieldSelectedSections} newValue The new selected sections.
@@ -220,6 +231,11 @@ MobileDateRangePicker.propTypes = {
    * @default false
    */
   open: PropTypes.bool,
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition: PropTypes.oneOf(['end', 'start']),
   readOnly: PropTypes.bool,
   /**
    * Disable heavy animations.
@@ -241,7 +257,7 @@ MobileDateRangePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

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({
@@ -249,7 +249,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

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({
@@ -291,7 +291,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

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({
@@ -265,7 +265,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -218,7 +218,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -250,7 +250,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -235,7 +235,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),