@mui/x-date-pickers 9.0.0 → 9.0.3

package/PickersLayout/PickersLayout.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PickersLayoutRoot = exports.PickersLayoutContentWrapper = exports.PickersLayout = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -16,6 +18,7 @@ var _pickersLayoutClasses = require("./pickersLayoutClasses");
 var _usePickerLayout = _interopRequireDefault(require("./usePickerLayout"));
 var _usePickerContext = require("../hooks/usePickerContext");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["sx", "className", "classes", "children", "slots", "slotProps"];
 const useUtilityClasses = (classes, ownerState) => {
   const {
     pickerOrientation
@@ -126,16 +129,18 @@ const PickersLayout = exports.PickersLayout = /*#__PURE__*/React.forwardRef(func
     variant
   } = (0, _usePickerContext.usePickerContext)();
   const {
-    sx,
-    className,
-    classes: classesProp
-  } = props;
+      sx,
+      className,
+      classes: classesProp
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const classes = useUtilityClasses(classesProp, ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersLayoutRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersLayoutRoot, (0, _extends2.default)({
     ref: ref,
     sx: sx,
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: ownerState,
+    ownerState: ownerState
+  }, other, {
     children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
       ownerState: ownerState,
@@ -145,7 +150,7 @@ const PickersLayout = exports.PickersLayout = /*#__PURE__*/React.forwardRef(func
         children: [tabs, content]
       })
     }), actionBar]
-  });
+  }));
 });
 if (process.env.NODE_ENV !== "production") PickersLayout.displayName = "PickersLayout";
 process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {

package/PickersLayout/PickersLayout.mjs

@@ -1,5 +1,8 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["sx", "className", "classes", "children", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -119,16 +122,18 @@ const PickersLayout = /*#__PURE__*/React.forwardRef(function PickersLayout(inPro
     variant
   } = usePickerContext();
   const {
-    sx,
-    className,
-    classes: classesProp
-  } = props;
+      sx,
+      className,
+      classes: classesProp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const classes = useUtilityClasses(classesProp, ownerState);
-  return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
+  return /*#__PURE__*/_jsxs(PickersLayoutRoot, _extends({
     ref: ref,
     sx: sx,
     className: clsx(classes.root, className),
-    ownerState: ownerState,
+    ownerState: ownerState
+  }, other, {
     children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
       ownerState: ownerState,
@@ -138,7 +143,7 @@ const PickersLayout = /*#__PURE__*/React.forwardRef(function PickersLayout(inPro
         children: [tabs, content]
       })
     }), actionBar]
-  });
+  }));
 });
 if (process.env.NODE_ENV !== "production") PickersLayout.displayName = "PickersLayout";
 process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {

package/PickersLayout/PickersLayout.types.d.mts

@@ -74,7 +74,7 @@ export interface PickersLayoutSlotProps<TValue extends PickerValidValue> extends
    */
   toolbar?: ExportedBaseToolbarProps;
 }
-export interface PickersLayoutProps<TValue extends PickerValidValue> {
+export interface PickersLayoutProps<TValue extends PickerValidValue> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
   className?: string;
   children?: React.ReactNode;
   /**

package/PickersLayout/PickersLayout.types.d.ts

@@ -74,7 +74,7 @@ export interface PickersLayoutSlotProps<TValue extends PickerValidValue> extends
    */
   toolbar?: ExportedBaseToolbarProps;
 }
-export interface PickersLayoutProps<TValue extends PickerValidValue> {
+export interface PickersLayoutProps<TValue extends PickerValidValue> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
   className?: string;
   children?: React.ReactNode;
   /**

package/PickersTextField/PickersFilledInput/PickersFilledInput.js

@@ -75,7 +75,7 @@ const PickersFilledInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInp
         '&::after': {
           left: 0,
           bottom: 0,
-          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
           content: '""',
           position: 'absolute',
           right: 0,
@@ -100,7 +100,7 @@ const PickersFilledInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInp
           borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
-          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
           content: '"\\00a0"',
           position: 'absolute',
           right: 0,

package/PickersTextField/PickersFilledInput/PickersFilledInput.mjs

@@ -68,7 +68,7 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
         '&::after': {
           left: 0,
           bottom: 0,
-          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
           content: '""',
           position: 'absolute',
           right: 0,
@@ -93,7 +93,7 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
           borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
-          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
           content: '"\\00a0"',
           position: 'absolute',
           right: 0,

package/PickersTextField/PickersInput/PickersInput.js

@@ -59,7 +59,7 @@ const PickersInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBase
           background: 'red',
           left: 0,
           bottom: 0,
-          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
           content: '""',
           position: 'absolute',
           right: 0,
@@ -84,7 +84,7 @@ const PickersInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBase
           borderBottom: `1px solid ${bottomLineColor}`,
           left: 0,
           bottom: 0,
-          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
           content: '"\\00a0"',
           position: 'absolute',
           right: 0,

package/PickersTextField/PickersInput/PickersInput.mjs

@@ -52,7 +52,7 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
           background: 'red',
           left: 0,
           bottom: 0,
-          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
           content: '""',
           position: 'absolute',
           right: 0,
@@ -77,7 +77,7 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
           borderBottom: `1px solid ${bottomLineColor}`,
           left: 0,
           bottom: 0,
-          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
           content: '"\\00a0"',
           position: 'absolute',
           right: 0,

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -44,6 +44,9 @@ const PickersOutlinedInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersI
       borderStyle: 'solid',
       borderWidth: 2
     },
+    [`&.${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.error} .${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.error.main
+    },
     [`&.${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.disabled}`]: {
       [`& .${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.notchedOutline}`]: {
         borderColor: (theme.vars || theme).palette.action.disabled
@@ -52,9 +55,6 @@ const PickersOutlinedInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersI
         color: (theme.vars || theme).palette.action.disabled
       }
     },
-    [`&.${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.error} .${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.error.main
-    },
     variants: Object.keys((theme.vars ?? theme).palette)
     // @ts-ignore
     .filter(key => (theme.vars ?? theme).palette[key]?.main ?? false).map(color => ({

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.mjs

@@ -37,6 +37,9 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
       borderStyle: 'solid',
       borderWidth: 2
     },
+    [`&.${pickersOutlinedInputClasses.error} .${pickersOutlinedInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.error.main
+    },
     [`&.${pickersOutlinedInputClasses.disabled}`]: {
       [`& .${pickersOutlinedInputClasses.notchedOutline}`]: {
         borderColor: (theme.vars || theme).palette.action.disabled
@@ -45,9 +48,6 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
         color: (theme.vars || theme).palette.action.disabled
       }
     },
-    [`&.${pickersOutlinedInputClasses.error} .${pickersOutlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.error.main
-    },
     variants: Object.keys((theme.vars ?? theme).palette)
     // @ts-ignore
     .filter(key => (theme.vars ?? theme).palette[key]?.main ?? false).map(color => ({

package/index.js

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

package/index.mjs

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

package/internals/components/PickerFieldUI.d.mts

@@ -106,8 +106,7 @@ interface PickerFieldUIContextValue {
 export declare function mergeSlotProps<TProps extends {}, TOwnerState extends FieldOwnerState>(slotPropsA: SlotComponentPropsFromProps<TProps, {}, TOwnerState> | undefined, slotPropsB: SlotComponentPropsFromProps<TProps, {}, TOwnerState> | undefined): Partial<TProps> | ((ownerState: TOwnerState) => {}) | undefined;
 /**
  * The `textField` slot props cannot be handled inside `PickerFieldUI` because it would be a breaking change to not pass the enriched props to `useField`.
- * Once the non-accessible DOM structure will be removed, we will be able to remove the `textField` slot and clean this logic.
- * TODO: Address with the needed support for the `textField` slotProps given the change of minimum version of MUI.
+ * TODO v10: Remove the `textField` slot and clean this logic up.
  */
 export declare function useFieldTextFieldProps<TProps extends UseFieldOwnerStateParameters>(parameters: UseFieldTextFieldPropsParameters): TProps;
 interface UseFieldTextFieldPropsParameters {

package/internals/components/PickerFieldUI.d.ts

@@ -106,8 +106,7 @@ interface PickerFieldUIContextValue {
 export declare function mergeSlotProps<TProps extends {}, TOwnerState extends FieldOwnerState>(slotPropsA: SlotComponentPropsFromProps<TProps, {}, TOwnerState> | undefined, slotPropsB: SlotComponentPropsFromProps<TProps, {}, TOwnerState> | undefined): Partial<TProps> | ((ownerState: TOwnerState) => {}) | undefined;
 /**
  * The `textField` slot props cannot be handled inside `PickerFieldUI` because it would be a breaking change to not pass the enriched props to `useField`.
- * Once the non-accessible DOM structure will be removed, we will be able to remove the `textField` slot and clean this logic.
- * TODO: Address with the needed support for the `textField` slotProps given the change of minimum version of MUI.
+ * TODO v10: Remove the `textField` slot and clean this logic up.
  */
 export declare function useFieldTextFieldProps<TProps extends UseFieldOwnerStateParameters>(parameters: UseFieldTextFieldPropsParameters): TProps;
 interface UseFieldTextFieldPropsParameters {

package/internals/components/PickerFieldUI.js

@@ -250,8 +250,7 @@ function mergeSlotProps(slotPropsA, slotPropsB) {
 
 /**
  * The `textField` slot props cannot be handled inside `PickerFieldUI` because it would be a breaking change to not pass the enriched props to `useField`.
- * Once the non-accessible DOM structure will be removed, we will be able to remove the `textField` slot and clean this logic.
- * TODO: Address with the needed support for the `textField` slotProps given the change of minimum version of MUI.
+ * TODO v10: Remove the `textField` slot and clean this logic up.
  */
 function useFieldTextFieldProps(parameters) {
   const {

package/internals/components/PickerFieldUI.mjs

@@ -237,8 +237,7 @@ export function mergeSlotProps(slotPropsA, slotPropsB) {
 
 /**
  * The `textField` slot props cannot be handled inside `PickerFieldUI` because it would be a breaking change to not pass the enriched props to `useField`.
- * Once the non-accessible DOM structure will be removed, we will be able to remove the `textField` slot and clean this logic.
- * TODO: Address with the needed support for the `textField` slotProps given the change of minimum version of MUI.
+ * TODO v10: Remove the `textField` slot and clean this logic up.
  */
 export function useFieldTextFieldProps(parameters) {
   const {

package/internals/components/PickerPopper/PickerPopper.js

@@ -112,7 +112,7 @@ function useClickAwayListener(active, onClickAway) {
     syntheticEventRef.current = false;
     const doc = (0, _ownerDocument.default)(nodeRef.current);
 
-    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 1. IE 11 support, which trigger the handleClickAway even after the unbind
     // 2. The child might render null.
     // 3. Behave like a blur listener.
     if (!nodeRef.current ||

package/internals/components/PickerPopper/PickerPopper.mjs

@@ -105,7 +105,7 @@ function useClickAwayListener(active, onClickAway) {
     syntheticEventRef.current = false;
     const doc = ownerDocument(nodeRef.current);
 
-    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 1. IE 11 support, which trigger the handleClickAway even after the unbind
     // 2. The child might render null.
     // 3. Behave like a blur listener.
     if (!nodeRef.current ||

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -13,6 +13,7 @@ var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
 var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
+var _utils = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
@@ -56,6 +57,7 @@ const useDesktopPicker = _ref => {
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
+      externalForwardedProps: (0, _utils.extractRootForwardedProps)(props),
       additionalProps: (0, _extends2.default)({}, isToolbarHidden && {
         id: labelId
       }),

package/internals/hooks/useDesktopPicker/useDesktopPicker.mjs

@@ -8,6 +8,7 @@ import { usePicker } from "../usePicker/index.mjs";
 import { PickersLayout } from "../../../PickersLayout/index.mjs";
 import { PickerProvider } from "../../components/PickerProvider.mjs";
 import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.mjs";
+import { extractRootForwardedProps } from "../../utils/utils.mjs";
 
 /**
  * Hook managing all the single-date desktop pickers:
@@ -50,6 +51,7 @@ export const useDesktopPicker = _ref => {
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
+      externalForwardedProps: extractRootForwardedProps(props),
       additionalProps: _extends({}, isToolbarHidden && {
         id: labelId
       }),

package/internals/hooks/useField/useField.js

@@ -138,12 +138,25 @@ const useField = parameters => {
     rootProps.onKeyDown(event);
   });
   const handleRootBlur = (0, _useEventCallback.default)(event => {
-    onBlur?.(event);
     rootProps.onBlur(event);
+    // Skip the user callback when focus is only moving to another element inside the field
+    // (e.g. the section that gains focus after the focusable root gives it up).
+    const next = event.relatedTarget;
+    if (domGetters.isReady() && next instanceof Node && domGetters.getRoot().contains(next)) {
+      return;
+    }
+    onBlur?.(event);
   });
   const handleRootFocus = (0, _useEventCallback.default)(event => {
-    onFocus?.(event);
     rootProps.onFocus(event);
+    // Skip the user callback when focus is only arriving from another element inside the field
+    // (e.g. the focusable root receiving it before it is forwarded to a section, and the section
+    // focus event bubbling back up to the root).
+    const previous = event.relatedTarget;
+    if (domGetters.isReady() && previous instanceof Node && domGetters.getRoot().contains(previous)) {
+      return;
+    }
+    onFocus?.(event);
   });
   const handleRootClick = (0, _useEventCallback.default)(event => {
     // The click event on the clear or open button would propagate to the input, trigger this handler and result in an inadvertent section selection.

package/internals/hooks/useField/useField.mjs

@@ -131,12 +131,25 @@ export const useField = parameters => {
     rootProps.onKeyDown(event);
   });
   const handleRootBlur = useEventCallback(event => {
-    onBlur?.(event);
     rootProps.onBlur(event);
+    // Skip the user callback when focus is only moving to another element inside the field
+    // (e.g. the section that gains focus after the focusable root gives it up).
+    const next = event.relatedTarget;
+    if (domGetters.isReady() && next instanceof Node && domGetters.getRoot().contains(next)) {
+      return;
+    }
+    onBlur?.(event);
   });
   const handleRootFocus = useEventCallback(event => {
-    onFocus?.(event);
     rootProps.onFocus(event);
+    // Skip the user callback when focus is only arriving from another element inside the field
+    // (e.g. the focusable root receiving it before it is forwarded to a section, and the section
+    // focus event bubbling back up to the root).
+    const previous = event.relatedTarget;
+    if (domGetters.isReady() && previous instanceof Node && domGetters.getRoot().contains(previous)) {
+      return;
+    }
+    onFocus?.(event);
   });
   const handleRootClick = useEventCallback(event => {
     // The click event on the clear or open button would propagate to the input, trigger this handler and result in an inadvertent section selection.

package/internals/hooks/useField/useField.utils.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionOrder = exports.getLocalizedDigits = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForHiddenInputFromSections = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.applyLocalizedDigits = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _dateUtils = require("../../utils/date-utils");
+var _timeUtils = require("../../utils/time-utils");
 const getDateSectionConfigFromFormatToken = (adapter, formatToken) => {
   const config = adapter.formatTokenMap[formatToken];
   if (config == null) {
@@ -305,13 +306,33 @@ const getSectionsBoundaries = (adapter, localizedDigits, timezone) => {
       format
     }) => {
       const lastHourInDay = adapter.getHours(endOfDay);
-      const hasMeridiem = removeLocalizedDigits(adapter.formatByString(adapter.endOfDay(today), format), localizedDigits) !== lastHourInDay.toString();
+      const formattedMidnight = Number(removeLocalizedDigits(adapter.formatByString(adapter.startOfDay(today), format), localizedDigits));
+      const formattedEndOfDay = Number(removeLocalizedDigits(adapter.formatByString(adapter.endOfDay(today), format), localizedDigits));
+      const hasMeridiem = formattedEndOfDay !== lastHourInDay;
       if (hasMeridiem) {
+        // K/KK format (hour 0-11): midnight formats as 0
+        if (formattedMidnight === 0) {
+          return {
+            minimum: 0,
+            maximum: formattedEndOfDay
+          };
+        }
+        // h/hh format (hour 1-12): midnight formats as 12
+        return {
+          minimum: 1,
+          maximum: formattedMidnight
+        };
+      }
+
+      // k/kk format (hour 1-24): midnight formats as 24 (> lastHourInDay)
+      if (formattedMidnight > lastHourInDay) {
         return {
           minimum: 1,
-          maximum: Number(removeLocalizedDigits(adapter.formatByString(adapter.startOfDay(today), format), localizedDigits))
+          maximum: formattedMidnight
         };
       }
+
+      // H/HH format (hour 0-23)
       return {
         minimum: 0,
         maximum: lastHourInDay
@@ -386,15 +407,8 @@ const transferDateSectionValue = (adapter, section, dateToTransferFrom, dateToTr
       }
     case 'meridiem':
       {
-        const isAM = adapter.getHours(dateToTransferFrom) < 12;
-        const mergedDateHours = adapter.getHours(dateToTransferTo);
-        if (isAM && mergedDateHours >= 12) {
-          return adapter.addHours(dateToTransferTo, -12);
-        }
-        if (!isAM && mergedDateHours < 12) {
-          return adapter.addHours(dateToTransferTo, 12);
-        }
-        return dateToTransferTo;
+        const meridiem = adapter.getHours(dateToTransferFrom) < 12 ? 'am' : 'pm';
+        return (0, _timeUtils.convertToMeridiem)(dateToTransferTo, meridiem, true, adapter);
       }
     case 'hours':
       {

package/internals/hooks/useField/useField.utils.mjs

@@ -1,5 +1,6 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import { getMonthsInYear } from "../../utils/date-utils.mjs";
+import { convertToMeridiem } from "../../utils/time-utils.mjs";
 export const getDateSectionConfigFromFormatToken = (adapter, formatToken) => {
   const config = adapter.formatTokenMap[formatToken];
   if (config == null) {
@@ -284,13 +285,33 @@ export const getSectionsBoundaries = (adapter, localizedDigits, timezone) => {
       format
     }) => {
       const lastHourInDay = adapter.getHours(endOfDay);
-      const hasMeridiem = removeLocalizedDigits(adapter.formatByString(adapter.endOfDay(today), format), localizedDigits) !== lastHourInDay.toString();
+      const formattedMidnight = Number(removeLocalizedDigits(adapter.formatByString(adapter.startOfDay(today), format), localizedDigits));
+      const formattedEndOfDay = Number(removeLocalizedDigits(adapter.formatByString(adapter.endOfDay(today), format), localizedDigits));
+      const hasMeridiem = formattedEndOfDay !== lastHourInDay;
       if (hasMeridiem) {
+        // K/KK format (hour 0-11): midnight formats as 0
+        if (formattedMidnight === 0) {
+          return {
+            minimum: 0,
+            maximum: formattedEndOfDay
+          };
+        }
+        // h/hh format (hour 1-12): midnight formats as 12
+        return {
+          minimum: 1,
+          maximum: formattedMidnight
+        };
+      }
+
+      // k/kk format (hour 1-24): midnight formats as 24 (> lastHourInDay)
+      if (formattedMidnight > lastHourInDay) {
         return {
           minimum: 1,
-          maximum: Number(removeLocalizedDigits(adapter.formatByString(adapter.startOfDay(today), format), localizedDigits))
+          maximum: formattedMidnight
         };
       }
+
+      // H/HH format (hour 0-23)
       return {
         minimum: 0,
         maximum: lastHourInDay
@@ -363,15 +384,8 @@ const transferDateSectionValue = (adapter, section, dateToTransferFrom, dateToTr
       }
     case 'meridiem':
       {
-        const isAM = adapter.getHours(dateToTransferFrom) < 12;
-        const mergedDateHours = adapter.getHours(dateToTransferTo);
-        if (isAM && mergedDateHours >= 12) {
-          return adapter.addHours(dateToTransferTo, -12);
-        }
-        if (!isAM && mergedDateHours < 12) {
-          return adapter.addHours(dateToTransferTo, 12);
-        }
-        return dateToTransferTo;
+        const meridiem = adapter.getHours(dateToTransferFrom) < 12 ? 'am' : 'pm';
+        return convertToMeridiem(dateToTransferTo, meridiem, true, adapter);
       }
     case 'hours':
       {

package/internals/hooks/useField/useFieldRootProps.js

@@ -60,7 +60,7 @@ function useFieldRootProps(parameters) {
     // eslint-disable-next-line default-case
     switch (true) {
       // Select all
-      case (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey:
+      case (event.ctrlKey || event.metaKey) && (event.key?.toUpperCase() === 'A' || String.fromCharCode(event.keyCode) === 'A') && !event.shiftKey && !event.altKey:
         {
           // prevent default to make sure that the next line "select all" while updating
           // the internal state at the same time.

package/internals/hooks/useField/useFieldRootProps.mjs

@@ -54,7 +54,7 @@ export function useFieldRootProps(parameters) {
     // eslint-disable-next-line default-case
     switch (true) {
       // Select all
-      case (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey:
+      case (event.ctrlKey || event.metaKey) && (event.key?.toUpperCase() === 'A' || String.fromCharCode(event.keyCode) === 'A') && !event.shiftKey && !event.altKey:
         {
           // prevent default to make sure that the next line "select all" while updating
           // the internal state at the same time.

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -13,6 +13,7 @@ var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
 var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
+var _utils = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
@@ -56,6 +57,7 @@ const useMobilePicker = _ref => {
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
+      externalForwardedProps: (0, _utils.extractRootForwardedProps)(props),
       additionalProps: (0, _extends2.default)({}, isToolbarHidden && {
         id: labelId
       }),

package/internals/hooks/useMobilePicker/useMobilePicker.mjs

@@ -8,6 +8,7 @@ import { usePicker } from "../usePicker/index.mjs";
 import { PickersLayout } from "../../../PickersLayout/index.mjs";
 import { PickerProvider } from "../../components/PickerProvider.mjs";
 import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.mjs";
+import { extractRootForwardedProps } from "../../utils/utils.mjs";
 
 /**
  * Hook managing all the single-date mobile pickers:
@@ -50,6 +51,7 @@ export const useMobilePicker = _ref => {
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
+      externalForwardedProps: extractRootForwardedProps(props),
       additionalProps: _extends({}, isToolbarHidden && {
         id: labelId
       }),

package/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -63,7 +63,7 @@ const useStaticPicker = _ref => {
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, (0, _utils.extractRootForwardedProps)(props), slotProps?.layout, {
       slots: slots,
       slotProps: slotProps,
       sx: (0, _utils.mergeSx)(providerProps.contextValue.rootSx, slotProps?.layout?.sx),

package/internals/hooks/useStaticPicker/useStaticPicker.mjs

@@ -9,7 +9,7 @@ import { usePicker } from "../usePicker/index.mjs";
 import { PickerProvider } from "../../components/PickerProvider.mjs";
 import { PickersLayout } from "../../../PickersLayout/index.mjs";
 import { DIALOG_WIDTH } from "../../constants/dimensions.mjs";
-import { mergeSx } from "../../utils/utils.mjs";
+import { extractRootForwardedProps, mergeSx } from "../../utils/utils.mjs";
 import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout, {
@@ -57,7 +57,7 @@ export const useStaticPicker = _ref => {
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+    children: /*#__PURE__*/_jsx(Layout, _extends({}, extractRootForwardedProps(props), slotProps?.layout, {
       slots: slots,
       slotProps: slotProps,
       sx: mergeSx(providerProps.contextValue.rootSx, slotProps?.layout?.sx),

package/internals/index.d.mts

@@ -61,7 +61,7 @@ export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate
 export { getDefaultReferenceDate } from "./utils/getDefaultReferenceDate.mjs";
 export { isTimeView, isInternalTimeView, resolveTimeFormat, getMeridiem, TIME_VIEWS } from "./utils/time-utils.mjs";
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-time-utils.mjs";
-export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.mjs";
+export { executeInTheNextEventLoopTick, extractRootForwardedProps, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.mjs";
 export { useReduceAnimations } from "./hooks/useReduceAnimations.mjs";
 export { applyDefaultViewProps } from "./utils/views.mjs";
 export { isElementInteractive } from "./utils/isElementInteractive.mjs";

package/internals/index.d.ts

@@ -61,7 +61,7 @@ export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate
 export { getDefaultReferenceDate } from "./utils/getDefaultReferenceDate.js";
 export { isTimeView, isInternalTimeView, resolveTimeFormat, getMeridiem, TIME_VIEWS } from "./utils/time-utils.js";
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-time-utils.js";
-export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.js";
+export { executeInTheNextEventLoopTick, extractRootForwardedProps, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.js";
 export { useReduceAnimations } from "./hooks/useReduceAnimations.js";
 export { applyDefaultViewProps } from "./utils/views.js";
 export { isElementInteractive } from "./utils/isElementInteractive.js";