@hipay/hipay-material-ui 2.0.0-beta.45 → 2.0.0-beta.47

package/HiTable/constants.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _TYPE_ACCOUNT, _TYPE_ACCOUNT_NUMBER, _TYPE_ADDRESS, _TYPE_CHECKBOX, _TYPE_COUNTRY, _TYPE_DATE, _TYPE_ICON, _TYPE_IMAGE, _TYPE_NUMERIC, _TYPE_RATE, _TYPE_SENTINEL, _TYPE_STATUS, _TYPE_TEXT, _TYPE_THIRD_PARTY_SEC, _DEFAULT_WIDTHS, _DEFAULT_VIEWS, _DEFAULT_PADDING;
+
+/**
+ * Infinite scroll variables
+ */
+var MAX_ROWS = 50;
+exports.MAX_ROWS = MAX_ROWS;
+var NB_ROWS_BACK_TO_TOP = 10;
+/**
+ * Cell height (px)
+ */
+
+exports.NB_ROWS_BACK_TO_TOP = NB_ROWS_BACK_TO_TOP;
+var CELL_HEIGHT = 40;
+exports.CELL_HEIGHT = CELL_HEIGHT;
+var CELL_HEIGHT_DENSE = 32;
+exports.CELL_HEIGHT_DENSE = CELL_HEIGHT_DENSE;
+var CELL_HEADER_HEIGHT = 48;
+exports.CELL_HEADER_HEIGHT = CELL_HEADER_HEIGHT;
+var CELL_HEADER_HEIGHT_DENSE = 40;
+/**
+ * Cell types
+ * @type {string}
+ */
+
+exports.CELL_HEADER_HEIGHT_DENSE = CELL_HEADER_HEIGHT_DENSE;
+var TYPE_ACCOUNT = 'account';
+exports.TYPE_ACCOUNT = TYPE_ACCOUNT;
+var TYPE_ACCOUNT_NUMBER = 'account_number';
+exports.TYPE_ACCOUNT_NUMBER = TYPE_ACCOUNT_NUMBER;
+var TYPE_ADDRESS = 'address';
+exports.TYPE_ADDRESS = TYPE_ADDRESS;
+var TYPE_CHECKBOX = 'checkbox';
+exports.TYPE_CHECKBOX = TYPE_CHECKBOX;
+var TYPE_DATE = 'date';
+exports.TYPE_DATE = TYPE_DATE;
+var TYPE_ICON = 'icon';
+exports.TYPE_ICON = TYPE_ICON;
+var TYPE_IMAGE = 'image';
+exports.TYPE_IMAGE = TYPE_IMAGE;
+var TYPE_NUMERIC = 'numeric';
+exports.TYPE_NUMERIC = TYPE_NUMERIC;
+var TYPE_RATE = 'rate';
+exports.TYPE_RATE = TYPE_RATE;
+var TYPE_SENTINEL = 'sentinel';
+exports.TYPE_SENTINEL = TYPE_SENTINEL;
+var TYPE_STATUS = 'status';
+exports.TYPE_STATUS = TYPE_STATUS;
+var TYPE_COUNTRY = 'country';
+exports.TYPE_COUNTRY = TYPE_COUNTRY;
+var TYPE_TEXT = 'text';
+exports.TYPE_TEXT = TYPE_TEXT;
+var TYPE_THIRD_PARTY_SECURITY = 'third_party_security';
+exports.TYPE_THIRD_PARTY_SECURITY = TYPE_THIRD_PARTY_SECURITY;
+var TYPE_PIN_TO_ACTION = 'pin_to_action';
+/**
+ * Cell size [L] / [M] / [S]
+ */
+
+exports.TYPE_PIN_TO_ACTION = TYPE_PIN_TO_ACTION;
+var VIEWS = {
+  LARGE: 'l',
+  MEDIUM: 'm',
+  SMALL: 's'
+};
+/**
+ * Trendchip evolution
+ */
+
+exports.VIEWS = VIEWS;
+var EVOLUTION_UP = 'up';
+exports.EVOLUTION_UP = EVOLUTION_UP;
+var EVOLUTION_DOWN = 'down';
+exports.EVOLUTION_DOWN = EVOLUTION_DOWN;
+var NO_EVOLUTION = 'equal';
+/**
+ * Ellipsis
+ */
+
+exports.NO_EVOLUTION = NO_EVOLUTION;
+var ELLIPSIS_AFTER_FIRST_WORD = 'after-first-word';
+exports.ELLIPSIS_AFTER_FIRST_WORD = ELLIPSIS_AFTER_FIRST_WORD;
+var ELLIPSIS_LEFT = 'left';
+exports.ELLIPSIS_LEFT = ELLIPSIS_LEFT;
+var ELLIPSIS_MIDDLE = 'middle';
+exports.ELLIPSIS_MIDDLE = ELLIPSIS_MIDDLE;
+var ELLIPSIS_NAME = 'name';
+exports.ELLIPSIS_NAME = ELLIPSIS_NAME;
+var ELLIPSIS_RIGHT = 'right';
+/**
+ * Fraud Result
+ */
+
+exports.ELLIPSIS_RIGHT = ELLIPSIS_RIGHT;
+var FRAUD_RESULT_ACCEPTED = 'ACCEPTED';
+exports.FRAUD_RESULT_ACCEPTED = FRAUD_RESULT_ACCEPTED;
+var FRAUD_RESULT_BLOCKED = 'BLOCKED';
+exports.FRAUD_RESULT_BLOCKED = FRAUD_RESULT_BLOCKED;
+var FRAUD_RESULT_CHALLENGED = 'CHALLENGED';
+exports.FRAUD_RESULT_CHALLENGED = FRAUD_RESULT_CHALLENGED;
+var FRAUD_RESULT_PENDING = 'PENDING';
+exports.FRAUD_RESULT_PENDING = FRAUD_RESULT_PENDING;
+var FRAUD_RESULT_FORCE_AUTHENTICATE = 'FORCE_AUTHENTICATE';
+exports.FRAUD_RESULT_FORCE_AUTHENTICATE = FRAUD_RESULT_FORCE_AUTHENTICATE;
+var FRAUD_RESULT_ASK_AUTHENTICATE = 'ASK_AUTHENTICATE';
+/**
+ * Cell default width for each views
+ * @type {{}}
+ */
+
+exports.FRAUD_RESULT_ASK_AUTHENTICATE = FRAUD_RESULT_ASK_AUTHENTICATE;
+var DEFAULT_WIDTHS = (_DEFAULT_WIDTHS = {}, (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_ACCOUNT, (_TYPE_ACCOUNT = {}, (0, _defineProperty2.default)(_TYPE_ACCOUNT, VIEWS.LARGE, 160), (0, _defineProperty2.default)(_TYPE_ACCOUNT, VIEWS.MEDIUM, 120), (0, _defineProperty2.default)(_TYPE_ACCOUNT, VIEWS.SMALL, 80), _TYPE_ACCOUNT)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_ACCOUNT_NUMBER, (_TYPE_ACCOUNT_NUMBER = {}, (0, _defineProperty2.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.LARGE, 100), (0, _defineProperty2.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.MEDIUM, 80), (0, _defineProperty2.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.SMALL, 60), _TYPE_ACCOUNT_NUMBER)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_ADDRESS, (_TYPE_ADDRESS = {}, (0, _defineProperty2.default)(_TYPE_ADDRESS, VIEWS.LARGE, 120), (0, _defineProperty2.default)(_TYPE_ADDRESS, VIEWS.MEDIUM, 100), (0, _defineProperty2.default)(_TYPE_ADDRESS, VIEWS.SMALL, 80), _TYPE_ADDRESS)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_CHECKBOX, (_TYPE_CHECKBOX = {}, (0, _defineProperty2.default)(_TYPE_CHECKBOX, VIEWS.LARGE, 40), (0, _defineProperty2.default)(_TYPE_CHECKBOX, VIEWS.MEDIUM, 40), (0, _defineProperty2.default)(_TYPE_CHECKBOX, VIEWS.SMALL, 40), _TYPE_CHECKBOX)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_COUNTRY, (_TYPE_COUNTRY = {}, (0, _defineProperty2.default)(_TYPE_COUNTRY, VIEWS.LARGE, 120), (0, _defineProperty2.default)(_TYPE_COUNTRY, VIEWS.MEDIUM, 80), (0, _defineProperty2.default)(_TYPE_COUNTRY, VIEWS.SMALL, 40), _TYPE_COUNTRY)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_DATE, (_TYPE_DATE = {}, (0, _defineProperty2.default)(_TYPE_DATE, VIEWS.LARGE, 220), (0, _defineProperty2.default)(_TYPE_DATE, VIEWS.MEDIUM, 140), (0, _defineProperty2.default)(_TYPE_DATE, VIEWS.SMALL, 120), _TYPE_DATE)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_ICON, (_TYPE_ICON = {}, (0, _defineProperty2.default)(_TYPE_ICON, VIEWS.LARGE, 140), (0, _defineProperty2.default)(_TYPE_ICON, VIEWS.MEDIUM, 100), (0, _defineProperty2.default)(_TYPE_ICON, VIEWS.SMALL, 60), _TYPE_ICON)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_IMAGE, (_TYPE_IMAGE = {}, (0, _defineProperty2.default)(_TYPE_IMAGE, VIEWS.LARGE, 140), (0, _defineProperty2.default)(_TYPE_IMAGE, VIEWS.MEDIUM, 100), (0, _defineProperty2.default)(_TYPE_IMAGE, VIEWS.SMALL, 60), _TYPE_IMAGE)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_NUMERIC, (_TYPE_NUMERIC = {}, (0, _defineProperty2.default)(_TYPE_NUMERIC, VIEWS.LARGE, 120), (0, _defineProperty2.default)(_TYPE_NUMERIC, VIEWS.MEDIUM, 100), (0, _defineProperty2.default)(_TYPE_NUMERIC, VIEWS.SMALL, 80), _TYPE_NUMERIC)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_RATE, (_TYPE_RATE = {}, (0, _defineProperty2.default)(_TYPE_RATE, VIEWS.LARGE, 100), (0, _defineProperty2.default)(_TYPE_RATE, VIEWS.MEDIUM, 90), (0, _defineProperty2.default)(_TYPE_RATE, VIEWS.SMALL, 80), _TYPE_RATE)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_SENTINEL, (_TYPE_SENTINEL = {}, (0, _defineProperty2.default)(_TYPE_SENTINEL, VIEWS.LARGE, 80), (0, _defineProperty2.default)(_TYPE_SENTINEL, VIEWS.MEDIUM, 80), (0, _defineProperty2.default)(_TYPE_SENTINEL, VIEWS.SMALL, 80), _TYPE_SENTINEL)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_STATUS, (_TYPE_STATUS = {}, (0, _defineProperty2.default)(_TYPE_STATUS, VIEWS.LARGE, 120), (0, _defineProperty2.default)(_TYPE_STATUS, VIEWS.MEDIUM, 100), (0, _defineProperty2.default)(_TYPE_STATUS, VIEWS.SMALL, 80), _TYPE_STATUS)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_TEXT, (_TYPE_TEXT = {}, (0, _defineProperty2.default)(_TYPE_TEXT, VIEWS.LARGE, 200), (0, _defineProperty2.default)(_TYPE_TEXT, VIEWS.MEDIUM, 120), (0, _defineProperty2.default)(_TYPE_TEXT, VIEWS.SMALL, 80), _TYPE_TEXT)), (0, _defineProperty2.default)(_DEFAULT_WIDTHS, TYPE_THIRD_PARTY_SECURITY, (_TYPE_THIRD_PARTY_SEC = {}, (0, _defineProperty2.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.LARGE, 40), (0, _defineProperty2.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.MEDIUM, 40), (0, _defineProperty2.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.SMALL, 40), _TYPE_THIRD_PARTY_SEC)), _DEFAULT_WIDTHS);
+/**
+ * Cell default width for each views
+ * @type {{}}
+ */
+
+exports.DEFAULT_WIDTHS = DEFAULT_WIDTHS;
+var DEFAULT_VIEWS = (_DEFAULT_VIEWS = {}, (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ACCOUNT, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ACCOUNT_NUMBER, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ADDRESS, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_CHECKBOX, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_COUNTRY, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_DATE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ICON, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_IMAGE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_NUMERIC, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_RATE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_SENTINEL, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_STATUS, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_TEXT, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_THIRD_PARTY_SECURITY, VIEWS.LARGE), _DEFAULT_VIEWS);
+/**
+ * Cell default side padding (one side) for each views
+ * @type {{}}
+ */
+
+exports.DEFAULT_VIEWS = DEFAULT_VIEWS;
+var DEFAULT_PADDING = (_DEFAULT_PADDING = {}, (0, _defineProperty2.default)(_DEFAULT_PADDING, VIEWS.LARGE, 8), (0, _defineProperty2.default)(_DEFAULT_PADDING, VIEWS.MEDIUM, 8), (0, _defineProperty2.default)(_DEFAULT_PADDING, VIEWS.SMALL, 8), _DEFAULT_PADDING);
+/**
+ * Cell types which are align right by default
+ * @type {*[]}
+ */
+
+exports.DEFAULT_PADDING = DEFAULT_PADDING;
+var ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL];
+exports.ALIGN_RIGHT_TYPES = ALIGN_RIGHT_TYPES;

package/HiTable/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiTable.default;
+  }
+});
+
+var _HiTable = _interopRequireDefault(require("./HiTable"));

package/es/HiCell/CellIcon.js

@@ -29,17 +29,20 @@ class CellIcon extends React.PureComponent {
       color,
       icon,
       label,
-      view
+      view,
+      size
     } = this.props;
     return React.createElement("div", {
       className: classes.wrapper,
       title: label
     }, icon && React.createElement(HiIcon, {
-      color: color,
+      color: "inherit",
+      style: {
+        color: color,
+        fontSize: size ? size : 24
+      },
       className: classes.icon,
-      icon: icon,
-      width: 40,
-      height: 24
+      icon: icon
     }), view !== 's' && label && React.createElement("span", {
       className: classes.label
     }, label));
@@ -76,7 +79,12 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * View (L/M/S)
    */
-  view: PropTypes.oneOf(['l', 'm', 's'])
+  view: PropTypes.oneOf(['l', 'm', 's']),
+
+  /**
+   * Icon size
+   */
+  size: PropTypes.number
 } : {};
 export default withStyles(styles, {
   name: 'HmuiCellIcon'

package/es/HiCell/CellNumeric.js

@@ -30,7 +30,7 @@ class CellNumeric extends React.PureComponent {
       title = formatCurrencyAmount(value, 'l', locale, currency);
     } else {
       displayedValue = formatNumber(value, view, locale, precision);
-      title = formatNumber(value, 'l', locale);
+      title = formatNumber(value, 'l', locale, precision);
     }
 
     return React.createElement("div", {
@@ -42,7 +42,8 @@ class CellNumeric extends React.PureComponent {
 }
 
 CellNumeric.defaultProps = {
-  view: 'm'
+  view: 'm',
+  locale: 'en'
 };
 CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
   /**

package/es/HiCell/CellRate.js

@@ -99,7 +99,8 @@ class CellRate extends React.PureComponent {
 }
 
 CellRate.defaultProps = {
-  isPositive: true
+  isPositive: true,
+  locale: 'en'
 };
 CellRate.propTypes = process.env.NODE_ENV !== "production" ? {
   /**

package/es/HiCell/CellSentinel.js

@@ -69,7 +69,8 @@ class CellSentinel extends React.PureComponent {
     const scoreLabel = score > 0 ? `+${score}` : `${score}`;
     return React.createElement("div", {
       style: {
-        textAlign: 'right'
+        textAlign: 'right',
+        minWidth: '100px'
       }
     }, React.createElement(HiColoredLabel, {
       label: scoreLabel,

package/es/HiCheckbox/HiCheckbox.js

@@ -81,7 +81,7 @@ class HiCheckbox extends React.Component {
       height: size
     }, style);
 
-    const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+    const hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
     return React.createElement(Checkbox, _extends({
       classes: {
         root: classes.root,

package/es/HiChip/HiChip.js

@@ -116,9 +116,17 @@ function HiChip(props) {
       [classes.leftIcon]: icon
     }),
     title: title
-  }, prefix && React.createElement("span", {
+  }, icon && React.createElement(HiIcon, {
+    className: classNames(classes.icon, {
+      [classes.iconClickable]: onIconClick
+    }),
+    icon: icon,
+    size: iconSize,
+    onClick: onIconClick,
+    title: titleIcon
+  }), prefix && React.createElement("span", {
     className: classes.prefix
-  }, prefix, " : "), img && React.createElement("img", {
+  }, prefix), img && React.createElement("img", {
     className: classes.badge,
     src: img,
     alt: img,
@@ -130,14 +138,6 @@ function HiChip(props) {
       }
     },
     title: titleImg
-  }), icon && React.createElement(HiIcon, {
-    className: classNames(classes.icon, {
-      [classes.iconClickable]: onIconClick
-    }),
-    icon: icon,
-    size: iconSize,
-    onClick: onIconClick,
-    title: titleIcon
   }), onPrevious && React.createElement(HiIcon, {
     className: classNames(classes.navigate),
     icon: "arrow_left",

package/es/HiForm/HiFormControl.js

@@ -11,6 +11,7 @@ import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import withStyles from '../styles/withStyles';
 import HiFormLabel from './HiFormLabel';
+import HiIconButton from '../HiIconButton';
 import { escapeHTML } from '../utils/helpers';
 import keycode from 'keycode/index';
 export const styles = theme => ({
@@ -20,15 +21,24 @@ export const styles = theme => ({
     textAlign: 'right',
     marginTop: 2
   },
-  errorIcon: {
-    width: 19,
-    height: 19,
-    color: theme.palette.negative.main,
+  iconButton: {
     position: 'absolute',
-    right: 8,
+    right: 5,
     cursor: 'pointer',
-    top: '-2px'
+    top: '-5px',
+    '&$iconButtonError': {
+      color: theme.palette.negative.main
+    },
+    '&$iconButtonInfo': {
+      color: theme.palette.neutral.main
+    },
+    '&$iconButtonInfoActive': {
+      color: theme.palette.primary.main
+    }
   },
+  iconButtonError: {},
+  iconButtonInfo: {},
+  iconButtonInfoActive: {},
   errorDiv: _objectSpread({}, theme.typography.b3, {
     backgroundColor: theme.palette.negative.main,
     color: '#FFFFFF',
@@ -36,7 +46,7 @@ export const styles = theme => ({
     verticalAlign: 'middle',
     borderRadius: 2,
     position: 'relative',
-    marginBottom: 5,
+    marginBottom: 8,
     fontWeight: theme.typography.fontWeightRegular
   }),
   arrowDown: {
@@ -47,23 +57,11 @@ export const styles = theme => ({
     borderTop: '4px solid #000',
     position: 'absolute',
     bottom: -4,
-    right: 14
+    right: 13
   },
   errorDivArrowDown: {
     borderTopColor: theme.palette.negative.main
   },
-  helperIcon: {
-    width: 19,
-    height: 19,
-    color: theme.palette.neutral.main,
-    position: 'absolute',
-    right: 8,
-    cursor: 'pointer',
-    top: '-2px'
-  },
-  helperIconActive: {
-    color: theme.palette.primary.main
-  },
   helperDiv: _objectSpread({}, theme.typography.b2, {
     width: '100%',
     backgroundColor: '#ffffff',
@@ -71,13 +69,16 @@ export const styles = theme => ({
     padding: '16px 8px',
     borderRadius: 2,
     position: 'relative',
-    marginBottom: 5,
+    marginBottom: 8,
     fontWeight: theme.typography.fontWeightRegular,
     boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
     lineHeight: 1.5
   }),
   helperDivArrowDown: {
     borderTopColor: '#ffffff'
+  },
+  icon: {
+    position: 'absolute'
   }
 });
 /**
@@ -193,19 +194,21 @@ class HiFormControl extends React.PureComponent {
       required: required,
       disabled: disabled,
       focused: !disabled && (focused || hovered)
-    }, InputLabelProps), error && React.createElement(Warning, {
-      className: classes.errorIcon,
+    }, InputLabelProps), error && React.createElement(HiIconButton, {
+      className: classNames(classes.iconButton, classes.iconButtonError),
       onClick: this.handleHelperClick,
-      tabIndex: 0,
       onKeyDown: this.handleKeyDown
-    }), helperIcon && helperText && !error && React.createElement(Info, {
-      className: classNames(classes.helperIcon, {
-        [classes.helperIconActive]: helperOpen
+    }, React.createElement(Warning, {
+      className: classNames(classes.icon)
+    })), helperIcon && helperText && !error && React.createElement(HiIconButton, {
+      className: classNames(classes.iconButton, classes.iconButtonInfo, {
+        [classes.iconButtonInfoActive]: helperOpen
       }),
       onClick: this.handleHelperClick,
-      tabIndex: 0,
       onKeyDown: this.handleKeyDown
-    })), React.createElement("div", {
+    }, React.createElement(Info, {
+      className: classNames(classes.icon)
+    }))), React.createElement("div", {
       onMouseEnter: this.handleHover(true),
       onMouseLeave: this.handleHover(false),
       onFocus: this.handleFocus(true),

package/es/HiForm/HiInput.js

@@ -147,6 +147,8 @@ class HiInput extends React.PureComponent {
         focused: nextProps.focused
       };
     }
+
+    return null;
   }
 
   getInputElement(el) {

package/es/HiSelect/HiSelect.js

@@ -27,9 +27,11 @@ export const styles = theme => ({
     position: 'relative'
   },
   popper: {
-    width: '100% !important',
     zIndex: 1200
   },
+  popperWidth: {
+    width: '100% !important'
+  },
   paper: {
     borderRadius: '0px 2px',
     maxHeight: 440,
@@ -598,7 +600,7 @@ class HiSelect extends React.PureComponent {
     }
 
     const popperClass = classNames(classes.popper, {
-      [classes.popperClose]: !open
+      [classes.popperWidth]: !this.props.containerWidth
     });
     let allSelected = false;
 
@@ -612,6 +614,10 @@ class HiSelect extends React.PureComponent {
       popperStyle = {
         width: this.props.containerWidth
       };
+
+      if (!staticPosition) {
+        popperStyle.position = 'absolute';
+      }
     }
 
     if (infiniteScroll && loadingMoreResults) {

package/es/HiSelectNew/HiSelect.js

@@ -15,6 +15,7 @@ import withStyles from '../styles/withStyles';
 import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import HiIcon from '../HiIcon';
 import keycode from 'keycode';
+import classNames from "classnames";
 export const styles = theme => ({
   root: {
     backgroundColor: theme.palette.background2,
@@ -23,9 +24,15 @@ export const styles = theme => ({
     position: 'relative'
   },
   popper: {
-    width: '100% !important',
     zIndex: 1200
   },
+  popperWidth: {
+    width: '100% !important'
+  },
+  popperRightAlign: {
+    right: 0,
+    left: 'unset!important'
+  },
   paper: {
     borderRadius: '0px 2px',
     maxHeight: 480,
@@ -413,6 +420,22 @@ class HiSelect extends React.PureComponent {
       itemList,
       inputValue = this.buildInputValue(options, selectedItemIdList, loading)
     } = buildSelectProps(options, selectedItemIdList, searchValue, loading);
+    let popperStyle = {};
+
+    if (this.props.containerWidth > 0) {
+      popperStyle = {
+        width: this.props.containerWidth
+      };
+
+      if (!staticPosition) {
+        popperStyle.position = 'absolute';
+      }
+    }
+
+    const popperClass = classNames(classes.popper, {
+      [classes.popperWidth]: !this.props.containerWidth,
+      [classes.popperRightAlign]: this.props.containerWidth
+    });
     const content = React.createElement(ClickAwayListener, {
       onClickAway: this.handleClickAway
     }, React.createElement(Grow, {
@@ -477,13 +500,15 @@ class HiSelect extends React.PureComponent {
         this.inputEl = el;
       }
     })), open && staticPosition ? React.createElement("div", {
-      className: classes.popper
+      style: popperStyle,
+      className: popperClass
     }, content) : React.createElement(Popper, {
       anchorEl: this.inputEl,
       placement: "bottom-start",
       open: open,
-      className: classes.popper,
-      disablePortal: true
+      className: popperClass,
+      disablePortal: true,
+      style: popperStyle
     }, content));
   }
 
@@ -517,6 +542,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: PropTypes.object,
 
+  /**
+   * Popper width
+   */
+  containerWidth: PropTypes.number,
+
   /**
    * Inactif
    */

package/es/HiSelectableList/HiSelectableListItem.js

@@ -76,6 +76,7 @@ export const styles = theme => ({
   }, theme.typography.b1, {
     fontWeight: 'inherit',
     width: '100%',
+    minWidth: '50%',
     padding: '5px 0',
     '& strong': {
       fontWeight: theme.typography.fontWeightMedium
@@ -102,11 +103,11 @@ export const styles = theme => ({
     color: theme.palette.neutral.main,
     fontWeight: theme.typography.fontWeightLight,
     fontSize: 12,
-    whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     textAlign: 'right',
     margin: '4px 12px 4px 8px',
-    alignSelf: 'center'
+    alignSelf: 'center',
+    width: '100%'
   }),
   checkbox: {
     marginTop: 3
@@ -378,6 +379,11 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   indeterminate: PropTypes.bool,
 
+  /**
+   * icon à afficher quand le composant a la prop indeterminate.
+   */
+  indeterminateIcon: PropTypes.string,
+
   /**
    * Text d'information affiché à droite de l'élément
    */
@@ -440,5 +446,5 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 export default withStyles(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectableList'
+  name: 'HmuiHiSelectableListItem'
 })(HiSelectableListItem);