@hipay/hipay-material-ui 2.0.0-beta.38 → 2.0.0-beta.40

package/HiCheckbox/HiCheckbox.js

@@ -162,7 +162,7 @@ function (_React$Component) {
 
 HiCheckbox.defaultProps = {
   checked: false,
-  color: 'default',
+  color: 'inherit',
   size: 20,
   icon: 'check_box_outline_blank'
 };
@@ -185,7 +185,7 @@ HiCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color: _propTypes.default.oneOf(['default', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+  color: _propTypes.default.oneOf(['inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
 
   /**
    * icon à afficher quand le composant est non coché.

package/HiChip/HiChip.js

@@ -112,6 +112,7 @@ function HiChip(props) {
 
   var label = props.label,
       classes = props.classes,
+      fallbackImage = props.fallbackImage,
       icon = props.icon,
       _props$iconSize = props.iconSize,
       iconSize = _props$iconSize === void 0 ? 20 : _props$iconSize,
@@ -138,6 +139,13 @@ function HiChip(props) {
     className: classes.badge,
     src: img,
     alt: img,
+    onError: function onError(e) {
+      if (fallbackImage) {
+        e.target.src = "".concat(fallbackImage);
+      } else {
+        e.target.style.display = 'none';
+      }
+    },
     title: titleImg
   }), icon && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
@@ -176,6 +184,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: _propTypes.default.object,
 
+  /**
+   * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
+   */
+  fallbackImage: _propTypes.default.string,
+
   /**
    * Icone affiché à gauche
    */

package/HiForm/HiFormLabel.js

@@ -39,16 +39,21 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.main,
       position: 'inherit',
       transform: 'inherit',
-      marginBottom: 2
+      marginBottom: 2,
+      '&$focused': {
+        color: theme.palette.primary.main
+      },
+      '&$error': {
+        color: theme.palette.negative.main
+      }
     }),
     optional: {
       fontSize: 11,
       marginLeft: 4,
       color: theme.palette.neutral.main
     },
-    focused: {
-      color: theme.palette.primary.main
-    }
+    focused: {},
+    error: {}
   };
 };
 /**
@@ -87,7 +92,12 @@ function (_React$PureComponent) {
         htmlFor: htmlFor,
         className: className,
         focused: focused,
-        required: false
+        required: false,
+        FormLabelClasses: {
+          root: classes.root,
+          error: classes.error,
+          focused: classes.focused
+        }
       }, InputLabelProps, other), label, !required && _react.default.createElement("span", {
         className: classes.optional
       }, " ", translations.optional), children);

package/HiForm/HiInput.js

@@ -136,6 +136,10 @@ var styles = function styles(theme) {
       width: 40,
       display: 'inline-block'
     },
+    eraseButtonLabel: {
+      position: 'relative',
+      top: -2
+    },
     disabled: {
       borderBottom: 'none'
     },
@@ -334,6 +338,9 @@ function (_React$PureComponent) {
 
       var eraseIcon = !multiline && onReset && focused && !disabled && value.length > 0 && _react.default.createElement(_HiIconButton.default, {
         className: classes.eraseButton,
+        classes: {
+          label: classes.eraseButtonLabel
+        },
         onClick: this.handleReset,
         onBlur: this.handleBlur
       }, _ref);

package/HiIcon/HiIcon.js

@@ -89,7 +89,7 @@ function HiIcon(props) {
 
   if (iconName.indexOf('fa-') === 0) {
     return _react.default.createElement("i", (0, _extends2.default)({
-      className: (0, _classnames.default)('fa', iconName, classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], color !== 'inherit'), className),
+      className: (0, _classnames.default)('fa', iconName, className, classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], color !== 'inherit')),
       style: {
         fontSize: size
       }

package/HiIconButton/HiIconButton.js

@@ -28,6 +28,7 @@ var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton")
 // @inheritedComponent IconButton
 var styles = function styles(theme) {
   return {
+    label: {},
     positive: {
       color: theme.palette.positive.main,
       '&:hover': {
@@ -86,7 +87,8 @@ function HiIconButton(props) {
   return _react.default.createElement(_IconButton.default, (0, _extends2.default)({
     className: className,
     classes: {
-      root: buttonClassNames
+      root: buttonClassNames,
+      label: classes.label
     },
     color: hcolor
   }, other), children);

package/HiSelect/SelectInput.js

@@ -109,7 +109,7 @@ var styles = function styles(theme) {
       }
     },
     disabled: {
-      color: "".concat(theme.palette.action.disabled),
+      color: "".concat(theme.palette.text.disabled),
       '&:before': {
         display: 'none'
       }

package/HiSelectNew/HiDynamicSelectField.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
+
+var _HiDynamicSelect = _interopRequireDefault(require("./HiDynamicSelect"));
+
+// @inheritedComponent HiDynamicSelect
+
+/**
+ * Champs input pour formulaire
+ */
+var HiDynamicSelectField =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiDynamicSelectField, _React$PureComponent);
+
+  function HiDynamicSelectField() {
+    (0, _classCallCheck2.default)(this, HiDynamicSelectField);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDynamicSelectField).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(HiDynamicSelectField, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          label = _this$props.label,
+          required = _this$props.required,
+          disabled = _this$props.disabled,
+          error = _this$props.error,
+          errorText = _this$props.errorText,
+          helperText = _this$props.helperText,
+          helperIcon = _this$props.helperIcon,
+          id = _this$props.id,
+          name = _this$props.name,
+          value = _this$props.value,
+          options = _this$props.options,
+          type = _this$props.type,
+          multiple = _this$props.multiple,
+          iconAll = _this$props.iconAll,
+          checkbox = _this$props.checkbox,
+          searchable = _this$props.searchable,
+          translations = _this$props.translations,
+          className = _this$props.className,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["label", "required", "disabled", "error", "errorText", "helperText", "helperIcon", "id", "name", "value", "options", "type", "multiple", "iconAll", "checkbox", "searchable", "translations", "className"]);
+      return _react.default.createElement(_HiFormControl.default, {
+        id: id,
+        label: label,
+        required: required,
+        disabled: disabled,
+        error: error,
+        errorText: errorText,
+        helperText: helperText,
+        helperIcon: helperIcon,
+        className: className
+      }, _react.default.createElement(_HiDynamicSelect.default, (0, _extends2.default)({
+        id: id,
+        name: name,
+        value: value,
+        options: options,
+        type: type,
+        multiple: multiple,
+        iconAll: iconAll,
+        checkbox: checkbox,
+        searchable: searchable,
+        translations: translations,
+        disabled: disabled,
+        error: error
+      }, others)));
+    }
+  }]);
+  return HiDynamicSelectField;
+}(_react.default.PureComponent);
+
+HiDynamicSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge des styles
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: _propTypes.default.bool,
+
+  /**
+   * Texte de l'erreur
+   */
+  errorText: _propTypes.default.string,
+
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: _propTypes.default.bool,
+
+  /**
+   * Texte de l'aide
+   */
+  helperText: _propTypes.default.string,
+
+  /**
+   * id de l'élément input
+   */
+  id: _propTypes.default.string.isRequired,
+
+  /**
+   * Label du champs
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * true si champs obligatoire
+   */
+  required: _propTypes.default.bool
+} : {};
+var _default = HiDynamicSelectField;
+exports.default = _default;

package/HiSelectNew/HiNestedSelect.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.styles = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -33,6 +33,8 @@ var _HiSelect = _interopRequireDefault(require("./HiSelect"));
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
 // @inheritedComponent HiSelect
 
 /**
@@ -142,6 +144,26 @@ function buildFilteredItemList(itemList) {
     v: visibleParent
   });
 }
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      backgroundColor: theme.palette.background2,
+      maxWidth: 500,
+      width: '100%',
+      position: 'relative'
+    },
+    popper: {
+      // width: '100%',
+      zIndex: 1200
+    },
+    paper: {
+      borderRadius: '0px 2px',
+      maxHeight: 480,
+      transition: 'none !important'
+    }
+  };
+};
 /**
  * HiNestedSelect hérite du composant HiSelect
  *
@@ -156,6 +178,8 @@ function buildFilteredItemList(itemList) {
  */
 
 
+exports.styles = styles;
+
 var HiNestedSelect =
 /*#__PURE__*/
 function (_React$PureComponent) {
@@ -284,9 +308,9 @@ function (_React$PureComponent) {
           }), selectedItem.label);
         } else if (selectedItem.type === 'image') {
           inputValue = _react.default.createElement("span", {
-            className: classes.selectIconLabel
+            className: classes.selectImgLabel
           }, _react.default.createElement("img", {
-            className: classes.labelIcon,
+            className: classes.labelImg,
             src: selectedItem.img,
             alt: selectedItem.label
           }), selectedItem.label);
@@ -449,5 +473,10 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array])
 } : {};
-var _default = HiNestedSelect;
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiNestedSelect'
+})(HiNestedSelect);
+
 exports.default = _default;

package/HiSelectNew/HiSelect.js

@@ -62,17 +62,23 @@ var styles = function styles(theme) {
       position: 'relative'
     },
     popper: {
-      // width: '100%',
+      width: '100%',
       zIndex: 1200
     },
     paper: {
       borderRadius: '0px 2px',
-      maxHeight: 440,
+      maxHeight: 480,
       transition: 'none !important'
     },
     labelIcon: {
       marginRight: 10
     },
+    labelImg: {
+      height: 18,
+      width: 'auto',
+      margin: '0 4px',
+      verticalAlign: 'middle'
+    },
     selectIconLabel: (0, _extends2.default)({
       whiteSpace: 'nowrap',
       overflow: 'hidden',
@@ -81,6 +87,15 @@ var styles = function styles(theme) {
     }, 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%'
     })
   };
 };
@@ -176,8 +191,10 @@ function (_React$PureComponent) {
     _this.handleKeyDownSearch = function (event) {
       var key = (0, _keycode.default)(event);
 
-      if (_this.overlay && (key === 'ArrowDown' || key === 'ArrowUp')) {
+      if (_this.overlay && (key === 'down' || key === 'up')) {
         _this.focusOnFirstItem();
+      } else if (_this.overlay && key === 'esc') {
+        _this.handleClose();
       }
     };
 
@@ -363,7 +380,7 @@ function (_React$PureComponent) {
           inputValue = _react.default.createElement("span", {
             className: classes.selectIconLabel
           }, _react.default.createElement("img", {
-            className: classes.labelIcon,
+            className: classes.labelImg,
             src: item.img,
             alt: item.label
           }), item.label);
@@ -479,7 +496,8 @@ function (_React$PureComponent) {
         itemList: itemList,
         onKeyDown: this.handleKeyDown,
         onSelect: this.handleSelect,
-        selectedItemIdList: selectedItemIdList
+        selectedItemIdList: selectedItemIdList,
+        fallbackImage: this.props.fallbackImage
       }, hiSelectableListProps))))));
 
       return _react.default.createElement("div", {
@@ -576,6 +594,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   error: _propTypes.default.bool,
 
+  /**
+   * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
+   */
+  fallbackImage: _propTypes.default.string,
+
   /**
    * Affiche l'élément 'All'
    */

package/HiSelectNew/HiSelectInput.js

@@ -111,7 +111,7 @@ var styles = function styles(theme) {
       }
     },
     disabled: {
-      color: "".concat(theme.palette.action.disabled),
+      color: theme.palette.text.disabled,
       '&:before': {
         display: 'none'
       }

package/HiSelectableList/HiSelectableListItem.js

@@ -83,7 +83,8 @@ var styles = function styles(theme) {
     },
     disabled: {
       fontWeight: theme.typography.fontWeightLight,
-      cursor: 'default'
+      cursor: 'default',
+      opacity: 'inherit'
     },
     selected: {
       backgroundColor: theme.palette.action.selected
@@ -110,7 +111,6 @@ var styles = function styles(theme) {
     }, theme.typography.b1, {
       fontWeight: 'inherit',
       width: '100%',
-      height: '-webkit-fill-available',
       padding: '5px 0'
     }),
     label: {
@@ -138,9 +138,7 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.main,
       fontWeight: theme.typography.fontWeightLight,
       fontSize: 12,
-      width: '-webkit-fill-available',
       whiteSpace: 'nowrap',
-      overflow: 'hidden',
       textOverflow: 'ellipsis',
       textAlign: 'right',
       margin: '4px 12px 4px 8px',
@@ -257,6 +255,7 @@ function (_React$Component) {
           classes = _this$props2.classes,
           selected = _this$props2.selected,
           disabled = _this$props2.disabled,
+          fallbackImage = _this$props2.fallbackImage,
           hideCheckbox = _this$props2.hideCheckbox,
           onSelect = _this$props2.onSelect,
           indeterminate = _this$props2.indeterminate,
@@ -328,6 +327,13 @@ function (_React$Component) {
       }), type === 'image' && img && _react.default.createElement("img", {
         src: img,
         alt: img,
+        onError: function onError(e) {
+          if (fallbackImage) {
+            e.target.src = "".concat(fallbackImage);
+          } else {
+            e.target.style.display = 'none';
+          }
+        },
         className: classes.img
       }), this.buildItemLabel(), !!secondaryLabel && _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
@@ -379,6 +385,11 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   disabled: _propTypes.default.bool,
 
+  /**
+   * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
+   */
+  fallbackImage: _propTypes.default.string,
+
   /**
    * N'affiche pas de checkboxes
    */

package/es/HiCheckbox/HiCheckbox.js

@@ -125,7 +125,7 @@ class HiCheckbox extends React.Component {
 
 HiCheckbox.defaultProps = {
   checked: false,
-  color: 'default',
+  color: 'inherit',
   size: 20,
   icon: 'check_box_outline_blank'
 };
@@ -148,7 +148,7 @@ HiCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+  color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
 
   /**
    * icon à afficher quand le composant est non coché.

package/es/HiChip/HiChip.js

@@ -90,6 +90,7 @@ function HiChip(props) {
   const {
     label,
     classes,
+    fallbackImage,
     icon,
     iconSize = 20,
     id,
@@ -121,6 +122,13 @@ function HiChip(props) {
     className: classes.badge,
     src: img,
     alt: img,
+    onError: e => {
+      if (fallbackImage) {
+        e.target.src = `${fallbackImage}`;
+      } else {
+        e.target.style.display = 'none';
+      }
+    },
     title: titleImg
   }), icon && React.createElement(HiIcon, {
     className: classNames(classes.icon, {
@@ -161,6 +169,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: PropTypes.object,
 
+  /**
+   * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
+   */
+  fallbackImage: PropTypes.string,
+
   /**
    * Icone affiché à gauche
    */

package/es/HiForm/HiFormLabel.js

@@ -13,16 +13,21 @@ export const styles = theme => ({
     color: theme.palette.neutral.main,
     position: 'inherit',
     transform: 'inherit',
-    marginBottom: 2
+    marginBottom: 2,
+    '&$focused': {
+      color: theme.palette.primary.main
+    },
+    '&$error': {
+      color: theme.palette.negative.main
+    }
   }),
   optional: {
     fontSize: 11,
     marginLeft: 4,
     color: theme.palette.neutral.main
   },
-  focused: {
-    color: theme.palette.primary.main
-  }
+  focused: {},
+  error: {}
 });
 /**
  * Label pour champs de formulaire
@@ -49,7 +54,12 @@ class HiFormLabel extends React.PureComponent {
       htmlFor: htmlFor,
       className: className,
       focused: focused,
-      required: false
+      required: false,
+      FormLabelClasses: {
+        root: classes.root,
+        error: classes.error,
+        focused: classes.focused
+      }
     }, InputLabelProps, other), label, !required && React.createElement("span", {
       className: classes.optional
     }, " ", translations.optional), children);

package/es/HiForm/HiInput.js

@@ -104,6 +104,10 @@ export const styles = theme => ({
     width: 40,
     display: 'inline-block'
   },
+  eraseButtonLabel: {
+    position: 'relative',
+    top: -2
+  },
   disabled: {
     borderBottom: 'none'
   },
@@ -288,6 +292,9 @@ class HiInput extends React.PureComponent {
 
     const eraseIcon = !multiline && onReset && focused && !disabled && value.length > 0 && React.createElement(HiIconButton, {
       className: classes.eraseButton,
+      classes: {
+        label: classes.eraseButtonLabel
+      },
       onClick: this.handleReset,
       onBlur: this.handleBlur
     }, _ref);

package/es/HiIcon/HiIcon.js

@@ -65,9 +65,9 @@ function HiIcon(props) {
 
   if (iconName.indexOf('fa-') === 0) {
     return React.createElement("i", _extends({
-      className: classNames('fa', iconName, classes.root, {
+      className: classNames('fa', iconName, className, classes.root, {
         [classes[`color${capitalize(color)}`]]: color !== 'inherit'
-      }, className),
+      }),
       style: {
         fontSize: size
       }

package/es/HiIconButton/HiIconButton.js

@@ -8,6 +8,7 @@ import { withStyles } from '../styles';
 import { fade } from '../styles/colorManipulator';
 import IconButton from '@material-ui/core/IconButton';
 export const styles = theme => ({
+  label: {},
   positive: {
     color: theme.palette.positive.main,
     '&:hover': {
@@ -69,7 +70,8 @@ function HiIconButton(props) {
   return React.createElement(IconButton, _extends({
     className: className,
     classes: {
-      root: buttonClassNames
+      root: buttonClassNames,
+      label: classes.label
     },
     color: hcolor
   }, other), children);

package/es/HiSelect/SelectInput.js

@@ -77,7 +77,7 @@ export const styles = theme => ({
     }
   },
   disabled: {
-    color: `${theme.palette.action.disabled}`,
+    color: `${theme.palette.text.disabled}`,
     '&:before': {
       display: 'none'
     }