@hipay/hipay-material-ui 1.0.0-beta.23 → 1.0.0-beta.26

package/HI-CHANGELOG.md

@@ -1,58 +1,77 @@
-## HEAD
+<a name="1.0.0-beta.26"></a>
+# 1.0.0-beta.26 (2018-08-24)
 
-Changes. Changes everywhere!
 
-## 1.0.0-beta.10
-###### *17 mai 2018*
+### Bug Fixes
 
-- Correction du HiSelect
+* **BodyRow:** add locale vars to child BodyRow ([9252382](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9252382))
+* **CellDate:** Handle date with moment & use prop format ([7fa8bf5](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7fa8bf5))
+* **HeaderCell:** set sort icons always on the right of the title ([0704619](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0704619))
+* **HiDateRangePicker:** Keep focus on change dateTo if user types directly into the input to see date selection into calendar ([e998c60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e998c60))
+* **HiDateRangePicker:** Reset date range picker input to ([b1a66f3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1a66f3))
+* **HiDateRangeSelector:** UPD select value from parent component (defaultPreset property) ([90bb994](https://gitlab.hipay.org/backend/hipay-material-ui/commit/90bb994))
+* **HiInput:** Keep focus on reset HiInput ([a84edab](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a84edab))
+* **HiPins:** Add theme business primary color as default background color for HiPins and fix line-height  ([23aa2d9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/23aa2d9))
+* **HiSelect:** add dynamic prop to handle dynamic select with initial options ([c668b90](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c668b90))
+* **HiSelect:** Display option label instead of all for selects with 1 option ([e47574a](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e47574a))
+* **HiSelect:** Don't try to display unique selected options item when still loading ([116a72a](https://gitlab.hipay.org/backend/hipay-material-ui/commit/116a72a))
+* **HiSelect:** Enable to handle hierarchic padding via options prop level ([dc4e5d8](https://gitlab.hipay.org/backend/hipay-material-ui/commit/dc4e5d8))
+* **HiSelect:** Handle unique and undefined selected item ([8dbb542](https://gitlab.hipay.org/backend/hipay-material-ui/commit/8dbb542))
+* **HiSelectableList:** item displayed only if item.displayed != false ([e65b865](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e65b865))
+* **HiTable:** Add default translations object to HeaderCell ([4ed766f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4ed766f))
+* **HiTable:** Performance optimization ([3ca60d3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/3ca60d3))
+* **HiTable:** remove anchorEls from state to remove circular structure in JSON compares ([c064ce9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c064ce9))
+* **SelectInput:** selected choice label not overflowing on right arrow of HiSelect ([a7d7058](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a7d7058))
 
-### Breaking change
 
-- N/A
+### Features
 
-#### Component Fixes / Enhancements
+* **CellText:** add color props ([ff2bba8](https://gitlab.hipay.org/backend/hipay-material-ui/commit/ff2bba8))
+* **HiChip:** enable to display tooltip on HiChip via the prop 'title' ([6b15ca6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6b15ca6))
+* **HiDateRangePicker:** Add onBlur prop function to handle date errors properly ([df79494](https://gitlab.hipay.org/backend/hipay-material-ui/commit/df79494))
+* **HiTableContextMenu:** handle hide lookup/exclude menu item for each column ([03e00cb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/03e00cb))
+* **workflow:** Add HI-CHANGELOG generation from commits ([edee0f6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/edee0f6))
 
-- [HiSelect] Ajout d'un param staticPosition dans le HiSelect pour afficher dans une div plutot qu'une popper
-- [HiSelect] Fermeture du select au click sur le bouton
-- [SelectInput] cursor pointer si noButton
-- [HiDateRangeSelector] Suppression du last 24h
 
-## 1.0.0-beta.4
-###### *06 avril 2018*
 
-- Corrections de styles sur quelques composants
-- Fix sur le composant HiSelect avec une value vide
+<a name="1.0.0-beta.25"></a>
+# 1.0.0-beta.25 (2018-08-16)
 
-### Breaking change
 
-- N/A
+### Bug Fixes
 
-#### Component Fixes / Enhancements
+* **BodyRow:** add locale vars to child BodyRow ([9252382](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9252382))
+* **CellDate:** Handle date with moment & use prop format ([7fa8bf5](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7fa8bf5))
+* **HeaderCell:** set sort icons always on the right of the title ([0704619](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0704619))
+* **HiDateRangePicker:** Keep focus on change dateTo if user types directly into the input to see date selection into calendar ([e998c60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e998c60))
+* **HiDateRangePicker:** Reset date range picker input to ([b1a66f3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1a66f3))
+* **HiDateRangeSelector:** UPD select value from parent component (defaultPreset property) ([90bb994](https://gitlab.hipay.org/backend/hipay-material-ui/commit/90bb994))
+* **HiInput:** Keep focus on reset HiInput ([a84edab](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a84edab))
+* **HiPins:** Add theme business primary color as default background color for HiPins and fix line-height  ([23aa2d9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/23aa2d9))
+* **HiSelect:** Display option label instead of all for selects with 1 option ([e47574a](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e47574a))
+* **HiSelect:** Don't try to display unique selected options item when still loading ([116a72a](https://gitlab.hipay.org/backend/hipay-material-ui/commit/116a72a))
+* **HiSelectableList:** item displayed only if item.displayed != false ([e65b865](https://gitlab.hipay.org/backend/hipay-material-ui/commit/e65b865))
+* **HiTable:** Add default translations object to HeaderCell ([4ed766f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4ed766f))
+* **HiTable:** Performance optimization ([3ca60d3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/3ca60d3))
+* **HiTable:** remove anchorEls from state to remove circular structure in JSON compares ([c064ce9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c064ce9))
+* **SelectInput:** selected choice label not overflowing on right arrow of HiSelect ([a7d7058](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a7d7058))
 
-- [HiTopBar] Ajout d'une props refButtons poutr récupérer la div contenant les boutons "menu" et "back"
-- [HiSelect] Gestion d'une value vide
-- [HiSelect] Ajout du focus sur l'élement SelectInput à la fermeture du select
-- [HiSelectField] Ajout de la props className
-- [HiSuggestSelectField] Ajout de la props className
-- [HiSuggestSelect] Gestion du focus et du open des suggestions
-- [SelectInput] Suppression du soulignage bleu au hover quand champs en erreur
-- [HiFormControl] Stop de l'event click sur error pour ne pas ouvrir le select
 
-## 1.0.0-beta.3
-###### *28 mars 2018*
+### Features
 
-- Ajout d'un CHANGELOG HiPay ! (HI-CHANGELOG.md)
-- Corrections de styles sur quelques composants
+* **HiDateRangePicker:** Add onBlur prop function to handle date errors properly ([df79494](https://gitlab.hipay.org/backend/hipay-material-ui/commit/df79494))
+* **HiTableContextMenu:** handle hide lookup/exclude menu item for each column ([03e00cb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/03e00cb))
+* **workflow:** Add HI-CHANGELOG generation from commits ([edee0f6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/edee0f6))
 
-### Breaking change
 
-- [HiTopBar] Ajout d'une props "searchInput" obligatoire
 
-#### Component Fixes / Enhancements
+<a name="1.0.0-beta.24"></a>
+# 1.0.0-beta.24 (2018-07-26)
+
+
+### Features
+
+* **workflow:** Add HI-CHANGELOG generation from commits ([edee0f6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/edee0f6))
+
+
 
-- [HiTopBar] Ajout du style "overflow: 'inherit'" sur le Collapse si pas "hideable", afin de ne pas cacher les suggestions
-- [HiTopBar] Gestion du focus en props plutôt qu'en state
-- [HiTopBar] Ajout d'une props "searchInput" obligatoire
-- [HiChipSwitch] Ajout d'un title sur la sélection
-- [HiDateRangePicker] Correction du focus

package/HiChip/HiChip.js

@@ -58,14 +58,24 @@ var styles = exports.styles = function styles(theme) {
             },
             '&$deletable': {
                 paddingRight: 4
+            },
+            '&$leftIccon': {
+                paddingLeft: 4
             }
         }),
         leftNavigation: {},
         rightNavigation: {},
         deletable: {},
+        leftIccon: {},
         icon: {
             marginRight: 4
         },
+        iconClickable: {
+            cursor: 'pointer',
+            '&:hover, &:focus': {
+                color: theme.palette.business.primary.normal
+            }
+        },
         eraseIcon: {
             // Remove grey highlight
             WebkitTapHighlightColor: 'transparent',
@@ -120,14 +130,22 @@ function HiChip(props) {
         onPrevious = props.onPrevious,
         onNext = props.onNext,
         onDelete = props.onDelete,
-        prefix = props.prefix;
+        prefix = props.prefix,
+        onIconClick = props.onIconClick,
+        title = props.title,
+        titleDelete = props.titleDelete,
+        titleIcon = props.titleIcon,
+        titleImg = props.titleImg,
+        titleNext = props.titleNext,
+        titlePrevious = props.titlePrevious;
 
 
     return _react2.default.createElement(
         'div',
         {
             id: id,
-            className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), _classNames))
+            className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty3.default)(_classNames, classes.leftIccon, icon), _classNames)),
+            title: title
         },
         prefix && _react2.default.createElement(
             'span',
@@ -135,13 +153,20 @@ function HiChip(props) {
             prefix,
             ' : '
         ),
-        img && _react2.default.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 16 }),
+        img && _react2.default.createElement('img', { className: classes.badge, src: img, alt: img, title: titleImg }),
+        icon && _react2.default.createElement(_HiIconBuilder2.default, {
+            className: (0, _classnames2.default)(classes.icon, (0, _defineProperty3.default)({}, classes.iconClickable, onIconClick)),
+            icon: icon,
+            size: 16,
+            onClick: onIconClick,
+            title: titleIcon
+        }),
         onPrevious && _react2.default.createElement(_HiIconBuilder2.default, {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 16
+            size: 16,
+            title: titlePrevious
         }),
         _react2.default.createElement(
             'span',
@@ -152,13 +177,15 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 16
+            size: 16,
+            title: titleNext
         }),
         onDelete && _react2.default.createElement(_HiIconBuilder2.default, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 16
+            size: 16,
+            title: titleDelete
         })
     );
 }
@@ -188,6 +215,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au clic sur l'icon close si cancelable = true
      */
     onDelete: _propTypes2.default.func,
+    /**
+     * Fonction de callback au clic sur l'icon à gauche
+     */
+    onIconClick: _propTypes2.default.func,
     /**
      * Fonction de callback au clic sur l'icon next
      */
@@ -195,7 +226,35 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Fonction de callback au clic sur l'icon previous
      */
-    onPrevious: _propTypes2.default.func
+    onPrevious: _propTypes2.default.func,
+    /**
+     * Préfixe dans le HiChip
+     */
+    prefix: _propTypes2.default.string,
+    /**
+     * Titre du chip
+     */
+    title: _propTypes2.default.string,
+    /**
+     * Titre de l'icône supprimer
+     */
+    titleDelete: _propTypes2.default.string,
+    /**
+     * Titre de l'icône
+     */
+    titleIcon: _propTypes2.default.string,
+    /**
+     * Titre de la balise img
+     */
+    titleImg: _propTypes2.default.string,
+    /**
+     * Titre de la navigation suivante
+     */
+    titleNext: _propTypes2.default.string,
+    /**
+     * Titre de la navigation précédente
+     */
+    titlePrevious: _propTypes2.default.string
 } : {};
 
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiChip' })(HiChip);

package/HiDatePicker/HiDateRangePicker.js

@@ -112,6 +112,7 @@ var HiDateRangePicker = function (_React$Component) {
 
         _this.handleInputChange = function (inputName) {
             return function (event) {
+                _this.event = event;
                 _this.props.onChange(inputName, event.target.value);
             };
         };
@@ -122,6 +123,15 @@ var HiDateRangePicker = function (_React$Component) {
             };
         };
 
+        _this.handleDayPickerBlur = function (name) {
+            return function () {
+                _this.setState({ focusedInput: '' });
+                if (_this.props.onBlur) {
+                    _this.props.onBlur(name);
+                }
+            };
+        };
+
         _this.state = {
             fromCurrentMonth: props.from ? props.from : new Date(),
             toCurrentMonth: props.to ? props.to : new Date(),
@@ -197,11 +207,7 @@ var HiDateRangePicker = function (_React$Component) {
         value: function handleReset(name) {
             var _this3 = this;
 
-            if (name === 'from') {
-                this.handleCurrentMonthChange(name, new Date());
-            } else {
-                this.handleCurrentMonthChange(name, this.props.from);
-            }
+            this.handleCurrentMonthChange(name, new Date());
 
             this.timeout = setTimeout(function () {
                 if (_this3.props.onReset) {
@@ -222,7 +228,12 @@ var HiDateRangePicker = function (_React$Component) {
                         if (name === 'from' && this.toInput) {
                             this.toInput.getInput().focus();
                         } else if (name === 'to') {
-                            document.activeElement.blur();
+                            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();
+                            }
+                            delete this.event;
                         }
                     }
                 } else {
@@ -350,11 +361,6 @@ var HiDateRangePicker = function (_React$Component) {
                 document.activeElement.blur();
             }
         }
-    }, {
-        key: 'handleDayPickerBlur',
-        value: function handleDayPickerBlur() {
-            this.setState({ focusedInput: '' });
-        }
     }, {
         key: 'openPanel',
         value: function openPanel(name, panel) {
@@ -635,7 +641,7 @@ var HiDateRangePicker = function (_React$Component) {
                     {
                         className: classes.fromInput,
                         onFocus: this.handleDayPickerFocus('from'),
-                        onBlur: this.handleDayPickerBlur
+                        onBlur: this.handleDayPickerBlur('from')
                     },
                     _react2.default.createElement(
                         'div',
@@ -663,7 +669,7 @@ var HiDateRangePicker = function (_React$Component) {
                     {
                         className: toClass,
                         onFocus: this.handleDayPickerFocus('to'),
-                        onBlur: this.handleDayPickerBlur
+                        onBlur: this.handleDayPickerBlur('to')
                     },
                     _react2.default.createElement(_DayPickerInput2.default, {
                         ref: function ref(el) {
@@ -762,10 +768,18 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     minimumDate: _propTypes2.default.instanceOf(Date),
     /**
      * Callback à la sélection d'une date
+     * @param {string} nom de l'input
+     */
+    onBlur: _propTypes2.default.func,
+    /**
+     * Callback à la sélection d'une date
+     * @param {string} nom du champs
+     * @param {string} nouvelle valeur du champs
      */
     onChange: _propTypes2.default.func,
     /**
      * Callback au reset de l'input
+     * @param {string} nom du champs réinitialisé
      */
     onReset: _propTypes2.default.func,
     /**

package/HiDatePicker/HiDateRangeSelector.js

@@ -100,13 +100,13 @@ function buildDateRangeOptionByKey(key, t, format) {
             label = t.current_week;
             from = (0, _moment2.default)().startOf('week');
             to = (0, _moment2.default)();
-            info = t.week + ' ' + from.format('w') + ', \n ' + from.format(format) + ' ' + t.to_now;
+            info = '' + t.short_week + from.format('w') + ', \n ' + from.format(format) + ' ' + t.to_now;
             break;
         case 'pw':
             label = t.previous_week;
             from = (0, _moment2.default)().subtract(1, 'week').startOf('week');
             to = (0, _moment2.default)().subtract(1, 'week').endOf('week');
-            info = t.week + ' ' + from.format('w') + ', ' + from.format(format) + ' ' + t.to + ' ' + to.format(format);
+            info = '' + t.short_week + from.format('w') + ', ' + from.format(format) + ' ' + t.to + ' ' + to.format(format);
             break;
         case 'cm':
             label = t.current_month;
@@ -308,6 +308,16 @@ var HiDateRangeSelector = function (_React$Component) {
                 )
             );
         }
+    }], [{
+        key: 'getDerivedStateFromProps',
+        value: function getDerivedStateFromProps(props, state) {
+            if (props.defaultPreset && props.returnSelectValue) {
+                return {
+                    selectedPreset: props.defaultPreset
+                };
+            }
+            return null;
+        }
     }]);
     return HiDateRangeSelector;
 }(_react2.default.Component);
@@ -327,6 +337,7 @@ HiDateRangeSelector.defaultProps = {
         month: 'Month',
         quarter: 'Quarter',
         week: 'Week',
+        short_week: 'W',
         year: 'Year',
         days: 'days',
         custom_period: 'Custom Period',

package/HiForm/HiInput.js

@@ -219,6 +219,7 @@ var HiInput = function (_React$PureComponent) {
             if (this.props.onReset) {
                 this.props.onReset();
             }
+            this.inputElement.focus();
         }
     }, {
         key: 'handleBlur',

package/HiForm/HiPasswordField.js

@@ -63,9 +63,9 @@ var styles = exports.styles = function styles(theme) {
     return {
         inputPassword: {
             fontWeight: 'bolder',
-            fontFamily: 'Verdana, sans-serif',
+            fontFamily: 'inherit',
             letterSpacing: '4px',
-            fontSize: 25
+            fontSize: '1.6rem'
         }
     };
 };

package/HiPins/HiPins.js

@@ -37,7 +37,7 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-block',
             padding: '0 9px',
             height: 16,
-            lineHeight: '16px',
+            lineHeight: '18px',
             minWidth: 25,
             textAlign: 'center',
             borderRadius: '45px',
@@ -64,13 +64,15 @@ var styles = exports.styles = function styles(theme) {
 
 function HiPins(props) {
     var classes = props.classes,
+        theme = props.theme,
         children = props.children,
-        color = props.color,
+        _props$color = props.color,
+        color = _props$color === undefined ? props.theme.palette.business.primary.normal : _props$color,
         onClick = props.onClick,
         className = props.className;
 
 
-    var textColor = (0, _colorManipulator.getContrastedTextColor)(color, props.theme.palette.neutral.dark, '#FFF');
+    var textColor = (0, _colorManipulator.getContrastedTextColor)(color, theme.palette.neutral.dark, '#FFF');
 
     var divProps = {
         style: { backgroundColor: color, color: textColor }
@@ -92,7 +94,7 @@ HiPins.propTypes = process.env.NODE_ENV !== "production" ? {
     children: _propTypes2.default.node.isRequired,
     classes: _propTypes2.default.object.isRequired,
     className: _propTypes2.default.string,
-    color: _propTypes2.default.string.isRequired,
+    color: _propTypes2.default.string,
     onClick: _propTypes2.default.func
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiPins' })(HiPins);

package/HiSelect/HiSelect.js

@@ -162,7 +162,7 @@ var HiSelect = function (_React$PureComponent) {
             hierarchySelected: {},
             hierarchy: {},
             nbOptions: 0,
-            dynamic: false
+            dynamic: props.dynamic || false
         };
 
         // Check if value is in options
@@ -205,7 +205,7 @@ var HiSelect = function (_React$PureComponent) {
                 }
             });
             _this.state.nbOptions = optionsLength;
-        } else {
+        } else if (!props.dynamic) {
             _this.state.dynamic = true;
         }
 
@@ -314,11 +314,13 @@ var HiSelect = function (_React$PureComponent) {
                 id = _props.id,
                 placeholder = _props.placeholder,
                 staticPosition = _props.staticPosition,
-                pinnedItem = _props.pinnedItem;
+                pinnedItem = _props.pinnedItem,
+                hasAll = _props.hasAll;
             var _state = this.state,
                 open = _state.open,
                 suggestions = _state.suggestions,
-                focused = _state.focused;
+                focused = _state.focused,
+                dynamic = _state.dynamic;
 
 
             var display = '';
@@ -342,30 +344,29 @@ var HiSelect = function (_React$PureComponent) {
                 });
             }
 
-            if (this.state.dynamic && selectedIdList.length === 1) {
-                display = translations.one_item_selected.replace('%s', selectedIdList.length);
-            } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
+            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) {
+            } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions > 1) {
                 display = translations.all;
             } else if (selectedIdList.length === 1) {
-                if (type !== 'icon') {
-                    var item = options.find(function (o) {
-                        return o.id === selectedIdList[0];
-                    });
-                    if (!item && pinnedItem) {
+                var item = options.find(function (o) {
+                    return o.id === selectedIdList[0];
+                });
+                if (item === undefined) {
+                    display = translations.one_item_selected;
+                } else if (type !== 'icon') {
+                    if (pinnedItem) {
                         item = pinnedItem;
                     }
                     display = item.label;
                 } else {
-                    var optionSelected = options.find(function (o) {
-                        return o.id === selectedIdList[0];
-                    });
                     display = _react2.default.createElement(
                         'span',
                         { className: classes.selectIconLabel },
-                        _react2.default.createElement(_HiIconBuilder2.default, { icon: optionSelected.icon, className: classes.labelIcon }),
-                        optionSelected.label
+                        _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.labelIcon }),
+                        item.label
                     );
                 }
             }
@@ -499,6 +500,7 @@ HiSelect.defaultProps = {
     hierarchic: false,
     parentItemSelectable: false,
     displayAsChip: false,
+    dynamic: false,
     icon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     parentIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     hoverIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
@@ -741,9 +743,9 @@ var _initialiseProps = function _initialiseProps() {
                 }
             }
             _this3.setState({ hierarchySelected: hiSelected });
-            onChange(event, valueList);
+            onChange(event, valueList, item);
         } else {
-            onChange(event, item.id);
+            onChange(event, item.id, item);
             _this3.handleClose();
         }
     };
@@ -818,6 +820,12 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Option permettant d'afficher les sélection sous forme de Chip.
      */
     displayAsChip: _propTypes2.default.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: _propTypes2.default.bool.isRequired,
     /**
      * Applique le style error
      */

package/HiSelect/SelectInput.js

@@ -67,7 +67,8 @@ var styles = exports.styles = function styles(theme) {
             width: '100%',
             height: 40,
             maxWidth: 500,
-            justifyContent: 'flex-start',
+            display: 'flex',
+            justifyContent: 'center',
             padding: 8,
             cursor: 'pointer'
         },
@@ -142,18 +143,12 @@ var styles = exports.styles = function styles(theme) {
         label: (0, _extends3.default)({
             whiteSpace: 'nowrap',
             overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            paddingRight: 16
+            textOverflow: 'ellipsis'
         }, theme.typography.body1, {
             display: 'inline-flex',
             width: '100%'
         }),
         icon: {
-            position: 'absolute',
-            display: 'flex',
-            alignItems: 'center',
-            right: 0,
-            height: 40,
             transition: theme.transitions.create(['opacity', 'transform'], {
                 duration: theme.transitions.duration.shorter
             })