@redocly/theme 0.55.0-next.0 → 0.55.0-next.2

package/lib/components/Footer/FooterItem.js

@@ -12,6 +12,7 @@ const Link_1 = require("../../components/Link/Link");
 const Image_1 = require("../../components/Image/Image");
 const utils_1 = require("../../core/utils");
 function FooterItem({ item, iconsOnly, className }) {
+    var _a, _b;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { translate } = useTranslate();
@@ -22,7 +23,9 @@ function FooterItem({ item, iconsOnly, className }) {
     const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
     return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.send({ type: 'footer_item.clicked' }), "data-translation-key": item.labelTranslationKey },
         hasIcon ? (react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly },
-            react_1.default.createElement(Image_1.Image, { src: item.icon, srcSet: item.srcSet }))) : null,
+            react_1.default.createElement(Image_1.Image, { src: item.icon, srcSet: item.srcSet, alt: item.label && item.label !== item.link
+                    ? `${item.label} icon`
+                    : `${(_b = (_a = (item.icon || item.srcSet)) === null || _a === void 0 ? void 0 : _a.split('/').pop()) === null || _b === void 0 ? void 0 : _b.split('.')[0]} icon` }))) : null,
         !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,
         item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "10px" }) : null))));
 }

package/lib/components/JsonViewer/JsonViewer.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { CodeBlockControlsProps } from '../../components/CodeBlock/CodeBlockControls';
+export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 export type JsonProps = {
     title?: CodeBlockControlsProps['title'];
     data: any;
@@ -8,6 +9,7 @@ export type JsonProps = {
     startLineNumber?: number;
     hideHeader?: boolean;
     onCopyClick?: () => void;
+    onPanelToggle?: (isExpanded: boolean, panelType?: PanelType) => void;
 };
 export declare const JsonViewer: React.NamedExoticComponent<JsonProps>;
 export declare const JsonViewerWrap: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/JsonViewer/JsonViewer.js

@@ -31,17 +31,19 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const helpers_1 = require("./helpers");
-function JsonComponent({ data, expandLevel = 1, className, onCopyClick, title, hideHeader, }) {
+function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, hideHeader, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
     const expandAll = () => {
         setExpandAllSignal(true);
+        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(true);
         setTimeout(() => {
             setExpandAllSignal(undefined);
         });
     };
     const collapseAll = () => {
         setExpandAllSignal(false);
+        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(false);
         setTimeout(() => {
             setExpandAllSignal(undefined);
         });

package/lib/components/Search/SearchTrigger.js

@@ -38,7 +38,8 @@ function SearchTrigger({ onClick, className }) {
     const themeSettings = (0, hooks_1.useThemeConfig)();
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'];
+    const defaultKeyShortcut = '⌘+K,CTRL+K';
+    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : [defaultKeyShortcut];
     let mainShortcutKey = null;
     if (keyShortcuts) {
         if (Array.isArray(keyShortcuts)) {
@@ -49,12 +50,13 @@ function SearchTrigger({ onClick, className }) {
         }
     }
     mainShortcutKey = mainShortcutKey === null || mainShortcutKey === void 0 ? void 0 : mainShortcutKey.toUpperCase();
+    const isMac = (0, utils_1.getUserAgent)().includes('Mac');
     return (React.createElement(SearchTriggerWrapper, { onClick: onClick, className: className, "data-component-name": "Search/SearchTrigger" },
         React.createElement(SearchTriggerButton, { "data-testid": "search-trigger-button", variant: "text", size: "medium", icon: React.createElement(SearchIcon_1.SearchIcon, null) }),
         React.createElement(SearchTriggerInput, { "data-testid": "search-trigger-input", "data-translation-key": "search.navbar.label" },
             React.createElement(SearchIcon_1.SearchIcon, null),
             translate('search.navbar.label', 'Search'),
-            mainShortcutKey && React.createElement("span", null, mainShortcutKey))));
+            mainShortcutKey === defaultKeyShortcut ? (React.createElement("span", null, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
 }
 const SearchTriggerWrapper = styled_components_1.default.div `
   color: var(--search-trigger-color);

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

@@ -36,3 +36,5 @@ export * from '../../core/hooks/code-walkthrough/use-renderable-files';
 export * from '../../core/hooks/use-element-size';
 export * from '../../core/hooks/use-time-ago';
 export * from '../../core/hooks/use-input-key-commands';
+export * from '../../core/hooks/use-page-active-version';
+export * from '../../core/hooks/use-page-versions';

package/lib/core/hooks/index.js

@@ -52,4 +52,6 @@ __exportStar(require("../../core/hooks/code-walkthrough/use-renderable-files"),
 __exportStar(require("../../core/hooks/use-element-size"), exports);
 __exportStar(require("../../core/hooks/use-time-ago"), exports);
 __exportStar(require("../../core/hooks/use-input-key-commands"), exports);
+__exportStar(require("../../core/hooks/use-page-active-version"), exports);
+__exportStar(require("../../core/hooks/use-page-versions"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/search/use-search-dialog.js

@@ -15,7 +15,7 @@ function useSearchDialog() {
     const location = (0, react_router_dom_1.useLocation)();
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'];
+    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['⌘+K,CTRL+K'];
     const hotKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
     (0, react_1.useEffect)(() => {
         if (hotKeys) {

package/lib/core/hooks/use-input-key-commands.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInputKeyCommands = useInputKeyCommands;
 const react_1 = require("react");
+const utils_1 = require("../../core/utils");
 function useInputKeyCommands(actionHandlers) {
     // MacOS uses Command key instead of Ctrl
-    const ctrlKey = (0, react_1.useMemo)(() => (navigator.userAgent.includes('Mac') ? 'metaKey' : 'ctrlKey'), []);
+    const ctrlKey = (0, react_1.useMemo)(() => ((0, utils_1.getUserAgent)().includes('Mac') ? 'metaKey' : 'ctrlKey'), []);
     const isSelectAll = (0, react_1.useCallback)((event) => {
         return event.key === 'a' && event[ctrlKey];
     }, [ctrlKey]);

package/lib/core/hooks/use-page-active-version.d.ts

@@ -0,0 +1 @@
+export declare function usePageActiveVersion(): string | undefined;

package/lib/core/hooks/use-page-active-version.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageActiveVersion = usePageActiveVersion;
+const hooks_1 = require("../../core/hooks");
+function usePageActiveVersion() {
+    const { usePageVersions } = (0, hooks_1.useThemeHooks)();
+    const { versions } = usePageVersions();
+    const activeVersion = versions.find((version) => version.active);
+    return activeVersion === null || activeVersion === void 0 ? void 0 : activeVersion.version;
+}
+//# sourceMappingURL=use-page-active-version.js.map

package/lib/core/hooks/use-page-versions.d.ts

@@ -0,0 +1,7 @@
+export type PageVersion = {
+    active: boolean;
+    default: boolean;
+    label: string;
+    version: string;
+};
+export declare function usePageVersions(): PageVersion[];

package/lib/core/hooks/use-page-versions.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageVersions = usePageVersions;
+const hooks_1 = require("../../core/hooks");
+function usePageVersions() {
+    const { usePageVersions } = (0, hooks_1.useThemeHooks)();
+    const pageVersions = usePageVersions();
+    return pageVersions.versions.map((version) => ({
+        active: version.active,
+        default: version.default,
+        label: version.label,
+        version: version.version,
+    }));
+}
+//# sourceMappingURL=use-page-versions.js.map

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewDetails' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description';
 export type Locale = {
     code: string;
     name: string;

package/lib/core/utils/get-user-agent.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns user agent. Handles SSR and browser.
+ */
+export declare function getUserAgent(): any;

package/lib/core/utils/get-user-agent.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUserAgent = getUserAgent;
+/**
+ * Returns user agent. Handles SSR and browser.
+ */
+function getUserAgent() {
+    const ssrUserAgent = globalThis['SSR_USER_AGENT'];
+    if (ssrUserAgent) {
+        return ssrUserAgent;
+    }
+    const browserUserAgent = typeof navigator !== 'undefined' ? navigator.userAgent : '';
+    return browserUserAgent;
+}
+//# sourceMappingURL=get-user-agent.js.map

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

@@ -31,3 +31,4 @@ export * from '../../core/utils/get-file-icon';
 export * from '../../core/utils/match-code-walkthrough-conditions';
 export * from '../../core/utils/replace-inputs-with-value';
 export * from '../../core/utils/find-closest-common-directory';
+export * from '../../core/utils/get-user-agent';

package/lib/core/utils/index.js

@@ -47,4 +47,5 @@ __exportStar(require("../../core/utils/get-file-icon"), exports);
 __exportStar(require("../../core/utils/match-code-walkthrough-conditions"), exports);
 __exportStar(require("../../core/utils/replace-inputs-with-value"), exports);
 __exportStar(require("../../core/utils/find-closest-common-directory"), exports);
+__exportStar(require("../../core/utils/get-user-agent"), exports);
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.55.0-next.0",
+  "version": "0.55.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -88,7 +88,7 @@
     "nprogress": "0.2.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.26.0",
+    "@redocly/config": "0.26.1",
     "@redocly/realm-asyncapi-sdk": "0.1.0-next.0"
   },
   "scripts": {

package/src/components/Footer/FooterItem.tsx

@@ -48,7 +48,15 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
         >
           {hasIcon ? (
             <FooterLinkIcon iconsOnly={iconsOnly}>
-              <Image src={item.icon} srcSet={item.srcSet} />
+              <Image
+                src={item.icon}
+                srcSet={item.srcSet}
+                alt={
+                  item.label && item.label !== item.link
+                    ? `${item.label} icon`
+                    : `${(item.icon || item.srcSet)?.split('/').pop()?.split('.')[0]} icon`
+                }
+              />
             </FooterLinkIcon>
           ) : null}
           {!iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null}

package/src/components/JsonViewer/JsonViewer.tsx

@@ -8,6 +8,8 @@ import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { JsonValue } from './helpers';
 
+export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
+
 export type JsonProps = {
   title?: CodeBlockControlsProps['title'];
   data: any;
@@ -16,6 +18,7 @@ export type JsonProps = {
   startLineNumber?: number;
   hideHeader?: boolean;
   onCopyClick?: () => void;
+  onPanelToggle?: (isExpanded: boolean, panelType?: PanelType) => void;
 };
 
 function JsonComponent({
@@ -23,6 +26,7 @@ function JsonComponent({
   expandLevel = 1,
   className,
   onCopyClick,
+  onPanelToggle,
   title,
   hideHeader,
 }: JsonProps): JSX.Element {
@@ -33,6 +37,7 @@ function JsonComponent({
 
   const expandAll = () => {
     setExpandAllSignal(true);
+    onPanelToggle?.(true);
     setTimeout(() => {
       setExpandAllSignal(undefined);
     });
@@ -40,6 +45,7 @@ function JsonComponent({
 
   const collapseAll = () => {
     setExpandAllSignal(false);
+    onPanelToggle?.(false);
     setTimeout(() => {
       setExpandAllSignal(undefined);
     });

package/src/components/Search/SearchTrigger.tsx

@@ -6,7 +6,7 @@ import type { JSX } from 'react';
 import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getUserAgent } from '@redocly/theme/core/utils';
 
 export type SearchTriggerProps = {
   onClick: () => void;
@@ -18,7 +18,8 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
-  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
+  const defaultKeyShortcut = '⌘+K,CTRL+K';
+  const keyShortcuts = themeSettings?.search?.shortcuts ?? [defaultKeyShortcut];
   let mainShortcutKey: string | null | undefined = null;
 
   if (keyShortcuts) {
@@ -30,6 +31,7 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
   }
 
   mainShortcutKey = mainShortcutKey?.toUpperCase();
+  const isMac = getUserAgent().includes('Mac');
 
   return (
     <SearchTriggerWrapper
@@ -49,7 +51,11 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
       >
         <SearchIcon />
         {translate('search.navbar.label', 'Search')}
-        {mainShortcutKey && <span>{mainShortcutKey}</span>}
+        {mainShortcutKey === defaultKeyShortcut ? (
+          <span>{isMac ? '⌘K' : 'Ctrl+K'}</span>
+        ) : (
+          <span>{mainShortcutKey}</span>
+        )}
       </SearchTriggerInput>
     </SearchTriggerWrapper>
   );

package/src/core/hooks/index.ts

@@ -36,3 +36,5 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';
 export * from '@redocly/theme/core/hooks/use-element-size';
 export * from '@redocly/theme/core/hooks/use-time-ago';
 export * from '@redocly/theme/core/hooks/use-input-key-commands';
+export * from '@redocly/theme/core/hooks/use-page-active-version';
+export * from '@redocly/theme/core/hooks/use-page-versions';

package/src/core/hooks/search/use-search-dialog.ts

@@ -10,7 +10,7 @@ export function useSearchDialog() {
   const location = useLocation();
   const { useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
-  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
+  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['⌘+K,CTRL+K'];
   const hotKeys = keyShortcuts?.join(',');
 
   useEffect(() => {

package/src/core/hooks/use-input-key-commands.ts

@@ -1,5 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
+import { getUserAgent } from '@redocly/theme/core/utils';
+
 type Action = 'selectAll' | 'escape' | 'clear' | 'enter' | 'paste';
 type ActionHandlers = {
   [key in `on${Capitalize<Action>}`]?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -11,7 +13,7 @@ type KeyboardCommand = {
 
 export function useInputKeyCommands(actionHandlers?: ActionHandlers) {
   // MacOS uses Command key instead of Ctrl
-  const ctrlKey = useMemo(() => (navigator.userAgent.includes('Mac') ? 'metaKey' : 'ctrlKey'), []);
+  const ctrlKey = useMemo(() => (getUserAgent().includes('Mac') ? 'metaKey' : 'ctrlKey'), []);
 
   const isSelectAll = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {

package/src/core/hooks/use-page-active-version.ts

@@ -0,0 +1,9 @@
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export function usePageActiveVersion(): string | undefined {
+  const { usePageVersions } = useThemeHooks();
+  const { versions } = usePageVersions();
+  const activeVersion = versions.find((version) => version.active);
+
+  return activeVersion?.version;
+}

package/src/core/hooks/use-page-versions.ts

@@ -0,0 +1,20 @@
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type PageVersion = {
+  active: boolean;
+  default: boolean;
+  label: string;
+  version: string;
+};
+
+export function usePageVersions(): PageVersion[] {
+  const { usePageVersions } = useThemeHooks();
+  const pageVersions = usePageVersions();
+
+  return pageVersions.versions.map((version) => ({
+    active: version.active,
+    default: version.default,
+    label: version.label,
+    version: version.version,
+  }));
+}

package/src/core/types/l10n.ts

@@ -214,7 +214,7 @@ export type TranslationKey =
   | 'openapi.showExample'
   | 'openapi.expandAll'
   | 'openapi.collapseAll'
-  | 'openapi.viewDetails'
+  | 'openapi.viewSecurityDetails'
   | 'openapi.noResponseExample'
   | 'openapi.noResponseContent'
   | 'openapi.noRequestPayload'

package/src/core/utils/get-user-agent.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns user agent. Handles SSR and browser.
+ */
+export function getUserAgent() {
+  const ssrUserAgent = (globalThis as any)['SSR_USER_AGENT'];
+
+  if (ssrUserAgent) {
+    return ssrUserAgent;
+  }
+  const browserUserAgent = typeof navigator !== 'undefined' ? navigator.userAgent : '';
+
+  return browserUserAgent;
+}

package/src/core/utils/index.ts

@@ -31,3 +31,4 @@ export * from '@redocly/theme/core/utils/get-file-icon';
 export * from '@redocly/theme/core/utils/match-code-walkthrough-conditions';
 export * from '@redocly/theme/core/utils/replace-inputs-with-value';
 export * from '@redocly/theme/core/utils/find-closest-common-directory';
+export * from '@redocly/theme/core/utils/get-user-agent';

package/src/settings.yaml

@@ -1,6 +1,7 @@
 search:
   hide: false
   placement: navbar
+  shortcuts: ['⌘+K,ctrl+K']
 toc:
   hide: false
   header: