@hipay/hipay-material-ui 2.0.0-beta.65 → 2.0.0-beta.68

package/CHANGELOG.md

@@ -1,3 +1,78 @@
+# [2.0.0-beta.64](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.64) (2019-03-27)
+
+
+### Bug Fixes
+
+* **eslint:** remove eslint warrnings in components (ignore test files) ([d236c62](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d236c62))
+* **HiAlertModal:** Correct styles and buttons positions ([2cfa2a9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2cfa2a9))
+* **HiBreadcrumb:** clean eslint warnings ([6db12fb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6db12fb))
+* **HiDatePicker:** add static positions for custom overlays ([c3edf24](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c3edf24))
+* **HiDynamicSelect:** remove onSelect override ([b803044](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b803044))
+* **HiExpansionPanel:** fix props propagation collapseDisable || expanded ([eb18a96](https://gitlab.hipay.org/backend/hipay-material-ui/commit/eb18a96))
+* **HiExpansionPanel:** Fix props type a requirement ([cbc3b48](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cbc3b48))
+* **HiInput:** forward event in onClick ([be94fe0](https://gitlab.hipay.org/backend/hipay-material-ui/commit/be94fe0))
+* **HiInput:** handle focus state through prop when needed to override default comportment ([9a133cc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a133cc))
+* **HiInput:** rename prop to spellCheck ([c11939f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c11939f))
+* **HiKpiNotice:** eslint clean warnings ([11b5552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/11b5552))
+* **HiSelect:** Fix build of HiSelectContent ([4b87f78](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4b87f78))
+* **HiSelect:** focus on undefined item ([2d084e6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2d084e6))
+* **HiSelect:** Forward event in onBlur ([76c6778](https://gitlab.hipay.org/backend/hipay-material-ui/commit/76c6778))
+* **HiSelect:** handle staticPosition & width properly for HiDateRangeSelector usage ([7b19ffb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7b19ffb))
+* **HiSelect:** remove HiSelectNew calls ([cc5397d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cc5397d))
+* **HiSelectableList:** Add lazy props to activate lazyloading (default true) and fix unit tests ([b41f8d2](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b41f8d2))
+* **HiSelectableListItem:** disabled item checkbox color ([9f10552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9f10552))
+* **HiSelectableListItem:** remove item width ([a913945](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a913945))
+* **HiSelectContent:** Remove compute of input value ([b86db83](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b86db83))
+* **HiSlider:** eslint clean warnings ([08964b1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/08964b1))
+* **HiTable:** Fix test ([9a009a8](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a009a8))
+* **HiUploadField:** clean eslint warnings ([c76aaf1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c76aaf1))
+* **migration:** fix contrast threshold ... ([6fb3b18](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6fb3b18))
+* **package:** add cross-env ([7098fd6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7098fd6))
+
+
+### Code Refactoring
+
+* deleting the old HiSelect and replacing it by the new (PSYCHE-1382) ([d5fc252](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d5fc252))
+
+
+### Features
+
+* **CellImage:** Handle fallbackImage ([254799d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/254799d))
+* **CellSentinel:** Uniformize cell api with front CellSentinel ([4e2975b](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4e2975b))
+* **CellSentinel:** Update CellSentinel to the new way (split each result in different column) ([efe2711](https://gitlab.hipay.org/backend/hipay-material-ui/commit/efe2711))
+* **CellSentinelScore:** Add CellSentinelScore ([2fff04d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2fff04d))
+* **CellText:** Handle active prop in CellText & column views in HiTable ([4366e60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4366e60))
+* **HiCells:** Add simple cells types (Address, Date, Icon, Image, Numeric, PinToAction, Rate, Senti ([f688517](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f688517))
+* **HiDatePicke:** add timezone props ([18360a5](https://gitlab.hipay.org/backend/hipay-material-ui/commit/18360a5))
+* **HiDatePicker:** BREAKING CHANGE - add local prop to handle calendar translations ([b1b3743](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1b3743))
+* **HiIcon:** Add mdi-material-ui as available icons via 'mdi_' prefix ([1091d6d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/1091d6d))
+* **HiInput:** add spellcheck property ([b2feac3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b2feac3))
+* **HiMap:** unregister fetch on unmount ([0afa931](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0afa931))
+* **HiSelect:** Add (NEW) HiSelect, HiNestedSelect, HiDynamicSelect ([4c6447e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4c6447e))
+* **HiSelect:** Reset search input on blur & on close ([d9af584](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d9af584))
+* **HiSelectableList:** Add sort props to sort item list on label ([f412ddc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f412ddc))
+* **HiSelectContent:** Add new HiSelectContent & HiNestedSelectContent ([215ad8f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/215ad8f))
+* **HiSelectContent:** export utils functions ([7c41d87](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7c41d87))
+* **HiUploadField:** rename component HiUploadField ([593f77e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/593f77e))
+* **notice:** Création notice KPI ([bba3f89](https://gitlab.hipay.org/backend/hipay-material-ui/commit/bba3f89))
+
+
+### Performance Improvements
+
+* **PureFunction:** Use pure & functional components ([220c686](https://gitlab.hipay.org/backend/hipay-material-ui/commit/220c686))
+
+
+### BREAKING CHANGES
+
+* HiSelectNew no longer exist, make sure you're importing HiSelect instead
+* **HiDatePicker:** Required "local" props (use polyglot, p.currentLocal)
+* **HiUploadField:** Components names changes
+* **HiCells:** Remove CellCountry, CellThirdParty, CellStatus & CellAccount (use generic type
+CellImage & CellText)
+* **HiSelect:** HiSelect API change, use HiNestedSelect or HiDynamicSelect relative to situation
+
+
+
 # [2.0.0-beta.63](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.63) (2019-02-15)
 
 

package/HiAlertModal/HiAlertModal.js

@@ -43,25 +43,27 @@ var _HiButton = _interopRequireDefault(require("../HiButton"));
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
+var _helpers = require("../utils/helpers");
+
 // @inheritedComponent Dialog
 var styles = function styles(theme) {
   return {
     classContent: {
       fontSize: 14,
-      lineHeight: '20px',
+      lineHeight: '24px',
       color: '#484848',
       position: 'relative'
     },
     classDialogPaper: {
-      minHeight: 280,
+      minHeight: 248,
       maxWidth: 280,
       borderRadius: 2
     },
     classCancelButton: {
-      float: 'right'
+      margin: '0'
     },
     classSubmitButton: {
-      margin: '0'
+      float: 'right'
     },
     classTitle: {
       fontSize: 20,
@@ -105,18 +107,6 @@ function (_React$PureComponent) {
     (0, _classCallCheck2.default)(this, HiAlertModal);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiAlertModal).call(this, props));
 
-    _this.handleClickCancel = function () {
-      if (_this.props.onCancelClick) {
-        _this.props.onCancelClick();
-      }
-    };
-
-    _this.handleClickSubmit = function () {
-      if (_this.props.onSubmitClick) {
-        _this.props.onSubmitClick();
-      }
-    };
-
     _this.handleOnClose = function () {
       if (_this.props.onClose) {
         _this.props.onClose();
@@ -124,10 +114,8 @@ function (_React$PureComponent) {
     };
 
     _this.handleOnClose = _this.handleOnClose.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClickCancel = _this.handleClickCancel.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClickSubmit = _this.handleClickSubmit.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
-  } // Appelé au clic du bouton d'annulation
+  } // Appelé si clic en dehors de la pop up
 
 
   (0, _createClass2.default)(HiAlertModal, [{
@@ -148,6 +136,17 @@ function (_React$PureComponent) {
           submitColor = _this$props.submitColor,
           title = _this$props.title,
           props = (0, _objectWithoutProperties2.default)(_this$props, ["backgroundIcon", "iconSize", "classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title"]);
+      var dialogContent = content;
+
+      if (typeof content === 'string') {
+        dialogContent = _react.default.createElement("span", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: (0, _helpers.escapeHTML)(content)
+          }
+        });
+      }
+
       return _react.default.createElement(_Dialog.default, (0, _extends2.default)({
         open: open,
         onClose: this.handleOnClose,
@@ -169,29 +168,30 @@ function (_React$PureComponent) {
         classes: {
           root: classes.classContent
         }
-      }, content)), _react.default.createElement(_DialogActions.default, {
+      }, dialogContent)), _react.default.createElement(_DialogActions.default, {
         classes: {
           root: classes.classAction
         }
-      }, labelSubmitButton && _react.default.createElement(_HiButton.default, {
-        classes: {
-          root: classes.classSubmitButton
-        },
-        onClick: this.handleClickSubmit,
-        color: submitColor
-      }, labelSubmitButton), labelCancelButton && _react.default.createElement(_HiButton.default, {
+      }, labelCancelButton && _react.default.createElement(_HiButton.default, {
         classes: {
           root: classes.classCancelButton
         },
-        onClick: this.handleClickCancel,
+        onClick: onCancelClick,
         color: cancelColor
-      }, labelCancelButton)));
+      }, labelCancelButton), labelSubmitButton && _react.default.createElement(_HiButton.default, {
+        classes: {
+          root: classes.classSubmitButton
+        },
+        onClick: onSubmitClick,
+        color: submitColor
+      }, labelSubmitButton)));
     }
   }]);
   return HiAlertModal;
 }(_react.default.PureComponent);
 
 HiAlertModal.defaultProps = {
+  content: '',
   cancelColor: 'neutral',
   submitColor: 'primary'
 };

package/HiBreadcrumb/HiBreadcrumb.js

@@ -72,16 +72,17 @@ function (_React$PureComponent) {
       }, _react.default.createElement("div", null, steps.map(function (step, index) {
         var validConnector = step.status === 'validated' && index < steps.length - 1 && (steps[index + 1].status === 'validated' || steps[index + 1].status === 'active');
         return _react.default.createElement(_HiStep.default, {
-          index: index,
+          index: step.id,
           content: step.content,
           key: step.id,
-          onClick: _this2.handleStep(index),
+          onClick: _this2.handleStep(step.id),
           isLast: index === steps.length - 1,
           validConnector: validConnector,
           type: type,
-          steps: steps
+          steps: steps,
+          active: activeStep === step.id
         }, _react.default.createElement(_HiStepLabel.default, {
-          active: activeStep === index,
+          active: activeStep === step.id,
           status: step.status,
           notificationNumber: step.notificationNumber,
           type: type,

package/HiExpansionPanel/HiExpansionPanel.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -35,17 +37,31 @@ var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 // @inheritedComponent ExpansionPanel
 var styles = function styles(theme) {
   return {
     summaryContent: {
       display: 'inline-block',
-      border: 'none'
+      border: 'none',
+      '&$expanded': {
+        margin: 'initial'
+      }
     },
     summaryRoot: {
       borderBottom: '1px solid #E3E6E7',
       height: 48,
-      minHeight: 48
+      minHeight: 48,
+      padding: '0 0 0 8px',
+      '&$expanded': {
+        minHeight: 48
+      }
+    },
+    expanded: {},
+    collapseDisable: {
+      cursor: 'default',
+      pointerEvents: 'none'
     },
     heading: (0, _extends2.default)({}, theme.typography.b1, {
       fontSize: 20,
@@ -57,7 +73,7 @@ var styles = function styles(theme) {
       fontSize: 11,
       lineHeight: '24px',
       float: 'right',
-      marginRight: 40,
+      marginRight: 32,
       '&>svg': {
         fontSize: 18,
         marginLeft: 3,
@@ -69,11 +85,16 @@ var styles = function styles(theme) {
       border: 'none'
     },
     panelDetails: {
-      padding: '8px 24px'
+      padding: 0
     },
     disabledPanel: {
       backgroundColor: '#ffffff',
       opacity: 1
+    },
+    expandIcon: {
+      width: 24,
+      height: 24,
+      right: 0
     }
   };
 };
@@ -101,22 +122,28 @@ function (_React$PureComponent) {
           secondaryHeading = _this$props.secondaryHeading,
           secondaryHeadingDisabled = _this$props.secondaryHeadingDisabled,
           secondaryHeadingIcon = _this$props.secondaryHeadingIcon,
+          collapseDisable = _this$props.collapseDisable,
           children = _this$props.children,
           classes = _this$props.classes,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["disabled", "heading", "secondaryHeading", "secondaryHeadingDisabled", "secondaryHeadingIcon", "children", "classes"]);
+          expanded = _this$props.expanded,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["disabled", "heading", "secondaryHeading", "secondaryHeadingDisabled", "secondaryHeadingIcon", "collapseDisable", "children", "classes", "expanded"]);
       var effectiveDisabled = disabled || !children;
       return _react.default.createElement(_ExpansionPanel.default, (0, _extends2.default)({
         disabled: effectiveDisabled,
         classes: {
           root: classes.panel,
           disabled: classes.disabledPanel
-        }
+        },
+        expanded: collapseDisable || expanded
       }, props), _react.default.createElement(_ExpansionPanelSummary.default, {
         classes: {
           root: classes.summaryRoot,
-          content: classes.summaryContent
+          content: classes.summaryContent,
+          expanded: classes.expanded,
+          expandIcon: classes.expandIcon
         },
-        expandIcon: _ref
+        className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.collapseDisable, collapseDisable)),
+        expandIcon: !collapseDisable && _ref
       }, _react.default.createElement("div", {
         className: classes.secondaryHeading
       }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled, secondaryHeadingIcon), _react.default.createElement("div", {
@@ -169,7 +196,12 @@ HiExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Icone dans le titre secondaire du panel
    */
-  secondaryHeadingIcon: _propTypes.default.any
+  secondaryHeadingIcon: _propTypes.default.any,
+
+  /**
+   * Désactive l'action d'ouverture et de fermeture du composant
+   */
+  collapseDisable: _propTypes.default.bool
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiForm/HiUpload.js

@@ -408,9 +408,9 @@ HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
   helperText: _propTypes.default.string,
 
   /**
-   * id du composant
+   * Identifiant unique
    */
-  id: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string,
 
   /**
    * Array containing each of the inputs the component has to show (represented by an object).

package/HiSelect/HiSelect.js

@@ -271,6 +271,12 @@ function (_React$PureComponent) {
         if (!_this.props.searchable) {
           // Sinon focus sur l'élément sélectionné
           _this.focusOnSelectedItem(_this.props.value);
+        } else {
+          if (_this.searchField) {
+            setTimeout(function () {
+              _this.searchField.focus();
+            }, 1);
+          }
         }
       }
     };
@@ -350,7 +356,7 @@ function (_React$PureComponent) {
             _this.handleClose();
           }
         }
-      } else if (key === 'space') {
+      } else if (key === 'space' && event.target !== _this.searchField) {
         event.preventDefault();
 
         if (_this.state.open) {

package/HiSelectableList/HiSelectableList.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -35,6 +37,8 @@ var _helpers = require("../utils/helpers");
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
+var _reactLazyload = _interopRequireWildcard(require("react-lazyload"));
+
 var styles = function styles() {
   return {
     root: {
@@ -101,17 +105,35 @@ function (_React$PureComponent) {
           hideCheckbox = _this$props.hideCheckbox,
           hoverIcon = _this$props.hoverIcon,
           icon = _this$props.icon,
+          lazy = _this$props.lazy,
           selectedItemIdList = _this$props.selectedItemIdList,
           sort = _this$props.sort,
           onKeyDown = _this$props.onKeyDown,
           onKeyUp = _this$props.onKeyUp,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 
       if (sort && item.children) {
         item.children.sort(_this.compareItem);
       }
 
-      return _react.default.createElement(_react.default.Fragment, {
+      var placeholderContent = _react.default.createElement("div", {
+        style: {
+          width: '90%',
+          padding: '8px 6px',
+          height: 40,
+          position: 'sticky',
+          left: 0
+        }
+      }, _react.default.createElement("div", {
+        style: {
+          backgroundColor: '#F5F5F5',
+          width: '100%',
+          height: '100%',
+          borderRadius: 4
+        }
+      }));
+
+      var itemComponent = _react.default.createElement(_react.default.Fragment, {
         key: item.id
       }, _react.default.createElement(_HiSelectableListItem.default, (0, _extends2.default)({}, others, {
         checkedIcon: checkedIcon,
@@ -131,6 +153,19 @@ function (_React$PureComponent) {
       }).map(function (subItem) {
         return _this.buildRecursiveListItem(subItem, level + 1);
       }));
+
+      if (lazy) {
+        return _react.default.createElement(_reactLazyload.default, {
+          key: item.id,
+          height: 40,
+          offset: 400,
+          once: true,
+          overflow: true,
+          placeholder: placeholderContent
+        }, itemComponent);
+      } else {
+        return itemComponent;
+      }
     };
 
     _this.compareItem = function (a, b) {
@@ -165,9 +200,8 @@ function (_React$PureComponent) {
 
       // Focus on last item selected
       if (this.props.overlay && this.props.overlay.getElementsByTagName('li')[0]) {
-        var item = this.props.overlay.getElementsByTagName('li')[0];
-
-        if (this.props.value) {
+        if (Array.isArray(this.props.value) && this.props.value.length > 0 || !Array.isArray(this.props.value) && this.props.value) {
+          var item = this.props.overlay.getElementsByTagName('li')[0];
           var lastSelectedValue = Array.isArray(this.props.value) ? this.props.value[this.props.value.length - 1] : this.props.value;
           var index = 0;
           this.props.itemList.forEach(function (option) {
@@ -187,9 +221,15 @@ function (_React$PureComponent) {
               });
             }
           });
+          item && item.focus();
         }
-
-        item.focus();
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.lazy && prevProps.itemList !== this.props.itemList) {
+        (0, _reactLazyload.forceCheck)();
       }
     }
   }, {
@@ -228,6 +268,7 @@ HiSelectableList.defaultProps = {
   disabled: false,
   disabledItemIdList: [],
   hideCheckbox: false,
+  lazy: true,
   selectedItemIdList: [],
   sort: false,
   sortAppendList: ['_all']
@@ -283,6 +324,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   itemList: _propTypes.default.array.isRequired,
 
+  /**
+   * Active lazyloading on list items
+   */
+  lazy: _propTypes.default.bool,
+
   /**
    * Fonction de callback à la sélection d'un item, renvoie l'item sélectionné
    *

package/HiTable/HiTableRow.js

@@ -53,7 +53,7 @@ var styles = function styles(theme) {
         backgroundColor: "".concat(theme.palette.action.hover, " !important")
       }
     },
-    clicableRow: {
+    clickableRow: {
       cursor: 'pointer'
     }
   };
@@ -95,7 +95,7 @@ function (_React$PureComponent) {
           locale = _this$props.locale,
           rowdata = _this$props.rowdata;
       return _react.default.createElement(_TableRow.default, {
-        className: (0, _classnames.default)(classes.row, (0, _defineProperty2.default)({}, classes.clicableRow, this.props.onClick)),
+        className: (0, _classnames.default)(classes.row, (0, _defineProperty2.default)({}, classes.clickableRow, this.props.onClick)),
         hover: true,
         onClick: function onClick(event) {
           return _this2.handleClick(event, rowdata);

package/README.md

@@ -189,7 +189,7 @@ npm run test:unit
 
 ##### Jouer les tests sur un seul composant
 ```sh
-yarn run mocha src/AdvancedTable/BodyCells/CellAccount.spec.js
+yarn run mocha packages/hipay-material-ui/src/HiRadio/HiRadio.test.js
 ```
 
 #### Vérifier la couverture de code
@@ -269,6 +269,14 @@ Ainsi les PATCH seront automatiquement pris en compte.
 L'intégration d'une MINOR doit faire l'objet d'une recette (voir HI-CHANGELOG.md).
 Le passage à une autre MAJOR doit faire l'objet d'une recette (voir HI-CHANGELOG.md BREAKING CHANGE).
 
+## Importer la lib dans son projet React
+
+Le package est publié sur un repo npm privé.
+
+Il est donc nécessaire d'ajouter le token d'authentification dans le fichier ``.npmrc``.
+
+Demander à l'équipe PSYCHE ou le copier depuis le projet [console](https://gitlab.hipay.org/backend/console/blob/feature/common-notice/.npmrc).
+
 # Si ERR d'authentification
 npm adduser
 admin

package/es/HiAlertModal/HiAlertModal.js

@@ -11,23 +11,24 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import { withStyles } from '../styles';
 import HiButton from '../HiButton';
 import HiIcon from '../HiIcon';
+import { escapeHTML } from '../utils/helpers';
 export const styles = theme => ({
   classContent: {
     fontSize: 14,
-    lineHeight: '20px',
+    lineHeight: '24px',
     color: '#484848',
     position: 'relative'
   },
   classDialogPaper: {
-    minHeight: 280,
+    minHeight: 248,
     maxWidth: 280,
     borderRadius: 2
   },
   classCancelButton: {
-    float: 'right'
+    margin: '0'
   },
   classSubmitButton: {
-    margin: '0'
+    float: 'right'
   },
   classTitle: {
     fontSize: 20,
@@ -60,18 +61,6 @@ class HiAlertModal extends React.PureComponent {
   constructor(props) {
     super(props);
 
-    this.handleClickCancel = () => {
-      if (this.props.onCancelClick) {
-        this.props.onCancelClick();
-      }
-    };
-
-    this.handleClickSubmit = () => {
-      if (this.props.onSubmitClick) {
-        this.props.onSubmitClick();
-      }
-    };
-
     this.handleOnClose = () => {
       if (this.props.onClose) {
         this.props.onClose();
@@ -79,9 +68,7 @@ class HiAlertModal extends React.PureComponent {
     };
 
     this.handleOnClose = this.handleOnClose.bind(this);
-    this.handleClickCancel = this.handleClickCancel.bind(this);
-    this.handleClickSubmit = this.handleClickSubmit.bind(this);
-  } // Appelé au clic du bouton d'annulation
+  } // Appelé si clic en dehors de la pop up
 
 
   // Render
@@ -103,6 +90,17 @@ class HiAlertModal extends React.PureComponent {
     } = _this$props,
           props = _objectWithoutProperties(_this$props, ["backgroundIcon", "iconSize", "classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title"]);
 
+    let dialogContent = content;
+
+    if (typeof content === 'string') {
+      dialogContent = React.createElement("span", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+          __html: escapeHTML(content)
+        }
+      });
+    }
+
     return React.createElement(Dialog, _extends({
       open: open,
       onClose: this.handleOnClose,
@@ -124,28 +122,29 @@ class HiAlertModal extends React.PureComponent {
       classes: {
         root: classes.classContent
       }
-    }, content)), React.createElement(DialogActions, {
+    }, dialogContent)), React.createElement(DialogActions, {
       classes: {
         root: classes.classAction
       }
-    }, labelSubmitButton && React.createElement(HiButton, {
-      classes: {
-        root: classes.classSubmitButton
-      },
-      onClick: this.handleClickSubmit,
-      color: submitColor
-    }, labelSubmitButton), labelCancelButton && React.createElement(HiButton, {
+    }, labelCancelButton && React.createElement(HiButton, {
       classes: {
         root: classes.classCancelButton
       },
-      onClick: this.handleClickCancel,
+      onClick: onCancelClick,
       color: cancelColor
-    }, labelCancelButton)));
+    }, labelCancelButton), labelSubmitButton && React.createElement(HiButton, {
+      classes: {
+        root: classes.classSubmitButton
+      },
+      onClick: onSubmitClick,
+      color: submitColor
+    }, labelSubmitButton)));
   }
 
 }
 
 HiAlertModal.defaultProps = {
+  content: '',
   cancelColor: 'neutral',
   submitColor: 'primary'
 };