[pickers] Use the new ownerState in the toolbar components (#15777)

mui · Dec 9, 2024 · 7eccbd0 · 7eccbd0
1 parent 9c82e98
commit 7eccbd0
Show file tree

Hide file tree

Showing 14 changed files with 211 additions and 181 deletions.
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -12,6 +12,8 @@ import {
   BaseToolbarProps,
   ExportedBaseToolbarProps,
   PickerRangeValue,
+  PickerToolbarOwnerState,
+  useToolbarOwnerState,
 } from '@mui/x-date-pickers/internals';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
@@ -20,8 +22,7 @@ import {
   getDateRangePickerToolbarUtilityClass,
 } from './dateRangePickerToolbarClasses';
 
-const useUtilityClasses = (ownerState: DateRangePickerToolbarProps) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<DateRangePickerToolbarClasses> | undefined) => {
   const slots = {
     root: ['root'],
     container: ['container'],
@@ -47,7 +48,7 @@ const DateRangePickerToolbarRoot = styled(PickersToolbar, {
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
 })<{
-  ownerState: DateRangePickerToolbarProps;
+  ownerState: PickerToolbarOwnerState;
 }>({});
 
 const DateRangePickerToolbarContainer = styled('div', {
@@ -85,13 +86,16 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar(
     onRangePositionChange,
     toolbarFormat,
     className,
+    classes: classesProp,
     onViewChange,
     view,
     views,
     ...other
   } = props;
 
   const translations = usePickerTranslations();
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp);
 
   const startDateValue = start
     ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate)
@@ -101,9 +105,6 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar(
     ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate)
     : translations.end;
 
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
-
   return (
     <DateRangePickerToolbarRoot
       {...other}

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -9,24 +9,22 @@ import {
   ExportedBaseToolbarProps,
   useUtils,
   DateOrTimeViewWithMeridiem,
-  PickerVariant,
   PickerRangeValue,
+  useToolbarOwnerState,
+  PickerToolbarOwnerState,
+  DateTimePickerToolbarForceDesktopVariant,
 } from '@mui/x-date-pickers/internals';
 import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import {
-  DateTimePickerToolbarProps,
-  DateTimePickerToolbar,
-} from '@mui/x-date-pickers/DateTimePicker';
+import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
 import {
   DateTimeRangePickerToolbarClasses,
   getDateTimeRangePickerToolbarUtilityClass,
 } from './dateTimeRangePickerToolbarClasses';
 import { calculateRangeChange } from '../internals/utils/date-range-manager';
 
-const useUtilityClasses = (ownerState: DateTimeRangePickerToolbarProps) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<DateTimeRangePickerToolbarClasses> | undefined) => {
   const slots = {
     root: ['root'],
     startToolbar: ['startToolbar'],
@@ -43,7 +41,6 @@ export interface DateTimeRangePickerToolbarProps
     Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'>,
     ExportedDateTimeRangePickerToolbarProps {
   ampm?: boolean;
-  toolbarVariant?: PickerVariant;
 }
 
 export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToolbarProps {
@@ -58,58 +55,26 @@ const DateTimeRangePickerToolbarRoot = styled('div', {
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
 })<{
-  ownerState: DateTimeRangePickerToolbarProps;
+  ownerState: PickerToolbarOwnerState;
 }>({
   display: 'flex',
   flexDirection: 'column',
 });
 
-type DateTimeRangePickerStartOrEndToolbarProps = DateTimePickerToolbarProps & {
-  ownerState?: DateTimeRangePickerToolbarProps;
-};
-
-type DateTimeRangePickerStartOrEndToolbarComponent = (
-  props: DateTimeRangePickerStartOrEndToolbarProps,
-) => React.JSX.Element;
-
 const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'StartToolbar',
   overridesResolver: (_, styles) => styles.startToolbar,
-})<DateTimeRangePickerStartOrEndToolbarProps>({
+})<{ ownerState?: PickerToolbarOwnerState }>({
   borderBottom: 'none',
-  variants: [
-    {
-      props: ({ toolbarVariant }: DateTimeRangePickerStartOrEndToolbarProps) =>
-        toolbarVariant !== 'desktop',
-      style: {
-        padding: '12px 8px 0 12px',
-      },
-    },
-    {
-      props: { toolbarVariant: 'desktop' },
-      style: {
-        paddingBottom: 0,
-      },
-    },
-  ],
-}) as DateTimeRangePickerStartOrEndToolbarComponent;
+  paddingBottom: 0,
+});
 
 const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'EndToolbar',
   overridesResolver: (_, styles) => styles.endToolbar,
-})<DateTimeRangePickerStartOrEndToolbarProps>({
-  variants: [
-    {
-      props: ({ toolbarVariant }: DateTimeRangePickerStartOrEndToolbarProps) =>
-        toolbarVariant !== 'desktop',
-      style: {
-        padding: '12px 8px 12px 12px',
-      },
-    },
-  ],
-}) as DateTimeRangePickerStartOrEndToolbarComponent;
+})<{ ownerState?: PickerToolbarOwnerState }>({});
 
 type DateTimeRangePickerToolbarComponent = ((
   props: DateTimeRangePickerToolbarProps & React.RefAttributes<HTMLDivElement>,
@@ -127,8 +92,8 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     rangePosition,
     onRangePositionChange,
     className,
+    classes: classesProp,
     onViewChange,
-    toolbarVariant,
     onChange,
     classes: inClasses,
     view,
@@ -144,6 +109,9 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
   } = props;
 
   const { disabled, readOnly } = usePickerContext();
+  const translations = usePickerTranslations();
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp);
 
   const commonToolbarProps = {
     isLandscape,
@@ -156,11 +124,6 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     toolbarPlaceholder,
   };
 
-  const translations = usePickerTranslations();
-
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
-
   const handleStartRangeViewChange = React.useCallback(
     (newView: DateOrTimeViewWithMeridiem) => {
       if (newView === 'year' || newView === 'month') {
@@ -214,30 +177,30 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
       sx={sx}
       {...other}
     >
-      <DateTimeRangePickerToolbarStart
-        value={start}
-        onViewChange={handleStartRangeViewChange}
-        toolbarTitle={translations.start}
-        ownerState={ownerState}
-        toolbarVariant="desktop"
-        view={rangePosition === 'start' ? view : undefined}
-        className={classes.startToolbar}
-        onChange={handleOnChange}
-        titleId={titleId ? `${titleId}-start-toolbar` : undefined}
-        {...commonToolbarProps}
-      />
-      <DateTimeRangePickerToolbarEnd
-        value={end}
-        onViewChange={handleEndRangeViewChange}
-        toolbarTitle={translations.end}
-        ownerState={ownerState}
-        toolbarVariant="desktop"
-        view={rangePosition === 'end' ? view : undefined}
-        className={classes.endToolbar}
-        onChange={handleOnChange}
-        titleId={titleId ? `${titleId}-end-toolbar` : undefined}
-        {...commonToolbarProps}
-      />
+      <DateTimePickerToolbarForceDesktopVariant.Provider value>
+        <DateTimeRangePickerToolbarStart
+          value={start}
+          onViewChange={handleStartRangeViewChange}
+          toolbarTitle={translations.start}
+          ownerState={ownerState}
+          view={rangePosition === 'start' ? view : undefined}
+          className={classes.startToolbar}
+          onChange={handleOnChange}
+          titleId={titleId ? `${titleId}-start-toolbar` : undefined}
+          {...commonToolbarProps}
+        />
+        <DateTimeRangePickerToolbarEnd
+          value={end}
+          onViewChange={handleEndRangeViewChange}
+          toolbarTitle={translations.end}
+          ownerState={ownerState}
+          view={rangePosition === 'end' ? view : undefined}
+          className={classes.endToolbar}
+          onChange={handleOnChange}
+          titleId={titleId ? `${titleId}-end-toolbar` : undefined}
+          {...commonToolbarProps}
+        />
+      </DateTimePickerToolbarForceDesktopVariant.Provider>
     </DateTimeRangePickerToolbarRoot>
   );
 }) as DateTimeRangePickerToolbarComponent;
@@ -286,7 +249,6 @@ DateTimeRangePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: PropTypes.node,
-  toolbarVariant: PropTypes.oneOf(['desktop', 'mobile']),
   value: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * Currently visible picker view.

diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx
@@ -190,7 +190,6 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang
       },
       toolbar: {
         hidden: true,
-        toolbarVariant: 'desktop',
         ...defaultizedProps.slotProps?.toolbar,
       },
       actionBar: (ownerState: PickerLayoutOwnerState) => ({

diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx
@@ -188,7 +188,6 @@ const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangeP
       },
       toolbar: {
         hidden: false,
-        toolbarVariant: 'mobile',
         ...defaultizedProps.slotProps?.toolbar,
       },
     },

diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
@@ -16,6 +16,10 @@ import {
 } from './datePickerToolbarClasses';
 import { resolveDateFormat } from '../internals/utils/date-utils';
 import { PickerValue } from '../internals/models';
+import {
+  PickerToolbarOwnerState,
+  useToolbarOwnerState,
+} from '../internals/hooks/useToolbarOwnerState';
 
 export interface DatePickerToolbarProps
   extends BaseToolbarProps<PickerValue, DateView>,
@@ -28,8 +32,7 @@ export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps
   classes?: Partial<DatePickerToolbarClasses>;
 }
 
-const useUtilityClasses = (ownerState: DatePickerToolbarProps) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<DatePickerToolbarClasses> | undefined) => {
   const slots = {
     root: ['root'],
     title: ['title'],
@@ -48,10 +51,10 @@ const DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
   overridesResolver: (_, styles) => styles.title,
-})<{ ownerState: DatePickerToolbarProps }>({
+})<{ ownerState: PickerToolbarOwnerState }>({
   variants: [
     {
-      props: { isLandscape: true },
+      props: { pickerOrientation: 'landscape' },
       style: {
         margin: 'auto 16px auto auto',
       },
@@ -86,13 +89,15 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar(
     toolbarPlaceholder = '––',
     views,
     className,
+    classes: classesProp,
     onViewChange,
     view,
     ...other
   } = props;
   const utils = useUtils();
   const translations = usePickerTranslations();
-  const classes = useUtilityClasses(props);
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp);
 
   const dateText = React.useMemo(() => {
     if (!value) {
@@ -104,8 +109,6 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar(
     return utils.formatByString(value, formatFromViews);
   }, [value, toolbarFormat, toolbarPlaceholder, utils, views]);
 
-  const ownerState = props;
-
   return (
     <DatePickerToolbarRoot
       ref={ref}