@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.4

package/HiTable/BodyCells/CellThirdPartySecurity.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);
@@ -37,29 +33,32 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _mdiMaterialUi = require('mdi-material-ui');
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
 
 var _styles = require('../../styles');
 
+var _mdiMaterialUi = require('mdi-material-ui');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// @inheritedComponent CellLayout
-var styles = exports.styles = {
-    icon: {
-        width: 18,
-        height: 18
-    },
-    nowrap: {
-        whiteSpace: 'nowrap'
-    }
+var styles = exports.styles = function styles(theme) {
+    return {
+        icon: {
+            width: 18,
+            height: 18
+        }
+    };
 };
 
 /**
  * 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);
+var CellThirdPartySecurity = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellThirdPartySecurity, _React$PureComponent);
 
     function CellThirdPartySecurity() {
         (0, _classCallCheck3.default)(this, CellThirdPartySecurity);
@@ -67,19 +66,15 @@ var CellThirdPartySecurity = function (_React$Component) {
     }
 
     (0, _createClass3.default)(CellThirdPartySecurity, [{
-        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);
-        }
-    }, {
         key: 'render',
         value: function render() {
             var _props = this.props,
                 classes = _props.classes,
                 theme = _props.theme,
-                label = _props.label,
+                code = _props.code,
                 value = _props.value;
 
+
             var ECI_5 = 0; // authenticated
             var ECI_6 = 1; // cardholder not enrolled
             var ECI_7 = 2; //
@@ -88,61 +83,44 @@ var CellThirdPartySecurity = function (_React$Component) {
             var AUTH_2 = 5; // force 3DS
 
             var icon = null;
-            switch (value) {
+            switch (code) {
                 case ECI_5:
-                    icon = _react2.default.createElement(_mdiMaterialUi.Lock, {
-                        className: classes.icon,
-                        style: { color: theme.palette.positive.normal }
-                    });
+                    icon = _react2.default.createElement(_mdiMaterialUi.Lock, { className: classes.icon, style: { color: theme.palette.positive.normal } });
                     break;
                 case ECI_6:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, {
-                        className: classes.icon,
-                        style: { color: theme.palette.middle.normal }
-                    });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, { className: classes.icon, style: { color: theme.palette.middle.normal } });
                     break;
                 case AUTH_1:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpenOutline, {
-                        className: classes.icon,
-                        style: { color: theme.palette.neutral.light }
-                    });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpenOutline, { className: classes.icon, style: { color: theme.palette.neutral.light } });
                     break;
                 case AUTH_2:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, {
-                        className: classes.icon,
-                        style: { color: theme.palette.neutral.light }
-                    });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, { className: classes.icon, style: { color: theme.palette.neutral.light } });
                     break;
                 case ECI_7:
                 case AUTH_0:
-                default:
                     icon = null;
                     break;
             }
 
             return _react2.default.createElement(
-                'div',
-                null,
-                icon
+                _Tooltip2.default,
+                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    icon
+                )
             );
         }
     }]);
     return CellThirdPartySecurity;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
-    /**
-     * Label
-     */
-    label: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-    /**
-     * True si la colonne est sticky
-     */
-    sticky: _propTypes2.default.bool,
     /**
      * Useful to extend the theme applied to components.
      * Used theme props positive.normal, middle.normal, neutral.light
@@ -157,6 +135,10 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * AUTH_1 = 4; // ask for 3DS
      * AUTH_2 = 5; // force 3DS
      */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+    code: _propTypes2.default.number,
+    /**
+     * Label
+     */
+    value: _propTypes2.default.string
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);

package/HiTable/BodyCells/index.js

@@ -22,6 +22,15 @@ 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,18 +9,14 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
-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 _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -74,11 +70,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // @inheritedComponent BodyCellBuilder
 var styles = exports.styles = function styles(theme) {
     return {
-        root: {
-            backgroundColor: theme.palette.background3
-        },
         rootSelected: {
-            backgroundColor: theme.palette.background1
+            backgroundColor: theme.palette.background3
         },
         hover: {
             '&:hover': {
@@ -111,26 +104,20 @@ var styles = exports.styles = function styles(theme) {
     };
 };
 
-var BodyRow = function (_React$Component) {
-    (0, _inherits3.default)(BodyRow, _React$Component);
+var BodyRow = function (_React$PureComponent) {
+    (0, _inherits3.default)(BodyRow, _React$PureComponent);
 
     function BodyRow(props) {
         (0, _classCallCheck3.default)(this, BodyRow);
 
         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: (0, _extends3.default)({}, props.live && {
-                backgroundColor: (0, _colorManipulator.fade)(props.theme.palette.business.primary.normal, 0.08),
-                transition: 'background-color 2s'
-            })
+            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'
+            }
         };
 
         _this.handleClick = _this.handleClick.bind(_this);
@@ -140,18 +127,16 @@ var BodyRow = function (_React$Component) {
     }
 
     (0, _createClass3.default)(BodyRow, [{
-        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);
-        }
-    }, {
         key: 'componentDidMount',
         value: function componentDidMount() {
             // Live data animation
             if (this.state.live) {
                 this.setState({
                     live: false,
-                    style: {}
+                    style: {
+                        backgroundColor: this.props.theme.palette.background3,
+                        transition: 'background-color 2s'
+                    }
                 });
             }
         }
@@ -164,7 +149,10 @@ var BodyRow = function (_React$Component) {
             if (prevState.live === true && this.state.live === false) {
                 setTimeout(function () {
                     _this2.setState({
-                        style: {}
+                        style: {
+                            backgroundColor: _this2.props.theme.palette.background3,
+                            transition: 'none'
+                        }
                     });
                 }, 2500);
             }
@@ -177,6 +165,11 @@ var BodyRow = function (_React$Component) {
                 this.props.onClick(this.props.row);
             }
         }
+    }, {
+        key: 'handleOpenRowDetails',
+        value: function handleOpenRowDetails() {
+            this.props.onOpenRowDetails(this.props.row.rowId);
+        }
     }, {
         key: 'handleSelect',
         value: function handleSelect() {
@@ -192,7 +185,6 @@ var BodyRow = function (_React$Component) {
                 theme = _props.theme,
                 row = _props.row,
                 columns = _props.columns,
-                lookupColumns = _props.lookupColumns,
                 orderedColumns = _props.orderedColumns,
                 selectable = _props.selectable,
                 selected = _props.selected,
@@ -204,11 +196,11 @@ var BodyRow = function (_React$Component) {
                 sticky = _props.sticky,
                 innerRow = _props.innerRow,
                 isDetail = _props.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']);
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'row', 'columns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
             var style = this.state.style;
 
 
+            var firstCol = true;
             var unfixedCol = true;
 
             var rowStyle = (0, _extends3.default)({}, style, {
@@ -221,23 +213,9 @@ var BodyRow = function (_React$Component) {
             // 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,
                 {
-                    className: classes.root,
                     classes: { selected: classes.rootSelected, hover: classes.hover },
                     onClick: this.handleClick,
                     hover: true,
@@ -252,85 +230,67 @@ var BodyRow = function (_React$Component) {
                     key: row.rowId + '-left-cell',
                     className: patchDivClass
                 }),
-                orderedColumns.map(function (colRef, index) {
-
-                    // Dynamic column settings (from OrderColumns)
+                orderedColumns.map(function (colRef) {
                     var colRefId = colRef.colId,
                         displayed = colRef.displayed,
                         colView = colRef.view,
                         colRefProps = (0, _objectWithoutProperties3.default)(colRef, ['colId', 'displayed', 'view']);
 
-
-                    if (displayed === false) return null;
-
-                    // the first column is sticky (except checkbox)
-                    var first = index === 0;
-
-                    // Static column settings
-                    var _columns$colRefId = columns[colRefId],
-                        colId = _columns$colRefId.colId,
-                        align = _columns$colRefId.align,
-                        colData = _columns$colRefId.data,
-                        ellipsis = _columns$colRefId.ellipsis,
-                        fixedWidth = _columns$colRefId.fixedWidth,
-                        type = _columns$colRefId.type,
-                        width = _columns$colRefId.width,
-                        columnProps = (0, _objectWithoutProperties3.default)(_columns$colRefId, ['colId', 'align', 'data', 'ellipsis', 'fixedWidth', 'type', 'width']);
-
-                    // view define in OrderColumn or table prop view by default
-
-                    var effectiveView = colView || view;
-
-                    // add clickable badge in cell to open children
-                    var isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
-
-                    // the first non fixed column is the only one not fixed
-                    var unfixed = unfixedCol && fixedWidth !== true;
-                    unfixedCol = unfixed ? false : unfixedCol;
-
-                    // add lookedUp style
-                    var lookedUp = Array.isArray(lookupColumns) && lookupColumns.includes(colId);
-
-                    // Cell data
-                    var data = row.datas[colRefId];
-                    // Get object data for column based on reference datas
-                    if (data !== undefined && colData !== undefined) {
-                        var colItem = colData.find(function (item) {
-                            return item.id === data.value;
-                        });
-                        if (colItem) {
-                            // Hydrate data object with reference item
-                            data = (0, _extends3.default)({}, colItem, data);
+                    if (displayed !== false) {
+                        // the first column is sticky (except checkbox)
+                        var first = firstCol;
+                        firstCol = false;
+                        var _columns$colRef$colId = columns[colRef.colId],
+                            colId = _columns$colRef$colId.colId,
+                            align = _columns$colRef$colId.align,
+                            datas = _columns$colRef$colId.datas,
+                            ellipsis = _columns$colRef$colId.ellipsis,
+                            fixedWidth = _columns$colRef$colId.fixedWidth,
+                            type = _columns$colRef$colId.type,
+                            width = _columns$colRef$colId.width,
+                            columnProps = (0, _objectWithoutProperties3.default)(_columns$colRef$colId, ['colId', 'align', 'datas', 'ellipsis', 'fixedWidth', 'type', 'width']);
+
+                        var data = row.datas[colRef.colId];
+
+                        var effectiveView = colView || view;
+                        // add clickable badge in cell to open children
+                        var isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
+
+                        // the first non fixed column is the only one not fixed
+                        var unfixed = unfixedCol && fixedWidth !== true;
+                        unfixedCol = unfixedCol && fixedWidth !== true ? false : unfixedCol;
+
+                        var lookedUp = false;
+                        if (_this3.props.lookupColumns && _this3.props.lookupColumns.includes(colId)) {
+                            lookedUp = true;
                         }
-                    }
 
-                    return _react2.default.createElement(_BodyCellBuilder2.default, (0, _extends3.default)({}, other, {
-                        key: row.rowId + '-' + colId + '-cell',
-                        ukey: row.rowId + '-' + colId + '-cell',
-                        checkboxValue: row.rowId,
-                        type: type,
-                        data: data,
-                        ellipsis: ellipsis,
-                        align: align,
-                        view: effectiveView,
-                        padding: cst.DEFAULT_PADDING[view],
-                        width: width,
-                        fixedWidth: !unfixed,
-                        sticky: sticky && first,
-                        selectable: selectable && first,
-                        dateLocale: dateLocale,
-                        numberLocale: numberLocale,
-                        dense: dense,
-                        selected: selected,
-                        onSelect: _this3.handleSelect
-                    }, detailsInfos[colId] && {
-                        onOpenDetails: _this3.handleOpenRowDetails(detailsInfos[colId].type),
-                        detailInfos: detailsInfos[colId]
-                    }, {
-                        childrenCount: isParentAnchor ? row.children.length : null,
-                        colId: colId,
-                        lookedUp: lookedUp
-                    }, columnProps, colRefProps));
+                        return _react2.default.createElement(_BodyCellBuilder2.default, (0, _extends3.default)({}, other, {
+                            key: row.rowId + '-' + colId + '-cell',
+                            ukey: row.rowId + '-' + colId + '-cell',
+                            checkboxValue: row.rowId,
+                            type: type,
+                            datas: data,
+                            ellipsis: ellipsis,
+                            align: align,
+                            view: effectiveView,
+                            padding: cst.DEFAULT_PADDING[view],
+                            width: width,
+                            fixedWidth: !unfixed,
+                            sticky: sticky && first,
+                            selectable: selectable && first,
+                            dateLocale: dateLocale,
+                            numberLocale: numberLocale,
+                            dense: dense,
+                            selected: selected,
+                            onSelect: _this3.handleSelect,
+                            onOpenDetails: _this3.handleOpenRowDetails,
+                            childrenCount: isParentAnchor ? row.children.length : null,
+                            colId: colId,
+                            lookedUp: lookedUp
+                        }, columnProps, colRefProps));
+                    }
+                    return null;
                 }),
                 _react2.default.createElement(_Table.TableCell, {
                     style: {
@@ -344,7 +304,7 @@ var BodyRow = function (_React$Component) {
         }
     }]);
     return BodyRow;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 BodyRow.defaultProps = {
     selectable: false,
@@ -355,9 +315,7 @@ BodyRow.defaultProps = {
     sticky: false,
     live: false,
     innerRow: false,
-    lookupColumns: [],
-    fixedColumnWidth: true,
-    detailRowsOptions: {}
+    lookupColumns: []
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -368,15 +326,6 @@ 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
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Applique le style d'une ligne intégrée a un sous-tableau
      */

package/HiTable/ChildRow.js

@@ -196,8 +196,7 @@ var ChildRow = function (_React$PureComponent) {
                 dense = _props.dense,
                 sticky = _props.sticky,
                 view = _props.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']);
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view']);
 
 
             var indicator = '';
@@ -226,7 +225,10 @@ var ChildRow = function (_React$PureComponent) {
                         _Table.TableBody,
                         null,
                         _react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({
-                            row: row,
+                            row: {
+                                rowId: parentRowId,
+                                datas: parentRowDatas
+                            },
                             selectable: selectable,
                             selected: selected,
                             columns: columns,
@@ -362,6 +364,10 @@ 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/ColumnFilter.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _set = require('babel-runtime/core-js/set');
-
-var _set2 = _interopRequireDefault(_set);
-
 var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
 
 var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
@@ -95,6 +91,9 @@ var styles = exports.styles = function styles(theme) {
             padding: 10,
             color: theme.palette.neutral.normal
         },
+        menuItemSortable: {
+            paddingLeft: 8
+        },
         menuItemFilter: (0, _extends3.default)({}, theme.typography.body1, {
             color: theme.palette.neutral.dark,
             fontWeight: theme.typography.fontWeightMedium,
@@ -135,7 +134,7 @@ var styles = exports.styles = function styles(theme) {
             fontSize: 14
         },
         button: {
-            minHeight: 40,
+            height: 40,
             fontSize: 14,
             width: '50%'
         },
@@ -222,13 +221,9 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'selectAllFilters',
         value: function selectAllFilters() {
-            this.setState(function (prevState) {
-                return {
-                    selectedIdList: [].concat((0, _toConsumableArray3.default)(new _set2.default([].concat((0, _toConsumableArray3.default)(prevState.selectedIdList), (0, _toConsumableArray3.default)(prevState.suggestions.map(function (item) {
-                        return item.id;
-                    }))))))
-                };
-            });
+            this.setState({ selectedIdList: this.state.suggestions.map(function (item) {
+                    return item.id;
+                }) });
         }
 
         /**
@@ -238,15 +233,15 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'deselectAllFilters',
         value: function deselectAllFilters() {
-            this.setState(function (prevState) {
-                return {
-                    selectedIdList: prevState.selectedIdList.filter(function (item) {
-                        return prevState.suggestions.find(function (suggestion) {
-                            return suggestion.id === item;
-                        }) === undefined;
-                    })
-                };
+            var _this2 = this;
+
+            var selectedIdList = this.state.selectedIdList;
+            this.state.suggestions.map(function (item) {
+                if (_this2.state.selectedIdList.includes(item.id)) {
+                    selectedIdList.splice(_this2.state.selectedIdList.indexOf(item.id), 1);
+                }
             });
+            this.setState({ selectedIdList: selectedIdList });
         }
     }, {
         key: 'handleSort',
@@ -257,7 +252,7 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this2 = this;
+            var _this3 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -296,7 +291,7 @@ var ColumnFilter = function (_React$Component) {
                 ),
                 !!sortable && _react2.default.createElement(
                     'div',
-                    null,
+                    { className: classes.menuItemSortable },
                     _react2.default.createElement(
                         _MenuItem2.default,
                         {
@@ -350,11 +345,7 @@ var ColumnFilter = function (_React$Component) {
                 _react2.default.createElement(
                     'div',
                     { className: classes.menuItemFilter },
-                    _react2.default.createElement(
-                        'span',
-                        { style: { marginRight: 4 } },
-                        translations.filter
-                    ),
+                    translations.filter,
                     _react2.default.createElement(
                         _HiPins2.default,
                         {
@@ -391,7 +382,7 @@ var ColumnFilter = function (_React$Component) {
                     itemList: filterValueList,
                     filterPropertyList: ['label'],
                     callbackFilteredList: function callbackFilteredList(filteredList) {
-                        return _this2.setState({ suggestions: filteredList });
+                        return _this3.setState({ suggestions: filteredList });
                     },
                     placeholder: translations.search
                 }),
@@ -400,8 +391,7 @@ var ColumnFilter = function (_React$Component) {
                     itemList: suggestions,
                     selectedIdList: selectedIdList,
                     onSelect: this.toggleSelectItem,
-                    leftPadding: 28,
-                    checkbox: type !== 'icon'
+                    leftPadding: 28
                 }),
                 _react2.default.createElement(
                     'div',