@bitrise/bitkit 13.359.0 → 13.361.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.359.0",
+  "version": "13.361.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -38,7 +38,7 @@
     "chakra-ui-2--theme": "npm:@chakra-ui/theme@3.4.9",
     "chakra-ui-2--theme-tools": "npm:@chakra-ui/theme-tools@2.2.9",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.38.0",
+    "framer-motion": "^12.42.2",
     "luxon": "^3.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -51,12 +51,12 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.5",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-react": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
     "@bitrise/eslint-plugin": "^4.1.0",
-    "@google-cloud/storage": "^7.19.0",
+    "@google-cloud/storage": "^7.21.0",
     "@storybook/addon-docs": "^9.1.20",
     "@storybook/addon-links": "^9.1.20",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
@@ -66,10 +66,10 @@
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/luxon": "^3.7.1",
-    "@types/react": "^18.3.28",
+    "@types/luxon": "^3.7.2",
+    "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
-    "axios": "^1.16.1",
+    "axios": "^1.18.1",
     "chakra-ui-2--cli": "npm:@chakra-ui/cli@2.5.8",
     "eslint": "^9.39.4",
     "glob": "^11.1.0",
@@ -77,11 +77,11 @@
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "26.1.0",
     "lodash": "^4.18.1",
-    "prettier": "^3.8.3",
-    "react-hook-form": "^7.76.0",
+    "prettier": "^3.9.4",
+    "react-hook-form": "^7.81.0",
     "release-it": "^19.2.4",
     "storybook": "^9.1.20",
-    "ts-jest": "^29.4.9",
+    "ts-jest": "^29.4.11",
     "typescript": "^5.9.3"
   },
   "files": [

package/src/Components/Badge/Badge.tsx

@@ -4,14 +4,7 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 import Text from '../Text/Text';
 
 export type BadgeColorScheme =
-  | 'neutral'
-  | 'info'
-  | 'positive'
-  | 'negative'
-  | 'warning'
-  | 'progress'
-  | 'orange'
-  | 'turquoise';
+  'neutral' | 'info' | 'positive' | 'negative' | 'warning' | 'progress' | 'orange' | 'turquoise';
 
 export interface BadgeProps extends ChakraBadgeProps {
   children?: string | number;

package/src/Components/List/List.tsx

@@ -1,14 +1,7 @@
 import { forwardRef, List as ChakraList, ListProps as ChakraListProps } from 'chakra-ui-2--react';
 
 export type ListColorsType =
-  | 'neutral'
-  | 'info'
-  | 'positive'
-  | 'negative'
-  | 'warning'
-  | 'progress'
-  | 'orange'
-  | 'turquoise';
+  'neutral' | 'info' | 'positive' | 'negative' | 'warning' | 'progress' | 'orange' | 'turquoise';
 
 export type ListProps = (
   | {

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -8,6 +8,7 @@ import Link from '../Link/Link';
 import List from '../List/List';
 import ListItem from '../List/ListItem';
 import Text from '../Text/Text';
+import codeBlockText from './codeBlockText';
 
 type GapType = Exclude<BoxProps['gap'], undefined>;
 
@@ -44,9 +45,10 @@ const defaultComponents = (size: 'sm' | 'md' | 'lg', gap: GapType = '16'): Compo
     li: ({ node: _, ...props }) => <ListItem {...props} />,
     ol: ({ node: _, ...props }) => <List variant="simple-ordered" {...props} />,
     p: ({ node: _, ...props }) => <Text {...props} />,
-    pre: ({ node: _, ...props }) => (
+    // The parser closes a code block with a newline, which would render as an empty last line.
+    pre: ({ node: _, children }) => (
       <CodeSnippet variant="multi" size={codeSize}>
-        {props.children as string}
+        {codeBlockText(children).replace(/\n$/, '')}
       </CodeSnippet>
     ),
     ul: ({ node: _, ...props }) => <List {...props} />,

package/src/Components/Note/codeBlockText.ts

@@ -0,0 +1,22 @@
+import { Children, isValidElement, ReactNode } from 'react';
+
+/**
+ * Collects the text of a markdown code block.
+ *
+ * A fenced code block arrives as `<pre><code>…</code></pre>`, so the nested `<code>` would also go
+ * through the `code` component of MarkdownContent and wrap the block in an inline CodeSnippet.
+ * Passing the text instead keeps the block a single element, and it is what CodeSnippet's copy
+ * button puts on the clipboard.
+ *
+ * Note that this flattens any markup inside the block, so a rehype plugin that decorates code
+ * (syntax highlighting, for instance) contributes its text but not its elements.
+ */
+export const codeBlockText = (children: ReactNode): string =>
+  // Children.toArray already drops null, undefined and booleans.
+  Children.toArray(children)
+    .map((child) =>
+      isValidElement<{ children?: ReactNode }>(child) ? codeBlockText(child.props.children) : String(child),
+    )
+    .join('');
+
+export default codeBlockText;

package/src/Components/Tabs/Tabs.theme.ts

@@ -23,115 +23,113 @@ const getGradient = (position: 'left' | 'right', variant: 'contained' | 'line')
   return style;
 };
 
-const baseStyle = defineStyle(
-  ({ variant }): SystemStyleObject => ({
-    containedTab: {
-      _first: {
-        _focusVisible: {
-          boxShadow: 'inset 0 2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
-        },
-        boxShadow: 'none',
-      },
+const baseStyle = defineStyle(({ variant }): SystemStyleObject => ({
+  containedTab: {
+    _first: {
       _focusVisible: {
         boxShadow: 'inset 0 2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
       },
-      _hover: {
-        backgroundColor: 'background/active',
-      },
-      _disabled: {
-        backgroundColor: 'neutral.90',
-        color: 'neutral.70',
-        cursor: 'not-allowed',
+      boxShadow: 'none',
+    },
+    _focusVisible: {
+      boxShadow: 'inset 0 2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
+    },
+    _hover: {
+      backgroundColor: 'background/active',
+    },
+    _disabled: {
+      backgroundColor: 'neutral.90',
+      color: 'neutral.70',
+      cursor: 'not-allowed',
+    },
+    _selected: {
+      '+ [role="tab"]': {
+        boxShadow: 'none',
       },
-      _selected: {
-        '+ [role="tab"]': {
-          boxShadow: 'none',
-        },
-        _first: {
-          boxShadow: 'inset 0 2px var(--colors-purple-50)',
-        },
-        _hover: {
-          backgroundColor: 'neutral.100',
-        },
-        backgroundColor: 'neutral.100',
-        borderRight: 0,
+      _first: {
         boxShadow: 'inset 0 2px var(--colors-purple-50)',
-        div: {
-          color: 'purple.50',
-        },
       },
-      backgroundColor: 'neutral.93',
-      boxShadow: 'inset 1px 0 0 var(--colors-neutral-80)',
-      color: 'neutral.40',
-      alignContent: 'center',
-      paddingX: '16',
-      paddingY: '12',
-      textAlign: 'left',
-      whiteSpace: 'nowrap',
-    },
-    lineTab: {
       _hover: {
-        backgroundColor: 'background/secondary',
-      },
-      _active: {
-        backgroundColor: 'neutral.93',
-      },
-      _disabled: {
-        background: 'transparent',
-        color: 'neutral.70',
-        cursor: 'not-allowed',
-      },
-      _focusVisible: {
-        boxShadow: 'inset 0 -2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
+        backgroundColor: 'neutral.100',
       },
-      _selected: {
-        _hover: {
-          backgroundColor: 'transparent',
-        },
-        boxShadow: 'inset 0 -2px var(--colors-purple-50)',
+      backgroundColor: 'neutral.100',
+      borderRight: 0,
+      boxShadow: 'inset 0 2px var(--colors-purple-50)',
+      div: {
         color: 'purple.50',
       },
-      alignItems: 'center',
-      color: 'neutral.50',
-      display: 'flex',
-      gap: '8',
-      justifyContent: 'flex-start',
-      paddingX: '16',
-      paddingY: '12',
-      textStyle: 'comp/tabs/line',
-      whiteSpace: 'nowrap',
     },
-    tablist: {
-      borderBottom: variant === 'line' ? '1px solid' : undefined,
-      borderBottomColor: variant === 'line' ? 'separator.primary' : undefined,
-      maxWidth: '100%',
-      overflowY: 'hidden',
-      overflowX: 'scroll',
-      scrollbarWidth: 'none',
-      '::-webkit-scrollbar': {
-        width: 0,
-      },
+    backgroundColor: 'neutral.93',
+    boxShadow: 'inset 1px 0 0 var(--colors-neutral-80)',
+    color: 'neutral.40',
+    alignContent: 'center',
+    paddingX: '16',
+    paddingY: '12',
+    textAlign: 'left',
+    whiteSpace: 'nowrap',
+  },
+  lineTab: {
+    _hover: {
+      backgroundColor: 'background/secondary',
     },
-    tabpanel: {
-      _focusVisible: {
-        boxShadow: 'none',
+    _active: {
+      backgroundColor: 'neutral.93',
+    },
+    _disabled: {
+      background: 'transparent',
+      color: 'neutral.70',
+      cursor: 'not-allowed',
+    },
+    _focusVisible: {
+      boxShadow: 'inset 0 -2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
+    },
+    _selected: {
+      _hover: {
+        backgroundColor: 'transparent',
       },
+      boxShadow: 'inset 0 -2px var(--colors-purple-50)',
+      color: 'purple.50',
     },
-    arrowButton: {
-      width: variant === 'line' ? '48' : rem(68),
-      height: variant === 'line' ? '48' : rem(68),
-      borderRadius: 0,
-      backgroundColor: variant === 'line' ? 'background/primary' : 'background/tertiary',
-      flexShrink: 0,
-      color: 'icon/primary',
-      paddingY: '12',
-      paddingX: '16',
-      position: 'absolute',
-      top: '0',
+    alignItems: 'center',
+    color: 'neutral.50',
+    display: 'flex',
+    gap: '8',
+    justifyContent: 'flex-start',
+    paddingX: '16',
+    paddingY: '12',
+    textStyle: 'comp/tabs/line',
+    whiteSpace: 'nowrap',
+  },
+  tablist: {
+    borderBottom: variant === 'line' ? '1px solid' : undefined,
+    borderBottomColor: variant === 'line' ? 'separator.primary' : undefined,
+    maxWidth: '100%',
+    overflowY: 'hidden',
+    overflowX: 'scroll',
+    scrollbarWidth: 'none',
+    '::-webkit-scrollbar': {
+      width: 0,
     },
-    arrowButtonGradient: ((position: 'left' | 'right') => getGradient(position, variant)) as any,
-  }),
-);
+  },
+  tabpanel: {
+    _focusVisible: {
+      boxShadow: 'none',
+    },
+  },
+  arrowButton: {
+    width: variant === 'line' ? '48' : rem(68),
+    height: variant === 'line' ? '48' : rem(68),
+    borderRadius: 0,
+    backgroundColor: variant === 'line' ? 'background/primary' : 'background/tertiary',
+    flexShrink: 0,
+    color: 'icon/primary',
+    paddingY: '12',
+    paddingX: '16',
+    position: 'absolute',
+    top: '0',
+  },
+  arrowButtonGradient: ((position: 'left' | 'right') => getGradient(position, variant)) as any,
+}));
 
 const TabsTheme = defineStyleConfig({
   baseStyle,