(null);
- const { onNavigationClick, hash } = React.useContext(NavigationStatusContext);
- const [initialized, setInitialized] = useState(false);
- const [tabsState, setTabsState] = useTabsState();
- const activeState = useMemo(() => {
- const input = { id, tabs };
- return (
- getTabBySelection(input, tabsState) ?? getTabByTitle(input, tabsState) ?? input.tabs[0]
- );
- }, [id, tabs, tabsState]);
+ const candidateSlugs = useMemo(() => tabs.map((tab) => tab.slug), [tabs]);
+ const activeSlug = useResolvedSlug(candidateSlugs, tabs[0]?.slug ?? null);
- // Track if the tab has been touched by the user.
- const touchedRef = useRef(false);
+ // Resolve which tab is shown. Default: the first tab of the active slug — matching the CSS
+ // first-match. A manual click pins a specific tab, but only while its slug is the active one; if
+ // the active slug is a duplicate and the pinned tab isn't the first of it, `override` carries the
+ // pin so the panes below can steer CSS past first-match.
+ const { activeTabId, override } = useMemo(() => {
+ const firstMatch = tabs.find((tab) => tab.slug === activeSlug) ?? tabs[0];
+ const manual = manualId ? tabs.find((tab) => tab.id === manualId) : undefined;
+ const pinned =
+ manual && manual.slug === activeSlug && manual.id !== firstMatch?.id ? manual : null;
+ return { activeTabId: pinned?.id ?? firstMatch?.id ?? null, override: pinned };
+ }, [tabs, activeSlug, manualId]);
- // To avoid issue with hydration, we only use the state from localStorage
- // once the component has been initialized (=mounted).
- // Otherwise because of the streaming/suspense approach, tabs can be first-rendered at different time
- // and get stuck into an inconsistent state.
- const active = initialized ? activeState : tabs[0];
-
- // When clicking to select a tab, we:
- // - update the URL hash
- // - mark this specific ID as selected
- // - store the ID to auto-select other tabs with the same title
const selectTab = useCallback(
- (tabId: string, manual = true) => {
- const tab = tabs.find((tab) => tab.id === tabId);
-
- if (!tab) {
- return;
+ (tabId: string) => {
+ const tab = tabs.find((item) => item.id === tabId);
+ if (tab?.slug) {
+ activate(tab.slug);
+ setManualId(tabId);
}
-
- if (manual) {
- touchedRef.current = true;
- const href = `#${tab.id}`;
- if (window.location.hash !== href) {
- onNavigationClick(href);
- router.replace(href, { scroll: false });
- }
- }
-
- setTabsState((prev) => {
- if (prev.activeIds[id] === tab.id) {
- return prev;
- }
- return {
- activeIds: {
- ...prev.activeIds,
- [id]: tab.id,
- },
- activeTitles: tab.title
- ? prev.activeTitles
- .filter((t) => t !== tab.title)
- .concat([tab.title])
- .slice(-TITLES_MAX)
- : prev.activeTitles,
- };
- });
},
- [router, setTabsState, tabs, id]
+ [tabs, activate]
);
- // When the hash changes, we try to select the tab containing the targetted element.
- React.useLayoutEffect(() => {
- setInitialized(true);
-
- if (hash) {
- // First check if the hash matches a tab ID.
- const hashIsTab = tabs.some((tab) => tab.id === hash);
- if (hashIsTab) {
- selectTab(hash, false);
- return;
- }
-
- // Then check if the hash matches an element inside a tab.
- const activeElement = document.getElementById(hash);
- if (!activeElement) {
- return;
- }
-
- const tabPanel = activeElement.closest('[role="tabpanel"]');
- if (!tabPanel) {
- return;
- }
-
- selectTab(tabPanel.id, false);
- }
- }, [selectTab, tabs, hash]);
-
- // Scroll to active element in the tab.
- React.useLayoutEffect(() => {
- // If there is no hash or active tab, nothing to scroll.
- if (!hash || hash !== '' || !active) {
- return;
- }
-
- // If the tab is touched, we don't want to scroll.
- if (touchedRef.current) {
- return;
- }
-
- // If the hash matches a tab, then the scroll is already done.
- const hashIsTab = tabs.some((tab) => tab.id === hash);
- if (hashIsTab) {
- return;
- }
-
- const activeElement = document.getElementById(hash);
- if (!activeElement) {
- return;
- }
-
- activeElement.scrollIntoView({
- block: 'start',
- behavior: 'instant',
- });
- }, [active, tabs, hash]);
-
return (
-
- {tabs.map((tab) => (
-
+
+ {tabs.map((tab, index) => (
+
))}
);
@@ -215,19 +109,24 @@ export function DynamicTabs(props: {
const TabPanel = memo(function TabPanel(props: {
tab: TabsItem;
- isActive: boolean;
+ isDefault: boolean;
+ pin?: 'pinned' | 'unpinned';
}) {
- const { tab, isActive } = props;
+ const { tab, isDefault, pin } = props;
return (
-
- {tab.body}
-
+
{tab.body}