@laerdal/life-react-components 1.0.1-dev.22.full → 1.0.1-dev.29.full

package/dist/esm/Dropdown/DropdownFilter.js

@@ -4,7 +4,8 @@ import styled from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../styles';
 import { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { LoadingIndicator } from '../LoadingIndicator';
-import { DropdownButton, StyledField, DropdownContent, Dropdown, ButtonDropdownWrapper } from './CommonStyling';
+import { StyledField, Dropdown, ButtonDropdownWrapper } from './CommonStyling';
+import DropdownContent from './DropdownContent';
 import { AutofilledMessage, WarningMessage } from '../InputFields/styling';
 import { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
 const InputField = styled.input`
@@ -35,8 +36,6 @@ const InputField = styled.input`
     }
   }
 `;
-const MAX_MENU_HEIGHT = 240;
-const AVG_OPTION_HEIGHT = 48;
 
 const DropdownFilter = ({
   id,
@@ -60,108 +59,18 @@ const DropdownFilter = ({
   margin = '4px 0'
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const [isUp, setIsUp] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
-  const [input, setInput] = React.useState('');
+  const [input, setInput] = React.useState(initalValue ?? '');
   const [placeholderSearch, setPlaceholderSearch] = React.useState(placeholder || '');
   const [restartFilter, setRestartFilter] = React.useState(false);
-  const [focused, setFocused] = React.useState(null);
-  const [currentSearchResult, setCurrentSearchResult] = React.useState(list);
-  const dropdownContentRef = React.useRef(null);
+  const [selectedValues, setSelectedValues] = React.useState([]);
   const styledFieldRef = React.useRef(null);
   const inputRef = React.useRef(null);
-  React.useEffect(() => {
-    var options = [...list];
-
-    if (!restartFilter && input !== '') {
-      options = options.filter(option => option.toUpperCase().indexOf(input.toUpperCase()) !== -1);
-    }
-
-    if (!disableSorting) {
-      options = options.sort();
-    }
-
-    setCurrentSearchResult(options);
-  }, [input, list]);
-
-  const handleClickOutside = e => {
-    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target)) {
-      if (isOpen) {
-        setIsOpen(false);
-        setFocused(null);
-
-        if (!list.includes(input)) {
-          setInput('');
-          setPlaceholderSearch(placeholder || '');
-        }
-      }
-    }
-  };
-
-  const setNewFocusedElement = index => {
-    const newFocusedElement = document.getElementById(`${id}_${index}`);
-
-    if (newFocusedElement) {
-      setFocused(index);
-      newFocusedElement.focus();
-    }
-  };
-
-  const handleKeyDown = e => {
-    if (isOpen) {
-      if (e.keyCode === 38) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {
-          focusedNow -= 1;
-          setNewFocusedElement(focusedNow);
-        }
-      } else if (e.keyCode === 40) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null) {
-          focusedNow++;
-        } else {
-          focusedNow = 0;
-        }
-
-        setNewFocusedElement(focusedNow);
-      } else if (e.keyCode === 9) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null) {
-          focusedNow++;
-          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);
-
-          if (!newFocusedElement) {
-            setNewFocusedElement(0);
-          } else {
-            setNewFocusedElement(focusedNow);
-          }
-        } else {
-          setNewFocusedElement(0);
-        }
-      } else if (e.keyCode === 27) {
-        setIsOpen(false);
-        setNewFocusedElement(0);
-
-        if (!list.includes(input)) {
-          setInput('');
-          setPlaceholderSearch(placeholder || '');
-        }
-
-        styledFieldRef.current?.focus();
-      }
-    }
-  };
 
   const handleKeyPress = e => {
     if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {
       if (e.keyCode === 13 && !locked) {
-        const matches = currentSearchResult?.filter(c => c.toLowerCase() === input.toLowerCase());
+        const matches = list?.filter(c => c.toLowerCase() === input.toLowerCase());
 
         if (matches.length === 1 && onSelect) {
           onSelect(matches[0]);
@@ -169,14 +78,12 @@ const DropdownFilter = ({
         }
 
         setIsOpen(!isOpen);
-        setNewFocusedElement(0);
 
         if (matches.length === 0) {
           setInput('');
         }
       } else if (e.keyCode === 40) {
         setIsOpen(!isOpen);
-        setNewFocusedElement(0);
       }
     }
   };
@@ -188,62 +95,26 @@ const DropdownFilter = ({
     }
   }, [initalValue]);
   React.useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown);
+    if (!isOpen && !list.includes(input)) {
+      setInput('');
+      setPlaceholderSearch(placeholder || '');
+    }
+  }, [isOpen]);
+  React.useEffect(() => {
     document.addEventListener('keypress', handleKeyPress);
-    document.addEventListener('click', handleClickOutside);
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
       document.removeEventListener('keypress', handleKeyPress);
-      document.removeEventListener('click', handleClickOutside);
     };
   });
   React.useEffect(() => {
     setIsLoading(false);
-  }, [input]);
-  React.useEffect(() => {
-    determineDropUp();
-  }, [isOpen]);
-
-  const determineDropUp = () => {
-    const options = list;
-    const node = dropdownContentRef.current;
-    if (!node) return;
-    const windowHeight = window.innerHeight;
-    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
-    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;
-    setIsUp(instOffsetWithMenu >= windowHeight);
-  };
-
-  const getElements = () => {
-    if (locked || disabled) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null);
-    }
+    if (selectedValues.length > 0 && !list.includes(input)) setSelectedValues([]);
 
-    var number = 0;
-
-    if (currentSearchResult.length === 0) {
-      return /*#__PURE__*/React.createElement(DropdownButton, {
-        disabled: true
-      }, /*#__PURE__*/React.createElement("span", null, messageOnNoResults));
+    if (list.includes(input)) {
+      setSelectedValues([input]);
+      onSelect && onSelect(input);
     }
-
-    return currentSearchResult.map(item => {
-      return /*#__PURE__*/React.createElement(DropdownButton, {
-        type: "button",
-        onClick: e => {
-          e.preventDefault();
-          setRestartFilter(true);
-          setInput(item);
-          onSelect && onSelect(item);
-          setIsOpen(false);
-          setFocused(null);
-        },
-        className: item?.toLowerCase() === input?.toLowerCase() ? 'active' : '',
-        key: item,
-        id: `${id}_${number++}`
-      }, /*#__PURE__*/React.createElement("span", null, item));
-    });
-  };
+  }, [input]);
 
   const renderStandardDropdown = () => {
     return /*#__PURE__*/React.createElement(StyledField, {
@@ -295,7 +166,7 @@ const DropdownFilter = ({
       color: COLORS.neutral_600
     }) : null, /*#__PURE__*/React.createElement("div", {
       onClick: () => setIsOpen(!isOpen),
-      className: 'icon'
+      className: 'dropdown-arrow'
     }, isOpen && !locked && !disabled ? /*#__PURE__*/React.createElement(ArrowDropUp, {
       size: "24px",
       className: size ? size : ''
@@ -328,7 +199,7 @@ const DropdownFilter = ({
     color: COLORS.neutral_600
   }) : null, /*#__PURE__*/React.createElement("div", {
     onClick: () => setIsOpen(!isOpen),
-    className: 'icon'
+    className: 'dropdown-arrow'
   }, isOpen && !locked && !disabled ? /*#__PURE__*/React.createElement(ArrowDropUp, {
     size: "24px",
     className: size ? size : ''
@@ -344,11 +215,31 @@ const DropdownFilter = ({
     className: size ? size : '',
     margin: margin
   }, !isButton && renderStandardDropdown(), !!isButton && renderButtonDropdown(), !locked && !disabled && /*#__PURE__*/React.createElement(DropdownContent, {
+    isOpen: isOpen,
+    messageOnNoResults: messageOnNoResults ?? '',
+    selectedValues: selectedValues,
+    setSelectedValues: setSelectedValues,
+    hideOnClickOutside: true,
+    customizationProps: {
+      itemsType: 'normal',
+      multiSelect: false,
+      action: () => {},
+      isButton: isButton ?? false,
+      onValueUpdate: values => {
+        const val = values[0] ?? '';
+        setRestartFilter(true);
+        setInput(val);
+      },
+      items: list.map(x => ({
+        value: x
+      }))
+    },
+    filter: !restartFilter ? input : '',
+    setIsOpen: setIsOpen,
+    alignLeft: false,
     isButton: isButton || false,
-    ref: dropdownContentRef,
-    id: `${id}_dropdowncontent`,
-    className: [isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')
-  }, getElements())), activeValidationMessage && /*#__PURE__*/React.createElement(WarningMessage, {
+    id: `${id}_dropdowncontent`
+  })), activeValidationMessage && /*#__PURE__*/React.createElement(WarningMessage, {
     className: size || ''
   }, /*#__PURE__*/React.createElement(TechnicalWarning, {
     size: "20px",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","DropdownButton","StyledField","DropdownContent","Dropdown","ButtonDropdownWrapper","AutofilledMessage","WarningMessage","ComponentMStyling","ComponentSStyling","ComponentTextStyle","InputField","input","Regular","black","Italic","neutral_600","MEDIUM","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","isOpen","setIsOpen","useState","isUp","setIsUp","isLoading","setIsLoading","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","currentSearchResult","setCurrentSearchResult","dropdownContentRef","useRef","styledFieldRef","inputRef","useEffect","options","filter","option","toUpperCase","indexOf","sort","handleClickOutside","e","current","contains","target","includes","setNewFocusedElement","index","newFocusedElement","document","getElementById","focus","handleKeyDown","keyCode","preventDefault","focusedNow","undefined","handleKeyPress","matches","c","toLowerCase","length","addEventListener","removeEventListener","determineDropUp","node","windowHeight","window","innerHeight","menuHeight","Math","min","instOffsetWithMenu","getBoundingClientRect","top","getElements","number","map","item","renderStandardDropdown","concat","stopPropagation","floor","random","value","renderButtonDropdown","join","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, DropdownContent, Dropdown, ButtonDropdownWrapper } from './CommonStyling';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst 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\ninterface DropdownFilterProps {\n  id: string;\n  list: string[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: 'small' | 'medium';\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst DropdownFilter = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  onInputChange,\n  initalValue,\n  required,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<Boolean>(false);\n  const [isUp, setIsUp] = 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 [currentSearchResult, setCurrentSearchResult] = React.useState<string[]>(list);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    var options = [...list];\n    if (!restartFilter && input !== '') {\n      options = options.filter((option) => option.toUpperCase().indexOf(input.toUpperCase()) !== -1);\n    }\n    if (!disableSorting) {\n      options = options.sort();\n    }\n    setCurrentSearchResult(options);\n  }, [input, list]);\n\n  const handleClickOutside = (e: any) => {\n    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target)) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n      }\n    }\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = document.getElementById(`${id}_${index}`);\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement.focus();\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setNewFocusedElement(0);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setNewFocusedElement(0);\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus();\n      }\n    }\n  };\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = currentSearchResult?.filter((c) => c.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0]);\n          setInput(matches[0]);\n        }\n        setIsOpen(!isOpen);\n        setNewFocusedElement(0);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n        setNewFocusedElement(0);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('keypress', handleKeyPress);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('keypress', handleKeyPress);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n  const determineDropUp = () => {\n    const options = list;\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 getElements = () => {\n    if (locked || disabled) {\n      return <></>;\n    }\n    var number = 0;\n    if (currentSearchResult.length === 0) {\n      return (\n        <DropdownButton disabled>\n          <span>{messageOnNoResults}</span>\n        </DropdownButton>\n      );\n    }\n    return currentSearchResult.map((item) => {\n      return (\n        <DropdownButton\n          type=\"button\"\n          onClick={(e: any) => {\n            e.preventDefault();\n            setRestartFilter(true);\n            setInput(item);\n            onSelect && onSelect(item);\n            setIsOpen(false);\n            setFocused(null);\n          }}\n          className={item?.toLowerCase() === input?.toLowerCase() ? 'active' : ''}\n          key={item}\n          id={`${id}_${number++}`}>\n          <span>{item}</span>\n        </DropdownButton>\n      );\n    });\n  };\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n          inputRef.current?.focus();\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n\n        <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        setIsOpen(!isOpen);\n        inputRef.current?.focus();\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n            isButton={isButton || false}\n            ref={dropdownContentRef}\n            id={`${id}_dropdowncontent`}\n            className={[isOpen && 'show', isUp && 'up'].filter((e) => !!e).join(' ')}>\n            {getElements()}\n          </DropdownContent>\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","DropdownContent","AutofilledMessage","WarningMessage","ComponentMStyling","ComponentSStyling","ComponentTextStyle","InputField","input","Regular","black","Italic","neutral_600","MEDIUM","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","isOpen","setIsOpen","useState","isLoading","setIsLoading","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","matches","filter","c","toLowerCase","length","useEffect","includes","document","addEventListener","removeEventListener","renderStandardDropdown","concat","stopPropagation","focus","Math","floor","random","value","renderButtonDropdown","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","x","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, Dropdown, ButtonDropdownWrapper } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst 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\ninterface DropdownFilterProps {\n  id: string;\n  list: string[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: 'small' | 'medium';\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst DropdownFilter = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  onInputChange,\n  initalValue,\n  required,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = list?.filter((c) => c.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0]);\n          setInput(matches[0]);\n        }\n        setIsOpen(!isOpen);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    if (!isOpen && !list.includes(input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.includes(input))\n      setSelectedValues([]);\n\n    if(list.includes(input))\n    {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n          inputRef.current?.focus();\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        setIsOpen(!isOpen);\n        inputRef.current?.focus();\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n          isOpen={isOpen}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          selectedValues={selectedValues}\n          setSelectedValues={setSelectedValues}\n          hideOnClickOutside={true}\n          customizationProps={{\n            itemsType: 'normal',\n            multiSelect: false,\n            action: () => {},\n            isButton: isButton ?? false,\n            onValueUpdate: (values: string[]) => {\n              const val = values[0] ?? '';\n              setRestartFilter(true);\n              setInput(val);\n            },\n            items: list.map(x => ({ value: x }))\n          }}\n          filter={!restartFilter ? input : ''}\n          setIsOpen={setIsOpen}\n          alignLeft={false}\n          isButton={isButton || false}\n          id={`${id}_dropdowncontent`} />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}

package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js

@@ -5,6 +5,7 @@ import { Button } from '../../Button';
 import { COLORS, ComponentTextStyle } from '../../styles';
 import Avatar, { AvatarContainer } from '../Avatar';
 import MenuLink from './MenuLink';
+import { Size } from '../../types';
 import { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';
 import { ComponentXSStyling, HeadlineXXSStyling } from '../../styles/typography';
 const Menu = styled.ul`
@@ -26,6 +27,15 @@ const Menu = styled.ul`
   .open & {
     display: block;
   }
+  
+  .sign-out{
+    width: 90%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 8px auto 12px auto;
+  }
 `;
 const MenuSection = styled.li`
   padding: 8px 0;
@@ -56,19 +66,19 @@ const MenuSectionList = styled.ul`
 `;
 const StyledAvatarContainer = styled(AvatarContainer)`
   margin: 25px 0 0 25px;
+  pointer-events: none;
 `;
 const AvatarAndName = styled.div`
   display: flex;
   flex-direction: row;
 
   h5 {
-    margin: 27px 0 0 20px;
+    margin: 28px 0 0 20px;
     ${HeadlineXXSStyling(COLORS.neutral_600)}
   }
   span {
-    margin: -5px 0 0 20px;
+    margin: 0 0 0 20px;
     ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
-    top: -2px;
   }
 `;
 const NameAndEmail = styled.div`
@@ -149,24 +159,12 @@ const UserMenu = ({
     onClick: element?.onClick
   })), signOut && /*#__PURE__*/React.createElement(Button, {
     width: "90%",
-    className: "UserMenuLink",
+    className: "UserMenuLink sign-out",
     variant: "secondary",
-    size: "big",
+    size: Size.Large,
     onClick: e => {
       e.preventDefault();
       signOut(e);
-    },
-    style: {
-      fontSize: '19px',
-      lineHeight: '23px',
-      boxSizing: 'border-box',
-      borderRadius: '8px',
-      height: '56px',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      margin: '8px auto 12px auto',
-      width: '90%'
     }
   }, signOutLabel))));
 };

package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["React","styled","Button","COLORS","ComponentTextStyle","Avatar","AvatarContainer","MenuLink","flowDown","UserMenuSectionListStyling","ComponentXSStyling","HeadlineXXSStyling","Menu","ul","white","neutral_200","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","preventDefault","fontSize","lineHeight","boxSizing","borderRadius","height","display","justifyContent","alignItems","margin","width"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport {UserMenuItem} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ${COLORS.neutral_200};\n  z-index: 100;\n\n  .open & {\n    display: block;\n  }\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n  margin: 25px 0 0 25px;\n`;\n\nconst AvatarAndName = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 27px 0 0 20px;\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\n  }\n  span {\n    margin: -5px 0 0 20px;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    top: -2px;\n  }\n`;\n\nconst NameAndEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n  margin-left: 25px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <AvatarAndName key=\"AvatarAndNameSection\">\n        <StyledAvatarContainer hidePadding={true}>\n          <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n        </StyledAvatarContainer>\n        <NameAndEmail>\n          <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n          <span data-hj-suppress>{email}</span>\n        </NameAndEmail>\n      </AvatarAndName>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <MenuSectionList>\n            {accountSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MobileOrganizationSection\">\n          <OrganizationName>{organizationName || ''}</OrganizationName>\n          <MenuSectionList>\n            {organizationSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      <MenuSection key=\"MobileSupportSection\">\n        <MenuSectionList>\n          {supportSection?.map(element => (\n            <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n          ))}\n          {signOut && (\n            <Button\n              width=\"90%\"\n              className=\"UserMenuLink\"\n              variant=\"secondary\"\n              size=\"big\"\n              onClick={e => {\n                e.preventDefault();\n                signOut(e);\n              }}\n              style={{\n                fontSize: '19px',\n                lineHeight: '23px',\n                boxSizing: 'border-box',\n                borderRadius: '8px',\n                height: '56px',\n                display: 'flex',\n                justifyContent: 'center',\n                alignItems: 'center',\n                margin: '8px auto 12px auto',\n                width: '90%',\n              }}>\n              {signOutLabel}\n            </Button>\n          )}\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["React","styled","Button","COLORS","ComponentTextStyle","Avatar","AvatarContainer","MenuLink","Size","flowDown","UserMenuSectionListStyling","ComponentXSStyling","HeadlineXXSStyling","Menu","ul","white","neutral_200","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Large","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport { UserMenuItem, Size } from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ${COLORS.neutral_200};\n  z-index: 100;\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n  margin: 25px 0 0 25px;\n  pointer-events: none;\n`;\n\nconst AvatarAndName = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\n  }\n  span {\n    margin: 0 0 0 20px;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst NameAndEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n  margin-left: 25px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <AvatarAndName key=\"AvatarAndNameSection\">\n        <StyledAvatarContainer hidePadding={true}>\n          <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n        </StyledAvatarContainer>\n        <NameAndEmail>\n          <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n          <span data-hj-suppress>{email}</span>\n        </NameAndEmail>\n      </AvatarAndName>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <MenuSectionList>\n            {accountSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MobileOrganizationSection\">\n          <OrganizationName>{organizationName || ''}</OrganizationName>\n          <MenuSectionList>\n            {organizationSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      <MenuSection key=\"MobileSupportSection\">\n        <MenuSectionList>\n          {supportSection?.map(element => (\n            <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n          ))}\n          {signOut && (\n            <Button\n              width=\"90%\"\n              className=\"UserMenuLink sign-out\"\n              variant=\"secondary\"\n              size={Size.Large}\n              onClick={e => {\n                e.preventDefault();\n                signOut(e);\n              }}>\n              {signOutLabel}\n            </Button>\n          )}\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}

package/dist/esm/InputFields/Checkbox.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { CheckboxOff, CheckboxOn, CheckboxSemi } from '../icons/systemicons/SystemIcons';
 import { COLORS, ComponentTextStyle } from '../styles';
+import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
 const StyledCheckBox = styled.div`
   display: flex;
@@ -17,6 +18,10 @@ const StyledCheckBox = styled.div`
 
   color: ${COLORS.black};
 
+  .pointerTransparent {
+    pointer-events: none;
+  }
+
   .icon {
     margin: 6px;
     display: flex;
@@ -103,18 +108,18 @@ const StyledCheckBox = styled.div`
     }
   }
 `;
-
-const RadioButton = ({
+const Checkbox = /*#__PURE__*/React.forwardRef(({
   id,
   selected,
   select,
   label,
   showWarning,
+  iconPointerEventsTransparent,
   disabled,
   margin,
   size,
   semiSelected
-}) => {
+}, ref) => {
   const onKeyPress = e => {
     if (e.keyCode === 13 && !disabled) {
       select(!selected);
@@ -129,11 +134,13 @@ const RadioButton = ({
     select(!selected);
   };
 
-  size = size ?? 'medium';
+  size = size ?? Size.Medium;
+  console.log('size prop', size.toString().toLowerCase());
   return /*#__PURE__*/React.createElement(StyledCheckBox, {
     key: id,
+    ref: ref,
     disabled: disabled,
-    className: size.concat(disabled ? ' disabled' : ''),
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
     selected: selected,
     tabIndex: disabled ? -1 : 0,
     showWarning: showWarning,
@@ -145,18 +152,20 @@ const RadioButton = ({
     id: id,
     className: 'icon'
   }, selected ? /*#__PURE__*/React.createElement(CheckboxOn, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   }) : semiSelected ? /*#__PURE__*/React.createElement(CheckboxSemi, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   }) : /*#__PURE__*/React.createElement(CheckboxOff, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   })), label && /*#__PURE__*/React.createElement("label", {
     className: 'label',
     htmlFor: id
   }, label));
-};
-
-RadioButton.propTypes = {
+});
+Checkbox.propTypes = {
   id: _pt.string.isRequired,
   selected: _pt.bool.isRequired,
   select: _pt.func.isRequired,
@@ -164,8 +173,8 @@ RadioButton.propTypes = {
   showWarning: _pt.bool,
   disabled: _pt.bool,
   margin: _pt.string,
-  size: _pt.oneOf(['small', 'medium', 'large']),
+  iconPointerEventsTransparent: _pt.bool,
   semiSelected: _pt.bool
 };
-export default RadioButton;
+export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map