@bitrise/bitkit 12.69.0 → 12.70.0-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.69.0",
+  "version": "12.70.0-alpha.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Button/Button.theme.ts

@@ -1,4 +1,4 @@
-const disabledStates = {
+export const disabledStates = {
   primary: {
     _disabled: {
       bgGradient: 'linear(to-b, neutral.80, neutral.70)',

package/src/Components/DatePicker/DatePicker.tsx

@@ -22,6 +22,7 @@ export interface DatePickerProps {
   selected?: DateRange;
   onApply?: (range: DateRange) => void;
   onClose: () => void;
+  onClear?: () => void;
   visible: boolean;
 }
 
@@ -30,7 +31,7 @@ export interface DatePickerProps {
  * range selection.
  */
 const DatePicker = (props: DatePickerProps) => {
-  const { children, onApply, onClose, visible, selectable, selected } = props;
+  const { children, onApply, onClose, onClear, visible, selectable, selected } = props;
 
   const { isMobile } = useResponsive();
   const today = DateTime.now().startOf('day');
@@ -63,7 +64,7 @@ const DatePicker = (props: DatePickerProps) => {
   };
 
   const { leftViewDate, rightViewDate, updateLeftViewDate, updateRightViewDate } = useViewDate({
-    initalView: dateFrom || selectable?.from,
+    initalView: dateFrom || selectable?.to,
   });
 
   const [preview, setPreview] = useState<'from' | 'to' | undefined>(undefined);
@@ -164,7 +165,7 @@ const DatePicker = (props: DatePickerProps) => {
                       />
                     )}
                   </Box>
-                  <DatePickerFooter onApply={handleApply} onClose={handleClose} selected={selected} />
+                  <DatePickerFooter onApply={handleApply} onClose={handleClose} onClear={onClear} selected={selected} />
                 </>
               )}
             </Box>

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -8,10 +8,12 @@ const DatePickerFooter = ({
   selected,
   onClose,
   onApply,
+  onClear,
 }: {
   selected?: DateRange;
   onClose: () => void;
   onApply: () => void;
+  onClear?: () => void;
 }) => {
   return (
     <Box
@@ -20,6 +22,11 @@ const DatePickerFooter = ({
       gridTemplateRows={['1.25rem 2rem', 'unset']}
       gap="24"
     >
+      {!!onClear && (
+        <Button size="small" variant="tertiary" width="fit-content" onClick={() => onClear()}>
+          Clear
+        </Button>
+      )}
       <Text alignSelf="center" justifySelf="center" size="2" color="text.secondary" gridColumn={['1', '2']}>
         {selected?.from?.toFormat('DD', { locale: 'en-US' })}
         {selected?.from || selected?.to ? ' - ' : undefined}

package/src/Components/Filter/Filter.context.tsx

@@ -0,0 +1,6 @@
+import { createContext } from '@chakra-ui/react-utils';
+import { FilterContextType } from './Filter.types';
+
+export const [FilterContext, useFilterContext] = createContext<FilterContextType>({
+  name: 'FilterContext',
+});

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

@@ -0,0 +1,71 @@
+import { FilterContextType, FilterData, FilterOptions, FilterState } from './Filter.types';
+
+export const FILTER_STORY_OPTIONS: FilterOptions =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit Reiciendis reprehenderit laudantium laborum excepturi nam quae quod sunt expedita vel repellat cum cupiditate esse similique est ducimus provident eos numquam voluptas'.split(
+    ' ',
+  );
+
+export const FILTER_STORY_DATA: FilterData = {
+  date_range: {
+    categoryName: 'Date',
+    categoryNamePlural: 'dates',
+    isPermanent: true,
+  },
+  pipeline: {
+    categoryName: 'Pipeline',
+    categoryNamePlural: 'Pipelines',
+    options: FILTER_STORY_OPTIONS,
+  },
+  stage: {
+    categoryName: 'Stage',
+    categoryNamePlural: 'Stages',
+    options: FILTER_STORY_OPTIONS,
+    dependsOn: ['pipeline'],
+  },
+  workflow: {
+    categoryName: 'Workflow',
+    isMultiple: true,
+    options: FILTER_STORY_OPTIONS,
+  },
+  branch: {
+    options: [
+      'BIVS-2231-create-rename-to-utilisation-views',
+      'revert-11937-revert-11884-RA-2060-release-manager-role',
+      'master',
+      'CI-2264-consolidate-other-provider-type-to-custom',
+    ],
+  },
+  app: {
+    categoryName: 'App',
+    isPermanent: true,
+    options: ['46b6b9a78a418ee8', '32b14416be4b7b24', '0a248b278e135ea7'],
+    optionsMap: {
+      '46b6b9a78a418ee8': 'bitrise-website',
+      '32b14416be4b7b24': 'bitkit',
+      '0a248b278e135ea7': 'pipeline-service',
+    },
+  },
+  test_case: {
+    categoryName: 'Test case',
+    onAsyncSearch: (category, q) => {
+      console.log('onAsyncSearch', { category, q });
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(['found 1', 'found 2']);
+        }, 2000);
+      });
+    },
+    options: ['default 1', 'default 2', 'default 3'],
+  },
+};
+
+export const FILTER_STORY_INIT_STATE: FilterState = {
+  pipeline: ['ipsum'],
+  app: ['46b6b9a78a418ee8'],
+};
+
+export const FILTER_STORY_CONTEXT: FilterContextType = {
+  data: FILTER_STORY_DATA,
+  setPopoverOpen: () => {},
+  state: FILTER_STORY_INIT_STATE,
+};

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

@@ -0,0 +1,161 @@
+import { createMultiStyleConfigHelpers, SystemStyleObject } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
+import { disabledStates } from '../Button/Button.theme';
+
+export const parts = [
+  'container',
+  'icon',
+  'content',
+  'rightContent',
+  'item',
+  'tagEdit',
+  'tagClear',
+  'form',
+  'formHeader',
+  'formTitle',
+  'formBadge',
+  'formSearch',
+  'formInputGroup',
+  'formButtonGroup',
+  'searchInput',
+] as const;
+export type FilterStyle = Record<(typeof parts)[number], SystemStyleObject>;
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts);
+
+const FilterTheme = defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      background: 'neutral.100',
+      display: 'flex',
+      flexDirection: ['column', 'row'],
+      gap: '12',
+    },
+    icon: {
+      margin: '4',
+      color: 'neutral.60',
+    },
+    content: {
+      display: 'flex',
+      gap: '12',
+      flexWrap: 'wrap',
+    },
+    rightContent: {
+      display: 'flex',
+      gap: '16',
+      marginInlineStart: 'auto',
+    },
+    item: {
+      border: '1px solid',
+      borderColor: 'neutral.80',
+      borderRadius: '4',
+      display: 'flex',
+      width: 'fit-content',
+      background: 'neutral.100',
+      wordBreak: 'break-word',
+    },
+    tagEdit: {
+      color: 'purple.10',
+      display: 'flex',
+      gap: '8',
+      alignItems: 'center',
+      paddingBlock: '4',
+      paddingInlineStart: rem(11),
+      paddingInlineEnd: rem(7),
+      borderRadius: '4',
+      _hover: {
+        background: 'neutral.93',
+      },
+      _active: {
+        background: 'neutral.90',
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        ...disabledStates.tertiary,
+        _hover: disabledStates.tertiary,
+        _active: disabledStates.tertiary,
+      },
+    },
+    tagClear: {
+      color: 'purple.10',
+      borderRadius: '4',
+      border: 0,
+      minWidth: rem(27),
+      height: rem(30),
+      justifyContent: 'flex-start',
+      svg: {
+        marginInlineStart: '4',
+      },
+      _hover: {
+        background: 'neutral.93',
+      },
+      _active: {
+        background: 'neutral.90',
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        ...disabledStates.tertiary,
+        _hover: disabledStates.tertiary,
+        _active: disabledStates.tertiary,
+      },
+    },
+    form: {
+      background: 'neutral.100',
+      borderRadius: '8',
+      padding: '16',
+      minWidth: rem(352),
+      maxWidth: rem(480),
+    },
+    formHeader: {
+      display: 'flex',
+      gap: '8',
+      justifyContent: 'space-between',
+      marginBlockEnd: '8',
+    },
+    formTitle: {
+      color: 'purpe.10',
+      fontWeight: 'demiBold',
+    },
+    formBadge: {
+      backgroundColor: 'neutral.93',
+      color: 'neutral.40',
+      fontWeight: 'bold',
+      fontVariantNumeric: 'tabular-nums',
+    },
+    formSearch: {
+      marginBlockEnd: '16',
+    },
+    formInputGroup: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12',
+      maxHeight: rem(196),
+      overflowY: 'scroll',
+      paddingInline: '12',
+      paddingBlock: rem(3),
+    },
+    formButtonGroup: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      marginBlockStart: '24',
+    },
+    searchInput: {
+      paddingLeft: '32',
+      paddingY: '4',
+      paddingRight: '8',
+      border: undefined,
+      borderRadius: '4',
+      borderColor: undefined,
+      boxShadow: undefined,
+      fontSize: '2',
+      _focusVisible: {
+        backgroundColor: 'neutral.95',
+      },
+      _hover: {
+        backgroundColor: 'neutral.95',
+      },
+    },
+  },
+});
+
+export default FilterTheme;

package/src/Components/Filter/Filter.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Modal, ModalOverlay, useMultiStyleConfig } from '@chakra-ui/react';
+import Box, { BoxProps } from '../Box/Box';
+import Button from '../Button/Button';
+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 FilterAdd from './FilterAdd/FilterAdd';
+import FilterItem from './FilterItem/FilterItem';
+import FilterSearch from './FilterSearch/FilterSearch';
+import FilterDate from './FilterDate/FilterDate';
+
+export interface FilterProps extends Omit<BoxProps, 'onChange'> {
+  filtersDependOn?: string[];
+  initialData: FilterData;
+  isLoading?: boolean;
+  onChange: (state: FilterState) => void;
+  showSearch?: boolean;
+  state: FilterState;
+}
+
+const Filter = (props: FilterProps) => {
+  const { filtersDependOn, initialData, isLoading, onChange, showSearch, state, ...rest } = props;
+
+  const isInited = useRef<boolean>(false);
+
+  const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
+
+  const [data] = useState<FilterData>(initialData);
+  const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false);
+
+  const deleteFromState = (category: string, stateProp: FilterState): FilterState => {
+    const filteredState = { ...stateProp };
+    delete filteredState[category];
+
+    const dependents = getDependents(data, category, filtersDependOn);
+
+    dependents.forEach((dependent) => {
+      delete filteredState[dependent];
+    });
+
+    return filteredState;
+  };
+
+  const onFilterChange = (category: string, value: FilterValue) => {
+    if (isInited.current === false) {
+      return;
+    }
+    let newState = { ...state };
+    if (value && value.length > 0) {
+      newState[category] = value;
+    } else if (newState[category]) {
+      newState = deleteFromState(category, newState);
+    }
+    onChange(newState);
+  };
+
+  const onClear = (category: string) => {
+    onChange(deleteFromState(category, state));
+  };
+
+  const onClearFilters = () => {
+    onChange({});
+  };
+
+  const permanentCategories = Object.keys(data).filter(
+    (category) => data[category].isPermanent && category !== 'date_range',
+  );
+
+  const stateCategories = Object.keys(state).filter((c) => !['date_range', 'search'].includes(c));
+  const filteredStateCategories = stateCategories.filter((category) => !data[category].isPermanent);
+
+  const filterCategories = [...permanentCategories, ...filteredStateCategories];
+
+  const showClearFilters = stateCategories.length > 0 || (state.search && state.search.length > 0);
+
+  const contextValue: FilterContextType = useMemo(
+    () => ({
+      data: initialData,
+      filtersDependOn,
+      isLoading,
+      setPopoverOpen,
+      state,
+    }),
+    [filtersDependOn, isLoading, initialData, setPopoverOpen, state],
+  );
+
+  useEffect(() => {
+    if (isInited.current === false) {
+      isInited.current = true;
+    }
+  }, [isInited.current]);
+
+  return (
+    <FilterContext value={contextValue}>
+      <Box sx={filterStyle.container} {...rest}>
+        <Modal isOpen={isPopoverOpen} onClose={() => {}}>
+          {isPopoverOpen && <ModalOverlay />}
+        </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;
+            })}
+          <FilterAdd onChange={onFilterChange} />
+        </Box>
+        {(showClearFilters || showSearch) && (
+          <Box sx={filterStyle.rightContent}>
+            {showClearFilters && (
+              <Button
+                isDisabled={isLoading}
+                leftIconName="CloseSmall"
+                minWidth="7.5rem"
+                onClick={onClearFilters}
+                size="small"
+                variant="tertiary"
+              >
+                Clear filters
+              </Button>
+            )}
+            {showClearFilters && showSearch && (
+              <Divider orientation="vertical" size="1" variant="solid" flexShrink="0" />
+            )}
+            {showSearch && (
+              <FilterSearch
+                onChange={onFilterChange}
+                onClear={onClear}
+                value={(state.Search && state.Search[0]) || ''}
+              />
+            )}
+          </Box>
+        )}
+      </Box>
+    </FilterContext>
+  );
+};
+
+export default Filter;

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

@@ -0,0 +1,29 @@
+import { Dispatch, SetStateAction } from 'react';
+
+export type FilterOptions = string[];
+export type FilterValue = string[];
+export type FilterOptionsMap = Record<string, string>;
+
+export type FilterSearchCallback = (category: string, q: string) => Promise<FilterValue>;
+
+export type FilterCategoryProps = {
+  categoryName?: string;
+  categoryNamePlural?: string;
+  dependsOn?: string[];
+  isMultiple?: boolean;
+  isPermanent?: boolean;
+  onAsyncSearch?: FilterSearchCallback;
+  options?: FilterOptions;
+  optionsMap?: FilterOptionsMap;
+};
+
+export type FilterData = Record<string, FilterCategoryProps>;
+export type FilterState = Record<string, FilterValue>;
+
+export interface FilterContextType {
+  data: FilterData;
+  filtersDependOn?: string[];
+  isLoading?: boolean;
+  setPopoverOpen: Dispatch<SetStateAction<boolean>>;
+  state: FilterState;
+}

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

@@ -0,0 +1,33 @@
+import { FilterData, FilterOptionsMap } from './Filter.types';
+
+export const hasAllDependencies = (stateKeys: string[], dependsOn?: string[]): boolean => {
+  if (!dependsOn || dependsOn.length === 0) {
+    return true;
+  }
+  return dependsOn.every((key) => stateKeys.includes(key));
+};
+
+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) {
+        dependents.push(category);
+      }
+    });
+  } else {
+    Object.keys(data).forEach((category) => {
+      if (data[category].dependsOn?.includes(categoryKey)) {
+        dependents.push(category);
+      }
+    });
+  }
+  return dependents;
+};
+
+export const getOptionLabel = (option: string, optionsMap?: FilterOptionsMap) => {
+  if (!optionsMap) {
+    return option;
+  }
+  return optionsMap[option] || option;
+};

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

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { Menu, MenuButton, MenuList, useDisclosure } from '@chakra-ui/react';
+import Button from '../../Button/Button';
+import MenuItem from '../../Menu/MenuItem';
+import { useFilterContext } from '../Filter.context';
+import FilterForm from '../FilterForm/FilterForm';
+import { FilterValue } from '../Filter.types';
+import { hasAllDependencies } from '../Filter.utils';
+
+export interface FilterAddProps {
+  onChange: (category: string, selected: FilterValue) => void;
+}
+
+const FilterAdd = (props: FilterAddProps) => {
+  const { onChange } = props;
+  const [selectedCategory, setSelectedCategory] = useState<string | undefined>();
+
+  const { isOpen, onClose: closeMenu, onOpen: openMenu } = useDisclosure();
+
+  const { data, filtersDependOn, isLoading, setPopoverOpen, state } = useFilterContext();
+
+  const onCategorySelect = (category: string) => {
+    setSelectedCategory(category);
+  };
+
+  const onOpen = () => {
+    openMenu();
+    setPopoverOpen(true);
+    setSelectedCategory(undefined);
+  };
+
+  const onClose = () => {
+    setPopoverOpen(false);
+    closeMenu();
+    setSelectedCategory(undefined);
+  };
+
+  const onFilterChange = (category: string, value: FilterValue) => {
+    onClose();
+    onChange(category, value);
+  };
+
+  const stateKeys = Object.keys(state);
+
+  const isDisabled = !hasAllDependencies(stateKeys, filtersDependOn);
+
+  return (
+    <Menu closeOnSelect={false} isOpen={isOpen} onClose={onClose} onOpen={onOpen}>
+      <MenuButton
+        as={Button}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        leftIconName="PlusOpen"
+        size="small"
+        variant="tertiary"
+        position={isOpen ? 'relative' : undefined}
+        zIndex={isOpen ? 'dialog' : undefined}
+      >
+        Add filter {isOpen}
+      </MenuButton>
+      <MenuList
+        paddingY={selectedCategory ? 0 : '12'}
+        position={isOpen ? 'relative' : undefined}
+        zIndex={isOpen ? 'dialog' : undefined}
+      >
+        {selectedCategory ? (
+          <FilterForm category={selectedCategory} onChange={onFilterChange} onCancel={onClose} />
+        ) : (
+          Object.keys(data).map((category) => {
+            const { categoryName, dependsOn, isPermanent } = data[category];
+            if (isPermanent) {
+              return null;
+            }
+            return (
+              <MenuItem
+                isDisabled={!hasAllDependencies(stateKeys, dependsOn)}
+                key={category}
+                onClick={() => onCategorySelect(category)}
+                pointerEvents="all"
+                rightIconName="ChevronRight"
+              >
+                {categoryName || category}
+              </MenuItem>
+            );
+          })
+        )}
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default FilterAdd;

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

@@ -0,0 +1,78 @@
+// import { useEffect } from 'react';
+import { useEffect } from 'react';
+import { useDisclosure, useMultiStyleConfig } from '@chakra-ui/react';
+import { DateTime } from 'luxon';
+import Box from '../../Box/Box';
+import DatePicker, { DateRange, useDateRange } from '../../DatePicker/DatePicker';
+import Icon from '../../Icon/Icon';
+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;
+};
+
+const FilterDate = (props: FilterDateProps) => {
+  const { onChange, onClear, value } = props;
+  const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
+
+  const { isLoading, setPopoverOpen } = useFilterContext();
+
+  const { isOpen, onClose, onToggle } = useDisclosure();
+
+  const onDateRangeApply = (range: DateRange) => {
+    if (range.from && range.to) {
+      onChange('date_range', [String(range.from.toMillis()), String(range.to.toMillis())]);
+    }
+  };
+
+  const onClearClick = () => {
+    onClear('date_range');
+    onClose();
+  };
+
+  useEffect(() => {
+    setPopoverOpen(isOpen);
+  }, [isOpen]);
+
+  const now = DateTime.local();
+  const twoYearsAgo = now.minus({ years: 2 });
+
+  const selectable = useDateRange(twoYearsAgo, now);
+
+  const selectedRange: DateRange | undefined =
+    value && value[0]
+      ? new DateRange(DateTime.fromMillis(Number(value[0])), DateTime.fromMillis(Number(value[1])))
+      : undefined;
+
+  const label = selectedRange
+    ? `${selectedRange.from?.toFormat('LLL dd')} - ${selectedRange.to?.toFormat('LLL dd')}`
+    : 'All dates';
+
+  return (
+    <DatePicker
+      selectable={selectable}
+      selected={selectedRange}
+      onApply={onDateRangeApply}
+      onClose={onClose}
+      onClear={value?.length ? onClearClick : undefined}
+      visible={isOpen}
+    >
+      <Box sx={filterStyle.item} position={isOpen ? 'relative' : undefined} zIndex={isOpen ? 'dialog' : undefined}>
+        <Tooltip isDisabled={isLoading} label="Edit">
+          <Text as="button" disabled={isLoading} onClick={onToggle} size="2" sx={filterStyle.tagEdit}>
+            <Icon color="neutral.60" name="Calendar" size="16" /> {label}
+            <Icon name="ChevronDown" size="16" />
+          </Text>
+        </Tooltip>
+      </Box>
+    </DatePicker>
+  );
+};
+
+export default FilterDate;

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

@@ -0,0 +1,171 @@
+import { FormEvent, useEffect, useMemo, useState } from 'react';
+import { useMultiStyleConfig } from '@chakra-ui/react';
+import Badge from '../../Badge/Badge';
+import Box from '../../Box/Box';
+import Button from '../../Button/Button';
+import ButtonGroup from '../../ButtonGroup/ButtonGroup';
+import Checkbox from '../../Form/Checkbox/Checkbox';
+import CheckboxGroup from '../../Form/Checkbox/CheckboxGroup';
+import Radio from '../../Form/Radio/Radio';
+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 { isEqual, useDebounce } from '../../../utils/utils';
+import { getOptionLabel } from '../Filter.utils';
+import { useFilterContext } from '../Filter.context';
+
+export type FilterFormProps = {
+  category: string;
+  categoryName?: string;
+  onChange: (category: string, selected: FilterValue, previousValue: FilterValue) => void;
+  onCancel: () => void;
+};
+
+const FilterForm = (props: FilterFormProps) => {
+  const { category, categoryName, onChange, onCancel } = props;
+
+  const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
+
+  const { data, state } = useFilterContext();
+  const { isMultiple, onAsyncSearch, options, optionsMap } = data[category];
+  const value = state[category] || [];
+
+  const [selected, setSelected] = useState<FilterValue>(value);
+
+  const [searchValue, setSearchValue] = useState<string>('');
+  const debouncedSearchValue = useDebounce<string>(searchValue, 1000);
+
+  const [isLoading, setLoading] = useState(false);
+  const [foundOptions, setFoundOptions] = useState<FilterOptions>([]);
+
+  const isAsync = !!onAsyncSearch;
+  const withSearch = (options && options.length > 5) || isAsync;
+
+  const isDisabled = isEqual(selected, value);
+
+  const filteredOptions = useMemo(() => {
+    if (options?.length) {
+      return options.filter((o) => o.toLowerCase().includes(searchValue.toLowerCase()));
+    }
+    return [];
+  }, [searchValue]);
+
+  const onSearchChange = (q: string) => {
+    setSearchValue(q);
+    if (isAsync) {
+      if (q.length > 0) {
+        setLoading(true);
+      } else {
+        setFoundOptions([]);
+      }
+    }
+  };
+
+  const onSubmit = (e: FormEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const newSelected = selected[0] === '' ? [] : selected;
+    onChange(category, newSelected, value);
+  };
+
+  const onClearClick = () => {
+    setSelected([]);
+    onChange(category, [], value);
+  };
+
+  const onCancelClick = () => {
+    setSelected(value);
+    onCancel();
+  };
+
+  const getEmptyText = () => {
+    if (searchValue.length) {
+      return 'No result. Refine your search term.';
+    }
+    return '';
+  };
+
+  const getAsyncList = async () => {
+    if (onAsyncSearch) {
+      const response = await onAsyncSearch(category, searchValue);
+      setLoading(false);
+      setFoundOptions(response);
+    }
+  };
+
+  useEffect(() => {
+    if (debouncedSearchValue.length > 0) {
+      getAsyncList();
+    }
+  }, [debouncedSearchValue]);
+
+  const isEditMode = value.length !== 0;
+
+  const items =
+    isAsync && !!searchValue ? [...value, ...foundOptions] : Array.from(new Set([...value, ...filteredOptions]));
+
+  return (
+    <Box as="form" onSubmit={onSubmit} sx={filterStyle.form}>
+      <Box sx={filterStyle.formHeader}>
+        <Text as="h5" sx={filterStyle.formTitle}>
+          {categoryName || category}
+        </Text>
+        {isMultiple && <Badge sx={filterStyle.formBadge}>{selected[0] === '' ? '0' : selected.length}</Badge>}
+      </Box>
+      {(withSearch || isAsync) && (
+        <SearchInput
+          autoFocus
+          // isLoading={isLoading}
+          placeholder={isAsync ? 'Start typing to search options' : 'Start typing to find options'}
+          onChange={onSearchChange}
+          sx={filterStyle.formSearch}
+          value={searchValue}
+        />
+      )}
+      {isLoading && 'Loading...'}
+      {!isLoading && isMultiple && (
+        <CheckboxGroup onChange={setSelected} value={selected} sx={filterStyle.formInputGroup}>
+          {items.length
+            ? items.map((opt) => (
+                <Checkbox key={opt} value={opt}>
+                  {getOptionLabel(opt, optionsMap)}
+                </Checkbox>
+              ))
+            : getEmptyText()}
+        </CheckboxGroup>
+      )}
+      {!isLoading && !isMultiple && (
+        <RadioGroup onChange={(v) => setSelected([v])} value={selected[0] || ''} sx={filterStyle.formInputGroup}>
+          <Radio value="">
+            <Text as="span" color="neutral.40" fontStyle="italic">
+              Not filtered
+            </Text>
+          </Radio>
+          {items.length
+            ? items.map((opt) => (
+                <Radio key={opt} value={opt}>
+                  {getOptionLabel(opt, optionsMap)}
+                </Radio>
+              ))
+            : getEmptyText()}
+        </RadioGroup>
+      )}
+      <ButtonGroup spacing="12" sx={filterStyle.formButtonGroup}>
+        {isEditMode && (
+          <Button marginInlineEnd="auto" onClick={onClearClick} size="small" variant="tertiary">
+            Clear
+          </Button>
+        )}
+        <Button onClick={onCancelClick} size="small" type="reset" variant="secondary">
+          Cancel
+        </Button>
+        <Button isDisabled={isDisabled} size="small" type="submit">
+          {(selected.length === 0 || selected[0] === '') && isEditMode ? 'Remove' : 'Apply'}
+        </Button>
+      </ButtonGroup>
+    </Box>
+  );
+};
+
+export default FilterForm;

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

@@ -0,0 +1,100 @@
+import { useEffect } from 'react';
+import { useDisclosure, useMultiStyleConfig } from '@chakra-ui/react';
+import Box from '../../Box/Box';
+import Icon from '../../Icon/Icon';
+import IconButton from '../../IconButton/IconButton';
+import Popover from '../../Popover/Popover';
+import PopoverContent from '../../Popover/PopoverContent';
+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 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 pluralCategoryString = (categoryNamePlural || `${category}s`).toLowerCase();
+
+  const { isOpen, onToggle: togglePopover, onClose: closePopover } = useDisclosure();
+
+  const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
+
+  const { isLoading, setPopoverOpen } = useFilterContext();
+
+  const onToggle = () => {
+    togglePopover();
+  };
+
+  const onClose = () => {
+    closePopover();
+    setPopoverOpen(false);
+  };
+
+  const onFilterChange = (newCategory: string, newValue: FilterValue) => {
+    onClose();
+    onChange(newCategory, newValue);
+  };
+
+  const getText = () => {
+    if (!value || value.length === 0) {
+      return `All ${pluralCategoryString}`;
+    }
+    if (value.length > 1) {
+      return `${value.length} ${pluralCategoryString}`;
+    }
+    return `${categoryName || category}: ${getOptionLabel(value[0], optionsMap)}`;
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      setPopoverOpen(true);
+    }
+  }, [isOpen]);
+
+  return (
+    <Popover isLazy isOpen={isOpen} onClose={onClose}>
+      <PopoverTrigger>
+        <Box sx={filterStyle.item} position={isOpen ? 'relative' : undefined} zIndex={isOpen ? 'dialog' : undefined}>
+          <Tooltip isDisabled={isLoading} label="Edit">
+            <Text as="button" disabled={isLoading} onClick={onToggle} size="2" sx={filterStyle.tagEdit}>
+              {getText()}
+              {isPermanent && <Icon name="ChevronDown" size="16" />}
+            </Text>
+          </Tooltip>
+          {!isPermanent && (
+            <IconButton
+              aria-label={isLoading ? '' : 'Clear'}
+              iconName="CloseSmall"
+              isDisabled={isLoading}
+              onClick={() => onClear(category)}
+              size="small"
+              variant="tertiary"
+              sx={filterStyle.tagClear}
+              tooltipProps={{ shouldWrapChildren: false }}
+            />
+          )}
+        </Box>
+      </PopoverTrigger>
+      <PopoverContent>
+        <FilterForm category={category} categoryName={categoryName} onChange={onFilterChange} onCancel={onClose} />
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default FilterItem;

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

@@ -0,0 +1,65 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+import {
+  Input,
+  InputGroup,
+  InputLeftElement,
+  InputProps,
+  InputRightElement,
+  useMultiStyleConfig,
+} from '@chakra-ui/react';
+import { useDebounce } from '../../../utils/utils';
+import Icon from '../../Icon/Icon';
+import IconButton from '../../IconButton/IconButton';
+import { FilterStyle } from '../Filter.theme';
+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 filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
+
+  const [searchValue, setSearchValue] = useState(value);
+  const debouncedSearchValue = useDebounce<string>(searchValue, 500);
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.currentTarget.value);
+  };
+
+  const onClearClick = () => {
+    onClear('search');
+  };
+
+  useEffect(() => {
+    onChange('search', debouncedSearchValue.length ? [debouncedSearchValue] : []);
+  }, [debouncedSearchValue]);
+
+  useEffect(() => {
+    setSearchValue(value);
+  }, [value]);
+
+  const inputProps: InputProps = {
+    placeholder: 'Search...',
+    sx: filterStyle.searchInput,
+    onChange: onInputChange,
+    value: searchValue,
+    ...rest,
+  };
+  return (
+    <InputGroup maxWidth="9.25rem" height="fit-content">
+      <InputLeftElement margin="8">
+        <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>
+    </InputGroup>
+  );
+};
+
+export default FilterSearch;

package/src/Components/{Form → Filter}/FilterSwitch/FilterSwitch.theme.ts

@@ -1,3 +1,5 @@
+import { rem } from '../../../utils/utils';
+
 const FilterSwitch = {
   baseStyle: () => {
     return {
@@ -7,13 +9,20 @@ const FilterSwitch = {
         borderRadius: '4',
         border: '1px solid',
         borderColor: 'neutral.80',
-        paddingBlock: '6',
-        paddingInline: '12',
         cursor: 'pointer',
         position: 'relative',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
+        paddingBlock: rem(5),
+        paddingInline: rem(11),
+        zIndex: 0,
+        fontSize: rem(14),
+        lineHeight: rem(20),
+        _focusVisible: {
+          boxShadow: 'outline',
+          zIndex: 1,
+        },
         _hover: {
           background: 'neutral.100',
         },
@@ -27,13 +36,6 @@ const FilterSwitch = {
           cursor: 'default',
         },
       },
-      label: {
-        margin: 0,
-        userSelect: 'none',
-        _focusVisible: {
-          boxShadow: 'outline',
-        },
-      },
     };
   },
 };

package/src/Components/{Form → Filter}/FilterSwitch/FilterSwitch.tsx

@@ -36,7 +36,7 @@ const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
 
   const { name } = group;
 
-  const { getInputProps, getLabelProps, getRootProps, getCheckboxProps } = useRadio({
+  const { getInputProps, getLabelProps, getCheckboxProps } = useRadio({
     ...rest,
     isChecked,
     isFocusable,
@@ -46,11 +46,9 @@ const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
   });
 
   return (
-    <chakra.label {...getRootProps()} __css={styles.container}>
+    <chakra.label {...getLabelProps()} {...getCheckboxProps()} __css={styles.container}>
       <chakra.input {...getInputProps(htmlInputProps, ref)} />
-      <chakra.span {...getCheckboxProps()} {...getLabelProps()} __css={styles.label}>
-        {children}
-      </chakra.span>
+      {children}
     </chakra.label>
   );
 });

package/src/Components/Form/Checkbox/CheckboxGroup.tsx

@@ -1,7 +1,10 @@
 import { CheckboxGroup as ChakraCheckboxGroup, CheckboxGroupProps as ChakraCheckboxGroupProps } from '@chakra-ui/react';
 import Box, { BoxProps } from '../../Box/Box';
 
-export type CheckboxGroupProps = ChakraCheckboxGroupProps & Omit<BoxProps, 'onChange'>;
+export type CheckboxGroupProps = Omit<ChakraCheckboxGroupProps, 'onChange'> &
+  Omit<BoxProps, 'onChange'> & {
+    onChange?(value: Array<string>): void;
+  };
 
 /**
  * CheckboxGroup component to help manage the checked state of its children Checkbox components and conveniently pass a few shared style props to each.

package/src/Components/Icons/Icons.tsx

@@ -14,8 +14,8 @@ import Th from '../Table/Th';
 import Thead from '../Table/Thead';
 import Provider from '../Provider/Provider';
 import Input from '../Form/Input/Input';
-import FilterSwitchGroup from '../Form/FilterSwitch/FilterSwitchGroup';
-import FilterSwitch from '../Form/FilterSwitch/FilterSwitch';
+import FilterSwitchGroup from '../Filter/FilterSwitch/FilterSwitchGroup';
+import FilterSwitch from '../Filter/FilterSwitch/FilterSwitch';
 import * as bigIcons from './24x24';
 import { FigmaIcon, figmaIcons } from './figmaIcons';
 

package/src/Components/Text/Text.tsx

@@ -1,46 +1,7 @@
 import { Text as ChakraText, TextProps as ChakraTextProps, forwardRef, ResponsiveValue } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
-type TextTags =
-  | 'a'
-  | 'abbr'
-  | 'bdi'
-  | 'bdo'
-  | 'blockquote'
-  | 'cite'
-  | 'data'
-  | 'dd'
-  | 'dfn'
-  | 'dt'
-  | 'em'
-  | 'figcaption'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'kbd'
-  | 'li'
-  | 'label'
-  | 'mark'
-  | 'p'
-  | 'pre'
-  | 'q'
-  | 'samp'
-  | 'small'
-  | 'span'
-  | 'strong'
-  | 'sub'
-  | 'sup'
-  | 'time'
-  | 'var';
-
 export interface TextProps extends ChakraTextProps {
-  /**
-   * Any valid HTML text tag
-   */
-  as?: TextTags;
   /**
    * Font weight
    */

package/src/index.ts

@@ -313,10 +313,10 @@ export { default as FileInput } from './Components/Form/FileInput/FileInput';
 export type { ToggletipProps as ToggleTooltipProps } from './Components/Toggletip/Toggletip';
 export { default as Toggletip } from './Components/Toggletip/Toggletip';
 
-export type { FilterSwitchProps } from './Components/Form/FilterSwitch/FilterSwitch';
-export { default as FilterSwitch } from './Components/Form/FilterSwitch/FilterSwitch';
+export type { FilterSwitchProps } from './Components/Filter/FilterSwitch/FilterSwitch';
+export { default as FilterSwitch } from './Components/Filter/FilterSwitch/FilterSwitch';
 
-export { default as FilterSwitchGroup } from './Components/Form/FilterSwitch/FilterSwitchGroup';
+export { default as FilterSwitchGroup } from './Components/Filter/FilterSwitch/FilterSwitchGroup';
 
 export type { TablePaginationProps } from './Components/Table/TablePagination';
 export { default as TablePagination } from './Components/Table/TablePagination';

package/src/theme.ts

@@ -43,6 +43,7 @@ import CodeSnippet from './Components/CodeSnippet/CodeSnippet.theme';
 import DefinitionTooltip from './Components/DefinitionTooltip/DefinitionTooltip.theme';
 import ExpandableCard from './Components/ExpandableCard/ExpandableCard.theme';
 import FileInput from './Components/Form/FileInput/FileInput.theme';
+import Filter from './Components/Filter/Filter.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -52,7 +53,7 @@ import sizes from './Foundations/Sizes/Sizes';
 import typography from './Foundations/Typography/Typography';
 import zIndices from './Foundations/Zindex/Zindex';
 import Toggletip from './Components/Toggletip/Toggletip.theme';
-import FilterSwitch from './Components/Form/FilterSwitch/FilterSwitch.theme';
+import FilterSwitch from './Components/Filter/FilterSwitch/FilterSwitch.theme';
 
 const theme = {
   config: {
@@ -137,6 +138,7 @@ const theme = {
     Toggletip,
     ExpandableCard,
     FileInput,
+    Filter,
   },
 };
 

package/src/utils/utils.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 
 export const rem = (input: number | string): number | string => {
   const value = typeof input === 'string' ? parseInt(input, 10) : input;
@@ -14,3 +14,25 @@ export function useObjectMemo<T extends object>(obj: T): T {
     return obj;
   }, Object.values(obj));
 }
+
+export function isEqual(a: number | string | number[] | string[], b: number | string | number[] | string[]) {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && [...a].every((val) => [...b].includes(val));
+  }
+  return a === b;
+}
+
+// https://usehooks-ts.com/react-hook/use-debounce
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}