@hipay/hipay-material-ui 3.2.3 → 3.4.0

package/HiChip/HiChip.js

@@ -5,7 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -21,7 +25,7 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _styles = require("@material-ui/core/styles");
 
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     root: (0, _objectSpread2.default)({}, theme.typography.b3, {
       display: 'inline-flex',
@@ -53,8 +57,12 @@ var styles = function styles(theme) {
     rightNavigation: {},
     deletable: {},
     leftIcon: {},
-    icon: {
-      marginRight: 4
+    icon: function icon(props) {
+      var fontSize = props.iconSize || 20;
+      return {
+        marginRight: 4,
+        fontSize: fontSize
+      };
     },
     iconClickable: {
       cursor: 'pointer',
@@ -105,9 +113,7 @@ var styles = function styles(theme) {
       paddingRight: '8px'
     }
   };
-};
-
-exports.styles = styles;
+});
 
 var handleKeyDown = function handleKeyDown(e, fn) {
   if ((0, _keycode.default)(e) === 'space' || (0, _keycode.default)(e) === 'enter') {
@@ -116,11 +122,10 @@ var handleKeyDown = function handleKeyDown(e, fn) {
   }
 };
 
-function HiChip(props) {
-  var _classNames;
+var HiChip = function HiChip(props) {
+  var _classNames2;
 
   var className = props.className,
-      classes = props.classes,
       fallbackImage = props.fallbackImage,
       icon = props.icon,
       _props$iconSize = props.iconSize,
@@ -143,27 +148,62 @@ function HiChip(props) {
       titleNext = props.titleNext,
       titlePrevious = props.titlePrevious,
       style = props.style;
+  var classes = useStyles(props);
+  var chipIcon;
+
+  if (icon) {
+    var iconProps = {
+      className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
+      id: "".concat(id, "-icon"),
+      onClick: onIconClick,
+      onKeyDown: function onKeyDown(event) {
+        return handleKeyDown(event, onIconClick);
+      },
+      title: titleIcon,
+      tabIndex: onIconClick ? 0 : -1
+    };
+
+    if (typeof icon === 'string') {
+      chipIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: icon
+      }, iconProps));
+    } else if ((0, _typeof2.default)(icon) === 'object') {
+      chipIcon = (0, _objectSpread2.default)({}, icon);
+      chipIcon.props = (0, _objectSpread2.default)({}, iconProps);
+    }
+  }
+
+  var chipLabelIcon;
+
+  if (labelIcon) {
+    var _iconProps = {
+      className: classes.icon,
+      id: "".concat(id, "-labelIcon"),
+      size: iconSize,
+      title: titleIcon,
+      tabIndex: -1
+    };
+
+    if (typeof labelIcon === 'string') {
+      chipLabelIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: labelIcon
+      }, _iconProps));
+    } else if ((0, _typeof2.default)(labelIcon) === 'object') {
+      chipLabelIcon = (0, _objectSpread2.default)({}, labelIcon);
+      chipLabelIcon.props = (0, _objectSpread2.default)({}, _iconProps);
+    }
+  }
+
   return _react.default.createElement("div", {
     id: id,
     role: 'button',
-    className: (0, _classnames.default)(classes.root, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames, classes.leftIcon, icon), _classNames)),
+    className: (0, _classnames.default)(classes.root, className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames2, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames2, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames2, classes.leftIcon, icon), _classNames2)),
     title: title,
     onClick: onClick,
     onKeyDown: onKeyDown,
     tabIndex: onKeyDown ? '0' : '-1',
     style: style
-  }, icon && _react.default.createElement(_HiIcon.default, {
-    className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
-    id: "".concat(id, "-icon"),
-    icon: icon,
-    size: iconSize,
-    onClick: onIconClick,
-    onKeyDown: function onKeyDown(event) {
-      return handleKeyDown(event, onIconClick);
-    },
-    title: titleIcon,
-    tabIndex: onIconClick ? 0 : -1
-  }), prefix && _react.default.createElement("span", {
+  }, chipIcon, prefix && _react.default.createElement("span", {
     id: "".concat(id, "-prefix"),
     className: classes.prefix
   }, prefix), img && _react.default.createElement("img", {
@@ -179,14 +219,7 @@ function HiChip(props) {
       }
     },
     title: titleImg
-  }), labelIcon && _react.default.createElement(_HiIcon.default, {
-    className: (0, _classnames.default)(classes.icon),
-    id: "".concat(id, "-labelIcon"),
-    icon: labelIcon,
-    size: iconSize,
-    title: titleIcon,
-    tabIndex: -1
-  }), onPrevious && _react.default.createElement(_HiIcon.default, {
+  }), labelIcon && chipLabelIcon, onPrevious && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.navigate),
     id: "".concat(id, "-previous"),
     icon: "arrow_left",
@@ -225,11 +258,7 @@ function HiChip(props) {
     title: titleDelete,
     tabIndex: 0
   }));
-}
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiChip'
-})(HiChip);
+};
 
+var _default = HiChip;
 exports.default = _default;

package/HiDatePicker/HiDateRangeSelector.js

@@ -44,6 +44,10 @@ var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
 
 var _reactDeviceDetect = require("react-device-detect");
 
+var _Calendar = _interopRequireDefault(require("mdi-material-ui/Calendar"));
+
+var _CalendarBlank = _interopRequireDefault(require("mdi-material-ui/CalendarBlank"));
+
 function findSeparator(format) {
   var str = '';
 
@@ -302,6 +306,10 @@ exports.styles = styles;
 var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'yy'];
 var CUSTOM_PERIOD_LIST = ['custom'];
 
+var _ref2 = _react.default.createElement(_Calendar.default, null);
+
+var _ref3 = _react.default.createElement(_CalendarBlank.default, null);
+
 var HiDateRangeSelector =
 /*#__PURE__*/
 function (_React$Component) {
@@ -402,7 +410,7 @@ function (_React$Component) {
           id: "preset_periods_subheader",
           type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           pinned: true,
-          icon: "mdi_calendar",
+          icon: _ref2,
           label: translations.preset_periods
         });
         presetOptionsAvailable.forEach(function (option) {
@@ -417,7 +425,7 @@ function (_React$Component) {
           id: "custom_periods_subheader",
           type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           pinned: true,
-          icon: "mdi_calendar_blank",
+          icon: _ref3,
           label: translations.custom_periods
         });
         customOptionsAvailable.forEach(function (option) {

package/HiExpansionPanel/HiExpansionPanel.js

@@ -27,12 +27,12 @@ var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/E
 
 var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
 
-var _HiIcon = _interopRequireDefault(require("./../HiIcon"));
-
 var _styles = require("@material-ui/core/styles");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _MenuUp = _interopRequireDefault(require("mdi-material-ui/MenuUp"));
+
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     summaryContent: {
@@ -49,7 +49,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       borderBottom: '1px solid #E3E6E7',
       height: 48,
       minHeight: 48,
-      padding: '0 0 0 8px',
+      padding: 0,
       '&$expanded': {
         minHeight: 48
       }
@@ -113,10 +113,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
  * HiExpansionPanel
  */
 
-var _ref = _react.default.createElement(_HiIcon.default, {
-  icon: "mdi_menu_up",
-  size: 24
-});
+var _ref = _react.default.createElement(_MenuUp.default, null);
 
 function HiExpansionPanel(props) {
   var disabled = props.disabled,

package/HiForm/HiInput.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
@@ -86,6 +90,7 @@ var styles = function styles(theme) {
       borderRadius: 2
     },
     startAdornment: {
+      fontSize: 20,
       zIndex: 1,
       marginLeft: 0,
       marginRight: 8
@@ -100,6 +105,7 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.light
     },
     rightIcon: {
+      fontSize: 20,
       width: 39,
       color: theme.palette.neutral.main
     },
@@ -355,16 +361,26 @@ function (_React$PureComponent) {
       });
       var leftIcon;
 
-      if (startAdornment) {
+      if (!!startAdornment) {
         var _classNames2;
 
-        leftIcon = _react.default.createElement(_HiIcon.default, {
-          icon: startAdornment,
-          size: 20,
+        var leftIconProps = {
           color: startAdornmentColor,
           onClick: this.props.onLeftIconClick,
           className: (0, _classnames.default)(classes.startAdornment, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.startAdornmentDefaultColor, !startAdornmentColor), (0, _defineProperty2.default)(_classNames2, classes.startAdornmentFocus, focused && !startAdornmentColor), (0, _defineProperty2.default)(_classNames2, classes.startAdornmentDisabled, disabled && !startAdornmentColor), (0, _defineProperty2.default)(_classNames2, classes.iconPointer, this.props.onLeftIconClick), _classNames2))
-        });
+        };
+
+        if (typeof startAdornment === 'string') {
+          leftIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+            icon: startAdornment
+          }, leftIconProps));
+        } else if ((0, _typeof2.default)(startAdornment) === 'object') {
+          // Icon component as prop
+          leftIcon = (0, _objectSpread2.default)({}, startAdornment);
+          leftIcon.props = (0, _objectSpread2.default)({}, leftIcon.props, {}, leftIconProps, {
+            className: "".concat(leftIconProps.className, " ").concat(leftIcon.props.className)
+          });
+        }
       } // Build endAdornment with eraseIcon + endAdornmentProps
 
 

package/HiIcon/HiIcon.js

@@ -27,8 +27,6 @@ var _helpers = require("../utils/helpers");
 
 var hiSvgIcons = _interopRequireWildcard(require("../hi-svg-icons"));
 
-var mdi = _interopRequireWildcard(require("mdi-material-ui"));
-
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     /* Styles applied to the root element. */
@@ -56,15 +54,12 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
       color = props.color,
       other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "icon", "size", "color"]);
   var classes = useStyles(props);
-  var theme = (0, _styles.useTheme)();
   var iconName = icon !== null ? icon : children;
   var iconType = (0, _react.useMemo)(function () {
     if (iconName && iconName.indexOf('fa-') === 0) {
       return "line_awesome";
     } else if (iconName && iconName.indexOf('hi_') === 0) {
       return "hipay";
-    } else if (iconName && iconName.indexOf('mdi_') === 0) {
-      return "mdi";
     } else {
       return "mui";
     }
@@ -89,19 +84,9 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
         size: size
       }, other));
 
-    case "mdi":
-      var MdiIconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
-      return _react.default.createElement(MdiIconName, (0, _extends2.default)({
-        ref: ref,
-        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
-        color: "inherit",
-        style: {
-          fontSize: size
-        }
-      }, other));
-
     case "mui":
     default:
+      // console.log({ ...props });
       return _react.default.createElement(_Icon.default, (0, _extends2.default)({
         ref: ref,
         className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),

package/HiIconButton/HiIconButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = exports.useStyles = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -24,81 +24,56 @@ var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
 // @inheritedComponent IconButton
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     label: {},
-    positive: {
-      color: theme.palette.positive.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.positive.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
-    negative: {
-      color: theme.palette.negative.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.negative.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
-    middle: {
-      color: theme.palette.middle.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.middle.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
+    rootCustomColor: function rootCustomColor(props) {
+      var color;
+
+      if (theme.palette[props.color]) {
+        color = theme.palette[props.color].main;
+      } else if (props.color.charAt(0) === "#") {
+        color = props.color;
       }
-    },
-    neutral: {
-      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'
+
+      if (!color) return {};
+      return {
+        color: color,
+        '&:hover': {
+          backgroundColor: (0, _colorManipulator.fade)(color, theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
         }
-      }
+      };
     }
   };
-};
-
-exports.styles = styles;
+});
+exports.useStyles = useStyles;
 
 function HiIconButton(props) {
-  var _classNames;
-
   var children = props.children,
-      classes = props.classes,
       className = props.className,
       color = props.color,
-      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color"]);
-  var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
-  var buttonClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.negative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.middle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.neutral, color === 'neutral'), _classNames));
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "color"]);
+  var classes = useStyles(props);
+  var isHexColor = color.charAt(0) === "#";
+  var isExtendedColor = ['positive', 'negative', 'middle', 'neutral'].includes(color);
+  var isCustomColor = isHexColor || isExtendedColor;
+  var rootClassNames = (0, _classnames.default)((0, _defineProperty2.default)({}, classes.rootCustomColor, isCustomColor));
   return _react.default.createElement(_IconButton.default, (0, _extends2.default)({
     className: className,
     classes: {
-      root: buttonClassNames,
+      root: rootClassNames,
       label: classes.label
     },
-    color: hcolor
+    color: isCustomColor ? 'inherit' : color
   }, other), children);
 }
 
 HiIconButton.defaultProps = {
   color: 'default'
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiIconButton'
-})(HiIconButton);
-
+var _default = HiIconButton;
 exports.default = _default;

package/HiListItemLink/HiListItemLink.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+
+var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: function root(props) {
+      return {
+        color: props.disabled ? theme.palette.neutral.light : "initial",
+        display: "flex",
+        height: 48,
+        padding: 12,
+        "&:hover": {
+          backgroundColor: props.disabled ? "none" : "#E6F9FD",
+          cursor: props.disabled ? "cursor" : "pointer"
+        },
+        "&:not(:last-child)": {
+          borderBottom: "1px solid #E0E0E0"
+        },
+        // margin between children (unless last span for ripple effect)
+        "& > :not(span)": {
+          marginLeft: 12
+        },
+        "& > div": {
+          display: "block",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          alignSelf: "center",
+          minWidth: "5%"
+        }
+      };
+    },
+    primary: function primary(props) {
+      return {
+        fontSize: "14px",
+        textTransform: "uppercase",
+        flex: props.secondary ? "initial" : 1 // expand primary text unless there is secondary
+
+      };
+    },
+    secondary: {
+      alignSelf: "center",
+      color: theme.palette.neutral.light,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 11,
+      flex: 1
+    },
+    info: {
+      color: theme.palette.neutral.light,
+      fontFamily: theme.typography.fontFamily
+    }
+  };
+});
+
+var _ref = _react.default.createElement(_ArrowRight.default, null);
+
+var HiListItemLink = _react.default.forwardRef(function (props, ref) {
+  var disabled = props.disabled,
+      info = props.info,
+      primary = props.primary,
+      secondary = props.secondary,
+      icon = props.icon,
+      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "info", "primary", "secondary", "icon"]);
+  var classes = useStyles(props);
+  return _react.default.createElement(_ListItem.default, (0, _extends2.default)({
+    ref: ref,
+    className: classes.root,
+    button: true,
+    disableGutters: true,
+    disabled: disabled
+  }, others), _react.default.createElement("div", {
+    className: classes.primary
+  }, primary), secondary && _react.default.createElement("div", {
+    className: classes.secondary
+  }, secondary), info && _react.default.createElement("div", {
+    className: classes.info
+  }, info), icon, _ref);
+});
+
+HiListItemLink.defaultProps = {
+  disabled: false,
+  info: null,
+  onClick: null,
+  secondary: null,
+  icon: null
+};
+var _default = HiListItemLink;
+exports.default = _default;

package/HiListItemLink/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 _HiListItemLink.default;
+  }
+});
+
+var _HiListItemLink = _interopRequireDefault(require("./HiListItemLink"));

package/HiSelectableList/HiSelectableListItem.js

@@ -11,6 +11,10 @@ exports.default = exports.useStyles = exports.useItemLabelStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -206,10 +210,14 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: '1px 4px 3px 4px',
       verticalAlign: 'middle'
     },
-    icon: {
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(1),
-      verticalAlign: 'middle'
+    icon: function icon(props) {
+      return {
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        verticalAlign: 'middle',
+        color: props.selected && props.color ? props.color : 'inherit',
+        fontSize: 20
+      };
     },
     labelContent: {
       display: '-webkit-flex',
@@ -273,7 +281,7 @@ function HiSelectableListItem(props) {
       item = props.item;
   var classes = useStyles(props);
   var ref = (0, _react.useRef)(null);
-  var isHovering = (0, _reactUse.useHoverDirty)(ref);
+  var isHovering = !!hoverIcon ? (0, _reactUse.useHoverDirty)(ref) : false;
   var onKeyDown = (0, _react.useCallback)(function (_ref) {
     var code = _ref.code;
 
@@ -302,6 +310,24 @@ function HiSelectableListItem(props) {
   }
 
   var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+  var itemIcon;
+
+  if (displayedIcon) {
+    var iconProps = {
+      className: classes.icon,
+      color: selected && color ? color : 'inherit'
+    };
+
+    if (typeof displayedIcon === 'string') {
+      itemIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: displayedIcon
+      }, iconProps));
+    } else if ((0, _typeof2.default)(icon) === 'object') {
+      itemIcon = (0, _objectSpread2.default)({}, displayedIcon);
+      itemIcon.props = (0, _objectSpread2.default)({}, itemIcon.props, {}, iconProps);
+    }
+  }
+
   return _react.default.createElement(ListItemComponentName, {
     ref: ref,
     id: id,
@@ -327,7 +353,7 @@ function HiSelectableListItem(props) {
     checkedIcon: checkedIcon // color={disabled ? 'inherit' : 'primary'}
     ,
     disabled: disabled,
-    icon: displayedIcon,
+    icon: itemIcon,
     indeterminate: indeterminate,
     indeterminateIcon: indeterminateIcon
   }), type === 'image' && img && _react.default.createElement("img", {
@@ -344,11 +370,7 @@ function HiSelectableListItem(props) {
   }), _react.default.createElement("div", {
     className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
     "data-id": id
-  }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
-    icon: icon,
-    className: classes.icon,
-    color: selected && color ? color : 'inherit'
-  }), _react.default.createElement(ItemLabel, {
+  }, itemIcon && hideCheckbox && itemIcon, _react.default.createElement(ItemLabel, {
     color: color,
     label: label,
     labelHighlight: labelHighlight,