@mui/x-date-pickers 9.6.0 → 9.8.0

package/internals/hooks/useField/useFieldHiddenInputProps.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PickerAnyManager } from "../../models/manager.mjs";
-import { UseFieldStateReturnValue } from "./useFieldState.mjs";
+import type { PickerAnyManager } from "../../models/manager.mjs";
+import type { UseFieldStateReturnValue } from "./useFieldState.mjs";
 /**
  * Generate the props to pass to the hidden input element of the field.
  * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.

package/internals/hooks/useField/useFieldHiddenInputProps.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PickerAnyManager } from "../../models/manager.js";
-import { UseFieldStateReturnValue } from "./useFieldState.js";
+import type { PickerAnyManager } from "../../models/manager.js";
+import type { UseFieldStateReturnValue } from "./useFieldState.js";
 /**
  * Generate the props to pass to the hidden input element of the field.
  * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.d.mts

@@ -1,4 +1,4 @@
-import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.mjs";
+import type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.mjs";
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.d.ts

@@ -1,4 +1,4 @@
-import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.js";
+import type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.js";
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.

package/internals/hooks/useField/useFieldRootProps.d.mts

@@ -1,7 +1,7 @@
-import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.mjs";
-import { UseFieldStateReturnValue } from "./useFieldState.mjs";
-import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.mjs";
-import { PickerAnyManager } from "../../models/index.mjs";
+import type { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.mjs";
+import type { UseFieldStateReturnValue } from "./useFieldState.mjs";
+import type { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.mjs";
+import type { PickerAnyManager } from "../../models/index.mjs";
 /**
  * Generate the props to pass to the root element of the field.
  * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
@@ -24,6 +24,7 @@ interface UseFieldRootPropsReturnValue {
   onBlur: React.FocusEventHandler<HTMLDivElement>;
   onFocus: React.FocusEventHandler<HTMLDivElement>;
   onClick: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown: React.MouseEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   contentEditable: boolean;

package/internals/hooks/useField/useFieldRootProps.d.ts

@@ -1,7 +1,7 @@
-import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
-import { UseFieldStateReturnValue } from "./useFieldState.js";
-import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
-import { PickerAnyManager } from "../../models/index.js";
+import type { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
+import type { UseFieldStateReturnValue } from "./useFieldState.js";
+import type { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+import type { PickerAnyManager } from "../../models/index.js";
 /**
  * Generate the props to pass to the root element of the field.
  * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
@@ -24,6 +24,7 @@ interface UseFieldRootPropsReturnValue {
   onBlur: React.FocusEventHandler<HTMLDivElement>;
   onFocus: React.FocusEventHandler<HTMLDivElement>;
   onClick: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown: React.MouseEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   contentEditable: boolean;

package/internals/hooks/useField/useFieldRootProps.js

@@ -144,14 +144,22 @@ function useFieldRootProps(parameters) {
     }
   });
   const containerClickTimeout = (0, _useTimeout.default)();
-  const handleClick = (0, _useEventCallback.default)(event => {
+  const handleClick = (0, _useEventCallback.default)(() => {
     if (disabled || !domGetters.isReady()) {
       return;
     }
-    setFocused(true);
     if (parsedSelectedSections === 'all') {
+      setFocused(true);
       containerClickTimeout.start(0, () => {
-        const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
+        // `getSelection`/`getRangeAt` can be unset transiently (e.g. focus
+        // moved before this 0-tick callback ran). Fall back to the first
+        // section in that case.
+        const selection = document.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+          setSelectedSections(sectionOrder.startIndex);
+          return;
+        }
+        const cursorPosition = selection.getRangeAt(0).startOffset;
         if (cursorPosition === 0) {
           setSelectedSections(sectionOrder.startIndex);
           return;
@@ -165,16 +173,70 @@ function useFieldRootProps(parameters) {
         }
         setSelectedSections(sectionIndex - 1);
       });
-    } else if (!focused) {
+      return;
+    }
+
+    // For trusted pointer input, `handleMouseDown` already ran and set the
+    // section. This branch only matters for `click` events that arrive
+    // without a preceding `mousedown` (programmatic `element.click()`, some
+    // assistive-technology activations, synthetic event sequences in tests).
+    // Fall back to the first section so the field doesn't enter a "focused
+    // but no active section" state.
+    if (!focused) {
       setFocused(true);
-      setSelectedSections(sectionOrder.startIndex);
-    } else {
-      const hasClickedOnASection = domGetters.getRoot().contains(event.target);
-      if (!hasClickedOnASection) {
+      if (parsedSelectedSections == null) {
         setSelectedSections(sectionOrder.startIndex);
       }
     }
   });
+
+  // Replaces Chromium's focus delegation with an explicit section focus on
+  // every primary mousedown inside the sections container. The CSS gate
+  // (`WebkitUserModify: read-only` while not `:focus-within`) can make the
+  // section's contenteditable span temporarily non-focusable, in which case
+  // Chromium falls back to the sections-container `tabindex=0` and our
+  // `handleFocus` then runs the "no active section" fallback, briefly
+  // selecting the first section before the click bubble corrects it.
+  // Setting the target section here (and letting `syncSelectionToDOM` move
+  // focus via `.focus()`, which works even with the user-modify rule
+  // active) skips that race entirely.
+  const handleMouseDown = (0, _useEventCallback.default)(event => {
+    if (disabled || !domGetters.isReady() || parsedSelectedSections === 'all') {
+      return;
+    }
+    if (event.button !== 0) {
+      return;
+    }
+    const target = event.target;
+    // `sectionListRoot` is the sections container (a descendant of the
+    // InputBase root that owns this handler). The guard rejects clicks on
+    // sibling adornments (open / clear buttons, etc.) which have their own
+    // behavior and must not get intercepted here.
+    const sectionListRoot = domGetters.getRoot();
+    if (!sectionListRoot.contains(target)) {
+      return;
+    }
+    // Prefer the visually-containing section (matches Chromium's
+    // delegation + section container `onClick`), fall back to the
+    // closest-by-distance section for padding / past-last-section clicks.
+    const sectionElement = target.closest('[data-sectionindex]');
+    const parsedIndex = sectionElement ? Number(sectionElement.dataset.sectionindex) : findClosestSectionIndexToPoint(sectionListRoot, event.clientX);
+    // `Number(undefined) === NaN` and `NaN == null === false`, so guard
+    // explicitly here even though `data-sectionindex` is set by
+    // `useFieldSectionContainerProps` for every section in practice.
+    if (parsedIndex == null || !Number.isInteger(parsedIndex)) {
+      return;
+    }
+    event.preventDefault();
+    setFocused(true);
+    // `mousedown` is now authoritative for pointer section selection. The
+    // section container's own `onClick` deduplicates against the resulting
+    // `parsedSelectedSections` on the click bubble (see
+    // `useFieldSectionContainerProps`), so we always select here and let that
+    // guard absorb the redundant call -- matching the pre-PR
+    // `onSelectedSectionsChange` invocation count.
+    setSelectedSections(parsedIndex);
+  });
   const handleInput = (0, _useEventCallback.default)(event => {
     if (!domGetters.isReady() || parsedSelectedSections !== 'all') {
       return;
@@ -242,6 +304,7 @@ function useFieldRootProps(parameters) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onClick: handleClick,
+    onMouseDown: handleMouseDown,
     onPaste: handlePaste,
     onInput: handleInput,
     // Other
@@ -249,6 +312,30 @@ function useFieldRootProps(parameters) {
     tabIndex: internalPropsWithDefaults.disabled || parsedSelectedSections === 0 ? -1 : 0 // TODO: Try to set to undefined when there is a section selected.
   };
 }
+
+/**
+ * Returns the index of the section whose horizontal center is closest to `clientX`.
+ * Returns `null` if the field renders no `[role="spinbutton"]` descendants
+ * (defensive — every section content span sets `role="spinbutton"` in practice).
+ */
+function findClosestSectionIndexToPoint(root, clientX) {
+  const sections = root.querySelectorAll('[role="spinbutton"]');
+  if (sections.length === 0) {
+    return null;
+  }
+  let closestIndex = 0;
+  let closestDistance = Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    const center = (rect.left + rect.right) / 2;
+    const distance = Math.abs(clientX - center);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestIndex = i;
+    }
+  }
+  return closestIndex;
+}
 function getDeltaFromKeyCode(keyCode) {
   switch (keyCode) {
     case 'ArrowUp':

package/internals/hooks/useField/useFieldRootProps.mjs

@@ -138,14 +138,22 @@ export function useFieldRootProps(parameters) {
     }
   });
   const containerClickTimeout = useTimeout();
-  const handleClick = useEventCallback(event => {
+  const handleClick = useEventCallback(() => {
     if (disabled || !domGetters.isReady()) {
       return;
     }
-    setFocused(true);
     if (parsedSelectedSections === 'all') {
+      setFocused(true);
       containerClickTimeout.start(0, () => {
-        const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
+        // `getSelection`/`getRangeAt` can be unset transiently (e.g. focus
+        // moved before this 0-tick callback ran). Fall back to the first
+        // section in that case.
+        const selection = document.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+          setSelectedSections(sectionOrder.startIndex);
+          return;
+        }
+        const cursorPosition = selection.getRangeAt(0).startOffset;
         if (cursorPosition === 0) {
           setSelectedSections(sectionOrder.startIndex);
           return;
@@ -159,16 +167,70 @@ export function useFieldRootProps(parameters) {
         }
         setSelectedSections(sectionIndex - 1);
       });
-    } else if (!focused) {
+      return;
+    }
+
+    // For trusted pointer input, `handleMouseDown` already ran and set the
+    // section. This branch only matters for `click` events that arrive
+    // without a preceding `mousedown` (programmatic `element.click()`, some
+    // assistive-technology activations, synthetic event sequences in tests).
+    // Fall back to the first section so the field doesn't enter a "focused
+    // but no active section" state.
+    if (!focused) {
       setFocused(true);
-      setSelectedSections(sectionOrder.startIndex);
-    } else {
-      const hasClickedOnASection = domGetters.getRoot().contains(event.target);
-      if (!hasClickedOnASection) {
+      if (parsedSelectedSections == null) {
         setSelectedSections(sectionOrder.startIndex);
       }
     }
   });
+
+  // Replaces Chromium's focus delegation with an explicit section focus on
+  // every primary mousedown inside the sections container. The CSS gate
+  // (`WebkitUserModify: read-only` while not `:focus-within`) can make the
+  // section's contenteditable span temporarily non-focusable, in which case
+  // Chromium falls back to the sections-container `tabindex=0` and our
+  // `handleFocus` then runs the "no active section" fallback, briefly
+  // selecting the first section before the click bubble corrects it.
+  // Setting the target section here (and letting `syncSelectionToDOM` move
+  // focus via `.focus()`, which works even with the user-modify rule
+  // active) skips that race entirely.
+  const handleMouseDown = useEventCallback(event => {
+    if (disabled || !domGetters.isReady() || parsedSelectedSections === 'all') {
+      return;
+    }
+    if (event.button !== 0) {
+      return;
+    }
+    const target = event.target;
+    // `sectionListRoot` is the sections container (a descendant of the
+    // InputBase root that owns this handler). The guard rejects clicks on
+    // sibling adornments (open / clear buttons, etc.) which have their own
+    // behavior and must not get intercepted here.
+    const sectionListRoot = domGetters.getRoot();
+    if (!sectionListRoot.contains(target)) {
+      return;
+    }
+    // Prefer the visually-containing section (matches Chromium's
+    // delegation + section container `onClick`), fall back to the
+    // closest-by-distance section for padding / past-last-section clicks.
+    const sectionElement = target.closest('[data-sectionindex]');
+    const parsedIndex = sectionElement ? Number(sectionElement.dataset.sectionindex) : findClosestSectionIndexToPoint(sectionListRoot, event.clientX);
+    // `Number(undefined) === NaN` and `NaN == null === false`, so guard
+    // explicitly here even though `data-sectionindex` is set by
+    // `useFieldSectionContainerProps` for every section in practice.
+    if (parsedIndex == null || !Number.isInteger(parsedIndex)) {
+      return;
+    }
+    event.preventDefault();
+    setFocused(true);
+    // `mousedown` is now authoritative for pointer section selection. The
+    // section container's own `onClick` deduplicates against the resulting
+    // `parsedSelectedSections` on the click bubble (see
+    // `useFieldSectionContainerProps`), so we always select here and let that
+    // guard absorb the redundant call -- matching the pre-PR
+    // `onSelectedSectionsChange` invocation count.
+    setSelectedSections(parsedIndex);
+  });
   const handleInput = useEventCallback(event => {
     if (!domGetters.isReady() || parsedSelectedSections !== 'all') {
       return;
@@ -236,6 +298,7 @@ export function useFieldRootProps(parameters) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onClick: handleClick,
+    onMouseDown: handleMouseDown,
     onPaste: handlePaste,
     onInput: handleInput,
     // Other
@@ -243,6 +306,30 @@ export function useFieldRootProps(parameters) {
     tabIndex: internalPropsWithDefaults.disabled || parsedSelectedSections === 0 ? -1 : 0 // TODO: Try to set to undefined when there is a section selected.
   };
 }
+
+/**
+ * Returns the index of the section whose horizontal center is closest to `clientX`.
+ * Returns `null` if the field renders no `[role="spinbutton"]` descendants
+ * (defensive — every section content span sets `role="spinbutton"` in practice).
+ */
+function findClosestSectionIndexToPoint(root, clientX) {
+  const sections = root.querySelectorAll('[role="spinbutton"]');
+  if (sections.length === 0) {
+    return null;
+  }
+  let closestIndex = 0;
+  let closestDistance = Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    const center = (rect.left + rect.right) / 2;
+    const distance = Math.abs(clientX - center);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestIndex = i;
+    }
+  }
+  return closestIndex;
+}
 function getDeltaFromKeyCode(keyCode) {
   switch (keyCode) {
     case 'ArrowUp':

package/internals/hooks/useField/useFieldSectionContainerProps.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { UseFieldStateReturnValue } from "./useFieldState.mjs";
-import { UseFieldInternalProps } from "./useField.types.mjs";
+import type { UseFieldStateReturnValue } from "./useFieldState.mjs";
+import type { UseFieldInternalProps } from "./useField.types.mjs";
 /**
  * Generate the props to pass to the container element of each section of the field.
  * @param {UseFieldSectionContainerPropsParameters} parameters The parameters of the hook.

package/internals/hooks/useField/useFieldSectionContainerProps.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { UseFieldStateReturnValue } from "./useFieldState.js";
-import { UseFieldInternalProps } from "./useField.types.js";
+import type { UseFieldStateReturnValue } from "./useFieldState.js";
+import type { UseFieldInternalProps } from "./useField.types.js";
 /**
  * Generate the props to pass to the container element of each section of the field.
  * @param {UseFieldSectionContainerPropsParameters} parameters The parameters of the hook.

package/internals/hooks/useField/useFieldSectionContainerProps.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useFieldSectionContainerProps = useFieldSectionContainerProps;
 var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 /**
  * Generate the props to pass to the container element of each section of the field.
  * @param {UseFieldSectionContainerPropsParameters} parameters The parameters of the hook.
@@ -14,6 +16,8 @@ var React = _interopRequireWildcard(require("react"));
 function useFieldSectionContainerProps(parameters) {
   const {
     stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
       // Methods to update the states
       setSelectedSections
     },
@@ -21,16 +25,43 @@ function useFieldSectionContainerProps(parameters) {
       disabled = false
     }
   } = parameters;
-  const createHandleClick = React.useCallback(sectionIndex => event => {
+
+  // A single stable handler shared by every section, rather than a per-index
+  // factory. The section index is read from the container's `data-sectionindex`
+  // at click time, and `useEventCallback` reads the latest `disabled` /
+  // `parsedSelectedSections` / `setSelectedSections` internally -- so none of
+  // them sit in a dependency array and the `onClick` identity stays stable
+  // across renders (`setSelectedSections` is recreated on every render, which
+  // would otherwise churn the handler).
+  const handleClick = (0, _useEventCallback.default)(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 (disabled || event.isDefaultPrevented()) {
       return;
     }
+
+    // `currentTarget` is the section container, which always carries
+    // `data-sectionindex` (set below). Guard the parse defensively all the
+    // same -- `Number(undefined)` is `NaN`, and `NaN === parsedSelectedSections`
+    // is always false, so it would otherwise reach `setSelectedSections(NaN)`.
+    const sectionIndex = Number(event.currentTarget.dataset.sectionindex);
+    if (!Number.isInteger(sectionIndex)) {
+      return;
+    }
+
+    // For pointer input the `mousedown` handler already selected the section
+    // before this click bubbles, so bail to avoid a redundant
+    // `onSelectedSectionsChange` invocation. On the non-pointer paths
+    // (programmatic `element.click()`, some AT activations) `mousedown`
+    // didn't run, so `parsedSelectedSections` won't match yet and selection
+    // proceeds normally.
+    if (parsedSelectedSections === sectionIndex) {
+      return;
+    }
     setSelectedSections(sectionIndex);
-  }, [disabled, setSelectedSections]);
+  });
   return React.useCallback(sectionIndex => ({
     'data-sectionindex': sectionIndex,
-    onClick: createHandleClick(sectionIndex)
-  }), [createHandleClick]);
+    onClick: handleClick
+  }), [handleClick]);
 }

package/internals/hooks/useField/useFieldSectionContainerProps.mjs

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 /**
  * Generate the props to pass to the container element of each section of the field.
  * @param {UseFieldSectionContainerPropsParameters} parameters The parameters of the hook.
@@ -7,6 +8,8 @@ import * as React from 'react';
 export function useFieldSectionContainerProps(parameters) {
   const {
     stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
       // Methods to update the states
       setSelectedSections
     },
@@ -14,16 +17,43 @@ export function useFieldSectionContainerProps(parameters) {
       disabled = false
     }
   } = parameters;
-  const createHandleClick = React.useCallback(sectionIndex => event => {
+
+  // A single stable handler shared by every section, rather than a per-index
+  // factory. The section index is read from the container's `data-sectionindex`
+  // at click time, and `useEventCallback` reads the latest `disabled` /
+  // `parsedSelectedSections` / `setSelectedSections` internally -- so none of
+  // them sit in a dependency array and the `onClick` identity stays stable
+  // across renders (`setSelectedSections` is recreated on every render, which
+  // would otherwise churn the handler).
+  const handleClick = useEventCallback(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 (disabled || event.isDefaultPrevented()) {
       return;
     }
+
+    // `currentTarget` is the section container, which always carries
+    // `data-sectionindex` (set below). Guard the parse defensively all the
+    // same -- `Number(undefined)` is `NaN`, and `NaN === parsedSelectedSections`
+    // is always false, so it would otherwise reach `setSelectedSections(NaN)`.
+    const sectionIndex = Number(event.currentTarget.dataset.sectionindex);
+    if (!Number.isInteger(sectionIndex)) {
+      return;
+    }
+
+    // For pointer input the `mousedown` handler already selected the section
+    // before this click bubbles, so bail to avoid a redundant
+    // `onSelectedSectionsChange` invocation. On the non-pointer paths
+    // (programmatic `element.click()`, some AT activations) `mousedown`
+    // didn't run, so `parsedSelectedSections` won't match yet and selection
+    // proceeds normally.
+    if (parsedSelectedSections === sectionIndex) {
+      return;
+    }
     setSelectedSections(sectionIndex);
-  }, [disabled, setSelectedSections]);
+  });
   return React.useCallback(sectionIndex => ({
     'data-sectionindex': sectionIndex,
-    onClick: createHandleClick(sectionIndex)
-  }), [createHandleClick]);
+    onClick: handleClick
+  }), [handleClick]);
 }

package/internals/hooks/useField/useFieldSectionContentProps.d.mts

@@ -1,9 +1,9 @@
-import { UseFieldStateReturnValue } from "./useFieldState.mjs";
-import { FieldSection } from "../../../models/index.mjs";
-import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.mjs";
-import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.mjs";
-import { PickerAnyManager } from "../../models/index.mjs";
-import { PickersSectionElement } from "../../../PickersSectionList/index.mjs";
+import type { UseFieldStateReturnValue } from "./useFieldState.mjs";
+import type { FieldSection } from "../../../models/index.mjs";
+import type { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.mjs";
+import type { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.mjs";
+import type { PickerAnyManager } from "../../models/index.mjs";
+import type { PickersSectionElement } from "../../../PickersSectionList/index.mjs";
 /**
  * Generate the props to pass to the content element of each section of the field.
  * @param {UseFieldSectionContentPropsParameters} parameters The parameters of the hook.

package/internals/hooks/useField/useFieldSectionContentProps.d.ts

@@ -1,9 +1,9 @@
-import { UseFieldStateReturnValue } from "./useFieldState.js";
-import { FieldSection } from "../../../models/index.js";
-import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
-import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
-import { PickerAnyManager } from "../../models/index.js";
-import { PickersSectionElement } from "../../../PickersSectionList/index.js";
+import type { UseFieldStateReturnValue } from "./useFieldState.js";
+import type { FieldSection } from "../../../models/index.js";
+import type { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
+import type { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+import type { PickerAnyManager } from "../../models/index.js";
+import type { PickersSectionElement } from "../../../PickersSectionList/index.js";
 /**
  * Generate the props to pass to the content element of each section of the field.
  * @param {UseFieldSectionContentPropsParameters} parameters The parameters of the hook.

package/internals/hooks/useField/useFieldSectionContentProps.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _hooks = require("../../../hooks");
 var _syncSelectionToDOM = require("./syncSelectionToDOM");
+var _useField = require("./useField.utils");
 /**
  * Generate the props to pass to the content element of each section of the field.
  * @param {UseFieldSectionContentPropsParameters} parameters The parameters of the hook.
@@ -32,6 +33,7 @@ function useFieldSectionContentProps(parameters) {
       sectionsValueBoundaries,
       state,
       value,
+      localizedDigits,
       // Methods to update the states
       clearActiveSection,
       setCharacterQuery,
@@ -152,10 +154,10 @@ function useFieldSectionContentProps(parameters) {
       onFocus: createFocusHandler(sectionIndex),
       // Aria attributes
       'aria-readonly': readOnly,
-      'aria-valuenow': getSectionValueNow(section, adapter),
+      'aria-valuenow': getSectionValueNow(section, adapter, localizedDigits),
       'aria-valuemin': sectionBoundaries.minimum,
       'aria-valuemax': sectionBoundaries.maximum,
-      'aria-valuetext': section.value ? getSectionValueText(section, adapter) : translations.empty,
+      'aria-valuetext': section.value ? getSectionValueText(section, adapter, localizedDigits) : translations.empty,
       'aria-label': translations[section.type],
       'aria-disabled': disabled,
       // Other
@@ -171,9 +173,9 @@ function useFieldSectionContentProps(parameters) {
       children: section.value || section.placeholder,
       inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
     };
-  }, [sectionsValueBoundaries, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
+  }, [sectionsValueBoundaries, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, localizedDigits, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
 }
-function getSectionValueText(section, adapter) {
+function getSectionValueText(section, adapter, localizedDigits) {
   if (!section.value) {
     return undefined;
   }
@@ -181,7 +183,7 @@ function getSectionValueText(section, adapter) {
     case 'month':
       {
         if (section.contentType === 'digit') {
-          const dateWithMonth = adapter.setMonth(adapter.date(), Number(section.value) - 1);
+          const dateWithMonth = adapter.setMonth(adapter.date(), Number((0, _useField.removeLocalizedDigits)(section.value, localizedDigits)) - 1);
           return adapter.isValid(dateWithMonth) ? adapter.format(dateWithMonth, 'month') : '';
         }
         const parsedDate = adapter.parse(section.value, section.format);
@@ -189,8 +191,10 @@ function getSectionValueText(section, adapter) {
       }
     case 'day':
       if (section.contentType === 'digit') {
-        const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value));
-        return adapter.isValid(dateWithDay) ? adapter.format(dateWithDay, 'dayOfMonthFull') : '';
+        const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number((0, _useField.removeLocalizedDigits)(section.value, localizedDigits)));
+        // Announce a cardinal day (e.g. "2"), not a locale ordinal (e.g. French "2ème").
+        // See https://github.com/mui/mui-x/issues/22915.
+        return adapter.isValid(dateWithDay) ? adapter.format(dateWithDay, 'dayOfMonth') : '';
       }
       return section.value;
     case 'weekDay':
@@ -200,10 +204,11 @@ function getSectionValueText(section, adapter) {
       return undefined;
   }
 }
-function getSectionValueNow(section, adapter) {
+function getSectionValueNow(section, adapter, localizedDigits) {
   if (!section.value) {
     return undefined;
   }
+  const nonLocalizedValue = (0, _useField.removeLocalizedDigits)(section.value, localizedDigits);
   switch (section.type) {
     case 'weekDay':
       {
@@ -211,7 +216,7 @@ function getSectionValueNow(section, adapter) {
           // TODO: improve by resolving the week day number from a letter week day
           return undefined;
         }
-        return Number(section.value);
+        return Number(nonLocalizedValue);
       }
     case 'meridiem':
       {
@@ -222,16 +227,16 @@ function getSectionValueNow(section, adapter) {
         return undefined;
       }
     case 'day':
-      return section.contentType === 'digit-with-letter' ? parseInt(section.value, 10) : Number(section.value);
+      return section.contentType === 'digit-with-letter' ? parseInt(nonLocalizedValue, 10) : Number(nonLocalizedValue);
     case 'month':
       {
         if (section.contentType === 'digit') {
-          return Number(section.value);
+          return Number(nonLocalizedValue);
         }
         const parsedDate = adapter.parse(section.value, section.format);
         return parsedDate ? adapter.getMonth(parsedDate) + 1 : undefined;
       }
     default:
-      return section.contentType !== 'letter' ? Number(section.value) : undefined;
+      return section.contentType !== 'letter' ? Number(nonLocalizedValue) : undefined;
   }
 }