[utils] Allow state prefix to be configurable

packages/mui-utils/src/generateUtilityClass/generateUtilityClass.test.ts

@@ -48,4 +48,8 @@ describe('generateUtilityClass', () => {
       expect(generateUtilityClass('MuiTest', 'selected')).to.equal('Mui-selected');
     });
   });
+
+  it('custom state prefix', () => {
+    expect(generateUtilityClass('JoyButton', 'focusVisible', 'Joy')).to.equal('Joy-focusVisible');
+  });
 });

packages/mui-utils/src/generateUtilityClass/generateUtilityClass.ts

@@ -13,19 +13,25 @@ export type GlobalStateSlot =
   | 'selected';
 
 const globalStateClassesMapping: Record<GlobalStateSlot, string> = {
-  active: 'Mui-active',
-  checked: 'Mui-checked',
-  completed: 'Mui-completed',
-  disabled: 'Mui-disabled',
-  error: 'Mui-error',
-  expanded: 'Mui-expanded',
-  focused: 'Mui-focused',
-  focusVisible: 'Mui-focusVisible',
-  required: 'Mui-required',
-  selected: 'Mui-selected',
+  active: 'active',
+  checked: 'checked',
+  completed: 'completed',
+  disabled: 'disabled',
+  error: 'error',
+  expanded: 'expanded',
+  focused: 'focused',
+  focusVisible: 'focusVisible',
+  required: 'required',
+  selected: 'selected',
 };
 
-export default function generateUtilityClass(componentName: string, slot: string): string {
+export default function generateUtilityClass(
+  componentName: string,
+  slot: string,
+  globalStatePrefix = 'Mui',
+): string {
   const globalStateClass = globalStateClassesMapping[slot as GlobalStateSlot];
-  return globalStateClass || `${ClassNameGenerator.generate(componentName)}-${slot}`;
+  return globalStateClass
+    ? `${globalStatePrefix}-${globalStateClass}`
+    : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 }

packages/mui-utils/src/generateUtilityClasses/generateUtilityClasses.ts

@@ -3,11 +3,12 @@ import generateUtilityClass from '../generateUtilityClass';
 export default function generateUtilityClasses<T extends string>(
   componentName: string,
   slots: T[],
+  globalStatePrefix = 'Mui',
 ): Record<T, string> {
   const result: Record<string, string> = {};
 
   slots.forEach((slot) => {
-    result[slot] = generateUtilityClass(componentName, slot);
+    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
   });
 
   return result;