@hitachivantara/uikit-react-core 2.23.2

package/dist/Container/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Container.default;
+  }
+});
+
+var _Container = _interopRequireDefault(require("./Container"));
+//# sourceMappingURL=index.js.map

package/dist/Container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Container/index.js"],"sourcesContent":["export { default } from \"./Container\";\n"],"mappings":";;;;;;;;;;;;;;AAAA"}

package/dist/DatePicker/Actions/Actions.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _Button = _interopRequireDefault(require("../../Button"));
+
+var _utils = require("../../utils");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var Actions = function Actions(_ref) {
+  var id = _ref.id,
+      classes = _ref.classes,
+      onCancel = _ref.onCancel,
+      onApply = _ref.onApply,
+      labels = _ref.labels;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    id: (0, _utils.setId)(id, "apply"),
+    className: classes.button,
+    onClick: onApply,
+    category: "ghost"
+  }, labels.applyLabel), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    id: (0, _utils.setId)(id, "cancel"),
+    className: classes.button,
+    onClick: onCancel,
+    category: "ghost"
+  }, labels.cancelLabel));
+};
+
+process.env.NODE_ENV !== "production" ? Actions.propTypes = {
+  /**
+   * Identifier.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: _propTypes.default.instanceOf(Object).isRequired,
+
+  /**
+   * A function to be executed whenever cancel action is triggered.
+   */
+  onCancel: _propTypes.default.func,
+
+  /**
+   * A function to be executed whenever apply action is triggered.
+   */
+  onApply: _propTypes.default.func,
+
+  /**
+   * An Object containing the various text associated with the input.
+   *
+   * - applyLabel: Label for apply button.
+   * - cancelLabel: Label for cancel button.
+   */
+  labels: _propTypes.default.shape({
+    applyLabel: _propTypes.default.string,
+    cancelLabel: _propTypes.default.string
+  })
+} : void 0;
+Actions.defaultProps = {
+  id: undefined,
+  onCancel: function onCancel() {},
+  onApply: function onApply() {},
+  labels: {
+    applyLabel: "Apply",
+    cancelLabel: "Cancel"
+  }
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvDatePickerActions"
+})(Actions);
+
+exports.default = _default;
+//# sourceMappingURL=Actions.js.map

package/dist/DatePicker/Actions/Actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.js","names":["Actions","id","classes","onCancel","onApply","labels","root","setId","button","applyLabel","cancelLabel","propTypes","PropTypes","string","instanceOf","Object","isRequired","func","shape","defaultProps","undefined","withStyles","styles","name"],"sources":["../../../src/DatePicker/Actions/Actions.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport HvButton from \"../../Button\";\nimport { setId } from \"../../utils\";\nimport styles from \"./styles\";\n\nconst Actions = ({ id, classes, onCancel, onApply, labels }) => (\n  <div className={classes.root}>\n    <HvButton id={setId(id, \"apply\")} className={classes.button} onClick={onApply} category=\"ghost\">\n      {labels.applyLabel}\n    </HvButton>\n    <HvButton\n      id={setId(id, \"cancel\")}\n      className={classes.button}\n      onClick={onCancel}\n      category=\"ghost\"\n    >\n      {labels.cancelLabel}\n    </HvButton>\n  </div>\n);\n\nActions.propTypes = {\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * A function to be executed whenever cancel action is triggered.\n   */\n  onCancel: PropTypes.func,\n  /**\n   * A function to be executed whenever apply action is triggered.\n   */\n  onApply: PropTypes.func,\n  /**\n   * An Object containing the various text associated with the input.\n   *\n   * - applyLabel: Label for apply button.\n   * - cancelLabel: Label for cancel button.\n   */\n  labels: PropTypes.shape({\n    applyLabel: PropTypes.string,\n    cancelLabel: PropTypes.string,\n  }),\n};\n\nActions.defaultProps = {\n  id: undefined,\n  onCancel() {},\n  onApply() {},\n  labels: {\n    applyLabel: \"Apply\",\n    cancelLabel: \"Cancel\",\n  },\n};\n\nexport default withStyles(styles, { name: \"HvDatePickerActions\" })(Actions);\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAU;EAAA,IAAGC,EAAH,QAAGA,EAAH;EAAA,IAAOC,OAAP,QAAOA,OAAP;EAAA,IAAgBC,QAAhB,QAAgBA,QAAhB;EAAA,IAA0BC,OAA1B,QAA0BA,OAA1B;EAAA,IAAmCC,MAAnC,QAAmCA,MAAnC;EAAA,oBACd;IAAK,SAAS,EAAEH,OAAO,CAACI;EAAxB,gBACE,6BAAC,eAAD;IAAU,EAAE,EAAE,IAAAC,YAAA,EAAMN,EAAN,EAAU,OAAV,CAAd;IAAkC,SAAS,EAAEC,OAAO,CAACM,MAArD;IAA6D,OAAO,EAAEJ,OAAtE;IAA+E,QAAQ,EAAC;EAAxF,GACGC,MAAM,CAACI,UADV,CADF,eAIE,6BAAC,eAAD;IACE,EAAE,EAAE,IAAAF,YAAA,EAAMN,EAAN,EAAU,QAAV,CADN;IAEE,SAAS,EAAEC,OAAO,CAACM,MAFrB;IAGE,OAAO,EAAEL,QAHX;IAIE,QAAQ,EAAC;EAJX,GAMGE,MAAM,CAACK,WANV,CAJF,CADc;AAAA,CAAhB;;AAgBA,wCAAAV,OAAO,CAACW,SAAR,GAAoB;EAClB;AACF;AACA;EACEV,EAAE,EAAEW,kBAAA,CAAUC,MAJI;;EAKlB;AACF;AACA;EACEX,OAAO,EAAEU,kBAAA,CAAUE,UAAV,CAAqBC,MAArB,EAA6BC,UARpB;;EASlB;AACF;AACA;EACEb,QAAQ,EAAES,kBAAA,CAAUK,IAZF;;EAalB;AACF;AACA;EACEb,OAAO,EAAEQ,kBAAA,CAAUK,IAhBD;;EAiBlB;AACF;AACA;AACA;AACA;AACA;EACEZ,MAAM,EAAEO,kBAAA,CAAUM,KAAV,CAAgB;IACtBT,UAAU,EAAEG,kBAAA,CAAUC,MADA;IAEtBH,WAAW,EAAEE,kBAAA,CAAUC;EAFD,CAAhB;AAvBU,CAApB;AA6BAb,OAAO,CAACmB,YAAR,GAAuB;EACrBlB,EAAE,EAAEmB,SADiB;EAErBjB,QAFqB,sBAEV,CAAE,CAFQ;EAGrBC,OAHqB,qBAGX,CAAE,CAHS;EAIrBC,MAAM,EAAE;IACNI,UAAU,EAAE,OADN;IAENC,WAAW,EAAE;EAFP;AAJa,CAAvB;;eAUe,IAAAW,gBAAA,EAAWC,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAoDvB,OAApD,C"}

package/dist/DatePicker/Actions/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Actions.default;
+  }
+});
+
+var _Actions = _interopRequireDefault(require("./Actions"));
+//# sourceMappingURL=index.js.map

package/dist/DatePicker/Actions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/DatePicker/Actions/index.js"],"sourcesContent":["export { default } from \"./Actions\";\n"],"mappings":";;;;;;;;;;;;;;AAAA"}

package/dist/DatePicker/Actions/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles(theme) {
+  return {
+    button: {
+      color: theme.palette.acce1,
+      "& span": {
+        color: theme.palette.acce1
+      },
+      "&:nth-child(1)": {
+        marginRight: theme.spacing("xs")
+      }
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/DatePicker/Actions/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","theme","button","color","palette","acce1","marginRight","spacing"],"sources":["../../../src/DatePicker/Actions/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  button: {\n    color: theme.palette.acce1,\n    \"& span\": {\n      color: theme.palette.acce1,\n    },\n    \"&:nth-child(1)\": {\n      marginRight: theme.spacing(\"xs\"),\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;EAAA,OAAY;IACzBC,MAAM,EAAE;MACNC,KAAK,EAAEF,KAAK,CAACG,OAAN,CAAcC,KADf;MAEN,UAAU;QACRF,KAAK,EAAEF,KAAK,CAACG,OAAN,CAAcC;MADb,CAFJ;MAKN,kBAAkB;QAChBC,WAAW,EAAEL,KAAK,CAACM,OAAN,CAAc,IAAd;MADG;IALZ;EADiB,CAAZ;AAAA,CAAf;;eAYeP,M"}

package/dist/DatePicker/Calendar/Calendar.js

@@ -0,0 +1,486 @@
+"use strict";
+
+require("core-js/modules/es.reflect.construct.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _utils = require("../../utils");
+
+var _Typography = _interopRequireDefault(require("../../Typography"));
+
+var _Header = _interopRequireDefault(require("./Header"));
+
+var _Navigation = _interopRequireDefault(require("./Navigation"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _enums = require("./enums");
+
+var _utils2 = require("./utils");
+
+var _model = _interopRequireDefault(require("./model"));
+
+var _withTooltip = _interopRequireDefault(require("../../withTooltip"));
+
+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) { (0, _defineProperty2.default)(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; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var Calendar = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Calendar, _React$Component);
+
+  var _super = _createSuper(Calendar);
+
+  function Calendar(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Calendar);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initLocalizedLabels", function () {
+      var locale = _this.state.locale;
+      _this.listMonthNamesLong = (0, _utils2.getMonthNamesList)(locale, _enums.REPRESENTATION_VALUES.LONG);
+      _this.listMonthNamesShort = (0, _utils2.getMonthNamesList)(locale, _enums.REPRESENTATION_VALUES.SHORT);
+      _this.listWeekdayNamesNarrow = (0, _utils2.getWeekdayNamesList)(locale, _enums.REPRESENTATION_VALUES.NARROW);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeSelectedDateHeader", function (date, shouldCloseCalendar) {
+      return _this.changeSelectDate(date, shouldCloseCalendar);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeSelectDate", function (date) {
+      var shouldCloseCalendar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var handleDateChange = _this.props.handleDateChange;
+
+      _this.setState(_this.resolveStateFromDates(date));
+
+      if (typeof handleDateChange === "function") {
+        handleDateChange(date, shouldCloseCalendar);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectDate", function (date) {
+      return function (event) {
+        if (event) {
+          event.preventDefault();
+        }
+
+        _this.changeSelectDate(date);
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "navigateTo", function (navOption, month) {
+      var calendarModel = _this.state.calendarModel;
+
+      _this.setState({
+        calendarModel: calendarModel.navigateTo(navOption, month),
+        viewMode: _enums.VIEW_MODE.CALENDAR
+      });
+
+      _this.visibleDateChanged();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "visibleDateChanged", function () {
+      var calendarModel = _this.state.calendarModel;
+      var handleVisibleDateChange = _this.props.handleVisibleDateChange;
+
+      if (typeof handleVisibleDateChange === "function") {
+        var visibleDate = (0, _utils2.makeUTCDate)(calendarModel.year, calendarModel.month, 1);
+        handleVisibleDateChange(visibleDate);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveStateFromDates", function (selectedDate) {
+      var visibleDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var locale = _this.props.locale;
+      var isDateObject = (0, _utils2.isDate)(selectedDate);
+      var validSelectedDate = isDateObject ? selectedDate : (0, _utils2.makeUTCToday)();
+      var validVisibleDate = (0, _utils2.isDate)(visibleDate) ? visibleDate : validSelectedDate;
+      var visibleMonth = validVisibleDate.getUTCMonth() + 1;
+      var visibleYear = validVisibleDate.getUTCFullYear();
+      var validLocale = (0, _utils2.isValidLocale)(locale) ? locale : _utils2.DEFAULT_LOCALE;
+      return {
+        selectedDate: isDateObject ? selectedDate : null,
+        visibleDate: validVisibleDate,
+        calendarModel: new _model.default(visibleMonth, visibleYear),
+        viewMode: _enums.VIEW_MODE.CALENDAR,
+        locale: validLocale
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveStateFromProps", function () {
+      var _this$props = _this.props,
+          selectedDate = _this$props.selectedDate,
+          visibleDate = _this$props.visibleDate;
+      return _this.resolveStateFromDates(selectedDate, visibleDate);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderNavigation", function () {
+      var calendarModel = _this.state.calendarModel;
+      var _this$props2 = _this.props,
+          classes = _this$props2.classes,
+          id = _this$props2.id;
+      var year = calendarModel.year,
+          month = calendarModel.month;
+      var monthName = _this.listMonthNamesLong[month - 1];
+      var previousYearValid = (0, _utils2.isPreviousDateValid)(year, 1);
+      var nextYearValid = (0, _utils2.isNextDateValid)(year, 12);
+      var previousMonthValid = (0, _utils2.isPreviousDateValid)(year, month);
+      var nextMonthValid = (0, _utils2.isNextDateValid)(year, month);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.navigationContainer
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.navigationMonth
+      }, /*#__PURE__*/_react.default.createElement(_Navigation.default, {
+        id: (0, _utils.setId)(id, "navigation-month"),
+        navigationText: monthName,
+        onNavigatePrevious: function onNavigatePrevious() {
+          _this.navigateTo(_enums.NAV_OPTIONS.PREVIOUS_MONTH);
+        },
+        onNavigateNext: function onNavigateNext() {
+          return _this.navigateTo(_enums.NAV_OPTIONS.NEXT_MONTH);
+        },
+        onTextClick: function onTextClick() {
+          return _this.setState({
+            viewMode: _enums.VIEW_MODE.MONTHLY
+          });
+        },
+        className: classes.navigationMonth,
+        isPreviousEnabled: previousMonthValid,
+        isNextEnabled: nextMonthValid
+      })), /*#__PURE__*/_react.default.createElement(_Navigation.default, {
+        id: (0, _utils.setId)(id, "navigation-year"),
+        navigationText: year.toString(),
+        onNavigatePrevious: function onNavigatePrevious() {
+          return _this.navigateTo(_enums.NAV_OPTIONS.PREVIOUS_YEAR);
+        },
+        onNavigateNext: function onNavigateNext() {
+          return _this.navigateTo(_enums.NAV_OPTIONS.NEXT_YEAR);
+        },
+        isPreviousEnabled: previousYearValid,
+        isNextEnabled: nextYearValid
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDayLabel", function () {
+      var classes = _this.props.classes;
+      return _this.listWeekdayNamesNarrow.map(function (dayName, index) {
+        var key = "".concat(dayName, "-").concat(index);
+        return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          variant: "highlightText",
+          className: classes.calendarDay,
+          key: key,
+          index: index
+        }, dayName);
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "arrowKeysFocus", function (event, onClickFunc, rowLength) {
+      if ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.ArrowLeft)) {
+        event.preventDefault();
+        document.activeElement.previousSibling.focus();
+      }
+
+      if ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.ArrowRight)) {
+        event.preventDefault();
+        document.activeElement.nextSibling.focus();
+      }
+
+      if ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.ArrowUp)) {
+        event.preventDefault();
+        var element = document.activeElement;
+
+        for (var i = 0; i < rowLength; i += 1) {
+          element = element.previousSibling;
+        }
+
+        element.focus();
+      }
+
+      if ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.ArrowDown)) {
+        event.preventDefault();
+        var _element = document.activeElement;
+
+        for (var _i = 0; _i < rowLength; _i += 1) {
+          _element = _element.nextSibling;
+        }
+
+        _element.focus();
+      }
+
+      if ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.Enter)) {
+        onClickFunc();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCalendarDate", function (currentDate) {
+      var _this$state = _this.state,
+          selectedDate = _this$state.selectedDate,
+          calendarModel = _this$state.calendarModel,
+          today = _this$state.today,
+          locale = _this$state.locale;
+      var classes = _this.props.classes; // Checks if the received date is the same as today.
+
+      var isToday = (0, _utils2.isSameDay)(currentDate, today); // Checks if the received date is the same as the currently selected date.
+
+      var isCurrent = selectedDate && (0, _utils2.isSameDay)(currentDate, selectedDate); // Checks if the received date is in the same month and year the current month and year in the state.
+
+      var inMonth = calendarModel.month && calendarModel.year && (0, _utils2.isSameMonth)(currentDate, (0, _utils2.makeUTCDate)(calendarModel.year, calendarModel.month, 1)); // Checks if the date is in a valid range
+
+      var dateInValidRange = (0, _utils2.isDateInValidRange)(currentDate); // Sets the initial class as `calendarDate` and then adds the rest of the classes according to the state.
+
+      var className = "".concat(classes.calendarDate);
+      var typographyVariant = "normalText";
+
+      if (isCurrent) {
+        className += " ".concat(classes.calendarDateSelected);
+      } else if (isToday) {
+        typographyVariant = "highlightText";
+      } else if (!inMonth) {
+        className += " ".concat(classes.calendarDateNotInMonth);
+      }
+
+      var onClickFunc = dateInValidRange ? _this.selectDate(currentDate) : undefined;
+
+      var DateDisplay = function DateDisplay() {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: classes.focusSelection,
+          onClick: onClickFunc,
+          onKeyDown: function onKeyDown(event) {
+            return _this.arrowKeysFocus(event, onClickFunc, 7);
+          },
+          role: "presentation",
+          tabIndex: 0
+        }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          variant: typographyVariant,
+          className: "".concat(className, " ").concat(dateInValidRange ? "" : classes.calendarDateInvalid)
+        }, currentDate.getUTCDate()));
+      };
+
+      var DateTooltipWrapper = (0, _withTooltip.default)(DateDisplay, (0, _utils2.getFormattedDate)(currentDate, locale));
+      return /*#__PURE__*/_react.default.createElement(DateTooltipWrapper, {
+        key: (0, _utils2.getDateISO)(currentDate)
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderHeader", function () {
+      var selectedDate = _this.state.selectedDate;
+      var _this$props3 = _this.props,
+          label = _this$props3.label,
+          locale = _this$props3.locale,
+          id = _this$props3.id;
+      return /*#__PURE__*/_react.default.createElement(_Header.default, {
+        id: id,
+        inputDate: selectedDate || (0, _utils2.makeUTCToday)(),
+        locale: locale,
+        topText: label,
+        onSelection: _this.changeSelectedDateHeader
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMonthlyView", function () {
+      var _this$props4 = _this.props,
+          classes = _this$props4.classes,
+          rangeMode = _this$props4.rangeMode;
+      var calendarModel = _this.state.calendarModel;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(classes.calendarMonthlyGrid, " ").concat(rangeMode ? classes.rangeModeWidth : classes.normalWidth)
+      }, _this.listMonthNamesShort.map(function (monthName, index) {
+        var key = "".concat(monthName, "-").concat(index);
+        var className = "".concat(classes.calendarMonthlyCell);
+
+        if (index + 1 === calendarModel.month) {
+          className += " ".concat(classes.calendarMonthlyCellSelected);
+        }
+
+        var onClick = function onClick() {
+          return _this.navigateTo(_enums.NAV_OPTIONS.MONTH, index + 1);
+        };
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: classes.focusSelection,
+          key: key,
+          role: "presentation",
+          onClick: onClick,
+          onKeyDown: function onKeyDown(event) {
+            return _this.arrowKeysFocus(event, onClick, 3);
+          },
+          tabIndex: 0
+        }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          variant: "normalText",
+          className: className
+        }, monthName));
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderContent", function () {
+      var classes = _this.props.classes;
+      var _this$state2 = _this.state,
+          viewMode = _this$state2.viewMode,
+          calendarModel = _this$state2.calendarModel;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, viewMode === _enums.VIEW_MODE.CALENDAR && _this.renderNavigation(), viewMode === _enums.VIEW_MODE.MONTHLY && _this.renderMonthlyView(), /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.calendarGrid
+      }, _this.renderDayLabel(), calendarModel.dates.map(_this.renderCalendarDate)));
+    });
+    _this.state = _objectSpread(_objectSpread({}, _this.resolveStateFromProps()), {}, {
+      today: (0, _utils2.makeUTCToday)()
+    });
+
+    _this.initLocalizedLabels();
+
+    return _this;
+  }
+  /**
+   * Triggered right before the Render() function of the components.
+   * Here we can update the state when a prop is changed.
+   * In this case we want to update the calendar state if the selectedDate in the Props is different from the one in
+   * the state.
+   *
+   * @static
+   * @param {Object} props - The new props object.
+   * @param {Object} state - The current state object.
+   *
+   * @returns {Object} - The updated state
+   * @memberOf Calendar
+   */
+
+
+  (0, _createClass2.default)(Calendar, [{
+    key: "render",
+    value: function render() {
+      var _this$props5 = this.props,
+          classes = _this$props5.classes,
+          id = _this$props5.id;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        id: id,
+        className: classes.calendarWrapper
+      }, this.renderHeader(), this.renderContent());
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if ((0, _utils2.isDate)(props.selectedDate) && !(0, _utils2.isSameDay)(props.selectedDate, state.selectedDate)) {
+        var newState = {};
+        newState.selectedDate = props.selectedDate;
+
+        if (!(0, _utils2.isSameMonth)(props.selectedDate, state.visibleDate)) {
+          var newVisibleDate = props.selectedDate;
+          var visibleMonth = newVisibleDate.getUTCMonth() + 1;
+          var visibleYear = newVisibleDate.getUTCFullYear();
+          newState.visibleDate = newVisibleDate;
+          newState.calendarModel = state.calendarModel.navigateTo(_enums.NAV_OPTIONS.MONTH_YEAR, visibleMonth, visibleYear);
+        }
+
+        return newState;
+      }
+
+      return null;
+    }
+    /**
+     * Initializes the lists with the localized names for the months are weekday names.
+     *
+     * @memberOf Calendar
+     */
+
+  }]);
+  return Calendar;
+}(_react.default.Component);
+
+process.env.NODE_ENV !== "production" ? Calendar.propTypes = {
+  /**
+   * Styles applied from the theme.
+   */
+  classes: _propTypes.default.instanceOf(Object).isRequired,
+
+  /**
+   * Identifier.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Locale to be used by the calendar.
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * Date that should be used as the starting selected date for the calendar.
+   */
+  selectedDate: _propTypes.default.instanceOf(Date),
+
+  /**
+   * Date that will be used to know which month and year should be displayed on the calendar. The value of the day is
+   * irrelevant.
+   */
+  visibleDate: _propTypes.default.instanceOf(Date),
+
+  /**
+   * Callback function to be triggered when the selected date has changed.
+   */
+  handleDateChange: _propTypes.default.func,
+
+  /**
+   * Callback function to be triggered when visible date has changed.
+   */
+  handleVisibleDateChange: _propTypes.default.func,
+
+  /**
+   * Indicates if the calendar is being used in ranged mode.
+   */
+  rangeMode: _propTypes.default.bool,
+
+  /**
+   * Text to show in the header on range mode.
+   */
+  label: _propTypes.default.string
+} : void 0;
+Calendar.defaultProps = {
+  id: undefined,
+  locale: _utils2.DEFAULT_LOCALE,
+  selectedDate: undefined,
+  visibleDate: undefined,
+  handleDateChange: undefined,
+  handleVisibleDateChange: undefined,
+  rangeMode: false,
+  label: null
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvDatePickerCalendar"
+})(Calendar);
+
+exports.default = _default;
+//# sourceMappingURL=Calendar.js.map