@mui/x-date-pickers 9.0.2 → 9.0.4

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

@@ -306,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: Number(removeLocalizedDigits(adapter.formatByString(adapter.startOfDay(today), format), localizedDigits))
+          maximum: formattedMidnight
         };
       }
+
+      // k/kk format (hour 1-24): midnight formats as 24 (> lastHourInDay)
+      if (formattedMidnight > lastHourInDay) {
+        return {
+          minimum: 1,
+          maximum: formattedMidnight
+        };
+      }
+
+      // H/HH format (hour 0-23)
       return {
         minimum: 0,
         maximum: lastHourInDay

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

@@ -285,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: Number(removeLocalizedDigits(adapter.formatByString(adapter.startOfDay(today), format), localizedDigits))
+          maximum: formattedMidnight
         };
       }
+
+      // k/kk format (hour 1-24): midnight formats as 24 (> lastHourInDay)
+      if (formattedMidnight > lastHourInDay) {
+        return {
+          minimum: 1,
+          maximum: formattedMidnight
+        };
+      }
+
+      // H/HH format (hour 0-23)
       return {
         minimum: 0,
         maximum: lastHourInDay

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";

package/internals/index.js

@@ -165,6 +165,12 @@ Object.defineProperty(exports, "executeInTheNextEventLoopTick", {
     return _utils.executeInTheNextEventLoopTick;
   }
 });
+Object.defineProperty(exports, "extractRootForwardedProps", {
+  enumerable: true,
+  get: function () {
+    return _utils.extractRootForwardedProps;
+  }
+});
 Object.defineProperty(exports, "formatMeridiem", {
   enumerable: true,
   get: function () {

package/internals/index.mjs

@@ -30,7 +30,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/utils/utils.d.mts

@@ -19,4 +19,10 @@ export declare const getActiveElement: (node: Node | null | undefined) => Elemen
  */
 export declare const getFocusedListItemIndex: (listElement: HTMLUListElement) => number;
 export declare const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = "@media (pointer: fine)";
+/**
+ * Picks any `data-*` and `aria-*` properties from `props` so they can be
+ * forwarded to the root DOM element rendered by the Picker. Other props stay
+ * owned by the Picker and are handled explicitly elsewhere.
+ */
+export declare function extractRootForwardedProps<T extends object>(props: T): Record<string, unknown>;
 export declare function mergeSx(...sxProps: (SxProps<Theme> | undefined)[]): ReadonlyArray<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;

package/internals/utils/utils.d.ts

@@ -19,4 +19,10 @@ export declare const getActiveElement: (node: Node | null | undefined) => Elemen
  */
 export declare const getFocusedListItemIndex: (listElement: HTMLUListElement) => number;
 export declare const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = "@media (pointer: fine)";
+/**
+ * Picks any `data-*` and `aria-*` properties from `props` so they can be
+ * forwarded to the root DOM element rendered by the Picker. Other props stay
+ * owned by the Picker and are handled explicitly elsewhere.
+ */
+export declare function extractRootForwardedProps<T extends object>(props: T): Record<string, unknown>;
 export declare function mergeSx(...sxProps: (SxProps<Theme> | undefined)[]): ReadonlyArray<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;

package/internals/utils/utils.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DEFAULT_DESKTOP_MODE_MEDIA_QUERY = void 0;
 exports.arrayIncludes = arrayIncludes;
-exports.getFocusedListItemIndex = exports.getActiveElement = exports.executeInTheNextEventLoopTick = void 0;
+exports.executeInTheNextEventLoopTick = void 0;
+exports.extractRootForwardedProps = extractRootForwardedProps;
+exports.getFocusedListItemIndex = exports.getActiveElement = void 0;
 exports.mergeSx = mergeSx;
 exports.onSpaceOrEnter = void 0;
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
@@ -70,6 +72,21 @@ const getFocusedListItemIndex = listElement => {
 };
 exports.getFocusedListItemIndex = getFocusedListItemIndex;
 const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = exports.DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';
+
+/**
+ * Picks any `data-*` and `aria-*` properties from `props` so they can be
+ * forwarded to the root DOM element rendered by the Picker. Other props stay
+ * owned by the Picker and are handled explicitly elsewhere.
+ */
+function extractRootForwardedProps(props) {
+  const forwardedProps = {};
+  for (const key of Object.keys(props)) {
+    if (key.startsWith('data-') || key.startsWith('aria-')) {
+      forwardedProps[key] = props[key];
+    }
+  }
+  return forwardedProps;
+}
 function mergeSx(...sxProps) {
   return sxProps.reduce((acc, sxProp) => {
     if (Array.isArray(sxProp)) {

package/internals/utils/utils.mjs

@@ -55,6 +55,21 @@ export const getFocusedListItemIndex = listElement => {
   return children.indexOf(getActiveElement(listElement));
 };
 export const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';
+
+/**
+ * Picks any `data-*` and `aria-*` properties from `props` so they can be
+ * forwarded to the root DOM element rendered by the Picker. Other props stay
+ * owned by the Picker and are handled explicitly elsewhere.
+ */
+export function extractRootForwardedProps(props) {
+  const forwardedProps = {};
+  for (const key of Object.keys(props)) {
+    if (key.startsWith('data-') || key.startsWith('aria-')) {
+      forwardedProps[key] = props[key];
+    }
+  }
+  return forwardedProps;
+}
 export function mergeSx(...sxProps) {
   return sxProps.reduce((acc, sxProp) => {
     if (Array.isArray(sxProp)) {