@laerdal/life-react-components 1.5.1-dev.28 → 1.5.1-dev.31

package/dist/Dropdown/DropdownFilter.cjs

@@ -29,8 +29,6 @@ var _types = require("../types");
 
 var _styling = require("../InputFields/styling");
 
-var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -95,25 +93,30 @@ var DropdownFilter = function DropdownFilter(_ref) {
       focused = _React$useState14[0],
       setFocused = _React$useState14[1];
 
+  var styledFieldRef = React.useRef(null);
   var inputRef = React.useRef(null);
-  var styledFieldRef = (0, _common.useFocusVisibleRef)([inputRef]);
 
   var handleKeyPress = function handleKeyPress(e) {
-    if (e.key === 'Enter' && !locked) {
-      var matches = list === null || list === void 0 ? void 0 : list.filter(function (c) {
-        return c.label.toLowerCase() === input.toLowerCase();
-      });
-
-      if (matches.length === 1 && onSelect) {
-        onSelect(matches[0].label);
-        setInput(matches[0].label);
-      }
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && styledFieldRef.current.contains(e.target)) {
+      if (e.keyCode === 13 && !locked) {
+        var matches = list === null || list === void 0 ? void 0 : list.filter(function (c) {
+          return c.label.toLowerCase() === input.toLowerCase();
+        });
+
+        if (matches.length === 1 && onSelect) {
+          onSelect(matches[0].label);
+          setInput(matches[0].label);
+        }
 
-      if (!isOpen) setFocused(0);
-      setIsOpen(!isOpen);
+        if (!isOpen) setFocused(0);
+        setIsOpen(!isOpen);
 
-      if (matches.length === 0) {
-        setInput('');
+        if (matches.length === 0) {
+          setInput('');
+        }
+      } else if (e.keyCode === 40) {
+        if (!isOpen) setFocused(0);
+        setIsOpen(!isOpen);
       }
     }
   };
@@ -132,6 +135,12 @@ var DropdownFilter = function DropdownFilter(_ref) {
       setPlaceholderSearch(placeholder || '');
     }
   }, [isOpen]);
+  React.useEffect(function () {
+    document.addEventListener('keypress', handleKeyPress);
+    return function () {
+      document.removeEventListener('keypress', handleKeyPress);
+    };
+  });
   React.useEffect(function () {
     setIsLoading(false);
     if (selectedValues.length > 0 && !list.some(function (x) {
@@ -151,36 +160,18 @@ var DropdownFilter = function DropdownFilter(_ref) {
       ref: styledFieldRef,
       className: (isOpen ? 'expanded ' : '').concat(size ? size : ''),
       onClick: function onClick(e) {
-        if (!locked && !disabled) {
-          e.stopPropagation();
-          setIsOpen(!isOpen);
-
-          if (isOpen) {
-            var _inputRef$current;
+        var _inputRef$current;
 
-            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
-          } else {
-            var _inputRef$current2;
-
-            (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-          }
-        }
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
       },
       tabIndex: disabled || locked ? -1 : 0,
       disabled: disabled || false,
-      locked: locked || false,
       isPlaceholder: !input,
-      fontSize: buttonFontSize,
+      locked: locked || false,
       showValidationMessage: !!activeValidationMessage,
-      onKeyPress: function onKeyPress(e) {
-        if (e.key === 'Enter') {
-          var _inputRef$current3;
-
-          setIsOpen(true);
-          (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
-        }
-      },
-      onMouseDown: _common.defaultOnMouseDownHandler,
+      fontSize: buttonFontSize,
       "data-testid": "otherdiv_".concat(id),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, {
         ref: inputRef,
@@ -201,6 +192,12 @@ var DropdownFilter = function DropdownFilter(_ref) {
             }
           }
         },
+        onClick: function onClick(e) {
+          if (!locked && !disabled) {
+            e.stopPropagation();
+            setIsOpen(!isOpen);
+          }
+        },
         onFocus: function onFocus() {
           return setPlaceholderSearch('');
         },
@@ -208,12 +205,15 @@ var DropdownFilter = function DropdownFilter(_ref) {
           return setPlaceholderSearch(placeholder || '');
         },
         required: required,
-        tabIndex: -1,
+        tabIndex: disabled || locked ? -1 : 0,
         disabled: disabled || false
       }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
         size: _types.Size.Small,
         color: _styles.COLORS.neutral_600
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: function onClick() {
+          return setIsOpen(!isOpen);
+        },
         className: 'dropdown-arrow',
         children: isOpen && !locked && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
           size: "24px",
@@ -229,8 +229,11 @@ var DropdownFilter = function DropdownFilter(_ref) {
   var renderButtonDropdown = function renderButtonDropdown() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.ButtonDropdownWrapper, {
       onClick: function onClick(e) {
+        var _inputRef$current2;
+
         e.stopPropagation();
         setIsOpen(!isOpen);
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
       },
       disabled: disabled,
       locked: locked,
@@ -238,8 +241,6 @@ var DropdownFilter = function DropdownFilter(_ref) {
         ref: styledFieldRef,
         className: (isOpen ? 'expanded ' : '').concat(size ? size + ' ' : '').concat(isButton ? 'button' : ''),
         tabIndex: disabled || locked ? -1 : 0,
-        onKeyPress: handleKeyPress,
-        onMouseDown: _common.defaultOnMouseDownHandler,
         disabled: disabled || false,
         locked: locked || false,
         showValidationMessage: !!activeValidationMessage,
@@ -251,6 +252,9 @@ var DropdownFilter = function DropdownFilter(_ref) {
           size: _types.Size.Small,
           color: _styles.COLORS.neutral_600
         }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            return setIsOpen(!isOpen);
+          },
           className: 'dropdown-arrow',
           children: isOpen && !locked && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
             size: "24px",

package/dist/Dropdown/DropdownFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","scrollable","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","inputRef","useRef","styledFieldRef","handleKeyPress","e","key","matches","filter","c","label","toLowerCase","length","useEffect","some","x","renderStandardDropdown","concat","stopPropagation","current","blur","focus","defaultOnMouseDownHandler","Math","floor","random","target","value","Size","Small","COLORS","neutral_600","renderButtonDropdown","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","customContent","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {StyledField, Dropdown, ButtonDropdownWrapper, InputField} from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport {Size} from '../types'\nimport {AutofilledMessage, WarningMessage} from '../InputFields/styling';\nimport {defaultOnMouseDownHandler, useFocusVisibleRef} from '../common';\n\nexport interface DropdownFilterItem {\n  label: string;\n  customContent?: React.ReactNode;\n}\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownFilterItem[];\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?: Size.Small | Size.Medium;\n  scrollable?: boolean;\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                          scrollable,\n                          isButton,\n                          activeValidationMessage,\n                          autofilledMessage,\n                          size,\n                          buttonFontSize,\n                          keepInitialValue,\n                          icon,\n                          margin = '4px 0',\n                        }: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n\n  const handleKeyPress = (e: React.KeyboardEvent<any>) => {\n    if (e.key === 'Enter' && !locked) {\n      const matches = list?.filter((c) => c.label.toLowerCase() === input.toLowerCase());\n      if (matches.length === 1 && onSelect) {\n        onSelect(matches[0].label);\n        setInput(matches[0].label);\n      }\n      if (!isOpen)\n        setFocused(0);\n      setIsOpen(!isOpen);\n      if (matches.length === 0) {\n        setInput('');\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.some(x => x.label == input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.some(x => x.label == input))\n      setSelectedValues([]);\n\n    if (list.some(x => x.label == input)) {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          if (!locked && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onKeyPress={e => {\n          if (e.key === 'Enter') {\n            setIsOpen(true);\n            inputRef.current?.focus();\n          }\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\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          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={-1}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <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      }}\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        onKeyPress={handleKeyPress}\n        onMouseDown={defaultOnMouseDownHandler}\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={Size.Small} color={COLORS.neutral_600}/> : null}\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <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 : ''}\n                margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n            isOpen={isOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            hideOnClickOutside={true}\n            size={size ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                const val = values[0] ?? '';\n                setRestartFilter(true);\n                setInput(val);\n              },\n              items: list.map(x => ({value: x.label, customContent: x.customContent}))\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.cjs"}
+{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","scrollable","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","matches","filter","c","label","toLowerCase","length","useEffect","some","x","document","addEventListener","removeEventListener","renderStandardDropdown","concat","stopPropagation","focus","Math","floor","random","value","Size","Small","COLORS","neutral_600","renderButtonDropdown","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","customContent","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { Size } from '../types'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\n\nexport interface DropdownFilterItem {\n  label: string;\n  customContent?: React.ReactNode;\n}\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownFilterItem[];\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?: Size.Small | Size.Medium;\n  scrollable?: boolean;\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  scrollable,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = list?.filter((c) => c.label.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0].label);\n          setInput(matches[0].label);\n        }\n        if(!isOpen)\n          setFocused(0);\n        setIsOpen(!isOpen);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        if(!isOpen)\n          setFocused(0);\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.some(x => x.label == 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.some(x => x.label == input))\n      setSelectedValues([]);\n\n    if(list.some(x => x.label == 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        isPlaceholder={!input}\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={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={Size.Small} color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n          isOpen={isOpen}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          selectedValues={selectedValues}\n          setSelectedValues={setSelectedValues}\n          hideOnClickOutside={true}\n          size={size ?? Size.Small}\n          focused={focused}\n          setFocused={setFocused}\n          customizationProps={{\n            itemsType: 'normal',\n            scrollable: scrollable,\n            multiSelect: false,\n            action: () => {},\n            onValueUpdate: (values: string[]) => {\n              const val = values[0] ?? '';\n              setRestartFilter(true);\n              setInput(val);\n            },\n            items: list.map(x => ({ value: x.label, customContent: x.customContent }))\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.cjs"}

package/dist/Dropdown/DropdownFilter.js

@@ -8,7 +8,6 @@ import { StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './Comm
 import DropdownContent from './DropdownContent';
 import { Size } from '../types';
 import { AutofilledMessage, WarningMessage } from '../InputFields/styling';
-import { defaultOnMouseDownHandler, useFocusVisibleRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -71,25 +70,30 @@ var DropdownFilter = function DropdownFilter(_ref) {
       focused = _React$useState14[0],
       setFocused = _React$useState14[1];
 
+  var styledFieldRef = React.useRef(null);
   var inputRef = React.useRef(null);
-  var styledFieldRef = useFocusVisibleRef([inputRef]);
 
   var handleKeyPress = function handleKeyPress(e) {
-    if (e.key === 'Enter' && !locked) {
-      var matches = list === null || list === void 0 ? void 0 : list.filter(function (c) {
-        return c.label.toLowerCase() === input.toLowerCase();
-      });
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && styledFieldRef.current.contains(e.target)) {
+      if (e.keyCode === 13 && !locked) {
+        var matches = list === null || list === void 0 ? void 0 : list.filter(function (c) {
+          return c.label.toLowerCase() === input.toLowerCase();
+        });
 
-      if (matches.length === 1 && onSelect) {
-        onSelect(matches[0].label);
-        setInput(matches[0].label);
-      }
+        if (matches.length === 1 && onSelect) {
+          onSelect(matches[0].label);
+          setInput(matches[0].label);
+        }
 
-      if (!isOpen) setFocused(0);
-      setIsOpen(!isOpen);
+        if (!isOpen) setFocused(0);
+        setIsOpen(!isOpen);
 
-      if (matches.length === 0) {
-        setInput('');
+        if (matches.length === 0) {
+          setInput('');
+        }
+      } else if (e.keyCode === 40) {
+        if (!isOpen) setFocused(0);
+        setIsOpen(!isOpen);
       }
     }
   };
@@ -108,6 +112,12 @@ var DropdownFilter = function DropdownFilter(_ref) {
       setPlaceholderSearch(placeholder || '');
     }
   }, [isOpen]);
+  React.useEffect(function () {
+    document.addEventListener('keypress', handleKeyPress);
+    return function () {
+      document.removeEventListener('keypress', handleKeyPress);
+    };
+  });
   React.useEffect(function () {
     setIsLoading(false);
     if (selectedValues.length > 0 && !list.some(function (x) {
@@ -127,36 +137,18 @@ var DropdownFilter = function DropdownFilter(_ref) {
       ref: styledFieldRef,
       className: (isOpen ? 'expanded ' : '').concat(size ? size : ''),
       onClick: function onClick(e) {
-        if (!locked && !disabled) {
-          e.stopPropagation();
-          setIsOpen(!isOpen);
+        var _inputRef$current;
 
-          if (isOpen) {
-            var _inputRef$current;
-
-            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
-          } else {
-            var _inputRef$current2;
-
-            (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-          }
-        }
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
       },
       tabIndex: disabled || locked ? -1 : 0,
       disabled: disabled || false,
-      locked: locked || false,
       isPlaceholder: !input,
-      fontSize: buttonFontSize,
+      locked: locked || false,
       showValidationMessage: !!activeValidationMessage,
-      onKeyPress: function onKeyPress(e) {
-        if (e.key === 'Enter') {
-          var _inputRef$current3;
-
-          setIsOpen(true);
-          (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
-        }
-      },
-      onMouseDown: defaultOnMouseDownHandler,
+      fontSize: buttonFontSize,
       "data-testid": "otherdiv_".concat(id),
       children: [/*#__PURE__*/_jsx(InputField, {
         ref: inputRef,
@@ -177,6 +169,12 @@ var DropdownFilter = function DropdownFilter(_ref) {
             }
           }
         },
+        onClick: function onClick(e) {
+          if (!locked && !disabled) {
+            e.stopPropagation();
+            setIsOpen(!isOpen);
+          }
+        },
         onFocus: function onFocus() {
           return setPlaceholderSearch('');
         },
@@ -184,12 +182,15 @@ var DropdownFilter = function DropdownFilter(_ref) {
           return setPlaceholderSearch(placeholder || '');
         },
         required: required,
-        tabIndex: -1,
+        tabIndex: disabled || locked ? -1 : 0,
         disabled: disabled || false
       }), isLoading ? /*#__PURE__*/_jsx(LoadingIndicator, {
         size: Size.Small,
         color: COLORS.neutral_600
       }) : null, /*#__PURE__*/_jsx("div", {
+        onClick: function onClick() {
+          return setIsOpen(!isOpen);
+        },
         className: 'dropdown-arrow',
         children: isOpen && !locked && !disabled ? /*#__PURE__*/_jsx(ArrowDropUp, {
           size: "24px",
@@ -205,8 +206,11 @@ var DropdownFilter = function DropdownFilter(_ref) {
   var renderButtonDropdown = function renderButtonDropdown() {
     return /*#__PURE__*/_jsx(ButtonDropdownWrapper, {
       onClick: function onClick(e) {
+        var _inputRef$current2;
+
         e.stopPropagation();
         setIsOpen(!isOpen);
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
       },
       disabled: disabled,
       locked: locked,
@@ -214,8 +218,6 @@ var DropdownFilter = function DropdownFilter(_ref) {
         ref: styledFieldRef,
         className: (isOpen ? 'expanded ' : '').concat(size ? size + ' ' : '').concat(isButton ? 'button' : ''),
         tabIndex: disabled || locked ? -1 : 0,
-        onKeyPress: handleKeyPress,
-        onMouseDown: defaultOnMouseDownHandler,
         disabled: disabled || false,
         locked: locked || false,
         showValidationMessage: !!activeValidationMessage,
@@ -227,6 +229,9 @@ var DropdownFilter = function DropdownFilter(_ref) {
           size: Size.Small,
           color: COLORS.neutral_600
         }) : null, /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return setIsOpen(!isOpen);
+          },
           className: 'dropdown-arrow',
           children: isOpen && !locked && !disabled ? /*#__PURE__*/_jsx(ArrowDropUp, {
             size: "24px",

package/dist/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","InputField","DropdownContent","Size","AutofilledMessage","WarningMessage","defaultOnMouseDownHandler","useFocusVisibleRef","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","scrollable","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","inputRef","useRef","styledFieldRef","handleKeyPress","e","key","matches","filter","c","label","toLowerCase","length","useEffect","some","x","renderStandardDropdown","concat","stopPropagation","current","blur","focus","Math","floor","random","target","value","Small","neutral_600","renderButtonDropdown","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","customContent","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {StyledField, Dropdown, ButtonDropdownWrapper, InputField} from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport {Size} from '../types'\nimport {AutofilledMessage, WarningMessage} from '../InputFields/styling';\nimport {defaultOnMouseDownHandler, useFocusVisibleRef} from '../common';\n\nexport interface DropdownFilterItem {\n  label: string;\n  customContent?: React.ReactNode;\n}\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownFilterItem[];\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?: Size.Small | Size.Medium;\n  scrollable?: boolean;\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                          scrollable,\n                          isButton,\n                          activeValidationMessage,\n                          autofilledMessage,\n                          size,\n                          buttonFontSize,\n                          keepInitialValue,\n                          icon,\n                          margin = '4px 0',\n                        }: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n\n  const handleKeyPress = (e: React.KeyboardEvent<any>) => {\n    if (e.key === 'Enter' && !locked) {\n      const matches = list?.filter((c) => c.label.toLowerCase() === input.toLowerCase());\n      if (matches.length === 1 && onSelect) {\n        onSelect(matches[0].label);\n        setInput(matches[0].label);\n      }\n      if (!isOpen)\n        setFocused(0);\n      setIsOpen(!isOpen);\n      if (matches.length === 0) {\n        setInput('');\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.some(x => x.label == input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n    if (selectedValues.length > 0 && !list.some(x => x.label == input))\n      setSelectedValues([]);\n\n    if (list.some(x => x.label == input)) {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          if (!locked && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onKeyPress={e => {\n          if (e.key === 'Enter') {\n            setIsOpen(true);\n            inputRef.current?.focus();\n          }\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\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          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={-1}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <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      }}\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        onKeyPress={handleKeyPress}\n        onMouseDown={defaultOnMouseDownHandler}\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={Size.Small} color={COLORS.neutral_600}/> : null}\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <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 : ''}\n                margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n            isOpen={isOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            hideOnClickOutside={true}\n            size={size ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                const val = values[0] ?? '';\n                setRestartFilter(true);\n                setInput(val);\n              },\n              items: list.map(x => ({value: x.label, customContent: x.customContent}))\n            }}\n            filter={!restartFilter ? input : ''}\n            setIsOpen={setIsOpen}\n            alignLeft={false}\n            isButton={isButton || false}\n            id={`${id}_dropdowncontent`}/>\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400}/>\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
+{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","InputField","DropdownContent","Size","AutofilledMessage","WarningMessage","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","scrollable","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","matches","filter","c","label","toLowerCase","length","useEffect","some","x","document","addEventListener","removeEventListener","renderStandardDropdown","concat","stopPropagation","focus","Math","floor","random","value","Small","neutral_600","renderButtonDropdown","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","customContent","warning_400"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,aAAT,EAAwBC,WAAxB,EAAqCC,WAArC,EAAkDC,gBAAlD,QAA0E,kCAA1E;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,WAAT,EAAsBC,QAAtB,EAAgCC,qBAAhC,EAAuDC,UAAvD,QAAyE,iBAAzE;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,iBAAT,EAA4BC,cAA5B,QAAkD,wBAAlD;;;;;AA8BA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAqBI;AAAA,MApBzBC,EAoByB,QApBzBA,EAoByB;AAAA,MAnBzBC,IAmByB,QAnBzBA,IAmByB;AAAA,MAlBzBC,WAkByB,QAlBzBA,WAkByB;AAAA,MAjBzBC,QAiByB,QAjBzBA,QAiByB;AAAA,MAhBzBC,aAgByB,QAhBzBA,aAgByB;AAAA,MAfzBC,WAeyB,QAfzBA,WAeyB;AAAA,MAdzBC,QAcyB,QAdzBA,QAcyB;AAAA,MAbzBC,cAayB,QAbzBA,cAayB;AAAA,MAZzBC,kBAYyB,QAZzBA,kBAYyB;AAAA,MAXzBC,QAWyB,QAXzBA,QAWyB;AAAA,MAVzBC,MAUyB,QAVzBA,MAUyB;AAAA,MATzBC,UASyB,QATzBA,UASyB;AAAA,MARzBC,QAQyB,QARzBA,QAQyB;AAAA,MAPzBC,uBAOyB,QAPzBA,uBAOyB;AAAA,MANzBC,iBAMyB,QANzBA,iBAMyB;AAAA,MALzBC,IAKyB,QALzBA,IAKyB;AAAA,MAJzBC,cAIyB,QAJzBA,cAIyB;AAAA,MAHzBC,gBAGyB,QAHzBA,gBAGyB;AAAA,MAFzBC,IAEyB,QAFzBA,IAEyB;AAAA,yBADzBC,MACyB;AAAA,MADzBA,MACyB,4BADhB,OACgB;;AACzB,wBAA4BnC,KAAK,CAACoC,QAAN,CAAwB,KAAxB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,yBAAkCtC,KAAK,CAACoC,QAAN,CAAwB,KAAxB,CAAlC;AAAA;AAAA,MAAOG,SAAP;AAAA,MAAkBC,YAAlB;;AACA,yBAA0BxC,KAAK,CAACoC,QAAN,CAAuBf,WAAvB,aAAuBA,WAAvB,cAAuBA,WAAvB,GAAsC,EAAtC,CAA1B;AAAA;AAAA,MAAOoB,KAAP;AAAA,MAAcC,QAAd;;AACA,yBAAkD1C,KAAK,CAACoC,QAAN,CAAuBlB,WAAW,IAAI,EAAtC,CAAlD;AAAA;AAAA,MAAOyB,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,yBAA0C5C,KAAK,CAACoC,QAAN,CAAwB,KAAxB,CAA1C;AAAA;AAAA,MAAOS,aAAP;AAAA,MAAsBC,gBAAtB;;AACA,0BAA4C9C,KAAK,CAACoC,QAAN,CAAyB,EAAzB,CAA5C;AAAA;AAAA,MAAOW,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,0BAA8BhD,KAAK,CAACoC,QAAN,CAA8B,IAA9B,CAA9B;AAAA;AAAA,MAAOa,OAAP;AAAA,MAAgBC,UAAhB;;AAEA,MAAMC,cAAc,GAAGnD,KAAK,CAACoD,MAAN,CAA6B,IAA7B,CAAvB;AACA,MAAMC,QAAQ,GAAGrD,KAAK,CAACoD,MAAN,CAA+B,IAA/B,CAAjB;;AAEA,MAAME,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD,EAAY;AACjC,QAAIJ,cAAc,SAAd,IAAAA,cAAc,WAAd,IAAAA,cAAc,CAAEK,OAAhB,IAA2BL,cAAc,CAACK,OAAf,CAAuBC,QAAvB,CAAgCF,CAAC,CAACG,MAAlC,CAA/B,EAA0E;AACxE,UAAIH,CAAC,CAACI,OAAF,KAAc,EAAd,IAAoB,CAACjC,MAAzB,EAAiC;AAC/B,YAAMkC,OAAO,GAAG3C,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAE4C,MAAN,CAAa,UAACC,CAAD;AAAA,iBAAOA,CAAC,CAACC,KAAF,CAAQC,WAAR,OAA0BvB,KAAK,CAACuB,WAAN,EAAjC;AAAA,SAAb,CAAhB;;AACA,YAAIJ,OAAO,CAACK,MAAR,KAAmB,CAAnB,IAAwB9C,QAA5B,EAAsC;AACpCA,UAAAA,QAAQ,CAACyC,OAAO,CAAC,CAAD,CAAP,CAAWG,KAAZ,CAAR;AACArB,UAAAA,QAAQ,CAACkB,OAAO,CAAC,CAAD,CAAP,CAAWG,KAAZ,CAAR;AACD;;AACD,YAAG,CAAC1B,MAAJ,EACEa,UAAU,CAAC,CAAD,CAAV;AACFZ,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIuB,OAAO,CAACK,MAAR,KAAmB,CAAvB,EAA0B;AACxBvB,UAAAA,QAAQ,CAAC,EAAD,CAAR;AACD;AACF,OAZD,MAYO,IAAIa,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AAC3B,YAAG,CAACtB,MAAJ,EACEa,UAAU,CAAC,CAAD,CAAV;AACFZ,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF;AACF,GApBD;;AAsBArC,EAAAA,KAAK,CAACkE,SAAN,CAAgB,YAAM;AACpB,QAAI7C,WAAW,IAAIA,WAAW,KAAK,EAAnC,EAAuC;AACrCqB,MAAAA,QAAQ,CAACrB,WAAD,CAAR;AACAyB,MAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACD;AACF,GALD,EAKG,CAACzB,WAAD,CALH;AAOArB,EAAAA,KAAK,CAACkE,SAAN,CAAgB,YAAM;AACpB,QAAI,CAAC7B,MAAD,IAAW,CAACpB,IAAI,CAACkD,IAAL,CAAU,UAAAC,CAAC;AAAA,aAAIA,CAAC,CAACL,KAAF,IAAWtB,KAAf;AAAA,KAAX,CAAhB,EAAkD;AAChDC,MAAAA,QAAQ,CAAC,EAAD,CAAR;AACAE,MAAAA,oBAAoB,CAAC1B,WAAW,IAAI,EAAhB,CAApB;AACD;AACF,GALD,EAKG,CAACmB,MAAD,CALH;AAOArC,EAAAA,KAAK,CAACkE,SAAN,CAAgB,YAAM;AACpBG,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,UAA1B,EAAsChB,cAAtC;AACA,WAAO,YAAM;AACXe,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,UAA7B,EAAyCjB,cAAzC;AACD,KAFD;AAGD,GALD;AAOAtD,EAAAA,KAAK,CAACkE,SAAN,CAAgB,YAAM;AACpB1B,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACA,QAAIO,cAAc,CAACkB,MAAf,GAAwB,CAAxB,IAA6B,CAAChD,IAAI,CAACkD,IAAL,CAAU,UAAAC,CAAC;AAAA,aAAIA,CAAC,CAACL,KAAF,IAAWtB,KAAf;AAAA,KAAX,CAAlC,EACEO,iBAAiB,CAAC,EAAD,CAAjB;;AAEF,QAAG/B,IAAI,CAACkD,IAAL,CAAU,UAAAC,CAAC;AAAA,aAAIA,CAAC,CAACL,KAAF,IAAWtB,KAAf;AAAA,KAAX,CAAH,EACA;AACEO,MAAAA,iBAAiB,CAAC,CAACP,KAAD,CAAD,CAAjB;AACAtB,MAAAA,QAAQ,IAAIA,QAAQ,CAACsB,KAAD,CAApB;AACD;AACF,GAVD,EAUG,CAACA,KAAD,CAVH;;AAaA,MAAM+B,sBAAsB,GAAG,SAAzBA,sBAAyB,GAAM;AACnC,wBACE,MAAC,WAAD;AACE,MAAA,GAAG,EAAErB,cADP;AAEE,MAAA,SAAS,EAAE,CAACd,MAAM,GAAG,WAAH,GAAiB,EAAxB,EAA4BoC,MAA5B,CAAmC1C,IAAI,GAAGA,IAAH,GAAU,EAAjD,CAFb;AAGE,MAAA,OAAO,EAAE,iBAACwB,CAAD,EAAY;AAAA;;AACnBA,QAAAA,CAAC,CAACmB,eAAF;AACApC,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACA,6BAAAgB,QAAQ,CAACG,OAAT,wEAAkBmB,KAAlB;AACD,OAPH;AAQE,MAAA,QAAQ,EAAElD,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CARtC;AASE,MAAA,QAAQ,EAAED,QAAQ,IAAI,KATxB;AAUE,MAAA,aAAa,EAAE,CAACgB,KAVlB;AAWE,MAAA,MAAM,EAAEf,MAAM,IAAI,KAXpB;AAYE,MAAA,qBAAqB,EAAE,CAAC,CAACG,uBAZ3B;AAaE,MAAA,QAAQ,EAAEG,cAbZ;AAcE,wCAAyBhB,EAAzB,CAdF;AAAA,8BAeE,KAAC,UAAD;AACE,QAAA,GAAG,EAAEqC,QADP;AAEE,QAAA,YAAY,EAAE,SAASuB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAFzB;AAGE,QAAA,IAAI,EAAC,QAHP;AAIE,QAAA,WAAW,EAAEnC,iBAJf;AAKE,QAAA,KAAK,EAAEF,KALT;AAME,QAAA,SAAS,EAAEV,IAAI,aAAMA,IAAN,cAAqB,OANtC;AAOE,QAAA,QAAQ,EAAE,kBAACwB,CAAD,EAAY;AACpB,cAAI,CAAC7B,MAAD,IAAW,CAACD,QAAhB,EAA0B;AACxBqB,YAAAA,gBAAgB,CAAC,KAAD,CAAhB;AACAN,YAAAA,YAAY,CAAC,IAAD,CAAZ;AACAF,YAAAA,SAAS,CAAC,IAAD,CAAT;AACAI,YAAAA,QAAQ,CAACa,CAAC,CAACG,MAAF,CAASqB,KAAV,CAAR;;AACA,gBAAI3D,aAAJ,EAAmB;AACjBA,cAAAA,aAAa,CAACmC,CAAC,CAACG,MAAF,CAASqB,KAAT,IAAkB,EAAnB,CAAb;AACD;AACF;AACF,SAjBH;AAkBE,QAAA,OAAO,EAAE,iBAACxB,CAAD,EAAY;AACnB,cAAI,CAAC7B,MAAD,IAAW,CAACD,QAAhB,EAA0B;AACxB8B,YAAAA,CAAC,CAACmB,eAAF;AACApC,YAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF,SAvBH;AAwBE,QAAA,OAAO,EAAE;AAAA,iBAAMO,oBAAoB,CAAC,EAAD,CAA1B;AAAA,SAxBX;AAyBE,QAAA,MAAM,EAAE;AAAA,iBAAMA,oBAAoB,CAAC1B,WAAW,IAAI,EAAhB,CAA1B;AAAA,SAzBV;AA0BE,QAAA,QAAQ,EAAEI,QA1BZ;AA2BE,QAAA,QAAQ,EAAEG,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CA3BtC;AA4BE,QAAA,QAAQ,EAAED,QAAQ,IAAI;AA5BxB,QAfF,EA8CGc,SAAS,gBAAG,KAAC,gBAAD;AAAkB,QAAA,IAAI,EAAE3B,IAAI,CAACoE,KAA7B;AAAoC,QAAA,KAAK,EAAE/E,MAAM,CAACgF;AAAlD,QAAH,GAAuE,IA9CnF,eAgDE;AAAK,QAAA,OAAO,EAAE;AAAA,iBAAM3C,SAAS,CAAC,CAACD,MAAF,CAAf;AAAA,SAAd;AAAwC,QAAA,SAAS,EAAE,gBAAnD;AAAA,kBACGA,MAAM,IAAI,CAACX,MAAX,IAAqB,CAACD,QAAtB,gBAAiC,KAAC,WAAD;AAAa,UAAA,IAAI,EAAC,MAAlB;AAAyB,UAAA,SAAS,EAAEM,IAAI,GAAGA,IAAH,GAAU;AAAlD,UAAjC,gBAA4F,KAAC,aAAD;AAAe,UAAA,IAAI,EAAC,MAApB;AAA2B,UAAA,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;AAApD;AAD/F,QAhDF;AAAA,MADF;AAsDD,GAvDD;;AAyDA,MAAMmD,oBAAoB,GAAG,SAAvBA,oBAAuB;AAAA,wBAC3B,KAAC,qBAAD;AACE,MAAA,OAAO,EAAE,iBAAC3B,CAAD,EAAY;AAAA;;AACnBA,QAAAA,CAAC,CAACmB,eAAF;AACApC,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACA,8BAAAgB,QAAQ,CAACG,OAAT,0EAAkBmB,KAAlB;AACD,OALH;AAME,MAAA,QAAQ,EAAElD,QANZ;AAOE,MAAA,MAAM,EAAEC,MAPV;AAAA,6BAQE,MAAC,WAAD;AACE,QAAA,GAAG,EAAEyB,cADP;AAEE,QAAA,SAAS,EAAE,CAACd,MAAM,GAAG,WAAH,GAAiB,EAAxB,EAA4BoC,MAA5B,CAAmC1C,IAAI,GAAGA,IAAI,GAAG,GAAV,GAAgB,EAAvD,EAA2D0C,MAA3D,CAAkE7C,QAAQ,GAAG,QAAH,GAAc,EAAxF,CAFb;AAGE,QAAA,QAAQ,EAAEH,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CAHtC;AAIE,QAAA,QAAQ,EAAED,QAAQ,IAAI,KAJxB;AAKE,QAAA,MAAM,EAAEC,MAAM,IAAI,KALpB;AAME,QAAA,qBAAqB,EAAE,CAAC,CAACG,uBAN3B;AAOE,QAAA,QAAQ,EAAEG,cAPZ;AAAA,mBAQGE,IARH,eASE;AAAK,UAAA,SAAS,EAAE,OAAhB;AAAA,oBAA0Bb,WAAW,IAAIY,gBAAf,GAAkCZ,WAAlC,GAAgDoB,KAAK,IAAIE;AAAnF,UATF,EAUGJ,SAAS,gBAAG,KAAC,gBAAD;AAAkB,UAAA,IAAI,EAAE3B,IAAI,CAACoE,KAA7B;AAAoC,UAAA,KAAK,EAAE/E,MAAM,CAACgF;AAAlD,UAAH,GAAuE,IAVnF,eAWE;AAAK,UAAA,OAAO,EAAE;AAAA,mBAAM3C,SAAS,CAAC,CAACD,MAAF,CAAf;AAAA,WAAd;AAAwC,UAAA,SAAS,EAAE,gBAAnD;AAAA,oBACGA,MAAM,IAAI,CAACX,MAAX,IAAqB,CAACD,QAAtB,gBAAiC,KAAC,WAAD;AAAa,YAAA,IAAI,EAAC,MAAlB;AAAyB,YAAA,SAAS,EAAEM,IAAI,GAAGA,IAAH,GAAU;AAAlD,YAAjC,gBAA4F,KAAC,aAAD;AAAe,YAAA,IAAI,EAAC,MAApB;AAA2B,YAAA,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;AAApD;AAD/F,UAXF;AAAA;AARF,MAD2B;AAAA,GAA7B;;AA2BA,sBACE;AAAA,4BACE,MAAC,QAAD;AAAU,MAAA,QAAQ,EAAEH,QAAQ,IAAI,KAAhC;AAAuC,MAAA,QAAQ,EAAEH,QAAjD;AAA2D,MAAA,MAAM,EAAEC,MAAnE;AAA2E,MAAA,SAAS,EAAEK,IAAI,GAAGA,IAAH,GAAU,EAApG;AAAwG,MAAA,MAAM,EAAEI,MAAhH;AAAA,iBACG,CAACP,QAAD,IAAa4C,sBAAsB,EADtC,EAEG,CAAC,CAAC5C,QAAF,IAAcsD,oBAAoB,EAFrC,EAGG,CAACxD,MAAD,IAAW,CAACD,QAAZ,iBACC,KAAC,eAAD;AACA,QAAA,MAAM,EAAEY,MADR;AAEA,QAAA,kBAAkB,EAAEb,kBAAF,aAAEA,kBAAF,cAAEA,kBAAF,GAAwB,EAF1C;AAGA,QAAA,cAAc,EAAEuB,cAHhB;AAIA,QAAA,iBAAiB,EAAEC,iBAJnB;AAKA,QAAA,kBAAkB,EAAE,IALpB;AAMA,QAAA,IAAI,EAAEjB,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUnB,IAAI,CAACoE,KANnB;AAOA,QAAA,OAAO,EAAE/B,OAPT;AAQA,QAAA,UAAU,EAAEC,UARZ;AASA,QAAA,kBAAkB,EAAE;AAClBiC,UAAAA,SAAS,EAAE,QADO;AAElBxD,UAAAA,UAAU,EAAEA,UAFM;AAGlByD,UAAAA,WAAW,EAAE,KAHK;AAIlBC,UAAAA,MAAM,EAAE,kBAAM,CAAE,CAJE;AAKlBC,UAAAA,aAAa,EAAE,uBAACC,MAAD,EAAsB;AAAA;;AACnC,gBAAMC,GAAG,eAAGD,MAAM,CAAC,CAAD,CAAT,+CAAgB,EAAzB;AACAzC,YAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAJ,YAAAA,QAAQ,CAAC8C,GAAD,CAAR;AACD,WATiB;AAUlBC,UAAAA,KAAK,EAAExE,IAAI,CAACyE,GAAL,CAAS,UAAAtB,CAAC;AAAA,mBAAK;AAAEW,cAAAA,KAAK,EAAEX,CAAC,CAACL,KAAX;AAAkB4B,cAAAA,aAAa,EAAEvB,CAAC,CAACuB;AAAnC,aAAL;AAAA,WAAV;AAVW,SATpB;AAqBA,QAAA,MAAM,EAAE,CAAC9C,aAAD,GAAiBJ,KAAjB,GAAyB,EArBjC;AAsBA,QAAA,SAAS,EAAEH,SAtBX;AAuBA,QAAA,SAAS,EAAE,KAvBX;AAwBA,QAAA,QAAQ,EAAEV,QAAQ,IAAI,KAxBtB;AAyBA,QAAA,EAAE,YAAKZ,EAAL;AAzBF,QAJJ;AAAA,MADF,EAiCGa,uBAAuB,iBACtB,MAAC,cAAD;AAAgB,MAAA,SAAS,EAAEE,IAAI,IAAI,EAAnC;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAE9B,MAAM,CAAC2F;AAA5C,QADF,eAEE;AAAA,kBAAO/D;AAAP,QAFF;AAAA,MAlCJ,EAuCGC,iBAAiB,iBAChB,MAAC,iBAAD;AAAmB,MAAA,SAAS,EAAEC,IAAI,IAAI,EAAtC;AAAA,8BACE,KAAC,WAAD;AAAa,QAAA,IAAI,EAAC,MAAlB;AAAyB,QAAA,KAAK,EAAE9B,MAAM,CAACgF;AAAvC,QADF,eAEE;AAAA,kBAAOnD;AAAP,QAFF;AAAA,MAxCJ;AAAA,IADF;AAgDD,CA7ND;;;AAtBEd,EAAAA,E;AACAC,EAAAA,I;AANA8C,IAAAA,K;AACA4B,IAAAA,a;;AAMAzE,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,kB;AACAC,EAAAA,Q;AACAC,EAAAA,M;AACAE,EAAAA,Q;AACAC,EAAAA,uB;AACAC,EAAAA,iB;AAEAH,EAAAA,U;AACAK,EAAAA,c;AACAC,EAAAA,gB;AACAC,EAAAA,I;AACAC,EAAAA,M;;AAkOF,eAAepB,cAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { Size } from '../types'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\n\nexport interface DropdownFilterItem {\n  label: string;\n  customContent?: React.ReactNode;\n}\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownFilterItem[];\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?: Size.Small | Size.Medium;\n  scrollable?: boolean;\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  scrollable,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = list?.filter((c) => c.label.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0].label);\n          setInput(matches[0].label);\n        }\n        if(!isOpen)\n          setFocused(0);\n        setIsOpen(!isOpen);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        if(!isOpen)\n          setFocused(0);\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.some(x => x.label == 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.some(x => x.label == input))\n      setSelectedValues([]);\n\n    if(list.some(x => x.label == 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        isPlaceholder={!input}\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={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={Size.Small} color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n          isOpen={isOpen}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          selectedValues={selectedValues}\n          setSelectedValues={setSelectedValues}\n          hideOnClickOutside={true}\n          size={size ?? Size.Small}\n          focused={focused}\n          setFocused={setFocused}\n          customizationProps={{\n            itemsType: 'normal',\n            scrollable: scrollable,\n            multiSelect: false,\n            action: () => {},\n            onValueUpdate: (values: string[]) => {\n              const val = values[0] ?? '';\n              setRestartFilter(true);\n              setInput(val);\n            },\n            items: list.map(x => ({ value: x.label, customContent: x.customContent }))\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/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["Container","styled","div","props","getBackgroundColor","variant","IconContainer","COLORS","neutral_600","white","TextContainer","icon","ComponentTextStyle","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,4LAKC,UAAAC,KAAK;AAAA,SAAGC,kBAAkB,CAACD,KAAK,CAACE,OAAP,CAArB;AAAA,CALN,CAAf;;AAQA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,oMAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CANC,CAAnB;;AAUA,IAAMC,aAAa,GAAGT,0BAAOC,GAAV,yKACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CADG,EAGP,UAAAN,KAAK;AAAA,SAAGA,KAAK,CAACQ,IAAN,8BAAH;AAAA,CAHE,EAKf,0BAAmBC,qBAAmBC,IAAtC,EAA4C,IAA5C,CALe,CAAnB;;AAQA,IAAMT,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAAgC;AACzD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOE,SAAOO,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOP,SAAOQ,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOR,SAAOS,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOT,SAAOU,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOV,SAAOW,WAAd;;AAChB;AAAS,aAAOX,SAAOY,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BV,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBN,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,sBAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAAA,eACGM,IAAI,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEN,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJM;AADI,MADX,EAKGU,KAAK,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEhB,OAAxB;AAAiC,MAAA,IAAI,EAAEM,IAAvC;AAAA,gBACLU;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAV,EAAAA,I;AACAN,EAAAA,O,4BALuB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;eAuBxEe,G","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: availableVariants}>`\n  display: flex;\n  height: 24px;\n  width: fit-content;\n  border-radius: 2px;\n  background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: availableVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n    color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  }\n`;\n\nconst TextContainer = styled.div<{variant: availableVariants, icon: React.ReactNode}>`\n  color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: availableVariants) => {\n  switch(variant){\n    case 'positive': return COLORS.correct_500;\n    case 'warning' : return COLORS.warning_500;\n    case 'critical': return COLORS.critical_500;\n    case 'accent1': return COLORS.accent1_500;\n    case 'accent2': return COLORS.accent2_500;\n    default: return COLORS.neutral_100;\n  }\n}\n\ntype availableVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: availableVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n  return (   \n    <Container variant={variant}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;"],"file":"Tag.cjs"}
+{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["Container","styled","div","props","getBackgroundColor","variant","IconContainer","COLORS","neutral_600","white","TextContainer","icon","ComponentTextStyle","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,4LAKC,UAAAC,KAAK;AAAA,SAAGC,kBAAkB,CAACD,KAAK,CAACE,OAAP,CAArB;AAAA,CALN,CAAf;;AAQA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,oMAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CANC,CAAnB;;AAUA,IAAMC,aAAa,GAAGT,0BAAOC,GAAV,yKACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CADG,EAGP,UAAAN,KAAK;AAAA,SAAGA,KAAK,CAACQ,IAAN,8BAAH;AAAA,CAHE,EAKf,0BAAmBC,qBAAmBC,IAAtC,EAA4C,IAA5C,CALe,CAAnB;;AAQA,IAAMT,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAA0B;AACnD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOE,SAAOO,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOP,SAAOQ,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOR,SAAOS,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOT,SAAOU,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOV,SAAOW,WAAd;;AAChB;AAAS,aAAOX,SAAOY,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BV,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBN,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,sBAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAAA,eACGM,IAAI,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEN,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJM;AADI,MADX,EAKGU,KAAK,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEhB,OAAxB;AAAiC,MAAA,IAAI,EAAEM,IAAvC;AAAA,gBACLU;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAV,EAAAA,I;AACAN,EAAAA,O,4BALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;eAuBzEe,G","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants}>`\n  display: flex;\n  height: 24px;\n  width: fit-content;\n  border-radius: 2px;\n  background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n    color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: TagVariants) => {\n  switch(variant){\n    case 'positive': return COLORS.correct_500;\n    case 'warning' : return COLORS.warning_500;\n    case 'critical': return COLORS.critical_500;\n    case 'accent1': return COLORS.accent1_500;\n    case 'accent2': return COLORS.accent2_500;\n    default: return COLORS.neutral_100;\n  }\n}\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n  return (   \n    <Container variant={variant}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;"],"file":"Tag.cjs"}

package/dist/Tag/Tag.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-declare type availableVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
+export declare type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
 declare type TagProps = {
     label?: string;
     icon?: React.ReactNode;
-    variant?: availableVariants;
+    variant?: TagVariants;
 };
 declare const Tag: React.FunctionComponent<TagProps>;
 export default Tag;

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","getBackgroundColor","variant","IconContainer","neutral_600","white","TextContainer","icon","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,kBAArC,QAA+D,IAA/D;;;AAEA,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAV,8KAKC,UAAAC,KAAK;AAAA,SAAGC,kBAAkB,CAACD,KAAK,CAACE,OAAP,CAArB;AAAA,CALN,CAAf;AAQA,IAAMC,aAAa,GAAGT,MAAM,CAACK,GAAV,sLAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BP,MAAM,CAACS,WAArC,GAAmDT,MAAM,CAACU,KAA7D;AAAA,CANC,CAAnB;AAUA,IAAMC,aAAa,GAAGZ,MAAM,CAACK,GAAV,2JACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BP,MAAM,CAACS,WAArC,GAAmDT,MAAM,CAACU,KAA7D;AAAA,CADG,EAGP,UAAAL,KAAK;AAAA,SAAGA,KAAK,CAACO,IAAN,8BAAH;AAAA,CAHE,EAKfV,kBAAkB,CAACD,kBAAkB,CAACY,IAApB,EAA0B,IAA1B,CALH,CAAnB;;AAQA,IAAMP,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAAgC;AACzD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOP,MAAM,CAACc,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOd,MAAM,CAACe,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOf,MAAM,CAACgB,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOhB,MAAM,CAACiB,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOjB,MAAM,CAACkB,WAAd;;AAChB;AAAS,aAAOlB,MAAM,CAACmB,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BT,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBL,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,MAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAAA,eACGK,IAAI,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEL,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJK;AADI,MADX,EAKGS,KAAK,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEd,OAAxB;AAAiC,MAAA,IAAI,EAAEK,IAAvC;AAAA,gBACLS;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAT,EAAAA,I;AACAL,EAAAA,O,aALuB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;AAuBvF,eAAea,GAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: availableVariants}>`\n  display: flex;\n  height: 24px;\n  width: fit-content;\n  border-radius: 2px;\n  background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: availableVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n    color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  }\n`;\n\nconst TextContainer = styled.div<{variant: availableVariants, icon: React.ReactNode}>`\n  color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: availableVariants) => {\n  switch(variant){\n    case 'positive': return COLORS.correct_500;\n    case 'warning' : return COLORS.warning_500;\n    case 'critical': return COLORS.critical_500;\n    case 'accent1': return COLORS.accent1_500;\n    case 'accent2': return COLORS.accent2_500;\n    default: return COLORS.neutral_100;\n  }\n}\n\ntype availableVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: availableVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n  return (   \n    <Container variant={variant}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;"],"file":"Tag.js"}
+{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","getBackgroundColor","variant","IconContainer","neutral_600","white","TextContainer","icon","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,kBAArC,QAA+D,IAA/D;;;AAEA,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAV,8KAKC,UAAAC,KAAK;AAAA,SAAGC,kBAAkB,CAACD,KAAK,CAACE,OAAP,CAArB;AAAA,CALN,CAAf;AAQA,IAAMC,aAAa,GAAGT,MAAM,CAACK,GAAV,sLAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BP,MAAM,CAACS,WAArC,GAAmDT,MAAM,CAACU,KAA7D;AAAA,CANC,CAAnB;AAUA,IAAMC,aAAa,GAAGZ,MAAM,CAACK,GAAV,2JACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BP,MAAM,CAACS,WAArC,GAAmDT,MAAM,CAACU,KAA7D;AAAA,CADG,EAGP,UAAAL,KAAK;AAAA,SAAGA,KAAK,CAACO,IAAN,8BAAH;AAAA,CAHE,EAKfV,kBAAkB,CAACD,kBAAkB,CAACY,IAApB,EAA0B,IAA1B,CALH,CAAnB;;AAQA,IAAMP,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAA0B;AACnD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOP,MAAM,CAACc,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOd,MAAM,CAACe,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOf,MAAM,CAACgB,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOhB,MAAM,CAACiB,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOjB,MAAM,CAACkB,WAAd;;AAChB;AAAS,aAAOlB,MAAM,CAACmB,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BT,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBL,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,MAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAAA,eACGK,IAAI,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEL,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJK;AADI,MADX,EAKGS,KAAK,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEd,OAAxB;AAAiC,MAAA,IAAI,EAAEK,IAAvC;AAAA,gBACLS;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAT,EAAAA,I;AACAL,EAAAA,O,aALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;AAuBxF,eAAea,GAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants}>`\n  display: flex;\n  height: 24px;\n  width: fit-content;\n  border-radius: 2px;\n  background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n    color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: TagVariants) => {\n  switch(variant){\n    case 'positive': return COLORS.correct_500;\n    case 'warning' : return COLORS.warning_500;\n    case 'critical': return COLORS.critical_500;\n    case 'accent1': return COLORS.accent1_500;\n    case 'accent2': return COLORS.accent2_500;\n    default: return COLORS.neutral_100;\n  }\n}\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n  return (   \n    <Container variant={variant}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;"],"file":"Tag.js"}

package/dist/Tag/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tag/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Tag } from './Tag';"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/Tag/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Tag } from './Tag';\nexport type { TagVariants } from './Tag';"],"file":"index.cjs"}

package/dist/Tag/index.d.ts

@@ -1 +1,2 @@
 export { default as Tag } from './Tag';
+export type { TagVariants } from './Tag';

package/dist/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tag/index.ts"],"names":["default","Tag"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAApB,QAA+B,OAA/B","sourcesContent":["export { default as Tag } from './Tag';"],"file":"index.js"}
+{"version":3,"sources":["../../src/Tag/index.ts"],"names":["default","Tag"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAApB,QAA+B,OAA/B","sourcesContent":["export { default as Tag } from './Tag';\nexport type { TagVariants } from './Tag';"],"file":"index.js"}

package/dist/common/InputStyling.cjs

@@ -15,6 +15,6 @@ var _styles = require("../styles");
 
 var _templateObject;
 
-var CommonInteractionStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &:focus, &.focus-state, &.focus-visible {\n    background-color: ", ";\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover, &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active, &.active-state {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled, &.disabled-state {\n    box-shadow: none;\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.white);
+var CommonInteractionStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &:focus, &.focus-state {\n    background-color: ", ";\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover, &.hover-state {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active, &.active-state {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled, &.disabled-state {\n    box-shadow: none;\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.white);
 exports.CommonInteractionStyling = CommonInteractionStyling;
 //# sourceMappingURL=InputStyling.cjs.map