@hipay/hipay-material-ui 3.7.4 → 3.7.5

package/HiDatePicker/HiDateRangeSelector.js

@@ -48,6 +48,8 @@ var _Calendar = _interopRequireDefault(require("mdi-material-ui/Calendar"));
 
 var _CalendarBlank = _interopRequireDefault(require("mdi-material-ui/CalendarBlank"));
 
+var _CalendarArrowRight = _interopRequireDefault(require("mdi-material-ui/CalendarArrowRight"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
@@ -104,12 +106,23 @@ function buildDateRangeInfo(t, from, to, format) {
       prefix = _options$prefix === void 0 ? null : _options$prefix,
       _options$toNow = options.toNow,
       toNow = _options$toNow === void 0 ? false : _options$toNow,
+      _options$toToday = options.toToday,
+      toToday = _options$toToday === void 0 ? false : _options$toToday,
       _options$displayDays = options.displayDays,
-      displayDays = _options$displayDays === void 0 ? true : _options$displayDays; // From
+      displayDays = _options$displayDays === void 0 ? true : _options$displayDays,
+      _options$displayDayNa = options.displayDayName,
+      displayDayName = _options$displayDayNa === void 0 ? false : _options$displayDayNa; // From
+
+  var info = "".concat(t.from, " ").concat(from.format(format), " "); // Display day name
+
+  if (displayDayName) {
+    info = "".concat(t.from, " ").concat(from.format('dddd'), "  ").concat(from.format(format), " ");
+  } // To
 
-  var info = "".concat(t.from, " ").concat(from.format(format), " "); // To
 
-  if (toNow) {
+  if (toToday) {
+    info += "".concat(t.to_today);
+  } else if (toNow) {
     info += "".concat(t.to_now);
   } else {
     info += "".concat(t.to, " ").concat(to.format(format));
@@ -132,7 +145,7 @@ function buildDateRangeInfo(t, from, to, format) {
 
   if (displayDays) {
     var days = Math.ceil(to.diff(from, 'days', true));
-    info = "".concat(days, " ").concat(t.days, ", ").concat(info);
+    info = "".concat(days, " ").concat(days === 1 ? t.day : t.days, ", ").concat(info);
   }
 
   return info;
@@ -143,6 +156,7 @@ function buildDateRangeOptionByKey(key, t, format) {
   var label;
   var info;
   var to;
+  var days;
 
   switch (key) {
     case 'custom':
@@ -203,7 +217,8 @@ function buildDateRangeOptionByKey(key, t, format) {
       label = t.previous_month;
       from = (0, _momentTimezone.default)().subtract(1, 'month').startOf('month');
       to = (0, _momentTimezone.default)().subtract(1, 'month').endOf('month');
-      info = "".concat(from.daysInMonth(), " ").concat(t.days, ", ").concat(yearAndMonth(format, from));
+      days = from.daysInMonth();
+      info = "".concat(days, " ").concat(days === 1 ? t.day : t.days, ", ").concat(yearAndMonth(format, from));
       break;
 
     case 'cq':
@@ -239,18 +254,27 @@ function buildDateRangeOptionByKey(key, t, format) {
       });
       break;
 
-    case 'yy':
-      label = t.year_on_year;
-      from = (0, _momentTimezone.default)().subtract(1, 'years');
+    case "1":
+      label = "24h";
+      from = (0, _momentTimezone.default)().subtract(1, 'day');
       to = (0, _momentTimezone.default)();
-      info = buildDateRangeInfo(t, from, to, format, {
-        prefix: null,
-        toNow: true,
-        displayDays: true
-      });
+      info = "".concat(t.from, " ").concat(from.format("HH:mm"), " ").concat(t.yesterday.toLowerCase(), " ").concat(t.to_now);
       break;
 
     default:
+      if (parseInt(key) > 0) {
+        label = "".concat(key, " ").concat(key === 1 ? t.day : t.days);
+        from = (0, _momentTimezone.default)().subtract(parseInt(key), 'day');
+        to = (0, _momentTimezone.default)();
+        info = buildDateRangeInfo(t, from, to, format, {
+          prefix: null,
+          toNow: true,
+          toToday: false,
+          displayDays: false,
+          displayDayName: true
+        });
+      }
+
       break;
   }
 
@@ -307,12 +331,15 @@ var styles = function styles(theme) {
 };
 
 exports.styles = styles;
-var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'yy'];
+var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy'];
+var SLIDING_PERIOD_LIST = ['1', '7', '30', '365'];
 var CUSTOM_PERIOD_LIST = ['custom'];
 
 var _ref2 = /*#__PURE__*/_react.default.createElement(_Calendar.default, null);
 
-var _ref3 = /*#__PURE__*/_react.default.createElement(_CalendarBlank.default, null);
+var _ref3 = /*#__PURE__*/_react.default.createElement(_CalendarArrowRight.default, null);
+
+var _ref4 = /*#__PURE__*/_react.default.createElement(_CalendarBlank.default, null);
 
 var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(HiDateRangeSelector, _React$Component);
@@ -395,8 +422,6 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "buildOptions",
     value: function buildOptions() {
-      var _this2 = this;
-
       var _this$props = this.props,
           availableOptionKeys = _this$props.availableOptionKeys,
           translations = _this$props.translations;
@@ -405,39 +430,49 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
       var presetOptionsAvailable = availableOptionKeys.filter(function (option) {
         return PRESET_PERIOD_LIST.includes(option);
       });
+      var slidingOptionsAvailable = availableOptionKeys.filter(function (option) {
+        return SLIDING_PERIOD_LIST.includes(option);
+      });
       var customOptionsAvailable = availableOptionKeys.filter(function (option) {
         return CUSTOM_PERIOD_LIST.includes(option);
       });
 
-      if (presetOptionsAvailable) {
+      if (presetOptionsAvailable.length) {
         options.push({
           id: "preset_periods_subheader",
           type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
-          pinned: true,
           icon: _ref2,
           label: translations.preset_periods,
-          selectable: false
+          children: this.options.filter(function (o) {
+            return presetOptionsAvailable.includes(o.id);
+          }),
+          collapseParent: true
         });
-        presetOptionsAvailable.forEach(function (option) {
-          options.push(_this2.options.find(function (_option) {
-            return _option.id === option;
-          }));
+      }
+
+      if (slidingOptionsAvailable.length) {
+        options.push({
+          id: "sliding_periods_subheader",
+          type: SLIDING_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          icon: _ref3,
+          label: translations.sliding_periods,
+          children: this.options.filter(function (o) {
+            return slidingOptionsAvailable.includes(o.id);
+          }),
+          collapseParent: true
         });
       }
 
-      if (customOptionsAvailable) {
+      if (customOptionsAvailable.length) {
         options.push({
           id: "custom_periods_subheader",
           type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
-          pinned: true,
-          icon: _ref3,
+          icon: _ref4,
           label: translations.custom_periods,
-          selectable: false
-        });
-        customOptionsAvailable.forEach(function (option) {
-          options.push(_this2.options.find(function (_option) {
-            return _option.id === option;
-          }));
+          children: this.options.filter(function (o) {
+            return customOptionsAvailable.includes(o.id);
+          }),
+          collapseParent: true
         });
       }
 
@@ -446,7 +481,7 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
 
       var _this$props2 = this.props,
           availableOptionKeys = _this$props2.availableOptionKeys,
@@ -477,7 +512,9 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
       var hiSelectableListProps = {
         secondaryInline: false,
         hideCheckbox: true,
-        lazy: false
+        lazy: false,
+        collapseParent: true,
+        noPadding: true
       };
       var options = this.buildOptions();
       return /*#__PURE__*/_react.default.createElement(_HiFormControl.default, {
@@ -497,7 +534,7 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
           flexDirection: 'column'
         } : {},
         ref: function ref(container) {
-          _this3.container = container;
+          _this2.container = container;
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: classes.select,
@@ -584,12 +621,14 @@ HiDateRangeSelector.defaultProps = {
     yearAndMonth: 'YYYY[-]MM',
     yearAndQuarter: 'YYYY[-Q]Q',
     year: 'Year',
+    day: 'day',
     days: 'days',
     custom_period: 'Custom Period',
     yesterday: 'Yesterday',
     from: 'from',
     to: 'to',
     to_now: 'to now',
+    to_today: 'to today',
     current_week: 'Current Week',
     previous_week: 'Previous Week',
     current_month: 'Current Month',
@@ -606,7 +645,8 @@ HiDateRangeSelector.defaultProps = {
     missing_date_to: 'Missing date to',
     preset_periods: 'Preset periods',
     custom_periods: 'Custom periods',
-    custom_period_info: "Select a custom period"
+    custom_period_info: "Select a custom period",
+    sliding_periods: 'Sliding periods'
   }
 };
 

package/HiSelect/HiSelect.js

@@ -185,6 +185,18 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       };
     };
 
+    _this.findRecursively = function (arr, id) {
+      for (var i = 0; i < arr.length; i++) {
+        if (arr[i].id === id) {
+          return arr[i];
+        } else if (arr[i].children && arr[i].children.length) {
+          var found = _this.findRecursively(arr[i].children, id);
+
+          if (found) return found;
+        }
+      }
+    };
+
     _this.buildInputValue = function (options) {
       var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var loading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -204,9 +216,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       } else if (value.length > 1) {
         inputValue = translations.n_items_selected.replace('%s', value.length);
       } else if (value.length === 1) {
-        var item = options.find(function (o) {
-          return o.id === value[0];
-        });
+        var item = _this.findRecursively(options, value[0]);
 
         if (item === undefined) {
           inputValue = translations.one_item_selected;
@@ -282,7 +292,16 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       }
     };
 
-    _this.handleClick = function () {
+    _this.handleClick = function (event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (event.type === "keydown") {
+          return;
+        }
+      }
+
       if (_this.state.open) {
         _this.handleClose();
       } else if (_this.props.alert && !_this.state.alertOpen) {
@@ -409,8 +428,9 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else if (key === 'space' && event.target !== _this.searchField) {
           event.preventDefault();
+          event.stopPropagation();
 
-          _this.handleClick();
+          _this.handleClick(event);
         } else if (key === 'tab') {
           _this.handleClose();
         }

package/HiSelectableList/HiSelectableList.js

@@ -27,6 +27,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));
+
 var _List = _interopRequireDefault(require("@material-ui/core/List"));
 
 var _styles = require("@material-ui/core/styles");
@@ -57,6 +59,23 @@ var styles = function styles(theme) {
     }
   };
 };
+
+exports.styles = styles;
+
+var findSelectedItemParent = function findSelectedItemParent(arr, id) {
+  if (id) {
+    var res = arr.find(function (p) {
+      var _p$children;
+
+      return (_p$children = p.children) === null || _p$children === void 0 ? void 0 : _p$children.map(function (o) {
+        return o.id;
+      }).includes(id);
+    });
+    if (res) return res.id;
+  }
+
+  return null;
+};
 /**
  * Construit une liste d'item sélectionnable (avec checkbox)
  * - la navigation au clavier est gérée par l'event KeyDown
@@ -64,27 +83,28 @@ var styles = function styles(theme) {
  */
 
 
-exports.styles = styles;
-
 var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HiSelectableList, _React$PureComponent);
 
   var _super = _createSuper(HiSelectableList);
 
-  function HiSelectableList() {
+  function HiSelectableList(props) {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiSelectableList);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this);
 
     _this.handleSelect = function (item) {
       return function (event) {
-        _this.props.onSelect(event, item);
+        if (_this.props.collapseParent && item.children) {
+          _this.setState(function (prevState) {
+            return {
+              openedParent: prevState.openedParent === item.id ? null : item.id
+            };
+          });
+        } else {
+          _this.props.onSelect(event, item);
+        }
       };
     };
 
@@ -125,7 +145,8 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
           onKeyUp = _this$props.onKeyUp,
           suggestionFocusIndex = _this$props.suggestionFocusIndex,
           classes = _this$props.classes,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes"]);
+          noPadding = _this$props.noPadding,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes", "noPadding"]);
 
       if (sort && item.children) {
         item.children.sort(_this.compareItem);
@@ -156,7 +177,7 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
         hideCheckbox: hideCheckbox,
         hoverIcon: hoverIcon,
         icon: icon,
-        level: level,
+        level: noPadding ? 0 : level,
         onSelect: item.selectable !== false ? _this.handleSelect(item) : undefined,
         onKeyDown: item.selectable !== false ? onKeyDown : undefined,
         onKeyUp: onKeyUp,
@@ -165,12 +186,23 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
         item: item,
         classes: {
           listItem: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.suggestionFocus, index === suggestionFocusIndex))
-        }
-      }, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
+        },
+        collapseHeader: _this.props.collapseParent && item.children && item.children.length > 0,
+        opened: _this.state.openedParent === item.id
+      }, item)), item.children && item.children.length > 0 && (_this.props.collapseParent && level === 0 ? /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+        id: "group-".concat(item.id),
+        in: _this.state.openedParent === item.id,
+        timeout: "auto",
+        unmountOnExit: true
+      }, item.children.filter(function (subItem) {
         return !(subItem.displayed === false);
       }).map(function (subItem) {
         return _this.buildRecursiveListItem(subItem, index, level + 1);
-      }));
+      })) : item.children.filter(function (subItem) {
+        return !(subItem.displayed === false);
+      }).map(function (subItem) {
+        return _this.buildRecursiveListItem(subItem, index, level + 1);
+      })));
 
       if (lazy) {
         return /*#__PURE__*/_react.default.createElement(_reactLazyload.default, {
@@ -208,6 +240,20 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
       return (0, _helpers.foldAccents)(a.label.toString().toLowerCase()) > (0, _helpers.foldAccents)(b.label.toString().toLowerCase()) ? 1 : -1;
     };
 
+    _this.state = {};
+
+    if (props.collapseParent) {
+      if (props.selectedItemIdList[0]) {
+        _this.state = {
+          openedParent: findSelectedItemParent(props.itemList, props.selectedItemIdList[0])
+        };
+      } else {
+        _this.state = {
+          openedParent: props.itemList[0].id
+        };
+      }
+    }
+
     return _this;
   }
 
@@ -289,7 +335,8 @@ HiSelectableList.defaultProps = {
   lazy: true,
   selectedItemIdList: [],
   sort: false,
-  sortAppendList: ['_all']
+  sortAppendList: ['_all'],
+  collapseParent: false
 };
 
 var _default = (0, _styles.withStyles)(styles, {

package/HiSelectableList/HiSelectableListItem.js

@@ -39,6 +39,10 @@ var _HiLoader = _interopRequireDefault(require("../HiLoader"));
 
 var _helpers = require("../utils/helpers");
 
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+
+var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
+
 var useItemLabelStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     label: {
@@ -57,7 +61,8 @@ function ItemLabel(props) {
   var color = props.color,
       label = props.label,
       labelHighlight = props.labelHighlight,
-      selected = props.selected;
+      selected = props.selected,
+      title = props.title;
   var classes = useItemLabelStyles(props);
 
   if (labelHighlight) {
@@ -90,7 +95,7 @@ function ItemLabel(props) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.label,
-    title: label
+    title: title || label
   }, label);
 }
 
@@ -123,16 +128,20 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         }
       },
       '&:focus': {
-        '&:not($disabled):not($pinned)': {
+        '&:not($disabled):not($pinned):not($collapseHeader)': {
           backgroundColor: theme.palette.action.hover
         },
         outline: 'none'
+      },
+      '&$collapseHeader': {
+        minHeight: 32,
+        lineHeight: "32px"
       }
     },
     listItemWithoutSecondaryInline: {},
     listItemInlineWithInfoWithoutSecondary: {},
     listItemHover: {
-      '&:hover:not($disabled):not($pinned)': {
+      '&:hover:not($disabled):not($pinned):not($collapseHeader)': {
         backgroundColor: theme.palette.action.hover,
         fontWeight: theme.typography.fontWeightMedium
       }
@@ -154,6 +163,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       display: 'inherit',
       backgroundColor: theme.palette.background3
     },
+    collapseHeader: {
+      zIndex: 1,
+      display: 'inherit',
+      backgroundColor: theme.palette.background3
+    },
     thin: {
       fontWeight: theme.typography.fontWeightLight
     },
@@ -241,7 +255,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     infosInlineWithoutSecondary: {},
     infosWithSecondaryInline: {},
-    infosWithoutSecondaryInline: {}
+    infosWithoutSecondaryInline: {},
+    rightIcon: {
+      position: "absolute",
+      right: 12,
+      top: 8
+    }
   };
 });
 /**
@@ -251,6 +270,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 
 exports.useStyles = useStyles;
 
+var _ref2 = /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null);
+
+var _ref3 = /*#__PURE__*/_react.default.createElement(_ArrowRight.default, null);
+
 function HiSelectableListItem(props) {
   var _classNames, _classNames3, _classNames4;
 
@@ -273,12 +296,15 @@ function HiSelectableListItem(props) {
       labelHighlight = props.labelHighlight,
       paddingLeft = props.paddingLeft,
       pinned = props.pinned,
+      collapseHeader = props.collapseHeader,
       secondaryInline = props.secondaryInline,
       secondaryLabel = props.secondaryLabel,
       thin = props.thin,
+      title = props.title,
       type = props.type,
       color = props.color,
-      item = props.item;
+      item = props.item,
+      opened = props.opened;
   var classes = useStyles(props);
   var ref = (0, _react.useRef)(null);
   var isHovering = !!hoverIcon ? (0, _reactUse.useHoverDirty)(ref) : false;
@@ -309,7 +335,7 @@ function HiSelectableListItem(props) {
     displayedIcon = icon;
   }
 
-  var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+  var ListItemComponentName = pinned || collapseHeader ? _ListSubheader.default : _ListItem.default;
   var itemIcon;
 
   if (displayedIcon) {
@@ -336,14 +362,14 @@ function HiSelectableListItem(props) {
     classes: {
       root: classes.root
     },
-    className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
+    className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.collapseHeader, collapseHeader), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && typeof info !== "undefined" && !secondaryLabel), _classNames)),
     disabled: disabled,
     onClick: !disabled ? onSelect : undefined,
     style: {
       paddingLeft: "".concat(paddingLeft + level * 32, "px")
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
+    className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && typeof info === "undefined"))
   }, !hideCheckbox && !pinned && /*#__PURE__*/_react.default.createElement(_HiCheckbox.default, {
     tabIndex: 0,
     classes: {
@@ -374,12 +400,15 @@ function HiSelectableListItem(props) {
     color: color,
     label: label,
     labelHighlight: labelHighlight,
-    selected: selected
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+    selected: selected,
+    title: title
+  }), collapseHeader && /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.rightIcon
+  }, opened ? _ref2 : _ref3))), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
   }, !!secondaryLabel && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
-  }, secondaryLabel), !!info && /*#__PURE__*/_react.default.createElement("span", {
+  }, secondaryLabel), typeof info !== "undefined" && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.info)
   }, info)));
 }
@@ -396,7 +425,8 @@ HiSelectableListItem.defaultProps = {
   pinned: false,
   secondaryInline: true,
   selected: false,
-  thin: false
+  thin: false,
+  opened: false
 };
 var _default = HiSelectableListItem;
 exports.default = _default;

package/HiSwitch/HiSwitch.js

@@ -21,6 +21,8 @@ var _SwitchBase = _interopRequireDefault(require("@material-ui/core/internal/Swi
 
 var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
 var _helpers = require("../utils/helpers");
 
 var _styles = require("@material-ui/core/styles");
@@ -83,6 +85,9 @@ var styles = function styles(theme) {
         opacity: theme.palette.type === 'light' ? 0.12 : 0.1
       }
     },
+    iconNotChecked: {
+      color: "#CBCBCB"
+    },
     iconChecked: {},
     iconCheckedPrimary: {
       backgroundColor: theme.palette.primary.main,
@@ -165,9 +170,13 @@ function HiSwitch(props) {
       disabled = props.disabled,
       other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "checked", "color", "disabled"]);
   var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
-  var iconClass = (0, _classnames.default)(classes.icon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.iconChecked, checked), (0, _defineProperty2.default)(_classNames, classes.iconCheckedNeutral, !disabled && checked && !isHiColor), (0, _defineProperty2.default)(_classNames, classes["iconChecked".concat((0, _helpers.capitalize)(color))], !disabled && checked && isHiColor), (0, _defineProperty2.default)(_classNames, classes.iconDisabled, disabled), _classNames));
+  var iconClass = (0, _classnames.default)(classes.icon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.iconNotChecked, !checked), (0, _defineProperty2.default)(_classNames, classes.iconChecked, checked), (0, _defineProperty2.default)(_classNames, classes.iconCheckedNeutral, !disabled && checked && !isHiColor), (0, _defineProperty2.default)(_classNames, classes["iconChecked".concat((0, _helpers.capitalize)(color))], !disabled && checked && isHiColor), (0, _defineProperty2.default)(_classNames, classes.iconDisabled, disabled), _classNames));
+
+  var icon = /*#__PURE__*/_react.default.createElement(_Close.default, {
+    className: iconClass
+  });
 
-  var icon = /*#__PURE__*/_react.default.createElement(_Check.default, {
+  var checkedIcon = /*#__PURE__*/_react.default.createElement(_Check.default, {
     className: iconClass
   });
 
@@ -181,7 +190,7 @@ function HiSwitch(props) {
       checked: isHiColor && !disabled ? classes["checked".concat((0, _helpers.capitalize)(color))] : classes.checkedNeutral,
       disabled: classes.disabled
     },
-    checkedIcon: icon,
+    checkedIcon: checkedIcon,
     checked: checked,
     disabled: disabled,
     inputProps: {