From 32ad245ecf17a120c9119ac8405491d560a7671c Mon Sep 17 00:00:00 2001 From: Nicolas Theodarus Date: Wed, 26 Apr 2023 17:22:13 +0200 Subject: [PATCH 1/5] drop component prop --- .../data/base/components/snackbar/snackbar.md | 25 +++++++++++++------ docs/pages/base/api/snackbar.json | 1 - .../api-docs-base/snackbar/snackbar.json | 1 - packages/mui-base/src/Snackbar/Snackbar.tsx | 13 +++------- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/data/base/components/snackbar/snackbar.md b/docs/data/base/components/snackbar/snackbar.md index bcde227f3114bd..c1ec6b50390ec1 100644 --- a/docs/data/base/components/snackbar/snackbar.md +++ b/docs/data/base/components/snackbar/snackbar.md @@ -58,17 +58,26 @@ The Snackbar component is composed of a single root `
` slot with no interio
snackbar content
``` -### Slot props +### Custom structure -:::info -The following props are available on all non-utility Base components. -See [Usage](/base/getting-started/usage/) for full details. -::: - -Use the `component` prop to override the root slot with a custom element: +Use the `slots.root` prop to override the root slot with a custom element: ```jsx - + +``` + +#### Usage with TypeScript + +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.tsx b/packages/mui-base/src/Snackbar/Snackbar.tsx index 2d3e3d03964fe1..14b947efe08ccc 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 From 1b8c90228211bb7690a14764fb4d96af32f021b2 Mon Sep 17 00:00:00 2001 From: Nicolas Theodarus Date: Wed, 26 Apr 2023 18:03:15 +0200 Subject: [PATCH 2/5] fix error on checks --- packages/mui-base/src/Snackbar/Snackbar.test.tsx | 1 + 1 file changed, 1 insertion(+) 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'], }), ); From 55befd870ae37bcdffe1b165213c97c694a7e1de Mon Sep 17 00:00:00 2001 From: Nicolas Theodarus Date: Wed, 26 Apr 2023 18:03:25 +0200 Subject: [PATCH 3/5] fix error on checks --- packages/mui-base/src/Snackbar/Snackbar.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/mui-base/src/Snackbar/Snackbar.tsx b/packages/mui-base/src/Snackbar/Snackbar.tsx index 14b947efe08ccc..3f159ff5511867 100644 --- a/packages/mui-base/src/Snackbar/Snackbar.tsx +++ b/packages/mui-base/src/Snackbar/Snackbar.tsx @@ -133,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, @@ -148,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. */ From abfe5be81a8803ba2c1ce16da8cd0331dd5343e6 Mon Sep 17 00:00:00 2001 From: Nicolas Theodarus Date: Thu, 27 Apr 2023 16:32:13 +0200 Subject: [PATCH 4/5] change OverrideProps to PolymorphicProps --- packages/mui-base/src/Snackbar/Snackbar.types.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) 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; From c06fcd24b4d3b1bc16eb28b6139bc3e5936a8dd7 Mon Sep 17 00:00:00 2001 From: Nicolas Theodarus Date: Fri, 28 Apr 2023 14:37:52 +0200 Subject: [PATCH 5/5] edit markdown explanation --- docs/data/base/components/snackbar/snackbar.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/data/base/components/snackbar/snackbar.md b/docs/data/base/components/snackbar/snackbar.md index c1ec6b50390ec1..09b315abe060b5 100644 --- a/docs/data/base/components/snackbar/snackbar.md +++ b/docs/data/base/components/snackbar/snackbar.md @@ -60,12 +60,15 @@ The Snackbar component is composed of a single root `
` slot with no interio ### Custom structure -Use the `slots.root` prop to override the root slot with a custom element: - ```jsx ``` +:::info +The `slots` prop is available on all non-utility Base components. +See [Overriding component structure](/base/guides/overriding-component-structure/) for full details. +::: + #### Usage with TypeScript 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: