@entur/dropdown 7.0.3 → 7.1.0

package/README.md

@@ -2,7 +2,7 @@
 
 This package contains the different Dropdown components.
 
-> 💡 Looking for the [documentation](https://design.entur.no/komponenter/skjemaelementer/dropdown)?
+> 💡 Looking for the [documentation](https://linje.entur.no/komponenter/skjemaelementer/dropdown)?
 
 ## Installation
 
@@ -14,4 +14,4 @@ yarn add @entur/dropdown
 
 ## Usage
 
-Please refer to the [documentation](https://design.entur.no/komponenter/skjemaelementer/dropdown) for usage information.
+Please refer to the [documentation](https://linje.entur.no/komponenter/skjemaelementer/dropdown) for usage information.

package/dist/Dropdown.d.ts

@@ -39,6 +39,8 @@ export type DropdownProps<ValueType> = {
     feedback?: string;
     /** Tekst eller ikon som kommer før dropdown-en */
     prepend?: React.ReactNode;
+    /** */
+    loading?: boolean;
     /** En tekst som beskriver hva som skjer når man venter på items
      * @default 'Laster inn …'
      */
@@ -85,5 +87,5 @@ export type DropdownProps<ValueType> = {
      */
     ariaLabelSelectedItem?: string;
 };
-export declare const Dropdown: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelCloseList, ariaLabelOpenList, ariaLabelSelectedItem, className, clearable, disabled, disableLabelAnimation, feedback, items: initialItems, label, labelClearSelectedItem, labelTooltip, listStyle, loadingText, noMatchesText, onChange, placeholder, prepend, readOnly, selectedItem, selectOnBlur, selectOnTab, style, variant, ...rest }: DropdownProps<ValueType>) => React.JSX.Element;
+export declare const Dropdown: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelCloseList, ariaLabelOpenList, ariaLabelSelectedItem, className, clearable, disabled, disableLabelAnimation, feedback, items: initialItems, label, labelClearSelectedItem, labelTooltip, listStyle, loading, loadingText, noMatchesText, onChange, placeholder, prepend, readOnly, selectedItem, selectOnBlur, selectOnTab, style, variant, ...rest }: DropdownProps<ValueType>) => React.JSX.Element;
 export {};

package/dist/MultiSelect.d.ts

@@ -1,16 +1,8 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import { VariantType } from '@entur/utils';
-import { NormalizedDropdownItemType, PotentiallyAsyncDropdownItemType } from './types';
+import { DropdownProps } from './Dropdown';
+import { NormalizedDropdownItemType } from './types';
 import './Dropdown.scss';
-/** @deprecated use variant="information" instead */
-declare const info = "info";
-/** @deprecated use variant="negative" instead */
-declare const error = "error";
-export type MultiSelectProps<ValueType> = {
-    /** Beskrivende tekst som forklarer feltet */
-    label: string;
-    /** Tilgjengelige valg i MultiSelect */
-    items: PotentiallyAsyncDropdownItemType<ValueType>;
+export type MultiSelectProps<ValueType> = Omit<DropdownProps<ValueType>, 'selectedItem' | 'onChange'> & {
     /** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
      */
     selectedItems: NormalizedDropdownItemType<ValueType>[];
@@ -21,30 +13,6 @@ export type MultiSelectProps<ValueType> = {
      * @default Regex-test som sjekker om item.label inneholder input-teksten
      */
     itemFilter?: (item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean;
-    /** Hvilken valideringsvariant som gjelder */
-    variant?: VariantType | typeof error | typeof info;
-    /** Valideringsmelding, brukes sammen med `variant` */
-    feedback?: string;
-    /** Om dropdown-en er deaktivert */
-    disabled?: boolean;
-    /** Om dropdown-en er i read-only modus */
-    readOnly?: boolean;
-    /** Om en knapp for å fjerne alle valg skal vises
-     * @default true
-     */
-    clearable?: boolean;
-    /** Plasserer ledeteksten statisk på toppen av inputfeltet */
-    disableLabelAnimation?: boolean;
-    /** Placeholder-tekst når ingenting er satt */
-    placeholder?: string;
-    /** En tekst som beskriver hva som skjer når man venter på items
-     * @default "Laster inn …"
-     */
-    loadingText?: string;
-    /** Tekst som kommer opp når det ikke er noe treff på filtreringsøket
-     * @default "Ingen treff for søket"
-     */
-    noMatchesText?: string;
     /** Skjuler «Velg alle» fra listen med valg
      * @default false
      */
@@ -57,27 +25,10 @@ export type MultiSelectProps<ValueType> = {
      * @default 10
      */
     maxChips?: number;
-    /** Tekst eller ikon som kommer før MultiSelect */
-    prepend?: React.ReactNode;
     /** Resetter input etter at et element er valgt i listen
      * @default false
      */
     clearInputOnSelect?: boolean;
-    /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
-    selectOnTab?: boolean;
-    /**
-     * @deprecated
-     * Bruk selectOnTab i stedet
-     *
-     * Lar brukeren velge ved å "tab-e" seg ut av komponenten */
-    selectOnBlur?: boolean;
-    style?: React.CSSProperties;
-    /** Styling som sendes ned til MultiSelect-lista */
-    listStyle?: {
-        [key: string]: any;
-    };
-    /** Ekstra klassenavn */
-    className?: string;
     /** Teksten som vises for «Velg alle»-elementet i listen
      * @default "Velg alle"
      */
@@ -90,8 +41,6 @@ export type MultiSelectProps<ValueType> = {
      * @default "Fjern valgte"
      */
     labelClearAllItems?: string;
-    /** En tooltip som gir ekstra info om inputfeltet */
-    labelTooltip?: React.ReactNode;
     /** Tekst for skjemleser på knapper for å fjerne valgt element
      * @default "trykk for å fjerne valg"
      */
@@ -100,27 +49,9 @@ export type MultiSelectProps<ValueType> = {
      * @default "valgte"
      */
     ariaLabelChosenPlural?: string;
-    /** Tekst for skjemleser for knapp som lukker listen med valg
-     * @default "Lukk liste med valg"
-     */
-    ariaLabelCloseList?: string;
-    /** Tekst for skjemleser for knapp som åpner listen med valg
-     * @default "Åpne liste med valg"
-     */
-    ariaLabelOpenList?: string;
     /** Tekst for skjemleser for å hoppe til input-feltet
      * @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
      */
     ariaLabelJumpToInput?: string;
-    /** Ord for at et element er valgt i entall
-     * eks. 'Element 1, _valgt_'
-     * @default 'valgt'
-     */
-    ariaLabelChosenSingular?: string;
-    /** Tekst for skjermleser som beskriver statusen til et element som valgt
-     * @default ', valgt element, trykk for å fjerne'
-     */
-    ariaLabelSelectedItem?: string;
 };
-export declare const MultiSelect: <ValueType extends unknown>({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, disableLabelAnimation, feedback, hideSelectAll, items: initialItems, itemFilter, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, labelTooltip, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, selectOnTab, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps<ValueType>) => React.JSX.Element;
-export {};
+export declare const MultiSelect: <ValueType extends unknown>({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, disableLabelAnimation, feedback, hideSelectAll, items: initialItems, 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, ...rest }: MultiSelectProps<ValueType>) => React.JSX.Element;

package/dist/SearchableDropdown.d.ts

@@ -1,95 +1,19 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { VariantType } from '@entur/utils';
-import { NormalizedDropdownItemType, PotentiallyAsyncDropdownItemType } from './types';
+import React from 'react';
+import { DropdownProps } from './Dropdown';
+import { NormalizedDropdownItemType } from './types';
 import './Dropdown.scss';
-/** @deprecated use variant="information" instead */
-declare const info = "info";
-/** @deprecated use variant="negative" instead */
-declare const error = "error";
-export type SearchableDropdownProps<ValueType> = {
-    /** Tilgjengelige valg i dropdown-en */
-    items: PotentiallyAsyncDropdownItemType<ValueType>;
-    /** Valgt element. Bruk null for ingen verdi */
-    selectedItem: NormalizedDropdownItemType<ValueType> | null;
-    /** Callback ved valg som skal brukes til å oppdatere selectedItem */
-    onChange?: (selectedItem: NormalizedDropdownItemType<ValueType> | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType<ValueType> | null>>;
+export type SearchableDropdownProps<ValueType> = DropdownProps<ValueType> & {
     /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
      * @default Regex-test som sjekker om item.label inneholder input-teksten
      */
     itemFilter?: (item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean;
-    /** Beskrivende tekst som forklarer feltet */
-    label: string;
-    /** Placeholder-tekst når ingenting er satt */
-    placeholder?: string;
-    /** Vis knapp for å nullstille Dropdown-en skal vises
-     * @default true
-     */
-    clearable?: boolean;
-    /** Plasserer labelen statisk på toppen av inputfeltet
-     * @default false
-     */
-    disableLabelAnimation?: boolean;
     /** Antall millisekunder man venter etter tekstinput før det gjøres kall for å oppdatere items
      * Denne er kun relevant hvis du sender inn en funksjon som items.
      */
     debounceTimeout?: number;
-    /** Deaktiver dropdown-en */
-    disabled?: boolean;
-    /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
-    selectOnTab?: boolean;
-    /**
-     * @deprecated
-     * Bruk selectOnTab i stedet
-     *
-     * Lar brukeren velge ved å "tab-e" seg ut av komponenten */
-    selectOnBlur?: boolean;
     /** Tekst som kommer opp når det ikke er noe treff på filtreringsøket
      * @default "Ingen treff for søket"
      */
     noMatchesText?: string;
-    /** Gjør dropdown-en til å kun kunne leses
-     * @default false
-     */
-    readOnly?: boolean;
-    /** Tekst eller ikon som kommer før dropdown-en */
-    prepend?: React.ReactNode;
-    /** En tekst som beskriver hva som skjer når man venter på items */
-    loadingText?: string;
-    /** Hvilken valideringsvariant som gjelder*/
-    variant?: VariantType | typeof error | typeof info;
-    /** Valideringsmelding, brukes sammen med `variant` */
-    feedback?: string;
-    className?: string;
-    style?: {
-        [key: string]: any;
-    };
-    /** Style som kun påføres listeelementet */
-    listStyle?: {
-        [key: string]: any;
-    };
-    /** Tekst som beskriver at man fjerner valget sitt
-     * @default "fjern valgt"
-     */
-    labelClearSelectedItem?: string;
-    /** En tooltip som gir ekstra info om inputfeltet */
-    labelTooltip?: React.ReactNode;
-    /** Tekst for skjemleser for knapp som lukker listen med valg
-     * @default "Lukk liste med valg"
-     */
-    ariaLabelCloseList?: string;
-    /** Tekst for skjemleser for knapp som åpner listen med valg
-     * @default "Åpne liste med valg"
-     */
-    ariaLabelOpenList?: string;
-    /** Ord for at et element er valgt i entall
-     * eks. 'Element 1, _valgt_'
-     * @default "valgt"
-     */
-    ariaLabelChosenSingular?: string;
-    /** Tekst for skjermleser som beskriver statusen til et element som valgt
-     * @default ", valgt element, trykk for å fjerne"
-     */
-    ariaLabelSelectedItem?: string;
 };
-export declare const SearchableDropdown: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelCloseList, ariaLabelOpenList, ariaLabelSelectedItem, className, clearable, debounceTimeout, disabled, disableLabelAnimation, feedback, items: initialItems, itemFilter, label, labelClearSelectedItem, labelTooltip, listStyle, loadingText, noMatchesText, onChange, placeholder, prepend, readOnly, selectedItem: value, selectOnBlur, selectOnTab, style, variant, ...rest }: SearchableDropdownProps<ValueType>) => React.JSX.Element;
-export {};
+export declare const SearchableDropdown: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelCloseList, ariaLabelOpenList, ariaLabelSelectedItem, className, clearable, debounceTimeout, disabled, disableLabelAnimation, feedback, items: initialItems, itemFilter, label, labelClearSelectedItem, labelTooltip, listStyle, loading, loadingText, noMatchesText, onChange, placeholder, prepend, readOnly, selectedItem: value, selectOnBlur, selectOnTab, style, variant, ...rest }: SearchableDropdownProps<ValueType>) => React.JSX.Element;

package/dist/dropdown.cjs.development.js

@@ -691,7 +691,7 @@ debounceTimeout) {
               _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://design.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');
+            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);
@@ -871,7 +871,7 @@ function getA11yStatusMessage(options) {
 }
 /* end a11y utils */
 
-var _excluded$3 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
+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 = function SearchableDropdown(_ref) {
   var _document, _selectedItem$label;
   var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
@@ -895,6 +895,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
     labelTooltip = _ref.labelTooltip,
     listStyle = _ref.listStyle,
+    loading = _ref.loading,
     loadingText = _ref.loadingText,
     noMatchesText = _ref.noMatchesText,
     _ref$onChange = _ref.onChange,
@@ -923,7 +924,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   var inputRef = React.useRef(null);
   var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
-    loading = _useResolvedItems.loading,
+    resolvedItemsLoading = _useResolvedItems.loading,
     fetchItems = _useResolvedItems.fetchItems;
   var _useState3 = React.useState(normalizedItems),
     listItems = _useState3[0],
@@ -1088,7 +1089,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       focusable: false,
       getToggleButtonProps: getToggleButtonProps,
       isOpen: isOpen,
-      loading: loading,
+      loading: loading != null ? loading : resolvedItemsLoading,
       loadingText: loadingText,
       onClear: handleOnClear,
       selectedItems: [selectedItem]
@@ -1151,14 +1152,14 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     listItems: listItems,
     style: listStyle,
     setListRef: refs.setFloating,
-    loading: loading,
+    loading: loading != null ? loading : resolvedItemsLoading,
     loadingText: loadingText,
     noMatchesText: noMatchesText,
     selectedItems: selectedItem !== null ? [selectedItem] : []
   }));
 };
 
-var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "labelTooltip", "listStyle", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "selectOnTab", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
+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 = function MultiSelect(_ref) {
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
@@ -1184,6 +1185,7 @@ var MultiSelect = function MultiSelect(_ref) {
     labelSelectAll = _ref$labelSelectAll === void 0 ? 'Velg alle' : _ref$labelSelectAll,
     labelTooltip = _ref.labelTooltip,
     listStyle = _ref.listStyle,
+    loading = _ref.loading,
     loadingText = _ref.loadingText,
     _ref$maxChips = _ref.maxChips,
     maxChips = _ref$maxChips === void 0 ? 10 : _ref$maxChips,
@@ -1226,7 +1228,7 @@ var MultiSelect = function MultiSelect(_ref) {
   }, [rest.selectedItem]);
   var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
-    loading = _useResolvedItems.loading,
+    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
@@ -1447,7 +1449,7 @@ var MultiSelect = function MultiSelect(_ref) {
       clearable: clearable,
       labelClearSelectedItems: labelClearAllItems,
       focusable: false,
-      loading: loading,
+      loading: loading != null ? loading : resolvedItemsLoading,
       loadingText: loadingText,
       disabled: readOnly || disabled,
       onClear: handleOnClear,
@@ -1543,7 +1545,7 @@ var MultiSelect = function MultiSelect(_ref) {
     listItems: listItems,
     style: listStyle,
     setListRef: refs.setFloating,
-    loading: loading,
+    loading: loading != null ? loading : resolvedItemsLoading,
     loadingText: loadingText,
     noMatchesText: noMatchesText,
     selectAllCheckboxState: selectAllCheckboxState,
@@ -1552,7 +1554,7 @@ var MultiSelect = function MultiSelect(_ref) {
   }));
 };
 
-var _excluded$1 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
+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 = function Dropdown(_ref) {
   var _ref3, _selectedItem$label;
   var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
@@ -1572,6 +1574,7 @@ var Dropdown = function Dropdown(_ref) {
     labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
     labelTooltip = _ref.labelTooltip,
     listStyle = _ref.listStyle,
+    loading = _ref.loading,
     loadingText = _ref.loadingText,
     _ref$noMatchesText = _ref.noMatchesText,
     noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen tilgjengelige valg …' : _ref$noMatchesText,
@@ -1591,7 +1594,7 @@ var Dropdown = function Dropdown(_ref) {
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var _useResolvedItems = useResolvedItems(initialItems),
     normalizedItems = _useResolvedItems.items,
-    loading = _useResolvedItems.loading;
+    resolvedItemsLoading = _useResolvedItems.loading;
   var toggleButtonRef = React.useRef(null);
   var isFilled = selectedItem !== null || placeholder !== undefined;
   var _useSelect = downshift.useSelect({
@@ -1651,7 +1654,7 @@ var Dropdown = function Dropdown(_ref) {
       focusable: false,
       getToggleButtonProps: getToggleButtonProps,
       isOpen: isOpen,
-      loading: loading,
+      loading: loading != null ? loading : resolvedItemsLoading,
       loadingText: loadingText,
       onClear: function onClear() {
         var _toggleButtonRef$curr;
@@ -1714,7 +1717,7 @@ var Dropdown = function Dropdown(_ref) {
     noMatchesText: noMatchesText,
     style: listStyle,
     setListRef: refs.setFloating,
-    loading: loading,
+    loading: loading != null ? loading : resolvedItemsLoading,
     loadingText: loadingText,
     selectedItems: selectedItem !== null ? [selectedItem] : []
   }));