@hipay/hipay-material-ui 2.0.0-beta.57 → 2.0.0-beta.59

package/HiSelectNew/HiNestedSelectContent.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getRecursiveFinalItemIdList = getRecursiveFinalItemIdList;
 exports.findFinalItemRecursively = findFinalItemRecursively;
-exports.default = void 0;
+exports.default = exports.filterValue = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -72,6 +72,10 @@ function findFinalItemRecursively(itemList, searchId) {
   });
   return foundItem;
 }
+
+var filterValue = function filterValue(item, searchValue) {
+  return searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(searchValue.toLowerCase())) !== -1;
+};
 /**
  * Build item list by settings item props relative to the nested parent/child situation
  * Reduce the item list to build specified items (displayed, pinned, disabled, selected, indeterminate)
@@ -90,6 +94,8 @@ function findFinalItemRecursively(itemList, searchId) {
  */
 
 
+exports.filterValue = filterValue;
+
 function buildFilteredItemList(itemList) {
   var selectedItemIdList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var searchValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
@@ -98,15 +104,16 @@ function buildFilteredItemList(itemList) {
   var disabledParent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var nbChildrenAsInfo = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var translations = arguments.length > 7 ? arguments[7] : undefined;
+  var filterFunc = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : filterValue;
   return itemList.reduce(function (_ref, item) {
     var memoItemList = _ref.l,
         memoSelected = _ref.s,
         memoUnselected = _ref.u,
         memoVisible = _ref.v;
-    var itemVisible = searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(searchValue.toLowerCase())) !== -1; // Parent item
+    var itemVisible = filterFunc(item, searchValue); // Parent item
 
     if (item.children) {
-      var _buildFilteredItemLis = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent),
+      var _buildFilteredItemLis = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent, nbChildrenAsInfo, translations, filterFunc),
           customizedChildren = _buildFilteredItemLis.l,
           selected = _buildFilteredItemLis.s,
           unselected = _buildFilteredItemLis.u,
@@ -241,9 +248,10 @@ function (_React$PureComponent) {
           multiple = _this$props2.multiple,
           nbChildrenAsInfo = _this$props2.nbChildrenAsInfo,
           pinnedParent = _this$props2.pinnedParent,
-          translations = _this$props2.translations; // build item list
+          translations = _this$props2.translations,
+          filterFunc = _this$props2.filterFunc; // build item list
 
-      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations),
+      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations, filterFunc),
           filteredItemList = _buildFilteredItemLis2.l,
           allSelected = _buildFilteredItemLis2.s,
           allUnselected = _buildFilteredItemLis2.u,
@@ -334,7 +342,8 @@ HiNestedSelectContent.defaultProps = {
     search: 'Search',
     n_children: '%s',
     one_child: '%s item'
-  }
+  },
+  filterFunc: filterValue
 };
 HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -347,6 +356,11 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   disabledParent: _propTypes.default.bool,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: _propTypes.default.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/HiSelectNew/HiSelect.js

@@ -37,8 +37,6 @@ var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 
 var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
 
-var _reactDom = require("react-dom");
-
 var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
 
 var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
@@ -112,6 +110,12 @@ var styles = function styles(theme) {
     }
   };
 };
+
+exports.styles = styles;
+
+function filterValue(item, search) {
+  return search === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
+}
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -128,8 +132,6 @@ var styles = function styles(theme) {
  */
 
 
-exports.styles = styles;
-
 var HiSelect =
 /*#__PURE__*/
 function (_React$PureComponent) {
@@ -154,7 +156,7 @@ function (_React$PureComponent) {
         hideCheckbox: true,
         label: 'loading'
       }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
-        return item.label && (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
+        return _this.props.filterFunc(item, search);
       })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
@@ -224,11 +226,13 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnFirstItem = function () {
-      var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
-      setTimeout(function () {
-        var item = overlay.getElementsByTagName('li')[0];
-        item.focus();
-      }, 1);
+      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(function () {
+          var item = _this.overlay.getElementsByTagName('li')[0];
+
+          item.focus();
+        }, 1);
+      }
     };
 
     _this.getInputElement = function (el) {
@@ -267,21 +271,22 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnSelectedItem = function (selectedValue) {
-      var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
-      setTimeout(function () {
-        // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-        var item = overlay.getElementsByTagName('li')[0];
-
-        if (selectedValue && typeof selectedValue === 'string') {
-          item = overlay.getElementsByTagName('li')[selectedValue];
-        } else if (selectedValue && typeof selectedValue === 'number') {
-          item = overlay.getElementsByTagName('li')[selectedValue - 1];
-        }
+      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(function () {
+          // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
+          var item = _this.overlay.getElementsByTagName('li')[0];
+
+          if (selectedValue && typeof selectedValue === 'string') {
+            item = _this.overlay.getElementsByTagName('li')[selectedValue];
+          } else if (selectedValue && typeof selectedValue === 'number') {
+            item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
+          }
 
-        if (item) {
-          item.focus();
-        }
-      }, 1);
+          if (item) {
+            item.focus();
+          }
+        }, 1);
+      }
     };
 
     _this.handleClickAway = function (event) {
@@ -313,6 +318,18 @@ function (_React$PureComponent) {
       });
     };
 
+    _this.handleKeyDownInput = function (event) {
+      var key = (0, _keycode.default)(event);
+
+      if (key === 'down' || key === 'up') {
+        _this.handleClick();
+      } else if (key === 'enter' && _this.props.onSubmit) {
+        event.preventDefault();
+
+        _this.props.onSubmit(event);
+      }
+    };
+
     _this.handleKeyDown = function (event) {
       var nextItem;
       var key = (0, _keycode.default)(event);
@@ -323,6 +340,13 @@ function (_React$PureComponent) {
       } else if (key === 'up') {
         event.preventDefault();
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
+      } else if (key === 'tab' || key === 'esc') {
+        _this.setState({
+          open: false
+        });
+      } else if (key === 'space') {
+        // Cancel scroll
+        event.preventDefault();
       }
 
       if (nextItem) {
@@ -330,21 +354,58 @@ function (_React$PureComponent) {
       }
     };
 
+    _this.getItemById = function (id) {
+      var item;
+
+      if (_this.props.hasAll && String(id) === '_all') {
+        return {
+          id: '_all'
+        };
+      }
+
+      for (var i = 0; i < _this.props.options.length; i += 1) {
+        var elem = _this.props.options[i];
+
+        if (String(elem.id) === String(id)) {
+          item = elem;
+          break;
+        }
+
+        if (elem.children) {
+          for (var j = 0; j < elem.children.length; j += 1) {
+            if (String(elem.children[j].id) === String(id)) {
+              item = elem.children[j];
+              break;
+            }
+          }
+        }
+      }
+
+      return item;
+    };
+
     _this.handleKeyUp = function (event) {
       var key = (0, _keycode.default)(event);
 
-      if (key === 'tab' || key === 'esc') {
+      if (key === 'esc') {
         _this.setState({
           open: false
         });
       } else if (key === 'space' || key === 'enter' && !_this.props.multiple) {
         event.preventDefault();
 
-        var item = _this.props.options.find(function (elem) {
-          return String(elem.id) === event.target.id;
-        });
+        var item = _this.getItemById(event.target.id);
 
-        _this.handleSelect(null, item);
+        if (item) {
+          // Select for nested select
+          if (_this.props.hiSelectableListProps && _this.props.hiSelectableListProps.onSelect) {
+            _this.props.hiSelectableListProps.onSelect(null, item);
+          } else {
+            _this.handleSelect(null, item);
+          }
+        } else {
+          console.warn("Can not find item #".concat(event.target.id));
+        }
       } else if (key === 'enter' && _this.props.multiple) {
         event.preventDefault();
 
@@ -361,6 +422,10 @@ function (_React$PureComponent) {
         event.preventDefault();
 
         _this.handleClose();
+      } else if (key === 'tab') {
+        _this.setState({
+          open: false
+        });
       }
     };
 
@@ -543,7 +608,7 @@ function (_React$PureComponent) {
       var popperClass = (0, _classnames.default)(classes.popper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.popperWidth, !this.props.containerWidth), (0, _defineProperty2.default)(_classNames, classes.popperRightAlign, this.props.containerWidth && this.props.align === 'right'), _classNames));
 
       var searchInput = function searchInput(position) {
-        if (!!searchable) {
+        if (searchable) {
           return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
             value: searchValue,
             autoFocus: true,
@@ -567,7 +632,7 @@ function (_React$PureComponent) {
         var nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
         popperStyle.transform = "translate3d(-1px, -".concat(nbItems * 40 + 2, "px, 0px)");
       } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
-        popperStyle.transform = "translate3d(-1px, 40px, 0px)";
+        popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
       }
 
       var content = function content(_ref) {
@@ -624,6 +689,7 @@ function (_React$PureComponent) {
         onClick: this.handleClick,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
+        onKeyDown: this.handleKeyDownInput,
         onSubmit: onSubmit,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave,
@@ -691,7 +757,8 @@ HiSelect.defaultProps = {
     n_children: '%s items',
     one_child: '%s item'
   },
-  type: 'text'
+  type: 'text',
+  filterFunc: filterValue
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   align: _propTypes.default.oneOf(['left', 'right']),
@@ -726,6 +793,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   fallbackImage: _propTypes.default.string,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: _propTypes.default.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/HiSelectNew/HiSelectContent.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = exports.filterValue = exports.styles = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -70,6 +70,12 @@ var styles = function styles(theme) {
     })
   };
 };
+
+exports.styles = styles;
+
+var filterValue = function filterValue(item, searchValue) {
+  return searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(searchValue.toLowerCase())) !== -1;
+};
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -86,7 +92,7 @@ var styles = function styles(theme) {
  */
 
 
-exports.styles = styles;
+exports.filterValue = filterValue;
 
 var HiSelectContent =
 /*#__PURE__*/
@@ -253,7 +259,7 @@ function (_React$PureComponent) {
         hideCheckbox: true,
         label: 'loading'
       }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
-        return item.label && (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
+        return item.label && _this.props.filterFunc(item, search);
       })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
@@ -395,7 +401,8 @@ HiSelectContent.defaultProps = {
     n_children: '%s items',
     one_child: '%s item'
   },
-  type: 'text'
+  type: 'text',
+  filterFunc: filterValue
 };
 HiSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
   autoHeight: _propTypes.default.bool,
@@ -420,6 +427,11 @@ HiSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   fallbackImage: _propTypes.default.string,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: _propTypes.default.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/HiSelectNew/HiSelectInput.js

@@ -193,8 +193,12 @@ function (_React$PureComponent) {
     };
 
     _this.handleClick = function (event) {
+      // Do not open select if press on resetIcon
       if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
-        _this.props.onClick(event);
+        // Do not open select if press enter on button => submit form
+        if (event.type !== 'keydown' || (0, _keycode.default)(event) !== 'enter') {
+          _this.props.onClick(event);
+        }
       }
     };
 
@@ -209,9 +213,11 @@ function (_React$PureComponent) {
     _this.handleBlur = function (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.ref = function (el) {
@@ -269,6 +275,7 @@ function (_React$PureComponent) {
       }, value || placeholder), _react.default.createElement(_ArrowDropDown.default, {
         className: iconClass
       })) : _react.default.createElement(_ButtonBase.default, {
+        component: "div",
         id: id,
         className: rootClass,
         onClick: this.handleClick,

package/HiSelectableList/HiSelectableList.js

@@ -33,8 +33,6 @@ var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListIt
 
 var _helpers = require("../utils/helpers");
 
-var _keycode = _interopRequireDefault(require("keycode"));
-
 var styles = function styles() {
   return {
     root: {
@@ -73,35 +71,6 @@ function (_React$PureComponent) {
       };
     };
 
-    _this.handleKeyDown = function (event) {
-      var nextItem;
-      var key = (0, _keycode.default)(event);
-
-      if (key === 'down') {
-        event.preventDefault();
-        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
-      } else if (key === 'up') {
-        event.preventDefault();
-        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
-      } else if (key === 'space' || key === 'enter' && !_this.props.multiple) {
-        event.preventDefault();
-
-        var item = _this.props.options.find(function (elem) {
-          return String(elem.id) === event.target.id;
-        });
-
-        _this.handleSelect(null, item);
-      }
-
-      if (nextItem) {
-        nextItem.focus();
-      }
-    };
-
-    _this.handleKeyUp = function () {
-      return false;
-    };
-
     _this.buildRecursiveListItem = function (item) {
       var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var _this$props = _this.props,
@@ -113,10 +82,8 @@ function (_React$PureComponent) {
           icon = _this$props.icon,
           selectedItemIdList = _this$props.selectedItemIdList,
           sort = _this$props.sort,
-          _this$props$onKeyDown = _this$props.onKeyDown,
-          onKeyDown = _this$props$onKeyDown === void 0 ? _this.handleKeyDown : _this$props$onKeyDown,
-          _this$props$onKeyUp = _this$props.onKeyUp,
-          onKeyUp = _this$props$onKeyUp === void 0 ? _this.handleKeyUp : _this$props$onKeyUp,
+          onKeyDown = _this$props.onKeyDown,
+          onKeyUp = _this$props.onKeyUp,
           others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 
       if (sort && item.children) {

package/HiSelectableList/HiSelectableListItem.js

@@ -122,12 +122,13 @@ var styles = function styles(theme) {
       minWidth: '50%',
       padding: '5px 0',
       '&$listItemContentSelected': {
-        marginBottom: -3,
+        marginBottom: 1,
         marginLeft: -4
       },
       '& strong': {
         fontWeight: theme.typography.fontWeightMedium
-      }
+      },
+      display: 'inline-flex'
     }),
     listItemContentSelected: {},
     label: {
@@ -173,7 +174,7 @@ var styles = function styles(theme) {
     labelContent: {
       display: 'flex',
       alignItems: 'center',
-      maxWidth: '70%',
+      maxWidth: '85%',
       '&$labelWithoutSecondaryInline': {
         maxWidth: '100%'
       }
@@ -278,7 +279,8 @@ function (_React$PureComponent) {
       }
 
       return _react.default.createElement("div", {
-        className: classes.label
+        className: classes.label,
+        title: label
       }, label);
     }
   }, {

package/es/HiAlertModal/HiAlertModal.js

@@ -10,18 +10,25 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { withStyles } from '../styles';
 import HiButton from '../HiButton';
+import HiIcon from '../HiIcon';
 export const styles = theme => ({
   classContent: {
     fontSize: 14,
-    lineHeight: '24px',
-    color: '#484848'
+    lineHeight: '20px',
+    color: '#484848',
+    position: 'relative'
   },
-  classPaper: {
-    maxWidth: 300
+  classDialogPaper: {
+    minHeight: 280,
+    maxWidth: 280,
+    borderRadius: 2
   },
   classCancelButton: {
     float: 'right'
   },
+  classSubmitButton: {
+    margin: '0'
+  },
   classTitle: {
     fontSize: 20,
     fontFamily: theme.typography.fontFamily,
@@ -29,10 +36,20 @@ export const styles = theme => ({
     lineHeight: '24px'
   },
   classAction: {
-    display: 'inline-block'
+    display: 'inline-block',
+    margin: '0',
+    padding: '0px 24px 24px 24px'
   },
   classDialogRoot: {
     backgroundColor: 'rgba(0, 0, 0, 0.28)'
+  },
+  classBackgroundIcon: {
+    position: 'absolute',
+    top: 'calc(50%)',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    color: theme.palette.background2,
+    flex: '1'
   }
 });
 /**
@@ -71,6 +88,8 @@ class HiAlertModal extends React.PureComponent {
   render() {
     const _this$props = this.props,
           {
+      backgroundIcon,
+      iconSize,
       classes,
       content,
       labelCancelButton,
@@ -78,19 +97,25 @@ class HiAlertModal extends React.PureComponent {
       onCancelClick,
       onSubmitClick,
       open,
+      cancelColor,
       submitColor,
       title
     } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "submitColor", "title"]);
+          props = _objectWithoutProperties(_this$props, ["backgroundIcon", "iconSize", "classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title"]);
 
     return React.createElement(Dialog, _extends({
       open: open,
       onClose: this.handleOnClose,
       classes: {
-        paper: classes.classPaper,
-        root: classes.classDialogRoot
+        root: classes.classDialogRoot,
+        paper: classes.classDialogPaper
       }
-    }, props), React.createElement(DialogTitle, {
+    }, props), backgroundIcon && React.createElement("div", {
+      className: classes.classBackgroundIcon
+    }, React.createElement(HiIcon, {
+      icon: backgroundIcon,
+      size: iconSize
+    })), React.createElement(DialogTitle, {
       disableTypography: true,
       classes: {
         root: classes.classTitle
@@ -103,21 +128,38 @@ class HiAlertModal extends React.PureComponent {
       classes: {
         root: classes.classAction
       }
-    }, React.createElement(HiButton, {
+    }, labelSubmitButton && React.createElement(HiButton, {
+      classes: {
+        root: classes.classSubmitButton
+      },
       onClick: this.handleClickSubmit,
       color: submitColor
-    }, labelSubmitButton), React.createElement(HiButton, {
+    }, labelSubmitButton), labelCancelButton && React.createElement(HiButton, {
       classes: {
         root: classes.classCancelButton
       },
       onClick: this.handleClickCancel,
-      color: "neutral"
+      color: cancelColor
     }, labelCancelButton)));
   }
 
 }
 
+HiAlertModal.defaultProps = {
+  cancelColor: 'neutral',
+  submitColor: 'primary'
+};
 HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Icon à mettre en fond
+   */
+  backgroundIcon: PropTypes.string,
+
+  /**
+   * The color of the cancel button. It supports those theme colors that make sense for this component.
+   */
+  cancelColor: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+
   /**
    * Surcharge les classes du composant
    */
@@ -126,7 +168,7 @@ HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Texte contenu dans la modal
    */
-  content: PropTypes.string,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Texte sur le bouton d'annulation