@hipay/hipay-material-ui 1.0.0-beta.22 → 1.0.0-beta.25

package/HI-CHANGELOG.md

@@ -1,58 +1,41 @@
-## HEAD
+<a name="1.0.0-beta.25"></a>
+# 1.0.0-beta.25 (2018-08-16)
 
-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:** 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))
 
-### Breaking change
 
-- N/A
+### Features
 
-#### Component Fixes / Enhancements
+* **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.24"></a>
+# 1.0.0-beta.24 (2018-07-26)
 
-### Breaking change
 
-- N/A
+### Features
 
-#### Component Fixes / Enhancements
+* **workflow:** Add HI-CHANGELOG generation from commits ([edee0f6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/edee0f6))
 
-- [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*
 
-- Ajout d'un CHANGELOG HiPay ! (HI-CHANGELOG.md)
-- Corrections de styles sur quelques composants
-
-### Breaking change
-
-- [HiTopBar] Ajout d'une props "searchInput" obligatoire
-
-#### Component Fixes / Enhancements
-
-- [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',
@@ -115,17 +125,25 @@ function HiChip(props) {
     var label = props.label,
         classes = props.classes,
         icon = props.icon,
+        id = props.id,
         img = props.img,
         onPrevious = props.onPrevious,
         onNext = props.onNext,
         onDelete = props.onDelete,
-        prefix = props.prefix;
+        prefix = props.prefix,
+        onIconClick = props.onIconClick,
+        titleDelete = props.titleDelete,
+        titleIcon = props.titleIcon,
+        titleImg = props.titleImg,
+        titleNext = props.titleNext,
+        titlePrevious = props.titlePrevious;
 
 
     return _react2.default.createElement(
         'div',
         {
-            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))
+            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), (0, _defineProperty3.default)(_classNames, classes.leftIccon, icon), _classNames))
         },
         prefix && _react2.default.createElement(
             'span',
@@ -133,13 +151,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,
+            titleAccess: titleIcon
+        }),
         onPrevious && _react2.default.createElement(_HiIconBuilder2.default, {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 16
+            size: 16,
+            titleAccess: titlePrevious
         }),
         _react2.default.createElement(
             'span',
@@ -150,13 +175,15 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 16
+            size: 16,
+            titleAccess: titleNext
         }),
         onDelete && _react2.default.createElement(_HiIconBuilder2.default, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 16
+            size: 16,
+            titleAccess: titleDelete
         })
     );
 }
@@ -170,6 +197,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Icone affiché à gauche
      */
     icon: _propTypes2.default.string,
+    /**
+     * Identifiant de l'élément
+     */
+    id: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     /**
      * Ajoute une image à gauche du Chip
      */
@@ -182,6 +213,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
      */
@@ -189,7 +224,31 @@ 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 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/HiChip/HiChipSwitch.js

@@ -207,6 +207,7 @@ var HiChipSwitch = function (_React$PureComponent) {
                 _this2 = this;
 
             var _props = this.props,
+                id = _props.id,
                 label = _props.label,
                 classes = _props.classes,
                 activeIcon = _props.activeIcon,
@@ -232,6 +233,7 @@ var HiChipSwitch = function (_React$PureComponent) {
             return _react2.default.createElement(
                 'div',
                 {
+                    id: id,
                     className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.active, !!active), (0, _defineProperty3.default)(_classNames, classes.inactive, !active), _classNames)),
                     onClick: onClick,
                     role: 'button',
@@ -285,6 +287,10 @@ HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: _propTypes2.default.object,
+    /**
+     * Identifiant de l'élément
+     */
+    id: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     /**
      * Label qu'affiche le ChipFilter
      */

package/HiDatePicker/HiDatePicker.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
@@ -114,6 +118,7 @@ var HiDatePicker = function (_React$Component) {
         _this.renderMonthPickerOverlay = _this.renderMonthPickerOverlay.bind(_this);
         _this.renderTimePickerOverlay = _this.renderTimePickerOverlay.bind(_this);
         _this.renderYearPickerOverlay = _this.renderYearPickerOverlay.bind(_this);
+        _this.handleInputChange = _this.handleInputChange.bind(_this);
         return _this;
     }
 
@@ -128,29 +133,36 @@ var HiDatePicker = function (_React$Component) {
             this.handleCurrentMonthChange(new Date());
             this.props.onReset();
         }
+    }, {
+        key: 'handleInputChange',
+        value: function handleInputChange(event) {
+            this.props.onChange(event.target.value);
+        }
     }, {
         key: 'handleDayChange',
         value: function handleDayChange(day, modifiers) {
-            if (modifiers.selected) {
-                // Deselect day
-                this.props.onChange(undefined);
-            } else {
-                // Keep Time if set
-                if (this.props.enableTime && day !== undefined) {
-                    if (this.props.value) {
-                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
-                    } else {
-                        day.setHours(0, 0);
+            if (day) {
+                if (modifiers.selected) {
+                    // Deselect day
+                    this.props.onChange(undefined);
+                } else {
+                    // Keep Time if set
+                    if (this.props.enableTime && day !== undefined) {
+                        if (this.props.value) {
+                            day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                        } else {
+                            day.setHours(0, 0);
+                        }
                     }
+                    this.props.onChange(day);
+                }
+                if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
+                    // Hide overlay & remove focus on input
+                    document.activeElement.blur();
+                } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
+                    // Open Time panel after date selection
+                    this.openPanel('time');
                 }
-                this.props.onChange(day);
-            }
-            if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
-                // Hide overlay & remove focus on input
-                document.activeElement.blur();
-            } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
-                // Open Time panel after date selection
-                this.openPanel('time');
             }
         }
     }, {
@@ -299,7 +311,7 @@ var HiDatePicker = function (_React$Component) {
                 captionElement: this.renderCaption,
                 classNames: classes,
                 disabledDays: effectiveDisabledDays,
-                selectedDays: value,
+                selectedDays: (typeof value === 'undefined' ? 'undefined' : (0, _typeof3.default)(value)) === 'object' ? value : undefined,
                 locale: locale,
                 firstDayOfWeek: 1,
                 fromMonth: minimumDate,
@@ -315,7 +327,9 @@ var HiDatePicker = function (_React$Component) {
                 onReset: this.handleReset
             }, {
                 onBlur: this.handleBlur
-            }, props);
+            }, props, {
+                onChange: this.handleInputChange
+            });
 
             return _react2.default.createElement(
                 'div',
@@ -410,6 +424,6 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date sélectionnée
      */
-    value: _propTypes2.default.instanceOf(Date)
+    value: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Date), _propTypes2.default.string])
 } : {};
 exports.default = (0, _withStyles2.default)(_stylesheet2.default, { name: 'HmuiHiDatePicker' })(HiDatePicker);

package/HiDatePicker/HiDateRangePicker.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
+var _values = require('babel-runtime/core-js/object/values');
+
+var _values2 = _interopRequireDefault(_values);
+
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
@@ -106,12 +110,28 @@ var HiDateRangePicker = function (_React$Component) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiDateRangePicker.__proto__ || (0, _getPrototypeOf2.default)(HiDateRangePicker)).call(this));
 
+        _this.handleInputChange = function (inputName) {
+            return function (event) {
+                _this.event = event;
+                _this.props.onChange(inputName, event.target.value);
+            };
+        };
+
         _this.handleDayPickerFocus = function (name) {
             return function () {
                 _this.setState({ focusedInput: name });
             };
         };
 
+        _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(),
@@ -141,6 +161,7 @@ var HiDateRangePicker = function (_React$Component) {
         _this.handleYearClickTo = _this.handleYearClickTo.bind(_this);
         _this.handleDayPickerFocus = _this.handleDayPickerFocus.bind(_this);
         _this.handleDayPickerBlur = _this.handleDayPickerBlur.bind(_this);
+        _this.handleInputChange = _this.handleInputChange.bind(_this);
 
         _this.openPanel = _this.openPanel.bind(_this);
 
@@ -186,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) {
@@ -203,38 +220,45 @@ var HiDateRangePicker = function (_React$Component) {
         value: function handleDayChange(name, day, modifiers) {
             var _this4 = this;
 
-            // 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') {
-                        document.activeElement.blur();
+            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();
+                            }
+                            delete this.event;
+                        }
                     }
+                } else {
+                    this.timeout = setTimeout(function () {
+                        if (_this4[name + 'Input'].getInput()) {
+                            _this4[name + 'Input'].getInput().focus();
+                        }
+                    }, 10);
                 }
-            } else {
-                this.timeout = setTimeout(function () {
-                    if (_this4[name + 'Input'].getInput()) {
-                        _this4[name + 'Input'].getInput().focus();
-                    }
-                }, 10);
-            }
 
-            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 (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);
+                        }
                     }
+                    this.props.onChange(name, day);
                 }
-                this.props.onChange(name, day);
-            }
 
-            if (this.props.enableTime) {
-                this.openPanel(name, 'time');
+                if (this.props.enableTime) {
+                    this.openPanel(name, 'time');
+                }
             }
         }
     }, {
@@ -337,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) {
@@ -502,6 +521,20 @@ var HiDateRangePicker = function (_React$Component) {
                 }
             };
 
+            var selectedDays = [];
+            var selected = {};
+            if (from instanceof Date) {
+                selectedDays.push(from);
+                selected.from = from;
+            }
+            if (to instanceof Date) {
+                selectedDays.push(to);
+                selected.to = to;
+            }
+            if ((0, _values2.default)(selected).length > 0) {
+                selectedDays.push(selected);
+            }
+
             var dayPickerProps = (0, _extends3.default)({
                 classNames: classes,
                 disabledDays: disabledDays,
@@ -511,7 +544,7 @@ var HiDateRangePicker = function (_React$Component) {
                 modifiers: modifiers,
                 modifiersStyles: modifiersStyles,
                 // Both are required ?
-                selectedDays: [from, { from: from, to: to }],
+                selectedDays: selectedDays,
                 todayButton: translations.today,
                 weekdayElement: _Weekday2.default
             }, props);
@@ -520,9 +553,9 @@ var HiDateRangePicker = function (_React$Component) {
             // Disable days after 'to' date if define
 
             var after = void 0;
-            if (to && disableFutureDays) {
+            if (to instanceof Date && disableFutureDays) {
                 after = to < now ? now : to;
-            } else if (to) {
+            } else if (to instanceof Date) {
                 after = to;
             } else if (disableFutureDays) {
                 after = now;
@@ -549,9 +582,9 @@ var HiDateRangePicker = function (_React$Component) {
             // Disable days before 'from' date if define
 
             var before = void 0;
-            if (from && disablePastDays) {
+            if (from instanceof Date && disablePastDays) {
                 before = from < now ? now : from;
-            } else if (from) {
+            } else if (from instanceof Date) {
                 before = from;
             } else if (disablePastDays) {
                 before = now;
@@ -583,7 +616,8 @@ var HiDateRangePicker = function (_React$Component) {
             }, props, labelFrom && {
                 label: labelFrom
             }, {
-                id: id + '-from'
+                id: id + '-from',
+                onChange: this.handleInputChange('from')
             });
 
             var toInputProps = (0, _extends3.default)({}, onReset && {
@@ -593,11 +627,11 @@ var HiDateRangePicker = function (_React$Component) {
             }, props, labelTo && {
                 label: labelTo
             }, {
-                id: id + '-to'
+                id: id + '-to',
+                onChange: this.handleInputChange('to')
             });
 
-            var fromClass = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'to'), (0, _defineProperty3.default)(_classNames, classes.dayPickerMargin, staticPosition === true && this.state.focusedInput === 'to'), _classNames));
-            var toClass = (0, _classnames2.default)(classes.toInput, (0, _defineProperty3.default)({}, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'));
+            var toClass = (0, _classnames2.default)(classes.toInput, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'), (0, _defineProperty3.default)(_classNames, classes.right4, staticPosition === true && this.state.focusedInput === 'from'), _classNames));
 
             return _react2.default.createElement(
                 'div',
@@ -607,11 +641,11 @@ var HiDateRangePicker = function (_React$Component) {
                     {
                         className: classes.fromInput,
                         onFocus: this.handleDayPickerFocus('from'),
-                        onBlur: this.handleDayPickerBlur
+                        onBlur: this.handleDayPickerBlur('from')
                     },
                     _react2.default.createElement(
                         'div',
-                        { className: fromClass },
+                        null,
                         _react2.default.createElement(_DayPickerInput2.default, {
                             ref: function ref(el) {
                                 _this6.fromInput = el;
@@ -635,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) {
@@ -711,7 +745,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de début sélectionnée
      */
-    from: _propTypes2.default.instanceOf(Date),
+    from: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
     /**
      * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
      */
@@ -734,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,
     /**
@@ -747,7 +789,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de fin sélectionnée
      */
-    to: _propTypes2.default.instanceOf(Date),
+    to: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
     /**
      * Traductions
      */