@hipay/hipay-material-ui 3.7.0 → 3.7.2

package/HiTable/HiCellBuilder.js

@@ -70,144 +70,165 @@ var HiCellBuilder = /*#__PURE__*/function (_React$PureComponent) {
         var datacell = typeof rowdata[cell.colId] !== 'undefined' ? rowdata[cell.colId] : rowdata.datas[cell.colId];
 
         if (datacell !== null) {
-          if (cell.data !== undefined) {
-            var refproperties = cell.data.find(function (el) {
-              return el.id === datacell.value;
-            });
-
-            if (refproperties) {
-              Object.keys(refproperties).forEach(function (key) {
-                datacell[key] = refproperties[key];
-              });
-            }
-            /* else {
-               datacell = undefined;
-            }*/
+          // Handle mutliple values (details rows)
+          if (datacell.length === 1) {
+            datacell = datacell[0];
+          } else if (datacell.length > 1) {
+            var align;
 
-          }
-
-          if (datacell) {
             switch (cell.type) {
               case cst.TYPE_NUMERIC:
               case cst.TYPE_AMOUNT:
-                return /*#__PURE__*/_react.default.createElement(_CellNumeric.default, {
-                  value: datacell.value,
-                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-                  precision: cell.precision,
-                  currency: datacell.currency,
-                  locale: datacell.locale || cell.locale || locale,
-                  isButton: datacell.isButton,
-                  onClick: datacell.handleClick,
-                  rowId: rowdata.rowId
-                });
-
-              case cst.TYPE_COUNTRY:
-                return /*#__PURE__*/_react.default.createElement(_CellImage.default, {
-                  label: datacell.label,
-                  shortLabel: datacell.id,
-                  path: datacell.img,
-                  size: datacell.size,
-                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-                });
-
-              case cst.TYPE_IMAGE:
-                return /*#__PURE__*/_react.default.createElement(_CellImage.default, {
-                  label: datacell.label || datacell.value,
-                  shortLabel: datacell.id,
-                  path: datacell.img,
-                  size: datacell.size || cell.size,
-                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-                  fallbackImage: datacell.fallbackImage,
-                  title: cell.title ? cell.title(datacell, cell) : datacell.title
-                });
-
-              case cst.TYPE_RATE:
-                return /*#__PURE__*/_react.default.createElement(_CellRate.default, {
-                  indicator: datacell.indicator,
-                  isPositive: datacell.isPositive,
-                  locale: datacell.locale || cell.locale || locale,
-                  value: datacell.value,
-                  trendchip: datacell.trendchip,
-                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-                });
-
-              case cst.TYPE_ADDRESS:
-                return /*#__PURE__*/_react.default.createElement(_CellAddress.default, {
-                  city: datacell.city,
-                  country: datacell.country,
-                  isoCountry: datacell.isoCountry,
-                  name: datacell.name,
-                  postalCode: datacell.postalCode,
-                  streetAddress: datacell.streetAddress,
-                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-                });
+                align = "right";
+                break;
 
-              case cst.TYPE_DATE:
-                return /*#__PURE__*/_react.default.createElement(_CellDate.default, {
-                  date: datacell.date,
-                  displayTime: datacell.displayTime,
-                  formatShort: datacell.formatShort,
-                  locale: datacell.locale || cell.precision || locale,
-                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-                });
-
-              case cst.TYPE_ICON:
-                return /*#__PURE__*/_react.default.createElement(_CellIcon.default, {
-                  align: cell.align,
-                  color: datacell.color,
-                  icon: datacell.icon,
-                  label: datacell.label,
-                  onClick: datacell.handleClick,
-                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-                  size: cell.size
-                });
-
-              case cst.TYPE_THIRD_PARTY_SECURITY:
-                return /*#__PURE__*/_react.default.createElement(_CellIcon.default, {
-                  color: datacell.color,
-                  icon: datacell.icon,
-                  label: datacell.label,
-                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-                  size: cell.size
-                });
+              default:
+                align = "center";
+            }
 
-              case cst.TYPE_SENTINEL:
-                return /*#__PURE__*/_react.default.createElement(_CellSentinel.default, {
-                  color: datacell.color,
-                  label: datacell.label,
-                  letter: datacell.label2,
-                  active: datacell.active,
-                  reviewer: datacell.reviewer,
-                  outlined: datacell.outlined
-                });
+            return /*#__PURE__*/_react.default.createElement(_CellPinToAction.default, {
+              number: datacell.length,
+              color: "default",
+              align: align
+            });
+          }
 
-              case cst.TYPE_SCORE:
-                return /*#__PURE__*/_react.default.createElement(_CellSentinelScore.default, {
-                  value: datacell.value,
-                  result: datacell.result,
-                  active: datacell.active
-                });
+          if (datacell !== null) {
+            if (cell.data !== undefined) {
+              var refproperties = cell.data.find(function (el) {
+                return el.id === datacell.value;
+              });
 
-              case cst.TYPE_PIN_TO_ACTION:
-                return /*#__PURE__*/_react.default.createElement(_CellPinToAction.default, {
-                  number: datacell.number // eslint-disable-next-line react/jsx-handler-names
-                  ,
-                  onClick: datacell.onClick
+              if (refproperties) {
+                Object.keys(refproperties).forEach(function (key) {
+                  datacell[key] = refproperties[key];
                 });
+              }
+            }
 
-              case cst.TYPE_ACCOUNT_NUMBER:
-              case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
-              default:
-                return /*#__PURE__*/_react.default.createElement(_CellTextStyled.default, {
-                  active: datacell.active,
-                  color: datacell.color,
-                  label: datacell.label,
-                  isButton: datacell.isButton,
-                  onClick: datacell.handleClick,
-                  title: cell.title ? cell.title(datacell, cell) : datacell.title,
-                  value: datacell.value,
-                  align: cell.align
-                });
+            if (datacell) {
+              switch (cell.type) {
+                case cst.TYPE_NUMERIC:
+                case cst.TYPE_AMOUNT:
+                  return /*#__PURE__*/_react.default.createElement(_CellNumeric.default, {
+                    value: datacell.value,
+                    view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                    precision: cell.precision,
+                    currency: datacell.currency,
+                    locale: datacell.locale || cell.locale || locale,
+                    isButton: datacell.isButton,
+                    onClick: datacell.handleClick,
+                    rowId: rowdata.rowId
+                  });
+
+                case cst.TYPE_COUNTRY:
+                  return /*#__PURE__*/_react.default.createElement(_CellImage.default, {
+                    label: datacell.label,
+                    shortLabel: datacell.id,
+                    path: datacell.img,
+                    size: datacell.size,
+                    view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                  });
+
+                case cst.TYPE_IMAGE:
+                  return /*#__PURE__*/_react.default.createElement(_CellImage.default, {
+                    label: datacell.label || datacell.value,
+                    shortLabel: datacell.shortLabel,
+                    path: datacell.img,
+                    size: datacell.size || cell.size,
+                    view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                    fallbackImage: datacell.fallbackImage,
+                    title: cell.title ? cell.title(datacell, cell) : datacell.title
+                  });
+
+                case cst.TYPE_RATE:
+                  return /*#__PURE__*/_react.default.createElement(_CellRate.default, {
+                    indicator: datacell.indicator,
+                    isPositive: datacell.isPositive,
+                    locale: datacell.locale || cell.locale || locale,
+                    value: datacell.value,
+                    trendchip: datacell.trendchip,
+                    view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                  });
+
+                case cst.TYPE_ADDRESS:
+                  return /*#__PURE__*/_react.default.createElement(_CellAddress.default, {
+                    city: datacell.city,
+                    country: datacell.country,
+                    isoCountry: datacell.isoCountry,
+                    name: datacell.name,
+                    postalCode: datacell.postalCode,
+                    streetAddress: datacell.streetAddress,
+                    view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                  });
+
+                case cst.TYPE_DATE:
+                  return /*#__PURE__*/_react.default.createElement(_CellDate.default, {
+                    date: datacell.date,
+                    displayTime: datacell.displayTime,
+                    formatShort: datacell.formatShort,
+                    locale: datacell.locale || cell.precision || locale,
+                    view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                  });
+
+                case cst.TYPE_ICON:
+                  return /*#__PURE__*/_react.default.createElement(_CellIcon.default, {
+                    align: cell.align,
+                    color: datacell.color,
+                    icon: datacell.icon,
+                    label: datacell.label,
+                    onClick: datacell.handleClick,
+                    view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                    size: cell.size
+                  });
+
+                case cst.TYPE_THIRD_PARTY_SECURITY:
+                  return /*#__PURE__*/_react.default.createElement(_CellIcon.default, {
+                    color: datacell.color,
+                    icon: datacell.icon,
+                    label: datacell.label,
+                    view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                    size: cell.size
+                  });
+
+                case cst.TYPE_SENTINEL:
+                  return /*#__PURE__*/_react.default.createElement(_CellSentinel.default, {
+                    color: datacell.color,
+                    label: datacell.label,
+                    letter: datacell.label2,
+                    active: datacell.active,
+                    reviewer: datacell.reviewer,
+                    outlined: datacell.outlined
+                  });
+
+                case cst.TYPE_SCORE:
+                  return /*#__PURE__*/_react.default.createElement(_CellSentinelScore.default, {
+                    value: datacell.value,
+                    result: datacell.result,
+                    active: datacell.active
+                  });
+
+                case cst.TYPE_PIN_TO_ACTION:
+                  return /*#__PURE__*/_react.default.createElement(_CellPinToAction.default, {
+                    number: datacell.number // eslint-disable-next-line react/jsx-handler-names
+                    ,
+                    onClick: datacell.onClick
+                  });
+
+                case cst.TYPE_ACCOUNT_NUMBER:
+                case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
+                default:
+                  return /*#__PURE__*/_react.default.createElement(_CellTextStyled.default, {
+                    active: datacell.active,
+                    color: datacell.color,
+                    label: datacell.label,
+                    isButton: datacell.isButton,
+                    onClick: datacell.handleClick,
+                    title: cell.title ? cell.title(datacell, cell) : datacell.title,
+                    value: datacell.value,
+                    align: cell.align
+                  });
+              }
             }
           }
         }

package/es/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/es/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/es/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/es/HiForm/HiFormControl.js

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

package/es/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/es/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/es/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/es/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();