[MenuUnstyled] Accept callbacks in componentsProps

[michaldudak]

Part of #32144 (covers both MenuUnstyled and MenuItemUnstyled).

[mui-bot]

Details of bundle changes

@material-ui/unstyled: parsed: +1.07% , gzip: +1.02%

Generated by 🚫 dangerJS against a24c5b2

[mnajdova]

Generally, I believe we need to spread in this order:

• default values for props
• componentsProps.slot (resolved)
• props coming from hook (with merged event handlers)
• adding ref & className

I think we have mix & match at this point.

[mnajdova]

hmm why was the order changed? Shouldn't the getRootProps() comes last as they are adding some event handlers?

[michaldudak]

This way devs are able to override whatever the hook is setting. But I see there's a problem with event handlers. I suppose the order should be as following:

1. Props from the hook (with event handlers passed in to be chained)
2. Additional props from the component (...other) with removed event handlers - only for the root slot
3. componentsProps.<slot name> with removed event handlers
4. className - merged from className prop, componentsProps.*.className and slot-specific classes
5. ref - if necessary

Developers would be able to override whatever prop they need and if they provide an event handler, it would be chained with the hook's handlers.

We could use a function that would encapsulate this logic and ensure this works consistently across our components.

What do you think?

[mnajdova]

Yep, let's do this 👍

[michaldudak]

I created a useSlotProps function that takes care of everything needed to resolve, merge and supplement the props with ownerState. The preparation of the slots' props in the components is much cleaner now.

[mnajdova]

I like that this was resolved previously it helps with readability :)

[mnajdova]

Looks much better this way. Good job with the test @michaldudak :)

[michaldudak]

@siriwatknp you may find the useSlotProps handy if you're creating Joy components using Base hooks.