@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.3

package/dist/umd/Dropdown/CommonStyling.js

@@ -1,416 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", "../common", "../styles", "../styles/typography", "../types", "../styles/z-indexes"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require("../common"), require("../styles"), require("../styles/typography"), require("../types"), require("../styles/z-indexes"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.styledComponents, global.common, global.styles, global.typography, global.types, global.zIndexes);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _styledComponents, _common, _styles, _typography, _types, _zIndexes) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.ButtonDropdownWrapper = exports.DropdownButtonCSS = exports.DropdownButton = exports.DropdownContentStyling = exports.ButtonDropdownContentStyling = exports.StyledField = exports.InputField = exports.Dropdown = undefined;
-
-  var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-
-  const Dropdown = exports.Dropdown = _styledComponents2.default.div`
-  position: relative;
-  display: inline-block;
-  ${props => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}
-  ${props => props.locked || props.disabled ? 'cursor: not-allowed;' : ''}
-  ${props => props.margin ? `margin: ${props.margin};` : ''}
-
-  .show {
-    display: block;
-  }
-
-  .value {
-    flex-grow: 1;
-  }
-
-  input:hover + div {
-    color: ${_styles.COLORS.primary_600};
-  }
-
-  input:active + div {
-    color: ${_styles.COLORS.primary_800};
-  }
-`;
-  const lockedState = _styledComponents.css`
-  background-color: ${_styles.COLORS.neutral_100};
-  box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_300};
-  color: ${_styles.COLORS.neutral_600};
-  pointer-events: none;
-  cursor: not-allowed;
-  input {
-    color: ${_styles.COLORS.neutral_600} !important;
-  }
-`;
-  const disabledState = _styledComponents.css`
-  background-color: ${_styles.COLORS.white};
-  box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_100};
-  color: ${_styles.COLORS.neutral_300};
-  pointer-events: none;
-  cursor: not-allowed;
-  svg {
-    color: ${_styles.COLORS.neutral_300} !important;
-  }
-  input {
-    color: ${_styles.COLORS.neutral_300} !important;
-    ::placeholder {
-      color: ${_styles.COLORS.neutral_300} !important;
-    }
-  }
-`;
-  const activeValidationMessage = _styledComponents.css`
-  -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_400};
-  -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_400};
-  box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_400};
-`;
-  const placeholderStyling = _styledComponents.css`
-  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
-`;
-  const InputField = exports.InputField = _styledComponents2.default.input`
-  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
-  border: none;
-  outline: none;
-  background-color: inherit;
-  cursor: pointer;
-  color: ${_styles.COLORS.black} !important;
-  padding: 0;
-  ::-webkit-search-decoration,
-  ::-webkit-search-cancel-button,
-  ::-webkit-search-results-button,
-  ::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-  ::placeholder {
-    ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
-
-    ${_styles.BREAKPOINTS.MEDIUM} {
-      ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
-    }
-    &.small {
-      ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
-    }
-    &.medium {
-      ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
-    }
-  }
-`;
-  const StyledField = exports.StyledField = _styledComponents2.default.div`
-  ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
-
-  padding: 12px 16px;
-  height: 48px;
-  min-width: ${props => props.minWidth ? `${props.minWidth}` : '344px'};
-  width: 100%;
-
-  background: ${_styles.COLORS.white};
-  box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_400};
-  box-sizing: border-box;
-  border-radius: 4px;
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  input {
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-  }
-
-  &::placeholder {
-    ${(0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
-  }
-
-  ${_styles.BREAKPOINTS.MEDIUM} {
-    ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
-    padding: 16px;
-    height: 56px;
-    &::placeholder {
-      ${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
-    }
-  }
-
-  &.small {
-    ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
-    padding: 12px 16px;
-    height: 48px;
-    &::placeholder {
-      ${(0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
-    }
-  }
-  &.medium {
-    ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
-    height: 56px;
-    padding: 16px;
-    &::placeholder {
-      ${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
-    }
-  }
-
-  &:focus {
-    outline: 3px solid #ddd;
-  }
-  &:focus-within {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
-    box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
-  }
-  &:hover {
-    box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.primary_200};
-    input {
-      ::placeholder {
-        color: ${_styles.COLORS.primary_600};
-      }
-    }
-    cursor: pointer;
-  }
-  &:active {
-    box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.primary_300};
-    input {
-      ::placeholder {
-        color: ${_styles.COLORS.primary_800};
-      }
-    }
-  }
-
-  &.button {
-    ${props => (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_600)}
-
-    box-sizing: border-box;
-    height: 32px;
-    padding: 0 8px;
-    width: initial;
-    min-width: initial;
-    border: none !important;
-    box-shadow: none;
-    border-radius: 4px;
-
-    &.expanded {
-      color: ${_styles.COLORS.neutral_800};
-      background: ${_styles.COLORS.neutral_20};
-    }
-  }
-
-  ${props => props.disabled ? disabledState : ''}
-  ${props => props.locked ? lockedState : ''}
-  ${props => props.showValidationMessage ? activeValidationMessage : ''}
-  ${props => props.isPlaceholder ? placeholderStyling : ''}
-
-  ${_common.CommonInteractionStyling};
-`;
-  const ButtonDropdownContentStyling = exports.ButtonDropdownContentStyling = _styledComponents.css`
-  min-width: 344px;
-  right: 0;
-`;
-  const DropdownContentStyling = exports.DropdownContentStyling = _styledComponents2.default.div`
-  display: none;
-  position: absolute;
-  background-color: ${_styles.COLORS.white};
-  width: 100%;
-  z-index: ${_zIndexes.Z_INDEXES.dropdown};
-  margin-top: ${props => props.isButton ? '-4px' : '2px'};
-
-  &.show {
-    display: block;
-  }
-
-  &.up {
-    top: auto;
-    bottom: 100%;
-  }
-
-  ${props => props.isButton ? ButtonDropdownContentStyling : ''};
-
-  border: 1px solid ${_styles.COLORS.neutral_100};
-  box-sizing: border-box;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  padding: 4px 0;
-
-  max-height: 240px;
-  overflow-y: auto;
-
-  /* width */
-  ::-webkit-scrollbar {
-    width: 4px;
-    cursor: pointer;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: ${_styles.COLORS.white};
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: ${_styles.COLORS.neutral_200};
-    border-radius: 8px;
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: ${_styles.COLORS.neutral_400};
-  }
-`;
-  const DropdownButton = exports.DropdownButton = _styledComponents2.default.button`
-  ${props => DropdownButtonCSS(props.size)}
-`;
-
-  const DropdownButtonCSS = exports.DropdownButtonCSS = size => {
-    return _styledComponents.css`
-    ${size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
-    ${size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
-  ${size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
-
-  position: relative;
-    text-decoration: none;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    min-height: ${size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px'};
-    background-color: ${_styles.COLORS.white};
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    width: 100%;
-    text-align: left;
-
-    span {
-      margin: auto 0 auto 16px;
-      line-height: 48px;
-    }
-
-    div.item-content {
-      margin: auto 0 auto 16px;
-      display: flex;
-      align-items: center;
-
-      div.item-label {
-        flex: 1 0 calc(100% - 40px);
-      }
-
-      div.item-icon {
-        margin-right: 6px;
-      }
-      div.item-icon-old {
-        flex: 1 0 40px;
-        display: flex;
-        justify-content: flex-end;
-      }
-    }
-
-    ${_common.CommonInteractionStyling};
-
-    &.active {
-      background: ${_styles.COLORS.neutral_20};
-
-      &::after {
-        position: absolute;
-        content: ' ';
-        width: 4px;
-        top: 0;
-        bottom: 0;
-        left: 2px;
-        background-color: ${_styles.COLORS.primary_500};
-
-        border-radius: 2px;
-      }
-    }
-
-    &:disabled {
-      background-color: transparent;
-      cursor: not-allowed;
-      color: ${_styles.COLORS.neutral_200};
-    }
-
-    &.active:hover {
-      background-color: ${_styles.COLORS.primary_20};
-
-      svg {
-        color: ${_styles.COLORS.primary_600};
-      }
-
-      &::after {
-        background-color: ${_styles.COLORS.primary_500};
-      }
-    }
-
-    &.active:active {
-      background-color: ${_styles.COLORS.primary_100};
-
-      svg {
-        color: ${_styles.COLORS.primary_800};
-      }
-
-      &::after {
-        background-color: ${_styles.COLORS.primary_500};
-      }
-    }
-  `;
-  };
-
-  const ButtonDropdownWrapper = exports.ButtonDropdownWrapper = _styledComponents2.default.div`
-  box-sizing: border-box;
-  min-height: 48px;
-  display: flex;
-  align-items: center;
-  width: fit-content;
-
-  .button {
-    min-width: 64px;
-  }
-
-  .value {
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-  }
-
-  .dropdown-arrow {
-    width: 24px;
-    height: 24px;
-  }
-
-  ${props => props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;'}
-  ${props => props.disabled ? 'pointer-events: none;' : ''}
-  
-  &:hover .button,
-  & > .button:hover {
-    background-color: ${_styles.COLORS.primary_20};
-    color: ${_styles.COLORS.primary_700};
-  }
-
-  &:focus .button,
-  & > .button:focus {
-    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;
-    outline: none;
-  }
-
-  &:active .button,
-  & > .button:active {
-    box-shadow: none;
-    background-color: ${_styles.COLORS.primary_100};
-    color: ${_styles.COLORS.primary_800};
-  }
-
-}`;
-});
-//# sourceMappingURL=CommonStyling.js.map

package/dist/umd/Dropdown/CommonStyling.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","minWidth","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","InputField","input","black","ComponentSStyling","BREAKPOINTS","MEDIUM","StyledField","neutral_400","ComponentXXSStyling","ComponentXSStyling","primary_200","primary_300","neutral_800","neutral_20","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","Z_INDEXES","dropdown","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Size","ComponentLStyling","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,QAAMA,QAAQ,WAARA,QAAQ,GAAGC,2BAAOC,GAAqG;AACpI;AACA;AACA,IAAKC,KAAD,IAAW,CAACA,KAAK,CAAN,QAAA,KAAoBA,KAAK,EAALA,QAAAA,GAAmB,2BAA0BA,KAAK,CAACC,QAAnDD,GAAAA,GAApB,gCAAA,CAAuH;AACtI,IAAKA,KAAD,IAAYA,KAAK,CAALA,MAAAA,IAAgBA,KAAK,CAArBA,QAAAA,GAAAA,sBAAAA,GAA0D,EAAI;AAC9E,IAAKA,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaG,eAAOC,WAAY;AAChC;AACA;AACA;AACA,aAAaD,eAAOE,WAAY;AAChC;AArBO,CAAA;AAwBP,QAAMC,WAAW,GAAGC,qBAAI;AACxB,sBAAsBJ,eAAOK,WAAY;AACzC,sCAAsCL,eAAOM,WAAY;AACzD,WAAWN,eAAOO,WAAY;AAC9B;AACA;AACA;AACA,aAAaP,eAAOO,WAAY;AAChC;AARA,CAAA;AAWA,QAAMC,aAAa,GAAGJ,qBAAI;AAC1B,sBAAsBJ,eAAOS,KAAM;AACnC,sCAAsCT,eAAOK,WAAY;AACzD,WAAWL,eAAOM,WAAY;AAC9B;AACA;AACA;AACA,aAAaN,eAAOM,WAAY;AAChC;AACA;AACA,aAAaN,eAAOM,WAAY;AAChC;AACA,eAAeN,eAAOM,WAAY;AAClC;AACA;AAdA,CAAA;AAiBA,QAAMI,uBAAuB,GAAGN,qBAAI;AACpC,8CAA8CJ,eAAOW,WAAY;AACjE,2CAA2CX,eAAOW,WAAY;AAC9D,sCAAsCX,eAAOW,WAAY;AAHzD,CAAA;AAMA,QAAMC,kBAAkB,GAAGR,qBAAI;AAC/B,IAAIS,mCAAkBC,2BAAD,MAAjBD,EAA6Cb,eAA5B,WAAjBa,CAAiE;AADrE,CAAA;AAIO,QAAME,UAAU,WAAVA,UAAU,GAAGpB,2BAAOqB,KAAM;AACvC,IAAIH,mCAAkBC,2BAAD,OAAjBD,EAA8Cb,eAA7B,KAAjBa,CAA4D;AAChE;AACA;AACA;AACA;AACA,WAAWb,eAAOiB,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBJ,2BAAD,MAAjBI,EAA6ClB,eAA5B,WAAjBkB,CAAiE;AACvE;AACA,MAAMC,oBAAYC,MAAO;AACzB,QAAQP,mCAAkBC,2BAAD,MAAjBD,EAA6Cb,eAA5B,WAAjBa,CAAiE;AACzE;AACA;AACA,QAAQK,mCAAkBJ,2BAAD,MAAjBI,EAA6ClB,eAA5B,WAAjBkB,CAAiE;AACzE;AACA;AACA,QAAQL,mCAAkBC,2BAAD,MAAjBD,EAA6Cb,eAA5B,WAAjBa,CAAiE;AACzE;AACA;AA1BO,CAAA;AA6BA,QAAMQ,WAAW,WAAXA,WAAW,GAAG1B,2BAAOC,GAA4I;AAC9K,IAAIsB,mCAAkBJ,2BAAD,OAAjBI,EAAiB,SAAjBA,CAAyD;AAC7D;AACA;AACA;AACA,eAAgBrB,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAkB,GAAEA,KAAK,CAACC,QAA1BD,EAAAA,GAAuC,OAAS;AAC3E;AACA;AACA,gBAAgBG,eAAOS,KAAM;AAC7B,sCAAsCT,eAAOsB,WAAY;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,qCAAoBT,2BAAD,MAAnBS,EAA+CvB,eAA5B,WAAnBuB,CAAmE;AACzE;AACA;AACA,IAAIJ,oBAAYC,MAAO;AACvB,MAAMP,mCAAkBC,2BAAD,OAAjBD,EAAiB,SAAjBA,CAAyD;AAC/D;AACA;AACA;AACA,QAAQW,oCAAmBV,2BAAD,MAAlBU,EAA8CxB,eAA5B,WAAlBwB,CAAkE;AAC1E;AACA;AACA;AACA;AACA,MAAMN,mCAAkBJ,2BAAD,OAAjBI,EAAiB,SAAjBA,CAAyD;AAC/D;AACA;AACA;AACA,QAAQK,qCAAoBT,2BAAD,MAAnBS,EAA+CvB,eAA5B,WAAnBuB,CAAmE;AAC3E;AACA;AACA;AACA,MAAMV,mCAAkBC,2BAAD,OAAjBD,EAAiB,SAAjBA,CAAyD;AAC/D;AACA;AACA;AACA,QAAQW,oCAAmBV,2BAAD,MAAlBU,EAA8CxB,eAA5B,WAAlBwB,CAAkE;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgDxB,eAAOE,WAAY;AACnE,6CAA6CF,eAAOE,WAAY;AAChE,wCAAwCF,eAAOE,WAAY;AAC3D;AACA;AACA,wCAAwCF,eAAOyB,WAAY;AAC3D;AACA;AACA,iBAAiBzB,eAAOC,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA,wCAAwCD,eAAO0B,WAAY;AAC3D;AACA;AACA,iBAAiB1B,eAAOE,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA,MAAOL,KAAD,IAAWqB,mCAAkBJ,2BAAD,IAAjBI,EAA2CrB,KAAK,CAALA,QAAAA,GAAiBG,eAAjBH,WAAAA,GAAsCG,eAAhE,WAAjBkB,CAAqG;AACtH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAelB,eAAO2B,WAAY;AAClC,oBAAoB3B,eAAO4B,UAAW;AACtC;AACA;AACA;AACA,IAAK/B,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,aAAAA,GAAiC,EAAI;AACrD,IAAKA,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAAA,WAAAA,GAA6B,EAAI;AACjD,IAAKA,KAAD,IAAYA,KAAK,CAALA,qBAAAA,GAAAA,uBAAAA,GAAwD,EAAI;AAC5E,IAAKA,KAAD,IAAYA,KAAK,CAALA,aAAAA,GAAAA,kBAAAA,GAA2C,EAAI;AAC/D;AACA,IAAIgC,gCAAyB;AAvGtB,CAAA;AA0GA,QAAMC,4BAA4B,WAA5BA,4BAA4B,GAAG1B,qBAAI;AAChD;AACA;AAFO,CAAA;AAKA,QAAM2B,sBAAsB,WAAtBA,sBAAsB,GAAGpC,2BAAOC,GAA2B;AACxE;AACA;AACA,sBAAsBI,eAAOS,KAAM;AACnC;AACA,aAAauB,oBAAUC,QAAS;AAChC,gBAAiBpC,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,MAAAA,GAA0B,KAAO;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKA,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,4BAAAA,GAAgD,EAAI;AACpE;AACA,sBAAsBG,eAAOK,WAAY;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBL,eAAOS,KAAM;AAC/B;AACA;AACA;AACA;AACA,kBAAkBT,eAAOkC,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA,kBAAkBlC,eAAOsB,WAAY;AACrC;AAhDO,CAAA;AAmDA,QAAMa,cAAc,WAAdA,cAAc,GAAGxC,2BAAOyC,MAAwB;AAC7D,IAAKvC,KAAD,IAAWwC,iBAAiB,CAACxC,KAAK,CAAN,IAAA,CAAa;AADtC,CAAA;;AAIA,QAAMwC,iBAAiB,WAAjBA,iBAAiB,GAAIC,IAAD,IAAiB;AAChD,WAAOlC,qBAAI;AACb,MAAMkC,IAAI,IAAIC,YAARD,KAAAA,IAAsBpB,mCAAkBJ,2BAAD,OAAjBI,EAA8ClB,eAA7B,WAAjBkB,CAAkE;AAC9F,MAAMoB,IAAI,IAAIC,YAARD,MAAAA,IAAuBzB,mCAAkBC,2BAAD,OAAjBD,EAA8Cb,eAA7B,WAAjBa,CAAkE;AAC/F,IAAIyB,IAAI,IAAIC,YAARD,KAAAA,IAAsBE,mCAAkB1B,2BAAD,OAAjB0B,EAA8CxC,eAA7B,WAAjBwC,CAAkE;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBF,IAAI,IAAIC,YAARD,KAAAA,GAAAA,MAAAA,GAA8BA,IAAI,IAAIC,YAARD,MAAAA,GAAAA,MAAAA,GAA+B,MAAO;AACtF,wBAAwBtC,eAAOS,KAAM;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMoB,gCAAyB;AAC/B;AACA;AACA,oBAAoB7B,eAAO4B,UAAW;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B5B,eAAOyC,WAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAezC,eAAOkC,WAAY;AAClC;AACA;AACA;AACA,0BAA0BlC,eAAO0C,UAAW;AAC5C;AACA;AACA,iBAAiB1C,eAAOC,WAAY;AACpC;AACA;AACA;AACA,4BAA4BD,eAAOyC,WAAY;AAC/C;AACA;AACA;AACA;AACA,0BAA0BzC,eAAO2C,WAAY;AAC7C;AACA;AACA,iBAAiB3C,eAAOE,WAAY;AACpC;AACA;AACA;AACA,4BAA4BF,eAAOyC,WAAY;AAC/C;AACA;AAxFE,GAAA;AADK,GAAA;;AA6FA,QAAMG,qBAAqB,WAArBA,qBAAqB,GAAGjD,2BAAOC,GAA8C;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,MAAAA,IAAgBA,KAAK,CAArBA,QAAAA,GAAAA,sBAAAA,GAA0D,kBAAoB;AAC9F,IAAKA,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,uBAAAA,GAA2C,EAAI;AAC/D;AACA;AACA;AACA,wBAAwBG,eAAO0C,UAAW;AAC1C,aAAa1C,eAAO6C,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB7C,eAAO2C,WAAY;AAC3C,aAAa3C,eAAOE,WAAY;AAChC;AACA;AA3CO,EAAA","sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\r\nimport { Size } from '../types';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\r\n  position: relative;\r\n  display: inline-block;\r\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\r\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n\r\n  .show {\r\n    display: block;\r\n  }\r\n\r\n  .value {\r\n    flex-grow: 1;\r\n  }\r\n\r\n  input:hover + div {\r\n    color: ${COLORS.primary_600};\r\n  }\r\n\r\n  input:active + div {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n`;\r\n\r\nconst lockedState = css`\r\n  background-color: ${COLORS.neutral_100};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\r\n  color: ${COLORS.neutral_600};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  input {\r\n    color: ${COLORS.neutral_600} !important;\r\n  }\r\n`;\r\n\r\nconst disabledState = css`\r\n  background-color: ${COLORS.white};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\r\n  color: ${COLORS.neutral_300};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  svg {\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n  input {\r\n    color: ${COLORS.neutral_300} !important;\r\n    ::placeholder {\r\n      color: ${COLORS.neutral_300} !important;\r\n    }\r\n  }\r\n`;\r\n\r\nconst activeValidationMessage = css`\r\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\r\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\r\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\r\n`;\r\n\r\nconst placeholderStyling = css`\r\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n`;\r\n\r\nexport const InputField = styled.input`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  border: none;\r\n  outline: none;\r\n  background-color: inherit;\r\n  cursor: pointer;\r\n  color: ${COLORS.black} !important;\r\n  padding: 0;\r\n  ::-webkit-search-decoration,\r\n  ::-webkit-search-cancel-button,\r\n  ::-webkit-search-results-button,\r\n  ::-webkit-search-results-decoration {\r\n    -webkit-appearance: none;\r\n  }\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n    &.small {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n    &.medium {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n`;\r\n\r\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n\r\n  padding: 12px 16px;\r\n  height: 48px;\r\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\r\n  width: 100%;\r\n\r\n  background: ${COLORS.white};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\r\n  box-sizing: border-box;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n\r\n  input {\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: inherit;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 16px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 12px 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    height: 56px;\r\n    padding: 16px;\r\n    &::placeholder {\r\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    outline: 3px solid #ddd;\r\n  }\r\n  &:focus-within {\r\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n  }\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\r\n    input {\r\n      ::placeholder {\r\n        color: ${COLORS.primary_600};\r\n      }\r\n    }\r\n    cursor: pointer;\r\n  }\r\n  &:active {\r\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\r\n    input {\r\n      ::placeholder {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.button {\r\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\r\n\r\n    box-sizing: border-box;\r\n    height: 32px;\r\n    padding: 0 8px;\r\n    width: initial;\r\n    min-width: initial;\r\n    border: none !important;\r\n    box-shadow: none;\r\n    border-radius: 4px;\r\n\r\n    &.expanded {\r\n      color: ${COLORS.neutral_800};\r\n      background: ${COLORS.neutral_20};\r\n    }\r\n  }\r\n\r\n  ${(props) => (props.disabled ? disabledState : '')}\r\n  ${(props) => (props.locked ? lockedState : '')}\r\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\r\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\r\n\r\n  ${CommonInteractionStyling};\r\n`;\r\n\r\nexport const ButtonDropdownContentStyling = css`\r\n  min-width: 344px;\r\n  right: 0;\r\n`;\r\n\r\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\r\n  display: none;\r\n  position: absolute;\r\n  background-color: ${COLORS.white};\r\n  width: 100%;\r\n  z-index: ${Z_INDEXES.dropdown};\r\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\r\n\r\n  &.show {\r\n    display: block;\r\n  }\r\n\r\n  &.up {\r\n    top: auto;\r\n    bottom: 100%;\r\n  }\r\n\r\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\r\n\r\n  border: 1px solid ${COLORS.neutral_100};\r\n  box-sizing: border-box;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  padding: 4px 0;\r\n\r\n  max-height: 240px;\r\n  overflow-y: auto;\r\n\r\n  /* width */\r\n  ::-webkit-scrollbar {\r\n    width: 4px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* Track */\r\n  ::-webkit-scrollbar-track {\r\n    background: ${COLORS.white};\r\n  }\r\n\r\n  /* Handle */\r\n  ::-webkit-scrollbar-thumb {\r\n    background: ${COLORS.neutral_200};\r\n    border-radius: 8px;\r\n  }\r\n\r\n  /* Handle on hover */\r\n  ::-webkit-scrollbar-thumb:hover {\r\n    background: ${COLORS.neutral_400};\r\n  }\r\n`;\r\n\r\nexport const DropdownButton = styled.button<{ size?: Size }>`\r\n  ${(props) => DropdownButtonCSS(props.size)}\r\n`;\r\n\r\nexport const DropdownButtonCSS = (size?: Size) => {\r\n  return css`\r\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n  ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  position: relative;\r\n    text-decoration: none;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\r\n    background-color: ${COLORS.white};\r\n    border: none;\r\n    cursor: pointer;\r\n    background: transparent;\r\n    width: 100%;\r\n    text-align: left;\r\n\r\n    span {\r\n      margin: auto 0 auto 16px;\r\n      line-height: 48px;\r\n    }\r\n\r\n    div.item-content {\r\n      margin: auto 0 auto 16px;\r\n      display: flex;\r\n      align-items: center;\r\n\r\n      div.item-label {\r\n        flex: 1 0 calc(100% - 40px);\r\n      }\r\n\r\n      div.item-icon {\r\n        margin-right: 6px;\r\n      }\r\n      div.item-icon-old {\r\n        flex: 1 0 40px;\r\n        display: flex;\r\n        justify-content: flex-end;\r\n      }\r\n    }\r\n\r\n    ${CommonInteractionStyling};\r\n\r\n    &.active {\r\n      background: ${COLORS.neutral_20};\r\n\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 0;\r\n        bottom: 0;\r\n        left: 2px;\r\n        background-color: ${COLORS.primary_500};\r\n\r\n        border-radius: 2px;\r\n      }\r\n    }\r\n\r\n    &:disabled {\r\n      background-color: transparent;\r\n      cursor: not-allowed;\r\n      color: ${COLORS.neutral_200};\r\n    }\r\n\r\n    &.active:hover {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_600};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_500};\r\n      }\r\n    }\r\n\r\n    &.active:active {\r\n      background-color: ${COLORS.primary_100};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_500};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n\r\n  .button {\r\n    min-width: 64px;\r\n  }\r\n\r\n  .value {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    justify-content: center;\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n\r\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\r\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\r\n  \r\n  &:hover .button,\r\n  & > .button:hover {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:focus .button,\r\n  & > .button:focus {\r\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\r\n    outline: none;\r\n  }\r\n\r\n  &:active .button,\r\n  & > .button:active {\r\n    box-shadow: none;\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n}`;\r\n"],"file":"CommonStyling.js"}

package/dist/umd/Dropdown/DropdownButton.js

@@ -1,203 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../Button", "./DropdownContent", "styled-components"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../Button"), require("./DropdownContent"), require("styled-components"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.react, global.Button, global.DropdownContent, global.styledComponents);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _react, _Button, _DropdownContent, _styledComponents) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  var React = _interopRequireWildcard(_react);
-
-  var _DropdownContent2 = _interopRequireDefault(_DropdownContent);
-
-  var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-
-  function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function (nodeInterop) {
-      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-  }
-
-  function _interopRequireWildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-      return obj;
-    }
-
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-      return {
-        default: obj
-      };
-    }
-
-    var cache = _getRequireWildcardCache(nodeInterop);
-
-    if (cache && cache.has(obj)) {
-      return cache.get(obj);
-    }
-
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-
-    for (var key in obj) {
-      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-
-        if (desc && (desc.get || desc.set)) {
-          Object.defineProperty(newObj, key, desc);
-        } else {
-          newObj[key] = obj[key];
-        }
-      }
-    }
-
-    newObj.default = obj;
-
-    if (cache) {
-      cache.set(obj, newObj);
-    }
-
-    return newObj;
-  }
-
-  /**
-   * Import React libraries.
-   */
-
-  /**
-   * Import custom components.
-   */
-
-  /**
-   * Import custom types.
-   */
-  const Wrapper = _styledComponents2.default.div`
-  position: relative;
-  display: inline-block;
-`;
-
-  const DropdownButton = ({
-    items,
-    icon,
-    disabled,
-    onClick,
-    itemsType = 'normal',
-    action,
-    actionLabel = '',
-    actionVariant,
-    actionIcon,
-    actionLoading,
-    width,
-    size,
-    alignLeft,
-    multiSelect = false,
-    scrollable = false,
-    pinTopItem = false,
-    maxHeight
-  }) => {
-    // Globally used variables within the view.
-    const [dropdownOpen, setDropdownOpen] = React.useState(false);
-    const [selectedValues, setSelectedValues] = React.useState([]);
-    const [focused, setFocused] = React.useState(null);
-    const buttonRef = React.useRef(null);
-
-    const handleValueSelect = values => {
-      // Do all required actions
-      onClick(values);
-    };
-
-    const handleKeyDown = e => {
-      if (buttonRef?.current && buttonRef.current.contains(e.target)) {
-        if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {
-          if (!dropdownOpen) setFocused(0);
-
-          if (e.keyCode != 40) {
-            e.preventDefault();
-            buttonRef?.current.click();
-          }
-        }
-      }
-    };
-
-    React.useEffect(() => {
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    });
-    /**
-     * Renders Icon Button dropdown menu.
-     * @returns HTML View for the Icon button dropdown menu.
-     */
-
-    const renderIconButton = () => {
-      return /*#__PURE__*/React.createElement(_Button.IconButton, {
-        ref: buttonRef,
-        variant: "secondary",
-        shape: "circular",
-        action: event => {
-          if (!event) {
-            //if no event details passed, then this means that user pressed 'enter'
-            if (!dropdownOpen) setFocused(0);
-          }
-
-          setDropdownOpen(!dropdownOpen);
-        },
-        disabled: disabled
-      }, icon);
-    };
-
-    return /*#__PURE__*/React.createElement(Wrapper, null, renderIconButton(), /*#__PURE__*/React.createElement(_DropdownContent2.default, {
-      customizationProps: {
-        itemsType: itemsType,
-        action: action ?? (() => {}),
-        actionLabel: actionLabel,
-        actionVariant: actionVariant,
-        onValueUpdate: handleValueSelect,
-        multiSelect: multiSelect,
-        actionIcon: actionIcon,
-        actionLoading: actionLoading,
-        scrollable: scrollable,
-        pinTopItem: pinTopItem,
-        maxHeight: maxHeight,
-        items: items
-      },
-      focused: focused,
-      setFocused: setFocused,
-      size: size,
-      width: width,
-      alignLeft: alignLeft,
-      isOpen: dropdownOpen,
-      setIsOpen: setDropdownOpen,
-      hideOnClickOutside: true,
-      filter: "",
-      selectedValues: itemsType == 'normal' ? [] : selectedValues,
-      setSelectedValues: setSelectedValues,
-      messageOnNoResults: "No results",
-      isButton: true,
-      id: "dropdown-content"
-    }));
-  };
-
-  exports.default = DropdownButton;
-});
-//# sourceMappingURL=DropdownButton.js.map

package/dist/umd/Dropdown/DropdownButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","itemsType","actionLabel","multiSelect","scrollable","pinTopItem","maxHeight","React","buttonRef","handleValueSelect","values","onClick","handleKeyDown","e","setFocused","document","renderIconButton","event","setDropdownOpen","disabled","action","actionVariant","onValueUpdate","actionIcon","actionLoading","items"],"mappings":"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","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { IconButton } from '../Button';\r\nimport DropdownContent from './DropdownContent';\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport { DropdownButtonProps } from './DropdownButtonTypes';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n  display: inline-block;\r\n`;\r\n\r\nconst DropdownButton = ({ \r\n  items, \r\n  icon, \r\n  disabled,\r\n  onClick,\r\n  itemsType = 'normal',\r\n  action,\r\n  actionLabel = '',\r\n  actionVariant,\r\n  actionIcon,\r\n  actionLoading,\r\n  width,\r\n  size,\r\n  alignLeft,\r\n  multiSelect = false,\r\n  scrollable = false,\r\n  pinTopItem = false,\r\n  maxHeight }: DropdownButtonProps) => {\r\n  // Globally used variables within the view.\r\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n  const handleValueSelect = (values: string[]) => {\r\n    // Do all required actions\r\n    onClick(values);\r\n  };\r\n\r\n  \r\n  const handleKeyDown = (e: any) => {\r\n    if (buttonRef?.current && buttonRef.current.contains(e.target)) {\r\n      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {\r\n        if(!dropdownOpen)\r\n          setFocused(0);\r\n          \r\n        if(e.keyCode != 40)\r\n        {\r\n          e.preventDefault();\r\n          buttonRef?.current.click();\r\n        }\r\n      }\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    document.addEventListener('keydown', handleKeyDown);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown);      \r\n    };\r\n  });\r\n\r\n  /**\r\n   * Renders Icon Button dropdown menu.\r\n   * @returns HTML View for the Icon button dropdown menu.\r\n   */\r\n  const renderIconButton = () => {\r\n    return (\r\n      <IconButton ref={buttonRef}  variant=\"secondary\" shape=\"circular\" action={(event: any) => \r\n      {\r\n        if(!event) { //if no event details passed, then this means that user pressed 'enter'\r\n          if(!dropdownOpen)\r\n            setFocused(0);\r\n        }\r\n        setDropdownOpen(!dropdownOpen);\r\n      }} disabled={disabled}>\r\n        {icon}\r\n      </IconButton>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <Wrapper>\r\n      {renderIconButton()}\r\n      <DropdownContent\r\n        customizationProps={{\r\n          itemsType: itemsType,\r\n          action: action ?? (() => {}),\r\n          actionLabel: actionLabel,\r\n          actionVariant: actionVariant,\r\n          onValueUpdate: handleValueSelect,\r\n          multiSelect: multiSelect,\r\n          actionIcon: actionIcon,\r\n          actionLoading: actionLoading,\r\n          scrollable: scrollable,\r\n          pinTopItem: pinTopItem,\r\n          maxHeight: maxHeight,\r\n          items: items\r\n        }}\r\n        focused={focused}\r\n        setFocused={setFocused}\r\n        size={size}\r\n        width={width}\r\n        alignLeft={alignLeft}\r\n        isOpen={dropdownOpen}\r\n        setIsOpen={setDropdownOpen}\r\n        hideOnClickOutside={true}\r\n        filter=''\r\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\r\n        setSelectedValues={setSelectedValues}\r\n        messageOnNoResults='No results'\r\n        isButton={true}\r\n        id='dropdown-content'\r\n      />\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default DropdownButton;\r\n"],"file":"DropdownButton.js"}

package/dist/umd/Dropdown/DropdownButtonTypes.js

@@ -1,20 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports);
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-});
-//# sourceMappingURL=DropdownButtonTypes.js.map