@hipay/hipay-material-ui 2.0.0-beta.42 → 2.0.0-beta.43

package/HiAppBar/HiAppBar.js

@@ -75,10 +75,6 @@ var _ref = _react.default.createElement(_HiIcon.default, {
   icon: "keyboard_arrow_up"
 });
 
-var _ref2 = _react.default.createElement(_HiIcon.default, {
-  icon: "keyboard_arrow_down"
-});
-
 var HiAppBar =
 /*#__PURE__*/
 function (_React$Component) {
@@ -99,15 +95,7 @@ function (_React$Component) {
   (0, _createClass2.default)(HiAppBar, [{
     key: "handleCollapse",
     value: function handleCollapse() {
-      if (this.props.onCollapse) {
-        this.props.onCollapse();
-      } else {
-        this.setState(function (prevState) {
-          return {
-            collapsed: !prevState.collapsed
-          };
-        });
-      }
+      this.props.onCollapse(!this.state.collapsed);
     }
   }, {
     key: "render",
@@ -116,8 +104,7 @@ function (_React$Component) {
           children = _this$props.children,
           classes = _this$props.classes,
           className = _this$props.className,
-          _this$props$collapsed = _this$props.collapsed,
-          collapsed = _this$props$collapsed === void 0 ? this.state.collapsed : _this$props$collapsed,
+          collapsed = _this$props.collapsed,
           focused = _this$props.focused,
           hideable = _this$props.hideable,
           position = _this$props.position,
@@ -137,11 +124,7 @@ function (_React$Component) {
         onClick: this.handleCollapse,
         color: "inherit",
         className: classes.iconButton
-      }, _ref)))), hideable && collapsed && _react.default.createElement(_HiIconButton.default, {
-        onClick: this.handleCollapse,
-        color: "inherit",
-        className: classes.collapseButton
-      }, _ref2));
+      }, _ref)))));
     }
   }]);
   return HiAppBar;

package/HiButton/HiButton.js

@@ -28,15 +28,13 @@ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 // @inheritedComponent Button
 var styles = function styles(theme) {
   return {
-    root: {
+    root: {},
+    flatNeutral: {
+      color: theme.palette.neutral.main,
       '&$disabled': {
-        color: theme.palette.neutral.contrastText,
-        backgroundColor: theme.palette.neutral.main
+        color: theme.palette.action.disabled
       }
     },
-    flatNeutral: {
-      color: theme.palette.neutral.main
-    },
     flatPositive: {
       color: theme.palette.positive.main,
       '&:hover': {
@@ -45,6 +43,9 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
+      },
+      '&$disabled': {
+        color: theme.palette.action.disabled
       }
     },
     flatNegative: {
@@ -55,6 +56,9 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
+      },
+      '&$disabled': {
+        color: theme.palette.action.disabled
       }
     },
     flatMiddle: {
@@ -65,6 +69,9 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
+      },
+      '&$disabled': {
+        color: theme.palette.action.disabled
       }
     },
 
@@ -78,6 +85,10 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: theme.palette.positive.main
         }
+      },
+      '&$disabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
       }
     },
 
@@ -91,6 +102,10 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: theme.palette.negative.main
         }
+      },
+      '&$disabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
       }
     },
 
@@ -104,6 +119,10 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: theme.palette.middle.main
         }
+      },
+      '&$disabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
       }
     },
 
@@ -117,6 +136,10 @@ var styles = function styles(theme) {
         '@media (hover: none)': {
           backgroundColor: theme.palette.neutral.main
         }
+      },
+      '&$disabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
       }
     },
 

package/HiColoredLabel/HiColoredLabel.js

@@ -27,7 +27,7 @@ var _colorManipulator = require("../styles/colorManipulator");
 
 var styles = function styles(theme) {
   return {
-    root: (0, _extends2.default)({}, theme.typography.b3, {
+    root: (0, _extends2.default)({}, theme.typography.b1, {
       display: 'inline-block',
       alignItems: 'baseline',
       maxWidth: '100%',
@@ -147,7 +147,12 @@ function HiColoredLabel(props) {
     }, fontWeight && {
       fontWeight: fontWeight
     })
-  }, other), label);
+  }, other, {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: (0, _helpers.escapeHTML)(label)
+    }
+  }));
 }
 
 HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {

package/HiDatePicker/HiDatePicker.js

@@ -292,8 +292,6 @@ function (_React$Component) {
       }, props);
       var inputProps = (0, _extends2.default)({}, onReset && {
         onReset: this.handleReset
-      }, {
-        onBlur: this.handleBlur
       }, props, {
         onChange: this.handleInputChange
       });

package/HiForm/HiInput.js

@@ -219,6 +219,10 @@ function (_React$PureComponent) {
       // Si on click sur un élément de HiInput, on garde le focus
       // Par exemple sur l'icone reset
       if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
+        if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
+          this.props.onBlur(event);
+        }
+
         event.stopPropagation();
       } else {
         this.setState({

package/HiIcon/HiIcon.js

@@ -34,42 +34,48 @@ var mdi = _interopRequireWildcard(require("mdi-material-ui"));
 var styles = function styles(theme) {
   return {
     /* Styles applied to the root element. */
-    root: {},
+    root: {
+      /* Styles applied to the root element if `color="primary"`. */
+      '&$colorPrimary': {
+        color: theme.palette.primary.main
+      },
+
+      /* Styles applied to the root element if `color="secondary"`. */
+      '&$colorSecondary': {
+        color: theme.palette.secondary.main
+      },
+
+      /* Styles applied to the root element if `color="positive"`. */
+      '&$colorPositive': {
+        color: theme.palette.positive.main
+      },
+
+      /* Styles applied to the root element if `color="negative"`. */
+      '&$colorNegative': {
+        color: theme.palette.negative.main
+      },
+
+      /* Styles applied to the root element if `color="middle"`. */
+      '&$colorMiddle': {
+        color: theme.palette.middle.main
+      },
+
+      /* Styles applied to the root element if `color="neutral"`. */
+      '&$colorNeutral': {
+        color: theme.palette.neutral.main
+      }
+    },
 
     /* Styles applied to the root element. */
     faIcon: {
       fontSize: 20
     },
-
-    /* Styles applied to the root element if `color="primary"`. */
-    colorPrimary: {
-      color: theme.palette.primary.main
-    },
-
-    /* Styles applied to the root element if `color="secondary"`. */
-    colorSecondary: {
-      color: theme.palette.secondary.main
-    },
-
-    /* Styles applied to the root element if `color="positive"`. */
-    colorPositive: {
-      color: theme.palette.positive.main
-    },
-
-    /* Styles applied to the root element if `color="negative"`. */
-    colorNegative: {
-      color: theme.palette.negative.main
-    },
-
-    /* Styles applied to the root element if `color="middle"`. */
-    colorMiddle: {
-      color: theme.palette.middle.main
-    },
-
-    /* Styles applied to the root element if `color="neutral"`. */
-    colorNeutral: {
-      color: theme.palette.neutral.main
-    }
+    colorPrimary: {},
+    colorSecondary: {},
+    colorPositive: {},
+    colorNegative: {},
+    colorMiddle: {},
+    colorNeutral: {}
   };
 };
 

package/HiSelectNew/HiNestedSelect.js

@@ -35,6 +35,8 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
+var _helpers = require("../utils/helpers");
+
 // @inheritedComponent HiSelect
 
 /**
@@ -86,6 +88,8 @@ function findFinalItemRecursively(itemList, searchId) {
  * @param visibleParent - visibility of the list parent item (default false)
  * @param pinnedParent - parent will be displayed as pinned items
  * @param disabledParent - parent will not be selectable
+ * @param nbChildrenAsInfo - Show children number as info
+ * @param translations - Translations
  * @returns {*}
  */
 
@@ -96,12 +100,14 @@ function buildFilteredItemList(itemList) {
   var visibleParent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var pinnedParent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   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;
   return itemList.reduce(function (_ref, item) {
     var memoItemList = _ref.l,
         memoSelected = _ref.s,
         memoUnselected = _ref.u,
         memoVisible = _ref.v;
-    var itemVisible = searchValue === '' || item.label.toString().toLowerCase().search(searchValue.toLowerCase()) !== -1; // Parent item
+    var itemVisible = searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(searchValue.toLowerCase())) !== -1; // Parent item
 
     if (item.children) {
       var _buildFilteredItemLis = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent),
@@ -110,6 +116,10 @@ function buildFilteredItemList(itemList) {
           unselected = _buildFilteredItemLis.u,
           visible = _buildFilteredItemLis.v;
 
+      if (nbChildrenAsInfo) {
+        item.info = translations.n_children.replace('%s', item.children.length);
+      }
+
       return {
         l: (0, _toConsumableArray2.default)(memoItemList).concat([(0, _extends2.default)({}, item, disabledParent && {
           disabled: true,
@@ -161,7 +171,31 @@ var styles = function styles(theme) {
       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%'
+    })
   };
 };
 /**
@@ -249,10 +283,11 @@ function (_React$PureComponent) {
           hasAll = _this$props2.hasAll,
           iconAll = _this$props2.iconAll,
           multiple = _this$props2.multiple,
+          nbChildrenAsInfo = _this$props2.nbChildrenAsInfo,
           pinnedParent = _this$props2.pinnedParent,
           translations = _this$props2.translations; // build item list
 
-      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple),
+      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations),
           filteredItemList = _buildFilteredItemLis2.l,
           allSelected = _buildFilteredItemLis2.s,
           allUnselected = _buildFilteredItemLis2.u,
@@ -389,7 +424,7 @@ HiNestedSelect.defaultProps = {
     search: 'Search',
     n_items_selected: '%s items selected',
     one_item_selected: '%s item selected',
-    n_children: '%s items',
+    n_children: '%s',
     one_child: '%s item'
   }
 };
@@ -434,6 +469,11 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   name: _propTypes.default.string.isRequired,
 
+  /**
+   * Définit si l'on doit afficher le nombre d'enfants du parent dans son champ info
+   */
+  nbChildrenAsInfo: _propTypes.default.bool,
+
   /**
    * Fonction de callback qui renvoit la/les valeurs sélectionnées
    *

package/HiSelectNew/HiSelect.js

@@ -59,11 +59,11 @@ var styles = function styles(theme) {
       backgroundColor: theme.palette.background2,
       maxWidth: 500,
       width: '100%',
-      position: 'relative',
-      zIndex: 1
+      position: 'relative'
     },
     popper: {
-      width: '100%'
+      width: '100% !important',
+      zIndex: 1200
     },
     paper: {
       borderRadius: '0px 2px',
@@ -193,7 +193,9 @@ function (_React$PureComponent) {
 
       if (_this.overlay && (key === 'down' || key === 'up')) {
         _this.focusOnFirstItem();
-      } else if (_this.overlay && key === 'esc') {
+      } else if (_this.overlay && key === 'esc' || key === 'enter') {
+        event.preventDefault();
+
         _this.handleClose();
       }
     };
@@ -336,8 +338,14 @@ function (_React$PureComponent) {
         hideCheckbox: true,
         label: 'loading'
       }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
-        return item.label && item.label.toString().toLowerCase().search(search.toLowerCase()) !== -1;
-      })) : (0, _toConsumableArray2.default)(options)));
+        return item.label && (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
+      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+        id: '_all',
+        label: _this.props.translations.all
+      }, _this.props.iconAll && {
+        type: 'icon',
+        icon: _this.props.iconAll
+      })] : []).concat((0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList,
         inputValue: _this.buildInputValue(options, value, loading)

package/HiSelectableList/HiSelectableListItem.js

@@ -111,7 +111,10 @@ var styles = function styles(theme) {
     }, theme.typography.b1, {
       fontWeight: 'inherit',
       width: '100%',
-      padding: '5px 0'
+      padding: '5px 0',
+      '& strong': {
+        fontWeight: theme.typography.fontWeightMedium
+      }
     }),
     label: {
       display: 'inline-block',
@@ -259,6 +262,7 @@ function (_React$Component) {
           hideCheckbox = _this$props2.hideCheckbox,
           onSelect = _this$props2.onSelect,
           indeterminate = _this$props2.indeterminate,
+          indeterminateIcon = _this$props2.indeterminateIcon,
           icon = _this$props2.icon,
           id = _this$props2.id,
           img = _this$props2.img,
@@ -317,7 +321,8 @@ function (_React$Component) {
         ,
         disabled: disabled,
         icon: displayedIcon,
-        indeterminate: indeterminate
+        indeterminate: indeterminate,
+        indeterminateIcon: indeterminateIcon
       }), _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.listItemContent, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.centered, centered), (0, _defineProperty2.default)(_classNames2, classes.primaryHighlight, type === 'primary-highlight'), _classNames2)),
         "data-id": id
@@ -351,6 +356,7 @@ HiSelectableListItem.defaultProps = {
   hideCheckbox: false,
   hoverIcon: 'check_box_outline_blank',
   checkedIcon: 'check_box',
+  indeterminateIcon: 'indeterminate_check_box',
   indeterminate: false,
   level: 0,
   paddingLeft: 4,

package/es/HiAppBar/HiAppBar.js

@@ -37,10 +37,6 @@ var _ref = React.createElement(HiIcon, {
   icon: "keyboard_arrow_up"
 });
 
-var _ref2 = React.createElement(HiIcon, {
-  icon: "keyboard_arrow_down"
-});
-
 class HiAppBar extends React.Component {
   constructor(props) {
     super(props);
@@ -51,13 +47,7 @@ class HiAppBar extends React.Component {
   }
 
   handleCollapse() {
-    if (this.props.onCollapse) {
-      this.props.onCollapse();
-    } else {
-      this.setState(prevState => ({
-        collapsed: !prevState.collapsed
-      }));
-    }
+    this.props.onCollapse(!this.state.collapsed);
   }
 
   render() {
@@ -66,8 +56,7 @@ class HiAppBar extends React.Component {
       children,
       classes,
       className,
-      collapsed = this.state.collapsed,
-      // enable controlled & uncontrolled prop
+      collapsed,
       focused,
       hideable,
       position
@@ -93,11 +82,7 @@ class HiAppBar extends React.Component {
       onClick: this.handleCollapse,
       color: "inherit",
       className: classes.iconButton
-    }, _ref)))), hideable && collapsed && React.createElement(HiIconButton, {
-      onClick: this.handleCollapse,
-      color: "inherit",
-      className: classes.collapseButton
-    }, _ref2));
+    }, _ref)))));
   }
 
 }

package/es/HiButton/HiButton.js

@@ -8,15 +8,13 @@ import { withStyles } from '../styles';
 import { fade } from '../styles/colorManipulator';
 import Button from '@material-ui/core/Button';
 export const styles = theme => ({
-  root: {
+  root: {},
+  flatNeutral: {
+    color: theme.palette.neutral.main,
     '&$disabled': {
-      color: theme.palette.neutral.contrastText,
-      backgroundColor: theme.palette.neutral.main
+      color: theme.palette.action.disabled
     }
   },
-  flatNeutral: {
-    color: theme.palette.neutral.main
-  },
   flatPositive: {
     color: theme.palette.positive.main,
     '&:hover': {
@@ -25,6 +23,9 @@ export const styles = theme => ({
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
+    },
+    '&$disabled': {
+      color: theme.palette.action.disabled
     }
   },
   flatNegative: {
@@ -35,6 +36,9 @@ export const styles = theme => ({
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
+    },
+    '&$disabled': {
+      color: theme.palette.action.disabled
     }
   },
   flatMiddle: {
@@ -45,6 +49,9 @@ export const styles = theme => ({
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
+    },
+    '&$disabled': {
+      color: theme.palette.action.disabled
     }
   },
 
@@ -58,6 +65,10 @@ export const styles = theme => ({
       '@media (hover: none)': {
         backgroundColor: theme.palette.positive.main
       }
+    },
+    '&$disabled': {
+      color: theme.palette.neutral.contrastText,
+      backgroundColor: theme.palette.neutral.main
     }
   },
 
@@ -71,6 +82,10 @@ export const styles = theme => ({
       '@media (hover: none)': {
         backgroundColor: theme.palette.negative.main
       }
+    },
+    '&$disabled': {
+      color: theme.palette.neutral.contrastText,
+      backgroundColor: theme.palette.neutral.main
     }
   },
 
@@ -84,6 +99,10 @@ export const styles = theme => ({
       '@media (hover: none)': {
         backgroundColor: theme.palette.middle.main
       }
+    },
+    '&$disabled': {
+      color: theme.palette.neutral.contrastText,
+      backgroundColor: theme.palette.neutral.main
     }
   },
 
@@ -97,6 +116,10 @@ export const styles = theme => ({
       '@media (hover: none)': {
         backgroundColor: theme.palette.neutral.main
       }
+    },
+    '&$disabled': {
+      color: theme.palette.neutral.contrastText,
+      backgroundColor: theme.palette.neutral.main
     }
   },
 

package/es/HiColoredLabel/HiColoredLabel.js

@@ -5,10 +5,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
-import { capitalize } from '../utils/helpers';
+import { capitalize, escapeHTML } from '../utils/helpers';
 import { fade } from '../styles/colorManipulator';
 export const styles = theme => ({
-  root: _objectSpread({}, theme.typography.b3, {
+  root: _objectSpread({}, theme.typography.b1, {
     display: 'inline-block',
     alignItems: 'baseline',
     maxWidth: '100%',
@@ -130,7 +130,12 @@ function HiColoredLabel(props) {
     }, fontWeight && {
       fontWeight
     })
-  }, other), label);
+  }, other, {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: escapeHTML(label)
+    }
+  }));
 }
 
 HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {

package/es/HiDatePicker/HiDatePicker.js

@@ -234,8 +234,6 @@ class HiDatePicker extends React.Component {
 
     const inputProps = _objectSpread({}, onReset && {
       onReset: this.handleReset
-    }, {
-      onBlur: this.handleBlur
     }, props, {
       onChange: this.handleInputChange
     });

package/es/HiForm/HiInput.js

@@ -179,6 +179,10 @@ class HiInput extends React.PureComponent {
     // Si on click sur un élément de HiInput, on garde le focus
     // Par exemple sur l'icone reset
     if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
+      if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
+        this.props.onBlur(event);
+      }
+
       event.stopPropagation();
     } else {
       this.setState({