[material-ui] Add mergeSlotProps for extending components

[siriwatknp]

From #44350 (comment).

Docs: https://deploy-preview-44809--material-ui.netlify.app/material-ui/guides/composition/#forwarding-slot-props

Without the function, a lot of boilerplate code is required. I believe that users will create this kind of utility in their codebase because it's quite a common use case to extend Material UI components, so I think we should provide this utility called mergeSlotProps.

The mergeSlotProps resolves function type and then merge the props. Only the className that's concatenated to preserve the same behavior of slotProps, the rest will override the default ones. The usage is added to the docs.

mergeSlotProps(
  (ownerState) => ({ className: 'outside' }),
  { className: 'inside' },
)

// className = 'inside outside'

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/material/guides/composition/composition.md

@material-ui/core: parsed: +0.07% , gzip: +0.06%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against d657ae9

[samuelsycamore]

This is a rare example where it's ok to use the future tense "will" because it's an "if... then" scenario. I would also connect these two sentences into one if I'm understanding it correctly.

Suggested change

	If the arguments are functions, they are resolved before merging. The result from the first argument will override the second.
	If the arguments are functions then they'll be resolved before merging, and the result from the first argument will override the second.

[samuelsycamore]

The grammar and the explanation are both tricky here—let me know if I understood the original text correctly.

Suggested change

	`className` values are concatenated instead of overriding each other. For example, using the above snippet, the `className` of the popper slot passed to `CustomTooltip` is appended.
	`className` values are concatenated rather than overriding one another.
	In the snippet above, the `custom-tooltip-popper` class is applied to the Tooltip's popper slot.
	If you added another `className` via the `slotProps` prop on the Custom Tooltip—as shown below—then both would be present on the rendered popper slot:

[samuelsycamore]

Suggested change

	The popper slot will have the following className: `"… custom-tooltip-popper foo"`.
	The popper slot in the original example would now have both classes applied to it, in addition to any others that may be present: `"[…] custom-tooltip-popper foo"`.