@hipay/hipay-material-ui 2.3.5 → 3.1.0

package/HiPin/HiPin.js

@@ -5,9 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+exports.default = exports.useStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -17,7 +15,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _styles = require("@material-ui/core/styles");
 
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     root: {
       display: 'inline-block',
@@ -62,7 +60,7 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.contrastText
     }
   };
-};
+});
 /**
  * HiPins
  *
@@ -72,33 +70,27 @@ var styles = function styles(theme) {
  *
  */
 
-
-exports.styles = styles;
+exports.useStyles = useStyles;
 
 function HiPin(props) {
   var _classNames;
 
-  var classes = props.classes,
-      children = props.children,
+  var children = props.children,
       color = props.color,
       onClick = props.onClick,
       className = props.className;
+  var classes = useStyles(props);
   var pinClass = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.clickable, onClick), (0, _defineProperty2.default)(_classNames, classes.primary, color === 'primary'), (0, _defineProperty2.default)(_classNames, classes.secondary, color === 'secondary'), (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), className);
-  return _react.default.createElement("div", (0, _extends2.default)({
-    className: pinClass
-  }, onClick && {
+  return _react.default.createElement("div", {
+    className: pinClass,
     onClick: onClick,
-    role: 'button'
-  }), children);
+    role: onClick ? 'button' : undefined
+  }, children);
 }
 
 HiPin.defaultProps = {
   color: 'default'
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiPin'
-})(HiPin);
-
+HiPin.useStyles = useStyles;
+var _default = HiPin;
 exports.default = _default;

package/HiSelect/HiSelect.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
@@ -145,11 +147,11 @@ var HiSelect =
 function (_React$PureComponent) {
   (0, _inherits2.default)(HiSelect, _React$PureComponent);
 
-  function HiSelect(props) {
+  function HiSelect(_props) {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiSelect);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, props));
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, _props));
 
     _this.buildSelectProps = function (options) {
       var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -235,9 +237,9 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnFirstItem = function () {
-      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
+      if (_this.overlay && _this.overlay.querySelector('li:not([tabindex^="-"])')) {
         setTimeout(function () {
-          var item = _this.overlay.getElementsByTagName('li')[0];
+          var item = _this.overlay.querySelector('li:not([tabindex^="-"])');
 
           item.focus();
         }, 1);
@@ -310,16 +312,16 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnSelectedItem = function (selectedValue) {
-      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
+      if (_this.overlay && _this.overlay.querySelector('li:not([tabindex^="-"])')) {
         setTimeout(function () {
           if (_this.overlay) {
             // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-            var item = _this.overlay.getElementsByTagName('li')[0];
+            var item = _this.overlay.querySelector('li:not([tabindex^="-"])');
 
             if (selectedValue && typeof selectedValue === 'string') {
               item = _this.overlay.getElementsByTagName('li')[selectedValue];
             } else if (selectedValue && typeof selectedValue === 'number') {
-              item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
+              item = _this.overlay.querySelector('li:not([tabindex^="-"])')[selectedValue - 1];
             }
 
             if (item) {
@@ -525,12 +527,42 @@ function (_React$PureComponent) {
       return itemListLength;
     };
 
+    _this.renderScrollbarTrackHorizontal = function (props) {
+      var style = props.style,
+          otherProps = (0, _objectWithoutProperties2.default)(props, ["style"]);
+      var inlineStyle = (0, _objectSpread2.default)({}, style, {
+        zIndex: 10,
+        right: 2,
+        bottom: 2,
+        left: 2,
+        borderRadius: 3
+      });
+      return _react.default.createElement("div", (0, _extends2.default)({}, props, {
+        style: inlineStyle
+      }));
+    };
+
+    _this.renderScrollbarTrackVertical = function (props) {
+      var style = props.style,
+          otherProps = (0, _objectWithoutProperties2.default)(props, ["style"]);
+      var inlineStyle = (0, _objectSpread2.default)({}, style, {
+        zIndex: 10,
+        right: 2,
+        bottom: 2,
+        top: 2,
+        borderRadius: 3
+      });
+      return _react.default.createElement("div", (0, _extends2.default)({}, props, {
+        style: inlineStyle
+      }));
+    };
+
     _this.state = {
       alertOpen: false,
       open: false,
       focused: false,
-      searchValue: props.searchValue ? undefined : '',
-      suggestions: props.options,
+      searchValue: _props.searchValue ? undefined : '',
+      suggestions: _props.options,
       openDown: true,
       overlayWidth: 0
     };
@@ -672,6 +704,8 @@ function (_React$PureComponent) {
           } : {},
           className: classes.paper
         }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
+          renderTrackHorizontal: _this2.renderScrollbarTrackHorizontal,
+          renderTrackVertical: _this2.renderScrollbarTrackVertical,
           ref: function ref(contentEl) {
             _this2.optionsContent = contentEl;
           },

package/HiSelectableList/HiSelectableListItem.js

@@ -55,7 +55,7 @@ var PureListItem = (0, _pure.default)(_ListItem.default);
 var styles = function styles(theme) {
   return {
     root: {
-      paddingLeft: 4
+      paddingLeft: theme.spacing(1)
     },
     listItem: {
       backgroundColor: theme.palette.background3,
@@ -64,8 +64,10 @@ var styles = function styles(theme) {
       fontWeight: theme.typography.fontWeightRegular,
       maxHeight: 56,
       display: 'inline-flex',
-      alignItems: 'center',
-      cursor: 'pointer',
+      alignItems: "center",
+      "&:not($disabled):not($pinned)": {
+        cursor: 'pointer'
+      },
       '&$listItemInlineWithInfoWithoutSecondary': {
         justifyContent: 'space-between'
       },
@@ -79,7 +81,9 @@ var styles = function styles(theme) {
         }
       },
       '&:focus': {
-        backgroundColor: theme.palette.action.hover,
+        '&:not($disabled):not($pinned)': {
+          backgroundColor: theme.palette.action.hover
+        },
         outline: 'none'
       }
     },
@@ -104,8 +108,8 @@ var styles = function styles(theme) {
       backgroundColor: theme.palette.action.selected
     },
     pinned: {
+      zIndex: 1,
       display: 'inherit',
-      marginRight: 8,
       backgroundColor: theme.palette.background3
     },
     thin: {
@@ -115,7 +119,7 @@ var styles = function styles(theme) {
       textAlign: 'center',
       width: 1,
       height: 22,
-      padding: '8px 0',
+      padding: theme.spacing(2, 0),
       margin: 'auto'
     },
     listItemContent: (0, _objectSpread2.default)({}, theme.typography.b1, {
@@ -125,7 +129,7 @@ var styles = function styles(theme) {
       padding: '5px 0',
       '&$listItemContentSelected': {
         marginBottom: 1,
-        marginLeft: -4
+        marginLeft: theme.spacing(-1)
       },
       '& strong': {
         fontWeight: theme.typography.fontWeightMedium
@@ -139,8 +143,12 @@ var styles = function styles(theme) {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       display: 'inline-block',
-      margin: '1px 0',
-      paddingLeft: 4
+      margin: '1px 0'
+    },
+    highlight: {
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.palette.neutral.main,
+      textTransform: 'uppercase'
     },
     primaryHighlight: {
       fontWeight: theme.typography.fontWeightMedium,
@@ -151,7 +159,7 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.main,
       fontWeight: theme.typography.fontWeightLight,
       fontSize: 11,
-      marginLeft: 4
+      marginLeft: theme.spacing(1)
     }),
     inline: {},
     info: (0, _objectSpread2.default)({}, theme.typography.b3, {
@@ -169,11 +177,12 @@ var styles = function styles(theme) {
       verticalAlign: 'middle'
     },
     icon: {
-      margin: '0 4px',
+      marginRight: theme.spacing(1),
       verticalAlign: 'middle'
     },
     labelContent: {
       display: '-webkit-flex',
+      paddingLeft: theme.spacing(1),
       alignItems: 'center',
       maxWidth: '85%',
       '&$labelWithoutSecondaryInline': {
@@ -184,13 +193,11 @@ var styles = function styles(theme) {
     infosContent: {
       display: 'flex',
       alignItems: 'center',
+      paddingLeft: theme.spacing(1),
       width: '100%',
       justifyContent: 'space-between',
       '&$infosInlineWithoutSecondary': {
         width: 'auto'
-      },
-      '&$infosWithoutSecondaryInline': {
-        paddingLeft: 28
       }
     },
     infosInlineWithoutSecondary: {},
@@ -345,21 +352,27 @@ function (_React$PureComponent) {
       }
 
       var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
+      var listItemListenerProps = {};
+
+      if (!disabled && !pinned) {
+        listItemListenerProps = {
+          onClick: onSelect,
+          onMouseEnter: this.setHover(true),
+          onMouseLeave: this.setHover(false),
+          onKeyDown: this.handleKeyDown(item)
+        };
+      }
+
       return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
         id: id,
-        tabIndex: disabled ? '-1' : 0,
+        tabIndex: disabled || pinned ? '-1' : 0,
         key: "li-".concat(id),
         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)),
         disabled: disabled
-      }, disabled || {
-        onClick: onSelect,
-        onMouseEnter: this.setHover(true),
-        onMouseLeave: this.setHover(false),
-        onKeyDown: this.handleKeyDown(item)
-      }, {
+      }, listItemListenerProps, {
         style: {
           paddingLeft: "".concat(paddingLeft + level * 32, "px")
         }
@@ -389,11 +402,12 @@ function (_React$PureComponent) {
         },
         className: classes.img
       }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
+        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
         "data-id": id
-      }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
+      }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
         icon: icon,
-        className: classes.icon
+        className: classes.icon,
+        color: "inherit"
       }), this.buildItemLabel())), _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 && _react.default.createElement("div", {

package/HiStepper/HiStep.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Step = _interopRequireDefault(require("@material-ui/core/Step"));
+
+var _StepButton = _interopRequireDefault(require("@material-ui/core/StepButton"));
+
+var _StepContent = _interopRequireDefault(require("@material-ui/core/StepContent"));
+
+var _StepLabel = _interopRequireDefault(require("@material-ui/core/StepLabel"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
+
+/**
+ * HiStepIcon used internally by HiStep
+ */
+var HiStepIcon = function HiStepIcon(_ref) {
+  var color = _ref.color,
+      indicator = _ref.indicator,
+      status = _ref.status;
+  // get icon style from color
+  var style = (0, _react.useMemo)(function () {
+    return {
+      backgroundColor: color,
+      color: "#fff",
+      borderRadius: "50%",
+      width: 20,
+      height: 20,
+      padding: 2,
+      lineHeight: "20px",
+      fontWeight: 600,
+      fontSize: 14
+    };
+  }, [color]); // get component from status
+
+  var StepIconComponent = (0, _react.useMemo)(function () {
+    switch (status) {
+      case "done":
+        return _Check.default;
+
+      case "error":
+        return _Close.default;
+
+      case "warning":
+        return _Remove.default;
+
+      case "in_progress":
+      default:
+        return function (props) {
+          return _react.default.createElement("div", props, indicator);
+        };
+    }
+  }, [status, indicator]);
+  return _react.default.createElement(StepIconComponent, {
+    style: style
+  });
+};
+/**
+ * Custom style for StepButton
+ */
+
+
+var useStepButtonStyle = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      fontFamily: theme.typography.fontFamily
+    },
+    vertical: {
+      marginBottom: 'auto'
+    }
+  };
+});
+/**
+ * Custom style for StepContent
+ */
+
+var useStepContentStyle = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      marginLeft: 11,
+      marginTop: 0,
+      textAlign: "left",
+      borderLeft: "2px solid ".concat(theme.palette.neutral.light)
+    },
+    last: {
+      borderLeft: "none"
+    }
+  };
+});
+/**
+ * Custom style for StepLabel
+ */
+
+var useStepLabelStyle = (0, _styles.makeStyles)(function (theme) {
+  return {
+    label: (0, _objectSpread2.default)({}, theme.typography.button, {
+      fontWeight: '600 !important',
+      color: "inherit !important"
+    }),
+    active: {},
+    completed: {}
+  };
+});
+
+var HiStep = _react.default.forwardRef(function (props, ref) {
+  var content = props.content,
+      disabled = props.disabled,
+      _props$indicator = props.indicator,
+      indicator = _props$indicator === void 0 ? props.index + 1 : _props$indicator,
+      label = props.label,
+      onClick = props.onClick,
+      status = props.status,
+      others = (0, _objectWithoutProperties2.default)(props, ["content", "disabled", "indicator", "label", "onClick", "status"]);
+  var theme = (0, _styles.useTheme)();
+  var stepButtonClasses = useStepButtonStyle(props);
+  var stepContentClasses = useStepContentStyle(props);
+  var stepLabelClasses = useStepLabelStyle(props);
+  var color = (0, _react.useMemo)(function () {
+    switch (status) {
+      case "done":
+        return theme.palette.positive.main;
+
+      case "error":
+        return theme.palette.negative.main;
+
+      case "in_progress":
+        return theme.palette.primary.main;
+
+      case "warning":
+        return theme.palette.middle.main;
+
+      default:
+        return disabled ? theme.palette.text.disabled : theme.palette.neutral.light;
+    }
+  }, [status, disabled]); // set label color
+
+  var stepLabelStyle = (0, _react.useMemo)(function () {
+    return {
+      color: color
+    };
+  }, [color]);
+
+  var _ref2 = _react.default.createElement(HiStepIcon, {
+    color: color,
+    indicator: indicator,
+    status: status
+  });
+
+  var StepIconProps = (0, _react.useMemo)(function () {
+    return {
+      icon: _ref2
+    };
+  }, [color, indicator, status]);
+  return _react.default.createElement(_Step.default, (0, _extends2.default)({
+    ref: ref,
+    completed: status === "done",
+    disabled: disabled
+  }, others), _react.default.createElement(_StepButton.default, {
+    classes: stepButtonClasses,
+    onClick: onClick
+  }, _react.default.createElement(_StepLabel.default, {
+    classes: stepLabelClasses,
+    StepIconProps: StepIconProps,
+    style: stepLabelStyle
+  }, label)), content && _react.default.createElement(_StepContent.default, {
+    classes: stepContentClasses
+  }, content));
+});
+
+HiStep.defaultProps = {};
+var _default = HiStep;
+exports.default = _default;

package/HiStepper/HiStepper.js

@@ -0,0 +1,59 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Stepper = _interopRequireDefault(require("@material-ui/core/Stepper"));
+
+var _StepConnector = _interopRequireDefault(require("@material-ui/core/StepConnector"));
+
+var HiStepConnector = (0, _styles.withStyles)(function (theme) {
+  return {
+    line: {
+      border: 0,
+      backgroundColor: theme.palette.neutral.light,
+      borderRadius: 2,
+      width: 2,
+      marginLeft: -1,
+      marginTop: -1
+    }
+  };
+})(_StepConnector.default);
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      padding: 0
+    }
+  };
+});
+
+var _ref2 = _react.default.createElement(HiStepConnector, null);
+
+var HiStepper = _react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["children"]);
+  var classes = useStyles(props);
+  return _react.default.createElement(_Stepper.default, (0, _extends2.default)({
+    ref: ref,
+    classes: classes,
+    connector: _ref2,
+    nonLinear: true,
+    orientation: "vertical"
+  }, props), children);
+});
+
+HiStepper.defaultProps = {};
+var _default = HiStepper;
+exports.default = _default;

package/HiStepper/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiStepper.default;
+  }
+});
+Object.defineProperty(exports, "HiStep", {
+  enumerable: true,
+  get: function get() {
+    return _HiStep.default;
+  }
+});
+
+var _HiStepper = _interopRequireDefault(require("./HiStepper"));
+
+var _HiStep = _interopRequireDefault(require("./HiStep"));

package/HiSwitch/HiSwitch.js

@@ -183,7 +183,10 @@ function HiSwitch(props) {
     },
     checkedIcon: icon,
     checked: checked,
-    disabled: disabled
+    disabled: disabled,
+    inputProps: {
+      value: checked ? "on" : "off"
+    }
   }, other)), _react.default.createElement("div", {
     className: classes.bar
   }));

package/es/Guideline/index.js

@@ -0,0 +1,2 @@
+// fake component to display guideline
+"use strict";

package/es/HiChip/HiChip.js

@@ -68,6 +68,7 @@ var styles = function styles(theme) {
       marginLeft: 4,
       position: 'relative',
       cursor: 'pointer',
+      color: theme.palette.neutral.main,
       '&:hover, &:focus': {
         color: theme.palette.neutral.dark
       }