@hipay/hipay-material-ui 2.1.0-RC1 → 2.2.0-RC1

package/HiSelectableList/HiSelectableListItem.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -231,6 +231,7 @@ function (_React$PureComponent) {
 
         if (key === 'space' || key === 'enter') {
           event.preventDefault();
+          event.stopPropagation();
 
           if (item) {
             _this.props.onSelect(null, item);
@@ -242,8 +243,8 @@ function (_React$PureComponent) {
     _this.state = {
       hover: false
     };
-    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)(_this));
-    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)(_this));
+    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
@@ -378,7 +379,7 @@ function (_React$PureComponent) {
         indeterminateIcon: indeterminateIcon
       }), type === 'image' && img && _react.default.createElement("img", {
         src: img,
-        alt: img,
+        alt: '',
         onError: function onError(e) {
           if (fallbackImage) {
             e.target.src = "".concat(fallbackImage);

package/HiTable/HiTable.js

@@ -15,10 +15,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -57,7 +57,7 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleRequestSort = _this.handleRequestSort.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleRequestSort = _this.handleRequestSort.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 

package/HiTable/HiTableRow.js

@@ -19,10 +19,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -74,7 +74,7 @@ function (_React$PureComponent) {
 
     (0, _classCallCheck2.default)(this, HiTableRow);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiTableRow).call(this, props));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 

package/es/HiAlertModal/HiAlertModal.js

@@ -67,11 +67,24 @@ class HiAlertModal extends React.PureComponent {
       }
     };
 
+    this.submitButtonRef = React.createRef();
+    this.cancelButtonRef = React.createRef();
     this.handleOnClose = this.handleOnClose.bind(this);
+    this.handleOnEntered = this.handleOnEntered.bind(this);
   } // Appelé si clic en dehors de la pop up
 
 
-  // Render
+  handleOnEntered() {
+    if (this.props.labelSubmitButton) {
+      this.submitButtonRef.current.focus();
+      this.submitActionsRef.focusVisible();
+    } else if (this.props.labelCancelButton) {
+      this.cancelButtonRef.current.focus();
+      this.cancelActionsRef.focusVisible();
+    }
+  } // Render
+
+
   render() {
     const _this$props = this.props,
           {
@@ -105,6 +118,7 @@ class HiAlertModal extends React.PureComponent {
     return React.createElement(Dialog, _extends({
       open: open,
       onClose: this.handleOnClose,
+      onEntered: this.handleOnEntered,
       classes: {
         root: classes.classDialogRoot,
         paper: classes.classDialogPaper
@@ -112,7 +126,7 @@ class HiAlertModal extends React.PureComponent {
     }, props), backgroundIcon && React.createElement("div", {
       className: classes.classBackgroundIcon
     }, React.createElement(HiIcon, {
-      color: theme.palette.background2,
+      color: "inherit",
       icon: backgroundIcon,
       size: iconSize
     })), title && React.createElement(DialogTitle, {
@@ -133,13 +147,21 @@ class HiAlertModal extends React.PureComponent {
         root: classes.classCancelButton
       },
       onClick: onCancelClick,
-      color: cancelColor
+      color: cancelColor,
+      innerRef: this.cancelButtonRef,
+      action: actions => {
+        this.cancelActionsRef = actions;
+      }
     }, labelCancelButton), labelSubmitButton && React.createElement(HiButton, {
       classes: {
         root: classes.classSubmitButton
       },
       onClick: onSubmitClick,
-      color: submitColor
+      color: submitColor,
+      innerRef: this.submitButtonRef,
+      action: actions => {
+        this.submitActionsRef = actions;
+      }
     }, labelSubmitButton)));
   }
 

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -65,7 +65,7 @@ HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Custom styles for component.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
 
   /**
    * Disable navigation in steps

package/es/HiButton/HiButton.js

@@ -169,46 +169,52 @@ export const styles = theme => ({
   disabled: {}
 });
 
-function HiButton(props) {
-  const {
-    children,
-    classes,
-    className,
-    color,
-    variant,
-    disabled
-  } = props,
-        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';
-  const contained = variant === 'contained' || variant === 'raised';
-  const buttonClassNames = classNames(classes.root, {
-    [classes.raisedDisabled]: variant === 'raised' && disabled,
-    [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 === 'default' || color === 'neutral'),
-    [classes.containedPrimary]: (contained || fab) && color === 'primary',
-    [classes.containedPositive]: (contained || fab) && color === 'positive',
-    [classes.containedNegative]: (contained || fab) && color === 'negative',
-    [classes.containedMiddle]: (contained || fab) && color === 'middle',
-    [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 === 'default' || color === 'neutral'),
-    [classes.disabled]: disabled
-  });
-  return React.createElement(Button, _extends({
-    className: className,
-    classes: {
-      root: buttonClassNames
-    },
-    color: hcolor,
-    variant: variant,
-    disabled: disabled
-  }, other), children);
+class HiButton extends React.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      children,
+      classes,
+      className,
+      color,
+      variant,
+      disabled,
+      buttonRef
+    } = _this$props,
+          other = _objectWithoutProperties(_this$props, ["children", "classes", "className", "color", "variant", "disabled", "buttonRef"]);
+
+    const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+    const fab = variant === 'fab' || variant === 'extendedFab';
+    const contained = variant === 'contained' || variant === 'raised';
+    const buttonClassNames = classNames(classes.root, {
+      [classes.raisedDisabled]: variant === 'raised' && disabled,
+      [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 === 'default' || color === 'neutral'),
+      [classes.containedPrimary]: (contained || fab) && color === 'primary',
+      [classes.containedPositive]: (contained || fab) && color === 'positive',
+      [classes.containedNegative]: (contained || fab) && color === 'negative',
+      [classes.containedMiddle]: (contained || fab) && color === 'middle',
+      [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 === 'default' || color === 'neutral'),
+      [classes.disabled]: disabled
+    });
+    return React.createElement(Button, _extends({
+      className: className,
+      classes: {
+        root: buttonClassNames
+      },
+      color: hcolor,
+      variant: variant,
+      disabled: disabled,
+      buttonRef: buttonRef
+    }, other), children);
+  }
+
 }
 
 HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -236,7 +242,17 @@ HiButton.defaultProps = {
   color: 'neutral',
   variant: 'text'
 };
+
+function forwardRef(props, ref) {
+  return React.createElement(HiButton, _extends({}, props, {
+    buttonRef: ref
+  }));
+}
+
+const name = HiButton.displayName || HiButton.name;
+forwardRef.displayName = name;
+const HiButtonForwardRef = React.forwardRef(forwardRef);
 export default withStyles(styles, {
   hiComponent: true,
   name: 'HmuiHiButton'
-})(HiButton);
+})(HiButtonForwardRef);

package/es/HiColoredLabel/HiColoredLabel.js

@@ -118,7 +118,7 @@ function HiColoredLabel(props) {
     className,
     fontSize,
     label,
-    color,
+    color: propsColor,
     active,
     outlined,
     fontWeight,
@@ -127,6 +127,7 @@ function HiColoredLabel(props) {
   } = props,
         other = _objectWithoutProperties(props, ["classes", "className", "fontSize", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
 
+  const color = propsColor || 'primary';
   const isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   const isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
   return React.createElement("div", _extends({

package/es/HiDatePicker/HiDatePicker.js

@@ -18,8 +18,6 @@ import Weekday from './Weekday';
 import HiTextField from '../HiForm/HiTextField';
 import styles from './stylesheet';
 import { isMobile } from 'react-device-detect';
-import classNames from 'classnames';
-import HiFormControl from '../HiForm/HiFormControl';
 import HiDatePickerMobile from './HiDatePickerMobile';
 
 class HiDatePicker extends React.Component {
@@ -50,7 +48,7 @@ class HiDatePicker extends React.Component {
           this.props.onChange(undefined);
         } else {
           // Keep Time if set
-          if (this.props.enableTime && day !== undefined) {
+          if (this.props.enableTime) {
             if (this.props.value) {
               day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
             } else {

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -12,11 +12,14 @@ import withStyles from '../styles/withStyles';
 import classNames from 'classnames';
 export const styles = theme => ({
   summaryContent: {
-    display: 'inline-block',
+    display: 'flex',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
     border: 'none',
     '&$expanded': {
       margin: 'initial'
-    }
+    },
+    maxWidth: '100%'
   },
   summaryRoot: {
     borderBottom: '1px solid #E3E6E7',
@@ -46,17 +49,21 @@ export const styles = theme => ({
     display: 'flex',
     alignItems: 'center',
     fontSize: 11,
-    lineHeight: '24px',
-    float: 'right',
-    marginRight: 32,
     '&>svg': {
       fontSize: 18,
       marginLeft: 3
     },
-    "&>button": {
+    '&>button': {
       marginRight: -12
-    }
+    },
+    marginLeft: 24,
+    overflow: 'hidden'
   }),
+  secondaryHeadingSpan: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
+  },
   panel: {
     boxShadow: 'none',
     border: 'none'
@@ -116,10 +123,12 @@ class HiExpansionPanel extends React.PureComponent {
       }),
       expandIcon: !collapseDisable && _ref
     }, React.createElement("div", {
-      className: classes.secondaryHeading
-    }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled, secondaryHeadingIcon), React.createElement("div", {
       className: classes.heading
-    }, heading)), !!children && React.createElement(ExpansionPanelDetails, {
+    }, heading), React.createElement("div", {
+      className: classes.secondaryHeading
+    }, React.createElement("span", {
+      className: classes.secondaryHeadingSpan
+    }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && React.createElement(ExpansionPanelDetails, {
       className: classes.panelDetails
     }, children));
   }

package/es/HiForm/index.js

@@ -6,4 +6,6 @@ export { default as HiInput } from './HiInput';
 export { default as HiPasswordField } from './HiPasswordField';
 export { default as HiSearchField } from './HiSearchField';
 export { default as HiSlider } from './HiSlider';
-export { default as HiTextField } from './HiTextField';
+export { default as HiTextField } from './HiTextField';
+export { default as HiUpload } from './HiUpload';
+export { default as HiUploadField } from './HiUploadField';

package/es/HiIcon/HiIcon.js

@@ -83,9 +83,17 @@ function HiIcon(props) {
 
   if (iconName.indexOf('hi_') === 0) {
     const IconName = hiSvgIcons[capitalize(camelize(iconName))];
+    let colorValue = color;
+
+    if (color === "inherit") {
+      colorValue = "currentColor";
+    } else if (isHiColor || color === 'primary' || color === 'secondary') {
+      colorValue = theme.palette[color].main;
+    }
+
     return React.createElement(IconName, _extends({
       className: classNames(classes.root, className),
-      color: isHiColor || color === 'primary' || color === 'secondary' ? theme.palette[color].main : color,
+      color: colorValue,
       width: size,
       height: size
     }, other));

package/es/HiNotice/HiKPI.js

@@ -15,7 +15,8 @@ export const styles = theme => ({
     textAlign: 'center',
     flexDirection: 'column',
     alignItems: 'center',
-    fontFamily: theme.typography.fontFamily
+    fontFamily: theme.typography.fontFamily,
+    transition: 'height .5s ease-out'
   },
   rootDisable: {
     cursor: 'default'
@@ -107,7 +108,7 @@ class HiKPI extends React.Component {
       disable
     } = this.props;
     const rootclass = classNames(classes.root, {
-      [classes.inherit]: color === 'inherit' && !disable,
+      [classes.inherit]: color === 'inherit',
       [classes.warning]: color === 'warning' && !disable,
       [classes.error]: color === 'error' && !disable,
       [classes.positive]: color === 'positive' && !disable,
@@ -115,11 +116,7 @@ class HiKPI extends React.Component {
       [classes.minify]: minify,
       [classes.rootDisable]: disable
     });
-    return React.createElement(Collapse, {
-      in: !minify,
-      timeout: "auto",
-      collapsedHeight: "88px"
-    }, React.createElement(ButtonBase, {
+    return React.createElement(ButtonBase, {
       className: rootclass,
       onClick: !disable ? this.handleClick(id) : undefined,
       title: tooltip,
@@ -128,7 +125,10 @@ class HiKPI extends React.Component {
       className: classes.title
     }, title), React.createElement("div", {
       className: classes.body
-    }, minify && bodyMinify ? bodyMinify : body), subtitle && minify === false && React.createElement("div", {
+    }, minify && bodyMinify ? bodyMinify : body), React.createElement(Collapse, {
+      in: !minify,
+      timeout: 'auto'
+    }, React.createElement("div", {
       className: classes.subtitle
     }, subtitle)));
   }

package/es/HiNotice/HiKPINotice.js

@@ -9,7 +9,7 @@ const styles = () => ({
     width: '100%',
     display: 'flex',
     flexWrap: 'wrap',
-    justifyContent: 'center'
+    justifyContent: 'left'
   }
 });
 

package/es/HiSelect/HiSelect.js

@@ -148,6 +148,7 @@ class HiSelect extends React.PureComponent {
             className: classes.selectIconLabel
           }, React.createElement(HiIcon, {
             className: classes.labelIcon,
+            color: item.color,
             icon: item.icon
           }), item.label);
         } else if (type === 'image' || item.type === 'image') {
@@ -435,6 +436,20 @@ class HiSelect extends React.PureComponent {
       }, '');
     };
 
+    this.getLengthItemList = itemList => {
+      let itemListLength = 0;
+      itemList.forEach(parent => {
+        if (parent.displayed !== false) {
+          itemListLength += 1;
+
+          if (parent.children) {
+            itemListLength += this.getLengthItemList(parent.children);
+          }
+        }
+      });
+      return itemListLength;
+    };
+
     this.state = {
       alertOpen: false,
       open: false,
@@ -444,16 +459,6 @@ class HiSelect extends React.PureComponent {
       openDown: true,
       overlayWidth: 0
     };
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.handleClickAway = this.handleClickAway.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleSearch = this.handleSearch.bind(this);
-    this.handleSearchReset = this.handleSearchReset.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleSuggestions = this.handleSuggestions.bind(this);
-    this.getInputElement = this.getInputElement.bind(this);
   }
 
   componentDidMount() {
@@ -487,20 +492,6 @@ class HiSelect extends React.PureComponent {
    */
 
 
-  getLengthItemList(itemList) {
-    let itemListLength = 0;
-    itemList.forEach(parent => {
-      if (parent.displayed !== false) {
-        itemListLength += 1;
-
-        if (parent.children) {
-          itemListLength += this.getLengthItemList(parent.children);
-        }
-      }
-    });
-    return itemListLength;
-  }
-
   render() {
     const {
       alert,
@@ -525,6 +516,7 @@ class HiSelect extends React.PureComponent {
       searchValue = this.state.searchValue,
       startAdornment,
       staticPosition,
+      maxOptionsDisplayed,
       buildSelectProps = this.buildSelectProps // use parent builder if defined
 
     } = this.props;
@@ -593,7 +585,7 @@ class HiSelect extends React.PureComponent {
       // In case we have a nested list
       const itemListLength = this.getLengthItemList(itemList); // +1 for search input
 
-      const nbItems = itemListLength <= 10 ? itemListLength + 1 : 11;
+      const nbItems = itemListLength <= maxOptionsDisplayed - 2 ? itemListLength + 1 : maxOptionsDisplayed - 1;
       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)';
@@ -606,6 +598,8 @@ class HiSelect extends React.PureComponent {
         this.placement = placement;
       }
 
+      const nbItemsDisplayed = !!searchable ? maxOptionsDisplayed - 1 : maxOptionsDisplayed;
+      const autoHeightMax = nbItemsDisplayed * 40 - 10;
       return React.createElement(ClickAwayListener, {
         onClickAway: this.handleClickAway
       }, React.createElement(Grow, {
@@ -615,13 +609,16 @@ class HiSelect extends React.PureComponent {
           transformOrigin: '0 0 0'
         }
       }, React.createElement(Paper, {
+        style: maxOptionsDisplayed < 12 ? {
+          maxHeight: 40 * maxOptionsDisplayed
+        } : {},
         className: classes.paper
       }, (this.placement && this.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, React.createElement(Scrollbars, _extends({
         ref: contentEl => {
           this.optionsContent = contentEl;
         },
         autoHeight: true,
-        autoHeightMax: 430
+        autoHeightMax: autoHeightMax
       }, onScrollReachBottom && {
         onScroll: this.handleScroll
       }), React.createElement(HiSelectableList, _extends({
@@ -742,7 +739,8 @@ HiSelect.defaultProps = {
     one_child: '%s item'
   },
   type: 'text',
-  filterFunc: filterValue
+  filterFunc: filterValue,
+  maxOptionsDisplayed: 12
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -826,6 +824,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Nombre max d'items affichés
+   */
+  maxOptionsDisplayed: PropTypes.number,
+
   /**
    * Autorise la sélection de plusieurs valeurs
    */