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

package/HiAppBar/HiAppBar.js

@@ -75,10 +75,6 @@ var _ref = _react.default.createElement(_HiIcon.default, {
   icon: "keyboard_arrow_up"
 });
 
-var _ref2 = _react.default.createElement(_HiIcon.default, {
-  icon: "keyboard_arrow_down"
-});
-
 var HiAppBar =
 /*#__PURE__*/
 function (_React$Component) {
@@ -99,15 +95,7 @@ function (_React$Component) {
   (0, _createClass2.default)(HiAppBar, [{
     key: "handleCollapse",
     value: function handleCollapse() {
-      if (this.props.onCollapse) {
-        this.props.onCollapse();
-      } else {
-        this.setState(function (prevState) {
-          return {
-            collapsed: !prevState.collapsed
-          };
-        });
-      }
+      this.props.onCollapse(!this.state.collapsed);
     }
   }, {
     key: "render",
@@ -116,8 +104,7 @@ function (_React$Component) {
           children = _this$props.children,
           classes = _this$props.classes,
           className = _this$props.className,
-          _this$props$collapsed = _this$props.collapsed,
-          collapsed = _this$props$collapsed === void 0 ? this.state.collapsed : _this$props$collapsed,
+          collapsed = _this$props.collapsed,
           focused = _this$props.focused,
           hideable = _this$props.hideable,
           position = _this$props.position,
@@ -137,11 +124,7 @@ function (_React$Component) {
         onClick: this.handleCollapse,
         color: "inherit",
         className: classes.iconButton
-      }, _ref)))), hideable && collapsed && _react.default.createElement(_HiIconButton.default, {
-        onClick: this.handleCollapse,
-        color: "inherit",
-        className: classes.collapseButton
-      }, _ref2));
+      }, _ref)))));
     }
   }]);
   return HiAppBar;

package/HiButton/HiButton.js

@@ -29,6 +29,12 @@ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var styles = function styles(theme) {
   return {
     root: {},
+    flatNeutral: {
+      color: theme.palette.neutral.main,
+      '&$disabled': {
+        color: theme.palette.action.disabled
+      }
+    },
     flatPositive: {
       color: theme.palette.positive.main,
       '&:hover': {
@@ -37,6 +43,9 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
+      },
+      '&$disabled': {
+        color: theme.palette.action.disabled
       }
     },
     flatNegative: {
@@ -47,6 +56,9 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
+      },
+      '&$disabled': {
+        color: theme.palette.action.disabled
       }
     },
     flatMiddle: {
@@ -57,16 +69,9 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
-      }
-    },
-    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'
-        }
+      },
+      '&$disabled': {
+        color: theme.palette.action.disabled
       }
     },
 
@@ -80,6 +85,10 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: theme.palette.positive.main
         }
+      },
+      '&$disabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
       }
     },
 
@@ -93,6 +102,10 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: theme.palette.negative.main
         }
+      },
+      '&$disabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
       }
     },
 
@@ -106,6 +119,10 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: theme.palette.middle.main
         }
+      },
+      '&$disabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
       }
     },
 
@@ -119,6 +136,10 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: theme.palette.neutral.main
         }
+      },
+      '&$disabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
       }
     },
 
@@ -152,7 +173,8 @@ var styles = function styles(theme) {
       '&:hover': {
         border: "1px solid ".concat(theme.palette.neutral.main)
       }
-    }
+    },
+    disabled: {}
   };
 };
 
@@ -166,18 +188,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 +227,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/HiColoredLabel/HiColoredLabel.js

@@ -27,7 +27,7 @@ var _colorManipulator = require("../styles/colorManipulator");
 
 var styles = function styles(theme) {
   return {
-    root: (0, _extends2.default)({}, theme.typography.b3, {
+    root: (0, _extends2.default)({}, theme.typography.b1, {
       display: 'inline-block',
       alignItems: 'baseline',
       maxWidth: '100%',
@@ -147,7 +147,12 @@ function HiColoredLabel(props) {
     }, fontWeight && {
       fontWeight: fontWeight
     })
-  }, other), label);
+  }, other, {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: (0, _helpers.escapeHTML)(label)
+    }
+  }));
 }
 
 HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {

package/HiDatePicker/HiDatePicker.js

@@ -292,8 +292,6 @@ function (_React$Component) {
       }, props);
       var inputProps = (0, _extends2.default)({}, onReset && {
         onReset: this.handleReset
-      }, {
-        onBlur: this.handleBlur
       }, props, {
         onChange: this.handleInputChange
       });

package/HiForm/HiInput.js

@@ -219,6 +219,10 @@ function (_React$PureComponent) {
       // Si on click sur un élément de HiInput, on garde le focus
       // Par exemple sur l'icone reset
       if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
+        if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
+          this.props.onBlur(event);
+        }
+
         event.stopPropagation();
       } else {
         this.setState({
@@ -390,6 +394,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 +458,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/HiIcon/HiIcon.js

@@ -34,42 +34,48 @@ var mdi = _interopRequireWildcard(require("mdi-material-ui"));
 var styles = function styles(theme) {
   return {
     /* Styles applied to the root element. */
-    root: {},
+    root: {
+      /* Styles applied to the root element if `color="primary"`. */
+      '&$colorPrimary': {
+        color: theme.palette.primary.main
+      },
+
+      /* Styles applied to the root element if `color="secondary"`. */
+      '&$colorSecondary': {
+        color: theme.palette.secondary.main
+      },
+
+      /* Styles applied to the root element if `color="positive"`. */
+      '&$colorPositive': {
+        color: theme.palette.positive.main
+      },
+
+      /* Styles applied to the root element if `color="negative"`. */
+      '&$colorNegative': {
+        color: theme.palette.negative.main
+      },
+
+      /* Styles applied to the root element if `color="middle"`. */
+      '&$colorMiddle': {
+        color: theme.palette.middle.main
+      },
+
+      /* Styles applied to the root element if `color="neutral"`. */
+      '&$colorNeutral': {
+        color: theme.palette.neutral.main
+      }
+    },
 
     /* Styles applied to the root element. */
     faIcon: {
       fontSize: 20
     },
-
-    /* Styles applied to the root element if `color="primary"`. */
-    colorPrimary: {
-      color: theme.palette.primary.main
-    },
-
-    /* Styles applied to the root element if `color="secondary"`. */
-    colorSecondary: {
-      color: theme.palette.secondary.main
-    },
-
-    /* Styles applied to the root element if `color="positive"`. */
-    colorPositive: {
-      color: theme.palette.positive.main
-    },
-
-    /* Styles applied to the root element if `color="negative"`. */
-    colorNegative: {
-      color: theme.palette.negative.main
-    },
-
-    /* Styles applied to the root element if `color="middle"`. */
-    colorMiddle: {
-      color: theme.palette.middle.main
-    },
-
-    /* Styles applied to the root element if `color="neutral"`. */
-    colorNeutral: {
-      color: theme.palette.neutral.main
-    }
+    colorPrimary: {},
+    colorSecondary: {},
+    colorPositive: {},
+    colorNegative: {},
+    colorMiddle: {},
+    colorNeutral: {}
   };
 };
 

package/HiSelectNew/HiNestedSelect.js

@@ -35,6 +35,8 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
+var _helpers = require("../utils/helpers");
+
 // @inheritedComponent HiSelect
 
 /**
@@ -86,6 +88,8 @@ function findFinalItemRecursively(itemList, searchId) {
  * @param visibleParent - visibility of the list parent item (default false)
  * @param pinnedParent - parent will be displayed as pinned items
  * @param disabledParent - parent will not be selectable
+ * @param nbChildrenAsInfo - Show children number as info
+ * @param translations - Translations
  * @returns {*}
  */
 
@@ -96,12 +100,14 @@ function buildFilteredItemList(itemList) {
   var visibleParent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var pinnedParent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var disabledParent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var nbChildrenAsInfo = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var translations = arguments.length > 7 ? arguments[7] : undefined;
   return itemList.reduce(function (_ref, item) {
     var memoItemList = _ref.l,
         memoSelected = _ref.s,
         memoUnselected = _ref.u,
         memoVisible = _ref.v;
-    var itemVisible = searchValue === '' || item.label.toString().toLowerCase().search(searchValue.toLowerCase()) !== -1; // Parent item
+    var itemVisible = searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(searchValue.toLowerCase())) !== -1; // Parent item
 
     if (item.children) {
       var _buildFilteredItemLis = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent),
@@ -110,6 +116,10 @@ function buildFilteredItemList(itemList) {
           unselected = _buildFilteredItemLis.u,
           visible = _buildFilteredItemLis.v;
 
+      if (nbChildrenAsInfo) {
+        item.info = translations.n_children.replace('%s', item.children.length);
+      }
+
       return {
         l: (0, _toConsumableArray2.default)(memoItemList).concat([(0, _extends2.default)({}, item, disabledParent && {
           disabled: true,
@@ -161,7 +171,31 @@ var styles = function styles(theme) {
       borderRadius: '0px 2px',
       maxHeight: 480,
       transition: 'none !important'
-    }
+    },
+    labelImg: {
+      height: 18,
+      width: 'auto',
+      margin: '0 4px',
+      verticalAlign: 'middle'
+    },
+    selectIconLabel: (0, _extends2.default)({
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      paddingRight: 16
+    }, theme.typography.b1, {
+      display: 'inline-flex',
+      width: '100%'
+    }),
+    selectImgLabel: (0, _extends2.default)({
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      paddingRight: 16
+    }, theme.typography.b1, {
+      display: 'inline-flex',
+      width: '100%'
+    })
   };
 };
 /**
@@ -249,10 +283,11 @@ function (_React$PureComponent) {
           hasAll = _this$props2.hasAll,
           iconAll = _this$props2.iconAll,
           multiple = _this$props2.multiple,
+          nbChildrenAsInfo = _this$props2.nbChildrenAsInfo,
           pinnedParent = _this$props2.pinnedParent,
           translations = _this$props2.translations; // build item list
 
-      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple),
+      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations),
           filteredItemList = _buildFilteredItemLis2.l,
           allSelected = _buildFilteredItemLis2.s,
           allUnselected = _buildFilteredItemLis2.u,
@@ -389,7 +424,7 @@ HiNestedSelect.defaultProps = {
     search: 'Search',
     n_items_selected: '%s items selected',
     one_item_selected: '%s item selected',
-    n_children: '%s items',
+    n_children: '%s',
     one_child: '%s item'
   }
 };
@@ -434,6 +469,11 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   name: _propTypes.default.string.isRequired,
 
+  /**
+   * Définit si l'on doit afficher le nombre d'enfants du parent dans son champ info
+   */
+  nbChildrenAsInfo: _propTypes.default.bool,
+
   /**
    * Fonction de callback qui renvoit la/les valeurs sélectionnées
    *

package/HiSelectNew/HiSelect.js

@@ -62,7 +62,7 @@ var styles = function styles(theme) {
       position: 'relative'
     },
     popper: {
-      width: '100%',
+      width: '100% !important',
       zIndex: 1200
     },
     paper: {
@@ -193,7 +193,9 @@ function (_React$PureComponent) {
 
       if (_this.overlay && (key === 'down' || key === 'up')) {
         _this.focusOnFirstItem();
-      } else if (_this.overlay && key === 'esc') {
+      } else if (_this.overlay && key === 'esc' || key === 'enter') {
+        event.preventDefault();
+
         _this.handleClose();
       }
     };
@@ -336,8 +338,14 @@ function (_React$PureComponent) {
         hideCheckbox: true,
         label: 'loading'
       }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
-        return item.label && item.label.toString().toLowerCase().search(search.toLowerCase()) !== -1;
-      })) : (0, _toConsumableArray2.default)(options)));
+        return item.label && (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
+      })) : (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))));
       return {
         itemList: itemList,
         inputValue: _this.buildInputValue(options, value, loading)

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/HiSelectableList/HiSelectableListItem.js

@@ -111,7 +111,10 @@ var styles = function styles(theme) {
     }, theme.typography.b1, {
       fontWeight: 'inherit',
       width: '100%',
-      padding: '5px 0'
+      padding: '5px 0',
+      '& strong': {
+        fontWeight: theme.typography.fontWeightMedium
+      }
     }),
     label: {
       display: 'inline-block',
@@ -259,6 +262,7 @@ function (_React$Component) {
           hideCheckbox = _this$props2.hideCheckbox,
           onSelect = _this$props2.onSelect,
           indeterminate = _this$props2.indeterminate,
+          indeterminateIcon = _this$props2.indeterminateIcon,
           icon = _this$props2.icon,
           id = _this$props2.id,
           img = _this$props2.img,
@@ -317,7 +321,8 @@ function (_React$Component) {
         ,
         disabled: disabled,
         icon: displayedIcon,
-        indeterminate: indeterminate
+        indeterminate: indeterminate,
+        indeterminateIcon: indeterminateIcon
       }), _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.listItemContent, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.centered, centered), (0, _defineProperty2.default)(_classNames2, classes.primaryHighlight, type === 'primary-highlight'), _classNames2)),
         "data-id": id
@@ -351,6 +356,7 @@ HiSelectableListItem.defaultProps = {
   hideCheckbox: false,
   hoverIcon: 'check_box_outline_blank',
   checkedIcon: 'check_box',
+  indeterminateIcon: 'indeterminate_check_box',
   indeterminate: false,
   level: 0,
   paddingLeft: 4,