@hipay/hipay-material-ui 1.0.0-beta.26 → 1.0.0-beta.28

package/HiTable/BodyCells/CellSentinel.js

@@ -37,10 +37,6 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _Tooltip = require('../../Tooltip');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
 var _HiColoredLabel = require('../../HiColoredLabel');
 
 var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
@@ -141,54 +137,29 @@ var CellSentinel = function (_React$Component) {
 
             var scoreLabel = score > 0 ? '+' + score : '' + score;
 
-            var tooltipContent = _react2.default.createElement(
-                'div',
-                null,
-                _react2.default.createElement(
-                    'div',
-                    { className: classes.nowrap },
-                    scoreLabel
-                ),
-                _react2.default.createElement(
-                    'div',
-                    { className: classes.nowrap },
-                    fraudResult
-                ),
-                !!smartDecision && automaticFraudReviewResult && _react2.default.createElement(
-                    'div',
-                    { className: classes.nowrap },
-                    'SD: ',
-                    automaticFraudReviewResult
-                )
-            );
-
             return _react2.default.createElement(
-                _Tooltip2.default,
-                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-                _react2.default.createElement(
+                'div',
+                { style: { textAlign: 'right' } },
+                _react2.default.createElement(_HiColoredLabel2.default, {
+                    label: scoreLabel,
+                    color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
+                    classes: { root: classes.label },
+                    active: pendingManualAction
+                }),
+                !hideFraudResult && _react2.default.createElement(_HiColoredLabel2.default, {
+                    label: fraudResult.toUpperCase().substr(0, 1),
+                    color: this.getColorFromFraudResult(fraudResult),
+                    classes: { root: classes.label },
+                    active: pendingManualAction
+                }),
+                !!smartDecision && _react2.default.createElement(
                     'div',
-                    { style: { textAlign: 'right' } },
-                    _react2.default.createElement(_HiColoredLabel2.default, {
-                        label: scoreLabel,
-                        color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
-                        classes: { root: classes.label },
-                        active: pendingManualAction
-                    }),
-                    !hideFraudResult && _react2.default.createElement(_HiColoredLabel2.default, {
-                        label: fraudResult.toUpperCase().substr(0, 1),
-                        color: this.getColorFromFraudResult(fraudResult),
-                        classes: { root: classes.label },
+                    { className: classes.smartDecision },
+                    automaticFraudReviewResult && _react2.default.createElement(_HiColoredLabel2.default, {
+                        label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
+                        color: this.getColorFromFraudResult(automaticFraudReviewResult),
                         active: pendingManualAction
-                    }),
-                    !!smartDecision && _react2.default.createElement(
-                        'div',
-                        { className: classes.smartDecision },
-                        automaticFraudReviewResult && _react2.default.createElement(_HiColoredLabel2.default, {
-                            label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
-                            color: this.getColorFromFraudResult(automaticFraudReviewResult),
-                            active: pendingManualAction
-                        })
-                    )
+                    })
                 )
             );
         }

package/HiTable/BodyCells/CellStatus.js

@@ -47,10 +47,6 @@ var _HiPins2 = _interopRequireDefault(_HiPins);
 
 var _styles = require('../../styles');
 
-var _Tooltip = require('../../Tooltip');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
@@ -95,22 +91,18 @@ var CellStatus = function (_React$Component) {
             var color = typeof theme.palette.status[code] !== 'undefined' ? theme.palette.status[code] : theme.palette.neutral.normal;
 
             return _react2.default.createElement(
-                _Tooltip2.default,
-                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
-                _react2.default.createElement(
+                'div',
+                null,
+                nbOperations > 0 ? _react2.default.createElement(
                     'div',
-                    null,
-                    nbOperations > 0 ? _react2.default.createElement(
-                        'div',
-                        { className: classes.labelDiv },
-                        _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color }),
-                        _react2.default.createElement(
-                            _HiPins2.default,
-                            { color: color, onClick: onOpenDetails, className: classes.pins },
-                            nbOperations
-                        )
-                    ) : _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
-                )
+                    { className: classes.labelDiv },
+                    _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color }),
+                    _react2.default.createElement(
+                        _HiPins2.default,
+                        { color: color, onClick: onOpenDetails, className: classes.pins },
+                        nbOperations
+                    )
+                ) : _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
             );
         }
     }]);

package/HiTable/BodyCells/CellText.js

@@ -41,10 +41,6 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _Tooltip = require('../../Tooltip');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
 var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -126,7 +122,7 @@ var CellText = function (_React$Component) {
              * Calcul l'espace disponible dans la cellule en plus du premier mot
              * si il reste de l'espace, définit la largeur du span pour le reste du texte
              */
-            if (this.props.ellipsis === cst.ELLIPSIS_AFTER_FIRST_WORD) {
+            if (this.props.ellipsis === cst.ELLIPSIS_AFTER_FIRST_WORD || this.props.ellipsis === cst.ELLIPSIS_NAME) {
                 if (this.cellText !== null) {
                     var _cellText$getElements = this.cellText.getElementsByTagName('span'),
                         _cellText$getElements2 = (0, _slicedToArray3.default)(_cellText$getElements, 2),
@@ -189,6 +185,7 @@ var CellText = function (_React$Component) {
             var valueString = value.toString();
 
             switch (ellipsis) {
+                case cst.ELLIPSIS_NAME:
                 case cst.ELLIPSIS_AFTER_FIRST_WORD:
                     // Split value in 2 strings around first whitespace
                     start = valueString.substr(0, valueString.indexOf(' '));
@@ -275,11 +272,7 @@ var CellText = function (_React$Component) {
                     break;
             }
 
-            return _react2.default.createElement(
-                _Tooltip2.default,
-                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
-                valueElement
-            );
+            return valueElement;
         }
     }]);
     return CellText;

package/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -39,14 +39,11 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _mdiMaterialUi = require('mdi-material-ui');
 
-var _Tooltip = require('../../Tooltip');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
 var _styles = require('../../styles');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// @inheritedComponent CellLayout
 var styles = exports.styles = {
     icon: {
         width: 18,
@@ -60,7 +57,6 @@ var styles = exports.styles = {
 /**
  * Cette cellule permet d'afficher une icône représentant le statut du 3DS.
  */
-// @inheritedComponent CellLayout
 
 var CellThirdPartySecurity = function (_React$Component) {
     (0, _inherits3.default)(CellThirdPartySecurity, _React$Component);
@@ -124,20 +120,10 @@ var CellThirdPartySecurity = function (_React$Component) {
                     break;
             }
 
-            var tooltipContent = _react2.default.createElement(
-                'div',
-                { className: classes.nowrap },
-                label
-            );
-
             return _react2.default.createElement(
-                _Tooltip2.default,
-                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    icon
-                )
+                'div',
+                null,
+                icon
             );
         }
     }]);

package/HiTable/BodyCells/index.js

@@ -22,15 +22,6 @@ Object.defineProperty(exports, 'CellAccount', {
   }
 });
 
-var _CellAccountNumber = require('./CellAccountNumber');
-
-Object.defineProperty(exports, 'CellAccountNumber', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_CellAccountNumber).default;
-  }
-});
-
 var _CellAddress = require('./CellAddress');
 
 Object.defineProperty(exports, 'CellAddress', {

package/HiTable/BodyRow.js

@@ -9,10 +9,6 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
@@ -21,6 +17,10 @@ var _stringify = require('babel-runtime/core-js/json/stringify');
 
 var _stringify2 = _interopRequireDefault(_stringify);
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -74,9 +74,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // @inheritedComponent BodyCellBuilder
 var styles = exports.styles = function styles(theme) {
     return {
-        rootSelected: {
+        root: {
             backgroundColor: theme.palette.background3
         },
+        rootSelected: {
+            backgroundColor: theme.palette.background1
+        },
         hover: {
             '&:hover': {
                 backgroundColor: theme.palette.hover,
@@ -124,10 +127,10 @@ var BodyRow = function (_React$Component) {
 
         _this.state = {
             live: props.live,
-            style: {
-                backgroundColor: props.live ? (0, _colorManipulator.fade)(props.theme.palette.business.primary.normal, 0.08) : props.theme.palette.background3,
-                transition: props.live ? 'background-color 2s' : 'none'
-            }
+            style: (0, _extends3.default)({}, props.live && {
+                backgroundColor: (0, _colorManipulator.fade)(props.theme.palette.business.primary.normal, 0.08),
+                transition: 'background-color 2s'
+            })
         };
 
         _this.handleClick = _this.handleClick.bind(_this);
@@ -148,10 +151,7 @@ var BodyRow = function (_React$Component) {
             if (this.state.live) {
                 this.setState({
                     live: false,
-                    style: {
-                        backgroundColor: this.props.theme.palette.background3,
-                        transition: 'background-color 2s'
-                    }
+                    style: {}
                 });
             }
         }
@@ -164,10 +164,7 @@ var BodyRow = function (_React$Component) {
             if (prevState.live === true && this.state.live === false) {
                 setTimeout(function () {
                     _this2.setState({
-                        style: {
-                            backgroundColor: _this2.props.theme.palette.background3,
-                            transition: 'none'
-                        }
+                        style: {}
                     });
                 }, 2500);
             }
@@ -240,6 +237,7 @@ var BodyRow = function (_React$Component) {
             return _react2.default.createElement(
                 _Table.TableRow,
                 {
+                    className: classes.root,
                     classes: { selected: classes.rootSelected, hover: classes.hover },
                     onClick: this.handleClick,
                     hover: true,

package/HiTable/HiTable.js

@@ -199,16 +199,18 @@ var HiTable = function (_React$Component) {
         _this.groupByRowsPositions = [];
 
         _this.updateFloatingBodyElementRefs = function () {
-            _this.tBodyScrollbarWidth = _this.tBody.offsetWidth - _this.tBody.clientWidth;
+            if (_this.tBody) {
+                _this.tBodyScrollbarWidth = _this.tBody.offsetWidth - _this.tBody.clientWidth;
 
-            if (_this.tHead && _this.tBodyScrollbarWidth > 0) {
-                _this.tHead.style.width = 'calc(100% - ' + _this.tBodyScrollbarWidth + 'px)';
-            }
+                if (_this.tHead && _this.tBodyScrollbarWidth > 0) {
+                    _this.tHead.style.width = 'calc(100% - ' + _this.tBodyScrollbarWidth + 'px)';
+                }
 
-            _this.tBodyLeftPaddingElements = _this.tBody.querySelectorAll('tr td:nth-child(1), .floating-parent-row-label');
-            _this.tBodyRightPaddingElements = _this.tBody.querySelectorAll('tr td:nth-last-child(1), .floating-parent-row-indicator');
+                _this.tBodyLeftPaddingElements = _this.tBody.querySelectorAll('tr td:nth-child(1), .floating-parent-row-label');
+                _this.tBodyRightPaddingElements = _this.tBody.querySelectorAll('tr td:nth-last-child(1), .floating-parent-row-indicator');
 
-            _this.tBodyFirstElements = _this.tBody.querySelectorAll('tr td:nth-child(2)');
+                _this.tBodyFirstElements = _this.tBody.querySelectorAll('tr td:nth-child(2)');
+            }
         };
 
         _this.addNewRowRefs = function () {
@@ -326,8 +328,9 @@ var HiTable = function (_React$Component) {
                     this.handleStickyRowPositions();
                 }
             }
-
-            this.isScrollToBottom(this.scrollTop === this.tBody.scrollHeight - this.tBody.offsetHeight);
+            if (this.tBody) {
+                this.isScrollToBottom(this.scrollTop === this.tBody.scrollHeight - this.tBody.offsetHeight);
+            }
 
             this.placeHorizontalFloatingElement();
         }
@@ -343,11 +346,13 @@ var HiTable = function (_React$Component) {
             this.groupByRowsPositions = [];
             // Initialize new stickyRows position
             var tableBody = document.getElementById(this.props.tabId + '-body');
-            var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
-            if (stickyRows.length > 0) {
-                Array.prototype.filter.call(stickyRows, function (stickyRow) {
-                    _this2.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
-                });
+            if (tableBody) {
+                var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
+                if (stickyRows.length > 0) {
+                    Array.prototype.filter.call(stickyRows, function (stickyRow) {
+                        _this2.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
+                    });
+                }
             }
         }
     }, {
@@ -465,8 +470,9 @@ var HiTable = function (_React$Component) {
             }
 
             this.handleStickyRowPositions();
-
-            this.isScrollToBottom(this.scrollTop === event.target.scrollHeight - this.tBody.offsetHeight);
+            if (this.tBody) {
+                this.isScrollToBottom(this.scrollTop === event.target.scrollHeight - this.tBody.offsetHeight);
+            }
         }
     }, {
         key: 'handleStickyRowPositions',
@@ -474,7 +480,7 @@ var HiTable = function (_React$Component) {
             var _this3 = this;
 
             var tableBody = document.getElementById(this.props.tabId + '-body');
-            var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
+            var stickyRows = tableBody ? tableBody.getElementsByClassName('stickyGroupBy') : [];
             var rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
             if (stickyRows.length > 0) {
                 Array.prototype.filter.call(stickyRows, function (stickyRow, index) {
@@ -571,7 +577,7 @@ var HiTable = function (_React$Component) {
 
             // Replace stickyRowContent
             var tableBody = document.getElementById(this.props.tabId + '-body');
-            var stickyRowContentDiv = tableBody.getElementsByClassName('stickyRowContent');
+            var stickyRowContentDiv = tableBody ? tableBody.getElementsByClassName('stickyRowContent') : [];
             if (stickyRowContentDiv.length > 0) {
                 Array.prototype.filter.call(stickyRowContentDiv, function (div) {
                     div.style.left = _this4.wrapperDiv.scrollLeft + (_this4.props.selectable ? 25 : 0) + 'px';
@@ -596,7 +602,9 @@ var HiTable = function (_React$Component) {
             this.backToTopButton['style'].top = -99999 + 'px';
 
             // Set scroll top to 0
-            this.tBody.scrollTop = 0;
+            if (this.tBody) {
+                this.tBody.scrollTop = 0;
+            }
             this.scrollTop = 0;
         }
     }, {
@@ -676,7 +684,8 @@ var HiTable = function (_React$Component) {
                 fixedColumnWidth = _props.fixedColumnWidth,
                 disableContextMenu = _props.disableContextMenu,
                 footerContent = _props.footerContent,
-                detailRowsOptions = _props.detailRowsOptions;
+                detailRowsOptions = _props.detailRowsOptions,
+                noResultsContent = _props.noResultsContent;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
                 isScrollToBottom = _state.isScrollToBottom;
@@ -735,7 +744,7 @@ var HiTable = function (_React$Component) {
                             lookupColumns: lookupColumns,
                             fixedColumnWidth: fixedColumnWidth
                         }),
-                        _react2.default.createElement(_HiTableBody2.default, {
+                        dataSource.length > 0 && _react2.default.createElement(_HiTableBody2.default, {
                             tabId: tabId,
                             columns: columns,
                             orderedColumns: orderedColumns,
@@ -763,7 +772,7 @@ var HiTable = function (_React$Component) {
                             disableContextMenu: disableContextMenu,
                             detailRowsOptions: detailRowsOptions
                         }),
-                        infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
+                        dataSource.length > 0 && infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
                             tabId: tabId,
                             hasNextDatas: hasNextDatas,
                             requestNextDatas: requestNextDatas,
@@ -771,7 +780,7 @@ var HiTable = function (_React$Component) {
                             isScrollToBottom: isScrollToBottom,
                             translations: translations.tableFooterScroll
                         }),
-                        !infiniteScroll && footerContent && _react2.default.createElement(
+                        dataSource.length > 0 && !infiniteScroll && footerContent && _react2.default.createElement(
                             _HiTableFooter2.default,
                             {
                                 nbColumnsDisplayed: nbColumnsDisplayed,
@@ -804,7 +813,8 @@ var HiTable = function (_React$Component) {
                             _react2.default.createElement(_ArrowUp2.default, { className: classes.backToTopButtonArrow })
                         )
                     )
-                )
+                ),
+                dataSource.length === 0 && noResultsContent && noResultsContent
             );
         }
     }]);
@@ -833,7 +843,8 @@ HiTable.defaultProps = {
     lookupColumns: [],
     loading: false,
     fixedColumnWidth: true,
-    disableContextMenu: true
+    disableContextMenu: true,
+    noResultsContent: null
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -1022,6 +1033,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Taille du tableau (L/M/S),
      * définit l'espace entre les cellules et leurs tailles par default
      */
-    view: _propTypes2.default.oneOf(['l', 'm', 's'])
+    view: _propTypes2.default.oneOf(['l', 'm', 's']),
+    /**
+     * No results content.
+     */
+    noResultsContent: _propTypes2.default.object
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);

package/HiTable/HiTableBody.js

@@ -539,7 +539,8 @@ HiTableBody.defaultProps = {
     view: 'l',
     loading: false,
     disableContextMenu: true,
-    detailRowsOptions: {}
+    detailRowsOptions: {},
+    noResultsContent: null
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**

package/HiTable/HiTableContextMenu.js

@@ -54,13 +54,14 @@ var styles = exports.styles = function styles(theme) {
         contextMenu: {
             zIndex: 9999,
             backgroundColor: theme.palette.background3,
-            boxShadow: '0px 2px 2px rgba(100, 100, 100, 0.5)'
+            boxShadow: '0px 2px 2px rgba(100, 100, 100, 0.5)',
+            textAlign: 'left'
         },
         contextMenuItem: (0, _extends3.default)({}, theme.typography.body1, {
             height: 40,
             width: 300,
             cursor: 'pointer',
-            padding: '10px 10px 10px 28px',
+            padding: 10,
             color: theme.palette.neutral.dark,
             '&:hover': {
                 backgroundColor: theme.palette.hover,
@@ -192,7 +193,7 @@ HiTableContextMenu.defaultProps = {
         copy: 'Copy',
         exclude: 'Exclude "%s"',
         lookUp: 'Look up "%s"',
-        openInNewTab: 'Open the transaction in a new tab'
+        openInNewTab: 'Open in new tab'
     }
 };
 HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {

package/HiTable/HiTableFooter.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -83,8 +79,11 @@ var HiTableFooter = function (_React$Component) {
 
     (0, _createClass3.default)(HiTableFooter, [{
         key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+
+
+        // Table footer never need to be updated
+        value: function shouldComponentUpdate() {
+            return false;
         }
     }, {
         key: 'render',

package/HiTable/constants.js

@@ -85,7 +85,7 @@ var FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_ASK_AUTHENTICATE = 'ASK
  * Cell default width for each views
  * @type {{}}
  */
-var DEFAULT_WIDTHS = exports.DEFAULT_WIDTHS = (_DEFAULT_WIDTHS = {}, (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ACCOUNT, (_TYPE_ACCOUNT = {}, (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.LARGE, 160), (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.MEDIUM, 120), (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.SMALL, 80), _TYPE_ACCOUNT)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ACCOUNT_NUMBER, (_TYPE_ACCOUNT_NUMBER = {}, (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.LARGE, 100), (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.SMALL, 60), _TYPE_ACCOUNT_NUMBER)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ADDRESS, (_TYPE_ADDRESS = {}, (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.SMALL, 80), _TYPE_ADDRESS)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_CHECKBOX, (_TYPE_CHECKBOX = {}, (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.LARGE, 40), (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.MEDIUM, 40), (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.SMALL, 40), _TYPE_CHECKBOX)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_COUNTRY, (_TYPE_COUNTRY = {}, (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.SMALL, 40), _TYPE_COUNTRY)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_DATE, (_TYPE_DATE = {}, (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.LARGE, 220), (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.MEDIUM, 140), (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.SMALL, 120), _TYPE_DATE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ICON, (_TYPE_ICON = {}, (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.SMALL, 40), _TYPE_ICON)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_IMAGE, (_TYPE_IMAGE = {}, (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.SMALL, 60), _TYPE_IMAGE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_NUMERIC, (_TYPE_NUMERIC = {}, (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.SMALL, 80), _TYPE_NUMERIC)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_RATE, (_TYPE_RATE = {}, (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.LARGE, 100), (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.MEDIUM, 90), (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.SMALL, 80), _TYPE_RATE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_SENTINEL, (_TYPE_SENTINEL = {}, (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.LARGE, 80), (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.SMALL, 80), _TYPE_SENTINEL)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_STATUS, (_TYPE_STATUS = {}, (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.SMALL, 80), _TYPE_STATUS)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_TEXT, (_TYPE_TEXT = {}, (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.SMALL, 80), _TYPE_TEXT)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_THIRD_PARTY_SECURITY, (_TYPE_THIRD_PARTY_SEC = {}, (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.LARGE, 40), (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.MEDIUM, 40), (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.SMALL, 40), _TYPE_THIRD_PARTY_SEC)), _DEFAULT_WIDTHS);
+var DEFAULT_WIDTHS = exports.DEFAULT_WIDTHS = (_DEFAULT_WIDTHS = {}, (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ACCOUNT, (_TYPE_ACCOUNT = {}, (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.LARGE, 160), (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.MEDIUM, 120), (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.SMALL, 80), _TYPE_ACCOUNT)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ACCOUNT_NUMBER, (_TYPE_ACCOUNT_NUMBER = {}, (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.LARGE, 100), (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.SMALL, 60), _TYPE_ACCOUNT_NUMBER)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ADDRESS, (_TYPE_ADDRESS = {}, (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.SMALL, 80), _TYPE_ADDRESS)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_CHECKBOX, (_TYPE_CHECKBOX = {}, (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.LARGE, 40), (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.MEDIUM, 40), (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.SMALL, 40), _TYPE_CHECKBOX)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_COUNTRY, (_TYPE_COUNTRY = {}, (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.SMALL, 40), _TYPE_COUNTRY)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_DATE, (_TYPE_DATE = {}, (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.LARGE, 220), (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.MEDIUM, 140), (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.SMALL, 120), _TYPE_DATE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ICON, (_TYPE_ICON = {}, (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.LARGE, 140), (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.SMALL, 60), _TYPE_ICON)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_IMAGE, (_TYPE_IMAGE = {}, (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.LARGE, 140), (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.SMALL, 60), _TYPE_IMAGE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_NUMERIC, (_TYPE_NUMERIC = {}, (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.SMALL, 80), _TYPE_NUMERIC)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_RATE, (_TYPE_RATE = {}, (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.LARGE, 100), (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.MEDIUM, 90), (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.SMALL, 80), _TYPE_RATE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_SENTINEL, (_TYPE_SENTINEL = {}, (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.LARGE, 80), (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.SMALL, 80), _TYPE_SENTINEL)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_STATUS, (_TYPE_STATUS = {}, (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.SMALL, 80), _TYPE_STATUS)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_TEXT, (_TYPE_TEXT = {}, (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.LARGE, 200), (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.MEDIUM, 120), (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.SMALL, 80), _TYPE_TEXT)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_THIRD_PARTY_SECURITY, (_TYPE_THIRD_PARTY_SEC = {}, (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.LARGE, 40), (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.MEDIUM, 40), (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.SMALL, 40), _TYPE_THIRD_PARTY_SEC)), _DEFAULT_WIDTHS);
 /**
  * Cell default width for each views
  * @type {{}}
@@ -96,7 +96,7 @@ var DEFAULT_VIEWS = exports.DEFAULT_VIEWS = (_DEFAULT_VIEWS = {}, (0, _definePro
  * Cell default side padding (one side) for each views
  * @type {{}}
  */
-var DEFAULT_PADDING = exports.DEFAULT_PADDING = (_DEFAULT_PADDING = {}, (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.LARGE, 12), (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.MEDIUM, 10), (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.SMALL, 8), _DEFAULT_PADDING);
+var DEFAULT_PADDING = exports.DEFAULT_PADDING = (_DEFAULT_PADDING = {}, (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.LARGE, 8), (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.MEDIUM, 8), (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.SMALL, 8), _DEFAULT_PADDING);
 
 /**
  * Cell types which are align right by default

package/es/HiCheckbox/HiCheckbox.js

@@ -17,17 +17,20 @@ export const styles = theme => ({
         marginLeft: 12
     },
     checked: {
-        color: theme.palette.business.primary.normal
+        color: theme.palette.business.primary.normal,
+        '&$disabled': {
+            color: '#999999'
+        }
     },
     disabled: {
-        color: theme.palette.action.disabled
+        color: theme.palette.placeholder
     }
 });
 
 class HiCheckbox extends React.Component {
 
     constructor(props) {
-        super();
+        super(props);
 
         this.handleChange = this.handleChange.bind(this);
     }

package/es/HiColoredLabel/HiColoredLabel.js

@@ -6,10 +6,10 @@ import { getContrastedTextColor, fade } from '../styles/colorManipulator';
 
 export const styles = theme => ({
     root: {
-        display: 'inline-flex',
+        display: 'inline-block',
         alignItems: 'baseline',
         maxWidth: '100%',
-        padding: '2px 4px',
+        padding: '2px 8px',
         borderRadius: 2,
         textOverflow: 'ellipsis',
         overflow: 'hidden',