@bitrise/bitkit 13.317.0 → 13.319.0

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/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/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';
 

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

@@ -1,111 +0,0 @@
-import { useState } from 'react';
-import { Menu, MenuButton, MenuList, Portal, useDisclosure } 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/FilterForm';
-import { FilterValue } from '../Filter.types';
-import { getMissingDependencies, 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 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}>
-      <MenuButton
-        as={Button}
-        isDisabled={isDisabled}
-        isLoading={isLoading}
-        leftIconName="Plus"
-        position={isOpen ? 'relative' : undefined}
-        size="sm"
-        variant="tertiary"
-        zIndex={isOpen ? 'dialog' : undefined}
-      >
-        Add filter {isOpen}
-      </MenuButton>
-      <Portal>
-        <MenuList
-          paddingY={selectedCategory ? 0 : '12'}
-          position={isOpen ? 'relative' : undefined}
-          zIndex={isOpen ? 'dialog' : undefined}
-        >
-          {selectedCategory ? (
-            <FilterForm
-              category={selectedCategory}
-              categoryName={data[selectedCategory].categoryName}
-              categoryNamePlural={data[selectedCategory].categoryNamePlural}
-              loadingText={data[selectedCategory].loadingText}
-              onCancel={onClose}
-              onChange={onFilterChange}
-            />
-          ) : (
-            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;