diff --git a/docs/data/base/components/snackbar/snackbar.md b/docs/data/base/components/snackbar/snackbar.md index bcde227f3114bd..09b315abe060b5 100644 --- a/docs/data/base/components/snackbar/snackbar.md +++ b/docs/data/base/components/snackbar/snackbar.md @@ -58,17 +58,29 @@ The Snackbar component is composed of a single root `
` slot with no interio
snackbar content
``` -### Slot props +### Custom structure + +```jsx + +``` :::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 - +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 + slots={{ root: CustomComponent }} customProp /> +``` + +The same applies for props specific to custom primitive elements: + +```tsx + slots={{ root: 'button' }} onClick={() => {}} /> ``` ## Hook diff --git a/docs/pages/base/api/snackbar.json b/docs/pages/base/api/snackbar.json index 411231ca31eb61..a0b22480955a9c 100644 --- a/docs/pages/base/api/snackbar.json +++ b/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" } }, diff --git a/docs/translations/api-docs-base/snackbar/snackbar.json b/docs/translations/api-docs-base/snackbar/snackbar.json index 6c4f7ffd1ef1fd..256e9ea68748c1 100644 --- a/docs/translations/api-docs-base/snackbar/snackbar.json +++ b/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 onClose function. onClose should then set the state of the open prop to hide the Snackbar. This behavior is disabled by default with the null value.", - "component": "The component used for the root node. Either a string to use a HTML element or a component.", "disableWindowBlurListener": "If true, the autoHideDuration 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 onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway.

Signature:
function(event: React.SyntheticEvent<any> | Event, reason: string) => void
event: The event source of the callback.
reason: Can be: "timeout" (autoHideDuration expired), "clickaway", or "escapeKeyDown".", diff --git a/packages/mui-base/src/Snackbar/Snackbar.test.tsx b/packages/mui-base/src/Snackbar/Snackbar.test.tsx index 1a35520c47af31..a172080a18ab0a 100644 --- a/packages/mui-base/src/Snackbar/Snackbar.test.tsx +++ b/packages/mui-base/src/Snackbar/Snackbar.test.tsx @@ -46,6 +46,7 @@ describe('', () => { expectedClassName: classes.root, }, }, + skip: ['componentProp'], }), ); diff --git a/packages/mui-base/src/Snackbar/Snackbar.tsx b/packages/mui-base/src/Snackbar/Snackbar.tsx index 2d3e3d03964fe1..3f159ff5511867 100644 --- a/packages/mui-base/src/Snackbar/Snackbar.tsx +++ b/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 = useSlotProps({ elementType: Root, @@ -106,7 +104,7 @@ const Snackbar = React.forwardRef(function Snackbar{children} ); -}) as OverridableComponent; +}) as PolymorphicComponent; 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. */ diff --git a/packages/mui-base/src/Snackbar/Snackbar.types.ts b/packages/mui-base/src/Snackbar/Snackbar.types.ts index eac50b9f1eb636..0f9925ae44d2f1 100644 --- a/packages/mui-base/src/Snackbar/Snackbar.types.ts +++ b/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, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; export type SnackbarOwnerState = SnackbarOwnProps;