@entur/dropdown 7.3.2-beta.3 → 7.3.2-beta.5

package/dist/dropdown.esm.js

@@ -1,382 +1,678 @@
-import { useDebounce, mergeRefs, useRandomId, warnAboutMissingStyles } from "@entur/utils";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, createElement, useState, useRef, useEffect, useCallback } from "react";
-import { useCombobox, useMultipleSelection, useSelect } from "downshift";
-import classNames from "classnames";
-import { useFloating, offset, shift, size, flip, autoUpdate } from "@floating-ui/react-dom";
-import { Checkbox, BaseFormControl } from "@entur/form";
-import { space } from "@entur/tokens";
-import { VisuallyHidden } from "@entur/a11y";
-import { IconButton } from "@entur/button";
-import { TagChip } from "@entur/chip";
-import { DownArrowIcon, CloseSmallIcon } from "@entur/icons";
-import { LoadingDots } from "@entur/loader";
-import { Tooltip } from "@entur/tooltip";
-const DropdownList = ({
-  ariaLabelChosenSingular = "valgt",
-  ariaLabelSelectedItem = ", valgt element, trykk for å fjerne",
-  getItemProps,
-  getMenuProps,
-  isOpen,
-  highlightedIndex,
-  listItems,
-  floatingStyles,
-  setListRef,
-  loading = false,
-  loadingText = "Laster inn …",
-  noMatchesText = "Ingen treff for søket",
-  selectAllCheckboxState,
-  selectAllItem,
-  selectedItems,
-  readOnly = false,
-  ...rest
-}) => {
-  const isMultiselect = selectAllItem !== void 0;
-  const isNoMatches = !loading && (listItems.length === 0 || listItems?.length === 1 && listItems?.[0]?.value === selectAllItem?.value);
-  const isItemSelected = (item) => selectedItems.some(
-    (selectedItem) => selectedItem?.value === item?.value && selectedItem?.label === item?.label
-  );
-  const ariaValuesSelectAll = () => {
-    switch (selectAllCheckboxState?.()) {
-      case "indeterminate": {
-        return {
-          label: `${selectAllItem?.label}, delvis valgt`,
-          selected: false
+import { useDebounce, mergeRefs, useRandomId, warnAboutMissingStyles } from '@entur/utils';
+import React, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
+import { useCombobox, useMultipleSelection, useSelect } from 'downshift';
+import classNames from 'classnames';
+import { useFloating, offset, shift, size, flip, autoUpdate } from '@floating-ui/react-dom';
+import { Checkbox, BaseFormControl } from '@entur/form';
+import { space } from '@entur/tokens';
+import { VisuallyHidden } from '@entur/a11y';
+import { IconButton } from '@entur/button';
+import { TagChip } from '@entur/chip';
+import { DownArrowIcon, CloseSmallIcon } from '@entur/icons';
+import { LoadingDots } from '@entur/loader';
+import { Tooltip } from '@entur/tooltip';
+
+function _OverloadYield(e, d) {
+  this.v = e, this.k = d;
+}
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = !1,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
         };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = !0, n;
       }
-      case true: {
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
         return {
-          label: `${selectAllItem?.label}, ${ariaLabelChosenSingular}`,
-          selected: true
+          value: t,
+          done: y
         };
-      }
-      default: {
-        return { label: `${selectAllItem?.label}`, selected: false };
-      }
+      };
+    }(r, o, i), !0), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorAsync(n, e, r, t, o) {
+  var a = _regeneratorAsyncGen(n, e, r, t, o);
+  return a.next().then(function (n) {
+    return n.done ? n.value : a.next();
+  });
+}
+function _regeneratorAsyncGen(r, e, t, o, n) {
+  return new _regeneratorAsyncIterator(_regenerator().w(r, e, t, o), n || Promise);
+}
+function _regeneratorAsyncIterator(t, e) {
+  function n(r, o, i, f) {
+    try {
+      var c = t[r](o),
+        u = c.value;
+      return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) {
+        n("next", t, i, f);
+      }, function (t) {
+        n("throw", t, i, f);
+      }) : e.resolve(u).then(function (t) {
+        c.value = t, i(c);
+      }, function (t) {
+        return n("throw", t, i, f);
+      });
+    } catch (t) {
+      f(t);
+    }
+  }
+  var r;
+  this.next || (_regeneratorDefine(_regeneratorAsyncIterator.prototype), _regeneratorDefine(_regeneratorAsyncIterator.prototype, "function" == typeof Symbol && Symbol.asyncIterator || "@asyncIterator", function () {
+    return this;
+  })), _regeneratorDefine(this, "_invoke", function (t, o, i) {
+    function f() {
+      return new e(function (e, r) {
+        n(t, i, e, r);
+      });
+    }
+    return r = r ? r.then(f, f) : f();
+  }, !0);
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
     }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
+function _regeneratorKeys(e) {
+  var n = Object(e),
+    r = [];
+  for (var t in n) r.unshift(t);
+  return function e() {
+    for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e;
+    return e.done = !0, e;
   };
-  const selectAllListItemContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        "aria-hidden": "true",
-        checked: selectAllCheckboxState?.(),
-        className: "eds-dropdown__list__item__checkbox",
-        tabIndex: -1,
-        onChange: () => void 0
+}
+function _regeneratorValues(e) {
+  if (null != e) {
+    var t = e["function" == typeof Symbol && Symbol.iterator || "@@iterator"],
+      r = 0;
+    if (t) return t.call(e);
+    if ("function" == typeof e.next) return e;
+    if (!isNaN(e.length)) return {
+      next: function () {
+        return e && r >= e.length && (e = void 0), {
+          value: e && e[r++],
+          done: !e
+        };
       }
-    ),
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "eds-dropdown__list__item__text",
-        "aria-label": ariaValuesSelectAll().label,
-        children: selectAllItem?.label
+    };
+  }
+  throw new TypeError(typeof e + " is not iterable");
+}
+function _regeneratorRuntime() {
+
+  var r = _regenerator(),
+    e = r.m(_regeneratorRuntime),
+    t = (Object.getPrototypeOf ? Object.getPrototypeOf(e) : e.__proto__).constructor;
+  function n(r) {
+    var e = "function" == typeof r && r.constructor;
+    return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name));
+  }
+  var o = {
+    throw: 1,
+    return: 2,
+    break: 3,
+    continue: 3
+  };
+  function a(r) {
+    var e, t;
+    return function (n) {
+      e || (e = {
+        stop: function () {
+          return t(n.a, 2);
+        },
+        catch: function () {
+          return n.v;
+        },
+        abrupt: function (r, e) {
+          return t(n.a, o[r], e);
+        },
+        delegateYield: function (r, o, a) {
+          return e.resultName = o, t(n.d, _regeneratorValues(r), a);
+        },
+        finish: function (r) {
+          return t(n.f, r);
+        }
+      }, t = function (r, t, o) {
+        n.p = e.prev, n.n = e.next;
+        try {
+          return r(t, o);
+        } finally {
+          e.next = n.n;
+        }
+      }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n;
+      try {
+        return r.call(this, e);
+      } finally {
+        n.p = e.prev, n.n = e.next;
       }
-    )
-  ] });
-  const isReactComponent = (icon) => {
-    return typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon && typeof icon.$$typeof === "symbol";
+    };
+  }
+  return (_regeneratorRuntime = function () {
+    return {
+      wrap: function (e, t, n, o) {
+        return r.w(a(e), t, n, o && o.reverse());
+      },
+      isGeneratorFunction: n,
+      mark: r.m,
+      awrap: function (r, e) {
+        return new _OverloadYield(r, e);
+      },
+      AsyncIterator: _regeneratorAsyncIterator,
+      async: function (r, e, t, o, u) {
+        return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u);
+      },
+      keys: _regeneratorKeys,
+      values: _regeneratorValues
+    };
+  })();
+}
+
+var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "isOpen", "highlightedIndex", "listItems", "floatingStyles", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "readOnly"];
+var DropdownList = function DropdownList(_ref) {
+  var _listItems$;
+  var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
+    ariaLabelChosenSingular = _ref$ariaLabelChosenS === void 0 ? 'valgt' : _ref$ariaLabelChosenS,
+    _ref$ariaLabelSelecte = _ref.ariaLabelSelectedItem,
+    ariaLabelSelectedItem = _ref$ariaLabelSelecte === void 0 ? ', valgt element, trykk for å fjerne' : _ref$ariaLabelSelecte,
+    getItemProps = _ref.getItemProps,
+    getMenuProps = _ref.getMenuProps,
+    isOpen = _ref.isOpen,
+    highlightedIndex = _ref.highlightedIndex,
+    listItems = _ref.listItems,
+    floatingStyles = _ref.floatingStyles,
+    setListRef = _ref.setListRef,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? 'Laster inn …' : _ref$loadingText,
+    _ref$noMatchesText = _ref.noMatchesText,
+    noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen treff for søket' : _ref$noMatchesText,
+    selectAllCheckboxState = _ref.selectAllCheckboxState,
+    selectAllItem = _ref.selectAllItem,
+    selectedItems = _ref.selectedItems,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  var isMultiselect = selectAllItem !== undefined;
+  var isNoMatches = !loading && (listItems.length === 0 || (listItems == null ? void 0 : listItems.length) === 1 && (listItems == null || (_listItems$ = listItems[0]) == null ? void 0 : _listItems$.value) === (selectAllItem == null ? void 0 : selectAllItem.value));
+  var isItemSelected = function isItemSelected(item) {
+    return selectedItems.some(function (selectedItem) {
+      return (selectedItem == null ? void 0 : selectedItem.value) === (item == null ? void 0 : item.value) && (selectedItem == null ? void 0 : selectedItem.label) === (item == null ? void 0 : item.label);
+    });
   };
-  const listItemContent = (item) => {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      isMultiselect && /* @__PURE__ */ jsx(
-        Checkbox,
+  var ariaValuesSelectAll = function ariaValuesSelectAll() {
+    switch (selectAllCheckboxState == null ? void 0 : selectAllCheckboxState()) {
+      case 'indeterminate':
+        {
+          return {
+            label: (selectAllItem == null ? void 0 : selectAllItem.label) + ", delvis valgt",
+            selected: false
+          };
+        }
+      case true:
         {
-          "aria-hidden": "true",
-          checked: isItemSelected(item),
-          className: "eds-dropdown__list__item__checkbox",
-          tabIndex: -1,
-          onChange: () => void 0
+          return {
+            label: (selectAllItem == null ? void 0 : selectAllItem.label) + ", " + ariaLabelChosenSingular,
+            selected: true
+          };
         }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: "eds-dropdown__list__item__text", children: [
-        item.label,
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: isItemSelected(item) ? ariaLabelSelectedItem : "" })
-      ] }),
-      Array.isArray(item.icons) ? item.icons.filter(isReactComponent).map((Icon, index) => {
-        const key = `${Icon.displayName ?? Icon.name ?? Icon.name}-${index}`;
-        return /* @__PURE__ */ jsx(
-          Icon,
-          {
-            inline: true,
-            className: "eds-dropdown__list__item__icon"
-          },
-          key
-        );
-      }) : null
-    ] });
+      default:
+        {
+          return {
+            label: "" + (selectAllItem == null ? void 0 : selectAllItem.label),
+            selected: false
+          };
+        }
+    }
+  };
+  var selectAllListItemContent = function selectAllListItemContent() {
+    return React.createElement(React.Fragment, null, React.createElement(Checkbox, {
+      "aria-hidden": "true",
+      checked: selectAllCheckboxState == null ? void 0 : selectAllCheckboxState(),
+      className: "eds-dropdown__list__item__checkbox",
+      tabIndex: -1,
+      onChange: function onChange() {
+        return undefined;
+      }
+    }), React.createElement("span", {
+      className: "eds-dropdown__list__item__text",
+      "aria-label": ariaValuesSelectAll().label
+    }, selectAllItem == null ? void 0 : selectAllItem.label));
+  };
+  var isReactComponent = function isReactComponent(icon) {
+    return typeof icon === 'function' || typeof icon === 'object' && icon !== null && '$$typeof' in icon && typeof icon.$$typeof === 'symbol';
+  };
+  var listItemContent = function listItemContent(item) {
+    return React.createElement(React.Fragment, null, isMultiselect && React.createElement(Checkbox, {
+      "aria-hidden": "true",
+      checked: isItemSelected(item),
+      className: "eds-dropdown__list__item__checkbox",
+      tabIndex: -1,
+      onChange: function onChange() {
+        return undefined;
+      }
+    }), React.createElement("span", {
+      className: "eds-dropdown__list__item__text"
+    }, item.label, React.createElement(VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), Array.isArray(item.icons) ? item.icons.filter(isReactComponent).map(function (Icon, index) {
+      var _ref2, _Icon$displayName;
+      var key = ((_ref2 = (_Icon$displayName = Icon.displayName) != null ? _Icon$displayName : Icon.name) != null ? _ref2 : Icon.name) + "-" + index;
+      return React.createElement(Icon, {
+        key: key,
+        inline: true,
+        className: "eds-dropdown__list__item__icon"
+      });
+    }) : null);
   };
   return (
     // use popover from @entur/tooltip when that package upgrades to floating-ui
-    /* @__PURE__ */ jsx(
-      "ul",
-      {
-        ...getMenuProps({
-          "aria-multiselectable": isMultiselect,
-          ref: setListRef,
-          className: "eds-dropdown__list",
-          style: {
-            ...floatingStyles,
-            display: isOpen && !readOnly ? void 0 : "none",
-            ...rest.style
-          }
-        }),
-        children: (() => {
-          if (!isOpen || readOnly) {
-            return null;
-          }
-          if (loading) {
-            return /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: "eds-dropdown__list__item",
-                children: loadingText
-              },
-              "dropdown-list-loading"
-            );
-          }
-          if (isNoMatches) {
-            return /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: "eds-dropdown__list__item",
-                children: noMatchesText
-              },
-              "dropdown-list-no-match"
-            );
-          }
-          return listItems.map((item, index) => {
-            const key = item.itemKey ?? `${item.label ?? ""}-${item.value ?? ""}-${(item.icons ?? []).map((icon) => icon?.displayName ?? icon?.name ?? "unknown").join("-")}`;
-            const itemIsSelectAll = item.value === selectAllItem?.value;
-            if (itemIsSelectAll && listItems.length <= 2) return null;
-            return /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: classNames("eds-dropdown__list__item", {
-                  "eds-dropdown__list__item--select-all": itemIsSelectAll,
-                  "eds-dropdown__list__item--highlighted": highlightedIndex === index,
-                  "eds-dropdown__list__item--selected": !isMultiselect && isItemSelected(item)
-                }),
-                ...getItemProps({
-                  // @ts-expect-error Since getItemProps expects the same item type
-                  // here as items, it throws error when selectAllItem is a string.
-                  // This does, however, not cause any functional issues.
-                  item,
-                  index,
-                  "aria-selected": itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
-                }),
-                children: itemIsSelectAll ? selectAllListItemContent() : listItemContent(
-                  item
-                )
-              },
-              key
-            );
-          });
-        })()
+    React.createElement("ul", _extends({}, getMenuProps({
+      'aria-multiselectable': isMultiselect,
+      ref: setListRef,
+      className: 'eds-dropdown__list',
+      style: _extends({}, floatingStyles, {
+        display: isOpen && !readOnly ? undefined : 'none'
+      }, rest.style)
+    })), function () {
+      if (!isOpen || readOnly) {
+        return null;
       }
-    )
+      if (loading) {
+        return React.createElement("li", {
+          key: "dropdown-list-loading",
+          className: "eds-dropdown__list__item"
+        }, loadingText);
+      }
+      if (isNoMatches) {
+        return React.createElement("li", {
+          key: "dropdown-list-no-match",
+          className: "eds-dropdown__list__item"
+        }, noMatchesText);
+      }
+      return listItems.map(function (item, index) {
+        var _item$itemKey, _item$label, _item$value, _item$icons;
+        var key = (_item$itemKey = item.itemKey) != null ? _item$itemKey : ((_item$label = item.label) != null ? _item$label : '') + "-" + ((_item$value = item.value) != null ? _item$value : '') + "-" + ((_item$icons = item.icons) != null ? _item$icons : []).map(function (icon) {
+          var _ref3, _icon$displayName;
+          return (_ref3 = (_icon$displayName = icon == null ? void 0 : icon.displayName) != null ? _icon$displayName : icon == null ? void 0 : icon.name) != null ? _ref3 : 'unknown';
+        }).join('-');
+        var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
+        if (itemIsSelectAll && listItems.length <= 2) return null;
+        return React.createElement("li", _extends({
+          className: classNames('eds-dropdown__list__item', {
+            'eds-dropdown__list__item--select-all': itemIsSelectAll,
+            'eds-dropdown__list__item--highlighted': highlightedIndex === index,
+            'eds-dropdown__list__item--selected': !isMultiselect && isItemSelected(item)
+          }),
+          key: key
+        }, getItemProps({
+          // @ts-expect-error Since getItemProps expects the same item type
+          // here as items, it throws error when selectAllItem is a string.
+          // This does, however, not cause any functional issues.
+          item: item,
+          index: index,
+          'aria-selected': itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
+        })), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
+      });
+    }())
   );
 };
-const SelectedItemTag = ({
-  ariaLabelRemoveSelected,
-  ariaLabelChosen = "valgt",
-  disabled,
-  getSelectedItemProps,
-  index,
-  readOnly,
-  removeSelectedItem,
-  selectedItem
-}) => {
-  const { tabIndex: _, ...selectedItemProps } = getSelectedItemProps?.({
-    selectedItem,
-    index
-  }) ?? {};
-  return /* @__PURE__ */ createElement(
-    TagChip,
-    {
-      size: "small",
-      className: classNames("eds-dropdown__selected-item-tag", {
-        "eds-dropdown__selected-item-tag--readonly": readOnly,
-        "eds-dropdown__selected-item-tag--disabled": disabled
-      }),
-      ...selectedItemProps,
-      onClose: (e) => {
-        e.stopPropagation();
-        removeSelectedItem(selectedItem);
-      },
-      onClick: (e) => e.stopPropagation(),
-      closeButtonAriaLabel: `${selectedItem.label} ${ariaLabelChosen}, ${ariaLabelRemoveSelected} `,
-      key: selectedItem.value,
-      "aria-live": "polite"
+
+var _excluded$4 = ["tabIndex"],
+  _excluded2 = ["ariaLabelCloseList", "ariaLabelOpenList", "clearable", "labelClearSelected", "focusable", "disabled", "isOpen", "loading", "loadingText", "onClear", "itemIsSelected"];
+var SelectedItemTag = function SelectedItemTag(_ref) {
+  var _getSelectedItemProps;
+  var ariaLabelRemoveSelected = _ref.ariaLabelRemoveSelected,
+    _ref$ariaLabelChosen = _ref.ariaLabelChosen,
+    ariaLabelChosen = _ref$ariaLabelChosen === void 0 ? 'valgt' : _ref$ariaLabelChosen,
+    disabled = _ref.disabled,
+    getSelectedItemProps = _ref.getSelectedItemProps,
+    index = _ref.index,
+    readOnly = _ref.readOnly,
+    removeSelectedItem = _ref.removeSelectedItem,
+    selectedItem = _ref.selectedItem;
+  var _ref2 = (_getSelectedItemProps = getSelectedItemProps == null ? void 0 : getSelectedItemProps({
+      selectedItem: selectedItem,
+      index: index
+    })) != null ? _getSelectedItemProps : {},
+    selectedItemProps = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
+  return React.createElement(TagChip, _extends({
+    size: "small",
+    className: classNames('eds-dropdown__selected-item-tag', {
+      'eds-dropdown__selected-item-tag--readonly': readOnly,
+      'eds-dropdown__selected-item-tag--disabled': disabled
+    })
+  }, selectedItemProps, {
+    onClose: function onClose(e) {
+      e.stopPropagation();
+      removeSelectedItem(selectedItem);
     },
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: "eds-dropdown__selected-item-tag__text",
-        children: selectedItem.label
-      }
-    )
-  );
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    closeButtonAriaLabel: selectedItem.label + " " + ariaLabelChosen + ", " + ariaLabelRemoveSelected + " ",
+    key: selectedItem.value,
+    "aria-live": "polite"
+  }), React.createElement("span", {
+    "aria-hidden": "true",
+    className: "eds-dropdown__selected-item-tag__text"
+  }, selectedItem.label));
 };
-const DropdownFieldAppendix = forwardRef(
-  ({
-    ariaLabelCloseList,
-    ariaLabelOpenList,
-    clearable = false,
-    labelClearSelected,
-    focusable = false,
-    disabled,
-    isOpen,
-    loading = false,
-    loadingText,
-    onClear,
-    itemIsSelected,
-    ...rest
-  }, ref) => {
-    function getToggleAriaLabel() {
-      if (loading) return loadingText;
-      if (isOpen) return ariaLabelCloseList;
-      return ariaLabelOpenList;
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children: !disabled && /* @__PURE__ */ jsxs("div", { className: "eds-dropdown__appendix", children: [
-      clearable && itemIsSelected && /* @__PURE__ */ jsx(
-        ClearableButton,
-        {
-          onClear,
-          focusable: true,
-          labelClearSelectedItems: labelClearSelected
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: classNames("eds-dropdown__appendix__toggle-button", {
-            "eds-dropdown__appendix__toggle-button--open": isOpen
-          }),
-          ref,
-          "aria-label": getToggleAriaLabel(),
-          ...rest,
-          type: "button",
-          tabIndex: focusable ? 0 : -1,
-          children: !loading ? /* @__PURE__ */ jsx(DownArrowIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(LoadingDots, { "aria-hidden": "true" })
-        }
-      )
-    ] }) });
+var DropdownFieldAppendix = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var ariaLabelCloseList = _ref3.ariaLabelCloseList,
+    ariaLabelOpenList = _ref3.ariaLabelOpenList,
+    _ref3$clearable = _ref3.clearable,
+    clearable = _ref3$clearable === void 0 ? false : _ref3$clearable,
+    labelClearSelected = _ref3.labelClearSelected,
+    _ref3$focusable = _ref3.focusable,
+    focusable = _ref3$focusable === void 0 ? false : _ref3$focusable,
+    disabled = _ref3.disabled,
+    isOpen = _ref3.isOpen,
+    _ref3$loading = _ref3.loading,
+    loading = _ref3$loading === void 0 ? false : _ref3$loading,
+    loadingText = _ref3.loadingText,
+    onClear = _ref3.onClear,
+    itemIsSelected = _ref3.itemIsSelected,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  function getToggleAriaLabel() {
+    if (loading) return loadingText;
+    if (isOpen) return ariaLabelCloseList;
+    return ariaLabelOpenList;
   }
-);
-const ClearableButton = ({
-  onClear,
-  labelClearSelectedItems = "Fjern valgte",
-  focusable = false
-}) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        "aria-hidden": "true",
-        placement: "top",
-        content: labelClearSelectedItems,
-        className: "eds-dropdown__appendix__clear-button__tooltip",
-        children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            className: "eds-dropdown__appendix__clear-button",
-            type: "button",
-            tabIndex: focusable ? 0 : -1,
-            onClick: (e) => {
-              e.stopPropagation();
-              onClear();
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                e.stopPropagation();
-                onClear();
-              }
-            },
-            "aria-label": labelClearSelectedItems,
-            children: /* @__PURE__ */ jsx(CloseSmallIcon, { "aria-hidden": "true" })
-          }
-        )
+  return React.createElement(React.Fragment, null, !disabled && React.createElement("div", {
+    className: "eds-dropdown__appendix"
+  }, clearable && itemIsSelected && React.createElement(ClearableButton, {
+    onClear: onClear,
+    focusable: true,
+    labelClearSelectedItems: labelClearSelected
+  }), React.createElement(IconButton, _extends({
+    className: classNames('eds-dropdown__appendix__toggle-button', {
+      'eds-dropdown__appendix__toggle-button--open': isOpen
+    }),
+    ref: ref,
+    "aria-label": getToggleAriaLabel()
+  }, rest, {
+    type: "button",
+    tabIndex: focusable ? 0 : -1
+  }), !loading ? React.createElement(DownArrowIcon, {
+    "aria-hidden": "true"
+  }) : React.createElement(LoadingDots, {
+    "aria-hidden": "true"
+  }))));
+});
+var ClearableButton = function ClearableButton(_ref4) {
+  var onClear = _ref4.onClear,
+    _ref4$labelClearSelec = _ref4.labelClearSelectedItems,
+    labelClearSelectedItems = _ref4$labelClearSelec === void 0 ? 'Fjern valgte' : _ref4$labelClearSelec,
+    _ref4$focusable = _ref4.focusable,
+    focusable = _ref4$focusable === void 0 ? false : _ref4$focusable;
+  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+    "aria-hidden": "true",
+    placement: "top",
+    content: labelClearSelectedItems,
+    className: "eds-dropdown__appendix__clear-button__tooltip"
+  }, React.createElement(IconButton, {
+    className: "eds-dropdown__appendix__clear-button",
+    type: "button",
+    tabIndex: focusable ? 0 : -1,
+    // These events bubble up to the Dropdown container and trigger openMenu.
+    // To avoid this, stopPropagation and preventDefault are added.
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onClear();
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        e.stopPropagation();
+        onClear();
       }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "eds-dropdown__appendix__divider" })
-  ] });
+    },
+    "aria-label": labelClearSelectedItems
+  }, React.createElement(CloseSmallIcon, {
+    "aria-hidden": "true"
+  }))), React.createElement("div", {
+    className: "eds-dropdown__appendix__divider"
+  }));
 };
-const useNormalizedItems = (items) => React.useMemo(
-  () => items.map((item) => {
-    if (typeof item == "string") {
-      return {
-        value: item,
-        label: item
-      };
-    }
-    if (item?.value === void 0) {
-      return {
-        ...item,
-        value: item.label
-      };
-    }
-    return { ...item, value: item.value };
-  }),
-  [items]
-);
-const useResolvedItems = (itemsOrItemsResolver, debounceTimeout = 250) => {
-  const itemsIsAFunction = typeof itemsOrItemsResolver === "function";
-  const [items, setItems] = React.useState(
-    itemsIsAFunction ? [] : itemsOrItemsResolver
-  );
-  const [loading, setLoading] = React.useState(false);
-  const abortControllerRef = React.useRef(
-    new AbortController()
-  );
-  const itemsResolver = React.useMemo(() => {
-    if (itemsIsAFunction)
-      return itemsOrItemsResolver;
-    return () => Promise.resolve(itemsOrItemsResolver);
-  }, [itemsOrItemsResolver, itemsIsAFunction]);
-  const updateItems = async (inputValue) => {
-    if (abortControllerRef?.current) abortControllerRef?.current?.abort();
-    const abortController = new AbortController();
-    abortControllerRef.current = abortController;
-    setLoading(true);
-    try {
-      const resolvedItems = await itemsResolver(
-        inputValue ?? "",
-        abortControllerRef
-      );
-      if (abortControllerRef?.current?.signal?.aborted) {
-        console.warn(
-          "Avbryt den asynkrone funksjonen din med signalet fra AbortController-en for å for å unngå minnelekkasje.",
-          'Funksjonen bør kaste en DOMException med navnet "AbortError" når den avbrytes.',
-          "",
-          "\n\nSe eksempel her: https://linje.entur.no/komponenter/skjemaelementer/dropdown#s%C3%B8kbar-dropdown-med-valg-fra-nettverkskall-bassert-p%C3%A5-tekstinput",
-          "\nLes mer om AbortController her: https://developer.mozilla.org/en-US/docs/Web/API/AbortController"
-        );
-        return;
+
+var useNormalizedItems = function useNormalizedItems(items) {
+  return React.useMemo(function () {
+    return items.map(function (item) {
+      if (typeof item == 'string') {
+        return {
+          value: item,
+          label: item
+        };
       }
-      setLoading(false);
-      setItems(resolvedItems);
-    } catch (error2) {
-      if (error2 && typeof error2 === "object" && "name" in error2 && error2.name === "AbortError") {
-        return;
+      if ((item == null ? void 0 : item.value) === undefined) {
+        return _extends({}, item, {
+          value: item.label
+        });
       }
-      console.warn(
-        "The following error was received but not handled inside Entur Designsystems useResolvedItems hook:"
-      );
-      throw error2;
-    }
-  };
-  const debouncedFetchItems = useDebounce(updateItems, debounceTimeout);
-  const normalizedItems = useNormalizedItems(items);
-  React.useEffect(() => {
-    return () => abortControllerRef?.current?.abort("Component unmounted");
+      return _extends({}, item, {
+        value: item.value
+      });
+    });
+  }, [items]);
+};
+
+var useResolvedItems = function useResolvedItems(/** The list of items, or an async function that resolves the list of items */
+itemsOrItemsResolver, /** The time to wait after the input changes to the fetchItems method is called */
+debounceTimeout) {
+  if (debounceTimeout === void 0) {
+    debounceTimeout = 250;
+  }
+  var itemsIsAFunction = typeof itemsOrItemsResolver === 'function';
+  var _React$useState = React.useState(itemsIsAFunction ? [] : itemsOrItemsResolver),
+    items = _React$useState[0],
+    setItems = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    loading = _React$useState2[0],
+    setLoading = _React$useState2[1];
+  var abortControllerRef = React.useRef(new AbortController());
+  // We normalize the itemsResolver argument to an async function, so we
+  // can use it without thinking about the differences later
+  var itemsResolver = React.useMemo(function () {
+    if (itemsIsAFunction) return itemsOrItemsResolver;
+    return function () {
+      return Promise.resolve(itemsOrItemsResolver);
+    };
+  }, [itemsOrItemsResolver, itemsIsAFunction]);
+  // This should be called whenever the input value changes
+  var updateItems = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputValue) {
+      var _abortControllerRef$c;
+      var abortController, _abortControllerRef$c2, resolvedItems;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            // The abortController handles cleanup of the previous request and unmounting
+            if (abortControllerRef != null && abortControllerRef.current) abortControllerRef == null || (_abortControllerRef$c = abortControllerRef.current) == null || _abortControllerRef$c.abort();
+            abortController = new AbortController();
+            abortControllerRef.current = abortController;
+            setLoading(true);
+            _context.prev = 4;
+            _context.next = 7;
+            return itemsResolver(inputValue != null ? inputValue : '', abortControllerRef);
+          case 7:
+            resolvedItems = _context.sent;
+            if (!(abortControllerRef != null && (_abortControllerRef$c2 = abortControllerRef.current) != null && (_abortControllerRef$c2 = _abortControllerRef$c2.signal) != null && _abortControllerRef$c2.aborted)) {
+              _context.next = 11;
+              break;
+            }
+            console.warn('Avbryt den asynkrone funksjonen din med signalet fra AbortController-en for å for å unngå minnelekkasje.', 'Funksjonen bør kaste en DOMException med navnet "AbortError" når den avbrytes.', '', '\n\nSe eksempel her: https://linje.entur.no/komponenter/skjemaelementer/dropdown#s%C3%B8kbar-dropdown-med-valg-fra-nettverkskall-bassert-p%C3%A5-tekstinput', '\nLes mer om AbortController her: https://developer.mozilla.org/en-US/docs/Web/API/AbortController');
+            return _context.abrupt("return");
+          case 11:
+            setLoading(false);
+            setItems(resolvedItems);
+            _context.next = 21;
+            break;
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](4);
+            if (!(_context.t0 && typeof _context.t0 === 'object' && 'name' in _context.t0 && _context.t0.name === 'AbortError')) {
+              _context.next = 19;
+              break;
+            }
+            return _context.abrupt("return");
+          case 19:
+            console.warn('The following error was received but not handled inside Entur Designsystems useResolvedItems hook:');
+            throw _context.t0;
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4, 15]]);
+    }));
+    return function updateItems(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var debouncedFetchItems = useDebounce(updateItems, debounceTimeout);
+  var normalizedItems = useNormalizedItems(items);
+  React.useEffect(function () {
+    // send abort signal to previous request on unmount for cleanup
+    return function () {
+      var _abortControllerRef$c3;
+      return abortControllerRef == null || (_abortControllerRef$c3 = abortControllerRef.current) == null ? void 0 : _abortControllerRef$c3.abort('Component unmounted');
+    };
   }, []);
-  React.useEffect(() => {
+  React.useEffect(function () {
+    // Let's fetch the list initially if it's specified
     if (itemsIsAFunction) {
-      debouncedFetchItems("");
+      debouncedFetchItems('');
     }
   }, [itemsIsAFunction, itemsResolver]);
   return {
@@ -385,56 +681,79 @@ const useResolvedItems = (itemsOrItemsResolver, debounceTimeout = 250) => {
     fetchItems: debouncedFetchItems
   };
 };
-const EMPTY_INPUT = "";
+
+/* start general utils */
+var EMPTY_INPUT = '';
 function lowerCaseFilterTest(item, input) {
   if (!input) {
     return true;
   }
-  const sanitizeEscapeCharacters = input.replace(
-    /[-/\\^$*+?.()|[\]{}]/g,
-    "\\$&"
-  );
-  const inputRegex = new RegExp(sanitizeEscapeCharacters, "i");
+  var sanitizeEscapeCharacters = input.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+  var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
   return inputRegex.test(item.label);
 }
-function noFilter(item, input) {
+function noFilter(
+//@ts-expect-error only here to comply with dropdown filter API
+item,
+//@ts-expect-error only here to comply with dropdown filter API
+input) {
   return true;
 }
-const itemToString = (item) => item ? item.label : "";
-const itemToKey = (item) => item?.label + item?.value;
-const isFunctionWithQueryArgument = (object) => typeof object === "function" && object.length > 0;
-const clamp = (val, min = 1, max = 10) => Math.min(Math.max(val, min), max);
-const useMultiselectUtils = ({
-  listItems,
-  selectedItems,
-  selectAll
-}) => {
-  const hasSelectedItems = selectedItems.length > 0;
-  const listItemsWithoutSelectAll = listItems.filter(
-    (item) => item.value !== selectAll.value
-  );
-  const unselectedItemsInListItems = listItemsWithoutSelectAll.filter(
-    (listItem) => !selectedItems.some(
-      (selectedItem) => selectedItem.value === listItem.value
-    )
-  );
-  const allListItemsAreSelected = !listItemsWithoutSelectAll.some(
-    (listItem) => !selectedItems.some(
-      (selectedItem) => selectedItem.value === listItem.value
-    )
-  );
-  const someListItemsAreSelected = listItemsWithoutSelectAll.some(
-    (listItem) => selectedItems.some((selectedItem) => selectedItem.value === listItem.value)
-  );
-  const addClickedItemToSelectedItems = (clickedItem, onChange) => onChange([...selectedItems, clickedItem]);
-  const clickedItemIsInSelectedItems = (clickedItem) => selectedItems.some(
-    (selectedItem) => selectedItem.value === clickedItem.value
-  );
-  const clickedItemIsSelectAll = (clickedItem) => clickedItem.value === selectAll.value;
-  const handleListItemClicked = ({
-    clickedItem,
-    onChange
-  }) => {
+var itemToString = function itemToString(item) {
+  return item ? item.label : '';
+};
+var itemToKey = function itemToKey(item) {
+  return (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value);
+};
+var isFunctionWithQueryArgument = function isFunctionWithQueryArgument(object) {
+  return typeof object === 'function' && object.length > 0;
+};
+var clamp = function clamp(val, min, max) {
+  if (min === void 0) {
+    min = 1;
+  }
+  if (max === void 0) {
+    max = 10;
+  }
+  return Math.min(Math.max(val, min), max);
+};
+var useMultiselectUtils = function useMultiselectUtils(_ref) {
+  var listItems = _ref.listItems,
+    selectedItems = _ref.selectedItems,
+    selectAll = _ref.selectAll;
+  var hasSelectedItems = selectedItems.length > 0;
+  var listItemsWithoutSelectAll = listItems.filter(function (item) {
+    return item.value !== selectAll.value;
+  });
+  var unselectedItemsInListItems = listItemsWithoutSelectAll.filter(function (listItem) {
+    return !selectedItems.some(function (selectedItem) {
+      return selectedItem.value === listItem.value;
+    });
+  });
+  var allListItemsAreSelected = !listItemsWithoutSelectAll.some(function (listItem) {
+    return !selectedItems.some(function (selectedItem) {
+      return selectedItem.value === listItem.value;
+    });
+  });
+  var someListItemsAreSelected = listItemsWithoutSelectAll.some(function (listItem) {
+    return selectedItems.some(function (selectedItem) {
+      return selectedItem.value === listItem.value;
+    });
+  });
+  var addClickedItemToSelectedItems = function addClickedItemToSelectedItems(clickedItem, onChange) {
+    return onChange([].concat(selectedItems, [clickedItem]));
+  };
+  var clickedItemIsInSelectedItems = function clickedItemIsInSelectedItems(clickedItem) {
+    return selectedItems.some(function (selectedItem) {
+      return selectedItem.value === clickedItem.value;
+    });
+  };
+  var clickedItemIsSelectAll = function clickedItemIsSelectAll(clickedItem) {
+    return clickedItem.value === selectAll.value;
+  };
+  var handleListItemClicked = function handleListItemClicked(_ref2) {
+    var clickedItem = _ref2.clickedItem,
+      onChange = _ref2.onChange;
     if (clickedItemIsSelectAll(clickedItem)) {
       if (allListItemsAreSelected) {
         return unselectAllListItems(onChange);
@@ -446,1020 +765,1054 @@ const useMultiselectUtils = ({
     }
     addClickedItemToSelectedItems(clickedItem, onChange);
   };
-  const removeClickedItemFromSelectedItems = (clickedItem, onChange) => onChange(
-    selectedItems.filter(
-      (selectedItem) => selectedItem.value !== clickedItem.value
-    )
-  );
-  const selectAllCheckboxState = () => {
+  var removeClickedItemFromSelectedItems = function removeClickedItemFromSelectedItems(clickedItem, onChange) {
+    return onChange(selectedItems.filter(function (selectedItem) {
+      return selectedItem.value !== clickedItem.value;
+    }));
+  };
+  var selectAllCheckboxState = function selectAllCheckboxState() {
     if (allListItemsAreSelected) return true;
-    if (someListItemsAreSelected) return "indeterminate";
+    if (someListItemsAreSelected) return 'indeterminate';
     return false;
   };
-  const selectAllUnselectedItemsInListItems = (onChange) => {
-    onChange([...selectedItems, ...unselectedItemsInListItems]);
+  var selectAllUnselectedItemsInListItems = function selectAllUnselectedItemsInListItems(onChange) {
+    onChange([].concat(selectedItems, unselectedItemsInListItems));
   };
-  const unselectAllListItems = (onChange) => {
-    const selectedItemsWithoutItemsInListItems = selectedItems.filter(
-      (selectedItem) => !listItemsWithoutSelectAll.some(
-        (listItem) => listItem.value === selectedItem.value
-      )
-    );
+  var unselectAllListItems = function unselectAllListItems(onChange) {
+    var selectedItemsWithoutItemsInListItems = selectedItems.filter(function (selectedItem) {
+      return !listItemsWithoutSelectAll.some(function (listItem) {
+        return listItem.value === selectedItem.value;
+      });
+    });
     onChange(selectedItemsWithoutItemsInListItems);
   };
   return {
-    addClickedItemToSelectedItems,
-    allListItemsAreSelected,
-    clickedItemIsInSelectedItems,
-    clickedItemIsSelectAll,
-    handleListItemClicked,
-    hasSelectedItems,
-    listItemsWithoutSelectAll,
-    removeClickedItemFromSelectedItems,
-    selectAllCheckboxState,
-    selectAllUnselectedItemsInListItems,
-    someListItemsAreSelected,
-    unselectAllListItems
+    addClickedItemToSelectedItems: addClickedItemToSelectedItems,
+    allListItemsAreSelected: allListItemsAreSelected,
+    clickedItemIsInSelectedItems: clickedItemIsInSelectedItems,
+    clickedItemIsSelectAll: clickedItemIsSelectAll,
+    handleListItemClicked: handleListItemClicked,
+    hasSelectedItems: hasSelectedItems,
+    listItemsWithoutSelectAll: listItemsWithoutSelectAll,
+    removeClickedItemFromSelectedItems: removeClickedItemFromSelectedItems,
+    selectAllCheckboxState: selectAllCheckboxState,
+    selectAllUnselectedItemsInListItems: selectAllUnselectedItemsInListItems,
+    someListItemsAreSelected: someListItemsAreSelected,
+    unselectAllListItems: unselectAllListItems
   };
 };
+/* end multiselect utils */
+/* start a11y utils */
+// called when the state changes:
+// selectedItem, highlightedIndex, inputValue or isOpen.
 function getA11yStatusMessage(options) {
-  const { isOpen, selectAllItemIncluded = false, resultCount } = options;
+  var isOpen = options.isOpen,
+    _options$selectAllIte = options.selectAllItemIncluded,
+    selectAllItemIncluded = _options$selectAllIte === void 0 ? false : _options$selectAllIte,
+    resultCount = options.resultCount;
   if (!isOpen) {
-    return "";
+    return '';
   }
-  const resultCountWithoutSelectAll = selectAllItemIncluded ? resultCount - 1 : resultCount;
+  var resultCountWithoutSelectAll = selectAllItemIncluded ? resultCount - 1 : resultCount;
   if (resultCountWithoutSelectAll === 0) {
-    return "Ingen resultater";
+    return 'Ingen resultater';
   }
-  return `${resultCountWithoutSelectAll} resultat${resultCountWithoutSelectAll === 1 ? "" : "er"} tilgjengelig, naviger med pil opp eller ned, velg elementer med Enter.`;
+  return resultCountWithoutSelectAll + " resultat" + (resultCountWithoutSelectAll === 1 ? '' : 'er') + " tilgjengelig, naviger med pil opp eller ned, velg elementer med Enter.";
 }
-const SearchableDropdown = React.forwardRef(
-  ({
-    ariaLabelChosenSingular,
-    ariaLabelCloseList = "Lukk liste med valg",
-    ariaLabelOpenList = "Åpne liste med valg",
-    ariaLabelSelectedItem,
-    className,
-    clearable = true,
-    debounceTimeout,
-    disabled = false,
-    disableLabelAnimation = false,
-    feedback,
-    items: initialItems,
-    itemFilter = isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest,
-    label,
-    labelClearSelectedItem = "fjern valgt",
-    labelTooltip,
-    listStyle,
-    loading,
-    loadingText = "Laster resultater …",
-    noMatchesText = "Ingen tilgjengelige valg …",
-    onChange = () => void 0,
-    placeholder,
-    prepend,
-    readOnly = false,
-    selectedItem: value,
-    selectOnBlur = false,
-    selectOnTab = false,
-    style,
-    variant = "info",
-    ...rest
-  }, ref) => {
-    const [showSelectedItem, setShowSelectedItem] = useState(value !== null);
-    const [lastHighlightedIndex, setLastHighlightedIndex] = useState(0);
-    const inputRef = useRef(null);
-    const {
-      items: normalizedItems,
-      loading: resolvedItemsLoading,
-      fetchItems
-    } = useResolvedItems(initialItems, debounceTimeout);
-    const [listItems, setListItems] = useState(normalizedItems);
-    const filterListItems = ({ inputValue: inputValue2 }) => setListItems(
-      normalizedItems.filter((item) => itemFilter(item, inputValue2))
-    );
-    const updateListItems = ({ inputValue: inputValue2 }) => {
-      const shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
-      if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
-      filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
-    };
-    const resetInputState = ({
-      changes
-    }) => {
-      updateListItems({ inputValue: EMPTY_INPUT });
-      return {
-        ...changes,
+/* end a11y utils */
+
+var _excluded$3 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loading", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
+var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _document, _selectedItem$label;
+  var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
+    _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
+    ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
+    _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
+    ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
+    ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
+    className = _ref.className,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? true : _ref$clearable,
+    debounceTimeout = _ref.debounceTimeout,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$disableLabelAnim = _ref.disableLabelAnimation,
+    disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
+    feedback = _ref.feedback,
+    initialItems = _ref.items,
+    _ref$itemFilter = _ref.itemFilter,
+    itemFilter = _ref$itemFilter === void 0 ? isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest : _ref$itemFilter,
+    label = _ref.label,
+    _ref$labelClearSelect = _ref.labelClearSelectedItem,
+    labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
+    labelTooltip = _ref.labelTooltip,
+    listStyle = _ref.listStyle,
+    loading = _ref.loading,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
+    _ref$noMatchesText = _ref.noMatchesText,
+    noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen tilgjengelige valg …' : _ref$noMatchesText,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return undefined;
+    } : _ref$onChange,
+    placeholder = _ref.placeholder,
+    prepend = _ref.prepend,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    value = _ref.selectedItem,
+    _ref$selectOnBlur = _ref.selectOnBlur,
+    selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
+    _ref$selectOnTab = _ref.selectOnTab,
+    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
+    style = _ref.style,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'info' : _ref$variant,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  var _useState = useState(value !== null),
+    showSelectedItem = _useState[0],
+    setShowSelectedItem = _useState[1];
+  var _useState2 = useState(0),
+    lastHighlightedIndex = _useState2[0],
+    setLastHighlightedIndex = _useState2[1];
+  var inputRef = useRef(null);
+  var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
+    normalizedItems = _useResolvedItems.items,
+    resolvedItemsLoading = _useResolvedItems.loading,
+    fetchItems = _useResolvedItems.fetchItems;
+  var _useState3 = useState(normalizedItems),
+    listItems = _useState3[0],
+    setListItems = _useState3[1];
+  var filterListItems = function filterListItems(_ref2) {
+    var inputValue = _ref2.inputValue;
+    return setListItems(normalizedItems.filter(function (item) {
+      return itemFilter(item, inputValue);
+    }));
+  };
+  var updateListItems = function updateListItems(_ref3) {
+    var inputValue = _ref3.inputValue;
+    var shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
+    if (shouldRefetchItems) fetchItems(inputValue != null ? inputValue : EMPTY_INPUT);
+    filterListItems({
+      inputValue: inputValue != null ? inputValue : EMPTY_INPUT
+    });
+  };
+  var resetInputState = function resetInputState(_ref4) {
+    var changes = _ref4.changes;
+    updateListItems({
+      inputValue: EMPTY_INPUT
+    });
+    return _extends({}, changes, {
+      inputValue: EMPTY_INPUT
+    });
+  };
+  var inputHasFocus = typeof document !== 'undefined' ? (inputRef == null ? void 0 : inputRef.current) === ((_document = document) == null ? void 0 : _document.activeElement) : false;
+  useEffect(function () {
+    filterListItems({
+      inputValue: inputValue
+    });
+  }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(function () {
+    // sync internal state on initial render
+    if (selectedItem !== null && !inputHasFocus) {
+      setShowSelectedItem(true);
+      updateListItems({
         inputValue: EMPTY_INPUT
-      };
-    };
-    const inputHasFocus = typeof document !== "undefined" ? inputRef?.current === document?.activeElement : false;
-    useEffect(() => {
-      filterListItems({ inputValue });
-    }, [normalizedItems]);
-    useEffect(() => {
-      if (selectedItem !== null && !inputHasFocus) {
-        setShowSelectedItem(true);
-        updateListItems({ inputValue: EMPTY_INPUT });
-        setInputValue(EMPTY_INPUT);
-      }
-    }, []);
-    const stateReducer = useCallback(
-      (state, {
-        type,
-        changes
-      }) => {
-        if (changes.highlightedIndex !== void 0 && changes?.highlightedIndex >= 0) {
-          setLastHighlightedIndex(changes?.highlightedIndex);
-        }
-        switch (type) {
-          // empty input to show selected item and reset dropdown list on item selection
-          case useCombobox.stateChangeTypes.ItemClick:
-          case useCombobox.stateChangeTypes.InputKeyDownEnter:
-          case useCombobox.stateChangeTypes.InputBlur:
-            return resetInputState({ changes });
-          case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
-            if (changes.selectedItem !== null && !inputHasFocus)
-              setShowSelectedItem(true);
-            return resetInputState({ changes });
-          // remove leading whitespace, select element with spacebar on empty input
-          case useCombobox.stateChangeTypes.InputChange: {
-            const leadingWhitespaceTest = /^\s+/g;
-            const isSpacePressedOnEmptyInput = changes.inputValue === " ";
-            if (!isSpacePressedOnEmptyInput) setLastHighlightedIndex(0);
-            if (changes.inputValue?.match(leadingWhitespaceTest)) {
-              const sanitizedInputValue = changes.inputValue.replace(
-                leadingWhitespaceTest,
-                EMPTY_INPUT
-              );
-              if (isSpacePressedOnEmptyInput) {
-                if (!state.isOpen)
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    isOpen: true
-                  };
-                if (changes.highlightedIndex !== void 0) {
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    selectedItem: listItems[changes.highlightedIndex]
-                  };
-                }
+      });
+      setInputValue(EMPTY_INPUT);
+    }
+  }, []);
+  var stateReducer = useCallback(function (state, _ref5) {
+    var type = _ref5.type,
+      changes = _ref5.changes;
+    if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
+      setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
+    }
+    switch (type) {
+      // empty input to show selected item and reset dropdown list on item selection
+      case useCombobox.stateChangeTypes.ItemClick:
+      case useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case useCombobox.stateChangeTypes.InputBlur:
+        return resetInputState({
+          changes: changes
+        });
+      case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+        if (changes.selectedItem !== null && !inputHasFocus) setShowSelectedItem(true);
+        return resetInputState({
+          changes: changes
+        });
+      // remove leading whitespace, select element with spacebar on empty input
+      case useCombobox.stateChangeTypes.InputChange:
+        {
+          var _changes$inputValue;
+          var leadingWhitespaceTest = /^\s+/g;
+          var isSpacePressedOnEmptyInput = changes.inputValue === ' ';
+          if (!isSpacePressedOnEmptyInput) setLastHighlightedIndex(0);
+          if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) {
+            var sanitizedInputValue = changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT);
+            if (isSpacePressedOnEmptyInput) {
+              if (!state.isOpen) return _extends({}, changes, {
+                inputValue: sanitizedInputValue,
+                isOpen: true
+              });
+              if (changes.highlightedIndex !== undefined) {
+                return _extends({}, changes, {
+                  inputValue: sanitizedInputValue,
+                  selectedItem: listItems[changes.highlightedIndex]
+                });
               }
             }
-            return { ...changes, highlightedIndex: 0 };
           }
-          default:
-            return changes;
+          return _extends({}, changes, {
+            highlightedIndex: 0
+          });
         }
-      },
-      [fetchItems, filterListItems, inputHasFocus, resetInputState]
-    );
-    const {
-      isOpen,
-      getToggleButtonProps,
-      getLabelProps,
-      getMenuProps,
-      getInputProps,
-      highlightedIndex,
-      getItemProps,
-      selectedItem,
-      inputValue,
-      setInputValue,
-      selectItem,
-      reset
-    } = useCombobox({
+      default:
+        return changes;
+    }
+  }, [fetchItems, filterListItems, inputHasFocus, resetInputState]);
+  var _useCombobox = useCombobox({
       defaultHighlightedIndex: lastHighlightedIndex,
       items: listItems,
-      itemToString,
+      itemToString: itemToString,
       selectedItem: value,
-      stateReducer,
-      onInputValueChange(changes) {
-        updateListItems({ inputValue: changes.inputValue });
+      stateReducer: stateReducer,
+      onInputValueChange: function onInputValueChange(changes) {
+        updateListItems({
+          inputValue: changes.inputValue
+        });
       },
-      onSelectedItemChange({ selectedItem: newSelectedItem }) {
+      onSelectedItemChange: function onSelectedItemChange(_ref6) {
+        var newSelectedItem = _ref6.selectedItem;
         onChange(newSelectedItem);
       },
       // Accessibility
-      getA11yStatusMessage: (options) => getA11yStatusMessage({ ...options, resultCount: listItems.length })
-    });
-    const { refs, floatingStyles, update } = useFloating({
+      getA11yStatusMessage: function getA11yStatusMessage$1(options) {
+        return getA11yStatusMessage(_extends({}, options, {
+          resultCount: listItems.length
+        }));
+      }
+    }),
+    isOpen = _useCombobox.isOpen,
+    getToggleButtonProps = _useCombobox.getToggleButtonProps,
+    getLabelProps = _useCombobox.getLabelProps,
+    getMenuProps = _useCombobox.getMenuProps,
+    getInputProps = _useCombobox.getInputProps,
+    highlightedIndex = _useCombobox.highlightedIndex,
+    getItemProps = _useCombobox.getItemProps,
+    selectedItem = _useCombobox.selectedItem,
+    inputValue = _useCombobox.inputValue,
+    setInputValue = _useCombobox.setInputValue,
+    selectItem = _useCombobox.selectItem,
+    reset = _useCombobox.reset;
+  // calculations for floating-UI popover position
+  var _useFloating = useFloating({
       open: isOpen,
-      placement: "bottom-start",
-      middleware: [
-        offset(space.extraSmall2),
-        shift({ padding: space.extraSmall }),
-        size({
-          apply({ rects, elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width}px`,
-              // Floating will flip when smaller than 10*16 px
-              // and never exceed 20*16 px.
-              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            });
-          }
-        }),
-        flip({ fallbackStrategy: "initialPlacement" })
-      ]
-    });
-    useEffect(() => {
-      if (isOpen && refs.reference.current && refs.floating.current) {
-        return autoUpdate(
-          refs.reference.current,
-          refs.floating.current,
-          update
-        );
+      placement: 'bottom-start',
+      middleware: [offset(space.extraSmall2), shift({
+        padding: space.extraSmall
+      }), size({
+        apply: function apply(_ref7) {
+          var rects = _ref7.rects,
+            elements = _ref7.elements,
+            availableHeight = _ref7.availableHeight;
+          Object.assign(elements.floating.style, {
+            width: rects.reference.width + "px",
+            // Floating will flip when smaller than 10*16 px
+            // and never exceed 20*16 px.
+            maxHeight: clamp(10 * 16, availableHeight, 20 * 16) + "px"
+          });
+        }
+      }), flip({
+        fallbackStrategy: 'initialPlacement'
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    update = _useFloating.update;
+  // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
+  // the useFloating hook but this requires the floating element to be conditionally rendered.
+  // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
+  // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
+  useEffect(function () {
+    if (isOpen && refs.reference.current && refs.floating.current) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [isOpen, refs.reference, refs.floating, update]);
+  var handleOnClear = function handleOnClear() {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+    reset();
+  };
+  return React.createElement(BaseFormControl, _extends({
+    className: classNames('eds-dropdown', 'eds-dropdown--searchable', className, {
+      'eds-dropdown--has-tooltip': labelTooltip !== undefined
+    }),
+    disabled: disabled,
+    disableLabelAnimation: disableLabelAnimation,
+    feedback: feedback,
+    isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
+    label: label,
+    labelId: getLabelProps().id,
+    labelProps: getLabelProps(),
+    labelTooltip: labelTooltip,
+    onClick: function onClick(e) {
+      if (e.target === e.currentTarget) {
+        var _getInputProps;
+        (_getInputProps = getInputProps()) == null || _getInputProps.onClick == null || _getInputProps.onClick(e);
       }
-    }, [isOpen, refs.reference, refs.floating, update]);
-    const handleOnClear = () => {
-      inputRef.current?.focus();
-      reset();
-    };
-    return /* @__PURE__ */ jsxs(
-      BaseFormControl,
-      {
-        className: classNames(
-          "eds-dropdown",
-          "eds-dropdown--searchable",
-          className,
-          { "eds-dropdown--has-tooltip": labelTooltip !== void 0 }
-        ),
-        disabled,
-        disableLabelAnimation,
-        feedback,
-        isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
-        label,
-        labelId: getLabelProps().id,
-        labelProps: getLabelProps(),
-        labelTooltip,
-        onClick: (e) => {
-          if (e.target === e.currentTarget) {
-            getInputProps()?.onClick?.(e);
-          }
-        },
-        prepend,
-        readOnly,
-        ref: refs.setReference,
-        style,
-        tabIndex: disabled || readOnly ? -1 : void 0,
-        variant,
-        after: /* @__PURE__ */ jsx(
-          DropdownList,
-          {
-            ariaLabelChosenSingular,
-            ariaLabelSelectedItem,
-            floatingStyles,
-            getItemProps,
-            getMenuProps,
-            highlightedIndex,
-            isOpen,
-            listItems,
-            style: listStyle,
-            setListRef: refs.setFloating,
-            loading: loading ?? resolvedItemsLoading,
-            loadingText,
-            noMatchesText,
-            selectedItems: selectedItem !== null ? [selectedItem] : [],
-            readOnly
-          }
-        ),
-        ...rest,
-        append: void 0,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: classNames("eds-dropdown--searchable__selected-item", {
-                "eds-dropdown--searchable__selected-item--hidden": !showSelectedItem
-              }),
-              onClick: (event) => {
-                if (!disabled && !readOnly) {
-                  inputRef.current?.focus();
-                  getInputProps()?.onClick?.(event);
-                }
-              },
-              tabIndex: readOnly ? 0 : -1,
-              children: showSelectedItem ? selectedItem?.label : ""
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              className: classNames("eds-dropdown__input eds-form-control", {
-                "eds-dropdown__input--hidden": showSelectedItem
-              }),
-              ...getInputProps({
-                onKeyDown(e) {
-                  if (isOpen && e.key === "Tab") {
-                    const highlitedItem = listItems[highlightedIndex];
-                    if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
-                      selectItem(highlitedItem);
-                    }
-                  }
-                },
-                onBlur() {
-                  if (selectedItem !== null) setShowSelectedItem(true);
-                },
-                onFocus() {
-                  if (!readOnly) {
-                    setShowSelectedItem(false);
-                  }
-                },
-                disabled,
-                readOnly,
-                placeholder: selectedItem?.label ?? placeholder,
-                tabIndex: disabled || readOnly ? -1 : void 0,
-                ref: mergeRefs(inputRef, ref)
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            DropdownFieldAppendix,
-            {
-              ...getToggleButtonProps({
-                "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
-              }),
-              ariaLabelCloseList,
-              ariaLabelOpenList,
-              clearable,
-              disabled: disabled || readOnly,
-              onClear: handleOnClear,
-              focusable: false,
-              labelClearSelected: labelClearSelectedItem,
-              isOpen,
-              itemIsSelected: selectedItem !== null,
-              loadingText,
-              loading: loading ?? resolvedItemsLoading
-            }
-          )
-        ]
+    },
+    prepend: prepend,
+    readOnly: readOnly,
+    ref: refs.setReference,
+    style: style,
+    tabIndex: disabled || readOnly ? -1 : undefined,
+    variant: variant,
+    after: React.createElement(DropdownList, {
+      ariaLabelChosenSingular: ariaLabelChosenSingular,
+      ariaLabelSelectedItem: ariaLabelSelectedItem,
+      floatingStyles: floatingStyles,
+      getItemProps: getItemProps,
+      getMenuProps: getMenuProps,
+      highlightedIndex: highlightedIndex,
+      isOpen: isOpen,
+      listItems: listItems,
+      style: listStyle,
+      setListRef: refs.setFloating,
+      loading: loading != null ? loading : resolvedItemsLoading,
+      loadingText: loadingText,
+      noMatchesText: noMatchesText,
+      selectedItems: selectedItem !== null ? [selectedItem] : [],
+      readOnly: readOnly
+    })
+  }, rest, {
+    // Append is not supported as of now
+    append: undefined
+  }), React.createElement("span", {
+    className: classNames('eds-dropdown--searchable__selected-item', {
+      'eds-dropdown--searchable__selected-item--hidden': !showSelectedItem
+    }),
+    onClick: function onClick(event) {
+      if (!disabled && !readOnly) {
+        var _inputRef$current2, _getInputProps2;
+        (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.focus();
+        (_getInputProps2 = getInputProps()) == null || _getInputProps2.onClick == null || _getInputProps2.onClick(event);
       }
-    );
-  }
-);
-const MultiSelect = React.forwardRef(
-  ({
-    className,
-    clearable = true,
-    clearInputOnSelect = false,
-    debounceTimeout,
-    disabled = false,
-    disableLabelAnimation,
-    feedback,
-    hideSelectAll = false,
-    items: initialItems,
-    itemFilter = isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest,
-    label,
-    labelAllItemsSelected = "Alle valgt",
-    labelClearAllItems = "Fjern valgte",
-    labelSelectAll = "Velg alle",
-    labelTooltip,
-    listStyle,
-    loading,
-    loadingText = "Laster resultater …",
-    maxChips = 10,
-    noMatchesText,
-    onChange = () => void 0,
-    placeholder,
-    readOnly = false,
-    selectedItems = [],
-    selectOnBlur = false,
-    selectOnTab = false,
-    style,
-    variant = "information",
-    ariaLabelChosenSingular,
-    ariaLabelChosenPlural = "valgte",
-    ariaLabelCloseList = "Lukk liste med valg",
-    ariaLabelJumpToInput = `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`,
-    ariaLabelOpenList = "Åpne liste med valg",
-    ariaLabelRemoveSelected = "trykk for å fjerne valg",
-    ariaLabelSelectedItem,
-    ...rest
-  }, ref) => {
-    const [lastHighlightedIndex, setLastHighlightedIndex] = React.useState(0);
-    const inputRef = useRef(null);
-    useEffect(() => {
-      if (rest.selectedItem !== void 0)
-        console.warn(
-          "Incorrect 'selectedItem' prop found, did you mean to use 'selectedItems?"
-        );
-    }, [rest.selectedItem]);
-    const {
-      items: normalizedItems,
-      loading: resolvedItemsLoading,
-      fetchItems
-    } = useResolvedItems(initialItems, debounceTimeout);
-    const isAllNonAsyncItemsSelected = typeof initialItems !== "function" && selectedItems.length === normalizedItems.length;
-    const selectAll = {
-      value: useRandomId("select-all"),
-      label: labelSelectAll
-    };
-    const summarySelectedItems = React.useMemo(
-      () => ({
-        value: EMPTY_INPUT,
-        label: isAllNonAsyncItemsSelected ? labelAllItemsSelected : selectedItems.length + " " + ariaLabelChosenPlural
-      }),
-      [
-        isAllNonAsyncItemsSelected,
-        selectedItems,
-        labelAllItemsSelected,
-        ariaLabelChosenPlural
-      ]
-    );
-    const [listItems, setListItems] = useState([
-      ...!hideSelectAll ? [selectAll] : [],
-      ...normalizedItems
-    ]);
-    const filterListItems = ({ inputValue: inputValue2 }) => setListItems([
-      ...!hideSelectAll ? [selectAll] : [],
-      ...normalizedItems.filter((item) => itemFilter(item, inputValue2))
-    ]);
-    const updateListItems = ({ inputValue: inputValue2 }) => {
-      const shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
-      if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
-      filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
+    },
+    tabIndex: readOnly ? 0 : -1
+  }, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
+    className: classNames('eds-dropdown__input eds-form-control', {
+      'eds-dropdown__input--hidden': showSelectedItem
+    })
+  }, getInputProps({
+    onKeyDown: function onKeyDown(e) {
+      if (isOpen && e.key === 'Tab') {
+        var highlitedItem = listItems[highlightedIndex];
+        // we don't want to clear selection with tab
+        if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
+          selectItem(highlitedItem);
+        }
+      }
+    },
+    onBlur: function onBlur() {
+      if (selectedItem !== null) setShowSelectedItem(true);
+    },
+    onFocus: function onFocus() {
+      if (!readOnly) {
+        setShowSelectedItem(false);
+      }
+    },
+    disabled: disabled,
+    readOnly: readOnly,
+    placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder,
+    tabIndex: disabled || readOnly ? -1 : undefined,
+    ref: mergeRefs(inputRef, ref)
+  }))), React.createElement(DropdownFieldAppendix, _extends({}, getToggleButtonProps({
+    'aria-busy': !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true'
+  }), {
+    ariaLabelCloseList: ariaLabelCloseList,
+    ariaLabelOpenList: ariaLabelOpenList,
+    clearable: clearable,
+    disabled: disabled || readOnly,
+    onClear: handleOnClear,
+    focusable: false,
+    labelClearSelected: labelClearSelectedItem,
+    isOpen: isOpen,
+    itemIsSelected: selectedItem !== null,
+    loadingText: loadingText,
+    loading: loading != null ? loading : resolvedItemsLoading
+  })));
+});
+
+var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "labelTooltip", "listStyle", "loading", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "selectOnTab", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
+var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _inputRef$current4;
+  var className = _ref.className,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? true : _ref$clearable,
+    _ref$clearInputOnSele = _ref.clearInputOnSelect,
+    clearInputOnSelect = _ref$clearInputOnSele === void 0 ? false : _ref$clearInputOnSele,
+    debounceTimeout = _ref.debounceTimeout,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    disableLabelAnimation = _ref.disableLabelAnimation,
+    feedback = _ref.feedback,
+    _ref$hideSelectAll = _ref.hideSelectAll,
+    hideSelectAll = _ref$hideSelectAll === void 0 ? false : _ref$hideSelectAll,
+    initialItems = _ref.items,
+    _ref$itemFilter = _ref.itemFilter,
+    itemFilter = _ref$itemFilter === void 0 ? isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest : _ref$itemFilter,
+    label = _ref.label,
+    _ref$labelAllItemsSel = _ref.labelAllItemsSelected,
+    labelAllItemsSelected = _ref$labelAllItemsSel === void 0 ? 'Alle valgt' : _ref$labelAllItemsSel,
+    _ref$labelClearAllIte = _ref.labelClearAllItems,
+    labelClearAllItems = _ref$labelClearAllIte === void 0 ? 'Fjern valgte' : _ref$labelClearAllIte,
+    _ref$labelSelectAll = _ref.labelSelectAll,
+    labelSelectAll = _ref$labelSelectAll === void 0 ? 'Velg alle' : _ref$labelSelectAll,
+    labelTooltip = _ref.labelTooltip,
+    listStyle = _ref.listStyle,
+    loading = _ref.loading,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
+    _ref$maxChips = _ref.maxChips,
+    maxChips = _ref$maxChips === void 0 ? 10 : _ref$maxChips,
+    noMatchesText = _ref.noMatchesText,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return undefined;
+    } : _ref$onChange,
+    placeholder = _ref.placeholder,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$selectedItems = _ref.selectedItems,
+    selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
+    _ref$selectOnTab = _ref.selectOnTab,
+    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
+    style = _ref.style,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'information' : _ref$variant,
+    ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
+    _ref$ariaLabelChosenP = _ref.ariaLabelChosenPlural,
+    ariaLabelChosenPlural = _ref$ariaLabelChosenP === void 0 ? 'valgte' : _ref$ariaLabelChosenP,
+    _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
+    ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
+    _ref$ariaLabelJumpToI = _ref.ariaLabelJumpToInput,
+    ariaLabelJumpToInput = _ref$ariaLabelJumpToI === void 0 ? selectedItems.length + " valgte elementer, trykk for \xE5 hoppe til tekstfeltet" : _ref$ariaLabelJumpToI,
+    _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
+    ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
+    _ref$ariaLabelRemoveS = _ref.ariaLabelRemoveSelected,
+    ariaLabelRemoveSelected = _ref$ariaLabelRemoveS === void 0 ? 'trykk for å fjerne valg' : _ref$ariaLabelRemoveS,
+    ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var _React$useState = React.useState(0),
+    lastHighlightedIndex = _React$useState[0],
+    setLastHighlightedIndex = _React$useState[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    //@ts-expect-error this is done to aid developers debug wrong prop usage
+    if (rest.selectedItem !== undefined) console.warn("Incorrect 'selectedItem' prop found, did you mean to use 'selectedItems?");
+    //@ts-expect-error selectedItem should not actually exist in rest
+  }, [rest.selectedItem]);
+  var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
+    normalizedItems = _useResolvedItems.items,
+    resolvedItemsLoading = _useResolvedItems.loading,
+    fetchItems = _useResolvedItems.fetchItems;
+  var isAllNonAsyncItemsSelected = typeof initialItems !== 'function' && selectedItems.length === normalizedItems.length;
+  // special 'item' used as Select All entry in the dropdown list
+  var selectAll = {
+    value: useRandomId('select-all'),
+    label: labelSelectAll
+  };
+  // special 'item' used as a replacement selected item tag for when
+  // there are more selected element than maxChips
+  var summarySelectedItems = React.useMemo(function () {
+    return {
+      value: EMPTY_INPUT,
+      label: isAllNonAsyncItemsSelected ? labelAllItemsSelected : selectedItems.length + ' ' + ariaLabelChosenPlural
     };
-    React.useEffect(() => {
-      filterListItems({ inputValue });
-    }, [normalizedItems]);
-    const {
-      hasSelectedItems,
-      handleListItemClicked,
-      selectAllCheckboxState,
-      clickedItemIsInSelectedItems,
-      clickedItemIsSelectAll
-    } = useMultiselectUtils({
-      listItems,
-      selectAll,
-      selectedItems
+  }, [isAllNonAsyncItemsSelected, selectedItems, labelAllItemsSelected, ariaLabelChosenPlural]);
+  var _useState = useState([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems)),
+    listItems = _useState[0],
+    setListItems = _useState[1];
+  var filterListItems = function filterListItems(_ref2) {
+    var inputValue = _ref2.inputValue;
+    return setListItems([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems.filter(function (item) {
+      return itemFilter(item, inputValue);
+    })));
+  };
+  var updateListItems = function updateListItems(_ref3) {
+    var inputValue = _ref3.inputValue;
+    var shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
+    if (shouldRefetchItems) fetchItems(inputValue != null ? inputValue : EMPTY_INPUT);
+    filterListItems({
+      inputValue: inputValue != null ? inputValue : EMPTY_INPUT
+    });
+  };
+  React.useEffect(function () {
+    filterListItems({
+      inputValue: inputValue
     });
-    const {
-      getSelectedItemProps,
-      getDropdownProps,
-      reset,
-      removeSelectedItem,
-      setSelectedItems
-    } = useMultipleSelection({
-      selectedItems,
+  }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
+  var _useMultiselectUtils = useMultiselectUtils({
+      listItems: listItems,
+      selectAll: selectAll,
+      selectedItems: selectedItems
+    }),
+    hasSelectedItems = _useMultiselectUtils.hasSelectedItems,
+    handleListItemClicked = _useMultiselectUtils.handleListItemClicked,
+    selectAllCheckboxState = _useMultiselectUtils.selectAllCheckboxState,
+    clickedItemIsInSelectedItems = _useMultiselectUtils.clickedItemIsInSelectedItems,
+    clickedItemIsSelectAll = _useMultiselectUtils.clickedItemIsSelectAll;
+  var _useMultipleSelection = useMultipleSelection({
+      selectedItems: selectedItems,
       // @ts-expect-error prop missing from library types
-      itemToString,
-      itemToKey,
-      onSelectedItemsChange({ selectedItems: newSelectedItems }) {
+      itemToString: itemToString,
+      itemToKey: itemToKey,
+      onSelectedItemsChange: function onSelectedItemsChange(_ref4) {
+        var newSelectedItems = _ref4.selectedItems;
         onChange(newSelectedItems);
       }
-    });
-    const stateReducer = React.useCallback(
-      (state, {
-        changes,
-        type
-      }) => {
-        if (changes.highlightedIndex !== void 0 && changes?.highlightedIndex >= 0) {
-          setLastHighlightedIndex(changes?.highlightedIndex);
+    }),
+    getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
+    getDropdownProps = _useMultipleSelection.getDropdownProps,
+    reset = _useMultipleSelection.reset,
+    _removeSelectedItem = _useMultipleSelection.removeSelectedItem,
+    setSelectedItems = _useMultipleSelection.setSelectedItems;
+  var stateReducer = React.useCallback(function (state, _ref5) {
+    var changes = _ref5.changes,
+      type = _ref5.type;
+    if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
+      setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
+    }
+    switch (type) {
+      // reset input value when leaving input field
+      case useCombobox.stateChangeTypes.InputBlur:
+        return _extends({}, changes, {
+          inputValue: EMPTY_INPUT
+        });
+      // keep menu open and edit input value on item selection
+      case useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case useCombobox.stateChangeTypes.ItemClick:
+        {
+          var _inputRef$current$val, _inputRef$current;
+          return _extends({}, changes, {
+            isOpen: true,
+            inputValue: clearInputOnSelect ? EMPTY_INPUT : (_inputRef$current$val = inputRef == null || (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value) != null ? _inputRef$current$val : EMPTY_INPUT
+          });
         }
-        switch (type) {
-          // reset input value when leaving input field
-          case useCombobox.stateChangeTypes.InputBlur:
-            return {
-              ...changes,
-              inputValue: EMPTY_INPUT
-            };
-          // keep menu open and edit input value on item selection
-          case useCombobox.stateChangeTypes.InputKeyDownEnter:
-          case useCombobox.stateChangeTypes.ItemClick: {
-            return {
-              ...changes,
-              isOpen: true,
-              inputValue: clearInputOnSelect ? EMPTY_INPUT : inputRef?.current?.value ?? EMPTY_INPUT
-            };
-          }
-          // edit input value when selected items is updated outside component
-          case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem: {
-            return {
-              ...changes,
-              inputValue: inputRef?.current?.value ?? EMPTY_INPUT
-            };
-          }
-          // remove leading whitespace, select item with spacebar if input is empty and filter list items
-          case useCombobox.stateChangeTypes.InputChange: {
-            const leadingWhitespaceTest = /^\s+/g;
-            const isSpacePressedOnEmptyInput = changes.inputValue === " ";
-            if (changes.inputValue?.match(leadingWhitespaceTest)) {
-              const sanitizedInputValue = changes.inputValue.replace(
-                leadingWhitespaceTest,
-                EMPTY_INPUT
-              );
-              if (isSpacePressedOnEmptyInput) {
-                if (!state.isOpen)
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    isOpen: true
-                  };
-                if (changes.highlightedIndex !== void 0) {
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    selectedItem: listItems[changes.highlightedIndex]
-                  };
-                }
+      // edit input value when selected items is updated outside component
+      case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+        {
+          var _inputRef$current$val2, _inputRef$current2;
+          return _extends({}, changes, {
+            inputValue: (_inputRef$current$val2 = inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : EMPTY_INPUT
+          });
+        }
+      // remove leading whitespace, select item with spacebar if input is empty and filter list items
+      case useCombobox.stateChangeTypes.InputChange:
+        {
+          var _changes$inputValue;
+          var leadingWhitespaceTest = /^\s+/g;
+          var isSpacePressedOnEmptyInput = changes.inputValue === ' ';
+          if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) {
+            var sanitizedInputValue = changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT);
+            if (isSpacePressedOnEmptyInput) {
+              if (!state.isOpen) return _extends({}, changes, {
+                inputValue: sanitizedInputValue,
+                isOpen: true
+              });
+              if (changes.highlightedIndex !== undefined) {
+                return _extends({}, changes, {
+                  inputValue: sanitizedInputValue,
+                  selectedItem: listItems[changes.highlightedIndex]
+                });
               }
             }
-            return changes;
           }
-          default:
-            return changes;
+          return changes;
         }
-      },
-      [hideSelectAll, normalizedItems, filterListItems, initialItems]
-    );
-    const {
-      getInputProps,
-      getItemProps,
-      getLabelProps,
-      getMenuProps,
-      getToggleButtonProps,
-      highlightedIndex,
-      setHighlightedIndex,
-      inputValue,
-      isOpen,
-      setInputValue
-    } = useCombobox({
+      default:
+        return changes;
+    }
+  }, [hideSelectAll, normalizedItems, filterListItems, initialItems]);
+  var _useCombobox = useCombobox(_extends({
       defaultHighlightedIndex: lastHighlightedIndex,
       // after selection, highlight previously selected item.
       items: listItems,
-      itemToString,
+      itemToString: itemToString,
       selectedItem: null,
-      stateReducer,
-      onInputValueChange(changes) {
-        updateListItems({ inputValue: changes.inputValue });
+      stateReducer: stateReducer,
+      onInputValueChange: function onInputValueChange(changes) {
+        updateListItems({
+          inputValue: changes.inputValue
+        });
+        // set highlighted item to first item after search
         setHighlightedIndex(hideSelectAll ? 0 : 1);
         setLastHighlightedIndex(hideSelectAll ? 0 : 1);
       },
-      onSelectedItemChange({ selectedItem: clickedItem }) {
+      onSelectedItemChange: function onSelectedItemChange(_ref6) {
+        var clickedItem = _ref6.selectedItem;
+        // clickedItem means item chosen either via mouse or keyboard
         if (!clickedItem) return;
         handleListItemClicked({
-          clickedItem,
+          clickedItem: clickedItem,
           onChange: setSelectedItems
         });
       },
       // Accessibility
-      getA11yStatusMessage: (options) => getA11yStatusMessage({
-        ...options,
-        selectAllItemIncluded: !hideSelectAll,
-        resultCount: listItems.length
-      }),
-      ...rest
-    });
-    const { refs, floatingStyles, update } = useFloating({
+      getA11yStatusMessage: function getA11yStatusMessage$1(options) {
+        return getA11yStatusMessage(_extends({}, options, {
+          selectAllItemIncluded: !hideSelectAll,
+          resultCount: listItems.length
+        }));
+      }
+    }, rest)),
+    getInputProps = _useCombobox.getInputProps,
+    getItemProps = _useCombobox.getItemProps,
+    getLabelProps = _useCombobox.getLabelProps,
+    getMenuProps = _useCombobox.getMenuProps,
+    getToggleButtonProps = _useCombobox.getToggleButtonProps,
+    highlightedIndex = _useCombobox.highlightedIndex,
+    setHighlightedIndex = _useCombobox.setHighlightedIndex,
+    inputValue = _useCombobox.inputValue,
+    isOpen = _useCombobox.isOpen,
+    setInputValue = _useCombobox.setInputValue;
+  // calculations for floating-UI popover position
+  var _useFloating = useFloating({
       open: isOpen,
-      placement: "bottom-start",
-      middleware: [
-        offset(space.extraSmall2),
-        shift({ padding: space.extraSmall }),
-        size({
-          apply({ rects, elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width}px`,
-              // Floating will flip when smaller than 10*16 px
-              // and never exceed 20*16 px.
-              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            });
-          }
-        }),
-        flip({ fallbackStrategy: "initialPlacement" })
-      ]
-    });
-    useEffect(() => {
-      if (isOpen && refs.reference.current && refs.floating.current) {
-        return autoUpdate(
-          refs.reference.current,
-          refs.floating.current,
-          update
-        );
+      placement: 'bottom-start',
+      middleware: [offset(space.extraSmall2), shift({
+        padding: space.extraSmall
+      }), size({
+        apply: function apply(_ref7) {
+          var rects = _ref7.rects,
+            elements = _ref7.elements,
+            availableHeight = _ref7.availableHeight;
+          Object.assign(elements.floating.style, {
+            width: rects.reference.width + "px",
+            // Floating will flip when smaller than 10*16 px
+            // and never exceed 20*16 px.
+            maxHeight: clamp(10 * 16, availableHeight, 20 * 16) + "px"
+          });
+        }
+      }), flip({
+        fallbackStrategy: 'initialPlacement'
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    update = _useFloating.update;
+  // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
+  // the useFloating hook but this requires the floating element to be conditionally rendered.
+  // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
+  // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
+  useEffect(function () {
+    if (isOpen && refs.reference.current && refs.floating.current) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [isOpen, refs.reference, refs.floating, update]);
+  var handleOnClear = function handleOnClear() {
+    var _inputRef$current3;
+    (_inputRef$current3 = inputRef.current) == null || _inputRef$current3.focus();
+    reset();
+  };
+  return React.createElement(BaseFormControl, _extends({
+    className: classNames('eds-dropdown', 'eds-dropdown--multiselect', className, {
+      'eds-dropdown--has-tooltip': labelTooltip !== undefined
+    }),
+    disabled: disabled,
+    disableLabelAnimation: disableLabelAnimation,
+    feedback: feedback,
+    isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
+    label: label,
+    labelId: getLabelProps().id,
+    labelProps: getLabelProps(),
+    labelTooltip: labelTooltip,
+    onBlur: function onBlur() {
+      return setInputValue('');
+    },
+    onClick: function onClick(e) {
+      if (e.target === e.currentTarget) {
+        var _getInputProps;
+        (_getInputProps = getInputProps()) == null || _getInputProps.onClick == null || _getInputProps.onClick(e);
       }
-    }, [isOpen, refs.reference, refs.floating, update]);
-    const handleOnClear = () => {
-      inputRef.current?.focus();
-      reset();
-    };
-    return /* @__PURE__ */ jsxs(
-      BaseFormControl,
-      {
-        className: classNames(
-          "eds-dropdown",
-          "eds-dropdown--multiselect",
-          className,
-          { "eds-dropdown--has-tooltip": labelTooltip !== void 0 }
-        ),
-        disabled,
-        disableLabelAnimation,
-        feedback,
-        isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
-        label,
-        labelId: getLabelProps().id,
-        labelProps: getLabelProps(),
-        labelTooltip,
-        onBlur: () => setInputValue(""),
-        onClick: (e) => {
-          if (e.target === e.currentTarget) {
-            getInputProps()?.onClick?.(e);
-          }
-        },
-        readOnly,
-        ref: refs.setReference,
-        style,
-        variant,
-        after: /* @__PURE__ */ jsx(
-          DropdownList,
-          {
-            ariaLabelChosenSingular,
-            ariaLabelSelectedItem,
-            floatingStyles,
-            getItemProps,
-            getMenuProps,
-            highlightedIndex,
-            isOpen,
-            listItems,
-            style: listStyle,
-            setListRef: refs.setFloating,
-            loading: loading ?? resolvedItemsLoading,
-            loadingText,
-            noMatchesText,
-            selectAllCheckboxState,
-            selectAllItem: selectAll,
-            selectedItems,
-            readOnly
-          }
-        ),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: classNames(
-                "eds-dropdown--multiselect__selected-items-and-input",
-                {
-                  "eds-dropdown--multiselect__selected-items-and-input--filled": hasSelectedItems
-                }
-              ),
-              children: [
-                selectedItems.length > 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { onClick: inputRef.current?.focus, children: ariaLabelJumpToInput }) : null,
-                selectedItems.length <= maxChips ? selectedItems.map((selectedItem, index) => /* @__PURE__ */ jsx(
-                  SelectedItemTag,
-                  {
-                    ariaLabelChosen: ariaLabelChosenSingular,
-                    ariaLabelRemoveSelected,
-                    disabled,
-                    getSelectedItemProps,
-                    index,
-                    readOnly,
-                    removeSelectedItem: () => {
-                      removeSelectedItem(selectedItem);
-                      inputRef?.current?.focus();
-                    },
-                    selectedItem
-                  },
-                  selectedItem?.label + (typeof selectedItem?.value === "string" ? selectedItem.value : "")
-                )) : /* @__PURE__ */ jsx(
-                  SelectedItemTag,
-                  {
-                    ariaLabelRemoveSelected: labelClearAllItems,
-                    ariaLabelChosen: "",
-                    disabled,
-                    readOnly,
-                    removeSelectedItem: handleOnClear,
-                    selectedItem: summarySelectedItems
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ...getInputProps({
-                      onKeyDown: (e) => {
-                        if (selectOnTab && isOpen && e.key === "Tab") {
-                          const highlitedItem = listItems[highlightedIndex];
-                          if (!highlitedItem) return;
-                          const shouldSkipTabSelection = clickedItemIsSelectAll(highlitedItem) || !clickedItemIsSelectAll(highlitedItem) && clickedItemIsInSelectedItems(highlitedItem);
-                          if (shouldSkipTabSelection) return;
-                          handleListItemClicked({
-                            clickedItem: highlitedItem,
-                            onChange: setSelectedItems
-                          });
-                        }
-                      },
-                      ...getDropdownProps({
-                        preventKeyAction: isOpen,
-                        value: inputValue ?? EMPTY_INPUT,
-                        ref: mergeRefs(inputRef, ref)
-                      }),
-                      className: "eds-dropdown__input eds-form-control",
-                      disabled: readOnly || disabled,
-                      placeholder,
-                      tabIndex: disabled || readOnly ? -1 : void 0
-                    })
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            DropdownFieldAppendix,
-            {
-              ...getToggleButtonProps({
-                "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
-              }),
-              ariaLabelCloseList,
-              ariaLabelOpenList,
-              clearable,
-              disabled: disabled || readOnly,
-              onClear: handleOnClear,
-              focusable: false,
-              labelClearSelected: labelClearAllItems,
-              isOpen,
-              itemIsSelected: selectedItems.length > 0,
-              loadingText,
-              loading: loading ?? resolvedItemsLoading
-            }
-          )
-        ]
+    },
+    readOnly: readOnly,
+    ref: refs.setReference,
+    style: style,
+    variant: variant,
+    after: React.createElement(DropdownList, {
+      ariaLabelChosenSingular: ariaLabelChosenSingular,
+      ariaLabelSelectedItem: ariaLabelSelectedItem,
+      floatingStyles: floatingStyles,
+      getItemProps: getItemProps,
+      getMenuProps: getMenuProps,
+      highlightedIndex: highlightedIndex,
+      isOpen: isOpen,
+      listItems: listItems,
+      style: listStyle,
+      setListRef: refs.setFloating,
+      loading: loading != null ? loading : resolvedItemsLoading,
+      loadingText: loadingText,
+      noMatchesText: noMatchesText,
+      selectAllCheckboxState: selectAllCheckboxState,
+      selectAllItem: selectAll,
+      selectedItems: selectedItems,
+      readOnly: readOnly
+    })
+  }, rest), React.createElement("div", {
+    className: classNames('eds-dropdown--multiselect__selected-items-and-input', {
+      'eds-dropdown--multiselect__selected-items-and-input--filled': hasSelectedItems
+    })
+  }, selectedItems.length > 1 ? React.createElement(VisuallyHidden, {
+    onClick: (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus
+  }, ariaLabelJumpToInput) : null, selectedItems.length <= maxChips ? selectedItems.map(function (selectedItem, index) {
+    return React.createElement(SelectedItemTag, {
+      ariaLabelChosen: ariaLabelChosenSingular,
+      ariaLabelRemoveSelected: ariaLabelRemoveSelected,
+      disabled: disabled,
+      getSelectedItemProps: getSelectedItemProps,
+      index: index,
+      key: (selectedItem == null ? void 0 : selectedItem.label) + (typeof (selectedItem == null ? void 0 : selectedItem.value) === 'string' ? selectedItem.value : ''),
+      readOnly: readOnly,
+      removeSelectedItem: function removeSelectedItem() {
+        var _inputRef$current5;
+        _removeSelectedItem(selectedItem);
+        inputRef == null || (_inputRef$current5 = inputRef.current) == null || _inputRef$current5.focus();
+      },
+      selectedItem: selectedItem
+    });
+  }) : React.createElement(SelectedItemTag, {
+    ariaLabelRemoveSelected: labelClearAllItems,
+    ariaLabelChosen: "",
+    disabled: disabled,
+    readOnly: readOnly,
+    removeSelectedItem: handleOnClear,
+    selectedItem: summarySelectedItems
+  }), React.createElement("input", _extends({}, getInputProps(_extends({
+    onKeyDown: function onKeyDown(e) {
+      if (selectOnTab && isOpen && e.key === 'Tab') {
+        var highlitedItem = listItems[highlightedIndex];
+        if (!highlitedItem) return;
+        // Skip tab selection for select all or if item already is selected
+        var shouldSkipTabSelection = clickedItemIsSelectAll(highlitedItem) || !clickedItemIsSelectAll(highlitedItem) && clickedItemIsInSelectedItems(highlitedItem);
+        if (shouldSkipTabSelection) return;
+        handleListItemClicked({
+          clickedItem: highlitedItem,
+          onChange: setSelectedItems
+        });
       }
-    );
-  }
-);
-const Dropdown = React.forwardRef(
-  ({
-    ariaLabelChosenSingular,
-    ariaLabelCloseList = "Lukk liste med valg",
-    ariaLabelOpenList = "Åpne liste med valg",
-    ariaLabelSelectedItem,
-    className,
-    clearable = false,
-    disabled = false,
-    disableLabelAnimation,
-    feedback,
-    items: initialItems,
-    label,
-    labelClearSelectedItem = "fjern valgt",
-    labelTooltip,
-    listStyle,
-    loading,
-    loadingText = "Laster resultater …",
-    noMatchesText = "Ingen tilgjengelige valg …",
-    onChange,
-    placeholder,
-    prepend,
-    readOnly = false,
-    selectedItem,
-    selectOnBlur = false,
-    selectOnTab = false,
-    style,
-    variant = "information",
-    ...rest
-  }, ref) => {
-    const { items: normalizedItems, loading: resolvedItemsLoading } = useResolvedItems(initialItems);
-    const isFilled = selectedItem !== null || placeholder !== void 0;
-    const {
-      isOpen,
-      getItemProps,
-      getLabelProps,
-      getMenuProps,
-      getToggleButtonProps,
-      highlightedIndex,
-      selectItem,
-      reset
-    } = useSelect({
+    }
+  }, getDropdownProps({
+    preventKeyAction: isOpen,
+    value: inputValue != null ? inputValue : EMPTY_INPUT,
+    ref: mergeRefs(inputRef, ref)
+  }), {
+    className: 'eds-dropdown__input eds-form-control',
+    disabled: readOnly || disabled,
+    placeholder: placeholder,
+    tabIndex: disabled || readOnly ? -1 : undefined
+  }))))), React.createElement(DropdownFieldAppendix, _extends({}, getToggleButtonProps({
+    'aria-busy': !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true'
+  }), {
+    ariaLabelCloseList: ariaLabelCloseList,
+    ariaLabelOpenList: ariaLabelOpenList,
+    clearable: clearable,
+    disabled: disabled || readOnly,
+    onClear: handleOnClear,
+    focusable: false,
+    labelClearSelected: labelClearAllItems,
+    isOpen: isOpen,
+    itemIsSelected: selectedItems.length > 0,
+    loadingText: loadingText,
+    loading: loading != null ? loading : resolvedItemsLoading
+  })));
+});
+
+var _excluded$1 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loading", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
+var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _getLabelProps, _selectedItem$label;
+  var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
+    _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
+    ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
+    _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
+    ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
+    ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
+    className = _ref.className,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    disableLabelAnimation = _ref.disableLabelAnimation,
+    feedback = _ref.feedback,
+    initialItems = _ref.items,
+    label = _ref.label,
+    _ref$labelClearSelect = _ref.labelClearSelectedItem,
+    labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
+    labelTooltip = _ref.labelTooltip,
+    listStyle = _ref.listStyle,
+    loading = _ref.loading,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
+    _ref$noMatchesText = _ref.noMatchesText,
+    noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen tilgjengelige valg …' : _ref$noMatchesText,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    prepend = _ref.prepend,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    selectedItem = _ref.selectedItem,
+    _ref$selectOnBlur = _ref.selectOnBlur,
+    selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
+    _ref$selectOnTab = _ref.selectOnTab,
+    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
+    style = _ref.style,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'information' : _ref$variant,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var _useResolvedItems = useResolvedItems(initialItems),
+    normalizedItems = _useResolvedItems.items,
+    resolvedItemsLoading = _useResolvedItems.loading;
+  var isFilled = selectedItem !== null || placeholder !== undefined;
+  var _useSelect = useSelect({
       items: normalizedItems,
-      defaultHighlightedIndex: selectedItem ? void 0 : 0,
-      selectedItem,
-      stateReducer(_, { changes, type }) {
-        const toggleButtonIsFocused = typeof document !== "undefined" && document.activeElement === refs.reference.current;
+      defaultHighlightedIndex: selectedItem ? undefined : 0,
+      selectedItem: selectedItem,
+      stateReducer: function stateReducer(_, _ref2) {
+        var changes = _ref2.changes,
+          type = _ref2.type;
+        var toggleButtonIsFocused = typeof document !== 'undefined' && document.activeElement === refs.reference.current;
         switch (type) {
           case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
           case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
-            if (!toggleButtonIsFocused) return { ...changes, isOpen: false };
+            if (!toggleButtonIsFocused) return _extends({}, changes, {
+              isOpen: false
+            });
         }
         return changes;
       },
-      onStateChange({ type, selectedItem: newSelectedItem }) {
+      onStateChange: function onStateChange(_ref3) {
+        var type = _ref3.type,
+          newSelectedItem = _ref3.selectedItem;
         switch (type) {
           case useSelect.stateChangeTypes.ToggleButtonBlur:
             if (!selectOnBlur) return;
         }
-        if (newSelectedItem === void 0) return;
-        onChange?.(newSelectedItem ?? null);
+        if (newSelectedItem === undefined) return;
+        onChange == null || onChange(newSelectedItem != null ? newSelectedItem : null);
       },
-      itemToString
-    });
-    const { refs, floatingStyles, update } = useFloating({
+      itemToString: itemToString
+    }),
+    isOpen = _useSelect.isOpen,
+    getItemProps = _useSelect.getItemProps,
+    getLabelProps = _useSelect.getLabelProps,
+    getMenuProps = _useSelect.getMenuProps,
+    getToggleButtonProps = _useSelect.getToggleButtonProps,
+    highlightedIndex = _useSelect.highlightedIndex,
+    selectItem = _useSelect.selectItem,
+    reset = _useSelect.reset;
+  // calculations for floating-UI popover position
+  var _useFloating = useFloating({
       open: isOpen,
-      placement: "bottom-start",
-      middleware: [
-        offset(space.extraSmall2),
-        shift({ padding: space.extraSmall }),
-        size({
-          apply({ rects, elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width}px`,
-              // Floating will flip when smaller than 10*16 px
-              // and never exceed 20*16 px.
-              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            });
-          }
-        }),
-        flip({ fallbackStrategy: "initialPlacement" })
-      ]
-    });
-    useEffect(() => {
-      if (isOpen && refs.reference.current && refs.floating.current) {
-        return autoUpdate(
-          refs.reference.current,
-          refs.floating.current,
-          update
-        );
-      }
-    }, [isOpen, refs.reference, refs.floating, update]);
-    const handleOnClear = () => {
-      reset();
-      refs.reference.current?.focus();
-    };
-    return /* @__PURE__ */ jsxs(
-      BaseFormControl,
-      {
-        className: classNames("eds-dropdown", className, {
-          "eds-dropdown--has-tooltip": labelTooltip !== void 0
-        }),
-        disableLabelAnimation,
-        feedback,
-        isFilled,
-        labelProps: getLabelProps(),
-        labelTooltip,
-        prepend,
-        style,
-        variant,
-        ...getToggleButtonProps({
-          ref: mergeRefs(ref, refs.setReference),
-          "aria-disabled": disabled,
-          "aria-label": disabled ? "Disabled dropdown" : "",
-          disabled,
-          readOnly,
-          label,
-          labelId: getLabelProps()?.id,
-          children: void 0,
-          tabIndex: disabled || readOnly ? -1 : 0,
-          onKeyDown(e) {
-            if (isOpen && e.key === "Tab") {
-              const highlitedItem = normalizedItems[highlightedIndex];
-              if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
-                selectItem(highlitedItem);
-              }
-            }
-          }
-        }),
-        after: /* @__PURE__ */ jsx(
-          DropdownList,
-          {
-            ariaLabelChosenSingular,
-            ariaLabelSelectedItem,
-            floatingStyles,
-            getItemProps,
-            getMenuProps,
-            highlightedIndex,
-            isOpen,
-            listItems: normalizedItems,
-            noMatchesText,
-            style: listStyle,
-            setListRef: refs.setFloating,
-            loading: loading ?? resolvedItemsLoading,
-            loadingText,
-            selectedItems: selectedItem !== null ? [selectedItem] : [],
-            readOnly
-          }
-        ),
-        ...rest,
-        append: void 0,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "eds-dropdown__selected-item", children: selectedItem?.label ?? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classNames(
-                "eds-dropdown__selected-item__placeholder",
-                {
-                  "eds-dropdown__selected-item__placeholder--readonly": readOnly
-                }
-              ),
-              children: placeholder
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            DropdownFieldAppendix,
-            {
-              "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true",
-              "aria-expanded": isOpen,
-              clearable,
-              onClear: handleOnClear,
-              disabled: disabled || readOnly,
-              focusable: false,
-              labelClearSelected: labelClearSelectedItem,
-              isOpen,
-              itemIsSelected: selectedItem !== null,
-              ariaLabelCloseList,
-              ariaLabelOpenList,
-              loading: false,
-              loadingText: void 0
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-const error = "error";
-const NativeDropdown = forwardRef(
-  ({
-    className,
-    disabled = false,
-    disableLabelAnimation,
-    feedback,
-    items,
-    label,
-    loadingText,
-    onChange,
-    prepend,
-    readOnly = false,
-    selectedItem,
-    style,
-    value,
-    variant,
-    ...rest
-  }, ref) => {
-    const { items: normalizedItems, loading } = useResolvedItems(items);
-    const nativeDropdownId = useRandomId("eds-dropdown-native");
-    return /* @__PURE__ */ jsx(
-      BaseFormControl,
-      {
-        disabled,
-        readOnly,
-        prepend,
-        append: /* @__PURE__ */ jsx(
-          FieldAppend,
-          {
-            hidden: disabled || readOnly,
-            loading,
-            loadingText
-          }
-        ),
-        className,
-        style,
-        label,
-        labelId: nativeDropdownId,
-        variant,
-        feedback,
-        disableLabelAnimation,
-        isFilled: true,
-        children: /* @__PURE__ */ jsx(
-          "select",
-          {
-            "aria-invalid": variant === "negative" || variant === error,
-            "aria-labelledby": nativeDropdownId,
-            "aria-busy": loading,
-            className: "eds-form-control eds-dropdown--native",
-            disabled: disabled || readOnly,
-            onChange: (event) => {
-              onChange?.({
-                value: event.target.value,
-                selectedItem: normalizedItems.find(
-                  (item) => item.value === event.target.value
-                ) ?? null,
-                target: event.target
-              });
-            },
-            value: value ?? selectedItem?.value ?? void 0,
-            ref,
-            ...rest,
-            children: normalizedItems.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.label }, item.value))
-          }
-        )
+      placement: 'bottom-start',
+      middleware: [offset(space.extraSmall2), shift({
+        padding: space.extraSmall
+      }), size({
+        apply: function apply(_ref4) {
+          var rects = _ref4.rects,
+            elements = _ref4.elements,
+            availableHeight = _ref4.availableHeight;
+          Object.assign(elements.floating.style, {
+            width: rects.reference.width + "px",
+            // Floating will flip when smaller than 10*16 px
+            // and never exceed 20*16 px.
+            maxHeight: clamp(10 * 16, availableHeight, 20 * 16) + "px"
+          });
+        }
+      }), flip({
+        fallbackStrategy: 'initialPlacement'
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    update = _useFloating.update;
+  // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
+  // the useFloating hook but this requires the floating element to be conditionally rendered.
+  // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
+  // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
+  useEffect(function () {
+    if (isOpen && refs.reference.current && refs.floating.current) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [isOpen, refs.reference, refs.floating, update]);
+  var handleOnClear = function handleOnClear() {
+    var _refs$reference$curre;
+    reset();
+    (_refs$reference$curre = refs.reference.current) == null || _refs$reference$curre.focus();
+  };
+  return React.createElement(BaseFormControl, _extends({
+    className: classNames('eds-dropdown', className, {
+      'eds-dropdown--has-tooltip': labelTooltip !== undefined
+    }),
+    disableLabelAnimation: disableLabelAnimation,
+    feedback: feedback,
+    isFilled: isFilled,
+    labelProps: getLabelProps(),
+    labelTooltip: labelTooltip,
+    prepend: prepend,
+    style: style,
+    variant: variant
+  }, getToggleButtonProps({
+    ref: mergeRefs(ref, refs.setReference),
+    'aria-disabled': disabled,
+    'aria-label': disabled ? 'Disabled dropdown' : '',
+    disabled: disabled,
+    readOnly: readOnly,
+    label: label,
+    labelId: (_getLabelProps = getLabelProps()) == null ? void 0 : _getLabelProps.id,
+    children: undefined,
+    tabIndex: disabled || readOnly ? -1 : 0,
+    onKeyDown: function onKeyDown(e) {
+      if (isOpen && e.key === 'Tab') {
+        var highlitedItem = normalizedItems[highlightedIndex];
+        // we don't want to clear selection with tab
+        if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
+          selectItem(highlitedItem);
+        }
       }
-    );
-  }
-);
-const FieldAppend = ({
-  loading,
-  loadingText,
-  hidden
-}) => {
+    }
+  }), {
+    after: React.createElement(DropdownList, {
+      ariaLabelChosenSingular: ariaLabelChosenSingular,
+      ariaLabelSelectedItem: ariaLabelSelectedItem,
+      floatingStyles: floatingStyles,
+      getItemProps: getItemProps,
+      getMenuProps: getMenuProps,
+      highlightedIndex: highlightedIndex,
+      isOpen: isOpen,
+      listItems: normalizedItems,
+      noMatchesText: noMatchesText,
+      style: listStyle,
+      setListRef: refs.setFloating,
+      loading: loading != null ? loading : resolvedItemsLoading,
+      loadingText: loadingText,
+      selectedItems: selectedItem !== null ? [selectedItem] : [],
+      readOnly: readOnly
+    })
+  }, rest, {
+    // Append is not supported as of now
+    append: undefined
+  }), React.createElement("div", {
+    className: "eds-dropdown__selected-item"
+  }, (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("div", {
+    className: classNames('eds-dropdown__selected-item__placeholder', {
+      'eds-dropdown__selected-item__placeholder--readonly': readOnly
+    })
+  }, placeholder)), React.createElement(DropdownFieldAppendix, {
+    "aria-busy": !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true',
+    "aria-expanded": isOpen,
+    clearable: clearable,
+    onClear: handleOnClear,
+    disabled: disabled || readOnly,
+    focusable: false,
+    labelClearSelected: labelClearSelectedItem,
+    isOpen: isOpen,
+    itemIsSelected: selectedItem !== null,
+    ariaLabelCloseList: ariaLabelCloseList,
+    ariaLabelOpenList: ariaLabelOpenList,
+    loading: false,
+    loadingText: undefined
+  }));
+});
+
+var _excluded = ["className", "disabled", "disableLabelAnimation", "feedback", "items", "label", "loadingText", "onChange", "prepend", "readOnly", "selectedItem", "style", "value", "variant"];
+/** @deprecated use variant="negative" instead */
+var error = 'error';
+var NativeDropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref2;
+  var className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    disableLabelAnimation = _ref.disableLabelAnimation,
+    feedback = _ref.feedback,
+    items = _ref.items,
+    label = _ref.label,
+    loadingText = _ref.loadingText,
+    _onChange = _ref.onChange,
+    prepend = _ref.prepend,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    selectedItem = _ref.selectedItem,
+    style = _ref.style,
+    value = _ref.value,
+    variant = _ref.variant,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useResolvedItems = useResolvedItems(items),
+    normalizedItems = _useResolvedItems.items,
+    loading = _useResolvedItems.loading;
+  var nativeDropdownId = useRandomId('eds-dropdown-native');
+  return React.createElement(BaseFormControl, {
+    disabled: disabled,
+    readOnly: readOnly,
+    prepend: prepend,
+    append: React.createElement(FieldAppend, {
+      hidden: disabled || readOnly,
+      loading: loading,
+      loadingText: loadingText
+    }),
+    className: className,
+    style: style,
+    label: label,
+    labelId: nativeDropdownId,
+    variant: variant,
+    feedback: feedback,
+    disableLabelAnimation: disableLabelAnimation,
+    isFilled: true
+  }, React.createElement("select", _extends({
+    "aria-invalid": variant === 'negative' || variant === error,
+    "aria-labelledby": nativeDropdownId,
+    "aria-busy": loading,
+    className: "eds-form-control eds-dropdown--native",
+    disabled: disabled || readOnly,
+    onChange: function onChange(event) {
+      var _normalizedItems$find;
+      _onChange == null || _onChange({
+        value: event.target.value,
+        selectedItem: (_normalizedItems$find = normalizedItems.find(function (item) {
+          return item.value === event.target.value;
+        })) != null ? _normalizedItems$find : null,
+        target: event.target
+      });
+    },
+    value: (_ref2 = value != null ? value : selectedItem == null ? void 0 : selectedItem.value) != null ? _ref2 : undefined,
+    ref: ref
+  }, rest), normalizedItems.map(function (item) {
+    return React.createElement("option", {
+      key: item.value,
+      value: item.value
+    }, item.label);
+  })));
+});
+var FieldAppend = function FieldAppend(_ref3) {
+  var loading = _ref3.loading,
+    loadingText = _ref3.loadingText,
+    hidden = _ref3.hidden;
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "eds-dropdown-native__loading-dots", children: /* @__PURE__ */ jsx(LoadingDots, { "aria-label": loadingText }) });
+    return React.createElement("div", {
+      className: "eds-dropdown-native__loading-dots"
+    }, React.createElement(LoadingDots, {
+      "aria-label": loadingText
+    }));
   }
   if (hidden) {
-    return /* @__PURE__ */ jsx(Fragment, {});
+    return React.createElement(React.Fragment, null);
   }
-  return /* @__PURE__ */ jsx(DownArrowIcon, { inline: true });
-};
-warnAboutMissingStyles("dropdown", "form", "a11y", "chip");
-export {
-  Dropdown,
-  MultiSelect,
-  NativeDropdown,
-  SearchableDropdown
+  return React.createElement(DownArrowIcon, {
+    inline: true
+  });
 };
+
+warnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');
+
+export { Dropdown, MultiSelect, NativeDropdown, SearchableDropdown };
 //# sourceMappingURL=dropdown.esm.js.map