@hipay/hipay-material-ui 1.0.0-beta.23 → 1.0.0-beta.25

package/HI-CHANGELOG.md

@@ -1,58 +1,41 @@
-## HEAD
+<a name="1.0.0-beta.25"></a>
+# 1.0.0-beta.25 (2018-08-16)
 
-Changes. Changes everywhere!
 
-## 1.0.0-beta.10
-###### *17 mai 2018*
+### Bug Fixes
 
-- Correction du HiSelect
+* **BodyRow:** add locale vars to child BodyRow ([9252382](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9252382))
+* **CellDate:** Handle date with moment & use prop format ([7fa8bf5](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7fa8bf5))
+* **HeaderCell:** set sort icons always on the right of the title ([0704619](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0704619))
+* **HiDateRangePicker:** Keep focus on change dateTo if user types directly into the input to see date selection into calendar ([e998c60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e998c60))
+* **HiDateRangePicker:** Reset date range picker input to ([b1a66f3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1a66f3))
+* **HiDateRangeSelector:** UPD select value from parent component (defaultPreset property) ([90bb994](https://gitlab.hipay.org/backend/hipay-material-ui/commit/90bb994))
+* **HiInput:** Keep focus on reset HiInput ([a84edab](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a84edab))
+* **HiPins:** Add theme business primary color as default background color for HiPins and fix line-height  ([23aa2d9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/23aa2d9))
+* **HiSelect:** Display option label instead of all for selects with 1 option ([e47574a](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e47574a))
+* **HiSelect:** Don't try to display unique selected options item when still loading ([116a72a](https://gitlab.hipay.org/backend/hipay-material-ui/commit/116a72a))
+* **HiSelectableList:** item displayed only if item.displayed != false ([e65b865](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e65b865))
+* **HiTable:** Add default translations object to HeaderCell ([4ed766f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4ed766f))
+* **HiTable:** Performance optimization ([3ca60d3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/3ca60d3))
+* **HiTable:** remove anchorEls from state to remove circular structure in JSON compares ([c064ce9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c064ce9))
+* **SelectInput:** selected choice label not overflowing on right arrow of HiSelect ([a7d7058](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a7d7058))
 
-### Breaking change
 
-- N/A
+### Features
 
-#### Component Fixes / Enhancements
+* **HiDateRangePicker:** Add onBlur prop function to handle date errors properly ([df79494](https://gitlab.hipay.org/backend/hipay-material-ui/commit/df79494))
+* **HiTableContextMenu:** handle hide lookup/exclude menu item for each column ([03e00cb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/03e00cb))
+* **workflow:** Add HI-CHANGELOG generation from commits ([edee0f6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/edee0f6))
 
-- [HiSelect] Ajout d'un param staticPosition dans le HiSelect pour afficher dans une div plutot qu'une popper
-- [HiSelect] Fermeture du select au click sur le bouton
-- [SelectInput] cursor pointer si noButton
-- [HiDateRangeSelector] Suppression du last 24h
 
-## 1.0.0-beta.4
-###### *06 avril 2018*
 
-- Corrections de styles sur quelques composants
-- Fix sur le composant HiSelect avec une value vide
+<a name="1.0.0-beta.24"></a>
+# 1.0.0-beta.24 (2018-07-26)
 
-### Breaking change
 
-- N/A
+### Features
 
-#### Component Fixes / Enhancements
+* **workflow:** Add HI-CHANGELOG generation from commits ([edee0f6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/edee0f6))
 
-- [HiTopBar] Ajout d'une props refButtons poutr récupérer la div contenant les boutons "menu" et "back"
-- [HiSelect] Gestion d'une value vide
-- [HiSelect] Ajout du focus sur l'élement SelectInput à la fermeture du select
-- [HiSelectField] Ajout de la props className
-- [HiSuggestSelectField] Ajout de la props className
-- [HiSuggestSelect] Gestion du focus et du open des suggestions
-- [SelectInput] Suppression du soulignage bleu au hover quand champs en erreur
-- [HiFormControl] Stop de l'event click sur error pour ne pas ouvrir le select
 
-## 1.0.0-beta.3
-###### *28 mars 2018*
 
-- Ajout d'un CHANGELOG HiPay ! (HI-CHANGELOG.md)
-- Corrections de styles sur quelques composants
-
-### Breaking change
-
-- [HiTopBar] Ajout d'une props "searchInput" obligatoire
-
-#### Component Fixes / Enhancements
-
-- [HiTopBar] Ajout du style "overflow: 'inherit'" sur le Collapse si pas "hideable", afin de ne pas cacher les suggestions
-- [HiTopBar] Gestion du focus en props plutôt qu'en state
-- [HiTopBar] Ajout d'une props "searchInput" obligatoire
-- [HiChipSwitch] Ajout d'un title sur la sélection
-- [HiDateRangePicker] Correction du focus

package/HiChip/HiChip.js

@@ -58,14 +58,24 @@ var styles = exports.styles = function styles(theme) {
             },
             '&$deletable': {
                 paddingRight: 4
+            },
+            '&$leftIccon': {
+                paddingLeft: 4
             }
         }),
         leftNavigation: {},
         rightNavigation: {},
         deletable: {},
+        leftIccon: {},
         icon: {
             marginRight: 4
         },
+        iconClickable: {
+            cursor: 'pointer',
+            '&:hover, &:focus': {
+                color: theme.palette.business.primary.normal
+            }
+        },
         eraseIcon: {
             // Remove grey highlight
             WebkitTapHighlightColor: 'transparent',
@@ -120,14 +130,20 @@ function HiChip(props) {
         onPrevious = props.onPrevious,
         onNext = props.onNext,
         onDelete = props.onDelete,
-        prefix = props.prefix;
+        prefix = props.prefix,
+        onIconClick = props.onIconClick,
+        titleDelete = props.titleDelete,
+        titleIcon = props.titleIcon,
+        titleImg = props.titleImg,
+        titleNext = props.titleNext,
+        titlePrevious = props.titlePrevious;
 
 
     return _react2.default.createElement(
         'div',
         {
             id: id,
-            className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), _classNames))
+            className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty3.default)(_classNames, classes.leftIccon, icon), _classNames))
         },
         prefix && _react2.default.createElement(
             'span',
@@ -135,13 +151,20 @@ function HiChip(props) {
             prefix,
             ' : '
         ),
-        img && _react2.default.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 16 }),
+        img && _react2.default.createElement('img', { className: classes.badge, src: img, alt: img, title: titleImg }),
+        icon && _react2.default.createElement(_HiIconBuilder2.default, {
+            className: (0, _classnames2.default)(classes.icon, (0, _defineProperty3.default)({}, classes.iconClickable, onIconClick)),
+            icon: icon,
+            size: 16,
+            onClick: onIconClick,
+            titleAccess: titleIcon
+        }),
         onPrevious && _react2.default.createElement(_HiIconBuilder2.default, {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 16
+            size: 16,
+            titleAccess: titlePrevious
         }),
         _react2.default.createElement(
             'span',
@@ -152,13 +175,15 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 16
+            size: 16,
+            titleAccess: titleNext
         }),
         onDelete && _react2.default.createElement(_HiIconBuilder2.default, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 16
+            size: 16,
+            titleAccess: titleDelete
         })
     );
 }
@@ -188,6 +213,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au clic sur l'icon close si cancelable = true
      */
     onDelete: _propTypes2.default.func,
+    /**
+     * Fonction de callback au clic sur l'icon à gauche
+     */
+    onIconClick: _propTypes2.default.func,
     /**
      * Fonction de callback au clic sur l'icon next
      */
@@ -195,7 +224,31 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Fonction de callback au clic sur l'icon previous
      */
-    onPrevious: _propTypes2.default.func
+    onPrevious: _propTypes2.default.func,
+    /**
+     * Préfixe dans le HiChip
+     */
+    prefix: _propTypes2.default.string,
+    /**
+     * Titre de l'icône supprimer
+     */
+    titleDelete: _propTypes2.default.string,
+    /**
+     * Titre de l'icône
+     */
+    titleIcon: _propTypes2.default.string,
+    /**
+     * Titre de la balise img
+     */
+    titleImg: _propTypes2.default.string,
+    /**
+     * Titre de la navigation suivante
+     */
+    titleNext: _propTypes2.default.string,
+    /**
+     * Titre de la navigation précédente
+     */
+    titlePrevious: _propTypes2.default.string
 } : {};
 
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiChip' })(HiChip);

package/HiDatePicker/HiDateRangePicker.js

@@ -112,6 +112,7 @@ var HiDateRangePicker = function (_React$Component) {
 
         _this.handleInputChange = function (inputName) {
             return function (event) {
+                _this.event = event;
                 _this.props.onChange(inputName, event.target.value);
             };
         };
@@ -122,6 +123,15 @@ var HiDateRangePicker = function (_React$Component) {
             };
         };
 
+        _this.handleDayPickerBlur = function (name) {
+            return function () {
+                _this.setState({ focusedInput: '' });
+                if (_this.props.onBlur) {
+                    _this.props.onBlur(name);
+                }
+            };
+        };
+
         _this.state = {
             fromCurrentMonth: props.from ? props.from : new Date(),
             toCurrentMonth: props.to ? props.to : new Date(),
@@ -197,11 +207,7 @@ var HiDateRangePicker = function (_React$Component) {
         value: function handleReset(name) {
             var _this3 = this;
 
-            if (name === 'from') {
-                this.handleCurrentMonthChange(name, new Date());
-            } else {
-                this.handleCurrentMonthChange(name, this.props.from);
-            }
+            this.handleCurrentMonthChange(name, new Date());
 
             this.timeout = setTimeout(function () {
                 if (_this3.props.onReset) {
@@ -222,7 +228,12 @@ var HiDateRangePicker = function (_React$Component) {
                         if (name === 'from' && this.toInput) {
                             this.toInput.getInput().focus();
                         } else if (name === 'to') {
-                            document.activeElement.blur();
+                            if (typeof this.event === 'undefined' || this.event && this.event.type !== 'change') {
+                                // trigger blur only if user clicks on date into calendar
+                                // else keep focus to see day selection into calendar
+                                document.activeElement.blur();
+                            }
+                            delete this.event;
                         }
                     }
                 } else {
@@ -350,11 +361,6 @@ var HiDateRangePicker = function (_React$Component) {
                 document.activeElement.blur();
             }
         }
-    }, {
-        key: 'handleDayPickerBlur',
-        value: function handleDayPickerBlur() {
-            this.setState({ focusedInput: '' });
-        }
     }, {
         key: 'openPanel',
         value: function openPanel(name, panel) {
@@ -635,7 +641,7 @@ var HiDateRangePicker = function (_React$Component) {
                     {
                         className: classes.fromInput,
                         onFocus: this.handleDayPickerFocus('from'),
-                        onBlur: this.handleDayPickerBlur
+                        onBlur: this.handleDayPickerBlur('from')
                     },
                     _react2.default.createElement(
                         'div',
@@ -663,7 +669,7 @@ var HiDateRangePicker = function (_React$Component) {
                     {
                         className: toClass,
                         onFocus: this.handleDayPickerFocus('to'),
-                        onBlur: this.handleDayPickerBlur
+                        onBlur: this.handleDayPickerBlur('to')
                     },
                     _react2.default.createElement(_DayPickerInput2.default, {
                         ref: function ref(el) {
@@ -762,10 +768,18 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     minimumDate: _propTypes2.default.instanceOf(Date),
     /**
      * Callback à la sélection d'une date
+     * @param {string} nom de l'input
+     */
+    onBlur: _propTypes2.default.func,
+    /**
+     * Callback à la sélection d'une date
+     * @param {string} nom du champs
+     * @param {string} nouvelle valeur du champs
      */
     onChange: _propTypes2.default.func,
     /**
      * Callback au reset de l'input
+     * @param {string} nom du champs réinitialisé
      */
     onReset: _propTypes2.default.func,
     /**

package/HiDatePicker/HiDateRangeSelector.js

@@ -100,13 +100,13 @@ function buildDateRangeOptionByKey(key, t, format) {
             label = t.current_week;
             from = (0, _moment2.default)().startOf('week');
             to = (0, _moment2.default)();
-            info = t.week + ' ' + from.format('w') + ', \n ' + from.format(format) + ' ' + t.to_now;
+            info = '' + t.short_week + from.format('w') + ', \n ' + from.format(format) + ' ' + t.to_now;
             break;
         case 'pw':
             label = t.previous_week;
             from = (0, _moment2.default)().subtract(1, 'week').startOf('week');
             to = (0, _moment2.default)().subtract(1, 'week').endOf('week');
-            info = t.week + ' ' + from.format('w') + ', ' + from.format(format) + ' ' + t.to + ' ' + to.format(format);
+            info = '' + t.short_week + from.format('w') + ', ' + from.format(format) + ' ' + t.to + ' ' + to.format(format);
             break;
         case 'cm':
             label = t.current_month;
@@ -308,6 +308,16 @@ var HiDateRangeSelector = function (_React$Component) {
                 )
             );
         }
+    }], [{
+        key: 'getDerivedStateFromProps',
+        value: function getDerivedStateFromProps(props, state) {
+            if (props.defaultPreset && props.returnSelectValue) {
+                return {
+                    selectedPreset: props.defaultPreset
+                };
+            }
+            return null;
+        }
     }]);
     return HiDateRangeSelector;
 }(_react2.default.Component);
@@ -327,6 +337,7 @@ HiDateRangeSelector.defaultProps = {
         month: 'Month',
         quarter: 'Quarter',
         week: 'Week',
+        short_week: 'W',
         year: 'Year',
         days: 'days',
         custom_period: 'Custom Period',

package/HiForm/HiInput.js

@@ -219,6 +219,7 @@ var HiInput = function (_React$PureComponent) {
             if (this.props.onReset) {
                 this.props.onReset();
             }
+            this.inputElement.focus();
         }
     }, {
         key: 'handleBlur',

package/HiForm/HiPasswordField.js

@@ -63,9 +63,9 @@ var styles = exports.styles = function styles(theme) {
     return {
         inputPassword: {
             fontWeight: 'bolder',
-            fontFamily: 'Verdana, sans-serif',
+            fontFamily: 'inherit',
             letterSpacing: '4px',
-            fontSize: 25
+            fontSize: '1.6rem'
         }
     };
 };

package/HiPins/HiPins.js

@@ -37,7 +37,7 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-block',
             padding: '0 9px',
             height: 16,
-            lineHeight: '16px',
+            lineHeight: '18px',
             minWidth: 25,
             textAlign: 'center',
             borderRadius: '45px',
@@ -64,13 +64,15 @@ var styles = exports.styles = function styles(theme) {
 
 function HiPins(props) {
     var classes = props.classes,
+        theme = props.theme,
         children = props.children,
-        color = props.color,
+        _props$color = props.color,
+        color = _props$color === undefined ? props.theme.palette.business.primary.normal : _props$color,
         onClick = props.onClick,
         className = props.className;
 
 
-    var textColor = (0, _colorManipulator.getContrastedTextColor)(color, props.theme.palette.neutral.dark, '#FFF');
+    var textColor = (0, _colorManipulator.getContrastedTextColor)(color, theme.palette.neutral.dark, '#FFF');
 
     var divProps = {
         style: { backgroundColor: color, color: textColor }
@@ -92,7 +94,7 @@ HiPins.propTypes = process.env.NODE_ENV !== "production" ? {
     children: _propTypes2.default.node.isRequired,
     classes: _propTypes2.default.object.isRequired,
     className: _propTypes2.default.string,
-    color: _propTypes2.default.string.isRequired,
+    color: _propTypes2.default.string,
     onClick: _propTypes2.default.func
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiPins' })(HiPins);

package/HiSelect/HiSelect.js

@@ -314,11 +314,13 @@ var HiSelect = function (_React$PureComponent) {
                 id = _props.id,
                 placeholder = _props.placeholder,
                 staticPosition = _props.staticPosition,
-                pinnedItem = _props.pinnedItem;
+                pinnedItem = _props.pinnedItem,
+                hasAll = _props.hasAll;
             var _state = this.state,
                 open = _state.open,
                 suggestions = _state.suggestions,
-                focused = _state.focused;
+                focused = _state.focused,
+                dynamic = _state.dynamic;
 
 
             var display = '';
@@ -342,11 +344,11 @@ var HiSelect = function (_React$PureComponent) {
                 });
             }
 
-            if (this.state.dynamic && selectedIdList.length === 1) {
+            if ((dynamic || loading) && selectedIdList.length === 1) {
                 display = translations.one_item_selected.replace('%s', selectedIdList.length);
-            } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
+            } else if ((this.state.nbOptions !== selectedIdList.length || !hasAll) && selectedIdList.length > 1) {
                 display = translations.n_items_selected.replace('%s', selectedIdList.length);
-            } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions >= 1) {
+            } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions > 1) {
                 display = translations.all;
             } else if (selectedIdList.length === 1) {
                 if (type !== 'icon') {

package/HiSelect/SelectInput.js

@@ -67,7 +67,8 @@ var styles = exports.styles = function styles(theme) {
             width: '100%',
             height: 40,
             maxWidth: 500,
-            justifyContent: 'flex-start',
+            display: 'flex',
+            justifyContent: 'center',
             padding: 8,
             cursor: 'pointer'
         },
@@ -142,18 +143,12 @@ var styles = exports.styles = function styles(theme) {
         label: (0, _extends3.default)({
             whiteSpace: 'nowrap',
             overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            paddingRight: 16
+            textOverflow: 'ellipsis'
         }, theme.typography.body1, {
             display: 'inline-flex',
             width: '100%'
         }),
         icon: {
-            position: 'absolute',
-            display: 'flex',
-            alignItems: 'center',
-            right: 0,
-            height: 40,
             transition: theme.transitions.create(['opacity', 'transform'], {
                 duration: theme.transitions.duration.shorter
             })

package/HiSelectableList/HiSelectableList.js

@@ -112,59 +112,61 @@ var HiSelectableList = function (_React$PureComponent) {
                     _List2.default,
                     { className: classes.root, onKeyDown: this.props.onKeyDown },
                     itemList.map(function (item) {
-                        /**
-                         * Calcul du level de l'item
-                         */
-                        if (hierarchic) {
-                            // On stocke l'id des parents dans un tableau
-                            if (item.parentId && !parents.includes(item.parentId)) {
-                                parents.push(item.parentId);
-                            } else if (item.parentId && parents.includes(item.parentId)) {
-                                // Si l'item n'a pas de parentId ou qu'on l'a déjà stocké :
-                                // Et si le parentId n'est pas le dernier inseré
-                                if (item.parentId !== parents[parents.length - 1]) {
-                                    // On est donc redescendu d'un niveau
-                                    // donc on supprime le dernier parent
-                                    parents.pop();
+                        if (item.displayed !== false) {
+                            /**
+                             * Calcul du level de l'item
+                             */
+                            if (hierarchic) {
+                                // On stocke l'id des parents dans un tableau
+                                if (item.parentId && !parents.includes(item.parentId)) {
+                                    parents.push(item.parentId);
+                                } else if (item.parentId && parents.includes(item.parentId)) {
+                                    // Si l'item n'a pas de parentId ou qu'on l'a déjà stocké :
+                                    // Et si le parentId n'est pas le dernier inseré
+                                    if (item.parentId !== parents[parents.length - 1]) {
+                                        // On est donc redescendu d'un niveau
+                                        // donc on supprime le dernier parent
+                                        parents.pop();
+                                    }
+                                } else if (!item.parentId && parents.length > 0) {
+                                    // Si l'item n'a pas de parent et que le tableau des parent
+                                    // n'est pas vide => on le réinitialise
+                                    parents = [];
                                 }
-                            } else if (!item.parentId && parents.length > 0) {
-                                // Si l'item n'a pas de parent et que le tableau des parent
-                                // n'est pas vide => on le réinitialise
-                                parents = [];
                             }
-                        }
 
-                        /**
-                         * L'élément est-il selectionné ?
-                         */
-                        var selected = false;
-                        if (item.id === '_all') {
-                            selected = allSelected;
-                        } else if (!item.hasChildren) {
-                            selected = selectedIdList.includes(item.id);
-                        } else if (hierarchic && parentItemSelectable) {
-                            selected = hierarchySelected[item.id].length === hierarchy[item.id].length;
-                        }
+                            /**
+                             * L'élément est-il selectionné ?
+                             */
+                            var selected = false;
+                            if (item.id === '_all') {
+                                selected = allSelected;
+                            } else if (!item.hasChildren) {
+                                selected = selectedIdList.includes(item.id);
+                            } else if (hierarchic && parentItemSelectable) {
+                                selected = hierarchySelected[item.id].length === hierarchy[item.id].length;
+                            }
 
-                        return _react2.default.createElement(_HiSelectableListItem2.default, (0, _extends3.default)({
-                            key: item.id,
-                            item: item,
-                            selected: selected,
-                            indeterminate: item.hasChildren && parentItemSelectable ? hierarchySelected[item.id].length > 0 && hierarchySelected[item.id].length !== hierarchy[item.id].length : false,
-                            onSelect: onSelect,
-                            hierarchySelected: hierarchySelected,
-                            parentItemSelectable: parentItemSelectable,
-                            nbChildren: typeof hierarchy !== 'undefined' && typeof hierarchy[item.id] !== 'undefined' ? hierarchy[item.id].length : 0,
-                            hierarchic: hierarchic,
-                            translations: translations,
-                            icon: icon,
-                            parentIcon: parentIcon,
-                            hoverIcon: hoverIcon,
-                            checkedIcon: checkedIcon,
-                            checkbox: checkbox,
-                            level: parents.length,
-                            disabled: disabledIds ? disabledIds.includes(item.id) : false
-                        }, others));
+                            return _react2.default.createElement(_HiSelectableListItem2.default, (0, _extends3.default)({
+                                key: item.id,
+                                item: item,
+                                selected: selected,
+                                indeterminate: item.hasChildren && parentItemSelectable ? hierarchySelected[item.id].length > 0 && hierarchySelected[item.id].length !== hierarchy[item.id].length : false,
+                                onSelect: onSelect,
+                                hierarchySelected: hierarchySelected,
+                                parentItemSelectable: parentItemSelectable,
+                                nbChildren: typeof hierarchy !== 'undefined' && typeof hierarchy[item.id] !== 'undefined' ? hierarchy[item.id].length : 0,
+                                hierarchic: hierarchic,
+                                translations: translations,
+                                icon: icon,
+                                parentIcon: parentIcon,
+                                hoverIcon: hoverIcon,
+                                checkedIcon: checkedIcon,
+                                checkbox: checkbox,
+                                level: parents.length,
+                                disabled: disabledIds ? disabledIds.includes(item.id) : false
+                            }, others));
+                        }
                     })
                 )
             );

package/HiSelectableList/HiSelectableListItem.js

@@ -82,9 +82,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles(theme) {
     return {
         listItem: {
-            padding: 9 + 'px 0px',
+            padding: '9px 0px',
             fontWeight: theme.typography.fontWeightRegular,
-            maxHeight: 40
+            maxHeight: 40,
+            display: 'flex',
+            alignItems: 'flex-start'
         },
         listItemTitle: {
             padding: 9 + 'px 0px',