@laerdal/life-react-components 1.6.0-dev.2 → 1.6.0-dev.20

package/dist/InputFields/DatepickerField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Regular","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","IconWrapper","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","neutral_300","DatepickerField","id","disabled","locked","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","React","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","blur","handleCalendarOpen","handleCalendarClose","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","critical_400"],"mappings":";;;;;;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAEA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAuBA;AACA;AACA;AACA,IAAMA,mBAAmB,GAAGC,0BAAOC,GAAV,05PAGVC,oBAAUC,QAHA,EASnB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CATmB,EA4BHC,gBAAOC,UA5BJ,EAwCHD,gBAAOE,WAxCJ,EAyCUF,gBAAOG,QAzCjB,EAyC0CH,gBAAOI,KAzCjD,EAyFIJ,gBAAOK,UAzFX,EA6FQL,gBAAOM,WA7Ff,EA8FLN,gBAAOK,UA9FF,EA+FT,UAACP,KAAD;AAAA,SAAY,CAACA,KAAK,CAACS,UAAP,GAAoB,MAApB,GAA6B,MAAzC;AAAA,CA/FS,EAyGjB,mCAAkBC,2BAAmBC,IAArC,EAA2CT,gBAAOU,WAAlD,CAzGiB,EAgHjBC,wBAhHiB,EAgIjB,mCAAkBH,2BAAmBI,OAArC,EAA8CZ,gBAAOU,WAArD,CAhIiB,EAoILV,gBAAOa,KApIF,EA6IjB,mCAAkBL,2BAAmBI,OAArC,EAA8CZ,gBAAOU,WAArD,CA7IiB,EAmJRV,gBAAOU,WAnJC,EAoJHV,gBAAOa,KApJJ,EA0JRb,gBAAOc,WA1JC,EA2JHd,gBAAOC,UA3JJ,EA+JRD,gBAAOe,WA/JC,EAgKHf,gBAAOE,WAhKJ,EAiKUF,gBAAOG,QAjKjB,EAiK0CH,gBAAOI,KAjKjD,EAsKRJ,gBAAOa,KAtKC,EAuKHb,gBAAOgB,WAvKJ,EA4KLhB,gBAAOa,KA5KF,EAqLjB,mCAAkBL,2BAAmBI,OAArC,EAA8CZ,gBAAOU,WAArD,CArLiB,EAuLRV,gBAAOU,WAvLC,EAwLHV,gBAAOa,KAxLJ,EA8LRb,gBAAOc,WA9LC,EA+LHd,gBAAOC,UA/LJ,EAmMRD,gBAAOe,WAnMC,EAoMHf,gBAAOE,WApMJ,EAqMUF,gBAAOG,QArMjB,EAqM0CH,gBAAOI,KArMjD,EA0MRJ,gBAAOa,KA1MC,EA2MHb,gBAAOgB,WA3MJ,EAgNRhB,gBAAOiB,WAhNC,EAiNHjB,gBAAOkB,WAjNJ,EAoNNlB,gBAAOc,WApND,EAqNDd,gBAAOC,UArNN,EAyNND,gBAAOe,WAzND,EA0NDf,gBAAOE,WA1NN,EA2NYF,gBAAOG,QA3NnB,EA2N4CH,gBAAOI,KA3NnD,CAAzB;;AAmOA,IAAMe,WAAW,GAAGzB,0BAAOC,GAAV,2NAMJC,oBAAUQ,KAAV,GAAkB,CANd,EAONJ,gBAAOU,WAPD,CAAjB;;AAUA,IAAMU,aAAa,GAAG1B,0BAAOC,GAAV,yJAAnB;;AAMA,IAAM0B,uBAAuB,GAAG,+BAAOC,0BAAP,CAAH,8zBAEhBtB,gBAAOuB,WAFS,EAMWvB,gBAAOwB,WANlB,EAUWxB,gBAAOyB,WAVlB,EAadzB,gBAAOc,WAbO,EAiBLd,gBAAOC,UAjBF,EAkBhBD,gBAAOc,WAlBS,EAuBWd,gBAAOwB,WAvBlB,EAwBLxB,gBAAOE,WAxBF,EAyBhBF,gBAAOe,WAzBS,EA4Bdf,gBAAOe,WA5BO,EAkCLf,gBAAOa,KAlCF,EAqCfM,WArCe,EAsChBnB,gBAAOc,WAtCS,EAyCdK,WAzCc,EA0ChBA,WA1CgB,EA2ChBnB,gBAAOe,WA3CS,EA8CZI,WA9CY,EA+CdA,WA/Cc,EAgDhBnB,gBAAO0B,WAhDS,CAA7B;;AAoDA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,OAgB6B;AAAA,MAf1BC,EAe0B,QAf1BA,EAe0B;AAAA,MAd1BC,QAc0B,QAd1BA,QAc0B;AAAA,MAb1BC,MAa0B,QAb1BA,MAa0B;AAAA,MAZ1BC,SAY0B,QAZ1BA,QAY0B;AAAA,MAX1BC,QAW0B,QAX1BA,QAW0B;AAAA,MAV1BC,KAU0B,QAV1BA,KAU0B;AAAA,MAT1BC,iBAS0B,QAT1BA,iBAS0B;AAAA,MAR1BC,UAQ0B,QAR1BA,UAQ0B;AAAA,MAP1BC,YAO0B,QAP1BA,YAO0B;AAAA,MAN1BC,WAM0B,QAN1BA,WAM0B;AAAA,MAL1BC,QAK0B,QAL1BA,QAK0B;AAAA,MAJ1B/B,UAI0B,QAJ1BA,UAI0B;AAAA,MAH1BgC,sBAG0B,QAH1BA,sBAG0B;AAAA,MAF1BC,qBAE0B,QAF1BA,qBAE0B;AAAA,MAD1BzC,MAC0B,QAD1BA,MAC0B;AACnD;AACA,MAAM0C,QAAQ,GAAG,uCAAjB;AACA,MAAMC,aAAa,GAAGC,KAAK,CAACC,MAAN,CAAkB,IAAlB,CAAtB;;AACA,wBAA8CD,KAAK,CAACE,QAAN,CAAuB,CAAC,CAAxB,CAA9C;AAAA;AAAA,MAAOC,eAAP;AAAA,MAAwBC,kBAAxB;;AACA,yBAA4CJ,KAAK,CAACE,QAAN,CAAwB,KAAxB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,yBAA4BN,KAAK,CAACE,QAAN,CAA4B,IAA5B,CAA5B;AAAA;AAAA,MAAOK,MAAP;AAAA,MAAeC,SAAf;;AACA,yBAAwBR,KAAK,CAACE,QAAN,CAAwB,KAAxB,CAAxB;AAAA;AAAA,MAAOO,IAAP;AAAA,MAAaC,OAAb;AAEA;AACF;AACA;;;AACEV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAIrB,KAAJ,EAAWQ,QAAQ,CAACc,OAAT,CAAiBtB,KAAjB,GAAyB,qBAAOA,KAAP,EAAcuB,MAAd,CAAqBrB,UAAU,GAAGA,UAAH,GAAgB,eAA/C,CAAzB;AACZ,GAFD,EAEG,CAACF,KAAD,CAFH;AAIAU,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAIN,cAAJ,EAAoB;AAAA;;AAClB;AACA;AACA,UAAMS,YAAY,GAAGC,QAAQ,CAACC,sBAAT,CAAgC,uCAAhC,EAAyE,CAAzE,CAArB;AACA,UAAMC,cAAc,GAAGH,YAAH,aAAGA,YAAH,gDAAGA,YAAY,CAAEI,aAAjB,0DAAG,sBAA6BA,aAApD;AACA,UAAIJ,YAAY,IAAIG,cAApB,EAAoCA,cAAc,CAACE,SAAf,GAA2BL,YAAY,CAACM,SAAb,GAAyB,IAAIN,YAAY,CAACO,YAArE;AACrC;AACF,GARD,EAQG,CAAChB,cAAD,CARH,EAhBmD,CA0BnD;AACA;;AACAL,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAIJ,MAAJ,EAAY;AACVR,MAAAA,aAAa,CAACa,OAAd,CAAsBF,OAAtB,CAA8B,IAA9B,EADU,CAEV;AACD;AACF,GALD,EAKG,CAACH,MAAD,CALH;AAOAP,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACF,IAAL,EAAW;AAAA;;AACT,2BAAAX,QAAQ,CAACc,OAAT,wEAAkBU,IAAlB;AACD;AACF,GAJD,EAIG,CAACb,IAAD,CAJH;;AAMA,MAAMc,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC/B,QAAIhB,MAAJ,EAAYC,SAAS,CAAC,IAAD,CAAT;AACZE,IAAAA,OAAO,CAAC,IAAD,CAAP;AACD,GAHD;;AAKA,MAAMc,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AAChCd,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GAFD;;AAIA,MAAIe,OAAO,GAAG,IAAIC,IAAJ,CAASpC,KAAK,IAAI,IAAIoC,IAAJ,CAASpC,KAAT,IAAkB,IAAIoC,IAAJ,EAA3B,GAAwC,IAAIA,IAAJ,CAASpC,KAAT,CAAxC,GAA0D,IAAIoC,IAAJ,EAAnE,CAAd;AACAD,EAAAA,OAAO,CAACE,WAAR,CAAoBF,OAAO,CAACG,WAAR,MAAyB/B,qBAAzB,aAAyBA,qBAAzB,cAAyBA,qBAAzB,GAAkD,EAAlD,CAApB,EAnDmD,CAqDnD;AACA;;AACA,MAAIgC,OAAO,GAAG,IAAIH,IAAJ,CAASpC,KAAK,IAAI,IAAIoC,IAAJ,CAASpC,KAAT,IAAkB,IAAIoC,IAAJ,EAA3B,GAAwC,IAAIA,IAAJ,CAASpC,KAAT,CAAxC,GAA0D,IAAIoC,IAAJ,EAAnE,CAAd;AACA,MAAMI,WAAW,GAAGC,IAAI,CAACC,KAAL,CAAW,CAACH,OAAO,CAACD,WAAR,MAAyBhC,sBAAzB,aAAyBA,sBAAzB,cAAyBA,sBAAzB,GAAmD,EAAnD,CAAD,IAA2D,CAAtE,CAApB;;AAEA,MAAMqC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAA4C;AAChE,QAAIA,CAAC,CAACC,GAAF,KAAU,QAAV,IAAsBD,CAAC,CAACC,GAAF,KAAU,KAApC,EAA2C;AACzCzB,MAAAA,OAAO,CAAC,KAAD,CAAP;AACD;AACF,GAJD;;AAMA,sBACE;AAAA,4BAEE,qBAAC,mBAAD;AAAqB,MAAA,UAAU,EAAEL,cAAjC;AAAiD,MAAA,MAAM,EAAEjD,MAAM,IAAI,EAAnE;AAAA,6BACE,qBAAC,wBAAD;AACE,QAAA,GAAG,EAAE2C,aADP;AAEE,QAAA,cAAc,EAAEwB,kBAFlB;AAGE,QAAA,eAAe,EAAEC,mBAHnB;AAIE,QAAA,IAAI,EAAEf,IAJR;AAKE,QAAA,SAAS,EAAEwB,aALb;AAME,QAAA,cAAc,EAAE;AAAA,iBAAMvB,OAAO,CAAC,KAAD,CAAb;AAAA,SANlB;AAOE,QAAA,YAAY,EAAE;AAAA,iBAAMA,OAAO,CAAC,CAACD,IAAF,CAAb;AAAA,SAPhB;AAQE,QAAA,QAAQ,EAAE,kBAACyB,CAAD,EAAY;AACpBxB,UAAAA,OAAO,CAAC,KAAD,CAAP;;AACA,cAAItB,SAAJ,EAAc;AACZ,gBAAIiB,cAAJ,EAAoB;AAClB,kBAAM+B,OAAO,GAAG,IAAIV,IAAJ,EAAhB;AACAU,cAAAA,OAAO,CAACT,WAAR,CAAoBO,CAAC,CAACN,WAAF,EAApB;AACAQ,cAAAA,OAAO,CAACC,QAAR,CAAiBlC,eAAjB;AACAK,cAAAA,SAAS,CAAC4B,OAAD,CAAT;AACD,aALD,MAKOhD,SAAQ,CAAC8C,CAAD,CAAR;AACR;;AACD,cAAI7B,cAAJ,EAAoBC,iBAAiB,CAAC,KAAD,CAAjB;AACrB,SAnBH;AAoBE,QAAA,QAAQ,EAAEpB,QAAQ,IAAIC,MApBxB;AAqBE,QAAA,MAAM,EAAEmD,aArBV;AAsBE,QAAA,cAAc,EAAEjC,cAtBlB,CAuBE;AAvBF;AAwBE,QAAA,cAAc,EAAEA,cAAc,GAAGyB,WAAH,GAAiBS,SAxBjD;AAyBE,QAAA,OAAO,EAAElC,cAAc,GAAGoB,OAAH,GAAac,SAzBtC;AA0BE,QAAA,QAAQ,EAAEjD,KA1BZ;AA2BE,QAAA,UAAU,EAAEiB,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAYgC,SA3BxB;AA4BE,QAAA,kBAAkB,EAAE,IA5BtB;AA6BE,QAAA,mBAAmB,EAAE,IA7BvB;AA8BE,QAAA,kBAAkB,EAChB3E,UAAU,GACN,UAAC4E,MAAD;AAAA,8BACAxC,KAAK,CAACyC,aAAN,CACEC,4CADF,kCAGOF,MAHP;AAIIpC,YAAAA,kBAAkB,EAAlBA,kBAJJ;AAKIuC,YAAAA,iBAAiB,EAAE,CALvB;AAMItC,YAAAA,cAAc,EAAEA,cANpB;AAOIC,YAAAA,iBAAiB,EAAEA;AAPvB,cASE,IATF,CADA;AAAA,SADM,GAaNiC,SA5CR;AA8CE,QAAA,WAAW,eACT,qBAAC,qBAAD;AAAc,UAAA,QAAQ,EAAErD,QAAxB;AAAkC,UAAA,MAAM,EAAEC,MAA1C;AAAA,iCACE;AAAK,YAAA,KAAK,EAAE;AAACyD,cAAAA,OAAO,EAAE;AAAV,aAAZ;AAAA,mCACE,sBAAC,aAAD;AAAe,cAAA,MAAM,EAAEzD,MAAvB;AAA+B,cAAA,QAAQ,EAAED,QAAzC;AAAA,sCACE,qBAAC,uBAAD;AACE,gBAAA,EAAE,EAAED,EADN;AAEE,gBAAA,GAAG,EAAEa,QAFP;AAGE,gBAAA,IAAI,EAAC,MAHP;AAIE,gBAAA,IAAI,EAAC,YAJP;AAKE,gBAAA,SAAS,EAAE,mBAACoC,CAAD;AAAA,yBAAOA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBzB,OAAO,CAAC,IAAD,CAAnC;AAAA,iBALb;AAME,gBAAA,QAAQ,EAAE,IANZ;AAOE,gBAAA,SAAS,EAAE,CAACrB,QAAQ,GAAG,OAAH,GAAa,EAAtB,KAA6BF,MAAM,GAAG,SAAH,GAAe,EAAlD,KAAyDsB,IAAI,GAAG,OAAH,GAAa,EAA1E,CAPb;AAQE,gBAAA,QAAQ,EAAEvB,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CARtC;AASE,gBAAA,YAAY,EAAEM,YAThB;AAUE,gBAAA,WAAW,EAAEC,WAVf;AAWE,gBAAA,QAAQ,EAAER,QAXZ;AAYE,gBAAA,MAAM,EAAEC,MAZV;AAaE,gBAAA,QAAQ,EAAEQ;AAbZ,gBADF,eAeE,qBAAC,WAAD;AAAA,uCACE,qBAAC,qBAAD;AAAU,kBAAA,IAAI,EAAC;AAAf;AADF,gBAfF;AAAA;AADF;AADF;AA/CJ;AADF,MAFF,EA8EGJ,iBAAiB,iBAChB,sBAAC,qBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAElC,gBAAOwF;AAA5C,QADF,eAEE;AAAA,kBAAOtD;AAAP,QAFF;AAAA,MA/EJ;AAAA,IADF;AAuFD,CAvKD;;;AA3TEN,EAAAA,E;AACAC,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAE,EAAAA,U;AACAD,EAAAA,iB;AACAE,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACA/B,EAAAA,U;AACAgC,EAAAA,sB;AACAC,EAAAA,qB;AACAzC,EAAAA,M;;eAsda4B,e","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\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/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (date: Date) => void;\n  hasError?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\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 }>`\n\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\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\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\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        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\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='%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__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}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\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    .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        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\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 {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\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          color: ${COLORS.primary_800};\n          background: ${COLORS.primary_100};\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          outline: none;\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\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    box-shadow: none;\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper},\n  &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper},\n  &.locked ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = ({\n                           id,\n                           disabled,\n                           locked,\n                           onChange,\n                           hasError,\n                           value,\n                           validationMessage,\n                           dateFormat,\n                           autoComplete,\n                           placeholder,\n                           required,\n                           yearPicker,\n                           yearsBeforeCurrentDate,\n                           yearsAfterCurrentDate,\n                           margin,\n                         }: DatepickerFieldProps) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\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  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\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  //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.useEffect(() => {\n    if (!open) {\n      inputRef.current?.blur();\n    }\n  }, [open]);\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  const handleCalendarClose = () => {\n    setOpen(false);\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      setOpen(false);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          open={open}\n          onKeyDown={handleKeyDown}\n          onClickOutside={() => setOpen(false)}\n          onInputClick={() => setOpen(!open)}\n          onChange={(e: any) => {\n            setOpen(false);\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 || locked}\n          locale={en}\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: DatepickerFieldHeaderParams) =>\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} locked={locked}>\n              <div style={{display: 'block'}}>\n                <DatepickerRow locked={locked} disabled={disabled}>\n                  <StyledInputFieldStyling\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && setOpen(true)}\n                    readOnly={true}\n                    className={(hasError ? 'error' : '') + (locked ? ' locked' : '') + (open ? ' open' : '')}\n                    tabIndex={disabled || locked ? -1 : 0}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}/>\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.cjs"}
+{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","Size","Small","Regular","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","IconWrapper","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","neutral_300","DatepickerField","id","disabled","locked","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","React","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","blur","handleCalendarOpen","handleCalendarClose","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":";;;;;;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAEA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAuBA;AACA;AACA;AACA,IAAMA,mBAAmB,GAAGC,0BAAOC,GAAV,05PAGVC,oBAAUC,QAHA,EASnB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CATmB,EA4BHC,gBAAOC,UA5BJ,EAwCHD,gBAAOE,WAxCJ,EAyCUF,gBAAOG,QAzCjB,EAyC0CH,gBAAOI,KAzCjD,EAyFIJ,gBAAOK,UAzFX,EA6FQL,gBAAOM,WA7Ff,EA8FLN,gBAAOK,UA9FF,EA+FT,UAACP,KAAD;AAAA,SAAY,CAACA,KAAK,CAACS,UAAP,GAAoB,MAApB,GAA6B,MAAzC;AAAA,CA/FS,EAyGjB,mCAAkBC,2BAAmBC,IAArC,EAA2CT,gBAAOU,WAAlD,CAzGiB,EAgHjB,8BAAiBC,YAAKC,KAAtB,CAhHiB,EAgIjB,mCAAkBJ,2BAAmBK,OAArC,EAA8Cb,gBAAOU,WAArD,CAhIiB,EAoILV,gBAAOc,KApIF,EA6IjB,mCAAkBN,2BAAmBK,OAArC,EAA8Cb,gBAAOU,WAArD,CA7IiB,EAmJRV,gBAAOU,WAnJC,EAoJHV,gBAAOc,KApJJ,EA0JRd,gBAAOe,WA1JC,EA2JHf,gBAAOC,UA3JJ,EA+JRD,gBAAOgB,WA/JC,EAgKHhB,gBAAOE,WAhKJ,EAiKUF,gBAAOG,QAjKjB,EAiK0CH,gBAAOI,KAjKjD,EAsKRJ,gBAAOc,KAtKC,EAuKHd,gBAAOiB,WAvKJ,EA4KLjB,gBAAOc,KA5KF,EAqLjB,mCAAkBN,2BAAmBK,OAArC,EAA8Cb,gBAAOU,WAArD,CArLiB,EAuLRV,gBAAOU,WAvLC,EAwLHV,gBAAOc,KAxLJ,EA8LRd,gBAAOe,WA9LC,EA+LHf,gBAAOC,UA/LJ,EAmMRD,gBAAOgB,WAnMC,EAoMHhB,gBAAOE,WApMJ,EAqMUF,gBAAOG,QArMjB,EAqM0CH,gBAAOI,KArMjD,EA0MRJ,gBAAOc,KA1MC,EA2MHd,gBAAOiB,WA3MJ,EAgNRjB,gBAAOkB,WAhNC,EAiNHlB,gBAAOmB,WAjNJ,EAoNNnB,gBAAOe,WApND,EAqNDf,gBAAOC,UArNN,EAyNND,gBAAOgB,WAzND,EA0NDhB,gBAAOE,WA1NN,EA2NYF,gBAAOG,QA3NnB,EA2N4CH,gBAAOI,KA3NnD,CAAzB;;AAmOA,IAAMgB,WAAW,GAAG1B,0BAAOC,GAAV,2NAMJC,oBAAUQ,KAAV,GAAkB,CANd,EAONJ,gBAAOU,WAPD,CAAjB;;AAUA,IAAMW,aAAa,GAAG3B,0BAAOC,GAAV,yJAAnB;;AAMA,IAAM2B,uBAAuB,GAAG,+BAAOC,0BAAP,CAAH,8zBAEhBvB,gBAAOwB,WAFS,EAMWxB,gBAAOyB,WANlB,EAUWzB,gBAAO0B,WAVlB,EAad1B,gBAAOe,WAbO,EAiBLf,gBAAOC,UAjBF,EAkBhBD,gBAAOe,WAlBS,EAuBWf,gBAAOyB,WAvBlB,EAwBLzB,gBAAOE,WAxBF,EAyBhBF,gBAAOgB,WAzBS,EA4BdhB,gBAAOgB,WA5BO,EAkCLhB,gBAAOc,KAlCF,EAqCfM,WArCe,EAsChBpB,gBAAOe,WAtCS,EAyCdK,WAzCc,EA0ChBA,WA1CgB,EA2ChBpB,gBAAOgB,WA3CS,EA8CZI,WA9CY,EA+CdA,WA/Cc,EAgDhBpB,gBAAO2B,WAhDS,CAA7B;;AAoDA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,OAgB6B;AAAA,MAf1BC,EAe0B,QAf1BA,EAe0B;AAAA,MAd1BC,QAc0B,QAd1BA,QAc0B;AAAA,MAb1BC,MAa0B,QAb1BA,MAa0B;AAAA,MAZ1BC,SAY0B,QAZ1BA,QAY0B;AAAA,MAX1BC,QAW0B,QAX1BA,QAW0B;AAAA,MAV1BC,KAU0B,QAV1BA,KAU0B;AAAA,MAT1BC,iBAS0B,QAT1BA,iBAS0B;AAAA,MAR1BC,UAQ0B,QAR1BA,UAQ0B;AAAA,MAP1BC,YAO0B,QAP1BA,YAO0B;AAAA,MAN1BC,WAM0B,QAN1BA,WAM0B;AAAA,MAL1BC,QAK0B,QAL1BA,QAK0B;AAAA,MAJ1BhC,UAI0B,QAJ1BA,UAI0B;AAAA,MAH1BiC,sBAG0B,QAH1BA,sBAG0B;AAAA,MAF1BC,qBAE0B,QAF1BA,qBAE0B;AAAA,MAD1B1C,MAC0B,QAD1BA,MAC0B;AACnD;AACA,MAAM2C,QAAQ,GAAG,uCAAjB;AACA,MAAMC,aAAa,GAAGC,KAAK,CAACC,MAAN,CAAkB,IAAlB,CAAtB;;AACA,wBAA8CD,KAAK,CAACE,QAAN,CAAuB,CAAC,CAAxB,CAA9C;AAAA;AAAA,MAAOC,eAAP;AAAA,MAAwBC,kBAAxB;;AACA,yBAA4CJ,KAAK,CAACE,QAAN,CAAwB,KAAxB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,yBAA4BN,KAAK,CAACE,QAAN,CAA4B,IAA5B,CAA5B;AAAA;AAAA,MAAOK,MAAP;AAAA,MAAeC,SAAf;;AACA,yBAAwBR,KAAK,CAACE,QAAN,CAAwB,KAAxB,CAAxB;AAAA;AAAA,MAAOO,IAAP;AAAA,MAAaC,OAAb;AAEA;AACF;AACA;;;AACEV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAIrB,KAAJ,EAAWQ,QAAQ,CAACc,OAAT,CAAiBtB,KAAjB,GAAyB,qBAAOA,KAAP,EAAcuB,MAAd,CAAqBrB,UAAU,GAAGA,UAAH,GAAgB,eAA/C,CAAzB;AACZ,GAFD,EAEG,CAACF,KAAD,CAFH;AAIAU,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAIN,cAAJ,EAAoB;AAAA;;AAClB;AACA;AACA,UAAMS,YAAY,GAAGC,QAAQ,CAACC,sBAAT,CAAgC,uCAAhC,EAAyE,CAAzE,CAArB;AACA,UAAMC,cAAc,GAAGH,YAAH,aAAGA,YAAH,gDAAGA,YAAY,CAAEI,aAAjB,0DAAG,sBAA6BA,aAApD;AACA,UAAIJ,YAAY,IAAIG,cAApB,EAAoCA,cAAc,CAACE,SAAf,GAA2BL,YAAY,CAACM,SAAb,GAAyB,IAAIN,YAAY,CAACO,YAArE;AACrC;AACF,GARD,EAQG,CAAChB,cAAD,CARH,EAhBmD,CA0BnD;AACA;;AACAL,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAIJ,MAAJ,EAAY;AACVR,MAAAA,aAAa,CAACa,OAAd,CAAsBF,OAAtB,CAA8B,IAA9B,EADU,CAEV;AACD;AACF,GALD,EAKG,CAACH,MAAD,CALH;AAOAP,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACF,IAAL,EAAW;AAAA;;AACT,2BAAAX,QAAQ,CAACc,OAAT,wEAAkBU,IAAlB;AACD;AACF,GAJD,EAIG,CAACb,IAAD,CAJH;;AAMA,MAAMc,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC/B,QAAIhB,MAAJ,EAAYC,SAAS,CAAC,IAAD,CAAT;AACZE,IAAAA,OAAO,CAAC,IAAD,CAAP;AACD,GAHD;;AAKA,MAAMc,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AAChCd,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GAFD;;AAIA,MAAIe,OAAO,GAAG,IAAIC,IAAJ,CAASpC,KAAK,IAAI,IAAIoC,IAAJ,CAASpC,KAAT,IAAkB,IAAIoC,IAAJ,EAA3B,GAAwC,IAAIA,IAAJ,CAASpC,KAAT,CAAxC,GAA0D,IAAIoC,IAAJ,EAAnE,CAAd;AACAD,EAAAA,OAAO,CAACE,WAAR,CAAoBF,OAAO,CAACG,WAAR,MAAyB/B,qBAAzB,aAAyBA,qBAAzB,cAAyBA,qBAAzB,GAAkD,EAAlD,CAApB,EAnDmD,CAqDnD;AACA;;AACA,MAAIgC,OAAO,GAAG,IAAIH,IAAJ,CAASpC,KAAK,IAAI,IAAIoC,IAAJ,CAASpC,KAAT,IAAkB,IAAIoC,IAAJ,EAA3B,GAAwC,IAAIA,IAAJ,CAASpC,KAAT,CAAxC,GAA0D,IAAIoC,IAAJ,EAAnE,CAAd;AACA,MAAMI,WAAW,GAAGC,IAAI,CAACC,KAAL,CAAW,CAACH,OAAO,CAACD,WAAR,MAAyBhC,sBAAzB,aAAyBA,sBAAzB,cAAyBA,sBAAzB,GAAmD,EAAnD,CAAD,IAA2D,CAAtE,CAApB;;AAEA,MAAMqC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAA4C;AAChE,QAAIA,CAAC,CAACC,GAAF,KAAU,QAAV,IAAsBD,CAAC,CAACC,GAAF,KAAU,KAApC,EAA2C;AACzCzB,MAAAA,OAAO,CAAC,KAAD,CAAP;AACD;AACF,GAJD;;AAMA,sBACE;AAAA,4BAEE,qBAAC,mBAAD;AAAqB,MAAA,UAAU,EAAEL,cAAjC;AAAiD,MAAA,MAAM,EAAElD,MAAM,IAAI,EAAnE;AAAA,6BACE,qBAAC,wBAAD;AACE,QAAA,GAAG,EAAE4C,aADP;AAEE,QAAA,cAAc,EAAEwB,kBAFlB;AAGE,QAAA,eAAe,EAAEC,mBAHnB;AAIE,QAAA,IAAI,EAAEf,IAJR;AAKE,QAAA,SAAS,EAAEwB,aALb;AAME,QAAA,cAAc,EAAE;AAAA,iBAAMvB,OAAO,CAAC,KAAD,CAAb;AAAA,SANlB;AAOE,QAAA,YAAY,EAAE;AAAA,iBAAM,CAACxB,QAAD,IAAa,CAACC,MAAd,IAAwBuB,OAAO,CAAC,CAACD,IAAF,CAArC;AAAA,SAPhB;AAQE,QAAA,QAAQ,EAAE,kBAACyB,CAAD,EAAY;AACpBxB,UAAAA,OAAO,CAAC,KAAD,CAAP;;AACA,cAAItB,SAAJ,EAAc;AACZ,gBAAIiB,cAAJ,EAAoB;AAClB,kBAAM+B,OAAO,GAAG,IAAIV,IAAJ,EAAhB;AACAU,cAAAA,OAAO,CAACT,WAAR,CAAoBO,CAAC,CAACN,WAAF,EAApB;AACAQ,cAAAA,OAAO,CAACC,QAAR,CAAiBlC,eAAjB;AACAK,cAAAA,SAAS,CAAC4B,OAAD,CAAT;AACD,aALD,MAKOhD,SAAQ,CAAC8C,CAAD,CAAR;AACR;;AACD,cAAI7B,cAAJ,EAAoBC,iBAAiB,CAAC,KAAD,CAAjB;AACrB,SAnBH;AAoBE,QAAA,QAAQ,EAAEpB,QAAQ,IAAIC,MApBxB;AAqBE,QAAA,MAAM,EAAEmD,aArBV;AAsBE,QAAA,cAAc,EAAEjC,cAtBlB,CAuBE;AAvBF;AAwBE,QAAA,cAAc,EAAEA,cAAc,GAAGyB,WAAH,GAAiBS,SAxBjD;AAyBE,QAAA,OAAO,EAAElC,cAAc,GAAGoB,OAAH,GAAac,SAzBtC;AA0BE,QAAA,QAAQ,EAAEjD,KA1BZ;AA2BE,QAAA,UAAU,EAAEiB,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAYgC,SA3BxB;AA4BE,QAAA,kBAAkB,EAAE,IA5BtB;AA6BE,QAAA,mBAAmB,EAAE,IA7BvB;AA8BE,QAAA,kBAAkB,EAChB5E,UAAU,GACN,UAAC6E,MAAD;AAAA,8BACAxC,KAAK,CAACyC,aAAN,CACEC,4CADF,kCAGOF,MAHP;AAIIpC,YAAAA,kBAAkB,EAAlBA,kBAJJ;AAKIuC,YAAAA,iBAAiB,EAAE,CALvB;AAMItC,YAAAA,cAAc,EAAEA,cANpB;AAOIC,YAAAA,iBAAiB,EAAEA;AAPvB,cASE,IATF,CADA;AAAA,SADM,GAaNiC,SA5CR;AA8CE,QAAA,WAAW,eACT,qBAAC,qBAAD;AAAc,UAAA,QAAQ,EAAErD,QAAxB;AAAkC,UAAA,MAAM,EAAEC,MAA1C;AAAA,iCACE;AAAK,YAAA,KAAK,EAAE;AAACyD,cAAAA,OAAO,EAAE;AAAV,aAAZ;AAAA,mCACE,sBAAC,aAAD;AAAe,cAAA,MAAM,EAAEzD,MAAvB;AAA+B,cAAA,QAAQ,EAAED,QAAzC;AAAA,sCACE,qBAAC,uBAAD;AACE,gBAAA,EAAE,EAAED,EADN;AAEE,gBAAA,GAAG,EAAEa,QAFP;AAGE,gBAAA,IAAI,EAAC,MAHP;AAIE,gBAAA,IAAI,EAAC,YAJP;AAKE,gBAAA,SAAS,EAAE,mBAACoC,CAAD;AAAA,yBAAOA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBzB,OAAO,CAAC,IAAD,CAAnC;AAAA,iBALb;AAME,gBAAA,QAAQ,EAAE,IANZ;AAOE,gBAAA,SAAS,EAAE,CAACrB,QAAQ,GAAG,OAAH,GAAa,EAAtB,KAA6BF,MAAM,GAAG,SAAH,GAAe,EAAlD,KAAyDsB,IAAI,GAAG,OAAH,GAAa,EAA1E,CAPb;AAQE,gBAAA,QAAQ,EAAEvB,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CARtC;AASE,gBAAA,OAAO,EAAE,iBAAA+C,CAAC;AAAA;;AAAA,+CAAIpC,QAAQ,CAACc,OAAb,uDAAI,mBAAkBiC,iBAAlB,CAAoC,CAApC,EAAuC,CAAvC,CAAJ;AAAA,iBATZ;AAUE,gBAAA,YAAY,EAAEpD,YAVhB;AAWE,gBAAA,WAAW,EAAEC,WAXf;AAYE,gBAAA,QAAQ,EAAER,QAZZ;AAaE,gBAAA,MAAM,EAAEC,MAbV;AAcE,gBAAA,QAAQ,EAAEQ;AAdZ,gBADF,eAgBE,qBAAC,WAAD;AAAA,uCACE,qBAAC,qBAAD;AAAU,kBAAA,IAAI,EAAC;AAAf;AADF,gBAhBF;AAAA;AADF;AADF;AA/CJ;AADF,MAFF,EA+EGJ,iBAAiB,iBAChB,sBAAC,qBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAEnC,gBAAO0F;AAA5C,QADF,eAEE;AAAA,kBAAOvD;AAAP,QAFF;AAAA,MAhFJ;AAAA,IADF;AAwFD,CAxKD;;;AA3TEN,EAAAA,E;AACAC,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAE,EAAAA,U;AACAD,EAAAA,iB;AACAE,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAhC,EAAAA,U;AACAiC,EAAAA,sB;AACAC,EAAAA,qB;AACA1C,EAAAA,M;;eAuda6B,e","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\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/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\nimport { Size } from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (date: Date) => void;\n  hasError?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\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 }>`\n\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\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\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\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        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\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='%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__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__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\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    .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        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\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 {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\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          color: ${COLORS.primary_800};\n          background: ${COLORS.primary_100};\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          outline: none;\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\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    box-shadow: none;\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper},\n  &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper},\n  &.locked ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = ({\n                           id,\n                           disabled,\n                           locked,\n                           onChange,\n                           hasError,\n                           value,\n                           validationMessage,\n                           dateFormat,\n                           autoComplete,\n                           placeholder,\n                           required,\n                           yearPicker,\n                           yearsBeforeCurrentDate,\n                           yearsAfterCurrentDate,\n                           margin,\n                         }: DatepickerFieldProps) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\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  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\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  //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.useEffect(() => {\n    if (!open) {\n      inputRef.current?.blur();\n    }\n  }, [open]);\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  const handleCalendarClose = () => {\n    setOpen(false);\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      setOpen(false);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          open={open}\n          onKeyDown={handleKeyDown}\n          onClickOutside={() => setOpen(false)}\n          onInputClick={() => !disabled && !locked && setOpen(!open)}\n          onChange={(e: any) => {\n            setOpen(false);\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 || locked}\n          locale={en}\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: DatepickerFieldHeaderParams) =>\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} locked={locked}>\n              <div style={{display: 'block'}}>\n                <DatepickerRow locked={locked} disabled={disabled}>\n                  <StyledInputFieldStyling\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && setOpen(true)}\n                    readOnly={true}\n                    className={(hasError ? 'error' : '') + (locked ? ' locked' : '') + (open ? ' open' : '')}\n                    tabIndex={disabled || locked ? -1 : 0}\n                    onFocus={e => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}/>\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.cjs"}

package/dist/InputFields/DatepickerField.js

@@ -38,6 +38,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { ComponentMStyling, ComponentSStyling } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
 import { useFocusVisibleRef } from '../common/FocusVisible';
+import { Size } from '../types';
 /**
  * Add custom types.
  */
@@ -53,7 +54,7 @@ var DatePickerContainer = styled.div(_templateObject || (_templateObject = _tagg
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, COLORS.primary_20, COLORS.primary_100, COLORS.focus_25, COLORS.focus, COLORS.neutral_20, COLORS.neutral_200, COLORS.neutral_20, function (props) {
   return !props.yearPicker ? '96px' : '54px';
-}, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), scrollBarStyling, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, COLORS.primary_800, COLORS.primary_100, COLORS.focus_25, COLORS.focus, COLORS.white, COLORS.primary_500, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, COLORS.primary_800, COLORS.primary_100, COLORS.focus_25, COLORS.focus, COLORS.white, COLORS.primary_500, COLORS.neutral_700, COLORS.neutral_100, COLORS.primary_700, COLORS.primary_20, COLORS.primary_800, COLORS.primary_100, COLORS.focus_25, COLORS.focus);
+}, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), scrollBarStyling(Size.Small), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, COLORS.primary_800, COLORS.primary_100, COLORS.focus_25, COLORS.focus, COLORS.white, COLORS.primary_500, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, COLORS.primary_800, COLORS.primary_100, COLORS.focus_25, COLORS.focus, COLORS.white, COLORS.primary_500, COLORS.neutral_700, COLORS.neutral_100, COLORS.primary_700, COLORS.primary_20, COLORS.primary_800, COLORS.primary_100, COLORS.focus_25, COLORS.focus);
 var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n  color: ", ";\n"])), Z_INDEXES.focus + 1, COLORS.neutral_600);
 var DatepickerRow = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
 var StyledInputFieldStyling = styled(InputFieldStyling)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ",\n  &.open ~ ", " {\n    color: ", ";\n  }\n\n  &:disabled ~ ", ",\n  &.locked ~ ", " {\n    color: ", ";\n  }\n"])), COLORS.neutral_500, COLORS.primary_300, COLORS.primary_200, COLORS.primary_700, COLORS.primary_20, COLORS.primary_700, COLORS.primary_300, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.white, IconWrapper, COLORS.primary_700, IconWrapper, IconWrapper, COLORS.primary_800, IconWrapper, IconWrapper, COLORS.neutral_300);
@@ -167,7 +168,7 @@ var DatepickerField = function DatepickerField(_ref) {
           return setOpen(false);
         },
         onInputClick: function onInputClick() {
-          return setOpen(!open);
+          return !disabled && !locked && setOpen(!open);
         },
         onChange: function onChange(e) {
           setOpen(false);
@@ -222,6 +223,11 @@ var DatepickerField = function DatepickerField(_ref) {
                 readOnly: true,
                 className: (hasError ? 'error' : '') + (locked ? ' locked' : '') + (open ? ' open' : ''),
                 tabIndex: disabled || locked ? -1 : 0,
+                onFocus: function onFocus(e) {
+                  var _inputRef$current2;
+
+                  return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.setSelectionRange(0, 0);
+                },
                 autoComplete: autoComplete,
                 placeholder: placeholder,
                 disabled: disabled,

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","DatePickerContainer","div","dropdown","props","margin","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Regular","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","IconWrapper","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","neutral_300","DatepickerField","id","disabled","locked","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","blur","handleCalendarOpen","handleCalendarClose","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\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/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (date: Date) => void;\n  hasError?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\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 }>`\n\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\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\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\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        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\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='%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__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}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\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    .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        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\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 {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\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          color: ${COLORS.primary_800};\n          background: ${COLORS.primary_100};\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          outline: none;\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\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    box-shadow: none;\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper},\n  &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper},\n  &.locked ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = ({\n                           id,\n                           disabled,\n                           locked,\n                           onChange,\n                           hasError,\n                           value,\n                           validationMessage,\n                           dateFormat,\n                           autoComplete,\n                           placeholder,\n                           required,\n                           yearPicker,\n                           yearsBeforeCurrentDate,\n                           yearsAfterCurrentDate,\n                           margin,\n                         }: DatepickerFieldProps) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\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  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\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  //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.useEffect(() => {\n    if (!open) {\n      inputRef.current?.blur();\n    }\n  }, [open]);\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  const handleCalendarClose = () => {\n    setOpen(false);\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      setOpen(false);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          open={open}\n          onKeyDown={handleKeyDown}\n          onClickOutside={() => setOpen(false)}\n          onInputClick={() => setOpen(!open)}\n          onChange={(e: any) => {\n            setOpen(false);\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 || locked}\n          locale={en}\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: DatepickerFieldHeaderParams) =>\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} locked={locked}>\n              <div style={{display: 'block'}}>\n                <DatepickerRow locked={locked} disabled={disabled}>\n                  <StyledInputFieldStyling\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && setOpen(true)}\n                    readOnly={true}\n                    className={(hasError ? 'error' : '') + (locked ? ' locked' : '') + (open ? ' open' : '')}\n                    tabIndex={disabled || locked ? -1 : 0}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}/>\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
+{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","IconWrapper","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","neutral_300","DatepickerField","id","disabled","locked","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","blur","handleCalendarOpen","handleCalendarClose","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\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/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\nimport { Size } from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (date: Date) => void;\n  hasError?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\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 }>`\n\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\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\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\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        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\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='%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__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__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\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    .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        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\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 {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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        color: ${COLORS.primary_800};\n        background: ${COLORS.primary_100};\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n        outline: none;\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          color: ${COLORS.primary_800};\n          background: ${COLORS.primary_100};\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          outline: none;\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\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    box-shadow: none;\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper},\n  &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper},\n  &.locked ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = ({\n                           id,\n                           disabled,\n                           locked,\n                           onChange,\n                           hasError,\n                           value,\n                           validationMessage,\n                           dateFormat,\n                           autoComplete,\n                           placeholder,\n                           required,\n                           yearPicker,\n                           yearsBeforeCurrentDate,\n                           yearsAfterCurrentDate,\n                           margin,\n                         }: DatepickerFieldProps) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\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  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\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  //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.useEffect(() => {\n    if (!open) {\n      inputRef.current?.blur();\n    }\n  }, [open]);\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  const handleCalendarClose = () => {\n    setOpen(false);\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      setOpen(false);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          open={open}\n          onKeyDown={handleKeyDown}\n          onClickOutside={() => setOpen(false)}\n          onInputClick={() => !disabled && !locked && setOpen(!open)}\n          onChange={(e: any) => {\n            setOpen(false);\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 || locked}\n          locale={en}\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: DatepickerFieldHeaderParams) =>\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} locked={locked}>\n              <div style={{display: 'block'}}>\n                <DatepickerRow locked={locked} disabled={disabled}>\n                  <StyledInputFieldStyling\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && setOpen(true)}\n                    readOnly={true}\n                    className={(hasError ? 'error' : '') + (locked ? ' locked' : '') + (open ? ' open' : '')}\n                    tabIndex={disabled || locked ? -1 : 0}\n                    onFocus={e => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}/>\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}

package/dist/Modals/ModalContainer.cjs

@@ -133,8 +133,9 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
       var sizes = this.GetSize(modalHeight, modalWidth);
       var height = sizes.height,
           width = sizes.width;
-      var overflow = this.GetOverflow(modalOverflow);
-      var zIndexValue = zIndex < 1060 ? 1060 : zIndex >= 1070 ? 1069 : zIndex;
+      var overflow = this.GetOverflow(modalOverflow); // should be at least z-index of modal and below z-index of toast
+
+      var zIndexValue = Math.min(Math.max(zIndex, +_zIndexes.Z_INDEXES.modal), +_zIndexes.Z_INDEXES.toast - 1);
       var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
         height: height,
         width: width,

package/dist/Modals/ModalContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const zIndexValue = zIndex < 1060 ? 1060 : zIndex >= 1070 ? 1069 : zIndex;\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    // should be at least z-index of modal and below z-index of toast\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}

package/dist/Modals/ModalContainer.js

@@ -109,8 +109,9 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
       var sizes = this.GetSize(modalHeight, modalWidth);
       var height = sizes.height,
           width = sizes.width;
-      var overflow = this.GetOverflow(modalOverflow);
-      var zIndexValue = zIndex < 1060 ? 1060 : zIndex >= 1070 ? 1069 : zIndex;
+      var overflow = this.GetOverflow(modalOverflow); // should be at least z-index of modal and below z-index of toast
+
+      var zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);
       var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
         height: height,
         width: width,

package/dist/Modals/ModalContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","stylesConfiguration","Object","assign","styles","getElementById","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const zIndexValue = zIndex < 1060 ? 1060 : zIndex >= 1070 ? 1069 : zIndex;\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
+{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    // should be at least z-index of modal and below z-index of toast\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}