@mui/x-date-pickers 6.18.4 → 6.18.6

package/CHANGELOG.md

@@ -3,6 +3,97 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.18.6
+
+_Dec 22, 2023_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Russian (ru-RU) locale (#11429) @wensiet
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.6`
+
+- [DataGrid] Fix typos in the JSDoc (#11475) @flaviendelangle
+- [l10n] Improve Russian (ru-RU) locale (#11429) @wensiet
+
+#### `@mui/x-data-grid-pro@6.18.6` [![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.6`.
+
+#### `@mui/x-data-grid-premium@6.18.6` [![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.6`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.6`
+
+- [fields] Fix section pasting (#11467) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.18.6` [![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.6`.
+
+### Charts / `@mui/x-charts@6.18.6`
+
+- [charts] Allow percentage values for pie chart center and radius (#11464) @alexfauquette
+- [charts] Make error message more explicit (#11457) @alexfauquette
+- [charts] Make the helper `ChartsText` component public (#11370) @alexfauquette
+- [charts] Improve dataset typing (#11372) @alexfauquette
+- [charts] Fix size overflow (#11385) @alexfauquette
+
+### Docs
+
+- [docs] Document false default values for boolean props (#11489) @cherniavskii
+- [docs] Improve Pickers `name` prop examples (#11442) @LukasTy
+- [docs] Limit `date-fns` package to v2 in codesandbox (#11478) @LukasTy
+- [test] Reload the page if its blank and there are no links to the remaining tests (#11471) @cherniavskii
+
+## 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_

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/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.4
+ * @mui/x-date-pickers v6.18.6
  *
  * @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.js

@@ -143,7 +143,14 @@ export const useField = params => {
       const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
       const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
       if (isValidPastedValue) {
-        // Early return to let the paste update section, value
+        resetCharacterQuery();
+        updateSectionValue({
+          activeSection,
+          newSectionValue: pastedValue,
+          shouldGoToNextSection: true
+        });
+        // prevent default to avoid the input change handler being called
+        event.preventDefault();
         return;
       }
       if (lettersOnly || digitsOnly) {

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/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.4
+ * @mui/x-date-pickers v6.18.6
  *
  * @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/useField/useField.js

@@ -152,7 +152,14 @@ export var useField = function useField(params) {
       var digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
       var isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
       if (isValidPastedValue) {
-        // Early return to let the paste update section, value
+        resetCharacterQuery();
+        updateSectionValue({
+          activeSection: activeSection,
+          newSectionValue: pastedValue,
+          shouldGoToNextSection: true
+        });
+        // prevent default to avoid the input change handler being called
+        event.preventDefault();
         return;
       }
       if (lettersOnly || digitsOnly) {

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/legacy/locales/ruRU.js

@@ -62,8 +62,7 @@ var ruRUPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0440\u0435\u043C\u044F, \u0432\u044B\u0431\u0440\u0430\u043D\u043E \u0432\u0440\u0435\u043C\u044F ".concat(utils.format(value, 'fullTime')) : 'Выберите время';
   },
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Очистить значение',
   // Table labels
   timeTableLabel: 'выбрать время',
   dateTableLabel: 'выбрать дату',

package/locales/ruRU.js

@@ -42,8 +42,7 @@ const ruRUPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Выберите дату, выбрана дата ${utils.format(value, 'fullDate')}` : 'Выберите дату',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Выберите время, выбрано время ${utils.format(value, 'fullTime')}` : 'Выберите время',
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Очистить значение',
   // Table labels
   timeTableLabel: 'выбрать время',
   dateTableLabel: 'выбрать дату',

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/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.4
+ * @mui/x-date-pickers v6.18.6
  *
  * @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/useField/useField.js

@@ -142,7 +142,14 @@ export const useField = params => {
       const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
       const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
       if (isValidPastedValue) {
-        // Early return to let the paste update section, value
+        resetCharacterQuery();
+        updateSectionValue({
+          activeSection,
+          newSectionValue: pastedValue,
+          shouldGoToNextSection: true
+        });
+        // prevent default to avoid the input change handler being called
+        event.preventDefault();
         return;
       }
       if (lettersOnly || digitsOnly) {

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/modern/locales/ruRU.js

@@ -42,8 +42,7 @@ const ruRUPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Выберите дату, выбрана дата ${utils.format(value, 'fullDate')}` : 'Выберите дату',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Выберите время, выбрано время ${utils.format(value, 'fullTime')}` : 'Выберите время',
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Очистить значение',
   // Table labels
   timeTableLabel: 'выбрать время',
   dateTableLabel: 'выбрать дату',

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/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.4
+ * @mui/x-date-pickers v6.18.6
  *
  * @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/useField/useField.js

@@ -151,7 +151,14 @@ const useField = params => {
       const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
       const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
       if (isValidPastedValue) {
-        // Early return to let the paste update section, value
+        resetCharacterQuery();
+        updateSectionValue({
+          activeSection,
+          newSectionValue: pastedValue,
+          shouldGoToNextSection: true
+        });
+        // prevent default to avoid the input change handler being called
+        event.preventDefault();
         return;
       }
       if (lettersOnly || digitsOnly) {

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/node/locales/ruRU.js

@@ -48,8 +48,7 @@ const ruRUPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Выберите дату, выбрана дата ${utils.format(value, 'fullDate')}` : 'Выберите дату',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Выберите время, выбрано время ${utils.format(value, 'fullTime')}` : 'Выберите время',
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Очистить значение',
   // Table labels
   timeTableLabel: 'выбрать время',
   dateTableLabel: 'выбрать дату',

package/package.json

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