@hipay/hipay-material-ui 2.0.0-beta.41 → 2.0.0-beta.43

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.41
+/** @license HiPay-Material-UI v2.0.0-beta.43
  *
  * 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.0.0-beta.41
+/** @license HiPay-Material-UI v2.0.0-beta.43
  *
  * 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

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.41",
+  "version": "2.0.0-beta.43",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/umd/hipay-material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.41
+/** @license HiPay-Material-UI v2.0.0-beta.43
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13290,6 +13290,12 @@
             var styles = function styles(theme) {
               return {
                 root: {},
+                flatNeutral: {
+                  color: theme.palette.neutral.main,
+                  '&$disabled': {
+                    color: theme.palette.action.disabled
+                  }
+                },
                 flatPositive: {
                   color: theme.palette.positive.main,
                   '&:hover': {
@@ -13298,6 +13304,9 @@
                     '@media (hover: none)': {
                       backgroundColor: 'transparent'
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.action.disabled
                   }
                 },
                 flatNegative: {
@@ -13308,6 +13317,9 @@
                     '@media (hover: none)': {
                       backgroundColor: 'transparent'
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.action.disabled
                   }
                 },
                 flatMiddle: {
@@ -13318,16 +13330,9 @@
                     '@media (hover: none)': {
                       backgroundColor: 'transparent'
                     }
-                  }
-                },
-                flatNeutral: {
-                  color: theme.palette.neutral.main,
-                  '&:hover': {
-                    backgroundColor: fade(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
-                    // Reset on touch devices, it doesn't add specificity
-                    '@media (hover: none)': {
-                      backgroundColor: 'transparent'
-                    }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.action.disabled
                   }
                 },
 
@@ -13341,6 +13346,10 @@
                     '@media (hover: none)': {
                       backgroundColor: theme.palette.positive.main
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
                   }
                 },
 
@@ -13354,6 +13363,10 @@
                     '@media (hover: none)': {
                       backgroundColor: theme.palette.negative.main
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
                   }
                 },
 
@@ -13367,6 +13380,10 @@
                     '@media (hover: none)': {
                       backgroundColor: theme.palette.middle.main
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
                   }
                 },
 
@@ -13380,6 +13397,10 @@
                     '@media (hover: none)': {
                       backgroundColor: theme.palette.neutral.main
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
                   }
                 },
 
@@ -13413,7 +13434,8 @@
                   '&:hover': {
                     border: "1px solid ".concat(theme.palette.neutral.main)
                   }
-                }
+                },
+                disabled: {}
               };
             };
 
@@ -13425,19 +13447,21 @@
                   className = props.className,
                   color = props.color,
                   variant = props.variant,
-                  other = objectWithoutProperties(props, ["children", "classes", "className", "color", "variant"]);
+                  disabled = props.disabled,
+                  other = objectWithoutProperties(props, ["children", "classes", "className", "color", "variant", "disabled"]);
 
               var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
               var fab = variant === 'fab' || variant === 'extendedFab';
               var contained = variant === 'contained' || variant === 'raised';
-              var buttonClassNames = classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), defineProperty(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), defineProperty(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), defineProperty(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'neutral'), defineProperty(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), defineProperty(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), defineProperty(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), defineProperty(_classNames, classes.containedNeutral, (contained || fab) && color === 'neutral'), defineProperty(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), defineProperty(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), defineProperty(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), defineProperty(_classNames, classes.outlinedNeutral, variant === 'outlined' && color === 'neutral'), _classNames));
+              var buttonClassNames = classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), defineProperty(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), defineProperty(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), defineProperty(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), defineProperty(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), defineProperty(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), defineProperty(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), defineProperty(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), defineProperty(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), defineProperty(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.disabled, disabled), _classNames));
               return React__default.createElement(Button$2, _extends_1({
                 className: className,
                 classes: {
                   root: buttonClassNames
                 },
                 color: hcolor,
-                variant: variant
+                variant: variant,
+                disabled: disabled
               }, other), children);
             }
 
@@ -13463,7 +13487,7 @@
               variant: propTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
             };
             HiButton.defaultProps = {
-              color: 'default',
+              color: 'neutral',
               variant: 'text'
             };
             var HiButton$1 = withStyles(styles, {
@@ -65850,42 +65874,48 @@
             var styles$2 = function styles(theme) {
               return {
                 /* Styles applied to the root element. */
-                root: {},
+                root: {
+                  /* Styles applied to the root element if `color="primary"`. */
+                  '&$colorPrimary': {
+                    color: theme.palette.primary.main
+                  },
 
-                /* Styles applied to the root element. */
-                faIcon: {
-                  fontSize: 20
-                },
+                  /* Styles applied to the root element if `color="secondary"`. */
+                  '&$colorSecondary': {
+                    color: theme.palette.secondary.main
+                  },
 
-                /* Styles applied to the root element if `color="primary"`. */
-                colorPrimary: {
-                  color: theme.palette.primary.main
-                },
+                  /* Styles applied to the root element if `color="positive"`. */
+                  '&$colorPositive': {
+                    color: theme.palette.positive.main
+                  },
 
-                /* Styles applied to the root element if `color="secondary"`. */
-                colorSecondary: {
-                  color: theme.palette.secondary.main
-                },
+                  /* Styles applied to the root element if `color="negative"`. */
+                  '&$colorNegative': {
+                    color: theme.palette.negative.main
+                  },
 
-                /* Styles applied to the root element if `color="positive"`. */
-                colorPositive: {
-                  color: theme.palette.positive.main
-                },
+                  /* Styles applied to the root element if `color="middle"`. */
+                  '&$colorMiddle': {
+                    color: theme.palette.middle.main
+                  },
 
-                /* Styles applied to the root element if `color="negative"`. */
-                colorNegative: {
-                  color: theme.palette.negative.main
+                  /* Styles applied to the root element if `color="neutral"`. */
+                  '&$colorNeutral': {
+                    color: theme.palette.neutral.main
+                  }
                 },
 
-                /* Styles applied to the root element if `color="middle"`. */
-                colorMiddle: {
-                  color: theme.palette.middle.main
+                /* Styles applied to the root element. */
+                faIcon: {
+                  fontSize: 20
                 },
-
-                /* Styles applied to the root element if `color="neutral"`. */
-                colorNeutral: {
-                  color: theme.palette.neutral.main
-                }
+                colorPrimary: {},
+                colorSecondary: {},
+                colorPositive: {},
+                colorNegative: {},
+                colorMiddle: {},
+                colorNeutral: {}
               };
             };
 
@@ -68701,6 +68731,10 @@
                   // Si on click sur un élément de HiInput, on garde le focus
                   // Par exemple sur l'icone reset
                   if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
+                    if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
+                      this.props.onBlur(event);
+                    }
+
                     event.stopPropagation();
                   } else {
                     this.setState({
@@ -68873,6 +68907,15 @@
                     }
                   }));
                 }
+              }], [{
+                key: "getDerivedStateFromProps",
+                value: function getDerivedStateFromProps(nextProps, prevState) {
+                  if (typeof nextProps.focused !== 'undefined' && nextProps.focused !== prevState.focused) {
+                    return {
+                      focused: nextProps.focused
+                    };
+                  }
+                }
               }]);
 
               return HiInput;
@@ -68929,6 +68972,12 @@
                */
               error: propTypes.bool,
 
+              /**
+               * Force le focus de l'input et surcharge le comportement par défaut
+               * où le focus est géré dans le state.
+               */
+              focused: propTypes.bool,
+
               /**
                * Utile pour surcharger les classes de l'input
                */
@@ -86225,8 +86274,6 @@
 
                   var inputProps = _extends_1({}, onReset && {
                     onReset: this.handleReset
-                  }, {
-                    onBlur: this.handleBlur
                   }, props, {
                     onChange: this.handleInputChange
                   });
@@ -91527,7 +91574,7 @@
 
             var styles$l = function styles(theme) {
               return {
-                root: _extends_1({}, theme.typography.b3, {
+                root: _extends_1({}, theme.typography.b1, {
                   display: 'inline-block',
                   alignItems: 'baseline',
                   maxWidth: '100%',
@@ -91645,7 +91692,12 @@
                 }, fontWeight && {
                   fontWeight: fontWeight
                 })
-              }, other), label);
+              }, other, {
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                  __html: escapeHTML(label)
+                }
+              }));
             }
 
             HiColoredLabel.propTypes = {
@@ -95598,7 +95650,10 @@
                 }, theme.typography.b1, {
                   fontWeight: 'inherit',
                   width: '100%',
-                  padding: '5px 0'
+                  padding: '5px 0',
+                  '& strong': {
+                    fontWeight: theme.typography.fontWeightMedium
+                  }
                 }),
                 label: {
                   display: 'inline-block',
@@ -95744,6 +95799,7 @@
                       hideCheckbox = _this$props2.hideCheckbox,
                       onSelect = _this$props2.onSelect,
                       indeterminate = _this$props2.indeterminate,
+                      indeterminateIcon = _this$props2.indeterminateIcon,
                       icon = _this$props2.icon,
                       id = _this$props2.id,
                       img = _this$props2.img,
@@ -95802,7 +95858,8 @@
                     ,
                     disabled: disabled,
                     icon: displayedIcon,
-                    indeterminate: indeterminate
+                    indeterminate: indeterminate,
+                    indeterminateIcon: indeterminateIcon
                   }), React__default.createElement("div", {
                     className: classnames(classes.listItemContent, (_classNames2 = {}, defineProperty(_classNames2, classes.centered, centered), defineProperty(_classNames2, classes.primaryHighlight, type === 'primary-highlight'), _classNames2)),
                     "data-id": id
@@ -95837,6 +95894,7 @@
               hideCheckbox: false,
               hoverIcon: 'check_box_outline_blank',
               checkedIcon: 'check_box',
+              indeterminateIcon: 'indeterminate_check_box',
               indeterminate: false,
               level: 0,
               paddingLeft: 4,