@bitrise/bitkit 13.190.0 → 13.192.0

package/package.json

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

package/src/Components/Dropdown/DropdownOption.tsx

@@ -4,6 +4,7 @@ import { cx } from '@chakra-ui/utils';
 import Text, { TextProps } from '../Text/Text';
 import Divider from '../Divider/Divider';
 import Box from '../Box/Box';
+import Icon from '../Icon/Icon';
 import { useDropdownContext, useDropdownStyles } from './Dropdown.context';
 
 export type DropdownOptionProps<T> = {
@@ -14,6 +15,7 @@ export type DropdownOptionProps<T> = {
   onClick?: MouseEventHandler<HTMLElement>;
   isDisabled?: boolean;
 };
+
 const DropdownOption = <T = string,>({
   avatar,
   children,
@@ -25,6 +27,7 @@ const DropdownOption = <T = string,>({
   const { item } = useDropdownStyles();
   const ctx = useDropdownContext<T | null>();
   const { index } = rest as { index?: number };
+  const isSelected = value === ctx.formValue;
 
   return (
     <chakra.div
@@ -39,7 +42,7 @@ const DropdownOption = <T = string,>({
       {...rest}
       __css={item}
       className={cx(
-        value === ctx.formValue && 'bitkit-select__option-active',
+        isSelected && 'bitkit-select__option-active',
         index === ctx.activeIndex && 'bitkit-select__option-hover',
       )}
       {...ctx.getItemProps(
@@ -56,14 +59,11 @@ const DropdownOption = <T = string,>({
             },
       )}
     >
-      {avatar ? (
-        <Box display="flex" alignItems="center" gap="8">
-          <Avatar size={ctx.size === 'lg' ? '32' : '24'} {...avatar} />
-          {children}
-        </Box>
-      ) : (
-        children
-      )}
+      <Box display="flex" alignItems="center" gap="8">
+        {avatar && <Avatar size={ctx.size === 'lg' ? '32' : '24'} {...avatar} />}
+        <Box flex="1">{children}</Box>
+        {isSelected && <Icon name="Check" color="icon/interactive" />}
+      </Box>
     </chakra.div>
   );
 };

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

@@ -34,6 +34,7 @@ export const FILTER_STORY_DATA: FilterData = {
       '792fda8fed0308a6': 'website-docker-base-env #docker',
       fcb0a0f49138e0a0: 'bitrise-insights-cf',
     },
+    hasNotFilteredOption: false,
     type: 'select',
   },
   branch: {

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

@@ -20,6 +20,7 @@ export type FilterCategoryProps = {
   unfilteredLabel?: string;
   dependsOn?: Record<string, string>;
   iconsMap?: FilterIconsMap;
+  hasNotFilteredOption?: boolean;
   isMultiple?: boolean;
   onAsyncSearch?: FilterSearchCallback;
   options?: FilterOptions;

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

@@ -31,7 +31,7 @@ const FilterForm = (props: FilterFormProps) => {
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const { data, state } = useFilterContext();
-  const { iconsMap, isMultiple, onAsyncSearch, options, optionsMap } = data[category];
+  const { iconsMap, hasNotFilteredOption = true, isMultiple, onAsyncSearch, options, optionsMap } = data[category];
   const value = state[category] || [];
 
   const [selected, setSelected] = useState<FilterValue>(value);
@@ -150,11 +150,13 @@ const FilterForm = (props: FilterFormProps) => {
         )}
         {!isLoading && !isMultiple && (
           <RadioGroup onChange={(v) => setSelected([v])} sx={filterStyle.formInputGroup} value={selected[0] || ''}>
-            <Radio value="">
-              <Text as="span" color="neutral.40" fontStyle="italic">
-                Not filtered
-              </Text>
-            </Radio>
+            {hasNotFilteredOption && (
+              <Radio value="">
+                <Text as="span" color="neutral.40" fontStyle="italic">
+                  Not filtered
+                </Text>
+              </Radio>
+            )}
             {items.length
               ? items.map((opt) => {
                   const hasIcon = iconsMap && iconsMap[opt];