@entur/dropdown 7.3.2-beta.1 → 7.3.2-beta.11

package/dist/dropdown.cjs.development.js

@@ -0,0 +1,1825 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@entur/utils');
+var React = require('react');
+var downshift = require('downshift');
+var classNames = require('classnames');
+var reactDom = require('@floating-ui/react-dom');
+var form = require('@entur/form');
+var tokens = require('@entur/tokens');
+var a11y = require('@entur/a11y');
+var button = require('@entur/button');
+var chip = require('@entur/chip');
+var icons = require('@entur/icons');
+var loader = require('@entur/loader');
+var tooltip = require('@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;
+      }
+      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 {
+          value: t,
+          done: y
+        };
+      };
+    }(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;
+  };
+}
+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
+        };
+      }
+    };
+  }
+  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;
+      }
+    };
+  }
+  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);
+    });
+  };
+  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:
+        {
+          return {
+            label: (selectAllItem == null ? void 0 : selectAllItem.label) + ", " + ariaLabelChosenSingular,
+            selected: true
+          };
+        }
+      default:
+        {
+          return {
+            label: "" + (selectAllItem == null ? void 0 : selectAllItem.label),
+            selected: false
+          };
+        }
+    }
+  };
+  var selectAllListItemContent = function selectAllListItemContent() {
+    return React.createElement(React.Fragment, null, React.createElement(form.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(form.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(a11y.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
+    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));
+      });
+    }())
+  );
+};
+
+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(chip.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);
+    },
+    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));
+};
+var DropdownFieldAppendix = /*#__PURE__*/React.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;
+  }
+  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(button.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(icons.DownArrowIcon, {
+    "aria-hidden": "true"
+  }) : React.createElement(loader.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.Tooltip, {
+    "aria-hidden": "true",
+    placement: "top",
+    content: labelClearSelectedItems,
+    className: "eds-dropdown__appendix__clear-button__tooltip"
+  }, React.createElement(button.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();
+      }
+    },
+    "aria-label": labelClearSelectedItems
+  }, React.createElement(icons.CloseSmallIcon, {
+    "aria-hidden": "true"
+  }))), React.createElement("div", {
+    className: "eds-dropdown__appendix__divider"
+  }));
+};
+
+var useNormalizedItems = function useNormalizedItems(items) {
+  return React.useMemo(function () {
+    return items.map(function (item) {
+      if (typeof item == 'string') {
+        return {
+          value: item,
+          label: item
+        };
+      }
+      if ((item == null ? void 0 : item.value) === undefined) {
+        return _extends({}, item, {
+          value: item.label
+        });
+      }
+      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 = utils.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(function () {
+    // Let's fetch the list initially if it's specified
+    if (itemsIsAFunction) {
+      debouncedFetchItems('');
+    }
+  }, [itemsIsAFunction, itemsResolver]);
+  return {
+    items: normalizedItems,
+    loading: itemsIsAFunction ? loading : false,
+    fetchItems: debouncedFetchItems
+  };
+};
+
+/* start general utils */
+var EMPTY_INPUT = '';
+function lowerCaseFilterTest(item, input) {
+  if (!input) {
+    return true;
+  }
+  var sanitizeEscapeCharacters = input.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+  var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
+  return inputRegex.test(item.label);
+}
+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;
+}
+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);
+      }
+      return selectAllUnselectedItemsInListItems(onChange);
+    }
+    if (clickedItemIsInSelectedItems(clickedItem)) {
+      return removeClickedItemFromSelectedItems(clickedItem, onChange);
+    }
+    addClickedItemToSelectedItems(clickedItem, onChange);
+  };
+  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';
+    return false;
+  };
+  var selectAllUnselectedItemsInListItems = function selectAllUnselectedItemsInListItems(onChange) {
+    onChange([].concat(selectedItems, unselectedItemsInListItems));
+  };
+  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: 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) {
+  var isOpen = options.isOpen,
+    _options$selectAllIte = options.selectAllItemIncluded,
+    selectAllItemIncluded = _options$selectAllIte === void 0 ? false : _options$selectAllIte,
+    resultCount = options.resultCount;
+  if (!isOpen) {
+    return '';
+  }
+  var resultCountWithoutSelectAll = selectAllItemIncluded ? resultCount - 1 : resultCount;
+  if (resultCountWithoutSelectAll === 0) {
+    return 'Ingen resultater';
+  }
+  return resultCountWithoutSelectAll + " resultat" + (resultCountWithoutSelectAll === 1 ? '' : 'er') + " tilgjengelig, naviger med pil opp eller ned, velg elementer med Enter.";
+}
+/* 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 = React.useState(value !== null),
+    showSelectedItem = _useState[0],
+    setShowSelectedItem = _useState[1];
+  var _useState2 = React.useState(0),
+    lastHighlightedIndex = _useState2[0],
+    setLastHighlightedIndex = _useState2[1];
+  var inputRef = React.useRef(null);
+  var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
+    normalizedItems = _useResolvedItems.items,
+    resolvedItemsLoading = _useResolvedItems.loading,
+    fetchItems = _useResolvedItems.fetchItems;
+  var _useState3 = React.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;
+  React.useEffect(function () {
+    filterListItems({
+      inputValue: inputValue
+    });
+  }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
+  React.useEffect(function () {
+    // sync internal state on initial render
+    if (selectedItem !== null && !inputHasFocus) {
+      setShowSelectedItem(true);
+      updateListItems({
+        inputValue: EMPTY_INPUT
+      });
+      setInputValue(EMPTY_INPUT);
+    }
+  }, []);
+  var stateReducer = React.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 downshift.useCombobox.stateChangeTypes.ItemClick:
+      case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case downshift.useCombobox.stateChangeTypes.InputBlur:
+        return resetInputState({
+          changes: changes
+        });
+      case downshift.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 downshift.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 _extends({}, changes, {
+            highlightedIndex: 0
+          });
+        }
+      default:
+        return changes;
+    }
+  }, [fetchItems, filterListItems, inputHasFocus, resetInputState]);
+  var _useCombobox = downshift.useCombobox({
+      defaultHighlightedIndex: lastHighlightedIndex,
+      items: listItems,
+      itemToString: itemToString,
+      selectedItem: value,
+      stateReducer: stateReducer,
+      onInputValueChange: function onInputValueChange(changes) {
+        updateListItems({
+          inputValue: changes.inputValue
+        });
+      },
+      onSelectedItemChange: function onSelectedItemChange(_ref6) {
+        var newSelectedItem = _ref6.selectedItem;
+        onChange(newSelectedItem);
+      },
+      // Accessibility
+      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 = reactDom.useFloating({
+      open: isOpen,
+      placement: 'bottom-start',
+      middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.shift({
+        padding: tokens.space.extraSmall
+      }), reactDom.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"
+          });
+        }
+      }), reactDom.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
+  React.useEffect(function () {
+    if (isOpen && refs.reference.current && refs.floating.current) {
+      return reactDom.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(form.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);
+      }
+    },
+    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);
+      }
+    },
+    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: utils.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 = React.useRef(null);
+  React.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: utils.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
+    };
+  }, [isAllNonAsyncItemsSelected, selectedItems, labelAllItemsSelected, ariaLabelChosenPlural]);
+  var _useState = React.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
+    });
+  }, [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 = downshift.useMultipleSelection({
+      selectedItems: selectedItems,
+      // @ts-expect-error prop missing from library types
+      itemToString: itemToString,
+      itemToKey: itemToKey,
+      onSelectedItemsChange: function onSelectedItemsChange(_ref4) {
+        var newSelectedItems = _ref4.selectedItems;
+        onChange(newSelectedItems);
+      }
+    }),
+    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 downshift.useCombobox.stateChangeTypes.InputBlur:
+        return _extends({}, changes, {
+          inputValue: EMPTY_INPUT
+        });
+      // keep menu open and edit input value on item selection
+      case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case downshift.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
+          });
+        }
+      // edit input value when selected items is updated outside component
+      case downshift.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 downshift.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;
+    }
+  }, [hideSelectAll, normalizedItems, filterListItems, initialItems]);
+  var _useCombobox = downshift.useCombobox(_extends({
+      defaultHighlightedIndex: lastHighlightedIndex,
+      // after selection, highlight previously selected item.
+      items: listItems,
+      itemToString: itemToString,
+      selectedItem: null,
+      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: function onSelectedItemChange(_ref6) {
+        var clickedItem = _ref6.selectedItem;
+        // clickedItem means item chosen either via mouse or keyboard
+        if (!clickedItem) return;
+        handleListItemClicked({
+          clickedItem: clickedItem,
+          onChange: setSelectedItems
+        });
+      },
+      // Accessibility
+      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 = reactDom.useFloating({
+      open: isOpen,
+      placement: 'bottom-start',
+      middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.shift({
+        padding: tokens.space.extraSmall
+      }), reactDom.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"
+          });
+        }
+      }), reactDom.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
+  React.useEffect(function () {
+    if (isOpen && refs.reference.current && refs.floating.current) {
+      return reactDom.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(form.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);
+      }
+    },
+    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(a11y.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
+        });
+      }
+    }
+  }, getDropdownProps({
+    preventKeyAction: isOpen,
+    value: inputValue != null ? inputValue : EMPTY_INPUT,
+    ref: utils.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 = downshift.useSelect({
+      items: normalizedItems,
+      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 downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
+          case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
+            if (!toggleButtonIsFocused) return _extends({}, changes, {
+              isOpen: false
+            });
+        }
+        return changes;
+      },
+      onStateChange: function onStateChange(_ref3) {
+        var type = _ref3.type,
+          newSelectedItem = _ref3.selectedItem;
+        switch (type) {
+          case downshift.useSelect.stateChangeTypes.ToggleButtonBlur:
+            if (!selectOnBlur) return;
+        }
+        if (newSelectedItem === undefined) return;
+        onChange == null || onChange(newSelectedItem != null ? newSelectedItem : null);
+      },
+      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 = reactDom.useFloating({
+      open: isOpen,
+      placement: 'bottom-start',
+      middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.shift({
+        padding: tokens.space.extraSmall
+      }), reactDom.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"
+          });
+        }
+      }), reactDom.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
+  React.useEffect(function () {
+    if (isOpen && refs.reference.current && refs.floating.current) {
+      return reactDom.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(form.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: utils.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);
+        }
+      }
+    }
+  }), {
+    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__*/React.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 = utils.useRandomId('eds-dropdown-native');
+  return React.createElement(form.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 React.createElement("div", {
+      className: "eds-dropdown-native__loading-dots"
+    }, React.createElement(loader.LoadingDots, {
+      "aria-label": loadingText
+    }));
+  }
+  if (hidden) {
+    return React.createElement(React.Fragment, null);
+  }
+  return React.createElement(icons.DownArrowIcon, {
+    inline: true
+  });
+};
+
+utils.warnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');
+
+exports.Dropdown = Dropdown;
+exports.MultiSelect = MultiSelect;
+exports.NativeDropdown = NativeDropdown;
+exports.SearchableDropdown = SearchableDropdown;
+//# sourceMappingURL=dropdown.cjs.development.js.map