@hipay/hipay-material-ui 2.2.0-beta-core3 → 2.2.0

package/es/hi-svg-icons/HiFinance.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import pure from 'recompose/pure';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 /**
  * @ignore - internal component.
  */

package/es/hi-svg-icons/HiPermission.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import pure from 'recompose/pure';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 /**
  * @ignore - internal component.
  */

package/es/hi-svg-icons/HiRoute.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import pure from 'recompose/pure';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 /**
  * @ignore - internal component.
  */

package/es/hi-svg-icons/HiSettlement.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import pure from 'recompose/pure';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 /**
  * @ignore - internal component.
  */

package/es/hi-svg-icons/HiTransaction.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import pure from 'recompose/pure';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 /**
  * @ignore - internal component.
  */

package/es/hi-svg-icons/HiUser.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import pure from 'recompose/pure';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 /**
  * @ignore - internal component.
  */

package/es/hi-svg-icons/HiWidget.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import pure from 'recompose/pure';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 /**
  * @ignore - internal component.
  */

package/es/styles/createMixins.js

@@ -3,12 +3,12 @@ export default function createMixins(breakpoints, spacing, mixins) {
   return _objectSpread({
     gutters: (styles = {}) => {
       return _objectSpread({
-        paddingLeft: spacing(4),
-        paddingRight: spacing(4)
+        paddingLeft: spacing.unit * 2,
+        paddingRight: spacing.unit * 2
       }, styles, {
         [breakpoints.up('sm')]: _objectSpread({
-          paddingLeft: spacing(6),
-          paddingRight: spacing(6)
+          paddingLeft: spacing.unit * 3,
+          paddingRight: spacing.unit * 3
         }, styles[breakpoints.up('sm')])
       });
     },

package/es/styles/spacing.js

@@ -1,3 +1,6 @@
-const spacing = (n = 1) => n * 4;
-
+const spacing = {
+  // All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
+  // https://material.io/design/layout/understanding-layout.html#pixel-density
+  unit: 8
+};
 export default spacing;

package/es/test-utils/getClasses.js

@@ -1,3 +1,17 @@
-import { getClasses } from '@material-ui/core/test-utils'; // Helper function to extract the classes from a styleSheet.
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import * as ns from 'react-jss/lib/ns';
+import { SheetsRegistry } from 'jss';
+import createShallow from './createShallow';
+import { sheetsManager } from '../styles/withStyles';
+const shallow = createShallow(); // Helper function to extract the classes from a styleSheet.
 
-export default getClasses;
+export default function getClasses(element, options = {}) {
+  const sheetsRegistry = new SheetsRegistry();
+  sheetsManager.clear();
+  shallow(element, _objectSpread({}, options, {
+    context: _objectSpread({
+      [ns.sheetsRegistry]: sheetsRegistry
+    }, options.context)
+  }));
+  return sheetsRegistry.registry[0].classes;
+}

package/es/withWidth/index.js

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

package/es/withWidth/withWidth.js

@@ -0,0 +1,176 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+/* eslint-disable react/no-did-mount-set-state */
+import React from 'react';
+import PropTypes from 'prop-types';
+import EventListener from 'react-event-listener';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
+
+import wrapDisplayName from 'recompose/wrapDisplayName';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import withTheme from '../styles/withTheme';
+import { keys as breakpointKeys } from '../styles/createBreakpoints';
+import getThemeProps from '../styles/getThemeProps'; // By default, returns true if screen width is the same or greater than the given breakpoint.
+
+export const isWidthUp = (breakpoint, width, inclusive = true) => {
+  if (inclusive) {
+    return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(width);
+  }
+
+  return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
+}; // By default, returns true if screen width is the same or less than the given breakpoint.
+
+export const isWidthDown = (breakpoint, width, inclusive = true) => {
+  if (inclusive) {
+    return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
+  }
+
+  return breakpointKeys.indexOf(width) < breakpointKeys.indexOf(breakpoint);
+};
+
+const withWidth = (options = {}) => Component => {
+  const {
+    withTheme: withThemeOption = false,
+    noSSR = false,
+    initialWidth: initialWidthOption,
+    resizeInterval = 166 // Corresponds to 10 frames at 60 Hz.
+
+  } = options;
+
+  class WithWidth extends React.Component {
+    constructor(props) {
+      super(props);
+      this.handleResize = debounce(() => {
+        const width = this.getWidth();
+
+        if (width !== this.state.width) {
+          this.setState({
+            width
+          });
+        }
+      }, resizeInterval);
+      this.state = {
+        width: undefined
+      };
+
+      if (noSSR) {
+        this.state.width = this.getWidth();
+      }
+    }
+
+    componentDidMount() {
+      const width = this.getWidth();
+
+      if (width !== this.state.width) {
+        this.setState({
+          width
+        });
+      }
+    }
+
+    componentWillUnmount() {
+      this.handleResize.clear();
+    }
+
+    getWidth(innerWidth = window.innerWidth) {
+      const breakpoints = this.props.theme.breakpoints;
+      let width = null;
+      /**
+       * Start with the slowest value as low end devices often have a small screen.
+       *
+       * innerWidth |xs      sm      md      lg      xl
+       *            |-------|-------|-------|-------|------>
+       * width      |  xs   |  sm   |  md   |  lg   |  xl
+       */
+
+      let index = 1;
+
+      while (width === null && index < breakpointKeys.length) {
+        const currentWidth = breakpointKeys[index]; // @media are inclusive, so reproduce the behavior here.
+
+        if (innerWidth < breakpoints.values[currentWidth]) {
+          width = breakpointKeys[index - 1];
+          break;
+        }
+
+        index += 1;
+      }
+
+      width = width || 'xl';
+      return width;
+    }
+
+    render() {
+      const _this$props = this.props,
+            {
+        initialWidth,
+        theme,
+        width
+      } = _this$props,
+            other = _objectWithoutProperties(_this$props, ["initialWidth", "theme", "width"]);
+
+      const props = _objectSpread({
+        width: width || this.state.width || initialWidth || initialWidthOption || getThemeProps({
+          theme,
+          name: 'MuiWithWidth'
+        }).initialWidth
+      }, other);
+
+      const more = {};
+
+      if (withThemeOption) {
+        more.theme = theme;
+      } // When rendering the component on the server,
+      // we have no idea about the client browser screen width.
+      // In order to prevent blinks and help the reconciliation of the React tree
+      // we are not rendering the child component.
+      //
+      // An alternative is to use the `initialWidth` property.
+
+
+      if (props.width === undefined) {
+        return null;
+      }
+
+      return React.createElement(EventListener, {
+        target: "window",
+        onResize: this.handleResize
+      }, React.createElement(Component, _extends({}, more, props)));
+    }
+
+  }
+
+  WithWidth.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * As `window.innerWidth` is unavailable on the server,
+     * we default to rendering an empty component during the first mount.
+     * In some situation, you might want to use an heuristic to approximate
+     * the screen width of the client browser screen width.
+     *
+     * For instance, you could be using the user-agent or the client-hints.
+     * http://caniuse.com/#search=client%20hint
+     */
+    initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object.isRequired,
+
+    /**
+     * Bypass the width calculation logic.
+     */
+    width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
+  } : {};
+
+  if (process.env.NODE_ENV !== 'production') {
+    WithWidth.displayName = wrapDisplayName(Component, 'WithWidth');
+  }
+
+  hoistNonReactStatics(WithWidth, Component);
+  return withTheme()(WithWidth);
+};
+
+export default withWidth;

package/hi-svg-icons/HiAccount.js

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

package/hi-svg-icons/HiActivity.js

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

package/hi-svg-icons/HiAll.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _pure = _interopRequireDefault(require("recompose/pure"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("../styles");
 
 var _ref = _react.default.createElement("path", {
   fill: "none",

package/hi-svg-icons/HiBilling.js

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

package/hi-svg-icons/HiCatalog.js

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

package/hi-svg-icons/HiCustomer.js

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

package/hi-svg-icons/HiFinance.js

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

package/hi-svg-icons/HiPermission.js

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

package/hi-svg-icons/HiRoute.js

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

package/hi-svg-icons/HiSettlement.js

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

package/hi-svg-icons/HiTransaction.js

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

package/hi-svg-icons/HiUser.js

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

package/hi-svg-icons/HiWidget.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _pure = _interopRequireDefault(require("recompose/pure"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("../styles");
 
 var _ref = _react.default.createElement("path", {
   fill: "none",

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.2.0-beta-core
+/** @license HiPay-Material-UI v2.2.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.2.0-beta-core
+/** @license HiPay-Material-UI v2.2.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@hipay/hipay-material-ui",
+  "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.2.0-beta-core3",
+  "version": "2.2.0",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -26,8 +27,8 @@
   },
   "dependencies": {
     "@babel/runtime": "7.0.0",
-    "@material-ui/core": "4.4.3",
-    "@material-ui/icons": "4.4.3",
+    "@material-ui/core": "3.0.3",
+    "@material-ui/icons": "^3.0.1",
     "@types/jss": "^9.5.3",
     "@types/react-transition-group": "^2.0.8",
     "brcast": "^3.0.1",
@@ -38,6 +39,7 @@
     "dom-helpers": "^3.2.1",
     "hoist-non-react-statics": "^2.5.0",
     "is-plain-object": "^2.0.4",
+    "jss": "^9.8.7",
     "jss-camel-case": "^6.0.0",
     "jss-default-unit": "^8.0.2",
     "jss-global": "^3.0.0",
@@ -46,7 +48,7 @@
     "jss-vendor-prefixer": "^8.0.1",
     "keycode": "^2.1.9",
     "leaflet": "^1.5.1",
-    "mdi-material-ui": "^6.7.0",
+    "mdi-material-ui": "^5.4.0",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.23",
     "normalize-scroll-left": "^0.1.2",
@@ -73,4 +75,4 @@
   },
   "main": "./index.js",
   "module": "./index.es.js"
-}
+}

package/styles/createMixins.js

@@ -18,11 +18,11 @@ function createMixins(breakpoints, spacing, mixins) {
     gutters: function gutters() {
       var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return (0, _extends3.default)({
-        paddingLeft: spacing(4),
-        paddingRight: spacing(4)
+        paddingLeft: spacing.unit * 2,
+        paddingRight: spacing.unit * 2
       }, styles, (0, _defineProperty2.default)({}, breakpoints.up('sm'), (0, _extends3.default)({
-        paddingLeft: spacing(6),
-        paddingRight: spacing(6)
+        paddingLeft: spacing.unit * 3,
+        paddingRight: spacing.unit * 3
       }, styles[breakpoints.up('sm')])));
     },
     toolbar: (_toolbar = {

package/styles/spacing.js

@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var spacing = function spacing() {
-  var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-  return n * 4;
+var spacing = {
+  // All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
+  // https://material.io/design/layout/understanding-layout.html#pixel-density
+  unit: 8
 };
-
 var _default = spacing;
 exports.default = _default;

package/test-utils/getClasses.js

@@ -1,12 +1,36 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = getClasses;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var ns = _interopRequireWildcard(require("react-jss/lib/ns"));
+
+var _jss = require("jss");
+
+var _createShallow = _interopRequireDefault(require("./createShallow"));
+
+var _withStyles = require("../styles/withStyles");
+
+var shallow = (0, _createShallow.default)(); // Helper function to extract the classes from a styleSheet.
+
+function getClasses(element) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var sheetsRegistry = new _jss.SheetsRegistry();
 
-var _testUtils = require("@material-ui/core/test-utils");
+  _withStyles.sheetsManager.clear();
 
-// Helper function to extract the classes from a styleSheet.
-var _default = _testUtils.getClasses;
-exports.default = _default;
+  shallow(element, (0, _extends3.default)({}, options, {
+    context: (0, _extends3.default)((0, _defineProperty2.default)({}, ns.sheetsRegistry, sheetsRegistry), options.context)
+  }));
+  return sheetsRegistry.registry[0].classes;
+}

package/withWidth/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _withWidth.default;
+  }
+});
+
+var _withWidth = _interopRequireWildcard(require("./withWidth"));
+
+Object.keys(_withWidth).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _withWidth[key];
+    }
+  });
+});