@redocly/theme 0.58.0 → 0.59.0-next.0

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

@@ -22,101 +22,35 @@ 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.TabContent = exports.TabsSize = void 0;
 exports.Tabs = Tabs;
 const react_1 = __importStar(require("react"));
-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");
 var TabsSize;
 (function (TabsSize) {
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ children, className, size, forceReady = false, initialTab: propInitialTab, }) {
+function Tabs({ id, children, className, size, initialTab: propInitialTab, }) {
     var _a, _b;
     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 { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ tabsId: id, initialTab });
     (0, react_1.useEffect)(() => {
         setChildrenArray(react_1.default.Children.toArray(children));
     }, [children]);
-    const tabsContainerRef = (0, react_1.useRef)(null);
-    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
-    const defaultInitialTab = (_b = (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
-    const initialTab = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : defaultInitialTab;
-    const { activeTab, setTabRef, onTabClick, handleKeyboard, getTabId, visibleTabs, overflowTabs, ready, allTabsHidden, } = (0, hooks_1.useTabs)({
-        initialTab,
-        totalTabs: childrenArray.length,
-        containerRef: tabsContainerRef,
-    });
-    const [prevTab, setPrevTab] = react_1.default.useState(initialTab);
-    const [highlightStyle, setHighlightStyle] = react_1.default.useState({
-        left: 0,
-        width: 0,
-    });
-    (0, react_1.useEffect)(() => {
-        setPrevTab(activeTab);
-        setIsAnimating(true);
-        const activeIndex = childrenArray.findIndex((child) => child.props.label === activeTab);
-        const container = tabsContainerRef.current;
-        if (container) {
-            container.querySelectorAll('[data-label]').forEach((el) => {
-                el.classList.remove('active');
-            });
-            container.getBoundingClientRect();
-            requestAnimationFrame(() => {
-                if (activeIndex >= 0) {
-                    let activeTabElement = null;
-                    let startPosition = { left: 0, width: 0 };
-                    if (visibleTabs.includes(activeIndex)) {
-                        activeTabElement = container.querySelector(`[data-label="${activeTab}"]`);
-                    }
-                    else if (overflowTabs.includes(activeIndex)) {
-                        const moreButton = container.querySelector('button');
-                        if (moreButton) {
-                            const moreButtonRect = moreButton.getBoundingClientRect();
-                            const containerRect = container.getBoundingClientRect();
-                            startPosition = {
-                                left: moreButtonRect.left - containerRect.left,
-                                width: moreButtonRect.width,
-                            };
-                        }
-                    }
-                    if (activeTabElement) {
-                        const { offsetLeft, offsetWidth } = activeTabElement;
-                        if (overflowTabs.includes(activeIndex)) {
-                            setHighlightStyle(startPosition);
-                            requestAnimationFrame(() => {
-                                setHighlightStyle({ left: offsetLeft, width: offsetWidth });
-                            });
-                        }
-                        else {
-                            setHighlightStyle({ left: offsetLeft, width: offsetWidth });
-                        }
-                        if (visibleTabs.includes(activeIndex)) {
-                            activeTabElement === null || activeTabElement === void 0 ? void 0 : activeTabElement.classList.add('active');
-                        }
-                        return () => {
-                            container.querySelectorAll('[data-label]').forEach((el) => {
-                                el.classList.remove('active');
-                            });
-                        };
-                    }
-                }
-                setHighlightStyle({ left: 0, width: 0 });
-                setIsAnimating(false);
-            });
-        }
-        else {
-            setHighlightStyle({ left: 0, width: 0 });
-            setIsAnimating(false);
-        }
-    }, [activeTab, prevTab, childrenArray, visibleTabs, overflowTabs]);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, isReady: ready || forceReady },
-        react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, overflowTabs: overflowTabs, setTabRef: setTabRef, onTabClick: onTabClick, handleKeyboard: handleKeyboard, getTabId: getTabId, activeTab: activeTab, isAnimating: isAnimating, highlightStyle: highlightStyle, visibleTabs: visibleTabs, allTabsHidden: allTabsHidden, tabsContainerRef: tabsContainerRef }),
+    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 = getTabId(label, index);
+            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;
         })));
 }
@@ -132,16 +66,6 @@ const TabsContainer = styled_components_1.default.div `
   padding: var(--md-tabs-container-padding);
   border: var(--md-tabs-container-border);
 
-  ${({ isReady }) => !isReady
-    ? (0, styled_components_1.css) `
-          visibility: hidden;
-          overflow: hidden;
-        `
-    : (0, styled_components_1.css) `
-          visibility: visible;
-          overflow: visible;
-        `}
-
   ol[class^='Tabs__TabList'] {
     margin: 0;
     padding: 0;

package/lib/markdoc/tags/tabs.js

@@ -22,6 +22,11 @@ exports.tabs = {
             return new markdoc_1.default.Tag('Tabs', attributes, tabsContent);
         },
         attributes: {
+            /*
+              A unique persistent identifier assigned to a component.
+              This value is used as a key for the query parameter that stores the active tab to enable deep linking.
+            */
+            id: { type: String },
             size: { type: String, matches: ['small', 'medium'], default: 'medium' },
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.58.0",
+  "version": "0.59.0-next.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,8 +87,8 @@
     "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/realm-asyncapi-sdk": "0.4.0",
-    "@redocly/config": "0.35.1"
+    "@redocly/config": "0.35.1",
+    "@redocly/realm-asyncapi-sdk": "0.5.0-next.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

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/Panel/variables.ts

@@ -329,6 +329,7 @@ export const apiReferencePanels = css`
   .panel-language-list,
   .panel-overview,
   .panel-download,
+  .panel-mcp-overview,
   .panel-servers-list,
   .panel-request-samples,
   .panel-response-samples,

package/src/components/Tag/Tag.tsx

@@ -26,13 +26,16 @@ type Color =
   | 'green'
   | 'blue'
   | 'grey'
-  | 'gold'
-  | 'cyan'
+  | 'turquoise'
   | 'magenta'
   | 'purple'
-  | 'lime'
-  | 'geekblue'
-  | 'yellow';
+  | 'carrot'
+  | 'raspberry'
+  | 'orange'
+  | 'grass'
+  | 'persian-green'
+  | 'sky'
+  | 'blueberry';
 
 export type TagProps = {
   className?: string;
@@ -52,6 +55,7 @@ export type TagProps = {
   onClose?: (event: React.MouseEvent) => void;
   maxLength?: number;
   textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+  variant?: 'outline' | 'filled';
 };
 
 export function Tag({
@@ -70,6 +74,7 @@ export function Tag({
   statusDotColor = 'var(--tag-status-dot-color-default)',
   maxLength,
   textTransform,
+  variant = 'filled',
   ...otherProps
 }: TagProps): JSX.Element {
   const truncateText = (text: string, maxLen: number): string => {
@@ -146,6 +151,7 @@ export function Tag({
       onKeyDown={onKeyDown}
       hasCloseButton={closable}
       textTransform={textTransform}
+      variant={variant}
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
@@ -221,12 +227,31 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
     `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
-  background-color: var(--tag-bg-color);
-  ${({ borderless }) =>
+  background-color: ${({ variant }) =>
+    variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
+  ${({ borderless, variant }) =>
     borderless
       ? ''
-      : 'border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);'}
+      : `border: var(--tag-border-width) var(--tag-border-style) ${variant === 'filled' ? 'transparent' : 'var(--tag-border-color)'};`}
   border-radius: var(--tag-border-radius);
+
+  svg {
+    width: var(--tag-icon-width);
+    height: var(--tag-icon-height);
+  }
+
+  &:hover {
+    background-color: ${({ variant }) =>
+      variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
+    border-color: ${({ variant }) =>
+      variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--tag-border-color-focused);
+    outline-offset: 2px;
+    border-radius: var(--tag-border-radius-focused);
+  }
 `;
 
 const StatusDot = styled.div<{ color: string }>`

package/src/components/Tag/variables.dark.ts

@@ -1,6 +1,9 @@
 import { css } from 'styled-components';
 
 export const tagDarkMode = css`
+  --tag-border-color-focused: var(--color-blue-8); // @presenter Color
+  --tag-badge-border-color: var(--border-color-secondary);
+
   --tag-operation-color-delete: #fa82a2; // @presenter Color
   --tag-operation-bg-color-delete: #77214C; // @presenter Color
 
@@ -39,6 +42,138 @@ export const tagDarkMode = css`
   .tag-draft,
   .tag-schema,
   .tag-default {
+    --tag-color: var(--color-warm-grey-8); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
+  }
+
+  .tag-red {
+    --tag-color: var(--color-red-7); // @presenter Color
+    --tag-bg-color: var(--color-red-1); // @presenter Color
+    --tag-border-color: var(--color-red-8); // @presenter Color
+    --tag-border-color-hover: var(--color-red-6); // @presenter Color
+  }
+
+  .tag-green {
+    --tag-color: var(--color-green-6); // @presenter Color
+    --tag-bg-color: var(--color-green-1); // @presenter Color
+    --tag-border-color: var(--color-green-3); // @presenter Color
+    --tag-border-color-hover: var(--color-green-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-green-2); // @presenter Color
+  }
+
+  .tag-blue {
+    --tag-color: var(--color-blue-7); // @presenter Color
+    --tag-bg-color: var(--color-blue-1); // @presenter Color
+    --tag-border-color-hover: var(--color-blue-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-blue-2); // @presenter Color
+  }
+
+  .tag-magenta,
+  .tag-hook { 
+    --tag-color: var(--color-magenta-4); // @presenter Color
+    --tag-bg-color: var(--color-magenta-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-magenta-2); // @presenter Color
+  }
+
+  .tag-purple,
+  .tag-head {
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-bg-color: var(--color-purple-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
+    --tag-border-color-hover: var(--color-purple-5); // @presenter Color
+  }
+
+  .tag-carrot {
+    --tag-color: var(--color-carrot-6); // @presenter Color
+    --tag-bg-color: var(--color-carrot-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
+    --tag-border-color: var(--color-carrot-4); // @presenter Color
+  }
+
+  .tag-raspberry {
+    --tag-color: var(--color-raspberry-7); // @presenter Color
+    --tag-bg-color: var(--color-raspberry-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-raspberry-2); // @presenter Color
+  }
+
+  .tag-orange {
+    --tag-color: var(--color-orange-7); // @presenter Color
+    --tag-bg-color: var(--color-orange-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
+    --tag-border-color: var(--color-orange-3); // @presenter Color
+    --tag-border-color-hover: var(--color-orange-5); // @presenter Color
+  }
+
+  .tag-grass {
+    --tag-bg-color: var(--color-grass-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-grass-2); // @presenter Color
+    --tag-color: var(--color-grass-7); // @presenter Color
+    --tag-border-color: var(--color-grass-3); // @presenter Color
+    --tag-border-color-hover: var(--color-grass-5); // @presenter Color
+  }
+
+  .tag-persian-green {
+    --tag-color: var(--color-persian-green-7); // @presenter Color
+    --tag-bg-color: var(--color-persian-green-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
+    --tag-border-color: var(--color-persian-green-3); // @presenter Color
+    --tag-border-color-hover: var(--color-persian-green-5); // @presenter Color
+  }
+
+  .tag-turquoise,
+  .tag-option {
+    --tag-color: var(--color-turquoise-6); // @presenter Color
+    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
+    --tag-border-color: var(--color-turquoise-4); // @presenter Color
+  }
+
+  .tag-sky {
+    --tag-color: var(--color-sky-6); // @presenter Color
+    --tag-bg-color: var(--color-sky-1); // @presenter Color
+    --tag-border-color: var(--color-sky-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-sky-2); // @presenter Color
+  }
+
+  .tag-blueberry {
+    --tag-color: var(--color-blueberry-7); // @presenter Color
+    --tag-bg-color: var(--color-blueberry-1); // @presenter Color
+    --tag-border-color-hover: var(--color-blueberry-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-blueberry-2); // @presenter Color
+  }
+
+  .tag-warning,
+  .tag-deprecated {
+    --tag-color: var(--color-warning-active); // @presenter Color
+    --tag-bg-color: var(--color-warning-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
+  }
+
+  .tag-processing,
+  .tag-info {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-bg-color: var(--color-info-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+  }
+
+  .tag-error,
+  .tag-declined {
+    --tag-color: var(--color-error-active); // @presenter Color
+    --tag-bg-color: var(--color-error-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
+  }
+
+  .tag-success,
+  .tag-approved  {
+    --tag-color: var(--color-success-active); // @presenter Color
+    --tag-bg-color: var(--color-success-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
+  }
+
+  .tag-link {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-bg-color: var(--color-info-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
   }
 `;