@laerdal/life-react-components 3.1.3-dev.1.full → 3.2.0

package/dist/InputFields/DatepickerField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.cjs","names":["dayjs","extend","advancedFormat","quarterOfYear","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentSStyling","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Size","Small","ComponentMStyling","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","quarterComponentsClassPrefix","DatepickerField","React","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","showQuarterYearPicker","id","dataTestId","rest","inputRef","useFocusVisibleRef","datepickerRef","useRef","focusedQuarterRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","getElementsByClassName","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\n\ndayjs.extend(advancedFormat);\ndayjs.extend(quarterOfYear);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {SystemIcons} from '../icons';\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  showQuarterYearPicker?: boolean;\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string; quarterPicker?: boolean }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    \n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ${COLORS.white} !important;\n        flex-grow: 1;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n  \n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  & ~ ${IconWrapper}{\n    color: ${COLORS.neutral_600};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &[tabindex='-1'] ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\n\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            showQuarterYearPicker,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const focusedQuarterRef = React.useRef<number>(1);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const getFormattedValue = () => {\n    if(showQuarterYearPicker)\n    {\n      const val = dayjs(value);\n      return val.year() + ', Q' + val.quarter();\n    }\n    else \n      return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = getFormattedValue();\n  }, [value]);\n\n  function getQuarterItem(classname: string) : HTMLElement {\n    return  datepickerRef.current?.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\n  }\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = datepickerRef.current?.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  React.useEffect(() => {\n    if(showQuarterYearPicker && open)\n    {\n      const wrapper = getQuarterItem('wrapper');\n      const handler = (event: KeyboardEvent) => {\n        switch(event.key)\n        {\n          case ' ':\n          case 'Enter':\n            const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n            currentQ.click();\n            break;\n\n          case 'ArrowLeft':\n            if(focusedQuarterRef.current > 1)\n            {\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n              const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\n              if(previousQ)\n              {\n                currentQ.tabIndex = -1;\n                previousQ.tabIndex = 0;\n                previousQ.focus();\n                focusedQuarterRef.current = focusedQuarterRef.current - 1;\n              }\n            }\n            break;\n\n          case 'ArrowRight':\n            if(focusedQuarterRef.current < 4)\n            {\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n              const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\n              if(nextQ)\n              {\n                currentQ.tabIndex = -1;\n                nextQ.tabIndex = 0;\n                nextQ.focus();\n                focusedQuarterRef.current = focusedQuarterRef.current + 1;\n              }\n            }\n            break;\n        }\n      };\n\n      wrapper.addEventListener('keydown', handler);\n      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      \n      const selectedQuarter = getQuarterItem('-selected');\n      if(selectedQuarter) {\n        for (let i = 1; i < 5; i++) {\n          if(selectedQuarter.innerText.includes('Q' + i)) {\n            focusedQuarterRef.current = i;\n            break;\n          }\n        }\n        selectedQuarter.setAttribute(\"tabIndex\", \"0\");\n      }\n      else\n      {\n        const firstQuarter = getQuarterItem('1');\n        if(firstQuarter) {\n          focusedQuarterRef.current = 1;\n          firstQuarter.setAttribute(\"tabIndex\", \"0\");\n        }\n      }\n\n      return () => {\n        wrapper.removeEventListener('keydown', handler);\n      };\n    }\n  }, [showQuarterYearPicker, open]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n  const iconSize = 24;\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer quarterPicker={showQuarterYearPicker} data-testid={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n          id={id}\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showQuarterYearPicker={showQuarterYearPicker}\n          dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    extraRightPadding={iconSize}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <SystemIcons.Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              {!open && <TooltipOverflow input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end' position='bottom'>\n                {getFormattedValue()}\n              </TooltipOverflow>}\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}
+{"version":3,"file":"DatepickerField.cjs","names":["dayjs","extend","advancedFormat","quarterOfYear","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentSStyling","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Size","Small","ComponentMStyling","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","quarterComponentsClassPrefix","DatepickerField","React","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","inputRef","useFocusVisibleRef","datepickerRef","useRef","focusedQuarterRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","document","getElementsByClassName","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\n\ndayjs.extend(advancedFormat);\ndayjs.extend(quarterOfYear);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {SystemIcons} from '../icons';\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  showQuarterYearPicker?: boolean;\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n\n  overflowTooltipPosition?: 'top' | 'bottom';\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string; quarterPicker?: boolean }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    \n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ${COLORS.white} !important;\n        flex-grow: 1;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n  \n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  & ~ ${IconWrapper}{\n    color: ${COLORS.neutral_600};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &[tabindex='-1'] ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\n\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            overflowTooltipPosition,\n                                            onBlur,\n                                            showQuarterYearPicker,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const focusedQuarterRef = React.useRef<number>(1);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const getFormattedValue = () => {\n    if(showQuarterYearPicker)\n    {\n      const val = dayjs(value);\n      return val.year() + ', Q' + val.quarter();\n    }\n    else \n      return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = getFormattedValue();\n  }, [value]);\n\n  function getQuarterItem(classname: string) : HTMLElement {\n    return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\n  }\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  React.useEffect(() => {\n    if(showQuarterYearPicker && open)\n    {\n      const wrapper = getQuarterItem('wrapper');\n      const handler = (event: KeyboardEvent) => {\n        switch(event.key)\n        {\n          case ' ':\n          case 'Enter':\n            const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n            currentQ.click();\n            break;\n\n          case 'ArrowLeft':\n            if(focusedQuarterRef.current > 1)\n            {\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n              const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\n              if(previousQ)\n              {\n                currentQ.tabIndex = -1;\n                previousQ.tabIndex = 0;\n                previousQ.focus();\n                focusedQuarterRef.current = focusedQuarterRef.current - 1;\n              }\n            }\n            break;\n\n          case 'ArrowRight':\n            if(focusedQuarterRef.current < 4)\n            {\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n              const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\n              if(nextQ)\n              {\n                currentQ.tabIndex = -1;\n                nextQ.tabIndex = 0;\n                nextQ.focus();\n                focusedQuarterRef.current = focusedQuarterRef.current + 1;\n              }\n            }\n            break;\n        }\n      };\n\n      wrapper.addEventListener('keydown', handler);\n      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      \n      const selectedQuarter = getQuarterItem('-selected');\n      if(selectedQuarter) {\n        for (let i = 1; i < 5; i++) {\n          if(selectedQuarter.innerText.includes('Q' + i)) {\n            focusedQuarterRef.current = i;\n            break;\n          }\n        }\n        selectedQuarter.setAttribute(\"tabIndex\", \"0\");\n      }\n      else\n      {\n        const firstQuarter = getQuarterItem('1');\n        if(firstQuarter) {\n          focusedQuarterRef.current = 1;\n          firstQuarter.setAttribute(\"tabIndex\", \"0\");\n        }\n      }\n\n      return () => {\n        wrapper.removeEventListener('keydown', handler);\n      };\n    }\n  }, [showQuarterYearPicker, open]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n  const iconSize = 24;\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer quarterPicker={showQuarterYearPicker} data-testid={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n          id={id}\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showQuarterYearPicker={showQuarterYearPicker}\n          dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    extraRightPadding={iconSize}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <SystemIcons.Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              {!open && <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end'>\n                {getFormattedValue()}\n              </TooltipOverflow>}\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}

package/dist/InputFields/DatepickerField.d.ts

@@ -21,6 +21,7 @@ export type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTM
     yearsBeforeCurrentDate?: number;
     yearsAfterCurrentDate?: number;
     margin?: string;
+    overflowTooltipPosition?: 'top' | 'bottom';
 };
 declare const DatepickerField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onChange" | "size" | "value"> & {
     value?: Date | undefined;
@@ -36,5 +37,6 @@ declare const DatepickerField: React.ForwardRefExoticComponent<Testable & Omit<R
     yearsBeforeCurrentDate?: number | undefined;
     yearsAfterCurrentDate?: number | undefined;
     margin?: string | undefined;
+    overflowTooltipPosition?: "top" | "bottom" | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export default DatepickerField;

package/dist/InputFields/DatepickerField.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur", "showQuarterYearPicker", "id", "dataTestId"];
+var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "overflowTooltipPosition", "onBlur", "showQuarterYearPicker", "id", "dataTestId"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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; }
@@ -76,6 +76,7 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     yearsBeforeCurrentDate = _ref.yearsBeforeCurrentDate,
     yearsAfterCurrentDate = _ref.yearsAfterCurrentDate,
     margin = _ref.margin,
+    overflowTooltipPosition = _ref.overflowTooltipPosition,
     onBlur = _ref.onBlur,
     showQuarterYearPicker = _ref.showQuarterYearPicker,
     id = _ref.id,
@@ -116,15 +117,14 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (value) inputRef.current.value = getFormattedValue();
   }, [value]);
   function getQuarterItem(classname) {
-    var _datepickerRef$curren;
-    return (_datepickerRef$curren = datepickerRef.current) === null || _datepickerRef$curren === void 0 ? void 0 : _datepickerRef$curren.getElementsByClassName(quarterComponentsClassPrefix + classname)[0];
+    return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0];
   }
   React.useEffect(function () {
     if (yearPickerMode) {
-      var _datepickerRef$curren2, _selectedDate$parentE;
+      var _selectedDate$parentE;
       //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'
       //we have to touch DOM directly
-      var selectedDate = (_datepickerRef$curren2 = datepickerRef.current) === null || _datepickerRef$curren2 === void 0 ? void 0 : _datepickerRef$curren2.getElementsByClassName('react-datepicker__year-text--selected')[0];
+      var selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0];
       var dropdownParent = selectedDate === null || selectedDate === void 0 ? void 0 : (_selectedDate$parentE = selectedDate.parentElement) === null || _selectedDate$parentE === void 0 ? void 0 : _selectedDate$parentE.parentElement;
       if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;
     }
@@ -306,12 +306,12 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               })
             })]
           }), !open && /*#__PURE__*/_jsx(TooltipOverflow, {
+            position: overflowTooltipPosition,
             input: inputRef,
             withArrow: true,
             maxWidth: "100%",
             size: Size.Small,
             align: "end",
-            position: "bottom",
             children: getFormattedValue()
           })]
         })
@@ -338,7 +338,8 @@ DatepickerField.propTypes = {
   yearPicker: _pt.bool,
   yearsBeforeCurrentDate: _pt.number,
   yearsAfterCurrentDate: _pt.number,
-  margin: _pt.string
+  margin: _pt.string,
+  overflowTooltipPosition: _pt.oneOf(['top', 'bottom'])
 };
 export default DatepickerField;
 //# sourceMappingURL=DatepickerField.js.map

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","quarterComponentsClassPrefix","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","showQuarterYearPicker","id","dataTestId","rest","inputRef","datepickerRef","useRef","focusedQuarterRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","getElementsByClassName","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","undefined","params","createElement","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\n\ndayjs.extend(advancedFormat);\ndayjs.extend(quarterOfYear);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {SystemIcons} from '../icons';\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  showQuarterYearPicker?: boolean;\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string; quarterPicker?: boolean }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    \n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ${COLORS.white} !important;\n        flex-grow: 1;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n  \n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  & ~ ${IconWrapper}{\n    color: ${COLORS.neutral_600};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &[tabindex='-1'] ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\n\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            showQuarterYearPicker,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const focusedQuarterRef = React.useRef<number>(1);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const getFormattedValue = () => {\n    if(showQuarterYearPicker)\n    {\n      const val = dayjs(value);\n      return val.year() + ', Q' + val.quarter();\n    }\n    else \n      return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = getFormattedValue();\n  }, [value]);\n\n  function getQuarterItem(classname: string) : HTMLElement {\n    return  datepickerRef.current?.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\n  }\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = datepickerRef.current?.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  React.useEffect(() => {\n    if(showQuarterYearPicker && open)\n    {\n      const wrapper = getQuarterItem('wrapper');\n      const handler = (event: KeyboardEvent) => {\n        switch(event.key)\n        {\n          case ' ':\n          case 'Enter':\n            const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n            currentQ.click();\n            break;\n\n          case 'ArrowLeft':\n            if(focusedQuarterRef.current > 1)\n            {\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n              const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\n              if(previousQ)\n              {\n                currentQ.tabIndex = -1;\n                previousQ.tabIndex = 0;\n                previousQ.focus();\n                focusedQuarterRef.current = focusedQuarterRef.current - 1;\n              }\n            }\n            break;\n\n          case 'ArrowRight':\n            if(focusedQuarterRef.current < 4)\n            {\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n              const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\n              if(nextQ)\n              {\n                currentQ.tabIndex = -1;\n                nextQ.tabIndex = 0;\n                nextQ.focus();\n                focusedQuarterRef.current = focusedQuarterRef.current + 1;\n              }\n            }\n            break;\n        }\n      };\n\n      wrapper.addEventListener('keydown', handler);\n      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      \n      const selectedQuarter = getQuarterItem('-selected');\n      if(selectedQuarter) {\n        for (let i = 1; i < 5; i++) {\n          if(selectedQuarter.innerText.includes('Q' + i)) {\n            focusedQuarterRef.current = i;\n            break;\n          }\n        }\n        selectedQuarter.setAttribute(\"tabIndex\", \"0\");\n      }\n      else\n      {\n        const firstQuarter = getQuarterItem('1');\n        if(firstQuarter) {\n          focusedQuarterRef.current = 1;\n          firstQuarter.setAttribute(\"tabIndex\", \"0\");\n        }\n      }\n\n      return () => {\n        wrapper.removeEventListener('keydown', handler);\n      };\n    }\n  }, [showQuarterYearPicker, open]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n  const iconSize = 24;\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer quarterPicker={showQuarterYearPicker} data-testid={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n          id={id}\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showQuarterYearPicker={showQuarterYearPicker}\n          dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    extraRightPadding={iconSize}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <SystemIcons.Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              {!open && <TooltipOverflow input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end' position='bottom'>\n                {getFormattedValue()}\n              </TooltipOverflow>}\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,UAAU,MAA4C,kBAAkB;AAC/E,OAAOC,EAAE,MAAM,uBAAuB;AACtC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,cAAc,MAAO,6BAA6B;AACzD,OAAOC,aAAa,MAAM,4BAA4B;AAEtDF,KAAK,CAACG,MAAM,CAACF,cAAc,CAAC;AAC5BD,KAAK,CAACG,MAAM,CAACD,aAAa,CAAC;;AAE3B;AACA;AACA;AACA,OAAOE,MAAM,MAAM,kBAAkB;AACrC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,qBAAqB,QAAO,yBAAyB;AAC7D,SAAQC,kBAAkB,EAAEC,WAAW,EAAEC,gBAAgB,QAAO,WAAW;AAC3E,OAAOC,eAAe,MAAM,6BAA6B;;AAEzD;AACA;AACA;AACA,SAAQC,YAAY,EAAEC,iBAAiB,EAAEC,YAAY,QAAO,WAAW;AACvE,OAAO,4CAA4C;AACnD,SAAQC,iBAAiB,EAAEC,iBAAiB,QAAO,WAAW;AAC9D,SAAQC,SAAS,QAAO,WAAW;AACnC,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,SAAQC,IAAI,QAAiB,UAAU;;AAEvC;AACA;AACA;AAFA;AAAA;AAAA;AAoBA;AACA;AACA;AACA,IAAMC,mBAAmB,GAAGtB,MAAM,CAACuB,GAAG,i2QAEvBJ,SAAS,CAACK,QAAQ,EAe3B,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,MAAM,qBAAcD,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,EAsB3CnB,MAAM,CAACoB,UAAU,EAY7BhB,WAAW,EA+CQJ,MAAM,CAACqB,UAAU,EAIbrB,MAAM,CAACsB,WAAW,EAC/BtB,MAAM,CAACqB,UAAU,EACrB,UAACH,KAAK;EAAA,OAAM,CAACA,KAAK,CAACK,UAAU,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,EASxDZ,iBAAiB,CAACR,kBAAkB,CAACqB,IAAI,EAAExB,MAAM,CAACyB,WAAW,CAAC,EAS9Dd,iBAAiB,CAACR,kBAAkB,CAACqB,IAAI,EAAExB,MAAM,CAACyB,WAAW,CAAC,EAO9DpB,gBAAgB,CAACS,IAAI,CAACY,KAAK,CAAC,EA6B5BhB,iBAAiB,CAACP,kBAAkB,CAACwB,OAAO,EAAE3B,MAAM,CAACyB,WAAW,CAAC,EAMrDzB,MAAM,CAAC4B,KAAK,EASxBlB,iBAAiB,CAACP,kBAAkB,CAACwB,OAAO,EAAE3B,MAAM,CAACyB,WAAW,CAAC,EAMxDzB,MAAM,CAACyB,WAAW,EACbzB,MAAM,CAAC4B,KAAK,EAMjB5B,MAAM,CAAC6B,WAAW,EACb7B,MAAM,CAACoB,UAAU,EAI7BhB,WAAW,EAIJJ,MAAM,CAAC4B,KAAK,EACP5B,MAAM,CAAC8B,WAAW,EAKpB9B,MAAM,CAAC4B,KAAK,EAUxBlB,iBAAiB,CAACP,kBAAkB,CAACwB,OAAO,EAAE3B,MAAM,CAACyB,WAAW,CAAC,EAExDzB,MAAM,CAACyB,WAAW,EACbzB,MAAM,CAAC4B,KAAK,EAOjB5B,MAAM,CAAC4B,KAAK,EAEP5B,MAAM,CAAC8B,WAAW,EAIvB9B,MAAM,CAAC6B,WAAW,EACb7B,MAAM,CAACoB,UAAU,EAI7BhB,WAAW,EAIJJ,MAAM,CAAC4B,KAAK,EACP5B,MAAM,CAAC8B,WAAW,EAKvB9B,MAAM,CAAC+B,WAAW,EACb/B,MAAM,CAACgC,WAAW,EAGrBhC,MAAM,CAAC6B,WAAW,EACb7B,MAAM,CAACoB,UAAU,EAI7BhB,WAAW,CAKtB;AAED,IAAM6B,WAAW,GAAGxC,MAAM,CAACuB,GAAG,4LAMjB,CAACJ,SAAS,CAACsB,KAAK,GAAG,CAAC,CAChC;AAED,IAAMC,aAAa,GAAG1C,MAAM,CAACuB,GAAG,2IAI/B;AAED,IAAMoB,uBAAuB,GAAG3C,MAAM,CAACe,iBAAiB,CAAC,o1BAI5CR,MAAM,CAACqC,WAAW,EAISrC,MAAM,CAACsC,WAAW,EAIlBtC,MAAM,CAACuC,WAAW,EAG3CvC,MAAM,CAAC6B,WAAW,EAIT7B,MAAM,CAACoB,UAAU,EAC5BpB,MAAM,CAAC6B,WAAW,EAKS7B,MAAM,CAACsC,WAAW,EAClCtC,MAAM,CAACwC,WAAW,EAC7BxC,MAAM,CAACyC,WAAW,EAGhBzC,MAAM,CAACyC,WAAW,EAKTzC,MAAM,CAAC4B,KAAK,EAG5BK,WAAW,EACNjC,MAAM,CAACyB,WAAW,EAGjBQ,WAAW,EACZjC,MAAM,CAAC6B,WAAW,EAGhBI,WAAW,EAAcA,WAAW,EACtCjC,MAAM,CAACyC,WAAW,EAGRR,WAAW,EACrBjC,MAAM,CAAC0C,WAAW,CAE9B;AAED,IAAMC,4BAA4B,GAAG,4BAA4B;AAEjE,IAAMC,eAAe,gBAAGpD,KAAK,CAACqD,UAAU,CAAyC,gBAoBdC,GAAG,EAAK;EAAA,IAnB/BC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,iBAAiB,QAAjBA,iBAAiB;IACjBC,UAAU,QAAVA,UAAU;IACVC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRjC,UAAU,QAAVA,UAAU;IACVkC,sBAAsB,QAAtBA,sBAAsB;IACtBC,qBAAqB,QAArBA,qBAAqB;IACrBvC,MAAM,QAANA,MAAM;IACNwC,MAAM,QAANA,MAAM;IACNC,qBAAqB,QAArBA,qBAAqB;IACrBC,EAAE,QAAFA,EAAE;IACFC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAEjD;EACA,IAAMC,QAAQ,GAAGnD,kBAAkB,EAAE;EACrC,IAAMoD,aAAa,GAAGzE,KAAK,CAAC0E,MAAM,CAAM,IAAI,CAAC;EAC7C,IAAMC,iBAAiB,GAAG3E,KAAK,CAAC0E,MAAM,CAAS,CAAC,CAAC;EACjD,sBAA8C1E,KAAK,CAAC4E,QAAQ,CAAS,CAAC,CAAC,CAAC;IAAA;IAAjEC,eAAe;IAAEC,kBAAkB;EAC1C,uBAA4C9E,KAAK,CAAC4E,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnEG,cAAc;IAAEC,iBAAiB;EACxC,uBAA4BhF,KAAK,CAAC4E,QAAQ,CAAc,IAAI,CAAC;IAAA;IAAtDK,MAAM;IAAEC,SAAS;EACxB;EACA;EACA,uBAAwBlF,KAAK,CAAC4E,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/CO,IAAI;IAAEC,OAAO;EAEpB,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAC9B,IAAGjB,qBAAqB,EACxB;MACE,IAAMkB,GAAG,GAAGlF,KAAK,CAACuD,KAAK,CAAC;MACxB,OAAO2B,GAAG,CAACC,IAAI,EAAE,GAAG,KAAK,GAAGD,GAAG,CAACE,OAAO,EAAE;IAC3C,CAAC,MAEC,OAAOpF,KAAK,CAACuD,KAAK,CAAC,CAAC8B,MAAM,CAAC5B,UAAU,GAAGA,UAAU,GAAG,eAAe,CAAC;EACzE,CAAC;EACD;AACF;AACA;EACE7D,KAAK,CAAC0F,SAAS,CAAC,YAAM;IACpB,IAAI/B,KAAK,EAAEa,QAAQ,CAACmB,OAAO,CAAChC,KAAK,GAAG0B,iBAAiB,EAAE;EACzD,CAAC,EAAE,CAAC1B,KAAK,CAAC,CAAC;EAEX,SAASiC,cAAc,CAACC,SAAiB,EAAgB;IAAA;IACvD,gCAAQpB,aAAa,CAACkB,OAAO,0DAArB,sBAAuBG,sBAAsB,CAAC3C,4BAA4B,GAAG0C,SAAS,CAAC,CAAC,CAAC,CAAC;EACpG;EAEA7F,KAAK,CAAC0F,SAAS,CAAC,YAAM;IACpB,IAAIX,cAAc,EAAE;MAAA;MAClB;MACA;MACA,IAAMgB,YAAY,6BAAGtB,aAAa,CAACkB,OAAO,2DAArB,uBAAuBG,sBAAsB,CAAC,uCAAuC,CAAC,CAAC,CAAC,CAAgB;MAC7H,IAAME,cAAc,GAAGD,YAAY,aAAZA,YAAY,gDAAZA,YAAY,CAAEE,aAAa,0DAA3B,sBAA6BA,aAAa;MACjE,IAAIF,YAAY,IAAIC,cAAc,EAAEA,cAAc,CAACE,SAAS,GAAGH,YAAY,CAACI,SAAS,GAAG,CAAC,GAAGJ,YAAY,CAACK,YAAY;IACvH;EACF,CAAC,EAAE,CAACrB,cAAc,CAAC,CAAC;EAEpB/E,KAAK,CAAC0F,SAAS,CAAC,YAAM;IACpB,IAAGtB,qBAAqB,IAAIe,IAAI,EAChC;MACE,IAAMkB,OAAO,GAAGT,cAAc,CAAC,SAAS,CAAC;MACzC,IAAMU,OAAO,GAAG,SAAVA,OAAO,CAAIC,KAAoB,EAAK;QACxC,QAAOA,KAAK,CAACC,GAAG;UAEd,KAAK,GAAG;UACR,KAAK,OAAO;YACV,IAAMC,QAAQ,GAAGb,cAAc,CAACjB,iBAAiB,CAACgB,OAAO,GAAG,EAAE,CAAC;YAC/Dc,QAAQ,CAACC,KAAK,EAAE;YAChB;UAEF,KAAK,WAAW;YACd,IAAG/B,iBAAiB,CAACgB,OAAO,GAAG,CAAC,EAChC;cACE,IAAMc,SAAQ,GAAGb,cAAc,CAACjB,iBAAiB,CAACgB,OAAO,GAAG,EAAE,CAAC;cAC/D,IAAMgB,SAAS,GAAGf,cAAc,CAAEjB,iBAAiB,CAACgB,OAAO,GAAG,CAAC,GAAI,EAAE,CAAC;cACtE,IAAGgB,SAAS,EACZ;gBACEF,SAAQ,CAACG,QAAQ,GAAG,CAAC,CAAC;gBACtBD,SAAS,CAACC,QAAQ,GAAG,CAAC;gBACtBD,SAAS,CAACjE,KAAK,EAAE;gBACjBiC,iBAAiB,CAACgB,OAAO,GAAGhB,iBAAiB,CAACgB,OAAO,GAAG,CAAC;cAC3D;YACF;YACA;UAEF,KAAK,YAAY;YACf,IAAGhB,iBAAiB,CAACgB,OAAO,GAAG,CAAC,EAChC;cACE,IAAMc,UAAQ,GAAGb,cAAc,CAACjB,iBAAiB,CAACgB,OAAO,GAAG,EAAE,CAAC;cAC/D,IAAMkB,KAAK,GAAGjB,cAAc,CAAEjB,iBAAiB,CAACgB,OAAO,GAAG,CAAC,GAAI,EAAE,CAAC;cAClE,IAAGkB,KAAK,EACR;gBACEJ,UAAQ,CAACG,QAAQ,GAAG,CAAC,CAAC;gBACtBC,KAAK,CAACD,QAAQ,GAAG,CAAC;gBAClBC,KAAK,CAACnE,KAAK,EAAE;gBACbiC,iBAAiB,CAACgB,OAAO,GAAGhB,iBAAiB,CAACgB,OAAO,GAAG,CAAC;cAC3D;YACF;YACA;QAAM;MAEZ,CAAC;MAEDU,OAAO,CAACS,gBAAgB,CAAC,SAAS,EAAER,OAAO,CAAC;MAC5C;MACA;;MAEA,IAAMS,eAAe,GAAGnB,cAAc,CAAC,WAAW,CAAC;MACnD,IAAGmB,eAAe,EAAE;QAClB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,CAAC,EAAEA,CAAC,EAAE,EAAE;UAC1B,IAAGD,eAAe,CAACE,SAAS,CAACC,QAAQ,CAAC,GAAG,GAAGF,CAAC,CAAC,EAAE;YAC9CrC,iBAAiB,CAACgB,OAAO,GAAGqB,CAAC;YAC7B;UACF;QACF;QACAD,eAAe,CAACI,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;MAC/C,CAAC,MAED;QACE,IAAMC,YAAY,GAAGxB,cAAc,CAAC,GAAG,CAAC;QACxC,IAAGwB,YAAY,EAAE;UACfzC,iBAAiB,CAACgB,OAAO,GAAG,CAAC;UAC7ByB,YAAY,CAACD,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;QAC5C;MACF;MAEA,OAAO,YAAM;QACXd,OAAO,CAACgB,mBAAmB,CAAC,SAAS,EAAEf,OAAO,CAAC;MACjD,CAAC;IACH;EACF,CAAC,EAAE,CAAClC,qBAAqB,EAAEe,IAAI,CAAC,CAAC;;EAEjC;EACA;EACAnF,KAAK,CAAC0F,SAAS,CAAC,YAAM;IACpB,IAAIT,MAAM,EAAE;MACVR,aAAa,CAACkB,OAAO,CAACP,OAAO,CAAC,IAAI,CAAC;MACnC;IACF;EACF,CAAC,EAAE,CAACH,MAAM,CAAC,CAAC;EAEZjF,KAAK,CAACsH,mBAAmB,CAAChE,GAAG,EAAE;IAAA,OAAMkB,QAAQ,CAACmB,OAAO;EAAA,GAAE,CAACnB,QAAQ,CAAC,CAAC;EAElE,IAAM+C,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAAA;IAChC,qBAAA/C,QAAQ,CAACmB,OAAO,sDAAhB,kBAAkB6B,IAAI,EAAE;IACxBpC,OAAO,CAAC,KAAK,CAAC;EAChB,CAAC;EAED,IAAMqC,kBAAkB,GAAG,SAArBA,kBAAkB,GAAS;IAC/B,IAAIxC,MAAM,EAAEC,SAAS,CAAC,IAAI,CAAC;IAC3BE,OAAO,CAAC,IAAI,CAAC;EACf,CAAC;EAED,IAAIsC,OAAO,GAAG,IAAIC,IAAI,CAAChE,KAAK,IAAI,IAAIgE,IAAI,CAAChE,KAAK,CAAC,GAAG,IAAIgE,IAAI,EAAE,GAAG,IAAIA,IAAI,CAAChE,KAAK,CAAC,GAAG,IAAIgE,IAAI,EAAE,CAAC;EAC5FD,OAAO,CAACE,WAAW,CAACF,OAAO,CAACG,WAAW,EAAE,IAAI3D,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,EAAE,CAAC,CAAC;;EAE1E;EACA;EACA,IAAI4D,OAAO,GAAG,IAAIH,IAAI,CAAChE,KAAK,IAAI,IAAIgE,IAAI,CAAChE,KAAK,CAAC,GAAG,IAAIgE,IAAI,EAAE,GAAG,IAAIA,IAAI,CAAChE,KAAK,CAAC,GAAG,IAAIgE,IAAI,EAAE,CAAC;EAC5F,IAAMI,WAAW,GAAGC,IAAI,CAACC,KAAK,CAAC,CAACH,OAAO,CAACD,WAAW,EAAE,IAAI5D,sBAAsB,aAAtBA,sBAAsB,cAAtBA,sBAAsB,GAAI,EAAE,CAAC,IAAI,CAAC,CAAC;EAE5F,IAAMiE,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAsC,EAAK;IAChE,IAAIA,CAAC,CAAC3B,GAAG,KAAK,QAAQ,IAAI2B,CAAC,CAAC3B,GAAG,KAAK,KAAK,EACvC/B,aAAa,CAACkB,OAAO,CAACP,OAAO,CAAC,KAAK,CAAC;EACxC,CAAC;EAED,IAAMgD,UAAU,GAAG,SAAbA,UAAU,CAAID,CAAmC,EAAK;IAC1D;IACA,IAAI,CAACA,CAAC,CAACE,aAAa,CAACC,QAAQ,CAACH,CAAC,CAACI,aAAa,CAAC,EAAE;MAC9CpE,MAAM,IAAIA,MAAM,CAACgE,CAAC,CAAC;IACrB;EACF,CAAC;EACD,IAAMK,QAAQ,GAAG,EAAE;EAEnB,oBACE;IAAA,wBAEE,KAAC,mBAAmB;MAAC,aAAa,EAAEpE,qBAAsB;MAAC,eAAaE,UAAW;MAAC,UAAU,EAAES,cAAe;MAAC,MAAM,EAAEpD,MAAM,IAAI,EAAG;MAAC,MAAM,EAAEyG,UAAW;MAAA,uBACvJ,KAAC,UAAU;QACT,GAAG,EAAE3D,aAAc;QACnB,cAAc,EAAEgD,kBAAmB;QACnC,eAAe,EAAEF,mBAAoB;QACrC,SAAS,EAAEW,aAAc;QACzB,EAAE,EAAE7D,EAAG;QACP,cAAc,EAAE;UAAA,OAAMI,aAAa,CAACkB,OAAO,CAACP,OAAO,CAAC,KAAK,CAAC;QAAA,CAAC;QAE3D,QAAQ,EAAE,kBAAC+C,CAAM,EAAK;UACpB,IAAI1E,SAAQ,EAAE;YACZ,IAAIsB,cAAc,EAAE;cAClB,IAAM0D,OAAO,GAAG,IAAId,IAAI,EAAE;cAC1Bc,OAAO,CAACb,WAAW,CAACO,CAAC,CAACN,WAAW,EAAE,CAAC;cACpCY,OAAO,CAACC,QAAQ,CAAC7D,eAAe,CAAC;cACjCK,SAAS,CAACuD,OAAO,CAAC;YACpB,CAAC,MAAMhF,SAAQ,CAAC0E,CAAC,CAAC;UACpB;UACA,IAAIpD,cAAc,EAAEC,iBAAiB,CAAC,KAAK,CAAC;QAC9C,CAAE;QACF,QAAQ,EAAEzB,QAAQ,IAAIC,QAAS;QAC/B,MAAM,EAAErD,EAAG;QACX,qBAAqB,EAAEiE,qBAAsB;QAC7C,UAAU,EAAEA,qBAAqB,GAAG,WAAW,GAAGuE,SAAU;QAC5D,cAAc,EAAE5D;QAChB;QAAA;QACA,cAAc,EAAEA,cAAc,GAAGgD,WAAW,GAAGY,SAAU;QACzD,OAAO,EAAE5D,cAAc,GAAG2C,OAAO,GAAGiB,SAAU;QAC9C,QAAQ,EAAEhF,KAAM;QAChB,UAAU,EAAEsB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI0D,SAAU;QAChC,kBAAkB,EAAE,IAAK;QACzB,mBAAmB,EAAE,IAAK;QAC1B,kBAAkB,EAChB5G,UAAU,GACN,UAAC6G,MAAwC;UAAA,oBACzC5I,KAAK,CAAC6I,aAAa,CACjBnI,qBAAqB,kCAEhBkI,MAAM;YACT9D,kBAAkB,EAAlBA,kBAAkB;YAClBgE,iBAAiB,EAAE,CAAC;YACpB/D,cAAc,EAAEA,cAAc;YAC9BC,iBAAiB,EAAEA;UAAiB,IAEtC,IAAI,CACL;QAAA,IACD2D,SACL;QACD,WAAW,eACT,MAAC,YAAY;UAAC,QAAQ,EAAEpF,QAAS;UAAC,QAAQ,EAAEC,QAAS;UAAA,wBACnD,MAAC,aAAa;YAAA,wBACV,KAAC,uBAAuB;cACtB,GAAG,EAAEgB,QAAS;cACd,IAAI,EAAC,MAAM;cACX,IAAI,EAAC,YAAY;cACjB,SAAS,EAAE,mBAAC2D,CAAC;gBAAA,OAAKA,CAAC,CAAC3B,GAAG,KAAK,OAAO,IAAI/B,aAAa,CAACkB,OAAO,CAACP,OAAO,CAAC,IAAI,CAAC;cAAA,CAAC;cAC3E,SAAS,EAAG1B,OAAO,GAAG,SAAS,GAAG,EAAE,IAAIyB,IAAI,GAAG,OAAO,GAAG,EAAE,CAAG;cAC9D,QAAQ,EAAE5B,QAAQ,IAAIC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;cACxC,OAAO,EAAE,iBAAC2E,CAAC;gBAAA;gBAAA,6BAAK3D,QAAQ,CAACmB,OAAO,uDAAhB,mBAAkBoD,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC;cAAA,CAAC;cAC1D,YAAY,EAAEjF,YAAa;cAC3B,WAAW,EAAEC,WAAY;cACzB,iBAAiB,EAAEyE,QAAS;cAC5B,QAAQ,EAAEjF,QAAS;cACnB,QAAQ,EAAE,IAAK;cACf,sBAAsB,EAAE,CAACC,QAAS;cAClC,QAAQ,EAAEQ;YAAS,GACfO,IAAI,EACR,eACF,KAAC,WAAW;cAAA,uBACV,KAAC,WAAW,CAAC,QAAQ;gBAAC,IAAI,EAAC;cAAI;YAAE,EACrB;UAAA,EACA,EACjB,CAACY,IAAI,iBAAI,KAAC,eAAe;YAAC,KAAK,EAAEX,QAAS;YAAC,SAAS,EAAE,IAAK;YAAC,QAAQ,EAAC,MAAM;YAAC,IAAI,EAAElD,IAAI,CAACY,KAAM;YAAC,KAAK,EAAC,KAAK;YAAC,QAAQ,EAAC,QAAQ;YAAA,UACzHmD,iBAAiB;UAAE,EACJ;QAAA;MAErB;IACD,EACkB,EAGrBzB,iBAAiB,iBAChB,MAAC,YAAY;MAAA,wBACX,KAAC,WAAW,CAAC,gBAAgB;QAAC,KAAK,EAAEpD,MAAM,CAACwI;MAAa,EAAE,eAC3D;QAAA,UAAOpF;MAAiB,EAAQ;IAAA,EAEnC;EAAA,EACA;AAEP,CAAC,CAAC;AAAC;EA3mBDD,KAAK;EACLF,QAAQ;EACRU,MAAM;EAENC,qBAAqB;EACrBV,OAAO;EACPG,UAAU;EACVD,iBAAiB;EACjBE,YAAY;EACZC,WAAW;EACXhC,UAAU;EACVkC,sBAAsB;EACtBC,qBAAqB;EACrBvC,MAAM;AAAA;AAgmBR,eAAeyB,eAAe"}
+{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","quarterComponentsClassPrefix","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","inputRef","datepickerRef","useRef","focusedQuarterRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","document","getElementsByClassName","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","undefined","params","createElement","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\n\ndayjs.extend(advancedFormat);\ndayjs.extend(quarterOfYear);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {SystemIcons} from '../icons';\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  showQuarterYearPicker?: boolean;\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n\n  overflowTooltipPosition?: 'top' | 'bottom';\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string; quarterPicker?: boolean }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    \n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ${COLORS.white} !important;\n        flex-grow: 1;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n  \n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  & ~ ${IconWrapper}{\n    color: ${COLORS.neutral_600};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &[tabindex='-1'] ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\n\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            overflowTooltipPosition,\n                                            onBlur,\n                                            showQuarterYearPicker,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const focusedQuarterRef = React.useRef<number>(1);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const getFormattedValue = () => {\n    if(showQuarterYearPicker)\n    {\n      const val = dayjs(value);\n      return val.year() + ', Q' + val.quarter();\n    }\n    else \n      return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = getFormattedValue();\n  }, [value]);\n\n  function getQuarterItem(classname: string) : HTMLElement {\n    return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\n  }\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  React.useEffect(() => {\n    if(showQuarterYearPicker && open)\n    {\n      const wrapper = getQuarterItem('wrapper');\n      const handler = (event: KeyboardEvent) => {\n        switch(event.key)\n        {\n          case ' ':\n          case 'Enter':\n            const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n            currentQ.click();\n            break;\n\n          case 'ArrowLeft':\n            if(focusedQuarterRef.current > 1)\n            {\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n              const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\n              if(previousQ)\n              {\n                currentQ.tabIndex = -1;\n                previousQ.tabIndex = 0;\n                previousQ.focus();\n                focusedQuarterRef.current = focusedQuarterRef.current - 1;\n              }\n            }\n            break;\n\n          case 'ArrowRight':\n            if(focusedQuarterRef.current < 4)\n            {\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n              const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\n              if(nextQ)\n              {\n                currentQ.tabIndex = -1;\n                nextQ.tabIndex = 0;\n                nextQ.focus();\n                focusedQuarterRef.current = focusedQuarterRef.current + 1;\n              }\n            }\n            break;\n        }\n      };\n\n      wrapper.addEventListener('keydown', handler);\n      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      \n      const selectedQuarter = getQuarterItem('-selected');\n      if(selectedQuarter) {\n        for (let i = 1; i < 5; i++) {\n          if(selectedQuarter.innerText.includes('Q' + i)) {\n            focusedQuarterRef.current = i;\n            break;\n          }\n        }\n        selectedQuarter.setAttribute(\"tabIndex\", \"0\");\n      }\n      else\n      {\n        const firstQuarter = getQuarterItem('1');\n        if(firstQuarter) {\n          focusedQuarterRef.current = 1;\n          firstQuarter.setAttribute(\"tabIndex\", \"0\");\n        }\n      }\n\n      return () => {\n        wrapper.removeEventListener('keydown', handler);\n      };\n    }\n  }, [showQuarterYearPicker, open]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n  const iconSize = 24;\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer quarterPicker={showQuarterYearPicker} data-testid={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n          id={id}\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showQuarterYearPicker={showQuarterYearPicker}\n          dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    extraRightPadding={iconSize}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <SystemIcons.Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              {!open && <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end'>\n                {getFormattedValue()}\n              </TooltipOverflow>}\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}

package/dist/InputFields/NumberField.cjs

@@ -23,7 +23,7 @@ var _typography = require("../styles/typography");
 var _types = require("../types");
 var _styling = require("./styling");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["type", "size", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "onChange", "className", "id", "dataTestId"];
+var _excluded = ["type", "size", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "onChange", "className", "id", "overflowTooltipPosition", "dataTestId"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -57,7 +57,7 @@ var InputContainer = _styledComponents.default.div(_templateObject5 || (_templat
   return props.type === 'NumberField' ? '160px' : '144px';
 }, function (props) {
   return props.size === _types.Size.Small ? '48px' : '56px';
-}, _styles.Z_INDEXES.focus, (0, _TooltipStyles.TooltipTrigger)());
+}, _styles.Z_INDEXES.focus, (0, _TooltipStyles.TooltipTrigger)('hover'));
 var LeftOperator = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) {
   return props.size === _types.Size.Small ? '0' : '4px';
 });
@@ -87,6 +87,7 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange = props.onChange,
     className = props.className,
     id = props.id,
+    overflowTooltipPosition = props.overflowTooltipPosition,
     dataTestId = props.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _React$useState = React.useState(value ? value.toString() : ''),
@@ -276,13 +277,13 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
         },
         required: required,
         className: disabled ? ' disabled' : ''.concat(readOnly ? ' readOnly' : '').concat(state ? " ".concat(state) : '').concat(className ? " ".concat(className) : '')
-      }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements(), !!value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
+      }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements(), value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
+        position: overflowTooltipPosition,
         input: elementRef,
         withArrow: true,
         maxWidth: "100%",
         size: size,
         align: "end",
-        position: "bottom",
         children: value === null || value === void 0 ? void 0 : value.toString()
       })]
     }), note && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
@@ -304,7 +305,8 @@ NumberField.propTypes = {
   noteIcon: _propTypes.default.node,
   type: _propTypes.default.oneOf(['NumberField', 'NumberInput']),
   value: _propTypes.default.number,
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom'])
 };
 var _default = NumberField;
 exports.default = _default;