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

package/HiSelectNew/HiNestedSelect.js

@@ -47,12 +47,12 @@ var _helpers = require("../utils/helpers");
  */
 function getRecursiveFinalItemIdList(itemList) {
   var finalItemIdList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return (0, _toConsumableArray2.default)(finalItemIdList).concat((0, _toConsumableArray2.default)(itemList.reduce(function (memo, item) {
+  return [].concat((0, _toConsumableArray2.default)(finalItemIdList), (0, _toConsumableArray2.default)(itemList.reduce(function (memo, item) {
     if (item.children) {
       return getRecursiveFinalItemIdList(item.children, memo);
     }
 
-    return (0, _toConsumableArray2.default)(memo).concat([item.id]);
+    return [].concat((0, _toConsumableArray2.default)(memo), [item.id]);
   }, [])));
 }
 /**
@@ -128,7 +128,7 @@ function buildFilteredItemList(itemList) {
       }
 
       return {
-        l: (0, _toConsumableArray2.default)(memoItemList).concat([(0, _extends2.default)({}, item, disabledParent && {
+        l: [].concat((0, _toConsumableArray2.default)(memoItemList), [(0, _extends2.default)({}, item, disabledParent && {
           disabled: true,
           hideCheckbox: true // don't display checkbox on disabled parent
 
@@ -147,7 +147,7 @@ function buildFilteredItemList(itemList) {
 
     var itemSelected = selectedItemIdList.includes(item.id);
     return {
-      l: (0, _toConsumableArray2.default)(memoItemList).concat([(0, _extends2.default)({
+      l: [].concat((0, _toConsumableArray2.default)(memoItemList), [(0, _extends2.default)({
         displayed: itemVisible || visibleParent
       }, item)]),
       s: itemSelected && memoSelected,
@@ -266,9 +266,9 @@ function (_React$PureComponent) {
           }), item);
         } else {
           // select parent > add each selectable child without duplicates.
-          onChange(event, (0, _toConsumableArray2.default)(value.filter(function (vid) {
+          onChange(event, [].concat((0, _toConsumableArray2.default)(value.filter(function (vid) {
             return !parentSelectableItemIdList.includes(vid);
-          })).concat((0, _toConsumableArray2.default)(parentSelectableItemIdList)), item);
+          })), (0, _toConsumableArray2.default)(parentSelectableItemIdList)), item);
         }
       } else if (value.includes(item.id)) {
         // unselect item
@@ -276,7 +276,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
 
@@ -315,14 +315,14 @@ function (_React$PureComponent) {
         centered: true,
         hideCheckbox: true,
         label: translations.no_result_match
-      }]) : (0, _toConsumableArray2.default)(loading ? [{
+      }]) : [].concat((0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []).concat((0, _toConsumableArray2.default)(hasAll ? [{
+      }] : []), (0, _toConsumableArray2.default)(hasAll ? [{
         id: '_all',
         iconAll: iconAll,
         label: translations.all,

package/HiSelectNew/HiNestedSelectContent.js

@@ -43,12 +43,12 @@ var _helpers = require("../utils/helpers");
  */
 function getRecursiveFinalItemIdList(itemList) {
   var finalItemIdList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return (0, _toConsumableArray2.default)(finalItemIdList).concat((0, _toConsumableArray2.default)(itemList.reduce(function (memo, item) {
+  return [].concat((0, _toConsumableArray2.default)(finalItemIdList), (0, _toConsumableArray2.default)(itemList.reduce(function (memo, item) {
     if (item.children) {
       return getRecursiveFinalItemIdList(item.children, memo);
     }
 
-    return (0, _toConsumableArray2.default)(memo).concat([item.id]);
+    return [].concat((0, _toConsumableArray2.default)(memo), [item.id]);
   }, [])));
 }
 /**
@@ -124,7 +124,7 @@ function buildFilteredItemList(itemList) {
       }
 
       return {
-        l: (0, _toConsumableArray2.default)(memoItemList).concat([(0, _extends2.default)({}, item, disabledParent && {
+        l: [].concat((0, _toConsumableArray2.default)(memoItemList), [(0, _extends2.default)({}, item, disabledParent && {
           disabled: true,
           hideCheckbox: true // don't display checkbox on disabled parent
 
@@ -143,7 +143,7 @@ function buildFilteredItemList(itemList) {
 
     var itemSelected = selectedItemIdList.includes(item.id);
     return {
-      l: (0, _toConsumableArray2.default)(memoItemList).concat([(0, _extends2.default)({
+      l: [].concat((0, _toConsumableArray2.default)(memoItemList), [(0, _extends2.default)({
         displayed: itemVisible || visibleParent
       }, item)]),
       s: itemSelected && memoSelected,
@@ -223,9 +223,9 @@ function (_React$PureComponent) {
           }), item);
         } else {
           // select parent > add each selectable child without duplicates.
-          onChange(event, (0, _toConsumableArray2.default)(value.filter(function (vid) {
+          onChange(event, [].concat((0, _toConsumableArray2.default)(value.filter(function (vid) {
             return !parentSelectableItemIdList.includes(vid);
-          })).concat((0, _toConsumableArray2.default)(parentSelectableItemIdList)), item);
+          })), (0, _toConsumableArray2.default)(parentSelectableItemIdList)), item);
         }
       } else if (value.includes(item.id)) {
         // unselect item
@@ -233,7 +233,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
 
@@ -271,14 +271,14 @@ function (_React$PureComponent) {
         centered: true,
         hideCheckbox: true,
         label: translations.no_result_match
-      }]) : (0, _toConsumableArray2.default)(loading ? [{
+      }]) : [].concat((0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []).concat((0, _toConsumableArray2.default)(hasAll ? [{
+      }] : []), (0, _toConsumableArray2.default)(hasAll ? [{
         id: '_all',
         iconAll: iconAll,
         label: translations.all,

package/HiSelectNew/HiSelect.js

@@ -148,22 +148,22 @@ function (_React$PureComponent) {
       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 = (0, _toConsumableArray2.default)(loading ? [{
+      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
         return _this.props.filterFunc(item, search);
-      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []).concat((0, _toConsumableArray2.default)(options))));
+      })] : []), (0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList,
         inputValue: _this.buildInputValue(options, value, loading)
@@ -271,22 +271,20 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnSelectedItem = function (selectedValue) {
-      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
-        setTimeout(function () {
-          // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-          var item = _this.overlay.getElementsByTagName('li')[0];
-
-          if (selectedValue && typeof selectedValue === 'string') {
-            item = _this.overlay.getElementsByTagName('li')[selectedValue];
-          } else if (selectedValue && typeof selectedValue === 'number') {
-            item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
-          }
+      setTimeout(function () {
+        // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
+        var item = _this.overlay.getElementsByTagName('li')[0];
+
+        if (selectedValue && typeof selectedValue === 'string') {
+          item = _this.overlay.getElementsByTagName('li')[selectedValue];
+        } else if (selectedValue && typeof selectedValue === 'number') {
+          item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
+        }
 
-          if (item) {
-            item.focus();
-          }
-        }, 1);
-      }
+        if (item) {
+          item.focus();
+        }
+      }, 1);
     };
 
     _this.handleClickAway = function (event) {
@@ -464,7 +462,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
 
@@ -490,13 +488,13 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: (0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
+          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []).concat((0, _toConsumableArray2.default)(suggestions))
+          })] : []), (0, _toConsumableArray2.default)(suggestions))
         });
       }
     };
@@ -528,11 +526,12 @@ function (_React$PureComponent) {
       suggestions: props.options,
       openDown: true
     };
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleClickAway = _this.handleClickAway.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleKeyDownInput = _this.handleKeyDownInput.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));

package/HiSelectNew/HiSelectContent.js

@@ -179,7 +179,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
 
@@ -209,13 +209,13 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: (0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
+          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []).concat((0, _toConsumableArray2.default)(suggestions))
+          })] : []), (0, _toConsumableArray2.default)(suggestions))
         });
       }
     };
@@ -251,22 +251,22 @@ function (_React$PureComponent) {
       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 = (0, _toConsumableArray2.default)(loading ? [{
+      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
         return item.label && _this.props.filterFunc(item, search);
-      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []).concat((0, _toConsumableArray2.default)(options))));
+      })] : []), (0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList
       };

package/HiSelectableList/HiSelectableListItem.js

@@ -71,7 +71,7 @@ var styles = function styles(theme) {
         display: 'block'
       },
       '&$inline': {
-        maxHeight: 40,
+        minHeight: 40,
         '& $secondaryLabel': {
           display: 'inline-block'
         }
@@ -128,7 +128,7 @@ var styles = function styles(theme) {
       '& strong': {
         fontWeight: theme.typography.fontWeightMedium
       },
-      display: 'inline-flex'
+      display: 'contents'
     }),
     listItemContentSelected: {},
     label: {
@@ -158,7 +158,6 @@ var styles = function styles(theme) {
       fontSize: 12,
       textOverflow: 'ellipsis',
       textAlign: 'right',
-      padding: '4px 0px 4px 8px',
       alignSelf: 'center'
     }),
     img: {
@@ -172,7 +171,7 @@ var styles = function styles(theme) {
       verticalAlign: 'middle'
     },
     labelContent: {
-      display: 'flex',
+      display: '-webkit-flex',
       alignItems: 'center',
       maxWidth: '85%',
       '&$labelWithoutSecondaryInline': {
@@ -190,9 +189,6 @@ var styles = function styles(theme) {
       },
       '&$infosWithoutSecondaryInline': {
         paddingLeft: 28
-      },
-      '&$infosWithSecondaryInline': {
-        marginTop: -8
       }
     },
     infosInlineWithoutSecondary: {},

package/README.md

@@ -226,7 +226,7 @@ npm install -g conventional-changelog-cli
 npm install -g cz-conventional-changelog
 ```
 
-1. Changer la version dans packages/hipay-material-ui/package.json
+1. Changer la version dans package.json et dans packages/hipay-material-ui/package.json
 2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
 3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
 4. Build : ```npm run build```

package/es/HiCell/CellNumeric.js

@@ -25,7 +25,7 @@ class CellNumeric extends React.PureComponent {
     let title = '';
 
     if (currency) {
-      displayedValue = formatCurrencyAmount(value, view, locale, currency);
+      displayedValue = formatCurrencyAmount(value, view, locale, currency, precision);
       title = formatCurrencyAmount(value, 'l', locale, currency);
     } else {
       displayedValue = formatNumber(value, view, locale, precision);

package/es/HiDatePicker/HiDatePicker.js

@@ -169,7 +169,8 @@ class HiDatePicker extends React.Component {
   renderYearPickerOverlay(propsOverlay) {
     const yearPickerProps = {
       value: this.state.currentMonth,
-      onChange: this.handleCurrentMonthChange
+      onChange: this.handleCurrentMonthChange,
+      disableFutureDays: this.props.disableFutureDays
     };
     return React.createElement(YearPickerOverlay, _extends({
       key: 'year-picker-overlay'
@@ -240,7 +241,10 @@ class HiDatePicker extends React.Component {
     const inputProps = _objectSpread({}, onReset && {
       onReset: this.handleReset
     }, props, {
-      onChange: this.handleInputChange
+      onChange: this.handleInputChange,
+      HiInputProps: {
+        onSubmit: this.props.onSubmit
+      }
     });
 
     return React.createElement("div", {
@@ -338,6 +342,11 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onReset: PropTypes.func,
 
+  /**
+   * Callback lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: PropTypes.func,
+
   /**
    * Traductions
    */

package/es/HiDatePicker/HiDateRangePicker.js

@@ -171,6 +171,29 @@ class HiDateRangePicker extends React.Component {
       }));
     };
 
+    this.handleKeyDown = name => event => {
+      if (event.key === 'Tab' && !event.shiftKey) {
+        let nodeName = document.activeElement.nodeName;
+
+        if (this.props[name] && nodeName === 'INPUT' && document.activeElement.nextSibling.children.length > 0) {
+          document.activeElement.nextSibling.focus();
+        } else if (name === 'from') {
+          this.handleDayPickerBlur('from');
+          this.handleDayPickerFocus('to');
+          this.toInput.handleInputFocus();
+          setTimeout(() => {
+            document.getElementById(`${this.props.id}-to`).focus();
+          }, 1);
+        } else if (name === 'to') {
+          this.handleDayPickerBlur('to');
+          this.toInput.handleInputBlur(event);
+          setTimeout(() => {
+            document.activeElement.blur();
+          }, 1);
+        }
+      }
+    };
+
     this.openPanel = panel => {
       this.setState({
         openedPanel: panel
@@ -246,7 +269,7 @@ class HiDateRangePicker extends React.Component {
       const yearPickerProps = {
         value: this.state.currentMonth,
         onChange: this.handleCurrentMonthChange,
-        disabledFutureDays: this.props.disableFutureDays
+        disableFutureDays: this.props.disableFutureDays
       };
       return React.createElement(YearPickerOverlay, _extends({
         key: `${name}-year-picker-overlay`
@@ -385,7 +408,10 @@ class HiDateRangePicker extends React.Component {
     }, {
       id: `${id}-from`,
       onChange: this.handleInputChange('from'),
-      disabled
+      disabled,
+      HiInputProps: {
+        onSubmit: this.props.onSubmit
+      }
     });
 
     const toInputProps = _objectSpread({}, onReset && {
@@ -397,7 +423,10 @@ class HiDateRangePicker extends React.Component {
     }, {
       id: `${id}-to`,
       onChange: this.handleInputChange('to'),
-      disabled
+      disabled,
+      HiInputProps: {
+        onSubmit: this.props.onSubmit
+      }
     });
 
     const toClass = classNames(classes.toInput, {
@@ -408,8 +437,8 @@ class HiDateRangePicker extends React.Component {
       className: classNames(classes.root, classes.rangePickerContainer)
     }, React.createElement("div", {
       className: classes.fromInput,
-      onFocus: () => this.handleDayPickerFocus('from') // onBlur={() => this.handleDayPickerBlur('from')}
-
+      onFocus: () => this.handleDayPickerFocus('from'),
+      onKeyDown: this.handleKeyDown('from')
     }, React.createElement("div", null, React.createElement(DayPickerInput, {
       key: this.state.keyFrom,
       ref: el => {
@@ -429,7 +458,8 @@ class HiDateRangePicker extends React.Component {
     }))), React.createElement("div", {
       className: toClass,
       onFocus: () => this.handleDayPickerFocus('to'),
-      onBlur: () => this.handleDayPickerBlur('to')
+      onBlur: () => this.handleDayPickerBlur('to'),
+      onKeyDown: this.handleKeyDown('to')
     }, React.createElement(DayPickerInput, {
       key: this.state.keyTo,
       ref: el => {
@@ -443,8 +473,7 @@ class HiDateRangePicker extends React.Component {
       inputProps: toInputProps,
       format: enableTime ? `${format} HH:mm` : format,
       formatDate: MomentLocaleUtils.formatDate,
-      parseDate: MomentLocaleUtils.parseDate // onDayChange={(day) => this.handleDayChange('to', day)}
-      ,
+      parseDate: MomentLocaleUtils.parseDate,
       placeholder: ''
     })));
 
@@ -597,6 +626,11 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onReset: PropTypes.func,
 
+  /**
+   * Callback lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: PropTypes.func,
+
   /**
    * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
    */

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import { findDOMNode } from 'react-dom';
 import Grid from '@material-ui/core/Grid';
 import withStyles from '../styles/withStyles';
@@ -52,7 +52,7 @@ export function yearAndQuarter(format, date, t) {
   const indexM = split.findIndex(findM);
   return indexY < indexM ? date.format(`${split[indexY]}${s}[${t.short_quarter}]Q`) : date.format(`[${t.short_quarter}]Q${s}${split[indexY]}`);
 }
-export function buildDateRangeOptionByKey(key, t, format) {
+export function buildDateRangeOptionByKey(key, t, format, timezoneName) {
   let from;
   let label;
   let info;
@@ -67,71 +67,71 @@ export function buildDateRangeOptionByKey(key, t, format) {
   switch (key) {
     case 'custom':
       label = t.custom_period;
-      from = moment().subtract(15, 'day').startOf('day');
-      to = moment().endOf('day');
+      from = moment().tz(timezoneName).subtract(15, 'day').startOf('day');
+      to = moment().tz(timezoneName).endOf('day');
       type = 'primary-highlight';
       break;
 
     case 'cd':
       label = t.today;
-      from = moment().startOf('day');
-      to = moment().endOf('day');
+      from = moment().tz(timezoneName).startOf('day');
+      to = moment().tz(timezoneName).endOf('day');
       info = `${from.format(format)}`;
       break;
 
     case 'pd':
       label = t.yesterday;
-      from = moment().subtract(1, 'day').startOf('day');
-      to = moment().subtract(1, 'day').endOf('day');
+      from = moment().tz(timezoneName).subtract(1, 'day').startOf('day');
+      to = moment().tz(timezoneName).subtract(1, 'day').endOf('day');
       info = `${from.format(format)}`;
       break;
 
     case 'cw':
       label = t.current_week;
-      from = moment().startOf('week');
-      to = moment();
+      from = moment().tz(timezoneName).startOf('week');
+      to = moment().tz(timezoneName);
       info = `${t.short_week}${from.format('w')}, \n ${from.format(format)} ${t.to_now}`;
       break;
 
     case 'pw':
       label = t.previous_week;
-      from = moment().subtract(1, 'week').startOf('week');
-      to = moment().subtract(1, 'week').endOf('week');
+      from = moment().tz(timezoneName).subtract(1, 'week').startOf('week');
+      to = moment().tz(timezoneName).subtract(1, 'week').endOf('week');
       info = `${t.short_week}${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
       break;
 
     case 'cm':
       label = t.current_month;
-      from = moment().startOf('month');
-      to = moment();
+      from = moment().tz(timezoneName).startOf('month');
+      to = moment().tz(timezoneName);
       info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'pm':
       label = t.previous_month;
-      from = moment().subtract(1, 'month').startOf('month');
-      to = moment().subtract(1, 'month').endOf('month');
+      from = moment().tz(timezoneName).subtract(1, 'month').startOf('month');
+      to = moment().tz(timezoneName).subtract(1, 'month').endOf('month');
       info = `${yearAndMonth(format, from)}, ${from.daysInMonth()} ${t.days}`;
       break;
 
     case 'cq':
       label = t.current_quarter;
-      from = moment().startOf('quarter');
-      to = moment();
+      from = moment().tz(timezoneName).startOf('quarter');
+      to = moment().tz(timezoneName);
       info = `${yearAndQuarter(format, from, t)}, ${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'pq':
       label = t.previous_quarter;
-      from = moment().subtract(1, 'quarter').startOf('quarter');
-      to = moment().subtract(1, 'quarter').endOf('quarter');
+      from = moment().tz(timezoneName).subtract(1, 'quarter').startOf('quarter');
+      to = moment().tz(timezoneName).subtract(1, 'quarter').endOf('quarter');
       info = `${yearAndQuarter(format, from, t)}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'cy':
       label = t.current_year;
-      from = moment().startOf('year');
-      to = moment();
+      from = moment().tz(timezoneName).startOf('year');
+      to = moment().tz(timezoneName);
       info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
@@ -190,8 +190,8 @@ class HiDateRangeSelector extends React.Component {
       const selectedOption = this.options.find(option => option.id === value);
 
       if (selectedOption) {
-        this.props.onChange('from', selectedOption.from.toDate());
-        this.props.onChange('to', selectedOption.to.toDate());
+        this.props.onChange('from', new Date(selectedOption.from.format('YYYY-MM-DD HH:mm:ss')));
+        this.props.onChange('to', new Date(selectedOption.to.format('YYYY-MM-DD HH:mm:ss')));
         this.props.onChange('fromError', false);
         this.props.onChange('toError', false);
       }
@@ -201,8 +201,7 @@ class HiDateRangeSelector extends React.Component {
       }
     };
 
-    this.handleSelectChange = this.handleSelectChange.bind(this);
-    this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
+    this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format, props.timezoneName));
     this.state = {
       selectedPreset: props.defaultPreset,
       containerWidth: 0
@@ -299,7 +298,8 @@ class HiDateRangeSelector extends React.Component {
       classes: {
         root: classes.dateSelect
       },
-      staticPosition: staticPosition
+      staticPosition: staticPosition,
+      onSubmit: this.props.onSubmit
     }, selectProps))), React.createElement(Grid, {
       item: true,
       xs: 12,
@@ -341,6 +341,7 @@ HiDateRangeSelector.defaultProps = {
   format: 'YYYY-DD-MM',
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
+  timezoneName: 'Europe/Paris',
   translations: {
     today: 'Today',
     hour: 'Hour',
@@ -459,6 +460,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onChange: PropTypes.func.isRequired,
 
+  /**
+   * Callback lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: PropTypes.func,
+
   /**
    * true si champs obligatoire
    */
@@ -479,6 +485,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   staticPosition: PropTypes.bool,
 
+  /**
+   * Timezone de l'utilisateur
+   */
+  timezoneName: PropTypes.string,
+
   /**
    * Date de fin sélectionnée
    */