[Badge][material] Replace BadgeUnstyled with useBadge hook

docs/pages/material-ui/api/badge.json

@@ -96,7 +96,7 @@
   "spread": true,
   "forwardsRefTo": "HTMLSpanElement",
   "filename": "/packages/mui-material/src/Badge/Badge.js",
-  "inheritance": { "component": "BadgeUnstyled", "pathname": "/base/api/badge-unstyled/" },
+  "inheritance": null,
   "demos": "<ul><li><a href=\"/material-ui/react-avatar/\">Avatar</a></li>\n<li><a href=\"/material-ui/react-badge/\">Badge</a></li></ul>",
   "cssComponent": false
 }

packages/mui-material/src/Badge/Badge.d.ts

@@ -102,7 +102,6 @@ export declare const BadgeMark: React.FC<BadgeBadgeProps>;
  * API:
  *
  * - [Badge API](https://mui.com/material-ui/api/badge/)
- * - inherits [BadgeUnstyled API](https://mui.com/base/api/badge-unstyled/)
  */
 declare const Badge: OverridableComponent<BadgeTypeMap>;
 

packages/mui-material/src/Badge/Badge.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
 import composeClasses from '@mui/base/composeClasses';
-import BadgeUnstyled from '@mui/base/BadgeUnstyled';
+import { useBadge } from '@mui/base/BadgeUnstyled';
+import { useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 
@@ -200,13 +200,15 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
       horizontal: 'right',
     },
     className,
-    component = 'span',
+    classes: classesProp,
+    component,
     components = {},
     componentsProps = {},
+    children,
     overlap: overlapProp = 'rectangular',
     color: colorProp = 'default',
     invisible: invisibleProp = false,
-    max,
+    max: maxProp = 99,
     badgeContent: badgeContentProp,
     slots,
     slotProps,
@@ -215,21 +217,27 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
     ...other
   } = props;
 
+  const {
+    badgeContent,
+    invisible: invisibleFromHook,
+    max,
+    displayValue: displayValueFromHook,
+  } = useBadge({
+    max: maxProp,
+    invisible: invisibleProp,
+    badgeContent: badgeContentProp,
+    showZero,
+  });
+
   const prevProps = usePreviousProps({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
     overlap: overlapProp,
     variant: variantProp,
+    badgeContent: badgeContentProp,
   });
 
-  let invisible = invisibleProp;
-
-  if (
-    invisibleProp === false &&
-    ((badgeContentProp === 0 && !showZero) || (badgeContentProp == null && variantProp !== 'dot'))
-  ) {
-    invisible = true;
-  }
+  const invisible = invisibleFromHook || (badgeContent == null && variantProp !== 'dot');
 
   const {
     color = colorProp,
@@ -238,15 +246,22 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
     variant = variantProp,
   } = invisible ? prevProps : props;
 
-  const ownerState = { ...props, anchorOrigin, invisible, color, overlap, variant };
-  const classes = useUtilityClasses(ownerState);
+  const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
 
-  let displayValue;
+  const ownerState = {
+    ...props,
+    badgeContent,
+    invisible,
+    max,
+    displayValue,
+    showZero,
+    anchorOrigin,
+    color,
+    overlap,
+    variant,
+  };
 
-  if (variant !== 'dot') {
-    displayValue =
-      badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
-  }
+  const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
   const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
@@ -255,48 +270,30 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
   const rootSlotProps = slotProps?.root ?? componentsProps.root;
   const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
 
+  const rootProps = useSlotProps({
+    elementType: RootSlot,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref,
+      as: component,
+    },
+    ownerState,
+    className: clsx(rootSlotProps?.className, classes.root, className),
+  });
+
+  const badgeProps = useSlotProps({
+    elementType: BadgeSlot,
+    externalSlotProps: badgeSlotProps,
+    ownerState,
+    className: clsx(classes.badge, badgeSlotProps?.className),
+  });
+
   return (
-    <BadgeUnstyled
-      invisible={invisibleProp}
-      badgeContent={displayValue}
-      showZero={showZero}
-      max={max}
-      {...other}
-      slots={{
-        root: RootSlot,
-        badge: BadgeSlot,
-      }}
-      className={clsx(rootSlotProps?.className, classes.root, className)}
-      slotProps={{
-        root: {
-          ...rootSlotProps,
-          ...(shouldSpreadAdditionalProps(RootSlot) && {
-            as: component,
-            ownerState: {
-              ...rootSlotProps?.ownerState,
-              anchorOrigin,
-              color,
-              overlap,
-              variant,
-            },
-          }),
-        },
-        badge: {
-          ...badgeSlotProps,
-          className: clsx(classes.badge, badgeSlotProps?.className),
-          ...(shouldSpreadAdditionalProps(BadgeSlot) && {
-            ownerState: {
-              ...badgeSlotProps?.ownerState,
-              anchorOrigin,
-              color,
-              overlap,
-              variant,
-            },
-          }),
-        },
-      }}
-      ref={ref}
-    />
+    <RootSlot {...rootProps}>
+      {children}
+      <BadgeSlot {...badgeProps}>{displayValue}</BadgeSlot>
+    </RootSlot>
   );
 });
 

packages/mui-material/src/Badge/Badge.test.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { BadgeUnstyled } from '@mui/base';
 import { createRenderer, describeConformance } from 'test/utils';
 import Badge, { badgeClasses as classes } from '@mui/material/Badge';
 
@@ -30,7 +29,7 @@ describe('<Badge />', () => {
     </Badge>,
     () => ({
       classes,
-      inheritComponent: BadgeUnstyled,
+      inheritComponent: 'span',
       render,
       refInstanceof: window.HTMLSpanElement,
       muiName: 'MuiBadge',