@redocly/theme 0.58.1 → 0.59.0-next.1

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
@@ -9,41 +9,43 @@ import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { useTabs } from '@redocly/theme/core/hooks';
+import { getTabId } from '@redocly/theme/core/utils';
 
 type TabListProps = {
   childrenArray: React.ReactElement<TabItemProps>[];
   size: TabsSize;
-  overflowTabs: number[];
-  visibleTabs: number[];
-  setTabRef: (element: HTMLButtonElement | null, index: number) => void;
-  onTabClick: (labelOrIndex: string | number) => void;
-  handleKeyboard: (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => void;
-  getTabId: (label: string, index: number) => string;
   activeTab: string;
-  isAnimating: boolean;
-  highlightStyle: { left: number; width: number };
-  allTabsHidden: boolean;
-  tabsContainerRef: React.RefObject<HTMLUListElement | null>;
+  onTabChange: (tab: string) => void;
 };
 
 export function TabList({
   childrenArray,
   size,
-  overflowTabs,
-  visibleTabs,
-  setTabRef,
-  onTabClick,
-  handleKeyboard,
-  getTabId,
   activeTab,
-  isAnimating,
-  highlightStyle,
-  allTabsHidden,
-  tabsContainerRef,
+  onTabChange,
 }: TabListProps): JSX.Element {
+  const tabsContainerRef = useRef<HTMLUListElement>(null);
+
+  const { allTabsHidden, overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef } =
+    useTabs({
+      activeTab,
+      onTabChange,
+      containerRef: tabsContainerRef,
+      totalTabs: childrenArray.length,
+    });
+
+  const { highlightStyle } = useHighlightBarAnimation({
+    activeTab,
+    childrenArray,
+    overflowTabs,
+    tabsContainerRef,
+    visibleTabs,
+  });
+
   return (
-    <TabListContainer role="tablist" ref={tabsContainerRef} data-animating={isAnimating}>
-      <HighlightBar size={size} style={{ left: highlightStyle.left, width: highlightStyle.width }}>
+    <TabListContainer role="tablist" ref={tabsContainerRef}>
+      <HighlightBar size={size} style={highlightStyle}>
         <div />
       </HighlightBar>
       {childrenArray.map((child, index) => {
@@ -58,13 +60,7 @@ export function TabList({
             icon={icon}
             size={size}
             disabled={child.props.disable}
-            setRef={(el: HTMLButtonElement | null) => {
-              setTabRef(el, index);
-              if (el) {
-                el.setAttribute('data-label', label);
-                el.setAttribute('data-animating', isAnimating.toString());
-              }
-            }}
+            setRef={(el: HTMLButtonElement | null) => setTabRef(el, index)}
             onKeyDown={(event) => handleKeyboard(event, index)}
             onClick={() => {
               child.props.onClick?.();
@@ -121,6 +117,64 @@ export function TabList({
   );
 }
 
+type UseHighlightBarAnimationProps = {
+  childrenArray: React.ReactElement<TabItemProps>[];
+  activeTab: string;
+  tabsContainerRef: React.RefObject<HTMLElement | null>;
+  visibleTabs: number[];
+  overflowTabs: number[];
+};
+const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
+  const { childrenArray, activeTab, tabsContainerRef, visibleTabs, overflowTabs } = props;
+
+  const [highlightStyle, setHighlightStyle] = React.useState<{ left: number; width: number }>({
+    left: 0,
+    width: 0,
+  });
+
+  useEffect(() => {
+    const activeIndex = childrenArray.findIndex((child) => child.props.label === activeTab);
+    const container = tabsContainerRef.current;
+
+    if (!container || activeIndex === -1) {
+      setHighlightStyle({ left: 0, width: 0 });
+      return;
+    }
+
+    const activeTabElement: HTMLElement | null = container.querySelector(
+      `[data-label="${activeTab}"]`,
+    );
+    if (!activeTabElement) return;
+
+    container.querySelectorAll('[data-label]').forEach((el) => {
+      el.classList.remove('active');
+    });
+
+    const { offsetLeft, offsetWidth } = activeTabElement;
+
+    if (visibleTabs.includes(activeIndex)) {
+      activeTabElement.classList.add('active');
+      setHighlightStyle({ left: offsetLeft, width: offsetWidth });
+      return;
+    }
+
+    if (overflowTabs.includes(activeIndex)) {
+      const moreButton = container.querySelector('button');
+      if (!moreButton) return;
+
+      const moreButtonRect = moreButton.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      setHighlightStyle({
+        left: moreButtonRect.left - containerRect.left,
+        width: moreButtonRect.width,
+      });
+      return;
+    }
+  }, [activeTab, childrenArray, visibleTabs, overflowTabs, tabsContainerRef]);
+
+  return { highlightStyle };
+};
+
 export const TabListContainer = styled.ul`
   position: relative;
   display: flex;

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' },
     },
   },