@mui/x-date-pickers 7.9.0 → 7.10.0

package/CHANGELOG.md

@@ -3,6 +3,80 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.10.0
+
+_Jul 11, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add selectors to support showing child row count in footer in the Data Grid
+- ✨ New APIs for retrieving current item tree and item's children IDs in the Tree View
+- 🌍 Improve Spanish (es-ES) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.10.0`
+
+- [DataGrid] Add selectors to support showing child row count in footer (#13725) @KenanYusuf
+- [DataGrid] Fix incorrect panels position when using a toolbar (#13474) @oukunan
+- [DataGrid] Set default variant to `'standard'` in `GridFilterInputMultipleValue` (#13129) @tarunrajput
+- [DataGrid] Use `readonly` on more array props (#13331) @pcorpet
+- [l10n] Improve Spanish (es-ES) locale (#13772) @joserealdev
+
+#### `@mui/x-data-grid-pro@7.10.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@7.10.0`, plus:
+
+- [DataGridPro] Keep bottom pinned row at the bottom (#13313) @romgrk
+
+#### `@mui/x-data-grid-premium@7.10.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@7.10.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.10.0`
+
+- [fields] Prevent infinite recursion when ensuring selection (#13779) @LukasTy
+- [fields] Unify fields behavior regardless of the `readOnly` flag (#13688) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.10.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@7.10.0`, plus:
+
+- [DateRangePicker] Fix `calendarHeader` slot props propagation (#13780) @LukasTy
+- [DateTimeRangePicker] Resolve `format` from given `views` (#13743) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.10.0`
+
+- [charts] Fix displaying area of a `LineChart` when using the `log` scale (#13791) @alexfauquette
+- [charts] Use correct click handler prop on pie chart `OnSeriesItemClick` documentation (#13761) @tonyhallett
+
+### Tree View
+
+#### `@mui/x-tree-view@7.10.0`
+
+- [TreeView] Add `getItemTree` and `getItemOrderedChildrenIds` methods to the public API (#13804) @flaviendelangle
+- [TreeView] Add utility function to check if an optional plugin is present (#13788) @flaviendelangle
+
+### Docs
+
+- [docs] Add missing default `loading` prop value (#13604) @oliviertassinari
+- [docs] Add the `DateTimeRangePicker` to the "Commonly used components" demo (#13775) @flaviendelangle
+- [docs] Fix Pickers customization playground overflow (#13742) @LukasTy
+- [docs] Move Pickers dialog guidelines to accessibility page (#13778) @arthurbalduini
+
+### Core
+
+- [core] Sort `DATA_GRID_PROPS_DEFAULT_VALUES` alphabetically (#13783) @oliviertassinari
+- [test] Fix split infinitive use in tests @oliviertassinari
+
 ## 7.9.0
 
 _Jul 5, 2024_

package/index.js

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

package/internals/hooks/useField/useFieldV6TextField.js

@@ -36,6 +36,7 @@ export const addPositionPropertiesToSections = (sections, localizedDigits, isRtl
 export const useFieldV6TextField = params => {
   const isRtl = useRtl();
   const focusTimeoutRef = React.useRef();
+  const selectionSyncTimeoutRef = React.useRef();
   const {
     forwardedProps: {
       onFocus,
@@ -103,10 +104,14 @@ export const useFieldV6TextField = params => {
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
           }
         }
-        setTimeout(() => {
+        clearTimeout(selectionSyncTimeoutRef.current);
+        selectionSyncTimeoutRef.current = setTimeout(() => {
           // handle case when the selection is not updated correctly
           // could happen on Android
-          if (inputRef.current && inputRef.current === getActiveElement(document) && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
+          if (inputRef.current && inputRef.current === getActiveElement(document) &&
+          // The section might loose all selection, where `selectionStart === selectionEnd`
+          // https://github.com/mui/mui-x/pull/13652
+          inputRef.current.selectionStart === inputRef.current.selectionEnd && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
             interactions.syncSelectionToDOM();
           }
         });
@@ -118,8 +123,7 @@ export const useFieldV6TextField = params => {
     getActiveSectionIndexFromDOM: () => {
       const browserStartIndex = inputRef.current.selectionStart ?? 0;
       const browserEndIndex = inputRef.current.selectionEnd ?? 0;
-      const isInputReadOnly = !!inputRef.current?.readOnly;
-      if (browserStartIndex === 0 && browserEndIndex === 0 || isInputReadOnly) {
+      if (browserStartIndex === 0 && browserEndIndex === 0) {
         return null;
       }
       const nextSectionIndex = browserStartIndex <= sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
@@ -134,10 +138,6 @@ export const useFieldV6TextField = params => {
     isFieldFocused: () => inputRef.current === getActiveElement(document)
   }), [inputRef, parsedSelectedSections, sections, setSelectedSections]);
   const syncSelectionFromDOM = () => {
-    if (readOnly) {
-      setSelectedSections(null);
-      return;
-    }
     const browserStartIndex = inputRef.current.selectionStart ?? 0;
     let nextSectionIndex;
     if (browserStartIndex <= sections[0].startInInput) {
@@ -162,7 +162,7 @@ export const useFieldV6TextField = params => {
       if (!input || input !== inputRef.current) {
         return;
       }
-      if (activeSectionIndex != null || readOnly) {
+      if (activeSectionIndex != null) {
         return;
       }
       if (
@@ -296,6 +296,7 @@ export const useFieldV6TextField = params => {
     }
     return () => {
       clearTimeout(focusTimeoutRef.current);
+      clearTimeout(selectionSyncTimeoutRef.current);
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

package/internals/hooks/useField/useFieldV7TextField.js

@@ -221,7 +221,7 @@ export const useFieldV7TextField = params => {
   const getInputContainerClickHandler = useEventCallback(sectionIndex => event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
-    if (event.isDefaultPrevented() || readOnly) {
+    if (event.isDefaultPrevented()) {
       return;
     }
     setSelectedSections(sectionIndex);
@@ -231,9 +231,6 @@ export const useFieldV7TextField = params => {
     event.preventDefault();
   });
   const getInputContentFocusHandler = useEventCallback(sectionIndex => () => {
-    if (readOnly) {
-      return;
-    }
     setSelectedSections(sectionIndex);
   });
   const handleInputContentPaste = useEventCallback(event => {

package/internals/index.d.ts

@@ -48,7 +48,7 @@ export type { WrapperVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem,
 export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps, } from './models/validation';
 export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem, } from './utils/date-utils';
-export { resolveTimeViewsResponse } from './utils/date-time-utils';
+export { resolveTimeViewsResponse, resolveDateTimeFormat } from './utils/date-time-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils';

package/internals/index.js

@@ -19,7 +19,7 @@ export { useValidation } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
 export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem } from './utils/date-utils';
-export { resolveTimeViewsResponse } from './utils/date-time-utils';
+export { resolveTimeViewsResponse, resolveDateTimeFormat } from './utils/date-time-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';

package/internals/utils/date-time-utils.d.ts

@@ -4,7 +4,7 @@ import { DesktopOnlyTimePickerProps } from '../models/props/clock';
 import { DefaultizedProps } from '../models/helpers';
 export declare const resolveDateTimeFormat: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, { views, format, ...other }: {
     format?: string;
-    views: readonly DateOrTimeView[];
+    views: readonly DateOrTimeViewWithMeridiem[];
     ampm: boolean;
 }) => string;
 interface DefaultizedTimeViewsProps<TDate extends PickerValidDate, TView = DateOrTimeView> extends DefaultizedProps<DesktopOnlyTimePickerProps<TDate>, 'ampm'> {

package/modern/index.js

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

package/modern/internals/hooks/useField/useFieldV6TextField.js

@@ -36,6 +36,7 @@ export const addPositionPropertiesToSections = (sections, localizedDigits, isRtl
 export const useFieldV6TextField = params => {
   const isRtl = useRtl();
   const focusTimeoutRef = React.useRef();
+  const selectionSyncTimeoutRef = React.useRef();
   const {
     forwardedProps: {
       onFocus,
@@ -103,10 +104,14 @@ export const useFieldV6TextField = params => {
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
           }
         }
-        setTimeout(() => {
+        clearTimeout(selectionSyncTimeoutRef.current);
+        selectionSyncTimeoutRef.current = setTimeout(() => {
           // handle case when the selection is not updated correctly
           // could happen on Android
-          if (inputRef.current && inputRef.current === getActiveElement(document) && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
+          if (inputRef.current && inputRef.current === getActiveElement(document) &&
+          // The section might loose all selection, where `selectionStart === selectionEnd`
+          // https://github.com/mui/mui-x/pull/13652
+          inputRef.current.selectionStart === inputRef.current.selectionEnd && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
             interactions.syncSelectionToDOM();
           }
         });
@@ -118,8 +123,7 @@ export const useFieldV6TextField = params => {
     getActiveSectionIndexFromDOM: () => {
       const browserStartIndex = inputRef.current.selectionStart ?? 0;
       const browserEndIndex = inputRef.current.selectionEnd ?? 0;
-      const isInputReadOnly = !!inputRef.current?.readOnly;
-      if (browserStartIndex === 0 && browserEndIndex === 0 || isInputReadOnly) {
+      if (browserStartIndex === 0 && browserEndIndex === 0) {
         return null;
       }
       const nextSectionIndex = browserStartIndex <= sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
@@ -134,10 +138,6 @@ export const useFieldV6TextField = params => {
     isFieldFocused: () => inputRef.current === getActiveElement(document)
   }), [inputRef, parsedSelectedSections, sections, setSelectedSections]);
   const syncSelectionFromDOM = () => {
-    if (readOnly) {
-      setSelectedSections(null);
-      return;
-    }
     const browserStartIndex = inputRef.current.selectionStart ?? 0;
     let nextSectionIndex;
     if (browserStartIndex <= sections[0].startInInput) {
@@ -162,7 +162,7 @@ export const useFieldV6TextField = params => {
       if (!input || input !== inputRef.current) {
         return;
       }
-      if (activeSectionIndex != null || readOnly) {
+      if (activeSectionIndex != null) {
         return;
       }
       if (
@@ -296,6 +296,7 @@ export const useFieldV6TextField = params => {
     }
     return () => {
       clearTimeout(focusTimeoutRef.current);
+      clearTimeout(selectionSyncTimeoutRef.current);
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

package/modern/internals/hooks/useField/useFieldV7TextField.js

@@ -221,7 +221,7 @@ export const useFieldV7TextField = params => {
   const getInputContainerClickHandler = useEventCallback(sectionIndex => event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
-    if (event.isDefaultPrevented() || readOnly) {
+    if (event.isDefaultPrevented()) {
       return;
     }
     setSelectedSections(sectionIndex);
@@ -231,9 +231,6 @@ export const useFieldV7TextField = params => {
     event.preventDefault();
   });
   const getInputContentFocusHandler = useEventCallback(sectionIndex => () => {
-    if (readOnly) {
-      return;
-    }
     setSelectedSections(sectionIndex);
   });
   const handleInputContentPaste = useEventCallback(event => {

package/modern/internals/index.js

@@ -19,7 +19,7 @@ export { useValidation } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
 export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem } from './utils/date-utils';
-export { resolveTimeViewsResponse } from './utils/date-time-utils';
+export { resolveTimeViewsResponse, resolveDateTimeFormat } from './utils/date-time-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';

package/node/index.js

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

package/node/internals/hooks/useField/useFieldV6TextField.js

@@ -46,6 +46,7 @@ exports.addPositionPropertiesToSections = addPositionPropertiesToSections;
 const useFieldV6TextField = params => {
   const isRtl = (0, _RtlProvider.useRtl)();
   const focusTimeoutRef = React.useRef();
+  const selectionSyncTimeoutRef = React.useRef();
   const {
     forwardedProps: {
       onFocus,
@@ -113,10 +114,14 @@ const useFieldV6TextField = params => {
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
           }
         }
-        setTimeout(() => {
+        clearTimeout(selectionSyncTimeoutRef.current);
+        selectionSyncTimeoutRef.current = setTimeout(() => {
           // handle case when the selection is not updated correctly
           // could happen on Android
-          if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document) && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
+          if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document) &&
+          // The section might loose all selection, where `selectionStart === selectionEnd`
+          // https://github.com/mui/mui-x/pull/13652
+          inputRef.current.selectionStart === inputRef.current.selectionEnd && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
             interactions.syncSelectionToDOM();
           }
         });
@@ -128,8 +133,7 @@ const useFieldV6TextField = params => {
     getActiveSectionIndexFromDOM: () => {
       const browserStartIndex = inputRef.current.selectionStart ?? 0;
       const browserEndIndex = inputRef.current.selectionEnd ?? 0;
-      const isInputReadOnly = !!inputRef.current?.readOnly;
-      if (browserStartIndex === 0 && browserEndIndex === 0 || isInputReadOnly) {
+      if (browserStartIndex === 0 && browserEndIndex === 0) {
         return null;
       }
       const nextSectionIndex = browserStartIndex <= sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
@@ -144,10 +148,6 @@ const useFieldV6TextField = params => {
     isFieldFocused: () => inputRef.current === (0, _utils.getActiveElement)(document)
   }), [inputRef, parsedSelectedSections, sections, setSelectedSections]);
   const syncSelectionFromDOM = () => {
-    if (readOnly) {
-      setSelectedSections(null);
-      return;
-    }
     const browserStartIndex = inputRef.current.selectionStart ?? 0;
     let nextSectionIndex;
     if (browserStartIndex <= sections[0].startInInput) {
@@ -172,7 +172,7 @@ const useFieldV6TextField = params => {
       if (!input || input !== inputRef.current) {
         return;
       }
-      if (activeSectionIndex != null || readOnly) {
+      if (activeSectionIndex != null) {
         return;
       }
       if (
@@ -306,6 +306,7 @@ const useFieldV6TextField = params => {
     }
     return () => {
       clearTimeout(focusTimeoutRef.current);
+      clearTimeout(selectionSyncTimeoutRef.current);
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

package/node/internals/hooks/useField/useFieldV7TextField.js

@@ -230,7 +230,7 @@ const useFieldV7TextField = params => {
   const getInputContainerClickHandler = (0, _useEventCallback.default)(sectionIndex => event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
-    if (event.isDefaultPrevented() || readOnly) {
+    if (event.isDefaultPrevented()) {
       return;
     }
     setSelectedSections(sectionIndex);
@@ -240,9 +240,6 @@ const useFieldV7TextField = params => {
     event.preventDefault();
   });
   const getInputContentFocusHandler = (0, _useEventCallback.default)(sectionIndex => () => {
-    if (readOnly) {
-      return;
-    }
     setSelectedSections(sectionIndex);
   });
   const handleInputContentPaste = (0, _useEventCallback.default)(event => {

package/node/internals/index.js

@@ -213,6 +213,12 @@ Object.defineProperty(exports, "replaceInvalidDateByNull", {
     return _dateUtils.replaceInvalidDateByNull;
   }
 });
+Object.defineProperty(exports, "resolveDateTimeFormat", {
+  enumerable: true,
+  get: function () {
+    return _dateTimeUtils.resolveDateTimeFormat;
+  }
+});
 Object.defineProperty(exports, "resolveTimeViewsResponse", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.9.0",
+  "version": "7.10.0",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",