@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.35

package/styles/colorManipulator.js

@@ -1,9 +1,12 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertHexToRGB = convertHexToRGB;
+exports.rgbToHex = rgbToHex;
 exports.decomposeColor = decomposeColor;
 exports.recomposeColor = recomposeColor;
 exports.getContrastRatio = getContrastRatio;
@@ -12,13 +15,10 @@ exports.emphasize = emphasize;
 exports.fade = fade;
 exports.darken = darken;
 exports.lighten = lighten;
-exports.getContrastedTextColor = getContrastedTextColor;
-
-var _warning = require('warning');
 
-var _warning2 = _interopRequireDefault(_warning);
+var _warning = _interopRequireDefault(require("warning"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable no-use-before-define */
 
 /**
  * Returns a number whose value is limited to the given range.
@@ -31,31 +31,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function clamp(value) {
   var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-
-  process.env.NODE_ENV !== "production" ? (0, _warning2.default)(value >= min && value <= max, 'Material-UI: the value provided ' + value + ' is out of range [' + min + ', ' + max + '].') : void 0;
+  process.env.NODE_ENV !== "production" ? (0, _warning.default)(value >= min && value <= max, "Material-UI: the value provided ".concat(value, " is out of range [").concat(min, ", ").concat(max, "].")) : void 0;
 
   if (value < min) {
     return min;
   }
+
   if (value > max) {
     return max;
   }
+
   return value;
 }
-
 /**
  * Converts a color from CSS hex format to CSS rgb format.
  *
- *  @param {string} color - Hex color, i.e. #nnn or #nnnnnn
- *  @returns {string} A CSS rgb color string
+ * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
+ * @returns {string} A CSS rgb color string
  */
-//  weak
-/* eslint-disable no-use-before-define */
+
 
 function convertHexToRGB(color) {
   color = color.substr(1);
-
-  var re = new RegExp('.{1,' + color.length / 3 + '}', 'g');
+  var re = new RegExp(".{1,".concat(color.length / 3, "}"), 'g');
   var colors = color.match(re);
 
   if (colors && colors[0].length === 1) {
@@ -64,11 +62,37 @@ function convertHexToRGB(color) {
     });
   }
 
-  return colors ? 'rgb(' + colors.map(function (n) {
+  return colors ? "rgb(".concat(colors.map(function (n) {
     return parseInt(n, 16);
-  }).join(', ') + ')' : '';
+  }).join(', '), ")") : '';
 }
+/**
+ * Converts a color from CSS rgb format to CSS hex format.
+ *
+ * @param {string} color - RGB color, i.e. rgb(n, n, n)
+ * @returns {string} A CSS rgb color string, i.e. #nnnnnn
+ */
 
+
+function rgbToHex(color) {
+  // Pass hex straight through
+  if (color.indexOf('#') === 0) {
+    return color;
+  }
+
+  function intToHex(c) {
+    var hex = c.toString(16);
+    return hex.length === 1 ? "0".concat(hex) : hex;
+  }
+
+  var _decomposeColor = decomposeColor(color),
+      values = _decomposeColor.values;
+
+  values = values.map(function (n) {
+    return intToHex(n);
+  });
+  return "#".concat(values.join(''));
+}
 /**
  * Returns an object with the type and values of a color.
  *
@@ -77,6 +101,8 @@ function convertHexToRGB(color) {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {object} - A MUI color object: {type: string, values: number[]}
  */
+
+
 function decomposeColor(color) {
   if (color.charAt(0) === '#') {
     return decomposeColor(convertHexToRGB(color));
@@ -89,9 +115,17 @@ function decomposeColor(color) {
     return parseFloat(value);
   });
 
-  return { type: type, values: values };
-}
+  if (process.env.NODE_ENV !== 'production') {
+    if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
+      throw new Error(["Material-UI: unsupported `".concat(color, "` color."), 'We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().'].join('\n'));
+    }
+  }
 
+  return {
+    type: type,
+    values: values
+  };
+}
 /**
  * Converts a color object with type and values to a string.
  *
@@ -100,26 +134,26 @@ function decomposeColor(color) {
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */
+
+
 function recomposeColor(color) {
   var type = color.type;
   var values = color.values;
 
-
-  if (type.indexOf('rgb') > -1) {
+  if (type.indexOf('rgb') !== -1) {
     // Only convert the first 3 values to int (i.e. not alpha)
     values = values.map(function (n, i) {
       return i < 3 ? parseInt(n, 10) : n;
     });
   }
 
-  if (type.indexOf('hsl') > -1) {
-    values[1] = values[1] + '%';
-    values[2] = values[2] + '%';
+  if (type.indexOf('hsl') !== -1) {
+    values[1] = "".concat(values[1], "%");
+    values[2] = "".concat(values[2], "%");
   }
 
-  return color.type + '(' + values.join(', ') + ')';
+  return "".concat(color.type, "(").concat(values.join(', '), ")");
 }
-
 /**
  * Calculates the contrast ratio between two colors.
  *
@@ -129,12 +163,13 @@ function recomposeColor(color) {
  * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {number} A contrast ratio value in the range 0 - 21.
  */
+
+
 function getContrastRatio(foreground, background) {
   var lumA = getLuminance(foreground);
   var lumB = getLuminance(background);
   return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
 }
-
 /**
  * The relative brightness of any point in a color space,
  * normalized to 0 for darkest black and 1 for lightest white.
@@ -144,23 +179,24 @@ function getContrastRatio(foreground, background) {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {number} The relative brightness of the color in the range 0 - 1
  */
+
+
 function getLuminance(color) {
   var decomposedColor = decomposeColor(color);
 
-  if (decomposedColor.type.indexOf('rgb') > -1) {
+  if (decomposedColor.type.indexOf('rgb') !== -1) {
     var rgb = decomposedColor.values.map(function (val) {
       val /= 255; // normalized
+
       return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-    });
-    // Truncate at 3 digits
+    }); // Truncate at 3 digits
+
     return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
-  } else if (decomposedColor.type.indexOf('hsl') > -1) {
-    return decomposedColor.values[2] / 100;
-  }
+  } // else if (decomposedColor.type.indexOf('hsl') !== -1)
 
-  throw new Error('Material-UI: unsupported `' + color + '` color.');
-}
 
+  return decomposedColor.values[2] / 100;
+}
 /**
  * Darken or lighten a colour, depending on its luminance.
  * Light colors are darkened, dark colors are lightened.
@@ -169,12 +205,12 @@ function getLuminance(color) {
  * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
+
+
 function emphasize(color) {
   var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15;
-
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
 }
-
 /**
  * Set the absolute transparency of a color.
  * Any existing alpha values are overwritten.
@@ -183,22 +219,21 @@ function emphasize(color) {
  * @param {number} value - value to set the alpha channel to in the range 0 -1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-function fade(color, value) {
-  process.env.NODE_ENV !== "production" ? (0, _warning2.default)(color, 'Material-UI: missing color argument in fade(' + color + ', ' + value + ').') : void 0;
 
-  if (!color) return color;
 
+function fade(color, value) {
+  process.env.NODE_ENV !== "production" ? (0, _warning.default)(color, "Material-UI: missing color argument in fade(".concat(color, ", ").concat(value, ").")) : void 0;
+  if (!color) return color;
   color = decomposeColor(color);
   value = clamp(value);
 
   if (color.type === 'rgb' || color.type === 'hsl') {
     color.type += 'a';
   }
-  color.values[3] = value;
 
+  color.values[3] = value;
   return recomposeColor(color);
 }
-
 /**
  * Darkens a color.
  *
@@ -206,24 +241,24 @@ function fade(color, value) {
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-function darken(color, coefficient) {
-  process.env.NODE_ENV !== "production" ? (0, _warning2.default)(color, 'Material-UI: missing color argument in darken(' + color + ', ' + coefficient + ').') : void 0;
 
-  if (!color) return color;
 
+function darken(color, coefficient) {
+  process.env.NODE_ENV !== "production" ? (0, _warning.default)(color, "Material-UI: missing color argument in darken(".concat(color, ", ").concat(coefficient, ").")) : void 0;
+  if (!color) return color;
   color = decomposeColor(color);
   coefficient = clamp(coefficient);
 
-  if (color.type.indexOf('hsl') > -1) {
+  if (color.type.indexOf('hsl') !== -1) {
     color.values[2] *= 1 - coefficient;
-  } else if (color.type.indexOf('rgb') > -1) {
+  } else if (color.type.indexOf('rgb') !== -1) {
     for (var i = 0; i < 3; i += 1) {
       color.values[i] *= 1 - coefficient;
     }
   }
+
   return recomposeColor(color);
 }
-
 /**
  * Lightens a color.
  *
@@ -231,25 +266,21 @@ function darken(color, coefficient) {
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-function lighten(color, coefficient) {
-  process.env.NODE_ENV !== "production" ? (0, _warning2.default)(color, 'Material-UI: missing color argument in lighten(' + color + ', ' + coefficient + ').') : void 0;
 
-  if (!color) return color;
 
+function lighten(color, coefficient) {
+  process.env.NODE_ENV !== "production" ? (0, _warning.default)(color, "Material-UI: missing color argument in lighten(".concat(color, ", ").concat(coefficient, ").")) : void 0;
+  if (!color) return color;
   color = decomposeColor(color);
   coefficient = clamp(coefficient);
 
-  if (color.type.indexOf('hsl') > -1) {
+  if (color.type.indexOf('hsl') !== -1) {
     color.values[2] += (100 - color.values[2]) * coefficient;
-  } else if (color.type.indexOf('rgb') > -1) {
+  } else if (color.type.indexOf('rgb') !== -1) {
     for (var i = 0; i < 3; i += 1) {
       color.values[i] += (255 - color.values[i]) * coefficient;
     }
   }
 
   return recomposeColor(color);
-}
-
-function getContrastedTextColor(background, black, white) {
-  return getContrastRatio(background, black) < 9 ? white : black;
 }

package/styles/createBreakpoints.js

@@ -1,30 +1,26 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.keys = undefined;
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
 exports.default = createBreakpoints;
+exports.keys = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-var keys = exports.keys = ['xs', 'sm', 'md', 'lg', 'xl'];
+var keys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.
+
+exports.keys = keys;
 
-// Keep in mind that @media is inclusive by the CSS specification.
 function createBreakpoints(breakpoints) {
   var _breakpoints$values = breakpoints.values,
-      values = _breakpoints$values === undefined ? {
+      values = _breakpoints$values === void 0 ? {
     xs: 0,
     sm: 600,
     md: 960,
@@ -32,15 +28,14 @@ function createBreakpoints(breakpoints) {
     xl: 1920
   } : _breakpoints$values,
       _breakpoints$unit = breakpoints.unit,
-      unit = _breakpoints$unit === undefined ? 'px' : _breakpoints$unit,
+      unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
       _breakpoints$step = breakpoints.step,
-      step = _breakpoints$step === undefined ? 5 : _breakpoints$step,
-      other = (0, _objectWithoutProperties3.default)(breakpoints, ['values', 'unit', 'step']);
-
+      step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
+      other = (0, _objectWithoutProperties2.default)(breakpoints, ["values", "unit", "step"]);
 
   function up(key) {
     var value = typeof values[key] === 'number' ? values[key] : key;
-    return '@media (min-width:' + value + unit + ')';
+    return "@media (min-width:".concat(value).concat(unit, ")");
   }
 
   function down(key) {
@@ -53,7 +48,7 @@ function createBreakpoints(breakpoints) {
     }
 
     var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
-    return '@media (max-width:' + (value - step / 100) + unit + ')';
+    return "@media (max-width:".concat(value - step / 100).concat(unit, ")");
   }
 
   function between(start, end) {
@@ -63,7 +58,7 @@ function createBreakpoints(breakpoints) {
       return up(start);
     }
 
-    return '@media (min-width:' + values[start] + unit + ') and ' + ('(max-width:' + (values[keys[endIndex]] - step / 100) + unit + ')');
+    return "@media (min-width:".concat(values[start]).concat(unit, ") and ") + "(max-width:".concat(values[keys[endIndex]] - step / 100).concat(unit, ")");
   }
 
   function only(key) {
@@ -74,7 +69,7 @@ function createBreakpoints(breakpoints) {
     return values[key];
   }
 
-  return (0, _extends3.default)({
+  return (0, _extends2.default)({
     keys: keys,
     values: values,
     up: up,

package/styles/createGenerateClassName.js

@@ -1,44 +1,48 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createGenerateClassName;
 
-var _warning = require('warning');
-
-var _warning2 = _interopRequireDefault(_warning);
+var _warning = _interopRequireDefault(require("warning"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable no-underscore-dangle */
+// People might bundle this classname generator twice.
+// We need to use a global.
+global.__MUI_GENERATOR_COUNTER__ = 0;
+var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
 
-var generatorCounter = 0;
+function safePrefix(classNamePrefix) {
+  var prefix = String(classNamePrefix);
+  process.env.NODE_ENV !== "production" ? (0, _warning.default)(prefix.length < 256, "Material-UI: the class name prefix is too long: ".concat(prefix, ".")) : void 0; // Sanitize the string as will be used to prefix the generated class name.
 
-// Returns a function which generates unique class names based on counters.
+  return prefix.replace(escapeRegex, '-');
+} // 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
+
+
 function createGenerateClassName() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _options$dangerouslyU = options.dangerouslyUseGlobalCSS,
-      dangerouslyUseGlobalCSS = _options$dangerouslyU === undefined ? false : _options$dangerouslyU,
+      dangerouslyUseGlobalCSS = _options$dangerouslyU === void 0 ? false : _options$dangerouslyU,
       _options$productionPr = options.productionPrefix,
-      productionPrefix = _options$productionPr === undefined ? 'jss' : _options$productionPr;
-
-  var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
-  var ruleCounter = 0;
-
-  // - HMR can lead to many class name generators being instantiated,
+      productionPrefix = _options$productionPr === void 0 ? 'jss' : _options$productionPr;
+  var ruleCounter = 0; // - HMR can lead to many class name generators being instantiated,
   // so the warning is only triggered in production.
   // - We expect a class name generator to be instantiated per new request on the server,
   // so the warning is only triggered client side.
-  // - You can get away with having multiple class name generators
-  // by modifying the `productionPrefix`.
-  if (process.env.NODE_ENV === 'production' && typeof window !== 'undefined' && productionPrefix === 'jss') {
-    generatorCounter += 1;
 
-    if (generatorCounter > 2) {
+  if (process.env.NODE_ENV === 'production' && typeof window !== 'undefined') {
+    global.__MUI_GENERATOR_COUNTER__ += 1;
+
+    if (global.__MUI_GENERATOR_COUNTER__ > 2) {
       // eslint-disable-next-line no-console
       console.error(['Material-UI: we have detected more than needed creation of the class name generator.', 'You should only use one class name generator on the client side.', 'If you do otherwise, you take the risk to have conflicting class names in production.'].join('\n'));
     }
@@ -46,43 +50,37 @@ function createGenerateClassName() {
 
   return function (rule, styleSheet) {
     ruleCounter += 1;
-    process.env.NODE_ENV !== "production" ? (0, _warning2.default)(ruleCounter < 1e10, ['Material-UI: you might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join('')) : void 0;
+    process.env.NODE_ENV !== "production" ? (0, _warning.default)(ruleCounter < 1e10, ['Material-UI: you might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join('')) : void 0; // Code branch the whole block at the expense of more code.
 
-    // Code branch the whole block at the expense of more code.
     if (dangerouslyUseGlobalCSS) {
-      if (styleSheet && styleSheet.options.classNamePrefix) {
-        var prefix = styleSheet.options.classNamePrefix;
-        // Sanitize the string as will be used to prefix the generated class name.
-        prefix = prefix.replace(escapeRegex, '-');
-
-        if (prefix.match(/^Mui/)) {
-          return prefix + '-' + rule.key;
+      if (styleSheet) {
+        if (styleSheet.options.name) {
+          return "".concat(styleSheet.options.name, "-").concat(rule.key);
         }
 
-        if (process.env.NODE_ENV !== 'production') {
-          return prefix + '-' + rule.key + '-' + ruleCounter;
+        if (styleSheet.options.classNamePrefix && process.env.NODE_ENV !== 'production') {
+          var prefix = safePrefix(styleSheet.options.classNamePrefix);
+          return "".concat(prefix, "-").concat(rule.key, "-").concat(ruleCounter);
         }
       }
 
       if (process.env.NODE_ENV === 'production') {
-        return '' + productionPrefix + ruleCounter;
+        return "".concat(productionPrefix).concat(ruleCounter);
       }
 
-      return rule.key + '-' + ruleCounter;
+      return "".concat(rule.key, "-").concat(ruleCounter);
     }
 
     if (process.env.NODE_ENV === 'production') {
-      return '' + productionPrefix + ruleCounter;
+      return "".concat(productionPrefix).concat(ruleCounter);
     }
 
     if (styleSheet && styleSheet.options.classNamePrefix) {
-      var _prefix = styleSheet.options.classNamePrefix;
-      // Sanitize the string as will be used to prefix the generated class name.
-      _prefix = _prefix.replace(escapeRegex, '-');
+      var _prefix = safePrefix(styleSheet.options.classNamePrefix);
 
-      return _prefix + '-' + rule.key + '-' + ruleCounter;
+      return "".concat(_prefix, "-").concat(rule.key, "-").concat(ruleCounter);
     }
 
-    return rule.key + '-' + ruleCounter;
+    return "".concat(rule.key, "-").concat(ruleCounter);
   };
 }

package/styles/createMixins.js

@@ -1,41 +1,35 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
-var _extends3 = require('babel-runtime/helpers/extends');
-
-var _extends4 = _interopRequireDefault(_extends3);
-
 exports.default = createMixins;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 function createMixins(breakpoints, spacing, mixins) {
   var _toolbar;
 
-  return (0, _extends4.default)({
+  return (0, _extends3.default)({
     gutters: function gutters() {
       var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-      return (0, _extends4.default)({
+      return (0, _extends3.default)({
         paddingLeft: spacing.unit * 2,
         paddingRight: spacing.unit * 2
-      }, styles, (0, _defineProperty3.default)({}, breakpoints.up('sm'), (0, _extends4.default)({
+      }, styles, (0, _defineProperty2.default)({}, breakpoints.up('sm'), (0, _extends3.default)({
         paddingLeft: spacing.unit * 3,
         paddingRight: spacing.unit * 3
       }, styles[breakpoints.up('sm')])));
     },
     toolbar: (_toolbar = {
       minHeight: 56
-    }, (0, _defineProperty3.default)(_toolbar, breakpoints.up('xs') + ' and (orientation: landscape)', {
+    }, (0, _defineProperty2.default)(_toolbar, "".concat(breakpoints.up('xs'), " and (orientation: landscape)"), {
       minHeight: 48
-    }), (0, _defineProperty3.default)(_toolbar, breakpoints.up('sm'), {
+    }), (0, _defineProperty2.default)(_toolbar, breakpoints.up('sm'), {
       minHeight: 64
     }), _toolbar)
   }, mixins);