fix(react): fix composition issues due to MuiWrapperProps

packages/react/src/components/Accordion/Accordion.tsx

@@ -21,8 +21,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import type {PaperTypeMap} from '../Paper';
 import './accordion.scss';
 
@@ -33,8 +31,6 @@ export type AccordionProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiAccordionProps, 'component'>;
 
-const COMPONENT_NAME: string = 'Accordion';
-
 /**
  * The Accordion component lets users show and hide sections of related content on a page.
  *
@@ -58,7 +54,7 @@ const COMPONENT_NAME: string = 'Accordion';
  * @param ref - The ref to be forwarded to the MuiAccordion component.
  * @returns The rendered Accordion component.
  */
-const Accordion: OverridableComponent<PaperTypeMap<AccordionProps>> & WithWrapperProps = forwardRef(
+const Accordion: OverridableComponent<PaperTypeMap<AccordionProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: AccordionProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -67,9 +63,6 @@ const Accordion: OverridableComponent<PaperTypeMap<AccordionProps>> & WithWrappe
 
     return <MuiAccordion ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<PaperTypeMap<AccordionProps>> & WithWrapperProps;
-
-Accordion.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Accordion.muiName = COMPONENT_NAME;
+) as OverridableComponent<PaperTypeMap<AccordionProps>>;
 
 export default Accordion;

packages/react/src/components/AccordionDetails/AccordionDetails.tsx

@@ -21,13 +21,9 @@ import type {AccordionDetailsProps as MuiAccordionDetailsProps} from '@mui/mater
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type AccordionDetailsProps = MuiAccordionDetailsProps;
 
-const COMPONENT_NAME: string = 'AccordionDetails';
-
 /**
  * The Accordion Details component is the wrapper for the Accordion content.
  *
@@ -49,15 +45,12 @@ const COMPONENT_NAME: string = 'AccordionDetails';
  * @param ref - The ref to be forwarded to the MuiAccordionDetails component.
  * @returns The rendered AccordionDetails component.
  */
-const AccordionDetails: ForwardRefExoticComponent<AccordionDetailsProps> & WithWrapperProps = forwardRef(
+const AccordionDetails: ForwardRefExoticComponent<AccordionDetailsProps> = forwardRef(
   ({className, ...rest}: AccordionDetailsProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-accordion-details', className);
 
     return <MuiAccordionDetails ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<AccordionDetailsProps> & WithWrapperProps;
-
-AccordionDetails.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AccordionDetails.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<AccordionDetailsProps>;
 
 export default AccordionDetails;

packages/react/src/components/AccordionSummary/AccordionSummary.tsx

@@ -25,8 +25,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, ElementType, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type AccordionSummaryProps<
   C extends ElementType = ElementType,
@@ -39,8 +37,6 @@ export type AccordionSummaryProps<
   component?: C;
 } & Omit<MuiAccordionSummaryProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'AccordionSummary';
-
 /**
  * The Accordion Summary component is the wrapper for the Accordion header, which expands or collapses the content when clicked.
  *
@@ -64,19 +60,15 @@ const COMPONENT_NAME: string = 'AccordionSummary';
  * @param ref - The ref to be forwarded to the MuiAccordionSummary component.
  * @returns The rendered AccordionSummary component.
  */
-const AccordionSummary: OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>> & WithWrapperProps =
-  forwardRef(
-    <C extends ElementType = ElementType>(
-      {className, ...rest}: AccordionSummaryProps<C>,
-      ref: Ref<HTMLDivElement>,
-    ): ReactElement => {
-      const classes: string = clsx('oxygen-accordion-summary', className);
-
-      return <MuiAccordionSummary ref={ref} className={classes} {...rest} />;
-    },
-  ) as OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>> & WithWrapperProps;
+const AccordionSummary: OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>> = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: AccordionSummaryProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-accordion-summary', className);
 
-AccordionSummary.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AccordionSummary.muiName = COMPONENT_NAME;
+    return <MuiAccordionSummary ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>>;
 
 export default AccordionSummary;

packages/react/src/components/AccountOverview/AccountOverview.tsx

@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, ReactElement, ReactNode, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import Card from '../Card';
 import type {CardProps, CardTypeMap} from '../Card';
@@ -73,8 +71,6 @@ export type AccountOverviewProps<
 
 export type AccountCompletionSteps = CarouselStep;
 
-const COMPONENT_NAME: string = 'AccountOverview';
-
 /**
  * The Account Overview component lets you display the progress of the user's account.
  * It includes the user's profile picture, name, email, account progress and account completion steps.
@@ -98,7 +94,7 @@ const COMPONENT_NAME: string = 'AccountOverview';
  * @param ref - The ref to be forwarded to the Card component.
  * @returns The rendered AccountOverview component.
  */
-const AccountOverview: OverridableComponent<CardTypeMap<AccountOverviewProps>> & WithWrapperProps = forwardRef(
+const AccountOverview: OverridableComponent<CardTypeMap<AccountOverviewProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {
       className,
@@ -139,9 +135,6 @@ const AccountOverview: OverridableComponent<CardTypeMap<AccountOverviewProps>> &
       </Card>
     );
   },
-) as OverridableComponent<CardTypeMap<AccountOverviewProps>> & WithWrapperProps;
-
-AccountOverview.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AccountOverview.muiName = COMPONENT_NAME;
+) as OverridableComponent<CardTypeMap<AccountOverviewProps>>;
 
 export default AccountOverview;

packages/react/src/components/ActionCard/ActionCard.tsx

@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, ReactElement, ReactNode, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Button from '../Button';
 import Card from '../Card';
 import type {CardProps, CardTypeMap} from '../Card';
@@ -53,8 +51,6 @@ export type ActionCardProps<C extends ElementType = ElementType> = CardProps<C>
   title: string;
 };
 
-const COMPONENT_NAME: string = 'ActionCard';
-
 /**
  * The Action Card component is an extended version of the `Card` component with an action button.
  *
@@ -77,7 +73,7 @@ const COMPONENT_NAME: string = 'ActionCard';
  * @param ref - The ref to be forwarded to the Card component.
  * @returns The rendered ActionCard component.
  */
-const ActionCard: OverridableComponent<CardTypeMap<ActionCardProps>> & WithWrapperProps = forwardRef(
+const ActionCard: OverridableComponent<CardTypeMap<ActionCardProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, image, title, description, actionText, onActionClick, ...rest}: ActionCardProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -99,9 +95,6 @@ const ActionCard: OverridableComponent<CardTypeMap<ActionCardProps>> & WithWrapp
       </Card>
     );
   },
-) as OverridableComponent<CardTypeMap<ActionCardProps>> & WithWrapperProps;
-
-ActionCard.displayName = composeComponentDisplayName(COMPONENT_NAME);
-ActionCard.muiName = COMPONENT_NAME;
+) as OverridableComponent<CardTypeMap<ActionCardProps>>;
 
 export default ActionCard;

packages/react/src/components/Alert/Alert.tsx

@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, ElementType, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import type {PaperTypeMap} from '../Paper';
 import './alert.scss';
 
@@ -34,8 +32,6 @@ export type AlertProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiAlertProps, 'component'>;
 
-const COMPONENT_NAME: string = 'Alert';
-
 /**
  * The Alert component displays brief messages to the user without interrupting their use of the app.
  *
@@ -59,7 +55,7 @@ const COMPONENT_NAME: string = 'Alert';
  * @param ref - The ref to be forwarded to the MuiAlert component.
  * @returns The rendered Alert component.
  */
-const Alert: OverridableComponent<PaperTypeMap<AlertProps>> & WithWrapperProps = forwardRef(
+const Alert: OverridableComponent<PaperTypeMap<AlertProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: AlertProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -68,9 +64,6 @@ const Alert: OverridableComponent<PaperTypeMap<AlertProps>> & WithWrapperProps =
 
     return <MuiAlert ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<PaperTypeMap<AlertProps>> & WithWrapperProps;
-
-Alert.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Alert.muiName = COMPONENT_NAME;
+) as OverridableComponent<PaperTypeMap<AlertProps>>;
 
 export default Alert;

packages/react/src/components/AlertTitle/AlertTitle.tsx

@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, ElementType, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import type {TypographyTypeMap} from '../Typography';
 import './alert-title.scss';
 
@@ -34,8 +32,6 @@ export type AlertProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiAlertTitleProps, 'component'>;
 
-const COMPONENT_NAME: string = 'AlertTitle';
-
 /**
  * The Alert Title component can be used to display a title for the Alert component.
  *
@@ -59,7 +55,7 @@ const COMPONENT_NAME: string = 'AlertTitle';
  * @param ref - The ref to be forwarded to the MuiAlertTitle component.
  * @returns The rendered AlertTitle component.
  */
-const AlertTitle: OverridableComponent<TypographyTypeMap<AlertTitleProps>> & WithWrapperProps = forwardRef(
+const AlertTitle: OverridableComponent<TypographyTypeMap<AlertTitleProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: AlertProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -68,9 +64,6 @@ const AlertTitle: OverridableComponent<TypographyTypeMap<AlertTitleProps>> & Wit
 
     return <MuiAlertTitle ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<TypographyTypeMap<AlertTitleProps>> & WithWrapperProps;
-
-AlertTitle.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AlertTitle.muiName = COMPONENT_NAME;
+) as OverridableComponent<TypographyTypeMap<AlertTitleProps>>;
 
 export default AlertTitle;

packages/react/src/components/AppBar/AppBar.tsx

@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './app-bar.scss';
 
 export type AppBarProps<
@@ -37,8 +35,6 @@ export type AppBarProps<
   component?: C;
 } & Omit<MuiAppBarProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'AppBar';
-
 /**
  * The App Bar component displays information and actions relating to the current screen.
  *
@@ -62,7 +58,7 @@ const COMPONENT_NAME: string = 'AppBar';
  * @param ref - The ref to be forwarded to the MuiAppBar component.
  * @returns The rendered AppBar component.
  */
-const AppBar: OverridableComponent<AppBarTypeMap<AppBarProps>> & WithWrapperProps = forwardRef(
+const AppBar: OverridableComponent<AppBarTypeMap<AppBarProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: AppBarProps<C>,
     ref: Ref<HTMLHeadingElement>,
@@ -71,9 +67,6 @@ const AppBar: OverridableComponent<AppBarTypeMap<AppBarProps>> & WithWrapperProp
 
     return <MuiAppBar ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<AppBarTypeMap<AppBarProps>> & WithWrapperProps;
-
-AppBar.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AppBar.muiName = COMPONENT_NAME;
+) as OverridableComponent<AppBarTypeMap<AppBarProps>>;
 
 export default AppBar;

packages/react/src/components/AppShell/AppShell.tsx

@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import type {BoxProps, BoxTypeMap} from '../Box';
 import './app-shell.scss';
@@ -41,8 +39,6 @@ export type AppShellProps<C extends ElementType = ElementType> = BoxProps<C> & {
   navigation?: ReactNode;
 };
 
-const COMPONENT_NAME: string = 'AppShell';
-
 /**
  * The App Shell component is a layout component that can be used to create a common Header - Navbar - Footer - Aside - Content layout pattern.
  *
@@ -65,7 +61,7 @@ const COMPONENT_NAME: string = 'AppShell';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered AppShell component.
  */
-const AppShell: OverridableComponent<BoxTypeMap<AppShellProps>> & WithWrapperProps = forwardRef(
+const AppShell: OverridableComponent<BoxTypeMap<AppShellProps>> = forwardRef(
   <C extends ElementType>(
     {className, children, footer, header, navigation, ...rest}: AppShellProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -87,9 +83,6 @@ const AppShell: OverridableComponent<BoxTypeMap<AppShellProps>> & WithWrapperPro
       </Box>
     );
   },
-) as OverridableComponent<BoxTypeMap<AppShellProps>> & WithWrapperProps;
-
-AppShell.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AppShell.muiName = COMPONENT_NAME;
+) as OverridableComponent<BoxTypeMap<AppShellProps>>;
 
 export default AppShell;

packages/react/src/components/Autocomplete/Autocomplete.tsx

@@ -21,8 +21,6 @@ import type {AutocompleteProps as MuiAutocompleteProps} from '@mui/material/Auto
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import type {ChipTypeMap} from '../Chip';
 import './autocomplete.scss';
 
@@ -34,8 +32,6 @@ export type AutocompleteProps<
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 > = MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>;
 
-const COMPONENT_NAME: string = 'Autocomplete';
-
 /**
  * The Autocomplete is a normal text input enhanced by a panel of suggested options.
  *
@@ -57,15 +53,12 @@ const COMPONENT_NAME: string = 'Autocomplete';
  * @param ref - The ref to be forwarded to the MuiAccordion component.
  * @returns The rendered Accordion component.
  */
-const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<any>> & WithWrapperProps = forwardRef(
+const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<any>> = forwardRef(
   ({className, ...rest}: AutocompleteProps<any>, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-autocomplete', className);
 
     return <MuiAutocomplete className={classes} {...rest} ref={ref} />;
   },
-) as ForwardRefExoticComponent<AutocompleteProps<any>> & WithWrapperProps;
-
-Autocomplete.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Autocomplete.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<AutocompleteProps<any>>;
 
 export default Autocomplete;