@entur/dropdown 7.3.2-beta.8 → 7.3.2

package/dist/dropdown.cjs.js

@@ -0,0 +1,1465 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@entur/utils");
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const downshift = require("downshift");
+const classNames = require("classnames");
+const reactDom = require("@floating-ui/react-dom");
+const form = require("@entur/form");
+const tokens = require("@entur/tokens");
+const a11y = require("@entur/a11y");
+const button = require("@entur/button");
+const chip = require("@entur/chip");
+const icons = require("@entur/icons");
+const loader = require("@entur/loader");
+const tooltip = require("@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
+        };
+      }
+      case true: {
+        return {
+          label: `${selectAllItem?.label}, ${ariaLabelChosenSingular}`,
+          selected: true
+        };
+      }
+      default: {
+        return { label: `${selectAllItem?.label}`, selected: false };
+      }
+    }
+  };
+  const selectAllListItemContent = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      form.Checkbox,
+      {
+        "aria-hidden": "true",
+        checked: selectAllCheckboxState?.(),
+        className: "eds-dropdown__list__item__checkbox",
+        tabIndex: -1,
+        onChange: () => void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "eds-dropdown__list__item__text",
+        "aria-label": ariaValuesSelectAll().label,
+        children: selectAllItem?.label
+      }
+    )
+  ] });
+  const isReactComponent = (icon) => {
+    return typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon && typeof icon.$$typeof === "symbol";
+  };
+  const listItemContent = (item) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      isMultiselect && /* @__PURE__ */ jsxRuntime.jsx(
+        form.Checkbox,
+        {
+          "aria-hidden": "true",
+          checked: isItemSelected(item),
+          className: "eds-dropdown__list__item__checkbox",
+          tabIndex: -1,
+          onChange: () => void 0
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "eds-dropdown__list__item__text", children: [
+        item.label,
+        /* @__PURE__ */ jsxRuntime.jsx(a11y.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__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            inline: true,
+            className: "eds-dropdown__list__item__icon"
+          },
+          key
+        );
+      }) : null
+    ] });
+  };
+  return (
+    // use popover from @entur/tooltip when that package upgrades to floating-ui
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "li",
+              {
+                className: "eds-dropdown__list__item",
+                children: loadingText
+              },
+              "dropdown-list-loading"
+            );
+          }
+          if (isNoMatches) {
+            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
+            );
+          });
+        })()
+      }
+    )
+  );
+};
+const SelectedItemTag = ({
+  ariaLabelRemoveSelected,
+  ariaLabelChosen = "valgt",
+  disabled,
+  getSelectedItemProps,
+  index,
+  readOnly,
+  removeSelectedItem,
+  selectedItem
+}) => {
+  const { tabIndex: _, ...selectedItemProps } = getSelectedItemProps?.({
+    selectedItem,
+    index
+  }) ?? {};
+  return /* @__PURE__ */ React.createElement(
+    chip.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"
+    },
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "eds-dropdown__selected-item-tag__text",
+        children: selectedItem.label
+      }
+    )
+  );
+};
+const DropdownFieldAppendix = React.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !disabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-dropdown__appendix", children: [
+      clearable && itemIsSelected && /* @__PURE__ */ jsxRuntime.jsx(
+        ClearableButton,
+        {
+          onClear,
+          focusable: true,
+          labelClearSelectedItems: labelClearSelected
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button.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__ */ jsxRuntime.jsx(icons.DownArrowIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(loader.LoadingDots, { "aria-hidden": "true" })
+        }
+      )
+    ] }) });
+  }
+);
+const ClearableButton = ({
+  onClear,
+  labelClearSelectedItems = "Fjern valgte",
+  focusable = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      tooltip.Tooltip,
+      {
+        "aria-hidden": "true",
+        placement: "top",
+        content: labelClearSelectedItems,
+        className: "eds-dropdown__appendix__clear-button__tooltip",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          button.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__ */ jsxRuntime.jsx(icons.CloseSmallIcon, { "aria-hidden": "true" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("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;
+      }
+      setLoading(false);
+      setItems(resolvedItems);
+    } catch (error2) {
+      if (error2 && typeof error2 === "object" && "name" in error2 && error2.name === "AbortError") {
+        return;
+      }
+      console.warn(
+        "The following error was received but not handled inside Entur Designsystems useResolvedItems hook:"
+      );
+      throw error2;
+    }
+  };
+  const debouncedFetchItems = utils.useDebounce(updateItems, debounceTimeout);
+  const normalizedItems = useNormalizedItems(items);
+  React.useEffect(() => {
+    return () => abortControllerRef?.current?.abort("Component unmounted");
+  }, []);
+  React.useEffect(() => {
+    if (itemsIsAFunction) {
+      debouncedFetchItems("");
+    }
+  }, [itemsIsAFunction, itemsResolver]);
+  return {
+    items: normalizedItems,
+    loading: itemsIsAFunction ? loading : false,
+    fetchItems: debouncedFetchItems
+  };
+};
+const EMPTY_INPUT = "";
+function lowerCaseFilterTest(item, input) {
+  if (!input) {
+    return true;
+  }
+  const sanitizeEscapeCharacters = input.replace(
+    /[-/\\^$*+?.()|[\]{}]/g,
+    "\\$&"
+  );
+  const inputRegex = new RegExp(sanitizeEscapeCharacters, "i");
+  return inputRegex.test(item.label);
+}
+function noFilter(item, 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
+  }) => {
+    if (clickedItemIsSelectAll(clickedItem)) {
+      if (allListItemsAreSelected) {
+        return unselectAllListItems(onChange);
+      }
+      return selectAllUnselectedItemsInListItems(onChange);
+    }
+    if (clickedItemIsInSelectedItems(clickedItem)) {
+      return removeClickedItemFromSelectedItems(clickedItem, onChange);
+    }
+    addClickedItemToSelectedItems(clickedItem, onChange);
+  };
+  const removeClickedItemFromSelectedItems = (clickedItem, onChange) => onChange(
+    selectedItems.filter(
+      (selectedItem) => selectedItem.value !== clickedItem.value
+    )
+  );
+  const selectAllCheckboxState = () => {
+    if (allListItemsAreSelected) return true;
+    if (someListItemsAreSelected) return "indeterminate";
+    return false;
+  };
+  const selectAllUnselectedItemsInListItems = (onChange) => {
+    onChange([...selectedItems, ...unselectedItemsInListItems]);
+  };
+  const unselectAllListItems = (onChange) => {
+    const selectedItemsWithoutItemsInListItems = selectedItems.filter(
+      (selectedItem) => !listItemsWithoutSelectAll.some(
+        (listItem) => listItem.value === selectedItem.value
+      )
+    );
+    onChange(selectedItemsWithoutItemsInListItems);
+  };
+  return {
+    addClickedItemToSelectedItems,
+    allListItemsAreSelected,
+    clickedItemIsInSelectedItems,
+    clickedItemIsSelectAll,
+    handleListItemClicked,
+    hasSelectedItems,
+    listItemsWithoutSelectAll,
+    removeClickedItemFromSelectedItems,
+    selectAllCheckboxState,
+    selectAllUnselectedItemsInListItems,
+    someListItemsAreSelected,
+    unselectAllListItems
+  };
+};
+function getA11yStatusMessage(options) {
+  const { isOpen, selectAllItemIncluded = false, resultCount } = options;
+  if (!isOpen) {
+    return "";
+  }
+  const 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.`;
+}
+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] = React.useState(value !== null);
+    const [lastHighlightedIndex, setLastHighlightedIndex] = React.useState(0);
+    const inputRef = React.useRef(null);
+    const {
+      items: normalizedItems,
+      loading: resolvedItemsLoading,
+      fetchItems
+    } = useResolvedItems(initialItems, debounceTimeout);
+    const [listItems, setListItems] = React.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,
+        inputValue: EMPTY_INPUT
+      };
+    };
+    const inputHasFocus = typeof document !== "undefined" ? inputRef?.current === document?.activeElement : false;
+    React.useEffect(() => {
+      filterListItems({ inputValue });
+    }, [normalizedItems]);
+    React.useEffect(() => {
+      if (selectedItem !== null && !inputHasFocus) {
+        setShowSelectedItem(true);
+        updateListItems({ inputValue: EMPTY_INPUT });
+        setInputValue(EMPTY_INPUT);
+      }
+    }, []);
+    const stateReducer = React.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 downshift.useCombobox.stateChangeTypes.ItemClick:
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+          case downshift.useCombobox.stateChangeTypes.InputBlur:
+            return resetInputState({ changes });
+          case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+            if (changes.selectedItem !== null && !inputHasFocus)
+              setShowSelectedItem(true);
+            return resetInputState({ changes });
+          // remove leading whitespace, select element with spacebar on empty input
+          case downshift.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]
+                  };
+                }
+              }
+            }
+            return { ...changes, highlightedIndex: 0 };
+          }
+          default:
+            return changes;
+        }
+      },
+      [fetchItems, filterListItems, inputHasFocus, resetInputState]
+    );
+    const {
+      isOpen,
+      getToggleButtonProps,
+      getLabelProps,
+      getMenuProps,
+      getInputProps,
+      highlightedIndex,
+      getItemProps,
+      selectedItem,
+      inputValue,
+      setInputValue,
+      selectItem,
+      reset
+    } = downshift.useCombobox({
+      defaultHighlightedIndex: lastHighlightedIndex,
+      items: listItems,
+      itemToString,
+      selectedItem: value,
+      stateReducer,
+      onInputValueChange(changes) {
+        updateListItems({ inputValue: changes.inputValue });
+      },
+      onSelectedItemChange({ selectedItem: newSelectedItem }) {
+        onChange(newSelectedItem);
+      },
+      // Accessibility
+      getA11yStatusMessage: (options) => getA11yStatusMessage({ ...options, resultCount: listItems.length })
+    });
+    const { refs, floatingStyles, update } = reactDom.useFloating({
+      open: isOpen,
+      placement: "bottom-start",
+      middleware: [
+        reactDom.offset(tokens.space.extraSmall2),
+        reactDom.shift({ padding: tokens.space.extraSmall }),
+        reactDom.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`
+            });
+          }
+        }),
+        reactDom.flip({ fallbackStrategy: "initialPlacement" })
+      ]
+    });
+    React.useEffect(() => {
+      if (isOpen && refs.reference.current && refs.floating.current) {
+        return reactDom.autoUpdate(
+          refs.reference.current,
+          refs.floating.current,
+          update
+        );
+      }
+    }, [isOpen, refs.reference, refs.floating, update]);
+    const handleOnClear = () => {
+      inputRef.current?.focus();
+      reset();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      form.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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: utils.mergeRefs(inputRef, ref)
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+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 = React.useRef(null);
+    React.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: utils.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] = React.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 });
+    };
+    React.useEffect(() => {
+      filterListItems({ inputValue });
+    }, [normalizedItems]);
+    const {
+      hasSelectedItems,
+      handleListItemClicked,
+      selectAllCheckboxState,
+      clickedItemIsInSelectedItems,
+      clickedItemIsSelectAll
+    } = useMultiselectUtils({
+      listItems,
+      selectAll,
+      selectedItems
+    });
+    const {
+      getSelectedItemProps,
+      getDropdownProps,
+      reset,
+      removeSelectedItem,
+      setSelectedItems
+    } = downshift.useMultipleSelection({
+      selectedItems,
+      // @ts-expect-error prop missing from library types
+      itemToString,
+      itemToKey,
+      onSelectedItemsChange({ selectedItems: newSelectedItems }) {
+        onChange(newSelectedItems);
+      }
+    });
+    const stateReducer = React.useCallback(
+      (state, {
+        changes,
+        type
+      }) => {
+        if (changes.highlightedIndex !== void 0 && changes?.highlightedIndex >= 0) {
+          setLastHighlightedIndex(changes?.highlightedIndex);
+        }
+        switch (type) {
+          // reset input value when leaving input field
+          case downshift.useCombobox.stateChangeTypes.InputBlur:
+            return {
+              ...changes,
+              inputValue: EMPTY_INPUT
+            };
+          // keep menu open and edit input value on item selection
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+          case downshift.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 downshift.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 downshift.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]
+                  };
+                }
+              }
+            }
+            return changes;
+          }
+          default:
+            return changes;
+        }
+      },
+      [hideSelectAll, normalizedItems, filterListItems, initialItems]
+    );
+    const {
+      getInputProps,
+      getItemProps,
+      getLabelProps,
+      getMenuProps,
+      getToggleButtonProps,
+      highlightedIndex,
+      setHighlightedIndex,
+      inputValue,
+      isOpen,
+      setInputValue
+    } = downshift.useCombobox({
+      defaultHighlightedIndex: lastHighlightedIndex,
+      // after selection, highlight previously selected item.
+      items: listItems,
+      itemToString,
+      selectedItem: null,
+      stateReducer,
+      onInputValueChange(changes) {
+        updateListItems({ inputValue: changes.inputValue });
+        setHighlightedIndex(hideSelectAll ? 0 : 1);
+        setLastHighlightedIndex(hideSelectAll ? 0 : 1);
+      },
+      onSelectedItemChange({ selectedItem: clickedItem }) {
+        if (!clickedItem) return;
+        handleListItemClicked({
+          clickedItem,
+          onChange: setSelectedItems
+        });
+      },
+      // Accessibility
+      getA11yStatusMessage: (options) => getA11yStatusMessage({
+        ...options,
+        selectAllItemIncluded: !hideSelectAll,
+        resultCount: listItems.length
+      }),
+      ...rest
+    });
+    const { refs, floatingStyles, update } = reactDom.useFloating({
+      open: isOpen,
+      placement: "bottom-start",
+      middleware: [
+        reactDom.offset(tokens.space.extraSmall2),
+        reactDom.shift({ padding: tokens.space.extraSmall }),
+        reactDom.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`
+            });
+          }
+        }),
+        reactDom.flip({ fallbackStrategy: "initialPlacement" })
+      ]
+    });
+    React.useEffect(() => {
+      if (isOpen && refs.reference.current && refs.floating.current) {
+        return reactDom.autoUpdate(
+          refs.reference.current,
+          refs.floating.current,
+          update
+        );
+      }
+    }, [isOpen, refs.reference, refs.floating, update]);
+    const handleOnClear = () => {
+      inputRef.current?.focus();
+      reset();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      form.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(a11y.VisuallyHidden, { onClick: inputRef.current?.focus, children: ariaLabelJumpToInput }) : null,
+                selectedItems.length <= maxChips ? selectedItems.map((selectedItem, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  SelectedItemTag,
+                  {
+                    ariaLabelRemoveSelected: labelClearAllItems,
+                    ariaLabelChosen: "",
+                    disabled,
+                    readOnly,
+                    removeSelectedItem: handleOnClear,
+                    selectedItem: summarySelectedItems
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.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: utils.mergeRefs(inputRef, ref)
+                      }),
+                      className: "eds-dropdown__input eds-form-control",
+                      disabled: readOnly || disabled,
+                      placeholder,
+                      tabIndex: disabled || readOnly ? -1 : void 0
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+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
+    } = downshift.useSelect({
+      items: normalizedItems,
+      defaultHighlightedIndex: selectedItem ? void 0 : 0,
+      selectedItem,
+      stateReducer(_, { changes, type }) {
+        const toggleButtonIsFocused = typeof document !== "undefined" && document.activeElement === refs.reference.current;
+        switch (type) {
+          case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
+          case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
+            if (!toggleButtonIsFocused) return { ...changes, isOpen: false };
+        }
+        return changes;
+      },
+      onStateChange({ type, selectedItem: newSelectedItem }) {
+        switch (type) {
+          case downshift.useSelect.stateChangeTypes.ToggleButtonBlur:
+            if (!selectOnBlur) return;
+        }
+        if (newSelectedItem === void 0) return;
+        onChange?.(newSelectedItem ?? null);
+      },
+      itemToString
+    });
+    const { refs, floatingStyles, update } = reactDom.useFloating({
+      open: isOpen,
+      placement: "bottom-start",
+      middleware: [
+        reactDom.offset(tokens.space.extraSmall2),
+        reactDom.shift({ padding: tokens.space.extraSmall }),
+        reactDom.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`
+            });
+          }
+        }),
+        reactDom.flip({ fallbackStrategy: "initialPlacement" })
+      ]
+    });
+    React.useEffect(() => {
+      if (isOpen && refs.reference.current && refs.floating.current) {
+        return reactDom.autoUpdate(
+          refs.reference.current,
+          refs.floating.current,
+          update
+        );
+      }
+    }, [isOpen, refs.reference, refs.floating, update]);
+    const handleOnClear = () => {
+      reset();
+      refs.reference.current?.focus();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      form.BaseFormControl,
+      {
+        className: classNames("eds-dropdown", className, {
+          "eds-dropdown--has-tooltip": labelTooltip !== void 0
+        }),
+        disableLabelAnimation,
+        feedback,
+        isFilled,
+        labelProps: getLabelProps(),
+        labelTooltip,
+        prepend,
+        style,
+        variant,
+        ...getToggleButtonProps({
+          ref: utils.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "eds-dropdown__selected-item", children: selectedItem?.label ?? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames(
+                "eds-dropdown__selected-item__placeholder",
+                {
+                  "eds-dropdown__selected-item__placeholder--readonly": readOnly
+                }
+              ),
+              children: placeholder
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.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 = React.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 = utils.useRandomId("eds-dropdown-native");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      form.BaseFormControl,
+      {
+        disabled,
+        readOnly,
+        prepend,
+        append: /* @__PURE__ */ jsxRuntime.jsx(
+          FieldAppend,
+          {
+            hidden: disabled || readOnly,
+            loading,
+            loadingText
+          }
+        ),
+        className,
+        style,
+        label,
+        labelId: nativeDropdownId,
+        variant,
+        feedback,
+        disableLabelAnimation,
+        isFilled: true,
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: item.value, children: item.label }, item.value))
+          }
+        )
+      }
+    );
+  }
+);
+const FieldAppend = ({
+  loading,
+  loadingText,
+  hidden
+}) => {
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-dropdown-native__loading-dots", children: /* @__PURE__ */ jsxRuntime.jsx(loader.LoadingDots, { "aria-label": loadingText }) });
+  }
+  if (hidden) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(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.js.map