@redocly/theme 0.70.0-next.6 → 0.70.0-next.8

package/src/markdoc/components/CodeWalkthrough/CodePanelHeader.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { useThemeHooks, useRenderableFiles, type RenderableFile } from '@redocly/theme/core/hooks';
 import { OverflowMenuVerticalIcon } from '@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon';

package/src/markdoc/components/CodeWalkthrough/CodePanelToolbar.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { CodeWalkthroughControlsStateContext } from '@redocly/theme/core/contexts';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';

package/src/markdoc/components/CodeWalkthrough/CodeStep.tsx

@@ -10,7 +10,7 @@ import React, {
 import styled from 'styled-components';
 import { useLocation } from 'react-router';
 
-import type { WithConditions } from '@redocly/config';
+import type { WithConditions } from '@redocly/theme/core/types';
 
 import { Marker } from '@redocly/theme/components/Marker/Marker';
 import {

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-import type { CodeWalkthroughAttr } from '@redocly/config';
+import type { CodeWalkthroughAttr } from '@redocly/theme/core/types';
 
 import {
   CodeWalkthroughStepsContext,

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

@@ -193,10 +193,8 @@ export function TabList({
   // Show as selector when no visible tabs (all tabs in dropdown)
   const showAsSelector = visibleTabs.length === 0 && hasOverflow;
 
-  const { dropdownPosition, setIsDropdownOpen, setDropdownPosition } = useDropdownPosition(
-    hasOverflow,
-    dropdownRef,
-  );
+  const { dropdownPosition, isDropdownOpen, setIsDropdownOpen, setDropdownPosition } =
+    useDropdownPosition(hasOverflow, dropdownRef);
 
   return (
     <TabListContainer role="tablist" ref={containerRef}>
@@ -216,15 +214,9 @@ export function TabList({
           size={size}
           active={isMoreActive || showAsSelector}
           tabIndex={0}
-          className="dropdown-tab"
+          className={isDropdownOpen ? 'dropdown-tab dropdown-tab-open' : 'dropdown-tab'}
         >
-          <DropdownWrapper
-            $top={dropdownPosition.top}
-            $left={dropdownPosition.left}
-            onClickCapture={() => {
-              setIsDropdownOpen(true);
-            }}
-          >
+          <DropdownWrapper $top={dropdownPosition.top} $left={dropdownPosition.left}>
             <FixedPositionDropdown
               ref={dropdownRef}
               trigger={
@@ -237,6 +229,7 @@ export function TabList({
               }
               alignment="start"
               withArrow
+              onOpen={() => setIsDropdownOpen(true)}
               onClose={() => {
                 setIsDropdownOpen(false);
                 setDropdownPosition({});
@@ -360,6 +353,10 @@ export const TabListContainer = styled.ul`
         min-width: 0;
         max-width: 100%;
       }
+
+      &.dropdown-tab-open {
+        z-index: var(--dropdown-menu-z-index);
+      }
     }
   }
 `;

package/src/markdoc/tags/code-walkthrough.ts

@@ -10,7 +10,7 @@ import type {
   CodeWalkthroughFilterItem,
   TogglesMarkdocAttr,
   InputsMarkdocAttr,
-} from '@redocly/config';
+} from '@redocly/theme/core/types';
 
 import { CodeWalkthroughFilesets } from '@redocly/theme/markdoc/attributes/code-walkthrough-filesets';
 import { CodeWalkthroughFilters } from '@redocly/theme/markdoc/attributes/code-walkthrough-filters';