@laerdal/life-react-components 1.8.0-dev.2 → 1.8.0-dev.4

package/dist/Dropdown/DropdownButton.js

@@ -1,5 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value"];
 
 var _templateObject;
 
@@ -18,7 +20,9 @@ import styled from 'styled-components';
  * Import custom types.
  */
 
-import { useClickOutsideRef, useFocusOutsideRef } from '../common';
+import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef } from '../common';
+import { TextButtonDropdownArrow, TextButtonDropdownContent, TextButtonDropdownIcon, TextButtonDropdownText, TextButtonDropdownWrapper } from './CommonStyling';
+import { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n"])));
@@ -36,8 +40,8 @@ var DropdownButton = function DropdownButton(_ref) {
       actionVariant = _ref.actionVariant,
       actionIcon = _ref.actionIcon,
       actionLoading = _ref.actionLoading,
-      width = _ref.width,
       size = _ref.size,
+      width = _ref.width,
       alignLeft = _ref.alignLeft,
       _ref$multiSelect = _ref.multiSelect,
       multiSelect = _ref$multiSelect === void 0 ? false : _ref$multiSelect,
@@ -46,7 +50,9 @@ var DropdownButton = function DropdownButton(_ref) {
       _ref$pinTopItem = _ref.pinTopItem,
       pinTopItem = _ref$pinTopItem === void 0 ? false : _ref$pinTopItem,
       maxHeight = _ref.maxHeight,
-      className = _ref.className;
+      className = _ref.className,
+      value = _ref.value,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   // Globally used variables within the view.
   var _React$useState = React.useState(false),
@@ -77,6 +83,12 @@ var DropdownButton = function DropdownButton(_ref) {
   React.useEffect(function () {
     !dropdownOpen && setKeyboardNavigated(false);
   }, [dropdownOpen]);
+  React.useEffect(function () {
+    disabled && setDropdownOpen(false);
+  }, [disabled]);
+  React.useEffect(function () {
+    setSelectedValues(value || []);
+  }, [value]);
 
   var handleValueSelect = function handleValueSelect(values) {
     // Do all required actions
@@ -88,26 +100,68 @@ var DropdownButton = function DropdownButton(_ref) {
    */
 
 
-  var renderIconButton = function renderIconButton() {
-    return /*#__PURE__*/_jsx(IconButton, {
-      variant: "secondary",
-      shape: "circular",
-      action: function action(event) {
-        setDropdownOpen(!dropdownOpen);
-
-        if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
-          setKeyboardNavigated(true);
-        }
-      },
-      disabled: disabled,
-      children: icon
-    });
+  var renderButton = function renderButton() {
+    switch (rest.type) {
+      case 'icon':
+        return /*#__PURE__*/_jsx(IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: function action(event) {
+            setDropdownOpen(!dropdownOpen);
+
+            if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
+              setKeyboardNavigated(true);
+            }
+          },
+          disabled: disabled,
+          children: icon
+        });
+
+      case 'text':
+        var label = rest.keepLabel || !(selectedValues !== null && selectedValues !== void 0 && selectedValues.length) ? rest.label : items.filter(function (a) {
+          return selectedValues.includes(a.value);
+        }).map(function (a) {
+          var _a$displayLabel;
+
+          return (_a$displayLabel = a.displayLabel) !== null && _a$displayLabel !== void 0 ? _a$displayLabel : a.value;
+        }).join(', ');
+        var cls = "".concat(disabled && 'disabled', " ").concat(dropdownOpen && 'expanded', " ").concat(className);
+        return /*#__PURE__*/_jsx(TextButtonDropdownWrapper, {
+          tabIndex: !disabled ? 0 : -1,
+          className: cls,
+          onMouseDown: defaultOnMouseDownHandler,
+          onKeyDown: function onKeyDown(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              e.stopPropagation();
+              setDropdownOpen(!dropdownOpen);
+              setKeyboardNavigated(true);
+            }
+          },
+          onClick: function onClick() {
+            return !disabled && setDropdownOpen(!dropdownOpen);
+          },
+          children: /*#__PURE__*/_jsxs(TextButtonDropdownContent, {
+            children: [icon && /*#__PURE__*/_jsx(TextButtonDropdownIcon, {
+              children: icon
+            }), /*#__PURE__*/_jsx(TextButtonDropdownText, {
+              children: label
+            }), /*#__PURE__*/_jsx(TextButtonDropdownArrow, {
+              children: dropdownOpen ? /*#__PURE__*/_jsx(ArrowDropUp, {
+                size: "24px"
+              }) : /*#__PURE__*/_jsx(ArrowDropDown, {
+                size: "24px"
+              })
+            })]
+          })
+        });
+    }
   };
 
   return /*#__PURE__*/_jsxs(Wrapper, {
     className: className,
     ref: containerRef,
-    children: [renderIconButton(), /*#__PURE__*/_jsx(DropdownContent, {
+    children: [renderButton(), /*#__PURE__*/_jsx(DropdownContent, {
       customizationProps: {
         itemsType: itemsType,
         action: action !== null && action !== void 0 ? action : function () {},
@@ -131,7 +185,7 @@ var DropdownButton = function DropdownButton(_ref) {
       setIsOpen: setDropdownOpen,
       outline: keyboardNavigated,
       filter: "",
-      selectedValues: itemsType == 'normal' ? [] : selectedValues,
+      selectedValues: rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues,
       setSelectedValues: setSelectedValues,
       messageOnNoResults: "No results",
       isButton: true,

package/dist/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderIconButton","event","detail","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          width,\n                          size,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className\n                        }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  action={(event: any) => {\n                    setDropdownOpen(!dropdownOpen);\n                    if (event?.detail !== 1) {\n                      setKeyboardNavigated(true);\n                    }\n                  }}\n                  disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}
+{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","defaultOnMouseDownHandler","useClickOutsideRef","useFocusOutsideRef","TextButtonDropdownArrow","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownText","TextButtonDropdownWrapper","ArrowDropDown","ArrowDropUp","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","e","key","preventDefault","stopPropagation","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          ...rest\n                        }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}

package/dist/Dropdown/DropdownButtonTypes.d.ts

@@ -1,10 +1,9 @@
 import { Size } from '../types';
 import { DropdownItem } from './DropdownContent';
-export interface DropdownButtonProps {
+export interface DropdownButtonBaseProps {
     items: DropdownItem[];
+    value?: string[];
     onClick: (value: string[]) => void;
-    icon?: React.ReactNode;
-    width?: string;
     disabled?: boolean;
     size?: Size;
     itemsType?: 'normal' | 'radio' | 'checkbox';
@@ -15,8 +14,20 @@ export interface DropdownButtonProps {
     actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
     multiSelect?: boolean;
     scrollable?: boolean;
-    pinTopItem?: boolean;
-    alignLeft?: boolean;
     maxHeight?: string;
+    pinTopItem?: boolean;
     className?: string;
+    icon?: React.ReactNode;
+    width?: string;
+    alignLeft?: boolean;
 }
+export declare type IconDropdownButtonProps = DropdownButtonBaseProps & {
+    type: 'icon';
+    icon: React.ReactNode;
+};
+export declare type TextDropdownButtonProps = DropdownButtonBaseProps & {
+    type: 'text';
+    label?: string;
+    keepLabel?: boolean;
+};
+export declare type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;

package/dist/Dropdown/DropdownFilter.cjs

@@ -47,47 +47,45 @@ var DropdownFilter = function DropdownFilter(_ref) {
       placeholder = _ref.placeholder,
       onSelect = _ref.onSelect,
       onInputChange = _ref.onInputChange,
-      initalValue = _ref.initalValue,
+      value = _ref.value,
       required = _ref.required,
-      disableSorting = _ref.disableSorting,
       messageOnNoResults = _ref.messageOnNoResults,
       disabled = _ref.disabled,
       locked = _ref.locked,
       scrollable = _ref.scrollable,
-      isButton = _ref.isButton,
       activeValidationMessage = _ref.activeValidationMessage,
       autofilledMessage = _ref.autofilledMessage,
       size = _ref.size,
+      disableFiltering = _ref.disableFiltering,
       buttonFontSize = _ref.buttonFontSize,
-      keepInitialValue = _ref.keepInitialValue,
-      icon = _ref.icon,
       _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin;
+      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+      loading = _ref.loading;
 
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  var _React$useState3 = React.useState(false),
+  var _React$useState3 = React.useState(value !== null && value !== void 0 ? value : ''),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      isLoading = _React$useState4[0],
-      setIsLoading = _React$useState4[1];
+      input = _React$useState4[0],
+      setInput = _React$useState4[1];
 
-  var _React$useState5 = React.useState(initalValue !== null && initalValue !== void 0 ? initalValue : ''),
+  var _React$useState5 = React.useState(placeholder || ''),
       _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      input = _React$useState6[0],
-      setInput = _React$useState6[1];
+      placeholderSearch = _React$useState6[0],
+      setPlaceholderSearch = _React$useState6[1];
 
-  var _React$useState7 = React.useState(placeholder || ''),
+  var _React$useState7 = React.useState(false),
       _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      placeholderSearch = _React$useState8[0],
-      setPlaceholderSearch = _React$useState8[1];
+      restartFilter = _React$useState8[0],
+      setRestartFilter = _React$useState8[1];
 
-  var _React$useState9 = React.useState(false),
+  var _React$useState9 = React.useState(),
       _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      restartFilter = _React$useState10[0],
-      setRestartFilter = _React$useState10[1];
+      selectedItem = _React$useState10[0],
+      setSelectedItem = _React$useState10[1];
 
   var _React$useState11 = React.useState([]),
       _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
@@ -99,11 +97,6 @@ var DropdownFilter = function DropdownFilter(_ref) {
       focused = _React$useState14[0],
       setFocused = _React$useState14[1];
 
-  var _React$useState15 = React.useState(false),
-      _React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
-      keyboardNavigate = _React$useState16[0],
-      setKeyboardNavigate = _React$useState16[1];
-
   var styledFieldRef = (0, _common.useFocusVisibleRef)();
   var inputRef = (0, _common.useFocusVisibleRef)([styledFieldRef]);
   var clearButtonRef = React.useRef(null);
@@ -115,6 +108,10 @@ var DropdownFilter = function DropdownFilter(_ref) {
   }));
 
   var handleInputKeyDown = function handleInputKeyDown(e) {
+    if (e.key === 'Esc' || e.key === 'Escape') {
+      e.preventDefault();
+    }
+
     if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {
       e.preventDefault();
 
@@ -124,55 +121,35 @@ var DropdownFilter = function DropdownFilter(_ref) {
     }
   };
 
-  var handleButtonKeyPress = function handleButtonKeyPress(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      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);
-      }
-
-      setIsOpen(!isOpen);
-      setKeyboardNavigate(true);
-
-      if (matches.length === 0) {
-        setInput('');
-      }
-    }
-  };
-
   React.useEffect(function () {
-    if (initalValue || initalValue === '') {
-      setInput(initalValue);
-      setRestartFilter(true);
-    }
-  }, [initalValue]);
+    setSelectedValues(!!value ? [value] : []);
+  }, [value]);
   React.useEffect(function () {
-    if (!isOpen && !list.some(function (x) {
-      return x.label == input;
-    })) {
+    if (selectedValues !== null && selectedValues !== void 0 && selectedValues.length) {
+      var _selectedValues$, _ref2, _item$displayLabel;
+
+      var val = (_selectedValues$ = selectedValues[0]) !== null && _selectedValues$ !== void 0 ? _selectedValues$ : '';
+      var item = list.find(function (a) {
+        return a.value === val;
+      });
+      setSelectedItem(item);
+      setInput((_ref2 = (_item$displayLabel = item === null || item === void 0 ? void 0 : item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item === null || item === void 0 ? void 0 : item.value) !== null && _ref2 !== void 0 ? _ref2 : '');
+    } else {
+      setSelectedItem(undefined);
       setInput('');
-      setPlaceholderSearch(placeholder || '');
     }
-  }, [isOpen]);
+  }, [selectedValues]);
   React.useEffect(function () {
-    setIsLoading(false);
-    if (selectedValues.length > 0 && !list.some(function (x) {
-      return x.label == input;
-    })) setSelectedValues([]);
-
-    if (list.some(function (x) {
-      return x.label == input;
-    })) {
-      setSelectedValues([input]);
-      onSelect && onSelect(input);
+    if (!isOpen) {
+      if (!input) {
+        setSelectedValues([]);
+        setPlaceholderSearch(placeholder || '');
+      } else if (!!selectedItem) {
+        var _ref3, _selectedItem$display;
+
+        setInput((_ref3 = (_selectedItem$display = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.displayLabel) !== null && _selectedItem$display !== void 0 ? _selectedItem$display : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) !== null && _ref3 !== void 0 ? _ref3 : '');
+      }
     }
-  }, [input]);
-  React.useEffect(function () {
-    !isOpen && setKeyboardNavigate(false);
   }, [isOpen]);
 
   var handleInputClear = function handleInputClear(e) {
@@ -186,7 +163,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
     });
   };
 
-  var renderStandardDropdown = function renderStandardDropdown() {
+  var renderInput = function renderInput() {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.StyledField, {
       ref: styledFieldRef,
       className: size ? size : '',
@@ -214,6 +191,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
       onMouseDown: _common.defaultOnMouseDownHandler,
       "data-testid": "otherdiv_".concat(id),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, {
+        id: id,
         ref: inputRef,
         autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
         type: "search",
@@ -223,7 +201,6 @@ var DropdownFilter = function DropdownFilter(_ref) {
         onChange: function onChange(e) {
           if (!locked && !disabled) {
             setRestartFilter(false);
-            setIsLoading(true);
             setIsOpen(true);
             setInput(e.target.value);
 
@@ -241,7 +218,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
         required: required,
         tabIndex: disabled || locked ? -1 : 0,
         disabled: disabled || false
-      }), input && !locked && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      }), input && !locked && !disabled && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
         action: handleInputClear,
         ref: clearButtonRef,
         useTransparentBackground: true,
@@ -251,10 +228,15 @@ var DropdownFilter = function DropdownFilter(_ref) {
         },
         variant: 'secondary',
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Clear, {})
-      }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
-        size: _types.Size.Small,
-        color: _styles.COLORS.neutral_600
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), !disabled && !locked && loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginLeft: '-4xp'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
+          size: _types.Size.Small,
+          color: _styles.COLORS.neutral_600
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: 'dropdown-arrow',
         children: isOpen && !locked && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
           size: "24px",
@@ -267,84 +249,37 @@ var DropdownFilter = function DropdownFilter(_ref) {
     });
   };
 
-  var renderButtonDropdown = function renderButtonDropdown() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.ButtonDropdownWrapper, {
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        !locked && !disabled && setIsOpen(!isOpen);
-      },
-      disabled: disabled,
-      locked: locked,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.StyledField, {
-        ref: styledFieldRef,
-        className: (isOpen ? 'expanded ' : '').concat(size ? size + ' ' : '').concat(isButton ? 'button' : ''),
-        tabIndex: disabled || locked ? -1 : 0,
-        onKeyPress: handleButtonKeyPress,
-        onMouseDown: _common.defaultOnMouseDownHandler,
-        disabled: disabled || false,
-        locked: locked || false,
-        showValidationMessage: !!activeValidationMessage,
-        fontSize: buttonFontSize,
-        children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: 'value',
-          children: initalValue && keepInitialValue ? initalValue : input || placeholderSearch
-        }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
-          size: _types.Size.Small,
-          color: _styles.COLORS.neutral_600
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: 'dropdown-arrow',
-          children: isOpen && !locked && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
-            size: "24px",
-            className: size ? size : ''
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropDown, {
-            size: "24px",
-            className: size ? size : ''
-          })
-        })]
-      })
-    });
-  };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.Dropdown, {
       ref: containerRef,
-      isButton: isButton || false,
       disabled: disabled,
+      isButton: false,
       locked: locked,
       className: size ? size : '',
       margin: margin,
-      children: [!isButton && renderStandardDropdown(), !!isButton && renderButtonDropdown(), !locked && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
-        isOpen: isOpen,
+      children: [renderInput(), !locked && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
+        isOpen: isOpen && !loading,
         messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
         selectedValues: selectedValues,
         setSelectedValues: setSelectedValues,
         size: size !== null && size !== void 0 ? size : _types.Size.Small,
         focused: focused,
         setFocused: setFocused,
-        outline: keyboardNavigate && isButton,
+        outline: false,
         customizationProps: {
           itemsType: 'normal',
           scrollable: scrollable,
           multiSelect: false,
           action: function action() {},
           onValueUpdate: function onValueUpdate(values) {
-            var _values$;
-
-            var val = (_values$ = values[0]) !== null && _values$ !== void 0 ? _values$ : '';
             setRestartFilter(true);
-            setInput(val);
           },
-          items: list.map(function (x) {
-            return {
-              value: x.label,
-              customContent: x.customContent
-            };
-          })
+          items: list
         },
-        filter: !restartFilter ? input : '',
+        filter: !disableFiltering && !restartFilter ? input : '',
         setIsOpen: setIsOpen,
         alignLeft: false,
-        isButton: isButton || false,
+        isButton: false,
         id: "".concat(id, "_dropdowncontent")
       })]
     }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
@@ -369,27 +304,22 @@ var DropdownFilter = function DropdownFilter(_ref) {
 
 DropdownFilter.propTypes = {
   id: _propTypes.default.string.isRequired,
-  list: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string.isRequired,
-    customContent: _propTypes.default.node
-  })).isRequired,
+  list: _propTypes.default.array.isRequired,
   placeholder: _propTypes.default.string,
+  value: _propTypes.default.string,
   onSelect: _propTypes.default.func,
   onInputChange: _propTypes.default.func,
-  initalValue: _propTypes.default.string,
   required: _propTypes.default.bool,
-  disableSorting: _propTypes.default.bool,
-  messageOnNoResults: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   locked: _propTypes.default.bool,
-  isButton: _propTypes.default.bool,
+  disableFiltering: _propTypes.default.bool,
+  messageOnNoResults: _propTypes.default.string,
   activeValidationMessage: _propTypes.default.string,
   autofilledMessage: _propTypes.default.string,
-  scrollable: _propTypes.default.bool,
   buttonFontSize: _propTypes.default.string,
-  keepInitialValue: _propTypes.default.bool,
-  icon: _propTypes.default.node,
-  margin: _propTypes.default.string
+  margin: _propTypes.default.string,
+  scrollable: _propTypes.default.bool,
+  loading: _propTypes.default.bool
 };
 var _default = DropdownFilter;
 exports.default = _default;