@redocly/theme 0.54.1 → 0.54.3

package/lib/components/Button/Button.d.ts

@@ -18,6 +18,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     title?: string;
     tabIndex?: number;
     onClick?: (e?: any) => void;
+    ref?: React.Ref<HTMLButtonElement>;
     type?: 'button' | 'submit' | 'reset';
 }
 export declare function generateClassName({ variant, tone, size, extraClass, }: ButtonProps): string;

package/lib/markdoc/components/Tabs/TabList.d.ts

@@ -26,8 +26,5 @@ export declare const TabItem: import("styled-components").StyledComponent<"li",
     size: TabsSize;
     tabIndex?: number;
 }, never>;
-export declare const TabButtonLink: import("styled-components").StyledComponent<"button", any, {
-    size: TabsSize;
-    disabled?: boolean;
-}, never>;
+export declare const TabButtonLink: import("styled-components").StyledComponent<React.FC<import("../../../components/Button/Button").ButtonProps>, any, import("../../../components/Button/Button").ButtonProps, never>;
 export {};

package/lib/markdoc/components/Tabs/TabList.js

@@ -22,25 +22,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabButtonLink = exports.TabItem = exports.TabListContainer = void 0;
 exports.TabList = TabList;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Tab_1 = require("../../../markdoc/components/Tabs/Tab");
 const Dropdown_1 = require("../../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuItem");
-const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
-const ChevronUpIcon_1 = require("../../../icons/ChevronUpIcon/ChevronUpIcon");
+const Button_1 = require("../../../components/Button/Button");
 function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, onTabClick, handleKeyboard, getTabId, activeTab, isAnimating, highlightStyle, allTabsHidden, tabsContainerRef, }) {
-    const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
-    const handleDropdownOpen = (0, react_1.useCallback)(() => {
-        setIsDropdownOpen(true);
-    }, []);
-    const handleDropdownClose = (0, react_1.useCallback)(() => {
-        setIsDropdownOpen(false);
-    }, []);
     return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef, "data-animating": isAnimating },
         react_1.default.createElement(HighlightBar, { size: size, style: { left: highlightStyle.left, width: highlightStyle.width } },
             react_1.default.createElement("div", null)),
@@ -59,20 +54,16 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
                     onTabClick(label);
                 } }));
         }),
-        react_1.default.createElement(exports.TabItem, { size: size, active: overflowTabs.some((index) => activeTab === childrenArray[index].props.label), tabIndex: 0 }, overflowTabs.length > 0 && (react_1.default.createElement("div", { onPointerEnter: handleDropdownOpen, onPointerLeave: handleDropdownClose },
-            react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
-                        ? 'active'
-                        : undefined },
-                    allTabsHidden ? activeTab : 'More',
-                    isDropdownOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)), alignment: "start", withArrow: false, active: isDropdownOpen, triggerEvent: "click" },
-                react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
-                    const { label } = childrenArray[index].props;
-                    const tabId = getTabId(label, index);
-                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
-                            onTabClick(index);
-                            handleDropdownClose();
-                        }, disabled: childrenArray[index].props.disable }, label));
-                }))))))));
+        react_1.default.createElement(exports.TabItem, { size: size, active: overflowTabs.some((index) => activeTab === childrenArray[index].props.label), tabIndex: 0 }, overflowTabs.length > 0 && (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
+                    ? 'active'
+                    : undefined }, allTabsHidden ? activeTab : 'More'), alignment: "start", withArrow: true },
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
+                const { label } = childrenArray[index].props;
+                const tabId = getTabId(label, index);
+                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
+                        onTabClick(index);
+                    }, disabled: childrenArray[index].props.disable }, label));
+            })))))));
 }
 exports.TabListContainer = styled_components_1.default.ul `
   position: relative;
@@ -166,22 +157,11 @@ const HighlightBar = styled_components_1.default.div `
     border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
   }
 `;
-exports.TabButtonLink = styled_components_1.default.button `
-  all: unset;
-  flex-grow: 1;
-  cursor: pointer;
-  width: 100%;
-  text-align: center;
+exports.TabButtonLink = (0, styled_components_1.default)(Button_1.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);
-  white-space: nowrap;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xxs);
-  z-index: 2;
 
   transition:
     background-color 300ms ease-in-out,

package/lib/markdoc/components/Tabs/Tabs.js

@@ -92,14 +92,10 @@ function Tabs({ children, className, size }) {
                         else {
                             setHighlightStyle({ left: offsetLeft, width: offsetWidth });
                         }
-                        const timeoutId = setTimeout(() => {
-                            if (visibleTabs.includes(activeIndex)) {
-                                activeTabElement === null || activeTabElement === void 0 ? void 0 : activeTabElement.classList.add('active');
-                            }
-                            setIsAnimating(false);
-                        }, 300);
+                        if (visibleTabs.includes(activeIndex)) {
+                            activeTabElement === null || activeTabElement === void 0 ? void 0 : activeTabElement.classList.add('active');
+                        }
                         return () => {
-                            clearTimeout(timeoutId);
                             container.querySelectorAll('[data-label]').forEach((el) => {
                                 el.classList.remove('active');
                             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.54.1",
+  "version": "0.54.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Button/Button.tsx

@@ -32,7 +32,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   title?: string;
   tabIndex?: number;
   onClick?: (e?: any) => void;
-
+  ref?: React.Ref<HTMLButtonElement>;
   type?: 'button' | 'submit' | 'reset';
 }
 

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
@@ -8,8 +8,7 @@ import { TabItemProps, TabsSize } from '@redocly/theme/markdoc/components/Tabs/T
 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 { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
-import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 type TabListProps = {
   childrenArray: React.ReactElement<TabItemProps>[];
@@ -42,16 +41,6 @@ export function TabList({
   allTabsHidden,
   tabsContainerRef,
 }: TabListProps): JSX.Element {
-  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
-
-  const handleDropdownOpen = useCallback(() => {
-    setIsDropdownOpen(true);
-  }, []);
-
-  const handleDropdownClose = useCallback(() => {
-    setIsDropdownOpen(false);
-  }, []);
-
   return (
     <TabListContainer role="tablist" ref={tabsContainerRef} data-animating={isAnimating}>
       <HighlightBar size={size} style={{ left: highlightStyle.left, width: highlightStyle.width }}>
@@ -88,47 +77,41 @@ export function TabList({
         tabIndex={0}
       >
         {overflowTabs.length > 0 && (
-          <div onPointerEnter={handleDropdownOpen} onPointerLeave={handleDropdownClose}>
-            <Dropdown
-              trigger={
-                <TabButtonLink
-                  size={size}
-                  className={
-                    overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
-                      ? 'active'
-                      : undefined
-                  }
-                >
-                  {allTabsHidden ? activeTab : 'More'}
-                  {isDropdownOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                </TabButtonLink>
-              }
-              alignment="start"
-              withArrow={false}
-              active={isDropdownOpen}
-              triggerEvent="click"
-            >
-              <DropdownMenu>
-                {overflowTabs.map((index) => {
-                  const { label } = childrenArray[index].props;
-                  const tabId = getTabId(label, index);
-                  return (
-                    <DropdownMenuItem
-                      key={`more-${tabId}`}
-                      active={activeTab === label}
-                      onAction={() => {
-                        onTabClick(index);
-                        handleDropdownClose();
-                      }}
-                      disabled={childrenArray[index].props.disable}
-                    >
-                      {label}
-                    </DropdownMenuItem>
-                  );
-                })}
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown
+            trigger={
+              <TabButtonLink
+                size={size}
+                className={
+                  overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
+                    ? 'active'
+                    : undefined
+                }
+              >
+                {allTabsHidden ? activeTab : 'More'}
+              </TabButtonLink>
+            }
+            alignment="start"
+            withArrow={true}
+          >
+            <DropdownMenu>
+              {overflowTabs.map((index) => {
+                const { label } = childrenArray[index].props;
+                const tabId = getTabId(label, index);
+                return (
+                  <DropdownMenuItem
+                    key={`more-${tabId}`}
+                    active={activeTab === label}
+                    onAction={() => {
+                      onTabClick(index);
+                    }}
+                    disabled={childrenArray[index].props.disable}
+                  >
+                    {label}
+                  </DropdownMenuItem>
+                );
+              })}
+            </DropdownMenu>
+          </Dropdown>
         )}
       </TabItem>
     </TabListContainer>
@@ -231,25 +214,11 @@ const HighlightBar = styled.div<{ size: TabsSize }>`
   }
 `;
 
-export const TabButtonLink = styled.button<{
-  size: TabsSize;
-  disabled?: boolean;
-}>`
-  all: unset;
-  flex-grow: 1;
-  cursor: pointer;
-  width: 100%;
-  text-align: center;
+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);
-  white-space: nowrap;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xxs);
-  z-index: 2;
 
   transition:
     background-color 300ms ease-in-out,

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

@@ -105,15 +105,11 @@ export function Tabs({ children, className, size }: TabsProps): JSX.Element {
               setHighlightStyle({ left: offsetLeft, width: offsetWidth });
             }
 
-            const timeoutId = setTimeout(() => {
-              if (visibleTabs.includes(activeIndex)) {
-                activeTabElement?.classList.add('active');
-              }
-              setIsAnimating(false);
-            }, 300);
+            if (visibleTabs.includes(activeIndex)) {
+              activeTabElement?.classList.add('active');
+            }
 
             return () => {
-              clearTimeout(timeoutId);
               container.querySelectorAll('[data-label]').forEach((el) => {
                 el.classList.remove('active');
               });