@redocly/openapi-docs 3.10.0-next.6 → 3.10.0-next.8

package/lib-esm/components/Security/SecurityButton.js

@@ -1,28 +1,31 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecurityIcon}from"@redocly/theme";export function SecurityButton({securities:e,onClick:t}){return _jsxs(StyledButton,{onClick:t,children:[_jsx(SecurityIcon,{}),_jsx(Title,{children:"Security:"}),_jsx(SecurityList,{children:e.map((t=>{const i=e.length>1&&t.schemes.length>1;return`\n          ${i?"(":""}\n          ${t.schemes.map((({id:e})=>e)).join(" and ")}\n          ${i?")":""}\n          `})).join(" or ")})]})}const StyledButton=styled.button`
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecurityIcon,Panel,Button}from"@redocly/theme";import{Fragment}from"react";import{useTranslate}from"../../hooks";export function SecurityButton({securities:e,onClick:r}){const t=useTranslate();return _jsx(SecurityPanel,{header:()=>_jsxs(SecurityHeader,{children:[_jsx(SecurityIcon,{}),_jsx(Title,{children:"Security"}),_jsx(ViewDetailsButton,{onClick:r,variant:"link",children:t("openapi.viewDetails","View details")})]}),isExpandable:!1,children:_jsx(SecurityList,{children:e.map(((r,t)=>{const i=e.length>1&&r.schemes.length>1,n=r.schemes.map((({id:e},t)=>_jsxs(Fragment,{children:[e,t<r.schemes.length-1&&_jsx(Conjunction,{children:" and "})]},e)));return _jsxs(Fragment,{children:[i?"(":"",n,i?")":"",t<e.length-1&&_jsx(Conjunction,{children:" or "})]},t)}))})})}const SecurityPanel=styled(Panel)`
+  margin-top: var(--spacing-base);
+  border: var(--panel-border);
+  border-radius: var(--panel-border-radius);
+`,SecurityHeader=styled.div`
   display: flex;
   align-items: center;
-  align-self: flex-start;
-  gap: var(--spacing-xxs);
-  min-height: 32px;
-  background: var(--color-info-bg);
-  padding: 0 var(--spacing-xs);
-  margin-top: var(--spacing-base);
+  justify-content: space-between;
+  gap: var(--spacing-xs);
   color: var(--link-color-primary);
-  border: none;
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  line-height: var(--line-height-base);
-  border-radius: var(--border-radius-md);
-  max-width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background-color: var(--layer-color);
+  border-bottom: var(--panel-border);
+  border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
+`,ViewDetailsButton=styled(Button)`
+  margin-left: auto;
+  font-size: var(--font-size-sm);
 `,Title=styled.span`
-  font-family: var(--font-family-monospaced);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: -0.5px;
-`,SecurityList=styled.span`
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-color-primary);
+`,SecurityList=styled.div`
   flex: 1;
-  cursor: pointer;
-  white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  color: var(--text-color-primary);
+`,Conjunction=styled.span`
+  color: var(--text-color-description);
 `;
 //# sourceMappingURL=SecurityButton.js.map

package/lib-esm/components/Security/SecurityFlow.js

@@ -1,4 +1,4 @@
-import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecuritySchemeItem}from"./SecuritySchemeItem";import{titleize}from"../../utils";import{OAuthFlow}from"./OAuthFlow";import{StyledLink,Tag}from"./styled";import{Markdown}from"../Markdown";import{getRequiredScopes}from"./helper";import{useTranslate}from"../../hooks";export function SecurityFlow({type:e,bearerFormat:r,name:t,flows:a,openIdConnectUrl:o,description:i,id:s,securities:n,in:l}){const m=useTranslate();if(!e||!s)return null;const p=getRequiredScopes(s,n),c={http:_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:m("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:e}),_jsx(SecuritySchemeItem,{label:m("openapi.bearerFormat","Bearer Format"),value:r})]}),apiKey:_jsx(SecuritySchemeItem,{label:`${titleize(l||"")} ${m("openapi.parameterName","parameter name")}:`,value:t}),oauth2:_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:m("openapi.flowType","Flow type"),value:e}),a&&Object.keys(a).map((e=>_jsx(OAuthFlow,{flow:a[e]},e)))]}),openIdConnect:_jsx(SecuritySchemeItem,{label:m("openapi.connectUrl","Connect URL"),value:o&&_jsx(StyledLink,{target:"_blank",rel:"noopener noreferrer",href:o,children:o})})};return _jsxs(Wrapper,{children:[_jsx(TitleSchema,{children:s}),_jsx(Markdown,{source:i}),_jsxs(List,{children:[c[e]||null,_jsx(SecuritySchemeItem,{label:m("openapi.requiredScopes","Required scopes"),value:p.length&&_jsx(Row,{children:p.map((e=>_jsx(Tag,{className:"tag-grey",children:e},e)))})})]})]})}const Wrapper=styled.div`
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecuritySchemeItem}from"./SecuritySchemeItem";import{titleize}from"../../utils";import{OAuthFlow}from"./OAuthFlow";import{StyledLink}from"./styled";import{Markdown}from"../Markdown";import{useTranslate}from"../../hooks";import{OAuthRequiredScopes,OAuthOptionalScopes}from"./OAuthScopes";export function SecurityFlow({type:e,bearerFormat:r,name:t,flows:o,openIdConnectUrl:a,description:i,id:s,securities:n,in:l}){const m=useTranslate();if(!e||!s)return null;const c={http:_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:m("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:e}),_jsx(SecuritySchemeItem,{label:m("openapi.bearerFormat","Bearer Format"),value:r})]}),apiKey:_jsx(SecuritySchemeItem,{label:`${titleize(l||"")} ${m("openapi.parameterName","parameter name")}:`,value:t}),oauth2:_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:m("openapi.flowType","Flow type"),value:e}),o&&Object.keys(o).map((e=>_jsx(OAuthFlow,{flow:o[e]},e)))]}),openIdConnect:_jsx(SecuritySchemeItem,{label:m("openapi.connectUrl","Connect URL"),value:a&&_jsx(StyledLink,{target:"_blank",rel:"noopener noreferrer",href:a,children:a})})},p=o&&Object.keys(o).map((e=>_jsx(OAuthRequiredScopes,{id:s,securities:n,flow:o[e]},e))),d=o&&Object.keys(o).map((e=>_jsx(OAuthOptionalScopes,{flow:o[e]},e)));return _jsxs(Wrapper,{children:[_jsx(TitleSchema,{children:s}),_jsx(Markdown,{source:i}),_jsxs(List,{children:[c[e]||null,p,d]})]})}const Wrapper=styled.div`
   background: var(--layer-color);
   padding: var(--spacing-base);
   border-radius: var(--border-radius);
@@ -8,11 +8,6 @@ import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";i
 `,List=styled.div`
   width: 100%;
   margin-top: var(--spacing-md);
-`,Row=styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xxs);
-  word-break: normal;
 `,TitleSchema=styled.p`
   font-size: var(--font-size-base);
   margin: 0 0 var(--spacing-xs);

package/lib-esm/components/Security/SecuritySchemeItem.js

@@ -2,7 +2,7 @@ import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styl
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  margin-bottom: var(--spacing-xxs);
+  margin-bottom: var(--spacing-xs);
   font-size: var(--font-size-sm);
   color: var(--text-color-secondary);
 `,Label=styled.div`

package/lib-esm/components/ServerListDropdown/ServerListDropdown.js

@@ -1,2 +1,2 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useCallback}from"react";import{Dropdown,DropdownMenu}from"@redocly/theme";import{useAtom}from"jotai";import{HttpVerb}from"../common";import{PathWrapper,Path,StyledCopyButton,StyledDropdownMenuItem}from"./styled";import{PanelItem}from"../PanelItem";import{joinWithSeparator}from"../../services";import{replaceVariables}from"../../utils";import{environmentAtom}from"../../jotai/app";import{useActiveWithFallback,useOtelTelemetry}from"../../hooks";import{getServerEnvName}from"../../utils/environments";export const ServerListDropdown=({operation:e,className:r})=>{const t=useOtelTelemetry(),[[o],s]=useAtom(environmentAtom),a=useActiveWithFallback(e.servers.map((e=>Object.assign(Object.assign({},e),{key:e.url}))),o.server),n=useCallback((e=>{e.stopPropagation()}),[]),i=useCallback((r=>()=>{1!==e.servers.length&&(s({environment:getServerEnvName(r)}),t.send("openapi_docs.switch_servers.clicked",{server:getServerEnvName(r)}))}),[e.servers.length,s,t]),m=useMemo((()=>e.servers.map((r=>{const t=joinWithSeparator(replaceVariables(r),e.path);return _jsx(StyledDropdownMenuItem,{onAction:i(r),children:_jsx(PanelItem,{header:r.description,title:t,actions:[_jsx(StyledCopyButton,{data:t,toasterPlacement:"left",onCopyClick:n},t)],active:r.url===a,withCheckmark:!0})},t)}))),[e.servers,e.path,i,n,a]);return _jsx(Dropdown,{className:r,trigger:_jsxs(PathWrapper,{variant:"ghost",children:[_jsx(HttpVerb,{color:e.httpVerb,children:e.httpVerb}),_jsx(Path,{children:e.path})]}),withArrow:!0,children:_jsx(DropdownMenu,{children:m})})};
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useCallback}from"react";import{Dropdown,DropdownMenu}from"@redocly/theme";import{useAtom}from"jotai";import{HttpVerb}from"../common";import{PathWrapper,Path,StyledCopyButton,StyledDropdownMenuItem}from"./styled";import{PanelItem}from"../PanelItem";import{joinWithSeparator}from"../../services";import{replaceVariables}from"../../utils";import{environmentAtom}from"../../jotai/app";import{useActiveWithFallback,useOtelTelemetry}from"../../hooks";import{getServerEnvName}from"../../utils/environments";export const ServerListDropdown=({operation:e,className:r})=>{const t=useOtelTelemetry(),[[o],s]=useAtom(environmentAtom),a=useActiveWithFallback(e.servers.map((e=>Object.assign(Object.assign({},e),{key:e.url}))),o.server),n=useCallback((e=>{e.stopPropagation()}),[]),i=useCallback((r=>()=>{1!==e.servers.length&&(s({environment:getServerEnvName(r)}),t.send({type:"openapi_docs.switch_servers.clicked",payload:{server:getServerEnvName(r)}}))}),[e.servers.length,s,t]),m=useMemo((()=>e.servers.map((r=>{const t=joinWithSeparator(replaceVariables(r),e.path);return _jsx(StyledDropdownMenuItem,{onAction:i(r),children:_jsx(PanelItem,{header:r.description,title:t,actions:[_jsx(StyledCopyButton,{data:t,toasterPlacement:"left",onCopyClick:n},t)],active:r.url===a,withCheckmark:!0})},t)}))),[e.servers,e.path,i,n,a]);return _jsx(Dropdown,{className:r,trigger:_jsxs(PathWrapper,{variant:"ghost",children:[_jsx(HttpVerb,{color:e.httpVerb,children:e.httpVerb}),_jsx(Path,{children:e.path})]}),withArrow:!0,children:_jsx(DropdownMenu,{children:m})})};
 //# sourceMappingURL=ServerListDropdown.js.map

package/lib-esm/hooks/useOtelTelemetry.d.ts

@@ -1,3 +1,2 @@
-export declare function useOtelTelemetry(): {
-    send(action: "error" | "page.viewed" | "search.ai.query" | "search.query" | "feedback.sent" | "search.result.clicked" | "openapi_docs.viewed" | "openapi_docs.performance_metrics" | "openapi_docs.download_definition.clicked" | "openapi_docs.select_language.clicked" | "openapi_docs.expand_collapse_all.clicked" | "openapi_docs.copy_code_snippet.clicked" | "openapi_docs.switch_servers.clicked" | "openapi_docs.examples_switcher.clicked" | "openapi_docs.try_it.opened" | "asyncapi_docs.performance_metrics" | "asyncapi_docs.viewed" | "asyncapi_docs.switch_message.clicked" | "asyncapi_docs.switch_example.clicked" | "asyncapi_docs.message.clicked", data: unknown): void;
-};
+import { useThemeHooks } from '@redocly/theme';
+export declare function useOtelTelemetry(): ReturnType<ReturnType<typeof useThemeHooks>['useOtelTelemetry']>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/openapi-docs",
-  "version": "3.10.0-next.6",
+  "version": "3.10.0-next.8",
   "description": "Redocly OpenAPI Docs",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -45,8 +45,8 @@
     "url-template": "^2.0.8",
     "util": "~0.12.5",
     "web-vitals": "3.3.1",
-    "@redocly/config": "0.24.1",
-    "@redocly/replay": "0.13.0-next.5"
+    "@redocly/config": "0.25.0",
+    "@redocly/replay": "0.13.0-next.7"
   },
   "devDependencies": {
     "@shikijs/transformers": "1.24.0",
@@ -92,7 +92,7 @@
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",
-    "@redocly/theme": "0.54.0-next.5"
+    "@redocly/theme": "0.54.0-next.7"
   },
   "scripts": {
     "start": "npm run copy-highlight-hook && webpack serve --mode=development --hot",