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

package/HiButton/HiButton.js

@@ -28,7 +28,15 @@ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 // @inheritedComponent Button
 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': {
@@ -59,16 +67,6 @@ var styles = function styles(theme) {
         }
       }
     },
-    flatNeutral: {
-      color: theme.palette.neutral.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.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: {
@@ -152,7 +150,8 @@ var styles = function styles(theme) {
       '&:hover': {
         border: "1px solid ".concat(theme.palette.neutral.main)
       }
-    }
+    },
+    disabled: {}
   };
 };
 
@@ -166,18 +165,20 @@ function HiButton(props) {
       className = props.className,
       color = props.color,
       variant = props.variant,
-      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color", "variant"]);
+      disabled = props.disabled,
+      other = (0, _objectWithoutProperties2.default)(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 = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'neutral'), (0, _defineProperty2.default)(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.containedNeutral, (contained || fab) && color === 'neutral'), (0, _defineProperty2.default)(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.outlinedNeutral, variant === 'outlined' && color === 'neutral'), _classNames));
+  var buttonClassNames = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), _classNames));
   return _react.default.createElement(_Button.default, (0, _extends2.default)({
     className: className,
     classes: {
       root: buttonClassNames
     },
     color: hcolor,
-    variant: variant
+    variant: variant,
+    disabled: disabled
   }, other), children);
 }
 
@@ -203,7 +204,7 @@ HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
   variant: _propTypes.default.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
 } : {};
 HiButton.defaultProps = {
-  color: 'default',
+  color: 'neutral',
   variant: 'text'
 };
 

package/HiForm/HiInput.js

@@ -390,6 +390,15 @@ function (_React$PureComponent) {
         }
       }));
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      if (typeof nextProps.focused !== 'undefined' && nextProps.focused !== prevState.focused) {
+        return {
+          focused: nextProps.focused
+        };
+      }
+    }
   }]);
   return HiInput;
 }(_react.default.PureComponent);
@@ -445,6 +454,12 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   error: _propTypes.default.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.default.bool,
+
   /**
    * Utile pour surcharger les classes de l'input
    */

package/HiSelectNew/HiSelect.js

@@ -59,11 +59,11 @@ var styles = function styles(theme) {
       backgroundColor: theme.palette.background2,
       maxWidth: 500,
       width: '100%',
-      position: 'relative'
+      position: 'relative',
+      zIndex: 1
     },
     popper: {
-      width: '100%',
-      zIndex: 1200
+      width: '100%'
     },
     paper: {
       borderRadius: '0px 2px',

package/HiSelectNew/HiSelectInput.js

@@ -181,14 +181,54 @@ function (_React$PureComponent) {
       }
     };
 
+    _this.handleKeyDownReset = function (event) {
+      var key = (0, _keycode.default)(event);
+
+      if (key === 'enter' || key === 'space') {
+        _this.handleReset(event);
+
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
+
     _this.handleClick = function (event) {
       if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
         _this.props.onClick(event);
       }
     };
 
+    _this.handleReset = function (event) {
+      _this.props.onReset(event);
+
+      if (_this.input) {
+        _this.input.focus();
+      }
+    };
+
+    _this.handleBlur = function (event) {
+      if ((!_this.input || !_this.input.contains(event.relatedTarget)) && _this.props.onBlur) {
+        _this.props.onBlur(event);
+      } else {
+        if (_this.input && (!_this.resetIcon || !_this.resetIcon.contains(event.relatedTarget))) {
+          _this.input.focus();
+        }
+      }
+    };
+
+    _this.handleRef = function (el) {
+      _this.input = el;
+
+      if (_this.props.refElement) {
+        _this.props.refElement(el);
+      }
+    };
+
     _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleRef = _this.handleRef.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
@@ -210,9 +250,7 @@ function (_React$PureComponent) {
           focused = _this$props.focused,
           error = _this$props.error,
           id = _this$props.id,
-          placeholder = _this$props.placeholder,
-          refElement = _this$props.refElement,
-          theme = _this$props.theme; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+          placeholder = _this$props.placeholder; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
       var rootClass = (0, _classnames.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.focused, focused), (0, _defineProperty2.default)(_classNames, classes.error, error && !focused), _classNames));
       var iconClass = (0, _classnames.default)(classes.icon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconOpen, open), (0, _defineProperty2.default)(_classNames2, classes.iconClose, !open), _classNames2));
@@ -227,9 +265,7 @@ function (_React$PureComponent) {
         onBlur: this.props.onBlur,
         role: "button",
         tabIndex: "0",
-        ref: function ref(el) {
-          if (refElement) refElement(el);
-        }
+        ref: this.handleRef
       }, _react.default.createElement("span", {
         className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
       }, value || placeholder), _react.default.createElement(_ArrowDropDown.default, {
@@ -243,10 +279,8 @@ function (_React$PureComponent) {
         onMouseLeave: this.props.onMouseLeave,
         onKeyDown: this.handleKeyDown,
         onFocus: this.props.onFocus,
-        onBlur: this.props.onBlur,
-        buttonRef: function buttonRef(el) {
-          if (refElement) refElement(el);
-        }
+        onBlur: this.handleBlur,
+        buttonRef: this.handleRef
       }, _react.default.createElement("span", {
         className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
       }, value || placeholder), onReset && focused && _react.default.createElement("div", {
@@ -255,9 +289,11 @@ function (_React$PureComponent) {
         }
       }, _react.default.createElement(_HiIcon.default, {
         icon: "close",
-        size: 24,
-        color: theme.palette.neutral.main,
-        onClick: onReset
+        size: 20,
+        color: "neutral",
+        onClick: this.handleReset,
+        onKeyDown: this.handleKeyDownReset,
+        tabIndex: 0
       })), _react.default.createElement(_Icon.default, {
         classes: {
           root: iconClass
@@ -370,8 +406,7 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
 
 var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectInput',
-  withTheme: true
+  name: 'HmuiHiSelectInput'
 })(HiSelectInput);
 
 exports.default = _default;

package/es/HiButton/HiButton.js

@@ -8,7 +8,15 @@ import { withStyles } from '../styles';
 import { fade } from '../styles/colorManipulator';
 import Button from '@material-ui/core/Button';
 export const styles = theme => ({
-  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': {
@@ -39,16 +47,6 @@ export const styles = theme => ({
       }
     }
   },
-  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: {
@@ -132,7 +130,8 @@ export const styles = theme => ({
     '&:hover': {
       border: `1px solid ${theme.palette.neutral.main}`
     }
-  }
+  },
+  disabled: {}
 });
 
 function HiButton(props) {
@@ -141,9 +140,10 @@ function HiButton(props) {
     classes,
     className,
     color,
-    variant
+    variant,
+    disabled
   } = props,
-        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant"]);
+        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant", "disabled"]);
 
   const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
   const fab = variant === 'fab' || variant === 'extendedFab';
@@ -152,15 +152,16 @@ function HiButton(props) {
     [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
     [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
     [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
-    [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'neutral',
+    [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral'),
     [classes.containedPositive]: (contained || fab) && color === 'positive',
     [classes.containedNegative]: (contained || fab) && color === 'negative',
     [classes.containedMiddle]: (contained || fab) && color === 'middle',
-    [classes.containedNeutral]: (contained || fab) && color === 'neutral',
+    [classes.containedNeutral]: (contained || fab) && (color === 'default' || color === 'neutral'),
     [classes.outlinedPositive]: variant === 'outlined' && color === 'positive',
     [classes.outlinedNegative]: variant === 'outlined' && color === 'negative',
     [classes.outlinedMiddle]: variant === 'outlined' && color === 'middle',
-    [classes.outlinedNeutral]: variant === 'outlined' && color === 'neutral'
+    [classes.outlinedNeutral]: variant === 'outlined' && (color === 'default' || color === 'neutral'),
+    [classes.disabled]: disabled
   });
   return React.createElement(Button, _extends({
     className: className,
@@ -168,7 +169,8 @@ function HiButton(props) {
       root: buttonClassNames
     },
     color: hcolor,
-    variant: variant
+    variant: variant,
+    disabled: disabled
   }, other), children);
 }
 
@@ -194,7 +196,7 @@ HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
   variant: PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
 } : {};
 HiButton.defaultProps = {
-  color: 'default',
+  color: 'neutral',
   variant: 'text'
 };
 export default withStyles(styles, {

package/es/HiForm/HiInput.js

@@ -141,6 +141,14 @@ class HiInput extends React.PureComponent {
     this.handleOverlayRef = this.handleOverlayRef.bind(this);
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (typeof nextProps.focused !== 'undefined' && nextProps.focused !== prevState.focused) {
+      return {
+        focused: nextProps.focused
+      };
+    }
+  }
+
   getInputElement(el) {
     this.inputElement = el;
 
@@ -403,6 +411,12 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   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
    */

package/es/HiSelectNew/HiSelect.js

@@ -20,11 +20,11 @@ export const styles = theme => ({
     backgroundColor: theme.palette.background2,
     maxWidth: 500,
     width: '100%',
-    position: 'relative'
+    position: 'relative',
+    zIndex: 1
   },
   popper: {
-    width: '100%',
-    zIndex: 1200
+    width: '100%'
   },
   paper: {
     borderRadius: '0px 2px',

package/es/HiSelectNew/HiSelectInput.js

@@ -135,14 +135,53 @@ class HiSelectInput extends React.PureComponent {
       }
     };
 
+    this.handleKeyDownReset = event => {
+      const key = keycode(event);
+
+      if (key === 'enter' || key === 'space') {
+        this.handleReset(event);
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
+
     this.handleClick = event => {
       if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
         this.props.onClick(event);
       }
     };
 
+    this.handleReset = event => {
+      this.props.onReset(event);
+
+      if (this.input) {
+        this.input.focus();
+      }
+    };
+
+    this.handleBlur = event => {
+      if ((!this.input || !this.input.contains(event.relatedTarget)) && this.props.onBlur) {
+        this.props.onBlur(event);
+      } else {
+        if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
+          this.input.focus();
+        }
+      }
+    };
+
+    this.handleRef = el => {
+      this.input = el;
+
+      if (this.props.refElement) {
+        this.props.refElement(el);
+      }
+    };
+
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleClick = this.handleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleRef = this.handleRef.bind(this);
+    this.handleReset = this.handleReset.bind(this);
   }
 
   render() {
@@ -157,9 +196,7 @@ class HiSelectInput extends React.PureComponent {
       focused,
       error,
       id,
-      placeholder,
-      refElement,
-      theme
+      placeholder
     } = this.props; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
     const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
@@ -182,9 +219,7 @@ class HiSelectInput extends React.PureComponent {
       onBlur: this.props.onBlur,
       role: "button",
       tabIndex: "0",
-      ref: el => {
-        if (refElement) refElement(el);
-      }
+      ref: this.handleRef
     }, React.createElement("span", {
       className: classNames(classes.label, {
         [classes.placeholder]: value === undefined
@@ -200,10 +235,8 @@ class HiSelectInput extends React.PureComponent {
       onMouseLeave: this.props.onMouseLeave,
       onKeyDown: this.handleKeyDown,
       onFocus: this.props.onFocus,
-      onBlur: this.props.onBlur,
-      buttonRef: el => {
-        if (refElement) refElement(el);
-      }
+      onBlur: this.handleBlur,
+      buttonRef: this.handleRef
     }, React.createElement("span", {
       className: classNames(classes.label, {
         [classes.placeholder]: value === undefined
@@ -214,9 +247,11 @@ class HiSelectInput extends React.PureComponent {
       }
     }, React.createElement(HiIcon, {
       icon: "close",
-      size: 24,
-      color: theme.palette.neutral.main,
-      onClick: onReset
+      size: 20,
+      color: "neutral",
+      onClick: this.handleReset,
+      onKeyDown: this.handleKeyDownReset,
+      tabIndex: 0
     })), React.createElement(Icon, {
       classes: {
         root: iconClass
@@ -327,6 +362,5 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 export default withStyles(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectInput',
-  withTheme: true
+  name: 'HmuiHiSelectInput'
 })(HiSelectInput);

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.42
  *
  * 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.42
  *
  * 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.42",
   "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.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
                */