@hipay/hipay-material-ui 2.0.0-beta.74 → 2.0.0-beta.76

package/CHANGELOG.md

@@ -1,3 +1,156 @@
+# [2.0.0-beta.76](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.76) (2019-07-18)
+
+
+### Bug Fixes
+
+* **eslint:** remove eslint warrnings in components (ignore test files) ([d236c62](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d236c62))
+* **HiAlertModal:** Correct styles and buttons positions ([2cfa2a9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2cfa2a9))
+* **HiAlertModal:** Title is not required anymore and will not create warning ([4019d33](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4019d33))
+* **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))
+* **HiDynamicSelect:** remove onSelect override ([b803044](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b803044))
+* **HiExpansionPanel:** fix props propagation collapseDisable || expanded ([eb18a96](https://gitlab.hipay.org/backend/hipay-material-ui/commit/eb18a96))
+* **HiExpansionPanel:** Fix props type a requirement ([cbc3b48](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cbc3b48))
+* **HiInput:** forward event in onClick ([be94fe0](https://gitlab.hipay.org/backend/hipay-material-ui/commit/be94fe0))
+* **HiInput:** handle focus state through prop when needed to override default comportment ([9a133cc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a133cc))
+* **HiInput:** rename prop to spellCheck ([c11939f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c11939f))
+* **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:** Forward event in onBlur ([76c6778](https://gitlab.hipay.org/backend/hipay-material-ui/commit/76c6778))
+* **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))
+* **HiSelectableList:** Add lazy props to activate lazyloading (default true) and fix unit tests ([b41f8d2](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b41f8d2))
+* **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))
+* **HiTable:** Fix test ([9a009a8](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a009a8))
+* **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))
+* **HiInput:** Add inputProps to enable passing props directly to input element ([d57466c](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d57466c))
+* **HiInput:** add spellcheck property ([b2feac3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b2feac3))
+* **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
+
+
+
+# [2.0.0-beta.74](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.74) (2019-07-02)
+
+
+### Bug Fixes
+
+* **eslint:** remove eslint warrnings in components (ignore test files) ([d236c62](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d236c62))
+* **HiAlertModal:** Correct styles and buttons positions ([2cfa2a9](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2cfa2a9))
+* **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))
+* **HiDynamicSelect:** remove onSelect override ([b803044](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b803044))
+* **HiExpansionPanel:** fix props propagation collapseDisable || expanded ([eb18a96](https://gitlab.hipay.org/backend/hipay-material-ui/commit/eb18a96))
+* **HiExpansionPanel:** Fix props type a requirement ([cbc3b48](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cbc3b48))
+* **HiInput:** forward event in onClick ([be94fe0](https://gitlab.hipay.org/backend/hipay-material-ui/commit/be94fe0))
+* **HiInput:** handle focus state through prop when needed to override default comportment ([9a133cc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a133cc))
+* **HiInput:** rename prop to spellCheck ([c11939f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c11939f))
+* **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:** Forward event in onBlur ([76c6778](https://gitlab.hipay.org/backend/hipay-material-ui/commit/76c6778))
+* **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))
+* **HiSelectableList:** Add lazy props to activate lazyloading (default true) and fix unit tests ([b41f8d2](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b41f8d2))
+* **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))
+* **HiTable:** Fix test ([9a009a8](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a009a8))
+* **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))
+* **HiInput:** Add inputProps to enable passing props directly to input element ([d57466c](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d57466c))
+* **HiInput:** add spellcheck property ([b2feac3](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b2feac3))
+* **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
+
+
+
 # [2.0.0-beta.74](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.74) (2019-06-06)
 
 

package/HiAlertModal/HiAlertModal.js

@@ -161,7 +161,7 @@ function (_React$PureComponent) {
         color: theme.palette.background2,
         icon: backgroundIcon,
         size: iconSize
-      })), _react.default.createElement(_DialogTitle.default, {
+      })), title && _react.default.createElement(_DialogTitle.default, {
         disableTypography: true,
         classes: {
           root: classes.classTitle

package/HiChip/HiChip.js

@@ -130,6 +130,8 @@ function HiChip(props) {
       id = props.id,
       img = props.img,
       label = props.label,
+      onClick = props.onClick,
+      onKeyDown = props.onKeyDown,
       onPrevious = props.onPrevious,
       onNext = props.onNext,
       onDelete = props.onDelete,
@@ -143,8 +145,12 @@ function HiChip(props) {
       titlePrevious = props.titlePrevious;
   return _react.default.createElement("div", {
     id: id,
+    role: 'button',
     className: (0, _classnames.default)(classes.root, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames, classes.leftIcon, icon), _classNames)),
-    title: title
+    title: title,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    tabIndex: "0"
   }, icon && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
     icon: icon,
@@ -247,6 +253,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
 
+  /**
+   * Fonction de callback au clic sur la chip
+   */
+  onClick: _propTypes.default.func,
+
   /**
    * Fonction de callback au clic sur l'icon close si cancelable = true
    */
@@ -257,6 +268,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onIconClick: _propTypes.default.func,
 
+  /**
+   * Fonction de callback à l'appui sur une touche du clavier
+   */
+  onKeyDown: _propTypes.default.func,
+
   /**
    * Fonction de callback au clic sur l'icon next
    */

package/HiDatePicker/HiDatePicker.js

@@ -23,8 +23,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -59,6 +57,14 @@ var _HiTextField = _interopRequireDefault(require("../HiForm/HiTextField"));
 
 var _stylesheet = _interopRequireDefault(require("./stylesheet"));
 
+var _reactDeviceDetect = require("react-device-detect");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
+
+var _HiDatePickerMobile = _interopRequireDefault(require("./HiDatePickerMobile"));
+
 var HiDatePicker =
 /*#__PURE__*/
 function (_React$Component) {
@@ -70,6 +76,10 @@ function (_React$Component) {
     (0, _classCallCheck2.default)(this, HiDatePicker);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDatePicker).call(this));
 
+    _this.handleInputChange = function (event) {
+      _this.props.onChange(event.target.value);
+    };
+
     _this.handleKeyDown = function (name) {
       return function (event) {
         if (event.key === 'Escape' && !event.shiftKey) {
@@ -80,182 +90,160 @@ function (_React$Component) {
       };
     };
 
-    var today = (0, _momentTimezone.default)().tz(props.timezoneName);
-    _this.state = {
-      openedPanel: 'calendar',
-      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)(_this));
-    _this.handleClockClick = _this.handleClockClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleMonthClick = _this.handleMonthClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleYearClick = _this.handleYearClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleDayChange = _this.handleDayChange.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleCurrentMonthChange = _this.handleCurrentMonthChange.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleTimeChange = _this.handleTimeChange.bind((0, _assertThisInitialized2.default)(_this));
-    _this.openPanel = _this.openPanel.bind((0, _assertThisInitialized2.default)(_this));
-    _this.renderCaption = _this.renderCaption.bind((0, _assertThisInitialized2.default)(_this));
-    _this.renderOverlay = _this.renderOverlay.bind((0, _assertThisInitialized2.default)(_this));
-    _this.renderMonthPickerOverlay = _this.renderMonthPickerOverlay.bind((0, _assertThisInitialized2.default)(_this));
-    _this.renderTimePickerOverlay = _this.renderTimePickerOverlay.bind((0, _assertThisInitialized2.default)(_this));
-    _this.renderYearPickerOverlay = _this.renderYearPickerOverlay.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleInputChange = _this.handleInputChange.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  }
+    _this.handleReset = function () {
+      var today = (0, _momentTimezone.default)().tz(_this.props.timezoneName);
 
-  (0, _createClass2.default)(HiDatePicker, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      clearTimeout(this.timeout);
-    }
-  }, {
-    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) {
+      _this.handleCurrentMonthChange(new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()));
+
+      _this.props.onReset();
+    };
+
+    _this.handleDayChange = function (day, modifiers) {
       if (day) {
         if (modifiers.selected) {
           // Deselect day
-          this.props.onChange(undefined);
+          _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());
+          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);
+          _this.props.onChange(day);
         }
 
-        if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
+        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) {
+        } else if (day instanceof Date && _this.props.enableTime && modifiers.selected !== true) {
           // Open Time panel after date selection
-          this.openPanel('time');
+          _this.openPanel('time');
         }
       }
-    }
-  }, {
-    key: "handleCalendarClick",
-    value: function handleCalendarClick() {
-      this.openPanel('calendar');
-    }
-  }, {
-    key: "handleClockClick",
-    value: function handleClockClick() {
-      this.openPanel('time');
-    }
-  }, {
-    key: "handleMonthClick",
-    value: function handleMonthClick() {
-      this.openPanel('months');
-    }
-  }, {
-    key: "handleYearClick",
-    value: function handleYearClick() {
-      this.openPanel('years');
-    }
-  }, {
-    key: "handleCurrentMonthChange",
-    value: function handleCurrentMonthChange(day) {
-      this.setState({
+    };
+
+    _this.handleChangeMobile = function (event) {
+      var date;
+
+      if (event.target.value) {
+        date = new Date(event.target.value);
+      }
+
+      _this.props.onChange(date);
+    };
+
+    _this.handleCalendarClick = function () {
+      _this.openPanel('calendar');
+    };
+
+    _this.handleClockClick = function () {
+      _this.openPanel('time');
+    };
+
+    _this.handleMonthClick = function () {
+      _this.openPanel('months');
+    };
+
+    _this.handleYearClick = function () {
+      _this.openPanel('years');
+    };
+
+    _this.handleCurrentMonthChange = function (day) {
+      _this.setState({
         // Current Month can't be anterior to minimumDate
-        currentMonth: day < this.props.minimumDate ? this.props.minimumDate : day,
+        currentMonth: day < _this.props.minimumDate ? _this.props.minimumDate : day,
         openedPanel: 'calendar'
       });
-    }
-  }, {
-    key: "handleTimeChange",
-    value: function handleTimeChange(date, precision) {
-      this.props.onChange(date);
+    };
+
+    _this.handleTimeChange = function (date, precision) {
+      _this.props.onChange(date);
 
       if (date instanceof Date && precision === 'minute') {
         document.activeElement.blur();
       }
-    }
-  }, {
-    key: "openPanel",
-    value: function openPanel(panel) {
-      this.setState({
+    };
+
+    _this.openPanel = function (panel) {
+      _this.setState({
         openedPanel: panel
       });
-    }
-  }, {
-    key: "renderCaption",
-    value: function renderCaption(propsCaption) {
+    };
+
+    _this.renderCaption = function (propsCaption) {
       return _react.default.createElement(_Caption.default, (0, _extends2.default)({
-        onMonthClick: this.handleMonthClick,
-        onYearClick: this.handleYearClick
+        onMonthClick: _this.handleMonthClick,
+        onYearClick: _this.handleYearClick
       }, propsCaption));
-    }
-  }, {
-    key: "renderOverlay",
-    value: function renderOverlay(propsOverlay) {
-      switch (this.state.openedPanel) {
+    };
+
+    _this.renderOverlay = function (propsOverlay) {
+      switch (_this.state.openedPanel) {
         case 'time':
-          return this.renderTimePickerOverlay(propsOverlay);
+          return _this.renderTimePickerOverlay(propsOverlay);
 
         case 'months':
-          return this.renderMonthPickerOverlay(propsOverlay);
+          return _this.renderMonthPickerOverlay(propsOverlay);
 
         case 'years':
-          return this.renderYearPickerOverlay(propsOverlay);
+          return _this.renderYearPickerOverlay(propsOverlay);
 
         case 'calendar':
         default:
           return _react.default.createElement(_Overlay.default, propsOverlay);
       }
-    }
-  }, {
-    key: "renderMonthPickerOverlay",
-    value: function renderMonthPickerOverlay(propsOverlay) {
+    };
+
+    _this.renderMonthPickerOverlay = function (propsOverlay) {
       var monthPickerProps = {
-        value: this.state.currentMonth,
-        onChange: this.handleCurrentMonthChange
+        value: _this.state.currentMonth,
+        onChange: _this.handleCurrentMonthChange
       };
       return _react.default.createElement(_MonthPickerOverlay.default, (0, _extends2.default)({
         key: 'month-picker-overlay'
       }, monthPickerProps, propsOverlay));
-    }
-  }, {
-    key: "renderTimePickerOverlay",
-    value: function renderTimePickerOverlay(propsOverlay) {
+    };
+
+    _this.renderTimePickerOverlay = function (propsOverlay) {
       var timePickerProps = {
-        value: this.props.value,
-        onChange: this.handleTimeChange,
-        onCalendarClick: this.handleCalendarClick
+        value: _this.props.value,
+        onChange: _this.handleTimeChange,
+        onCalendarClick: _this.handleCalendarClick
       };
       return _react.default.createElement(_TimePickerOverlay.default, (0, _extends2.default)({
         key: 'time-picker-overlay'
       }, timePickerProps, propsOverlay));
-    }
-  }, {
-    key: "renderYearPickerOverlay",
-    value: function renderYearPickerOverlay(propsOverlay) {
+    };
+
+    _this.renderYearPickerOverlay = function (propsOverlay) {
       var yearPickerProps = {
-        value: this.state.currentMonth,
-        onChange: this.handleCurrentMonthChange,
-        disableFutureDays: this.props.disableFutureDays,
-        minimumDate: this.props.minimumDate
+        value: _this.state.currentMonth,
+        onChange: _this.handleCurrentMonthChange,
+        disableFutureDays: _this.props.disableFutureDays,
+        minimumDate: _this.props.minimumDate
       };
       return _react.default.createElement(_YearPickerOverlay.default, (0, _extends2.default)({
         key: 'year-picker-overlay'
       }, yearPickerProps, propsOverlay));
+    };
+
+    var _today = (0, _momentTimezone.default)().tz(props.timezoneName);
+
+    _this.state = {
+      openedPanel: 'calendar',
+      currentMonth: props.value ? props.value : new Date(_today.year(), _today.month(), _today.date(), _today.hours(), _today.minutes(), _today.seconds(), _today.milliseconds())
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiDatePicker, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.timeout);
     }
   }, {
     key: "render",
@@ -327,7 +315,7 @@ function (_React$Component) {
       return _react.default.createElement("div", {
         className: classes.root,
         onKeyDown: this.handleKeyDown()
-      }, _react.default.createElement(_DayPickerInput.default, {
+      }, !_reactDeviceDetect.isMobile ? _react.default.createElement(_DayPickerInput.default, {
         ref: function ref(el) {
           _this2.datePickerInput = el;
         },
@@ -342,6 +330,23 @@ function (_React$Component) {
         formatDate: _moment.default.formatDate,
         parseDate: _moment.default.parseDate,
         onDayChange: this.handleDayChange
+      }) : _react.default.createElement(_HiDatePickerMobile.default, {
+        id: this.props.id,
+        label: this.props.label,
+        required: this.props.required,
+        disabled: this.props.disabled,
+        error: this.props.error,
+        errorText: this.props.errorText,
+        helperText: this.props.helperText,
+        helperIcon: this.props.helperIcon,
+        enableTime: enableTime,
+        value: value,
+        onChange: this.handleChangeMobile,
+        disablePastDays: disablePastDays,
+        disableFutureDays: disableFutureDays,
+        today: today,
+        minimumDate: minimumDate,
+        format: enableTime ? "".concat(format, " HH:mm") : format
       }));
     }
   }]);