@mui/x-date-pickers 6.18.3 → 6.18.5

package/CHANGELOG.md

@@ -3,6 +3,88 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.18.5
+
+_Dec 14, 2023_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Swedish (sv-SE) and Urdu (ur-PK) locales on the Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.5`
+
+- [l10n] Improve Swedish (sv-SE) locale (#11379) @fredrikcarlbom
+- [l10n] Improve Urdu (ur-PK) locale for data grid (#11409) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@6.18.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.5`.
+
+#### `@mui/x-data-grid-premium@6.18.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.5`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.5`
+
+- [pickers] Fix field types to avoid error on latest `@types/react` version (#11398) @LukasTy
+- [pickers] Support name prop (#11380) @gitstart
+
+#### `@mui/x-date-pickers-pro@6.18.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.5`, plus:
+
+- [DateRangePicker] Fix `autoFocus` behavior (#11376) @kealjones-wk
+
+### Docs
+
+- [docs] Respect GoT books (#11294) @janoma
+- [test] Fix flaky screenshots (#11391) @cherniavskii
+
+## 6.18.4
+
+_Dec 8, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Add [Pickers FAQ page](https://mui.com/x/react-date-pickers/faq/)
+- 🌍 Improve Danish (da-DK) locale on Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.4`
+
+- [DataGrid] Fix cell slot style override (#11215) @oliviertassinari
+- [l10n] Improve Danish (da-DK) locale (#11346) @goibon
+
+#### `@mui/x-data-grid-pro@6.18.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.4`.
+
+#### `@mui/x-data-grid-premium@6.18.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.4`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.4`
+
+- [pickers] Fix `MultiSectionDigitalClock` issues (#11308) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.18.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.4`.
+
+### Docs
+
+- [docs] Fix typo (#11323) @cadam11
+- [docs] Add FAQ page (#11347) @noraleonte
+
 ## 6.18.3
 
 _Dec 4, 2023_
@@ -347,7 +429,7 @@ Same changes as in `@mui/x-date-pickers@6.16.3`, plus:
 
 - [charts] Add reference links to area + bar chart components (#10652) @michelengelen
 - [charts] Add reference links to line chart + sparkline components (#10650) @michelengelen
-- [charts] Add reference links to pie + scatter chart components  (#10653) @michelengelen
+- [charts] Add reference links to pie + scatter chart components (#10653) @michelengelen
 - [charts] Render only when `width` and `height` are resolved (#10714) @alexfauquette
 - [charts] Support animation on `BarChart` (#9926) @alexfauquette
 - [charts] Use new text component to avoid tick label overflow on x-axis (#10648) @alexfauquette
@@ -423,6 +505,7 @@ It adds line break support and avoids overlapping text in the legend.
 This comes with some breaking changes.
 
 - The DOM structure is modified. An intermediary `<tspan />` element has been added. This can impact how your style is applied.
+
   ```diff
   - <text>The label</text>
   + <text><tspan>The label</tspan></text>

package/DatePicker/DatePicker.js

@@ -178,6 +178,10 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/DateTimePicker/DateTimePicker.js

@@ -216,6 +216,10 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/DesktopDatePicker/DesktopDatePicker.js

@@ -196,6 +196,10 @@ DesktopDatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -273,6 +273,10 @@ DesktopDateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/DesktopTimePicker/DesktopTimePicker.js

@@ -201,6 +201,10 @@ DesktopTimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/MobileDatePicker/MobileDatePicker.js

@@ -193,6 +193,10 @@ MobileDatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -242,6 +242,10 @@ MobileDateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/MobileTimePicker/MobileTimePicker.js

@@ -180,6 +180,10 @@ MobileTimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -36,7 +36,12 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   '@media (prefers-reduced-motion: no-preference)': {
     scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
   },
-  '&:hover': {
+  '@media (pointer: fine)': {
+    '&:hover': {
+      overflowY: 'auto'
+    }
+  },
+  '@media (pointer: none), (pointer: coarse)': {
     overflowY: 'auto'
   },
   '&:not(:first-of-type)': {
@@ -151,7 +156,8 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
         ,
         "aria-disabled": readOnly,
         "aria-label": option.ariaLabel,
-        "aria-selected": isSelected
+        "aria-selected": isSelected,
+        className: classes.item
       }, slotProps == null ? void 0 : slotProps.digitalClockSectionItem, {
         children: option.label
       }), option.label);

package/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -1,6 +1,6 @@
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getMultiSectionDigitalClockSectionUtilityClass(slot) {
-  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+  return generateUtilityClass('MuiMultiSectionDigitalClockSection', slot);
 }
-export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root', 'item']);
+export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClockSection', ['root', 'item']);

package/TimePicker/TimePicker.js

@@ -161,6 +161,10 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.18.3
+ * @mui/x-date-pickers v6.18.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -37,6 +37,7 @@ export const useDesktopPicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -104,6 +105,7 @@ export const useDesktopPicker = _ref => {
       formatDensity,
       timezone,
       label,
+      name,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
     }),

package/internals/hooks/useField/useField.types.d.ts

@@ -141,7 +141,7 @@ export interface UseFieldForwardedProps {
     clearable?: boolean;
     disabled?: boolean;
 }
-export type UseFieldResponse<TForwardedProps extends UseFieldForwardedProps> = Omit<TForwardedProps, keyof UseFieldForwardedProps> & Required<UseFieldForwardedProps> & Pick<React.HTMLAttributes<HTMLInputElement>, 'autoCorrect' | 'inputMode' | 'placeholder'> & {
+export type UseFieldResponse<TForwardedProps extends UseFieldForwardedProps> = Omit<TForwardedProps, keyof UseFieldForwardedProps> & Required<UseFieldForwardedProps> & Pick<React.InputHTMLAttributes<HTMLInputElement>, 'autoCorrect' | 'inputMode' | 'placeholder'> & {
     ref: React.Ref<HTMLInputElement>;
     value: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -34,6 +34,7 @@ export const useMobilePicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -74,7 +75,8 @@ export const useMobilePicker = _ref => {
       format,
       formatDensity,
       timezone,
-      label
+      label,
+      name
     }),
     ownerState: props
   });

package/internals/models/props/basePickerProps.d.ts

@@ -59,4 +59,8 @@ export interface BaseNonRangeNonStaticPickerProps {
      * Pass a ref to the `input` element.
      */
     inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Name attribute used by the `input` element in the Field.
+     */
+    name?: string;
 }

package/legacy/DatePicker/DatePicker.js

@@ -177,6 +177,10 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/DateTimePicker/DateTimePicker.js

@@ -215,6 +215,10 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -195,6 +195,10 @@ DesktopDatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -271,6 +271,10 @@ DesktopDateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -201,6 +201,10 @@ DesktopTimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/MobileDatePicker/MobileDatePicker.js

@@ -192,6 +192,10 @@ MobileDatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -241,6 +241,10 @@ MobileDateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/MobileTimePicker/MobileTimePicker.js

@@ -179,6 +179,10 @@ MobileTimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -36,7 +36,12 @@ var MultiSectionDigitalClockSectionRoot = styled(MenuList, {
     '@media (prefers-reduced-motion: no-preference)': {
       scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
     },
-    '&:hover': {
+    '@media (pointer: fine)': {
+      '&:hover': {
+        overflowY: 'auto'
+      }
+    },
+    '@media (pointer: none), (pointer: coarse)': {
       overflowY: 'auto'
     },
     '&:not(:first-of-type)': {
@@ -157,7 +162,8 @@ export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(funct
         ,
         "aria-disabled": readOnly,
         "aria-label": option.ariaLabel,
-        "aria-selected": isSelected
+        "aria-selected": isSelected,
+        className: classes.item
       }, slotProps == null ? void 0 : slotProps.digitalClockSectionItem, {
         children: option.label
       }), option.label);

package/legacy/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -1,6 +1,6 @@
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getMultiSectionDigitalClockSectionUtilityClass(slot) {
-  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+  return generateUtilityClass('MuiMultiSectionDigitalClockSection', slot);
 }
-export var multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root', 'item']);
+export var multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClockSection', ['root', 'item']);

package/legacy/TimePicker/TimePicker.js

@@ -160,6 +160,10 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.18.3
+ * @mui/x-date-pickers v6.18.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -35,6 +35,7 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
     format = props.format,
     formatDensity = props.formatDensity,
     timezone = props.timezone,
+    name = props.name,
     label = props.label,
     inputRef = props.inputRef,
     readOnly = props.readOnly,
@@ -102,6 +103,7 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
       formatDensity: formatDensity,
       timezone: timezone,
       label: label,
+      name: name,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
     }),

package/legacy/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -31,6 +31,7 @@ export var useMobilePicker = function useMobilePicker(_ref) {
     format = props.format,
     formatDensity = props.formatDensity,
     timezone = props.timezone,
+    name = props.name,
     label = props.label,
     inputRef = props.inputRef,
     readOnly = props.readOnly,
@@ -69,7 +70,8 @@ export var useMobilePicker = function useMobilePicker(_ref) {
       format: format,
       formatDensity: formatDensity,
       timezone: timezone,
-      label: label
+      label: label,
+      name: name
     }),
     ownerState: props
   });

package/models/fields.d.ts

@@ -118,6 +118,7 @@ export type FieldSelectedSections = number | FieldSectionType | null | 'all' | {
 export interface BaseSingleInputFieldProps<TValue, TDate, TSection extends FieldSection, TError> extends BaseFieldProps<TValue, TDate, TSection, TError> {
     label?: React.ReactNode;
     id?: string;
+    name?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     onKeyDown?: React.KeyboardEventHandler;
     onBlur?: React.FocusEventHandler;

package/modern/DatePicker/DatePicker.js

@@ -178,6 +178,10 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/DateTimePicker/DateTimePicker.js

@@ -216,6 +216,10 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -192,6 +192,10 @@ DesktopDatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -269,6 +269,10 @@ DesktopDateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -197,6 +197,10 @@ DesktopTimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -189,6 +189,10 @@ MobileDatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -238,6 +238,10 @@ MobileDateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -176,6 +176,10 @@ MobileTimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -36,7 +36,12 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   '@media (prefers-reduced-motion: no-preference)': {
     scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
   },
-  '&:hover': {
+  '@media (pointer: fine)': {
+    '&:hover': {
+      overflowY: 'auto'
+    }
+  },
+  '@media (pointer: none), (pointer: coarse)': {
     overflowY: 'auto'
   },
   '&:not(:first-of-type)': {
@@ -149,7 +154,8 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
         ,
         "aria-disabled": readOnly,
         "aria-label": option.ariaLabel,
-        "aria-selected": isSelected
+        "aria-selected": isSelected,
+        className: classes.item
       }, slotProps?.digitalClockSectionItem, {
         children: option.label
       }), option.label);

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -1,6 +1,6 @@
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getMultiSectionDigitalClockSectionUtilityClass(slot) {
-  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+  return generateUtilityClass('MuiMultiSectionDigitalClockSection', slot);
 }
-export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root', 'item']);
+export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClockSection', ['root', 'item']);

package/modern/TimePicker/TimePicker.js

@@ -161,6 +161,10 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.18.3
+ * @mui/x-date-pickers v6.18.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -36,6 +36,7 @@ export const useDesktopPicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -103,6 +104,7 @@ export const useDesktopPicker = _ref => {
       formatDensity,
       timezone,
       label,
+      name,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
     }),

package/modern/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -33,6 +33,7 @@ export const useMobilePicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -73,7 +74,8 @@ export const useMobilePicker = _ref => {
       format,
       formatDensity,
       timezone,
-      label
+      label,
+      name
     }),
     ownerState: props
   });

package/node/DatePicker/DatePicker.js

@@ -187,6 +187,10 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: _propTypes.default.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: _propTypes.default.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/node/DateTimePicker/DateTimePicker.js

@@ -225,6 +225,10 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: _propTypes.default.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: _propTypes.default.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -201,6 +201,10 @@ DesktopDatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: _propTypes.default.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: _propTypes.default.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -278,6 +278,10 @@ DesktopDateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: _propTypes.default.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: _propTypes.default.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -206,6 +206,10 @@ DesktopTimePicker.propTypes = {
    * @default 1
    */
   minutesStep: _propTypes.default.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: _propTypes.default.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/node/MobileDatePicker/MobileDatePicker.js

@@ -198,6 +198,10 @@ MobileDatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: _propTypes.default.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: _propTypes.default.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -247,6 +247,10 @@ MobileDateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: _propTypes.default.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: _propTypes.default.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/node/MobileTimePicker/MobileTimePicker.js

@@ -185,6 +185,10 @@ MobileTimePicker.propTypes = {
    * @default 1
    */
   minutesStep: _propTypes.default.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: _propTypes.default.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -45,7 +45,12 @@ const MultiSectionDigitalClockSectionRoot = (0, _styles.styled)(_MenuList.defaul
   '@media (prefers-reduced-motion: no-preference)': {
     scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
   },
-  '&:hover': {
+  '@media (pointer: fine)': {
+    '&:hover': {
+      overflowY: 'auto'
+    }
+  },
+  '@media (pointer: none), (pointer: coarse)': {
     overflowY: 'auto'
   },
   '&:not(:first-of-type)': {
@@ -158,7 +163,8 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
         ,
         "aria-disabled": readOnly,
         "aria-label": option.ariaLabel,
-        "aria-selected": isSelected
+        "aria-selected": isSelected,
+        className: classes.item
       }, slotProps?.digitalClockSectionItem, {
         children: option.label
       }), option.label);

package/node/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -9,6 +9,6 @@ exports.multiSectionDigitalClockSectionClasses = void 0;
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getMultiSectionDigitalClockSectionUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiMultiSectionDigitalClock', slot);
+  return (0, _generateUtilityClass.default)('MuiMultiSectionDigitalClockSection', slot);
 }
-const multiSectionDigitalClockSectionClasses = exports.multiSectionDigitalClockSectionClasses = (0, _generateUtilityClasses.default)('MuiMultiSectionDigitalClock', ['root', 'item']);
+const multiSectionDigitalClockSectionClasses = exports.multiSectionDigitalClockSectionClasses = (0, _generateUtilityClasses.default)('MuiMultiSectionDigitalClockSection', ['root', 'item']);

package/node/TimePicker/TimePicker.js

@@ -170,6 +170,10 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * @default 1
    */
   minutesStep: _propTypes.default.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: _propTypes.default.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.18.3
+ * @mui/x-date-pickers v6.18.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -44,6 +44,7 @@ const useDesktopPicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -111,6 +112,7 @@ const useDesktopPicker = _ref => {
       formatDensity,
       timezone,
       label,
+      name,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
     }),

package/node/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -41,6 +41,7 @@ const useMobilePicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -81,7 +82,8 @@ const useMobilePicker = _ref => {
       format,
       formatDensity,
       timezone,
-      label
+      label,
+      name
     }),
     ownerState: props
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "6.18.3",
+  "version": "6.18.5",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",