diff --git a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx index bc7dd6186..b426c9548 100644 --- a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx +++ b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx @@ -10,27 +10,29 @@ import { ViewPagerTabGroupItem } from './ViewPagerTabGroupItem'; import type { ViewPagerTabGroupProps } from './ViewPagerTabGroupProps'; import { withViewPagerTabGroupVariation } from './ViewPagerTabGroupProps'; -export const ViewPagerTabGroup = withViewPagerTabGroupVariation(({ children, testId, onTabChange, tabSpacing }) => ( - ( - - {props} - - )} - renderTobBarItem={({ isSelected, onClick, title, tabId }) => ( - - - {title} - - {isSelected && } - - )} - onTabChange={onTabChange} - > - {children} - -)) as ComponentWithRef & { +export const ViewPagerTabGroup = withViewPagerTabGroupVariation(({ children, testId, onTabChange, tabSpacing, initialIndex }) => ( + ( + + {props} + + )} + renderTobBarItem={({ isSelected, onClick, title, tabId }) => ( + + + {title} + + {isSelected && } + + )} + initialIndex={initialIndex} + onTabChange={onTabChange} + > + {children} + + ) +) as ComponentWithRef & { Item: ComponentWithRef; }; diff --git a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts index 060cddbe4..d523ecb52 100644 --- a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts +++ b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts @@ -7,6 +7,7 @@ export type ViewPagerTabGroupProps = { tabSpacing?: number; onTabChange?: () => void; testId?: string; + initialIndex?: number; }; export const withViewPagerTabGroupVariation = withVariation('ViewPagerTabGroup')(); diff --git a/packages/vibrant-core/src/lib/TabView/TabView.tsx b/packages/vibrant-core/src/lib/TabView/TabView.tsx index f33442680..c19e629fd 100644 --- a/packages/vibrant-core/src/lib/TabView/TabView.tsx +++ b/packages/vibrant-core/src/lib/TabView/TabView.tsx @@ -4,8 +4,8 @@ import type { TabViewItemProps } from '../TabViewItem'; import { withTabViewVariation } from './TabViewProps'; export const TabView = withTabViewVariation( - ({ children, testId = 'tab-view', onTabChange, renderTobBarItem, renderTobBarContainer }) => { - const [currentIndex, setCurrentIndex] = useState(0); + ({ children, testId = 'tab-view', onTabChange, renderTobBarItem, renderTobBarContainer, initialIndex = 0 }) => { + const [currentIndex, setCurrentIndex] = useState(initialIndex); const childrenElement = Children.toArray(children).filter(isValidElement); const selectedTab = childrenElement.find((_, index) => index === currentIndex); diff --git a/packages/vibrant-core/src/lib/TabView/TabViewProps.ts b/packages/vibrant-core/src/lib/TabView/TabViewProps.ts index 7e4c96ede..882ffa6d0 100644 --- a/packages/vibrant-core/src/lib/TabView/TabViewProps.ts +++ b/packages/vibrant-core/src/lib/TabView/TabViewProps.ts @@ -9,6 +9,7 @@ type TabViewProps = { renderTobBarContainer: (props: ReactElementChildren) => ReactElement; onTabChange?: () => void; testId?: string; + initialIndex?: number; }; export const withTabViewVariation = withVariation('TabView')();