@laerdal/life-react-components 1.10.3-dev.20 → 1.10.3-dev.23

package/dist/Banners/Banner.cjs

@@ -49,7 +49,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  \n  .full-width-banner{\n    margin: 8px;\n  }\n"])), function (props) {
+var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  \n  &.full-width-banner{\n    margin: 8px;\n  }\n"])), function (props) {
   return props.$type ? props.$type : _styles.COLORS.correct_100;
 }, _styles.COLORS.black, function (props) {
   return props.bottom ? 'auto' : '0';
@@ -61,9 +61,7 @@ var BannerContainer = _styledComponents.default.div(_templateObject || (_templat
   return props.linkFocused;
 }, _styles.COLORS.white);
 
-var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n"])), function (props) {
-  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color);
-}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
+var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 
 var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 auto;\n"])));
 
@@ -161,7 +159,9 @@ var Banner = function Banner(_ref) {
     className: cls
   }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
-      $color: bannerParams.accentColor,
+      style: {
+        color: bannerParams.accentColor
+      },
       className: size,
       children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(bannerParams.icon, {
         color: bannerParams.accentColor,

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link{\n      color: ${(props) => props.link};\n    }\n    &:visited{\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active{\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n  \n  .full-width-banner{\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n`;\n\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type = 'neutral',\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        fullWidth,\n                                                        className,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n  \n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer data-testid={testId}\n                     $type={bannerParams.typeColor}\n                     linkFocused={bannerParams.linkFocused}\n                     linkVisited={bannerParams.linkVisited}\n                     link={bannerParams.accentColor}\n                     hover={bannerParams.hoverColor}\n                     bottom={bottom}\n                     className={cls}\n                     {...rest}>\n      <BannerCenter $color={bannerParams.accentColor} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}
+{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AAGA;;AACA;;;;;;;;;;;;;;;;AAOA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,svBACL,UAACC,KAAD;AAAA,SAA8BA,KAAK,CAACC,KAAN,GAAcD,KAAK,CAACC,KAApB,GAA4BC,eAAOC,WAAjE;AAAA,CADK,EAIVD,eAAOE,KAJG,EAKL,UAACJ,KAAD;AAAA,SAA8BA,KAAK,CAACK,MAAN,GAAe,MAAf,GAAwB,GAAtD;AAAA,CALK,EAWfC,oBAAYC,MAXG,EAcfD,oBAAYE,KAdG,EA4BjBC,sBA5BiB,EA8BN,UAACT,KAAD;AAAA,SAAWA,KAAK,CAACU,IAAjB;AAAA,CA9BM,EAiCN,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACW,WAAjB;AAAA,CAjCM,EAqCK,UAACX,KAAD;AAAA,SAAWA,KAAK,CAACY,WAAjB;AAAA,CArCL,EAsCNV,eAAOW,KAtCD,CAArB;;AA+CA,IAAMC,YAAY,GAAGhB,0BAAOC,GAAV,2qBACd,+BAAkBgB,2BAAmBC,OAArC,EAA8C,IAA9C,CADc,EAMdV,oBAAYC,MANE,EASdD,oBAAYE,KATE,EA8BZF,oBAAYC,MA9BA,EAiCZD,oBAAYE,KAjCA,CAAlB;;AAoDA,IAAMS,aAAa,GAAGnB,0BAAOC,GAAV,8GAAnB;;AAIA,IAAMmB,eAAe,GAAGpB,0BAAOC,GAAV,uHAEjB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,KAAN,GAAc,6BAAeD,KAAK,CAACC,KAArB,CAAd,GAA4C,IAAxD;AAAA,CAFiB,CAArB;;AAKA,IAAMkB,oBAAoB,GAAGrB,0BAAOC,GAAV,yMAA1B;;AAwBA,IAAMqB,MAA4C,GAAG,SAA/CA,MAA+C,OAeO;AAAA,MAdJC,IAcI,QAdJA,IAcI;AAAA,uBAbJC,IAaI;AAAA,MAbJA,IAaI,0BAbG,SAaH;AAAA,MAZJC,QAYI,QAZJA,QAYI;AAAA,MAXJlB,MAWI,QAXJA,MAWI;AAAA,MAVJmB,MAUI,QAVJA,MAUI;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJf,IAQI,QARJA,IAQI;AAAA,MAPJgB,OAOI,QAPJA,OAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AAC1D,wBAA0BC,KAAK,CAACC,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AACAL,EAAAA,KAAK,CAACM,SAAN,CAAgB,YAAM;AACpB,aAASC,YAAT,GAAwB;AACtBF,MAAAA,QAAQ,CAACH,MAAM,CAACC,UAAR,CAAR;AACD;;AACDD,IAAAA,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;AACD,GALD;AAOA,MAAIE,YAAY,GAAG;AACjBC,IAAAA,SAAS,EAAEzC,eAAO0C,WADD;AAEjBC,IAAAA,WAAW,EAAE3C,eAAO4C,WAFH;AAGjBC,IAAAA,UAAU,EAAE7C,eAAO8C,UAHF;AAIjBC,IAAAA,cAAc,EAAE/C,eAAOgD,WAJN;AAKjBvB,IAAAA,IAAI,EAAEwB,gBALW;AAMjBC,IAAAA,aAAa,EAAE9B,IANE;AAOjB+B,IAAAA,YAAY,EAAEnD,eAAOoD,WAPJ;AAQjB3C,IAAAA,WAAW,EAAET,eAAOqD,WARH;AASjB3C,IAAAA,WAAW,EAAEV,eAAOsD;AATH,GAAnB;;AAWA,UAAQlC,IAAR;AACE,SAAK,SAAL;AACEoB,MAAAA,YAAY,CAACC,SAAb,GAAyBzC,eAAOuD,WAAhC;AACAf,MAAAA,YAAY,CAACG,WAAb,GAA2B3C,eAAOwD,WAAlC;AACAhB,MAAAA,YAAY,CAACW,YAAb,GAA4BnD,eAAOyD,WAAnC;AACAjB,MAAAA,YAAY,CAACK,UAAb,GAA0B7C,eAAO0D,UAAjC;AACAlB,MAAAA,YAAY,CAACf,IAAb,GAAoBkC,iBAApB;AACAnB,MAAAA,YAAY,CAACO,cAAb,GAA8B/C,eAAO4D,WAArC;AACApB,MAAAA,YAAY,CAAC/B,WAAb,GAA2BT,eAAO6D,WAAlC;AACArB,MAAAA,YAAY,CAAC9B,WAAb,GAA2BV,eAAO6D,WAAlC;AACA;;AACF,SAAK,UAAL;AACErB,MAAAA,YAAY,CAACC,SAAb,GAAyBzC,eAAO8D,YAAhC;AACAtB,MAAAA,YAAY,CAACG,WAAb,GAA2B3C,eAAO+D,YAAlC;AACAvB,MAAAA,YAAY,CAACW,YAAb,GAA4BnD,eAAOgE,YAAnC;AACAxB,MAAAA,YAAY,CAACK,UAAb,GAA0B7C,eAAOiE,WAAjC;AACAzB,MAAAA,YAAY,CAACf,IAAb,GAAoByC,6BAApB;AACA1B,MAAAA,YAAY,CAACO,cAAb,GAA8B/C,eAAOmE,YAArC;AACA3B,MAAAA,YAAY,CAAC/B,WAAb,GAA2BT,eAAOoE,YAAlC;AACA5B,MAAAA,YAAY,CAAC9B,WAAb,GAA2BV,eAAOoE,YAAlC;AACA;;AACF,SAAK,UAAL;AACE5B,MAAAA,YAAY,CAACC,SAAb,GAAyBzC,eAAOC,WAAhC;AACAuC,MAAAA,YAAY,CAACG,WAAb,GAA2B3C,eAAOqE,WAAlC;AACA7B,MAAAA,YAAY,CAACW,YAAb,GAA4BnD,eAAOsE,WAAnC;AACA9B,MAAAA,YAAY,CAACK,UAAb,GAA0B7C,eAAOuE,UAAjC;AACA/B,MAAAA,YAAY,CAACf,IAAb,GAAoB+C,qBAApB;AACAhC,MAAAA,YAAY,CAACO,cAAb,GAA8B/C,eAAOyE,WAArC;AACAjC,MAAAA,YAAY,CAAC/B,WAAb,GAA2BT,eAAO0E,WAAlC;AACAlC,MAAAA,YAAY,CAAC9B,WAAb,GAA2BV,eAAO0E,WAAlC;AACA;AA9BJ;;AAiCA,MAAMC,GAAG,aAAM9C,SAAN,aAAMA,SAAN,cAAMA,SAAN,GAAmB,EAAnB,cAAyBD,SAAS,GAAG,mBAAH,GAAyB,EAA3D,CAAT;AAEA,sBACE,qBAAC,eAAD;AAAiB,mBAAaN,MAA9B;AACiB,IAAA,KAAK,EAAEkB,YAAY,CAACC,SADrC;AAEiB,IAAA,WAAW,EAAED,YAAY,CAAC9B,WAF3C;AAGiB,IAAA,WAAW,EAAE8B,YAAY,CAAC/B,WAH3C;AAIiB,IAAA,IAAI,EAAE+B,YAAY,CAACG,WAJpC;AAKiB,IAAA,KAAK,EAAEH,YAAY,CAACK,UALrC;AAMiB,IAAA,MAAM,EAAE1C,MANzB;AAOiB,IAAA,SAAS,EAAEwE;AAP5B,KAQqB7C,IARrB;AAAA,2BASE,sBAAC,YAAD;AAAc,MAAA,KAAK,EAAE;AAAC8C,QAAAA,KAAK,EAAEpC,YAAY,CAACG;AAArB,OAArB;AAAwD,MAAA,SAAS,EAAExB,IAAnE;AAAA,iBACGM,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,qBAAC,YAAD,CAAc,IAAd;AAAmB,QAAA,KAAK,EAAEc,YAAY,CAACG,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QADjC,eAEE,qBAAC,oBAAD;AAAA,+BACE,sBAAC,2BAAD;AAAqB,UAAA,IAAI,EAAExB,IAA3B;AAAiC,UAAA,KAAK,EAAEgB,KAAxC;AAA+C,UAAA,KAAK,EAAEK,YAAY,CAACG,WAAnE;AAAA,qBACGtB,QADH,UAEGb,IAAI,IAAIe,QAAR,iBACC,qBAAC,oBAAD;AACE,YAAA,EAAE,YAAKsD,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAL,gBADJ;AAEE,YAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACd,kBAAIrD,UAAJ,EAAgB;AACdqD,gBAAAA,CAAC,CAACC,cAAF;AACAtD,gBAAAA,UAAU,CAACqD,CAAD,CAAV;AACD;AACF,aAPH;AAQE,YAAA,IAAI,EAAExE,IARR;AASE,YAAA,OAAO,EAAC,SATV;AAAA,sBAUGe;AAVH,YAHJ;AAAA;AADF,QAFF,EAqBGC,OAAO,iBACN,qBAAC,aAAD;AAAA,+BACE,qBAAC,eAAD;AAAiB,UAAA,KAAK,EAAEgB,YAAY,CAACU,aAArC;AAAA,iCACE,qBAAC,kBAAD;AAAY,YAAA,OAAO,EAAC,WAApB;AAAgC,YAAA,KAAK,EAAC,UAAtC;AAAiD,YAAA,wBAAwB,MAAzE;AAA0E,YAAA,oBAAoB,EAAEV,YAAY,CAACW,YAA7G;AAA2H,YAAA,MAAM,EAAE;AAAA,qBAAM3B,OAAO,EAAb;AAAA,aAAnI;AAAA,mCACE,qBAAC,kBAAD;AAAO,cAAA,KAAK,EAAEgB,YAAY,CAACO,cAA3B;AAA2C,cAAA,IAAI,EAAC;AAAhD;AADF;AADF;AADF,QAtBJ;AAAA;AATF,KADF;AA2CD,CAjHD;;;AAbE3B,EAAAA,I,4BAAO,S,EAAY,U,EAAa,U,EAAa,S;AAC7CZ,EAAAA,I;AACAe,EAAAA,Q;AACAI,EAAAA,U;AACAuD,EAAAA,K;AACA/E,EAAAA,M;AACAmB,EAAAA,M;AACAG,EAAAA,I;AACAD,EAAAA,O;AACAE,EAAAA,M;AACAE,EAAAA,S;;eAsHaV,M","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link{\n      color: ${(props) => props.link};\n    }\n    &:visited{\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active{\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n  \n  &.full-width-banner{\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n`;\n\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type = 'neutral',\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        fullWidth,\n                                                        className,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n  \n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer data-testid={testId}\n                     $type={bannerParams.typeColor}\n                     linkFocused={bannerParams.linkFocused}\n                     linkVisited={bannerParams.linkVisited}\n                     link={bannerParams.accentColor}\n                     hover={bannerParams.hoverColor}\n                     bottom={bottom}\n                     className={cls}\n                     {...rest}>\n      <BannerCenter style={{color: bannerParams.accentColor}} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}

package/dist/Banners/Banner.js

@@ -26,7 +26,7 @@ import { StyledLink } from '../HyperLink/HyperLink';
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  \n  .full-width-banner{\n    margin: 8px;\n  }\n"])), function (props) {
+var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  \n  &.full-width-banner{\n    margin: 8px;\n  }\n"])), function (props) {
   return props.$type ? props.$type : COLORS.correct_100;
 }, COLORS.black, function (props) {
   return props.bottom ? 'auto' : '0';
@@ -37,9 +37,7 @@ var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTe
 }, function (props) {
   return props.linkFocused;
 }, COLORS.white);
-var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n"])), function (props) {
-  return ComponentMStyling(ComponentTextStyle.Regular, props.$color);
-}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
 var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
 var ButtonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), function (props) {
   return props.$type ? getButtonStyle(props.$type) : null;
@@ -134,7 +132,9 @@ var Banner = function Banner(_ref) {
     className: cls
   }, rest), {}, {
     children: /*#__PURE__*/_jsxs(BannerCenter, {
-      $color: bannerParams.accentColor,
+      style: {
+        color: bannerParams.accentColor
+      },
       className: size,
       children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(bannerParams.icon, {
         color: bannerParams.accentColor,

package/dist/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","cls","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link{\n      color: ${(props) => props.link};\n    }\n    &:visited{\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active{\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n  \n  .full-width-banner{\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n`;\n\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type = 'neutral',\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        fullWidth,\n                                                        className,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n  \n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer data-testid={testId}\n                     $type={bannerParams.typeColor}\n                     linkFocused={bannerParams.linkFocused}\n                     linkVisited={bannerParams.linkVisited}\n                     link={bannerParams.accentColor}\n                     hover={bannerParams.hoverColor}\n                     bottom={bottom}\n                     className={cls}\n                     {...rest}>\n      <BannerCenter $color={bannerParams.accentColor} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link{\n      color: ${(props) => props.link};\n    }\n    &:visited{\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active{\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n  \n  &.full-width-banner{\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n`;\n\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type = 'neutral',\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        fullWidth,\n                                                        className,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n  \n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer data-testid={testId}\n                     $type={bannerParams.typeColor}\n                     linkFocused={bannerParams.linkFocused}\n                     linkVisited={bannerParams.linkVisited}\n                     link={bannerParams.accentColor}\n                     hover={bannerParams.hoverColor}\n                     bottom={bottom}\n                     className={cls}\n                     {...rest}>\n      <BannerCenter style={{color: bannerParams.accentColor}} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs

@@ -37,6 +37,8 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _UserMenu = _interopRequireDefault(require("./desktop/UserMenu"));
 
+var _useClickOutside = _interopRequireDefault(require("../hooks/useClickOutside"));
+
 var _CommonStyles = require("./mobile/CommonStyles");
 
 var _Button = require("../Button");
@@ -45,8 +47,6 @@ var _DesktopActions = _interopRequireDefault(require("./desktop/DesktopActions")
 
 var _rooks = require("rooks");
 
-var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
@@ -89,8 +89,7 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       desktop = _ref.desktop,
       testId = _ref.testId,
       _ref$useMaxWidth = _ref.useMaxWidth,
-      useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
-      maxWidth = _ref.maxWidth;
+      useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth;
 
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -104,6 +103,8 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       showUserMenu = _React$useState4[0],
       setShowUserMenu = _React$useState4[1];
 
+  var mobileMenuRef = React.useRef(null);
+  var userMenuRef = React.useRef(null);
   var actionsRef = React.useRef(null);
   var profileButtonRef = React.useRef();
   profileButtonRef.current = actionsRef === null || actionsRef === void 0 ? void 0 : (_actionsRef$current = actionsRef.current) === null || _actionsRef$current === void 0 ? void 0 : (_actionsRef$current$b = _actionsRef$current.buttons) === null || _actionsRef$current$b === void 0 ? void 0 : (_actionsRef$current$b2 = _actionsRef$current$b.find(function (a) {
@@ -117,10 +118,10 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       avatarRight = _React$useState6[0],
       setAvatarRight = _React$useState6[1];
 
-  var userMenuRef = (0, _common.useClickOutsideRef)(function () {
+  (0, _useClickOutside.default)(userMenuRef, function () {
     return setShowUserMenu(false);
   }, [profileButtonRef]);
-  var mobileMenuRef = (0, _common.useClickOutsideRef)(function () {
+  (0, _useClickOutside.default)(mobileMenuRef, function () {
     return setShowMobileMenu(false);
   }, [mobileMenuButtonRef]);
   React.useEffect(function () {
@@ -144,7 +145,6 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       "data-testid": testId,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layouts.PageWidth, {
         useMaxWidth: useMaxWidth,
-        maxWidth: maxWidth,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RowLayout, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {
             name: name || '',
@@ -221,7 +221,6 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
 GlobalNavigationBar.propTypes = {
   isAuthenticated: _propTypes.default.bool,
   useMaxWidth: _propTypes.default.bool,
-  maxWidth: _propTypes.default.number,
   name: _propTypes.default.string,
   logo: _propTypes.default.shape({
     onClick: _propTypes.default.func,

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","MEDIUM","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.MEDIUM} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={profile}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.cjs"}
+{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","MEDIUM","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","mobileMenuRef","useRef","userMenuRef","actionsRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport useClickOutside from '../hooks/useClickOutside';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.MEDIUM} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n  const mobileMenuRef = React.useRef(null);\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  useClickOutside(userMenuRef, () => setShowUserMenu(false), [profileButtonRef]);\n  useClickOutside(mobileMenuRef, () => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={profile}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.cjs"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts

@@ -3,7 +3,6 @@ import { DesktopNavigationMenuProps, MobileNavigationMenuProps, ProfileMenu } fr
 declare type GlobalNavigationBarProps = {
     isAuthenticated?: boolean;
     useMaxWidth?: boolean;
-    maxWidth?: number;
     name?: string;
     logo?: {
         onClick?: () => void;
@@ -20,5 +19,5 @@ declare type GlobalNavigationBarProps = {
  * @constructor
  * @description This component is a global navigation header bar
  */
-declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, maxWidth, }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
+declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
 export default GlobalNavigationBar;

package/dist/GlobalNavigationBar/GlobalNavigationBar.js

@@ -19,12 +19,12 @@ import RightSideNav from './desktop/RightSideNav';
 import MobileMenu from './mobile/MobileMenu';
 import { Menu } from '../icons/systemicons/SystemIcons';
 import UserMenu from './desktop/UserMenu';
+import useClickOutside from '../hooks/useClickOutside';
 import { fadeIn, fadeOut, Menu as MobileMenuWrapper } from './mobile/CommonStyles';
 import { Z_INDEXES } from '../styles';
 import { IconButton } from '../Button';
 import DesktopActions from './desktop/DesktopActions';
 import { usePreviousImmediate } from 'rooks';
-import { useClickOutsideRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -53,8 +53,7 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       desktop = _ref.desktop,
       testId = _ref.testId,
       _ref$useMaxWidth = _ref.useMaxWidth,
-      useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
-      maxWidth = _ref.maxWidth;
+      useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -68,6 +67,8 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       showUserMenu = _React$useState4[0],
       setShowUserMenu = _React$useState4[1];
 
+  var mobileMenuRef = React.useRef(null);
+  var userMenuRef = React.useRef(null);
   var actionsRef = React.useRef(null);
   var profileButtonRef = React.useRef();
   profileButtonRef.current = actionsRef === null || actionsRef === void 0 ? void 0 : (_actionsRef$current = actionsRef.current) === null || _actionsRef$current === void 0 ? void 0 : (_actionsRef$current$b = _actionsRef$current.buttons) === null || _actionsRef$current$b === void 0 ? void 0 : (_actionsRef$current$b2 = _actionsRef$current$b.find(function (a) {
@@ -81,10 +82,10 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       avatarRight = _React$useState6[0],
       setAvatarRight = _React$useState6[1];
 
-  var userMenuRef = useClickOutsideRef(function () {
+  useClickOutside(userMenuRef, function () {
     return setShowUserMenu(false);
   }, [profileButtonRef]);
-  var mobileMenuRef = useClickOutsideRef(function () {
+  useClickOutside(mobileMenuRef, function () {
     return setShowMobileMenu(false);
   }, [mobileMenuButtonRef]);
   React.useEffect(function () {
@@ -108,7 +109,6 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       "data-testid": testId,
       children: /*#__PURE__*/_jsx(PageWidth, {
         useMaxWidth: useMaxWidth,
-        maxWidth: maxWidth,
         children: /*#__PURE__*/_jsxs(RowLayout, {
           children: [/*#__PURE__*/_jsx(Logo, {
             name: name || '',
@@ -185,7 +185,6 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
 GlobalNavigationBar.propTypes = {
   isAuthenticated: _pt.bool,
   useMaxWidth: _pt.bool,
-  maxWidth: _pt.number,
   name: _pt.string,
   logo: _pt.shape({
     onClick: _pt.func,

package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","MEDIUM","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.MEDIUM} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={profile}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}
+{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","useClickOutside","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","MEDIUM","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","mobileMenuRef","useRef","userMenuRef","actionsRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,SAAQC,SAAR,QAAwB,YAAxB;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,OAAOC,YAAP,MAAyB,wBAAzB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AACA,SAAQC,IAAR,QAAmB,kCAAnB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,OAAOC,eAAP,MAA4B,0BAA5B;AACA,SAAQC,MAAR,EAAgBC,OAAhB,EAAyBJ,IAAI,IAAIK,iBAAjC,QAAyD,uBAAzD;AACA,SAAQC,SAAR,QAAwB,WAAxB;AAMA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,cAAP,MAAgD,0BAAhD;AACA,SAAQC,oBAAR,QAAmC,OAAnC;;;;AAEA,IAAMC,aAAa,GAAGlB,MAAM,CAACmB,MAAV,iYAEUf,MAAM,CAACgB,WAFjB,EAINN,SAAS,CAACO,WAJJ,EASfhB,WAAW,CAACiB,KATG,EAafjB,WAAW,CAACkB,MAbG,CAAnB;AA0BA,IAAMC,SAAS,GAAGxB,MAAM,CAACyB,GAAV,2FAAf;AAKA,IAAMC,eAAe,GAAG1B,MAAM,CAACyB,GAAV,wJACjBpB,WAAW,CAACiB,KADK,EAKjBjB,WAAW,CAACkB,MALK,CAArB;AAUA,IAAMI,SAAS,GAAG3B,MAAM,CAACyB,GAAV,kNAKTC,eALS,CAAf;AAaA,IAAME,kBAAkB,GAAG5B,MAAM,CAACyB,GAAV,sgBAWXX,SAAS,CAACe,QAXC,EAiBPlB,MAjBO,EAsBPC,OAtBO,EAyBpBP,WAAW,CAACkB,MAzBQ,CAAxB;AA8BA,IAAMO,eAAe,GAAG9B,MAAM,CAACyB,GAAV,iMACCrB,MAAM,CAAC2B,KADR,EAKjB1B,WAAW,CAACkB,MALK,EAOR,UAACS,KAAD;AAAA,SAAYA,KAAK,CAACC,WAAN,aAAuBC,MAAM,CAACC,UAAP,GAAoBH,KAAK,CAACC,WAA1B,GAAwC,GAA/D,UAAyE,KAArF;AAAA,CAPQ,CAArB;;AA2BA;AACA;AACA;AACA;AACA;AACA,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAsB,OAS+E;AAAA;;AAAA,MAR5EC,IAQ4E,QAR5EA,IAQ4E;AAAA,MAP5EC,eAO4E,QAP5EA,eAO4E;AAAA,MAN5EC,IAM4E,QAN5EA,IAM4E;AAAA,MAL5EC,OAK4E,QAL5EA,OAK4E;AAAA,MAJ5EC,MAI4E,QAJ5EA,MAI4E;AAAA,MAH5EC,OAG4E,QAH5EA,OAG4E;AAAA,MAF5EC,MAE4E,QAF5EA,MAE4E;AAAA,8BAD5EC,WAC4E;AAAA,MAD5EA,WAC4E,iCAD9D,IAC8D;;AACzG,wBAA4C7C,KAAK,CAAC8C,QAAN,CAAe,KAAf,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,MAAMC,iBAAiB,GAAG/B,oBAAoB,CAAC6B,cAAD,CAA9C;;AAEA,yBAAwC/C,KAAK,CAAC8C,QAAN,CAAe,KAAf,CAAxC;AAAA;AAAA,MAAOI,YAAP;AAAA,MAAqBC,eAArB;;AACA,MAAMC,aAAa,GAAGpD,KAAK,CAACqD,MAAN,CAAa,IAAb,CAAtB;AACA,MAAMC,WAAW,GAAGtD,KAAK,CAACqD,MAAN,CAA6B,IAA7B,CAApB;AAEA,MAAME,UAAU,GAAGvD,KAAK,CAACqD,MAAN,CAAgC,IAAhC,CAAnB;AACA,MAAMG,gBAAgB,GAAGxD,KAAK,CAACqD,MAAN,EAAzB;AACAG,EAAAA,gBAAgB,CAACC,OAAjB,GAA2BF,UAA3B,aAA2BA,UAA3B,8CAA2BA,UAAU,CAAEE,OAAvC,iFAA2B,oBAAqBC,OAAhD,oFAA2B,sBAA8BC,IAA9B,CAAmC,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACC,IAAF,KAAW,SAAf;AAAA,GAApC,CAA3B,qFAA2B,uBAA+DC,GAA1F,2DAA2B,uBAAoEL,OAA/F;AAEA,MAAMM,mBAAmB,GAAG/D,KAAK,CAACqD,MAAN,CAAgC,IAAhC,CAA5B;AAEA,MAAMW,YAAY,GAAGhE,KAAK,CAACqD,MAAN,CAAa,IAAb,CAArB;;AACA,yBAAsCrD,KAAK,CAAC8C,QAAN,CAAuB,CAAvB,CAAtC;AAAA;AAAA,MAAOmB,WAAP;AAAA,MAAoBC,cAApB;;AAGAvD,EAAAA,eAAe,CAAC2C,WAAD,EAAc;AAAA,WAAMH,eAAe,CAAC,KAAD,CAArB;AAAA,GAAd,EAA4C,CAACK,gBAAD,CAA5C,CAAf;AACA7C,EAAAA,eAAe,CAACyC,aAAD,EAAgB;AAAA,WAAMJ,iBAAiB,CAAC,KAAD,CAAvB;AAAA,GAAhB,EAAgD,CAACe,mBAAD,CAAhD,CAAf;AAEA/D,EAAAA,KAAK,CAACmE,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACX,gBAAgB,CAACC,OAAtB,EAA+B;;AAE/B,QAAMW,YAAY,GAAG,SAAfA,YAAe,GAAM;AAAA;;AACzB,UAAMC,kBAAkB,4BAAGb,gBAAgB,CAACC,OAApB,oFAAG,sBAA0Ba,qBAA1B,EAAH,2DAAG,uBAAmDC,KAA9E;AACAL,MAAAA,cAAc,CAACG,kBAAkB,IAAI,CAAvB,CAAd;AACD,KAHD;;AAKAD,IAAAA,YAAY;AACZjC,IAAAA,MAAM,CAACqC,gBAAP,CAAwB,QAAxB,EAAkCJ,YAAlC;AACA,WAAO;AAAA,aAAMjC,MAAM,CAACsC,mBAAP,CAA2B,QAA3B,EAAqCL,YAArC,CAAN;AAAA,KAAP;AACD,GAXD,EAWG,CAACZ,gBAAgB,CAACC,OAAlB,CAXH;AAcA,sBACE;AAAA,4BACE,KAAC,aAAD;AAAe,qBAAab,MAA5B;AAAA,6BACE,KAAC,SAAD;AAAW,QAAA,WAAW,EAAEC,WAAxB;AAAA,+BACE,MAAC,SAAD;AAAA,kCACE,KAAC,IAAD;AAAM,YAAA,IAAI,EAAEP,IAAI,IAAI,EAApB;AAAwB,YAAA,WAAW,EAAEE,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEkC,WAA3C;AAAwD,YAAA,OAAO,EAAElC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEmC,OAAvE;AAAgF,YAAA,EAAE,EAAEnC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEoC;AAA1F,YADF,EAGIrC,eAAe,iBACf,KAAC,QAAD;AAAU,YAAA,KAAK,EAAE,CAAAI,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEkC,KAAT,CAAeC,MAAf,CAAsB,UAAAlB,CAAC;AAAA,qBAAI,CAACA,CAAC,CAACmB,MAAP;AAAA,aAAvB,MAAyC,EAA1D;AAA8D,YAAA,YAAY,EAAEf;AAA5E,YAJJ,eAME,MAAC,SAAD;AAAW,YAAA,SAAS,YAAKrB,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAEqC,qBAAT,GAAiC,SAAjC,GAA6C,EAAlD,CAApB;AACW,YAAA,GAAG,EAAEhB,YADhB;AAAA,oCAEE,KAAC,YAAD;AAAc,cAAA,KAAK,EAAErB,OAAF,aAAEA,OAAF,yCAAEA,OAAO,CAAEkC,KAAX,mDAAE,eAAgBC,MAAhB,CAAuB,UAAAlB,CAAC;AAAA,uBAAIA,CAAC,CAACmB,MAAN;AAAA,eAAxB,CAArB;AAA4D,cAAA,MAAM,EAAEpC,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEsC;AAA7E,cAFF,eAGE,KAAC,cAAD;AAAgB,cAAA,GAAG,EAAE1B,UAArB;AACgB,cAAA,OAAO,EAAEZ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEe,OADlC;AAEgB,cAAA,cAAc,EAAE;AAAA,uBAAMP,eAAe,CAAC,CAACD,YAAF,CAArB;AAAA,eAFhC;AAGgB,cAAA,IAAI,EAAET,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEyC;AAH/B,cAHF,eAOE,KAAC,eAAD;AAAiB,cAAA,MAAM,EAAE,CAAC3C,eAA1B;AAAA,qCACE,KAAC,UAAD;AAAY,gBAAA,MAAM,EAAE;AAAA,yBAAMS,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA,iBAApB;AACY,gBAAA,GAAG,EAAEgB,mBADjB;AAEY,gBAAA,KAAK,EAAE,UAFnB;AAGY,gBAAA,OAAO,EAAE,WAHrB;AAAA,uCAIE,KAAC,IAAD;AAAM,kBAAA,IAAI,EAAC;AAAX;AAJF;AADF,cAPF;AAAA,YANF;AAAA;AADF;AADF,MADF,eA4BE,KAAC,kBAAD;AAAoB,MAAA,SAAS,EAAEhB,cAAc,GAAG,MAAH,GAAY,CAACG,YAAD,IAAiBD,iBAAjB,GAAqC,QAArC,GAAgD,EAAzG;AAAA,6BACE,KAAC,iBAAD;AAAmB,QAAA,GAAG,EAAEG,aAAxB;AACmB,QAAA,IAAI,EAAC,MADxB;AAEmB,2BAAgB,gBAFnC;AAAA,+BAGE,KAAC,UAAD,kCAAgBV,MAAhB;AACY,UAAA,IAAI,EAAEK,cADlB;AAEY,UAAA,OAAO,EAAE;AAAA,mBAAMC,iBAAiB,CAAC,KAAD,CAAvB;AAAA,WAFrB;AAGY,UAAA,OAAO,EAAEP;AAHrB;AAHF;AADF,MA5BF,EAuCI,CAAAE,OAAO,SAAP,IAAAA,OAAO,WAAP,gCAAAA,OAAO,CAAEe,OAAT,sEAAkByB,IAAlB,CAAuB,UAAAvB,CAAC;AAAA,aAAIA,CAAC,CAACC,IAAF,KAAW,SAAf;AAAA,KAAxB,MAAqD,CAAC,CAACpB,OAAvD,iBACA,KAAC,eAAD;AAAiB,MAAA,GAAG,EAAEa,WAAtB;AACiB,MAAA,WAAW,EAAEW,WAD9B;AAEiB,qBAAY,qBAF7B;AAAA,6BAGE,KAAC,QAAD,kCAAcxB,OAAd;AACU,QAAA,IAAI,EAAES,YADhB;AAEU,QAAA,cAAc,EAAE;AAAA,iBAAMC,eAAe,CAAC,KAAD,CAArB;AAAA;AAF1B;AAHF,MAxCJ;AAAA,IADF;AAmDD,CA/FD;;;AAnBEZ,EAAAA,e;AACAM,EAAAA,W;AAEAP,EAAAA,I;AACAE,EAAAA,I;AAASmC,IAAAA,O;AAAsBC,IAAAA,E;AAAaF,IAAAA,W;;AAO5C9B,EAAAA,M;;AAyGF,eAAeP,mBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport useClickOutside from '../hooks/useClickOutside';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.MEDIUM} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n  const mobileMenuRef = React.useRef(null);\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  useClickOutside(userMenuRef, () => setShowUserMenu(false), [profileButtonRef]);\n  useClickOutside(mobileMenuRef, () => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={profile}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}

package/dist/GlobalNavigationBar/NavigationHelper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/GlobalNavigationBar/NavigationHelper.ts"],"names":["useNavigationHelper","history","location","navigate","url","isExternal","window","href","push","isActiveRoute","exact","pathname","path"],"mappings":";;;;;;;AAAA;;AACA;;AAGO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACvC,MAAMC,OAAO,GAAG,8BAAhB;AACA,MAAMC,QAAQ,GAAG,kCAAjB;;AAEA,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,GAAD,EAAcC,UAAd,EAAsC;AACrD,QAAIA,UAAJ,EAAgB;AACdC,MAAAA,MAAM,CAACJ,QAAP,CAAgBK,IAAhB,GAAuBH,GAAvB;AACD,KAFD,MAEO;AACLH,MAAAA,OAAO,CAACO,IAAR,CAAaJ,GAAb;AACD;AACF,GAND;;AAQA,MAAMK,aAAa,GAAG,SAAhBA,aAAgB,CAACL,GAAD,EAAcM,KAAd;AAAA,WACpB,CAAC,CAAC,+BAAUR,QAAQ,CAACS,QAAnB,EAA6B;AAC7BD,MAAAA,KAAK,EAAEA,KADsB;AAE7BE,MAAAA,IAAI,EAAER;AAFuB,KAA7B,CADkB;AAAA,GAAtB;;AAMA,SAAO;AAACD,IAAAA,QAAQ,EAARA,QAAD;AAAWM,IAAAA,aAAa,EAAbA;AAAX,GAAP;AACD,CAnBM","sourcesContent":["import {matchPath, useLocation} from 'react-router-dom';\nimport {useHistory} from 'react-router';\n\n\nexport const useNavigationHelper = () => {\n  const history = useHistory();\n  const location = useLocation();\n\n  const navigate = (url: string, isExternal: boolean) => {\n    if (isExternal) {\n      window.location.href = url;\n    } else {\n      history.push(url);\n    }\n  };\n\n  const isActiveRoute = (url: string, exact: boolean): boolean =>\n    !!matchPath(location.pathname, {\n      exact: exact,\n      path: url\n    });\n\n  return {navigate, isActiveRoute};\n}\n"],"file":"NavigationHelper.cjs"}

package/dist/GlobalNavigationBar/NavigationHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/GlobalNavigationBar/NavigationHelper.ts"],"names":["matchPath","useLocation","useHistory","useNavigationHelper","history","location","navigate","url","isExternal","window","href","push","isActiveRoute","exact","pathname","path"],"mappings":"AAAA,SAAQA,SAAR,EAAmBC,WAAnB,QAAqC,kBAArC;AACA,SAAQC,UAAR,QAAyB,cAAzB;AAGA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACvC,MAAMC,OAAO,GAAGF,UAAU,EAA1B;AACA,MAAMG,QAAQ,GAAGJ,WAAW,EAA5B;;AAEA,MAAMK,QAAQ,GAAG,SAAXA,QAAW,CAACC,GAAD,EAAcC,UAAd,EAAsC;AACrD,QAAIA,UAAJ,EAAgB;AACdC,MAAAA,MAAM,CAACJ,QAAP,CAAgBK,IAAhB,GAAuBH,GAAvB;AACD,KAFD,MAEO;AACLH,MAAAA,OAAO,CAACO,IAAR,CAAaJ,GAAb;AACD;AACF,GAND;;AAQA,MAAMK,aAAa,GAAG,SAAhBA,aAAgB,CAACL,GAAD,EAAcM,KAAd;AAAA,WACpB,CAAC,CAACb,SAAS,CAACK,QAAQ,CAACS,QAAV,EAAoB;AAC7BD,MAAAA,KAAK,EAAEA,KADsB;AAE7BE,MAAAA,IAAI,EAAER;AAFuB,KAApB,CADS;AAAA,GAAtB;;AAMA,SAAO;AAACD,IAAAA,QAAQ,EAARA,QAAD;AAAWM,IAAAA,aAAa,EAAbA;AAAX,GAAP;AACD,CAnBM","sourcesContent":["import {matchPath, useLocation} from 'react-router-dom';\nimport {useHistory} from 'react-router';\n\n\nexport const useNavigationHelper = () => {\n  const history = useHistory();\n  const location = useLocation();\n\n  const navigate = (url: string, isExternal: boolean) => {\n    if (isExternal) {\n      window.location.href = url;\n    } else {\n      history.push(url);\n    }\n  };\n\n  const isActiveRoute = (url: string, exact: boolean): boolean =>\n    !!matchPath(location.pathname, {\n      exact: exact,\n      path: url\n    });\n\n  return {navigate, isActiveRoute};\n}\n"],"file":"NavigationHelper.js"}

package/dist/GlobalNavigationBar/desktop/MainMenu.cjs

@@ -106,9 +106,6 @@ var MainMenu = function MainMenu(_ref) {
       window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
     };
   }, []);
-  React.useEffect(function () {
-    recalculateNumberOfItemsAllowed();
-  }, [items.length]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
@@ -119,14 +116,17 @@ var MainMenu = function MainMenu(_ref) {
         exact: no.exact,
         className: "disabled",
         onMouseDown: _common.defaultOnMouseDownHandler,
+        onClick: function onClick() {
+          return no.action && no.action();
+        },
         children: no === null || no === void 0 ? void 0 : no.label
       }, no.label) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
         as: _reactRouterDom.NavLink,
         exact: no.exact,
         to: no.to || '',
         onMouseDown: _common.defaultOnMouseDownHandler,
-        onClick: function onClick(e) {
-          return no.action && no.action(e);
+        onClick: function onClick() {
+          return no.action && no.action();
         },
         children: no === null || no === void 0 ? void 0 : no.label
       }, no.label);