@hipay/hipay-material-ui 2.0.0-beta.59 → 2.0.0-beta.60

package/CHANGELOG.md

@@ -1,3 +1,61 @@
+# [2.0.0-beta.60](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.60) (2019-01-14)
+
+
+### Bug Fixes
+
+* **eslint:** remove eslint warrnings in components (ignore test files) ([d236c62](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d236c62))
+* **HiBreadcrumb:** clean eslint warnings ([6db12fb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6db12fb))
+* **HiDatePicker:** add static positions for custom overlays ([c3edf24](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c3edf24))
+* **HiExpansionPanel:** Fix props type a requirement ([cbc3b48](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cbc3b48))
+* **HiInput:** handle focus state through prop when needed to override default comportment ([9a133cc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a133cc))
+* **HiKpiNotice:** eslint clean warnings ([11b5552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/11b5552))
+* **HiSelect:** Fix build of HiSelectContent ([4b87f78](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4b87f78))
+* **HiSelect:** focus on undefined item ([2d084e6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2d084e6))
+* **HiSelect:** handle staticPosition & width properly for HiDateRangeSelector usage ([7b19ffb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7b19ffb))
+* **HiSelectableListItem:** disabled item checkbox color ([9f10552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9f10552))
+* **HiSelectableListItem:** remove item width ([a913945](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a913945))
+* **HiSelectContent:** Remove compute of input value ([b86db83](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b86db83))
+* **HiSlider:** eslint clean warnings ([08964b1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/08964b1))
+* **HiUploadField:** clean eslint warnings ([c76aaf1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c76aaf1))
+* **migration:** fix contrast threshold ... ([6fb3b18](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6fb3b18))
+* **package:** add cross-env ([7098fd6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7098fd6))
+
+
+### Features
+
+* **CellImage:** Handle fallbackImage ([254799d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/254799d))
+* **CellSentinel:** Uniformize cell api with front CellSentinel ([4e2975b](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4e2975b))
+* **CellSentinel:** Update CellSentinel to the new way (split each result in different column) ([efe2711](https://gitlab.hipay.org/backend/hipay-material-ui/commit/efe2711))
+* **CellSentinelScore:** Add CellSentinelScore ([2fff04d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2fff04d))
+* **CellText:** Handle active prop in CellText & column views in HiTable ([4366e60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4366e60))
+* **HiCells:** Add simple cells types (Address, Date, Icon, Image, Numeric, PinToAction, Rate, Senti ([f688517](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f688517))
+* **HiDatePicker:** BREAKING CHANGE - add local prop to handle calendar translations ([b1b3743](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1b3743))
+* **HiIcon:** Add mdi-material-ui as available icons via 'mdi_' prefix ([1091d6d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/1091d6d))
+* **HiMap:** unregister fetch on unmount ([0afa931](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0afa931))
+* **HiSelect:** Add (NEW) HiSelect, HiNestedSelect, HiDynamicSelect ([4c6447e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4c6447e))
+* **HiSelect:** Reset search input on blur & on close ([d9af584](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d9af584))
+* **HiSelectableList:** Add sort props to sort item list on label ([f412ddc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f412ddc))
+* **HiSelectContent:** Add new HiSelectContent & HiNestedSelectContent ([215ad8f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/215ad8f))
+* **HiSelectContent:** export utils functions ([7c41d87](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7c41d87))
+* **HiUploadField:** rename component HiUploadField ([593f77e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/593f77e))
+* **notice:** Création notice KPI ([bba3f89](https://gitlab.hipay.org/backend/hipay-material-ui/commit/bba3f89))
+
+
+### Performance Improvements
+
+* **PureFunction:** Use pure & functional components ([220c686](https://gitlab.hipay.org/backend/hipay-material-ui/commit/220c686))
+
+
+### BREAKING CHANGES
+
+* **HiDatePicker:** Required "local" props (use polyglot, p.currentLocal)
+* **HiUploadField:** Components names changes
+* **HiCells:** Remove CellCountry, CellThirdParty, CellStatus & CellAccount (use generic type
+CellImage & CellText)
+* **HiSelect:** HiSelect API change, use HiNestedSelect or HiDynamicSelect relative to situation
+
+
+
 <a name="2.0.0-beta.59"></a>
 # [2.0.0-beta.59](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.59) (2018-12-27)
 

package/HiCell/CellNumeric.js

@@ -63,7 +63,7 @@ function (_React$PureComponent) {
       var title = '';
 
       if (currency) {
-        displayedValue = (0, _helpers.formatCurrencyAmount)(value, view, locale, currency);
+        displayedValue = (0, _helpers.formatCurrencyAmount)(value, view, locale, currency, precision);
         title = (0, _helpers.formatCurrencyAmount)(value, 'l', locale, currency);
       } else {
         displayedValue = (0, _helpers.formatNumber)(value, view, locale, precision);

package/HiDatePicker/HiDatePicker.js

@@ -232,7 +232,8 @@ function (_React$Component) {
     value: function renderYearPickerOverlay(propsOverlay) {
       var yearPickerProps = {
         value: this.state.currentMonth,
-        onChange: this.handleCurrentMonthChange
+        onChange: this.handleCurrentMonthChange,
+        disableFutureDays: this.props.disableFutureDays
       };
       return _react.default.createElement(_YearPickerOverlay.default, (0, _extends2.default)({
         key: 'year-picker-overlay'
@@ -299,7 +300,10 @@ function (_React$Component) {
       var inputProps = (0, _extends2.default)({}, onReset && {
         onReset: this.handleReset
       }, props, {
-        onChange: this.handleInputChange
+        onChange: this.handleInputChange,
+        HiInputProps: {
+          onSubmit: this.props.onSubmit
+        }
       });
       return _react.default.createElement("div", {
         className: classes.root
@@ -397,6 +401,11 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onReset: _propTypes.default.func,
 
+  /**
+   * Callback lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: _propTypes.default.func,
+
   /**
    * Traductions
    */

package/HiDatePicker/HiDateRangePicker.js

@@ -225,6 +225,36 @@ function (_React$Component) {
       });
     };
 
+    _this.handleKeyDown = function (name) {
+      return function (event) {
+        if (event.key === 'Tab' && !event.shiftKey) {
+          var nodeName = document.activeElement.nodeName;
+
+          if (_this.props[name] && nodeName === 'INPUT' && document.activeElement.nextSibling.children.length > 0) {
+            document.activeElement.nextSibling.focus();
+          } else if (name === 'from') {
+            _this.handleDayPickerBlur('from');
+
+            _this.handleDayPickerFocus('to');
+
+            _this.toInput.handleInputFocus();
+
+            setTimeout(function () {
+              document.getElementById("".concat(_this.props.id, "-to")).focus();
+            }, 1);
+          } else if (name === 'to') {
+            _this.handleDayPickerBlur('to');
+
+            _this.toInput.handleInputBlur(event);
+
+            setTimeout(function () {
+              document.activeElement.blur();
+            }, 1);
+          }
+        }
+      };
+    };
+
     _this.openPanel = function (panel) {
       _this.setState({
         openedPanel: panel
@@ -310,7 +340,7 @@ function (_React$Component) {
       var yearPickerProps = {
         value: _this.state.currentMonth,
         onChange: _this.handleCurrentMonthChange,
-        disabledFutureDays: _this.props.disableFutureDays
+        disableFutureDays: _this.props.disableFutureDays
       };
       return _react.default.createElement(_YearPickerOverlay.default, (0, _extends2.default)({
         key: "".concat(name, "-year-picker-overlay")
@@ -452,7 +482,10 @@ function (_React$Component) {
       }, {
         id: "".concat(id, "-from"),
         onChange: this.handleInputChange('from'),
-        disabled: disabled
+        disabled: disabled,
+        HiInputProps: {
+          onSubmit: this.props.onSubmit
+        }
       });
       var toInputProps = (0, _extends2.default)({}, onReset && {
         onReset: function onReset() {
@@ -465,7 +498,10 @@ function (_React$Component) {
       }, {
         id: "".concat(id, "-to"),
         onChange: this.handleInputChange('to'),
-        disabled: disabled
+        disabled: disabled,
+        HiInputProps: {
+          onSubmit: this.props.onSubmit
+        }
       });
       var toClass = (0, _classnames.default)(classes.toInput, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'), (0, _defineProperty2.default)(_classNames, classes.right4, staticPosition === true && this.state.focusedInput === 'from'), _classNames));
 
@@ -475,8 +511,8 @@ function (_React$Component) {
         className: classes.fromInput,
         onFocus: function onFocus() {
           return _this2.handleDayPickerFocus('from');
-        } // onBlur={() => this.handleDayPickerBlur('from')}
-
+        },
+        onKeyDown: this.handleKeyDown('from')
       }, _react.default.createElement("div", null, _react.default.createElement(_DayPickerInput.default, {
         key: this.state.keyFrom,
         ref: function ref(el) {
@@ -502,7 +538,8 @@ function (_React$Component) {
         },
         onBlur: function onBlur() {
           return _this2.handleDayPickerBlur('to');
-        }
+        },
+        onKeyDown: this.handleKeyDown('to')
       }, _react.default.createElement(_DayPickerInput.default, {
         key: this.state.keyTo,
         ref: function ref(el) {
@@ -516,8 +553,7 @@ function (_React$Component) {
         inputProps: toInputProps,
         format: enableTime ? "".concat(format, " HH:mm") : format,
         formatDate: _moment.default.formatDate,
-        parseDate: _moment.default.parseDate // onDayChange={(day) => this.handleDayChange('to', day)}
-        ,
+        parseDate: _moment.default.parseDate,
         placeholder: ''
       })));
 
@@ -671,6 +707,11 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onReset: _propTypes.default.func,
 
+  /**
+   * Callback lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: _propTypes.default.func,
+
   /**
    * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
    */

package/HiDatePicker/HiDateRangeSelector.js

@@ -27,13 +27,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _moment = _interopRequireDefault(require("moment"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 
 var _reactDom = require("react-dom");
 
@@ -93,14 +91,14 @@ function yearAndQuarter(format, date, t) {
   return indexY < indexM ? date.format("".concat(split[indexY]).concat(s, "[").concat(t.short_quarter, "]Q")) : date.format("[".concat(t.short_quarter, "]Q").concat(s).concat(split[indexY]));
 }
 
-function buildDateRangeOptionByKey(key, t, format) {
+function buildDateRangeOptionByKey(key, t, format, timezoneName) {
   var from;
   var label;
   var info;
   var to;
   var type;
 
-  _moment.default.updateLocale('en', {
+  _momentTimezone.default.updateLocale('en', {
     week: {
       dow: 1
     }
@@ -109,71 +107,71 @@ function buildDateRangeOptionByKey(key, t, format) {
   switch (key) {
     case 'custom':
       label = t.custom_period;
-      from = (0, _moment.default)().subtract(15, 'day').startOf('day');
-      to = (0, _moment.default)().endOf('day');
+      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(15, 'day').startOf('day');
+      to = (0, _momentTimezone.default)().tz(timezoneName).endOf('day');
       type = 'primary-highlight';
       break;
 
     case 'cd':
       label = t.today;
-      from = (0, _moment.default)().startOf('day');
-      to = (0, _moment.default)().endOf('day');
+      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('day');
+      to = (0, _momentTimezone.default)().tz(timezoneName).endOf('day');
       info = "".concat(from.format(format));
       break;
 
     case 'pd':
       label = t.yesterday;
-      from = (0, _moment.default)().subtract(1, 'day').startOf('day');
-      to = (0, _moment.default)().subtract(1, 'day').endOf('day');
+      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'day').startOf('day');
+      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'day').endOf('day');
       info = "".concat(from.format(format));
       break;
 
     case 'cw':
       label = t.current_week;
-      from = (0, _moment.default)().startOf('week');
-      to = (0, _moment.default)();
+      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('week');
+      to = (0, _momentTimezone.default)().tz(timezoneName);
       info = "".concat(t.short_week).concat(from.format('w'), ", \n ").concat(from.format(format), " ").concat(t.to_now);
       break;
 
     case 'pw':
       label = t.previous_week;
-      from = (0, _moment.default)().subtract(1, 'week').startOf('week');
-      to = (0, _moment.default)().subtract(1, 'week').endOf('week');
+      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'week').startOf('week');
+      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'week').endOf('week');
       info = "".concat(t.short_week).concat(from.format('w'), ", ").concat(from.format(format), " ").concat(t.to, " ").concat(to.format(format));
       break;
 
     case 'cm':
       label = t.current_month;
-      from = (0, _moment.default)().startOf('month');
-      to = (0, _moment.default)();
+      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('month');
+      to = (0, _momentTimezone.default)().tz(timezoneName);
       info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
     case 'pm':
       label = t.previous_month;
-      from = (0, _moment.default)().subtract(1, 'month').startOf('month');
-      to = (0, _moment.default)().subtract(1, 'month').endOf('month');
+      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'month').startOf('month');
+      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'month').endOf('month');
       info = "".concat(yearAndMonth(format, from), ", ").concat(from.daysInMonth(), " ").concat(t.days);
       break;
 
     case 'cq':
       label = t.current_quarter;
-      from = (0, _moment.default)().startOf('quarter');
-      to = (0, _moment.default)();
+      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('quarter');
+      to = (0, _momentTimezone.default)().tz(timezoneName);
       info = "".concat(yearAndQuarter(format, from, t), ", ").concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
     case 'pq':
       label = t.previous_quarter;
-      from = (0, _moment.default)().subtract(1, 'quarter').startOf('quarter');
-      to = (0, _moment.default)().subtract(1, 'quarter').endOf('quarter');
+      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'quarter').startOf('quarter');
+      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'quarter').endOf('quarter');
       info = "".concat(yearAndQuarter(format, from, t), ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
     case 'cy':
       label = t.current_year;
-      from = (0, _moment.default)().startOf('year');
-      to = (0, _moment.default)();
+      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('year');
+      to = (0, _momentTimezone.default)().tz(timezoneName);
       info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
@@ -250,9 +248,9 @@ function (_React$Component) {
         });
 
         if (selectedOption) {
-          _this.props.onChange('from', selectedOption.from.toDate());
+          _this.props.onChange('from', new Date(selectedOption.from.format('YYYY-MM-DD HH:mm:ss')));
 
-          _this.props.onChange('to', selectedOption.to.toDate());
+          _this.props.onChange('to', new Date(selectedOption.to.format('YYYY-MM-DD HH:mm:ss')));
 
           _this.props.onChange('fromError', false);
 
@@ -265,9 +263,8 @@ function (_React$Component) {
       };
     };
 
-    _this.handleSelectChange = _this.handleSelectChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.options = props.availableOptionKeys.map(function (key) {
-      return buildDateRangeOptionByKey(key, props.translations, props.format);
+      return buildDateRangeOptionByKey(key, props.translations, props.format, props.timezoneName);
     });
     _this.state = {
       selectedPreset: props.defaultPreset,
@@ -357,7 +354,8 @@ function (_React$Component) {
         classes: {
           root: classes.dateSelect
         },
-        staticPosition: staticPosition
+        staticPosition: staticPosition,
+        onSubmit: this.props.onSubmit
       }, selectProps))), _react.default.createElement(_Grid.default, {
         item: true,
         xs: 12,
@@ -411,6 +409,7 @@ HiDateRangeSelector.defaultProps = {
   format: 'YYYY-DD-MM',
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
+  timezoneName: 'Europe/Paris',
   translations: {
     today: 'Today',
     hour: 'Hour',
@@ -529,6 +528,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onChange: _propTypes.default.func.isRequired,
 
+  /**
+   * Callback lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: _propTypes.default.func,
+
   /**
    * true si champs obligatoire
    */
@@ -549,6 +553,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   staticPosition: _propTypes.default.bool,
 
+  /**
+   * Timezone de l'utilisateur
+   */
+  timezoneName: _propTypes.default.string,
+
   /**
    * Date de fin sélectionnée
    */

package/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -43,8 +43,15 @@ function (_React$Component) {
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(YearPickerOverlay).call(this, props));
     _this.years = [];
     _this.handleYearClick = _this.handleYearClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    var minDate = props.minimumDate;
+
+    if (!minDate) {
+      var today = new Date();
+      minDate = new Date(today.getFullYear() - 5, today.getMonth(), today.getDate()); // by default 5 years from now
+    }
+
     var currentYear = new Date().getFullYear();
-    var minimumYear = props.minimumDate.getFullYear();
+    var minimumYear = minDate.getFullYear();
     _this.years = [currentYear]; // get years from minimum date to now
 
     if (!props.disablePastDays && currentYear > minimumYear) {
@@ -95,8 +102,6 @@ function (_React$Component) {
 }(_react.default.Component);
 
 YearPickerOverlay.defaultProps = {
-  minimumDate: new Date(2013, 4, 1),
-  // by default 1 May 2013
   translations: {
     year: 'Year'
   }

package/HiForm/HiFormControl.js

@@ -59,13 +59,11 @@ var styles = function styles(theme) {
       marginTop: 2
     },
     iconButton: {
-      position: 'absolute',
-      right: 5,
       cursor: 'pointer',
       zIndex: 1,
-      top: '-5px',
-      height: 24,
-      width: 24,
+      height: 20,
+      width: 20,
+      marginLeft: 3,
       '&$iconButtonError': {
         color: theme.palette.negative.main
       },
@@ -74,11 +72,18 @@ var styles = function styles(theme) {
       },
       '&$iconButtonInfoActive': {
         color: theme.palette.primary.main
+      },
+      '&$iconFullWidth': {
+        position: 'absolute',
+        right: 5,
+        marginLeft: 0,
+        bottom: 0
       }
     },
     iconButtonError: {},
     iconButtonInfo: {},
     iconButtonInfoActive: {},
+    iconFullWidth: {},
     errorDiv: (0, _extends2.default)({}, theme.typography.b3, {
       backgroundColor: theme.palette.negative.main,
       color: '#FFFFFF',
@@ -97,8 +102,15 @@ var styles = function styles(theme) {
       borderTop: '4px solid #000',
       position: 'absolute',
       bottom: -4,
-      right: 13
+      '&$arrowNotFullWidth': {
+        left: 8
+      },
+      '&$arrowFullWidth': {
+        right: 13
+      }
     },
+    arrowNotFullWidth: {},
+    arrowFullWidth: {},
     errorDivArrowDown: {
       borderTopColor: theme.palette.negative.main
     },
@@ -118,7 +130,8 @@ var styles = function styles(theme) {
       borderTopColor: '#ffffff'
     },
     icon: {
-      position: 'absolute'
+      position: 'absolute',
+      fontSize: 19
     }
   };
 };
@@ -197,6 +210,8 @@ function (_React$PureComponent) {
   (0, _createClass2.default)(HiFormControl, [{
     key: "render",
     value: function render() {
+      var _classNames2;
+
       var _this$props = this.props,
           children = _this$props.children,
           classes = _this$props.classes,
@@ -229,7 +244,7 @@ function (_React$PureComponent) {
       }, others), error && errorText && helperOpen && _react.default.createElement("div", {
         className: classes.errorDiv
       }, _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.arrowDown, classes.errorDivArrowDown)
+        className: (0, _classnames.default)(classes.arrowDown, classes.errorDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
       }), _react.default.createElement("span", {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
@@ -238,7 +253,7 @@ function (_React$PureComponent) {
       })), helperIcon && helperText && !error && helperOpen && _react.default.createElement("div", {
         className: classes.helperDiv
       }, _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.arrowDown, classes.helperDivArrowDown)
+        className: (0, _classnames.default)(classes.arrowDown, classes.helperDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
       }), _react.default.createElement("span", {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
@@ -251,12 +266,12 @@ function (_React$PureComponent) {
         disabled: disabled,
         focused: !disabled && (focused || hovered)
       }, InputLabelProps), error && errorText && _react.default.createElement(_HiIconButton.default, {
-        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError),
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError, (0, _defineProperty2.default)({}, classes.iconFullWidth, fullWidth)),
         onClick: this.handleHelperClick
       }, _react.default.createElement(_Warning.default, {
         className: (0, _classnames.default)(classes.icon)
       })), helperIcon && helperText && !error && _react.default.createElement(_HiIconButton.default, {
-        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (0, _defineProperty2.default)({}, classes.iconButtonInfoActive, helperOpen)),
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconButtonInfoActive, helperOpen), (0, _defineProperty2.default)(_classNames2, classes.iconFullWidth, fullWidth), _classNames2)),
         onClick: this.handleHelperClick
       }, _react.default.createElement(_Info.default, {
         className: (0, _classnames.default)(classes.icon)

package/HiForm/HiFormLabel.js

@@ -45,7 +45,9 @@ var styles = function styles(theme) {
       },
       '&$error': {
         color: theme.palette.negative.main
-      }
+      },
+      display: 'flex',
+      alignItems: 'center'
     }),
     optional: {
       fontSize: 11,

package/HiForm/HiInput.js

@@ -29,6 +29,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _index = _interopRequireDefault(require("keycode/index"));
+
 var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
@@ -170,6 +172,18 @@ function (_React$PureComponent) {
     (0, _classCallCheck2.default)(this, HiInput);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiInput).call(this));
 
+    _this.handleKeyDown = function (event) {
+      var key = (0, _index.default)(event);
+
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(event);
+      }
+
+      if (key === 'enter' && _this.props.onSubmit) {
+        _this.props.onSubmit(event);
+      }
+    };
+
     _this.handleClick = function () {
       if (_this.props.onClick) {
         _this.props.onClick();
@@ -387,7 +401,7 @@ function (_React$PureComponent) {
         value: value,
         placeholder: placeholder,
         onFocus: this.handleFocus,
-        onKeyDown: this.props.onKeyDown,
+        onKeyDown: this.handleKeyDown,
         onClick: this.handleClick,
         onBlur: this.handleBlur,
         inputRef: this.getInputElement,
@@ -562,6 +576,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onRightIconClick: _propTypes.default.func,
 
+  /**
+   * Fonction de callback appelée lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: _propTypes.default.func,
+
   /**
    * Passe une ref callback au composant div parent
    */