[pickers] Use new ownerState for slots.field, slots.actionBar, slots.…

…shortcuts and slots.toolbar

packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx

@@ -12,7 +12,12 @@ import {
   ExportedBaseTabsProps,
   PickersProvider,
 } from '@mui/x-date-pickers/internals';
-import { PickerValidDate, FieldRef, InferError } from '@mui/x-date-pickers/models';
+import {
+  PickerValidDate,
+  FieldRef,
+  InferError,
+  PickerOwnerState,
+} from '@mui/x-date-pickers/models';
 import {
   DesktopRangePickerAdditionalViewProps,
   UseDesktopRangePickerParams,
@@ -94,6 +99,7 @@ export const useDesktopRangePicker = <
     shouldRestoreFocus,
     fieldProps: pickerFieldProps,
     contextValue,
+    ownerState,
   } = usePicker<
     DateRange<TDate>,
     TDate,
@@ -143,7 +149,7 @@ export const useDesktopRangePicker = <
       TEnableAccessibleFieldDOMStructure,
       InferError<TExternalProps>
     >,
-    TExternalProps
+    PickerOwnerState<DateRange<TDate>>
   >({
     elementType: Field,
     externalSlotProps: slotProps?.field,
@@ -163,7 +169,7 @@ export const useDesktopRangePicker = <
       ref: fieldContainerRef,
       ...(fieldType === 'single-input' ? { inputRef, name } : {}),
     },
-    ownerState: props,
+    ownerState,
   });
 
   const enrichedFieldProps = useEnrichedRangePickerFieldProps<

packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts

@@ -11,6 +11,7 @@ import {
   FieldSelectedSections,
   FieldRef,
   PickerValidDate,
+  PickerOwnerState,
 } from '@mui/x-date-pickers/models';
 import {
   UseClearableFieldSlots,
@@ -22,7 +23,6 @@ import {
   onSpaceOrEnter,
   UsePickerResponse,
   WrapperVariant,
-  UsePickerProps,
   SlotComponentPropsFromProps,
   DateOrTimeViewWithMeridiem,
 } from '@mui/x-date-pickers/internals';
@@ -71,7 +71,7 @@ export interface RangePickerFieldSlotProps<
       unknown
     >,
     {},
-    UsePickerProps<DateRange<TDate>, TDate, any, any, any, any>
+    PickerOwnerState<DateRange<TDate>>
   >;
   fieldRoot?: SlotComponentProps<typeof Stack, {}, Record<string, any>>;
   fieldSeparator?: SlotComponentProps<typeof Typography, {}, Record<string, any>>;

packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx

@@ -11,7 +11,12 @@ import {
   PickersProvider,
 } from '@mui/x-date-pickers/internals';
 import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
-import { PickerValidDate, FieldRef, InferError } from '@mui/x-date-pickers/models';
+import {
+  PickerValidDate,
+  FieldRef,
+  InferError,
+  PickerOwnerState,
+} from '@mui/x-date-pickers/models';
 import useId from '@mui/utils/useId';
 import {
   MobileRangePickerAdditionalViewProps,
@@ -89,6 +94,7 @@ export const useMobileRangePicker = <
     renderCurrentView,
     fieldProps: pickerFieldProps,
     contextValue,
+    ownerState,
   } = usePicker<
     DateRange<TDate>,
     TDate,
@@ -119,7 +125,7 @@ export const useMobileRangePicker = <
       TEnableAccessibleFieldDOMStructure,
       InferError<TExternalProps>
     >,
-    TExternalProps
+    PickerOwnerState<DateRange<TDate>>
   >({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
@@ -137,7 +143,7 @@ export const useMobileRangePicker = <
       timezone,
       ...(fieldType === 'single-input' ? { inputRef, name } : {}),
     },
-    ownerState: props,
+    ownerState,
   });
 
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;

packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts

@@ -12,7 +12,7 @@ import {
   ExportedPickersShortcutProps,
   PickersShortcuts,
 } from '../PickersShortcuts/PickersShortcuts';
-import { PickerValidDate } from '../models';
+import { PickerOwnerState, PickerValidDate } from '../models';
 
 export interface ExportedPickersLayoutSlots<
   TValue,
@@ -38,16 +38,9 @@ export interface ExportedPickersLayoutSlots<
   >;
 }
 
-interface PickersLayoutActionBarOwnerState<
-  TValue,
-  TDate extends PickerValidDate,
-  TView extends DateOrTimeViewWithMeridiem,
-> extends PickersLayoutProps<TValue, TDate, TView> {
-  wrapperVariant: WrapperVariant;
-}
-
-interface PickersShortcutsOwnerState<TValue> extends PickersShortcutsProps<TValue> {
+export interface PickersLayoutOwnerState<TValue> extends PickerOwnerState<TValue> {
   wrapperVariant: WrapperVariant;
+  isLandscape: boolean;
 }
 
 export interface ExportedPickersLayoutSlotProps<
@@ -58,15 +51,11 @@ export interface ExportedPickersLayoutSlotProps<
   /**
    * Props passed down to the action bar component.
    */
-  actionBar?: SlotComponentProps<
-    typeof PickersActionBar,
-    {},
-    PickersLayoutActionBarOwnerState<TValue, TDate, TView>
-  >;
+  actionBar?: SlotComponentProps<typeof PickersActionBar, {}, PickersLayoutOwnerState<TValue>>;
   /**
    * Props passed down to the shortcuts component.
    */
-  shortcuts?: SlotComponentProps<typeof PickersShortcuts, {}, PickersShortcutsOwnerState<TValue>>;
+  shortcuts?: SlotComponentProps<typeof PickersShortcuts, {}, PickersLayoutOwnerState<TValue>>;
   /**
    * Props passed down to the layoutRoot component.
    */

packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx

@@ -3,21 +3,25 @@ import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { PickersActionBar, PickersActionBarAction } from '../PickersActionBar';
-import { PickersLayoutProps, SubComponents } from './PickersLayout.types';
-import { getPickersLayoutUtilityClass } from './pickersLayoutClasses';
+import { PickersLayoutOwnerState, PickersLayoutProps, SubComponents } from './PickersLayout.types';
+import { getPickersLayoutUtilityClass, PickersLayoutClasses } from './pickersLayoutClasses';
 import { PickersShortcuts } from '../PickersShortcuts';
 import { BaseToolbarProps } from '../internals/models/props/toolbar';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { PickerValidDate } from '../models';
+import { usePickersContext } from '../hooks';
 
 function toolbarHasView<TValue, TView extends DateOrTimeViewWithMeridiem>(
   toolbarProps: BaseToolbarProps<TValue, TView> | any,
 ): toolbarProps is BaseToolbarProps<TValue, TView> {
   return toolbarProps.view !== null;
 }
 
-const useUtilityClasses = (ownerState: PickersLayoutProps<any, any, any>) => {
-  const { classes, isLandscape } = ownerState;
+const useUtilityClasses = (
+  classes: Partial<PickersLayoutClasses> | undefined,
+  ownerState: PickersLayoutOwnerState<any>,
+) => {
+  const { isLandscape } = ownerState;
   const slots = {
     root: ['root', isLandscape && 'landscape'],
     contentWrapper: ['contentWrapper'],
@@ -47,6 +51,8 @@ const usePickerLayout = <
 >(
   props: PickersLayoutProps<TValue, TDate, TView>,
 ): UsePickerLayoutResponse<TValue> => {
+  const { ownerState: pickerOwnerState } = usePickersContext<TValue>();
+
   const {
     wrapperVariant,
     onAccept,
@@ -66,13 +72,19 @@ const usePickerLayout = <
     children,
     slots,
     slotProps,
+    classes: classesProp,
     // TODO: Remove this "as" hack. It get introduced to mark `value` prop in PickersLayoutProps as not required.
     // The true type should be
     // - For pickers value: TDate | null
     // - For range pickers value: [TDate | null, TDate | null]
   } = props as PickersLayoutPropsWithValueRequired<TValue, TDate, TView>;
 
-  const classes = useUtilityClasses(props);
+  const ownerState: PickersLayoutOwnerState<TValue> = {
+    ...pickerOwnerState,
+    wrapperVariant,
+    isLandscape,
+  };
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   // Action bar
   const ActionBar = slots?.actionBar ?? PickersActionBar;
@@ -88,7 +100,7 @@ const usePickerLayout = <
         wrapperVariant === 'desktop' ? [] : (['cancel', 'accept'] as PickersActionBarAction[]),
     },
     className: classes.actionBar,
-    ownerState: { ...props, wrapperVariant },
+    ownerState,
   });
   const actionBar = <ActionBar {...actionBarProps} />;
 
@@ -108,7 +120,7 @@ const usePickerLayout = <
       readOnly,
     },
     className: classes.toolbar,
-    ownerState: { ...props, wrapperVariant },
+    ownerState,
   });
   const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? <Toolbar {...toolbarProps} /> : null;
 
@@ -133,12 +145,7 @@ const usePickerLayout = <
       onChange: onSelectShortcut,
     },
     className: classes.shortcuts,
-    ownerState: {
-      isValid,
-      isLandscape,
-      onChange: onSelectShortcut,
-      wrapperVariant,
-    },
+    ownerState,
   });
   const shortcuts = view && !!Shortcuts ? <Shortcuts {...shortcutsProps} /> : null;
 

packages/x-date-pickers/src/hooks/usePickersContext.ts

@@ -1,12 +1,15 @@
 'use client';
 import * as React from 'react';
-import { PickersContext } from '../internals/components/PickersProvider';
+import { PickersContext, PickersContextValue } from '../internals/components/PickersProvider';
 
 /**
  * Returns the context passed by the picker that wraps the current component.
  */
-export const usePickersContext = () => {
-  const value = React.useContext(PickersContext);
+export const usePickersContext = <
+  // TODO v8: Replace with TIsRange when available
+  TValue = any,
+>() => {
+  const value = React.useContext(PickersContext) as PickersContextValue<TValue> | null;
   if (value == null) {
     throw new Error(
       [

packages/x-date-pickers/src/internals/components/PickersProvider.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { PickerValidDate } from '../../models';
+import { PickerOwnerState, PickerValidDate } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { LocalizationProvider } from '../../LocalizationProvider';
 
-export const PickersContext = React.createContext<PickersContextValue | null>(null);
+export const PickersContext = React.createContext<PickersContextValue<any> | null>(null);
 
 /**
  * Provides the context for the various parts of a picker component:
@@ -12,8 +12,8 @@ export const PickersContext = React.createContext<PickersContextValue | null>(nu
  *
  * @ignore - do not document.
  */
-export function PickersProvider<TDate extends PickerValidDate>(
-  props: PickersFieldProviderProps<TDate>,
+export function PickersProvider<TValue, TDate extends PickerValidDate>(
+  props: PickersProviderProps<TValue, TDate>,
 ) {
   const { contextValue, localeText, children } = props;
 
@@ -24,13 +24,13 @@ export function PickersProvider<TDate extends PickerValidDate>(
   );
 }
 
-interface PickersFieldProviderProps<TDate extends PickerValidDate> {
-  contextValue: PickersContextValue;
+interface PickersProviderProps<TValue, TDate extends PickerValidDate> {
+  contextValue: PickersContextValue<TValue>;
   localeText: PickersInputLocaleText<TDate> | undefined;
   children: React.ReactNode;
 }
 
-export interface PickersContextValue {
+export interface PickersContextValue<TValue> {
   /**
    * Open the picker.
    * @param {React.UIEvent} event The DOM event that triggered the change.
@@ -45,4 +45,8 @@ export interface PickersContextValue {
    * `true` if the picker is open, `false` otherwise.
    */
   open: boolean;
+  /**
+   * The ownerState of the picker.
+   */
+  ownerState: PickerOwnerState<TValue>;
 }

packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx

@@ -18,6 +18,7 @@ import {
   FieldRef,
   BaseSingleInputFieldProps,
   InferError,
+  PickerOwnerState,
 } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 import { PickersProvider } from '../../components/PickersProvider';
@@ -133,7 +134,7 @@ export const useDesktopPicker = <
         InferError<TExternalProps>
       >
     >,
-    TExternalProps
+    PickerOwnerState<TDate | null>
   >({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
@@ -156,7 +157,7 @@ export const useDesktopPicker = <
       focused: open ? true : undefined,
       ...(inputRef ? { inputRef } : {}),
     },
-    ownerState: props,
+    ownerState,
   });
 
   // TODO: Move to `useSlotProps` when /~https://github.com/mui/material-ui/pull/35088 will be merged

packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts

@@ -9,7 +9,7 @@ import {
   BaseNonRangeNonStaticPickerProps,
 } from '../../models/props/basePickerProps';
 import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper';
-import { UsePickerParams, UsePickerProps } from '../usePicker';
+import { UsePickerParams } from '../usePicker';
 import {
   BaseSingleInputFieldProps,
   FieldSection,
@@ -87,7 +87,7 @@ export interface ExportedUseDesktopPickerSlotProps<
       unknown
     >,
     {},
-    UsePickerProps<TDate | null, TDate, any, any, any, any>
+    PickerOwnerState<TDate | null>
   >;
   textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
   inputAdornment?: Partial<InputAdornmentProps>;

packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx

@@ -17,6 +17,7 @@ import {
   PickerValidDate,
   FieldRef,
   InferError,
+  PickerOwnerState,
 } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 import { PickersProvider } from '../../components/PickersProvider';
@@ -74,6 +75,7 @@ export const useMobilePicker = <
     renderCurrentView,
     fieldProps: pickerFieldProps,
     contextValue,
+    ownerState,
   } = usePicker<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>({
     ...pickerParams,
     props,
@@ -96,7 +98,7 @@ export const useMobilePicker = <
         InferError<TExternalProps>
       >
     >,
-    TExternalProps
+    PickerOwnerState<TDate | null>
   >({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
@@ -121,7 +123,7 @@ export const useMobilePicker = <
       name,
       ...(inputRef ? { inputRef } : {}),
     },
-    ownerState: props,
+    ownerState,
   });
 
   // TODO: Move to `useSlotProps` when /~https://github.com/mui/material-ui/pull/35088 will be merged