UNPKG

3.22 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import clsx from 'clsx';
3import { extractEventHandlers } from './extractEventHandlers';
4import { omitEventHandlers } from './omitEventHandlers';
5/**
6 * Merges the slot component internal props (usually coming from a hook)
7 * with the externally provided ones.
8 *
9 * The merge order is (the latter overrides the former):
10 * 1. The internal props (specified as a getter function to work with get*Props hook result)
11 * 2. Additional props (specified internally on a Base UI component)
12 * 3. External props specified on the owner component. These should only be used on a root slot.
13 * 4. External props specified in the `slotProps.*` prop.
14 * 5. The `className` prop - combined from all the above.
15 * @param parameters
16 * @returns
17 */
18export function mergeSlotProps(parameters) {
19 const {
20 getSlotProps,
21 additionalProps,
22 externalSlotProps,
23 externalForwardedProps,
24 className
25 } = parameters;
26 if (!getSlotProps) {
27 // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,
28 // so we can simply merge all the props without having to worry about extracting event handlers.
29 const joinedClasses = clsx(additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
30 const mergedStyle = _extends({}, additionalProps?.style, externalForwardedProps?.style, externalSlotProps?.style);
31 const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
32 if (joinedClasses.length > 0) {
33 props.className = joinedClasses;
34 }
35 if (Object.keys(mergedStyle).length > 0) {
36 props.style = mergedStyle;
37 }
38 return {
39 props,
40 internalRef: undefined
41 };
42 }
43
44 // In this case, getSlotProps is responsible for calling the external event handlers.
45 // We don't need to include them in the merged props because of this.
46
47 const eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));
48 const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
49 const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
50 const internalSlotProps = getSlotProps(eventHandlers);
51
52 // The order of classes is important here.
53 // Emotion (that we use in libraries consuming Base UI) depends on this order
54 // to properly override style. It requires the most important classes to be last
55 // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.
56 const joinedClasses = clsx(internalSlotProps?.className, additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
57 const mergedStyle = _extends({}, internalSlotProps?.style, additionalProps?.style, externalForwardedProps?.style, externalSlotProps?.style);
58 const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
59 if (joinedClasses.length > 0) {
60 props.className = joinedClasses;
61 }
62 if (Object.keys(mergedStyle).length > 0) {
63 props.style = mergedStyle;
64 }
65 return {
66 props,
67 internalRef: internalSlotProps.ref
68 };
69}
\No newline at end of file