@redocly/theme 0.59.0-next.1 → 0.59.0-next.3

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
@@ -17,6 +17,140 @@ 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({
@@ -24,106 +158,119 @@ export function TabList({
   size,
   activeTab,
   onTabChange,
+  containerRef,
+  onReadyChange,
 }: TabListProps): JSX.Element {
-  const tabsContainerRef = useRef<HTMLUListElement>(null);
-
-  const { allTabsHidden, overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef } =
-    useTabs({
-      activeTab,
-      onTabChange,
-      containerRef: tabsContainerRef,
-      totalTabs: childrenArray.length,
-    });
+  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 { highlightStyle } = useHighlightBarAnimation({
     activeTab,
     childrenArray,
     overflowTabs,
-    tabsContainerRef,
+    tabsContainerRef: containerRef,
     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={tabsContainerRef}>
+    <TabListContainer role="tablist" ref={containerRef}>
       <HighlightBar size={size} style={highlightStyle}>
         <div />
       </HighlightBar>
+
       {childrenArray.map((child, index) => {
-        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);
-            }}
-          />
-        );
+        // 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);
       })}
-      <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}
+
+      {hasOverflow && (
+        <TabItem
+          size={size}
+          active={isMoreActive || showAsSelector}
+          tabIndex={0}
+          className="dropdown-tab"
+        >
+          <DropdownWrapper
+            $top={dropdownPosition.top}
+            $left={dropdownPosition.left}
+            onClickCapture={() => {
+              setIsDropdownOpen(true);
+            }}
           >
-            <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>
+            <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>
+      )}
     </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;
 
@@ -141,35 +288,39 @@ const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
       return;
     }
 
-    const activeTabElement: HTMLElement | null = container.querySelector(
-      `[data-label="${activeTab}"]`,
-    );
-    if (!activeTabElement) return;
-
+    // Remove active class from all tabs first
     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;
-    }
-
+    // Check if active tab is in overflow first
     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 };
@@ -181,15 +332,11 @@ export const TabListContainer = styled.ul`
   gap: var(--md-tabs-gap);
   width: 100%;
   min-width: 0;
-  position: relative;
 
   &::before {
     content: '';
     position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
+    inset: 0;
     border: var(--md-tabs-border);
     border-width: var(--md-tabs-border-width);
     pointer-events: none;
@@ -197,11 +344,17 @@ export const TabListContainer = styled.ul`
 
   && {
     padding: var(--md-tabs-padding);
-    margin-block-end: 0;
     margin: 0;
 
     & > li {
-      margin-bottom: 0px;
+      margin-bottom: 0;
+      flex-shrink: 0;
+
+      &.dropdown-tab {
+        flex-shrink: 1;
+        min-width: 0;
+        max-width: 100%;
+      }
     }
   }
 `;
@@ -212,7 +365,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: 1;
+  z-index: var(--z-index-surface);
 
   ${({ active, size }) =>
     active
@@ -251,6 +404,51 @@ 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;
@@ -271,11 +469,20 @@ 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,
@@ -295,9 +502,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);
@@ -307,12 +514,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);
-    background-color: var(--md-tabs-hover-tab-bg-color);
     line-height: var(--md-tabs-${({ size }) => size}-hover-tab-line-height);
+    background-color: var(--md-tabs-hover-tab-bg-color);
     border-radius: var(--md-tabs-${({ size }) => size}-hover-tab-border-radius);
     padding: var(--md-tabs-${({ size }) => size}-hover-tab-padding);
   }