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

package/CHANGELOG.md

@@ -1,3 +1,62 @@
+<a name="2.0.0-beta.59"></a>
+# [2.0.0-beta.59](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.59) (2018-12-27)
+
+
+### Bug Fixes
+
+* **eslint:** remove eslint warrnings in components (ignore test files) ([d236c62](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d236c62))
+* **HiBreadcrumb:** clean eslint warnings ([6db12fb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6db12fb))
+* **HiDatePicker:** add static positions for custom overlays ([c3edf24](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c3edf24))
+* **HiExpansionPanel:** Fix props type a requirement ([cbc3b48](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cbc3b48))
+* **HiInput:** handle focus state through prop when needed to override default comportment ([9a133cc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a133cc))
+* **HiKpiNotice:** eslint clean warnings ([11b5552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/11b5552))
+* **HiSelect:** Fix build of HiSelectContent ([4b87f78](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4b87f78))
+* **HiSelect:** focus on undefined item ([2d084e6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2d084e6))
+* **HiSelect:** handle staticPosition & width properly for HiDateRangeSelector usage ([7b19ffb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7b19ffb))
+* **HiSelectableListItem:** disabled item checkbox color ([9f10552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9f10552))
+* **HiSelectableListItem:** remove item width ([a913945](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a913945))
+* **HiSelectContent:** Remove compute of input value ([b86db83](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b86db83))
+* **HiSlider:** eslint clean warnings ([08964b1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/08964b1))
+* **HiUploadField:** clean eslint warnings ([c76aaf1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c76aaf1))
+* **migration:** fix contrast threshold ... ([6fb3b18](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6fb3b18))
+* **package:** add cross-env ([7098fd6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7098fd6))
+
+
+### Features
+
+* **CellImage:** Handle fallbackImage ([254799d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/254799d))
+* **CellSentinel:** Uniformize cell api with front CellSentinel ([4e2975b](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4e2975b))
+* **CellSentinel:** Update CellSentinel to the new way (split each result in different column) ([efe2711](https://gitlab.hipay.org/backend/hipay-material-ui/commit/efe2711))
+* **CellSentinelScore:** Add CellSentinelScore ([2fff04d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2fff04d))
+* **CellText:** Handle active prop in CellText & column views in HiTable ([4366e60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4366e60))
+* **HiCells:** Add simple cells types (Address, Date, Icon, Image, Numeric, PinToAction, Rate, Senti ([f688517](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f688517))
+* **HiDatePicker:** BREAKING CHANGE - add local prop to handle calendar translations ([b1b3743](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1b3743))
+* **HiIcon:** Add mdi-material-ui as available icons via 'mdi_' prefix ([1091d6d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/1091d6d))
+* **HiMap:** unregister fetch on unmount ([0afa931](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0afa931))
+* **HiSelect:** Add (NEW) HiSelect, HiNestedSelect, HiDynamicSelect ([4c6447e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4c6447e))
+* **HiSelect:** Reset search input on blur & on close ([d9af584](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d9af584))
+* **HiSelectableList:** Add sort props to sort item list on label ([f412ddc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f412ddc))
+* **HiSelectContent:** Add new HiSelectContent & HiNestedSelectContent ([215ad8f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/215ad8f))
+* **HiSelectContent:** export utils functions ([7c41d87](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7c41d87))
+* **HiUploadField:** rename component HiUploadField ([593f77e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/593f77e))
+* **notice:** Création notice KPI ([bba3f89](https://gitlab.hipay.org/backend/hipay-material-ui/commit/bba3f89))
+
+
+### Performance Improvements
+
+* **PureFunction:** Use pure & functional components ([220c686](https://gitlab.hipay.org/backend/hipay-material-ui/commit/220c686))
+
+
+### BREAKING CHANGES
+
+* **HiDatePicker:** Required "local" props (use polyglot, p.currentLocal)
+* **HiUploadField:** Components names changes
+* **HiCells:** Remove CellCountry, CellThirdParty, CellStatus & CellAccount (use generic type
+CellImage & CellText)
+* **HiSelect:** HiSelect API change, use HiNestedSelect or HiDynamicSelect relative to situation
+
+
+
 # [2.0.0-beta.58](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.58) (2018-12-13)
 
 

package/HiColoredLabel/HiColoredLabel.js

@@ -27,7 +27,7 @@ var _colorManipulator = require("../styles/colorManipulator");
 
 var styles = function styles(theme) {
   return {
-    root: (0, _extends2.default)({}, theme.typography.b3, {
+    root: {
       display: 'inline-block',
       alignItems: 'baseline',
       maxWidth: '100%',
@@ -37,7 +37,12 @@ var styles = function styles(theme) {
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       lineHeight: 1
-    }),
+    },
+    body1: (0, _extends2.default)({}, theme.typography.b1),
+    body2: (0, _extends2.default)({}, theme.typography.b2),
+    body3: (0, _extends2.default)({}, theme.typography.b3),
+    body4: (0, _extends2.default)({}, theme.typography.b4),
+    body5: (0, _extends2.default)({}, theme.typography.b5),
     color: {
       fontWeight: 400
     },
@@ -135,6 +140,7 @@ function HiColoredLabel(props) {
 
   var classes = props.classes,
       className = props.className,
+      fontSize = props.fontSize,
       label = props.label,
       color = props.color,
       active = props.active,
@@ -142,11 +148,11 @@ function HiColoredLabel(props) {
       fontWeight = props.fontWeight,
       style = props.style,
       theme = props.theme,
-      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
+      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "fontSize", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
   var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   var isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
   return _react.default.createElement("div", (0, _extends2.default)({
-    className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes.outlined, outlined), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), _classNames), className),
+    className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes.outlined, outlined), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), (0, _defineProperty2.default)(_classNames, classes.body1, fontSize >= 15), (0, _defineProperty2.default)(_classNames, classes.body2, fontSize === 14), (0, _defineProperty2.default)(_classNames, classes.body3, fontSize === 13), (0, _defineProperty2.default)(_classNames, classes.body4, fontSize === 12), (0, _defineProperty2.default)(_classNames, classes.body5, fontSize <= 11), _classNames), className),
     style: (0, _extends2.default)({}, style, isHexColor && {
       backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
       color: active ? theme.palette.getContrastText(color) : color
@@ -178,6 +184,11 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   color: _propTypes.default.string,
 
+  /**
+   * Taille du text
+   */
+  fontSize: _propTypes.default.number,
+
   /**
    * Graisse du text
    */
@@ -196,6 +207,7 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
 HiColoredLabel.defaultProps = {
   active: false,
   color: 'primary',
+  fontSize: 15,
   outlined: false
 };
 

package/HiForm/HiInput.js

@@ -169,6 +169,13 @@ function (_React$PureComponent) {
 
     (0, _classCallCheck2.default)(this, HiInput);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiInput).call(this));
+
+    _this.handleClick = function () {
+      if (_this.props.onClick) {
+        _this.props.onClick();
+      }
+    };
+
     _this.state = {
       focused: false
     };
@@ -381,6 +388,7 @@ function (_React$PureComponent) {
         placeholder: placeholder,
         onFocus: this.handleFocus,
         onKeyDown: this.props.onKeyDown,
+        onClick: this.handleClick,
         onBlur: this.handleBlur,
         inputRef: this.getInputElement,
         disabled: disabled,
@@ -509,6 +517,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onChange: _propTypes.default.func,
 
+  /**
+   * Fonction de callback appelée au click dans l'input
+   */
+  onClick: _propTypes.default.func,
+
   /**
    * Fonction de callback appelée au focus du champs
    */

package/HiSelect/HiSuggestSelect.js

@@ -205,10 +205,10 @@ function (_React$PureComponent) {
           options: [],
           focused: false
         });
-      }
 
-      if (this.props.onBlurInput) {
-        this.props.onBlurInput(event);
+        if (this.props.onBlurInput) {
+          this.props.onBlurInput(event);
+        }
       }
     }
   }, {

package/HiSelectNew/HiNestedSelect.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = exports.styles = exports.filterValue = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -76,6 +76,10 @@ function findFinalItemRecursively(itemList, searchId) {
   });
   return foundItem;
 }
+
+var filterValue = function filterValue(item, searchValue) {
+  return searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.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)
@@ -94,6 +98,8 @@ function findFinalItemRecursively(itemList, searchId) {
  */
 
 
+exports.filterValue = filterValue;
+
 function buildFilteredItemList(itemList) {
   var selectedItemIdList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var searchValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
@@ -102,15 +108,16 @@ function buildFilteredItemList(itemList) {
   var disabledParent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var nbChildrenAsInfo = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var translations = arguments.length > 7 ? arguments[7] : undefined;
+  var filterFunc = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : filterValue;
   return itemList.reduce(function (_ref, item) {
     var memoItemList = _ref.l,
         memoSelected = _ref.s,
         memoUnselected = _ref.u,
         memoVisible = _ref.v;
-    var itemVisible = searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(searchValue.toLowerCase())) !== -1; // Parent item
+    var itemVisible = filterFunc(item, searchValue); // Parent item
 
     if (item.children) {
-      var _buildFilteredItemLis = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent),
+      var _buildFilteredItemLis = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent, nbChildrenAsInfo, translations, filterFunc),
           customizedChildren = _buildFilteredItemLis.l,
           selected = _buildFilteredItemLis.s,
           unselected = _buildFilteredItemLis.u,
@@ -285,9 +292,10 @@ function (_React$PureComponent) {
           multiple = _this$props2.multiple,
           nbChildrenAsInfo = _this$props2.nbChildrenAsInfo,
           pinnedParent = _this$props2.pinnedParent,
-          translations = _this$props2.translations; // build item list
+          translations = _this$props2.translations,
+          filterFunc = _this$props2.filterFunc; // build item list
 
-      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations),
+      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations, filterFunc),
           filteredItemList = _buildFilteredItemLis2.l,
           allSelected = _buildFilteredItemLis2.s,
           allUnselected = _buildFilteredItemLis2.u,
@@ -426,7 +434,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" ? {
   /**
@@ -444,6 +453,11 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   displayAsChip: _propTypes.default.bool,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: _propTypes.default.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/HiSelectNew/HiNestedSelectContent.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getRecursiveFinalItemIdList = getRecursiveFinalItemIdList;
 exports.findFinalItemRecursively = findFinalItemRecursively;
-exports.default = void 0;
+exports.default = exports.filterValue = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -72,6 +72,10 @@ function findFinalItemRecursively(itemList, searchId) {
   });
   return foundItem;
 }
+
+var filterValue = function filterValue(item, searchValue) {
+  return searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.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)
@@ -90,6 +94,8 @@ function findFinalItemRecursively(itemList, searchId) {
  */
 
 
+exports.filterValue = filterValue;
+
 function buildFilteredItemList(itemList) {
   var selectedItemIdList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var searchValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
@@ -98,15 +104,16 @@ function buildFilteredItemList(itemList) {
   var disabledParent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var nbChildrenAsInfo = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var translations = arguments.length > 7 ? arguments[7] : undefined;
+  var filterFunc = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : filterValue;
   return itemList.reduce(function (_ref, item) {
     var memoItemList = _ref.l,
         memoSelected = _ref.s,
         memoUnselected = _ref.u,
         memoVisible = _ref.v;
-    var itemVisible = searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(searchValue.toLowerCase())) !== -1; // Parent item
+    var itemVisible = filterFunc(item, searchValue); // Parent item
 
     if (item.children) {
-      var _buildFilteredItemLis = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent),
+      var _buildFilteredItemLis = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent, nbChildrenAsInfo, translations, filterFunc),
           customizedChildren = _buildFilteredItemLis.l,
           selected = _buildFilteredItemLis.s,
           unselected = _buildFilteredItemLis.u,
@@ -241,9 +248,10 @@ function (_React$PureComponent) {
           multiple = _this$props2.multiple,
           nbChildrenAsInfo = _this$props2.nbChildrenAsInfo,
           pinnedParent = _this$props2.pinnedParent,
-          translations = _this$props2.translations; // build item list
+          translations = _this$props2.translations,
+          filterFunc = _this$props2.filterFunc; // build item list
 
-      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations),
+      var _buildFilteredItemLis2 = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations, filterFunc),
           filteredItemList = _buildFilteredItemLis2.l,
           allSelected = _buildFilteredItemLis2.s,
           allUnselected = _buildFilteredItemLis2.u,
@@ -334,7 +342,8 @@ HiNestedSelectContent.defaultProps = {
     search: 'Search',
     n_children: '%s',
     one_child: '%s item'
-  }
+  },
+  filterFunc: filterValue
 };
 HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -347,6 +356,11 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   disabledParent: _propTypes.default.bool,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: _propTypes.default.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/HiSelectNew/HiSelect.js

@@ -110,6 +110,12 @@ var styles = function styles(theme) {
     }
   };
 };
+
+exports.styles = styles;
+
+function filterValue(item, search) {
+  return search === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
+}
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -126,8 +132,6 @@ var styles = function styles(theme) {
  */
 
 
-exports.styles = styles;
-
 var HiSelect =
 /*#__PURE__*/
 function (_React$PureComponent) {
@@ -152,7 +156,7 @@ function (_React$PureComponent) {
         hideCheckbox: true,
         label: 'loading'
       }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
-        return item.label && (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
+        return _this.props.filterFunc(item, search);
       })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
@@ -267,20 +271,22 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnSelectedItem = function (selectedValue) {
-      setTimeout(function () {
-        // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-        var 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(function () {
+          // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
+          var 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 = function (event) {
@@ -751,7 +757,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.default.oneOf(['left', 'right']),
@@ -786,6 +793,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   fallbackImage: _propTypes.default.string,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: _propTypes.default.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/HiSelectNew/HiSelectContent.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = exports.filterValue = exports.styles = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -70,6 +70,12 @@ var styles = function styles(theme) {
     })
   };
 };
+
+exports.styles = styles;
+
+var filterValue = function filterValue(item, searchValue) {
+  return searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(searchValue.toLowerCase())) !== -1;
+};
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -86,7 +92,7 @@ var styles = function styles(theme) {
  */
 
 
-exports.styles = styles;
+exports.filterValue = filterValue;
 
 var HiSelectContent =
 /*#__PURE__*/
@@ -253,7 +259,7 @@ function (_React$PureComponent) {
         hideCheckbox: true,
         label: 'loading'
       }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
-        return item.label && (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
+        return item.label && _this.props.filterFunc(item, search);
       })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
@@ -395,7 +401,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.default.bool,
@@ -420,6 +427,11 @@ HiSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   fallbackImage: _propTypes.default.string,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: _propTypes.default.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/HiSelectNew/HiSelectInput.js

@@ -172,8 +172,6 @@ function (_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) {
@@ -215,9 +213,11 @@ function (_React$PureComponent) {
     _this.handleBlur = function (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 = function (el) {

package/HiSelectableList/HiSelectableListItem.js

@@ -122,12 +122,13 @@ var styles = function styles(theme) {
       minWidth: '50%',
       padding: '5px 0',
       '&$listItemContentSelected': {
-        marginBottom: -3,
+        marginBottom: 1,
         marginLeft: -4
       },
       '& strong': {
         fontWeight: theme.typography.fontWeightMedium
-      }
+      },
+      display: 'inline-flex'
     }),
     listItemContentSelected: {},
     label: {
@@ -173,7 +174,7 @@ var styles = function styles(theme) {
     labelContent: {
       display: 'flex',
       alignItems: 'center',
-      maxWidth: '70%',
+      maxWidth: '85%',
       '&$labelWithoutSecondaryInline': {
         maxWidth: '100%'
       }
@@ -278,7 +279,8 @@ function (_React$PureComponent) {
       }
 
       return _react.default.createElement("div", {
-        className: classes.label
+        className: classes.label,
+        title: label
       }, label);
     }
   }, {

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/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
     };
@@ -347,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,
@@ -466,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
    */