@hipay/hipay-material-ui 2.0.0-beta.57 → 2.0.0-beta.58

package/CHANGELOG.md

@@ -1,3 +1,61 @@
+# [2.0.0-beta.58](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.58) (2018-12-13)
+
+
+### Bug Fixes
+
+* **eslint:** remove eslint warrnings in components (ignore test files) ([d236c62](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d236c62))
+* **HiBreadcrumb:** clean eslint warnings ([6db12fb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6db12fb))
+* **HiDatePicker:** add static positions for custom overlays ([c3edf24](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c3edf24))
+* **HiExpansionPanel:** Fix props type a requirement ([cbc3b48](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cbc3b48))
+* **HiInput:** handle focus state through prop when needed to override default comportment ([9a133cc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a133cc))
+* **HiKpiNotice:** eslint clean warnings ([11b5552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/11b5552))
+* **HiSelect:** Fix build of HiSelectContent ([4b87f78](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4b87f78))
+* **HiSelect:** focus on undefined item ([2d084e6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2d084e6))
+* **HiSelect:** handle staticPosition & width properly for HiDateRangeSelector usage ([7b19ffb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7b19ffb))
+* **HiSelectableListItem:** disabled item checkbox color ([9f10552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9f10552))
+* **HiSelectableListItem:** remove item width ([a913945](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a913945))
+* **HiSelectContent:** Remove compute of input value ([b86db83](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b86db83))
+* **HiSlider:** eslint clean warnings ([08964b1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/08964b1))
+* **HiUploadField:** clean eslint warnings ([c76aaf1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c76aaf1))
+* **migration:** fix contrast threshold ... ([6fb3b18](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6fb3b18))
+* **package:** add cross-env ([7098fd6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7098fd6))
+
+
+### Features
+
+* **CellImage:** Handle fallbackImage ([254799d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/254799d))
+* **CellSentinel:** Uniformize cell api with front CellSentinel ([4e2975b](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4e2975b))
+* **CellSentinel:** Update CellSentinel to the new way (split each result in different column) ([efe2711](https://gitlab.hipay.org/backend/hipay-material-ui/commit/efe2711))
+* **CellSentinelScore:** Add CellSentinelScore ([2fff04d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2fff04d))
+* **CellText:** Handle active prop in CellText & column views in HiTable ([4366e60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4366e60))
+* **HiCells:** Add simple cells types (Address, Date, Icon, Image, Numeric, PinToAction, Rate, Senti ([f688517](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f688517))
+* **HiDatePicker:** BREAKING CHANGE - add local prop to handle calendar translations ([b1b3743](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1b3743))
+* **HiIcon:** Add mdi-material-ui as available icons via 'mdi_' prefix ([1091d6d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/1091d6d))
+* **HiMap:** unregister fetch on unmount ([0afa931](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0afa931))
+* **HiSelect:** Add (NEW) HiSelect, HiNestedSelect, HiDynamicSelect ([4c6447e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4c6447e))
+* **HiSelect:** Reset search input on blur & on close ([d9af584](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d9af584))
+* **HiSelectableList:** Add sort props to sort item list on label ([f412ddc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f412ddc))
+* **HiSelectContent:** Add new HiSelectContent & HiNestedSelectContent ([215ad8f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/215ad8f))
+* **HiSelectContent:** export utils functions ([7c41d87](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7c41d87))
+* **HiUploadField:** rename component HiUploadField ([593f77e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/593f77e))
+* **notice:** Création notice KPI ([bba3f89](https://gitlab.hipay.org/backend/hipay-material-ui/commit/bba3f89))
+
+
+### Performance Improvements
+
+* **PureFunction:** Use pure & functional components ([220c686](https://gitlab.hipay.org/backend/hipay-material-ui/commit/220c686))
+
+
+### BREAKING CHANGES
+
+* **HiDatePicker:** Required "local" props (use polyglot, p.currentLocal)
+* **HiUploadField:** Components names changes
+* **HiCells:** Remove CellCountry, CellThirdParty, CellStatus & CellAccount (use generic type
+CellImage & CellText)
+* **HiSelect:** HiSelect API change, use HiNestedSelect or HiDynamicSelect relative to situation
+
+
+
 <a name="2.0.0-beta.41"></a>
 # [2.0.0-beta.41](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.41) (2018-12-07)
 

package/HiAlertModal/HiAlertModal.js

@@ -41,20 +41,28 @@ var _styles = require("../styles");
 
 var _HiButton = _interopRequireDefault(require("../HiButton"));
 
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
 // @inheritedComponent Dialog
 var styles = function styles(theme) {
   return {
     classContent: {
       fontSize: 14,
-      lineHeight: '24px',
-      color: '#484848'
+      lineHeight: '20px',
+      color: '#484848',
+      position: 'relative'
     },
-    classPaper: {
-      maxWidth: 300
+    classDialogPaper: {
+      minHeight: 280,
+      maxWidth: 280,
+      borderRadius: 2
     },
     classCancelButton: {
       float: 'right'
     },
+    classSubmitButton: {
+      margin: '0'
+    },
     classTitle: {
       fontSize: 20,
       fontFamily: theme.typography.fontFamily,
@@ -62,10 +70,20 @@ var styles = function styles(theme) {
       lineHeight: '24px'
     },
     classAction: {
-      display: 'inline-block'
+      display: 'inline-block',
+      margin: '0',
+      padding: '0px 24px 24px 24px'
     },
     classDialogRoot: {
       backgroundColor: 'rgba(0, 0, 0, 0.28)'
+    },
+    classBackgroundIcon: {
+      position: 'absolute',
+      top: 'calc(50%)',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      color: theme.palette.background2,
+      flex: '1'
     }
   };
 };
@@ -117,6 +135,8 @@ function (_React$PureComponent) {
     // Render
     value: function render() {
       var _this$props = this.props,
+          backgroundIcon = _this$props.backgroundIcon,
+          iconSize = _this$props.iconSize,
           classes = _this$props.classes,
           content = _this$props.content,
           labelCancelButton = _this$props.labelCancelButton,
@@ -124,17 +144,23 @@ function (_React$PureComponent) {
           onCancelClick = _this$props.onCancelClick,
           onSubmitClick = _this$props.onSubmitClick,
           open = _this$props.open,
+          cancelColor = _this$props.cancelColor,
           submitColor = _this$props.submitColor,
           title = _this$props.title,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "submitColor", "title"]);
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["backgroundIcon", "iconSize", "classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title"]);
       return _react.default.createElement(_Dialog.default, (0, _extends2.default)({
         open: open,
         onClose: this.handleOnClose,
         classes: {
-          paper: classes.classPaper,
-          root: classes.classDialogRoot
+          root: classes.classDialogRoot,
+          paper: classes.classDialogPaper
         }
-      }, props), _react.default.createElement(_DialogTitle.default, {
+      }, props), backgroundIcon && _react.default.createElement("div", {
+        className: classes.classBackgroundIcon
+      }, _react.default.createElement(_HiIcon.default, {
+        icon: backgroundIcon,
+        size: iconSize
+      })), _react.default.createElement(_DialogTitle.default, {
         disableTypography: true,
         classes: {
           root: classes.classTitle
@@ -147,22 +173,39 @@ function (_React$PureComponent) {
         classes: {
           root: classes.classAction
         }
-      }, _react.default.createElement(_HiButton.default, {
+      }, labelSubmitButton && _react.default.createElement(_HiButton.default, {
+        classes: {
+          root: classes.classSubmitButton
+        },
         onClick: this.handleClickSubmit,
         color: submitColor
-      }, labelSubmitButton), _react.default.createElement(_HiButton.default, {
+      }, labelSubmitButton), labelCancelButton && _react.default.createElement(_HiButton.default, {
         classes: {
           root: classes.classCancelButton
         },
         onClick: this.handleClickCancel,
-        color: "neutral"
+        color: cancelColor
       }, labelCancelButton)));
     }
   }]);
   return HiAlertModal;
 }(_react.default.PureComponent);
 
+HiAlertModal.defaultProps = {
+  cancelColor: 'neutral',
+  submitColor: 'primary'
+};
 HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Icon à mettre en fond
+   */
+  backgroundIcon: _propTypes.default.string,
+
+  /**
+   * The color of the cancel button. It supports those theme colors that make sense for this component.
+   */
+  cancelColor: _propTypes.default.oneOf(['default', 'inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+
   /**
    * Surcharge les classes du composant
    */
@@ -171,7 +214,7 @@ HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Texte contenu dans la modal
    */
-  content: _propTypes.default.string,
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Texte sur le bouton d'annulation

package/HiForm/HiFormControl.js

@@ -252,14 +252,12 @@ function (_React$PureComponent) {
         focused: !disabled && (focused || hovered)
       }, InputLabelProps), error && errorText && _react.default.createElement(_HiIconButton.default, {
         className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError),
-        onClick: this.handleHelperClick,
-        onKeyDown: this.handleKeyDown
+        onClick: this.handleHelperClick
       }, _react.default.createElement(_Warning.default, {
         className: (0, _classnames.default)(classes.icon)
       })), helperIcon && helperText && !error && _react.default.createElement(_HiIconButton.default, {
         className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (0, _defineProperty2.default)({}, classes.iconButtonInfoActive, helperOpen)),
-        onClick: this.handleHelperClick,
-        onKeyDown: this.handleKeyDown
+        onClick: this.handleHelperClick
       }, _react.default.createElement(_Info.default, {
         className: (0, _classnames.default)(classes.icon)
       }))), _react.default.createElement("div", {

package/HiForm/HiInput.js

@@ -215,10 +215,15 @@ function (_React$PureComponent) {
       // Si on click sur un élément de HiInput, on garde le focus
       // Par exemple sur l'icone reset
       if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
-        if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
+        // If blur came from erase icon => stay focused and don't call onBlur props
+        if (this.eraseIconNode && this.eraseIconNode.contains(event.relatedTarget)) {
+          event.preventDefault();
+          event.stopPropagation();
+        } else if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
           this.props.onBlur(event);
         }
 
+        event.preventDefault();
         event.stopPropagation();
       } else {
         this.setState({
@@ -240,9 +245,13 @@ function (_React$PureComponent) {
           this.setState({
             focused: true
           });
-        }
+        } // If focus came from erase icon => stay focused and don't call onFocus props
+
 
-        if (this.props.onFocus) {
+        if (this.eraseIconNode && this.eraseIconNode.contains(event.relatedTarget)) {
+          event.preventDefault();
+          event.stopPropagation();
+        } else if (this.props.onFocus) {
           this.props.onFocus(event);
         }
       }
@@ -342,7 +351,10 @@ function (_React$PureComponent) {
           label: classes.eraseButtonLabel
         },
         onClick: this.handleReset,
-        onBlur: this.handleBlur
+        onBlur: this.handleBlur,
+        buttonRef: function buttonRef(el) {
+          _this2.eraseIconNode = el;
+        }
       }, _ref);
 
       var endAdornment = endAdornmentProps;

package/HiForm/HiUploadField.js

@@ -49,7 +49,8 @@ var styles = function styles(theme) {
       fontSize: '80px'
     },
     inputContainer: {
-      flex: '1'
+      flex: '1',
+      width: 'calc(100% - 88px)'
     },
     empty: {
       border: "1px solid ".concat(theme.palette.input.bottomLine),

package/HiSelect/HiSelect.js

@@ -249,17 +249,13 @@ function (_React$PureComponent) {
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
       } else if (event.key === 'ArrowUp') {
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
-      } else if (event.key === 'Tab') {
+      } else if (event.key === 'Tab' || event.key === 'Escape') {
         /* if (!this.props.staticPosition) {
             document.body.style.overflow = 'auto';
         } */
         _this.setState({
           open: false
         });
-      } else if (event.key === 'Escape') {
-        _this.setState({
-          open: false
-        });
       }
 
       if (nextItem) {
@@ -272,6 +268,10 @@ function (_React$PureComponent) {
         _this.focusOnSelectedItem();
       } else if (event.key === 'Enter' && _this.props.onSubmit) {
         _this.props.onSubmit(event);
+      } else if (event.key === 'Tab' || event.key === 'Escape') {
+        _this.setState({
+          open: false
+        });
       }
     };
 
@@ -750,6 +750,7 @@ function (_React$PureComponent) {
         onClick: this.handleClick,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
+        onKeyDown: this.handleKeyDown,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave,
         refElement: function refElement(el) {

package/HiSelect/HiSuggestSelect.js

@@ -62,7 +62,8 @@ var styles = function styles(theme) {
       width: '100% !important',
       transform: 'none !important',
       zIndex: '9 !important',
-      top: '100% !important'
+      top: '100% !important',
+      textOverflow: 'ellipsis'
     },
     paper: {
       borderRadius: '0px 2px',

package/HiSelect/SelectInput.js

@@ -229,6 +229,7 @@ function (_React$PureComponent) {
         className: iconClass,
         icon: "arrow_drop_down"
       })) : _react.default.createElement(_ButtonBase.default, {
+        component: "div",
         id: id,
         classes: {
           root: rootClass

package/HiSelectNew/HiSelect.js

@@ -37,8 +37,6 @@ var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 
 var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
 
-var _reactDom = require("react-dom");
-
 var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
 
 var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
@@ -224,11 +222,13 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnFirstItem = function () {
-      var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
-      setTimeout(function () {
-        var item = overlay.getElementsByTagName('li')[0];
-        item.focus();
-      }, 1);
+      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(function () {
+          var item = _this.overlay.getElementsByTagName('li')[0];
+
+          item.focus();
+        }, 1);
+      }
     };
 
     _this.getInputElement = function (el) {
@@ -267,15 +267,14 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnSelectedItem = function (selectedValue) {
-      var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
       setTimeout(function () {
         // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-        var item = overlay.getElementsByTagName('li')[0];
+        var item = _this.overlay.getElementsByTagName('li')[0];
 
         if (selectedValue && typeof selectedValue === 'string') {
-          item = overlay.getElementsByTagName('li')[selectedValue];
+          item = _this.overlay.getElementsByTagName('li')[selectedValue];
         } else if (selectedValue && typeof selectedValue === 'number') {
-          item = overlay.getElementsByTagName('li')[selectedValue - 1];
+          item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
         }
 
         if (item) {
@@ -313,6 +312,18 @@ function (_React$PureComponent) {
       });
     };
 
+    _this.handleKeyDownInput = function (event) {
+      var key = (0, _keycode.default)(event);
+
+      if (key === 'down' || key === 'up') {
+        _this.handleClick();
+      } else if (key === 'enter' && _this.props.onSubmit) {
+        event.preventDefault();
+
+        _this.props.onSubmit(event);
+      }
+    };
+
     _this.handleKeyDown = function (event) {
       var nextItem;
       var key = (0, _keycode.default)(event);
@@ -323,6 +334,13 @@ function (_React$PureComponent) {
       } else if (key === 'up') {
         event.preventDefault();
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
+      } else if (key === 'tab' || key === 'esc') {
+        _this.setState({
+          open: false
+        });
+      } else if (key === 'space') {
+        // Cancel scroll
+        event.preventDefault();
       }
 
       if (nextItem) {
@@ -330,21 +348,58 @@ function (_React$PureComponent) {
       }
     };
 
+    _this.getItemById = function (id) {
+      var item;
+
+      if (_this.props.hasAll && String(id) === '_all') {
+        return {
+          id: '_all'
+        };
+      }
+
+      for (var i = 0; i < _this.props.options.length; i += 1) {
+        var elem = _this.props.options[i];
+
+        if (String(elem.id) === String(id)) {
+          item = elem;
+          break;
+        }
+
+        if (elem.children) {
+          for (var j = 0; j < elem.children.length; j += 1) {
+            if (String(elem.children[j].id) === String(id)) {
+              item = elem.children[j];
+              break;
+            }
+          }
+        }
+      }
+
+      return item;
+    };
+
     _this.handleKeyUp = function (event) {
       var key = (0, _keycode.default)(event);
 
-      if (key === 'tab' || key === 'esc') {
+      if (key === 'esc') {
         _this.setState({
           open: false
         });
       } else if (key === 'space' || key === 'enter' && !_this.props.multiple) {
         event.preventDefault();
 
-        var item = _this.props.options.find(function (elem) {
-          return String(elem.id) === event.target.id;
-        });
+        var item = _this.getItemById(event.target.id);
 
-        _this.handleSelect(null, item);
+        if (item) {
+          // Select for nested select
+          if (_this.props.hiSelectableListProps && _this.props.hiSelectableListProps.onSelect) {
+            _this.props.hiSelectableListProps.onSelect(null, item);
+          } else {
+            _this.handleSelect(null, item);
+          }
+        } else {
+          console.warn("Can not find item #".concat(event.target.id));
+        }
       } else if (key === 'enter' && _this.props.multiple) {
         event.preventDefault();
 
@@ -361,6 +416,10 @@ function (_React$PureComponent) {
         event.preventDefault();
 
         _this.handleClose();
+      } else if (key === 'tab') {
+        _this.setState({
+          open: false
+        });
       }
     };
 
@@ -543,7 +602,7 @@ function (_React$PureComponent) {
       var popperClass = (0, _classnames.default)(classes.popper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.popperWidth, !this.props.containerWidth), (0, _defineProperty2.default)(_classNames, classes.popperRightAlign, this.props.containerWidth && this.props.align === 'right'), _classNames));
 
       var searchInput = function searchInput(position) {
-        if (!!searchable) {
+        if (searchable) {
           return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
             value: searchValue,
             autoFocus: true,
@@ -567,7 +626,7 @@ function (_React$PureComponent) {
         var nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
         popperStyle.transform = "translate3d(-1px, -".concat(nbItems * 40 + 2, "px, 0px)");
       } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
-        popperStyle.transform = "translate3d(-1px, 40px, 0px)";
+        popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
       }
 
       var content = function content(_ref) {
@@ -624,6 +683,7 @@ function (_React$PureComponent) {
         onClick: this.handleClick,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
+        onKeyDown: this.handleKeyDownInput,
         onSubmit: onSubmit,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave,

package/HiSelectNew/HiSelectInput.js

@@ -172,6 +172,8 @@ function (_React$PureComponent) {
 
       if (_this.props.onKeyDown) {
         _this.props.onKeyDown(event);
+
+        event.preventDefault();
       } else if (key === 'down' || key === 'up') {
         _this.props.onClick();
       } else if (key === 'enter' && _this.props.onSubmit) {
@@ -193,8 +195,12 @@ function (_React$PureComponent) {
     };
 
     _this.handleClick = function (event) {
+      // Do not open select if press on resetIcon
       if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
-        _this.props.onClick(event);
+        // Do not open select if press enter on button => submit form
+        if (event.type !== 'keydown' || (0, _keycode.default)(event) !== 'enter') {
+          _this.props.onClick(event);
+        }
       }
     };
 
@@ -269,6 +275,7 @@ function (_React$PureComponent) {
       }, value || placeholder), _react.default.createElement(_ArrowDropDown.default, {
         className: iconClass
       })) : _react.default.createElement(_ButtonBase.default, {
+        component: "div",
         id: id,
         className: rootClass,
         onClick: this.handleClick,

package/HiSelectableList/HiSelectableList.js

@@ -33,8 +33,6 @@ var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListIt
 
 var _helpers = require("../utils/helpers");
 
-var _keycode = _interopRequireDefault(require("keycode"));
-
 var styles = function styles() {
   return {
     root: {
@@ -73,35 +71,6 @@ function (_React$PureComponent) {
       };
     };
 
-    _this.handleKeyDown = function (event) {
-      var nextItem;
-      var key = (0, _keycode.default)(event);
-
-      if (key === 'down') {
-        event.preventDefault();
-        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
-      } else if (key === 'up') {
-        event.preventDefault();
-        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
-      } else if (key === 'space' || key === 'enter' && !_this.props.multiple) {
-        event.preventDefault();
-
-        var item = _this.props.options.find(function (elem) {
-          return String(elem.id) === event.target.id;
-        });
-
-        _this.handleSelect(null, item);
-      }
-
-      if (nextItem) {
-        nextItem.focus();
-      }
-    };
-
-    _this.handleKeyUp = function () {
-      return false;
-    };
-
     _this.buildRecursiveListItem = function (item) {
       var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var _this$props = _this.props,
@@ -113,10 +82,8 @@ function (_React$PureComponent) {
           icon = _this$props.icon,
           selectedItemIdList = _this$props.selectedItemIdList,
           sort = _this$props.sort,
-          _this$props$onKeyDown = _this$props.onKeyDown,
-          onKeyDown = _this$props$onKeyDown === void 0 ? _this.handleKeyDown : _this$props$onKeyDown,
-          _this$props$onKeyUp = _this$props.onKeyUp,
-          onKeyUp = _this$props$onKeyUp === void 0 ? _this.handleKeyUp : _this$props$onKeyUp,
+          onKeyDown = _this$props.onKeyDown,
+          onKeyUp = _this$props.onKeyUp,
           others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 
       if (sort && item.children) {