@laerdal/life-react-components 1.5.1 → 1.6.0

package/dist/Dropdown/DropdownButton.cjs.map

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

package/dist/Dropdown/DropdownButton.js

@@ -63,49 +63,36 @@ var DropdownButton = function DropdownButton(_ref) {
       focused = _React$useState6[0],
       setFocused = _React$useState6[1];
 
-  var buttonRef = React.useRef(null);
-
   var handleValueSelect = function handleValueSelect(values) {
     // Do all required actions
     onClick(values);
   };
 
-  var handleKeyDown = function handleKeyDown(e) {
-    if (buttonRef !== null && buttonRef !== void 0 && buttonRef.current && buttonRef.current.contains(e.target)) {
-      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {
-        if (!dropdownOpen) setFocused(0);
-
-        if (e.keyCode != 40) {
-          e.preventDefault();
-          buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current.click();
-        }
+  var handeKeyPress = function handeKeyPress(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (!dropdownOpen) {
+        setFocused(0);
       }
+
+      setDropdownOpen(!dropdownOpen);
     }
   };
-
-  React.useEffect(function () {
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  });
   /**
    * Renders Icon Button dropdown menu.
    * @returns HTML View for the Icon button dropdown menu.
    */
 
+
   var renderIconButton = function renderIconButton() {
     return /*#__PURE__*/_jsx(IconButton, {
-      ref: buttonRef,
       variant: "secondary",
       shape: "circular",
+      onKeyPress: handeKeyPress,
       action: function action(event) {
-        if (!event) {
-          //if no event details passed, then this means that user pressed 'enter'
-          if (!dropdownOpen) setFocused(0);
+        if ((event === null || event === void 0 ? void 0 : event.detail) === 1) {
+          // Only if the click is triggered by a mouse click this will be one
+          setDropdownOpen(!dropdownOpen);
         }
-
-        setDropdownOpen(!dropdownOpen);
       },
       disabled: disabled,
       children: icon

package/dist/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","buttonRef","useRef","handleValueSelect","values","handleKeyDown","e","current","contains","target","keyCode","preventDefault","click","useEffect","document","addEventListener","removeEventListener","renderIconButton","event","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight,\n  className }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  \n  const handleKeyDown = (e: any) => {\n    if (buttonRef?.current && buttonRef.current.contains(e.target)) {\n      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {\n        if(!dropdownOpen)\n          setFocused(0);\n          \n        if(e.keyCode != 40)\n        {\n          e.preventDefault();\n          buttonRef?.current.click();\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);      \n    };\n  });\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton ref={buttonRef}  variant=\"secondary\" shape=\"circular\" action={(event: any) => \n      {\n        if(!event) { //if no event details passed, then this means that user pressed 'enter'\n          if(!dropdownOpen)\n            setFocused(0);\n        }\n        setDropdownOpen(!dropdownOpen);\n      }} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper className={className}>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}
+{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","handleValueSelect","values","handeKeyPress","e","key","renderIconButton","event","detail","onValueUpdate"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;;;AAGA,IAAMC,OAAO,GAAGD,MAAM,CAACE,GAAV,wHAAb;;AAKA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAmB4B;AAAA,MAlBzBC,KAkByB,QAlBzBA,KAkByB;AAAA,MAjBzBC,IAiByB,QAjBzBA,IAiByB;AAAA,MAhBzBC,QAgByB,QAhBzBA,QAgByB;AAAA,MAfzBC,OAeyB,QAfzBA,OAeyB;AAAA,4BAdzBC,SAcyB;AAAA,MAdzBA,SAcyB,+BAdb,QAca;AAAA,MAbzBC,MAayB,QAbzBA,MAayB;AAAA,8BAZzBC,WAYyB;AAAA,MAZzBA,WAYyB,iCAZX,EAYW;AAAA,MAXzBC,aAWyB,QAXzBA,aAWyB;AAAA,MAVzBC,UAUyB,QAVzBA,UAUyB;AAAA,MATzBC,aASyB,QATzBA,aASyB;AAAA,MARzBC,KAQyB,QARzBA,KAQyB;AAAA,MAPzBC,IAOyB,QAPzBA,IAOyB;AAAA,MANzBC,SAMyB,QANzBA,SAMyB;AAAA,8BALzBC,WAKyB;AAAA,MALzBA,WAKyB,iCALX,KAKW;AAAA,6BAJzBC,UAIyB;AAAA,MAJzBA,UAIyB,gCAJZ,KAIY;AAAA,6BAHzBC,UAGyB;AAAA,MAHzBA,UAGyB,gCAHZ,KAGY;AAAA,MAFzBC,SAEyB,QAFzBA,SAEyB;AAAA,MADzBC,SACyB,QADzBA,SACyB;;AACjD;AACA,wBAAwCxB,KAAK,CAACyB,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AACA,yBAA4C3B,KAAK,CAACyB,QAAN,CAAyB,EAAzB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,yBAA8B7B,KAAK,CAACyB,QAAN,CAA8B,IAA9B,CAA9B;AAAA;AAAA,MAAOK,OAAP;AAAA,MAAgBC,UAAhB;;AAEA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,MAAD,EAAsB;AAC9C;AACAvB,IAAAA,OAAO,CAACuB,MAAD,CAAP;AACD,GAHD;;AAMA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAAiC;AACrD,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtC,UAAI,CAACV,YAAL,EAAmB;AACjBK,QAAAA,UAAU,CAAC,CAAD,CAAV;AACD;;AACDJ,MAAAA,eAAe,CAAC,CAACD,YAAF,CAAf;AACD;AACF,GAPD;AASA;AACF;AACA;AACA;;;AACE,MAAMW,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7B,wBACE,KAAC,UAAD;AAAY,MAAA,OAAO,EAAC,WAApB;AACY,MAAA,KAAK,EAAC,UADlB;AAEY,MAAA,UAAU,EAAEH,aAFxB;AAGY,MAAA,MAAM,EAAE,gBAACI,KAAD,EAAgB;AACtB,YAAI,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,MAAkB,CAAtB,EAAyB;AAAE;AACzBZ,UAAAA,eAAe,CAAC,CAACD,YAAF,CAAf;AACD;AACF,OAPb;AAQY,MAAA,QAAQ,EAAEjB,QARtB;AAAA,gBASGD;AATH,MADF;AAaD,GAdD;;AAgBA,sBACE,MAAC,OAAD;AAAS,IAAA,SAAS,EAAEgB,SAApB;AAAA,eACGa,gBAAgB,EADnB,eAEE,KAAC,eAAD;AACE,MAAA,kBAAkB,EAAE;AAClB1B,QAAAA,SAAS,EAAEA,SADO;AAElBC,QAAAA,MAAM,EAAEA,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAa,YAAM,CACxB,CAHiB;AAIlBC,QAAAA,WAAW,EAAEA,WAJK;AAKlBC,QAAAA,aAAa,EAAEA,aALG;AAMlB0B,QAAAA,aAAa,EAAER,iBANG;AAOlBZ,QAAAA,WAAW,EAAEA,WAPK;AAQlBL,QAAAA,UAAU,EAAEA,UARM;AASlBC,QAAAA,aAAa,EAAEA,aATG;AAUlBK,QAAAA,UAAU,EAAEA,UAVM;AAWlBC,QAAAA,UAAU,EAAEA,UAXM;AAYlBC,QAAAA,SAAS,EAAEA,SAZO;AAalBhB,QAAAA,KAAK,EAAEA;AAbW,OADtB;AAgBE,MAAA,OAAO,EAAEuB,OAhBX;AAiBE,MAAA,UAAU,EAAEC,UAjBd;AAkBE,MAAA,IAAI,EAAEb,IAlBR;AAmBE,MAAA,KAAK,EAAED,KAnBT;AAoBE,MAAA,SAAS,EAAEE,SApBb;AAqBE,MAAA,MAAM,EAAEO,YArBV;AAsBE,MAAA,SAAS,EAAEC,eAtBb;AAuBE,MAAA,kBAAkB,EAAE,IAvBtB;AAwBE,MAAA,MAAM,EAAC,EAxBT;AAyBE,MAAA,cAAc,EAAEhB,SAAS,IAAI,QAAb,GAAwB,EAAxB,GAA6BiB,cAzB/C;AA0BE,MAAA,iBAAiB,EAAEC,iBA1BrB;AA2BE,MAAA,kBAAkB,EAAC,YA3BrB;AA4BE,MAAA,QAAQ,EAAE,IA5BZ;AA6BE,MAAA,EAAE,EAAC;AA7BL,MAFF;AAAA,IADF;AAoCD,CAhGD;;AAkGA,eAAevB,cAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          width,\n                          size,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className\n                        }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n\n  const handeKeyPress = (e: React.KeyboardEvent<any>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (!dropdownOpen) {\n        setFocused(0);\n      }\n      setDropdownOpen(!dropdownOpen);\n    }\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  onKeyPress={handeKeyPress}\n                  action={(event: any) => {\n                    if (event?.detail === 1) { // Only if the click is triggered by a mouse click this will be one\n                      setDropdownOpen(!dropdownOpen);\n                    }\n                  }}\n                  disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper className={className}>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=\"\"\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}

package/dist/Dropdown/DropdownContent.cjs

@@ -57,10 +57,14 @@ var DDContainer = _styledComponents.default.div(_templateObject || (_templateObj
 
 exports.DDContainer = DDContainer;
 
-var ItemsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > *:hover {\n    z-index: ", ";\n  }\n  > *:active,\n  > *.active{\n    z-index: ", ";\n  }\n  > *:focus {\n    z-index: ", ";\n  }\n"])), _zIndexes.Z_INDEXES.hover, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus);
+var ItemsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), _zIndexes.Z_INDEXES.hover, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus);
 
-var ListContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n\n  div.divider  {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
+var ListContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
   return props.scrollable ? 'overflow-y: scroll;' : '';
+}, function (props) {
+  return props.scrollable ? 'margin-right: 6px;' : '';
+}, function (props) {
+  return props.scrollable ? 'padding-right: 6px;' : '';
 }, function (props) {
   return props.itemsType != 'normal' ? 'margin-left: 4px;' : '';
 }, ItemsContainer, function (props) {
@@ -93,8 +97,12 @@ var DividerContainer = _styledComponents.default.div(_templateObject5 || (_templ
 
 var TopItemContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), _styles.COLORS.neutral_200);
 
-var ActionButtonContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  border-top-style: solid;\n  border-top-color: ", ";\n  border-top-width: 1px;\n  \n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), _styles.COLORS.neutral_200, function (props) {
-  return props.size == _types.Size.Small || !props.size ? '0px 16px' : '8px 16px';
+var ActionButtonContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), function (props) {
+  return props.scrollable ? "border-top: 1px solid  ".concat(_styles.COLORS.neutral_200, ";") : '';
+}, function (props) {
+  return props.scrollable ? 'margin-top: 4px;' : '';
+}, function (props) {
+  return props.size === _types.Size.Small || !props.size ? '4px 16px 0px' : props.size === _types.Size.Medium ? '12px 16px 8px' : '16px 16px 12px';
 });
 
 var MAX_MENU_HEIGHT = 240;
@@ -163,7 +171,7 @@ var DropdownContent = function DropdownContent(_ref) {
 
   var handleKeyDown = function handleKeyDown(e) {
     if (isOpen) {
-      if (e.keyCode === 38) {
+      if (e.key === 'ArrowUp' || e.key === 'Up') {
         e.preventDefault();
         var focusedNow = focused;
 
@@ -181,7 +189,7 @@ var DropdownContent = function DropdownContent(_ref) {
           }
           setNewFocusedElement(focusedNow);
         }
-      } else if (e.keyCode === 40) {
+      } else if (e.key === 'ArrowDown' || e.key === 'Down') {
         e.preventDefault();
         var focusedNow = focused;
 
@@ -201,12 +209,12 @@ var DropdownContent = function DropdownContent(_ref) {
         }
 
         setNewFocusedElement(focusedNow);
-      } else if (e.keyCode === 9) {
+      } else if (e.key === 'Tab') {
         e.preventDefault();
         var focusedNow = focused;
 
         if (focusedNow !== undefined && focusedNow !== null) {
-          focusedNow++;
+          e.shiftKey ? focusedNow-- : focusedNow++;
           var newFocusedElement = document.getElementById("".concat(id, "_").concat(focusedNow));
 
           if (!newFocusedElement) {
@@ -217,7 +225,7 @@ var DropdownContent = function DropdownContent(_ref) {
         } else {
           setFocused(null);
         }
-      } else if (e.keyCode === 27) {
+      } else if (e.key === 'Escape' || e.key === 'Esc') {
         setIsOpen(false);
         setFocused(null); //TODO: add onEscapehandler
 
@@ -313,13 +321,13 @@ var DropdownContent = function DropdownContent(_ref) {
     if (isOpen && (focused || focused === 0)) {
       var _newFocusedElement$cu2;
 
-      var focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
-      if (focusThis != focused) setFocused(focusThis);
+      var focusThis = focused === 0 && !haveTopItem() ? 1 : focused;
+      if (focusThis !== focused) setFocused(focusThis);
       var newFocusedElement = elRefs[focusThis];
       newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu2 = newFocusedElement.current) === null || _newFocusedElement$cu2 === void 0 ? void 0 : _newFocusedElement$cu2.focus();
     } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item
 
-  }, [isOpen]);
+  }, [isOpen, focused]);
 
   var handleItemClick = function handleItemClick(selected, item) {
     var newValue = [];
@@ -496,6 +504,7 @@ var DropdownContent = function DropdownContent(_ref) {
       }), customizationProps.pinTopItem && getTopItem(), getElements()]
     }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButtonContainer, {
       size: size,
+      scrollable: customizationProps.scrollable,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         width: "100%",
         icon: customizationProps.actionIcon,

package/dist/Dropdown/DropdownContent.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","width","Z_INDEXES","dropdown","isButton","alignLeft","ButtonDropdownContentStyling","neutral_100","size","Size","Large","Medium","scrollable","maxHeight","ItemsContainer","hover","active","focus","ListContainer","itemsType","neutral_600","neutral_500","MenuContentContainer","ComponentTextStyle","Bold","Small","Regular","DividerContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","focused","setFocused","selectedValues","setSelectedValues","messageOnNoResults","React","useState","isUp","setIsUp","dropdownContentRef","useRef","itemsListRef","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","getFilteredItems","filtrationString","toUpperCase","x","value","includes","displayLabel","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","filtered","haveTopItem","i","disabled","document","getElementById","handleClickOutside","contains","target","some","useEffect","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","useLayoutEffect","getCorrectRef","ref","createRef","arrLength","setElRefs","Array","fill","map","_","multiSelect","getSuggestions","suggestion","focusThis","handleItemClick","selected","item","newValue","onValueUpdate","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","find","c","selectedFirst","newValues","stopPropagation","getElements","number","customContent","join","menuContent","action","actionLabel","actionIcon","actionLoading","actionDisabled","actionVariant","noteLabel","showDividerAbove","locked","icon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling } from './CommonStyling';\nimport { ComponentLStyling, ComponentXLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport MenuItem from '../MenuItem/MenuItem';\n\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n\n  width: ${(props) => (props.width ? props.width : '100%')};\n  z-index: ${Z_INDEXES.dropdown};\n  margin: ${(props) => (props.isButton ? '-4px' : '4px 0px')};\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.alignLeft ? 'left: 0px;' : '')}\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ${(props) => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${(props) => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${(props) => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ItemsContainer = styled.div<{size? : Size}>`\n  > *:hover {\n    z-index: ${Z_INDEXES.hover};\n  }\n  > *:active,\n  > *.active{\n    z-index: ${Z_INDEXES.active};\n  }\n  > *:focus {\n    z-index: ${Z_INDEXES.focus};\n  }\n`;\n  \nconst ListContainer = styled.div<{ scrollable?: boolean; size?: Size; itemsType?: string }>`\n  ${(props) => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${(props) => (props.itemsType != 'normal' ? 'margin-left: 4px;' : '')}\n\n\n  div.divider  {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ${ItemsContainer} {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst MenuContentContainer = styled.div<{size? : Size}>`\n  h1, h2, h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ${props => props.size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n    ${props => props.size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n    ${props => (props.size == Size.Small || !props.size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n    padding: ${props => props.size == Size.Small || !props.size ? '10px 16px 6px' :\n      props.size == Size.Medium ? '16px 24px 8px' : '16px 32px 8px'};\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ${props => props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n    ${props => props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n    ${props => (props.size == Size.Small || !props.size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n    padding: ${props => props.size == Size.Small || !props.size ? '8px 16px' :\n      props.size == Size.Medium ? '12px 24px' : '16px 32px'};\n  }\n`;\n\nconst DividerContainer = styled.div<{size? : Size}>`\n  position: relative;\n\n  margin-top: ${props => props.size == Size.Large ? '16px' : \n      props.size == Size.Medium ? '12px' : \n      (props.size == Size.Small || !props.size) ? '8px' : '6px'};\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n`;\n\nconst TopItemContainer = styled.div<{size?:Size}>`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;\n`;\n\nconst ActionButtonContainer = styled.div<{size?:Size}>`\n  border-top-style: solid;\n  border-top-color: ${COLORS.neutral_200};\n  border-top-width: 1px;\n  \n  padding: ${props => props.size == Size.Small || !props.size ? '0px 16px' : '8px 16px'};\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  showDividerAbove?: boolean;\n  disabled?: boolean;\n  locked?: boolean;\n  icon?: React.ReactNode;\n  customContent?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  menuContent?: React.ReactNode;\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  action: () => boolean | void | undefined;\n  pinTopItem?: boolean;\n  onValueUpdate: (values: string[]) => boolean | void | undefined;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  width?: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n  focused: number | null;\n  setFocused: (focused: number | null) => void;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n  id,\n  customizationProps,\n  alignLeft,\n  isButton,\n  size,\n  isOpen,\n  hideOnClickOutside,\n  width,\n  setIsOpen,\n  filter,\n  focused,\n  setFocused,\n  selectedValues,\n  setSelectedValues,\n  messageOnNoResults,\n}) => {\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';\n  if (!size) size = Size.Small;\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.filter((x) => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          const filtered = getFilteredItems();\n          if(focusedNow == 1 && haveTopItem())\n            focusedNow = 0;\n          else {\n            for (let i = focusedNow - 1; i > 0; i--) {\n              if (!filtered[i - 1]?.disabled) {\n                focusedNow = i;\n                break;\n              }\n            }\n          }\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          const filtered = getFilteredItems();\n          for (let i = focusedNow + 1; i <= filtered.length; i++) {\n            if (!filtered[i - 1]?.disabled) {\n              focusedNow = i;\n              break;\n            }\n          }\n        } else {\n          focusedNow = haveTopItem() ? 0 : 1;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setFocused(null);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setFocused(null);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some((x) => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0);\n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  };\n  React.useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch (customizationProps.itemsType) {\n      case 'normal':\n        return (ref as React.RefObject<HTMLButtonElement>) || React.createRef<HTMLButtonElement>();\n      default:\n        return (ref as React.RefObject<HTMLDivElement>) || React.createRef<HTMLDivElement>();\n    }\n  };\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs((elRefs) =>\n      Array(arrLength + 1)\n        .fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])),\n    );\n  }, [isOpen, arrLength, selectedValues]);\n\n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n  const haveTopItem = () => {\n    if (customizationProps.itemsType === 'radio' && selectedValues && selectedValues?.length > 0) return true;\n    else if (customizationProps.itemsType === 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;\n    else if (customizationProps.itemsType === 'normal' && getSuggestions()?.length > 0) return true;\n    return false;\n  };\n\n  const getSuggestions = () => {\n    return getFilteredItems().filter((x) => x.suggestion);\n  };\n\n  React.useLayoutEffect(() => {\n    if (isOpen && (focused || focused === 0)) {\n      const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;\n      if (focusThis != focused) setFocused(focusThis);\n      const newFocusedElement = elRefs[focusThis];\n      newFocusedElement?.current?.focus();\n    } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item\n  }, [isOpen]);\n\n  const handleItemClick = (selected: boolean, item: DropdownItem) => {\n      let newValue: string[] = [];\n      if (customizationProps.multiSelect) {\n        if (selected) newValue = [...selectedValues, item.value];\n        else newValue = selectedValues.filter((x) => x != item.value);\n      } else newValue = selected ? [item.value] : [];\n\n      setSelectedValues(newValue);\n      if(customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValue)){\n        setIsOpen(false);\n      }\n  };\n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter((x) => visibleItems.some((y) => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getSuggestions();\n    const displayLabel = selectedValues[0] ? customizationProps.items?.find((c) => c.value === selectedValues[0])?.displayLabel : undefined;\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n\n    const selectedFirst = selectedValues.length > 0 ? visibleItems.find(x => x.value == selectedValues[0]) : null;\n   \n    return (\n      <TopItemContainer size={size}>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {}} label={selectedFirst?.displayLabel ?? selectedFirst?.value} \n            size={size}\n            id={`${id}_topitem`}\n            selected={true}\n          />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map((x) => x.value) : [];\n              setSelectedValues(newValues);\n              if(customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues))\n                setIsOpen(false);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : (selectedFirst?.displayLabel ?? selectedFirst?.value)}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n            {suggestions.map((x) => (\n                <MenuItem \n                  key={`${id}_topitem_${x.value}`}\n                  item={x}\n                  size={size}\n                  active={false} \n                  ref={elRefs[0] as React.RefObject<HTMLButtonElement>}\n                  id={`${id}_topitem`}\n                  onClickHandler={(e: any) => {\n                    e.stopPropagation();\n                    customizationProps.onValueUpdate([x.value]);\n                    setSelectedValues([x.value]);\n                    setIsOpen(false);\n                    setFocused(null);\n                  }} />\n            ))}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer size={size}>\n          <button className=\"dropdownButton\" disabled>\n            <span>{messageOnNoResults}</span>\n          </button>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer size={size}>\n        {getFilteredItems()\n          .filter((x) => x && (customizationProps.itemsType != 'normal' || !x.suggestion))\n          .map((item) => {\n            return (\n              <React.Fragment key={`key_${id}_${item.value}`}>\n              {item.customContent}\n              {!item.customContent && customizationProps.itemsType == 'radio' && (\n                  <RadioButton\n                    select={(selected:boolean) => handleItemClick(selected, item)}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                    size={size}\n                    iconPointerEventsTransparent={true}\n                    disabled={item?.disabled}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}\n                    label={item.displayLabel ?? item.value}\n                    selected={selectedValues?.includes(item.value)}\n                  />\n                )}\n              {!item.customContent && customizationProps.itemsType == 'checkbox' && (\n                  <Checkbox\n                    select={(selected:boolean) => handleItemClick(selected, item)}\n                    iconPointerEventsTransparent={true}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                    size={size}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}\n                    label={item.displayLabel ?? item.value}\n                    selected={selectedValues?.includes(item.value)}\n                  />\n                )}\n              {!item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                <MenuItem \n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  item={item}\n                  size={size}\n                  active={selectedValues?.includes(item.value)} \n                  ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                  onClickHandler={(e: any) => {\n                    e.stopPropagation();\n                    customizationProps.onValueUpdate([item.value]);\n                    setSelectedValues([item.value]);\n                    setIsOpen(false);\n                    setFocused(null);\n                  }} />\n                )}\n              </React.Fragment>\n            );\n          })}\n      </ItemsContainer>\n    );\n  };\n\n  return (\n    <DDContainer\n      ref={dropdownContentRef}\n      size={size}\n      width={width}\n      isButton={isButton}\n      alignLeft={alignLeft}\n      scrollable={customizationProps.scrollable}\n      maxHeight={customizationProps.maxHeight}\n      className={[isOpen && 'show', isUp && 'up'].filter((e) => !!e).join(' ')}>\n      <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n            {customizationProps.menuContent &&\n              <MenuContentContainer size={size}>\n                {customizationProps.menuContent}\n                <DividerContainer size={size}>\n                  <div className=\"divider\" />\n                </DividerContainer>\n              </MenuContentContainer>}\n        {customizationProps.pinTopItem && getTopItem()}\n        {getElements()}\n      </ListContainer>\n      {customizationProps.action && customizationProps.actionLabel && (\n        <ActionButtonContainer size={size}>\n              <Button width=\"100%\" icon={customizationProps.actionIcon}\n                loading={customizationProps.actionLoading}\n                disabled={customizationProps.actionDisabled}\n                variant={customizationProps.actionVariant ?? 'primary'}\n                size={size} onClick={() => \n                {\n                  if(customizationProps.action()) //closing the dropdown if action returns 'true'\n                    setIsOpen(false);\n                }}>\n            {customizationProps.actionLabel}\n          </Button>\n        </ActionButtonContainer>\n      )}\n    </DDContainer>\n  );\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.cjs"}
+{"version":3,"sources":["../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","width","Z_INDEXES","dropdown","isButton","alignLeft","ButtonDropdownContentStyling","neutral_100","size","Size","Large","Medium","scrollable","maxHeight","ItemsContainer","hover","active","focus","ListContainer","itemsType","neutral_600","neutral_500","MenuContentContainer","ComponentTextStyle","Bold","Small","Regular","DividerContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","focused","setFocused","selectedValues","setSelectedValues","messageOnNoResults","React","useState","isUp","setIsUp","dropdownContentRef","useRef","itemsListRef","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","getFilteredItems","filtrationString","toUpperCase","x","value","includes","displayLabel","handleKeyDown","e","key","preventDefault","focusedNow","undefined","filtered","haveTopItem","i","disabled","shiftKey","document","getElementById","handleClickOutside","contains","target","some","useEffect","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","useLayoutEffect","getCorrectRef","ref","createRef","arrLength","setElRefs","Array","fill","map","_","multiSelect","getSuggestions","suggestion","focusThis","handleItemClick","selected","item","newValue","onValueUpdate","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","find","c","selectedFirst","newValues","stopPropagation","getElements","number","customContent","join","menuContent","action","actionLabel","actionIcon","actionLoading","actionDisabled","actionVariant","noteLabel","showDividerAbove","locked","icon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport Button from '../Button/Button';\nimport {Size} from '../types';\nimport {ButtonDropdownContentStyling} from './CommonStyling';\nimport {\n  ComponentLStyling,\n  ComponentXLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle\n} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Checkbox, RadioButton} from '../InputFields';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport MenuItem from '../MenuItem/MenuItem';\n\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n\n  width: ${(props) => (props.width ? props.width : '100%')};\n  z-index: ${Z_INDEXES.dropdown};\n  margin: ${(props) => (props.isButton ? '-4px' : '4px 0px')};\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.alignLeft ? 'left: 0px;' : '')}\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ${(props) => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${(props) => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${(props) => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ItemsContainer = styled.div<{ size?: Size }>`\n  > *:hover {\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  > *:focus {\n    z-index: ${Z_INDEXES.focus};\n  }\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean; size?: Size; itemsType?: string }>`\n  ${(props) => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${(props) => (props.scrollable ? 'margin-right: 6px;' : '')}\n  ${(props) => (props.scrollable ? 'padding-right: 6px;' : '')}\n  ${(props) => (props.itemsType != 'normal' ? 'margin-left: 4px;' : '')}\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ${ItemsContainer} {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'};\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'};\n\n    word-break: break-word;\n  }\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst MenuContentContainer = styled.div<{ size?: Size }>`\n  h1, h2, h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ${props => props.size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n    ${props => props.size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n    ${props => (props.size == Size.Small || !props.size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n    padding: ${props => props.size == Size.Small || !props.size ? '10px 16px 6px' :\n            props.size == Size.Medium ? '16px 24px 8px' : '16px 32px 8px'};\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ${props => props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n    ${props => props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n    ${props => (props.size == Size.Small || !props.size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n    padding: ${props => props.size == Size.Small || !props.size ? '8px 16px' :\n            props.size == Size.Medium ? '12px 24px' : '16px 32px'};\n  }\n`;\n\nconst DividerContainer = styled.div<{ size?: Size }>`\n  position: relative;\n\n  margin-top: ${props => props.size == Size.Large ? '16px' :\n          props.size == Size.Medium ? '12px' :\n                  (props.size == Size.Small || !props.size) ? '8px' : '6px'};\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n`;\n\nconst TopItemContainer = styled.div<{ size?: Size }>`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;\n`;\n\nconst ActionButtonContainer = styled.div<{ size?: Size, scrollable?: boolean }>`\n  ${(props) => (props.scrollable ? `border-top: 1px solid  ${COLORS.neutral_200};` : '')}\n  ${(props) => (props.scrollable ? 'margin-top: 4px;' : '')}\n\n  padding: ${(props) => props.size === Size.Small || !props.size\n          ? '4px 16px 0px'\n          : props.size === Size.Medium\n                  ? '12px 16px 8px'\n                  : '16px 16px 12px'};\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  showDividerAbove?: boolean;\n  disabled?: boolean;\n  locked?: boolean;\n  icon?: React.ReactNode;\n  customContent?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  menuContent?: React.ReactNode;\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  action: () => boolean | void | undefined;\n  pinTopItem?: boolean;\n  onValueUpdate: (values: string[]) => boolean | void | undefined;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  width?: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n  focused: number | null;\n  setFocused: (focused: number | null) => void;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n                                                                   id,\n                                                                   customizationProps,\n                                                                   alignLeft,\n                                                                   isButton,\n                                                                   size,\n                                                                   isOpen,\n                                                                   hideOnClickOutside,\n                                                                   width,\n                                                                   setIsOpen,\n                                                                   filter,\n                                                                   focused,\n                                                                   setFocused,\n                                                                   selectedValues,\n                                                                   setSelectedValues,\n                                                                   messageOnNoResults,\n                                                                 }) => {\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';\n  if (!size) size = Size.Small;\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.filter((x) => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (isOpen) {\n      if (e.key === 'ArrowUp' || e.key === 'Up') {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          const filtered = getFilteredItems();\n          if (focusedNow == 1 && haveTopItem())\n            focusedNow = 0;\n          else {\n            for (let i = focusedNow - 1; i > 0; i--) {\n              if (!filtered[i - 1]?.disabled) {\n                focusedNow = i;\n                break;\n              }\n            }\n          }\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          const filtered = getFilteredItems();\n          for (let i = focusedNow + 1; i <= filtered.length; i++) {\n            if (!filtered[i - 1]?.disabled) {\n              focusedNow = i;\n              break;\n            }\n          }\n        } else {\n          focusedNow = haveTopItem() ? 0 : 1;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.key === 'Tab') {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          e.shiftKey ? focusedNow-- : focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setFocused(null);\n        }\n      } else if (e.key === 'Escape' || e.key === 'Esc') {\n        setIsOpen(false);\n        setFocused(null);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some((x) => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0);\n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  };\n  React.useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch (customizationProps.itemsType) {\n      case 'normal':\n        return (ref as React.RefObject<HTMLButtonElement>) || React.createRef<HTMLButtonElement>();\n      default:\n        return (ref as React.RefObject<HTMLDivElement>) || React.createRef<HTMLDivElement>();\n    }\n  };\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs((elRefs) =>\n      Array(arrLength + 1)\n        .fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])),\n    );\n  }, [isOpen, arrLength, selectedValues]);\n\n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n  const haveTopItem = () => {\n    if (customizationProps.itemsType === 'radio' && selectedValues && selectedValues?.length > 0) return true;\n    else if (customizationProps.itemsType === 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;\n    else if (customizationProps.itemsType === 'normal' && getSuggestions()?.length > 0) return true;\n    return false;\n  };\n\n  const getSuggestions = () => {\n    return getFilteredItems().filter((x) => x.suggestion);\n  };\n\n  React.useLayoutEffect(() => {\n    if (isOpen && (focused || focused === 0)) {\n      const focusThis = focused === 0 && !haveTopItem() ? 1 : focused;\n      if (focusThis !== focused) setFocused(focusThis);\n      const newFocusedElement = elRefs[focusThis];\n      newFocusedElement?.current?.focus();\n    } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item\n  }, [isOpen, focused]);\n\n  const handleItemClick = (selected: boolean, item: DropdownItem) => {\n    let newValue: string[] = [];\n    if (customizationProps.multiSelect) {\n      if (selected) newValue = [...selectedValues, item.value];\n      else newValue = selectedValues.filter((x) => x != item.value);\n    } else newValue = selected ? [item.value] : [];\n\n    setSelectedValues(newValue);\n    if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValue)) {\n      setIsOpen(false);\n    }\n  };\n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter((x) => visibleItems.some((y) => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getSuggestions();\n    const displayLabel = selectedValues[0] ? customizationProps.items?.find((c) => c.value === selectedValues[0])?.displayLabel : undefined;\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n\n    const selectedFirst = selectedValues.length > 0 ? visibleItems.find(x => x.value == selectedValues[0]) : null;\n\n    return (\n      <TopItemContainer size={size}>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {\n            }} label={selectedFirst?.displayLabel ?? selectedFirst?.value}\n            size={size}\n            id={`${id}_topitem`}\n            selected={true}\n          />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map((x) => x.value) : [];\n              setSelectedValues(newValues);\n              if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues))\n                setIsOpen(false);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : (selectedFirst?.displayLabel ?? selectedFirst?.value)}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n            {suggestions.map((x) => (\n              <MenuItem\n                key={`${id}_topitem_${x.value}`}\n                item={x}\n                size={size}\n                active={false}\n                ref={elRefs[0] as React.RefObject<HTMLButtonElement>}\n                id={`${id}_topitem`}\n                onClickHandler={(e: any) => {\n                  e.stopPropagation();\n                  customizationProps.onValueUpdate([x.value]);\n                  setSelectedValues([x.value]);\n                  setIsOpen(false);\n                  setFocused(null);\n                }}/>\n            ))}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer size={size}>\n          <button className=\"dropdownButton\" disabled>\n            <span>{messageOnNoResults}</span>\n          </button>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer size={size}>\n        {getFilteredItems()\n          .filter((x) => x && (customizationProps.itemsType != 'normal' || !x.suggestion))\n          .map((item) => {\n            return (\n              <React.Fragment key={`key_${id}_${item.value}`}>\n                {item.customContent}\n                {!item.customContent && customizationProps.itemsType == 'radio' && (\n                  <RadioButton\n                    select={(selected: boolean) => handleItemClick(selected, item)}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                    size={size}\n                    iconPointerEventsTransparent={true}\n                    disabled={item?.disabled}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}\n                    label={item.displayLabel ?? item.value}\n                    selected={selectedValues?.includes(item.value)}\n                  />\n                )}\n                {!item.customContent && customizationProps.itemsType == 'checkbox' && (\n                  <Checkbox\n                    select={(selected: boolean) => handleItemClick(selected, item)}\n                    iconPointerEventsTransparent={true}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                    size={size}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}\n                    label={item.displayLabel ?? item.value}\n                    selected={selectedValues?.includes(item.value)}\n                  />\n                )}\n                {!item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                  <MenuItem\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}\n                    item={item}\n                    size={size}\n                    active={selectedValues?.includes(item.value)}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                    onClickHandler={(e: any) => {\n                      e.stopPropagation();\n                      customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                      setIsOpen(false);\n                      setFocused(null);\n                    }}/>\n                )}\n              </React.Fragment>\n            );\n          })}\n      </ItemsContainer>\n    );\n  };\n\n  return (\n    <DDContainer\n      ref={dropdownContentRef}\n      size={size}\n      width={width}\n      isButton={isButton}\n      alignLeft={alignLeft}\n      scrollable={customizationProps.scrollable}\n      maxHeight={customizationProps.maxHeight}\n      className={[isOpen && 'show', isUp && 'up'].filter((e) => !!e).join(' ')}>\n      <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef}\n                     scrollable={customizationProps.scrollable}>\n        {customizationProps.menuContent &&\n          <MenuContentContainer size={size}>\n            {customizationProps.menuContent}\n            <DividerContainer size={size}>\n              <div className=\"divider\"/>\n            </DividerContainer>\n          </MenuContentContainer>}\n        {customizationProps.pinTopItem && getTopItem()}\n        {getElements()}\n      </ListContainer>\n      {customizationProps.action && customizationProps.actionLabel && (\n        <ActionButtonContainer size={size} scrollable={customizationProps.scrollable}>\n          <Button width=\"100%\" icon={customizationProps.actionIcon}\n                  loading={customizationProps.actionLoading}\n                  disabled={customizationProps.actionDisabled}\n                  variant={customizationProps.actionVariant ?? 'primary'}\n                  size={size} onClick={() => {\n            if (customizationProps.action()) //closing the dropdown if action returns 'true'\n              setIsOpen(false);\n          }}>\n            {customizationProps.actionLabel}\n          </Button>\n        </ActionButtonContainer>\n      )}\n    </DDContainer>\n  );\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.cjs"}

package/dist/Dropdown/DropdownContent.js

@@ -33,9 +33,13 @@ export var DDContainer = styled.div(_templateObject || (_templateObject = _tagge
 }, function (props) {
   return !props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px';
 });
-var ItemsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > *:hover {\n    z-index: ", ";\n  }\n  > *:active,\n  > *.active{\n    z-index: ", ";\n  }\n  > *:focus {\n    z-index: ", ";\n  }\n"])), Z_INDEXES.hover, Z_INDEXES.active, Z_INDEXES.focus);
-var ListContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n\n  div.divider  {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
+var ItemsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), Z_INDEXES.hover, Z_INDEXES.active, Z_INDEXES.focus);
+var ListContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
   return props.scrollable ? 'overflow-y: scroll;' : '';
+}, function (props) {
+  return props.scrollable ? 'margin-right: 6px;' : '';
+}, function (props) {
+  return props.scrollable ? 'padding-right: 6px;' : '';
 }, function (props) {
   return props.itemsType != 'normal' ? 'margin-left: 4px;' : '';
 }, ItemsContainer, function (props) {
@@ -64,8 +68,12 @@ var DividerContainer = styled.div(_templateObject5 || (_templateObject5 = _tagge
   return props.size == Size.Large ? '16px' : props.size == Size.Medium ? '12px' : props.size == Size.Small || !props.size ? '8px' : '6px';
 });
 var TopItemContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), COLORS.neutral_200);
-var ActionButtonContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  border-top-style: solid;\n  border-top-color: ", ";\n  border-top-width: 1px;\n  \n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), COLORS.neutral_200, function (props) {
-  return props.size == Size.Small || !props.size ? '0px 16px' : '8px 16px';
+var ActionButtonContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), function (props) {
+  return props.scrollable ? "border-top: 1px solid  ".concat(COLORS.neutral_200, ";") : '';
+}, function (props) {
+  return props.scrollable ? 'margin-top: 4px;' : '';
+}, function (props) {
+  return props.size === Size.Small || !props.size ? '4px 16px 0px' : props.size === Size.Medium ? '12px 16px 8px' : '16px 16px 12px';
 });
 var MAX_MENU_HEIGHT = 240;
 var AVG_OPTION_HEIGHT = 48;
@@ -131,7 +139,7 @@ var DropdownContent = function DropdownContent(_ref) {
 
   var handleKeyDown = function handleKeyDown(e) {
     if (isOpen) {
-      if (e.keyCode === 38) {
+      if (e.key === 'ArrowUp' || e.key === 'Up') {
         e.preventDefault();
         var focusedNow = focused;
 
@@ -149,7 +157,7 @@ var DropdownContent = function DropdownContent(_ref) {
           }
           setNewFocusedElement(focusedNow);
         }
-      } else if (e.keyCode === 40) {
+      } else if (e.key === 'ArrowDown' || e.key === 'Down') {
         e.preventDefault();
         var focusedNow = focused;
 
@@ -169,12 +177,12 @@ var DropdownContent = function DropdownContent(_ref) {
         }
 
         setNewFocusedElement(focusedNow);
-      } else if (e.keyCode === 9) {
+      } else if (e.key === 'Tab') {
         e.preventDefault();
         var focusedNow = focused;
 
         if (focusedNow !== undefined && focusedNow !== null) {
-          focusedNow++;
+          e.shiftKey ? focusedNow-- : focusedNow++;
           var newFocusedElement = document.getElementById("".concat(id, "_").concat(focusedNow));
 
           if (!newFocusedElement) {
@@ -185,7 +193,7 @@ var DropdownContent = function DropdownContent(_ref) {
         } else {
           setFocused(null);
         }
-      } else if (e.keyCode === 27) {
+      } else if (e.key === 'Escape' || e.key === 'Esc') {
         setIsOpen(false);
         setFocused(null); //TODO: add onEscapehandler
 
@@ -279,13 +287,13 @@ var DropdownContent = function DropdownContent(_ref) {
     if (isOpen && (focused || focused === 0)) {
       var _newFocusedElement$cu2;
 
-      var focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
-      if (focusThis != focused) setFocused(focusThis);
+      var focusThis = focused === 0 && !haveTopItem() ? 1 : focused;
+      if (focusThis !== focused) setFocused(focusThis);
       var newFocusedElement = elRefs[focusThis];
       newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu2 = newFocusedElement.current) === null || _newFocusedElement$cu2 === void 0 ? void 0 : _newFocusedElement$cu2.focus();
     } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item
 
-  }, [isOpen]);
+  }, [isOpen, focused]);
 
   var handleItemClick = function handleItemClick(selected, item) {
     var newValue = [];
@@ -462,6 +470,7 @@ var DropdownContent = function DropdownContent(_ref) {
       }), customizationProps.pinTopItem && getTopItem(), getElements()]
     }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/_jsx(ActionButtonContainer, {
       size: size,
+      scrollable: customizationProps.scrollable,
       children: /*#__PURE__*/_jsx(Button, {
         width: "100%",
         icon: customizationProps.actionIcon,