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

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/HiSelectNew/HiSelect.js

@@ -67,7 +67,7 @@ var styles = function styles(theme) {
     },
     paper: {
       borderRadius: '0px 2px',
-      maxHeight: 440,
+      maxHeight: 480,
       transition: 'none !important'
     },
     labelIcon: {
@@ -176,8 +176,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();
       }
     };
 
@@ -479,7 +481,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 +579,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/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/HiSelectNew/HiSelect.js

@@ -28,7 +28,7 @@ export const styles = theme => ({
   },
   paper: {
     borderRadius: '0px 2px',
-    maxHeight: 440,
+    maxHeight: 480,
     transition: 'none !important'
   },
   labelIcon: {
@@ -119,8 +119,10 @@ class HiSelect extends React.PureComponent {
     this.handleKeyDownSearch = event => {
       const key = keycode(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();
       }
     };
 
@@ -416,7 +418,8 @@ class HiSelect extends React.PureComponent {
       itemList: itemList,
       onKeyDown: this.handleKeyDown,
       onSelect: this.handleSelect,
-      selectedItemIdList: selectedItemIdList
+      selectedItemIdList: selectedItemIdList,
+      fallbackImage: this.props.fallbackImage
     }, hiSelectableListProps))))));
     return React.createElement("div", {
       className: classes.root,
@@ -500,6 +503,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   error: PropTypes.bool,
 
+  /**
+   * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
+   */
+  fallbackImage: PropTypes.string,
+
   /**
    * Affiche l'élément 'All'
    */

package/es/HiSelectNew/HiSelectInput.js

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

package/es/HiSelectableList/HiSelectableListItem.js

@@ -48,7 +48,8 @@ export const styles = theme => ({
   },
   disabled: {
     fontWeight: theme.typography.fontWeightLight,
-    cursor: 'default'
+    cursor: 'default',
+    opacity: 'inherit'
   },
   selected: {
     backgroundColor: theme.palette.action.selected
@@ -75,7 +76,6 @@ export const styles = theme => ({
   }, theme.typography.b1, {
     fontWeight: 'inherit',
     width: '100%',
-    height: '-webkit-fill-available',
     padding: '5px 0'
   }),
   label: {
@@ -103,9 +103,7 @@ export const 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',
@@ -203,6 +201,7 @@ class HiSelectableListItem extends React.Component {
       classes,
       selected,
       disabled,
+      fallbackImage,
       hideCheckbox,
       onSelect,
       indeterminate,
@@ -284,6 +283,13 @@ class HiSelectableListItem extends React.Component {
     }), type === 'image' && img && React.createElement("img", {
       src: img,
       alt: img,
+      onError: e => {
+        if (fallbackImage) {
+          e.target.src = `${fallbackImage}`;
+        } else {
+          e.target.style.display = 'none';
+        }
+      },
       className: classes.img
     }), this.buildItemLabel(), !!secondaryLabel && React.createElement("div", {
       className: classNames(classes.secondaryLabel, {
@@ -336,6 +342,11 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
+   */
+  fallbackImage: PropTypes.string,
+
   /**
    * N'affiche pas de checkboxes
    */

package/es/styles/createPalette.js

@@ -21,11 +21,11 @@ export const light = {
   // The colors used to style the text.
   text: {
     // The most important text.
-    primary: 'rgba(0, 0, 0, 0.87)',
+    primary: '#20272B',
     // Secondary text.
     secondary: 'rgba(0, 0, 0, 0.54)',
     // Disabled text have even lower visual prominence.
-    disabled: 'rgba(0, 0, 0, 0.38)',
+    disabled: '#999999',
     // Text hints.
     hint: 'rgba(0, 0, 0, 0.38)'
   },

package/es/utils/helpers.js

@@ -28,7 +28,7 @@ export function contains(obj, pred) {
  */
 
 export function escapeHTML(unsafeStr) {
-  return unsafeStr.replace(/<br\/?>/g, '[br]').replace(/<strong>/g, '[[').replace(/<\/?strong>/g, ']]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\[\[/g, '<strong>').replace(/\]\]/g, '</strong>').replace(/\[br\]/g, '<br/>');
+  return unsafeStr.replace(/<br\/?>/g, '[br]').replace(/<strong>/g, '[[').replace(/<\/?strong>/g, ']]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\[\[/g, '<strong>').replace(/\]\]/g, '</strong>').replace(/\[br\]/g, '<br>');
 }
 export function findIndex(arr, pred) {
   const predType = typeof pred;

package/index.es.js

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

package/styles/createPalette.js

@@ -39,11 +39,11 @@ var light = {
   // The colors used to style the text.
   text: {
     // The most important text.
-    primary: 'rgba(0, 0, 0, 0.87)',
+    primary: '#20272B',
     // Secondary text.
     secondary: 'rgba(0, 0, 0, 0.54)',
     // Disabled text have even lower visual prominence.
-    disabled: 'rgba(0, 0, 0, 0.38)',
+    disabled: '#999999',
     // Text hints.
     hint: 'rgba(0, 0, 0, 0.38)'
   },

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

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.38
+/** @license HiPay-Material-UI v2.0.0-beta.39
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -963,11 +963,11 @@
               // The colors used to style the text.
               text: {
                 // The most important text.
-                primary: 'rgba(0, 0, 0, 0.87)',
+                primary: '#20272B',
                 // Secondary text.
                 secondary: 'rgba(0, 0, 0, 0.54)',
                 // Disabled text have even lower visual prominence.
-                disabled: 'rgba(0, 0, 0, 0.38)',
+                disabled: '#999999',
                 // Text hints.
                 hint: 'rgba(0, 0, 0, 0.38)'
               },
@@ -15006,7 +15006,7 @@
              */
 
             function escapeHTML(unsafeStr) {
-              return unsafeStr.replace(/<br\/?>/g, '[br]').replace(/<strong>/g, '[[').replace(/<\/?strong>/g, ']]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\[\[/g, '<strong>').replace(/\]\]/g, '</strong>').replace(/\[br\]/g, '<br/>');
+              return unsafeStr.replace(/<br\/?>/g, '[br]').replace(/<strong>/g, '[[').replace(/<\/?strong>/g, ']]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\[\[/g, '<strong>').replace(/\]\]/g, '</strong>').replace(/\[br\]/g, '<br>');
             }
             /**
              * Remove duplicate items from array useful after concat arrays
@@ -66259,6 +66259,7 @@
 
               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,
@@ -66285,6 +66286,13 @@
                 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$1, {
                 className: classnames(classes.icon, defineProperty({}, classes.iconClickable, onIconClick)),
@@ -66323,6 +66331,11 @@
                */
               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
                */
@@ -73424,16 +73437,21 @@
                   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: {}
               };
             };
             /**
@@ -73471,7 +73489,12 @@
                     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);
@@ -95538,7 +95561,8 @@
                 },
                 disabled: {
                   fontWeight: theme.typography.fontWeightLight,
-                  cursor: 'default'
+                  cursor: 'default',
+                  opacity: 'inherit'
                 },
                 selected: {
                   backgroundColor: theme.palette.action.selected
@@ -95565,7 +95589,6 @@
                 }, theme.typography.b1, {
                   fontWeight: 'inherit',
                   width: '100%',
-                  height: '-webkit-fill-available',
                   padding: '5px 0'
                 }),
                 label: {
@@ -95593,9 +95616,7 @@
                   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',
@@ -95710,6 +95731,7 @@
                       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,
@@ -95781,6 +95803,13 @@
                   }), 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: classnames(classes.secondaryLabel, defineProperty({}, classes.inline, secondaryInline))
@@ -95833,6 +95862,11 @@
                */
               disabled: propTypes.bool,
 
+              /**
+               * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
+               */
+              fallbackImage: propTypes.string,
+
               /**
                * N'affiche pas de checkboxes
                */