@bitrise/bitkit 13.93.0 → 13.95.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.93.0",
+  "version": "13.95.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -38,7 +38,7 @@
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@fontsource/figtree": "^5.0.20",
     "@fontsource/source-code-pro": "^5.0.18",
-    "framer-motion": "^11.2.10",
+    "framer-motion": "^11.2.11",
     "luxon": "^3.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -57,38 +57,38 @@
     "@babel/preset-typescript": "^7.24.7",
     "@bitrise/eslint-plugin": "^2.12.0",
     "@chakra-ui/cli": "^2.4.1",
-    "@google-cloud/storage": "^7.11.1",
-    "@storybook/addon-actions": "^8.1.5",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
-    "@storybook/blocks": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-webpack5": "^8.1.5",
-    "@storybook/theming": "^8.1.5",
+    "@google-cloud/storage": "^7.11.2",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@storybook/theming": "^8.1.10",
     "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
     "axios": "^1.7.2",
     "eslint": "^8.57.0",
-    "glob": "^10.4.1",
+    "glob": "^10.4.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.1.0",
-    "prettier": "^3.3.1",
-    "react-hook-form": "^7.51.5",
+    "prettier": "^3.3.2",
+    "react-hook-form": "^7.52.0",
     "release-it": "^17.3.0",
-    "storybook": "^8.1.5",
-    "ts-jest": "^29.1.4",
-    "typescript": "^5.4.5"
+    "storybook": "^8.1.10",
+    "ts-jest": "^29.1.5",
+    "typescript": "^5.5.2"
   },
   "files": [
     "src",

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" />

package/src/Components/SelectableTag/SelectableTag.theme.ts

@@ -0,0 +1,35 @@
+import { defineStyleConfig } from '@chakra-ui/styled-system';
+import tokensToTheme from '../../tokens/tokensToTheme.json';
+
+const SelectableTagTheme = defineStyleConfig({
+  baseStyle: {
+    px: '8',
+    py: '4',
+    cursor: 'pointer',
+    display: 'inline',
+    border: '1px solid',
+    whiteSpace: 'nowrap',
+    borderColor: 'border.strong',
+    borderRadius: '4',
+    backgroundColor: 'background.primary',
+    _hover: {
+      backgroundColor: 'background.hover',
+      _peerChecked: {
+        backgroundColor: 'background.selected-hover',
+      },
+    },
+    _peerChecked: {
+      borderColor: 'border.selected',
+      backgroundColor: 'background.selected',
+    },
+    _peerFocusVisible: {
+      backgroundColor: 'background.hover',
+      _checked: {
+        backgroundColor: 'background.selected-hover',
+      },
+    },
+    ...tokensToTheme.textStyles['comp/tag/sm'],
+  },
+});
+
+export default SelectableTagTheme;

package/src/Components/SelectableTag/SelectableTag.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { UseCheckboxProps, chakra, forwardRef, useCheckbox, useStyleConfig } from '@chakra-ui/react';
+import Text from '../Text/Text';
+
+export interface SelectableTagProps extends PropsWithChildren<UseCheckboxProps> {}
+
+const SelectableTag = forwardRef(({ children, ...props }: SelectableTagProps, ref) => {
+  const theme = useStyleConfig('SelectableTag');
+  const { htmlProps, getInputProps, getLabelProps } = useCheckbox(props);
+
+  return (
+    <chakra.label {...htmlProps}>
+      <input className="peer" {...getInputProps({}, ref)} />
+      <Text as="span" {...getLabelProps()} sx={theme}>
+        {children}
+      </Text>
+    </chakra.label>
+  );
+});
+
+export default SelectableTag;

package/src/Components/SelectableTag/SelectableTagGroup.tsx

@@ -0,0 +1,27 @@
+import { ReactElement, Children, cloneElement, isValidElement } from 'react';
+import { useCheckboxGroup } from '@chakra-ui/react';
+import CheckboxGroup, { CheckboxGroupProps } from '../Form/Checkbox/CheckboxGroup';
+import { SelectableTagProps } from './SelectableTag';
+
+export interface SelectableTagGroupProps extends CheckboxGroupProps {
+  children: ReactElement<SelectableTagProps> | ReactElement<SelectableTagProps>[];
+}
+
+const SelectableTagGroup = ({ children, ...props }: SelectableTagGroupProps) => {
+  const { getCheckboxProps } = useCheckboxGroup(props);
+
+  const clonedChildren = Children.map(children, (child: ReactElement<SelectableTagProps>) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, {
+        ...child.props,
+        ...getCheckboxProps({ value: child.props.value }),
+      });
+    }
+
+    return child;
+  });
+
+  return <CheckboxGroup {...props}>{clonedChildren}</CheckboxGroup>;
+};
+
+export default SelectableTagGroup;

package/src/Components/Tabs/Tabs.tsx

@@ -1,6 +1,7 @@
 import React, { isValidElement, ReactElement, useEffect, useState } from 'react';
 import { forwardRef, Tabs as ChakraTabs, TabsProps as ChakraTabsProps } from '@chakra-ui/react';
 import { useHistory } from '../../hooks';
+import { TabProps } from './Tab';
 
 export interface TabsProps extends ChakraTabsProps {
   defaultTab?: string;
@@ -14,7 +15,7 @@ const getTabIds = (props: TabsProps): string[] => {
   const tabList = React.Children.toArray(props.children)[0] as ReactElement;
   const tabs = React.Children.toArray(tabList.props.children) as ReactElement[];
 
-  return tabs.filter((item) => isValidElement(item)).map((item) => item.props.id);
+  return tabs.filter((item) => isValidElement(item)).map((item) => (item.props as TabProps).id || '');
 };
 
 const getTabIndexFromSearchParams = (tabIds: string[], tabIndex?: number) => {

package/src/Components/components.theme.ts

@@ -47,6 +47,7 @@ import Toggletip from './Toggletip/Toggletip.theme';
 import FilterSwitch from './Filter/FilterSwitch/FilterSwitch.theme';
 import TagsInput from './Form/TagsInput/TagsInput.theme';
 import DraggableCard from './DraggableCard/DraggableCard.theme';
+import SelectableTag from './SelectableTag/SelectableTag.theme';
 
 const components = {
   Accordion,
@@ -85,6 +86,7 @@ const components = {
   Radio,
   SegmentedControl,
   Select,
+  SelectableTag,
   Sidebar,
   SidebarItem,
   Skeleton,

package/src/index.ts

@@ -329,3 +329,9 @@ export { default as DraggableCard } from './Components/DraggableCard/DraggableCa
 
 export type { ControlButtonProps } from './Components/ControlButton/ControlButton';
 export { default as ControlButton } from './Components/ControlButton/ControlButton';
+
+export type { SelectableTagProps } from './Components/SelectableTag/SelectableTag';
+export { default as SelectableTag } from './Components/SelectableTag/SelectableTag';
+
+export type { SelectableTagGroupProps } from './Components/SelectableTag/SelectableTagGroup';
+export { default as SelectableTagGroup } from './Components/SelectableTag/SelectableTagGroup';