"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = createStyled; exports.shouldForwardProp = shouldForwardProp; exports.systemDefaultTheme = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine")); var _deepmerge = require("@mui/utils/deepmerge"); var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize")); var _getDisplayName = _interopRequireDefault(require("@mui/utils/getDisplayName")); var _createTheme = _interopRequireDefault(require("./createTheme")); var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx")); const _excluded = ["ownerState"], _excluded2 = ["variants"], _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]; /* eslint-disable no-underscore-dangle */ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } function isEmpty(obj) { return Object.keys(obj).length === 0; } // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40 function isStringTag(tag) { return typeof tag === 'string' && // 96 is one less than the char code // for "a" so this is checking that // it's a lowercase character tag.charCodeAt(0) > 96; } // Update /system/styled/#api in case if this changes function shouldForwardProp(prop) { return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as'; } const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)(); const lowercaseFirstLetter = string => { if (!string) { return string; } return string.charAt(0).toLowerCase() + string.slice(1); }; function resolveTheme({ defaultTheme, theme, themeId }) { return isEmpty(theme) ? defaultTheme : theme[themeId] || theme; } function defaultOverridesResolver(slot) { if (!slot) { return null; } return (props, styles) => styles[slot]; } function processStyleArg(callableStyle, _ref) { let { ownerState } = _ref, props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded); const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle((0, _extends2.default)({ ownerState }, props)) : callableStyle; if (Array.isArray(resolvedStylesArg)) { return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, (0, _extends2.default)({ ownerState }, props))); } if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) { const { variants = [] } = resolvedStylesArg, otherStyles = (0, _objectWithoutPropertiesLoose2.default)(resolvedStylesArg, _excluded2); let result = otherStyles; variants.forEach(variant => { let isMatch = true; if (typeof variant.props === 'function') { isMatch = variant.props((0, _extends2.default)({ ownerState }, props, ownerState)); } else { Object.keys(variant.props).forEach(key => { if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) { isMatch = false; } }); } if (isMatch) { if (!Array.isArray(result)) { result = [result]; } result.push(typeof variant.style === 'function' ? variant.style((0, _extends2.default)({ ownerState }, props, ownerState)) : variant.style); } }); return result; } return resolvedStylesArg; } function createStyled(input = {}) { const { themeId, defaultTheme = systemDefaultTheme, rootShouldForwardProp = shouldForwardProp, slotShouldForwardProp = shouldForwardProp } = input; const systemSx = props => { return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, { theme: resolveTheme((0, _extends2.default)({}, props, { defaultTheme, themeId })) })); }; systemSx.__mui_systemSx = true; return (tag, inputOptions = {}) => { // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components. (0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx))); const { name: componentName, slot: componentSlot, skipVariantsResolver: inputSkipVariantsResolver, skipSx: inputSkipSx, // TODO v6: remove `lowercaseFirstLetter()` in the next major release // For more details: https://github.com/mui/material-ui/pull/37908 overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)) } = inputOptions, options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots. const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : // TODO v6: remove `Root` in the next major release // For more details: https://github.com/mui/material-ui/pull/37908 componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false; const skipSx = inputSkipSx || false; let label; if (process.env.NODE_ENV !== 'production') { if (componentName) { // TODO v6: remove `lowercaseFirstLetter()` in the next major release // For more details: https://github.com/mui/material-ui/pull/37908 label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`; } } let shouldForwardPropOption = shouldForwardProp; // TODO v6: remove `Root` in the next major release // For more details: https://github.com/mui/material-ui/pull/37908 if (componentSlot === 'Root' || componentSlot === 'root') { shouldForwardPropOption = rootShouldForwardProp; } else if (componentSlot) { // any other slot specified shouldForwardPropOption = slotShouldForwardProp; } else if (isStringTag(tag)) { // for string (html) tag, preserve the behavior in emotion & styled-components. shouldForwardPropOption = undefined; } const defaultStyledResolver = (0, _styledEngine.default)(tag, (0, _extends2.default)({ shouldForwardProp: shouldForwardPropOption, label }, options)); const transformStyleArg = stylesArg => { // On the server Emotion doesn't use React.forwardRef for creating components, so the created // component stays as a function. This condition makes sure that we do not interpolate functions // which are basically components used as a selectors. if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || (0, _deepmerge.isPlainObject)(stylesArg)) { return props => processStyleArg(stylesArg, (0, _extends2.default)({}, props, { theme: resolveTheme({ theme: props.theme, defaultTheme, themeId }) })); } return stylesArg; }; const muiStyledResolver = (styleArg, ...expressions) => { let transformedStyleArg = transformStyleArg(styleArg); const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : []; if (componentName && overridesResolver) { expressionsWithDefaultTheme.push(props => { const theme = resolveTheme((0, _extends2.default)({}, props, { defaultTheme, themeId })); if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) { return null; } const styleOverrides = theme.components[componentName].styleOverrides; const resolvedStyleOverrides = {}; // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => { resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, { theme })); }); return overridesResolver(props, resolvedStyleOverrides); }); } if (componentName && !skipVariantsResolver) { expressionsWithDefaultTheme.push(props => { var _theme$components; const theme = resolveTheme((0, _extends2.default)({}, props, { defaultTheme, themeId })); const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants; return processStyleArg({ variants: themeVariants }, (0, _extends2.default)({}, props, { theme })); }); } if (!skipSx) { expressionsWithDefaultTheme.push(systemSx); } const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length; if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) { const placeholders = new Array(numOfCustomFnsApplied).fill(''); // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles. transformedStyleArg = [...styleArg, ...placeholders]; transformedStyleArg.raw = [...styleArg.raw, ...placeholders]; } const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme); if (process.env.NODE_ENV !== 'production') { let displayName; if (componentName) { displayName = `${componentName}${(0, _capitalize.default)(componentSlot || '')}`; } if (displayName === undefined) { displayName = `Styled(${(0, _getDisplayName.default)(tag)})`; } Component.displayName = displayName; } if (tag.muiName) { Component.muiName = tag.muiName; } return Component; }; if (defaultStyledResolver.withConfig) { muiStyledResolver.withConfig = defaultStyledResolver.withConfig; } return muiStyledResolver; }; }