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

package/es/HiColoredLabel/HiColoredLabel.js

@@ -8,7 +8,7 @@ import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 import { fade } from '../styles/colorManipulator';
 export const styles = theme => ({
-  root: _objectSpread({}, theme.typography.b3, {
+  root: {
     display: 'inline-block',
     alignItems: 'baseline',
     maxWidth: '100%',
@@ -18,7 +18,12 @@ export const styles = theme => ({
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     lineHeight: 1
-  }),
+  },
+  body1: _objectSpread({}, theme.typography.b1),
+  body2: _objectSpread({}, theme.typography.b2),
+  body3: _objectSpread({}, theme.typography.b3),
+  body4: _objectSpread({}, theme.typography.b4),
+  body5: _objectSpread({}, theme.typography.b5),
   color: {
     fontWeight: 400
   },
@@ -111,6 +116,7 @@ function HiColoredLabel(props) {
   const {
     classes,
     className,
+    fontSize,
     label,
     color,
     active,
@@ -119,7 +125,7 @@ function HiColoredLabel(props) {
     style,
     theme
   } = props,
-        other = _objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
+        other = _objectWithoutProperties(props, ["classes", "className", "fontSize", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
 
   const isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   const isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
@@ -129,7 +135,12 @@ function HiColoredLabel(props) {
       [classes.activeColor]: active,
       [classes.outlined]: outlined,
       [classes[`activeColor${capitalize(color)}`]]: active && isHiColor,
-      [classes[`color${capitalize(color)}`]]: !active && isHiColor
+      [classes[`color${capitalize(color)}`]]: !active && isHiColor,
+      [classes.body1]: fontSize >= 15,
+      [classes.body2]: fontSize === 14,
+      [classes.body3]: fontSize === 13,
+      [classes.body4]: fontSize === 12,
+      [classes.body5]: fontSize <= 11
     }, className),
     style: _objectSpread({}, style, isHexColor && {
       backgroundColor: active ? color : fade(color, 0.08),
@@ -162,6 +173,11 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   color: PropTypes.string,
 
+  /**
+   * Taille du text
+   */
+  fontSize: PropTypes.number,
+
   /**
    * Graisse du text
    */
@@ -180,6 +196,7 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
 HiColoredLabel.defaultProps = {
   active: false,
   color: 'primary',
+  fontSize: 15,
   outlined: false
 };
 export default withStyles(styles, {

package/es/HiForm/HiFormControl.js

@@ -199,16 +199,14 @@ class HiFormControl extends React.PureComponent {
       focused: !disabled && (focused || hovered)
     }, InputLabelProps), error && errorText && React.createElement(HiIconButton, {
       className: classNames(classes.iconButton, classes.iconButtonError),
-      onClick: this.handleHelperClick,
-      onKeyDown: this.handleKeyDown
+      onClick: this.handleHelperClick
     }, React.createElement(Warning, {
       className: classNames(classes.icon)
     })), helperIcon && helperText && !error && React.createElement(HiIconButton, {
       className: classNames(classes.iconButton, classes.iconButtonInfo, {
         [classes.iconButtonInfoActive]: helperOpen
       }),
-      onClick: this.handleHelperClick,
-      onKeyDown: this.handleKeyDown
+      onClick: this.handleHelperClick
     }, React.createElement(Info, {
       className: classNames(classes.icon)
     }))), React.createElement("div", {

package/es/HiForm/HiInput.js

@@ -127,6 +127,13 @@ var _ref = React.createElement(HiIcon, {
 class HiInput extends React.PureComponent {
   constructor() {
     super();
+
+    this.handleClick = () => {
+      if (this.props.onClick) {
+        this.props.onClick();
+      }
+    };
+
     this.state = {
       focused: false
     };
@@ -177,10 +184,15 @@ class HiInput extends 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({
@@ -201,9 +213,13 @@ class HiInput extends 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);
       }
     }
@@ -306,7 +322,10 @@ class HiInput extends React.PureComponent {
         label: classes.eraseButtonLabel
       },
       onClick: this.handleReset,
-      onBlur: this.handleBlur
+      onBlur: this.handleBlur,
+      buttonRef: el => {
+        this.eraseIconNode = el;
+      }
     }, _ref);
     let endAdornment = endAdornmentProps;
 
@@ -335,6 +354,7 @@ class HiInput extends React.PureComponent {
       placeholder: placeholder,
       onFocus: this.handleFocus,
       onKeyDown: this.props.onKeyDown,
+      onClick: this.handleClick,
       onBlur: this.handleBlur,
       inputRef: this.getInputElement,
       disabled: disabled,
@@ -454,6 +474,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onChange: PropTypes.func,
 
+  /**
+   * Fonction de callback appelée au click dans l'input
+   */
+  onClick: PropTypes.func,
+
   /**
    * Fonction de callback appelée au focus du champs
    */

package/es/HiForm/HiUploadField.js

@@ -22,7 +22,8 @@ export const styles = theme => ({
     fontSize: '80px'
   },
   inputContainer: {
-    flex: '1'
+    flex: '1',
+    width: 'calc(100% - 88px)'
   },
   empty: {
     border: `1px solid ${theme.palette.input.bottomLine}`,

package/es/HiSelect/HiSelect.js

@@ -193,17 +193,13 @@ class HiSelect extends React.PureComponent {
         nextItem = getNextItemSelectable(document.activeElement, 'down');
       } else if (event.key === 'ArrowUp') {
         nextItem = 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) {
@@ -216,6 +212,10 @@ class HiSelect extends 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
+        });
       }
     };
 
@@ -682,6 +682,7 @@ class HiSelect extends React.PureComponent {
       onClick: this.handleClick,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
+      onKeyDown: this.handleKeyDown,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,
       refElement: el => {

package/es/HiSelect/HiSuggestSelect.js

@@ -24,7 +24,8 @@ export const styles = theme => ({
     width: '100% !important',
     transform: 'none !important',
     zIndex: '9 !important',
-    top: '100% !important'
+    top: '100% !important',
+    textOverflow: 'ellipsis'
   },
   paper: {
     borderRadius: '0px 2px',
@@ -143,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/HiSelect/SelectInput.js

@@ -185,6 +185,7 @@ class SelectInput extends React.PureComponent {
       className: iconClass,
       icon: "arrow_drop_down"
     })) : React.createElement(ButtonBase, {
+      component: "div",
       id: id,
       classes: {
         root: rootClass

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

@@ -6,7 +6,6 @@ import Scrollbars from 'react-custom-scrollbars';
 import Grow from '@material-ui/core/Grow';
 import Paper from '@material-ui/core/Paper';
 import Popper from '@material-ui/core/Popper';
-import { findDOMNode } from 'react-dom';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
@@ -69,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.
@@ -84,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);
@@ -98,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 && {
@@ -164,11 +168,12 @@ class HiSelect extends React.PureComponent {
     };
 
     this.focusOnFirstItem = () => {
-      const overlay = findDOMNode(this.overlay);
-      setTimeout(() => {
-        const item = overlay.getElementsByTagName('li')[0];
-        item.focus();
-      }, 1);
+      if (this.overlay && this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(() => {
+          const item = this.overlay.getElementsByTagName('li')[0];
+          item.focus();
+        }, 1);
+      }
     };
 
     this.getInputElement = el => {
@@ -204,21 +209,22 @@ class HiSelect extends React.PureComponent {
     };
 
     this.focusOnSelectedItem = selectedValue => {
-      const overlay = findDOMNode(this.overlay);
-      setTimeout(() => {
-        // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-        let item = overlay.getElementsByTagName('li')[0];
-
-        if (selectedValue && typeof selectedValue === 'string') {
-          item = overlay.getElementsByTagName('li')[selectedValue];
-        } else if (selectedValue && typeof selectedValue === 'number') {
-          item = overlay.getElementsByTagName('li')[selectedValue - 1];
-        }
-
-        if (item) {
-          item.focus();
-        }
-      }, 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 (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 => {
@@ -249,6 +255,17 @@ class HiSelect extends React.PureComponent {
       });
     };
 
+    this.handleKeyDownInput = event => {
+      const key = keycode(event);
+
+      if (key === 'down' || key === 'up') {
+        this.handleClick();
+      } else if (key === 'enter' && this.props.onSubmit) {
+        event.preventDefault();
+        this.props.onSubmit(event);
+      }
+    };
+
     this.handleKeyDown = event => {
       let nextItem;
       const key = keycode(event);
@@ -259,6 +276,13 @@ class HiSelect extends React.PureComponent {
       } else if (key === 'up') {
         event.preventDefault();
         nextItem = getNextItemSelectable(document.activeElement, 'up');
+      } else if (key === 'tab' || key === 'esc') {
+        this.setState({
+          open: false
+        });
+      } else if (key === 'space') {
+        // Cancel scroll
+        event.preventDefault();
       }
 
       if (nextItem) {
@@ -266,17 +290,57 @@ class HiSelect extends React.PureComponent {
       }
     };
 
+    this.getItemById = id => {
+      let item;
+
+      if (this.props.hasAll && String(id) === '_all') {
+        return {
+          id: '_all'
+        };
+      }
+
+      for (let i = 0; i < this.props.options.length; i += 1) {
+        const elem = this.props.options[i];
+
+        if (String(elem.id) === String(id)) {
+          item = elem;
+          break;
+        }
+
+        if (elem.children) {
+          for (let 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 = event => {
       const key = keycode(event);
 
-      if (key === 'tab' || key === 'esc') {
+      if (key === 'esc') {
         this.setState({
           open: false
         });
       } 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);
+        const item = this.getItemById(event.target.id);
+
+        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 #${event.target.id}`);
+        }
       } else if (key === 'enter' && this.props.multiple) {
         event.preventDefault();
         this.handleClose();
@@ -291,6 +355,10 @@ class HiSelect extends React.PureComponent {
       } else if (this.overlay && key === 'esc' || key === 'enter') {
         event.preventDefault();
         this.handleClose();
+      } else if (key === 'tab') {
+        this.setState({
+          open: false
+        });
       }
     };
 
@@ -484,8 +552,8 @@ class HiSelect extends React.PureComponent {
       [classes.popperRightAlign]: this.props.containerWidth && this.props.align === 'right'
     });
 
-    let searchInput = position => {
-      if (!!searchable) {
+    const searchInput = position => {
+      if (searchable) {
         return React.createElement(HiInput, _extends({
           value: searchValue,
           autoFocus: true,
@@ -508,13 +576,13 @@ class HiSelect extends React.PureComponent {
 
     if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
       // +1 for search input
-      let nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+      const nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
       popperStyle.transform = `translate3d(-1px, -${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)';
     }
 
-    let content = ({
+    const content = ({
       placement
     }) => {
       if (placement !== this.placement) {
@@ -568,6 +636,7 @@ class HiSelect extends React.PureComponent {
       onClick: this.handleClick,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
+      onKeyDown: this.handleKeyDownInput,
       onSubmit: onSubmit,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,
@@ -614,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']),
@@ -649,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'
    */