@laerdal/life-react-components 1.8.0-dev.16 → 1.8.0-dev.18

package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,164 +21,269 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styles = require("../../styles");
 
+var _Actions = _interopRequireDefault(require("../Actions"));
+
 var _SystemIcons = require("../../icons/systemicons/SystemIcons");
 
+var _MobileActionMenu = _interopRequireDefault(require("./MobileActionMenu"));
+
+var _CommonStyles = require("./CommonStyles");
+
 var _reactRouterDom = require("react-router-dom");
 
-var _Button = require("../../Button");
+var _Switcher = require("../../Switcher");
 
-var _assets = require("../../assets");
+var _Avatar = _interopRequireWildcard(require("../Avatar"));
 
-var _MobileMenuHeader = _interopRequireDefault(require("./MobileMenuHeader"));
+var _MobileUserMenu = _interopRequireDefault(require("../UserMenu/MobileUserMenu"));
 
-var _MobileMenuContent = _interopRequireDefault(require("./MobileMenuContent"));
+var _Button = require("../../Button");
 
-var _reactResponsive = require("react-responsive");
+var _assets = require("../../assets");
 
-var _StackState = require("../../common/StackState");
+var _typography = require("../../styles/typography");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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; }
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL);
+var SwitchButton = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  \n  padding: 0;\n  border: 0;\n  margin: 0 auto 0 12px;\n  line-height: 48px;\n"])), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
 
-var SwitcherLabel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: auto;\n"])));
+var BottomPinnedSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
 
-var MobileFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.neutral_200, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+var FirstRowLayout = (0, _styledComponents.default)(_CommonStyles.RowLayout)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  padding: 12px;\n"])));
+var BottomRowLayout = (0, _styledComponents.default)(_CommonStyles.RowLayout)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 8px auto 0 0;\n  width: 95%;\n  height: 48px;\n  ", " {\n    height: 56px;\n  }\n"])), _styles.BREAKPOINTS.SMALL);
+var StyledNavItem = (0, _styledComponents.default)(_Switcher.SwitcherMenuItem)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.primary_500, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.primary_600, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.primary_500, _styles.COLORS.primary_800, _styles.focusStyles);
 
-var CustomContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+var SwitcherButton = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n\n  line-height: 48px;\n  button:last-child {\n    margin: 0 !important;\n  }\n"])));
 
 var MobileMenu = function MobileMenu(_ref) {
-  var _current$header, _current$header$butto;
-
-  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 _useStackState = (0, _StackState.useStackState)(),
-      reset = _useStackState.reset,
-      length = _useStackState.length,
-      push = _useStackState.push,
-      pop = _useStackState.pop,
-      peek = _useStackState.peek;
-
-  var isMediumScreen = (0, _reactResponsive.useMediaQuery)({
-    query: _styles.BREAKPOINTS.MEDIUM.replace('@media ', '')
-  });
+  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 _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      showNotificationMenu = _React$useState2[0],
+      setShowNotificationMenu = _React$useState2[1];
+
+  var notificationMenuRef = React.useRef(null);
+  var userMenuRef = React.useRef(null);
+  var userRef = React.useRef(null);
   var location = (0, _reactRouterDom.useLocation)();
 
-  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;
-
-      case 'custom':
-        push({
-          header: {
-            label: menu.label,
-            buttons: menu.buttons
-          },
-          customContent: menu.custom,
-          footer: false
-        });
-        break;
+  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);
+    };
+  }
 
-      default:
-        break;
+  var fireAction = function fireAction(action) {
+    var _ref$current;
+
+    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();
+  };
+
+  var isPressingEnter = function isPressingEnter(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
     }
+
+    return false;
   };
 
   React.useEffect(function () {
-    onClose();
+    clickMenuAction();
   }, [location]);
-  React.useEffect(function () {
-    isMediumScreen && onClose();
-  }, [isMediumScreen]);
-  React.useEffect(function () {
-    setTimeout(function () {
-      reset({
-        footer: true,
-        header: {
-          label: label,
-          buttons: buttons
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(actions === null || actions === void 0 ? void 0 : actions.notification) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuWrapper, {
+      ref: notificationMenuRef,
+      className: showNotificationMenu ? 'open' : '',
+      isVisible: showNotificationMenu,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionMenu.default, {
+        name: "Notifications",
+        clickMenuAction: function clickMenuAction() {
+          return setShowNotificationMenu(false);
         },
-        content: {
-          header: header,
-          items: items,
-          footer: footer,
-          action: action
+        navigationOptions: notifications,
+        actionList: {
+          notification: function notification() {}
         }
-      });
-    }, 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__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileMenuHeader.default, {
-      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__*/(0, _jsxRuntime.jsx)(CustomContent, {
-      children: current === null || current === void 0 ? void 0 : current.customContent()
-    }), (current === null || current === void 0 ? void 0 : current.content) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileMenuContent.default, {
-      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__*/(0, _jsxRuntime.jsxs)(MobileFooter, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {}), switcher && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitcherLabel, {
-          className: 'globalNav-toggler',
-          children: "Switch site"
+      })
+    }), (actions === null || actions === void 0 ? void 0 : actions.user) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuWrapper, {
+      ref: userMenuRef,
+      className: showUserMenu ? 'open' : '',
+      isVisible: showUserMenu,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileUserMenu.default, {
+        accountMenuHeader: accountMenuHeader,
+        firstName: firstName,
+        lastName: lastName,
+        email: email,
+        organizationName: organizationName,
+        clickMenuAction: clickMenuAction,
+        accountSection: accountSection,
+        organizationSection: organizationSection,
+        supportSection: supportSection,
+        signOut: signout,
+        signOutLabel: signOutLabel
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FirstRowLayout, {
+      children: [firstName && lastName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.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__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          size: 36,
+          firstName: firstName,
+          lastName: lastName,
+          color: _styles.COLORS.primary_500,
+          profileMenuLink: "#TODO"
+        })
+      }), (actions === null || actions === void 0 ? void 0 : actions.notification) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.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__*/(0, _jsxRuntime.jsx)(_SystemIcons.Notification, {
+          size: "24px"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.Right, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.default, {
+          actions: actions,
+          firstName: firstName,
+          lastName: lastName,
+          isInMobileMenu: true,
+          hideOnLowWidth: false,
+          useUserMenu: useUserMenu,
+          setShowUserMenu: setShowUserMenu
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          variant: 'secondary',
-          shape: 'circular',
-          id: "globalNavAppsButton",
+          variant: "secondary",
+          shape: "circular",
           action: function action() {
-            return switcher.action && switcher.action() && onClose();
+            return clickMenuAction();
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.SwitchApp, {
+          isInMobileMenu: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
             size: "24px"
           })
         })]
       })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuSection, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuSectionList, {
+        children: navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledNavItem, {
+              as: _reactRouterDom.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__*/(0, _jsxRuntime.jsx)(BottomPinnedSection, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuSection, {
+        style: {
+          padding: '0 12px 12px 12px',
+          margin: '0'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuSectionList, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BottomRowLayout, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {}), switcherAction && /*#__PURE__*/(0, _jsxRuntime.jsxs)(SwitcherButton, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchButton, {
+                onClick: function onClick() {
+                  return switcherAction();
+                },
+                children: "Switch site"
+              }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.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__*/(0, _jsxRuntime.jsx)(_SystemIcons.SwitchApp, {
+                  size: "24px"
+                })
+              })]
+            })]
+          })
+        })
+      })
     })]
   });
 };
 
 MobileMenu.propTypes = {
-  show: _propTypes.default.bool,
-  onClose: _propTypes.default.func.isRequired
+  name: _propTypes.default.string.isRequired,
+  navigationOptions: _propTypes.default.array,
+  secondaryNavigationOptions: _propTypes.default.array,
+  clickMenuAction: _propTypes.default.func.isRequired,
+  firstName: _propTypes.default.string.isRequired,
+  lastName: _propTypes.default.string.isRequired,
+  email: _propTypes.default.string.isRequired,
+  signout: _propTypes.default.func,
+  isAuthenticated: _propTypes.default.bool,
+  notifications: _propTypes.default.array,
+  switcherAction: _propTypes.default.func,
+  accountSection: _propTypes.default.array,
+  organizationSection: _propTypes.default.array,
+  supportSection: _propTypes.default.array,
+  accountMenuHeader: _propTypes.default.string.isRequired,
+  signOutLabel: _propTypes.default.string.isRequired,
+  organizationName: _propTypes.default.string.isRequired,
+  showUserMenu: _propTypes.default.bool.isRequired,
+  setShowUserMenu: _propTypes.default.func.isRequired
 };
 var _default = MobileMenu;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentTextStyle","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","React","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/>\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.cjs"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["SwitchButton","styled","span","ComponentTextStyle","Bold","COLORS","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","RowLayout","BottomRowLayout","BREAKPOINTS","SMALL","StyledNavItem","SwitcherMenuItem","Regular","black","primary_500","primary_800","neutral_300","neutral_100","primary_600","primary_20","primary_100","focusStyles","SwitcherButton","MobileMenu","clickMenuAction","navigationOptions","actions","firstName","lastName","email","signout","notifications","accountSection","organizationSection","supportSection","switcherAction","accountMenuHeader","signOutLabel","organizationName","useUserMenu","showUserMenu","setShowUserMenu","React","useState","showNotificationMenu","setShowNotificationMenu","notificationMenuRef","useRef","userMenuRef","userRef","location","user","notification","fireAction","action","ref","undefined","current","blur","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","NavLink","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.cjs"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.d.ts

@@ -1,8 +1,27 @@
-import { MobileNavigationMenuProps, ProfileMenu } from '../types';
-declare type Props = MobileNavigationMenuProps & {
-    profile?: ProfileMenu;
-    show?: boolean;
-    onClose: () => void;
+import { ActionOptions, NavButton, NavOption, UserMenuItem } from '../../types';
+declare type Props = {
+    name: string;
+    navigationOptions?: NavOption[];
+    secondaryNavigationOptions?: NavOption[];
+    secondaryButton?: NavButton;
+    actions?: ActionOptions;
+    clickMenuAction: () => void;
+    firstName: string;
+    lastName: string;
+    email: string;
+    signout?: (e: any) => void;
+    isAuthenticated?: boolean;
+    notifications?: NavOption[];
+    switcherAction?: () => void;
+    accountSection?: UserMenuItem[];
+    organizationSection?: UserMenuItem[];
+    supportSection?: UserMenuItem[];
+    accountMenuHeader: string;
+    signOutLabel: string;
+    organizationName: string;
+    useUserMenu: boolean | undefined;
+    showUserMenu: boolean;
+    setShowUserMenu: (show: boolean) => void;
 };
-declare const MobileMenu: ({ show, profile, buttons, label, header, items, footer, action, onClose, }: Props) => JSX.Element;
+declare const MobileMenu: ({ clickMenuAction, navigationOptions, actions, firstName, lastName, email, signout, notifications, accountSection, organizationSection, supportSection, switcherAction, accountMenuHeader, signOutLabel, organizationName, useUserMenu, showUserMenu, setShowUserMenu, }: Props) => JSX.Element;
 export default MobileMenu;