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

package/es/styles/colorManipulator.js

@@ -1,8 +1,5 @@
-//  weak
 /* eslint-disable no-use-before-define */
-
 import warning from 'warning';
-
 /**
  * Returns a number whose value is limited to the given range.
  *
@@ -11,27 +8,30 @@ import warning from 'warning';
  * @param {number} max The upper boundary of the output range
  * @returns {number} A number in the range [min, max]
  */
+
 function clamp(value, min = 0, max = 1) {
   process.env.NODE_ENV !== "production" ? warning(value >= min && value <= max, `Material-UI: the value provided ${value} is out of range [${min}, ${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
  */
+
+
 export function convertHexToRGB(color) {
   color = color.substr(1);
-
   const re = new RegExp(`.{1,${color.length / 3}}`, 'g');
   let colors = color.match(re);
 
@@ -41,7 +41,30 @@ export function convertHexToRGB(color) {
 
   return colors ? `rgb(${colors.map(n => parseInt(n, 16)).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
+ */
+
+export function rgbToHex(color) {
+  // Pass hex straight through
+  if (color.indexOf('#') === 0) {
+    return color;
+  }
+
+  function intToHex(c) {
+    const hex = c.toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  }
 
+  let {
+    values
+  } = decomposeColor(color);
+  values = values.map(n => intToHex(n));
+  return `#${values.join('')}`;
+}
 /**
  * Returns an object with the type and values of a color.
  *
@@ -50,6 +73,7 @@ export 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[]}
  */
+
 export function decomposeColor(color) {
   if (color.charAt(0) === '#') {
     return decomposeColor(convertHexToRGB(color));
@@ -60,9 +84,17 @@ export function decomposeColor(color) {
   let values = color.substring(marker + 1, color.length - 1).split(',');
   values = values.map(value => parseFloat(value));
 
-  return { type, values };
-}
+  if (process.env.NODE_ENV !== 'production') {
+    if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
+      throw new Error([`Material-UI: unsupported \`${color}\` color.`, 'We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().'].join('\n'));
+    }
+  }
 
+  return {
+    type,
+    values
+  };
+}
 /**
  * Converts a color object with type and values to a string.
  *
@@ -71,23 +103,27 @@ export function decomposeColor(color) {
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */
-export function recomposeColor(color) {
-  const { type } = color;
-  let { values } = color;
 
-  if (type.indexOf('rgb') > -1) {
+export function recomposeColor(color) {
+  const {
+    type
+  } = color;
+  let {
+    values
+  } = color;
+
+  if (type.indexOf('rgb') !== -1) {
     // Only convert the first 3 values to int (i.e. not alpha)
     values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
   }
 
-  if (type.indexOf('hsl') > -1) {
+  if (type.indexOf('hsl') !== -1) {
     values[1] = `${values[1]}%`;
     values[2] = `${values[2]}%`;
   }
 
   return `${color.type}(${values.join(', ')})`;
 }
-
 /**
  * Calculates the contrast ratio between two colors.
  *
@@ -97,12 +133,12 @@ export 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.
  */
+
 export function getContrastRatio(foreground, background) {
   const lumA = getLuminance(foreground);
   const 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.
@@ -112,23 +148,23 @@ export 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
  */
+
 export function getLuminance(color) {
   const decomposedColor = decomposeColor(color);
 
-  if (decomposedColor.type.indexOf('rgb') > -1) {
+  if (decomposedColor.type.indexOf('rgb') !== -1) {
     const rgb = decomposedColor.values.map(val => {
       val /= 255; // normalized
-      return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-    });
-    // Truncate at 3 digits
+
+      return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
+    }); // 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.
@@ -137,10 +173,10 @@ export 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
  */
+
 export function emphasize(color, coefficient = 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.
@@ -149,22 +185,20 @@ export function emphasize(color, coefficient = 0.15) {
  * @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
  */
+
 export function fade(color, value) {
   process.env.NODE_ENV !== "production" ? warning(color, `Material-UI: missing color argument in fade(${color}, ${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.
  *
@@ -172,24 +206,23 @@ export 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
  */
+
 export function darken(color, coefficient) {
   process.env.NODE_ENV !== "production" ? warning(color, `Material-UI: missing color argument in darken(${color}, ${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 (let i = 0; i < 3; i += 1) {
       color.values[i] *= 1 - coefficient;
     }
   }
+
   return recomposeColor(color);
 }
-
 /**
  * Lightens a color.
  *
@@ -197,25 +230,20 @@ export 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
  */
+
 export function lighten(color, coefficient) {
   process.env.NODE_ENV !== "production" ? warning(color, `Material-UI: missing color argument in lighten(${color}, ${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 (let i = 0; i < 3; i += 1) {
       color.values[i] += (255 - color.values[i]) * coefficient;
     }
   }
 
   return recomposeColor(color);
-}
-
-export function getContrastedTextColor(background, black, white) {
-  return getContrastRatio(background, black) < 9 ? white : black;
 }

package/es/styles/createBreakpoints.js

@@ -1,10 +1,9 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-export const keys = ['xs', 'sm', 'md', 'lg', 'xl'];
+export const keys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.
 
-// Keep in mind that @media is inclusive by the CSS specification.
 export default function createBreakpoints(breakpoints) {
   const {
     // The breakpoint **start** at this value.
@@ -19,7 +18,7 @@ export default function createBreakpoints(breakpoints) {
     unit = 'px',
     step = 5
   } = breakpoints,
-        other = _objectWithoutProperties(breakpoints, ['values', 'unit', 'step']);
+        other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
 
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
@@ -57,7 +56,7 @@ export default function createBreakpoints(breakpoints) {
     return values[key];
   }
 
-  return _extends({
+  return _objectSpread({
     keys,
     values,
     up,

package/es/styles/createGenerateClassName.js

@@ -1,28 +1,37 @@
-import warning from 'warning';
+/* eslint-disable no-underscore-dangle */
+import warning from 'warning'; // People might bundle this classname generator twice.
+// We need to use a global.
 
-let generatorCounter = 0;
+global.__MUI_GENERATOR_COUNTER__ = 0;
+const escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
 
-// Returns a function which generates unique class names based on counters.
+function safePrefix(classNamePrefix) {
+  const prefix = String(classNamePrefix);
+  process.env.NODE_ENV !== "production" ? warning(prefix.length < 256, `Material-UI: the class name prefix is too long: ${prefix}.`) : void 0; // Sanitize the string as will be used to prefix the generated class name.
+
+  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
-export default function createGenerateClassName(options = {}) {
-  const { dangerouslyUseGlobalCSS = false, productionPrefix = 'jss' } = options;
-  const escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
-  let ruleCounter = 0;
 
-  // - HMR can lead to many class name generators being instantiated,
+
+export default function createGenerateClassName(options = {}) {
+  const {
+    dangerouslyUseGlobalCSS = false,
+    productionPrefix = 'jss'
+  } = options;
+  let 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'));
     }
@@ -30,20 +39,16 @@ export default function createGenerateClassName(options = {}) {
 
   return (rule, styleSheet) => {
     ruleCounter += 1;
-    process.env.NODE_ENV !== "production" ? warning(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" ? warning(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) {
-        let 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 `${styleSheet.options.name}-${rule.key}`;
         }
 
-        if (process.env.NODE_ENV !== 'production') {
+        if (styleSheet.options.classNamePrefix && process.env.NODE_ENV !== 'production') {
+          const prefix = safePrefix(styleSheet.options.classNamePrefix);
           return `${prefix}-${rule.key}-${ruleCounter}`;
         }
       }
@@ -60,10 +65,7 @@ export default function createGenerateClassName(options = {}) {
     }
 
     if (styleSheet && styleSheet.options.classNamePrefix) {
-      let prefix = styleSheet.options.classNamePrefix;
-      // Sanitize the string as will be used to prefix the generated class name.
-      prefix = prefix.replace(escapeRegex, '-');
-
+      const prefix = safePrefix(styleSheet.options.classNamePrefix);
       return `${prefix}-${rule.key}-${ruleCounter}`;
     }
 

package/es/styles/createMixins.js

@@ -1,12 +1,12 @@
-import _extends from 'babel-runtime/helpers/extends';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
 export default function createMixins(breakpoints, spacing, mixins) {
-  return _extends({
+  return _objectSpread({
     gutters: (styles = {}) => {
-      return _extends({
+      return _objectSpread({
         paddingLeft: spacing.unit * 2,
         paddingRight: spacing.unit * 2
       }, styles, {
-        [breakpoints.up('sm')]: _extends({
+        [breakpoints.up('sm')]: _objectSpread({
           paddingLeft: spacing.unit * 3,
           paddingRight: spacing.unit * 3
         }, styles[breakpoints.up('sm')])

package/es/styles/createMuiTheme.js

@@ -1,44 +1,53 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
+
+import isPlainObject from 'is-plain-object';
 import warning from 'warning';
-import createTypography from './createTypography';
 import createBreakpoints from './createBreakpoints';
-import createPalette from './createPalette';
 import createMixins from './createMixins';
+import createPalette from './createPalette';
+import createTypography from './createTypography';
 import shadows from './shadows';
+import shape from './shape';
+import spacing from './spacing';
 import transitions from './transitions';
 import zIndex from './zIndex';
-import spacing from './spacing';
 
 function createMuiTheme(options = {}) {
   const {
-    palette: paletteInput = {},
     breakpoints: breakpointsInput = {},
     mixins: mixinsInput = {},
-    typography: typographyInput = {},
-    shadows: shadowsInput
+    palette: paletteInput = {},
+    shadows: shadowsInput,
+    typography: typographyInput = {}
   } = options,
-        other = _objectWithoutProperties(options, ['palette', 'breakpoints', 'mixins', 'typography', 'shadows']);
+        other = _objectWithoutProperties(options, ["breakpoints", "mixins", "palette", "shadows", "typography"]);
 
   const palette = createPalette(paletteInput);
   const breakpoints = createBreakpoints(breakpointsInput);
 
-  const muiTheme = _extends({
+  const muiTheme = _objectSpread({
+    breakpoints,
     direction: 'ltr',
-    palette,
-    typography: createTypography(palette, typographyInput),
     mixins: createMixins(breakpoints, spacing, mixinsInput),
-    breakpoints,
-    shadows: shadowsInput || shadows
+    overrides: {},
+    // Inject custom styles
+    palette,
+    props: {},
+    // Inject custom properties
+    shadows: shadowsInput || shadows,
+    typography: createTypography(palette, typographyInput)
   }, deepmerge({
-    transitions,
+    shape,
     spacing,
+    transitions,
     zIndex
-  }, other));
+  }, other, {
+    isMergeableObject: isPlainObject
+  }));
 
   process.env.NODE_ENV !== "production" ? warning(muiTheme.shadows.length === 25, 'Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.') : void 0;
-
   return muiTheme;
 }