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

package/HiButton/HiButton.js

@@ -28,7 +28,13 @@ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 // @inheritedComponent Button
 var styles = function styles(theme) {
   return {
-    root: {},
+    root: {
+      '&$raisedDisabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
+      }
+    },
+    raisedDisabled: {},
     flatNeutral: {
       color: theme.palette.neutral.main,
       '&$disabled': {
@@ -193,7 +199,7 @@ function HiButton(props) {
   var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
   var fab = variant === 'fab' || variant === 'extendedFab';
   var contained = variant === 'contained' || variant === 'raised';
-  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));
+  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));
   return _react.default.createElement(_Button.default, (0, _extends2.default)({
     className: className,
     classes: {

package/HiChip/HiChip.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
@@ -107,6 +109,13 @@ var styles = function styles(theme) {
 
 exports.styles = styles;
 
+var handleKeyDown = function handleKeyDown(e, fn) {
+  if ((0, _keycode.default)(e) === 'space' || (0, _keycode.default)(e) === 'enter') {
+    e.preventDefault();
+    fn();
+  }
+};
+
 function HiChip(props) {
   var _classNames;
 
@@ -138,7 +147,11 @@ function HiChip(props) {
     icon: icon,
     size: iconSize,
     onClick: onIconClick,
-    title: titleIcon
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onIconClick);
+    },
+    title: titleIcon,
+    tabIndex: onIconClick ? 0 : -1
   }), prefix && _react.default.createElement("span", {
     className: classes.prefix
   }, prefix), img && _react.default.createElement("img", {
@@ -157,24 +170,36 @@ function HiChip(props) {
     className: (0, _classnames.default)(classes.navigate),
     icon: "arrow_left",
     onClick: onPrevious,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onPrevious);
+    },
     size: iconSize,
-    title: titlePrevious
+    title: titlePrevious,
+    tabIndex: 0
   }), _react.default.createElement("span", {
     className: classes.label
   }, label), onNext && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.navigate),
     icon: "arrow_right",
     onClick: onNext,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onNext);
+    },
     size: iconSize,
-    title: titleNext
+    title: titleNext,
+    tabIndex: 0
   }), onDelete && _react.default.createElement(_HiIcon.default, {
     classes: {
       root: classes.eraseIcon
     },
     icon: "cancel",
     onClick: onDelete,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onDelete);
+    },
     size: iconSize,
-    title: titleDelete
+    title: titleDelete,
+    tabIndex: 0
   }));
 }
 

package/HiTable/HiTableRow.js

@@ -25,6 +25,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
@@ -43,7 +45,7 @@ var styles = function styles(theme) {
       '&:first-child': {
         borderTop: 'solid 1px #E4E7E8'
       },
-      '&:hover': {
+      '&:hover, &:focus': {
         backgroundColor: "".concat(theme.palette.action.hover, " !important")
       }
     }
@@ -91,11 +93,18 @@ function (_React$PureComponent) {
         onClick: function onClick(event) {
           return _this2.handleClick(event, rowdata);
         },
+        onKeyDown: function onKeyDown(event) {
+          if ((0, _keycode.default)(event) === 'space' || (0, _keycode.default)(event) === 'enter') {
+            event.preventDefault();
+
+            _this2.handleClick(event, rowdata);
+          }
+        },
         key: key,
         style: {
           height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
         },
-        tabIndex: -1
+        tabIndex: 0
       }, Object.keys(columns).map(function (key) {
         return _react.default.createElement(_HiCellBuilder.default, {
           key: columns[key].colId,

package/es/HiButton/HiButton.js

@@ -8,7 +8,13 @@ import { withStyles } from '../styles';
 import { fade } from '../styles/colorManipulator';
 import Button from '@material-ui/core/Button';
 export const styles = theme => ({
-  root: {},
+  root: {
+    '&$raisedDisabled': {
+      color: theme.palette.neutral.contrastText,
+      backgroundColor: theme.palette.neutral.main
+    }
+  },
+  raisedDisabled: {},
   flatNeutral: {
     color: theme.palette.neutral.main,
     '&$disabled': {
@@ -172,6 +178,7 @@ function HiButton(props) {
   const fab = variant === 'fab' || variant === 'extendedFab';
   const contained = variant === 'contained' || variant === 'raised';
   const buttonClassNames = classNames(classes.root, {
+    [classes.raisedDisabled]: variant === 'raised' && disabled,
     [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
     [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
     [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',

package/es/HiChip/HiChip.js

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import keycode from 'keycode';
 import HiIcon from '../HiIcon';
 import withStyles from '../styles/withStyles';
 export const styles = theme => ({
@@ -86,6 +87,13 @@ export const styles = theme => ({
   }
 });
 
+const handleKeyDown = (e, fn) => {
+  if (keycode(e) === 'space' || keycode(e) === 'enter') {
+    e.preventDefault();
+    fn();
+  }
+};
+
 function HiChip(props) {
   const {
     label,
@@ -123,7 +131,9 @@ function HiChip(props) {
     icon: icon,
     size: iconSize,
     onClick: onIconClick,
-    title: titleIcon
+    onKeyDown: event => handleKeyDown(event, onIconClick),
+    title: titleIcon,
+    tabIndex: onIconClick ? 0 : -1
   }), prefix && React.createElement("span", {
     className: classes.prefix
   }, prefix), img && React.createElement("img", {
@@ -142,24 +152,30 @@ function HiChip(props) {
     className: classNames(classes.navigate),
     icon: "arrow_left",
     onClick: onPrevious,
+    onKeyDown: event => handleKeyDown(event, onPrevious),
     size: iconSize,
-    title: titlePrevious
+    title: titlePrevious,
+    tabIndex: 0
   }), React.createElement("span", {
     className: classes.label
   }, label), onNext && React.createElement(HiIcon, {
     className: classNames(classes.navigate),
     icon: "arrow_right",
     onClick: onNext,
+    onKeyDown: event => handleKeyDown(event, onNext),
     size: iconSize,
-    title: titleNext
+    title: titleNext,
+    tabIndex: 0
   }), onDelete && React.createElement(HiIcon, {
     classes: {
       root: classes.eraseIcon
     },
     icon: "cancel",
     onClick: onDelete,
+    onKeyDown: event => handleKeyDown(event, onDelete),
     size: iconSize,
-    title: titleDelete
+    title: titleDelete,
+    tabIndex: 0
   }));
 }
 

package/es/HiTable/HiTableRow.js

@@ -1,6 +1,7 @@
 // @inheritedComponent TableRow
 import React from 'react';
 import PropTypes from 'prop-types';
+import keycode from 'keycode';
 import withStyles from '../styles/withStyles';
 import TableRow from '@material-ui/core/TableRow';
 import HiCellBuilder from './HiCellBuilder';
@@ -13,7 +14,7 @@ export const styles = theme => ({
     '&:first-child': {
       borderTop: 'solid 1px #E4E7E8'
     },
-    '&:hover': {
+    '&:hover, &:focus': {
       backgroundColor: `${theme.palette.action.hover} !important`
     }
   }
@@ -44,11 +45,17 @@ class HiTableRow extends React.PureComponent {
       className: classes.row,
       hover: true,
       onClick: event => this.handleClick(event, rowdata),
+      onKeyDown: event => {
+        if (keycode(event) === 'space' || keycode(event) === 'enter') {
+          event.preventDefault();
+          this.handleClick(event, rowdata);
+        }
+      },
       key: key,
       style: {
         height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
       },
-      tabIndex: -1
+      tabIndex: 0
     }, Object.keys(columns).map(key => {
       return React.createElement(HiCellBuilder, {
         key: columns[key].colId,

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.48
+/** @license HiPay-Material-UI v2.0.0-beta.49
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.48
+/** @license HiPay-Material-UI v2.0.0-beta.49
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.48",
+  "version": "2.0.0-beta.49",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/umd/hipay-material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.48
+/** @license HiPay-Material-UI v2.0.0-beta.49
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13298,7 +13298,13 @@
 
             var styles = function styles(theme) {
               return {
-                root: {},
+                root: {
+                  '&$raisedDisabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
+                  }
+                },
+                raisedDisabled: {},
                 flatNeutral: {
                   color: theme.palette.neutral.main,
                   '&$disabled': {
@@ -13462,7 +13468,7 @@
               var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
               var fab = variant === 'fab' || variant === 'extendedFab';
               var contained = variant === 'contained' || variant === 'raised';
-              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));
+              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));
               return React__default.createElement(Button$2, _extends_1({
                 className: className,
                 classes: {
@@ -66295,6 +66301,13 @@
               };
             };
 
+            var handleKeyDown = function handleKeyDown(e, fn) {
+              if (keycode(e) === 'space' || keycode(e) === 'enter') {
+                e.preventDefault();
+                fn();
+              }
+            };
+
             function HiChip(props) {
               var _classNames;
 
@@ -66326,7 +66339,11 @@
                 icon: icon,
                 size: iconSize,
                 onClick: onIconClick,
-                title: titleIcon
+                onKeyDown: function onKeyDown(event) {
+                  return handleKeyDown(event, onIconClick);
+                },
+                title: titleIcon,
+                tabIndex: onIconClick ? 0 : -1
               }), prefix && React__default.createElement("span", {
                 className: classes.prefix
               }, prefix), img && React__default.createElement("img", {
@@ -66345,24 +66362,36 @@
                 className: classnames(classes.navigate),
                 icon: "arrow_left",
                 onClick: onPrevious,
+                onKeyDown: function onKeyDown(event) {
+                  return handleKeyDown(event, onPrevious);
+                },
                 size: iconSize,
-                title: titlePrevious
+                title: titlePrevious,
+                tabIndex: 0
               }), React__default.createElement("span", {
                 className: classes.label
               }, label), onNext && React__default.createElement(HiIcon$1, {
                 className: classnames(classes.navigate),
                 icon: "arrow_right",
                 onClick: onNext,
+                onKeyDown: function onKeyDown(event) {
+                  return handleKeyDown(event, onNext);
+                },
                 size: iconSize,
-                title: titleNext
+                title: titleNext,
+                tabIndex: 0
               }), onDelete && React__default.createElement(HiIcon$1, {
                 classes: {
                   root: classes.eraseIcon
                 },
                 icon: "cancel",
                 onClick: onDelete,
+                onKeyDown: function onKeyDown(event) {
+                  return handleKeyDown(event, onDelete);
+                },
                 size: iconSize,
-                title: titleDelete
+                title: titleDelete,
+                tabIndex: 0
               }));
             }
 
@@ -80365,7 +80394,7 @@
                   '&:first-child': {
                     borderTop: 'solid 1px #E4E7E8'
                   },
-                  '&:hover': {
+                  '&:hover, &:focus': {
                     backgroundColor: "".concat(theme.palette.action.hover, " !important")
                   }
                 }
@@ -80412,11 +80441,18 @@
                     onClick: function onClick(event) {
                       return _this2.handleClick(event, rowdata);
                     },
+                    onKeyDown: function onKeyDown(event) {
+                      if (keycode(event) === 'space' || keycode(event) === 'enter') {
+                        event.preventDefault();
+
+                        _this2.handleClick(event, rowdata);
+                      }
+                    },
                     key: key,
                     style: {
                       height: dense ? CELL_HEIGHT_DENSE : CELL_HEIGHT
                     },
-                    tabIndex: -1
+                    tabIndex: 0
                   }, Object.keys(columns).map(function (key) {
                     return React__default.createElement(HiCellBuilder, {
                       key: columns[key].colId,