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

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

package/es/HiForm/HiFormControl.js

@@ -199,16 +199,14 @@ class HiFormControl extends React.PureComponent {
       focused: !disabled && (focused || hovered)
     }, InputLabelProps), error && errorText && React.createElement(HiIconButton, {
       className: classNames(classes.iconButton, classes.iconButtonError),
-      onClick: this.handleHelperClick,
-      onKeyDown: this.handleKeyDown
+      onClick: this.handleHelperClick
     }, React.createElement(Warning, {
       className: classNames(classes.icon)
     })), helperIcon && helperText && !error && React.createElement(HiIconButton, {
       className: classNames(classes.iconButton, classes.iconButtonInfo, {
         [classes.iconButtonInfoActive]: helperOpen
       }),
-      onClick: this.handleHelperClick,
-      onKeyDown: this.handleKeyDown
+      onClick: this.handleHelperClick
     }, React.createElement(Info, {
       className: classNames(classes.icon)
     }))), React.createElement("div", {

package/es/HiForm/HiInput.js

@@ -177,10 +177,15 @@ 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) {
+      // If blur came from erase icon => stay focused and don't call onBlur props
+      if (this.eraseIconNode && this.eraseIconNode.contains(event.relatedTarget)) {
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
         this.props.onBlur(event);
       }
 
+      event.preventDefault();
       event.stopPropagation();
     } else {
       this.setState({
@@ -201,9 +206,13 @@ class HiInput extends React.PureComponent {
         this.setState({
           focused: true
         });
-      }
+      } // If focus came from erase icon => stay focused and don't call onFocus props
+
 
-      if (this.props.onFocus) {
+      if (this.eraseIconNode && this.eraseIconNode.contains(event.relatedTarget)) {
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (this.props.onFocus) {
         this.props.onFocus(event);
       }
     }
@@ -306,7 +315,10 @@ class HiInput extends React.PureComponent {
         label: classes.eraseButtonLabel
       },
       onClick: this.handleReset,
-      onBlur: this.handleBlur
+      onBlur: this.handleBlur,
+      buttonRef: el => {
+        this.eraseIconNode = el;
+      }
     }, _ref);
     let endAdornment = endAdornmentProps;
 

package/es/HiForm/HiUploadField.js

@@ -22,7 +22,8 @@ export const styles = theme => ({
     fontSize: '80px'
   },
   inputContainer: {
-    flex: '1'
+    flex: '1',
+    width: 'calc(100% - 88px)'
   },
   empty: {
     border: `1px solid ${theme.palette.input.bottomLine}`,

package/es/HiSelect/HiSelect.js

@@ -193,17 +193,13 @@ class HiSelect extends React.PureComponent {
         nextItem = getNextItemSelectable(document.activeElement, 'down');
       } else if (event.key === 'ArrowUp') {
         nextItem = getNextItemSelectable(document.activeElement, 'up');
-      } else if (event.key === 'Tab') {
+      } else if (event.key === 'Tab' || event.key === 'Escape') {
         /* if (!this.props.staticPosition) {
             document.body.style.overflow = 'auto';
         } */
         this.setState({
           open: false
         });
-      } else if (event.key === 'Escape') {
-        this.setState({
-          open: false
-        });
       }
 
       if (nextItem) {
@@ -216,6 +212,10 @@ class HiSelect extends React.PureComponent {
         this.focusOnSelectedItem();
       } else if (event.key === 'Enter' && this.props.onSubmit) {
         this.props.onSubmit(event);
+      } else if (event.key === 'Tab' || event.key === 'Escape') {
+        this.setState({
+          open: false
+        });
       }
     };
 
@@ -682,6 +682,7 @@ class HiSelect extends React.PureComponent {
       onClick: this.handleClick,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
+      onKeyDown: this.handleKeyDown,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,
       refElement: el => {

package/es/HiSelect/HiSuggestSelect.js

@@ -24,7 +24,8 @@ export const styles = theme => ({
     width: '100% !important',
     transform: 'none !important',
     zIndex: '9 !important',
-    top: '100% !important'
+    top: '100% !important',
+    textOverflow: 'ellipsis'
   },
   paper: {
     borderRadius: '0px 2px',

package/es/HiSelect/SelectInput.js

@@ -185,6 +185,7 @@ class SelectInput extends React.PureComponent {
       className: iconClass,
       icon: "arrow_drop_down"
     })) : React.createElement(ButtonBase, {
+      component: "div",
       id: id,
       classes: {
         root: rootClass

package/es/HiSelectNew/HiSelect.js

@@ -6,7 +6,6 @@ import Scrollbars from 'react-custom-scrollbars';
 import Grow from '@material-ui/core/Grow';
 import Paper from '@material-ui/core/Paper';
 import Popper from '@material-ui/core/Popper';
-import { findDOMNode } from 'react-dom';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
@@ -164,11 +163,12 @@ class HiSelect extends React.PureComponent {
     };
 
     this.focusOnFirstItem = () => {
-      const overlay = findDOMNode(this.overlay);
-      setTimeout(() => {
-        const item = overlay.getElementsByTagName('li')[0];
-        item.focus();
-      }, 1);
+      if (this.overlay && this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(() => {
+          const item = this.overlay.getElementsByTagName('li')[0];
+          item.focus();
+        }, 1);
+      }
     };
 
     this.getInputElement = el => {
@@ -204,15 +204,14 @@ class HiSelect extends React.PureComponent {
     };
 
     this.focusOnSelectedItem = selectedValue => {
-      const overlay = findDOMNode(this.overlay);
       setTimeout(() => {
         // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-        let item = overlay.getElementsByTagName('li')[0];
+        let item = this.overlay.getElementsByTagName('li')[0];
 
         if (selectedValue && typeof selectedValue === 'string') {
-          item = overlay.getElementsByTagName('li')[selectedValue];
+          item = this.overlay.getElementsByTagName('li')[selectedValue];
         } else if (selectedValue && typeof selectedValue === 'number') {
-          item = overlay.getElementsByTagName('li')[selectedValue - 1];
+          item = this.overlay.getElementsByTagName('li')[selectedValue - 1];
         }
 
         if (item) {
@@ -249,6 +248,17 @@ class HiSelect extends React.PureComponent {
       });
     };
 
+    this.handleKeyDownInput = event => {
+      const key = keycode(event);
+
+      if (key === 'down' || key === 'up') {
+        this.handleClick();
+      } else if (key === 'enter' && this.props.onSubmit) {
+        event.preventDefault();
+        this.props.onSubmit(event);
+      }
+    };
+
     this.handleKeyDown = event => {
       let nextItem;
       const key = keycode(event);
@@ -259,6 +269,13 @@ class HiSelect extends React.PureComponent {
       } else if (key === 'up') {
         event.preventDefault();
         nextItem = getNextItemSelectable(document.activeElement, 'up');
+      } else if (key === 'tab' || key === 'esc') {
+        this.setState({
+          open: false
+        });
+      } else if (key === 'space') {
+        // Cancel scroll
+        event.preventDefault();
       }
 
       if (nextItem) {
@@ -266,17 +283,57 @@ class HiSelect extends React.PureComponent {
       }
     };
 
+    this.getItemById = id => {
+      let item;
+
+      if (this.props.hasAll && String(id) === '_all') {
+        return {
+          id: '_all'
+        };
+      }
+
+      for (let i = 0; i < this.props.options.length; i += 1) {
+        const elem = this.props.options[i];
+
+        if (String(elem.id) === String(id)) {
+          item = elem;
+          break;
+        }
+
+        if (elem.children) {
+          for (let 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 = event => {
       const key = keycode(event);
 
-      if (key === 'tab' || key === 'esc') {
+      if (key === 'esc') {
         this.setState({
           open: false
         });
       } else if (key === 'space' || key === 'enter' && !this.props.multiple) {
         event.preventDefault();
-        const item = this.props.options.find(elem => String(elem.id) === event.target.id);
-        this.handleSelect(null, item);
+        const item = this.getItemById(event.target.id);
+
+        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 #${event.target.id}`);
+        }
       } else if (key === 'enter' && this.props.multiple) {
         event.preventDefault();
         this.handleClose();
@@ -291,6 +348,10 @@ class HiSelect extends React.PureComponent {
       } else if (this.overlay && key === 'esc' || key === 'enter') {
         event.preventDefault();
         this.handleClose();
+      } else if (key === 'tab') {
+        this.setState({
+          open: false
+        });
       }
     };
 
@@ -484,8 +545,8 @@ class HiSelect extends React.PureComponent {
       [classes.popperRightAlign]: this.props.containerWidth && this.props.align === 'right'
     });
 
-    let searchInput = position => {
-      if (!!searchable) {
+    const searchInput = position => {
+      if (searchable) {
         return React.createElement(HiInput, _extends({
           value: searchValue,
           autoFocus: true,
@@ -508,13 +569,13 @@ class HiSelect extends React.PureComponent {
 
     if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
       // +1 for search input
-      let nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+      const nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
       popperStyle.transform = `translate3d(-1px, -${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)';
     }
 
-    let content = ({
+    const content = ({
       placement
     }) => {
       if (placement !== this.placement) {
@@ -568,6 +629,7 @@ class HiSelect extends React.PureComponent {
       onClick: this.handleClick,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
+      onKeyDown: this.handleKeyDownInput,
       onSubmit: onSubmit,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,

package/es/HiSelectNew/HiSelectInput.js

@@ -127,6 +127,7 @@ class HiSelectInput extends React.PureComponent {
 
       if (this.props.onKeyDown) {
         this.props.onKeyDown(event);
+        event.preventDefault();
       } else if (key === 'down' || key === 'up') {
         this.props.onClick();
       } else if (key === 'enter' && this.props.onSubmit) {
@@ -146,8 +147,12 @@ class HiSelectInput extends React.PureComponent {
     };
 
     this.handleClick = 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' || keycode(event) !== 'enter') {
+          this.props.onClick(event);
+        }
       }
     };
 
@@ -225,6 +230,7 @@ class HiSelectInput extends React.PureComponent {
     }, value || placeholder), React.createElement(ArrowDropDownIcon, {
       className: iconClass
     })) : React.createElement(ButtonBase, {
+      component: "div",
       id: id,
       className: rootClass,
       onClick: this.handleClick,

package/es/HiSelectableList/HiSelectableList.js

@@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
 import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
-import { foldAccents, getNextItemSelectable } from '../utils/helpers';
-import keycode from 'keycode';
+import { foldAccents } from '../utils/helpers';
 export const styles = () => ({
   root: {
     padding: 0
@@ -24,31 +23,6 @@ class HiSelectableList extends React.PureComponent {
       this.props.onSelect(event, item);
     };
 
-    this.handleKeyDown = event => {
-      let nextItem;
-      const key = keycode(event);
-
-      if (key === 'down') {
-        event.preventDefault();
-        nextItem = getNextItemSelectable(document.activeElement, 'down');
-      } else if (key === 'up') {
-        event.preventDefault();
-        nextItem = getNextItemSelectable(document.activeElement, 'up');
-      } else if (key === 'space' || key === 'enter' && !this.props.multiple) {
-        event.preventDefault();
-        const item = this.props.options.find(elem => String(elem.id) === event.target.id);
-        this.handleSelect(null, item);
-      }
-
-      if (nextItem) {
-        nextItem.focus();
-      }
-    };
-
-    this.handleKeyUp = () => {
-      return false;
-    };
-
     this.buildRecursiveListItem = (item, level = 0) => {
       const _this$props = this.props,
             {
@@ -60,8 +34,8 @@ class HiSelectableList extends React.PureComponent {
         icon,
         selectedItemIdList,
         sort,
-        onKeyDown = this.handleKeyDown,
-        onKeyUp = this.handleKeyUp
+        onKeyDown,
+        onKeyUp
       } = _this$props,
             others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.57
+/** @license HiPay-Material-UI v2.0.0-beta.58
  *
  * 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.57
+/** @license HiPay-Material-UI v2.0.0-beta.58
  *
  * 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.57",
+  "version": "2.0.0-beta.58",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",