@bitrise/bitkit 9.17.0-alpha-chakra.3 → 9.17.0-alpha-chakra.4

package/package.json

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

package/src/Components/Tabs/Tabs.stories.tsx

@@ -9,6 +9,11 @@ export default {
   title: 'Components/Tabs',
   component: Tabs,
   subcomponents: { Tab },
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+  },
 } as ComponentMeta<typeof Tabs>;
 
 const badge = {
@@ -17,11 +22,11 @@ const badge = {
   color: 'neutral.10',
 };
 
-export const WithDefaults: ComponentStory<typeof Tabs> = () => {
+export const WithDefaults: ComponentStory<typeof Tabs> = (props) => {
   return (
-    <Tabs defaultIndex={1} variant="unstyled" withHistory>
+    <Tabs defaultIndex={1} variant="unstyled" {...props}>
       <TabList>
-        <Tab id="default">Default</Tab>
+        <Tab id="basic">Basic</Tab>
         <Tab id="selected-as-default">Selected as default</Tab>
         <Tab leftIconName="Bell">With left icon</Tab>
         <Tab id="with-badge" badge={badge}>
@@ -50,3 +55,7 @@ export const WithDefaults: ComponentStory<typeof Tabs> = () => {
     </Tabs>
   );
 };
+
+WithDefaults.args = {
+  withHistory: true,
+};

package/src/Components/Tabs/Tabs.tsx

@@ -3,6 +3,7 @@ import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@c
 import { useHistory } from '../../hooks';
 
 export interface TabsProps extends ChakraTabsProps {
+  onChange?: (index: number, tabId?: string) => void;
   withHistory?: boolean;
 }
 
@@ -34,17 +35,18 @@ const Tabs = forwardRef<TabsProps, 'div'>((props, ref) => {
   }, []);
 
   const onTabChange = (index: number) => {
+    const tabId = tabIds[index];
     setActualIndex(index);
     if (withHistory) {
-      if (tabIds[index]) {
-        searchParams.set('tab', tabIds[index]);
+      if (tabId) {
+        searchParams.set('tab', tabId);
       } else {
         searchParams.delete('tab');
       }
       replace(`?${searchParams.toString()}`);
     }
     if (onChange) {
-      onChange(index);
+      onChange(index, tabId);
     }
   };
   return <ChakraTabs {...rest} ref={ref} onChange={onTabChange} index={actualIndex} />;