[Joy] Replace leftover Joy- prefix with Mui- (#38086)

Author: siriwatknp

docs/data/joy/components/menu/MenuIconSideNavExample.js

@@ -72,7 +72,7 @@ function MenuButton({ children, menu, open, onOpen, onLeaveMenu, label, ...props
         onKeyDown={handleButtonKeyDown}
         sx={{
           bgcolor: open ? 'neutral.plainHoverBg' : undefined,
-          '&.Joy-focusVisible': {
+          '&:focus-visible': {
             bgcolor: 'neutral.plainHoverBg',
           },
         }}

docs/data/joy/components/menu/MenuIconSideNavExample.tsx

@@ -91,7 +91,7 @@ function MenuButton({
         onKeyDown={handleButtonKeyDown}
         sx={{
           bgcolor: open ? 'neutral.plainHoverBg' : undefined,
-          '&.Joy-focusVisible': {
+          '&:focus-visible': {
             bgcolor: 'neutral.plainHoverBg',
           },
         }}

docs/data/joy/components/radio-button/radio-button.md

@@ -197,21 +197,21 @@ Visit the [WAI-ARIA documentation](https://www.w3.org/WAI/ARIA/apg/patterns/radi
 The Radio Group component is composed of a root `<div>` element that can wrap multiple Radio components.
 
 ```html
-<div class="JoyRadioGroup-root">
+<div class="MuiRadioGroup-root">
   <!-- Radio components here -->
 </div>
 ```
 
 The Radio component is composed of a root `<span>`, with further nested `<span>` elements for the radio button, icon, action (with a nested `<input>`), and its associated `<label>`.
 
 ```html
-  <span class="JoyRadio-root">
-    <span class="JoyRadio-radio">
-      <span class="JoyRadio-icon"></span>
-      <span class="JoyRadio-action">
-        <input class="JoyRadio-input">
+  <span class="MuiRadio-root">
+    <span class="MuiRadio-radio">
+      <span class="MuiRadio-icon"></span>
+      <span class="MuiRadio-action">
+        <input class="MuiRadio-input">
       </span>
     </span>
-    <label class="JoyRadio-label">
+    <label class="MuiRadio-label">
   </span>
 ```

docs/data/joy/getting-started/templates/framesx-web-blocks/theme.tsx

@@ -1,4 +1,5 @@
 import { extendTheme } from '@mui/joy/styles';
+import { inputClasses } from '@mui/joy/Input';
 
 export default extendTheme({
   colorSchemes: {
@@ -56,7 +57,7 @@ export default extendTheme({
         root: ({ ownerState, theme }) => ({
           ...(ownerState.variant === 'outlined' &&
             ownerState.color !== 'context' && {
-              '&:not(.Joy-focused):hover::before': {
+              [`&:not(.${inputClasses.focused}):hover::before`]: {
                 boxShadow: `inset 0 0 0 2px ${
                   theme.vars.palette?.[ownerState.color!]?.outlinedBorder
                 }`,

packages/mui-joy/src/Autocomplete/Autocomplete.tsx

@@ -385,7 +385,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     ...props,
     id: id ?? formControl?.htmlFor,
     componentName: 'Autocomplete',
-    unstable_classNamePrefix: 'Joy',
+    unstable_classNamePrefix: 'Mui',
     unstable_isActiveElementInListbox: defaultIsActiveElementInListbox,
   });
 

packages/mui-joy/src/Container/Container.tsx

@@ -8,7 +8,6 @@ import { useThemeProps } from '../styles';
 import { ContainerTypeMap } from './ContainerProps';
 
 const Container = createContainer<Theme>({
-  componentName: 'JoyContainer',
   createStyledComponent: styled('div', {
     name: 'JoyContainer',
     slot: 'Root',

packages/mui-joy/src/className/index.ts

@@ -3,7 +3,7 @@ import { unstable_generateUtilityClass, unstable_generateUtilityClasses } from '
 export { unstable_ClassNameGenerator } from '@mui/utils';
 
 export const generateUtilityClass = (componentName: string, slot: string) =>
-  unstable_generateUtilityClass(componentName, slot, 'Joy');
+  unstable_generateUtilityClass(componentName, slot, 'Mui');
 
 export const generateUtilityClasses = <T extends string>(componentName: string, slots: Array<T>) =>
-  unstable_generateUtilityClasses(componentName, slots, 'Joy');
+  unstable_generateUtilityClasses(componentName, slots, 'Mui');

test/e2e/index.test.ts

@@ -232,7 +232,7 @@ describe('e2e', () => {
       await page.keyboard.down('ArrowDown'); // moves to 4th option
 
       const listbox = (await screen.getByRole('listbox'))!;
-      const focusedOption = (await listbox.$('.Joy-focused'))!;
+      const focusedOption = (await listbox.$('.Mui-focused'))!;
       const focusedOptionText = await focusedOption.innerHTML();
 
       expect(focusedOptionText).to.equal('four');