@hipay/hipay-material-ui 2.0.0-beta.69 → 2.0.0-beta.71

package/HiSelect/HiSelectContent.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -179,7 +179,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
 
@@ -209,13 +209,13 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: (0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
+          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []).concat((0, _toConsumableArray2.default)(suggestions))
+          })] : []), (0, _toConsumableArray2.default)(suggestions))
         });
       }
     };
@@ -251,22 +251,22 @@ function (_React$PureComponent) {
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       // build item list
-      var itemList = (0, _toConsumableArray2.default)(loading ? [{
+      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
         return item.label && _this.props.filterFunc(item, search);
-      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []).concat((0, _toConsumableArray2.default)(options))));
+      })] : []), (0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList
       };
@@ -286,10 +286,10 @@ function (_React$PureComponent) {
       searchValue: props.searchValue ? undefined : '',
       suggestions: props.options
     };
-    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 

package/HiSelect/HiSelectInput.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -127,8 +127,9 @@ var styles = function styles(theme) {
       overflow: 'hidden',
       textOverflow: 'ellipsis'
     }, theme.typography.b1, {
-      display: 'inline-flex',
-      width: '100%'
+      display: 'inline-block',
+      width: '100%',
+      maxWidth: 500
     }),
     placeholder: {
       color: theme.palette.grey[400]
@@ -228,11 +229,11 @@ function (_React$PureComponent) {
       }
     };
 
-    _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.ref = _this.ref.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
+    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 

package/HiSelect/HiSuggestSelect.js

@@ -19,12 +19,12 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
 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"));
@@ -168,10 +168,10 @@ function (_React$PureComponent) {
       focused: false,
       options: props.options
     };
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)(_this));
+    _this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
@@ -225,7 +225,8 @@ function (_React$PureComponent) {
           onSearch = _this$props.onSearch,
           translations = _this$props.translations,
           align = _this$props.align,
-          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align"]);
+          inputClasses = _this$props.inputClasses,
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align", "inputClasses"]);
       var _this$state = this.state,
           focused = _this$state.focused,
           options = _this$state.options;
@@ -265,7 +266,8 @@ function (_React$PureComponent) {
         onChange: onSearch,
         onKeyDown: this.handleKeyDownSearch,
         onBlur: this.handleBlur,
-        onFocus: this.handleFocus
+        onFocus: this.handleFocus,
+        classes: inputClasses
       })), open && _react.default.createElement(_Popper.default, {
         disablePortal: true,
         anchorEl: this.textInput,
@@ -319,6 +321,11 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   id: _propTypes.default.string,
 
+  /**
+   * Object that contains the style for Input component
+   */
+  inputClasses: _propTypes.default.object,
+
   /**
    * Passe une ref callback au composant input
    */

package/HiSelectableList/HiSelectableListItem.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -242,8 +242,8 @@ function (_React$PureComponent) {
     _this.state = {
       hover: false
     };
-    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)(_this));
+    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 

package/HiTable/HiCellBuilder.js

@@ -150,6 +150,7 @@ function (_React$PureComponent) {
                 color: datacell.color,
                 icon: datacell.icon,
                 label: datacell.label,
+                onClick: datacell.handleClick,
                 view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
                 size: cell.size
               });
@@ -194,6 +195,8 @@ function (_React$PureComponent) {
                 active: datacell.active,
                 color: datacell.color,
                 label: datacell.label,
+                isButton: datacell.isButton,
+                onClick: datacell.handleClick,
                 title: cell.title ? cell.title(datacell, cell) : datacell.title,
                 value: datacell.value
               });
@@ -211,15 +214,12 @@ function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          className = _this$props.className,
           column = _this$props.column,
           data = _this$props.data,
           locale = _this$props.locale;
       return _react.default.createElement(_TableCell.default, {
-        style: {
-          border: 'none',
-          paddingRight: '13px',
-          paddingLeft: '13px'
-        }
+        className: className
       }, this.createCell(column, data, locale));
     }
   }]);
@@ -227,6 +227,11 @@ function (_React$PureComponent) {
 }(_react.default.PureComponent);
 
 HiCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Override TableCell style
+   */
+  className: _propTypes.default.object,
+
   /**
    * Propriétés de la colonne
    */

package/HiTable/HiTable.js

@@ -15,10 +15,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -57,7 +57,7 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleRequestSort = _this.handleRequestSort.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleRequestSort = _this.handleRequestSort.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 

package/HiTable/HiTableHeader.js

@@ -36,13 +36,21 @@ var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSor
 var cst = _interopRequireWildcard(require("./constants"));
 
 // @inheritedComponent TableHeader
-var styles = {
-  icon: {
-    color: '#00ADE9'
-  },
-  headerRoot: {
-    cursor: 'inherit'
-  }
+var styles = function styles(theme) {
+  return {
+    head: {
+      cursor: 'inherit',
+      borderBottom: "solid 1px ".concat(theme.palette.divider)
+    },
+    cell: {
+      border: 'none',
+      paddingRight: '13px',
+      paddingLeft: '13px'
+    },
+    icon: {
+      color: '#00ADE9'
+    }
+  };
 };
 
 var HiTableHeader =
@@ -84,7 +92,9 @@ function (_React$PureComponent) {
           orderBy = _this$props.orderBy,
           sortable = _this$props.sortable,
           dense = _this$props.dense;
-      return _react.default.createElement(_TableHead.default, null, _react.default.createElement(_TableRow.default, {
+      return _react.default.createElement(_TableHead.default, {
+        className: classes.head
+      }, _react.default.createElement(_TableRow.default, {
         style: {
           height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT,
           whiteSpace: 'nowrap'
@@ -100,13 +110,8 @@ function (_React$PureComponent) {
         var finalLabel = view === 's' ? smallLabel : label;
         return _react.default.createElement(_TableCell.default, {
           key: colId,
+          className: classes.cell,
           sortDirection: orderBy === colId ? order : false,
-          style: {
-            border: 'none',
-            borderBottom: orderBy === colId ? 'solid 1px #00ADE9' : 'none',
-            paddingRight: '13px',
-            paddingLeft: '13px'
-          },
           numeric: cst.ALIGN_RIGHT_TYPES.includes(type),
           title: headerTooltip
         }, sortable ? _react.default.createElement(_TableSortLabel.default, {

package/HiTable/HiTableRow.js

@@ -19,10 +19,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -46,15 +46,18 @@ var styles = function styles(theme) {
       '&:last-child': {
         borderBottom: 'solid 1px #E4E7E8'
       },
-      '&:first-child': {
-        borderTop: 'solid 1px #E4E7E8'
-      },
       '&:hover, &:focus': {
         backgroundColor: "".concat(theme.palette.action.hover, " !important")
       }
     },
     clickableRow: {
       cursor: 'pointer'
+    },
+    cell: {
+      border: 'none',
+      padding: '0px 13px',
+      minHeight: '32px',
+      maxHeight: '40px'
     }
   };
 };
@@ -71,7 +74,7 @@ function (_React$PureComponent) {
 
     (0, _classCallCheck2.default)(this, HiTableRow);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiTableRow).call(this, props));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
@@ -115,6 +118,7 @@ function (_React$PureComponent) {
       }, Object.keys(columns).map(function (column) {
         return _react.default.createElement(_HiCellBuilder.default, {
           key: columns[column].colId,
+          className: classes.cell,
           column: columns[column],
           data: rowdata,
           locale: locale

package/es/HiCell/CellIcon.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from '../styles/withStyles';
 import HiIcon from '../HiIcon';
+import HiIconButton from '../HiIconButton';
 export const styles = {
   icon: {
     float: 'left'
@@ -29,13 +30,36 @@ class CellIcon extends React.PureComponent {
       color,
       icon,
       label,
-      view,
-      size
+      onClick,
+      size,
+      view
     } = this.props;
+
+    if (onClick) {
+      return React.createElement("div", {
+        className: classes.wrapper,
+        title: label
+      }, React.createElement(HiIconButton, {
+        color: 'inherit',
+        style: {
+          color,
+          fontSize: size || 24,
+          maxHeight: 31,
+          maxWidth: 31
+        },
+        onClick: onClick
+      }, React.createElement(HiIcon, {
+        className: classes.icon,
+        icon: icon
+      }), view !== 's' && label && React.createElement("span", {
+        className: classes.label
+      }, label)));
+    }
+
     return React.createElement("div", {
       className: classes.wrapper,
       title: label
-    }, icon && React.createElement(HiIcon, {
+    }, React.createElement(HiIcon, {
       color: 'inherit',
       style: {
         color,
@@ -76,6 +100,11 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   label: PropTypes.string,
 
+  /**
+   * Fonction déclenchée lors du clic
+   */
+  onClick: PropTypes.func,
+
   /**
    * View (L/M/S)
    */

package/es/HiCell/CellRate.js

@@ -12,7 +12,7 @@ export const styles = theme => ({
     overflow: 'hidden',
     position: 'relative',
     textAlign: 'right',
-    paddingTop: 10
+    maxHeight: '32px'
   },
   trendChipIcon: {
     width: 14,

package/es/HiCell/CellTextStyled.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import HiColoredLabel from '../HiColoredLabel';
+import HiButton from '../HiButton';
 const styleRoot = {
   width: '100%',
   height: 19,
@@ -21,12 +22,18 @@ const styleLabel = {
   whiteSpace: 'pre',
   width: '100%'
 };
+const styleButton = {
+  padding: '1px 5px',
+  minHeight: '18px',
+  maxHeight: '18px'
+};
 /**
  * CellText functional component
  * (don't includes complex ellipsis: middle, after-first-word...)
  *
  * @param label
  * @param color
+ * @param isButton
  * @param value
  * @param active
  * @param title
@@ -37,11 +44,24 @@ const styleLabel = {
 const CellTextStyled = ({
   label,
   color,
+  isButton,
+  onClick,
   value = '',
   active = false,
   title = ''
 }) => {
   const valueString = label ? label.toString() : value.toString();
+
+  if (isButton) {
+    return React.createElement(HiButton, {
+      color: color,
+      onClick: onClick,
+      size: "small",
+      style: styleButton,
+      variant: "raised"
+    }, valueString);
+  }
+
   return React.createElement("div", {
     style: styleRoot,
     title: title || valueString
@@ -66,11 +86,21 @@ CellTextStyled.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   color: PropTypes.string,
 
+  /**
+   * Définit si la cellule de text
+   */
+  isButton: PropTypes.bool,
+
   /**
    * Label
    */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
+  /**
+   * Fonction déclenchée lors du clic
+   */
+  onClick: PropTypes.func,
+
   /**
    * Tooltip
    */

package/es/HiChip/HiChipSwitch.js

@@ -202,7 +202,7 @@ class HiChipSwitch extends React.PureComponent {
 }
 
 HiChipSwitch.defaultProps = {
-  active: true,
+  active: false,
   activeIcon: 'check',
   selection: null,
   selectionTitle: ''

package/es/HiDatePicker/HiDatePicker.js

@@ -181,7 +181,8 @@ class HiDatePicker extends React.Component {
     const yearPickerProps = {
       value: this.state.currentMonth,
       onChange: this.handleCurrentMonthChange,
-      disableFutureDays: this.props.disableFutureDays
+      disableFutureDays: this.props.disableFutureDays,
+      minimumDate: this.props.minimumDate
     };
     return React.createElement(YearPickerOverlay, _extends({
       key: 'year-picker-overlay'

package/es/HiForm/HiFormLabel.js

@@ -21,7 +21,7 @@ export const styles = theme => ({
       color: theme.palette.negative.main
     },
     display: 'flex',
-    alignItems: 'center'
+    alignItems: 'baseline'
   }),
   optional: {
     fontSize: 11,

package/es/HiForm/HiInput.js

@@ -19,7 +19,7 @@ export const styles = theme => ({
     },
     width: '100%',
     // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
-    '&:not($error)': {
+    '&:$error': {
       marginTop: 1
     }
   }),

package/es/HiForm/HiTextField.js

@@ -69,6 +69,7 @@ class HiTextField extends React.PureComponent {
       placeholder,
       value,
       HiInputProps,
+      HiInputLabelProps,
       name,
       rows,
       maxLength
@@ -88,7 +89,8 @@ class HiTextField extends React.PureComponent {
       helperIcon: helperIcon,
       multiline: multiline,
       maxLength: maxLength,
-      nbChars: nbChars
+      nbChars: nbChars,
+      InputLabelProps: HiInputLabelProps
     }, React.createElement(HiInput, _extends({
       inputId: id,
       name: name,
@@ -168,6 +170,11 @@ HiTextField.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   helperText: PropTypes.string,
 
+  /**
+   * Propriétés appliquées au composant HiFormLabel
+   */
+  HiInputLabelProps: PropTypes.object,
+
   /**
    * Propriétés appliquées au composant HiInput
    */

package/es/HiPin/HiPin.js

@@ -6,9 +6,9 @@ import { withStyles } from '../styles';
 export const styles = theme => ({
   root: {
     display: 'inline-block',
-    padding: '1px 9px',
-    height: 16,
-    lineHeight: '16px',
+    padding: '0px 9px',
+    height: 17,
+    lineHeight: '17px',
     minWidth: 25,
     textAlign: 'center',
     borderRadius: '45px',

package/es/HiSelect/HiSelect.js

@@ -38,13 +38,14 @@ export const styles = theme => ({
     transition: 'none !important'
   },
   labelIcon: {
-    marginRight: 10
+    marginRight: 10,
+    verticalAlign: 'text-bottom'
   },
   labelImg: {
     height: 18,
     width: 'auto',
     margin: '0 4px',
-    verticalAlign: 'middle'
+    verticalAlign: 'text-bottom'
   },
   selectIconLabel: _objectSpread({
     whiteSpace: 'nowrap',
@@ -52,7 +53,7 @@ export const styles = theme => ({
     textOverflow: 'ellipsis',
     paddingRight: 16
   }, theme.typography.b1, {
-    display: 'inline-flex',
+    display: 'inline-block',
     width: '100%'
   }),
   selectImgLabel: _objectSpread({
@@ -460,10 +461,10 @@ class HiSelect extends React.PureComponent {
   getLengthItemList(itemList) {
     let itemListLength = 0;
     itemList.forEach(parent => {
-      if (parent.displayed && itemListLength < 10) {
+      if (parent.displayed !== false) {
         itemListLength += 1;
 
-        if (parent.children && itemListLength < 10) {
+        if (parent.children) {
           itemListLength += this.getLengthItemList(parent.children);
         }
       }

package/es/HiSelect/HiSelectInput.js

@@ -93,8 +93,9 @@ export const styles = theme => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   }, theme.typography.b1, {
-    display: 'inline-flex',
-    width: '100%'
+    display: 'inline-block',
+    width: '100%',
+    maxWidth: 500
   }),
   placeholder: {
     color: theme.palette.grey[400]