[pickers] Use the new ownerState object on the `<PickersTextField /…

…>` component (mui#15863)
lauri865 · Dec 19, 2024 · 76d0391 · 76d0391
1 parent 6ab5950
commit 76d0391
Show file tree

Hide file tree

Showing 17 changed files with 364 additions and 235 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,31 +1,40 @@
 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 { PickerTextFieldOwnerState } from '../PickersTextField.types';
+import { usePickerTextFieldOwnerState } from '../usePickerTextFieldOwnerState';
 
 export interface PickersFilledInputProps extends PickersInputBaseProps {
   disableUnderline?: boolean;
   hiddenLabel?: boolean;
 }
 
+export interface PickerFilledInputOwnerState extends PickerTextFieldOwnerState {
+  /**
+   * `true` if the input  has an underline, `false` otherwise.
+   */
+  inputHasUnderline: boolean;
+}
+
 const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersFilledInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
   shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'disableUnderline',
-})<{ ownerState: OwnerStateType }>(({ theme }) => {
+})<{ ownerState: PickerFilledInputOwnerState }>(({ 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 +67,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 +129,13 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
         },
       },
       {
-        props: ({ startAdornment }: OwnerStateType) => !!startAdornment,
+        props: { hasStartAdornment: true },
         style: {
           paddingLeft: 12,
         },
       },
       {
-        props: ({ endAdornment }: OwnerStateType) => !!endAdornment,
+        props: { hasEndAdornment: true },
         style: {
           paddingRight: 12,
         },
@@ -139,27 +148,28 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
   name: 'MuiPickersFilledInput',
   slot: 'sectionsContainer',
   overridesResolver: (props, styles) => styles.sectionsContainer,
-})<{ ownerState: OwnerStateType }>({
+  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'hiddenLabel',
+})<{ ownerState: PickerFilledInputOwnerState }>({
   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: { hasStartAdornment: true },
       style: {
         paddingLeft: 0,
       },
     },
     {
-      props: ({ endAdornment }: OwnerStateType) => !!endAdornment,
+      props: { hasEndAdornment: true },
       style: {
         paddingRight: 0,
       },
@@ -172,7 +182,7 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
       },
     },
     {
-      props: { hiddenLabel: true, size: 'small' },
+      props: { hiddenLabel: true, inputSize: 'small' },
       style: {
         paddingTop: 8,
         paddingBottom: 9,
@@ -181,11 +191,14 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
   ],
 });
 
-const useUtilityClasses = (ownerState: OwnerStateType) => {
-  const { classes, disableUnderline } = ownerState;
+const useUtilityClasses = (
+  classes: Partial<PickersFilledInputClasses> | undefined,
+  ownerState: PickerFilledInputOwnerState,
+) => {
+  const { inputHasUnderline } = ownerState;
 
   const slots = {
-    root: ['root', !disableUnderline && 'underline'],
+    root: ['root', inputHasUnderline && 'underline'],
     input: ['input'],
   };
 
@@ -197,10 +210,6 @@ const useUtilityClasses = (ownerState: OwnerStateType) => {
   };
 };
 
-interface OwnerStateType
-  extends FormControlState,
-    Omit<PickersFilledInputProps, keyof FormControlState> {}
-
 /**
  * @ignore - internal component.
  */
@@ -217,28 +226,27 @@ const PickersFilledInput = React.forwardRef(function PickersFilledInput(
     label,
     autoFocus,
     disableUnderline = false,
-    ownerState: ownerStateProp,
+    hiddenLabel = false,
+    classes: classesProp,
     ...other
   } = props;
 
-  const muiFormControl = useFormControl();
-
-  const ownerState = {
-    ...props,
-    ...ownerStateProp,
-    ...muiFormControl,
-    color: muiFormControl?.color || 'primary',
+  const pickerTextFieldOwnerState = usePickerTextFieldOwnerState();
+  const ownerState: PickerFilledInputOwnerState = {
+    ...pickerTextFieldOwnerState,
+    inputHasUnderline: !disableUnderline,
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   return (
     <PickersInputBase
       slots={{ root: PickersFilledInputRoot, input: PickersFilledSectionsContainer }}
-      slotProps={{ root: { disableUnderline } }}
+      slotProps={{ root: { disableUnderline }, input: { hiddenLabel } }}
       {...other}
       label={label}
       classes={classes}
       ref={ref as any}
+      ownerState={ownerState}
     />
   );
 });

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/pickersFilledInputClasses.ts b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/pickersFilledInputClasses.ts
@@ -4,9 +4,8 @@ import { PickersInputBaseClasses, pickersInputBaseClasses } from '../PickersInpu
 
 export interface PickersFilledInputClasses extends PickersInputBaseClasses {
   /** Styles applied to the root element unless `disableUnderline={true}`. */
-  underline?: string;
+  underline: string;
 }
-
 export type PickersFilledInputClassKey = keyof PickersFilledInputClasses;
 
 export function getPickersFilledInputUtilityClass(slot: string) {