[core] Fix class name composition order (#14775)

mui · Sep 30, 2024 · 7a515d8 · 7a515d8
1 parent 1ee9075
commit 7a515d8
Show file tree

Hide file tree

Showing 24 changed files with 35 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}