86 lines
No EOL
3 KiB
JavaScript
86 lines
No EOL
3 KiB
JavaScript
"use strict";
|
|
'use client';
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = useSlot;
|
|
var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
|
|
var _appendOwnerState = _interopRequireDefault(require("@mui/utils/appendOwnerState"));
|
|
var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
|
|
var _mergeSlotProps = _interopRequireDefault(require("@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.
|
|
*/
|
|
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 = (0, _resolveComponentProps.default)(slotProps[name], ownerState);
|
|
const {
|
|
props: {
|
|
component: slotComponent,
|
|
...mergedProps
|
|
},
|
|
internalRef
|
|
} = (0, _mergeSlotProps.default)({
|
|
className,
|
|
...useSlotPropsParams,
|
|
externalForwardedProps: name === 'root' ? other : undefined,
|
|
externalSlotProps: resolvedComponentsProps
|
|
});
|
|
const ref = (0, _useForkRef.default)(internalRef, resolvedComponentsProps?.ref, parameters.ref);
|
|
const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
|
|
const props = (0, _appendOwnerState.default)(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];
|
|
} |