@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["React","styled","Logo","MainMenu","Actions","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","useClickOutside","MobileMenuWrapper","Z_INDEXES","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","MEDIUM","RowLayout","div","RightSide","MenuWrapper","props","isVisible","backdrop","UserMenuWrapper","white","floatRight","offsetRight","window","innerWidth","HamburgerButton","button","GlobalNavigationBar","name","mainNavigationOptions","secondaryNavigationOptions","secondaryButton","actions","firstName","lastName","email","organizationName","signout","isAuthenticated","mobileActions","notifications","switcherAction","reverseRightSideOrder","showBetaTag","accountSection","organizationSection","supportSection","accountMenuHeader","signOutLabel","useUserMenu","mainLogoTo","trackLogoClick","testId","useMaxWidth","showMenu","setShowMenu","useState","showUserMenu","setShowUserMenu","showMobileUserMenu","setShowMobileUserMenu","menuRef","useRef","userMenuRef","rightSideRef","avatarRight","setAvatarRight","handleClickMenuAction","useEffect","handleResize","right","document","getElementById","getBoundingClientRect","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './MainMenu';\nimport Actions from './Actions';\nimport { PageWidth } from '../Layouts';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport RightSideNav from './RightSideNav';\nimport { NavOption, NavButton, ActionOptions, UserMenuItem } from '../types';\nimport MobileMenu from './mobile/MobileMenu';\nimport { Menu } from '../icons/systemicons/SystemIcons';\nimport UserMenu from './UserMenu/UserMenu';\nimport useClickOutside from '../hooks/useClickOutside';\nimport { Menu as MobileMenuWrapper } from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  \n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n  \n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\n`;\n\nconst MenuWrapper = styled.div<MenuWrapperProps>`\n  background: rgba(0, 0, 0, 0.5);\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow-y: hidden;\n  bottom: 0;\n  right: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nconst UserMenuWrapper = styled.div<UserMenuWrapperProps>`\n  background-color: ${COLORS.white};\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n  position: absolute;\n  right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  top: 56px;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\ninterface UserMenuWrapperProps {\n  floatRight: boolean;\n  offsetRight: number | null | undefined;\n}\n\nconst HamburgerButton = styled.button`\n  border-width: 0;\n  background-color: ${COLORS.white};\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n  &:hover {\n    cursor: pointer;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\ninterface MenuWrapperProps {\n  isVisible: boolean;\n}\n\ntype Props = {\n  name?: string;\n  mainNavigationOptions?: NavOption[];\n  secondaryNavigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n  actions?: ActionOptions;\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n  organizationName?: string;\n  signout?: (e: any) => void;\n  isAuthenticated?: boolean;\n  mobileActions?: ActionOptions;\n  notifications?: NavOption[];\n  switcherAction?: () => void;\n  reverseRightSideOrder?: boolean;\n  showBetaTag?: boolean;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  accountMenuHeader?: string;\n  signOutLabel?: string;\n  useUserMenu?: boolean;\n  trackLogoClick?: () => void;\n  mainLogoTo?: string;\n  testId?: string;\n  useMaxWidth?: boolean;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n  name,\n  mainNavigationOptions,\n  secondaryNavigationOptions,\n  secondaryButton,\n  actions,\n  firstName,\n  lastName,\n  email,\n  organizationName,\n  signout,\n  isAuthenticated,\n  mobileActions,\n  notifications,\n  switcherAction,\n  reverseRightSideOrder = false,\n  showBetaTag,\n  accountSection,\n  organizationSection,\n  supportSection,\n  accountMenuHeader,\n  signOutLabel,\n  useUserMenu,\n  mainLogoTo,\n  trackLogoClick,\n  testId,\n  useMaxWidth = true,\n}: Props): React.ReactElement<Props> => {\n  const [showMenu, setShowMenu] = React.useState(false);\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n  const [showMobileUserMenu, setShowMobileUserMenu] = React.useState<boolean>(false);\n  const menuRef = React.useRef(null);\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n  const handleClickMenuAction = () => {\n    setShowMenu(false);\n  };\n\n  useClickOutside(userMenuRef, () => (showUserMenu ? setShowUserMenu(false) : null));\n  useClickOutside(menuRef, () => {\n    if (showMenu) {\n      setShowMobileUserMenu(false);\n      setShowMenu(false);\n    }\n  });\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const right = document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right;\n      if (right) {\n        setAvatarRight(right);\n      }\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right]);\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={showBetaTag} onClick={trackLogoClick} to={mainLogoTo} />\n            {isAuthenticated && <MainMenu navigationOptions={mainNavigationOptions || []} rightSideRef={rightSideRef} />}\n            <RightSide className=\"GlobalNavigationRightSide\" ref={rightSideRef}>\n              {reverseRightSideOrder ? (\n                <>\n                  <Actions\n                    actions={actions}\n                    firstName={firstName || ''}\n                    lastName={lastName || ''}\n                    hideOnLowWidth={true}\n                    useUserMenu={useUserMenu}\n                    setShowUserMenu={setShowUserMenu}\n                  />\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\n                </>\n              ) : (\n                <>\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\n                  <Actions\n                    actions={actions}\n                    firstName={firstName || ''}\n                    lastName={lastName || ''}\n                    hideOnLowWidth={true}\n                    useUserMenu={useUserMenu}\n                    setShowUserMenu={setShowUserMenu}\n                  />\n                </>\n              )}\n              <HamburgerButton onClick={() => setShowMenu(!showMenu)} hidden={!isAuthenticated}>\n                <Menu size=\"24px\" />\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MenuWrapper className={showMenu ? 'open' : 'closed'} isVisible={showMenu}>\n        <MobileMenuWrapper ref={menuRef} onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n          <MobileMenu\n            name={name || ''}\n            clickMenuAction={() => {\n              setShowMobileUserMenu(false);\n              handleClickMenuAction();\n            }}\n            navigationOptions={mainNavigationOptions || []}\n            secondaryNavigationOptions={secondaryNavigationOptions}\n            secondaryButton={secondaryButton}\n            firstName={firstName || ''}\n            lastName={lastName || ''}\n            email={email || ''}\n            signout={signout}\n            notifications={notifications}\n            actions={mobileActions}\n            switcherAction={switcherAction}\n            isAuthenticated={isAuthenticated}\n            accountSection={accountSection || []}\n            organizationSection={organizationSection || []}\n            supportSection={supportSection || []}\n            accountMenuHeader={accountMenuHeader || ''}\n            signOutLabel={signOutLabel || ''}\n            organizationName={organizationName || ''}\n            useUserMenu={useUserMenu}\n            showUserMenu={showMobileUserMenu}\n            setShowUserMenu={setShowMobileUserMenu}\n          />\n        </MobileMenuWrapper>\n      </MenuWrapper>\n      {useUserMenu && (\n        <UserMenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : 'closed'} floatRight={false} offsetRight={avatarRight} data-testid=\"testUserMenuWrapper\">\n          <UserMenu\n            firstName={firstName || ''}\n            lastName={lastName || ''}\n            email={email || ''}\n            organizationName={organizationName || ''}\n            clickMenuAction={() => setShowUserMenu(false)}\n            accountSection={accountSection}\n            organizationSection={organizationSection}\n            supportSection={supportSection}\n            signOut={signout}\n            signOutLabel={signOutLabel || ''}\n          />\n        </UserMenuWrapper>\n      )}\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["React","styled","Logo","MainMenu","Actions","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","useClickOutside","MobileMenuWrapper","Z_INDEXES","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","MEDIUM","RowLayout","div","RightSide","MenuWrapper","props","isVisible","backdrop","UserMenuWrapper","white","floatRight","offsetRight","window","innerWidth","HamburgerButton","button","GlobalNavigationBar","name","mainNavigationOptions","secondaryNavigationOptions","secondaryButton","actions","firstName","lastName","email","organizationName","signout","isAuthenticated","mobileActions","notifications","switcherAction","reverseRightSideOrder","showBetaTag","accountSection","organizationSection","supportSection","accountMenuHeader","signOutLabel","useUserMenu","mainLogoTo","trackLogoClick","testId","useMaxWidth","useState","showMenu","setShowMenu","showUserMenu","setShowUserMenu","showMobileUserMenu","setShowMobileUserMenu","menuRef","useRef","userMenuRef","rightSideRef","avatarRight","setAvatarRight","handleClickMenuAction","useEffect","handleResize","right","document","getElementById","getBoundingClientRect","addEventListener","removeEventListener"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,SAASC,SAAT,QAA0B,YAA1B;AACA,SAASC,MAAT,EAAiBC,WAAjB,QAAoC,WAApC;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,OAAOC,UAAP,MAAuB,qBAAvB;AACA,SAASC,IAAT,QAAqB,kCAArB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,eAAP,MAA4B,0BAA5B;AACA,SAASF,IAAI,IAAIG,iBAAjB,QAA0C,uBAA1C;AACA,SAAQC,SAAR,QAAwB,qBAAxB;;;;AAEA,IAAMC,aAAa,GAAGd,MAAM,CAACe,MAAV,mYAEUV,MAAM,CAACW,WAFjB,EAINH,SAAS,CAACI,WAJJ,EASfX,WAAW,CAACY,KATG,EAYfZ,WAAW,CAACa,MAZG,CAAnB;AAyBA,IAAMC,SAAS,GAAGpB,MAAM,CAACqB,GAAV,2FAAf;AAIA,IAAMC,SAAS,GAAGtB,MAAM,CAACqB,GAAV,kHAAf;AAKA,IAAME,WAAW,GAAGvB,MAAM,CAACqB,GAAV,+QAEJ,UAACG,KAAD;AAAA,SAAYA,KAAK,CAACC,SAAN,GAAkB,MAAlB,GAA2B,MAAvC;AAAA,CAFI,EAWJZ,SAAS,CAACa,QAXN,CAAjB;AAcA,IAAMC,eAAe,GAAG3B,MAAM,CAACqB,GAAV,2QACChB,MAAM,CAACuB,KADR,EAGJ,UAACJ,KAAD;AAAA,SAAYA,KAAK,CAACK,UAAN,GAAmB,MAAnB,GAA4B,OAAxC;AAAA,CAHI,EAKV,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACM,WAAN,aAAuBC,MAAM,CAACC,UAAP,GAAoBR,KAAK,CAACM,WAA1B,GAAwC,GAA/D,UAAyE,KAArF;AAAA,CALU,EAWHzB,MAAM,CAACuB,KAXJ,CAArB;AAoBA,IAAMK,eAAe,GAAGjC,MAAM,CAACkC,MAAV,6RAEC7B,MAAM,CAACuB,KAFR,EAKjBtB,WAAW,CAACY,KALK,EAQjBZ,WAAW,CAACa,MARK,EAejBb,WAAW,CAACa,MAfK,CAArB;;AAqDA;AACA;AACA;AACA;AACA;AACA,IAAMgB,mBAAmB,GAAG,SAAtBA,mBAAsB,OA2BY;AAAA;;AAAA,MA1BtCC,IA0BsC,QA1BtCA,IA0BsC;AAAA,MAzBtCC,qBAyBsC,QAzBtCA,qBAyBsC;AAAA,MAxBtCC,0BAwBsC,QAxBtCA,0BAwBsC;AAAA,MAvBtCC,eAuBsC,QAvBtCA,eAuBsC;AAAA,MAtBtCC,OAsBsC,QAtBtCA,OAsBsC;AAAA,MArBtCC,SAqBsC,QArBtCA,SAqBsC;AAAA,MApBtCC,QAoBsC,QApBtCA,QAoBsC;AAAA,MAnBtCC,KAmBsC,QAnBtCA,KAmBsC;AAAA,MAlBtCC,gBAkBsC,QAlBtCA,gBAkBsC;AAAA,MAjBtCC,OAiBsC,QAjBtCA,OAiBsC;AAAA,MAhBtCC,eAgBsC,QAhBtCA,eAgBsC;AAAA,MAftCC,aAesC,QAftCA,aAesC;AAAA,MAdtCC,aAcsC,QAdtCA,aAcsC;AAAA,MAbtCC,cAasC,QAbtCA,cAasC;AAAA,mCAZtCC,qBAYsC;AAAA,MAZtCA,qBAYsC,sCAZd,KAYc;AAAA,MAXtCC,WAWsC,QAXtCA,WAWsC;AAAA,MAVtCC,cAUsC,QAVtCA,cAUsC;AAAA,MATtCC,mBASsC,QATtCA,mBASsC;AAAA,MARtCC,cAQsC,QARtCA,cAQsC;AAAA,MAPtCC,iBAOsC,QAPtCA,iBAOsC;AAAA,MANtCC,YAMsC,QANtCA,YAMsC;AAAA,MALtCC,WAKsC,QALtCA,WAKsC;AAAA,MAJtCC,UAIsC,QAJtCA,UAIsC;AAAA,MAHtCC,cAGsC,QAHtCA,cAGsC;AAAA,MAFtCC,MAEsC,QAFtCA,MAEsC;AAAA,8BADtCC,WACsC;AAAA,MADtCA,WACsC,iCADxB,IACwB;;AACtC,wBAAgC9D,KAAK,CAAC+D,QAAN,CAAe,KAAf,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AACA,yBAAwCjE,KAAK,CAAC+D,QAAN,CAAe,KAAf,CAAxC;AAAA;AAAA,MAAOG,YAAP;AAAA,MAAqBC,eAArB;;AACA,yBAAoDnE,KAAK,CAAC+D,QAAN,CAAwB,KAAxB,CAApD;AAAA;AAAA,MAAOK,kBAAP;AAAA,MAA2BC,qBAA3B;;AACA,MAAMC,OAAO,GAAGtE,KAAK,CAACuE,MAAN,CAAa,IAAb,CAAhB;AACA,MAAMC,WAAW,GAAGxE,KAAK,CAACuE,MAAN,CAA6B,IAA7B,CAApB;AACA,MAAME,YAAY,GAAGzE,KAAK,CAACuE,MAAN,CAAa,IAAb,CAArB;;AACA,yBAAsCvE,KAAK,CAAC+D,QAAN,CAAuB,CAAvB,CAAtC;AAAA;AAAA,MAAOW,WAAP;AAAA,MAAoBC,cAApB;;AAEA,MAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAClCX,IAAAA,WAAW,CAAC,KAAD,CAAX;AACD,GAFD;;AAIArD,EAAAA,eAAe,CAAC4D,WAAD,EAAc;AAAA,WAAON,YAAY,GAAGC,eAAe,CAAC,KAAD,CAAlB,GAA4B,IAA/C;AAAA,GAAd,CAAf;AACAvD,EAAAA,eAAe,CAAC0D,OAAD,EAAU,YAAM;AAC7B,QAAIN,QAAJ,EAAc;AACZK,MAAAA,qBAAqB,CAAC,KAAD,CAArB;AACAJ,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GALc,CAAf;AAOAjE,EAAAA,KAAK,CAAC6E,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AAAA;;AACzB,UAAMC,KAAK,gBAAGC,QAAH,uEAAG,UAAUC,cAAV,CAAyB,iBAAzB,CAAH,oFAAG,sBAA6CC,qBAA7C,EAAH,2DAAG,uBAAsEH,KAApF;;AACA,UAAIA,KAAJ,EAAW;AACTJ,QAAAA,cAAc,CAACI,KAAD,CAAd;AACD;AACF,KALD;;AAOAD,IAAAA,YAAY;AACZ9C,IAAAA,MAAM,CAACmD,gBAAP,CAAwB,QAAxB,EAAkCL,YAAlC;AACA,WAAO;AAAA,aAAM9C,MAAM,CAACoD,mBAAP,CAA2B,QAA3B,EAAqCN,YAArC,CAAN;AAAA,KAAP,CAVoB,CAWpB;AACD,GAZD,EAYG,eAACE,QAAD,wEAAC,WAAUC,cAAV,CAAyB,iBAAzB,CAAD,oFAAC,sBAA6CC,qBAA7C,EAAD,2DAAC,uBAAsEH,KAAvE,CAZH;AAcA,sBACE;AAAA,4BACE,KAAC,aAAD;AAAe,qBAAalB,MAA5B;AAAA,6BACE,KAAC,SAAD;AAAW,QAAA,WAAW,EAAEC,WAAxB;AAAA,+BACE,MAAC,SAAD;AAAA,kCACE,KAAC,IAAD;AAAM,YAAA,IAAI,EAAEzB,IAAI,IAAI,EAApB;AAAwB,YAAA,WAAW,EAAEe,WAArC;AAAkD,YAAA,OAAO,EAAEQ,cAA3D;AAA2E,YAAA,EAAE,EAAED;AAA/E,YADF,EAEGZ,eAAe,iBAAI,KAAC,QAAD;AAAU,YAAA,iBAAiB,EAAET,qBAAqB,IAAI,EAAtD;AAA0D,YAAA,YAAY,EAAEmC;AAAxE,YAFtB,eAGE,MAAC,SAAD;AAAW,YAAA,SAAS,EAAC,2BAArB;AAAiD,YAAA,GAAG,EAAEA,YAAtD;AAAA,uBACGtB,qBAAqB,gBACpB;AAAA,sCACE,KAAC,OAAD;AACE,gBAAA,OAAO,EAAEV,OADX;AAEE,gBAAA,SAAS,EAAEC,SAAS,IAAI,EAF1B;AAGE,gBAAA,QAAQ,EAAEC,QAAQ,IAAI,EAHxB;AAIE,gBAAA,cAAc,EAAE,IAJlB;AAKE,gBAAA,WAAW,EAAEe,WALf;AAME,gBAAA,eAAe,EAAES;AANnB,gBADF,eASE,KAAC,YAAD;AAAc,gBAAA,iBAAiB,EAAE5B,0BAAjC;AAA6D,gBAAA,eAAe,EAAEC;AAA9E,gBATF;AAAA,cADoB,gBAapB;AAAA,sCACE,KAAC,YAAD;AAAc,gBAAA,iBAAiB,EAAED,0BAAjC;AAA6D,gBAAA,eAAe,EAAEC;AAA9E,gBADF,eAEE,KAAC,OAAD;AACE,gBAAA,OAAO,EAAEC,OADX;AAEE,gBAAA,SAAS,EAAEC,SAAS,IAAI,EAF1B;AAGE,gBAAA,QAAQ,EAAEC,QAAQ,IAAI,EAHxB;AAIE,gBAAA,cAAc,EAAE,IAJlB;AAKE,gBAAA,WAAW,EAAEe,WALf;AAME,gBAAA,eAAe,EAAES;AANnB,gBAFF;AAAA,cAdJ,eA0BE,KAAC,eAAD;AAAiB,cAAA,OAAO,EAAE;AAAA,uBAAMF,WAAW,CAAC,CAACD,QAAF,CAAjB;AAAA,eAA1B;AAAwD,cAAA,MAAM,EAAE,CAACjB,eAAjE;AAAA,qCACE,KAAC,IAAD;AAAM,gBAAA,IAAI,EAAC;AAAX;AADF,cA1BF;AAAA,YAHF;AAAA;AADF;AADF,MADF,eAuCE,KAAC,WAAD;AAAa,MAAA,SAAS,EAAEiB,QAAQ,GAAG,MAAH,GAAY,QAA5C;AAAsD,MAAA,SAAS,EAAEA,QAAjE;AAAA,6BACE,KAAC,iBAAD;AAAmB,QAAA,GAAG,EAAEM,OAAxB;AAAiC,QAAA,OAAO,EAAE,mBAAM,CAAE,CAAlD;AAAoD,QAAA,IAAI,EAAC,MAAzD;AAAgE,2BAAgB,gBAAhF;AAAA,+BACE,KAAC,UAAD;AACE,UAAA,IAAI,EAAEjC,IAAI,IAAI,EADhB;AAEE,UAAA,eAAe,EAAE,2BAAM;AACrBgC,YAAAA,qBAAqB,CAAC,KAAD,CAArB;AACAO,YAAAA,qBAAqB;AACtB,WALH;AAME,UAAA,iBAAiB,EAAEtC,qBAAqB,IAAI,EAN9C;AAOE,UAAA,0BAA0B,EAAEC,0BAP9B;AAQE,UAAA,eAAe,EAAEC,eARnB;AASE,UAAA,SAAS,EAAEE,SAAS,IAAI,EAT1B;AAUE,UAAA,QAAQ,EAAEC,QAAQ,IAAI,EAVxB;AAWE,UAAA,KAAK,EAAEC,KAAK,IAAI,EAXlB;AAYE,UAAA,OAAO,EAAEE,OAZX;AAaE,UAAA,aAAa,EAAEG,aAbjB;AAcE,UAAA,OAAO,EAAED,aAdX;AAeE,UAAA,cAAc,EAAEE,cAflB;AAgBE,UAAA,eAAe,EAAEH,eAhBnB;AAiBE,UAAA,cAAc,EAAEM,cAAc,IAAI,EAjBpC;AAkBE,UAAA,mBAAmB,EAAEC,mBAAmB,IAAI,EAlB9C;AAmBE,UAAA,cAAc,EAAEC,cAAc,IAAI,EAnBpC;AAoBE,UAAA,iBAAiB,EAAEC,iBAAiB,IAAI,EApB1C;AAqBE,UAAA,YAAY,EAAEC,YAAY,IAAI,EArBhC;AAsBE,UAAA,gBAAgB,EAAEZ,gBAAgB,IAAI,EAtBxC;AAuBE,UAAA,WAAW,EAAEa,WAvBf;AAwBE,UAAA,YAAY,EAAEU,kBAxBhB;AAyBE,UAAA,eAAe,EAAEC;AAzBnB;AADF;AADF,MAvCF,EAsEGX,WAAW,iBACV,KAAC,eAAD;AAAiB,MAAA,GAAG,EAAEc,WAAtB;AAAmC,MAAA,SAAS,EAAEN,YAAY,GAAG,MAAH,GAAY,QAAtE;AAAgF,MAAA,UAAU,EAAE,KAA5F;AAAmG,MAAA,WAAW,EAAEQ,WAAhH;AAA6H,qBAAY,qBAAzI;AAAA,6BACE,KAAC,QAAD;AACE,QAAA,SAAS,EAAEhC,SAAS,IAAI,EAD1B;AAEE,QAAA,QAAQ,EAAEC,QAAQ,IAAI,EAFxB;AAGE,QAAA,KAAK,EAAEC,KAAK,IAAI,EAHlB;AAIE,QAAA,gBAAgB,EAAEC,gBAAgB,IAAI,EAJxC;AAKE,QAAA,eAAe,EAAE;AAAA,iBAAMsB,eAAe,CAAC,KAAD,CAArB;AAAA,SALnB;AAME,QAAA,cAAc,EAAEd,cANlB;AAOE,QAAA,mBAAmB,EAAEC,mBAPvB;AAQE,QAAA,cAAc,EAAEC,cARlB;AASE,QAAA,OAAO,EAAET,OATX;AAUE,QAAA,YAAY,EAAEW,YAAY,IAAI;AAVhC;AADF,MAvEJ;AAAA,IADF;AAyFD,CAvJD;;;AAjCEpB,EAAAA,I;AACAC,EAAAA,qB;AACAC,EAAAA,0B;AAGAG,EAAAA,S;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,gB;AACAC,EAAAA,O;AACAC,EAAAA,e;AAEAE,EAAAA,a;AACAC,EAAAA,c;AACAC,EAAAA,qB;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,mB;AACAC,EAAAA,c;AACAC,EAAAA,iB;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAE,EAAAA,c;AACAD,EAAAA,U;AACAE,EAAAA,M;AACAC,EAAAA,W;;AAiKF,eAAe1B,mBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './MainMenu';\nimport Actions from './Actions';\nimport { PageWidth } from '../Layouts';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport RightSideNav from './RightSideNav';\nimport { NavOption, NavButton, ActionOptions, UserMenuItem } from '../types';\nimport MobileMenu from './mobile/MobileMenu';\nimport { Menu } from '../icons/systemicons/SystemIcons';\nimport UserMenu from './UserMenu/UserMenu';\nimport useClickOutside from '../hooks/useClickOutside';\nimport { Menu as MobileMenuWrapper } from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  \n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n  \n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\n`;\n\nconst MenuWrapper = styled.div<MenuWrapperProps>`\n  background: rgba(0, 0, 0, 0.5);\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow-y: hidden;\n  bottom: 0;\n  right: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nconst UserMenuWrapper = styled.div<UserMenuWrapperProps>`\n  background-color: ${COLORS.white};\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n  position: absolute;\n  right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  top: 56px;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\ninterface UserMenuWrapperProps {\n  floatRight: boolean;\n  offsetRight: number | null | undefined;\n}\n\nconst HamburgerButton = styled.button`\n  border-width: 0;\n  background-color: ${COLORS.white};\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n  &:hover {\n    cursor: pointer;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\ninterface MenuWrapperProps {\n  isVisible: boolean;\n}\n\ntype Props = {\n  name?: string;\n  mainNavigationOptions?: NavOption[];\n  secondaryNavigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n  actions?: ActionOptions;\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n  organizationName?: string;\n  signout?: (e: any) => void;\n  isAuthenticated?: boolean;\n  mobileActions?: ActionOptions;\n  notifications?: NavOption[];\n  switcherAction?: () => void;\n  reverseRightSideOrder?: boolean;\n  showBetaTag?: boolean;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  accountMenuHeader?: string;\n  signOutLabel?: string;\n  useUserMenu?: boolean;\n  trackLogoClick?: () => void;\n  mainLogoTo?: string;\n  testId?: string;\n  useMaxWidth?: boolean;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n  name,\n  mainNavigationOptions,\n  secondaryNavigationOptions,\n  secondaryButton,\n  actions,\n  firstName,\n  lastName,\n  email,\n  organizationName,\n  signout,\n  isAuthenticated,\n  mobileActions,\n  notifications,\n  switcherAction,\n  reverseRightSideOrder = false,\n  showBetaTag,\n  accountSection,\n  organizationSection,\n  supportSection,\n  accountMenuHeader,\n  signOutLabel,\n  useUserMenu,\n  mainLogoTo,\n  trackLogoClick,\n  testId,\n  useMaxWidth = true,\n}: Props): React.ReactElement<Props> => {\n  const [showMenu, setShowMenu] = React.useState(false);\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n  const [showMobileUserMenu, setShowMobileUserMenu] = React.useState<boolean>(false);\n  const menuRef = React.useRef(null);\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n  const handleClickMenuAction = () => {\n    setShowMenu(false);\n  };\n\n  useClickOutside(userMenuRef, () => (showUserMenu ? setShowUserMenu(false) : null));\n  useClickOutside(menuRef, () => {\n    if (showMenu) {\n      setShowMobileUserMenu(false);\n      setShowMenu(false);\n    }\n  });\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const right = document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right;\n      if (right) {\n        setAvatarRight(right);\n      }\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right]);\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={showBetaTag} onClick={trackLogoClick} to={mainLogoTo} />\n            {isAuthenticated && <MainMenu navigationOptions={mainNavigationOptions || []} rightSideRef={rightSideRef} />}\n            <RightSide className=\"GlobalNavigationRightSide\" ref={rightSideRef}>\n              {reverseRightSideOrder ? (\n                <>\n                  <Actions\n                    actions={actions}\n                    firstName={firstName || ''}\n                    lastName={lastName || ''}\n                    hideOnLowWidth={true}\n                    useUserMenu={useUserMenu}\n                    setShowUserMenu={setShowUserMenu}\n                  />\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\n                </>\n              ) : (\n                <>\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\n                  <Actions\n                    actions={actions}\n                    firstName={firstName || ''}\n                    lastName={lastName || ''}\n                    hideOnLowWidth={true}\n                    useUserMenu={useUserMenu}\n                    setShowUserMenu={setShowUserMenu}\n                  />\n                </>\n              )}\n              <HamburgerButton onClick={() => setShowMenu(!showMenu)} hidden={!isAuthenticated}>\n                <Menu size=\"24px\" />\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MenuWrapper className={showMenu ? 'open' : 'closed'} isVisible={showMenu}>\n        <MobileMenuWrapper ref={menuRef} onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n          <MobileMenu\n            name={name || ''}\n            clickMenuAction={() => {\n              setShowMobileUserMenu(false);\n              handleClickMenuAction();\n            }}\n            navigationOptions={mainNavigationOptions || []}\n            secondaryNavigationOptions={secondaryNavigationOptions}\n            secondaryButton={secondaryButton}\n            firstName={firstName || ''}\n            lastName={lastName || ''}\n            email={email || ''}\n            signout={signout}\n            notifications={notifications}\n            actions={mobileActions}\n            switcherAction={switcherAction}\n            isAuthenticated={isAuthenticated}\n            accountSection={accountSection || []}\n            organizationSection={organizationSection || []}\n            supportSection={supportSection || []}\n            accountMenuHeader={accountMenuHeader || ''}\n            signOutLabel={signOutLabel || ''}\n            organizationName={organizationName || ''}\n            useUserMenu={useUserMenu}\n            showUserMenu={showMobileUserMenu}\n            setShowUserMenu={setShowMobileUserMenu}\n          />\n        </MobileMenuWrapper>\n      </MenuWrapper>\n      {useUserMenu && (\n        <UserMenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : 'closed'} floatRight={false} offsetRight={avatarRight} data-testid=\"testUserMenuWrapper\">\n          <UserMenu\n            firstName={firstName || ''}\n            lastName={lastName || ''}\n            email={email || ''}\n            organizationName={organizationName || ''}\n            clickMenuAction={() => setShowUserMenu(false)}\n            accountSection={accountSection}\n            organizationSection={organizationSection}\n            supportSection={supportSection}\n            signOut={signout}\n            signOutLabel={signOutLabel || ''}\n          />\n        </UserMenuWrapper>\n      )}\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}

package/dist/esm/GlobalNavigationBar/Logo.js

@@ -1,100 +1,65 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { LaerdalLogo, LaerdalWhiteLogo } from '../assets';
 import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
 import { ComponentMStyling, ComponentXSStyling } from '../styles/typography';
-const StyledLink = styled(Link)`
-  text-align: center;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  &:focus-within {
-    outline: none;
-  }
-  svg {
-    width: 66px;
-    height: 36px;
-    color: ${props => props.$color};
-    ${BREAKPOINTS.MEDIUM} {
-      width: 88px;
-      height: 48px;
-    }
-  }
-`;
-const LogoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  height: 40px;
-  margin-right: 16px;
-  box-sizing: border-box;
-  padding: 24px 0;
-
-  ${BREAKPOINTS.MEDIUM} {
-    margin-top: 8px;
-    margin-bottom: 7px;
-  }
-
-  &:focus-within {
-    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);
-    outline: none;
-  }
-`;
-const Name = styled.span`
-  margin-left: 8px;
-  padding-left: 8px;
-  border-left: 1px solid ${props => props.$color || COLORS.black};
-  letter-spacing: -0.02em;
-
-  ${props => props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}
-
-  font-weight: 300 !important;
-  line-height: 24px !important;
-
-  ${BREAKPOINTS.MEDIUM} {
-    margin-left: 12px;
-    padding-left: 12px;
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}
-  }
-`;
-const BetaTag = styled.span`
-  background-color: ${props => props.backgroundColor || COLORS.accent2_500};
-  padding: 4px 8px;
-  margin-left: 8px;
-  margin-top: 2px;
-  border-left: none;
-  border-radius: 2px;
-
-  ${props => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}
-`;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var StyledLink = styled(Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) {
+  return props.$color;
+}, BREAKPOINTS.MEDIUM);
+var LogoContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var Name = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n    ", "\n  }\n"])), function (props) {
+  return props.$color || COLORS.black;
+}, function (props) {
+  return props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
+}, BREAKPOINTS.MEDIUM, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
+});
+var BetaTag = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"])), function (props) {
+  return props.backgroundColor || COLORS.accent2_500;
+}, function (props) {
+  return ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white);
+});
 
-const Logo = ({
-  name,
-  showBetaTag,
-  onClick,
-  to,
-  color,
-  noSizeChangeOnMobile,
-  betaTagBackgroundColor,
-  betaTagColor
-}) => {
-  return /*#__PURE__*/React.createElement(LogoContainer, null, /*#__PURE__*/React.createElement(StyledLink, {
-    to: to || '/',
-    onMouseDown: e => e.preventDefault(),
-    onClick: () => {
-      if (onClick) {
-        onClick();
-      }
-    },
-    $color: color
-  }, color === COLORS.white ? /*#__PURE__*/React.createElement(LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
-    $color: color,
-    noSizeChangeOnMobile: noSizeChangeOnMobile || false
-  }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
-    backgroundColor: betaTagBackgroundColor,
-    $color: betaTagColor
-  }, "BETA")));
+var Logo = function Logo(_ref) {
+  var name = _ref.name,
+      showBetaTag = _ref.showBetaTag,
+      _onClick = _ref.onClick,
+      to = _ref.to,
+      color = _ref.color,
+      noSizeChangeOnMobile = _ref.noSizeChangeOnMobile,
+      betaTagBackgroundColor = _ref.betaTagBackgroundColor,
+      betaTagColor = _ref.betaTagColor;
+  return /*#__PURE__*/_jsx(LogoContainer, {
+    children: /*#__PURE__*/_jsxs(StyledLink, {
+      to: to || '/',
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      onClick: function onClick() {
+        if (_onClick) {
+          _onClick();
+        }
+      },
+      $color: color,
+      children: [color === COLORS.white ? /*#__PURE__*/_jsx(LaerdalWhiteLogo, {}) : /*#__PURE__*/_jsx(LaerdalLogo, {}), /*#__PURE__*/_jsx(Name, {
+        $color: color,
+        noSizeChangeOnMobile: noSizeChangeOnMobile || false,
+        children: name
+      }), showBetaTag && /*#__PURE__*/_jsx(BetaTag, {
+        backgroundColor: betaTagBackgroundColor,
+        $color: betaTagColor,
+        children: "BETA"
+      })]
+    })
+  });
 };
 
 Logo.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","$color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","$color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/esm/GlobalNavigationBar/MainMenu.js

@@ -1,4 +1,9 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
@@ -7,58 +12,39 @@ import { MoreHorizontal } from '../icons/systemicons/SystemIcons';
 import { COLORS, BREAKPOINTS } from '../styles';
 import ExtendedMainMenu from './ExtendedMainMenu';
 import { IconButton } from '../Button';
-const NavContainer = styled.div`
-  display: none;
-  justify-content: center;
-  align-items: center;
-
-  ${BREAKPOINTS.MEDIUM} {
-    display: flex;
-  }
-
-  a {
-    text-decoration: none;
-  }
-`;
-const NavButton = styled.button`
-  background: ${COLORS.white};
-  border: 0;
-`;
-const ExtendedMenuWrapper = styled.div`
-  display: flex;
-  margin-left: ${props => props.floatRight ? 'auto' : 'unset'};
-
-  position: absolute;
-  flex-direction: column;
-  left: 290px;
-  top: 22px;
-
-  height: 0;
-  width: 0;
-
-  &:focus-within,
-  &:hover,
-  &.open {
-    background: ${COLORS.white};
-  }
-`;
-const ExtendedSection = styled.div`
-  position: relative;
-`;
-
-const MainMenu = ({
-  navigationOptions,
-  rightSideRef
-}) => {
-  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);
-  const extendedMenuRef = React.useRef(null);
-  const mainMenuRef = React.useRef(null);
-  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState(1);
-  const widthOfItem = 150;
-
-  const recalculateNumberOfItemsAllowed = () => {
-    if (rightSideRef?.current && mainMenuRef?.current) {
-      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var NavButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0;\n"])), COLORS.white);
+var ExtendedMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: ", ";\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), function (props) {
+  return props.floatRight ? 'auto' : 'unset';
+}, COLORS.white);
+var ExtendedSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+
+var MainMenu = function MainMenu(_ref) {
+  var navigationOptions = _ref.navigationOptions,
+      rightSideRef = _ref.rightSideRef;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showExtendedMenu = _React$useState2[0],
+      setShowExtendedMenu = _React$useState2[1];
+
+  var extendedMenuRef = React.useRef(null);
+  var mainMenuRef = React.useRef(null);
+
+  var _React$useState3 = React.useState(1),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      numberOfItemsAllowed = _React$useState4[0],
+      setNumberOfItemsAllowed = _React$useState4[1];
+
+  var widthOfItem = 150;
+
+  var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
+    if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
+      var _rightSideRef$current, _mainMenuRef$current;
+
+      var number = Math.floor(((rightSideRef === null || rightSideRef === void 0 ? void 0 : (_rightSideRef$current = rightSideRef.current) === null || _rightSideRef$current === void 0 ? void 0 : _rightSideRef$current.offsetLeft) - (mainMenuRef === null || mainMenuRef === void 0 ? void 0 : (_mainMenuRef$current = mainMenuRef.current) === null || _mainMenuRef$current === void 0 ? void 0 : _mainMenuRef$current.offsetLeft)) / widthOfItem);
 
       if (number !== numberOfItemsAllowed) {
         setNumberOfItemsAllowed(number);
@@ -66,74 +52,85 @@ const MainMenu = ({
     }
   };
 
-  const handleClickExtendedMenuAction = () => {
+  var handleClickExtendedMenuAction = function handleClickExtendedMenuAction() {
     setShowExtendedMenu(false);
   };
 
-  const handleClickOutside = e => {
-    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {
+  var handleClickOutside = function handleClickOutside(e) {
+    var _extendedMenuRef$curr;
+
+    if (extendedMenuRef !== null && extendedMenuRef !== void 0 && extendedMenuRef.current && !(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target))) {
       if (showExtendedMenu) {
         setShowExtendedMenu(false);
       }
     }
   };
 
-  React.useEffect(() => {
+  React.useEffect(function () {
     recalculateNumberOfItemsAllowed(); // Bind the event listener
 
     document.addEventListener('click', handleClickOutside);
     window.addEventListener('resize', recalculateNumberOfItemsAllowed);
-    return () => {
+    return function () {
       // Unbind the event listener on clean up
       document.removeEventListener('click', handleClickOutside);
       window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
     };
   });
 
-  const preventFocusOnClick = e => {
+  var preventFocusOnClick = function preventFocusOnClick(e) {
     e.preventDefault();
   };
 
-  return /*#__PURE__*/React.createElement(NavContainer, {
+  return /*#__PURE__*/_jsxs(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
-    open: showExtendedMenu
-  }, navigationOptions?.map((no, index) => index > numberOfItemsAllowed - 2 ? null : no?.disabled ? /*#__PURE__*/React.createElement(NavItem, {
-    as: NavButton,
-    exact: no?.exact,
-    className: "disabled",
-    key: no?.label,
-    onMouseDown: preventFocusOnClick,
-    onClick: () => {
-      if (no?.onClick) {
-        no?.onClick();
-      }
-    }
-  }, no?.label) : /*#__PURE__*/React.createElement(NavItem, {
-    as: NavLink,
-    exact: no?.exact,
-    to: no?.to || '',
-    key: no?.label,
-    onMouseDown: preventFocusOnClick,
-    onClick: () => {
-      if (no?.onClick) {
-        no?.onClick();
-      }
-    }
-  }, no?.label)), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/React.createElement(ExtendedSection, null, /*#__PURE__*/React.createElement(IconButton, {
-    variant: 'secondary',
-    shape: 'circular',
-    action: () => setShowExtendedMenu(true)
-  }, /*#__PURE__*/React.createElement(MoreHorizontal, {
-    size: "24px"
-  })), /*#__PURE__*/React.createElement(ExtendedMenuWrapper, {
-    ref: extendedMenuRef,
-    className: showExtendedMenu ? 'open' : '',
-    floatRight: false
-  }, /*#__PURE__*/React.createElement(ExtendedMainMenu, {
-    clickMenuAction: handleClickExtendedMenuAction,
-    navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
-  }))));
+    open: showExtendedMenu,
+    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no, index) {
+      return index > numberOfItemsAllowed - 2 ? null : no !== null && no !== void 0 && no.disabled ? /*#__PURE__*/_jsx(NavItem, {
+        as: NavButton,
+        exact: no === null || no === void 0 ? void 0 : no.exact,
+        className: "disabled",
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (no !== null && no !== void 0 && no.onClick) {
+            no === null || no === void 0 ? void 0 : no.onClick();
+          }
+        },
+        children: no === null || no === void 0 ? void 0 : no.label
+      }, no === null || no === void 0 ? void 0 : no.label) : /*#__PURE__*/_jsx(NavItem, {
+        as: NavLink,
+        exact: no === null || no === void 0 ? void 0 : no.exact,
+        to: (no === null || no === void 0 ? void 0 : no.to) || '',
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (no !== null && no !== void 0 && no.onClick) {
+            no === null || no === void 0 ? void 0 : no.onClick();
+          }
+        },
+        children: no === null || no === void 0 ? void 0 : no.label
+      }, no === null || no === void 0 ? void 0 : no.label);
+    }), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/_jsxs(ExtendedSection, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        variant: 'secondary',
+        shape: 'circular',
+        action: function action() {
+          return setShowExtendedMenu(true);
+        },
+        children: /*#__PURE__*/_jsx(MoreHorizontal, {
+          size: "24px"
+        })
+      }), /*#__PURE__*/_jsx(ExtendedMenuWrapper, {
+        ref: extendedMenuRef,
+        className: showExtendedMenu ? 'open' : '',
+        floatRight: false,
+        children: /*#__PURE__*/_jsx(ExtendedMainMenu, {
+          clickMenuAction: handleClickExtendedMenuAction,
+          navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
+        })
+      })]
+    })]
+  });
 };
 
 MainMenu.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/MainMenu.tsx"],"names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","NavContainer","div","MEDIUM","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","navigationOptions","rightSideRef","showExtendedMenu","setShowExtendedMenu","useState","extendedMenuRef","useRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","preventFocusOnClick","preventDefault","map","no","index","disabled","exact","label","onClick","to","length","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { NavItem } from '../NavItem';\nimport { MoreHorizontal } from '../icons/systemicons/SystemIcons';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport { NavOption } from '../types';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../Button';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  navigationOptions: NavOption[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ navigationOptions, rightSideRef }: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 150;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {\n      if (showExtendedMenu) {\n        setShowExtendedMenu(false);\n      }\n    }\n  };\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  });\n\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {navigationOptions?.map((no: NavOption, index: number) =>\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\n          <NavItem\n            as={NavButton}\n            exact={no?.exact}\n            className=\"disabled\"\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ) : (\n          <NavItem\n            as={NavLink}\n            exact={no?.exact}\n            to={no?.to || ''}\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ),\n      )}\n      {navigationOptions.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => setShowExtendedMenu(true)}>\n            <MoreHorizontal size=\"24px\" />\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction} navigationOptions={navigationOptions.slice(numberOfItemsAllowed - 1)} />\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"file":"MainMenu.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/MainMenu.tsx"],"names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","NavContainer","div","MEDIUM","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","navigationOptions","rightSideRef","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","preventFocusOnClick","preventDefault","map","no","index","disabled","exact","onClick","label","to","length","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { NavItem } from '../NavItem';\nimport { MoreHorizontal } from '../icons/systemicons/SystemIcons';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport { NavOption } from '../types';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../Button';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  navigationOptions: NavOption[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ navigationOptions, rightSideRef }: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 150;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {\n      if (showExtendedMenu) {\n        setShowExtendedMenu(false);\n      }\n    }\n  };\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  });\n\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {navigationOptions?.map((no: NavOption, index: number) =>\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\n          <NavItem\n            as={NavButton}\n            exact={no?.exact}\n            className=\"disabled\"\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ) : (\n          <NavItem\n            as={NavLink}\n            exact={no?.exact}\n            to={no?.to || ''}\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ),\n      )}\n      {navigationOptions.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => setShowExtendedMenu(true)}>\n            <MoreHorizontal size=\"24px\" />\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction} navigationOptions={navigationOptions.slice(numberOfItemsAllowed - 1)} />\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"file":"MainMenu.js"}