[Snackbar][base] Drop component prop (#37041)

Author: nicolas-ot

docs/data/base/components/snackbar/snackbar.md

@@ -58,17 +58,29 @@ The Snackbar component is composed of a single root `<div>` slot with no interio
 <div role="presentation" className="BaseSnackbar-root">snackbar content</div>
 ```
 
-### Slot props
+### Custom structure
+
+```jsx
+<Snackbar slots={{ root: 'span' }} />
+```
 
 :::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
-Use the `component` prop to override the root slot with a custom element:
+#### Usage with TypeScript
 
-```jsx
-<Snackbar component="span" />
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom component's props directly on the component:
+
+```tsx
+<Snackbar<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Snackbar<'button'> slots={{ root: 'button' }} onClick={() => {}} />
 ```
 
 ## Hook

docs/pages/base/api/snackbar.json

@@ -1,7 +1,6 @@
 {
   "props": {
     "autoHideDuration": { "type": { "name": "number" }, "default": "null" },
-    "component": { "type": { "name": "elementType" } },
     "disableWindowBlurListener": { "type": { "name": "bool" }, "default": "false" },
     "exited": { "type": { "name": "bool" }, "default": "true" },
     "onClose": { "type": { "name": "func" } },

docs/translations/api-docs-base/snackbar/snackbar.json

@@ -2,7 +2,6 @@
   "componentDescription": "",
   "propDescriptions": {
     "autoHideDuration": "The number of milliseconds to wait before automatically calling the <code>onClose</code> function. <code>onClose</code> should then set the state of the <code>open</code> prop to hide the Snackbar. This behavior is disabled by default with the <code>null</code> value.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disableWindowBlurListener": "If <code>true</code>, the <code>autoHideDuration</code> timer will expire even if the window is not focused.",
     "exited": "The prop used to handle exited transition and unmount the component.",
     "onClose": "Callback fired when the component requests to be closed. Typically <code>onClose</code> is used to set state in the parent component, which is used to control the <code>Snackbar</code> <code>open</code> prop. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>, for example ignoring <code>clickaway</code>.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent&lt;any&gt; | Event, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;timeout&quot;</code> (<code>autoHideDuration</code> expired), <code>&quot;clickaway&quot;</code>, or <code>&quot;escapeKeyDown&quot;</code>.",

packages/mui-base/src/Snackbar/Snackbar.test.tsx

@@ -46,6 +46,7 @@ describe('<Snackbar />', () => {
           expectedClassName: classes.root,
         },
       },
+      skip: ['componentProp'],
     }),
   );
 

packages/mui-base/src/Snackbar/Snackbar.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import ClickAwayListener from '../ClickAwayListener';
 import {
   SnackbarOwnerState,
@@ -12,7 +11,7 @@ import {
 import composeClasses from '../composeClasses';
 import { getSnackbarUtilityClass } from './snackbarClasses';
 import useSnackbar from '../useSnackbar';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 
 const useUtilityClasses = () => {
@@ -40,7 +39,6 @@ const Snackbar = React.forwardRef(function Snackbar<RootComponentType extends Re
   const {
     autoHideDuration = null,
     children,
-    component,
     disableWindowBlurListener = false,
     exited = true,
     onBlur,
@@ -68,7 +66,7 @@ const Snackbar = React.forwardRef(function Snackbar<RootComponentType extends Re
 
   const ownerState: SnackbarOwnerState = props;
 
-  const Root = component || slots.root || 'div';
+  const Root = slots.root || 'div';
 
   const rootProps: WithOptionalOwnerState<SnackbarRootSlotProps> = useSlotProps({
     elementType: Root,
@@ -106,7 +104,7 @@ const Snackbar = React.forwardRef(function Snackbar<RootComponentType extends Re
       <Root {...rootProps}>{children}</Root>
     </ClickAwayListener>
   );
-}) as OverridableComponent<SnackbarTypeMap>;
+}) as PolymorphicComponent<SnackbarTypeMap>;
 
 Snackbar.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -125,11 +123,6 @@ Snackbar.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
    * @default false
@@ -140,10 +133,6 @@ Snackbar.propTypes /* remove-proptypes */ = {
    * @default true
    */
   exited: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
   /**
    * Callback fired when the component requests to be closed.
    * Typically `onClose` is used to set state in the parent component,
@@ -155,18 +144,6 @@ Snackbar.propTypes /* remove-proptypes */ = {
    * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
    */
   onClose: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseEnter: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: PropTypes.func,
   /**
    * If `true`, the component is shown.
    */

packages/mui-base/src/Snackbar/Snackbar.types.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
 import ClickAwayListener, { ClickAwayListenerProps } from '../ClickAwayListener';
 import { UseSnackbarParameters } from '../useSnackbar';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface SnackbarRootSlotPropsOverrides {}
 export interface SnackbarClickAwayListenerSlotPropsOverrides {}
@@ -52,9 +51,7 @@ export interface SnackbarTypeMap<
 
 export type SnackbarProps<
   RootComponentType extends React.ElementType = SnackbarTypeMap['defaultComponent'],
-> = OverrideProps<SnackbarTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<SnackbarTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type SnackbarOwnerState = SnackbarOwnProps;