@hipay/hipay-material-ui 3.7.4 → 3.7.6

package/HiDatePicker/HiDatePicker.js

@@ -263,7 +263,8 @@ var HiDatePicker = /*#__PURE__*/function (_React$Component) {
           translations = _this$props.translations,
           value = _this$props.value,
           hideOnDayClick = _this$props.hideOnDayClick,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "format", "locale", "minimumDate", "onReset", "translations", "value", "hideOnDayClick"]);
+          HiInputProps = _this$props.HiInputProps,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "format", "locale", "minimumDate", "onReset", "translations", "value", "hideOnDayClick", "HiInputProps"]);
       var currentMonth = this.state.currentMonth;
       var today = (0, _momentTimezone.default)();
       var effectiveDisabledDays = (0, _objectSpread2.default)({}, disablePastDays && {
@@ -312,6 +313,11 @@ var HiDatePicker = /*#__PURE__*/function (_React$Component) {
           onSubmit: this.props.onSubmit
         }
       });
+
+      if (typeof HiInputProps !== "undefined") {
+        inputProps.HiInputProps = (0, _objectSpread2.default)({}, inputProps.HiInputProps, {}, HiInputProps);
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: classes.root,
         onKeyDown: this.handleKeyDown()

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: key === 1,
+          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/HiDialog/HiDialog.js

@@ -52,7 +52,8 @@ var HiDialog = function HiDialog(props) {
       id = props.id,
       onClose = props.onClose,
       open = props.open,
-      title = props.title;
+      title = props.title,
+      closeBtn = props.closeBtn;
   var classes = useStyles(props);
   var handleClose = (0, _react.useCallback)(function () {
     if (onClose) {
@@ -68,9 +69,9 @@ var HiDialog = function HiDialog(props) {
     open: open
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.header
-  }, /*#__PURE__*/_react.default.createElement("p", {
+  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement("p", {
     className: classes.title
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
+  }, title) : title, closeBtn !== false && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.closeDiv
   }, /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
     id: "close-dialog-btn",

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,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       }
     };
 
-    _this.handleClick = function () {
+    _this.handleClick = function (event) {
       if (_this.state.open) {
         _this.handleClose();
       } else if (_this.props.alert && !_this.state.alertOpen) {
@@ -368,7 +378,9 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (_this.inputEl) {
-        _this.inputEl.focus();
+        setTimeout(function () {
+          _this.inputEl.focus();
+        }, 100);
       }
     };
 
@@ -396,7 +408,16 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       var key = (0, _keycode.default)(event);
 
       if (!_this.state.alertOpen) {
-        if (key === 'esc' && _this.state.open) {
+        if (event.target === _this.inputEl && _this.state.open && key === 'down') {
+          // Focus on list 1st item
+          event.stopPropagation();
+          event.preventDefault();
+          var firstLi = document.querySelector("#".concat(_this.props.id, " + div ul > li"));
+
+          if (!!firstLi) {
+            firstLi.focus();
+          }
+        } else if (key === 'esc' && _this.state.open) {
           event.stopPropagation();
           event.preventDefault();
 
@@ -409,10 +430,32 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else if (key === 'space' && event.target !== _this.searchField) {
           event.preventDefault();
+        } else if (key === 'tab' && (_this.state.open || _this.state.alertOpen)) {
+          event.stopPropagation();
 
-          _this.handleClick();
-        } else if (key === 'tab') {
           _this.handleClose();
+        } else if (key === "down" && event.target.id.includes("_subheader")) {
+          // Focus on parent, next item is child
+          if (document.querySelector("#group-".concat(event.target.id, " li:nth-child(1)"))) {
+            document.querySelector("#group-".concat(event.target.id, " li:nth-child(1)")).focus();
+          }
+        } else if (key === "down" && !event.target.nextSibling) {
+          var _document$getElementB, _document$getElementB2;
+
+          // Focus on parent, next item is child
+          if ((_document$getElementB = document.getElementById(event.target.dataset.group)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.nextSibling) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.nextSibling) {
+            document.getElementById(event.target.dataset.group).nextSibling.nextSibling.focus();
+          }
+        } else if (key === "up") {
+          if (event.target.previousSibling === null && !!event.target.dataset.group) {
+            // Previous item is parent item
+            document.getElementById(event.target.dataset.group).focus();
+          } else if (!!event.target.previousSibling && !event.target.dataset.group) {
+            // On parent, go to previous (last) child
+            if (event.target.previousSibling.querySelector("li:last-child")) {
+              event.target.previousSibling.querySelector("li:last-child").focus();
+            }
+          }
         }
       }
     };
@@ -448,9 +491,11 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           value = _this$props2.value;
 
       if (!multiple) {
-        // single value
-        _this.handleClose();
-
+        // This is a fix to prevent select open after select => TODO improve ?
+        setTimeout(function () {
+          // single value
+          _this.handleClose();
+        }, 1);
         onChange(event, item.id, item);
       } else if (hasAll && item.id === '_all') {
         if (value.length === options.length) {

package/HiSelect/HiSelectInput.js

@@ -13,8 +13,6 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
@@ -167,19 +165,22 @@ var HiSelectInput = /*#__PURE__*/function (_React$PureComponent) {
 
   var _super = _createSuper(HiSelectInput);
 
-  function HiSelectInput(props) {
+  function HiSelectInput() {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiSelectInput);
-    _this = _super.call(this, props);
+
+    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.handleKeyDown = function (event) {
       var key = (0, _keycode.default)(event);
 
       if (_this.props.onKeyDown) {
         _this.props.onKeyDown(event);
-      } else if (key === 'down' || key === 'up') {
-        _this.props.onClick();
       } else if (key === 'enter' && _this.props.onSubmit) {
         event.preventDefault();
 
@@ -234,11 +235,6 @@ var HiSelectInput = /*#__PURE__*/function (_React$PureComponent) {
       }
     };
 
-    _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/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");
@@ -54,9 +56,32 @@ var styles = function styles(theme) {
     suggestionFocus: {
       backgroundColor: theme.palette.action.hover,
       fontWeight: theme.typography.fontWeightMedium
+    },
+    parentRoot: {
+      "&:focus": {
+        backgroundColor: theme.palette.action.hover,
+        fontWeight: theme.typography.fontWeightMedium
+      }
     }
   };
 };
+
+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 +89,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, props);
 
     _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);
+        }
       };
     };
 
@@ -111,6 +137,7 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
 
     _this.buildRecursiveListItem = function (item, index) {
       var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var group = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
       var _this$props = _this.props,
           checkedIcon = _this$props.checkedIcon,
           disabled = _this$props.disabled,
@@ -125,7 +152,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);
@@ -148,6 +176,12 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
         }
       }));
 
+      var handleKeyDown = function handleKeyDown() {
+        if (onKeyDown) {
+          onKeyDown();
+        }
+      };
+
       var itemComponent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
         key: item.id
       }, /*#__PURE__*/_react.default.createElement(_HiSelectableListItem.default, (0, _extends2.default)({}, others, {
@@ -156,21 +190,34 @@ 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,
+        onKeyDown: item.selectable !== false ? handleKeyDown : undefined,
         onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
         ,
         item: item,
         classes: {
+          root: classes.parentRoot,
           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,
+        group: group
+      }, 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.id);
+      })) : 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 +255,19 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
       return (0, _helpers.foldAccents)(a.label.toString().toLowerCase()) > (0, _helpers.foldAccents)(b.label.toString().toLowerCase()) ? 1 : -1;
     };
 
+    var openedParent;
+
+    if (props.collapseParent) {
+      if (props.selectedItemIdList[0]) {
+        openedParent = findSelectedItemParent(props.itemList, props.selectedItemIdList[0]);
+      } else {
+        openedParent = props.itemList[0].id;
+      }
+    }
+
+    _this.state = {
+      openedParent: openedParent
+    };
     return _this;
   }
 
@@ -289,7 +349,8 @@ HiSelectableList.defaultProps = {
   lazy: true,
   selectedItemIdList: [],
   sort: false,
-  sortAppendList: ['_all']
+  sortAppendList: ['_all'],
+  collapseParent: false
 };
 
 var _default = (0, _styles.withStyles)(styles, {