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

package/es/HiIcon/HiIcon.js

@@ -10,42 +10,48 @@ import * as hiSvgIcons from '../hi-svg-icons';
 import * as mdi from 'mdi-material-ui';
 export const styles = theme => ({
   /* 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: {}
 });
 
 function HiIcon(props) {

package/es/HiSelectNew/HiNestedSelect.js

@@ -6,7 +6,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import HiSelect from './HiSelect';
 import HiIcon from '../HiIcon';
-import withStyles from "../styles/withStyles";
+import withStyles from '../styles/withStyles';
+import { foldAccents } from '../utils/helpers';
 /**
  * Return array of final item id in nested list (via props chlidren)
  * @param itemList
@@ -56,18 +57,20 @@ 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 {*}
  */
 
 
-function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false) {
+function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations) {
   return itemList.reduce(({
     l: memoItemList,
     s: memoSelected,
     u: memoUnselected,
     v: memoVisible
   }, item) => {
-    const itemVisible = searchValue === '' || item.label.toString().toLowerCase().search(searchValue.toLowerCase()) !== -1; // Parent item
+    const itemVisible = searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1; // Parent item
 
     if (item.children) {
       const {
@@ -76,6 +79,11 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
         u: unselected,
         v: visible
       } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent);
+
+      if (nbChildrenAsInfo) {
+        item.info = translations.n_children.replace('%s', item.children.length);
+      }
+
       return {
         l: [...memoItemList, _objectSpread({}, item, disabledParent && {
           disabled: true,
@@ -126,7 +134,31 @@ export const styles = theme => ({
     borderRadius: '0px 2px',
     maxHeight: 480,
     transition: 'none !important'
-  }
+  },
+  labelImg: {
+    height: 18,
+    width: 'auto',
+    margin: '0 4px',
+    verticalAlign: 'middle'
+  },
+  selectIconLabel: _objectSpread({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    paddingRight: 16
+  }, theme.typography.b1, {
+    display: 'inline-flex',
+    width: '100%'
+  }),
+  selectImgLabel: _objectSpread({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    paddingRight: 16
+  }, theme.typography.b1, {
+    display: 'inline-flex',
+    width: '100%'
+  })
 });
 /**
  * HiNestedSelect hérite du composant HiSelect
@@ -193,6 +225,7 @@ class HiNestedSelect extends React.PureComponent {
         hasAll,
         iconAll,
         multiple,
+        nbChildrenAsInfo,
         pinnedParent,
         translations
       } = this.props; // build item list
@@ -202,7 +235,7 @@ class HiNestedSelect extends React.PureComponent {
         s: allSelected,
         u: allUnselected,
         v: visible
-      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple);
+      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations);
       const itemList = !visible ? [...(loading ? [{
         id: '_loading',
         type: 'loader',
@@ -332,7 +365,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'
   }
 };
@@ -377,6 +410,11 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   name: PropTypes.string.isRequired,
 
+  /**
+   * Définit si l'on doit afficher le nombre d'enfants du parent dans son champ info
+   */
+  nbChildrenAsInfo: PropTypes.bool,
+
   /**
    * Fonction de callback qui renvoit la/les valeurs sélectionnées
    *

package/es/HiSelectNew/HiSelect.js

@@ -12,7 +12,7 @@ import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
 import HiSelectInput from './HiSelectInput';
 import withStyles from '../styles/withStyles';
-import { getNextItemSelectable } from '../utils/helpers';
+import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import HiIcon from '../HiIcon';
 import keycode from 'keycode';
 export const styles = theme => ({
@@ -20,11 +20,11 @@ export const 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',
@@ -136,7 +136,8 @@ class HiSelect extends 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();
       }
     };
@@ -272,7 +273,13 @@ class HiSelect extends React.PureComponent {
         hideCheckbox: true,
         label: 'loading'
       }] : []), // simple one level filter on label
-      ...(search !== '' ? [...options.filter(item => item.label && item.label.toString().toLowerCase().search(search.toLowerCase()) !== -1)] : [...options])];
+      ...(search !== '' ? [...options.filter(item => item.label && foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1)] : [...(this.props.hasAll ? [_objectSpread({
+        id: '_all',
+        label: this.props.translations.all
+      }, this.props.iconAll && {
+        type: 'icon',
+        icon: this.props.iconAll
+      })] : []), ...options])];
       return {
         itemList,
         inputValue: this.buildInputValue(options, value, loading)

package/es/HiSelectableList/HiSelectableListItem.js

@@ -76,7 +76,10 @@ export const styles = theme => ({
   }, theme.typography.b1, {
     fontWeight: 'inherit',
     width: '100%',
-    padding: '5px 0'
+    padding: '5px 0',
+    '& strong': {
+      fontWeight: theme.typography.fontWeightMedium
+    }
   }),
   label: {
     display: 'inline-block',
@@ -205,6 +208,7 @@ class HiSelectableListItem extends React.Component {
       hideCheckbox,
       onSelect,
       indeterminate,
+      indeterminateIcon,
       icon,
       id,
       img,
@@ -270,7 +274,8 @@ class HiSelectableListItem extends React.Component {
       ,
       disabled: disabled,
       icon: displayedIcon,
-      indeterminate: indeterminate
+      indeterminate: indeterminate,
+      indeterminateIcon: indeterminateIcon
     }), React.createElement("div", {
       className: classNames(classes.listItemContent, {
         [classes.centered]: centered,
@@ -308,6 +313,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/utils/helpers.js

@@ -241,4 +241,26 @@ export function getNextItemSelectable(node, direction) {
   }
 
   return node.previousSibling;
+}
+/**
+ * Retourne la chaîne de caractères passée en entrée sans les accents
+ * @param toFold
+ * @returns {*}
+ */
+
+export function foldAccents(toFold) {
+  return toFold.replace(/([àáâãäå])|([ç])|([èéêë])|([ìíîï])|([ñ])|([òóôõöø])|([ß])|([ùúûü])|([ÿ])|([æ])|([œ])/g, (str, a, c, e, i, n, o, s, u, y, ae, oe) => {
+    if (a) return 'a';
+    if (c) return 'c';
+    if (e) return 'e';
+    if (i) return 'i';
+    if (n) return 'n';
+    if (o) return 'o';
+    if (s) return 's';
+    if (u) return 'u';
+    if (y) return 'y';
+    if (ae) return 'ae';
+    if (oe) return 'oe';
+    return str;
+  });
 }

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.42
+/** @license HiPay-Material-UI v2.0.0-beta.43
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.42
+/** @license HiPay-Material-UI v2.0.0-beta.43
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.42",
+  "version": "2.0.0-beta.43",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/umd/hipay-material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.42
+/** @license HiPay-Material-UI v2.0.0-beta.43
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13289,15 +13289,13 @@
 
             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': {
@@ -13306,6 +13304,9 @@
                     '@media (hover: none)': {
                       backgroundColor: 'transparent'
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.action.disabled
                   }
                 },
                 flatNegative: {
@@ -13316,6 +13317,9 @@
                     '@media (hover: none)': {
                       backgroundColor: 'transparent'
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.action.disabled
                   }
                 },
                 flatMiddle: {
@@ -13326,6 +13330,9 @@
                     '@media (hover: none)': {
                       backgroundColor: 'transparent'
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.action.disabled
                   }
                 },
 
@@ -13339,6 +13346,10 @@
                     '@media (hover: none)': {
                       backgroundColor: theme.palette.positive.main
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
                   }
                 },
 
@@ -13352,6 +13363,10 @@
                     '@media (hover: none)': {
                       backgroundColor: theme.palette.negative.main
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
                   }
                 },
 
@@ -13365,6 +13380,10 @@
                     '@media (hover: none)': {
                       backgroundColor: theme.palette.middle.main
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
                   }
                 },
 
@@ -13378,6 +13397,10 @@
                     '@media (hover: none)': {
                       backgroundColor: theme.palette.neutral.main
                     }
+                  },
+                  '&$disabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
                   }
                 },
 
@@ -65851,42 +65874,48 @@
             var styles$2 = 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. */
-                faIcon: {
-                  fontSize: 20
-                },
+                  /* Styles applied to the root element if `color="secondary"`. */
+                  '&$colorSecondary': {
+                    color: theme.palette.secondary.main
+                  },
 
-                /* Styles applied to the root element if `color="primary"`. */
-                colorPrimary: {
-                  color: theme.palette.primary.main
-                },
+                  /* Styles applied to the root element if `color="positive"`. */
+                  '&$colorPositive': {
+                    color: theme.palette.positive.main
+                  },
 
-                /* Styles applied to the root element if `color="secondary"`. */
-                colorSecondary: {
-                  color: theme.palette.secondary.main
-                },
+                  /* Styles applied to the root element if `color="negative"`. */
+                  '&$colorNegative': {
+                    color: theme.palette.negative.main
+                  },
 
-                /* Styles applied to the root element if `color="positive"`. */
-                colorPositive: {
-                  color: theme.palette.positive.main
-                },
+                  /* Styles applied to the root element if `color="middle"`. */
+                  '&$colorMiddle': {
+                    color: theme.palette.middle.main
+                  },
 
-                /* Styles applied to the root element if `color="negative"`. */
-                colorNegative: {
-                  color: theme.palette.negative.main
+                  /* Styles applied to the root element if `color="neutral"`. */
+                  '&$colorNeutral': {
+                    color: theme.palette.neutral.main
+                  }
                 },
 
-                /* Styles applied to the root element if `color="middle"`. */
-                colorMiddle: {
-                  color: theme.palette.middle.main
+                /* Styles applied to the root element. */
+                faIcon: {
+                  fontSize: 20
                 },
-
-                /* Styles applied to the root element if `color="neutral"`. */
-                colorNeutral: {
-                  color: theme.palette.neutral.main
-                }
+                colorPrimary: {},
+                colorSecondary: {},
+                colorPositive: {},
+                colorNegative: {},
+                colorMiddle: {},
+                colorNeutral: {}
               };
             };
 
@@ -68702,6 +68731,10 @@
                   // 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({
@@ -86241,8 +86274,6 @@
 
                   var inputProps = _extends_1({}, onReset && {
                     onReset: this.handleReset
-                  }, {
-                    onBlur: this.handleBlur
                   }, props, {
                     onChange: this.handleInputChange
                   });
@@ -91543,7 +91574,7 @@
 
             var styles$l = function styles(theme) {
               return {
-                root: _extends_1({}, theme.typography.b3, {
+                root: _extends_1({}, theme.typography.b1, {
                   display: 'inline-block',
                   alignItems: 'baseline',
                   maxWidth: '100%',
@@ -91661,7 +91692,12 @@
                 }, fontWeight && {
                   fontWeight: fontWeight
                 })
-              }, other), label);
+              }, other, {
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                  __html: escapeHTML(label)
+                }
+              }));
             }
 
             HiColoredLabel.propTypes = {
@@ -95614,7 +95650,10 @@
                 }, theme.typography.b1, {
                   fontWeight: 'inherit',
                   width: '100%',
-                  padding: '5px 0'
+                  padding: '5px 0',
+                  '& strong': {
+                    fontWeight: theme.typography.fontWeightMedium
+                  }
                 }),
                 label: {
                   display: 'inline-block',
@@ -95760,6 +95799,7 @@
                       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,
@@ -95818,7 +95858,8 @@
                     ,
                     disabled: disabled,
                     icon: displayedIcon,
-                    indeterminate: indeterminate
+                    indeterminate: indeterminate,
+                    indeterminateIcon: indeterminateIcon
                   }), React__default.createElement("div", {
                     className: classnames(classes.listItemContent, (_classNames2 = {}, defineProperty(_classNames2, classes.centered, centered), defineProperty(_classNames2, classes.primaryHighlight, type === 'primary-highlight'), _classNames2)),
                     "data-id": id
@@ -95853,6 +95894,7 @@
               hideCheckbox: false,
               hoverIcon: 'check_box_outline_blank',
               checkedIcon: 'check_box',
+              indeterminateIcon: 'indeterminate_check_box',
               indeterminate: false,
               level: 0,
               paddingLeft: 4,