@bitrise/bitkit 13.170.0 → 13.171.0

package/package.json

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

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/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';