@laerdal/life-react-components 3.5.1-dev.17 → 3.5.1-dev.18

package/dist/GlobalNavigationBar/Avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/Avatar.tsx"],"names":["React","styled","css","COLORS","BREAKPOINTS","LinkStyling","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","div","props","useInteractionStyling","size","AvatarImage","$color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","MEDIUM","hidePadding","Avatar","firstName","lastName","color","e","preventDefault","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { COLORS, BREAKPOINTS } from '../styles';\r\n\r\nconst LinkStyling = css`\r\n  &:focus {\r\n    background: ${COLORS.primary_500};\r\n    outline: none;\r\n  }\r\n  &:focus-within {\r\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n  }\r\n`;\r\n\r\nconst ImageStyling = css`\r\n  &:hover {\r\n    background-color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active {\r\n    background: ${COLORS.primary_800};\r\n  }\r\n`;\r\n\r\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\r\n  text-decoration: none;\r\n\r\n  ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n  &:focus-within {\r\n    border-radius: ${(props) => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\r\n  }\r\n`;\r\n\r\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\r\n  background-color: ${(props) => props.$color};\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: ${(props) => (props.size ? props.size : 48)}px;\r\n  height: ${(props) => (props.size ? props.size : 48)}px;\r\n  width: ${(props) => (props.size ? props.size : 48)}px;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\r\n`;\r\n\r\nconst AvatarLetter = styled.div<{ size: number }>`\r\n  font-size: ${(props) => props.size / 2 - 2}px;\r\n  color: white;\r\n  font-weight: bold;\r\n  text-transform: uppercase;\r\n  display: inline-block;\r\n  line-height: ${(props) => (props.size ? props.size : 48)}px;\r\n`;\r\n\r\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\r\n  flex-direction: column;\r\n  align-self: center;\r\n  margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\r\n  margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\r\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: flex;\r\n    ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\r\n  }\r\n`;\r\n\r\ninterface AvatarProps {\r\n  firstName: string;\r\n  lastName: string;\r\n  size: number;\r\n  color: string;\r\n  profileMenuLink: string;\r\n  useInteractionStyling?: boolean;\r\n}\r\n\r\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\r\n  return (\r\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\r\n      <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\r\n        <AvatarLetter data-hj-suppress size={size}>\r\n          {firstName[0]}\r\n          {lastName[0]}\r\n        </AvatarLetter>\r\n      </AvatarImage>\r\n    </AvatarLink>\r\n  );\r\n};\r\n\r\nexport default Avatar;\r\n"],"file":"Avatar.js"}

package/dist/GlobalNavigationBar/ExtendedMainMenu.cjs

@@ -1,100 +0,0 @@
-"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;
-
-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"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styles = require("../styles");
-
-var _Tabs = require("../Tabs");
-
-var _ = require("..");
-
-var _zIndexes = require("../styles/z-indexes");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var 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"])));
-
-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, _zIndexes.Z_INDEXES.dropdown, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
-
-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\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])), _styles.COLORS.neutral_100);
-
-var MenuSectionList = _styledComponents.default.ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _slicedToArray2.default)(_React$useState, 2),
-      entries = _React$useState2[0],
-      setEntries = _React$useState2[1];
-
-  React.useEffect(function () {
-    function handleKeyPress(e) {
-      if (e.keyCode === 27) {
-        clickMenuAction();
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyPress, false);
-    return function () {
-      document.removeEventListener('keydown', handleKeyPress, false);
-    };
-  }, [clickMenuAction]);
-  React.useEffect(function () {
-    var list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (n) {
-      return {
-        requiredLine: n.label,
-        to: n.to,
-        disabled: n.disabled,
-        onClick: n.onClick,
-        exact: n.exact
-      };
-    });
-    setEntries(list);
-  }, [navigationOptions]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, {
-    onClick: clickMenuAction,
-    role: "menu",
-    "aria-labelledby": "UserMenuButton",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSection, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.VerticalTabs, {
-          entries: entries,
-          size: _.Size.Medium
-        }, "ExtendedMenu")
-      })
-    })
-  });
-};
-
-ExtendedMainMenu.propTypes = {
-  clickMenuAction: _propTypes.default.func.isRequired,
-  navigationOptions: _propTypes.default.array.isRequired
-};
-var _default = ExtendedMainMenu;
-exports.default = _default;
-//# sourceMappingURL=ExtendedMainMenu.cjs.map

package/dist/GlobalNavigationBar/ExtendedMainMenu.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"names":["flowDown","keyframes","Menu","styled","ul","COLORS","white","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","React","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","exact","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAGA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,QAAQ,OAAGC,2BAAH,oNAAd;;AAWA,IAAMC,IAAI,GAAGC,0BAAOC,EAAV,gjBAIYC,eAAOC,KAJnB,EASaN,QATb,EAUKA,QAVL,EAcGO,oBAAUC,QAdb,EAiBNC,oBAAYC,KAjBN,EAoBND,oBAAYE,MApBN,CAAV;;AA6BA,IAAMC,WAAW,GAAGT,0BAAOU,EAAV,oZAOCR,eAAOS,WAPR,CAAjB;;AAqBA,IAAMC,eAAe,GAAGZ,0BAAOC,EAAV,6IAArB;;AAWA,IAAMY,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAmD;AAAA,MAAhDC,eAAgD,QAAhDA,eAAgD;AAAA,MAA/BC,iBAA+B,QAA/BA,iBAA+B;;AAC1E,wBAA8BC,KAAK,CAACC,QAAN,CAAmC,EAAnC,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBT,QAAAA,eAAe;AAChB;AACF;;AAEDU,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACP,eAAD,CAXH;AAaAE,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMO,IAAI,GAAGZ,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEa,GAAnB,CAAuB,UAAAC,CAAC,EAAI;AACvC,aAAO;AAAEC,QAAAA,YAAY,EAAED,CAAC,CAACE,KAAlB;AAAyBC,QAAAA,EAAE,EAAEH,CAAC,CAACG,EAA/B;AAAmCC,QAAAA,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;AAAyDC,QAAAA,OAAO,EAAEL,CAAC,CAACK,OAApE;AAA6EC,QAAAA,KAAK,EAAEN,CAAC,CAACM;AAAtF,OAAP;AACD,KAFY,CAAb;AAGAhB,IAAAA,UAAU,CAACQ,IAAD,CAAV;AACD,GALD,EAKG,CAACZ,iBAAD,CALH;AAOA,sBACE,qBAAC,IAAD;AAAM,IAAA,OAAO,EAAED,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB,gBAA5D;AAAA,2BACE,qBAAC,WAAD;AAAA,6BACE,qBAAC,eAAD;AAAA,+BACE,qBAAC,kBAAD;AAAiC,UAAA,OAAO,EAAEI,OAA1C;AAAmD,UAAA,IAAI,EAAEkB,OAAKC;AAA9D,WAAkB,cAAlB;AADF;AADF;AADF,IADF;AASD,CA/BD;;;AAJEvB,EAAAA,e;AACAC,EAAAA,iB;;eAoCaF,gB","sourcesContent":["import * as React from 'react';\r\nimport styled, { keyframes } from 'styled-components';\r\n\r\nimport { NavOption } from '../types';\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { VerticalTabs } from '../Tabs';\r\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\r\nimport { Size } from '..';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst 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\nconst Menu = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: ${COLORS.white};\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\r\nconst 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: ${COLORS.neutral_100};\r\n    height: 1px;\r\n    top: 0;\r\n    left: 16px;\r\n    right: 16px;\r\n  }\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nconst 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: NavOption[];\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.onClick, 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"],"file":"ExtendedMainMenu.cjs"}

package/dist/GlobalNavigationBar/ExtendedMainMenu.d.ts

@@ -1,7 +0,0 @@
-import { NavOption } from '../types';
-declare type Props = {
-    clickMenuAction: () => void;
-    navigationOptions: NavOption[];
-};
-declare const ExtendedMainMenu: ({ clickMenuAction, navigationOptions }: Props) => JSX.Element;
-export default ExtendedMainMenu;

package/dist/GlobalNavigationBar/ExtendedMainMenu.js

@@ -1,72 +0,0 @@
-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;
-
-import * as React from 'react';
-import styled, { keyframes } from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../styles';
-import { VerticalTabs } from '../Tabs';
-import { Size } from '..';
-import { Z_INDEXES } from '../styles/z-indexes';
-import { jsx as _jsx } from "react/jsx-runtime";
-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"])));
-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);
-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\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])), COLORS.neutral_100);
-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 () {
-    function handleKeyPress(e) {
-      if (e.keyCode === 27) {
-        clickMenuAction();
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyPress, false);
-    return function () {
-      document.removeEventListener('keydown', handleKeyPress, false);
-    };
-  }, [clickMenuAction]);
-  React.useEffect(function () {
-    var list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (n) {
-      return {
-        requiredLine: n.label,
-        to: n.to,
-        disabled: n.disabled,
-        onClick: n.onClick,
-        exact: n.exact
-      };
-    });
-    setEntries(list);
-  }, [navigationOptions]);
-  return /*#__PURE__*/_jsx(Menu, {
-    onClick: clickMenuAction,
-    role: "menu",
-    "aria-labelledby": "UserMenuButton",
-    children: /*#__PURE__*/_jsx(MenuSection, {
-      children: /*#__PURE__*/_jsx(MenuSectionList, {
-        children: /*#__PURE__*/_jsx(VerticalTabs, {
-          entries: entries,
-          size: Size.Medium
-        }, "ExtendedMenu")
-      })
-    })
-  });
-};
-
-ExtendedMainMenu.propTypes = {
-  clickMenuAction: _pt.func.isRequired,
-  navigationOptions: _pt.array.isRequired
-};
-export default ExtendedMainMenu;
-//# sourceMappingURL=ExtendedMainMenu.js.map

package/dist/GlobalNavigationBar/ExtendedMainMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"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","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","exact","Medium"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAiBC,SAAjB,QAAkC,mBAAlC;AAGA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,SAA7B;AAEA,SAASC,IAAT,QAAqB,IAArB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;;AAEA,IAAMC,QAAQ,GAAGN,SAAH,qMAAd;AAWA,IAAMO,IAAI,GAAGR,MAAM,CAACS,EAAV,kiBAIYN,MAAM,CAACO,KAJnB,EASaH,QATb,EAUKA,QAVL,EAcGD,SAAS,CAACK,QAdb,EAiBNT,WAAW,CAACU,KAjBN,EAoBNV,WAAW,CAACW,MApBN,CAAV;AA6BA,IAAMC,WAAW,GAAGd,MAAM,CAACe,EAAV,sYAOCZ,MAAM,CAACa,WAPR,CAAjB;AAqBA,IAAMC,eAAe,GAAGjB,MAAM,CAACS,EAAV,+HAArB;;AAWA,IAAMS,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAmD;AAAA,MAAhDC,eAAgD,QAAhDA,eAAgD;AAAA,MAA/BC,iBAA+B,QAA/BA,iBAA+B;;AAC1E,wBAA8BrB,KAAK,CAACsB,QAAN,CAAmC,EAAnC,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACAxB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBR,QAAAA,eAAe;AAChB;AACF;;AAEDS,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACN,eAAD,CAXH;AAaApB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,YAAM;AACpB,QAAMO,IAAI,GAAGX,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEY,GAAnB,CAAuB,UAAAC,CAAC,EAAI;AACvC,aAAO;AAAEC,QAAAA,YAAY,EAAED,CAAC,CAACE,KAAlB;AAAyBC,QAAAA,EAAE,EAAEH,CAAC,CAACG,EAA/B;AAAmCC,QAAAA,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;AAAyDC,QAAAA,OAAO,EAAEL,CAAC,CAACK,OAApE;AAA6EC,QAAAA,KAAK,EAAEN,CAAC,CAACM;AAAtF,OAAP;AACD,KAFY,CAAb;AAGAhB,IAAAA,UAAU,CAACQ,IAAD,CAAV;AACD,GALD,EAKG,CAACX,iBAAD,CALH;AAOA,sBACE,KAAC,IAAD;AAAM,IAAA,OAAO,EAAED,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB,gBAA5D;AAAA,2BACE,KAAC,WAAD;AAAA,6BACE,KAAC,eAAD;AAAA,+BACE,KAAC,YAAD;AAAiC,UAAA,OAAO,EAAEG,OAA1C;AAAmD,UAAA,IAAI,EAAEjB,IAAI,CAACmC;AAA9D,WAAkB,cAAlB;AADF;AADF;AADF,IADF;AASD,CA/BD;;;AAJErB,EAAAA,e;AACAC,EAAAA,iB;;AAoCF,eAAeF,gBAAf","sourcesContent":["import * as React from 'react';\r\nimport styled, { keyframes } from 'styled-components';\r\n\r\nimport { NavOption } from '../types';\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { VerticalTabs } from '../Tabs';\r\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\r\nimport { Size } from '..';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst 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\nconst Menu = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: ${COLORS.white};\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\r\nconst 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: ${COLORS.neutral_100};\r\n    height: 1px;\r\n    top: 0;\r\n    left: 16px;\r\n    right: 16px;\r\n  }\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nconst 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: NavOption[];\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.onClick, 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"],"file":"ExtendedMainMenu.js"}

package/dist/GlobalNavigationBar/MainMenu.cjs

@@ -1,169 +0,0 @@
-"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;
-
-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"));
-
-var _reactRouterDom = require("react-router-dom");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _NavItem = require("../NavItem");
-
-var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
-var _styles = require("../styles");
-
-var _ExtendedMainMenu = _interopRequireDefault(require("./ExtendedMainMenu"));
-
-var _Button = require("../Button");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
-
-var NavButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 0;\n"])), _styles.COLORS.white);
-
-var ExtendedMenuWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: ", ";\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: ", ";\n  }\n"])), function (props) {
-  return props.floatRight ? 'auto' : 'unset';
-}, _styles.COLORS.white);
-
-var ExtendedSection = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
-
-var MainMenu = function MainMenu(_ref) {
-  var navigationOptions = _ref.navigationOptions,
-      rightSideRef = _ref.rightSideRef;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      showExtendedMenu = _React$useState2[0],
-      setShowExtendedMenu = _React$useState2[1];
-
-  var extendedMenuRef = React.useRef(null);
-  var mainMenuRef = React.useRef(null);
-
-  var _React$useState3 = React.useState(1),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      numberOfItemsAllowed = _React$useState4[0],
-      setNumberOfItemsAllowed = _React$useState4[1];
-
-  var widthOfItem = 150;
-
-  var recalculateNumberOfItemsAllowed = function 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);
-
-      if (number !== numberOfItemsAllowed) {
-        setNumberOfItemsAllowed(number);
-      }
-    }
-  };
-
-  var handleClickExtendedMenuAction = function handleClickExtendedMenuAction() {
-    setShowExtendedMenu(false);
-  };
-
-  var handleClickOutside = function handleClickOutside(e) {
-    var _extendedMenuRef$curr;
-
-    if (extendedMenuRef !== null && extendedMenuRef !== void 0 && extendedMenuRef.current && !(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target))) {
-      if (showExtendedMenu) {
-        setShowExtendedMenu(false);
-      }
-    }
-  };
-
-  React.useEffect(function () {
-    recalculateNumberOfItemsAllowed(); // Bind the event listener
-
-    document.addEventListener('click', handleClickOutside);
-    window.addEventListener('resize', recalculateNumberOfItemsAllowed);
-    return function () {
-      // Unbind the event listener on clean up
-      document.removeEventListener('click', handleClickOutside);
-      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
-    };
-  });
-
-  var preventFocusOnClick = function preventFocusOnClick(e) {
-    e.preventDefault();
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
-    className: "GlobalNavigationMainMenu",
-    ref: mainMenuRef,
-    open: showExtendedMenu,
-    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no, index) {
-      return index > numberOfItemsAllowed - 2 ? null : no !== null && no !== void 0 && no.disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
-        as: NavButton,
-        exact: no === null || no === void 0 ? void 0 : no.exact,
-        className: "disabled",
-        onMouseDown: preventFocusOnClick,
-        onClick: function onClick() {
-          if (no !== null && no !== void 0 && no.onClick) {
-            no === null || no === void 0 ? void 0 : no.onClick();
-          }
-        },
-        children: no === null || no === void 0 ? void 0 : no.label
-      }, no === null || no === void 0 ? void 0 : no.label) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
-        as: _reactRouterDom.NavLink,
-        exact: no === null || no === void 0 ? void 0 : no.exact,
-        to: (no === null || no === void 0 ? void 0 : no.to) || '',
-        onMouseDown: preventFocusOnClick,
-        onClick: function onClick() {
-          if (no !== null && no !== void 0 && no.onClick) {
-            no === null || no === void 0 ? void 0 : no.onClick();
-          }
-        },
-        children: no === null || no === void 0 ? void 0 : no.label
-      }, no === null || no === void 0 ? void 0 : no.label);
-    }), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExtendedSection, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-        variant: 'secondary',
-        shape: 'circular',
-        action: function action() {
-          return setShowExtendedMenu(true);
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.MoreHorizontal, {
-          size: "24px"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExtendedMenuWrapper, {
-        ref: extendedMenuRef,
-        className: showExtendedMenu ? 'open' : '',
-        floatRight: false,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExtendedMainMenu.default, {
-          clickMenuAction: handleClickExtendedMenuAction,
-          navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
-        })
-      })]
-    })]
-  });
-};
-
-MainMenu.propTypes = {
-  navigationOptions: _propTypes.default.array.isRequired
-};
-var _default = MainMenu;
-exports.default = _default;
-//# sourceMappingURL=MainMenu.cjs.map

package/dist/GlobalNavigationBar/MainMenu.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/MainMenu.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","navigationOptions","rightSideRef","React","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","preventFocusOnClick","preventDefault","map","no","index","disabled","exact","onClick","label","NavLink","to","length","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport { NavLink } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\n\r\nimport { NavItem } from '../NavItem';\r\nimport { MoreHorizontal } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS, BREAKPOINTS } from '../styles';\r\nimport { NavOption } from '../types';\r\nimport ExtendedMainMenu from './ExtendedMainMenu';\r\nimport {IconButton} from '../Button';\r\n\r\nconst NavContainer = styled.div<{ open: boolean }>`\r\n  display: none;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: flex;\r\n  }\r\n\r\n  a {\r\n    text-decoration: none;\r\n  }\r\n`;\r\n\r\nconst NavButton = styled.button`\r\n  background: ${COLORS.white};\r\n  border: 0;\r\n`;\r\n\r\ninterface ExtendedMenuWrapperProps {\r\n  floatRight: boolean;\r\n}\r\n\r\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\r\n  display: flex;\r\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\r\n\r\n  position: absolute;\r\n  flex-direction: column;\r\n  left: 290px;\r\n  top: 22px;\r\n\r\n  height: 0;\r\n  width: 0;\r\n\r\n  &:focus-within,\r\n  &:hover,\r\n  &.open {\r\n    background: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst ExtendedSection = styled.div`\r\n  position: relative;\r\n`;\r\n\r\ntype Props = {\r\n  navigationOptions: NavOption[];\r\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\r\n};\r\n\r\nconst MainMenu = ({ navigationOptions, rightSideRef }: Props): React.ReactElement<Props> => {\r\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\r\n  const extendedMenuRef = React.useRef<any>(null);\r\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\r\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\r\n\r\n  const widthOfItem = 150;\r\n  const recalculateNumberOfItemsAllowed = () => {\r\n    if (rightSideRef?.current && mainMenuRef?.current) {\r\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\r\n      if (number !== numberOfItemsAllowed) {\r\n        setNumberOfItemsAllowed(number);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleClickExtendedMenuAction = () => {\r\n    setShowExtendedMenu(false);\r\n  };\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {\r\n      if (showExtendedMenu) {\r\n        setShowExtendedMenu(false);\r\n      }\r\n    }\r\n  };\r\n  React.useEffect(() => {\r\n    recalculateNumberOfItemsAllowed();\r\n    // Bind the event listener\r\n    document.addEventListener('click', handleClickOutside);\r\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\r\n    return () => {\r\n      // Unbind the event listener on clean up\r\n      document.removeEventListener('click', handleClickOutside);\r\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\r\n    };\r\n  });\r\n\r\n  const preventFocusOnClick = (e: any) => {\r\n    e.preventDefault();\r\n  };\r\n\r\n  return (\r\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\r\n      {navigationOptions?.map((no: NavOption, index: number) =>\r\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\r\n          <NavItem\r\n            as={NavButton}\r\n            exact={no?.exact}\r\n            className=\"disabled\"\r\n            key={no?.label}\r\n            onMouseDown={preventFocusOnClick}\r\n            onClick={() => {\r\n              if (no?.onClick) {\r\n                no?.onClick();\r\n              }\r\n            }}>\r\n            {no?.label}\r\n          </NavItem>\r\n        ) : (\r\n          <NavItem\r\n            as={NavLink}\r\n            exact={no?.exact}\r\n            to={no?.to || ''}\r\n            key={no?.label}\r\n            onMouseDown={preventFocusOnClick}\r\n            onClick={() => {\r\n              if (no?.onClick) {\r\n                no?.onClick();\r\n              }\r\n            }}>\r\n            {no?.label}\r\n          </NavItem>\r\n        ),\r\n      )}\r\n      {navigationOptions.length + 1 > numberOfItemsAllowed && (\r\n        <ExtendedSection>\r\n          <IconButton\r\n            variant={'secondary'}\r\n            shape={'circular'}\r\n            action={() => setShowExtendedMenu(true)}>\r\n            <MoreHorizontal size=\"24px\" />\r\n          </IconButton>\r\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\r\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction} navigationOptions={navigationOptions.slice(numberOfItemsAllowed - 1)} />\r\n          </ExtendedMenuWrapper>\r\n        </ExtendedSection>\r\n      )}\r\n    </NavContainer>\r\n  );\r\n};\r\n\r\nexport default MainMenu;\r\n"],"file":"MainMenu.cjs"}

package/dist/GlobalNavigationBar/MainMenu.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { NavOption } from '../types';
-declare type Props = {
-    navigationOptions: NavOption[];
-    rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;
-};
-declare const MainMenu: ({ navigationOptions, rightSideRef }: Props) => React.ReactElement<Props>;
-export default MainMenu;

package/dist/GlobalNavigationBar/MainMenu.js

@@ -1,140 +0,0 @@
-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;
-
-import * as React from 'react';
-import { NavLink } from 'react-router-dom';
-import styled from 'styled-components';
-import { NavItem } from '../NavItem';
-import { MoreHorizontal } from '../icons/systemicons/SystemIcons';
-import { COLORS, BREAKPOINTS } from '../styles';
-import ExtendedMainMenu from './ExtendedMainMenu';
-import { IconButton } from '../Button';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
-var NavButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0;\n"])), COLORS.white);
-var ExtendedMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: ", ";\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: ", ";\n  }\n"])), function (props) {
-  return props.floatRight ? 'auto' : 'unset';
-}, COLORS.white);
-var ExtendedSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-
-var MainMenu = function MainMenu(_ref) {
-  var navigationOptions = _ref.navigationOptions,
-      rightSideRef = _ref.rightSideRef;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      showExtendedMenu = _React$useState2[0],
-      setShowExtendedMenu = _React$useState2[1];
-
-  var extendedMenuRef = React.useRef(null);
-  var mainMenuRef = React.useRef(null);
-
-  var _React$useState3 = React.useState(1),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      numberOfItemsAllowed = _React$useState4[0],
-      setNumberOfItemsAllowed = _React$useState4[1];
-
-  var widthOfItem = 150;
-
-  var recalculateNumberOfItemsAllowed = function 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);
-
-      if (number !== numberOfItemsAllowed) {
-        setNumberOfItemsAllowed(number);
-      }
-    }
-  };
-
-  var handleClickExtendedMenuAction = function handleClickExtendedMenuAction() {
-    setShowExtendedMenu(false);
-  };
-
-  var handleClickOutside = function handleClickOutside(e) {
-    var _extendedMenuRef$curr;
-
-    if (extendedMenuRef !== null && extendedMenuRef !== void 0 && extendedMenuRef.current && !(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target))) {
-      if (showExtendedMenu) {
-        setShowExtendedMenu(false);
-      }
-    }
-  };
-
-  React.useEffect(function () {
-    recalculateNumberOfItemsAllowed(); // Bind the event listener
-
-    document.addEventListener('click', handleClickOutside);
-    window.addEventListener('resize', recalculateNumberOfItemsAllowed);
-    return function () {
-      // Unbind the event listener on clean up
-      document.removeEventListener('click', handleClickOutside);
-      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
-    };
-  });
-
-  var preventFocusOnClick = function preventFocusOnClick(e) {
-    e.preventDefault();
-  };
-
-  return /*#__PURE__*/_jsxs(NavContainer, {
-    className: "GlobalNavigationMainMenu",
-    ref: mainMenuRef,
-    open: showExtendedMenu,
-    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no, index) {
-      return index > numberOfItemsAllowed - 2 ? null : no !== null && no !== void 0 && no.disabled ? /*#__PURE__*/_jsx(NavItem, {
-        as: NavButton,
-        exact: no === null || no === void 0 ? void 0 : no.exact,
-        className: "disabled",
-        onMouseDown: preventFocusOnClick,
-        onClick: function onClick() {
-          if (no !== null && no !== void 0 && no.onClick) {
-            no === null || no === void 0 ? void 0 : no.onClick();
-          }
-        },
-        children: no === null || no === void 0 ? void 0 : no.label
-      }, no === null || no === void 0 ? void 0 : no.label) : /*#__PURE__*/_jsx(NavItem, {
-        as: NavLink,
-        exact: no === null || no === void 0 ? void 0 : no.exact,
-        to: (no === null || no === void 0 ? void 0 : no.to) || '',
-        onMouseDown: preventFocusOnClick,
-        onClick: function onClick() {
-          if (no !== null && no !== void 0 && no.onClick) {
-            no === null || no === void 0 ? void 0 : no.onClick();
-          }
-        },
-        children: no === null || no === void 0 ? void 0 : no.label
-      }, no === null || no === void 0 ? void 0 : no.label);
-    }), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/_jsxs(ExtendedSection, {
-      children: [/*#__PURE__*/_jsx(IconButton, {
-        variant: 'secondary',
-        shape: 'circular',
-        action: function action() {
-          return setShowExtendedMenu(true);
-        },
-        children: /*#__PURE__*/_jsx(MoreHorizontal, {
-          size: "24px"
-        })
-      }), /*#__PURE__*/_jsx(ExtendedMenuWrapper, {
-        ref: extendedMenuRef,
-        className: showExtendedMenu ? 'open' : '',
-        floatRight: false,
-        children: /*#__PURE__*/_jsx(ExtendedMainMenu, {
-          clickMenuAction: handleClickExtendedMenuAction,
-          navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
-        })
-      })]
-    })]
-  });
-};
-
-MainMenu.propTypes = {
-  navigationOptions: _pt.array.isRequired
-};
-export default MainMenu;
-//# sourceMappingURL=MainMenu.js.map

package/dist/GlobalNavigationBar/MainMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/MainMenu.tsx"],"names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","NavContainer","div","MEDIUM","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","navigationOptions","rightSideRef","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","preventFocusOnClick","preventDefault","map","no","index","disabled","exact","onClick","label","to","length","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport { NavLink } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\n\r\nimport { NavItem } from '../NavItem';\r\nimport { MoreHorizontal } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS, BREAKPOINTS } from '../styles';\r\nimport { NavOption } from '../types';\r\nimport ExtendedMainMenu from './ExtendedMainMenu';\r\nimport {IconButton} from '../Button';\r\n\r\nconst NavContainer = styled.div<{ open: boolean }>`\r\n  display: none;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: flex;\r\n  }\r\n\r\n  a {\r\n    text-decoration: none;\r\n  }\r\n`;\r\n\r\nconst NavButton = styled.button`\r\n  background: ${COLORS.white};\r\n  border: 0;\r\n`;\r\n\r\ninterface ExtendedMenuWrapperProps {\r\n  floatRight: boolean;\r\n}\r\n\r\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\r\n  display: flex;\r\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\r\n\r\n  position: absolute;\r\n  flex-direction: column;\r\n  left: 290px;\r\n  top: 22px;\r\n\r\n  height: 0;\r\n  width: 0;\r\n\r\n  &:focus-within,\r\n  &:hover,\r\n  &.open {\r\n    background: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst ExtendedSection = styled.div`\r\n  position: relative;\r\n`;\r\n\r\ntype Props = {\r\n  navigationOptions: NavOption[];\r\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\r\n};\r\n\r\nconst MainMenu = ({ navigationOptions, rightSideRef }: Props): React.ReactElement<Props> => {\r\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\r\n  const extendedMenuRef = React.useRef<any>(null);\r\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\r\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\r\n\r\n  const widthOfItem = 150;\r\n  const recalculateNumberOfItemsAllowed = () => {\r\n    if (rightSideRef?.current && mainMenuRef?.current) {\r\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\r\n      if (number !== numberOfItemsAllowed) {\r\n        setNumberOfItemsAllowed(number);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleClickExtendedMenuAction = () => {\r\n    setShowExtendedMenu(false);\r\n  };\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {\r\n      if (showExtendedMenu) {\r\n        setShowExtendedMenu(false);\r\n      }\r\n    }\r\n  };\r\n  React.useEffect(() => {\r\n    recalculateNumberOfItemsAllowed();\r\n    // Bind the event listener\r\n    document.addEventListener('click', handleClickOutside);\r\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\r\n    return () => {\r\n      // Unbind the event listener on clean up\r\n      document.removeEventListener('click', handleClickOutside);\r\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\r\n    };\r\n  });\r\n\r\n  const preventFocusOnClick = (e: any) => {\r\n    e.preventDefault();\r\n  };\r\n\r\n  return (\r\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\r\n      {navigationOptions?.map((no: NavOption, index: number) =>\r\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\r\n          <NavItem\r\n            as={NavButton}\r\n            exact={no?.exact}\r\n            className=\"disabled\"\r\n            key={no?.label}\r\n            onMouseDown={preventFocusOnClick}\r\n            onClick={() => {\r\n              if (no?.onClick) {\r\n                no?.onClick();\r\n              }\r\n            }}>\r\n            {no?.label}\r\n          </NavItem>\r\n        ) : (\r\n          <NavItem\r\n            as={NavLink}\r\n            exact={no?.exact}\r\n            to={no?.to || ''}\r\n            key={no?.label}\r\n            onMouseDown={preventFocusOnClick}\r\n            onClick={() => {\r\n              if (no?.onClick) {\r\n                no?.onClick();\r\n              }\r\n            }}>\r\n            {no?.label}\r\n          </NavItem>\r\n        ),\r\n      )}\r\n      {navigationOptions.length + 1 > numberOfItemsAllowed && (\r\n        <ExtendedSection>\r\n          <IconButton\r\n            variant={'secondary'}\r\n            shape={'circular'}\r\n            action={() => setShowExtendedMenu(true)}>\r\n            <MoreHorizontal size=\"24px\" />\r\n          </IconButton>\r\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\r\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction} navigationOptions={navigationOptions.slice(numberOfItemsAllowed - 1)} />\r\n          </ExtendedMenuWrapper>\r\n        </ExtendedSection>\r\n      )}\r\n    </NavContainer>\r\n  );\r\n};\r\n\r\nexport default MainMenu;\r\n"],"file":"MainMenu.js"}

package/dist/GlobalNavigationBar/NavigationHelper.cjs

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useNavigationHelper = void 0;
-
-var _reactRouterDom = require("react-router-dom");
-
-var _reactRouter = require("react-router");
-
-var useNavigationHelper = function useNavigationHelper() {
-  var navigateHook = (0, _reactRouter.useNavigate)();
-  var location = (0, _reactRouterDom.useLocation)();
-
-  var navigate = function navigate(url, isExternal) {
-    if (isExternal) {
-      window.location.href = url;
-    } else {
-      navigateHook(url);
-    }
-  };
-
-  var isActiveRoute = function isActiveRoute(url, exact) {
-    var _location$pathname;
-
-    return !!(0, _reactRouterDom.matchPath)({
-      path: url,
-      end: exact
-    }, (_location$pathname = location.pathname) !== null && _location$pathname !== void 0 ? _location$pathname : '');
-  };
-
-  return {
-    navigate: navigate,
-    isActiveRoute: isActiveRoute
-  };
-};
-
-exports.useNavigationHelper = useNavigationHelper;
-//# sourceMappingURL=NavigationHelper.cjs.map