"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.mergeSlotProps = mergeSlotProps; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _clsx = _interopRequireDefault(require("clsx")); var _extractEventHandlers = require("./extractEventHandlers"); var _omitEventHandlers = require("./omitEventHandlers"); /** * Merges the slot component internal props (usually coming from a hook) * with the externally provided ones. * * The merge order is (the latter overrides the former): * 1. The internal props (specified as a getter function to work with get*Props hook result) * 2. Additional props (specified internally on a Base UI component) * 3. External props specified on the owner component. These should only be used on a root slot. * 4. External props specified in the `slotProps.*` prop. * 5. The `className` prop - combined from all the above. * @param parameters * @returns */ function mergeSlotProps(parameters) { const { getSlotProps, additionalProps, externalSlotProps, externalForwardedProps, className } = parameters; if (!getSlotProps) { // The simpler case - getSlotProps is not defined, so no internal event handlers are defined, // so we can simply merge all the props without having to worry about extracting event handlers. const joinedClasses = (0, _clsx.default)(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className); const mergedStyle = (0, _extends2.default)({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style); const props = (0, _extends2.default)({}, additionalProps, externalForwardedProps, externalSlotProps); if (joinedClasses.length > 0) { props.className = joinedClasses; } if (Object.keys(mergedStyle).length > 0) { props.style = mergedStyle; } return { props, internalRef: undefined }; } // In this case, getSlotProps is responsible for calling the external event handlers. // We don't need to include them in the merged props because of this. const eventHandlers = (0, _extractEventHandlers.extractEventHandlers)((0, _extends2.default)({}, externalForwardedProps, externalSlotProps)); const componentsPropsWithoutEventHandlers = (0, _omitEventHandlers.omitEventHandlers)(externalSlotProps); const otherPropsWithoutEventHandlers = (0, _omitEventHandlers.omitEventHandlers)(externalForwardedProps); const internalSlotProps = getSlotProps(eventHandlers); // The order of classes is important here. // Emotion (that we use in libraries consuming Base UI) depends on this order // to properly override style. It requires the most important classes to be last // (see https://github.com/mui/material-ui/pull/33205) for the related discussion. const joinedClasses = (0, _clsx.default)(internalSlotProps == null ? void 0 : internalSlotProps.className, additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className); const mergedStyle = (0, _extends2.default)({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style); const props = (0, _extends2.default)({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers); if (joinedClasses.length > 0) { props.className = joinedClasses; } if (Object.keys(mergedStyle).length > 0) { props.style = mergedStyle; } return { props, internalRef: internalSlotProps.ref }; }