From d40924fc48bbefa26d60760a91d5afc8eecca0c3 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 29 Sep 2024 21:07:25 +0200
Subject: [PATCH] [core] Fix class name composition order

---
 .../src/components/cell/GridCell.tsx          |  2 +-
 .../columnHeaders/GridBaseColumnHeaders.tsx   |  2 +-
 .../src/components/containers/GridRoot.tsx    |  2 +-
 .../containers/GridToolbarContainer.tsx       |  2 +-
 .../src/components/menu/GridMenu.tsx          |  2 +-
 .../src/components/panel/GridPanel.tsx        |  2 +-
 .../src/components/panel/GridPanelContent.tsx |  2 +-
 .../src/components/panel/GridPanelFooter.tsx  |  2 +-
 .../src/components/panel/GridPanelHeader.tsx  |  2 +-
 .../src/components/panel/GridPanelWrapper.tsx |  2 +-
 .../toolbar/GridToolbarQuickFilter.tsx        |  2 +-
 .../DateRangeCalendar/DateRangeCalendar.tsx   |  2 +-
 .../DateRangePickerToolbar.tsx                |  2 +-
 .../DateTimeRangePickerToolbar.tsx            |  2 +-
 .../src/DateTimePicker/DateTimePickerTabs.tsx |  2 +-
 .../DesktopDateTimePickerLayout.tsx           |  2 +-
 .../PickersCalendarHeader.tsx                 |  2 +-
 .../src/PickersLayout/PickersLayout.tsx       |  2 +-
 .../x-date-pickers/src/TimeClock/Clock.tsx    |  2 +-
 .../src/TimeClock/ClockNumber.tsx             |  2 +-
 .../src/TimeClock/ClockPointer.tsx            |  2 +-
 .../components/PickersToolbarButton.tsx       |  2 +-
 .../components/PickersToolbarText.tsx         |  2 +-
 .../src/TreeItem/TreeItemContent.tsx          | 20 +++++++++++--------
 24 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/packages/x-data-grid/src/components/cell/GridCell.tsx b/packages/x-data-grid/src/components/cell/GridCell.tsx
index c742def4102e5..f47282bae2e4e 100644
--- a/packages/x-data-grid/src/components/cell/GridCell.tsx
+++ b/packages/x-data-grid/src/components/cell/GridCell.tsx
@@ -481,7 +481,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>(function GridCe
   return (
     <div
       ref={handleRef}
-      className={clsx(className, classNames, classes.root)}
+      className={clsx(classes.root, classNames, className)}
       role="gridcell"
       data-field={field}
       data-colindex={colIndex}
diff --git a/packages/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx b/packages/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx
index 47d2ecf6a4185..d2d37d0773dee 100644
--- a/packages/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx
+++ b/packages/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx
@@ -43,7 +43,7 @@ export const GridBaseColumnHeaders = React.forwardRef<HTMLDivElement, GridBaseCo
     return (
       <GridColumnHeadersRoot
         ref={ref}
-        className={clsx(className, classes.root)}
+        className={clsx(classes.root, className)}
         ownerState={rootProps}
         {...other}
         role="presentation"
diff --git a/packages/x-data-grid/src/components/containers/GridRoot.tsx b/packages/x-data-grid/src/components/containers/GridRoot.tsx
index 7bfee7a978eb3..7a3c66be2c36a 100644
--- a/packages/x-data-grid/src/components/containers/GridRoot.tsx
+++ b/packages/x-data-grid/src/components/containers/GridRoot.tsx
@@ -69,7 +69,7 @@ const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRo
   return (
     <GridRootStyles
       ref={handleRef}
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ownerState={ownerState}
       {...other}
     />
diff --git a/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx b/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx
index e53f8d7809d1e..e797f56e7b5df 100644
--- a/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx
+++ b/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx
@@ -47,7 +47,7 @@ const GridToolbarContainer = React.forwardRef<HTMLDivElement, GridToolbarContain
     return (
       <GridToolbarContainerRoot
         ref={ref}
-        className={clsx(className, classes.root)}
+        className={clsx(classes.root, className)}
         ownerState={rootProps}
         {...other}
       >
diff --git a/packages/x-data-grid/src/components/menu/GridMenu.tsx b/packages/x-data-grid/src/components/menu/GridMenu.tsx
index 5c338398ba4d7..34440811f93e8 100644
--- a/packages/x-data-grid/src/components/menu/GridMenu.tsx
+++ b/packages/x-data-grid/src/components/menu/GridMenu.tsx
@@ -111,7 +111,7 @@ function GridMenu(props: GridMenuProps) {
   return (
     <GridMenuRoot
       as={rootProps.slots.basePopper}
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ownerState={rootProps}
       open={open}
       anchorEl={target as any}
diff --git a/packages/x-data-grid/src/components/panel/GridPanel.tsx b/packages/x-data-grid/src/components/panel/GridPanel.tsx
index 5e920533987aa..ed3473b277343 100644
--- a/packages/x-data-grid/src/components/panel/GridPanel.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanel.tsx
@@ -118,7 +118,7 @@ const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>((props, ref)
     <GridPanelRoot
       ref={ref}
       placement="bottom-start"
-      className={clsx(className, classes.panel)}
+      className={clsx(classes.panel, className)}
       ownerState={rootProps}
       anchorEl={anchorEl}
       modifiers={modifiers}
diff --git a/packages/x-data-grid/src/components/panel/GridPanelContent.tsx b/packages/x-data-grid/src/components/panel/GridPanelContent.tsx
index 0506f44f7b552..4ab1ad5329aa1 100644
--- a/packages/x-data-grid/src/components/panel/GridPanelContent.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanelContent.tsx
@@ -38,7 +38,7 @@ function GridPanelContent(props: React.HTMLAttributes<HTMLDivElement> & { sx?: S
 
   return (
     <GridPanelContentRoot
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ownerState={rootProps}
       {...other}
     />
diff --git a/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx b/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx
index 7744ad239b7d3..358fe2d4cf6c6 100644
--- a/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx
@@ -36,7 +36,7 @@ function GridPanelFooter(props: React.HTMLAttributes<HTMLDivElement> & { sx?: Sx
 
   return (
     <GridPanelFooterRoot
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ownerState={rootProps}
       {...other}
     />
diff --git a/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx b/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx
index 64cf34faf3736..39471e04a49e5 100644
--- a/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx
@@ -34,7 +34,7 @@ function GridPanelHeader(props: React.HTMLAttributes<HTMLDivElement> & { sx?: Sx
 
   return (
     <GridPanelHeaderRoot
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ownerState={rootProps}
       {...other}
     />
diff --git a/packages/x-data-grid/src/components/panel/GridPanelWrapper.tsx b/packages/x-data-grid/src/components/panel/GridPanelWrapper.tsx
index d1afe7d8f2920..6bac76afe9d59 100644
--- a/packages/x-data-grid/src/components/panel/GridPanelWrapper.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanelWrapper.tsx
@@ -55,7 +55,7 @@ const GridPanelWrapper = React.forwardRef<HTMLDivElement, GridPanelWrapperProps>
         <GridPanelWrapperRoot
           ref={ref}
           tabIndex={-1}
-          className={clsx(className, classes.root)}
+          className={clsx(classes.root, className)}
           ownerState={rootProps}
           {...other}
         />
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
index 4921f12486ed7..a323c08b20eb8 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
@@ -146,7 +146,7 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
       variant="standard"
       value={searchValue}
       onChange={handleSearchValueChange}
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       placeholder={apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder')}
       aria-label={apiRef.current.getLocaleText('toolbarQuickFilterLabel')}
       type="search"
diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
index d46019e3c753b..2dbfe92240659 100644
--- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
@@ -543,7 +543,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<
   return (
     <DateRangeCalendarRoot
       ref={ref}
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ownerState={ownerState}
       {...other}
     >
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
index bd0064bc58e57..ca7361d378d4c 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -105,7 +105,7 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar<
       {...other}
       toolbarTitle={translations.dateRangePickerToolbarTitle}
       isLandscape={false}
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ownerState={ownerState}
       ref={ref}
     >
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
index 9a16f3cba0691..4247ad3b5b02a 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -204,7 +204,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
 
   return (
     <DateTimeRangePickerToolbarRoot
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ownerState={ownerState}
       ref={ref}
       sx={sx}
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
index a9042194162d7..dba5be6d3383f 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
@@ -126,7 +126,7 @@ const DateTimePickerTabs = function DateTimePickerTabs<TDate extends PickerValid
       variant="fullWidth"
       value={viewToTab(view)}
       onChange={handleChange}
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       sx={sx}
     >
       <Tab
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
index f2ff16a8b4474..58e6370068476 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
@@ -38,7 +38,7 @@ const DesktopDateTimePickerLayout = React.forwardRef(function DesktopDateTimePic
   return (
     <PickersLayoutRoot
       ref={ref}
-      className={clsx(className, pickersLayoutClasses.root, classes?.root)}
+      className={clsx(pickersLayoutClasses.root, classes?.root, className)}
       sx={[
         {
           [`& .${pickersLayoutClasses.tabs}`]: { gridRow: 4, gridColumn: '1 / 4' },
diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
index 51a7224b66f9a..42c81b9a516ba 100644
--- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
+++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
@@ -223,7 +223,7 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader<
     <PickersCalendarHeaderRoot
       {...other}
       ownerState={ownerState}
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ref={ref}
     >
       <PickersCalendarHeaderLabelContainer
diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
index 64562ee5255f7..f0d559429a3c2 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
@@ -113,7 +113,7 @@ const PickersLayout = React.forwardRef(function PickersLayout<
     <PickersLayoutRoot
       ref={ref}
       sx={sx}
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ownerState={props}
     >
       {isLandscape ? shortcuts : toolbar}
diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx
index d7fc0a8b2e608..8b3d64f2f579e 100644
--- a/packages/x-date-pickers/src/TimeClock/Clock.tsx
+++ b/packages/x-date-pickers/src/TimeClock/Clock.tsx
@@ -343,7 +343,7 @@ export function Clock<TDate extends PickerValidDate>(inProps: ClockProps<TDate>)
   };
 
   return (
-    <ClockRoot className={clsx(className, classes.root)}>
+    <ClockRoot className={clsx(classes.root, className)}>
       <ClockClock className={classes.clock}>
         <ClockSquareMask
           data-mui-test="clock"
diff --git a/packages/x-date-pickers/src/TimeClock/ClockNumber.tsx b/packages/x-date-pickers/src/TimeClock/ClockNumber.tsx
index c407a02a7adf7..0a85289d61cba 100644
--- a/packages/x-date-pickers/src/TimeClock/ClockNumber.tsx
+++ b/packages/x-date-pickers/src/TimeClock/ClockNumber.tsx
@@ -88,7 +88,7 @@ export function ClockNumber(inProps: ClockNumberProps) {
 
   return (
     <ClockNumberRoot
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       aria-disabled={disabled ? true : undefined}
       aria-selected={selected ? true : undefined}
       role="option"
diff --git a/packages/x-date-pickers/src/TimeClock/ClockPointer.tsx b/packages/x-date-pickers/src/TimeClock/ClockPointer.tsx
index db50723091b6d..7ae3e024d2984 100644
--- a/packages/x-date-pickers/src/TimeClock/ClockPointer.tsx
+++ b/packages/x-date-pickers/src/TimeClock/ClockPointer.tsx
@@ -108,7 +108,7 @@ export function ClockPointer(inProps: ClockPointerProps) {
   return (
     <ClockPointerRoot
       style={getAngleStyle()}
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       ownerState={ownerState}
       {...other}
     >
diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx
index e79c5cec63460..d5f20b9cc52a1 100644
--- a/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx
@@ -53,7 +53,7 @@ export const PickersToolbarButton = React.forwardRef(function PickersToolbarButt
       data-mui-test="toolbar-button"
       variant="text"
       ref={ref}
-      className={clsx(className, classes.root)}
+      className={clsx(classes.root, className)}
       {...(width ? { sx: { width } } : {})}
       {...other}
     >
diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbarText.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbarText.tsx
index a3b0c533e77eb..969f0ae05f07f 100644
--- a/packages/x-date-pickers/src/internals/components/PickersToolbarText.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersToolbarText.tsx
@@ -56,7 +56,7 @@ export const PickersToolbarText = React.forwardRef<HTMLSpanElement, PickersToolb
     return (
       <PickersToolbarTextRoot
         ref={ref}
-        className={clsx(className, classes.root)}
+        className={clsx(classes.root, className)}
         component="span"
         {...other}
       >
diff --git a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx
index 247c593f687da..61f3bacc9203a 100644
--- a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx
+++ b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx
@@ -147,14 +147,18 @@ const TreeItemContent = React.forwardRef(function TreeItemContent(
     /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
     <div
       {...other}
-      className={clsx(className, classes.root, {
-        [classes.expanded]: expanded,
-        [classes.selected]: selected,
-        [classes.focused]: focused,
-        [classes.disabled]: disabled,
-        [classes.editing]: editing,
-        [classes.editable]: editable,
-      })}
+      className={clsx(
+        classes.root,
+        {
+          [classes.expanded]: expanded,
+          [classes.selected]: selected,
+          [classes.focused]: focused,
+          [classes.disabled]: disabled,
+          [classes.editing]: editing,
+          [classes.editable]: editable,
+        },
+        className,
+      )}
       onClick={handleClick}
       onMouseDown={handleMouseDown}
       ref={ref}