@laerdal/life-react-components 2.1.1-dev.3 → 2.1.1-dev.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs +1 -1
  2. package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -1
  3. package/dist/GlobalNavigationBar/GlobalNavigationBar.js +1 -1
  4. package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
  5. package/package.json +1 -1
package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs CHANGED
@@ -37,7 +37,7 @@ var RowLayout = _styledComponents.default.div(_templateObject2 || (_templateObje
37
37
  var HamburgerButton = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", " button {\n height: 56px;\n }\n\n ", " {\n display: none;\n }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
38
38
  var RightSide = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n\n ", " {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), _styles.BREAKPOINTS.XSMALL, HamburgerButton);
39
39
  var MobileMenuBackdrop = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ", ";\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ", " 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ", " 0.3s ease-in-out;\n }\n\n ", " {\n visibility: hidden !important;\n }\n"])), _styles.Z_INDEXES.backdrop, _CommonStyles.fadeIn, _CommonStyles.fadeOut, _styles.BREAKPOINTS.LARGE);
40
- var MobileWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n ", " {\n visibility: hidden !important;\n }\n"])), _styles.BREAKPOINTS.LARGE);
40
+ var MobileWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n ", " {\n display: none !important;\n }\n"])), _styles.BREAKPOINTS.LARGE);
41
41
  var UserMenuWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.LARGE, function (props) {
42
42
  return props.offsetRight && (0, _utils.hasWindow)() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
43
43
  });
package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","MobileWrapper","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\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\n ${BREAKPOINTS.LARGE} {\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 align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.XSMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst MobileWrapper = styled.div`\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n\n profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n profileComponent\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <MobileWrapper>\n {!!profileComponent && profileComponent }\n </MobileWrapper>\n\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}\n profileComponent= {profileComponent}\n />\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={!profileComponent ? profile : undefined}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
1
+ {"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","MobileWrapper","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\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\n ${BREAKPOINTS.LARGE} {\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 align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.XSMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst MobileWrapper = styled.div`\n ${BREAKPOINTS.LARGE} {\n display: none !important;\n }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n\n profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n profileComponent\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <MobileWrapper>\n {!!profileComponent && profileComponent }\n </MobileWrapper>\n\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}\n profileComponent= {profileComponent}\n />\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={!profileComponent ? profile : undefined}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAOA;AACA;AACA;AACA;AACA;AAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3C,IAAMA,aAAa,GAAGC,yBAAM,CAACC,MAAM,0aAGNC,cAAM,CAACC,WAAW,EAElCC,iBAAS,CAACC,WAAW,EAK9BC,mBAAW,CAACC,KAAK,EAIjBD,mBAAW,CAACE,KAAK,CAWpB;AAED,IAAMC,SAAS,GAAGT,yBAAM,CAACU,GAAG,iIAG3B;AAGD,IAAMC,eAAe,GAAGX,yBAAM,CAACU,GAAG,sKAC9BJ,mBAAW,CAACC,KAAK,EAIjBD,mBAAW,CAACE,KAAK,CAGpB;AAED,IAAMI,SAAS,GAAGZ,yBAAM,CAACU,GAAG,2QAIxBJ,mBAAW,CAACO,MAAM,EAKhBF,eAAe,CAMpB;AAED,IAAMG,kBAAkB,GAAGd,yBAAM,CAACU,GAAG,qfASxBN,iBAAS,CAACW,QAAQ,EAKdC,oBAAM,EAKNC,qBAAO,EAGpBX,mBAAW,CAACE,KAAK,CAGpB;AAED,IAAMU,aAAa,GAAGlB,yBAAM,CAACU,GAAG,sIAC5BJ,mBAAW,CAACE,KAAK,CAGpB;AAGD,IAAMW,eAAe,GAAGnB,yBAAM,CAACU,GAAG,+MACZR,cAAM,CAACkB,KAAK,EAI9Bd,mBAAW,CAACE,KAAK,EAER,UAACa,KAAK;EAAA,OAAMA,KAAK,CAACC,WAAW,IAAI,IAAAC,gBAAS,GAAE,aAAMC,MAAM,CAACC,UAAU,GAAGJ,KAAK,CAACC,WAAW,GAAG,GAAG,UAAO,KAAK;AAAA,CAAC,CAEtH;AAsBD;AACA;AACA;AACA;AACA;AACA,IAAMI,mBAAmB,GAAG,SAAtBA,mBAAmB,OAWkF;EAAA;EAAA,IAV5EC,IAAI,QAAJA,IAAI;IACJC,eAAe,QAAfA,eAAe;IACfC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,wBACNC,WAAW;IAAXA,WAAW,iCAAG,IAAI;IAClBC,QAAQ,QAARA,QAAQ;IACRC,gBAAgB,QAAhBA,gBAAgB;EAE7C,sBAA4CC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA1DC,cAAc;IAAEC,iBAAiB;EACxC,IAAMC,iBAAiB,GAAG,IAAAC,2BAAoB,EAACH,cAAc,CAAC;EAE9D,uBAAwCF,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAtDK,YAAY;IAAEC,eAAe;EAEpC,IAAMC,UAAU,GAAGR,KAAK,CAACS,MAAM,CAAoB,IAAI,CAAC;EACxD,IAAMC,gBAAgB,GAAGV,KAAK,CAACS,MAAM,EAA4F;EACjIC,gBAAgB,CAACC,OAAO,GAAGH,UAAU,aAAVA,UAAU,8CAAVA,UAAU,CAAEG,OAAO,iFAAnB,oBAAqBC,OAAO,oFAA5B,sBAA8BC,IAAI,CAAC,UAAAC,CAAC;IAAA,OAAIA,CAAC,CAACC,IAAI,KAAK,SAAS;EAAA,EAAC,qFAA7D,uBAA+DC,GAAG,2DAAlE,uBAAoEL,OAAO;EAEtG,IAAMM,mBAAmB,GAAGjB,KAAK,CAACS,MAAM,CAAoB,IAAI,CAAC;EAEjE,IAAMS,YAAY,GAAGlB,KAAK,CAACS,MAAM,CAAC,IAAI,CAAC;EACvC,uBAAsCT,KAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;IAAA;IAAxDkB,WAAW;IAAEC,cAAc;EAGlC,IAAMC,WAAW,GAAG,IAAAC,0BAAkB,EAAC;IAAA,OAAMf,eAAe,CAAC,KAAK,CAAC;EAAA,GAAE,CAACG,gBAAgB,CAAC,CAAC;EACxF,IAAMa,aAAa,GAAG,IAAAD,0BAAkB,EAAC;IAAA,OAAMnB,iBAAiB,CAAC,KAAK,CAAC;EAAA,GAAE,CAACc,mBAAmB,CAAC,CAAC;EAE/FjB,KAAK,CAACwB,SAAS,CAAC,YAAM;IACpB,IAAI,CAACd,gBAAgB,CAACC,OAAO,EAAE;IAE/B,IAAMc,YAAY,GAAG,SAAfA,YAAY,GAAS;MAAA;MACzB,IAAMC,kBAAkB,4BAAGhB,gBAAgB,CAACC,OAAO,oFAAxB,sBAA0BgB,qBAAqB,EAAE,2DAAjD,uBAAmDC,KAAK;MACnFR,cAAc,CAACM,kBAAkB,IAAI,CAAC,CAAC;IACzC,CAAC;IAEDD,YAAY,EAAE;IACdtC,MAAM,CAAC0C,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAMtC,MAAM,CAAC2C,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,CAACf,gBAAgB,CAACC,OAAO,CAAC,CAAC;EAG9B,oBACE;IAAA,wBACE,qBAAC,aAAa;MAAC,eAAaf,MAAO;MAAA,uBACjC,qBAAC,kBAAS;QAAC,WAAW,EAAEC,WAAY;QAAC,QAAQ,EAAEC,QAAS;QAAA,uBACtD,sBAAC,SAAS;UAAA,wBACR,qBAAC,aAAI;YAAC,IAAI,EAAER,IAAI,IAAI,EAAG;YAAC,WAAW,EAAEE,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEuC,WAAY;YAAC,OAAO,EAAEvC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEwC,OAAQ;YAAC,EAAE,EAAExC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEyC;UAAG,EAAE,EAE7F1C,eAAe,iBACf,qBAAC,iBAAQ;YAAC,KAAK,EAAE,CAAAI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEuC,KAAK,CAACC,MAAM,CAAC,UAAArB,CAAC;cAAA,OAAI,CAACA,CAAC,CAACsB,MAAM;YAAA,EAAC,KAAI,EAAG;YAAC,YAAY,EAAElB;UAAa,EAAE,eAE7F,sBAAC,SAAS;YAAC,SAAS,YAAKvB,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAE0C,qBAAqB,GAAG,SAAS,GAAG,EAAE,CAAG;YAChE,GAAG,EAAEnB,YAAa;YAAA,wBAC3B,qBAAC,qBAAY;cAAC,KAAK,EAAEvB,OAAO,aAAPA,OAAO,yCAAPA,OAAO,CAAEuC,KAAK,mDAAd,eAAgBC,MAAM,CAAC,UAAArB,CAAC;gBAAA,OAAIA,CAAC,CAACsB,MAAM;cAAA,EAAE;cAAC,MAAM,EAAEzC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE2C;YAAO,EAAE,eACtF,qBAAC,aAAa;cAAA,UACX,CAAC,CAACvC,gBAAgB,IAAIA;YAAgB,EACzB,eAEhB,qBAAC,uBAAc;cAAC,GAAG,EAAES,UAAW;cAChB,OAAO,EAAEb,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEiB,OAAQ;cAC1B,cAAc,EAAE;gBAAA,OAAML,eAAe,CAAC,CAACD,YAAY,CAAC;cAAA,CAAC;cACrD,IAAI,EAAEb,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE8C,IAAK;cACpB,gBAAgB,EAAGxC;YAAiB,EAClC,eAClB,qBAAC,eAAe;cAAC,MAAM,EAAE,CAACR,eAAgB;cAAA,uBACxC,qBAAC,kBAAU;gBAAC,MAAM,EAAE;kBAAA,OAAMY,iBAAiB,CAAC,CAACD,cAAc,CAAC;gBAAA,CAAC;gBACjD,GAAG,EAAEe,mBAAoB;gBACzB,KAAK,EAAE,UAAW;gBAClB,OAAO,EAAE,WAAY;gBAAA,uBAC/B,qBAAC,iBAAI;kBAAC,IAAI,EAAC;gBAAM;cAAE;YACR,EACG;UAAA,EACR;QAAA;MACF;IACF,EACE,eAChB,qBAAC,kBAAkB;MAAC,SAAS,EAAEf,cAAc,GAAG,MAAM,GAAG,CAACI,YAAY,IAAIF,iBAAiB,GAAG,QAAQ,GAAG,EAAG;MAAA,uBAC1G,qBAAC,kBAAiB;QAAC,GAAG,EAAEmB,aAAc;QACnB,IAAI,EAAC,MAAM;QACX,mBAAgB,gBAAgB;QAAA,uBACjD,qBAAC,mBAAU,kCAAK7B,MAAM;UACV,IAAI,EAAEQ,cAAe;UACrB,OAAO,EAAE;YAAA,OAAMC,iBAAiB,CAAC,KAAK,CAAC;UAAA,CAAC;UACxC,OAAO,EAAE,CAACJ,gBAAgB,GAAGN,OAAO,GAAG+C;QAAU;MAAE;IAC7C,EACD,EAEnB,CAAA7C,OAAO,aAAPA,OAAO,2CAAPA,OAAO,CAAEiB,OAAO,qDAAhB,iBAAkB6B,IAAI,CAAC,UAAA3B,CAAC;MAAA,OAAIA,CAAC,CAACC,IAAI,KAAK,SAAS;IAAA,EAAC,KAAI,CAAC,CAACtB,OAAO,iBAC9D,qBAAC,eAAe;MAAC,GAAG,EAAE4B,WAAY;MACjB,WAAW,EAAEF,WAAY;MACzB,eAAY,qBAAqB;MAAA,uBAChD,qBAAC,iBAAQ,kCAAK1B,OAAO;QACX,IAAI,EAAEa,YAAa;QACnB,cAAc,EAAE;UAAA,OAAMC,eAAe,CAAC,KAAK,CAAC;QAAA;MAAC;IAAE,EACzC;EAAA,EAEnB;AAEP,CAAC;AAAC;EA3HAhB,eAAe;EACfM,WAAW;EACXC,QAAQ;EAERR,IAAI;EACJE,IAAI;IAAKwC,OAAO;IAAeC,EAAE;IAAWF,WAAW;EAAA;EAOvDnC,MAAM;EAENG,gBAAgB;AAAA;AAAA,eA+GHV,mBAAmB;AAAA"}
package/dist/GlobalNavigationBar/GlobalNavigationBar.js CHANGED
@@ -30,7 +30,7 @@ var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTempla
30
30
  var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", " button {\n height: 56px;\n }\n\n ", " {\n display: none;\n }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
31
31
  var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n ", " {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), BREAKPOINTS.XSMALL, HamburgerButton);
32
32
  var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ", ";\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ", " 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ", " 0.3s ease-in-out;\n }\n\n ", " {\n visibility: hidden !important;\n }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
33
- var MobileWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", " {\n visibility: hidden !important;\n }\n"])), BREAKPOINTS.LARGE);
33
+ var MobileWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", " {\n display: none !important;\n }\n"])), BREAKPOINTS.LARGE);
34
34
  var UserMenuWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
35
35
  return props.offsetRight && hasWindow() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
36
36
  });
package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","MobileWrapper","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\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\n ${BREAKPOINTS.LARGE} {\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 align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.XSMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst MobileWrapper = styled.div`\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n\n profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n profileComponent\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <MobileWrapper>\n {!!profileComponent && profileComponent }\n </MobileWrapper>\n\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}\n profileComponent= {profileComponent}\n />\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={!profileComponent ? profile : undefined}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
1
+ {"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","MobileWrapper","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\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\n ${BREAKPOINTS.LARGE} {\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 align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.XSMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst MobileWrapper = styled.div`\n ${BREAKPOINTS.LARGE} {\n display: none !important;\n }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n\n profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n profileComponent\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <MobileWrapper>\n {!!profileComponent && profileComponent }\n </MobileWrapper>\n\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}\n profileComponent= {profileComponent}\n />\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={!profileComponent ? profile : undefined}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "2.1.1-dev.3",
3
+ "version": "2.1.1-dev.4",
4
4
  "private": false,
5
5
  "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
6
  "contributors": [],