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

package/dist/Button/BackButton.cjs

@@ -29,6 +29,8 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _typography = require("../styles/typography");
 
+var _common = require("../common");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["children", "size"];
@@ -54,6 +56,7 @@ var BackButton = function BackButton(_ref) {
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({}, props), {}, {
     size: size,
+    onMouseDown: _common.defaultOnMouseDownHandler,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'button-content',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/dist/Button/BackButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/BackButton.tsx"],"names":["Button","styled","button","props","size","Size","XSmall","ComponentTextStyle","Bold","COLORS","neutral_600","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_300","BackButton","children","Small","disabled"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAGC,0BAAOC,MAAV,ozCAaR,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeC,YAAKC,MAApB,GAA6B,oCAAmBC,+BAAmBC,IAAtC,EAA4CC,eAAOC,WAAnD,CAA7B,GAA+F,mCAAkBH,+BAAmBC,IAArC,EAA2CC,eAAOC,WAAlD,CAA3G;AAAA,CAbQ,EA0CYD,eAAOE,UA1CnB,EA2CCF,eAAOG,WA3CR,EA+CNC,mBA/CM,EAmDYJ,eAAOK,WAnDnB,EAoDCL,eAAOM,WApDR,EA0DCN,eAAOO,WA1DR,CAAZ;;AAmEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAA+C;AAAA,MAA5CC,QAA4C,QAA5CA,QAA4C;AAAA,uBAAlCd,IAAkC;AAAA,MAAlCA,IAAkC,0BAA3BC,YAAKc,KAAsB;AAAA,MAAZhB,KAAY;AAC1G,sBACE,qBAAC,MAAD,kCAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC,IAAzB;AAAA,2BACE;AAAK,MAAA,SAAS,EAAE,gBAAhB;AAAA,8BACE;AAAA,+BACE,qBAAC,0BAAD;AAAe,UAAA,IAAI,EAAEA,IAAI,KAAKC,YAAKC,MAAd,GAAuB,IAAvB,GAA8B;AAAnD;AADF,QADF,eAIE;AAAA,kBAAQY;AAAR,QAJF;AAAA;AADF,KADF;AAUD,CAXD;;;AAFEE,EAAAA,Q;;eAeaH,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\n  return (\n    <Button {...props} size={size}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.cjs"}
+{"version":3,"sources":["../../src/Button/BackButton.tsx"],"names":["Button","styled","button","props","size","Size","XSmall","ComponentTextStyle","Bold","COLORS","neutral_600","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_300","BackButton","children","Small","defaultOnMouseDownHandler","disabled"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAGC,0BAAOC,MAAV,ozCAaR,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeC,YAAKC,MAApB,GAA6B,oCAAmBC,+BAAmBC,IAAtC,EAA4CC,eAAOC,WAAnD,CAA7B,GAA+F,mCAAkBH,+BAAmBC,IAArC,EAA2CC,eAAOC,WAAlD,CAA3G;AAAA,CAbQ,EA0CYD,eAAOE,UA1CnB,EA2CCF,eAAOG,WA3CR,EA+CNC,mBA/CM,EAmDYJ,eAAOK,WAnDnB,EAoDCL,eAAOM,WApDR,EA0DCN,eAAOO,WA1DR,CAAZ;;AAmEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAA+C;AAAA,MAA5CC,QAA4C,QAA5CA,QAA4C;AAAA,uBAAlCd,IAAkC;AAAA,MAAlCA,IAAkC,0BAA3BC,YAAKc,KAAsB;AAAA,MAAZhB,KAAY;AAC1G,sBACE,qBAAC,MAAD,kCAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC,IAAzB;AAA+B,IAAA,WAAW,EAAEgB,iCAA5C;AAAA,2BACE;AAAK,MAAA,SAAS,EAAE,gBAAhB;AAAA,8BACE;AAAA,+BACE,qBAAC,0BAAD;AAAe,UAAA,IAAI,EAAEhB,IAAI,KAAKC,YAAKC,MAAd,GAAuB,IAAvB,GAA8B;AAAnD;AADF,QADF,eAIE;AAAA,kBAAQY;AAAR,QAJF;AAAA;AADF,KADF;AAUD,CAXD;;;AAFEG,EAAAA,Q;;eAeaJ,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\n  return (\n    <Button {...props} size={size} onMouseDown={defaultOnMouseDownHandler}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.cjs"}

package/dist/Button/BackButton.js

@@ -16,6 +16,7 @@ import { COLORS, focusStyles } from '../styles';
 import { Size } from '../types';
 import { ArrowLineLeft } from '../icons/systemicons/SystemIcons';
 import { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
+import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Button = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ", ";\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ", "\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ", " !important;\n    background-color: transparent !important;\n  }\n"])), function (props) {
@@ -30,6 +31,7 @@ var BackButton = function BackButton(_ref) {
 
   return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
     size: size,
+    onMouseDown: defaultOnMouseDownHandler,
     children: /*#__PURE__*/_jsxs("div", {
       className: 'button-content',
       children: [/*#__PURE__*/_jsx("span", {

package/dist/Button/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/BackButton.tsx"],"names":["React","styled","COLORS","focusStyles","Size","ArrowLineLeft","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","Button","button","props","size","XSmall","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","Small","disabled"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,aAAT,QAA8B,kCAA9B;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,kBAAhD,QAA0E,sBAA1E;;;AAEA,IAAMC,MAAM,GAAGR,MAAM,CAACS,MAAV,syCAaR,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeR,IAAI,CAACS,MAApB,GAA6BL,kBAAkB,CAACF,kBAAkB,CAACQ,IAApB,EAA0BZ,MAAM,CAACa,WAAjC,CAA/C,GAA+FR,iBAAiB,CAACD,kBAAkB,CAACQ,IAApB,EAA0BZ,MAAM,CAACa,WAAjC,CAA5H;AAAA,CAbQ,EA0CYb,MAAM,CAACc,UA1CnB,EA2CCd,MAAM,CAACe,WA3CR,EA+CNd,WA/CM,EAmDYD,MAAM,CAACgB,WAnDnB,EAoDChB,MAAM,CAACiB,WApDR,EA0DCjB,MAAM,CAACkB,WA1DR,CAAZ;;AAmEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAA+C;AAAA,MAA5CC,QAA4C,QAA5CA,QAA4C;AAAA,uBAAlCV,IAAkC;AAAA,MAAlCA,IAAkC,0BAA3BR,IAAI,CAACmB,KAAsB;AAAA,MAAZZ,KAAY;;AAC1G,sBACE,KAAC,MAAD,kCAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC,IAAzB;AAAA,2BACE;AAAK,MAAA,SAAS,EAAE,gBAAhB;AAAA,8BACE;AAAA,+BACE,KAAC,aAAD;AAAe,UAAA,IAAI,EAAEA,IAAI,KAAKR,IAAI,CAACS,MAAd,GAAuB,IAAvB,GAA8B;AAAnD;AADF,QADF,eAIE;AAAA,kBAAQS;AAAR,QAJF;AAAA;AADF,KADF;AAUD,CAXD;;;AAFEE,EAAAA,Q;;AAeF,eAAeH,UAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\n  return (\n    <Button {...props} size={size}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}
+{"version":3,"sources":["../../src/Button/BackButton.tsx"],"names":["React","styled","COLORS","focusStyles","Size","ArrowLineLeft","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","Button","button","props","size","XSmall","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","Small","disabled"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,aAAT,QAA8B,kCAA9B;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,kBAAhD,QAA0E,sBAA1E;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;AAEA,IAAMC,MAAM,GAAGT,MAAM,CAACU,MAAV,syCAaR,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeT,IAAI,CAACU,MAApB,GAA6BN,kBAAkB,CAACF,kBAAkB,CAACS,IAApB,EAA0Bb,MAAM,CAACc,WAAjC,CAA/C,GAA+FT,iBAAiB,CAACD,kBAAkB,CAACS,IAApB,EAA0Bb,MAAM,CAACc,WAAjC,CAA5H;AAAA,CAbQ,EA0CYd,MAAM,CAACe,UA1CnB,EA2CCf,MAAM,CAACgB,WA3CR,EA+CNf,WA/CM,EAmDYD,MAAM,CAACiB,WAnDnB,EAoDCjB,MAAM,CAACkB,WApDR,EA0DClB,MAAM,CAACmB,WA1DR,CAAZ;;AAmEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAA+C;AAAA,MAA5CC,QAA4C,QAA5CA,QAA4C;AAAA,uBAAlCV,IAAkC;AAAA,MAAlCA,IAAkC,0BAA3BT,IAAI,CAACoB,KAAsB;AAAA,MAAZZ,KAAY;;AAC1G,sBACE,KAAC,MAAD,kCAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC,IAAzB;AAA+B,IAAA,WAAW,EAAEJ,yBAA5C;AAAA,2BACE;AAAK,MAAA,SAAS,EAAE,gBAAhB;AAAA,8BACE;AAAA,+BACE,KAAC,aAAD;AAAe,UAAA,IAAI,EAAEI,IAAI,KAAKT,IAAI,CAACU,MAAd,GAAuB,IAAvB,GAA8B;AAAnD;AADF,QADF,eAIE;AAAA,kBAAQS;AAAR,QAJF;AAAA;AADF,KADF;AAUD,CAXD;;;AAFEE,EAAAA,Q;;AAeF,eAAeH,UAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\n  return (\n    <Button {...props} size={size} onMouseDown={defaultOnMouseDownHandler}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}

package/dist/Button/Button.cjs

@@ -162,8 +162,7 @@ var Tertiary = (0, _styledComponents.default)(Primary)(_templateObject3 || (_tem
 }, _styles.COLORS.neutral_300);
 var Correct = (0, _styledComponents.default)(Primary)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), _styles.COLORS.correct_500, _styles.COLORS.correct_500, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_800, _styles.COLORS.correct_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
 var Critical = (0, _styledComponents.default)(Primary)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_800, _styles.COLORS.critical_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
-
-var Button = function Button(_ref) {
+var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$children = _ref.children,
       children = _ref$children === void 0 ? '' : _ref$children,
       _ref$variant = _ref.variant,
@@ -218,6 +217,7 @@ var Button = function Button(_ref) {
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonStyled, _objectSpread(_objectSpread({}, renderProps), {}, {
+    ref: ref,
     disabled: disabled,
     iconOnly: !children,
     type: type,
@@ -233,8 +233,7 @@ var Button = function Button(_ref) {
       children: renderContent()
     })
   }));
-};
-
+});
 Button.propTypes = {
   variant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary', 'correct', 'critical']),
   role: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button']), _propTypes.default.string]),

package/dist/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","colorTheme","COLORS","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","invertedFocusStyles","focusStyles","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","defaultOnMouseDownHandler","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n  switch(flatEdge)\n  {\n      case 'left':\n          return `0px ${radius}px ${radius}px 0px`;\n      \n      case 'right':\n          return `${radius}px 0px 0px ${radius}px`;\n\n      case 'none':\n      default:\n          return `${radius}px`;\n  }\n}\n\nconst Primary = styled.button<ButtonProps>`\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n    border-width: 2px;\n    border-style: solid;\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${props => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n\n  &:focus,\n  &.focus-state {\n    ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n  }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.correct_500};\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.correct_800};\n    background-color: ${COLORS.correct_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.critical_500};\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.critical_800};\n    background-color: ${COLORS.critical_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  colorTheme?: 'teal' | 'dark';\n  invertFocus?: boolean;\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  minWidth?: string;\n  iconOnly?: boolean;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n  children = '',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  minWidth = '64px',\n  testId,\n  disabled,\n  flatEdge,\n  icon,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, ...renderProps } = props;\n\n  const renderContent = () => (\n    <>\n      {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n      {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n      {loading && <LoadingIndicator/>}\n    </>\n  );\n\n  let ButtonStyled = Primary;\n  switch(variant)\n  {\n    case 'secondary':\n      ButtonStyled = Secondary;\n      break;\n    case 'tertiary':\n      ButtonStyled = Tertiary;\n      break;\n    case 'correct':\n      ButtonStyled = Correct;\n      break;\n    case 'critical':\n      ButtonStyled = Critical;\n      break;\n  }\n\n  return (\n    <ButtonStyled\n      {...renderProps}\n      disabled={disabled}\n      iconOnly={!children}\n      type={type}\n      size={size}\n      flatEdge={flatEdge}\n      width={width}\n      minWidth={minWidth}\n      data-testid={testId}\n      className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n      onMouseDown={defaultOnMouseDownHandler}>\n      <div className=\"button-content\">{renderContent()}</div>\n    </ButtonStyled>\n  );\n};\n\nexport default Button;\n"],"file":"Button.cjs"}
+{"version":3,"sources":["../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","colorTheme","COLORS","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","invertedFocusStyles","focusStyles","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","React","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","defaultOnMouseDownHandler","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n  switch(flatEdge)\n  {\n      case 'left':\n          return `0px ${radius}px ${radius}px 0px`;\n      \n      case 'right':\n          return `${radius}px 0px 0px ${radius}px`;\n\n      case 'none':\n      default:\n          return `${radius}px`;\n  }\n}\n\nconst Primary = styled.button<ButtonProps>`\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n    border-width: 2px;\n    border-style: solid;\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${props => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n\n  &:focus,\n  &.focus-state {\n    ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n  }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.correct_500};\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.correct_800};\n    background-color: ${COLORS.correct_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.critical_500};\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.critical_800};\n    background-color: ${COLORS.critical_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  colorTheme?: 'teal' | 'dark';\n  invertFocus?: boolean;\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  minWidth?: string;\n  iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({\n  children = '',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  minWidth = '64px',\n  testId,\n  disabled,\n  flatEdge,\n  icon,\n  ...props\n}, ref) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, ...renderProps } = props;\n\n  const renderContent = () => (\n    <>\n      {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n      {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n      {loading && <LoadingIndicator/>}\n    </>\n  );\n\n  let ButtonStyled = Primary;\n  switch(variant)\n  {\n    case 'secondary':\n      ButtonStyled = Secondary;\n      break;\n    case 'tertiary':\n      ButtonStyled = Tertiary;\n      break;\n    case 'correct':\n      ButtonStyled = Correct;\n      break;\n    case 'critical':\n      ButtonStyled = Critical;\n      break;\n  }\n\n  return (\n    <ButtonStyled\n      {...renderProps}\n      ref={ref}\n      disabled={disabled}\n      iconOnly={!children}\n      type={type}\n      size={size}\n      flatEdge={flatEdge}\n      width={width}\n      minWidth={minWidth}\n      data-testid={testId}\n      className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n      onMouseDown={defaultOnMouseDownHandler}>\n      <div className=\"button-content\">{renderContent()}</div>\n    </ButtonStyled>\n  );\n});\n\nexport default Button;\n"],"file":"Button.cjs"}

package/dist/Button/Button.d.ts

@@ -15,5 +15,5 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     minWidth?: string;
     iconOnly?: boolean;
 }
-declare const Button: React.FunctionComponent<ButtonProps>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/Button/Button.js

@@ -137,8 +137,7 @@ var Tertiary = styled(Primary)(_templateObject3 || (_templateObject3 = _taggedTe
 }, COLORS.neutral_300);
 var Correct = styled(Primary)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), COLORS.correct_500, COLORS.correct_500, COLORS.correct_700, COLORS.correct_700, COLORS.correct_800, COLORS.correct_800, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100);
 var Critical = styled(Primary)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), COLORS.critical_500, COLORS.critical_500, COLORS.critical_700, COLORS.critical_700, COLORS.critical_800, COLORS.critical_800, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100);
-
-var Button = function Button(_ref) {
+var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$children = _ref.children,
       children = _ref$children === void 0 ? '' : _ref$children,
       _ref$variant = _ref.variant,
@@ -194,6 +193,7 @@ var Button = function Button(_ref) {
   }
 
   return /*#__PURE__*/_jsx(ButtonStyled, _objectSpread(_objectSpread({}, renderProps), {}, {
+    ref: ref,
     disabled: disabled,
     iconOnly: !children,
     type: type,
@@ -209,8 +209,7 @@ var Button = function Button(_ref) {
       children: renderContent()
     })
   }));
-};
-
+});
 Button.propTypes = {
   variant: _pt.oneOf(['primary', 'secondary', 'tertiary', 'correct', 'critical']),
   role: _pt.oneOfType([_pt.oneOf(['button']), _pt.string]),

package/dist/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Button.tsx"],"names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","getBorderRadius","flatEdge","radius","Primary","button","props","size","Large","Bold","colorTheme","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n  switch(flatEdge)\n  {\n      case 'left':\n          return `0px ${radius}px ${radius}px 0px`;\n      \n      case 'right':\n          return `${radius}px 0px 0px ${radius}px`;\n\n      case 'none':\n      default:\n          return `${radius}px`;\n  }\n}\n\nconst Primary = styled.button<ButtonProps>`\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n    border-width: 2px;\n    border-style: solid;\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${props => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n\n  &:focus,\n  &.focus-state {\n    ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n  }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.correct_500};\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.correct_800};\n    background-color: ${COLORS.correct_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.critical_500};\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.critical_800};\n    background-color: ${COLORS.critical_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  colorTheme?: 'teal' | 'dark';\n  invertFocus?: boolean;\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  minWidth?: string;\n  iconOnly?: boolean;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n  children = '',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  minWidth = '64px',\n  testId,\n  disabled,\n  flatEdge,\n  icon,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, ...renderProps } = props;\n\n  const renderContent = () => (\n    <>\n      {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n      {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n      {loading && <LoadingIndicator/>}\n    </>\n  );\n\n  let ButtonStyled = Primary;\n  switch(variant)\n  {\n    case 'secondary':\n      ButtonStyled = Secondary;\n      break;\n    case 'tertiary':\n      ButtonStyled = Tertiary;\n      break;\n    case 'correct':\n      ButtonStyled = Correct;\n      break;\n    case 'critical':\n      ButtonStyled = Critical;\n      break;\n  }\n\n  return (\n    <ButtonStyled\n      {...renderProps}\n      disabled={disabled}\n      iconOnly={!children}\n      type={type}\n      size={size}\n      flatEdge={flatEdge}\n      width={width}\n      minWidth={minWidth}\n      data-testid={testId}\n      className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n      onMouseDown={defaultOnMouseDownHandler}>\n      <div className=\"button-content\">{renderContent()}</div>\n    </ButtonStyled>\n  );\n};\n\nexport default Button;\n"],"file":"Button.js"}
+{"version":3,"sources":["../../src/Button/Button.tsx"],"names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","getBorderRadius","flatEdge","radius","Primary","button","props","size","Large","Bold","colorTheme","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n  switch(flatEdge)\n  {\n      case 'left':\n          return `0px ${radius}px ${radius}px 0px`;\n      \n      case 'right':\n          return `${radius}px 0px 0px ${radius}px`;\n\n      case 'none':\n      default:\n          return `${radius}px`;\n  }\n}\n\nconst Primary = styled.button<ButtonProps>`\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n    border-width: 2px;\n    border-style: solid;\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${props => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n\n  &:focus,\n  &.focus-state {\n    ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n  }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.correct_500};\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.correct_800};\n    background-color: ${COLORS.correct_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.critical_500};\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.critical_800};\n    background-color: ${COLORS.critical_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  colorTheme?: 'teal' | 'dark';\n  invertFocus?: boolean;\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  minWidth?: string;\n  iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({\n  children = '',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  minWidth = '64px',\n  testId,\n  disabled,\n  flatEdge,\n  icon,\n  ...props\n}, ref) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, ...renderProps } = props;\n\n  const renderContent = () => (\n    <>\n      {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n      {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n      {loading && <LoadingIndicator/>}\n    </>\n  );\n\n  let ButtonStyled = Primary;\n  switch(variant)\n  {\n    case 'secondary':\n      ButtonStyled = Secondary;\n      break;\n    case 'tertiary':\n      ButtonStyled = Tertiary;\n      break;\n    case 'correct':\n      ButtonStyled = Correct;\n      break;\n    case 'critical':\n      ButtonStyled = Critical;\n      break;\n  }\n\n  return (\n    <ButtonStyled\n      {...renderProps}\n      ref={ref}\n      disabled={disabled}\n      iconOnly={!children}\n      type={type}\n      size={size}\n      flatEdge={flatEdge}\n      width={width}\n      minWidth={minWidth}\n      data-testid={testId}\n      className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n      onMouseDown={defaultOnMouseDownHandler}>\n      <div className=\"button-content\">{renderContent()}</div>\n    </ButtonStyled>\n  );\n});\n\nexport default Button;\n"],"file":"Button.js"}

package/dist/Button/DualFunctionButton.cjs

@@ -33,6 +33,8 @@ var _DropdownContent = _interopRequireDefault(require("../Dropdown/DropdownConte
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _common = require("../common");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"],
@@ -86,13 +88,27 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
       focused = _React$useState4[0],
       setFocused = _React$useState4[1];
 
-  var dropdownContainerRef = React.useRef(null);
-
-  var _React$useState5 = React.useState([]),
+  var _React$useState5 = React.useState(false),
       _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      selectedValues = _React$useState6[0],
-      setSelectedValues = _React$useState6[1];
+      keyboardNavigated = _React$useState6[0],
+      setKeyboardNavigated = _React$useState6[1];
 
+  var dropdownContainerRef = React.useRef(null);
+
+  var _React$useState7 = React.useState([]),
+      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+      selectedValues = _React$useState8[0],
+      setSelectedValues = _React$useState8[1];
+
+  var dropdownContentRef = React.useRef(null);
+  var dropdownButtonRef = (0, _common.useClickOutsideRef)(function () {
+    return setIsOpen(false);
+  }, [dropdownContainerRef], (0, _common.useFocusOutsideRef)(function () {
+    return setIsOpen(false);
+  }, [dropdownContentRef]));
+  React.useEffect(function () {
+    !isOpen && setKeyboardNavigated(false);
+  }, [isOpen]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonsContainer, {
     ref: dropdownContainerRef,
     size: size,
@@ -115,14 +131,15 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
         customizationProps: dropdownCustomizationProps,
         filter: "",
+        ref: dropdownContentRef,
         selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
         setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
         isButton: true,
         setIsOpen: setIsOpen,
         focused: focused,
         setFocused: setFocused,
-        hideOnClickOutside: true,
         size: size,
+        outline: keyboardNavigated,
         isOpen: isOpen,
         id: id !== null && id !== void 0 ? id : 'dropdownId',
         messageOnNoResults: "",
@@ -133,8 +150,13 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
     }, renderProps), {}, {
       onKeyPress: function onKeyPress(e) {
         if (isOpen) return;
-        if (e.key === 'Enter' || e.key === ' ') setFocused(0);
+
+        if (e.key === 'Enter' || e.key === ' ') {
+          setFocused(0);
+          setKeyboardNavigated(true);
+        }
       },
+      ref: dropdownButtonRef,
       disabled: disabled,
       type: type,
       size: size,

package/dist/Button/DualFunctionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/DualFunctionButton.tsx"],"names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","focused","setFocused","dropdownContainerRef","useRef","selectedValues","setSelectedValues","itemsType","e","key","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport Button, {ButtonProps} from './Button'\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\nimport {Dropdown} from '../Dropdown/CommonStyling';\nimport {Size} from '../types';\nimport DropdownContent, {DropdownCustomizationProps} from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px'};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n                                                                        children = 'Primary Button',\n                                                                        variant = 'primary',\n                                                                        type = 'button',\n                                                                        size = Size.Medium,\n                                                                        width = 'auto',\n                                                                        testId,\n                                                                        disabled,\n                                                                        id,\n                                                                        dropdownMenuValues,\n                                                                        setDropdownMenuValues,\n                                                                        dropdownCustomizationProps,\n                                                                        ...props\n                                                                      }) => {\n  // Let's filter out properties that we don't need to render.\n  const {loading, icon, onClick, ...renderProps} = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  return <ButtonsContainer ref={dropdownContainerRef} size={size}>\n    <Dropdown isButton={true} locked={false} disabled={false} margin=\"\">\n      <Button\n        {...renderProps}\n        onClick={onClick}\n        disabled={disabled}\n        type={type}\n        loading={loading}\n        icon={icon}\n        size={size}\n        width={width}\n        variant={variant}\n        flatEdge=\"right\">\n        {children}\n      </Button>\n      <DropdownContent\n        customizationProps={dropdownCustomizationProps}\n        filter=\"\"\n        selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : (dropdownMenuValues ?? selectedValues)}\n        setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n        isButton={true}\n        setIsOpen={setIsOpen}\n        focused={focused}\n        setFocused={setFocused}\n        hideOnClickOutside={true}\n        size={size}\n        isOpen={isOpen}\n        id={id ?? 'dropdownId'}\n        messageOnNoResults=\"\"\n        alignLeft={true}/>\n    </Dropdown>\n    <Button variant={variant}\n            {...renderProps}\n            onKeyPress={(e:any) => {\n              if(isOpen)\n                return;\n\n              if (e.key === 'Enter' || e.key === ' ')\n                setFocused(0);\n            }}\n\n            disabled={disabled}\n            type={type}\n            size={size}\n            minWidth={'unset'}\n            onClick={(e) =>  {e.stopPropagation(); setIsOpen(!isOpen);}}\n            icon={isOpen ? <ArrowDropUp size=\"16px\"/> : <ArrowDropDown size=\"16px\"/>}\n            flatEdge=\"left\"/>\n  </ButtonsContainer>;\n};\n\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.cjs"}
+{"version":3,"sources":["../../src/Button/DualFunctionButton.tsx"],"names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useEffect","itemsType","e","key","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Button, {ButtonProps} from './Button'\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\nimport {Dropdown} from '../Dropdown/CommonStyling';\nimport {Size} from '../types';\nimport DropdownContent, {DropdownCustomizationProps} from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px'};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n                                                                        children = 'Primary Button',\n                                                                        variant = 'primary',\n                                                                        type = 'button',\n                                                                        size = Size.Medium,\n                                                                        width = 'auto',\n                                                                        testId,\n                                                                        disabled,\n                                                                        id,\n                                                                        dropdownMenuValues,\n                                                                        setDropdownMenuValues,\n                                                                        dropdownCustomizationProps,\n                                                                        ...props\n                                                                      }) => {\n  // Let's filter out properties that we don't need to render.\n  const {loading, icon, onClick, ...renderProps} = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(() => setIsOpen(false), [dropdownContainerRef], useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]));\n\n  React.useEffect(() => { !isOpen && setKeyboardNavigated(false); }, [isOpen]);\n\n  return <ButtonsContainer ref={dropdownContainerRef} size={size}>\n    <Dropdown isButton={true} locked={false} disabled={false} margin=\"\">\n      <Button\n        {...renderProps}\n        onClick={onClick}\n        disabled={disabled}\n        type={type}\n        loading={loading}\n        icon={icon}\n        size={size}\n        width={width}\n        variant={variant}\n        flatEdge=\"right\">\n        {children}\n      </Button>\n      <DropdownContent\n        customizationProps={dropdownCustomizationProps}\n        filter=\"\"\n        ref={dropdownContentRef}\n        selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : (dropdownMenuValues ?? selectedValues)}\n        setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n        isButton={true}\n        setIsOpen={setIsOpen}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        outline={keyboardNavigated}\n        isOpen={isOpen}\n        id={id ?? 'dropdownId'}\n        messageOnNoResults=\"\"\n        alignLeft={true}/>\n    </Dropdown>\n    <Button variant={variant}\n            {...renderProps}\n            onKeyPress={(e:any) => {\n              if(isOpen)\n                return;\n\n              if (e.key === 'Enter' || e.key === ' '){\n                setFocused(0);\n                setKeyboardNavigated(true);\n              }\n            }}\n            ref={dropdownButtonRef}\n            disabled={disabled}\n            type={type}\n            size={size}\n            minWidth={'unset'}\n            onClick={(e) =>  {e.stopPropagation(); setIsOpen(!isOpen);}}\n            icon={isOpen ? <ArrowDropUp size=\"16px\"/> : <ArrowDropDown size=\"16px\"/>}\n            flatEdge=\"left\"/>\n  </ButtonsContainer>;\n};\n\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.cjs"}

package/dist/Button/DualFunctionButton.js

@@ -19,6 +19,7 @@ import { Dropdown } from '../Dropdown/CommonStyling';
 import { Size } from '../types';
 import DropdownContent from '../Dropdown/DropdownContent';
 import styled from 'styled-components';
+import { useClickOutsideRef, useFocusOutsideRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ButtonsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ", ";\n  }\n"])), function (props) {
@@ -60,13 +61,27 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
       focused = _React$useState4[0],
       setFocused = _React$useState4[1];
 
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      keyboardNavigated = _React$useState6[0],
+      setKeyboardNavigated = _React$useState6[1];
+
   var dropdownContainerRef = React.useRef(null);
 
-  var _React$useState5 = React.useState([]),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      selectedValues = _React$useState6[0],
-      setSelectedValues = _React$useState6[1];
+  var _React$useState7 = React.useState([]),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      selectedValues = _React$useState8[0],
+      setSelectedValues = _React$useState8[1];
 
+  var dropdownContentRef = React.useRef(null);
+  var dropdownButtonRef = useClickOutsideRef(function () {
+    return setIsOpen(false);
+  }, [dropdownContainerRef], useFocusOutsideRef(function () {
+    return setIsOpen(false);
+  }, [dropdownContentRef]));
+  React.useEffect(function () {
+    !isOpen && setKeyboardNavigated(false);
+  }, [isOpen]);
   return /*#__PURE__*/_jsxs(ButtonsContainer, {
     ref: dropdownContainerRef,
     size: size,
@@ -89,14 +104,15 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
       })), /*#__PURE__*/_jsx(DropdownContent, {
         customizationProps: dropdownCustomizationProps,
         filter: "",
+        ref: dropdownContentRef,
         selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
         setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
         isButton: true,
         setIsOpen: setIsOpen,
         focused: focused,
         setFocused: setFocused,
-        hideOnClickOutside: true,
         size: size,
+        outline: keyboardNavigated,
         isOpen: isOpen,
         id: id !== null && id !== void 0 ? id : 'dropdownId',
         messageOnNoResults: "",
@@ -107,8 +123,13 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
     }, renderProps), {}, {
       onKeyPress: function onKeyPress(e) {
         if (isOpen) return;
-        if (e.key === 'Enter' || e.key === ' ') setFocused(0);
+
+        if (e.key === 'Enter' || e.key === ' ') {
+          setFocused(0);
+          setKeyboardNavigated(true);
+        }
       },
+      ref: dropdownButtonRef,
       disabled: disabled,
       type: type,
       size: size,