@laerdal/life-react-components 1.8.0-dev.9 → 1.9.0

package/dist/GlobalNavigationBar/mobile/MobileMenu.js

@@ -1,256 +1,156 @@
-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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles';
-import Actions from '../Actions';
-import { Close, Notification, SwitchApp } from '../../icons/systemicons/SystemIcons';
-import MobileActionMenu from './MobileActionMenu';
-import { MenuSection, MenuSectionList, MenuWrapper, Right, RowLayout } from './CommonStyles';
-import { NavLink, useLocation } from 'react-router-dom';
-import { SwitcherMenuItem } from '../../Switcher';
-import Avatar, { AvatarContainer } from '../Avatar';
-import MobileUserMenu from '../UserMenu/MobileUserMenu';
+import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES } from '../../styles';
+import { SwitchApp } from '../../icons/systemicons/SystemIcons';
+import { useLocation } from 'react-router-dom';
 import { IconButton } from '../../Button';
 import { LaerdalLogo } from '../../assets';
-import { ComponentMStyling, ComponentXSStyling } from '../../styles/typography';
+import MobileMenuHeader from './MobileMenuHeader';
+import MobileMenuContent from './MobileMenuContent';
+import { useMediaQuery } from 'react-responsive';
+import { useStackState } from '../../common/StackState';
 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 SwitchButton = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  \n  padding: 0;\n  border: 0;\n  margin: 0 auto 0 12px;\n  line-height: 48px;\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var BottomPinnedSection = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
-var FirstRowLayout = styled(RowLayout)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  padding: 12px;\n"])));
-var BottomRowLayout = styled(RowLayout)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 8px auto 0 0;\n  width: 95%;\n  height: 48px;\n  ", " {\n    height: 56px;\n  }\n"])), BREAKPOINTS.SMALL);
-var StyledNavItem = styled(SwitcherMenuItem)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 0 0 0 20px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ", "\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    &:after {\n      background-color: ", ";\n    }\n\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:hover:not(.disabled) {\n    color: ", ";\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.primary_500, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, COLORS.neutral_100, COLORS.primary_600, COLORS.primary_20, COLORS.primary_600, COLORS.primary_800, COLORS.primary_100, COLORS.primary_500, COLORS.primary_800, focusStyles);
-var SwitcherButton = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n\n  line-height: 48px;\n  button:last-child {\n    margin: 0 !important;\n  }\n"])));
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"])), Z_INDEXES.off_canvas, BREAKPOINTS.SMALL);
+var SwitcherLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
+var MobileFooter = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ", ";\n\n  ", "\n  ", " {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ", "\n  }\n"])), COLORS.neutral_200, ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var CustomContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
 
 var MobileMenu = function MobileMenu(_ref) {
-  var clickMenuAction = _ref.clickMenuAction,
-      navigationOptions = _ref.navigationOptions,
-      actions = _ref.actions,
-      firstName = _ref.firstName,
-      lastName = _ref.lastName,
-      email = _ref.email,
-      signout = _ref.signout,
-      notifications = _ref.notifications,
-      accountSection = _ref.accountSection,
-      organizationSection = _ref.organizationSection,
-      supportSection = _ref.supportSection,
-      switcherAction = _ref.switcherAction,
-      accountMenuHeader = _ref.accountMenuHeader,
-      signOutLabel = _ref.signOutLabel,
-      organizationName = _ref.organizationName,
-      useUserMenu = _ref.useUserMenu,
-      showUserMenu = _ref.showUserMenu,
-      setShowUserMenu = _ref.setShowUserMenu;
+  var _current$header, _current$header$butto;
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      showNotificationMenu = _React$useState2[0],
-      setShowNotificationMenu = _React$useState2[1];
+  var show = _ref.show,
+      profile = _ref.profile,
+      buttons = _ref.buttons,
+      label = _ref.label,
+      header = _ref.header,
+      items = _ref.items,
+      footer = _ref.footer,
+      action = _ref.action,
+      onClose = _ref.onClose;
 
-  var notificationMenuRef = React.useRef(null);
-  var userMenuRef = React.useRef(null);
-  var userRef = React.useRef(null);
-  var location = useLocation();
+  var _useStackState = useStackState(),
+      reset = _useStackState.reset,
+      length = _useStackState.length,
+      push = _useStackState.push,
+      pop = _useStackState.pop,
+      peek = _useStackState.peek;
 
-  if (actions !== null && actions !== void 0 && actions.user) {
-    actions.user = function () {
-      return setShowUserMenu(true);
-    };
-  }
-
-  if (actions !== null && actions !== void 0 && actions.notification) {
-    actions.notification = function () {
-      return setShowNotificationMenu(true);
-    };
-  }
+  var isMediumScreen = useMediaQuery({
+    query: BREAKPOINTS.MEDIUM.replace('@media ', '')
+  });
+  var location = useLocation();
 
-  var fireAction = function fireAction(action) {
-    var _ref$current;
+  var onSubMenuOpen = function onSubMenuOpen(menu) {
+    switch (menu === null || menu === void 0 ? void 0 : menu.type) {
+      case 'group':
+        push({
+          header: {
+            label: menu.label,
+            buttons: menu.buttons
+          },
+          content: {
+            header: menu.header,
+            items: menu.items,
+            footer: menu.footer,
+            action: menu.action
+          },
+          footer: false
+        });
+        break;
 
-    var ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
-    ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.blur();
-    !!action && action();
-  };
+      case 'custom':
+        push({
+          header: {
+            label: menu.label,
+            buttons: menu.buttons
+          },
+          customContent: menu.custom,
+          footer: false
+        });
+        break;
 
-  var isPressingEnter = function isPressingEnter(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      return true;
+      default:
+        break;
     }
-
-    return false;
   };
 
   React.useEffect(function () {
-    clickMenuAction();
+    onClose();
   }, [location]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [(actions === null || actions === void 0 ? void 0 : actions.notification) && /*#__PURE__*/_jsx(MenuWrapper, {
-      ref: notificationMenuRef,
-      className: showNotificationMenu ? 'open' : '',
-      isVisible: showNotificationMenu,
-      children: /*#__PURE__*/_jsx(MobileActionMenu, {
-        name: "Notifications",
-        clickMenuAction: function clickMenuAction() {
-          return setShowNotificationMenu(false);
+  React.useEffect(function () {
+    isMediumScreen && onClose();
+  }, [isMediumScreen]);
+  React.useEffect(function () {
+    setTimeout(function () {
+      reset({
+        footer: true,
+        header: {
+          label: label,
+          buttons: buttons
         },
-        navigationOptions: notifications,
-        actionList: {
-          notification: function notification() {}
+        content: {
+          header: header,
+          items: items,
+          footer: footer,
+          action: action
         }
-      })
-    }), (actions === null || actions === void 0 ? void 0 : actions.user) && /*#__PURE__*/_jsx(MenuWrapper, {
-      ref: userMenuRef,
-      className: showUserMenu ? 'open' : '',
-      isVisible: showUserMenu,
-      children: /*#__PURE__*/_jsx(MobileUserMenu, {
-        accountMenuHeader: accountMenuHeader,
-        firstName: firstName,
-        lastName: lastName,
-        email: email,
-        organizationName: organizationName,
-        clickMenuAction: clickMenuAction,
-        accountSection: accountSection,
-        organizationSection: organizationSection,
-        supportSection: supportSection,
-        signOut: signout,
-        signOutLabel: signOutLabel
-      })
-    }), /*#__PURE__*/_jsxs(FirstRowLayout, {
-      children: [firstName && lastName && /*#__PURE__*/_jsx(AvatarContainer, {
-        id: "avatarContainer",
-        ref: userRef,
-        onClick: actions === null || actions === void 0 ? void 0 : actions.user,
-        onKeyDown: function onKeyDown(e) {
-          return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.user, userRef) : null;
-        },
-        inMobileMenu: true,
-        hideOnLowWidth: false,
-        children: /*#__PURE__*/_jsx(Avatar, {
-          size: 36,
-          firstName: firstName,
-          lastName: lastName,
-          color: COLORS.primary_500,
-          profileMenuLink: "#TODO"
-        })
-      }), (actions === null || actions === void 0 ? void 0 : actions.notification) && /*#__PURE__*/_jsx(IconButton, {
-        variant: 'secondary',
-        shape: 'circular',
-        hideOnLowWidth: false,
-        isInMobileMenu: true,
-        action: function action() {
-          return fireAction(actions === null || actions === void 0 ? void 0 : actions.notification);
-        },
-        onKeyPress: function onKeyPress(e) {
-          return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.notification) : null;
-        },
-        children: /*#__PURE__*/_jsx(Notification, {
-          size: "24px"
-        })
-      }), /*#__PURE__*/_jsxs(Right, {
-        children: [/*#__PURE__*/_jsx(Actions, {
-          actions: actions,
-          firstName: firstName,
-          lastName: lastName,
-          isInMobileMenu: true,
-          hideOnLowWidth: false,
-          useUserMenu: useUserMenu,
-          setShowUserMenu: setShowUserMenu
+      });
+    }, 300);
+  }, [show]);
+  var current = peek();
+  var switcher = current === null || current === void 0 ? void 0 : (_current$header = current.header) === null || _current$header === void 0 ? void 0 : (_current$header$butto = _current$header.buttons) === null || _current$header$butto === void 0 ? void 0 : _current$header$butto.find(function (a) {
+    return a.type === 'switcher';
+  });
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [/*#__PURE__*/_jsx(MobileMenuHeader, {
+      buttons: current === null || current === void 0 ? void 0 : current.header.buttons,
+      onGoBack: length > 1 ? pop : undefined,
+      onSubMenuOpen: onSubMenuOpen,
+      profile: profile,
+      label: current === null || current === void 0 ? void 0 : current.header.label,
+      onClose: onClose
+    }), (current === null || current === void 0 ? void 0 : current.customContent) && /*#__PURE__*/_jsx(CustomContent, {
+      children: current === null || current === void 0 ? void 0 : current.customContent()
+    }), (current === null || current === void 0 ? void 0 : current.content) && /*#__PURE__*/_jsx(MobileMenuContent, {
+      header: current === null || current === void 0 ? void 0 : current.content.header,
+      items: current === null || current === void 0 ? void 0 : current.content.items,
+      footer: current === null || current === void 0 ? void 0 : current.content.footer,
+      action: current === null || current === void 0 ? void 0 : current.content.action,
+      onSubMenuOpen: onSubMenuOpen
+    }), (current === null || current === void 0 ? void 0 : current.footer) && /*#__PURE__*/_jsxs(MobileFooter, {
+      children: [/*#__PURE__*/_jsx(LaerdalLogo, {
+        height: '36px',
+        width: '66px'
+      }), switcher && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(SwitcherLabel, {
+          className: 'globalNav-toggler',
+          children: "Switch site"
         }), /*#__PURE__*/_jsx(IconButton, {
-          variant: "secondary",
-          shape: "circular",
+          variant: 'secondary',
+          shape: 'circular',
+          id: "globalNavAppsButton",
           action: function action() {
-            return clickMenuAction();
+            return switcher.action && switcher.action() && onClose();
           },
-          isInMobileMenu: true,
-          children: /*#__PURE__*/_jsx(Close, {
+          children: /*#__PURE__*/_jsx(SwitchApp, {
             size: "24px"
           })
         })]
       })]
-    }), /*#__PURE__*/_jsx(MenuSection, {
-      children: /*#__PURE__*/_jsx(MenuSectionList, {
-        children: navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no) {
-          return /*#__PURE__*/_jsx("li", {
-            children: /*#__PURE__*/_jsx(StyledNavItem, {
-              as: NavLink,
-              exact: no === null || no === void 0 ? void 0 : no.exact,
-              to: no.to,
-              onClick: function onClick() {
-                if (no !== null && no !== void 0 && no.onClick) {
-                  no === null || no === void 0 ? void 0 : no.onClick();
-                }
-              },
-              children: no.label
-            })
-          }, no.label);
-        })
-      })
-    }), /*#__PURE__*/_jsx(BottomPinnedSection, {
-      children: /*#__PURE__*/_jsx(MenuSection, {
-        style: {
-          padding: '0 12px 12px 12px',
-          margin: '0'
-        },
-        children: /*#__PURE__*/_jsx(MenuSectionList, {
-          children: /*#__PURE__*/_jsxs(BottomRowLayout, {
-            children: [/*#__PURE__*/_jsx(LaerdalLogo, {}), switcherAction && /*#__PURE__*/_jsxs(SwitcherButton, {
-              children: [/*#__PURE__*/_jsx(SwitchButton, {
-                onClick: function onClick() {
-                  return switcherAction();
-                },
-                children: "Switch site"
-              }), ' ', /*#__PURE__*/_jsx(IconButton, {
-                variant: 'secondary',
-                shape: 'circular',
-                hideOnLowWidth: false,
-                isInMobileMenu: true,
-                id: "globalNavAppsButton",
-                action: function action() {
-                  return switcherAction();
-                },
-                onKeyPress: function onKeyPress(e) {
-                  return isPressingEnter(e) ? switcherAction() : null;
-                },
-                children: /*#__PURE__*/_jsx(SwitchApp, {
-                  size: "24px"
-                })
-              })]
-            })]
-          })
-        })
-      })
     })]
   });
 };
 
 MobileMenu.propTypes = {
-  name: _pt.string.isRequired,
-  navigationOptions: _pt.array,
-  secondaryNavigationOptions: _pt.array,
-  clickMenuAction: _pt.func.isRequired,
-  firstName: _pt.string.isRequired,
-  lastName: _pt.string.isRequired,
-  email: _pt.string.isRequired,
-  signout: _pt.func,
-  isAuthenticated: _pt.bool,
-  notifications: _pt.array,
-  switcherAction: _pt.func,
-  accountSection: _pt.array,
-  organizationSection: _pt.array,
-  supportSection: _pt.array,
-  accountMenuHeader: _pt.string.isRequired,
-  signOutLabel: _pt.string.isRequired,
-  organizationName: _pt.string.isRequired,
-  showUserMenu: _pt.bool.isRequired,
-  setShowUserMenu: _pt.func.isRequired
+  show: _pt.bool,
+  onClose: _pt.func.isRequired
 };
 export default MobileMenu;
 //# sourceMappingURL=MobileMenu.js.map

package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","Actions","Close","Notification","SwitchApp","MobileActionMenu","MenuSection","MenuSectionList","MenuWrapper","Right","RowLayout","NavLink","useLocation","SwitcherMenuItem","Avatar","AvatarContainer","MobileUserMenu","IconButton","LaerdalLogo","ComponentMStyling","ComponentXSStyling","SwitchButton","span","Bold","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","BottomRowLayout","SMALL","StyledNavItem","Regular","black","primary_500","primary_800","neutral_300","neutral_100","primary_600","primary_20","primary_100","SwitcherButton","MobileMenu","clickMenuAction","navigationOptions","actions","firstName","lastName","email","signout","notifications","accountSection","organizationSection","supportSection","switcherAction","accountMenuHeader","signOutLabel","organizationName","useUserMenu","showUserMenu","setShowUserMenu","useState","showNotificationMenu","setShowNotificationMenu","notificationMenuRef","useRef","userMenuRef","userRef","location","user","notification","fireAction","action","ref","undefined","current","blur","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","exact","to","onClick","label","padding","margin","name","secondaryNavigationOptions","isAuthenticated"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../../styles';\nimport {ActionOptions, NavButton, NavOption, UserMenuItem} from '../../types';\nimport Actions from '../Actions';\nimport {Close, Notification, SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport MobileActionMenu from './MobileActionMenu';\nimport {MenuSection, MenuSectionList, MenuWrapper, Right, RowLayout} from './CommonStyles';\nimport {NavLink, useLocation} from 'react-router-dom';\nimport {SwitcherMenuItem} from '../../Switcher';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MobileUserMenu from '../UserMenu/MobileUserMenu';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {ComponentMStyling, ComponentXSStyling} from '../../styles/typography';\n\nconst SwitchButton = styled.span`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  padding: 0;\n  border: 0;\n  margin: 0 auto 0 12px;\n  line-height: 48px;\n`;\n\nconst BottomPinnedSection = styled.div`\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FirstRowLayout = styled(RowLayout)`\n  margin-top: 10px;\n  padding: 12px;\n`;\n\nconst BottomRowLayout = styled(RowLayout)`\n  margin: 8px auto 0 0;\n  width: 95%;\n  height: 48px;\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n`;\n\nconst StyledNavItem = styled(SwitcherMenuItem)`\n  padding: 0 0 0 20px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    color: ${COLORS.primary_800};\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n  }\n`;\nconst SwitcherButton = styled.div`\n  display: flex;\n  margin-left: auto;\n\n  line-height: 48px;\n  button:last-child {\n    margin: 0 !important;\n  }\n`;\n\ntype Props = {\n  name: string;\n  navigationOptions?: NavOption[];\n  secondaryNavigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n  actions?: ActionOptions;\n  clickMenuAction: () => void;\n  firstName: string;\n  lastName: string;\n  email: string;\n  signout?: (e: any) => void;\n  isAuthenticated?: boolean;\n  notifications?: NavOption[];\n  switcherAction?: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  accountMenuHeader: string;\n  signOutLabel: string;\n  organizationName: string;\n  useUserMenu: boolean | undefined;\n  showUserMenu: boolean;\n  setShowUserMenu: (show: boolean) => void;\n};\n\nconst MobileMenu = ({\n  clickMenuAction,\n  navigationOptions,\n  actions,\n  firstName,\n  lastName,\n  email,\n  signout,\n  notifications,\n  accountSection,\n  organizationSection,\n  supportSection,\n  switcherAction,\n  accountMenuHeader,\n  signOutLabel,\n  organizationName,\n  useUserMenu,\n  showUserMenu,\n  setShowUserMenu,\n}: Props) => {\n  const [showNotificationMenu, setShowNotificationMenu] = React.useState<boolean>(false);\n  const notificationMenuRef = React.useRef(null);\n  const userMenuRef = React.useRef(null);\n  const userRef = React.useRef(null);\n\n  const location = useLocation();\n\n  if (actions?.user) {\n    actions.user = () => setShowUserMenu(true);\n  }\n  if (actions?.notification) {\n    actions.notification = () => setShowNotificationMenu(true);\n  }\n\n  const fireAction = (action: (() => void) | undefined, ref: React.MutableRefObject<HTMLButtonElement | null> | undefined = undefined) => {\n    ref?.current?.blur();\n    !!action && action();\n  };\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  React.useEffect(() => {\n    clickMenuAction();\n  }, [location]);\n\n  return (\n    <>\n      {actions?.notification && (\n        <MenuWrapper ref={notificationMenuRef} className={showNotificationMenu ? 'open' : ''} isVisible={showNotificationMenu}>\n          <MobileActionMenu\n            name=\"Notifications\"\n            clickMenuAction={() => setShowNotificationMenu(false)}\n            navigationOptions={notifications}\n            actionList={{\n              notification: () => {},\n            }}\n          />\n        </MenuWrapper>\n      )}\n      {actions?.user && (\n        <MenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : ''} isVisible={showUserMenu}>\n          <MobileUserMenu\n            accountMenuHeader={accountMenuHeader}\n            firstName={firstName}\n            lastName={lastName}\n            email={email}\n            organizationName={organizationName}\n            clickMenuAction={clickMenuAction}\n            accountSection={accountSection}\n            organizationSection={organizationSection}\n            supportSection={supportSection}\n            signOut={signout}\n            signOutLabel={signOutLabel}\n          />\n        </MenuWrapper>\n      )}\n      <FirstRowLayout>\n        {firstName && lastName && (\n          <AvatarContainer\n            id=\"avatarContainer\"\n            ref={userRef}\n            onClick={actions?.user}\n            onKeyDown={(e: any) => (isPressingEnter(e) ? fireAction(actions?.user, userRef) : null)}\n            inMobileMenu={true}\n            hideOnLowWidth={false}>\n            <Avatar size={36} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n          </AvatarContainer>\n        )}\n        {actions?.notification && (\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            hideOnLowWidth={false}\n            isInMobileMenu={true}\n            action={() => fireAction(actions?.notification)}\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification) : null)}>\n              <Notification size=\"24px\" />\n          </IconButton>\n        )}\n        <Right>\n          <Actions\n            actions={actions}\n            firstName={firstName}\n            lastName={lastName}\n            isInMobileMenu={true}\n            hideOnLowWidth={false}\n            useUserMenu={useUserMenu}\n            setShowUserMenu={setShowUserMenu}\n          />\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => clickMenuAction()} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </FirstRowLayout>\n      <MenuSection>\n        <MenuSectionList>\n          {navigationOptions?.map((no) => (\n            <li key={no.label}>\n              <StyledNavItem\n                as={NavLink}\n                exact={no?.exact}\n                to={no.to}\n                onClick={() => {\n                  if (no?.onClick) {\n                    no?.onClick();\n                  }\n                }}>\n                {no.label}\n              </StyledNavItem>\n            </li>\n          ))}\n        </MenuSectionList>\n      </MenuSection>\n\n      <BottomPinnedSection>\n        <MenuSection style={{ padding: '0 12px 12px 12px', margin: '0' }}>\n          <MenuSectionList>\n            <BottomRowLayout>\n              <LaerdalLogo />\n              {switcherAction && (\n                <SwitcherButton>\n                  <SwitchButton onClick={() => switcherAction()}>Switch site</SwitchButton>{' '}\n                  <IconButton\n                    variant={'secondary'}\n                    shape={'circular'}\n                    hideOnLowWidth={false}\n                    isInMobileMenu={true}\n                    id=\"globalNavAppsButton\"\n                    action={() => switcherAction()}\n                    onKeyPress={(e: any) => (isPressingEnter(e) ? switcherAction() : null)}>\n                      <SwitchApp size=\"24px\" />\n                  </IconButton>\n                </SwitcherButton>\n              )}\n            </BottomRowLayout>\n          </MenuSectionList>\n        </MenuSection>\n      </BottomPinnedSection>\n    </>\n  );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useMediaQuery","useStackState","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","query","MEDIUM","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MenuIconSubMenuButton,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useMediaQuery} from 'react-responsive';\nimport {useStackState} from '../../common/StackState';\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaQuery({query: BREAKPOINTS.MEDIUM.replace('@media ', '')});\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}