@mui/x-date-pickers 8.0.0-alpha.6 → 8.0.0-alpha.7

package/modern/internals/hooks/date-helpers-hooks.js

@@ -27,11 +27,12 @@ export function usePreviousMonthDisabled(month, {
 }
 export function useMeridiemMode(date, ampm, onChange, selectionState) {
   const utils = useUtils();
-  const meridiemMode = getMeridiem(date, utils);
+  const cleanDate = React.useMemo(() => !utils.isValid(date) ? null : date, [utils, date]);
+  const meridiemMode = getMeridiem(cleanDate, utils);
   const handleMeridiemChange = React.useCallback(mode => {
-    const timeWithMeridiem = date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils);
+    const timeWithMeridiem = cleanDate == null ? null : convertToMeridiem(cleanDate, mode, Boolean(ampm), utils);
     onChange(timeWithMeridiem, selectionState ?? 'partial');
-  }, [ampm, date, onChange, selectionState, utils]);
+  }, [ampm, cleanDate, onChange, selectionState, utils]);
   return {
     meridiemMode,
     handleMeridiemChange

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -53,7 +53,6 @@ export const useDesktopPicker = _ref => {
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
     hasUIView,
-    layoutProps,
     providerProps,
     renderCurrentView,
     shouldRestoreFocus,
@@ -64,7 +63,6 @@ export const useDesktopPicker = _ref => {
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'desktop'
   }));
   const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
@@ -180,7 +178,7 @@ export const useDesktopPicker = _ref => {
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
       reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
         children: renderCurrentView()

package/modern/internals/hooks/useField/buildSectionsFromFormat.js

@@ -113,7 +113,7 @@ const createSection = ({
   const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
   const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
   const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
-  const isValidDate = date != null && utils.isValid(date);
+  const isValidDate = utils.isValid(date);
   let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
   let maxLength = null;
   if (hasLeadingZerosInInput) {

package/modern/internals/hooks/useField/index.js

@@ -1,2 +1,2 @@
-export { useField } from "./useField.js";
+export { useField, useFieldInternalPropsWithDefaults } from "./useField.js";
 export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";

package/modern/internals/hooks/useField/useField.js

@@ -4,12 +4,28 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useValidation } from "../../../validation/index.js";
-import { useUtils } from "../useUtils.js";
+import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { adjustSectionValue, getSectionOrder } from "./useField.utils.js";
 import { useFieldState } from "./useFieldState.js";
 import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
 import { useFieldV7TextField } from "./useFieldV7TextField.js";
 import { useFieldV6TextField } from "./useFieldV6TextField.js";
+/**
+ * Applies the default values to the field internal props.
+ * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
+ * It is only here to allow the migration to be done in smaller steps.
+ */
+export const useFieldInternalPropsWithDefaults = ({
+  manager,
+  internalProps
+}) => {
+  const localizationContext = useLocalizationContext();
+  return React.useMemo(() => {
+    return manager.internal_applyDefaultsToFieldInternalProps(_extends({}, localizationContext, {
+      internalProps
+    }));
+  }, [manager, internalProps, localizationContext]);
+};
 export const useField = params => {
   const utils = useUtils();
   const {

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

@@ -361,7 +361,7 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
       currentDate
     }) => ({
       minimum: 1,
-      maximum: currentDate != null && utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth,
+      maximum: utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth,
       longestMonth: longestMonth
     }),
     weekDay: ({
@@ -509,7 +509,7 @@ export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections,
 }, referenceDate);
 export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 
-// TODO v8: Remove if we drop the v6 TextField approach.
+// TODO v9: Remove
 export const getSectionOrder = (sections, shouldApplyRTL) => {
   const neighbors = {};
   if (!shouldApplyRTL) {

package/modern/internals/hooks/useField/useFieldState.js

@@ -148,7 +148,7 @@ export const useFieldState = params => {
   const updateValueFromValueStr = valueStr => {
     const parseDateStr = (dateStr, referenceDate) => {
       const date = utils.parse(dateStr, format);
-      if (date == null || !utils.isValid(date)) {
+      if (!utils.isValid(date)) {
         return null;
       }
       const sections = buildSectionsFromFormat({
@@ -199,7 +199,7 @@ export const useFieldState = params => {
      * Then we merge the value of the modified sections into the reference date.
      * This makes sure that we don't lose some information of the initial date (like the time on a date field).
      */
-    if (newActiveDate != null && utils.isValid(newActiveDate)) {
+    if (utils.isValid(newActiveDate)) {
       const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
       values = activeDateManager.getNewValuesFromNewActiveDate(mergedDate);
       shouldPublish = true;

package/modern/internals/hooks/useField/useFieldV6TextField.js

@@ -35,8 +35,8 @@ export const addPositionPropertiesToSections = (sections, localizedDigits, isRtl
 };
 export const useFieldV6TextField = params => {
   const isRtl = useRtl();
-  const focusTimeoutRef = React.useRef();
-  const selectionSyncTimeoutRef = React.useRef();
+  const focusTimeoutRef = React.useRef(undefined);
+  const selectionSyncTimeoutRef = React.useRef(undefined);
   const {
     forwardedProps: {
       onFocus,

package/modern/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -46,7 +46,6 @@ export const useMobilePicker = _ref => {
   const labelId = useId();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    layoutProps,
     providerProps,
     renderCurrentView,
     fieldProps: pickerFieldProps,
@@ -56,7 +55,6 @@ export const useMobilePicker = _ref => {
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'mobile'
   }));
   const Field = slots.field;
@@ -129,7 +127,7 @@ export const useMobilePicker = _ref => {
     })), /*#__PURE__*/_jsx(PickersModalDialog, {
       slots: slots,
       slotProps: slotProps,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
         children: renderCurrentView()

package/modern/internals/hooks/useOpenState.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 export const useOpenState = ({
   open,
   onOpen,
@@ -17,7 +18,7 @@ export const useOpenState = ({
       setOpenState(open);
     }
   }, [isControllingOpenProp, open]);
-  const setOpen = React.useCallback(action => {
+  const setOpen = useEventCallback(action => {
     const newOpen = typeof action === 'function' ? action(openState) : action;
     if (!isControllingOpenProp) {
       setOpenState(newOpen);
@@ -28,7 +29,7 @@ export const useOpenState = ({
     if (!newOpen && onClose) {
       onClose();
     }
-  }, [isControllingOpenProp, onOpen, onClose, openState]);
+  });
   return {
     open: openState,
     setOpen

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { warnOnce } from '@mui/x-internals/warning';
 import { usePickerValue } from "./usePickerValue.js";
 import { usePickerViews } from "./usePickerViews.js";
@@ -8,7 +7,6 @@ export const usePicker = ({
   valueManager,
   valueType,
   variant,
-  additionalViewProps,
   validator,
   autoFocusView,
   rendererInterceptor,
@@ -24,12 +22,10 @@ export const usePicker = ({
     props,
     valueManager,
     valueType,
-    variant,
     validator
   });
   const pickerViewsResponse = usePickerViews({
     props,
-    additionalViewProps,
     autoFocusView,
     fieldRef,
     propsFromPickerValue: pickerValueResponse.viewProps,
@@ -50,8 +46,6 @@ export const usePicker = ({
     renderCurrentView: pickerViewsResponse.renderCurrentView,
     hasUIView: pickerViewsResponse.provider.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
-    // Picker layout
-    layoutProps: _extends({}, pickerValueResponse.layoutProps),
     // Picker provider
     providerProps,
     // Picker owner state

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

@@ -62,11 +62,13 @@ export function usePickerProvider(parameters) {
   const privateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.privateContextValue, {
     ownerState
   }), [paramsFromUsePickerValue, ownerState]);
+  const actionsContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue), [paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue]);
   return {
     localeText,
     contextValue,
-    actionsContextValue: paramsFromUsePickerValue.actionsContextValue,
-    privateContextValue
+    privateContextValue,
+    actionsContextValue,
+    isValidContextValue: paramsFromUsePickerValue.isValidContextValue
   };
 }
 

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

@@ -5,106 +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.
  */
@@ -112,7 +12,6 @@ export const usePickerValue = ({
   props,
   valueManager,
   valueType,
-  variant,
   validator
 }) => {
   const {
@@ -120,7 +19,7 @@ export const usePickerValue = ({
     onChange,
     value: inValueWithoutRenderTimezone,
     defaultValue: inDefaultValue,
-    closeOnSelect = variant === 'desktop',
+    closeOnSelect = false,
     timezone: timezoneProp,
     referenceDate
   } = props;
@@ -200,43 +99,49 @@ 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
+    } = 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) {
+    if (changeImportance === 'accept') {
       setOpen(false);
     }
   });
@@ -251,33 +156,6 @@ export const usePickerValue = ({
       hasBeenModifiedSinceMount: true
     }));
   }
-  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 fieldResponse = {
-    value: dateState.draft,
-    onChange: handleChangeFromField
-  };
-  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
-  const viewResponse = {
-    value: valueWithoutError,
-    onChange: handleChange,
-    open,
-    setOpen
-  };
   const isValid = testedValue => {
     const error = validator({
       adapter,
@@ -287,49 +165,54 @@ export const usePickerValue = ({
     });
     return !valueManager.hasError(error);
   };
-  const layoutResponse = {
-    value: valueWithoutError,
-    onChange: handleChange,
-    onSelectShortcut: handleSelectShortcut,
-    isValid
-  };
-  const clearValue = useEventCallback(() => updateDate({
-    value: valueManager.emptyValue,
-    name: 'setValueFromAction',
-    pickerAction: 'clear'
-  }));
-  const setValueToToday = useEventCallback(() => updateDate({
-    value: valueManager.getTodayValue(utils, timezone, valueType),
-    name: 'setValueFromAction',
-    pickerAction: 'today'
-  }));
-  const acceptValueChanges = useEventCallback(() => updateDate({
-    value: dateState.lastPublishedValue,
-    name: 'setValueFromAction',
-    pickerAction: 'accept'
-  }));
-  const cancelValueChanges = useEventCallback(() => updateDate({
-    value: dateState.lastCommittedValue,
-    name: 'setValueFromAction',
-    pickerAction: 'cancel'
+  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(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'dismiss'
+    setValue(dateState.lastPublishedValue, {
+      skipPublicationIfPristine: true
     });
   });
+  const fieldResponse = {
+    value: dateState.draft,
+    onChange: (newValue, context) => setValue(newValue, {
+      validationError: context.validationError
+    })
+  };
+  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
-  }), [setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
+  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
   const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
-    open
-  }), [actionsContextValue, open]);
+    open,
+    value: dateState.draft
+  }), [actionsContextValue, open, dateState.draft]);
   const privateContextValue = React.useMemo(() => ({
     dismissViews
   }), [dismissViews]);
@@ -337,12 +220,12 @@ export const usePickerValue = ({
     value: valueWithoutError,
     contextValue,
     actionsContextValue,
-    privateContextValue
+    privateContextValue,
+    isValidContextValue: isValid
   };
   return {
     fieldProps: fieldResponse,
     viewProps: viewResponse,
-    layoutProps: layoutResponse,
     provider: providerParams
   };
 };

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

@@ -14,7 +14,7 @@ import { isTimeView } from "../../utils/time-utils.js";
 /**
  * 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
@@ -24,9 +24,8 @@ import { isTimeView } from "../../utils/time-utils.js";
 export const usePickerViews = ({
   props,
   propsFromPickerValue,
-  additionalViewProps,
   autoFocusView,
-  rendererInterceptor,
+  rendererInterceptor: RendererInterceptor,
   fieldRef
 }) => {
   const {
@@ -124,15 +123,18 @@ export const usePickerViews = ({
     setFocusedView(newView, true);
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const contextValue = React.useMemo(() => ({
+  const actionsContextValue = React.useMemo(() => ({
+    setView
+  }), [setView]);
+  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
     views,
-    view: popperView,
-    onViewChange: setView
-  }), [views, popperView, setView]);
+    view: popperView
+  }), [actionsContextValue, views, popperView]);
   const providerParams = {
     hasUIView,
     views,
-    contextValue
+    contextValue,
+    actionsContextValue
   };
   return {
     shouldRestoreFocus,
@@ -145,7 +147,7 @@ export const usePickerViews = ({
       if (renderer == null) {
         return null;
       }
-      const rendererProps = _extends({}, propsToForwardToView, additionalViewProps, {
+      const rendererProps = _extends({}, propsToForwardToView, {
         views,
         timezone,
         value,
@@ -157,8 +159,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/useStaticPicker/useStaticPicker.js

@@ -39,20 +39,17 @@ export const useStaticPicker = _ref => {
     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])],

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);
   }