[pickers] Move more field props to the context

docs/data/date-pickers/calendar-systems/AdapterHijri.js

@@ -24,7 +24,7 @@ const cacheRtl = createCache({
 
 function ButtonDateTimeField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { ownerState, label, focused, name, ...other } = forwardedProps;
+  const { focused, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const parsedFormat = useParsedFormat();
@@ -45,10 +45,12 @@ function ButtonDateTimeField(props) {
       {...other}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
+      className={pickerContext.rootClassName}
+      sx={pickerContext.rootSx}
       ref={pickerContext.triggerRef}
       onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
-      {label ? `${label}: ${valueStr}` : valueStr}
+      {pickerContext.label ? `${pickerContext.label}: ${valueStr}` : valueStr}
     </Button>
   );
 }

docs/data/date-pickers/calendar-systems/AdapterHijri.tsx

@@ -28,7 +28,7 @@ const cacheRtl = createCache({
 
 function ButtonDateTimeField(props: DateTimePickerFieldProps) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { ownerState, label, focused, name, ...other } = forwardedProps;
+  const { focused, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const parsedFormat = useParsedFormat();
@@ -49,10 +49,12 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
       {...other}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
+      className={pickerContext.rootClassName}
+      sx={pickerContext.rootSx}
       ref={pickerContext.triggerRef}
       onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
-      {label ? `${label}: ${valueStr}` : valueStr}
+      {pickerContext.label ? `${pickerContext.label}: ${valueStr}` : valueStr}
     </Button>
   );
 }

docs/data/date-pickers/custom-field/BrowserV7Field.js

@@ -28,7 +28,8 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
   },
 );
 
-const BrowserDateField = React.forwardRef((props, ref) => {
+function BrowserDateField(props) {
+  console.log('AA', props);
   const fieldResponse = useDateField(props);
 
   const {
@@ -52,8 +53,6 @@ const BrowserDateField = React.forwardRef((props, ref) => {
     // Can be passed to the button that clears the value
     onClear,
     clearable,
-    // Can be used to render a custom label
-    label,
     // Can be used to style the component
     areAllSectionsEmpty,
     disabled,
@@ -65,10 +64,10 @@ const BrowserDateField = React.forwardRef((props, ref) => {
   } = fieldResponse;
 
   const pickerContext = usePickerContext();
-  const handleRef = useForkRef(pickerContext.triggerRef, ref);
+  const handleRef = useForkRef(pickerContext.triggerRef, pickerContext.rootRef);
 
   return (
-    <BrowserFieldRoot ref={handleRef} {...other}>
+    <BrowserFieldRoot {...other} ref={handleRef}>
       <BrowserFieldContent>
         <PickersSectionList
           elements={elements}
@@ -91,17 +90,13 @@ const BrowserDateField = React.forwardRef((props, ref) => {
       </IconButton>
     </BrowserFieldRoot>
   );
-});
+}
 
-const BrowserDatePicker = React.forwardRef((props, ref) => {
+function BrowserDatePicker(props) {
   return (
-    <DatePicker
-      ref={ref}
-      {...props}
-      slots={{ field: BrowserDateField, ...props.slots }}
-    />
+    <DatePicker {...props} slots={{ field: BrowserDateField, ...props.slots }} />
   );
-});
+}
 
 export default function BrowserV7Field() {
   return (

docs/data/date-pickers/custom-field/BrowserV7Field.tsx

@@ -32,91 +32,81 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
   },
 );
 
-const BrowserDateField = React.forwardRef(
-  (props: DatePickerFieldProps, ref: React.Ref<HTMLDivElement>) => {
-    const fieldResponse = useDateField<true, typeof props>(props);
+function BrowserDateField(props: DatePickerFieldProps) {
+  console.log('AA', props);
+  const fieldResponse = useDateField<true, typeof props>(props);
 
-    const {
-      // Should be ignored
-      enableAccessibleFieldDOMStructure,
+  const {
+    // Should be ignored
+    enableAccessibleFieldDOMStructure,
 
-      // Should be passed to the PickersSectionList component
-      elements,
-      sectionListRef,
-      contentEditable,
-      onFocus,
-      onBlur,
-      tabIndex,
-      onInput,
-      onPaste,
-      onKeyDown,
+    // Should be passed to the PickersSectionList component
+    elements,
+    sectionListRef,
+    contentEditable,
+    onFocus,
+    onBlur,
+    tabIndex,
+    onInput,
+    onPaste,
+    onKeyDown,
 
-      // Should be passed to the button that opens the picker
-      openPickerAriaLabel,
+    // Should be passed to the button that opens the picker
+    openPickerAriaLabel,
 
-      // Can be passed to a hidden <input /> element
-      onChange,
-      value,
+    // Can be passed to a hidden <input /> element
+    onChange,
+    value,
 
-      // Can be passed to the button that clears the value
-      onClear,
-      clearable,
+    // Can be passed to the button that clears the value
+    onClear,
+    clearable,
 
-      // Can be used to render a custom label
-      label,
+    // Can be used to style the component
+    areAllSectionsEmpty,
+    disabled,
+    readOnly,
+    focused,
+    error,
 
-      // Can be used to style the component
-      areAllSectionsEmpty,
-      disabled,
-      readOnly,
-      focused,
-      error,
+    // The rest can be passed to the root element
+    ...other
+  } = fieldResponse;
 
-      // The rest can be passed to the root element
-      ...other
-    } = fieldResponse;
+  const pickerContext = usePickerContext();
+  const handleRef = useForkRef(pickerContext.triggerRef, pickerContext.rootRef);
 
-    const pickerContext = usePickerContext();
-    const handleRef = useForkRef(pickerContext.triggerRef, ref);
-
-    return (
-      <BrowserFieldRoot ref={handleRef} {...other}>
-        <BrowserFieldContent>
-          <PickersSectionList
-            elements={elements}
-            sectionListRef={sectionListRef}
-            contentEditable={contentEditable}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            tabIndex={tabIndex}
-            onInput={onInput}
-            onPaste={onPaste}
-            onKeyDown={onKeyDown}
-          />
-        </BrowserFieldContent>
-        <IconButton
-          onClick={() => pickerContext.setOpen((prev) => !prev)}
-          sx={{ marginLeft: 1.5 }}
-          aria-label={openPickerAriaLabel}
-        >
-          <CalendarIcon />
-        </IconButton>
-      </BrowserFieldRoot>
-    );
-  },
-);
+  return (
+    <BrowserFieldRoot {...other} ref={handleRef}>
+      <BrowserFieldContent>
+        <PickersSectionList
+          elements={elements}
+          sectionListRef={sectionListRef}
+          contentEditable={contentEditable}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          tabIndex={tabIndex}
+          onInput={onInput}
+          onPaste={onPaste}
+          onKeyDown={onKeyDown}
+        />
+      </BrowserFieldContent>
+      <IconButton
+        onClick={() => pickerContext.setOpen((prev) => !prev)}
+        sx={{ marginLeft: 1.5 }}
+        aria-label={openPickerAriaLabel}
+      >
+        <CalendarIcon />
+      </IconButton>
+    </BrowserFieldRoot>
+  );
+}
 
-const BrowserDatePicker = React.forwardRef(
-  (props: DatePickerProps, ref: React.Ref<HTMLDivElement>) => {
-    return (
-      <DatePicker
-        ref={ref}
-        {...props}
-        slots={{ field: BrowserDateField, ...props.slots }}
-      />
-    );
-  },
-);
+function BrowserDatePicker(props: DatePickerProps) {
+  return (
+    <DatePicker {...props} slots={{ field: BrowserDateField, ...props.slots }} />
+  );
+}
 
 export default function BrowserV7Field() {
   return (

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { styled } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
 import { unstable_useMultiInputRangeField as useMultiInputRangeField } from '@mui/x-date-pickers-pro/hooks';
@@ -26,7 +25,7 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
   },
 );
 
-const BrowserTextField = React.forwardRef((props, ref) => {
+function BrowserTextField(props) {
   const {
     // Should be ignored
     enableAccessibleFieldDOMStructure,
@@ -43,23 +42,19 @@ const BrowserTextField = React.forwardRef((props, ref) => {
     // Can be passed to a hidden <input /> element
     onChange,
     value,
-    // Can be used to render a custom label
-    label,
     // Can be used to style the component
     areAllSectionsEmpty,
     disabled,
     readOnly,
     focused,
     error,
-    InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {},
+    InputProps: { ref, startAdornment, endAdornment } = {},
     // The rest can be passed to the root element
     ...other
   } = props;
 
-  const handleRef = useForkRef(InputPropsRef, ref);
-
   return (
-    <BrowserFieldRoot ref={handleRef} {...other}>
+    <BrowserFieldRoot {...other} ref={ref}>
       {startAdornment}
       <BrowserFieldContent>
         <PickersSectionList
@@ -77,12 +72,13 @@ const BrowserTextField = React.forwardRef((props, ref) => {
       {endAdornment}
     </BrowserFieldRoot>
   );
-});
+}
 
-const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
+function BrowserMultiInputDateRangeField(props) {
+  const pickerContext = usePickerContext();
   const manager = useDateRangeManager();
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { slotProps, ownerState, ...otherForwardedProps } = forwardedProps;
+  const { slotProps, ...otherForwardedProps } = forwardedProps;
 
   const startTextFieldProps = useSlotProps({
     elementType: 'input',
@@ -105,7 +101,7 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
 
   return (
     <Stack
-      ref={ref}
+      ref={pickerContext.rootRef}
       spacing={2}
       direction="row"
       overflow="auto"
@@ -116,17 +112,16 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
       <BrowserTextField {...fieldResponse.endDate} />
     </Stack>
   );
-});
+}
 
-const BrowserDateRangePicker = React.forwardRef((props, ref) => {
+function BrowserDateRangePicker(props) {
   return (
     <DateRangePicker
-      ref={ref}
       {...props}
       slots={{ ...props.slots, field: BrowserMultiInputDateRangeField }}
     />
   );
-});
+}
 
 export default function BrowserV7MultiInputRangeField() {
   return (