[pickers] Use the new ownerState object in all the field components (…

…#15510)
mui · Nov 28, 2024 · 511ad9f · 511ad9f
1 parent 0645394
commit 511ad9f
Show file tree

Hide file tree

Showing 27 changed files with 226 additions and 188 deletions.
diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
@@ -12,7 +12,10 @@ import {
   unstable_generateUtilityClass as generateUtilityClass,
   unstable_generateUtilityClasses as generateUtilityClasses,
 } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+  convertFieldResponseIntoMuiTextFieldProps,
+  useFieldOwnerState,
+} from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import {
@@ -30,8 +33,7 @@ export const multiInputDateRangeFieldClasses: MultiInputRangeFieldClasses = gene
 export const getMultiInputDateRangeFieldUtilityClass = (slot: string) =>
   generateUtilityClass('MuiMultiInputDateRangeField', slot);
 
-const useUtilityClasses = (ownerState: MultiInputDateRangeFieldProps<any>) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<MultiInputRangeFieldClasses> | undefined) => {
   const slots = {
     root: ['root'],
     separator: ['separator'],
@@ -95,11 +97,12 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
     unstableStartFieldRef,
     unstableEndFieldRef,
     className,
+    classes: classesProp,
     ...otherForwardedProps
   } = forwardedProps;
 
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useFieldOwnerState(internalProps);
+  const classes = useUtilityClasses(classesProp);
 
   const Root = slots?.root ?? MultiInputDateRangeFieldRoot;
   const rootProps = useSlotProps({
@@ -118,7 +121,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
     (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const startTextFieldProps = useSlotProps<
     typeof TextField,
-    MultiInputDateRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>['textField'],
+    MultiInputDateRangeFieldSlotProps['textField'],
     {},
     MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
       position: RangePosition;
@@ -130,7 +133,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
   });
   const endTextFieldProps = useSlotProps<
     typeof TextField,
-    MultiInputDateRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>['textField'],
+    MultiInputDateRangeFieldSlotProps['textField'],
     {},
     MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
       position: RangePosition;

diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts
@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import {
   MultiInputFieldRefs,
@@ -53,7 +55,7 @@ export interface MultiInputDateRangeFieldProps<
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: MultiInputDateRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+  slotProps?: MultiInputDateRangeFieldSlotProps;
 }
 
 export interface MultiInputDateRangeFieldSlots {
@@ -65,7 +67,7 @@ export interface MultiInputDateRangeFieldSlots {
   /**
    * Form control with an input to render a date.
    * It is rendered twice: once for the start date and once for the end date.
-   * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+   * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
    */
   textField?: React.ElementType;
   /**
@@ -75,24 +77,14 @@ export interface MultiInputDateRangeFieldSlots {
   separator?: React.ElementType;
 }
 
-export interface MultiInputDateRangeFieldSlotProps<
-  TEnableAccessibleFieldDOMStructure extends boolean,
-> {
-  root?: SlotComponentProps<
-    typeof Stack,
-    {},
-    MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>
-  >;
-  textField?: SlotComponentProps<
-    typeof TextField,
+export interface MultiInputDateRangeFieldSlotProps {
+  root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<
+    PickersTextFieldProps | TextFieldProps,
     {},
-    MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+    FieldOwnerState & {
       position: RangePosition;
     }
   >;
-  separator?: SlotComponentProps<
-    typeof Typography,
-    {},
-    MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>
-  >;
+  separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }
diff --git a/...ages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/...ages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx
@@ -12,7 +12,10 @@ import {
   unstable_generateUtilityClass as generateUtilityClass,
   unstable_generateUtilityClasses as generateUtilityClasses,
 } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+  convertFieldResponseIntoMuiTextFieldProps,
+  useFieldOwnerState,
+} from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import {
@@ -28,8 +31,7 @@ export const multiInputDateTimeRangeFieldClasses: MultiInputRangeFieldClasses =
 export const getMultiInputDateTimeRangeFieldUtilityClass = (slot: string) =>
   generateUtilityClass('MuiMultiInputDateTimeRangeField', slot);
 
-const useUtilityClasses = (ownerState: MultiInputDateTimeRangeFieldProps<any>) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<MultiInputRangeFieldClasses> | undefined) => {
   const slots = {
     root: ['root'],
     separator: ['separator'],
@@ -93,11 +95,12 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
     unstableStartFieldRef,
     unstableEndFieldRef,
     className,
+    classes: classesProp,
     ...otherForwardedProps
   } = forwardedProps;
 
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useFieldOwnerState(themeProps);
+  const classes = useUtilityClasses(classesProp);
 
   const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
   const rootProps = useSlotProps({
@@ -116,7 +119,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
     (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const startTextFieldProps = useSlotProps<
     typeof TextField,
-    MultiInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>['textField'],
+    MultiInputDateTimeRangeFieldSlotProps['textField'],
     {},
     MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
       position: RangePosition;
@@ -128,7 +131,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
   });
   const endTextFieldProps = useSlotProps<
     typeof TextField,
-    MultiInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>['textField'],
+    MultiInputDateTimeRangeFieldSlotProps['textField'],
     {},
     MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
       position: RangePosition;

diff --git a/...x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts b/...x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts
@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { UseDateTimeRangeFieldProps } from '../internals/models/dateTimeRange';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
@@ -52,7 +54,7 @@ export interface MultiInputDateTimeRangeFieldProps<
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: MultiInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+  slotProps?: MultiInputDateTimeRangeFieldSlotProps;
 }
 
 export interface MultiInputDateTimeRangeFieldSlots {
@@ -74,24 +76,14 @@ export interface MultiInputDateTimeRangeFieldSlots {
   separator?: React.ElementType;
 }
 
-export interface MultiInputDateTimeRangeFieldSlotProps<
-  TEnableAccessibleFieldDOMStructure extends boolean,
-> {
-  root?: SlotComponentProps<
-    typeof Stack,
-    {},
-    MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>
-  >;
-  textField?: SlotComponentProps<
-    typeof TextField,
+export interface MultiInputDateTimeRangeFieldSlotProps {
+  root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<
+    PickersTextFieldProps | TextFieldProps,
     {},
-    MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+    FieldOwnerState & {
       position: RangePosition;
     }
   >;
-  separator?: SlotComponentProps<
-    typeof Typography,
-    {},
-    MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>
-  >;
+  separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }
diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx
@@ -12,7 +12,10 @@ import {
   unstable_generateUtilityClass as generateUtilityClass,
   unstable_generateUtilityClasses as generateUtilityClasses,
 } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+  convertFieldResponseIntoMuiTextFieldProps,
+  useFieldOwnerState,
+} from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import {
@@ -30,8 +33,7 @@ export const multiInputTimeRangeFieldClasses: MultiInputRangeFieldClasses = gene
 export const getMultiInputTimeRangeFieldUtilityClass = (slot: string) =>
   generateUtilityClass('MuiMultiInputTimeRangeField', slot);
 
-const useUtilityClasses = (ownerState: MultiInputTimeRangeFieldProps<any>) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<MultiInputRangeFieldClasses> | undefined) => {
   const slots = {
     root: ['root'],
     separator: ['separator'],
@@ -95,11 +97,12 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
     unstableStartFieldRef,
     unstableEndFieldRef,
     className,
+    classes: classesProp,
     ...otherForwardedProps
   } = forwardedProps;
 
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useFieldOwnerState(themeProps);
+  const classes = useUtilityClasses(classesProp);
 
   const Root = slots?.root ?? MultiInputTimeRangeFieldRoot;
   const rootProps = useSlotProps({
@@ -118,7 +121,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
     (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const startTextFieldProps = useSlotProps<
     typeof TextField,
-    MultiInputTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>['textField'],
+    MultiInputTimeRangeFieldSlotProps['textField'],
     {},
     MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
       position: RangePosition;
@@ -131,7 +134,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
 
   const endTextFieldProps = useSlotProps<
     typeof TextField,
-    MultiInputTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>['textField'],
+    MultiInputTimeRangeFieldSlotProps['textField'],
     {},
     MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
       position: RangePosition;

diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts
@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { UseTimeRangeFieldProps } from '../internals/models/timeRange';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
@@ -49,7 +51,7 @@ export interface MultiInputTimeRangeFieldProps<
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: MultiInputTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+  slotProps?: MultiInputTimeRangeFieldSlotProps;
 }
 
 export interface MultiInputTimeRangeFieldSlots {
@@ -71,24 +73,14 @@ export interface MultiInputTimeRangeFieldSlots {
   separator?: React.ElementType;
 }
 
-export interface MultiInputTimeRangeFieldSlotProps<
-  TEnableAccessibleFieldDOMStructure extends boolean,
-> {
-  root?: SlotComponentProps<
-    typeof Stack,
-    {},
-    MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>
-  >;
-  textField?: SlotComponentProps<
-    typeof TextField,
+export interface MultiInputTimeRangeFieldSlotProps {
+  root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<
+    PickersTextFieldProps | TextFieldProps,
     {},
-    MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+    FieldOwnerState & {
       position: RangePosition;
     }
   >;
-  separator?: SlotComponentProps<
-    typeof Typography,
-    {},
-    MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>
-  >;
+  separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx
@@ -6,7 +6,10 @@ import { useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { refType } from '@mui/utils';
 import { useClearableField } from '@mui/x-date-pickers/hooks';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+  convertFieldResponseIntoMuiTextFieldProps,
+  useFieldOwnerState,
+} from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { SingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
 import { useSingleInputDateRangeField } from './useSingleInputDateRangeField';
@@ -40,7 +43,7 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange
 
   const { slots, slotProps, InputProps, inputProps, ...other } = themeProps;
 
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
 
   const TextField =
     slots?.textField ??