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

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
@@ -17,140 +17,6 @@ type TabListProps = {
   size: TabsSize;
   activeTab: string;
   onTabChange: (tab: string) => void;
-  containerRef: React.RefObject<HTMLUListElement | null>;
-  onReadyChange?: (isReady: boolean) => void;
-};
-
-type UseHighlightBarAnimationProps = {
-  childrenArray: React.ReactElement<TabItemProps>[];
-  activeTab: string;
-  tabsContainerRef: React.RefObject<HTMLElement | null>;
-  visibleTabs: number[];
-  overflowTabs: number[];
-};
-
-/**
- * Calculates optimal dropdown position relative to viewport to ensure visibility.
- * Positions below the button by default, but moves above if insufficient space.
- * Adjusts horizontal position to prevent overflow off screen edges.
- */
-const calculateDropdownPosition = (
-  buttonRect: DOMRect,
-  dropdownRect: DOMRect,
-): { top: number; left: number } => {
-  const gap = 4;
-  const margin = 16;
-  const spaceBelow = window.innerHeight - buttonRect.bottom;
-  const spaceAbove = buttonRect.top;
-
-  // Position below button, or above if dropdown doesn't fit below
-  const top =
-    spaceBelow < dropdownRect.height + gap && spaceAbove > spaceBelow
-      ? buttonRect.top - gap
-      : buttonRect.bottom + gap;
-
-  // Align with button left edge, adjust if overflows screen
-  const idealLeft = buttonRect.left;
-  const rightEdge = idealLeft + dropdownRect.width;
-  const overflowsRight = rightEdge > window.innerWidth - margin;
-
-  const left = overflowsRight
-    ? window.innerWidth - dropdownRect.width - margin
-    : Math.max(margin, idealLeft);
-
-  return { top, left };
-};
-
-/**
- * Manages dropdown positioning and updates on scroll/resize events for TabList.
- */
-const useDropdownPosition = (
-  hasOverflow: boolean,
-  dropdownRef: React.RefObject<HTMLDivElement | null>,
-) => {
-  const [dropdownPosition, setDropdownPosition] = useState<{ top?: number; left?: number }>({});
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-
-  const updateDropdownPosition = useCallback(() => {
-    if (!dropdownRef.current) return;
-
-    const button = dropdownRef.current.querySelector('button');
-    const dropdownMenu = dropdownRef.current.querySelector('div:last-child');
-    if (!button || !dropdownMenu) return;
-
-    const buttonRect = button.getBoundingClientRect();
-    const dropdownRect = (dropdownMenu as HTMLElement).getBoundingClientRect();
-
-    const position = calculateDropdownPosition(buttonRect, dropdownRect);
-    setDropdownPosition(position);
-  }, [dropdownRef]);
-
-  // Track when dropdown menu appears and recalculate position
-  useEffect(() => {
-    if (!hasOverflow || !isDropdownOpen || !dropdownRef.current) return;
-
-    const dropdownMenu = dropdownRef.current.querySelector('div:last-child') as HTMLElement;
-    if (!dropdownMenu) return;
-
-    // ResizeObserver tracks both initial render and size changes
-    const resizeObserver = new ResizeObserver(() => {
-      updateDropdownPosition();
-    });
-
-    resizeObserver.observe(dropdownMenu);
-
-    return () => resizeObserver.disconnect();
-  }, [hasOverflow, isDropdownOpen, dropdownRef, updateDropdownPosition]);
-
-  // Update position on scroll/resize
-  useEffect(() => {
-    if (!hasOverflow || !isDropdownOpen) return;
-
-    window.addEventListener('scroll', updateDropdownPosition, true);
-    window.addEventListener('resize', updateDropdownPosition);
-
-    return () => {
-      window.removeEventListener('scroll', updateDropdownPosition, true);
-      window.removeEventListener('resize', updateDropdownPosition);
-    };
-  }, [hasOverflow, isDropdownOpen, updateDropdownPosition]);
-
-  return {
-    dropdownPosition,
-    isDropdownOpen,
-    setIsDropdownOpen,
-    setDropdownPosition,
-    updateDropdownPosition,
-  };
-};
-
-const renderTab = (
-  child: React.ReactElement<TabItemProps>,
-  index: number,
-  size: TabsSize,
-  setTabRef: (element: HTMLButtonElement | null, index: number) => void,
-  handleKeyboard: (event: React.KeyboardEvent, index: number) => void,
-  onTabClick: (labelOrIndex: string | number) => void,
-) => {
-  const { label, icon } = child.props;
-  const tabId = getTabId(label, index);
-
-  return (
-    <Tab
-      key={`key-${tabId}`}
-      tabId={tabId}
-      label={label}
-      icon={icon}
-      size={size}
-      disabled={child.props.disable}
-      setRef={(el: HTMLButtonElement | null) => setTabRef(el, index)}
-      onKeyDown={(event) => handleKeyboard(event, index)}
-      onClick={() => {
-        child.props.onClick?.();
-        onTabClick(label);
-      }}
-    />
-  );
 };
 
 export function TabList({
@@ -158,119 +24,106 @@ export function TabList({
   size,
   activeTab,
   onTabChange,
-  containerRef,
-  onReadyChange,
 }: TabListProps): JSX.Element {
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const totalTabs = childrenArray.length;
-
-  const { overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef, isReady } = useTabs({
-    activeTab,
-    onTabChange,
-    containerRef,
-    totalTabs,
-  });
-
-  useEffect(() => {
-    onReadyChange?.(isReady);
-  }, [isReady, onReadyChange]);
+  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: containerRef,
+    tabsContainerRef,
     visibleTabs,
   });
 
-  const hasOverflow = overflowTabs.length > 0;
-  const isMoreActive =
-    hasOverflow &&
-    overflowTabs.some((i) => childrenArray[i] && activeTab === childrenArray[i].props.label);
-
-  // Show as selector when no visible tabs (all tabs in dropdown)
-  const showAsSelector = visibleTabs.length === 0 && hasOverflow;
-
-  const { dropdownPosition, setIsDropdownOpen, setDropdownPosition } = useDropdownPosition(
-    hasOverflow,
-    dropdownRef,
-  );
-
   return (
-    <TabListContainer role="tablist" ref={containerRef}>
+    <TabListContainer role="tablist" ref={tabsContainerRef}>
       <HighlightBar size={size} style={highlightStyle}>
         <div />
       </HighlightBar>
-
       {childrenArray.map((child, index) => {
-        // Show all tabs before ready (for measurement), then only visible ones
-        const shouldRender = !isReady || visibleTabs.includes(index);
-        if (!shouldRender) return null;
-        return renderTab(child, index, size, setTabRef, handleKeyboard, onTabClick);
-      })}
-
-      {hasOverflow && (
-        <TabItem
-          size={size}
-          active={isMoreActive || showAsSelector}
-          tabIndex={0}
-          className="dropdown-tab"
-        >
-          <DropdownWrapper
-            $top={dropdownPosition.top}
-            $left={dropdownPosition.left}
-            onClickCapture={() => {
-              setIsDropdownOpen(true);
+        if (!visibleTabs.includes(index)) return null;
+        const { label, icon } = child.props;
+        const tabId = getTabId(label, index);
+        return (
+          <Tab
+            key={`key-${tabId}`}
+            tabId={tabId}
+            label={label}
+            icon={icon}
+            size={size}
+            disabled={child.props.disable}
+            setRef={(el: HTMLButtonElement | null) => setTabRef(el, index)}
+            onKeyDown={(event) => handleKeyboard(event, index)}
+            onClick={() => {
+              child.props.onClick?.();
+              onTabClick(label);
             }}
+          />
+        );
+      })}
+      <TabItem
+        size={size}
+        active={overflowTabs.some((index) => activeTab === childrenArray[index].props.label)}
+        tabIndex={0}
+      >
+        {overflowTabs.length > 0 && (
+          <Dropdown
+            trigger={
+              <TabButtonLink
+                size={size}
+                className={
+                  overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
+                    ? 'active'
+                    : undefined
+                }
+              >
+                {allTabsHidden ? activeTab : 'More'}
+              </TabButtonLink>
+            }
+            alignment="start"
+            withArrow={true}
           >
-            <FixedPositionDropdown
-              ref={dropdownRef}
-              trigger={
-                <TabButtonLink
-                  size={size}
-                  className={isMoreActive || showAsSelector ? 'active' : undefined}
-                >
-                  {showAsSelector ? <TabButtonText>{activeTab}</TabButtonText> : 'More'}
-                </TabButtonLink>
-              }
-              alignment="start"
-              withArrow
-              onClose={() => {
-                setIsDropdownOpen(false);
-                setDropdownPosition({});
-              }}
-            >
-              <DropdownMenu>
-                {overflowTabs.map((index) => {
-                  const child = childrenArray[index];
-                  if (!child) return null;
-
-                  const { label } = child.props;
-                  const tabId = getTabId(label, index);
-
-                  return (
-                    <DropdownMenuItem
-                      key={`more-${tabId}`}
-                      active={activeTab === label}
-                      onAction={() => {
-                        child.props.onClick?.();
-                        onTabClick(index);
-                      }}
-                      disabled={child.props.disable}
-                    >
-                      {label}
-                    </DropdownMenuItem>
-                  );
-                })}
-              </DropdownMenu>
-            </FixedPositionDropdown>
-          </DropdownWrapper>
-        </TabItem>
-      )}
+            <DropdownMenu>
+              {overflowTabs.map((index) => {
+                const { label } = childrenArray[index].props;
+                const tabId = getTabId(label, index);
+                return (
+                  <DropdownMenuItem
+                    key={`more-${tabId}`}
+                    active={activeTab === label}
+                    onAction={() => {
+                      childrenArray[index].props.onClick?.();
+                      onTabClick(index);
+                    }}
+                    disabled={childrenArray[index].props.disable}
+                  >
+                    {label}
+                  </DropdownMenuItem>
+                );
+              })}
+            </DropdownMenu>
+          </Dropdown>
+        )}
+      </TabItem>
     </TabListContainer>
   );
 }
 
+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;
 
@@ -288,39 +141,35 @@ const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
       return;
     }
 
-    // Remove active class from all tabs first
+    const activeTabElement: HTMLElement | null = container.querySelector(
+      `[data-label="${activeTab}"]`,
+    );
+    if (!activeTabElement) return;
+
     container.querySelectorAll('[data-label]').forEach((el) => {
       el.classList.remove('active');
     });
 
-    // Check if active tab is in overflow first
+    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;
     }
-
-    // Active tab is visible, find its element
-    const activeTabElement: HTMLElement | null = container.querySelector(
-      `[data-label="${activeTab}"]`,
-    );
-    if (!activeTabElement) return;
-
-    const { offsetLeft, offsetWidth } = activeTabElement;
-
-    if (visibleTabs.includes(activeIndex)) {
-      activeTabElement.classList.add('active');
-      setHighlightStyle({ left: offsetLeft, width: offsetWidth });
-      return;
-    }
   }, [activeTab, childrenArray, visibleTabs, overflowTabs, tabsContainerRef]);
 
   return { highlightStyle };
@@ -332,11 +181,15 @@ export const TabListContainer = styled.ul`
   gap: var(--md-tabs-gap);
   width: 100%;
   min-width: 0;
+  position: relative;
 
   &::before {
     content: '';
     position: absolute;
-    inset: 0;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
     border: var(--md-tabs-border);
     border-width: var(--md-tabs-border-width);
     pointer-events: none;
@@ -344,17 +197,11 @@ export const TabListContainer = styled.ul`
 
   && {
     padding: var(--md-tabs-padding);
+    margin-block-end: 0;
     margin: 0;
 
     & > li {
-      margin-bottom: 0;
-      flex-shrink: 0;
-
-      &.dropdown-tab {
-        flex-shrink: 1;
-        min-width: 0;
-        max-width: 100%;
-      }
+      margin-bottom: 0px;
     }
   }
 `;
@@ -365,7 +212,7 @@ export const TabItem = styled.li<{ active?: boolean; size: TabsSize; tabIndex?:
   cursor: pointer;
   align-items: center;
   padding: var(--md-tabs-tab-wrapper-padding);
-  z-index: var(--z-index-surface);
+  z-index: 1;
 
   ${({ active, size }) =>
     active
@@ -404,51 +251,6 @@ export const TabItem = styled.li<{ active?: boolean; size: TabsSize; tabIndex?:
   }
 `;
 
-const DropdownWrapper = styled.div.attrs<{ $top?: number; $left?: number }>((props) => ({
-  style: {
-    ...(props.$top !== undefined && { '--dropdown-top': `${props.$top}px` }),
-    ...(props.$left !== undefined && { '--dropdown-left': `${props.$left}px` }),
-  },
-}))<{ $top?: number; $left?: number }>`
-  position: static;
-  z-index: var(--z-index-raised);
-  width: 100%;
-  min-width: 0;
-`;
-
-const FixedPositionDropdown = styled(Dropdown)`
-  position: static;
-  width: 100%;
-  min-width: 0;
-
-  > div:first-child {
-    width: 100%;
-    min-width: 0;
-  }
-
-  > div:last-child {
-    position: fixed;
-    top: var(--dropdown-top, 0);
-    left: var(--dropdown-left, 0);
-    right: auto;
-    bottom: auto;
-    transform: none;
-    padding-top: 0;
-    max-width: min(400px, calc(100vw - 32px));
-    max-height: calc(100vh - var(--dropdown-top, 0) - 32px);
-    overflow-y: auto;
-    z-index: var(--z-index-raised);
-
-    ul {
-      li {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-`;
-
 const HighlightBar = styled.div<{ size: TabsSize }>`
   position: absolute;
   top: 0;
@@ -469,20 +271,11 @@ const HighlightBar = styled.div<{ size: TabsSize }>`
   }
 `;
 
-const TabButtonText = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-`;
-
 export const TabButtonLink = styled(Button)`
   color: var(--md-tabs-tab-text-color);
   font-family: var(--md-tabs-tab-font-family);
   font-style: var(--md-tabs-tab-font-style);
   background-color: var(--md-tabs-tab-bg-color);
-  width: 100%;
 
   transition:
     background-color 300ms ease-in-out,
@@ -502,9 +295,9 @@ export const TabButtonLink = styled(Button)`
 
   &.active {
     color: var(--md-tabs-active-tab-text-color);
+    font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
     font-family: var(--md-tabs-active-tab-font-family);
     font-style: var(--md-tabs-active-tab-font-style);
-    font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
     font-weight: var(--md-tabs-${({ size }) => size}-active-tab-font-weight);
     line-height: var(--md-tabs-${({ size }) => size}-active-tab-line-height);
     background-color: var(--md-tabs-active-tab-bg-color);
@@ -514,12 +307,12 @@ export const TabButtonLink = styled(Button)`
 
   &:hover {
     color: var(--md-tabs-hover-tab-text-color);
+    font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
     font-family: var(--md-tabs-hover-tab-font-family);
     font-style: var(--md-tabs-hover-tab-font-style);
-    font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
     font-weight: var(--md-tabs-${({ size }) => size}-hover-tab-font-weight);
-    line-height: var(--md-tabs-${({ size }) => size}-hover-tab-line-height);
     background-color: var(--md-tabs-hover-tab-bg-color);
+    line-height: var(--md-tabs-${({ size }) => size}-hover-tab-line-height);
     border-radius: var(--md-tabs-${({ size }) => size}-hover-tab-border-radius);
     padding: var(--md-tabs-${({ size }) => size}-hover-tab-padding);
   }