Remove suffix Unstyled from all components and fix imports/exports in…

… mui-base, mui-joy, mui-material and mui-material-next

packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.spec.tsx → packages/mui-base/src/Badge/Badge.spec.tsx

@@ -1,27 +1,24 @@
 import * as React from 'react';
-import BadgeUnstyled, {
-  BadgeUnstyledBadgeSlotProps,
-  BadgeUnstyledRootSlotProps,
-} from '@mui/base/BadgeUnstyled';
+import Badge, { BadgeBadgeSlotProps, BadgeRootSlotProps } from '@mui/base/Badge';
 import { expectType } from '@mui/types';
 
 const Root = React.forwardRef(function Root(
-  props: BadgeUnstyledRootSlotProps,
+  props: BadgeRootSlotProps,
   ref: React.ForwardedRef<HTMLSpanElement>,
 ) {
   const { ownerState, ...other } = props;
   return <span data-showzero={ownerState.showZero} {...other} ref={ref} />;
 });
 
-const Badge = React.forwardRef(function Badge(
-  props: BadgeUnstyledBadgeSlotProps,
+const CustomBadge = React.forwardRef(function CustomBadge(
+  props: BadgeBadgeSlotProps,
   ref: React.ForwardedRef<HTMLSpanElement>,
 ) {
   const { ownerState, ...other } = props;
   return <span data-showzero={ownerState.showZero} {...other} ref={ref} />;
 });
 
-const styledBadge = <BadgeUnstyled slots={{ root: Root, badge: Badge }} />;
+const styledBadge = <Badge slots={{ root: Root, badge: Badge }} />;
 
 const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
@@ -32,20 +29,20 @@ const polymorphicComponentTest = () => {
   return (
     <div>
       {/* @ts-expect-error */}
-      <BadgeUnstyled invalidProp={0} />
+      <Badge invalidProp={0} />
 
-      <BadgeUnstyled component="a" href="#" />
+      <Badge component="a" href="#" />
 
-      <BadgeUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
+      <Badge component={CustomComponent} stringProp="test" numberProp={0} />
       {/* @ts-expect-error */}
-      <BadgeUnstyled component={CustomComponent} />
+      <Badge component={CustomComponent} />
 
-      <BadgeUnstyled
+      <Badge
         component="button"
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
-      <BadgeUnstyled<'button'>
+      <Badge<'button'>
         component="button"
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);

packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.test.tsx → packages/mui-base/src/Badge/Badge.test.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { createRenderer, createMount, describeConformanceUnstyled } from 'test/utils';
-import BadgeUnstyled, { badgeUnstyledClasses as classes } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses as classes } from '@mui/base/Badge';
 
-describe('<BadgeUnstyled />', () => {
+describe('<Badge />', () => {
   const { render } = createRenderer();
   const mount = createMount();
 
   describeConformanceUnstyled(
-    <BadgeUnstyled>
+    <Badge>
       <div />
-    </BadgeUnstyled>,
+    </Badge>,
     () => ({
       classes,
       inheritComponent: 'span',

packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.tsx → packages/mui-base/src/Badge/Badge.tsx

@@ -3,38 +3,38 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '../composeClasses';
 import useBadge from '../useBadge';
-import { getBadgeUnstyledUtilityClass } from './badgeUnstyledClasses';
+import { getBadgeUtilityClass } from './badgeClasses';
 import {
-  BadgeUnstyledProps,
-  BadgeUnstyledOwnerState,
-  BadgeUnstyledTypeMap,
-  BadgeUnstyledRootSlotProps,
-  BadgeUnstyledBadgeSlotProps,
-} from './BadgeUnstyled.types';
+  BadgeProps,
+  BadgeOwnerState,
+  BadgeTypeMap,
+  BadgeRootSlotProps,
+  BadgeBadgeSlotProps,
+} from './Badge.types';
 import { WithOptionalOwnerState, useSlotProps } from '../utils';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 
-const useUtilityClasses = (ownerState: BadgeUnstyledOwnerState) => {
+const useUtilityClasses = (ownerState: BadgeOwnerState) => {
   const { invisible } = ownerState;
 
   const slots = {
     root: ['root'],
     badge: ['badge', invisible && 'invisible'],
   };
 
-  return composeClasses(slots, useClassNamesOverride(getBadgeUnstyledUtilityClass));
+  return composeClasses(slots, useClassNamesOverride(getBadgeUtilityClass));
 };
 /**
  *
  * Demos:
  *
- * - [Unstyled badge](https://mui.com/base/react-badge/)
+ * - [ badge](https://mui.com/base/react-badge/)
  *
  * API:
  *
- * - [BadgeUnstyled API](https://mui.com/base/react-badge/components-api/#badge-unstyled)
+ * - [Badge API](https://mui.com/base/react-badge/components-api/#badge-unstyled)
  */
-const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props: BadgeUnstyledProps, ref) {
+const Badge = React.forwardRef(function Badge(props: BadgeProps, ref) {
   const {
     badgeContent: badgeContentProp,
     component,
@@ -52,7 +52,7 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props: BadgeUnstyl
     max: maxProp,
   });
 
-  const ownerState: BadgeUnstyledOwnerState = {
+  const ownerState: BadgeOwnerState = {
     ...props,
     badgeContent,
     invisible,
@@ -63,7 +63,7 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props: BadgeUnstyl
   const classes = useUtilityClasses(ownerState);
 
   const Root = component || slots.root || 'span';
-  const rootProps: WithOptionalOwnerState<BadgeUnstyledRootSlotProps> = useSlotProps({
+  const rootProps: WithOptionalOwnerState<BadgeRootSlotProps> = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,
     externalForwardedProps: other,
@@ -74,8 +74,8 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props: BadgeUnstyl
     className: classes.root,
   });
 
-  const Badge = slots.badge || 'span';
-  const badgeProps: WithOptionalOwnerState<BadgeUnstyledBadgeSlotProps> = useSlotProps({
+  const BadgeComponent = slots.badge || 'span';
+  const badgeProps: WithOptionalOwnerState<BadgeBadgeSlotProps> = useSlotProps({
     elementType: Badge,
     externalSlotProps: slotProps.badge,
     ownerState,
@@ -85,12 +85,12 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props: BadgeUnstyl
   return (
     <Root {...rootProps}>
       {children}
-      <Badge {...badgeProps}>{displayValue}</Badge>
+      <BadgeComponent {...badgeProps}>{displayValue}</BadgeComponent>
     </Root>
   );
-}) as OverridableComponent<BadgeUnstyledTypeMap>;
+}) as OverridableComponent<BadgeTypeMap>;
 
-BadgeUnstyled.propTypes /* remove-proptypes */ = {
+Badge.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit TypeScript types and run "yarn proptypes"  |
@@ -142,4 +142,4 @@ BadgeUnstyled.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
-export default BadgeUnstyled;
+export default Badge;

packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.types.ts → packages/mui-base/src/Badge/Badge.types.ts

@@ -2,17 +2,17 @@ import * as React from 'react';
 import { OverrideProps, OverridableTypeMap, OverridableComponent } from '@mui/types';
 import { SlotComponentProps } from '../utils';
 
-export interface BadgeUnstyledRootSlotPropsOverrides {}
-export interface BadgeUnstyledBadgeSlotPropsOverrides {}
+export interface BadgeRootSlotPropsOverrides {}
+export interface BadgeBadgeSlotPropsOverrides {}
 
-export type BadgeUnstyledOwnerState = BadgeUnstyledProps & {
+export type BadgeOwnerState = BadgeProps & {
   badgeContent: React.ReactNode;
   invisible: boolean;
   max: number;
   showZero: boolean;
 };
 
-export interface BadgeUnstyledOwnProps {
+export interface BadgeOwnProps {
   /**
    * The content rendered within the badge.
    */
@@ -36,27 +36,23 @@ export interface BadgeUnstyledOwnProps {
    * @default {}
    */
   slotProps?: {
-    root?: SlotComponentProps<'span', BadgeUnstyledRootSlotPropsOverrides, BadgeUnstyledOwnerState>;
-    badge?: SlotComponentProps<
-      'span',
-      BadgeUnstyledBadgeSlotPropsOverrides,
-      BadgeUnstyledOwnerState
-    >;
+    root?: SlotComponentProps<'span', BadgeRootSlotPropsOverrides, BadgeOwnerState>;
+    badge?: SlotComponentProps<'span', BadgeBadgeSlotPropsOverrides, BadgeOwnerState>;
   };
   /**
    * The components used for each slot inside the Badge.
    * Either a string to use a HTML element or a component.
    * @default {}
    */
-  slots?: BadgeUnstyledSlots;
+  slots?: BadgeSlots;
   /**
    * Controls whether the badge is hidden when `badgeContent` is zero.
    * @default false
    */
   showZero?: boolean;
 }
 
-export interface BadgeUnstyledSlots {
+export interface BadgeSlots {
   /**
    * The component that renders the root.
    * @default 'span'
@@ -69,38 +65,35 @@ export interface BadgeUnstyledSlots {
   badge?: React.ElementType;
 }
 
-export interface BadgeUnstyledTypeMap<P = {}, D extends React.ElementType = 'span'> {
-  props: P & BadgeUnstyledOwnProps;
+export interface BadgeTypeMap<P = {}, D extends React.ElementType = 'span'> {
+  props: P & BadgeOwnProps;
   defaultComponent: D;
 }
 
 /**
- * Utility to create component types that inherit props from BadgeUnstyled.
+ * Utility to create component types that inherit props from Badge.
  */
-export interface ExtendBadgeUnstyledTypeMap<M extends OverridableTypeMap> {
-  props: M['props'] & BadgeUnstyledTypeMap['props'];
+export interface ExtendBadgeTypeMap<M extends OverridableTypeMap> {
+  props: M['props'] & BadgeTypeMap['props'];
   defaultComponent: M['defaultComponent'];
 }
 
-export type ExtendBadgeUnstyled<M extends OverridableTypeMap> = OverridableComponent<
-  ExtendBadgeUnstyledTypeMap<M>
->;
+export type ExtendBadge<M extends OverridableTypeMap> = OverridableComponent<ExtendBadgeTypeMap<M>>;
 
-export type BadgeUnstyledProps<
-  D extends React.ElementType = BadgeUnstyledTypeMap['defaultComponent'],
-> = OverrideProps<BadgeUnstyledTypeMap<{}, D>, D> & {
-  component?: D;
-};
+export type BadgeProps<D extends React.ElementType = BadgeTypeMap['defaultComponent']> =
+  OverrideProps<BadgeTypeMap<{}, D>, D> & {
+    component?: D;
+  };
 
-export type BadgeUnstyledRootSlotProps = {
+export type BadgeRootSlotProps = {
   children?: React.ReactNode;
   className?: string;
-  ownerState: BadgeUnstyledOwnerState;
+  ownerState: BadgeOwnerState;
   ref: React.Ref<HTMLSpanElement>;
 };
 
-export type BadgeUnstyledBadgeSlotProps = {
+export type BadgeBadgeSlotProps = {
   className?: string;
   children?: React.ReactNode;
-  ownerState: BadgeUnstyledOwnerState;
+  ownerState: BadgeOwnerState;
 };

packages/mui-base/src/BadgeUnstyled/badgeUnstyledClasses.ts → packages/mui-base/src/Badge/badgeClasses.ts

@@ -1,7 +1,7 @@
 import generateUtilityClasses from '../generateUtilityClasses';
 import generateUtilityClass from '../generateUtilityClass';
 
-export interface BadgeUnstyledClasses {
+export interface BadgeClasses {
   /** Class name applied to the root element. */
   root: string;
   /** Class name applied to the badge `span` element. */
@@ -10,16 +10,16 @@ export interface BadgeUnstyledClasses {
   invisible: string;
 }
 
-export type BadgeUnstyledClassKey = keyof BadgeUnstyledClasses;
+export type BadgeClassKey = keyof BadgeClasses;
 
-export function getBadgeUnstyledUtilityClass(slot: string): string {
+export function getBadgeUtilityClass(slot: string): string {
   return generateUtilityClass('MuiBadge', slot);
 }
 
-const badgeUnstyledClasses: BadgeUnstyledClasses = generateUtilityClasses('MuiBadge', [
+const badgeClasses: BadgeClasses = generateUtilityClasses('MuiBadge', [
   'root',
   'badge',
   'invisible',
 ]);
 
-export default badgeUnstyledClasses;
+export default badgeClasses;

packages/mui-base/src/Badge/index.ts

@@ -0,0 +1,6 @@
+export { default } from './Badge';
+
+export * from './Badge.types';
+
+export { default as badgeClasses } from './badgeClasses';
+export * from './badgeClasses';

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx → packages/mui-base/src/Button/Button.spec.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import ButtonUnstyled, {
-  ButtonUnstyledProps,
-  ButtonUnstyledRootSlotProps,
-} from '@mui/base/ButtonUnstyled';
+import Button, { ButtonProps, ButtonRootSlotProps } from '@mui/base/Button';
 import { expectType } from '@mui/types';
 
-const CustomButtonRoot = React.forwardRef(function CustomButtonRoot(
-  props: ButtonUnstyledRootSlotProps,
-) {
+const CustomButtonRoot = React.forwardRef(function CustomButtonRoot(props: ButtonRootSlotProps) {
   const { ownerState, ...other } = props;
   const classes = clsx(
     other.className,
@@ -19,8 +14,8 @@ const CustomButtonRoot = React.forwardRef(function CustomButtonRoot(
   return <button type="button" {...other} className={classes} />;
 });
 
-function ButtonWithCustomRoot(props: ButtonUnstyledProps) {
-  return <ButtonUnstyled {...props} slots={{ root: CustomButtonRoot }} />;
+function ButtonWithCustomRoot(props: ButtonProps) {
+  return <Button {...props} slots={{ root: CustomButtonRoot }} />;
 }
 
 const polymorphicComponentTest = () => {
@@ -32,20 +27,20 @@ const polymorphicComponentTest = () => {
   return (
     <div>
       {/* @ts-expect-error */}
-      <ButtonUnstyled invalidProp={0} />
+      <Button invalidProp={0} />
 
-      <ButtonUnstyled component="a" href="#" />
+      <Button component="a" href="#" />
 
-      <ButtonUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
+      <Button component={CustomComponent} stringProp="test" numberProp={0} />
       {/* @ts-expect-error */}
-      <ButtonUnstyled component={CustomComponent} />
+      <Button component={CustomComponent} />
 
-      <ButtonUnstyled
+      <Button
         component="button"
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
-      <ButtonUnstyled<'div'>
+      <Button<'div'>
         component="div"
         ref={(elem) => {
           expectType<HTMLDivElement | null, typeof elem>(elem);