@mui/x-date-pickers 6.16.3 → 6.17.0

package/AdapterDateFns/AdapterDateFns.js

@@ -228,7 +228,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'EEEE',
-  weekdayShort: 'EEE',
+  weekdayShort: 'EEEEEE',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'aa',

package/AdapterDateFnsJalali/AdapterDateFnsJalali.js

@@ -228,7 +228,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'EEEE',
-  weekdayShort: 'EEE',
+  weekdayShort: 'EEEEEE',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'aa',

package/AdapterDayjs/AdapterDayjs.js

@@ -99,7 +99,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'D',
   weekday: 'dddd',
-  weekdayShort: 'ddd',
+  weekdayShort: 'dd',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'A',

package/AdapterLuxon/AdapterLuxon.js

@@ -113,7 +113,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'cccc',
-  weekdayShort: 'ccc',
+  weekdayShort: 'ccccc',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'a',

package/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.17.0
+
+_Oct 27, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 The Tree View package is now officially stable!
+
+![tree-view-example](https://github.com/mui/mui-x/assets/550141/77d1fe66-d912-49ba-b38f-b853fb90446a)
+
+- ✨ Improve the handling of non-numeric values by Data Grid aggregation
+- 🚀 Support lines with different domains on the line charts
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.17.0`
+
+- [DataGrid] Allow custom debounce time for row positions calculation (#10708) @cherniavskii
+- [DataGrid] Persist stable row index for focused row (#10674) @cherniavskii
+
+#### `@mui/x-data-grid-pro@6.17.0` [![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.17.0`, plus:
+
+- [DataGridPro] Fix `undefined` values passed to `valueFormatter` for tree leaf nodes (#10748) @cherniavskii
+
+#### `@mui/x-data-grid-premium@6.17.0` [![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.17.0`, plus:
+
+- [DataGridPremium] Fix `avg` aggregation to ignore non-numeric values (#10787) @cherniavskii
+- [DataGridPremium] Fix `size` aggregation to ignore `undefined` values (#10745) @cherniavskii
+- [DataGridPremium] Fix `sum` aggregation to ignore non-numeric values (#10730) @cherniavskii
+- [DataGridPremium] Fix cell selection throwing index error on second page and beyond (#10784) @MBilalShafi
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.17.0`
+
+- [fields] POC: Use `contentEditable` on `FakeTextField` (#10779) @flaviendelangle
+- [pickers] Fix weekday label localization (#10809) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.17.0` [![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.17.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.17`
+
+- [charts] Fix text position in Safari (#10815) @lhilgert9
+- [charts] Support lines with different domains (#10801) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@6.17.0`
+
+No change
+
+### Docs
+
+- [docs] Correct editing related props' description (#10798) @MBilalShafi
+- [docs] Fix RTL data grid demo (#10728) @oliviertassinari
+- [docs] Fix unclosed warning (#10796) @flaviendelangle
+- [docs] Improve performance of `Save and restore the state from external storage` recipe (#10811) @michelengelen
+
+- [test] Add missing type on `cleanText` utility function (#10780) @flaviendelangle
+
 ## 6.16.3
 
 _Oct 20, 2023_

package/DateCalendar/DayCalendar.js

@@ -414,9 +414,7 @@ export function DayCalendar(inProps) {
         children: localeText.calendarWeekNumberHeaderText
       }), getWeekdays(utils, now).map((weekday, i) => {
         var _dayOfWeekFormatter;
-        // regression-prevention:
-        // since 'weekdayShort' now always returns an abbreviated form we slice the first 2 letters from it.
-        const day = utils.format(weekday, 'weekdayShort').slice(0, 2);
+        const day = utils.format(weekday, 'weekdayShort');
         return /*#__PURE__*/_jsx(PickersCalendarWeekDayLabel, {
           variant: "caption",
           role: "columnheader",

package/index.js

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

package/internals/components/FakeTextField/FakeTextField.d.ts

@@ -1,10 +1,22 @@
 import * as React from 'react';
-export interface FakeTextFieldElement extends React.HTMLAttributes<HTMLDivElement> {
-    before: string;
-    after: string;
+export interface FakeTextFieldElement {
+    container: React.HTMLAttributes<HTMLSpanElement>;
+    content: React.HTMLAttributes<HTMLSpanElement>;
+    before: React.HTMLAttributes<HTMLSpanElement>;
+    after: React.HTMLAttributes<HTMLSpanElement>;
 }
 interface FakeTextFieldProps {
     elements: FakeTextFieldElement[];
+    valueStr: string;
+    onValueStrChange: React.ChangeEventHandler<HTMLInputElement>;
+    error: boolean;
+    id?: string;
+    InputProps: any;
+    inputProps: any;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    ownerState?: any;
+    valueType: 'value' | 'placeholder';
 }
 export declare const FakeTextField: React.ForwardRefExoticComponent<FakeTextFieldProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/internals/components/FakeTextField/FakeTextField.js

@@ -1,27 +1,44 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["before", "after"];
+const _excluded = ["elements", "valueStr", "onValueStrChange", "id", "error", "InputProps", "inputProps", "autoFocus", "disabled", "valueType", "ownerState"];
 import * as React from 'react';
-import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const FakeTextField = /*#__PURE__*/React.forwardRef(function FakeTextField(props, ref) {
   const {
-    elements
-  } = props;
-  return /*#__PURE__*/_jsx(Stack, {
-    direction: "row",
-    spacing: 1,
-    ref: ref,
-    children: elements.map((_ref, elementIndex) => {
-      let {
-          before,
-          after
-        } = _ref,
-        otherElementProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-      return /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [before, /*#__PURE__*/_jsx("input", _extends({}, otherElementProps)), after]
-      }, elementIndex);
-    })
+      elements,
+      valueStr,
+      onValueStrChange,
+      id,
+      valueType
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, _extends({
+      ref: ref
+    }, other, {
+      style: {
+        display: 'inline-block',
+        border: '1px solid black',
+        borderRadius: 4,
+        padding: '2px 4px',
+        color: valueType === 'placeholder' ? 'grey' : 'black'
+      },
+      children: elements.map(({
+        container,
+        content,
+        before,
+        after
+      }, elementIndex) => /*#__PURE__*/_createElement("span", _extends({}, container, {
+        key: elementIndex
+      }), /*#__PURE__*/_jsx("span", _extends({}, before)), /*#__PURE__*/_jsx("span", _extends({}, content)), /*#__PURE__*/_jsx("span", _extends({}, after))))
+    })), /*#__PURE__*/_jsx("input", {
+      type: "hidden",
+      value: valueStr,
+      onChange: onValueStrChange,
+      id: id
+    })]
   });
 });

package/legacy/AdapterDateFns/AdapterDateFns.js

@@ -231,7 +231,7 @@ var defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'EEEE',
-  weekdayShort: 'EEE',
+  weekdayShort: 'EEEEEE',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'aa',

package/legacy/AdapterDateFnsJalali/AdapterDateFnsJalali.js

@@ -231,7 +231,7 @@ var defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'EEEE',
-  weekdayShort: 'EEE',
+  weekdayShort: 'EEEEEE',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'aa',

package/legacy/AdapterDayjs/AdapterDayjs.js

@@ -102,7 +102,7 @@ var defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'D',
   weekday: 'dddd',
-  weekdayShort: 'ddd',
+  weekdayShort: 'dd',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'A',

package/legacy/AdapterLuxon/AdapterLuxon.js

@@ -116,7 +116,7 @@ var defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'cccc',
-  weekdayShort: 'ccc',
+  weekdayShort: 'ccccc',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'a',

package/legacy/DateCalendar/DayCalendar.js

@@ -458,9 +458,7 @@ export function DayCalendar(inProps) {
         children: localeText.calendarWeekNumberHeaderText
       }), getWeekdays(utils, now).map(function (weekday, i) {
         var _dayOfWeekFormatter;
-        // regression-prevention:
-        // since 'weekdayShort' now always returns an abbreviated form we slice the first 2 letters from it.
-        var day = utils.format(weekday, 'weekdayShort').slice(0, 2);
+        var day = utils.format(weekday, 'weekdayShort');
         return /*#__PURE__*/_jsx(PickersCalendarWeekDayLabel, {
           variant: "caption",
           role: "columnheader",

package/legacy/index.js

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

package/legacy/internals/components/FakeTextField/FakeTextField.js

@@ -1,23 +1,49 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["before", "after"];
+var _excluded = ["elements", "valueStr", "onValueStrChange", "id", "error", "InputProps", "inputProps", "autoFocus", "disabled", "valueType", "ownerState"];
 import * as React from 'react';
-import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var FakeTextField = /*#__PURE__*/React.forwardRef(function FakeTextField(props, ref) {
-  var elements = props.elements;
-  return /*#__PURE__*/_jsx(Stack, {
-    direction: "row",
-    spacing: 1,
-    ref: ref,
-    children: elements.map(function (_ref, elementIndex) {
-      var before = _ref.before,
-        after = _ref.after,
-        otherElementProps = _objectWithoutProperties(_ref, _excluded);
-      return /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [before, /*#__PURE__*/_jsx("input", _extends({}, otherElementProps)), after]
-      }, elementIndex);
-    })
+  var elements = props.elements,
+    valueStr = props.valueStr,
+    onValueStrChange = props.onValueStrChange,
+    id = props.id,
+    error = props.error,
+    InputProps = props.InputProps,
+    inputProps = props.inputProps,
+    autoFocus = props.autoFocus,
+    disabled = props.disabled,
+    valueType = props.valueType,
+    ownerState = props.ownerState,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, _extends({
+      ref: ref
+    }, other, {
+      style: {
+        display: 'inline-block',
+        border: '1px solid black',
+        borderRadius: 4,
+        padding: '2px 4px',
+        color: valueType === 'placeholder' ? 'grey' : 'black'
+      },
+      children: elements.map(function (_ref, elementIndex) {
+        var container = _ref.container,
+          content = _ref.content,
+          before = _ref.before,
+          after = _ref.after;
+        return /*#__PURE__*/_createElement("span", _extends({}, container, {
+          key: elementIndex
+        }), /*#__PURE__*/_jsx("span", _extends({}, before)), /*#__PURE__*/_jsx("span", _extends({}, content)), /*#__PURE__*/_jsx("span", _extends({}, after)));
+      })
+    })), /*#__PURE__*/_jsx("input", {
+      type: "hidden",
+      value: valueStr,
+      onChange: onValueStrChange,
+      id: id
+    })]
   });
 });

package/modern/AdapterDateFns/AdapterDateFns.js

@@ -228,7 +228,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'EEEE',
-  weekdayShort: 'EEE',
+  weekdayShort: 'EEEEEE',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'aa',

package/modern/AdapterDateFnsJalali/AdapterDateFnsJalali.js

@@ -228,7 +228,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'EEEE',
-  weekdayShort: 'EEE',
+  weekdayShort: 'EEEEEE',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'aa',

package/modern/AdapterDayjs/AdapterDayjs.js

@@ -99,7 +99,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'D',
   weekday: 'dddd',
-  weekdayShort: 'ddd',
+  weekdayShort: 'dd',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'A',

package/modern/AdapterLuxon/AdapterLuxon.js

@@ -113,7 +113,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'cccc',
-  weekdayShort: 'ccc',
+  weekdayShort: 'ccccc',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'a',

package/modern/DateCalendar/DayCalendar.js

@@ -412,9 +412,7 @@ export function DayCalendar(inProps) {
         className: classes.weekNumberLabel,
         children: localeText.calendarWeekNumberHeaderText
       }), getWeekdays(utils, now).map((weekday, i) => {
-        // regression-prevention:
-        // since 'weekdayShort' now always returns an abbreviated form we slice the first 2 letters from it.
-        const day = utils.format(weekday, 'weekdayShort').slice(0, 2);
+        const day = utils.format(weekday, 'weekdayShort');
         return /*#__PURE__*/_jsx(PickersCalendarWeekDayLabel, {
           variant: "caption",
           role: "columnheader",

package/modern/index.js

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

package/modern/internals/components/FakeTextField/FakeTextField.js

@@ -1,27 +1,44 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["before", "after"];
+const _excluded = ["elements", "valueStr", "onValueStrChange", "id", "error", "InputProps", "inputProps", "autoFocus", "disabled", "valueType", "ownerState"];
 import * as React from 'react';
-import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const FakeTextField = /*#__PURE__*/React.forwardRef(function FakeTextField(props, ref) {
   const {
-    elements
-  } = props;
-  return /*#__PURE__*/_jsx(Stack, {
-    direction: "row",
-    spacing: 1,
-    ref: ref,
-    children: elements.map((_ref, elementIndex) => {
-      let {
-          before,
-          after
-        } = _ref,
-        otherElementProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-      return /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [before, /*#__PURE__*/_jsx("input", _extends({}, otherElementProps)), after]
-      }, elementIndex);
-    })
+      elements,
+      valueStr,
+      onValueStrChange,
+      id,
+      valueType
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, _extends({
+      ref: ref
+    }, other, {
+      style: {
+        display: 'inline-block',
+        border: '1px solid black',
+        borderRadius: 4,
+        padding: '2px 4px',
+        color: valueType === 'placeholder' ? 'grey' : 'black'
+      },
+      children: elements.map(({
+        container,
+        content,
+        before,
+        after
+      }, elementIndex) => /*#__PURE__*/_createElement("span", _extends({}, container, {
+        key: elementIndex
+      }), /*#__PURE__*/_jsx("span", _extends({}, before)), /*#__PURE__*/_jsx("span", _extends({}, content)), /*#__PURE__*/_jsx("span", _extends({}, after))))
+    })), /*#__PURE__*/_jsx("input", {
+      type: "hidden",
+      value: valueStr,
+      onChange: onValueStrChange,
+      id: id
+    })]
   });
 });

package/node/AdapterDateFns/AdapterDateFns.js

@@ -237,7 +237,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'EEEE',
-  weekdayShort: 'EEE',
+  weekdayShort: 'EEEEEE',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'aa',

package/node/AdapterDateFnsJalali/AdapterDateFnsJalali.js

@@ -237,7 +237,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'EEEE',
-  weekdayShort: 'EEE',
+  weekdayShort: 'EEEEEE',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'aa',

package/node/AdapterDayjs/AdapterDayjs.js

@@ -107,7 +107,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'D',
   weekday: 'dddd',
-  weekdayShort: 'ddd',
+  weekdayShort: 'dd',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'A',

package/node/AdapterLuxon/AdapterLuxon.js

@@ -121,7 +121,7 @@ const defaultFormats = {
   monthShort: 'MMM',
   dayOfMonth: 'd',
   weekday: 'cccc',
-  weekdayShort: 'ccc',
+  weekdayShort: 'ccccc',
   hours24h: 'HH',
   hours12h: 'hh',
   meridiem: 'a',

package/node/DateCalendar/DayCalendar.js

@@ -420,9 +420,7 @@ function DayCalendar(inProps) {
         className: classes.weekNumberLabel,
         children: localeText.calendarWeekNumberHeaderText
       }), (0, _dateUtils.getWeekdays)(utils, now).map((weekday, i) => {
-        // regression-prevention:
-        // since 'weekdayShort' now always returns an abbreviated form we slice the first 2 letters from it.
-        const day = utils.format(weekday, 'weekdayShort').slice(0, 2);
+        const day = utils.format(weekday, 'weekdayShort');
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekDayLabel, {
           variant: "caption",
           role: "columnheader",

package/node/index.js

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

package/node/internals/components/FakeTextField/FakeTextField.js

@@ -7,29 +7,46 @@ Object.defineProperty(exports, "__esModule", {
 exports.FakeTextField = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
-var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["before", "after"];
+const _excluded = ["elements", "valueStr", "onValueStrChange", "id", "error", "InputProps", "inputProps", "autoFocus", "disabled", "valueType", "ownerState"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const FakeTextField = exports.FakeTextField = /*#__PURE__*/React.forwardRef(function FakeTextField(props, ref) {
   const {
-    elements
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
-    direction: "row",
-    spacing: 1,
-    ref: ref,
-    children: elements.map((_ref, elementIndex) => {
-      let {
-          before,
-          after
-        } = _ref,
-        otherElementProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [before, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _extends2.default)({}, otherElementProps)), after]
-      }, elementIndex);
-    })
+      elements,
+      valueStr,
+      onValueStrChange,
+      id,
+      valueType
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, (0, _extends2.default)({
+      ref: ref
+    }, other, {
+      style: {
+        display: 'inline-block',
+        border: '1px solid black',
+        borderRadius: 4,
+        padding: '2px 4px',
+        color: valueType === 'placeholder' ? 'grey' : 'black'
+      },
+      children: elements.map(({
+        container,
+        content,
+        before,
+        after
+      }, elementIndex) => /*#__PURE__*/(0, _react.createElement)("span", (0, _extends2.default)({}, container, {
+        key: elementIndex
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _extends2.default)({}, before)), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _extends2.default)({}, content)), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _extends2.default)({}, after))))
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      type: "hidden",
+      value: valueStr,
+      onChange: onValueStrChange,
+      id: id
+    })]
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "6.16.3",
+  "version": "6.17.0",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -36,7 +36,7 @@
     "@babel/runtime": "^7.23.2",
     "@mui/base": "^5.0.0-beta.20",
     "@mui/utils": "^5.14.14",
-    "@types/react-transition-group": "^4.4.7",
+    "@types/react-transition-group": "^4.4.8",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"