Work

flaviendelangle · flaviendelangle · commit 02e515279af1 · 2024-11-06T15:45:41.000+01:00
diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -259,7 +259,94 @@ const theme = createTheme({
 });
 ```
 
-## Removed types
+## Slots breaking changes
+
+### Slot: `layout`
+
+- The `PickersLayoutRoot` must now receive the `ownerState` returned by `usePickerLayout` instead of its props:
+
+  ```diff
+  -const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+  +const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
+
+   return (
+  -  <PickersLayoutRoot ownerState={props}>
+  +  <PickersLayoutRoot ownerState={ownerState}>
+       Layout content
+     </PickersLayoutRoot>
+   );
+  }
+  ```
+
+- The component passed to the `layout` slot no longer receives a `isRtl` prop. If you need to access this information, you can use the `useRtl` hook from `@mui/system`:
+
+  ```diff
+  +import { useRtl } from '@mui/system/RtlProvider';
+
+   function CustomLayout(props) {
+  -  console.log(props.isRtl);
+  +  const isRtl = useRtl();
+  +  console.log(isRtl);
+   }
+  ```
+
+- The component passed to the `layout` slot no longer receives an `orientation` and the `isLandscape` props, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.orientation);
+  +const { orientation } = usePickersContext();
+  +console.log(orientation);
+
+  -console.log(props.isLandscape);
+  +const { orientation } = usePickersContext();
+  +console.log(orientation === 'landscape');
+  ```
+
+- The component passed to the `layout` slot no longer receives a `wrapperVariant` prop, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.wrapperVariant);
+  +const { variant } = usePickersContext();
+  +console.log(variant);
+  ```
+
+### Slot: `toolbar`
+
+- The component passed to the `toolbar` slot no longer receives a `isLandscape` prop. There is currently no way to access this information, if you need it, please [open an issue](https://github.com/mui/mui-x/issues/new/choose).
+
+  ```diff
+  -console.log(props.isLandscape);
+  +const { orientation } = usePickersContext();
+  +console.log(orientation === 'landscape');
+  ```
+
+- The component passed to the `toolbar` slot no longer receives a `toolbarVariant` prop, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.wrapperVariant);
+  +const { variant } = usePickersContext();
+  +console.log(variant);
+  ```
+
+- The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.disabled);
+  +const { disabled } = usePickersContext();
+  +console.log(disabled);
+  ```
+
+- The component passed to the `toolbar` slot no longer receives a `readOnly` prop, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.readOnly);
+  +const { readOnly } = usePickersContext();
+  +console.log(readOnly);
+  ```
+
+## Typing breaking changes
+
+### Removed types
 
 The following types are no longer exported by `@mui/x-date-pickers` and/or `@mui/x-date-pickers-pro`.
 If you were using them, you need to replace them with the following code:
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -143,7 +143,6 @@ DateRangePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -157,7 +156,6 @@ DateRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -12,7 +12,7 @@ import {
   PickerRangeValue,
   usePickersPrivateContext,
 } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickersContext, usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { PickerOwnerState, PickerValidDate } from '@mui/x-date-pickers/models';
 import {
   DateTimePickerToolbarProps,
@@ -129,8 +129,6 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     view,
     views,
     ampm,
-    disabled,
-    readOnly,
     hidden,
     toolbarFormat,
     toolbarPlaceholder,
@@ -139,6 +137,11 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     ...other
   } = props;
 
+  const translations = usePickersTranslations();
+  const { ownerState } = usePickersPrivateContext();
+  const { disabled, readOnly } = usePickersContext();
+  const classes = useUtilityClasses(classesProp);
+
   const commonToolbarProps = {
     views,
     ampm,
@@ -149,11 +152,6 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     toolbarPlaceholder,
   };
 
-  const translations = usePickersTranslations();
-  const { ownerState } = usePickersPrivateContext();
-
-  const classes = useUtilityClasses(classesProp);
-
   const handleStartRangeViewChange = React.useCallback(
     (newView: DateOrTimeViewWithMeridiem) => {
       if (newView === 'year' || newView === 'month') {
@@ -244,7 +242,6 @@ DateTimeRangePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -259,7 +256,6 @@ DateTimeRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
@@ -16,6 +16,7 @@ import {
 } from './datePickerToolbarClasses';
 import { resolveDateFormat } from '../internals/utils/date-utils';
 import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext';
+import { usePickersContext } from '../hooks';
 
 export interface DatePickerToolbarProps
   extends BaseToolbarProps<PickerValidDate | null, DateView>,
@@ -92,7 +93,8 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar(
 
   const utils = useUtils();
   const translations = usePickersTranslations();
-  const { ownerState, orientation } = usePickersPrivateContext();
+  const { ownerState } = usePickersPrivateContext();
+  const { orientation } = usePickersContext();
   const classes = useUtilityClasses(classesProp);
 
   const dateText = React.useMemo(() => {
@@ -135,7 +137,6 @@ DatePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -148,7 +149,6 @@ DatePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -25,6 +25,7 @@ import { pickersToolbarTextClasses } from '../internals/components/pickersToolba
 import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { PickerOwnerState, PickerValidDate } from '../models';
 import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext';
+import { usePickersContext } from '../hooks/usePickersContext';
 
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
   /**
@@ -245,16 +246,15 @@ function DateTimePickerToolbar(inProps: DateTimePickerToolbarProps) {
     toolbarFormat,
     toolbarPlaceholder = '––',
     views,
-    disabled,
-    readOnly,
     toolbarTitle: inToolbarTitle,
     className,
     classes: classesProp,
     ...other
   } = props;
 
   const isRtl = useRtl();
-  const { ownerState: pickerOwnerState, variant, orientation } = usePickersPrivateContext();
+  const { ownerState: pickerOwnerState } = usePickersPrivateContext();
+  const { orientation, variant, disabled, readOnly } = usePickersContext();
   const ownerState: DateTimePickerToolbarOwnerState = { ...pickerOwnerState, isRtl };
   const utils = useUtils();
   const { meridiemMode, handleMeridiemChange } = useMeridiemMode(value, ampm, onChange);
@@ -425,7 +425,6 @@ DateTimePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -438,7 +437,6 @@ DateTimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
@@ -10,6 +10,7 @@ import {
   usePickerLayout,
 } from '../PickersLayout';
 import { DateOrTimeViewWithMeridiem } from '../internals/models/common';
+import { usePickersContext } from '../hooks/usePickersContext';
 
 type DesktopDateTimePickerLayoutComponent = (<TValue, TView extends DateOrTimeViewWithMeridiem>(
   props: PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>,
@@ -22,8 +23,8 @@ const DesktopDateTimePickerLayout = React.forwardRef(function DesktopDateTimePic
   TValue,
   TView extends DateOrTimeViewWithMeridiem,
 >(props: PickersLayoutProps<TValue, TView>, ref: React.Ref<HTMLDivElement>) {
-  const { toolbar, tabs, content, actionBar, shortcuts, orientation, ownerState } =
-    usePickerLayout(props);
+  const { toolbar, tabs, content, actionBar, shortcuts, ownerState } = usePickerLayout(props);
+  const { orientation } = usePickersContext();
   const { sx, className, classes } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
 
diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
@@ -13,6 +13,7 @@ import {
 import usePickerLayout from './usePickerLayout';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { PickerOwnerState } from '../models/pickers';
+import { usePickersContext } from '../hooks/usePickersContext';
 
 const useUtilityClasses = (
   classes: Partial<PickersLayoutClasses> | undefined,
@@ -106,8 +107,8 @@ const PickersLayout = React.forwardRef(function PickersLayout<
 >(inProps: PickersLayoutProps<TValue, TView>, ref: React.Ref<HTMLDivElement>) {
   const props = useThemeProps({ props: inProps, name: 'MuiPickersLayout' });
 
-  const { toolbar, content, tabs, actionBar, shortcuts, orientation, variant, ownerState } =
-    usePickerLayout(props);
+  const { toolbar, content, tabs, actionBar, shortcuts, ownerState } = usePickerLayout(props);
+  const { orientation, variant } = usePickersContext();
   const { sx, className, classes: classesProp } = props;
 
   const classes = useUtilityClasses(classesProp, ownerState);
diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx
@@ -11,6 +11,7 @@ import { BaseToolbarProps } from '../internals/models/props/toolbar';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext';
 import { PickersPrivateContextValue } from '../internals/components/PickersProvider';
+import { usePickersContext } from '../hooks/usePickersContext';
 
 function toolbarHasView<TValue, TView extends DateOrTimeViewWithMeridiem>(
   toolbarProps: BaseToolbarProps<TValue, TView> | any,
@@ -42,12 +43,13 @@ interface PickersLayoutPropsWithValueRequired<TValue, TView extends DateOrTimeVi
 }
 interface UsePickerLayoutResponse<TValue>
   extends SubComponents<TValue>,
-    Pick<PickersPrivateContextValue, 'orientation' | 'variant' | 'ownerState'> {}
+    Pick<PickersPrivateContextValue, 'ownerState'> {}
 
 const usePickerLayout = <TValue, TView extends DateOrTimeViewWithMeridiem>(
   props: PickersLayoutProps<TValue, TView>,
 ): UsePickerLayoutResponse<TValue> => {
-  const { ownerState: pickerOwnerState, variant, orientation } = usePickersPrivateContext();
+  const { ownerState: pickerOwnerState } = usePickersPrivateContext();
+  const { variant } = usePickersContext();
 
   const {
     onAccept,
@@ -144,8 +146,6 @@ const usePickerLayout = <TValue, TView extends DateOrTimeViewWithMeridiem>(
     tabs,
     actionBar,
     shortcuts,
-    orientation,
-    variant,
     ownerState,
   };
 };
diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
@@ -22,6 +22,7 @@ import { TimeViewWithMeridiem } from '../internals/models';
 import { formatMeridiem } from '../internals/utils/date-utils';
 import { PickerOwnerState, PickerValidDate } from '../models';
 import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext';
+import { usePickersContext } from '../hooks';
 
 export interface TimePickerToolbarProps
   extends BaseToolbarProps<PickerValidDate | null, TimeViewWithMeridiem>,
@@ -163,8 +164,6 @@ function TimePickerToolbar(inProps: TimePickerToolbarProps) {
     view,
     onViewChange,
     views,
-    disabled,
-    readOnly,
     className,
     classes: classesProp,
     ...other
@@ -173,6 +172,7 @@ function TimePickerToolbar(inProps: TimePickerToolbarProps) {
   const translations = usePickersTranslations();
   const isRtl = useRtl();
   const { ownerState: pickerOwnerState } = usePickersPrivateContext();
+  const { disabled, readOnly } = usePickersContext();
 
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const { meridiemMode, handleMeridiemChange } = useMeridiemMode(value, ampm, onChange);
@@ -276,7 +276,6 @@ TimePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -289,7 +288,6 @@ TimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
diff --git a/packages/x-date-pickers/src/internals/components/PickersProvider.tsx b/packages/x-date-pickers/src/internals/components/PickersProvider.tsx
@@ -15,8 +15,6 @@ export const PickersPrivateContext = React.createContext<PickersPrivateContextVa
     pickerVariant: 'desktop',
     pickerOrientation: 'portrait',
   },
-  variant: 'desktop',
-  orientation: 'portrait',
 });
 
 /**
@@ -60,12 +58,14 @@ export interface PickersContextValue {
    * `true` if the picker is open, `false` otherwise.
    */
   open: boolean;
-}
-export interface PickersPrivateContextValue {
   /**
-   * The ownerState of the picker.
+   * `true` if the picker is disabled, `false` otherwise.
    */
-  ownerState: PickerOwnerState;
+  disabled: boolean;
+  /**
+   * `true` if the picker is read-only, `false` otherwise.
+   */
+  readOnly: boolean;
   /**
    * The responsive variant of the picker.
    * Is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
@@ -84,3 +84,9 @@ export interface PickersPrivateContextValue {
    */
   orientation: PickerOrientation;
 }
+export interface PickersPrivateContextValue {
+  /**
+   * The ownerState of the picker.
+   */
+  ownerState: PickerOwnerState;
+}
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts
diff --git a/packages/x-date-pickers/src/internals/models/props/toolbar.ts b/packages/x-date-pickers/src/internals/models/props/toolbar.ts
