@hipay/hipay-material-ui 2.0.0-beta.76 → 2.1.0

package/es/HiSelect/HiSuggestSelect.js

@@ -41,7 +41,8 @@ class HiSuggestSelect extends React.PureComponent {
   static getDerivedStateFromProps(props, state) {
     if (JSON.stringify(props.options) !== JSON.stringify(state.options)) {
       return {
-        options: props.options
+        options: props.options,
+        suggestionFocusIndex: -1
       };
     }
 
@@ -51,6 +52,14 @@ class HiSuggestSelect extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    this.getInputElement = el => {
+      this.textInput = el;
+
+      if (this.props.inputRef) {
+        this.props.inputRef(this.textInput);
+      }
+    };
+
     this.handleSelect = (event, value) => {
       document.body.style.overflow = 'auto';
       this.props.onSelect(event, value);
@@ -88,67 +97,65 @@ class HiSuggestSelect extends React.PureComponent {
     };
 
     this.handleKeyDownSearch = event => {
-      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-        document.body.style.overflow = 'hidden'; // On récupère la div parent "overlay"
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
 
-        const overlay = findDOMNode(this.overlay);
-        setTimeout(() => {
-          // On recupère tous les items
-          const items = overlay.getElementsByTagName('li');
+        if (this.state.suggestionFocusIndex < this.props.options.length - 1) {
+          this.setState(prevState => ({
+            suggestionFocusIndex: prevState.suggestionFocusIndex + 1
+          }));
+        }
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
 
-          if (items.length) {
-            // On focus sur le premier
-            items[0].focus();
-          }
-        }, 1);
+        if (this.state.suggestionFocusIndex >= 0) {
+          this.setState(prevState => ({
+            suggestionFocusIndex: prevState.suggestionFocusIndex - 1
+          }));
+        }
+      } else if (event.key === 'Enter' && this.state.suggestionFocusIndex >= 0) {
+        event.preventDefault(); // Suggestion focused
+
+        this.handleSelect(event, this.state.options[this.state.suggestionFocusIndex]);
       } else if (event.key === 'Escape') {
         this.setState({
-          options: []
+          options: [],
+          suggestionFocusIndex: -1
         });
       }
     };
 
-    this.state = {
-      focused: false,
-      options: props.options
-    };
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.getInputElement = this.getInputElement.bind(this);
-  }
-
-  getInputElement(el) {
-    this.textInput = el;
-
-    if (this.props.inputRef) {
-      this.props.inputRef(this.textInput);
-    }
-  }
-
-  handleFocus(event) {
-    this.setState({
-      focused: true
-    });
-
-    if (this.props.onFocusInput) {
-      this.props.onFocusInput(event);
-    }
-  }
-
-  handleBlur(event) {
-    // Si on click sur un élément de HiInput, on garde le focus
-    // Par exemple sur l'icone reset
-    if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
+    this.handleFocus = event => {
       this.setState({
-        options: [],
-        focused: false
+        focused: true
       });
 
-      if (this.props.onBlurInput) {
-        this.props.onBlurInput(event);
+      if (this.props.onFocusInput) {
+        this.props.onFocusInput(event);
       }
-    }
+    };
+
+    this.handleBlur = event => {
+      // Si on click sur un élément de HiInput, on garde le focus
+      // Par exemple sur l'icone reset
+      if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
+        this.setState({
+          options: [],
+          focused: false,
+          suggestionFocusIndex: -1
+        });
+
+        if (this.props.onBlurInput) {
+          this.props.onBlurInput(event);
+        }
+      }
+    };
+
+    this.state = {
+      focused: false,
+      options: props.options,
+      suggestionFocusIndex: -1
+    };
   }
 
   render() {
@@ -168,7 +175,8 @@ class HiSuggestSelect extends React.PureComponent {
 
     const {
       focused,
-      options
+      options,
+      suggestionFocusIndex
     } = this.state;
     let optionsShown = options; // If loading
 
@@ -230,7 +238,8 @@ class HiSuggestSelect extends React.PureComponent {
       hideCheckbox: true,
       onSelect: this.handleSelect,
       translations: translations,
-      onKeyDown: this.handleKeyDown
+      onKeyDown: this.handleKeyDown,
+      suggestionFocusIndex: suggestionFocusIndex
     })))));
   }
 

package/es/HiSelectableList/HiSelectableList.js

@@ -8,9 +8,14 @@ import HiSelectableListItem from './HiSelectableListItem';
 import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import keycode from 'keycode';
 import LazyLoad, { forceCheck } from 'react-lazyload';
-export const styles = () => ({
+import classNames from 'classnames';
+export const styles = theme => ({
   root: {
     padding: 0
+  },
+  suggestionFocus: {
+    backgroundColor: theme.palette.action.hover,
+    fontWeight: theme.typography.fontWeightMedium
   }
 });
 /**
@@ -44,7 +49,7 @@ class HiSelectableList extends React.PureComponent {
       }
     };
 
-    this.buildRecursiveListItem = (item, level = 0) => {
+    this.buildRecursiveListItem = (item, index, level = 0) => {
       const _this$props = this.props,
             {
         checkedIcon,
@@ -57,9 +62,11 @@ class HiSelectableList extends React.PureComponent {
         selectedItemIdList,
         sort,
         onKeyDown,
-        onKeyUp
+        onKeyUp,
+        suggestionFocusIndex,
+        classes
       } = _this$props,
-            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
+            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes"]);
 
       if (sort && item.children) {
         item.children.sort(this.compareItem);
@@ -95,8 +102,13 @@ class HiSelectableList extends React.PureComponent {
         onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
         ,
-        item: item
-      }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, level + 1)));
+        item: item,
+        classes: {
+          listItem: classNames({
+            [classes.suggestionFocus]: index === suggestionFocusIndex
+          })
+        }
+      }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, index, level + 1)));
 
       if (lazy) {
         return React.createElement(LazyLoad, {
@@ -188,7 +200,7 @@ class HiSelectableList extends React.PureComponent {
         this.el = el;
       }
     }, itemList.filter(item => !(item.displayed === false)) // don't remove if undefined
-    .map(item => this.buildRecursiveListItem(item)));
+    .map((item, index) => this.buildRecursiveListItem(item, index)));
   }
 
 }
@@ -277,6 +289,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   selectedItemIdList: PropTypes.array,
 
+  /**
+   * Index de l'item "focus"
+   */
+  suggestionFocusIndex: PropTypes.number,
+
   /**
    * Tri des éléments selon leur label
    */
@@ -294,5 +311,6 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 export default withStyles(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectableList'
+  name: 'HmuiHiSelectableList',
+  index: 51
 })(HiSelectableList);

package/es/HiSelectableList/HiSelectableListItem.js

@@ -330,7 +330,7 @@ class HiSelectableListItem extends React.PureComponent {
       indeterminateIcon: indeterminateIcon
     }), type === 'image' && img && React.createElement("img", {
       src: img,
-      alt: img,
+      alt: '',
       onError: e => {
         if (fallbackImage) {
           e.target.src = `${fallbackImage}`;

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.76
+/** @license HiPay-Material-UI v2.1.0
  *
  * 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.76
+/** @license HiPay-Material-UI v2.1.0
  *
  * 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.76",
+  "version": "2.1.0",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",