Automatically select another tab when one is disabled

packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationMenuCompact.tsx

@@ -1,5 +1,5 @@
-import React, { PropsWithChildren } from 'react'
-import styled, { css } from 'styled-components'
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'
+import styled from 'styled-components'
 import { COLORS, THEME_KEYS } from 'consts/themes'
 import { SPACINGS } from 'consts/spacings'
 import { MEDIA } from 'consts/breakpoints'
@@ -11,9 +11,10 @@ import { TableOfContents } from 'components/TableOfContents/TableOfContents'
 import { Links } from 'components/Footer/Links'
 import { TabItem } from 'components/Tabs/TabItem'
 import { Tab, TabList, TabPanel, Tabs } from 'components/Tabs/Tabs'
-import { hiddenAtBreakpointStyles } from 'utils/hiddenAtBreakpointStyles'
 import { useKeyNavigating } from 'hooks/useKeyNavigating'
 import { useTheme } from 'hooks/useTheme'
+import { useNavigation } from 'hooks/useNavigation'
+import { useTableOfContents } from 'hooks/useTableOfContents'
 import {
   ThemeToggle,
   LightThemeSvg,
@@ -112,10 +113,6 @@ const ScrollArea = styled.ul`
   margin-right: auto;
 `
 
-const ThemeToggleWrapper = styled.li`
-  ${hiddenAtBreakpointStyles};
-`
-
 const ThemeToggleButton = styled(ThemeToggle)`
   background-color: ${COLORS.BACKGROUND_CODE};
   width: 100%;
@@ -150,23 +147,35 @@ export const SiteNavigationMenuCompact = (props: PropType) => {
   const { children } = props
   const { theme } = useTheme()
   const { isKeyNavigating } = useKeyNavigating()
+  const { isOpen } = useNavigation()
+  const isOpenRef = useRef(isOpen)
+  const tableOfContents = useTableOfContents()
+  const [showTableOfContents, setShowTableOfContents] = useState(true)
   const isLightTheme = theme === THEME_KEYS.LIGHT
   const oppositeTheme = isLightTheme ? THEME_KEYS.DARK : THEME_KEYS.LIGHT
 
+  useEffect(() => {
+    if (isOpen !== isOpenRef.current) {
+      const show = isOpen && !!tableOfContents.items?.length
+      setShowTableOfContents(show)
+      isOpenRef.current = isOpen
+    }
+  }, [isOpen, tableOfContents])
+
   return (
     <SiteNavigationMenuCompactWrapper>
       <MenuTabs $isKeyNavigating={isKeyNavigating}>
         <TabItem label="Main menu" value="main-menu">
           <ScrollArea>
             {children}
 
-            <ThemeToggleWrapper $hidden="DESKTOP">
+            <li>
               <ThemeToggleButton>
                 <ThemeToggleText>
                   Activate {oppositeTheme} theme
                 </ThemeToggleText>
               </ThemeToggleButton>
-            </ThemeToggleWrapper>
+            </li>
 
             <li>
               <MiscLinks />
@@ -177,7 +186,7 @@ export const SiteNavigationMenuCompact = (props: PropType) => {
         <TabItem
           label="On this page"
           value="table-of-contents"
-          disabled={false /* TODO: fix! */}
+          disabled={!showTableOfContents}
         >
           <ScrollArea>
             <TableOfContents />

packages/embla-carousel-docs/src/components/Tabs/Tabs.tsx

@@ -78,7 +78,6 @@ export const Tab = styled(BareButton)<{ $selected: boolean }>`
 
 type PropType = PropsWithChildren<{
   groupId?: string
-  selectedTabIndex?: number
 }>
 
 export const Tabs = (props: PropType) => {
@@ -87,7 +86,7 @@ export const Tabs = (props: PropType) => {
   const { storedTabSelections, storeTabSelection } = useTabs()
   const storedTabSelection = storedTabSelections[groupId]
   const { tabs, tabsId, defaultTab } = useMemo(() => {
-    const tabs = mapChildrenToTabs(children)
+    const tabs = mapChildrenToTabs(children).filter((tab) => !tab.disabled)
     return {
       tabs,
       tabsId: uniqueId(),
@@ -96,18 +95,19 @@ export const Tabs = (props: PropType) => {
   }, [children, storedTabSelection])
   const [activeTab, setActiveTab] = useState<TabItemPropType>(defaultTab)
   const tabRefs = useRef(tabs.map(() => React.createRef<HTMLButtonElement>()))
-  const tabsRef = useRef<HTMLDivElement>(null)
+  const tabRefLoopIndex = useRef(0)
+  const tabsWrapperRef = useRef<HTMLDivElement>(null)
   const tabsRectTop = useRef(0)
   const getTabIndex = useCallback(
     (tabToFind: TabItemPropType): number => {
       return tabs.findIndex((tab) => tab.value === tabToFind.value)
     },
     [tabs],
   )
-  const activeTabIndex = useRef(getTabIndex(activeTab))
+  const activeTabIndex = useRef(getTabIndex(defaultTab))
 
   const readTabsRectTop = useCallback(() => {
-    return tabsRef.current?.getBoundingClientRect().top || 0
+    return tabsWrapperRef.current?.getBoundingClientRect().top || 0
   }, [])
 
   const setActiveTabAndStoreSelection = useCallback(
@@ -202,25 +202,41 @@ export const Tabs = (props: PropType) => {
     if (tabToActivate) setActiveTabAndStoreSelection(tabToActivate)
   }, [activeTab, storedTabSelection, setActiveTabAndStoreSelection])
 
+  useEffect(() => {
+    const hasActiveTab = tabs.find((tab) => tab.value === activeTab.value)
+    if (hasActiveTab) return
+
+    const newDefaultTab = getDefaultTab(tabs, storedTabSelection)
+    setActiveTab(newDefaultTab)
+    activeTabIndex.current = getTabIndex(newDefaultTab)
+  }, [tabs, activeTab, storedTabSelection])
+
   return (
-    <TabsWrapper ref={tabsRef} {...restProps}>
+    <TabsWrapper ref={tabsWrapperRef} {...restProps}>
       <TabList role="tablist" aria-orientation="horizontal">
-        {tabs.map((tab, index) => {
+        {mapChildrenToTabs(children).map((tab) => {
           const selected = activeTab.value === tab.value
+          const enabled = !tab.disabled
+          const tabRefIndex = tabRefLoopIndex.current
+
+          if (enabled) {
+            const isLastTab = tabRefIndex === tabs.length - 1
+            tabRefLoopIndex.current = isLastTab ? 0 : tabRefIndex + 1
+          }
 
           return (
             <Tab
               role="tab"
               key={`tab-${tab.value}`}
               id={`tab-id-${tab.value}-${tabsId}`}
               tabIndex={selected ? 0 : -1}
-              ref={tabRefs.current[index]}
+              ref={enabled ? tabRefs.current[tabRefIndex] : undefined}
               aria-controls={`panel-id-${tab.value}-${tabsId}`}
               aria-selected={selected}
               onKeyDown={onKeyDown}
               onClick={() => setActiveTabAndStoreSelection(tab)}
               $selected={selected}
-              disabled={tab.disabled}
+              disabled={!enabled}
             >
               <TabInactiveText $isActive={selected}>
                 {tab.label}