update components

Author: siriwatknp

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

@@ -165,7 +165,6 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   const {
     children,
     action,
-    component = 'button',
     color: colorProp = 'primary',
     variant = 'solid',
     size = 'md',
@@ -207,7 +206,6 @@ const Button = React.forwardRef(function Button(inProps, ref) {
 
   const ownerState = {
     ...props,
-    component,
     color,
     fullWidth,
     variant,
@@ -219,28 +217,27 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   };
 
   const classes = useUtilityClasses(ownerState);
-  const externalForwardedProps = { ...other, component };
 
   const [SlotRoot, rootProps] = useSlot('root', {
     ref,
     className: classes.root,
     elementType: ButtonRoot,
-    externalForwardedProps,
+    externalForwardedProps: other,
     getSlotProps: getRootProps,
     ownerState,
   });
 
   const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
     className: classes.startDecorator,
     elementType: ButtonStartDecorator,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
   const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
     className: classes.endDecorator,
     elementType: ButtonEndDecorator,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
@@ -249,7 +246,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     {
       className: classes.loadingIndicatorCenter,
       elementType: ButtonLoadingCenter,
-      externalForwardedProps,
+      externalForwardedProps: other,
       ownerState,
     },
   );
@@ -306,11 +303,6 @@ Button.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false

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

@@ -188,7 +188,6 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
     uncheckedIcon,
     checkedIcon = defaultCheckedIcon,
     label,
-    component = 'span',
     defaultChecked,
     disabled: disabledExternalProp,
     disableIcon = false,
@@ -260,27 +259,26 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
   };
 
   const classes = useUtilityClasses(ownerState);
-  const externalForwardedProps = { ...other, component };
 
   const [SlotRoot, rootProps] = useSlot('root', {
     ref,
     className: classes.root,
     elementType: CheckboxRoot,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
   const [SlotCheckbox, checkboxProps] = useSlot('checkbox', {
     className: classes.checkbox,
     elementType: CheckboxCheckbox,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
   const [SlotAction, actionProps] = useSlot('action', {
     className: classes.action,
     elementType: CheckboxAction,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
@@ -299,7 +297,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
     },
     className: classes.input,
     elementType: CheckboxInput,
-    externalForwardedProps,
+    externalForwardedProps: other,
     getSlotProps: getInputProps,
     ownerState,
   });
@@ -310,7 +308,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
     },
     className: classes.label,
     elementType: CheckboxLabel,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
@@ -363,11 +361,6 @@ Checkbox.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The default checked state. Use when the component is not controlled.
    */

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

@@ -202,7 +202,6 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     children,
     className,
     color = 'primary',
-    component = 'div',
     slotProps = {},
     onClick,
     disabled = false,
@@ -219,7 +218,6 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     disabled,
     size,
     color,
-    component,
     variant,
     clickable,
     focusVisible: false,
@@ -237,7 +235,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   ownerState.focusVisible = focusVisible;
 
   const classes = useUtilityClasses(ownerState);
-  const externalForwardedProps = { ...other, component, slotProps };
+  const externalForwardedProps = { ...other, slotProps };
 
   const [SlotRoot, rootProps] = useSlot('root', {
     ref,
@@ -280,7 +278,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
     className: classes.endDecorator,
     elementType: ChipEndDecorator,
-    externalForwardedProps: { ...other, slotProps },
+    externalForwardedProps,
     ownerState,
   });
 
@@ -329,11 +327,6 @@ Chip.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false

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

@@ -1,10 +1,10 @@
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { css, keyframes } from '@mui/system';
-import { OverridableComponent } from '@mui/types';
-import { unstable_capitalize as capitalize } from '@mui/utils';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
+import clsx from 'clsx';
+import { OverridableComponent } from '@mui/types';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { css, keyframes } from '@mui/system';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useSlot from '../utils/useSlot';
@@ -207,7 +207,6 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
     children,
     className,
     color = 'primary',
-    component = 'span',
     size = 'md',
     variant = 'soft',
     thickness,
@@ -219,7 +218,6 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
   const ownerState = {
     ...props,
     color,
-    component,
     size,
     variant,
     thickness,
@@ -229,13 +227,12 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
   };
 
   const classes = useUtilityClasses(ownerState);
-  const externalForwardedProps = { ...other, component };
 
   const [SlotRoot, rootProps] = useSlot('root', {
     ref,
     className: clsx(classes.root, className),
     elementType: CircularProgressRoot,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
     additionalProps: {
       role: 'progressbar',
@@ -256,21 +253,21 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
   const [SlotSvg, svgProps] = useSlot('svg', {
     className: classes.svg,
     elementType: CircularProgressSvg,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
   const [SlotTrack, trackProps] = useSlot('track', {
     className: classes.track,
     elementType: CircularProgressTrack,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
   const [SlotProgress, progressProps] = useSlot('progress', {
     className: classes.progress,
     elementType: CircularProgressProgress,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
@@ -306,11 +303,6 @@ CircularProgress.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The boolean to select a variant.
    * Use indeterminate when there is no progress value.

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

@@ -166,7 +166,6 @@ const Link = React.forwardRef(function Link(inProps, ref) {
   const props = extendSxProp({ ...themeProps, color: textColor }) as LinkProps;
 
   const {
-    component = 'a',
     children,
     disabled = false,
     onBlur,
@@ -212,7 +211,6 @@ const Link = React.forwardRef(function Link(inProps, ref) {
   const ownerState = {
     ...props,
     color,
-    component,
     disabled,
     focusVisible,
     underline,
@@ -223,7 +221,6 @@ const Link = React.forwardRef(function Link(inProps, ref) {
   };
 
   const classes = useUtilityClasses(ownerState);
-  const externalForwardedProps = { ...other, component };
 
   const [SlotRoot, rootProps] = useSlot('root', {
     additionalProps: {
@@ -233,21 +230,21 @@ const Link = React.forwardRef(function Link(inProps, ref) {
     ref: handleRef,
     className: classes.root,
     elementType: LinkRoot,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
   const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
     className: classes.startDecorator,
     elementType: StartDecorator,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
   const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
     className: classes.endDecorator,
     elementType: EndDecorator,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
@@ -280,11 +277,6 @@ Link.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false

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

@@ -87,7 +87,6 @@ const Modal = React.forwardRef(function ModalUnstyled(inProps, ref) {
 
   const {
     children,
-    component = 'div',
     container,
     disableAutoFocus = false,
     disableEnforceFocus = false,
@@ -227,14 +226,12 @@ const Modal = React.forwardRef(function ModalUnstyled(inProps, ref) {
     }
   };
 
-  const externalForwardedProps = { ...other, component };
-
   const [SlotRoot, rootProps] = useSlot('root', {
     additionalProps: { role: 'presentation', onKeyDown: handleKeyDown },
     ref: handleRef,
     className: classes.root,
     elementType: ModalRoot,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
@@ -246,7 +243,7 @@ const Modal = React.forwardRef(function ModalUnstyled(inProps, ref) {
     },
     className: classes.backdrop,
     elementType: ModalBackdrop,
-    externalForwardedProps,
+    externalForwardedProps: other,
     ownerState,
   });
 
@@ -295,11 +292,6 @@ Modal.propTypes /* remove-proptypes */ = {
    * A single child content element.
    */
   children: elementAcceptingRef.isRequired,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.