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

package/HI-CHANGELOG.md

@@ -1,3 +1,39 @@
+<a name="1.0.0-beta.26"></a>
+# 1.0.0-beta.26 (2018-08-24)
+
+
+### Bug Fixes
+
+* **BodyRow:** add locale vars to child BodyRow ([9252382](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9252382))
+* **CellDate:** Handle date with moment & use prop format ([7fa8bf5](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7fa8bf5))
+* **HeaderCell:** set sort icons always on the right of the title ([0704619](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0704619))
+* **HiDateRangePicker:** Keep focus on change dateTo if user types directly into the input to see date selection into calendar ([e998c60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e998c60))
+* **HiDateRangePicker:** Reset date range picker input to ([b1a66f3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1a66f3))
+* **HiDateRangeSelector:** UPD select value from parent component (defaultPreset property) ([90bb994](https://gitlab.hipay.org/backend/hipay-material-ui/commit/90bb994))
+* **HiInput:** Keep focus on reset HiInput ([a84edab](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a84edab))
+* **HiPins:** Add theme business primary color as default background color for HiPins and fix line-height  ([23aa2d9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/23aa2d9))
+* **HiSelect:** add dynamic prop to handle dynamic select with initial options ([c668b90](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c668b90))
+* **HiSelect:** Display option label instead of all for selects with 1 option ([e47574a](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e47574a))
+* **HiSelect:** Don't try to display unique selected options item when still loading ([116a72a](https://gitlab.hipay.org/backend/hipay-material-ui/commit/116a72a))
+* **HiSelect:** Enable to handle hierarchic padding via options prop level ([dc4e5d8](https://gitlab.hipay.org/backend/hipay-material-ui/commit/dc4e5d8))
+* **HiSelect:** Handle unique and undefined selected item ([8dbb542](https://gitlab.hipay.org/backend/hipay-material-ui/commit/8dbb542))
+* **HiSelectableList:** item displayed only if item.displayed != false ([e65b865](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e65b865))
+* **HiTable:** Add default translations object to HeaderCell ([4ed766f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4ed766f))
+* **HiTable:** Performance optimization ([3ca60d3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/3ca60d3))
+* **HiTable:** remove anchorEls from state to remove circular structure in JSON compares ([c064ce9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c064ce9))
+* **SelectInput:** selected choice label not overflowing on right arrow of HiSelect ([a7d7058](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a7d7058))
+
+
+### Features
+
+* **CellText:** add color props ([ff2bba8](https://gitlab.hipay.org/backend/hipay-material-ui/commit/ff2bba8))
+* **HiChip:** enable to display tooltip on HiChip via the prop 'title' ([6b15ca6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6b15ca6))
+* **HiDateRangePicker:** Add onBlur prop function to handle date errors properly ([df79494](https://gitlab.hipay.org/backend/hipay-material-ui/commit/df79494))
+* **HiTableContextMenu:** handle hide lookup/exclude menu item for each column ([03e00cb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/03e00cb))
+* **workflow:** Add HI-CHANGELOG generation from commits ([edee0f6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/edee0f6))
+
+
+
 <a name="1.0.0-beta.25"></a>
 # 1.0.0-beta.25 (2018-08-16)
 

package/HiChip/HiChip.js

@@ -132,6 +132,7 @@ function HiChip(props) {
         onDelete = props.onDelete,
         prefix = props.prefix,
         onIconClick = props.onIconClick,
+        title = props.title,
         titleDelete = props.titleDelete,
         titleIcon = props.titleIcon,
         titleImg = props.titleImg,
@@ -143,7 +144,8 @@ function HiChip(props) {
         'div',
         {
             id: id,
-            className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty3.default)(_classNames, classes.leftIccon, icon), _classNames))
+            className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty3.default)(_classNames, classes.leftIccon, icon), _classNames)),
+            title: title
         },
         prefix && _react2.default.createElement(
             'span',
@@ -157,14 +159,14 @@ function HiChip(props) {
             icon: icon,
             size: 16,
             onClick: onIconClick,
-            titleAccess: titleIcon
+            title: titleIcon
         }),
         onPrevious && _react2.default.createElement(_HiIconBuilder2.default, {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
             size: 16,
-            titleAccess: titlePrevious
+            title: titlePrevious
         }),
         _react2.default.createElement(
             'span',
@@ -176,14 +178,14 @@ function HiChip(props) {
             icon: 'menuRight',
             onClick: onNext,
             size: 16,
-            titleAccess: titleNext
+            title: titleNext
         }),
         onDelete && _react2.default.createElement(_HiIconBuilder2.default, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
             size: 16,
-            titleAccess: titleDelete
+            title: titleDelete
         })
     );
 }
@@ -229,6 +231,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Préfixe dans le HiChip
      */
     prefix: _propTypes2.default.string,
+    /**
+     * Titre du chip
+     */
+    title: _propTypes2.default.string,
     /**
      * Titre de l'icône supprimer
      */

package/HiSelect/HiSelect.js

@@ -162,7 +162,7 @@ var HiSelect = function (_React$PureComponent) {
             hierarchySelected: {},
             hierarchy: {},
             nbOptions: 0,
-            dynamic: false
+            dynamic: props.dynamic || false
         };
 
         // Check if value is in options
@@ -205,7 +205,7 @@ var HiSelect = function (_React$PureComponent) {
                 }
             });
             _this.state.nbOptions = optionsLength;
-        } else {
+        } else if (!props.dynamic) {
             _this.state.dynamic = true;
         }
 
@@ -345,29 +345,28 @@ var HiSelect = function (_React$PureComponent) {
             }
 
             if ((dynamic || loading) && selectedIdList.length === 1) {
-                display = translations.one_item_selected.replace('%s', selectedIdList.length);
+                display = translations.one_item_selected;
             } else if ((this.state.nbOptions !== selectedIdList.length || !hasAll) && selectedIdList.length > 1) {
                 display = translations.n_items_selected.replace('%s', selectedIdList.length);
             } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions > 1) {
                 display = translations.all;
             } else if (selectedIdList.length === 1) {
-                if (type !== 'icon') {
-                    var item = options.find(function (o) {
-                        return o.id === selectedIdList[0];
-                    });
-                    if (!item && pinnedItem) {
+                var item = options.find(function (o) {
+                    return o.id === selectedIdList[0];
+                });
+                if (item === undefined) {
+                    display = translations.one_item_selected;
+                } else if (type !== 'icon') {
+                    if (pinnedItem) {
                         item = pinnedItem;
                     }
                     display = item.label;
                 } else {
-                    var optionSelected = options.find(function (o) {
-                        return o.id === selectedIdList[0];
-                    });
                     display = _react2.default.createElement(
                         'span',
                         { className: classes.selectIconLabel },
-                        _react2.default.createElement(_HiIconBuilder2.default, { icon: optionSelected.icon, className: classes.labelIcon }),
-                        optionSelected.label
+                        _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.labelIcon }),
+                        item.label
                     );
                 }
             }
@@ -501,6 +500,7 @@ HiSelect.defaultProps = {
     hierarchic: false,
     parentItemSelectable: false,
     displayAsChip: false,
+    dynamic: false,
     icon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     parentIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     hoverIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
@@ -743,9 +743,9 @@ var _initialiseProps = function _initialiseProps() {
                 }
             }
             _this3.setState({ hierarchySelected: hiSelected });
-            onChange(event, valueList);
+            onChange(event, valueList, item);
         } else {
-            onChange(event, item.id);
+            onChange(event, item.id, item);
             _this3.handleClose();
         }
     };
@@ -820,6 +820,12 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Option permettant d'afficher les sélection sous forme de Chip.
      */
     displayAsChip: _propTypes2.default.bool,
+    /**
+     * Option permettant de définir si les options du select sont dynamiques.
+     * Si les options du select sont initialisées à vide, alors ce sera mis à true
+     * automatiquement.
+     */
+    dynamic: _propTypes2.default.bool.isRequired,
     /**
      * Applique le style error
      */

package/HiSelectableList/HiSelectableList.js

@@ -163,7 +163,7 @@ var HiSelectableList = function (_React$PureComponent) {
                                 hoverIcon: hoverIcon,
                                 checkedIcon: checkedIcon,
                                 checkbox: checkbox,
-                                level: parents.length,
+                                level: item.level ? item.level : parents.length,
                                 disabled: disabledIds ? disabledIds.includes(item.id) : false
                             }, others));
                         }

package/HiSelectableList/HiSelectableListItem.js

@@ -398,7 +398,7 @@ var HiSelectableListItem = function (_React$Component) {
 
             if (leftPadding) {
                 paddingLeft = leftPadding;
-            } else if (!hierarchic) {
+            } else if (!hierarchic && level === 0) {
                 // Si pas de hiérarchie et sans checkbox, padding de 8px
                 if (!effectiveCheckbox) {
                     paddingLeft = 8;
@@ -415,9 +415,9 @@ var HiSelectableListItem = function (_React$Component) {
                     }
                 } else if (level > 0) {
                     if (effectiveCheckbox) {
-                        paddingLeft = 16 * (level - 1);
-                    } else {
                         paddingLeft = 16 * level;
+                    } else {
+                        paddingLeft = 16 * (level + 1);
                     }
                 } else if (!effectiveCheckbox) {
                     if (item.id === '_all') {

package/HiTable/BodyCellBuilder.js

@@ -299,10 +299,11 @@ var BodyCellBuilder = function (_React$Component) {
                     default:
                         cellElement = _react2.default.createElement(_BodyCells.CellText, {
                             ukey: ukey,
-                            value: data.value,
+                            value: data.label ? data.label : data.value,
                             ellipsis: ellipsis,
                             view: view,
-                            sticky: sticky
+                            sticky: sticky,
+                            color: data.color
                         });
                         break;
                 }

package/HiTable/BodyCells/CellAccount.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.styles = undefined;
 
 var _stringify = require('babel-runtime/core-js/json/stringify');
 
@@ -45,21 +44,11 @@ var _HiColoredLabel = require('../../HiColoredLabel');
 
 var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
 
-var _withStyles = require('../../styles/withStyles');
-
-var _withStyles2 = _interopRequireDefault(_withStyles);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {};
-};
-
 /**
  * Cette cellule permet d'afficher le nom d'un compte sous la forme d'un label coloré.
  */
-
-
 var CellAccount = function (_React$Component) {
     (0, _inherits3.default)(CellAccount, _React$Component);
 
@@ -106,4 +95,4 @@ CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     value: _propTypes2.default.string.isRequired
 } : {};
-exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellAccount' })(CellAccount);
+exports.default = CellAccount;

package/HiTable/BodyCells/CellDate.js

@@ -59,16 +59,14 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        rightEllipsisSpan: {
-            display: 'inline-block',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'pre',
-            width: '100%'
-        }
-    };
+var styles = exports.styles = {
+    rightEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        width: '100%'
+    }
 };
 
 /**
@@ -110,9 +108,9 @@ var CellDate = function (_React$Component) {
 
 
             var date = (0, _moment2.default)(value);
-            _moment2.default.locale(locale);
+            date.locale(locale);
 
-            var titleValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace('HH:mm:ss', ''));
+            var titleValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace(' HH:mm:ss', ''));
             var displayedValue = titleValue;
             if (view === cst.VIEWS.SMALL) {
                 displayedValue = displayTime ? date.format(formatShort.replace('YYYY', 'YY') + ' HH:mm:ss') : date.format(formatShort.replace('YYYY', 'YY'));
@@ -166,6 +164,11 @@ CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
      * Locale moment
      */
     locale: _propTypes2.default.string,
+    /**
+     * True si la colonne est la première colonne et
+     * doit avoir un comportement "sticky" lors du scroll horizontal
+     */
+    sticky: _propTypes2.default.bool,
     /**
      * Date as string
      */

package/HiTable/BodyCells/CellText.js

@@ -9,26 +9,26 @@ var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
 
 var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
 var _stringify = require('babel-runtime/core-js/json/stringify');
 
 var _stringify2 = _interopRequireDefault(_stringify);
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
 var _createClass2 = require('babel-runtime/helpers/createClass');
 
 var _createClass3 = _interopRequireDefault(_createClass2);
 
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
 var _inherits2 = require('babel-runtime/helpers/inherits');
 
 var _inherits3 = _interopRequireDefault(_inherits2);
@@ -53,42 +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$Component) {
     (0, _inherits3.default)(CellText, _React$Component);
-    (0, _createClass3.default)(CellText, [{
-        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 CellText(props) {
         (0, _classCallCheck3.default)(this, CellText);
@@ -112,6 +109,11 @@ var CellText = function (_React$Component) {
         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() {
@@ -144,8 +146,9 @@ var CellText = function (_React$Component) {
 
             /**
              * 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) {
@@ -175,7 +178,8 @@ var CellText = function (_React$Component) {
             var _props = this.props,
                 classes = _props.classes,
                 value = _props.value,
-                ellipsis = _props.ellipsis;
+                ellipsis = _props.ellipsis,
+                color = _props.color;
 
 
             var start = void 0,
@@ -195,9 +199,15 @@ var CellText = function (_React$Component) {
                     }
                     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 },
@@ -217,9 +227,15 @@ var CellText = function (_React$Component) {
                     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 },
@@ -234,7 +250,11 @@ var CellText = function (_React$Component) {
                     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
@@ -243,7 +263,11 @@ var CellText = function (_React$Component) {
 
                 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
@@ -267,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/HiStickyRow.js

@@ -133,8 +133,8 @@ var styles = exports.styles = function styles(theme) {
 
 var ONCHANGE_ERROR_MESSAGE = exports.ONCHANGE_ERROR_MESSAGE = 'Vous devez saisir la propriété "onChange" pour les lignes "selectable"';
 
-var HiStickyRow = function (_React$PureComponent) {
-    (0, _inherits3.default)(HiStickyRow, _React$PureComponent);
+var HiStickyRow = function (_React$Component) {
+    (0, _inherits3.default)(HiStickyRow, _React$Component);
 
     function HiStickyRow() {
         (0, _classCallCheck3.default)(this, HiStickyRow);
@@ -241,7 +241,7 @@ var HiStickyRow = function (_React$PureComponent) {
         }
     }]);
     return HiStickyRow;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 HiStickyRow.defaultProps = {
     dense: false,

package/README.md

@@ -224,13 +224,14 @@ Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@hi
 Avoir installé [conventional-changelog-cli](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-cli) pour générer le CHANGELOG à partir des commits git.
 ```sh
 npm install -g conventional-changelog-cli
+npm install -g cz-conventional-changelog
 ```
 
 1. Changer la version dans package.json
 2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
 3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
 4. Build : ```npm run build```
-5. Publish : 
+5. Publish :
 
 ```sh
 cd build

package/es/HiChip/HiChip.js

@@ -99,6 +99,7 @@ function HiChip(props) {
         onDelete,
         prefix,
         onIconClick,
+        title,
         titleDelete,
         titleIcon,
         titleImg,
@@ -115,7 +116,8 @@ function HiChip(props) {
                 [classes.rightNavigation]: onNext,
                 [classes.deletable]: onDelete,
                 [classes.leftIccon]: icon
-            })
+            }),
+            title: title
         },
         prefix && React.createElement(
             'span',
@@ -131,14 +133,14 @@ function HiChip(props) {
             icon: icon,
             size: 16,
             onClick: onIconClick,
-            titleAccess: titleIcon
+            title: titleIcon
         }),
         onPrevious && React.createElement(HiIconBuilder, {
             className: classNames(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
             size: 16,
-            titleAccess: titlePrevious
+            title: titlePrevious
         }),
         React.createElement(
             'span',
@@ -150,14 +152,14 @@ function HiChip(props) {
             icon: 'menuRight',
             onClick: onNext,
             size: 16,
-            titleAccess: titleNext
+            title: titleNext
         }),
         onDelete && React.createElement(HiIconBuilder, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
             size: 16,
-            titleAccess: titleDelete
+            title: titleDelete
         })
     );
 }
@@ -203,6 +205,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Préfixe dans le HiChip
      */
     prefix: PropTypes.string,
+    /**
+     * Titre du chip
+     */
+    title: PropTypes.string,
     /**
      * Titre de l'icône supprimer
      */