@mui/x-date-pickers-pro 6.0.4 → 6.2.0

package/CHANGELOG.md

@@ -3,6 +3,116 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.2.0
+
+_Apr 13, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- Add `@mui/base` as a `peerDependency` of `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` (#8590) @LukasTy
+
+  Both libraries were not working correctly if used without `@mui/base`.
+  Most package manager should automatically use the `@mui/base` version installed for `@mui/material`.
+
+- The value rendered in the picker or field input no longer has spaces around the `/` characters (#8425) @flaviendelangle
+
+  You can use the `formatDensity='spacious'` prop to add it back.
+  More information on [the dedicated doc section](https://mui.com/x/react-date-pickers/custom-field/#change-the-format-density)
+
+- 🌍 Improve French (fr-FR) and Urdu (ur-PK) and locales.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.2.0` / `@mui/x-data-grid-pro@v6.2.0` / `@mui/x-data-grid-premium@v6.2.0`
+
+#### Changes
+
+- [DataGrid] Reset selection state on `checkboxSelection` toggle (#8522) @MBilalShafi
+- [DataGrid] Use `baseSelect` slot instead of `baseTextField` with `select={true}` (#8110) @cherniavskii
+- [l10n] Improve French (fr-FR) locale (#8537) @vallereaugabriel
+- [l10n] Improve Urdu (ur-PK) locale (#8513) @SFARPak
+
+### `@mui/x-date-pickers@v6.2.0` / `@mui/x-date-pickers-pro@v6.2.0`
+
+#### Changes
+
+- [DateTimePicker] Fix `TimeClock` validation ignoring date by default (#8570) @LukasTy
+- [fields] Fix reliance on section order (#8545) @LukasTy
+- [fields] Make the space between format separators controllable (#8425) @flaviendelangle
+- [pickers] Add `@mui/base` to `peerDependencies` (#8590) @LukasTy
+- [pickers] Fix JSDoc for `formatDensity` prop (#8601) @flaviendelangle
+- [pickers] Improve value lifecycle on non-controlled pickers (#8312) @flaviendelangle
+- [pickers] Migrate `AdapterDayjs` to our repository (#8487) @flaviendelangle
+
+### Docs
+
+- [docs] Fix "Custom day rendering" demo alignment (#8541) @LukasTy
+- [docs] Fix **below** typo (#8576) @alexfauquette
+
+### Core
+
+- [core] Optimize `renovate` rules (#8575) @LukasTy
+- [core] Upgrade monorepo (#8578) @cherniavskii
+- [core] Update last release date (#8569) @DanailH
+
+## 6.1.0
+
+_Apr 10, 2023_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Catalan (ca-ES), Kazakh (kz-KZ) and improve Spanish (es-ES), Dutch (nl-NL), Hebrew (he-IL), Hungarian (hu-HU), Japanese (ja-JP), Portuguese (pt-BR), and Russian (ru-RU) locales
+- ✨ Allow to control visibility of columns shown in the columns panel (#8401) @MBilalShafi
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.1.0` / `@mui/x-data-grid-pro@v6.1.0` / `@mui/x-data-grid-premium@v6.1.0`
+
+#### Changes
+
+- [DataGrid] Allow to control visibility of columns shown in the `ColumnsPanel` component (#8401) @MBilalShafi
+- [DataGrid] Fix filters with empty array value not being removed from the filter model (#8501) @cherniavskii
+- [DataGrid] Fix memory leaks in development (#8301) @cherniavskii
+- [DataGrid] Sync `date` column value when entering edit mode by pressing a digit (#8364) @m4theushw
+- [DataGrid] Wrap column menu button with a tooltip (#7890) @cherniavskii
+- [l10n] Improve Dutch (nl-NL) locale (#8491) @thedutchruben
+- [l10n] Improve Hungarian (hu-HU) locale (#8486) @PetakCC
+- [l10n] Improve Japanese (ja-JP) locale (#8462) @megos
+- [l10n] Improve Portuguese (pt-BR) locale (#8480) @pwnedev
+- [l10n] Improve Russian (ru-RU) locale (#8510) @alexrapro
+
+### `@mui/x-date-pickers@v6.1.0` / `@mui/x-date-pickers-pro@v6.1.0`
+
+#### Changes
+
+- [fields] Fix RTL navigation (#8490) @alexfauquette
+- [fields] Fix usage of `slotProps.textField.InputProps` (#8428) @flaviendelangle
+- [pickers] Fix `componentsProps.dialog` propagation (#8509) @LukasTy
+- [pickers] Move `hasError` from `fieldValueManager` to `valueManager` (#8453) @flaviendelangle
+- [pickers] Move the adapters interfaces to the X repository (#8412) @flaviendelangle
+- [pickers] Update peer dependency versions (#8531) @LukasTy
+- [pickers] Fix `isValid` regression (#8543) @LukasTy
+- [l10n] Add Catalan (Spain) (ca-ES) and improve Spanish (es-ES) locales (#8498) @makenshikuro
+- [l10n] Add Kazakh (kz-KZ) locale (#8451) @zhunus
+- [l10n] Improve Dutch (nl-NL) locale (#8491) @thedutchruben
+- [l10n] Improve Hebrew (he-IL) locale (#8464) @soris1989
+- [l10n] Improve Japanese (ja-JP) locale (#8462) @megos
+- [l10n] Improve Portuguese (pt-BR) locale (#8480) @pwnedev
+
+### Docs
+
+- [docs] Fix 301 redirect (#8524) @alexfauquette
+- [docs] Fix 404 links (#8454) @alexfauquette
+- [docs] Fix broken API reference link (#8460) @oliviertassinari
+
+### Core
+
+- [core] Avoid 301 links (#8383) @oliviertassinari
+- [core] Fix the l10n helper by using danger instead of actions (#8512) @alexfauquette
+- [core] Help contributors for l10n PRs (#8503) @alexfauquette
+- [core] Remove legacy token (#8457) @oliviertassinari
+- [charts] Add a styling system (#8445) @alexfauquette
+
 ## 6.0.4
 
 _Mar 30, 2023_

package/DateRangeCalendar/useDragRange.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiPickersAdapter } from '@mui/x-date-pickers/internals';
+import { MuiPickersAdapter } from '@mui/x-date-pickers/models';
 import { DateRangePosition } from './DateRangeCalendar.types';
 import { DateRange } from '../internal/models';
 interface UseDragRangeParams<TDate> {

package/DateRangePicker/DateRangePicker.js

@@ -147,6 +147,12 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -155,6 +155,12 @@ DesktopDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -158,6 +158,12 @@ MobileDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -48,6 +48,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       disabled,
@@ -104,6 +105,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         value,
         defaultValue,
         format,
+        formatDensity,
         onChange,
         readOnly,
         disabled,
@@ -211,6 +213,12 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Maximal selectable date.
    */
@@ -289,6 +297,16 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool,
   /**
    * The selected value.
    * Used when the component is controlled.

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -48,6 +48,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       disabled,
@@ -113,6 +114,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
         value,
         defaultValue,
         format,
+        formatDensity,
         onChange,
         readOnly,
         disabled,
@@ -239,6 +241,12 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Maximal selectable date.
    */
@@ -355,6 +363,16 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool,
   /**
    * The selected value.
    * Used when the component is controlled.

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -48,6 +48,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       disabled,
@@ -108,6 +109,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         value,
         defaultValue,
         format,
+        formatDensity,
         onChange,
         readOnly,
         disabled,
@@ -229,6 +231,12 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
@@ -321,6 +329,16 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool,
   /**
    * The selected value.
    * Used when the component is controlled.

package/README.md

@@ -34,8 +34,9 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.4.1",
-  "@mui/system": "^5.4.1",
+  "@mui/base": "^5.0.0-alpha.87",
+  "@mui/material": "^5.8.6",
+  "@mui/system": "^5.8.0",
   "react": "^17.0.2 || ^18.0.0",
   "react-dom": "^17.0.2 || ^18.0.0"
 },

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "components", "componentsProps"],
-  _excluded2 = ["ref", "onPaste", "inputMode", "readOnly"];
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "InputProps", "inputProps"],
+  _excluded2 = ["inputRef"],
+  _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
@@ -19,20 +20,30 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
       slots,
       slotProps,
       components,
-      componentsProps
+      componentsProps,
+      InputProps,
+      inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
   const TextField = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : MuiTextField;
-  const textFieldProps = useSlotProps({
-    elementType: TextField,
-    externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
-    externalForwardedProps: other,
-    ownerState
-  });
+  const _useSlotProps = useSlotProps({
+      elementType: TextField,
+      externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
+      externalForwardedProps: other,
+      ownerState
+    }),
+    {
+      inputRef: externalInputRef
+    } = _useSlotProps,
+    textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
   const _useSingleInputDateRa = useSingleInputDateRangeField({
       props: textFieldProps,
-      inputRef: textFieldProps.inputRef
+      inputRef: externalInputRef
     }),
     {
       ref: inputRef,
@@ -40,7 +51,7 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
       inputMode,
       readOnly
     } = _useSingleInputDateRa,
-    fieldProps = _objectWithoutPropertiesLoose(_useSingleInputDateRa, _excluded2);
+    fieldProps = _objectWithoutPropertiesLoose(_useSingleInputDateRa, _excluded3);
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
@@ -110,6 +121,12 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */

package/SingleInputDateRangeField/useSingleInputDateRangeField.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", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useDefaultDates, applyDefaultDate, useField } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
@@ -25,6 +25,7 @@ export const useSingleInputDateRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -45,6 +46,7 @@ export const useSingleInputDateRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "components", "componentsProps"],
-  _excluded2 = ["ref", "onPaste", "inputMode", "readOnly"];
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "InputProps", "inputProps"],
+  _excluded2 = ["inputRef"],
+  _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import TextField from '@mui/material/TextField';
+import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { useSingleInputDateTimeRangeField } from './useSingleInputDateTimeRangeField';
@@ -19,20 +20,30 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
       slots,
       slotProps,
       components,
-      componentsProps
+      componentsProps,
+      InputProps,
+      inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const Input = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : TextField;
-  const inputProps = useSlotProps({
-    elementType: Input,
-    externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
-    externalForwardedProps: other,
-    ownerState
-  });
+  const TextField = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : MuiTextField;
+  const _useSlotProps = useSlotProps({
+      elementType: TextField,
+      externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
+      externalForwardedProps: other,
+      ownerState
+    }),
+    {
+      inputRef: externalInputRef
+    } = _useSlotProps,
+    textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
   const _useSingleInputDateTi = useSingleInputDateTimeRangeField({
-      props: inputProps,
-      inputRef: inputProps.inputRef
+      props: textFieldProps,
+      inputRef: externalInputRef
     }),
     {
       ref: inputRef,
@@ -40,8 +51,8 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
       inputMode,
       readOnly
     } = _useSingleInputDateTi,
-    fieldProps = _objectWithoutPropertiesLoose(_useSingleInputDateTi, _excluded2);
-  return /*#__PURE__*/_jsx(Input, _extends({
+    fieldProps = _objectWithoutPropertiesLoose(_useSingleInputDateTi, _excluded3);
+  return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
     inputProps: _extends({}, fieldProps.inputProps, {
@@ -120,6 +131,12 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */

package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.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", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useField, applyDefaultDate, useDefaultDates } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateDateTimeRange } from '../internal/hooks/validation/useDateTimeRangeValidation';
@@ -30,6 +30,7 @@ export const useSingleInputDateTimeRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -55,6 +56,7 @@ export const useSingleInputDateTimeRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "components", "componentsProps"],
-  _excluded2 = ["ref", "onPaste", "inputMode", "readOnly"];
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "InputProps", "inputProps"],
+  _excluded2 = ["inputRef"],
+  _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import TextField from '@mui/material/TextField';
+import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { useSingleInputTimeRangeField } from './useSingleInputTimeRangeField';
@@ -19,20 +20,30 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
       slots,
       slotProps,
       components,
-      componentsProps
+      componentsProps,
+      InputProps,
+      inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const Input = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : TextField;
-  const inputProps = useSlotProps({
-    elementType: Input,
-    externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
-    externalForwardedProps: other,
-    ownerState
-  });
+  const TextField = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : MuiTextField;
+  const _useSlotProps = useSlotProps({
+      elementType: TextField,
+      externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
+      externalForwardedProps: other,
+      ownerState
+    }),
+    {
+      inputRef: externalInputRef
+    } = _useSlotProps,
+    textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
   const _useSingleInputTimeRa = useSingleInputTimeRangeField({
-      props: inputProps,
-      inputRef: inputProps.inputRef
+      props: textFieldProps,
+      inputRef: externalInputRef
     }),
     {
       ref: inputRef,
@@ -40,8 +51,8 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
       inputMode,
       readOnly
     } = _useSingleInputTimeRa,
-    fieldProps = _objectWithoutPropertiesLoose(_useSingleInputTimeRa, _excluded2);
-  return /*#__PURE__*/_jsx(Input, _extends({
+    fieldProps = _objectWithoutPropertiesLoose(_useSingleInputTimeRa, _excluded3);
+  return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
     inputProps: _extends({}, fieldProps.inputProps, {
@@ -120,6 +131,12 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */

package/SingleInputTimeRangeField/useSingleInputTimeRangeField.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", "format", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useField } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateTimeRange } from '../internal/hooks/validation/useTimeRangeValidation';
@@ -24,6 +24,7 @@ export const useSingleInputTimeRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -45,6 +46,7 @@ export const useSingleInputTimeRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,