@hipay/hipay-material-ui 3.7.0 → 3.7.2

package/HiCell/CellImage.js

@@ -83,8 +83,8 @@ var CellImage = /*#__PURE__*/function (_React$PureComponent) {
           view = _this$props.view,
           size = _this$props.size,
           fallbackImage = _this$props.fallbackImage,
-          title = _this$props.title,
-          value = _this$props.value;
+          title = _this$props.title;
+      var displayedLabel = shortLabel && view === 'm' ? shortLabel : label;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: classes.wrapper,
         title: label
@@ -95,11 +95,9 @@ var CellImage = /*#__PURE__*/function (_React$PureComponent) {
         className: classes.img,
         width: size,
         onError: handleError(fallbackImage)
-      }), shortLabel && view === 'm' && /*#__PURE__*/_react.default.createElement("span", {
+      }), /*#__PURE__*/_react.default.createElement("span", {
         className: classes.label
-      }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && /*#__PURE__*/_react.default.createElement("span", {
-        className: classes.label
-      }, label));
+      }, displayedLabel));
     }
   }]);
   return CellImage;

package/HiCell/CellPinToAction.js

@@ -28,9 +28,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 
 var styles = {
-  wrapper: {
+  wrapperLeft: {
     maxWidth: '100%',
     display: 'inline-flex'
+  },
+  wrapperRigth: {
+    textAlign: 'right'
+  },
+  wrapperCenter: {
+    textAlign: 'center'
   }
 };
 /**
@@ -57,12 +63,22 @@ var CellPinToAction = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = this.props,
           classes = _this$props.classes,
           onClick = _this$props.onClick,
-          number = _this$props.number;
+          number = _this$props.number,
+          color = _this$props.color,
+          align = _this$props.align;
       if (number === undefined) return '';
+      var wrapperClass = classes.wrapperLeft;
+
+      if (align === "right") {
+        wrapperClass = classes.wrapperRigth;
+      } else if (align === "center") {
+        wrapperClass = classes.wrapperCenter;
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: classes.wrapper
+        className: wrapperClass
       }, number === 0 ? _ref : /*#__PURE__*/_react.default.createElement(_HiPin.default, {
-        color: "primary",
+        color: color,
         onClick: onClick
       }, number));
     }
@@ -70,6 +86,11 @@ var CellPinToAction = /*#__PURE__*/function (_React$PureComponent) {
   return CellPinToAction;
 }(_react.default.PureComponent);
 
+CellPinToAction.defaultProps = {
+  color: "primary",
+  align: "left"
+};
+
 var _default = (0, _styles.withStyles)(styles, {
   name: 'HmuiCellPin'
 })(CellPinToAction);

package/HiDatePicker/HiDateRangeSelector.js

@@ -415,7 +415,8 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
           type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           pinned: true,
           icon: _ref2,
-          label: translations.preset_periods
+          label: translations.preset_periods,
+          selectable: false
         });
         presetOptionsAvailable.forEach(function (option) {
           options.push(_this2.options.find(function (_option) {
@@ -430,7 +431,8 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
           type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           pinned: true,
           icon: _ref3,
-          label: translations.custom_periods
+          label: translations.custom_periods,
+          selectable: false
         });
         customOptionsAvailable.forEach(function (option) {
           options.push(_this2.options.find(function (_option) {
@@ -467,7 +469,8 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
           classes = _this$props2.classes,
           selectProps = _this$props2.selectProps,
           staticPosition = _this$props2.staticPosition,
-          props = (0, _objectWithoutProperties2.default)(_this$props2, ["availableOptionKeys", "disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
+          className = _this$props2.className,
+          props = (0, _objectWithoutProperties2.default)(_this$props2, ["availableOptionKeys", "disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition", "className"]);
       var _this$state = this.state,
           selectedPreset = _this$state.selectedPreset,
           containerWidth = _this$state.containerWidth;
@@ -484,6 +487,7 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
         errorText: errorText,
         error: !!(fromError || toError),
         label: ' ',
+        className: className,
         InputLabelProps: {
           className: classes.formControlLabel
         }

package/HiForm/HiFormControl.js

@@ -134,7 +134,8 @@ var styles = function styles(theme) {
     },
     icon: {
       position: 'absolute',
-      fontSize: 20
+      fontSize: 20,
+      top: 4
     }
   };
 };

package/HiForm/HiUploadField.js

@@ -52,7 +52,8 @@ var HiUploadField = /*#__PURE__*/function (_React$PureComponent) {
           values = _this$props.values,
           fullWidth = _this$props.fullWidth,
           required = _this$props.required,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["className", "label", "helperIcon", "helperText", "values", "fullWidth", "required"]);
+          HiInputLabelProps = _this$props.HiInputLabelProps,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["className", "label", "helperIcon", "helperText", "values", "fullWidth", "required", "HiInputLabelProps"]);
       var empty = true;
       var error = false;
       var errorText = '';
@@ -75,7 +76,8 @@ var HiUploadField = /*#__PURE__*/function (_React$PureComponent) {
         helperIcon: helperIcon,
         helperText: helperText,
         fullWidth: fullWidth,
-        required: required
+        required: required,
+        InputLabelProps: HiInputLabelProps
       }, /*#__PURE__*/_react.default.createElement(_HiUpload.default, (0, _extends2.default)({
         values: values
       }, others)));

package/HiIcon/HiIcon.js

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/exten
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -54,6 +56,11 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
       color = props.color,
       other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "icon", "size", "color"]);
   var classes = useStyles(props);
+
+  if ((0, _typeof2.default)(icon) === "object") {
+    return icon;
+  }
+
   var iconName = icon !== null ? icon : children;
   var iconType = (0, _react.useMemo)(function () {
     if (iconName && iconName.indexOf('fa-') === 0) {

package/HiPaymentMeans/HiPaymentMeans.js

@@ -413,7 +413,8 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
         className: classes.walletShadow,
         style: {
           backgroundImage: "url(\"".concat(svgPath, "Wallet_shape.svg\")")
-        }
+        },
+        "data-name": "ewallet"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: classes.wallet,
         style: {
@@ -422,7 +423,8 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet),
-        title: username
+        title: username,
+        "data-name": "card_name"
       }, username), /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)(classes.stripe, classes.stripeBottomLeft)
       }, imgComponent), /*#__PURE__*/_react.default.createElement("span", {
@@ -435,20 +437,24 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
         className: (0, _classnames.default)(classes.bankCard, classes.shadow),
         style: {
           background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
-        }
+        },
+        "data-name": "card"
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
       }, imgComponent), /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
       }), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.number, classes.cardNumber)
+        className: (0, _classnames.default)(classes.number, classes.cardNumber),
+        "data-name": "card_number"
       }, formatNumber), cardNumber && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
       }, "Card number"), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard),
-        title: username
+        title: username,
+        "data-name": "card_name"
       }, username), /*#__PURE__*/_react.default.createElement("div", {
-        className: classes.dateValid
+        className: classes.dateValid,
+        "data-name": "card_validity"
       }, cardValidity), cardValidity && /*#__PURE__*/_react.default.createElement("div", {
         className: classes.validThru
       }, "Valid Thru"));
@@ -458,7 +464,8 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
         className: (0, _classnames.default)(classes.bankCard, classes.shadow),
         style: {
           background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
-        }
+        },
+        "data-name": "corporate"
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
       }, imgComponent), /*#__PURE__*/_react.default.createElement("span", {
@@ -471,21 +478,26 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
       }, "CORPORATE")), cardNumber && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelMedium, classes.corporateNumberLabel)
       }, "Card number"), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.number, classes.corporateNumber)
+        className: (0, _classnames.default)(classes.number, classes.corporateNumber),
+        "data-name": "card_number"
       }, cardNumber), yearMember && /*#__PURE__*/_react.default.createElement("div", {
         className: classes.memberSince
       }, "Member Since"), /*#__PURE__*/_react.default.createElement("div", {
-        className: classes.yearMember
+        className: classes.yearMember,
+        "data-name": "year_member"
       }, yearMember), /*#__PURE__*/_react.default.createElement("div", {
-        className: classes.dateValid
+        className: classes.dateValid,
+        "data-name": "card_validity"
       }, cardValidity), cardValidity && /*#__PURE__*/_react.default.createElement("div", {
         className: classes.validThru
       }, "Valid Thru"), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelLarge, classes.userNameCorporate),
-        title: cardUser
+        title: cardUser,
+        "data-name": "card_name"
       }, cardUser), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelLarge, classes.businessName),
-        title: businessName
+        title: businessName,
+        "data-name": "business_name"
       }, businessName));
 
     case OPEN_INVOICE:
@@ -496,7 +508,8 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
         className: (0, _classnames.default)(classes.sepa, classes.shadow),
         style: {
           background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
-        }
+        },
+        "data-name": "sepa"
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)(classes.stripe, classes.stripeTopLeft)
       }, imgComponent), /*#__PURE__*/_react.default.createElement("span", {
@@ -504,12 +517,15 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
       }), cardNumber && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelMedium, classes.ibanLabel)
       }, PAYMENT_REFERENCE === type ? "REFERENCE" : "IBAN"), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.number, classes.ibanNumber)
+        className: (0, _classnames.default)(classes.number, classes.ibanNumber),
+        "data-name": "card_number"
       }, formatNumber), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa),
-        title: username
+        title: username,
+        "data-name": "card_name"
       }, username), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
+        className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit),
+        "data-name": "type_iban"
       }, creditDebit));
 
     case "prepaid-card":
@@ -517,7 +533,8 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
         className: (0, _classnames.default)(classes.bankCard, classes.shadow),
         style: {
           background: "url(\"".concat(svgPath, "Gift_shape.svg\"), linear-gradient(").concat(color1, ", ").concat(color2 || color1, ")")
-        }
+        },
+        "data-name": "prepaid-card"
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
       }, imgComponent), /*#__PURE__*/_react.default.createElement("span", {
@@ -529,7 +546,8 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
       })), cardNumber && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelMedium, classes.giftCardNumberLabel)
       }, "Card number"), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.number, classes.giftCardNumber)
+        className: (0, _classnames.default)(classes.number, classes.giftCardNumber),
+        "data-name": "card_number"
       }, cardNumber), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
       }, translations.gift_card));
@@ -539,20 +557,24 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
         className: (0, _classnames.default)(classes.bankCard, classes.shadow),
         style: {
           background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
-        }
+        },
+        "data-name": "card"
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
       }, imgComponent), /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
       }), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.number, classes.cardNumber)
+        className: (0, _classnames.default)(classes.number, classes.cardNumber),
+        "data-name": "card_number"
       }, cardNumber), cardNumber && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
       }, "Card number"), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard),
-        title: username
+        title: username,
+        "data-name": "card_name"
       }, username), /*#__PURE__*/_react.default.createElement("div", {
-        className: classes.dateValid
+        className: classes.dateValid,
+        "data-name": "card_validity"
       }, cardValidity), cardValidity && /*#__PURE__*/_react.default.createElement("div", {
         className: classes.validThru
       }, "Valid Thru"));

package/HiSelect/HiSuggestSelect.js

@@ -134,6 +134,18 @@ var HiSuggestSelect = /*#__PURE__*/function (_React$PureComponent) {
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
       } else if (key === 'tab') {
         document.body.style.overflow = 'auto';
+
+        if ((0, _helpers.getNextItemSelectable)(document.activeElement, 'down') === null) {
+          _this.setState({
+            options: [],
+            focused: false,
+            suggestionFocusIndex: -1
+          });
+
+          if (_this.props.onBlurInput) {
+            _this.props.onBlurInput(event);
+          }
+        }
       } else if (key === 'escape' || 'enter') {
         event.preventDefault();
 

package/HiSelectableList/HiSelectableList.js

@@ -89,19 +89,23 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
     };
 
     _this.handleKeyDown = function (event) {
-      var nextItem;
-      var key = (0, _keycode.default)(event);
-
-      if (key === 'down') {
-        event.preventDefault();
-        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
-      } else if (key === 'up') {
-        event.preventDefault();
-        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
-      }
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(event);
+      } else {
+        var nextItem;
+        var key = (0, _keycode.default)(event);
+
+        if (key === 'down') {
+          event.preventDefault();
+          nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
+        } else if (key === 'up') {
+          event.preventDefault();
+          nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
+        }
 
-      if (nextItem) {
-        nextItem.focus();
+        if (nextItem) {
+          nextItem.focus();
+        }
       }
     };
 

package/HiSelectableList/HiSelectableListItem.js

@@ -338,7 +338,7 @@ function HiSelectableListItem(props) {
     },
     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,
-    onClick: onSelect,
+    onClick: !disabled ? onSelect : undefined,
     style: {
       paddingLeft: "".concat(paddingLeft + level * 32, "px")
     }