@bitrise/bitkit 13.202.0 → 13.204.0

package/package.json

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

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

@@ -13,7 +13,7 @@ import RadioGroup from '../../Form/Radio/RadioGroup';
 import SearchInput from '../../SearchInput/SearchInput';
 import Text from '../../Text/Text';
 import { FilterStyle } from '../Filter.theme';
-import { FilterOptions, FilterValue } from '../Filter.types';
+import { FilterOptions, FilterOptionsMap, FilterValue } from '../Filter.types';
 import { isEqual, useDebounce } from '../../../utils/utils';
 import { getOptionLabel } from '../Filter.utils';
 import { useFilterContext } from '../Filter.context';
@@ -50,6 +50,7 @@ const FilterForm = (props: FilterFormProps) => {
 
   const [isLoading, setLoading] = useState(Boolean(isInitialLoading));
   const [foundOptions, setFoundOptions] = useState<FilterOptions>([]);
+  const [foundOptionsMap, setFoundOptionsMap] = useState<FilterOptionsMap>();
 
   const isAsync = !!onAsyncSearch;
   const withSearch = (options && options.length > 5) || isAsync;
@@ -105,6 +106,7 @@ const FilterForm = (props: FilterFormProps) => {
       const response = await onAsyncSearch(category, searchValue);
       setLoading(false);
       setFoundOptions(response.options);
+      setFoundOptionsMap(response.optionsMap || optionsMap);
     }
   };
 
@@ -122,10 +124,13 @@ const FilterForm = (props: FilterFormProps) => {
 
   const isEditMode = value.length !== 0;
 
-  const items =
-    isAsync && !!searchValue
-      ? Array.from(new Set(preserveOptionOrder ? [...foundOptions] : [...value, ...foundOptions]))
-      : Array.from(new Set(preserveOptionOrder ? [...filteredOptions] : [...value, ...filteredOptions]));
+  const isAsyncSearch = isAsync && !!searchValue;
+
+  const items = isAsyncSearch
+    ? Array.from(new Set(preserveOptionOrder ? [...foundOptions] : [...value, ...foundOptions]))
+    : Array.from(new Set(preserveOptionOrder ? [...filteredOptions] : [...value, ...filteredOptions]));
+
+  const currentOptionMap = isAsyncSearch ? foundOptionsMap : optionsMap;
 
   return (
     <FocusLock>
@@ -156,7 +161,7 @@ const FilterForm = (props: FilterFormProps) => {
               ? items.map((opt) => (
                   <Checkbox key={opt} value={opt}>
                     {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
-                    {getOptionLabel(opt, optionsMap)}
+                    {getOptionLabel(opt, currentOptionMap)}
                   </Checkbox>
                 ))
               : getEmptyText()}
@@ -174,7 +179,7 @@ const FilterForm = (props: FilterFormProps) => {
             {items.length
               ? items.map((opt) => {
                   const hasIcon = iconsMap && iconsMap[opt];
-                  const label = getOptionLabel(opt, optionsMap);
+                  const label = getOptionLabel(opt, currentOptionMap);
                   return (
                     <Radio key={opt} value={opt}>
                       {hasIcon ? (

package/src/Components/List/ListItem.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, ListItem as ChakraListItem, ListItemProps as ChakraListItemProps } from '@chakra-ui/react';
-import { BoxProps } from '../Box/Box';
+import Box, { BoxProps } from '../Box/Box';
 import Icon, { IconProps, TypeIconName } from '../Icon/Icon';
 
 export interface ListItemProps extends ChakraListItemProps {
@@ -23,12 +23,23 @@ const ListItem = forwardRef<ListItemProps, 'li'>((props, ref) => {
   if (iconSize === '32') {
     iconVerticalAlign = '-11px';
   }
+
   return (
-    <ChakraListItem {...rest} ref={ref}>
-      {!!iconName && (
-        <Icon name={iconName} color={iconColor} marginEnd="6" size={iconSize} verticalAlign={iconVerticalAlign} />
-      )}
-      {children}
+    <ChakraListItem {...rest} ref={ref} listStylePosition="outside">
+      <Box display="flex" alignItems="flex-start">
+        {!!iconName && (
+          <Icon
+            flexShrink={0}
+            name={iconName}
+            height="100%"
+            color={iconColor}
+            marginEnd="6"
+            size={iconSize}
+            verticalAlign={iconVerticalAlign}
+          />
+        )}
+        <Box flexGrow={1}>{children}</Box>
+      </Box>
     </ChakraListItem>
   );
 });