@mui/x-date-pickers 7.9.0 → 7.11.0

package/CHANGELOG.md

@@ -3,6 +3,165 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.11.0
+
+_Jul 18, 2024_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Add [color legend](https://mui.com/x/react-charts/legend/#color-legend) for charts (#13700) @alexfauquette
+- 🌍 Improve Korean (ko-KR) locale on the Date and Time Pickers
+- 🌍 Improve Russian (ru-RU) locale on the Date and Time Pickers and Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.11.0`
+
+- [DataGrid] Expose `gridEditRowsStateSelector` (#13877) @romgrk
+- [DataGrid] Fix `columnResizeStop` event not emitted when column is not resized (#13307) @mateuseap
+- [DataGrid] Fix delete filter inconsistent behavior (#13353) @oukunan
+- [DataGrid] Enable flip on preferences panel (#13803) @romgrk
+- [DataGrid] Support `date` and `datetime-local` input types in `GridFilterInputMultipleValue` type (#13411) @karudedios
+- [l10n] Improve Russian (ru-RU) locale (#13735) @diro-atk
+
+#### `@mui/x-data-grid-pro@7.11.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.11.0`.
+
+#### `@mui/x-data-grid-premium@7.11.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.11.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.11.0`
+
+- [l10n] Improve Korean (ko-KR) locale (#13651) @100pearlcent
+- [l10n] Improve Russian (ru-RU) locale (#13871) @Inv1x
+- [pickers] Add more conformance tests improving API docs precision (#13800) @LukasTy
+- [TimePicker] Add `Mui-selected` class to `TimeClock` meridiem buttons (#13848) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.11.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.11.0`, plus:
+
+- [DateRangePicker] Fix `name` prop propagation regression (#13821) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.11.0`
+
+- [charts] Create color legend (#13700) @alexfauquette
+- [charts] Defaultize axis on top level `useChartContainerProps` (#13817) @JCQuintas
+- [charts] Fix charts not passing `className` to root element (#13647) @JCQuintas
+- [charts] Generate API documentation for pro components (#13822) @alexfauquette
+- [charts] Improve zoomed highlight behaviour (unreleased) (#13868) @JCQuintas
+- [charts] Allow zoom on Y axis and add zoom options to configure zooming behaviour (unreleased) (#13726) @JCQuintas
+- [charts] Disable animations while zooming (unreleased) (#13807) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.11.0`
+
+- [TreeView] Extract some logic outside of the `useTreeView` hook (#13845) @flaviendelangle
+
+### Docs
+
+- [docs] Add warning about `process.env.NODE_ENV` in production (#13869) @cherniavskii
+- [docs] Allow controlling the demo form from the example (#13796) @JCQuintas
+- [docs] Clarify Pickers clearable behavior not working on mobile (#13786) @lnhrdt
+- [docs] Improve the documentation of the picker's `onChange` and `onAccept` props (#13543) @flaviendelangle
+- [docs] Replace company name with project name @oliviertassinari
+- [docs] Sort Pickers & Charts API slots alphabetically (#13843) @LukasTy
+
+### Core
+
+- [core] Add MUI Internal `renovate` group (#13846) @LukasTy
+- [core] Link GitHub issue for `import/prefer-default-export` rule @oliviertassinari
+- [core] Normalize `...other` and test imports in charts (#13844) @JCQuintas
+- [core] Normalize rest / other to match the most common used @oliviertassinari
+- [code-infra] Follow `next` tag for `@mui/docs` package bumps (#13813) @LukasTy
+- [code-infra] Use specific version for `@mui/docs` dependency (#13760) @LukasTy
+- [internals] Move `EventManager` to `@mui/x-internals` package (#13815) @flaviendelangle
+
+## 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/DesktopDateTimePicker/DesktopDateTimePickerLayout.d.ts

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { PickersLayoutProps } from '../PickersLayout';
 import { PickerValidDate } from '../models';
 import { DateOrTimeViewWithMeridiem } from '../internals/models/common';
+type DesktopDateTimePickerLayoutComponent = (<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TDate, TView> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+    propTypes?: any;
+};
 /**
  * @ignore - internal component.
  */
-declare function DesktopDateTimePickerLayout<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TDate, TView>): React.JSX.Element;
-declare namespace DesktopDateTimePickerLayout {
-    var propTypes: any;
-}
+declare const DesktopDateTimePickerLayout: DesktopDateTimePickerLayoutComponent;
 export { DesktopDateTimePickerLayout };

package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
-function DesktopDateTimePickerLayout(props) {
+const DesktopDateTimePickerLayout = /*#__PURE__*/React.forwardRef(function DesktopDateTimePickerLayout(props, ref) {
   const isRtl = useRtl();
   const {
     toolbar,
@@ -22,7 +22,6 @@ function DesktopDateTimePickerLayout(props) {
     sx,
     className,
     isLandscape,
-    ref,
     classes
   } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
@@ -55,7 +54,7 @@ function DesktopDateTimePickerLayout(props) {
       })]
     }), actionBar]
   });
-}
+});
 process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/PickersCalendarHeader/PickersCalendarHeader.js

@@ -152,7 +152,7 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
   const _useSlotProps = useSlotProps({
       elementType: SwitchViewIcon,
       externalSlotProps: slotProps?.switchViewIcon,
-      ownerState: undefined,
+      ownerState,
       className: classes.switchViewIcon
     }),
     switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);

package/PickersCalendarHeader/PickersCalendarHeader.types.d.ts

@@ -25,7 +25,7 @@ export interface PickersCalendarHeaderSlotPropsOverrides {
 export type PickersCalendarHeaderOwnerState<TDate extends PickerValidDate> = PickersCalendarHeaderProps<TDate>;
 export interface PickersCalendarHeaderSlotProps<TDate extends PickerValidDate> extends PickersArrowSwitcherSlotProps {
     switchViewButton?: SlotComponentProps<typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, PickersCalendarHeaderOwnerState<TDate>>;
-    switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, undefined>;
+    switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, PickersCalendarHeaderOwnerState<TDate>>;
 }
 export interface PickersCalendarHeaderProps<TDate extends PickerValidDate> extends ExportedPickersArrowSwitcherProps, MonthValidationOptions<TDate> {
     /**

package/PickersLayout/PickersLayout.d.ts

@@ -6,6 +6,9 @@ export declare const PickersLayoutRoot: import("@emotion/styled").StyledComponen
     ownerState: PickersLayoutProps<any, any, any>;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PickersLayoutContentWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+type PickersLayoutComponent = (<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TDate, TView> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+    propTypes?: any;
+};
 /**
  * Demos:
  *
@@ -15,8 +18,5 @@ export declare const PickersLayoutContentWrapper: import("@emotion/styled").Styl
  *
  * - [PickersLayout API](https://mui.com/x/api/date-pickers/pickers-layout/)
  */
-declare const PickersLayout: {
-    <TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem>(inProps: PickersLayoutProps<TValue, TDate, TView>): React.JSX.Element;
-    propTypes: any;
-};
+declare const PickersLayout: PickersLayoutComponent;
 export { PickersLayout };

package/PickersLayout/PickersLayout.js

@@ -89,7 +89,6 @@ export const PickersLayoutContentWrapper = styled('div', {
   display: 'flex',
   flexDirection: 'column'
 });
-
 /**
  * Demos:
  *
@@ -99,7 +98,7 @@ export const PickersLayoutContentWrapper = styled('div', {
  *
  * - [PickersLayout API](https://mui.com/x/api/date-pickers/pickers-layout/)
  */
-const PickersLayout = function PickersLayout(inProps) {
+const PickersLayout = /*#__PURE__*/React.forwardRef(function PickersLayout(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPickersLayout'
@@ -115,7 +114,6 @@ const PickersLayout = function PickersLayout(inProps) {
     sx,
     className,
     isLandscape,
-    ref,
     wrapperVariant
   } = props;
   const classes = useUtilityClasses(props);
@@ -133,7 +131,7 @@ const PickersLayout = function PickersLayout(inProps) {
       })
     }), actionBar]
   });
-};
+});
 process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/PickersLayout/PickersLayout.types.d.ts

@@ -76,10 +76,6 @@ export interface PickersLayoutProps<TValue, TDate extends PickerValidDate, TView
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
-    /**
-     * Ref to pass to the root element
-     */
-    ref?: React.Ref<HTMLDivElement>;
     /**
      * Override or extend the styles applied to the component.
      */

package/PickersTextField/PickersInput/pickersInputClasses.d.ts

@@ -10,8 +10,8 @@ export declare const pickersInputClasses: {
     input: string;
     readOnly: string;
     error: string;
-    focused: string;
     root: string;
+    focused: string;
     adornedStart: string;
     adornedEnd: string;
     notchedOutline: string;

package/TimeClock/Clock.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import IconButton from '@mui/material/IconButton';
@@ -13,7 +14,8 @@ import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    meridiemMode
   } = ownerState;
   const slots = {
     root: ['root'],
@@ -21,8 +23,8 @@ const useUtilityClasses = ownerState => {
     wrapper: ['wrapper'],
     squareMask: ['squareMask'],
     pin: ['pin'],
-    amButton: ['amButton'],
-    pmButton: ['pmButton'],
+    amButton: ['amButton', meridiemMode === 'am' && 'selected'],
+    pmButton: ['pmButton', meridiemMode === 'pm' && 'selected'],
     meridiemText: ['meridiemText']
   };
   return composeClasses(slots, getClockUtilityClass, classes);
@@ -105,23 +107,15 @@ const ClockPin = styled('div', {
   left: '50%',
   transform: 'translate(-50%, -50%)'
 }));
-const ClockAmButton = styled(IconButton, {
-  name: 'MuiClock',
-  slot: 'AmButton',
-  overridesResolver: (_, styles) => styles.amButton
-})(({
-  theme
-}) => ({
+const meridiemButtonCommonStyles = (theme, meridiemMode) => ({
   zIndex: 1,
-  position: 'absolute',
   bottom: 8,
-  left: 8,
   paddingLeft: 4,
   paddingRight: 4,
   width: CLOCK_HOUR_WIDTH,
   variants: [{
     props: {
-      meridiemMode: 'am'
+      meridiemMode
     },
     style: {
       backgroundColor: (theme.vars || theme).palette.primary.main,
@@ -131,6 +125,17 @@ const ClockAmButton = styled(IconButton, {
       }
     }
   }]
+});
+const ClockAmButton = styled(IconButton, {
+  name: 'MuiClock',
+  slot: 'AmButton',
+  overridesResolver: (_, styles) => styles.amButton
+})(({
+  theme
+}) => _extends({}, meridiemButtonCommonStyles(theme, 'am'), {
+  // keeping it here to make TS happy
+  position: 'absolute',
+  left: 8
 }));
 const ClockPmButton = styled(IconButton, {
   name: 'MuiClock',
@@ -138,26 +143,10 @@ const ClockPmButton = styled(IconButton, {
   overridesResolver: (_, styles) => styles.pmButton
 })(({
   theme
-}) => ({
-  zIndex: 1,
+}) => _extends({}, meridiemButtonCommonStyles(theme, 'pm'), {
+  // keeping it here to make TS happy
   position: 'absolute',
-  bottom: 8,
-  right: 8,
-  paddingLeft: 4,
-  paddingRight: 4,
-  width: CLOCK_HOUR_WIDTH,
-  variants: [{
-    props: {
-      meridiemMode: 'pm'
-    },
-    style: {
-      backgroundColor: (theme.vars || theme).palette.primary.main,
-      color: (theme.vars || theme).palette.primary.contrastText,
-      '&:hover': {
-        backgroundColor: (theme.vars || theme).palette.primary.light
-      }
-    }
-  }]
+  right: 8
 }));
 const ClockMeridiemText = styled(Typography, {
   name: 'MuiClock',

package/TimeClock/clockClasses.d.ts

@@ -15,6 +15,8 @@ export interface ClockClasses {
     pmButton: string;
     /** Styles applied to the meridiem typography element. */
     meridiemText: string;
+    /** Styles applied to the selected meridiem button element */
+    selected: string;
 }
 export type ClockClassKey = keyof ClockClasses;
 export declare function getClockUtilityClass(slot: string): string;

package/TimeClock/clockClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getClockUtilityClass(slot) {
   return generateUtilityClass('MuiClock', slot);
 }
-export const clockClasses = generateUtilityClasses('MuiClock', ['root', 'clock', 'wrapper', 'squareMask', 'pin', 'amButton', 'pmButton', 'meridiemText']);
+export const clockClasses = generateUtilityClasses('MuiClock', ['root', 'clock', 'wrapper', 'squareMask', 'pin', 'amButton', 'pmButton', 'meridiemText', 'selected']);

package/index.js

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

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -51,7 +51,11 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root'],
     spacer: ['spacer'],
-    button: ['button']
+    button: ['button'],
+    previousIconButton: ['previousIconButton'],
+    nextIconButton: ['nextIconButton'],
+    leftArrowIcon: ['leftArrowIcon'],
+    rightArrowIcon: ['rightArrowIcon']
   };
   return composeClasses(slots, getPickersArrowSwitcherUtilityClass, classes);
 };
@@ -106,7 +110,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     ownerState: _extends({}, ownerState, {
       hidden: previousProps.isHidden
     }),
-    className: classes.button
+    className: clsx(classes.button, classes.previousIconButton)
   });
   const NextIconButton = slots?.nextIconButton ?? PickersArrowSwitcherButton;
   const nextIconButtonProps = useSlotProps({
@@ -123,7 +127,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     ownerState: _extends({}, ownerState, {
       hidden: nextProps.isHidden
     }),
-    className: classes.button
+    className: clsx(classes.button, classes.nextIconButton)
   });
   const LeftArrowIcon = slots?.leftArrowIcon ?? ArrowLeftIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
@@ -133,7 +137,8 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       additionalProps: {
         fontSize: 'inherit'
       },
-      ownerState: undefined
+      ownerState,
+      className: classes.leftArrowIcon
     }),
     leftArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const RightArrowIcon = slots?.rightArrowIcon ?? ArrowRightIcon;
@@ -144,7 +149,8 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       additionalProps: {
         fontSize: 'inherit'
       },
-      ownerState: undefined
+      ownerState,
+      className: classes.rightArrowIcon
     }),
     rightArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
   return /*#__PURE__*/_jsxs(PickersArrowSwitcherRoot, _extends({

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts

@@ -67,6 +67,6 @@ export interface PickersArrowSwitcherButtonSlotOwnerState extends PickersArrowSw
 export interface PickersArrowSwitcherSlotProps {
     previousIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
     nextIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
-    leftArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, undefined>;
-    rightArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, undefined>;
+    leftArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
+    rightArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
 }

package/internals/components/PickersArrowSwitcher/pickersArrowSwitcherClasses.d.ts

@@ -5,7 +5,15 @@ export interface PickersArrowSwitcherClasses {
     spacer: string;
     /** Styles applied to the button element. */
     button: string;
+    /** Styles applied to the previous icon button element. */
+    previousIconButton: string;
+    /** Styles applied to the next icon button element. */
+    nextIconButton: string;
+    /** Styles applied to the left icon element. */
+    leftArrowIcon: string;
+    /** Styles applied to the right icon element. */
+    rightArrowIcon: string;
 }
 export type PickersArrowSwitcherClassKey = keyof PickersArrowSwitcherClasses;
 export declare function getPickersArrowSwitcherUtilityClass(slot: string): string;
-export declare const pickersArrowSwitcherClasses: Record<"button" | "root" | "spacer", string>;
+export declare const pickersArrowSwitcherClasses: Record<"button" | "root" | "spacer" | "previousIconButton" | "nextIconButton" | "leftArrowIcon" | "rightArrowIcon", string>;

package/internals/components/PickersArrowSwitcher/pickersArrowSwitcherClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getPickersArrowSwitcherUtilityClass(slot) {
   return generateUtilityClass('MuiPickersArrowSwitcher', slot);
 }
-export const pickersArrowSwitcherClasses = generateUtilityClasses('MuiPickersArrowSwitcher', ['root', 'spacer', 'button']);
+export const pickersArrowSwitcherClasses = generateUtilityClasses('MuiPickersArrowSwitcher', ['root', 'spacer', 'button', 'previousIconButton', 'nextIconButton', 'leftArrowIcon', 'rightArrowIcon']);

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'> {