@hipay/hipay-material-ui 2.3.4 → 3.0.0

package/HiIcon/HiIcon.js

@@ -11,9 +11,11 @@ exports.default = exports.useStyles = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -51,66 +53,68 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
       className = props.className,
       icon = props.icon,
       size = props.size,
-      _color = props.color,
+      color = props.color,
       other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "icon", "size", "color"]);
   var classes = useStyles(props);
-  var iconName = icon !== null ? icon : children;
   var theme = (0, _styles.useTheme)();
-  var color = ['primary', 'secondary', 'neutral', 'positive', 'middle', 'negative'].includes(_color) ? theme.palette[_color].main : _color; // Line Awesome icons
-
-  if (iconName && iconName.indexOf('fa-') === 0) {
-    return _react.default.createElement("i", (0, _extends2.default)({
-      ref: ref,
-      className: (0, _classnames.default)('fa', iconName, className, classes.root),
-      style: {
-        fontSize: size
-      }
-    }, other));
-  } // Specific HiPay icons
-
-
-  if (iconName && iconName.indexOf('hi_') === 0) {
-    var IconName = hiSvgIcons[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName))];
-    return _react.default.createElement(IconName, (0, _extends2.default)({
-      ref: ref,
-      className: (0, _classnames.default)(classes.root, className),
-      color: color,
-      size: size
-    }, other));
-  }
-
-  color = ['primary', 'secondary', 'negative'].includes(_color) ? _color : 'inherit';
-
-  if (color === 'negative') {
-    color = 'error';
-  } // MDI - Material Design Icons - https://materialdesignicons.com
-
-
-  if (iconName && iconName.indexOf('mdi_') === 0) {
-    var _IconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
-    return _react.default.createElement(_IconName, (0, _extends2.default)({
-      ref: ref,
-      className: (0, _classnames.default)(classes.root, className),
-      color: color,
-      style: {
-        fontSize: size
-      }
-    }, other));
-  } // @material-ui/icons
-
-
-  return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    ref: ref,
-    className: (0, _classnames.default)(classes.root, className),
-    color: color,
-    style: {
-      fontSize: size
+  var iconName = icon !== null ? icon : children;
+  var iconType = (0, _react.useMemo)(function () {
+    if (iconName && iconName.indexOf('fa-') === 0) {
+      return "line_awesome";
+    } else if (iconName && iconName.indexOf('hi_') === 0) {
+      return "hipay";
+    } else if (iconName && iconName.indexOf('mdi_') === 0) {
+      return "mdi";
+    } else {
+      return "mui";
     }
-  }, other), iconName);
+  }, [iconName]);
+
+  switch (iconType) {
+    case "line_awesome":
+      return _react.default.createElement("i", (0, _extends2.default)({
+        ref: ref,
+        className: (0, _classnames.default)('fa', iconName, className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
+        style: {
+          fontSize: size
+        }
+      }, other));
+
+    case "hipay":
+      var HipayIconName = hiSvgIcons[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName))];
+      return _react.default.createElement(HipayIconName, (0, _extends2.default)({
+        ref: ref,
+        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
+        color: "currentColor",
+        size: size
+      }, other));
+
+    case "mdi":
+      var MdiIconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
+      return _react.default.createElement(MdiIconName, (0, _extends2.default)({
+        ref: ref,
+        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
+        color: "inherit",
+        style: {
+          fontSize: size
+        }
+      }, other));
+
+    case "mui":
+    default:
+      return _react.default.createElement(_Icon.default, (0, _extends2.default)({
+        ref: ref,
+        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
+        color: "inherit",
+        style: {
+          fontSize: size
+        }
+      }, other), iconName);
+  }
 });
 
 HiIcon.defaultProps = {
-  color: 'neutral',
+  color: 'inherit',
   icon: null,
   size: 20
 };

package/HiPaymentMeans/HiPaymentMeans.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
@@ -546,12 +548,13 @@ function (_React$Component) {
       return cardNumber;
     };
 
-    _this.formatIBANNumber = function (cardNumber) {
-      if (cardNumber.search(' ') < 0) {
-        cardNumber = "".concat(cardNumber.substring(0, 4), " ").concat(cardNumber.substring(4, 8), " ").concat(cardNumber.substring(8, 12), "\n             ").concat(cardNumber.substring(12, 16), " ").concat(cardNumber.substring(16, 20), " ").concat(cardNumber.substring(20, 26));
-      }
+    _this.formatIBANNumber = function (iban) {
+      // 1) remove spaces
+      var res = iban.replace(/\s/g, ''); // 2) add space each 4 chars
 
-      return cardNumber;
+      return (0, _toConsumableArray2.default)(res).map(function (char, index) {
+        return index > 0 && index % 4 === 0 ? ' ' + char : char;
+      }).join('');
     };
 
     return _this;

package/HiPin/HiPin.js

@@ -5,9 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+exports.default = exports.useStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -17,7 +15,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _styles = require("@material-ui/core/styles");
 
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     root: {
       display: 'inline-block',
@@ -62,7 +60,7 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.contrastText
     }
   };
-};
+});
 /**
  * HiPins
  *
@@ -72,33 +70,27 @@ var styles = function styles(theme) {
  *
  */
 
-
-exports.styles = styles;
+exports.useStyles = useStyles;
 
 function HiPin(props) {
   var _classNames;
 
-  var classes = props.classes,
-      children = props.children,
+  var children = props.children,
       color = props.color,
       onClick = props.onClick,
       className = props.className;
+  var classes = useStyles(props);
   var pinClass = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.clickable, onClick), (0, _defineProperty2.default)(_classNames, classes.primary, color === 'primary'), (0, _defineProperty2.default)(_classNames, classes.secondary, color === 'secondary'), (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.negative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.middle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.neutral, color === 'neutral'), _classNames), className);
-  return _react.default.createElement("div", (0, _extends2.default)({
-    className: pinClass
-  }, onClick && {
+  return _react.default.createElement("div", {
+    className: pinClass,
     onClick: onClick,
-    role: 'button'
-  }), children);
+    role: onClick ? 'button' : undefined
+  }, children);
 }
 
 HiPin.defaultProps = {
   color: 'default'
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiPin'
-})(HiPin);
-
+HiPin.useStyles = useStyles;
+var _default = HiPin;
 exports.default = _default;

package/HiSelect/HiSelect.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
@@ -145,11 +147,11 @@ var HiSelect =
 function (_React$PureComponent) {
   (0, _inherits2.default)(HiSelect, _React$PureComponent);
 
-  function HiSelect(props) {
+  function HiSelect(_props) {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiSelect);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, props));
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, _props));
 
     _this.buildSelectProps = function (options) {
       var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -235,9 +237,9 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnFirstItem = function () {
-      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
+      if (_this.overlay && _this.overlay.querySelector('li:not([tabindex^="-"])')) {
         setTimeout(function () {
-          var item = _this.overlay.getElementsByTagName('li')[0];
+          var item = _this.overlay.querySelector('li:not([tabindex^="-"])');
 
           item.focus();
         }, 1);
@@ -310,16 +312,16 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnSelectedItem = function (selectedValue) {
-      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
+      if (_this.overlay && _this.overlay.querySelector('li:not([tabindex^="-"])')) {
         setTimeout(function () {
           if (_this.overlay) {
             // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-            var item = _this.overlay.getElementsByTagName('li')[0];
+            var item = _this.overlay.querySelector('li:not([tabindex^="-"])');
 
             if (selectedValue && typeof selectedValue === 'string') {
               item = _this.overlay.getElementsByTagName('li')[selectedValue];
             } else if (selectedValue && typeof selectedValue === 'number') {
-              item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
+              item = _this.overlay.querySelector('li:not([tabindex^="-"])')[selectedValue - 1];
             }
 
             if (item) {
@@ -525,12 +527,42 @@ function (_React$PureComponent) {
       return itemListLength;
     };
 
+    _this.renderScrollbarTrackHorizontal = function (props) {
+      var style = props.style,
+          otherProps = (0, _objectWithoutProperties2.default)(props, ["style"]);
+      var inlineStyle = (0, _objectSpread2.default)({}, style, {
+        zIndex: 10,
+        right: 2,
+        bottom: 2,
+        left: 2,
+        borderRadius: 3
+      });
+      return _react.default.createElement("div", (0, _extends2.default)({}, props, {
+        style: inlineStyle
+      }));
+    };
+
+    _this.renderScrollbarTrackVertical = function (props) {
+      var style = props.style,
+          otherProps = (0, _objectWithoutProperties2.default)(props, ["style"]);
+      var inlineStyle = (0, _objectSpread2.default)({}, style, {
+        zIndex: 10,
+        right: 2,
+        bottom: 2,
+        top: 2,
+        borderRadius: 3
+      });
+      return _react.default.createElement("div", (0, _extends2.default)({}, props, {
+        style: inlineStyle
+      }));
+    };
+
     _this.state = {
       alertOpen: false,
       open: false,
       focused: false,
-      searchValue: props.searchValue ? undefined : '',
-      suggestions: props.options,
+      searchValue: _props.searchValue ? undefined : '',
+      suggestions: _props.options,
       openDown: true,
       overlayWidth: 0
     };
@@ -672,6 +704,8 @@ function (_React$PureComponent) {
           } : {},
           className: classes.paper
         }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
+          renderTrackHorizontal: _this2.renderScrollbarTrackHorizontal,
+          renderTrackVertical: _this2.renderScrollbarTrackVertical,
           ref: function ref(contentEl) {
             _this2.optionsContent = contentEl;
           },

package/HiSelectableList/HiSelectableListItem.js

@@ -55,7 +55,7 @@ var PureListItem = (0, _pure.default)(_ListItem.default);
 var styles = function styles(theme) {
   return {
     root: {
-      paddingLeft: 4
+      paddingLeft: theme.spacing(1)
     },
     listItem: {
       backgroundColor: theme.palette.background3,
@@ -64,8 +64,10 @@ var styles = function styles(theme) {
       fontWeight: theme.typography.fontWeightRegular,
       maxHeight: 56,
       display: 'inline-flex',
-      alignItems: 'center',
-      cursor: 'pointer',
+      alignItems: "center",
+      "&:not($disabled):not($pinned)": {
+        cursor: 'pointer'
+      },
       '&$listItemInlineWithInfoWithoutSecondary': {
         justifyContent: 'space-between'
       },
@@ -79,7 +81,9 @@ var styles = function styles(theme) {
         }
       },
       '&:focus': {
-        backgroundColor: theme.palette.action.hover,
+        '&:not($disabled):not($pinned)': {
+          backgroundColor: theme.palette.action.hover
+        },
         outline: 'none'
       }
     },
@@ -104,8 +108,8 @@ var styles = function styles(theme) {
       backgroundColor: theme.palette.action.selected
     },
     pinned: {
+      zIndex: 1,
       display: 'inherit',
-      marginRight: 8,
       backgroundColor: theme.palette.background3
     },
     thin: {
@@ -115,7 +119,7 @@ var styles = function styles(theme) {
       textAlign: 'center',
       width: 1,
       height: 22,
-      padding: '8px 0',
+      padding: theme.spacing(2, 0),
       margin: 'auto'
     },
     listItemContent: (0, _objectSpread2.default)({}, theme.typography.b1, {
@@ -125,7 +129,7 @@ var styles = function styles(theme) {
       padding: '5px 0',
       '&$listItemContentSelected': {
         marginBottom: 1,
-        marginLeft: -4
+        marginLeft: theme.spacing(-1)
       },
       '& strong': {
         fontWeight: theme.typography.fontWeightMedium
@@ -139,8 +143,12 @@ var styles = function styles(theme) {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       display: 'inline-block',
-      margin: '1px 0',
-      paddingLeft: 4
+      margin: '1px 0'
+    },
+    highlight: {
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.palette.neutral.main,
+      textTransform: 'uppercase'
     },
     primaryHighlight: {
       fontWeight: theme.typography.fontWeightMedium,
@@ -151,7 +159,7 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.main,
       fontWeight: theme.typography.fontWeightLight,
       fontSize: 11,
-      marginLeft: 4
+      marginLeft: theme.spacing(1)
     }),
     inline: {},
     info: (0, _objectSpread2.default)({}, theme.typography.b3, {
@@ -169,11 +177,12 @@ var styles = function styles(theme) {
       verticalAlign: 'middle'
     },
     icon: {
-      margin: '0 4px',
+      marginRight: theme.spacing(1),
       verticalAlign: 'middle'
     },
     labelContent: {
       display: '-webkit-flex',
+      paddingLeft: theme.spacing(1),
       alignItems: 'center',
       maxWidth: '85%',
       '&$labelWithoutSecondaryInline': {
@@ -184,13 +193,11 @@ var styles = function styles(theme) {
     infosContent: {
       display: 'flex',
       alignItems: 'center',
+      paddingLeft: theme.spacing(1),
       width: '100%',
       justifyContent: 'space-between',
       '&$infosInlineWithoutSecondary': {
         width: 'auto'
-      },
-      '&$infosWithoutSecondaryInline': {
-        paddingLeft: 28
       }
     },
     infosInlineWithoutSecondary: {},
@@ -345,21 +352,27 @@ function (_React$PureComponent) {
       }
 
       var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
+      var listItemListenerProps = {};
+
+      if (!disabled && !pinned) {
+        listItemListenerProps = {
+          onClick: onSelect,
+          onMouseEnter: this.setHover(true),
+          onMouseLeave: this.setHover(false),
+          onKeyDown: this.handleKeyDown(item)
+        };
+      }
+
       return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
         id: id,
-        tabIndex: disabled ? '-1' : 0,
+        tabIndex: disabled || pinned ? '-1' : 0,
         key: "li-".concat(id),
         classes: {
           root: classes.root
         },
         className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
         disabled: disabled
-      }, disabled || {
-        onClick: onSelect,
-        onMouseEnter: this.setHover(true),
-        onMouseLeave: this.setHover(false),
-        onKeyDown: this.handleKeyDown(item)
-      }, {
+      }, listItemListenerProps, {
         style: {
           paddingLeft: "".concat(paddingLeft + level * 32, "px")
         }
@@ -389,11 +402,12 @@ function (_React$PureComponent) {
         },
         className: classes.img
       }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
+        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
         "data-id": id
-      }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
+      }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
         icon: icon,
-        className: classes.icon
+        className: classes.icon,
+        color: "inherit"
       }), this.buildItemLabel())), _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
       }, !!secondaryLabel && _react.default.createElement("div", {

package/HiSwitch/HiSwitch.js

@@ -183,7 +183,10 @@ function HiSwitch(props) {
     },
     checkedIcon: icon,
     checked: checked,
-    disabled: disabled
+    disabled: disabled,
+    inputProps: {
+      value: checked ? "on" : "off"
+    }
   }, other)), _react.default.createElement("div", {
     className: classes.bar
   }));

package/es/HiChip/HiChip.js

@@ -68,6 +68,7 @@ var styles = function styles(theme) {
       marginLeft: 4,
       position: 'relative',
       cursor: 'pointer',
+      color: theme.palette.neutral.main,
       '&:hover, &:focus': {
         color: theme.palette.neutral.dark
       }