[pickers] Use context to remove props on <PickersPopper />

mui · Jan 24, 2025 · 1e92a72 · 1e92a72
1 parent 8afcd2f
commit 1e92a72
Show file tree

Hide file tree

Showing 33 changed files with 185 additions and 162 deletions.
diff --git a/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx b/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',

diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/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
     },
     {

diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/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
     },
     {

diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/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
     },
     {

diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker.json b/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
     },
     {

diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/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
     },
     {

diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/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
     },
     {

diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/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
     },
     {

diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json b/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
     },
     {

diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.json b/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
     },
     {

diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/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
     },
     {

diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/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,

diff --git a/...es/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/...es/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>

diff --git a/...date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts b/...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 {
   /**

diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/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),