@hipay/hipay-material-ui 2.0.0-beta.54 → 2.0.0-beta.56

package/es/HiSelectNew/HiSelectInput.js

@@ -162,14 +162,12 @@ class HiSelectInput extends React.PureComponent {
     this.handleBlur = event => {
       if ((!this.input || !this.input.contains(event.relatedTarget)) && this.props.onBlur) {
         this.props.onBlur(event);
-      } else {
-        if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
-          this.input.focus();
-        }
+      } else if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
+        this.input.focus();
       }
     };
 
-    this.handleRef = el => {
+    this.ref = el => {
       this.input = el;
 
       if (this.props.refElement) {
@@ -180,7 +178,7 @@ class HiSelectInput extends React.PureComponent {
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
-    this.handleRef = this.handleRef.bind(this);
+    this.ref = this.ref.bind(this);
     this.handleReset = this.handleReset.bind(this);
   }
 
@@ -219,7 +217,7 @@ class HiSelectInput extends React.PureComponent {
       onBlur: this.props.onBlur,
       role: "button",
       tabIndex: "0",
-      ref: this.handleRef
+      ref: this.ref
     }, React.createElement("span", {
       className: classNames(classes.label, {
         [classes.placeholder]: value === undefined
@@ -235,8 +233,9 @@ class HiSelectInput extends React.PureComponent {
       onMouseLeave: this.props.onMouseLeave,
       onKeyDown: this.handleKeyDown,
       onFocus: this.props.onFocus,
-      onBlur: this.handleBlur,
-      buttonRef: this.handleRef
+      onBlur: this.handleBlur // buttref={this.ref}
+      ,
+      buttonRef: this.ref
     }, React.createElement("span", {
       className: classNames(classes.label, {
         [classes.placeholder]: value === undefined

package/es/HiSelectableList/HiSelectableList.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
 import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
-import { foldAccents } from '../utils/helpers';
+import { foldAccents, getNextItemSelectable } from '../utils/helpers';
+import keycode from 'keycode';
 export const styles = () => ({
   root: {
     padding: 0
@@ -23,6 +24,27 @@ class HiSelectableList extends React.PureComponent {
       this.props.onSelect(event, item);
     };
 
+    this.handleKeyDown = event => {
+      let nextItem;
+      const key = keycode(event);
+
+      if (key === 'down') {
+        event.preventDefault();
+        nextItem = getNextItemSelectable(document.activeElement, 'down');
+      } else if (key === 'up') {
+        event.preventDefault();
+        nextItem = getNextItemSelectable(document.activeElement, 'up');
+      } else if (key === 'space' || key === 'enter' && !this.props.multiple) {
+        event.preventDefault();
+        const item = this.props.options.find(elem => String(elem.id) === event.target.id);
+        this.handleSelect(null, item);
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
     this.buildRecursiveListItem = (item, level = 0) => {
       const _this$props = this.props,
             {
@@ -33,9 +55,10 @@ class HiSelectableList extends React.PureComponent {
         hoverIcon,
         icon,
         selectedItemIdList,
-        sort
+        sort,
+        onKeyDown = this.handleKeyDown
       } = _this$props,
-            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort"]);
+            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown"]);
 
       if (sort && item.children) {
         item.children.sort(this.compareItem);
@@ -51,6 +74,7 @@ class HiSelectableList extends React.PureComponent {
         icon: icon,
         level: level,
         onSelect: this.handleSelect(item),
+        onKeyDown: onKeyDown,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
 
       }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, level + 1)));
@@ -79,7 +103,6 @@ class HiSelectableList extends React.PureComponent {
     const {
       classes,
       itemList,
-      onKeyDown,
       sort
     } = this.props;
 
@@ -88,8 +111,7 @@ class HiSelectableList extends React.PureComponent {
     }
 
     return React.createElement(List, {
-      className: classes.root,
-      onKeyDown: onKeyDown
+      className: classes.root
     }, itemList.filter(item => !(item.displayed === false)) // don't remove if undefined
     .map(item => this.buildRecursiveListItem(item)));
   }

package/es/HiSelectableList/HiSelectableListItem.js

@@ -21,15 +21,20 @@ export const styles = theme => ({
   listItem: {
     backgroundColor: theme.palette.background3,
     color: theme.palette.neutral.dark,
-    padding: '5px 0',
+    padding: '5px 12px 5px 0px',
     fontWeight: theme.typography.fontWeightRegular,
     maxHeight: 56,
     display: 'inline-flex',
     alignItems: 'center',
     cursor: 'pointer',
+    '&$listItemInlineWithInfoWithoutSecondary': {
+      justifyContent: 'space-between'
+    },
+    '&$listItemWithoutSecondaryInline': {
+      display: 'block'
+    },
     '&$inline': {
       maxHeight: 40,
-      alignItems: 'flex-start',
       '& $secondaryLabel': {
         display: 'inline-block'
       }
@@ -39,6 +44,8 @@ export const styles = theme => ({
       outline: 'none'
     }
   },
+  listItemWithoutSecondaryInline: {},
+  listItemInlineWithInfoWithoutSecondary: {},
   listItemHover: {
     '&:hover:not($disabled):not($pinned)': {
       backgroundColor: theme.palette.action.hover,
@@ -81,10 +88,15 @@ export const styles = theme => ({
     width: '100%',
     minWidth: '50%',
     padding: '5px 0',
+    '&$listItemContentSelected': {
+      marginBottom: -3,
+      marginLeft: -4
+    },
     '& strong': {
       fontWeight: theme.typography.fontWeightMedium
     }
   }),
+  listItemContentSelected: {},
   label: {
     display: 'inline-block',
     margin: '1px 0',
@@ -108,15 +120,9 @@ export const styles = theme => ({
     fontSize: 12,
     textOverflow: 'ellipsis',
     textAlign: 'right',
-    margin: '4px 12px 4px 8px',
+    padding: '4px 0px 4px 8px',
     alignSelf: 'center'
   }),
-  checkbox: {
-    marginTop: 3
-  },
-  checkboxWithSecondaryInline: {
-    marginTop: '-8px'
-  },
   img: {
     width: 24,
     height: 'auto',
@@ -126,7 +132,34 @@ export const styles = theme => ({
   icon: {
     margin: '0 4px',
     verticalAlign: 'middle'
-  }
+  },
+  labelContent: {
+    display: 'flex',
+    alignItems: 'center',
+    maxWidth: '70%',
+    '&$labelWithoutSecondaryInline': {
+      maxWidth: '100%'
+    }
+  },
+  labelWithoutSecondaryInline: {},
+  infosContent: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    justifyContent: 'space-between',
+    '&$infosInlineWithoutSecondary': {
+      width: 'auto'
+    },
+    '&$infosWithoutSecondaryInline': {
+      paddingLeft: 28
+    },
+    '&$infosWithSecondaryInline': {
+      marginTop: -8
+    }
+  },
+  infosInlineWithoutSecondary: {},
+  infosWithSecondaryInline: {},
+  infosWithoutSecondaryInline: {}
 });
 /**
  * Construit un élément de liste sélectionnable (avec checkbox)
@@ -220,7 +253,8 @@ class HiSelectableListItem extends React.PureComponent {
       secondaryInline,
       secondaryLabel,
       thin,
-      type
+      type,
+      color
     } = this.props; // Return simple loader list item
 
     if (type === 'loader') {
@@ -252,26 +286,32 @@ class HiSelectableListItem extends React.PureComponent {
         [classes.selected]: selected,
         [classes.thin]: thin,
         [classes.pinned]: pinned,
-        [classes.inline]: secondaryInline
+        [classes.inline]: secondaryInline,
+        [classes.listItemWithoutSecondaryInline]: !secondaryInline,
+        [classes.listItemInlineWithInfoWithoutSecondary]: secondaryInline && info && !secondaryLabel
       }),
       disabled: disabled
     }, disabled || {
       onClick: onSelect,
       onMouseEnter: this.setHover(true),
       onMouseLeave: this.setHover(false),
-      onKeyDown: onKeyDown
+      onKeyDown
     }, {
       style: {
         paddingLeft: `${paddingLeft + level * 32}px`
       }
-    }), !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
+    }), React.createElement("div", {
+      className: classNames(classes.labelContent, {
+        [classes.labelWithoutSecondaryInline]: !secondaryInline || !secondaryLabel && !info
+      })
+    }, !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
       tabIndex: onKeyDown ? '-1' : 0,
-      checked: selected,
-      checkedIcon: checkedIcon,
       classes: {
         root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
       },
-      color: disabled ? "inherit" : "primary",
+      checked: selected,
+      checkedIcon: checkedIcon,
+      color: disabled ? 'inherit' : 'primary',
       disabled: disabled,
       icon: displayedIcon,
       indeterminate: indeterminate,
@@ -279,7 +319,8 @@ class HiSelectableListItem extends React.PureComponent {
     }), React.createElement("div", {
       className: classNames(classes.listItemContent, {
         [classes.centered]: centered,
-        [classes.primaryHighlight]: type === 'primary-highlight'
+        [classes.primaryHighlight]: type === 'primary-highlight',
+        [classes.listItemContentSelected]: selected && color
       }),
       "data-id": id
     }, type === 'icon' && icon && hideCheckbox && React.createElement(HiIcon, {
@@ -296,13 +337,19 @@ class HiSelectableListItem extends React.PureComponent {
         }
       },
       className: classes.img
-    }), this.buildItemLabel(), !!secondaryLabel && React.createElement("div", {
+    }), this.buildItemLabel())), React.createElement("div", {
+      className: classNames(classes.infosContent, {
+        [classes.infosWithoutSecondaryInline]: !secondaryInline,
+        [classes.infosWithSecondaryInline]: !secondaryInline,
+        [classes.infosInlineWithoutSecondary]: secondaryInline && !secondaryLabel
+      })
+    }, !!secondaryLabel && React.createElement("div", {
       className: classNames(classes.secondaryLabel, {
         [classes.inline]: secondaryInline
       })
-    }, secondaryLabel)), !!info && React.createElement("span", {
-      className: classes.info
-    }, info));
+    }, secondaryLabel), !!info && React.createElement("span", {
+      className: classNames(classes.info)
+    }, info)));
   }
 
 }
@@ -411,12 +458,12 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Fonction de callback à la sélection de l'élément
    */
-  onSelect: PropTypes.func,
+  onKeyDown: PropTypes.func,
 
   /**
    * Fonction de callback à la sélection de l'élément
    */
-  onKeyDown: PropTypes.func,
+  onSelect: PropTypes.func,
 
   /**
    * Padding par défaut des éléments

package/es/HiTable/HiCellBuilder.js

@@ -2,153 +2,157 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TableCell from '@material-ui/core/TableCell';
-import CellAddress from '@hipay/hipay-material-ui/HiCell/CellAddress';
-import CellDate from '@hipay/hipay-material-ui/HiCell/CellDate';
-import CellIcon from '@hipay/hipay-material-ui/HiCell/CellIcon';
-import CellImage from '@hipay/hipay-material-ui/HiCell/CellImage';
-import CellNumeric from '@hipay/hipay-material-ui/HiCell/CellNumeric';
-import CellSentinel from '@hipay/hipay-material-ui/HiCell/CellSentinel';
-import CellSentinelScore from '@hipay/hipay-material-ui/HiCell/CellSentinelScore';
-import CellText from '@hipay/hipay-material-ui/HiCell/CellText';
-import CellRate from '@hipay/hipay-material-ui/HiCell/CellRate';
-import CellPinToAction from '@hipay/hipay-material-ui/HiCell/CellPinToAction';
+import CellAddress from '../HiCell/CellAddress';
+import CellDate from '../HiCell/CellDate';
+import CellIcon from '../HiCell/CellIcon';
+import CellImage from '../HiCell/CellImage';
+import CellNumeric from '../HiCell/CellNumeric';
+import CellSentinel from '../HiCell/CellSentinel';
+import CellSentinelScore from '../HiCell/CellSentinelScore';
+import CellTextStyled from '../HiCell/CellTextStyled';
+import CellRate from '../HiCell/CellRate';
+import CellPinToAction from '../HiCell/CellPinToAction';
 import * as cst from './constants';
 
 class HiCellBuilder extends React.PureComponent {
-  createCell(cell, rowdata, locale) {
-    if (rowdata.datas[cell.colId]) {
-      let datacell = rowdata.datas[cell.colId];
-
-      if (cell.data !== undefined) {
-        const refproperties = cell.data.find(el => el.id === datacell.value);
-
-        if (refproperties) {
-          Object.keys(refproperties).forEach(key => {
-            datacell[key] = refproperties[key];
-          });
-        } else {
-          datacell = undefined;
-        }
-      }
-
-      if (datacell) {
-        switch (cell.type) {
-          case cst.TYPE_NUMERIC:
-            return React.createElement(CellNumeric, {
-              value: datacell.value,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-              precision: cell.precision,
-              currency: datacell.currency,
-              locale: datacell.locale || cell.locale || locale
-            });
-
-          case cst.TYPE_COUNTRY:
-            return React.createElement(CellImage, {
-              label: datacell.label,
-              shortLabel: datacell.id,
-              path: datacell.img,
-              size: datacell.size,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-            });
-
-          case cst.TYPE_IMAGE:
-            return React.createElement(CellImage, {
-              label: datacell.label,
-              shortLabel: datacell.id,
-              path: datacell.img,
-              size: datacell.size,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-            });
-
-          case cst.TYPE_RATE:
-            return React.createElement(CellRate, {
-              indicator: datacell.indicator,
-              isPositive: datacell.isPositive,
-              locale: datacell.locale || cell.locale || locale,
-              value: datacell.value,
-              trendchip: datacell.trendchip,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-            });
-
-          case cst.TYPE_ADDRESS:
-            return React.createElement(CellAddress, {
-              city: datacell.city,
-              country: datacell.country,
-              isoCountry: datacell.isoCountry,
-              name: datacell.name,
-              postalCode: datacell.postalCode,
-              streetAddress: datacell.streetAddress,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-            });
+  constructor(...args) {
+    super(...args);
 
-          case cst.TYPE_DATE:
-            return React.createElement(CellDate, {
-              date: datacell.date,
-              displayTime: datacell.displayTime,
-              formatShort: datacell.formatShort,
-              locale: datacell.locale || cell.precision || locale,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-            });
-
-          case cst.TYPE_ICON:
-            return React.createElement(CellIcon, {
-              color: datacell.color,
-              icon: datacell.icon,
-              label: datacell.label,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-              size: cell.size
-            });
-
-          case cst.TYPE_THIRD_PARTY_SECURITY:
-            return React.createElement(CellIcon, {
-              color: datacell.color,
-              icon: datacell.icon,
-              label: datacell.label,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-              size: cell.size
-            });
-
-          case cst.TYPE_SENTINEL:
-            return React.createElement(CellSentinel, {
-              color: datacell.color,
-              label: datacell.label,
-              letter: datacell.label2,
-              active: datacell.active,
-              reviewer: datacell.reviewer,
-              outlined: datacell.outlined
-            });
-
-          case cst.TYPE_SENTINEL_SCORE:
-            return React.createElement(CellSentinelScore, {
-              value: datacell.value,
-              result: datacell.result
-            });
+    this.createCell = (cell, rowdata, locale) => {
+      if (rowdata.datas[cell.colId]) {
+        let datacell = rowdata.datas[cell.colId];
 
-          case cst.TYPE_PIN_TO_ACTION:
-            return React.createElement(CellPinToAction, {
-              number: datacell.number,
-              onClick: datacell.onClick
-            });
+        if (cell.data !== undefined) {
+          const refproperties = cell.data.find(el => el.id === datacell.value);
 
-          case cst.TYPE_ACCOUNT_NUMBER:
-            return React.createElement(CellText, {
-              label: datacell.value,
-              color: datacell.color,
-              ellipsis: datacell.ellipse
+          if (refproperties) {
+            Object.keys(refproperties).forEach(key => {
+              datacell[key] = refproperties[key];
             });
+          } else {
+            datacell = undefined;
+          }
+        }
 
-          default:
-            return React.createElement(CellText, {
-              label: datacell.value,
-              color: datacell.color,
-              ellipsis: datacell.ellipse,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-            });
+        if (datacell) {
+          switch (cell.type) {
+            case cst.TYPE_NUMERIC:
+              return React.createElement(CellNumeric, {
+                value: datacell.value,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                precision: cell.precision,
+                currency: datacell.currency,
+                locale: datacell.locale || cell.locale || locale
+              });
+
+            case cst.TYPE_COUNTRY:
+              return React.createElement(CellImage, {
+                label: datacell.label,
+                shortLabel: datacell.id,
+                path: datacell.img,
+                size: datacell.size,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+
+            case cst.TYPE_IMAGE:
+              return React.createElement(CellImage, {
+                label: datacell.label,
+                shortLabel: datacell.id,
+                path: datacell.img,
+                size: datacell.size || cell.size,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                fallbackImage: datacell.fallbackImage,
+                title: cell.title ? cell.title(datacell, cell) : datacell.title
+              });
+
+            case cst.TYPE_RATE:
+              return React.createElement(CellRate, {
+                indicator: datacell.indicator,
+                isPositive: datacell.isPositive,
+                locale: datacell.locale || cell.locale || locale,
+                value: datacell.value,
+                trendchip: datacell.trendchip,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+
+            case cst.TYPE_ADDRESS:
+              return React.createElement(CellAddress, {
+                city: datacell.city,
+                country: datacell.country,
+                isoCountry: datacell.isoCountry,
+                name: datacell.name,
+                postalCode: datacell.postalCode,
+                streetAddress: datacell.streetAddress,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+
+            case cst.TYPE_DATE:
+              return React.createElement(CellDate, {
+                date: datacell.date,
+                displayTime: datacell.displayTime,
+                formatShort: datacell.formatShort,
+                locale: datacell.locale || cell.precision || locale,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+
+            case cst.TYPE_ICON:
+              return React.createElement(CellIcon, {
+                color: datacell.color,
+                icon: datacell.icon,
+                label: datacell.label,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                size: cell.size
+              });
+
+            case cst.TYPE_THIRD_PARTY_SECURITY:
+              return React.createElement(CellIcon, {
+                color: datacell.color,
+                icon: datacell.icon,
+                label: datacell.label,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                size: cell.size
+              });
+
+            case cst.TYPE_SENTINEL:
+              return React.createElement(CellSentinel, {
+                color: datacell.color,
+                label: datacell.label,
+                letter: datacell.label2,
+                active: datacell.active,
+                reviewer: datacell.reviewer,
+                outlined: datacell.outlined
+              });
+
+            case cst.TYPE_SENTINEL_SCORE:
+              return React.createElement(CellSentinelScore, {
+                value: datacell.value,
+                result: datacell.result,
+                active: datacell.active
+              });
+
+            case cst.TYPE_PIN_TO_ACTION:
+              return React.createElement(CellPinToAction, {
+                number: datacell.number // eslint-disable-next-line react/jsx-handler-names
+                ,
+                onClick: datacell.onClick
+              });
+
+            case cst.TYPE_ACCOUNT_NUMBER:
+            case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
+            default:
+              return React.createElement(CellTextStyled, {
+                active: datacell.active,
+                color: datacell.color,
+                label: datacell.label,
+                title: cell.title ? cell.title(datacell, cell) : datacell.title,
+                value: datacell.value
+              });
+          }
         }
       }
-    }
 
-    return null;
+      return null;
+    };
   }
 
   render() {

package/es/HiTable/HiTableHeader.js

@@ -5,15 +5,16 @@ import withStyles from '../styles/withStyles';
 import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
-import Tooltip from '@material-ui/core/Tooltip';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import * as cst from './constants';
-
-const styles = theme => ({
+const styles = {
   icon: {
     color: '#00ADE9'
+  },
+  headerRoot: {
+    cursor: 'inherit'
   }
-});
+};
 
 class HiTableHeader extends React.PureComponent {
   constructor(...args) {
@@ -38,29 +39,36 @@ class HiTableHeader extends React.PureComponent {
         height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT,
         whiteSpace: 'nowrap'
       }
-    }, Object.keys(columns).map(function (key) {
-      const column = columns[key];
+    }, Object.keys(columns).map(key => {
+      const {
+        colId,
+        type,
+        label,
+        smallLabel,
+        view,
+        headerTooltip
+      } = columns[key];
+      const finalLabel = view === 's' ? smallLabel : label;
       return React.createElement(TableCell, {
-        key: column.colId,
-        sortDirection: orderBy === column.colId ? order : false,
+        key: colId,
+        sortDirection: orderBy === colId ? order : false,
         style: {
           border: 'none',
-          borderBottom: orderBy === column.colId ? 'solid 1px #00ADE9' : 'none',
+          borderBottom: orderBy === colId ? 'solid 1px #00ADE9' : 'none',
           paddingRight: '13px',
           paddingLeft: '13px'
         },
-        numeric: !!cst.ALIGN_RIGHT_TYPES.includes(column.type)
-      }, sortable ? React.createElement(Tooltip, {
-        title: "Sort",
-        enterDelay: 300
-      }, React.createElement(TableSortLabel, {
-        active: orderBy === column.colId,
+        numeric: cst.ALIGN_RIGHT_TYPES.includes(type),
+        title: headerTooltip
+      }, sortable ? React.createElement(TableSortLabel, {
+        active: orderBy === colId,
         direction: order,
-        onClick: this.createSortHandler(column.colId),
+        onClick: this.createSortHandler(colId),
         classes: {
           icon: classes.icon
-        }
-      }, column.label)) : column.label);
+        },
+        title: headerTooltip || label
+      }, finalLabel) : finalLabel);
     }, this)));
   }