@bitrise/bitkit 12.1.1 → 12.2.0-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.1.1",
+  "version": "12.2.0-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Tabs/ContainedTab.tsx

@@ -1,5 +1,5 @@
 import { Button, TabProps as ChakraTabProps, forwardRef, useTab, useTabsStyles } from '@chakra-ui/react';
-import { TypeColors } from 'src/Foundations/Colors/Colors';
+import { TypeColors } from '../../Foundations/Colors/Colors';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import Text from '../Text/Text';

package/src/Components/Tabs/Tabs.tsx

@@ -1,10 +1,11 @@
-import React, { isValidElement, ReactElement, useState } from 'react';
+import React, { isValidElement, ReactElement, useEffect, useState } from 'react';
 import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@chakra-ui/react';
 import { useHistory } from '../../hooks';
 
 export interface TabsProps extends ChakraTabsProps {
   defaultTab?: string;
   onChange?: (index: number, tabId?: string) => void;
+  tabId?: string;
   variant?: 'contained' | 'line';
   withHistory?: boolean;
 }
@@ -16,7 +17,7 @@ const getTabIds = (props: TabsProps): string[] => {
   return tabs.filter((item) => isValidElement(item)).map((item) => item.props.id);
 };
 
-const getTabIndexFromSearchParams = (tabIds: string[], defaultIndex?: number) => {
+const getTabIndexFromSearchParams = (tabIds: string[], tabIndex?: number) => {
   if (typeof window === 'undefined') {
     return undefined;
   }
@@ -29,7 +30,7 @@ const getTabIndexFromSearchParams = (tabIds: string[], defaultIndex?: number) =>
 
   const index = tabIds.indexOf(tabName);
   if (index === -1) {
-    return defaultIndex;
+    return tabIndex;
   }
 
   return index;
@@ -39,31 +40,51 @@ const getTabIndexFromSearchParams = (tabIds: string[], defaultIndex?: number) =>
  * 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, withHistory, ...rest } = props;
+  const { defaultTab = '', onChange, tabId, withHistory, ...rest } = props;
+  const { replace } = useHistory();
+
   const tabIds = getTabIds(props);
-  const defaultIndex = tabIds.indexOf(defaultTab) > -1 ? tabIds.indexOf(defaultTab) : 0;
 
-  const { replace } = useHistory();
+  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, defaultIndex) : defaultIndex,
+    withHistory ? getTabIndexFromSearchParams(tabIds, tabIndex) : tabIndex,
   );
 
   const onTabChange = (index: number) => {
-    const tabId = tabIds[index];
-    setActualIndex(index);
+    const newTabId = tabIds[index];
+
     if (withHistory) {
       const searchParams = new URLSearchParams(window.location.search);
-      if (tabId) {
-        searchParams.set('tab', tabId);
+      if (newTabId) {
+        searchParams.set('tab', newTabId);
       } else {
         searchParams.delete('tab');
       }
       replace(`?${searchParams.toString()}`);
     }
+
     if (onChange) {
-      onChange(index, tabId);
+      onChange(index, newTabId);
     }
+
+    setActualIndex(index);
   };
+
+  useEffect(() => {
+    if (tabId) {
+      setActualIndex(tabIds.includes(tabId) ? tabIds.indexOf(tabId) : 0);
+    }
+  }, [tabId]);
+
   return <ChakraTabs {...rest} ref={ref} onChange={onTabChange} index={actualIndex} />;
 });