@hipay/hipay-material-ui 1.0.0-beta.18 → 1.0.0-beta.2

package/HiTable/HiTableContextMenu.js

@@ -87,8 +87,7 @@ var HiTableContextMenu = function (_React$Component) {
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableContextMenu.__proto__ || (0, _getPrototypeOf2.default)(HiTableContextMenu)).call(this, props));
 
         _this.state = {
-            value: '',
-            label: ''
+            value: ''
         };
 
         _this.handleContextMenuOpen = _this.handleContextMenuOpen.bind(_this);
@@ -102,10 +101,7 @@ var HiTableContextMenu = function (_React$Component) {
     (0, _createClass3.default)(HiTableContextMenu, [{
         key: 'handleContextMenuOpen',
         value: function handleContextMenuOpen(event) {
-            this.setState({
-                value: event.detail.data.value,
-                label: event.detail.data.label
-            });
+            this.setState({ value: event.detail.data.label });
         }
     }, {
         key: 'handleClickCopy',
@@ -166,7 +162,7 @@ var HiTableContextMenu = function (_React$Component) {
                         _react2.default.createElement(
                             'span',
                             { className: classes.title },
-                            menuItem.title.replace('%s', _this2.state.label)
+                            menuItem.title.replace('%s', _this2.state.value)
                         )
                     );
                 })

package/HiTable/HiTableFooterScroll.js

@@ -138,7 +138,7 @@ var HiTableFooterScroll = function (_React$Component) {
             ) : _react2.default.createElement(
                 _HiButton2.default,
                 {
-                    variant: 'raised',
+                    raised: true,
                     color: 'primary',
                     className: classes.loadMoreButton,
                     onClick: function onClick() {

package/HiTable/HiTableHead.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SORTED_COLUMN_ERROR_MESSAGE = exports.styles = undefined;
 
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -47,10 +43,6 @@ var _reactProptypeConditionalRequire = require('react-proptype-conditional-requi
 
 var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _Table = require('material-ui/Table');
 
 var _PlusCircle = require('mdi-material-ui/PlusCircle');
@@ -87,13 +79,11 @@ var styles = exports.styles = function styles(theme) {
     return {
         thead: {
             position: 'relative',
-            width: '100%',
+            display: 'block' /*seperates the header from the body allowing it to be positioned*/
+            , width: '100%',
             overflow: 'visible',
             zIndex: 12
         },
-        theadFixedWidth: {
-            display: 'block' /*seperates the header from the body allowing it to be positioned*/
-        },
         theadRow: {
             backgroundColor: theme.palette.background3,
             zIndex: 12
@@ -236,8 +226,7 @@ var HiTableHead = function (_React$Component) {
                 sticky = _props.sticky,
                 translations = _props.translations,
                 view = _props.view,
-                lookupColumns = _props.lookupColumns,
-                fixedColumnWidth = _props.fixedColumnWidth;
+                lookupColumns = _props.lookupColumns;
             var _state = this.state,
                 hovered = _state.hovered,
                 openedOrderColumns = _state.openedOrderColumns,
@@ -245,7 +234,7 @@ var HiTableHead = function (_React$Component) {
 
 
             var headerProps = (0, _extends3.default)({
-                className: (0, _classnames2.default)(classes.thead, (0, _defineProperty3.default)({}, classes.theadFixedWidth, fixedColumnWidth))
+                className: classes.thead
             }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
             var unfixedColumnIsSet = false,
@@ -292,8 +281,8 @@ var HiTableHead = function (_React$Component) {
                             return _react2.default.createElement(_HeaderCell2.default, {
                                 key: 'header-' + column.colId,
                                 colId: column.colId,
-                                type: column['formType'] || column['type'] // define select items
-                                , title: column['label'],
+                                type: column['type'],
+                                title: column['label'],
                                 smallTitle: column['reducedLabel'],
                                 selectable: firstColumn && selectable,
                                 selected: selectedIdList.length > 0 ? selectedIdList.length === dataSource.length ? true : 'mixed' : false,
@@ -312,8 +301,7 @@ var HiTableHead = function (_React$Component) {
                                 fixedWidth: fixed,
                                 align: column['align'],
                                 sticky: firstColumn && sticky,
-                                lookedUp: lookupColumns.includes(column.colId),
-                                fixedColumnWidth: fixedColumnWidth
+                                lookedUp: lookupColumns.includes(column.colId)
                             });
                         }
                     }),
@@ -423,11 +411,6 @@ HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: _propTypes2.default.bool,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/HiTable/OrderColumns.js

@@ -141,8 +141,7 @@ var styles = exports.styles = function styles(theme) {
         controlLabelRoot: {
             marginLeft: 6,
             marginBottom: 8,
-            fontSize: 15,
-            width: 160
+            fontSize: 15
         },
         switchLabelRoot: {
             marginLeft: 15,
@@ -151,10 +150,7 @@ var styles = exports.styles = function styles(theme) {
         columnLabel: {
             position: 'relative',
             top: 5,
-            left: 5,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
+            left: 5
         },
         label: {
             fontWeight: 'inherit'

package/HiTopBar/HiTopBar.js

@@ -83,6 +83,10 @@ var _HiButton = require('../HiButton');
 
 var _HiButton2 = _interopRequireDefault(_HiButton);
 
+var _HiInput = require('../HiForm/HiInput');
+
+var _HiInput2 = _interopRequireDefault(_HiInput);
+
 var _HiColoredLabel = require('../HiColoredLabel');
 
 var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
@@ -133,9 +137,7 @@ var styles = exports.styles = function styles(theme) {
             marginRight: 1.5 * theme.spacing.unit,
             borderLeft: 'solid 1px',
             borderColor: (0, _colorManipulator.fade)('#000', 0.12),
-            display: 'inline-block',
-            minWidth: 144,
-            maxWidth: 288
+            display: 'inline-block'
         },
         accountSelectorButtonLabel: {
             textOverflow: 'ellipsis',
@@ -154,9 +156,6 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.text.secondary,
             minWidth: 32
         },
-        betaWithoutAccountSelector: {
-            marginLeft: 1.5 * theme.spacing.unit
-        },
         searchInput: {
             backgroundColor: theme.palette.background1 + ' !important'
         },
@@ -176,9 +175,6 @@ var styles = exports.styles = function styles(theme) {
             textTransform: 'capitalize',
             fontWeight: theme.typography.fontWeightRegular,
             minWidth: 50
-        },
-        collapseOverflow: {
-            overflow: 'inherit'
         }
     };
 };
@@ -205,14 +201,18 @@ var HiTopBar = function (_React$Component) {
 
         _this.state = {
             collapsed: false,
+            searchFocus: false,
             menuAnchor: null
         };
 
-        _this.handleCollapse = _this.handleCollapse.bind(_this);
+        _this.toggleCollapse = _this.toggleCollapse.bind(_this);
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        _this.handleBlur = _this.handleBlur.bind(_this);
         _this.handleClickMenu = _this.handleClickMenu.bind(_this);
         _this.handleOpenMenu = _this.handleOpenMenu.bind(_this);
         _this.handleCloseMenu = _this.handleCloseMenu.bind(_this);
         _this.handleMenuItemClick = _this.handleMenuItemClick.bind(_this);
+        _this.handleClickInputButton = _this.handleClickInputButton.bind(_this);
         return _this;
     }
 
@@ -233,19 +233,52 @@ var HiTopBar = function (_React$Component) {
             callback();
         }
     }, {
-        key: 'handleCollapse',
-        value: function handleCollapse() {
+        key: 'toggleCollapse',
+        value: function toggleCollapse() {
             this.setState({ collapsed: !this.state.collapsed });
         }
+    }, {
+        key: 'handleFocus',
+        value: function handleFocus() {
+            this.setState({ searchFocus: true });
+
+            if (this.props.onSearchFocus) {
+                this.props.onSearchFocus();
+            }
+        }
+    }, {
+        key: 'handleClickInputButton',
+        value: function handleClickInputButton(event) {
+            this.setState({ searchFocus: true });
+
+            if (this.props.onClickInputButton) {
+                this.props.onClickInputButton();
+            }
+            // Stop propagation to cancel input focus
+            event.stopPropagation();
+        }
+    }, {
+        key: 'handleBlur',
+        value: function handleBlur(event) {
+            if (!this.overlay.contains(event.relatedTarget)) {
+                this.setState({ searchFocus: false });
+            }
+
+            if (this.props.onSearchBlur) {
+                this.props.onSearchBlur();
+            }
+        }
     }, {
         key: 'handleClickMenu',
         value: function handleClickMenu() {
             this.props.onClickReturn();
+            this.setState({ searchFocus: false });
         }
     }, {
         key: 'render',
         value: function render() {
-            var _this2 = this;
+            var _classNames,
+                _this2 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -258,12 +291,44 @@ var HiTopBar = function (_React$Component) {
                 translations = _props.translations,
                 onClickMenu = _props.onClickMenu,
                 accountSelectorContent = _props.accountSelectorContent,
-                refButtons = _props.refButtons,
                 searchInput = _props.searchInput,
-                searchFocus = _props.searchFocus;
+                searchValue = _props.searchValue;
+
 
+            var colorPrimaryClass = this.state.searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
 
-            var colorPrimaryClass = searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
+            var inputClass = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.searchInput, !this.state.searchFocus), (0, _defineProperty3.default)(_classNames, classes.searchInputFocused, this.state.searchFocus), _classNames));
+
+            var endAdornment = _react2.default.createElement(
+                _HiButton2.default,
+                {
+                    className: classes.endAdornmentButton,
+                    onClick: this.handleClickInputButton
+                },
+                _react2.default.createElement(
+                    _Hidden2.default,
+                    { smDown: true },
+                    _react2.default.createElement(
+                        'span',
+                        null,
+                        translations.all_types
+                    )
+                ),
+                _react2.default.createElement(_mdiMaterialUi.MenuDown, { style: { color: (0, _colorManipulator.fade)('#000', 0.54) } })
+            );
+
+            var input = searchInput || _react2.default.createElement(_HiInput2.default, {
+                name: 'top-bar-search',
+                placeholder: translations.search,
+                value: searchValue,
+                onChange: this.props.onSearchChange,
+                startAdornment: 'magnify',
+                endAdornment: endAdornment,
+                classes: { root: inputClass },
+                onFocus: this.handleFocus,
+                onBlur: this.handleBlur,
+                onReset: this.props.onSearchReset
+            });
 
             var notificationButton = notificationValue > 0 ? _react2.default.createElement(
                 _HiButton2.default,
@@ -295,17 +360,16 @@ var HiTopBar = function (_React$Component) {
                         null,
                         _react2.default.createElement(
                             _Collapse2.default,
-                            {
-                                'in': !this.state.collapsed,
-                                className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.collapseOverflow, !hideable))
-                            },
+                            { 'in': !this.state.collapsed },
                             _react2.default.createElement(
                                 _Toolbar2.default,
                                 { className: classes.toolbar },
                                 _react2.default.createElement(
                                     'div',
-                                    { ref: refButtons },
-                                    searchFocus ? _react2.default.createElement(
+                                    { ref: function ref(div) {
+                                            return _this2.overlay = div;
+                                        } },
+                                    this.state.searchFocus ? _react2.default.createElement(
                                         _HiButton2.default,
                                         {
                                             className: classes.leftButton,
@@ -336,7 +400,7 @@ var HiTopBar = function (_React$Component) {
                                 _react2.default.createElement(
                                     'div',
                                     { className: classes.flex },
-                                    searchInput
+                                    input
                                 ),
                                 notificationButton,
                                 hasAccountSelector && _react2.default.createElement(
@@ -352,7 +416,6 @@ var HiTopBar = function (_React$Component) {
                                     accountSelectorContent
                                 ),
                                 beta && _react2.default.createElement(_HiColoredLabel2.default, {
-                                    className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.betaWithoutAccountSelector, !hasAccountSelector)),
                                     label: 'BETA',
                                     beta: true,
                                     color: theme.palette.neutral.dark
@@ -360,7 +423,7 @@ var HiTopBar = function (_React$Component) {
                                 (hideable || hasSettings) && _react2.default.createElement(
                                     _IconButton2.default,
                                     { color: 'inherit', className: classes.iconButton },
-                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.handleCollapse }),
+                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.toggleCollapse }),
                                     hasSettings && _react2.default.createElement(_HiIconBuilder2.default, {
                                         onClick: this.props.onClickSettings,
                                         icon: 'fa-gear',
@@ -372,7 +435,7 @@ var HiTopBar = function (_React$Component) {
                         hideable && this.state.collapsed && _react2.default.createElement(
                             _IconButton2.default,
                             {
-                                onClick: this.handleCollapse,
+                                onClick: this.toggleCollapse,
                                 color: 'inherit',
                                 className: classes.showTopBarButton
                             },
@@ -388,8 +451,10 @@ var HiTopBar = function (_React$Component) {
                         { className: classes.toolbar },
                         _react2.default.createElement(
                             'div',
-                            { ref: refButtons },
-                            searchFocus ? _react2.default.createElement(
+                            { ref: function ref(div) {
+                                    return _this2.overlay = div;
+                                } },
+                            this.state.searchFocus ? _react2.default.createElement(
                                 _IconButton2.default,
                                 { className: classes.leftButtonMobile, color: 'inherit' },
                                 _ref4
@@ -466,7 +531,6 @@ HiTopBar.defaultProps = {
     hideable: false,
     hasSettings: false,
     hasAccountSelector: false,
-    searchFocus: false,
     translations: {
         back: 'Back',
         menu: 'Menu',
@@ -507,6 +571,10 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au click sur l'accountSelector'
      */
     onClickAccountSelector: _propTypes2.default.func,
+    /**
+     * Fonction de callback au click sur le menu
+     */
+    onClickInputButton: _propTypes2.default.func.isRequired,
     /**
      * Fonction de callback au click sur le menu
      */
@@ -524,22 +592,34 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     onClickSettings: _propTypes2.default.func,
     /**
-     * Positionement de la topBar. The behavior of the different options is described
-     * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+     * Fonction de callback au blur du champs de recharge (si searchInput vide)
      */
-    position: _propTypes2.default.oneOf(['fixed', 'absolute', 'sticky', 'static']),
+    onSearchBlur: _propTypes2.default.func,
+    /**
+     * Fonction de callback au changement du champs input (si searchInput vide)
+     */
+    onSearchChange: _propTypes2.default.func,
+    /**
+     * Fonction de callback au focus sur le champs de recherche (si searchInput vide)
+     */
+    onSearchFocus: _propTypes2.default.func,
     /**
-     *  Passe une ref callback à la div contenant les boutons "menu" et "back"
+     * Fonction de callback au reset du champs de recherche (si searchInput vide)
      */
-    refButtons: _propTypes2.default.func,
+    onSearchReset: _propTypes2.default.func,
     /**
-     * Etat de focus.
+     * Positionement de la topBar. The behavior of the different options is described
+     * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
      */
-    searchFocus: _propTypes2.default.bool.isRequired,
+    position: _propTypes2.default.oneOf(['fixed', 'absolute', 'sticky', 'static']),
     /**
      * Input de recherche
      */
-    searchInput: _propTypes2.default.node.isRequired,
+    searchInput: _propTypes2.default.node,
+    /**
+     * Valeur du champs de recherche (si searchInput vide)
+     */
+    searchValue: _propTypes2.default.node,
     /**
      * @ignore
      */

package/es/HiCheckbox/HiCheckbox.js

@@ -12,10 +12,7 @@ import MinusBox from 'mdi-material-ui/MinusBox';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
-    root: {
-        marginRight: 12,
-        marginLeft: 12
-    },
+    root: {},
     checked: {
         color: theme.palette.business.primary.normal
     },

package/es/HiChip/HiChip.js

@@ -87,12 +87,12 @@ function HiChip(props) {
             })
         },
         img && React.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 16 }),
+        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon }),
         onPrevious && React.createElement(HiIconBuilder, {
             className: classNames(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 16
+            size: 20
         }),
         React.createElement(
             'span',
@@ -103,13 +103,13 @@ function HiChip(props) {
             className: classNames(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 16
+            size: 20
         }),
         onDelete && React.createElement(HiIconBuilder, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 16
+            size: 20
         })
     );
 }

package/es/HiChip/HiChipSwitch.js

@@ -144,8 +144,7 @@ class HiChipSwitch extends React.PureComponent {
             active,
             onClick,
             onSelectionClick,
-            selection,
-            selectionTitle
+            selection
         } = this.props;
         let selectionProps = {
             tabIndex: '-1'
@@ -155,8 +154,7 @@ class HiChipSwitch extends React.PureComponent {
                 onClick: this.handleClickSelection,
                 role: 'button',
                 tabIndex: '0',
-                onKeyDown: this.handleKeyDownSelection,
-                title: selectionTitle
+                onKeyDown: this.handleKeyDownSelection
             };
         }
 
@@ -207,8 +205,7 @@ class HiChipSwitch extends React.PureComponent {
 HiChipSwitch.defaultProps = {
     activeIcon: 'check',
     active: false,
-    selection: null,
-    selectionTitle: ''
+    selection: null
 };
 HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -242,10 +239,6 @@ HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * nombre de valeurs selectionnées.
      */
-    selection: PropTypes.number,
-    /**
-     * Title de la selection.
-     */
-    selectionTitle: PropTypes.string
+    selection: PropTypes.number
 } : {};
 export default withStyles(styles, { name: 'HmuiHiChipSwitch' })(HiChipSwitch);

package/es/HiColoredLabel/HiColoredLabel.js

@@ -32,7 +32,7 @@ export const styles = theme => ({
  * Label with background color & text color
  */
 function HiColoredLabel(props) {
-    const { classes, className, label, color, active, beta } = props;
+    const { classes, label, color, active, beta } = props;
     let fontWeight = 400;
     if (beta) {
         fontWeight = 600;
@@ -42,7 +42,7 @@ function HiColoredLabel(props) {
     return React.createElement(
         'div',
         {
-            className: classNames(classes.root, { [classes.beta]: beta }, className),
+            className: classNames(classes.root, { [classes.beta]: beta }),
             style: {
                 backgroundColor: active ? color : fade(color, 0.08),
                 color: active ? getContrastedTextColor(color, '#4C4C4C', '#FFF') : color,
@@ -67,10 +67,6 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: PropTypes.object,
-    /**
-     * Surcharge les classes du composant
-     */
-    className: PropTypes.string,
     /**
      * Couleur du text & du background
      */
@@ -78,12 +74,11 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {
-    active: false,
-    color: '#737373'
+    active: false
 };
 
 export default withStyles(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);

package/es/HiDatePicker/HiDatePicker.js

@@ -33,7 +33,6 @@ class HiDatePicker extends React.Component {
         this.handleDayChange = this.handleDayChange.bind(this);
         this.handleCurrentMonthChange = this.handleCurrentMonthChange.bind(this);
         this.handleReset = this.handleReset.bind(this);
-        this.handleTimeChange = this.handleTimeChange.bind(this);
         this.openPanel = this.openPanel.bind(this);
         this.renderCaption = this.renderCaption.bind(this);
         this.renderOverlay = this.renderOverlay.bind(this);
@@ -52,26 +51,31 @@ class HiDatePicker extends React.Component {
     }
 
     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);
-                }
+        this.timeout = setTimeout(() => {
+            if (this.datePickerInput && this.datePickerInput.getInput()) {
+                this.datePickerInput.getInput().focus();
             }
-            this.props.onChange(day);
+        }, 0);
+
+        if (modifiers.disabled) {
+            return; // TODO: delete ??
         }
-        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');
+
+        if (this.props.onChange) {
+            if (modifiers.selected) {
+                // Deselect day
+                this.props.onChange(undefined);
+            } else {
+                // Keep Time if set
+                if (this.props.enableTime) {
+                    if (this.props.value) {
+                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                    } else {
+                        day.setHours(0, 0);
+                    }
+                }
+                this.props.onChange(day);
+            }
         }
     }
 
@@ -99,13 +103,6 @@ class HiDatePicker extends React.Component {
         });
     }
 
-    handleTimeChange(date, precision) {
-        this.props.onChange(date);
-        if (date instanceof Date && precision === 'minute') {
-            document.activeElement.blur();
-        }
-    }
-
     openPanel(panel) {
         this.setState({
             openedPanel: panel
@@ -147,7 +144,7 @@ class HiDatePicker extends React.Component {
     renderTimePickerOverlay(propsOverlay) {
         const timePickerProps = {
             value: this.props.value,
-            onChange: this.handleTimeChange,
+            onChange: this.props.onChange,
             onCalendarClick: this.handleCalendarClick
         };
         return React.createElement(TimePickerOverlay, _extends({ key: 'time-picker-overlay' }, timePickerProps, propsOverlay));
@@ -299,10 +296,8 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     minimumDate: PropTypes.instanceOf(Date),
     /**
      * Callback à la sélection d'une date
-     *
-     * @param {Date} date sélectionnée
      */
-    onChange: PropTypes.func.isRequired,
+    onChange: PropTypes.func,
     /**
      * Callback au reset de l'input
      */