@entur/dropdown 5.0.29 → 5.1.0

package/dist/dropdown.esm.js

@@ -1,4 +1,4 @@
-import { mergeRefs, debounce, useRandomId, warnAboutMissingStyles } from '@entur/utils';
+import { mergeRefs, useDebounce, useRandomId, warnAboutMissingStyles } from '@entur/utils';
 import React, { useState, useRef, useEffect } from 'react';
 import Downshift, { useSelect, useCombobox, useMultipleSelection } from 'downshift';
 import classNames from 'classnames';
@@ -799,105 +799,99 @@ var useNormalizedItems = function useNormalizedItems(items) {
   }, [items]);
 };
 
-var useIsMounted = function useIsMounted() {
-  var isMountedRef = React.useRef(true);
-  React.useEffect(function () {
-    return function () {
-      isMountedRef.current = false;
-    };
-  }, []);
-  return isMountedRef.current;
-};
-var reducer = function reducer(_state, action) {
-  switch (action.type) {
-    case 'request results':
-      return {
-        items: [],
-        loading: true
-      };
-    case 'received results':
-      return {
-        items: action.payload,
-        loading: false
-      };
-  }
-};
 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 isItemsFunction = typeof itemsOrItemsResolver === 'function';
-  // Here, we normalize the itemsResolver argument to an async function, so we
+  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 () {
-    return isItemsFunction ? itemsOrItemsResolver : function () {
+    if (itemsIsAFunction) return itemsOrItemsResolver;
+    return function () {
       return Promise.resolve(itemsOrItemsResolver);
     };
-  }, [itemsOrItemsResolver, isItemsFunction]);
-  var _React$useReducer = React.useReducer(reducer, {
-      items: isItemsFunction ? [] : itemsOrItemsResolver,
-      loading: false
-    }),
-    _React$useReducer$ = _React$useReducer[0],
-    items = _React$useReducer$.items,
-    loading = _React$useReducer$.loading,
-    dispatch = _React$useReducer[1];
-  // This is a way to check whether or not the dropdown is still in the
-  // document. We use it below to make sure we're not updating the state of
-  // an unmounted component.
-  var isMounted = useIsMounted();
-  // Next, let's create the fetching function. This should be called whenever
-  // the input value changes
-  var fetchItems = React.useCallback( /*#__PURE__*/function () {
+  }, [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 resolvedItems;
+      var _abortControllerRef$c;
+      var abortController, _abortControllerRef$c2, _abortControllerRef$c3, resolvedItems;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              if (isMounted) {
-                _context.next = 2;
+              // The abortController handles cleanup of the previous request and unmounting
+              if (abortControllerRef != null && abortControllerRef.current) abortControllerRef == null ? void 0 : (_abortControllerRef$c = abortControllerRef.current) == null ? void 0 : _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$c3 = _abortControllerRef$c2.signal) != null && _abortControllerRef$c3.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://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');
               return _context.abrupt("return");
-            case 2:
-              dispatch({
-                type: 'request results'
-              });
-              _context.next = 5;
-              return itemsResolver(inputValue);
-            case 5:
-              resolvedItems = _context.sent;
-              if (isMounted) {
-                dispatch({
-                  type: 'received results',
-                  payload: resolvedItems
-                });
+            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;
               }
-            case 7:
+              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);
+      }, _callee, null, [[4, 15]]);
     }));
-    return function (_x) {
+    return function updateItems(_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [itemsResolver, isMounted]);
+  }();
+  var debouncedFetchItems = useDebounce(updateItems, debounceTimeout);
   var normalizedItems = useNormalizedItems(items);
+  React.useEffect(function () {
+    // send abort signal to previous request on unmount for cleanup
+    return function () {
+      var _abortControllerRef$c4;
+      return abortControllerRef == null ? void 0 : (_abortControllerRef$c4 = abortControllerRef.current) == null ? void 0 : _abortControllerRef$c4.abort('Component unmounted');
+    };
+  }, []);
   React.useEffect(function () {
     // Let's fetch the list initially if it's specified
-    if (isItemsFunction) {
-      fetchItems('');
+    if (itemsIsAFunction) {
+      debouncedFetchItems('');
     }
-  }, [isItemsFunction, fetchItems]);
+  }, [itemsIsAFunction]);
   return {
     items: normalizedItems,
-    loading: isItemsFunction ? loading : false,
-    fetchItems: debounce(fetchItems, debounceTimeout)
+    loading: itemsIsAFunction ? loading : false,
+    fetchItems: debouncedFetchItems
   };
 };
 
@@ -1328,7 +1322,7 @@ var DropdownList = function DropdownList(_ref) {
       style: _extends({
         display: isOpen ? 'inline-block' : 'none'
       }, rest.style, listStyle)
-    }), listItems.length > 0 && listItems.map(function (item, index) {
+    }), !loading && listItems.length > 0 && listItems.map(function (item, index) {
       var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
       if (itemIsSelectAll && listItems.length <= 2) return null;
       return React.createElement("li", _extends({
@@ -1819,7 +1813,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     className: classNames('eds-dropdown__wrapper', className),
     style: style
   }, React.createElement(BaseFormControl, _extends({
-    className: "eds-dropdown",
+    className: classNames('eds-dropdown', 'eds-dropdown--searchable'),
     disabled: disabled,
     disableLabelAnimation: disableLabelAnimation,
     feedback: feedback,
@@ -2187,7 +2181,7 @@ var MultiSelect = function MultiSelect(_ref) {
       onClear: handleOnClear,
       getToggleButtonProps: getToggleButtonProps
     }),
-    className: "eds-dropdown",
+    className: classNames('eds-dropdown', 'eds-dropdown--multiselect'),
     disabled: disabled,
     feedback: feedback,
     isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,