@redocly/theme 0.58.0 → 0.59.0-next.0

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

@@ -1,10 +1,11 @@
-import React, { useRef, useState, useEffect } from 'react';
-import styled, { css } from 'styled-components';
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import { useTabs } from '@redocly/theme/core/hooks';
+import { useActiveTab } from '@redocly/theme/core/hooks';
 import { TabList } from '@redocly/theme/markdoc/components/Tabs/TabList';
+import { getTabId } from '@redocly/theme/core/utils';
 
 export enum TabsSize {
   SMALL = 'small',
@@ -20,140 +21,38 @@ export type TabItemProps = {
 };
 
 type TabsProps = {
+  id?: string;
   children: React.ReactElement<TabItemProps>[];
   className?: string;
   size: TabsSize;
-  forceReady?: boolean;
   initialTab?: string;
 };
 
 export function Tabs({
+  id,
   children,
   className,
   size,
-  forceReady = false,
   initialTab: propInitialTab,
 }: TabsProps): JSX.Element {
   const [childrenArray, setChildrenArray] = useState<React.ReactElement<TabItemProps>[]>(
     React.Children.toArray(children) as React.ReactElement<TabItemProps>[],
   );
 
+  const initialTab = propInitialTab ?? childrenArray[0]?.props.label ?? '';
+  const { activeTab, setActiveTab } = useActiveTab({ tabsId: id, initialTab });
+
   useEffect(() => {
     setChildrenArray(React.Children.toArray(children) as React.ReactElement<TabItemProps>[]);
   }, [children]);
-  const tabsContainerRef = useRef<HTMLUListElement>(null);
-  const [isAnimating, setIsAnimating] = useState<boolean>(false);
-  const defaultInitialTab = childrenArray[0]?.props.label ?? '';
-  const initialTab = propInitialTab ?? defaultInitialTab;
-  const {
-    activeTab,
-    setTabRef,
-    onTabClick,
-    handleKeyboard,
-    getTabId,
-    visibleTabs,
-    overflowTabs,
-    ready,
-    allTabsHidden,
-  } = useTabs({
-    initialTab,
-    totalTabs: childrenArray.length,
-    containerRef: tabsContainerRef,
-  });
-
-  const [prevTab, setPrevTab] = React.useState(initialTab);
-  const [highlightStyle, setHighlightStyle] = React.useState<{ left: number; width: number }>({
-    left: 0,
-    width: 0,
-  });
-
-  useEffect(() => {
-    setPrevTab(activeTab);
-    setIsAnimating(true);
-
-    const activeIndex = childrenArray.findIndex((child) => child.props.label === activeTab);
-    const container = tabsContainerRef.current;
-
-    if (container) {
-      container.querySelectorAll('[data-label]').forEach((el) => {
-        el.classList.remove('active');
-      });
-
-      container.getBoundingClientRect();
-
-      requestAnimationFrame(() => {
-        if (activeIndex >= 0) {
-          let activeTabElement: HTMLElement | null = null;
-          let startPosition = { left: 0, width: 0 };
-
-          if (visibleTabs.includes(activeIndex)) {
-            activeTabElement = container.querySelector(
-              `[data-label="${activeTab}"]`,
-            ) as HTMLElement;
-          } else if (overflowTabs.includes(activeIndex)) {
-            const moreButton = container.querySelector('button') as HTMLElement;
-            if (moreButton) {
-              const moreButtonRect = moreButton.getBoundingClientRect();
-              const containerRect = container.getBoundingClientRect();
-              startPosition = {
-                left: moreButtonRect.left - containerRect.left,
-                width: moreButtonRect.width,
-              };
-            }
-          }
-
-          if (activeTabElement) {
-            const { offsetLeft, offsetWidth } = activeTabElement;
-
-            if (overflowTabs.includes(activeIndex)) {
-              setHighlightStyle(startPosition);
-              requestAnimationFrame(() => {
-                setHighlightStyle({ left: offsetLeft, width: offsetWidth });
-              });
-            } else {
-              setHighlightStyle({ left: offsetLeft, width: offsetWidth });
-            }
-
-            if (visibleTabs.includes(activeIndex)) {
-              activeTabElement?.classList.add('active');
-            }
-
-            return () => {
-              container.querySelectorAll('[data-label]').forEach((el) => {
-                el.classList.remove('active');
-              });
-            };
-          }
-        }
-        setHighlightStyle({ left: 0, width: 0 });
-        setIsAnimating(false);
-      });
-    } else {
-      setHighlightStyle({ left: 0, width: 0 });
-      setIsAnimating(false);
-    }
-  }, [activeTab, prevTab, childrenArray, visibleTabs, overflowTabs]);
 
   return (
-    <TabsContainer
-      data-component-name="Markdoc/Tabs/Tabs"
-      className={className}
-      isReady={ready || forceReady}
-    >
+    <TabsContainer data-component-name="Markdoc/Tabs/Tabs" className={className} key={id}>
       <TabList
         size={size}
         childrenArray={childrenArray}
-        overflowTabs={overflowTabs}
-        setTabRef={setTabRef}
-        onTabClick={onTabClick}
-        handleKeyboard={handleKeyboard}
-        getTabId={getTabId}
         activeTab={activeTab}
-        isAnimating={isAnimating}
-        highlightStyle={highlightStyle}
-        visibleTabs={visibleTabs}
-        allTabsHidden={allTabsHidden}
-        tabsContainerRef={tabsContainerRef}
+        onTabChange={setActiveTab}
       />
       {childrenArray.map((child, index) => {
         const { label } = child.props;
@@ -173,8 +72,7 @@ export function Tabs({
     </TabsContainer>
   );
 }
-
-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);
@@ -186,17 +84,6 @@ const TabsContainer = styled.div<{ isReady: boolean }>`
   padding: var(--md-tabs-container-padding);
   border: var(--md-tabs-container-border);
 
-  ${({ isReady }) =>
-    !isReady
-      ? css`
-          visibility: hidden;
-          overflow: hidden;
-        `
-      : css`
-          visibility: visible;
-          overflow: visible;
-        `}
-
   ol[class^='Tabs__TabList'] {
     margin: 0;
     padding: 0;

package/src/markdoc/tags/tabs.ts

@@ -22,6 +22,11 @@ export const tabs: MarkdocSchemaWrapper = {
       return new markdoc.Tag('Tabs', attributes, tabsContent);
     },
     attributes: {
+      /*
+        A unique persistent identifier assigned to a component.
+        This value is used as a key for the query parameter that stores the active tab to enable deep linking.
+      */
+      id: { type: String },
       size: { type: String, matches: ['small', 'medium'], default: 'medium' },
     },
   },