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

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

@@ -9,6 +9,12 @@ import { fade } from '../styles/colorManipulator';
 import Button from '@material-ui/core/Button';
 export const styles = theme => ({
   root: {},
+  flatNeutral: {
+    color: theme.palette.neutral.main,
+    '&$disabled': {
+      color: theme.palette.action.disabled
+    }
+  },
   flatPositive: {
     color: theme.palette.positive.main,
     '&:hover': {
@@ -17,6 +23,9 @@ export const styles = theme => ({
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
+    },
+    '&$disabled': {
+      color: theme.palette.action.disabled
     }
   },
   flatNegative: {
@@ -27,6 +36,9 @@ export const styles = theme => ({
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
+    },
+    '&$disabled': {
+      color: theme.palette.action.disabled
     }
   },
   flatMiddle: {
@@ -37,16 +49,9 @@ export const styles = theme => ({
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
-    }
-  },
-  flatNeutral: {
-    color: theme.palette.neutral.main,
-    '&:hover': {
-      backgroundColor: fade(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+    },
+    '&$disabled': {
+      color: theme.palette.action.disabled
     }
   },
 
@@ -60,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
     }
   },
 
@@ -73,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
     }
   },
 
@@ -86,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
     }
   },
 
@@ -99,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
     }
   },
 
@@ -132,7 +153,8 @@ export const styles = theme => ({
     '&:hover': {
       border: `1px solid ${theme.palette.neutral.main}`
     }
-  }
+  },
+  disabled: {}
 });
 
 function HiButton(props) {
@@ -141,9 +163,10 @@ function HiButton(props) {
     classes,
     className,
     color,
-    variant
+    variant,
+    disabled
   } = props,
-        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant"]);
+        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant", "disabled"]);
 
   const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
   const fab = variant === 'fab' || variant === 'extendedFab';
@@ -152,15 +175,16 @@ function HiButton(props) {
     [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
     [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
     [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
-    [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'neutral',
+    [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral'),
     [classes.containedPositive]: (contained || fab) && color === 'positive',
     [classes.containedNegative]: (contained || fab) && color === 'negative',
     [classes.containedMiddle]: (contained || fab) && color === 'middle',
-    [classes.containedNeutral]: (contained || fab) && color === 'neutral',
+    [classes.containedNeutral]: (contained || fab) && (color === 'default' || color === 'neutral'),
     [classes.outlinedPositive]: variant === 'outlined' && color === 'positive',
     [classes.outlinedNegative]: variant === 'outlined' && color === 'negative',
     [classes.outlinedMiddle]: variant === 'outlined' && color === 'middle',
-    [classes.outlinedNeutral]: variant === 'outlined' && color === 'neutral'
+    [classes.outlinedNeutral]: variant === 'outlined' && (color === 'default' || color === 'neutral'),
+    [classes.disabled]: disabled
   });
   return React.createElement(Button, _extends({
     className: className,
@@ -168,7 +192,8 @@ function HiButton(props) {
       root: buttonClassNames
     },
     color: hcolor,
-    variant: variant
+    variant: variant,
+    disabled: disabled
   }, other), children);
 }
 
@@ -194,7 +219,7 @@ HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
   variant: PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
 } : {};
 HiButton.defaultProps = {
-  color: 'default',
+  color: 'neutral',
   variant: 'text'
 };
 export default withStyles(styles, {

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

@@ -141,6 +141,14 @@ class HiInput extends React.PureComponent {
     this.handleOverlayRef = this.handleOverlayRef.bind(this);
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (typeof nextProps.focused !== 'undefined' && nextProps.focused !== prevState.focused) {
+      return {
+        focused: nextProps.focused
+      };
+    }
+  }
+
   getInputElement(el) {
     this.inputElement = el;
 
@@ -171,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({
@@ -403,6 +415,12 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   error: PropTypes.bool,
 
+  /**
+   * Force le focus de l'input et surcharge le comportement par défaut
+   * où le focus est géré dans le state.
+   */
+  focused: PropTypes.bool,
+
   /**
    * Utile pour surcharger les classes de l'input
    */

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 => ({
@@ -23,7 +23,7 @@ export const styles = theme => ({
     position: 'relative'
   },
   popper: {
-    width: '100%',
+    width: '100% !important',
     zIndex: 1200
   },
   paper: {
@@ -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/HiSelectNew/HiSelectInput.js

@@ -135,14 +135,53 @@ class HiSelectInput extends React.PureComponent {
       }
     };
 
+    this.handleKeyDownReset = event => {
+      const key = keycode(event);
+
+      if (key === 'enter' || key === 'space') {
+        this.handleReset(event);
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
+
     this.handleClick = event => {
       if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
         this.props.onClick(event);
       }
     };
 
+    this.handleReset = event => {
+      this.props.onReset(event);
+
+      if (this.input) {
+        this.input.focus();
+      }
+    };
+
+    this.handleBlur = 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();
+        }
+      }
+    };
+
+    this.handleRef = el => {
+      this.input = el;
+
+      if (this.props.refElement) {
+        this.props.refElement(el);
+      }
+    };
+
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleClick = this.handleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleRef = this.handleRef.bind(this);
+    this.handleReset = this.handleReset.bind(this);
   }
 
   render() {
@@ -157,9 +196,7 @@ class HiSelectInput extends React.PureComponent {
       focused,
       error,
       id,
-      placeholder,
-      refElement,
-      theme
+      placeholder
     } = this.props; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
     const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
@@ -182,9 +219,7 @@ class HiSelectInput extends React.PureComponent {
       onBlur: this.props.onBlur,
       role: "button",
       tabIndex: "0",
-      ref: el => {
-        if (refElement) refElement(el);
-      }
+      ref: this.handleRef
     }, React.createElement("span", {
       className: classNames(classes.label, {
         [classes.placeholder]: value === undefined
@@ -200,10 +235,8 @@ class HiSelectInput extends React.PureComponent {
       onMouseLeave: this.props.onMouseLeave,
       onKeyDown: this.handleKeyDown,
       onFocus: this.props.onFocus,
-      onBlur: this.props.onBlur,
-      buttonRef: el => {
-        if (refElement) refElement(el);
-      }
+      onBlur: this.handleBlur,
+      buttonRef: this.handleRef
     }, React.createElement("span", {
       className: classNames(classes.label, {
         [classes.placeholder]: value === undefined
@@ -214,9 +247,11 @@ class HiSelectInput extends React.PureComponent {
       }
     }, React.createElement(HiIcon, {
       icon: "close",
-      size: 24,
-      color: theme.palette.neutral.main,
-      onClick: onReset
+      size: 20,
+      color: "neutral",
+      onClick: this.handleReset,
+      onKeyDown: this.handleKeyDownReset,
+      tabIndex: 0
     })), React.createElement(Icon, {
       classes: {
         root: iconClass
@@ -327,6 +362,5 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 export default withStyles(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectInput',
-  withTheme: true
+  name: 'HmuiHiSelectInput'
 })(HiSelectInput);

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;
+  });
 }