@laerdal/life-react-components 1.10.3-dev.9.full → 1.11.0-dev.10

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","MEDIUM","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","mobileMenuRef","useRef","userMenuRef","actionsRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","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 useClickOutside from '../hooks/useClickOutside';\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';\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\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\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\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  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\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.MEDIUM} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.MEDIUM} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\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\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                             }: 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  const mobileMenuRef = React.useRef(null);\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\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  useClickOutside(userMenuRef, () => setShowUserMenu(false), [profileButtonRef]);\n  useClickOutside(mobileMenuRef, () => 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}>\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              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\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={profile}/>\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"],"file":"GlobalNavigationBar.cjs"}
+{"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","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","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","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';\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  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\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 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 ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\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\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                             }: 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              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\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={profile}/>\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/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts

@@ -3,6 +3,7 @@ import { DesktopNavigationMenuProps, MobileNavigationMenuProps, ProfileMenu } fr
 declare type GlobalNavigationBarProps = {
     isAuthenticated?: boolean;
     useMaxWidth?: boolean;
+    maxWidth?: number;
     name?: string;
     logo?: {
         onClick?: () => void;
@@ -19,5 +20,5 @@ declare type GlobalNavigationBarProps = {
  * @constructor
  * @description This component is a global navigation header bar
  */
-declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
+declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, maxWidth, }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
 export default GlobalNavigationBar;

package/dist/GlobalNavigationBar/GlobalNavigationBar.js

@@ -5,9 +5,9 @@ import _pt from "prop-types";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import * as React from 'react';
 import styled from 'styled-components';
@@ -19,21 +19,21 @@ import RightSideNav from './desktop/RightSideNav';
 import MobileMenu from './mobile/MobileMenu';
 import { Menu } from '../icons/systemicons/SystemIcons';
 import UserMenu from './desktop/UserMenu';
-import useClickOutside from '../hooks/useClickOutside';
 import { fadeIn, fadeOut, Menu as MobileMenuWrapper } from './mobile/CommonStyles';
 import { Z_INDEXES } from '../styles';
 import { IconButton } from '../Button';
 import DesktopActions from './desktop/DesktopActions';
 import { usePreviousImmediate } from 'rooks';
+import { useClickOutsideRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: white;\n  border-bottom: 1px solid ", ";\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n\n  ", " {\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"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM);
-var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " button {\n    height: 56px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM);
-var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), HamburgerButton);
-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  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\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.MEDIUM);
-var UserMenuWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 56px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.MEDIUM, function (props) {
+var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n\n  ", " {\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"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
+var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " button {\n    height: 56px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
+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);
+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  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\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);
+var UserMenuWrapper = styled.div(_templateObject6 || (_templateObject6 = _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) {
   return props.offsetRight ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
 });
 
@@ -53,7 +53,8 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       desktop = _ref.desktop,
       testId = _ref.testId,
       _ref$useMaxWidth = _ref.useMaxWidth,
-      useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth;
+      useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
+      maxWidth = _ref.maxWidth;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -67,8 +68,6 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       showUserMenu = _React$useState4[0],
       setShowUserMenu = _React$useState4[1];
 
-  var mobileMenuRef = React.useRef(null);
-  var userMenuRef = React.useRef(null);
   var actionsRef = React.useRef(null);
   var profileButtonRef = React.useRef();
   profileButtonRef.current = actionsRef === null || actionsRef === void 0 ? void 0 : (_actionsRef$current = actionsRef.current) === null || _actionsRef$current === void 0 ? void 0 : (_actionsRef$current$b = _actionsRef$current.buttons) === null || _actionsRef$current$b === void 0 ? void 0 : (_actionsRef$current$b2 = _actionsRef$current$b.find(function (a) {
@@ -82,10 +81,10 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       avatarRight = _React$useState6[0],
       setAvatarRight = _React$useState6[1];
 
-  useClickOutside(userMenuRef, function () {
+  var userMenuRef = useClickOutsideRef(function () {
     return setShowUserMenu(false);
   }, [profileButtonRef]);
-  useClickOutside(mobileMenuRef, function () {
+  var mobileMenuRef = useClickOutsideRef(function () {
     return setShowMobileMenu(false);
   }, [mobileMenuButtonRef]);
   React.useEffect(function () {
@@ -109,6 +108,7 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       "data-testid": testId,
       children: /*#__PURE__*/_jsx(PageWidth, {
         useMaxWidth: useMaxWidth,
+        maxWidth: maxWidth,
         children: /*#__PURE__*/_jsxs(RowLayout, {
           children: [/*#__PURE__*/_jsx(Logo, {
             name: name || '',
@@ -185,6 +185,7 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
 GlobalNavigationBar.propTypes = {
   isAuthenticated: _pt.bool,
   useMaxWidth: _pt.bool,
+  maxWidth: _pt.number,
   name: _pt.string,
   logo: _pt.shape({
     onClick: _pt.func,

package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","useClickOutside","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","MEDIUM","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","mobileMenuRef","useRef","userMenuRef","actionsRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","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 useClickOutside from '../hooks/useClickOutside';\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';\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\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\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\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  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\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.MEDIUM} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.MEDIUM} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\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\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                             }: 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  const mobileMenuRef = React.useRef(null);\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\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  useClickOutside(userMenuRef, () => setShowUserMenu(false), [profileButtonRef]);\n  useClickOutside(mobileMenuRef, () => 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}>\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              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\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={profile}/>\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"],"file":"GlobalNavigationBar.js"}
+{"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","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","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","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';\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  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\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 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 ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\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\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                             }: 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              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\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={profile}/>\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/dist/GlobalNavigationBar/Logo.cjs

@@ -37,15 +37,15 @@ var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateO
   return props.$color;
 }, _styles.BREAKPOINTS.MEDIUM);
 
-var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), _styles.BREAKPOINTS.MEDIUM, _styles.focusStyles, _styles.invertedFocusStyles);
+var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\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    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), _styles.BREAKPOINTS.LARGE, _styles.focusStyles, _styles.invertedFocusStyles);
 
-var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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) {
+var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 168px;\n  ", " {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) {
   return props.$color || _styles.COLORS.black;
-}, function (props) {
+}, _styles.BREAKPOINTS.SMALL, function (props) {
   return props.noSizeChangeOnMobile ? (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
   return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
-});
+}, _styles.BREAKPOINTS.LARGE);
 
 var BetaTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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 || _styles.COLORS.accent2_500;

package/dist/GlobalNavigationBar/Logo.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","focusStyles","invertedFocusStyles","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,+VAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,4WAQfJ,oBAAYC,MARG,EAcbI,mBAda,EAkBbC,2BAlBa,CAAnB;;AAsBA,IAAMC,IAAI,GAAGJ,0BAAOK,IAAV,wVAGiB,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAAlC;AAAA,CAHjB,EAMN,UAACZ,KAAD;AAAA,SACAA,KAAK,CAACa,oBAAN,GACI,+BAAkBC,2BAAmBC,OAArC,EAA8Cf,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAArE,CADJ,GAEI,gCAAmBE,2BAAmBC,OAAtC,EAA+Cf,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAAtE,CAHJ;AAAA,CANM,EAcNV,oBAAYC,MAdN,EAiBJ,UAACH,KAAD;AAAA,SAAW,+BAAkBc,2BAAmBC,OAArC,EAA8Cf,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAArE,CAAX;AAAA,CAjBI,CAAV;;AAqBA,IAAMI,OAAO,GAAGX,0BAAOK,IAAV,wOACS,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACiB,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAClB,KAAD;AAAA,SAAW,gCAAmBc,2BAAmBK,aAAtC,EAAqDnB,KAAK,CAACC,MAAN,IAAgBU,eAAOS,KAA5E,CAAX;AAAA,CARS,CAAb;;AAuBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAA+J;AAAA,MAA5JC,IAA4J,QAA5JA,IAA4J;AAAA,MAAtJC,WAAsJ,QAAtJA,WAAsJ;AAAA,MAAzIC,QAAyI,QAAzIA,OAAyI;AAAA,MAAhIC,EAAgI,QAAhIA,EAAgI;AAAA,MAA5HC,KAA4H,QAA5HA,KAA4H;AAAA,MAArHb,oBAAqH,QAArHA,oBAAqH;AAAA,MAA/Fc,sBAA+F,QAA/FA,sBAA+F;AAAA,MAAvEC,YAAuE,QAAvEA,YAAuE;AAAA,MAAzDC,QAAyD,QAAzDA,QAAyD;AAC1K,sBACE,qBAAC,aAAD;AAAe,IAAA,SAAS,EAAEA,QAAQ,GAAG,UAAH,GAAgB,EAAlD;AAAA,2BACE,sBAAC,UAAD;AACE,MAAA,EAAE,EAAEJ,EAAE,IAAI,GADZ;AAEE,MAAA,WAAW,EAAEK,iCAFf;AAGE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIN,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAPH;AAQE,MAAA,MAAM,EAAEE,KARV;AAAA,iBASGA,KAAK,KAAKf,eAAOS,KAAjB,gBAAyB,qBAAC,wBAAD,KAAzB,gBAAgD,qBAAC,mBAAD,KATnD,eAUE,qBAAC,IAAD;AAAM,QAAA,MAAM,EAAEM,KAAd;AAAqB,QAAA,oBAAoB,EAAEb,oBAAoB,IAAI,KAAnE;AAAA,kBACGS;AADH,QAVF,EAaGC,WAAW,iBACV,qBAAC,OAAD;AAAS,QAAA,eAAe,EAAEI,sBAA1B;AAAkD,QAAA,MAAM,EAAEC,YAA1D;AAAA;AAAA,QAdJ;AAAA;AADF,IADF;AAuBD,CAxBD;;;AAXEN,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAC,EAAAA,K;AACAb,EAAAA,oB;AACAc,EAAAA,sB;AACAC,EAAAA,Y;AACAC,EAAAA,Q;;eA6BaR,I","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, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\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    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\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  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\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.cjs"}
+{"version":3,"file":"Logo.cjs","names":["StyledLink","styled","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","LARGE","focusStyles","invertedFocusStyles","Name","span","COLORS","black","SMALL","noSizeChangeOnMobile","ComponentMStyling","ComponentTextStyle","Regular","ComponentXSStyling","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"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, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\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  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\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  max-width: 168px;\n  ${BREAKPOINTS.SMALL} {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\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    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\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  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\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"],"mappings":"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"}

package/dist/GlobalNavigationBar/Logo.js

@@ -15,14 +15,14 @@ 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    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), BREAKPOINTS.MEDIUM, focusStyles, invertedFocusStyles);
-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) {
+var LogoContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\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    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), BREAKPOINTS.LARGE, focusStyles, invertedFocusStyles);
+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  max-width: 168px;\n  ", " {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) {
   return props.$color || COLORS.black;
-}, function (props) {
+}, BREAKPOINTS.SMALL, 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);
-});
+}, BREAKPOINTS.LARGE);
 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) {

package/dist/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","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","inverted"],"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, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\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    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\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  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\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,"file":"Logo.js","names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","LARGE","Name","span","black","SMALL","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"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, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\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  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\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  max-width: 168px;\n  ${BREAKPOINTS.SMALL} {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\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    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\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  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\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"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -29,9 +33,17 @@ var _styles = require("../../styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["placement", "type", "action"],
+    _excluded2 = ["placement", "type", "icon", "action"],
+    _excluded3 = ["placement", "type", "action"];
+
 var _templateObject;
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  \n  display: none;\n  ", "{\n    display: flex;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
 
 var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var buttons = _ref.buttons,
@@ -65,47 +77,69 @@ var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, [elRefs, buttons]);
 
   var renderItem = function renderItem(item, index) {
-    var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
-
     switch (item.type) {
       case 'profile':
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, {
-          ref: elRefs[index],
-          hideOnLowWidth: true,
-          onClick: function onClick(e) {
-            item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
-          },
-          icon: !user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
-          initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
-        }, index);
+        {
+          var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
+
+          var placement = item.placement,
+              type = item.type,
+              action = item.action,
+              rest = (0, _objectWithoutProperties2.default)(item, _excluded);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
+            ref: elRefs[index],
+            hideOnLowWidth: true,
+            onClick: function onClick(e) {
+              item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
+            },
+            icon: !user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
+            initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
+          }, rest), index);
+        }
 
       case 'action':
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          ref: elRefs[index],
-          variant: 'secondary',
-          shape: 'circular',
-          disabled: item.disabled,
-          hideOnLowWidth: true,
-          action: function action(e) {
-            item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
-          },
-          children: item.icon
-        }, index);
+        {
+          var _placement = item.placement,
+              _type = item.type,
+              icon = item.icon,
+              _action = item.action,
+              _rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({
+            ref: elRefs[index],
+            variant: 'secondary',
+            shape: 'circular',
+            hideOnLowWidth: true,
+            action: function action(e) {
+              return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
+            }
+          }, _rest), {}, {
+            children: item.icon
+          }), index);
+        }
 
       case 'switcher':
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          ref: elRefs[index],
-          variant: 'secondary',
-          shape: 'circular',
-          hideOnLowWidth: true,
-          id: "globalNavAppsButton",
-          action: function action(e) {
-            return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.SwitchApp, {
-            size: "24px"
-          })
-        }, index);
+        {
+          var _placement2 = item.placement,
+              _type2 = item.type,
+              _action2 = item.action,
+              _rest2 = (0, _objectWithoutProperties2.default)(item, _excluded3);
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({
+            ref: elRefs[index],
+            variant: 'secondary',
+            shape: 'circular',
+            hideOnLowWidth: true,
+            id: "globalNavAppsButton",
+            action: function action(e) {
+              return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
+            }
+          }, _rest2), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.SwitchApp, {
+              size: "24px"
+            })
+          }), index);
+        }
     }
   };
 

package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","DesktopActions","React","forwardRef","ref","buttons","user","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","e","action","target","firstName","charAt","lastName","disabled","icon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n  \n  display: none;\n  ${BREAKPOINTS.MEDIUM}{\n    display: flex;\n  }\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile':\n        return <ProfileButton key={index}\n                              ref={elRefs[index]}\n                              hideOnLowWidth={true}\n                              onClick={e => {\n                                item.action ? item.action(e?.target) : onShowUserMenu()\n                              }}\n                              icon={!user && <SystemIcons.User/>}\n                              initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}/>\n      case 'action':\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           disabled={item.disabled}\n                           hideOnLowWidth={true}\n                           action={e => {\n                             item.action && item.action(e?.target);\n                           }}>\n          {item.icon}\n        </IconButton>\n      case 'switcher':\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}>\n          <SwitchApp size=\"24px\"/>\n        </IconButton>\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"file":"DesktopActions.cjs"}
+{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","LARGE","DesktopActions","React","forwardRef","ref","buttons","user","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        return <ProfileButton key={index}\n                              ref={elRefs[index]}\n                              hideOnLowWidth={true}\n                              onClick={e => {\n                                item.action ? item.action(e?.target) : onShowUserMenu()\n                              }}\n                              icon={!user && <SystemIcons.User/>}\n                              initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                              {...rest}/>\n\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}