@laerdal/life-react-components 1.7.0 → 1.8.0-dev.10

package/dist/GlobalNavigationBar/Logo.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,+VAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,qZAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,wVAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAAlC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SACAA,KAAK,CAACW,oBAAN,GACI,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAArE,CADJ,GAEI,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAAtE,CAHJ;AAAA,CANM,EAcNR,oBAAYC,MAdN,EAiBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAArE,CAAX;AAAA,CAjBI,CAAV;;AAqBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,wOACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,MAAN,IAAgBQ,eAAOS,KAA5E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHC,KAAkH,QAAlHA,KAAkH;AAAA,MAA3Gb,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFc,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,qBAAC,aAAD;AAAA,2BACE,sBAAC,UAAD;AACE,MAAA,EAAE,EAAEH,EAAE,IAAI,GADZ;AAEE,MAAA,WAAW,EAAE,qBAACI,CAAD;AAAA,eAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,OAFf;AAGE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIN,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAPH;AAQE,MAAA,MAAM,EAAEE,KARV;AAAA,iBASGA,KAAK,KAAKf,eAAOS,KAAjB,gBAAyB,qBAAC,wBAAD,KAAzB,gBAAgD,qBAAC,mBAAD,KATnD,eAUE,qBAAC,IAAD;AAAM,QAAA,MAAM,EAAEM,KAAd;AAAqB,QAAA,oBAAoB,EAAEb,oBAAoB,IAAI,KAAnE;AAAA,kBACGS;AADH,QAVF,EAaGC,WAAW,iBACV,qBAAC,OAAD;AAAS,QAAA,eAAe,EAAEI,sBAA1B;AAAkD,QAAA,MAAM,EAAEC,YAA1D;AAAA;AAAA,QAdJ;AAAA;AADF,IADF;AAuBD,CAxBD;;;AAVEN,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAC,EAAAA,K;AACAb,EAAAA,oB;AACAc,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaP,I","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.cjs"}
+{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","focusStyles","invertedFocusStyles","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,+VAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,4WAQfJ,oBAAYC,MARG,EAcbI,mBAda,EAkBbC,2BAlBa,CAAnB;;AAsBA,IAAMC,IAAI,GAAGJ,0BAAOK,IAAV,wVAGiB,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAAlC;AAAA,CAHjB,EAMN,UAACZ,KAAD;AAAA,SACAA,KAAK,CAACa,oBAAN,GACI,mCAAkBC,2BAAmBC,OAArC,EAA8Cf,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAArE,CADJ,GAEI,oCAAmBE,2BAAmBC,OAAtC,EAA+Cf,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAAtE,CAHJ;AAAA,CANM,EAcNV,oBAAYC,MAdN,EAiBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBc,2BAAmBC,OAArC,EAA8Cf,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAArE,CAAX;AAAA,CAjBI,CAAV;;AAqBA,IAAMI,OAAO,GAAGX,0BAAOK,IAAV,wOACS,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACiB,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAClB,KAAD;AAAA,SAAW,oCAAmBc,2BAAmBK,aAAtC,EAAqDnB,KAAK,CAACC,MAAN,IAAgBU,eAAOS,KAA5E,CAAX;AAAA,CARS,CAAb;;AAuBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAA+J;AAAA,MAA5JC,IAA4J,QAA5JA,IAA4J;AAAA,MAAtJC,WAAsJ,QAAtJA,WAAsJ;AAAA,MAAzIC,QAAyI,QAAzIA,OAAyI;AAAA,MAAhIC,EAAgI,QAAhIA,EAAgI;AAAA,MAA5HC,KAA4H,QAA5HA,KAA4H;AAAA,MAArHb,oBAAqH,QAArHA,oBAAqH;AAAA,MAA/Fc,sBAA+F,QAA/FA,sBAA+F;AAAA,MAAvEC,YAAuE,QAAvEA,YAAuE;AAAA,MAAzDC,QAAyD,QAAzDA,QAAyD;AAC1K,sBACE,qBAAC,aAAD;AAAe,IAAA,SAAS,EAAEA,QAAQ,GAAG,UAAH,GAAgB,EAAlD;AAAA,2BACE,sBAAC,UAAD;AACE,MAAA,EAAE,EAAEJ,EAAE,IAAI,GADZ;AAEE,MAAA,WAAW,EAAEK,iCAFf;AAGE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIN,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAPH;AAQE,MAAA,MAAM,EAAEE,KARV;AAAA,iBASGA,KAAK,KAAKf,eAAOS,KAAjB,gBAAyB,qBAAC,wBAAD,KAAzB,gBAAgD,qBAAC,mBAAD,KATnD,eAUE,qBAAC,IAAD;AAAM,QAAA,MAAM,EAAEM,KAAd;AAAqB,QAAA,oBAAoB,EAAEb,oBAAoB,IAAI,KAAnE;AAAA,kBACGS;AADH,QAVF,EAaGC,WAAW,iBACV,qBAAC,OAAD;AAAS,QAAA,eAAe,EAAEI,sBAA1B;AAAkD,QAAA,MAAM,EAAEC,YAA1D;AAAA;AAAA,QAdJ;AAAA;AADF,IADF;AAuBD,CAxBD;;;AAXEN,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAC,EAAAA,K;AACAb,EAAAA,oB;AACAc,EAAAA,sB;AACAC,EAAAA,Y;AACAC,EAAAA,Q;;eA6BaR,I","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.cjs"}

package/dist/GlobalNavigationBar/Logo.d.ts

@@ -8,6 +8,7 @@ declare type LogoProps = {
     noSizeChangeOnMobile?: boolean;
     betaTagBackgroundColor?: string;
     betaTagColor?: string;
+    inverted?: boolean;
 };
-declare const Logo: ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps) => React.ReactElement<LogoProps>;
+declare const Logo: ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps) => React.ReactElement<LogoProps>;
 export default Logo;

package/dist/GlobalNavigationBar/Logo.js

@@ -7,14 +7,15 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { LaerdalLogo, LaerdalWhiteLogo } from '../assets';
-import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles } from '../styles';
 import { ComponentMStyling, ComponentXSStyling } from '../styles/typography';
+import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var StyledLink = styled(Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) {
   return props.$color;
 }, BREAKPOINTS.MEDIUM);
-var LogoContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var LogoContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), BREAKPOINTS.MEDIUM, focusStyles, invertedFocusStyles);
 var Name = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n    ", "\n  }\n"])), function (props) {
   return props.$color || COLORS.black;
 }, function (props) {
@@ -36,13 +37,13 @@ var Logo = function Logo(_ref) {
       color = _ref.color,
       noSizeChangeOnMobile = _ref.noSizeChangeOnMobile,
       betaTagBackgroundColor = _ref.betaTagBackgroundColor,
-      betaTagColor = _ref.betaTagColor;
+      betaTagColor = _ref.betaTagColor,
+      inverted = _ref.inverted;
   return /*#__PURE__*/_jsx(LogoContainer, {
+    className: inverted ? 'inverted' : '',
     children: /*#__PURE__*/_jsxs(StyledLink, {
       to: to || '/',
-      onMouseDown: function onMouseDown(e) {
-        return e.preventDefault();
-      },
+      onMouseDown: defaultOnMouseDownHandler,
       onClick: function onClick() {
         if (_onClick) {
           _onClick();
@@ -70,7 +71,8 @@ Logo.propTypes = {
   color: _pt.string,
   noSizeChangeOnMobile: _pt.bool,
   betaTagBackgroundColor: _pt.string,
-  betaTagColor: _pt.string
+  betaTagColor: _pt.string,
+  inverted: _pt.bool
 };
 export default Logo;
 //# sourceMappingURL=Logo.js.map

package/dist/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","$color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
+{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/GlobalNavigationBar/MainMenu.cjs

@@ -31,6 +31,8 @@ var _ExtendedMainMenu = _interopRequireDefault(require("./ExtendedMainMenu"));
 
 var _Button = require("../Button");
 
+var _common = require("../common");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -59,6 +61,7 @@ var MainMenu = function MainMenu(_ref) {
       setShowExtendedMenu = _React$useState2[1];
 
   var extendedMenuRef = React.useRef(null);
+  var menuButtonRef = React.useRef(null);
   var mainMenuRef = React.useRef(null);
 
   var _React$useState3 = React.useState(1),
@@ -85,12 +88,10 @@ var MainMenu = function MainMenu(_ref) {
   };
 
   var handleClickOutside = function handleClickOutside(e) {
-    var _extendedMenuRef$curr;
+    var _extendedMenuRef$curr, _menuButtonRef$curren;
 
-    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);
-      }
+    if (!(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target)) && !(menuButtonRef !== null && menuButtonRef !== void 0 && (_menuButtonRef$curren = menuButtonRef.current) !== null && _menuButtonRef$curren !== void 0 && _menuButtonRef$curren.contains(e.target))) {
+      setShowExtendedMenu(false);
     }
   };
 
@@ -105,11 +106,6 @@ var MainMenu = function MainMenu(_ref) {
       window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
     };
   });
-
-  var preventFocusOnClick = function preventFocusOnClick(e) {
-    e.preventDefault();
-  };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
@@ -119,7 +115,7 @@ var MainMenu = function MainMenu(_ref) {
         as: NavButton,
         exact: no === null || no === void 0 ? void 0 : no.exact,
         className: "disabled",
-        onMouseDown: preventFocusOnClick,
+        onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick() {
           if (no !== null && no !== void 0 && no.onClick) {
             no === null || no === void 0 ? void 0 : no.onClick();
@@ -130,7 +126,7 @@ var MainMenu = function MainMenu(_ref) {
         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,
+        onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick() {
           if (no !== null && no !== void 0 && no.onClick) {
             no === null || no === void 0 ? void 0 : no.onClick();
@@ -140,10 +136,11 @@ var MainMenu = function MainMenu(_ref) {
       }, 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, {
+        ref: menuButtonRef,
         variant: 'secondary',
         shape: 'circular',
         action: function action() {
-          return setShowExtendedMenu(true);
+          setShowExtendedMenu(!showExtendedMenu);
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.MoreHorizontal, {
           size: "24px"

package/dist/GlobalNavigationBar/MainMenu.cjs.map

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

package/dist/GlobalNavigationBar/MainMenu.js

@@ -12,6 +12,7 @@ import { MoreHorizontal } from '../icons/systemicons/SystemIcons';
 import { COLORS, BREAKPOINTS } from '../styles';
 import ExtendedMainMenu from './ExtendedMainMenu';
 import { IconButton } from '../Button';
+import { defaultOnMouseDownHandler } from '../common';
 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);
@@ -31,6 +32,7 @@ var MainMenu = function MainMenu(_ref) {
       setShowExtendedMenu = _React$useState2[1];
 
   var extendedMenuRef = React.useRef(null);
+  var menuButtonRef = React.useRef(null);
   var mainMenuRef = React.useRef(null);
 
   var _React$useState3 = React.useState(1),
@@ -57,12 +59,10 @@ var MainMenu = function MainMenu(_ref) {
   };
 
   var handleClickOutside = function handleClickOutside(e) {
-    var _extendedMenuRef$curr;
+    var _extendedMenuRef$curr, _menuButtonRef$curren;
 
-    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);
-      }
+    if (!(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target)) && !(menuButtonRef !== null && menuButtonRef !== void 0 && (_menuButtonRef$curren = menuButtonRef.current) !== null && _menuButtonRef$curren !== void 0 && _menuButtonRef$curren.contains(e.target))) {
+      setShowExtendedMenu(false);
     }
   };
 
@@ -77,11 +77,6 @@ var MainMenu = function MainMenu(_ref) {
       window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
     };
   });
-
-  var preventFocusOnClick = function preventFocusOnClick(e) {
-    e.preventDefault();
-  };
-
   return /*#__PURE__*/_jsxs(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
@@ -91,7 +86,7 @@ var MainMenu = function MainMenu(_ref) {
         as: NavButton,
         exact: no === null || no === void 0 ? void 0 : no.exact,
         className: "disabled",
-        onMouseDown: preventFocusOnClick,
+        onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick() {
           if (no !== null && no !== void 0 && no.onClick) {
             no === null || no === void 0 ? void 0 : no.onClick();
@@ -102,7 +97,7 @@ var MainMenu = function MainMenu(_ref) {
         as: NavLink,
         exact: no === null || no === void 0 ? void 0 : no.exact,
         to: (no === null || no === void 0 ? void 0 : no.to) || '',
-        onMouseDown: preventFocusOnClick,
+        onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick() {
           if (no !== null && no !== void 0 && no.onClick) {
             no === null || no === void 0 ? void 0 : no.onClick();
@@ -112,10 +107,11 @@ var MainMenu = function MainMenu(_ref) {
       }, no === null || no === void 0 ? void 0 : no.label);
     }), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/_jsxs(ExtendedSection, {
       children: [/*#__PURE__*/_jsx(IconButton, {
+        ref: menuButtonRef,
         variant: 'secondary',
         shape: 'circular',
         action: function action() {
-          return setShowExtendedMenu(true);
+          setShowExtendedMenu(!showExtendedMenu);
         },
         children: /*#__PURE__*/_jsx(MoreHorizontal, {
           size: "24px"

package/dist/GlobalNavigationBar/MainMenu.js.map

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

package/dist/GlobalNavigationBar/RightSideNav.cjs

@@ -27,6 +27,8 @@ var _Button = require("../Button");
 
 var _typography = require("../styles/typography");
 
+var _common = require("../common");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -43,10 +45,6 @@ var RightSideNav = function RightSideNav(_ref) {
   var navigationOptions = _ref.navigationOptions,
       secondaryButton = _ref.secondaryButton;
 
-  var preventFocusOnClick = function preventFocusOnClick(e) {
-    e.preventDefault();
-  };
-
   var getNavItem = function getNavItem(navOption) {
     if (navOption !== null && navOption !== void 0 && navOption.disabled) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
@@ -59,7 +57,7 @@ var RightSideNav = function RightSideNav(_ref) {
         as: _reactRouterDom.NavLink,
         exact: navOption === null || navOption === void 0 ? void 0 : navOption.exact,
         to: (navOption === null || navOption === void 0 ? void 0 : navOption.to) || '',
-        onMouseDown: preventFocusOnClick,
+        onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick() {
           if (navOption !== null && navOption !== void 0 && navOption.onClick) {
             navOption === null || navOption === void 0 ? void 0 : navOption.onClick();

package/dist/GlobalNavigationBar/RightSideNav.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","Button","ComponentTextStyle","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","NavLink","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,yWAUdC,oBAAYC,KAVE,EAadD,oBAAYE,MAbE,CAAlB;;AAyBA,IAAMC,eAAe,GAAG,+BAAOC,cAAP,CAAH,qIAIjB,mCAAkBC,2BAAmBC,IAArC,EAA2C,OAA3C,CAJiB,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,EAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,qBAAC,gBAAD;AAAS,QAAA,EAAE,EAAEX,cAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAAA,kBACGU,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE;AADd,SAA+CF,SAA/C,aAA+CA,SAA/C,uBAA+CA,SAAS,CAAEE,KAA1D,CADF;AAKD,KAND,MAMO;AACL,0BACE,qBAAC,gBAAD;AACE,QAAA,EAAE,EAAEC,uBADN;AAEE,QAAA,KAAK,EAAEH,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEI,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAJ,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,EAAX,KAAiB,EAHvB;AAKE,QAAA,WAAW,EAAET,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAII,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEM,OAAf,EAAwB;AACtBN,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEM,OAAX;AACD;AACF,SAVH;AAAA,kBAWGN,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE;AAXd,SAIOF,SAJP,aAIOA,SAJP,uBAIOA,SAAS,CAAEE,KAJlB,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,sBAAC,YAAD;AAAA,eACGR,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEa,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,aAAIV,UAAU,CAACU,EAAD,CAAd;AAAA,KAAnC,CADH,EAGGd,eAAe,iBACd,qBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,WAAzB;AAAqC,MAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEe,MAA/D;AAAA,gBACGf,eAAe,CAACO;AADnB,MAJJ;AAAA,IADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;eA8CaD,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.cjs"}
+{"version":3,"sources":["../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","Button","ComponentTextStyle","Bold","RightSideNav","navigationOptions","secondaryButton","getNavItem","navOption","disabled","label","NavLink","exact","to","defaultOnMouseDownHandler","onClick","reverse","map","no","action"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,yWAUdC,oBAAYC,KAVE,EAadD,oBAAYE,MAbE,CAAlB;;AAyBA,IAAMC,eAAe,GAAG,+BAAOC,cAAP,CAAH,qIAIjB,mCAAkBC,2BAAmBC,IAArC,EAA2C,OAA3C,CAJiB,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,qBAAC,gBAAD;AAAS,QAAA,EAAE,EAAER,cAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAAA,kBACGO,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE;AADd,SAA+CF,SAA/C,aAA+CA,SAA/C,uBAA+CA,SAAS,CAAEE,KAA1D,CADF;AAKD,KAND,MAMO;AACL,0BACE,qBAAC,gBAAD;AACE,QAAA,EAAE,EAAEC,uBADN;AAEE,QAAA,KAAK,EAAEH,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEI,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAJ,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,EAAX,KAAiB,EAHvB;AAKE,QAAA,WAAW,EAAEC,iCALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAIN,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEO,OAAf,EAAwB;AACtBP,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEO,OAAX;AACD;AACF,SAVH;AAAA,kBAWGP,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE;AAXd,SAIOF,SAJP,aAIOA,SAJP,uBAIOA,SAAS,CAAEE,KAJlB,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,sBAAC,YAAD;AAAA,eACGL,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEW,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,aAAIX,UAAU,CAACW,EAAD,CAAd;AAAA,KAAnC,CADH,EAGGZ,eAAe,iBACd,qBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,WAAzB;AAAqC,MAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEa,MAA/D;AAAA,gBACGb,eAAe,CAACI;AADnB,MAJJ;AAAA,IADF;AAWD,CArCD;;;AAJEL,EAAAA,iB;;eA2CaD,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.cjs"}

package/dist/GlobalNavigationBar/RightSideNav.js

@@ -10,6 +10,7 @@ import { NavItem } from '../NavItem';
 import { BREAKPOINTS, ComponentTextStyle } from '../styles';
 import { Button } from '../Button';
 import { ComponentMStyling } from '../styles/typography';
+import { defaultOnMouseDownHandler } from '../common';
 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: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM);
@@ -19,10 +20,6 @@ var RightSideNav = function RightSideNav(_ref) {
   var navigationOptions = _ref.navigationOptions,
       secondaryButton = _ref.secondaryButton;
 
-  var preventFocusOnClick = function preventFocusOnClick(e) {
-    e.preventDefault();
-  };
-
   var getNavItem = function getNavItem(navOption) {
     if (navOption !== null && navOption !== void 0 && navOption.disabled) {
       return /*#__PURE__*/_jsx(NavItem, {
@@ -35,7 +32,7 @@ var RightSideNav = function RightSideNav(_ref) {
         as: NavLink,
         exact: navOption === null || navOption === void 0 ? void 0 : navOption.exact,
         to: (navOption === null || navOption === void 0 ? void 0 : navOption.to) || '',
-        onMouseDown: preventFocusOnClick,
+        onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick() {
           if (navOption !== null && navOption !== void 0 && navOption.onClick) {
             navOption === null || navOption === void 0 ? void 0 : navOption.onClick();

package/dist/GlobalNavigationBar/RightSideNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","NavContainer","div","SMALL","MEDIUM","SecondaryButton","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AAEA,SAAQC,OAAR,QAAsB,YAAtB;AAEA,SAAQC,WAAR,EAAqBC,kBAArB,QAA8C,WAA9C;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;;AAEA,IAAMC,YAAY,GAAGP,MAAM,CAACQ,GAAV,2VAUdL,WAAW,CAACM,KAVE,EAadN,WAAW,CAACO,MAbE,CAAlB;AAyBA,IAAMC,eAAe,GAAGX,MAAM,CAACK,MAAD,CAAT,uHAIjBC,iBAAiB,CAACF,kBAAkB,CAACQ,IAApB,EAA0B,OAA1B,CAJA,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,EAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,KAAC,OAAD;AAAS,QAAA,EAAE,EAAEhB,MAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAAA,kBACGe,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE;AADd,SAA+CF,SAA/C,aAA+CA,SAA/C,uBAA+CA,SAAS,CAAEE,KAA1D,CADF;AAKD,KAND,MAMO;AACL,0BACE,KAAC,OAAD;AACE,QAAA,EAAE,EAAErB,OADN;AAEE,QAAA,KAAK,EAAEmB,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEG,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAH,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEI,EAAX,KAAiB,EAHvB;AAKE,QAAA,WAAW,EAAER,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAII,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEK,OAAf,EAAwB;AACtBL,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,OAAX;AACD;AACF,SAVH;AAAA,kBAWGL,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE;AAXd,SAIOF,SAJP,aAIOA,SAJP,uBAIOA,SAAS,CAAEE,KAJlB,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,MAAC,YAAD;AAAA,eACGR,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEY,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,aAAIT,UAAU,CAACS,EAAD,CAAd;AAAA,KAAnC,CADH,EAGGb,eAAe,iBACd,KAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,WAAzB;AAAqC,MAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEc,MAA/D;AAAA,gBACGd,eAAe,CAACO;AADnB,MAJJ;AAAA,IADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;AA8CF,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}
+{"version":3,"sources":["../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","defaultOnMouseDownHandler","NavContainer","div","SMALL","MEDIUM","SecondaryButton","Bold","RightSideNav","navigationOptions","secondaryButton","getNavItem","navOption","disabled","label","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AAEA,SAAQC,OAAR,QAAsB,YAAtB;AAEA,SAAQC,WAAR,EAAqBC,kBAArB,QAA8C,WAA9C;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;AAEA,IAAMC,YAAY,GAAGR,MAAM,CAACS,GAAV,2VAUdN,WAAW,CAACO,KAVE,EAadP,WAAW,CAACQ,MAbE,CAAlB;AAyBA,IAAMC,eAAe,GAAGZ,MAAM,CAACK,MAAD,CAAT,uHAIjBC,iBAAiB,CAACF,kBAAkB,CAACS,IAApB,EAA0B,OAA1B,CAJA,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,KAAC,OAAD;AAAS,QAAA,EAAE,EAAEd,MAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAAA,kBACGa,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE;AADd,SAA+CF,SAA/C,aAA+CA,SAA/C,uBAA+CA,SAAS,CAAEE,KAA1D,CADF;AAKD,KAND,MAMO;AACL,0BACE,KAAC,OAAD;AACE,QAAA,EAAE,EAAEnB,OADN;AAEE,QAAA,KAAK,EAAEiB,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEG,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAH,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEI,EAAX,KAAiB,EAHvB;AAKE,QAAA,WAAW,EAAEf,yBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAIW,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEK,OAAf,EAAwB;AACtBL,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,OAAX;AACD;AACF,SAVH;AAAA,kBAWGL,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE;AAXd,SAIOF,SAJP,aAIOA,SAJP,uBAIOA,SAAS,CAAEE,KAJlB,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,MAAC,YAAD;AAAA,eACGL,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAES,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,aAAIT,UAAU,CAACS,EAAD,CAAd;AAAA,KAAnC,CADH,EAGGV,eAAe,iBACd,KAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,WAAzB;AAAqC,MAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEW,MAA/D;AAAA,gBACGX,eAAe,CAACI;AADnB,MAJJ;AAAA,IADF;AAWD,CArCD;;;AAJEL,EAAAA,iB;;AA2CF,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}

package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs

@@ -25,6 +25,8 @@ var _SystemIcons = require("../../icons/systemicons/SystemIcons");
 
 var _typography = require("../../styles/typography");
 
+var _common = require("../../common");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -66,6 +68,7 @@ var MenuLink = function MenuLink(_ref) {
       href: to,
       role: "menuitem",
       className: "UserMenuLink",
+      onMouseDown: _common.defaultOnMouseDownHandler,
       onClick: function onClick() {
         if (_onClick) {
           _onClick();
@@ -80,6 +83,7 @@ var MenuLink = function MenuLink(_ref) {
       to: to,
       role: "menuitem",
       className: "UserMenuLink",
+      onMouseDown: _common.defaultOnMouseDownHandler,
       onClick: function onClick() {
         if (_onClick) {
           _onClick();

package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentTextStyle","Regular","COLORS","neutral_600","InternalLink","NavLink","ExternalLink","styled","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,OAAGC,qBAAH,yTAUZ,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAVY,EAaHD,eAAOC,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAG,+BAAOC,uBAAP,CAAH,iGACdP,UADc,CAAlB;;AAIA,IAAMQ,YAAY,GAAGC,0BAAOC,CAAV,iGACdV,UADc,CAAlB;;AAIA,IAAMW,cAAc,GAAGF,0BAAOG,GAAV,0KAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,sBAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,qBAAC,mBAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAEd,eAAOkB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,qBAAC,yBAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEf,eAAOC;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGU,UAAU,gBACT,sBAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIM,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OATH;AAAA,iBAUGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAVX,eAWE;AAAA,kBAAOD;AAAP,QAXF,EAYGK,YAAY,EAZf;AAAA,8BACuBP,EADvB,EADS,gBAgBT,sBAAC,YAAD;AAEE,MAAA,EAAE,EAAEA,EAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIM,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OATH;AAAA,iBAUGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAVX,eAWE;AAAA,kBAAOD;AAAP,QAXF,EAYGK,YAAY,EAZf;AAAA,8BACuBP,EADvB;AAjBJ,IADF;AAmCD,CA1CD;;;AATEA,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;eA+CaP,Q","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n  border: none;\n  background: transparent;\n  padding: 16px 25px;\n\n  text-decoration: none;\n  text-align: left;\n  align-items: center;\n  display: flex;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  svg {\n    margin-right: 15px;\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst InternalLink = styled(NavLink)`\n  ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n  ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n  margin: 0 0 0 auto;\n  align-items: center;\n  svg {\n    margin-right: 0;\n  }\n`;\n\ninterface MenuLinkProps {\n  to: string;\n  menuText: string;\n  isExternal?: boolean;\n  Icon?: any;\n  notification?: boolean;\n  extendedMenu?: boolean;\n  onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n  const getRightSide = () => (\n    <IconsRightSide>\n      {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n      {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n    </IconsRightSide>\n  );\n  return (\n    <li>\n      {isExternal ? (\n        <ExternalLink\n          key={`ExternalLink_${to}`}\n          href={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </ExternalLink>\n      ) : (\n        <InternalLink\n          key={`InternalLink_${to}`}\n          to={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </InternalLink>\n      )}\n    </li>\n  );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.cjs"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentTextStyle","Regular","COLORS","neutral_600","InternalLink","NavLink","ExternalLink","styled","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,OAAGC,qBAAH,yTAUZ,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAVY,EAaHD,eAAOC,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAG,+BAAOC,uBAAP,CAAH,iGACdP,UADc,CAAlB;;AAIA,IAAMQ,YAAY,GAAGC,0BAAOC,CAAV,iGACdV,UADc,CAAlB;;AAIA,IAAMW,cAAc,GAAGF,0BAAOG,GAAV,0KAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,sBAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,qBAAC,mBAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAEd,eAAOkB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,qBAAC,yBAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEf,eAAOC;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGU,UAAU,gBACT,sBAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,WAAW,EAAES,iCALf;AAME,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIH,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAVH;AAAA,iBAWGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAXX,eAYE;AAAA,kBAAOD;AAAP,QAZF,EAaGK,YAAY,EAbf;AAAA,8BACuBP,EADvB,EADS,gBAiBT,sBAAC,YAAD;AAEE,MAAA,EAAE,EAAEA,EAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,WAAW,EAAES,iCALf;AAME,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIH,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAVH;AAAA,iBAWGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAXX,eAYE;AAAA,kBAAOD;AAAP,QAZF,EAaGK,YAAY,EAbf;AAAA,8BACuBP,EADvB;AAlBJ,IADF;AAqCD,CA5CD;;;AATEA,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;eAiDaP,Q","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\nimport {defaultOnMouseDownHandler} from '../../common';\n\nconst LinkStyles = css`\n  border: none;\n  background: transparent;\n  padding: 16px 25px;\n\n  text-decoration: none;\n  text-align: left;\n  align-items: center;\n  display: flex;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  svg {\n    margin-right: 15px;\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst InternalLink = styled(NavLink)`\n  ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n  ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n  margin: 0 0 0 auto;\n  align-items: center;\n  svg {\n    margin-right: 0;\n  }\n`;\n\ninterface MenuLinkProps {\n  to: string;\n  menuText: string;\n  isExternal?: boolean;\n  Icon?: any;\n  notification?: boolean;\n  extendedMenu?: boolean;\n  onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n  const getRightSide = () => (\n    <IconsRightSide>\n      {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n      {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n    </IconsRightSide>\n  );\n  return (\n    <li>\n      {isExternal ? (\n        <ExternalLink\n          key={`ExternalLink_${to}`}\n          href={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </ExternalLink>\n      ) : (\n        <InternalLink\n          key={`InternalLink_${to}`}\n          to={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </InternalLink>\n      )}\n    </li>\n  );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.cjs"}

package/dist/GlobalNavigationBar/UserMenu/MenuLink.js

@@ -9,6 +9,7 @@ import { NavLink } from 'react-router-dom';
 import { COLORS, ComponentTextStyle } from '../../styles';
 import { Bullet, ChevronRight } from '../../icons/systemicons/SystemIcons';
 import { ComponentMStyling } from '../../styles/typography';
+import { defaultOnMouseDownHandler } from '../../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var LinkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: none;\n  background: transparent;\n  padding: 16px 25px;\n\n  text-decoration: none;\n  text-align: left;\n  align-items: center;\n  display: flex;\n\n  ", "\n  svg {\n    margin-right: 15px;\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600);
@@ -42,6 +43,7 @@ var MenuLink = function MenuLink(_ref) {
       href: to,
       role: "menuitem",
       className: "UserMenuLink",
+      onMouseDown: defaultOnMouseDownHandler,
       onClick: function onClick() {
         if (_onClick) {
           _onClick();
@@ -56,6 +58,7 @@ var MenuLink = function MenuLink(_ref) {
       to: to,
       role: "menuitem",
       className: "UserMenuLink",
+      onMouseDown: defaultOnMouseDownHandler,
       onClick: function onClick() {
         if (_onClick) {
           _onClick();