@bitrise/bitkit 13.94.0 → 13.96.0

package/package.json

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

package/src/Components/Filter/Filter.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 import { Modal, ModalOverlay, useMultiStyleConfig } from '@chakra-ui/react';
 import { isEqual } from '../../utils/utils';
 import Box, { BoxProps } from '../Box/Box';
@@ -28,6 +28,7 @@ export interface FilterProps extends Omit<BoxProps, 'onChange'> {
   filtersDependOn?: string[];
   isLoading?: boolean;
   onChange: (state: FilterState) => void;
+  searchTooltip?: ReactNode;
   showAdd?: boolean;
   showFilterIcon?: boolean;
   showSearch?: boolean;
@@ -41,6 +42,7 @@ const Filter = (props: FilterProps) => {
     filtersDependOn,
     isLoading,
     onChange,
+    searchTooltip,
     showAdd = true,
     showFilterIcon = true,
     showSearch,
@@ -61,7 +63,7 @@ const Filter = (props: FilterProps) => {
     }
   });
 
-  const stateToRestore = useRef<FilterState>(defaultState || cleanState);
+  const stateToRestore = useMemo<FilterState>(() => defaultState || cleanState, [defaultState, cleanState]);
 
   const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false);
 
@@ -99,7 +101,7 @@ const Filter = (props: FilterProps) => {
   };
 
   const onClearFilters = () => {
-    onChange(stateToRestore.current || {});
+    onChange(stateToRestore || {});
   };
 
   const filters = {
@@ -114,7 +116,7 @@ const Filter = (props: FilterProps) => {
     filters[value.type || 'tag'][category] = value;
   });
 
-  const showClearFilters = !isEqual(stateToRestore.current, state);
+  const showClearFilters = !isEqual(stateToRestore, state);
 
   const contextValue: FilterContextType = useMemo(
     () => ({
@@ -175,7 +177,11 @@ const Filter = (props: FilterProps) => {
             {showSearch && (
               <>
                 <Divider flexShrink="0" orientation="vertical" size="1" variant="solid" />
-                <FilterSearch onChange={onFilterChange} value={cleanState.search?.length ? cleanState.search[0] : ''} />
+                <FilterSearch
+                  onChange={onFilterChange}
+                  value={cleanState.search?.length ? cleanState.search[0] : ''}
+                  searchTooltip={searchTooltip}
+                />
               </>
             )}
           </Box>

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

@@ -6,7 +6,6 @@ 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';
 
@@ -65,12 +64,10 @@ const FilterDate = (props: FilterDateProps) => {
       mode="range"
     >
       <Box position={isOpen ? 'relative' : undefined} sx={filterStyle.item} 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>
+        <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>
       </Box>
     </DatePicker>
   );

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

@@ -67,7 +67,7 @@ const FilterItem = (props: FilterItemProps) => {
     <Popover isLazy isOpen={isOpen} onClose={onClose}>
       <PopoverTrigger>
         <Box position={isOpen ? 'relative' : undefined} sx={filterStyle.item} zIndex={isOpen ? 'dialog' : undefined}>
-          <Tooltip isDisabled={isLoading} label="Edit">
+          <Tooltip isDisabled={isLoading || type !== 'tag'} label="Edit">
             <Text as="button" disabled={isLoading} onClick={onToggle} size="2" sx={filterStyle.tagEdit}>
               {getText()}
               {type === 'select' && <Icon name="ChevronDown" size="16" />}

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, ReactNode, useEffect, useState } from 'react';
 import {
   Input,
   InputGroup,
@@ -9,16 +9,18 @@ import {
 } from '@chakra-ui/react';
 import Icon from '../../Icon/Icon';
 import IconButton from '../../IconButton/IconButton';
+import Tooltip from '../../Tooltip/Tooltip';
 import { FilterStyle } from '../Filter.theme';
 import { FilterValue } from '../Filter.types';
 
 export interface FilterSearchProps extends Omit<InputProps, 'onChange' | 'value'> {
   onChange: (category: string, selected: FilterValue) => void;
+  searchTooltip?: ReactNode;
   value: string;
 }
 
 const FilterSearch = (props: FilterSearchProps) => {
-  const { onChange, value, ...rest } = props;
+  const { onChange, placeholder, searchTooltip, value, ...rest } = props;
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const [searchValue, setSearchValue] = useState(value);
@@ -44,7 +46,7 @@ const FilterSearch = (props: FilterSearchProps) => {
 
   const inputProps: InputProps = {
     onChange: onInputChange,
-    placeholder: 'Search...',
+    placeholder: placeholder || 'Search...',
     sx: filterStyle.searchInput,
     value: searchValue,
     ...rest,
@@ -54,7 +56,9 @@ const FilterSearch = (props: FilterSearchProps) => {
       <InputLeftElement margin="8">
         <Icon color="neutral.60" name="Magnifier" size="16" />
       </InputLeftElement>
-      <Input {...inputProps} />
+      <Tooltip isDisabled={!searchTooltip} label={searchTooltip}>
+        <Input {...inputProps} />
+      </Tooltip>
       {!!searchValue && (
         <InputRightElement>
           <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="sm" variant="tertiary" />