@bitrise/bitkit 12.80.0 → 12.82.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.80.0",
+  "version": "12.82.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -47,8 +47,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@bitrise/eslint-plugin": "^2.3.3",
@@ -64,7 +64,7 @@
     "@storybook/react-webpack5": "^7.6.10",
     "@storybook/theming": "^7.6.10",
     "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.2.1",
+    "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
@@ -73,7 +73,7 @@
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
-    "axios": "^1.6.5",
+    "axios": "^1.6.6",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.6.3",
@@ -89,7 +89,7 @@
     "jsdom": "^24.0.0",
     "prettier": "^3.2.4",
     "react-hook-form": "^7.49.3",
-    "release-it": "^17.0.1",
+    "release-it": "^17.0.3",
     "storybook": "^7.6.10",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"

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

@@ -29,15 +29,17 @@ const CheckboxTheme = {
           backgroundColor: 'neutral.80',
         },
       },
-      _disabled: {
-        backgroundColor: 'neutral.93',
-      },
       _hover: {
         borderColor: 'neutral.70',
       },
       _focusVisible: {
         boxShadow: 'formFocus',
       },
+      _disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: 'neutral.93',
+        borderColor: 'neutral.90',
+      },
     },
     label: {
       userSelect: 'none',

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

@@ -42,6 +42,11 @@ const RadioTheme = {
       _focusVisible: {
         boxShadow: 'formFocus',
       },
+      _disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: 'neutral.93',
+        borderColor: 'neutral.90',
+      },
     },
     label: {
       userSelect: 'none',

package/src/Components/Table/CheckableRow.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { LinkBox, LinkOverlay } from '@chakra-ui/react';
+import Checkbox from '../Form/Checkbox/Checkbox';
+import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
+import Td from './Td';
+import Tr, { RowProps } from './Tr';
+
+export interface CheckableRowProps extends RowProps {
+  id: string;
+  isDisabled?: boolean;
+  label: ReactNode;
+  name: string;
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+  value: string;
+}
+
+const CheckableRow = (props: CheckableRowProps) => {
+  const { children, id, isDisabled, label, name, tooltipProps, value, ...rest } = props;
+
+  return (
+    <LinkBox
+      as={Tr}
+      transform="scale(1)"
+      _hover={{
+        td: { background: 'neutral.95' },
+        ':has(input:checked)': {
+          td: { background: 'purple.93' },
+        },
+      }}
+      sx={{
+        ':has(input:checked)': {
+          td: { background: 'purple.95' },
+        },
+      }}
+      {...rest}
+    >
+      <Td>
+        <Tooltip isDisabled={!tooltipProps} placement="right" shouldWrapChildren {...tooltipProps}>
+          <Checkbox id={id} isDisabled={isDisabled} name={name} value={value} zIndex="1" />
+        </Tooltip>
+      </Td>
+      <Td>
+        <LinkOverlay as="label" cursor={isDisabled ? 'not-allowed' : 'pointer'} htmlFor={id}>
+          {label}
+        </LinkOverlay>
+      </Td>
+      {children}
+    </LinkBox>
+  );
+};
+
+export default CheckableRow;

package/src/Components/Table/SelectableRow.tsx

@@ -1,17 +1,20 @@
 import { ReactNode } from 'react';
 import { LinkBox, LinkOverlay } from '@chakra-ui/react';
 import Radio from '../Form/Radio/Radio';
+import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 import Td from './Td';
 import Tr, { RowProps } from './Tr';
 
 export interface SelectableRowProps extends RowProps {
   id: string;
+  isDisabled?: boolean;
   label: ReactNode;
+  tooltipProps?: Omit<TooltipProps, 'children'>;
   value: string;
 }
 
 const SelectableRow = (props: SelectableRowProps) => {
-  const { children, id, label, value, ...rest } = props;
+  const { children, id, isDisabled, label, tooltipProps, value, ...rest } = props;
 
   return (
     <LinkBox
@@ -31,10 +34,12 @@ const SelectableRow = (props: SelectableRowProps) => {
       {...rest}
     >
       <Td>
-        <Radio id={id} value={value} />
+        <Tooltip isDisabled={!tooltipProps} placement="right" shouldWrapChildren {...tooltipProps}>
+          <Radio id={id} isDisabled={isDisabled} value={value} zIndex="1" />
+        </Tooltip>
       </Td>
       <Td>
-        <LinkOverlay as="label" cursor="pointer" htmlFor={id}>
+        <LinkOverlay as="label" cursor={isDisabled ? 'not-allowed' : 'pointer'} htmlFor={id}>
           {label}
         </LinkOverlay>
       </Td>

package/src/index.ts

@@ -283,6 +283,9 @@ export { default as ClickableRow } from './Components/Table/ClickableRow';
 export type { SelectableRowProps } from './Components/Table/SelectableRow';
 export { default as SelectableRow } from './Components/Table/SelectableRow';
 
+export type { CheckableRowProps } from './Components/Table/CheckableRow';
+export { default as CheckableRow } from './Components/Table/CheckableRow';
+
 export type { TagProps } from './Components/Tag/Tag';
 export { default as Tag } from './Components/Tag/Tag';
 

package/src/tokens/tokens.ts

@@ -29,9 +29,9 @@ export const colors = {
 
 export const semanticTokens = {
   colors: {
-    ...looper(commonColors),
     ...legacyTokens,
     sys: looper(tokensJson.system.color.sys),
+    ...looper(commonColors),
   },
 };