@laerdal/life-react-components 1.0.1-dev.34.full → 1.0.1-dev.35.full

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","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","ComponentXXSStyling","ComponentXSStyling","primary_200","primary_300","neutral_800","neutral_20","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","neutral_200","neutral_400","DropdownButton","button","Size","ComponentLStyling","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling} from '../styles/typography';\nimport { Size } from '../types';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ${COLORS.neutral_300} !important;\n  }\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: 344px;\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  \n  input{\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: 1;\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n\n  ${props => props.size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${props => props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${props => props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  position: relative;\n  text-decoration: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: ${props => props.size == Size.Large ? '64px' : props.size == Size.Medium ? '56px' : '48px'};\n  background-color: ${COLORS.white};\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  width: 100%;\n  text-align: left;\n\n  div.divider  {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  span {\n    margin: auto 0 auto 16px;\n    line-height: 48px;\n  }\n\n  div.item-content {\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    div.item-label {\n      flex: 1 0 calc(100% - 40px);\n    }\n\n    div.item-icon {\n      margin-right: 6px;\n    }\n    div.item-icon-old {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n\n  ${CommonInteractionStyling};\n\n  &.active {\n    background: ${COLORS.neutral_20};\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: 2px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n\n    &::after {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n\n    &::after {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n`;\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}
+{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","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","ComponentXXSStyling","ComponentXSStyling","primary_200","primary_300","neutral_800","neutral_20","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","neutral_200","neutral_400","DropdownButton","button","Size","ComponentLStyling","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,QAAMA,QAAQ,WAARA,QAAQ,GAAGC,2BAAOC,GAAkF;AACjH;AACA;AACA,IAAKC,KAAD,IAAW,CAACA,KAAK,CAAN,QAAA,IAAmB,gCAAiC;AACnE,IAAKA,KAAD,IAAYA,KAAK,CAALA,MAAAA,IAAgBA,KAAK,CAArBA,QAAAA,GAAAA,sBAAAA,GAA0D,EAAI;AAC9E,IAAKA,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaE,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,GAAGnB,2BAAOoB,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,GAAGzB,2BAAOC,GAAyH;AAC3J,IAAIqB,mCAAkBJ,2BAAD,OAAjBI,EAAiB,SAAjBA,CAAyD;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBlB,eAAOS,KAAM;AAC7B,sCAAsCT,eAAOM,WAAY;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMgB,qCAAoBR,2BAAD,MAAnBQ,EAA+CtB,eAA5B,WAAnBsB,CAAmE;AACzE;AACA;AACA,IAAIH,oBAAYC,MAAO;AACvB,MAAMP,mCAAkBC,2BAAD,OAAjBD,EAAiB,SAAjBA,CAAyD;AAC/D;AACA;AACA;AACA,QAAQU,oCAAmBT,2BAAD,MAAlBS,EAA8CvB,eAA5B,WAAlBuB,CAAkE;AAC1E;AACA;AACA;AACA;AACA,MAAML,mCAAkBJ,2BAAD,OAAjBI,EAAiB,SAAjBA,CAAyD;AAC/D;AACA;AACA;AACA,QAAQI,qCAAoBR,2BAAD,MAAnBQ,EAA+CtB,eAA5B,WAAnBsB,CAAmE;AAC3E;AACA;AACA;AACA,MAAMT,mCAAkBC,2BAAD,OAAjBD,EAAiB,SAAjBA,CAAyD;AAC/D;AACA;AACA;AACA,QAAQU,oCAAmBT,2BAAD,MAAlBS,EAA8CvB,eAA5B,WAAlBuB,CAAkE;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgDvB,eAAOE,WAAY;AACnE,6CAA6CF,eAAOE,WAAY;AAChE,wCAAwCF,eAAOE,WAAY;AAC3D;AACA;AACA,wCAAwCF,eAAOwB,WAAY;AAC3D;AACA;AACA,iBAAiBxB,eAAOC,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA,wCAAwCD,eAAOyB,WAAY;AAC3D;AACA;AACA,iBAAiBzB,eAAOE,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA,MAAOJ,KAAD,IAAWoB,mCAAkBJ,2BAAD,IAAjBI,EAA2CpB,KAAK,CAALA,QAAAA,GAAiBE,eAAjBF,WAAAA,GAAsCE,eAAhE,WAAjBkB,CAAqG;AACtH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAelB,eAAO0B,WAAY;AAClC,oBAAoB1B,eAAO2B,UAAW;AACtC;AACA;AACA;AACA,IAAK7B,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,IAAI8B,gCAAyB;AAvGtB,CAAA;AA0GA,QAAMC,4BAA4B,WAA5BA,4BAA4B,GAAGzB,qBAAI;AAChD;AACA;AAFO,CAAA;AAKA,QAAM0B,sBAAsB,WAAtBA,sBAAsB,GAAGlC,2BAAOC,GAA2B;AACxE;AACA;AACA,sBAAsBG,eAAOS,KAAM;AACnC;AACA;AACA,gBAAiBX,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,sBAAsBE,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,eAAO+B,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA,kBAAkB/B,eAAOgC,WAAY;AACrC;AAhDO,CAAA;AAmDA,QAAMC,cAAc,WAAdA,cAAc,GAAGrC,2BAAOsC,MAAwB;AAC7D;AACA,IAAIpC,KAAK,IAAIA,KAAK,CAALA,IAAAA,IAAcqC,YAAdrC,KAAAA,IAA4BoB,mCAAkBJ,2BAAD,OAAjBI,EAA8ClB,eAA7B,WAAjBkB,CAAkE;AAC3G,IAAIpB,KAAK,IAAIA,KAAK,CAALA,IAAAA,IAAcqC,YAAdrC,MAAAA,IAA6Be,mCAAkBC,2BAAD,OAAjBD,EAA8Cb,eAA7B,WAAjBa,CAAkE;AAC5G,IAAIf,KAAK,IAAIA,KAAK,CAALA,IAAAA,IAAcqC,YAAdrC,KAAAA,IAA4BsC,mCAAkBtB,2BAAD,OAAjBsB,EAA8CpC,eAA7B,WAAjBoC,CAAkE;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBtC,KAAK,IAAIA,KAAK,CAALA,IAAAA,IAAcqC,YAAdrC,KAAAA,GAAAA,MAAAA,GAAoCA,KAAK,CAALA,IAAAA,IAAcqC,YAAdrC,MAAAA,GAAAA,MAAAA,GAAqC,MAAO;AACzG,sBAAsBE,eAAOS,KAAM;AACnC;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAImB,gCAAyB;AAC7B;AACA;AACA,kBAAkB5B,eAAO2B,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B3B,eAAOqC,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBrC,eAAOsC,UAAW;AAC1C;AACA;AACA,eAAetC,eAAOC,WAAY;AAClC;AACA;AACA;AACA,0BAA0BD,eAAOqC,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBrC,eAAOuC,WAAY;AAC3C;AACA;AACA,eAAevC,eAAOE,WAAY;AAClC;AACA;AACA;AACA,0BAA0BF,eAAOqC,WAAY;AAC7C;AACA;AA5FO,CAAA;AA+FA,QAAMG,qBAAqB,WAArBA,qBAAqB,GAAG5C,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,wBAAwBE,eAAOsC,UAAW;AAC1C,aAAatC,eAAOyC,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBzC,eAAOuC,WAAY;AAC3C,aAAavC,eAAOE,WAAY;AAChC;AACA;AA3CO,EAAA","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling} from '../styles/typography';\nimport { Size } from '../types';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ${COLORS.neutral_300} !important;\n  }\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: 344px;\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  \n  input{\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: 1;\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n\n  ${props => props.size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${props => props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${props => props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  position: relative;\n  text-decoration: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: ${props => props.size == Size.Large ? '64px' : props.size == Size.Medium ? '56px' : '48px'};\n  background-color: ${COLORS.white};\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  width: 100%;\n  text-align: left;\n\n  div.divider  {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  span {\n    margin: auto 0 auto 16px;\n    line-height: 48px;\n  }\n\n  div.item-content {\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    div.item-label {\n      flex: 1 0 calc(100% - 40px);\n    }\n\n    div.item-icon {\n      margin-right: 6px;\n    }\n    div.item-icon-old {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n\n  ${CommonInteractionStyling};\n\n  &.active {\n    background: ${COLORS.neutral_20};\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: 2px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n\n    &::after {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n\n    &::after {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n`;\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}

package/dist/umd/Dropdown/DropdownButton.js

@@ -114,6 +114,7 @@
     // Globally used variables within the view.
     const [dropdownOpen, setDropdownOpen] = React.useState(false);
     const [selectedValues, setSelectedValues] = React.useState([]);
+    const [focused, setFocused] = React.useState(null);
 
     const handleValueSelect = values => {
       // Do all required actions
@@ -146,6 +147,8 @@
         maxHeight: maxHeight,
         items: items
       },
+      focused: focused,
+      setFocused: setFocused,
       size: size,
       width: width,
       alignLeft: alignLeft,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","itemsType","actionLabel","multiSelect","scrollable","pinTopItem","maxHeight","React","handleValueSelect","values","onClick","renderIconButton","setDropdownOpen","disabled","action","onValueUpdate","items"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGA,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B;AACA;AAFA,CAAA;;AAKA,QAAMC,cAAc,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,OAAA;AAKtBC,IAAAA,SAAS,GALa,QAAA;AAAA,IAAA,MAAA;AAOtBC,IAAAA,WAAW,GAPW,EAAA;AAAA,IAAA,KAAA;AAAA,IAAA,IAAA;AAAA,IAAA,SAAA;AAWtBC,IAAAA,WAAW,GAXW,KAAA;AAYtBC,IAAAA,UAAU,GAZY,KAAA;AAatBC,IAAAA,UAAU,GAbY,KAAA;AActBC,IAAAA;AAdsB,GAAD,KAcgB;AACrC;AACA,UAAM,CAAA,YAAA,EAAA,eAAA,IAAkCC,KAAK,CAALA,QAAAA,CAAxC,KAAwCA,CAAxC;AACA,UAAM,CAAA,cAAA,EAAA,iBAAA,IAAsCA,KAAK,CAALA,QAAAA,CAA5C,EAA4CA,CAA5C;;AAEA,UAAMC,iBAAiB,GAAIC,MAAD,IAAsB;AAC9C;AACAC,MAAAA,OAAO,CAAPA,MAAO,CAAPA;AAFF,KAAA;AAKA;AACF;AACA;AACA;;;AACE,UAAMC,gBAAgB,GAAG,MAAM;AAC7B,aAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,QAAA,OAAO,EAAnB,WAAA;AAAgC,QAAA,KAAK,EAArC,UAAA;AAAiD,QAAA,MAAM,EAAE,MAAMC,eAAe,CAAC,CAA/E,YAA8E,CAA9E;AAA+F,QAAA,QAAQ,EAAEC;AAAzG,OAAA,EADF,IACE,CADF;AADF,KAAA;;AAQA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EACGF,gBADH,EAAA,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AACE,MAAA,kBAAkB,EAAE;AAClBV,QAAAA,SAAS,EADS,SAAA;AAElBa,QAAAA,MAAM,EAAEA,MAAM,KAAK,MAAM,CAFP,CAEJ,CAFI;AAGlBZ,QAAAA,WAAW,EAHO,WAAA;AAIlBa,QAAAA,aAAa,EAJK,iBAAA;AAKlBZ,QAAAA,WAAW,EALO,WAAA;AAMlBC,QAAAA,UAAU,EANQ,UAAA;AAOlBC,QAAAA,UAAU,EAPQ,UAAA;AAQlBC,QAAAA,SAAS,EARS,SAAA;AASlBU,QAAAA,KAAK,EAAEA;AATW,OADtB;AAYE,MAAA,IAAI,EAZN,IAAA;AAaE,MAAA,KAAK,EAbP,KAAA;AAcE,MAAA,SAAS,EAdX,SAAA;AAeE,MAAA,MAAM,EAfR,YAAA;AAgBE,MAAA,SAAS,EAhBX,eAAA;AAiBE,MAAA,kBAAkB,EAjBpB,IAAA;AAkBE,MAAA,MAAM,EAlBR,EAAA;AAmBE,MAAA,cAAc,EAAEf,SAAS,IAATA,QAAAA,GAAAA,EAAAA,GAnBlB,cAAA;AAoBE,MAAA,iBAAiB,EApBnB,iBAAA;AAqBE,MAAA,kBAAkB,EArBpB,YAAA;AAsBE,MAAA,QAAQ,EAtBV,IAAA;AAuBE,MAAA,EAAE,EAAC;AAvBL,KAAA,CAFF,CADF;AApCF,GAAA;;oBAoEA,c","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton variant=\"secondary\" shape=\"circular\" action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","itemsType","actionLabel","multiSelect","scrollable","pinTopItem","maxHeight","React","handleValueSelect","values","onClick","renderIconButton","setDropdownOpen","disabled","action","onValueUpdate","items"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGA,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B;AACA;AAFA,CAAA;;AAKA,QAAMC,cAAc,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,OAAA;AAKtBC,IAAAA,SAAS,GALa,QAAA;AAAA,IAAA,MAAA;AAOtBC,IAAAA,WAAW,GAPW,EAAA;AAAA,IAAA,KAAA;AAAA,IAAA,IAAA;AAAA,IAAA,SAAA;AAWtBC,IAAAA,WAAW,GAXW,KAAA;AAYtBC,IAAAA,UAAU,GAZY,KAAA;AAatBC,IAAAA,UAAU,GAbY,KAAA;AActBC,IAAAA;AAdsB,GAAD,KAcgB;AACrC;AACA,UAAM,CAAA,YAAA,EAAA,eAAA,IAAkCC,KAAK,CAALA,QAAAA,CAAxC,KAAwCA,CAAxC;AACA,UAAM,CAAA,cAAA,EAAA,iBAAA,IAAsCA,KAAK,CAALA,QAAAA,CAA5C,EAA4CA,CAA5C;AACA,UAAM,CAAA,OAAA,EAAA,UAAA,IAAwBA,KAAK,CAALA,QAAAA,CAA9B,IAA8BA,CAA9B;;AAEA,UAAMC,iBAAiB,GAAIC,MAAD,IAAsB;AAC9C;AACAC,MAAAA,OAAO,CAAPA,MAAO,CAAPA;AAFF,KAAA;AAKA;AACF;AACA;AACA;;;AACE,UAAMC,gBAAgB,GAAG,MAAM;AAC7B,aAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,QAAA,OAAO,EAAnB,WAAA;AAAgC,QAAA,KAAK,EAArC,UAAA;AAAiD,QAAA,MAAM,EAAE,MAAMC,eAAe,CAAC,CAA/E,YAA8E,CAA9E;AAA+F,QAAA,QAAQ,EAAEC;AAAzG,OAAA,EADF,IACE,CADF;AADF,KAAA;;AAQA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EACGF,gBADH,EAAA,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AACE,MAAA,kBAAkB,EAAE;AAClBV,QAAAA,SAAS,EADS,SAAA;AAElBa,QAAAA,MAAM,EAAEA,MAAM,KAAK,MAAM,CAFP,CAEJ,CAFI;AAGlBZ,QAAAA,WAAW,EAHO,WAAA;AAIlBa,QAAAA,aAAa,EAJK,iBAAA;AAKlBZ,QAAAA,WAAW,EALO,WAAA;AAMlBC,QAAAA,UAAU,EANQ,UAAA;AAOlBC,QAAAA,UAAU,EAPQ,UAAA;AAQlBC,QAAAA,SAAS,EARS,SAAA;AASlBU,QAAAA,KAAK,EAAEA;AATW,OADtB;AAYE,MAAA,OAAO,EAZT,OAAA;AAaE,MAAA,UAAU,EAbZ,UAAA;AAcE,MAAA,IAAI,EAdN,IAAA;AAeE,MAAA,KAAK,EAfP,KAAA;AAgBE,MAAA,SAAS,EAhBX,SAAA;AAiBE,MAAA,MAAM,EAjBR,YAAA;AAkBE,MAAA,SAAS,EAlBX,eAAA;AAmBE,MAAA,kBAAkB,EAnBpB,IAAA;AAoBE,MAAA,MAAM,EApBR,EAAA;AAqBE,MAAA,cAAc,EAAEf,SAAS,IAATA,QAAAA,GAAAA,EAAAA,GArBlB,cAAA;AAsBE,MAAA,iBAAiB,EAtBnB,iBAAA;AAuBE,MAAA,kBAAkB,EAvBpB,YAAA;AAwBE,MAAA,QAAQ,EAxBV,IAAA;AAyBE,MAAA,EAAE,EAAC;AAzBL,KAAA,CAFF,CADF;AArCF,GAAA;;oBAuEA,c","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton variant=\"secondary\" shape=\"circular\" action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}

package/dist/umd/Dropdown/DropdownContent.js

@@ -60,7 +60,7 @@
   box-sizing: border-box;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
   padding-top: 4px;
-  padding-right: 10px;
+  padding-right: 0px;
   padding-bottom: 4px;
   padding-left: 0px;
 
@@ -71,7 +71,7 @@
 `;
   const ListContainer = _styledComponents2.default.div`
   ${props => props.scrollable ? 'overflow-y: scroll;' : ''}
-  ${props => props.itemsType != 'normal' ? 'margin: 2px 6px 0 16px;' : ''}
+  ${props => props.itemsType != 'normal' ? 'margin-left: 4px;' : ''}
 
   div {
     padding-top: ${props => props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px'};
@@ -108,8 +108,7 @@
   border-bottom-style: solid;
   border-bottom-color: ${_styles.COLORS.neutral_200};
   border-bottom-width: 1px;
-  margin-right: 22px;
-  padding-left: 4px;
+  margin-right: 22px;  
 `;
   const ActionButtonContainer = _styledComponents2.default.div`
   border-top-style: solid;
@@ -135,12 +134,12 @@
     width,
     setIsOpen,
     filter,
+    focused,
+    setFocused,
     selectedValues,
     setSelectedValues,
     messageOnNoResults
   }) => {
-    const [focused, setFocused] = _react2.default.useState(0);
-
     const [isUp, setIsUp] = _react2.default.useState(false);
 
     const dropdownContentRef = _react2.default.useRef(null);
@@ -273,9 +272,22 @@
 
     _react2.default.useEffect(() => {
       determineDropUp();
+    }, [isOpen]);
+
+    const haveTopItem = () => {
+      if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;
+      return false;
+    };
+
+    const getSuggestions = () => {
+      return getFilteredItems().filter(x => x.suggestion);
+    };
 
+    _react2.default.useLayoutEffect(() => {
       if (isOpen && (focused || focused == 0)) {
-        const newFocusedElement = elRefs[focused];
+        const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
+        if (focusThis != focused) setFocused(focusThis);
+        const newFocusedElement = elRefs[focusThis];
         console.log(newFocusedElement);
         newFocusedElement?.current?.focus();
       }
@@ -286,7 +298,7 @@
       const visibleItems = getFilteredItems();
       const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;
       let showTopItem = false;
-      const suggestions = getFilteredItems().filter(x => x.suggestion);
+      const suggestions = getSuggestions();
       if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;
       if (!showTopItem) return;
       return /*#__PURE__*/_react2.default.createElement(TopItemContainer, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/_react2.default.createElement(_InputFields.RadioButton, {
@@ -470,7 +482,9 @@
     hideOnClickOutside: _propTypes2.default.bool.isRequired,
     selectedValues: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
     setSelectedValues: _propTypes2.default.func.isRequired,
-    messageOnNoResults: _propTypes2.default.string.isRequired
+    messageOnNoResults: _propTypes2.default.string.isRequired,
+    focused: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf([null])]),
+    setFocused: _propTypes2.default.func.isRequired
   };
   exports.default = DropdownContent;
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","neutral_100","Size","ListContainer","neutral_600","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","value","displayLabel","noteLabel","suggestion","showDividerAbove","disabled","icon","itemsType","scrollable","multiSelect","maxHeight","actionLabel","action","pinTopItem","onValueUpdate","items","isButton","customizationProps","alignLeft","isOpen","setIsOpen","id","filter","width","hideOnClickOutside","selectedValues","setSelectedValues","messageOnNoResults","DropdownContent","React","dropdownContentRef","size","itemsListRef","determineDropUp","options","node","windowHeight","window","menuHeight","Math","instOffsetWithMenu","setIsUp","setNewFocusedElement","index","newFocusedElement","elRefs","setFocused","handleKeyDown","e","focusedNow","document","handleClickOutside","x","scrollPosition","handleScroll","useLayoutEffect","getFilteredItems","filtrationString","getCorrectRef","ref","arrLength","setElRefs","Array","focused","console","getTopItem","visibleItems","allSelected","y","showTopItem","suggestions","selected","newValues","fontSize","getElements","number","item","newValue","isUp"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  \n  width: ${props => props.width ? props.width : '100%'};\n  z-index: 1;\n  margin: ${props => (props.isButton ? '-4px' : '4px 0px')};\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${props => (props.alignLeft ? 'left: 0px;' : '')}\n\n  ${props => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding-top: 4px;\n  padding-right: 10px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ${props => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${props => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${props => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean, size? : Size, itemsType?: string }>`\n  ${props => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${props => (props.itemsType != 'normal' ? 'margin: 2px 6px 0 16px;' : '')}\n\n  div {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\nconst ItemsContainer = styled.div`\n`;\n\n\nconst TopItemContainer = styled.div`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;\n  padding-left: 4px;\n`;\n\nconst ActionButtonContainer = styled.div`\n  border-top-style: solid;\n  border-top-color: ${COLORS.neutral_200};\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  showDividerAbove?: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  action: () => void;\n  pinTopItem?: boolean;\n  onValueUpdate: (values: string[]) => void;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  width?: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n  id,\n  customizationProps,\n  alignLeft,\n  isButton,\n  size,\n  isOpen,\n  hideOnClickOutside,\n  width,\n  setIsOpen,\n  filter,\n  selectedValues,\n  setSelectedValues,\n  messageOnNoResults\n}) => {\n  const [focused, setFocused] = React.useState<number | null>(0);\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  if(!customizationProps.itemsType) customizationProps.itemsType = 'normal';\n  if(!size) size = Size.Small;\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n  \n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setNewFocusedElement(0);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setNewFocusedElement(0);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0); \n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  }\n  useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.\n      filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch(customizationProps.itemsType)\n    {\n      case 'normal':\n        return ref as React.RefObject<HTMLButtonElement> || createRef<HTMLButtonElement>();\n      default:\n        return ref as React.RefObject<HTMLDivElement> || createRef<HTMLDivElement>();\n    }\n  }\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs(elRefs => \n      Array(arrLength + 1).fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])));\n  }, [isOpen, arrLength, selectedValues]);\n    \n  React.useEffect(() => {\n    determineDropUp();\n    if (isOpen && (focused || focused == 0)) {\n      const newFocusedElement = elRefs[focused];\n      console.log(newFocusedElement);\n      newFocusedElement?.current?.focus();\n    }\n  }, [isOpen]);\n\n\n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getFilteredItems().filter(x => x.suggestion);\n\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n   \n    return (\n      <TopItemContainer>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {}} size={size} id={`${id}_topitem`} label={selectedValues[0]} selected={true} />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map(x => x.value) : [];\n              setSelectedValues(newValues);\n              customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : selectedValues[0]}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n          {suggestions.map(x => \n            <DropdownButton ref={elRefs[0] as React.RefObject<HTMLButtonElement>} type=\"button\" id={`${id}_topitem`}\n              onClick={(e: any) => {\n                customizationProps.onValueUpdate([x.value]);\n                setSelectedValues([x.value]);\n                setIsOpen(false);\n                setFocused(null);\n              }}>\n              <div className=\"item-content\">\n                {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n                <div className=\"item-label\">\n                  {x?.displayLabel ?? x?.value}\n                  {x?.noteLabel && <div style={{fontSize: '12px'}}>{x.noteLabel}</div>}\n                </div>\n              </div>\n            </DropdownButton>)}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer>\n          <DropdownButton disabled>\n            <span>{messageOnNoResults}</span>\n          </DropdownButton>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer>\n        {getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {\n          return (\n            <>\n              {customizationProps.itemsType == 'radio' && (\n                <RadioButton\n                  select={(selected: boolean) => {\n                    if (!selected) return;\n                    customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n                    setSelectedValues([item.value]);\n                  }}\n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {customizationProps.itemsType == 'checkbox' && (\n                <Checkbox\n                  select={(selected: boolean) => {\n                    let newValue: string[] = [];\n                    if (customizationProps.multiSelect) {\n                      if (selected) newValue = [...selectedValues, item.value];\n                      else newValue = selectedValues.filter(x => x != item.value);\n                    } else newValue = selected ? [item.value] : [];\n\n                    setSelectedValues(newValue);\n                    customizationProps.onValueUpdate(newValue);\n                  }}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled} \n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {(customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                  <DropdownButton\n                    type=\"button\"\n                    size={size}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                    onClick={(e: any) => {\n                      customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                      setIsOpen(false);\n                      setFocused(null);\n                    }}\n                    className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : '')}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}>\n                      {item.showDividerAbove && <div className=\"divider\"/>}\n                      <div className=\"item-content\">\n                        {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n                        <div className=\"item-label\">\n                          {item.displayLabel ?? item.value}\n                          {item.noteLabel && <div style={{fontSize: '12px'}}>{item.noteLabel}</div>}\n                        </div>\n                      </div>\n                  </DropdownButton>\n              )}\n            </>\n          );\n        })}\n      </ItemsContainer>\n    );\n  };\n\n  return <DDContainer\n          ref={dropdownContentRef}\n          size={size}\n          width={width}\n          isButton={isButton}\n          alignLeft={alignLeft}\n          scrollable={customizationProps.scrollable}\n          maxHeight={customizationProps.maxHeight}\n          className={[isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')}>\n          <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n            {customizationProps.pinTopItem && getTopItem()}\n            {getElements()}\n          </ListContainer>\n          {customizationProps.action && customizationProps.actionLabel && (\n            <ActionButtonContainer>\n              <Button width=\"100%\" variant=\"primary\" size={size} onClick={() => customizationProps.action()}>\n                {customizationProps.actionLabel}\n              </Button>\n            </ActionButtonContainer>\n          )}\n        </DDContainer>;\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","neutral_100","Size","ListContainer","neutral_600","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","value","displayLabel","noteLabel","suggestion","showDividerAbove","disabled","icon","itemsType","scrollable","multiSelect","maxHeight","actionLabel","action","pinTopItem","onValueUpdate","items","isButton","customizationProps","alignLeft","isOpen","setIsOpen","id","filter","width","hideOnClickOutside","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","DropdownContent","React","dropdownContentRef","size","itemsListRef","determineDropUp","options","node","windowHeight","window","menuHeight","Math","instOffsetWithMenu","setIsUp","setNewFocusedElement","index","newFocusedElement","elRefs","handleKeyDown","e","focusedNow","document","handleClickOutside","x","scrollPosition","handleScroll","useLayoutEffect","getFilteredItems","filtrationString","getCorrectRef","ref","arrLength","setElRefs","Array","haveTopItem","getSuggestions","focusThis","console","getTopItem","visibleItems","allSelected","y","showTopItem","suggestions","selected","newValues","fontSize","getElements","number","item","newValue","isUp"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  \n  width: ${props => props.width ? props.width : '100%'};\n  z-index: 1;\n  margin: ${props => (props.isButton ? '-4px' : '4px 0px')};\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${props => (props.alignLeft ? 'left: 0px;' : '')}\n\n  ${props => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ${props => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${props => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${props => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean, size? : Size, itemsType?: string }>`\n  ${props => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${props => (props.itemsType != 'normal' ? 'margin-left: 4px;' : '')}\n\n  div {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\nconst ItemsContainer = styled.div`\n`;\n\n\nconst TopItemContainer = styled.div`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;  \n`;\n\nconst ActionButtonContainer = styled.div`\n  border-top-style: solid;\n  border-top-color: ${COLORS.neutral_200};\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  showDividerAbove?: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  action: () => void;\n  pinTopItem?: boolean;\n  onValueUpdate: (values: string[]) => void;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  width?: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n  focused: number | null;\n  setFocused: (focused: number | null) => void;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n  id,\n  customizationProps,\n  alignLeft,\n  isButton,\n  size,\n  isOpen,\n  hideOnClickOutside,\n  width,\n  setIsOpen,\n  filter,\n  focused, \n  setFocused,\n  selectedValues,\n  setSelectedValues,\n  messageOnNoResults\n}) => {\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  if(!customizationProps.itemsType) customizationProps.itemsType = 'normal';\n  if(!size) size = Size.Small;\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n  \n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setNewFocusedElement(0);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setNewFocusedElement(0);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0); \n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  }\n  useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.\n      filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch(customizationProps.itemsType)\n    {\n      case 'normal':\n        return ref as React.RefObject<HTMLButtonElement> || createRef<HTMLButtonElement>();\n      default:\n        return ref as React.RefObject<HTMLDivElement> || createRef<HTMLDivElement>();\n    }\n  }\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs(elRefs => \n      Array(arrLength + 1).fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])));\n  }, [isOpen, arrLength, selectedValues]);\n    \n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n\n  const haveTopItem = () => {\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;\n    else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;\n    return false;\n  };\n  \n  const getSuggestions = () => {\n    return getFilteredItems().filter(x => x.suggestion);\n  }\n\n  React.useLayoutEffect(() => {\n    if (isOpen && (focused || focused == 0)) {\n      const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;\n      if(focusThis != focused)\n        setFocused(focusThis);\n      const newFocusedElement = elRefs[focusThis];\n      console.log(newFocusedElement);\n      newFocusedElement?.current?.focus();\n    }\n  }, [isOpen]);\n\n  \n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getSuggestions();\n\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n   \n    return (\n      <TopItemContainer>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {}} size={size} id={`${id}_topitem`} label={selectedValues[0]} selected={true} />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map(x => x.value) : [];\n              setSelectedValues(newValues);\n              customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : selectedValues[0]}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n          {suggestions.map(x => \n            <DropdownButton ref={elRefs[0] as React.RefObject<HTMLButtonElement>} type=\"button\" id={`${id}_topitem`}\n              onClick={(e: any) => {\n                customizationProps.onValueUpdate([x.value]);\n                setSelectedValues([x.value]);\n                setIsOpen(false);\n                setFocused(null);\n              }}>\n              <div className=\"item-content\">\n                {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n                <div className=\"item-label\">\n                  {x?.displayLabel ?? x?.value}\n                  {x?.noteLabel && <div style={{fontSize: '12px'}}>{x.noteLabel}</div>}\n                </div>\n              </div>\n            </DropdownButton>)}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer>\n          <DropdownButton disabled>\n            <span>{messageOnNoResults}</span>\n          </DropdownButton>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer>\n        {getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {\n          return (\n            <>\n              {customizationProps.itemsType == 'radio' && (\n                <RadioButton\n                  select={(selected: boolean) => {\n                    if (!selected) return;\n                    customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n                    setSelectedValues([item.value]);\n                  }}\n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {customizationProps.itemsType == 'checkbox' && (\n                <Checkbox\n                  select={(selected: boolean) => {\n                    let newValue: string[] = [];\n                    if (customizationProps.multiSelect) {\n                      if (selected) newValue = [...selectedValues, item.value];\n                      else newValue = selectedValues.filter(x => x != item.value);\n                    } else newValue = selected ? [item.value] : [];\n\n                    setSelectedValues(newValue);\n                    customizationProps.onValueUpdate(newValue);\n                  }}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled} \n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {(customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                  <DropdownButton\n                    type=\"button\"\n                    size={size}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                    onClick={(e: any) => {\n                      customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                      setIsOpen(false);\n                      setFocused(null);\n                    }}\n                    className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : '')}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}>\n                      {item.showDividerAbove && <div className=\"divider\"/>}\n                      <div className=\"item-content\">\n                        {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n                        <div className=\"item-label\">\n                          {item.displayLabel ?? item.value}\n                          {item.noteLabel && <div style={{fontSize: '12px'}}>{item.noteLabel}</div>}\n                        </div>\n                      </div>\n                  </DropdownButton>\n              )}\n            </>\n          );\n        })}\n      </ItemsContainer>\n    );\n  };\n\n  return <DDContainer\n          ref={dropdownContentRef}\n          size={size}\n          width={width}\n          isButton={isButton}\n          alignLeft={alignLeft}\n          scrollable={customizationProps.scrollable}\n          maxHeight={customizationProps.maxHeight}\n          className={[isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')}>\n          <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n            {customizationProps.pinTopItem && getTopItem()}\n            {getElements()}\n          </ListContainer>\n          {customizationProps.action && customizationProps.actionLabel && (\n            <ActionButtonContainer>\n              <Button width=\"100%\" variant=\"primary\" size={size} onClick={() => customizationProps.action()}>\n                {customizationProps.actionLabel}\n              </Button>\n            </ActionButtonContainer>\n          )}\n        </DDContainer>;\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}

package/dist/umd/Dropdown/DropdownFilter.js

@@ -106,6 +106,7 @@
     const [placeholderSearch, setPlaceholderSearch] = React.useState(placeholder || '');
     const [restartFilter, setRestartFilter] = React.useState(false);
     const [selectedValues, setSelectedValues] = React.useState([]);
+    const [focused, setFocused] = React.useState(null);
     const styledFieldRef = React.useRef(null);
     const inputRef = React.useRef(null);
 
@@ -263,6 +264,8 @@
       setSelectedValues: setSelectedValues,
       hideOnClickOutside: true,
       size: size == 'medium' ? _types.Size.Medium : _types.Size.Small,
+      focused: focused,
+      setFocused: setFocused,
       customizationProps: {
         itemsType: 'normal',
         multiSelect: false,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","DropdownFilter","React","styledFieldRef","inputRef","handleKeyPress","e","matches","c","input","setInput","setIsOpen","setRestartFilter","setPlaceholderSearch","document","setIsLoading","selectedValues","setSelectedValues","renderStandardDropdown","isOpen","Math","isLoading","COLORS","neutral_600","renderButtonDropdown","Size","itemsType","multiSelect","action","onValueUpdate","values","val","items","x","value","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { Size } from '../types'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: string[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: 'small' | 'medium';\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst DropdownFilter = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  onInputChange,\n  initalValue,\n  required,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = list?.filter((c) => c.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0]);\n          setInput(matches[0]);\n        }\n        setIsOpen(!isOpen);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    if (!isOpen && !list.includes(input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.includes(input))\n      setSelectedValues([]);\n\n    if(list.includes(input))\n    {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n          inputRef.current?.focus();\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        setIsOpen(!isOpen);\n        inputRef.current?.focus();\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n          isOpen={isOpen}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          selectedValues={selectedValues}\n          setSelectedValues={setSelectedValues}\n          hideOnClickOutside={true}\n          size={size == 'medium' ? Size.Medium : Size.Small}\n          customizationProps={{\n            itemsType: 'normal',\n            multiSelect: false,\n            action: () => {},\n            onValueUpdate: (values: string[]) => {\n              const val = values[0] ?? '';\n              setRestartFilter(true);\n              setInput(val);\n            },\n            items: list.map(x => ({ value: x }))\n          }}\n          filter={!restartFilter ? input : ''}\n          setIsOpen={setIsOpen}\n          alignLeft={false}\n          isButton={isButton || false}\n          id={`${id}_dropdowncontent`} />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","DropdownFilter","React","styledFieldRef","inputRef","handleKeyPress","e","matches","c","input","setInput","setIsOpen","setRestartFilter","setPlaceholderSearch","document","setIsLoading","selectedValues","setSelectedValues","renderStandardDropdown","isOpen","Math","isLoading","COLORS","neutral_600","renderButtonDropdown","Size","itemsType","multiSelect","action","onValueUpdate","values","val","items","x","value","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { Size } from '../types'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: string[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: 'small' | 'medium';\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst DropdownFilter = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  onInputChange,\n  initalValue,\n  required,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = list?.filter((c) => c.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0]);\n          setInput(matches[0]);\n        }\n        setIsOpen(!isOpen);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    if (!isOpen && !list.includes(input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.includes(input))\n      setSelectedValues([]);\n\n    if(list.includes(input))\n    {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n          inputRef.current?.focus();\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        setIsOpen(!isOpen);\n        inputRef.current?.focus();\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n          isOpen={isOpen}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          selectedValues={selectedValues}\n          setSelectedValues={setSelectedValues}\n          hideOnClickOutside={true}\n          size={size == 'medium' ? Size.Medium : Size.Small}\n          focused={focused}\n          setFocused={setFocused}\n          customizationProps={{\n            itemsType: 'normal',\n            multiSelect: false,\n            action: () => {},\n            onValueUpdate: (values: string[]) => {\n              const val = values[0] ?? '';\n              setRestartFilter(true);\n              setInput(val);\n            },\n            items: list.map(x => ({ value: x }))\n          }}\n          filter={!restartFilter ? input : ''}\n          setIsOpen={setIsOpen}\n          alignLeft={false}\n          isButton={isButton || false}\n          id={`${id}_dropdowncontent`} />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.0.1-dev.34.full",
+  "version": "1.0.1-dev.35.full",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [