[CircularProgress] Apply useSlot()

Author: hbjORbj

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

@@ -1,5 +1,4 @@
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
 import { css, keyframes } from '@mui/system';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
@@ -8,6 +7,7 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import { getCircularProgressUtilityClass } from './circularProgressClasses';
 import {
   CircularProgressOwnerState,
@@ -189,8 +189,6 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
   });
 
   const {
-    componentsProps = {},
-    component = 'span',
     children,
     className,
     color = 'primary',
@@ -215,59 +213,57 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
     elementType: CircularProgressRoot,
-    externalSlotProps: componentsProps.root,
     externalForwardedProps: other,
     ownerState,
     additionalProps: {
-      ref,
-      as: component,
       role: 'progressbar',
       style: {
         // Setting this CSS varaible via inline-style
         // prevents the generation of new CSS every time
         // `value` prop updates
         '--CircularProgress-percent': value,
       },
+      ...(value &&
+        determinate && {
+          'aria-valuenow':
+            typeof value === 'number' ? Math.round(value) : Math.round(Number(value || 0)),
+        }),
     },
-    className: clsx(classes.root, className),
-    ...(value &&
-      determinate && {
-        'aria-valuenow':
-          typeof value === 'number' ? Math.round(value) : Math.round(Number(value || 0)),
-      }),
   });
 
-  const svgProps = useSlotProps({
+  const [SlotSvg, svgProps] = useSlot('svg', {
+    className: classes.svg,
     elementType: CircularProgressSvg,
-    externalSlotProps: componentsProps.svg,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.svg,
   });
 
-  const trackProps = useSlotProps({
+  const [SlotTrack, trackProps] = useSlot('track', {
+    className: classes.track,
     elementType: CircularProgressTrack,
-    externalSlotProps: componentsProps.track,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.track,
   });
 
-  const progressProps = useSlotProps({
+  const [SlotProgress, progressProps] = useSlot('progress', {
+    className: classes.progress,
     elementType: CircularProgressProgress,
-    externalSlotProps: componentsProps.progress,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.progress,
   });
 
   return (
-    <CircularProgressRoot {...rootProps}>
-      <CircularProgressSvg {...svgProps}>
-        <CircularProgressTrack {...trackProps} />
-        <CircularProgressProgress {...progressProps} />
-      </CircularProgressSvg>
+    <SlotRoot {...rootProps}>
+      <SlotSvg {...svgProps}>
+        <SlotTrack {...trackProps} />
+        <SlotProgress {...progressProps} />
+      </SlotSvg>
       {children}
-    </CircularProgressRoot>
+    </SlotRoot>
   );
 }) as OverridableComponent<CircularProgressTypeMap>;
 

packages/mui-joy/src/CircularProgress/CircularProgressProps.ts

@@ -10,10 +10,26 @@ export interface CircularProgressPropsSizeOverrides {}
 export interface CircularProgressPropsVariantOverrides {}
 
 interface ComponentsProps {
-  root?: SlotComponentProps<'span', { sx?: SxProps }, CircularProgressOwnerState>;
-  svg?: SlotComponentProps<'svg', { sx?: SxProps }, CircularProgressOwnerState>;
-  track?: SlotComponentProps<'circle', { sx?: SxProps }, CircularProgressOwnerState>;
-  progress?: SlotComponentProps<'circle', { sx?: SxProps }, CircularProgressOwnerState>;
+  root?: SlotComponentProps<
+    'span',
+    { component?: React.ElementType; sx?: SxProps },
+    CircularProgressOwnerState
+  >;
+  svg?: SlotComponentProps<
+    'svg',
+    { component?: React.ElementType; sx?: SxProps },
+    CircularProgressOwnerState
+  >;
+  track?: SlotComponentProps<
+    'circle',
+    { component?: React.ElementType; sx?: SxProps },
+    CircularProgressOwnerState
+  >;
+  progress?: SlotComponentProps<
+    'circle',
+    { component?: React.ElementType; sx?: SxProps },
+    CircularProgressOwnerState
+  >;
 }
 
 export interface CircularProgressTypeMap<P = {}, D extends React.ElementType = 'span'> {