@bitrise/bitkit 13.340.0 → 13.342.0

package/package.json

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

package/src/Components/Filter/Desktop/FilterForm.tsx

@@ -92,7 +92,14 @@ const FilterForm = (props: FilterFormProps) => {
 
   const { data } = useFilterContext();
 
-  const { isPatternEnabled, iconsMap, hasNotFilteredOption = true, isInitialLoading, isMultiple } = data[category];
+  const {
+    isPatternEnabled,
+    iconsMap,
+    hasNotFilteredOption = true,
+    isInitialLoading,
+    isMultiple,
+    searchPlaceholder,
+  } = data[category];
 
   const {
     currentOptionMap,
@@ -138,7 +145,7 @@ const FilterForm = (props: FilterFormProps) => {
               <SearchInput
                 isDisabled={isInitialLoading}
                 onChange={onSearchChange}
-                placeholder="Search by name"
+                placeholder={searchPlaceholder || 'Search by name'}
                 size="md"
                 sx={filterStyle.formSearch}
                 value={searchValue}

package/src/Components/Filter/Filter.storyData.ts

@@ -39,6 +39,7 @@ export const FILTER_STORY_DATA: FilterData = {
     hasNotFilteredOption: false,
     preserveOptionOrder: true,
     type: 'select',
+    searchPlaceholder: 'Search apps',
   },
   branch: {
     categoryName: 'Branch',

package/src/Components/Filter/Filter.types.ts

@@ -32,6 +32,7 @@ export type FilterCategoryProps = {
   optionsMap?: FilterOptionsMap;
   isPatternEnabled?: boolean;
   loadingText?: string;
+  searchPlaceholder?: string;
 } & (
   | {
       type: 'dateRange';

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;
+  const isAsyncSearch = isAsync && !!debouncedSearchValue && !!searchValue;
+  const currentOptionMap = isAsyncSearch ? foundOptionsMap : optionsMap;
 
-  const isEditMode = value.length !== 0;
+  const items = useMemo(() => {
+    let baseItems: string[] = [];
 
-  const isAsyncSearch = isAsync && !!searchValue;
+    if (isAsync) {
+      baseItems = debouncedSearchValue ? foundOptions : options || [];
+    } else {
+      baseItems = searchValue ? filteredOptions : options || [];
+    }
 
-  const items = isAsyncSearch
-    ? Array.from(new Set(preserveOptionOrder ? [...foundOptions] : [...value, ...foundOptions]))
-    : Array.from(new Set(preserveOptionOrder ? [...filteredOptions] : [...value, ...filteredOptions]));
+    if (!searchValue || (isAsync && !debouncedSearchValue)) {
+      return baseItems;
+    }
 
-  const currentOptionMap = isAsyncSearch ? foundOptionsMap : optionsMap;
+    return Array.from(new Set(preserveOptionOrder ? baseItems : [...value, ...baseItems]));
+  }, [isAsync, debouncedSearchValue, searchValue, foundOptions, filteredOptions, options, preserveOptionOrder, value]);
 
   return {
     currentOptionMap,