useSlot.js
2.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
'use client';
import useForkRef from '@mui/utils/useForkRef';
import appendOwnerState from '@mui/utils/appendOwnerState';
import resolveComponentProps from '@mui/utils/resolveComponentProps';
import mergeSlotProps from '@mui/utils/mergeSlotProps';
/**
* An internal function to create a Material UI slot.
*
* This is an advanced version of Base UI `useSlotProps` because Material UI allows leaf component to be customized via `component` prop
* while Base UI does not need to support leaf component customization.
*
* @param {string} name: name of the slot
* @param {object} parameters
* @returns {[Slot, slotProps]} The slot's React component and the slot's props
*
* Note: the returned slot's props
* - will never contain `component` prop.
* - might contain `as` prop.
*/
export default function useSlot(
/**
* The slot's name. All Material UI components should have `root` slot.
*
* If the name is `root`, the logic behaves differently from other slots,
* e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
*/
name, parameters) {
const {
className,
elementType: initialElementType,
ownerState,
externalForwardedProps,
internalForwardedProps,
shouldForwardComponentProp = false,
...useSlotPropsParams
} = parameters;
const {
component: rootComponent,
slots = {
[name]: undefined
},
slotProps = {
[name]: undefined
},
...other
} = externalForwardedProps;
const elementType = slots[name] || initialElementType;
// `slotProps[name]` can be a callback that receives the component's ownerState.
// `resolvedComponentsProps` is always a plain object.
const resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
const {
props: {
component: slotComponent,
...mergedProps
},
internalRef
} = mergeSlotProps({
className,
...useSlotPropsParams,
externalForwardedProps: name === 'root' ? other : undefined,
externalSlotProps: resolvedComponentsProps
});
const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
const props = appendOwnerState(elementType, {
...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
...(name !== 'root' && !slots[name] && internalForwardedProps),
...mergedProps,
...(LeafComponent && !shouldForwardComponentProp && {
as: LeafComponent
}),
...(LeafComponent && shouldForwardComponentProp && {
component: LeafComponent
}),
ref
}, ownerState);
return [elementType, props];
}