[Chip, ChipDelete, LinearProgress, CircularProgress] Ensure API doc of component prop is generated + improve code

Author: hbjORbj

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

@@ -201,8 +201,9 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   const {
     children,
     className,
-    componentsProps = {},
     color = 'primary',
+    component = 'div',
+    componentsProps = {},
     onClick,
     disabled = false,
     size = 'md',
@@ -218,6 +219,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     disabled,
     size,
     color,
+    component,
     variant,
     clickable,
     focusVisible: false,
@@ -237,19 +239,20 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   ownerState.focusVisible = focusVisible;
 
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = { ...other, component, componentsProps };
 
   const [SlotRoot, rootProps] = useSlot('root', {
     ref,
     className: clsx(classes.root, className),
     elementType: ChipRoot,
-    externalForwardedProps: { ...other, componentsProps },
+    externalForwardedProps,
     ownerState,
   });
 
   const [SlotLabel, labelProps] = useSlot('label', {
     className: classes.label,
     elementType: ChipLabel,
-    externalForwardedProps: { ...other, componentsProps },
+    externalForwardedProps,
     ownerState,
   });
 
@@ -259,7 +262,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   const [SlotAction, actionProps] = useSlot('action', {
     className: classes.action,
     elementType: ChipAction,
-    externalForwardedProps: { ...other, componentsProps },
+    externalForwardedProps,
     ownerState,
     getSlotProps: getRootProps,
     additionalProps: {
@@ -272,7 +275,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
     className: classes.startDecorator,
     elementType: ChipStartDecorator,
-    externalForwardedProps: { ...other, componentsProps },
+    externalForwardedProps,
     ownerState,
   });
 
@@ -328,6 +331,11 @@ 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,
   /**
    * Replace the default slots.
    */

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

@@ -70,8 +70,8 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
   });
 
   const {
-    component,
     children,
+    component = 'button',
     variant: variantProp,
     color: colorProp,
     disabled: disabledProp,
@@ -93,6 +93,7 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
 
   const ownerState = {
     ...props,
+    component,
     disabled,
     variant,
     color,

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

@@ -207,6 +207,7 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
     children,
     className,
     color = 'primary',
+    component = 'span',
     size = 'md',
     variant = 'soft',
     thickness,
@@ -218,6 +219,7 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
   const ownerState = {
     ...props,
     color,
+    component,
     size,
     variant,
     thickness,
@@ -227,12 +229,13 @@ 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: other,
+    externalForwardedProps,
     ownerState,
     additionalProps: {
       role: 'progressbar',
@@ -253,21 +256,21 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
   const [SlotSvg, svgProps] = useSlot('svg', {
     className: classes.svg,
     elementType: CircularProgressSvg,
-    externalForwardedProps: other,
+    externalForwardedProps,
     ownerState,
   });
 
   const [SlotTrack, trackProps] = useSlot('track', {
     className: classes.track,
     elementType: CircularProgressTrack,
-    externalForwardedProps: other,
+    externalForwardedProps,
     ownerState,
   });
 
   const [SlotProgress, progressProps] = useSlot('progress', {
     className: classes.progress,
     elementType: CircularProgressProgress,
-    externalForwardedProps: other,
+    externalForwardedProps,
     ownerState,
   });
 
@@ -303,6 +306,11 @@ 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,
   /**
    * Replace the default slots.
    */

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

@@ -145,10 +145,10 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
   });
 
   const {
-    component,
     children,
     className,
     color = 'primary',
+    component = 'span',
     size = 'md',
     variant = 'soft',
     thickness,
@@ -160,6 +160,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
   const ownerState = {
     ...props,
     color,
+    component,
     size,
     variant,
     thickness,