@redocly/theme 0.63.0-next.4 → 0.63.0-next.6

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

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useInRouterContext } from 'react-router-dom';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -27,7 +27,6 @@ type TabsProps = {
   className?: string;
   size: TabsSize;
   initialTab?: string;
-  forceReady?: boolean;
   activeTab?: string;
 };
 
@@ -43,11 +42,9 @@ type UseActiveTabFn = (
 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;
   externalActiveTab?: string;
 };
 
@@ -57,26 +54,14 @@ export function Tabs({
   className,
   size,
   initialTab: propInitialTab,
-  forceReady = false,
   activeTab: controlledActiveTab,
 }: 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 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();
 
   return (
@@ -87,10 +72,8 @@ export function Tabs({
       childrenArray={childrenArray}
       initialTab={initialTab}
       useActiveTab={inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter}
-      isReady={isReady || forceReady}
       labelsHash={labelsHash}
       containerRef={containerRef}
-      onReadyChange={handleReadyChange}
       externalActiveTab={controlledActiveTab}
     />
   );
@@ -103,10 +86,8 @@ function TabsView({
   childrenArray,
   useActiveTab,
   initialTab,
-  isReady,
   labelsHash,
   containerRef,
-  onReadyChange,
   externalActiveTab,
 }: TabsViewProps): JSX.Element {
   const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
@@ -118,12 +99,7 @@ function TabsView({
   }, [externalActiveTab, activeTab, setActiveTab]);
 
   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}
@@ -131,7 +107,6 @@ function TabsView({
         activeTab={activeTab}
         onTabChange={setActiveTab}
         containerRef={containerRef}
-        onReadyChange={onReadyChange}
       />
       {childrenArray.map((child, index) => {
         const { label } = child.props;
@@ -200,7 +175,7 @@ const useActiveTabWithoutRouter = (
   };
 };
 
-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);
@@ -216,14 +191,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`