@mui/x-date-pickers 9.6.0 → 9.7.0

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

@@ -190,7 +190,9 @@ 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') : '';
+        // 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':

package/internals/hooks/useField/useFieldSectionContentProps.mjs

@@ -182,7 +182,9 @@ 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') : '';
+        // 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':

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

@@ -1,6 +1,6 @@
-import { UseFieldInternalProps, UseFieldState, FieldParsedSelectedSections, FieldSectionsValueBoundaries, SectionOrdering, UseFieldForwardedProps, CharacterEditingQuery } from "./useField.types.mjs";
-import { FieldSelectedSections, PickersTimezone, InferFieldSection, PickerManager } from "../../../models/index.mjs";
-import { PickerValidValue } from "../../models/index.mjs";
+import type { UseFieldInternalProps, UseFieldState, FieldParsedSelectedSections, FieldSectionsValueBoundaries, SectionOrdering, UseFieldForwardedProps, CharacterEditingQuery } from "./useField.types.mjs";
+import type { FieldSelectedSections, PickersTimezone, InferFieldSection, PickerManager } from "../../../models/index.mjs";
+import type { PickerValidValue } from "../../models/index.mjs";
 export declare const useFieldState: <TValue extends PickerValidValue, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps>(parameters: UseFieldStateParameters<TValue, TError, TValidationProps, TForwardedProps>) => UseFieldStateReturnValue<TValue>;
 interface UseFieldStateParameters<TValue extends PickerValidValue, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps> {
   manager: PickerManager<TValue, TError, TValidationProps, any>;

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

@@ -1,6 +1,6 @@
-import { UseFieldInternalProps, UseFieldState, FieldParsedSelectedSections, FieldSectionsValueBoundaries, SectionOrdering, UseFieldForwardedProps, CharacterEditingQuery } from "./useField.types.js";
-import { FieldSelectedSections, PickersTimezone, InferFieldSection, PickerManager } from "../../../models/index.js";
-import { PickerValidValue } from "../../models/index.js";
+import type { UseFieldInternalProps, UseFieldState, FieldParsedSelectedSections, FieldSectionsValueBoundaries, SectionOrdering, UseFieldForwardedProps, CharacterEditingQuery } from "./useField.types.js";
+import type { FieldSelectedSections, PickersTimezone, InferFieldSection, PickerManager } from "../../../models/index.js";
+import type { PickerValidValue } from "../../models/index.js";
 export declare const useFieldState: <TValue extends PickerValidValue, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps>(parameters: UseFieldStateParameters<TValue, TError, TValidationProps, TForwardedProps>) => UseFieldStateReturnValue<TValue>;
 interface UseFieldStateParameters<TValue extends PickerValidValue, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps> {
   manager: PickerManager<TValue, TError, TValidationProps, any>;

package/internals/hooks/useFieldOwnerState.d.mts

@@ -1,5 +1,5 @@
-import { FieldOwnerState } from "../../models/index.mjs";
-import { FormProps } from "../models/index.mjs";
+import type { FieldOwnerState } from "../../models/index.mjs";
+import type { FormProps } from "../models/index.mjs";
 export declare function useFieldOwnerState(parameters: UseFieldOwnerStateParameters): FieldOwnerState;
 export interface UseFieldOwnerStateParameters extends FormProps {
   required?: boolean;

package/internals/hooks/useFieldOwnerState.d.ts

@@ -1,5 +1,5 @@
-import { FieldOwnerState } from "../../models/index.js";
-import { FormProps } from "../models/index.js";
+import type { FieldOwnerState } from "../../models/index.js";
+import type { FormProps } from "../models/index.js";
 export declare function useFieldOwnerState(parameters: UseFieldOwnerStateParameters): FieldOwnerState;
 export interface UseFieldOwnerStateParameters extends FormProps {
   required?: boolean;

package/internals/hooks/useMobilePicker/useMobilePicker.d.mts

@@ -1,5 +1,5 @@
-import { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.mjs";
-import { DateOrTimeViewWithMeridiem } from "../../models/index.mjs";
+import type { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.mjs";
+import type { DateOrTimeViewWithMeridiem } from "../../models/index.mjs";
 /**
  * Hook managing all the single-date mobile pickers:
  * - MobileDatePicker

package/internals/hooks/useMobilePicker/useMobilePicker.d.ts

@@ -1,5 +1,5 @@
-import { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.js";
-import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
+import type { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.js";
+import type { DateOrTimeViewWithMeridiem } from "../../models/index.js";
 /**
  * Hook managing all the single-date mobile pickers:
  * - MobileDatePicker

package/internals/hooks/useMobilePicker/useMobilePicker.types.d.mts

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BasePickerProps } from "../../models/props/basePickerProps.mjs";
-import { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.mjs";
-import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.mjs";
-import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.mjs";
-import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.mjs";
-import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.mjs";
-import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.mjs";
-import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.mjs";
+import type * as React from 'react';
+import type { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import type { BasePickerProps } from "../../models/props/basePickerProps.mjs";
+import type { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.mjs";
+import type { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.mjs";
+import type { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.mjs";
+import type { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.mjs";
+import type { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.mjs";
+import type { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.mjs";
+import type { PickerStep } from "../../utils/createNonRangePickerStepNavigation.mjs";
 export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.

package/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BasePickerProps } from "../../models/props/basePickerProps.js";
-import { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.js";
-import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
-import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
-import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
-import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
-import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
-import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.js";
+import type * as React from 'react';
+import type { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import type { BasePickerProps } from "../../models/props/basePickerProps.js";
+import type { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.js";
+import type { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
+import type { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
+import type { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
+import type { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
+import type { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
+import type { PickerStep } from "../../utils/createNonRangePickerStepNavigation.js";
 export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.

package/internals/hooks/useNullableFieldPrivateContext.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { UseFieldInternalProps } from "./useField/index.mjs";
-import { FieldRef } from "../../models/index.mjs";
-import { PickerRangeValue, PickerValue } from "../models/index.mjs";
+import type { FieldRef } from "../../models/index.mjs";
+import type { PickerRangeValue, PickerValue } from "../models/index.mjs";
 export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
 export declare function useNullableFieldPrivateContext(): PickerFieldPrivateContextValue | null;
 export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any>, 'formatDensity' | 'selectedSections' | 'onSelectedSectionsChange'> {

package/internals/hooks/useNullableFieldPrivateContext.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { UseFieldInternalProps } from "./useField/index.js";
-import { FieldRef } from "../../models/index.js";
-import { PickerRangeValue, PickerValue } from "../models/index.js";
+import type { FieldRef } from "../../models/index.js";
+import type { PickerRangeValue, PickerValue } from "../models/index.js";
 export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
 export declare function useNullableFieldPrivateContext(): PickerFieldPrivateContextValue | null;
 export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any>, 'formatDensity' | 'selectedSections' | 'onSelectedSectionsChange'> {

package/internals/hooks/usePicker/hooks/useOrientation.d.mts

@@ -1,2 +1,2 @@
-import { DateOrTimeViewWithMeridiem, PickerOrientation } from "../../../models/index.mjs";
+import type { DateOrTimeViewWithMeridiem, PickerOrientation } from "../../../models/index.mjs";
 export declare function useOrientation(views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined): PickerOrientation;

package/internals/hooks/usePicker/hooks/useOrientation.d.ts

@@ -1,2 +1,2 @@
-import { DateOrTimeViewWithMeridiem, PickerOrientation } from "../../../models/index.js";
+import type { DateOrTimeViewWithMeridiem, PickerOrientation } from "../../../models/index.js";
 export declare function useOrientation(views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined): PickerOrientation;

package/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.mts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValueManager } from "../../../models/index.mjs";
-import { PickerSelectionState, UsePickerProps, UsePickerState } from "../usePicker.types.mjs";
-import { InferError } from "../../../../models/index.mjs";
-import { SetValueActionOptions } from "../../../components/PickerProvider.mjs";
-import { Validator } from "../../../../validation/index.mjs";
+import type { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValueManager } from "../../../models/index.mjs";
+import type { PickerSelectionState, UsePickerProps, UsePickerState } from "../usePicker.types.mjs";
+import type { InferError } from "../../../../models/index.mjs";
+import type { SetValueActionOptions } from "../../../components/PickerProvider.mjs";
+import type { Validator } from "../../../../validation/index.mjs";
 export declare function useValueAndOpenStates<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>(parameters: UsePickerDateStateParameters<TValue, TView, TExternalProps>): {
   timezone: string;
   state: UsePickerState<TValue>;

package/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValueManager } from "../../../models/index.js";
-import { PickerSelectionState, UsePickerProps, UsePickerState } from "../usePicker.types.js";
-import { InferError } from "../../../../models/index.js";
-import { SetValueActionOptions } from "../../../components/PickerProvider.js";
-import { Validator } from "../../../../validation/index.js";
+import type { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValueManager } from "../../../models/index.js";
+import type { PickerSelectionState, UsePickerProps, UsePickerState } from "../usePicker.types.js";
+import type { InferError } from "../../../../models/index.js";
+import type { SetValueActionOptions } from "../../../components/PickerProvider.js";
+import type { Validator } from "../../../../validation/index.js";
 export declare function useValueAndOpenStates<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>(parameters: UsePickerDateStateParameters<TValue, TView, TExternalProps>): {
   timezone: string;
   state: UsePickerState<TValue>;

package/internals/hooks/usePicker/usePicker.d.mts

@@ -1,5 +1,5 @@
-import { UsePickerParameters, UsePickerProps, UsePickerReturnValue } from "./usePicker.types.mjs";
-import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../../models/index.mjs";
+import type { UsePickerParameters, UsePickerProps, UsePickerReturnValue } from "./usePicker.types.mjs";
+import type { DateOrTimeViewWithMeridiem, PickerValidValue } from "../../models/index.mjs";
 export declare const usePicker: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>({
   ref,
   props,

package/internals/hooks/usePicker/usePicker.d.ts

@@ -1,5 +1,5 @@
-import { UsePickerParameters, UsePickerProps, UsePickerReturnValue } from "./usePicker.types.js";
-import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../../models/index.js";
+import type { UsePickerParameters, UsePickerProps, UsePickerReturnValue } from "./usePicker.types.js";
+import type { DateOrTimeViewWithMeridiem, PickerValidValue } from "../../models/index.js";
 export declare const usePicker: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>({
   ref,
   props,

package/internals/hooks/usePicker/usePicker.types.d.mts

@@ -1,14 +1,14 @@
 import type * as React from 'react';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
-import { InferError, OnErrorProps, PickerChangeHandlerContext, PickerOwnerState, PickerValidDate, PickerValueType, TimezoneProps } from "../../../models/index.mjs";
-import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerRangeValue, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.mjs";
-import { Validator } from "../../../validation/index.mjs";
-import { UseViewsOptions } from "../useViews.mjs";
-import { PickerProviderProps } from "../../components/PickerProvider.mjs";
-import { PickersInputLocaleText } from "../../../locales/index.mjs";
-import { PickerFieldPrivateContextValue } from "../useNullableFieldPrivateContext.mjs";
-import { CreateStepNavigationReturnValue } from "../../utils/createStepNavigation.mjs";
+import type { SxProps } from '@mui/system';
+import type { Theme } from '@mui/material/styles';
+import type { InferError, OnErrorProps, PickerChangeHandlerContext, PickerOwnerState, PickerValidDate, PickerValueType, TimezoneProps } from "../../../models/index.mjs";
+import type { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerRangeValue, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.mjs";
+import type { Validator } from "../../../validation/index.mjs";
+import type { UseViewsOptions } from "../useViews.mjs";
+import type { PickerProviderProps } from "../../components/PickerProvider.mjs";
+import type { PickersInputLocaleText } from "../../../locales/index.mjs";
+import type { PickerFieldPrivateContextValue } from "../useNullableFieldPrivateContext.mjs";
+import type { CreateStepNavigationReturnValue } from "../../utils/createStepNavigation.mjs";
 /**
  * Props common to all Picker headless implementations.
  * Those props are exposed on all the Pickers.

package/internals/hooks/usePicker/usePicker.types.d.ts

@@ -1,14 +1,14 @@
 import type * as React from 'react';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
-import { InferError, OnErrorProps, PickerChangeHandlerContext, PickerOwnerState, PickerValidDate, PickerValueType, TimezoneProps } from "../../../models/index.js";
-import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerRangeValue, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.js";
-import { Validator } from "../../../validation/index.js";
-import { UseViewsOptions } from "../useViews.js";
-import { PickerProviderProps } from "../../components/PickerProvider.js";
-import { PickersInputLocaleText } from "../../../locales/index.js";
-import { PickerFieldPrivateContextValue } from "../useNullableFieldPrivateContext.js";
-import { CreateStepNavigationReturnValue } from "../../utils/createStepNavigation.js";
+import type { SxProps } from '@mui/system';
+import type { Theme } from '@mui/material/styles';
+import type { InferError, OnErrorProps, PickerChangeHandlerContext, PickerOwnerState, PickerValidDate, PickerValueType, TimezoneProps } from "../../../models/index.js";
+import type { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerRangeValue, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.js";
+import type { Validator } from "../../../validation/index.js";
+import type { UseViewsOptions } from "../useViews.js";
+import type { PickerProviderProps } from "../../components/PickerProvider.js";
+import type { PickersInputLocaleText } from "../../../locales/index.js";
+import type { PickerFieldPrivateContextValue } from "../useNullableFieldPrivateContext.js";
+import type { CreateStepNavigationReturnValue } from "../../utils/createStepNavigation.js";
 /**
  * Props common to all Picker headless implementations.
  * Those props are exposed on all the Pickers.

package/internals/hooks/usePickerDayOwnerState.d.mts

@@ -1,5 +1,5 @@
-import { PickerDayOwnerState } from "./PickerDay.types.mjs";
-import { PickerValidDate } from "../../models/pickers.mjs";
+import type { PickerDayOwnerState } from "./PickerDay.types.mjs";
+import type { PickerValidDate } from "../../models/pickers.mjs";
 export declare function usePickerDayOwnerState(parameters: UsePickerDayOwnerStateParameters): PickerDayOwnerState;
 interface UsePickerDayOwnerStateParameters {
   day: PickerValidDate;