@redocly/theme 0.59.0-next.4 → 0.59.0-rc.2

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

@@ -1,6 +1,5 @@
-import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react';
-import { useInRouterContext } from 'react-router-dom';
-import styled, { css } from 'styled-components';
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -27,26 +26,6 @@ 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({
@@ -55,72 +34,25 @@ export function Tabs({
   className,
   size,
   initialTab: propInitialTab,
-  forceReady = false,
 }: TabsProps): JSX.Element {
-  const childrenArray = React.Children.toArray(children) as React.ReactElement<TabItemProps>[];
-  const [isReady, setIsReady] = useState(false);
-  const containerRef = useRef<HTMLUListElement | null>(null);
+  const [childrenArray, setChildrenArray] = useState<React.ReactElement<TabItemProps>[]>(
+    React.Children.toArray(children) as React.ReactElement<TabItemProps>[],
+  );
 
   const initialTab = propInitialTab ?? childrenArray[0]?.props.label ?? '';
-  const labelsHash = childrenArray.map((c) => c.props.label).join('|');
-
-  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();
+  const { activeTab, setActiveTab } = useActiveTab({ tabsId: id, initialTab });
 
-  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);
+  useEffect(() => {
+    setChildrenArray(React.Children.toArray(children) as React.ReactElement<TabItemProps>[]);
+  }, [children]);
 
   return (
-    <TabsContainer
-      data-component-name="Markdoc/Tabs/Tabs"
-      className={className}
-      key={id}
-      $isReady={isReady}
-    >
+    <TabsContainer data-component-name="Markdoc/Tabs/Tabs" className={className} key={id}>
       <TabList
-        key={labelsHash}
         size={size}
         childrenArray={childrenArray}
         activeTab={activeTab}
         onTabChange={setActiveTab}
-        containerRef={containerRef}
-        onReadyChange={onReadyChange}
       />
       {childrenArray.map((child, index) => {
         const { label } = child.props;
@@ -140,56 +72,7 @@ function TabsView({
     </TabsContainer>
   );
 }
-
-/**
- * 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 }>`
+const TabsContainer = styled.div`
   position: relative;
   color: var(--md-tabs-container-text-color);
   font-size: var(--md-tabs-container-font-size);
@@ -205,14 +88,6 @@ const TabsContainer = styled.div<{ $isReady: boolean }>`
     margin: 0;
     padding: 0;
   }
-
-  ${({ $isReady }) =>
-    !$isReady &&
-    css`
-      opacity: 0;
-      pointer-events: none;
-      overflow: hidden;
-    `}
 `;
 
 export const TabContent = styled.div`