@laerdal/life-react-components 1.10.3-dev.19 → 1.10.3-dev.21

package/dist/Button/Iconbutton.cjs

@@ -177,23 +177,18 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 });
 
 IconButton.propTypes = {
-  id: _propTypes.default.string,
-  className: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['primary', 'secondary']),
   shape: _propTypes.default.oneOf(['square', 'circular']),
   action: _propTypes.default.func.isRequired,
   hideOnLowWidth: _propTypes.default.bool,
   isInMobileMenu: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
   useTransparentBackground: _propTypes.default.bool,
   shouldNotInteract: _propTypes.default.bool,
   iconColor: _propTypes.default.string,
   unsetIconSize: _propTypes.default.bool,
-  tabIndex: _propTypes.default.number,
   borderRadius: _propTypes.default.number,
   focusBackgroundColor: _propTypes.default.string,
   children: _propTypes.default.node,
-  hidden: _propTypes.default.bool,
   invertFocus: _propTypes.default.bool
 };
 var _default = IconButton;

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation","defaultOnMouseDownHandler","className"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'id' | 'className' | 'onClick' | 'hidden' | 'tabIndex' | 'disabled' | 'onMouseDown'> {\n  id?: string;\n  className?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;;;AAgBA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD;AAAA,SAA6BA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA9E;AAAA,CAAxB;;AAEA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACF,KAAD,EAA4B;AACvD,MAAMG,MAAM,GAAGJ,eAAe,CAACC,KAAD,CAA9B;;AACA,UAAQA,KAAK,CAACI,QAAd;AACE,SAAK,MAAL;AACE,2BAAcD,MAAd,cAAwBA,MAAxB;;AAEF,SAAK,OAAL;AACE,uBAAUA,MAAV,sBAA4BA,MAA5B;;AAEF,SAAK,MAAL;AACA;AACE,uBAAUA,MAAV;AATJ;AAWD,CAbD;;AAeO,IAAME,iBAAiB,GAAGC,0BAAOC,GAAV,mFAAvB;;;;AAEA,IAAMC,gBAAgB,GAAGF,0BAAOG,MAAV,koBAQhB,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACU,cAAN,GAAuB,MAAvB,GAAgC,OAA5C;AAAA,CARgB,EASzBC,oBAAYC,MATa,EAaV,UAACZ,KAAD;AAAA,SAAYA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA7D;AAAA,CAbU,EAczBI,iBAdyB,EAiBRH,oBAjBQ,EAsBb,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACa,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CAtBa,EAuBd,UAACb,KAAD;AAAA,SAAYA,KAAK,CAACa,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CAvBc,EAmCvB,UAACb,KAAD;AAAA,SAAYA,KAAK,CAACc,WAAN,GAAoBC,2BAApB,GAA0CC,mBAAtD;AAAA,CAnCuB,CAAtB;;;AAuCA,IAAMC,uBAAuB,GAAG,+BAAOT,gBAAP,CAAH,irBAChCH,iBADgC,EAEZ,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACkB,wBAAN,GAAiC,aAAjC,GAAiDC,eAAOC,WAApE;AAAA,CAFY,EAKtB,UAACpB,KAAD;AAAA,SAAWA,KAAK,CAACqB,SAAN,IAAmBF,eAAOG,KAArC;AAAA,CALsB,EAOpB,UAACtB,KAAD;AAAA,SAAWA,KAAK,CAACqB,SAAN,IAAmBF,eAAOG,KAArC;AAAA,CAPoB,EAa9BjB,iBAb8B,EAcVc,eAAOI,WAdG,EAgB9BlB,iBAhB8B,EAiB9BA,iBAjB8B,EAkBtBc,eAAOG,KAlBe,EAuB9BjB,iBAvB8B,EAwBhBc,eAAOK,WAxBS,EA0B9BnB,iBA1B8B,EA2B9BA,iBA3B8B,EA4BtBc,eAAOG,KA5Be,EAgC9BjB,iBAhC8B,EAiCVc,eAAOM,WAjCG,EAqCpBN,eAAOG,KArCa,EAuCtBH,eAAOG,KAvCe,CAA7B;;AA4CA,IAAMI,yBAAyB,GAAG,+BAAOlB,gBAAP,CAAH,8rBAClCH,iBADkC,EAEd,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACkB,wBAAN,GAAiC,aAAjC,GAAiDC,eAAOG,KAApE;AAAA,CAFc,EAKxB,UAACtB,KAAD;AAAA,SAAWA,KAAK,CAACqB,SAAN,IAAmBF,eAAOQ,WAArC;AAAA,CALwB,EAOtB,UAAC3B,KAAD;AAAA,SAAWA,KAAK,CAACqB,SAAN,IAAmBF,eAAOQ,WAArC;AAAA,CAPsB,EAYlB,UAAC3B,KAAD;AAAA,SAAYA,KAAK,CAAC4B,iBAAN,GAA0B,MAA1B,GAAmC,MAA/C;AAAA,CAZkB,EAehCvB,iBAfgC,EAgBZc,eAAOU,UAhBK,EAkBhCxB,iBAlBgC,EAmBhCA,iBAnBgC,EAoBxBc,eAAOI,WApBiB,EAyBhClB,iBAzBgC,EA0BlBc,eAAOW,WA1BW,EA4BhCzB,iBA5BgC,EA6BhCA,iBA7BgC,EA8BxBc,eAAOK,WA9BiB,EAmChCnB,iBAnCgC,EAoCZ,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACkB,wBAAN,GAAiC,aAAjC,GAAiDC,eAAOG,KAApE;AAAA,CApCY,EAwCtBH,eAAOY,WAxCe,EA0CxBZ,eAAOY,WA1CiB,CAA/B;;;AAgEP,IAAMC,UAAU,gBAAGC,eAAMC,UAAN,CACjB,gBAuBEC,GAvBF,EAwBK;AAAA,MAtBDC,EAsBC,QAtBDA,EAsBC;AAAA,MArBDC,OAqBC,QArBDA,OAqBC;AAAA,MApBDC,KAoBC,QApBDA,KAoBC;AAAA,MAnBDC,MAmBC,QAnBDA,MAmBC;AAAA,MAlBD7B,cAkBC,QAlBDA,cAkBC;AAAA,MAjBD8B,cAiBC,QAjBDA,cAiBC;AAAA,MAhBDC,QAgBC,QAhBDA,QAgBC;AAAA,MAfDvB,wBAeC,QAfDA,wBAeC;AAAA,MAdDU,iBAcC,QAdDA,iBAcC;AAAA,MAbDc,QAaC,QAbDA,QAaC;AAAA,MAZDrB,SAYC,QAZDA,SAYC;AAAA,MAXDR,aAWC,QAXDA,aAWC;AAAA,MAVD8B,QAUC,QAVDA,QAUC;AAAA,MATDvC,QASC,QATDA,QASC;AAAA,MARDH,YAQC,QARDA,YAQC;AAAA,MAPD2C,oBAOC,QAPDA,oBAOC;AAAA,MANDC,IAMC,QANDA,IAMC;AAAA,MALDC,MAKC,QALDA,MAKC;AAAA,MAJDhC,WAIC,QAJDA,WAIC;AAAA,MAHEiC,IAGF;;AACH;AACA,UAAQV,OAAR;AACE,SAAK,WAAL;AACE,0BACE,qBAAC,yBAAD;AACE,QAAA,EAAE,EAAED,EADN;AAEE,QAAA,IAAI,EAAES,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaT,EAHf;AAIE,QAAA,GAAG,EAAED,GAJP;AAKE,QAAA,OAAO,EAAE,iBAACa,KAAD,EAAgD;AACvDA,UAAAA,KAAK,CAACC,eAAN;AACAV,UAAAA,MAAM,CAACS,KAAD,CAAN;AACD,SARH;AASE,QAAA,QAAQ,EAAEN,QATZ;AAUE,QAAA,cAAc,EAAEhC,cAAc,IAAI,KAVpC;AAWE,QAAA,YAAY,EAAE8B,cAXhB;AAYE,QAAA,wBAAwB,EAAEtB,wBAZ5B;AAaE,QAAA,iBAAiB,EAAEU,iBAbrB;AAcE,QAAA,SAAS,EAAEP,SAdb;AAeE,QAAA,aAAa,EAAER,aAfjB;AAgBE,QAAA,QAAQ,EAAE8B,QAAQ,IAAI,CAhBxB;AAiBE,QAAA,YAAY,EAAE1C,YAAY,IAAIqC,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAjB5D;AAkBE,QAAA,WAAW,EAAEY,iCAlBf;AAmBE,QAAA,MAAM,EAAEJ,MAnBV;AAoBE,QAAA,WAAW,EAAEhC,WApBf;AAqBE,QAAA,oBAAoB,EAAE8B;AArBxB,SAsBMG,IAtBN;AAAA,+BAuBE,qBAAC,iBAAD;AAAA,oBAAoBN;AAApB;AAvBF,SADF;;AA2BF,SAAK,SAAL;AACA;AACE,0BACE,qBAAC,uBAAD;AACE,QAAA,EAAE,EAAEL,EADN;AAEE,QAAA,IAAI,EAAES,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaT,EAHf;AAIE,QAAA,QAAQ,EAAEhC,QAJZ;AAKE,QAAA,GAAG,EAAE+B,GALP;AAME,QAAA,OAAO,EAAE,iBAACa,KAAD,EAAgD;AACvDA,UAAAA,KAAK,CAACC,eAAN;AACAV,UAAAA,MAAM,CAACS,KAAD,CAAN;AACD,SATH;AAUE,QAAA,QAAQ,EAAEN,QAVZ;AAWE,QAAA,cAAc,EAAEhC,cAAc,IAAI,KAXpC;AAYE,QAAA,YAAY,EAAE8B,cAZhB;AAaE,QAAA,wBAAwB,EAAEtB,wBAb5B;AAcE,QAAA,SAAS,EAAEG,SAdb;AAeE,QAAA,aAAa,EAAER,aAfjB;AAgBE,QAAA,QAAQ,EAAE8B,QAAQ,IAAI,CAhBxB;AAiBE,QAAA,YAAY,EAAE1C,YAAY,IAAIqC,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAjB5D;AAkBE,QAAA,WAAW,EAAEY,iCAlBf;AAmBE,QAAA,MAAM,EAAEJ,MAnBV;AAoBE,QAAA,WAAW,EAAEhC,WApBf;AAqBE,QAAA,oBAAoB,EAAE8B;AArBxB,SAsBMG,IAtBN;AAAA,+BAuBE,qBAAC,iBAAD;AAAA,oBAAoBN;AAApB;AAvBF,SADF;AA/BJ;AA2DD,CAtFgB,CAAnB;;;AAhBEJ,EAAAA,O,4BAAU,S,EAAY,W;AACtBC,EAAAA,K,4BAAQ,Q,EAAW,U;AACnBC,EAAAA,M;AACA7B,EAAAA,c;AAEA8B,EAAAA,c;AACAtB,EAAAA,wB;AACAU,EAAAA,iB;AACAP,EAAAA,S;AACAR,EAAAA,a;AACAZ,EAAAA,Y;AACA2C,EAAAA,oB;AACAH,EAAAA,Q;AACA3B,EAAAA,W;;eA4FakB,U","sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}

package/dist/Button/Iconbutton.d.ts

@@ -16,26 +16,20 @@ export declare const IconButtonContent: import("styled-components").StyledCompon
 export declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export declare const StyledPrimaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export declare const StyledSecondaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
-export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'id' | 'className' | 'onClick' | 'hidden' | 'tabIndex' | 'disabled' | 'onMouseDown'> {
-    id?: string;
-    className?: string;
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {
     variant?: 'primary' | 'secondary';
     shape?: 'square' | 'circular';
     action: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     hideOnLowWidth?: boolean;
     flatEdge?: 'right' | 'left' | 'none' | undefined;
     isInMobileMenu?: boolean;
-    disabled?: boolean;
     useTransparentBackground?: boolean;
     shouldNotInteract?: boolean;
     iconColor?: string;
     unsetIconSize?: boolean;
-    tabIndex?: number;
     borderRadius?: number;
     focusBackgroundColor?: string;
-    type?: 'submit' | 'reset' | 'button' | undefined;
     children?: React.ReactNode;
-    hidden?: boolean;
     invertFocus?: boolean;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/Button/Iconbutton.js

@@ -151,23 +151,18 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }
 });
 IconButton.propTypes = {
-  id: _pt.string,
-  className: _pt.string,
   variant: _pt.oneOf(['primary', 'secondary']),
   shape: _pt.oneOf(['square', 'circular']),
   action: _pt.func.isRequired,
   hideOnLowWidth: _pt.bool,
   isInMobileMenu: _pt.bool,
-  disabled: _pt.bool,
   useTransparentBackground: _pt.bool,
   shouldNotInteract: _pt.bool,
   iconColor: _pt.string,
   unsetIconSize: _pt.bool,
-  tabIndex: _pt.number,
   borderRadius: _pt.number,
   focusBackgroundColor: _pt.string,
   children: _pt.node,
-  hidden: _pt.bool,
   invertFocus: _pt.bool
 };
 export default IconButton;

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation","className"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'id' | 'className' | 'onClick' | 'hidden' | 'tabIndex' | 'disabled' | 'onMouseDown'> {\n  id?: string;\n  className?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs

@@ -104,8 +104,6 @@ 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) {
@@ -119,12 +117,12 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       avatarRight = _React$useState6[0],
       setAvatarRight = _React$useState6[1];
 
-  (0, _common.useClickOutsideRef)(function () {
+  var userMenuRef = (0, _common.useClickOutsideRef)(function () {
     return setShowUserMenu(false);
-  }, [profileButtonRef], userMenuRef);
-  (0, _common.useClickOutsideRef)(function () {
+  }, [profileButtonRef]);
+  var mobileMenuRef = (0, _common.useClickOutsideRef)(function () {
     return setShowMobileMenu(false);
-  }, [mobileMenuButtonRef], mobileMenuRef);
+  }, [mobileMenuButtonRef]);
   React.useEffect(function () {
     if (!profileButtonRef.current) return;
 

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","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;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,aAAa,GAAGC,0BAAOC,MAAV,+YAEUC,eAAOC,WAFjB,EAINC,kBAAUC,WAJJ,EASfC,oBAAYC,KATG,EAafD,oBAAYE,MAbG,CAAnB;;AA0BA,IAAMC,SAAS,GAAGT,0BAAOU,GAAV,yGAAf;;AAKA,IAAMC,eAAe,GAAGX,0BAAOU,GAAV,sKACjBJ,oBAAYC,KADK,EAKjBD,oBAAYE,MALK,CAArB;;AAUA,IAAMI,SAAS,GAAGZ,0BAAOU,GAAV,gOAKTC,eALS,CAAf;;AAaA,IAAME,kBAAkB,GAAGb,0BAAOU,GAAV,ohBAWXN,kBAAUU,QAXC,EAiBPC,oBAjBO,EAsBPC,qBAtBO,EAyBpBV,oBAAYE,MAzBQ,CAAxB;;AA8BA,IAAMS,eAAe,GAAGjB,0BAAOU,GAAV,+MACCR,eAAOgB,KADR,EAKjBZ,oBAAYE,MALK,EAOR,UAACW,KAAD;AAAA,SAAYA,KAAK,CAACC,WAAN,aAAuBC,MAAM,CAACC,UAAP,GAAoBH,KAAK,CAACC,WAA1B,GAAwC,GAA/D,UAAyE,KAArF;AAAA,CAPQ,CAArB;;AA4BA;AACA;AACA;AACA;AACA;AACA,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAsB,OAU+E;AAAA;;AAAA,MAT5EC,IAS4E,QAT5EA,IAS4E;AAAA,MAR5EC,eAQ4E,QAR5EA,eAQ4E;AAAA,MAP5EC,IAO4E,QAP5EA,IAO4E;AAAA,MAN5EC,OAM4E,QAN5EA,OAM4E;AAAA,MAL5EC,MAK4E,QAL5EA,MAK4E;AAAA,MAJ5EC,OAI4E,QAJ5EA,OAI4E;AAAA,MAH5EC,MAG4E,QAH5EA,MAG4E;AAAA,8BAF5EC,WAE4E;AAAA,MAF5EA,WAE4E,iCAF9D,IAE8D;AAAA,MAD5EC,QAC4E,QAD5EA,QAC4E;;AACzG,wBAA4CC,KAAK,CAACC,QAAN,CAAe,KAAf,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,MAAMC,iBAAiB,GAAG,iCAAqBF,cAArB,CAA1B;;AAEA,yBAAwCF,KAAK,CAACC,QAAN,CAAe,KAAf,CAAxC;AAAA;AAAA,MAAOI,YAAP;AAAA,MAAqBC,eAArB;;AACA,MAAMC,aAAa,GAAGP,KAAK,CAACQ,MAAN,CAAa,IAAb,CAAtB;AACA,MAAMC,WAAW,GAAGT,KAAK,CAACQ,MAAN,CAA6B,IAA7B,CAApB;AAEA,MAAME,UAAU,GAAGV,KAAK,CAACQ,MAAN,CAAgC,IAAhC,CAAnB;AACA,MAAMG,gBAAgB,GAAGX,KAAK,CAACQ,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,GAAGlB,KAAK,CAACQ,MAAN,CAAgC,IAAhC,CAA5B;AAEA,MAAMW,YAAY,GAAGnB,KAAK,CAACQ,MAAN,CAAa,IAAb,CAArB;;AACA,yBAAsCR,KAAK,CAACC,QAAN,CAAuB,CAAvB,CAAtC;AAAA;AAAA,MAAOmB,WAAP;AAAA,MAAoBC,cAApB;;AAGA,kCAAmB;AAAA,WAAMf,eAAe,CAAC,KAAD,CAArB;AAAA,GAAnB,EAAiD,CAACK,gBAAD,CAAjD,EAAqEF,WAArE;AACA,kCAAmB;AAAA,WAAMN,iBAAiB,CAAC,KAAD,CAAvB;AAAA,GAAnB,EAAmD,CAACe,mBAAD,CAAnD,EAA0EX,aAA1E;AAEAP,EAAAA,KAAK,CAACsB,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;AACZnC,IAAAA,MAAM,CAACuC,gBAAP,CAAwB,QAAxB,EAAkCJ,YAAlC;AACA,WAAO;AAAA,aAAMnC,MAAM,CAACwC,mBAAP,CAA2B,QAA3B,EAAqCL,YAArC,CAAN;AAAA,KAAP;AACD,GAXD,EAWG,CAACZ,gBAAgB,CAACC,OAAlB,CAXH;AAcA,sBACE;AAAA,4BACE,qBAAC,aAAD;AAAe,qBAAaf,MAA5B;AAAA,6BACE,qBAAC,kBAAD;AAAW,QAAA,WAAW,EAAEC,WAAxB;AAAqC,QAAA,QAAQ,EAAEC,QAA/C;AAAA,+BACE,sBAAC,SAAD;AAAA,kCACE,qBAAC,aAAD;AAAM,YAAA,IAAI,EAAER,IAAI,IAAI,EAApB;AAAwB,YAAA,WAAW,EAAEE,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEoC,WAA3C;AAAwD,YAAA,OAAO,EAAEpC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEqC,OAAvE;AAAgF,YAAA,EAAE,EAAErC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEsC;AAA1F,YADF,EAGIvC,eAAe,iBACf,qBAAC,iBAAD;AAAU,YAAA,KAAK,EAAE,CAAAI,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEoC,KAAT,CAAeC,MAAf,CAAsB,UAAAlB,CAAC;AAAA,qBAAI,CAACA,CAAC,CAACmB,MAAP;AAAA,aAAvB,MAAyC,EAA1D;AAA8D,YAAA,YAAY,EAAEf;AAA5E,YAJJ,eAME,sBAAC,SAAD;AAAW,YAAA,SAAS,YAAKvB,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAEuC,qBAAT,GAAiC,SAAjC,GAA6C,EAAlD,CAApB;AACW,YAAA,GAAG,EAAEhB,YADhB;AAAA,oCAEE,qBAAC,qBAAD;AAAc,cAAA,KAAK,EAAEvB,OAAF,aAAEA,OAAF,yCAAEA,OAAO,CAAEoC,KAAX,mDAAE,eAAgBC,MAAhB,CAAuB,UAAAlB,CAAC;AAAA,uBAAIA,CAAC,CAACmB,MAAN;AAAA,eAAxB,CAArB;AAA4D,cAAA,MAAM,EAAEtC,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEwC;AAA7E,cAFF,eAGE,qBAAC,uBAAD;AAAgB,cAAA,GAAG,EAAE1B,UAArB;AACgB,cAAA,OAAO,EAAEd,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEiB,OADlC;AAEgB,cAAA,cAAc,EAAE;AAAA,uBAAMP,eAAe,CAAC,CAACD,YAAF,CAArB;AAAA,eAFhC;AAGgB,cAAA,IAAI,EAAEX,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAE2C;AAH/B,cAHF,eAOE,qBAAC,eAAD;AAAiB,cAAA,MAAM,EAAE,CAAC7C,eAA1B;AAAA,qCACE,qBAAC,kBAAD;AAAY,gBAAA,MAAM,EAAE;AAAA,yBAAMW,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA,iBAApB;AACY,gBAAA,GAAG,EAAEgB,mBADjB;AAEY,gBAAA,KAAK,EAAE,UAFnB;AAGY,gBAAA,OAAO,EAAE,WAHrB;AAAA,uCAIE,qBAAC,iBAAD;AAAM,kBAAA,IAAI,EAAC;AAAX;AAJF;AADF,cAPF;AAAA,YANF;AAAA;AADF;AADF,MADF,eA4BE,qBAAC,kBAAD;AAAoB,MAAA,SAAS,EAAEhB,cAAc,GAAG,MAAH,GAAY,CAACG,YAAD,IAAiBD,iBAAjB,GAAqC,QAArC,GAAgD,EAAzG;AAAA,6BACE,qBAAC,kBAAD;AAAmB,QAAA,GAAG,EAAEG,aAAxB;AACmB,QAAA,IAAI,EAAC,MADxB;AAEmB,2BAAgB,gBAFnC;AAAA,+BAGE,qBAAC,mBAAD,kCAAgBZ,MAAhB;AACY,UAAA,IAAI,EAAEO,cADlB;AAEY,UAAA,OAAO,EAAE;AAAA,mBAAMC,iBAAiB,CAAC,KAAD,CAAvB;AAAA,WAFrB;AAGY,UAAA,OAAO,EAAET;AAHrB;AAHF;AADF,MA5BF,EAuCI,CAAAE,OAAO,SAAP,IAAAA,OAAO,WAAP,gCAAAA,OAAO,CAAEiB,OAAT,sEAAkByB,IAAlB,CAAuB,UAAAvB,CAAC;AAAA,aAAIA,CAAC,CAACC,IAAF,KAAW,SAAf;AAAA,KAAxB,MAAqD,CAAC,CAACtB,OAAvD,iBACA,qBAAC,eAAD;AAAiB,MAAA,GAAG,EAAEe,WAAtB;AACiB,MAAA,WAAW,EAAEW,WAD9B;AAEiB,qBAAY,qBAF7B;AAAA,6BAGE,qBAAC,iBAAD,kCAAc1B,OAAd;AACU,QAAA,IAAI,EAAEW,YADhB;AAEU,QAAA,cAAc,EAAE;AAAA,iBAAMC,eAAe,CAAC,KAAD,CAArB;AAAA;AAF1B;AAHF,MAxCJ;AAAA,IADF;AAmDD,CAhGD;;;AApBEd,EAAAA,e;AACAM,EAAAA,W;AACAC,EAAAA,Q;AAEAR,EAAAA,I;AACAE,EAAAA,I;AAASqC,IAAAA,O;AAAsBC,IAAAA,E;AAAaF,IAAAA,W;;AAO5ChC,EAAAA,M;;eA0GaP,mB","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  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  useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef], userMenuRef);\n  useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef], mobileMenuRef);\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","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"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.js

@@ -68,8 +68,6 @@ 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) {
@@ -83,12 +81,12 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
       avatarRight = _React$useState6[0],
       setAvatarRight = _React$useState6[1];
 
-  useClickOutsideRef(function () {
+  var userMenuRef = useClickOutsideRef(function () {
     return setShowUserMenu(false);
-  }, [profileButtonRef], userMenuRef);
-  useClickOutsideRef(function () {
+  }, [profileButtonRef]);
+  var mobileMenuRef = useClickOutsideRef(function () {
     return setShowMobileMenu(false);
-  }, [mobileMenuButtonRef], mobileMenuRef);
+  }, [mobileMenuButtonRef]);
   React.useEffect(function () {
     if (!profileButtonRef.current) return;
 

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","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 {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  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  useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef], userMenuRef);\n  useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef], mobileMenuRef);\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","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"}

package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -29,9 +33,17 @@ var _styles = require("../../styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["placement", "type", "action"],
+    _excluded2 = ["placement", "type", "icon", "action"],
+    _excluded3 = ["placement", "type", "action"];
+
 var _templateObject;
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  \n  display: none;\n  ", "{\n    display: flex;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = 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 Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
 
 var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var buttons = _ref.buttons,
@@ -65,47 +77,69 @@ var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, [elRefs, buttons]);
 
   var renderItem = function renderItem(item, index) {
-    var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
-
     switch (item.type) {
       case 'profile':
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, {
-          ref: elRefs[index],
-          hideOnLowWidth: true,
-          onClick: function onClick(e) {
-            item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
-          },
-          icon: !user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
-          initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
-        }, index);
+        {
+          var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
+
+          var placement = item.placement,
+              type = item.type,
+              action = item.action,
+              rest = (0, _objectWithoutProperties2.default)(item, _excluded);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
+            ref: elRefs[index],
+            hideOnLowWidth: true,
+            onClick: function onClick(e) {
+              item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
+            },
+            icon: !user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
+            initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
+          }, rest), index);
+        }
 
       case 'action':
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          ref: elRefs[index],
-          variant: 'secondary',
-          shape: 'circular',
-          disabled: item.disabled,
-          hideOnLowWidth: true,
-          action: function action(e) {
-            item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
-          },
-          children: item.icon
-        }, index);
+        {
+          var _placement = item.placement,
+              _type = item.type,
+              icon = item.icon,
+              _action = item.action,
+              _rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({
+            ref: elRefs[index],
+            variant: 'secondary',
+            shape: 'circular',
+            hideOnLowWidth: true,
+            action: function action(e) {
+              return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
+            }
+          }, _rest), {}, {
+            children: item.icon
+          }), index);
+        }
 
       case 'switcher':
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          ref: elRefs[index],
-          variant: 'secondary',
-          shape: 'circular',
-          hideOnLowWidth: true,
-          id: "globalNavAppsButton",
-          action: function action(e) {
-            return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.SwitchApp, {
-            size: "24px"
-          })
-        }, index);
+        {
+          var _placement2 = item.placement,
+              _type2 = item.type,
+              _action2 = item.action,
+              _rest2 = (0, _objectWithoutProperties2.default)(item, _excluded3);
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({
+            ref: elRefs[index],
+            variant: 'secondary',
+            shape: 'circular',
+            hideOnLowWidth: true,
+            id: "globalNavAppsButton",
+            action: function action(e) {
+              return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
+            }
+          }, _rest2), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.SwitchApp, {
+              size: "24px"
+            })
+          }), index);
+        }
     }
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","DesktopActions","React","forwardRef","ref","buttons","user","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","e","action","target","firstName","charAt","lastName","disabled","icon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n  \n  display: none;\n  ${BREAKPOINTS.MEDIUM}{\n    display: flex;\n  }\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile':\n        return <ProfileButton key={index}\n                              ref={elRefs[index]}\n                              hideOnLowWidth={true}\n                              onClick={e => {\n                                item.action ? item.action(e?.target) : onShowUserMenu()\n                              }}\n                              icon={!user && <SystemIcons.User/>}\n                              initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}/>\n      case 'action':\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           disabled={item.disabled}\n                           hideOnLowWidth={true}\n                           action={e => {\n                             item.action && item.action(e?.target);\n                           }}>\n          {item.icon}\n        </IconButton>\n      case 'switcher':\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}>\n          <SwitchApp size=\"24px\"/>\n        </IconButton>\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"file":"DesktopActions.cjs"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","DesktopActions","React","forwardRef","ref","buttons","user","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        return <ProfileButton key={index}\n                              ref={elRefs[index]}\n                              hideOnLowWidth={true}\n                              onClick={e => {\n                                item.action ? item.action(e?.target) : onShowUserMenu()\n                              }}\n                              icon={!user && <SystemIcons.User/>}\n                              initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                              {...rest}/>\n\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"file":"DesktopActions.cjs"}