@hipay/hipay-material-ui 3.7.4 → 3.7.6

package/es/HiSelect/HiSelect.js

@@ -185,6 +185,18 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       };
     };
 
+    _this.findRecursively = function (arr, id) {
+      for (var i = 0; i < arr.length; i++) {
+        if (arr[i].id === id) {
+          return arr[i];
+        } else if (arr[i].children && arr[i].children.length) {
+          var found = _this.findRecursively(arr[i].children, id);
+
+          if (found) return found;
+        }
+      }
+    };
+
     _this.buildInputValue = function (options) {
       var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var loading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -204,9 +216,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       } else if (value.length > 1) {
         inputValue = translations.n_items_selected.replace('%s', value.length);
       } else if (value.length === 1) {
-        var item = options.find(function (o) {
-          return o.id === value[0];
-        });
+        var item = _this.findRecursively(options, value[0]);
 
         if (item === undefined) {
           inputValue = translations.one_item_selected;
@@ -282,7 +292,7 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       }
     };
 
-    _this.handleClick = function () {
+    _this.handleClick = function (event) {
       if (_this.state.open) {
         _this.handleClose();
       } else if (_this.props.alert && !_this.state.alertOpen) {
@@ -368,7 +378,9 @@ var HiSelect = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (_this.inputEl) {
-        _this.inputEl.focus();
+        setTimeout(function () {
+          _this.inputEl.focus();
+        }, 100);
       }
     };
 
@@ -396,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();
 
@@ -409,10 +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();
-        } 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();
+            }
+          }
         }
       }
     };
@@ -448,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

@@ -27,6 +27,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));
+
 var _List = _interopRequireDefault(require("@material-ui/core/List"));
 
 var _styles = require("@material-ui/core/styles");
@@ -54,9 +56,32 @@ 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
+      }
     }
   };
 };
+
+exports.styles = styles;
+
+var findSelectedItemParent = function findSelectedItemParent(arr, id) {
+  if (id) {
+    var res = arr.find(function (p) {
+      var _p$children;
+
+      return (_p$children = p.children) === null || _p$children === void 0 ? void 0 : _p$children.map(function (o) {
+        return o.id;
+      }).includes(id);
+    });
+    if (res) return res.id;
+  }
+
+  return null;
+};
 /**
  * Construit une liste d'item sélectionnable (avec checkbox)
  * - la navigation au clavier est gérée par l'event KeyDown
@@ -64,27 +89,28 @@ var styles = function styles(theme) {
  */
 
 
-exports.styles = styles;
-
 var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HiSelectableList, _React$PureComponent);
 
   var _super = _createSuper(HiSelectableList);
 
-  function HiSelectableList() {
+  function HiSelectableList(props) {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiSelectableList);
-
-    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 = _super.call(this, props);
 
     _this.handleSelect = function (item) {
       return function (event) {
-        _this.props.onSelect(event, item);
+        if (_this.props.collapseParent && item.children) {
+          _this.setState(function (prevState) {
+            return {
+              openedParent: prevState.openedParent === item.id ? null : item.id
+            };
+          });
+        } else {
+          _this.props.onSelect(event, item);
+        }
       };
     };
 
@@ -111,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,
@@ -125,7 +152,8 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
           onKeyUp = _this$props.onKeyUp,
           suggestionFocusIndex = _this$props.suggestionFocusIndex,
           classes = _this$props.classes,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes"]);
+          noPadding = _this$props.noPadding,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes", "noPadding"]);
 
       if (sort && item.children) {
         item.children.sort(_this.compareItem);
@@ -148,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, {
@@ -156,21 +190,34 @@ var HiSelectableList = /*#__PURE__*/function (_React$PureComponent) {
         hideCheckbox: hideCheckbox,
         hoverIcon: hoverIcon,
         icon: icon,
-        level: level,
+        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))
-        }
-      }, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
+        },
+        collapseHeader: _this.props.collapseParent && item.children && item.children.length > 0,
+        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,
+        timeout: "auto",
+        unmountOnExit: true
+      }, item.children.filter(function (subItem) {
+        return !(subItem.displayed === false);
+      }).map(function (subItem) {
+        return _this.buildRecursiveListItem(subItem, index, level + 1, item.id);
+      })) : item.children.filter(function (subItem) {
         return !(subItem.displayed === false);
       }).map(function (subItem) {
         return _this.buildRecursiveListItem(subItem, index, level + 1);
-      }));
+      })));
 
       if (lazy) {
         return /*#__PURE__*/_react.default.createElement(_reactLazyload.default, {
@@ -208,6 +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;
     };
 
+    var openedParent;
+
+    if (props.collapseParent) {
+      if (props.selectedItemIdList[0]) {
+        openedParent = findSelectedItemParent(props.itemList, props.selectedItemIdList[0]);
+      } else {
+        openedParent = props.itemList[0].id;
+      }
+    }
+
+    _this.state = {
+      openedParent: openedParent
+    };
     return _this;
   }
 
@@ -289,7 +349,8 @@ HiSelectableList.defaultProps = {
   lazy: true,
   selectedItemIdList: [],
   sort: false,
-  sortAppendList: ['_all']
+  sortAppendList: ['_all'],
+  collapseParent: false
 };
 
 var _default = (0, _styles.withStyles)(styles, {

package/es/HiSelectableList/HiSelectableListItem.js

@@ -39,6 +39,10 @@ var _HiLoader = _interopRequireDefault(require("../HiLoader"));
 
 var _helpers = require("../utils/helpers");
 
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+
+var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
+
 var useItemLabelStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     label: {
@@ -57,7 +61,8 @@ function ItemLabel(props) {
   var color = props.color,
       label = props.label,
       labelHighlight = props.labelHighlight,
-      selected = props.selected;
+      selected = props.selected,
+      title = props.title;
   var classes = useItemLabelStyles(props);
 
   if (labelHighlight) {
@@ -90,7 +95,7 @@ function ItemLabel(props) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.label,
-    title: label
+    title: title || label
   }, label);
 }
 
@@ -123,16 +128,20 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         }
       },
       '&:focus': {
-        '&:not($disabled):not($pinned)': {
+        '&:not($disabled):not($pinned):not($collapseHeader)': {
           backgroundColor: theme.palette.action.hover
         },
         outline: 'none'
+      },
+      '&$collapseHeader': {
+        minHeight: 32,
+        lineHeight: "32px"
       }
     },
     listItemWithoutSecondaryInline: {},
     listItemInlineWithInfoWithoutSecondary: {},
     listItemHover: {
-      '&:hover:not($disabled):not($pinned)': {
+      '&:hover:not($disabled):not($pinned):not($collapseHeader)': {
         backgroundColor: theme.palette.action.hover,
         fontWeight: theme.typography.fontWeightMedium
       }
@@ -154,6 +163,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       display: 'inherit',
       backgroundColor: theme.palette.background3
     },
+    collapseHeader: {
+      zIndex: 1,
+      display: 'inherit',
+      backgroundColor: theme.palette.background3
+    },
     thin: {
       fontWeight: theme.typography.fontWeightLight
     },
@@ -241,7 +255,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     infosInlineWithoutSecondary: {},
     infosWithSecondaryInline: {},
-    infosWithoutSecondaryInline: {}
+    infosWithoutSecondaryInline: {},
+    rightIcon: {
+      position: "absolute",
+      right: 12,
+      top: 8
+    }
   };
 });
 /**
@@ -251,6 +270,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 
 exports.useStyles = useStyles;
 
+var _ref = /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_ArrowRight.default, null);
+
 function HiSelectableListItem(props) {
   var _classNames, _classNames3, _classNames4;
 
@@ -273,22 +296,27 @@ function HiSelectableListItem(props) {
       labelHighlight = props.labelHighlight,
       paddingLeft = props.paddingLeft,
       pinned = props.pinned,
+      collapseHeader = props.collapseHeader,
       secondaryInline = props.secondaryInline,
       secondaryLabel = props.secondaryLabel,
       thin = props.thin,
+      title = props.title,
       type = props.type,
       color = props.color,
-      item = props.item;
+      item = props.item,
+      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
@@ -309,7 +337,7 @@ function HiSelectableListItem(props) {
     displayedIcon = icon;
   }
 
-  var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+  var ListItemComponentName = pinned || collapseHeader ? _ListSubheader.default : _ListItem.default;
   var itemIcon;
 
   if (displayedIcon) {
@@ -336,14 +364,15 @@ function HiSelectableListItem(props) {
     classes: {
       root: classes.root
     },
-    className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
+    className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.collapseHeader, collapseHeader), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && typeof info !== "undefined" && !secondaryLabel), _classNames)),
     disabled: disabled,
     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 && !info))
+    className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && typeof info === "undefined"))
   }, !hideCheckbox && !pinned && /*#__PURE__*/_react.default.createElement(_HiCheckbox.default, {
     tabIndex: 0,
     classes: {
@@ -374,12 +403,15 @@ function HiSelectableListItem(props) {
     color: color,
     label: label,
     labelHighlight: labelHighlight,
-    selected: selected
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+    selected: selected,
+    title: title
+  }), collapseHeader && /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.rightIcon
+  }, 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))
-  }, secondaryLabel), !!info && /*#__PURE__*/_react.default.createElement("span", {
+  }, secondaryLabel), typeof info !== "undefined" && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.info)
   }, info)));
 }
@@ -396,7 +428,8 @@ HiSelectableListItem.defaultProps = {
   pinned: false,
   secondaryInline: true,
   selected: false,
-  thin: false
+  thin: false,
+  opened: false
 };
 var _default = HiSelectableListItem;
 exports.default = _default;

package/es/HiSwitch/HiSwitch.js

@@ -21,6 +21,8 @@ var _SwitchBase = _interopRequireDefault(require("@material-ui/core/internal/Swi
 
 var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
 var _helpers = require("../utils/helpers");
 
 var _styles = require("@material-ui/core/styles");
@@ -83,6 +85,9 @@ var styles = function styles(theme) {
         opacity: theme.palette.type === 'light' ? 0.12 : 0.1
       }
     },
+    iconNotChecked: {
+      color: "#CBCBCB"
+    },
     iconChecked: {},
     iconCheckedPrimary: {
       backgroundColor: theme.palette.primary.main,
@@ -165,9 +170,13 @@ function HiSwitch(props) {
       disabled = props.disabled,
       other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "checked", "color", "disabled"]);
   var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
-  var iconClass = (0, _classnames.default)(classes.icon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.iconChecked, checked), (0, _defineProperty2.default)(_classNames, classes.iconCheckedNeutral, !disabled && checked && !isHiColor), (0, _defineProperty2.default)(_classNames, classes["iconChecked".concat((0, _helpers.capitalize)(color))], !disabled && checked && isHiColor), (0, _defineProperty2.default)(_classNames, classes.iconDisabled, disabled), _classNames));
+  var iconClass = (0, _classnames.default)(classes.icon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.iconNotChecked, !checked), (0, _defineProperty2.default)(_classNames, classes.iconChecked, checked), (0, _defineProperty2.default)(_classNames, classes.iconCheckedNeutral, !disabled && checked && !isHiColor), (0, _defineProperty2.default)(_classNames, classes["iconChecked".concat((0, _helpers.capitalize)(color))], !disabled && checked && isHiColor), (0, _defineProperty2.default)(_classNames, classes.iconDisabled, disabled), _classNames));
+
+  var icon = /*#__PURE__*/_react.default.createElement(_Close.default, {
+    className: iconClass
+  });
 
-  var icon = /*#__PURE__*/_react.default.createElement(_Check.default, {
+  var checkedIcon = /*#__PURE__*/_react.default.createElement(_Check.default, {
     className: iconClass
   });
 
@@ -181,7 +190,7 @@ function HiSwitch(props) {
       checked: isHiColor && !disabled ? classes["checked".concat((0, _helpers.capitalize)(color))] : classes.checkedNeutral,
       disabled: classes.disabled
     },
-    checkedIcon: icon,
+    checkedIcon: checkedIcon,
     checked: checked,
     disabled: disabled,
     inputProps: {

package/es/HiTable/HiCellBuilder.js

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

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

@@ -149,6 +149,12 @@ Object.defineProperty(exports, "HiPriceGrid", {
     return _HiPriceGrid.default;
   }
 });
+Object.defineProperty(exports, "HiPrivate", {
+  enumerable: true,
+  get: function get() {
+    return _HiPrivate.default;
+  }
+});
 Object.defineProperty(exports, "HiRoute", {
   enumerable: true,
   get: function get() {
@@ -276,6 +282,8 @@ var _HiPermission = _interopRequireDefault(require("./HiPermission"));
 
 var _HiPriceGrid = _interopRequireDefault(require("./HiPriceGrid"));
 
+var _HiPrivate = _interopRequireDefault(require("./HiPrivate"));
+
 var _HiRoute = _interopRequireDefault(require("./HiRoute"));
 
 var _HiRouteMenu = _interopRequireDefault(require("./HiRouteMenu"));

package/hi-svg-icons/index.js

@@ -149,6 +149,12 @@ Object.defineProperty(exports, "HiPriceGrid", {
     return _HiPriceGrid.default;
   }
 });
+Object.defineProperty(exports, "HiPrivate", {
+  enumerable: true,
+  get: function get() {
+    return _HiPrivate.default;
+  }
+});
 Object.defineProperty(exports, "HiRoute", {
   enumerable: true,
   get: function get() {
@@ -276,6 +282,8 @@ var _HiPermission = _interopRequireDefault(require("./HiPermission"));
 
 var _HiPriceGrid = _interopRequireDefault(require("./HiPriceGrid"));
 
+var _HiPrivate = _interopRequireDefault(require("./HiPrivate"));
+
 var _HiRoute = _interopRequireDefault(require("./HiRoute"));
 
 var _HiRouteMenu = _interopRequireDefault(require("./HiRouteMenu"));

package/package.json

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