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

package/HiTable/BodyCells/CellImage.js

@@ -5,6 +5,10 @@ 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);
@@ -93,8 +97,8 @@ var styles = exports.styles = function styles(theme) {
  * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
  */
 
-var CellImage = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellImage, _React$PureComponent);
+var CellImage = function (_React$Component) {
+    (0, _inherits3.default)(CellImage, _React$Component);
 
     function CellImage() {
         (0, _classCallCheck3.default)(this, CellImage);
@@ -102,6 +106,11 @@ var CellImage = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(CellImage, [{
+        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,
@@ -168,7 +177,7 @@ var CellImage = function (_React$PureComponent) {
         }
     }]);
     return CellImage;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellImage.defaultProps = {
     size: 24

package/HiTable/BodyCells/CellNumeric.js

@@ -5,6 +5,10 @@ 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);
@@ -63,8 +67,8 @@ var styles = exports.styles = function styles(theme) {
  * Cette cellule permet d'afficher un volume ou un montant avec devise
  */
 
-var CellNumeric = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellNumeric, _React$PureComponent);
+var CellNumeric = function (_React$Component) {
+    (0, _inherits3.default)(CellNumeric, _React$Component);
 
     function CellNumeric() {
         (0, _classCallCheck3.default)(this, CellNumeric);
@@ -72,6 +76,11 @@ var CellNumeric = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(CellNumeric, [{
+        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,
@@ -109,7 +118,7 @@ var CellNumeric = function (_React$PureComponent) {
         }
     }]);
     return CellNumeric;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
     /**

package/HiTable/BodyCells/CellRate.js

@@ -9,6 +9,10 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
+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);
@@ -99,8 +103,8 @@ var styles = exports.styles = function styles(theme) {
  * avec une icône d'évolution (optionnelle) et un indicateur du type de données représentées (optionnel)
  */
 
-var CellRate = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellRate, _React$PureComponent);
+var CellRate = function (_React$Component) {
+    (0, _inherits3.default)(CellRate, _React$Component);
 
     function CellRate() {
         (0, _classCallCheck3.default)(this, CellRate);
@@ -108,6 +112,11 @@ var CellRate = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(CellRate, [{
+        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 _classNames, _classNames2;
@@ -159,7 +168,7 @@ var CellRate = function (_React$PureComponent) {
         }
     }]);
     return CellRate;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellRate.defaultProps = {
     isPositive: true

package/HiTable/BodyCells/CellSentinel.js

@@ -9,18 +9,22 @@ var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _stringify = require('babel-runtime/core-js/json/stringify');
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _stringify2 = _interopRequireDefault(_stringify);
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 
-var _createClass3 = _interopRequireDefault(_createClass2);
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
 
 var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
 
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
 var _inherits2 = require('babel-runtime/helpers/inherits');
 
 var _inherits3 = _interopRequireDefault(_inherits2);
@@ -68,8 +72,14 @@ var styles = exports.styles = {
  * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
  */
 
-var CellSentinel = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellSentinel, _React$PureComponent);
+var CellSentinel = function (_React$Component) {
+    (0, _inherits3.default)(CellSentinel, _React$Component);
+    (0, _createClass3.default)(CellSentinel, [{
+        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);
+        }
+    }]);
 
     function CellSentinel(props) {
         (0, _classCallCheck3.default)(this, CellSentinel);
@@ -184,7 +194,7 @@ var CellSentinel = function (_React$PureComponent) {
         }
     }]);
     return CellSentinel;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellSentinel.defaultProps = {
     hideFraudResult: false

package/HiTable/BodyCells/CellStatus.js

@@ -5,6 +5,10 @@ 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);
@@ -63,8 +67,8 @@ var styles = exports.styles = function styles(theme) {
     };
 };
 
-var CellStatus = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellStatus, _React$PureComponent);
+var CellStatus = function (_React$Component) {
+    (0, _inherits3.default)(CellStatus, _React$Component);
 
     function CellStatus() {
         (0, _classCallCheck3.default)(this, CellStatus);
@@ -72,6 +76,11 @@ var CellStatus = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(CellStatus, [{
+        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,
@@ -106,7 +115,7 @@ var CellStatus = function (_React$PureComponent) {
         }
     }]);
     return CellStatus;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellStatus.defaultProps = {
     nbOperations: 0

package/HiTable/BodyCells/CellText.js

@@ -9,6 +9,10 @@ var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
 
 var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
 
+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);
@@ -49,36 +53,39 @@ var _constants = require('../constants');
 
 var cst = _interopRequireWildcard(_constants);
 
+var _HiColoredLabel = require('../../HiColoredLabel');
+
+var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
+
+var _colorManipulator = require('../../styles/colorManipulator');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        leftEllipsisSpan: {
-            display: 'inline-block',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'pre',
-            direction: 'rtl'
-        },
-        rightEllipsisSpan: {
-            display: 'inline-block',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'pre',
-            width: '100%'
-        },
-        noEllipsisSpan: {
-            display: 'inline-block',
-            overflow: 'hidden',
-            whiteSpace: 'pre'
-        }
-    };
+var styles = exports.styles = {
+    leftEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        direction: 'rtl'
+    },
+    rightEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre'
+    },
+    noEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        whiteSpace: 'pre'
+    }
 };
 
-var CellText = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellText, _React$PureComponent);
+var CellText = function (_React$Component) {
+    (0, _inherits3.default)(CellText, _React$Component);
 
     function CellText(props) {
         (0, _classCallCheck3.default)(this, CellText);
@@ -102,6 +109,11 @@ var CellText = function (_React$PureComponent) {
         value: function componentDidMount() {
             this.buildEllipsis();
         }
+    }, {
+        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: 'componentDidUpdate',
         value: function componentDidUpdate() {
@@ -134,8 +146,9 @@ var CellText = function (_React$PureComponent) {
 
             /**
              * Calcul l'espace pris par les 2 spans (les 2 moitiés du texte),
-             * si ils dépassent la largeur de la cellule, diminue d'autant et proportionnellement chaque span
-             * ajoute l'ellipse à gauche de la deuxième moitié du texte.
+             * si ils dépassent la largeur de la cellule :
+             * - diminue d'autant et proportionnellement chaque span
+             * - ajoute l'ellipse à gauche de la deuxième moitié du texte.
              */
             if (this.props.ellipsis === cst.ELLIPSIS_MIDDLE) {
                 if (this.cellText !== null) {
@@ -165,7 +178,8 @@ var CellText = function (_React$PureComponent) {
             var _props = this.props,
                 classes = _props.classes,
                 value = _props.value,
-                ellipsis = _props.ellipsis;
+                ellipsis = _props.ellipsis,
+                color = _props.color;
 
 
             var start = void 0,
@@ -185,9 +199,15 @@ var CellText = function (_React$PureComponent) {
                     }
                     valueElement = _react2.default.createElement(
                         'div',
-                        { ref: function ref(div) {
+                        {
+                            ref: function ref(div) {
                                 _this2.cellText = div;
-                            } },
+                            },
+                            style: {
+                                backgroundColor: color || 'inherit',
+                                color: color ? (0, _colorManipulator.getContrastedTextColor)(color, '#4C4C4C', '#FFF') : 'inherit'
+                            }
+                        },
                         _react2.default.createElement(
                             'span',
                             { className: classes.rightEllipsisSpan },
@@ -207,9 +227,15 @@ var CellText = function (_React$PureComponent) {
                     end = valueString.substr(Math.round(valueString.length / 2));
                     valueElement = _react2.default.createElement(
                         'div',
-                        { ref: function ref(div) {
+                        {
+                            ref: function ref(div) {
                                 _this2.cellText = div;
-                            } },
+                            },
+                            style: {
+                                backgroundColor: color || 'inherit',
+                                color: color ? (0, _colorManipulator.getContrastedTextColor)(color, '#4C4C4C', '#FFF') : 'inherit'
+                            }
+                        },
                         _react2.default.createElement(
                             'span',
                             { className: classes.noEllipsisSpan },
@@ -224,7 +250,11 @@ var CellText = function (_React$PureComponent) {
                     break;
 
                 case cst.ELLIPSIS_LEFT:
-                    valueElement = _react2.default.createElement(
+                    valueElement = color ? _react2.default.createElement(_HiColoredLabel2.default, {
+                        className: classes.leftEllipsisSpan,
+                        label: valueString,
+                        color: color
+                    }) : _react2.default.createElement(
                         'div',
                         { className: classes.leftEllipsisSpan, style: { width: '100%' } },
                         valueString
@@ -233,7 +263,11 @@ var CellText = function (_React$PureComponent) {
 
                 case cst.ELLIPSIS_RIGHT:
                 default:
-                    valueElement = _react2.default.createElement(
+                    valueElement = color ? _react2.default.createElement(_HiColoredLabel2.default, {
+                        className: classes.rightEllipsisSpan,
+                        label: valueString,
+                        color: color
+                    }) : _react2.default.createElement(
                         'div',
                         { className: classes.rightEllipsisSpan, style: { width: '100%' } },
                         valueString
@@ -249,7 +283,7 @@ var CellText = function (_React$PureComponent) {
         }
     }]);
     return CellText;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellText.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -257,12 +291,16 @@ CellText.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: _propTypes2.default.object,
     /**
-     * Valeur à afficher
+     * Couleur du text & du background
      */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired,
+    color: _propTypes2.default.string,
     /**
      * Ellipsis
      */
-    ellipsis: _propTypes2.default.oneOf(['left', 'right', 'middle', 'name', 'after-first-word'])
+    ellipsis: _propTypes2.default.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
+    /**
+     * Valeur à afficher
+     */
+    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellText' })(CellText);

package/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -5,6 +5,10 @@ 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);
@@ -58,8 +62,8 @@ var styles = exports.styles = {
  */
 // @inheritedComponent CellLayout
 
-var CellThirdPartySecurity = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellThirdPartySecurity, _React$PureComponent);
+var CellThirdPartySecurity = function (_React$Component) {
+    (0, _inherits3.default)(CellThirdPartySecurity, _React$Component);
 
     function CellThirdPartySecurity() {
         (0, _classCallCheck3.default)(this, CellThirdPartySecurity);
@@ -67,6 +71,11 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
     }
 
     (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,
@@ -133,7 +142,7 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
         }
     }]);
     return CellThirdPartySecurity;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
     /**

package/HiTable/BodyRow.js

@@ -17,6 +17,10 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 
+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);
@@ -104,8 +108,8 @@ var styles = exports.styles = function styles(theme) {
     };
 };
 
-var BodyRow = function (_React$PureComponent) {
-    (0, _inherits3.default)(BodyRow, _React$PureComponent);
+var BodyRow = function (_React$Component) {
+    (0, _inherits3.default)(BodyRow, _React$Component);
 
     function BodyRow(props) {
         (0, _classCallCheck3.default)(this, BodyRow);
@@ -133,6 +137,11 @@ var BodyRow = function (_React$PureComponent) {
     }
 
     (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
@@ -337,7 +346,7 @@ var BodyRow = function (_React$PureComponent) {
         }
     }]);
     return BodyRow;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 BodyRow.defaultProps = {
     selectable: false,

package/HiTable/ColumnFilter.js

@@ -95,9 +95,6 @@ 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,
@@ -299,7 +296,7 @@ var ColumnFilter = function (_React$Component) {
                 ),
                 !!sortable && _react2.default.createElement(
                     'div',
-                    { className: classes.menuItemSortable },
+                    null,
                     _react2.default.createElement(
                         _MenuItem2.default,
                         {

package/HiTable/HeaderCell.js

@@ -9,6 +9,10 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
+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);
@@ -150,21 +154,22 @@ var styles = exports.styles = function styles(theme) {
  * Construit une cellule d'entête avec le titre, clickable, triable et filtrable
  */
 
-var HeaderCell = function (_React$PureComponent) {
-    (0, _inherits3.default)(HeaderCell, _React$PureComponent);
+var HeaderCell = function (_React$Component) {
+    (0, _inherits3.default)(HeaderCell, _React$Component);
 
     function HeaderCell(props) {
         (0, _classCallCheck3.default)(this, HeaderCell);
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HeaderCell.__proto__ || (0, _getPrototypeOf2.default)(HeaderCell)).call(this, props));
 
+        _this.anchorEl = null;
+
         _this.onFilterClick = function (event, columnDataset) {
             _this.openFilterMenu(event, columnDataset);
         };
 
         _this.state = {
             filterOpen: false,
-            anchorEl: null,
             menuFilters: []
         };
 
@@ -177,18 +182,24 @@ var HeaderCell = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(HeaderCell, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(nextProps) !== (0, _stringify2.default)(this.props) || (0, _stringify2.default)(nextState) !== (0, _stringify2.default)(this.state);
+        }
+    }, {
         key: 'openFilterMenu',
         value: function openFilterMenu(event, columnDataset) {
             this.setState({
                 filterOpen: true,
-                anchorEl: event.currentTarget,
                 menuFilters: columnDataset
             });
+            this.anchorEl = event.currentTarget;
         }
     }, {
         key: 'handleClose',
         value: function handleClose() {
-            this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
+            this.setState({ filterOpen: false, menuFilters: [] });
+            this.anchorEl = null;
         }
 
         /**
@@ -236,7 +247,6 @@ var HeaderCell = function (_React$PureComponent) {
                 translations = _props.translations;
             var _state = this.state,
                 filterOpen = _state.filterOpen,
-                anchorEl = _state.anchorEl,
                 menuFilters = _state.menuFilters;
 
 
@@ -318,7 +328,6 @@ var HeaderCell = function (_React$PureComponent) {
                                     _filterable ? _this2.onFilterClick(event, filterSource) : _this2.handleSort(sortDirection === 'asc' ? 'desc' : 'asc');
                                 }
                             },
-                            align === 'right' && _icons,
                             _react2.default.createElement(
                                 'span',
                                 {
@@ -326,7 +335,7 @@ var HeaderCell = function (_React$PureComponent) {
                                 },
                                 view !== 's' ? title : smallTitle || title
                             ),
-                            align !== 'right' && _icons
+                            _icons
                         ) : _react2.default.createElement(
                             'div',
                             {
@@ -353,7 +362,7 @@ var HeaderCell = function (_React$PureComponent) {
                     filterValueList: menuFilters,
                     isOpen: filterOpen,
                     onClose: this.handleClose,
-                    anchorEl: anchorEl,
+                    anchorEl: this.anchorEl,
                     sortable: sortable,
                     onSort: this.handleSort,
                     onFilterChange: this.handleFilterChange,
@@ -363,7 +372,7 @@ var HeaderCell = function (_React$PureComponent) {
         }
     }]);
     return HeaderCell;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 HeaderCell.defaultProps = {
     selectable: false,
@@ -375,7 +384,8 @@ HeaderCell.defaultProps = {
     dense: false,
     fixedColumnWidth: true,
     sticky: true,
-    padding: 8
+    padding: 8,
+    translations: {}
 };
 HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**