@material-ui/styles - npm Package Compare versions

Comparing version 4.0.0-alpha.2 to 4.0.0-alpha.3

createStyles.js

@@ -8,12 +8,4 @@ "use strict";
 
-/**
- * This function doesn't really "do anything" at runtime, it's just the identity
- * function. Its only purpose is to defeat TypeScript's type widening when providing
- * style rules to `withStyles` which are a function of the `Theme`.
- *
- * @param styles a set of style mappings
- * @returns the same styles that were passed in
- */
 function createStyles(styles) {
   return styles;
 }

es/createStyles.js

@@ -1,11 +0,3 @@
-/**
- * This function doesn't really "do anything" at runtime, it's just the identity
- * function. Its only purpose is to defeat TypeScript's type widening when providing
- * style rules to `withStyles` which are a function of the `Theme`.
- *
- * @param styles a set of style mappings
- * @returns the same styles that were passed in
- */
 export default function createStyles(styles) {
   return styles;
 }

es/index.js

 export { default as createGenerateClassName } from './createGenerateClassName';
 export { default as createStyles } from './createStyles';
-export { default as install } from './install';
+export { default as getThemeProps } from './getThemeProps';
 export { default as jssPreset } from './jssPreset';
 export { default as makeStyles } from './makeStyles';
+export { default as mergeClasses } from './mergeClasses';
 export { default as styled } from './styled';
@@ -11,2 +12,2 @@ export { default as StylesProvider } from './StylesProvider';
 export { default as withStyles } from './withStyles';
-export { default as withTheme } from './withTheme';
+export { default as withTheme, withThemeCreator } from './withTheme';

es/jssPreset.js

 import functions from 'jss-plugin-rule-value-function';
-import global from 'jss-plugin-global/dist/jss-plugin-global.cjs';
-import nested from 'jss-plugin-nested/dist/jss-plugin-nested.cjs';
+import global from 'jss-plugin-global';
+import nested from 'jss-plugin-nested';
 import camelCase from 'jss-plugin-camel-case';
@@ -5,0 +5,0 @@ import defaultUnit from 'jss-plugin-default-unit';

es/makeStyles.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
-
-/* eslint-disable react-hooks/exhaustive-deps */
 import React from 'react';
@@ -10,3 +8,3 @@ import warning from 'warning';
 import multiKeyStore from './multiKeyStore';
-import ThemeContext from './ThemeContext';
+import useTheme from './useTheme';
 import { StylesContext } from './StylesProvider';
@@ -202,3 +200,4 @@ import { increment } from './indexCounter';
     }
-  }, values);
+  }, values // eslint-disable-line react-hooks/exhaustive-deps
+  );
 }
@@ -212,10 +211,8 @@
     classNamePrefix: classNamePrefixOption,
-    defaultTheme: defaultThemeOption,
-    Component
+    Component,
+    defaultTheme = noopTheme
   } = options,
-        stylesOptions2 = _objectWithoutPropertiesLoose(options, ["name", "classNamePrefix", "defaultTheme", "Component"]);
+        stylesOptions2 = _objectWithoutPropertiesLoose(options, ["name", "classNamePrefix", "Component", "defaultTheme"]);
 
   const stylesCreator = getStylesCreator(stylesOrCreator);
-  const listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';
-  const defaultTheme = defaultThemeOption || noopTheme;
   const classNamePrefix = name || classNamePrefixOption || 'Hook';
@@ -228,4 +225,5 @@ stylesCreator.options = {
   };
+  const listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';
   return (props = {}) => {
-    const theme = listenToTheme ? React.useContext(ThemeContext) || defaultTheme : defaultTheme;
+    const theme = (listenToTheme ? useTheme() : null) || defaultTheme;
 
@@ -232,0 +230,0 @@ const stylesOptions = _extends({}, React.useContext(StylesContext), stylesOptions2);

es/withStyles.js

@@ -6,7 +6,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import warning from 'warning';
-import { getDisplayName, hoistMuiStatics } from '@material-ui/utils';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { chainPropTypes, getDisplayName, ponyfillGlobal } from '@material-ui/utils';
 import makeStyles from './makeStyles';
-import RefHolder from './RefHolder';
 import getThemeProps from './getThemeProps';
-import useTheme from './useTheme'; // Link a style sheet with a component.
+import useTheme from './useTheme';
+import mergeClasses from './mergeClasses';
+import getStylesCreator from './getStylesCreator'; // Link a style sheet with a component.
 // It does not modify the component passed to it;
@@ -17,6 +19,7 @@ // instead, it returns a new component, with a `classes` property.
   const {
+    defaultTheme,
     withTheme = false,
     name
   } = options,
-        otherOptions = _objectWithoutPropertiesLoose(options, ["withTheme", "name"]);
+        stylesOptions = _objectWithoutPropertiesLoose(options, ["defaultTheme", "withTheme", "name"]);
 
@@ -35,8 +38,9 @@ if (process.env.NODE_ENV !== 'production' && Component === undefined) {
 
-  const useStyles = makeStyles(stylesOrCreator, _extends({}, otherOptions, {
+  const useStyles = makeStyles(stylesOrCreator, _extends({
+    defaultTheme,
     Component,
     name: name || Component.displayName,
     classNamePrefix
-  }));
-  const WithStyles = React.forwardRef(function WithStyles(props, ref) {
+  }, stylesOptions));
+  let WithStyles = React.forwardRef(function WithStyles(props, ref) {
     const {
@@ -54,3 +58,3 @@ innerRef
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      theme = useTheme();
+      theme = useTheme() || defaultTheme;
 
@@ -67,3 +71,3 @@ if (name) {
 
-      if (withTheme) {
+      if (withTheme && !more.theme) {
         more.theme = theme;
@@ -73,9 +77,49 @@ }
 
-    return React.createElement(RefHolder, {
-      ref: ref
-    }, React.createElement(Component, _extends({
-      ref: innerRef,
+    return React.createElement(Component, _extends({
+      ref: innerRef || ref,
       classes: classes
-    }, more)));
+    }, more));
   });
+
+  if (process.env.NODE_ENV === 'test' && !ponyfillGlobal.disableShallowSupport) {
+    // Generate a fake classes object.
+    const stylesCreator = getStylesCreator(stylesOrCreator);
+    const styles = stylesCreator.create(defaultTheme, name);
+    const classes = Object.keys(styles).reduce((acc, key) => {
+      acc[key] = `${name}-${key}`;
+      return acc;
+    }, {}); // eslint-disable-next-line react/no-multi-comp
+
+    class WithStylesTest extends React.Component {
+      render() {
+        // eslint-disable-next-line react/prop-types
+        const _this$props = this.props,
+              {
+          classes: newClasses,
+          innerRef
+        } = _this$props,
+              other = _objectWithoutPropertiesLoose(_this$props, ["classes", "innerRef"]);
+
+        const more = other;
+
+        if (withTheme && !more.theme) {
+          more.theme = defaultTheme;
+        }
+
+        return React.createElement(Component, _extends({
+          ref: innerRef,
+          classes: mergeClasses({
+            baseClasses: classes,
+            newClasses
+          })
+        }, more));
+      }
+
+    }
+
+    WithStylesTest.Original = WithStyles;
+    WithStyles = WithStylesTest;
+    WithStyles.classes = classes;
+  }
+
   process.env.NODE_ENV !== "production" ? WithStyles.propTypes = {
@@ -88,5 +132,15 @@ /**
     /**
+     * @deprecated
      * Use that property to pass a ref callback to the decorated component.
      */
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    innerRef: chainPropTypes(PropTypes.oneOfType([PropTypes.func, PropTypes.object]), 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;
@@ -98,3 +152,10 @@
 
-  hoistMuiStatics(WithStyles, Component);
+  hoistNonReactStatics(WithStyles, Component);
+
+  if (process.env.NODE_ENV !== 'production') {
+    // Exposed for test purposes.
+    WithStyles.Naked = Component;
+    WithStyles.options = options;
+  }
+
   return WithStyles;
@@ -101,0 +162,0 @@ };

es/withTheme.js

@@ -5,42 +5,84 @@ import _extends from "@babel/runtime/helpers/extends";
 import PropTypes from 'prop-types';
-import { getDisplayName, hoistMuiStatics } from '@material-ui/utils';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { chainPropTypes, getDisplayName, ponyfillGlobal } from '@material-ui/utils';
 import useTheme from './useTheme';
-import RefHolder from './RefHolder'; // Provide the theme object as a property to the input component.
-// It's an alternative API to useTheme().
-// We encourage the usage of useTheme() where possible.
+export function withThemeCreator(options = {}) {
+  const {
+    defaultTheme
+  } = options;
 
-const withTheme = Component => {
-  if (process.env.NODE_ENV !== 'production' && Component === undefined) {
-    throw new Error(['You are calling withTheme(Component) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
-  }
+  const withTheme = Component => {
+    if (process.env.NODE_ENV !== 'production' && Component === undefined) {
+      throw new Error(['You are calling withTheme(Component) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
+    }
 
-  const WithTheme = React.forwardRef(function WithTheme(props, ref) {
-    const {
-      innerRef
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, ["innerRef"]);
+    let WithTheme = React.forwardRef(function WithTheme(props, ref) {
+      const {
+        innerRef
+      } = props,
+            other = _objectWithoutPropertiesLoose(props, ["innerRef"]);
 
-    const theme = useTheme();
-    return React.createElement(RefHolder, {
-      ref: ref
-    }, React.createElement(Component, _extends({
-      theme: theme,
-      ref: innerRef
-    }, other)));
-  });
-  process.env.NODE_ENV !== "production" ? WithTheme.propTypes = {
-    /**
-     * Use that property to pass a ref callback to the decorated component.
-     */
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  } : void 0;
+      const theme = useTheme() || defaultTheme;
+      return React.createElement(Component, _extends({
+        theme: theme,
+        ref: innerRef || ref
+      }, other));
+    });
 
-  if (process.env.NODE_ENV !== 'production') {
-    WithTheme.displayName = `WithTheme(${getDisplayName(Component)})`;
-  }
+    if (process.env.NODE_ENV === 'test' && !ponyfillGlobal.disableShallowSupport) {
+      // eslint-disable-next-line react/no-multi-comp
+      class WithThemeTest extends React.Component {
+        render() {
+          // eslint-disable-next-line react/prop-types
+          const _this$props = this.props,
+                {
+            innerRef
+          } = _this$props,
+                other = _objectWithoutPropertiesLoose(_this$props, ["innerRef"]);
 
-  hoistMuiStatics(WithTheme, Component);
-  return WithTheme;
-};
+          return React.createElement(Component, _extends({
+            theme: defaultTheme,
+            ref: innerRef
+          }, other));
+        }
 
+      }
+
+      WithTheme = WithThemeTest;
+    }
+
+    process.env.NODE_ENV !== "production" ? WithTheme.propTypes = {
+      /**
+       * @deprecated
+       * Use that property to pass a ref callback to the decorated component.
+       */
+      innerRef: chainPropTypes(PropTypes.oneOfType([PropTypes.func, PropTypes.object]), 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(${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 property to the input component.
+// It's an alternative API to useTheme().
+// We encourage the usage of useTheme() where possible.
+
+const withTheme = withThemeCreator();
 export default withTheme;

esm/createStyles.js

@@ -1,11 +0,3 @@
-/**
- * This function doesn't really "do anything" at runtime, it's just the identity
- * function. Its only purpose is to defeat TypeScript's type widening when providing
- * style rules to `withStyles` which are a function of the `Theme`.
- *
- * @param styles a set of style mappings
- * @returns the same styles that were passed in
- */
 export default function createStyles(styles) {
   return styles;
 }

esm/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v4.0.0-alpha.2
+/** @license Material-UI v4.0.0-alpha.3
  *
@@ -8,5 +8,6 @@ * This source code is licensed under the MIT license found in the
 export { default as createStyles } from './createStyles';
-export { default as install } from './install';
+export { default as getThemeProps } from './getThemeProps';
 export { default as jssPreset } from './jssPreset';
 export { default as makeStyles } from './makeStyles';
+export { default as mergeClasses } from './mergeClasses';
 export { default as styled } from './styled';
@@ -17,2 +18,2 @@ export { default as StylesProvider } from './StylesProvider';
 export { default as withStyles } from './withStyles';
-export { default as withTheme } from './withTheme';
+export { default as withTheme, withThemeCreator } from './withTheme';

esm/jssPreset.js

 import functions from 'jss-plugin-rule-value-function';
-import global from 'jss-plugin-global/dist/jss-plugin-global.cjs';
-import nested from 'jss-plugin-nested/dist/jss-plugin-nested.cjs';
+import global from 'jss-plugin-global';
+import nested from 'jss-plugin-nested';
 import camelCase from 'jss-plugin-camel-case';
@@ -5,0 +5,0 @@ import defaultUnit from 'jss-plugin-default-unit';

esm/makeStyles.js

 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-
-/* eslint-disable react-hooks/exhaustive-deps */
 import React from 'react';
@@ -10,3 +8,3 @@ import warning from 'warning';
 import multiKeyStore from './multiKeyStore';
-import ThemeContext from './ThemeContext';
+import useTheme from './useTheme';
 import { StylesContext } from './StylesProvider';
@@ -204,3 +202,4 @@ import { increment } from './indexCounter';
     };
-  }, values);
+  }, values // eslint-disable-line react-hooks/exhaustive-deps
+  );
 }
@@ -213,9 +212,8 @@
       classNamePrefixOption = options.classNamePrefix,
-      defaultThemeOption = options.defaultTheme,
       Component = options.Component,
-      stylesOptions2 = _objectWithoutProperties(options, ["name", "classNamePrefix", "defaultTheme", "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 listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';
-  var defaultTheme = defaultThemeOption || noopTheme;
   var classNamePrefix = name || classNamePrefixOption || 'Hook';
@@ -228,5 +226,6 @@ stylesCreator.options = {
   };
+  var listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';
   return function () {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var theme = listenToTheme ? React.useContext(ThemeContext) || defaultTheme : defaultTheme;
+    var theme = (listenToTheme ? useTheme() : null) || defaultTheme;
 
@@ -233,0 +232,0 @@ var stylesOptions = _extends({}, React.useContext(StylesContext), stylesOptions2);

esm/withStyles.js

@@ -0,1 +1,6 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
 import _extends from "@babel/runtime/helpers/extends";
@@ -6,7 +11,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import warning from 'warning';
-import { getDisplayName, hoistMuiStatics } from '@material-ui/utils';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { chainPropTypes, getDisplayName, ponyfillGlobal } from '@material-ui/utils';
 import makeStyles from './makeStyles';
-import RefHolder from './RefHolder';
 import getThemeProps from './getThemeProps';
-import useTheme from './useTheme'; // Link a style sheet with a component.
+import useTheme from './useTheme';
+import mergeClasses from './mergeClasses';
+import getStylesCreator from './getStylesCreator'; // Link a style sheet with a component.
 // It does not modify the component passed to it;
@@ -18,6 +25,7 @@ // instead, it returns a new component, with a `classes` property.
   return function (Component) {
-    var _options$withTheme = options.withTheme,
+    var defaultTheme = options.defaultTheme,
+        _options$withTheme = options.withTheme,
         withTheme = _options$withTheme === void 0 ? false : _options$withTheme,
         name = options.name,
-        otherOptions = _objectWithoutProperties(options, ["withTheme", "name"]);
+        stylesOptions = _objectWithoutProperties(options, ["defaultTheme", "withTheme", "name"]);
 
@@ -36,7 +44,8 @@ if (process.env.NODE_ENV !== 'production' && Component === undefined) {
 
-    var useStyles = makeStyles(stylesOrCreator, _extends({}, otherOptions, {
+    var useStyles = makeStyles(stylesOrCreator, _extends({
+      defaultTheme: defaultTheme,
       Component: Component,
       name: name || Component.displayName,
       classNamePrefix: classNamePrefix
-    }));
+    }, stylesOptions));
     var WithStyles = React.forwardRef(function WithStyles(props, ref) {
@@ -54,3 +63,3 @@ var classesProp = props.classes,
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = useTheme();
+        theme = useTheme() || defaultTheme;
 
@@ -67,3 +76,3 @@ if (name) {
 
-        if (withTheme) {
+        if (withTheme && !more.theme) {
           more.theme = theme;
@@ -73,9 +82,61 @@ }
 
-      return React.createElement(RefHolder, {
-        ref: ref
-      }, React.createElement(Component, _extends({
-        ref: innerRef,
+      return React.createElement(Component, _extends({
+        ref: innerRef || ref,
         classes: classes
-      }, more)));
+      }, more));
     });
+
+    if (process.env.NODE_ENV === 'test' && !ponyfillGlobal.disableShallowSupport) {
+      // Generate a fake classes object.
+      var stylesCreator = getStylesCreator(stylesOrCreator);
+      var styles = stylesCreator.create(defaultTheme, name);
+      var classes = Object.keys(styles).reduce(function (acc, key) {
+        acc[key] = "".concat(name, "-").concat(key);
+        return acc;
+      }, {}); // eslint-disable-next-line react/no-multi-comp
+
+      var WithStylesTest =
+      /*#__PURE__*/
+      function (_React$Component) {
+        _inherits(WithStylesTest, _React$Component);
+
+        function WithStylesTest() {
+          _classCallCheck(this, WithStylesTest);
+
+          return _possibleConstructorReturn(this, _getPrototypeOf(WithStylesTest).apply(this, arguments));
+        }
+
+        _createClass(WithStylesTest, [{
+          key: "render",
+          value: function render() {
+            // eslint-disable-next-line react/prop-types
+            var _this$props = this.props,
+                newClasses = _this$props.classes,
+                innerRef = _this$props.innerRef,
+                other = _objectWithoutProperties(_this$props, ["classes", "innerRef"]);
+
+            var more = other;
+
+            if (withTheme && !more.theme) {
+              more.theme = defaultTheme;
+            }
+
+            return React.createElement(Component, _extends({
+              ref: innerRef,
+              classes: mergeClasses({
+                baseClasses: classes,
+                newClasses: newClasses
+              })
+            }, more));
+          }
+        }]);
+
+        return WithStylesTest;
+      }(React.Component);
+
+      WithStylesTest.Original = WithStyles;
+      WithStyles = WithStylesTest;
+      WithStyles.classes = classes;
+    }
+
     process.env.NODE_ENV !== "production" ? WithStyles.propTypes = {
@@ -88,5 +149,15 @@ /**
       /**
+       * @deprecated
        * Use that property to pass a ref callback to the decorated component.
        */
-      innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+      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;
@@ -98,3 +169,10 @@
 
-    hoistMuiStatics(WithStyles, Component);
+    hoistNonReactStatics(WithStyles, Component);
+
+    if (process.env.NODE_ENV !== 'production') {
+      // Exposed for test purposes.
+      WithStyles.Naked = Component;
+      WithStyles.options = options;
+    }
+
     return WithStyles;
@@ -101,0 +179,0 @@ };

esm/withTheme.js

@@ -0,1 +1,6 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
 import _extends from "@babel/runtime/helpers/extends";
@@ -5,40 +10,93 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import PropTypes from 'prop-types';
-import { getDisplayName, hoistMuiStatics } from '@material-ui/utils';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { chainPropTypes, getDisplayName, ponyfillGlobal } from '@material-ui/utils';
 import useTheme from './useTheme';
-import RefHolder from './RefHolder'; // Provide the theme object as a property to the input component.
-// It's an alternative API to useTheme().
-// We encourage the usage of useTheme() where possible.
+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' && 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 = function withTheme(Component) {
+    if (process.env.NODE_ENV !== 'production' && 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 = React.forwardRef(function WithTheme(props, ref) {
-    var innerRef = props.innerRef,
-        other = _objectWithoutProperties(props, ["innerRef"]);
+    var WithTheme = React.forwardRef(function WithTheme(props, ref) {
+      var innerRef = props.innerRef,
+          other = _objectWithoutProperties(props, ["innerRef"]);
 
-    var theme = useTheme();
-    return React.createElement(RefHolder, {
-      ref: ref
-    }, React.createElement(Component, _extends({
-      theme: theme,
-      ref: innerRef
-    }, other)));
-  });
-  process.env.NODE_ENV !== "production" ? WithTheme.propTypes = {
-    /**
-     * Use that property to pass a ref callback to the decorated component.
-     */
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  } : void 0;
+      var theme = useTheme() || defaultTheme;
+      return React.createElement(Component, _extends({
+        theme: theme,
+        ref: innerRef || ref
+      }, other));
+    });
 
-  if (process.env.NODE_ENV !== 'production') {
-    WithTheme.displayName = "WithTheme(".concat(getDisplayName(Component), ")");
-  }
+    if (process.env.NODE_ENV === 'test' && !ponyfillGlobal.disableShallowSupport) {
+      // eslint-disable-next-line react/no-multi-comp
+      var WithThemeTest =
+      /*#__PURE__*/
+      function (_React$Component) {
+        _inherits(WithThemeTest, _React$Component);
 
-  hoistMuiStatics(WithTheme, Component);
-  return WithTheme;
-};
+        function WithThemeTest() {
+          _classCallCheck(this, WithThemeTest);
 
+          return _possibleConstructorReturn(this, _getPrototypeOf(WithThemeTest).apply(this, arguments));
+        }
+
+        _createClass(WithThemeTest, [{
+          key: "render",
+          value: function render() {
+            // eslint-disable-next-line react/prop-types
+            var _this$props = this.props,
+                innerRef = _this$props.innerRef,
+                other = _objectWithoutProperties(_this$props, ["innerRef"]);
+
+            return React.createElement(Component, _extends({
+              theme: defaultTheme,
+              ref: innerRef
+            }, other));
+          }
+        }]);
+
+        return WithThemeTest;
+      }(React.Component);
+
+      WithTheme = WithThemeTest;
+    }
+
+    process.env.NODE_ENV !== "production" ? WithTheme.propTypes = {
+      /**
+       * @deprecated
+       * Use that property to pass a ref callback to the decorated component.
+       */
+      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 property 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;

index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v4.0.0-alpha.2
+/** @license Material-UI v4.0.0-alpha.3
  *
@@ -8,2 +8,4 @@ * This source code is licensed under the MIT license found in the
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -26,6 +28,6 @@
 });
-Object.defineProperty(exports, "install", {
+Object.defineProperty(exports, "getThemeProps", {
   enumerable: true,
   get: function get() {
-    return _install.default;
+    return _getThemeProps.default;
   }
@@ -45,2 +47,8 @@ });
 });
+Object.defineProperty(exports, "mergeClasses", {
+  enumerable: true,
+  get: function get() {
+    return _mergeClasses.default;
+  }
+});
 Object.defineProperty(exports, "styled", {
@@ -82,2 +90,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "withThemeCreator", {
+  enumerable: true,
+  get: function get() {
+    return _withTheme.withThemeCreator;
+  }
+});
 
@@ -88,3 +102,3 @@ var _createGenerateClassName = _interopRequireDefault(require("./createGenerateClassName"));
 
-var _install = _interopRequireDefault(require("./install"));
+var _getThemeProps = _interopRequireDefault(require("./getThemeProps"));
 
@@ -95,2 +109,4 @@ var _jssPreset = _interopRequireDefault(require("./jssPreset"));
 
+var _mergeClasses = _interopRequireDefault(require("./mergeClasses"));
+
 var _styled = _interopRequireDefault(require("./styled"));
@@ -106,2 +122,2 @@
 
-var _withTheme = _interopRequireDefault(require("./withTheme"));
+var _withTheme = _interopRequireWildcard(require("./withTheme"));

jssPreset.js

@@ -12,5 +12,5 @@ "use strict";
 
-var _jssPluginGlobal = _interopRequireDefault(require("jss-plugin-global/dist/jss-plugin-global.cjs"));
+var _jssPluginGlobal = _interopRequireDefault(require("jss-plugin-global"));
 
-var _jssPluginNested = _interopRequireDefault(require("jss-plugin-nested/dist/jss-plugin-nested.cjs"));
+var _jssPluginNested = _interopRequireDefault(require("jss-plugin-nested"));
 
@@ -17,0 +17,0 @@ var _jssPluginCamelCase = _interopRequireDefault(require("jss-plugin-camel-case"));

makeStyles.js

@@ -24,3 +24,3 @@ "use strict";
 
-var _ThemeContext = _interopRequireDefault(require("./ThemeContext"));
+var _useTheme = _interopRequireDefault(require("./useTheme"));
 
@@ -35,3 +35,2 @@ var _StylesProvider = require("./StylesProvider");
 
-/* eslint-disable react-hooks/exhaustive-deps */
 function getClasses(_ref, classes, Component) {
@@ -227,3 +226,4 @@ var state = _ref.state,
     };
-  }, values);
+  }, values // eslint-disable-line react-hooks/exhaustive-deps
+  );
 }
@@ -235,8 +235,7 @@
       classNamePrefixOption = options.classNamePrefix,
-      defaultThemeOption = options.defaultTheme,
       Component = options.Component,
-      stylesOptions2 = (0, _objectWithoutProperties2.default)(options, ["name", "classNamePrefix", "defaultTheme", "Component"]);
+      _options$defaultTheme = options.defaultTheme,
+      defaultTheme = _options$defaultTheme === void 0 ? _noopTheme.default : _options$defaultTheme,
+      stylesOptions2 = (0, _objectWithoutProperties2.default)(options, ["name", "classNamePrefix", "Component", "defaultTheme"]);
   var stylesCreator = (0, _getStylesCreator.default)(stylesOrCreator);
-  var listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';
-  var defaultTheme = defaultThemeOption || _noopTheme.default;
   var classNamePrefix = name || classNamePrefixOption || 'Hook';
@@ -249,5 +248,6 @@ stylesCreator.options = {
   };
+  var listenToTheme = stylesCreator.themingEnabled || typeof name === 'string';
   return function () {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var theme = listenToTheme ? _react.default.useContext(_ThemeContext.default) || defaultTheme : defaultTheme;
+    var theme = (listenToTheme ? (0, _useTheme.default)() : null) || defaultTheme;
     var stylesOptions = (0, _extends2.default)({}, _react.default.useContext(_StylesProvider.StylesContext), stylesOptions2);
@@ -254,0 +254,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "author": "Material-UI Team",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.3",
   "description": "Material-UI Styles - The styling solution of Material-UI.",
@@ -32,14 +32,14 @@ "main": "./index.js",
     "@emotion/hash": "^0.7.1",
-    "@material-ui/utils": "^4.0.0-alpha.2",
+    "@material-ui/utils": "^4.0.0-alpha.3",
     "clsx": "^1.0.2",
     "deepmerge": "^3.0.0",
     "hoist-non-react-statics": "^3.2.1",
-    "jss": "^10.0.0-alpha.7",
-    "jss-plugin-camel-case": "^10.0.0-alpha.7",
-    "jss-plugin-default-unit": "^10.0.0-alpha.7",
-    "jss-plugin-global": "^10.0.0-alpha.7",
-    "jss-plugin-nested": "^10.0.0-alpha.7",
-    "jss-plugin-props-sort": "^10.0.0-alpha.7",
-    "jss-plugin-rule-value-function": "^10.0.0-alpha.7",
-    "jss-plugin-vendor-prefixer": "^10.0.0-alpha.7",
+    "jss": "^10.0.0-alpha.12",
+    "jss-plugin-camel-case": "^10.0.0-alpha.12",
+    "jss-plugin-default-unit": "^10.0.0-alpha.12",
+    "jss-plugin-global": "^10.0.0-alpha.12",
+    "jss-plugin-nested": "^10.0.0-alpha.12",
+    "jss-plugin-props-sort": "^10.0.0-alpha.12",
+    "jss-plugin-rule-value-function": "^10.0.0-alpha.12",
+    "jss-plugin-vendor-prefixer": "^10.0.0-alpha.12",
     "prop-types": "^15.7.2",
@@ -46,0 +46,0 @@ "warning": "^4.0.1"

withStyles.js

@@ -10,2 +10,12 @@ "use strict";
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -21,2 +31,4 @@
 
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+
 var _utils = require("@material-ui/utils");
@@ -26,4 +38,2 @@
 
-var _RefHolder = _interopRequireDefault(require("./RefHolder"));
-
 var _getThemeProps = _interopRequireDefault(require("./getThemeProps"));
@@ -33,2 +43,6 @@
 
+var _mergeClasses = _interopRequireDefault(require("./mergeClasses"));
+
+var _getStylesCreator = _interopRequireDefault(require("./getStylesCreator"));
+
 // Link a style sheet with a component.
@@ -40,6 +54,7 @@ // It does not modify the component passed to it;
   return function (Component) {
-    var _options$withTheme = options.withTheme,
+    var defaultTheme = options.defaultTheme,
+        _options$withTheme = options.withTheme,
         withTheme = _options$withTheme === void 0 ? false : _options$withTheme,
         name = options.name,
-        otherOptions = (0, _objectWithoutProperties2.default)(options, ["withTheme", "name"]);
+        stylesOptions = (0, _objectWithoutProperties2.default)(options, ["defaultTheme", "withTheme", "name"]);
 
@@ -58,7 +73,8 @@ if (process.env.NODE_ENV !== 'production' && Component === undefined) {
 
-    var useStyles = (0, _makeStyles.default)(stylesOrCreator, (0, _extends2.default)({}, otherOptions, {
+    var useStyles = (0, _makeStyles.default)(stylesOrCreator, (0, _extends2.default)({
+      defaultTheme: defaultTheme,
       Component: Component,
       name: name || Component.displayName,
       classNamePrefix: classNamePrefix
-    }));
+    }, stylesOptions));
 
@@ -76,3 +92,3 @@ var WithStyles = _react.default.forwardRef(function WithStyles(props, ref) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = (0, _useTheme.default)();
+        theme = (0, _useTheme.default)() || defaultTheme;
 
@@ -89,3 +105,3 @@ if (name) {
 
-        if (withTheme) {
+        if (withTheme && !more.theme) {
           more.theme = theme;
@@ -95,10 +111,58 @@ }
 
-      return _react.default.createElement(_RefHolder.default, {
-        ref: ref
-      }, _react.default.createElement(Component, (0, _extends2.default)({
-        ref: innerRef,
+      return _react.default.createElement(Component, (0, _extends2.default)({
+        ref: innerRef || ref,
         classes: classes
-      }, more)));
+      }, more));
     });
 
+    if (process.env.NODE_ENV === 'test' && !_utils.ponyfillGlobal.disableShallowSupport) {
+      // Generate a fake classes object.
+      var stylesCreator = (0, _getStylesCreator.default)(stylesOrCreator);
+      var styles = stylesCreator.create(defaultTheme, name);
+      var classes = Object.keys(styles).reduce(function (acc, key) {
+        acc[key] = "".concat(name, "-").concat(key);
+        return acc;
+      }, {}); // eslint-disable-next-line react/no-multi-comp
+
+      var WithStylesTest =
+      /*#__PURE__*/
+      function (_React$Component) {
+        (0, _inherits2.default)(WithStylesTest, _React$Component);
+
+        function WithStylesTest() {
+          (0, _classCallCheck2.default)(this, WithStylesTest);
+          return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(WithStylesTest).apply(this, arguments));
+        }
+
+        (0, _createClass2.default)(WithStylesTest, [{
+          key: "render",
+          value: function render() {
+            // eslint-disable-next-line react/prop-types
+            var _this$props = this.props,
+                newClasses = _this$props.classes,
+                innerRef = _this$props.innerRef,
+                other = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "innerRef"]);
+            var more = other;
+
+            if (withTheme && !more.theme) {
+              more.theme = defaultTheme;
+            }
+
+            return _react.default.createElement(Component, (0, _extends2.default)({
+              ref: innerRef,
+              classes: (0, _mergeClasses.default)({
+                baseClasses: classes,
+                newClasses: newClasses
+              })
+            }, more));
+          }
+        }]);
+        return WithStylesTest;
+      }(_react.default.Component);
+
+      WithStylesTest.Original = WithStyles;
+      WithStyles = WithStylesTest;
+      WithStyles.classes = classes;
+    }
+
     process.env.NODE_ENV !== "production" ? WithStyles.propTypes = {
@@ -111,5 +175,15 @@ /**
       /**
+       * @deprecated
        * Use that property to pass a ref callback to the decorated component.
        */
-      innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+      innerRef: (0, _utils.chainPropTypes)(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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;
@@ -121,3 +195,10 @@
 
-    (0, _utils.hoistMuiStatics)(WithStyles, Component);
+    (0, _hoistNonReactStatics.default)(WithStyles, Component);
+
+    if (process.env.NODE_ENV !== 'production') {
+      // Exposed for test purposes.
+      WithStyles.Naked = Component;
+      WithStyles.options = options;
+    }
+
     return WithStyles;
@@ -124,0 +205,0 @@ };

withTheme.js

@@ -8,4 +8,15 @@ "use strict";
 });
+exports.withThemeCreator = withThemeCreator;
 exports.default = void 0;
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -19,2 +30,4 @@
 
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+
 var _utils = require("@material-ui/utils");
@@ -24,40 +37,88 @@
 
-var _RefHolder = _interopRequireDefault(require("./RefHolder"));
+function withThemeCreator() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var defaultTheme = options.defaultTheme;
 
-// Provide the theme object as a property to the input component.
-// It's an alternative API to useTheme().
-// We encourage the usage of useTheme() where possible.
-var withTheme = function withTheme(Component) {
-  if (process.env.NODE_ENV !== 'production' && 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 = function withTheme(Component) {
+    if (process.env.NODE_ENV !== 'production' && 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 = _react.default.forwardRef(function WithTheme(props, ref) {
-    var innerRef = props.innerRef,
-        other = (0, _objectWithoutProperties2.default)(props, ["innerRef"]);
-    var theme = (0, _useTheme.default)();
-    return _react.default.createElement(_RefHolder.default, {
-      ref: ref
-    }, _react.default.createElement(Component, (0, _extends2.default)({
-      theme: theme,
-      ref: innerRef
-    }, other)));
-  });
+    var WithTheme = _react.default.forwardRef(function WithTheme(props, ref) {
+      var innerRef = props.innerRef,
+          other = (0, _objectWithoutProperties2.default)(props, ["innerRef"]);
+      var theme = (0, _useTheme.default)() || defaultTheme;
+      return _react.default.createElement(Component, (0, _extends2.default)({
+        theme: theme,
+        ref: innerRef || ref
+      }, other));
+    });
 
-  process.env.NODE_ENV !== "production" ? WithTheme.propTypes = {
-    /**
-     * Use that property to pass a ref callback to the decorated component.
-     */
-    innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
-  } : void 0;
+    if (process.env.NODE_ENV === 'test' && !_utils.ponyfillGlobal.disableShallowSupport) {
+      // eslint-disable-next-line react/no-multi-comp
+      var WithThemeTest =
+      /*#__PURE__*/
+      function (_React$Component) {
+        (0, _inherits2.default)(WithThemeTest, _React$Component);
 
-  if (process.env.NODE_ENV !== 'production') {
-    WithTheme.displayName = "WithTheme(".concat((0, _utils.getDisplayName)(Component), ")");
-  }
+        function WithThemeTest() {
+          (0, _classCallCheck2.default)(this, WithThemeTest);
+          return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(WithThemeTest).apply(this, arguments));
+        }
 
-  (0, _utils.hoistMuiStatics)(WithTheme, Component);
-  return WithTheme;
-};
+        (0, _createClass2.default)(WithThemeTest, [{
+          key: "render",
+          value: function render() {
+            // eslint-disable-next-line react/prop-types
+            var _this$props = this.props,
+                innerRef = _this$props.innerRef,
+                other = (0, _objectWithoutProperties2.default)(_this$props, ["innerRef"]);
+            return _react.default.createElement(Component, (0, _extends2.default)({
+              theme: defaultTheme,
+              ref: innerRef
+            }, other));
+          }
+        }]);
+        return WithThemeTest;
+      }(_react.default.Component);
 
+      WithTheme = WithThemeTest;
+    }
+
+    process.env.NODE_ENV !== "production" ? WithTheme.propTypes = {
+      /**
+       * @deprecated
+       * Use that property to pass a ref callback to the decorated component.
+       */
+      innerRef: (0, _utils.chainPropTypes)(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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((0, _utils.getDisplayName)(Component), ")");
+    }
+
+    (0, _hoistNonReactStatics.default)(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 property to the input component.
+// It's an alternative API to useTheme().
+// We encourage the usage of useTheme() where possible.
+
+
+var withTheme = withThemeCreator();
 var _default = withTheme;
 exports.default = _default;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

515130

increased by2.43%

Lines of code

3054

increased by6.12%

Worsened metrics

Number of package files

59

decreased by-9.23%

Number of low supply chain risk alerts

105

increased by9.38%

Dependency changes

• Updated@material-ui/utils@^4.0.0-alpha.3

• Updatedjss@^10.0.0-alpha.12

• Updatedjss-plugin-camel-case@^10.0.0-alpha.12

• Updatedjss-plugin-default-unit@^10.0.0-alpha.12

• Updatedjss-plugin-global@^10.0.0-alpha.12

• Updatedjss-plugin-nested@^10.0.0-alpha.12

• Updatedjss-plugin-props-sort@^10.0.0-alpha.12

• Updatedjss-plugin-rule-value-function@^10.0.0-alpha.12

• Updatedjss-plugin-vendor-prefixer@^10.0.0-alpha.12