[pickers] Use the new ownerState object on the PickersTextField compo…

…nent
mui · Dec 12, 2024 · 3618e05 · 3618e05
1 parent 99ce15c
commit 3618e05
Show file tree

Hide file tree

Showing 17 changed files with 316 additions and 234 deletions.
diff --git a/packages/x-date-pickers/src/PickersSectionList/PickersSectionList.tsx b/packages/x-date-pickers/src/PickersSectionList/PickersSectionList.tsx
@@ -11,6 +11,7 @@ import {
   PickersSectionListClasses,
 } from './pickersSectionListClasses';
 import { PickersSectionListProps, PickersSectionElement } from './PickersSectionList.types';
+import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
 
 export const PickersSectionListRoot = styled('div', {
   name: 'MuiPickersSectionList',
@@ -43,9 +44,7 @@ export const PickersSectionListSectionContent = styled('span', {
   outline: 'none',
 });
 
-const useUtilityClasses = (ownerState: PickersSectionListProps) => {
-  const { classes } = ownerState;
-
+const useUtilityClasses = (classes: Partial<PickersSectionListClasses> | undefined) => {
   const slots = {
     root: ['root'],
     section: ['section'],
@@ -62,14 +61,15 @@ interface PickersSectionProps extends Pick<PickersSectionListProps, 'slots' | 's
 
 function PickersSection(props: PickersSectionProps) {
   const { slots, slotProps, element, classes } = props;
+  const { ownerState } = usePickerPrivateContext();
 
   const Section = slots?.section ?? PickersSectionListSection;
   const sectionProps = useSlotProps({
     elementType: Section,
     externalSlotProps: slotProps?.section,
     externalForwardedProps: element.container,
     className: classes.section,
-    ownerState: {},
+    ownerState,
   });
 
   const SectionContent = slots?.sectionContent ?? PickersSectionListSectionContent;
@@ -81,21 +81,21 @@ function PickersSection(props: PickersSectionProps) {
       suppressContentEditableWarning: true,
     },
     className: classes.sectionContent,
-    ownerState: {},
+    ownerState,
   });
 
   const SectionSeparator = slots?.sectionSeparator ?? PickersSectionListSectionSeparator;
   const sectionSeparatorBeforeProps = useSlotProps({
     elementType: SectionSeparator,
     externalSlotProps: slotProps?.sectionSeparator,
     externalForwardedProps: element.before,
-    ownerState: { position: 'before' },
+    ownerState: { ...ownerState, separatorPosition: 'before' },
   });
   const sectionSeparatorAfterProps = useSlotProps({
     elementType: SectionSeparator,
     externalSlotProps: slotProps?.sectionSeparator,
     externalForwardedProps: element.after,
-    ownerState: { position: 'after' },
+    ownerState: { ...ownerState, separatorPosition: 'after' },
   });
 
   return (
@@ -151,9 +151,10 @@ const PickersSectionList = React.forwardRef(function PickersSectionList(
     name: 'MuiPickersSectionList',
   });
 
-  const { slots, slotProps, elements, sectionListRef, ...other } = props;
+  const { slots, slotProps, elements, sectionListRef, classes: classesProp, ...other } = props;
 
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
+  const { ownerState } = usePickerPrivateContext();
 
   const rootRef = React.useRef<HTMLDivElement>(null);
   const handleRootRef = useForkRef(ref, rootRef);
@@ -216,7 +217,7 @@ const PickersSectionList = React.forwardRef(function PickersSectionList(
       suppressContentEditableWarning: true,
     },
     className: classes.root,
-    ownerState: {},
+    ownerState,
   });
 
   return (

diff --git a/packages/x-date-pickers/src/PickersSectionList/PickersSectionList.types.ts b/packages/x-date-pickers/src/PickersSectionList/PickersSectionList.types.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import { PickersSectionListClasses } from './pickersSectionListClasses';
+import { PickerOwnerState } from '../models';
 
 export interface PickersSectionListSlots {
   root: React.ElementType;
@@ -9,11 +10,20 @@ export interface PickersSectionListSlots {
   sectionContent: React.ElementType;
 }
 
+export interface PickerSectionSeparatorOwnerState extends PickerOwnerState {
+  /**
+   * The position of the separator.
+   * `before` if the separator is rendered before the section content.
+   * `after` if the separator is rendered after the section content.
+   */
+  separatorPosition: 'before' | 'after';
+}
+
 export interface PickersSectionListSlotProps {
-  root?: SlotComponentProps<'div', {}, {}>;
-  section?: SlotComponentProps<'span', {}, {}>;
-  sectionSeparator?: SlotComponentProps<'span', {}, { position: 'before' | 'after' }>;
-  sectionContent?: SlotComponentProps<'span', {}, {}>;
+  root?: SlotComponentProps<'div', {}, PickerOwnerState>;
+  section?: SlotComponentProps<'span', {}, PickerOwnerState>;
+  sectionSeparator?: SlotComponentProps<'span', {}, PickerSectionSeparatorOwnerState>;
+  sectionContent?: SlotComponentProps<'span', {}, PickerOwnerState>;
 }
 
 export interface PickersSectionElement {

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
@@ -1,19 +1,20 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { FormControlState, useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
 import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import {
   pickersFilledInputClasses,
   getPickersFilledInputUtilityClass,
+  PickersFilledInputClasses,
 } from './pickersFilledInputClasses';
 import { PickersInputBaseProps, PickersInputBase } from '../PickersInputBase';
 import {
   PickersInputBaseRoot,
   PickersInputBaseSectionsContainer,
 } from '../PickersInputBase/PickersInputBase';
+import { PickersTextFieldOwnerState } from '../PickersTextField.types';
 
 export interface PickersFilledInputProps extends PickersInputBaseProps {
   disableUnderline?: boolean;
@@ -25,7 +26,7 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
   shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'disableUnderline',
-})<{ ownerState: OwnerStateType }>(({ theme }) => {
+})<{ ownerState: PickersTextFieldOwnerState }>(({ theme }) => {
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
@@ -58,7 +59,7 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
         // @ts-ignore
         .filter((key) => (theme.vars ?? theme).palette[key].main)
         .map((color) => ({
-          props: { color, disableUnderline: false },
+          props: { inputColor: color, disableUnderline: false },
           style: {
             '&::after': {
               // @ts-ignore
@@ -120,13 +121,13 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
         },
       },
       {
-        props: ({ startAdornment }: OwnerStateType) => !!startAdornment,
+        props: { isInputAdornedStart: true },
         style: {
           paddingLeft: 12,
         },
       },
       {
-        props: ({ endAdornment }: OwnerStateType) => !!endAdornment,
+        props: { isInputAdornedEnd: true },
         style: {
           paddingRight: 12,
         },
@@ -139,27 +140,28 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
   name: 'MuiPickersFilledInput',
   slot: 'sectionsContainer',
   overridesResolver: (props, styles) => styles.sectionsContainer,
-})<{ ownerState: OwnerStateType }>({
+  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'hiddenLabel',
+})<{ ownerState: PickersTextFieldOwnerState }>({
   paddingTop: 25,
   paddingRight: 12,
   paddingBottom: 8,
   paddingLeft: 12,
   variants: [
     {
-      props: { size: 'small' },
+      props: { inputSize: 'small' },
       style: {
         paddingTop: 21,
         paddingBottom: 4,
       },
     },
     {
-      props: ({ startAdornment }: OwnerStateType) => !!startAdornment,
+      props: { isInputAdornedStart: true },
       style: {
         paddingLeft: 0,
       },
     },
     {
-      props: ({ endAdornment }: OwnerStateType) => !!endAdornment,
+      props: { isInputAdornedEnd: true },
       style: {
         paddingRight: 0,
       },
@@ -172,7 +174,7 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
       },
     },
     {
-      props: { hiddenLabel: true, size: 'small' },
+      props: { hiddenLabel: true, inputSize: 'small' },
       style: {
         paddingTop: 8,
         paddingBottom: 9,
@@ -181,11 +183,9 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
   ],
 });
 
-const useUtilityClasses = (ownerState: OwnerStateType) => {
-  const { classes, disableUnderline } = ownerState;
-
+const useUtilityClasses = (classes: Partial<PickersFilledInputClasses> | undefined) => {
   const slots = {
-    root: ['root', !disableUnderline && 'underline'],
+    root: ['root'],
     input: ['input'],
   };
 
@@ -197,10 +197,6 @@ const useUtilityClasses = (ownerState: OwnerStateType) => {
   };
 };
 
-interface OwnerStateType
-  extends FormControlState,
-    Omit<PickersFilledInputProps, keyof FormControlState> {}
-
 /**
  * @ignore - internal component.
  */
@@ -217,24 +213,18 @@ const PickersFilledInput = React.forwardRef(function PickersFilledInput(
     label,
     autoFocus,
     disableUnderline = false,
+    hiddenLabel = false,
+    classes: classesProp,
     ownerState: ownerStateProp,
     ...other
   } = props;
 
-  const muiFormControl = useFormControl();
-
-  const ownerState = {
-    ...props,
-    ...ownerStateProp,
-    ...muiFormControl,
-    color: muiFormControl?.color || 'primary',
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
 
   return (
     <PickersInputBase
       slots={{ root: PickersFilledInputRoot, input: PickersFilledSectionsContainer }}
-      slotProps={{ root: { disableUnderline } }}
+      slotProps={{ root: { disableUnderline }, input: { hiddenLabel } }}
       {...other}
       label={label}
       classes={classes}

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/pickersFilledInputClasses.ts b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/pickersFilledInputClasses.ts
@@ -2,10 +2,7 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { PickersInputBaseClasses, pickersInputBaseClasses } from '../PickersInputBase';
 
-export interface PickersFilledInputClasses extends PickersInputBaseClasses {
-  /** Styles applied to the root element unless `disableUnderline={true}`. */
-  underline?: string;
-}
+export interface PickersFilledInputClasses extends PickersInputBaseClasses {}
 
 export type PickersFilledInputClassKey = keyof PickersFilledInputClasses;
 

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
@@ -1,12 +1,17 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { FormControlState, useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { pickersInputClasses, getPickersInputUtilityClass } from './pickersInputClasses';
+import {
+  pickersInputClasses,
+  getPickersInputUtilityClass,
+  PickersInputClasses,
+} from './pickersInputClasses';
 import { PickersInputBase, PickersInputBaseProps } from '../PickersInputBase';
 import { PickersInputBaseRoot } from '../PickersInputBase/PickersInputBase';
+import { PickersTextFieldOwnerState } from '../PickersTextField.types';
 
 export interface PickersInputProps extends PickersInputBaseProps {
   disableUnderline?: boolean;
@@ -16,7 +21,8 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: OwnerStateType }>(({ theme }) => {
+  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'disableUnderline',
+})<{ ownerState: PickersTextFieldOwnerState }>(({ theme }) => {
   const light = theme.palette.mode === 'light';
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   if (theme.vars) {
@@ -31,7 +37,7 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
         // @ts-ignore
         .filter((key) => (theme.vars ?? theme).palette[key].main)
         .map((color) => ({
-          props: { color },
+          props: { inputColor: color },
           style: {
             '&::after': {
               // @ts-ignore
@@ -96,11 +102,9 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
   };
 });
 
-const useUtilityClasses = (ownerState: OwnerStateType) => {
-  const { classes, disableUnderline } = ownerState;
-
+const useUtilityClasses = (classes: Partial<PickersInputClasses> | undefined) => {
   const slots = {
-    root: ['root', !disableUnderline && 'underline'],
+    root: ['root'],
     input: ['input'],
   };
 
@@ -112,10 +116,6 @@ const useUtilityClasses = (ownerState: OwnerStateType) => {
   };
 };
 
-interface OwnerStateType
-  extends FormControlState,
-    Omit<PickersInputProps, keyof FormControlState> {}
-
 /**
  * @ignore - internal component.
  */
@@ -133,23 +133,16 @@ const PickersInput = React.forwardRef(function PickersInput(
     autoFocus,
     disableUnderline = false,
     ownerState: ownerStateProp,
+    classes: classesProp,
     ...other
   } = props;
 
-  const muiFormControl = useFormControl();
-
-  const ownerState = {
-    ...props,
-    ...ownerStateProp,
-    ...muiFormControl,
-    disableUnderline,
-    color: muiFormControl?.color || 'primary',
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
 
   return (
     <PickersInputBase
       slots={{ root: PickersInputRoot }}
+      slotProps={{ root: { disableUnderline } }}
       {...other}
       label={label}
       classes={classes}

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInput/pickersInputClasses.ts b/packages/x-date-pickers/src/PickersTextField/PickersInput/pickersInputClasses.ts
@@ -6,10 +6,7 @@ import {
   PickersInputBaseClassKey,
 } from '../PickersInputBase';
 
-export interface PickersInputClasses extends PickersInputBaseClasses {
-  /** Styles applied to the root element unless `disableUnderline={true}`. */
-  underline: string;
-}
+export interface PickersInputClasses extends PickersInputBaseClasses {}
 
 export type PickersInputClassKey = keyof PickersInputClasses;