@hipay/hipay-material-ui 3.7.1 → 3.7.2

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/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/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/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/es/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/es/hi-svg-icons/HiInvoiceMenu.js

@@ -24,7 +24,7 @@ var _styles = require("@material-ui/core/styles");
 /**
  * @ignore - internal component.
  */
-var HiInvoice = (0, _pure.default)(function (props) {
+var HiInvoiceMenu = (0, _pure.default)(function (props) {
   var theme = (0, _styles.useTheme)();
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || theme.palette.neutral.main : _props$color,
@@ -41,6 +41,6 @@ var HiInvoice = (0, _pure.default)(function (props) {
     fill: color
   })));
 });
-HiInvoice.muiName = 'SvgIcon';
-var _default = HiInvoice;
+HiInvoiceMenu.muiName = 'SvgIcon';
+var _default = HiInvoiceMenu;
 exports.default = _default;

package/hi-svg-icons/HiInvoiceMenu.js

@@ -24,7 +24,7 @@ var _styles = require("@material-ui/core/styles");
 /**
  * @ignore - internal component.
  */
-var HiInvoice = (0, _pure.default)(function (props) {
+var HiInvoiceMenu = (0, _pure.default)(function (props) {
   var theme = (0, _styles.useTheme)();
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || theme.palette.neutral.main : _props$color,
@@ -41,6 +41,6 @@ var HiInvoice = (0, _pure.default)(function (props) {
     fill: color
   })));
 });
-HiInvoice.muiName = 'SvgIcon';
-var _default = HiInvoice;
+HiInvoiceMenu.muiName = 'SvgIcon';
+var _default = HiInvoiceMenu;
 exports.default = _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
   "private": false,
-  "version": "3.7.1",
+  "version": "3.7.2",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",
@@ -69,4 +69,4 @@
   },
   "main": "./index.js",
   "module": "./esm/index.js"
-}
+}

package/es/hi-svg-icons/index.text.js

@@ -1,51 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _fs = _interopRequireDefault(require("fs"));
-
-var _path = _interopRequireDefault(require("path"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _testUtils = require("../test-utils");
-
-describe('hi-svg-icons', function () {
-  var shallow;
-  before(function () {
-    shallow = (0, _testUtils.createShallow)();
-  });
-  it('should be able to render all of them', function (done) {
-    // This test can only be run on the node env
-    if (!_fs.default.readdir) {
-      done();
-      return;
-    }
-
-    _fs.default.readdir(__dirname, function (err, files) {
-      files.forEach(function (file) {
-        // Ignore no js files and tests
-        if (file.indexOf('.js') === -1 || file.indexOf('text.js') > -1) {
-          return;
-        } // eslint-disable-next-line global-require, import/no-dynamic-require
-
-
-        var fileLoaded = require(_path.default.join(__dirname, file));
-
-        if (!fileLoaded.default) {
-          return;
-        }
-
-        var Icon = fileLoaded.default;
-        var wrapper = shallow(_react.default.createElement(Icon, {
-          className: "foo"
-        }));
-
-        _chai.assert.strictEqual(wrapper.hasClass('foo'), true);
-      });
-      done();
-    });
-  });
-});

package/es/styles/defaultOptions.js

@@ -1,16 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _default = {
-  defaultTheme: _theme.default,
-  index: 1
-};
-exports.default = _default;

package/es/test-utils/consoleErrorMock.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _sinon = require("sinon");
-
-var _default = function _default() {
-  console.error = (0, _sinon.spy)();
-};
-
-exports.default = _default;

package/hi-svg-icons/index.text.js

@@ -1,51 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _fs = _interopRequireDefault(require("fs"));
-
-var _path = _interopRequireDefault(require("path"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _testUtils = require("../test-utils");
-
-describe('hi-svg-icons', function () {
-  var shallow;
-  before(function () {
-    shallow = (0, _testUtils.createShallow)();
-  });
-  it('should be able to render all of them', function (done) {
-    // This test can only be run on the node env
-    if (!_fs.default.readdir) {
-      done();
-      return;
-    }
-
-    _fs.default.readdir(__dirname, function (err, files) {
-      files.forEach(function (file) {
-        // Ignore no js files and tests
-        if (file.indexOf('.js') === -1 || file.indexOf('text.js') > -1) {
-          return;
-        } // eslint-disable-next-line global-require, import/no-dynamic-require
-
-
-        var fileLoaded = require(_path.default.join(__dirname, file));
-
-        if (!fileLoaded.default) {
-          return;
-        }
-
-        var Icon = fileLoaded.default;
-        var wrapper = shallow(_react.default.createElement(Icon, {
-          className: "foo"
-        }));
-
-        _chai.assert.strictEqual(wrapper.hasClass('foo'), true);
-      });
-      done();
-    });
-  });
-});

package/styles/defaultOptions.js

@@ -1,16 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _default = {
-  defaultTheme: _theme.default,
-  index: 1
-};
-exports.default = _default;

package/test-utils/consoleErrorMock.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _sinon = require("sinon");
-
-var _default = function _default() {
-  console.error = (0, _sinon.spy)();
-};
-
-exports.default = _default;