@laerdal/life-react-components 1.2.2-dev.14 → 1.2.2-dev.14.full

package/dist/js/Dropdown/BasicDropdown.js

@@ -51,7 +51,6 @@ var BasicDropdown = function BasicDropdown(_ref) {
       list = _ref.list,
       placeholder = _ref.placeholder,
       onSelect = _ref.onSelect,
-      setDropdownMenuValues = _ref.setDropdownMenuValues,
       initalValue = _ref.initalValue,
       disableSorting = _ref.disableSorting,
       messageOnNoResults = _ref.messageOnNoResults,
@@ -75,9 +74,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       autofilledMessage = _ref.autofilledMessage,
       size = _ref.size,
       _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
-      dropdownMenuValues = _ref.dropdownMenuValues,
-      minWidth = _ref.minWidth;
+      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -144,12 +141,11 @@ var BasicDropdown = function BasicDropdown(_ref) {
   };
 
   React.useEffect(function () {
-    if (initalValue || dropdownMenuValues) {
-      var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
-      setInput(initValue);
+    if (initalValue) {
+      setInput(initalValue);
       setRestartFilter(true);
     }
-  }, [initalValue, dropdownMenuValues]);
+  }, [initalValue]);
   React.useEffect(function () {
     document.addEventListener('keypress', handleKeyPress);
     return function () {
@@ -181,8 +177,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
     className: size ? size : '',
     locked: locked,
     disabled: disabled,
-    margin: margin,
-    minWidth: minWidth
+    margin: margin
   }, /*#__PURE__*/React.createElement(_CommonStyling.StyledField, {
     ref: styledFieldRef,
     className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
@@ -250,8 +245,8 @@ var BasicDropdown = function BasicDropdown(_ref) {
     setIsOpen: customSetIsOpen,
     messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
     isButton: isButton || false,
-    selectedValues: dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
-    setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
+    selectedValues: selectedValues,
+    setSelectedValues: setSelectedValues,
     id: "".concat(id, "_dropdowncontent")
   })), activeValidationMessage && /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
     size: "20px",
@@ -277,7 +272,6 @@ BasicDropdown.propTypes = {
   maxHeight: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   onSelect: _propTypes.default.func,
-  setDropdownMenuValues: _propTypes.default.func,
   initalValue: _propTypes.default.string,
   disableSorting: _propTypes.default.bool,
   messageOnNoResults: _propTypes.default.string,
@@ -286,8 +280,7 @@ BasicDropdown.propTypes = {
   isButton: _propTypes.default.bool,
   activeValidationMessage: _propTypes.default.string,
   autofilledMessage: _propTypes.default.string,
-  margin: _propTypes.default.string,
-  dropdownMenuValues: _propTypes.default.arrayOf(_propTypes.default.string)
+  margin: _propTypes.default.string
 };
 var _default = BasicDropdown;
 exports.default = _default;

package/dist/js/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","initValue","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","Size","Small","COLORS","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: number;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\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>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue, dropdownMenuValues]);\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  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}>\n          <InputField\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
+{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","Size","Small","COLORS","neutral_600","onValueUpdate","items","warning_400"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AA8BA,IAAMA,eAAe,GAAG,GAAxB;AACA,IAAMC,iBAAiB,GAAG,EAA1B;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OA0BK;AAAA,MAzBzBC,EAyByB,QAzBzBA,EAyByB;AAAA,MAxBzBC,IAwByB,QAxBzBA,IAwByB;AAAA,MAvBzBC,WAuByB,QAvBzBA,WAuByB;AAAA,MAtBzBC,QAsByB,QAtBzBA,QAsByB;AAAA,MArBzBC,WAqByB,QArBzBA,WAqByB;AAAA,MApBzBC,cAoByB,QApBzBA,cAoByB;AAAA,MAnBzBC,kBAmByB,QAnBzBA,kBAmByB;AAAA,4BAlBzBC,SAkByB;AAAA,MAlBzBA,SAkByB,+BAlBb,QAkBa;AAAA,MAjBzBC,MAiByB,QAjBzBA,MAiByB;AAAA,MAhBzBC,WAgByB,QAhBzBA,WAgByB;AAAA,MAfzBC,aAeyB,QAfzBA,aAeyB;AAAA,MAdzBC,UAcyB,QAdzBA,UAcyB;AAAA,MAbzBC,aAayB,QAbzBA,aAayB;AAAA,MAZzBC,cAYyB,QAZzBA,cAYyB;AAAA,MAXzBC,UAWyB,QAXzBA,UAWyB;AAAA,MAVzBC,WAUyB,QAVzBA,WAUyB;AAAA,6BATzBC,UASyB;AAAA,MATzBA,UASyB,gCATZ,IASY;AAAA,MARzBC,SAQyB,QARzBA,SAQyB;AAAA,MAPzBC,QAOyB,QAPzBA,QAOyB;AAAA,MANzBC,MAMyB,QANzBA,MAMyB;AAAA,MALzBC,QAKyB,QALzBA,QAKyB;AAAA,MAJzBC,uBAIyB,QAJzBA,uBAIyB;AAAA,MAHzBC,iBAGyB,QAHzBA,iBAGyB;AAAA,MAFzBC,IAEyB,QAFzBA,IAEyB;AAAA,yBADzBC,MACyB;AAAA,MADzBA,MACyB,4BADhB,OACgB;;AACzB,wBAA4BC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,yBAAkCH,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAlC;AAAA;AAAA,MAAOG,SAAP;AAAA,MAAkBC,YAAlB;;AACA,yBAA0BL,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAA1B;AAAA;AAAA,MAAOK,KAAP;AAAA,MAAcC,QAAd;;AACA,yBAAkDP,KAAK,CAACC,QAAN,CAAuBxB,WAAW,IAAI,EAAtC,CAAlD;AAAA;AAAA,MAAO+B,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,yBAA0CT,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA1C;AAAA;AAAA,MAAOS,aAAP;AAAA,MAAsBC,gBAAtB;;AACA,0BAA8BX,KAAK,CAACC,QAAN,CAA8B,IAA9B,CAA9B;AAAA;AAAA,MAAOW,OAAP;AAAA,MAAgBC,UAAhB;;AACA,0BAA4Cb,KAAK,CAACC,QAAN,CAAyBtB,WAAW,GAAG,CAACA,WAAD,CAAH,GAAmB,EAAvD,CAA5C;AAAA;AAAA,MAAOmC,cAAP;AAAA,MAAuBC,iBAAvB;;AAEA,MAAMC,cAAc,GAAGhB,KAAK,CAACiB,MAAN,CAA6B,IAA7B,CAAvB;AAEA;AACF;AACA;AACA;AACA;;AAEE,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD,EAAY;AACjC,QAAIH,cAAc,SAAd,IAAAA,cAAc,WAAd,IAAAA,cAAc,CAAEI,OAAhB,IAA2BJ,cAAc,CAACI,OAAf,CAAuBC,QAAvB,CAAgCF,CAAC,CAACG,MAAlC,CAA/B,EAA0E;AACxE,UAAIH,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AACpBV,QAAAA,UAAU,CAAC,CAAD,CAAV;AACAV,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD,OAHD,MAGO,IAAIiB,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AAC3BV,QAAAA,UAAU,CAAC,CAAD,CAAV;AACAV,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF;AACF,GAVD;;AAYA,MAAMsB,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,MAAD,EAAsB;AAC9Cd,IAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAJ,IAAAA,QAAQ,CAACkB,MAAM,CAACC,IAAP,CAAY,IAAZ,CAAD,CAAR;AACAhD,IAAAA,QAAQ,IAAIA,QAAQ,CAAC+C,MAAD,CAApB,CAH8C,CAI9C;;AACA,QAAIzC,WAAW,IAAIM,WAAnB,EAAgC;AAEhCa,IAAAA,SAAS,CAAC,KAAD,CAAT;AACAU,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GATD;;AAWAb,EAAAA,KAAK,CAAC2B,SAAN,CAAgB,YAAM;AACpB,QAAIhD,WAAJ,EAAiB;AACf4B,MAAAA,QAAQ,CAAC5B,WAAD,CAAR;AACAgC,MAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACD;AACF,GALD,EAKG,CAAChC,WAAD,CALH;AAOAqB,EAAAA,KAAK,CAAC2B,SAAN,CAAgB,YAAM;AACpBC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,UAA1B,EAAsCX,cAAtC;AACA,WAAO,YAAM;AACXU,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,UAA7B,EAAyCZ,cAAzC;AACD,KAFD;AAGD,GALD;AAOAlB,EAAAA,KAAK,CAAC2B,SAAN,CAAgB,YAAM;AACpBtB,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,GAFD,EAEG,CAACC,KAAD,CAFH;;AAIA,MAAMyB,eAAe,GAAG,SAAlBA,eAAkB,CAAC7B,MAAD,EAAqB;AAC3CC,IAAAA,SAAS,CAACD,MAAD,CAAT;AACD,GAFD;;AAIA,MAAM8B,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAMP,MAAM,GAAGnB,KAAK,CAAC2B,KAAN,CAAY,GAAZ,EAAiBC,GAAjB,CAAqB,UAACC,GAAD;AAAA,aAASA,GAAG,CAACC,IAAJ,EAAT;AAAA,KAArB,CAAf;AACA,QAAMC,iBAAiB,GAAG7D,IAAI,CAAC8D,MAAL,CAAY,UAACC,IAAD;AAAA,aAAUd,MAAM,CAACe,QAAP,CAAgBD,IAAI,CAACE,KAArB,CAAV;AAAA,KAAZ,EAAmDP,GAAnD,CAAuD,UAACQ,CAAD;AAAA,aAAOA,CAAC,CAACC,YAAT;AAAA,KAAvD,CAA1B;AACA,WAAON,iBAAiB,CAACX,IAAlB,CAAuB,IAAvB,CAAP;AACD,GAJD;;AAMA,sBACE,uDACE,oBAAC,uBAAD;AAAU,IAAA,QAAQ,EAAE/B,QAAQ,IAAI,KAAhC;AAAuC,IAAA,SAAS,EAAEG,IAAI,GAAGA,IAAH,GAAU,EAAhE;AAAoE,IAAA,MAAM,EAAEJ,MAA5E;AAAoF,IAAA,QAAQ,EAAED,QAA9F;AAAwG,IAAA,MAAM,EAAEM;AAAhH,kBACE,oBAAC,0BAAD;AACE,IAAA,GAAG,EAAEiB,cADP;AAEE,IAAA,SAAS,EAAE,CAACd,MAAM,GAAG,WAAH,GAAiB,EAAxB,EAA4B0C,MAA5B,CAAmC9C,IAAI,GAAGA,IAAH,GAAU,EAAjD,EAAqD8C,MAArD,CAA4DjD,QAAQ,GAAG,QAAH,GAAc,EAAlF,CAFb;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAI,CAACD,MAAD,IAAW,CAACD,QAAhB,EAA0B;AACxBU,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF,KAPH;AAQE,IAAA,QAAQ,EAAET,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CARtC;AASE,IAAA,QAAQ,EAAED,QAAQ,IAAI,KATxB;AAUE,IAAA,MAAM,EAAEC,MAAM,IAAI,KAVpB;AAWE,IAAA,qBAAqB,EAAE,CAAC,CAACE,uBAX3B;AAYE,IAAA,WAAW,EAAEY,iBAZf;AAaE,IAAA,aAAa,EAAE,CAACF;AAblB,kBAcE,oBAAC,yBAAD;AACE,IAAA,IAAI,EAAC,QADP;AAEE,IAAA,QAAQ,MAFV;AAGE,IAAA,WAAW,EAAEE,iBAHf;AAIE,IAAA,KAAK,EAAEwB,eAAe,EAJxB;AAKE,IAAA,SAAS,EAAElC,IAAI,aAAMA,IAAN,cAAqB,OALtC;AAME,IAAA,OAAO,EAAE,iBAACqB,CAAD,EAAY;AACnB,UAAI,CAACzB,MAAD,IAAW,CAACD,QAAhB,EAA0B;AACxB0B,QAAAA,CAAC,CAAC0B,eAAF;AACA1C,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF,KAXH;AAYE,IAAA,QAAQ,EAAET,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CAZtC;AAaE,IAAA,QAAQ,EAAED,QAAQ,IAAI;AAbxB,IAdF,EA6BGW,SAAS,gBAAG,oBAAC,kCAAD;AAAkB,IAAA,IAAI,EAAE0C,YAAKC,KAA7B;AAAoC,IAAA,KAAK,EAAEC,eAAOC;AAAlD,IAAH,GAAuE,IA7BnF,eA8BE;AAAK,IAAA,OAAO,EAAE;AAAA,aAAM9C,SAAS,CAAC,CAACD,MAAF,CAAf;AAAA,KAAd;AAAwC,IAAA,SAAS,EAAE;AAAnD,KACGA,MAAM,gBAAG,oBAAC,wBAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,SAAS,EAAEJ,IAAI,GAAGA,IAAH,GAAU;AAAlD,IAAH,gBAA8D,oBAAC,0BAAD;AAAe,IAAA,IAAI,EAAC,MAApB;AAA2B,IAAA,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;AAApD,IADvE,CA9BF,CADF,EAmCG,CAACJ,MAAD,IAAW,CAACD,QAAZ,iBACC,oBAAC,wBAAD;AACE,IAAA,kBAAkB,EAAE;AAClBX,MAAAA,SAAS,EAAEA,SADO;AAElBC,MAAAA,MAAM,EAAEA,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAa,YAAM,CAAE,CAFT;AAGlBC,MAAAA,WAAW,EAAEA,WAHK;AAIlBC,MAAAA,aAAa,EAAEA,aAJG;AAKlBG,MAAAA,cAAc,EAAEA,cALE;AAMlBG,MAAAA,UAAU,EAAEA,UANM;AAOlB2D,MAAAA,aAAa,EAAE1B,iBAPG;AAQlB2B,MAAAA,KAAK,EAAE3E,IARW;AASlBc,MAAAA,WAAW,EAAEA,WATK;AAUlBD,MAAAA,UAAU,EAAEA,UAVM;AAWlBG,MAAAA,SAAS,EAAEA,SAXO;AAYlBN,MAAAA,UAAU,EAAEA,UAZM;AAalBC,MAAAA,aAAa,EAAEA;AAbG,KADtB;AAgBE,IAAA,OAAO,EAAEyB,OAhBX;AAiBE,IAAA,UAAU,EAAEC,UAjBd;AAkBE,IAAA,IAAI,EAAEf,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUgD,YAAKC,KAlBrB;AAmBE,IAAA,MAAM,EAAE,EAnBV;AAoBE,IAAA,kBAAkB,EAAE,IApBtB;AAqBE,IAAA,MAAM,EAAE7C,MArBV;AAsBE,IAAA,SAAS,EAAE6B,eAtBb;AAuBE,IAAA,kBAAkB,EAAElD,kBAAF,aAAEA,kBAAF,cAAEA,kBAAF,GAAwB,EAvB5C;AAwBE,IAAA,QAAQ,EAAEc,QAAQ,IAAI,KAxBxB;AAyBE,IAAA,cAAc,EAAEmB,cAzBlB;AA0BE,IAAA,iBAAiB,EAAEC,iBA1BrB;AA2BE,IAAA,EAAE,YAAKxC,EAAL;AA3BJ,IApCJ,CADF,EAoEGqB,uBAAuB,iBACtB,oBAAC,uBAAD,qBACE,oBAAC,6BAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAEoD,eAAOI;AAA5C,IADF,eAEE,kCAAOxD,uBAAP,CAFF,CArEJ,EA0EGC,iBAAiB,iBAChB,oBAAC,0BAAD,qBACE,oBAAC,wBAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAEmD,eAAOC;AAAvC,IADF,eAEE,kCAAOpD,iBAAP,CAFF,CA3EJ,CADF;AAmFD,CAjLD;;;AA9BEtB,EAAAA,E;AACAC,EAAAA,I;AACAM,EAAAA,S,4BAAY,Q,EAAW,U,EAAa,O;AACpCC,EAAAA,M;AACAC,EAAAA,W;AAEAE,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,c;AACAC,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,S;AACAf,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,kB;AACAY,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,uB;AACAC,EAAAA,iB;AAEAE,EAAAA,M;;eAyLazB,a","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\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>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue) {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\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  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}>\n          <InputField\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}

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

@@ -4,7 +4,6 @@ export declare const Dropdown: import("styled-components").StyledComponent<"div"
     locked?: boolean;
     disabled?: boolean;
     margin?: string;
-    minWidth?: number;
 }, never>;
 export declare const InputField: import("styled-components").StyledComponent<"input", any, {}, never>;
 export declare const StyledField: import("styled-components").StyledComponent<"div", any, {

package/dist/js/Dropdown/CommonStyling.js

@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  ", "\n  ", "\n  ", "\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n"])), function (props) {
-  return !props.isButton && (props !== null && props !== void 0 && props.minWidth ? "width: 100%; min-width: ".concat(props.minWidth, "px") : 'width: 100%; min-width: 344px;');
+  return !props.isButton && 'width: 100%; min-width: 344px;';
 }, function (props) {
   return props.locked || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
@@ -45,7 +45,7 @@ var InputField = _styledComponents.default.input(_templateObject6 || (_templateO
 
 exports.InputField = InputField;
 
-var StyledField = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: 344px;\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\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    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n  }\n\n  &.button {\n    ", "\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: ", ";\n      background: ", ";\n    }\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), _styles.COLORS.white, _styles.COLORS.neutral_400, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_200, _styles.COLORS.primary_600, _styles.COLORS.primary_300, _styles.COLORS.primary_800, function (props) {
+var StyledField = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: 344px;\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\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    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n  }\n\n  &.button {\n    ", "\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: ", ";\n      background: ", ";\n    }\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), _styles.COLORS.white, _styles.COLORS.neutral_400, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_200, _styles.COLORS.primary_600, _styles.COLORS.primary_300, _styles.COLORS.primary_800, function (props) {
   return (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_600);
 }, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, function (props) {
   return props.disabled ? disabledState : '';
@@ -76,7 +76,7 @@ var DropdownButton = _styledComponents.default.button(_templateObject10 || (_tem
 exports.DropdownButton = DropdownButton;
 
 var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n  ", "\n\n  position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\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    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ", ";\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
+  return (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\n  ", "\n  ", "\n  ", "\n\n  position: relative;\n  text-decoration: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: ", ";\n  background-color: ", ";\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  width: 100%;\n  text-align: left;\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  ", ";\n\n  &.active {\n    background: ", ";\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: 2px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &:disabled {\n    background-color: transparent;\n    cursor: not-allowed;\n    color: ", "\n  }\n\n  &.active:hover {\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
 };
 
 exports.DropdownButtonCSS = DropdownButtonCSS;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","minWidth","locked","disabled","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentTextStyle","Italic","InputField","input","Regular","black","BREAKPOINTS","MEDIUM","StyledField","neutral_400","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","Z_INDEXES","dropdown","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Size","Small","Medium","Large","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';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: number }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth}px` : '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_400};\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: ${Z_INDEXES.dropdown};\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  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${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: ${size == Size.Large ? '64px' : 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    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    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\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};\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","isButton","locked","disabled","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentTextStyle","Italic","InputField","input","Regular","black","BREAKPOINTS","MEDIUM","StyledField","neutral_400","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","Z_INDEXES","dropdown","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Size","Small","Medium","Large","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';\nimport {Z_INDEXES} from '../styles/z-indexes';\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_400};\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: ${Z_INDEXES.dropdown};\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  ${props => DropdownButtonCSS(props.size)}\n`;\n\nexport const DropdownButtonCSS = (size? : Size) => {\n  return css`\n\n  ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${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: ${size == Size.Large ? '64px' : 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  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  &:disabled {\n    background-color: transparent;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_200}\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};\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/js/GlobalNavigationBar/Avatar.js

@@ -35,7 +35,7 @@ var AvatarLink = _styledComponents.default.div(_templateObject3 || (_templateObj
 });
 
 var AvatarImage = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n  cursor: pointer;\n\n  ", ";\n"])), function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
   return props.size ? props.size : 48;
 }, function (props) {
@@ -80,7 +80,7 @@ var Avatar = function Avatar(_ref) {
     }
   }, /*#__PURE__*/React.createElement(AvatarImage, {
     size: size,
-    color: color,
+    $color: color,
     useInteractionStyling: useInteractionStyling
   }, /*#__PURE__*/React.createElement(AvatarLetter, {
     "data-hj-suppress": true,

package/dist/js/GlobalNavigationBar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["LinkStyling","css","COLORS","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","styled","div","props","useInteractionStyling","size","AvatarImage","color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","BREAKPOINTS","MEDIUM","hidePadding","Avatar","firstName","lastName","e","preventDefault","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n  &:focus {\n    background: ${COLORS.primary_500};\n    outline: none;\n  }\n  &:focus-within {\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n`;\n\nconst ImageStyling = css`\n  &:hover {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n  text-decoration: none;\n\n  ${props => (props.useInteractionStyling ? LinkStyling : '')};\n  &:focus {\n    outline: none;\n  }\n  &:focus-within {\n    border-radius: ${props => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n  }\n`;\n\nconst AvatarImage = styled.div<{ size: number; color: string; useInteractionStyling: boolean }>`\n  background-color: ${props => props.color};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${props => (props.size ? props.size : 48)}px;\n  height: ${props => (props.size ? props.size : 48)}px;\n  width: ${props => (props.size ? props.size : 48)}px;\n  cursor: pointer;\n\n  ${props => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n  font-size: ${props => props.size / 2 - 2}px;\n  color: white;\n  font-weight: bold;\n  text-transform: uppercase;\n  display: inline-block;\n  line-height: ${props => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n  flex-direction: column;\n  align-self: center;\n  margin-right: ${props => (props.inMobileMenu ? '6px' : '8px')};\n  margin-left: ${props => (props.inMobileMenu ? '0' : 'auto')};\n  display: ${props => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    ${props => !props.hidePadding ? 'padding: 6px;' : ''};\n  }\n`;\n\ninterface AvatarProps {\n  firstName: string;\n  lastName: string;\n  size: number;\n  color: string;\n  profileMenuLink: string;\n  useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n  return (\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n      <AvatarImage size={size} color={color} useInteractionStyling={useInteractionStyling}>\n        <AvatarLetter data-hj-suppress size={size}>\n          {firstName[0]}\n          {lastName[0]}\n        </AvatarLetter>\n      </AvatarImage>\n    </AvatarLink>\n  );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["LinkStyling","css","COLORS","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","styled","div","props","useInteractionStyling","size","AvatarImage","$color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","BREAKPOINTS","MEDIUM","hidePadding","Avatar","firstName","lastName","color","e","preventDefault","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n  &:focus {\n    background: ${COLORS.primary_500};\n    outline: none;\n  }\n  &:focus-within {\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n`;\n\nconst ImageStyling = css`\n  &:hover {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n  text-decoration: none;\n\n  ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\n  &:focus {\n    outline: none;\n  }\n  &:focus-within {\n    border-radius: ${(props) => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n  }\n`;\n\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\n  background-color: ${(props) => props.$color};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${(props) => (props.size ? props.size : 48)}px;\n  height: ${(props) => (props.size ? props.size : 48)}px;\n  width: ${(props) => (props.size ? props.size : 48)}px;\n  cursor: pointer;\n\n  ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n  font-size: ${(props) => props.size / 2 - 2}px;\n  color: white;\n  font-weight: bold;\n  text-transform: uppercase;\n  display: inline-block;\n  line-height: ${(props) => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n  flex-direction: column;\n  align-self: center;\n  margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\n  margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\n  }\n`;\n\ninterface AvatarProps {\n  firstName: string;\n  lastName: string;\n  size: number;\n  color: string;\n  profileMenuLink: string;\n  useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n  return (\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n      <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\n        <AvatarLetter data-hj-suppress size={size}>\n          {firstName[0]}\n          {lastName[0]}\n        </AvatarLetter>\n      </AvatarImage>\n    </AvatarLink>\n  );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}

package/dist/js/GlobalNavigationBar/Logo.js

@@ -32,23 +32,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) {
-  return props.color;
+  return props.$color;
 }, _styles.BREAKPOINTS.MEDIUM);
 
 var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
 
-var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n    ", "\n  }\n"])), function (props) {
-  return props.color || _styles.COLORS.black;
+var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n    ", "\n  }\n"])), function (props) {
+  return props.$color || _styles.COLORS.black;
 }, function (props) {
-  return props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black);
+  return props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
-  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black);
+  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
 });
 
 var BetaTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"])), function (props) {
   return props.backgroundColor || _styles.COLORS.accent2_500;
 }, function (props) {
-  return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.color || _styles.COLORS.white);
+  return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.white);
 });
 
 var Logo = function Logo(_ref) {
@@ -70,13 +70,13 @@ var Logo = function Logo(_ref) {
         _onClick();
       }
     },
-    color: color
+    $color: color
   }, color === _styles.COLORS.white ? /*#__PURE__*/React.createElement(_assets.LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(_assets.LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
-    color: color,
+    $color: color,
     noSizeChangeOnMobile: noSizeChangeOnMobile || false
   }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
     backgroundColor: betaTagBackgroundColor,
-    color: betaTagColor
+    $color: betaTagColor
   }, "BETA")));
 };
 

package/dist/js/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,8UAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAAjC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACW,oBAAN,GACH,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CADG,GAEH,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAArE,CAFR;AAAA,CANM,EAaNR,oBAAYC,MAbN,EAgBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CAAX;AAAA,CAhBI,CAAV;;AAoBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,0NACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,KAAN,IAAeQ,eAAOS,KAA3E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHtB,KAAkH,QAAlHA,KAAkH;AAAA,MAA3GU,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFa,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEF,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACG,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIL,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,KAAK,EAAErB;AART,KASGA,KAAK,KAAKQ,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEjB,KAAb;AAAoB,IAAA,oBAAoB,EAAEU,oBAAoB,IAAI;AAAlE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEG,sBAA1B;AAAkD,IAAA,KAAK,EAAEC;AAAzD,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEL,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAtB,EAAAA,K;AACAU,EAAAA,oB;AACAa,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaN,I","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) => props.noSizeChangeOnMobile\n          ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n          : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,0UAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAAlC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SACAA,KAAK,CAACW,oBAAN,GACI,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAArE,CADJ,GAEI,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAAtE,CAHJ;AAAA,CANM,EAcNR,oBAAYC,MAdN,EAiBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAArE,CAAX;AAAA,CAjBI,CAAV;;AAqBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,0NACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,MAAN,IAAgBQ,eAAOS,KAA5E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHC,KAAkH,QAAlHA,KAAkH;AAAA,MAA3Gb,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFc,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEH,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACI,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIN,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,MAAM,EAAEE;AARV,KASGA,KAAK,KAAKf,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAEM,KAAd;AAAqB,IAAA,oBAAoB,EAAEb,oBAAoB,IAAI;AAAnE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEI,sBAA1B;AAAkD,IAAA,MAAM,EAAEC;AAA1D,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEN,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAC,EAAAA,K;AACAb,EAAAA,oB;AACAc,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaP,I","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/umd/Dropdown/BasicDropdown.js

@@ -87,7 +87,6 @@
     list,
     placeholder,
     onSelect,
-    setDropdownMenuValues,
     initalValue,
     disableSorting,
     messageOnNoResults,
@@ -108,9 +107,7 @@
     activeValidationMessage,
     autofilledMessage,
     size,
-    margin = '4px 0',
-    dropdownMenuValues,
-    minWidth
+    margin = '4px 0'
   }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -149,12 +146,11 @@
     };
 
     React.useEffect(() => {
-      if (initalValue || dropdownMenuValues) {
-        const initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
-        setInput(initValue);
+      if (initalValue) {
+        setInput(initalValue);
         setRestartFilter(true);
       }
-    }, [initalValue, dropdownMenuValues]);
+    }, [initalValue]);
     React.useEffect(() => {
       document.addEventListener('keypress', handleKeyPress);
       return () => {
@@ -180,8 +176,7 @@
       className: size ? size : '',
       locked: locked,
       disabled: disabled,
-      margin: margin,
-      minWidth: minWidth
+      margin: margin
     }, /*#__PURE__*/React.createElement(_CommonStyling.StyledField, {
       ref: styledFieldRef,
       className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
@@ -247,8 +242,8 @@
       setIsOpen: customSetIsOpen,
       messageOnNoResults: messageOnNoResults ?? '',
       isButton: isButton || false,
-      selectedValues: dropdownMenuValues ?? selectedValues,
-      setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
+      selectedValues: selectedValues,
+      setSelectedValues: setSelectedValues,
       id: `${id}_dropdowncontent`
     })), activeValidationMessage && /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
       size: "20px",
@@ -274,7 +269,6 @@
     maxHeight: _propTypes2.default.string,
     placeholder: _propTypes2.default.string,
     onSelect: _propTypes2.default.func,
-    setDropdownMenuValues: _propTypes2.default.func,
     initalValue: _propTypes2.default.string,
     disableSorting: _propTypes2.default.bool,
     messageOnNoResults: _propTypes2.default.string,
@@ -283,8 +277,7 @@
     isButton: _propTypes2.default.bool,
     activeValidationMessage: _propTypes2.default.string,
     autofilledMessage: _propTypes2.default.string,
-    margin: _propTypes2.default.string,
-    dropdownMenuValues: _propTypes2.default.arrayOf(_propTypes2.default.string)
+    margin: _propTypes2.default.string
   };
   exports.default = BasicDropdown;
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["id","list","itemsType","action","actionLabel","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","margin","dropdownMenuValues","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","minWidth","React","styledFieldRef","handleKeyPress","e","setFocused","setIsOpen","handleValueSelect","values","setRestartFilter","setInput","initValue","document","setIsLoading","customSetIsOpen","isOpen","getDisplayItems","input","val","listDisplayLabels","item","l","size","isLoading","Size","COLORS","neutral_600","actionVariant","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: number;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\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>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue, dropdownMenuValues]);\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  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}>\n          <InputField\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
+{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["id","list","itemsType","action","actionLabel","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","margin","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","React","styledFieldRef","handleKeyPress","e","setFocused","setIsOpen","handleValueSelect","values","setRestartFilter","setInput","document","setIsLoading","customSetIsOpen","isOpen","getDisplayItems","input","val","listDisplayLabels","item","l","size","isLoading","Size","COLORS","neutral_600","actionVariant","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\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>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue) {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\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  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}>\n          <InputField\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}