@hipay/hipay-material-ui 1.0.0-beta.20 → 1.0.0-beta.22

package/HiLoader/HiLoader.js

@@ -30,11 +30,15 @@ function HiLoader(props) {
         loading = props.loading;
 
 
-    return _react2.default.createElement(_reactSpinners.PropagateLoader, {
-        loading: loading,
-        size: 12,
-        color: theme.palette.business.primary.normal
-    });
+    return _react2.default.createElement(
+        'div',
+        { id: 'hi-loader' },
+        _react2.default.createElement(_reactSpinners.PropagateLoader, {
+            loading: loading,
+            size: 12,
+            color: theme.palette.business.primary.normal
+        })
+    );
 }
 
 HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {

package/HiSelect/HiSelect.js

@@ -13,6 +13,10 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -103,7 +107,7 @@ var styles = exports.styles = function styles(theme) {
         },
         popper: {
             width: '100%',
-            zIndex: 11
+            zIndex: 1200
         },
         paper: {
             borderRadius: '0px 2px',
@@ -174,6 +178,11 @@ var HiSelect = function (_React$PureComponent) {
                     valueInOptions = true;
                 }
             });
+            if (!valueInOptions && props.pinnedItem) {
+                if (props.value.indexOf(props.pinnedItem.id) >= 0) {
+                    valueInOptions = true;
+                }
+            }
         }
 
         if (!valueInOptions) {
@@ -303,7 +312,8 @@ var HiSelect = function (_React$PureComponent) {
                 hierarchic = _props.hierarchic,
                 id = _props.id,
                 placeholder = _props.placeholder,
-                staticPosition = _props.staticPosition;
+                staticPosition = _props.staticPosition,
+                pinnedItem = _props.pinnedItem;
             var _state = this.state,
                 open = _state.open,
                 suggestions = _state.suggestions,
@@ -313,6 +323,11 @@ var HiSelect = function (_React$PureComponent) {
             var display = '';
             var selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
 
+            var _suggestions = [].concat((0, _toConsumableArray3.default)(suggestions));
+            if (pinnedItem) {
+                _suggestions = [pinnedItem].concat((0, _toConsumableArray3.default)(suggestions));
+            }
+
             if (this.state.dynamic && selectedIdList.length === 1) {
                 display = translations.one_item_selected.replace('%s', selectedIdList.length);
             } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
@@ -321,9 +336,13 @@ var HiSelect = function (_React$PureComponent) {
                 display = translations.all;
             } else if (selectedIdList.length === 1) {
                 if (type !== 'icon') {
-                    display = options.find(function (o) {
+                    var item = options.find(function (o) {
                         return o.id === selectedIdList[0];
-                    }).label;
+                    });
+                    if (!item && pinnedItem) {
+                        item = pinnedItem;
+                    }
+                    display = item.label;
                 } else {
                     var optionSelected = options.find(function (o) {
                         return o.id === selectedIdList[0];
@@ -380,7 +399,7 @@ var HiSelect = function (_React$PureComponent) {
                         _react2.default.createElement(_HiSelectableList2.default, {
                             type: type,
                             parentItemSelectable: parentItemSelectable,
-                            itemList: suggestions,
+                            itemList: _suggestions,
                             onSelect: this.handleSelect,
                             selectedIdList: selectedIdList,
                             checkbox: checkbox,
@@ -490,7 +509,7 @@ var _initialiseProps = function _initialiseProps() {
             _this3.handleClose();
         } else {
             if (!_this3.props.staticPosition) {
-                document.body.style.overflow = 'hidden';
+                //document.body.style.overflow = 'hidden';
             }
             _this3.setState({ open: true });
             var options = _this3.props.options.slice();
@@ -554,7 +573,7 @@ var _initialiseProps = function _initialiseProps() {
             nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'up');
         } else if (event.key === 'Tab') {
             if (!_this3.props.staticPosition) {
-                document.body.style.overflow = 'auto';
+                //document.body.style.overflow = 'auto';
             }
             _this3.setState({ open: false });
         }
@@ -579,7 +598,7 @@ var _initialiseProps = function _initialiseProps() {
 
     this.handleClose = function () {
         if (!_this3.props.staticPosition) {
-            document.body.style.overflow = 'auto';
+            //document.body.style.overflow = 'auto';
         }
         _this3.setState({
             open: false
@@ -604,10 +623,10 @@ var _initialiseProps = function _initialiseProps() {
         var _props2 = _this3.props,
             multiple = _props2.multiple,
             value = _props2.value,
-            name = _props2.name,
             onChange = _props2.onChange,
             options = _props2.options,
-            hierarchic = _props2.hierarchic;
+            hierarchic = _props2.hierarchic,
+            pinnedItem = _props2.pinnedItem;
         var _state2 = _this3.state,
             hierarchySelected = _state2.hierarchySelected,
             hierarchy = _state2.hierarchy,
@@ -656,8 +675,20 @@ var _initialiseProps = function _initialiseProps() {
                     hiSelected[item.parentId].splice(hiSelected[item.parentId].indexOf(item.id), 1);
                 }
             } else {
-                // item non sélectionné => on le sélectionne
-                if (item.hasChildren !== true) valueList.push(item.id);
+                if (pinnedItem && item.id === pinnedItem.id) {
+                    (0, _keys2.default)(hiSelected).map(function (parentItemId) {
+                        hiSelected[parentItemId] = [];
+                        return true;
+                    });
+                    valueList = [item.id];
+                } else {
+                    // item non sélectionné => on le sélectionne
+                    if (item.hasChildren !== true) valueList.push(item.id);
+
+                    if (pinnedItem && valueList.includes(pinnedItem.id)) {
+                        valueList.splice(valueList.indexOf(pinnedItem.id), 1);
+                    }
+                }
 
                 if (item.hasChildren === true) {
                     // Si item parent => on ajoute tous les enfants
@@ -848,6 +879,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: _propTypes2.default.bool,
+    /**
+     * Item épinglé en début de liste
+     */
+    pinnedItem: _propTypes2.default.object,
     /**
      * Placeholder affiché lorsque le select est fermé
      * Surcharge le placeholder par défaut

package/HiSelect/HiSuggestSelect.js

@@ -186,15 +186,31 @@ var HiSuggestSelect = function (_React$PureComponent) {
 
             var _props = this.props,
                 classes = _props.classes,
-                translations = _props.translations,
                 id = _props.id,
+                showMinLength = _props.showMinLength,
+                showNoResults = _props.showNoResults,
                 onSearch = _props.onSearch,
-                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'translations', 'id', 'onSearch']);
+                translations = _props.translations,
+                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'id', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
             var _state = this.state,
                 focused = _state.focused,
                 options = _state.options;
 
-            var open = !!options.length && focused;
+
+            var optionsShown = options;
+
+            // If no results match
+            if (options.length === 0 && (showNoResults || showMinLength)) {
+                optionsShown = [{
+                    id: '_no_result',
+                    type: 'text',
+                    disabled: true,
+                    centered: true,
+                    checkbox: false,
+                    label: showNoResults ? translations.no_result_match : translations.min_length
+                }];
+            }
+            var open = !!optionsShown.length && focused;
 
             return _react2.default.createElement(
                 'div',
@@ -211,6 +227,7 @@ var HiSuggestSelect = function (_React$PureComponent) {
                         _reactPopper.Target,
                         null,
                         _react2.default.createElement(_HiInput2.default, (0, _extends3.default)({}, otherProps, {
+
                             inputId: id,
                             focused: focused,
                             inputRef: function inputRef(input) {
@@ -236,7 +253,7 @@ var HiSuggestSelect = function (_React$PureComponent) {
                                 _Paper2.default,
                                 { className: classes.paper },
                                 _react2.default.createElement(_HiSelectableList2.default, {
-                                    itemList: options,
+                                    itemList: optionsShown,
                                     selectedIdList: [],
                                     checkbox: false,
                                     onSelect: this.handleSelect,
@@ -254,7 +271,12 @@ var HiSuggestSelect = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 HiSuggestSelect.defaultProps = {
-    translations: {},
+    showMinLength: false,
+    showNoResults: false,
+    translations: {
+        no_result_match: 'No result match',
+        min_length: 'Veuillez saisir 3 caractères minimum'
+    },
     options: []
 };
 HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -278,6 +300,14 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Liste de suggestions.
      */
     options: _propTypes2.default.array,
+    /**
+     * Permet d'afficher un message si pas assez de caractères
+     */
+    showMinLength: _propTypes2.default.bool,
+    /**
+     * Permet d'afficher un message si aucune options n'est présente
+     */
+    showNoResults: _propTypes2.default.bool,
     /**
      * Traductions (par défaut en anglais)
      */

package/HiSelectableList/HiSelectableListItem.js

@@ -377,51 +377,44 @@ var HiSelectableListItem = function (_React$Component) {
                 listItemProps.button = false;
             }
 
-            var iconAll = void 0;
-            if (item.id === '_all' && item.icon) {
-                iconAll = _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.checkboxIcon });
-            }
-
             // calcul du padding left
             var paddingLeft = 0;
 
             if (leftPadding) {
                 paddingLeft = leftPadding;
-            } else {
-                // Si pas de hiérarchie, padding de 8px
-                if (!hierarchic) {
-                    if (!effectiveCheckbox) {
-                        paddingLeft = 8;
+            } else if (!hierarchic) {
+                // Si pas de hiérarchie et sans checkbox, padding de 8px
+                if (!effectiveCheckbox) {
+                    paddingLeft = 8;
+                }
+            } else if (selectable) {
+                // Si item selectionnable
+                // Si parent selectionnable
+                if (parentItemSelectable) {
+                    // Si l'item contient une checkbox
+                    if (effectiveCheckbox) {
+                        paddingLeft = 16 * level;
+                    } else {
+                        paddingLeft = 16 * (level + 1);
                     }
-                } else if (selectable) {
-                    // Si item selectionnable
-                    // Si parent selectionnable
-                    if (parentItemSelectable) {
-                        // Si l'item contient une checkbox
-                        if (effectiveCheckbox) {
-                            paddingLeft = 16 * level;
-                        } else {
-                            paddingLeft = 16 * (level + 1);
-                        }
-                    } else if (level > 0) {
-                        if (effectiveCheckbox) {
-                            paddingLeft = 16 * (level - 1);
-                        } else {
-                            paddingLeft = 16 * level;
-                        }
-                    } else if (!effectiveCheckbox) {
-                        if (item.id === '_all') {
-                            paddingLeft = 16;
-                        } else {
-                            paddingLeft = 16 * level;
-                        }
+                } else if (level > 0) {
+                    if (effectiveCheckbox) {
+                        paddingLeft = 16 * (level - 1);
+                    } else {
+                        paddingLeft = 16 * level;
                     }
-                } else {
-                    paddingLeft = 16; // Padding de 16 par défaut
-                    if (level > 0) {
+                } else if (!effectiveCheckbox) {
+                    if (item.id === '_all') {
+                        paddingLeft = 16;
+                    } else {
                         paddingLeft = 16 * level;
                     }
                 }
+            } else {
+                paddingLeft = 16; // Padding de 16 par défaut
+                if (level > 0) {
+                    paddingLeft = 16 * level;
+                }
             }
 
             listItemProps.style = { paddingLeft: paddingLeft + 'px' };
@@ -431,8 +424,8 @@ var HiSelectableListItem = function (_React$Component) {
                 iconDisplay = hoverIcon;
             } else if (item.hasChildren) {
                 iconDisplay = parentIcon;
-            } else if (item.id === '_all') {
-                iconDisplay = iconAll;
+            } else if (item.type === 'icon' && item.icon) {
+                iconDisplay = _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.checkboxIcon });
             }
 
             return _react2.default.createElement(

package/HiTable/HeaderCell.js

@@ -170,7 +170,7 @@ var HeaderCell = function (_React$PureComponent) {
 
         _this.onFilterClick = _this.onFilterClick.bind(_this);
         _this.openFilterMenu = _this.openFilterMenu.bind(_this);
-        _this.closeFilterMenu = _this.closeFilterMenu.bind(_this);
+        _this.handleClose = _this.handleClose.bind(_this);
         _this.handleSort = _this.handleSort.bind(_this);
         _this.handleFilterChange = _this.handleFilterChange.bind(_this);
         return _this;
@@ -186,8 +186,8 @@ var HeaderCell = function (_React$PureComponent) {
             });
         }
     }, {
-        key: 'closeFilterMenu',
-        value: function closeFilterMenu() {
+        key: 'handleClose',
+        value: function handleClose() {
             this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
         }
 
@@ -232,7 +232,8 @@ var HeaderCell = function (_React$PureComponent) {
                 align = _props$align === undefined ? cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left' : _props$align,
                 sticky = _props.sticky,
                 padding = _props.padding,
-                lookedUp = _props.lookedUp;
+                lookedUp = _props.lookedUp,
+                translations = _props.translations;
             var _state = this.state,
                 filterOpen = _state.filterOpen,
                 anchorEl = _state.anchorEl,
@@ -323,7 +324,7 @@ var HeaderCell = function (_React$PureComponent) {
                                 {
                                     className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
                                 },
-                                view !== 's' ? title : smallTitle ? smallTitle : title
+                                view !== 's' ? title : smallTitle || title
                             ),
                             align !== 'right' && _icons
                         ) : _react2.default.createElement(
@@ -340,7 +341,7 @@ var HeaderCell = function (_React$PureComponent) {
                             _react2.default.createElement(
                                 'span',
                                 { className: classes.labelContainer, style: { width: '100%' } },
-                                view !== 's' ? title : smallTitle ? smallTitle : title
+                                view !== 's' ? title : smallTitle || title
                             )
                         )
                     ),
@@ -351,11 +352,12 @@ var HeaderCell = function (_React$PureComponent) {
                     title: title,
                     filterValueList: menuFilters,
                     isOpen: filterOpen,
-                    onClose: this.closeFilterMenu,
+                    onClose: this.handleClose,
                     anchorEl: anchorEl,
                     sortable: sortable,
                     onSort: this.handleSort,
-                    onFilterChange: this.handleFilterChange
+                    onFilterChange: this.handleFilterChange,
+                    translations: translations.columnFilter
                 })
             );
         }
@@ -376,18 +378,50 @@ HeaderCell.defaultProps = {
     padding: 8
 };
 HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Title alignement, est déduit de type par défaut
+     */
+    align: _propTypes2.default.string,
     /**
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
+    /**
+     * Densité, défini la hauteur de la ligne
+     */
+    dense: _propTypes2.default.bool,
+    /**
+     * Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
+     */
+    filterable: _propTypes2.default.bool,
+    /**
+     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
+     */
+    filterSource: _propTypes2.default.array,
+    /**
+     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     */
+    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Recherche lookup sur cette colonne
      */
     lookedUp: _propTypes2.default.bool,
+    /**
+     * Padding de la cellule (px)
+     */
+    padding: _propTypes2.default.number,
+    /**
+     * Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
+     */
+    onFilterChange: _propTypes2.default.func,
     /**
      * Fonction de callback au click du select
      */
     onSelect: _propTypes2.default.func,
+    /**
+     * Fonction de callback au tri - passe la direction du tri
+     */
+    onSort: _propTypes2.default.func,
     /**
      * Ajoute une checkbox
      */
@@ -400,69 +434,41 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
      * Titre condensé
      */
     smallTitle: _propTypes2.default.string,
-    /**
-     * Titre de la colonne
-     */
-    title: _propTypes2.default.string.isRequired,
-    /**
-     * Type de cellule
-     */
-    type: _propTypes2.default.string.isRequired,
     /**
      * Ajoute la fonction de tri au click sur le label & dans le ColumnFilter
      */
     sortable: _propTypes2.default.bool,
-    /**
-     * Tri actif / inactif
-     */
-    sorted: _propTypes2.default.bool,
     /**
      * Sens du tri
      */
     sortDirection: _propTypes2.default.oneOf(['asc', 'desc']),
     /**
-     * Fonction de callback au tri - passe la direction du tri
+     * Tri actif / inactif
      */
-    onSort: _propTypes2.default.func,
+    sorted: _propTypes2.default.bool,
     /**
-     * Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
+     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
      */
-    filterable: _propTypes2.default.bool,
+    sticky: _propTypes2.default.bool,
     /**
-     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
+     * Titre de la colonne
      */
-    filterSource: _propTypes2.default.array,
+    title: _propTypes2.default.string.isRequired,
     /**
-     * Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
+     * Traduction des chaînes affichées
      */
-    onFilterChange: _propTypes2.default.func,
+    translations: _propTypes2.default.object,
     /**
-     * View (L/M/S)
+     * Type de cellule
      */
-    view: _propTypes2.default.oneOf(['l', 'm', 's']),
+    type: _propTypes2.default.string.isRequired,
     /**
-     * Densité, défini la hauteur de la ligne
+     * View (L/M/S)
      */
-    dense: _propTypes2.default.bool,
+    view: _propTypes2.default.oneOf(['l', 'm', 's']),
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-    /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
-    /**
-     * Title alignement, est déduit de type par défaut
-     */
-    align: _propTypes2.default.string,
-    /**
-     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
-     */
-    sticky: _propTypes2.default.bool,
-    /**
-     * Padding de la cellule (px)
-     */
-    padding: _propTypes2.default.number
+    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHeaderCell' })(HeaderCell);

package/HiTable/HiTable.js

@@ -770,7 +770,7 @@ var HiTable = function (_React$Component) {
                             height: headerHeight,
                             sticky: sticky,
                             view: view,
-                            translations: translations,
+                            translations: translations.tableHead,
                             lookupColumns: lookupColumns,
                             fixedColumnWidth: fixedColumnWidth
                         }),
@@ -793,7 +793,7 @@ var HiTable = function (_React$Component) {
                             onRowClick: onRowClick,
                             onScroll: this.handleVerticalScroll,
                             addNewRowRefs: this.addNewRowRefs,
-                            translations: translations,
+                            translations: translations.tableBody,
                             groupBy: groupBy,
                             onClickNext: this.handleNextStickyRow,
                             groupByIds: groupByIds,
@@ -809,7 +809,7 @@ var HiTable = function (_React$Component) {
                             requestNextDatas: requestNextDatas,
                             maxAutoRequest: 3,
                             isScrollToBottom: isScrollToBottom,
-                            translations: translations
+                            translations: translations.tableFooterScroll
                         }),
                         !infiniteScroll && footerContent && _react2.default.createElement(
                             _HiTableFooter2.default,
@@ -866,17 +866,7 @@ HiTable.defaultProps = {
     height: 450,
     sticky: true,
     translations: {
-        load_more: 'Load More',
-        back_to_top: 'Back to top',
-        get_the_n_new_items: 'See %s new items',
-        choose_and_organize_columns: 'Choose & organize columns',
-        search: 'Search',
-        time: 'Time',
-        stickyRow: {
-            button: {
-                next: 'Next day'
-            }
-        }
+        back_to_top: 'Back to top'
     },
     view: 'l',
     lookupColumns: [],

package/HiTable/HiTableHead.js

@@ -313,7 +313,8 @@ var HiTableHead = function (_React$Component) {
                                 align: column['align'],
                                 sticky: firstColumn && sticky,
                                 lookedUp: lookupColumns.includes(column.colId),
-                                fixedColumnWidth: fixedColumnWidth
+                                fixedColumnWidth: fixedColumnWidth,
+                                translations: translations.headerCell
                             });
                         }
                     }),
@@ -347,7 +348,7 @@ var HiTableHead = function (_React$Component) {
                             columns: columns,
                             orderedColumns: orderedColumns,
                             mandatoryColumnId: mandatoryColumnId,
-                            translations: translations
+                            translations: translations.orderColumns
                         })
                     )
                 ),
@@ -391,10 +392,7 @@ HiTableHead.defaultProps = {
     dense: false,
     sticky: true,
     translations: {
-        get_the_n_new_items: 'Get the %s new items',
-        choose_and_organize_columns: 'Choose & organize columns',
-        search: 'Search',
-        time: 'Time'
+        get_the_n_new_items: 'Get the %s new items'
     },
     view: 'l'
 };

package/HiTopBar/HiTopBar.js

@@ -187,7 +187,7 @@ var _ref = _react2.default.createElement(_HiIconBuilder2.default, { icon: 'fa-be
 
 var _ref2 = _react2.default.createElement(_mdiMaterialUi.ArrowLeft, null);
 
-var _ref3 = _react2.default.createElement(_mdiMaterialUi.ChevronDoubleDown, null);
+var _ref3 = _react2.default.createElement(_mdiMaterialUi.ChevronDown, null);
 
 var _ref4 = _react2.default.createElement(_mdiMaterialUi.ArrowLeft, null);
 
@@ -235,6 +235,9 @@ var HiTopBar = function (_React$Component) {
     }, {
         key: 'handleCollapse',
         value: function handleCollapse() {
+            if (this.props.onCollapse) {
+                this.props.onCollapse(!this.state.collapsed);
+            }
             this.setState({ collapsed: !this.state.collapsed });
         }
     }, {
@@ -362,7 +365,7 @@ var HiTopBar = function (_React$Component) {
                                 (hideable || hasSettings) && _react2.default.createElement(
                                     _IconButton2.default,
                                     { color: 'inherit', className: classes.iconButton },
-                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.handleCollapse }),
+                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronUp, { onClick: this.handleCollapse }),
                                     hasSettings && _react2.default.createElement(_HiIconBuilder2.default, {
                                         onClick: this.props.onClickSettings,
                                         icon: 'fa-gear',
@@ -498,7 +501,7 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     hasSettings: _propTypes2.default.bool,
     /**
-     * La TopBar peut être cachée vie le bouton double chevron
+     * La TopBar peut être cachée vie le bouton chevron
      */
     hideable: _propTypes2.default.bool,
     /**
@@ -525,6 +528,10 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au click sur le bouton "Settings" du menu
      */
     onClickSettings: _propTypes2.default.func,
+    /**
+     * Fonction de callback au click sur le bouton chevron
+     */
+    onCollapse: _propTypes2.default.func,
     /**
      * Positionement de la topBar. The behavior of the different options is described
      * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).