@hipay/hipay-material-ui 2.0.0-beta.61 → 2.0.0-beta.63

package/es/{HiSelectNew → HiSelect}/HiSelectContent.js

@@ -37,7 +37,7 @@ export const styles = theme => ({
     width: '100%'
   })
 });
-export var filterValue = function (item, searchValue) {
+export const filterValue = function (item, searchValue) {
   return searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1;
 };
 /**

package/es/HiSelect/index.js

@@ -1,5 +1,8 @@
 export { default } from './HiSelect';
+export { default as HiNestedSelect } from './HiNestedSelect';
 export { default as HiSelectField } from './HiSelectField';
-export { default as SelectInput } from './SelectInput';
+export { default as HiSelectInput } from './HiSelectInput';
+export { default as HiSelectContent } from './HiSelectContent';
+export { default as HiNestedSelectContent, findFinalItemRecursively, getRecursiveFinalItemIdList } from './HiNestedSelectContent';
 export { default as HiSuggestSelect } from './HiSuggestSelect';
 export { default as HiSuggestSelectField } from './HiSuggestSelectField';

package/es/HiSelectableList/HiSelectableList.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
 import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
-import { foldAccents } from '../utils/helpers';
+import { getNextItemSelectable, foldAccents } from '../utils/helpers';
+import keycode from 'keycode';
 export const styles = () => ({
   root: {
     padding: 0
@@ -13,6 +14,8 @@ export const styles = () => ({
 });
 /**
  * Construit une liste d'item sélectionnable (avec checkbox)
+ * - la navigation au clavier est gérée par l'event KeyDown
+ * - le premier focus est géré sur le DidMount
  */
 
 class HiSelectableList extends React.PureComponent {
@@ -23,6 +26,23 @@ class HiSelectableList extends React.PureComponent {
       this.props.onSelect(event, item);
     };
 
+    this.handleKeyDown = event => {
+      let nextItem;
+      const key = keycode(event);
+
+      if (key === 'down') {
+        event.preventDefault();
+        nextItem = getNextItemSelectable(document.activeElement, 'down');
+      } else if (key === 'up') {
+        event.preventDefault();
+        nextItem = getNextItemSelectable(document.activeElement, 'up');
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
     this.buildRecursiveListItem = (item, level = 0) => {
       const _this$props = this.props,
             {
@@ -56,7 +76,8 @@ class HiSelectableList extends React.PureComponent {
         onKeyDown: onKeyDown,
         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)));
     };
 
@@ -83,6 +104,23 @@ class HiSelectableList extends React.PureComponent {
     };
   }
 
+  componentDidMount() {
+    if (this.props.overlay && this.props.overlay.getElementsByTagName('li')[0]) {
+      let item = this.props.overlay.getElementsByTagName('li')[0];
+      const value = this.props.value && typeof this.props.value === 'object' ? this.props.value[0] : this.props.value;
+
+      if (value) {
+        if (typeof this.props.value[0] === 'string') {
+          item = this.props.overlay.getElementsByTagName('li')[value];
+        } else if (typeof this.props.value[0] === 'number') {
+          item = this.props.overlay.getElementsByTagName('li')[value - 1];
+        }
+      }
+
+      item.focus();
+    }
+  }
+
   render() {
     const {
       classes,
@@ -95,7 +133,11 @@ class HiSelectableList extends React.PureComponent {
     }
 
     return React.createElement(List, {
-      className: classes.root
+      className: classes.root,
+      onKeyDown: this.handleKeyDown,
+      innerRef: el => {
+        this.el = el;
+      }
     }, itemList.filter(item => !(item.displayed === false)) // don't remove if undefined
     .map(item => this.buildRecursiveListItem(item)));
   }
@@ -170,6 +212,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSelect: PropTypes.func.isRequired,
 
+  /**
+   * Overlay récupéré au niveau de la div précédant le HiSelectInput
+   */
+  overlay: PropTypes.object,
+
   /**
    * Liste des id des éléments sélectionnés
    */
@@ -183,7 +230,12 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Liste des éléments à placer en premier, peu import le tri
    */
-  sortAppendList: PropTypes.array
+  sortAppendList: PropTypes.array,
+
+  /**
+   * Value(s) du select
+   */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
 } : {};
 export default withStyles(styles, {
   hiComponent: true,

package/es/HiSelectableList/HiSelectableListItem.js

@@ -12,6 +12,7 @@ import HiLoader from '../HiLoader';
 import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/helpers';
 import pure from 'recompose/pure';
+import keycode from 'keycode';
 const PureListSubheader = pure(ListSubheader);
 const PureListItem = pure(ListItem);
 export const styles = theme => ({
@@ -160,6 +161,7 @@ export const styles = theme => ({
 });
 /**
  * Construit un élément de liste sélectionnable (avec checkbox)
+ * - la sélection/déséclection d'un item est géré avec KeyDown
  */
 
 class HiSelectableListItem extends React.PureComponent {
@@ -172,6 +174,18 @@ class HiSelectableListItem extends React.PureComponent {
       });
     };
 
+    this.handleKeyDown = item => event => {
+      const key = keycode(event);
+
+      if (key === 'space' || key === 'enter') {
+        event.preventDefault();
+
+        if (item) {
+          this.props.onSelect(null, item);
+        }
+      }
+    };
+
     this.state = {
       hover: false
     };
@@ -236,8 +250,6 @@ class HiSelectableListItem extends React.PureComponent {
       fallbackImage,
       hideCheckbox,
       onSelect,
-      onKeyDown,
-      onKeyUp,
       indeterminate,
       indeterminateIcon,
       icon,
@@ -253,7 +265,8 @@ class HiSelectableListItem extends React.PureComponent {
       secondaryLabel,
       thin,
       type,
-      color
+      color,
+      item
     } = this.props; // Return simple loader list item
 
     if (type === 'loader') {
@@ -294,8 +307,7 @@ class HiSelectableListItem extends React.PureComponent {
       onClick: onSelect,
       onMouseEnter: this.setHover(true),
       onMouseLeave: this.setHover(false),
-      onKeyDown,
-      onKeyUp
+      onKeyDown: this.handleKeyDown(item)
     }, {
       style: {
         paddingLeft: `${paddingLeft + level * 32}px`
@@ -305,7 +317,7 @@ class HiSelectableListItem extends React.PureComponent {
         [classes.labelWithoutSecondaryInline]: !secondaryInline || !secondaryLabel && !info
       })
     }, !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
-      tabIndex: onKeyDown ? '-1' : 0,
+      tabIndex: 0,
       classes: {
         root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
       },

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.61
+/** @license HiPay-Material-UI v2.0.0-beta.63
  *
  * 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.61
+/** @license HiPay-Material-UI v2.0.0-beta.63
  *
  * 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

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