@hipay/hipay-material-ui 3.3.0 → 3.4.1

package/HiCell/CellNumeric.js

@@ -23,10 +23,15 @@ var _styles = require("@material-ui/core/styles");
 
 var _helpers = require("../utils/helpers");
 
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
 var styles = function styles() {
   return {
     wrapper: {
       textAlign: 'right'
+    },
+    button: {
+      padding: '1px 5px'
     }
   };
 };
@@ -56,7 +61,10 @@ function (_React$PureComponent) {
           locale = _this$props.locale,
           currency = _this$props.currency,
           view = _this$props.view,
-          precision = _this$props.precision;
+          precision = _this$props.precision,
+          isButton = _this$props.isButton,
+          onClick = _this$props.onClick,
+          rowId = _this$props.rowId;
       var displayedValue = '';
       var title = '';
 
@@ -68,10 +76,21 @@ function (_React$PureComponent) {
         title = (0, _helpers.formatNumber)(value, 'l', locale, precision);
       }
 
+      var content = displayedValue;
+
+      if (isButton) {
+        content = _react.default.createElement(_HiButton.default, {
+          onClick: onClick(rowId),
+          size: "small",
+          className: classes.button,
+          variant: "text"
+        }, displayedValue);
+      }
+
       return _react.default.createElement("div", {
         className: classes.wrapper,
         title: title
-      }, displayedValue);
+      }, content);
     }
   }]);
   return CellNumeric;

package/HiCell/CellText.js

@@ -141,7 +141,8 @@ function (_React$Component) {
           classes = _this$props.classes,
           label = _this$props.label,
           ellipsis = _this$props.ellipsis,
-          color = _this$props.color;
+          color = _this$props.color,
+          title = _this$props.title;
       var start;
       var end;
       var valueElement = '';
@@ -162,7 +163,8 @@ function (_React$Component) {
           valueElement = _react.default.createElement("div", {
             ref: function ref(div) {
               _this2.cellText = div;
-            }
+            },
+            title: title
           }, _react.default.createElement("span", {
             className: classes.rightEllipsisSpan
           }, "".concat(start, " ")), _react.default.createElement("span", {
@@ -177,7 +179,8 @@ function (_React$Component) {
           valueElement = _react.default.createElement("div", {
             ref: function ref(div) {
               _this2.cellText = div;
-            }
+            },
+            title: title
           }, _react.default.createElement("span", {
             className: classes.noEllipsisSpan
           }, start), _react.default.createElement("span", {
@@ -194,7 +197,8 @@ function (_React$Component) {
             className: classes.leftEllipsisSpan,
             style: {
               width: '100%'
-            }
+            },
+            title: title
           }, valueString);
           break;
 
@@ -208,7 +212,8 @@ function (_React$Component) {
             className: classes.rightEllipsisSpan,
             style: {
               width: '100%'
-            }
+            },
+            title: title
           }, valueString);
           break;
       }

package/HiCell/CellTextStyled.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
@@ -45,9 +47,11 @@ var styleButton = {
  * @param label
  * @param color
  * @param isButton
+ * @param onClick
  * @param value
  * @param active
  * @param title
+ * @param align
  * @returns {*}
  * @constructor
  */
@@ -62,7 +66,9 @@ var CellTextStyled = function CellTextStyled(_ref) {
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title;
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align;
   var valueString = label ? label.toString() : value.toString();
 
   if (isButton) {
@@ -75,6 +81,16 @@ var CellTextStyled = function CellTextStyled(_ref) {
     }, valueString);
   }
 
+  if (align === 'right') {
+    styleRoot = (0, _objectSpread2.default)({}, styleRoot, {
+      textAlign: 'right'
+    });
+  } else {
+    styleRoot = (0, _objectSpread2.default)({}, styleRoot, {
+      textAlign: 'left'
+    });
+  }
+
   return _react.default.createElement("div", {
     style: styleRoot,
     title: title || valueString
@@ -82,7 +98,8 @@ var CellTextStyled = function CellTextStyled(_ref) {
     style: styleColorLabel,
     label: valueString,
     color: color,
-    active: active
+    active: active,
+    fontSize: 13
   }) : _react.default.createElement("div", {
     style: styleLabel
   }, valueString));

package/HiChip/HiChip.js

@@ -173,6 +173,27 @@ var HiChip = function HiChip(props) {
     }
   }
 
+  var chipLabelIcon;
+
+  if (labelIcon) {
+    var _iconProps = {
+      className: classes.icon,
+      id: "".concat(id, "-labelIcon"),
+      size: iconSize,
+      title: titleIcon,
+      tabIndex: -1
+    };
+
+    if (typeof labelIcon === 'string') {
+      chipLabelIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: labelIcon
+      }, _iconProps));
+    } else if ((0, _typeof2.default)(labelIcon) === 'object') {
+      chipLabelIcon = (0, _objectSpread2.default)({}, labelIcon);
+      chipLabelIcon.props = (0, _objectSpread2.default)({}, _iconProps);
+    }
+  }
+
   return _react.default.createElement("div", {
     id: id,
     role: 'button',
@@ -198,14 +219,7 @@ var HiChip = function HiChip(props) {
       }
     },
     title: titleImg
-  }), labelIcon && _react.default.createElement(_HiIcon.default, {
-    className: (0, _classnames.default)(classes.icon),
-    id: "".concat(id, "-labelIcon"),
-    icon: labelIcon,
-    size: iconSize,
-    title: titleIcon,
-    tabIndex: -1
-  }), onPrevious && _react.default.createElement(_HiIcon.default, {
+  }), labelIcon && chipLabelIcon, onPrevious && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.navigate),
     id: "".concat(id, "-previous"),
     icon: "arrow_left",

package/HiDatePicker/HiDateRangeSelector.js

@@ -378,8 +378,8 @@ function (_React$Component) {
       });
 
       if (selectedOption) {
-        this.props.onChange('from', new Date(selectedOption.from.format('YYYY-MM-DD HH:mm:ss')));
-        this.props.onChange('to', new Date(selectedOption.to.format('YYYY-MM-DD HH:mm:ss')));
+        this.props.onChange('from', selectedOption.from.toDate());
+        this.props.onChange('to', selectedOption.to.toDate());
         this.props.onChange('fromError', false);
         this.props.onChange('toError', false);
       }

package/HiExpansionPanel/HiExpansionPanel.js

@@ -49,7 +49,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       borderBottom: '1px solid #E3E6E7',
       height: 48,
       minHeight: 48,
-      padding: '0 0 0 8px',
+      padding: 0,
       '&$expanded': {
         minHeight: 48
       }

package/HiIconButton/HiIconButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = exports.useStyles = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -24,81 +24,56 @@ var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
 // @inheritedComponent IconButton
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     label: {},
-    positive: {
-      color: theme.palette.positive.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.positive.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
-    negative: {
-      color: theme.palette.negative.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.negative.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
-    middle: {
-      color: theme.palette.middle.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.middle.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
+    rootCustomColor: function rootCustomColor(props) {
+      var color;
+
+      if (theme.palette[props.color]) {
+        color = theme.palette[props.color].main;
+      } else if (props.color.charAt(0) === "#") {
+        color = props.color;
       }
-    },
-    neutral: {
-      color: theme.palette.neutral.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
+
+      if (!color) return {};
+      return {
+        color: color,
+        '&:hover': {
+          backgroundColor: (0, _colorManipulator.fade)(color, theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
         }
-      }
+      };
     }
   };
-};
-
-exports.styles = styles;
+});
+exports.useStyles = useStyles;
 
 function HiIconButton(props) {
-  var _classNames;
-
   var children = props.children,
-      classes = props.classes,
       className = props.className,
       color = props.color,
-      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color"]);
-  var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
-  var buttonClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.negative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.middle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.neutral, color === 'neutral'), _classNames));
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "color"]);
+  var classes = useStyles(props);
+  var isHexColor = color.charAt(0) === "#";
+  var isExtendedColor = ['positive', 'negative', 'middle', 'neutral'].includes(color);
+  var isCustomColor = isHexColor || isExtendedColor;
+  var rootClassNames = (0, _classnames.default)((0, _defineProperty2.default)({}, classes.rootCustomColor, isCustomColor));
   return _react.default.createElement(_IconButton.default, (0, _extends2.default)({
     className: className,
     classes: {
-      root: buttonClassNames,
+      root: rootClassNames,
       label: classes.label
     },
-    color: hcolor
+    color: isCustomColor ? 'inherit' : color
   }, other), children);
 }
 
 HiIconButton.defaultProps = {
   color: 'default'
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiIconButton'
-})(HiIconButton);
-
+var _default = HiIconButton;
 exports.default = _default;

package/HiListItemLink/HiListItemLink.js

@@ -19,14 +19,6 @@ var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
 
 var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
 
-var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
-
-var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
-
-var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
-
-var _RemoveCircle = _interopRequireDefault(require("@material-ui/icons/RemoveCircle"));
-
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     root: function root(props) {
@@ -78,55 +70,15 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var StatusIcon = function StatusIcon(_ref) {
-  var disabled = _ref.disabled,
-      status = _ref.status;
-  var theme = (0, _styles.useTheme)();
-  var Icon, color;
-
-  switch (status) {
-    case "done":
-      Icon = _CheckCircle.default;
-      color = theme.palette.positive.main;
-      break;
-
-    case "error":
-      Icon = _Cancel.default;
-      color = theme.palette.negative.main;
-      break;
-
-    case "warning":
-      Icon = _Error.default;
-      color = theme.palette.middle.main;
-      break;
-
-    case "in_progress":
-      Icon = _RemoveCircle.default;
-      color = theme.palette.primary.main;
-      break;
-
-    default:
-      return null;
-  }
-
-  if (disabled) {
-    color = theme.palette.neutral.light;
-  }
-
-  return _react.default.createElement(Icon, {
-    htmlColor: color
-  });
-};
-
-var _ref2 = _react.default.createElement(_ArrowRight.default, null);
+var _ref = _react.default.createElement(_ArrowRight.default, null);
 
 var HiListItemLink = _react.default.forwardRef(function (props, ref) {
   var disabled = props.disabled,
       info = props.info,
       primary = props.primary,
       secondary = props.secondary,
-      status = props.status,
-      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "info", "primary", "secondary", "status"]);
+      icon = props.icon,
+      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "info", "primary", "secondary", "icon"]);
   var classes = useStyles(props);
   return _react.default.createElement(_ListItem.default, (0, _extends2.default)({
     ref: ref,
@@ -140,12 +92,15 @@ var HiListItemLink = _react.default.forwardRef(function (props, ref) {
     className: classes.secondary
   }, secondary), info && _react.default.createElement("div", {
     className: classes.info
-  }, info), status && _react.default.createElement(StatusIcon, {
-    disabled: disabled,
-    status: status
-  }), _ref2);
+  }, info), icon, _ref);
 });
 
-HiListItemLink.defaultProps = {};
+HiListItemLink.defaultProps = {
+  disabled: false,
+  info: null,
+  onClick: null,
+  secondary: null,
+  icon: null
+};
 var _default = HiListItemLink;
 exports.default = _default;

package/HiStepper/DefaultIndicator.js

@@ -11,15 +11,33 @@ var _react = _interopRequireDefault(require("react"));
 
 var _SvgIcon = _interopRequireDefault(require("@material-ui/core/SvgIcon"));
 
-var _ref = _react.default.createElement(_SvgIcon.default, null, _react.default.createElement("circle", {
+var _styles = require("@material-ui/core/styles");
+
+/**
+ * Custom style for SvgIcon
+ */
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      width: 20,
+      height: 20
+    }
+  };
+});
+
+var _ref = _react.default.createElement("circle", {
   cx: "10",
   cy: "10",
-  r: "3",
+  r: "2",
   fill: "white"
-}));
+});
 
 var DefaultIndicator = function DefaultIndicator() {
-  return _ref;
+  var classes = useStyles();
+  return _react.default.createElement(_SvgIcon.default, {
+    className: classes.root,
+    viewBox: "0 0 20 20"
+  }, _ref);
 };
 
 var _default = DefaultIndicator;

package/HiStepper/HiStep.js

@@ -50,10 +50,9 @@ var HiStepIcon = function HiStepIcon(_ref) {
       borderRadius: "50%",
       width: 20,
       height: 20,
-      padding: 2,
       lineHeight: "20px",
       fontWeight: 600,
-      fontSize: 14
+      fontSize: 13
     };
   }, [color]); // get component from status
 
@@ -101,7 +100,7 @@ var useStepButtonStyle = (0, _styles.makeStyles)(function (theme) {
 var useStepContentStyle = (0, _styles.makeStyles)(function (theme) {
   return {
     root: {
-      marginLeft: 11,
+      marginLeft: 9,
       marginTop: 0,
       textAlign: "left",
       borderLeft: "2px solid ".concat(theme.palette.neutral.light)
@@ -119,7 +118,8 @@ var useStepLabelStyle = (0, _styles.makeStyles)(function (theme) {
   return {
     label: (0, _objectSpread2.default)({}, theme.typography.button, {
       fontWeight: '600 !important',
-      color: "inherit !important"
+      color: "inherit !important",
+      fontSize: '13px'
     }),
     active: {},
     completed: {}

package/HiStepper/HiStepper.js

@@ -26,7 +26,7 @@ var HiStepConnector = (0, _styles.withStyles)(function (theme) {
       backgroundColor: theme.palette.neutral.light,
       borderRadius: 2,
       width: 2,
-      marginLeft: -1,
+      marginLeft: -3,
       marginTop: -1
     }
   };