@bitrise/bitkit 13.170.0 → 13.172.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.170.0",
+  "version": "13.172.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/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/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/Tabs/ContainedTab.tsx

@@ -7,7 +7,6 @@ import Text from '../Text/Text';
 
 export interface ContainedTabProps extends ChakraTabProps {
   href?: string;
-  id: string;
   iconColor?: TypeColors | 'currentColor';
   iconName?: TypeIconName;
   isWarning?: boolean;

package/src/Components/Tabs/Tab.tsx

@@ -6,7 +6,6 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 export interface TabProps extends ChakraTabProps {
   badge?: BadgeProps;
   href?: string;
-  id: string;
   leftIconName?: TypeIconName;
   isDisabled?: boolean;
   rightIconName?: TypeIconName;

package/src/Components/Tabs/Tabs.tsx

@@ -1,92 +1,16 @@
-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;
-  onChange?: (index: number, tabId?: string) => void;
-  tabId?: string;
+  onChange?: (index: number) => void;
   variant?: 'contained' | 'line';
-  withHistory?: boolean;
 }
 
-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 as TabProps).id || '');
-};
-
-const getTabIndexFromSearchParams = (tabIds: string[], tabIndex?: number) => {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-
-  const searchParams = new URLSearchParams(window.location.search);
-  const tabName = searchParams.get('tab');
-  if (!tabName) {
-    return undefined;
-  }
-
-  const index = tabIds.indexOf(tabName);
-  if (index === -1) {
-    return tabIndex;
-  }
-
-  return index;
-};
-
 /**
  * An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern.
  */
 const Tabs = forwardRef<TabsProps, 'div'>((props, ref) => {
-  const { defaultTab = '', onChange, tabId, variant = 'line', withHistory, ...rest } = props;
-  const { replace } = useHistory();
-
-  const tabIds = getTabIds(props);
-
-  let tabIndex = 0;
-
-  if (defaultTab) {
-    tabIndex = tabIds.includes(defaultTab) ? tabIds.indexOf(defaultTab) : 0;
-  }
-
-  if (tabId) {
-    tabIndex = tabIds.includes(tabId) ? tabIds.indexOf(tabId) : 0;
-  }
-
-  const [actualIndex, setActualIndex] = useState(
-    withHistory ? getTabIndexFromSearchParams(tabIds, tabIndex) : tabIndex,
-  );
-
-  const onTabChange = (index: number) => {
-    const newTabId = tabIds[index];
-
-    if (withHistory) {
-      const searchParams = new URLSearchParams(window.location.search);
-      if (newTabId) {
-        searchParams.set('tab', newTabId);
-      } else {
-        searchParams.delete('tab');
-      }
-      replace(`?${searchParams.toString()}`);
-    }
-
-    if (onChange) {
-      onChange(index, newTabId);
-    }
-
-    setActualIndex(index);
-  };
-
-  useEffect(() => {
-    if (tabId) {
-      setActualIndex(tabIds.includes(tabId) ? tabIds.indexOf(tabId) : 0);
-    }
-  }, [tabId]);
-
-  return <ChakraTabs {...rest} ref={ref} index={actualIndex} onChange={onTabChange} variant={variant} />;
+  const { variant = 'line', ...rest } = props;
+  return <ChakraTabs {...rest} ref={ref} variant={variant} />;
 });
 
 export default Tabs;

package/src/Components/Tabs/useTabs.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+type UseTabsProps<T> = {
+  defaultId?: T;
+  queryKey?: string;
+  tabIds: T[];
+  withHistory?: boolean;
+};
+
+const useTabs = <T extends string>(props: UseTabsProps<T>) => {
+  const { defaultId, queryKey = 'tab', tabIds, withHistory } = props;
+
+  const searchParams = new URLSearchParams(window.location.search);
+
+  const defaultIndex = useMemo(() => {
+    if (withHistory && searchParams.get(queryKey)) {
+      return tabIds.indexOf(searchParams.get(queryKey) as T);
+    }
+    if (defaultId) {
+      return tabIds.indexOf(defaultId);
+    }
+    return 0;
+  }, []);
+
+  const [tabIndex, setTabIndex] = useState(defaultIndex);
+
+  const setTabId = useCallback((id: T) => {
+    setTabIndex(tabIds.indexOf(id));
+  }, []);
+
+  useEffect(() => {
+    if (withHistory) {
+      searchParams.set(queryKey, tabIds[tabIndex]);
+      window.parent.history.replaceState(null, '', `?${decodeURIComponent(searchParams.toString())}`);
+    }
+  }, [tabIndex]);
+
+  return {
+    setTabId,
+    setTabIndex,
+    tabId: tabIds[tabIndex],
+    tabIndex,
+  };
+};
+
+export default useTabs;

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/index.ts

@@ -58,6 +58,8 @@ export { default as TabPanels } from './Components/Tabs/TabPanels';
 export type { TabPanelProps } from './Components/Tabs/TabPanel';
 export { default as TabPanel } from './Components/Tabs/TabPanel';
 
+export { default as useTabs } from './Components/Tabs/useTabs';
+
 export type { BadgeProps } from './Components/Badge/Badge';
 export { default as Badge } from './Components/Badge/Badge';
 

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;