@hipay/hipay-material-ui 3.7.5 → 3.7.7

package/HiCell/CellDate.js

@@ -33,7 +33,10 @@ var styles = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'pre',
-    width: '100%'
+    width: '100%',
+    textAlign: function textAlign(props) {
+      return props.align === 'right' ? 'right' : 'left';
+    }
   }
 };
 /**

package/HiCell/CellTextStyled.js

@@ -86,6 +86,9 @@ var CellTextStyled = function CellTextStyled(_ref) {
     styleRoot = (0, _objectSpread2.default)({}, styleRoot, {
       textAlign: 'right'
     });
+    styleColorLabel = (0, _objectSpread2.default)({}, styleColorLabel, {
+      justifyContent: 'flex-end'
+    });
   } else {
     styleRoot = (0, _objectSpread2.default)({}, styleRoot, {
       textAlign: 'left'

package/HiDatePicker/HiDatePicker.js

@@ -263,7 +263,8 @@ var HiDatePicker = /*#__PURE__*/function (_React$Component) {
           translations = _this$props.translations,
           value = _this$props.value,
           hideOnDayClick = _this$props.hideOnDayClick,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "format", "locale", "minimumDate", "onReset", "translations", "value", "hideOnDayClick"]);
+          HiInputProps = _this$props.HiInputProps,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "format", "locale", "minimumDate", "onReset", "translations", "value", "hideOnDayClick", "HiInputProps"]);
       var currentMonth = this.state.currentMonth;
       var today = (0, _momentTimezone.default)();
       var effectiveDisabledDays = (0, _objectSpread2.default)({}, disablePastDays && {
@@ -312,6 +313,11 @@ var HiDatePicker = /*#__PURE__*/function (_React$Component) {
           onSubmit: this.props.onSubmit
         }
       });
+
+      if (typeof HiInputProps !== "undefined") {
+        inputProps.HiInputProps = (0, _objectSpread2.default)({}, inputProps.HiInputProps, {}, HiInputProps);
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: classes.root,
         onKeyDown: this.handleKeyDown()

package/HiDatePicker/HiDateRangeSelector.js

@@ -269,7 +269,7 @@ function buildDateRangeOptionByKey(key, t, format) {
         info = buildDateRangeInfo(t, from, to, format, {
           prefix: null,
           toNow: true,
-          toToday: false,
+          toToday: key === 1,
           displayDays: false,
           displayDayName: true
         });

package/HiDialog/HiDialog.js

@@ -52,7 +52,8 @@ var HiDialog = function HiDialog(props) {
       id = props.id,
       onClose = props.onClose,
       open = props.open,
-      title = props.title;
+      title = props.title,
+      closeBtn = props.closeBtn;
   var classes = useStyles(props);
   var handleClose = (0, _react.useCallback)(function () {
     if (onClose) {
@@ -68,9 +69,9 @@ var HiDialog = function HiDialog(props) {
     open: open
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.header
-  }, /*#__PURE__*/_react.default.createElement("p", {
+  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement("p", {
     className: classes.title
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
+  }, title) : title, closeBtn !== false && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.closeDiv
   }, /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
     id: "close-dialog-btn",

package/HiSelect/HiSelect.js

@@ -293,15 +293,6 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
     };
 
     _this.handleClick = function (event) {
-      if (event) {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (event.type === "keydown") {
-          return;
-        }
-      }
-
       if (_this.state.open) {
         _this.handleClose();
       } else if (_this.props.alert && !_this.state.alertOpen) {
@@ -387,7 +378,9 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (_this.inputEl) {
-        _this.inputEl.focus();
+        setTimeout(function () {
+          _this.inputEl.focus();
+        }, 100);
       }
     };
 
@@ -415,7 +408,16 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       var key = (0, _keycode.default)(event);
 
       if (!_this.state.alertOpen) {
-        if (key === 'esc' && _this.state.open) {
+        if (event.target === _this.inputEl && _this.state.open && key === 'down') {
+          // Focus on list 1st item
+          event.stopPropagation();
+          event.preventDefault();
+          var firstLi = document.querySelector("#".concat(_this.props.id, " + div ul > li"));
+
+          if (!!firstLi) {
+            firstLi.focus();
+          }
+        } else if (key === 'esc' && _this.state.open) {
           event.stopPropagation();
           event.preventDefault();
 
@@ -428,11 +430,32 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else if (key === 'space' && event.target !== _this.searchField) {
           event.preventDefault();
+        } else if (key === 'tab' && (_this.state.open || _this.state.alertOpen)) {
           event.stopPropagation();
 
-          _this.handleClick(event);
-        } else if (key === 'tab') {
           _this.handleClose();
+        } else if (key === "down" && event.target.id.includes("_subheader")) {
+          // Focus on parent, next item is child
+          if (document.querySelector("#group-".concat(event.target.id, " li:nth-child(1)"))) {
+            document.querySelector("#group-".concat(event.target.id, " li:nth-child(1)")).focus();
+          }
+        } else if (key === "down" && !event.target.nextSibling) {
+          var _document$getElementB, _document$getElementB2;
+
+          // Focus on parent, next item is child
+          if ((_document$getElementB = document.getElementById(event.target.dataset.group)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.nextSibling) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.nextSibling) {
+            document.getElementById(event.target.dataset.group).nextSibling.nextSibling.focus();
+          }
+        } else if (key === "up") {
+          if (event.target.previousSibling === null && !!event.target.dataset.group) {
+            // Previous item is parent item
+            document.getElementById(event.target.dataset.group).focus();
+          } else if (!!event.target.previousSibling && !event.target.dataset.group) {
+            // On parent, go to previous (last) child
+            if (event.target.previousSibling.querySelector("li:last-child")) {
+              event.target.previousSibling.querySelector("li:last-child").focus();
+            }
+          }
         }
       }
     };
@@ -468,9 +491,11 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           value = _this$props2.value;
 
       if (!multiple) {
-        // single value
-        _this.handleClose();
-
+        // This is a fix to prevent select open after select => TODO improve ?
+        setTimeout(function () {
+          // single value
+          _this.handleClose();
+        }, 1);
         onChange(event, item.id, item);
       } else if (hasAll && item.id === '_all') {
         if (value.length === options.length) {

package/HiSelect/HiSelectInput.js

@@ -13,8 +13,6 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
@@ -167,19 +165,22 @@ var HiSelectInput = /*#__PURE__*/function (_React$PureComponent) {
 
   var _super = _createSuper(HiSelectInput);
 
-  function HiSelectInput(props) {
+  function HiSelectInput() {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiSelectInput);
-    _this = _super.call(this, props);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
 
     _this.handleKeyDown = function (event) {
       var key = (0, _keycode.default)(event);
 
       if (_this.props.onKeyDown) {
         _this.props.onKeyDown(event);
-      } else if (key === 'down' || key === 'up') {
-        _this.props.onClick();
       } else if (key === 'enter' && _this.props.onSubmit) {
         event.preventDefault();
 
@@ -234,11 +235,6 @@ var HiSelectInput = /*#__PURE__*/function (_React$PureComponent) {
       }
     };
 
-    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
-    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 

package/HiSelectableList/HiSelectableList.js

@@ -56,6 +56,12 @@ var styles = function styles(theme) {
     suggestionFocus: {
       backgroundColor: theme.palette.action.hover,
       fontWeight: theme.typography.fontWeightMedium
+    },
+    parentRoot: {
+      "&:focus": {
+        backgroundColor: theme.palette.action.hover,
+        fontWeight: theme.typography.fontWeightMedium
+      }
     }
   };
 };
@@ -92,7 +98,7 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiSelectableList);
-    _this = _super.call(this);
+    _this = _super.call(this, props);
 
     _this.handleSelect = function (item) {
       return function (event) {
@@ -131,6 +137,7 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
 
     _this.buildRecursiveListItem = function (item, index) {
       var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var group = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
       var _this$props = _this.props,
           checkedIcon = _this$props.checkedIcon,
           disabled = _this$props.disabled,
@@ -169,6 +176,12 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
         }
       }));
 
+      var handleKeyDown = function handleKeyDown() {
+        if (onKeyDown) {
+          onKeyDown();
+        }
+      };
+
       var itemComponent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
         key: item.id
       }, /*#__PURE__*/_react.default.createElement(_HiSelectableListItem.default, (0, _extends2.default)({}, others, {
@@ -179,16 +192,18 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
         icon: icon,
         level: noPadding ? 0 : level,
         onSelect: item.selectable !== false ? _this.handleSelect(item) : undefined,
-        onKeyDown: item.selectable !== false ? onKeyDown : undefined,
+        onKeyDown: item.selectable !== false ? handleKeyDown : undefined,
         onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
         ,
         item: item,
         classes: {
+          root: classes.parentRoot,
           listItem: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.suggestionFocus, index === suggestionFocusIndex))
         },
         collapseHeader: _this.props.collapseParent && item.children && item.children.length > 0,
-        opened: _this.state.openedParent === item.id
+        opened: _this.state.openedParent === item.id,
+        group: group
       }, item)), item.children && item.children.length > 0 && (_this.props.collapseParent && level === 0 ? /*#__PURE__*/_react.default.createElement(_Collapse.default, {
         id: "group-".concat(item.id),
         in: _this.state.openedParent === item.id,
@@ -197,7 +212,7 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
       }, item.children.filter(function (subItem) {
         return !(subItem.displayed === false);
       }).map(function (subItem) {
-        return _this.buildRecursiveListItem(subItem, index, level + 1);
+        return _this.buildRecursiveListItem(subItem, index, level + 1, item.id);
       })) : item.children.filter(function (subItem) {
         return !(subItem.displayed === false);
       }).map(function (subItem) {
@@ -240,20 +255,19 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
       return (0, _helpers.foldAccents)(a.label.toString().toLowerCase()) > (0, _helpers.foldAccents)(b.label.toString().toLowerCase()) ? 1 : -1;
     };
 
-    _this.state = {};
+    var openedParent;
 
     if (props.collapseParent) {
       if (props.selectedItemIdList[0]) {
-        _this.state = {
-          openedParent: findSelectedItemParent(props.itemList, props.selectedItemIdList[0])
-        };
+        openedParent = findSelectedItemParent(props.itemList, props.selectedItemIdList[0]);
       } else {
-        _this.state = {
-          openedParent: props.itemList[0].id
-        };
+        openedParent = props.itemList[0].id;
       }
     }
 
+    _this.state = {
+      openedParent: openedParent
+    };
     return _this;
   }
 

package/HiSelectableList/HiSelectableListItem.js

@@ -270,9 +270,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 
 exports.useStyles = useStyles;
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null);
+var _ref = /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null);
 
-var _ref3 = /*#__PURE__*/_react.default.createElement(_ArrowRight.default, null);
+var _ref2 = /*#__PURE__*/_react.default.createElement(_ArrowRight.default, null);
 
 function HiSelectableListItem(props) {
   var _classNames, _classNames3, _classNames4;
@@ -304,17 +304,19 @@ function HiSelectableListItem(props) {
       type = props.type,
       color = props.color,
       item = props.item,
-      opened = props.opened;
+      opened = props.opened,
+      group = props.group;
   var classes = useStyles(props);
   var ref = (0, _react.useRef)(null);
   var isHovering = !!hoverIcon ? (0, _reactUse.useHoverDirty)(ref) : false;
-  var onKeyDown = (0, _react.useCallback)(function (_ref) {
-    var code = _ref.code;
-
-    if (code === 'Space' || code === 'Enter') {
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.code === 'Space' || event.code === 'Enter') {
       event.preventDefault();
       event.stopPropagation();
-      if (item) onSelect(null, item);
+
+      if (item) {
+        onSelect(event, item);
+      }
     }
   }, [item]);
   (0, _reactUse.useEvent)('keydown', onKeyDown, ref.current); // Return simple loader list item
@@ -367,7 +369,8 @@ function HiSelectableListItem(props) {
     onClick: !disabled ? onSelect : undefined,
     style: {
       paddingLeft: "".concat(paddingLeft + level * 32, "px")
-    }
+    },
+    "data-group": group
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && typeof info === "undefined"))
   }, !hideCheckbox && !pinned && /*#__PURE__*/_react.default.createElement(_HiCheckbox.default, {
@@ -404,7 +407,7 @@ function HiSelectableListItem(props) {
     title: title
   }), collapseHeader && /*#__PURE__*/_react.default.createElement("span", {
     className: classes.rightIcon
-  }, opened ? _ref2 : _ref3))), /*#__PURE__*/_react.default.createElement("div", {
+  }, opened ? _ref : _ref2))), /*#__PURE__*/_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 && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))

package/HiTable/HiCellBuilder.js

@@ -163,7 +163,9 @@ var HiCellBuilder = /*#__PURE__*/function (_React$PureComponent) {
                   });
 
                 case cst.TYPE_DATE:
+                case cst.TYPE_MONTH:
                   return /*#__PURE__*/_react.default.createElement(_CellDate.default, {
+                    align: cell.align,
                     date: datacell.date,
                     displayTime: datacell.displayTime,
                     formatShort: datacell.formatShort,

package/HiTable/HiTableRow.js

@@ -120,7 +120,7 @@ var HiTableRow = /*#__PURE__*/function (_React$PureComponent) {
           height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
         },
         tabIndex: 0,
-        dataId: rowdata.rowId
+        "data-id": rowdata.rowId
       }, Object.keys(columns).map(function (column) {
         return /*#__PURE__*/_react.default.createElement(_HiCellBuilder.default, {
           key: columns[column].colId,

package/HiTable/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
+exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_MONTH = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -53,6 +53,8 @@ var TYPE_ICON = 'icon';
 exports.TYPE_ICON = TYPE_ICON;
 var TYPE_IMAGE = 'image';
 exports.TYPE_IMAGE = TYPE_IMAGE;
+var TYPE_MONTH = 'month';
+exports.TYPE_MONTH = TYPE_MONTH;
 var TYPE_NUMERIC = 'numeric';
 exports.TYPE_NUMERIC = TYPE_NUMERIC;
 var TYPE_RATE = 'rate';

package/es/HiCell/CellDate.js

@@ -33,7 +33,10 @@ var styles = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'pre',
-    width: '100%'
+    width: '100%',
+    textAlign: function textAlign(props) {
+      return props.align === 'right' ? 'right' : 'left';
+    }
   }
 };
 /**

package/es/HiCell/CellTextStyled.js

@@ -86,6 +86,9 @@ var CellTextStyled = function CellTextStyled(_ref) {
     styleRoot = (0, _objectSpread2.default)({}, styleRoot, {
       textAlign: 'right'
     });
+    styleColorLabel = (0, _objectSpread2.default)({}, styleColorLabel, {
+      justifyContent: 'flex-end'
+    });
   } else {
     styleRoot = (0, _objectSpread2.default)({}, styleRoot, {
       textAlign: 'left'

package/es/HiDatePicker/HiDatePicker.js

@@ -263,7 +263,8 @@ var HiDatePicker = /*#__PURE__*/function (_React$Component) {
           translations = _this$props.translations,
           value = _this$props.value,
           hideOnDayClick = _this$props.hideOnDayClick,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "format", "locale", "minimumDate", "onReset", "translations", "value", "hideOnDayClick"]);
+          HiInputProps = _this$props.HiInputProps,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "format", "locale", "minimumDate", "onReset", "translations", "value", "hideOnDayClick", "HiInputProps"]);
       var currentMonth = this.state.currentMonth;
       var today = (0, _momentTimezone.default)();
       var effectiveDisabledDays = (0, _objectSpread2.default)({}, disablePastDays && {
@@ -312,6 +313,11 @@ var HiDatePicker = /*#__PURE__*/function (_React$Component) {
           onSubmit: this.props.onSubmit
         }
       });
+
+      if (typeof HiInputProps !== "undefined") {
+        inputProps.HiInputProps = (0, _objectSpread2.default)({}, inputProps.HiInputProps, {}, HiInputProps);
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: classes.root,
         onKeyDown: this.handleKeyDown()

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -269,7 +269,7 @@ function buildDateRangeOptionByKey(key, t, format) {
         info = buildDateRangeInfo(t, from, to, format, {
           prefix: null,
           toNow: true,
-          toToday: false,
+          toToday: key === 1,
           displayDays: false,
           displayDayName: true
         });

package/es/HiDialog/HiDialog.js

@@ -52,7 +52,8 @@ var HiDialog = function HiDialog(props) {
       id = props.id,
       onClose = props.onClose,
       open = props.open,
-      title = props.title;
+      title = props.title,
+      closeBtn = props.closeBtn;
   var classes = useStyles(props);
   var handleClose = (0, _react.useCallback)(function () {
     if (onClose) {
@@ -68,9 +69,9 @@ var HiDialog = function HiDialog(props) {
     open: open
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.header
-  }, /*#__PURE__*/_react.default.createElement("p", {
+  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement("p", {
     className: classes.title
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
+  }, title) : title, closeBtn !== false && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.closeDiv
   }, /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
     id: "close-dialog-btn",

package/es/HiSelect/HiSelect.js

@@ -293,15 +293,6 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
     };
 
     _this.handleClick = function (event) {
-      if (event) {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (event.type === "keydown") {
-          return;
-        }
-      }
-
       if (_this.state.open) {
         _this.handleClose();
       } else if (_this.props.alert && !_this.state.alertOpen) {
@@ -387,7 +378,9 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (_this.inputEl) {
-        _this.inputEl.focus();
+        setTimeout(function () {
+          _this.inputEl.focus();
+        }, 100);
       }
     };
 
@@ -415,7 +408,16 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       var key = (0, _keycode.default)(event);
 
       if (!_this.state.alertOpen) {
-        if (key === 'esc' && _this.state.open) {
+        if (event.target === _this.inputEl && _this.state.open && key === 'down') {
+          // Focus on list 1st item
+          event.stopPropagation();
+          event.preventDefault();
+          var firstLi = document.querySelector("#".concat(_this.props.id, " + div ul > li"));
+
+          if (!!firstLi) {
+            firstLi.focus();
+          }
+        } else if (key === 'esc' && _this.state.open) {
           event.stopPropagation();
           event.preventDefault();
 
@@ -428,11 +430,32 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else if (key === 'space' && event.target !== _this.searchField) {
           event.preventDefault();
+        } else if (key === 'tab' && (_this.state.open || _this.state.alertOpen)) {
           event.stopPropagation();
 
-          _this.handleClick(event);
-        } else if (key === 'tab') {
           _this.handleClose();
+        } else if (key === "down" && event.target.id.includes("_subheader")) {
+          // Focus on parent, next item is child
+          if (document.querySelector("#group-".concat(event.target.id, " li:nth-child(1)"))) {
+            document.querySelector("#group-".concat(event.target.id, " li:nth-child(1)")).focus();
+          }
+        } else if (key === "down" && !event.target.nextSibling) {
+          var _document$getElementB, _document$getElementB2;
+
+          // Focus on parent, next item is child
+          if ((_document$getElementB = document.getElementById(event.target.dataset.group)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.nextSibling) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.nextSibling) {
+            document.getElementById(event.target.dataset.group).nextSibling.nextSibling.focus();
+          }
+        } else if (key === "up") {
+          if (event.target.previousSibling === null && !!event.target.dataset.group) {
+            // Previous item is parent item
+            document.getElementById(event.target.dataset.group).focus();
+          } else if (!!event.target.previousSibling && !event.target.dataset.group) {
+            // On parent, go to previous (last) child
+            if (event.target.previousSibling.querySelector("li:last-child")) {
+              event.target.previousSibling.querySelector("li:last-child").focus();
+            }
+          }
         }
       }
     };
@@ -468,9 +491,11 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
           value = _this$props2.value;
 
       if (!multiple) {
-        // single value
-        _this.handleClose();
-
+        // This is a fix to prevent select open after select => TODO improve ?
+        setTimeout(function () {
+          // single value
+          _this.handleClose();
+        }, 1);
         onChange(event, item.id, item);
       } else if (hasAll && item.id === '_all') {
         if (value.length === options.length) {

package/es/HiSelect/HiSelectInput.js

@@ -13,8 +13,6 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
@@ -167,19 +165,22 @@ var HiSelectInput = /*#__PURE__*/function (_React$PureComponent) {
 
   var _super = _createSuper(HiSelectInput);
 
-  function HiSelectInput(props) {
+  function HiSelectInput() {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiSelectInput);
-    _this = _super.call(this, props);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
 
     _this.handleKeyDown = function (event) {
       var key = (0, _keycode.default)(event);
 
       if (_this.props.onKeyDown) {
         _this.props.onKeyDown(event);
-      } else if (key === 'down' || key === 'up') {
-        _this.props.onClick();
       } else if (key === 'enter' && _this.props.onSubmit) {
         event.preventDefault();
 
@@ -234,11 +235,6 @@ var HiSelectInput = /*#__PURE__*/function (_React$PureComponent) {
       }
     };
 
-    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
-    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 

package/es/HiSelectableList/HiSelectableList.js

@@ -56,6 +56,12 @@ var styles = function styles(theme) {
     suggestionFocus: {
       backgroundColor: theme.palette.action.hover,
       fontWeight: theme.typography.fontWeightMedium
+    },
+    parentRoot: {
+      "&:focus": {
+        backgroundColor: theme.palette.action.hover,
+        fontWeight: theme.typography.fontWeightMedium
+      }
     }
   };
 };
@@ -92,7 +98,7 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiSelectableList);
-    _this = _super.call(this);
+    _this = _super.call(this, props);
 
     _this.handleSelect = function (item) {
       return function (event) {
@@ -131,6 +137,7 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
 
     _this.buildRecursiveListItem = function (item, index) {
       var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var group = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
       var _this$props = _this.props,
           checkedIcon = _this$props.checkedIcon,
           disabled = _this$props.disabled,
@@ -169,6 +176,12 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
         }
       }));
 
+      var handleKeyDown = function handleKeyDown() {
+        if (onKeyDown) {
+          onKeyDown();
+        }
+      };
+
       var itemComponent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
         key: item.id
       }, /*#__PURE__*/_react.default.createElement(_HiSelectableListItem.default, (0, _extends2.default)({}, others, {
@@ -179,16 +192,18 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
         icon: icon,
         level: noPadding ? 0 : level,
         onSelect: item.selectable !== false ? _this.handleSelect(item) : undefined,
-        onKeyDown: item.selectable !== false ? onKeyDown : undefined,
+        onKeyDown: item.selectable !== false ? handleKeyDown : undefined,
         onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
         ,
         item: item,
         classes: {
+          root: classes.parentRoot,
           listItem: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.suggestionFocus, index === suggestionFocusIndex))
         },
         collapseHeader: _this.props.collapseParent && item.children && item.children.length > 0,
-        opened: _this.state.openedParent === item.id
+        opened: _this.state.openedParent === item.id,
+        group: group
       }, item)), item.children && item.children.length > 0 && (_this.props.collapseParent && level === 0 ? /*#__PURE__*/_react.default.createElement(_Collapse.default, {
         id: "group-".concat(item.id),
         in: _this.state.openedParent === item.id,
@@ -197,7 +212,7 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
       }, item.children.filter(function (subItem) {
         return !(subItem.displayed === false);
       }).map(function (subItem) {
-        return _this.buildRecursiveListItem(subItem, index, level + 1);
+        return _this.buildRecursiveListItem(subItem, index, level + 1, item.id);
       })) : item.children.filter(function (subItem) {
         return !(subItem.displayed === false);
       }).map(function (subItem) {
@@ -240,20 +255,19 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
       return (0, _helpers.foldAccents)(a.label.toString().toLowerCase()) > (0, _helpers.foldAccents)(b.label.toString().toLowerCase()) ? 1 : -1;
     };
 
-    _this.state = {};
+    var openedParent;
 
     if (props.collapseParent) {
       if (props.selectedItemIdList[0]) {
-        _this.state = {
-          openedParent: findSelectedItemParent(props.itemList, props.selectedItemIdList[0])
-        };
+        openedParent = findSelectedItemParent(props.itemList, props.selectedItemIdList[0]);
       } else {
-        _this.state = {
-          openedParent: props.itemList[0].id
-        };
+        openedParent = props.itemList[0].id;
       }
     }
 
+    _this.state = {
+      openedParent: openedParent
+    };
     return _this;
   }
 

package/es/HiSelectableList/HiSelectableListItem.js

@@ -270,9 +270,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 
 exports.useStyles = useStyles;
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null);
+var _ref = /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null);
 
-var _ref3 = /*#__PURE__*/_react.default.createElement(_ArrowRight.default, null);
+var _ref2 = /*#__PURE__*/_react.default.createElement(_ArrowRight.default, null);
 
 function HiSelectableListItem(props) {
   var _classNames, _classNames3, _classNames4;
@@ -304,17 +304,19 @@ function HiSelectableListItem(props) {
       type = props.type,
       color = props.color,
       item = props.item,
-      opened = props.opened;
+      opened = props.opened,
+      group = props.group;
   var classes = useStyles(props);
   var ref = (0, _react.useRef)(null);
   var isHovering = !!hoverIcon ? (0, _reactUse.useHoverDirty)(ref) : false;
-  var onKeyDown = (0, _react.useCallback)(function (_ref) {
-    var code = _ref.code;
-
-    if (code === 'Space' || code === 'Enter') {
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.code === 'Space' || event.code === 'Enter') {
       event.preventDefault();
       event.stopPropagation();
-      if (item) onSelect(null, item);
+
+      if (item) {
+        onSelect(event, item);
+      }
     }
   }, [item]);
   (0, _reactUse.useEvent)('keydown', onKeyDown, ref.current); // Return simple loader list item
@@ -367,7 +369,8 @@ function HiSelectableListItem(props) {
     onClick: !disabled ? onSelect : undefined,
     style: {
       paddingLeft: "".concat(paddingLeft + level * 32, "px")
-    }
+    },
+    "data-group": group
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && typeof info === "undefined"))
   }, !hideCheckbox && !pinned && /*#__PURE__*/_react.default.createElement(_HiCheckbox.default, {
@@ -404,7 +407,7 @@ function HiSelectableListItem(props) {
     title: title
   }), collapseHeader && /*#__PURE__*/_react.default.createElement("span", {
     className: classes.rightIcon
-  }, opened ? _ref2 : _ref3))), /*#__PURE__*/_react.default.createElement("div", {
+  }, opened ? _ref : _ref2))), /*#__PURE__*/_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 && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))

package/es/HiTable/HiCellBuilder.js

@@ -163,7 +163,9 @@ var HiCellBuilder = /*#__PURE__*/function (_React$PureComponent) {
                   });
 
                 case cst.TYPE_DATE:
+                case cst.TYPE_MONTH:
                   return /*#__PURE__*/_react.default.createElement(_CellDate.default, {
+                    align: cell.align,
                     date: datacell.date,
                     displayTime: datacell.displayTime,
                     formatShort: datacell.formatShort,

package/es/HiTable/HiTableRow.js

@@ -120,7 +120,7 @@ var HiTableRow = /*#__PURE__*/function (_React$PureComponent) {
           height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
         },
         tabIndex: 0,
-        dataId: rowdata.rowId
+        "data-id": rowdata.rowId
       }, Object.keys(columns).map(function (column) {
         return /*#__PURE__*/_react.default.createElement(_HiCellBuilder.default, {
           key: columns[column].colId,

package/es/HiTable/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
+exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_MONTH = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -53,6 +53,8 @@ var TYPE_ICON = 'icon';
 exports.TYPE_ICON = TYPE_ICON;
 var TYPE_IMAGE = 'image';
 exports.TYPE_IMAGE = TYPE_IMAGE;
+var TYPE_MONTH = 'month';
+exports.TYPE_MONTH = TYPE_MONTH;
 var TYPE_NUMERIC = 'numeric';
 exports.TYPE_NUMERIC = TYPE_NUMERIC;
 var TYPE_RATE = 'rate';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
   "private": false,
-  "version": "3.7.5",
+  "version": "3.7.7",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",