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

package/node/TimeClock/TimeClock.js

@@ -391,8 +391,9 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   minutesStep: _propTypes.default.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate, TView
-   * @param {TDate | null} value The new value.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.6
+ * @mui/x-date-pickers v7.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/components/PickersInput/PickersFilledInput.js

@@ -52,7 +52,7 @@ const FilledInputRoot = (0, _styles.styled)(_PickersInput.PickersInputRoot, {
       backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
     }
   }, !ownerState.disableUnderline && {
-    '&:after': {
+    '&::after': {
       borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color || 'primary']?.main}`,
       left: 0,
       bottom: 0,
@@ -77,7 +77,7 @@ const FilledInputRoot = (0, _styles.styled)(_PickersInput.PickersInputRoot, {
         borderBottomColor: (theme.vars || theme).palette.error.main
       }
     },
-    '&:before': {
+    '&::before': {
       borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
       left: 0,
       bottom: 0,

package/node/internals/components/PickersInput/PickersStandardInput.js

@@ -35,7 +35,7 @@ const StandardInputRoot = (0, _styles.styled)(_PickersInput.PickersInputRoot, {
       marginTop: 16
     }
   }, !ownerState.disableUnderline && {
-    '&:after': {
+    '&::after': {
       background: 'red',
       borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
       left: 0,
@@ -61,7 +61,7 @@ const StandardInputRoot = (0, _styles.styled)(_PickersInput.PickersInputRoot, {
         borderBottomColor: (theme.vars || theme).palette.error.main
       }
     },
-    '&:before': {
+    '&::before': {
       borderBottom: `1px solid ${bottomLineColor}`,
       left: 0,
       bottom: 0,

package/node/internals/hooks/useViews.js

@@ -72,11 +72,12 @@ function useViews({
     onFocusedViewChange?.(viewToFocus, hasFocus);
   });
   const handleChangeView = (0, _useEventCallback.default)(newView => {
+    // always keep the focused view in sync
+    handleFocusedViewChange(newView, true);
     if (newView === view) {
       return;
     }
     setView(newView);
-    handleFocusedViewChange(newView, true);
     if (onViewChange) {
       onViewChange(newView);
     }
@@ -85,7 +86,6 @@ function useViews({
     if (nextView) {
       handleChangeView(nextView);
     }
-    handleFocusedViewChange(nextView, true);
   });
   const setValueAndGoToNextView = (0, _useEventCallback.default)((value, currentViewSelectionState, selectedView) => {
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
@@ -94,18 +94,19 @@ function useViews({
     // but when it's not the final view given all `views` -> overall selection state should be `partial`.
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
-    onChange(value, globalSelectionState);
-    if (isSelectionFinishedOnCurrentView) {
+    onChange(value, globalSelectionState, selectedView);
+    // Detects if the selected view is not the active one.
+    // Can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
+    if (selectedView && selectedView !== view) {
+      const nextViewAfterSelected = views[views.indexOf(selectedView) + 1];
+      if (nextViewAfterSelected) {
+        // move to next view after the selected one
+        handleChangeView(nextViewAfterSelected);
+      }
+    } else if (isSelectionFinishedOnCurrentView) {
       goToNextView();
     }
   });
-  const setValueAndGoToView = (0, _useEventCallback.default)((value, newView, selectedView) => {
-    onChange(value, newView ? 'partial' : 'finish', selectedView);
-    if (newView) {
-      handleChangeView(newView);
-      handleFocusedViewChange(newView, true);
-    }
-  });
   return {
     view,
     setView: handleChangeView,
@@ -116,7 +117,6 @@ function useViews({
     // Always return up-to-date default view instead of the initial one (i.e. defaultView.current)
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView,
-    setValueAndGoToNextView,
-    setValueAndGoToView
+    setValueAndGoToNextView
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.0.0-alpha.6",
+  "version": "7.0.0-alpha.7",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -34,10 +34,10 @@
     "directory": "packages/x-date-pickers"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.5",
-    "@mui/base": "^5.0.0-beta.27",
-    "@mui/system": "^5.15.0",
-    "@mui/utils": "^5.15.0",
+    "@babel/runtime": "^7.23.7",
+    "@mui/base": "^5.0.0-beta.29",
+    "@mui/system": "^5.15.2",
+    "@mui/utils": "^5.15.2",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",