@laerdal/life-react-components 5.0.8-dev.1.full → 5.0.8-dev.2.full

package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs

@@ -1,12 +1,10 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flowDown = exports["default"] = exports.MenuSectionList = exports.MenuSection = exports.Menu = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.flowDown = exports.default = exports.MenuSectionList = exports.MenuSection = exports.Menu = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
@@ -16,40 +14,31 @@ var _Tabs = require("../../Tabs");
 var _index = require("../../index");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-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\n  &:focus {\n    ", "\n  }\n"])), function (props) {
-  return _styles.COLORS.getColor('white', props.theme);
-}, 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"])), function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-});
-exports.MenuSection = MenuSection;
-var MenuSectionList = _styledComponents["default"].ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"])));
-exports.MenuSectionList = MenuSectionList;
-var ExtendedMainMenu = function ExtendedMainMenu(_ref) {
-  var clickMenuAction = _ref.clickMenuAction,
-    navigationOptions = _ref.navigationOptions;
-  var _React$useState = React.useState([]),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    entries = _React$useState2[0],
-    setEntries = _React$useState2[1];
-  React.useEffect(function () {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const flowDown = exports.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"])));
+const Menu = exports.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"])), props => _styles.COLORS.getColor('white', props.theme), flowDown, flowDown, _styles.Z_INDEXES.dropdown, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM, _styles.focusStyles);
+const MenuSection = exports.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"])), props => _styles.COLORS.getColor('neutral_100', props.theme));
+const MenuSectionList = exports.MenuSectionList = _styledComponents.default.ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"])));
+const ExtendedMainMenu = _ref => {
+  let {
+    clickMenuAction,
+    navigationOptions
+  } = _ref;
+  const [entries, setEntries] = React.useState([]);
+  React.useEffect(() => {
     function handleKeyPress(e) {
       if (e.keyCode === 27) {
         clickMenuAction();
       }
     }
     document.addEventListener('keydown', handleKeyPress, false);
-    return function () {
+    return () => {
       document.removeEventListener('keydown', handleKeyPress, false);
     };
   }, [clickMenuAction]);
-  React.useEffect(function () {
-    var list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (n) {
+  React.useEffect(() => {
+    const list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(n => {
       return {
         requiredLine: n.label,
         to: n.to,
@@ -75,9 +64,8 @@ var ExtendedMainMenu = function ExtendedMainMenu(_ref) {
   });
 };
 ExtendedMainMenu.propTypes = {
-  clickMenuAction: _propTypes["default"].func.isRequired,
-  navigationOptions: _propTypes["default"].array.isRequired
+  clickMenuAction: _propTypes.default.func.isRequired,
+  navigationOptions: _propTypes.default.array.isRequired
 };
-var _default = ExtendedMainMenu;
-exports["default"] = _default;
+var _default = exports.default = ExtendedMainMenu;
 //# sourceMappingURL=ExtendedMainMenu.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExtendedMainMenu.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_Tabs","_index","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","flowDown","keyframes","_taggedTemplateLiteral2","exports","Menu","styled","ul","props","COLORS","getColor","theme","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","focusStyles","MenuSection","li","MenuSectionList","ExtendedMainMenu","_ref","clickMenuAction","navigationOptions","_React$useState","useState","_React$useState2","_slicedToArray2","entries","setEntries","useEffect","handleKeyPress","keyCode","document","addEventListener","removeEventListener","list","map","requiredLine","label","to","disabled","onClick","action","exact","jsx","role","children","VerticalTabs","size","Size","Medium","propTypes","_propTypes","func","isRequired","array","_default"],"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: ${props => COLORS.getColor('white', props.theme)};\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: ${props => COLORS.getColor('neutral_100', props.theme)};\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  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":"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","ignoreList":[]}
+{"version":3,"file":"ExtendedMainMenu.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_Tabs","_index","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","flowDown","exports","keyframes","_taggedTemplateLiteral2","Menu","styled","ul","props","COLORS","getColor","theme","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","focusStyles","MenuSection","li","MenuSectionList","ExtendedMainMenu","_ref","clickMenuAction","navigationOptions","entries","setEntries","useState","useEffect","handleKeyPress","keyCode","document","addEventListener","removeEventListener","list","map","requiredLine","label","to","disabled","onClick","action","exact","jsx","role","children","VerticalTabs","size","Size","Medium","propTypes","_propTypes","func","isRequired","array","_default"],"sources":["../../../src/GlobalNavigationBar/desktop/ExtendedMainMenu.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { keyframes } from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../../styles';\r\nimport { VerticalTabs } from '../../Tabs';\r\nimport { VerticalTabEntry } from '../../Tabs';\r\nimport {MenuNavigationItemTypeItem, Size} from '../../index';\r\nimport {Z_INDEXES} from '../../styles';\r\n\r\nexport const flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\r\n\r\nexport const Menu = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  display: none;\r\n  right: -8px;\r\n  min-width: 300px;\r\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\r\n  animation: ${flowDown} 0.2s ease-in-out;\r\n  position: absolute;\r\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  z-index: ${Z_INDEXES.dropdown};\r\n\r\n  top: 12px;\r\n  ${BREAKPOINTS.SMALL} {\r\n    top: 18px;\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    top: 24px;\r\n  }\r\n\r\n  .open & {\r\n    display: block;\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const MenuSection = styled.li`\r\n  padding: 8px 0;\r\n  position: relative;\r\n\r\n  &:not(:first-of-type)::before {\r\n    content: '';\r\n    position: absolute;\r\n    background: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    height: 1px;\r\n    top: 0;\r\n    left: 16px;\r\n    right: 16px;\r\n  }\r\n`;\r\n\r\nexport const MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0 2px;\r\n`;\r\n\r\ntype Props = {\r\n  clickMenuAction: () => void;\r\n  navigationOptions: MenuNavigationItemTypeItem[];\r\n};\r\n\r\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\r\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\r\n  React.useEffect(() => {\r\n    function handleKeyPress(e: any) {\r\n      if (e.keyCode === 27) {\r\n        clickMenuAction();\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyPress, false);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyPress, false);\r\n    };\r\n  }, [clickMenuAction]);\r\n\r\n  React.useEffect(() => {\r\n    const list = navigationOptions?.map(n => {\r\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.action, exact: n.exact };\r\n    }) as VerticalTabEntry[];\r\n    setEntries(list);\r\n  }, [navigationOptions]);\r\n\r\n  return (\r\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\r\n      <MenuSection>\r\n        <MenuSectionList>\r\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\r\n        </MenuSectionList>\r\n      </MenuSection>\r\n    </Menu>\r\n  );\r\n};\r\n\r\nexport default ExtendedMainMenu;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { MenuNavigationItemTypeItem } from '../../index';
-export declare const flowDown: import("styled-components/dist/models/Keyframes").default;
-export declare const Menu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export declare const MenuSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const MenuSectionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-type Props = {
-    clickMenuAction: () => void;
-    navigationOptions: MenuNavigationItemTypeItem[];
-};
-declare const ExtendedMainMenu: ({ clickMenuAction, navigationOptions }: Props) => React.JSX.Element;
-export default ExtendedMainMenu;
+import * as React from 'react';
+import { MenuNavigationItemTypeItem } from '../../index';
+export declare const flowDown: import("styled-components/dist/models/Keyframes").default;
+export declare const Menu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const MenuSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const MenuSectionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+type Props = {
+    clickMenuAction: () => void;
+    navigationOptions: MenuNavigationItemTypeItem[];
+};
+declare const ExtendedMainMenu: ({ clickMenuAction, navigationOptions }: Props) => React.JSX.Element;
+export default ExtendedMainMenu;

package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -9,34 +8,29 @@ 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\n  &:focus {\n    ", "\n  }\n"])), function (props) {
-  return COLORS.getColor('white', props.theme);
-}, 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"])), function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-});
-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) {
-  var clickMenuAction = _ref.clickMenuAction,
-    navigationOptions = _ref.navigationOptions;
-  var _React$useState = React.useState([]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    entries = _React$useState2[0],
-    setEntries = _React$useState2[1];
-  React.useEffect(function () {
+export const 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 const 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"])), props => COLORS.getColor('white', props.theme), flowDown, flowDown, Z_INDEXES.dropdown, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM, focusStyles);
+export const 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"])), props => COLORS.getColor('neutral_100', props.theme));
+export const MenuSectionList = styled.ul(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"])));
+const ExtendedMainMenu = _ref => {
+  let {
+    clickMenuAction,
+    navigationOptions
+  } = _ref;
+  const [entries, setEntries] = React.useState([]);
+  React.useEffect(() => {
     function handleKeyPress(e) {
       if (e.keyCode === 27) {
         clickMenuAction();
       }
     }
     document.addEventListener('keydown', handleKeyPress, false);
-    return function () {
+    return () => {
       document.removeEventListener('keydown', handleKeyPress, false);
     };
   }, [clickMenuAction]);
-  React.useEffect(function () {
-    var list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (n) {
+  React.useEffect(() => {
+    const list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(n => {
       return {
         requiredLine: n.label,
         to: n.to,

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

@@ -1 +1 @@
-{"version":3,"file":"ExtendedMainMenu.js","names":["React","styled","keyframes","BREAKPOINTS","COLORS","focusStyles","VerticalTabs","Size","Z_INDEXES","jsx","_jsx","flowDown","_templateObject","_taggedTemplateLiteral","Menu","ul","_templateObject2","props","getColor","theme","dropdown","SMALL","MEDIUM","MenuSection","li","_templateObject3","MenuSectionList","_templateObject4","ExtendedMainMenu","_ref","clickMenuAction","navigationOptions","_React$useState","useState","_React$useState2","_slicedToArray","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","action","exact","role","children","size","Medium","propTypes","_pt","func","isRequired","array"],"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: ${props => COLORS.getColor('white', props.theme)};\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: ${props => COLORS.getColor('neutral_100', props.theme)};\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  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,SAAAC,GAAA,IAAAC,IAAA;AAEvC,OAAO,IAAMC,QAAQ,GAAGT,SAAS,CAAAU,eAAA,KAAAA,eAAA,GAAAC,sBAAA,wIAShC;AAED,OAAO,IAAMC,IAAI,GAAGb,MAAM,CAACc,EAAE,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,igBAIP,UAAAI,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAK7CR,QAAQ,EAChBA,QAAQ,EAIVH,SAAS,CAACY,QAAQ,EAG3BjB,WAAW,CAACkB,KAAK,EAGjBlB,WAAW,CAACmB,MAAM,EAShBjB,WAAW,CAEhB;AAED,OAAO,IAAMkB,WAAW,GAAGtB,MAAM,CAACuB,EAAE,CAAAC,gBAAA,KAAAA,gBAAA,GAAAZ,sBAAA,mOAOlB,UAAAI,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAMrE;AAED,OAAO,IAAMO,eAAe,GAAGzB,MAAM,CAACc,EAAE,CAAAY,gBAAA,KAAAA,gBAAA,GAAAd,sBAAA,gEAIvC;AAOD,IAAMe,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAAsD;EAAA,IAAhDC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IAAEC,iBAAiB,GAAAF,IAAA,CAAjBE,iBAAiB;EAC5D,IAAAC,eAAA,GAA8BhC,KAAK,CAACiC,QAAQ,CAAqB,EAAE,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA7DI,OAAO,GAAAF,gBAAA;IAAEG,UAAU,GAAAH,gBAAA;EAC1BlC,KAAK,CAACsC,SAAS,CAAC,YAAM;IACpB,SAASC,cAAcA,CAACC,CAAM,EAAE;MAC9B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,EAAE;QACpBX,eAAe,CAAC,CAAC;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;EAErB9B,KAAK,CAACsC,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,oBACErB,IAAA,CAACI,IAAI;IAACsC,OAAO,EAAEtB,eAAgB;IAACyB,IAAI,EAAC,MAAM;IAAC,mBAAgB,gBAAgB;IAAAC,QAAA,eAC1E9C,IAAA,CAACa,WAAW;MAAAiC,QAAA,eACV9C,IAAA,CAACgB,eAAe;QAAA8B,QAAA,eACd9C,IAAA,CAACJ,YAAY;UAAoB8B,OAAO,EAAEA,OAAQ;UAACqB,IAAI,EAAElD,IAAI,CAACmD;QAAO,GAAnD,cAAqD;MAAC,CACzD;IAAC,CACP;EAAC,CACV,CAAC;AAEX,CAAC;AAAC9B,gBAAA,CAAA+B,SAAA;EAnCA7B,eAAe,EAAA8B,GAAA,CAAAC,IAAA,CAAAC,UAAA;EACf/B,iBAAiB,EAAA6B,GAAA,CAAAG,KAAA,CAAAD;AAAA;AAoCnB,eAAelC,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ExtendedMainMenu.js","names":["React","styled","keyframes","BREAKPOINTS","COLORS","focusStyles","VerticalTabs","Size","Z_INDEXES","jsx","_jsx","flowDown","_templateObject","_taggedTemplateLiteral","Menu","ul","_templateObject2","props","getColor","theme","dropdown","SMALL","MEDIUM","MenuSection","li","_templateObject3","MenuSectionList","_templateObject4","ExtendedMainMenu","_ref","clickMenuAction","navigationOptions","entries","setEntries","useState","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","action","exact","role","children","size","Medium","propTypes","_pt","func","isRequired","array"],"sources":["../../../src/GlobalNavigationBar/desktop/ExtendedMainMenu.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { keyframes } from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../../styles';\r\nimport { VerticalTabs } from '../../Tabs';\r\nimport { VerticalTabEntry } from '../../Tabs';\r\nimport {MenuNavigationItemTypeItem, Size} from '../../index';\r\nimport {Z_INDEXES} from '../../styles';\r\n\r\nexport const flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\r\n\r\nexport const Menu = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  display: none;\r\n  right: -8px;\r\n  min-width: 300px;\r\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\r\n  animation: ${flowDown} 0.2s ease-in-out;\r\n  position: absolute;\r\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  z-index: ${Z_INDEXES.dropdown};\r\n\r\n  top: 12px;\r\n  ${BREAKPOINTS.SMALL} {\r\n    top: 18px;\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    top: 24px;\r\n  }\r\n\r\n  .open & {\r\n    display: block;\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const MenuSection = styled.li`\r\n  padding: 8px 0;\r\n  position: relative;\r\n\r\n  &:not(:first-of-type)::before {\r\n    content: '';\r\n    position: absolute;\r\n    background: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    height: 1px;\r\n    top: 0;\r\n    left: 16px;\r\n    right: 16px;\r\n  }\r\n`;\r\n\r\nexport const MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0 2px;\r\n`;\r\n\r\ntype Props = {\r\n  clickMenuAction: () => void;\r\n  navigationOptions: MenuNavigationItemTypeItem[];\r\n};\r\n\r\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\r\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\r\n  React.useEffect(() => {\r\n    function handleKeyPress(e: any) {\r\n      if (e.keyCode === 27) {\r\n        clickMenuAction();\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyPress, false);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyPress, false);\r\n    };\r\n  }, [clickMenuAction]);\r\n\r\n  React.useEffect(() => {\r\n    const list = navigationOptions?.map(n => {\r\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.action, exact: n.exact };\r\n    }) as VerticalTabEntry[];\r\n    setEntries(list);\r\n  }, [navigationOptions]);\r\n\r\n  return (\r\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\r\n      <MenuSection>\r\n        <MenuSectionList>\r\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\r\n        </MenuSectionList>\r\n      </MenuSection>\r\n    </Menu>\r\n  );\r\n};\r\n\r\nexport default ExtendedMainMenu;\r\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,SAAAC,GAAA,IAAAC,IAAA;AAEvC,OAAO,MAAMC,QAAQ,GAAGT,SAAS,CAAAU,eAAA,KAAAA,eAAA,GAAAC,sBAAA,wIAShC;AAED,OAAO,MAAMC,IAAI,GAAGb,MAAM,CAACc,EAAE,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,igBAIPI,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,EAK7CR,QAAQ,EAChBA,QAAQ,EAIVH,SAAS,CAACY,QAAQ,EAG3BjB,WAAW,CAACkB,KAAK,EAGjBlB,WAAW,CAACmB,MAAM,EAShBjB,WAAW,CAEhB;AAED,OAAO,MAAMkB,WAAW,GAAGtB,MAAM,CAACuB,EAAE,CAAAC,gBAAA,KAAAA,gBAAA,GAAAZ,sBAAA,mOAOlBI,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAMrE;AAED,OAAO,MAAMO,eAAe,GAAGzB,MAAM,CAACc,EAAE,CAAAY,gBAAA,KAAAA,gBAAA,GAAAd,sBAAA,gEAIvC;AAOD,MAAMe,gBAAgB,GAAGC,IAAA,IAAmD;EAAA,IAAlD;IAAEC,eAAe;IAAEC;EAAyB,CAAC,GAAAF,IAAA;EACrE,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGjC,KAAK,CAACkC,QAAQ,CAAqB,EAAE,CAAC;EACpElC,KAAK,CAACmC,SAAS,CAAC,MAAM;IACpB,SAASC,cAAcA,CAACC,CAAM,EAAE;MAC9B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,EAAE;QACpBR,eAAe,CAAC,CAAC;MACnB;IACF;IAEAS,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,cAAc,EAAE,KAAK,CAAC;IAC3D,OAAO,MAAM;MACXG,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,cAAc,EAAE,KAAK,CAAC;IAChE,CAAC;EACH,CAAC,EAAE,CAACN,eAAe,CAAC,CAAC;EAErB9B,KAAK,CAACmC,SAAS,CAAC,MAAM;IACpB,MAAMO,IAAI,GAAGX,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEY,GAAG,CAACC,CAAC,IAAI;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;IACxBlB,UAAU,CAACS,IAAI,CAAC;EAClB,CAAC,EAAE,CAACX,iBAAiB,CAAC,CAAC;EAEvB,oBACErB,IAAA,CAACI,IAAI;IAACmC,OAAO,EAAEnB,eAAgB;IAACsB,IAAI,EAAC,MAAM;IAAC,mBAAgB,gBAAgB;IAAAC,QAAA,eAC1E3C,IAAA,CAACa,WAAW;MAAA8B,QAAA,eACV3C,IAAA,CAACgB,eAAe;QAAA2B,QAAA,eACd3C,IAAA,CAACJ,YAAY;UAAoB0B,OAAO,EAAEA,OAAQ;UAACsB,IAAI,EAAE/C,IAAI,CAACgD;QAAO,GAAnD,cAAqD;MAAC,CACzD;IAAC,CACP;EAAC,CACV,CAAC;AAEX,CAAC;AAAC3B,gBAAA,CAAA4B,SAAA;EAnCA1B,eAAe,EAAA2B,GAAA,CAAAC,IAAA,CAAAC,UAAA;EACf5B,iBAAiB,EAAA0B,GAAA,CAAAG,KAAA,CAAAD;AAAA;AAoCnB,eAAe/B,gBAAgB","ignoreList":[]}

package/dist/GlobalNavigationBar/desktop/MainMenu.cjs

@@ -1,15 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
@@ -24,115 +21,97 @@ var _common = require("../../common");
 var _NavItem2 = require("../../NavItem/NavItem");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["icon", "to", "exact", "disabled", "external", "action", "label", "note", "pinned"];
+const _excluded = ["icon", "to", "exact", "disabled", "external", "action", "label", "note", "pinned"];
 var _templateObject, _templateObject2, _templateObject3;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var NavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ", " {\n    display: flex;\n  }\n  \n  ", " {\n    cursor: pointer;\n  }\n  ", " {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM, _NavItem2.NavItemDiv, _styles.BREAKPOINTS.LARGE);
-var NavButton = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background: ", ";\n  border: 0;\n"])), function (props) {
-  return _styles.COLORS.getColor('white', props.theme);
-});
-var ExtendedSection = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n"])));
-var ExtendedMenuOption = 'extendedOption';
-var MainMenu = function MainMenu(_ref) {
-  var items = _ref.items,
-    rightSideRef = _ref.rightSideRef;
-  var menuButtonRef = React.useRef(null);
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ", " {\n    display: flex;\n  }\n  \n  ", " {\n    cursor: pointer;\n  }\n  ", " {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM, _NavItem2.NavItemDiv, _styles.BREAKPOINTS.LARGE);
+const NavButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 0;\n"])), props => _styles.COLORS.getColor('white', props.theme));
+const ExtendedSection = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+const ExtendedMenuOption = 'extendedOption';
+const MainMenu = _ref => {
+  let {
+    items,
+    rightSideRef
+  } = _ref;
+  const menuButtonRef = React.useRef(null);
   //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
-  var dropdownMenusOpenedArray = React.useRef([]);
-  var mainMenuRef = React.useRef(null);
-  var _React$useState = React.useState(1),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    numberOfItemsAllowed = _React$useState2[0],
-    setNumberOfItemsAllowed = _React$useState2[1];
-  var _React$useState3 = React.useState([]),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    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;
-    }));
+  const dropdownMenusOpenedArray = React.useRef([]);
+  const mainMenuRef = React.useRef(null);
+  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState(1);
+  const [subMenuRefs, setAllSubMenuRefs] = React.useState([]);
+  const extendedMenuOptionRef = /*#__PURE__*/React.createRef();
+  React.useEffect(() => {
+    setAllSubMenuRefs(items.map(x => x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : undefined));
   }, [items]);
-  var _React$useState5 = React.useState({}),
-    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
-    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() {
+  const [, forceUpdate] = React.useState({});
+  const [activeItem, setActiveItemId] = React.useState('');
+  const [focusedItemId, setFocusedItemId] = React.useState('');
+  const widthOfItem = 120;
+  const recalculateNumberOfItemsAllowed = () => {
     if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
       var _rightSideRef$current, _mainMenuRef$current;
-      var number = Math.floor(((rightSideRef === null || rightSideRef === void 0 ? void 0 : (_rightSideRef$current = rightSideRef.current) === null || _rightSideRef$current === void 0 ? void 0 : _rightSideRef$current.offsetLeft) - (mainMenuRef === null || mainMenuRef === void 0 ? void 0 : (_mainMenuRef$current = mainMenuRef.current) === null || _mainMenuRef$current === void 0 ? void 0 : _mainMenuRef$current.offsetLeft)) / widthOfItem);
+      const number = Math.floor(((rightSideRef === null || rightSideRef === void 0 || (_rightSideRef$current = rightSideRef.current) === null || _rightSideRef$current === void 0 ? void 0 : _rightSideRef$current.offsetLeft) - (mainMenuRef === null || mainMenuRef === void 0 || (_mainMenuRef$current = mainMenuRef.current) === null || _mainMenuRef$current === void 0 ? void 0 : _mainMenuRef$current.offsetLeft)) / widthOfItem);
       if (number !== numberOfItemsAllowed) {
         setNumberOfItemsAllowed(number);
       }
     }
   };
-  var _onMouseLeave = function onMouseLeave(event, id) {
-    dropdownMenusOpenedArray.current = (0, _toConsumableArray2["default"])(dropdownMenusOpenedArray.current.filter(function (x) {
-      return x != id;
-    }));
+  const onMouseLeave = (event, id) => {
+    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter(x => x != id)];
     //just trigger rerendering
     forceUpdate({});
   };
-  var _onMouseEnter = function onMouseEnter(event, id) {
-    var existingRefForId = dropdownMenusOpenedArray.current.find(function (x) {
-      return x == id;
-    });
+  const onMouseEnter = (event, id) => {
+    const existingRefForId = dropdownMenusOpenedArray.current.find(x => x == id);
     if (existingRefForId == null) {
-      dropdownMenusOpenedArray.current = [].concat((0, _toConsumableArray2["default"])(dropdownMenusOpenedArray.current), [id]);
+      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];
       //just trigger rerendering
       forceUpdate({});
     }
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     recalculateNumberOfItemsAllowed();
     // Bind the event listener
     window.addEventListener('resize', recalculateNumberOfItemsAllowed);
-    return function () {
+    return () => {
       // Unbind the event listener on clean up
       window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
     };
   }, []);
-  React.useEffect(function () {
+  React.useEffect(() => {
     recalculateNumberOfItemsAllowed();
   }, [items.length]);
-  var onFocus = function onFocus(event) {
+  const onFocus = event => {
     //no open dropdowns if top level was entered
     dropdownMenusOpenedArray.current = [];
     forceUpdate({});
   };
-  var onKeyDownTop = function onKeyDownTop(event) {
+  const onKeyDownTop = event => {
     if (event.key === 'Escape' || event.key === 'Esc') {
       dropdownMenusOpenedArray.current = [];
       //just trigger rerendering
       forceUpdate({});
     }
   };
-  var renderItem = function renderItem(item, index) {
+  const renderItem = (item, index) => {
     if (index > numberOfItemsAllowed - 2) return null;
     if (item.type != 'desktopgroup') {
-      var _ref2 = item,
-        icon = _ref2.icon,
-        to = _ref2.to,
-        exact = _ref2.exact,
-        disabled = _ref2.disabled,
-        external = _ref2.external,
-        action = _ref2.action,
-        label = _ref2.label,
-        note = _ref2.note,
-        pinned = _ref2.pinned,
-        rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+      const _ref2 = item,
+        {
+          icon,
+          to,
+          exact,
+          disabled,
+          external,
+          action,
+          label,
+          note,
+          pinned
+        } = _ref2,
+        rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
       return item !== null && item !== void 0 && item.disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
         as: NavButton,
         className: "disabled",
@@ -143,42 +122,38 @@ var MainMenu = function MainMenu(_ref) {
         onFocus: onFocus,
         to: to || '',
         onMouseDown: _common.defaultOnMouseDownHandler,
-        onClick: function onClick(e) {
-          return action && action(e);
-        }
+        onClick: e => action && action(e)
       }, rest), {}, {
         children: item === null || item === void 0 ? void 0 : item.label
       }), label);
     } else {
-      var existingRef = dropdownMenusOpenedArray.current.find(function (x) {
-        return x == item.id;
-      });
-      var onClick = function onClick() {
+      const existingRef = dropdownMenusOpenedArray.current.find(x => x == item.id);
+      const onClick = () => {
         if (existingRef == null) {
-          dropdownMenusOpenedArray.current = [].concat((0, _toConsumableArray2["default"])(dropdownMenusOpenedArray.current), [item.id]);
+          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];
           //just trigger rerendering
           forceUpdate({});
         }
       };
-      var onKeyDown = function onKeyDown(event) {
+      const onKeyDown = event => {
         if (event.key == 'Enter' || event.code == 'Space') {
-          dropdownMenusOpenedArray.current = [].concat((0, _toConsumableArray2["default"])(dropdownMenusOpenedArray.current), [item.id]);
+          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];
           //just trigger rerendering
           forceUpdate({});
         }
       };
-      var containsActiveItem = (0, _utils.checkIfContainsItem)(item, activeItem);
+      const containsActiveItem = (0, _utils.checkIfContainsItem)(item, activeItem);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         style: {
           position: 'relative'
         },
-        onMouseEnter: function onMouseEnter(event) {
+        onMouseEnter: event => {
           var _item$id;
-          return _onMouseEnter(event, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : '');
+          return onMouseEnter(event, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : '');
         },
-        onMouseLeave: function onMouseLeave(event) {
+        onMouseLeave: event => {
           var _item$id2;
-          return _onMouseLeave(event, (_item$id2 = item.id) !== null && _item$id2 !== void 0 ? _item$id2 : '');
+          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',
@@ -202,7 +177,7 @@ var MainMenu = function MainMenu(_ref) {
           focusedItemId: focusedItemId,
           activeItemId: activeItem,
           nestPath: [item.id],
-          onItemStateChanged: function onItemStateChanged(item, state) {
+          onItemStateChanged: (item, state) => {
             if (state) {
               setActiveItemId(item);
             } else if (item == activeItem) setActiveItemId('');
@@ -215,10 +190,8 @@ var MainMenu = function MainMenu(_ref) {
       });
     }
   };
-  var extended = dropdownMenusOpenedArray.current.find(function (x) {
-    return x == ExtendedMenuOption;
-  });
-  var extendedSectionKeyHandler = function extendedSectionKeyHandler(event) {
+  const extended = dropdownMenusOpenedArray.current.find(x => x == ExtendedMenuOption);
+  const extendedSectionKeyHandler = event => {
     if (event.key == 'Enter' || event.code == 'Space') {
       event.stopPropagation();
       dropdownMenusOpenedArray.current = [ExtendedMenuOption];
@@ -231,15 +204,9 @@ var MainMenu = function MainMenu(_ref) {
     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);
-      },
-      onMouseLeave: function onMouseLeave(event) {
-        return _onMouseLeave(event, ExtendedMenuOption);
-      },
+      onKeyDown: event => extendedSectionKeyHandler(event),
+      onMouseEnter: event => onMouseEnter(event, ExtendedMenuOption),
+      onMouseLeave: event => onMouseLeave(event, ExtendedMenuOption),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
         id: ExtendedMenuOption + '_parentOption',
         "aria-expanded": Boolean(extended),
@@ -252,7 +219,7 @@ var MainMenu = function MainMenu(_ref) {
         ref: menuButtonRef,
         variant: 'secondary',
         shape: 'circular',
-        action: function action() {},
+        action: () => {},
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.MoreHorizontal, {
           size: "24px"
         })
@@ -262,7 +229,7 @@ var MainMenu = function MainMenu(_ref) {
         onItemFocused: setFocusedItemId,
         focusedItemId: focusedItemId,
         ref: extendedMenuOptionRef,
-        onItemStateChanged: function onItemStateChanged(item, state) {
+        onItemStateChanged: (item, state) => {
           if (state) setActiveItemId(item);else if (item == activeItem) setActiveItemId('');
         },
         nestPath: [ExtendedMenuOption],
@@ -278,8 +245,7 @@ var MainMenu = function MainMenu(_ref) {
   });
 };
 MainMenu.propTypes = {
-  items: _propTypes["default"].array.isRequired
+  items: _propTypes.default.array.isRequired
 };
-var _default = MainMenu;
-exports["default"] = _default;
+var _default = exports.default = MainMenu;
 //# sourceMappingURL=MainMenu.cjs.map