@bitrise/bitkit 12.70.0-alpha.1 → 12.70.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.70.0-alpha.1",
+  "version": "12.70.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -28,7 +28,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
-    "framer-motion": "^10.16.5",
+    "framer-motion": "^10.16.16",
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -40,54 +40,54 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@bitrise/eslint-plugin": "^2.3.2",
+    "@bitrise/eslint-plugin": "^2.3.3",
     "@commitlint/cli": "^17.8.0",
     "@commitlint/config-conventional": "^17.8.0",
-    "@google-cloud/storage": "^7.6.0",
+    "@google-cloud/storage": "^7.7.0",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addons": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addons": "^7.6.4",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-webpack5": "^7.6.4",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.5.3",
+    "@storybook/theming": "^7.6.4",
     "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.8",
-    "@types/luxon": "^3.3.4",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
+    "@types/jest": "^29.5.11",
+    "@types/luxon": "^3.3.7",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "axios": "^1.6.2",
-    "eslint": "^8.53.0",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint": "^8.55.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-testing-library": "^6.1.2",
+    "eslint-plugin-testing-library": "^6.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jsdom": "^22.1.0",
-    "prettier": "^3.1.0",
-    "react-hook-form": "^7.48.2",
-    "semantic-release": "^22.0.7",
-    "storybook": "^7.5.3",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.1.1",
+    "react-hook-form": "^7.49.2",
+    "semantic-release": "^22.0.12",
+    "storybook": "^7.6.4",
     "ts-jest": "^29.1.1",
     "typescript": "^4.8.4"
   },

package/src/Components/Avatar/Avatar.tsx

@@ -12,7 +12,10 @@ const getInitials = (name: string) => {
   if (name.length < 3) {
     return name;
   }
-  return `${name.charAt(0)}${name.charAt(name.length - 1)}`;
+
+  const nameArray = Array.from(name);
+
+  return `${nameArray[0]}${nameArray[nameArray.length - 1]}`;
 };
 
 const Avatar = forwardRef<AvatarProps, 'span'>((props, ref) => (

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -23,7 +23,7 @@ const DatePickerFooter = ({
       gap="24"
     >
       {!!onClear && (
-        <Button size="small" variant="tertiary" width="fit-content" onClick={() => onClear()}>
+        <Button size="small" variant="tertiary" color="purple.10" width="fit-content" onClick={() => onClear()}>
           Clear
         </Button>
       )}

package/src/Components/DatePicker/DatePickerHeader.tsx

@@ -21,6 +21,7 @@ export const DatePickerHeaderPrevious = ({ label }: { label: string }) => {
       visibility={controls === 'right' ? 'hidden' : undefined}
       aria-label={label}
       variant="tertiary"
+      color="purple.10"
       as="button"
       onClick={onPrevious}
       iconName="ChevronLeft"
@@ -37,6 +38,7 @@ export const DatePickerHeaderNext = ({ label }: { label: string }) => {
       size="small"
       aria-label={label}
       variant="tertiary"
+      color="purple.10"
       onClick={onNext}
       iconName="ChevronRight"
       isTooltipDisabled

package/src/Components/DatePicker/DatePickerMonth.tsx

@@ -50,7 +50,14 @@ const DatePickerMonth = ({ controls, onViewDateChange, viewDate, onMonthClick }:
       <DatePickerHeader onPrevious={onPreviousMonth} onNext={onNextMonth} controls={controls}>
         <DatePickerHeaderPrevious label="previous month" />
         <DatePickerHeaderContent id={monthLabelId}>
-          <Button onClick={onMonthClick} size="small" variant="tertiary" flexShrink={0} rightIconName="ChevronDown">
+          <Button
+            onClick={onMonthClick}
+            size="small"
+            variant="tertiary"
+            color="purple.10"
+            flexShrink={0}
+            rightIconName="ChevronDown"
+          >
             {viewDate.monthLong}
           </Button>
           <NumberInput

package/src/Components/ExpandableCard/ExpandableCard.theme.ts

@@ -4,9 +4,6 @@ const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['button', 'che
 
 const ExpandableCardTheme = defineMultiStyleConfig({
   baseStyle: ({ isOpen }) => ({
-    box: {
-      zIndex: 1,
-    },
     button: {
       borderTopStartRadius: '8',
       borderTopEndRadius: '8',

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

@@ -9,23 +9,26 @@ export const FILTER_STORY_DATA: FilterData = {
   date_range: {
     categoryName: 'Date',
     categoryNamePlural: 'dates',
-    isPermanent: true,
+    type: 'dateRange',
   },
   pipeline: {
     categoryName: 'Pipeline',
     categoryNamePlural: 'Pipelines',
     options: FILTER_STORY_OPTIONS,
+    type: 'tag',
   },
   stage: {
     categoryName: 'Stage',
     categoryNamePlural: 'Stages',
     options: FILTER_STORY_OPTIONS,
-    dependsOn: ['pipeline'],
+    dependsOn: { pipeline: 'Select a pipeline first' },
+    type: 'tag',
   },
   workflow: {
     categoryName: 'Workflow',
     isMultiple: true,
     options: FILTER_STORY_OPTIONS,
+    type: 'tag',
   },
   branch: {
     options: [
@@ -34,16 +37,22 @@ export const FILTER_STORY_DATA: FilterData = {
       'master',
       'CI-2264-consolidate-other-provider-type-to-custom',
     ],
+    type: 'tag',
   },
   app: {
     categoryName: 'App',
-    isPermanent: true,
+    iconsMap: {
+      '46b6b9a78a418ee8': 'AppleFill',
+      '32b14416be4b7b24': 'Android',
+      '0a248b278e135ea7': 'Other',
+    },
     options: ['46b6b9a78a418ee8', '32b14416be4b7b24', '0a248b278e135ea7'],
     optionsMap: {
       '46b6b9a78a418ee8': 'bitrise-website',
       '32b14416be4b7b24': 'bitkit',
       '0a248b278e135ea7': 'pipeline-service',
     },
+    type: 'select',
   },
   test_case: {
     categoryName: 'Test case',
@@ -51,21 +60,37 @@ export const FILTER_STORY_DATA: FilterData = {
       console.log('onAsyncSearch', { category, q });
       return new Promise((resolve) => {
         setTimeout(() => {
-          resolve(['found 1', 'found 2']);
+          resolve({ options: ['found 1', 'found 2'] });
         }, 2000);
       });
     },
     options: ['default 1', 'default 2', 'default 3'],
+    type: 'tag',
+  },
+  cache_type: {
+    iconsMap: {
+      bazel: 'Bazel',
+      gradle: 'Gradle',
+    },
+    options: ['gradle', 'bazel'],
+    optionsMap: {
+      bazel: 'Bazel',
+      gradle: 'Gradle',
+    },
+    type: 'switch',
   },
 };
 
 export const FILTER_STORY_INIT_STATE: FilterState = {
   pipeline: ['ipsum'],
   app: ['46b6b9a78a418ee8'],
+  cache_type: ['gradle'],
 };
 
 export const FILTER_STORY_CONTEXT: FilterContextType = {
   data: FILTER_STORY_DATA,
   setPopoverOpen: () => {},
   state: FILTER_STORY_INIT_STATE,
+  onFilterChange: () => {},
+  onFilterClear: () => {},
 };

package/src/Components/Filter/Filter.tsx

@@ -6,29 +6,47 @@ import Divider from '../Divider/Divider';
 import Icon from '../Icon/Icon';
 import { FilterContext } from './Filter.context';
 import { FilterStyle } from './Filter.theme';
-import { FilterContextType, FilterData, FilterState, FilterValue } from './Filter.types';
-import { getDependents, hasAllDependencies } from './Filter.utils';
+import {
+  FilterCategoryProps,
+  FilterContextType,
+  FilterData,
+  FilterState,
+  FilterType,
+  FilterValue,
+} from './Filter.types';
+import { getDependents } from './Filter.utils';
 import FilterAdd from './FilterAdd/FilterAdd';
 import FilterItem from './FilterItem/FilterItem';
 import FilterSearch from './FilterSearch/FilterSearch';
 import FilterDate from './FilterDate/FilterDate';
+import FilterSwitchAdapter from './FilterSwitchAdapter/FilterSwitchAdapter';
 
 export interface FilterProps extends Omit<BoxProps, 'onChange'> {
   filtersDependOn?: string[];
   initialData: FilterData;
+  initialState: FilterState;
   isLoading?: boolean;
   onChange: (state: FilterState) => void;
   showSearch?: boolean;
-  state: FilterState;
 }
 
 const Filter = (props: FilterProps) => {
-  const { filtersDependOn, initialData, isLoading, onChange, showSearch, state, ...rest } = props;
+  const { filtersDependOn, initialData, initialState, isLoading, onChange, showSearch, ...rest } = props;
 
   const isInited = useRef<boolean>(false);
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
+  const state: FilterState = {};
+  Object.entries(initialState).forEach(([category, values]) => {
+    if (values?.length) {
+      const cleanValues = values.filter((v) => v !== null && v !== '' && v !== undefined);
+      if (cleanValues.length) {
+        state[category] = cleanValues;
+      }
+    }
+  });
+
   const [data] = useState<FilterData>(initialData);
   const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false);
 
@@ -58,7 +76,7 @@ const Filter = (props: FilterProps) => {
     onChange(newState);
   };
 
-  const onClear = (category: string) => {
+  const onFilterClear = (category: string) => {
     onChange(deleteFromState(category, state));
   };
 
@@ -66,14 +84,19 @@ const Filter = (props: FilterProps) => {
     onChange({});
   };
 
-  const permanentCategories = Object.keys(data).filter(
-    (category) => data[category].isPermanent && category !== 'date_range',
-  );
+  const filters = {
+    search: {},
+    select: {},
+    switch: {},
+    dateRange: {},
+    tag: {},
+  } as Record<FilterType, Record<string, FilterCategoryProps>>;
 
-  const stateCategories = Object.keys(state).filter((c) => !['date_range', 'search'].includes(c));
-  const filteredStateCategories = stateCategories.filter((category) => !data[category].isPermanent);
+  Object.entries(data).forEach(([category, value]) => {
+    filters[value.type || 'tag'][category] = value;
+  });
 
-  const filterCategories = [...permanentCategories, ...filteredStateCategories];
+  const stateCategories = Object.keys(state).filter((c) => !['date_range', 'search'].includes(c));
 
   const showClearFilters = stateCategories.length > 0 || (state.search && state.search.length > 0);
 
@@ -82,10 +105,12 @@ const Filter = (props: FilterProps) => {
       data: initialData,
       filtersDependOn,
       isLoading,
+      onFilterChange,
+      onFilterClear,
       setPopoverOpen,
       state,
     }),
-    [filtersDependOn, isLoading, initialData, setPopoverOpen, state],
+    [filtersDependOn, isLoading, initialData, onFilterChange, onFilterClear, setPopoverOpen, state],
   );
 
   useEffect(() => {
@@ -102,27 +127,25 @@ const Filter = (props: FilterProps) => {
         </Modal>
         <Box sx={filterStyle.content}>
           <Icon name="Filter" sx={filterStyle.icon} />
-          {!!data.date_range && <FilterDate onChange={onFilterChange} onClear={onClear} value={state.date_range} />}
-          {filterCategories.length > 0 &&
-            filterCategories.map((category) => {
-              const { categoryName, categoryNamePlural, dependsOn, isPermanent, optionsMap } = data[category];
-              if (hasAllDependencies(filterCategories, dependsOn)) {
-                return (
-                  <FilterItem
-                    category={category}
-                    categoryName={categoryName}
-                    categoryNamePlural={categoryNamePlural}
-                    isPermanent={isPermanent}
-                    key={category}
-                    onChange={onFilterChange}
-                    onClear={onClear}
-                    optionsMap={optionsMap}
-                    value={state[category]}
-                  />
-                );
-              }
-              return null;
-            })}
+
+          {Object.keys(filters.switch).map((category) => (
+            <FilterSwitchAdapter category={category} key={category} />
+          ))}
+
+          {Object.keys(filters.dateRange).map((category) => (
+            <FilterDate category={category} key={category} />
+          ))}
+
+          {Object.keys(filters.select).map((category) => (
+            <FilterItem category={category} key={category} />
+          ))}
+          {Object.keys(filters.tag).map((category) => {
+            if (!state[category]) {
+              return;
+            }
+            return <FilterItem category={category} key={category} />;
+          })}
+
           <FilterAdd onChange={onFilterChange} />
         </Box>
         {(showClearFilters || showSearch) && (
@@ -142,13 +165,7 @@ const Filter = (props: FilterProps) => {
             {showClearFilters && showSearch && (
               <Divider orientation="vertical" size="1" variant="solid" flexShrink="0" />
             )}
-            {showSearch && (
-              <FilterSearch
-                onChange={onFilterChange}
-                onClear={onClear}
-                value={(state.Search && state.Search[0]) || ''}
-              />
-            )}
+            {showSearch && <FilterSearch onChange={onFilterChange} value={(state.Search && state.Search[0]) || ''} />}
           </Box>
         )}
       </Box>

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

@@ -1,20 +1,28 @@
 import { Dispatch, SetStateAction } from 'react';
+import { TypeIconName } from '../Icon/Icon';
+
+export type FilterType = 'dateRange' | 'search' | 'select' | 'switch' | 'tag';
 
 export type FilterOptions = string[];
 export type FilterValue = string[];
 export type FilterOptionsMap = Record<string, string>;
+export type FilterIconsMap = Record<string, TypeIconName>;
 
-export type FilterSearchCallback = (category: string, q: string) => Promise<FilterValue>;
+export type FilterSearchCallback = (
+  category: string,
+  q: string,
+) => Promise<{ iconsMap?: FilterIconsMap; options: FilterOptions; optionsMap?: FilterOptionsMap }>;
 
 export type FilterCategoryProps = {
   categoryName?: string;
   categoryNamePlural?: string;
-  dependsOn?: string[];
+  dependsOn?: Record<string, string>;
+  iconsMap?: FilterIconsMap;
   isMultiple?: boolean;
-  isPermanent?: boolean;
   onAsyncSearch?: FilterSearchCallback;
   options?: FilterOptions;
   optionsMap?: FilterOptionsMap;
+  type?: FilterType;
 };
 
 export type FilterData = Record<string, FilterCategoryProps>;
@@ -24,6 +32,8 @@ export interface FilterContextType {
   data: FilterData;
   filtersDependOn?: string[];
   isLoading?: boolean;
+  onFilterClear: (category: string) => void;
+  onFilterChange: (category: string, value: FilterValue) => void;
   setPopoverOpen: Dispatch<SetStateAction<boolean>>;
   state: FilterState;
 }

package/src/Components/Filter/Filter.utils.ts

@@ -7,17 +7,24 @@ export const hasAllDependencies = (stateKeys: string[], dependsOn?: string[]): b
   return dependsOn.every((key) => stateKeys.includes(key));
 };
 
+export const getMissingDependencies = (stateKeys: string[], dependsOn?: string[]): string[] => {
+  if (!dependsOn || dependsOn.length === 0) {
+    return [];
+  }
+  return dependsOn.filter((category) => !stateKeys.includes(category));
+};
+
 export const getDependents = (data: FilterData, categoryKey: string, filtersDependOn?: string[]): string[] => {
   const dependents: string[] = [];
   if (filtersDependOn && filtersDependOn.includes(categoryKey)) {
     Object.keys(data).forEach((category) => {
-      if (!data[category].isPermanent) {
+      if (data[category].type !== 'select') {
         dependents.push(category);
       }
     });
   } else {
     Object.keys(data).forEach((category) => {
-      if (data[category].dependsOn?.includes(categoryKey)) {
+      if (Object.keys(data[category].dependsOn || {}).includes(categoryKey)) {
         dependents.push(category);
       }
     });

package/src/Components/Filter/FilterAdd/FilterAdd.tsx

@@ -2,10 +2,11 @@ import { useState } from 'react';
 import { Menu, MenuButton, MenuList, useDisclosure } from '@chakra-ui/react';
 import Button from '../../Button/Button';
 import MenuItem from '../../Menu/MenuItem';
+import Tooltip from '../../Tooltip/Tooltip';
 import { useFilterContext } from '../Filter.context';
 import FilterForm from '../FilterForm/FilterForm';
 import { FilterValue } from '../Filter.types';
-import { hasAllDependencies } from '../Filter.utils';
+import { getMissingDependencies, hasAllDependencies } from '../Filter.utils';
 
 export interface FilterAddProps {
   onChange: (category: string, selected: FilterValue) => void;
@@ -42,7 +43,11 @@ const FilterAdd = (props: FilterAddProps) => {
 
   const stateKeys = Object.keys(state);
 
-  const isDisabled = !hasAllDependencies(stateKeys, filtersDependOn);
+  const categoryList = Object.keys(data).filter((category) => {
+    return !stateKeys.includes(category) && data[category].type === 'tag';
+  });
+
+  const isDisabled = !hasAllDependencies(stateKeys, filtersDependOn) || categoryList.length === 0;
 
   return (
     <Menu closeOnSelect={false} isOpen={isOpen} onClose={onClose} onOpen={onOpen}>
@@ -66,21 +71,25 @@ const FilterAdd = (props: FilterAddProps) => {
         {selectedCategory ? (
           <FilterForm category={selectedCategory} onChange={onFilterChange} onCancel={onClose} />
         ) : (
-          Object.keys(data).map((category) => {
-            const { categoryName, dependsOn, isPermanent } = data[category];
-            if (isPermanent) {
-              return null;
-            }
+          categoryList.map((category) => {
+            const { categoryName, dependsOn } = data[category];
+            const missingDependencies = getMissingDependencies(stateKeys, Object.keys(dependsOn || []));
             return (
-              <MenuItem
-                isDisabled={!hasAllDependencies(stateKeys, dependsOn)}
+              <Tooltip
+                isDisabled={missingDependencies.length === 0}
+                label={dependsOn?.[missingDependencies[0]]}
+                placement="right"
                 key={category}
-                onClick={() => onCategorySelect(category)}
-                pointerEvents="all"
-                rightIconName="ChevronRight"
               >
-                {categoryName || category}
-              </MenuItem>
+                <MenuItem
+                  isDisabled={missingDependencies.length > 0}
+                  onClick={() => onCategorySelect(category)}
+                  pointerEvents="all"
+                  rightIconName="ChevronRight"
+                >
+                  {categoryName || category}
+                </MenuItem>
+              </Tooltip>
             );
           })
         )}

package/src/Components/Filter/FilterDate/FilterDate.tsx

@@ -9,30 +9,29 @@ import Text from '../../Text/Text';
 import Tooltip from '../../Tooltip/Tooltip';
 import { useFilterContext } from '../Filter.context';
 import { FilterStyle } from '../Filter.theme';
-import { FilterValue } from '../Filter.types';
 
 export type FilterDateProps = {
-  onChange: (category: string, value: FilterValue) => void;
-  onClear: (category: string) => void;
-  value: FilterValue;
+  category: string;
 };
 
 const FilterDate = (props: FilterDateProps) => {
-  const { onChange, onClear, value } = props;
+  const { category } = props;
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
-  const { isLoading, setPopoverOpen } = useFilterContext();
+  const { isLoading, onFilterChange, onFilterClear, setPopoverOpen, state } = useFilterContext();
 
   const { isOpen, onClose, onToggle } = useDisclosure();
 
+  const value = state[category];
+
   const onDateRangeApply = (range: DateRange) => {
     if (range.from && range.to) {
-      onChange('date_range', [String(range.from.toMillis()), String(range.to.toMillis())]);
+      onFilterChange('date_range', [String(range.from.toMillis()), String(range.to.toMillis())]);
     }
   };
 
   const onClearClick = () => {
-    onClear('date_range');
+    onFilterClear('date_range');
     onClose();
   };
 

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

@@ -6,6 +6,7 @@ import Button from '../../Button/Button';
 import ButtonGroup from '../../ButtonGroup/ButtonGroup';
 import Checkbox from '../../Form/Checkbox/Checkbox';
 import CheckboxGroup from '../../Form/Checkbox/CheckboxGroup';
+import Icon from '../../Icon/Icon';
 import Radio from '../../Form/Radio/Radio';
 import RadioGroup from '../../Form/Radio/RadioGroup';
 import SearchInput from '../../SearchInput/SearchInput';
@@ -29,7 +30,7 @@ const FilterForm = (props: FilterFormProps) => {
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const { data, state } = useFilterContext();
-  const { isMultiple, onAsyncSearch, options, optionsMap } = data[category];
+  const { iconsMap, isMultiple, onAsyncSearch, options, optionsMap } = data[category];
   const value = state[category] || [];
 
   const [selected, setSelected] = useState<FilterValue>(value);
@@ -90,13 +91,15 @@ const FilterForm = (props: FilterFormProps) => {
     if (onAsyncSearch) {
       const response = await onAsyncSearch(category, searchValue);
       setLoading(false);
-      setFoundOptions(response);
+      setFoundOptions(response.options);
     }
   };
 
   useEffect(() => {
     if (debouncedSearchValue.length > 0) {
       getAsyncList();
+    } else {
+      setLoading(false);
     }
   }, [debouncedSearchValue]);
 
@@ -129,6 +132,7 @@ const FilterForm = (props: FilterFormProps) => {
           {items.length
             ? items.map((opt) => (
                 <Checkbox key={opt} value={opt}>
+                  {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
                   {getOptionLabel(opt, optionsMap)}
                 </Checkbox>
               ))
@@ -145,6 +149,7 @@ const FilterForm = (props: FilterFormProps) => {
           {items.length
             ? items.map((opt) => (
                 <Radio key={opt} value={opt}>
+                  {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
                   {getOptionLabel(opt, optionsMap)}
                 </Radio>
               ))

package/src/Components/Filter/FilterItem/FilterItem.tsx

@@ -9,24 +9,23 @@ import PopoverTrigger from '../../Popover/PopoverTrigger';
 import Text from '../../Text/Text';
 import Tooltip from '../../Tooltip/Tooltip';
 import { FilterStyle } from '../Filter.theme';
-import { FilterOptionsMap, FilterValue } from '../Filter.types';
+import { FilterValue } from '../Filter.types';
 import FilterForm from '../FilterForm/FilterForm';
 import { useFilterContext } from '../Filter.context';
 import { getOptionLabel } from '../Filter.utils';
 
 export type FilterItemProps = {
   category: string;
-  categoryName?: string;
-  categoryNamePlural?: string;
-  isPermanent?: boolean;
-  onChange: (category: string, value: FilterValue) => void;
-  onClear: (category: string) => void;
-  optionsMap?: FilterOptionsMap;
-  value: FilterValue;
 };
 
 const FilterItem = (props: FilterItemProps) => {
-  const { category, categoryName, categoryNamePlural, isPermanent, onChange, onClear, optionsMap, value } = props;
+  const { category } = props;
+
+  const { data, isLoading, onFilterChange, onFilterClear, setPopoverOpen, state } = useFilterContext();
+
+  const { categoryName, categoryNamePlural, optionsMap, type } = data[category];
+
+  const value = state[category];
 
   const pluralCategoryString = (categoryNamePlural || `${category}s`).toLowerCase();
 
@@ -34,8 +33,6 @@ const FilterItem = (props: FilterItemProps) => {
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
-  const { isLoading, setPopoverOpen } = useFilterContext();
-
   const onToggle = () => {
     togglePopover();
   };
@@ -45,9 +42,9 @@ const FilterItem = (props: FilterItemProps) => {
     setPopoverOpen(false);
   };
 
-  const onFilterChange = (newCategory: string, newValue: FilterValue) => {
+  const onChange = (newCategory: string, newValue: FilterValue) => {
     onClose();
-    onChange(newCategory, newValue);
+    onFilterChange(newCategory, newValue);
   };
 
   const getText = () => {
@@ -73,15 +70,15 @@ const FilterItem = (props: FilterItemProps) => {
           <Tooltip isDisabled={isLoading} label="Edit">
             <Text as="button" disabled={isLoading} onClick={onToggle} size="2" sx={filterStyle.tagEdit}>
               {getText()}
-              {isPermanent && <Icon name="ChevronDown" size="16" />}
+              {type === 'select' && <Icon name="ChevronDown" size="16" />}
             </Text>
           </Tooltip>
-          {!isPermanent && (
+          {type !== 'select' && (
             <IconButton
               aria-label={isLoading ? '' : 'Clear'}
               iconName="CloseSmall"
               isDisabled={isLoading}
-              onClick={() => onClear(category)}
+              onClick={() => onFilterClear(category)}
               size="small"
               variant="tertiary"
               sx={filterStyle.tagClear}
@@ -91,7 +88,7 @@ const FilterItem = (props: FilterItemProps) => {
         </Box>
       </PopoverTrigger>
       <PopoverContent>
-        <FilterForm category={category} categoryName={categoryName} onChange={onFilterChange} onCancel={onClose} />
+        <FilterForm category={category} categoryName={categoryName} onChange={onChange} onCancel={onClose} />
       </PopoverContent>
     </Popover>
   );

package/src/Components/Filter/FilterSearch/FilterSearch.tsx

@@ -15,12 +15,11 @@ import { FilterValue } from '../Filter.types';
 
 export interface FilterSearchProps extends Omit<InputProps, 'onChange' | 'value'> {
   onChange: (category: string, selected: FilterValue) => void;
-  onClear: (category: string) => void;
   value: string;
 }
 
 const FilterSearch = (props: FilterSearchProps) => {
-  const { onChange, onClear, value, ...rest } = props;
+  const { onChange, value, ...rest } = props;
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const [searchValue, setSearchValue] = useState(value);
@@ -31,7 +30,7 @@ const FilterSearch = (props: FilterSearchProps) => {
   };
 
   const onClearClick = () => {
-    onClear('search');
+    setSearchValue('');
   };
 
   useEffect(() => {
@@ -55,9 +54,11 @@ const FilterSearch = (props: FilterSearchProps) => {
         <Icon color="neutral.60" name="Magnifier" size="16" />
       </InputLeftElement>
       <Input {...inputProps} />
-      <InputRightElement>
-        <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="small" variant="tertiary" />
-      </InputRightElement>
+      {!!searchValue && (
+        <InputRightElement>
+          <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="small" variant="tertiary" />
+        </InputRightElement>
+      )}
     </InputGroup>
   );
 };

package/src/Components/Filter/FilterSwitch/FilterSwitch.theme.ts

@@ -6,9 +6,12 @@ const FilterSwitch = {
       container: {
         color: 'neutral.40',
         background: 'neutral.95',
-        borderRadius: '4',
         border: '1px solid',
         borderColor: 'neutral.80',
+        display: 'flex',
+        borderRadius: '4',
+      },
+      item: {
         cursor: 'pointer',
         position: 'relative',
         textOverflow: 'ellipsis',
@@ -19,6 +22,18 @@ const FilterSwitch = {
         zIndex: 0,
         fontSize: rem(14),
         lineHeight: rem(20),
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4',
+        borderLeft: '1px solid',
+        borderLeftColor: 'neutral.80',
+        _first: {
+          borderLeftRadius: '4',
+          borderLeft: 'none',
+        },
+        _last: {
+          borderRightRadius: '4',
+        },
         _focusVisible: {
           boxShadow: 'outline',
           zIndex: 1,

package/src/Components/Filter/FilterSwitch/FilterSwitch.tsx

@@ -20,7 +20,7 @@ const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
   const group = useRadioGroupContext();
   const { value: valueProp } = props;
 
-  const styles = useMultiStyleConfig('FilterSwitch', { ...group, ...props });
+  const styles = useMultiStyleConfig('FilterSwitch');
 
   const ownProps = omitThemingProps(props);
 
@@ -46,7 +46,7 @@ const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
   });
 
   return (
-    <chakra.label {...getLabelProps()} {...getCheckboxProps()} __css={styles.container}>
+    <chakra.label {...getLabelProps()} {...getCheckboxProps()} __css={styles.item}>
       <chakra.input {...getInputProps(htmlInputProps, ref)} />
       {children}
     </chakra.label>

package/src/Components/Filter/FilterSwitch/FilterSwitchGroup.tsx

@@ -1,25 +1,11 @@
-import { RadioGroup as ChakraRadioGroup, RadioGroupProps } from '@chakra-ui/react';
+import { RadioGroup as ChakraRadioGroup, RadioGroupProps, useMultiStyleConfig } from '@chakra-ui/react';
 
 export type { RadioGroupProps };
 
 const FilterSwitchGroup = (props: RadioGroupProps) => {
-  return (
-    <ChakraRadioGroup
-      display="flex"
-      {...props}
-      sx={{
-        label: {
-          _notFirst: {
-            borderLeftRadius: 0,
-            borderLeft: 'none',
-          },
-          _notLast: {
-            borderRightRadius: 0,
-          },
-        },
-      }}
-    />
-  );
+  const { container } = useMultiStyleConfig('FilterSwitch');
+
+  return <ChakraRadioGroup sx={container} {...props} />;
 };
 
 export default FilterSwitchGroup;

package/src/Components/Filter/FilterSwitchAdapter/FilterSwitchAdapter.tsx

@@ -0,0 +1,34 @@
+import { useFilterContext } from '../Filter.context';
+import { getOptionLabel } from '../Filter.utils';
+import Icon from '../../Icon/Icon';
+import FilterSwitch from '../FilterSwitch/FilterSwitch';
+import FilterSwitchGroup from '../FilterSwitch/FilterSwitchGroup';
+
+type FilterSwitchAdapterProps = {
+  category: string;
+};
+
+const FilterSwitchAdapter = (props: FilterSwitchAdapterProps) => {
+  const { category } = props;
+  const { data, onFilterChange, state } = useFilterContext();
+  const { iconsMap, options, optionsMap } = data[category];
+
+  if (!options?.length) {
+    return null;
+  }
+
+  const value = state[category]?.[0] || '';
+
+  return (
+    <FilterSwitchGroup onChange={(newValue) => onFilterChange(category, [newValue])} value={value}>
+      {options.map((opt) => (
+        <FilterSwitch key={opt} value={opt}>
+          {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} size="16" />}
+          {getOptionLabel(opt, optionsMap)}
+        </FilterSwitch>
+      ))}
+    </FilterSwitchGroup>
+  );
+};
+
+export default FilterSwitchAdapter;

package/src/Components/Form/Checkbox/Checkbox.theme.ts

@@ -41,6 +41,9 @@ const CheckboxTheme = {
     },
     label: {
       userSelect: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4',
       _disabled: { color: 'neutral.60' },
     },
   },

package/src/Components/Form/Input/Input.tsx

@@ -36,6 +36,7 @@ type UsedChakraInputProps = Pick<
   | 'min'
   | 'minLength'
   | 'pattern'
+  | 'placeholder'
   | 'step'
 >;
 export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {

package/src/Components/Form/Radio/Radio.theme.ts

@@ -45,6 +45,9 @@ const RadioTheme = {
     },
     label: {
       userSelect: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4',
       _disabled: { color: 'neutral.60' },
     },
   },

package/src/Components/Form/Textarea/Textarea.tsx

@@ -17,7 +17,16 @@ import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraTextProps = Pick<
   ChakraTextareaProps,
-  'onBlur' | 'onChange' | 'role' | 'name' | 'value' | 'autoComplete' | 'autoFocus' | 'maxLength' | 'minLength'
+  | 'onBlur'
+  | 'onChange'
+  | 'role'
+  | 'name'
+  | 'value'
+  | 'autoComplete'
+  | 'autoFocus'
+  | 'maxLength'
+  | 'minLength'
+  | 'placeholder'
 >;
 
 export interface TextareaProps extends UsedFormControlProps, UsedChakraTextProps {

package/src/Components/Icons/16x16/Filter.tsx

@@ -2,10 +2,9 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Filter = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
-    <path
-      fill="currentColor"
-      d="M7.148 3.333A1.327 1.327 0 0 0 6 2.667c-.492 0-.918.269-1.148.666H2v1.334h2.852c.23.397.656.666 1.148.666.492 0 .917-.269 1.148-.666H14V3.333H7.148ZM10 6.667a1.33 1.33 0 0 0-1.149.666H2v1.334h6.851c.232.397.657.666 1.149.666s.917-.269 1.149-.666H14V7.333h-2.851A1.328 1.328 0 0 0 10 6.667Zm-5.101 4.666a1.33 1.33 0 0 1 2.202 0H14v1.334H7.193c-.216.442-.667.75-1.193.75s-.977-.308-1.193-.75H2v-1.334h2.899Z"
-    />
+    <path d="M2 4.5H14V6H2V4.5Z" fill="currentColor" />
+    <path d="M6 10.5H10V12H6V10.5Z" fill="currentColor" />
+    <path d="M12 7.5H4V9H12V7.5Z" fill="currentColor" />
   </Icon>
 ));
 

package/src/Components/Icons/24x24/Filter.tsx

@@ -2,10 +2,9 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
 const Filter = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
-    <path
-      d="M10.723 5A1.99 1.99 0 0 0 9 4c-.738 0-1.376.404-1.722 1H3v2h4.278c.346.596.984 1 1.722 1a1.99 1.99 0 0 0 1.723-1H21V5H10.723ZM15 10c-.738 0-1.376.404-1.723 1H3v2h10.277c.347.596.985 1 1.723 1 .738 0 1.376-.404 1.723-1H21v-2h-4.277c-.347-.596-.985-1-1.723-1ZM7.348 17a1.994 1.994 0 0 1 3.304 0H21v2H10.79A1.993 1.993 0 0 1 9 20.125 1.993 1.993 0 0 1 7.21 19H3v-2h4.348Z"
-      fill="currentColor"
-    />
+    <path d="m3 7h18v2h-18z" fill="currentColor" />
+    <path d="m9 15h6v2h-6z" fill="currentColor" />
+    <path d="m18 11h-12v2h12z" fill="currentColor" />
   </Icon>
 ));
 

package/src/Components/OverflowMenu/OverflowMenu.tsx

@@ -1,3 +1,5 @@
+import { Fragment } from 'react';
+import { Portal } from '@chakra-ui/react';
 import IconButton, { IconButtonProps } from '../IconButton/IconButton';
 import Menu, { MenuProps } from '../Menu/Menu';
 import MenuButton from '../Menu/MenuButton';
@@ -7,9 +9,11 @@ export interface OverflowMenuProps extends MenuProps {
   children: MenuListProps['children'];
   buttonSize?: IconButtonProps['size'];
   triggerLabel?: string;
+  withPortal?: boolean;
 }
 
-const OverflowMenu = ({ buttonSize = 'small', children, triggerLabel }: OverflowMenuProps) => {
+const OverflowMenu = ({ buttonSize = 'small', children, triggerLabel, withPortal }: OverflowMenuProps) => {
+  const Wrapper = withPortal ? Portal : Fragment;
   return (
     <Menu isLazy>
       <MenuButton
@@ -20,13 +24,16 @@ const OverflowMenu = ({ buttonSize = 'small', children, triggerLabel }: Overflow
         size={buttonSize}
         variant="tertiary"
       />
-      <MenuList>{children}</MenuList>
+      <Wrapper>
+        <MenuList>{children}</MenuList>
+      </Wrapper>
     </Menu>
   );
 };
 
 OverflowMenu.defaultProps = {
   triggerLabel: 'Open menu',
+  withPortal: false,
 };
 
 export default OverflowMenu;

package/src/Components/Select/Select.tsx

@@ -20,6 +20,7 @@ export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' |
   isLoading?: boolean;
   label?: ReactNode;
   name?: string;
+  placeholder?: ChakraSelectProps['placeholder'];
   onBlur?: ChakraSelectProps['onBlur'];
   onChange?: ChakraSelectProps['onChange'];
   size?: 'small' | 'medium';

package/src/index.ts

@@ -323,3 +323,7 @@ export { default as TablePagination } from './Components/Table/TablePagination';
 
 export type { ProgressIndicatorProps } from './Components/ProgressIndicator/ProgressIndicator';
 export { default as ProgressIndicator } from './Components/ProgressIndicator/ProgressIndicator';
+
+export type { FilterProps } from './Components/Filter/Filter';
+export { default as Filter } from './Components/Filter/Filter';
+export * from './Components/Filter/Filter.types';