@hipay/hipay-material-ui 3.7.3 → 3.7.5

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 _ref2 = /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null);
+
+var _ref3 = /*#__PURE__*/_react.default.createElement(_ArrowRight.default, null);
+
 function HiSelectableListItem(props) {
   var _classNames, _classNames3, _classNames4;
 
@@ -273,12 +296,15 @@ 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;
   var classes = useStyles(props);
   var ref = (0, _react.useRef)(null);
   var isHovering = !!hoverIcon ? (0, _reactUse.useHoverDirty)(ref) : false;
@@ -309,7 +335,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 +362,14 @@ 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")
     }
   }, /*#__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 +400,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 ? _ref2 : _ref3))), /*#__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 +425,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/hi-svg-icons/HiPrivate.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _pure = _interopRequireDefault(require("recompose/pure"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+
+var _styles = require("@material-ui/core/styles");
+
+/**
+ * @ignore - internal component.
+ */
+var HiPrivate = (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,
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
+    style: (0, _objectSpread2.default)({}, style, {
+      fontSize: props.size || 16
+    }),
+    color: props.color || theme.palette.neutral.main
+  }, other), /*#__PURE__*/_react.default.createElement("svg", {
+    id: "private",
+    "data-name": "private",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 275.3 360.62"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    className: "cls-1",
+    d: "M240.68,120.74q14.49,0,24.15,9.66t10.47,24.15V326.81q-.81,14.49-10.47,24.15t-24.15,9.66H34.61q-14.49,0-24.15-9.66T0,326.81V154.55q.8-14.49,10.46-24.15t24.15-9.66H51.52V86.13q.79-36.22,25.35-60.77T137.65,0q36.22.81,60.77,25.36t25.36,60.77v34.61Zm-103-86.13q-21.74.81-36.22,15.3T86.13,86.13v34.61h103V86.13q-.82-21.73-15.3-36.22T137.65,34.61Zm0,240.69q14.49-.8,24.15-10.47t9.66-24.15q0-14.49-9.66-24.15t-24.15-9.65q-14.49,0-24.15,9.65t-9.66,24.15q0,14.49,9.66,24.15T137.65,275.3Z",
+    fill: color
+  })));
+});
+HiPrivate.muiName = 'SvgIcon';
+var _default = HiPrivate;
+exports.default = _default;

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/HiPrivate.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _pure = _interopRequireDefault(require("recompose/pure"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+
+var _styles = require("@material-ui/core/styles");
+
+/**
+ * @ignore - internal component.
+ */
+var HiPrivate = (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,
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
+    style: (0, _objectSpread2.default)({}, style, {
+      fontSize: props.size || 16
+    }),
+    color: props.color || theme.palette.neutral.main
+  }, other), /*#__PURE__*/_react.default.createElement("svg", {
+    id: "private",
+    "data-name": "private",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 275.3 360.62"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    className: "cls-1",
+    d: "M240.68,120.74q14.49,0,24.15,9.66t10.47,24.15V326.81q-.81,14.49-10.47,24.15t-24.15,9.66H34.61q-14.49,0-24.15-9.66T0,326.81V154.55q.8-14.49,10.46-24.15t24.15-9.66H51.52V86.13q.79-36.22,25.35-60.77T137.65,0q36.22.81,60.77,25.36t25.36,60.77v34.61Zm-103-86.13q-21.74.81-36.22,15.3T86.13,86.13v34.61h103V86.13q-.82-21.73-15.3-36.22T137.65,34.61Zm0,240.69q14.49-.8,24.15-10.47t9.66-24.15q0-14.49-9.66-24.15t-24.15-9.65q-14.49,0-24.15,9.65t-9.66,24.15q0,14.49,9.66,24.15T137.65,275.3Z",
+    fill: color
+  })));
+});
+HiPrivate.muiName = 'SvgIcon';
+var _default = HiPrivate;
+exports.default = _default;

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.3",
+  "version": "3.7.5",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",