@bitrise/bitkit 10.17.0 → 10.17.1

package/package.json

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

package/src/Components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement, ReactElement, useEffect, useState } from 'react';
+import React, { isValidElement, ReactElement, useState } from 'react';
 import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@chakra-ui/react';
 import { useHistory } from '../../hooks';
 
@@ -15,6 +15,25 @@ const getTabIds = (props: TabsProps): string[] => {
   return tabs.filter((item) => isValidElement(item)).map((item) => item.props.id);
 };
 
+const getTabIndexFromSearchParams = (tabIds: string[], defaultIndex?: 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 defaultIndex;
+  }
+
+  return index;
+};
+
 /**
  * An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern.
  */
@@ -23,21 +42,16 @@ const Tabs = forwardRef<TabsProps, 'div'>((props, ref) => {
   const tabIds = getTabIds(props);
   const defaultIndex = tabIds.indexOf(defaultTab) > -1 ? tabIds.indexOf(defaultTab) : 0;
 
-  const { searchParams, replace } = useHistory();
-  const [actualIndex, setActualIndex] = useState(defaultIndex);
-
-  useEffect(() => {
-    if (withHistory && searchParams.get('tab')) {
-      const tabName = searchParams.get('tab') || '';
-      const index = tabIds.indexOf(tabName) > -1 ? tabIds.indexOf(tabName) : defaultIndex;
-      setActualIndex(index);
-    }
-  }, []);
+  const { replace } = useHistory();
+  const [actualIndex, setActualIndex] = useState(
+    withHistory ? getTabIndexFromSearchParams(tabIds, defaultIndex) : defaultIndex,
+  );
 
   const onTabChange = (index: number) => {
     const tabId = tabIds[index];
     setActualIndex(index);
     if (withHistory) {
+      const searchParams = new URLSearchParams(window.location.search);
       if (tabId) {
         searchParams.set('tab', tabId);
       } else {