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

package/es/HiSelectNew/HiSelectContent.js

@@ -37,6 +37,9 @@ export const styles = theme => ({
     width: '100%'
   })
 });
+export var filterValue = function (item, searchValue) {
+  return searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1;
+};
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -197,7 +200,7 @@ class HiSelectContent extends React.PureComponent {
         hideCheckbox: true,
         label: 'loading'
       }] : []), // simple one level filter on label
-      ...(search !== '' ? [...options.filter(item => item.label && foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1)] : [...(this.props.hasAll ? [_objectSpread({
+      ...(search !== '' ? [...options.filter(item => item.label && this.props.filterFunc(item, search))] : [...(this.props.hasAll ? [_objectSpread({
         id: '_all',
         label: this.props.translations.all
       }, this.props.iconAll && {
@@ -331,7 +334,8 @@ HiSelectContent.defaultProps = {
     n_children: '%s items',
     one_child: '%s item'
   },
-  type: 'text'
+  type: 'text',
+  filterFunc: filterValue
 };
 HiSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
   autoHeight: PropTypes.bool,
@@ -356,6 +360,11 @@ HiSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   fallbackImage: PropTypes.string,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: PropTypes.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/es/HiSelectNew/HiSelectInput.js

@@ -146,8 +146,12 @@ class HiSelectInput extends React.PureComponent {
     };
 
     this.handleClick = 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' || keycode(event) !== 'enter') {
+          this.props.onClick(event);
+        }
       }
     };
 
@@ -162,9 +166,11 @@ class HiSelectInput extends React.PureComponent {
     this.handleBlur = event => {
       if ((!this.input || !this.input.contains(event.relatedTarget)) && this.props.onBlur) {
         this.props.onBlur(event);
-      } else if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
-        this.input.focus();
       }
+      /* else if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
+         this.input.focus();
+      }*/
+
     };
 
     this.ref = el => {
@@ -225,6 +231,7 @@ class HiSelectInput extends React.PureComponent {
     }, value || placeholder), React.createElement(ArrowDropDownIcon, {
       className: iconClass
     })) : React.createElement(ButtonBase, {
+      component: "div",
       id: id,
       className: rootClass,
       onClick: this.handleClick,

package/es/HiSelectableList/HiSelectableList.js

@@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
 import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
-import { foldAccents, getNextItemSelectable } from '../utils/helpers';
-import keycode from 'keycode';
+import { foldAccents } from '../utils/helpers';
 export const styles = () => ({
   root: {
     padding: 0
@@ -24,31 +23,6 @@ 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');
-      } else if (key === 'space' || key === 'enter' && !this.props.multiple) {
-        event.preventDefault();
-        const item = this.props.options.find(elem => String(elem.id) === event.target.id);
-        this.handleSelect(null, item);
-      }
-
-      if (nextItem) {
-        nextItem.focus();
-      }
-    };
-
-    this.handleKeyUp = () => {
-      return false;
-    };
-
     this.buildRecursiveListItem = (item, level = 0) => {
       const _this$props = this.props,
             {
@@ -60,8 +34,8 @@ class HiSelectableList extends React.PureComponent {
         icon,
         selectedItemIdList,
         sort,
-        onKeyDown = this.handleKeyDown,
-        onKeyUp = this.handleKeyUp
+        onKeyDown,
+        onKeyUp
       } = _this$props,
             others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 

package/es/HiSelectableList/HiSelectableListItem.js

@@ -85,12 +85,13 @@ export const styles = theme => ({
     minWidth: '50%',
     padding: '5px 0',
     '&$listItemContentSelected': {
-      marginBottom: -3,
+      marginBottom: 1,
       marginLeft: -4
     },
     '& strong': {
       fontWeight: theme.typography.fontWeightMedium
-    }
+    },
+    display: 'inline-flex'
   }),
   listItemContentSelected: {},
   label: {
@@ -136,7 +137,7 @@ export const styles = theme => ({
   labelContent: {
     display: 'flex',
     alignItems: 'center',
-    maxWidth: '70%',
+    maxWidth: '85%',
     '&$labelWithoutSecondaryInline': {
       maxWidth: '100%'
     }
@@ -225,7 +226,8 @@ class HiSelectableListItem extends React.PureComponent {
     }
 
     return React.createElement("div", {
-      className: classes.label
+      className: classes.label,
+      title: label
     }, label);
   }
 

package/index.es.js

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