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

package/es/HiSelect/HiSuggestSelect.js

@@ -144,10 +144,10 @@ class HiSuggestSelect extends React.PureComponent {
         options: [],
         focused: false
       });
-    }
 
-    if (this.props.onBlurInput) {
-      this.props.onBlurInput(event);
+      if (this.props.onBlurInput) {
+        this.props.onBlurInput(event);
+      }
     }
   }
 

package/es/HiSelectNew/HiNestedSelect.js

@@ -45,6 +45,10 @@ function findFinalItemRecursively(itemList, searchId) {
   });
   return foundItem;
 }
+
+export var filterValue = function (item, searchValue) {
+  return searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1;
+};
 /**
  * Build item list by settings item props relative to the nested parent/child situation
  * Reduce the item list to build specified items (displayed, pinned, disabled, selected, indeterminate)
@@ -62,15 +66,14 @@ function findFinalItemRecursively(itemList, searchId) {
  * @returns {*}
  */
 
-
-function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations) {
+function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations, filterFunc = filterValue) {
   return itemList.reduce(({
     l: memoItemList,
     s: memoSelected,
     u: memoUnselected,
     v: memoVisible
   }, item) => {
-    const itemVisible = searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1; // Parent item
+    const itemVisible = filterFunc(item, searchValue); // Parent item
 
     if (item.children) {
       const {
@@ -78,7 +81,7 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
         s: selected,
         u: unselected,
         v: visible
-      } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent);
+      } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent, nbChildrenAsInfo, translations, filterFunc);
 
       if (nbChildrenAsInfo) {
         item.info = translations.n_children.replace('%s', item.children.length);
@@ -227,7 +230,8 @@ class HiNestedSelect extends React.PureComponent {
         multiple,
         nbChildrenAsInfo,
         pinnedParent,
-        translations
+        translations,
+        filterFunc
       } = this.props; // build item list
 
       const {
@@ -235,7 +239,7 @@ class HiNestedSelect extends React.PureComponent {
         s: allSelected,
         u: allUnselected,
         v: visible
-      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations);
+      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations, filterFunc);
       const itemList = !visible ? [...(loading ? [{
         id: '_loading',
         type: 'loader',
@@ -367,7 +371,8 @@ HiNestedSelect.defaultProps = {
     one_item_selected: '%s item selected',
     n_children: '%s',
     one_child: '%s item'
-  }
+  },
+  filterFunc: filterValue
 };
 HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -385,6 +390,11 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   displayAsChip: PropTypes.bool,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: PropTypes.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/es/HiSelectNew/HiNestedSelectContent.js

@@ -42,6 +42,9 @@ export function findFinalItemRecursively(itemList, searchId) {
   });
   return foundItem;
 }
+export var filterValue = function (item, searchValue) {
+  return searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1;
+};
 /**
  * Build item list by settings item props relative to the nested parent/child situation
  * Reduce the item list to build specified items (displayed, pinned, disabled, selected, indeterminate)
@@ -59,14 +62,14 @@ export function findFinalItemRecursively(itemList, searchId) {
  * @returns {*}
  */
 
-function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations) {
+function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations, filterFunc = filterValue) {
   return itemList.reduce(({
     l: memoItemList,
     s: memoSelected,
     u: memoUnselected,
     v: memoVisible
   }, item) => {
-    const itemVisible = searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1; // Parent item
+    const itemVisible = filterFunc(item, searchValue); // Parent item
 
     if (item.children) {
       const {
@@ -74,7 +77,7 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
         s: selected,
         u: unselected,
         v: visible
-      } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent);
+      } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent, nbChildrenAsInfo, translations, filterFunc);
 
       if (nbChildrenAsInfo) {
         item.info = translations.n_children.replace('%s', item.children.length);
@@ -181,7 +184,8 @@ class HiNestedSelectContent extends React.PureComponent {
         multiple,
         nbChildrenAsInfo,
         pinnedParent,
-        translations
+        translations,
+        filterFunc
       } = this.props; // build item list
 
       const {
@@ -189,7 +193,7 @@ class HiNestedSelectContent extends React.PureComponent {
         s: allSelected,
         u: allUnselected,
         v: visible
-      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations);
+      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations, filterFunc);
       const itemList = !visible ? [...(loading ? [{
         id: '_loading',
         type: 'loader',
@@ -272,7 +276,8 @@ HiNestedSelectContent.defaultProps = {
     search: 'Search',
     n_children: '%s',
     one_child: '%s item'
-  }
+  },
+  filterFunc: filterValue
 };
 HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -285,6 +290,11 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   disabledParent: PropTypes.bool,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: PropTypes.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/es/HiSelectNew/HiSelect.js

@@ -68,6 +68,10 @@ export const styles = theme => ({
     borderTop: `1px solid ${theme.palette.input.bottomLine}`
   }
 });
+
+function filterValue(item, search) {
+  return search === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1;
+}
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -83,6 +87,7 @@ export const styles = theme => ({
  * - HiSelectableList : affiche la liste des suggestions selon le type des éléments
  */
 
+
 class HiSelect extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -97,7 +102,7 @@ class HiSelect 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 => this.props.filterFunc(item, search))] : [...(this.props.hasAll ? [_objectSpread({
         id: '_all',
         label: this.props.translations.all
       }, this.props.iconAll && {
@@ -204,20 +209,22 @@ class HiSelect extends React.PureComponent {
     };
 
     this.focusOnSelectedItem = selectedValue => {
-      setTimeout(() => {
-        // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-        let item = this.overlay.getElementsByTagName('li')[0];
-
-        if (selectedValue && typeof selectedValue === 'string') {
-          item = this.overlay.getElementsByTagName('li')[selectedValue];
-        } else if (selectedValue && typeof selectedValue === 'number') {
-          item = this.overlay.getElementsByTagName('li')[selectedValue - 1];
-        }
+      if (this.overlay && this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(() => {
+          // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
+          let item = this.overlay.getElementsByTagName('li')[0];
 
-        if (item) {
-          item.focus();
-        }
-      }, 1);
+          if (selectedValue && typeof selectedValue === 'string') {
+            item = this.overlay.getElementsByTagName('li')[selectedValue];
+          } else if (selectedValue && typeof selectedValue === 'number') {
+            item = this.overlay.getElementsByTagName('li')[selectedValue - 1];
+          }
+
+          if (item) {
+            item.focus();
+          }
+        }, 1);
+      }
     };
 
     this.handleClickAway = event => {
@@ -676,7 +683,8 @@ HiSelect.defaultProps = {
     n_children: '%s items',
     one_child: '%s item'
   },
-  type: 'text'
+  type: 'text',
+  filterFunc: filterValue
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   align: PropTypes.oneOf(['left', 'right']),
@@ -711,6 +719,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   fallbackImage: PropTypes.string,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: PropTypes.func,
+
   /**
    * Affiche l'élément 'All'
    */

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

@@ -127,7 +127,6 @@ class HiSelectInput extends 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) {
@@ -167,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 => {

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.58
+/** @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.58
+/** @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.58",
+  "version": "2.0.0-beta.59",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",