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

package/node/internals/components/PickerProvider.js

@@ -4,12 +4,14 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickerPrivateContext = exports.PickerContext = void 0;
+exports.PickerPrivateContext = exports.PickerContext = exports.PickerActionsContext = void 0;
 exports.PickerProvider = PickerProvider;
 var React = _interopRequireWildcard(require("react"));
 var _LocalizationProvider = require("../../LocalizationProvider");
+var _useIsValidValue = require("../../hooks/useIsValidValue");
 var _jsxRuntime = require("react/jsx-runtime");
 const PickerContext = exports.PickerContext = /*#__PURE__*/React.createContext(null);
+const PickerActionsContext = exports.PickerActionsContext = /*#__PURE__*/React.createContext(null);
 const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.createContext({
   ownerState: {
     isPickerDisabled: false,
@@ -18,7 +20,8 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
     isPickerOpen: false,
     pickerVariant: 'desktop',
     pickerOrientation: 'portrait'
-  }
+  },
+  dismissViews: () => {}
 });
 
 /**
@@ -31,17 +34,25 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
 function PickerProvider(props) {
   const {
     contextValue,
+    actionsContextValue,
     privateContextValue,
+    isValidContextValue,
     localeText,
     children
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPrivateContext.Provider, {
-      value: privateContextValue,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
-        localeText: localeText,
-        children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerActionsContext.Provider, {
+      value: actionsContextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPrivateContext.Provider, {
+        value: privateContextValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useIsValidValue.IsValidValueContext.Provider, {
+          value: isValidContextValue,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
+            localeText: localeText,
+            children: children
+          })
+        })
       })
     })
   });

package/node/internals/components/PickersModalDialog.js

@@ -13,6 +13,8 @@ var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
 var _Dialog = _interopRequireWildcard(require("@mui/material/Dialog"));
 var _styles = require("@mui/material/styles");
 var _dimensions = require("../constants/dimensions");
+var _hooks = require("../../hooks");
+var _usePickerPrivateContext = require("../hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const PickersModalDialogRoot = (0, _styles.styled)(_Dialog.default)({
   [`& .${_Dialog.dialogClasses.container}`]: {
@@ -31,16 +33,20 @@ const PickersModalDialogContent = (0, _styles.styled)(_DialogContent.default)({
 function PickersModalDialog(props) {
   const {
     children,
-    onDismiss,
-    open,
     slots,
     slotProps
   } = props;
+  const {
+    open
+  } = (0, _hooks.usePickerContext)();
+  const {
+    dismissViews
+  } = (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: onDismiss
+    onClose: dismissViews
   }, slotProps?.dialog, {
     TransitionComponent: Transition,
     TransitionProps: slotProps?.mobileTransition,

package/node/internals/components/PickersPopper.js

@@ -21,6 +21,7 @@ var _pickersPopperClasses = require("./pickersPopperClasses");
 var _utils2 = require("../utils/utils");
 var _useDefaultReduceAnimations = require("../hooks/useDefaultReduceAnimations");
 var _usePickerPrivateContext = require("../hooks/usePickerPrivateContext");
+var _hooks = require("../../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["PaperComponent", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
 const useUtilityClasses = classes => {
@@ -218,8 +219,6 @@ function PickersPopper(inProps) {
     containerRef = null,
     shouldRestoreFocus,
     onBlur,
-    onDismiss,
-    open,
     role,
     placement = 'bottom',
     slots,
@@ -227,17 +226,23 @@ function PickersPopper(inProps) {
     reduceAnimations: inReduceAnimations,
     classes: classesProp
   } = props;
+  const {
+    open
+  } = (0, _hooks.usePickerContext)();
+  const {
+    dismissViews
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
       if (open && nativeEvent.key === 'Escape') {
-        onDismiss();
+        dismissViews();
       }
     }
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [onDismiss, open]);
+  }, [dismissViews, open]);
   const lastFocusedElementRef = React.useRef(null);
   React.useEffect(() => {
     if (role === 'tooltip' || shouldRestoreFocus && !shouldRestoreFocus()) {
@@ -255,7 +260,7 @@ function PickersPopper(inProps) {
       });
     }
   }, [open, role, shouldRestoreFocus]);
-  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? onDismiss);
+  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? dismissViews);
   const paperRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_useForkRef)(paperRef, containerRef);
   const handlePaperRef = (0, _utils.unstable_useForkRef)(handleRef, clickAwayRef);
@@ -272,7 +277,7 @@ function PickersPopper(inProps) {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
       event.stopPropagation();
-      onDismiss();
+      dismissViews();
     }
   };
   const Transition = slots?.desktopTransition ?? reduceAnimations ? _Fade.default : _Grow.default;

package/node/internals/components/PickersToolbar.js

@@ -17,7 +17,7 @@ var _createStyled = require("@mui/system/createStyled");
 var _pickersToolbarClasses = require("./pickersToolbarClasses");
 var _useToolbarOwnerState = require("../hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
+const _excluded = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "classes", "landscapeDirection"];
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],

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

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

package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -59,10 +59,7 @@ const useDesktopPicker = _ref => {
   const labelId = (0, _useId.default)();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    open,
-    actions,
     hasUIView,
-    layoutProps,
     providerProps,
     renderCurrentView,
     shouldRestoreFocus,
@@ -73,7 +70,6 @@ const useDesktopPicker = _ref => {
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'desktop'
   }));
   const InputAdornment = slots.inputAdornment ?? _InputAdornment.default;
@@ -92,7 +88,11 @@ const useDesktopPicker = _ref => {
       externalSlotProps: innerSlotProps?.openPickerButton,
       additionalProps: {
         disabled: disabled || readOnly,
-        onClick: open ? actions.onClose : actions.onOpen,
+        // This direct access to `providerProps` will go away in https://github.com/mui/mui-x/pull/15671
+        onClick: event => {
+          event.preventDefault();
+          providerProps.contextValue.setOpen(prevOpen => !prevOpen);
+        },
         'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
         edge: inputAdornmentProps.position
       },
@@ -128,7 +128,7 @@ const useDesktopPicker = _ref => {
       sx,
       label,
       name,
-      focused: open ? true : undefined
+      focused: providerProps.contextValue.open ? true : undefined
     }, isToolbarHidden && {
       id: labelId
     }, !!inputRef && {
@@ -177,22 +177,20 @@ const useDesktopPicker = _ref => {
       slots: slotsForField,
       slotProps: slotProps,
       unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersPopper.PickersPopper, (0, _extends2.default)({
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersPopper.PickersPopper, {
       role: "dialog",
       placement: "bottom-start",
-      anchorEl: containerRef.current
-    }, actions, {
-      open: open,
+      anchorEl: containerRef.current,
       slots: slots,
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
       reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, layoutProps, slotProps?.layout, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

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

@@ -120,7 +120,7 @@ const createSection = ({
   const sectionConfig = (0, _useField.getDateSectionConfigFromFormatToken)(utils, token);
   const hasLeadingZerosInFormat = (0, _useField.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/node/internals/hooks/useField/index.js

@@ -21,5 +21,11 @@ Object.defineProperty(exports, "useField", {
     return _useField.useField;
   }
 });
+Object.defineProperty(exports, "useFieldInternalPropsWithDefaults", {
+  enumerable: true,
+  get: function () {
+    return _useField.useFieldInternalPropsWithDefaults;
+  }
+});
 var _useField = require("./useField");
 var _useField2 = require("./useField.utils");

package/node/internals/hooks/useField/useField.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useField = void 0;
+exports.useFieldInternalPropsWithDefaults = exports.useField = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
@@ -18,6 +18,23 @@ var _useFieldState = require("./useFieldState");
 var _useFieldCharacterEditing = require("./useFieldCharacterEditing");
 var _useFieldV7TextField = require("./useFieldV7TextField");
 var _useFieldV6TextField = require("./useFieldV6TextField");
+/**
+ * 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.
+ */
+const useFieldInternalPropsWithDefaults = ({
+  manager,
+  internalProps
+}) => {
+  const localizationContext = (0, _useUtils.useLocalizationContext)();
+  return React.useMemo(() => {
+    return manager.internal_applyDefaultsToFieldInternalProps((0, _extends2.default)({}, localizationContext, {
+      internalProps
+    }));
+  }, [manager, internalProps, localizationContext]);
+};
+exports.useFieldInternalPropsWithDefaults = useFieldInternalPropsWithDefaults;
 const useField = params => {
   const utils = (0, _useUtils.useUtils)();
   const {

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

@@ -383,7 +383,7 @@ 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: ({
@@ -534,7 +534,7 @@ const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referen
 exports.mergeDateIntoReferenceDate = mergeDateIntoReferenceDate;
 const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 
-// TODO v8: Remove if we drop the v6 TextField approach.
+// TODO v9: Remove
 exports.isAndroid = isAndroid;
 const getSectionOrder = (sections, shouldApplyRTL) => {
   const neighbors = {};

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

@@ -156,7 +156,7 @@ 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 = (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
@@ -207,7 +207,7 @@ 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 = (0, _useField.mergeDateIntoReferenceDate)(utils, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
       values = activeDateManager.getNewValuesFromNewActiveDate(mergedDate);
       shouldPublish = true;

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

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

package/node/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -53,9 +53,6 @@ const useMobilePicker = _ref => {
   const labelId = (0, _useId.default)();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    open,
-    actions,
-    layoutProps,
     providerProps,
     renderCurrentView,
     fieldProps: pickerFieldProps,
@@ -65,7 +62,6 @@ const useMobilePicker = _ref => {
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'mobile'
   }));
   const Field = slots.field;
@@ -93,8 +89,12 @@ const useMobilePicker = _ref => {
     }, isToolbarHidden && {
       id: labelId
     }, !(disabled || readOnly) && {
-      onClick: actions.onOpen,
-      onKeyDown: (0, _utils.onSpaceOrEnter)(actions.onOpen)
+      // These direct access to `providerProps` will go away in https://github.com/mui/mui-x/pull/15671
+      onClick: event => {
+        event.preventDefault();
+        providerProps.contextValue.setOpen(true);
+      },
+      onKeyDown: (0, _utils.onSpaceOrEnter)(() => providerProps.contextValue.setOpen(true))
     }, !!inputRef && {
       inputRef
     }),
@@ -131,16 +131,15 @@ const useMobilePicker = _ref => {
       slots: slotsForField,
       slotProps: slotProps,
       unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, (0, _extends2.default)({}, actions, {
-      open: open,
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
       slots: slots,
       slotProps: slotProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, layoutProps, slotProps?.layout, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

package/node/internals/hooks/useOpenState.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.useOpenState = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 const useOpenState = ({
   open,
   onOpen,
@@ -24,7 +26,7 @@ const useOpenState = ({
       setOpenState(open);
     }
   }, [isControllingOpenProp, open]);
-  const setOpen = React.useCallback(action => {
+  const setOpen = (0, _useEventCallback.default)(action => {
     const newOpen = typeof action === 'function' ? action(openState) : action;
     if (!isControllingOpenProp) {
       setOpenState(newOpen);
@@ -35,7 +37,7 @@ const useOpenState = ({
     if (!newOpen && onClose) {
       onClose();
     }
-  }, [isControllingOpenProp, onOpen, onClose, openState]);
+  });
   return {
     open: openState,
     setOpen

package/node/internals/hooks/usePicker/usePicker.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePicker = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _warning = require("@mui/x-internals/warning");
 var _usePickerValue = require("./usePickerValue");
 var _usePickerViews = require("./usePickerViews");
@@ -15,7 +13,6 @@ const usePicker = ({
   valueManager,
   valueType,
   variant,
-  additionalViewProps,
   validator,
   autoFocusView,
   rendererInterceptor,
@@ -31,12 +28,10 @@ const usePicker = ({
     props,
     valueManager,
     valueType,
-    variant,
     validator
   });
   const pickerViewsResponse = (0, _usePickerViews.usePickerViews)({
     props,
-    additionalViewProps,
     autoFocusView,
     fieldRef,
     propsFromPickerValue: pickerValueResponse.viewProps,
@@ -52,15 +47,11 @@ const usePicker = ({
   });
   return {
     // Picker value
-    open: pickerValueResponse.open,
-    actions: pickerValueResponse.actions,
     fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
     hasUIView: pickerViewsResponse.provider.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
-    // Picker layout
-    layoutProps: (0, _extends2.default)({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),
     // Picker provider
     providerProps,
     // Picker owner state

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

@@ -63,19 +63,22 @@ function usePickerProvider(parameters) {
     pickerOrientation: orientation,
     pickerVariant: variant
   }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.contextValue, {
+  const contextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
     variant,
     orientation
-  }), [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly]);
-  const privateContextValue = React.useMemo(() => ({
+  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, variant, orientation, props.disabled, props.readOnly]);
+  const privateContextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.privateContextValue, {
     ownerState
-  }), [ownerState]);
+  }), [paramsFromUsePickerValue, ownerState]);
+  const actionsContextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue), [paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue]);
   return {
     localeText,
     contextValue,
-    privateContextValue
+    privateContextValue,
+    actionsContextValue,
+    isValidContextValue: paramsFromUsePickerValue.isValidContextValue
   };
 }