[base-ui] Inconsistent merge order of classes in mergeSlotProps

[mj12albert]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Sandbox: https://codesandbox.io/s/merge-slot-props-classes-order-w9tkzp?file=/src/App.tsx

In the component that uses useSlotProps, you must both:

1. use useSlotProps without passing getSlotProps, AND
2. do not explicitly destructure a className prop and pass it into the className parameter of useSlotProps, we want it go to into externalForwardedProps instead

const rootProps = useSlotProps({
  elementType: RootComponent,
  externalSlotProps: slotProps.root,
  externalForwardedProps: other, // `className` prop goes here instead
  additionalProps: {
    ref,
  ,
  ownerState,
  className: [classes.root],
});

Current behavior 😯

When getSlotProps is not passed, the className join order is:

const joinedClasses = clsx(
  externalForwardedProps?.className,
  externalSlotProps?.className,
  className,
  additionalProps?.className,
);

When it is passed, the join order is:

const joinedClasses = clsx(
  internalSlotProps?.className,
  additionalProps?.className,
  className,
  externalForwardedProps?.className,
  externalSlotProps?.className,
);

Expected behavior 🤔

Disregarding internalSlotProps.className, the order of the rest should be the same.

Context 🔦

I was investigating why this test broke after refactoring material-next/InputLabel to use useSlotProps

For more background, the test was added in #33205 and #34451

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.