@bitrise/bitkit 13.317.0 → 13.319.0

package/package.json

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

package/src/Components/DatePicker/DatePicker.tsx

@@ -19,13 +19,13 @@ import { DatePickerDayViewProps } from './DatePickerDay';
 export { useDateRange, DateRange };
 
 export type DatePickerProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  onClose?: () => void;
   dayTooltip?: DatePickerDayViewProps['tooltip'];
   selectable?: DateRange;
-  onClose: () => void;
   onClear?: () => void;
   visible: boolean;
-  variant?: 'default' | 'filter';
+  variant?: 'default' | 'filter' | 'inline';
 } & (
   | {
       selected?: DateRange;
@@ -88,7 +88,7 @@ const DatePicker = (props: DatePickerProps) => {
   }, [initialRange]);
 
   const handleClose = () => {
-    onClose();
+    onClose?.();
     setDateTo(undefined);
     setDateFrom(undefined);
   };
@@ -158,7 +158,7 @@ const DatePicker = (props: DatePickerProps) => {
       setDateFrom(dateFromNew);
       setDateTo(dateToNew);
 
-      if (variant === 'default') {
+      if (variant === 'default' || variant === 'inline') {
         if (!dateFromNew || previewNew) {
           return;
         }
@@ -200,58 +200,63 @@ const DatePicker = (props: DatePickerProps) => {
     [isMonthSelector],
   );
 
-  return (
-    <Popover isLazy isOpen={visible} lazyBehavior="unmount" modifiers={[]} onClose={onClose}>
-      <PopoverAnchor>{children}</PopoverAnchor>
-      <PopoverContent aria-label="select date range">
-        <FocusLock returnFocus>
-          <DatePickerContext value={ctx}>
-            <Box padding="24">
-              {isMonthSelector ? (
-                <DatePickerMonthSelector
-                  onMonthSelected={onMonthSelected}
-                  viewDate={isMonthSelector === 'left' ? leftViewDate : rightViewDate}
-                />
-              ) : (
-                <>
-                  <Box display="flex" gap="32" marginBottom="24">
-                    <DatePickerMonth
-                      controls={isSingleMonthView ? 'both' : 'left'}
-                      onMonthClick={onMonthClickLeft}
-                      onViewDateChange={updateLeftViewDate}
-                      viewDate={leftViewDate}
-                    />
+  const datePicker = (
+    <DatePickerContext value={ctx}>
+      <Box padding={variant === 'inline' ? '0' : '24'}>
+        {isMonthSelector ? (
+          <DatePickerMonthSelector
+            onMonthSelected={onMonthSelected}
+            viewDate={isMonthSelector === 'left' ? leftViewDate : rightViewDate}
+          />
+        ) : (
+          <>
+            <Box display="flex" gap="32" marginBottom="24">
+              <DatePickerMonth
+                controls={isSingleMonthView ? 'both' : 'left'}
+                onMonthClick={onMonthClickLeft}
+                onViewDateChange={updateLeftViewDate}
+                viewDate={leftViewDate}
+              />
 
-                    {!isSingleMonthView && (
-                      <DatePickerMonth
-                        controls="right"
-                        onMonthClick={onMonthClickRight}
-                        onViewDateChange={updateRightViewDate}
-                        viewDate={rightViewDate}
-                      />
-                    )}
-                  </Box>
-                  {variant === 'filter' && (
-                    <DatePickerFooter
-                      mode={mode || 'range'}
-                      onApply={() => handleApply(dateFrom, dateTo)}
-                      onClear={onClear}
-                      onClose={handleClose}
-                      selected={currentSelected}
-                    />
-                  )}
-                  {variant === 'default' && mode === 'day' && (
-                    <Box display="flex" justifyContent="space-around">
-                      <Button onClick={() => handleSelect(DateTime.now())} variant="tertiary">
-                        Today
-                      </Button>
-                    </Box>
-                  )}
-                </>
+              {!isSingleMonthView && (
+                <DatePickerMonth
+                  controls="right"
+                  onMonthClick={onMonthClickRight}
+                  onViewDateChange={updateRightViewDate}
+                  viewDate={rightViewDate}
+                />
               )}
             </Box>
-          </DatePickerContext>
-        </FocusLock>
+            {variant === 'filter' && (
+              <DatePickerFooter
+                mode={mode || 'range'}
+                onApply={() => handleApply(dateFrom, dateTo)}
+                onClear={onClear}
+                onClose={handleClose}
+                selected={currentSelected}
+              />
+            )}
+            {variant === 'default' && mode === 'day' && (
+              <Box display="flex" justifyContent="space-around">
+                <Button onClick={() => handleSelect(DateTime.now())} variant="tertiary">
+                  Today
+                </Button>
+              </Box>
+            )}
+          </>
+        )}
+      </Box>
+    </DatePickerContext>
+  );
+
+  return variant === 'inline' ? (
+    datePicker
+  ) : (
+    <Popover isLazy isOpen={visible} lazyBehavior="unmount" modifiers={[]} onClose={onClose}>
+      <PopoverAnchor>{children}</PopoverAnchor>
+      <PopoverContent aria-label="select date range">
+        <FocusLock returnFocus />
+        {datePicker}
       </PopoverContent>
     </Popover>
   );

package/src/Components/Drawer/Drawer.tsx

@@ -19,6 +19,8 @@ import Icon from '../Icon/Icon';
 
 export interface DrawerProps
   extends Pick<ChakraDrawerProps, 'finalFocusRef' | 'initialFocusRef' | 'isOpen' | 'onClose' | 'onCloseComplete'> {
+  blockScrollOnMount?: boolean;
+  bodyRef?: React.RefObject<HTMLDivElement>;
   children: DrawerContentProps['children'];
   footer?: ReactNode;
   maxWidth?: BoxProps['maxWidth'];
@@ -26,6 +28,7 @@ export interface DrawerProps
   padding?: BoxProps['padding'];
   margin?: BoxProps['margin'];
   headerPadding?: BoxProps['padding'];
+  hideCloseButton?: boolean;
   bodyPadding?: BoxProps['padding'];
   overlayProps?: ModalOverlayProps;
   contentProps?: DrawerContentProps;
@@ -34,12 +37,21 @@ export interface DrawerProps
   footerProps?: ModalFooterProps;
 }
 
-const Drawer = ({ overlayProps, contentProps, headerProps, bodyProps, footerProps, ...props }: DrawerProps) => {
+const Drawer = ({
+  bodyRef,
+  overlayProps,
+  contentProps,
+  headerProps,
+  bodyProps,
+  footerProps,
+  ...props
+}: DrawerProps) => {
   const {
     bodyPadding,
     children,
     footer,
     headerPadding,
+    hideCloseButton,
     maxWidth = '20rem',
     padding,
     margin,
@@ -51,13 +63,15 @@ const Drawer = ({ overlayProps, contentProps, headerProps, bodyProps, footerProp
     <ChakraDrawer {...drawerProps}>
       <DrawerOverlay {...overlayProps} />
       <DrawerContent maxWidth={maxWidth} padding={padding} margin={margin} {...contentProps}>
-        <DrawerCloseButton size="md">
-          <Icon name="Cross" />
-        </DrawerCloseButton>
+        {!hideCloseButton && (
+          <DrawerCloseButton size="md">
+            <Icon name="Cross" />
+          </DrawerCloseButton>
+        )}
         <DrawerHeader as="h3" padding={headerPadding} {...headerProps}>
           {title}
         </DrawerHeader>
-        <DrawerBody padding={bodyPadding} {...bodyProps}>
+        <DrawerBody padding={bodyPadding} {...bodyProps} ref={bodyRef}>
           {children}
         </DrawerBody>
         {footer && <DrawerFooter {...footerProps}>{footer}</DrawerFooter>}

package/src/Components/Dropdown/DropdownOption.tsx

@@ -135,7 +135,7 @@ const DropdownDetailedOption = <T = string,>({
         <chakra.div opacity={isDisabled ? '0.5' : '1'}>{icon}</chakra.div>
         <chakra.div>
           {title}
-          <Text color={isDisabled ? 'text/disabled' : 'input/text/helper'} size="2">
+          <Text color={isDisabled ? 'text/disabled' : 'input/text/helper'} size="2" whiteSpace="pre-line">
             {subtitle}
           </Text>
         </chakra.div>

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

@@ -0,0 +1,92 @@
+import { Modal, ModalOverlay, useMultiStyleConfig } from 'chakra-ui-2--react';
+import Box from '../../Box/Box';
+import Icon from '../../Icon/Icon';
+import Button from '../../Button/Button';
+import Divider from '../../Divider/Divider';
+import { FilterProps } from '../Filter.types';
+import { useFilterContext } from '../Filter.context';
+import FilterAdd from './FilterAdd/FilterAdd';
+import FilterDate from './FilterDate/FilterDate';
+import FilterItem from './FilterItem';
+import FilterSearch from './FilterSearch';
+import FilterSwitchAdapter from './FilterSwitch/FilterSwitchAdapter';
+
+const Filter = (props: FilterProps) => {
+  const {
+    data,
+    defaultState,
+    filtersDependOn,
+    isLoading,
+    isMobile,
+    onChange,
+    searchTooltip,
+    showAdd = true,
+    showFilterIcon = true,
+    showClearFilters = true,
+    showSearch,
+    ...rest
+  } = props;
+
+  const filterStyle = useMultiStyleConfig('Filter');
+
+  const { filters, isPopoverOpen, onClearFilters, onFilterChange, showClearButton, state } = useFilterContext();
+
+  return (
+    <Box sx={filterStyle.container} {...rest}>
+      <Modal isOpen={isPopoverOpen} onClose={() => {}}>
+        {isPopoverOpen && <ModalOverlay />}
+      </Modal>
+      <Box sx={filterStyle.content}>
+        {showFilterIcon && <Icon name="Filter" sx={filterStyle.icon} />}
+
+        {Object.keys(filters.switch).map((category) => (
+          <FilterSwitchAdapter key={category} category={category} />
+        ))}
+
+        {Object.keys(filters.dateRange).map((category) => (
+          <FilterDate category={category} isMobile={Boolean(isMobile)} key={category} />
+        ))}
+
+        {Object.keys(filters.select).map((category) => (
+          <FilterItem key={category} category={category} />
+        ))}
+        {Object.keys(filters.tag).map((category) => {
+          if (!state[category]) {
+            return;
+          }
+          return <FilterItem key={category} category={category} />;
+        })}
+
+        {showAdd && <FilterAdd />}
+      </Box>
+      {(showClearButton || showSearch) && (
+        <Box sx={filterStyle.rightContent}>
+          {showClearButton && (
+            <Button
+              isDisabled={isLoading}
+              leftIconName="Cross"
+              minWidth="7.5rem"
+              onClick={onClearFilters}
+              size="sm"
+              variant="tertiary"
+            >
+              Clear filters
+            </Button>
+          )}
+          {showSearch && (
+            <>
+              <Divider flexShrink="0" orientation="vertical" size="1" variant="solid" />
+              <FilterSearch
+                onChange={onFilterChange}
+                value={state.search?.length ? state.search[0] : ''}
+                searchTooltip={searchTooltip}
+              />
+            </>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default Filter;

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

@@ -0,0 +1,89 @@
+import { Menu, MenuButton, MenuList, Portal } from 'chakra-ui-2--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';
+import { FilterValue } from '../../Filter.types';
+import { getMissingDependencies } from '../../Filter.utils';
+import useFilterAdd from '../../hooks/useFilterAdd';
+
+export interface FilterAddProps {
+  onChange: (category: string, selected: FilterValue) => void;
+}
+
+const FilterAdd = () => {
+  const { data, isLoading } = useFilterContext();
+
+  const {
+    categoryList,
+    isDisabled,
+    isMenuOpen,
+    onCategorySelect,
+    onChange,
+    onClose,
+    onOpen,
+    selectedCategory,
+    stateKeys,
+  } = useFilterAdd({ isMobile: false });
+
+  return (
+    <Menu closeOnSelect={false} isOpen={isMenuOpen} onClose={onClose} onOpen={onOpen}>
+      <MenuButton
+        as={Button}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        leftIconName="Plus"
+        position={isMenuOpen ? 'relative' : undefined}
+        size="sm"
+        variant="tertiary"
+        zIndex={isMenuOpen ? 'dialog' : undefined}
+      >
+        Add filter {isMenuOpen}
+      </MenuButton>
+      <Portal>
+        <MenuList
+          paddingY={selectedCategory ? 0 : '12'}
+          position={isMenuOpen ? 'relative' : undefined}
+          zIndex={isMenuOpen ? 'dialog' : undefined}
+        >
+          {selectedCategory ? (
+            <FilterForm
+              category={selectedCategory}
+              categoryName={data[selectedCategory].categoryName}
+              categoryNamePlural={data[selectedCategory].categoryNamePlural}
+              loadingText={data[selectedCategory].loadingText}
+              onCancel={onClose}
+              onChange={onChange}
+            />
+          ) : (
+            categoryList.map((category) => {
+              const { categoryName, dependsOn } = data[category];
+              const missingDependencies = getMissingDependencies(stateKeys, Object.keys(dependsOn || []));
+              const isCategoryDisabled = missingDependencies.length > 0 || !data[category]?.options?.length;
+              return (
+                <Tooltip
+                  key={category}
+                  isDisabled={!isCategoryDisabled}
+                  label={dependsOn?.[missingDependencies[0]] || 'There is no options for this category.'}
+                  placement="right"
+                >
+                  <MenuItem
+                    isDisabled={isCategoryDisabled}
+                    onClick={() => onCategorySelect(category)}
+                    pointerEvents="all"
+                    rightIconName="ChevronRight"
+                  >
+                    {categoryName || category}
+                  </MenuItem>
+                </Tooltip>
+              );
+            })
+          )}
+        </MenuList>
+      </Portal>
+    </Menu>
+  );
+};
+
+export default FilterAdd;

package/src/Components/Filter/{FilterDate → Desktop/FilterDate}/FilterDate.tsx

@@ -1,21 +1,21 @@
-// import { useEffect } from 'react';
 import { useEffect } from 'react';
 import { useDisclosure, useMultiStyleConfig } from 'chakra-ui-2--react';
 import { DateTime } from 'luxon';
-import Box from '../../Box/Box';
-import DatePicker, { DatePickerProps, DateRange, useDateRange } from '../../DatePicker/DatePicker';
-import Icon from '../../Icon/Icon';
-import Text from '../../Text/Text';
-import { useFilterContext } from '../Filter.context';
-import { FilterStyle } from '../Filter.theme';
-import { FilterCategoryProps } from '../Filter.types';
+import DatePicker, { DatePickerProps, DateRange, useDateRange } from '../../../DatePicker/DatePicker';
+import { useFilterContext } from '../../Filter.context';
+import { FilterStyle } from '../../Filter.theme';
+import { FilterCategoryProps } from '../../Filter.types';
+import Box from '../../../Box/Box';
+import Text from '../../../Text/Text';
+import Icon from '../../../Icon/Icon';
 
 export type FilterDateProps = {
   category: string;
+  isMobile: boolean;
 };
 
 const FilterDate = (props: FilterDateProps) => {
-  const { category } = props;
+  const { category, isMobile } = props;
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const { isLoading, onFilterChange, onFilterClear, setPopoverOpen, state, data } = useFilterContext();
@@ -58,7 +58,18 @@ const FilterDate = (props: FilterDateProps) => {
     ? `${selectedRange.from?.toFormat('LLL dd')} - ${selectedRange.to?.toFormat('LLL dd')}`
     : 'All dates';
 
-  return (
+  return isMobile ? (
+    <DatePicker
+      selectable={dateRangeData.selectable || selectable}
+      onApply={onDateRangeApply}
+      onClear={value?.length ? onClearClick : undefined}
+      dayTooltip={dateRangeData.dayTooltip}
+      selected={selectedRange}
+      visible={isOpen}
+      variant="inline"
+      mode="range"
+    />
+  ) : (
     <DatePicker
       selectable={dateRangeData.selectable || selectable}
       onApply={onDateRangeApply}

package/src/Components/Filter/{FilterForm → Desktop}/FilterForm.tsx

@@ -1,4 +1,3 @@
-import { FormEvent, useEffect, useMemo, useState } from 'react';
 import { useMultiStyleConfig } from 'chakra-ui-2--react';
 import FocusLock from 'react-focus-lock';
 import Tooltip from '../../Tooltip/Tooltip';
@@ -18,12 +17,10 @@ import RadioGroup from '../../Form/Radio/RadioGroup';
 import SearchInput from '../../SearchInput/SearchInput';
 import Text from '../../Text/Text';
 import { FilterStyle } from '../Filter.theme';
-import { FilterOptions, FilterOptionsMap, FilterValue } from '../Filter.types';
-import { isEqual, useDebounce } from '../../../utils/utils';
+import { FilterFormProps, FilterOptions, FilterValue } from '../Filter.types';
 import { getOptionLabel } from '../Filter.utils';
 import { useFilterContext } from '../Filter.context';
-
-const MAX_ITEMS = 100;
+import useFilterForm, { MAX_ITEMS } from '../hooks/useFilterForm';
 
 /**
  * https://gist.github.com/donmccurdy/6d073ce2c6f3951312dfa45da14a420f
@@ -88,128 +85,40 @@ const MatchingResults = (props: MatchingResultsProps) => {
   );
 };
 
-export type FilterFormProps = {
-  category: string;
-  categoryName?: string;
-  categoryNamePlural?: string;
-  loadingText?: string;
-  onChange: (category: string, selected: FilterValue, previousValue: FilterValue) => void;
-  onCancel: () => void;
-};
-
 const FilterForm = (props: FilterFormProps) => {
-  const { category, categoryName, categoryNamePlural, loadingText, onCancel, onChange } = props;
+  const { category, categoryName, categoryNamePlural, loadingText, onCancel } = props;
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
-  const { data, state } = useFilterContext();
-
-  const {
-    isPatternEnabled,
-    iconsMap,
-    hasNotFilteredOption = true,
-    preserveOptionOrder,
-    isInitialLoading,
-    isMultiple,
-    onAsyncSearch,
-    options,
-    optionsMap,
-  } = data[category];
-  const value = state[category] || [];
-
-  const [selected, setSelected] = useState<FilterValue>(value);
-
-  const [mode, setMode] = useState<'manually' | 'pattern'>(
-    isPatternEnabled && value?.length && value[0].includes('*') ? 'pattern' : 'manually',
-  );
-
-  const [searchValue, setSearchValue] = useState<string>('');
-  const debouncedSearchValue = useDebounce<string>(searchValue, 1000);
-
-  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;
-
-  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 optLabel.toLowerCase().includes(searchValue.toLowerCase());
-      });
-    }
-    return [];
-  }, [searchValue, options]);
-
-  const onSearchChange = (q: string) => {
-    setSearchValue(q);
-    if (isAsync) {
-      if (q.length > 0) {
-        setLoading(true);
-      } else {
-        setFoundOptions([]);
-      }
-    }
-  };
+  const { data } = useFilterContext();
 
-  const onSubmit = (e: FormEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    const newSelected = selected[0] === '' ? [] : selected;
-    onChange(category, newSelected, value);
-  };
+  const { isPatternEnabled, iconsMap, hasNotFilteredOption = true, isInitialLoading, isMultiple } = data[category];
 
-  const onClearClick = () => {
-    setSelected([]);
-    onChange(category, [], value);
-  };
+  const {
+    currentOptionMap,
+    getEmptyText,
+    isAsync,
+    isLoading,
+    isSubmitDisabled,
+    mode,
+    onClearClick,
+    onSearchChange,
+    onSubmit,
+    isEditMode,
+    items,
+    searchValue,
+    selected,
+    setMode,
+    setSelected,
+    value,
+    withSearch,
+  } = useFilterForm(props);
 
   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.options);
-      setFoundOptionsMap(response.optionsMap || optionsMap);
-    }
-  };
-
-  useEffect(() => {
-    setLoading(Boolean(isInitialLoading));
-  }, [isInitialLoading]);
-
-  useEffect(() => {
-    if (debouncedSearchValue.length > 0) {
-      getAsyncList();
-    } else {
-      setLoading(Boolean(isInitialLoading));
-    }
-  }, [debouncedSearchValue]);
-
-  const isEditMode = value.length !== 0;
-
-  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>
       <Box as="form" data-testid={`${category}-form`} onSubmit={onSubmit} sx={filterStyle.form}>

package/src/Components/Filter/{FilterItem → Desktop}/FilterItem.tsx

@@ -10,9 +10,9 @@ import Text from '../../Text/Text';
 import Tooltip from '../../Tooltip/Tooltip';
 import { FilterStyle } from '../Filter.theme';
 import { FilterValue } from '../Filter.types';
-import FilterForm from '../FilterForm/FilterForm';
 import { useFilterContext } from '../Filter.context';
 import { getOptionLabel } from '../Filter.utils';
+import FilterForm from './FilterForm';
 
 export type FilterItemProps = {
   category: string;

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

@@ -1,4 +1,4 @@
-import { rem } from '../../../utils/utils';
+import { rem } from '../../../../utils/utils';
 
 const FilterSwitch = {
   baseStyle: ({ isChecked, iconColor }: { isChecked: boolean; iconColor?: string }) => {

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

@@ -9,10 +9,10 @@ import {
 } from 'chakra-ui-2--react';
 import { omitThemingProps } from 'chakra-ui-2--styled-system';
 import { createContext } from 'chakra-ui-2--react-utils';
-import Divider from '../../Divider/Divider';
-import Text from '../../Text/Text';
-import Box from '../../Box/Box';
-import Icon, { TypeIconName } from '../../Icon/Icon';
+import Divider from '../../../Divider/Divider';
+import Text from '../../../Text/Text';
+import Box from '../../../Box/Box';
+import Icon, { TypeIconName } from '../../../Icon/Icon';
 
 type RadioInputProps = ChakraRadioProps['inputProps'] & {
   'data-testid'?: string;