@mui/x-date-pickers 9.0.0-alpha.2 → 9.0.0-alpha.4

package/TimeField/TimeField.mjs

@@ -111,6 +111,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.bool,
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  fieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * If `true`, the component is displayed in focused state.
    */
@@ -314,10 +318,6 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,
-  /**
-   * The ref object used to imperatively interact with the field.
-   */
-  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/hooks/useSplitFieldProps.d.mts

@@ -1,6 +1,6 @@
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.mjs";
 import { PickerValueType } from "../models/common.mjs";
-declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "unstableStartFieldRef", "unstableEndFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
+declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "fieldRef", "startFieldRef", "endFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
 export type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
 /**
  * Split the props received by the field component into:

package/hooks/useSplitFieldProps.d.ts

@@ -1,6 +1,6 @@
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.js";
 import { PickerValueType } from "../models/common.js";
-declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "unstableStartFieldRef", "unstableEndFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
+declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "fieldRef", "startFieldRef", "endFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
 export type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
 /**
  * Split the props received by the field component into:

package/hooks/useSplitFieldProps.js

@@ -10,7 +10,7 @@ exports.useSplitFieldProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _extractValidationProps = require("../validation/extractValidationProps");
-const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'unstableStartFieldRef', 'unstableEndFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus', 'focused'];
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'fieldRef', 'startFieldRef', 'endFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus', 'focused'];
 /**
  * Split the props received by the field component into:
  * - `internalProps` which are used by the various hooks called by the field component.

package/hooks/useSplitFieldProps.mjs

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.mjs";
-const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'unstableStartFieldRef', 'unstableEndFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus', 'focused'];
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'fieldRef', 'startFieldRef', 'endFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus', 'focused'];
 /**
  * Split the props received by the field component into:
  * - `internalProps` which are used by the various hooks called by the field component.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v9.0.0-alpha.2
+ * @mui/x-date-pickers v9.0.0-alpha.4
  *
  * @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-alpha.2
+ * @mui/x-date-pickers v9.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickerPopper/PickerPopper.js

@@ -21,6 +21,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
+var _isElementInteractive = require("../../utils/isElementInteractive");
 var _pickerPopperClasses = require("./pickerPopperClasses");
 var _utils = require("../../utils/utils");
 var _usePickerPrivateContext = require("../../hooks/usePickerPrivateContext");
@@ -213,6 +214,13 @@ const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 if (process.env.NODE_ENV !== "production") PickerPopperPaperWrapper.displayName = "PickerPopperPaperWrapper";
+const isEventTargetInteractive = eventTarget => {
+  const element = eventTarget instanceof HTMLElement ? eventTarget : null;
+  if (!element) {
+    return false;
+  }
+  return (0, _isElementInteractive.isElementInteractive)(element);
+};
 function PickerPopper(inProps) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
@@ -284,6 +292,14 @@ function PickerPopper(inProps) {
         dismissViews();
       });
     } else {
+      // Get all the targets of this event.
+      const eventTargets = event.composedPath();
+      // https://github.com/mui/mui-x/pull/13434
+      // Check if the click is on an interactive element.
+      // If it is, we don't want to refocus the last focused element.
+      if (eventTargets.some(isEventTargetInteractive)) {
+        lastFocusedElementRef.current = null;
+      }
       dismissViews();
     }
   });
@@ -330,8 +346,7 @@ function PickerPopper(inProps) {
       // which would force screen readers to read too old label
       ,
       disableRestoreFocus: true,
-      disableEnforceFocus: viewContainerRole === 'tooltip',
-      isEnabled: () => true
+      disableEnforceFocus: viewContainerRole === 'tooltip'
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, (0, _extends2.default)({}, TransitionProps, slotProps?.desktopTransition, {
         onExited: event => {

package/internals/components/PickerPopper/PickerPopper.mjs

@@ -15,6 +15,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import ownerDocument from '@mui/utils/ownerDocument';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, useThemeProps } from '@mui/material/styles';
+import { isElementInteractive } from "../../utils/isElementInteractive.mjs";
 import { getPickerPopperUtilityClass } from "./pickerPopperClasses.mjs";
 import { executeInTheNextEventLoopTick, getActiveElement } from "../../utils/utils.mjs";
 import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.mjs";
@@ -206,6 +207,13 @@ const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 if (process.env.NODE_ENV !== "production") PickerPopperPaperWrapper.displayName = "PickerPopperPaperWrapper";
+const isEventTargetInteractive = eventTarget => {
+  const element = eventTarget instanceof HTMLElement ? eventTarget : null;
+  if (!element) {
+    return false;
+  }
+  return isElementInteractive(element);
+};
 export function PickerPopper(inProps) {
   const props = useThemeProps({
     props: inProps,
@@ -277,6 +285,14 @@ export function PickerPopper(inProps) {
         dismissViews();
       });
     } else {
+      // Get all the targets of this event.
+      const eventTargets = event.composedPath();
+      // https://github.com/mui/mui-x/pull/13434
+      // Check if the click is on an interactive element.
+      // If it is, we don't want to refocus the last focused element.
+      if (eventTargets.some(isEventTargetInteractive)) {
+        lastFocusedElementRef.current = null;
+      }
       dismissViews();
     }
   });
@@ -323,8 +339,7 @@ export function PickerPopper(inProps) {
       // which would force screen readers to read too old label
       ,
       disableRestoreFocus: true,
-      disableEnforceFocus: viewContainerRole === 'tooltip',
-      isEnabled: () => true
+      disableEnforceFocus: viewContainerRole === 'tooltip'
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps?.desktopTransition, {
         onExited: event => {

package/internals/components/PickersModalDialog.js

@@ -48,7 +48,6 @@ function PickersModalDialog(props) {
     onPopperExited
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const Dialog = slots?.dialog ?? PickersModalDialogRoot;
-  const Transition = slots?.mobileTransition ?? _Fade.default;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog, (0, _extends2.default)({
     open: open,
     onClose: () => {
@@ -56,10 +55,14 @@ function PickersModalDialog(props) {
       onPopperExited?.();
     }
   }, slotProps?.dialog, {
-    TransitionComponent: Transition,
-    TransitionProps: slotProps?.mobileTransition,
     PaperComponent: slots?.mobilePaper,
-    PaperProps: slotProps?.mobilePaper,
+    slots: (0, _extends2.default)({
+      transition: slots?.mobileTransition ?? _Fade.default
+    }, slotProps?.dialog?.slots),
+    slotProps: (0, _extends2.default)({
+      transition: slotProps?.mobileTransition,
+      paper: slotProps?.mobilePaper
+    }, slotProps?.dialog?.slotProps),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersModalDialogContent, {
       children: children
     })

package/internals/components/PickersModalDialog.mjs

@@ -40,7 +40,6 @@ export function PickersModalDialog(props) {
     onPopperExited
   } = usePickerPrivateContext();
   const Dialog = slots?.dialog ?? PickersModalDialogRoot;
-  const Transition = slots?.mobileTransition ?? Fade;
   return /*#__PURE__*/_jsx(Dialog, _extends({
     open: open,
     onClose: () => {
@@ -48,10 +47,14 @@ export function PickersModalDialog(props) {
       onPopperExited?.();
     }
   }, slotProps?.dialog, {
-    TransitionComponent: Transition,
-    TransitionProps: slotProps?.mobileTransition,
     PaperComponent: slots?.mobilePaper,
-    PaperProps: slotProps?.mobilePaper,
+    slots: _extends({
+      transition: slots?.mobileTransition ?? Fade
+    }, slotProps?.dialog?.slots),
+    slotProps: _extends({
+      transition: slotProps?.mobileTransition,
+      paper: slotProps?.mobilePaper
+    }, slotProps?.dialog?.slotProps),
     children: /*#__PURE__*/_jsx(PickersModalDialogContent, {
       children: children
     })

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

@@ -75,7 +75,7 @@ export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableA
   /**
    * The ref object used to imperatively interact with the field.
    */
-  unstableFieldRef?: React.Ref<FieldRef<TValue>>;
+  fieldRef?: React.Ref<FieldRef<TValue>>;
   /**
    * @default true
    */

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

@@ -75,7 +75,7 @@ export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableA
   /**
    * The ref object used to imperatively interact with the field.
    */
-  unstableFieldRef?: React.Ref<FieldRef<TValue>>;
+  fieldRef?: React.Ref<FieldRef<TValue>>;
   /**
    * @default true
    */

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -26,7 +26,7 @@ function useFieldInternalPropsWithDefaults(parameters) {
   } = parameters;
   const pickerContext = (0, _useNullablePickerContext.useNullablePickerContext)();
   const fieldPrivateContext = (0, _useNullableFieldPrivateContext.useNullableFieldPrivateContext)();
-  const handleFieldRef = (0, _useForkRef.default)(internalProps.unstableFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
+  const handleFieldRef = (0, _useForkRef.default)(internalProps.fieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.internalFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
   const setValue = pickerContext?.setValue;
   const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
     return setValue?.(newValue, {
@@ -51,7 +51,7 @@ function useFieldInternalPropsWithDefaults(parameters) {
         enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
         selectedSections: fieldPrivateContext.selectedSections,
         onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange,
-        unstableFieldRef: handleFieldRef
+        fieldRef: handleFieldRef
       }, internalProps);
     }
     return internalProps;

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.mjs

@@ -19,7 +19,7 @@ export function useFieldInternalPropsWithDefaults(parameters) {
   } = parameters;
   const pickerContext = useNullablePickerContext();
   const fieldPrivateContext = useNullableFieldPrivateContext();
-  const handleFieldRef = useForkRef(internalProps.unstableFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
+  const handleFieldRef = useForkRef(internalProps.fieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.internalFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
   const setValue = pickerContext?.setValue;
   const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
     return setValue?.(newValue, {
@@ -44,7 +44,7 @@ export function useFieldInternalPropsWithDefaults(parameters) {
         enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
         selectedSections: fieldPrivateContext.selectedSections,
         onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange,
-        unstableFieldRef: handleFieldRef
+        fieldRef: handleFieldRef
       }, internalProps);
     }
     return internalProps;

package/internals/hooks/useField/useFieldV6TextField.js

@@ -90,7 +90,7 @@ const useFieldV6TextField = parameters => {
     disabled = false,
     autoFocus = false,
     focused,
-    unstableFieldRef
+    fieldRef
   } = internalPropsWithDefaults;
   const inputRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(inputRefProp, inputRef);
@@ -374,7 +374,7 @@ const useFieldV6TextField = parameters => {
   }, [activeSectionIndex, state.sections]);
   const inputHasFocus = inputRef.current && inputRef.current === (0, _utils.getActiveElement)(inputRef.current);
   const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
-  React.useImperativeHandle(unstableFieldRef, () => ({
+  React.useImperativeHandle(fieldRef, () => ({
     getSections: () => state.sections,
     getActiveSectionIndex: () => {
       const browserStartIndex = inputRef.current.selectionStart ?? 0;
@@ -388,7 +388,8 @@ const useFieldV6TextField = parameters => {
     },
     setSelectedSections: newSelectedSections => setSelectedSections(newSelectedSections),
     focusField,
-    isFieldFocused: () => isFieldFocused(inputRef)
+    isFieldFocused: () => isFieldFocused(inputRef),
+    clearValue
   }));
   return (0, _extends2.default)({}, forwardedProps, {
     error,

package/internals/hooks/useField/useFieldV6TextField.mjs

@@ -82,7 +82,7 @@ export const useFieldV6TextField = parameters => {
     disabled = false,
     autoFocus = false,
     focused,
-    unstableFieldRef
+    fieldRef
   } = internalPropsWithDefaults;
   const inputRef = React.useRef(null);
   const handleRef = useForkRef(inputRefProp, inputRef);
@@ -366,7 +366,7 @@ export const useFieldV6TextField = parameters => {
   }, [activeSectionIndex, state.sections]);
   const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(inputRef.current);
   const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
-  React.useImperativeHandle(unstableFieldRef, () => ({
+  React.useImperativeHandle(fieldRef, () => ({
     getSections: () => state.sections,
     getActiveSectionIndex: () => {
       const browserStartIndex = inputRef.current.selectionStart ?? 0;
@@ -380,7 +380,8 @@ export const useFieldV6TextField = parameters => {
     },
     setSelectedSections: newSelectedSections => setSelectedSections(newSelectedSections),
     focusField,
-    isFieldFocused: () => isFieldFocused(inputRef)
+    isFieldFocused: () => isFieldFocused(inputRef),
+    clearValue
   }));
   return _extends({}, forwardedProps, {
     error,

package/internals/hooks/useField/useFieldV7TextField.js

@@ -59,7 +59,7 @@ const useFieldV7TextField = parameters => {
     readOnly = false,
     autoFocus = false,
     focused: focusedProp,
-    unstableFieldRef
+    fieldRef
   } = internalPropsWithDefaults;
   const sectionListRef = React.useRef(null);
   const handleSectionListRef = (0, _useForkRef.default)(sectionListRefProp, sectionListRef);
@@ -219,7 +219,7 @@ Learn more about the field accessible DOM structure on the MUI documentation: ht
       stateResponse
     });
   });
-  React.useImperativeHandle(unstableFieldRef, () => ({
+  React.useImperativeHandle(fieldRef, () => ({
     getSections: () => state.sections,
     getActiveSectionIndex: () => getActiveSectionIndex(sectionListRef),
     setSelectedSections: newSelectedSections => {
@@ -232,7 +232,8 @@ Learn more about the field accessible DOM structure on the MUI documentation: ht
       setSelectedSections(newSelectedSections);
     },
     focusField,
-    isFieldFocused: () => isFieldFocused(sectionListRef)
+    isFieldFocused: () => isFieldFocused(sectionListRef),
+    clearValue
   }));
   return (0, _extends2.default)({}, forwardedProps, rootProps, {
     onBlur: handleRootBlur,

package/internals/hooks/useField/useFieldV7TextField.mjs

@@ -52,7 +52,7 @@ export const useFieldV7TextField = parameters => {
     readOnly = false,
     autoFocus = false,
     focused: focusedProp,
-    unstableFieldRef
+    fieldRef
   } = internalPropsWithDefaults;
   const sectionListRef = React.useRef(null);
   const handleSectionListRef = useForkRef(sectionListRefProp, sectionListRef);
@@ -212,7 +212,7 @@ Learn more about the field accessible DOM structure on the MUI documentation: ht
       stateResponse
     });
   });
-  React.useImperativeHandle(unstableFieldRef, () => ({
+  React.useImperativeHandle(fieldRef, () => ({
     getSections: () => state.sections,
     getActiveSectionIndex: () => getActiveSectionIndex(sectionListRef),
     setSelectedSections: newSelectedSections => {
@@ -225,7 +225,8 @@ Learn more about the field accessible DOM structure on the MUI documentation: ht
       setSelectedSections(newSelectedSections);
     },
     focusField,
-    isFieldFocused: () => isFieldFocused(sectionListRef)
+    isFieldFocused: () => isFieldFocused(sectionListRef),
+    clearValue
   }));
   return _extends({}, forwardedProps, rootProps, {
     onBlur: handleRootBlur,

package/internals/hooks/useNullableFieldPrivateContext.d.mts

@@ -5,5 +5,6 @@ import { 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, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
-  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+  internalFieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+  fieldRef?: React.RefObject<FieldRef<any> | null>;
 }

package/internals/hooks/useNullableFieldPrivateContext.d.ts

@@ -5,5 +5,6 @@ import { 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, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
-  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+  internalFieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+  fieldRef?: React.RefObject<FieldRef<any> | null>;
 }

package/internals/hooks/usePicker/usePicker.js

@@ -84,7 +84,7 @@ const usePicker = ({
    */
   const [triggerElement, triggerRef] = React.useState(null);
   const popupRef = React.useRef(null);
-  const fieldRef = React.useRef(null);
+  const internalFieldRef = React.useRef(null);
   const rootRefObject = React.useRef(null);
   const rootRef = (0, _useForkRef.default)(ref, rootRefObject);
   const {
@@ -119,9 +119,14 @@ const usePicker = ({
     autoFocus: autoFocusView,
     getStepNavigation
   });
-  const clearValue = (0, _useEventCallback.default)(() => setValue(valueManager.emptyValue, {
-    source: 'view'
-  }));
+  const clearValue = (0, _useEventCallback.default)(() => {
+    if (value === null && internalFieldRef.current?.clearValue) {
+      internalFieldRef.current.clearValue();
+    }
+    setValue(valueManager.emptyValue, {
+      source: 'view'
+    });
+  });
   const setValueToToday = (0, _useEventCallback.default)(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType), {
     source: 'view'
   }));
@@ -168,10 +173,10 @@ const usePicker = ({
     if (currentViewMode === 'field' && state.open) {
       setOpen(false);
       setTimeout(() => {
-        fieldRef?.current?.setSelectedSections(view);
+        internalFieldRef?.current?.setSelectedSections(view);
         // focusing the input before the range selection is done
         // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
-        fieldRef?.current?.focusField(view);
+        internalFieldRef?.current?.focusField(view);
       });
     }
   }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -273,8 +278,8 @@ const usePicker = ({
     enableAccessibleFieldDOMStructure,
     selectedSections,
     onSelectedSectionsChange,
-    fieldRef
-  }), [formatDensity, enableAccessibleFieldDOMStructure, selectedSections, onSelectedSectionsChange, fieldRef]);
+    internalFieldRef
+  }), [formatDensity, enableAccessibleFieldDOMStructure, selectedSections, onSelectedSectionsChange, internalFieldRef]);
   const isValidContextValue = testedValue => {
     const error = validator({
       adapter,

package/internals/hooks/usePicker/usePicker.mjs

@@ -77,7 +77,7 @@ export const usePicker = ({
    */
   const [triggerElement, triggerRef] = React.useState(null);
   const popupRef = React.useRef(null);
-  const fieldRef = React.useRef(null);
+  const internalFieldRef = React.useRef(null);
   const rootRefObject = React.useRef(null);
   const rootRef = useForkRef(ref, rootRefObject);
   const {
@@ -112,9 +112,14 @@ export const usePicker = ({
     autoFocus: autoFocusView,
     getStepNavigation
   });
-  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue, {
-    source: 'view'
-  }));
+  const clearValue = useEventCallback(() => {
+    if (value === null && internalFieldRef.current?.clearValue) {
+      internalFieldRef.current.clearValue();
+    }
+    setValue(valueManager.emptyValue, {
+      source: 'view'
+    });
+  });
   const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType), {
     source: 'view'
   }));
@@ -161,10 +166,10 @@ export const usePicker = ({
     if (currentViewMode === 'field' && state.open) {
       setOpen(false);
       setTimeout(() => {
-        fieldRef?.current?.setSelectedSections(view);
+        internalFieldRef?.current?.setSelectedSections(view);
         // focusing the input before the range selection is done
         // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
-        fieldRef?.current?.focusField(view);
+        internalFieldRef?.current?.focusField(view);
       });
     }
   }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -266,8 +271,8 @@ export const usePicker = ({
     enableAccessibleFieldDOMStructure,
     selectedSections,
     onSelectedSectionsChange,
-    fieldRef
-  }), [formatDensity, enableAccessibleFieldDOMStructure, selectedSections, onSelectedSectionsChange, fieldRef]);
+    internalFieldRef
+  }), [formatDensity, enableAccessibleFieldDOMStructure, selectedSections, onSelectedSectionsChange, internalFieldRef]);
   const isValidContextValue = testedValue => {
     const error = validator({
       adapter,

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

@@ -1,3 +1,4 @@
+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";
@@ -68,7 +69,7 @@ export interface UsePickerBaseProps<TValue extends PickerValidValue, TView exten
 /**
  * Props used to handle the value of non-static Pickers.
  */
-export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextValue, 'fieldRef'> {
+export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextValue, 'internalFieldRef' | 'fieldRef'> {
   /**
    * If `true`, the Picker will close after submitting the full date.
    * @default false

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

@@ -1,3 +1,4 @@
+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";
@@ -68,7 +69,7 @@ export interface UsePickerBaseProps<TValue extends PickerValidValue, TView exten
 /**
  * Props used to handle the value of non-static Pickers.
  */
-export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextValue, 'fieldRef'> {
+export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextValue, 'internalFieldRef' | 'fieldRef'> {
   /**
    * If `true`, the Picker will close after submitting the full date.
    * @default false

package/internals/index.d.mts

@@ -64,6 +64,7 @@ export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-ti
 export { executeInTheNextEventLoopTick, 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";
 export { DayCalendar } from "../DateCalendar/DayCalendar.mjs";
 export type { DayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, ExportedDayCalendarProps } from "../DateCalendar/DayCalendar.mjs";
 export type { ExportedDateCalendarProps } from "../DateCalendar/DateCalendar.types.mjs";

package/internals/index.d.ts

@@ -64,6 +64,7 @@ export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-ti
 export { executeInTheNextEventLoopTick, 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";
 export { DayCalendar } from "../DateCalendar/DayCalendar.js";
 export type { DayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, ExportedDayCalendarProps } from "../DateCalendar/DayCalendar.js";
 export type { ExportedDateCalendarProps } from "../DateCalendar/DateCalendar.types.js";

package/internals/index.js

@@ -201,6 +201,12 @@ Object.defineProperty(exports, "isDatePickerView", {
     return _dateUtils.isDatePickerView;
   }
 });
+Object.defineProperty(exports, "isElementInteractive", {
+  enumerable: true,
+  get: function () {
+    return _isElementInteractive.isElementInteractive;
+  }
+});
 Object.defineProperty(exports, "isInternalTimeView", {
   enumerable: true,
   get: function () {
@@ -464,6 +470,7 @@ var _dateTimeUtils = require("./utils/date-time-utils");
 var _utils = require("./utils/utils");
 var _useReduceAnimations = require("./hooks/useReduceAnimations");
 var _views = require("./utils/views");
+var _isElementInteractive = require("./utils/isElementInteractive");
 var _DayCalendar = require("../DateCalendar/DayCalendar");
 var _useCalendarState = require("../DateCalendar/useCalendarState");
 var _DateTimePickerToolbar = require("../DateTimePicker/DateTimePickerToolbar");

package/internals/index.mjs

@@ -33,6 +33,7 @@ export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-ti
 export { executeInTheNextEventLoopTick, 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";
 export { DayCalendar } from "../DateCalendar/DayCalendar.mjs";
 export { useCalendarState } from "../DateCalendar/useCalendarState.mjs";
 export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.mjs";

package/internals/utils/isElementInteractive.d.mts

@@ -0,0 +1 @@
+export declare function isElementInteractive(element: HTMLElement): boolean;

package/internals/utils/isElementInteractive.d.ts

@@ -0,0 +1 @@
+export declare function isElementInteractive(element: HTMLElement): boolean;