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

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

@@ -44,144 +44,47 @@ const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuIte
 const Button_1 = require("../../../components/Button/Button");
 const hooks_1 = require("../../../core/hooks");
 const utils_1 = require("../../../core/utils");
-/**
- * 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, dropdownRect) => {
-    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, dropdownRef) => {
-    const [dropdownPosition, setDropdownPosition] = (0, react_1.useState)({});
-    const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
-    const updateDropdownPosition = (0, react_1.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.getBoundingClientRect();
-        const position = calculateDropdownPosition(buttonRect, dropdownRect);
-        setDropdownPosition(position);
-    }, [dropdownRef]);
-    // Track when dropdown menu appears and recalculate position
-    (0, react_1.useEffect)(() => {
-        if (!hasOverflow || !isDropdownOpen || !dropdownRef.current)
-            return;
-        const dropdownMenu = dropdownRef.current.querySelector('div:last-child');
-        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
-    (0, react_1.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, index, size, setTabRef, handleKeyboard, onTabClick) => {
-    const { label, icon } = child.props;
-    const tabId = (0, utils_1.getTabId)(label, index);
-    return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => setTabRef(el, index), onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
-            var _a, _b;
-            (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-            onTabClick(label);
-        } }));
-};
-function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, onReadyChange, }) {
-    const dropdownRef = (0, react_1.useRef)(null);
-    const totalTabs = childrenArray.length;
-    const { overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef, isReady } = (0, hooks_1.useTabs)({
+function TabList({ childrenArray, size, activeTab, onTabChange, }) {
+    const tabsContainerRef = (0, react_1.useRef)(null);
+    const { allTabsHidden, overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef } = (0, hooks_1.useTabs)({
         activeTab,
         onTabChange,
-        containerRef,
-        totalTabs,
+        containerRef: tabsContainerRef,
+        totalTabs: childrenArray.length,
     });
-    (0, react_1.useEffect)(() => {
-        onReadyChange === null || onReadyChange === void 0 ? void 0 : onReadyChange(isReady);
-    }, [isReady, onReadyChange]);
     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 (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: containerRef },
+    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef },
         react_1.default.createElement(HighlightBar, { size: size, style: highlightStyle },
             react_1.default.createElement("div", null)),
         childrenArray.map((child, index) => {
-            // Show all tabs before ready (for measurement), then only visible ones
-            const shouldRender = !isReady || visibleTabs.includes(index);
-            if (!shouldRender)
+            if (!visibleTabs.includes(index))
                 return null;
-            return renderTab(child, index, size, setTabRef, handleKeyboard, onTabClick);
+            const { label, icon } = child.props;
+            const tabId = (0, utils_1.getTabId)(label, index);
+            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => setTabRef(el, index), onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
+                    var _a, _b;
+                    (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    onTabClick(label);
+                } }));
         }),
-        hasOverflow && (react_1.default.createElement(exports.TabItem, { size: size, active: isMoreActive || showAsSelector, tabIndex: 0, className: "dropdown-tab" },
-            react_1.default.createElement(DropdownWrapper, { "$top": dropdownPosition.top, "$left": dropdownPosition.left, onClickCapture: () => {
-                    setIsDropdownOpen(true);
-                } },
-                react_1.default.createElement(FixedPositionDropdown, { ref: dropdownRef, trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: isMoreActive || showAsSelector ? 'active' : undefined }, showAsSelector ? react_1.default.createElement(TabButtonText, null, activeTab) : 'More'), alignment: "start", withArrow: true, onClose: () => {
-                        setIsDropdownOpen(false);
-                        setDropdownPosition({});
-                    } },
-                    react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
-                        const child = childrenArray[index];
-                        if (!child)
-                            return null;
-                        const { label } = child.props;
-                        const tabId = (0, utils_1.getTabId)(label, index);
-                        return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
-                                var _a, _b;
-                                (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                                onTabClick(index);
-                            }, disabled: child.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 = (0, utils_1.getTabId)(label, index);
+                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
+                        var _a, _b;
+                        (_b = (_a = childrenArray[index].props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                        onTabClick(index);
+                    }, disabled: childrenArray[index].props.disable }, label));
+            })))))));
 }
 const useHighlightBarAnimation = (props) => {
     const { childrenArray, activeTab, tabsContainerRef, visibleTabs, overflowTabs } = props;
@@ -196,11 +99,18 @@ const useHighlightBarAnimation = (props) => {
             setHighlightStyle({ left: 0, width: 0 });
             return;
         }
-        // Remove active class from all tabs first
+        const activeTabElement = 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)
@@ -213,16 +123,6 @@ const useHighlightBarAnimation = (props) => {
             });
             return;
         }
-        // Active tab is visible, find its element
-        const activeTabElement = 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 };
 };
@@ -232,11 +132,15 @@ exports.TabListContainer = styled_components_1.default.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;
@@ -244,17 +148,11 @@ exports.TabListContainer = styled_components_1.default.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;
     }
   }
 `;
@@ -264,7 +162,7 @@ exports.TabItem = styled_components_1.default.li `
   cursor: pointer;
   align-items: center;
   padding: var(--md-tabs-tab-wrapper-padding);
-  z-index: var(--z-index-surface);
+  z-index: 1;
 
   ${({ active, size }) => active
     ? (0, styled_components_1.css) `
@@ -301,46 +199,6 @@ exports.TabItem = styled_components_1.default.li `
     }
   }
 `;
-const DropdownWrapper = styled_components_1.default.div.attrs((props) => ({
-    style: Object.assign(Object.assign({}, (props.$top !== undefined && { '--dropdown-top': `${props.$top}px` })), (props.$left !== undefined && { '--dropdown-left': `${props.$left}px` })),
-})) `
-  position: static;
-  z-index: var(--z-index-raised);
-  width: 100%;
-  min-width: 0;
-`;
-const FixedPositionDropdown = (0, styled_components_1.default)(Dropdown_1.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_components_1.default.div `
   position: absolute;
   top: 0;
@@ -360,19 +218,11 @@ const HighlightBar = styled_components_1.default.div `
     border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
   }
 `;
-const TabButtonText = styled_components_1.default.span `
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-`;
 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);
-  width: 100%;
 
   transition:
     background-color 300ms ease-in-out,
@@ -391,9 +241,9 @@ exports.TabButtonLink = (0, styled_components_1.default)(Button_1.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);
@@ -403,12 +253,12 @@ exports.TabButtonLink = (0, styled_components_1.default)(Button_1.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);
   }

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

@@ -17,8 +17,7 @@ type TabsProps = {
     className?: string;
     size: TabsSize;
     initialTab?: string;
-    forceReady?: boolean;
 };
-export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady, }: TabsProps): JSX.Element;
+export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, }: TabsProps): JSX.Element;
 export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -32,12 +32,14 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabContent = exports.TabsSize = void 0;
 exports.Tabs = Tabs;
 const react_1 = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
 const utils_1 = require("../../../core/utils");
@@ -46,62 +48,22 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady = false, }) {
+function Tabs({ id, children, className, size, initialTab: propInitialTab, }) {
     var _a, _b;
-    const childrenArray = react_1.default.Children.toArray(children);
-    const [isReady, setIsReady] = (0, react_1.useState)(false);
-    const containerRef = (0, react_1.useRef)(null);
+    const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
     const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
-    const labelsHash = childrenArray.map((c) => c.props.label).join('|');
-    const handleReadyChange = (0, react_1.useCallback)((ready) => {
-        setIsReady(ready);
-    }, []);
-    // Reset isReady when children change (new page/tabs)
-    // Use useLayoutEffect to run synchronously before paint
-    (0, react_1.useLayoutEffect)(() => {
-        setIsReady(false);
-    }, [labelsHash]);
-    const inRouter = (0, react_router_dom_1.useInRouterContext)();
-    return (react_1.default.createElement(TabsView, { id: id, className: className, size: size, childrenArray: childrenArray, initialTab: initialTab, useActiveTab: inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter, isReady: isReady || forceReady, labelsHash: labelsHash, containerRef: containerRef, onReadyChange: handleReadyChange }));
-}
-function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, isReady, labelsHash, containerRef, onReadyChange, }) {
-    const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id, "$isReady": isReady },
-        react_1.default.createElement(TabList_1.TabList, { key: labelsHash, size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab, containerRef: containerRef, onReadyChange: onReadyChange }),
+    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ tabsId: id, initialTab });
+    (0, react_1.useEffect)(() => {
+        setChildrenArray(react_1.default.Children.toArray(children));
+    }, [children]);
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id },
+        react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab }),
         childrenArray.map((child, index) => {
             const { label } = child.props;
             const tabId = (0, utils_1.getTabId)(label, index);
             return label === activeTab ? (react_1.default.createElement(exports.TabContent, { key: `content-${tabId}`, id: `panel-${tabId}`, "aria-labelledby": `tab-${tabId}`, tabIndex: 0, role: "tabpanel" }, child.props.children)) : null;
         })));
 }
-/**
- * Validates that the active tab exists in children and resets to initial tab if not found.
- * Ensures tab state remains consistent when tab structure changes.
- */
-function useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab) {
-    (0, react_1.useEffect)(() => {
-        const availableLabels = childrenArray.map((child) => child.props.label);
-        if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
-            setActiveTab(initialTab);
-        }
-    }, [childrenArray, activeTab, initialTab, setActiveTab]);
-}
-const useActiveTabWithRouter = (initialTab, tabsId, childrenArray) => {
-    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ initialTab, tabsId });
-    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
-    return {
-        activeTab,
-        setActiveTab,
-    };
-};
-const useActiveTabWithoutRouter = (initialTab, _tabsId, childrenArray) => {
-    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
-    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
-    return {
-        activeTab,
-        setActiveTab,
-    };
-};
 const TabsContainer = styled_components_1.default.div `
   position: relative;
   color: var(--md-tabs-container-text-color);
@@ -118,13 +80,6 @@ const TabsContainer = styled_components_1.default.div `
     margin: 0;
     padding: 0;
   }
-
-  ${({ $isReady }) => !$isReady &&
-    (0, styled_components_1.css) `
-      opacity: 0;
-      pointer-events: none;
-      overflow: hidden;
-    `}
 `;
 exports.TabContent = styled_components_1.default.div `
   color: var(--md-tabs-content-text-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-next.2",
+  "version": "0.59.0-rc.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -84,10 +84,10 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.2",
+    "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.36.0",
+    "@redocly/config": "0.36.0-rc.1",
     "@redocly/realm-asyncapi-sdk": "0.5.0-next.0"
   },
   "scripts": {

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -74,7 +74,7 @@ export function CatalogEntityTeamRelations({
 }: CatalogEntityTeamRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
-      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+      <Tabs size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             key="members-table"

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -23,7 +23,11 @@ export function CatalogTagsWithTooltip({
     if (showPlaceholder) {
       return (
         <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
+          <Tag
+            variant="outline"
+            style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }}
+            color="grey"
+          >
             N/A
           </Tag>
         </CatalogTagsWrapper>