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

package/CHANGELOG.md

@@ -1,3 +1,129 @@
+# [2.0.0-beta.62](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.62) (2019-02-01)
+
+
+### Bug Fixes
+
+* **eslint:** remove eslint warrnings in components (ignore test files) ([d236c62](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d236c62))
+* **HiBreadcrumb:** clean eslint warnings ([6db12fb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6db12fb))
+* **HiDatePicker:** add static positions for custom overlays ([c3edf24](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c3edf24))
+* **HiExpansionPanel:** Fix props type a requirement ([cbc3b48](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cbc3b48))
+* **HiInput:** handle focus state through prop when needed to override default comportment ([9a133cc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a133cc))
+* **HiKpiNotice:** eslint clean warnings ([11b5552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/11b5552))
+* **HiSelect:** Fix build of HiSelectContent ([4b87f78](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4b87f78))
+* **HiSelect:** focus on undefined item ([2d084e6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2d084e6))
+* **HiSelect:** handle staticPosition & width properly for HiDateRangeSelector usage ([7b19ffb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7b19ffb))
+* **HiSelect:** remove HiSelectNew calls ([cc5397d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cc5397d))
+* **HiSelectableListItem:** disabled item checkbox color ([9f10552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9f10552))
+* **HiSelectableListItem:** remove item width ([a913945](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a913945))
+* **HiSelectContent:** Remove compute of input value ([b86db83](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b86db83))
+* **HiSlider:** eslint clean warnings ([08964b1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/08964b1))
+* **HiUploadField:** clean eslint warnings ([c76aaf1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c76aaf1))
+* **migration:** fix contrast threshold ... ([6fb3b18](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6fb3b18))
+* **package:** add cross-env ([7098fd6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7098fd6))
+
+
+### Code Refactoring
+
+* deleting the old HiSelect and replacing it by the new (PSYCHE-1382) ([d5fc252](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d5fc252))
+
+
+### Features
+
+* **CellImage:** Handle fallbackImage ([254799d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/254799d))
+* **CellSentinel:** Uniformize cell api with front CellSentinel ([4e2975b](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4e2975b))
+* **CellSentinel:** Update CellSentinel to the new way (split each result in different column) ([efe2711](https://gitlab.hipay.org/backend/hipay-material-ui/commit/efe2711))
+* **CellSentinelScore:** Add CellSentinelScore ([2fff04d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2fff04d))
+* **CellText:** Handle active prop in CellText & column views in HiTable ([4366e60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4366e60))
+* **HiCells:** Add simple cells types (Address, Date, Icon, Image, Numeric, PinToAction, Rate, Senti ([f688517](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f688517))
+* **HiDatePicke:** add timezone props ([18360a5](https://gitlab.hipay.org/backend/hipay-material-ui/commit/18360a5))
+* **HiDatePicker:** BREAKING CHANGE - add local prop to handle calendar translations ([b1b3743](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1b3743))
+* **HiIcon:** Add mdi-material-ui as available icons via 'mdi_' prefix ([1091d6d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/1091d6d))
+* **HiMap:** unregister fetch on unmount ([0afa931](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0afa931))
+* **HiSelect:** Add (NEW) HiSelect, HiNestedSelect, HiDynamicSelect ([4c6447e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4c6447e))
+* **HiSelect:** Reset search input on blur & on close ([d9af584](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d9af584))
+* **HiSelectableList:** Add sort props to sort item list on label ([f412ddc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f412ddc))
+* **HiSelectContent:** Add new HiSelectContent & HiNestedSelectContent ([215ad8f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/215ad8f))
+* **HiSelectContent:** export utils functions ([7c41d87](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7c41d87))
+* **HiUploadField:** rename component HiUploadField ([593f77e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/593f77e))
+* **notice:** Création notice KPI ([bba3f89](https://gitlab.hipay.org/backend/hipay-material-ui/commit/bba3f89))
+
+
+### Performance Improvements
+
+* **PureFunction:** Use pure & functional components ([220c686](https://gitlab.hipay.org/backend/hipay-material-ui/commit/220c686))
+
+
+### BREAKING CHANGES
+
+* HiSelectNew no longer exist, make sure you're importing HiSelect instead
+* **HiDatePicker:** Required "local" props (use polyglot, p.currentLocal)
+* **HiUploadField:** Components names changes
+* **HiCells:** Remove CellCountry, CellThirdParty, CellStatus & CellAccount (use generic type
+CellImage & CellText)
+* **HiSelect:** HiSelect API change, use HiNestedSelect or HiDynamicSelect relative to situation
+
+
+
+<a name="2.0.0-beta.61"></a>
+# [2.0.0-beta.61](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.61) (2019-01-24)
+
+
+### Bug Fixes
+
+* **eslint:** remove eslint warrnings in components (ignore test files) ([d236c62](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d236c62))
+* **HiBreadcrumb:** clean eslint warnings ([6db12fb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6db12fb))
+* **HiDatePicker:** add static positions for custom overlays ([c3edf24](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c3edf24))
+* **HiExpansionPanel:** Fix props type a requirement ([cbc3b48](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cbc3b48))
+* **HiInput:** handle focus state through prop when needed to override default comportment ([9a133cc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a133cc))
+* **HiKpiNotice:** eslint clean warnings ([11b5552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/11b5552))
+* **HiSelect:** Fix build of HiSelectContent ([4b87f78](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4b87f78))
+* **HiSelect:** focus on undefined item ([2d084e6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2d084e6))
+* **HiSelect:** handle staticPosition & width properly for HiDateRangeSelector usage ([7b19ffb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7b19ffb))
+* **HiSelectableListItem:** disabled item checkbox color ([9f10552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9f10552))
+* **HiSelectableListItem:** remove item width ([a913945](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a913945))
+* **HiSelectContent:** Remove compute of input value ([b86db83](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b86db83))
+* **HiSlider:** eslint clean warnings ([08964b1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/08964b1))
+* **HiUploadField:** clean eslint warnings ([c76aaf1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c76aaf1))
+* **migration:** fix contrast threshold ... ([6fb3b18](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6fb3b18))
+* **package:** add cross-env ([7098fd6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7098fd6))
+
+
+### Features
+
+* **CellImage:** Handle fallbackImage ([254799d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/254799d))
+* **CellSentinel:** Uniformize cell api with front CellSentinel ([4e2975b](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4e2975b))
+* **CellSentinel:** Update CellSentinel to the new way (split each result in different column) ([efe2711](https://gitlab.hipay.org/backend/hipay-material-ui/commit/efe2711))
+* **CellSentinelScore:** Add CellSentinelScore ([2fff04d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2fff04d))
+* **CellText:** Handle active prop in CellText & column views in HiTable ([4366e60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4366e60))
+* **HiCells:** Add simple cells types (Address, Date, Icon, Image, Numeric, PinToAction, Rate, Senti ([f688517](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f688517))
+* **HiDatePicke:** add timezone props ([18360a5](https://gitlab.hipay.org/backend/hipay-material-ui/commit/18360a5))
+* **HiDatePicker:** BREAKING CHANGE - add local prop to handle calendar translations ([b1b3743](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b1b3743))
+* **HiIcon:** Add mdi-material-ui as available icons via 'mdi_' prefix ([1091d6d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/1091d6d))
+* **HiMap:** unregister fetch on unmount ([0afa931](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0afa931))
+* **HiSelect:** Add (NEW) HiSelect, HiNestedSelect, HiDynamicSelect ([4c6447e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4c6447e))
+* **HiSelect:** Reset search input on blur & on close ([d9af584](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d9af584))
+* **HiSelectableList:** Add sort props to sort item list on label ([f412ddc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f412ddc))
+* **HiSelectContent:** Add new HiSelectContent & HiNestedSelectContent ([215ad8f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/215ad8f))
+* **HiSelectContent:** export utils functions ([7c41d87](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7c41d87))
+* **HiUploadField:** rename component HiUploadField ([593f77e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/593f77e))
+* **notice:** Création notice KPI ([bba3f89](https://gitlab.hipay.org/backend/hipay-material-ui/commit/bba3f89))
+
+
+### Performance Improvements
+
+* **PureFunction:** Use pure & functional components ([220c686](https://gitlab.hipay.org/backend/hipay-material-ui/commit/220c686))
+
+
+### BREAKING CHANGES
+
+* **HiDatePicker:** Required "local" props (use polyglot, p.currentLocal)
+* **HiUploadField:** Components names changes
+* **HiCells:** Remove CellCountry, CellThirdParty, CellStatus & CellAccount (use generic type
+CellImage & CellText)
+* **HiSelect:** HiSelect API change, use HiNestedSelect or HiDynamicSelect relative to situation
+
+
+
 # [2.0.0-beta.60](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.60) (2019-01-14)
 
 

package/HiDatePicker/HiDatePicker.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -29,6 +31,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+
 var _moment = _interopRequireDefault(require("react-day-picker/moment"));
 
 var _hiLocaleUtils = _interopRequireDefault(require("./hiLocaleUtils"));
@@ -65,9 +69,21 @@ function (_React$Component) {
 
     (0, _classCallCheck2.default)(this, HiDatePicker);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDatePicker).call(this));
+
+    _this.handleKeyDown = function (name) {
+      return function (event) {
+        if (event.key === 'Escape' && !event.shiftKey) {
+          _this.datePickerInput.hideDayPicker();
+
+          event.stopPropagation();
+        }
+      };
+    };
+
+    var today = (0, _momentTimezone.default)().tz(props.timezoneName);
     _this.state = {
       openedPanel: 'calendar',
-      currentMonth: props.value ? props.value : new Date()
+      currentMonth: props.value ? props.value : new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds())
     }; // this.formatDate = this.formatDate.bind(this);
 
     _this.handleCalendarClick = _this.handleCalendarClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
@@ -93,17 +109,18 @@ function (_React$Component) {
     value: function componentWillUnmount() {
       clearTimeout(this.timeout);
     }
-  }, {
-    key: "handleReset",
-    value: function handleReset() {
-      this.handleCurrentMonthChange(new Date());
-      this.props.onReset();
-    }
   }, {
     key: "handleInputChange",
     value: function handleInputChange(event) {
       this.props.onChange(event.target.value);
     }
+  }, {
+    key: "handleReset",
+    value: function handleReset() {
+      var today = (0, _momentTimezone.default)().tz(this.props.timezoneName);
+      this.handleCurrentMonthChange(new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()));
+      this.props.onReset();
+    }
   }, {
     key: "handleDayChange",
     value: function handleDayChange(day, modifiers) {
@@ -259,10 +276,11 @@ function (_React$Component) {
           hideOnDayClick = _this$props.hideOnDayClick,
           props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "format", "locale", "minimumDate", "onReset", "translations", "value", "hideOnDayClick"]);
       var currentMonth = this.state.currentMonth;
+      var today = (0, _momentTimezone.default)().tz(this.props.timezoneName);
       var effectiveDisabledDays = (0, _extends2.default)({}, disablePastDays && {
-        before: new Date()
+        before: new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds())
       }, disableFutureDays && {
-        after: new Date()
+        after: new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds())
       }, disabledDays);
       var modifiersStyles = {
         selected: {
@@ -287,10 +305,10 @@ function (_React$Component) {
         selectedDays: (0, _typeof2.default)(value) === 'object' ? value : undefined,
         firstDayOfWeek: 1,
         fromMonth: minimumDate,
-        modifiers: {
+        modifiers: (0, _defineProperty2.default)({
           disabled: effectiveDisabledDays,
           selected: value
-        },
+        }, classes.currentDay, new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds())),
         modifiersStyles: modifiersStyles,
         month: currentMonth
       }, props, {
@@ -306,7 +324,8 @@ function (_React$Component) {
         }
       });
       return _react.default.createElement("div", {
-        className: classes.root
+        className: classes.root,
+        onKeyDown: this.handleKeyDown()
       }, _react.default.createElement(_DayPickerInput.default, {
         ref: function ref(el) {
           _this2.datePickerInput = el;
@@ -338,6 +357,7 @@ HiDatePicker.defaultProps = {
   locale: 'fr-FR',
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
+  timezoneName: 'Europe/Paris',
   translations: {
     today: 'today'
   }
@@ -406,6 +426,11 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSubmit: _propTypes.default.func,
 
+  /**
+   * Timezone de l'utilisateur
+   */
+  timezoneName: _propTypes.default.string,
+
   /**
    * Traductions
    */

package/HiDatePicker/HiDateRangePicker.js

@@ -27,6 +27,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+
 var _moment = _interopRequireDefault(require("react-day-picker/moment"));
 
 var _hiLocaleUtils = _interopRequireDefault(require("./hiLocaleUtils"));
@@ -55,8 +57,6 @@ var _HiForm = require("../HiForm");
 
 var _stylesheet = _interopRequireDefault(require("./stylesheet"));
 
-var _moment2 = _interopRequireDefault(require("moment"));
-
 var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
 
 var HiDateRangePicker =
@@ -105,9 +105,11 @@ function (_React$Component) {
     };
 
     _this.onDayToClick = function (day) {
-      var change = (0, _moment2.default)(day) >= (0, _moment2.default)(_this.props.from);
+      var change = (0, _momentTimezone.default)(day) >= (0, _momentTimezone.default)(_this.props.from);
+      var today = (0, _momentTimezone.default)().tz(_this.props.timezoneName);
+      var todayDate = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
 
-      if (change && _this.props.disableFutureDays && (0, _moment2.default)(day).utc() > (0, _moment2.default)().utc().endOf('day')) {
+      if (change && day > todayDate) {
         change = false;
       }
 
@@ -137,19 +139,22 @@ function (_React$Component) {
     };
 
     _this.handleChange = function (name, day) {
-      var translations = _this.props.translations;
+      var _this$props = _this.props,
+          translations = _this$props.translations,
+          timezoneName = _this$props.timezoneName;
       var date;
       var error;
-      var now = new Date();
-      var _this$props = _this.props,
-          minimumDate = _this$props.minimumDate,
-          disableFutureDays = _this$props.disableFutureDays,
-          format = _this$props.format;
+      var today = (0, _momentTimezone.default)().tz(timezoneName);
+      var now = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
+      var _this$props2 = _this.props,
+          minimumDate = _this$props2.minimumDate,
+          disableFutureDays = _this$props2.disableFutureDays,
+          format = _this$props2.format;
 
       if (day instanceof Date) {
         date = day;
       } else if (day) {
-        var parsedValue = (0, _moment2.default)(day, _this.props.format, true);
+        var parsedValue = (0, _momentTimezone.default)(day, _this.props.format, true);
 
         if (parsedValue.isValid()) {
           date = parsedValue.toDate();
@@ -159,14 +164,14 @@ function (_React$Component) {
       }
 
       if (date) {
-        var comparativeDate = name === 'to' ? (0, _moment2.default)(_this.props.from) : (0, _moment2.default)(_this.props.to);
+        var comparativeDate = name === 'to' ? (0, _momentTimezone.default)(_this.props.from) : (0, _momentTimezone.default)(_this.props.to);
 
-        if (name === 'to' && comparativeDate > (0, _moment2.default)(date) || name === 'from' && comparativeDate < (0, _moment2.default)(date)) {
+        if (name === 'to' && comparativeDate > (0, _momentTimezone.default)(date) || name === 'from' && comparativeDate < (0, _momentTimezone.default)(date)) {
           error = translations.to_superior_from;
-        } else if ((0, _moment2.default)(date).utc() < (0, _moment2.default)(minimumDate).utc().startOf('day')) {
-          error = translations.date_inferior_min_date.replace('%s', (0, _moment2.default)(minimumDate).format(format));
-        } else if (disableFutureDays && (0, _moment2.default)(date).utc() > (0, _moment2.default)(now).utc().endOf('day')) {
-          error = translations.date_superior_max_date.replace('%s', (0, _moment2.default)().format(format));
+        } else if ((0, _momentTimezone.default)(date).utc() < (0, _momentTimezone.default)(minimumDate).utc().startOf('day')) {
+          error = translations.date_inferior_min_date.replace('%s', (0, _momentTimezone.default)(minimumDate).format(format));
+        } else if (disableFutureDays && date > now) {
+          error = translations.date_superior_max_date.replace('%s', (0, _momentTimezone.default)().tz(timezoneName).format(format));
         }
 
         if (!_this.props.enableTime) {
@@ -216,13 +221,6 @@ function (_React$Component) {
 
     _this.handleReset = function (name) {
       _this.handleChange(name, undefined);
-
-      _this.setState(function (prevState) {
-        return {
-          keyFrom: prevState.keyFrom === 1 ? 2 : 1,
-          keyTo: prevState.keyTo === 1 ? 2 : 1
-        };
-      });
     };
 
     _this.handleKeyDown = function (name) {
@@ -251,6 +249,14 @@ function (_React$Component) {
               document.activeElement.blur();
             }, 1);
           }
+        } else if (event.key === 'Escape' && !event.shiftKey) {
+          if (name === 'from') {
+            _this.fromInput.hideDayPicker();
+          } else if (name === 'to') {
+            _this.toInput.hideDayPicker();
+          }
+
+          event.stopPropagation();
         }
       };
     };
@@ -347,12 +353,12 @@ function (_React$Component) {
       }, yearPickerProps, propsOverlay));
     };
 
+    var _today = (0, _momentTimezone.default)().tz(_this.props.timezoneName);
+
     _this.state = {
-      currentMonth: new Date(),
+      currentMonth: new Date(_today.year(), _today.month(), _today.date()),
       focusedInput: '',
-      openedPanel: 'calendar',
-      keyFrom: 1,
-      keyTo: 1
+      openedPanel: 'calendar'
     };
     return _this;
   }
@@ -368,35 +374,37 @@ function (_React$Component) {
       var _this2 = this,
           _classNames;
 
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          disabled = _this$props2.disabled,
-          disabledDays = _this$props2.disabledDays,
-          disableFutureDays = _this$props2.disableFutureDays,
-          enableTime = _this$props2.enableTime,
-          labelFrom = _this$props2.labelFrom,
-          labelTo = _this$props2.labelTo,
-          locale = _this$props2.locale,
-          format = _this$props2.format,
-          from = _this$props2.from,
-          fromError = _this$props2.fromError,
-          minimumDate = _this$props2.minimumDate,
-          onReset = _this$props2.onReset,
-          to = _this$props2.to,
-          toError = _this$props2.toError,
-          translations = _this$props2.translations,
-          id = _this$props2.id,
-          staticPosition = _this$props2.staticPosition,
-          errorText = _this$props2.errorText,
-          hasSelector = _this$props2.hasSelector,
-          helperIcon = _this$props2.helperIcon,
-          helperText = _this$props2.helperText,
-          props = (0, _objectWithoutProperties2.default)(_this$props2, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText"]);
-      var now = new Date();
-      var modifiers = {
+      var _this$props3 = this.props,
+          classes = _this$props3.classes,
+          disabled = _this$props3.disabled,
+          disabledDays = _this$props3.disabledDays,
+          disableFutureDays = _this$props3.disableFutureDays,
+          enableTime = _this$props3.enableTime,
+          labelFrom = _this$props3.labelFrom,
+          labelTo = _this$props3.labelTo,
+          locale = _this$props3.locale,
+          format = _this$props3.format,
+          from = _this$props3.from,
+          fromError = _this$props3.fromError,
+          minimumDate = _this$props3.minimumDate,
+          onReset = _this$props3.onReset,
+          to = _this$props3.to,
+          toError = _this$props3.toError,
+          translations = _this$props3.translations,
+          id = _this$props3.id,
+          staticPosition = _this$props3.staticPosition,
+          errorText = _this$props3.errorText,
+          hasSelector = _this$props3.hasSelector,
+          helperIcon = _this$props3.helperIcon,
+          helperText = _this$props3.helperText,
+          timezoneName = _this$props3.timezoneName,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText", "timezoneName"]);
+      var today = (0, _momentTimezone.default)().tz(timezoneName);
+      var now = new Date(today.year(), today.month(), today.date(), 23, 59, 59, 999);
+      var modifiers = (0, _defineProperty2.default)({
         start: from,
         end: to
-      };
+      }, classes.currentDay, new Date(today.year(), today.month(), today.date()));
       var modifiersStyles = {
         start: {
           borderTopLeftRadius: '50%',
@@ -514,7 +522,7 @@ function (_React$Component) {
         },
         onKeyDown: this.handleKeyDown('from')
       }, _react.default.createElement("div", null, _react.default.createElement(_DayPickerInput.default, {
-        key: this.state.keyFrom,
+        key: '1',
         ref: function ref(el) {
           _this2.fromInput = el;
         },
@@ -541,7 +549,7 @@ function (_React$Component) {
         },
         onKeyDown: this.handleKeyDown('to')
       }, _react.default.createElement(_DayPickerInput.default, {
-        key: this.state.keyTo,
+        key: '1',
         ref: function ref(el) {
           _this2.toInput = el;
         },
@@ -586,6 +594,7 @@ HiDateRangePicker.defaultProps = {
   locale: 'fr-FR',
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
+  timezoneName: 'Europe/Paris',
   translations: {
     today: 'today',
     hour: 'Hour',
@@ -717,6 +726,11 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   staticPosition: _propTypes.default.bool,
 
+  /**
+   * Timezone de l'utilisateur
+   */
+  timezoneName: _propTypes.default.string,
+
   /**
    * Date de fin sélectionnée
    */

package/HiDatePicker/HiDateRangeSelector.js

@@ -39,7 +39,7 @@ var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
-var _HiSelectField = _interopRequireDefault(require("../HiSelectNew/HiSelectField"));
+var _HiSelectField = _interopRequireDefault(require("../HiSelect/HiSelectField"));
 
 var _HiDateRangePicker = _interopRequireDefault(require("./HiDateRangePicker"));
 
@@ -243,23 +243,7 @@ function (_React$Component) {
           return _ref = {}, (0, _defineProperty2.default)(_ref, name, value), (0, _defineProperty2.default)(_ref, "key", prevState.key === 1 ? 2 : 1), _ref;
         });
 
-        var selectedOption = _this.options.find(function (option) {
-          return option.id === value;
-        });
-
-        if (selectedOption) {
-          _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);
-        }
-
-        if (_this.props.returnSelectValue === true) {
-          _this.props.onChange('period', value);
-        }
+        _this.updateDates(value);
       };
     };
 
@@ -282,15 +266,45 @@ function (_React$Component) {
         });
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+
+      if (prevProps.timezoneName !== this.props.timezoneName) {
+        this.options = this.props.availableOptionKeys.map(function (key) {
+          return buildDateRangeOptionByKey(key, _this2.props.translations, _this2.props.format, _this2.props.timezoneName);
+        });
+        this.updateDates(this.state.selectedPreset);
+      }
+    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       clearTimeout(this.timeout); // TODO : supprimer ?
     }
+  }, {
+    key: "updateDates",
+    value: function updateDates(value) {
+      var selectedOption = this.options.find(function (option) {
+        return option.id === value;
+      });
+
+      if (selectedOption) {
+        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);
+      }
+
+      if (this.props.returnSelectValue === true) {
+        this.props.onChange('period', value);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _this$props = this.props,
           disabled = _this$props.disabled,
@@ -329,7 +343,7 @@ function (_React$Component) {
         spacing: 8,
         className: classes.root,
         ref: function ref(container) {
-          _this2.container = container;
+          _this3.container = container;
         }
       }, _react.default.createElement(_Grid.default, {
         item: true,

package/HiDatePicker/stylesheet.js

@@ -184,23 +184,22 @@ var _default = function _default(theme) {
 
     /* default modifiers */
     // Added to the day's cell for the current day
-    today: {
-      // color: theme.palette.primary.light,
-      position: 'relative',
-      borderRadius: '50%',
-      color: "".concat(theme.palette.neutral.dark, " !important"),
-      fontWeight: theme.typography.fontWeightMedium,
-      '&:before': {
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        display: 'inline-block',
-        width: '100%',
-        height: '100%',
-        borderRadius: '50%',
-        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.neutral.main)
-      }
+    today: {// color: theme.palette.primary.light,
+      // position: 'relative',
+      // borderRadius: '50%',
+      // color: `${theme.palette.neutral.dark} !important`,
+      // fontWeight: theme.typography.fontWeightMedium,
+      // '&:before': {
+      //     content: '""',
+      //     position: 'absolute',
+      //     top: 0,
+      //     left: 0,
+      //     display: 'inline-block',
+      //     width: '100%',
+      //     height: '100%',
+      //     borderRadius: '50%',
+      //     boxShadow: `inset 0 0 0 2px ${theme.palette.neutral.main}`,
+      // },
     },
     // Added to the day's cell outside the current month
     outside: {
@@ -228,6 +227,22 @@ var _default = function _default(theme) {
       color: theme.palette.primary.contrastText,
       borderRadius: '0%',
       border: 'none'
+    },
+    currentDay: {
+      position: 'relative',
+      color: "".concat(theme.palette.neutral.dark, " !important"),
+      fontWeight: theme.typography.fontWeightMedium,
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        display: 'inline-block',
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.neutral.main)
+      }
     }
   };
 };