@hipay/hipay-material-ui 2.0.0-beta.40 → 2.0.0-beta.42

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

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.4
+/** @license HiPay-Material-UI v2.0.0-beta.42
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13289,7 +13289,15 @@
 
             var styles = function styles(theme) {
               return {
-                root: {},
+                root: {
+                  '&$disabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
+                  }
+                },
+                flatNeutral: {
+                  color: theme.palette.neutral.main
+                },
                 flatPositive: {
                   color: theme.palette.positive.main,
                   '&:hover': {
@@ -13320,16 +13328,6 @@
                     }
                   }
                 },
-                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'
-                    }
-                  }
-                },
 
                 /* Styles applied to the root element if `variant="[contained | fab]"` and `color="positive"`. */
                 containedPositive: {
@@ -13413,7 +13411,8 @@
                   '&:hover': {
                     border: "1px solid ".concat(theme.palette.neutral.main)
                   }
-                }
+                },
+                disabled: {}
               };
             };
 
@@ -13425,19 +13424,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 +13464,7 @@
               variant: propTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
             };
             HiButton.defaultProps = {
-              color: 'default',
+              color: 'neutral',
               variant: 'text'
             };
             var HiButton$1 = withStyles(styles, {
@@ -68873,6 +68874,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 +68939,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
                */
@@ -96492,26 +96508,37 @@
                   }
                 };
 
+                _this.handleClick = function (event) {
+                  if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
+                    _this.props.onClick(event);
+                  }
+                };
+
                 _this.handleKeyDown = _this.handleKeyDown.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.handleClick = _this.handleClick.bind(assertThisInitialized(assertThisInitialized(_this)));
                 return _this;
               }
 
               createClass(SelectInput, [{
                 key: "render",
                 value: function render() {
-                  var _classNames, _classNames2;
+                  var _classNames,
+                      _classNames2,
+                      _this2 = this;
 
                   var _this$props = this.props,
                       classes = _this$props.classes,
                       noButton = _this$props.noButton,
                       disabled = _this$props.disabled,
                       onClick = _this$props.onClick,
+                      onReset = _this$props.onReset,
                       value = _this$props.value,
                       open = _this$props.open,
                       focused = _this$props.focused,
                       error = _this$props.error,
                       id = _this$props.id,
-                      refElement = _this$props.refElement; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+                      refElement = _this$props.refElement,
+                      theme = _this$props.theme; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
                   var rootClass = classnames(classes.root, classes.inkbar, classes.underline, (_classNames = {}, defineProperty(_classNames, classes.disabled, disabled), defineProperty(_classNames, classes.focused, focused), defineProperty(_classNames, classes.error, error && !focused), _classNames));
                   var iconClass = classnames(classes.icon, (_classNames2 = {}, defineProperty(_classNames2, classes.iconOpen, open), defineProperty(_classNames2, classes.iconClose, !open), _classNames2));
@@ -96540,7 +96567,7 @@
                     classes: {
                       root: rootClass
                     },
-                    onClick: onClick,
+                    onClick: this.handleClick,
                     disabled: disabled,
                     onMouseEnter: this.props.onMouseEnter,
                     onMouseLeave: this.props.onMouseLeave,
@@ -96552,7 +96579,16 @@
                     }
                   }, React__default.createElement("span", {
                     className: classes.label
-                  }, value), React__default.createElement(HiIcon$1, {
+                  }, value), onReset && focused && React__default.createElement("div", {
+                    ref: function ref(el) {
+                      _this2.resetIcon = el;
+                    }
+                  }, React__default.createElement(HiIcon$1, {
+                    icon: "close",
+                    size: 24,
+                    color: theme.palette.neutral.main,
+                    onClick: onReset
+                  })), React__default.createElement(HiIcon$1, {
                     className: iconClass,
                     icon: "arrow_drop_down"
                   }));
@@ -96627,6 +96663,11 @@
                */
               onMouseLeave: propTypes.func,
 
+              /**
+               * Fonction de callback appelée lorsqu'on vide le champs
+               */
+              onReset: propTypes.func,
+
               /**
                * Fonction de callback à la pression de la touche "Entrée"
                */
@@ -96649,7 +96690,8 @@
             };
             var SelectInput$1 = withStyles(styles$p, {
               hiComponent: true,
-              name: 'HmuiSelectInput'
+              name: 'HmuiSelectInput',
+              withTheme: true
             })(SelectInput);
 
             var styles$q = function styles(theme) {
@@ -97143,6 +97185,14 @@
                     });
                   }
                 }
+              }, {
+                key: "handleReset",
+                value: function handleReset(event) {
+                  if (this.props.onReset) {
+                    event.stopPropagation();
+                    this.props.onReset(event);
+                  }
+                }
               }, {
                 key: "render",
                 value: function render() {
@@ -97339,14 +97389,14 @@
                     onMouseLeave: this.props.onMouseLeave,
                     refElement: function refElement(el) {
                       _this2.selectInputElement = el;
-                    }
+                    },
+                    onReset: this.props.onReset
                   }), open && staticPosition ? React__default.createElement("div", {
                     style: popperStyle
                   }, content) : React__default.createElement(Popper$3, {
                     anchorEl: this.inputEl,
                     placement: "bottom-start",
                     open: open,
-                    eventsEnabled: open,
                     className: popperClass,
                     style: popperStyle,
                     disablePortal: true
@@ -97519,6 +97569,11 @@
                */
               onMouseLeave: propTypes.func,
 
+              /**
+               * Fonction de callback appelée lorsqu'on vide le champs
+               */
+              onReset: propTypes.func,
+
               /**
                * Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
                * A utiliser pour les selects avec des données dynamiques