@laerdal/life-react-components 1.2.2-dev.5.full → 1.2.2-dev.8

package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","MenuLink","Button","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","ComponentSStyling","Menu","ul","white","SMALL","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","StyledMenulink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","isExternal","display","margin","width","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../../styles';\n\nimport MenuLink from './MenuLink';\nimport {UserMenuItem} from '../../types';\nimport {Button, IconButton} from '../../Button';\nimport {ArrowLineLeft, Close} from '../../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentSStyling} from '../../styles/typography';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .signOutButton {\n    height: 40px !important;\n    width: 288px !important;\n\n    ${BREAKPOINTS.SMALL} {\n      width: 328px !important;\n    }\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n  ${UserMenuSectionListStyling};\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\nconst StyledMenulink = styled(MenuLink)`\n  width: 100%;\n  height: 48px;\n  margin: 0;\n  \n  & a {\n    height: 100%;\n  }\n`;\n\ninterface Props {\n  accountMenuHeader: string;\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst MobileUserMenu = ({\n  accountMenuHeader,\n  firstName,\n  lastName,\n  email,\n  organizationName,\n  clickMenuAction,\n  accountSection,\n  organizationSection,\n  supportSection,\n  signOut,\n  signOutLabel,\n}: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top key=\"MobileUserMenuTopSection\">\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{accountMenuHeader}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <LabelLine data-hj-suppress>{`${firstName} ${lastName}`}</LabelLine>\n          <MenuSectionList>\n            {accountSection?.map((element) => (\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MObileOrganizationSection\">\n          <LabelLine>{organizationName || ''}</LabelLine>\n          <MenuSectionList>\n            {organizationSection?.map((element) => (\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {supportSection && supportSection?.length > 0 && (\n        <MenuSection key=\"MobileSupportSection\">\n          <LabelLine>{''}</LabelLine>\n          <MenuSectionList>\n            {supportSection?.map((element) => (\n              <StyledMenulink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n      {signOut && (\n        <div key=\"SignoutButton\" style={{ display: 'flex', margin: 'auto 0 12px 0' }}>\n          <Button\n            style={{ width: '90%', margin: '0 auto' }}\n            variant=\"secondary\"\n            onClick={(e) => {\n              e.preventDefault();\n              signOut(e);\n            }}>\n            {signOutLabel}\n          </Button>\n        </div>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileUserMenu;\n"],"file":"MobileUserMenu.js"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","MenuLink","Button","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","ComponentSStyling","Z_INDEXES","Menu","ul","white","fixed_menu","SMALL","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","StyledMenulink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","isExternal","display","margin","width","preventDefault"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,EAAiDC,gBAAjD,QAAwE,cAAxE;AAEA,OAAOC,QAAP,MAAqB,YAArB;AAEA,SAAQC,MAAR,EAAgBC,UAAhB,QAAiC,cAAjC;AACA,SAAQC,aAAR,EAAuBC,KAAvB,QAAmC,qCAAnC;AACA,SAAQC,QAAR,EAAkBC,KAAlB,EAAyBC,0BAAzB,QAA0D,wBAA1D;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;AACA,SAAQC,SAAR,QAAwB,wBAAxB;AAEA,MAAMC,IAAI,GAAGf,MAAM,CAACgB,EAAG;AACvB;AACA;AACA,sBAAsBd,MAAM,CAACe,KAAM;AACnC;AACA;AACA,uBAAuBP,QAAS;AAChC,eAAeA,QAAS;AACxB;AACA;AACA,aAAaI,SAAS,CAACI,UAAW;AAClC;AACA;AACA;AACA;AACA,IAAIjB,WAAW,CAACkB,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMlB,WAAW,CAACkB,KAAM;AACxB;AACA;AACA;AACA;AACA,IAAIf,gBAAiB;AACrB,CAlCA;AAoCA,MAAMgB,WAAW,GAAGpB,MAAM,CAACqB,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CATA;AAWA,MAAMC,eAAe,GAAGtB,MAAM,CAACgB,EAAG;AAClC;AACA;AACA;AACA;AACA,IAAIJ,0BAA2B;AAC/B,CANA;AAQA,MAAMW,GAAG,GAAGvB,MAAM,CAACwB,GAAI;AACvB;AACA;AACA;AACA;AACA,WAAWtB,MAAM,CAACuB,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMZ,iBAAiB,CAACV,kBAAkB,CAACuB,OAApB,EAA6B,SAA7B,CAAwC;AAC/D;AACA,CAhBA;AAkBA,MAAMC,SAAS,GAAG3B,MAAM,CAAC4B,IAAK;AAC9B;AACA,sBAAsB1B,MAAM,CAAC2B,UAAW;AACxC;AACA;AACA;AACA,CANA;AAQA,MAAMC,cAAc,GAAG9B,MAAM,CAACK,QAAD,CAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CARA;;AAwBA,MAAM0B,cAAc,GAAG,CAAC;AACtBC,EAAAA,iBADsB;AAEtBC,EAAAA,SAFsB;AAGtBC,EAAAA,QAHsB;AAItBC,EAAAA,KAJsB;AAKtBC,EAAAA,gBALsB;AAMtBC,EAAAA,eANsB;AAOtBC,EAAAA,cAPsB;AAQtBC,EAAAA,mBARsB;AAStBC,EAAAA,cATsB;AAUtBC,EAAAA,OAVsB;AAWtBC,EAAAA;AAXsB,CAAD,KAYV;AACX3C,EAAAA,KAAK,CAAC4C,SAAN,CAAgB,MAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBT,QAAAA,eAAe;AAChB;AACF;;AAEDU,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,MAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACP,eAAD,CAXH;AAaA,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAE,MAAM,CAAE,CAAvB;AAAyB,IAAA,IAAI,EAAC,MAA9B;AAAqC,uBAAgB;AAArD,kBACE,oBAAC,GAAD;AAAK,IAAA,GAAG,EAAC;AAAT,kBACE,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,KAAK,EAAC,UAAtC;AAAiD,IAAA,MAAM,EAAEA,eAAzD;AAA0E,IAAA,cAAc,EAAE;AAA1F,kBACE,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAC,MAApB;AAA2B,IAAA,KAAK,EAAEnC,MAAM,CAACuB;AAAzC,IADF,CADF,eAIE,gCAAKO,iBAAL,CAJF,eAKE,oBAAC,KAAD,qBACE,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,KAAK,EAAC,UAAtC;AAAiD,IAAA,MAAM,EAAEK,eAAzD;AAA0E,IAAA,cAAc,EAAE;AAA1F,kBACE,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAC;AAAZ,IADF,CADF,CALF,CADF,EAYGC,cAAc,IAAIA,cAAc,EAAEY,MAAhB,GAAyB,CAA3C,iBACC,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,SAAD;AAAW;AAAX,KAA8B,GAAEjB,SAAU,IAAGC,QAAS,EAAtD,CADF,eAEE,oBAAC,eAAD,QACGI,cAAc,EAAEa,GAAhB,CAAqBC,OAAD,iBACnB,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEA,OAAO,EAAEC,EAA9B;AAAkC,IAAA,EAAE,EAAED,OAAO,EAAEC,EAA/C;AAAmD,IAAA,QAAQ,EAAED,OAAO,EAAEE;AAAtE,IADD,CADH,CAFF,CAbJ,EAsBGf,mBAAmB,IAAIA,mBAAmB,EAAEW,MAArB,GAA8B,CAArD,iBACC,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,SAAD,QAAYd,gBAAgB,IAAI,EAAhC,CADF,eAEE,oBAAC,eAAD,QACGG,mBAAmB,EAAEY,GAArB,CAA0BC,OAAD,iBACxB,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEA,OAAO,EAAEC,EAA9B;AAAkC,IAAA,EAAE,EAAED,OAAO,EAAEC,EAA/C;AAAmD,IAAA,QAAQ,EAAED,OAAO,EAAEE;AAAtE,IADD,CADH,CAFF,CAvBJ,EAiCGd,cAAc,IAAIA,cAAc,EAAEU,MAAhB,GAAyB,CAA3C,iBACC,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,SAAD,QAAY,EAAZ,CADF,eAEE,oBAAC,eAAD,QACGV,cAAc,EAAEW,GAAhB,CAAqBC,OAAD,iBACnB,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEA,OAAO,EAAEC,EAA9B;AAAkC,IAAA,UAAU,EAAED,OAAO,CAACG,UAAtD;AAAkE,IAAA,EAAE,EAAEH,OAAO,EAAEC,EAA/E;AAAmF,IAAA,QAAQ,EAAED,OAAO,EAAEE;AAAtG,IADD,CADH,CAFF,CAlCJ,EA2CGb,OAAO,iBACN;AAAK,IAAA,GAAG,EAAC,eAAT;AAAyB,IAAA,KAAK,EAAE;AAAEe,MAAAA,OAAO,EAAE,MAAX;AAAmBC,MAAAA,MAAM,EAAE;AAA3B;AAAhC,kBACE,oBAAC,MAAD;AACE,IAAA,KAAK,EAAE;AAAEC,MAAAA,KAAK,EAAE,KAAT;AAAgBD,MAAAA,MAAM,EAAE;AAAxB,KADT;AAEE,IAAA,OAAO,EAAC,WAFV;AAGE,IAAA,OAAO,EAAGZ,CAAD,IAAO;AACdA,MAAAA,CAAC,CAACc,cAAF;AACAlB,MAAAA,OAAO,CAACI,CAAD,CAAP;AACD;AANH,KAOGH,YAPH,CADF,CA5CJ,CADF;AA2DD,CArFD;;;AAbEV,EAAAA,iB;AACAC,EAAAA,S;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,gB;AACAC,EAAAA,e;AACAC,EAAAA,c;AACAC,EAAAA,mB;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,Y;;AA0FF,eAAeX,cAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../../styles';\n\nimport MenuLink from './MenuLink';\nimport {UserMenuItem} from '../../types';\nimport {Button, IconButton} from '../../Button';\nimport {ArrowLineLeft, Close} from '../../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentSStyling} from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.fixed_menu};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .signOutButton {\n    height: 40px !important;\n    width: 288px !important;\n\n    ${BREAKPOINTS.SMALL} {\n      width: 328px !important;\n    }\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n  ${UserMenuSectionListStyling};\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\nconst StyledMenulink = styled(MenuLink)`\n  width: 100%;\n  height: 48px;\n  margin: 0;\n  \n  & a {\n    height: 100%;\n  }\n`;\n\ninterface Props {\n  accountMenuHeader: string;\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst MobileUserMenu = ({\n  accountMenuHeader,\n  firstName,\n  lastName,\n  email,\n  organizationName,\n  clickMenuAction,\n  accountSection,\n  organizationSection,\n  supportSection,\n  signOut,\n  signOutLabel,\n}: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top key=\"MobileUserMenuTopSection\">\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{accountMenuHeader}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <LabelLine data-hj-suppress>{`${firstName} ${lastName}`}</LabelLine>\n          <MenuSectionList>\n            {accountSection?.map((element) => (\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MObileOrganizationSection\">\n          <LabelLine>{organizationName || ''}</LabelLine>\n          <MenuSectionList>\n            {organizationSection?.map((element) => (\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {supportSection && supportSection?.length > 0 && (\n        <MenuSection key=\"MobileSupportSection\">\n          <LabelLine>{''}</LabelLine>\n          <MenuSectionList>\n            {supportSection?.map((element) => (\n              <StyledMenulink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n      {signOut && (\n        <div key=\"SignoutButton\" style={{ display: 'flex', margin: 'auto 0 12px 0' }}>\n          <Button\n            style={{ width: '90%', margin: '0 auto' }}\n            variant=\"secondary\"\n            onClick={(e) => {\n              e.preventDefault();\n              signOut(e);\n            }}>\n            {signOutLabel}\n          </Button>\n        </div>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileUserMenu;\n"],"file":"MobileUserMenu.js"}

package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js

@@ -8,6 +8,7 @@ import MenuLink from './MenuLink';
 import { Size } from '../../types';
 import { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';
 import { ComponentXSStyling, HeadlineXXSStyling } from '../../styles/typography';
+import { Z_INDEXES } from '../../styles/z-indexes';
 const Menu = styled.ul`
   list-style: none;
   margin: 0;
@@ -22,7 +23,7 @@ const Menu = styled.ul`
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   border: 1px solid ${COLORS.neutral_200};
-  z-index: 100;
+  z-index: ${Z_INDEXES.fixed_menu};
 
   .open & {
     display: block;

package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["React","styled","Button","COLORS","ComponentTextStyle","Avatar","AvatarContainer","MenuLink","Size","flowDown","UserMenuSectionListStyling","ComponentXSStyling","HeadlineXXSStyling","Menu","ul","white","neutral_200","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Large","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport { UserMenuItem, Size } from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ${COLORS.neutral_200};\n  z-index: 100;\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n  margin: 25px 0 0 25px;\n  pointer-events: none;\n`;\n\nconst AvatarAndName = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\n  }\n  span {\n    margin: 0 0 0 20px;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst NameAndEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n  margin-left: 25px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <AvatarAndName key=\"AvatarAndNameSection\">\n        <StyledAvatarContainer hidePadding={true}>\n          <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n        </StyledAvatarContainer>\n        <NameAndEmail>\n          <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n          <span data-hj-suppress>{email}</span>\n        </NameAndEmail>\n      </AvatarAndName>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <MenuSectionList>\n            {accountSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MobileOrganizationSection\">\n          <OrganizationName>{organizationName || ''}</OrganizationName>\n          <MenuSectionList>\n            {organizationSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      <MenuSection key=\"MobileSupportSection\">\n        <MenuSectionList>\n          {supportSection?.map(element => (\n            <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n          ))}\n          {signOut && (\n            <Button\n              width=\"90%\"\n              className=\"UserMenuLink sign-out\"\n              variant=\"secondary\"\n              size={Size.Large}\n              onClick={e => {\n                e.preventDefault();\n                signOut(e);\n              }}>\n              {signOutLabel}\n            </Button>\n          )}\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["React","styled","Button","COLORS","ComponentTextStyle","Avatar","AvatarContainer","MenuLink","Size","flowDown","UserMenuSectionListStyling","ComponentXSStyling","HeadlineXXSStyling","Z_INDEXES","Menu","ul","white","neutral_200","fixed_menu","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Large","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport { UserMenuItem, Size } from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ${COLORS.neutral_200};\n  z-index: ${Z_INDEXES.fixed_menu};\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n  margin: 25px 0 0 25px;\n  pointer-events: none;\n`;\n\nconst AvatarAndName = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\n  }\n  span {\n    margin: 0 0 0 20px;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst NameAndEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n  margin-left: 25px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <AvatarAndName key=\"AvatarAndNameSection\">\n        <StyledAvatarContainer hidePadding={true}>\n          <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n        </StyledAvatarContainer>\n        <NameAndEmail>\n          <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n          <span data-hj-suppress>{email}</span>\n        </NameAndEmail>\n      </AvatarAndName>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <MenuSectionList>\n            {accountSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MobileOrganizationSection\">\n          <OrganizationName>{organizationName || ''}</OrganizationName>\n          <MenuSectionList>\n            {organizationSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      <MenuSection key=\"MobileSupportSection\">\n        <MenuSectionList>\n          {supportSection?.map(element => (\n            <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n          ))}\n          {signOut && (\n            <Button\n              width=\"90%\"\n              className=\"UserMenuLink sign-out\"\n              variant=\"secondary\"\n              size={Size.Large}\n              onClick={e => {\n                e.preventDefault();\n                signOut(e);\n              }}>\n              {signOutLabel}\n            </Button>\n          )}\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}

package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js

@@ -2,6 +2,7 @@ import styled, { css, keyframes } from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../../styles';
 import { NavLink } from 'react-router-dom';
 import { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';
+import { Z_INDEXES } from '../../styles/z-indexes';
 export const RowLayout = styled.div`
   display: flex;
   align-items: center;
@@ -42,7 +43,7 @@ export const Menu = styled.ul`
   top: 0;
   min-width: 300px;
   position: absolute;
-  z-index: 100;
+  z-index: ${Z_INDEXES.off_canvas};
   align-items: center;
   width: 320px;
   padding-inline-start: 0;
@@ -96,7 +97,11 @@ export const MenuSectionList = styled.ul`
   }
 `;
 export const UserMenuSectionListStyling = css`
+  li {
+    position: relative;
+  }
   li:hover:not(.disabled) {
+    z-index: ${Z_INDEXES.hover};
     background-color: ${COLORS.primary_20};
     a {
       color: ${COLORS.primary_600};
@@ -107,6 +112,7 @@ export const UserMenuSectionListStyling = css`
   }
 
   li:focus-within:not(.disabled) {
+    z-index: ${Z_INDEXES.focus};
     box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
     a {
       outline: none;
@@ -114,6 +120,7 @@ export const UserMenuSectionListStyling = css`
   }
 
   li:active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
     background: ${COLORS.primary_100};
     box-shadow: none;
     a {

package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","NavLink","ComponentMStyling","ComponentTextStyle","RowLayout","div","Button","button","white","flowLeft","flowRight","Menu","ul","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","primary_20","primary_600","primary_500","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\nexport const Menu = styled.ul`\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: 100;\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ${flowRight} 0.3s ease-in-out;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n    \n    a {\n      height: 100%;\n    }\n  }\n`;\n\nexport const UserMenuSectionListStyling = css`\n  li:hover:not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    a {\n      color: ${COLORS.primary_600};\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    background: ${COLORS.primary_100};\n    box-shadow: none;\n    a {\n      color: ${COLORS.primary_800};\n    }\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n  background-color: ${COLORS.white};\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\ninterface MenuWrapperProps {\n  isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n"],"file":"CommonStyles.js"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","NavLink","ComponentMStyling","ComponentTextStyle","Z_INDEXES","RowLayout","div","Button","button","white","flowLeft","flowRight","Menu","ul","off_canvas","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","hover","primary_20","primary_600","focus","primary_500","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\nexport const Menu = styled.ul`\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ${flowRight} 0.3s ease-in-out;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n    \n    a {\n      height: 100%;\n    }\n  }\n`;\n\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    a {\n      color: ${COLORS.primary_600};\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    box-shadow: none;\n    a {\n      color: ${COLORS.primary_800};\n    }\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n  background-color: ${COLORS.white};\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\ninterface MenuWrapperProps {\n  isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n"],"file":"CommonStyles.js"}

package/dist/esm/InputFields/DatepickerField.js

@@ -34,6 +34,7 @@ import { ComponentTextStyle, scrollBarStyling } from '../styles';
 import { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';
 import 'react-datepicker/dist/react-datepicker.css';
 import { ComponentMStyling, ComponentSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
 /**
  * Add custom types.
  */
@@ -42,6 +43,11 @@ import { ComponentMStyling, ComponentSStyling } from '../styles/typography';
  * Add custom styles.
  */
 const DatePickerContainer = styled.div`
+  
+  .react-datepicker-popper{
+    z-index: ${Z_INDEXES.dropdown};  
+  }
+
   > div {
     display: block;
     ${props => props.margin ? `margin: ${props.margin};` : ''}

package/dist/esm/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","css","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","IconButton","DatepickerFieldHeader","ComponentTextStyle","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","DatePickerContainer","div","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","DatepickerRow","disabled","locked","primary_600","StyledInputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","id","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","useRef","datepickerRef","tabbedHere","setTabbedHere","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","supressFocusRef","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","setOpen","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","e","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","critical_400"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,OAAOC,EAAP,MAAe,uBAAf;AACA,OAAOC,MAAP,MAAmB,QAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAAQC,QAAR,EAAkBC,gBAAlB,QAAyC,kCAAzC;AACA,SAAQC,UAAR,QAAyB,iBAAzB;AACA,SAAQC,qBAAR,QAAiE,yBAAjE;AACA,SAAQC,kBAAR,EAA4BC,gBAA5B,QAAmD,WAAnD;AAEA;AACA;AACA;;AACA,SAAQC,YAAR,EAAsBC,iBAAtB,EAAyCC,YAAzC,QAA4D,WAA5D;AACA,OAAO,4CAAP;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,sBAAnD;AAEA;AACA;AACA;;AAmBA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAGjB,MAAM,CAACkB,GAA6C;AAChF;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBf,MAAM,CAACgB,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBhB,MAAM,CAACiB,WAAY;AACzC,mCAAmCjB,MAAM,CAACkB,QAAS,iBAAgBlB,MAAM,CAACmB,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BnB,MAAM,CAACoB,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCpB,MAAM,CAACqB,WAAY;AACpD,oBAAoBrB,MAAM,CAACoB,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAACQ,UAAP,GAAoB,MAApB,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQX,iBAAiB,CAACN,kBAAkB,CAACkB,IAApB,EAA0BvB,MAAM,CAACwB,WAAjC,CAA8C;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,QAAQlB,gBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQI,iBAAiB,CAACL,kBAAkB,CAACoB,OAApB,EAA6BzB,MAAM,CAACwB,WAApC,CAAiD;AAC1E;AACA;AACA;AACA,oBAAoBxB,MAAM,CAAC0B,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,iBAAiB,CAACL,kBAAkB,CAACoB,OAApB,EAA6BzB,MAAM,CAACwB,WAApC,CAAiD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBxB,MAAM,CAACwB,WAAY;AACpC,sBAAsBxB,MAAM,CAAC0B,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiB1B,MAAM,CAAC2B,WAAY;AACpC,sBAAsB3B,MAAM,CAACgB,UAAW;AACxC;AACA;AACA;AACA,iBAAiBhB,MAAM,CAAC4B,WAAY;AACpC,sBAAsB5B,MAAM,CAACiB,WAAY;AACzC,mCAAmCjB,MAAM,CAACkB,QAAS,iBAAgBlB,MAAM,CAACmB,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBnB,MAAM,CAAC0B,KAAM;AAC9B,sBAAsB1B,MAAM,CAAC6B,WAAY;AACzC;AACA;AACA;AACA;AACA,oBAAoB7B,MAAM,CAAC0B,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,iBAAiB,CAACL,kBAAkB,CAACoB,OAApB,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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';\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  > div {\n    display: block;\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\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    .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\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 DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 4px;\n    top: 4px;\n\n    svg {\n    }\n  }\n\n  ${(props) =>\n    props?.disabled || props?.locked\n      ? ''\n      : css`\n          &:hover {\n            svg,\n            svg path {\n              fill: ${COLORS.primary_600} !important;\n            }\n          }\n        `}\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n    ::placeholder {\n      color: ${COLORS.primary_600};\n    }\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\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 = React.useRef<any>(null);\n  const datepickerRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\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 supressFocusRef = React.useRef<any>(null);\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  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\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  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || 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          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: DatepickerFieldHeaderParams) =>\n                  React.createElement(\n                    DatepickerFieldHeader,\n                    { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n                    null,\n                  )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} locked={locked} tabIndex={disabled ? -1 : 0}>\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                    readOnly={true}\n                    className={hasError ? 'error' : ''}\n                    tabIndex={0}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}\n                    tabbedHere={tabbedHere}\n                    onBlur={() => setTabbedHere(false)}\n                    onMouseDown={(e: any) => {\n                      if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;\n                    }}\n                    onFocus={(e: any) => {\n                      if (!(locked || disabled)) {\n                        if (!supressFocusRef.current) setTabbedHere(true);\n                        else supressFocusRef.current = false;\n                      }\n                    }}\n                  />\n                  <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled || locked}>\n                    <Calendar size=\"24\" />\n                  </IconButton>\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","css","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","IconButton","DatepickerFieldHeader","ComponentTextStyle","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","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","DatepickerRow","disabled","locked","primary_600","StyledInputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","id","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","useRef","datepickerRef","tabbedHere","setTabbedHere","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","supressFocusRef","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","setOpen","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","e","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","critical_400"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,OAAOC,EAAP,MAAe,uBAAf;AACA,OAAOC,MAAP,MAAmB,QAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAAQC,QAAR,EAAkBC,gBAAlB,QAAyC,kCAAzC;AACA,SAAQC,UAAR,QAAyB,iBAAzB;AACA,SAAQC,qBAAR,QAAiE,yBAAjE;AACA,SAAQC,kBAAR,EAA4BC,gBAA5B,QAAmD,WAAnD;AAEA;AACA;AACA;;AACA,SAAQC,YAAR,EAAsBC,iBAAtB,EAAyCC,YAAzC,QAA4D,WAA5D;AACA,OAAO,4CAAP;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,sBAAnD;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA;AACA;AACA;;AAmBA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAGlB,MAAM,CAACmB,GAA6C;AAChF;AACA;AACA,eAAeF,SAAS,CAACG,QAAS;AAClC;AACA;AACA;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBjB,MAAM,CAACkB,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBlB,MAAM,CAACmB,WAAY;AACzC,mCAAmCnB,MAAM,CAACoB,QAAS,iBAAgBpB,MAAM,CAACqB,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BrB,MAAM,CAACsB,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCtB,MAAM,CAACuB,WAAY;AACpD,oBAAoBvB,MAAM,CAACsB,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAACQ,UAAP,GAAoB,MAApB,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQb,iBAAiB,CAACN,kBAAkB,CAACoB,IAApB,EAA0BzB,MAAM,CAAC0B,WAAjC,CAA8C;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,QAAQpB,gBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQI,iBAAiB,CAACL,kBAAkB,CAACsB,OAApB,EAA6B3B,MAAM,CAAC0B,WAApC,CAAiD;AAC1E;AACA;AACA;AACA,oBAAoB1B,MAAM,CAAC4B,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQlB,iBAAiB,CAACL,kBAAkB,CAACsB,OAApB,EAA6B3B,MAAM,CAAC0B,WAApC,CAAiD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB1B,MAAM,CAAC0B,WAAY;AACpC,sBAAsB1B,MAAM,CAAC4B,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiB5B,MAAM,CAAC6B,WAAY;AACpC,sBAAsB7B,MAAM,CAACkB,UAAW;AACxC;AACA;AACA;AACA,iBAAiBlB,MAAM,CAAC8B,WAAY;AACpC,sBAAsB9B,MAAM,CAACmB,WAAY;AACzC,mCAAmCnB,MAAM,CAACoB,QAAS,iBAAgBpB,MAAM,CAACqB,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAAC4B,KAAM;AAC9B,sBAAsB5B,MAAM,CAAC+B,WAAY;AACzC;AACA;AACA;AACA;AACA,oBAAoB/B,MAAM,CAAC4B,KAAM;AACjC;AA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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';\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    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\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    .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\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 DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 4px;\n    top: 4px;\n\n    svg {\n    }\n  }\n\n  ${(props) =>\n    props?.disabled || props?.locked\n      ? ''\n      : css`\n          &:hover {\n            svg,\n            svg path {\n              fill: ${COLORS.primary_600} !important;\n            }\n          }\n        `}\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n    ::placeholder {\n      color: ${COLORS.primary_600};\n    }\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\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 = React.useRef<any>(null);\n  const datepickerRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\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 supressFocusRef = React.useRef<any>(null);\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  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\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  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || 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          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: DatepickerFieldHeaderParams) =>\n                  React.createElement(\n                    DatepickerFieldHeader,\n                    { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n                    null,\n                  )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} locked={locked} tabIndex={disabled ? -1 : 0}>\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                    readOnly={true}\n                    className={hasError ? 'error' : ''}\n                    tabIndex={0}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}\n                    tabbedHere={tabbedHere}\n                    onBlur={() => setTabbedHere(false)}\n                    onMouseDown={(e: any) => {\n                      if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;\n                    }}\n                    onFocus={(e: any) => {\n                      if (!(locked || disabled)) {\n                        if (!supressFocusRef.current) setTabbedHere(true);\n                        else supressFocusRef.current = false;\n                      }\n                    }}\n                  />\n                  <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled || locked}>\n                    <Calendar size=\"24\" />\n                  </IconButton>\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/esm/InputFields/PasswordField.js

@@ -8,7 +8,7 @@ const StyledPassSwitch = styled.div`
   margin-left: -40px;
   margin-top: 8px;
   position: relative;
-  z-index: 2;
+  z-index: 1;
   height: 30px;
   width: 30px;
 

package/dist/esm/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["React","styled","BREAKPOINTS","InputFieldStyling","InputWrapper","StyledPassSwitch","div","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","passwordHidden","setPasswordHidden","useState","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 2;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
+{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["React","styled","BREAKPOINTS","InputFieldStyling","InputWrapper","StyledPassSwitch","div","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","passwordHidden","setPasswordHidden","useState","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/esm/List/ListRow.js

@@ -10,6 +10,7 @@ import { TooltipWrapper } from '../Tooltips';
 import { DropdownButton } from '../Dropdown';
 import { SystemIcons } from '../icons';
 import { Size } from '../types';
+import { Z_INDEXES } from '../styles/z-indexes';
 const Row = styled.div`
   display: flex;
   flex-direction: row;
@@ -36,18 +37,20 @@ const Row = styled.div`
   &.interactive:hover:not(.in-action):not(.disabled) {
     background-color: ${COLORS.primary_20};
     color: ${COLORS.primary_700};
+    z-index: ${Z_INDEXES.hover};
   }
 
   &.interactive:active:not(.in-action):not(.disabled) {
     background-color: ${COLORS.primary_100};
     color: ${COLORS.primary_800};
     box-shadow: none;
+    z-index: ${Z_INDEXES.active};
   }
 
   &.interactive:focus {
     outline: none;
     box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
-    z-index: 1;
+    z-index: ${Z_INDEXES.focus};
   }
 
   &.disabled {

package/dist/esm/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Regular","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","inAction","setInAction","useState","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,mBALF,QAMO,sBANP;AAQA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,IAAR,QAAmB,UAAnB;AAEA,MAAMC,GAAG,GAAGZ,MAAM,CAACa,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BZ,MAAM,CAACa,WAAY;AAChD;AACA;AACA;AACA,WAAWb,MAAM,CAACc,WAAY;AAC9B,sBAAsBd,MAAM,CAACe,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBf,MAAM,CAACgB,UAAW;AAC1C,aAAahB,MAAM,CAACiB,WAAY;AAChC;AACA;AACA;AACA,wBAAwBjB,MAAM,CAACkB,WAAY;AAC3C,aAAalB,MAAM,CAACmB,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAenB,MAAM,CAACoB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,iBAAiB,CAACH,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQlB,iBAAiB,CAACF,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQnB,iBAAiB,CAACD,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AA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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: 1;\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}
+{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","focus","neutral_300","Regular","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","inAction","setInAction","useState","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,mBALF,QAMO,sBANP;AAQA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,MAAMC,GAAG,GAAGb,MAAM,CAACc,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6Bb,MAAM,CAACc,WAAY;AAChD;AACA;AACA;AACA,WAAWd,MAAM,CAACe,WAAY;AAC9B,sBAAsBf,MAAM,CAACgB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBhB,MAAM,CAACiB,UAAW;AAC1C,aAAajB,MAAM,CAACkB,WAAY;AAChC,eAAeP,SAAS,CAACQ,KAAM;AAC/B;AACA;AACA;AACA,wBAAwBnB,MAAM,CAACoB,WAAY;AAC3C,aAAapB,MAAM,CAACqB,WAAY;AAChC;AACA,eAAeV,SAAS,CAACW,MAAO;AAChC;AACA;AACA;AACA;AACA;AACA,eAAeX,SAAS,CAACY,KAAM;AAC/B;AACA;AACA;AACA;AACA,eAAevB,MAAM,CAACwB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQpB,iBAAiB,CAACH,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQtB,iBAAiB,CAACF,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQvB,iBAAiB,CAACD,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMnB,mBAAmB,CAACL,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA,aAAazB,MAAM,CAACe,WAAY;AAChC;AACA,MAAMV,kBAAkB,CAACJ,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAazB,MAAM,CAACe,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA7JA;;AA6KA,MAAMW,OAAuC,GAAG,CAAC;AACEC,EAAAA,IAAI,GAAGjB,IAAI,CAACkB,MADd;AAEEC,EAAAA,OAAO,GAAG,QAFZ;AAGEC,EAAAA,IAHF;AAIEC,EAAAA,QAJF;AAKEC,EAAAA,aALF;AAMEC,EAAAA,QANF;AAOEC,EAAAA,IAPF;AAQEC,EAAAA,WARF;AASEC,EAAAA,QAAQ,GAAG,KATb;AAUEC,EAAAA;AAVF,CAAD,KAWc;AAE5D,QAAM,CAACC,QAAD,EAAWC,WAAX,IAA0BzC,KAAK,CAAC0C,QAAN,CAAwB,KAAxB,CAAhC;;AAEA,QAAMC,cAAc,GAAIC,CAAD,IAAY;AACjC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBN,MAAAA,MAAM,IAAIA,MAAM,EAAhB;AACD;AACF,GAJD;;AAMA,QAAMO,YAAY,GAAG,CAACN,QAAQ,GAAG,YAAH,GAAkB,EAA3B,EAClBO,MADkB,CACXT,QAAQ,GAAG,WAAH,GAAiB,EADd,EAElBS,MAFkB,CAEX,CAAC,CAACR,MAAF,GAAW,cAAX,GAA4B,EAFjB,EAGlBQ,MAHkB,CAGX,gBAHW,EAIlBA,MAJkB,CAIV,GAAEhB,OAAQ,GAJA,EAKlBgB,MALkB,CAKV,GAAElB,IAAK,EALG,CAArB;AAOA,sBACE,oBAAC,GAAD;AAAK,IAAA,QAAQ,EAAE,CAAC,CAACU,MAAF,IAAY,CAACD,QAAb,GAAwB,CAAxB,GAA4BU,SAA3C;AACK,IAAA,SAAS,EAAEF,YADhB;AAEK,IAAA,UAAU,EAAGF,CAAD,IAAO,CAACN,QAAD,IAAaK,cAAc,CAACC,CAAD,CAFnD;AAGK,IAAA,OAAO,EAAEA,CAAC,IAAI;AACZ,OAACN,QAAD,IAAaC,MAAb,IAAuBA,MAAM,EAA7B;AACD,KALN;AAMK;AANL,KAQI,CAAC,CAACP,IAAF,iBACA;AAAK,IAAA,SAAS,EAAE;AAAhB,KAAmCA,IAAnC,CATJ,eAWE;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACE;AAAK,IAAA,SAAS,EAAE;AAAhB,KAAwCC,QAAxC,CADF,EAEG,CAAC,CAACC,aAAF,iBAAmB;AAAK,IAAA,SAAS,EAAE;AAAhB,KAA6CA,aAA7C,CAFtB,CAXF,EAgBI,CAAC,CAACE,IAAF,iBACA,0CAEI,CAAC,CAACC,WAAF,iBACA;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAEA,WAAvB;AACgB,IAAA,IAAI,EAAER,IAAI,KAAKjB,IAAI,CAACqC,KAAd,GAAsBrC,IAAI,CAACkB,MAA3B,GAAoCD,IAAI,KAAKjB,IAAI,CAACsC,KAAd,GAAsBtC,IAAI,CAACuC,MAA3B,GAAoCvC,IAAI,CAACsC,KADnG;AAEgB,IAAA,QAAQ,EAAE,KAF1B;AAGgB,IAAA,SAAS,EAAE;AAH3B,KAIGd,IAJH,CADF,CAHJ,EAaI,CAACC,WAAD,iBACA;AAAK,IAAA,SAAS,EAAE;AAAhB,KACGD,IADH,CAdJ,CAjBJ,EAsCI,CAAC,CAACD,QAAF,iBACA;AAAK,IAAA,SAAS,EAAE,mBAAhB;AACK,IAAA,YAAY,EAAE,MAAMM,WAAW,CAAC,CAACN,QAAQ,EAAEG,QAAZ,CADpC;AAEK,IAAA,YAAY,EAAE,MAAMG,WAAW,CAAC,KAAD;AAFpC,kBAGE,oBAAC,cAAD,eAAoBN,QAApB;AACgB,IAAA,QAAQ,EAAEG,QAAQ,IAAIH,QAAQ,CAACG,QAD/C;AAEgB,IAAA,IAAI,EAAEP,OAAO,KAAK,SAAZ,gBACF,oBAAC,WAAD,CAAa,aAAb,OADE,gBAEF,oBAAC,WAAD,CAAa,YAAb;AAJpB,KAHF,CAvCJ,CADF;AAqDD,CAjFD;;;AAXEA,EAAAA,O,aAAU,Q,EAAW,S;AACrBC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,a;AAEAE,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,M;;AAsFF,eAAeX,OAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/esm/Modals/ModalContainer.js

@@ -9,6 +9,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import ReactModal from 'react-modal';
 import { BOXSHADOWS } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
 const ModalContainerStyles = {
   content: {
     top: '50%',
@@ -29,7 +30,7 @@ const ModalContainerStyles = {
 const modalTransitions = `
 .ReactModal__Overlay {
   opacity: 0;
-  z-index: 100;
+  z-index: ${Z_INDEXES.backdrop};
 }
 
 .ReactModal__Overlay--after-open {
@@ -38,6 +39,7 @@ const modalTransitions = `
 }
 
 .ReactModal__Content{
+  z-index: ${Z_INDEXES.modal};
   opacity:0;
   transform: translate(-50%, -50%) scale(1.1, 1.1);
 }