@hipay/hipay-material-ui 1.0.0-beta.13 → 1.0.0-beta.15

package/HiBreadcrumb/HiStepIcon.js

@@ -55,6 +55,56 @@ var styles = exports.styles = function styles(theme) {
             marginLeft: 6,
             display: 'inline-block'
         },
+        dotAround: {
+            border: '2px solid ' + theme.palette.neutral.normal,
+            backgroundColor: 'transparent',
+            borderRadius: '100%',
+            width: 16,
+            height: 16,
+            marginLeft: 6,
+            '&:hover': {
+                transform: 'scale(1.2)'
+            }
+        },
+        dot: {
+            backgroundColor: theme.palette.neutral.normal,
+            borderRadius: '100%',
+            width: 6,
+            height: 6,
+            '&:hover': {
+                transform: 'scale(1.2)'
+            },
+            marginLeft: 8
+        },
+        activeStep: {
+            marginTop: 3,
+            marginLeft: 3,
+            width: 6,
+            height: 6,
+            '&:hover': {
+                transform: 'scale(1)'
+            }
+        },
+        dotValidated: {
+            backgroundColor: theme.palette.status[116],
+            border: '2px solid ' + theme.palette.status[116]
+        },
+        dotRefused: {
+            backgroundColor: theme.palette.error.main,
+            border: '2px solid ' + theme.palette.error.main
+        },
+        dotWarning: {
+            backgroundColor: theme.palette.middle.normal,
+            border: '2px solid ' + theme.palette.middle.normal
+        },
+        dotActive: {
+            backgroundColor: '#00ADE9',
+            border: '2px solid ' + '#00ADE9'
+        },
+        dotLight: {
+            backgroundColor: '#FFFFFF',
+            border: '2px solid ' + '#FFFFFF'
+        },
         validated: {
             border: 'solid 2px ' + theme.palette.status[116]
         },
@@ -65,22 +115,10 @@ var styles = exports.styles = function styles(theme) {
             border: 'solid 2px ' + theme.palette.middle.normal
         },
         active: {
-            border: '5px solid rgba(255, 0, 0, 0)',
-            backgroundClip: 'padding-box',
-            boxShadow: '0 0 0 1px ' + theme.palette.neutral.normal,
-            backgroundColor: theme.palette.neutral.normal
-        },
-        activeValidated: {
-            boxShadow: '0 0 0 1px ' + theme.palette.status[116],
-            backgroundColor: theme.palette.status[116]
-        },
-        activeRefused: {
-            boxShadow: '0 0 0 1px ' + theme.palette.negative.normal,
-            backgroundColor: theme.palette.negative.normal
+            border: 'solid 2px #00ADE9'
         },
-        activeWarning: {
-            boxShadow: '0 0 0 1px ' + theme.palette.middle.normal,
-            backgroundColor: theme.palette.middle.normal
+        light: {
+            border: 'solid 2px ' + '#FFFFFF'
         }
     };
 };
@@ -96,22 +134,42 @@ var HiStepIcon = function (_React$PureComponent) {
     (0, _createClass3.default)(HiStepIcon, [{
         key: 'render',
         value: function render() {
-            var _classNames;
+            var _classNames, _classNames2, _classNames3;
 
             var _props = this.props,
                 active = _props.active,
                 classes = _props.classes,
-                status = _props.status;
+                status = _props.status,
+                type = _props.type;
 
 
-            return _react2.default.createElement('div', {
-                className: (0, _classnames2.default)(classes.circle, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.activeRefused, status === 'refused' && active), (0, _defineProperty3.default)(_classNames, classes.activeValidated, status === 'validated' && active), (0, _defineProperty3.default)(_classNames, classes.activeWarning, status === 'warning' && active), (0, _defineProperty3.default)(_classNames, classes.active, active), (0, _defineProperty3.default)(_classNames, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames, classes.warning, status === 'warning'), _classNames))
-            });
+            var dotAroundClass = (0, _classnames2.default)(classes.dotAround, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames, classes.warning, status === 'warning'), (0, _defineProperty3.default)(_classNames, classes.active, status === 'active'), (0, _defineProperty3.default)(_classNames, classes.light, type === 'front-light'), _classNames));
+
+            var innerDotClass = (0, _classnames2.default)(classes.dot, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.activeStep, active), (0, _defineProperty3.default)(_classNames2, classes.dotValidated, status === 'validated'), (0, _defineProperty3.default)(_classNames2, classes.dotRefused, status === 'refused'), (0, _defineProperty3.default)(_classNames2, classes.dotWarning, status === 'warning'), (0, _defineProperty3.default)(_classNames2, classes.dotActive, status === 'active'), (0, _defineProperty3.default)(_classNames2, classes.dotLight, type === 'front-light'), _classNames2));
+
+            var dotClassName = (0, _classnames2.default)(classes.circle, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames3, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames3, classes.warning, status === 'warning'), (0, _defineProperty3.default)(_classNames3, classes.active, status === 'active'), (0, _defineProperty3.default)(_classNames3, classes.light, type === 'front-light'), _classNames3));
+
+            return _react2.default.createElement(
+                'div',
+                null,
+                active && _react2.default.createElement(
+                    'div',
+                    { className: dotAroundClass },
+                    _react2.default.createElement('div', { className: innerDotClass })
+                ),
+                !active && _react2.default.createElement('div', { className: dotClassName })
+            );
         }
     }]);
     return HiStepIcon;
 }(_react2.default.PureComponent);
 
+HiStepIcon.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    type: 'back',
+    classes: {}
+};
 HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Whether this step is active.
@@ -121,14 +179,13 @@ HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object.isRequired,
-
-    status: _propTypes2.default.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
+    /**
+     * The type of Breadcrumb used
+     */
+    type: _propTypes2.default.oneOf(['back', 'front-light', 'front-dark']),
+    /**
+     * The status of the step in case of back or front-dark type Breadcrumb
+     */
+    status: _propTypes2.default.oneOf(['refused', 'validated', 'warning', 'unreviewed', 'active'])
 } : {};
-
-HiStepIcon.defaultProps = {
-    active: false,
-    status: 'unreviewed',
-    classes: {}
-};
-
 exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);

package/HiBreadcrumb/HiStepLabel.js

@@ -13,6 +13,26 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -45,26 +65,45 @@ var styles = exports.styles = function styles(theme) {
     return {
         root: {
             display: 'flex',
-            alignItems: 'center'
+            alignItems: 'center',
+            marginTop: -11,
+            marginBottom: -5
         },
-        test: {
-            marginLeft: '0 '
+        frontRoot: {
+            marginTop: -12,
+            marginBottom: -7
         },
-        vertical: {
-            marginTop: -10,
+        frontDarkRoot: {
+            marginTop: -13,
             marginBottom: -6
         },
+        hipin: {
+            marginLeft: 0
+        },
         label: (0, _extends3.default)({
             display: 'inline-block',
             marginLeft: 4,
             fontWeight: theme.typography.fontWeightRegular,
             color: theme.palette.neutral.normal,
-            marginBottom: -4
+            marginBottom: -4,
+            '&:hover': {
+                cursor: 'pointer'
+            }
         }, theme.typography.body3),
         labelContainer: {
-            marginBottom: 4,
+            marginBottom: 4
+        },
+        largeLabelContainer: {
+            maxWidth: 300
+        },
+        shortLabelContainer: {
             maxWidth: 160
         },
+        frontLabel: {
+            fontSize: 18,
+            fontWeight: theme.typography.fontWeightLight,
+            marginLeft: 11
+        },
         validated: {
             color: theme.palette.status[116]
         },
@@ -72,11 +111,17 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.negative.normal
         },
         active: {
+            color: '#00ADE9'
+        },
+        activeStep: {
             fontWeight: theme.typography.fontWeightMedium
         },
         warning: {
             color: theme.palette.middle.normal
         },
+        light: {
+            color: '#FFFFFF'
+        },
         pin: {
             marginLeft: 4
         },
@@ -97,56 +142,78 @@ var styles = exports.styles = function styles(theme) {
     };
 };
 
-function HiStepLabel(props) {
-    var _classNames2;
-
-    var active = props.active,
-        children = props.children,
-        classes = props.classes,
-        classNameProp = props.className,
-        icon = props.icon,
-        notificationNumber = props.notificationNumber,
-        orientation = props.orientation,
-        status = props.status,
-        other = (0, _objectWithoutProperties3.default)(props, ['active', 'children', 'classes', 'className', 'icon', 'notificationNumber', 'orientation', 'status']);
-
-
-    return _react2.default.createElement(
-        'span',
-        (0, _extends3.default)({
-            className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.vertical, orientation === 'vertical'), classNameProp)
-        }, other),
-        icon && _react2.default.createElement(
-            'span',
-            { className: classes.iconContainer },
-            _react2.default.createElement(_HiStepIcon2.default, { active: active, status: status })
-        ),
-        _react2.default.createElement(
-            'span',
-            { className: classes.labelContainer },
-            _react2.default.createElement(
-                'div',
-                {
-                    className: (0, _classnames2.default)(classes.label, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames2, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames2, classes.warning, status === 'warning'), (0, _defineProperty3.default)(_classNames2, classes.active, active), (0, _defineProperty3.default)(_classNames2, classes.shortEllipsis, notificationNumber > 0), (0, _defineProperty3.default)(_classNames2, classes.longEllipsis, notificationNumber === 0), _classNames2))
-                },
-                children
-            ),
-            notificationNumber > 0 && _react2.default.createElement(
+var HiStepLabel = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStepLabel, _React$PureComponent);
+
+    function HiStepLabel() {
+        (0, _classCallCheck3.default)(this, HiStepLabel);
+        return (0, _possibleConstructorReturn3.default)(this, (HiStepLabel.__proto__ || (0, _getPrototypeOf2.default)(HiStepLabel)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiStepLabel, [{
+        key: 'render',
+        value: function render() {
+            var _classNames, _classNames2, _classNames3;
+
+            var _props = this.props,
+                active = _props.active,
+                children = _props.children,
+                classes = _props.classes,
+                classNameProp = _props.className,
+                notificationNumber = _props.notificationNumber,
+                status = _props.status,
+                type = _props.type,
+                other = (0, _objectWithoutProperties3.default)(_props, ['active', 'children', 'classes', 'className', 'notificationNumber', 'status', 'type']);
+
+
+            return _react2.default.createElement(
                 'span',
-                { className: classes.pin },
+                (0, _extends3.default)({
+                    className: (0, _classnames2.default)(classes.root, classNameProp, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.frontRoot, type === 'front-light'), (0, _defineProperty3.default)(_classNames, classes.frontDarkRoot, type === 'front-dark'), _classNames))
+                }, other),
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.iconContainer },
+                    _react2.default.createElement(_HiStepIcon2.default, { active: active, status: status, type: type })
+                ),
                 _react2.default.createElement(
-                    _HiPins2.default,
+                    'span',
                     {
-                        color: props.theme.palette.business.primary.normal,
-                        className: classes.test
+                        className: (0, _classnames2.default)(classes.labelContainer, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.largeLabelContainer, type !== 'back'), (0, _defineProperty3.default)(_classNames2, classes.shortLabelContainer, type === 'back'), _classNames2))
                     },
-                    notificationNumber
+                    _react2.default.createElement(
+                        'div',
+                        {
+                            className: (0, _classnames2.default)(classes.label, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames3, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames3, classes.warning, status === 'warning'), (0, _defineProperty3.default)(_classNames3, classes.active, status === 'active'), (0, _defineProperty3.default)(_classNames3, classes.light, type === 'front-light'), (0, _defineProperty3.default)(_classNames3, classes.activeStep, active), (0, _defineProperty3.default)(_classNames3, classes.frontLabel, type !== 'back'), (0, _defineProperty3.default)(_classNames3, classes.shortEllipsis, notificationNumber > 0), (0, _defineProperty3.default)(_classNames3, classes.longEllipsis, notificationNumber === 0 && type === 'back'), _classNames3))
+                        },
+                        children
+                    ),
+                    notificationNumber > 0 && _react2.default.createElement(
+                        'span',
+                        { className: classes.pin },
+                        _react2.default.createElement(
+                            _HiPins2.default,
+                            {
+                                color: this.props.theme.palette.business.primary.normal,
+                                className: classes.hipin
+                            },
+                            notificationNumber
+                        )
+                    )
                 )
-            )
-        )
-    );
-}
+            );
+        }
+    }]);
+    return HiStepLabel;
+}(_react2.default.PureComponent);
 
+HiStepLabel.defaultProps = {
+    active: false,
+    children: '',
+    notificationNumber: 0,
+    status: 'unreviewed',
+    type: 'back'
+};
 HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * @ignore
@@ -166,17 +233,16 @@ HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     className: _propTypes2.default.string,
     /**
-     * @ignore
+     * The value to be displayed in the HiPin on the right of the label
      */
-    orientation: _propTypes2.default.oneOf(['horizontal', 'vertical']),
-
-    status: _propTypes2.default.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
+    notificationNumber: _propTypes2.default.number,
+    /**
+     * 'Unreviewed', 'refused', 'validated' et 'warning' sont les statuts pour tous les types de breadcrumb. 'active' est spécifique au Front dark
+     */
+    status: _propTypes2.default.oneOf(['unreviewed', 'refused', 'validated', 'warning', 'active']),
+    /**
+     * The Breadcrumb type
+     */
+    type: _propTypes2.default.oneOf(['back', 'front-light', 'front-dark'])
 } : {};
-
-HiStepLabel.defaultProps = {
-    active: false,
-    status: 'unreviewed',
-    orientation: 'vertical'
-};
-
 exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);

package/HiBreadcrumb/HiStepper.js

@@ -9,10 +9,6 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
 
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -56,10 +52,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles(theme) {
     return {
         root: {
-            display: 'flex',
-            padding: theme.spacing.unit * 3,
-            maxWidth: 160,
-            flexDirection: 'column'
+            width: 340
         }
     };
 };
@@ -78,13 +71,9 @@ var HiStepper = function (_React$PureComponent) {
             var _props = this.props,
                 activeStep = _props.activeStep,
                 children = _props.children,
-                classes = _props.classes,
-                classNameProp = _props.className,
-                other = (0, _objectWithoutProperties3.default)(_props, ['activeStep', 'children', 'classes', 'className']);
+                classes = _props.classes;
 
 
-            var className = (0, _classnames2.default)(classes.root, classNameProp);
-
             var childrenArray = _react2.default.Children.toArray(children.props.children);
 
             var steps = childrenArray.map(function (step, index) {
@@ -92,8 +81,8 @@ var HiStepper = function (_React$PureComponent) {
             });
 
             return _react2.default.createElement(
-                _Paper2.default,
-                (0, _extends3.default)({ square: true, elevation: 0, className: className }, other),
+                'div',
+                { className: classes.root },
                 steps
             );
         }
@@ -112,14 +101,6 @@ HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Two or more `<Step />` components.
      */
-    children: _propTypes2.default.node.isRequired,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: _propTypes2.default.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: _propTypes2.default.string
+    children: _propTypes2.default.node.isRequired
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepper' })(HiStepper);

package/HiDatePicker/HiDateRangePicker.js

@@ -50,6 +50,10 @@ var _DayPickerInput = require('react-day-picker/DayPickerInput');
 
 var _DayPickerInput2 = _interopRequireDefault(_DayPickerInput);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _withStyles = require('../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -92,6 +96,8 @@ var _stylesheet2 = _interopRequireDefault(_stylesheet);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+//  weak
+
 var HiDateRangePicker = function (_React$Component) {
     (0, _inherits3.default)(HiDateRangePicker, _React$Component);
 
@@ -100,11 +106,16 @@ var HiDateRangePicker = function (_React$Component) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiDateRangePicker.__proto__ || (0, _getPrototypeOf2.default)(HiDateRangePicker)).call(this));
 
+        _this.handleDayPickerFocus = function (name) {
+            return function () {
+                _this.setState({ focusedInput: name });
+            };
+        };
+
         _this.state = {
-            fromOpenedPanel: 'calendar',
             fromCurrentMonth: props.from ? props.from : new Date(),
-            toOpenedPanel: 'calendar',
-            toCurrentMonth: props.to ? props.to : new Date()
+            toCurrentMonth: props.to ? props.to : new Date(),
+            focusedInput: ''
         };
 
         _this.handleReset = _this.handleReset.bind(_this);
@@ -128,6 +139,8 @@ var HiDateRangePicker = function (_React$Component) {
         _this.handleYearClick = _this.handleYearClick.bind(_this);
         _this.handleYearClickFrom = _this.handleYearClickFrom.bind(_this);
         _this.handleYearClickTo = _this.handleYearClickTo.bind(_this);
+        _this.handleDayPickerFocus = _this.handleDayPickerFocus.bind(_this);
+        _this.handleDayPickerBlur = _this.handleDayPickerBlur.bind(_this);
 
         _this.openPanel = _this.openPanel.bind(_this);
 
@@ -324,6 +337,11 @@ var HiDateRangePicker = function (_React$Component) {
                 document.activeElement.blur();
             }
         }
+    }, {
+        key: 'handleDayPickerBlur',
+        value: function handleDayPickerBlur() {
+            this.setState({ focusedInput: '' });
+        }
     }, {
         key: 'openPanel',
         value: function openPanel(name, panel) {
@@ -367,9 +385,10 @@ var HiDateRangePicker = function (_React$Component) {
         }
     }, {
         key: 'renderOverlay',
-        value: function renderOverlay(name, propsOverlay) {
+        value: function renderOverlay(name, propsOverlay, staticPosition) {
             var rangeOverlayProps = (0, _extends3.default)({}, propsOverlay, {
-                side: name
+                side: name,
+                staticPosition: staticPosition
             });
 
             switch (this.state[name + 'OpenedPanel']) {
@@ -387,12 +406,12 @@ var HiDateRangePicker = function (_React$Component) {
     }, {
         key: 'renderOverlayFrom',
         value: function renderOverlayFrom(propsOverlay) {
-            return this.renderOverlay('from', propsOverlay);
+            return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
         }
     }, {
         key: 'renderOverlayTo',
         value: function renderOverlayTo(propsOverlay) {
-            return this.renderOverlay('to', propsOverlay);
+            return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
         }
     }, {
         key: 'renderMonthPickerOverlay',
@@ -439,7 +458,8 @@ var HiDateRangePicker = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this6 = this;
+            var _this6 = this,
+                _classNames;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -457,7 +477,8 @@ var HiDateRangePicker = function (_React$Component) {
                 to = _props.to,
                 translations = _props.translations,
                 id = _props.id,
-                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
+                staticPosition = _props.staticPosition,
+                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id', 'staticPosition']);
             var _state = this.state,
                 fromCurrentMonth = _state.fromCurrentMonth,
                 toCurrentMonth = _state.toCurrentMonth;
@@ -575,32 +596,47 @@ var HiDateRangePicker = function (_React$Component) {
                 id: id + '-to'
             });
 
+            var fromClass = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'to'), (0, _defineProperty3.default)(_classNames, classes.dayPickerMargin, staticPosition === true && this.state.focusedInput === 'to'), _classNames));
+            var toClass = (0, _classnames2.default)(classes.toInput, (0, _defineProperty3.default)({}, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'));
+
             return _react2.default.createElement(
                 'div',
                 { className: classes.root },
                 _react2.default.createElement(
                     'div',
-                    { className: classes.fromInput },
-                    _react2.default.createElement(_DayPickerInput2.default, {
-                        ref: function ref(el) {
-                            _this6.fromInput = el;
-                        },
-                        value: from,
-                        hideOnDayClick: false,
-                        overlayComponent: this.renderOverlayFrom,
-                        dayPickerProps: fromDayPickerProps,
-                        component: _HiForm.HiTextField,
-                        inputProps: fromInputProps,
-                        format: enableTime ? format + ' HH:mm' : format,
-                        formatDate: _moment.formatDate,
-                        parseDate: _moment.parseDate,
-                        onDayChange: this.handleDayChangeFrom,
-                        placeholder: ''
-                    })
+                    {
+                        className: classes.fromInput,
+                        onFocus: this.handleDayPickerFocus('from'),
+                        onBlur: this.handleDayPickerBlur
+                    },
+                    _react2.default.createElement(
+                        'div',
+                        { className: fromClass },
+                        _react2.default.createElement(_DayPickerInput2.default, {
+                            ref: function ref(el) {
+                                _this6.fromInput = el;
+                            },
+                            value: from,
+                            hideOnDayClick: false,
+                            overlayComponent: this.renderOverlayFrom,
+                            dayPickerProps: fromDayPickerProps,
+                            component: _HiForm.HiTextField,
+                            inputProps: fromInputProps,
+                            format: enableTime ? format + ' HH:mm' : format,
+                            formatDate: _moment.formatDate,
+                            parseDate: _moment.parseDate,
+                            onDayChange: this.handleDayChangeFrom,
+                            placeholder: ''
+                        })
+                    )
                 ),
                 _react2.default.createElement(
                     'div',
-                    { className: classes.toInput },
+                    {
+                        className: toClass,
+                        onFocus: this.handleDayPickerFocus('to'),
+                        onBlur: this.handleDayPickerBlur
+                    },
                     _react2.default.createElement(_DayPickerInput2.default, {
                         ref: function ref(el) {
                             _this6.toInput = el;
@@ -622,12 +658,13 @@ var HiDateRangePicker = function (_React$Component) {
         }
     }]);
     return HiDateRangePicker;
-}(_react2.default.Component); //  weak
+}(_react2.default.Component);
 
 HiDateRangePicker.defaultProps = {
     disabledDays: [],
     disablePastDays: false,
     disableFutureDays: false,
+    staticPosition: false,
     enableTime: false,
     format: 'YYYY-DD-MM',
     labelFrom: 'Start',
@@ -703,6 +740,10 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
      * Callback au reset de l'input
      */
     onReset: _propTypes2.default.func,
+    /**
+     * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+     */
+    staticPosition: _propTypes2.default.bool,
     /**
      * Date de fin sélectionnée
      */