@hipay/hipay-material-ui 2.0.0-beta.52 → 2.0.0-beta.54

package/umd/hipay-material-ui.development.js

@@ -1,13 +1,13 @@
-/** @license HiPay-Material-UI v2.0.0-beta.52
+/** @license HiPay-Material-UI v2.0.0-beta.53
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 (function (global, factory) {
-            typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('@hipay/hipay-material-ui/HiCell/CellAddress'), require('@hipay/hipay-material-ui/HiCell/CellDate'), require('@hipay/hipay-material-ui/HiCell/CellIcon'), require('@hipay/hipay-material-ui/HiCell/CellImage'), require('@hipay/hipay-material-ui/HiCell/CellNumeric'), require('@hipay/hipay-material-ui/HiCell/CellSentinel'), require('@hipay/hipay-material-ui/HiCell/CellText'), require('@hipay/hipay-material-ui/HiCell/CellRate'), require('@hipay/hipay-material-ui/HiCell/CellPinToAction')) :
-            typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', '@hipay/hipay-material-ui/HiCell/CellAddress', '@hipay/hipay-material-ui/HiCell/CellDate', '@hipay/hipay-material-ui/HiCell/CellIcon', '@hipay/hipay-material-ui/HiCell/CellImage', '@hipay/hipay-material-ui/HiCell/CellNumeric', '@hipay/hipay-material-ui/HiCell/CellSentinel', '@hipay/hipay-material-ui/HiCell/CellText', '@hipay/hipay-material-ui/HiCell/CellRate', '@hipay/hipay-material-ui/HiCell/CellPinToAction'], factory) :
-            (factory((global['hipay-material-ui'] = {}),global.React,global.ReactDOM,global.CellAddress,global.CellDate,global.CellIcon,global.CellImage,global.CellNumeric,global.CellSentinel,global.CellText,global.CellRate,global.CellPinToAction));
-}(this, (function (exports,React,require$$11,CellAddress,CellDate,CellIcon,CellImage,CellNumeric,CellSentinel,CellText,CellRate,CellPinToAction) { 'use strict';
+            typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('@hipay/hipay-material-ui/HiCell/CellAddress'), require('@hipay/hipay-material-ui/HiCell/CellDate'), require('@hipay/hipay-material-ui/HiCell/CellIcon'), require('@hipay/hipay-material-ui/HiCell/CellImage'), require('@hipay/hipay-material-ui/HiCell/CellNumeric'), require('@hipay/hipay-material-ui/HiCell/CellSentinel'), require('@hipay/hipay-material-ui/HiCell/CellSentinelScore'), require('@hipay/hipay-material-ui/HiCell/CellText'), require('@hipay/hipay-material-ui/HiCell/CellRate'), require('@hipay/hipay-material-ui/HiCell/CellPinToAction')) :
+            typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', '@hipay/hipay-material-ui/HiCell/CellAddress', '@hipay/hipay-material-ui/HiCell/CellDate', '@hipay/hipay-material-ui/HiCell/CellIcon', '@hipay/hipay-material-ui/HiCell/CellImage', '@hipay/hipay-material-ui/HiCell/CellNumeric', '@hipay/hipay-material-ui/HiCell/CellSentinel', '@hipay/hipay-material-ui/HiCell/CellSentinelScore', '@hipay/hipay-material-ui/HiCell/CellText', '@hipay/hipay-material-ui/HiCell/CellRate', '@hipay/hipay-material-ui/HiCell/CellPinToAction'], factory) :
+            (factory((global['hipay-material-ui'] = {}),global.React,global.ReactDOM,global.CellAddress,global.CellDate,global.CellIcon,global.CellImage,global.CellNumeric,global.CellSentinel,global.CellSentinelScore,global.CellText,global.CellRate,global.CellPinToAction));
+}(this, (function (exports,React,require$$11,CellAddress,CellDate,CellIcon,CellImage,CellNumeric,CellSentinel,CellSentinelScore,CellText,CellRate,CellPinToAction) { 'use strict';
 
             var React__default = 'default' in React ? React['default'] : React;
             var require$$11__default = 'default' in require$$11 ? require$$11['default'] : require$$11;
@@ -17,6 +17,7 @@
             CellImage = CellImage && CellImage.hasOwnProperty('default') ? CellImage['default'] : CellImage;
             CellNumeric = CellNumeric && CellNumeric.hasOwnProperty('default') ? CellNumeric['default'] : CellNumeric;
             CellSentinel = CellSentinel && CellSentinel.hasOwnProperty('default') ? CellSentinel['default'] : CellSentinel;
+            CellSentinelScore = CellSentinelScore && CellSentinelScore.hasOwnProperty('default') ? CellSentinelScore['default'] : CellSentinelScore;
             CellText = CellText && CellText.hasOwnProperty('default') ? CellText['default'] : CellText;
             CellRate = CellRate && CellRate.hasOwnProperty('default') ? CellRate['default'] : CellRate;
             CellPinToAction = CellPinToAction && CellPinToAction.hasOwnProperty('default') ? CellPinToAction['default'] : CellPinToAction;
@@ -1072,7 +1073,7 @@
               } : _palette$primary,
                   _palette$secondary = palette.secondary,
                   secondary = _palette$secondary === void 0 ? {
-                light: '#ffcf21',
+                light: '#ffd94f',
                 main: '#ffcf21',
                 dark: '#E9BE30',
                 contrastText: '#FFFFFF'
@@ -1121,7 +1122,7 @@
                   _palette$type = palette.type,
                   type = _palette$type === void 0 ? 'light' : _palette$type,
                   _palette$contrastThre = palette.contrastThreshold,
-                  contrastThreshold = _palette$contrastThre === void 0 ? 2.9 : _palette$contrastThre,
+                  contrastThreshold = _palette$contrastThre === void 0 ? 2.2 : _palette$contrastThre,
                   _palette$tonalOffset = palette.tonalOffset,
                   tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
                   _palette$context = palette.context,
@@ -1136,7 +1137,7 @@
 
                 {
                   var contrast = getContrastRatio(background, contrastText);
-                  warning_1(contrast >= 3, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
+                  warning_1(contrast >= 2.2, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
                 }
 
                 return contrastText;
@@ -15058,25 +15059,6 @@
             function escapeHTML(unsafeStr) {
               return unsafeStr.replace(/<br\/?>/g, '[br]').replace(/<strong>/g, '[[').replace(/<\/?strong>/g, ']]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\[\[/g, '<strong>').replace(/\]\]/g, '</strong>').replace(/\[br\]/g, '<br>');
             }
-            /**
-             * Remove duplicate items from array useful after concat arrays
-             *
-             * arrayUnique(array1.concat(array2))
-             *
-             * @param array
-             */
-
-            function arrayUnique(array) {
-              var a = toConsumableArray(array);
-
-              for (var i = 0; i < a.length; i + 1) {
-                for (var j = i + 1; j < a.length; j + 1) {
-                  if (a[i] === a[j]) a.splice(j - 1, 1);
-                }
-              }
-
-              return a;
-            }
             /**
              * Retourne l'item selectionnable suivant.
              * @param node
@@ -66296,7 +66278,7 @@
                   position: 'relative',
                   cursor: 'pointer',
                   '&:hover, &:focus': {
-                    color: theme.palette.primary.main
+                    color: theme.palette.neutral.dark
                   }
                 },
                 label: {
@@ -66322,7 +66304,8 @@
                   '&:hover, &:focus': {
                     backgroundColor: theme.palette.primary.main,
                     color: theme.palette.grey[300]
-                  }
+                  },
+                  position: 'relative'
                 },
                 badge: {
                   height: 16,
@@ -66342,7 +66325,7 @@
             function HiChip(props) {
               var _classNames;
 
-              var label = props.label,
+              var className = props.className,
                   classes = props.classes,
                   fallbackImage = props.fallbackImage,
                   icon = props.icon,
@@ -66350,6 +66333,7 @@
                   iconSize = _props$iconSize === void 0 ? 20 : _props$iconSize,
                   id = props.id,
                   img = props.img,
+                  label = props.label,
                   onPrevious = props.onPrevious,
                   onNext = props.onNext,
                   onDelete = props.onDelete,
@@ -66363,7 +66347,7 @@
                   titlePrevious = props.titlePrevious;
               return React__default.createElement("div", {
                 id: id,
-                className: classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.leftNavigation, onPrevious), defineProperty(_classNames, classes.rightNavigation, onNext), defineProperty(_classNames, classes.deletable, onDelete), defineProperty(_classNames, classes.leftIcon, icon), _classNames)),
+                className: classnames(classes.root, className, (_classNames = {}, defineProperty(_classNames, classes.leftNavigation, onPrevious), defineProperty(_classNames, classes.rightNavigation, onNext), defineProperty(_classNames, classes.deletable, onDelete), defineProperty(_classNames, classes.leftIcon, icon), _classNames)),
                 title: title$$1
               }, icon && React__default.createElement(HiIcon$1, {
                 className: classnames(classes.icon, defineProperty({}, classes.iconClickable, onIconClick)),
@@ -66432,6 +66416,11 @@
                */
               classes: propTypes.object,
 
+              /**
+               * Surcharge les classes du composant
+               */
+              className: propTypes.object,
+
               /**
                * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
                */
@@ -73698,6 +73687,7 @@
                   position: 'absolute',
                   right: 5,
                   cursor: 'pointer',
+                  zIndex: 1,
                   top: '-5px',
                   '&$iconButtonError': {
                     color: theme.palette.negative.main
@@ -73882,7 +73872,7 @@
                     required: required,
                     disabled: disabled,
                     focused: !disabled && (focused || hovered)
-                  }, InputLabelProps), error && React__default.createElement(HiIconButton$1, {
+                  }, InputLabelProps), error && errorText && React__default.createElement(HiIconButton$1, {
                     className: classnames(classes.iconButton, classes.iconButtonError),
                     onClick: this.handleHelperClick,
                     onKeyDown: this.handleKeyDown
@@ -73915,8 +73905,8 @@
               required: true,
               disabled: false,
               error: false,
-              errorText: '',
-              helperText: '',
+              errorText: undefined,
+              helperText: undefined,
               helperIcon: false,
               multiline: false,
               nbChars: 0,
@@ -73951,7 +73941,7 @@
               /**
                * Texte de l'erreur
                */
-              errorText: propTypes.string,
+              errorText: propTypes.oneOfType([propTypes.string, propTypes.bool]),
 
               /**
                * Propriétés appliquées au composant FormHelperText
@@ -74487,7 +74477,8 @@
                   display: 'inline-flex',
                   width: 62,
                   position: 'relative',
-                  flexShrink: 0
+                  flexShrink: 0,
+                  zIndex: 0
                 },
                 bar: {
                   borderRadius: 7,
@@ -79931,7 +79922,7 @@
 
             var TableSortLabel$2 = unwrapExports(TableSortLabel$1);
 
-            var _TYPE_ACCOUNT, _TYPE_ACCOUNT_NUMBER, _TYPE_ADDRESS, _TYPE_CHECKBOX, _TYPE_COUNTRY, _TYPE_DATE, _TYPE_ICON, _TYPE_IMAGE, _TYPE_NUMERIC, _TYPE_RATE, _TYPE_SENTINEL, _TYPE_STATUS, _TYPE_TEXT, _TYPE_THIRD_PARTY_SEC, _DEFAULT_WIDTHS, _DEFAULT_VIEWS, _DEFAULT_PADDING;
+            var _TYPE_ACCOUNT, _TYPE_ACCOUNT_NUMBER, _TYPE_ADDRESS, _TYPE_CHECKBOX, _TYPE_COUNTRY, _TYPE_DATE, _TYPE_ICON, _TYPE_IMAGE, _TYPE_NUMERIC, _TYPE_RATE, _TYPE_SENTINEL, _TYPE_SENTINEL_SCORE, _TYPE_STATUS, _TYPE_TEXT, _TYPE_THIRD_PARTY_SEC, _DEFAULT_WIDTHS, _DEFAULT_VIEWS, _DEFAULT_PADDING;
             /**
              * Cell height (px)
              */
@@ -79955,6 +79946,7 @@
             var TYPE_NUMERIC = 'numeric';
             var TYPE_RATE = 'rate';
             var TYPE_SENTINEL = 'sentinel';
+            var TYPE_SENTINEL_SCORE = 'sentinel_score';
             var TYPE_STATUS = 'status';
             var TYPE_COUNTRY = 'country';
             var TYPE_TEXT = 'text';
@@ -79974,13 +79966,13 @@
              * @type {{}}
              */
 
-            var DEFAULT_WIDTHS = (_DEFAULT_WIDTHS = {}, defineProperty(_DEFAULT_WIDTHS, TYPE_ACCOUNT, (_TYPE_ACCOUNT = {}, defineProperty(_TYPE_ACCOUNT, VIEWS.LARGE, 160), defineProperty(_TYPE_ACCOUNT, VIEWS.MEDIUM, 120), defineProperty(_TYPE_ACCOUNT, VIEWS.SMALL, 80), _TYPE_ACCOUNT)), defineProperty(_DEFAULT_WIDTHS, TYPE_ACCOUNT_NUMBER, (_TYPE_ACCOUNT_NUMBER = {}, defineProperty(_TYPE_ACCOUNT_NUMBER, VIEWS.LARGE, 100), defineProperty(_TYPE_ACCOUNT_NUMBER, VIEWS.MEDIUM, 80), defineProperty(_TYPE_ACCOUNT_NUMBER, VIEWS.SMALL, 60), _TYPE_ACCOUNT_NUMBER)), defineProperty(_DEFAULT_WIDTHS, TYPE_ADDRESS, (_TYPE_ADDRESS = {}, defineProperty(_TYPE_ADDRESS, VIEWS.LARGE, 120), defineProperty(_TYPE_ADDRESS, VIEWS.MEDIUM, 100), defineProperty(_TYPE_ADDRESS, VIEWS.SMALL, 80), _TYPE_ADDRESS)), defineProperty(_DEFAULT_WIDTHS, TYPE_CHECKBOX, (_TYPE_CHECKBOX = {}, defineProperty(_TYPE_CHECKBOX, VIEWS.LARGE, 40), defineProperty(_TYPE_CHECKBOX, VIEWS.MEDIUM, 40), defineProperty(_TYPE_CHECKBOX, VIEWS.SMALL, 40), _TYPE_CHECKBOX)), defineProperty(_DEFAULT_WIDTHS, TYPE_COUNTRY, (_TYPE_COUNTRY = {}, defineProperty(_TYPE_COUNTRY, VIEWS.LARGE, 120), defineProperty(_TYPE_COUNTRY, VIEWS.MEDIUM, 80), defineProperty(_TYPE_COUNTRY, VIEWS.SMALL, 40), _TYPE_COUNTRY)), defineProperty(_DEFAULT_WIDTHS, TYPE_DATE, (_TYPE_DATE = {}, defineProperty(_TYPE_DATE, VIEWS.LARGE, 220), defineProperty(_TYPE_DATE, VIEWS.MEDIUM, 140), defineProperty(_TYPE_DATE, VIEWS.SMALL, 120), _TYPE_DATE)), defineProperty(_DEFAULT_WIDTHS, TYPE_ICON, (_TYPE_ICON = {}, defineProperty(_TYPE_ICON, VIEWS.LARGE, 140), defineProperty(_TYPE_ICON, VIEWS.MEDIUM, 100), defineProperty(_TYPE_ICON, VIEWS.SMALL, 60), _TYPE_ICON)), defineProperty(_DEFAULT_WIDTHS, TYPE_IMAGE, (_TYPE_IMAGE = {}, defineProperty(_TYPE_IMAGE, VIEWS.LARGE, 140), defineProperty(_TYPE_IMAGE, VIEWS.MEDIUM, 100), defineProperty(_TYPE_IMAGE, VIEWS.SMALL, 60), _TYPE_IMAGE)), defineProperty(_DEFAULT_WIDTHS, TYPE_NUMERIC, (_TYPE_NUMERIC = {}, defineProperty(_TYPE_NUMERIC, VIEWS.LARGE, 120), defineProperty(_TYPE_NUMERIC, VIEWS.MEDIUM, 100), defineProperty(_TYPE_NUMERIC, VIEWS.SMALL, 80), _TYPE_NUMERIC)), defineProperty(_DEFAULT_WIDTHS, TYPE_RATE, (_TYPE_RATE = {}, defineProperty(_TYPE_RATE, VIEWS.LARGE, 100), defineProperty(_TYPE_RATE, VIEWS.MEDIUM, 90), defineProperty(_TYPE_RATE, VIEWS.SMALL, 80), _TYPE_RATE)), defineProperty(_DEFAULT_WIDTHS, TYPE_SENTINEL, (_TYPE_SENTINEL = {}, defineProperty(_TYPE_SENTINEL, VIEWS.LARGE, 80), defineProperty(_TYPE_SENTINEL, VIEWS.MEDIUM, 80), defineProperty(_TYPE_SENTINEL, VIEWS.SMALL, 80), _TYPE_SENTINEL)), defineProperty(_DEFAULT_WIDTHS, TYPE_STATUS, (_TYPE_STATUS = {}, defineProperty(_TYPE_STATUS, VIEWS.LARGE, 120), defineProperty(_TYPE_STATUS, VIEWS.MEDIUM, 100), defineProperty(_TYPE_STATUS, VIEWS.SMALL, 80), _TYPE_STATUS)), defineProperty(_DEFAULT_WIDTHS, TYPE_TEXT, (_TYPE_TEXT = {}, defineProperty(_TYPE_TEXT, VIEWS.LARGE, 200), defineProperty(_TYPE_TEXT, VIEWS.MEDIUM, 120), defineProperty(_TYPE_TEXT, VIEWS.SMALL, 80), _TYPE_TEXT)), defineProperty(_DEFAULT_WIDTHS, TYPE_THIRD_PARTY_SECURITY, (_TYPE_THIRD_PARTY_SEC = {}, defineProperty(_TYPE_THIRD_PARTY_SEC, VIEWS.LARGE, 40), defineProperty(_TYPE_THIRD_PARTY_SEC, VIEWS.MEDIUM, 40), defineProperty(_TYPE_THIRD_PARTY_SEC, VIEWS.SMALL, 40), _TYPE_THIRD_PARTY_SEC)), _DEFAULT_WIDTHS);
+            var DEFAULT_WIDTHS = (_DEFAULT_WIDTHS = {}, defineProperty(_DEFAULT_WIDTHS, TYPE_ACCOUNT, (_TYPE_ACCOUNT = {}, defineProperty(_TYPE_ACCOUNT, VIEWS.LARGE, 160), defineProperty(_TYPE_ACCOUNT, VIEWS.MEDIUM, 120), defineProperty(_TYPE_ACCOUNT, VIEWS.SMALL, 80), _TYPE_ACCOUNT)), defineProperty(_DEFAULT_WIDTHS, TYPE_ACCOUNT_NUMBER, (_TYPE_ACCOUNT_NUMBER = {}, defineProperty(_TYPE_ACCOUNT_NUMBER, VIEWS.LARGE, 100), defineProperty(_TYPE_ACCOUNT_NUMBER, VIEWS.MEDIUM, 80), defineProperty(_TYPE_ACCOUNT_NUMBER, VIEWS.SMALL, 60), _TYPE_ACCOUNT_NUMBER)), defineProperty(_DEFAULT_WIDTHS, TYPE_ADDRESS, (_TYPE_ADDRESS = {}, defineProperty(_TYPE_ADDRESS, VIEWS.LARGE, 120), defineProperty(_TYPE_ADDRESS, VIEWS.MEDIUM, 100), defineProperty(_TYPE_ADDRESS, VIEWS.SMALL, 80), _TYPE_ADDRESS)), defineProperty(_DEFAULT_WIDTHS, TYPE_CHECKBOX, (_TYPE_CHECKBOX = {}, defineProperty(_TYPE_CHECKBOX, VIEWS.LARGE, 40), defineProperty(_TYPE_CHECKBOX, VIEWS.MEDIUM, 40), defineProperty(_TYPE_CHECKBOX, VIEWS.SMALL, 40), _TYPE_CHECKBOX)), defineProperty(_DEFAULT_WIDTHS, TYPE_COUNTRY, (_TYPE_COUNTRY = {}, defineProperty(_TYPE_COUNTRY, VIEWS.LARGE, 120), defineProperty(_TYPE_COUNTRY, VIEWS.MEDIUM, 80), defineProperty(_TYPE_COUNTRY, VIEWS.SMALL, 40), _TYPE_COUNTRY)), defineProperty(_DEFAULT_WIDTHS, TYPE_DATE, (_TYPE_DATE = {}, defineProperty(_TYPE_DATE, VIEWS.LARGE, 220), defineProperty(_TYPE_DATE, VIEWS.MEDIUM, 140), defineProperty(_TYPE_DATE, VIEWS.SMALL, 120), _TYPE_DATE)), defineProperty(_DEFAULT_WIDTHS, TYPE_ICON, (_TYPE_ICON = {}, defineProperty(_TYPE_ICON, VIEWS.LARGE, 140), defineProperty(_TYPE_ICON, VIEWS.MEDIUM, 100), defineProperty(_TYPE_ICON, VIEWS.SMALL, 60), _TYPE_ICON)), defineProperty(_DEFAULT_WIDTHS, TYPE_IMAGE, (_TYPE_IMAGE = {}, defineProperty(_TYPE_IMAGE, VIEWS.LARGE, 140), defineProperty(_TYPE_IMAGE, VIEWS.MEDIUM, 100), defineProperty(_TYPE_IMAGE, VIEWS.SMALL, 60), _TYPE_IMAGE)), defineProperty(_DEFAULT_WIDTHS, TYPE_NUMERIC, (_TYPE_NUMERIC = {}, defineProperty(_TYPE_NUMERIC, VIEWS.LARGE, 120), defineProperty(_TYPE_NUMERIC, VIEWS.MEDIUM, 100), defineProperty(_TYPE_NUMERIC, VIEWS.SMALL, 80), _TYPE_NUMERIC)), defineProperty(_DEFAULT_WIDTHS, TYPE_RATE, (_TYPE_RATE = {}, defineProperty(_TYPE_RATE, VIEWS.LARGE, 100), defineProperty(_TYPE_RATE, VIEWS.MEDIUM, 90), defineProperty(_TYPE_RATE, VIEWS.SMALL, 80), _TYPE_RATE)), defineProperty(_DEFAULT_WIDTHS, TYPE_SENTINEL, (_TYPE_SENTINEL = {}, defineProperty(_TYPE_SENTINEL, VIEWS.LARGE, 64), defineProperty(_TYPE_SENTINEL, VIEWS.MEDIUM, 64), defineProperty(_TYPE_SENTINEL, VIEWS.SMALL, 64), _TYPE_SENTINEL)), defineProperty(_DEFAULT_WIDTHS, TYPE_SENTINEL_SCORE, (_TYPE_SENTINEL_SCORE = {}, defineProperty(_TYPE_SENTINEL_SCORE, VIEWS.LARGE, 80), defineProperty(_TYPE_SENTINEL_SCORE, VIEWS.MEDIUM, 80), defineProperty(_TYPE_SENTINEL_SCORE, VIEWS.SMALL, 80), _TYPE_SENTINEL_SCORE)), defineProperty(_DEFAULT_WIDTHS, TYPE_STATUS, (_TYPE_STATUS = {}, defineProperty(_TYPE_STATUS, VIEWS.LARGE, 120), defineProperty(_TYPE_STATUS, VIEWS.MEDIUM, 100), defineProperty(_TYPE_STATUS, VIEWS.SMALL, 80), _TYPE_STATUS)), defineProperty(_DEFAULT_WIDTHS, TYPE_TEXT, (_TYPE_TEXT = {}, defineProperty(_TYPE_TEXT, VIEWS.LARGE, 200), defineProperty(_TYPE_TEXT, VIEWS.MEDIUM, 120), defineProperty(_TYPE_TEXT, VIEWS.SMALL, 80), _TYPE_TEXT)), defineProperty(_DEFAULT_WIDTHS, TYPE_THIRD_PARTY_SECURITY, (_TYPE_THIRD_PARTY_SEC = {}, defineProperty(_TYPE_THIRD_PARTY_SEC, VIEWS.LARGE, 40), defineProperty(_TYPE_THIRD_PARTY_SEC, VIEWS.MEDIUM, 40), defineProperty(_TYPE_THIRD_PARTY_SEC, VIEWS.SMALL, 40), _TYPE_THIRD_PARTY_SEC)), _DEFAULT_WIDTHS);
             /**
              * Cell default width for each views
              * @type {{}}
              */
 
-            var DEFAULT_VIEWS = (_DEFAULT_VIEWS = {}, defineProperty(_DEFAULT_VIEWS, TYPE_ACCOUNT, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_ACCOUNT_NUMBER, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_ADDRESS, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_CHECKBOX, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_COUNTRY, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_DATE, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_ICON, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_IMAGE, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_NUMERIC, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_RATE, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_SENTINEL, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_STATUS, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_TEXT, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_THIRD_PARTY_SECURITY, VIEWS.LARGE), _DEFAULT_VIEWS);
+            var DEFAULT_VIEWS = (_DEFAULT_VIEWS = {}, defineProperty(_DEFAULT_VIEWS, TYPE_ACCOUNT, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_ACCOUNT_NUMBER, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_ADDRESS, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_CHECKBOX, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_COUNTRY, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_DATE, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_ICON, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_IMAGE, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_NUMERIC, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_RATE, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_SENTINEL, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_SENTINEL_SCORE, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_STATUS, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_TEXT, VIEWS.LARGE), defineProperty(_DEFAULT_VIEWS, TYPE_THIRD_PARTY_SECURITY, VIEWS.LARGE), _DEFAULT_VIEWS);
             /**
              * Cell default side padding (one side) for each views
              * @type {{}}
@@ -79992,7 +79984,7 @@
              * @type {*[]}
              */
 
-            var ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL];
+            var ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL, TYPE_SENTINEL_SCORE];
 
             var styles$c = function styles(theme) {
               return {
@@ -80340,13 +80332,18 @@
 
                         case TYPE_SENTINEL:
                           return React__default.createElement(CellSentinel, {
-                            automaticFraudReviewResult: datacell.automaticFraudReviewResult,
-                            fraudResult: datacell.value,
-                            hideFraudResult: datacell.hideFraudResult,
-                            pendingManualAction: datacell.pendingManualAction,
-                            score: datacell.score,
-                            smartDecision: datacell.smartDecision,
-                            view: cell.view ? cell.view : DEFAULT_VIEWS[cell.type]
+                            color: datacell.color,
+                            label: datacell.label,
+                            letter: datacell.label2,
+                            active: datacell.active,
+                            reviewer: datacell.reviewer,
+                            outlined: datacell.outlined
+                          });
+
+                        case TYPE_SENTINEL_SCORE:
+                          return React__default.createElement(CellSentinelScore, {
+                            value: datacell.value,
+                            result: datacell.result
                           });
 
                         case TYPE_PIN_TO_ACTION:
@@ -91173,7 +91170,7 @@
                   bottom: 0,
                   height: 32,
                   width: 32,
-                  margin: '4px 24px'
+                  margin: '0px 24px'
                 },
                 calendarButton: {
                   fontWeight: theme.typography.fontWeightMedium
@@ -91466,8 +91463,8 @@
             }(React__default.Component);
 
             YearPickerOverlay.defaultProps = {
-              disableFutureDays: false,
-              disablePastDays: false,
+              // disableFutureDays: true,
+              // disablePastDays: false,
               minimumDate: new Date(2013, 4, 1),
               // by default 1 May 2013
               translations: {
@@ -91503,7 +91500,7 @@
               /**
                * Date minimale sélectionnable
                */
-              minimumDate: propTypes.instanceOf(Date),
+              minimumDate: propTypes.instanceOf(Date).isRequired,
 
               /**
                * Fonction de callback
@@ -91610,7 +91607,8 @@
                 button: {
                   height: 32,
                   width: 32,
-                  margin: '4px 24px'
+                  margin: '4px 24px',
+                  padding: 0
                 },
                 left: {
                   float: 'left'
@@ -92168,7 +92166,7 @@
                     todayButton: translations.today,
                     onTodayButtonClick: this.handleCurrentMonthChange,
                     weekdayElement: Weekday$1,
-                    NavBarElement: function NavBarElement(props2) {
+                    navbarElement: function navbarElement(props2) {
                       return React__default.createElement(NavBar$1, _extends_1({
                         showClockButton: enableTime,
                         onClockClick: _this2.handleClockClick
@@ -92477,400 +92475,288 @@
 
                 _this = possibleConstructorReturn(this, getPrototypeOf(HiDateRangePicker).call(this));
 
-                _this.handleInputChange = function (inputName) {
-                  return function (event) {
-                    _this.event = event;
+                _this.handleDayChange = function (name, day) {
+                  if (day) {
+                    // if time disabled, focus TO input
+                    // else focus current input
+                    if (!_this.props.enableTime) {
+                      if (day instanceof Date) {
+                        if (name === 'from' && _this.toInput) {
+                          _this.toInput.getInput().focus();
+                        }
+                      }
+                    } else {
+                      _this.timeout = setTimeout(function () {
+                        if (_this["".concat(name, "Input")].getInput()) {
+                          _this["".concat(name, "Input")].getInput().focus();
+                        }
+                      }, 10);
+                    }
 
-                    _this.props.onChange(inputName, event.target.value);
-                  };
+                    if (_this.props.onChange) {
+                      _this.handleChange(name, day);
+                    }
+
+                    if (_this.props.enableTime) {
+                      _this.openPanel('time');
+                    }
+                  }
                 };
 
-                _this.handleDayPickerFocus = function (name) {
-                  return function () {
-                    _this.setState({
-                      focusedInput: name
-                    });
+                _this.handleInputChange = function (inputName) {
+                  return function (event) {
+                    _this.handleChange(inputName, event.target.value);
                   };
                 };
 
-                _this.handleDayPickerBlur = function (name) {
-                  return function () {
-                    _this.setState({
-                      focusedInput: ''
-                    });
+                _this.onDayToClick = function (day) {
+                  _this.handleDayChange('to', day);
 
-                    if (_this.props.onBlur) {
-                      _this.props.onBlur(name);
-                    }
-                  };
+                  document.activeElement.blur();
                 };
 
-                _this.state = {
-                  fromCurrentMonth: props.from ? props.from : new Date(),
-                  toCurrentMonth: props.to ? props.to : new Date(),
-                  focusedInput: ''
-                };
-                _this.handleReset = _this.handleReset.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleDayChange = _this.handleDayChange.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleDayChangeFrom = _this.handleDayChangeFrom.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleDayChangeTo = _this.handleDayChangeTo.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleCurrentMonthChange = _this.handleCurrentMonthChange.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleCurrentMonthChangeFrom = _this.handleCurrentMonthChangeFrom.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleCurrentMonthChangeTo = _this.handleCurrentMonthChangeTo.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleTimeChange = _this.handleTimeChange.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleCalendarClick = _this.handleCalendarClick.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleCalendarClickFrom = _this.handleCalendarClickFrom.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleCalendarClickTo = _this.handleCalendarClickTo.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleClockClick = _this.handleClockClick.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleClockClickFrom = _this.handleClockClickFrom.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleClockClickTo = _this.handleClockClickTo.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleMonthClick = _this.handleMonthClick.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleMonthClickFrom = _this.handleMonthClickFrom.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleMonthClickTo = _this.handleMonthClickTo.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleYearClick = _this.handleYearClick.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleYearClickFrom = _this.handleYearClickFrom.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleYearClickTo = _this.handleYearClickTo.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleDayPickerFocus = _this.handleDayPickerFocus.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleDayPickerBlur = _this.handleDayPickerBlur.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleInputChange = _this.handleInputChange.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.openPanel = _this.openPanel.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderCaption = _this.renderCaption.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderCaptionFrom = _this.renderCaptionFrom.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderCaptionTo = _this.renderCaptionTo.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderNavBar = _this.renderNavBar.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderNavBarFrom = _this.renderNavBarFrom.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderNavBarTo = _this.renderNavBarTo.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderOverlay = _this.renderOverlay.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderOverlayFrom = _this.renderOverlayFrom.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderOverlayTo = _this.renderOverlayTo.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderMonthPickerOverlay = _this.renderMonthPickerOverlay.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderTimePickerOverlay = _this.renderTimePickerOverlay.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.renderYearPickerOverlay = _this.renderYearPickerOverlay.bind(assertThisInitialized(assertThisInitialized(_this)));
-                return _this;
-              }
+                _this.handleTimeChange = function (name, date, precision) {
+                  _this.handleChange(name, date);
 
-              createClass(HiDateRangePicker, [{
-                key: "componentDidUpdate",
-                value: function componentDidUpdate(prevProps) {
-                  var _this2 = this;
+                  if (name === 'from' && precision === 'minute') {
+                    _this.fromInput.hideDayPicker();
 
-                  // Focus From input on enabling
-                  if (prevProps.disabled === true && this.props.disabled === false) {
-                    this.timeout = setTimeout(function () {
-                      if (_this2.fromInput.getInput()) {
-                        _this2.fromInput.getInput().focus();
-                      }
-                    }, 0);
+                    _this.toInput.getInput().focus();
+
+                    _this.toInput.showDayPicker();
+
+                    _this.openPanel('calendar');
+                  } else if (name === 'to' && precision === 'minute') {
+                    _this.toInput.hideDayPicker();
+
+                    document.activeElement.blur();
                   }
-                }
-              }, {
-                key: "componentWillUnmount",
-                value: function componentWillUnmount() {
-                  clearTimeout(this.timeout);
-                }
-              }, {
-                key: "handleDayChange",
-                value: function handleDayChange(name, day, modifiers) {
-                  var _this3 = this;
+                };
 
-                  if (day) {
-                    // if time disabled, focus TO input
-                    // else focus current input
-                    if (!this.props.enableTime) {
-                      if (day instanceof Date) {
-                        if (name === 'from' && this.toInput) {
-                          this.toInput.getInput().focus();
-                        } else if (name === 'to') {
-                          if (typeof this.event === 'undefined' || this.event && this.event.type !== 'change') {
-                            // trigger blur only if user clicks on date into calendar
-                            // else keep focus to see day selection into calendar
-                            document.activeElement.blur();
-                          }
+                _this.handleChange = function (name, day) {
+                  var translations = _this.props.translations;
+                  var date = undefined;
+                  var error = undefined;
+                  var now = new Date();
+                  var _this$props = _this.props,
+                      minimumDate = _this$props.minimumDate,
+                      disableFutureDays = _this$props.disableFutureDays,
+                      format = _this$props.format;
 
-                          delete this.event;
-                        }
-                      }
+                  if (day instanceof Date) {
+                    date = day;
+                  } else if (day) {
+                    var parsedValue = moment(day, _this.props.format, true);
+
+                    if (parsedValue.isValid()) {
+                      date = parsedValue.toDate();
                     } else {
-                      this.timeout = setTimeout(function () {
-                        if (_this3["".concat(name, "Input")].getInput()) {
-                          _this3["".concat(name, "Input")].getInput().focus();
-                        }
-                      }, 10);
+                      error = translations.invalid_format;
                     }
+                  }
 
-                    if (this.props.onChange) {
-                      // Keep Time if set
-                      if (this.props.enableTime) {
-                        if (this.props[name]) {
-                          day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
-                        } else {
-                          day.setHours(0, 0);
-                        }
-                      }
+                  if (date) {
+                    var comparativeDate = name === 'to' ? moment(_this.props.from) : moment(_this.props.to);
 
-                      this.props.onChange(name, day);
+                    if (name === 'to' && comparativeDate > moment(date) || name === 'from' && comparativeDate < moment(date)) {
+                      error = translations.to_superior_from;
+                    } else if (date < minimumDate) {
+                      error = translations.date_inferior_min_date.replace("%s", moment(minimumDate).format(format));
+                    } else if (disableFutureDays && date > now) {
+                      error = translations.date_superior_max_date.replace("%s", moment().format(format));
                     }
 
-                    if (this.props.enableTime) {
-                      this.openPanel(name, 'time');
+                    if (!_this.props.enableTime) {
+                      if (name === 'from') {
+                        date.setHours(0, 0);
+                      } else {
+                        date.setHours(23, 59);
+                      }
                     }
                   }
-                }
-              }, {
-                key: "handleDayChangeFrom",
-                value: function handleDayChangeFrom(day, modifiers) {
-                  this.handleDayChange('from', day, modifiers);
-                }
-              }, {
-                key: "handleDayChangeTo",
-                value: function handleDayChangeTo(day, modifiers) {
-                  this.handleDayChange('to', day, modifiers);
-                }
-              }, {
-                key: "handleCurrentMonthChange",
-                value: function handleCurrentMonthChange(name, day) {
-                  var _this$setState;
 
-                  this.setState((_this$setState = {}, defineProperty(_this$setState, "".concat(name, "CurrentMonth"), day), defineProperty(_this$setState, "".concat(name, "OpenedPanel"), 'calendar'), _this$setState));
-                }
-              }, {
-                key: "handleCurrentMonthChangeFrom",
-                value: function handleCurrentMonthChangeFrom(day) {
-                  this.handleCurrentMonthChange('from', day);
-                }
-              }, {
-                key: "handleCurrentMonthChangeTo",
-                value: function handleCurrentMonthChangeTo(day) {
-                  this.handleCurrentMonthChange('to', day);
-                }
-              }, {
-                key: "handleCalendarClick",
-                value: function handleCalendarClick(name) {
-                  this.openPanel(name, 'calendar');
-                }
-              }, {
-                key: "handleCalendarClickFrom",
-                value: function handleCalendarClickFrom() {
-                  this.handleCalendarClick('from');
-                }
-              }, {
-                key: "handleCalendarClickTo",
-                value: function handleCalendarClickTo() {
-                  this.handleCalendarClick('to');
-                }
-              }, {
-                key: "handleClockClick",
-                value: function handleClockClick(name) {
-                  this.openPanel(name, 'time');
-                }
-              }, {
-                key: "handleClockClickFrom",
-                value: function handleClockClickFrom() {
-                  this.handleClockClick('from');
-                }
-              }, {
-                key: "handleClockClickTo",
-                value: function handleClockClickTo() {
-                  this.handleClockClick('to');
-                }
-              }, {
-                key: "handleMonthClick",
-                value: function handleMonthClick(name) {
-                  this.openPanel(name, 'months');
-                }
-              }, {
-                key: "handleMonthClickFrom",
-                value: function handleMonthClickFrom() {
-                  this.handleMonthClick('from');
-                }
-              }, {
-                key: "handleMonthClickTo",
-                value: function handleMonthClickTo() {
-                  this.handleMonthClick('to');
-                }
-              }, {
-                key: "handleYearClick",
-                value: function handleYearClick(name) {
-                  this.openPanel(name, 'years');
-                }
-              }, {
-                key: "handleYearClickFrom",
-                value: function handleYearClickFrom() {
-                  this.handleYearClick('from');
-                }
-              }, {
-                key: "handleYearClickTo",
-                value: function handleYearClickTo() {
-                  this.handleYearClick('to');
-                }
-              }, {
-                key: "handleTimeChange",
-                value: function handleTimeChange(name, date, precision) {
-                  this.props.onChange(name, date);
+                  _this.props.onChange(name, date);
 
-                  if (name === 'from' && precision === 'minute') {
-                    this.fromInput.hideDayPicker();
-                    this.toInput.getInput().focus();
-                    this.toInput.showDayPicker();
-                  } else if (name === 'to' && precision === 'minute') {
-                    this.toInput.hideDayPicker();
-                    document.activeElement.blur();
+                  _this.props.onChange("".concat(name, "Error"), error);
+                };
+
+                _this.handleCurrentMonthChange = function (day) {
+                  _this.setState({
+                    currentMonth: day,
+                    openedPanel: 'calendar'
+                  });
+                };
+
+                _this.handleDayPickerFocus = function (name) {
+                  _this.setState({
+                    focusedInput: name
+                  });
+                };
+
+                _this.handleDayPickerBlur = function (name) {
+                  _this.setState({
+                    focusedInput: ''
+                  });
+
+                  if (_this.props.onBlur) {
+                    _this.props.onBlur(name);
                   }
-                }
-              }, {
-                key: "handleReset",
-                value: function handleReset(name) {
-                  var _this4 = this;
 
-                  this.handleCurrentMonthChange(name, new Date());
-                  this.timeout = setTimeout(function () {
-                    if (_this4.props.onReset) {
-                      _this4.props.onReset(name);
+                  _this.timeout = setTimeout(function () {
+                    if (!['from', 'to'].includes(_this.state.focusedInput)) {
+                      _this.setState({
+                        openedPanel: 'calendar'
+                      });
                     }
-                  }, 0);
-                }
-              }, {
-                key: "openPanel",
-                value: function openPanel(name, panel) {
-                  this.setState(defineProperty({}, "".concat(name, "OpenedPanel"), panel));
-                }
-              }, {
-                key: "renderCaption",
-                value: function renderCaption(name, propsCaption) {
+                  }, 100);
+                };
+
+                _this.handleReset = function (name) {
+                  _this.handleChange(name, undefined);
+
+                  _this.setState({
+                    keyFrom: _this.state.keyFrom === 1 ? 2 : 1,
+                    keyTo: _this.state.keyTo === 1 ? 2 : 1
+                  });
+                };
+
+                _this.openPanel = function (panel) {
+                  _this.setState({
+                    openedPanel: panel
+                  });
+                };
+
+                _this.renderCaption = function (propsCaption) {
                   return React__default.createElement(Caption$2, _extends_1({
-                    onMonthClick: this["handleMonthClick".concat(capitalize(name))],
-                    onYearClick: this["handleYearClick".concat(capitalize(name))]
+                    onMonthClick: function onMonthClick() {
+                      return _this.openPanel('months');
+                    },
+                    onYearClick: function onYearClick() {
+                      return _this.openPanel('years');
+                    }
                   }, propsCaption));
-                }
-              }, {
-                key: "renderCaptionFrom",
-                value: function renderCaptionFrom(propsCaption) {
-                  return this.renderCaption('from', propsCaption);
-                }
-              }, {
-                key: "renderCaptionTo",
-                value: function renderCaptionTo(propsCaption) {
-                  return this.renderCaption('to', propsCaption);
-                }
-              }, {
-                key: "renderNavBar",
-                value: function renderNavBar(name, propsNavBar) {
+                };
+
+                _this.renderNavBar = function (propsNavBar) {
                   return React__default.createElement(NavBar$1, _extends_1({
-                    showClockButton: this.props.enableTime,
-                    onClockClick: this["handleClockClick".concat(capitalize(name))]
+                    showClockButton: _this.props.enableTime,
+                    onClockClick: function onClockClick() {
+                      return _this.openPanel('time');
+                    }
                   }, propsNavBar));
-                }
-              }, {
-                key: "renderNavBarFrom",
-                value: function renderNavBarFrom(propsNavBar) {
-                  return this.renderNavBar('from', propsNavBar);
-                }
-              }, {
-                key: "renderNavBarTo",
-                value: function renderNavBarTo(propsNavBar) {
-                  return this.renderNavBar('to', propsNavBar);
-                }
-              }, {
-                key: "renderOverlay",
-                value: function renderOverlay(name, propsOverlay, staticPosition) {
+                };
+
+                _this.renderOverlay = function (name, propsOverlay, staticPosition) {
                   var rangeOverlayProps = _extends_1({}, propsOverlay, {
                     side: name,
                     staticPosition: staticPosition
                   });
 
-                  switch (this.state["".concat(name, "OpenedPanel")]) {
+                  switch (_this.state['openedPanel']) {
                     case 'time':
-                      return this.renderTimePickerOverlay(name, rangeOverlayProps);
+                      return _this.renderTimePickerOverlay(name, rangeOverlayProps);
 
                     case 'months':
-                      return this.renderMonthPickerOverlay(name, rangeOverlayProps);
+                      return _this.renderMonthPickerOverlay(name, rangeOverlayProps);
 
                     case 'years':
-                      return this.renderYearPickerOverlay(name, rangeOverlayProps);
+                      return _this.renderYearPickerOverlay(name, rangeOverlayProps);
 
                     case 'calendar':
-                    default:
                       return React__default.createElement(Overlay$1, rangeOverlayProps);
                   }
-                }
-              }, {
-                key: "renderOverlayFrom",
-                value: function renderOverlayFrom(propsOverlay) {
-                  return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
-                }
-              }, {
-                key: "renderOverlayTo",
-                value: function renderOverlayTo(propsOverlay) {
-                  return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
-                }
-              }, {
-                key: "renderMonthPickerOverlay",
-                value: function renderMonthPickerOverlay(name, propsOverlay) {
+                };
+
+                _this.renderOverlayFrom = function (propsOverlay) {
+                  return _this.renderOverlay('from', propsOverlay, _this.props.staticPosition);
+                };
+
+                _this.renderOverlayTo = function (propsOverlay) {
+                  return _this.renderOverlay('to', propsOverlay, _this.props.staticPosition);
+                };
+
+                _this.renderMonthPickerOverlay = function (name, propsOverlay) {
                   var monthPickerProps = {
-                    value: this.state["".concat(name, "CurrentMonth")],
-                    onChange: this["handleCurrentMonthChange".concat(capitalize(name))]
+                    value: _this.state['currentMonth'],
+                    onChange: _this.handleCurrentMonthChange
                   };
                   return React__default.createElement(MonthPickerOverlay, _extends_1({
                     key: "".concat(name, "-month-picker-overlay")
                   }, monthPickerProps, propsOverlay));
-                }
-              }, {
-                key: "renderTimePickerOverlay",
-                value: function renderTimePickerOverlay(name, propsOverlay) {
-                  var _this5 = this;
+                };
 
+                _this.renderTimePickerOverlay = function (name, propsOverlay) {
                   var timePickerProps = {
-                    value: this.props[name],
+                    value: _this.props[name],
                     onChange: function onChange(date, precision) {
-                      return _this5.handleTimeChange(name, date, precision);
+                      return _this.handleTimeChange(name, date, precision);
                     },
-                    onCalendarClick: this["handleCalendarClick".concat(capitalize(name))]
+                    onCalendarClick: function onCalendarClick() {
+                      return _this.openPanel('calendar');
+                    }
                   };
                   return React__default.createElement(TimePickerOverlay$1, _extends_1({
                     key: "".concat(name, "-time-picker-overlay")
                   }, timePickerProps, propsOverlay));
-                }
-              }, {
-                key: "renderYearPickerOverlay",
-                value: function renderYearPickerOverlay(name, propsOverlay) {
+                };
+
+                _this.renderYearPickerOverlay = function (name, propsOverlay) {
                   var yearPickerProps = {
-                    value: this.state["".concat(name, "CurrentMonth")],
-                    onChange: this["handleCurrentMonthChange".concat(capitalize(name))],
-                    disabledFutureDays: this.props.disableFutureDays,
-                    disabledPastDays: this.props.disablePastDays
+                    value: _this.state['currentMonth'],
+                    onChange: _this.handleCurrentMonthChange,
+                    disabledFutureDays: _this.props.disableFutureDays
                   };
                   return React__default.createElement(YearPickerOverlay, _extends_1({
                     key: "".concat(name, "-year-picker-overlay")
                   }, yearPickerProps, propsOverlay));
+                };
+
+                _this.state = {
+                  currentMonth: new Date(),
+                  focusedInput: '',
+                  openedPanel: 'calendar',
+                  keyFrom: 1,
+                  keyTo: 1
+                };
+                return _this;
+              }
+
+              createClass(HiDateRangePicker, [{
+                key: "componentWillUnmount",
+                value: function componentWillUnmount() {
+                  clearTimeout(this.timeout);
                 }
               }, {
                 key: "render",
                 value: function render() {
-                  var _this6 = this,
+                  var _this2 = this,
                       _classNames;
 
-                  var _this$props = this.props,
-                      classes = _this$props.classes,
-                      disabledDays = _this$props.disabledDays,
-                      disablePastDays = _this$props.disablePastDays,
-                      disableFutureDays = _this$props.disableFutureDays,
-                      enableTime = _this$props.enableTime,
-                      labelFrom = _this$props.labelFrom,
-                      labelTo = _this$props.labelTo,
-                      locale = _this$props.locale,
-                      format = _this$props.format,
-                      from = _this$props.from,
-                      minimumDate = _this$props.minimumDate,
-                      onReset = _this$props.onReset,
-                      to = _this$props.to,
-                      translations = _this$props.translations,
-                      id = _this$props.id,
-                      staticPosition = _this$props.staticPosition,
-                      props = objectWithoutProperties(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "minimumDate", "onReset", "to", "translations", "id", "staticPosition"]);
+                  var _this$props2 = this.props,
+                      classes = _this$props2.classes,
+                      disabled = _this$props2.disabled,
+                      disabledDays = _this$props2.disabledDays,
+                      disableFutureDays = _this$props2.disableFutureDays,
+                      enableTime = _this$props2.enableTime,
+                      labelFrom = _this$props2.labelFrom,
+                      labelTo = _this$props2.labelTo,
+                      locale = _this$props2.locale,
+                      format = _this$props2.format,
+                      from = _this$props2.from,
+                      fromError = _this$props2.fromError,
+                      minimumDate = _this$props2.minimumDate,
+                      onReset = _this$props2.onReset,
+                      to = _this$props2.to,
+                      toError = _this$props2.toError,
+                      translations = _this$props2.translations,
+                      id = _this$props2.id,
+                      staticPosition = _this$props2.staticPosition,
+                      errorText = _this$props2.errorText,
+                      hasSelector = _this$props2.hasSelector,
+                      helperIcon = _this$props2.helperIcon,
+                      helperText = _this$props2.helperText,
+                      props = objectWithoutProperties(_this$props2, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText"]);
 
-                  var _this$state = this.state,
-                      fromCurrentMonth = _this$state.fromCurrentMonth,
-                      toCurrentMonth = _this$state.toCurrentMonth;
                   var now = new Date();
                   var modifiers = {
                     start: from,
@@ -92915,99 +92801,81 @@
                     selectedDays: selectedDays,
                     todayButton: translations.today,
                     weekdayElement: Weekday$1
-                  }, props); // Build Props for the From DatePicker
-                  // Disable days after 'to' date if define
-
-
-                  var after;
-
-                  if (to instanceof Date && disableFutureDays) {
-                    after = to < now ? now : to;
-                  } else if (to instanceof Date) {
-                    after = to;
-                  } else if (disableFutureDays) {
-                    after = now;
-                  }
-
-                  var disabledDaysFrom = _extends_1({}, disablePastDays && {
-                    before: now
-                  }, (to || disableFutureDays) && {
-                    after: after
-                  }, disabledDays);
+                  }, props);
 
                   var fromDayPickerProps = _extends_1({}, dayPickerProps, {
-                    onTodayButtonClick: this.handleCurrentMonthChangeFrom,
-                    NavBarElement: this.renderNavBarFrom,
-                    captionElement: this.renderCaptionFrom,
-                    disabledDays: disabledDaysFrom,
-                    month: fromCurrentMonth,
-                    modifiers: _extends_1({}, modifiers, {
-                      disabled: disabledDaysFrom
-                    })
-                  }); // Build Props for the To DatePicker
-                  // Disable days before 'from' date if define
-
-
-                  var before;
-
-                  if (from instanceof Date && disablePastDays) {
-                    before = from < now ? now : from;
-                  } else if (from instanceof Date) {
-                    before = from;
-                  } else if (disablePastDays) {
-                    before = now;
-                  }
-
-                  var disabledDaysTo = _extends_1({}, (from || disablePastDays) && {
-                    before: before
-                  }, disableFutureDays && {
-                    after: now
-                  }, disabledDays);
+                    onTodayButtonClick: this.handleCurrentMonthChange,
+                    navbarElement: this.renderNavBar,
+                    captionElement: this.renderCaption,
+                    disabledDays: _extends_1({
+                      before: minimumDate
+                    }, disableFutureDays && {
+                      after: now
+                    }, to && {
+                      after: to
+                    }),
+                    month: this.state.currentMonth,
+                    modifiers: _extends_1({}, modifiers)
+                  });
 
                   var toDayPickerProps = _extends_1({}, dayPickerProps, {
-                    onTodayButtonClick: this.handleCurrentMonthChangeTo,
-                    NavBarElement: this.renderNavBarTo,
-                    captionElement: this.renderCaptionTo,
-                    disabledDays: disabledDaysTo,
-                    month: toCurrentMonth,
-                    modifiers: _extends_1({}, modifiers, {
-                      disabled: disabledDaysTo
-                    })
+                    onTodayButtonClick: this.handleCurrentMonthChange,
+                    navbarElement: this.renderNavBar,
+                    onDayClick: this.onDayToClick,
+                    captionElement: this.renderCaption,
+                    disabledDays: _extends_1({
+                      before: minimumDate
+                    }, disableFutureDays && {
+                      after: now
+                    }, from && {
+                      before: from
+                    }),
+                    month: this.state.currentMonth,
+                    modifiers: _extends_1({}, modifiers)
                   }); // From & To InputProps
 
 
                   var fromInputProps = _extends_1({}, onReset && {
                     onReset: function onReset() {
-                      return _this6.handleReset('from');
+                      return _this2.handleReset('from');
                     }
-                  }, props, labelFrom && {
+                  }, props, fromError && {
+                    error: true
+                  }, labelFrom && {
                     label: labelFrom
                   }, {
                     id: "".concat(id, "-from"),
-                    onChange: this.handleInputChange('from')
+                    onChange: this.handleInputChange('from'),
+                    disabled: disabled
                   });
 
                   var toInputProps = _extends_1({}, onReset && {
                     onReset: function onReset() {
-                      return _this6.handleReset('to');
+                      return _this2.handleReset('to');
                     }
-                  }, props, labelTo && {
+                  }, props, toError && {
+                    error: true
+                  }, labelTo && {
                     label: labelTo
                   }, {
                     id: "".concat(id, "-to"),
-                    onChange: this.handleInputChange('to')
+                    onChange: this.handleInputChange('to'),
+                    disabled: disabled
                   });
 
                   var toClass = classnames(classes.toInput, (_classNames = {}, defineProperty(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'), defineProperty(_classNames, classes.right4, staticPosition === true && this.state.focusedInput === 'from'), _classNames));
-                  return React__default.createElement("div", {
+                  var content = React__default.createElement("div", {
                     className: classnames(classes.root, classes.rangePickerContainer)
                   }, React__default.createElement("div", {
                     className: classes.fromInput,
-                    onFocus: this.handleDayPickerFocus('from'),
-                    onBlur: this.handleDayPickerBlur('from')
+                    onFocus: function onFocus() {
+                      return _this2.handleDayPickerFocus('from');
+                    } // onBlur={() => this.handleDayPickerBlur('from')}
+
                   }, React__default.createElement("div", null, React__default.createElement(DayPickerInput_1$1, {
+                    key: this.state.keyFrom,
                     ref: function ref(el) {
-                      _this6.fromInput = el;
+                      _this2.fromInput = el;
                     },
                     value: from,
                     hideOnDayClick: false,
@@ -93018,15 +92886,22 @@
                     format: enableTime ? "".concat(format, " HH:mm") : format,
                     formatDate: moment$1.formatDate,
                     parseDate: moment$1.parseDate,
-                    onDayChange: this.handleDayChangeFrom,
+                    onDayChange: function onDayChange(day) {
+                      return _this2.handleDayChange('from', day);
+                    },
                     placeholder: ''
                   }))), React__default.createElement("div", {
                     className: toClass,
-                    onFocus: this.handleDayPickerFocus('to'),
-                    onBlur: this.handleDayPickerBlur('to')
+                    onFocus: function onFocus() {
+                      return _this2.handleDayPickerFocus('to');
+                    },
+                    onBlur: function onBlur() {
+                      return _this2.handleDayPickerBlur('to');
+                    }
                   }, React__default.createElement(DayPickerInput_1$1, {
+                    key: this.state.keyTo,
                     ref: function ref(el) {
-                      _this6.toInput = el;
+                      _this2.toInput = el;
                     },
                     value: to,
                     hideOnDayClick: false,
@@ -93036,10 +92911,23 @@
                     inputProps: toInputProps,
                     format: enableTime ? "".concat(format, " HH:mm") : format,
                     formatDate: moment$1.formatDate,
-                    parseDate: moment$1.parseDate,
-                    onDayChange: this.handleDayChangeTo,
+                    parseDate: moment$1.parseDate //onDayChange={(day) => this.handleDayChange('to', day)}
+                    ,
                     placeholder: ''
                   })));
+
+                  if (!hasSelector) {
+                    content = React__default.createElement(HiFormControl$1, {
+                      disabled: disabled,
+                      helperIcon: helperIcon,
+                      helperText: helperText,
+                      errorText: errorText,
+                      error: fromError || toError,
+                      label: ' '
+                    }, content);
+                  }
+
+                  return content;
                 }
               }]);
 
@@ -93048,22 +92936,26 @@
 
             HiDateRangePicker.defaultProps = {
               disabledDays: [],
-              disablePastDays: false,
-              disableFutureDays: false,
+              disableFutureDays: true,
               staticPosition: false,
               enableTime: false,
-              format: 'YYYY-DD-MM',
+              hasSelector: false,
+              format: 'YYYY-MM-DD',
               labelFrom: 'Start',
               labelTo: 'End',
               locale: 'fr-FR',
-              minimumDate: new Date(2013, 4, 1),
-              // by default 1 May 2013
               translations: {
                 today: 'today',
                 hour: 'Hour',
                 minute: 'Minute',
                 month: 'Month',
-                year: 'Year'
+                year: 'Year',
+                invalid_format: 'The date format is not valid',
+                to_superior_from: 'Date from cannot be greater than date to',
+                missing_date_from: 'Missing date from',
+                missing_date_to: 'Missing date to',
+                date_superior_max_date: 'Date from cannot be greater than %s',
+                date_inferior_min_date: 'Date from cannot be before than %s'
               }
             };
             HiDateRangePicker.propTypes = {
@@ -93077,25 +92969,20 @@
                */
               disabled: propTypes.bool,
 
-              /**
-               * Définie les jours non sélectionnables
-               */
-              disabledDays: propTypes.oneOfType([propTypes.array, propTypes.object, propTypes.instanceOf(Date)]),
-
               /**
                * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
                */
               disableFutureDays: propTypes.bool,
 
               /**
-               * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
+               * Ajoute la gestion de l'heure
                */
-              disablePastDays: propTypes.bool,
+              enableTime: propTypes.bool,
 
               /**
-               * Ajoute la gestion de l'heure
+               * Texte de l'erreur
                */
-              enableTime: propTypes.bool,
+              errorText: propTypes.string,
 
               /**
                * Format des dates affichées
@@ -93105,7 +92992,29 @@
               /**
                * Date de début sélectionnée
                */
-              from: propTypes.oneOfType([propTypes.instanceOf(Date), propTypes.string]),
+              from: propTypes.instanceOf(Date),
+              //from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+              /**
+               * Erreur sur date from
+               */
+              fromError: propTypes.bool,
+
+              /**
+               * @ignore
+               * Si true, on n'enveloppe pas le composant avec un HiFormControl
+               */
+              hasSelector: propTypes.bool,
+
+              /**
+               * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+               */
+              helperIcon: propTypes.bool,
+
+              /**
+               * Texte de l'aide
+               */
+              helperText: propTypes.string,
 
               /**
                * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
@@ -93130,7 +93039,7 @@
               /**
                * Date minimale sélectionnable
                */
-              minimumDate: propTypes.instanceOf(Date),
+              minimumDate: propTypes.instanceOf(Date).isRequired,
 
               /**
                * Callback à la sélection d'une date
@@ -93143,7 +93052,7 @@
                * @param {string} nom du champs
                * @param {string} nouvelle valeur du champs
                */
-              onChange: propTypes.func,
+              onChange: propTypes.func.isRequired,
 
               /**
                * Callback au reset de l'input
@@ -93159,7 +93068,12 @@
               /**
                * Date de fin sélectionnée
                */
-              to: propTypes.oneOfType([propTypes.instanceOf(Date), propTypes.string]),
+              to: propTypes.instanceOf(Date),
+
+              /**
+               * Erreur sur date to
+               */
+              toError: propTypes.bool,
 
               /**
                * Traductions
@@ -94060,6 +93974,9 @@
                 activeColorNeutral: {
                   color: theme.palette.neutral.contrastText,
                   backgroundColor: theme.palette.neutral.main
+                },
+                outlined: {
+                  border: '1px solid'
                 }
               };
             };
@@ -94077,15 +93994,16 @@
                   label = props.label,
                   color = props.color,
                   active = props.active,
+                  outlined = props.outlined,
                   fontWeight = props.fontWeight,
                   style = props.style,
                   theme = props.theme,
-                  other = objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "fontWeight", "style", "theme"]);
+                  other = objectWithoutProperties(props, ["classes", "className", "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", _extends_1({
-                className: classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.color, !active), defineProperty(_classNames, classes.activeColor, active), defineProperty(_classNames, classes["activeColor".concat(capitalize(color))], active && isHiColor), defineProperty(_classNames, classes["color".concat(capitalize(color))], !active && isHiColor), _classNames), className),
+                className: classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.color, !active), defineProperty(_classNames, classes.activeColor, active), defineProperty(_classNames, classes.outlined, outlined), defineProperty(_classNames, classes["activeColor".concat(capitalize(color))], active && isHiColor), defineProperty(_classNames, classes["color".concat(capitalize(color))], !active && isHiColor), _classNames), className),
                 style: _extends_1({}, style, isHexColor && {
                   backgroundColor: active ? color : fade(color, 0.08),
                   color: active ? theme.palette.getContrastText(color) : color
@@ -94125,11 +94043,17 @@
               /**
                * Label à afficher
                */
-              label: propTypes.oneOfType([propTypes.string, propTypes.number, propTypes.node]).isRequired
+              label: propTypes.oneOfType([propTypes.string, propTypes.number, propTypes.node]).isRequired,
+
+              /**
+               * Ajoute une bordure
+               */
+              outlined: propTypes.bool
             };
             HiColoredLabel.defaultProps = {
               active: false,
-              color: 'primary'
+              color: 'primary',
+              outlined: false
             };
             var HiColoredLabel$1 = withStyles(styles$o, {
               hiComponent: true,
@@ -98190,6 +98114,7 @@
                       fallbackImage = _this$props2.fallbackImage,
                       hideCheckbox = _this$props2.hideCheckbox,
                       onSelect = _this$props2.onSelect,
+                      onKeyDown = _this$props2.onKeyDown,
                       indeterminate = _this$props2.indeterminate,
                       indeterminateIcon = _this$props2.indeterminateIcon,
                       icon = _this$props2.icon,
@@ -98235,12 +98160,14 @@
                   }, disabled || {
                     onClick: onSelect,
                     onMouseEnter: this.setHover(true),
-                    onMouseLeave: this.setHover(false)
+                    onMouseLeave: this.setHover(false),
+                    onKeyDown: onKeyDown
                   }, {
                     style: {
                       paddingLeft: "".concat(paddingLeft + level * 32, "px")
                     }
                   }), !hideCheckbox && !pinned && React__default.createElement(HiCheckbox$1, {
+                    tabIndex: onKeyDown ? '-1' : 0,
                     checked: selected,
                     checkedIcon: checkedIcon,
                     classes: {
@@ -98385,6 +98312,11 @@
                */
               onSelect: propTypes.func,
 
+              /**
+               * Fonction de callback à la sélection de l'élément
+               */
+              onKeyDown: propTypes.func,
+
               /**
                * Padding par défaut des éléments
                */
@@ -98830,6 +98762,31 @@
               name: 'HmuiHiSelectableListHierarchic'
             })(HiSelectableListHierarchic);
 
+            var ArrowDropDown = createCommonjsModule(function (module, exports) {
+
+
+
+            Object.defineProperty(exports, "__esModule", {
+              value: true
+            });
+            exports.default = void 0;
+
+            var _react = interopRequireDefault(React__default);
+
+            var _createSvgIcon = interopRequireDefault(createSvgIcon_1);
+
+            var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
+              d: "M7 10l5 5 5-5z"
+            }), _react.default.createElement("path", {
+              fill: "none",
+              d: "M0 0h24v24H0z"
+            })), 'ArrowDropDown');
+
+            exports.default = _default;
+            });
+
+            var ArrowDropDownIcon = unwrapExports(ArrowDropDown);
+
             var styles$s = function styles(theme) {
               return {
                 root: {
@@ -98896,13 +98853,13 @@
                       transform: 'scaleX(1)'
                     },
                     '&$error': {
-                      border: "1px solid ".concat(theme.palette.negative.normal),
+                      border: "1px solid ".concat(theme.palette.negative.main),
                       borderRadius: 2
                     }
                   }
                 },
                 disabled: {
-                  color: "".concat(theme.palette.text.disabled),
+                  color: theme.palette.text.disabled,
                   '&:before': {
                     display: 'none'
                   }
@@ -98919,13 +98876,17 @@
                   display: 'inline-flex',
                   width: '100%'
                 }),
+                placeholder: {
+                  color: theme.palette.grey[400]
+                },
                 icon: {
                   transition: theme.transitions.create(['opacity', 'transform'], {
                     duration: theme.transitions.duration.shorter
                   })
                 },
                 iconOpen: {
-                  transform: 'rotate(90deg)'
+                  transform: 'rotate(90deg)',
+                  color: theme.palette.primary.main
                 },
                 iconClose: {
                   transform: 'rotate(0deg)'
@@ -98936,24 +98897,26 @@
              * @ignore - internal component.
              */
 
-            var SelectInput =
+            var _ref$5 = React__default.createElement(ArrowDropDownIcon, null);
+
+            var HiSelectInput =
             /*#__PURE__*/
             function (_React$PureComponent) {
-              inherits(SelectInput, _React$PureComponent);
+              inherits(HiSelectInput, _React$PureComponent);
 
-              function SelectInput(props) {
+              function HiSelectInput(props) {
                 var _this;
 
-                classCallCheck(this, SelectInput);
+                classCallCheck(this, HiSelectInput);
 
-                _this = possibleConstructorReturn(this, getPrototypeOf(SelectInput).call(this, props));
+                _this = possibleConstructorReturn(this, getPrototypeOf(HiSelectInput).call(this, props));
 
                 _this.handleKeyDown = function (event) {
                   var key = keycode(event);
 
-                  if (['up', 'down', 'space'].includes(key)) {
-                    event.preventDefault();
-
+                  if (_this.props.onKeyDown) {
+                    _this.props.onKeyDown(event);
+                  } else if (key === 'down' || key === 'up') {
                     _this.props.onClick();
                   } else if (key === 'enter' && _this.props.onSubmit) {
                     event.preventDefault();
@@ -98962,18 +98925,58 @@
                   }
                 };
 
+                _this.handleKeyDownReset = function (event) {
+                  var key = keycode(event);
+
+                  if (key === 'enter' || key === 'space') {
+                    _this.handleReset(event);
+
+                    event.stopPropagation();
+                    event.preventDefault();
+                  }
+                };
+
                 _this.handleClick = function (event) {
                   if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
                     _this.props.onClick(event);
                   }
                 };
 
+                _this.handleReset = function (event) {
+                  _this.props.onReset(event);
+
+                  if (_this.input) {
+                    _this.input.focus();
+                  }
+                };
+
+                _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();
+                    }
+                  }
+                };
+
+                _this.handleRef = function (el) {
+                  _this.input = el;
+
+                  if (_this.props.refElement) {
+                    _this.props.refElement(el);
+                  }
+                };
+
                 _this.handleKeyDown = _this.handleKeyDown.bind(assertThisInitialized(assertThisInitialized(_this)));
                 _this.handleClick = _this.handleClick.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.handleBlur = _this.handleBlur.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.handleRef = _this.handleRef.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.handleReset = _this.handleReset.bind(assertThisInitialized(assertThisInitialized(_this)));
                 return _this;
               }
 
-              createClass(SelectInput, [{
+              createClass(HiSelectInput, [{
                 key: "render",
                 value: function render() {
                   var _classNames,
@@ -98991,16 +98994,14 @@
                       focused = _this$props.focused,
                       error = _this$props.error,
                       id = _this$props.id,
-                      refElement = _this$props.refElement,
-                      theme = _this$props.theme; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+                      placeholder = _this$props.placeholder; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
                   var rootClass = classnames(classes.root, classes.inkbar, classes.underline, (_classNames = {}, defineProperty(_classNames, classes.disabled, disabled), defineProperty(_classNames, classes.focused, focused), defineProperty(_classNames, classes.error, error && !focused), _classNames));
                   var iconClass = classnames(classes.icon, (_classNames2 = {}, defineProperty(_classNames2, classes.iconOpen, open), defineProperty(_classNames2, classes.iconClose, !open), _classNames2));
-                  var render = noButton ? React__default.createElement("div", {
+                  return noButton ? React__default.createElement("div", {
                     id: id,
                     className: rootClass,
                     onClick: onClick,
-                    disabled: disabled,
                     onMouseEnter: this.props.onMouseEnter,
                     onMouseLeave: this.props.onMouseLeave,
                     onKeyDown: this.handleKeyDown,
@@ -99008,59 +99009,54 @@
                     onBlur: this.props.onBlur,
                     role: "button",
                     tabIndex: "0",
-                    ref: function ref(el) {
-                      if (refElement) refElement(el);
-                    }
+                    ref: this.handleRef
                   }, React__default.createElement("span", {
-                    className: classes.label
-                  }, value), React__default.createElement(HiIcon$1, {
-                    className: iconClass,
-                    icon: "arrow_drop_down"
+                    className: classnames(classes.label, defineProperty({}, classes.placeholder, value === undefined))
+                  }, value || placeholder), React__default.createElement(ArrowDropDownIcon, {
+                    className: iconClass
                   })) : React__default.createElement(ButtonBase$2, {
                     id: id,
-                    classes: {
-                      root: rootClass
-                    },
+                    className: rootClass,
                     onClick: this.handleClick,
                     disabled: disabled,
                     onMouseEnter: this.props.onMouseEnter,
                     onMouseLeave: this.props.onMouseLeave,
                     onKeyDown: this.handleKeyDown,
                     onFocus: this.props.onFocus,
-                    onBlur: this.props.onBlur,
-                    buttonRef: function buttonRef(el) {
-                      if (refElement) refElement(el);
-                    }
+                    onBlur: this.handleBlur,
+                    buttonRef: this.handleRef
                   }, React__default.createElement("span", {
-                    className: classes.label
-                  }, value), onReset && focused && React__default.createElement("div", {
+                    className: classnames(classes.label, defineProperty({}, classes.placeholder, value === undefined))
+                  }, value || placeholder), onReset && focused && React__default.createElement("div", {
                     ref: function ref(el) {
                       _this2.resetIcon = el;
                     }
                   }, React__default.createElement(HiIcon$1, {
                     icon: "close",
-                    size: 24,
-                    color: theme.palette.neutral.main,
-                    onClick: onReset
-                  })), React__default.createElement(HiIcon$1, {
-                    className: iconClass,
-                    icon: "arrow_drop_down"
-                  }));
-                  return render;
+                    size: 20,
+                    color: "neutral",
+                    onClick: this.handleReset,
+                    onKeyDown: this.handleKeyDownReset,
+                    tabIndex: 0
+                  })), React__default.createElement(Icon$2, {
+                    classes: {
+                      root: iconClass
+                    }
+                  }, _ref$5));
                 }
               }]);
 
-              return SelectInput;
+              return HiSelectInput;
             }(React__default.PureComponent);
 
-            SelectInput.defaultProps = {
+            HiSelectInput.defaultProps = {
               disabled: false,
               open: false,
               focused: false,
               noButton: false,
               error: false
             };
-            SelectInput.propTypes = {
+            HiSelectInput.propTypes = {
               /**
                * Useful to extend the style applied to components.
                */
@@ -99108,12 +99104,17 @@
               onFocus: propTypes.func,
 
               /**
-               * Fonction de callback appelée lorsqu'on survole le champs
+               * Fonction de callback à la pression de touche
+               */
+              onKeyDown: propTypes.func,
+
+              /**
+               * Fonction de callback au survol de l'input
                */
               onMouseEnter: propTypes.func,
 
               /**
-               * Fonction de callback appelée lorsque le curseur quitte le champs
+               * Fonction de callback à la sortie du survol de l'input
                */
               onMouseLeave: propTypes.func,
 
@@ -99132,6 +99133,11 @@
                */
               open: propTypes.bool,
 
+              /**
+               * Placeholder
+               */
+              placeholder: propTypes.string,
+
               /**
                * Use that property to pass a ref callback to the native component.
                */
@@ -99142,11 +99148,10 @@
                */
               value: propTypes.oneOfType([propTypes.string, propTypes.number, propTypes.node])
             };
-            var SelectInput$1 = withStyles(styles$s, {
+            var HiSelectInput$1 = withStyles(styles$s, {
               hiComponent: true,
-              name: 'HmuiSelectInput',
-              withTheme: true
-            })(SelectInput);
+              name: 'HmuiHiSelectInput'
+            })(HiSelectInput);
 
             var styles$t = function styles(theme) {
               return {
@@ -99162,14 +99167,24 @@
                 popperWidth: {
                   width: '100% !important'
                 },
+                popperRightAlign: {
+                  right: 0,
+                  left: 'unset!important'
+                },
                 paper: {
                   borderRadius: '0px 2px',
-                  maxHeight: 440,
+                  maxHeight: 480,
                   transition: 'none !important'
                 },
                 labelIcon: {
                   marginRight: 10
                 },
+                labelImg: {
+                  height: 18,
+                  width: 'auto',
+                  margin: '0 4px',
+                  verticalAlign: 'middle'
+                },
                 selectIconLabel: _extends_1({
                   whiteSpace: 'nowrap',
                   overflow: 'hidden',
@@ -99178,6 +99193,15 @@
                 }, theme.typography.b1, {
                   display: 'inline-flex',
                   width: '100%'
+                }),
+                selectImgLabel: _extends_1({
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  paddingRight: 16
+                }, theme.typography.b1, {
+                  display: 'inline-flex',
+                  width: '100%'
                 })
               };
             };
@@ -99191,9 +99215,8 @@
              * - prise en compte du type des éléments (text, image, icon, ...)
              *
              * Ce composant réuni les sous-composants
-             * - SelectInput : affiche l'élément dans le formulaire
-             * - HiSearchField : intègre une barre de recherche dans le Popper,
-             * il filtre la liste des suggestions
+             * - HiSelectInput : affiche l'élément dans le formulaire
+             * - HiSearchField : intègre une barre de recherche dans le Popper, il filtre la liste des suggestions
              * - HiSelectableList : affiche la liste des suggestions selon le type des éléments
              */
 
@@ -99202,12 +99225,12 @@
             function (_React$PureComponent) {
               inherits(HiSelect, _React$PureComponent);
 
-              function HiSelect(_props) {
+              function HiSelect(props) {
                 var _this;
 
                 classCallCheck(this, HiSelect);
 
-                _this = possibleConstructorReturn(this, getPrototypeOf(HiSelect).call(this, _props));
+                _this = possibleConstructorReturn(this, getPrototypeOf(HiSelect).call(this, props));
 
                 _this.handleClick = function () {
                   if (_this.state.open) {
@@ -99217,101 +99240,51 @@
                       open: true
                     });
 
-                    var options = _this.props.options.slice();
-
-                    _this.handleSuggestions(options);
-
-                    if (_this.props.onClick) {
-                      _this.props.onClick();
-                    } // Gestion du focus
+                    _this.handleSuggestions(_this.props.options);
 
+                    if (_this.props.onClick) _this.props.onClick(); // Gestion du focus
 
                     if (!_this.props.searchable) {
-                      // sinon focus sur le dernier élément selectionné
-                      _this.focusOnSelectedItem();
+                      // sinon focus sur le premier élément de la liste
+                      _this.focusOnFirstItem();
                     }
                   }
                 };
 
-                _this.buildHierarchyTrees = function (props) {
-                  // Construct two associative arrays
-                  // hierarchy[parentId] => children
-                  // hierarchySelected[parentId] => selected children
-                  var hierarchy = {};
-                  var hierarchySelected = {};
-                  var value = props.value || [];
-                  if (!Array.isArray(value)) value = [props.value];
-                  props.options.forEach(function (option) {
-                    if (option.hasChildren === true && !hierarchy.hasOwnProperty(option.id)) {
-                      hierarchy[option.id] = [];
-                      hierarchySelected[option.id] = [];
-                    } else if (option.hasOwnProperty('parentId')) {
-                      hierarchy[option.parentId].push(option.id);
-
-                      if (value.includes(option.id)) {
-                        hierarchySelected[option.parentId].push(option.id);
-                      }
-                    }
-                  });
-                  return {
-                    hierarchy: hierarchy,
-                    hierarchySelected: hierarchySelected
-                  };
-                };
-
-                _this.focusOnSelectedItem = function () {
-                  // On récupère la div parent "overlay"
+                _this.focusOnFirstItem = function () {
                   var overlay = require$$11.findDOMNode(_this.overlay);
-                  var multiple = _this.props.multiple;
-                  var value = _this.props.value;
-                  var selectedIdList = Array.isArray(value) ? value : [value];
                   setTimeout(function () {
-                    var focused = false; // Si un ou plusieurs items sont selectionnés, on focus sur le dernier
-
-                    if (selectedIdList.length > 0) {
-                      var itemSelected = overlay.querySelector("[data-id=\"".concat(selectedIdList[selectedIdList.length - 1], "\"]"));
-
-                      if (itemSelected && itemSelected.parentElement.tagName === 'LI') {
-                        itemSelected.parentElement.focus();
-                        focused = true;
-                      }
-                    } // Si pas d'item selectionné, ou pas visible (en cas de recherche), focus sur le premier
-
-
-                    if (selectedIdList.length === 0 || !focused) {
-                      // On recupère tous les items
-                      var items = overlay.getElementsByTagName('li');
-                      var itemToFocus = items[0]; // Si select multiple, et qu'au moins un selectionné, focus sur le 2e item
-
-                      if (multiple && selectedIdList.length > 0) {
-                        itemToFocus = items[1];
-                      }
-
-                      if (itemToFocus) {
-                        itemToFocus.focus();
-                      }
-                    }
+                    var item = overlay.getElementsByTagName('li')[0];
+                    item.focus();
                   }, 1);
                 };
 
                 _this.handleKeyDown = function (event) {
                   var nextItem;
+                  var key = keycode(event);
 
-                  if (event.key === 'ArrowDown') {
+                  if (key === 'down') {
+                    event.preventDefault();
                     nextItem = getNextItemSelectable(document.activeElement, 'down');
-                  } else if (event.key === 'ArrowUp') {
+                  } else if (key === 'up') {
+                    event.preventDefault();
                     nextItem = getNextItemSelectable(document.activeElement, 'up');
-                  } else if (event.key === 'Tab') {
-                    /* if (!this.props.staticPosition) {
-                        document.body.style.overflow = 'auto';
-                    } */
+                  } else if (key === 'tab' || key === 'esc') {
                     _this.setState({
                       open: false
                     });
-                  } else if (event.key === 'Escape') {
-                    _this.setState({
-                      open: false
+                  } else if (key === 'space' || key === 'enter' && !_this.props.multiple) {
+                    event.preventDefault();
+
+                    var item = _this.props.options.find(function (elem) {
+                      return String(elem.id) === event.target.id;
                     });
+
+                    _this.handleSelect(null, item);
+                  } else if (key === 'enter' && _this.props.multiple) {
+                    event.preventDefault();
+
+                    _this.handleClose();
                   }
 
                   if (nextItem) {
@@ -99320,10 +99293,14 @@
                 };
 
                 _this.handleKeyDownSearch = function (event) {
-                  if (_this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-                    _this.focusOnSelectedItem();
-                  } else if (event.key === 'Enter' && _this.props.onSubmit) {
-                    _this.props.onSubmit(event);
+                  var key = keycode(event);
+
+                  if (_this.overlay && (key === 'down' || key === 'up')) {
+                    _this.focusOnFirstItem();
+                  } else if (_this.overlay && key === 'esc' || key === 'enter') {
+                    event.preventDefault();
+
+                    _this.handleClose();
                   }
                 };
 
@@ -99340,426 +99317,273 @@
                 };
 
                 _this.handleClose = function () {
+                  _this.setState({
+                    open: false
+                  });
+
                   if (_this.props.onClose) {
                     _this.props.onClose();
                   }
 
-                  if (_this.selectInputElement) {
-                    _this.selectInputElement.focus();
+                  if (_this.inputEl) {
+                    _this.inputEl.focus();
                   }
-
-                  _this.setState({
-                    open: false
-                  });
                 };
 
                 _this.handleClickAway = function (event) {
                   // Au clic sur le bouton, on laisse le handleClick fermer le select
-                  if (!_this.selectInputElement.contains(event.target)) {
+                  if (!_this.inputEl.contains(event.target)) {
                     _this.handleClose(event);
                   }
                 };
 
                 _this.handleSelect = function (event, item) {
                   var _this$props = _this.props,
+                      hasAll = _this$props.hasAll,
                       multiple = _this$props.multiple,
-                      value = _this$props.value,
                       onChange = _this$props.onChange,
                       options = _this$props.options,
-                      hierarchic = _this$props.hierarchic,
-                      pinnedItem = _this$props.pinnedItem;
-                  var _this$state = _this.state,
-                      hierarchySelected = _this$state.hierarchySelected,
-                      hierarchy = _this$state.hierarchy,
-                      nbOptions = _this$state.nbOptions;
+                      value = _this$props.value;
 
-                  var hiSelected = _extends_1({}, hierarchySelected);
-
-                  if (multiple) {
-                    var valueList = value;
-
-                    if (item.id === '_all') {
-                      if (valueList.length === nbOptions) {
-                        valueList = [];
-
-                        if (hierarchic) {
-                          // if hierarchic select => empty associative array of selected children
-                          Object.keys(hiSelected).forEach(function (key) {
-                            hiSelected[key] = [];
-                          });
-                        }
-                      } else {
-                        options.forEach(function (option) {
-                          if (option.hasChildren !== true && !valueList.includes(option.id) && option.id !== '_all') {
-                            valueList.push(option.id);
-                          } else if (option.hasChildren === true) {
-                            // if hierarchic select => fill associative array of selected children
-                            hiSelected[option.id] = hierarchy[option.id];
-                          }
-                        });
-                      }
-                    } else if (valueList.includes(item.id) || item.hasChildren === true && hierarchySelected[item.id].length === hierarchy[item.id].length) {
-                      // item déjà sélectionné => on le déselectionne
-                      if (item.hasChildren !== true) {
-                        valueList = valueList.filter(function (val) {
-                          return val !== item.id;
-                        });
-                      }
+                  if (!multiple) {
+                    // single value
+                    _this.handleClose();
 
-                      if (item.hasChildren === true) {
-                        // remove all children
-                        valueList = valueList.filter(function (val) {
-                          return !_this.state.hierarchy[item.id].includes(val);
-                        });
-                        hiSelected[item.id] = [];
-                      } else if (item.hasOwnProperty('parentId')) {
-                        // Si item est un enfant on l'enlève du tableau associatif des
-                        // elmts sélectionnés
-                        hiSelected[item.parentId].splice(hiSelected[item.parentId].indexOf(item.id), 1);
-                      }
+                    onChange(event, item.id, item);
+                  } else if (hasAll && item.id === '_all') {
+                    if (value.length === options.length) {
+                      // unselect _all options
+                      onChange(event, [], item);
                     } else {
-                      if (pinnedItem && item.id === pinnedItem.id) {
-                        Object.keys(hiSelected).map(function (parentItemId) {
-                          hiSelected[parentItemId] = [];
-                          return true;
-                        });
-                        valueList = [item.id];
-                      } else {
-                        // item non sélectionné => on le sélectionne
-                        if (item.hasChildren !== true) valueList.push(item.id);
-
-                        if (pinnedItem && valueList.includes(pinnedItem.id)) {
-                          valueList.splice(valueList.indexOf(pinnedItem.id), 1);
-                        }
-                      }
-
-                      if (item.hasChildren === true) {
-                        // Si item parent => on ajoute tous les enfants
-                        // Ou on les supprime s'ils sont déjà tous sélectionnés (dans une liste filtrée)
-                        var idsInSuggestions = [];
-
-                        _this.state.suggestions.forEach(function (suggestion) {
-                          if (_this.state.hierarchy[item.id].includes(suggestion.id)) {
-                            idsInSuggestions.push(suggestion.id);
-                          }
-                        }); // if(hierarchySelected[item.id].length > 0) {}
-
-
-                        var allChildrenSuggestionsSelected = true;
-                        idsInSuggestions.forEach(function (id) {
-                          if (!hierarchySelected[item.id].includes(id)) {
-                            allChildrenSuggestionsSelected = false;
-                          }
-                        });
-
-                        if (allChildrenSuggestionsSelected === true) {
-                          // On supprime les enfants car déjà tous sélectionnés
-                          idsInSuggestions.forEach(function (id) {
-                            valueList.splice(valueList.indexOf(id), 1);
-                            hiSelected[item.id].splice(hiSelected[item.id].indexOf(id), 1);
-                          });
-                        } else {
-                          // On ajoute tous les enfants filtrés au éléments sélectionnés
-                          valueList = arrayUnique(valueList.concat(idsInSuggestions));
-                          hiSelected[item.id] = arrayUnique(hiSelected[item.id].concat(idsInSuggestions));
-                        }
-
-                        _this.setState({
-                          hierarchySelected: hiSelected
-                        });
-                      } else if (item.hasOwnProperty('parentId')) {
-                        // Si item est un enfant on l'ajoute du tableau associatif des
-                        // elmts sélectionnés
-                        hiSelected[item.parentId].push(item.id);
-                      }
+                      // select _all options
+                      onChange(event, options.map(function (option) {
+                        return option.id;
+                      }), item);
                     }
-
-                    _this.setState({
-                      hierarchySelected: hiSelected
-                    });
-
-                    onChange(event, valueList, item);
+                  } else if (value.includes(item.id)) {
+                    // unselect item
+                    onChange(event, value.filter(function (id) {
+                      return id !== item.id;
+                    }), item);
                   } else {
-                    onChange(event, item.id, item);
-
-                    _this.handleClose();
+                    onChange(event, toConsumableArray(value).concat([item.id]), item);
                   }
                 };
 
                 _this.handleSuggestions = function (suggestions) {
                   var _this$props2 = _this.props,
-                      options = _this$props2.options,
                       hasAll = _this$props2.hasAll,
                       iconAll = _this$props2.iconAll,
-                      translations = _this$props2.translations,
-                      multiple = _this$props2.multiple;
+                      translations = _this$props2.translations;
 
                   if (suggestions.length === 0) {
-                    // Handle No Result
-                    // FIX to remove all item
-                    suggestions = [];
-                    suggestions.push({
-                      id: '_no_result',
-                      type: 'text',
-                      disabled: true,
-                      centered: true,
-                      checkbox: false,
-                      label: translations.no_result_match
+                    // Add '_no_result' suggestion
+                    _this.setState(function (prevState) {
+                      return _extends_1({}, prevState, {
+                        suggestions: [{
+                          id: '_no_result',
+                          type: 'text',
+                          disabled: true,
+                          centered: true,
+                          hideCheckbox: true,
+                          label: translations.no_result_match
+                        }]
+                      });
                     });
-                  } else if (hasAll && suggestions.length > 0 && suggestions.length === options.length && multiple === true) {
-                    // Handle 'All'
-                    if (suggestions.filter(function (suggestion) {
-                      return suggestion.id === '_all';
-                    }).length === 0) {
-                      var allItem = {
+                  } else {
+                    _this.setState({
+                      suggestions: toConsumableArray(hasAll ? [_extends_1({
                         id: '_all',
-                        icon: iconAll,
                         label: translations.all
-                      };
-
-                      if (iconAll !== false) {
-                        allItem.type = 'icon';
-                      }
-
-                      suggestions.unshift(allItem);
-                    }
+                      }, iconAll && {
+                        type: 'icon',
+                        icon: iconAll
+                      })] : []).concat(toConsumableArray(suggestions))
+                    });
                   }
-
-                  _this.setState({
-                    suggestions: suggestions
-                  });
                 };
 
-                _this.handleRequestDelete = function (evt) {
-                  evt.stopPropagation();
-
-                  _this.props.onChange(_this.props.name, []);
+                _this.handleScroll = function (e) {
+                  if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
+                    _this.props.onScrollReachBottom();
+                  }
                 };
 
-                _this.handleScroll = function (event) {
-                  if (!_this.props.loadingMoreResults && _this.props.hasMore && event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop < 15) {
-                    _this.props.loadMoreResults(_this.state.resultsPageNumber + 1);
+                _this.handleSearch = function (e, inputValue) {
+                  var searchValue = inputValue && e.target.value ? inputValue : e.target.value;
 
-                    _this.setState(function (prevState) {
-                      return {
-                        resultsPageNumber: prevState.resultsPageNumber + 1
-                      };
+                  if (_this.props.onSearch) {
+                    _this.props.onSearch(e, searchValue);
+                  } else {
+                    _this.setState({
+                      searchValue: searchValue
                     });
                   }
                 };
 
-                _this.state = {
-                  open: false,
-                  focused: false,
-                  suggestions: [],
-                  hierarchySelected: {},
-                  hierarchy: {},
-                  nbOptions: 0,
-                  dynamic: _props.dynamic || false,
-                  resultsPageNumber: 1
-                }; // Check if value is in options
-
-                var valueInOptions = false;
-                var _val = _props.value; // No options provided.
-
-                if (!_props.options.length || !_val || !_val.length) {
-                  valueInOptions = true;
-                } else {
-                  // Check if an option match value prop.
-                  _props.options.forEach(function (item) {
-                    if (!valueInOptions && _val.indexOf(item.id) !== -1) {
-                      valueInOptions = true;
-                    }
-                  });
-
-                  if (!valueInOptions && _props.pinnedItem) {
-                    if (_props.value.indexOf(_props.pinnedItem.id) >= 0) {
-                      valueInOptions = true;
+                _this.handleSearchReset = function () {
+                  _this.handleSearch({
+                    target: {
+                      value: ''
                     }
-                  }
-                }
-
-                if (!valueInOptions) {
-                  throw new Error('prop value provided does not match any option.');
-                }
+                  }, '');
+                };
 
-                if (_props.hierarchic === true && _props.options.length > 1) {
-                  var hierarchyTrees = _this.buildHierarchyTrees(_props);
+                _this.buildSelectProps = function (options) {
+                  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+                  var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+                  var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+                  // build item list
+                  var itemList = toConsumableArray(loading ? [{
+                    id: '_loading',
+                    type: 'loader',
+                    disabled: true,
+                    centered: true,
+                    hideCheckbox: true,
+                    label: 'loading'
+                  }] : []).concat(toConsumableArray(search !== '' ? toConsumableArray(options.filter(function (item) {
+                    return item.label && foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1;
+                  })) : toConsumableArray(_this.props.hasAll ? [_extends_1({
+                    id: '_all',
+                    label: _this.props.translations.all
+                  }, _this.props.iconAll && {
+                    type: 'icon',
+                    icon: _this.props.iconAll
+                  })] : []).concat(toConsumableArray(options))));
 
-                  _this.state.hierarchy = hierarchyTrees.hierarchy;
-                  _this.state.hierarchySelected = hierarchyTrees.hierarchySelected;
-                }
+                  return {
+                    itemList: itemList,
+                    inputValue: _this.buildInputValue(options, value, loading)
+                  };
+                };
 
-                if (_props.options.length > 0) {
-                  // Get real options number (parent & _all are not real options)
-                  var optionsLength = 0;
+                _this.buildInputValue = function (options) {
+                  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+                  var loading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+                  var _this$props3 = _this.props,
+                      classes = _this$props3.classes,
+                      hasAll = _this$props3.hasAll,
+                      translations = _this$props3.translations,
+                      type = _this$props3.type; // build input value
+
+                  var inputValue;
+
+                  if (loading && value.length === 1) {
+                    inputValue = translations.one_item_selected;
+                  } else if (hasAll && options.length === value.length) {
+                    inputValue = translations.all;
+                    value.unshift('_all');
+                  } else if (value.length > 1) {
+                    inputValue = translations.n_items_selected.replace('%s', value.length);
+                  } else if (value.length === 1) {
+                    var item = options.find(function (o) {
+                      return o.id === value[0];
+                    });
 
-                  _props.options.forEach(function (option) {
-                    if (option.hasChildren !== true && option.id !== '_all') {
-                      optionsLength += 1;
+                    if (item === undefined) {
+                      inputValue = translations.one_item_selected;
+                    } else if (type === 'icon' || item.type === 'icon') {
+                      inputValue = React__default.createElement("span", {
+                        className: classes.selectIconLabel
+                      }, React__default.createElement(HiIcon$1, {
+                        className: classes.labelIcon,
+                        icon: item.icon
+                      }), item.label);
+                    } else if (type === 'image' || item.type === 'image') {
+                      inputValue = React__default.createElement("span", {
+                        className: classes.selectIconLabel
+                      }, React__default.createElement("img", {
+                        className: classes.labelImg,
+                        src: item.img,
+                        alt: item.label
+                      }), item.label);
+                    } else {
+                      inputValue = item.label;
                     }
-                  });
+                  }
 
-                  _this.state.nbOptions = optionsLength;
-                } else if (!_props.dynamic) {
-                  _this.state.dynamic = true;
-                }
+                  return inputValue;
+                };
 
-                _this.handleSelect = _this.handleSelect.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.state = {
+                  open: false,
+                  focused: false,
+                  searchValue: props.searchValue ? undefined : '',
+                  suggestions: props.options
+                };
                 _this.handleClick = _this.handleClick.bind(assertThisInitialized(assertThisInitialized(_this)));
                 _this.handleClose = _this.handleClose.bind(assertThisInitialized(assertThisInitialized(_this)));
                 _this.handleClickAway = _this.handleClickAway.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleRequestDelete = _this.handleRequestDelete.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleSuggestions = _this.handleSuggestions.bind(assertThisInitialized(assertThisInitialized(_this)));
                 _this.handleFocus = _this.handleFocus.bind(assertThisInitialized(assertThisInitialized(_this)));
                 _this.handleBlur = _this.handleBlur.bind(assertThisInitialized(assertThisInitialized(_this)));
-                _this.handleScroll = _this.handleScroll.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.handleSearch = _this.handleSearch.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.handleSearchReset = _this.handleSearchReset.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.handleSelect = _this.handleSelect.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.handleSuggestions = _this.handleSuggestions.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.getInputElement = _this.getInputElement.bind(assertThisInitialized(assertThisInitialized(_this)));
                 return _this;
               }
 
               createClass(HiSelect, [{
-                key: "componentWillReceiveProps",
-                value: function componentWillReceiveProps(nextProps) {
-                  if (typeof this.props.onSearch !== 'undefined' && this.props.options && this.props.options.length > 0) {
-                    this.handleSuggestions(nextProps.options);
-                    var optionsLength = 0;
-                    nextProps.options.forEach(function (option) {
-                      if (option.hasChildren !== true && option.id !== '_all') {
-                        optionsLength += 1;
-                      }
-                    });
-                    this.setState({
-                      nbOptions: optionsLength
-                    });
-                  }
+                key: "getInputElement",
+                value: function getInputElement(el) {
+                  this.searchField = el;
 
-                  if (nextProps.hierarchic === true && nextProps.options.length > 1) {
-                    var hierarchyTrees = this.buildHierarchyTrees(nextProps);
-                    this.setState({
-                      hierarchy: hierarchyTrees.hierarchy,
-                      hierarchySelected: hierarchyTrees.hierarchySelected
-                    });
-                  }
-                }
-              }, {
-                key: "handleReset",
-                value: function handleReset(event) {
-                  if (this.props.onReset) {
-                    event.stopPropagation();
-                    this.props.onReset(event);
+                  if (this.props.inputRef) {
+                    this.props.inputRef(this.searchField);
                   }
                 }
               }, {
                 key: "render",
                 value: function render() {
-                  var _this2 = this;
-
-                  var _this$props3 = this.props,
-                      classes = _this$props3.classes,
-                      disabled = _this$props3.disabled,
-                      error = _this$props3.error,
-                      loading = _this$props3.loading,
-                      options = _this$props3.options,
-                      searchable = _this$props3.searchable,
-                      displayAsChip = _this$props3.displayAsChip,
-                      type = _this$props3.type,
-                      value = _this$props3.value,
-                      translations = _this$props3.translations,
-                      parentItemSelectable = _this$props3.parentItemSelectable,
-                      icon = _this$props3.icon,
-                      parentIcon = _this$props3.parentIcon,
-                      hoverIcon = _this$props3.hoverIcon,
-                      checkedIcon = _this$props3.checkedIcon,
-                      id = _this$props3.id,
-                      placeholder = _this$props3.placeholder,
-                      staticPosition = _this$props3.staticPosition,
-                      pinnedItem = _this$props3.pinnedItem,
-                      hasAll = _this$props3.hasAll,
-                      infiniteScroll = _this$props3.infiniteScroll,
-                      loadingMoreResults = _this$props3.loadingMoreResults,
-                      multiple = _this$props3.multiple,
-                      other = objectWithoutProperties(_this$props3, ["classes", "disabled", "error", "loading", "options", "searchable", "displayAsChip", "type", "value", "translations", "parentItemSelectable", "icon", "parentIcon", "hoverIcon", "checkedIcon", "id", "placeholder", "staticPosition", "pinnedItem", "hasAll", "infiniteScroll", "loadingMoreResults", "multiple"]);
-
-                  var _this$state2 = this.state,
-                      open = _this$state2.open,
-                      stateSuggestions = _this$state2.suggestions,
-                      focused = _this$state2.focused,
-                      dynamic = _this$state2.dynamic;
-                  var display = '';
-                  var selectedIdList;
-
-                  if (Array.isArray(value)) {
-                    selectedIdList = value;
-                  } else if (value) {
-                    selectedIdList = [value];
-                  } else {
-                    selectedIdList = [];
-                  }
-
-                  var suggestions = toConsumableArray(stateSuggestions);
-
-                  if (pinnedItem) {
-                    suggestions.unshift(pinnedItem);
-                  } // If loading
-
-
-                  if (loading && !loadingMoreResults) {
-                    suggestions.unshift({
-                      id: '_loading',
-                      type: 'loader',
-                      disabled: true,
-                      centered: true,
-                      checkbox: false,
-                      label: 'loading'
-                    });
-                  }
-
-                  if ((dynamic || loading) && selectedIdList.length === 1) {
-                    display = translations.one_item_selected;
-                  } else if ((this.state.nbOptions !== selectedIdList.length || !hasAll) && selectedIdList.length > 1) {
-                    display = translations.n_items_selected.replace('%s', selectedIdList.length);
-                  } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions > 1) {
-                    display = translations.all;
-                  } else if (selectedIdList.length === 1) {
-                    var item = options.find(function (o) {
-                      return o.id === selectedIdList[0];
-                    });
+                  var _classNames,
+                      _this2 = this;
 
-                    if (item === undefined) {
-                      display = translations.one_item_selected;
-                    } else if (type !== 'icon') {
-                      if (pinnedItem) {
-                        item = pinnedItem;
-                      }
+                  var _this$props4 = this.props,
+                      classes = _this$props4.classes,
+                      disabled = _this$props4.disabled,
+                      error = _this$props4.error,
+                      loading = _this$props4.loading,
+                      options = _this$props4.options,
+                      searchable = _this$props4.searchable,
+                      displayAsChip = _this$props4.displayAsChip,
+                      type = _this$props4.type,
+                      value = _this$props4.value,
+                      multiple = _this$props4.multiple,
+                      translations = _this$props4.translations,
+                      hiSelectableListProps = _this$props4.hiSelectableListProps,
+                      hiSelectInputProps = _this$props4.hiSelectInputProps,
+                      id = _this$props4.id,
+                      onScrollReachBottom = _this$props4.onScrollReachBottom,
+                      onSubmit = _this$props4.onSubmit,
+                      placeholder = _this$props4.placeholder,
+                      startAdornment = _this$props4.startAdornment,
+                      staticPosition = _this$props4.staticPosition,
+                      _this$props4$searchVa = _this$props4.searchValue,
+                      searchValue = _this$props4$searchVa === void 0 ? this.state.searchValue : _this$props4$searchVa,
+                      _this$props4$buildSel = _this$props4.buildSelectProps,
+                      buildSelectProps = _this$props4$buildSel === void 0 ? this.buildSelectProps : _this$props4$buildSel;
+                  var _this$state = this.state,
+                      open = _this$state.open,
+                      focused = _this$state.focused;
 
-                      display = item.label;
-                    } else {
-                      display = React__default.createElement("span", {
-                        className: classes.selectIconLabel
-                      }, React__default.createElement(HiIcon$1, {
-                        icon: item.icon,
-                        className: classes.labelIcon
-                      }), item.label);
+                  if (multiple) {
+                    if (!Array.isArray(value)) {
+                      throw new Error('HiPay Material-UI: the `value` property must be an array ' + 'when using the `HiSelect` component with `multiple`.');
                     }
                   }
 
-                  if (displayAsChip) {
-                    var chipFilter = React__default.createElement(HiChip$1, {
-                      label: placeholder || display,
-                      onDelete: this.handleRequestDelete
-                    });
+                  var selectedItemIdList = [];
 
-                    if (display) {
-                      display = chipFilter;
-                    }
+                  if (value) {
+                    selectedItemIdList = multiple ? toConsumableArray(value) : [value];
                   }
 
-                  var popperClass = classnames(classes.popper, defineProperty({}, classes.popperWidth, !this.props.containerWidth));
-                  var allSelected = false;
-
-                  if (selectedIdList.length === this.state.nbOptions) {
-                    allSelected = true;
-                  }
+                  var _buildSelectProps = buildSelectProps(options, selectedItemIdList, searchValue, loading),
+                      itemList = _buildSelectProps.itemList,
+                      _buildSelectProps$inp = _buildSelectProps.inputValue,
+                      inputValue = _buildSelectProps$inp === void 0 ? this.buildInputValue(options, selectedItemIdList, loading) : _buildSelectProps$inp;
 
                   var popperStyle = {};
 
@@ -99773,17 +99597,7 @@
                     }
                   }
 
-                  if (infiniteScroll && loadingMoreResults) {
-                    suggestions.push({
-                      id: '_loading',
-                      type: 'loader',
-                      disabled: true,
-                      centered: true,
-                      checkbox: false,
-                      label: 'loading'
-                    });
-                  }
-
+                  var popperClass = classnames(classes.popper, (_classNames = {}, defineProperty(_classNames, classes.popperWidth, !this.props.containerWidth), defineProperty(_classNames, classes.popperRightAlign, this.props.containerWidth && this.props.align === 'right'), _classNames));
                   var content = React__default.createElement(ClickAwayListener$2, {
                     onClickAway: this.handleClickAway
                   }, React__default.createElement(Grow$2, {
@@ -99794,48 +99608,41 @@
                     }
                   }, React__default.createElement(Paper$2, {
                     className: classes.paper
-                  }, !!searchable && React__default.createElement(HiSearchField, {
-                    itemList: options,
-                    onFilteredList: this.handleSuggestions,
-                    filterPropertyList: ['label'],
-                    placeholder: translations.search,
+                  }, !!searchable && React__default.createElement(HiInput$1, {
+                    value: searchValue,
                     autoFocus: true,
-                    onSearch: this.props.onSearch,
-                    inputRef: function inputRef(el) {
-                      _this2.searchField = el;
-                    },
-                    onKeyDown: this.handleKeyDownSearch
-                  }), React__default.createElement(Scrollbars, {
+                    inputRef: this.getInputElement,
+                    onKeyDown: this.handleKeyDownSearch,
+                    onChange: this.handleSearch,
+                    onReset: this.handleSearchReset,
+                    placeholder: translations.search,
+                    startAdornment: 'search',
+                    tabIndex: 0
+                  }), startAdornment, React__default.createElement(Scrollbars, _extends_1({
                     ref: function ref(contentEl) {
                       _this2.optionsContent = contentEl;
                     },
                     autoHeight: true,
-                    autoHeightMax: 400,
+                    autoHeightMax: 400 // TODO ?
+
+                  }, onScrollReachBottom && {
                     onScroll: this.handleScroll
-                  }, React__default.createElement(HiSelectableList$1, _extends_1({
+                  }), React__default.createElement(HiSelectableList$1, _extends_1({
                     type: type,
-                    parentItemSelectable: parentItemSelectable,
-                    itemList: suggestions,
+                    itemList: itemList,
+                    onKeyDown: this.handleKeyDown,
                     onSelect: this.handleSelect,
-                    selectedItemIdList: selectedIdList,
-                    hideCheckbox: !multiple,
-                    translations: translations,
-                    icon: icon,
-                    parentIcon: parentIcon,
-                    hoverIcon: hoverIcon,
-                    checkedIcon: checkedIcon,
-                    allSelected: allSelected,
-                    value: value,
-                    onKeyDown: this.handleKeyDown
-                  }, other))))));
+                    selectedItemIdList: selectedItemIdList,
+                    fallbackImage: this.props.fallbackImage
+                  }, hiSelectableListProps))))));
                   return React__default.createElement("div", {
                     className: classes.root,
                     ref: function ref(el) {
                       _this2.overlay = el;
                     }
-                  }, React__default.createElement(SelectInput$1, {
+                  }, React__default.createElement(HiSelectInput$1, _extends_1({
                     id: id,
-                    value: placeholder || display,
+                    value: inputValue,
                     open: open,
                     focused: focused,
                     type: type,
@@ -99845,43 +99652,55 @@
                     onClick: this.handleClick,
                     onFocus: this.handleFocus,
                     onBlur: this.handleBlur,
+                    onSubmit: onSubmit,
                     onMouseEnter: this.props.onMouseEnter,
                     onMouseLeave: this.props.onMouseLeave,
+                    onReset: this.props.onReset,
+                    placeholder: placeholder
+                  }, hiSelectInputProps, {
                     refElement: function refElement(el) {
-                      _this2.selectInputElement = el;
-                    },
-                    onReset: this.props.onReset
-                  }), open && staticPosition ? React__default.createElement("div", {
-                    style: popperStyle
+                      _this2.inputEl = el;
+                    }
+                  })), open && staticPosition ? React__default.createElement("div", {
+                    style: popperStyle,
+                    className: popperClass
                   }, content) : React__default.createElement(Popper$3, {
                     anchorEl: this.inputEl,
                     placement: "bottom-start",
                     open: open,
                     className: popperClass,
-                    style: popperStyle,
-                    disablePortal: true
+                    disablePortal: true,
+                    style: popperStyle
                   }, content));
                 }
+              }], [{
+                key: "getDerivedStateFromProps",
+                value: function getDerivedStateFromProps(nextProps, prevState) {
+                  if (nextProps.options !== prevState.suggestions) {
+                    return _extends_1({}, prevState, {
+                      suggestions: nextProps.options
+                    });
+                  }
+
+                  return null;
+                }
               }]);
 
               return HiSelect;
             }(React__default.PureComponent);
 
             HiSelect.defaultProps = {
-              containerWidth: 0,
+              align: 'left',
               disabled: false,
               displayAsChip: false,
-              dynamic: false,
               error: false,
               hasAll: false,
-              hasMore: false,
-              hierarchic: false,
-              iconAll: false,
-              infiniteScroll: false,
-              loadingMoreResults: false,
+              hiSelectableListProps: {},
+              hiSelectInputProps: {},
               multiple: false,
-              parentItemSelectable: false,
-              type: 'text',
+              placeholder: '',
+              searchable: false,
+              staticPosition: false,
               translations: {
                 all: 'All',
                 no_result_match: 'No result match',
@@ -99891,14 +99710,10 @@
                 n_children: '%s items',
                 one_child: '%s item'
               },
-              searchable: false,
-              staticPosition: false
+              type: 'text'
             };
             HiSelect.propTypes = {
-              /**
-               * Icon affiché lorsque l'item est sélectionné
-               */
-              checkedIcon: propTypes.node,
+              align: propTypes.oneOf(['left', 'right']),
 
               /**
                * Useful to extend the style applied to components.
@@ -99920,77 +99735,46 @@
                */
               displayAsChip: propTypes.bool,
 
-              /**
-               * Option permettant de définir si les options du select sont dynamiques.
-               * Si les options du select sont initialisées à vide, alors ce sera mis à true
-               * automatiquement.
-               */
-              dynamic: propTypes.bool,
-
               /**
                * Applique le style error
                */
               error: propTypes.bool,
 
               /**
-               * Affiche l'élément 'All'
-               */
-              hasAll: propTypes.bool,
-
-              /**
-               * Indique si l'infinite scroll doit rechercher de nouveaux résultats
+               * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
                */
-              hasMore: propTypes.bool,
+              fallbackImage: propTypes.string,
 
               /**
-               * Les items sont hiérarchisés
+               * Affiche l'élément 'All'
                */
-              hierarchic: propTypes.bool,
+              hasAll: propTypes.bool,
 
               /**
-               * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+               * Override HiSelectableList props (
                */
-              hoverIcon: propTypes.node,
+              hiSelectableListProps: propTypes.object,
 
               /**
-               * Icon affiché lorsque l'item n'est pas sélectionné
+               * Override HiSelectInput props
                */
-              icon: propTypes.node,
+              hiSelectInputProps: propTypes.object,
 
               /**
                * Nom de l'icône
                */
-              iconAll: propTypes.oneOfType([propTypes.string, propTypes.bool]),
+              iconAll: propTypes.string,
 
               /**
                * id du select
                */
               id: propTypes.string,
 
-              /**
-               * Infinite scroll dans le select dans le cas où il y a beaucoup de résultats à afficher
-               * afin d'éviter un lag du navigateur
-               */
-              infiniteScroll: propTypes.bool,
-
               /**
                * Ajoute un loader
                */
               loading: propTypes.bool,
 
-              /**
-               * Ajoute un loader en bas pour l'infiniteScroll
-               */
-              loadingMoreResults: propTypes.bool,
-
-              /**
-               * Fonction de callback appelée lorsque l'utilisateur arrive en bas de la liste des options
-               * afin de charger les nouvelles options
-               *
-               * @param {int} pageNumber
-               */
-              loadMoreResults: propTypes.func,
-
               /**
                * Autorise la sélection de plusieurs valeurs
                */
@@ -100009,11 +99793,6 @@
                */
               onChange: propTypes.func.isRequired,
 
-              /**
-               * Fonction de callback appelée click dans l'input
-               */
-              onClick: propTypes.func,
-
               /**
                * Fonction de callback appelée lorsqu'on ferme le select
                */
@@ -100035,18 +99814,14 @@
               onReset: propTypes.func,
 
               /**
-               * Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
-               * A utiliser pour les selects avec des données dynamiques
-               *
-               * @param {object} event
-               * @param {string} value
+               * Fonction de callback appelée lorsque le scroll atteint le bas de la liste
                */
-              onSearch: propTypes.func,
+              onScrollReachBottom: propTypes.func,
 
               /**
-               * Fonction de callback à la pression de la touche "Entrée"
+               * Fonction de callback appelée lorsque le champs de recherche est utilisé
                */
-              onSubmit: propTypes.func,
+              onSearch: propTypes.func,
 
               /**
                * Listes des options du select
@@ -100054,23 +99829,7 @@
               options: propTypes.array.isRequired,
 
               /**
-               * Icon affiché lorsqu'un item parent n'est pas sélectionné
-               */
-              parentIcon: propTypes.node,
-
-              /**
-               * Les items parents sont sélectionnables
-               */
-              parentItemSelectable: propTypes.bool,
-
-              /**
-               * Item épinglé en début de liste
-               */
-              pinnedItem: propTypes.object,
-
-              /**
-               * Placeholder affiché lorsque le select est fermé
-               * Surcharge le placeholder par défaut
+               * Placeholder affiché lorsque l'input est vide
                */
               placeholder: propTypes.string,
 
@@ -100080,7 +99839,12 @@
               searchable: propTypes.bool,
 
               /**
-               * Si true, le contenu du select sera dans une div static plutot que dans une popper absolute
+               * Node qui s'ajoute entre la barre de recherche et la liste de résultats
+               */
+              startAdornment: propTypes.object,
+
+              /**
+               * Si true, le contenu du select sera dans une div static plutôt que dans une popper absolute
                */
               staticPosition: propTypes.bool,
 
@@ -100235,6 +99999,8 @@
               switch (key) {
                 case 'custom':
                   label = t.custom_period;
+                  from = moment().subtract(15, 'day').startOf('day');
+                  to = moment().endOf('day');
                   type = 'primary-highlight';
                   break;
 
@@ -100270,35 +100036,35 @@
                   label = t.current_month;
                   from = moment().startOf('month');
                   to = moment();
-                  info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days'), " ").concat(t.days);
+                  info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
                   break;
 
                 case 'pm':
                   label = t.previous_month;
                   from = moment().subtract(1, 'month').startOf('month');
                   to = moment().subtract(1, 'month').endOf('month');
-                  info = "".concat(from.format('YYYY-MM'), ", ").concat(to.diff(from, 'days'), " ").concat(t.days);
+                  info = "".concat(from.format(t.yearAndMonth), ", ").concat(from.daysInMonth(), " ").concat(t.days);
                   break;
 
                 case 'cq':
                   label = t.current_quarter;
                   from = moment().startOf('quarter');
                   to = moment();
-                  info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days'), " ").concat(t.days);
+                  info = "".concat(from.format(t.yearAndQuarter), ", ").concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
                   break;
 
                 case 'pq':
                   label = t.previous_quarter;
                   from = moment().subtract(1, 'quarter').startOf('quarter');
                   to = moment().subtract(1, 'quarter').endOf('quarter');
-                  info = "".concat(from.format('YYYY'), "-").concat(t.short_quarter).concat(from.format('Q'), ", ").concat(to.diff(from, 'days'), " ").concat(t.days);
+                  info = "".concat(from.format(t.yearAndQuarter), ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
                   break;
 
                 case 'cy':
                   label = t.current_year;
                   from = moment().startOf('year');
                   to = moment();
-                  info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days'), " ").concat(t.days);
+                  info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
                   break;
 
                 default:
@@ -100346,25 +100112,30 @@
                 _this = possibleConstructorReturn(this, getPrototypeOf(HiDateRangeSelector).call(this));
                 _this.options = [];
 
+                _this.onBlur = function (event) {
+                  if (event instanceof Object && _this.props.onblur) {
+                    _this.props.onBlur(event);
+                  }
+                };
+
                 _this.handleSelectChange = function (name) {
                   return function (event, value) {
-                    _this.setState(defineProperty({}, name, value));
+                    var _this$setState;
 
-                    if (value !== 'custom') {
-                      var selectedOption = _this.options.find(function (option) {
-                        return option.id === value;
-                      });
+                    _this.setState((_this$setState = {}, defineProperty(_this$setState, name, value), defineProperty(_this$setState, "key", _this.state.key === 1 ? 2 : 1), _this$setState));
 
-                      if (selectedOption) {
-                        _this.props.onChange('from', selectedOption.from.toDate());
+                    var selectedOption = _this.options.find(function (option) {
+                      return option.id === value;
+                    });
 
-                        _this.props.onChange('to', selectedOption.to.toDate());
-                      }
-                    } else {
-                      _this.setState({
-                        defaultFrom: undefined,
-                        defaultTo: undefined
-                      });
+                    if (selectedOption) {
+                      _this.props.onChange('from', selectedOption.from.toDate());
+
+                      _this.props.onChange('to', selectedOption.to.toDate());
+
+                      _this.props.onChange('fromError', false);
+
+                      _this.props.onChange('toError', false);
                     }
 
                     if (_this.props.returnSelectValue === true) {
@@ -100378,25 +100149,9 @@
                 _this.options = props.availableOptionKeys.map(function (key) {
                   return buildDateRangeOptionByKey(key, props.translations, props.format);
                 });
-                var from;
-                var to;
-
-                if (props.defaultPreset !== 'custom') {
-                  var selectedOption = _this.options.find(function (option) {
-                    return option.id === props.defaultPreset;
-                  });
-
-                  if (selectedOption) {
-                    from = selectedOption.from.toDate();
-                    to = selectedOption.to.toDate();
-                  }
-                }
-
                 _this.state = {
                   selectedPreset: props.defaultPreset,
-                  containerWidth: 0,
-                  defaultFrom: from,
-                  defaultTo: to
+                  containerWidth: 0
                 };
                 return _this;
               }
@@ -100406,8 +100161,9 @@
                 value: function componentDidMount() {
                   if (this.container) {
                     this.setState({
-                      containerWidth: require$$11.findDOMNode(this.container).clientWidth
+                      containerWidth: require$$11.findDOMNode(this.container).clientWidth - 5
                     });
+                    this.handleSelectChange('selectedPreset')(undefined, this.state.selectedPreset);
                   }
                 }
               }, {
@@ -100419,6 +100175,7 @@
                 key: "handleReset",
                 value: function handleReset(name) {
                   this.props.onChange(name, undefined);
+                  this.props.onChange("".concat(name, "Error"), undefined);
                 }
               }, {
                 key: "render",
@@ -100428,12 +100185,14 @@
                   var _this$props = this.props,
                       disabled = _this$props.disabled,
                       enableTime = _this$props.enableTime,
-                      error = _this$props.error,
                       errorText = _this$props.errorText,
+                      fromError = _this$props.fromError,
+                      toError = _this$props.toError,
                       helperIcon = _this$props.helperIcon,
                       helperText = _this$props.helperText,
                       idRange = _this$props.idRange,
                       idSelect = _this$props.idSelect,
+                      minimumDate = _this$props.minimumDate,
                       label = _this$props.label,
                       from = _this$props.from,
                       onChange = _this$props.onChange,
@@ -100443,18 +100202,25 @@
                       classes = _this$props.classes,
                       selectProps = _this$props.selectProps,
                       staticPosition = _this$props.staticPosition,
-                      props = objectWithoutProperties(_this$props, ["disabled", "enableTime", "error", "errorText", "helperIcon", "helperText", "idRange", "idSelect", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
+                      props = objectWithoutProperties(_this$props, ["disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
 
-                  var _this$state = this.state,
-                      defaultFrom = _this$state.defaultFrom,
-                      defaultTo = _this$state.defaultTo,
-                      selectedPreset = _this$state.selectedPreset;
-                  return React__default.createElement(Grid$4, {
+                  var selectedPreset = this.state.selectedPreset;
+                  var hiSelectableListProps = {
+                    hideCheckbox: true
+                  };
+                  return React__default.createElement(HiFormControl$1, {
+                    disabled: disabled,
+                    helperIcon: helperIcon,
+                    helperText: helperText,
+                    errorText: errorText,
+                    error: !!(fromError || toError),
+                    label: ' '
+                  }, React__default.createElement(Grid$4, {
                     container: true,
                     spacing: 8,
                     className: classes.root,
                     ref: function ref(container) {
-                      _this2.container = container;
+                      return _this2.container = container;
                     }
                   }, React__default.createElement(Grid$4, {
                     item: true,
@@ -100465,12 +100231,10 @@
                     }
                   }, React__default.createElement(HiSelectField, _extends_1({
                     disabled: disabled,
-                    error: error,
-                    errorText: errorText,
-                    helperIcon: helperIcon,
-                    helperText: helperText,
                     id: idSelect,
                     label: label,
+                    hideCheckbox: true,
+                    hiSelectableListProps: hiSelectableListProps,
                     name: 'selectedPreset',
                     options: this.options,
                     onChange: this.handleSelectChange('selectedPreset'),
@@ -100490,19 +100254,26 @@
                       'grid-sm-8': classes.smRangePicker
                     }
                   }, React__default.createElement(HiDateRangePicker$1, _extends_1({
+                    key: this.state.key,
                     classes: {
                       root: classes.dateRangePicker
                     },
                     id: idRange,
-                    from: from || defaultFrom,
-                    to: to || defaultTo,
+                    from: from,
+                    to: to,
                     enableTime: enableTime,
                     onChange: onChange,
+                    toError: toError,
+                    fromError: fromError,
+                    minimumDate: minimumDate,
+                    errorText: null,
                     onReset: this.handleReset,
                     disabled: disabled || selectedPreset !== 'custom',
                     translations: translations,
-                    staticPosition: staticPosition
-                  }, props))));
+                    staticPosition: staticPosition,
+                    onBlur: this.onBlur,
+                    hasSelector: true
+                  }, props)))));
                 }
               }], [{
                 key: "getDerivedStateFromProps",
@@ -100536,7 +100307,8 @@
                 quarter: 'Quarter',
                 week: 'Week',
                 short_week: 'W',
-                short_quarter: 'Q',
+                yearAndMonth: 'YYYY[-]MM',
+                yearAndQuarter: 'YYYY[-Q]Q',
                 year: 'Year',
                 days: 'days',
                 custom_period: 'Custom Period',
@@ -100549,7 +100321,13 @@
                 previous_month: 'Previous Month',
                 current_quarter: 'Current Quarter',
                 previous_quarter: 'Previous Quarter',
-                current_year: 'Current Year'
+                current_year: 'Current Year',
+                invalid_format: 'The date format is not valid',
+                to_superior_from: 'Date from cannot be greater than date to',
+                date_superior_max_date: 'Date from cannot be greater than %s',
+                date_inferior_min_date: 'Date from cannot be before than %s',
+                missing_date_from: 'Missing date from',
+                missing_date_to: 'Missing date to'
               }
             };
             HiDateRangeSelector.propTypes = {
@@ -100586,7 +100364,7 @@
               /**
                * Texte de l'erreur
                */
-              errorText: propTypes.string,
+              errorText: propTypes.oneOfType([propTypes.string, propTypes.bool]),
 
               /**
                * Format de date utilisé
@@ -100628,6 +100406,11 @@
                */
               locale: propTypes.string,
 
+              /**
+               * Date minimale sélectionnable
+               */
+              minimumDate: propTypes.instanceOf(Date).isRequired,
+
               /**
                * Callback à la sélection d'une date
                */