313 lines
11 KiB
JavaScript
313 lines
11 KiB
JavaScript
'use strict';
|
|
|
|
var React = require('react');
|
|
var createCache = require('@emotion/cache');
|
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
var weakMemoize = require('@emotion/weak-memoize');
|
|
var _isolatedHnrs_dist_emotionReact_isolatedHnrs = require('../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.dev.js');
|
|
var utils = require('@emotion/utils');
|
|
var serialize = require('@emotion/serialize');
|
|
var useInsertionEffectWithFallbacks = require('@emotion/use-insertion-effect-with-fallbacks');
|
|
|
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
|
|
function _interopNamespace(e) {
|
|
if (e && e.__esModule) return e;
|
|
var n = Object.create(null);
|
|
if (e) {
|
|
Object.keys(e).forEach(function (k) {
|
|
if (k !== 'default') {
|
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
Object.defineProperty(n, k, d.get ? d : {
|
|
enumerable: true,
|
|
get: function () { return e[k]; }
|
|
});
|
|
}
|
|
});
|
|
}
|
|
n["default"] = e;
|
|
return Object.freeze(n);
|
|
}
|
|
|
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
var createCache__default = /*#__PURE__*/_interopDefault(createCache);
|
|
var weakMemoize__default = /*#__PURE__*/_interopDefault(weakMemoize);
|
|
|
|
var isBrowser = typeof document !== 'undefined';
|
|
var hasOwnProperty = {}.hasOwnProperty;
|
|
|
|
var EmotionCacheContext = /* #__PURE__ */React__namespace.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
|
|
// because this module is primarily intended for the browser and node
|
|
// but it's also required in react native and similar environments sometimes
|
|
// and we could have a special build just for that
|
|
// but this is much easier and the native packages
|
|
// might use a different theme context in the future anyway
|
|
typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache__default["default"]({
|
|
key: 'css'
|
|
}) : null);
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
EmotionCacheContext.displayName = 'EmotionCacheContext';
|
|
}
|
|
|
|
var CacheProvider = EmotionCacheContext.Provider;
|
|
var __unsafe_useEmotionCache = function useEmotionCache() {
|
|
return React.useContext(EmotionCacheContext);
|
|
};
|
|
|
|
exports.withEmotionCache = function withEmotionCache(func) {
|
|
// $FlowFixMe
|
|
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
// the cache will never be null in the browser
|
|
var cache = React.useContext(EmotionCacheContext);
|
|
return func(props, cache, ref);
|
|
});
|
|
};
|
|
|
|
if (!isBrowser) {
|
|
exports.withEmotionCache = function withEmotionCache(func) {
|
|
return function (props) {
|
|
var cache = React.useContext(EmotionCacheContext);
|
|
|
|
if (cache === null) {
|
|
// yes, we're potentially creating this on every render
|
|
// it doesn't actually matter though since it's only on the server
|
|
// so there will only every be a single render
|
|
// that could change in the future because of suspense and etc. but for now,
|
|
// this works and i don't want to optimise for a future thing that we aren't sure about
|
|
cache = createCache__default["default"]({
|
|
key: 'css'
|
|
});
|
|
return /*#__PURE__*/React__namespace.createElement(EmotionCacheContext.Provider, {
|
|
value: cache
|
|
}, func(props, cache));
|
|
} else {
|
|
return func(props, cache);
|
|
}
|
|
};
|
|
};
|
|
}
|
|
|
|
var ThemeContext = /* #__PURE__ */React__namespace.createContext({});
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
ThemeContext.displayName = 'EmotionThemeContext';
|
|
}
|
|
|
|
var useTheme = function useTheme() {
|
|
return React__namespace.useContext(ThemeContext);
|
|
};
|
|
|
|
var getTheme = function getTheme(outerTheme, theme) {
|
|
if (typeof theme === 'function') {
|
|
var mergedTheme = theme(outerTheme);
|
|
|
|
if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {
|
|
throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
|
|
}
|
|
|
|
return mergedTheme;
|
|
}
|
|
|
|
if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {
|
|
throw new Error('[ThemeProvider] Please make your theme prop a plain object');
|
|
}
|
|
|
|
return _extends({}, outerTheme, theme);
|
|
};
|
|
|
|
var createCacheWithTheme = /* #__PURE__ */weakMemoize__default["default"](function (outerTheme) {
|
|
return weakMemoize__default["default"](function (theme) {
|
|
return getTheme(outerTheme, theme);
|
|
});
|
|
});
|
|
var ThemeProvider = function ThemeProvider(props) {
|
|
var theme = React__namespace.useContext(ThemeContext);
|
|
|
|
if (props.theme !== theme) {
|
|
theme = createCacheWithTheme(theme)(props.theme);
|
|
}
|
|
|
|
return /*#__PURE__*/React__namespace.createElement(ThemeContext.Provider, {
|
|
value: theme
|
|
}, props.children);
|
|
};
|
|
function withTheme(Component) {
|
|
var componentName = Component.displayName || Component.name || 'Component';
|
|
|
|
var render = function render(props, ref) {
|
|
var theme = React__namespace.useContext(ThemeContext);
|
|
return /*#__PURE__*/React__namespace.createElement(Component, _extends({
|
|
theme: theme,
|
|
ref: ref
|
|
}, props));
|
|
}; // $FlowFixMe
|
|
|
|
|
|
var WithTheme = /*#__PURE__*/React__namespace.forwardRef(render);
|
|
WithTheme.displayName = "WithTheme(" + componentName + ")";
|
|
return _isolatedHnrs_dist_emotionReact_isolatedHnrs["default"](WithTheme, Component);
|
|
}
|
|
|
|
var getLastPart = function getLastPart(functionName) {
|
|
// The match may be something like 'Object.createEmotionProps' or
|
|
// 'Loader.prototype.render'
|
|
var parts = functionName.split('.');
|
|
return parts[parts.length - 1];
|
|
};
|
|
|
|
var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {
|
|
// V8
|
|
var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line);
|
|
if (match) return getLastPart(match[1]); // Safari / Firefox
|
|
|
|
match = /^([A-Za-z0-9$.]+)@/.exec(line);
|
|
if (match) return getLastPart(match[1]);
|
|
return undefined;
|
|
};
|
|
|
|
var internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS
|
|
// identifiers, thus we only need to replace what is a valid character for JS,
|
|
// but not for CSS.
|
|
|
|
var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
|
|
return identifier.replace(/\$/g, '-');
|
|
};
|
|
|
|
var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {
|
|
if (!stackTrace) return undefined;
|
|
var lines = stackTrace.split('\n');
|
|
|
|
for (var i = 0; i < lines.length; i++) {
|
|
var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just "Error"
|
|
|
|
if (!functionName) continue; // If we reach one of these, we have gone too far and should quit
|
|
|
|
if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an
|
|
// uppercase letter
|
|
|
|
if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);
|
|
}
|
|
|
|
return undefined;
|
|
};
|
|
|
|
var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
|
|
var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
|
|
var createEmotionProps = function createEmotionProps(type, props) {
|
|
if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration
|
|
props.css.indexOf(':') !== -1) {
|
|
throw new Error("Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`" + props.css + "`");
|
|
}
|
|
|
|
var newProps = {};
|
|
|
|
for (var key in props) {
|
|
if (hasOwnProperty.call(props, key)) {
|
|
newProps[key] = props[key];
|
|
}
|
|
}
|
|
|
|
newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when
|
|
// the label hasn't already been computed
|
|
|
|
if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1)) {
|
|
var label = getLabelFromStackTrace(new Error().stack);
|
|
if (label) newProps[labelPropName] = label;
|
|
}
|
|
|
|
return newProps;
|
|
};
|
|
|
|
var Insertion = function Insertion(_ref) {
|
|
var cache = _ref.cache,
|
|
serialized = _ref.serialized,
|
|
isStringTag = _ref.isStringTag;
|
|
utils.registerStyles(cache, serialized, isStringTag);
|
|
var rules = useInsertionEffectWithFallbacks.useInsertionEffectAlwaysWithSyncFallback(function () {
|
|
return utils.insertStyles(cache, serialized, isStringTag);
|
|
});
|
|
|
|
if (!isBrowser && rules !== undefined) {
|
|
var _ref2;
|
|
|
|
var serializedNames = serialized.name;
|
|
var next = serialized.next;
|
|
|
|
while (next !== undefined) {
|
|
serializedNames += ' ' + next.name;
|
|
next = next.next;
|
|
}
|
|
|
|
return /*#__PURE__*/React__namespace.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
|
|
__html: rules
|
|
}, _ref2.nonce = cache.sheet.nonce, _ref2));
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
var Emotion = /* #__PURE__ */exports.withEmotionCache(function (props, cache, ref) {
|
|
var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
|
|
// not passing the registered cache to serializeStyles because it would
|
|
// make certain babel optimisations not possible
|
|
|
|
if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
|
|
cssProp = cache.registered[cssProp];
|
|
}
|
|
|
|
var WrappedComponent = props[typePropName];
|
|
var registeredStyles = [cssProp];
|
|
var className = '';
|
|
|
|
if (typeof props.className === 'string') {
|
|
className = utils.getRegisteredStyles(cache.registered, registeredStyles, props.className);
|
|
} else if (props.className != null) {
|
|
className = props.className + " ";
|
|
}
|
|
|
|
var serialized = serialize.serializeStyles(registeredStyles, undefined, React__namespace.useContext(ThemeContext));
|
|
|
|
if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
|
|
var labelFromStack = props[labelPropName];
|
|
|
|
if (labelFromStack) {
|
|
serialized = serialize.serializeStyles([serialized, 'label:' + labelFromStack + ';']);
|
|
}
|
|
}
|
|
|
|
className += cache.key + "-" + serialized.name;
|
|
var newProps = {};
|
|
|
|
for (var key in props) {
|
|
if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
|
|
newProps[key] = props[key];
|
|
}
|
|
}
|
|
|
|
newProps.ref = ref;
|
|
newProps.className = className;
|
|
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Insertion, {
|
|
cache: cache,
|
|
serialized: serialized,
|
|
isStringTag: typeof WrappedComponent === 'string'
|
|
}), /*#__PURE__*/React__namespace.createElement(WrappedComponent, newProps));
|
|
});
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
Emotion.displayName = 'EmotionCssPropInternal';
|
|
}
|
|
|
|
var Emotion$1 = Emotion;
|
|
|
|
exports.CacheProvider = CacheProvider;
|
|
exports.Emotion = Emotion$1;
|
|
exports.ThemeContext = ThemeContext;
|
|
exports.ThemeProvider = ThemeProvider;
|
|
exports.__unsafe_useEmotionCache = __unsafe_useEmotionCache;
|
|
exports.createEmotionProps = createEmotionProps;
|
|
exports.hasOwnProperty = hasOwnProperty;
|
|
exports.isBrowser = isBrowser;
|
|
exports.useTheme = useTheme;
|
|
exports.withTheme = withTheme;
|