@redocly/theme 0.63.0-next.4 → 0.63.0-next.6

package/lib/core/utils/custom-catalog-options-casing.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customCatalogOptionsCasing = customCatalogOptionsCasing;
+/**
+ * Converts a string to title case for catalog option labels.
+ * Splits on whitespace, hyphens, and underscores; capitalizes each word.
+ * The first word is rendered as "API" when it is "api" (case-insensitive).
+ *
+ * @param str - The raw string to format (e.g. from config or entity data).
+ * @returns The formatted label with words capitalized and joined by spaces.
+ *
+ * @example
+ * customCatalogOptionsCasing('api_spec')           // 'API Spec'
+ * customCatalogOptionsCasing('my-custom-option')  // 'My Custom Option'
+ * customCatalogOptionsCasing('user name')         // 'User Name'
+ * customCatalogOptionsCasing('  api   version  ') // 'API Version'
+ */
+function customCatalogOptionsCasing(str) {
+    const trimmedStr = str.trim();
+    if (!trimmedStr)
+        return trimmedStr;
+    const words = trimmedStr.split(/[\s-_]+/);
+    return words
+        .map((word, index) => {
+        if (index === 0 && word.toLowerCase() === 'api') {
+            return 'API';
+        }
+        return word[0].toUpperCase() + word.slice(1);
+    })
+        .join(' ');
+}
+//# sourceMappingURL=custom-catalog-options-casing.js.map

package/lib/core/utils/index.d.ts

@@ -44,3 +44,4 @@ export * from './frontmatter-translate';
 export * from './transform-revisions-to-version-history';
 export * from './build-revision-url';
 export * from './content-segments';
+export * from './custom-catalog-options-casing';

package/lib/core/utils/index.js

@@ -60,4 +60,5 @@ __exportStar(require("./frontmatter-translate"), exports);
 __exportStar(require("./transform-revisions-to-version-history"), exports);
 __exportStar(require("./build-revision-url"), exports);
 __exportStar(require("./content-segments"), exports);
+__exportStar(require("./custom-catalog-options-casing"), exports);
 //# sourceMappingURL=index.js.map

package/lib/index.d.ts

@@ -30,6 +30,7 @@ export * from './components/Buttons/CopyButton';
 export * from './components/Buttons/EditPageButton';
 export * from './components/Buttons/EmailButton';
 export * from './components/Buttons/NewTabButton';
+export * from './components/Buttons/DownloadButton';
 export * from './components/Buttons/AIAssistantButton';
 export * from './components/Markdown/Markdown';
 export * from './components/Markdown/styles/base-table';

package/lib/index.js

@@ -70,6 +70,7 @@ __exportStar(require("./components/Buttons/CopyButton"), exports);
 __exportStar(require("./components/Buttons/EditPageButton"), exports);
 __exportStar(require("./components/Buttons/EmailButton"), exports);
 __exportStar(require("./components/Buttons/NewTabButton"), exports);
+__exportStar(require("./components/Buttons/DownloadButton"), exports);
 __exportStar(require("./components/Buttons/AIAssistantButton"), exports);
 /* Markdown */
 __exportStar(require("./components/Markdown/Markdown"), exports);

package/lib/markdoc/components/MarkdocExample/MarkdocExample.js

@@ -46,9 +46,9 @@ function MarkdocExample(props) {
     return (React.createElement("div", { "data-component-name": "Markdoc/MarkdocExample/MarkdocExample" },
         renderLabels ? React.createElement(Label, null, codeLabel ? codeLabel : 'Code:') : null,
         React.createElement(CodeBlock_1.CodeBlock, { lang: language, source: rawContent, header: { title, controls: { copy: {} } } }),
-        renderDemo ? (React.createElement(React.Fragment, null,
+        renderDemo ? React.createElement(React.Fragment, null,
             renderLabels ? React.createElement(Label, null, resultLabel ? resultLabel : 'Result:') : null,
-            ...demoContent)) : null));
+            ...demoContent) : null));
 }
 const Label = styled_components_1.default.div `
   margin: 10px 0;

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

@@ -17,9 +17,8 @@ type TabsProps = {
     className?: string;
     size: TabsSize;
     initialTab?: string;
-    forceReady?: boolean;
     activeTab?: string;
 };
-export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady, activeTab: controlledActiveTab, }: TabsProps): JSX.Element;
+export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab, }: 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,15 @@ 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,33 +49,24 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady = false, activeTab: controlledActiveTab, }) {
+function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab, }) {
     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 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, externalActiveTab: controlledActiveTab }));
+    return (react_1.default.createElement(TabsView, { id: id, className: className, size: size, childrenArray: childrenArray, initialTab: initialTab, useActiveTab: inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter, labelsHash: labelsHash, containerRef: containerRef, externalActiveTab: controlledActiveTab }));
 }
-function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, isReady, labelsHash, containerRef, onReadyChange, externalActiveTab, }) {
+function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, labelsHash, containerRef, externalActiveTab, }) {
     const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
     (0, react_1.useEffect)(() => {
         if (externalActiveTab && externalActiveTab !== activeTab) {
             setActiveTab(externalActiveTab);
         }
     }, [externalActiveTab, activeTab, setActiveTab]);
-    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 }),
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id },
+        react_1.default.createElement(TabList_1.TabList, { key: labelsHash, size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab, containerRef: containerRef }),
         childrenArray.map((child, index) => {
             const { label } = child.props;
             const tabId = (0, utils_1.getTabId)(label, index);
@@ -123,13 +117,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.63.0-next.4",
+  "version": "0.63.0-next.6",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.9.0-next.3"
+    "@redocly/realm-asyncapi-sdk": "0.9.0-next.5"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -78,10 +78,10 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.7.0",
+    "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.44.0"
+    "@redocly/config": "0.44.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Accordion/variables.ts

@@ -28,7 +28,7 @@ export const accordion = css`
   --accordion-header-font-size: var(--font-size-base); // @presenter FontSize
   --accordion-header-font-weight: var(--font-weight-medium, 500); // @presenter FontWeight
   --accordion-header-text-color: var(--text-color-primary);
-  --accordion-header-padding: var(--spacing-sm) var(--spacing-base);
+  --accordion-header-padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-base);
   --accordion-header-line-height: var(--line-height-base); // @presenter LineHeight
   --accordion-header-bg-color: transparent; // @presenter Color
   --accordion-header-border: none; // @presenter Border
@@ -41,7 +41,7 @@ export const accordion = css`
   --accordion-body-font-size: var(--font-size-base); // @presenter FontSize
   --accordion-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --accordion-body-text-color: var(--text-color-secondary);
-  --accordion-body-padding: 0 var(--spacing-xs) var(--spacing-sm);
+  --accordion-body-padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-base);
   --accordion-body-bg-color: transparent; // @presenter Color
   --accordion-body-border: none; // @presenter Border
 

package/src/components/Buttons/DownloadButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { DownloadIcon } from '@redocly/theme/icons/DownloadIcon/DownloadIcon';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type DownloadButtonProps = {
+  data: string;
+  dataTestId?: string;
+};
+
+export function DownloadButton({
+  data,
+  dataTestId = 'download-button',
+}: DownloadButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  return (
+    <div data-component-name="Buttons/DownloadButton">
+      <Tooltip
+        tip={translate('button.download.tooltipText', 'Download description')}
+        placement="top"
+        arrowPosition="right"
+      >
+        <a href={data} target="_blank" download rel="noreferrer">
+          <Button
+            variant="text"
+            size="small"
+            aria-label="Download"
+            icon={<DownloadIcon />}
+            data-testid={dataTestId}
+          />
+        </a>
+      </Tooltip>
+    </div>
+  );
+}

package/src/components/Buttons/EmailButton.tsx

@@ -4,6 +4,8 @@ import type { JSX } from 'react';
 
 import { Button } from '@redocly/theme/components/Button/Button';
 import { EmailIcon } from '@redocly/theme/icons/EmailIcon/EmailIcon';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type EmailButtonProps = {
   data: string;
@@ -11,20 +13,28 @@ export type EmailButtonProps = {
 };
 
 export function EmailButton({ data, dataTestId = 'email-button' }: EmailButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
   const onClick = () => {
     window.location.href = `mailto:${data}`;
   };
 
   return (
     <div data-component-name="Buttons/EmailButton">
-      <Button
-        onClick={onClick}
-        icon={<EmailIcon />}
-        size="small"
-        variant="text"
-        data-testid={dataTestId}
-        aria-label="Email"
-      />
+      <Tooltip
+        tip={translate('button.email.tooltipText', 'Send email')}
+        placement="top"
+        arrowPosition="right"
+      >
+        <Button
+          onClick={onClick}
+          icon={<EmailIcon />}
+          size="small"
+          variant="text"
+          data-testid={dataTestId}
+          aria-label="Email"
+        />
+      </Tooltip>
     </div>
   );
 }

package/src/components/Buttons/NewTabButton.tsx

@@ -4,6 +4,8 @@ import type { JSX } from 'react';
 
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type NewTabButtonProps = {
   data: string;
@@ -14,20 +16,29 @@ export function NewTabButton({
   data,
   dataTestId = 'new-tab-button',
 }: NewTabButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const onClick = () => {
     window.open(data, '_blank');
   };
 
   return (
     <div data-component-name="Buttons/NewTabButton">
-      <Button
-        onClick={onClick}
-        icon={<ArrowUpRightIcon />}
-        data-testid={dataTestId}
-        aria-label="Open in new tab"
-        size="small"
-        variant="text"
-      />
+      <Tooltip
+        tip={translate('button.externalLink.tooltipText', 'Open in new tab')}
+        placement="top"
+        arrowPosition="right"
+      >
+        <Button
+          onClick={onClick}
+          icon={<ArrowUpRightIcon />}
+          data-testid={dataTestId}
+          aria-label="Open in new tab"
+          size="small"
+          variant="text"
+        />
+      </Tooltip>
     </div>
   );
 }