@mui/x-date-pickers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/modern/internals/hooks/usePicker/usePickerValue.js

@@ -5,107 +5,6 @@ import { useOpenState } from "../useOpenState.js";
 import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { useValidation } from "../../../validation/index.js";
 import { useValueWithTimezone } from "../useValueWithTimezone.js";
-
-/**
- * Decide if the new value should be published
- * The published value will be passed to `onChange` if defined.
- */
-const shouldPublishValue = params => {
-  const {
-    action,
-    hasChanged,
-    dateState,
-    isControlled
-  } = params;
-  const isCurrentValueTheDefaultValue = !isControlled && !dateState.hasBeenModifiedSinceMount;
-
-  // The field is responsible for only calling `onChange` when needed.
-  if (action.name === 'setValueFromField') {
-    return true;
-  }
-  if (action.name === 'setValueFromAction') {
-    // If the component is not controlled, and the value has not been modified since the mount,
-    // Then we want to publish the default value whenever the user pressed the "Accept", "Today" or "Clear" button.
-    if (isCurrentValueTheDefaultValue && ['accept', 'today', 'clear'].includes(action.pickerAction)) {
-      return true;
-    }
-    return hasChanged(dateState.lastPublishedValue);
-  }
-  if (action.name === 'setValueFromView' && action.selectionState !== 'shallow') {
-    // On the first view,
-    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onChange`
-    if (isCurrentValueTheDefaultValue) {
-      return true;
-    }
-    return hasChanged(dateState.lastPublishedValue);
-  }
-  if (action.name === 'setValueFromShortcut') {
-    // On the first view,
-    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onChange`
-    if (isCurrentValueTheDefaultValue) {
-      return true;
-    }
-    return hasChanged(dateState.lastPublishedValue);
-  }
-  return false;
-};
-
-/**
- * Decide if the new value should be committed.
- * The committed value will be passed to `onAccept` if defined.
- * It will also be used as a reset target when calling the `cancel` picker action (when clicking on the "Cancel" button).
- */
-const shouldCommitValue = params => {
-  const {
-    action,
-    hasChanged,
-    dateState,
-    isControlled,
-    closeOnSelect
-  } = params;
-  const isCurrentValueTheDefaultValue = !isControlled && !dateState.hasBeenModifiedSinceMount;
-  if (action.name === 'setValueFromAction') {
-    // If the component is not controlled, and the value has not been modified since the mount,
-    // Then we want to commit the default value whenever the user pressed the "Accept", "Today" or "Clear" button.
-    if (isCurrentValueTheDefaultValue && ['accept', 'today', 'clear'].includes(action.pickerAction)) {
-      return true;
-    }
-    return hasChanged(dateState.lastCommittedValue);
-  }
-  if (action.name === 'setValueFromView' && action.selectionState === 'finish' && closeOnSelect) {
-    // On picker where the 1st view is also the last view,
-    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onAccept`
-    if (isCurrentValueTheDefaultValue) {
-      return true;
-    }
-    return hasChanged(dateState.lastCommittedValue);
-  }
-  if (action.name === 'setValueFromShortcut') {
-    return action.changeImportance === 'accept' && hasChanged(dateState.lastCommittedValue);
-  }
-  return false;
-};
-
-/**
- * Decide if the picker should be closed after the value is updated.
- */
-const shouldClosePicker = params => {
-  const {
-    action,
-    closeOnSelect
-  } = params;
-  if (action.name === 'setValueFromAction') {
-    return true;
-  }
-  if (action.name === 'setValueFromView') {
-    return action.selectionState === 'finish' && closeOnSelect;
-  }
-  if (action.name === 'setValueFromShortcut') {
-    return action.changeImportance === 'accept';
-  }
-  return false;
-};
-
 /**
  * Manage the value lifecycle of all the pickers.
  */
@@ -113,7 +12,6 @@ export const usePickerValue = ({
   props,
   valueManager,
   valueType,
-  variant,
   validator
 }) => {
   const {
@@ -121,7 +19,7 @@ export const usePickerValue = ({
     onChange,
     value: inValueWithoutRenderTimezone,
     defaultValue: inDefaultValue,
-    closeOnSelect = variant === 'desktop',
+    closeOnSelect = false,
     timezone: timezoneProp,
     referenceDate
   } = props;
@@ -151,8 +49,8 @@ export const usePickerValue = ({
   const utils = useUtils();
   const adapter = useLocalizationContext();
   const {
-    isOpen,
-    setIsOpen
+    open,
+    setOpen
   } = useOpenState(props);
   const {
     timezone,
@@ -201,44 +99,51 @@ export const usePickerValue = ({
     value: dateState.draft,
     onError: props.onError
   });
-  const updateDate = useEventCallback(action => {
-    const updaterParams = {
-      action,
-      dateState,
-      hasChanged: comparison => !valueManager.areValuesEqual(utils, action.value, comparison),
-      isControlled,
-      closeOnSelect
-    };
-    const shouldPublish = shouldPublishValue(updaterParams);
-    const shouldCommit = shouldCommitValue(updaterParams);
-    const shouldClose = shouldClosePicker(updaterParams);
+  const setValue = useEventCallback((newValue, options) => {
+    const {
+      changeImportance = 'accept',
+      skipPublicationIfPristine = false,
+      validationError,
+      shortcut,
+      shouldClose = changeImportance === 'accept'
+    } = options ?? {};
+    let shouldPublish;
+    let shouldCommit;
+    if (!skipPublicationIfPristine && !isControlled && !dateState.hasBeenModifiedSinceMount) {
+      // If the value is not controlled and the value has never been modified before,
+      // Then clicking on any value (including the one equal to `defaultValue`) should call `onChange` and `onAccept`
+      shouldPublish = true;
+      shouldCommit = changeImportance === 'accept';
+    } else {
+      shouldPublish = !valueManager.areValuesEqual(utils, newValue, dateState.lastPublishedValue);
+      shouldCommit = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, dateState.lastCommittedValue);
+    }
     setDateState(prev => _extends({}, prev, {
-      draft: action.value,
-      lastPublishedValue: shouldPublish ? action.value : prev.lastPublishedValue,
-      lastCommittedValue: shouldCommit ? action.value : prev.lastCommittedValue,
+      draft: newValue,
+      lastPublishedValue: shouldPublish ? newValue : prev.lastPublishedValue,
+      lastCommittedValue: shouldCommit ? newValue : prev.lastCommittedValue,
       hasBeenModifiedSinceMount: true
     }));
     let cachedContext = null;
     const getContext = () => {
       if (!cachedContext) {
-        const validationError = action.name === 'setValueFromField' ? action.context.validationError : getValidationErrorForNewValue(action.value);
         cachedContext = {
-          validationError
+          validationError: validationError == null ? getValidationErrorForNewValue(newValue) : validationError
         };
-        if (action.name === 'setValueFromShortcut') {
-          cachedContext.shortcut = action.shortcut;
+        if (shortcut) {
+          cachedContext.shortcut = shortcut;
         }
       }
       return cachedContext;
     };
     if (shouldPublish) {
-      handleValueChange(action.value, getContext());
+      handleValueChange(newValue, getContext());
     }
     if (shouldCommit && onAccept) {
-      onAccept(action.value, getContext());
+      onAccept(newValue, getContext());
     }
     if (shouldClose) {
-      setIsOpen(false);
+      setOpen(false);
     }
   });
   if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
@@ -252,85 +157,6 @@ export const usePickerValue = ({
       hasBeenModifiedSinceMount: true
     }));
   }
-  const handleClear = useEventCallback(() => {
-    updateDate({
-      value: valueManager.emptyValue,
-      name: 'setValueFromAction',
-      pickerAction: 'clear'
-    });
-  });
-  const handleAccept = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'accept'
-    });
-  });
-  const handleDismiss = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'dismiss'
-    });
-  });
-  const handleCancel = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastCommittedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'cancel'
-    });
-  });
-  const handleSetToday = useEventCallback(() => {
-    updateDate({
-      value: valueManager.getTodayValue(utils, timezone, valueType),
-      name: 'setValueFromAction',
-      pickerAction: 'today'
-    });
-  });
-  const handleOpen = useEventCallback(event => {
-    event.preventDefault();
-    setIsOpen(true);
-  });
-  const handleClose = useEventCallback(event => {
-    event?.preventDefault();
-    setIsOpen(false);
-  });
-  const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
-    name: 'setValueFromView',
-    value: newValue,
-    selectionState
-  }));
-  const handleSelectShortcut = useEventCallback((newValue, changeImportance, shortcut) => updateDate({
-    name: 'setValueFromShortcut',
-    value: newValue,
-    changeImportance,
-    shortcut
-  }));
-  const handleChangeFromField = useEventCallback((newValue, context) => updateDate({
-    name: 'setValueFromField',
-    value: newValue,
-    context
-  }));
-  const actions = {
-    onClear: handleClear,
-    onAccept: handleAccept,
-    onDismiss: handleDismiss,
-    onCancel: handleCancel,
-    onSetToday: handleSetToday,
-    onOpen: handleOpen,
-    onClose: handleClose
-  };
-  const fieldResponse = {
-    value: dateState.draft,
-    onChange: handleChangeFromField
-  };
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
-  const viewResponse = {
-    value: viewValue,
-    onChange: handleChange,
-    onClose: handleClose,
-    open: isOpen
-  };
   const isValid = testedValue => {
     const error = validator({
       adapter,
@@ -340,17 +166,61 @@ export const usePickerValue = ({
     });
     return !valueManager.hasError(error);
   };
-  const layoutResponse = _extends({}, actions, {
-    value: viewValue,
-    onChange: handleChange,
-    onSelectShortcut: handleSelectShortcut,
-    isValid
+  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
+  const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
+  const acceptValueChanges = useEventCallback(() => setValue(dateState.lastPublishedValue));
+  const cancelValueChanges = useEventCallback(() => setValue(dateState.lastCommittedValue, {
+    skipPublicationIfPristine: true
+  }));
+  const dismissViews = useEventCallback(() => {
+    setValue(dateState.lastPublishedValue, {
+      skipPublicationIfPristine: true
+    });
+  });
+  const setValueFromView = useEventCallback((newValue, selectionState = 'partial') => {
+    // TODO: Expose a new method (private?) like `setView` that only updates the draft value.
+    if (selectionState === 'shallow') {
+      setDateState(prev => _extends({}, prev, {
+        draft: newValue,
+        hasBeenModifiedSinceMount: true
+      }));
+    }
+    setValue(newValue, {
+      changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'
+    });
   });
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const viewResponse = {
+    value: valueWithoutError,
+    onChange: setValueFromView,
+    open,
+    setOpen
+  };
+  const actionsContextValue = React.useMemo(() => ({
+    setValue,
+    setOpen,
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges
+  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
+  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
+    value: dateState.draft,
+    timezone,
+    open
+  }), [actionsContextValue, timezone, open, dateState.draft]);
+  const privateContextValue = React.useMemo(() => ({
+    dismissViews
+  }), [dismissViews]);
+  const providerParams = {
+    value: dateState.draft,
+    contextValue,
+    actionsContextValue,
+    privateContextValue,
+    isValidContextValue: isValid
+  };
   return {
-    open: isOpen,
-    fieldProps: fieldResponse,
     viewProps: viewResponse,
-    layoutProps: layoutResponse,
-    actions
+    provider: providerParams
   };
 };

package/modern/internals/hooks/usePicker/usePickerViews.js

@@ -11,14 +11,10 @@ import { isTimeView } from "../../utils/time-utils.js";
  * Props used to handle the views that are common to all pickers.
  */
 
-/**
- * Props used to handle the views of the pickers.
- */
-
 /**
  * Props used to handle the value of the pickers.
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Manage the views of all the pickers:
  * - Handles the view switch
@@ -28,15 +24,15 @@ import { isTimeView } from "../../utils/time-utils.js";
 export const usePickerViews = ({
   props,
   propsFromPickerValue,
-  additionalViewProps,
   autoFocusView,
-  rendererInterceptor,
+  rendererInterceptor: RendererInterceptor,
   fieldRef
 }) => {
   const {
     onChange,
+    value,
     open,
-    onClose
+    setOpen
   } = propsFromPickerValue;
   const {
     view: inView,
@@ -88,7 +84,7 @@ export const usePickerViews = ({
     return acc;
   }, 0), [viewRenderers, views]);
   const currentViewMode = viewModeLookup[view];
-  const shouldRestoreFocus = useEventCallback(() => currentViewMode === 'UI');
+  const doesTheCurrentViewHasAnUI = useEventCallback(() => currentViewMode === 'UI');
   const [popperView, setPopperView] = React.useState(currentViewMode === 'UI' ? view : null);
   if (popperView !== view && viewModeLookup[view] === 'UI') {
     setPopperView(view);
@@ -96,7 +92,7 @@ export const usePickerViews = ({
   useEnhancedEffect(() => {
     // Handle case of `DateTimePicker` without time renderers
     if (currentViewMode === 'field' && open) {
-      onClose();
+      setOpen(false);
       setTimeout(() => {
         fieldRef?.current?.setSelectedSections(view);
         // focusing the input before the range selection is done
@@ -127,16 +123,26 @@ export const usePickerViews = ({
     setFocusedView(newView, true);
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const layoutProps = {
+  const actionsContextValue = React.useMemo(() => ({
+    setView
+  }), [setView]);
+  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
     views,
-    view: popperView,
-    onViewChange: setView
-  };
-  return {
+    view: popperView
+  }), [actionsContextValue, views, popperView]);
+  const privateContextValue = React.useMemo(() => ({
+    hasUIView,
+    doesTheCurrentViewHasAnUI
+  }), [hasUIView, doesTheCurrentViewHasAnUI]);
+  const providerParams = {
     hasUIView,
     views,
-    shouldRestoreFocus,
-    layoutProps,
+    contextValue,
+    actionsContextValue,
+    privateContextValue
+  };
+  return {
+    provider: providerParams,
     renderCurrentView: () => {
       if (popperView == null) {
         return null;
@@ -145,9 +151,10 @@ export const usePickerViews = ({
       if (renderer == null) {
         return null;
       }
-      const rendererProps = _extends({}, propsToForwardToView, additionalViewProps, propsFromPickerValue, {
+      const rendererProps = _extends({}, propsToForwardToView, {
         views,
         timezone,
+        value,
         onChange: setValueAndGoToNextView,
         view: popperView,
         onViewChange: setView,
@@ -156,8 +163,12 @@ export const usePickerViews = ({
         showViewSwitcher: timeViewsCount > 1,
         timeViewsCount
       });
-      if (rendererInterceptor) {
-        return rendererInterceptor(viewRenderers, popperView, rendererProps);
+      if (RendererInterceptor) {
+        return /*#__PURE__*/_jsx(RendererInterceptor, {
+          viewRenderers: viewRenderers,
+          popperView: popperView,
+          rendererProps: rendererProps
+        });
       }
       return renderer(rendererProps);
     }

package/modern/internals/hooks/{useDefaultReduceAnimations.js → useReduceAnimations.js}

@@ -6,9 +6,12 @@ const mobileVersionMatches = typeof navigator !== 'undefined' && navigator.userA
 const androidVersion = mobileVersionMatches && mobileVersionMatches[1] ? parseInt(mobileVersionMatches[1], 10) : null;
 const iOSVersion = mobileVersionMatches && mobileVersionMatches[2] ? parseInt(mobileVersionMatches[2], 10) : null;
 export const slowAnimationDevices = androidVersion && androidVersion < 10 || iOSVersion && iOSVersion < 13 || false;
-export const useDefaultReduceAnimations = () => {
+export function useReduceAnimations(customReduceAnimations) {
   const prefersReduced = useMediaQuery(PREFERS_REDUCED_MOTION, {
     defaultMatches: false
   });
+  if (customReduceAnimations != null) {
+    return customReduceAnimations;
+  }
   return prefersReduced || slowAnimationDevices;
-};
+}

package/modern/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props", "ref"];
+const _excluded = ["props"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
@@ -8,6 +8,7 @@ import { usePicker } from "../usePicker/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { DIALOG_WIDTH } from "../../constants/dimensions.js";
+import { mergeSx } from "../../utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout)(({
   theme
@@ -25,39 +26,33 @@ const PickerStaticLayout = styled(PickersLayout)(({
  */
 export const useStaticPicker = _ref => {
   let {
-      props,
-      ref
+      props
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     localeText,
     slots,
     slotProps,
-    className,
-    sx,
     displayStaticWrapperAs,
     autoFocus
   } = props;
   const {
-    layoutProps,
     providerProps,
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus ?? false,
-    fieldRef: undefined,
     localeText,
-    additionalViewProps: {},
     variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+    children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
       slots: slots,
       slotProps: slotProps,
-      sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
-      className: clsx(className, slotProps?.layout?.className),
-      ref: ref,
+      sx: mergeSx(providerProps.contextValue.rootSx, slotProps?.layout?.sx),
+      className: clsx(providerProps.contextValue.rootClassName, slotProps?.layout?.className),
+      ref: providerProps.contextValue.rootRef,
       children: renderCurrentView()
     }))
   }));

package/modern/internals/hooks/useToolbarOwnerState.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { usePickerPrivateContext } from "./usePickerPrivateContext.js";
+export function useToolbarOwnerState() {
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const isRtl = useRtl();
+  return React.useMemo(() => _extends({}, pickerOwnerState, {
+    toolbarDirection: isRtl ? 'rtl' : 'ltr'
+  }), [pickerOwnerState, isRtl]);
+}

package/modern/internals/hooks/useUtils.js

@@ -19,7 +19,7 @@ export const useUtils = () => useLocalizationContext().utils;
 export const useDefaultDates = () => useLocalizationContext().defaultDates;
 export const useNow = timezone => {
   const utils = useUtils();
-  const now = React.useRef();
+  const now = React.useRef(undefined);
   if (now.current === undefined) {
     now.current = utils.date(undefined, timezone);
   }

package/modern/internals/index.js

@@ -1,31 +1,36 @@
 export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersArrowSwitcher.js";
+export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps } from "./components/PickerFieldUI.js";
 export { PickerProvider } from "./components/PickerProvider.js";
 export { PickersModalDialog } from "./components/PickersModalDialog.js";
-export { PickersPopper } from "./components/PickersPopper.js";
+export { PickerPopper } from "./components/PickerPopper/PickerPopper.js";
 export { PickersToolbar } from "./components/PickersToolbar.js";
 export { pickersToolbarClasses } from "./components/pickersToolbarClasses.js";
 export { pickersToolbarButtonClasses } from "./components/pickersToolbarButtonClasses.js";
 export { pickersToolbarTextClasses } from "./components/pickersToolbarTextClasses.js";
 export { pickersArrowSwitcherClasses } from "./components/PickersArrowSwitcher/pickersArrowSwitcherClasses.js";
-export { pickersPopperClasses } from "./components/pickersPopperClasses.js";
 export { PickersToolbarButton } from "./components/PickersToolbarButton.js";
 export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from "./constants/dimensions.js";
 export { useControlledValueWithTimezone } from "./hooks/useValueWithTimezone.js";
-export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
+export { useField, useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
+export { useFieldOwnerState } from "./hooks/useFieldOwnerState.js";
+export { useNullablePickerContext } from "./hooks/useNullablePickerContext.js";
 export { usePicker } from "./hooks/usePicker/index.js";
 export { usePickerPrivateContext } from "./hooks/usePickerPrivateContext.js";
 export { useStaticPicker } from "./hooks/useStaticPicker/index.js";
+export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
 export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hooks/useUtils.js";
 export { useViews } from "./hooks/useViews.js";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
-export { convertFieldResponseIntoMuiTextFieldProps } from "./utils/convertFieldResponseIntoMuiTextFieldProps.js";
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem } from "./utils/date-utils.js";
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-time-utils.js";
 export { getDefaultReferenceDate } from "./utils/getDefaultReferenceDate.js";
-export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.js";
-export { useDefaultizedDateField, useDefaultizedTimeField, useDefaultizedDateTimeField } from "./hooks/defaultizedFieldProps.js";
-export { useDefaultReduceAnimations } from "./hooks/useDefaultReduceAnimations.js";
+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 { DayCalendar } from "../DateCalendar/DayCalendar.js";
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
-export { isInternalTimeView, isTimeView } from "./utils/time-utils.js";
+export { isInternalTimeView, isTimeView } from "./utils/time-utils.js";
+export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";
+export { getDateFieldInternalPropsDefaults } from "../managers/useDateManager.js";
+export { getTimeFieldInternalPropsDefaults } from "../managers/useTimeManager.js";
+export { getDateTimeFieldInternalPropsDefaults } from "../managers/useDateTimeManager.js";

package/modern/internals/models/index.js

@@ -1,4 +1,5 @@
 export * from "./fields.js";
 export * from "./common.js";
 export * from "./value.js";
-export * from "./formProps.js";
+export * from "./formProps.js";
+export * from "./manager.js";

package/modern/internals/models/manager.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/models/pickers.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/utils/date-utils.js

@@ -58,7 +58,7 @@ export const findClosestEnabledDate = ({
   }
   return null;
 };
-export const replaceInvalidDateByNull = (utils, value) => value == null || !utils.isValid(value) ? null : value;
+export const replaceInvalidDateByNull = (utils, value) => !utils.isValid(value) ? null : value;
 export const applyDefaultDate = (utils, value, defaultValue) => {
   if (value == null || !utils.isValid(value)) {
     return defaultValue;

package/modern/internals/utils/utils.js

@@ -43,4 +43,14 @@ export const getFocusedListItemIndex = listElement => {
   const children = Array.from(listElement.children);
   return children.indexOf(getActiveElement(document));
 };
-export const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';
+export const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';
+export function mergeSx(...sxProps) {
+  return sxProps.reduce((acc, sxProp) => {
+    if (Array.isArray(sxProp)) {
+      acc.push(...sxProp);
+    } else if (sxProp != null) {
+      acc.push(sxProp);
+    }
+    return acc;
+  }, []);
+}