@bitrise/bitkit 13.171.0 → 13.173.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.171.0",
+  "version": "13.173.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.1.1",
     "@fontsource/source-code-pro": "^5.1.0",
-    "framer-motion": "^11.11.9",
+    "framer-motion": "^11.11.10",
     "luxon": "^3.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -51,10 +51,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.8",
-    "@babel/preset-env": "^7.25.8",
-    "@babel/preset-react": "^7.25.7",
-    "@babel/preset-typescript": "^7.25.7",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
     "@bitrise/eslint-plugin": "^2.12.0",
     "@chakra-ui/cli": "^2.5.5",
     "@google-cloud/storage": "^7.13.0",
@@ -71,9 +71,9 @@
     "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.14",
     "@types/luxon": "^3.4.2",
-    "@types/react": "^18.3.11",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",

package/src/Components/Accordion/Accordion.theme.ts

@@ -9,6 +9,10 @@ const AccordionTheme: ComponentStyleConfig = {
       _active: {
         background: 'background/active',
       },
+      textStyle: 'body/lg/regular',
+      _expanded: {
+        textStyle: 'body/lg/semibold',
+      },
       alignItems: 'center',
       display: 'flex',
       justifyContent: 'space-between',
@@ -25,7 +29,9 @@ const AccordionTheme: ComponentStyleConfig = {
       borderTopColor: 'border/regular',
     },
     panel: {
-      padding: '16',
+      paddingInline: '16',
+      paddingTop: '8',
+      paddingBottom: '24',
     },
     root: {
       borderBottom: '1px solid',

package/src/Components/EmptyState/EmptyState.theme.ts

@@ -21,7 +21,7 @@ const EmptyStateTheme: ComponentStyleConfig = {
       '+ *': {
         marginTop: '16',
       },
-      marginTop: '8',
+      marginTop: '4',
       maxWidth: maxContentWidth || '35rem',
     },
     title: {

package/src/Components/EmptyState/EmptyState.tsx

@@ -17,11 +17,11 @@ const EmptyState = ({ children, description, iconName, maxContentWidth, title, .
   return (
     <Box __css={css.box} {...rest}>
       {iconName && <Icon aria-label={title} name={iconName} size="32" />}
-      <Text as="h5" sx={css.title}>
+      <Text as="h4" textStyle="heading/h4" sx={css.title}>
         {title}
       </Text>
       {description && (
-        <Text size="2" sx={css.description}>
+        <Text textStyle="body/md/regular" sx={css.description}>
           {description}
         </Text>
       )}

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -1,5 +1,6 @@
 import { FormEvent, useEffect, useMemo, useState } from 'react';
-import { FocusLock, useMultiStyleConfig } from '@chakra-ui/react';
+import { useMultiStyleConfig } from '@chakra-ui/react';
+import FocusLock from 'react-focus-lock';
 import Badge from '../../Badge/Badge';
 import Box from '../../Box/Box';
 import Button from '../../Button/Button';

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

@@ -4,7 +4,7 @@ const FormTheme = {
   Form: {
     baseStyle: {
       helperText: {
-        color: 'neutral.50',
+        color: 'input/text/helper',
         _disabled: {
           color: 'text/disabled',
         },

package/src/Components/Link/Link.tsx

@@ -4,6 +4,7 @@ import { TextSizes } from '../../types/bitkit';
 export interface LinkProps extends ChakraLinkProps {
   as?: 'a' | 'button';
   colorScheme?: 'purple' | 'white' | 'gray';
+  isExternal?: boolean;
   isUnderlined?: boolean;
   size?: TextSizes;
 }
@@ -12,15 +13,19 @@ export interface LinkProps extends ChakraLinkProps {
  * Links are accessible elements used primarily for navigation.
  */
 const Link = forwardRef<LinkProps, 'a'>((props, ref) => {
-  const { as = 'a', isUnderlined, ...rest } = props;
-  const properties: ChakraLinkProps = { as, ...rest };
+  const { as = 'a', isExternal, isUnderlined, ...rest } = props;
+  const properties: ChakraLinkProps = { as };
+  if (isExternal) {
+    properties.rel = 'noreferrer noopener';
+    properties.target = '_blank';
+  }
   if (isUnderlined) {
     properties.textDecoration = 'underline';
   }
   if (as === 'button') {
     properties.type = 'button';
   }
-  return <ChakraLink as={as} {...properties} ref={ref} />;
+  return <ChakraLink as={as} {...properties} {...rest} ref={ref} />;
 });
 
 export default Link;

package/src/Components/Table/Table.theme.ts

@@ -81,6 +81,7 @@ const Tabletheme = {
         paddingX: '16',
         paddingY: '12',
         textAlign: 'left',
+        textStyle: 'heading/h5',
         whiteSpace: 'nowrap',
       },
       thead: {

package/src/Patterns/NotificationCard/NotificationCard.tsx

@@ -85,11 +85,11 @@ const NotificationCard = ({
         padding="12"
         paddingInlineEnd="16"
         display="flex"
-        gap="12"
+        gap="24"
         justifyContent="space-between"
         alignItems="stretch"
       >
-        <Box display="flex" flexDir="column" justifyContent="space-around">
+        <Box display="flex" flexDir="column" gap="4" justifyContent="space-around">
           {title && (
             <Text color={color as TextProps['color']} textStyle="body/lg/semibold">
               {title}

package/src/hooks/index.ts

@@ -1,3 +1,2 @@
-export { default as useHistory } from './useHistory';
 export { default as useResponsive } from './useResponsive';
-export { useDisclosure, useOutsideClick, useToken } from '@chakra-ui/react';
+export { useDisclosure, useToken } from '@chakra-ui/react';

package/src/hooks/useHistory.ts

@@ -1,67 +0,0 @@
-import { useEffect, useState } from 'react';
-
-type UseLocation = {
-  pathname: string;
-  push: (url: string) => void;
-  replace: (url: string) => void;
-  search: string;
-  searchParams: URLSearchParams;
-};
-
-const getCurrentLocation = () => ({
-  pathname: window.location.pathname,
-  search: window.location.search,
-});
-
-const listeners: Array<() => void> = [];
-
-const notify = () => {
-  listeners.forEach((listener) => listener());
-};
-
-const getSearchParams = (search: string): URLSearchParams => {
-  const searchParams = new URLSearchParams(search);
-  return searchParams;
-};
-
-const useLocation = (): UseLocation => {
-  const [{ pathname, search }, setLocation] = useState(getCurrentLocation());
-
-  const handleChange = () => {
-    setLocation(getCurrentLocation());
-  };
-
-  const push = (url: string) => {
-    window.history.pushState(null, '', url);
-    notify();
-  };
-
-  const replace = (url: string) => {
-    window.history.replaceState(null, '', url);
-    notify();
-  };
-
-  useEffect(() => {
-    window.addEventListener('popstate', handleChange);
-    return () => {
-      window.removeEventListener('popstate', handleChange);
-    };
-  }, []);
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  useEffect(() => {
-    listeners.push(handleChange);
-    return () => listeners.splice(listeners.indexOf(handleChange), 1);
-  }, []);
-
-  return {
-    pathname,
-    push,
-    replace,
-    search,
-    searchParams: getSearchParams(search),
-  };
-};
-
-export default useLocation;