@entur/dropdown 8.0.6 → 8.0.7-beta.0

package/dist/dropdown.cjs.js

@@ -500,40 +500,41 @@ function getA11yStatusMessage(options) {
   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,
-    selectOnTab = false,
-    style,
-    variant = "info",
-    onBlur,
-    onClick,
-    onKeyDown,
-    onFocus,
-    ...rest
-  }, ref) => {
+  (props, ref) => {
+    const {
+      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,
+      selectOnTab = false,
+      style,
+      variant = "info",
+      onBlur,
+      onClick,
+      onKeyDown,
+      onFocus,
+      ...rest
+    } = props;
     const [showSelectedItem, setShowSelectedItem] = React.useState(value !== null);
     const [lastHighlightedIndex, setLastHighlightedIndex] = React.useState(0);
     const inputRef = React.useRef(null);
@@ -809,47 +810,48 @@ const SearchableDropdown = React.forwardRef(
   }
 );
 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 = [],
-    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,
-    onBlur,
-    onClick,
-    onKeyDown,
-    onFocus,
-    ...rest
-  }, ref) => {
+  (props, ref) => {
+    const {
+      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 = [],
+      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,
+      onBlur,
+      onClick,
+      onKeyDown,
+      onFocus,
+      ...rest
+    } = props;
     const [lastHighlightedIndex, setLastHighlightedIndex] = React.useState(0);
     const inputRef = React.useRef(null);
     React.useEffect(() => {
@@ -1202,36 +1204,38 @@ const MultiSelect = React.forwardRef(
   }
 );
 const Dropdown = React.forwardRef(
-  ({
-    ariaLabelChosenSingular,
-    ariaLabelCloseList = "Lukk liste med valg",
-    ariaLabelOpenList = "Åpne liste med valg",
-    ariaLabelSelectedItem,
-    className,
-    clearable,
-    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,
-    selectOnTab = false,
-    style,
-    variant = "information",
-    ...rest
-  }, ref) => {
+  (props, ref) => {
+    const {
+      ariaLabelChosenSingular,
+      ariaLabelCloseList = "Lukk liste med valg",
+      ariaLabelOpenList = "Åpne liste med valg",
+      ariaLabelSelectedItem,
+      className,
+      clearable,
+      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,
+      selectOnTab = false,
+      style,
+      variant = "information",
+      ...rest
+    } = props;
     const { items: normalizedItems, loading: resolvedItemsLoading } = useResolvedItems(initialItems);
     const isFilled = selectedItem !== null || placeholder !== void 0;
+    let floatingRefs;
     const {
       isOpen,
       getItemProps,
@@ -1246,7 +1250,7 @@ const Dropdown = React.forwardRef(
       defaultHighlightedIndex: selectedItem ? void 0 : 0,
       selectedItem,
       stateReducer(state, { changes, type }) {
-        const toggleButtonIsFocused = typeof document !== "undefined" && document.activeElement === refs.reference.current;
+        const toggleButtonIsFocused = typeof document !== "undefined" && document.activeElement === floatingRefs?.reference.current;
         switch (type) {
           case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
           case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
@@ -1279,6 +1283,7 @@ const Dropdown = React.forwardRef(
         reactDom.flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
+    floatingRefs = refs;
     React.useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return reactDom.autoUpdate(