[pickers] Add new properties to PickerOwnerState and `PickerContext…

…Value` (mui#15415)

packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx

@@ -9,7 +9,7 @@ import {
   ExportedBaseToolbarProps,
   useUtils,
   DateOrTimeViewWithMeridiem,
-  WrapperVariant,
+  PickerVariant,
   PickerRangeValue,
 } from '@mui/x-date-pickers/internals';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
@@ -43,7 +43,7 @@ export interface DateTimeRangePickerToolbarProps
     Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'>,
     ExportedDateTimeRangePickerToolbarProps {
   ampm?: boolean;
-  toolbarVariant?: WrapperVariant;
+  toolbarVariant?: PickerVariant;
 }
 
 export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToolbarProps {

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

@@ -97,7 +97,7 @@ export const useDesktopRangePicker = <
   >({
     ...pickerParams,
     props,
-    wrapperVariant: 'desktop',
+    variant: 'desktop',
     autoFocusView: false,
     fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
     localeText,
@@ -164,7 +164,7 @@ export const useDesktopRangePicker = <
     TEnableAccessibleFieldDOMStructure,
     InferError<TExternalProps>
   >({
-    wrapperVariant: 'desktop',
+    variant: 'desktop',
     fieldType,
     open,
     actions,

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

@@ -16,7 +16,7 @@ import { PickersInputLocaleText } from '@mui/x-date-pickers/locales';
 import {
   onSpaceOrEnter,
   UsePickerResponse,
-  WrapperVariant,
+  PickerVariant,
   DateOrTimeViewWithMeridiem,
   BaseSingleInputFieldProps,
   PickerRangeValue,
@@ -106,7 +106,7 @@ export interface UseEnrichedRangePickerFieldPropsParams<
       'open' | 'actions'
     >,
     UseRangePositionResponse {
-  wrapperVariant: WrapperVariant;
+  variant: PickerVariant;
   fieldType: FieldType;
   readOnly?: boolean;
   labelId?: string;
@@ -134,7 +134,7 @@ const useMultiInputFieldSlotProps = <
   TEnableAccessibleFieldDOMStructure extends boolean,
   TError,
 >({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -251,7 +251,7 @@ const useMultiInputFieldSlotProps = <
           // registering `onClick` listener on the root element as well to correctly handle cases where user is clicking on `label`
           // which has `pointer-events: none` and due to DOM structure the `input` does not catch the click event
           ...(!readOnly && !fieldProps.disabled && { onClick: openRangeStartSelection }),
-          ...(wrapperVariant === 'mobile' && { readOnly: true }),
+          ...(variant === 'mobile' && { readOnly: true }),
         };
         if (anchorRef) {
           InputProps = {
@@ -268,7 +268,7 @@ const useMultiInputFieldSlotProps = <
           // registering `onClick` listener on the root element as well to correctly handle cases where user is clicking on `label`
           // which has `pointer-events: none` and due to DOM structure the `input` does not catch the click event
           ...(!readOnly && !fieldProps.disabled && { onClick: openRangeEndSelection }),
-          ...(wrapperVariant === 'mobile' && { readOnly: true }),
+          ...(variant === 'mobile' && { readOnly: true }),
         };
         InputProps = resolvedComponentProps?.InputProps;
       }
@@ -312,7 +312,7 @@ const useSingleInputFieldSlotProps = <
   TEnableAccessibleFieldDOMStructure extends boolean,
   TError,
 >({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -423,7 +423,7 @@ const useSingleInputFieldSlotProps = <
     },
     focused: open ? true : undefined,
     ...(labelId != null && { id: labelId }),
-    ...(wrapperVariant === 'mobile' && { readOnly: true }),
+    ...(variant === 'mobile' && { readOnly: true }),
     // registering `onClick` listener on the root element as well to correctly handle cases where user is clicking on `label`
     // which has `pointer-events: none` and due to DOM structure the `input` does not catch the click event
     ...(!readOnly && !fieldProps.disabled && { onClick: openPicker }),

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

@@ -92,7 +92,7 @@ export const useMobileRangePicker = <
   >({
     ...pickerParams,
     props,
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     autoFocusView: true,
     fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
     localeText,
@@ -139,7 +139,7 @@ export const useMobileRangePicker = <
     TEnableAccessibleFieldDOMStructure,
     InferError<TExternalProps>
   >({
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     fieldType,
     open,
     actions,

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

@@ -55,7 +55,7 @@ export const useStaticRangePicker = <
       rangePosition,
       onRangePositionChange,
     },
-    wrapperVariant: displayStaticWrapperAs,
+    variant: displayStaticWrapperAs,
   });
 
   const Layout = slots?.layout ?? PickerStaticLayout;

packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -17,7 +17,7 @@ import {
   DateTimePickerToolbarClasses,
   getDateTimePickerToolbarUtilityClass,
 } from './dateTimePickerToolbarClasses';
-import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models';
+import { DateOrTimeViewWithMeridiem, PickerVariant } from '../internals/models';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
 import { formatMeridiem } from '../internals/utils/date-utils';
@@ -35,7 +35,7 @@ export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarP
 export interface DateTimePickerToolbarProps
   extends ExportedDateTimePickerToolbarProps,
     MakeOptional<BaseToolbarProps<PickerValidDate | null, DateOrTimeViewWithMeridiem>, 'view'> {
-  toolbarVariant?: WrapperVariant;
+  toolbarVariant?: PickerVariant;
   /**
    * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
    */

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

@@ -6,7 +6,7 @@ import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/usePicker/usePickerLayoutProps';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
-import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
+import { DateOrTimeViewWithMeridiem, PickerVariant } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
 import {
   ExportedPickersShortcutProps,
@@ -35,7 +35,7 @@ export interface ExportedPickersLayoutSlots<TValue, TView extends DateOrTimeView
 }
 
 export interface PickerLayoutOwnerState extends PickerOwnerState {
-  wrapperVariant: WrapperVariant;
+  wrapperVariant: PickerVariant;
   isLandscape: boolean;
 }
 

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { LocalizationProvider } from '../../LocalizationProvider';
+import { PickerOrientation, PickerVariant } from '../models';
 
 export const PickerContext = React.createContext<PickerContextValue | null>(null);
 
@@ -11,6 +12,8 @@ export const PickerPrivateContext = React.createContext<PickerPrivateContextValu
     isPickerReadOnly: false,
     isPickerValueEmpty: false,
     isPickerOpen: false,
+    pickerVariant: 'desktop',
+    pickerOrientation: 'portrait',
   },
 });
 
@@ -55,6 +58,31 @@ export interface PickerContextValue {
    * `true` if the picker is open, `false` otherwise.
    */
   open: boolean;
+  /**
+   * `true` if the picker is disabled, `false` otherwise.
+   */
+  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 />).
+   * Is equal to "mobile" when using a mobile picker (like <MobileDatePicker />).
+   * Is equal to "mobile" or "desktop" when using a responsive picker (like <DatePicker />) depending on the `desktopModeMediaQuery` prop.
+   * Is equal to "mobile" or "desktop" when using a static picker (like <StaticDatePicker />) depending on the `displayStaticWrapperAs` prop.
+   * Is always equal to "desktop" if the component you are accessing the ownerState from is not wrapped by a picker.
+   */
+  variant: PickerVariant;
+  /**
+   * The orientation of the picker.
+   * Is equal to "landscape" when the picker is in landscape orientation.
+   * Is equal to "portrait" when the picker is in portrait orientation.
+   * You can use the "orientation" on any picker component to force the orientation.
+   * Is always equal to "portrait" if the component you are accessing the ownerState from is not wrapped by a picker.
+   */
+  orientation: PickerOrientation;
 }
 export interface PickerPrivateContextValue {
   /**

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

@@ -76,7 +76,7 @@ export const useDesktopPicker = <
     localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'desktop',
+    variant: 'desktop',
   });
 
   const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;

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

@@ -70,7 +70,7 @@ export const useMobilePicker = <
     localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
   });
 
   const Field = slots.field;

packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts

@@ -5,7 +5,6 @@ import { usePickerViews } from './usePickerViews';
 import { usePickerLayoutProps } from './usePickerLayoutProps';
 import { FieldSection, InferError } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-import { usePickerOwnerState } from './usePickerOwnerState';
 import { usePickerProvider } from './usePickerProvider';
 
 export const usePicker = <
@@ -18,7 +17,7 @@ export const usePicker = <
   props,
   valueManager,
   valueType,
-  wrapperVariant,
+  variant,
   additionalViewProps,
   validator,
   autoFocusView,
@@ -44,7 +43,7 @@ export const usePicker = <
     props,
     valueManager,
     valueType,
-    wrapperVariant,
+    variant,
     validator,
   });
 
@@ -65,17 +64,18 @@ export const usePicker = <
 
   const pickerLayoutResponse = usePickerLayoutProps({
     props,
-    wrapperVariant,
+    variant,
     propsFromPickerValue: pickerValueResponse.layoutProps,
     propsFromPickerViews: pickerViewsResponse.layoutProps,
   });
 
-  const pickerOwnerState = usePickerOwnerState({ props, pickerValueResponse, valueManager });
-
   const providerProps = usePickerProvider({
+    props,
     pickerValueResponse,
-    ownerState: pickerOwnerState,
     localeText,
+    valueManager,
+    variant,
+    views: pickerViewsResponse.views,
   });
 
   return {
@@ -96,6 +96,6 @@ export const usePicker = <
     providerProps,
 
     // Picker owner state
-    ownerState: pickerOwnerState,
+    ownerState: providerProps.privateContextValue.ownerState,
   };
 };

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

@@ -10,10 +10,14 @@ import {
   UsePickerViewsResponse,
   UsePickerViewsBaseProps,
 } from './usePickerViews';
-import { UsePickerLayoutProps, UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
+import { UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
 import { FieldSection, PickerOwnerState } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-import { UsePickerProviderParameters, UsePickerProviderReturnValue } from './usePickerProvider';
+import {
+  UsePickerProviderParameters,
+  UsePickerProviderProps,
+  UsePickerProviderReturnValue,
+} from './usePickerProvider';
 
 /**
  * Props common to all picker headless implementations.
@@ -26,7 +30,7 @@ export interface UsePickerBaseProps<
   TAdditionalProps extends {},
 > extends UsePickerValueBaseProps<TValue, TError>,
     UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps>,
-    UsePickerLayoutProps {}
+    UsePickerProviderProps {}
 
 export interface UsePickerProps<
   TValue,
@@ -36,7 +40,7 @@ export interface UsePickerProps<
   TAdditionalProps extends {},
 > extends UsePickerValueProps<TValue, TError>,
     UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>,
-    UsePickerLayoutProps {}
+    UsePickerProviderProps {}
 
 export interface UsePickerParams<
   TValue,
@@ -46,7 +50,7 @@ export interface UsePickerParams<
   TAdditionalProps extends {},
 > extends Pick<
       UsePickerValueParams<TValue, TExternalProps>,
-      'valueManager' | 'valueType' | 'wrapperVariant' | 'validator'
+      'valueManager' | 'valueType' | 'variant' | 'validator'
     >,
     Pick<
       UsePickerViewParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>,
@@ -62,7 +66,7 @@ export interface UsePickerResponse<
   TSection extends FieldSection,
   TError,
 > extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>,
-    Omit<UsePickerViewsResponse<TView>, 'layoutProps'>,
+    Omit<UsePickerViewsResponse<TView>, 'layoutProps' | 'views'>,
     UsePickerLayoutPropsResponse<TValue, TView> {
   ownerState: PickerOwnerState;
   providerProps: UsePickerProviderReturnValue;

packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts

@@ -2,14 +2,13 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { useIsLandscape } from '../useIsLandscape';
 import { UsePickerValueLayoutResponse } from './usePickerValue.types';
 import { UsePickerViewsLayoutResponse } from './usePickerViews';
-import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../../models/common';
+import { DateOrTimeViewWithMeridiem, PickerVariant } from '../../models/common';
 import { FormProps } from '../../models';
 
 /**
  * Props used to create the layout of the views.
- * Those props are exposed on all the pickers.
  */
-export interface UsePickerLayoutProps extends FormProps {
+interface UsePickerLayoutProps extends FormProps {
   /**
    * Force rendering in particular orientation.
    */
@@ -24,7 +23,7 @@ export interface UsePickerLayoutPropsResponseLayoutProps<
     UsePickerLayoutProps {
   isLandscape: boolean;
   isRtl: boolean;
-  wrapperVariant: WrapperVariant;
+  wrapperVariant: PickerVariant;
   isValid: (value: TValue) => boolean;
 }
 
@@ -36,7 +35,7 @@ export interface UsePickerLayoutPropsParams<TValue, TView extends DateOrTimeView
   props: UsePickerLayoutProps;
   propsFromPickerValue: UsePickerValueLayoutResponse<TValue>;
   propsFromPickerViews: UsePickerViewsLayoutResponse<TView>;
-  wrapperVariant: WrapperVariant;
+  variant: PickerVariant;
 }
 
 /**
@@ -46,7 +45,7 @@ export const usePickerLayoutProps = <TValue, TView extends DateOrTimeViewWithMer
   props,
   propsFromPickerValue,
   propsFromPickerViews,
-  wrapperVariant,
+  variant,
 }: UsePickerLayoutPropsParams<TValue, TView>): UsePickerLayoutPropsResponse<TValue, TView> => {
   const { orientation } = props;
   const isLandscape = useIsLandscape(propsFromPickerViews.views, orientation);
@@ -57,7 +56,7 @@ export const usePickerLayoutProps = <TValue, TView extends DateOrTimeViewWithMer
     ...propsFromPickerValue,
     isLandscape,
     isRtl,
-    wrapperVariant,
+    wrapperVariant: variant,
     disabled: props.disabled,
     readOnly: props.readOnly,
   };