@hitachivantara/uikit-react-core 2.23.2

package/dist/DatePicker/Calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","names":["Calendar","props","locale","state","listMonthNamesLong","getMonthNamesList","REPRESENTATION_VALUES","LONG","listMonthNamesShort","SHORT","listWeekdayNamesNarrow","getWeekdayNamesList","NARROW","date","shouldCloseCalendar","changeSelectDate","handleDateChange","setState","resolveStateFromDates","event","preventDefault","navOption","month","calendarModel","navigateTo","viewMode","VIEW_MODE","CALENDAR","visibleDateChanged","handleVisibleDateChange","visibleDate","makeUTCDate","year","selectedDate","isDateObject","isDate","validSelectedDate","makeUTCToday","validVisibleDate","visibleMonth","getUTCMonth","visibleYear","getUTCFullYear","validLocale","isValidLocale","DEFAULT_LOCALE","CalendarModel","classes","id","monthName","previousYearValid","isPreviousDateValid","nextYearValid","isNextDateValid","previousMonthValid","nextMonthValid","navigationContainer","navigationMonth","setId","NAV_OPTIONS","PREVIOUS_MONTH","NEXT_MONTH","MONTHLY","toString","PREVIOUS_YEAR","NEXT_YEAR","map","dayName","index","key","calendarDay","onClickFunc","rowLength","isKeypress","KeyboardCodes","ArrowLeft","document","activeElement","previousSibling","focus","ArrowRight","nextSibling","ArrowUp","element","i","ArrowDown","Enter","currentDate","today","isToday","isSameDay","isCurrent","inMonth","isSameMonth","dateInValidRange","isDateInValidRange","className","calendarDate","typographyVariant","calendarDateSelected","calendarDateNotInMonth","selectDate","undefined","DateDisplay","focusSelection","arrowKeysFocus","calendarDateInvalid","getUTCDate","DateTooltipWrapper","withTooltip","getFormattedDate","getDateISO","label","changeSelectedDateHeader","rangeMode","calendarMonthlyGrid","rangeModeWidth","normalWidth","calendarMonthlyCell","calendarMonthlyCellSelected","onClick","MONTH","renderNavigation","renderMonthlyView","calendarGrid","renderDayLabel","dates","renderCalendarDate","resolveStateFromProps","initLocalizedLabels","calendarWrapper","renderHeader","renderContent","newState","newVisibleDate","MONTH_YEAR","React","Component","propTypes","PropTypes","instanceOf","Object","isRequired","string","Date","func","bool","defaultProps","withStyles","styles","name"],"sources":["../../../src/DatePicker/Calendar/Calendar.js"],"sourcesContent":["/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport { isKeypress, KeyboardCodes, setId } from \"../../utils\";\nimport HvTypography from \"../../Typography\";\nimport Header from \"./Header\";\nimport Navigation from \"./Navigation\";\nimport styles from \"./styles\";\n\nimport { NAV_OPTIONS, REPRESENTATION_VALUES, VIEW_MODE } from \"./enums\";\nimport {\n  DEFAULT_LOCALE,\n  getDateISO,\n  getFormattedDate,\n  getMonthNamesList,\n  getWeekdayNamesList,\n  isDate,\n  isDateInValidRange,\n  isNextDateValid,\n  isPreviousDateValid,\n  isSameDay,\n  isSameMonth,\n  isValidLocale,\n  makeUTCDate,\n  makeUTCToday,\n} from \"./utils\";\n\nimport CalendarModel from \"./model\";\nimport withTooltip from \"../../withTooltip\";\n\nclass Calendar extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { ...this.resolveStateFromProps(), today: makeUTCToday() };\n\n    this.initLocalizedLabels();\n  }\n\n  /**\n   * Triggered right before the Render() function of the components.\n   * Here we can update the state when a prop is changed.\n   * In this case we want to update the calendar state if the selectedDate in the Props is different from the one in\n   * the state.\n   *\n   * @static\n   * @param {Object} props - The new props object.\n   * @param {Object} state - The current state object.\n   *\n   * @returns {Object} - The updated state\n   * @memberOf Calendar\n   */\n  static getDerivedStateFromProps(props, state) {\n    if (isDate(props.selectedDate) && !isSameDay(props.selectedDate, state.selectedDate)) {\n      const newState = {};\n      newState.selectedDate = props.selectedDate;\n\n      if (!isSameMonth(props.selectedDate, state.visibleDate)) {\n        const newVisibleDate = props.selectedDate;\n        const visibleMonth = newVisibleDate.getUTCMonth() + 1;\n        const visibleYear = newVisibleDate.getUTCFullYear();\n\n        newState.visibleDate = newVisibleDate;\n        newState.calendarModel = state.calendarModel.navigateTo(\n          NAV_OPTIONS.MONTH_YEAR,\n          visibleMonth,\n          visibleYear\n        );\n      }\n\n      return newState;\n    }\n    return null;\n  }\n\n  /**\n   * Initializes the lists with the localized names for the months are weekday names.\n   *\n   * @memberOf Calendar\n   */\n  initLocalizedLabels = () => {\n    const { locale } = this.state;\n\n    this.listMonthNamesLong = getMonthNamesList(locale, REPRESENTATION_VALUES.LONG);\n    this.listMonthNamesShort = getMonthNamesList(locale, REPRESENTATION_VALUES.SHORT);\n    this.listWeekdayNamesNarrow = getWeekdayNamesList(locale, REPRESENTATION_VALUES.NARROW);\n  };\n\n  changeSelectedDateHeader = (date, shouldCloseCalendar) =>\n    this.changeSelectDate(date, shouldCloseCalendar);\n\n  /**\n   * Sets the passed date, calling the callback from the DatePicker.\n   *\n   * @param date\n   * @param shouldCloseCalendar\n   */\n  changeSelectDate = (date, shouldCloseCalendar = true) => {\n    const { handleDateChange } = this.props;\n    this.setState(this.resolveStateFromDates(date));\n\n    if (typeof handleDateChange === \"function\") {\n      handleDateChange(date, shouldCloseCalendar);\n    }\n  };\n\n  /**\n   * Sets the state to the received date and triggers the `handleDateChange` callback in case it was defined.\n   *\n   * @param {Date} date - The date to which the state will be changed to.\n   * @memberOf Calendar\n   */\n  selectDate = (date) => (event) => {\n    if (event) {\n      event.preventDefault();\n    }\n    this.changeSelectDate(date);\n  };\n\n  /**\n   * Navigates through the calendar according to the received navigation options.\n   *\n   * @param navOption- Navigation option.\n   * @param month - Number of the month.\n   * @memberOf Calendar\n   */\n  navigateTo = (navOption, month) => {\n    const { calendarModel } = this.state;\n\n    this.setState({\n      calendarModel: calendarModel.navigateTo(navOption, month),\n      viewMode: VIEW_MODE.CALENDAR,\n    });\n    this.visibleDateChanged();\n  };\n\n  /**\n   * Triggers the callback to warn that the visible date was changed.\n   *\n   * @memberOf Calendar\n   */\n  visibleDateChanged = () => {\n    const { calendarModel } = this.state;\n    const { handleVisibleDateChange } = this.props;\n\n    if (typeof handleVisibleDateChange === \"function\") {\n      const visibleDate = makeUTCDate(calendarModel.year, calendarModel.month, 1);\n      handleVisibleDateChange(visibleDate);\n    }\n  };\n\n  /**\n   * Resolves the state using the received date.\n   *\n   * @param {Date} selectedDate - The date that will be used to set the selected date.\n   * @param {Date} visibleDate - The date that will be used to set the currently visible month and year.\n   * @returns {{\n   *  selectedDate {Date} - Currently selected date\n   *  calendarModel {CalendarModel} - Object representing the current calendar.\n   *  viewMode {REPRESENTATION_VALUE} - Visualization mode currently active.\n   * }}\n   * @memberOf Calendar\n   */\n  resolveStateFromDates = (selectedDate, visibleDate = null) => {\n    const { locale } = this.props;\n\n    const isDateObject = isDate(selectedDate);\n    const validSelectedDate = isDateObject ? selectedDate : makeUTCToday();\n    const validVisibleDate = isDate(visibleDate) ? visibleDate : validSelectedDate;\n\n    const visibleMonth = validVisibleDate.getUTCMonth() + 1;\n    const visibleYear = validVisibleDate.getUTCFullYear();\n    const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;\n\n    return {\n      selectedDate: isDateObject ? selectedDate : null,\n      visibleDate: validVisibleDate,\n      calendarModel: new CalendarModel(visibleMonth, visibleYear),\n      viewMode: VIEW_MODE.CALENDAR,\n      locale: validLocale,\n    };\n  };\n\n  /**\n   * Resolves the state using the `selectedDate` and `visibleDate` properties.\n   *\n   * @memberOf Calendar\n   */\n  resolveStateFromProps = () => {\n    const { selectedDate, visibleDate } = this.props;\n\n    return this.resolveStateFromDates(selectedDate, visibleDate);\n  };\n\n  /**\n   * Renders the Month and Year navigation controls.\n   *\n   * @memberOf Calendar\n   */\n  renderNavigation = () => {\n    const { calendarModel } = this.state;\n    const { classes, id } = this.props;\n    const { year, month } = calendarModel;\n\n    const monthName = this.listMonthNamesLong[month - 1];\n    const previousYearValid = isPreviousDateValid(year, 1);\n    const nextYearValid = isNextDateValid(year, 12);\n    const previousMonthValid = isPreviousDateValid(year, month);\n    const nextMonthValid = isNextDateValid(year, month);\n\n    return (\n      <div className={classes.navigationContainer}>\n        <div className={classes.navigationMonth}>\n          <Navigation\n            id={setId(id, \"navigation-month\")}\n            navigationText={monthName}\n            onNavigatePrevious={() => {\n              this.navigateTo(NAV_OPTIONS.PREVIOUS_MONTH);\n            }}\n            onNavigateNext={() => this.navigateTo(NAV_OPTIONS.NEXT_MONTH)}\n            onTextClick={() => this.setState({ viewMode: VIEW_MODE.MONTHLY })}\n            className={classes.navigationMonth}\n            isPreviousEnabled={previousMonthValid}\n            isNextEnabled={nextMonthValid}\n          />\n        </div>\n\n        <Navigation\n          id={setId(id, \"navigation-year\")}\n          navigationText={year.toString()}\n          onNavigatePrevious={() => this.navigateTo(NAV_OPTIONS.PREVIOUS_YEAR)}\n          onNavigateNext={() => this.navigateTo(NAV_OPTIONS.NEXT_YEAR)}\n          isPreviousEnabled={previousYearValid}\n          isNextEnabled={nextYearValid}\n        />\n      </div>\n    );\n  };\n\n  /**\n   * Renders the elements for the week day names.\n   *\n   * @memberOf Calendar\n   */\n  renderDayLabel = () => {\n    const { classes } = this.props;\n\n    return this.listWeekdayNamesNarrow.map((dayName, index) => {\n      const key = `${dayName}-${index}`;\n      return (\n        <HvTypography\n          variant=\"highlightText\"\n          className={classes.calendarDay}\n          key={key}\n          index={index}\n        >\n          {dayName}\n        </HvTypography>\n      );\n    });\n  };\n\n  arrowKeysFocus = (event, onClickFunc, rowLength) => {\n    if (isKeypress(event, KeyboardCodes.ArrowLeft)) {\n      event.preventDefault();\n      document.activeElement.previousSibling.focus();\n    }\n    if (isKeypress(event, KeyboardCodes.ArrowRight)) {\n      event.preventDefault();\n      document.activeElement.nextSibling.focus();\n    }\n    if (isKeypress(event, KeyboardCodes.ArrowUp)) {\n      event.preventDefault();\n      let element = document.activeElement;\n      for (let i = 0; i < rowLength; i += 1) {\n        element = element.previousSibling;\n      }\n      element.focus();\n    }\n    if (isKeypress(event, KeyboardCodes.ArrowDown)) {\n      event.preventDefault();\n      let element = document.activeElement;\n      for (let i = 0; i < rowLength; i += 1) {\n        element = element.nextSibling;\n      }\n      element.focus();\n    }\n    if (isKeypress(event, KeyboardCodes.Enter)) {\n      onClickFunc();\n    }\n  };\n\n  /**\n   * Renders the element representing the received date.\n   *\n   * @param currentDate - The array representing the date [YYYY, MM, DD].\n   * @memberOf Calendar\n   */\n  renderCalendarDate = (currentDate) => {\n    const { selectedDate, calendarModel, today, locale } = this.state;\n    const { classes } = this.props;\n\n    // Checks if the received date is the same as today.\n    const isToday = isSameDay(currentDate, today);\n\n    // Checks if the received date is the same as the currently selected date.\n    const isCurrent = selectedDate && isSameDay(currentDate, selectedDate);\n\n    // Checks if the received date is in the same month and year the current month and year in the state.\n    const inMonth =\n      calendarModel.month &&\n      calendarModel.year &&\n      isSameMonth(currentDate, makeUTCDate(calendarModel.year, calendarModel.month, 1));\n\n    // Checks if the date is in a valid range\n    const dateInValidRange = isDateInValidRange(currentDate);\n\n    // Sets the initial class as `calendarDate` and then adds the rest of the classes according to the state.\n    let className = `${classes.calendarDate}`;\n    let typographyVariant = \"normalText\";\n\n    if (isCurrent) {\n      className += ` ${classes.calendarDateSelected}`;\n    } else if (isToday) {\n      typographyVariant = \"highlightText\";\n    } else if (!inMonth) {\n      className += ` ${classes.calendarDateNotInMonth}`;\n    }\n\n    const onClickFunc = dateInValidRange ? this.selectDate(currentDate) : undefined;\n\n    const DateDisplay = () => (\n      <div\n        className={classes.focusSelection}\n        onClick={onClickFunc}\n        onKeyDown={(event) => this.arrowKeysFocus(event, onClickFunc, 7)}\n        role=\"presentation\"\n        tabIndex={0}\n      >\n        <HvTypography\n          variant={typographyVariant}\n          className={`${className} ${dateInValidRange ? \"\" : classes.calendarDateInvalid}`}\n        >\n          {currentDate.getUTCDate()}\n        </HvTypography>\n      </div>\n    );\n\n    const DateTooltipWrapper = withTooltip(DateDisplay, getFormattedDate(currentDate, locale));\n\n    return <DateTooltipWrapper key={getDateISO(currentDate)} />;\n  };\n\n  /**\n   * Renders the header element.\n   *\n   * @memberOf Calendar\n   */\n  renderHeader = () => {\n    const { selectedDate } = this.state;\n    const { label, locale, id } = this.props;\n\n    return (\n      <Header\n        id={id}\n        inputDate={selectedDate || makeUTCToday()}\n        locale={locale}\n        topText={label}\n        onSelection={this.changeSelectedDateHeader}\n      />\n    );\n  };\n\n  /**\n   * Renders the monthly view. This view is used when pressing the month.\n   *\n   * @memberOf Calendar\n   */\n  renderMonthlyView = () => {\n    const { classes, rangeMode } = this.props;\n    const { calendarModel } = this.state;\n\n    return (\n      <div\n        className={`${classes.calendarMonthlyGrid} ${\n          rangeMode ? classes.rangeModeWidth : classes.normalWidth\n        }`}\n      >\n        {this.listMonthNamesShort.map((monthName, index) => {\n          const key = `${monthName}-${index}`;\n          let className = `${classes.calendarMonthlyCell}`;\n          if (index + 1 === calendarModel.month) {\n            className += ` ${classes.calendarMonthlyCellSelected}`;\n          }\n          const onClick = () => this.navigateTo(NAV_OPTIONS.MONTH, index + 1);\n          return (\n            <div\n              className={classes.focusSelection}\n              key={key}\n              role=\"presentation\"\n              onClick={onClick}\n              onKeyDown={(event) => this.arrowKeysFocus(event, onClick, 3)}\n              tabIndex={0}\n            >\n              <HvTypography variant=\"normalText\" className={className}>\n                {monthName}\n              </HvTypography>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  /**\n   * Renders the content according to the viewMode of the calendar.\n   *\n   * @memberOf Calendar\n   */\n  renderContent = () => {\n    const { classes } = this.props;\n    const { viewMode, calendarModel } = this.state;\n\n    return (\n      <>\n        {viewMode === VIEW_MODE.CALENDAR && this.renderNavigation()}\n        {viewMode === VIEW_MODE.MONTHLY && this.renderMonthlyView()}\n        <div className={classes.calendarGrid}>\n          {this.renderDayLabel()}\n          {calendarModel.dates.map(this.renderCalendarDate)}\n        </div>\n      </>\n    );\n  };\n\n  render() {\n    const { classes, id } = this.props;\n    return (\n      <div id={id} className={classes.calendarWrapper}>\n        {this.renderHeader()}\n        {this.renderContent()}\n      </div>\n    );\n  }\n}\n\nCalendar.propTypes = {\n  /**\n   * Styles applied from the theme.\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale: PropTypes.string,\n  /**\n   * Date that should be used as the starting selected date for the calendar.\n   */\n  selectedDate: PropTypes.instanceOf(Date),\n  /**\n   * Date that will be used to know which month and year should be displayed on the calendar. The value of the day is\n   * irrelevant.\n   */\n  visibleDate: PropTypes.instanceOf(Date),\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  handleDateChange: PropTypes.func,\n  /**\n   * Callback function to be triggered when visible date has changed.\n   */\n  handleVisibleDateChange: PropTypes.func,\n  /**\n   * Indicates if the calendar is being used in ranged mode.\n   */\n  rangeMode: PropTypes.bool,\n  /**\n   * Text to show in the header on range mode.\n   */\n  label: PropTypes.string,\n};\n\nCalendar.defaultProps = {\n  id: undefined,\n  locale: DEFAULT_LOCALE,\n  selectedDate: undefined,\n  visibleDate: undefined,\n  handleDateChange: undefined,\n  handleVisibleDateChange: undefined,\n  rangeMode: false,\n  label: null,\n};\n\nexport default withStyles(styles, { name: \"HvDatePickerCalendar\" })(Calendar);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAiBA;;AACA;;;;;;;;;;IAEMA,Q;;;;;EACJ,kBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACjB,0BAAMA,KAAN;IADiB,kGAgDG,YAAM;MAC1B,IAAQC,MAAR,GAAmB,MAAKC,KAAxB,CAAQD,MAAR;MAEA,MAAKE,kBAAL,GAA0B,IAAAC,yBAAA,EAAkBH,MAAlB,EAA0BI,4BAAA,CAAsBC,IAAhD,CAA1B;MACA,MAAKC,mBAAL,GAA2B,IAAAH,yBAAA,EAAkBH,MAAlB,EAA0BI,4BAAA,CAAsBG,KAAhD,CAA3B;MACA,MAAKC,sBAAL,GAA8B,IAAAC,2BAAA,EAAoBT,MAApB,EAA4BI,4BAAA,CAAsBM,MAAlD,CAA9B;IACD,CAtDkB;IAAA,uGAwDQ,UAACC,IAAD,EAAOC,mBAAP;MAAA,OACzB,MAAKC,gBAAL,CAAsBF,IAAtB,EAA4BC,mBAA5B,CADyB;IAAA,CAxDR;IAAA,+FAiEA,UAACD,IAAD,EAAsC;MAAA,IAA/BC,mBAA+B,uEAAT,IAAS;MACvD,IAAQE,gBAAR,GAA6B,MAAKf,KAAlC,CAAQe,gBAAR;;MACA,MAAKC,QAAL,CAAc,MAAKC,qBAAL,CAA2BL,IAA3B,CAAd;;MAEA,IAAI,OAAOG,gBAAP,KAA4B,UAAhC,EAA4C;QAC1CA,gBAAgB,CAACH,IAAD,EAAOC,mBAAP,CAAhB;MACD;IACF,CAxEkB;IAAA,yFAgFN,UAACD,IAAD;MAAA,OAAU,UAACM,KAAD,EAAW;QAChC,IAAIA,KAAJ,EAAW;UACTA,KAAK,CAACC,cAAN;QACD;;QACD,MAAKL,gBAAL,CAAsBF,IAAtB;MACD,CALY;IAAA,CAhFM;IAAA,yFA8FN,UAACQ,SAAD,EAAYC,KAAZ,EAAsB;MACjC,IAAQC,aAAR,GAA0B,MAAKpB,KAA/B,CAAQoB,aAAR;;MAEA,MAAKN,QAAL,CAAc;QACZM,aAAa,EAAEA,aAAa,CAACC,UAAd,CAAyBH,SAAzB,EAAoCC,KAApC,CADH;QAEZG,QAAQ,EAAEC,gBAAA,CAAUC;MAFR,CAAd;;MAIA,MAAKC,kBAAL;IACD,CAtGkB;IAAA,iGA6GE,YAAM;MACzB,IAAQL,aAAR,GAA0B,MAAKpB,KAA/B,CAAQoB,aAAR;MACA,IAAQM,uBAAR,GAAoC,MAAK5B,KAAzC,CAAQ4B,uBAAR;;MAEA,IAAI,OAAOA,uBAAP,KAAmC,UAAvC,EAAmD;QACjD,IAAMC,WAAW,GAAG,IAAAC,mBAAA,EAAYR,aAAa,CAACS,IAA1B,EAAgCT,aAAa,CAACD,KAA9C,EAAqD,CAArD,CAApB;QACAO,uBAAuB,CAACC,WAAD,CAAvB;MACD;IACF,CArHkB;IAAA,oGAmIK,UAACG,YAAD,EAAsC;MAAA,IAAvBH,WAAuB,uEAAT,IAAS;MAC5D,IAAQ5B,MAAR,GAAmB,MAAKD,KAAxB,CAAQC,MAAR;MAEA,IAAMgC,YAAY,GAAG,IAAAC,cAAA,EAAOF,YAAP,CAArB;MACA,IAAMG,iBAAiB,GAAGF,YAAY,GAAGD,YAAH,GAAkB,IAAAI,oBAAA,GAAxD;MACA,IAAMC,gBAAgB,GAAG,IAAAH,cAAA,EAAOL,WAAP,IAAsBA,WAAtB,GAAoCM,iBAA7D;MAEA,IAAMG,YAAY,GAAGD,gBAAgB,CAACE,WAAjB,KAAiC,CAAtD;MACA,IAAMC,WAAW,GAAGH,gBAAgB,CAACI,cAAjB,EAApB;MACA,IAAMC,WAAW,GAAG,IAAAC,qBAAA,EAAc1C,MAAd,IAAwBA,MAAxB,GAAiC2C,sBAArD;MAEA,OAAO;QACLZ,YAAY,EAAEC,YAAY,GAAGD,YAAH,GAAkB,IADvC;QAELH,WAAW,EAAEQ,gBAFR;QAGLf,aAAa,EAAE,IAAIuB,cAAJ,CAAkBP,YAAlB,EAAgCE,WAAhC,CAHV;QAILhB,QAAQ,EAAEC,gBAAA,CAAUC,QAJf;QAKLzB,MAAM,EAAEyC;MALH,CAAP;IAOD,CArJkB;IAAA,oGA4JK,YAAM;MAC5B,kBAAsC,MAAK1C,KAA3C;MAAA,IAAQgC,YAAR,eAAQA,YAAR;MAAA,IAAsBH,WAAtB,eAAsBA,WAAtB;MAEA,OAAO,MAAKZ,qBAAL,CAA2Be,YAA3B,EAAyCH,WAAzC,CAAP;IACD,CAhKkB;IAAA,+FAuKA,YAAM;MACvB,IAAQP,aAAR,GAA0B,MAAKpB,KAA/B,CAAQoB,aAAR;MACA,mBAAwB,MAAKtB,KAA7B;MAAA,IAAQ8C,OAAR,gBAAQA,OAAR;MAAA,IAAiBC,EAAjB,gBAAiBA,EAAjB;MACA,IAAQhB,IAAR,GAAwBT,aAAxB,CAAQS,IAAR;MAAA,IAAcV,KAAd,GAAwBC,aAAxB,CAAcD,KAAd;MAEA,IAAM2B,SAAS,GAAG,MAAK7C,kBAAL,CAAwBkB,KAAK,GAAG,CAAhC,CAAlB;MACA,IAAM4B,iBAAiB,GAAG,IAAAC,2BAAA,EAAoBnB,IAApB,EAA0B,CAA1B,CAA1B;MACA,IAAMoB,aAAa,GAAG,IAAAC,uBAAA,EAAgBrB,IAAhB,EAAsB,EAAtB,CAAtB;MACA,IAAMsB,kBAAkB,GAAG,IAAAH,2BAAA,EAAoBnB,IAApB,EAA0BV,KAA1B,CAA3B;MACA,IAAMiC,cAAc,GAAG,IAAAF,uBAAA,EAAgBrB,IAAhB,EAAsBV,KAAtB,CAAvB;MAEA,oBACE;QAAK,SAAS,EAAEyB,OAAO,CAACS;MAAxB,gBACE;QAAK,SAAS,EAAET,OAAO,CAACU;MAAxB,gBACE,6BAAC,mBAAD;QACE,EAAE,EAAE,IAAAC,YAAA,EAAMV,EAAN,EAAU,kBAAV,CADN;QAEE,cAAc,EAAEC,SAFlB;QAGE,kBAAkB,EAAE,8BAAM;UACxB,MAAKzB,UAAL,CAAgBmC,kBAAA,CAAYC,cAA5B;QACD,CALH;QAME,cAAc,EAAE;UAAA,OAAM,MAAKpC,UAAL,CAAgBmC,kBAAA,CAAYE,UAA5B,CAAN;QAAA,CANlB;QAOE,WAAW,EAAE;UAAA,OAAM,MAAK5C,QAAL,CAAc;YAAEQ,QAAQ,EAAEC,gBAAA,CAAUoC;UAAtB,CAAd,CAAN;QAAA,CAPf;QAQE,SAAS,EAAEf,OAAO,CAACU,eARrB;QASE,iBAAiB,EAAEH,kBATrB;QAUE,aAAa,EAAEC;MAVjB,EADF,CADF,eAgBE,6BAAC,mBAAD;QACE,EAAE,EAAE,IAAAG,YAAA,EAAMV,EAAN,EAAU,iBAAV,CADN;QAEE,cAAc,EAAEhB,IAAI,CAAC+B,QAAL,EAFlB;QAGE,kBAAkB,EAAE;UAAA,OAAM,MAAKvC,UAAL,CAAgBmC,kBAAA,CAAYK,aAA5B,CAAN;QAAA,CAHtB;QAIE,cAAc,EAAE;UAAA,OAAM,MAAKxC,UAAL,CAAgBmC,kBAAA,CAAYM,SAA5B,CAAN;QAAA,CAJlB;QAKE,iBAAiB,EAAEf,iBALrB;QAME,aAAa,EAAEE;MANjB,EAhBF,CADF;IA2BD,CA7MkB;IAAA,6FAoNF,YAAM;MACrB,IAAQL,OAAR,GAAoB,MAAK9C,KAAzB,CAAQ8C,OAAR;MAEA,OAAO,MAAKrC,sBAAL,CAA4BwD,GAA5B,CAAgC,UAACC,OAAD,EAAUC,KAAV,EAAoB;QACzD,IAAMC,GAAG,aAAMF,OAAN,cAAiBC,KAAjB,CAAT;QACA,oBACE,6BAAC,mBAAD;UACE,OAAO,EAAC,eADV;UAEE,SAAS,EAAErB,OAAO,CAACuB,WAFrB;UAGE,GAAG,EAAED,GAHP;UAIE,KAAK,EAAED;QAJT,GAMGD,OANH,CADF;MAUD,CAZM,CAAP;IAaD,CApOkB;IAAA,6FAsOF,UAAChD,KAAD,EAAQoD,WAAR,EAAqBC,SAArB,EAAmC;MAClD,IAAI,IAAAC,iBAAA,EAAWtD,KAAX,EAAkBuD,oBAAA,CAAcC,SAAhC,CAAJ,EAAgD;QAC9CxD,KAAK,CAACC,cAAN;QACAwD,QAAQ,CAACC,aAAT,CAAuBC,eAAvB,CAAuCC,KAAvC;MACD;;MACD,IAAI,IAAAN,iBAAA,EAAWtD,KAAX,EAAkBuD,oBAAA,CAAcM,UAAhC,CAAJ,EAAiD;QAC/C7D,KAAK,CAACC,cAAN;QACAwD,QAAQ,CAACC,aAAT,CAAuBI,WAAvB,CAAmCF,KAAnC;MACD;;MACD,IAAI,IAAAN,iBAAA,EAAWtD,KAAX,EAAkBuD,oBAAA,CAAcQ,OAAhC,CAAJ,EAA8C;QAC5C/D,KAAK,CAACC,cAAN;QACA,IAAI+D,OAAO,GAAGP,QAAQ,CAACC,aAAvB;;QACA,KAAK,IAAIO,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGZ,SAApB,EAA+BY,CAAC,IAAI,CAApC,EAAuC;UACrCD,OAAO,GAAGA,OAAO,CAACL,eAAlB;QACD;;QACDK,OAAO,CAACJ,KAAR;MACD;;MACD,IAAI,IAAAN,iBAAA,EAAWtD,KAAX,EAAkBuD,oBAAA,CAAcW,SAAhC,CAAJ,EAAgD;QAC9ClE,KAAK,CAACC,cAAN;QACA,IAAI+D,QAAO,GAAGP,QAAQ,CAACC,aAAvB;;QACA,KAAK,IAAIO,EAAC,GAAG,CAAb,EAAgBA,EAAC,GAAGZ,SAApB,EAA+BY,EAAC,IAAI,CAApC,EAAuC;UACrCD,QAAO,GAAGA,QAAO,CAACF,WAAlB;QACD;;QACDE,QAAO,CAACJ,KAAR;MACD;;MACD,IAAI,IAAAN,iBAAA,EAAWtD,KAAX,EAAkBuD,oBAAA,CAAcY,KAAhC,CAAJ,EAA4C;QAC1Cf,WAAW;MACZ;IACF,CAlQkB;IAAA,iGA0QE,UAACgB,WAAD,EAAiB;MACpC,kBAAuD,MAAKpF,KAA5D;MAAA,IAAQ8B,YAAR,eAAQA,YAAR;MAAA,IAAsBV,aAAtB,eAAsBA,aAAtB;MAAA,IAAqCiE,KAArC,eAAqCA,KAArC;MAAA,IAA4CtF,MAA5C,eAA4CA,MAA5C;MACA,IAAQ6C,OAAR,GAAoB,MAAK9C,KAAzB,CAAQ8C,OAAR,CAFoC,CAIpC;;MACA,IAAM0C,OAAO,GAAG,IAAAC,iBAAA,EAAUH,WAAV,EAAuBC,KAAvB,CAAhB,CALoC,CAOpC;;MACA,IAAMG,SAAS,GAAG1D,YAAY,IAAI,IAAAyD,iBAAA,EAAUH,WAAV,EAAuBtD,YAAvB,CAAlC,CARoC,CAUpC;;MACA,IAAM2D,OAAO,GACXrE,aAAa,CAACD,KAAd,IACAC,aAAa,CAACS,IADd,IAEA,IAAA6D,mBAAA,EAAYN,WAAZ,EAAyB,IAAAxD,mBAAA,EAAYR,aAAa,CAACS,IAA1B,EAAgCT,aAAa,CAACD,KAA9C,EAAqD,CAArD,CAAzB,CAHF,CAXoC,CAgBpC;;MACA,IAAMwE,gBAAgB,GAAG,IAAAC,0BAAA,EAAmBR,WAAnB,CAAzB,CAjBoC,CAmBpC;;MACA,IAAIS,SAAS,aAAMjD,OAAO,CAACkD,YAAd,CAAb;MACA,IAAIC,iBAAiB,GAAG,YAAxB;;MAEA,IAAIP,SAAJ,EAAe;QACbK,SAAS,eAAQjD,OAAO,CAACoD,oBAAhB,CAAT;MACD,CAFD,MAEO,IAAIV,OAAJ,EAAa;QAClBS,iBAAiB,GAAG,eAApB;MACD,CAFM,MAEA,IAAI,CAACN,OAAL,EAAc;QACnBI,SAAS,eAAQjD,OAAO,CAACqD,sBAAhB,CAAT;MACD;;MAED,IAAM7B,WAAW,GAAGuB,gBAAgB,GAAG,MAAKO,UAAL,CAAgBd,WAAhB,CAAH,GAAkCe,SAAtE;;MAEA,IAAMC,WAAW,GAAG,SAAdA,WAAc;QAAA,oBAClB;UACE,SAAS,EAAExD,OAAO,CAACyD,cADrB;UAEE,OAAO,EAAEjC,WAFX;UAGE,SAAS,EAAE,mBAACpD,KAAD;YAAA,OAAW,MAAKsF,cAAL,CAAoBtF,KAApB,EAA2BoD,WAA3B,EAAwC,CAAxC,CAAX;UAAA,CAHb;UAIE,IAAI,EAAC,cAJP;UAKE,QAAQ,EAAE;QALZ,gBAOE,6BAAC,mBAAD;UACE,OAAO,EAAE2B,iBADX;UAEE,SAAS,YAAKF,SAAL,cAAkBF,gBAAgB,GAAG,EAAH,GAAQ/C,OAAO,CAAC2D,mBAAlD;QAFX,GAIGnB,WAAW,CAACoB,UAAZ,EAJH,CAPF,CADkB;MAAA,CAApB;;MAiBA,IAAMC,kBAAkB,GAAG,IAAAC,oBAAA,EAAYN,WAAZ,EAAyB,IAAAO,wBAAA,EAAiBvB,WAAjB,EAA8BrF,MAA9B,CAAzB,CAA3B;MAEA,oBAAO,6BAAC,kBAAD;QAAoB,GAAG,EAAE,IAAA6G,kBAAA,EAAWxB,WAAX;MAAzB,EAAP;IACD,CA/TkB;IAAA,2FAsUJ,YAAM;MACnB,IAAQtD,YAAR,GAAyB,MAAK9B,KAA9B,CAAQ8B,YAAR;MACA,mBAA8B,MAAKhC,KAAnC;MAAA,IAAQ+G,KAAR,gBAAQA,KAAR;MAAA,IAAe9G,MAAf,gBAAeA,MAAf;MAAA,IAAuB8C,EAAvB,gBAAuBA,EAAvB;MAEA,oBACE,6BAAC,eAAD;QACE,EAAE,EAAEA,EADN;QAEE,SAAS,EAAEf,YAAY,IAAI,IAAAI,oBAAA,GAF7B;QAGE,MAAM,EAAEnC,MAHV;QAIE,OAAO,EAAE8G,KAJX;QAKE,WAAW,EAAE,MAAKC;MALpB,EADF;IASD,CAnVkB;IAAA,gGA0VC,YAAM;MACxB,mBAA+B,MAAKhH,KAApC;MAAA,IAAQ8C,OAAR,gBAAQA,OAAR;MAAA,IAAiBmE,SAAjB,gBAAiBA,SAAjB;MACA,IAAQ3F,aAAR,GAA0B,MAAKpB,KAA/B,CAAQoB,aAAR;MAEA,oBACE;QACE,SAAS,YAAKwB,OAAO,CAACoE,mBAAb,cACPD,SAAS,GAAGnE,OAAO,CAACqE,cAAX,GAA4BrE,OAAO,CAACsE,WADtC;MADX,GAKG,MAAK7G,mBAAL,CAAyB0D,GAAzB,CAA6B,UAACjB,SAAD,EAAYmB,KAAZ,EAAsB;QAClD,IAAMC,GAAG,aAAMpB,SAAN,cAAmBmB,KAAnB,CAAT;QACA,IAAI4B,SAAS,aAAMjD,OAAO,CAACuE,mBAAd,CAAb;;QACA,IAAIlD,KAAK,GAAG,CAAR,KAAc7C,aAAa,CAACD,KAAhC,EAAuC;UACrC0E,SAAS,eAAQjD,OAAO,CAACwE,2BAAhB,CAAT;QACD;;QACD,IAAMC,OAAO,GAAG,SAAVA,OAAU;UAAA,OAAM,MAAKhG,UAAL,CAAgBmC,kBAAA,CAAY8D,KAA5B,EAAmCrD,KAAK,GAAG,CAA3C,CAAN;QAAA,CAAhB;;QACA,oBACE;UACE,SAAS,EAAErB,OAAO,CAACyD,cADrB;UAEE,GAAG,EAAEnC,GAFP;UAGE,IAAI,EAAC,cAHP;UAIE,OAAO,EAAEmD,OAJX;UAKE,SAAS,EAAE,mBAACrG,KAAD;YAAA,OAAW,MAAKsF,cAAL,CAAoBtF,KAApB,EAA2BqG,OAA3B,EAAoC,CAApC,CAAX;UAAA,CALb;UAME,QAAQ,EAAE;QANZ,gBAQE,6BAAC,mBAAD;UAAc,OAAO,EAAC,YAAtB;UAAmC,SAAS,EAAExB;QAA9C,GACG/C,SADH,CARF,CADF;MAcD,CArBA,CALH,CADF;IA8BD,CA5XkB;IAAA,4FAmYH,YAAM;MACpB,IAAQF,OAAR,GAAoB,MAAK9C,KAAzB,CAAQ8C,OAAR;MACA,mBAAoC,MAAK5C,KAAzC;MAAA,IAAQsB,QAAR,gBAAQA,QAAR;MAAA,IAAkBF,aAAlB,gBAAkBA,aAAlB;MAEA,oBACE,4DACGE,QAAQ,KAAKC,gBAAA,CAAUC,QAAvB,IAAmC,MAAK+F,gBAAL,EADtC,EAEGjG,QAAQ,KAAKC,gBAAA,CAAUoC,OAAvB,IAAkC,MAAK6D,iBAAL,EAFrC,eAGE;QAAK,SAAS,EAAE5E,OAAO,CAAC6E;MAAxB,GACG,MAAKC,cAAL,EADH,EAEGtG,aAAa,CAACuG,KAAd,CAAoB5D,GAApB,CAAwB,MAAK6D,kBAA7B,CAFH,CAHF,CADF;IAUD,CAjZkB;IAEjB,MAAK5H,KAAL,mCAAkB,MAAK6H,qBAAL,EAAlB;MAAgDxC,KAAK,EAAE,IAAAnD,oBAAA;IAAvD;;IAEA,MAAK4F,mBAAL;;IAJiB;EAKlB;EAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;WAgYE,kBAAS;MACP,mBAAwB,KAAKhI,KAA7B;MAAA,IAAQ8C,OAAR,gBAAQA,OAAR;MAAA,IAAiBC,EAAjB,gBAAiBA,EAAjB;MACA,oBACE;QAAK,EAAE,EAAEA,EAAT;QAAa,SAAS,EAAED,OAAO,CAACmF;MAAhC,GACG,KAAKC,YAAL,EADH,EAEG,KAAKC,aAAL,EAFH,CADF;IAMD;;;WAvYD,kCAAgCnI,KAAhC,EAAuCE,KAAvC,EAA8C;MAC5C,IAAI,IAAAgC,cAAA,EAAOlC,KAAK,CAACgC,YAAb,KAA8B,CAAC,IAAAyD,iBAAA,EAAUzF,KAAK,CAACgC,YAAhB,EAA8B9B,KAAK,CAAC8B,YAApC,CAAnC,EAAsF;QACpF,IAAMoG,QAAQ,GAAG,EAAjB;QACAA,QAAQ,CAACpG,YAAT,GAAwBhC,KAAK,CAACgC,YAA9B;;QAEA,IAAI,CAAC,IAAA4D,mBAAA,EAAY5F,KAAK,CAACgC,YAAlB,EAAgC9B,KAAK,CAAC2B,WAAtC,CAAL,EAAyD;UACvD,IAAMwG,cAAc,GAAGrI,KAAK,CAACgC,YAA7B;UACA,IAAMM,YAAY,GAAG+F,cAAc,CAAC9F,WAAf,KAA+B,CAApD;UACA,IAAMC,WAAW,GAAG6F,cAAc,CAAC5F,cAAf,EAApB;UAEA2F,QAAQ,CAACvG,WAAT,GAAuBwG,cAAvB;UACAD,QAAQ,CAAC9G,aAAT,GAAyBpB,KAAK,CAACoB,aAAN,CAAoBC,UAApB,CACvBmC,kBAAA,CAAY4E,UADW,EAEvBhG,YAFuB,EAGvBE,WAHuB,CAAzB;QAKD;;QAED,OAAO4F,QAAP;MACD;;MACD,OAAO,IAAP;IACD;IAED;AACF;AACA;AACA;AACA;;;;EAhDuBG,cAAA,CAAMC,S;;AA+Z7B,wCAAAzI,QAAQ,CAAC0I,SAAT,GAAqB;EACnB;AACF;AACA;EACE3F,OAAO,EAAE4F,kBAAA,CAAUC,UAAV,CAAqBC,MAArB,EAA6BC,UAJnB;;EAKnB;AACF;AACA;EACE9F,EAAE,EAAE2F,kBAAA,CAAUI,MARK;;EASnB;AACF;AACA;EACE7I,MAAM,EAAEyI,kBAAA,CAAUI,MAZC;;EAanB;AACF;AACA;EACE9G,YAAY,EAAE0G,kBAAA,CAAUC,UAAV,CAAqBI,IAArB,CAhBK;;EAiBnB;AACF;AACA;AACA;EACElH,WAAW,EAAE6G,kBAAA,CAAUC,UAAV,CAAqBI,IAArB,CArBM;;EAsBnB;AACF;AACA;EACEhI,gBAAgB,EAAE2H,kBAAA,CAAUM,IAzBT;;EA0BnB;AACF;AACA;EACEpH,uBAAuB,EAAE8G,kBAAA,CAAUM,IA7BhB;;EA8BnB;AACF;AACA;EACE/B,SAAS,EAAEyB,kBAAA,CAAUO,IAjCF;;EAkCnB;AACF;AACA;EACElC,KAAK,EAAE2B,kBAAA,CAAUI;AArCE,CAArB;AAwCA/I,QAAQ,CAACmJ,YAAT,GAAwB;EACtBnG,EAAE,EAAEsD,SADkB;EAEtBpG,MAAM,EAAE2C,sBAFc;EAGtBZ,YAAY,EAAEqE,SAHQ;EAItBxE,WAAW,EAAEwE,SAJS;EAKtBtF,gBAAgB,EAAEsF,SALI;EAMtBzE,uBAAuB,EAAEyE,SANH;EAOtBY,SAAS,EAAE,KAPW;EAQtBF,KAAK,EAAE;AARe,CAAxB;;eAWe,IAAAoC,gBAAA,EAAWC,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAqDtJ,QAArD,C"}

package/dist/DatePicker/Calendar/Header/Header.js

@@ -0,0 +1,249 @@
+"use strict";
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.reflect.construct.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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 _moment = _interopRequireDefault(require("moment"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _core = require("@material-ui/core");
+
+var _utils = require("../../../utils");
+
+var _Typography = _interopRequireDefault(require("../../../Typography"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+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 format = function format(date) {
+  return date.format("D MMM YYYY");
+};
+
+var Header = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Header, _React$Component);
+
+  var _super = _createSuper(Header);
+
+  function Header(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Header);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "chooseShowValue", function (shouldCloseCalendar, isInvalid, value, formatShowValue, showValue) {
+      var newShowValue;
+
+      if (shouldCloseCalendar) {
+        if (!isInvalid) newShowValue = showValue;else newShowValue = value;
+      } else {
+        newShowValue = formatShowValue;
+      }
+
+      return newShowValue;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "checkInputData", function () {
+      var shouldCloseCalendar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var _this$state = _this.state,
+          prevValue = _this$state.prevValue,
+          value = _this$state.value,
+          showValue = _this$state.showValue,
+          isInvalid = _this$state.isInvalid;
+      var onSelection = _this.props.onSelection;
+
+      var momentDate = _moment.default.utc(value, "L");
+
+      if (!momentDate.isValid()) {
+        _this.setState({
+          isInvalid: true
+        });
+      } else {
+        var formatShowValue = format(momentDate);
+
+        var newShowValue = _this.chooseShowValue(shouldCloseCalendar, isInvalid, value, formatShowValue, showValue);
+
+        if (!prevValue.isSame(momentDate, "date") || shouldCloseCalendar) {
+          _this.setState({
+            isInvalid: false,
+            showValue: newShowValue,
+            value: momentDate,
+            prevValue: momentDate,
+            weekDay: momentDate.format("ddd")
+          });
+
+          onSelection(momentDate.toDate(), shouldCloseCalendar);
+        } else {
+          _this.setState({
+            showValue: newShowValue
+          });
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlurHandler", function () {
+      _this.checkInputData();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocusHandler", function () {
+      var value = _this.state.value;
+      if (value) _this.setState({
+        showValue: value.format("L")
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDownHandler", function (event) {
+      if ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.Enter)) {
+        _this.checkInputData(true);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChangeHandler", function (event) {
+      var newValue = event.target.value;
+
+      _this.setState({
+        value: newValue,
+        showValue: newValue
+      });
+    });
+    var _this$props = _this.props,
+        inputDate = _this$props.inputDate,
+        locale = _this$props.locale;
+
+    _moment.default.locale(locale);
+
+    var _value = inputDate ? (0, _moment.default)(inputDate, "L").utc() : null;
+
+    _this.state = {
+      prevValue: _value,
+      showValue: _value ? format(_value) : null,
+      value: _value,
+      weekDay: _value && _value.isValid() ? _value.format("ddd") : null,
+      isInvalid: false,
+      // eslint-disable-next-line no-underscore-dangle
+      localeFormat: (0, _moment.default)().creationData().locale._longDateFormat.L
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(Header, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          topText = _this$props2.topText,
+          id = _this$props2.id;
+      var _this$state2 = this.state,
+          showValue = _this$state2.showValue,
+          isInvalid = _this$state2.isInvalid,
+          weekDay = _this$state2.weekDay,
+          localeFormat = _this$state2.localeFormat;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        variant: "labelText",
+        className: classes.rangeLabel
+      }, topText), /*#__PURE__*/_react.default.createElement("div", {
+        id: (0, _utils.setId)(id, "header"),
+        className: (0, _clsx.default)(classes.background, isInvalid && classes.invalid)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.headerDayOfWeek
+      }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        variant: "normalText"
+      }, weekDay)), /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.headerDate
+      }, /*#__PURE__*/_react.default.createElement("input", {
+        id: (0, _utils.setId)(id, "header-input"),
+        placeholder: localeFormat,
+        value: showValue,
+        className: classes.input,
+        onKeyDown: this.onKeyDownHandler,
+        onChange: this.onChangeHandler,
+        onBlur: this.onBlurHandler,
+        onFocus: this.onFocusHandler
+      }))));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      var value = props.inputDate ? (0, _moment.default)(props.inputDate, "L").utc() : null;
+
+      if (!value.isSame(state.prevValue, "date")) {
+        return {
+          prevValue: value,
+          showValue: value ? format(value) : null,
+          value: value,
+          weekDay: value && value.isValid() ? value.format("ddd") : null
+        };
+      }
+
+      return null;
+    }
+  }]);
+  return Header;
+}(_react.default.Component);
+
+process.env.NODE_ENV !== "production" ? Header.propTypes = {
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: _propTypes.default.instanceOf(Object).isRequired,
+
+  /**
+   * Identifier.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * The text to be shown on the main part of the header.
+   */
+  inputDate: _propTypes.default.instanceOf(Date),
+
+  /**
+   * The text to be shown above the header.
+   */
+  topText: _propTypes.default.string,
+
+  /**
+   * Locale to be used by the calendar.
+   */
+  locale: _propTypes.default.string.isRequired,
+
+  /**
+   * Callback to define the input date.
+   */
+  onSelection: _propTypes.default.func.isRequired
+} : void 0;
+Header.defaultProps = {
+  id: undefined,
+  inputDate: null,
+  topText: null
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvDatePickerHeader"
+})(Header);
+
+exports.default = _default;
+//# sourceMappingURL=Header.js.map

package/dist/DatePicker/Calendar/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","names":["format","date","Header","props","shouldCloseCalendar","isInvalid","value","formatShowValue","showValue","newShowValue","state","prevValue","onSelection","momentDate","moment","utc","isValid","setState","chooseShowValue","isSame","weekDay","toDate","checkInputData","event","isKeypress","KeyboardCodes","Enter","newValue","target","inputDate","locale","localeFormat","creationData","_longDateFormat","L","classes","topText","id","rangeLabel","setId","clsx","background","invalid","headerDayOfWeek","headerDate","input","onKeyDownHandler","onChangeHandler","onBlurHandler","onFocusHandler","React","Component","propTypes","PropTypes","instanceOf","Object","isRequired","string","Date","func","defaultProps","undefined","withStyles","styles","name"],"sources":["../../../../src/DatePicker/Calendar/Header/Header.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { setId, isKeypress, KeyboardCodes } from \"../../../utils\";\nimport HvTypography from \"../../../Typography\";\nimport styles from \"./styles\";\n\nconst format = (date) => date.format(\"D MMM YYYY\");\n\nclass Header extends React.Component {\n  constructor(props) {\n    super(props);\n    const { inputDate, locale } = this.props;\n    moment.locale(locale);\n    const value = inputDate ? moment(inputDate, \"L\").utc() : null;\n    this.state = {\n      prevValue: value,\n      showValue: value ? format(value) : null,\n      value,\n      weekDay: value && value.isValid() ? value.format(\"ddd\") : null,\n      isInvalid: false,\n      // eslint-disable-next-line no-underscore-dangle\n      localeFormat: moment().creationData().locale._longDateFormat.L,\n    };\n  }\n\n  static getDerivedStateFromProps(props, state) {\n    const value = props.inputDate ? moment(props.inputDate, \"L\").utc() : null;\n\n    if (!value.isSame(state.prevValue, \"date\")) {\n      return {\n        prevValue: value,\n        showValue: value ? format(value) : null,\n        value,\n        weekDay: value && value.isValid() ? value.format(\"ddd\") : null,\n      };\n    }\n    return null;\n  }\n\n  chooseShowValue = (shouldCloseCalendar, isInvalid, value, formatShowValue, showValue) => {\n    let newShowValue;\n    if (shouldCloseCalendar) {\n      if (!isInvalid) newShowValue = showValue;\n      else newShowValue = value;\n    } else {\n      newShowValue = formatShowValue;\n    }\n    return newShowValue;\n  };\n\n  /**\n   * Validate if the input data is a valid date.\n   */\n  checkInputData = (shouldCloseCalendar = false) => {\n    const { prevValue, value, showValue, isInvalid } = this.state;\n    const { onSelection } = this.props;\n    const momentDate = moment.utc(value, \"L\");\n\n    if (!momentDate.isValid()) {\n      this.setState({ isInvalid: true });\n    } else {\n      const formatShowValue = format(momentDate);\n\n      const newShowValue = this.chooseShowValue(\n        shouldCloseCalendar,\n        isInvalid,\n        value,\n        formatShowValue,\n        showValue\n      );\n\n      if (!prevValue.isSame(momentDate, \"date\") || shouldCloseCalendar) {\n        this.setState({\n          isInvalid: false,\n          showValue: newShowValue,\n          value: momentDate,\n          prevValue: momentDate,\n          weekDay: momentDate.format(\"ddd\"),\n        });\n        onSelection(momentDate.toDate(), shouldCloseCalendar);\n      } else {\n        this.setState({ showValue: newShowValue });\n      }\n    }\n  };\n\n  /**\n   * Onblur it confirms the data.\n   */\n  onBlurHandler = () => {\n    this.checkInputData();\n  };\n\n  /**\n   * If the value is a valid date, the input must show the date formatted according the locale.\n   */\n  onFocusHandler = () => {\n    const { value } = this.state;\n    if (value)\n      this.setState({\n        showValue: value.format(\"L\"),\n      });\n  };\n\n  /**\n   * At Enter key validate the data.\n   *\n   * @param event\n   */\n  onKeyDownHandler = (event) => {\n    if (isKeypress(event, KeyboardCodes.Enter)) {\n      this.checkInputData(true);\n    }\n  };\n\n  /**\n   * Set the states in each interaction of the input.\n   *\n   * @param event\n   */\n  onChangeHandler = (event) => {\n    const newValue = event.target.value;\n    this.setState({\n      value: newValue,\n      showValue: newValue,\n    });\n  };\n\n  render() {\n    const { classes, topText, id } = this.props;\n    const { showValue, isInvalid, weekDay, localeFormat } = this.state;\n\n    return (\n      <>\n        {topText && (\n          <HvTypography variant=\"labelText\" className={classes.rangeLabel}>\n            {topText}\n          </HvTypography>\n        )}\n        <div\n          id={setId(id, \"header\")}\n          className={clsx(classes.background, {\n            [classes.invalid]: isInvalid,\n          })}\n        >\n          <div className={classes.headerDayOfWeek}>\n            <HvTypography variant=\"normalText\">{weekDay}</HvTypography>\n          </div>\n          <div className={classes.headerDate}>\n            <input\n              id={setId(id, \"header-input\")}\n              placeholder={localeFormat}\n              value={showValue}\n              className={classes.input}\n              onKeyDown={this.onKeyDownHandler}\n              onChange={this.onChangeHandler}\n              onBlur={this.onBlurHandler}\n              onFocus={this.onFocusHandler}\n            />\n          </div>\n        </div>\n      </>\n    );\n  }\n}\n\nHeader.propTypes = {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  inputDate: PropTypes.instanceOf(Date),\n  /**\n   * The text to be shown above the header.\n   */\n  topText: PropTypes.string,\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale: PropTypes.string.isRequired,\n  /**\n   * Callback to define the input date.\n   */\n  onSelection: PropTypes.func.isRequired,\n};\n\nHeader.defaultProps = {\n  id: undefined,\n  inputDate: null,\n  topText: null,\n};\n\nexport default withStyles(styles, { name: \"HvDatePickerHeader\" })(Header);\n"],"mappings":"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"}

package/dist/DatePicker/Calendar/Header/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 _Header.default;
+  }
+});
+
+var _Header = _interopRequireDefault(require("./Header"));
+//# sourceMappingURL=index.js.map

package/dist/DatePicker/Calendar/Header/index.js.map

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

package/dist/DatePicker/Calendar/Header/styles.js

@@ -0,0 +1,71 @@
+"use strict";
+
+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.to-string.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;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _styles = require("../../../Focus/styles");
+
+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; }
+
+var styles = function styles(theme) {
+  return {
+    rangeLabel: {
+      paddingBottom: "10px"
+    },
+    background: {
+      backgroundColor: theme.palette.atmo3,
+      borderBottom: "1px solid ".concat(theme.palette.atmo6),
+      borderTop: "1px solid transparent",
+      borderLeft: "1px solid transparent",
+      borderRight: "1px solid transparent"
+    },
+    headerDayOfWeek: {
+      paddingTop: "5px",
+      paddingLeft: theme.spacing("xs")
+    },
+    headerDate: {
+      padding: "5px ".concat(theme.spacing("xs"), "px")
+    },
+    invalid: {
+      border: "1px solid ".concat(theme.palette.sema4)
+    },
+    input: _objectSpread(_objectSpread({
+      border: "none",
+      backgroundColor: "transparent",
+      fontFamily: theme.hv.typography.fontFamily
+    }, theme.hv.typography.mTitle), {}, {
+      width: "100%",
+      "&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator": {
+        " -webkit-appearance": "none",
+        display: "none"
+      },
+      "&:focus": _objectSpread({}, _styles.outlineStyles)
+    })
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/DatePicker/Calendar/Header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","theme","rangeLabel","paddingBottom","background","backgroundColor","palette","atmo3","borderBottom","atmo6","borderTop","borderLeft","borderRight","headerDayOfWeek","paddingTop","paddingLeft","spacing","headerDate","padding","invalid","border","sema4","input","fontFamily","hv","typography","mTitle","width","display","outlineStyles"],"sources":["../../../../src/DatePicker/Calendar/Header/styles.js"],"sourcesContent":["import { outlineStyles } from \"../../../Focus/styles\";\n\nconst styles = (theme) => ({\n  rangeLabel: {\n    paddingBottom: \"10px\",\n  },\n  background: {\n    backgroundColor: theme.palette.atmo3,\n    borderBottom: `1px solid ${theme.palette.atmo6}`,\n    borderTop: \"1px solid transparent\",\n    borderLeft: \"1px solid transparent\",\n    borderRight: \"1px solid transparent\",\n  },\n  headerDayOfWeek: {\n    paddingTop: \"5px\",\n    paddingLeft: theme.spacing(\"xs\"),\n  },\n  headerDate: {\n    padding: `5px ${theme.spacing(\"xs\")}px`,\n  },\n  invalid: {\n    border: `1px solid ${theme.palette.sema4}`,\n  },\n  input: {\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    fontFamily: theme.hv.typography.fontFamily,\n    ...theme.hv.typography.mTitle,\n    width: \"100%\",\n    \"&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator\": {\n      \" -webkit-appearance\": \"none\",\n      display: \"none\",\n    },\n    \"&:focus\": {\n      ...outlineStyles,\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;EAAA,OAAY;IACzBC,UAAU,EAAE;MACVC,aAAa,EAAE;IADL,CADa;IAIzBC,UAAU,EAAE;MACVC,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC,KADrB;MAEVC,YAAY,sBAAeP,KAAK,CAACK,OAAN,CAAcG,KAA7B,CAFF;MAGVC,SAAS,EAAE,uBAHD;MAIVC,UAAU,EAAE,uBAJF;MAKVC,WAAW,EAAE;IALH,CAJa;IAWzBC,eAAe,EAAE;MACfC,UAAU,EAAE,KADG;MAEfC,WAAW,EAAEd,KAAK,CAACe,OAAN,CAAc,IAAd;IAFE,CAXQ;IAezBC,UAAU,EAAE;MACVC,OAAO,gBAASjB,KAAK,CAACe,OAAN,CAAc,IAAd,CAAT;IADG,CAfa;IAkBzBG,OAAO,EAAE;MACPC,MAAM,sBAAenB,KAAK,CAACK,OAAN,CAAce,KAA7B;IADC,CAlBgB;IAqBzBC,KAAK;MACHF,MAAM,EAAE,MADL;MAEHf,eAAe,EAAE,aAFd;MAGHkB,UAAU,EAAEtB,KAAK,CAACuB,EAAN,CAASC,UAAT,CAAoBF;IAH7B,GAIAtB,KAAK,CAACuB,EAAN,CAASC,UAAT,CAAoBC,MAJpB;MAKHC,KAAK,EAAE,MALJ;MAMH,sEAAsE;QACpE,uBAAuB,MAD6C;QAEpEC,OAAO,EAAE;MAF2D,CANnE;MAUH,6BACKC,qBADL;IAVG;EArBoB,CAAZ;AAAA,CAAf;;eAqCe7B,M"}

package/dist/DatePicker/Calendar/Navigation/Navigation.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.concat.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _utils = require("../../../utils");
+
+var _Typography = _interopRequireDefault(require("../../../Typography"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+var Navigation = function Navigation(_ref) {
+  var id = _ref.id,
+      classes = _ref.classes,
+      onNavigatePrevious = _ref.onNavigatePrevious,
+      onNavigateNext = _ref.onNavigateNext,
+      onTextClick = _ref.onTextClick,
+      navigationText = _ref.navigationText,
+      isPreviousEnabled = _ref.isPreviousEnabled,
+      isNextEnabled = _ref.isNextEnabled;
+
+  var onkeyDownHandler = function onkeyDownHandler(event, funcAction) {
+    if ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.Enter) || (0, _utils.isKeypress)(event, _utils.KeyboardCodes.Space)) {
+      event.preventDefault();
+      funcAction(event);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactIcons.DropLeftXS, {
+    id: (0, _utils.setId)(id, "left"),
+    className: "".concat(classes.icon, " ").concat(isPreviousEnabled ? "" : classes.disabled),
+    onClick: isPreviousEnabled ? onNavigatePrevious : undefined,
+    onKeyDown: function onKeyDown(event) {
+      return isNextEnabled ? onkeyDownHandler(event, onNavigatePrevious) : undefined;
+    },
+    tabIndex: 0
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: "".concat(typeof onTextClick === "function" ? classes.text : classes.textWithoutHover),
+    role: "presentation",
+    onClick: onTextClick,
+    onKeyDown: onTextClick && function (event) {
+      return onkeyDownHandler(event, onTextClick);
+    },
+    tabIndex: onTextClick ? 0 : -1
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "normalText"
+  }, navigationText)), /*#__PURE__*/_react.default.createElement(_uikitReactIcons.DropRightXS, {
+    id: (0, _utils.setId)(id, "right"),
+    className: "".concat(classes.icon, " ").concat(isNextEnabled ? "" : classes.disabled),
+    onClick: isNextEnabled ? onNavigateNext : undefined,
+    onKeyDown: function onKeyDown(event) {
+      return isNextEnabled ? onkeyDownHandler(event, onNavigateNext) : undefined;
+    },
+    tabIndex: 0
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? Navigation.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 the navigate previous action is triggered.
+   */
+  onNavigatePrevious: _propTypes.default.func,
+
+  /**
+   * A function to be executed whenever the navigate next action is triggered.
+   */
+  onNavigateNext: _propTypes.default.func,
+
+  /**
+   * A function to be executed whenever the text is clicked.
+   */
+  onTextClick: _propTypes.default.func,
+
+  /**
+   * The text that will be shown between the navigation buttons.
+   */
+  navigationText: _propTypes.default.string,
+
+  /**
+   * Flag stating if the previous button should be enabled or disabled.
+   */
+  isPreviousEnabled: _propTypes.default.bool,
+
+  /**
+   * Flag stating if the next button should be enabled or disabled.
+   */
+  isNextEnabled: _propTypes.default.bool
+} : void 0;
+Navigation.defaultProps = {
+  onNavigatePrevious: undefined,
+  onNavigateNext: undefined,
+  onTextClick: undefined,
+  navigationText: "n/a",
+  isPreviousEnabled: true,
+  isNextEnabled: true
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvDatePickerNavigation"
+})(Navigation);
+
+exports.default = _default;
+//# sourceMappingURL=Navigation.js.map

package/dist/DatePicker/Calendar/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","names":["Navigation","id","classes","onNavigatePrevious","onNavigateNext","onTextClick","navigationText","isPreviousEnabled","isNextEnabled","onkeyDownHandler","event","funcAction","isKeypress","KeyboardCodes","Enter","Space","preventDefault","root","setId","icon","disabled","undefined","text","textWithoutHover","propTypes","PropTypes","string","instanceOf","Object","isRequired","func","bool","defaultProps","withStyles","styles","name"],"sources":["../../../../src/DatePicker/Calendar/Navigation/Navigation.js"],"sourcesContent":["/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport {\n  DropLeftXS as DropLeftIcon,\n  DropRightXS as DropRightIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { isKeypress, KeyboardCodes, setId } from \"../../../utils\";\nimport HvTypography from \"../../../Typography\";\nimport styles from \"./styles\";\n\nconst Navigation = ({\n  id,\n  classes,\n  onNavigatePrevious,\n  onNavigateNext,\n  onTextClick,\n  navigationText,\n  isPreviousEnabled,\n  isNextEnabled,\n}) => {\n  const onkeyDownHandler = (event, funcAction) => {\n    if (isKeypress(event, KeyboardCodes.Enter) || isKeypress(event, KeyboardCodes.Space)) {\n      event.preventDefault();\n      funcAction(event);\n    }\n  };\n\n  return (\n    <div className={classes.root}>\n      <DropLeftIcon\n        id={setId(id, \"left\")}\n        className={`${classes.icon} ${isPreviousEnabled ? \"\" : classes.disabled}`}\n        onClick={isPreviousEnabled ? onNavigatePrevious : undefined}\n        onKeyDown={(event) =>\n          isNextEnabled ? onkeyDownHandler(event, onNavigatePrevious) : undefined\n        }\n        tabIndex={0}\n      />\n\n      <div\n        id={id}\n        className={`${typeof onTextClick === \"function\" ? classes.text : classes.textWithoutHover}`}\n        role=\"presentation\"\n        onClick={onTextClick}\n        onKeyDown={onTextClick && ((event) => onkeyDownHandler(event, onTextClick))}\n        tabIndex={onTextClick ? 0 : -1}\n      >\n        <HvTypography variant=\"normalText\">{navigationText}</HvTypography>\n      </div>\n\n      <DropRightIcon\n        id={setId(id, \"right\")}\n        className={`${classes.icon} ${isNextEnabled ? \"\" : classes.disabled}`}\n        onClick={isNextEnabled ? onNavigateNext : undefined}\n        onKeyDown={(event) => (isNextEnabled ? onkeyDownHandler(event, onNavigateNext) : undefined)}\n        tabIndex={0}\n      />\n    </div>\n  );\n};\n\nNavigation.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 the navigate previous action is triggered.\n   */\n  onNavigatePrevious: PropTypes.func,\n  /**\n   * A function to be executed whenever the navigate next action is triggered.\n   */\n  onNavigateNext: PropTypes.func,\n  /**\n   * A function to be executed whenever the text is clicked.\n   */\n  onTextClick: PropTypes.func,\n  /**\n   * The text that will be shown between the navigation buttons.\n   */\n  navigationText: PropTypes.string,\n  /**\n   * Flag stating if the previous button should be enabled or disabled.\n   */\n  isPreviousEnabled: PropTypes.bool,\n  /**\n   * Flag stating if the next button should be enabled or disabled.\n   */\n  isNextEnabled: PropTypes.bool,\n};\n\nNavigation.defaultProps = {\n  onNavigatePrevious: undefined,\n  onNavigateNext: undefined,\n  onTextClick: undefined,\n  navigationText: \"n/a\",\n  isPreviousEnabled: true,\n  isNextEnabled: true,\n};\n\nexport default withStyles(styles, { name: \"HvDatePickerNavigation\" })(Navigation);\n"],"mappings":"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"}

package/dist/DatePicker/Calendar/Navigation/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 _Navigation.default;
+  }
+});
+
+var _Navigation = _interopRequireDefault(require("./Navigation"));
+//# sourceMappingURL=index.js.map

package/dist/DatePicker/Calendar/Navigation/index.js.map

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