@laerdal/life-react-components 2.0.1-dev.9 → 2.1.0

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs

@@ -1,80 +1,45 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _Logo = _interopRequireDefault(require("./Logo"));
-
 var _MainMenu = _interopRequireDefault(require("./desktop/MainMenu"));
-
 var _Layouts = require("../Layouts");
-
 var _styles = require("../styles");
-
 var _RightSideNav = _interopRequireDefault(require("./desktop/RightSideNav"));
-
 var _MobileMenu = _interopRequireDefault(require("./mobile/MobileMenu"));
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
 var _UserMenu = _interopRequireDefault(require("./desktop/UserMenu"));
-
 var _CommonStyles = require("./mobile/CommonStyles");
-
 var _Button = require("../Button");
-
 var _DesktopActions = _interopRequireDefault(require("./desktop/DesktopActions"));
-
 var _rooks = require("rooks");
-
 var _common = require("../common");
-
 var _utils = require("../utils/utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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 HeaderWrapper = _styledComponents.default.header(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.neutral_200, _styles.Z_INDEXES.sticky_menu, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
-
 var RowLayout = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
-
 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);
-
 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);
-
 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  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"])), _styles.Z_INDEXES.backdrop, _CommonStyles.fadeIn, _CommonStyles.fadeOut, _styles.BREAKPOINTS.LARGE);
-
 var UserMenuWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (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) {
   return props.offsetRight && (0, _utils.hasWindow)() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
 });
-
 /**
  * @param props
  * @constructor
@@ -82,30 +47,25 @@ var UserMenuWrapper = _styledComponents.default.div(_templateObject6 || (_templa
  */
 var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
   var _actionsRef$current, _actionsRef$current$b, _actionsRef$current$b2, _actionsRef$current$b3, _desktop$items, _desktop$buttons;
-
   var name = _ref.name,
-      isAuthenticated = _ref.isAuthenticated,
-      logo = _ref.logo,
-      profile = _ref.profile,
-      mobile = _ref.mobile,
-      desktop = _ref.desktop,
-      testId = _ref.testId,
-      _ref$useMaxWidth = _ref.useMaxWidth,
-      useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
-      maxWidth = _ref.maxWidth;
-
+    isAuthenticated = _ref.isAuthenticated,
+    logo = _ref.logo,
+    profile = _ref.profile,
+    mobile = _ref.mobile,
+    desktop = _ref.desktop,
+    testId = _ref.testId,
+    _ref$useMaxWidth = _ref.useMaxWidth,
+    useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
+    maxWidth = _ref.maxWidth;
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      showMobileMenu = _React$useState2[0],
-      setShowMobileMenu = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    showMobileMenu = _React$useState2[0],
+    setShowMobileMenu = _React$useState2[1];
   var wasMobileMenuOpen = (0, _rooks.usePreviousImmediate)(showMobileMenu);
-
   var _React$useState3 = React.useState(false),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      showUserMenu = _React$useState4[0],
-      setShowUserMenu = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    showUserMenu = _React$useState4[0],
+    setShowUserMenu = _React$useState4[1];
   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) {
@@ -113,12 +73,10 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
   })) === null || _actionsRef$current$b2 === void 0 ? void 0 : (_actionsRef$current$b3 = _actionsRef$current$b2.ref) === null || _actionsRef$current$b3 === void 0 ? void 0 : _actionsRef$current$b3.current;
   var mobileMenuButtonRef = React.useRef(null);
   var rightSideRef = React.useRef(null);
-
   var _React$useState5 = React.useState(0),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      avatarRight = _React$useState6[0],
-      setAvatarRight = _React$useState6[1];
-
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    avatarRight = _React$useState6[0],
+    setAvatarRight = _React$useState6[1];
   var userMenuRef = (0, _common.useClickOutsideRef)(function () {
     return setShowUserMenu(false);
   }, [profileButtonRef]);
@@ -127,14 +85,11 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
   }, [mobileMenuButtonRef]);
   React.useEffect(function () {
     if (!profileButtonRef.current) return;
-
     var handleResize = function handleResize() {
       var _profileButtonRef$cur, _profileButtonRef$cur2;
-
       var profileRightOffset = (_profileButtonRef$cur = profileButtonRef.current) === null || _profileButtonRef$cur === void 0 ? void 0 : (_profileButtonRef$cur2 = _profileButtonRef$cur.getBoundingClientRect()) === null || _profileButtonRef$cur2 === void 0 ? void 0 : _profileButtonRef$cur2.right;
       setAvatarRight(profileRightOffset || 0);
     };
-
     handleResize();
     window.addEventListener('resize', handleResize);
     return function () {
@@ -219,7 +174,6 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
     })]
   });
 };
-
 GlobalNavigationBar.propTypes = {
   isAuthenticated: _propTypes.default.bool,
   useMaxWidth: _propTypes.default.bool,

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map

@@ -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","UserMenuWrapper","white","props","offsetRight","hasWindow","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';\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  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 && hasWindow() ? `${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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"}
+{"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","hasWindow","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';\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  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 && hasWindow() ? `${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.js

@@ -2,13 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 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) { _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';
 import Logo from './Logo';
@@ -37,7 +33,6 @@ var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _tag
 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 && hasWindow() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
 });
-
 /**
  * @param props
  * @constructor
@@ -45,30 +40,25 @@ var UserMenuWrapper = styled.div(_templateObject6 || (_templateObject6 = _tagged
  */
 var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
   var _actionsRef$current, _actionsRef$current$b, _actionsRef$current$b2, _actionsRef$current$b3, _desktop$items, _desktop$buttons;
-
   var name = _ref.name,
-      isAuthenticated = _ref.isAuthenticated,
-      logo = _ref.logo,
-      profile = _ref.profile,
-      mobile = _ref.mobile,
-      desktop = _ref.desktop,
-      testId = _ref.testId,
-      _ref$useMaxWidth = _ref.useMaxWidth,
-      useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
-      maxWidth = _ref.maxWidth;
-
+    isAuthenticated = _ref.isAuthenticated,
+    logo = _ref.logo,
+    profile = _ref.profile,
+    mobile = _ref.mobile,
+    desktop = _ref.desktop,
+    testId = _ref.testId,
+    _ref$useMaxWidth = _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),
-      showMobileMenu = _React$useState2[0],
-      setShowMobileMenu = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showMobileMenu = _React$useState2[0],
+    setShowMobileMenu = _React$useState2[1];
   var wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);
-
   var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      showUserMenu = _React$useState4[0],
-      setShowUserMenu = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    showUserMenu = _React$useState4[0],
+    setShowUserMenu = _React$useState4[1];
   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) {
@@ -76,12 +66,10 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
   })) === null || _actionsRef$current$b2 === void 0 ? void 0 : (_actionsRef$current$b3 = _actionsRef$current$b2.ref) === null || _actionsRef$current$b3 === void 0 ? void 0 : _actionsRef$current$b3.current;
   var mobileMenuButtonRef = React.useRef(null);
   var rightSideRef = React.useRef(null);
-
   var _React$useState5 = React.useState(0),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      avatarRight = _React$useState6[0],
-      setAvatarRight = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    avatarRight = _React$useState6[0],
+    setAvatarRight = _React$useState6[1];
   var userMenuRef = useClickOutsideRef(function () {
     return setShowUserMenu(false);
   }, [profileButtonRef]);
@@ -90,14 +78,11 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
   }, [mobileMenuButtonRef]);
   React.useEffect(function () {
     if (!profileButtonRef.current) return;
-
     var handleResize = function handleResize() {
       var _profileButtonRef$cur, _profileButtonRef$cur2;
-
       var profileRightOffset = (_profileButtonRef$cur = profileButtonRef.current) === null || _profileButtonRef$cur === void 0 ? void 0 : (_profileButtonRef$cur2 = _profileButtonRef$cur.getBoundingClientRect()) === null || _profileButtonRef$cur2 === void 0 ? void 0 : _profileButtonRef$cur2.right;
       setAvatarRight(profileRightOffset || 0);
     };
-
     handleResize();
     window.addEventListener('resize', handleResize);
     return function () {
@@ -182,7 +167,6 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
     })]
   });
 };
-
 GlobalNavigationBar.propTypes = {
   isAuthenticated: _pt.bool,
   useMaxWidth: _pt.bool,

package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map

@@ -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","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';\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  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 && hasWindow() ? `${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":";;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,SAAQC,SAAR,QAAwB,YAAxB;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,OAAOC,YAAP,MAAyB,wBAAzB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AACA,SAAQC,IAAR,QAAmB,kCAAnB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,SAAQC,MAAR,EAAgBC,OAAhB,EAAyBH,IAAI,IAAII,iBAAjC,QAAyD,uBAAzD;AACA,SAAQC,SAAR,QAAwB,WAAxB;AAMA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,cAAP,MAAgD,0BAAhD;AACA,SAAQC,oBAAR,QAAmC,OAAnC;AACA,SAAQC,kBAAR,QAAiC,WAAjC;AACA,SAASC,SAAT,QAA0B,gBAA1B;;;;AAEA,IAAMC,aAAa,GAAGnB,MAAM,CAACoB,MAAV,4ZAGUhB,MAAM,CAACiB,WAHjB,EAKNR,SAAS,CAACS,WALJ,EAUfjB,WAAW,CAACkB,KAVG,EAcflB,WAAW,CAACmB,KAdG,CAAnB;AA2BA,IAAMC,SAAS,GAAGzB,MAAM,CAAC0B,GAAV,mHAAf;AAMA,IAAMC,eAAe,GAAG3B,MAAM,CAAC0B,GAAV,wJACjBrB,WAAW,CAACkB,KADK,EAKjBlB,WAAW,CAACmB,KALK,CAArB;AAUA,IAAMI,SAAS,GAAG5B,MAAM,CAAC0B,GAAV,6PAIXrB,WAAW,CAACwB,MAJD,EASTF,eATS,CAAf;AAiBA,IAAMG,kBAAkB,GAAG9B,MAAM,CAAC0B,GAAV,sgBAWXb,SAAS,CAACkB,QAXC,EAiBPrB,MAjBO,EAsBPC,OAtBO,EAyBpBN,WAAW,CAACmB,KAzBQ,CAAxB;AA8BA,IAAMQ,eAAe,GAAGhC,MAAM,CAAC0B,GAAV,iMACCtB,MAAM,CAAC6B,KADR,EAKjB5B,WAAW,CAACmB,KALK,EAOR,UAACU,KAAD;EAAA,OAAYA,KAAK,CAACC,WAAN,IAAqBjB,SAAS,EAA9B,aAAsCkB,MAAM,CAACC,UAAP,GAAoBH,KAAK,CAACC,WAA1B,GAAwC,GAA9E,UAAwF,KAApG;AAAA,CAPQ,CAArB;;AA4BA;AACA;AACA;AACA;AACA;AACA,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAsB,OAU+E;EAAA;;EAAA,IAT5EC,IAS4E,QAT5EA,IAS4E;EAAA,IAR5EC,eAQ4E,QAR5EA,eAQ4E;EAAA,IAP5EC,IAO4E,QAP5EA,IAO4E;EAAA,IAN5EC,OAM4E,QAN5EA,OAM4E;EAAA,IAL5EC,MAK4E,QAL5EA,MAK4E;EAAA,IAJ5EC,OAI4E,QAJ5EA,OAI4E;EAAA,IAH5EC,MAG4E,QAH5EA,MAG4E;EAAA,4BAF5EC,WAE4E;EAAA,IAF5EA,WAE4E,iCAF9D,IAE8D;EAAA,IAD5EC,QAC4E,QAD5EA,QAC4E;;EACzG,sBAA4ChD,KAAK,CAACiD,QAAN,CAAe,KAAf,CAA5C;EAAA;EAAA,IAAOC,cAAP;EAAA,IAAuBC,iBAAvB;;EACA,IAAMC,iBAAiB,GAAGnC,oBAAoB,CAACiC,cAAD,CAA9C;;EAEA,uBAAwClD,KAAK,CAACiD,QAAN,CAAe,KAAf,CAAxC;EAAA;EAAA,IAAOI,YAAP;EAAA,IAAqBC,eAArB;;EAEA,IAAMC,UAAU,GAAGvD,KAAK,CAACwD,MAAN,CAAgC,IAAhC,CAAnB;EACA,IAAMC,gBAAgB,GAAGzD,KAAK,CAACwD,MAAN,EAAzB;EACAC,gBAAgB,CAACC,OAAjB,GAA2BH,UAA3B,aAA2BA,UAA3B,8CAA2BA,UAAU,CAAEG,OAAvC,iFAA2B,oBAAqBC,OAAhD,oFAA2B,sBAA8BC,IAA9B,CAAmC,UAAAC,CAAC;IAAA,OAAIA,CAAC,CAACC,IAAF,KAAW,SAAf;EAAA,CAApC,CAA3B,qFAA2B,uBAA+DC,GAA1F,2DAA2B,uBAAoEL,OAA/F;EAEA,IAAMM,mBAAmB,GAAGhE,KAAK,CAACwD,MAAN,CAAgC,IAAhC,CAA5B;EAEA,IAAMS,YAAY,GAAGjE,KAAK,CAACwD,MAAN,CAAa,IAAb,CAArB;;EACA,uBAAsCxD,KAAK,CAACiD,QAAN,CAAuB,CAAvB,CAAtC;EAAA;EAAA,IAAOiB,WAAP;EAAA,IAAoBC,cAApB;;EAGA,IAAMC,WAAW,GAAGlD,kBAAkB,CAAC;IAAA,OAAMoC,eAAe,CAAC,KAAD,CAArB;EAAA,CAAD,EAA+B,CAACG,gBAAD,CAA/B,CAAtC;EACA,IAAMY,aAAa,GAAGnD,kBAAkB,CAAC;IAAA,OAAMiC,iBAAiB,CAAC,KAAD,CAAvB;EAAA,CAAD,EAAiC,CAACa,mBAAD,CAAjC,CAAxC;EAEAhE,KAAK,CAACsE,SAAN,CAAgB,YAAM;IACpB,IAAI,CAACb,gBAAgB,CAACC,OAAtB,EAA+B;;IAE/B,IAAMa,YAAY,GAAG,SAAfA,YAAe,GAAM;MAAA;;MACzB,IAAMC,kBAAkB,4BAAGf,gBAAgB,CAACC,OAApB,oFAAG,sBAA0Be,qBAA1B,EAAH,2DAAG,uBAAmDC,KAA9E;MACAP,cAAc,CAACK,kBAAkB,IAAI,CAAvB,CAAd;IACD,CAHD;;IAKAD,YAAY;IACZlC,MAAM,CAACsC,gBAAP,CAAwB,QAAxB,EAAkCJ,YAAlC;IACA,OAAO;MAAA,OAAMlC,MAAM,CAACuC,mBAAP,CAA2B,QAA3B,EAAqCL,YAArC,CAAN;IAAA,CAAP;EACD,CAXD,EAWG,CAACd,gBAAgB,CAACC,OAAlB,CAXH;EAcA,oBACE;IAAA,wBACE,KAAC,aAAD;MAAe,eAAaZ,MAA5B;MAAA,uBACE,KAAC,SAAD;QAAW,WAAW,EAAEC,WAAxB;QAAqC,QAAQ,EAAEC,QAA/C;QAAA,uBACE,MAAC,SAAD;UAAA,wBACE,KAAC,IAAD;YAAM,IAAI,EAAER,IAAI,IAAI,EAApB;YAAwB,WAAW,EAAEE,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEmC,WAA3C;YAAwD,OAAO,EAAEnC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEoC,OAAvE;YAAgF,EAAE,EAAEpC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEqC;UAA1F,EADF,EAGItC,eAAe,iBACf,KAAC,QAAD;YAAU,KAAK,EAAE,CAAAI,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEmC,KAAT,CAAeC,MAAf,CAAsB,UAAApB,CAAC;cAAA,OAAI,CAACA,CAAC,CAACqB,MAAP;YAAA,CAAvB,MAAyC,EAA1D;YAA8D,YAAY,EAAEjB;UAA5E,EAJJ,eAME,MAAC,SAAD;YAAW,SAAS,YAAKpB,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAEsC,qBAAT,GAAiC,SAAjC,GAA6C,EAAlD,CAApB;YACW,GAAG,EAAElB,YADhB;YAAA,wBAEE,KAAC,YAAD;cAAc,KAAK,EAAEpB,OAAF,aAAEA,OAAF,yCAAEA,OAAO,CAAEmC,KAAX,mDAAE,eAAgBC,MAAhB,CAAuB,UAAApB,CAAC;gBAAA,OAAIA,CAAC,CAACqB,MAAN;cAAA,CAAxB,CAArB;cAA4D,MAAM,EAAErC,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEuC;YAA7E,EAFF,eAGE,KAAC,cAAD;cAAgB,GAAG,EAAE7B,UAArB;cACgB,OAAO,EAAEV,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEc,OADlC;cAEgB,cAAc,EAAE;gBAAA,OAAML,eAAe,CAAC,CAACD,YAAF,CAArB;cAAA,CAFhC;cAGgB,IAAI,EAAEV,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAE0C;YAH/B,EAHF,eAOE,KAAC,eAAD;cAAiB,MAAM,EAAE,CAAC5C,eAA1B;cAAA,uBACE,KAAC,UAAD;gBAAY,MAAM,EAAE;kBAAA,OAAMU,iBAAiB,CAAC,CAACD,cAAF,CAAvB;gBAAA,CAApB;gBACY,GAAG,EAAEc,mBADjB;gBAEY,KAAK,EAAE,UAFnB;gBAGY,OAAO,EAAE,WAHrB;gBAAA,uBAIE,KAAC,IAAD;kBAAM,IAAI,EAAC;gBAAX;cAJF;YADF,EAPF;UAAA,EANF;QAAA;MADF;IADF,EADF,eA4BE,KAAC,kBAAD;MAAoB,SAAS,EAAEd,cAAc,GAAG,MAAH,GAAY,CAACG,YAAD,IAAiBD,iBAAjB,GAAqC,QAArC,GAAgD,EAAzG;MAAA,uBACE,KAAC,iBAAD;QAAmB,GAAG,EAAEiB,aAAxB;QACmB,IAAI,EAAC,MADxB;QAEmB,mBAAgB,gBAFnC;QAAA,uBAGE,KAAC,UAAD,kCAAgBzB,MAAhB;UACY,IAAI,EAAEM,cADlB;UAEY,OAAO,EAAE;YAAA,OAAMC,iBAAiB,CAAC,KAAD,CAAvB;UAAA,CAFrB;UAGY,OAAO,EAAER;QAHrB;MAHF;IADF,EA5BF,EAuCI,CAAAE,OAAO,SAAP,IAAAA,OAAO,WAAP,gCAAAA,OAAO,CAAEc,OAAT,sEAAkB2B,IAAlB,CAAuB,UAAAzB,CAAC;MAAA,OAAIA,CAAC,CAACC,IAAF,KAAW,SAAf;IAAA,CAAxB,MAAqD,CAAC,CAACnB,OAAvD,iBACA,KAAC,eAAD;MAAiB,GAAG,EAAEyB,WAAtB;MACiB,WAAW,EAAEF,WAD9B;MAEiB,eAAY,qBAF7B;MAAA,uBAGE,KAAC,QAAD,kCAAcvB,OAAd;QACU,IAAI,EAAEU,YADhB;QAEU,cAAc,EAAE;UAAA,OAAMC,eAAe,CAAC,KAAD,CAArB;QAAA;MAF1B;IAHF,EAxCJ;EAAA,EADF;AAmDD,CA9FD;;;EApBEb,e;EACAM,W;EACAC,Q;EAEAR,I;EACAE,I;IAASoC,O;IAAsBC,E;IAAaF,W;;EAO5C/B,M;;AAwGF,eAAeP,mBAAf"}
+{"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","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';\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  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 && hasWindow() ? `${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

@@ -1,44 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactRouterDom = require("react-router-dom");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _assets = require("../assets");
-
 var _styles = require("../styles");
-
 var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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;
 }, _styles.BREAKPOINTS.MEDIUM);
-
 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  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;
 }, _styles.BREAKPOINTS.SMALL, function (props) {
@@ -46,23 +29,21 @@ var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3
 }, _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;
 }, function (props) {
   return (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.white);
 });
-
 var Logo = function Logo(_ref) {
   var name = _ref.name,
-      showBetaTag = _ref.showBetaTag,
-      _onClick = _ref.onClick,
-      to = _ref.to,
-      color = _ref.color,
-      noSizeChangeOnMobile = _ref.noSizeChangeOnMobile,
-      betaTagBackgroundColor = _ref.betaTagBackgroundColor,
-      betaTagColor = _ref.betaTagColor,
-      inverted = _ref.inverted;
+    showBetaTag = _ref.showBetaTag,
+    _onClick = _ref.onClick,
+    to = _ref.to,
+    color = _ref.color,
+    noSizeChangeOnMobile = _ref.noSizeChangeOnMobile,
+    betaTagBackgroundColor = _ref.betaTagBackgroundColor,
+    betaTagColor = _ref.betaTagColor,
+    inverted = _ref.inverted;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoContainer, {
     className: inverted ? 'inverted' : '',
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledLink, {
@@ -86,7 +67,6 @@ var Logo = function Logo(_ref) {
     })
   });
 };
-
 Logo.propTypes = {
   name: _propTypes.default.string.isRequired,
   showBetaTag: _propTypes.default.bool,

package/dist/GlobalNavigationBar/Logo.cjs.map

@@ -1 +1 @@
-{"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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"}
+{"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":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,oBAAI,CAAC,+VAWlB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BC,mBAAW,CAACC,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACO,GAAG,kaAU5BH,mBAAW,CAACI,KAAK,EAMfC,mBAAW,EAIXC,2BAAmB,CAExB;AAED,IAAMC,IAAI,GAAGX,yBAAM,CAACY,IAAI,sdAGG,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK;AAAA,GAG9DV,mBAAW,CAACW,KAAK,EAOjB,UAACb,KAAK;EAAA,OACNA,KAAK,CAACc,oBAAoB,GACtB,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC,GAC3E,IAAAM,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAKhFV,mBAAW,CAACC,MAAM,EAChB,UAACH,KAAK;EAAA,OAAK,IAAAe,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAGxFV,mBAAW,CAACI,KAAK,CAIpB;AAED,IAAMa,OAAO,GAAGrB,yBAAM,CAACY,IAAI,wOACL,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACoB,eAAe,IAAIT,cAAM,CAACU,WAAW;AAAA,GAOxE,UAACrB,KAAK;EAAA,OAAK,IAAAkB,0BAAkB,EAACF,0BAAkB,CAACM,aAAa,EAAEtB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACY,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEf,oBAAoB,QAApBA,oBAAoB;IAAEgB,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,qBAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,sBAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEK,iCAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIN,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAKlB,cAAM,CAACY,KAAK,gBAAG,qBAAC,wBAAgB,KAAG,gBAAG,qBAAC,mBAAW,KAAG,eAChE,qBAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEf,oBAAoB,IAAI,KAAM;QAAA,UACtEW;MAAI,EACA,EACNC,WAAW,iBACV,qBAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA;MAAA,EAGxE;IAAA;EACU,EACC;AAEpB,CAAC;AAAC;EAnCAN,IAAI;EACJC,WAAW;EACXC,OAAO;EACPC,EAAE;EACFC,KAAK;EACLf,oBAAoB;EACpBgB,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;AAAA;AAAA,eA6BKR,IAAI;AAAA"}

package/dist/GlobalNavigationBar/Logo.js

@@ -1,8 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
@@ -28,17 +26,16 @@ var BetaTag = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplat
 }, function (props) {
   return ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white);
 });
-
 var Logo = function Logo(_ref) {
   var name = _ref.name,
-      showBetaTag = _ref.showBetaTag,
-      _onClick = _ref.onClick,
-      to = _ref.to,
-      color = _ref.color,
-      noSizeChangeOnMobile = _ref.noSizeChangeOnMobile,
-      betaTagBackgroundColor = _ref.betaTagBackgroundColor,
-      betaTagColor = _ref.betaTagColor,
-      inverted = _ref.inverted;
+    showBetaTag = _ref.showBetaTag,
+    _onClick = _ref.onClick,
+    to = _ref.to,
+    color = _ref.color,
+    noSizeChangeOnMobile = _ref.noSizeChangeOnMobile,
+    betaTagBackgroundColor = _ref.betaTagBackgroundColor,
+    betaTagColor = _ref.betaTagColor,
+    inverted = _ref.inverted;
   return /*#__PURE__*/_jsx(LogoContainer, {
     className: inverted ? 'inverted' : '',
     children: /*#__PURE__*/_jsxs(StyledLink, {
@@ -62,7 +59,6 @@ var Logo = function Logo(_ref) {
     })
   });
 };
-
 Logo.propTypes = {
   name: _pt.string.isRequired,
   showBetaTag: _pt.bool,