diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index bb13692c30afe6..0440b496599b5f 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -536,3 +536,26 @@ Use the `slots` and `slotProps` props instead: + slotProps={{ transition: { unmountOnExit: true } }} > ``` + +#### AvatarGroup deprecated props removed + +Use the [avatar-group-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#avatar-group-props) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/avatar-group-props +``` + +The deprecated `AvatarGroup` props have been removed. +Use the `slotProps` prop instead. The `additionalAvatar` key has been renamed to `surplus`: + +```diff +- ++ +``` + +If you were already using the `surplus` key via `componentsProps`, move it to `slotProps`: + +```diff +- ++ +``` diff --git a/docs/pages/material-ui/api/avatar-group.json b/docs/pages/material-ui/api/avatar-group.json index 881068068800b9..de026972c22e73 100644 --- a/docs/pages/material-ui/api/avatar-group.json +++ b/docs/pages/material-ui/api/avatar-group.json @@ -3,11 +3,6 @@ "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "component": { "type": { "name": "elementType" } }, - "componentsProps": { - "type": { "name": "shape", "description": "{ additionalAvatar?: object }" }, - "deprecated": true, - "deprecationInfo": "use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "max": { "type": { "name": "custom", "description": "number" }, "default": "5" }, "renderSurplus": { "type": { "name": "func" }, @@ -18,10 +13,7 @@ } }, "slotProps": { - "type": { - "name": "shape", - "description": "{ additionalAvatar?: object, surplus?: func
| object }" - }, + "type": { "name": "shape", "description": "{ surplus?: func
| object }" }, "default": "{}" }, "slots": { @@ -74,6 +66,7 @@ "spread": true, "themeDefaultProps": true, "muiName": "MuiAvatarGroup", + "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/AvatarGroup/AvatarGroup.js", "inheritance": null, "demos": "", diff --git a/docs/translations/api-docs/avatar-group/avatar-group.json b/docs/translations/api-docs/avatar-group/avatar-group.json index 25be05228eaf09..30a0ba9c04b286 100644 --- a/docs/translations/api-docs/avatar-group/avatar-group.json +++ b/docs/translations/api-docs/avatar-group/avatar-group.json @@ -6,9 +6,6 @@ "component": { "description": "The component used for the root node. Either a string to use a HTML element or a component." }, - "componentsProps": { - "description": "The extra props for the slot components. You can override the existing props or add new ones.
This prop is an alias for the slotProps prop." - }, "max": { "description": "Max avatars to show before +x." }, "renderSurplus": { "description": "custom renderer of extraAvatars", diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts b/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts index 16fa05550de055..3605938c7074b9 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts @@ -22,11 +22,6 @@ export interface AvatarGroupSlots { export type AvatarGroupSlotsAndSlotProps = CreateSlotsAndSlotProps< AvatarGroupSlots, { - /** - * @deprecated use `slotProps.surplus` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * */ - additionalAvatar: React.ComponentPropsWithRef & - AvatarGroupComponentsPropsOverrides; surplus: SlotProps< React.ElementType>, AvatarGroupComponentsPropsOverrides, @@ -48,21 +43,6 @@ export interface AvatarGroupOwnProps extends AvatarGroupSlotsAndSlotProps { * Either a string to use a HTML element or a component. */ component?: React.ElementType | undefined; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `slotProps` prop. - * - * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - componentsProps?: - | { - additionalAvatar?: - | (React.ComponentPropsWithRef & AvatarGroupComponentsPropsOverrides) - | undefined; - } - | undefined; /** * Max avatars to show before +x. * @default 5 diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js index bc4af7366fcd9d..0dbafd0d994669 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js @@ -59,7 +59,6 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) { children: childrenProp, className, component = 'div', - componentsProps, max = 5, renderSurplus, slotProps = {}, @@ -120,11 +119,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) { const externalForwardedProps = { slots, - slotProps: { - surplus: slotProps.additionalAvatar ?? componentsProps?.additionalAvatar, - ...componentsProps, - ...slotProps, - }, + slotProps, }; const [SurplusSlot, surplusProps] = useSlot('surplus', { @@ -185,17 +180,6 @@ AvatarGroup.propTypes /* remove-proptypes */ = { * Either a string to use a HTML element or a component. */ component: PropTypes.elementType, - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `slotProps` prop. - * - * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - componentsProps: PropTypes.shape({ - additionalAvatar: PropTypes.object, - }), /** * Max avatars to show before +x. * @default 5 @@ -223,7 +207,6 @@ AvatarGroup.propTypes /* remove-proptypes */ = { * @default {} */ slotProps: PropTypes.shape({ - additionalAvatar: PropTypes.object, surplus: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), /** diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js index 1370fdc70782db..fd88be6930662d 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js @@ -27,24 +27,6 @@ describe('', () => { }), ); - // test additionalAvatar slot separately - describeConformance( - - - - - , - () => ({ - classes, - render, - muiName: 'MuiAvatarGroup', - slots: { - additionalAvatar: { expectedClassName: classes.avatar }, - }, - only: ['slotPropsProp'], - }), - ); - it('should render avatars with spacing of 0px when spacing is 0', () => { const { container } = render( @@ -99,22 +81,6 @@ describe('', () => { expect(container.textContent).to.equal('%2'); }); - it('should pass props from componentsProps.additionalAvatar to the slot component', () => { - const componentsProps = { additionalAvatar: { className: 'additional-avatar-test' } }; - - const { container } = render( - - - - - - , - ); - - const additionalAvatar = container.querySelector('.additional-avatar-test'); - expect(additionalAvatar.classList.contains('additional-avatar-test')).to.equal(true); - }); - it('should respect total', () => { const { container } = render(