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

package/CHANGELOG.md

@@ -5,6 +5,85 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.6
+
+_Dec 26, 2024_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🏎️ Improve Data Grid scrolling performance
+- 🌍 Improve Dutch (nl-NL) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@JoepVerkoelen, @k-rajat19, @lauri865.
+Following are all team members who have contributed to this release:
+@flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The `sanitizeFilterItemValue()` utility is not exported anymore.
+
+#### `@mui/x-data-grid@8.0.0-alpha.6`
+
+- [DataGrid] Avoid subscribing to `renderContext` state in grid root for better scroll performance (#15986) @lauri865
+- [DataGrid] Fix header filters showing clear button while empty (#15829) @k-rajat19
+- [DataGrid] Improve test coverage of server side data source (#15942) @MBilalShafi
+- [DataGrid] Move progress components to leaf import (#15914) @romgrk
+- [DataGrid] Move skeleton to leaf import (#15931) @romgrk
+- [DataGrid] Replace `forwardRef` with a shim for forward compatibility (#15955) @lauri865
+- [l10n] Improve Dutch (nl-NL) locale (#15994) @JoepVerkoelen
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-alpha.6`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.6` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.6`, plus:
+
+- [DataGridPremium] Fix column unpinning with row grouping (#15908) @k-rajat19
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-alpha.6`
+
+- [pickers] Use `usePickerContext()` and `usePickerActionsContext()` to get the actions in the `actionBar` slot and in internal components (#15843) @flaviendelangle
+- [pickers] Use `usePickerContext()` to get the view-related props in the layout, toolbar and tabs slots (#15606) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-alpha.6`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.6`
+
+No changes since `@mui/x-charts@v8.0.0-alpha.5`.
+
+#### `@mui/x-charts-pro@8.0.0-alpha.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.6`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.6`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.5`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.6`.
+
+### Docs
+
+- [docs] Remove production profiler from docs build (#15959) @lauri865
+- [code-infra] Add new `next-env.d.ts` changes (#15947) @JCQuintas
+
 ## 8.0.0-alpha.5
 
 _Dec 19, 2024_

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
 import { DateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
-export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, Omit<BaseToolbarProps<PickerRangeValue, 'day'>, 'onChange' | 'isLandscape'>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, Omit<BaseToolbarProps<PickerRangeValue>, 'onChange' | 'isLandscape'>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
 }
 export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {
     /**

package/DateRangePicker/DateRangePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "classes", "onViewChange", "view", "views"];
+const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -103,12 +103,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   hidden: PropTypes.bool,
   onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -124,14 +118,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day'])).isRequired
+  value: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;
 export { DateRangePickerToolbar };

package/DateTimeRangePicker/DateTimeRangePickerTabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DateOrTimeViewWithMeridiem, BaseTabsProps, ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
+import { ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
 import { DateTimeRangePickerTabsClasses } from './dateTimeRangePickerTabsClasses';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
 export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsProps {
@@ -23,7 +23,7 @@ export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsPr
      */
     classes?: Partial<DateTimeRangePickerTabsClasses>;
 }
-export interface DateTimeRangePickerTabsProps extends ExportedDateTimeRangePickerTabsProps, BaseTabsProps<DateOrTimeViewWithMeridiem>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+export interface DateTimeRangePickerTabsProps extends ExportedDateTimeRangePickerTabsProps, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
 }
 declare const DateTimeRangePickerTabs: {
     (inProps: DateTimeRangePickerTabsProps): React.JSX.Element | null;

package/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -8,7 +8,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
 import { isDatePickerView, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import { getDateTimeRangePickerTabsUtilityClass } from "./dateTimeRangePickerTabsClasses.js";
@@ -69,9 +69,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   });
   const {
     dateIcon = /*#__PURE__*/_jsx(DateRangeIcon, {}),
-    onViewChange,
     timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
-    view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     rangePosition,
     onRangePositionChange,
@@ -83,8 +81,12 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   const {
     ownerState
   } = usePickerPrivateContext();
+  const {
+    view,
+    onViewChange
+  } = 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(() => {
@@ -109,18 +111,26 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     }
   });
   const changeToPreviousTab = useEventCallback(() => {
-    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 = useEventCallback(() => {
-    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 (isDatePickerView(view)) {
+    startIcon = dateIcon;
+  } else {
+    startIcon = timeIcon;
+  }
   return /*#__PURE__*/_jsxs(DateTimeRangePickerTabsRoot, {
     ownerState: ownerState,
     className: clsx(classes.root, className),
@@ -133,7 +143,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
       className: classes.filler
     }), /*#__PURE__*/_jsx(DateTimeRangePickerTab, {
-      startIcon: isDatePickerView(view) ? dateIcon : timeIcon,
+      startIcon: startIcon,
       className: classes.tabButton,
       size: "large",
       children: tabLabel
@@ -168,12 +178,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    */
   hidden: PropTypes.bool,
   onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a tab is clicked.
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -183,10 +187,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    * Time tab icon.
    * @default TimeIcon
    */
-  timeIcon: PropTypes.element,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired
+  timeIcon: PropTypes.element
 } : void 0;
 export { DateTimeRangePickerTabs };

package/DateTimeRangePicker/DateTimeRangePickerToolbar.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { BaseToolbarProps, ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BaseToolbarProps, ExportedBaseToolbarProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
 import { DateTimeRangePickerToolbarClasses } from './dateTimeRangePickerToolbarClasses';
-type DateTimeRangeViews = Exclude<DateOrTimeViewWithMeridiem, 'year' | 'month'>;
-export interface DateTimeRangePickerToolbarProps extends BaseToolbarProps<PickerRangeValue, DateTimeRangeViews>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'>, ExportedDateTimeRangePickerToolbarProps {
+export interface DateTimeRangePickerToolbarProps extends BaseToolbarProps<PickerRangeValue>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'>, ExportedDateTimeRangePickerToolbarProps {
     ampm?: boolean;
 }
 export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToolbarProps {

package/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -2,13 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { useUtils, useToolbarOwnerState, DateTimePickerToolbarForceDesktopVariant } from '@mui/x-date-pickers/internals';
+import { useUtils, useToolbarOwnerState, DateTimePickerToolbarOverrideContext } from '@mui/x-date-pickers/internals';
 import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
 import { getDateTimeRangePickerToolbarUtilityClass } from "./dateTimeRangePickerToolbarClasses.js";
@@ -55,11 +55,8 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       onRangePositionChange,
       className,
       classes: classesProp,
-      onViewChange,
       onChange,
-      view,
       isLandscape,
-      views,
       ampm,
       hidden,
       toolbarFormat,
@@ -70,7 +67,10 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     disabled,
-    readOnly
+    readOnly,
+    view,
+    onViewChange,
+    views
   } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
@@ -85,24 +85,6 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     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,
@@ -117,37 +99,68 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     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__*/_jsx(DateTimeRangePickerToolbarRoot, _extends({
+  return /*#__PURE__*/_jsxs(DateTimeRangePickerToolbarRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     sx: sx
   }, other, {
-    children: /*#__PURE__*/_jsxs(DateTimePickerToolbarForceDesktopVariant.Provider, {
-      value: true,
-      children: [/*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
+    children: [/*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
+      value: startOverrides,
+      children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
         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__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
+      }, commonToolbarProps))
+    }), /*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
+      value: endOverrides,
+      children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
         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 = {
@@ -169,12 +182,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
   isLandscape: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -190,14 +197,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired).isRequired
+  value: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;
 export { DateTimeRangePickerToolbar };

package/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts

@@ -1,9 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from '../internals/hooks/useDesktopRangePicker';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from '../DateRangePicker/shared';
-export interface DesktopDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots<'day'>, 'field'> {
+export interface DesktopDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots, 'field'> {
 }
-export interface DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
 export interface DesktopDateRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateRangePickerProps, DesktopRangeOnlyPickerProps {
     /**

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.d.ts

@@ -1,10 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from '../internals/hooks/useDesktopRangePicker';
 import { BaseDateTimeRangePickerProps, BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps } from '../DateTimeRangePicker/shared';
-import { DateTimeRangePickerView } from '../internals/models';
-export interface DesktopDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots<DateTimeRangePickerView>, 'field'> {
+export interface DesktopDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots, 'field'> {
 }
-export interface DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
 export interface DesktopDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimeRangePickerProps, DesktopRangeOnlyPickerProps {
     /**

package/MobileDateRangePicker/MobileDateRangePicker.types.d.ts

@@ -1,9 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps } from '../internals/hooks/useMobileRangePicker';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from '../DateRangePicker/shared';
-export interface MobileDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseMobileRangePickerSlots<'day'>, 'field'> {
+export interface MobileDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseMobileRangePickerSlots, 'field'> {
 }
-export interface MobileDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface MobileDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
 export interface MobileDateRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateRangePickerProps, MobileRangeOnlyPickerProps {
     /**

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.d.ts

@@ -1,10 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps } from '../internals/hooks/useMobileRangePicker';
 import { BaseDateTimeRangePickerProps, BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps } from '../DateTimeRangePicker/shared';
-import { DateTimeRangePickerView } from '../internals/models';
-export interface MobileDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseMobileRangePickerSlots<DateTimeRangePickerView>, 'field'> {
+export interface MobileDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseMobileRangePickerSlots, 'field'> {
 }
-export interface MobileDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface MobileDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
 export interface MobileDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimeRangePickerProps, MobileRangeOnlyPickerProps {
     /**

package/StaticDateRangePicker/StaticDateRangePicker.types.d.ts

@@ -1,9 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { StaticRangeOnlyPickerProps, UseStaticRangePickerSlots, UseStaticRangePickerSlotProps } from '../internals/hooks/useStaticRangePicker';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from '../DateRangePicker/shared';
-export interface StaticDateRangePickerSlots extends BaseDateRangePickerSlots, UseStaticRangePickerSlots<'day'> {
+export interface StaticDateRangePickerSlots extends BaseDateRangePickerSlots, UseStaticRangePickerSlots {
 }
-export interface StaticDateRangePickerSlotProps extends BaseDateRangePickerSlotProps, Omit<UseStaticRangePickerSlotProps<'day'>, 'toolbar'> {
+export interface StaticDateRangePickerSlotProps extends BaseDateRangePickerSlotProps, Omit<UseStaticRangePickerSlotProps, 'toolbar'> {
 }
 export interface StaticDateRangePickerProps extends BaseDateRangePickerProps, MakeOptional<StaticRangeOnlyPickerProps, 'displayStaticWrapperAs'> {
     /**

package/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/internals/hooks/models/useRangePicker.d.ts

@@ -3,9 +3,9 @@ import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui
 import { BaseRangeNonStaticPickerProps } from '../../models';
 import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
 import { RangePickerFieldSlots, RangePickerFieldSlotProps } from '../useEnrichedRangePickerFieldProps';
-export interface UseRangePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<PickerRangeValue, TView>, RangePickerFieldSlots {
+export interface UseRangePickerSlots extends ExportedPickersLayoutSlots<PickerRangeValue>, RangePickerFieldSlots {
 }
-export interface UseRangePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedPickersLayoutSlotProps<PickerRangeValue, TView>, RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure> {
+export interface UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedPickersLayoutSlotProps<PickerRangeValue>, RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure> {
     tabs?: ExportedBaseTabsProps;
     toolbar?: ExportedBaseToolbarProps;
 }

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -59,8 +59,6 @@ export const useDesktopRangePicker = _ref => {
     fieldRef = endFieldRef;
   }
   const {
-    open,
-    actions,
     layoutProps,
     providerProps,
     renderCurrentView,
@@ -79,8 +77,8 @@ export 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
   }, []);
@@ -89,7 +87,9 @@ export const useDesktopRangePicker = _ref => {
       if (fieldContainerRef.current?.contains(getActiveElement(document)) || popperRef.current?.contains(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;
@@ -124,8 +124,9 @@ export const useDesktopRangePicker = _ref => {
   const enrichedFieldProps = 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,
@@ -140,9 +141,9 @@ export 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 = _extends({}, slotProps, {
     tabs: _extends({}, slotProps?.tabs, {
@@ -156,14 +157,12 @@ export const useDesktopRangePicker = _ref => {
   });
   const Layout = slots?.layout ?? PickersLayout;
   const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, _extends({
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, {
       role: "tooltip",
       placement: "bottom-start",
       containerRef: popperRef,
       anchorEl: anchorRef.current,
-      onBlur: handleBlur
-    }, actions, {
-      open: open,
+      onBlur: handleBlur,
       slots: slots,
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
@@ -173,7 +172,7 @@ export const useDesktopRangePicker = _ref => {
         slotProps: slotPropsForLayout,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts

@@ -1,8 +1,8 @@
 import { PickersPopperSlots, PickersPopperSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { RangeOnlyPickerProps, RangePickerAdditionalViewProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from '../models/useRangePicker';
-export interface UseDesktopRangePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends UseRangePickerSlots<TView>, PickersPopperSlots {
+export interface UseDesktopRangePickerSlots extends UseRangePickerSlots, PickersPopperSlots {
 }
-export interface UseDesktopRangePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, PickersPopperSlotProps {
+export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickersPopperSlotProps {
 }
 export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps {
     /**
@@ -15,12 +15,12 @@ export interface UseDesktopRangePickerProps<TView extends DateOrTimeViewWithMeri
      * Overridable component slots.
      * @default {}
      */
-    slots: UseDesktopRangePickerSlots<TView>;
+    slots: UseDesktopRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseDesktopRangePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
 export interface DesktopRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {
 }