@bitrise/bitkit 13.165.0 → 13.165.1-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.165.0",
+  "version": "13.165.1-alpha.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -27,22 +27,22 @@
     "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react": "^2.10.3",
     "@chakra-ui/react-utils": "^2.0.12",
-    "@chakra-ui/styled-system": "^2.9.2",
-    "@chakra-ui/theme": "^3.3.1",
-    "@chakra-ui/theme-tools": "^2.1.2",
-    "@chakra-ui/utils": "^2.0.15",
+    "@chakra-ui/styled-system": "^2.12.0",
+    "@chakra-ui/theme": "^3.4.6",
+    "@chakra-ui/theme-tools": "^2.2.6",
+    "@chakra-ui/utils": "^2.2.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
-    "@fontsource/figtree": "^5.0.21",
-    "@fontsource/source-code-pro": "^5.0.19",
-    "framer-motion": "^11.3.30",
+    "@fontsource/figtree": "^5.1.1",
+    "@fontsource/source-code-pro": "^5.1.0",
+    "framer-motion": "^11.11.9",
     "luxon": "^3.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-focus-lock": "2.13.1",
+    "react-focus-lock": "2.13.2",
     "react-imask": "^7.6.1",
     "react-markdown": "^9.0.1"
   },
@@ -51,45 +51,45 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/core": "^7.25.8",
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-typescript": "^7.25.7",
     "@bitrise/eslint-plugin": "^2.12.0",
-    "@chakra-ui/cli": "^2.4.1",
-    "@google-cloud/storage": "^7.12.1",
-    "@storybook/addon-actions": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
+    "@chakra-ui/cli": "^2.5.5",
+    "@google-cloud/storage": "^7.13.0",
+    "@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-webpack5": "^8.2.9",
-    "@storybook/theming": "^8.2.9",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-webpack5": "^8.3.6",
+    "@storybook/theming": "^8.3.6",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/luxon": "^3.4.2",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "axios": "^1.7.5",
+    "axios": "^1.7.7",
     "eslint": "^8.57.0",
     "glob": "^11.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jsdom": "^25.0.0",
+    "jsdom": "25.0.1",
     "lodash": "^4.17.21",
     "prettier": "^3.3.3",
-    "react-hook-form": "^7.53.0",
-    "release-it": "^17.6.0",
-    "storybook": "^8.2.9",
+    "react-hook-form": "^7.53.1",
+    "release-it": "^17.10.0",
+    "storybook": "^8.3.6",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.5.4"
+    "typescript": "^5.6.3"
   },
   "files": [
     "src",

package/src/Components/Filter/FilterSwitch/FilterSwitch.tsx

@@ -36,7 +36,7 @@ const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
 
   const { name } = group;
 
-  const { getCheckboxProps, getInputProps, getLabelProps } = useRadio({
+  const { getRadioProps, getInputProps, getLabelProps } = useRadio({
     ...rest,
     isChecked,
     isDisabled,
@@ -46,7 +46,7 @@ const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
   });
 
   return (
-    <chakra.label {...getLabelProps()} {...getCheckboxProps()} __css={styles.item}>
+    <chakra.label {...getLabelProps()} {...getRadioProps()} __css={styles.item}>
       <chakra.input {...getInputProps(htmlInputProps, ref)} />
       {children}
     </chakra.label>

package/src/Components/Form/FileInput/FileInput.tsx

@@ -1,11 +1,10 @@
-import { ChangeEvent, DragEvent, useRef, useState } from 'react';
+import { ChangeEvent, DragEvent, useId, useRef, useState } from 'react';
 import {
   FormControl,
   FormControlProps,
   FormErrorMessage,
   FormHelperText,
   forwardRef,
-  useId,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import Box from '../../Box/Box';

package/src/Components/Menu/MenuList.tsx

@@ -1,9 +1,45 @@
-import { forwardRef, MenuList as ChakraMenuList, MenuListProps as ChakraMenuListProps } from '@chakra-ui/react';
+import {
+  forwardRef,
+  MenuList as ChakraMenuList,
+  MenuListProps as ChakraMenuListProps,
+  usePrefersReducedMotion,
+} from '@chakra-ui/react';
 
 export type MenuListProps = ChakraMenuListProps;
 
 const MenuList = forwardRef<MenuListProps, 'div'>((props, ref) => {
-  return <ChakraMenuList {...props} ref={ref} />;
+  const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
+
+  return (
+    <ChakraMenuList
+      motionProps={
+        prefersReducedMotion
+          ? {
+              variants: {
+                enter: {
+                  visibility: 'visible',
+                  opacity: 1,
+                  transition: {
+                    duration: 0,
+                  },
+                },
+                exit: {
+                  transitionEnd: {
+                    visibility: 'hidden',
+                  },
+                  opacity: 0,
+                  transition: {
+                    duration: 0,
+                  },
+                },
+              },
+            }
+          : undefined
+      }
+      {...props}
+      ref={ref}
+    />
+  );
 });
 
 export default MenuList;

package/src/Components/Skeleton/Skeleton.theme.ts

@@ -1,5 +1,7 @@
-import { keyframes } from '@chakra-ui/react';
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+import { keyframes } from '@emotion/react';
+
+export { keyframes } from '@emotion/react';
 
 const animation = keyframes`
   from { transform: translate3d(-100%, 0, 0); }

package/src/Components/ValueDialog/ValueDialog.tsx

@@ -1,5 +1,5 @@
-import { ReactNode, useState } from 'react';
-import { As, MergeWithAs } from '@chakra-ui/react';
+import { ElementType, ReactNode, useState } from 'react';
+import { MergeWithAs } from '@chakra-ui/react';
 import Dialog, { DialogProps } from '../Dialog/Dialog';
 
 type ValueDialogProps<T> = { value?: T; children: (value: T) => ReactNode } & Omit<
@@ -7,8 +7,8 @@ type ValueDialogProps<T> = { value?: T; children: (value: T) => ReactNode } & Om
   'isOpen' | 'onCloseComplete' | 'children'
 >;
 
-type ComponentWithAs<Component extends As = 'section'> = {
-  <T, AsComponent extends As = Component>(
+type ComponentWithAs<Component extends ElementType = 'section'> = {
+  <T, AsComponent extends ElementType = Component>(
     props: MergeWithAs<
       React.ComponentProps<Component>,
       React.ComponentProps<AsComponent>,

package/src/utils/reexports.ts

@@ -1,3 +1,4 @@
-export { forwardRef, keyframes, Portal } from '@chakra-ui/react';
+export { keyframes } from '@emotion/react';
+export { forwardRef, Portal } from '@chakra-ui/react';
 export type { StyleProps } from '@chakra-ui/styled-system';
 export { IMask, useIMask } from 'react-imask';