@hipay/hipay-material-ui 2.3.4 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/HiChip/HiChip.js +1 -0
  2. package/HiDatePicker/HiDateRangeSelector.js +181 -46
  3. package/HiDatePicker/stylesheet.js +1 -2
  4. package/HiExpansionPanel/HiExpansionPanel.js +63 -98
  5. package/HiForm/HiFormControl.js +8 -8
  6. package/HiIcon/HiIcon.js +58 -54
  7. package/HiPaymentMeans/HiPaymentMeans.js +8 -5
  8. package/HiPin/HiPin.js +12 -20
  9. package/HiSelect/HiSelect.js +44 -10
  10. package/HiSelectableList/HiSelectableListItem.js +38 -24
  11. package/HiSwitch/HiSwitch.js +4 -1
  12. package/es/HiChip/HiChip.js +1 -0
  13. package/es/HiDatePicker/HiDateRangeSelector.js +181 -46
  14. package/es/HiDatePicker/stylesheet.js +1 -2
  15. package/es/HiExpansionPanel/HiExpansionPanel.js +63 -98
  16. package/es/HiForm/HiFormControl.js +8 -8
  17. package/es/HiIcon/HiIcon.js +58 -54
  18. package/es/HiPaymentMeans/HiPaymentMeans.js +8 -5
  19. package/es/HiPin/HiPin.js +12 -20
  20. package/es/HiSelect/HiSelect.js +44 -10
  21. package/es/HiSelectableList/HiSelectableListItem.js +38 -24
  22. package/es/HiSwitch/HiSwitch.js +4 -1
  23. package/es/hi-svg-icons/HiAccount.js +8 -11
  24. package/es/hi-svg-icons/HiBilling.js +8 -11
  25. package/es/hi-svg-icons/HiCatalog.js +8 -11
  26. package/es/hi-svg-icons/HiCustomer.js +8 -11
  27. package/es/hi-svg-icons/HiFinance.js +8 -11
  28. package/es/hi-svg-icons/HiIntelligence.js +59 -0
  29. package/es/hi-svg-icons/HiOrder.js +74 -0
  30. package/es/hi-svg-icons/HiPaymentOrder.js +56 -0
  31. package/es/hi-svg-icons/HiPriceGrid.js +56 -0
  32. package/es/hi-svg-icons/HiRoute.js +8 -11
  33. package/es/hi-svg-icons/HiSettlement.js +8 -11
  34. package/es/hi-svg-icons/HiTransaction.js +8 -11
  35. package/es/hi-svg-icons/HiUser.js +8 -11
  36. package/es/hi-svg-icons/HiVendor.js +56 -0
  37. package/es/hi-svg-icons/HiWidget.js +8 -16
  38. package/es/hi-svg-icons/index.js +41 -1
  39. package/es/setupTest.js +44 -0
  40. package/es/styleguide/Wrapper.js +9 -37
  41. package/es/styles/makeStyles.js +28 -0
  42. package/es/styles/withStyles.js +28 -0
  43. package/es/theme.js +7 -9
  44. package/hi-svg-icons/HiAccount.js +8 -11
  45. package/hi-svg-icons/HiBilling.js +8 -11
  46. package/hi-svg-icons/HiCatalog.js +8 -11
  47. package/hi-svg-icons/HiCustomer.js +8 -11
  48. package/hi-svg-icons/HiFinance.js +8 -11
  49. package/hi-svg-icons/HiIntelligence.js +59 -0
  50. package/hi-svg-icons/HiOrder.js +74 -0
  51. package/hi-svg-icons/HiPaymentOrder.js +56 -0
  52. package/hi-svg-icons/HiPriceGrid.js +56 -0
  53. package/hi-svg-icons/HiRoute.js +8 -11
  54. package/hi-svg-icons/HiSettlement.js +8 -11
  55. package/hi-svg-icons/HiTransaction.js +8 -11
  56. package/hi-svg-icons/HiUser.js +8 -11
  57. package/hi-svg-icons/HiVendor.js +56 -0
  58. package/hi-svg-icons/HiWidget.js +8 -16
  59. package/hi-svg-icons/index.js +41 -1
  60. package/package.json +2 -2
  61. package/setupTest.js +44 -0
  62. package/styleguide/Wrapper.js +9 -37
  63. package/styles/makeStyles.js +28 -0
  64. package/styles/withStyles.js +28 -0
  65. package/theme.js +7 -9
@@ -11,9 +11,11 @@ exports.default = exports.useStyles = void 0;
11
11
 
12
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
13
13
 
14
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
15
+
14
16
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
15
17
 
16
- var _react = _interopRequireDefault(require("react"));
18
+ var _react = _interopRequireWildcard(require("react"));
17
19
 
18
20
  var _classnames = _interopRequireDefault(require("classnames"));
19
21
 
@@ -51,66 +53,68 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
51
53
  className = props.className,
52
54
  icon = props.icon,
53
55
  size = props.size,
54
- _color = props.color,
56
+ color = props.color,
55
57
  other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "icon", "size", "color"]);
56
58
  var classes = useStyles(props);
57
- var iconName = icon !== null ? icon : children;
58
59
  var theme = (0, _styles.useTheme)();
59
- var color = ['primary', 'secondary', 'neutral', 'positive', 'middle', 'negative'].includes(_color) ? theme.palette[_color].main : _color; // Line Awesome icons
60
-
61
- if (iconName && iconName.indexOf('fa-') === 0) {
62
- return _react.default.createElement("i", (0, _extends2.default)({
63
- ref: ref,
64
- className: (0, _classnames.default)('fa', iconName, className, classes.root),
65
- style: {
66
- fontSize: size
67
- }
68
- }, other));
69
- } // Specific HiPay icons
70
-
71
-
72
- if (iconName && iconName.indexOf('hi_') === 0) {
73
- var IconName = hiSvgIcons[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName))];
74
- return _react.default.createElement(IconName, (0, _extends2.default)({
75
- ref: ref,
76
- className: (0, _classnames.default)(classes.root, className),
77
- color: color,
78
- size: size
79
- }, other));
80
- }
81
-
82
- color = ['primary', 'secondary', 'negative'].includes(_color) ? _color : 'inherit';
83
-
84
- if (color === 'negative') {
85
- color = 'error';
86
- } // MDI - Material Design Icons - https://materialdesignicons.com
87
-
88
-
89
- if (iconName && iconName.indexOf('mdi_') === 0) {
90
- var _IconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
91
- return _react.default.createElement(_IconName, (0, _extends2.default)({
92
- ref: ref,
93
- className: (0, _classnames.default)(classes.root, className),
94
- color: color,
95
- style: {
96
- fontSize: size
97
- }
98
- }, other));
99
- } // @material-ui/icons
100
-
101
-
102
- return _react.default.createElement(_Icon.default, (0, _extends2.default)({
103
- ref: ref,
104
- className: (0, _classnames.default)(classes.root, className),
105
- color: color,
106
- style: {
107
- fontSize: size
60
+ var iconName = icon !== null ? icon : children;
61
+ var iconType = (0, _react.useMemo)(function () {
62
+ if (iconName && iconName.indexOf('fa-') === 0) {
63
+ return "line_awesome";
64
+ } else if (iconName && iconName.indexOf('hi_') === 0) {
65
+ return "hipay";
66
+ } else if (iconName && iconName.indexOf('mdi_') === 0) {
67
+ return "mdi";
68
+ } else {
69
+ return "mui";
108
70
  }
109
- }, other), iconName);
71
+ }, [iconName]);
72
+
73
+ switch (iconType) {
74
+ case "line_awesome":
75
+ return _react.default.createElement("i", (0, _extends2.default)({
76
+ ref: ref,
77
+ className: (0, _classnames.default)('fa', iconName, className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
78
+ style: {
79
+ fontSize: size
80
+ }
81
+ }, other));
82
+
83
+ case "hipay":
84
+ var HipayIconName = hiSvgIcons[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName))];
85
+ return _react.default.createElement(HipayIconName, (0, _extends2.default)({
86
+ ref: ref,
87
+ className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
88
+ color: "currentColor",
89
+ size: size
90
+ }, other));
91
+
92
+ case "mdi":
93
+ var MdiIconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
94
+ return _react.default.createElement(MdiIconName, (0, _extends2.default)({
95
+ ref: ref,
96
+ className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
97
+ color: "inherit",
98
+ style: {
99
+ fontSize: size
100
+ }
101
+ }, other));
102
+
103
+ case "mui":
104
+ default:
105
+ return _react.default.createElement(_Icon.default, (0, _extends2.default)({
106
+ ref: ref,
107
+ className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
108
+ color: "inherit",
109
+ style: {
110
+ fontSize: size
111
+ }
112
+ }, other), iconName);
113
+ }
110
114
  });
111
115
 
112
116
  HiIcon.defaultProps = {
113
- color: 'neutral',
117
+ color: 'inherit',
114
118
  icon: null,
115
119
  size: 20
116
120
  };
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = exports.styles = void 0;
9
9
 
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
11
+
10
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
11
13
 
12
14
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
@@ -546,12 +548,13 @@ function (_React$Component) {
546
548
  return cardNumber;
547
549
  };
548
550
 
549
- _this.formatIBANNumber = function (cardNumber) {
550
- if (cardNumber.search(' ') < 0) {
551
- cardNumber = "".concat(cardNumber.substring(0, 4), " ").concat(cardNumber.substring(4, 8), " ").concat(cardNumber.substring(8, 12), "\n ").concat(cardNumber.substring(12, 16), " ").concat(cardNumber.substring(16, 20), " ").concat(cardNumber.substring(20, 26));
552
- }
551
+ _this.formatIBANNumber = function (iban) {
552
+ // 1) remove spaces
553
+ var res = iban.replace(/\s/g, ''); // 2) add space each 4 chars
553
554
 
554
- return cardNumber;
555
+ return (0, _toConsumableArray2.default)(res).map(function (char, index) {
556
+ return index > 0 && index % 4 === 0 ? ' ' + char : char;
557
+ }).join('');
555
558
  };
556
559
 
557
560
  return _this;
package/es/HiPin/HiPin.js CHANGED
@@ -5,9 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = exports.styles = void 0;
9
-
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
8
+ exports.default = exports.useStyles = void 0;
11
9
 
12
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
13
11
 
@@ -17,7 +15,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
17
15
 
18
16
  var _styles = require("@material-ui/core/styles");
19
17
 
20
- var styles = function styles(theme) {
18
+ var useStyles = (0, _styles.makeStyles)(function (theme) {
21
19
  return {
22
20
  root: {
23
21
  display: 'inline-block',
@@ -62,7 +60,7 @@ var styles = function styles(theme) {
62
60
  color: theme.palette.neutral.contrastText
63
61
  }
64
62
  };
65
- };
63
+ });
66
64
  /**
67
65
  * HiPins
68
66
  *
@@ -72,33 +70,27 @@ var styles = function styles(theme) {
72
70
  *
73
71
  */
74
72
 
75
-
76
- exports.styles = styles;
73
+ exports.useStyles = useStyles;
77
74
 
78
75
  function HiPin(props) {
79
76
  var _classNames;
80
77
 
81
- var classes = props.classes,
82
- children = props.children,
78
+ var children = props.children,
83
79
  color = props.color,
84
80
  onClick = props.onClick,
85
81
  className = props.className;
82
+ var classes = useStyles(props);
86
83
  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);
87
- return _react.default.createElement("div", (0, _extends2.default)({
88
- className: pinClass
89
- }, onClick && {
84
+ return _react.default.createElement("div", {
85
+ className: pinClass,
90
86
  onClick: onClick,
91
- role: 'button'
92
- }), children);
87
+ role: onClick ? 'button' : undefined
88
+ }, children);
93
89
  }
94
90
 
95
91
  HiPin.defaultProps = {
96
92
  color: 'default'
97
93
  };
98
-
99
- var _default = (0, _styles.withStyles)(styles, {
100
- hiComponent: true,
101
- name: 'HmuiHiPin'
102
- })(HiPin);
103
-
94
+ HiPin.useStyles = useStyles;
95
+ var _default = HiPin;
104
96
  exports.default = _default;
@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = exports.styles = void 0;
9
9
 
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
11
+
10
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
11
13
 
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
14
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
13
15
 
14
16
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
15
17
 
@@ -145,11 +147,11 @@ var HiSelect =
145
147
  function (_React$PureComponent) {
146
148
  (0, _inherits2.default)(HiSelect, _React$PureComponent);
147
149
 
148
- function HiSelect(props) {
150
+ function HiSelect(_props) {
149
151
  var _this;
150
152
 
151
153
  (0, _classCallCheck2.default)(this, HiSelect);
152
- _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, props));
154
+ _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, _props));
153
155
 
154
156
  _this.buildSelectProps = function (options) {
155
157
  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -235,9 +237,9 @@ function (_React$PureComponent) {
235
237
  };
236
238
 
237
239
  _this.focusOnFirstItem = function () {
238
- if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
240
+ if (_this.overlay && _this.overlay.querySelector('li:not([tabindex^="-"])')) {
239
241
  setTimeout(function () {
240
- var item = _this.overlay.getElementsByTagName('li')[0];
242
+ var item = _this.overlay.querySelector('li:not([tabindex^="-"])');
241
243
 
242
244
  item.focus();
243
245
  }, 1);
@@ -310,16 +312,16 @@ function (_React$PureComponent) {
310
312
  };
311
313
 
312
314
  _this.focusOnSelectedItem = function (selectedValue) {
313
- if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
315
+ if (_this.overlay && _this.overlay.querySelector('li:not([tabindex^="-"])')) {
314
316
  setTimeout(function () {
315
317
  if (_this.overlay) {
316
318
  // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
317
- var item = _this.overlay.getElementsByTagName('li')[0];
319
+ var item = _this.overlay.querySelector('li:not([tabindex^="-"])');
318
320
 
319
321
  if (selectedValue && typeof selectedValue === 'string') {
320
322
  item = _this.overlay.getElementsByTagName('li')[selectedValue];
321
323
  } else if (selectedValue && typeof selectedValue === 'number') {
322
- item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
324
+ item = _this.overlay.querySelector('li:not([tabindex^="-"])')[selectedValue - 1];
323
325
  }
324
326
 
325
327
  if (item) {
@@ -525,12 +527,42 @@ function (_React$PureComponent) {
525
527
  return itemListLength;
526
528
  };
527
529
 
530
+ _this.renderScrollbarTrackHorizontal = function (props) {
531
+ var style = props.style,
532
+ otherProps = (0, _objectWithoutProperties2.default)(props, ["style"]);
533
+ var inlineStyle = (0, _objectSpread2.default)({}, style, {
534
+ zIndex: 10,
535
+ right: 2,
536
+ bottom: 2,
537
+ left: 2,
538
+ borderRadius: 3
539
+ });
540
+ return _react.default.createElement("div", (0, _extends2.default)({}, props, {
541
+ style: inlineStyle
542
+ }));
543
+ };
544
+
545
+ _this.renderScrollbarTrackVertical = function (props) {
546
+ var style = props.style,
547
+ otherProps = (0, _objectWithoutProperties2.default)(props, ["style"]);
548
+ var inlineStyle = (0, _objectSpread2.default)({}, style, {
549
+ zIndex: 10,
550
+ right: 2,
551
+ bottom: 2,
552
+ top: 2,
553
+ borderRadius: 3
554
+ });
555
+ return _react.default.createElement("div", (0, _extends2.default)({}, props, {
556
+ style: inlineStyle
557
+ }));
558
+ };
559
+
528
560
  _this.state = {
529
561
  alertOpen: false,
530
562
  open: false,
531
563
  focused: false,
532
- searchValue: props.searchValue ? undefined : '',
533
- suggestions: props.options,
564
+ searchValue: _props.searchValue ? undefined : '',
565
+ suggestions: _props.options,
534
566
  openDown: true,
535
567
  overlayWidth: 0
536
568
  };
@@ -672,6 +704,8 @@ function (_React$PureComponent) {
672
704
  } : {},
673
705
  className: classes.paper
674
706
  }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
707
+ renderTrackHorizontal: _this2.renderScrollbarTrackHorizontal,
708
+ renderTrackVertical: _this2.renderScrollbarTrackVertical,
675
709
  ref: function ref(contentEl) {
676
710
  _this2.optionsContent = contentEl;
677
711
  },
@@ -55,7 +55,7 @@ var PureListItem = (0, _pure.default)(_ListItem.default);
55
55
  var styles = function styles(theme) {
56
56
  return {
57
57
  root: {
58
- paddingLeft: 4
58
+ paddingLeft: theme.spacing(1)
59
59
  },
60
60
  listItem: {
61
61
  backgroundColor: theme.palette.background3,
@@ -64,8 +64,10 @@ var styles = function styles(theme) {
64
64
  fontWeight: theme.typography.fontWeightRegular,
65
65
  maxHeight: 56,
66
66
  display: 'inline-flex',
67
- alignItems: 'center',
68
- cursor: 'pointer',
67
+ alignItems: "center",
68
+ "&:not($disabled):not($pinned)": {
69
+ cursor: 'pointer'
70
+ },
69
71
  '&$listItemInlineWithInfoWithoutSecondary': {
70
72
  justifyContent: 'space-between'
71
73
  },
@@ -79,7 +81,9 @@ var styles = function styles(theme) {
79
81
  }
80
82
  },
81
83
  '&:focus': {
82
- backgroundColor: theme.palette.action.hover,
84
+ '&:not($disabled):not($pinned)': {
85
+ backgroundColor: theme.palette.action.hover
86
+ },
83
87
  outline: 'none'
84
88
  }
85
89
  },
@@ -104,8 +108,8 @@ var styles = function styles(theme) {
104
108
  backgroundColor: theme.palette.action.selected
105
109
  },
106
110
  pinned: {
111
+ zIndex: 1,
107
112
  display: 'inherit',
108
- marginRight: 8,
109
113
  backgroundColor: theme.palette.background3
110
114
  },
111
115
  thin: {
@@ -115,7 +119,7 @@ var styles = function styles(theme) {
115
119
  textAlign: 'center',
116
120
  width: 1,
117
121
  height: 22,
118
- padding: '8px 0',
122
+ padding: theme.spacing(2, 0),
119
123
  margin: 'auto'
120
124
  },
121
125
  listItemContent: (0, _objectSpread2.default)({}, theme.typography.b1, {
@@ -125,7 +129,7 @@ var styles = function styles(theme) {
125
129
  padding: '5px 0',
126
130
  '&$listItemContentSelected': {
127
131
  marginBottom: 1,
128
- marginLeft: -4
132
+ marginLeft: theme.spacing(-1)
129
133
  },
130
134
  '& strong': {
131
135
  fontWeight: theme.typography.fontWeightMedium
@@ -139,8 +143,12 @@ var styles = function styles(theme) {
139
143
  overflow: 'hidden',
140
144
  textOverflow: 'ellipsis',
141
145
  display: 'inline-block',
142
- margin: '1px 0',
143
- paddingLeft: 4
146
+ margin: '1px 0'
147
+ },
148
+ highlight: {
149
+ fontWeight: theme.typography.fontWeightMedium,
150
+ color: theme.palette.neutral.main,
151
+ textTransform: 'uppercase'
144
152
  },
145
153
  primaryHighlight: {
146
154
  fontWeight: theme.typography.fontWeightMedium,
@@ -151,7 +159,7 @@ var styles = function styles(theme) {
151
159
  color: theme.palette.neutral.main,
152
160
  fontWeight: theme.typography.fontWeightLight,
153
161
  fontSize: 11,
154
- marginLeft: 4
162
+ marginLeft: theme.spacing(1)
155
163
  }),
156
164
  inline: {},
157
165
  info: (0, _objectSpread2.default)({}, theme.typography.b3, {
@@ -169,11 +177,12 @@ var styles = function styles(theme) {
169
177
  verticalAlign: 'middle'
170
178
  },
171
179
  icon: {
172
- margin: '0 4px',
180
+ marginRight: theme.spacing(1),
173
181
  verticalAlign: 'middle'
174
182
  },
175
183
  labelContent: {
176
184
  display: '-webkit-flex',
185
+ paddingLeft: theme.spacing(1),
177
186
  alignItems: 'center',
178
187
  maxWidth: '85%',
179
188
  '&$labelWithoutSecondaryInline': {
@@ -184,13 +193,11 @@ var styles = function styles(theme) {
184
193
  infosContent: {
185
194
  display: 'flex',
186
195
  alignItems: 'center',
196
+ paddingLeft: theme.spacing(1),
187
197
  width: '100%',
188
198
  justifyContent: 'space-between',
189
199
  '&$infosInlineWithoutSecondary': {
190
200
  width: 'auto'
191
- },
192
- '&$infosWithoutSecondaryInline': {
193
- paddingLeft: 28
194
201
  }
195
202
  },
196
203
  infosInlineWithoutSecondary: {},
@@ -345,21 +352,27 @@ function (_React$PureComponent) {
345
352
  }
346
353
 
347
354
  var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
355
+ var listItemListenerProps = {};
356
+
357
+ if (!disabled && !pinned) {
358
+ listItemListenerProps = {
359
+ onClick: onSelect,
360
+ onMouseEnter: this.setHover(true),
361
+ onMouseLeave: this.setHover(false),
362
+ onKeyDown: this.handleKeyDown(item)
363
+ };
364
+ }
365
+
348
366
  return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
349
367
  id: id,
350
- tabIndex: disabled ? '-1' : 0,
368
+ tabIndex: disabled || pinned ? '-1' : 0,
351
369
  key: "li-".concat(id),
352
370
  classes: {
353
371
  root: classes.root
354
372
  },
355
373
  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)),
356
374
  disabled: disabled
357
- }, disabled || {
358
- onClick: onSelect,
359
- onMouseEnter: this.setHover(true),
360
- onMouseLeave: this.setHover(false),
361
- onKeyDown: this.handleKeyDown(item)
362
- }, {
375
+ }, listItemListenerProps, {
363
376
  style: {
364
377
  paddingLeft: "".concat(paddingLeft + level * 32, "px")
365
378
  }
@@ -389,11 +402,12 @@ function (_React$PureComponent) {
389
402
  },
390
403
  className: classes.img
391
404
  }), _react.default.createElement("div", {
392
- 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)),
405
+ 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)),
393
406
  "data-id": id
394
- }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
407
+ }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
395
408
  icon: icon,
396
- className: classes.icon
409
+ className: classes.icon,
410
+ color: "inherit"
397
411
  }), this.buildItemLabel())), _react.default.createElement("div", {
398
412
  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))
399
413
  }, !!secondaryLabel && _react.default.createElement("div", {
@@ -183,7 +183,10 @@ function HiSwitch(props) {
183
183
  },
184
184
  checkedIcon: icon,
185
185
  checked: checked,
186
- disabled: disabled
186
+ disabled: disabled,
187
+ inputProps: {
188
+ value: checked ? "on" : "off"
189
+ }
187
190
  }, other)), _react.default.createElement("div", {
188
191
  className: classes.bar
189
192
  }));
@@ -34,20 +34,17 @@ var HiAccount = (0, _pure.default)(function (props) {
34
34
  fontSize: props.size || 24
35
35
  })
36
36
  }, other), _react.default.createElement("svg", {
37
- viewBox: "0 0 37.5 39"
38
- }, _react.default.createElement("g", {
39
- transform: "translate(-8111 -110)"
37
+ viewBox: "0 0 28.35 28.35"
40
38
  }, _react.default.createElement("circle", {
41
- cx: 8124.9,
42
- cy: 134.9,
43
- r: 13.9,
44
- opacity: 0.16,
45
- fill: color
39
+ cx: "11.83",
40
+ cy: "16.66",
41
+ r: "9",
42
+ fill: color,
43
+ opacity: 0.16
46
44
  }), _react.default.createElement("path", {
47
- // eslint-disable-next-line max-len
48
- d: "M8117 118.1H8144V124.8h-1.1v18H8118.2v-18h-1.1V118.1zm2.3 2.3v2.2h22.5v-2.2h-22.5zm1.1 4.5v15.8h20.2v-15.8h-20.2zm6.6 2.2h7c.3 0 .6.1.8.3s.3.5.3.8c0 .3-.1.6-.3.8s-.5.3-.8.3h-6.8-.1c-.3 0-.5-.1-.8-.3-.2-.2-.4-.5-.4-.8 0-.3.1-.5.3-.7s.5-.3.8-.4z",
45
+ d: "M13.28,4.66h7.78v7.78l-.18.28L12.63,21l-.57.47L11.5,21,4.75,14.22l-.47-.56.47-.56L13,4.85Zm.61,1.5-7.5,7.5,5.67,5.67,7.5-7.5V6.16Zm7.92.75h2.25v8.25l-.18.23L16,23.22l-.51.47-.56-.47-1.41-1.5,1-1,.94.94,7.12-7.13V8.41h-.75Zm-5,1a.76.76,0,0,1,.54-.21.75.75,0,1,1,0,1.5A.76.76,0,0,1,16.77,9a.8.8,0,0,1,0-1.08Z",
49
46
  fill: color
50
- }))));
47
+ })));
51
48
  });
52
49
  HiAccount.muiName = 'SvgIcon';
53
50
 
@@ -34,20 +34,17 @@ var HiBilling = (0, _pure.default)(function (props) {
34
34
  fontSize: props.size || 24
35
35
  })
36
36
  }, other), _react.default.createElement("svg", {
37
- viewBox: "0 0 36 39"
38
- }, _react.default.createElement("g", {
39
- transform: "translate(-8111 -202)"
37
+ viewBox: "0 0 28.35 28.35"
40
38
  }, _react.default.createElement("circle", {
41
- cx: 8124.9,
42
- cy: 226.9,
43
- r: 13.9,
44
- opacity: 0.16,
45
- fill: color
39
+ cx: "11.83",
40
+ cy: "16.66",
41
+ r: "9",
42
+ fill: color,
43
+ opacity: 0.16
46
44
  }), _react.default.createElement("path", {
47
- // eslint-disable-next-line max-len
48
- d: "M8127.9 207.9c1.4 0 2.3.8 3 2.2h8.3v10.1h2.2V238.2h-15.7V236h-9V210.2h8.3c.5-1.6 1.5-2.3 2.9-2.3zm-9 4.5v21.4h6.8v-13.5h11.2v-7.9h-2.2v4.5H8121.3v-4.5h-2.4zm9.8-2c-.2-.2-.5-.3-.8-.3-.3 0-.6.1-.8.3s-.3.5-.3.8v1.1H8123.5v2.2h9v-2.2H8129.2v-1.1c-.2-.3-.3-.5-.5-.8zm-.8 12.1V236h11.2v-13.5h-11.2z",
45
+ d: "M13.42,4.05a2.05,2.05,0,0,1,2,1.5h5.53V12.3h1.5v12H11.92V22.8h-6V5.55h5.53A2.07,2.07,0,0,1,13.42,4.05Zm-6,3V21.3h4.5v-9h7.5V7.05h-1.5v3h-9v-3ZM14,5.76a.75.75,0,0,0-1.29.54v.75H10.42v1.5h6V7.05H14.17V6.3A.73.73,0,0,0,14,5.76Zm-.54,8v9h7.5v-9Z",
49
46
  fill: color
50
- }))));
47
+ })));
51
48
  });
52
49
  HiBilling.muiName = 'SvgIcon';
53
50
 
@@ -34,20 +34,17 @@ var HiCatalog = (0, _pure.default)(function (props) {
34
34
  fontSize: props.size || 24
35
35
  })
36
36
  }, other), _react.default.createElement("svg", {
37
- viewBox: "0 0 37.5 39"
38
- }, _react.default.createElement("g", {
39
- transform: "translate(-8111 -64)"
37
+ viewBox: "0 0 28.35 28.35"
40
38
  }, _react.default.createElement("circle", {
41
- cx: 8124.9,
42
- cy: 88.9,
43
- r: 13.9,
44
- opacity: 0.16,
45
- fill: color
39
+ cx: "11.83",
40
+ cy: "16.66",
41
+ r: "9",
42
+ fill: color,
43
+ opacity: 0.16
46
44
  }), _react.default.createElement("path", {
47
- // eslint-disable-next-line max-len
48
- d: "M8117 74.4h2.5c.5 0 1 .2 1.4.5.4.3.6.7.7 1.2l3 11.8h14.1l2.7-10.1h2.4l-3 10.7c-.1.5-.3.9-.7 1.2-.4.3-.9.5-1.4.5h-14c-.5 0-1-.2-1.4-.5-.4-.3-.6-.7-.7-1.2l-3-11.8h-2.5c-.3 0-.6-.1-.8-.3s-.3-.5-.3-.8c0-.3.1-.6.3-.8s.4-.4.7-.4zm7.8 16.7c.7-.7 1.5-1 2.4-1 .9 0 1.7.3 2.4 1s1 1.5 1 2.4c0 .9-.3 1.7-1 2.4s-1.5 1-2.4 1c-.9 0-1.7-.3-2.4-1s-1-1.5-1-2.4c0-.9.3-1.7 1-2.4zm3.5 2.4c0-.7-.4-1.1-1.1-1.1-.8 0-1.1.4-1.1 1.1 0 .8.4 1.1 1.1 1.1.7 0 1.1-.4 1.1-1.1zm2.2-19.1h2.2V80h3.4l-4.5 4.5-4.5-4.5h3.4v-5.6zm4.4 16.7c.7-.7 1.5-1 2.4-1 .9 0 1.7.3 2.4 1s1 1.5 1 2.4c0 .9-.3 1.7-1 2.4s-1.5 1-2.4 1c-.9 0-1.7-.3-2.4-1s-1-1.5-1-2.4c0-.9.3-1.7 1-2.4zm3.5 2.4c0-.7-.4-1.1-1.1-1.1-.8 0-1.1.4-1.1 1.1 0 .8.4 1.1 1.1 1.1.7 0 1.1-.4 1.1-1.1z",
45
+ d: "M5.64,6.67H7.33A1.41,1.41,0,0,1,8.24,7a1.28,1.28,0,0,1,.5.82l2,7.87h9.38l1.78-6.75h1.59l-2,7.13a1.31,1.31,0,0,1-.5.82,1.46,1.46,0,0,1-.91.3H10.7a1.48,1.48,0,0,1-.91-.3,1.25,1.25,0,0,1-.49-.82l-2-7.88H5.64a.75.75,0,1,1,0-1.5ZM10.8,17.83a2.26,2.26,0,0,1,3.19,0A2.26,2.26,0,0,1,10.8,21a2.26,2.26,0,0,1,0-3.19Zm2.34,1.59a.66.66,0,0,0-.75-.75.75.75,0,0,0,0,1.5A.66.66,0,0,0,13.14,19.42Zm1.5-12.75h1.5v3.75h2.25l-3,3-3-3h2.25Zm2.91,11.16a2.26,2.26,0,0,1,3.19,0A2.26,2.26,0,0,1,17.55,21a2.26,2.26,0,0,1,0-3.19Zm2.34,1.59a.75.75,0,1,0-.75.75A.66.66,0,0,0,19.89,19.42Z",
49
46
  fill: color
50
- }))));
47
+ })));
51
48
  });
52
49
  HiCatalog.muiName = 'SvgIcon';
53
50
 
@@ -34,20 +34,17 @@ var HiCustomer = (0, _pure.default)(function (props) {
34
34
  fontSize: props.size || 24
35
35
  })
36
36
  }, other), _react.default.createElement("svg", {
37
- viewBox: "0 0 37.5 39"
38
- }, _react.default.createElement("g", {
39
- transform: "translate(1650 3570)"
37
+ viewBox: "0 0 28.35 28.35"
40
38
  }, _react.default.createElement("circle", {
41
- cx: -1636.1,
42
- cy: -3545.1,
43
- r: 13.9,
44
- opacity: 0.16,
45
- fill: color
39
+ cx: "11.83",
40
+ cy: "16.66",
41
+ r: "9",
42
+ fill: color,
43
+ opacity: 0.16
46
44
  }), _react.default.createElement("path", {
47
- // eslint-disable-next-line max-len
48
- d: "M-1637.1-3559.6c1.5-1.5 3.4-2.3 5.6-2.3 2.2 0 4 .8 5.6 2.3s2.3 3.4 2.3 5.6c0 1.3-.3 2.6-.9 3.7-.6 1.2-1.5 2.1-2.6 2.8 2.1.9 3.7 2.3 5 4.1 1.3 1.9 1.9 3.9 1.9 6.2h-2.2c0-2.5-.9-4.6-2.6-6.4s-3.9-2.6-6.4-2.6c-2.5 0-4.6.9-6.4 2.6s-2.6 3.9-2.6 6.4h-2.2c0-2.3.6-4.4 1.9-6.2 1.3-1.9 2.9-3.2 5-4.1-1.1-.7-1.9-1.6-2.6-2.8-.6-1.2-.9-2.4-.9-3.7-.3-2.2.5-4 2.1-5.6zm9.5 1.6c-1.1-1.1-2.4-1.7-4-1.7s-2.9.6-4 1.7-1.7 2.4-1.7 4 .6 2.9 1.7 4 2.4 1.7 4 1.7 2.9-.6 4-1.7 1.7-2.4 1.7-4-.6-2.9-1.7-4z",
45
+ d: "M7.47,5.22a5.06,5.06,0,0,1,3.7-1.55,5.07,5.07,0,0,1,3.71,1.55,5.05,5.05,0,0,1,1.54,3.7,5.17,5.17,0,0,1-.63,2.49,5.05,5.05,0,0,1-1.71,1.87,11.2,11.2,0,0,1,1.08.52,6,6,0,0,1,3.51-1.13,6,6,0,0,1,6,6,6,6,0,0,1-6,6,6,6,0,0,1-6-6A5.84,5.84,0,0,1,14,14.92a5.62,5.62,0,0,0-2.82-.75,5.79,5.79,0,0,0-4.24,1.76,5.79,5.79,0,0,0-1.76,4.24H3.67A7.24,7.24,0,0,1,4.94,16a7.63,7.63,0,0,1,3.33-2.74,5.05,5.05,0,0,1-1.71-1.87,5.18,5.18,0,0,1,.91-6.19Zm6.35,1a3.74,3.74,0,0,0-5.3,0,3.64,3.64,0,0,0-1.1,2.65,3.62,3.62,0,0,0,1.1,2.65,3.6,3.6,0,0,0,2.65,1.1,3.59,3.59,0,0,0,2.65-1.1,3.59,3.59,0,0,0,1.1-2.65A3.6,3.6,0,0,0,13.82,6.27Zm8,9.22a4.5,4.5,0,0,0-6.37,0,4.5,4.5,0,0,0,0,6.37,4.53,4.53,0,0,0,6.37,0,4.53,4.53,0,0,0,0-6.37Zm-3.94.18h1.5v2.25h2.25v1.5H19.42v2.25h-1.5V19.42H15.67v-1.5h2.25Z",
49
46
  fill: color
50
- }))));
47
+ })));
51
48
  });
52
49
  HiCustomer.muiName = 'SvgIcon';
53
50