@laerdal/life-react-components 2.2.1-dev.23.full → 2.2.1-dev.24

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.cjs","names":["SubMenuWrapper","styled","div","Menu","props","topLevel","visible","SubMenu","React","forwardRef","ref","item","index","dropdownMenusOpenedArray","onSubMenuHidden","onSubMenuOpened","onItemStateChanged","activeItemId","nestPath","useState","forceUpdate","focusedRef","useRef","allRefs","setAllRefs","subMenuRefs","setAllSubMenuRefs","useEffect","items","map","x","type","createRef","undefined","existingRef","current","find","id","onMouseLeave","event","filter","containActiveItem","checkIfContainsItem","onMouseEnter","existingRefForId","onKeyDown","e","stopPropagation","key","preventDefault","setNewFocusedElement","length","code","focusedItem","click","newFocusedElement","oldFocusedElement","classList","remove","add","scrollIntoView","block","inline","onFocus","onBlur","Boolean","Size","Medium","entry","isGroup","to","SubItemOpened","position","value","label","state","disabled"],"sources":["../../../src/GlobalNavigationBar/desktop/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { NavItem } from '../../NavItem';\nimport { MoreHorizontal } from '../../icons/systemicons/SystemIcons';\nimport { COLORS, BREAKPOINTS } from '../../styles';\nimport ExtendedMainMenu, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport { checkIfContainsItem } from '../utils';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\n\nexport type SubMenuProps = {\n  item: MenuNavigationItemTypeDesktopGroup;\n  index: number;\n  topLevel: boolean;\n  dropdownMenusOpenedArray: React.MutableRefObject<string[]>;\n  onSubMenuOpened?: (item: string) => void;\n  onSubMenuHidden?: (item: string) => void;\n  onItemStateChanged?: (item: string, state: boolean) => void;\n  activeItemId?: string;\n  nestPath?: string[];\n};\n\nexport const SubMenuWrapper = styled.div<{ topLevel: boolean; visible: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  ${(props) => (!props.visible ? 'display: none;' : '')}\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nexport const SubMenu = React.forwardRef<HTMLUListElement, SubMenuProps>(({\n  item,\n  index,\n  topLevel,\n  dropdownMenusOpenedArray,\n  onSubMenuHidden,\n  onSubMenuOpened,\n  onItemStateChanged,\n  activeItemId,\n  nestPath,\n}: SubMenuProps, ref): React.ReactElement<SubMenuProps> => {\n  const [, forceUpdate] = React.useState({});\n  const focusedRef = React.useRef<{ index: number }>({ index: -1 });\n  const [allRefs, setAllRefs] = React.useState<React.RefObject<HTMLButtonElement | HTMLAnchorElement>[]>([]);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n\n  React.useEffect(() => {\n    setAllRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLButtonElement>() : React.createRef<HTMLAnchorElement>())));\n    setAllSubMenuRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [item]);\n\n  const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    onSubMenuHidden && onSubMenuHidden(id);\n    forceUpdate({});\n  };\n  let containActiveItem = false;\n  if (item.type == 'desktopgroup' && activeItemId) containActiveItem = checkIfContainsItem(item, activeItemId);\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      onSubMenuOpened && onSubMenuOpened(id);\n      forceUpdate({});\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n    e.stopPropagation();\n    if (e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (focusedRef.current.index > 0) {\n        setNewFocusedElement(focusedRef.current.index - 1);\n      }\n    } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n      e.preventDefault();\n      if(focusedRef.current.index < allRefs.length - 1)\n      setNewFocusedElement(focusedRef.current.index + 1);\n    } else if (e.key === 'Escape' || e.key === 'Esc') {\n      dropdownMenusOpenedArray.current = [];\n      //just trigger rerendering\n      forceUpdate({});\n    } \n     else\n    if (e.key == 'Enter' || e.code == 'Space') {\n      if(focusedRef.current.index < 0)\n        return;\n      \n      const focusedItem = item.items[focusedRef.current.index];\n      if(focusedItem.type == 'desktopgroup')\n      {\n        dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, focusedItem.id];\n        forceUpdate({});\n      }\n      else\n      {\n        allRefs[focusedRef.current.index].current?.click();\n        forceUpdate({});\n      }\n\n      //just trigger rerendering\n      \n    }\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = index >= 0 ? allRefs[index] : null;\n    const oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;\n    focusedRef.current.index = index;\n\n    if(oldFocusedElement)\n      oldFocusedElement?.current?.classList.remove('dropdown-hover');\n\n    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {\n      newFocusedElement.current?.classList.add('dropdown-hover');\n      newFocusedElement.current?.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n    setNewFocusedElement(0);\n    forceUpdate({});\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    setNewFocusedElement(-1);\n  };\n\n  return (\n    <SubMenuWrapper id={item.id}  className={existingRef ? 'open' : '' } topLevel={topLevel} visible={Boolean(existingRef)}>\n      <Menu role=\"menu\" ref={ref} aria-labelledby=\"UserMenuButton\" onBlur={onBlur} onFocus={onFocus} onKeyDown={(event) => onKeyDown(event)} tabIndex={0}>\n        <MenuSection>\n          <MenuSectionList>\n            <Tabs size={Size.Medium}>\n              {item.items.map((entry, index) => {\n                const isGroup = entry.type == 'desktopgroup';\n                const key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';\n                const SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find((x) => x == entry.id));\n                if (isGroup) {\n                  return (\n                    <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, entry.id)} onMouseLeave={(event) => onMouseLeave(event, entry.id)}>\n                      <MenuItem\n                        tabIndex={-1}\n                        ref={allRefs[index] as React.Ref<HTMLButtonElement>}\n                        \n                        id={entry.id}\n                        item={{\n                          value: entry.label ?? '',\n                        }}\n                        iconRight={<SystemIcons.ArrowDropRight size=\"24px\" />}\n                        active={SubItemOpened || (Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId!))}\n                        onClickHandler={() => {}}\n                      />\n                      <SubMenu\n                        ref={subMenuRefs[index]}\n                        nestPath={[...(nestPath ?? []), entry.id]}\n                        onItemStateChanged={onItemStateChanged}\n                        activeItemId={activeItemId}\n                        dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n                        item={entry as MenuNavigationItemTypeDesktopGroup}\n                        index={index + 1}\n                        topLevel={false}\n                      />\n                    </div>\n                  );\n                }\n                return (\n                  <>\n                    <TabLink\n                      tabIndex={-1}\n                      key={key}\n                      to={isGroup ? '' : key}\n                      ref={allRefs[index] as React.Ref<HTMLAnchorElement>}\n                      onActiveStateChanged={(state) => onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state)}\n                      forceDeactivate={isGroup}\n                      requiredLine={entry.label ?? ''}\n                      optionalLine={''}\n                      endLineIcon={isGroup ? <SystemIcons.ArrowDropRight size=\"24px\" /> : null}\n                      OptionalLineIcon={''}\n                      disabled={entry.disabled}\n                      showNotificationDot={false}\n                      size={Size.Medium}\n                      variant=\"positive\"\n                    />\n                  </>\n                );\n              })}\n            </Tabs>\n          </MenuSectionList>\n        </MenuSection>\n      </Menu>\n    </SubMenuWrapper>\n  );\n});\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/SubMenu.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { MenuNavigationItemTypeDesktopGroup } from '../types';
+export type SubMenuProps = {
+    item: MenuNavigationItemTypeDesktopGroup;
+    index: number;
+    topLevel: boolean;
+    dropdownMenusOpenedArray: React.MutableRefObject<string[]>;
+    onSubMenuOpened?: (item: string) => void;
+    onSubMenuHidden?: (item: string) => void;
+    onItemStateChanged?: (item: string, state: boolean) => void;
+    activeItemId?: string;
+    nestPath?: string[];
+};
+export declare const SubMenuWrapper: import("styled-components").StyledComponent<"div", any, {
+    topLevel: boolean;
+    visible: boolean;
+}, never>;
+export declare const SubMenu: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLUListElement>>;

package/dist/GlobalNavigationBar/desktop/SubMenu.js

@@ -0,0 +1,235 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject;
+import * as React from 'react';
+import styled from 'styled-components';
+import { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';
+import { Size } from '../../types';
+import { SystemIcons } from '../../icons';
+import { checkIfContainsItem } from '../utils';
+import Tabs from '../../Tabs/Tabs';
+import TabLink from '../../Tabs/TabLink';
+import { MenuItem } from '../../MenuItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export var SubMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  ", "\n\n  button {\n    padding-left: 0px;\n  }\n"])), Menu, function (props) {
+  return props.topLevel ? '100%' : '0px';
+}, function (props) {
+  return props.topLevel ? '0px' : 'calc(100% - 12px)';
+}, function (props) {
+  return !props.visible ? 'display: none;' : '';
+});
+export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    topLevel = _ref.topLevel,
+    dropdownMenusOpenedArray = _ref.dropdownMenusOpenedArray,
+    onSubMenuHidden = _ref.onSubMenuHidden,
+    onSubMenuOpened = _ref.onSubMenuOpened,
+    onItemStateChanged = _ref.onItemStateChanged,
+    activeItemId = _ref.activeItemId,
+    nestPath = _ref.nestPath;
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    forceUpdate = _React$useState2[1];
+  var focusedRef = React.useRef({
+    index: -1
+  });
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    allRefs = _React$useState4[0],
+    setAllRefs = _React$useState4[1];
+  var _React$useState5 = React.useState([]),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    subMenuRefs = _React$useState6[0],
+    setAllSubMenuRefs = _React$useState6[1];
+  React.useEffect(function () {
+    setAllRefs(item.items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : /*#__PURE__*/React.createRef();
+    }));
+    setAllSubMenuRefs(item.items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : undefined;
+    }));
+  }, [item]);
+  var existingRef = dropdownMenusOpenedArray.current.find(function (x) {
+    return x == item.id;
+  });
+  var _onMouseLeave = function onMouseLeave(event, id) {
+    dropdownMenusOpenedArray.current = _toConsumableArray(dropdownMenusOpenedArray.current.filter(function (x) {
+      return x != id;
+    }));
+    //just trigger rerendering
+    onSubMenuHidden && onSubMenuHidden(id);
+    forceUpdate({});
+  };
+  var containActiveItem = false;
+  if (item.type == 'desktopgroup' && activeItemId) containActiveItem = checkIfContainsItem(item, activeItemId);
+  var _onMouseEnter = function onMouseEnter(event, id) {
+    var existingRefForId = dropdownMenusOpenedArray.current.find(function (x) {
+      return x == id;
+    });
+    if (existingRefForId == null) {
+      dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [id]);
+      //just trigger rerendering
+      onSubMenuOpened && onSubMenuOpened(id);
+      forceUpdate({});
+    }
+  };
+  var _onKeyDown = function onKeyDown(e) {
+    e.stopPropagation();
+    if (e.key === 'ArrowUp' || e.key === 'Up') {
+      e.preventDefault();
+      if (focusedRef.current.index > 0) {
+        setNewFocusedElement(focusedRef.current.index - 1);
+      }
+    } else if (e.key === 'ArrowDown' || e.key === 'Down') {
+      e.preventDefault();
+      if (focusedRef.current.index < allRefs.length - 1) setNewFocusedElement(focusedRef.current.index + 1);
+    } else if (e.key === 'Escape' || e.key === 'Esc') {
+      dropdownMenusOpenedArray.current = [];
+      //just trigger rerendering
+      forceUpdate({});
+    } else if (e.key == 'Enter' || e.code == 'Space') {
+      if (focusedRef.current.index < 0) return;
+      var focusedItem = item.items[focusedRef.current.index];
+      if (focusedItem.type == 'desktopgroup') {
+        dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [focusedItem.id]);
+        forceUpdate({});
+      } else {
+        var _allRefs$focusedRef$c;
+        (_allRefs$focusedRef$c = allRefs[focusedRef.current.index].current) === null || _allRefs$focusedRef$c === void 0 ? void 0 : _allRefs$focusedRef$c.click();
+        forceUpdate({});
+      }
+
+      //just trigger rerendering
+    }
+  };
+
+  var setNewFocusedElement = function setNewFocusedElement(index) {
+    var _oldFocusedElement$cu;
+    var newFocusedElement = index >= 0 ? allRefs[index] : null;
+    var oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;
+    focusedRef.current.index = index;
+    if (oldFocusedElement) oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : (_oldFocusedElement$cu = oldFocusedElement.current) === null || _oldFocusedElement$cu === void 0 ? void 0 : _oldFocusedElement$cu.classList.remove('dropdown-hover');
+    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
+      var _newFocusedElement$cu, _newFocusedElement$cu2;
+      (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.classList.add('dropdown-hover');
+      (_newFocusedElement$cu2 = newFocusedElement.current) === null || _newFocusedElement$cu2 === void 0 ? void 0 : _newFocusedElement$cu2.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  };
+  var onFocus = function onFocus(event) {
+    event.stopPropagation();
+    dropdownMenusOpenedArray.current = _toConsumableArray(nestPath !== null && nestPath !== void 0 ? nestPath : []);
+    setNewFocusedElement(0);
+    forceUpdate({});
+  };
+  var onBlur = function onBlur(event) {
+    event.stopPropagation();
+    setNewFocusedElement(-1);
+  };
+  return /*#__PURE__*/_jsx(SubMenuWrapper, {
+    id: item.id,
+    className: existingRef ? 'open' : '',
+    topLevel: topLevel,
+    visible: Boolean(existingRef),
+    children: /*#__PURE__*/_jsx(Menu, {
+      role: "menu",
+      ref: ref,
+      "aria-labelledby": "UserMenuButton",
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onKeyDown: function onKeyDown(event) {
+        return _onKeyDown(event);
+      },
+      tabIndex: 0,
+      children: /*#__PURE__*/_jsx(MenuSection, {
+        children: /*#__PURE__*/_jsx(MenuSectionList, {
+          children: /*#__PURE__*/_jsx(Tabs, {
+            size: Size.Medium,
+            children: item.items.map(function (entry, index) {
+              var _entry$label2;
+              var isGroup = entry.type == 'desktopgroup';
+              var key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';
+              var SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find(function (x) {
+                return x == entry.id;
+              }));
+              if (isGroup) {
+                var _entry$label;
+                return /*#__PURE__*/_jsxs("div", {
+                  style: {
+                    position: 'relative'
+                  },
+                  onMouseEnter: function onMouseEnter(event) {
+                    return _onMouseEnter(event, entry.id);
+                  },
+                  onMouseLeave: function onMouseLeave(event) {
+                    return _onMouseLeave(event, entry.id);
+                  },
+                  children: [/*#__PURE__*/_jsx(MenuItem, {
+                    tabIndex: -1,
+                    ref: allRefs[index],
+                    id: entry.id,
+                    item: {
+                      value: (_entry$label = entry.label) !== null && _entry$label !== void 0 ? _entry$label : ''
+                    },
+                    iconRight: /*#__PURE__*/_jsx(SystemIcons.ArrowDropRight, {
+                      size: "24px"
+                    }),
+                    active: SubItemOpened || Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId),
+                    onClickHandler: function onClickHandler() {}
+                  }), /*#__PURE__*/_jsx(SubMenu, {
+                    ref: subMenuRefs[index],
+                    nestPath: [].concat(_toConsumableArray(nestPath !== null && nestPath !== void 0 ? nestPath : []), [entry.id]),
+                    onItemStateChanged: onItemStateChanged,
+                    activeItemId: activeItemId,
+                    dropdownMenusOpenedArray: dropdownMenusOpenedArray,
+                    item: entry,
+                    index: index + 1,
+                    topLevel: false
+                  })]
+                });
+              }
+              return /*#__PURE__*/_jsx(_Fragment, {
+                children: /*#__PURE__*/_jsx(TabLink, {
+                  tabIndex: -1,
+                  to: isGroup ? '' : key,
+                  ref: allRefs[index],
+                  onActiveStateChanged: function onActiveStateChanged(state) {
+                    return onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state);
+                  },
+                  forceDeactivate: isGroup,
+                  requiredLine: (_entry$label2 = entry.label) !== null && _entry$label2 !== void 0 ? _entry$label2 : '',
+                  optionalLine: '',
+                  endLineIcon: isGroup ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropRight, {
+                    size: "24px"
+                  }) : null,
+                  OptionalLineIcon: '',
+                  disabled: entry.disabled,
+                  showNotificationDot: false,
+                  size: Size.Medium,
+                  variant: "positive"
+                }, key)
+              });
+            })
+          })
+        })
+      })
+    })
+  });
+});
+SubMenu.propTypes = {
+  index: _pt.number.isRequired,
+  topLevel: _pt.bool.isRequired,
+  onSubMenuOpened: _pt.func,
+  onSubMenuHidden: _pt.func,
+  onItemStateChanged: _pt.func,
+  activeItemId: _pt.string,
+  nestPath: _pt.arrayOf(_pt.string)
+};
+//# sourceMappingURL=SubMenu.js.map

package/dist/GlobalNavigationBar/desktop/SubMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.js","names":["React","styled","Menu","MenuSection","MenuSectionList","Size","SystemIcons","checkIfContainsItem","Tabs","TabLink","MenuItem","SubMenuWrapper","div","props","topLevel","visible","SubMenu","forwardRef","ref","item","index","dropdownMenusOpenedArray","onSubMenuHidden","onSubMenuOpened","onItemStateChanged","activeItemId","nestPath","useState","forceUpdate","focusedRef","useRef","allRefs","setAllRefs","subMenuRefs","setAllSubMenuRefs","useEffect","items","map","x","type","createRef","undefined","existingRef","current","find","id","onMouseLeave","event","filter","containActiveItem","onMouseEnter","existingRefForId","onKeyDown","e","stopPropagation","key","preventDefault","setNewFocusedElement","length","code","focusedItem","click","newFocusedElement","oldFocusedElement","classList","remove","add","scrollIntoView","block","inline","onFocus","onBlur","Boolean","Medium","entry","isGroup","to","SubItemOpened","position","value","label","state","disabled"],"sources":["../../../src/GlobalNavigationBar/desktop/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { NavItem } from '../../NavItem';\nimport { MoreHorizontal } from '../../icons/systemicons/SystemIcons';\nimport { COLORS, BREAKPOINTS } from '../../styles';\nimport ExtendedMainMenu, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport { checkIfContainsItem } from '../utils';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\n\nexport type SubMenuProps = {\n  item: MenuNavigationItemTypeDesktopGroup;\n  index: number;\n  topLevel: boolean;\n  dropdownMenusOpenedArray: React.MutableRefObject<string[]>;\n  onSubMenuOpened?: (item: string) => void;\n  onSubMenuHidden?: (item: string) => void;\n  onItemStateChanged?: (item: string, state: boolean) => void;\n  activeItemId?: string;\n  nestPath?: string[];\n};\n\nexport const SubMenuWrapper = styled.div<{ topLevel: boolean; visible: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  ${(props) => (!props.visible ? 'display: none;' : '')}\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nexport const SubMenu = React.forwardRef<HTMLUListElement, SubMenuProps>(({\n  item,\n  index,\n  topLevel,\n  dropdownMenusOpenedArray,\n  onSubMenuHidden,\n  onSubMenuOpened,\n  onItemStateChanged,\n  activeItemId,\n  nestPath,\n}: SubMenuProps, ref): React.ReactElement<SubMenuProps> => {\n  const [, forceUpdate] = React.useState({});\n  const focusedRef = React.useRef<{ index: number }>({ index: -1 });\n  const [allRefs, setAllRefs] = React.useState<React.RefObject<HTMLButtonElement | HTMLAnchorElement>[]>([]);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n\n  React.useEffect(() => {\n    setAllRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLButtonElement>() : React.createRef<HTMLAnchorElement>())));\n    setAllSubMenuRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [item]);\n\n  const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    onSubMenuHidden && onSubMenuHidden(id);\n    forceUpdate({});\n  };\n  let containActiveItem = false;\n  if (item.type == 'desktopgroup' && activeItemId) containActiveItem = checkIfContainsItem(item, activeItemId);\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      onSubMenuOpened && onSubMenuOpened(id);\n      forceUpdate({});\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n    e.stopPropagation();\n    if (e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (focusedRef.current.index > 0) {\n        setNewFocusedElement(focusedRef.current.index - 1);\n      }\n    } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n      e.preventDefault();\n      if(focusedRef.current.index < allRefs.length - 1)\n      setNewFocusedElement(focusedRef.current.index + 1);\n    } else if (e.key === 'Escape' || e.key === 'Esc') {\n      dropdownMenusOpenedArray.current = [];\n      //just trigger rerendering\n      forceUpdate({});\n    } \n     else\n    if (e.key == 'Enter' || e.code == 'Space') {\n      if(focusedRef.current.index < 0)\n        return;\n      \n      const focusedItem = item.items[focusedRef.current.index];\n      if(focusedItem.type == 'desktopgroup')\n      {\n        dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, focusedItem.id];\n        forceUpdate({});\n      }\n      else\n      {\n        allRefs[focusedRef.current.index].current?.click();\n        forceUpdate({});\n      }\n\n      //just trigger rerendering\n      \n    }\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = index >= 0 ? allRefs[index] : null;\n    const oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;\n    focusedRef.current.index = index;\n\n    if(oldFocusedElement)\n      oldFocusedElement?.current?.classList.remove('dropdown-hover');\n\n    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {\n      newFocusedElement.current?.classList.add('dropdown-hover');\n      newFocusedElement.current?.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n    setNewFocusedElement(0);\n    forceUpdate({});\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    setNewFocusedElement(-1);\n  };\n\n  return (\n    <SubMenuWrapper id={item.id}  className={existingRef ? 'open' : '' } topLevel={topLevel} visible={Boolean(existingRef)}>\n      <Menu role=\"menu\" ref={ref} aria-labelledby=\"UserMenuButton\" onBlur={onBlur} onFocus={onFocus} onKeyDown={(event) => onKeyDown(event)} tabIndex={0}>\n        <MenuSection>\n          <MenuSectionList>\n            <Tabs size={Size.Medium}>\n              {item.items.map((entry, index) => {\n                const isGroup = entry.type == 'desktopgroup';\n                const key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';\n                const SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find((x) => x == entry.id));\n                if (isGroup) {\n                  return (\n                    <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, entry.id)} onMouseLeave={(event) => onMouseLeave(event, entry.id)}>\n                      <MenuItem\n                        tabIndex={-1}\n                        ref={allRefs[index] as React.Ref<HTMLButtonElement>}\n                        \n                        id={entry.id}\n                        item={{\n                          value: entry.label ?? '',\n                        }}\n                        iconRight={<SystemIcons.ArrowDropRight size=\"24px\" />}\n                        active={SubItemOpened || (Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId!))}\n                        onClickHandler={() => {}}\n                      />\n                      <SubMenu\n                        ref={subMenuRefs[index]}\n                        nestPath={[...(nestPath ?? []), entry.id]}\n                        onItemStateChanged={onItemStateChanged}\n                        activeItemId={activeItemId}\n                        dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n                        item={entry as MenuNavigationItemTypeDesktopGroup}\n                        index={index + 1}\n                        topLevel={false}\n                      />\n                    </div>\n                  );\n                }\n                return (\n                  <>\n                    <TabLink\n                      tabIndex={-1}\n                      key={key}\n                      to={isGroup ? '' : key}\n                      ref={allRefs[index] as React.Ref<HTMLAnchorElement>}\n                      onActiveStateChanged={(state) => onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state)}\n                      forceDeactivate={isGroup}\n                      requiredLine={entry.label ?? ''}\n                      optionalLine={''}\n                      endLineIcon={isGroup ? <SystemIcons.ArrowDropRight size=\"24px\" /> : null}\n                      OptionalLineIcon={''}\n                      disabled={entry.disabled}\n                      showNotificationDot={false}\n                      size={Size.Medium}\n                      variant=\"positive\"\n                    />\n                  </>\n                );\n              })}\n            </Tabs>\n          </MenuSectionList>\n        </MenuSection>\n      </Menu>\n    </SubMenuWrapper>\n  );\n});\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs

@@ -130,7 +130,7 @@ var MobileMenu = function MobileMenu(_ref) {
           onClick: function onClick() {
             return switcher.action && switcher.action() && onClose();
           },
-          children: label || 'Switch site'
+          children: "Switch site"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
           variant: 'secondary',
           shape: 'circular',

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

@@ -1 +1 @@
-{"version":3,"file":"MobileMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentXSStyling","ComponentTextStyle","Bold","neutral_600","ComponentSStyling","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","useStackState","reset","length","push","pop","peek","isMediumScreen","useMediaMatch","LARGE","replace","location","useLocation","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"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  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu,\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport { useStackState } from '../../common/StackState';\nimport { useMediaMatch } from 'rooks';\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 = ({ show, profile, buttons, label, header, items, footer, action, onClose }: Props) => {\n  const { reset, length, push, pop, peek } = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\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  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  const current = peek();\n\n  const switcher = current?.header?.buttons?.find((a) => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader\n        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      />\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && (\n        <MobileMenuContent\n          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\n      {current?.footer && (\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'} />\n          {switcher && (\n            <>\n              <SwitcherLabel className={'globalNav-toggler'} onClick={() => switcher.action && switcher.action() && onClose()}>\n                {label || 'Switch site'}\n              </SwitcherLabel>\n              <IconButton variant={'secondary'} shape={'circular'} id=\"globalNavAppsButton\" action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\" />\n              </IconButton>\n            </>\n          )}\n        </MobileFooter>\n      )}\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MobileMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentXSStyling","ComponentTextStyle","Bold","neutral_600","ComponentSStyling","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","useStackState","reset","length","push","pop","peek","isMediumScreen","useMediaMatch","LARGE","replace","location","useLocation","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"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  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\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 = useMediaMatch(BREAKPOINTS.LARGE.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'} onClick={() => switcher.action && switcher.action() && onClose()}>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"],"mappings":"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"}

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

@@ -4,5 +4,5 @@ type Props = MobileNavigationMenuProps & {
     show?: boolean;
     onClose: () => void;
 };
-declare const MobileMenu: ({ show, profile, buttons, label, header, items, footer, action, onClose }: Props) => JSX.Element;
+declare const MobileMenu: ({ show, profile, buttons, label, header, items, footer, action, onClose, }: Props) => JSX.Element;
 export default MobileMenu;

package/dist/GlobalNavigationBar/mobile/MobileMenu.js

@@ -11,7 +11,7 @@ import { LaerdalLogo } from '../../assets';
 import MobileMenuHeader from './MobileMenuHeader';
 import MobileMenuContent from './MobileMenuContent';
 import { useStackState } from '../../common/StackState';
-import { useMediaMatch } from 'rooks';
+import { useMediaMatch } from "rooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -122,7 +122,7 @@ var MobileMenu = function MobileMenu(_ref) {
           onClick: function onClick() {
             return switcher.action && switcher.action() && onClose();
           },
-          children: label || 'Switch site'
+          children: "Switch site"
         }), /*#__PURE__*/_jsx(IconButton, {
           variant: 'secondary',
           shape: 'circular',

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

@@ -1 +1 @@
-{"version":3,"file":"MobileMenu.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useStackState","useMediaMatch","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","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"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  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu,\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport { useStackState } from '../../common/StackState';\nimport { useMediaMatch } from 'rooks';\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 = ({ show, profile, buttons, label, header, items, footer, action, onClose }: Props) => {\n  const { reset, length, push, pop, peek } = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\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  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  const current = peek();\n\n  const switcher = current?.header?.buttons?.find((a) => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader\n        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      />\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && (\n        <MobileMenuContent\n          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\n      {current?.footer && (\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'} />\n          {switcher && (\n            <>\n              <SwitcherLabel className={'globalNav-toggler'} onClick={() => switcher.action && switcher.action() && onClose()}>\n                {label || 'Switch site'}\n              </SwitcherLabel>\n              <IconButton variant={'secondary'} shape={'circular'} id=\"globalNavAppsButton\" action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\" />\n              </IconButton>\n            </>\n          )}\n        </MobileFooter>\n      )}\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MobileMenu.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useStackState","useMediaMatch","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","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"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  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\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 = useMediaMatch(BREAKPOINTS.LARGE.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'} onClick={() => switcher.action && switcher.action() && onClose()}>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"],"mappings":"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"}

package/dist/GlobalNavigationBar/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../src/GlobalNavigationBar/types.tsx"],"sourcesContent":["import React from 'react';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { IconButtonProps } from '../Button/Iconbutton';\nimport { ProfileButtonProps } from '../ProfileButton/ProfileButton';\nimport { NavLinkProps } from 'react-router-dom';\nimport {ButtonProps} from \"../Button/Button\";\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\nexport interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {\n  label: string;\n  icon?: React.ReactElement;\n}\n\nexport interface MenuButton extends Omit<ButtonProps, 'onClick' | 'children' | 'size'> {\n  label: string;\n  action: () => void;\n\n  tooltip?: TooltipProps;\n}\n\nexport interface MenuGroupFooter {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuGroupHeader {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuAccountInfo {\n  firstName: string;\n  lastName: string;\n  email: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface ProfileMenu {\n  label?: string;\n\n  user: MenuAccountInfo;\n\n  sections: MenuNavigationSection[];\n\n  signOut?: MenuButton;\n}\n\nexport interface MenuIconSubMenuButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'submenu';\n  icon: React.ReactNode;\n  menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuIconButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'action';\n  icon: React.ReactNode;\n  action: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {\n  type: 'profile';\n  action?: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuSwitcherButton\n  extends Omit<\n    IconButtonProps,\n    | 'id'\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'switcher';\n  placement?: 'left' | 'right';\n  action?: (button?: EventTarget) => boolean | void;\n}\n\nexport type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;\nexport type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;\n\nexport interface MobileNavigationMenuProps {\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n\n  header?: MenuGroupHeader;\n\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport interface DesktopNavigationMenuProps {\n  buttons?: DesktopMenuButtonTypes[];\n  items: MenuNavigationItemTypeItem[];\n  action?: MenuButton;\n  reverseRightSideOrder?: boolean;\n}\n\n// @ts-ignore\nexport interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {\n  label: string;\n  note?: string;\n\n  buttons?: MobileMenuButtonTypes[];\n  header?: MenuGroupHeader;\n\n  items: T[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport type MenuNavigationItem = {\n  icon?: React.ReactNode;\n  to: string;\n  exact?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n  action?: (e: React.MouseEvent) => void;\n  label: string;\n  note?: string;\n  pinned?: boolean;\n} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;\n\nexport interface MenuNavigationSection<T = MenuNavigationItem> {\n  divider?: boolean;\n  pinned?: boolean;\n  label?: string;\n  items: T[];\n}\n\nexport type MenuNavigationItemTypeItem = MenuNavigationItem & {\n  type?: 'item';\n};\n\nexport type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {\n  type: 'group';\n  icon?: React.ReactNode;\n  pinned?: boolean;\n  disabled?: boolean;\n};\n\nexport type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {\n  type: 'section';\n};\n\nexport type MenuNavigationCustomSubMenu = {\n  type: 'custom';\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n  custom: () => React.ReactNode;\n};\n"],"mappings":""}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/GlobalNavigationBar/types.tsx"],"sourcesContent":["import React from 'react';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { IconButtonProps } from '../Button/Iconbutton';\nimport { ProfileButtonProps } from '../ProfileButton/ProfileButton';\nimport { NavLinkProps } from 'react-router-dom';\nimport {ButtonProps} from \"../Button/Button\";\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\nexport interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {\n  label: string;\n  icon?: React.ReactElement;\n}\n\nexport interface MenuButton extends Omit<ButtonProps, 'onClick' | 'children' | 'size'> {\n  label: string;\n  action: () => void;\n\n  tooltip?: TooltipProps;\n}\n\nexport interface MenuGroupFooter {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuGroupHeader {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuAccountInfo {\n  firstName: string;\n  lastName: string;\n  email: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface ProfileMenu {\n  label?: string;\n\n  user: MenuAccountInfo;\n\n  sections: MenuNavigationSection[];\n\n  signOut?: MenuButton;\n}\n\nexport interface MenuIconSubMenuButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'submenu';\n  icon: React.ReactNode;\n  menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuIconButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'action';\n  icon: React.ReactNode;\n  action: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {\n  type: 'profile';\n  action?: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuSwitcherButton\n  extends Omit<\n    IconButtonProps,\n    | 'id'\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'switcher';\n  placement?: 'left' | 'right';\n  action?: (button?: EventTarget) => boolean | void;\n}\n\nexport type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;\nexport type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;\n\nexport interface MobileNavigationMenuProps {\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n\n  header?: MenuGroupHeader;\n\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport interface DesktopNavigationMenuProps {\n  buttons?: DesktopMenuButtonTypes[];\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  action?: MenuButton;\n  reverseRightSideOrder?: boolean;\n}\n\n// @ts-ignore\nexport interface MenuNavigationGroup<T = MenuNavigationItemTypeDesktopGroup | MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {\n  label: string;\n  note?: string;\n\n  buttons?: MobileMenuButtonTypes[];\n  header?: MenuGroupHeader;\n\n  items: T[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport type MenuNavigationItem = {\n  icon?: React.ReactNode;\n  to: string;\n  exact?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n  action?: (e: React.MouseEvent) => void;\n  label: string;\n  note?: string;\n  pinned?: boolean;\n  subItems?: MenuNavigationItem[];\n} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;\n\nexport interface MenuNavigationSection<T = MenuNavigationItem> {\n  divider?: boolean;\n  pinned?: boolean;\n  label?: string;\n  items: T[];\n}\n\nexport type MenuNavigationItemTypeItem = MenuNavigationItem & {\n  type?: 'item';\n};\n\nexport type MenuNavigationItemTypeDesktopGroup = {\n  id: string;\n  label?: string;\n  disabled?: boolean;\n  pinned?: boolean;\n  type?: 'desktopgroup';\n  expanded?: boolean;\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n}\n\nexport type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {\n  type: 'group';\n  icon?: React.ReactNode;\n  pinned?: boolean;\n  disabled?: boolean;\n};\n\nexport type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {\n  type: 'section';\n};\n\nexport type MenuNavigationCustomSubMenu = {\n  type: 'custom';\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n  custom: () => React.ReactNode;\n};\n"],"mappings":""}

package/dist/GlobalNavigationBar/types.d.ts

@@ -70,11 +70,11 @@ export interface MobileNavigationMenuProps {
 }
 export interface DesktopNavigationMenuProps {
     buttons?: DesktopMenuButtonTypes[];
-    items: MenuNavigationItemTypeItem[];
+    items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];
     action?: MenuButton;
     reverseRightSideOrder?: boolean;
 }
-export interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {
+export interface MenuNavigationGroup<T = MenuNavigationItemTypeDesktopGroup | MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {
     label: string;
     note?: string;
     buttons?: MobileMenuButtonTypes[];
@@ -93,6 +93,7 @@ export type MenuNavigationItem = {
     label: string;
     note?: string;
     pinned?: boolean;
+    subItems?: MenuNavigationItem[];
 } & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;
 export interface MenuNavigationSection<T = MenuNavigationItem> {
     divider?: boolean;
@@ -103,6 +104,15 @@ export interface MenuNavigationSection<T = MenuNavigationItem> {
 export type MenuNavigationItemTypeItem = MenuNavigationItem & {
     type?: 'item';
 };
+export type MenuNavigationItemTypeDesktopGroup = {
+    id: string;
+    label?: string;
+    disabled?: boolean;
+    pinned?: boolean;
+    type?: 'desktopgroup';
+    expanded?: boolean;
+    items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];
+};
 export type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {
     type: 'group';
     icon?: React.ReactNode;

package/dist/GlobalNavigationBar/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/GlobalNavigationBar/types.tsx"],"sourcesContent":["import React from 'react';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { IconButtonProps } from '../Button/Iconbutton';\nimport { ProfileButtonProps } from '../ProfileButton/ProfileButton';\nimport { NavLinkProps } from 'react-router-dom';\nimport {ButtonProps} from \"../Button/Button\";\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\nexport interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {\n  label: string;\n  icon?: React.ReactElement;\n}\n\nexport interface MenuButton extends Omit<ButtonProps, 'onClick' | 'children' | 'size'> {\n  label: string;\n  action: () => void;\n\n  tooltip?: TooltipProps;\n}\n\nexport interface MenuGroupFooter {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuGroupHeader {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuAccountInfo {\n  firstName: string;\n  lastName: string;\n  email: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface ProfileMenu {\n  label?: string;\n\n  user: MenuAccountInfo;\n\n  sections: MenuNavigationSection[];\n\n  signOut?: MenuButton;\n}\n\nexport interface MenuIconSubMenuButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'submenu';\n  icon: React.ReactNode;\n  menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuIconButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'action';\n  icon: React.ReactNode;\n  action: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {\n  type: 'profile';\n  action?: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuSwitcherButton\n  extends Omit<\n    IconButtonProps,\n    | 'id'\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'switcher';\n  placement?: 'left' | 'right';\n  action?: (button?: EventTarget) => boolean | void;\n}\n\nexport type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;\nexport type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;\n\nexport interface MobileNavigationMenuProps {\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n\n  header?: MenuGroupHeader;\n\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport interface DesktopNavigationMenuProps {\n  buttons?: DesktopMenuButtonTypes[];\n  items: MenuNavigationItemTypeItem[];\n  action?: MenuButton;\n  reverseRightSideOrder?: boolean;\n}\n\n// @ts-ignore\nexport interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {\n  label: string;\n  note?: string;\n\n  buttons?: MobileMenuButtonTypes[];\n  header?: MenuGroupHeader;\n\n  items: T[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport type MenuNavigationItem = {\n  icon?: React.ReactNode;\n  to: string;\n  exact?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n  action?: (e: React.MouseEvent) => void;\n  label: string;\n  note?: string;\n  pinned?: boolean;\n} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;\n\nexport interface MenuNavigationSection<T = MenuNavigationItem> {\n  divider?: boolean;\n  pinned?: boolean;\n  label?: string;\n  items: T[];\n}\n\nexport type MenuNavigationItemTypeItem = MenuNavigationItem & {\n  type?: 'item';\n};\n\nexport type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {\n  type: 'group';\n  icon?: React.ReactNode;\n  pinned?: boolean;\n  disabled?: boolean;\n};\n\nexport type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {\n  type: 'section';\n};\n\nexport type MenuNavigationCustomSubMenu = {\n  type: 'custom';\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n  custom: () => React.ReactNode;\n};\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/GlobalNavigationBar/types.tsx"],"sourcesContent":["import React from 'react';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { IconButtonProps } from '../Button/Iconbutton';\nimport { ProfileButtonProps } from '../ProfileButton/ProfileButton';\nimport { NavLinkProps } from 'react-router-dom';\nimport {ButtonProps} from \"../Button/Button\";\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\nexport interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {\n  label: string;\n  icon?: React.ReactElement;\n}\n\nexport interface MenuButton extends Omit<ButtonProps, 'onClick' | 'children' | 'size'> {\n  label: string;\n  action: () => void;\n\n  tooltip?: TooltipProps;\n}\n\nexport interface MenuGroupFooter {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuGroupHeader {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuAccountInfo {\n  firstName: string;\n  lastName: string;\n  email: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface ProfileMenu {\n  label?: string;\n\n  user: MenuAccountInfo;\n\n  sections: MenuNavigationSection[];\n\n  signOut?: MenuButton;\n}\n\nexport interface MenuIconSubMenuButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'submenu';\n  icon: React.ReactNode;\n  menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuIconButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'action';\n  icon: React.ReactNode;\n  action: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {\n  type: 'profile';\n  action?: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuSwitcherButton\n  extends Omit<\n    IconButtonProps,\n    | 'id'\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'switcher';\n  placement?: 'left' | 'right';\n  action?: (button?: EventTarget) => boolean | void;\n}\n\nexport type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;\nexport type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;\n\nexport interface MobileNavigationMenuProps {\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n\n  header?: MenuGroupHeader;\n\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport interface DesktopNavigationMenuProps {\n  buttons?: DesktopMenuButtonTypes[];\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  action?: MenuButton;\n  reverseRightSideOrder?: boolean;\n}\n\n// @ts-ignore\nexport interface MenuNavigationGroup<T = MenuNavigationItemTypeDesktopGroup | MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {\n  label: string;\n  note?: string;\n\n  buttons?: MobileMenuButtonTypes[];\n  header?: MenuGroupHeader;\n\n  items: T[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport type MenuNavigationItem = {\n  icon?: React.ReactNode;\n  to: string;\n  exact?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n  action?: (e: React.MouseEvent) => void;\n  label: string;\n  note?: string;\n  pinned?: boolean;\n  subItems?: MenuNavigationItem[];\n} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;\n\nexport interface MenuNavigationSection<T = MenuNavigationItem> {\n  divider?: boolean;\n  pinned?: boolean;\n  label?: string;\n  items: T[];\n}\n\nexport type MenuNavigationItemTypeItem = MenuNavigationItem & {\n  type?: 'item';\n};\n\nexport type MenuNavigationItemTypeDesktopGroup = {\n  id: string;\n  label?: string;\n  disabled?: boolean;\n  pinned?: boolean;\n  type?: 'desktopgroup';\n  expanded?: boolean;\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n}\n\nexport type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {\n  type: 'group';\n  icon?: React.ReactNode;\n  pinned?: boolean;\n  disabled?: boolean;\n};\n\nexport type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {\n  type: 'section';\n};\n\nexport type MenuNavigationCustomSubMenu = {\n  type: 'custom';\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n  custom: () => React.ReactNode;\n};\n"],"mappings":""}

package/dist/GlobalNavigationBar/utils.cjs

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkIfContainsItem = void 0;
+var checkIfContainsItem = function checkIfContainsItem(item, activeId) {
+  if (item.id == activeId) return true;
+  if (item.items.findIndex(function (x) {
+    return x.type == 'item' && x.to == activeId;
+  }) >= 0) return true;
+  return item.items.some(function (x) {
+    return x.type == 'desktopgroup' && checkIfContainsItem(x, activeId);
+  });
+};
+exports.checkIfContainsItem = checkIfContainsItem;
+//# sourceMappingURL=utils.cjs.map

package/dist/GlobalNavigationBar/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","names":["checkIfContainsItem","item","activeId","id","items","findIndex","x","type","to","some"],"sources":["../../src/GlobalNavigationBar/utils.tsx"],"sourcesContent":["import { MenuNavigationItemTypeDesktopGroup } from './types';\n\nexport const checkIfContainsItem = (item: MenuNavigationItemTypeDesktopGroup, activeId: string) : boolean => {\n    if(item.id == activeId)\n        return true;\n    if(item.items.findIndex(x => x.type == 'item' && x.to == activeId) >= 0)\n        return true;\n    return item.items.some(x => x.type == 'desktopgroup' && checkIfContainsItem(x, activeId));\n}"],"mappings":";;;;;;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,IAAwC,EAAEC,QAAgB,EAAe;EACzG,IAAGD,IAAI,CAACE,EAAE,IAAID,QAAQ,EAClB,OAAO,IAAI;EACf,IAAGD,IAAI,CAACG,KAAK,CAACC,SAAS,CAAC,UAAAC,CAAC;IAAA,OAAIA,CAAC,CAACC,IAAI,IAAI,MAAM,IAAID,CAAC,CAACE,EAAE,IAAIN,QAAQ;EAAA,EAAC,IAAI,CAAC,EACnE,OAAO,IAAI;EACf,OAAOD,IAAI,CAACG,KAAK,CAACK,IAAI,CAAC,UAAAH,CAAC;IAAA,OAAIA,CAAC,CAACC,IAAI,IAAI,cAAc,IAAIP,mBAAmB,CAACM,CAAC,EAAEJ,QAAQ,CAAC;EAAA,EAAC;AAC7F,CAAC;AAAA"}