@hipay/hipay-material-ui 3.10.0 → 3.11.0

package/hi-svg-icons/HiWidget.js

@@ -17,9 +17,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _pure = _interopRequireDefault(require("recompose/pure"));
 
-var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 /**
  * @ignore - internal component.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
   "private": false,
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",
@@ -13,8 +13,11 @@
   },
   "homepage": "http://materialui.hipay.dev.local/",
   "peerDependencies": {
-    "@material-ui/core": "4.12.3",
-    "mdi-material-ui": "6.14.0",
+    "@mui/material": "5.5.3",
+    "@mui/styles": "5.5.3",
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.4.2",
+    "@mui/styled-engine-sc": "5.4.2",
+    "mdi-material-ui": "7.1.0",
     "moment-timezone": "0.5.27",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -23,8 +26,8 @@
   "dependencies": {
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/runtime": "7.6.3",
-    "@material-ui/icons": "4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.60",
+    "@mui/lab": "^5.0.0-alpha.64",
+    "@mui/icons-material": "^5.2.5",
     "brcast": "3.0.1",
     "classnames": "2.2.6",
     "cross-env": "6.0.3",
@@ -45,7 +48,7 @@
     "react-device-detect": "1.9.10",
     "react-jss": "10.0.3",
     "react-lazyload": "2.6.2",
-    "react-pdf": "4.1.0",
+    "react-pdf": "5.7.2",
     "react-spinners": "0.12.0-alpha.2",
     "recompose": "0.30.0",
     "validator": "10.7.1"
@@ -69,6 +72,9 @@
   "engines": {
     "node": ">=6.0.0"
   },
+  "resolutions": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.4.2"
+  },
   "main": "./index.js",
   "module": "./esm/index.js"
 }

package/styleguide/Wrapper.js

@@ -9,15 +9,17 @@ exports.default = Wrapper;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 var _theme = _interopRequireDefault(require("../theme"));
 
 function Wrapper(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_styles.MuiThemeProvider, {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledEngineProvider, {
+    injectFirst: true
+  }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
     theme: _theme.default
-  }, children);
+  }, children));
 }
 
 ;

package/styles/colorManipulator.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertHexToRGB = convertHexToRGB;
-exports.rgbToHex = rgbToHex;
+exports.darken = darken;
 exports.decomposeColor = decomposeColor;
-exports.recomposeColor = recomposeColor;
-exports.getContrastRatio = getContrastRatio;
-exports.getLuminance = getLuminance;
 exports.emphasize = emphasize;
 exports.fade = fade;
-exports.darken = darken;
+exports.getContrastRatio = getContrastRatio;
+exports.getLuminance = getLuminance;
 exports.lighten = lighten;
+exports.recomposeColor = recomposeColor;
+exports.rgbToHex = rgbToHex;
 
 var _warning = _interopRequireDefault(require("warning"));
 

package/styles/createPalette.js

@@ -5,8 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.dark = void 0;
 exports.default = createPalette;
-exports.dark = exports.light = void 0;
+exports.light = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -16,11 +17,11 @@ var _warning = _interopRequireDefault(require("warning"));
 
 var _deepmerge = _interopRequireDefault(require("deepmerge"));
 
-var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
+var _grey = _interopRequireDefault(require("@mui/material/colors/grey"));
 
-var _red = _interopRequireDefault(require("@material-ui/core/colors/red"));
+var _red = _interopRequireDefault(require("@mui/material/colors/red"));
 
-var _common = _interopRequireDefault(require("@material-ui/core/colors/common"));
+var _common = _interopRequireDefault(require("@mui/material/colors/common"));
 
 var _colorManipulator = require("./colorManipulator");
 

package/styles/index.js

@@ -5,34 +5,34 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "createGenerateClassName", {
+Object.defineProperty(exports, "MuiThemeProvider", {
   enumerable: true,
   get: function get() {
-    return _createGenerateClassName.default;
+    return _MuiThemeProvider.default;
   }
 });
-Object.defineProperty(exports, "createMuiTheme", {
+Object.defineProperty(exports, "createGenerateClassName", {
   enumerable: true,
   get: function get() {
-    return _createMuiTheme.default;
+    return _createGenerateClassName.default;
   }
 });
-Object.defineProperty(exports, "jssPreset", {
+Object.defineProperty(exports, "createMuiTheme", {
   enumerable: true,
   get: function get() {
-    return _jssPreset.default;
+    return _createMuiTheme.default;
   }
 });
-Object.defineProperty(exports, "MuiThemeProvider", {
+Object.defineProperty(exports, "createStyles", {
   enumerable: true,
   get: function get() {
-    return _MuiThemeProvider.default;
+    return _createStyles.default;
   }
 });
-Object.defineProperty(exports, "createStyles", {
+Object.defineProperty(exports, "jssPreset", {
   enumerable: true,
   get: function get() {
-    return _createStyles.default;
+    return _jssPreset.default;
   }
 });
 

package/styles/makeStyles.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _styles = require("@material-ui/core/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
 var _theme = _interopRequireDefault(require("../theme"));
 
@@ -20,7 +20,7 @@ var _theme = _interopRequireDefault(require("../theme"));
  * @returns {StylesHook<Styles<Theme, {}, string>>}
  */
 var _default = function _default(createStyles, options) {
-  return (0, _styles.makeStyles)(createStyles, (0, _objectSpread2.default)({
+  return (0, _makeStyles.default)(createStyles, (0, _objectSpread2.default)({
     defaultTheme: _theme.default
   }, options));
 };

package/styles/transitions.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.isNumber = exports.isString = exports.formatMs = exports.duration = exports.easing = void 0;
+exports.isString = exports.isNumber = exports.formatMs = exports.easing = exports.duration = exports.default = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 

package/styles/withStyles.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _theme = _interopRequireDefault(require("../theme"));
 
@@ -20,7 +20,7 @@ var _theme = _interopRequireDefault(require("../theme"));
  * @returns {StylesHook<Styles<Theme, {}, string>>}
  */
 var _default = function _default(styles, options) {
-  return (0, _styles.withStyles)(styles, (0, _objectSpread2.default)({
+  return (0, _withStyles.default)(styles, (0, _objectSpread2.default)({
     defaultTheme: _theme.default
   }, options));
 };

package/test-utils/getClasses.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _testUtils = require("@material-ui/core/test-utils");
+var _testUtils = require("@mui/material/test-utils");
 
 // Helper function to extract the classes from a styleSheet.
 var _default = _testUtils.getClasses;

package/test-utils/index.js

@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "createShallow", {
-  enumerable: true,
-  get: function get() {
-    return _createShallow.default;
-  }
-});
 Object.defineProperty(exports, "createMount", {
   enumerable: true,
   get: function get() {
@@ -23,6 +17,12 @@ Object.defineProperty(exports, "createRender", {
     return _createRender.default;
   }
 });
+Object.defineProperty(exports, "createShallow", {
+  enumerable: true,
+  get: function get() {
+    return _createShallow.default;
+  }
+});
 Object.defineProperty(exports, "getClasses", {
   enumerable: true,
   get: function get() {

package/theme/palette.js

@@ -1,15 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.palette = void 0;
 
-var _require = require('@material-ui/core/colors'),
-    red = _require.red,
-    grey = _require.grey;
+var _colors = require("@mui/material/colors");
 
-var common = require('@material-ui/core/colors/common');
+var _common = _interopRequireDefault(require("@mui/material/colors/common"));
 
 var palette = {
   primary: {
@@ -51,9 +51,9 @@ var palette = {
     contrastText: '#FFFFFF'
   },
   error: {
-    light: red[300],
-    main: red[500],
-    dark: red[700]
+    light: _colors.red[300],
+    main: _colors.red[500],
+    dark: _colors.red[700]
   },
   lookup: {
     light: '#FFFF8D',
@@ -99,8 +99,8 @@ var palette = {
   // The background colors used to style the surfaces.
   // Consistency between these values is important.
   background: {
-    paper: common.white,
-    default: grey[50]
+    paper: _common.default.white,
+    default: _colors.grey[50]
   }
 };
 exports.palette = palette;

package/theme.js

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 var _palette = require("./theme/palette");
 
 var _typography = require("./theme/typography");
 
-var _default = (0, _styles.createTheme)({
+var _default = (0, _styles.createTheme)((0, _styles.adaptV4Theme)({
   palette: _palette.palette,
   typography: _typography.typography,
   spacing: 4
-});
+}));
 
 exports.default = _default;

package/utils/exactProp.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.specialProperty = void 0;
+exports.specialProperty = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 

package/utils/helpers.js

@@ -5,19 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.arrayUnique = arrayUnique;
 exports.camelize = camelize;
 exports.capitalize = capitalize;
 exports.contains = contains;
+exports.createChainedFunction = createChainedFunction;
 exports.escapeHTML = escapeHTML;
-exports.findIndex = findIndex;
 exports.find = find;
-exports.createChainedFunction = createChainedFunction;
-exports.arrayUnique = arrayUnique;
-exports.formatNumber = formatNumber;
+exports.findIndex = findIndex;
+exports.foldAccents = foldAccents;
 exports.formatCurrencyAmount = formatCurrencyAmount;
+exports.formatNumber = formatNumber;
 exports.formatRate = formatRate;
 exports.getNextItemSelectable = getNextItemSelectable;
-exports.foldAccents = foldAccents;
 exports.uniqueId = uniqueId;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));

package/withMobileDialog/withMobileDialog.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,17 +11,23 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/exten
 
 var _react = _interopRequireDefault(require("react"));
 
-var _withWidth = _interopRequireWildcard(require("@material-ui/core/withWidth"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+var withWidth = function withWidth() {
+  return function (WrappedComponent) {
+    return function (props) {
+      return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({}, props, {
+        width: "xs"
+      }));
+    };
+  };
+};
 /**
  * Dialog will responsively be full screen *at or below* the given breakpoint
  * (defaults to 'sm' for mobile devices).
  * Notice that this Higher-order Component is incompatible with server side rendering.
  */
+
+
 var withMobileDialog = function withMobileDialog() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function (Component) {
@@ -32,11 +36,11 @@ var withMobileDialog = function withMobileDialog() {
 
     function WithMobileDialog(props) {
       return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-        fullScreen: (0, _withWidth.isWidthDown)(breakpoint, props.width)
+        fullScreen: isWidthDown(breakpoint, props.width)
       }, props));
     }
 
-    return (0, _withWidth.default)()(WithMobileDialog);
+    return withWidth()(WithMobileDialog);
   };
 };