@hipay/hipay-material-ui 2.0.0-beta.48 → 2.0.0-beta.49

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.
@@ -28,7 +28,13 @@ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
28
28
  // @inheritedComponent Button
29
29
  var styles = function styles(theme) {
30
30
  return {
31
- root: {},
31
+ root: {
32
+ '&$raisedDisabled': {
33
+ color: theme.palette.neutral.contrastText,
34
+ backgroundColor: theme.palette.neutral.main
35
+ }
36
+ },
37
+ raisedDisabled: {},
32
38
  flatNeutral: {
33
39
  color: theme.palette.neutral.main,
34
40
  '&$disabled': {
@@ -193,7 +199,7 @@ function HiButton(props) {
193
199
  var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
194
200
  var fab = variant === 'fab' || variant === 'extendedFab';
195
201
  var contained = variant === 'contained' || variant === 'raised';
196
- var buttonClassNames = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), _classNames));
202
+ var buttonClassNames = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.raisedDisabled, variant === 'raised' && disabled), (0, _defineProperty2.default)(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), _classNames));
197
203
  return _react.default.createElement(_Button.default, (0, _extends2.default)({
198
204
  className: className,
199
205
  classes: {
package/HiChip/HiChip.js CHANGED
@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
17
17
 
18
18
  var _classnames = _interopRequireDefault(require("classnames"));
19
19
 
20
+ var _keycode = _interopRequireDefault(require("keycode"));
21
+
20
22
  var _HiIcon = _interopRequireDefault(require("../HiIcon"));
21
23
 
22
24
  var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
@@ -107,6 +109,13 @@ var styles = function styles(theme) {
107
109
 
108
110
  exports.styles = styles;
109
111
 
112
+ var handleKeyDown = function handleKeyDown(e, fn) {
113
+ if ((0, _keycode.default)(e) === 'space' || (0, _keycode.default)(e) === 'enter') {
114
+ e.preventDefault();
115
+ fn();
116
+ }
117
+ };
118
+
110
119
  function HiChip(props) {
111
120
  var _classNames;
112
121
 
@@ -138,7 +147,11 @@ function HiChip(props) {
138
147
  icon: icon,
139
148
  size: iconSize,
140
149
  onClick: onIconClick,
141
- title: titleIcon
150
+ onKeyDown: function onKeyDown(event) {
151
+ return handleKeyDown(event, onIconClick);
152
+ },
153
+ title: titleIcon,
154
+ tabIndex: onIconClick ? 0 : -1
142
155
  }), prefix && _react.default.createElement("span", {
143
156
  className: classes.prefix
144
157
  }, prefix), img && _react.default.createElement("img", {
@@ -157,24 +170,36 @@ function HiChip(props) {
157
170
  className: (0, _classnames.default)(classes.navigate),
158
171
  icon: "arrow_left",
159
172
  onClick: onPrevious,
173
+ onKeyDown: function onKeyDown(event) {
174
+ return handleKeyDown(event, onPrevious);
175
+ },
160
176
  size: iconSize,
161
- title: titlePrevious
177
+ title: titlePrevious,
178
+ tabIndex: 0
162
179
  }), _react.default.createElement("span", {
163
180
  className: classes.label
164
181
  }, label), onNext && _react.default.createElement(_HiIcon.default, {
165
182
  className: (0, _classnames.default)(classes.navigate),
166
183
  icon: "arrow_right",
167
184
  onClick: onNext,
185
+ onKeyDown: function onKeyDown(event) {
186
+ return handleKeyDown(event, onNext);
187
+ },
168
188
  size: iconSize,
169
- title: titleNext
189
+ title: titleNext,
190
+ tabIndex: 0
170
191
  }), onDelete && _react.default.createElement(_HiIcon.default, {
171
192
  classes: {
172
193
  root: classes.eraseIcon
173
194
  },
174
195
  icon: "cancel",
175
196
  onClick: onDelete,
197
+ onKeyDown: function onKeyDown(event) {
198
+ return handleKeyDown(event, onDelete);
199
+ },
176
200
  size: iconSize,
177
- title: titleDelete
201
+ title: titleDelete,
202
+ tabIndex: 0
178
203
  }));
179
204
  }
180
205
 
@@ -25,6 +25,8 @@ var _react = _interopRequireDefault(require("react"));
25
25
 
26
26
  var _propTypes = _interopRequireDefault(require("prop-types"));
27
27
 
28
+ var _keycode = _interopRequireDefault(require("keycode"));
29
+
28
30
  var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
29
31
 
30
32
  var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
@@ -43,7 +45,7 @@ var styles = function styles(theme) {
43
45
  '&:first-child': {
44
46
  borderTop: 'solid 1px #E4E7E8'
45
47
  },
46
- '&:hover': {
48
+ '&:hover, &:focus': {
47
49
  backgroundColor: "".concat(theme.palette.action.hover, " !important")
48
50
  }
49
51
  }
@@ -91,11 +93,18 @@ function (_React$PureComponent) {
91
93
  onClick: function onClick(event) {
92
94
  return _this2.handleClick(event, rowdata);
93
95
  },
96
+ onKeyDown: function onKeyDown(event) {
97
+ if ((0, _keycode.default)(event) === 'space' || (0, _keycode.default)(event) === 'enter') {
98
+ event.preventDefault();
99
+
100
+ _this2.handleClick(event, rowdata);
101
+ }
102
+ },
94
103
  key: key,
95
104
  style: {
96
105
  height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
97
106
  },
98
- tabIndex: -1
107
+ tabIndex: 0
99
108
  }, Object.keys(columns).map(function (key) {
100
109
  return _react.default.createElement(_HiCellBuilder.default, {
101
110
  key: columns[key].colId,
@@ -8,7 +8,13 @@ import { withStyles } from '../styles';
8
8
  import { fade } from '../styles/colorManipulator';
9
9
  import Button from '@material-ui/core/Button';
10
10
  export const styles = theme => ({
11
- root: {},
11
+ root: {
12
+ '&$raisedDisabled': {
13
+ color: theme.palette.neutral.contrastText,
14
+ backgroundColor: theme.palette.neutral.main
15
+ }
16
+ },
17
+ raisedDisabled: {},
12
18
  flatNeutral: {
13
19
  color: theme.palette.neutral.main,
14
20
  '&$disabled': {
@@ -172,6 +178,7 @@ function HiButton(props) {
172
178
  const fab = variant === 'fab' || variant === 'extendedFab';
173
179
  const contained = variant === 'contained' || variant === 'raised';
174
180
  const buttonClassNames = classNames(classes.root, {
181
+ [classes.raisedDisabled]: variant === 'raised' && disabled,
175
182
  [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
176
183
  [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
177
184
  [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
2
2
  import React from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import classNames from 'classnames';
5
+ import keycode from 'keycode';
5
6
  import HiIcon from '../HiIcon';
6
7
  import withStyles from '../styles/withStyles';
7
8
  export const styles = theme => ({
@@ -86,6 +87,13 @@ export const styles = theme => ({
86
87
  }
87
88
  });
88
89
 
90
+ const handleKeyDown = (e, fn) => {
91
+ if (keycode(e) === 'space' || keycode(e) === 'enter') {
92
+ e.preventDefault();
93
+ fn();
94
+ }
95
+ };
96
+
89
97
  function HiChip(props) {
90
98
  const {
91
99
  label,
@@ -123,7 +131,9 @@ function HiChip(props) {
123
131
  icon: icon,
124
132
  size: iconSize,
125
133
  onClick: onIconClick,
126
- title: titleIcon
134
+ onKeyDown: event => handleKeyDown(event, onIconClick),
135
+ title: titleIcon,
136
+ tabIndex: onIconClick ? 0 : -1
127
137
  }), prefix && React.createElement("span", {
128
138
  className: classes.prefix
129
139
  }, prefix), img && React.createElement("img", {
@@ -142,24 +152,30 @@ function HiChip(props) {
142
152
  className: classNames(classes.navigate),
143
153
  icon: "arrow_left",
144
154
  onClick: onPrevious,
155
+ onKeyDown: event => handleKeyDown(event, onPrevious),
145
156
  size: iconSize,
146
- title: titlePrevious
157
+ title: titlePrevious,
158
+ tabIndex: 0
147
159
  }), React.createElement("span", {
148
160
  className: classes.label
149
161
  }, label), onNext && React.createElement(HiIcon, {
150
162
  className: classNames(classes.navigate),
151
163
  icon: "arrow_right",
152
164
  onClick: onNext,
165
+ onKeyDown: event => handleKeyDown(event, onNext),
153
166
  size: iconSize,
154
- title: titleNext
167
+ title: titleNext,
168
+ tabIndex: 0
155
169
  }), onDelete && React.createElement(HiIcon, {
156
170
  classes: {
157
171
  root: classes.eraseIcon
158
172
  },
159
173
  icon: "cancel",
160
174
  onClick: onDelete,
175
+ onKeyDown: event => handleKeyDown(event, onDelete),
161
176
  size: iconSize,
162
- title: titleDelete
177
+ title: titleDelete,
178
+ tabIndex: 0
163
179
  }));
164
180
  }
165
181
 
@@ -1,6 +1,7 @@
1
1
  // @inheritedComponent TableRow
2
2
  import React from 'react';
3
3
  import PropTypes from 'prop-types';
4
+ import keycode from 'keycode';
4
5
  import withStyles from '../styles/withStyles';
5
6
  import TableRow from '@material-ui/core/TableRow';
6
7
  import HiCellBuilder from './HiCellBuilder';
@@ -13,7 +14,7 @@ export const styles = theme => ({
13
14
  '&:first-child': {
14
15
  borderTop: 'solid 1px #E4E7E8'
15
16
  },
16
- '&:hover': {
17
+ '&:hover, &:focus': {
17
18
  backgroundColor: `${theme.palette.action.hover} !important`
18
19
  }
19
20
  }
@@ -44,11 +45,17 @@ class HiTableRow extends React.PureComponent {
44
45
  className: classes.row,
45
46
  hover: true,
46
47
  onClick: event => this.handleClick(event, rowdata),
48
+ onKeyDown: event => {
49
+ if (keycode(event) === 'space' || keycode(event) === 'enter') {
50
+ event.preventDefault();
51
+ this.handleClick(event, rowdata);
52
+ }
53
+ },
47
54
  key: key,
48
55
  style: {
49
56
  height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
50
57
  },
51
- tabIndex: -1
58
+ tabIndex: 0
52
59
  }, Object.keys(columns).map(key => {
53
60
  return React.createElement(HiCellBuilder, {
54
61
  key: columns[key].colId,
package/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license HiPay-Material-UI v2.0.0-beta.48
1
+ /** @license HiPay-Material-UI v2.0.0-beta.49
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license HiPay-Material-UI v2.0.0-beta.48
1
+ /** @license HiPay-Material-UI v2.0.0-beta.49
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@hipay/hipay-material-ui",
3
3
  "private": false,
4
4
  "author": "HiPay PSYCHE Team",
5
- "version": "2.0.0-beta.48",
5
+ "version": "2.0.0-beta.49",
6
6
  "description": "React components that implement Google's Material Design.",
7
7
  "keywords": [
8
8
  "react",
@@ -1,4 +1,4 @@
1
- /** @license HiPay-Material-UI v2.0.0-beta.48
1
+ /** @license HiPay-Material-UI v2.0.0-beta.49
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
@@ -13298,7 +13298,13 @@
13298
13298
 
13299
13299
  var styles = function styles(theme) {
13300
13300
  return {
13301
- root: {},
13301
+ root: {
13302
+ '&$raisedDisabled': {
13303
+ color: theme.palette.neutral.contrastText,
13304
+ backgroundColor: theme.palette.neutral.main
13305
+ }
13306
+ },
13307
+ raisedDisabled: {},
13302
13308
  flatNeutral: {
13303
13309
  color: theme.palette.neutral.main,
13304
13310
  '&$disabled': {
@@ -13462,7 +13468,7 @@
13462
13468
  var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
13463
13469
  var fab = variant === 'fab' || variant === 'extendedFab';
13464
13470
  var contained = variant === 'contained' || variant === 'raised';
13465
- var buttonClassNames = classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), defineProperty(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), defineProperty(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), defineProperty(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), defineProperty(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), defineProperty(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), defineProperty(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), defineProperty(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), defineProperty(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), defineProperty(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.disabled, disabled), _classNames));
13471
+ var buttonClassNames = classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.raisedDisabled, variant === 'raised' && disabled), defineProperty(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), defineProperty(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), defineProperty(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), defineProperty(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), defineProperty(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), defineProperty(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), defineProperty(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), defineProperty(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), defineProperty(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), defineProperty(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.disabled, disabled), _classNames));
13466
13472
  return React__default.createElement(Button$2, _extends_1({
13467
13473
  className: className,
13468
13474
  classes: {
@@ -66295,6 +66301,13 @@
66295
66301
  };
66296
66302
  };
66297
66303
 
66304
+ var handleKeyDown = function handleKeyDown(e, fn) {
66305
+ if (keycode(e) === 'space' || keycode(e) === 'enter') {
66306
+ e.preventDefault();
66307
+ fn();
66308
+ }
66309
+ };
66310
+
66298
66311
  function HiChip(props) {
66299
66312
  var _classNames;
66300
66313
 
@@ -66326,7 +66339,11 @@
66326
66339
  icon: icon,
66327
66340
  size: iconSize,
66328
66341
  onClick: onIconClick,
66329
- title: titleIcon
66342
+ onKeyDown: function onKeyDown(event) {
66343
+ return handleKeyDown(event, onIconClick);
66344
+ },
66345
+ title: titleIcon,
66346
+ tabIndex: onIconClick ? 0 : -1
66330
66347
  }), prefix && React__default.createElement("span", {
66331
66348
  className: classes.prefix
66332
66349
  }, prefix), img && React__default.createElement("img", {
@@ -66345,24 +66362,36 @@
66345
66362
  className: classnames(classes.navigate),
66346
66363
  icon: "arrow_left",
66347
66364
  onClick: onPrevious,
66365
+ onKeyDown: function onKeyDown(event) {
66366
+ return handleKeyDown(event, onPrevious);
66367
+ },
66348
66368
  size: iconSize,
66349
- title: titlePrevious
66369
+ title: titlePrevious,
66370
+ tabIndex: 0
66350
66371
  }), React__default.createElement("span", {
66351
66372
  className: classes.label
66352
66373
  }, label), onNext && React__default.createElement(HiIcon$1, {
66353
66374
  className: classnames(classes.navigate),
66354
66375
  icon: "arrow_right",
66355
66376
  onClick: onNext,
66377
+ onKeyDown: function onKeyDown(event) {
66378
+ return handleKeyDown(event, onNext);
66379
+ },
66356
66380
  size: iconSize,
66357
- title: titleNext
66381
+ title: titleNext,
66382
+ tabIndex: 0
66358
66383
  }), onDelete && React__default.createElement(HiIcon$1, {
66359
66384
  classes: {
66360
66385
  root: classes.eraseIcon
66361
66386
  },
66362
66387
  icon: "cancel",
66363
66388
  onClick: onDelete,
66389
+ onKeyDown: function onKeyDown(event) {
66390
+ return handleKeyDown(event, onDelete);
66391
+ },
66364
66392
  size: iconSize,
66365
- title: titleDelete
66393
+ title: titleDelete,
66394
+ tabIndex: 0
66366
66395
  }));
66367
66396
  }
66368
66397
 
@@ -80365,7 +80394,7 @@
80365
80394
  '&:first-child': {
80366
80395
  borderTop: 'solid 1px #E4E7E8'
80367
80396
  },
80368
- '&:hover': {
80397
+ '&:hover, &:focus': {
80369
80398
  backgroundColor: "".concat(theme.palette.action.hover, " !important")
80370
80399
  }
80371
80400
  }
@@ -80412,11 +80441,18 @@
80412
80441
  onClick: function onClick(event) {
80413
80442
  return _this2.handleClick(event, rowdata);
80414
80443
  },
80444
+ onKeyDown: function onKeyDown(event) {
80445
+ if (keycode(event) === 'space' || keycode(event) === 'enter') {
80446
+ event.preventDefault();
80447
+
80448
+ _this2.handleClick(event, rowdata);
80449
+ }
80450
+ },
80415
80451
  key: key,
80416
80452
  style: {
80417
80453
  height: dense ? CELL_HEIGHT_DENSE : CELL_HEIGHT
80418
80454
  },
80419
- tabIndex: -1
80455
+ tabIndex: 0
80420
80456
  }, Object.keys(columns).map(function (key) {
80421
80457
  return React__default.createElement(HiCellBuilder, {
80422
80458
  key: columns[key].colId,