@laerdal/life-react-components 2.3.1-dev.16 → 2.3.1-dev.19

package/dist/AuthPage/AuthPage.cjs

@@ -20,7 +20,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
 var AuthPage = function AuthPage(_ref) {
   var screenSetsContainerId = _ref.screenSetsContainerId,
     panel = _ref.panel,

package/dist/AuthPage/AuthPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n`;\n\ntype AuthPageProps = {\n  panel?: PanelProps;\n  order?: 'default' | 'reverse';\n  screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n                    screenSetsContainerId,\n                    panel,\n                    order = 'default'\n                  }: AuthPageProps) => {\n  return (\n    <Wrapper className={order}>\n      {\n        panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n      }\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n    </Wrapper>\n  );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAGtC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,ySAStBC,mBAAW,CAACC,MAAM,CASrB;AAQD,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAIyB;EAAA,IAHnBC,qBAAqB,QAArBA,qBAAqB;IACrBC,KAAK,QAALA,KAAK;IAAA,kBACLC,KAAK;IAALA,KAAK,2BAAG,SAAS;EAEnC,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEA,KAAM;IAAA,WAEtBD,KAAK,iBAAI,qBAAC,YAAK,kCAAKA,KAAK;MAAE,KAAK,EAAEC,KAAM;MAAC,SAAS,kBAAWD,KAAK,CAACE,SAAS,IAAI,EAAE;IAAG,GAAE,eAEzF,qBAAC,4BAAmB;MAAC,EAAE,EAAEH,qBAAsB;MAAC,cAAc,EAAE,CAACC;IAAM,EAAE;EAAA,EACjE;AAEd,CAAC;AAAC;EAjBAC,KAAK,4BAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAAA,eAkBRD,QAAQ;AAAA"}
+{"version":3,"file":"AuthPage.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n`;\n\ntype AuthPageProps = {\n  panel?: PanelProps;\n  order?: 'default' | 'reverse';\n  screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n                    screenSetsContainerId,\n                    panel,\n                    order = 'default'\n                  }: AuthPageProps) => {\n  return (\n    <Wrapper className={order}>\n      {\n        panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n      }\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n    </Wrapper>\n  );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAGtC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,0TAUtBC,mBAAW,CAACC,MAAM,CASrB;AAQD,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAIyB;EAAA,IAHnBC,qBAAqB,QAArBA,qBAAqB;IACrBC,KAAK,QAALA,KAAK;IAAA,kBACLC,KAAK;IAALA,KAAK,2BAAG,SAAS;EAEnC,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEA,KAAM;IAAA,WAEtBD,KAAK,iBAAI,qBAAC,YAAK,kCAAKA,KAAK;MAAE,KAAK,EAAEC,KAAM;MAAC,SAAS,kBAAWD,KAAK,CAACE,SAAS,IAAI,EAAE;IAAG,GAAE,eAEzF,qBAAC,4BAAmB;MAAC,EAAE,EAAEH,qBAAsB;MAAC,cAAc,EAAE,CAACC;IAAM,EAAE;EAAA,EACjE;AAEd,CAAC;AAAC;EAjBAC,KAAK,4BAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAAA,eAkBRD,QAAQ;AAAA"}

package/dist/AuthPage/AuthPage.js

@@ -11,7 +11,7 @@ import { Panel } from "../Panel";
 import { BREAKPOINTS } from "../styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.MEDIUM);
 var AuthPage = function AuthPage(_ref) {
   var screenSetsContainerId = _ref.screenSetsContainerId,
     panel = _ref.panel,

package/dist/AuthPage/AuthPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage.js","names":["React","ScreenSetsContainer","styled","Panel","BREAKPOINTS","Wrapper","div","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n`;\n\ntype AuthPageProps = {\n  panel?: PanelProps;\n  order?: 'default' | 'reverse';\n  screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n                    screenSetsContainerId,\n                    panel,\n                    order = 'default'\n                  }: AuthPageProps) => {\n  return (\n    <Wrapper className={order}>\n      {\n        panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n      }\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n    </Wrapper>\n  );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,KAAK,QAAmB,UAAU;AAC1C,SAAQC,WAAW,QAAO,WAAW;AAAC;AAAA;AAGtC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,2RAStBF,WAAW,CAACG,MAAM,CASrB;AAQD,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAIyB;EAAA,IAHnBC,qBAAqB,QAArBA,qBAAqB;IACrBC,KAAK,QAALA,KAAK;IAAA,kBACLC,KAAK;IAALA,KAAK,2BAAG,SAAS;EAEnC,oBACE,MAAC,OAAO;IAAC,SAAS,EAAEA,KAAM;IAAA,WAEtBD,KAAK,iBAAI,KAAC,KAAK,kCAAKA,KAAK;MAAE,KAAK,EAAEC,KAAM;MAAC,SAAS,kBAAWD,KAAK,CAACE,SAAS,IAAI,EAAE;IAAG,GAAE,eAEzF,KAAC,mBAAmB;MAAC,EAAE,EAAEH,qBAAsB;MAAC,cAAc,EAAE,CAACC;IAAM,EAAE;EAAA,EACjE;AAEd,CAAC;AAAC;EAjBAC,KAAK,aAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAkBvB,eAAeD,QAAQ"}
+{"version":3,"file":"AuthPage.js","names":["React","ScreenSetsContainer","styled","Panel","BREAKPOINTS","Wrapper","div","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n`;\n\ntype AuthPageProps = {\n  panel?: PanelProps;\n  order?: 'default' | 'reverse';\n  screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n                    screenSetsContainerId,\n                    panel,\n                    order = 'default'\n                  }: AuthPageProps) => {\n  return (\n    <Wrapper className={order}>\n      {\n        panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n      }\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n    </Wrapper>\n  );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,KAAK,QAAmB,UAAU;AAC1C,SAAQC,WAAW,QAAO,WAAW;AAAC;AAAA;AAGtC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,4SAUtBF,WAAW,CAACG,MAAM,CASrB;AAQD,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAIyB;EAAA,IAHnBC,qBAAqB,QAArBA,qBAAqB;IACrBC,KAAK,QAALA,KAAK;IAAA,kBACLC,KAAK;IAALA,KAAK,2BAAG,SAAS;EAEnC,oBACE,MAAC,OAAO;IAAC,SAAS,EAAEA,KAAM;IAAA,WAEtBD,KAAK,iBAAI,KAAC,KAAK,kCAAKA,KAAK;MAAE,KAAK,EAAEC,KAAM;MAAC,SAAS,kBAAWD,KAAK,CAACE,SAAS,IAAI,EAAE;IAAG,GAAE,eAEzF,KAAC,mBAAmB;MAAC,EAAE,EAAEH,qBAAsB;MAAC,cAAc,EAAE,CAACC;IAAM,EAAE;EAAA,EACjE;AAEd,CAAC;AAAC;EAjBAC,KAAK,aAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAkBvB,eAAeD,QAAQ"}

package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs

@@ -20,7 +20,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 flowDown = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 exports.flowDown = flowDown;
-var Menu = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n"])), _styles.COLORS.white, flowDown, flowDown, _styles.Z_INDEXES.dropdown, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
+var Menu = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), _styles.COLORS.white, flowDown, flowDown, _styles.Z_INDEXES.dropdown, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM, _styles.focusStyles);
 exports.Menu = Menu;
 var MenuSection = _styledComponents.default.li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n"])), _styles.COLORS.neutral_100);
 exports.MenuSection = MenuSection;

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

@@ -1 +1 @@
-{"version":3,"file":"ExtendedMainMenu.cjs","names":["flowDown","keyframes","Menu","styled","ul","COLORS","white","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","console","log","React","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","action","exact","Size","Medium"],"sources":["../../../src/GlobalNavigationBar/desktop/ExtendedMainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { VerticalTabs } from '../../Tabs';\nimport { VerticalTabEntry } from '../../Tabs';\nimport {MenuNavigationItemTypeItem, Size} from '../../index';\nimport {Z_INDEXES} from '../../styles';\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.dropdown};\n\n  top: 12px;\n  ${BREAKPOINTS.SMALL} {\n    top: 18px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n`;\n\nexport const MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: MenuNavigationItemTypeItem[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n  console.log(navigationOptions);\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  React.useEffect(() => {\n    const list = navigationOptions?.map(n => {\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.action, exact: n.exact };\n    }) as VerticalTabEntry[];\n    setEntries(list);\n  }, [navigationOptions]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <MenuSection>\n        <MenuSectionList>\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default ExtendedMainMenu;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAEA;AAA6D;AAAA;AAAA;AAAA;AAGtD,IAAMA,QAAQ,OAAGC,2BAAS,oNAShC;AAAC;AAEK,IAAMC,IAAI,GAAGC,yBAAM,CAACC,EAAE,gjBAIPC,cAAM,CAACC,KAAK,EAKXN,QAAQ,EAChBA,QAAQ,EAIVO,iBAAS,CAACC,QAAQ,EAG3BC,mBAAW,CAACC,KAAK,EAGjBD,mBAAW,CAACE,MAAM,CAOrB;AAAC;AAEK,IAAMC,WAAW,GAAGT,yBAAM,CAACU,EAAE,gTAOlBR,cAAM,CAACS,WAAW,CAMnC;AAAC;AAEK,IAAMC,eAAe,GAAGZ,yBAAM,CAACC,EAAE,6IAIvC;AAAC;AAOF,IAAMY,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAsD;EAAA,IAAhDC,eAAe,QAAfA,eAAe;IAAEC,iBAAiB,QAAjBA,iBAAiB;EAC5DC,OAAO,CAACC,GAAG,CAACF,iBAAiB,CAAC;EAC9B,sBAA8BG,KAAK,CAACC,QAAQ,CAAqB,EAAE,CAAC;IAAA;IAA7DC,OAAO;IAAEC,UAAU;EAC1BH,KAAK,CAACI,SAAS,CAAC,YAAM;IACpB,SAASC,cAAc,CAACC,CAAM,EAAE;MAC9B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,EAAE;QACpBX,eAAe,EAAE;MACnB;IACF;IAEAY,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,cAAc,EAAE,KAAK,CAAC;IAC3D,OAAO,YAAM;MACXG,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,cAAc,EAAE,KAAK,CAAC;IAChE,CAAC;EACH,CAAC,EAAE,CAACT,eAAe,CAAC,CAAC;EAErBI,KAAK,CAACI,SAAS,CAAC,YAAM;IACpB,IAAMO,IAAI,GAAGd,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEe,GAAG,CAAC,UAAAC,CAAC,EAAI;MACvC,OAAO;QAAEC,YAAY,EAAED,CAAC,CAACE,KAAK;QAAEC,EAAE,EAAEH,CAAC,CAACG,EAAE;QAAEC,QAAQ,EAAEJ,CAAC,CAACI,QAAQ;QAAEC,OAAO,EAAEL,CAAC,CAACM,MAAM;QAAEC,KAAK,EAAEP,CAAC,CAACO;MAAM,CAAC;IACrG,CAAC,CAAuB;IACxBjB,UAAU,CAACQ,IAAI,CAAC;EAClB,CAAC,EAAE,CAACd,iBAAiB,CAAC,CAAC;EAEvB,oBACE,qBAAC,IAAI;IAAC,OAAO,EAAED,eAAgB;IAAC,IAAI,EAAC,MAAM;IAAC,mBAAgB,gBAAgB;IAAA,uBAC1E,qBAAC,WAAW;MAAA,uBACV,qBAAC,eAAe;QAAA,uBACd,qBAAC,kBAAY;UAAoB,OAAO,EAAEM,OAAQ;UAAC,IAAI,EAAEmB,WAAI,CAACC;QAAO,GAAnD,cAAc;MAAwC;IACxD;EACN,EACT;AAEX,CAAC;AAAC;EApCA1B,eAAe;EACfC,iBAAiB;AAAA;AAAA,eAqCJF,gBAAgB;AAAA"}
+{"version":3,"file":"ExtendedMainMenu.cjs","names":["flowDown","keyframes","Menu","styled","ul","COLORS","white","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","focusStyles","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","console","log","React","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","action","exact","Size","Medium"],"sources":["../../../src/GlobalNavigationBar/desktop/ExtendedMainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles } from '../../styles';\nimport { VerticalTabs } from '../../Tabs';\nimport { VerticalTabEntry } from '../../Tabs';\nimport {MenuNavigationItemTypeItem, Size} from '../../index';\nimport {Z_INDEXES} from '../../styles';\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.dropdown};\n\n  top: 12px;\n  ${BREAKPOINTS.SMALL} {\n    top: 18px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n`;\n\nexport const MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: MenuNavigationItemTypeItem[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n  console.log(navigationOptions);\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  React.useEffect(() => {\n    const list = navigationOptions?.map(n => {\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.action, exact: n.exact };\n    }) as VerticalTabEntry[];\n    setEntries(list);\n  }, [navigationOptions]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <MenuSection>\n        <MenuSectionList>\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default ExtendedMainMenu;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAEA;AAA6D;AAAA;AAAA;AAAA;AAGtD,IAAMA,QAAQ,OAAGC,2BAAS,oNAShC;AAAC;AAEK,IAAMC,IAAI,GAAGC,yBAAM,CAACC,EAAE,8kBAIPC,cAAM,CAACC,KAAK,EAKXN,QAAQ,EAChBA,QAAQ,EAIVO,iBAAS,CAACC,QAAQ,EAG3BC,mBAAW,CAACC,KAAK,EAGjBD,mBAAW,CAACE,MAAM,EAShBC,mBAAW,CAEhB;AAAC;AAEK,IAAMC,WAAW,GAAGV,yBAAM,CAACW,EAAE,gTAOlBT,cAAM,CAACU,WAAW,CAMnC;AAAC;AAEK,IAAMC,eAAe,GAAGb,yBAAM,CAACC,EAAE,6IAIvC;AAAC;AAOF,IAAMa,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAsD;EAAA,IAAhDC,eAAe,QAAfA,eAAe;IAAEC,iBAAiB,QAAjBA,iBAAiB;EAC5DC,OAAO,CAACC,GAAG,CAACF,iBAAiB,CAAC;EAC9B,sBAA8BG,KAAK,CAACC,QAAQ,CAAqB,EAAE,CAAC;IAAA;IAA7DC,OAAO;IAAEC,UAAU;EAC1BH,KAAK,CAACI,SAAS,CAAC,YAAM;IACpB,SAASC,cAAc,CAACC,CAAM,EAAE;MAC9B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,EAAE;QACpBX,eAAe,EAAE;MACnB;IACF;IAEAY,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,cAAc,EAAE,KAAK,CAAC;IAC3D,OAAO,YAAM;MACXG,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,cAAc,EAAE,KAAK,CAAC;IAChE,CAAC;EACH,CAAC,EAAE,CAACT,eAAe,CAAC,CAAC;EAErBI,KAAK,CAACI,SAAS,CAAC,YAAM;IACpB,IAAMO,IAAI,GAAGd,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEe,GAAG,CAAC,UAAAC,CAAC,EAAI;MACvC,OAAO;QAAEC,YAAY,EAAED,CAAC,CAACE,KAAK;QAAEC,EAAE,EAAEH,CAAC,CAACG,EAAE;QAAEC,QAAQ,EAAEJ,CAAC,CAACI,QAAQ;QAAEC,OAAO,EAAEL,CAAC,CAACM,MAAM;QAAEC,KAAK,EAAEP,CAAC,CAACO;MAAM,CAAC;IACrG,CAAC,CAAuB;IACxBjB,UAAU,CAACQ,IAAI,CAAC;EAClB,CAAC,EAAE,CAACd,iBAAiB,CAAC,CAAC;EAEvB,oBACE,qBAAC,IAAI;IAAC,OAAO,EAAED,eAAgB;IAAC,IAAI,EAAC,MAAM;IAAC,mBAAgB,gBAAgB;IAAA,uBAC1E,qBAAC,WAAW;MAAA,uBACV,qBAAC,eAAe;QAAA,uBACd,qBAAC,kBAAY;UAAoB,OAAO,EAAEM,OAAQ;UAAC,IAAI,EAAEmB,WAAI,CAACC;QAAO,GAAnD,cAAc;MAAwC;IACxD;EACN,EACT;AAEX,CAAC;AAAC;EApCA1B,eAAe;EACfC,iBAAiB;AAAA;AAAA,eAqCJF,gBAAgB;AAAA"}

package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js

@@ -4,13 +4,13 @@ import _pt from "prop-types";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../../styles';
+import { BREAKPOINTS, COLORS, focusStyles } from '../../styles';
 import { VerticalTabs } from '../../Tabs';
 import { Size } from '../../index';
 import { Z_INDEXES } from '../../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var flowDown = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
-export var Menu = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.dropdown, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM);
+export var Menu = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.dropdown, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM, focusStyles);
 export var MenuSection = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n"])), COLORS.neutral_100);
 export var MenuSectionList = styled.ul(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"])));
 var ExtendedMainMenu = function ExtendedMainMenu(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"ExtendedMainMenu.js","names":["React","styled","keyframes","BREAKPOINTS","COLORS","VerticalTabs","Size","Z_INDEXES","flowDown","Menu","ul","white","dropdown","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","console","log","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","action","exact","Medium"],"sources":["../../../src/GlobalNavigationBar/desktop/ExtendedMainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { VerticalTabs } from '../../Tabs';\nimport { VerticalTabEntry } from '../../Tabs';\nimport {MenuNavigationItemTypeItem, Size} from '../../index';\nimport {Z_INDEXES} from '../../styles';\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.dropdown};\n\n  top: 12px;\n  ${BREAKPOINTS.SMALL} {\n    top: 18px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n`;\n\nexport const MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: MenuNavigationItemTypeItem[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n  console.log(navigationOptions);\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  React.useEffect(() => {\n    const list = navigationOptions?.map(n => {\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.action, exact: n.exact };\n    }) as VerticalTabEntry[];\n    setEntries(list);\n  }, [navigationOptions]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <MenuSection>\n        <MenuSectionList>\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default ExtendedMainMenu;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AAErD,SAASC,WAAW,EAAEC,MAAM,QAAQ,cAAc;AAClD,SAASC,YAAY,QAAQ,YAAY;AAEzC,SAAoCC,IAAI,QAAO,aAAa;AAC5D,SAAQC,SAAS,QAAO,cAAc;AAAC;AAEvC,OAAO,IAAMC,QAAQ,GAAGN,SAAS,qMAShC;AAED,OAAO,IAAMO,IAAI,GAAGR,MAAM,CAACS,EAAE,kiBAIPN,MAAM,CAACO,KAAK,EAKXH,QAAQ,EAChBA,QAAQ,EAIVD,SAAS,CAACK,QAAQ,EAG3BT,WAAW,CAACU,KAAK,EAGjBV,WAAW,CAACW,MAAM,CAOrB;AAED,OAAO,IAAMC,WAAW,GAAGd,MAAM,CAACe,EAAE,kSAOlBZ,MAAM,CAACa,WAAW,CAMnC;AAED,OAAO,IAAMC,eAAe,GAAGjB,MAAM,CAACS,EAAE,+HAIvC;AAOD,IAAMS,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAsD;EAAA,IAAhDC,eAAe,QAAfA,eAAe;IAAEC,iBAAiB,QAAjBA,iBAAiB;EAC5DC,OAAO,CAACC,GAAG,CAACF,iBAAiB,CAAC;EAC9B,sBAA8BrB,KAAK,CAACwB,QAAQ,CAAqB,EAAE,CAAC;IAAA;IAA7DC,OAAO;IAAEC,UAAU;EAC1B1B,KAAK,CAAC2B,SAAS,CAAC,YAAM;IACpB,SAASC,cAAc,CAACC,CAAM,EAAE;MAC9B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,EAAE;QACpBV,eAAe,EAAE;MACnB;IACF;IAEAW,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,cAAc,EAAE,KAAK,CAAC;IAC3D,OAAO,YAAM;MACXG,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,cAAc,EAAE,KAAK,CAAC;IAChE,CAAC;EACH,CAAC,EAAE,CAACR,eAAe,CAAC,CAAC;EAErBpB,KAAK,CAAC2B,SAAS,CAAC,YAAM;IACpB,IAAMO,IAAI,GAAGb,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEc,GAAG,CAAC,UAAAC,CAAC,EAAI;MACvC,OAAO;QAAEC,YAAY,EAAED,CAAC,CAACE,KAAK;QAAEC,EAAE,EAAEH,CAAC,CAACG,EAAE;QAAEC,QAAQ,EAAEJ,CAAC,CAACI,QAAQ;QAAEC,OAAO,EAAEL,CAAC,CAACM,MAAM;QAAEC,KAAK,EAAEP,CAAC,CAACO;MAAM,CAAC;IACrG,CAAC,CAAuB;IACxBjB,UAAU,CAACQ,IAAI,CAAC;EAClB,CAAC,EAAE,CAACb,iBAAiB,CAAC,CAAC;EAEvB,oBACE,KAAC,IAAI;IAAC,OAAO,EAAED,eAAgB;IAAC,IAAI,EAAC,MAAM;IAAC,mBAAgB,gBAAgB;IAAA,uBAC1E,KAAC,WAAW;MAAA,uBACV,KAAC,eAAe;QAAA,uBACd,KAAC,YAAY;UAAoB,OAAO,EAAEK,OAAQ;UAAC,IAAI,EAAEnB,IAAI,CAACsC;QAAO,GAAnD,cAAc;MAAwC;IACxD;EACN,EACT;AAEX,CAAC;AAAC;EApCAxB,eAAe;EACfC,iBAAiB;AAAA;AAqCnB,eAAeF,gBAAgB"}
+{"version":3,"file":"ExtendedMainMenu.js","names":["React","styled","keyframes","BREAKPOINTS","COLORS","focusStyles","VerticalTabs","Size","Z_INDEXES","flowDown","Menu","ul","white","dropdown","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","console","log","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","action","exact","Medium"],"sources":["../../../src/GlobalNavigationBar/desktop/ExtendedMainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles } from '../../styles';\nimport { VerticalTabs } from '../../Tabs';\nimport { VerticalTabEntry } from '../../Tabs';\nimport {MenuNavigationItemTypeItem, Size} from '../../index';\nimport {Z_INDEXES} from '../../styles';\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.dropdown};\n\n  top: 12px;\n  ${BREAKPOINTS.SMALL} {\n    top: 18px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n`;\n\nexport const MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: MenuNavigationItemTypeItem[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n  console.log(navigationOptions);\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  React.useEffect(() => {\n    const list = navigationOptions?.map(n => {\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.action, exact: n.exact };\n    }) as VerticalTabEntry[];\n    setEntries(list);\n  }, [navigationOptions]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <MenuSection>\n        <MenuSectionList>\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default ExtendedMainMenu;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AAErD,SAASC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAQ,cAAc;AAC/D,SAASC,YAAY,QAAQ,YAAY;AAEzC,SAAoCC,IAAI,QAAO,aAAa;AAC5D,SAAQC,SAAS,QAAO,cAAc;AAAC;AAEvC,OAAO,IAAMC,QAAQ,GAAGP,SAAS,qMAShC;AAED,OAAO,IAAMQ,IAAI,GAAGT,MAAM,CAACU,EAAE,gkBAIPP,MAAM,CAACQ,KAAK,EAKXH,QAAQ,EAChBA,QAAQ,EAIVD,SAAS,CAACK,QAAQ,EAG3BV,WAAW,CAACW,KAAK,EAGjBX,WAAW,CAACY,MAAM,EAShBV,WAAW,CAEhB;AAED,OAAO,IAAMW,WAAW,GAAGf,MAAM,CAACgB,EAAE,kSAOlBb,MAAM,CAACc,WAAW,CAMnC;AAED,OAAO,IAAMC,eAAe,GAAGlB,MAAM,CAACU,EAAE,+HAIvC;AAOD,IAAMS,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAsD;EAAA,IAAhDC,eAAe,QAAfA,eAAe;IAAEC,iBAAiB,QAAjBA,iBAAiB;EAC5DC,OAAO,CAACC,GAAG,CAACF,iBAAiB,CAAC;EAC9B,sBAA8BtB,KAAK,CAACyB,QAAQ,CAAqB,EAAE,CAAC;IAAA;IAA7DC,OAAO;IAAEC,UAAU;EAC1B3B,KAAK,CAAC4B,SAAS,CAAC,YAAM;IACpB,SAASC,cAAc,CAACC,CAAM,EAAE;MAC9B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,EAAE;QACpBV,eAAe,EAAE;MACnB;IACF;IAEAW,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,cAAc,EAAE,KAAK,CAAC;IAC3D,OAAO,YAAM;MACXG,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,cAAc,EAAE,KAAK,CAAC;IAChE,CAAC;EACH,CAAC,EAAE,CAACR,eAAe,CAAC,CAAC;EAErBrB,KAAK,CAAC4B,SAAS,CAAC,YAAM;IACpB,IAAMO,IAAI,GAAGb,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEc,GAAG,CAAC,UAAAC,CAAC,EAAI;MACvC,OAAO;QAAEC,YAAY,EAAED,CAAC,CAACE,KAAK;QAAEC,EAAE,EAAEH,CAAC,CAACG,EAAE;QAAEC,QAAQ,EAAEJ,CAAC,CAACI,QAAQ;QAAEC,OAAO,EAAEL,CAAC,CAACM,MAAM;QAAEC,KAAK,EAAEP,CAAC,CAACO;MAAM,CAAC;IACrG,CAAC,CAAuB;IACxBjB,UAAU,CAACQ,IAAI,CAAC;EAClB,CAAC,EAAE,CAACb,iBAAiB,CAAC,CAAC;EAEvB,oBACE,KAAC,IAAI;IAAC,OAAO,EAAED,eAAgB;IAAC,IAAI,EAAC,MAAM;IAAC,mBAAgB,gBAAgB;IAAA,uBAC1E,KAAC,WAAW;MAAA,uBACV,KAAC,eAAe;QAAA,uBACd,KAAC,YAAY;UAAoB,OAAO,EAAEK,OAAQ;UAAC,IAAI,EAAEnB,IAAI,CAACsC;QAAO,GAAnD,cAAc;MAAwC;IACxD;EACN,EACT;AAEX,CAAC;AAAC;EApCAxB,eAAe;EACfC,iBAAiB;AAAA;AAqCnB,eAAeF,gBAAgB"}

package/dist/GlobalNavigationBar/desktop/MainMenu.cjs

@@ -54,13 +54,27 @@ var MainMenu = function MainMenu(_ref) {
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     numberOfItemsAllowed = _React$useState2[0],
     setNumberOfItemsAllowed = _React$useState2[1];
-  var _React$useState3 = React.useState({}),
+  var _React$useState3 = React.useState([]),
     _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    forceUpdate = _React$useState4[1];
-  var _React$useState5 = React.useState(''),
+    subMenuRefs = _React$useState4[0],
+    setAllSubMenuRefs = _React$useState4[1];
+  var extendedMenuOptionRef = /*#__PURE__*/React.createRef();
+  React.useEffect(function () {
+    setAllSubMenuRefs(items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : undefined;
+    }));
+  }, [items]);
+  var _React$useState5 = React.useState({}),
     _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-    activeItem = _React$useState6[0],
-    setActiveItemId = _React$useState6[1];
+    forceUpdate = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+    activeItem = _React$useState8[0],
+    setActiveItemId = _React$useState8[1];
+  var _React$useState9 = React.useState(''),
+    _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+    focusedItemId = _React$useState10[0],
+    setFocusedItemId = _React$useState10[1];
   var widthOfItem = 120;
   var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
     if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
@@ -105,6 +119,13 @@ var MainMenu = function MainMenu(_ref) {
     dropdownMenusOpenedArray.current = [];
     forceUpdate({});
   };
+  var onKeyDownTop = function onKeyDownTop(event) {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      dropdownMenusOpenedArray.current = [];
+      //just trigger rerendering
+      forceUpdate({});
+    }
+  };
   var renderItem = function renderItem(item, index) {
     if (index > numberOfItemsAllowed - 2) return null;
     if (item.type != 'desktopgroup') {
@@ -153,6 +174,7 @@ var MainMenu = function MainMenu(_ref) {
           forceUpdate({});
         }
       };
+      var containsActiveItem = (0, _utils.checkIfContainsItem)(item, activeItem);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         style: {
           position: 'relative'
@@ -166,6 +188,11 @@ var MainMenu = function MainMenu(_ref) {
           return _onMouseLeave(event, (_item$id2 = item.id) !== null && _item$id2 !== void 0 ? _item$id2 : '');
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_NavItem.NavItem, {
+          id: item.id + '_parentOption',
+          "aria-expanded": Boolean(existingRef),
+          "aria-activedescendant": containsActiveItem ? activeItem : '',
+          "aria-controls": item.id,
+          role: "listbox",
           onFocus: onFocus,
           onKeyDown: onKeyDown,
           tabIndex: 0,
@@ -176,6 +203,10 @@ var MainMenu = function MainMenu(_ref) {
             size: "24px"
           })]
         }, item.label), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubMenu.SubMenu, {
+          ariaLabelledBy: item.id + '_parentOption',
+          ref: subMenuRefs[index],
+          onItemFocused: setFocusedItemId,
+          focusedItemId: focusedItemId,
           activeItemId: activeItem,
           nestPath: [item.id],
           onItemStateChanged: function onItemStateChanged(item, state) {
@@ -191,12 +222,25 @@ var MainMenu = function MainMenu(_ref) {
       });
     }
   };
+  var extended = dropdownMenusOpenedArray.current.find(function (x) {
+    return x == ExtendedMenuOption;
+  });
+  var extendedSectionKeyHandler = function extendedSectionKeyHandler(event) {
+    if (event.key == 'Enter' || event.code == 'Space') {
+      event.stopPropagation();
+      dropdownMenusOpenedArray.current = [ExtendedMenuOption];
+      forceUpdate({});
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
     role: "navigation",
-    "aria-label": "Global Navigation",
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
+    onKeyDown: onKeyDownTop,
     children: [items === null || items === void 0 ? void 0 : items.map(renderItem), items.length + 1 > numberOfItemsAllowed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExtendedSection, {
+      onKeyDown: function onKeyDown(event) {
+        return extendedSectionKeyHandler(event);
+      },
       onMouseEnter: function onMouseEnter(event) {
         return _onMouseEnter(event, ExtendedMenuOption);
       },
@@ -204,6 +248,14 @@ var MainMenu = function MainMenu(_ref) {
         return _onMouseLeave(event, ExtendedMenuOption);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        id: ExtendedMenuOption + '_parentOption',
+        "aria-expanded": Boolean(extended),
+        "aria-activedescendant": (0, _utils.checkIfContainsItem)({
+          items: items.slice(numberOfItemsAllowed - 1),
+          id: ExtendedMenuOption
+        }, activeItem) ? activeItem : '',
+        "aria-controls": ExtendedMenuOption,
+        role: "listbox",
         ref: menuButtonRef,
         variant: 'secondary',
         shape: 'circular',
@@ -212,10 +264,17 @@ var MainMenu = function MainMenu(_ref) {
           size: "24px"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubMenu.SubMenu, {
+        ariaLabelledBy: ExtendedMenuOption + '_parentOption',
         activeItemId: activeItem,
+        onItemFocused: setFocusedItemId,
+        focusedItemId: focusedItemId,
+        ref: extendedMenuOptionRef,
         onItemStateChanged: function onItemStateChanged(item, state) {
+          console.log(item);
+          console.log(state);
           if (state) setActiveItemId(item);else if (item == activeItem) setActiveItemId('');
         },
+        nestPath: [ExtendedMenuOption],
         item: {
           items: items.slice(numberOfItemsAllowed - 1),
           id: ExtendedMenuOption

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

@@ -1 +1 @@
-{"version":3,"file":"MainMenu.cjs","names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","NavItemDiv","LARGE","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","SubMenuWrapper","Menu","topLevel","ExtendedMenuOption","MainMenu","items","rightSideRef","menuButtonRef","React","useRef","dropdownMenusOpenedArray","mainMenuRef","useState","numberOfItemsAllowed","setNumberOfItemsAllowed","forceUpdate","activeItem","setActiveItemId","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","onMouseLeave","event","id","filter","x","onMouseEnter","existingRefForId","find","useEffect","window","addEventListener","removeEventListener","length","onFocus","renderItem","item","index","type","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","e","existingRef","onClick","onKeyDown","key","code","position","checkIfContainsItem","state","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NavItem } from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport { COLORS, BREAKPOINTS } from '../../styles';\nimport { Menu } from './ExtendedMainMenu';\nimport { SubMenu } from './SubMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { NavItemDiv } from '../../NavItem/NavItem';\nimport { checkIfContainsItem } from '../utils';\n\nconst NavContainer = styled.div`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n  \n  ${NavItemDiv} {\n    cursor: pointer;\n  }\n  ${BREAKPOINTS.LARGE} {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\nconst SubMenuWrapper = styled.div<{ topLevel: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nconst ExtendedMenuOption = 'extendedOption';\n\ntype Props = {\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ items, rightSideRef }: Props): React.ReactElement<Props> => {\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  //we have to use refs instead of 'state' here, because when onmouseleave is triggered for multiple nested divs, state update is not being updated in between\n  const dropdownMenusOpenedArray = React.useRef<string[]>([]);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n  const [, forceUpdate] = React.useState({});\n  const [activeItem, setActiveItemId] = React.useState<string>('');\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    forceUpdate({});\n  };\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      forceUpdate({});\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length]);\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    //no open dropdowns if top level was entered\n    dropdownMenusOpenedArray.current = [];\n    forceUpdate({});\n  }\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup, index: number) => {\n    if (index > numberOfItemsAllowed - 2) return null;\n    if (item.type != 'desktopgroup') {\n      const { icon, to, exact, disabled, external, action, label, note, pinned, ...rest } = item as MenuNavigationItemTypeItem;\n      return item?.disabled ? (\n        <NavItem as={NavButton}  className=\"disabled\" key={item.label} onMouseDown={defaultOnMouseDownHandler}>\n          {item?.label}\n        </NavItem>\n      ) : (\n        <NavItem as={NavLink} onFocus={onFocus} to={to || ''} key={label} onMouseDown={defaultOnMouseDownHandler} onClick={(e: React.MouseEvent) => action && action(e)} {...rest}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n      const onClick = () => {\n        if (existingRef == null) {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      };\n      const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if(event.key == 'Enter' || event.code == 'Space')\n        {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      }\n\n      return (\n        <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, item.id ?? '')} onMouseLeave={(event) => onMouseLeave(event, item.id ?? '')}>\n          <NavItem onFocus={onFocus} onKeyDown={onKeyDown} tabIndex={0} className={(existingRef != null || checkIfContainsItem(item, activeItem) ) ? 'active' : ''} key={item.label} to={null} onClick={onClick}>\n            {item?.label} <SystemIcons.ArrowDropDown size=\"24px\" />\n          </NavItem>\n          <SubMenu\n            activeItemId={activeItem}\n            nestPath={[item.id]}\n            onItemStateChanged={(item, state) => {\n              if (state) {\n                setActiveItemId(item);\n              } else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={item as MenuNavigationItemTypeDesktopGroup}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n            index={index + 1}\n            topLevel={true}\n          />\n        </div>\n      );\n    }\n  };\n\n  return (\n    <NavContainer role=\"navigation\" aria-label=\"Global Navigation\" className=\"GlobalNavigationMainMenu\" ref={mainMenuRef}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection onMouseEnter={(event) => onMouseEnter(event, ExtendedMenuOption)} onMouseLeave={(event) => onMouseLeave(event, ExtendedMenuOption)}>\n          <IconButton ref={menuButtonRef} variant={'secondary'} shape={'circular'} action={() => {}}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <SubMenu\n            activeItemId={activeItem}\n            onItemStateChanged={(item, state) => {\n              if (state)\n                setActiveItemId(item);\n              else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={{ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }}\n            topLevel={true}\n            index={0}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n          />\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MainMenu.cjs","names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","NavItemDiv","LARGE","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","SubMenuWrapper","Menu","topLevel","ExtendedMenuOption","MainMenu","items","rightSideRef","menuButtonRef","React","useRef","dropdownMenusOpenedArray","mainMenuRef","useState","numberOfItemsAllowed","setNumberOfItemsAllowed","subMenuRefs","setAllSubMenuRefs","extendedMenuOptionRef","createRef","useEffect","map","x","type","undefined","forceUpdate","activeItem","setActiveItemId","focusedItemId","setFocusedItemId","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","onMouseLeave","event","id","filter","onMouseEnter","existingRefForId","find","window","addEventListener","removeEventListener","length","onFocus","onKeyDownTop","key","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","e","existingRef","onClick","onKeyDown","code","containsActiveItem","checkIfContainsItem","position","Boolean","state","extended","extendedSectionKeyHandler","stopPropagation","slice","console","log"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NavItem } from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport { COLORS, BREAKPOINTS } from '../../styles';\nimport { Menu } from './ExtendedMainMenu';\nimport { SubMenu } from './SubMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { NavItemDiv } from '../../NavItem/NavItem';\nimport { checkIfContainsItem } from '../utils';\n\nconst NavContainer = styled.div`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n  \n  ${NavItemDiv} {\n    cursor: pointer;\n  }\n  ${BREAKPOINTS.LARGE} {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\nconst SubMenuWrapper = styled.div<{ topLevel: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nconst ExtendedMenuOption = 'extendedOption';\n\ntype Props = {\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ items, rightSideRef }: Props): React.ReactElement<Props> => {\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  //we have to use refs instead of 'state' here, because when onmouseleave is triggered for multiple nested divs, state update is not being updated in between\n  const dropdownMenusOpenedArray = React.useRef<string[]>([]);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n  const extendedMenuOptionRef = React.createRef<HTMLUListElement>();\n\n  React.useEffect(() => {\n    setAllSubMenuRefs(items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [items]);\n\n  const [, forceUpdate] = React.useState({});\n  const [activeItem, setActiveItemId] = React.useState<string>('');\n  const [focusedItemId, setFocusedItemId] = React.useState<string>('');\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    forceUpdate({});\n  };\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      forceUpdate({});\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length]);\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    //no open dropdowns if top level was entered\n    dropdownMenusOpenedArray.current = [];\n    forceUpdate({});\n  };\n\n  const onKeyDownTop = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape' || event.key === 'Esc') {\n      dropdownMenusOpenedArray.current = [];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup, index: number) => {\n    if (index > numberOfItemsAllowed - 2) return null;\n    if (item.type != 'desktopgroup') {\n      const { icon, to, exact, disabled, external, action, label, note, pinned, ...rest } = item as MenuNavigationItemTypeItem;\n      return item?.disabled ? (\n        <NavItem as={NavButton} className=\"disabled\" key={item.label} onMouseDown={defaultOnMouseDownHandler}>\n          {item?.label}\n        </NavItem>\n      ) : (\n        <NavItem as={NavLink} onFocus={onFocus} to={to || ''} key={label} onMouseDown={defaultOnMouseDownHandler} onClick={(e: React.MouseEvent) => action && action(e)} {...rest}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n      const onClick = () => {\n        if (existingRef == null) {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      };\n      const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key == 'Enter' || event.code == 'Space') {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        } \n      };\n\n      const containsActiveItem = checkIfContainsItem(item, activeItem);\n      return (\n        <div\n          style={{ position: 'relative' }}\n          onMouseEnter={(event) => onMouseEnter(event, item.id ?? '')}\n          onMouseLeave={(event) => onMouseLeave(event, item.id ?? '')}>\n          <NavItem\n            id={item.id + '_parentOption'}\n            aria-expanded={Boolean(existingRef)}\n            aria-activedescendant={containsActiveItem ? activeItem : ''}\n            aria-controls={item.id}\n            role=\"listbox\"\n            onFocus={onFocus}\n            onKeyDown={onKeyDown}\n            tabIndex={0}\n            className={existingRef != null || checkIfContainsItem(item, activeItem) ? 'active' : ''}\n            key={item.label}\n            to={null}\n            onClick={onClick}>\n            {item?.label} <SystemIcons.ArrowDropDown size=\"24px\" />\n          </NavItem>\n          <SubMenu\n            ariaLabelledBy={item.id + '_parentOption'}\n            ref={subMenuRefs[index]}\n            onItemFocused={setFocusedItemId}\n            focusedItemId={focusedItemId}\n            activeItemId={activeItem}\n            nestPath={[item.id]}\n            onItemStateChanged={(item, state) => {\n              if (state) {\n                setActiveItemId(item);\n              } else if (item == activeItem) setActiveItemId('');\n            }}\n            item={item as MenuNavigationItemTypeDesktopGroup}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n            index={index + 1}\n            topLevel={true}\n          />\n        </div>\n      );\n    }\n  };\n\n\n  const extended = dropdownMenusOpenedArray.current.find((x) => x == ExtendedMenuOption);\n  const extendedSectionKeyHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key == 'Enter' || event.code == 'Space') {\n      event.stopPropagation();\n\n      dropdownMenusOpenedArray.current = [ExtendedMenuOption];\n      forceUpdate({});\n    }\n  };\n\n  return (\n    <NavContainer role=\"navigation\" className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} onKeyDown={onKeyDownTop}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection\n          onKeyDown={(event) => extendedSectionKeyHandler(event)}\n          onMouseEnter={(event) => onMouseEnter(event, ExtendedMenuOption)}\n          onMouseLeave={(event) => onMouseLeave(event, ExtendedMenuOption)}>\n          <IconButton\n            id={ExtendedMenuOption + '_parentOption'}\n            aria-expanded={Boolean(extended)}\n            aria-activedescendant={checkIfContainsItem({ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }, activeItem) ? activeItem : ''}\n            aria-controls={ExtendedMenuOption}\n            role=\"listbox\"\n            \n            ref={menuButtonRef} variant={'secondary'} shape={'circular'} action={() => {}}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <SubMenu\n            ariaLabelledBy={ExtendedMenuOption + '_parentOption'}\n            activeItemId={activeItem}\n            onItemFocused={setFocusedItemId}\n            focusedItemId={focusedItemId}\n            ref={extendedMenuOptionRef}\n            onItemStateChanged={(item, state) => {\n              console.log(item);\n              console.log(state);\n              if (state) setActiveItemId(item);\n              else if (item == activeItem) setActiveItemId('');\n            }}\n            nestPath={[ExtendedMenuOption]}\n            item={{ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }}\n            topLevel={true}\n            index={0}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n          />\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/MainMenu.js

@@ -45,13 +45,27 @@ var MainMenu = function MainMenu(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     numberOfItemsAllowed = _React$useState2[0],
     setNumberOfItemsAllowed = _React$useState2[1];
-  var _React$useState3 = React.useState({}),
+  var _React$useState3 = React.useState([]),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    forceUpdate = _React$useState4[1];
-  var _React$useState5 = React.useState(''),
+    subMenuRefs = _React$useState4[0],
+    setAllSubMenuRefs = _React$useState4[1];
+  var extendedMenuOptionRef = /*#__PURE__*/React.createRef();
+  React.useEffect(function () {
+    setAllSubMenuRefs(items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : undefined;
+    }));
+  }, [items]);
+  var _React$useState5 = React.useState({}),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    activeItem = _React$useState6[0],
-    setActiveItemId = _React$useState6[1];
+    forceUpdate = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    activeItem = _React$useState8[0],
+    setActiveItemId = _React$useState8[1];
+  var _React$useState9 = React.useState(''),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    focusedItemId = _React$useState10[0],
+    setFocusedItemId = _React$useState10[1];
   var widthOfItem = 120;
   var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
     if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
@@ -96,6 +110,13 @@ var MainMenu = function MainMenu(_ref) {
     dropdownMenusOpenedArray.current = [];
     forceUpdate({});
   };
+  var onKeyDownTop = function onKeyDownTop(event) {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      dropdownMenusOpenedArray.current = [];
+      //just trigger rerendering
+      forceUpdate({});
+    }
+  };
   var renderItem = function renderItem(item, index) {
     if (index > numberOfItemsAllowed - 2) return null;
     if (item.type != 'desktopgroup') {
@@ -144,6 +165,7 @@ var MainMenu = function MainMenu(_ref) {
           forceUpdate({});
         }
       };
+      var containsActiveItem = checkIfContainsItem(item, activeItem);
       return /*#__PURE__*/_jsxs("div", {
         style: {
           position: 'relative'
@@ -157,6 +179,11 @@ var MainMenu = function MainMenu(_ref) {
           return _onMouseLeave(event, (_item$id2 = item.id) !== null && _item$id2 !== void 0 ? _item$id2 : '');
         },
         children: [/*#__PURE__*/_jsxs(NavItem, {
+          id: item.id + '_parentOption',
+          "aria-expanded": Boolean(existingRef),
+          "aria-activedescendant": containsActiveItem ? activeItem : '',
+          "aria-controls": item.id,
+          role: "listbox",
           onFocus: onFocus,
           onKeyDown: onKeyDown,
           tabIndex: 0,
@@ -167,6 +194,10 @@ var MainMenu = function MainMenu(_ref) {
             size: "24px"
           })]
         }, item.label), /*#__PURE__*/_jsx(SubMenu, {
+          ariaLabelledBy: item.id + '_parentOption',
+          ref: subMenuRefs[index],
+          onItemFocused: setFocusedItemId,
+          focusedItemId: focusedItemId,
           activeItemId: activeItem,
           nestPath: [item.id],
           onItemStateChanged: function onItemStateChanged(item, state) {
@@ -182,12 +213,25 @@ var MainMenu = function MainMenu(_ref) {
       });
     }
   };
+  var extended = dropdownMenusOpenedArray.current.find(function (x) {
+    return x == ExtendedMenuOption;
+  });
+  var extendedSectionKeyHandler = function extendedSectionKeyHandler(event) {
+    if (event.key == 'Enter' || event.code == 'Space') {
+      event.stopPropagation();
+      dropdownMenusOpenedArray.current = [ExtendedMenuOption];
+      forceUpdate({});
+    }
+  };
   return /*#__PURE__*/_jsxs(NavContainer, {
     role: "navigation",
-    "aria-label": "Global Navigation",
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
+    onKeyDown: onKeyDownTop,
     children: [items === null || items === void 0 ? void 0 : items.map(renderItem), items.length + 1 > numberOfItemsAllowed && /*#__PURE__*/_jsxs(ExtendedSection, {
+      onKeyDown: function onKeyDown(event) {
+        return extendedSectionKeyHandler(event);
+      },
       onMouseEnter: function onMouseEnter(event) {
         return _onMouseEnter(event, ExtendedMenuOption);
       },
@@ -195,6 +239,14 @@ var MainMenu = function MainMenu(_ref) {
         return _onMouseLeave(event, ExtendedMenuOption);
       },
       children: [/*#__PURE__*/_jsx(IconButton, {
+        id: ExtendedMenuOption + '_parentOption',
+        "aria-expanded": Boolean(extended),
+        "aria-activedescendant": checkIfContainsItem({
+          items: items.slice(numberOfItemsAllowed - 1),
+          id: ExtendedMenuOption
+        }, activeItem) ? activeItem : '',
+        "aria-controls": ExtendedMenuOption,
+        role: "listbox",
         ref: menuButtonRef,
         variant: 'secondary',
         shape: 'circular',
@@ -203,10 +255,17 @@ var MainMenu = function MainMenu(_ref) {
           size: "24px"
         })
       }), /*#__PURE__*/_jsx(SubMenu, {
+        ariaLabelledBy: ExtendedMenuOption + '_parentOption',
         activeItemId: activeItem,
+        onItemFocused: setFocusedItemId,
+        focusedItemId: focusedItemId,
+        ref: extendedMenuOptionRef,
         onItemStateChanged: function onItemStateChanged(item, state) {
+          console.log(item);
+          console.log(state);
           if (state) setActiveItemId(item);else if (item == activeItem) setActiveItemId('');
         },
+        nestPath: [ExtendedMenuOption],
         item: {
           items: items.slice(numberOfItemsAllowed - 1),
           id: ExtendedMenuOption

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

@@ -1 +1 @@
-{"version":3,"file":"MainMenu.js","names":["React","NavLink","styled","NavItem","SystemIcons","COLORS","BREAKPOINTS","Menu","SubMenu","IconButton","defaultOnMouseDownHandler","NavItemDiv","checkIfContainsItem","NavContainer","div","MEDIUM","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","SubMenuWrapper","topLevel","ExtendedMenuOption","MainMenu","items","rightSideRef","menuButtonRef","useRef","dropdownMenusOpenedArray","mainMenuRef","useState","numberOfItemsAllowed","setNumberOfItemsAllowed","forceUpdate","activeItem","setActiveItemId","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","onMouseLeave","event","id","filter","x","onMouseEnter","existingRefForId","find","useEffect","window","addEventListener","removeEventListener","length","onFocus","renderItem","item","index","type","icon","to","exact","disabled","external","action","label","note","pinned","rest","e","existingRef","onClick","onKeyDown","key","code","position","state","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NavItem } from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport { COLORS, BREAKPOINTS } from '../../styles';\nimport { Menu } from './ExtendedMainMenu';\nimport { SubMenu } from './SubMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { NavItemDiv } from '../../NavItem/NavItem';\nimport { checkIfContainsItem } from '../utils';\n\nconst NavContainer = styled.div`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n  \n  ${NavItemDiv} {\n    cursor: pointer;\n  }\n  ${BREAKPOINTS.LARGE} {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\nconst SubMenuWrapper = styled.div<{ topLevel: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nconst ExtendedMenuOption = 'extendedOption';\n\ntype Props = {\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ items, rightSideRef }: Props): React.ReactElement<Props> => {\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  //we have to use refs instead of 'state' here, because when onmouseleave is triggered for multiple nested divs, state update is not being updated in between\n  const dropdownMenusOpenedArray = React.useRef<string[]>([]);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n  const [, forceUpdate] = React.useState({});\n  const [activeItem, setActiveItemId] = React.useState<string>('');\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    forceUpdate({});\n  };\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      forceUpdate({});\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length]);\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    //no open dropdowns if top level was entered\n    dropdownMenusOpenedArray.current = [];\n    forceUpdate({});\n  }\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup, index: number) => {\n    if (index > numberOfItemsAllowed - 2) return null;\n    if (item.type != 'desktopgroup') {\n      const { icon, to, exact, disabled, external, action, label, note, pinned, ...rest } = item as MenuNavigationItemTypeItem;\n      return item?.disabled ? (\n        <NavItem as={NavButton}  className=\"disabled\" key={item.label} onMouseDown={defaultOnMouseDownHandler}>\n          {item?.label}\n        </NavItem>\n      ) : (\n        <NavItem as={NavLink} onFocus={onFocus} to={to || ''} key={label} onMouseDown={defaultOnMouseDownHandler} onClick={(e: React.MouseEvent) => action && action(e)} {...rest}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n      const onClick = () => {\n        if (existingRef == null) {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      };\n      const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if(event.key == 'Enter' || event.code == 'Space')\n        {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      }\n\n      return (\n        <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, item.id ?? '')} onMouseLeave={(event) => onMouseLeave(event, item.id ?? '')}>\n          <NavItem onFocus={onFocus} onKeyDown={onKeyDown} tabIndex={0} className={(existingRef != null || checkIfContainsItem(item, activeItem) ) ? 'active' : ''} key={item.label} to={null} onClick={onClick}>\n            {item?.label} <SystemIcons.ArrowDropDown size=\"24px\" />\n          </NavItem>\n          <SubMenu\n            activeItemId={activeItem}\n            nestPath={[item.id]}\n            onItemStateChanged={(item, state) => {\n              if (state) {\n                setActiveItemId(item);\n              } else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={item as MenuNavigationItemTypeDesktopGroup}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n            index={index + 1}\n            topLevel={true}\n          />\n        </div>\n      );\n    }\n  };\n\n  return (\n    <NavContainer role=\"navigation\" aria-label=\"Global Navigation\" className=\"GlobalNavigationMainMenu\" ref={mainMenuRef}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection onMouseEnter={(event) => onMouseEnter(event, ExtendedMenuOption)} onMouseLeave={(event) => onMouseLeave(event, ExtendedMenuOption)}>\n          <IconButton ref={menuButtonRef} variant={'secondary'} shape={'circular'} action={() => {}}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <SubMenu\n            activeItemId={activeItem}\n            onItemStateChanged={(item, state) => {\n              if (state)\n                setActiveItemId(item);\n              else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={{ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }}\n            topLevel={true}\n            index={0}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n          />\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MainMenu.js","names":["React","NavLink","styled","NavItem","SystemIcons","COLORS","BREAKPOINTS","Menu","SubMenu","IconButton","defaultOnMouseDownHandler","NavItemDiv","checkIfContainsItem","NavContainer","div","MEDIUM","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","SubMenuWrapper","topLevel","ExtendedMenuOption","MainMenu","items","rightSideRef","menuButtonRef","useRef","dropdownMenusOpenedArray","mainMenuRef","useState","numberOfItemsAllowed","setNumberOfItemsAllowed","subMenuRefs","setAllSubMenuRefs","extendedMenuOptionRef","createRef","useEffect","map","x","type","undefined","forceUpdate","activeItem","setActiveItemId","focusedItemId","setFocusedItemId","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","onMouseLeave","event","id","filter","onMouseEnter","existingRefForId","find","window","addEventListener","removeEventListener","length","onFocus","onKeyDownTop","key","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","e","existingRef","onClick","onKeyDown","code","containsActiveItem","position","Boolean","state","extended","extendedSectionKeyHandler","stopPropagation","slice","console","log"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NavItem } from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport { COLORS, BREAKPOINTS } from '../../styles';\nimport { Menu } from './ExtendedMainMenu';\nimport { SubMenu } from './SubMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { NavItemDiv } from '../../NavItem/NavItem';\nimport { checkIfContainsItem } from '../utils';\n\nconst NavContainer = styled.div`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n  \n  ${NavItemDiv} {\n    cursor: pointer;\n  }\n  ${BREAKPOINTS.LARGE} {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\nconst SubMenuWrapper = styled.div<{ topLevel: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nconst ExtendedMenuOption = 'extendedOption';\n\ntype Props = {\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ items, rightSideRef }: Props): React.ReactElement<Props> => {\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  //we have to use refs instead of 'state' here, because when onmouseleave is triggered for multiple nested divs, state update is not being updated in between\n  const dropdownMenusOpenedArray = React.useRef<string[]>([]);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n  const extendedMenuOptionRef = React.createRef<HTMLUListElement>();\n\n  React.useEffect(() => {\n    setAllSubMenuRefs(items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [items]);\n\n  const [, forceUpdate] = React.useState({});\n  const [activeItem, setActiveItemId] = React.useState<string>('');\n  const [focusedItemId, setFocusedItemId] = React.useState<string>('');\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    forceUpdate({});\n  };\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      forceUpdate({});\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length]);\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    //no open dropdowns if top level was entered\n    dropdownMenusOpenedArray.current = [];\n    forceUpdate({});\n  };\n\n  const onKeyDownTop = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape' || event.key === 'Esc') {\n      dropdownMenusOpenedArray.current = [];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup, index: number) => {\n    if (index > numberOfItemsAllowed - 2) return null;\n    if (item.type != 'desktopgroup') {\n      const { icon, to, exact, disabled, external, action, label, note, pinned, ...rest } = item as MenuNavigationItemTypeItem;\n      return item?.disabled ? (\n        <NavItem as={NavButton} className=\"disabled\" key={item.label} onMouseDown={defaultOnMouseDownHandler}>\n          {item?.label}\n        </NavItem>\n      ) : (\n        <NavItem as={NavLink} onFocus={onFocus} to={to || ''} key={label} onMouseDown={defaultOnMouseDownHandler} onClick={(e: React.MouseEvent) => action && action(e)} {...rest}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n      const onClick = () => {\n        if (existingRef == null) {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      };\n      const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key == 'Enter' || event.code == 'Space') {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        } \n      };\n\n      const containsActiveItem = checkIfContainsItem(item, activeItem);\n      return (\n        <div\n          style={{ position: 'relative' }}\n          onMouseEnter={(event) => onMouseEnter(event, item.id ?? '')}\n          onMouseLeave={(event) => onMouseLeave(event, item.id ?? '')}>\n          <NavItem\n            id={item.id + '_parentOption'}\n            aria-expanded={Boolean(existingRef)}\n            aria-activedescendant={containsActiveItem ? activeItem : ''}\n            aria-controls={item.id}\n            role=\"listbox\"\n            onFocus={onFocus}\n            onKeyDown={onKeyDown}\n            tabIndex={0}\n            className={existingRef != null || checkIfContainsItem(item, activeItem) ? 'active' : ''}\n            key={item.label}\n            to={null}\n            onClick={onClick}>\n            {item?.label} <SystemIcons.ArrowDropDown size=\"24px\" />\n          </NavItem>\n          <SubMenu\n            ariaLabelledBy={item.id + '_parentOption'}\n            ref={subMenuRefs[index]}\n            onItemFocused={setFocusedItemId}\n            focusedItemId={focusedItemId}\n            activeItemId={activeItem}\n            nestPath={[item.id]}\n            onItemStateChanged={(item, state) => {\n              if (state) {\n                setActiveItemId(item);\n              } else if (item == activeItem) setActiveItemId('');\n            }}\n            item={item as MenuNavigationItemTypeDesktopGroup}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n            index={index + 1}\n            topLevel={true}\n          />\n        </div>\n      );\n    }\n  };\n\n\n  const extended = dropdownMenusOpenedArray.current.find((x) => x == ExtendedMenuOption);\n  const extendedSectionKeyHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key == 'Enter' || event.code == 'Space') {\n      event.stopPropagation();\n\n      dropdownMenusOpenedArray.current = [ExtendedMenuOption];\n      forceUpdate({});\n    }\n  };\n\n  return (\n    <NavContainer role=\"navigation\" className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} onKeyDown={onKeyDownTop}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection\n          onKeyDown={(event) => extendedSectionKeyHandler(event)}\n          onMouseEnter={(event) => onMouseEnter(event, ExtendedMenuOption)}\n          onMouseLeave={(event) => onMouseLeave(event, ExtendedMenuOption)}>\n          <IconButton\n            id={ExtendedMenuOption + '_parentOption'}\n            aria-expanded={Boolean(extended)}\n            aria-activedescendant={checkIfContainsItem({ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }, activeItem) ? activeItem : ''}\n            aria-controls={ExtendedMenuOption}\n            role=\"listbox\"\n            \n            ref={menuButtonRef} variant={'secondary'} shape={'circular'} action={() => {}}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <SubMenu\n            ariaLabelledBy={ExtendedMenuOption + '_parentOption'}\n            activeItemId={activeItem}\n            onItemFocused={setFocusedItemId}\n            focusedItemId={focusedItemId}\n            ref={extendedMenuOptionRef}\n            onItemStateChanged={(item, state) => {\n              console.log(item);\n              console.log(state);\n              if (state) setActiveItemId(item);\n              else if (item == activeItem) setActiveItemId('');\n            }}\n            nestPath={[ExtendedMenuOption]}\n            item={{ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }}\n            topLevel={true}\n            index={0}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n          />\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}