@laerdal/life-react-components 1.2.2-dev.9 → 1.3.1-dev.10

package/dist/js/Button/Iconbutton.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -99,7 +99,8 @@ var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)
   return props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '';
 });
 ;
-var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+
+var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var id = _ref.id,
       variant = _ref.variant,
       shape = _ref.shape,
@@ -118,9 +119,10 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       tabbedHereBackgroundColor = _ref.tabbedHereBackgroundColor,
       type = _ref.type,
       hidden = _ref.hidden;
-  var supressFocusRef = React.useRef(null);
 
-  var _React$useState = React.useState(false),
+  var supressFocusRef = _react.default.useRef(null);
+
+  var _React$useState = _react.default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       tabbedHere = _React$useState2[0],
       setTabbedHere = _React$useState2[1];
@@ -133,12 +135,16 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
 
     return false;
-  }; // Let's render button
+  };
+
+  _react.default.useEffect(function () {
+    !!disabled && setTabbedHere(false);
+  }, [disabled]); // Let's render button
 
 
   switch (variant) {
     case 'secondary':
-      return /*#__PURE__*/React.createElement(StyledSecondaryIconButton, {
+      return /*#__PURE__*/_react.default.createElement(StyledSecondaryIconButton, {
         id: id,
         type: type !== null && type !== void 0 ? type : 'button',
         "data-testid": id,
@@ -172,11 +178,11 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onKeyPress: onKeyPress,
         hidden: hidden,
         tabbedHereBackgroundColor: tabbedHereBackgroundColor
-      }, /*#__PURE__*/React.createElement("div", null, children));
+      }, /*#__PURE__*/_react.default.createElement("div", null, children));
 
     case 'primary':
     default:
-      return /*#__PURE__*/React.createElement(StyledPrimaryIconButton, {
+      return /*#__PURE__*/_react.default.createElement(StyledPrimaryIconButton, {
         id: id,
         type: type !== null && type !== void 0 ? type : 'button',
         "data-testid": id,
@@ -211,9 +217,10 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onKeyPress: onKeyPress,
         hidden: hidden,
         tabbedHereBackgroundColor: tabbedHereBackgroundColor
-      }, /*#__PURE__*/React.createElement("div", null, children));
+      }, /*#__PURE__*/_react.default.createElement("div", null, children));
   }
 });
+
 IconButton.propTypes = {
   id: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['primary', 'secondary']),

package/dist/js/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","tabbedHereBackgroundColor","css","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","supressFocusRef","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,OAAD,EAAkBC,yBAAlB,EAAyD;AAC/E,UAAQD,OAAR;AACE,SAAK,WAAL;AACE,iBAAOE,qBAAP,mTAEwBD,yBAAyB,IAAI,aAFrD,EAG8BE,eAAOC,WAHrC,EAOYD,eAAOE,WAPnB;;AAUF,SAAK,SAAL;AACA;AACE,iBAAOH,qBAAP,wTAEwBD,yBAAyB,IAAIE,eAAOG,WAF5D,EAOYH,eAAOI,KAPnB;AAdJ;AAyBD,CA1BD;;AA4BA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD;AAAA,SAA4BA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA7E;AAAA,CAAxB;;AAEA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACF,KAAD,EAA2B;AACtD,MAAMG,MAAM,GAAGJ,eAAe,CAACC,KAAD,CAA9B;;AACA,UAAOA,KAAK,CAACI,QAAb;AAEI,SAAK,MAAL;AACI,2BAAcD,MAAd,cAAwBA,MAAxB;;AAEJ,SAAK,OAAL;AACI,uBAAUA,MAAV,sBAA4BA,MAA5B;;AAEJ,SAAK,MAAL;AACA;AACI,uBAAUA,MAAV;AAVR;AAYD,CAdD;;AAgBA,IAAME,gBAAgB,GAAGC,0BAAOC,MAAV,wuBAOT,UAACP,KAAD;AAAA,SAAYA,KAAK,CAACQ,cAAN,GAAuB,MAAvB,GAAgC,OAA5C;AAAA,CAPS,EAQlBC,oBAAYC,MARM,EAYH,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA7D;AAAA,CAZG,EAgBDC,oBAhBC,EAqBN,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACW,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CArBM,EAsBP,UAACX,KAAD;AAAA,SAAYA,KAAK,CAACW,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CAtBO,CAAtB;;AA6CA,IAAMC,uBAAuB,GAAG,+BAAOP,gBAAP,CAAH,+nBAEL,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACa,wBAAN,GAAiC,aAAjC,GAAiDnB,eAAOC,WAApE;AAAA,CAFK,EAKf,UAACK,KAAD;AAAA,SAAWA,KAAK,CAACc,SAAN,IAAmBpB,eAAOI,KAArC;AAAA,CALe,EAOb,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACc,SAAN,IAAmBpB,eAAOI,KAArC;AAAA,CAPa,EAaHJ,eAAOG,WAbJ,EAiBfH,eAAOI,KAjBQ,EAsBTJ,eAAOqB,WAtBE,EA0BfrB,eAAOI,KA1BQ,EA+BHJ,eAAOsB,WA/BJ,EAmCbtB,eAAOI,KAnCM,EAqCfJ,eAAOI,KArCQ,EAwCzB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACiB,UAAN,GAAmB3B,eAAe,CAAC,SAAD,EAAYU,KAAK,CAACR,yBAAlB,CAAlC,GAAiF,EAA7F;AAAA,CAxCyB,CAA7B;AA2CA,IAAM0B,yBAAyB,GAAG,+BAAOb,gBAAP,CAAH,moBAEP,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACa,wBAAN,GAAiC,aAAjC,GAAiDnB,eAAOI,KAApE;AAAA,CAFO,EAKjB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACc,SAAN,IAAmBpB,eAAOE,WAArC;AAAA,CALiB,EAOf,UAACI,KAAD;AAAA,SAAWA,KAAK,CAACc,SAAN,IAAmBpB,eAAOE,WAArC;AAAA,CAPe,EAaLF,eAAOyB,UAbF,EAiBjBzB,eAAOG,WAjBU,EAsBXH,eAAO0B,WAtBI,EA0BjB1B,eAAOqB,WA1BU,EAgCL,UAACf,KAAD;AAAA,SAAYA,KAAK,CAACa,wBAAN,GAAiC,aAAjC,GAAiDnB,eAAOI,KAApE;AAAA,CAhCK,EAoCfJ,eAAO2B,WApCQ,EAsCjB3B,eAAO2B,WAtCU,EA0C3B,UAACrB,KAAD;AAAA,SAAYA,KAAK,CAACiB,UAAN,GAAmB3B,eAAe,CAAC,WAAD,EAAcU,KAAK,CAACR,yBAApB,CAAlC,GAAmF,EAA/F;AAAA,CA1C2B,CAA/B;AAgEC;AAED,IAAM8B,UAAU,gBAAGC,KAAK,CAACC,UAAN,CAA2C,gBAmBpDC,GAnBoD,EAmB5C;AAAA,MAlBhBC,EAkBgB,QAlBhBA,EAkBgB;AAAA,MAjBhBnC,OAiBgB,QAjBhBA,OAiBgB;AAAA,MAhBhBoC,KAgBgB,QAhBhBA,KAgBgB;AAAA,MAfhBC,MAegB,QAfhBA,MAegB;AAAA,MAdhBpB,cAcgB,QAdhBA,cAcgB;AAAA,MAbhBqB,cAagB,QAbhBA,cAagB;AAAA,MAZhBC,QAYgB,QAZhBA,QAYgB;AAAA,MAXhBjB,wBAWgB,QAXhBA,wBAWgB;AAAA,MAVhBkB,QAUgB,QAVhBA,QAUgB;AAAA,MAThBjB,SASgB,QAThBA,SASgB;AAAA,MARhBH,aAQgB,QARhBA,aAQgB;AAAA,MAPhBqB,QAOgB,QAPhBA,QAOgB;AAAA,MANhB5B,QAMgB,QANhBA,QAMgB;AAAA,MALhBH,YAKgB,QALhBA,YAKgB;AAAA,MAJhBgC,UAIgB,QAJhBA,UAIgB;AAAA,MAHhBzC,yBAGgB,QAHhBA,yBAGgB;AAAA,MAFhB0C,IAEgB,QAFhBA,IAEgB;AAAA,MADhBC,MACgB,QADhBA,MACgB;AAChB,MAAMC,eAAe,GAAGb,KAAK,CAACc,MAAN,CAAkB,IAAlB,CAAxB;;AACA,wBAAoCd,KAAK,CAACe,QAAN,CAAwB,KAAxB,CAApC;AAAA;AAAA,MAAOrB,UAAP;AAAA,MAAmBsB,aAAnB;;AAEA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD,CAJgB,CAahB;;;AACA,UAAQrD,OAAR;AACE,SAAK,WAAL;AACE,0BACE,oBAAC,yBAAD;AACE,QAAA,EAAE,EAAEmC,EADN;AAEE,QAAA,IAAI,EAAEQ,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaR,EAHf;AAIE,QAAA,GAAG,EAAED,GAJP;AAKE,QAAA,OAAO,EAAE,iBAACoB,KAAD;AAAA,iBAAgDjB,MAAM,CAACiB,KAAD,CAAtD;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAACJ,CAAD;AAAA,iBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBb,MAAM,EAA3B,GAAgC,IAA7C;AAAA,SANb;AAOE,QAAA,QAAQ,EAAEG,QAPZ;AAQE,QAAA,cAAc,EAAEvB,cAAc,IAAI,KARpC;AASE,QAAA,YAAY,EAAEqB,cAThB;AAUE,QAAA,wBAAwB,EAAEhB,wBAV5B;AAWE,QAAA,SAAS,EAAEC,SAXb;AAYE,QAAA,aAAa,EAAEH,aAZjB;AAaE,QAAA,QAAQ,EAAEqB,QAAQ,IAAI,CAbxB;AAcE,QAAA,YAAY,EAAE/B,YAAY,IAAI0B,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAd5D;AAeE,QAAA,WAAW,EAAE,qBAACc,CAAD,EAAY;AACvB,cAAI,CAACV,QAAD,IAAa,CAACd,UAAlB,EAA8BmB,eAAe,CAACU,OAAhB,GAA0B,IAA1B;AAC/B,SAjBH;AAkBE,QAAA,OAAO,EAAE,iBAACL,CAAD,EAAY;AACnB,cAAI,CAACV,QAAL,EAAe;AACb,gBAAI,CAACK,eAAe,CAACU,OAArB,EAA8BP,aAAa,CAAC,IAAD,CAAb,CAA9B,KACKH,eAAe,CAACU,OAAhB,GAA0B,KAA1B;AACN;AACF,SAvBH;AAwBE,QAAA,MAAM,EAAE,kBAAM;AACZP,UAAAA,aAAa,CAAC,KAAD,CAAb;AACD,SA1BH;AA2BE,QAAA,UAAU,EAAEtB,UA3Bd;AA4BE,QAAA,UAAU,EAAEgB,UA5Bd;AA6BE,QAAA,MAAM,EAAEE,MA7BV;AA8BE,QAAA,yBAAyB,EAAE3C;AA9B7B,sBA+BE,iCAAMsC,QAAN,CA/BF,CADF;;AAmCF,SAAK,SAAL;AACA;AACE,0BACE,oBAAC,uBAAD;AACE,QAAA,EAAE,EAAEJ,EADN;AAEE,QAAA,IAAI,EAAEQ,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaR,EAHf;AAIE,QAAA,QAAQ,EAAEtB,QAJZ;AAKE,QAAA,GAAG,EAAEqB,GALP;AAME,QAAA,OAAO,EAAE,iBAACoB,KAAD;AAAA,iBAAgDjB,MAAM,CAACiB,KAAD,CAAtD;AAAA,SANX;AAOE,QAAA,SAAS,EAAE,mBAACJ,CAAD;AAAA,iBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBb,MAAM,EAA3B,GAAgC,IAA7C;AAAA,SAPb;AAQE,QAAA,QAAQ,EAAEG,QARZ;AASE,QAAA,cAAc,EAAEvB,cAAc,IAAI,KATpC;AAUE,QAAA,YAAY,EAAEqB,cAVhB;AAWE,QAAA,wBAAwB,EAAEhB,wBAX5B;AAYE,QAAA,SAAS,EAAEC,SAZb;AAaE,QAAA,aAAa,EAAEH,aAbjB;AAcE,QAAA,QAAQ,EAAEqB,QAAQ,IAAI,CAdxB;AAeE,QAAA,YAAY,EAAE/B,YAAY,IAAI0B,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAf5D;AAgBE,QAAA,WAAW,EAAE,qBAACc,CAAD,EAAY;AACvB,cAAI,CAACV,QAAD,IAAa,CAACd,UAAlB,EAA8BmB,eAAe,CAACU,OAAhB,GAA0B,IAA1B;AAC/B,SAlBH;AAmBE,QAAA,OAAO,EAAE,iBAACL,CAAD,EAAY;AACnB,cAAI,CAACV,QAAL,EAAe;AACb,gBAAI,CAACK,eAAe,CAACU,OAArB,EAA8BP,aAAa,CAAC,IAAD,CAAb,CAA9B,KACKH,eAAe,CAACU,OAAhB,GAA0B,KAA1B;AACN;AACF,SAxBH;AAyBE,QAAA,MAAM,EAAE,kBAAM;AACZP,UAAAA,aAAa,CAAC,KAAD,CAAb;AACD,SA3BH;AA4BE,QAAA,UAAU,EAAEtB,UA5Bd;AA6BE,QAAA,UAAU,EAAEgB,UA7Bd;AA8BE,QAAA,MAAM,EAAEE,MA9BV;AA+BE,QAAA,yBAAyB,EAAE3C;AA/B7B,sBAgCE,iCAAMsC,QAAN,CAhCF,CADF;AAvCJ;AA4ED,CA7GkB,CAAnB;;AApBEJ,EAAAA,E;AACAnC,EAAAA,O,4BAAU,S,EAAY,W;AACtBoC,EAAAA,K,4BAAQ,Q,EAAW,U;AACnBC,EAAAA,M;AACApB,EAAAA,c;AAEAqB,EAAAA,c;AACAE,EAAAA,Q;AACAlB,EAAAA,wB;AACAC,EAAAA,S;AACAH,EAAAA,a;AACAqB,EAAAA,Q;AACA/B,EAAAA,Y;AACAgC,EAAAA,U;AACAzC,EAAAA,yB;AAEAsC,EAAAA,Q;AACAK,EAAAA,M;;eAkHab,U","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","tabbedHereBackgroundColor","css","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","supressFocusRef","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","event","current"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  React.useEffect(() => {\n    !!disabled && setTabbedHere(false)\n  }, [disabled]);\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/js/Button/__tests__/BackButton.test.js

@@ -6,6 +6,8 @@ var _react2 = require("@testing-library/react");
 
 var _index = require("../index");
 
+var _types = require("../../types");
+
 require("jest-styled-components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -13,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 describe('<BackButton />', function () {
   it('should render back button', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.BackButton, {
-      size: 'Small'
+      size: _types.Size.Small
     }, "Back Button")),
         queryByText = _render.queryByText;
 
@@ -22,7 +24,7 @@ describe('<BackButton />', function () {
   it('should call action on click', function () {
     var clickMock = jest.fn(function () {});
     var component = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.BackButton, {
-      size: 'Small',
+      size: _types.Size.Small,
       onClick: clickMock
     }, "Back Button"));
     (0, _react2.act)(function () {
@@ -33,7 +35,7 @@ describe('<BackButton />', function () {
   it('should not call action on click when disabled', function () {
     var clickMock = jest.fn(function () {});
     var component = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.BackButton, {
-      size: 'Small',
+      size: _types.Size.Small,
       disabled: true,
       onClick: clickMock
     }, "Back Button"));

package/dist/js/Button/__tests__/BackButton.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Button/__tests__/BackButton.test.tsx"],"names":["describe","it","queryByText","expect","toBeDefined","clickMock","jest","fn","component","getByText","click","toBeCalled","toBeCalledTimes"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;;;AAEAA,QAAQ,CAAC,gBAAD,EAAmB,YAAM;AAC/BC,EAAAA,EAAE,CAAC,2BAAD,EAA8B,YAAY;AAC1C,kBAAsB,kCAAO,6BAAC,iBAAD;AAAY,MAAA,IAAI,EAAE;AAAlB,qBAAP,CAAtB;AAAA,QAAOC,WAAP,WAAOA,WAAP;;AACAC,IAAAA,MAAM,CAACD,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCE,WAAnC;AACD,GAHC,CAAF;AAIAH,EAAAA,EAAE,CAAC,6BAAD,EAAgC,YAAY;AAC5C,QAAMI,SAAS,GAAGC,IAAI,CAACC,EAAL,CAAQ,YAAM,CAAE,CAAhB,CAAlB;AACA,QAAMC,SAAS,GAAG,kCAAO,6BAAC,iBAAD;AAAY,MAAA,IAAI,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH;AAApC,qBAAP,CAAlB;AACA,qBAAI,YAAM;AACRG,MAAAA,SAAS,CAACC,SAAV,CAAoB,aAApB,EAAmCC,KAAnC;AACD,KAFD;AAGAP,IAAAA,MAAM,CAACE,SAAD,CAAN,CAAkBM,UAAlB;AACD,GAPC,CAAF;AAQAV,EAAAA,EAAE,CAAC,+CAAD,EAAkD,YAAY;AAC9D,QAAMI,SAAS,GAAGC,IAAI,CAACC,EAAL,CAAQ,YAAM,CAAE,CAAhB,CAAlB;AACA,QAAMC,SAAS,GAAG,kCAAO,6BAAC,iBAAD;AAAY,MAAA,IAAI,EAAE,OAAlB;AAA2B,MAAA,QAAQ,EAAE,IAArC;AAA2C,MAAA,OAAO,EAAEH;AAApD,qBAAP,CAAlB;AACA,qBAAI,YAAM;AACRG,MAAAA,SAAS,CAACC,SAAV,CAAoB,aAApB,EAAmCC,KAAnC;AACD,KAFD;AAGAP,IAAAA,MAAM,CAACE,SAAD,CAAN,CAAkBO,eAAlB,CAAkC,CAAlC;AACD,GAPC,CAAF;AASD,CAtBO,CAAR","sourcesContent":["import React from 'react';\nimport {act, render} from '@testing-library/react';\nimport {BackButton} from '../index';\nimport 'jest-styled-components';\n\ndescribe('<BackButton />', () => {\n  it('should render back button', function () {\n    const {queryByText} = render(<BackButton size={'Small'}>Back Button</BackButton>);\n    expect(queryByText('Back Button')).toBeDefined();\n  });\n  it('should call action on click', function () {\n    const clickMock = jest.fn(() => {});\n    const component = render(<BackButton size={'Small'} onClick={clickMock}>Back Button</BackButton>);\n    act(() => {\n      component.getByText('Back Button').click();\n    });\n    expect(clickMock).toBeCalled();\n  });\n  it('should not call action on click when disabled', function () {\n    const clickMock = jest.fn(() => {});\n    const component = render(<BackButton size={'Small'} disabled={true} onClick={clickMock}>Back Button</BackButton>);\n    act(() => {\n      component.getByText('Back Button').click();\n    });\n    expect(clickMock).toBeCalledTimes(0);\n  });\n\n});\n"],"file":"BackButton.test.js"}
+{"version":3,"sources":["../../../../src/Button/__tests__/BackButton.test.tsx"],"names":["describe","it","Size","Small","queryByText","expect","toBeDefined","clickMock","jest","fn","component","getByText","click","toBeCalled","toBeCalledTimes"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEAA,QAAQ,CAAC,gBAAD,EAAmB,YAAM;AAC/BC,EAAAA,EAAE,CAAC,2BAAD,EAA8B,YAAY;AAC1C,kBAAsB,kCAAO,6BAAC,iBAAD;AAAY,MAAA,IAAI,EAAEC,YAAKC;AAAvB,qBAAP,CAAtB;AAAA,QAAOC,WAAP,WAAOA,WAAP;;AACAC,IAAAA,MAAM,CAACD,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCE,WAAnC;AACD,GAHC,CAAF;AAIAL,EAAAA,EAAE,CAAC,6BAAD,EAAgC,YAAY;AAC5C,QAAMM,SAAS,GAAGC,IAAI,CAACC,EAAL,CAAQ,YAAM,CAAE,CAAhB,CAAlB;AACA,QAAMC,SAAS,GAAG,kCAAO,6BAAC,iBAAD;AAAY,MAAA,IAAI,EAAER,YAAKC,KAAvB;AAA8B,MAAA,OAAO,EAAEI;AAAvC,qBAAP,CAAlB;AACA,qBAAI,YAAM;AACRG,MAAAA,SAAS,CAACC,SAAV,CAAoB,aAApB,EAAmCC,KAAnC;AACD,KAFD;AAGAP,IAAAA,MAAM,CAACE,SAAD,CAAN,CAAkBM,UAAlB;AACD,GAPC,CAAF;AAQAZ,EAAAA,EAAE,CAAC,+CAAD,EAAkD,YAAY;AAC9D,QAAMM,SAAS,GAAGC,IAAI,CAACC,EAAL,CAAQ,YAAM,CAAE,CAAhB,CAAlB;AACA,QAAMC,SAAS,GAAG,kCAAO,6BAAC,iBAAD;AAAY,MAAA,IAAI,EAAER,YAAKC,KAAvB;AAA8B,MAAA,QAAQ,EAAE,IAAxC;AAA8C,MAAA,OAAO,EAAEI;AAAvD,qBAAP,CAAlB;AACA,qBAAI,YAAM;AACRG,MAAAA,SAAS,CAACC,SAAV,CAAoB,aAApB,EAAmCC,KAAnC;AACD,KAFD;AAGAP,IAAAA,MAAM,CAACE,SAAD,CAAN,CAAkBO,eAAlB,CAAkC,CAAlC;AACD,GAPC,CAAF;AASD,CAtBO,CAAR","sourcesContent":["import React from 'react';\nimport {act, render} from '@testing-library/react';\nimport {BackButton} from '../index';\nimport {Size} from '../../types'\nimport 'jest-styled-components';\n\ndescribe('<BackButton />', () => {\n  it('should render back button', function () {\n    const {queryByText} = render(<BackButton size={Size.Small}>Back Button</BackButton>);\n    expect(queryByText('Back Button')).toBeDefined();\n  });\n  it('should call action on click', function () {\n    const clickMock = jest.fn(() => {});\n    const component = render(<BackButton size={Size.Small} onClick={clickMock}>Back Button</BackButton>);\n    act(() => {\n      component.getByText('Back Button').click();\n    });\n    expect(clickMock).toBeCalled();\n  });\n  it('should not call action on click when disabled', function () {\n    const clickMock = jest.fn(() => {});\n    const component = render(<BackButton size={Size.Small} disabled={true} onClick={clickMock}>Back Button</BackButton>);\n    act(() => {\n      component.getByText('Back Button').click();\n    });\n    expect(clickMock).toBeCalledTimes(0);\n  });\n\n});\n"],"file":"BackButton.test.js"}

package/dist/js/Chips/ActionChip.js

@@ -11,6 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _index = require("../icons/index");
 
+var _types = require("../types");
+
 var _ChipStyles = require("./ChipStyles");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -43,9 +45,9 @@ var ActionChip = function ActionChip(_ref) {
   var getIconSize = function getIconSize() {
     var iconSize; // Calculate correct icon size
 
-    if (size === 'small') {
+    if (size === _types.Size.Small) {
       iconSize = '16px';
-    } else if (size === 'medium') {
+    } else if (size === _types.Size.Medium) {
       iconSize = '20px';
     } else {
       iconSize = '24px';

package/dist/js/Chips/ActionChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/ActionChip.tsx"],"names":["ActionChip","icon","text","variant","size","disabled","onClick","getIconSize","iconSize","icons","className"],"mappings":";;;;;;;;;AAGC;;AAKA;;AAKA;;;;;;AAbD;AACA;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;AAQC,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAAuE;AAAA,MAApEC,IAAoE,QAApEA,IAAoE;AAAA,MAA9DC,IAA8D,QAA9DA,IAA8D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,IAA+C,QAA/CA,IAA+C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,MAA/BC,QAA+B,QAA/BA,OAA+B;;AAClI;AACH;AACA;AACA;AACG,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAK,OAAb,EAAsB;AACpBI,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAK,QAAb,EAAuB;AAC5BI,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE,uDACE,oBAAC,+BAAD;AAAqB,IAAA,SAAS,YAAKJ,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBF,OAArC,cAAgDF,IAAI,IAAI,WAAxD,CAA9B;AAAqG,IAAA,OAAO,EAAE;AAAA,aAAMK,QAAO,EAAb;AAAA;AAA9G,KAEGL,IAAI,IAAIQ,mBAAMR,IAAN,EAAY;AAAEG,IAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBG,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFX,EAKGR,IALH,CADF,CADF;AAWD,CAlCD;;eAoCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n \n /**\n  * Import custom styles.\n  */\n import { ActionChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { ActionChipProps } from './ChipTypes';\n \n const ActionChip: React.FunctionComponent<ActionChipProps> = ({ icon, text, variant, size, disabled, onClick }: ActionChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === 'small') {\n       iconSize = '16px';\n     } else if (size === 'medium') {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Action Chip component.\n    */\n   return (\n     <>\n       <ActionChipContainer className={`${size} ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n         { /* Let's render icon if it is passed */ }\n         {icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </ActionChipContainer>\n     </>\n   );\n };\n \n export default ActionChip;\n "],"file":"ActionChip.js"}
+{"version":3,"sources":["../../../src/Chips/ActionChip.tsx"],"names":["ActionChip","icon","text","variant","size","disabled","onClick","getIconSize","iconSize","Size","Small","Medium","icons","className"],"mappings":";;;;;;;;;AAGC;;AAKA;;AACA;;AAIA;;;;;;AAbD;AACA;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;AAQC,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAAuE;AAAA,MAApEC,IAAoE,QAApEA,IAAoE;AAAA,MAA9DC,IAA8D,QAA9DA,IAA8D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,IAA+C,QAA/CA,IAA+C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,MAA/BC,QAA+B,QAA/BA,OAA+B;;AAClI;AACH;AACA;AACA;AACG,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAKK,YAAKC,KAAlB,EAAyB;AACvBF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAKK,YAAKE,MAAlB,EAA0B;AAC/BH,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE,uDACE,oBAAC,+BAAD;AAAqB,IAAA,SAAS,YAAKJ,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBF,OAArC,cAAgDF,IAAI,IAAI,WAAxD,CAA9B;AAAqG,IAAA,OAAO,EAAE;AAAA,aAAMK,QAAO,EAAb;AAAA;AAA9G,KAEGL,IAAI,IAAIW,mBAAMX,IAAN,EAAY;AAAEG,IAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBM,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFX,EAKGX,IALH,CADF,CADF;AAWD,CAlCD;;eAoCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n import {Size} from '../types'; \n /**\n  * Import custom styles.\n  */\n import { ActionChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { ActionChipProps } from './ChipTypes';\n \n const ActionChip: React.FunctionComponent<ActionChipProps> = ({ icon, text, variant, size, disabled, onClick }: ActionChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Action Chip component.\n    */\n   return (\n     <>\n       <ActionChipContainer className={`${size} ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n         { /* Let's render icon if it is passed */ }\n         {icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </ActionChipContainer>\n     </>\n   );\n };\n \n export default ActionChip;\n "],"file":"ActionChip.js"}

package/dist/js/Chips/ChipInput.js

@@ -11,6 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _index = require("./index");
 
+var _types = require("../types");
+
 var _styling = require("../InputFields/styling");
 
 var _styles = require("../styles");
@@ -150,7 +152,7 @@ var ChipInput = function ChipInput(_ref) {
   }, chips.map(function (chip, index) {
     return /*#__PURE__*/React.createElement(_index.InputChip, {
       icon: icon,
-      size: "medium",
+      size: _types.Size.Medium,
       variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
       text: chip,
       onRemove: function onRemove() {

package/dist/js/Chips/ChipInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/ChipInput.tsx"],"names":["ChipInput","values","inputId","variants","required","icon","placeholder","validationType","validationMessage","onValueChange","chipInput","React","useState","chips","setChips","value","setValue","useEffect","onAddChip","event","keyCode","preventDefault","onRemoveChip","index","elementToAdd","newChips","splice","onEditChip","text","focus","map","chip","length","target","input","COLORS","critical_500","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from './index';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipInputProps } from './ChipTypes';\n\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\n  values,\n  inputId,\n  variants,\n  required,\n  icon,\n  placeholder,\n  validationType,\n  validationMessage,\n  onValueChange,\n}: ChipInputProps) => {\n  // Globally used variables within the chip input\n  let chipInput: HTMLInputElement;\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n      // Let's prevent default action - adding new key to the value\n      event.preventDefault();\n\n      // Let's add the chip\n      setChips([...chips, value]);\n      onValueChange([...chips, value]);\n\n      // Let's clear the old value\n      chipInput.value = '';\n      setValue('');\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\n   */\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    if (elementToAdd) {\n      newChips.splice(index, 1, elementToAdd);\n    } else {\n      newChips.splice(index, 1);\n    }\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange([...newChips]);\n  };\n\n  /**\n   * Changes a status of the chip to edit.\n   * @param text - Text of the chip that is being edited.\n   * @param index - Index of the chip in the array.\n   */\n  const onEditChip = (text: string, index: number): void => {\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n    if (chipInput.value !== '') {\n      // Let's replace the chip\n      onRemoveChip(index, chipInput.value);\n    } else {\n      // Let's just remove the chip\n      onRemoveChip(index);\n    }\n\n    // Let's update the text value of input field\n    chipInput.value = text;\n    setValue(text);\n  };\n\n  /**\n   * Return Chip Input component.\n   */\n  return (\n    <>\n      {required && <RequiredStar>*</RequiredStar>}\n      <ChipInputContainer onClick={() => chipInput.focus()} id={inputId} className={validationType}>\n        {chips.map((chip: string, index: number) => (\n          <InputChip\n            icon={icon}\n            size=\"medium\"\n            variant={variants && variants.length && variants[index] ? variants[index] : 'normal'}\n            text={chip}\n            onRemove={() => onRemoveChip(index)}\n            onClick={() => onEditChip(chip, index)}\n            key={`chip_${index}`}></InputChip>\n        ))}\n        <ChipInputEl\n          type=\"text\"\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n            onAddChip(event);\n          }}\n          placeholder={placeholder && chips.length === 0 ? placeholder : ''}\n          ref={(input: HTMLInputElement) => {\n            chipInput = input;\n          }}\n        />\n      </ChipInputContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </>\n  );\n};\n\nexport default ChipInput;\n"],"file":"ChipInput.js"}
+{"version":3,"sources":["../../../src/Chips/ChipInput.tsx"],"names":["ChipInput","values","inputId","variants","required","icon","placeholder","validationType","validationMessage","onValueChange","chipInput","React","useState","chips","setChips","value","setValue","useEffect","onAddChip","event","keyCode","preventDefault","onRemoveChip","index","elementToAdd","newChips","splice","onEditChip","text","focus","map","chip","Size","Medium","length","target","input","COLORS","critical_500","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from './index';\nimport { Size } from '../types';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipInputProps } from './ChipTypes';\n\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\n  values,\n  inputId,\n  variants,\n  required,\n  icon,\n  placeholder,\n  validationType,\n  validationMessage,\n  onValueChange,\n}: ChipInputProps) => {\n  // Globally used variables within the chip input\n  let chipInput: HTMLInputElement;\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n      // Let's prevent default action - adding new key to the value\n      event.preventDefault();\n\n      // Let's add the chip\n      setChips([...chips, value]);\n      onValueChange([...chips, value]);\n\n      // Let's clear the old value\n      chipInput.value = '';\n      setValue('');\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\n   */\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    if (elementToAdd) {\n      newChips.splice(index, 1, elementToAdd);\n    } else {\n      newChips.splice(index, 1);\n    }\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange([...newChips]);\n  };\n\n  /**\n   * Changes a status of the chip to edit.\n   * @param text - Text of the chip that is being edited.\n   * @param index - Index of the chip in the array.\n   */\n  const onEditChip = (text: string, index: number): void => {\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n    if (chipInput.value !== '') {\n      // Let's replace the chip\n      onRemoveChip(index, chipInput.value);\n    } else {\n      // Let's just remove the chip\n      onRemoveChip(index);\n    }\n\n    // Let's update the text value of input field\n    chipInput.value = text;\n    setValue(text);\n  };\n\n  /**\n   * Return Chip Input component.\n   */\n  return (\n    <>\n      {required && <RequiredStar>*</RequiredStar>}\n      <ChipInputContainer onClick={() => chipInput.focus()} id={inputId} className={validationType}>\n        {chips.map((chip: string, index: number) => (\n          <InputChip\n            icon={icon}\n            size={Size.Medium}\n            variant={variants && variants.length && variants[index] ? variants[index] : 'normal'}\n            text={chip}\n            onRemove={() => onRemoveChip(index)}\n            onClick={() => onEditChip(chip, index)}\n            key={`chip_${index}`}></InputChip>\n        ))}\n        <ChipInputEl\n          type=\"text\"\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n            onAddChip(event);\n          }}\n          placeholder={placeholder && chips.length === 0 ? placeholder : ''}\n          ref={(input: HTMLInputElement) => {\n            chipInput = input;\n          }}\n        />\n      </ChipInputContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </>\n  );\n};\n\nexport default ChipInput;\n"],"file":"ChipInput.js"}

package/dist/js/Chips/ChipTypes.d.ts

@@ -1,9 +1,10 @@
+import { Size } from '../types';
 /**
  * Types for the chips.
  */
 export interface ChipProps {
     variant: ChipVariant;
-    size: ChipSize;
+    size: Size;
     disabled?: boolean;
 }
 export interface InputChipProps extends ChipProps {
@@ -27,7 +28,7 @@ export interface ChoiceChipProps extends ChipProps {
 export interface ChipValue {
     value: string;
     label: string;
-    size: ChipSize;
+    size: Size;
 }
 export interface ActionChipProps extends ChipProps {
     text: string;
@@ -47,6 +48,5 @@ export interface ChipInputProps {
     onValueChange: (chips: string[]) => void;
 }
 declare type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckComplete' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOff' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
-declare type ChipSize = 'small' | 'medium' | 'large';
 declare type ChipVariant = 'normal' | 'warning' | 'error';
 export {};

package/dist/js/Chips/FilterChip.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
+var _types = require("../types");
+
 var _index = require("../icons/index");
 
 var _ChipStyles = require("./ChipStyles");
@@ -43,9 +45,9 @@ var FilterChip = function FilterChip(_ref) {
   var getIconSize = function getIconSize() {
     var iconSize; // Calculate correct icon size
 
-    if (size === 'small') {
+    if (size === _types.Size.Small) {
       iconSize = '16px';
-    } else if (size === 'medium') {
+    } else if (size === _types.Size.Medium) {
       iconSize = '20px';
     } else {
       iconSize = '24px';

package/dist/js/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","variant","size","disabled","onClick","getIconSize","iconSize","icons","CheckComplete","className"],"mappings":";;;;;;;;;AAGC;;AAKA;;AAKA;;;;;;AAbD;AACA;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;AAQC,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAA2E;AAAA,MAAxEC,QAAwE,QAAxEA,QAAwE;AAAA,MAA9DC,IAA8D,QAA9DA,IAA8D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,IAA+C,QAA/CA,IAA+C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,MAA/BC,QAA+B,QAA/BA,OAA+B;;AACtI;AACH;AACA;AACA;AACG,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAK,OAAb,EAAsB;AACpBI,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAK,QAAb,EAAuB;AAC5BI,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE,uDACE,oBAAC,+BAAD;AAAqB,IAAA,SAAS,YAAKJ,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBJ,QAAQ,GAAG,oBAAH,GAA0BE,OAAvE,CAA9B;AAAgH,IAAA,OAAO,EAAE;AAAA,aAAMG,QAAO,EAAb;AAAA;AAAzH,KAEGL,QAAQ,IAAIQ,mBAAMC,aAAN,CAAoB;AAAEN,IAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBI,IAAAA,SAAS,EAAE;AAAlC,GAApB,CAFf,EAKGT,IALH,CADF,CADF;AAWD,CAlCD;;eAoCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n \n /**\n  * Import custom styles.\n  */\n import { FilterChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { FilterChipProps } from './ChipTypes';\n \n const FilterChip: React.FunctionComponent<FilterChipProps> = ({ selected, text, variant, size, disabled, onClick }: FilterChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === 'small') {\n       iconSize = '16px';\n     } else if (size === 'medium') {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Filter Chip component.\n    */\n   return (\n     <>\n       <FilterChipContainer className={`${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`} onClick={() => onClick()}>\n         { /* Let's render icon if the chip is selected */ }\n         {selected && icons.CheckComplete({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </FilterChipContainer>\n     </>\n   );\n };\n \n export default FilterChip;\n "],"file":"FilterChip.js"}
+{"version":3,"sources":["../../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","variant","size","disabled","onClick","getIconSize","iconSize","Size","Small","Medium","icons","CheckComplete","className"],"mappings":";;;;;;;;;AAGC;;AACD;;AAKC;;AAKA;;;;;;AAdD;AACA;AACA;;AAIC;AACD;AACA;;AAGC;AACD;AACA;AAQC,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAA2E;AAAA,MAAxEC,QAAwE,QAAxEA,QAAwE;AAAA,MAA9DC,IAA8D,QAA9DA,IAA8D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,IAA+C,QAA/CA,IAA+C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,MAA/BC,QAA+B,QAA/BA,OAA+B;;AACtI;AACH;AACA;AACA;AACG,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAKK,YAAKC,KAAlB,EAAyB;AACvBF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAKK,YAAKE,MAAlB,EAA0B;AAC/BH,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE,uDACE,oBAAC,+BAAD;AAAqB,IAAA,SAAS,YAAKJ,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBJ,QAAQ,GAAG,oBAAH,GAA0BE,OAAvE,CAA9B;AAAgH,IAAA,OAAO,EAAE;AAAA,aAAMG,QAAO,EAAb;AAAA;AAAzH,KAEGL,QAAQ,IAAIW,mBAAMC,aAAN,CAAoB;AAAET,IAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBO,IAAAA,SAAS,EAAE;AAAlC,GAApB,CAFf,EAKGZ,IALH,CADF,CADF;AAWD,CAlCD;;eAoCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\nimport { Size } from '../types';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n \n /**\n  * Import custom styles.\n  */\n import { FilterChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { FilterChipProps } from './ChipTypes';\n \n const FilterChip: React.FunctionComponent<FilterChipProps> = ({ selected, text, variant, size, disabled, onClick }: FilterChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Filter Chip component.\n    */\n   return (\n     <>\n       <FilterChipContainer className={`${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`} onClick={() => onClick()}>\n         { /* Let's render icon if the chip is selected */ }\n         {selected && icons.CheckComplete({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </FilterChipContainer>\n     </>\n   );\n };\n \n export default FilterChip;\n "],"file":"FilterChip.js"}

package/dist/js/Chips/InputChip.js

@@ -13,6 +13,8 @@ var _index = require("../icons/index");
 
 var _index2 = require("../Button/index");
 
+var _types = require("../types");
+
 var _ChipStyles = require("./ChipStyles");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -46,9 +48,9 @@ var InputChip = function InputChip(_ref) {
   var getIconSize = function getIconSize() {
     var iconSize; // Calculate correct icon size
 
-    if (size === 'small') {
+    if (size === _types.Size.Small) {
       iconSize = '16px';
-    } else if (size === 'medium') {
+    } else if (size === _types.Size.Medium) {
       iconSize = '20px';
     } else {
       iconSize = '24px';

package/dist/js/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["InputChip","icon","text","variant","size","disabled","onClick","onRemove","getIconSize","iconSize","onRemoveClick","event","stopPropagation","icons","className","Close"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;;;;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAQA,IAAMA,SAAkD,GAAG,SAArDA,SAAqD,OAAgF;AAAA,MAA7EC,IAA6E,QAA7EA,IAA6E;AAAA,MAAvEC,IAAuE,QAAvEA,IAAuE;AAAA,MAAjEC,OAAiE,QAAjEA,OAAiE;AAAA,MAAxDC,IAAwD,QAAxDA,IAAwD;AAAA,MAAlDC,QAAkD,QAAlDA,QAAkD;AAAA,MAAxCC,QAAwC,QAAxCA,OAAwC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;;AACzI;AACF;AACA;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIL,IAAI,KAAK,OAAb,EAAsB;AACpBK,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIL,IAAI,KAAK,QAAb,EAAuB;AAC5BK,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACF;AACA;AACA;;;AACE,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4D;AAChF,QAAIA,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACC,eAAN;AACD;;AAEDL,IAAAA,QAAQ;AACT,GAND;AAQA;AACF;AACA;;;AACE,sBACE,uDACE,oBAAC,yBAAD;AAAe,IAAA,SAAS,YAAKH,IAAL,0BAAyBC,QAAQ,GAAG,UAAH,GAAgBF,OAAjD,cAA4DF,IAAI,IAAI,WAApE,CAAxB;AAA2G,IAAA,OAAO,EAAE;AAAA,aAAMK,QAAO,EAAb;AAAA;AAApH,KAEGH,OAAO,KAAK,OAAZ,IAAuBF,IAAvB,IAA+BY,mBAAMZ,IAAN,EAAY;AAAEG,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBM,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFlC,EAKGZ,IALH,eAQE,oBAAC,kBAAD;AACE,IAAA,OAAO,EAAC,WADV;AAEE,IAAA,KAAK,EAAC,UAFR;AAGE,IAAA,wBAAwB,MAH1B;AAIE,IAAA,MAAM,EAAE,gBAACS,KAAD;AAAA,aAA4DD,aAAa,CAACC,KAAD,CAAzE;AAAA,KAJV;AAKE,IAAA,QAAQ,EAAEN;AALZ,KAMGQ,mBAAME,KAAN,CAAY;AAAEX,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBM,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CANH,CARF,CADF,CADF;AAqBD,CAxDD;;eA0Ded,S","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons as icons } from '../icons/index';\nimport { IconButton } from '../Button/index';\n\n/**\n * Import custom styles.\n */\nimport { ChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { InputChipProps } from './ChipTypes';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({ icon, text, variant, size, disabled, onClick, onRemove }: InputChipProps) => {\n  /**\n   * Retrieves icon size based on the chip size.\n   * @returns A string indicating the icon size.\n   */\n  const getIconSize = (): string => {\n    let iconSize: string;\n\n    // Calculate correct icon size\n    if (size === 'small') {\n      iconSize = '16px';\n    } else if (size === 'medium') {\n      iconSize = '20px';\n    } else {\n      iconSize = '24px';\n    }\n\n    return iconSize;\n  };\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n        {/* Let's render icon if it is passed */}\n        {variant !== 'error' && icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n\n        {/* Let's render text */}\n        {text}\n\n        {/* Let's render clear icon */}\n        <IconButton\n          variant=\"secondary\"\n          shape=\"circular\"\n          useTransparentBackground\n          action={(event: React.MouseEvent<HTMLButtonElement> | undefined) => onRemoveClick(event)}\n          disabled={disabled}>\n          {icons.Close({ size: getIconSize(), className: 'remove' })}\n        </IconButton>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.js"}
+{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["InputChip","icon","text","variant","size","disabled","onClick","onRemove","getIconSize","iconSize","Size","Small","Medium","onRemoveClick","event","stopPropagation","icons","className","Close"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;;;;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAQA,IAAMA,SAAkD,GAAG,SAArDA,SAAqD,OAAgF;AAAA,MAA7EC,IAA6E,QAA7EA,IAA6E;AAAA,MAAvEC,IAAuE,QAAvEA,IAAuE;AAAA,MAAjEC,OAAiE,QAAjEA,OAAiE;AAAA,MAAxDC,IAAwD,QAAxDA,IAAwD;AAAA,MAAlDC,QAAkD,QAAlDA,QAAkD;AAAA,MAAxCC,QAAwC,QAAxCA,OAAwC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;;AACzI;AACF;AACA;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIL,IAAI,KAAKM,YAAKC,KAAlB,EAAyB;AACvBF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIL,IAAI,KAAKM,YAAKE,MAAlB,EAA0B;AAC/BH,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACF;AACA;AACA;;;AACE,MAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4D;AAChF,QAAIA,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACC,eAAN;AACD;;AAEDR,IAAAA,QAAQ;AACT,GAND;AAQA;AACF;AACA;;;AACE,sBACE,uDACE,oBAAC,yBAAD;AAAe,IAAA,SAAS,YAAKH,IAAL,0BAAyBC,QAAQ,GAAG,UAAH,GAAgBF,OAAjD,cAA4DF,IAAI,IAAI,WAApE,CAAxB;AAA2G,IAAA,OAAO,EAAE;AAAA,aAAMK,QAAO,EAAb;AAAA;AAApH,KAEGH,OAAO,KAAK,OAAZ,IAAuBF,IAAvB,IAA+Be,mBAAMf,IAAN,EAAY;AAAEG,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBS,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFlC,EAKGf,IALH,eAQE,oBAAC,kBAAD;AACE,IAAA,OAAO,EAAC,WADV;AAEE,IAAA,KAAK,EAAC,UAFR;AAGE,IAAA,wBAAwB,MAH1B;AAIE,IAAA,MAAM,EAAE,gBAACY,KAAD;AAAA,aAA4DD,aAAa,CAACC,KAAD,CAAzE;AAAA,KAJV;AAKE,IAAA,QAAQ,EAAET;AALZ,KAMGW,mBAAME,KAAN,CAAY;AAAEd,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBS,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CANH,CARF,CADF,CADF;AAqBD,CAxDD;;eA0DejB,S","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons as icons } from '../icons/index';\nimport { IconButton } from '../Button/index';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { ChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { InputChipProps } from './ChipTypes';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({ icon, text, variant, size, disabled, onClick, onRemove }: InputChipProps) => {\n  /**\n   * Retrieves icon size based on the chip size.\n   * @returns A string indicating the icon size.\n   */\n  const getIconSize = (): string => {\n    let iconSize: string;\n\n    // Calculate correct icon size\n    if (size === Size.Small) {\n      iconSize = '16px';\n    } else if (size === Size.Medium) {\n      iconSize = '20px';\n    } else {\n      iconSize = '24px';\n    }\n\n    return iconSize;\n  };\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n        {/* Let's render icon if it is passed */}\n        {variant !== 'error' && icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n\n        {/* Let's render text */}\n        {text}\n\n        {/* Let's render clear icon */}\n        <IconButton\n          variant=\"secondary\"\n          shape=\"circular\"\n          useTransparentBackground\n          action={(event: React.MouseEvent<HTMLButtonElement> | undefined) => onRemoveClick(event)}\n          disabled={disabled}>\n          {icons.Close({ size: getIconSize(), className: 'remove' })}\n        </IconButton>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.js"}

package/dist/js/Dropdown/BasicDropdown.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DropdownItem } from './DropdownContent';
+import { Size } from '../types';
 interface DropdownFilterProps {
     id: string;
     list: DropdownItem[];
@@ -16,6 +17,7 @@ interface DropdownFilterProps {
     maxHeight?: string;
     placeholder?: string;
     onSelect?: (value: string[]) => void;
+    setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
     initalValue?: string;
     disableSorting?: boolean;
     messageOnNoResults?: string;
@@ -24,8 +26,10 @@ interface DropdownFilterProps {
     isButton?: boolean;
     activeValidationMessage?: string;
     autofilledMessage?: string;
-    size?: 'small' | 'medium';
+    size?: Size.Small | Size.Medium;
     margin?: string;
+    dropdownMenuValues?: string[];
+    minWidth?: string;
 }
-declare const BasicDropdown: ({ id, list, placeholder, onSelect, initalValue, disableSorting, messageOnNoResults, itemsType, action, actionLabel, actionVariant, actionIcon, actionLoading, actionDisabled, pinTopItem, multiSelect, scrollable, maxHeight, disabled, locked, isButton, activeValidationMessage, autofilledMessage, size, margin, }: DropdownFilterProps) => JSX.Element;
+declare const BasicDropdown: ({ id, list, placeholder, onSelect, setDropdownMenuValues, initalValue, disableSorting, messageOnNoResults, itemsType, action, actionLabel, actionVariant, actionIcon, actionLoading, actionDisabled, pinTopItem, multiSelect, scrollable, maxHeight, disabled, locked, isButton, activeValidationMessage, autofilledMessage, size, margin, dropdownMenuValues, minWidth, }: DropdownFilterProps) => JSX.Element;
 export default BasicDropdown;

package/dist/js/Dropdown/BasicDropdown.js

@@ -51,6 +51,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       list = _ref.list,
       placeholder = _ref.placeholder,
       onSelect = _ref.onSelect,
+      setDropdownMenuValues = _ref.setDropdownMenuValues,
       initalValue = _ref.initalValue,
       disableSorting = _ref.disableSorting,
       messageOnNoResults = _ref.messageOnNoResults,
@@ -74,7 +75,9 @@ var BasicDropdown = function BasicDropdown(_ref) {
       autofilledMessage = _ref.autofilledMessage,
       size = _ref.size,
       _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin;
+      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+      dropdownMenuValues = _ref.dropdownMenuValues,
+      minWidth = _ref.minWidth;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -141,11 +144,12 @@ var BasicDropdown = function BasicDropdown(_ref) {
   };
 
   React.useEffect(function () {
-    if (initalValue) {
-      setInput(initalValue);
+    if (initalValue || dropdownMenuValues) {
+      var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
+      setInput(initValue);
       setRestartFilter(true);
     }
-  }, [initalValue]);
+  }, [initalValue, dropdownMenuValues]);
   React.useEffect(function () {
     document.addEventListener('keypress', handleKeyPress);
     return function () {
@@ -177,7 +181,8 @@ var BasicDropdown = function BasicDropdown(_ref) {
     className: size ? size : '',
     locked: locked,
     disabled: disabled,
-    margin: margin
+    margin: margin,
+    minWidth: minWidth
   }, /*#__PURE__*/React.createElement(_CommonStyling.StyledField, {
     ref: styledFieldRef,
     className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
@@ -191,7 +196,8 @@ var BasicDropdown = function BasicDropdown(_ref) {
     locked: locked || false,
     showValidationMessage: !!activeValidationMessage,
     placeholder: placeholderSearch,
-    isPlaceholder: !input
+    isPlaceholder: !input,
+    minWidth: minWidth
   }, /*#__PURE__*/React.createElement(_CommonStyling.InputField, {
     type: "search",
     readOnly: true,
@@ -207,7 +213,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
     tabIndex: disabled || locked ? -1 : 0,
     disabled: disabled || false
   }), isLoading ? /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
-    size: "small",
+    size: _types.Size.Small,
     color: _styles.COLORS.neutral_600
   }) : null, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
@@ -238,15 +244,15 @@ var BasicDropdown = function BasicDropdown(_ref) {
     },
     focused: focused,
     setFocused: setFocused,
-    size: size == 'medium' ? _types.Size.Medium : _types.Size.Small,
+    size: size !== null && size !== void 0 ? size : _types.Size.Small,
     filter: '',
     hideOnClickOutside: true,
     isOpen: isOpen,
     setIsOpen: customSetIsOpen,
     messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
     isButton: isButton || false,
-    selectedValues: selectedValues,
-    setSelectedValues: setSelectedValues,
+    selectedValues: dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
+    setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
     id: "".concat(id, "_dropdowncontent")
   })), activeValidationMessage && /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
     size: "20px",
@@ -272,6 +278,7 @@ BasicDropdown.propTypes = {
   maxHeight: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   onSelect: _propTypes.default.func,
+  setDropdownMenuValues: _propTypes.default.func,
   initalValue: _propTypes.default.string,
   disableSorting: _propTypes.default.bool,
   messageOnNoResults: _propTypes.default.string,
@@ -280,8 +287,8 @@ BasicDropdown.propTypes = {
   isButton: _propTypes.default.bool,
   activeValidationMessage: _propTypes.default.string,
   autofilledMessage: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'medium']),
-  margin: _propTypes.default.string
+  margin: _propTypes.default.string,
+  dropdownMenuValues: _propTypes.default.arrayOf(_propTypes.default.string)
 };
 var _default = BasicDropdown;
 exports.default = _default;