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

package/es/HiSelectNew/HiDynamicSelectField.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+// @inheritedComponent HiDynamicSelect
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiFormControl from '../HiForm/HiFormControl';
+import HiDynamicSelect from './HiDynamicSelect';
+/**
+ * Champs input pour formulaire
+ */
+
+class HiDynamicSelectField extends React.PureComponent {
+  render() {
+    const _this$props = this.props,
+          {
+      label,
+      required,
+      disabled,
+      error,
+      errorText,
+      helperText,
+      helperIcon,
+      id,
+      name,
+      value,
+      options,
+      type,
+      multiple,
+      iconAll,
+      checkbox,
+      searchable,
+      translations,
+      className
+    } = _this$props,
+          others = _objectWithoutProperties(_this$props, ["label", "required", "disabled", "error", "errorText", "helperText", "helperIcon", "id", "name", "value", "options", "type", "multiple", "iconAll", "checkbox", "searchable", "translations", "className"]);
+
+    return React.createElement(HiFormControl, {
+      id: id,
+      label: label,
+      required: required,
+      disabled: disabled,
+      error: error,
+      errorText: errorText,
+      helperText: helperText,
+      helperIcon: helperIcon,
+      className: className
+    }, React.createElement(HiDynamicSelect, _extends({
+      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)));
+  }
+
+}
+
+HiDynamicSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge des styles
+   */
+  className: PropTypes.string,
+
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: PropTypes.bool,
+
+  /**
+   * Texte de l'erreur
+   */
+  errorText: PropTypes.string,
+
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: PropTypes.bool,
+
+  /**
+   * Texte de l'aide
+   */
+  helperText: PropTypes.string,
+
+  /**
+   * id de l'élément input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Label du champs
+   */
+  label: PropTypes.string,
+
+  /**
+   * true si champs obligatoire
+   */
+  required: PropTypes.bool
+} : {};
+export default HiDynamicSelectField;

package/es/HiSelectNew/HiNestedSelect.js

@@ -6,6 +6,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import HiSelect from './HiSelect';
 import HiIcon from '../HiIcon';
+import withStyles from "../styles/withStyles";
 /**
  * Return array of final item id in nested list (via props chlidren)
  * @param itemList
@@ -109,6 +110,24 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
     v: visibleParent
   });
 }
+
+export const styles = theme => ({
+  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
  *
@@ -122,7 +141,6 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
  * - si aucun enfant n'est sélectionné, le parent est affiché "unselected".
  */
 
-
 class HiNestedSelect extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -235,9 +253,9 @@ class HiNestedSelect extends React.PureComponent {
           }), selectedItem.label);
         } else if (selectedItem.type === 'image') {
           inputValue = React.createElement("span", {
-            className: classes.selectIconLabel
+            className: classes.selectImgLabel
           }, React.createElement("img", {
-            className: classes.labelIcon,
+            className: classes.labelImg,
             src: selectedItem.img,
             alt: selectedItem.label
           }), selectedItem.label);
@@ -398,4 +416,7 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
 } : {};
-export default HiNestedSelect;
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiNestedSelect'
+})(HiNestedSelect);

package/es/HiSelectNew/HiSelect.js

@@ -23,17 +23,23 @@ export const 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: _objectSpread({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -42,6 +48,15 @@ export const styles = theme => ({
   }, 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%'
   })
 });
 /**
@@ -119,8 +134,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();
       }
     };
 
@@ -295,7 +312,7 @@ class HiSelect extends React.PureComponent {
           inputValue = React.createElement("span", {
             className: classes.selectIconLabel
           }, React.createElement("img", {
-            className: classes.labelIcon,
+            className: classes.labelImg,
             src: item.img,
             alt: item.label
           }), item.label);
@@ -416,7 +433,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 +518,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.4
  *
  * 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.4
  *
  * 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.40",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -71,4 +71,4 @@
   },
   "main": "./index.js",
   "module": "./index.es.js"
-}
+}

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.4
  *
  * 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)'
               },
@@ -13667,6 +13667,7 @@
 
             var styles$1 = function styles(theme) {
               return {
+                label: {},
                 positive: {
                   color: theme.palette.positive.main,
                   '&:hover': {
@@ -13724,7 +13725,8 @@
               return React__default.createElement(IconButton$2, _extends_1({
                 className: className,
                 classes: {
-                  root: buttonClassNames
+                  root: buttonClassNames,
+                  label: classes.label
                 },
                 color: hcolor
               }, other), children);
@@ -15006,7 +15008,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
@@ -65902,7 +65904,7 @@
 
               if (iconName.indexOf('fa-') === 0) {
                 return React__default.createElement("i", _extends_1({
-                  className: classnames('fa', iconName, classes.root, defineProperty({}, classes["color".concat(capitalize(color))], color !== 'inherit'), className),
+                  className: classnames('fa', iconName, className, classes.root, defineProperty({}, classes["color".concat(capitalize(color))], color !== 'inherit')),
                   style: {
                     fontSize: size
                   }
@@ -66113,7 +66115,7 @@
 
             HiCheckbox.defaultProps = {
               checked: false,
-              color: 'default',
+              color: 'inherit',
               size: 20,
               icon: 'check_box_outline_blank'
             };
@@ -66136,7 +66138,7 @@
               /**
                * 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é.
@@ -66259,6 +66261,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 +66288,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 +66333,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
                */
@@ -68604,6 +68619,10 @@
                   width: 40,
                   display: 'inline-block'
                 },
+                eraseButtonLabel: {
+                  position: 'relative',
+                  top: -2
+                },
                 disabled: {
                   borderBottom: 'none'
                 },
@@ -68803,6 +68822,9 @@
 
                   var eraseIcon = !multiline && onReset && focused && !disabled && value.length > 0 && React__default.createElement(HiIconButton$1, {
                     className: classes.eraseButton,
+                    classes: {
+                      label: classes.eraseButtonLabel
+                    },
                     onClick: this.handleReset,
                     onBlur: this.handleBlur
                   }, _ref$3);
@@ -73424,16 +73446,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 +73498,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 +95570,8 @@
                 },
                 disabled: {
                   fontWeight: theme.typography.fontWeightLight,
-                  cursor: 'default'
+                  cursor: 'default',
+                  opacity: 'inherit'
                 },
                 selected: {
                   backgroundColor: theme.palette.action.selected
@@ -95565,7 +95598,6 @@
                 }, theme.typography.b1, {
                   fontWeight: 'inherit',
                   width: '100%',
-                  height: '-webkit-fill-available',
                   padding: '5px 0'
                 }),
                 label: {
@@ -95593,9 +95625,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 +95740,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 +95812,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 +95871,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
                */
@@ -96389,7 +96432,7 @@
                   }
                 },
                 disabled: {
-                  color: "".concat(theme.palette.action.disabled),
+                  color: "".concat(theme.palette.text.disabled),
                   '&:before': {
                     display: 'none'
                   }