@hipay/hipay-material-ui 2.0.0-beta.51 → 2.0.0-beta.53

package/HiCheckbox/HiCheckbox.js

@@ -74,8 +74,8 @@ exports.styles = styles;
 
 var HiCheckbox =
 /*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(HiCheckbox, _React$Component);
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiCheckbox, _React$PureComponent);
 
   function HiCheckbox(props) {
     var _this;
@@ -158,7 +158,7 @@ function (_React$Component) {
     }
   }]);
   return HiCheckbox;
-}(_react.default.Component);
+}(_react.default.PureComponent);
 
 HiCheckbox.defaultProps = {
   checked: false,

package/HiChip/HiChip.js

@@ -97,7 +97,8 @@ var styles = function styles(theme) {
       '&:hover, &:focus': {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.grey[300]
-      }
+      },
+      position: 'relative'
     },
     badge: {
       height: 16,
@@ -119,7 +120,7 @@ var handleKeyDown = function handleKeyDown(e, fn) {
 function HiChip(props) {
   var _classNames;
 
-  var label = props.label,
+  var className = props.className,
       classes = props.classes,
       fallbackImage = props.fallbackImage,
       icon = props.icon,
@@ -127,6 +128,7 @@ function HiChip(props) {
       iconSize = _props$iconSize === void 0 ? 20 : _props$iconSize,
       id = props.id,
       img = props.img,
+      label = props.label,
       onPrevious = props.onPrevious,
       onNext = props.onNext,
       onDelete = props.onDelete,
@@ -140,7 +142,7 @@ function HiChip(props) {
       titlePrevious = props.titlePrevious;
   return _react.default.createElement("div", {
     id: id,
-    className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames, classes.leftIcon, icon), _classNames)),
+    className: (0, _classnames.default)(classes.root, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames, classes.leftIcon, icon), _classNames)),
     title: title
   }, icon && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
@@ -209,6 +211,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: _propTypes.default.object,
 
+  /**
+   * Surcharge les classes du composant
+   */
+  className: _propTypes.default.object,
+
   /**
    * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
    */

package/HiColoredLabel/HiColoredLabel.js

@@ -136,13 +136,14 @@ function HiColoredLabel(props) {
       color = props.color,
       active = props.active,
       fontWeight = props.fontWeight,
+      style = props.style,
       theme = props.theme,
-      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "label", "color", "active", "fontWeight", "theme"]);
+      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "label", "color", "active", "fontWeight", "style", "theme"]);
   var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   var isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
   return _react.default.createElement("div", (0, _extends2.default)({
     className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), _classNames), className),
-    style: (0, _extends2.default)({}, isHexColor && {
+    style: (0, _extends2.default)({}, style, isHexColor && {
       backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
       color: active ? theme.palette.getContrastText(color) : color
     }, fontWeight && {

package/HiPin/HiPin.js

@@ -25,7 +25,7 @@ var styles = function styles(theme) {
       display: 'inline-block',
       padding: '0 9px',
       height: 16,
-      lineHeight: '18px',
+      lineHeight: '16px',
       minWidth: 25,
       textAlign: 'center',
       borderRadius: '45px',

package/HiSelectNew/HiNestedSelectContent.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getRecursiveFinalItemIdList = getRecursiveFinalItemIdList;
 exports.findFinalItemRecursively = findFinalItemRecursively;
-exports.default = exports.styles = void 0;
+exports.default = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -17,12 +17,10 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -33,16 +31,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _HiSelectContent = _interopRequireDefault(require("./HiSelectContent"));
 
-var _HiIcon = _interopRequireDefault(require("../HiIcon"));
-
-var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
-
 var _helpers = require("../utils/helpers");
 
 // @inheritedComponent HiSelectContent
 
 /**
- * Return array of final item id in nested list (via props chlidren)
+ * Return array of final item id in nested list (via props children)
  * @param itemList
  * @param finalItemIdList
  * @returns {*[]}
@@ -156,50 +150,6 @@ function buildFilteredItemList(itemList) {
     v: visibleParent
   });
 }
-
-var styles = function styles(theme) {
-  return {
-    root: {
-      backgroundColor: theme.palette.background2,
-      maxWidth: 500,
-      width: '100%',
-      position: 'relative'
-    },
-    popper: {
-      // width: '100%',
-      zIndex: 1200
-    },
-    paper: {
-      borderRadius: '0px 2px',
-      maxHeight: 480,
-      transition: 'none !important'
-    },
-    labelImg: {
-      height: 18,
-      width: 'auto',
-      margin: '0 4px',
-      verticalAlign: 'middle'
-    },
-    selectIconLabel: (0, _extends2.default)({
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      paddingRight: 16
-    }, theme.typography.b1, {
-      display: 'inline-flex',
-      width: '100%'
-    }),
-    selectImgLabel: (0, _extends2.default)({
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      paddingRight: 16
-    }, theme.typography.b1, {
-      display: 'inline-flex',
-      width: '100%'
-    })
-  };
-};
 /**
  * HiNestedSelectContent hérite du composant HiSelectContent
  *
@@ -214,18 +164,23 @@ var styles = function styles(theme) {
  */
 
 
-exports.styles = styles;
-
 var HiNestedSelectContent =
 /*#__PURE__*/
 function (_React$PureComponent) {
   (0, _inherits2.default)(HiNestedSelectContent, _React$PureComponent);
 
-  function HiNestedSelectContent(props) {
+  function HiNestedSelectContent() {
+    var _getPrototypeOf2;
+
     var _this;
 
     (0, _classCallCheck2.default)(this, HiNestedSelectContent);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiNestedSelectContent).call(this, props));
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiNestedSelectContent)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
     _this.handleSelect = function (event, item) {
       var _this$props = _this.props,
@@ -329,20 +284,8 @@ function (_React$PureComponent) {
       };
     };
 
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
-  /**
-   * Call onChange with the updated value
-   *
-   * - handle single value
-   * - handle multiple value
-   * - handle '_all' id
-   *
-   * @param event
-   * @param item
-   */
-
 
   (0, _createClass2.default)(HiNestedSelectContent, [{
     key: "render",
@@ -463,10 +406,5 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array])
 } : {};
-
-var _default = (0, _withStyles.default)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiNestedSelectContent'
-})(HiNestedSelectContent);
-
+var _default = HiNestedSelectContent;
 exports.default = _default;

package/HiSelectableList/HiSelectableListItem.js

@@ -45,6 +45,11 @@ var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _helpers = require("../utils/helpers");
 
+var _pure = _interopRequireDefault(require("recompose/pure"));
+
+var PureListSubheader = (0, _pure.default)(_ListSubheader.default);
+var PureListItem = (0, _pure.default)(_ListItem.default);
+
 var styles = function styles(theme) {
   return {
     root: {
@@ -170,8 +175,8 @@ exports.styles = styles;
 
 var HiSelectableListItem =
 /*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(HiSelectableListItem, _React$Component);
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiSelectableListItem, _React$PureComponent);
 
   function HiSelectableListItem(props) {
     var _this;
@@ -256,6 +261,7 @@ function (_React$Component) {
           fallbackImage = _this$props2.fallbackImage,
           hideCheckbox = _this$props2.hideCheckbox,
           onSelect = _this$props2.onSelect,
+          onKeyDown = _this$props2.onKeyDown,
           indeterminate = _this$props2.indeterminate,
           indeterminateIcon = _this$props2.indeterminateIcon,
           icon = _this$props2.icon,
@@ -288,7 +294,7 @@ function (_React$Component) {
         displayedIcon = icon;
       }
 
-      var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+      var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
       return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
         id: id,
         tabIndex: disabled ? '-1' : 0,
@@ -301,12 +307,14 @@ function (_React$Component) {
       }, disabled || {
         onClick: onSelect,
         onMouseEnter: this.setHover(true),
-        onMouseLeave: this.setHover(false)
+        onMouseLeave: this.setHover(false),
+        onKeyDown: onKeyDown
       }, {
         style: {
           paddingLeft: "".concat(paddingLeft + level * 32, "px")
         }
       }), !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
+        tabIndex: onKeyDown ? '-1' : 0,
         checked: selected,
         checkedIcon: checkedIcon,
         classes: {
@@ -342,7 +350,7 @@ function (_React$Component) {
     }
   }]);
   return HiSelectableListItem;
-}(_react.default.Component);
+}(_react.default.PureComponent);
 
 HiSelectableListItem.defaultProps = {
   centered: false,
@@ -450,6 +458,11 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSelect: _propTypes.default.func,
 
+  /**
+   * Fonction de callback à la sélection de l'élément
+   */
+  onKeyDown: _propTypes.default.func,
+
   /**
    * Padding par défaut des éléments
    */

package/HiTable/HiTableRow.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -27,6 +29,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
@@ -48,6 +52,9 @@ var styles = function styles(theme) {
       '&:hover, &:focus': {
         backgroundColor: "".concat(theme.palette.action.hover, " !important")
       }
+    },
+    clicableRow: {
+      cursor: 'pointer'
     }
   };
 };
@@ -88,7 +95,7 @@ function (_React$PureComponent) {
           locale = _this$props.locale,
           rowdata = _this$props.rowdata;
       return _react.default.createElement(_TableRow.default, {
-        className: classes.row,
+        className: (0, _classnames.default)(classes.row, (0, _defineProperty2.default)({}, classes.clicableRow, this.props.onClick)),
         hover: true,
         onClick: function onClick(event) {
           return _this2.handleClick(event, rowdata);
@@ -105,10 +112,10 @@ function (_React$PureComponent) {
           height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
         },
         tabIndex: 0
-      }, Object.keys(columns).map(function (key) {
+      }, Object.keys(columns).map(function (column) {
         return _react.default.createElement(_HiCellBuilder.default, {
-          key: columns[key].colId,
-          column: columns[key],
+          key: columns[column].colId,
+          column: columns[column],
           data: rowdata,
           locale: locale
         });

package/es/HiCheckbox/HiCheckbox.js

@@ -38,7 +38,7 @@ export const styles = theme => ({
   }
 });
 
-class HiCheckbox extends React.Component {
+class HiCheckbox extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);

package/es/HiChip/HiChip.js

@@ -78,7 +78,8 @@ export const styles = theme => ({
     '&:hover, &:focus': {
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.grey[300]
-    }
+    },
+    position: 'relative'
   },
   badge: {
     height: 16,
@@ -96,13 +97,14 @@ const handleKeyDown = (e, fn) => {
 
 function HiChip(props) {
   const {
-    label,
+    className,
     classes,
     fallbackImage,
     icon,
     iconSize = 20,
     id,
     img,
+    label,
     onPrevious,
     onNext,
     onDelete,
@@ -117,7 +119,7 @@ function HiChip(props) {
   } = props;
   return React.createElement("div", {
     id: id,
-    className: classNames(classes.root, {
+    className: classNames(classes.root, className, {
       [classes.leftNavigation]: onPrevious,
       [classes.rightNavigation]: onNext,
       [classes.deletable]: onDelete,
@@ -185,6 +187,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: PropTypes.object,
 
+  /**
+   * Surcharge les classes du composant
+   */
+  className: PropTypes.object,
+
   /**
    * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
    */

package/es/HiColoredLabel/HiColoredLabel.js

@@ -112,9 +112,10 @@ function HiColoredLabel(props) {
     color,
     active,
     fontWeight,
+    style,
     theme
   } = props,
-        other = _objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "fontWeight", "theme"]);
+        other = _objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "fontWeight", "style", "theme"]);
 
   const isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   const isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
@@ -125,7 +126,7 @@ function HiColoredLabel(props) {
       [classes[`activeColor${capitalize(color)}`]]: active && isHiColor,
       [classes[`color${capitalize(color)}`]]: !active && isHiColor
     }, className),
-    style: _objectSpread({}, isHexColor && {
+    style: _objectSpread({}, style, isHexColor && {
       backgroundColor: active ? color : fade(color, 0.08),
       color: active ? theme.palette.getContrastText(color) : color
     }, fontWeight && {

package/es/HiPin/HiPin.js

@@ -8,7 +8,7 @@ export const styles = theme => ({
     display: 'inline-block',
     padding: '0 9px',
     height: 16,
-    lineHeight: '18px',
+    lineHeight: '16px',
     minWidth: 25,
     textAlign: 'center',
     borderRadius: '45px',

package/es/HiSelectNew/HiNestedSelectContent.js

@@ -5,11 +5,9 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import HiSelectContent from './HiSelectContent';
-import HiIcon from '../HiIcon';
-import withStyles from '../styles/withStyles';
 import { foldAccents } from '../utils/helpers';
 /**
- * Return array of final item id in nested list (via props chlidren)
+ * Return array of final item id in nested list (via props children)
  * @param itemList
  * @param finalItemIdList
  * @returns {*[]}
@@ -116,48 +114,6 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
     v: visibleParent
   });
 }
-
-export const styles = theme => ({
-  root: {
-    backgroundColor: theme.palette.background2,
-    maxWidth: 500,
-    width: '100%',
-    position: 'relative'
-  },
-  popper: {
-    // width: '100%',
-    zIndex: 1200
-  },
-  paper: {
-    borderRadius: '0px 2px',
-    maxHeight: 480,
-    transition: 'none !important'
-  },
-  labelImg: {
-    height: 18,
-    width: 'auto',
-    margin: '0 4px',
-    verticalAlign: 'middle'
-  },
-  selectIconLabel: _objectSpread({
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    paddingRight: 16
-  }, theme.typography.b1, {
-    display: 'inline-flex',
-    width: '100%'
-  }),
-  selectImgLabel: _objectSpread({
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    paddingRight: 16
-  }, theme.typography.b1, {
-    display: 'inline-flex',
-    width: '100%'
-  })
-});
 /**
  * HiNestedSelectContent hérite du composant HiSelectContent
  *
@@ -171,9 +127,10 @@ export const styles = theme => ({
  * - si aucun enfant n'est sélectionné, le parent est affiché "unselected".
  */
 
+
 class HiNestedSelectContent extends React.PureComponent {
-  constructor(props) {
-    super(props);
+  constructor(...args) {
+    super(...args);
 
     this.handleSelect = (event, item) => {
       const {
@@ -267,20 +224,7 @@ class HiNestedSelectContent extends React.PureComponent {
         itemList
       };
     };
-
-    this.handleSelect = this.handleSelect.bind(this);
   }
-  /**
-   * Call onChange with the updated value
-   *
-   * - handle single value
-   * - handle multiple value
-   * - handle '_all' id
-   *
-   * @param event
-   * @param item
-   */
-
 
   render() {
     const _this$props = this.props,
@@ -400,7 +344,4 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
 } : {};
-export default withStyles(styles, {
-  hiComponent: true,
-  name: 'HmuiHiNestedSelectContent'
-})(HiNestedSelectContent);
+export default HiNestedSelectContent;

package/es/HiSelectableList/HiSelectableListItem.js

@@ -11,6 +11,9 @@ import HiColoredLabel from '../HiColoredLabel';
 import HiLoader from '../HiLoader';
 import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/helpers';
+import pure from 'recompose/pure';
+const PureListSubheader = pure(ListSubheader);
+const PureListItem = pure(ListItem);
 export const styles = theme => ({
   root: {
     paddingLeft: 4
@@ -129,7 +132,7 @@ export const styles = theme => ({
  * Construit un élément de liste sélectionnable (avec checkbox)
  */
 
-class HiSelectableListItem extends React.Component {
+class HiSelectableListItem extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -202,6 +205,7 @@ class HiSelectableListItem extends React.Component {
       fallbackImage,
       hideCheckbox,
       onSelect,
+      onKeyDown,
       indeterminate,
       indeterminateIcon,
       icon,
@@ -235,7 +239,7 @@ class HiSelectableListItem extends React.Component {
       displayedIcon = icon;
     }
 
-    const ListItemComponentName = pinned ? ListSubheader : ListItem;
+    const ListItemComponentName = pinned ? PureListSubheader : PureListItem;
     return React.createElement(ListItemComponentName, _extends({
       id: id,
       tabIndex: disabled ? '-1' : 0,
@@ -254,12 +258,14 @@ class HiSelectableListItem extends React.Component {
     }, disabled || {
       onClick: onSelect,
       onMouseEnter: this.setHover(true),
-      onMouseLeave: this.setHover(false)
+      onMouseLeave: this.setHover(false),
+      onKeyDown: onKeyDown
     }, {
       style: {
         paddingLeft: `${paddingLeft + level * 32}px`
       }
     }), !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
+      tabIndex: onKeyDown ? '-1' : 0,
       checked: selected,
       checkedIcon: checkedIcon,
       classes: {
@@ -407,6 +413,11 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSelect: PropTypes.func,
 
+  /**
+   * Fonction de callback à la sélection de l'élément
+   */
+  onKeyDown: PropTypes.func,
+
   /**
    * Padding par défaut des éléments
    */

package/es/HiTable/HiTableRow.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import keycode from 'keycode';
+import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import TableRow from '@material-ui/core/TableRow';
 import HiCellBuilder from './HiCellBuilder';
@@ -17,6 +18,9 @@ export const styles = theme => ({
     '&:hover, &:focus': {
       backgroundColor: `${theme.palette.action.hover} !important`
     }
+  },
+  clicableRow: {
+    cursor: 'pointer'
   }
 });
 
@@ -42,7 +46,9 @@ class HiTableRow extends React.PureComponent {
       rowdata
     } = this.props;
     return React.createElement(TableRow, {
-      className: classes.row,
+      className: classNames(classes.row, {
+        [classes.clicableRow]: this.props.onClick
+      }),
       hover: true,
       onClick: event => this.handleClick(event, rowdata),
       onKeyDown: event => {
@@ -56,10 +62,10 @@ class HiTableRow extends React.PureComponent {
         height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
       },
       tabIndex: 0
-    }, Object.keys(columns).map(key => {
+    }, Object.keys(columns).map(column => {
       return React.createElement(HiCellBuilder, {
-        key: columns[key].colId,
-        column: columns[key],
+        key: columns[column].colId,
+        column: columns[column],
         data: rowdata,
         locale: locale
       });