@hitachivantara/uikit-react-core 2.23.2

package/dist/legacy/DatePicker/DatePicker.js

@@ -0,0 +1,702 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.reflect.construct.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import "core-js/modules/es.array.concat.js";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from "react";
+import PropTypes from "prop-types";
+import isNil from "lodash/isNil";
+import { ClickAwayListener, Popper, withStyles } from "@material-ui/core";
+import { Calendar as CalendarIcon } from "@hitachivantara/uikit-react-icons";
+import clsx from "clsx";
+import { isKeypress, KeyboardCodes, setId } from "../utils";
+import Typography from "../Typography";
+import Calendar from "./Calendar";
+import Actions from "./Actions";
+import styles from "./styles";
+import withLabels from "../withLabels";
+import withId from "../withId";
+import { convertISOStringDateToDate, DEFAULT_LOCALE, getDateISO, getFormattedDate, isDate, isValidLocale } from "./Calendar/utils";
+var DEFAULT_LABELS = {
+  applyLabel: "Apply",
+  cancelLabel: "Cancel",
+  title: undefined,
+  placeholder: "Select a date",
+  rangeStart: "Start date",
+  rangeEnd: "End date"
+};
+/**
+ * A graphical widget which allows the user to select a date.
+ */
+
+var HvDatePicker = /*#__PURE__*/function (_React$Component) {
+  _inherits(HvDatePicker, _React$Component);
+
+  var _super = _createSuper(HvDatePicker);
+
+  function HvDatePicker(props) {
+    var _this;
+
+    _classCallCheck(this, HvDatePicker);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "setCalendarOpen", function (open) {
+      _this.setState({
+        calendarOpen: open
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "createCalendarPlacement", function (data) {
+      var created = _this.state.created;
+      var flipped = data.flipped,
+          placement = data.placement;
+
+      if (!created) {
+        _this.setState({
+          calendarPlacement: placement,
+          calendarFlipped: flipped,
+          created: true
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateCalendarPlacement", function (data) {
+      var calendarFlipped = _this.state.calendarFlipped;
+
+      if (calendarFlipped !== data.flipped) {
+        _this.setState({
+          calendarPlacement: data.placement,
+          calendarFlipped: data.flipped
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleApplyAction", function () {
+      var rangeMode = _this.props.rangeMode;
+
+      if (rangeMode) {
+        var _this$state = _this.state,
+            tempStartSelectedDate = _this$state.tempStartSelectedDate,
+            tempEndSelectedDate = _this$state.tempEndSelectedDate;
+
+        if (tempStartSelectedDate && tempEndSelectedDate) {
+          _this.setRangeDate(tempStartSelectedDate, tempEndSelectedDate);
+        }
+      } else {
+        var tempSelectedDate = _this.state.tempSelectedDate;
+
+        if (tempSelectedDate) {
+          _this.setSingleDate(tempSelectedDate, true);
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleCancelAction", function () {
+      _this.cancelDateSelection();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyboardClick", function (event) {
+      if (isKeypress(event, KeyboardCodes.Enter)) {
+        _this.handleCalendarIconClick(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleCalendarIconClick", function (event) {
+      var currentTarget = event.currentTarget;
+
+      _this.setState(function (state) {
+        return {
+          calendarAnchorElement: currentTarget,
+          calendarOpen: !state.calendarOpen
+        };
+      }, function () {
+        var calendarOpen = _this.state.calendarOpen;
+
+        if (!calendarOpen) {
+          _this.cancelDateSelection();
+        }
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleCalendarClickAway", function (event) {
+      var id = _this.props.id;
+
+      if (event.target.id !== "".concat(id)) {
+        _this.cancelDateSelection();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getFormattedSelectedDate", function () {
+      var rangeMode = _this.props.rangeMode;
+      var _this$state2 = _this.state,
+          locale = _this$state2.locale,
+          selectedDate = _this$state2.selectedDate,
+          startSelectedDate = _this$state2.startSelectedDate,
+          endSelectedDate = _this$state2.endSelectedDate;
+
+      if (rangeMode) {
+        if (isDate(startSelectedDate) && isDate(endSelectedDate)) {
+          return "".concat(getFormattedDate(startSelectedDate, locale), " - ").concat(getFormattedDate(endSelectedDate, locale));
+        }
+      }
+
+      return isDate(selectedDate) ? getFormattedDate(selectedDate, locale) : "";
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "cancelDateSelection", function () {
+      var rangeMode = _this.props.rangeMode;
+      var _this$state3 = _this.state,
+          selectedDate = _this$state3.selectedDate,
+          startSelectedDate = _this$state3.startSelectedDate,
+          endSelectedDate = _this$state3.endSelectedDate;
+
+      if (rangeMode) {
+        _this.setState({
+          tempStartSelectedDate: startSelectedDate,
+          tempEndSelectedDate: endSelectedDate
+        });
+      } else {
+        _this.setState({
+          tempSelectedDate: selectedDate
+        });
+      }
+
+      _this.setCalendarOpen(false);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setSingleDate", function (date, closeCalendar) {
+      var onChange = _this.props.onChange;
+
+      _this.setState({
+        selectedDate: date,
+        tempSelectedDate: date
+      });
+
+      _this.setCalendarOpen(!closeCalendar);
+
+      if (typeof onChange === "function") {
+        onChange(getDateISO(date));
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSingleCalendarDateChange", function (date) {
+      var closeCalendar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var showActions = _this.props.showActions;
+
+      if (!showActions) {
+        _this.setSingleDate(date, closeCalendar);
+      } else {
+        _this.setState({
+          tempSelectedDate: date
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setRangeDate", function (startDate, endDate) {
+      var onChange = _this.props.onChange;
+
+      _this.setState({
+        startSelectedDate: startDate,
+        endSelectedDate: endDate
+      });
+
+      _this.setCalendarOpen(false);
+
+      if (typeof onChange === "function") {
+        onChange(getDateISO(startDate), getDateISO(endDate));
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleRangeCalendarDateStartChange", function (date) {
+      var tempEndSelectedDate = _this.state.tempEndSelectedDate;
+
+      if (tempEndSelectedDate > date) {
+        _this.setState({
+          tempStartSelectedDate: date
+        });
+      } else {
+        _this.setState({
+          tempStartSelectedDate: date,
+          tempEndSelectedDate: date,
+          endVisibleDate: date
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleRangeCalendarDateEndChange", function (date) {
+      var tempStartSelectedDate = _this.state.tempStartSelectedDate;
+
+      if (tempStartSelectedDate < date) {
+        _this.setState({
+          tempEndSelectedDate: date
+        });
+      } else {
+        _this.setState({
+          tempEndSelectedDate: date,
+          tempStartSelectedDate: date,
+          startVisibleDate: date
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderLabel", function () {
+      var _this$props = _this.props,
+          id = _this$props.id,
+          classes = _this$props.classes,
+          labels = _this$props.labels;
+      return /*#__PURE__*/React.createElement(Typography, {
+        id: setId(id, "label"),
+        variant: "labelText",
+        component: "label",
+        className: classes.label
+      }, labels.title);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderActions", function () {
+      var _this$props2 = _this.props,
+          classes = _this$props2.classes,
+          labels = _this$props2.labels,
+          rangeMode = _this$props2.rangeMode,
+          id = _this$props2.id;
+      var actionLabels = {
+        applyLabel: labels.applyLabel,
+        cancelLabel: labels.cancelLabel
+      };
+
+      if (rangeMode) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classes.rangeCalendarsFooter
+        }, /*#__PURE__*/React.createElement("div", {
+          className: classes.rangeFooterLeft
+        }), /*#__PURE__*/React.createElement("div", {
+          className: classes.rangeFooterRight
+        }, /*#__PURE__*/React.createElement(Actions, {
+          id: setId(id, "action"),
+          onCancel: function onCancel() {
+            return _this.handleCancelAction();
+          },
+          onApply: function onApply() {
+            return _this.handleApplyAction();
+          },
+          labels: actionLabels
+        })));
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.singleCalendarFooter
+      }, /*#__PURE__*/React.createElement(Actions, {
+        id: setId(id, "action"),
+        onCancel: function onCancel() {
+          return _this.handleCancelAction();
+        },
+        onApply: function onApply() {
+          return _this.handleApplyAction();
+        },
+        labels: actionLabels
+      }));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderSingleCalendar", function () {
+      var _this$props3 = _this.props,
+          classes = _this$props3.classes,
+          showActions = _this$props3.showActions,
+          rangeMode = _this$props3.rangeMode,
+          id = _this$props3.id;
+      var _this$state4 = _this.state,
+          tempSelectedDate = _this$state4.tempSelectedDate,
+          locale = _this$state4.locale,
+          calendarFlipped = _this$state4.calendarFlipped;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.calendarContainer
+      }, /*#__PURE__*/React.createElement(Calendar, {
+        id: setId(id, "calendar"),
+        handleDateChange: function handleDateChange(date, close) {
+          return _this.handleSingleCalendarDateChange(date, close);
+        },
+        selectedDate: tempSelectedDate,
+        locale: locale,
+        rangeMode: rangeMode,
+        flipped: calendarFlipped
+      }), showActions && _this.renderActions());
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderRangeCalendars", function () {
+      var _this$props4 = _this.props,
+          id = _this$props4.id,
+          classes = _this$props4.classes,
+          rangeMode = _this$props4.rangeMode,
+          labels = _this$props4.labels;
+      var _this$state5 = _this.state,
+          tempStartSelectedDate = _this$state5.tempStartSelectedDate,
+          tempEndSelectedDate = _this$state5.tempEndSelectedDate,
+          startVisibleDate = _this$state5.startVisibleDate,
+          endVisibleDate = _this$state5.endVisibleDate,
+          locale = _this$state5.locale,
+          calendarFlipped = _this$state5.calendarFlipped;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.rangeMainContainer
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classes.rangeCalendarsContainer
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classes.rangeLeftCalendarContainer
+      }, /*#__PURE__*/React.createElement(Calendar, {
+        id: setId(id, "calendar-start"),
+        handleDateChange: function handleDateChange(date) {
+          return _this.handleRangeCalendarDateStartChange(date);
+        },
+        selectedDate: tempStartSelectedDate,
+        visibleDate: startVisibleDate,
+        locale: locale,
+        rangeMode: rangeMode,
+        label: labels.rangeStart,
+        flipped: calendarFlipped
+      })), /*#__PURE__*/React.createElement("div", {
+        className: classes.rangeRightCalendarContainer
+      }, /*#__PURE__*/React.createElement(Calendar, {
+        id: setId(id, "calendar-end"),
+        handleDateChange: function handleDateChange(date) {
+          return _this.handleRangeCalendarDateEndChange(date);
+        },
+        selectedDate: tempEndSelectedDate,
+        visibleDate: endVisibleDate,
+        locale: locale,
+        rangeMode: rangeMode,
+        label: labels.rangeEnd,
+        flipped: calendarFlipped
+      }))), _this.renderActions());
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderInput", function () {
+      var _this$props5 = _this.props,
+          id = _this$props5.id,
+          className = _this$props5.className,
+          classes = _this$props5.classes,
+          labels = _this$props5.labels;
+      var calendarOpen = _this.state.calendarOpen;
+      var naming = {
+        "aria-label": isNil(labels) || isNil(labels.title) ? "Date input" : undefined,
+        "aria-labelledby": labels && labels.title ? setId(id, "label") : undefined
+      };
+      return /*#__PURE__*/React.createElement(React.Fragment, null, labels && labels.title && _this.renderLabel(), /*#__PURE__*/React.createElement("div", _extends({
+        className: clsx(className, classes.root, calendarOpen ? classes.inputCalendarOpen : classes.inputCalendarClosed),
+        onKeyDown: _this.handleKeyboardClick,
+        onClick: _this.handleCalendarIconClick,
+        role: "button",
+        tabIndex: 0,
+        id: id
+      }, naming), /*#__PURE__*/React.createElement("input", _extends({
+        ref: function ref(element) {
+          _this.inputElement = element;
+        },
+        className: classes.input,
+        value: _this.getFormattedSelectedDate(),
+        placeholder: labels.placeholder,
+        type: "text",
+        readOnly: true,
+        tabIndex: -1
+      }, naming)), /*#__PURE__*/React.createElement(CalendarIcon, {
+        tabIndex: -1,
+        className: classes.icon
+      })));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderPopper", function () {
+      var _this$props6 = _this.props,
+          id = _this$props6.id,
+          classes = _this$props6.classes,
+          theme = _this$props6.theme,
+          rangeMode = _this$props6.rangeMode,
+          horizontalPlacement = _this$props6.horizontalPlacement,
+          disablePortal = _this$props6.disablePortal,
+          escapeWithReference = _this$props6.escapeWithReference;
+      var _this$state6 = _this.state,
+          calendarOpen = _this$state6.calendarOpen,
+          calendarAnchorElement = _this$state6.calendarAnchorElement,
+          calendarFlipped = _this$state6.calendarFlipped;
+      var RenderCalendar = rangeMode ? _this.renderRangeCalendars() : _this.renderSingleCalendar();
+      return /*#__PURE__*/React.createElement(Popper, {
+        id: setId(id, "tooltip"),
+        open: calendarOpen,
+        placement: horizontalPlacement === "left" ? "bottom-start" : "bottom-end",
+        anchorEl: calendarAnchorElement,
+        disablePortal: disablePortal,
+        popperOptions: {
+          onCreate: _this.createCalendarPlacement,
+          onUpdate: _this.updateCalendarPlacement
+        },
+        modifiers: {
+          preventOverflow: {
+            // Follows the anchor element outside of the boundaries.
+            escapeWithReference: escapeWithReference
+          }
+        },
+        style: {
+          zIndex: "".concat(calendarFlipped ? theme.zIndex.tooltip : 1)
+        }
+      }, /*#__PURE__*/React.createElement(ClickAwayListener, {
+        onClickAway: _this.handleCalendarClickAway
+      }, /*#__PURE__*/React.createElement("div", null, !calendarFlipped && /*#__PURE__*/React.createElement("div", {
+        className: clsx(classes.popperRoot, classes.listBorderDown)
+      }), /*#__PURE__*/React.createElement("div", {
+        className: clsx(classes.popperRoot, calendarOpen && (calendarFlipped ? classes.calendarOpenUp : classes.calendarOpenDown))
+      }, RenderCalendar), calendarFlipped && /*#__PURE__*/React.createElement("div", {
+        className: clsx(classes.popperRoot, classes.listBorderUp)
+      }))));
+    });
+
+    var _locale = _this.props.locale;
+    _this.state = _objectSpread(_objectSpread({
+      created: false
+    }, HvDatePicker.resolveStateFromProps()), {}, {
+      calendarOpen: false,
+      calendarAnchorElement: null,
+      locale: isValidLocale(_locale) ? _locale : DEFAULT_LOCALE
+    });
+    return _this;
+  }
+  /**
+   * Changes the calendar open state according to the received flag.
+   *
+   * @param {boolean} open - Opens / closes the calendar according to this flag.
+   * @memberOf HvDatePicker
+   */
+
+
+  _createClass(HvDatePicker, [{
+    key: "render",
+    value:
+    /**
+     * Renders the DatePicker component.
+     *
+     * @returns
+     * @memberOf HvDatePicker
+     */
+    function render() {
+      var classes = this.props.classes;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.datePickerContainer
+      }, this.renderInput(), this.renderPopper());
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value:
+    /**
+     * Triggered right before the Render() function of the components.
+     * Here we can update the state when a prop is changed.
+     *
+     * @static
+     * @param {Object} props - The new props object.
+     * @param {Object} state - The current state object.
+     *
+     * @returns {Object} - The updated state
+     * @memberOf HvDatePicker
+     */
+    function getDerivedStateFromProps(props, state) {
+      var rangeMode = props.rangeMode,
+          locale = props.locale,
+          value = props.value,
+          startValue = props.startValue,
+          endValue = props.endValue;
+      var originalValue = state.originalValue,
+          originalStartValue = state.originalStartValue,
+          originalEndValue = state.originalEndValue,
+          stateLocale = state.locale;
+
+      if (locale !== stateLocale) {
+        var validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          locale: validLocale
+        });
+      }
+
+      if (value !== originalValue || startValue !== originalStartValue || endValue !== originalEndValue) {
+        return _objectSpread(_objectSpread({}, state), HvDatePicker.resolveStateFromProps(value, startValue, endValue, rangeMode));
+      }
+
+      return null;
+    }
+    /**
+     * Resolves the state using the received props.
+     *
+     * @memberOf HvDatePicker
+     */
+
+  }]);
+
+  return HvDatePicker;
+}(React.Component);
+
+_defineProperty(HvDatePicker, "resolveStateFromProps", function (value, startValue, endValue, rangeMode) {
+  if (rangeMode) {
+    var startSelectedDate = startValue && startValue !== "" ? convertISOStringDateToDate(startValue) : null;
+    var endSelectedDate = endValue && endValue !== "" ? convertISOStringDateToDate(endValue) : null; // Range mode state
+
+    return {
+      startSelectedDate: startSelectedDate,
+      endSelectedDate: endSelectedDate,
+      tempStartSelectedDate: startSelectedDate,
+      tempEndSelectedDate: endSelectedDate,
+      originalStartValue: startValue,
+      originalEndValue: endValue,
+      startVisibleDate: null,
+      endVisibleDate: null
+    };
+  } // Single calendar mode state
+
+
+  var selectedDate = value && value !== "" ? convertISOStringDateToDate(value) : null;
+  return {
+    selectedDate: selectedDate,
+    tempSelectedDate: selectedDate,
+    originalValue: value
+  };
+});
+
+process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Class name to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * An object containing all the labels for the datepicker.
+   */
+  labels: PropTypes.shape({
+    /**
+     * Apply button label.
+     */
+    applyLabel: PropTypes.string,
+
+    /**
+     * Cancel button label.
+     */
+    cancelLabel: PropTypes.string,
+
+    /**
+     * Text above the input/dropdown.
+     */
+    title: PropTypes.string,
+
+    /**
+     * Start date label.
+     */
+    rangeStart: PropTypes.string,
+
+    /**
+     * End date label.
+     */
+    rangeEnd: PropTypes.string,
+
+    /**
+     * Text inside the input/dropdown
+     */
+    placeholder: PropTypes.string
+  }),
+
+  /**
+   * A Jss Object used to override or extend the styles applied to the input/calendar box.
+   */
+  classes: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * The initial value of the input when in single calendar mode.
+   */
+  value: PropTypes.string,
+
+  /**
+   * The initial value for the start date when in range mode.
+   */
+  startValue: PropTypes.string,
+
+  /**
+   * The initial value for the end date when in range mode.
+   */
+  endValue: PropTypes.string,
+
+  /**
+   * Flag informing if the the component should be in range mode or in single mode.
+   */
+  rangeMode: PropTypes.bool,
+
+  /**
+   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.
+   * Note this prop only affects the calendar when in `rangeMode`.
+   */
+  horizontalPlacement: PropTypes.oneOf(["left", "right"]),
+
+  /**
+   * The calendar locale. If undefined, it uses calendar default
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Controls if actions buttons are visible at the calendar.
+   */
+  showActions: PropTypes.bool,
+
+  /**
+   * Callback function to be triggered when the input value is changed
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The theme object provided by the withStyles component.
+   */
+  theme: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal: PropTypes.bool,
+
+  /**
+   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.
+   */
+  escapeWithReference: PropTypes.bool
+} : void 0;
+HvDatePicker.defaultProps = {
+  id: undefined,
+  rangeMode: false,
+  horizontalPlacement: "left",
+  value: undefined,
+  startValue: undefined,
+  endValue: undefined,
+  locale: DEFAULT_LOCALE,
+  showActions: false,
+  onChange: undefined,
+  disablePortal: true,
+  escapeWithReference: true
+};
+export default withStyles(styles, {
+  name: "HvDatePicker",
+  withTheme: true
+})(withLabels(DEFAULT_LABELS)(withId(HvDatePicker)));
+//# sourceMappingURL=DatePicker.js.map