@bitrise/bitkit 13.341.0 → 13.343.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.341.0",
+  "version": "13.343.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Filter/hooks/useFilterForm.ts

@@ -1,4 +1,4 @@
-import { FormEvent, useEffect, useMemo, useState } from 'react';
+import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isEqual, useDebounce } from '../../../utils/utils';
 import { useFilterContext } from '../Filter.context';
 import { FilterFormProps, FilterOptions, FilterOptionsMap, FilterValue } from '../Filter.types';
@@ -26,52 +26,56 @@ const useFilterForm = (props: Omit<FilterFormProps, 'onCancel'>) => {
   );
 
   const [searchValue, setSearchValue] = useState<string>('');
-  const debouncedSearchValue = useDebounce<string>(searchValue, 1000);
+  const debouncedSearchValue = useDebounce<string>(searchValue, 500);
 
   const [isLoading, setLoading] = useState(Boolean(isInitialLoading));
   const [foundOptions, setFoundOptions] = useState<FilterOptions>([]);
   const [foundOptionsMap, setFoundOptionsMap] = useState<FilterOptionsMap>();
 
+  const latestRequestRef = useRef(0);
+
   const isAsync = !!onAsyncSearch;
   const withSearch = (options && options.length > 5) || isAsync;
 
   const isSubmitDisabled =
     isEqual(selected, value) || (mode === 'pattern' && !!selected[0] && !selected[0].includes('*'));
+
   const filteredOptions = useMemo(() => {
-    if (options?.length) {
-      return options.filter((opt) => {
-        const optLabel = (optionsMap && optionsMap[opt]) || opt;
+    return (
+      options?.filter((opt) => {
+        const optLabel = optionsMap?.[opt] || opt;
         return optLabel.toLowerCase().includes(searchValue.toLowerCase());
-      });
-    }
-    return [];
-  }, [searchValue, options]);
-
-  const onSearchChange = (q: string) => {
-    setSearchValue(q);
-    if (isAsync) {
-      if (q.length > 0) {
-        setLoading(true);
-      } else {
+      }) || []
+    );
+  }, [searchValue, options, optionsMap]);
+
+  const onSearchChange = useCallback(
+    (q: string) => {
+      setSearchValue(q);
+      if (isAsync && q.length === 0) {
         setFoundOptions([]);
       }
-    }
-  };
+    },
+    [isAsync],
+  );
 
-  const onSubmit = (e?: FormEvent<HTMLDivElement>) => {
-    e?.preventDefault();
-    const newSelected = selected[0] === '' ? [] : selected;
-    onChange(category, newSelected, value);
-  };
+  const onSubmit = useCallback(
+    (e?: FormEvent<HTMLDivElement>) => {
+      e?.preventDefault();
+      const newSelected = selected[0] === '' ? [] : selected;
+      onChange(category, newSelected, value);
+    },
+    [selected, onChange, category, value],
+  );
 
-  const onClearClick = () => {
+  const onClearClick = useCallback(() => {
     let newValue: FilterValue = [];
     if (data[category]?.type === 'switch') {
       newValue = ['all'];
     }
     setSelected(newValue);
     onChange(category, newValue, value);
-  };
+  }, [data, category, onChange, value]);
 
   const getEmptyText = () => {
     if (searchValue.length) {
@@ -80,36 +84,60 @@ const useFilterForm = (props: Omit<FilterFormProps, 'onCancel'>) => {
     return '';
   };
 
-  const getAsyncList = async () => {
-    if (onAsyncSearch) {
-      const response = await onAsyncSearch(category, searchValue);
-      setLoading(false);
-      setFoundOptions(response.options);
-      setFoundOptionsMap(response.optionsMap || optionsMap);
+  const getAsyncList = useCallback(async () => {
+    if (!onAsyncSearch) return;
+
+    latestRequestRef.current += 1;
+    const requestId = latestRequestRef.current;
+    setLoading(true);
+
+    try {
+      const response = await onAsyncSearch(category, debouncedSearchValue);
+
+      if (requestId === latestRequestRef.current) {
+        setFoundOptions(response.options);
+        setFoundOptionsMap(response.optionsMap || optionsMap);
+        setLoading(false);
+      }
+    } catch (error) {
+      if (requestId === latestRequestRef.current) {
+        setLoading(false);
+      }
     }
-  };
+  }, [onAsyncSearch, category, debouncedSearchValue, optionsMap]);
 
   useEffect(() => {
-    setLoading(Boolean(isInitialLoading));
+    setLoading(!!isInitialLoading);
   }, [isInitialLoading]);
 
   useEffect(() => {
-    if (debouncedSearchValue.length > 0) {
+    if (isAsync && debouncedSearchValue) {
       getAsyncList();
-    } else {
-      setLoading(Boolean(isInitialLoading));
+    } else if (isAsync && !debouncedSearchValue) {
+      setFoundOptions([]);
+      setLoading(!!isInitialLoading);
     }
-  }, [debouncedSearchValue]);
+  }, [debouncedSearchValue, isAsync, getAsyncList, isInitialLoading]);
 
-  const isEditMode = value.length !== 0;
+  const isEditMode = !!value.length;
+  const isAsyncSearch = isAsync && !!debouncedSearchValue && !!searchValue;
+  const currentOptionMap = isAsyncSearch ? foundOptionsMap : optionsMap;
 
-  const isAsyncSearch = isAsync && !!searchValue;
+  const items = useMemo(() => {
+    let baseItems: string[] = [];
 
-  const items = isAsyncSearch
-    ? Array.from(new Set(preserveOptionOrder ? [...foundOptions] : [...value, ...foundOptions]))
-    : Array.from(new Set(preserveOptionOrder ? [...filteredOptions] : [...value, ...filteredOptions]));
+    if (isAsync && searchValue) {
+      baseItems = debouncedSearchValue ? foundOptions : options || [];
+    } else {
+      baseItems = searchValue ? filteredOptions : options || [];
+    }
 
-  const currentOptionMap = isAsyncSearch ? foundOptionsMap : optionsMap;
+    if (preserveOptionOrder) {
+      return Array.from(new Set(baseItems));
+    }
+
+    return Array.from(new Set([...value, ...baseItems]));
+  }, [isAsync, debouncedSearchValue, searchValue, foundOptions, filteredOptions, options, preserveOptionOrder, value]);
 
   return {
     currentOptionMap,