@bitrise/bitkit 13.318.0 → 13.320.0

package/src/Components/Filter/Mobile/SingleSelectOptions.tsx

@@ -0,0 +1,136 @@
+import { ReactNode } from 'react';
+import Icon from '../../Icon/Icon';
+import Box from '../../Box/Box';
+import Text from '../../Text/Text';
+import { getOptionLabel } from '../Filter.utils';
+import { FilterOptionsMap } from '../Filter.types';
+import { MAX_ITEMS } from '../hooks/useFilterForm';
+import useListBox from '../hooks/useListBox';
+
+type SingleSelectOptionsProps = {
+  currentOptionMap?: FilterOptionsMap;
+  emptyText?: string;
+  hasNotFilteredOption: boolean;
+  isLoading: boolean;
+  items: string[];
+  onChange: (option: string) => void;
+  selectedItems: string[];
+};
+
+const Option = ({
+  onChange,
+  index,
+  isActive,
+  isSelected,
+  option,
+  children,
+}: Pick<SingleSelectOptionsProps, 'onChange'> & {
+  index: number;
+  isActive?: boolean;
+  isSelected: boolean;
+  option: string;
+  children: ReactNode;
+}) => {
+  const getBackgroundColor = () => {
+    if (isActive && isSelected) return 'background/selected-hover';
+    if (isSelected) return 'background/selected';
+    if (isActive) return 'background/hover';
+    return undefined;
+  };
+
+  const getHoverBackgroundColor = () => {
+    if (isSelected) return 'background/selected-hover';
+    return 'background/hover';
+  };
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      backgroundColor={getBackgroundColor()}
+      gap="16"
+      id={`option-${index}`}
+      onClick={(e) => {
+        e.stopPropagation();
+        onChange(option);
+      }}
+      paddingBlock="12"
+      paddingInlineStart={isSelected ? '16' : '56'}
+      paddingInlineEnd="24"
+      cursor="pointer"
+      role="option"
+      tabIndex={-1}
+      sx={{
+        backgroundColor: getBackgroundColor(),
+        '&:hover': {
+          backgroundColor: getHoverBackgroundColor(),
+        },
+        '&:active': {
+          backgroundColor: 'background/active',
+        },
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+const SingleSelectOptions = ({
+  currentOptionMap,
+  emptyText,
+  hasNotFilteredOption,
+  isLoading,
+  items,
+  onChange,
+  selectedItems,
+}: SingleSelectOptionsProps) => {
+  const { activeIndex, handleKeyDown, handleFocus, handleBlur, handleMouseDown, handleMouseMove } = useListBox({
+    items: hasNotFilteredOption ? [''].concat(items) : items,
+    hasNotFilteredOption,
+    onChange,
+  });
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <Box
+      aria-label="Filter options"
+      onKeyDown={handleKeyDown}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      outline="none"
+      role="listbox"
+      tabIndex={0}
+      _focusVisible={{
+        boxShadow: 'none',
+        outline: 'none',
+      }}
+    >
+      {items.length ? (
+        items?.slice(0, MAX_ITEMS).map((option, index) => {
+          const isSelected = selectedItems.includes(option);
+          return (
+            <Option
+              index={index}
+              isActive={activeIndex === index}
+              isSelected={isSelected}
+              onChange={onChange}
+              option={option}
+            >
+              {isSelected && <Icon name="Check" color="icon/interactive" />}
+              {getOptionLabel(option, currentOptionMap)}
+            </Option>
+          );
+        })
+      ) : (
+        <Text paddingInline={16}>{emptyText}</Text>
+      )}
+    </Box>
+  );
+};
+
+export default SingleSelectOptions;

package/src/Components/Filter/hooks/useFilterAdd.ts

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { useDisclosure } from 'chakra-ui-2--react';
+import { useFilterContext } from '../Filter.context';
+import { hasAllDependencies } from '../Filter.utils';
+import { FilterValue } from '../Filter.types';
+
+type UseFilterAddProps = {
+  isMobile?: boolean;
+};
+
+const useFilterAdd = ({ isMobile }: UseFilterAddProps) => {
+  const { isOpen: isMenuOpen, onClose: closeMenu, onOpen: openMenu } = useDisclosure();
+
+  const { data, filtersDependOn, onFilterChange, setPopoverOpen, state } = useFilterContext();
+
+  const [selectedCategory, setSelectedCategory] = useState<string | undefined>();
+
+  const onCategorySelect = (category: string) => {
+    setSelectedCategory(category);
+    if (isMobile) {
+      closeMenu();
+    }
+  };
+
+  const onOpen = () => {
+    openMenu();
+
+    if (!isMobile) {
+      setPopoverOpen(true);
+      setSelectedCategory(undefined);
+    }
+  };
+
+  const onClose = () => {
+    setPopoverOpen(false);
+    closeMenu();
+    setSelectedCategory(undefined);
+  };
+
+  const onChange = (category: string, value: FilterValue) => {
+    onClose();
+    onFilterChange(category, value);
+  };
+
+  const stateKeys = Object.keys(state);
+
+  const categoryList = Object.keys(data).filter((category) => {
+    return !stateKeys.includes(category) && data[category].type === 'tag';
+  });
+
+  const isDisabled = !hasAllDependencies(stateKeys, filtersDependOn) || categoryList.length === 0;
+
+  return {
+    categoryList,
+    closeMenu,
+    isDisabled,
+    isMenuOpen,
+    onCategorySelect,
+    onChange,
+    onClose,
+    onOpen,
+    selectedCategory,
+    setSelectedCategory,
+    stateKeys,
+  };
+};
+
+export default useFilterAdd;

package/src/Components/Filter/hooks/useFilterForm.ts

@@ -0,0 +1,131 @@
+import { FormEvent, useEffect, useMemo, useState } from 'react';
+import { isEqual, useDebounce } from '../../../utils/utils';
+import { useFilterContext } from '../Filter.context';
+import { FilterFormProps, FilterOptions, FilterOptionsMap, FilterValue } from '../Filter.types';
+
+export const MAX_ITEMS = 100;
+
+const useFilterForm = (props: Omit<FilterFormProps, 'onCancel'>) => {
+  const { category, onChange } = props;
+
+  const { data, state } = useFilterContext();
+
+  const categoryData = data[category] || {};
+  const { isPatternEnabled, preserveOptionOrder, isInitialLoading, onAsyncSearch, options, optionsMap } = categoryData;
+
+  const value = useMemo(() => state[category] || [], [category, state]);
+
+  const [selected, setSelected] = useState<FilterValue>(value);
+
+  useEffect(() => {
+    setSelected(value);
+  }, [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 onSubmit = (e?: FormEvent<HTMLDivElement>) => {
+    e?.preventDefault();
+    const newSelected = selected[0] === '' ? [] : selected;
+    onChange(category, newSelected, value);
+  };
+
+  const onClearClick = () => {
+    setSelected([]);
+    onChange(category, [], value);
+  };
+
+  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 {
+    currentOptionMap,
+    getEmptyText,
+    isAsync,
+    isLoading,
+    isSubmitDisabled,
+    mode,
+    onClearClick,
+    onSearchChange,
+    onSubmit,
+    isEditMode,
+    items,
+    selected,
+    searchValue,
+    setMode,
+    setSelected,
+    value,
+    withSearch,
+  };
+};
+
+export default useFilterForm;

package/src/Components/Filter/hooks/useIsScrollable.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+
+type UseIsScrollableProps = {
+  items: string[];
+  hasNotFilteredOption: boolean;
+  ref: React.RefObject<HTMLDivElement>;
+};
+
+const useIsScrollable = ({ items, hasNotFilteredOption, ref }: UseIsScrollableProps) => {
+  const [isScrollable, setIsScrollable] = useState(false);
+
+  useEffect(() => {
+    const checkScrollable = () => {
+      if (ref.current) {
+        const { scrollHeight, clientHeight } = ref.current;
+        setIsScrollable(scrollHeight > clientHeight);
+      }
+    };
+
+    checkScrollable();
+
+    const timer = setTimeout(checkScrollable, 100);
+
+    window.addEventListener('resize', checkScrollable);
+
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener('resize', checkScrollable);
+    };
+  }, [items, hasNotFilteredOption]);
+
+  return { isScrollable };
+};
+
+export default useIsScrollable;

package/src/Components/Filter/hooks/useListBox.ts

@@ -0,0 +1,66 @@
+import { useState, useRef } from 'react';
+import { MAX_ITEMS } from './useFilterForm';
+
+type UseListBoxProps = {
+  items: string[];
+  hasNotFilteredOption: boolean;
+  onChange: (option: string) => void;
+};
+
+const useListBox = ({ items, hasNotFilteredOption, onChange }: UseListBoxProps) => {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const allOptions = hasNotFilteredOption ? ['', ...items.slice(0, MAX_ITEMS)] : items.slice(0, MAX_ITEMS);
+  const mouseInteractionRef = useRef(false);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    mouseInteractionRef.current = false;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setActiveIndex((prev) => (prev < allOptions.length - 1 ? prev + 1 : 0));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setActiveIndex((prev) => (prev > 0 ? prev - 1 : allOptions.length - 1));
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (activeIndex >= 0) {
+          onChange(allOptions[activeIndex]);
+        }
+        break;
+    }
+  };
+
+  const handleFocus = () => {
+    if (activeIndex === -1 && !mouseInteractionRef.current) {
+      setActiveIndex(0);
+    }
+  };
+
+  const handleBlur = () => {
+    setActiveIndex(-1);
+  };
+
+  const handleMouseDown = () => {
+    mouseInteractionRef.current = true;
+  };
+
+  const handleMouseMove = () => {
+    if (activeIndex !== -1) {
+      setActiveIndex(-1);
+    }
+  };
+
+  return {
+    activeIndex,
+    handleKeyDown,
+    handleFocus,
+    handleBlur,
+    handleMouseDown,
+    handleMouseMove,
+  };
+};
+
+export default useListBox;

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

@@ -15,8 +15,10 @@ type CheckboxInputProps = ChakraCheckboxProps['inputProps'] & {
   'data-testid'?: string;
 };
 
-export interface CheckboxProps
-  extends Omit<FormControlProps, 'icon' | 'iconColor' | 'iconSize' | 'inputProps' | 'value' | 'onChange'> {
+export interface CheckboxProps extends Omit<
+  FormControlProps,
+  'icon' | 'iconColor' | 'iconSize' | 'inputProps' | 'value' | 'onChange'
+> {
   inputProps?: CheckboxInputProps;
   helperText?: ReactNode;
   errorText?: string;

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

@@ -14,12 +14,6 @@ const InputTheme = defineStyle({
         background: 'background.disabled',
         cursor: 'not-allowed',
       },
-      _focus: {
-        boxShadow: 'formFocus',
-      },
-      _focusVisible: {
-        boxShadow: 'formFocus',
-      },
       _hover: {
         borderColor: 'border.hover',
       },
@@ -41,12 +35,9 @@ const InputTheme = defineStyle({
       },
       appearance: 'none',
       background: 'background.primary',
-      border: '1px solid',
-      borderColor: 'border.regular',
+
       borderRadius: '4',
-      boxShadow: 'inner',
-      outline: 0,
-      transition: '200ms',
+
       width: '100%',
     },
     icon: {
@@ -75,6 +66,28 @@ const InputTheme = defineStyle({
       position: 'relative',
     },
   },
+  variants: {
+    desktop: {
+      field: {
+        border: '1px solid',
+        borderColor: 'border.regular',
+        boxShadow: 'inner',
+        outline: 0,
+        transition: '200ms',
+        _focus: {
+          boxShadow: 'formFocus',
+        },
+        _focusVisible: {
+          boxShadow: 'formFocus',
+        },
+      },
+    },
+    mobile: {
+      field: {
+        boxShadow: 'none',
+      },
+    },
+  },
   sizes: {
     lg: {
       field: {
@@ -89,6 +102,9 @@ const InputTheme = defineStyle({
       },
     },
   },
+  defaultProps: {
+    variant: 'desktop',
+  },
 });
 
 export default InputTheme;

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

@@ -64,6 +64,7 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   rightIconName?: TypeIconName;
   rightIconColor?: IconProps['color'];
   size?: 'lg' | 'md';
+  variant?: 'desktop' | 'mobile';
   warningText?: ReactNode;
 }
 
@@ -111,6 +112,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     step,
     type,
     value,
+    variant,
     warningText,
     ...rest
   } = props;
@@ -167,7 +169,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   };
 
   const iconSize = size === 'lg' ? '24' : '16';
-  const style = useMultiStyleConfig('Input');
+  const style = useMultiStyleConfig('Input', { variant });
 
   const [leftIconPos, setLeftIconPos] = useState(rem(12));
 
@@ -220,6 +222,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
           {...inputProps}
           {...dataAttributes}
           onChange={onInputChange}
+          variant={variant}
         />
         {rightAddon && (
           <RightContentWrapper ref={rightAddonRef} bottom="0">

package/src/Components/Form/Radio/Radio.tsx

@@ -13,8 +13,10 @@ type RadioInputProps = ChakraRadioProps['inputProps'] & {
   'data-testid'?: string;
 };
 
-export interface RadioProps
-  extends Omit<FormControlProps, 'icon' | 'iconColor' | 'iconSize' | 'inputProps' | 'value' | 'onChange'> {
+export interface RadioProps extends Omit<
+  FormControlProps,
+  'icon' | 'iconColor' | 'iconSize' | 'inputProps' | 'value' | 'onChange'
+> {
   inputProps?: RadioInputProps;
   helperText?: ReactNode;
   errorText?: string;

package/src/Components/SearchInput/SearchInput.tsx

@@ -7,7 +7,7 @@ export interface SearchInputProps extends Omit<InputProps, 'onChange'> {
 }
 
 const SearchInput = (props: SearchInputProps) => {
-  const { onChange, value, ...rest } = props;
+  const { onChange, value, variant, ...rest } = props;
 
   const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const q = event.target.value;
@@ -29,6 +29,7 @@ const SearchInput = (props: SearchInputProps) => {
     />
   );
   const inputProps: InputProps = {
+    boxShadow: variant === 'mobile' ? 'none' : undefined,
     leftIconColor: 'neutral.60',
     leftIconName: 'Magnifier',
     onChange: onInputChange,
@@ -38,7 +39,7 @@ const SearchInput = (props: SearchInputProps) => {
     value,
     ...rest,
   };
-  return <Input {...inputProps} />;
+  return <Input {...inputProps} variant={variant} />;
 };
 
 export default SearchInput;

package/src/Components/components.theme.ts

@@ -47,7 +47,7 @@ import ExpandableCard from './ExpandableCard/ExpandableCard.theme';
 import FileInput from './Form/FileInput/FileInput.theme';
 import Filter from './Filter/Filter.theme';
 import Toggletip from './Toggletip/Toggletip.theme';
-import FilterSwitch from './Filter/FilterSwitch/FilterSwitch.theme';
+import FilterSwitch from './Filter/Desktop/FilterSwitch/FilterSwitch.theme';
 import TagsInput from './Form/TagsInput/TagsInput.theme';
 import DraggableCard from './DraggableCard/DraggableCard.theme';
 import SelectableTag from './SelectableTag/SelectableTag.theme';

package/src/index.ts

@@ -323,10 +323,10 @@ export { default as FileInput } from './Components/Form/FileInput/FileInput';
 export type { ToggletipProps } from './Components/Toggletip/Toggletip';
 export { default as Toggletip } from './Components/Toggletip/Toggletip';
 
-export type { FilterSwitchProps } from './Components/Filter/FilterSwitch/FilterSwitch';
-export { default as FilterSwitch } from './Components/Filter/FilterSwitch/FilterSwitch';
+export type { FilterSwitchProps } from './Components/Filter/Desktop/FilterSwitch/FilterSwitch';
+export { default as FilterSwitch } from './Components/Filter/Desktop/FilterSwitch/FilterSwitch';
 
-export { default as FilterSwitchGroup } from './Components/Filter/FilterSwitch/FilterSwitchGroup';
+export { default as FilterSwitchGroup } from './Components/Filter/Desktop/FilterSwitch/FilterSwitchGroup';
 
 export type { TablePaginationProps } from './Components/Table/TablePagination';
 export { default as TablePagination } from './Components/Table/TablePagination';
@@ -337,7 +337,6 @@ export { default as Pagination } from './Components/Pagination/Pagination';
 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';