wso2 · brionmario · Oct 9, 2024
diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
@@ -27,9 +27,7 @@ export type AccordionProps = MuiAccordionProps;
 
 const COMPONENT_NAME: string = 'Accordion';
 
-const Accordion: FC<AccordionProps> & WithWrapperProps = (props: AccordionProps): ReactElement => {
-  const {className, ...rest} = props;
-
+const Accordion: FC<AccordionProps> & WithWrapperProps = ({className, ...rest}: AccordionProps): ReactElement => {
   const classes: string = clsx('oxygen-accordion', className);
 
   return <MuiAccordion className={classes} {...rest} />;

diff --git a/packages/react/src/components/AccordionDetails/AccordionDetails.tsx b/packages/react/src/components/AccordionDetails/AccordionDetails.tsx
@@ -27,9 +27,7 @@ export type AccordionDetailsProps = MuiAccordionDetailsProps;
 const COMPONENT_NAME: string = 'AccordionDetails';
 
 const AccordionDetails: ForwardRefExoticComponent<AccordionDetailsProps> & WithWrapperProps = forwardRef(
-  (props: AccordionDetailsProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: AccordionDetailsProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-accordion-details', className);
 
     return <MuiAccordionDetails className={classes} {...rest} ref={ref} />;
@@ -38,6 +36,5 @@ const AccordionDetails: ForwardRefExoticComponent<AccordionDetailsProps> & WithW
 
 AccordionDetails.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AccordionDetails.muiName = COMPONENT_NAME;
-AccordionDetails.defaultProps = {};
 
 export default AccordionDetails;
diff --git a/packages/react/src/components/AccordionSummary/AccordionSummary.tsx b/packages/react/src/components/AccordionSummary/AccordionSummary.tsx
@@ -27,9 +27,7 @@ export type AccordionSummaryProps = MuiAccordionSummaryProps;
 const COMPONENT_NAME: string = 'AccordionSummary';
 
 const AccordionSummary: ForwardRefExoticComponent<AccordionSummaryProps> & WithWrapperProps = forwardRef(
-  (props: AccordionSummaryProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: AccordionSummaryProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-accordion-summary', className);
 
     return <MuiAccordionSummary className={classes} {...rest} ref={ref} />;
@@ -38,6 +36,5 @@ const AccordionSummary: ForwardRefExoticComponent<AccordionSummaryProps> & WithW
 
 AccordionSummary.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AccordionSummary.muiName = COMPONENT_NAME;
-AccordionSummary.defaultProps = {};
 
 export default AccordionSummary;
diff --git a/packages/react/src/components/AccountOverview/AccountOverview.tsx b/packages/react/src/components/AccountOverview/AccountOverview.tsx
@@ -66,19 +66,17 @@ export type AccountCompletionSteps = CarouselStep;
 
 const COMPONENT_NAME: string = 'AccountOverview';
 
-const AccountOverview: FC<AccountOverviewProps> & WithWrapperProps = (props: AccountOverviewProps): ReactElement => {
-  const {
-    className,
-    title,
-    subheader,
-    accountCompletionStepsTitle,
-    accountCompletionSteps,
-    accountProgress,
-    user,
-    cardHeaderProps,
-    ...rest
-  } = props;
-
+const AccountOverview: FC<AccountOverviewProps> & WithWrapperProps = ({
+  className,
+  title,
+  subheader,
+  accountCompletionStepsTitle,
+  accountCompletionSteps,
+  accountProgress,
+  user,
+  cardHeaderProps,
+  ...rest
+}: AccountOverviewProps): ReactElement => {
   const classes: string = clsx('oxygen-account-overview', className);
 
   return (

diff --git a/packages/react/src/components/ActionCard/ActionCard.tsx b/packages/react/src/components/ActionCard/ActionCard.tsx
@@ -52,9 +52,15 @@ export interface ActionCardProps extends CardProps {
 
 const COMPONENT_NAME: string = 'ActionCard';
 
-const ActionCard: FC<ActionCardProps> & WithWrapperProps = (props: ActionCardProps): ReactElement => {
-  const {className, image, title, description, actionText, onActionClick, ...rest} = props;
-
+const ActionCard: FC<ActionCardProps> & WithWrapperProps = ({
+  className,
+  image,
+  title,
+  description,
+  actionText,
+  onActionClick,
+  ...rest
+}: ActionCardProps): ReactElement => {
   const classes: string = clsx('oxygen-action-card', className);
 
   return (
@@ -75,6 +81,5 @@ const ActionCard: FC<ActionCardProps> & WithWrapperProps = (props: ActionCardPro
 
 ActionCard.displayName = composeComponentDisplayName(COMPONENT_NAME);
 ActionCard.muiName = COMPONENT_NAME;
-ActionCard.defaultProps = {};
 
 export default ActionCard;
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
@@ -28,9 +28,7 @@ export type AlertProps = MuiAlertProps;
 const COMPONENT_NAME: string = 'Alert';
 
 const Alert: ForwardRefExoticComponent<AlertProps> & WithWrapperProps = forwardRef(
-  (props: AlertProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: AlertProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-alert', className);
 
     return <MuiAlert className={classes} {...rest} ref={ref} />;
@@ -39,6 +37,5 @@ const Alert: ForwardRefExoticComponent<AlertProps> & WithWrapperProps = forwardR
 
 Alert.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Alert.muiName = COMPONENT_NAME;
-Alert.defaultProps = {};
 
 export default Alert;
diff --git a/packages/react/src/components/AlertTitle/AlertTitle.tsx b/packages/react/src/components/AlertTitle/AlertTitle.tsx
@@ -28,9 +28,7 @@ export type AlertProps = MuiAlertProps;
 const COMPONENT_NAME: string = 'AlertTitle';
 
 const AlertTitle: ForwardRefExoticComponent<AlertProps> & WithWrapperProps = forwardRef(
-  (props: AlertProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: AlertProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-alert-title', className);
 
     return <MuiAlertTitle className={classes} {...rest} ref={ref} />;
@@ -39,6 +37,5 @@ const AlertTitle: ForwardRefExoticComponent<AlertProps> & WithWrapperProps = for
 
 AlertTitle.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AlertTitle.muiName = COMPONENT_NAME;
-AlertTitle.defaultProps = {};
 
 export default AlertTitle;
diff --git a/packages/react/src/components/AppBar/AppBar.tsx b/packages/react/src/components/AppBar/AppBar.tsx
@@ -27,16 +27,13 @@ export type AppBarProps = MuiAppBarProps;
 
 const COMPONENT_NAME: string = 'AppBar';
 
-const AppBar: FC<AppBarProps> & WithWrapperProps = (props: AppBarProps): ReactElement => {
-  const {className, ...rest} = props;
-
+const AppBar: FC<AppBarProps> & WithWrapperProps = ({className, ...rest}: AppBarProps): ReactElement => {
   const classes: string = clsx('oxygen-app-bar', className);
 
   return <MuiAppBar className={classes} {...rest} />;
 };
 
 AppBar.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AppBar.muiName = COMPONENT_NAME;
-AppBar.defaultProps = {};
 
 export default AppBar;
diff --git a/packages/react/src/components/AppShell/AppShell.tsx b/packages/react/src/components/AppShell/AppShell.tsx
@@ -40,11 +40,14 @@ export interface AppShellProps extends BoxProps {
 
 const COMPONENT_NAME: string = 'AppShell';
 
-const AppShell: FC<PropsWithChildren<AppShellProps>> & WithWrapperProps = (
-  props: PropsWithChildren<AppShellProps>,
-): ReactElement => {
-  const {className, children, footer, header, navigation, ...rest} = props;
-
+const AppShell: FC<PropsWithChildren<AppShellProps>> & WithWrapperProps = ({
+  className,
+  children,
+  footer,
+  header,
+  navigation,
+  ...rest
+}: PropsWithChildren<AppShellProps>): ReactElement => {
   const classes: string = clsx('oxygen-app-shell', className);
 
   return (
@@ -65,6 +68,5 @@ const AppShell: FC<PropsWithChildren<AppShellProps>> & WithWrapperProps = (
 
 AppShell.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AppShell.muiName = COMPONENT_NAME;
-AppShell.defaultProps = {};
 
 export default AppShell;
diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx
@@ -31,9 +31,7 @@ const COMPONENT_NAME: string = 'Autocomplete';
  * @remarks `any` is used as the generic type for the props because the generic type is not used in the component.
  */
 const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<any>> & WithWrapperProps = forwardRef(
-  (props: AutocompleteProps<any>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: AutocompleteProps<any>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-autocomplete', className);
 
     return <MuiAutocomplete className={classes} {...rest} ref={ref} />;
@@ -42,6 +40,5 @@ const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<any>> & WithWrap
 
 Autocomplete.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Autocomplete.muiName = COMPONENT_NAME;
-Autocomplete.defaultProps = {};
 
 export default Autocomplete;
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
@@ -37,13 +37,18 @@ export type AvatarProps<C extends ElementType = ElementType> = {
    * If `true`, the background color will be randomly generated.
    */
   randomBackgroundColor?: boolean;
-} & Omit<MuiAvatarProps<C>, 'component'>;
+} & Omit<MuiAvatarProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Avatar';
 
-const Avatar: FC<AvatarProps> & WithWrapperProps = <C extends ElementType>(props: AvatarProps<C>): ReactElement => {
-  const {className, children, component, randomBackgroundColor, backgroundColorRandomizer, ...rest} = props;
-
+const Avatar: FC<AvatarProps> & WithWrapperProps = <C extends ElementType>({
+  className,
+  children,
+  component,
+  randomBackgroundColor,
+  backgroundColorRandomizer,
+  ...rest
+}: AvatarProps<C>): ReactElement => {
   const colorRandomizer: string = useMemo(() => {
     if (backgroundColorRandomizer) {
       return backgroundColorRandomizer;
@@ -74,6 +79,5 @@ const Avatar: FC<AvatarProps> & WithWrapperProps = <C extends ElementType>(props
 
 Avatar.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Avatar.muiName = COMPONENT_NAME;
-Avatar.defaultProps = {};
 
 export default Avatar;
diff --git a/packages/react/src/components/Backdrop/Backdrop.tsx b/packages/react/src/components/Backdrop/Backdrop.tsx
@@ -27,16 +27,13 @@ export type BackdropProps = MuiBackdropProps;
 
 const COMPONENT_NAME: string = 'Backdrop';
 
-const Backdrop: FC<BackdropProps> & WithWrapperProps = (props: BackdropProps): ReactElement => {
-  const {className, ...rest} = props;
-
+const Backdrop: FC<BackdropProps> & WithWrapperProps = ({className, ...rest}: BackdropProps): ReactElement => {
   const classes: string = clsx('oxygen-backdrop', className);
 
   return <MuiBackdrop className={classes} {...rest} />;
 };
 
 Backdrop.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Backdrop.muiName = COMPONENT_NAME;
-Backdrop.defaultProps = {};
 
 export default Backdrop;
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
@@ -27,9 +27,7 @@ export type BadgeProps = MuiBadgeProps;
 
 const COMPONENT_NAME: string = 'Badge';
 
-const Badge: FC<BadgeProps> & WithWrapperProps = (props: BadgeProps): ReactElement => {
-  const {className, ...rest} = props;
-
+const Badge: FC<BadgeProps> & WithWrapperProps = ({className, ...rest}: BadgeProps): ReactElement => {
   const classes: string = clsx('oxygen-badge', className);
 
   return <MuiBadge className={classes} {...rest} />;

diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
@@ -24,14 +24,12 @@ import {composeComponentDisplayName} from '../../utils';
 
 export type BoxProps<C extends ElementType = ElementType> = {
   component?: C;
-} & Omit<MuiBoxProps<C>, 'component'>;
+} & Omit<MuiBoxProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Box';
 
 const Box: ForwardRefExoticComponent<BoxProps> & WithWrapperProps = forwardRef(
-  <C extends ElementType>(props: BoxProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  <C extends ElementType>({className, ...rest}: BoxProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-box', className);
 
     return <MuiBox className={classes} ref={ref} {...rest} />;
@@ -40,6 +38,5 @@ const Box: ForwardRefExoticComponent<BoxProps> & WithWrapperProps = forwardRef(
 
 Box.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Box.muiName = COMPONENT_NAME;
-Box.defaultProps = {};
 
 export default Box;
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -27,9 +27,11 @@ export type BreadcrumbsProps = MuiBreadcrumbsProps;
 
 const COMPONENT_NAME: string = 'Breadcrumbs';
 
-const Breadcrumbs: FC<BreadcrumbsProps> & WithWrapperProps = (props: BreadcrumbsProps): ReactElement => {
-  const {className, children, ...rest} = props;
-
+const Breadcrumbs: FC<BreadcrumbsProps> & WithWrapperProps = ({
+  className,
+  children,
+  ...rest
+}: BreadcrumbsProps): ReactElement => {
   const classes: string = clsx('oxygen-breadcrumbs', className);
 
   return (
@@ -41,6 +43,5 @@ const Breadcrumbs: FC<BreadcrumbsProps> & WithWrapperProps = (props: Breadcrumbs
 
 Breadcrumbs.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Breadcrumbs.muiName = 'Breadcrumbs';
-Breadcrumbs.defaultProps = {};
 
 export default Breadcrumbs;
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
@@ -27,9 +27,7 @@ export type ButtonProps = MuiButtonProps;
 
 const COMPONENT_NAME: string = 'Button';
 
-const Button: FC<ButtonProps> & WithWrapperProps = (props: ButtonProps): ReactElement => {
-  const {className, ...rest} = props;
-
+const Button: FC<ButtonProps> & WithWrapperProps = ({className, ...rest}: ButtonProps): ReactElement => {
   const classes: string = clsx('oxygen-button', className);
 
   return <MuiButton className={classes} {...rest} />;

diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
@@ -25,25 +25,24 @@ import './card.scss';
 
 export type CardProps<C extends ElementType = ElementType> = {
   component?: C;
-} & Omit<MuiCardProps<C>, 'component'>;
+} & Omit<MuiCardProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Card';
 
 const Card: ForwardRefExoticComponent<CardProps> & WithWrapperProps = forwardRef(
-  <C extends ElementType>(props: CardProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, component, onClick, ...rest} = props;
-
+  <C extends ElementType>(
+    {className, component, onClick, elevation = 0, variant = 'outlined', ...rest}: CardProps<C>,
+    ref: MutableRefObject<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-card', {'with-hover': onClick}, className);
 
-    return <MuiCard className={classes} ref={ref} onClick={onClick} {...rest} />;
+    return (
+      <MuiCard className={classes} ref={ref} onClick={onClick} elevation={elevation} variant={variant} {...rest} />
+    );
   },
 ) as ForwardRefExoticComponent<CardProps> & WithWrapperProps;
 
 Card.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Card.muiName = COMPONENT_NAME;
-Card.defaultProps = {
-  elevation: 0,
-  variant: 'outlined',
-};
 
 export default Card;
diff --git a/packages/react/src/components/CardActions/CardActions.tsx b/packages/react/src/components/CardActions/CardActions.tsx
@@ -27,9 +27,7 @@ export type CardActionsProps = MuiCardActionsProps;
 
 const COMPONENT_NAME: string = 'CardActions';
 
-const CardActions: FC<CardActionsProps> & WithWrapperProps = (props: CardActionsProps): ReactElement => {
-  const {className, ...rest} = props;
-
+const CardActions: FC<CardActionsProps> & WithWrapperProps = ({className, ...rest}: CardActionsProps): ReactElement => {
   const classes: string = clsx('oxygen-card-actions', className);
 
   return <MuiCardActions className={classes} {...rest} />;

diff --git a/packages/react/src/components/CardContent/CardContent.tsx b/packages/react/src/components/CardContent/CardContent.tsx
@@ -28,9 +28,7 @@ export type CardContentProps = MuiCardContentProps;
 const COMPONENT_NAME: string = 'CardContent';
 
 const CardContent: ForwardRefExoticComponent<CardContentProps> & WithWrapperProps = forwardRef(
-  (props: CardContentProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: CardContentProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-card-content', className);
 
     return <MuiCardContent ref={ref} className={classes} {...rest} />;

diff --git a/packages/react/src/components/CardHeader/CardHeader.tsx b/packages/react/src/components/CardHeader/CardHeader.tsx
@@ -27,9 +27,7 @@ export type CardHeaderProps = MuiCardHeaderProps;
 
 const COMPONENT_NAME: string = 'CardHeader';
 
-const CardHeader: FC<CardHeaderProps> & WithWrapperProps = (props: CardHeaderProps): ReactElement => {
-  const {className, ...rest} = props;
-
+const CardHeader: FC<CardHeaderProps> & WithWrapperProps = ({className, ...rest}: CardHeaderProps): ReactElement => {
   const classes: string = clsx('oxygen-card-header', className);
 
   return <MuiCardHeader className={classes} {...rest} />;