@bitrise/bitkit 13.93.0 → 13.94.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.93.0",
+  "version": "13.94.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/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';