0.2.0 - Mid migration

This commit is contained in:
Daniel Mason 2022-04-25 14:47:15 +12:00
parent 139e6a915e
commit 7e38fdbd7d
42393 changed files with 5358157 additions and 62 deletions

View file

@ -0,0 +1,54 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import React from 'react';
import { SheetsRegistry } from 'jss';
import StylesProvider from '../StylesProvider';
import createGenerateClassName from '../createGenerateClassName';
var ServerStyleSheets = /*#__PURE__*/function () {
function ServerStyleSheets() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, ServerStyleSheets);
this.options = options;
}
_createClass(ServerStyleSheets, [{
key: "collect",
value: function collect(children) {
// This is needed in order to deduplicate the injection of CSS in the page.
var sheetsManager = new Map(); // This is needed in order to inject the critical CSS.
this.sheetsRegistry = new SheetsRegistry(); // A new class name generator
var generateClassName = createGenerateClassName();
return /*#__PURE__*/React.createElement(StylesProvider, _extends({
sheetsManager: sheetsManager,
serverGenerateClassName: generateClassName,
sheetsRegistry: this.sheetsRegistry
}, this.options), children);
}
}, {
key: "toString",
value: function toString() {
return this.sheetsRegistry ? this.sheetsRegistry.toString() : '';
}
}, {
key: "getStyleElement",
value: function getStyleElement(props) {
return /*#__PURE__*/React.createElement('style', _extends({
id: 'jss-server-side',
key: 'jss-server-side',
dangerouslySetInnerHTML: {
__html: this.toString()
}
}, props));
}
}]);
return ServerStyleSheets;
}();
export { ServerStyleSheets as default };

View file

@ -0,0 +1 @@
export { default } from './ServerStyleSheets';

View file

@ -0,0 +1,147 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import { exactProp } from '@material-ui/utils';
import createGenerateClassName from '../createGenerateClassName';
import { create } from 'jss';
import jssPreset from '../jssPreset'; // Default JSS instance.
var jss = create(jssPreset()); // Use a singleton or the provided one by the context.
//
// The counter-based approach doesn't tolerate any mistake.
// It's much safer to use the same counter everywhere.
var generateClassName = createGenerateClassName(); // Exported for test purposes
export var sheetsManager = new Map();
var defaultOptions = {
disableGeneration: false,
generateClassName: generateClassName,
jss: jss,
sheetsCache: null,
sheetsManager: sheetsManager,
sheetsRegistry: null
};
export var StylesContext = React.createContext(defaultOptions);
if (process.env.NODE_ENV !== 'production') {
StylesContext.displayName = 'StylesContext';
}
var injectFirstNode;
export default function StylesProvider(props) {
var children = props.children,
_props$injectFirst = props.injectFirst,
injectFirst = _props$injectFirst === void 0 ? false : _props$injectFirst,
_props$disableGenerat = props.disableGeneration,
disableGeneration = _props$disableGenerat === void 0 ? false : _props$disableGenerat,
localOptions = _objectWithoutProperties(props, ["children", "injectFirst", "disableGeneration"]);
var outerOptions = React.useContext(StylesContext);
var context = _extends({}, outerOptions, {
disableGeneration: disableGeneration
}, localOptions);
if (process.env.NODE_ENV !== 'production') {
if (typeof window === 'undefined' && !context.sheetsManager) {
console.error('Material-UI: You need to use the ServerStyleSheets API when rendering on the server.');
}
}
if (process.env.NODE_ENV !== 'production') {
if (context.jss.options.insertionPoint && injectFirst) {
console.error('Material-UI: You cannot use a custom insertionPoint and <StylesContext injectFirst> at the same time.');
}
}
if (process.env.NODE_ENV !== 'production') {
if (injectFirst && localOptions.jss) {
console.error('Material-UI: You cannot use the jss and injectFirst props at the same time.');
}
}
if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') {
if (!injectFirstNode) {
var head = document.head;
injectFirstNode = document.createComment('mui-inject-first');
head.insertBefore(injectFirstNode, head.firstChild);
}
context.jss = create({
plugins: jssPreset().plugins,
insertionPoint: injectFirstNode
});
}
return /*#__PURE__*/React.createElement(StylesContext.Provider, {
value: context
}, children);
}
process.env.NODE_ENV !== "production" ? StylesProvider.propTypes = {
/**
* Your component tree.
*/
children: PropTypes.node.isRequired,
/**
* You can disable the generation of the styles with this option.
* It can be useful when traversing the React tree outside of the HTML
* rendering step on the server.
* Let's say you are using react-apollo to extract all
* the queries made by the interface server-side - you can significantly speed up the traversal with this prop.
*/
disableGeneration: PropTypes.bool,
/**
* JSS's class name generator.
*/
generateClassName: PropTypes.func,
/**
* By default, the styles are injected last in the <head> element of the page.
* As a result, they gain more specificity than any other style sheet.
* If you want to override Material-UI's styles, set this prop.
*/
injectFirst: PropTypes.bool,
/**
* JSS's instance.
*/
jss: PropTypes.object,
/**
* @ignore
*/
serverGenerateClassName: PropTypes.func,
/**
* @ignore
*
* Beta feature.
*
* Cache for the sheets.
*/
sheetsCache: PropTypes.object,
/**
* @ignore
*
* The sheetsManager is used to deduplicate style sheet injection in the page.
* It's deduplicating using the (theme, styles) couple.
* On the server, you should provide a new instance for each request.
*/
sheetsManager: PropTypes.object,
/**
* @ignore
*
* Collect the sheets.
*/
sheetsRegistry: PropTypes.object
} : void 0;
if (process.env.NODE_ENV !== 'production') {
process.env.NODE_ENV !== "production" ? StylesProvider.propTypes = exactProp(StylesProvider.propTypes) : void 0;
}

View file

@ -0,0 +1,2 @@
export { default } from './StylesProvider';
export * from './StylesProvider';

View file

@ -0,0 +1,72 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import PropTypes from 'prop-types';
import { exactProp } from '@material-ui/utils';
import ThemeContext from '../useTheme/ThemeContext';
import useTheme from '../useTheme';
import nested from './nested'; // To support composition of theme.
function mergeOuterLocalTheme(outerTheme, localTheme) {
if (typeof localTheme === 'function') {
var mergedTheme = localTheme(outerTheme);
if (process.env.NODE_ENV !== 'production') {
if (!mergedTheme) {
console.error(['Material-UI: You should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
}
}
return mergedTheme;
}
return _extends({}, outerTheme, localTheme);
}
/**
* This component takes a `theme` prop.
* It makes the `theme` available down the React tree thanks to React context.
* This component should preferably be used at **the root of your component tree**.
*/
function ThemeProvider(props) {
var children = props.children,
localTheme = props.theme;
var outerTheme = useTheme();
if (process.env.NODE_ENV !== 'production') {
if (outerTheme === null && typeof localTheme === 'function') {
console.error(['Material-UI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
}
}
var theme = React.useMemo(function () {
var output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
if (output != null) {
output[nested] = outerTheme !== null;
}
return output;
}, [localTheme, outerTheme]);
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
value: theme
}, children);
}
process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
/**
* Your component tree.
*/
children: PropTypes.node.isRequired,
/**
* A theme object. You can provide a function to extend the outer theme.
*/
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
} : void 0;
if (process.env.NODE_ENV !== 'production') {
process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) : void 0;
}
export default ThemeProvider;

View file

@ -0,0 +1 @@
export { default } from './ThemeProvider';

View file

@ -0,0 +1,2 @@
var hasSymbol = typeof Symbol === 'function' && Symbol.for;
export default hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';

View file

@ -0,0 +1,72 @@
import nested from '../ThemeProvider/nested';
/**
* This is the list of the style rule name we use as drop in replacement for the built-in
* pseudo classes (:checked, :disabled, :focused, etc.).
*
* Why do they exist in the first place?
* These classes are used at a specificity of 2.
* It allows them to override previously definied styles as well as
* being untouched by simple user overrides.
*/
var pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected']; // Returns a function which generates unique class names based on counters.
// When new generator function is created, rule counter is reset.
// We need to reset the rule counter for SSR for each request.
//
// It's inspired by
// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
export default function createGenerateClassName() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$disableGloba = options.disableGlobal,
disableGlobal = _options$disableGloba === void 0 ? false : _options$disableGloba,
_options$productionPr = options.productionPrefix,
productionPrefix = _options$productionPr === void 0 ? 'jss' : _options$productionPr,
_options$seed = options.seed,
seed = _options$seed === void 0 ? '' : _options$seed;
var seedPrefix = seed === '' ? '' : "".concat(seed, "-");
var ruleCounter = 0;
var getNextCounterId = function getNextCounterId() {
ruleCounter += 1;
if (process.env.NODE_ENV !== 'production') {
if (ruleCounter >= 1e10) {
console.warn(['Material-UI: You might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join(''));
}
}
return ruleCounter;
};
return function (rule, styleSheet) {
var name = styleSheet.options.name; // Is a global static MUI style?
if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
// We can use a shorthand class name, we never use the keys to style the components.
if (pseudoClasses.indexOf(rule.key) !== -1) {
return "Mui-".concat(rule.key);
}
var prefix = "".concat(seedPrefix).concat(name, "-").concat(rule.key);
if (!styleSheet.options.theme[nested] || seed !== '') {
return prefix;
}
return "".concat(prefix, "-").concat(getNextCounterId());
}
if (process.env.NODE_ENV === 'production') {
return "".concat(seedPrefix).concat(productionPrefix).concat(getNextCounterId());
}
var suffix = "".concat(rule.key, "-").concat(getNextCounterId()); // Help with debuggability.
if (styleSheet.options.classNamePrefix) {
return "".concat(seedPrefix).concat(styleSheet.options.classNamePrefix, "-").concat(suffix);
}
return "".concat(seedPrefix).concat(suffix);
};
}

View file

@ -0,0 +1,77 @@
import hash from '@emotion/hash';
function safePrefix(classNamePrefix) {
var prefix = String(classNamePrefix);
if (process.env.NODE_ENV !== 'production') {
if (prefix.length >= 256) {
console.error("Material-UI: The class name prefix is too long: ".concat(prefix, "."));
}
}
return prefix;
}
var themeHashCache = {};
/**
* Beta feature.
*
* This is an alternative to createGenerateClassName.js.
* Instead of using a index counter, it hash the style sheets to generate the class name.
* The class name call order invariant. With this property, we can cache the style sheets on the server.
*/
export default function createGenerateClassNameHash() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$dangerouslyU = options.dangerouslyUseGlobalCSS,
dangerouslyUseGlobalCSS = _options$dangerouslyU === void 0 ? false : _options$dangerouslyU,
_options$productionPr = options.productionPrefix,
productionPrefix = _options$productionPr === void 0 ? 'jss' : _options$productionPr,
_options$seed = options.seed,
seed = _options$seed === void 0 ? '' : _options$seed;
var ruleCounter = 0;
return function (rule, styleSheet) {
var isStatic = !styleSheet.options.link;
if (dangerouslyUseGlobalCSS && styleSheet && styleSheet.options.name && isStatic) {
return "".concat(safePrefix(styleSheet.options.name), "-").concat(rule.key);
}
var suffix; // It's a static rule.
if (isStatic) {
var themeHash = themeHashCache[styleSheet.options.theme];
if (!themeHash) {
themeHash = hash(JSON.stringify(styleSheet.options.theme));
themeHashCache[styleSheet.theme] = themeHash;
}
var raw = styleSheet.rules.raw[rule.key];
suffix = hash("".concat(themeHash).concat(rule.key).concat(JSON.stringify(raw)));
}
if (!suffix) {
ruleCounter += 1;
if (process.env.NODE_ENV !== 'production') {
if (ruleCounter >= 1e10) {
console.warn(['Material-UI: You might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join(''));
}
}
suffix = ruleCounter;
}
if (process.env.NODE_ENV === 'production') {
return "".concat(productionPrefix).concat(seed).concat(suffix);
} // Help with debuggability.
if (styleSheet.options.classNamePrefix) {
return "".concat(safePrefix(styleSheet.options.classNamePrefix), "-").concat(rule.key, "-").concat(seed).concat(suffix);
}
return "".concat(rule.key, "-").concat(seed).concat(suffix);
};
}

View file

@ -0,0 +1 @@
export { default } from './createGenerateClassName';

View file

@ -0,0 +1,3 @@
export default function createStyles(styles) {
return styles;
}

View file

@ -0,0 +1 @@
export { default } from './createStyles';

View file

@ -0,0 +1,52 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import { deepmerge } from '@material-ui/utils';
import noopTheme from './noopTheme';
export default function getStylesCreator(stylesOrCreator) {
var themingEnabled = typeof stylesOrCreator === 'function';
if (process.env.NODE_ENV !== 'production') {
if (_typeof(stylesOrCreator) !== 'object' && !themingEnabled) {
console.error(['Material-UI: The `styles` argument provided is invalid.', 'You need to provide a function generating the styles or a styles object.'].join('\n'));
}
}
return {
create: function create(theme, name) {
var styles;
try {
styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
} catch (err) {
if (process.env.NODE_ENV !== 'production') {
if (themingEnabled === true && theme === noopTheme) {
// TODO: prepend error message/name instead
console.error(['Material-UI: The `styles` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
}
}
throw err;
}
if (!name || !theme.overrides || !theme.overrides[name]) {
return styles;
}
var overrides = theme.overrides[name];
var stylesWithOverrides = _extends({}, styles);
Object.keys(overrides).forEach(function (key) {
if (process.env.NODE_ENV !== 'production') {
if (!stylesWithOverrides[key]) {
console.warn(['Material-UI: You are trying to override a style that does not exist.', "Fix the `".concat(key, "` key of `theme.overrides.").concat(name, "`.")].join('\n'));
}
}
stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);
});
return stylesWithOverrides;
},
options: {}
};
}

View file

@ -0,0 +1 @@
export { default } from './getStylesCreator';

View file

@ -0,0 +1,3 @@
// We use the same empty object to ref count the styles that don't need a theme object.
var noopTheme = {};
export default noopTheme;

View file

@ -0,0 +1,23 @@
/* eslint-disable no-restricted-syntax */
export default function getThemeProps(params) {
var theme = params.theme,
name = params.name,
props = params.props;
if (!theme || !theme.props || !theme.props[name]) {
return props;
} // Resolve default props, code borrow from React source.
// https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
var defaultProps = theme.props[name];
var propName;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
return props;
}

View file

@ -0,0 +1 @@
export { default } from './getThemeProps';

45
web/node_modules/@material-ui/styles/esm/index.js generated vendored Normal file
View file

@ -0,0 +1,45 @@
/** @license Material-UI v4.11.4
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/* eslint-disable import/export */
import { ponyfillGlobal } from '@material-ui/utils';
/* Warning if there are several instances of @material-ui/styles */
if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test' && typeof window !== 'undefined') {
ponyfillGlobal['__@material-ui/styles-init__'] = ponyfillGlobal['__@material-ui/styles-init__'] || 0;
if (ponyfillGlobal['__@material-ui/styles-init__'] === 1) {
console.warn(['It looks like there are several instances of `@material-ui/styles` initialized in this application.', 'This may cause theme propagation issues, broken class names, ' + 'specificity issues, and makes your application bigger without a good reason.', '', 'See https://material-ui.com/r/styles-instance-warning for more info.'].join('\n'));
}
ponyfillGlobal['__@material-ui/styles-init__'] += 1;
}
export { default as createGenerateClassName } from './createGenerateClassName';
export * from './createGenerateClassName';
export { default as createStyles } from './createStyles';
export * from './createStyles';
export { default as getThemeProps } from './getThemeProps';
export * from './getThemeProps';
export { default as jssPreset } from './jssPreset';
export * from './jssPreset';
export { default as makeStyles } from './makeStyles';
export * from './makeStyles';
export { default as mergeClasses } from './mergeClasses';
export * from './mergeClasses';
export { default as ServerStyleSheets } from './ServerStyleSheets';
export * from './ServerStyleSheets';
export { default as styled } from './styled';
export * from './styled';
export { default as StylesProvider } from './StylesProvider';
export * from './StylesProvider';
export { default as ThemeProvider } from './ThemeProvider';
export * from './ThemeProvider';
export { default as useTheme } from './useTheme';
export * from './useTheme';
export { default as withStyles } from './withStyles';
export * from './withStyles';
export { default as withTheme } from './withTheme';
export * from './withTheme';

View file

@ -0,0 +1 @@
export { default } from './jssPreset';

View file

@ -0,0 +1,16 @@
import functions from 'jss-plugin-rule-value-function';
import global from 'jss-plugin-global';
import nested from 'jss-plugin-nested';
import camelCase from 'jss-plugin-camel-case';
import defaultUnit from 'jss-plugin-default-unit';
import vendorPrefixer from 'jss-plugin-vendor-prefixer';
import propsSort from 'jss-plugin-props-sort'; // Subset of jss-preset-default with only the plugins the Material-UI components are using.
export default function jssPreset() {
return {
plugins: [functions(), global(), nested(), camelCase(), defaultUnit(), // Disable the vendor prefixer server-side, it does nothing.
// This way, we can get a performance boost.
// In the documentation, we are using `autoprefixer` to solve this problem.
typeof window === 'undefined' ? null : vendorPrefixer(), propsSort()]
};
}

View file

@ -0,0 +1 @@
export { default } from './makeStyles';

View file

@ -0,0 +1,21 @@
/* eslint-disable import/prefer-default-export */
// Global index counter to preserve source order.
// We create the style sheet during the creation of the component,
// children are handled after the parents, so the order of style elements would be parent->child.
// It is a problem though when a parent passes a className
// which needs to override any child's styles.
// StyleSheet of the child has a higher specificity, because of the source order.
// So our solution is to render sheets them in the reverse order child->sheet, so
// that parent has a higher specificity.
var indexCounter = -1e9;
export function increment() {
indexCounter += 1;
if (process.env.NODE_ENV !== 'production') {
if (indexCounter >= 0) {
console.warn(['Material-UI: You might have a memory leak.', 'The indexCounter is not supposed to grow that much.'].join('\n'));
}
}
return indexCounter;
}

View file

@ -0,0 +1,261 @@
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import { getDynamicStyles } from 'jss';
import mergeClasses from '../mergeClasses';
import multiKeyStore from './multiKeyStore';
import useTheme from '../useTheme';
import { StylesContext } from '../StylesProvider';
import { increment } from './indexCounter';
import getStylesCreator from '../getStylesCreator';
import noopTheme from '../getStylesCreator/noopTheme';
function getClasses(_ref, classes, Component) {
var state = _ref.state,
stylesOptions = _ref.stylesOptions;
if (stylesOptions.disableGeneration) {
return classes || {};
}
if (!state.cacheClasses) {
state.cacheClasses = {
// Cache for the finalized classes value.
value: null,
// Cache for the last used classes prop pointer.
lastProp: null,
// Cache for the last used rendered classes pointer.
lastJSS: {}
};
} // Tracks if either the rendered classes or classes prop has changed,
// requiring the generation of a new finalized classes object.
var generate = false;
if (state.classes !== state.cacheClasses.lastJSS) {
state.cacheClasses.lastJSS = state.classes;
generate = true;
}
if (classes !== state.cacheClasses.lastProp) {
state.cacheClasses.lastProp = classes;
generate = true;
}
if (generate) {
state.cacheClasses.value = mergeClasses({
baseClasses: state.cacheClasses.lastJSS,
newClasses: classes,
Component: Component
});
}
return state.cacheClasses.value;
}
function attach(_ref2, props) {
var state = _ref2.state,
theme = _ref2.theme,
stylesOptions = _ref2.stylesOptions,
stylesCreator = _ref2.stylesCreator,
name = _ref2.name;
if (stylesOptions.disableGeneration) {
return;
}
var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
if (!sheetManager) {
sheetManager = {
refs: 0,
staticSheet: null,
dynamicStyles: null
};
multiKeyStore.set(stylesOptions.sheetsManager, stylesCreator, theme, sheetManager);
}
var options = _extends({}, stylesCreator.options, stylesOptions, {
theme: theme,
flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
});
options.generateId = options.serverGenerateClassName || options.generateClassName;
var sheetsRegistry = stylesOptions.sheetsRegistry;
if (sheetManager.refs === 0) {
var staticSheet;
if (stylesOptions.sheetsCache) {
staticSheet = multiKeyStore.get(stylesOptions.sheetsCache, stylesCreator, theme);
}
var styles = stylesCreator.create(theme, name);
if (!staticSheet) {
staticSheet = stylesOptions.jss.createStyleSheet(styles, _extends({
link: false
}, options));
staticSheet.attach();
if (stylesOptions.sheetsCache) {
multiKeyStore.set(stylesOptions.sheetsCache, stylesCreator, theme, staticSheet);
}
}
if (sheetsRegistry) {
sheetsRegistry.add(staticSheet);
}
sheetManager.staticSheet = staticSheet;
sheetManager.dynamicStyles = getDynamicStyles(styles);
}
if (sheetManager.dynamicStyles) {
var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({
link: true
}, options));
dynamicSheet.update(props);
dynamicSheet.attach();
state.dynamicSheet = dynamicSheet;
state.classes = mergeClasses({
baseClasses: sheetManager.staticSheet.classes,
newClasses: dynamicSheet.classes
});
if (sheetsRegistry) {
sheetsRegistry.add(dynamicSheet);
}
} else {
state.classes = sheetManager.staticSheet.classes;
}
sheetManager.refs += 1;
}
function update(_ref3, props) {
var state = _ref3.state;
if (state.dynamicSheet) {
state.dynamicSheet.update(props);
}
}
function detach(_ref4) {
var state = _ref4.state,
theme = _ref4.theme,
stylesOptions = _ref4.stylesOptions,
stylesCreator = _ref4.stylesCreator;
if (stylesOptions.disableGeneration) {
return;
}
var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
sheetManager.refs -= 1;
var sheetsRegistry = stylesOptions.sheetsRegistry;
if (sheetManager.refs === 0) {
multiKeyStore.delete(stylesOptions.sheetsManager, stylesCreator, theme);
stylesOptions.jss.removeStyleSheet(sheetManager.staticSheet);
if (sheetsRegistry) {
sheetsRegistry.remove(sheetManager.staticSheet);
}
}
if (state.dynamicSheet) {
stylesOptions.jss.removeStyleSheet(state.dynamicSheet);
if (sheetsRegistry) {
sheetsRegistry.remove(state.dynamicSheet);
}
}
}
function useSynchronousEffect(func, values) {
var key = React.useRef([]);
var output; // Store "generation" key. Just returns a new object every time
var currentKey = React.useMemo(function () {
return {};
}, values); // eslint-disable-line react-hooks/exhaustive-deps
// "the first render", or "memo dropped the value"
if (key.current !== currentKey) {
key.current = currentKey;
output = func();
}
React.useEffect(function () {
return function () {
if (output) {
output();
}
};
}, [currentKey] // eslint-disable-line react-hooks/exhaustive-deps
);
}
export default function makeStyles(stylesOrCreator) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var name = options.name,
classNamePrefixOption = options.classNamePrefix,
Component = options.Component,
_options$defaultTheme = options.defaultTheme,
defaultTheme = _options$defaultTheme === void 0 ? noopTheme : _options$defaultTheme,
stylesOptions2 = _objectWithoutProperties(options, ["name", "classNamePrefix", "Component", "defaultTheme"]);
var stylesCreator = getStylesCreator(stylesOrCreator);
var classNamePrefix = name || classNamePrefixOption || 'makeStyles';
stylesCreator.options = {
index: increment(),
name: name,
meta: classNamePrefix,
classNamePrefix: classNamePrefix
};
var useStyles = function useStyles() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var theme = useTheme() || defaultTheme;
var stylesOptions = _extends({}, React.useContext(StylesContext), stylesOptions2);
var instance = React.useRef();
var shouldUpdate = React.useRef();
useSynchronousEffect(function () {
var current = {
name: name,
state: {},
stylesCreator: stylesCreator,
stylesOptions: stylesOptions,
theme: theme
};
attach(current, props);
shouldUpdate.current = false;
instance.current = current;
return function () {
detach(current);
};
}, [theme, stylesCreator]);
React.useEffect(function () {
if (shouldUpdate.current) {
update(instance.current, props);
}
shouldUpdate.current = true;
});
var classes = getClasses(instance.current, props.classes, Component);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useDebugValue(classes);
}
return classes;
};
return useStyles;
}

View file

@ -0,0 +1,22 @@
// Used https://github.com/thinkloop/multi-key-cache as inspiration
var multiKeyStore = {
set: function set(cache, key1, key2, value) {
var subCache = cache.get(key1);
if (!subCache) {
subCache = new Map();
cache.set(key1, subCache);
}
subCache.set(key2, value);
},
get: function get(cache, key1, key2) {
var subCache = cache.get(key1);
return subCache ? subCache.get(key2) : undefined;
},
delete: function _delete(cache, key1, key2) {
var subCache = cache.get(key1);
subCache.delete(key2);
}
};
export default multiKeyStore;

View file

@ -0,0 +1 @@
export { default } from './mergeClasses';

View file

@ -0,0 +1,38 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import { getDisplayName } from '@material-ui/utils';
export default function mergeClasses() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var baseClasses = options.baseClasses,
newClasses = options.newClasses,
Component = options.Component;
if (!newClasses) {
return baseClasses;
}
var nextClasses = _extends({}, baseClasses);
if (process.env.NODE_ENV !== 'production') {
if (typeof newClasses === 'string') {
console.error(["Material-UI: The value `".concat(newClasses, "` ") + "provided to the classes prop of ".concat(getDisplayName(Component), " is incorrect."), 'You might want to use the className prop instead.'].join('\n'));
return baseClasses;
}
}
Object.keys(newClasses).forEach(function (key) {
if (process.env.NODE_ENV !== 'production') {
if (!baseClasses[key] && newClasses[key]) {
console.error(["Material-UI: The key `".concat(key, "` ") + "provided to the classes prop is not implemented in ".concat(getDisplayName(Component), "."), "You can only override one of the following: ".concat(Object.keys(baseClasses).join(','), ".")].join('\n'));
}
if (newClasses[key] && typeof newClasses[key] !== 'string') {
console.error(["Material-UI: The key `".concat(key, "` ") + "provided to the classes prop is not valid for ".concat(getDisplayName(Component), "."), "You need to provide a non empty string instead of: ".concat(newClasses[key], ".")].join('\n'));
}
}
if (newClasses[key]) {
nextClasses[key] = "".concat(baseClasses[key], " ").concat(newClasses[key]);
}
});
return nextClasses;
}

View file

@ -0,0 +1 @@
export { default } from './styled';

View file

@ -0,0 +1,155 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { chainPropTypes, getDisplayName } from '@material-ui/utils';
import hoistNonReactStatics from 'hoist-non-react-statics';
import makeStyles from '../makeStyles';
function omit(input, fields) {
var output = {};
Object.keys(input).forEach(function (prop) {
if (fields.indexOf(prop) === -1) {
output[prop] = input[prop];
}
});
return output;
} // styled-components's API removes the mapping between components and styles.
// Using components as a low-level styling construct can be simpler.
export default function styled(Component) {
var componentCreator = function componentCreator(style) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var name = options.name,
stylesOptions = _objectWithoutProperties(options, ["name"]);
if (process.env.NODE_ENV !== 'production' && Component === undefined) {
throw new Error(['You are calling styled(Component)(style) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
}
var classNamePrefix = name;
if (process.env.NODE_ENV !== 'production') {
if (!name) {
// Provide a better DX outside production.
var displayName = getDisplayName(Component);
if (displayName !== undefined) {
classNamePrefix = displayName;
}
}
}
var stylesOrCreator = typeof style === 'function' ? function (theme) {
return {
root: function root(props) {
return style(_extends({
theme: theme
}, props));
}
};
} : {
root: style
};
var useStyles = makeStyles(stylesOrCreator, _extends({
Component: Component,
name: name || Component.displayName,
classNamePrefix: classNamePrefix
}, stylesOptions));
var filterProps;
var propTypes = {};
if (style.filterProps) {
filterProps = style.filterProps;
delete style.filterProps;
}
/* eslint-disable react/forbid-foreign-prop-types */
if (style.propTypes) {
propTypes = style.propTypes;
delete style.propTypes;
}
/* eslint-enable react/forbid-foreign-prop-types */
var StyledComponent = /*#__PURE__*/React.forwardRef(function StyledComponent(props, ref) {
var children = props.children,
classNameProp = props.className,
clone = props.clone,
ComponentProp = props.component,
other = _objectWithoutProperties(props, ["children", "className", "clone", "component"]);
var classes = useStyles(props);
var className = clsx(classes.root, classNameProp);
var spread = other;
if (filterProps) {
spread = omit(spread, filterProps);
}
if (clone) {
return /*#__PURE__*/React.cloneElement(children, _extends({
className: clsx(children.props.className, className)
}, spread));
}
if (typeof children === 'function') {
return children(_extends({
className: className
}, spread));
}
var FinalComponent = ComponentProp || Component;
return /*#__PURE__*/React.createElement(FinalComponent, _extends({
ref: ref,
className: className
}, spread), children);
});
process.env.NODE_ENV !== "production" ? StyledComponent.propTypes = _extends({
/**
* A render function or node.
*/
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the component will recycle it's children HTML element.
* It's using `React.cloneElement` internally.
*
* This prop will be deprecated and removed in v5
*/
clone: chainPropTypes(PropTypes.bool, function (props) {
if (props.clone && props.component) {
return new Error('You can not use the clone and component prop at the same time.');
}
return null;
}),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType
}, propTypes) : void 0;
if (process.env.NODE_ENV !== 'production') {
StyledComponent.displayName = "Styled(".concat(classNamePrefix, ")");
}
hoistNonReactStatics(StyledComponent, Component);
return StyledComponent;
};
return componentCreator;
}

View file

@ -0,0 +1,8 @@
import React from 'react';
var ThemeContext = React.createContext(null);
if (process.env.NODE_ENV !== 'production') {
ThemeContext.displayName = 'ThemeContext';
}
export default ThemeContext;

View file

@ -0,0 +1 @@
export { default } from './useTheme';

View file

@ -0,0 +1,12 @@
import React from 'react';
import ThemeContext from './ThemeContext';
export default function useTheme() {
var theme = React.useContext(ThemeContext);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useDebugValue(theme);
}
return theme;
}

View file

@ -0,0 +1 @@
export { default } from './withStyles';

View file

@ -0,0 +1,123 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { chainPropTypes, getDisplayName } from '@material-ui/utils';
import makeStyles from '../makeStyles';
import getThemeProps from '../getThemeProps';
import useTheme from '../useTheme'; // Link a style sheet with a component.
// It does not modify the component passed to it;
// instead, it returns a new component, with a `classes` property.
var withStyles = function withStyles(stylesOrCreator) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return function (Component) {
var defaultTheme = options.defaultTheme,
_options$withTheme = options.withTheme,
withTheme = _options$withTheme === void 0 ? false : _options$withTheme,
name = options.name,
stylesOptions = _objectWithoutProperties(options, ["defaultTheme", "withTheme", "name"]);
if (process.env.NODE_ENV !== 'production') {
if (Component === undefined) {
throw new Error(['You are calling withStyles(styles)(Component) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
}
}
var classNamePrefix = name;
if (process.env.NODE_ENV !== 'production') {
if (!name) {
// Provide a better DX outside production.
var displayName = getDisplayName(Component);
if (displayName !== undefined) {
classNamePrefix = displayName;
}
}
}
var useStyles = makeStyles(stylesOrCreator, _extends({
defaultTheme: defaultTheme,
Component: Component,
name: name || Component.displayName,
classNamePrefix: classNamePrefix
}, stylesOptions));
var WithStyles = /*#__PURE__*/React.forwardRef(function WithStyles(props, ref) {
var classesProp = props.classes,
innerRef = props.innerRef,
other = _objectWithoutProperties(props, ["classes", "innerRef"]); // The wrapper receives only user supplied props, which could be a subset of
// the actual props Component might receive due to merging with defaultProps.
// So copying it here would give us the same result in the wrapper as well.
var classes = useStyles(_extends({}, Component.defaultProps, props));
var theme;
var more = other;
if (typeof name === 'string' || withTheme) {
// name and withTheme are invariant in the outer scope
// eslint-disable-next-line react-hooks/rules-of-hooks
theme = useTheme() || defaultTheme;
if (name) {
more = getThemeProps({
theme: theme,
name: name,
props: other
});
} // Provide the theme to the wrapped component.
// So we don't have to use the `withTheme()` Higher-order Component.
if (withTheme && !more.theme) {
more.theme = theme;
}
}
return /*#__PURE__*/React.createElement(Component, _extends({
ref: innerRef || ref,
classes: classes
}, more));
});
process.env.NODE_ENV !== "production" ? WithStyles.propTypes = {
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* Use that prop to pass a ref to the decorated component.
* @deprecated
*/
innerRef: chainPropTypes(PropTypes.oneOfType([PropTypes.func, PropTypes.object]), function (props) {
if (props.innerRef == null) {
return null;
}
return null; // return new Error(
// 'Material-UI: The `innerRef` prop is deprecated and will be removed in v5. ' +
// 'Refs are now automatically forwarded to the inner component.',
// );
})
} : void 0;
if (process.env.NODE_ENV !== 'production') {
WithStyles.displayName = "WithStyles(".concat(getDisplayName(Component), ")");
}
hoistNonReactStatics(WithStyles, Component);
if (process.env.NODE_ENV !== 'production') {
// Exposed for test purposes.
WithStyles.Naked = Component;
WithStyles.options = options;
WithStyles.useStyles = useStyles;
}
return WithStyles;
};
};
export default withStyles;

View file

@ -0,0 +1,2 @@
export { default } from './withTheme';
export * from './withTheme';

View file

@ -0,0 +1,63 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { chainPropTypes, getDisplayName } from '@material-ui/utils';
import useTheme from '../useTheme';
export function withThemeCreator() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var defaultTheme = options.defaultTheme;
var withTheme = function withTheme(Component) {
if (process.env.NODE_ENV !== 'production') {
if (Component === undefined) {
throw new Error(['You are calling withTheme(Component) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
}
}
var WithTheme = /*#__PURE__*/React.forwardRef(function WithTheme(props, ref) {
var innerRef = props.innerRef,
other = _objectWithoutProperties(props, ["innerRef"]);
var theme = useTheme() || defaultTheme;
return /*#__PURE__*/React.createElement(Component, _extends({
theme: theme,
ref: innerRef || ref
}, other));
});
process.env.NODE_ENV !== "production" ? WithTheme.propTypes = {
/**
* Use that prop to pass a ref to the decorated component.
* @deprecated
*/
innerRef: chainPropTypes(PropTypes.oneOfType([PropTypes.func, PropTypes.object]), function (props) {
if (props.innerRef == null) {
return null;
}
return new Error('Material-UI: The `innerRef` prop is deprecated and will be removed in v5. ' + 'Refs are now automatically forwarded to the inner component.');
})
} : void 0;
if (process.env.NODE_ENV !== 'production') {
WithTheme.displayName = "WithTheme(".concat(getDisplayName(Component), ")");
}
hoistNonReactStatics(WithTheme, Component);
if (process.env.NODE_ENV !== 'production') {
// Exposed for test purposes.
WithTheme.Naked = Component;
}
return WithTheme;
};
return withTheme;
} // Provide the theme object as a prop to the input component.
// It's an alternative API to useTheme().
// We encourage the usage of useTheme() where possible.
var withTheme = withThemeCreator();
export default withTheme;