@bitrise/bitkit 13.160.1-alpha.2 → 13.161.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.160.1-alpha.2",
+  "version": "13.161.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/CodeSnippet/CodeSnippet.theme.ts

@@ -64,7 +64,7 @@ const baseStyle = defineStyle(({ variant, size, isExpanded }): SystemStyleObject
       borderBottomRightRadius: variant === 'single' ? '0' : '2',
       cursor: 'pointer',
       div: {
-        overflow: 'auto !important',
+        overflow: variant !== 'multi-breakwords' && 'auto !important',
       },
       minHeight: variant === 'inline' ? '24' : '40',
       overflow: 'auto',

package/src/Components/Tabs/ContainedTab.tsx

@@ -7,6 +7,7 @@ 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,6 +6,7 @@ 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,18 +1,92 @@
+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;
   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 { variant = 'line', ...rest } = props;
-  return <ChakraTabs {...rest} ref={ref} variant={variant} />;
+  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} />;
 });
 
 export default Tabs;

package/src/index.ts

@@ -58,8 +58,6 @@ 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/Components/Tabs/useTabs.ts

@@ -1,40 +0,0 @@
-import { 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);
-
-  useEffect(() => {
-    if (withHistory) {
-      searchParams.set(queryKey, tabIds[tabIndex]);
-      window.parent.history.replaceState(null, '', `?${decodeURIComponent(searchParams.toString())}`);
-    }
-  }, [tabIndex]);
-
-  return {
-    setTabIndex,
-    tabIndex,
-  };
-};
-
-export default useTabs;