@hipay/hipay-material-ui 1.0.0-beta.17 → 1.0.0-beta.19

package/HiColoredLabel/HiColoredLabel.js

@@ -60,6 +60,7 @@ var styles = exports.styles = function styles(theme) {
  */
 function HiColoredLabel(props) {
     var classes = props.classes,
+        className = props.className,
         label = props.label,
         color = props.color,
         active = props.active,
@@ -74,7 +75,7 @@ function HiColoredLabel(props) {
     return _react2.default.createElement(
         'div',
         {
-            className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.beta, beta)),
+            className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.beta, beta), className),
             style: {
                 backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
                 color: active ? (0, _colorManipulator.getContrastedTextColor)(color, '#4C4C4C', '#FFF') : color,
@@ -99,6 +100,10 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: _propTypes2.default.object,
+    /**
+     * Surcharge les classes du composant
+     */
+    className: _propTypes2.default.string,
     /**
      * Couleur du text & du background
      */

package/HiForm/HiInput.js

@@ -70,7 +70,7 @@ var styles = exports.styles = function styles(theme) {
         }, theme.typography.body1, {
             borderBottom: '1px solid ' + theme.palette.input.bottomLine,
             paddingLeft: 8,
-            backgroundColor: '#f5f5f5',
+            backgroundColor: theme.palette.background2,
             '&$focused': {
                 backgroundColor: '#ffffff'
             },

package/HiTable/BodyCellBuilder.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
@@ -128,7 +132,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
                 lookedUp = _props.lookedUp,
                 fixedColumnWidth = _props.fixedColumnWidth,
                 disableContextMenu = _props.disableContextMenu,
-                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu']);
+                detailInfos = _props.detailInfos,
+                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu', 'detailInfos']);
 
 
             var layoutProps = {
@@ -144,7 +149,9 @@ var BodyCellBuilder = function (_React$PureComponent) {
                 sticky: sticky,
                 childrenCount: childrenCount,
                 lookedUp: lookedUp,
-                fixedColumnWidth: fixedColumnWidth
+                fixedColumnWidth: fixedColumnWidth,
+                detailInfos: detailInfos,
+                onOpenDetails: onOpenDetails
             };
 
             var cellContent = void 0;
@@ -257,13 +264,16 @@ var BodyCellBuilder = function (_React$PureComponent) {
                         break;
 
                     case cst.TYPE_STATUS:
-                        cellElement = _react2.default.createElement(_BodyCells.CellStatus, {
+                        cellElement = _react2.default.createElement(_BodyCells.CellStatus, (0, _extends3.default)({
                             code: data.value,
-                            nbOperations: data.count_operations,
                             value: data.label ? data.label : data.value,
-                            onOpenDetails: onOpenDetails,
                             sticky: sticky
-                        });
+                        }, detailInfos && {
+                            nbOperations: detailInfos.total,
+                            onOpenDetails: onOpenDetails
+                        }));
+                        delete layoutProps.detailInfos;
+                        delete layoutProps.onOpenDetails;
                         break;
 
                     case cst.TYPE_THIRD_PARTY_SECURITY:
@@ -309,7 +319,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
 BodyCellBuilder.defaultProps = {
     ellipsis: 'right',
-    disableContextMenu: true
+    disableContextMenu: true,
+    detailInfos: null
 };
 exports.default = BodyCellBuilder;
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -341,6 +352,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Ajoute un Chip affichant le nombre de ligne de détails de la ligne et permettant de les affichés via onOpenDetails
+     */
+    detailInfos: _propTypes2.default.object,
     /**
      * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
      */

package/HiTable/BodyCells/CellLayout.js

@@ -142,6 +142,8 @@ var CellLayout = function (_React$Component) {
                 selected = _props.selected,
                 onSelect = _props.onSelect,
                 childrenCount = _props.childrenCount,
+                detailInfos = _props.detailInfos,
+                onOpenDetails = _props.onOpenDetails,
                 theme = _props.theme,
                 padding = _props.padding,
                 lookedUp = _props.lookedUp;
@@ -204,6 +206,22 @@ var CellLayout = function (_React$Component) {
                             { color: theme.palette.business.primary.normal, className: classes.pins },
                             childrenCount
                         )
+                    ),
+                    detailInfos && _react2.default.createElement(
+                        'div',
+                        {
+                            style: {
+                                position: 'absolute',
+                                top: dense ? 2 : 6,
+                                right: 0
+                            },
+                            onClick: onOpenDetails
+                        },
+                        _react2.default.createElement(
+                            _HiPins2.default,
+                            { color: theme.palette.business.secondary.normal, className: classes.pins },
+                            detailInfos.total
+                        )
                     )
                 )
             );
@@ -219,7 +237,8 @@ CellLayout.defaultProps = {
     dense: false,
     fixedColumnWidth: true,
     sticky: false,
-    padding: 8
+    padding: 8,
+    detailInfos: null
 };
 CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -234,6 +253,10 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Ajoute un Chip affichant le nombre de ligne de détails de la ligne et permettant de les affichés via onOpenDetails
+     */
+    detailInfos: _propTypes2.default.object,
     /**
      * Recherche lookup sur cette colonne
      */

package/HiTable/BodyCells/CellStatus.js

@@ -123,7 +123,7 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Nombre d'opérations financières
      */
-    nbOperations: _propTypes2.default.number.isRequired,
+    nbOperations: _propTypes2.default.number,
     /**
      * Statut courant de la transaction
      */

package/HiTable/BodyRow.js

@@ -112,6 +112,12 @@ var BodyRow = function (_React$PureComponent) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (BodyRow.__proto__ || (0, _getPrototypeOf2.default)(BodyRow)).call(this));
 
+        _this.handleOpenRowDetails = function (type) {
+            return function () {
+                _this.props.onOpenRowDetails(_this.props.row.rowId, type);
+            };
+        };
+
         _this.state = {
             live: props.live,
             style: {
@@ -165,11 +171,6 @@ var BodyRow = function (_React$PureComponent) {
                 this.props.onClick(this.props.row);
             }
         }
-    }, {
-        key: 'handleOpenRowDetails',
-        value: function handleOpenRowDetails() {
-            this.props.onOpenRowDetails(this.props.row.rowId);
-        }
     }, {
         key: 'handleSelect',
         value: function handleSelect() {
@@ -197,7 +198,8 @@ var BodyRow = function (_React$PureComponent) {
                 sticky = _props.sticky,
                 innerRow = _props.innerRow,
                 isDetail = _props.isDetail,
-                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'row', 'columns', 'lookupColumns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
+                detailRowsOptions = _props.detailRowsOptions,
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'row', 'columns', 'lookupColumns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail', 'detailRowsOptions']);
             var style = this.state.style;
 
 
@@ -213,6 +215,19 @@ var BodyRow = function (_React$PureComponent) {
             // If there is no datas don't display the row
             if (!row.hasOwnProperty('datas')) return false;
 
+            var detailsInfos = {};
+            if (row.details && row.details.length > 0) {
+                detailsInfos = row.details.reduce(function (memo, item) {
+                    if (item.rows.length > 0 && detailRowsOptions[item.type] && detailRowsOptions[item.type].anchor) {
+                        memo[detailRowsOptions[item.type].anchor] = (0, _extends3.default)({
+                            type: item.type,
+                            total: item.rows.length
+                        }, detailRowsOptions[item.type]);
+                    }
+                    return memo;
+                }, {});
+            }
+
             return _react2.default.createElement(
                 _Table.TableRow,
                 {
@@ -300,8 +315,11 @@ var BodyRow = function (_React$PureComponent) {
                         numberLocale: numberLocale,
                         dense: dense,
                         selected: selected,
-                        onSelect: _this3.handleSelect,
-                        onOpenDetails: _this3.handleOpenRowDetails,
+                        onSelect: _this3.handleSelect
+                    }, detailsInfos[colId] && {
+                        onOpenDetails: _this3.handleOpenRowDetails(detailsInfos[colId].type),
+                        detailInfos: detailsInfos[colId]
+                    }, {
                         childrenCount: isParentAnchor ? row.children.length : null,
                         colId: colId,
                         lookedUp: lookedUp
@@ -331,7 +349,8 @@ BodyRow.defaultProps = {
     live: false,
     innerRow: false,
     lookupColumns: [],
-    fixedColumnWidth: true
+    fixedColumnWidth: true,
+    detailRowsOptions: {}
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -342,6 +361,10 @@ BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Options utilisées pour décrire le comportement de lignes de détails
+     */
+    detailRowsOptions: _propTypes2.default.object,
     /**
      * Fixe la taille des colonnes selon le type de vue
      * Sinon les colonnes s'adaptent à l'espace disponible

package/HiTable/ChildRow.js

@@ -196,7 +196,8 @@ var ChildRow = function (_React$PureComponent) {
                 dense = _props.dense,
                 sticky = _props.sticky,
                 view = _props.view,
-                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view']);
+                row = _props.row,
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view', 'row']);
 
 
             var indicator = '';
@@ -225,10 +226,7 @@ var ChildRow = function (_React$PureComponent) {
                         _Table.TableBody,
                         null,
                         _react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({
-                            row: {
-                                rowId: parentRowId,
-                                datas: parentRowDatas
-                            },
+                            row: row,
                             selectable: selectable,
                             selected: selected,
                             columns: columns,
@@ -364,10 +362,6 @@ ChildRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Données de la ligne parente
      */
     parentRowDatas: _propTypes2.default.object.isRequired,
-    /**
-     * Ligne des détails de la ligne parente
-     */
-    parentDetailRows: _propTypes2.default.array,
     /**
      * Indicateur du sous-ensemble (en général la date)
      */

package/HiTable/HiTable.js

@@ -713,7 +713,8 @@ var HiTable = function (_React$Component) {
                 loading = _props.loading,
                 fixedColumnWidth = _props.fixedColumnWidth,
                 disableContextMenu = _props.disableContextMenu,
-                footerContent = _props.footerContent;
+                footerContent = _props.footerContent,
+                detailRowsOptions = _props.detailRowsOptions;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
                 isScrollToBottom = _state.isScrollToBottom,
@@ -799,7 +800,8 @@ var HiTable = function (_React$Component) {
                             lookupColumns: lookupColumns,
                             loading: loading,
                             fixedColumnWidth: fixedColumnWidth,
-                            disableContextMenu: disableContextMenu
+                            disableContextMenu: disableContextMenu,
+                            detailRowsOptions: detailRowsOptions
                         }),
                         infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
                             tabId: tabId,
@@ -860,6 +862,7 @@ HiTable.defaultProps = {
     dateLocale: 'en-EN',
     numberLocale: 'en-EN',
     dense: false,
+    detailRowsOptions: {},
     height: 450,
     sticky: true,
     translations: {
@@ -902,6 +905,17 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Locale utilisé pour le format des dates
      */
     dateLocale: _propTypes2.default.string,
+    /**
+     * Options utilisées pour décrire le comportement de lignes de détails
+     * ex: {
+     *     payment_operation: {
+     *         anchor: 'transaction_id'
+     *     }
+     * }
+     * dans cet exemple, on veut que les lignes de détails de type payment_operation
+     * soient affichable à partir d'un chip button dans les cellules transaction_id
+     */
+    detailRowsOptions: _propTypes2.default.object,
     /**
      * Densité d'affichage (joue sur la hauteur des lignes)
      */

package/HiTable/HiTableBody.js

@@ -235,18 +235,22 @@ var HiTableBody = function (_React$Component) {
         /**
          * Définit les id des lignes dont les détails sont affichés ou null
          * (ajoute une ligne pour chaque détails)
+         * vérifie aussi le type du détail
          *
          * @param rowId
+         * @param type
          */
 
     }, {
         key: 'toggleOpenedDetailsRowId',
-        value: function toggleOpenedDetailsRowId(rowId) {
+        value: function toggleOpenedDetailsRowId(rowId, type) {
             this.setState(function (prevState) {
                 return {
-                    openedDetailsRowIdList: prevState.openedDetailsRowIdList.includes(rowId) ? prevState.openedDetailsRowIdList.filter(function (id) {
-                        return id !== rowId;
-                    }) : [].concat((0, _toConsumableArray3.default)(prevState.openedDetailsRowIdList), [rowId])
+                    openedDetailsRowIdList: prevState.openedDetailsRowIdList.find(function (item) {
+                        return item.id === rowId && item.type === type;
+                    }) ? prevState.openedDetailsRowIdList.filter(function (item) {
+                        return item.id !== rowId || item.type !== type;
+                    }) : [].concat((0, _toConsumableArray3.default)(prevState.openedDetailsRowIdList), [{ id: rowId, type: type }])
                 };
             });
             this.props.addNewRowRefs();
@@ -288,7 +292,8 @@ var HiTableBody = function (_React$Component) {
                 lookupColumns = _props.lookupColumns,
                 loading = _props.loading,
                 fixedColumnWidth = _props.fixedColumnWidth,
-                disableContextMenu = _props.disableContextMenu;
+                disableContextMenu = _props.disableContextMenu,
+                detailRowsOptions = _props.detailRowsOptions;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
                 openedDetailsRowIdList = _state.openedDetailsRowIdList;
@@ -360,9 +365,6 @@ var HiTableBody = function (_React$Component) {
                 // has children
                 var hasChildren = row.hasOwnProperty('children') && row.children.length > 0;
 
-                // has detail rows
-                var hasDetailRows = row.hasOwnProperty('detailRows') && row.detailRows.length > 0;
-
                 var BodyRowProps = (0, _extends3.default)({
                     columns: columns,
                     dateLocale: dateLocale,
@@ -374,9 +376,9 @@ var HiTableBody = function (_React$Component) {
                 }, hasChildren && {
                     openedAsParent: openedParentRowId === row.rowId,
                     onClick: _this3.setOpenedParentRowId // if row has children, onClick display the children
-                }, hasDetailRows && {
-                    onOpenRowDetails: _this3.toggleOpenedDetailsRowId
                 }, {
+                    onOpenRowDetails: _this3.toggleOpenedDetailsRowId,
+                    detailRowsOptions: detailRowsOptions,
                     orderedColumns: orderedColumns
                 }, selectable && {
                     selectable: selectable,
@@ -399,7 +401,6 @@ var HiTableBody = function (_React$Component) {
                         parentIndicatorColumn: row.parentIndicatorColumn,
                         parentLabel: row.parentLabel,
                         parentLabelIcon: row.parentLabelIcon,
-                        parentDetailRows: row.detailRows,
                         children: row.children,
                         onClose: _this3.setOpenedParentRowId
                     }, BodyRowProps)));
@@ -408,21 +409,27 @@ var HiTableBody = function (_React$Component) {
                 }
 
                 // add opened detail rows
-                if (hasDetailRows && openedDetailsRowIdList.includes(row.rowId)) {
-                    row.detailRows.forEach(function (detailRow) {
-                        var detailRowProps = {
-                            row: detailRow,
-                            columns: columns,
-                            orderedColumns: orderedColumns,
-                            view: view,
-                            dense: dense,
-                            sticky: sticky,
-                            isDetail: true,
-                            fixedColumnWidth: fixedColumnWidth,
-                            disableContextMenu: disableContextMenu
-                        };
-
-                        tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
+                if (row.details && row.details.length > 0) {
+                    row.details.forEach(function (detail) {
+                        if (detail.rows.length > 0 && openedDetailsRowIdList.find(function (item) {
+                            return item.id === row.rowId && item.type === detail.type;
+                        })) {
+                            detail.rows.forEach(function (detailRow) {
+                                var detailRowProps = {
+                                    row: detailRow,
+                                    columns: columns,
+                                    orderedColumns: orderedColumns,
+                                    view: view,
+                                    dense: dense,
+                                    sticky: sticky,
+                                    isDetail: true,
+                                    fixedColumnWidth: fixedColumnWidth,
+                                    disableContextMenu: disableContextMenu
+                                };
+
+                                tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
+                            });
+                        }
                     });
                 }
             });
@@ -461,7 +468,8 @@ HiTableBody.defaultProps = {
     sticky: true,
     view: 'l',
     loading: false,
-    disableContextMenu: true
+    disableContextMenu: true,
+    detailRowsOptions: {}
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -489,6 +497,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Options utilisées pour décrire le comportement de lignes de détails
+     */
+    detailRowsOptions: _propTypes2.default.object,
     /**
      * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
      */

package/HiTopBar/HiTopBar.js

@@ -154,9 +154,8 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.text.secondary,
             minWidth: 32
         },
-        beta: {
-            minWidth: 64,
-            maxWidth: 80
+        betaWithoutAccountSelector: {
+            marginLeft: 1.5 * theme.spacing.unit
         },
         searchInput: {
             backgroundColor: theme.palette.background1 + ' !important'
@@ -353,7 +352,7 @@ var HiTopBar = function (_React$Component) {
                                     accountSelectorContent
                                 ),
                                 beta && _react2.default.createElement(_HiColoredLabel2.default, {
-                                    className: classes.beta,
+                                    className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.betaWithoutAccountSelector, !hasAccountSelector)),
                                     label: 'BETA',
                                     beta: true,
                                     color: theme.palette.neutral.dark

package/es/HiColoredLabel/HiColoredLabel.js

@@ -32,7 +32,7 @@ export const styles = theme => ({
  * Label with background color & text color
  */
 function HiColoredLabel(props) {
-    const { classes, label, color, active, beta } = props;
+    const { classes, className, label, color, active, beta } = props;
     let fontWeight = 400;
     if (beta) {
         fontWeight = 600;
@@ -42,7 +42,7 @@ function HiColoredLabel(props) {
     return React.createElement(
         'div',
         {
-            className: classNames(classes.root, { [classes.beta]: beta }),
+            className: classNames(classes.root, { [classes.beta]: beta }, className),
             style: {
                 backgroundColor: active ? color : fade(color, 0.08),
                 color: active ? getContrastedTextColor(color, '#4C4C4C', '#FFF') : color,
@@ -67,6 +67,10 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: PropTypes.object,
+    /**
+     * Surcharge les classes du composant
+     */
+    className: PropTypes.string,
     /**
      * Couleur du text & du background
      */

package/es/HiForm/HiInput.js

@@ -13,7 +13,7 @@ export const styles = theme => ({
     }, theme.typography.body1, {
         borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
         paddingLeft: 8,
-        backgroundColor: '#f5f5f5',
+        backgroundColor: theme.palette.background2,
         '&$focused': {
             backgroundColor: '#ffffff'
         },

package/es/HiTable/BodyCellBuilder.js

@@ -1,3 +1,4 @@
+import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -76,9 +77,10 @@ export default class BodyCellBuilder extends React.PureComponent {
             onOpenDetails,
             lookedUp,
             fixedColumnWidth,
-            disableContextMenu
+            disableContextMenu,
+            detailInfos
         } = _props,
-              props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu']);
+              props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu', 'detailInfos']);
 
         const layoutProps = {
             type,
@@ -93,7 +95,9 @@ export default class BodyCellBuilder extends React.PureComponent {
             sticky,
             childrenCount,
             lookedUp,
-            fixedColumnWidth
+            fixedColumnWidth,
+            detailInfos,
+            onOpenDetails
         };
 
         let cellContent;
@@ -206,13 +210,16 @@ export default class BodyCellBuilder extends React.PureComponent {
                     break;
 
                 case cst.TYPE_STATUS:
-                    cellElement = React.createElement(CellStatus, {
+                    cellElement = React.createElement(CellStatus, _extends({
                         code: data.value,
-                        nbOperations: data.count_operations,
                         value: data.label ? data.label : data.value,
-                        onOpenDetails: onOpenDetails,
                         sticky: sticky
-                    });
+                    }, detailInfos && {
+                        nbOperations: detailInfos.total,
+                        onOpenDetails: onOpenDetails
+                    }));
+                    delete layoutProps.detailInfos;
+                    delete layoutProps.onOpenDetails;
                     break;
 
                 case cst.TYPE_THIRD_PARTY_SECURITY:
@@ -255,7 +262,8 @@ export default class BodyCellBuilder extends React.PureComponent {
 }
 BodyCellBuilder.defaultProps = {
     ellipsis: 'right',
-    disableContextMenu: true
+    disableContextMenu: true,
+    detailInfos: null
 };
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -286,6 +294,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: PropTypes.bool,
+    /**
+     * Ajoute un Chip affichant le nombre de ligne de détails de la ligne et permettant de les affichés via onOpenDetails
+     */
+    detailInfos: PropTypes.object,
     /**
      * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
      */

package/es/HiTable/BodyCells/CellLayout.js

@@ -62,7 +62,7 @@ class CellLayout extends React.Component {
             classes, type, children,
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
             view, dense, width = cst.DEFAULT_WIDTHS[type][view], fixedColumnWidth, sticky,
-            selectable, selected, onSelect, childrenCount, theme, padding,
+            selectable, selected, onSelect, childrenCount, detailInfos, onOpenDetails, theme, padding,
             lookedUp
         } = this.props;
 
@@ -123,6 +123,22 @@ class CellLayout extends React.Component {
                         { color: theme.palette.business.primary.normal, className: classes.pins },
                         childrenCount
                     )
+                ),
+                detailInfos && React.createElement(
+                    'div',
+                    {
+                        style: {
+                            position: 'absolute',
+                            top: dense ? 2 : 6,
+                            right: 0
+                        },
+                        onClick: onOpenDetails
+                    },
+                    React.createElement(
+                        HiPins,
+                        { color: theme.palette.business.secondary.normal, className: classes.pins },
+                        detailInfos.total
+                    )
                 )
             )
         );
@@ -136,7 +152,8 @@ CellLayout.defaultProps = {
     dense: false,
     fixedColumnWidth: true,
     sticky: false,
-    padding: 8
+    padding: 8,
+    detailInfos: null
 };
 CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -151,6 +168,10 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: PropTypes.bool,
+    /**
+     * Ajoute un Chip affichant le nombre de ligne de détails de la ligne et permettant de les affichés via onOpenDetails
+     */
+    detailInfos: PropTypes.object,
     /**
      * Recherche lookup sur cette colonne
      */