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

package/node/DateRangePicker/DateRangePickerToolbar.js

@@ -19,7 +19,7 @@ var _internals = require("@mui/x-date-pickers/internals");
 var _hooks = require("@mui/x-date-pickers/hooks");
 var _dateRangePickerToolbarClasses = require("./dateRangePickerToolbarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "classes", "onViewChange", "view", "views"];
+const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "classes"];
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -110,12 +110,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   hidden: _propTypes.default.bool,
   onRangePositionChange: _propTypes.default.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: _propTypes.default.func.isRequired,
   rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -131,13 +125,5 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: _propTypes.default.node,
-  value: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['day']).isRequired,
-  /**
-   * Available views.
-   */
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day'])).isRequired
+  value: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
 } : void 0;

package/node/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -76,9 +76,7 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
   });
   const {
     dateIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DateRangeIcon, {}),
-    onViewChange,
     timeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.TimeIcon, {}),
-    view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     rangePosition,
     onRangePositionChange,
@@ -90,8 +88,12 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
   const {
     ownerState
   } = (0, _internals.usePickerPrivateContext)();
+  const {
+    view,
+    onViewChange
+  } = (0, _hooks.usePickerContext)();
   const classes = useUtilityClasses(classesProp);
-  const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
+  const value = React.useMemo(() => view == null ? null : viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
   const isNextHidden = value === 'end-time';
   const tabLabel = React.useMemo(() => {
@@ -116,18 +118,26 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
     }
   });
   const changeToPreviousTab = (0, _useEventCallback.default)(() => {
-    const previousTab = tabOptions[tabOptions.indexOf(value) - 1];
+    const previousTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) - 1];
     onViewChange(tabToView(previousTab));
     handleRangePositionChange(previousTab);
   });
   const changeToNextTab = (0, _useEventCallback.default)(() => {
-    const nextTab = tabOptions[tabOptions.indexOf(value) + 1];
+    const nextTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) + 1];
     onViewChange(tabToView(nextTab));
     handleRangePositionChange(nextTab);
   });
   if (hidden) {
     return null;
   }
+  let startIcon;
+  if (view == null) {
+    startIcon = null;
+  } else if ((0, _internals.isDatePickerView)(view)) {
+    startIcon = dateIcon;
+  } else {
+    startIcon = timeIcon;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimeRangePickerTabsRoot, {
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
@@ -140,7 +150,7 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerTabFiller, {
       className: classes.filler
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerTab, {
-      startIcon: (0, _internals.isDatePickerView)(view) ? dateIcon : timeIcon,
+      startIcon: startIcon,
       className: classes.tabButton,
       size: "large",
       children: tabLabel
@@ -175,12 +185,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    */
   hidden: _propTypes.default.bool,
   onRangePositionChange: _propTypes.default.func.isRequired,
-  /**
-   * Callback called when a tab is clicked.
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: _propTypes.default.func.isRequired,
   rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -190,9 +194,5 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    * Time tab icon.
    * @default TimeIcon
    */
-  timeIcon: _propTypes.default.element,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired
+  timeIcon: _propTypes.default.element
 } : void 0;

package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -20,7 +20,7 @@ var _DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
 var _dateTimeRangePickerToolbarClasses = require("./dateTimeRangePickerToolbarClasses");
 var _dateRangeManager = require("../internals/utils/date-range-manager");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "classes", "onViewChange", "onChange", "classes", "view", "isLandscape", "views", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
+const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "classes", "onChange", "classes", "isLandscape", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -62,11 +62,8 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
       onRangePositionChange,
       className,
       classes: classesProp,
-      onViewChange,
       onChange,
-      view,
       isLandscape,
-      views,
       ampm,
       hidden,
       toolbarFormat,
@@ -77,7 +74,10 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     disabled,
-    readOnly
+    readOnly,
+    view,
+    onViewChange,
+    views
   } = (0, _hooks.usePickerContext)();
   const translations = (0, _hooks.usePickerTranslations)();
   const ownerState = (0, _internals.useToolbarOwnerState)();
@@ -92,24 +92,6 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
     toolbarFormat,
     toolbarPlaceholder
   };
-  const handleStartRangeViewChange = React.useCallback(newView => {
-    if (newView === 'year' || newView === 'month') {
-      return;
-    }
-    if (rangePosition !== 'start') {
-      onRangePositionChange('start');
-    }
-    onViewChange(newView);
-  }, [onRangePositionChange, onViewChange, rangePosition]);
-  const handleEndRangeViewChange = React.useCallback(newView => {
-    if (newView === 'year' || newView === 'month') {
-      return;
-    }
-    if (rangePosition !== 'end') {
-      onRangePositionChange('end');
-    }
-    onViewChange(newView);
-  }, [onRangePositionChange, onViewChange, rangePosition]);
   const handleOnChange = React.useCallback(newDate => {
     const {
       nextSelection,
@@ -124,37 +106,68 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
     onRangePositionChange(nextSelection);
     onChange(newRange);
   }, [onChange, onRangePositionChange, props.value, rangePosition, utils]);
+  const startOverrides = React.useMemo(() => {
+    const handleStartRangeViewChange = newView => {
+      if (newView === 'year' || newView === 'month') {
+        return;
+      }
+      if (rangePosition !== 'start') {
+        onRangePositionChange('start');
+      }
+      onViewChange(newView);
+    };
+    return {
+      forceDesktopVariant: true,
+      onViewChange: handleStartRangeViewChange,
+      view: rangePosition === 'start' ? view : null
+    };
+  }, [rangePosition, view, onRangePositionChange, onViewChange]);
+  const endOverrides = React.useMemo(() => {
+    const handleEndRangeViewChange = newView => {
+      if (newView === 'year' || newView === 'month') {
+        return;
+      }
+      if (rangePosition !== 'end') {
+        onRangePositionChange('end');
+      }
+      onViewChange(newView);
+    };
+    return {
+      forceDesktopVariant: true,
+      onViewChange: handleEndRangeViewChange,
+      view: rangePosition === 'end' ? view : null
+    };
+  }, [rangePosition, view, onRangePositionChange, onViewChange]);
   if (hidden) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimeRangePickerToolbarRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     sx: sx
   }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.DateTimePickerToolbarForceDesktopVariant.Provider, {
-      value: true,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarStart, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DateTimePickerToolbarOverrideContext.Provider, {
+      value: startOverrides,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarStart, (0, _extends2.default)({
         value: start,
-        onViewChange: handleStartRangeViewChange,
         toolbarTitle: translations.start,
         ownerState: ownerState,
-        view: rangePosition === 'start' ? view : undefined,
         className: classes.startToolbar,
         onChange: handleOnChange,
         titleId: titleId ? `${titleId}-start-toolbar` : undefined
-      }, commonToolbarProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarEnd, (0, _extends2.default)({
+      }, commonToolbarProps))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DateTimePickerToolbarOverrideContext.Provider, {
+      value: endOverrides,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarEnd, (0, _extends2.default)({
         value: end,
-        onViewChange: handleEndRangeViewChange,
         toolbarTitle: translations.end,
         ownerState: ownerState,
-        view: rangePosition === 'end' ? view : undefined,
         className: classes.endToolbar,
         onChange: handleOnChange,
         titleId: titleId ? `${titleId}-end-toolbar` : undefined
-      }, commonToolbarProps))]
-    })
+      }, commonToolbarProps))
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
@@ -176,12 +189,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
   isLandscape: _propTypes.default.bool.isRequired,
   onChange: _propTypes.default.func.isRequired,
   onRangePositionChange: _propTypes.default.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: _propTypes.default.func.isRequired,
   rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -197,13 +204,5 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: _propTypes.default.node,
-  value: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired,
-  /**
-   * Available views.
-   */
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired).isRequired
+  value: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
 } : void 0;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.5
+ * @mui/x-date-pickers-pro v8.0.0-alpha.6
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -67,8 +67,6 @@ const useDesktopRangePicker = _ref => {
     fieldRef = endFieldRef;
   }
   const {
-    open,
-    actions,
     layoutProps,
     providerProps,
     renderCurrentView,
@@ -87,8 +85,8 @@ const useDesktopRangePicker = _ref => {
     }
   }));
   React.useEffect(() => {
-    if (layoutProps.view) {
-      initialView.current = layoutProps.view;
+    if (providerProps.contextValue.view) {
+      initialView.current = providerProps.contextValue.view;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -97,7 +95,9 @@ const useDesktopRangePicker = _ref => {
       if (fieldContainerRef.current?.contains((0, _internals.getActiveElement)(document)) || popperRef.current?.contains((0, _internals.getActiveElement)(document))) {
         return;
       }
-      actions.onDismiss();
+
+      // This direct access to `providerProps` will go away once the range fields stop having their views in a tooltip.
+      providerProps.privateContextValue.dismissViews();
     });
   };
   const Field = slots.field;
@@ -132,8 +132,9 @@ const useDesktopRangePicker = _ref => {
   const enrichedFieldProps = (0, _useEnrichedRangePickerFieldProps.useEnrichedRangePickerFieldProps)({
     variant: 'desktop',
     fieldType,
-    open,
-    actions,
+    // These direct access to `providerProps` will go away once the range fields handle the picker opening
+    open: providerProps.contextValue.open,
+    setOpen: providerProps.contextValue.setOpen,
     readOnly,
     disableOpenPicker,
     label,
@@ -148,9 +149,9 @@ const useDesktopRangePicker = _ref => {
     startFieldRef,
     endFieldRef,
     singleInputFieldRef,
-    currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined,
+    currentView: providerProps.contextValue.view !== props.openTo ? providerProps.contextValue.view : undefined,
     initialView: initialView.current ?? undefined,
-    onViewChange: layoutProps.onViewChange
+    onViewChange: providerProps.contextValue.onViewChange
   });
   const slotPropsForLayout = (0, _extends2.default)({}, slotProps, {
     tabs: (0, _extends2.default)({}, slotProps?.tabs, {
@@ -164,14 +165,12 @@ const useDesktopRangePicker = _ref => {
   });
   const Layout = slots?.layout ?? _PickersLayout.PickersLayout;
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, enrichedFieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersPopper, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, enrichedFieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersPopper, {
       role: "tooltip",
       placement: "bottom-start",
       containerRef: popperRef,
       anchorEl: anchorRef.current,
-      onBlur: handleBlur
-    }, actions, {
-      open: open,
+      onBlur: handleBlur,
       slots: slots,
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
@@ -181,7 +180,7 @@ const useDesktopRangePicker = _ref => {
         slotProps: slotPropsForLayout,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

package/node/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -18,7 +18,7 @@ const _excluded = ["clearable", "onClear"];
 const useMultiInputFieldSlotProps = ({
   variant,
   open,
-  actions,
+  setOpen,
   readOnly,
   labelId,
   disableOpenPicker,
@@ -62,14 +62,16 @@ const useMultiInputFieldSlotProps = ({
     event.stopPropagation();
     onRangePositionChange('start');
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen(event);
+      event.preventDefault();
+      setOpen(true);
     }
   };
   const openRangeEndSelection = event => {
     event.stopPropagation();
     onRangePositionChange('end');
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen(event);
+      event.preventDefault();
+      setOpen(true);
     }
   };
   const handleFocusStart = () => {
@@ -156,7 +158,7 @@ const useMultiInputFieldSlotProps = ({
 const useSingleInputFieldSlotProps = ({
   variant,
   open,
-  actions,
+  setOpen,
   readOnly,
   labelId,
   disableOpenPicker,
@@ -205,7 +207,8 @@ const useSingleInputFieldSlotProps = ({
   const openPicker = event => {
     event.stopPropagation();
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen(event);
+      event.preventDefault();
+      setOpen(true);
     }
   };
   const slots = (0, _extends2.default)({}, fieldProps.slots, {

package/node/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -65,8 +65,6 @@ const useMobileRangePicker = _ref => {
     fieldRef = endFieldRef;
   }
   const {
-    open,
-    actions,
     layoutProps,
     providerProps,
     renderCurrentView,
@@ -114,8 +112,9 @@ const useMobileRangePicker = _ref => {
   const enrichedFieldProps = (0, _useEnrichedRangePickerFieldProps.useEnrichedRangePickerFieldProps)({
     variant: 'mobile',
     fieldType,
-    open,
-    actions,
+    // These direct access to `providerProps` will go away once the range fields handle the picker opening
+    open: providerProps.contextValue.open,
+    setOpen: providerProps.contextValue.setOpen,
     readOnly,
     labelId,
     disableOpenPicker,
@@ -164,8 +163,7 @@ const useMobileRangePicker = _ref => {
     }, innerSlotProps?.mobilePaper)
   });
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, enrichedFieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersModalDialog, (0, _extends2.default)({}, actions, {
-      open: open,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, enrichedFieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersModalDialog, {
       slots: slots,
       slotProps: slotProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, layoutProps, slotProps?.layout, {
@@ -173,7 +171,7 @@ const useMobileRangePicker = _ref => {
         slotProps: slotPropsForLayout,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

package/node/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczNDU2NjQwMDAwMA==";
+  const releaseInfo = "MTczNTE2NDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "8.0.0-alpha.5",
+  "version": "8.0.0-alpha.6",
   "description": "The Pro plan edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,9 +37,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-date-pickers": "8.0.0-alpha.5",
-    "@mui/x-license": "8.0.0-alpha.5",
-    "@mui/x-internals": "8.0.0-alpha.5"
+    "@mui/x-date-pickers": "8.0.0-alpha.6",
+    "@mui/x-internals": "8.0.0-alpha.6",
+    "@mui/x-license": "8.0.0-alpha.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",