[pickers] Clean the internals and the public API of <PickersPopper />

docs/data/date-pickers/date-picker/examplesConfig.styling.tsx

@@ -272,7 +272,7 @@ export const datePickerExamples: PickersSubcomponentType = {
     slots: ['root'],
     moreInformation: <TextFieldMoreInfo />,
   },
-  PickersPopper: {
+  PickerPopper: {
     examples: {
       customTheme: {
         type: 'success',

docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

@@ -1589,6 +1589,39 @@ If you were using them, you need to replace them with the following code:
     +  extends BaseMultiInputPickersTextFieldProps<true> {}
     ```
 
+## Theme breaking change
+
+### `MuiPickersPopper`
+
+The theme entry have been renamed to have a coherent `Picker` / `Pickers` prefix:
+
+```diff
+ const theme = createTheme({
+   components: {
+-    MuiPickersPopper: {
++    MuiPickerPopper: {
+       styleOverrides: {},
+     },
+   },
+ });
+```
+
+The props that can be overridden have also been limited to the one that did not cause any bugs:
+
+```tsx
+const theme = createTheme({
+  components: {
+    MuiPickerPopper: {
+      defaultProps: {
+        // Those are now the props with support for theme default props
+        position: "bottom"
+        classes: { root: "custom-root-class}
+      },
+    },
+  },
+});
+```
+
 ## ✅ Rename `date-fns` adapter imports
 
 :::warning

docs/pages/x/api/date-pickers/date-picker.json

@@ -232,7 +232,7 @@
     {
       "name": "desktopPaper",
       "description": "Custom component for the paper rendered inside the desktop picker's Popper.",
-      "default": "PickersPopperPaper",
+      "default": "PickerPopperPaper",
       "class": null
     },
     {

docs/pages/x/api/date-pickers/date-range-picker.json

@@ -194,7 +194,7 @@
     {
       "name": "desktopPaper",
       "description": "Custom component for the paper rendered inside the desktop picker's Popper.",
-      "default": "PickersPopperPaper",
+      "default": "PickerPopperPaper",
       "class": null
     },
     {

docs/pages/x/api/date-pickers/date-time-picker.json

@@ -257,7 +257,7 @@
     {
       "name": "desktopPaper",
       "description": "Custom component for the paper rendered inside the desktop picker's Popper.",
-      "default": "PickersPopperPaper",
+      "default": "PickerPopperPaper",
       "class": null
     },
     {

docs/pages/x/api/date-pickers/date-time-range-picker.json

@@ -242,7 +242,7 @@
     {
       "name": "desktopPaper",
       "description": "Custom component for the paper rendered inside the desktop picker's Popper.",
-      "default": "PickersPopperPaper",
+      "default": "PickerPopperPaper",
       "class": null
     },
     {

docs/pages/x/api/date-pickers/desktop-date-picker.json

@@ -225,7 +225,7 @@
     {
       "name": "desktopPaper",
       "description": "Custom component for the paper rendered inside the desktop picker's Popper.",
-      "default": "PickersPopperPaper",
+      "default": "PickerPopperPaper",
       "class": null
     },
     {

docs/pages/x/api/date-pickers/desktop-date-range-picker.json

@@ -187,7 +187,7 @@
     {
       "name": "desktopPaper",
       "description": "Custom component for the paper rendered inside the desktop picker's Popper.",
-      "default": "PickersPopperPaper",
+      "default": "PickerPopperPaper",
       "class": null
     },
     {

docs/pages/x/api/date-pickers/desktop-date-time-picker.json

@@ -253,7 +253,7 @@
     {
       "name": "desktopPaper",
       "description": "Custom component for the paper rendered inside the desktop picker's Popper.",
-      "default": "PickersPopperPaper",
+      "default": "PickerPopperPaper",
       "class": null
     },
     {

docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json

@@ -238,7 +238,7 @@
     {
       "name": "desktopPaper",
       "description": "Custom component for the paper rendered inside the desktop picker's Popper.",
-      "default": "PickersPopperPaper",
+      "default": "PickerPopperPaper",
       "class": null
     },
     {

docs/pages/x/api/date-pickers/desktop-time-picker.json

@@ -167,7 +167,7 @@
     {
       "name": "desktopPaper",
       "description": "Custom component for the paper rendered inside the desktop picker's Popper.",
-      "default": "PickersPopperPaper",
+      "default": "PickerPopperPaper",
       "class": null
     },
     {

docs/pages/x/api/date-pickers/time-picker.json

@@ -171,7 +171,7 @@
     {
       "name": "desktopPaper",
       "description": "Custom component for the paper rendered inside the desktop picker's Popper.",
-      "default": "PickersPopperPaper",
+      "default": "PickerPopperPaper",
       "class": null
     },
     {

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx

@@ -16,7 +16,7 @@ import {
   DayCalendar,
   DayCalendarSlots,
   DayCalendarSlotProps,
-  useDefaultReduceAnimations,
+  useReduceAnimations,
   useCalendarState,
   useDefaultDates,
   useUtils,
@@ -113,17 +113,17 @@ function useDateRangeCalendarDefaultizedProps(
 ): DateRangeCalendarDefaultizedProps {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
-  const defaultReduceAnimations = useDefaultReduceAnimations();
   const themeProps = useThemeProps({
     props,
     name,
   });
+  const reduceAnimations = useReduceAnimations(themeProps.reduceAnimations);
 
   return {
     ...themeProps,
     renderLoading:
       themeProps.renderLoading ?? (() => <span data-testid="loading-progress">...</span>),
-    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    reduceAnimations,
     loading: props.loading ?? false,
     disablePast: props.disablePast ?? false,
     disableFuture: props.disableFuture ?? false,

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

@@ -6,7 +6,7 @@ import {
   executeInTheNextEventLoopTick,
   getActiveElement,
   usePicker,
-  PickersPopper,
+  PickerPopper,
   DateOrTimeViewWithMeridiem,
   PickerProvider,
   PickerValue,
@@ -55,7 +55,6 @@ export const useDesktopRangePicker = <
     autoFocus,
     disableOpenPicker,
     localeText,
-    reduceAnimations,
   } = props;
 
   const fieldContainerRef = React.useRef<HTMLDivElement>(null);
@@ -80,7 +79,7 @@ export const useDesktopRangePicker = <
     fieldRef = endFieldRef;
   }
 
-  const { providerProps, renderCurrentView, shouldRestoreFocus, ownerState } = usePicker<
+  const { providerProps, renderCurrentView, ownerState } = usePicker<
     PickerRangeValue,
     TView,
     TExternalProps
@@ -185,21 +184,17 @@ export const useDesktopRangePicker = <
       <PickerFieldUIContextProvider slots={slots} slotProps={slotProps}>
         <PickerRangePositionContext.Provider value={rangePositionResponse}>
           <Field {...enrichedFieldResponse.fieldProps} />
-          <PickersPopper
+          <PickerPopper
             role="tooltip"
-            placement="bottom-start"
             containerRef={popperRef}
-            anchorEl={providerProps.contextValue.triggerRef.current}
             onBlur={handleBlur}
             slots={slots}
             slotProps={slotProps}
-            shouldRestoreFocus={shouldRestoreFocus}
-            reduceAnimations={reduceAnimations}
           >
             <Layout {...slotProps?.layout} slots={slots} slotProps={slotProps}>
               {renderCurrentView()}
             </Layout>
-          </PickersPopper>
+          </PickerPopper>
         </PickerRangePositionContext.Provider>
       </PickerFieldUIContextProvider>
     </PickerProvider>

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

@@ -1,6 +1,6 @@
 import {
-  PickersPopperSlots,
-  PickersPopperSlotProps,
+  PickerPopperSlots,
+  PickerPopperSlotProps,
   UsePickerViewsProps,
   DateOrTimeViewWithMeridiem,
 } from '@mui/x-date-pickers/internals';
@@ -12,11 +12,11 @@ import {
   UseRangePickerSlots,
 } from '../models/useRangePicker';
 
-export interface UseDesktopRangePickerSlots extends UseRangePickerSlots, PickersPopperSlots {}
+export interface UseDesktopRangePickerSlots extends UseRangePickerSlots, PickerPopperSlots {}
 
 export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
   extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>,
-    PickersPopperSlotProps {}
+    PickerPopperSlotProps {}
 
 export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps {
   /**

packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx

@@ -24,7 +24,7 @@ import {
   mergeDateAndTime,
 } from '../internals/utils/date-utils';
 import { PickerViewRoot } from '../internals/components/PickerViewRoot';
-import { useDefaultReduceAnimations } from '../internals/hooks/useDefaultReduceAnimations';
+import { useReduceAnimations } from '../internals/hooks/useReduceAnimations';
 import { DateCalendarClasses, getDateCalendarUtilityClass } from './dateCalendarClasses';
 import { BaseDateValidationProps } from '../internals/models/validation';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
@@ -48,11 +48,11 @@ function useDateCalendarDefaultizedProps(
 ): DateCalendarDefaultizedProps {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
-  const defaultReduceAnimations = useDefaultReduceAnimations();
   const themeProps = useThemeProps({
     props,
     name,
   });
+  const reduceAnimations = useReduceAnimations(themeProps.reduceAnimations);
 
   return {
     ...themeProps,
@@ -61,7 +61,7 @@ function useDateCalendarDefaultizedProps(
     disableFuture: themeProps.disableFuture ?? false,
     openTo: themeProps.openTo ?? 'day',
     views: themeProps.views ?? ['year', 'day'],
-    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    reduceAnimations,
     renderLoading:
       themeProps.renderLoading ?? (() => <span data-testid="loading-progress">...</span>),
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),