@redocly/theme 0.59.0-next.1 → 0.59.0-next.2

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
+import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react';
+import { useInRouterContext } from 'react-router-dom';
+import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -26,6 +27,26 @@ type TabsProps = {
   className?: string;
   size: TabsSize;
   initialTab?: string;
+  forceReady?: boolean;
+};
+
+type UseActiveTabFn = (
+  initialTab: string,
+  tabsId: string | undefined,
+  childrenArray: React.ReactElement<TabItemProps>[],
+) => {
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+};
+
+type TabsViewProps = Omit<TabsProps, 'children'> & {
+  childrenArray: React.ReactElement<TabItemProps>[];
+  initialTab: string;
+  isReady: boolean;
+  labelsHash: string;
+  useActiveTab: UseActiveTabFn;
+  containerRef: React.RefObject<HTMLUListElement | null>;
+  onReadyChange: (ready: boolean) => void;
 };
 
 export function Tabs({
@@ -34,25 +55,72 @@ export function Tabs({
   className,
   size,
   initialTab: propInitialTab,
+  forceReady = false,
 }: TabsProps): JSX.Element {
-  const [childrenArray, setChildrenArray] = useState<React.ReactElement<TabItemProps>[]>(
-    React.Children.toArray(children) as React.ReactElement<TabItemProps>[],
-  );
+  const childrenArray = React.Children.toArray(children) as React.ReactElement<TabItemProps>[];
+  const [isReady, setIsReady] = useState(false);
+  const containerRef = useRef<HTMLUListElement | null>(null);
 
   const initialTab = propInitialTab ?? childrenArray[0]?.props.label ?? '';
-  const { activeTab, setActiveTab } = useActiveTab({ tabsId: id, initialTab });
+  const labelsHash = childrenArray.map((c) => c.props.label).join('|');
 
-  useEffect(() => {
-    setChildrenArray(React.Children.toArray(children) as React.ReactElement<TabItemProps>[]);
-  }, [children]);
+  const handleReadyChange = useCallback((ready: boolean) => {
+    setIsReady(ready);
+  }, []);
+
+  // Reset isReady when children change (new page/tabs)
+  // Use useLayoutEffect to run synchronously before paint
+  useLayoutEffect(() => {
+    setIsReady(false);
+  }, [labelsHash]);
+
+  const inRouter = useInRouterContext();
+
+  return (
+    <TabsView
+      id={id}
+      className={className}
+      size={size}
+      childrenArray={childrenArray}
+      initialTab={initialTab}
+      useActiveTab={inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter}
+      isReady={isReady || forceReady}
+      labelsHash={labelsHash}
+      containerRef={containerRef}
+      onReadyChange={handleReadyChange}
+    />
+  );
+}
+
+function TabsView({
+  id,
+  className,
+  size,
+  childrenArray,
+  useActiveTab,
+  initialTab,
+  isReady,
+  labelsHash,
+  containerRef,
+  onReadyChange,
+}: TabsViewProps): JSX.Element {
+  const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
 
   return (
-    <TabsContainer data-component-name="Markdoc/Tabs/Tabs" className={className} key={id}>
+    <TabsContainer
+      data-component-name="Markdoc/Tabs/Tabs"
+      className={className}
+      key={id}
+      $isReady={isReady}
+    >
       <TabList
+        key={labelsHash}
         size={size}
         childrenArray={childrenArray}
         activeTab={activeTab}
         onTabChange={setActiveTab}
+        containerRef={containerRef}
+        onReadyChange={onReadyChange}
       />
       {childrenArray.map((child, index) => {
         const { label } = child.props;
@@ -72,7 +140,56 @@ export function Tabs({
     </TabsContainer>
   );
 }
-const TabsContainer = styled.div`
+
+/**
+ * Validates that the active tab exists in children and resets to initial tab if not found.
+ * Ensures tab state remains consistent when tab structure changes.
+ */
+function useValidateActiveTab(
+  activeTab: string,
+  setActiveTab: (tab: string) => void,
+  childrenArray: React.ReactElement<TabItemProps>[],
+  initialTab: string,
+) {
+  useEffect(() => {
+    const availableLabels = childrenArray.map((child) => child.props.label);
+    if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
+      setActiveTab(initialTab);
+    }
+  }, [childrenArray, activeTab, initialTab, setActiveTab]);
+}
+
+const useActiveTabWithRouter = (
+  initialTab: string,
+  tabsId: string | undefined,
+  childrenArray: React.ReactElement<TabItemProps>[],
+) => {
+  const { activeTab, setActiveTab } = useActiveTab({ initialTab, tabsId });
+
+  useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+
+  return {
+    activeTab,
+    setActiveTab,
+  };
+};
+
+const useActiveTabWithoutRouter = (
+  initialTab: string,
+  _tabsId: string | undefined,
+  childrenArray: React.ReactElement<TabItemProps>[],
+) => {
+  const [activeTab, setActiveTab] = useState(initialTab);
+
+  useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+
+  return {
+    activeTab,
+    setActiveTab,
+  };
+};
+
+const TabsContainer = styled.div<{ $isReady: boolean }>`
   position: relative;
   color: var(--md-tabs-container-text-color);
   font-size: var(--md-tabs-container-font-size);
@@ -88,6 +205,14 @@ const TabsContainer = styled.div`
     margin: 0;
     padding: 0;
   }
+
+  ${({ $isReady }) =>
+    !$isReady &&
+    css`
+      opacity: 0;
+      pointer-events: none;
+      overflow: hidden;
+    `}
 `;
 
 export const TabContent = styled.div`