@hipay/hipay-material-ui 1.0.0-beta.1 → 1.0.0-beta.11

package/HiTable/BodyCells/CellCountry.js

@@ -106,45 +106,16 @@ var CellCountry = function (_React$PureComponent) {
         key: 'render',
         value: function render() {
             var _props = this.props,
-                classes = _props.classes,
+                label = _props.label,
+                path = _props.path,
                 value = _props.value,
-                isoCode = _props.isoCode,
                 view = _props.view;
 
 
-            var path = '/static/images/countries/' + isoCode.toLowerCase() + '.svg';
-
-            var tooltipContent = _react2.default.createElement(
-                'div',
-                null,
-                _react2.default.createElement('img', { src: path, className: classes.tooltipImg }),
-                _react2.default.createElement(
-                    'span',
-                    { className: classes.tooltipLabel },
-                    value
-                )
-            );
-
             if (view === cst.VIEWS.LARGE) {
-                return _react2.default.createElement(_CellImage2.default, { view: cst.VIEWS.LARGE, value: value, path: path });
+                return _react2.default.createElement(_CellImage2.default, { value: label ? label : value, path: path, view: view });
             } else {
-                var valueElement = value;
-                if (view === cst.VIEWS.SMALL) {
-                    valueElement = isoCode.toUpperCase();
-                }
-                return _react2.default.createElement(
-                    _Tooltip2.default,
-                    { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-                    _react2.default.createElement(
-                        'div',
-                        { className: classes.wrapper },
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.label },
-                            valueElement
-                        )
-                    )
-                );
+                return _react2.default.createElement(_CellImage2.default, { value: value, path: path, view: view });
             }
         }
     }]);
@@ -159,11 +130,15 @@ CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label
      */
-    value: _propTypes2.default.string.isRequired,
+    label: _propTypes2.default.string,
     /**
-     * Code ISO
+     * Flag's image path
      */
-    isoCode: _propTypes2.default.string.isRequired,
+    path: _propTypes2.default.string,
+    /**
+     * Value - code isoa2 (uppercase)
+     */
+    value: _propTypes2.default.string.isRequired,
     /**
      * View (L/M/S)
      */

package/HiTable/BodyCells/CellIcon.js

@@ -92,7 +92,7 @@ var CellIcon = function (_React$PureComponent) {
                 view = _props.view;
 
 
-            var iconElement = _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 18 });
+            var iconElement = icon !== '' ? _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 18 }) : '';
 
             var tooltipContent = _react2.default.createElement(
                 'div',
@@ -125,6 +125,7 @@ var CellIcon = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 CellIcon.defaultProps = {
+    icon: '',
     view: 'l'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -134,8 +135,9 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     classes: _propTypes2.default.object,
     /**
      * Icône name [from material-design-icons](https://materialdesignicons.com/)
+     * used by HiIconBuilder
      */
-    icon: _propTypes2.default.string.isRequired,
+    icon: _propTypes2.default.string,
     /**
      * Label
      */

package/HiTable/BodyCells/CellImage.js

@@ -123,17 +123,29 @@ var CellImage = function (_React$PureComponent) {
             );
 
             var innerCellElement = null;
-            if (view === cst.VIEWS.SMALL) {
-                innerCellElement = _react2.default.createElement(
-                    'div',
-                    { className: classes.center },
-                    _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg })
-                );
+            if (path) {
+                if (view === cst.VIEWS.SMALL) {
+                    innerCellElement = _react2.default.createElement(
+                        'div',
+                        { className: classes.center },
+                        _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg })
+                    );
+                } else {
+                    innerCellElement = _react2.default.createElement(
+                        'div',
+                        { className: classes.wrapper },
+                        _react2.default.createElement('img', { src: path, alt: value, className: classes.img }),
+                        !!value && _react2.default.createElement(
+                            'span',
+                            { className: classes.label },
+                            value
+                        )
+                    );
+                }
             } else {
                 innerCellElement = _react2.default.createElement(
                     'div',
                     { className: classes.wrapper },
-                    _react2.default.createElement('img', { src: path, alt: value, className: classes.img }),
                     !!value && _react2.default.createElement(
                         'span',
                         { className: classes.label },
@@ -143,6 +155,7 @@ var CellImage = function (_React$PureComponent) {
             }
 
             if (view === cst.VIEWS.LARGE) {
+                // Don't add tooltip for large view
                 return innerCellElement;
             } else {
                 return _react2.default.createElement(
@@ -164,11 +177,11 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Image path
      */
-    path: _propTypes2.default.string.isRequired,
+    path: _propTypes2.default.string,
     /**
-     * Label
+     * Value
      */
-    value: _propTypes2.default.string,
+    value: _propTypes2.default.string.isRequired,
     /**
      * View (L/M/S)
      */

package/HiTable/BodyCells/CellLayout.js

@@ -83,6 +83,10 @@ var styles = exports.styles = function styles(theme) {
         lookedUp: {
             background: 'linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)',
             borderRadius: '45%'
+        },
+        pins: {
+            position: 'relative',
+            top: 3
         }
     };
 };
@@ -132,7 +136,7 @@ var CellLayout = function (_React$Component) {
                 dense = _props.dense,
                 _props$width = _props.width,
                 width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
-                fixedWidth = _props.fixedWidth,
+                fixedColumnWidth = _props.fixedColumnWidth,
                 sticky = _props.sticky,
                 selectable = _props.selectable,
                 selected = _props.selected,
@@ -150,22 +154,23 @@ var CellLayout = function (_React$Component) {
 
             var lookedUpClassName = (0, _classnames2.default)(classes.flexContent, (0, _defineProperty3.default)({}, classes.lookedUp, lookedUp));
 
+            var cellStyle = {
+                zIndex: sticky ? 12 : 11,
+                textAlign: align,
+                position: sticky ? 'relative' : 'inherit',
+                border: 'none',
+                height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+            };
+
+            if (fixedColumnWidth) {
+                cellStyle.maxWidth = _width;
+                cellStyle.minWidth = _width;
+                cellStyle.width = _width;
+            }
+
             return _react2.default.createElement(
                 _TableCell2.default,
-                {
-                    className: classes.root,
-                    style: {
-                        maxWidth: _width,
-                        minWidth: _width,
-                        width: _width,
-                        // la cellule sticky doit être au dessus des autres cellules du body
-                        zIndex: sticky ? 12 : 11,
-                        textAlign: align,
-                        position: sticky ? 'relative' : 'inherit',
-                        border: 'none',
-                        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
-                    }
-                },
+                { className: classes.root, style: cellStyle },
                 !!selectable && _react2.default.createElement(_HiCheckbox2.default, {
                     classes: { root: classes.checkbox },
                     style: { margin: dense ? 6 : 10 },
@@ -196,7 +201,7 @@ var CellLayout = function (_React$Component) {
                         },
                         _react2.default.createElement(
                             _HiPins2.default,
-                            { color: theme.palette.business.primary.normal },
+                            { color: theme.palette.business.primary.normal, className: classes.pins },
                             childrenCount
                         )
                     )
@@ -212,7 +217,7 @@ CellLayout.defaultProps = {
     selectable: false,
     selected: false,
     dense: false,
-    fixedWidth: false,
+    fixedColumnWidth: true,
     sticky: false,
     padding: 8
 };
@@ -246,9 +251,10 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     width: _propTypes2.default.number,
     /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
      */
-    fixedWidth: _propTypes2.default.bool,
+    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */

package/HiTable/BodyCells/CellSentinel.js

@@ -73,7 +73,7 @@ var CellSentinel = function (_React$PureComponent) {
     function CellSentinel(props) {
         (0, _classCallCheck3.default)(this, CellSentinel);
 
-        var _this = (0, _possibleConstructorReturn3.default)(this, (CellSentinel.__proto__ || (0, _getPrototypeOf2.default)(CellSentinel)).call(this));
+        var _this = (0, _possibleConstructorReturn3.default)(this, (CellSentinel.__proto__ || (0, _getPrototypeOf2.default)(CellSentinel)).call(this, props));
 
         _this.getColorFromFraudResult = _this.getColorFromFraudResult.bind(_this);
         return _this;
@@ -124,7 +124,8 @@ var CellSentinel = function (_React$PureComponent) {
                 fraudResult = _props.fraudResult,
                 automaticFraudReviewResult = _props.automaticFraudReviewResult,
                 pendingManualAction = _props.pendingManualAction,
-                smartDecision = _props.smartDecision;
+                smartDecision = _props.smartDecision,
+                hideFraudResult = _props.hideFraudResult;
 
 
             var scoreLabel = score > 0 ? '+' + score : '' + score;
@@ -155,14 +156,14 @@ var CellSentinel = function (_React$PureComponent) {
                 { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
                 _react2.default.createElement(
                     'div',
-                    null,
+                    { style: { textAlign: 'right' } },
                     _react2.default.createElement(_HiColoredLabel2.default, {
                         label: scoreLabel,
                         color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
                         classes: { root: classes.label },
                         active: pendingManualAction
                     }),
-                    _react2.default.createElement(_HiColoredLabel2.default, {
+                    !hideFraudResult && _react2.default.createElement(_HiColoredLabel2.default, {
                         label: fraudResult.toUpperCase().substr(0, 1),
                         color: this.getColorFromFraudResult(fraudResult),
                         classes: { root: classes.label },
@@ -184,6 +185,9 @@ var CellSentinel = function (_React$PureComponent) {
     return CellSentinel;
 }(_react2.default.PureComponent);
 
+CellSentinel.defaultProps = {
+    hideFraudResult: false
+};
 CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
@@ -197,6 +201,10 @@ CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Résultat de la fraude
      */
     fraudResult: _propTypes2.default.string.isRequired,
+    /**
+     * Si true le fraudResult ne sera pas affiché
+     */
+    hideFraudResult: _propTypes2.default.bool.isRequired,
     /**
      * Signal qu'il attend une réponse manuelle
      */

package/HiTable/BodyCells/CellStatus.js

@@ -55,6 +55,10 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-flex',
             alignItems: 'baseline',
             maxWidth: 'calc(100% - 36px)'
+        },
+        pins: {
+            position: 'relative',
+            bottom: 1
         }
     };
 };
@@ -93,7 +97,7 @@ var CellStatus = function (_React$PureComponent) {
                         _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color }),
                         _react2.default.createElement(
                             _HiPins2.default,
-                            { color: color, onClick: onOpenDetails },
+                            { color: color, onClick: onOpenDetails, className: classes.pins },
                             nbOperations
                         )
                     ) : _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
@@ -123,7 +127,7 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Statut courant de la transaction
      */
-    value: _propTypes2.default.string.isRequired,
+    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]).isRequired,
     /**
      * Code du statut courant de la transaction (détermine la couleur du label)
      */

package/HiTable/BodyCells/CellText.js

@@ -66,7 +66,8 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-block',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            whiteSpace: 'pre'
+            whiteSpace: 'pre',
+            width: '100%'
         },
         noEllipsisSpan: {
             display: 'inline-block',

package/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -71,10 +71,9 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
             var _props = this.props,
                 classes = _props.classes,
                 theme = _props.theme,
-                code = _props.code,
+                label = _props.label,
                 value = _props.value;
 
-
             var ECI_5 = 0; // authenticated
             var ECI_6 = 1; // cardholder not enrolled
             var ECI_7 = 2; //
@@ -83,7 +82,7 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
             var AUTH_2 = 5; // force 3DS
 
             var icon = null;
-            switch (code) {
+            switch (value) {
                 case ECI_5:
                     icon = _react2.default.createElement(_mdiMaterialUi.Lock, { className: classes.icon, style: { color: theme.palette.positive.normal } });
                     break;
@@ -104,7 +103,7 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
 
             return _react2.default.createElement(
                 _Tooltip2.default,
-                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+                { title: label, placement: this.props.sticky ? 'right' : 'bottom' },
                 _react2.default.createElement(
                     'div',
                     null,
@@ -135,10 +134,10 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * AUTH_1 = 4; // ask for 3DS
      * AUTH_2 = 5; // force 3DS
      */
-    code: _propTypes2.default.number,
+    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
     /**
      * Label
      */
-    value: _propTypes2.default.string
+    label: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);

package/HiTable/BodyRow.js

@@ -185,6 +185,7 @@ var BodyRow = function (_React$PureComponent) {
                 theme = _props.theme,
                 row = _props.row,
                 columns = _props.columns,
+                lookupColumns = _props.lookupColumns,
                 orderedColumns = _props.orderedColumns,
                 selectable = _props.selectable,
                 selected = _props.selected,
@@ -196,11 +197,10 @@ var BodyRow = function (_React$PureComponent) {
                 sticky = _props.sticky,
                 innerRow = _props.innerRow,
                 isDetail = _props.isDetail,
-                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'row', 'columns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'row', 'columns', 'lookupColumns', '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, {
@@ -230,67 +230,82 @@ var BodyRow = function (_React$PureComponent) {
                     key: row.rowId + '-left-cell',
                     className: patchDivClass
                 }),
-                orderedColumns.map(function (colRef) {
+                orderedColumns.map(function (colRef, index) {
+
+                    // Dynamic column settings (from OrderColumns)
                     var colRefId = colRef.colId,
                         displayed = colRef.displayed,
                         colView = colRef.view,
                         colRefProps = (0, _objectWithoutProperties3.default)(colRef, ['colId', 'displayed', 'view']);
 
-                    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,
-                            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));
+                    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);
+                        }
                     }
-                    return null;
+
+                    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,
+                        onOpenDetails: _this3.handleOpenRowDetails,
+                        childrenCount: isParentAnchor ? row.children.length : null,
+                        colId: colId,
+                        lookedUp: lookedUp
+                    }, columnProps, colRefProps));
                 }),
                 _react2.default.createElement(_Table.TableCell, {
                     style: {
@@ -315,7 +330,8 @@ BodyRow.defaultProps = {
     sticky: false,
     live: false,
     innerRow: false,
-    lookupColumns: []
+    lookupColumns: [],
+    fixedColumnWidth: true
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -326,6 +342,11 @@ BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
+    /**
+     * 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/ColumnFilter.js

@@ -5,6 +5,10 @@ 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);
@@ -221,9 +225,13 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'selectAllFilters',
         value: function selectAllFilters() {
-            this.setState({ selectedIdList: this.state.suggestions.map(function (item) {
-                    return item.id;
-                }) });
+            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;
+                    }))))))
+                };
+            });
         }
 
         /**
@@ -233,15 +241,15 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'deselectAllFilters',
         value: function deselectAllFilters() {
-            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(function (prevState) {
+                return {
+                    selectedIdList: prevState.selectedIdList.filter(function (item) {
+                        return prevState.suggestions.find(function (suggestion) {
+                            return suggestion.id === item;
+                        }) === undefined;
+                    })
+                };
             });
-            this.setState({ selectedIdList: selectedIdList });
         }
     }, {
         key: 'handleSort',
@@ -252,7 +260,7 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this3 = this;
+            var _this2 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -345,7 +353,11 @@ var ColumnFilter = function (_React$Component) {
                 _react2.default.createElement(
                     'div',
                     { className: classes.menuItemFilter },
-                    translations.filter,
+                    _react2.default.createElement(
+                        'span',
+                        { style: { marginRight: 4 } },
+                        translations.filter
+                    ),
                     _react2.default.createElement(
                         _HiPins2.default,
                         {
@@ -382,7 +394,7 @@ var ColumnFilter = function (_React$Component) {
                     itemList: filterValueList,
                     filterPropertyList: ['label'],
                     callbackFilteredList: function callbackFilteredList(filteredList) {
-                        return _this3.setState({ suggestions: filteredList });
+                        return _this2.setState({ suggestions: filteredList });
                     },
                     placeholder: translations.search
                 }),
@@ -391,7 +403,8 @@ var ColumnFilter = function (_React$Component) {
                     itemList: suggestions,
                     selectedIdList: selectedIdList,
                     onSelect: this.toggleSelectItem,
-                    leftPadding: 28
+                    leftPadding: 28,
+                    checkbox: type !== 'icon'
                 }),
                 _react2.default.createElement(
                     'div',