@redocly/openapi-docs 3.17.1 → 3.18.0-custom.1

package/lib/components/Schema/types.d.ts

@@ -12,7 +12,6 @@ export interface SchemaOptions {
 export interface SchemaProps extends SchemaOptions {
     schema: SchemaModel;
     parentType?: string[] | string;
-    onDiscriminatorChange?: (idx: number) => void;
     onOneOfChange?: (params: OneOfChangeParams) => void;
     fieldParentsName?: string[];
     expandable?: boolean;
@@ -23,12 +22,11 @@ export interface SchemaProps extends SchemaOptions {
     oneOfLevel?: number;
     shouldCloseArray?: boolean;
 }
-export interface ObjectSchemaProps extends Omit<SchemaProps, 'onDiscriminatorChange'> {
+export interface ObjectSchemaProps extends SchemaProps {
     discriminator?: {
         fieldName: string;
         parentSchema: SchemaModel;
         activeOneOfIdx: number;
-        onChange?: (idx: number) => void;
     };
     fieldParentsName?: string[];
     expandable?: boolean;

package/lib/components/SchemaDefinition/SchemaDefinition.js

@@ -1,3 +1,6 @@
-import{jsx as o,jsxs as S}from"react/jsx-runtime";import{memo as C,useCallback as M,useMemo as k}from"react";import{LayoutVariant as A}from"@redocly/config";import{useAtom as j,useAtomValue as x}from"jotai";import{useWriteAtom as T}from"../../jotai/use-write-atom.js";import{SamplesMiddlePanel as D,SamplesPanel as E,Row as N,Section as b,CodeBlockPanel as P}from"../common/index.js";import{getMediaType as w}from"../../models/index.js";import{MediaTypeSamples as I}from"../PayloadSamples/index.js";import{Schema as L}from"../Schema/index.js";import{Markdown as V}from"../Markdown/index.js";import{layoutAtom as W}from"../../jotai/app.js";import{globalStoreAtom as _}from"../../jotai/store.js";import{operationStore as O}from"../../jotai/operation.js";import{styled as $}from"../../styled-components.js";import{SchemaCatalogLink as B}from"../SchemaCatalogLink/SchemaCatalogLink.js";const K=(t,i)=>{if(!t)return{};const n={schema:{$ref:t}};return i&&(n.examples={example:{$ref:i}}),n};function q({schemaRef:t,exampleRef:i,showReadOnly:n=!0,showWriteOnly:v=!1}){const s=x(W),{parser:c,options:p}=x(_),l=T(),e=k(()=>w(c,"json",!1,K(t,i),p,{operation:{pointer:"SchemaDefinitionComponent"}}),[i,p,c,t]),[f,d]=j(O(e.operation?.pointer)),y=M(r=>{if(!e.schema)return;const a=e.schema,u=a.oneOf;if(u&&e?.examples&&Object.keys(e?.examples).includes(r)){const m=u.findIndex(g=>g.title===r);m!==-1&&a&&l(O(a.operationPointer),{activeExampleName:a.oneOf?.[m]?.title,activeOneOf:{[a.pointer]:m}})}f.activeExampleName!==r&&d({activeExampleName:r})},[e?.examples,e.schema,f.activeExampleName,d,l]),h=s===A.STACKED;return o(b,{children:S(N,{layout:s,children:[S(D,{isStacked:h,children:[t&&o(B,{schemaRef:t}),e.schema?.description&&o(z,{children:o(V,{source:e.schema?.description})}),o(L,{skipWriteOnly:!v,skipReadOnly:!n,schema:e.schema,level:1})]}),o(E,{isStacked:h,children:o(P,{className:"panel-response-samples",children:o(I,{mediaType:e,onChange:y})})})]})})}const ne=C(q),z=$.div`
+import{jsx as o,jsxs as S}from"react/jsx-runtime";import{memo as C,useCallback as k,useMemo as A}from"react";import{LayoutVariant as j}from"@redocly/config";import{useAtom as D,useAtomValue as x}from"jotai";import{useWriteAtom as N}from"../../jotai/use-write-atom.js";import{SamplesMiddlePanel as T,SamplesPanel as E,Row as P,Section as b,CodeBlockPanel as w}from"../common/index.js";import{getMediaType as I}from"../../models/index.js";import{MediaTypeSamples as L}from"../PayloadSamples/index.js";import{Schema as V}from"../Schema/index.js";import{Markdown as W}from"../Markdown/index.js";import{layoutAtom as _}from"../../jotai/app.js";import{globalStoreAtom as $}from"../../jotai/store.js";import{operationStore as O}from"../../jotai/operation.js";import{styled as g}from"../../styled-components.js";import{SchemaCatalogLink as B}from"../SchemaCatalogLink/SchemaCatalogLink.js";const K=(t,i)=>{if(!t)return{};const n={schema:{$ref:t}};return i&&(n.examples={example:{$ref:i}}),n};function q({schemaRef:t,exampleRef:i,showReadOnly:n=!0,showWriteOnly:v=!1}){const s=x(_),{parser:c,options:p}=x($),l=N(),e=A(()=>I(c,"json",!1,K(t,i),p,{operation:{pointer:"SchemaDefinitionComponent"}}),[i,p,c,t]),[d,f]=D(O(e.operation?.pointer)),y=k(r=>{if(!e.schema)return;const a=e.schema,u=a.oneOf;if(u&&e?.examples&&Object.keys(e?.examples).includes(r)){const m=u.findIndex(M=>M.title===r);m!==-1&&a&&l(O(a.operationPointer),{activeExampleName:a.oneOf?.[m]?.title,activeOneOf:{[a.pointer]:m}})}d.activeExampleName!==r&&f({activeExampleName:r})},[e?.examples,e.schema,d.activeExampleName,f,l]),h=s===j.STACKED;return o(b,{className:"schema-definition",children:S(P,{layout:s,children:[S(F,{isStacked:h,children:[t&&o(B,{schemaRef:t}),e.schema?.description&&o(z,{children:o(W,{source:e.schema?.description})}),o(V,{skipWriteOnly:!v,skipReadOnly:!n,schema:e.schema,level:1})]}),o(E,{isStacked:h,children:o(w,{className:"panel-response-samples",children:o(L,{mediaType:e,onChange:y})})})]})})}const re=C(q),z=g.div`
   margin-bottom: var(--spacing-vertical);
-`;export{ne as SchemaDefinition};
+`,F=g(T)`
+  padding-left: 0;
+  padding-right: 0;
+`;export{re as SchemaDefinition};

package/lib/components/SectionContent/SectionContent.js

@@ -1,13 +1,15 @@
-import{jsx as t,jsxs as s,Fragment as x}from"react/jsx-runtime";import{useMemo as p}from"react";import{useAtomValue as d}from"jotai";import{LayoutVariant as c}from"@redocly/config";import{breakpoints as k}from"@redocly/theme/core/openapi";import{OpenApiHeader as u}from"@redocly/theme/components/OpenApiDocs/hooks/OpenApiHeader";import{PageFooter as v}from"../PageFooter/index.js";import{globalOptionsAtom as b}from"../../jotai/store.js";import{RenderHook as y}from"../RenderHook/index.js";import{RightPanel as C}from"../RightPanel/index.js";import{layoutAtom as w}from"../../jotai/app.js";import{Row as B,SamplesMiddlePanel as j,SamplesPanel as M}from"../common/index.js";import{Items as f}from"../ContentItems/Items.js";import{ContentItem as g}from"../ContentItem/index.js";import{styled as m}from"../../styled-components.js";function G({items:e,hideFooterAndHeader:n}){const{unstable_hooks:{MiddlePanelHeader:a},routingBasePath:i}=d(b),l=d(w),o=l===c.STACKED,P=p(()=>n?null:t(h,{isStacked:o,children:t(v,{})}),[n,o]),S=p(()=>n||!u&&!a?null:t(h,{isStacked:o,children:a?t(y,{Hook:a,props:void 0}):t(u,{})}),[a,n,o]);return e.length===0?null:s(x,{children:[S,s(B,{layout:l,children:[t(R,{layout:l,children:e.filter(({type:r})=>r==="section").map(r=>t(g,{item:r,routingBasePath:i,children:t(f,{items:r.items,routingBasePath:i})},r.id))}),t(_,{isStacked:o,tabIndex:0,children:t(C,{item:e[0]})})]}),e.filter(({type:r})=>r!=="section").map(r=>t(g,{item:r,routingBasePath:i,children:t(f,{items:r.items,routingBasePath:i})},r.id)),P]})}const h=m(j)`
+import{jsx as t,jsxs as m,Fragment as v}from"react/jsx-runtime";import{useMemo as p}from"react";import{useAtomValue as d}from"jotai";import{LayoutVariant as c}from"@redocly/config";import{breakpoints as S}from"@redocly/theme/core/openapi";import{OpenApiHeader as u}from"@redocly/theme/components/OpenApiDocs/hooks/OpenApiHeader";import{PageFooter as k}from"../PageFooter/index.js";import{globalOptionsAtom as b}from"../../jotai/store.js";import{RenderHook as w}from"../RenderHook/index.js";import{RightPanel as y}from"../RightPanel/index.js";import{layoutAtom as C}from"../../jotai/app.js";import{Row as B,SamplesMiddlePanel as R,SamplesPanel as j}from"../common/index.js";import{Items as f}from"../ContentItems/Items.js";import{ContentItem as g}from"../ContentItem/index.js";import{styled as l}from"../../styled-components.js";function J({items:e,hideFooterAndHeader:n}){const{unstable_hooks:{MiddlePanelHeader:a},routingBasePath:i}=d(b),s=d(C),o=s===c.STACKED,P=p(()=>n?null:t(h,{isStacked:o,children:t(k,{})}),[n,o]),x=p(()=>n||!u&&!a?null:t(h,{isStacked:o,children:a?t(w,{Hook:a,props:void 0}):t(u,{})}),[a,n,o]);return e.length===0?null:m(v,{children:[x,m(_,{layout:s,style:{zIndex:1},children:[t(I,{layout:s,children:e.filter(({type:r})=>r==="section").map(r=>t(g,{item:r,routingBasePath:i,children:t(f,{items:r.items,routingBasePath:i})},r.id))}),t(M,{isStacked:o,tabIndex:0,children:t(y,{item:e[0]})})]}),e.filter(({type:r})=>r!=="section").map(r=>t(g,{item:r,routingBasePath:i,children:t(f,{items:r.items,routingBasePath:i})},r.id)),P]})}const h=l(R)`
   align-self: flex-start;
   padding-top: var(--panel-gap-vertical);
   padding-bottom: var(--panel-gap-vertical);
-`,R=m.div`
+`,I=l.div`
   width: 100%;
 
-  @media screen and (min-width: ${k.large}) {
+  @media screen and (min-width: ${S.large}) {
     width: ${({layout:e})=>e===c.STACKED?"100%":"calc(100% - var(--panel-samples-width))"};
   }
-`,_=m(M)`
+`,M=l(j)`
   margin: var(--spacing-base) 0;
-`;export{_ as RightPanelContainer,R as SectionContainer,G as SectionContent};
+`,_=l(B)`
+  padding-bottom: var(--spacing-xl);
+`;export{M as RightPanelContainer,I as SectionContainer,J as SectionContent};

package/lib/components/SectionItem/SectionItem.js

@@ -1 +1 @@
-import{jsx as t,Fragment as l,jsxs as p}from"react/jsx-runtime";import{memo as d}from"react";import{LayoutVariant as u}from"@redocly/config";import{SamplesMiddlePanel as a,Row as f}from"../common/index.js";import{Markdown as h}from"../Markdown/index.js";import{ExternalDocumentation as x}from"../ExternalDocumentation/index.js";function S({item:o,layout:s}){const{externalDocs:r,ast:c,description:i}=o,e=s===u.STACKED,n=!o.parent||o.parent.type!=="tag";return p(l,{children:[t(h,{ast:c,source:i,htmlWrap:m=>t(a,{compact:!0,fullWidth:n,isStacked:e,children:m})}),r&&t(f,{children:t(a,{compact:!0,fullWidth:n,isStacked:e,children:t(x,{externalDocs:r})})})]})}const _=d(S);export{_ as SectionItem};
+import{jsx as t,Fragment as l,jsxs as p}from"react/jsx-runtime";import{memo as d}from"react";import{LayoutVariant as f}from"@redocly/config";import{SamplesMiddlePanel as a,Row as u}from"../common/index.js";import{Markdown as h}from"../Markdown/index.js";import{ExternalDocumentation as x}from"../ExternalDocumentation/index.js";function S({item:o,layout:s}){const{externalDocs:r,ast:i,description:c}=o,e=s===f.STACKED,n=!o.parent||o.parent.type!=="tag";return p(l,{children:[t(h,{ast:i,source:c,htmlWrap:m=>t(a,{fullWidth:n,isStacked:e,children:m})}),r&&t(u,{children:t(a,{compact:!0,fullWidth:n,isStacked:e,children:t(x,{externalDocs:r})})})]})}const _=d(S);export{_ as SectionItem};

package/lib/components/Security/OAuthScopes.d.ts

@@ -1,11 +1,11 @@
 import type { PropsWithChildren } from 'react';
-import type { OpenAPISecurityScheme } from '../../types/index.js';
 import type { SecurityRequirement } from '../../models/index.js';
-type Flow = OpenAPISecurityScheme['flows'];
+import type { OAuth2Flow, OAuth2Flows } from '../../types/index.js';
 interface OAuthScopesMainProps {
     id: string;
     securities: SecurityRequirement[];
-    flows?: Flow;
+    flow?: OAuth2Flow;
+    flows?: OAuth2Flows;
 }
 export declare const OAuthScopes: import("react").NamedExoticComponent<PropsWithChildren<OAuthScopesMainProps>>;
 export {};

package/lib/components/Security/OAuthScopes.js

@@ -1,33 +1,34 @@
-import{jsx as r,Fragment as p,jsxs as c}from"react/jsx-runtime";import{memo as S,useState as v}from"react";import{ChevronRightIcon as b}from"@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon";import{Markdown as d}from"../Markdown/index.js";import{SecuritySchemeItem as a}from"./SecuritySchemeItem.js";import{Tag as m}from"./styled.js";import{useTranslate as l}from"../../hooks/index.js";import{getOptionalScopes as O,getRequiredScopes as x}from"./helper.js";import{styled as i}from"../../styled-components.js";function y({id:e,securities:t,flows:n}){const o=x(e,t);return c(p,{children:[r(w,{flows:n,requiredScopes:o}),r(q,{flows:n,requiredScopes:o})]})}function q({flows:e,requiredScopes:t}){return e&&Object.keys(e).map(n=>r(j,{flow:e[n],requiredScopes:t},n))}function j({flow:e,requiredScopes:t}){const n=l(),[o,h]=v(!1),f=Object.keys(e?.scopes||{}),u=O(t,f);return u.length===0?null:c(p,{children:[r(a,{label:c(A,{onClick:()=>{h(s=>!s)},children:[n(o?"openapi.hideOptionalScopes":"openapi.showOptionalScopes",o?"Hide optional scopes":"Show optional scopes"),r(C,{isOpen:o,children:r(b,{size:"var(--font-size-base)",color:"var(--tree-content-color-default)"})})]}),value:" "}),r(z,{isOpen:o,children:u.map(s=>r(a,{label:r(g,{className:"tag-grey",children:s}),value:r(d,{source:e?.scopes[s]||""})},s))})]})}function w({requiredScopes:e,flows:t}){const n=l();return e.length===0?null:t&&Object.keys(t).length>0?Object.keys(t).map(o=>r(k,{flow:t[o],requiredScopes:e},o)):r(a,{label:n("openapi.requiredScopes","Required scopes"),value:r(R,{children:e.map(o=>r(m,{className:"tag-grey",children:o},o))})})}function k({flow:e,requiredScopes:t}){const n=l();return c(p,{children:[r(a,{label:n("openapi.requiredScopes","Required scopes"),value:" "}),t.map(o=>r(a,{label:r(g,{className:"tag-grey",children:o}),value:r(d,{source:e?.scopes[o]||""})},o))]})}const g=i(m)`
+import{jsx as o,jsxs as c,Fragment as g}from"react/jsx-runtime";import{memo as f,useState as u}from"react";import{ChevronRightIcon as S}from"@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon";import{Markdown as h}from"../Markdown/index.js";import{SecuritySchemeItem as l}from"./SecuritySchemeItem.js";import{Tag as v}from"./styled.js";import{useTranslate as x}from"../../hooks/index.js";import{getOptionalScopes as y,getRequiredScopes as O}from"./helper.js";import{styled as t}from"../../styled-components.js";import{ScopeTagWithTooltip as b}from"./ScopeTagWithTooltip.js";import{RequiredScopesList as w}from"./RequiredScopesList.js";import{normalizeScopes as C}from"../../utils/security-scope.js";const j=24;function q({id:e,securities:n,flow:a,flows:r}){const i=O(e,n);return a?o(z,{flow:a,requiredScopes:i}):o(I,{children:o(w,{schemeId:e,securities:n,flows:r})})}function z({flow:e,requiredScopes:n}){const a=x(),[r,i]=u(!1),m=Object.keys(e.scopes||{}),d=C(n),p=y(d,m);return p.length===0?null:c(g,{children:[o(l,{label:c(R,{onClick:()=>{i(s=>!s)},children:[a(r?"openapi.hideOptionalScopes":"openapi.showOptionalScopes",r?"Hide optional scopes":"Show optional scopes"),o(_,{isOpen:r,children:o(S,{size:"var(--font-size-base)",color:"var(--tree-content-color-default)"})})]}),value:" "}),o(T,{isOpen:r,children:p.map(s=>o(l,{label:o(b,{className:"tag-grey",text:s,maxChars:j,TagComponent:A,compact:!0}),value:o(W,{children:o(h,{source:e.scopes[s]||""})})},s))})]})}const A=t(v)`
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
-  line-height: var(--line-height-base);
   align-self: flex-start;
   padding: 0 var(--spacing-xs);
   border: var(--tag-border-width) var(--tag-border-style) var(--tag-bg-color);
   border-radius: var(--tag-border-radius);
-`,A=i.div`
+  color: var(--color-warm-grey-8);
+`,R=t.div`
   cursor: pointer;
   display: flex;
   gap: var(--spacing-xxs);
   align-items: center;
   user-select: none;
-`,R=i.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xxs);
-  word-break: normal;
-`,z=i.div`
+`,T=t.div`
   max-height: ${e=>e.isOpen?"1000px":"0"};
   opacity: ${e=>e.isOpen?"1":"0"};
   overflow: hidden;
   transition:
     max-height 0.5s ease-in-out,
     opacity 0.5s ease-in-out;
-`,C=i.span`
+`,_=t.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transform: ${e=>e.isOpen?"rotate(90deg)":"rotate(0deg)"};
   transition: transform 0.5s ease-in-out;
-`,B=S(y);export{B as OAuthScopes};
+`,I=t.div`
+  margin-top: var(--spacing-xs);
+`,W=t.div`
+  p {
+    margin-bottom: 0;
+  }
+`,G=f(q);export{G as OAuthScopes};

package/lib/components/Security/RequiredScopes.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement } from 'react';
+interface RequiredScopesProps {
+    scopes?: string[];
+}
+export declare function RequiredScopes({ scopes }: RequiredScopesProps): ReactElement | null;
+export {};

package/lib/components/Security/RequiredScopes.js

@@ -0,0 +1,17 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{styled as o}from"../../styled-components.js";import{normalizeScopes as m}from"../../utils/security-scope.js";import{useTranslate as g}from"../../hooks/index.js";import{ScopeTagWithTooltip as c}from"./ScopeTagWithTooltip.js";const l=4,S=32;function j({scopes:d}){const t=g(),s=m(d);if(s.length===0)return null;const h=s.slice(0,l),a=s.slice(l),n=a.length;return r(x,{children:[e(p,{children:"("}),r(u,{children:[t("openapi.requiredScopes","Required scopes"),":"," "]}),r(f,{children:[h.map(i=>e(c,{className:"tag-grey",text:i,maxChars:S},i)),n>0&&e(c,{arrowPosition:"left",className:"tag-grey",text:`+${n}`,tip:e(v,{children:a.map(i=>e("div",{children:i},i))}),ariaLabel:t("openapi.showMoreScopes",`Show ${n} more scopes`)})]}),e(p,{children:")"})]})}const x=o.span`
+  display: inline;
+  margin-left: var(--spacing-xxs);
+`,u=o.span`
+  color: var(--color-warm-grey-8);
+  line-height: var(--line-height-base);
+`,f=o.span`
+  display: inline;
+  padding: 0 var(--spacing-xxs);
+`,v=o.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+`,p=o.span`
+  color: var(--text-color-description);
+  line-height: var(--line-height-base);
+`;export{j as RequiredScopes};

package/lib/components/Security/RequiredScopesList.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react';
+import type { SecurityRequirement } from '../../models/index.js';
+import type { OAuth2Flows } from '../../types/index.js';
+interface RequiredScopesListProps {
+    schemeId: string;
+    securities: SecurityRequirement[];
+    flows?: OAuth2Flows;
+    TagComponent?: ComponentType<{
+        className?: string;
+        children: ReactNode;
+    }>;
+}
+export declare function RequiredScopesList({ schemeId, securities, flows, TagComponent, }: RequiredScopesListProps): ReactElement | null;
+export {};

package/lib/components/Security/RequiredScopesList.js

@@ -0,0 +1,13 @@
+import{jsx as r,Fragment as g,jsxs as u}from"react/jsx-runtime";import{SecuritySchemeItem as s}from"./SecuritySchemeItem.js";import{useTranslate as f}from"../../hooks/index.js";import{getRequiredScopes as S}from"./helper.js";import{normalizeScopes as b,buildScopeDescriptionIndex as v}from"../../utils/security-scope.js";import{ScopeTagWithTooltip as x}from"./ScopeTagWithTooltip.js";import{Tag as h}from"./styled.js";import{Markdown as y}from"../Markdown/index.js";import{styled as i}from"../../styled-components.js";const T=24;function A({schemeId:n,securities:m,flows:o,TagComponent:c=q}){const p=f(),l=S(n,m),t=b(l);if(t.length===0)return null;const a=o?v(o):null,d=!!a;return u(g,{children:[r(s,{label:p("openapi.requiredScopes","Required scopes"),value:" "}),t.map(e=>r(s,{label:r(x,{className:"tag-grey",text:e,maxChars:T,TagComponent:c,compact:!0}),value:d?r(_,{children:r(y,{source:a?.get(e)||""})}):" "},e))]})}const _=i.div`
+  p {
+    margin-bottom: 0;
+  }
+`,q=i(h)`
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  align-self: flex-start;
+  padding: 0 var(--spacing-xs);
+  border: var(--tag-border-width) var(--tag-border-style) var(--tag-bg-color);
+  border-radius: var(--tag-border-radius);
+  color: var(--color-warm-grey-8);
+`;export{A as RequiredScopesList};

package/lib/components/Security/ScopeTagWithTooltip.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react';
+type TagComponentProps = {
+    className?: string;
+    children: ReactNode;
+};
+interface ScopeTagWithTooltipProps {
+    className?: string;
+    text: string;
+    maxChars?: number;
+    tip?: string | ReactNode;
+    ariaLabel?: string;
+    TagComponent?: ComponentType<TagComponentProps>;
+    arrowPosition?: 'left' | 'right' | 'center';
+    compact?: boolean;
+}
+export declare function ScopeTagWithTooltip({ className, text, maxChars, tip, ariaLabel, TagComponent, arrowPosition, compact, }: ScopeTagWithTooltipProps): ReactElement;
+export {};

package/lib/components/Security/ScopeTagWithTooltip.js

@@ -0,0 +1,33 @@
+import{jsx as e}from"react/jsx-runtime";import{css as l}from"styled-components";import{Tooltip as h}from"@redocly/theme/components/Tooltip/Tooltip";import{styled as a}from"../../styled-components.js";import{getVisibleScopeLabel as b,isScopeTruncated as v}from"../../utils/security-scope.js";import{Tag as g}from"./styled.js";function k({className:i,text:r,maxChars:n=32,tip:s,ariaLabel:f,TagComponent:t=g,arrowPosition:u="center",compact:o=!1}){const c=b(r,n),d=s===void 0&&v(r,n)?r:s;return d?e(m,{$compact:o,children:e(h,{placement:"bottom",arrowPosition:u,tip:d,children:e(T,{role:"button",tabIndex:0,"aria-label":f??r,children:e(t,{className:i,children:e(p,{$compact:o,children:c})})})})}):e(m,{$compact:o,children:e(t,{className:i,children:e(p,{$compact:o,children:c})})})}const p=a.span`
+  display: inline-flex;
+  font-family: var(--font-family-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 16rem;
+  color: var(--color-warm-grey-8);
+  ${({$compact:i})=>!i&&l`
+      &&& {
+        font-size: var(--font-size-sm);
+      }
+    `}
+`,T=a.span`
+  cursor: default;
+
+  &:focus-visible {
+    outline: 1px solid var(--link-color-primary);
+    border-radius: var(--border-radius-md);
+  }
+`,m=a.span`
+  display: inline-block;
+  vertical-align: baseline;
+  line-height: var(--line-height-base);
+  ${({$compact:i})=>i?l`
+          margin: 0;
+        `:l`
+          margin: calc(var(--spacing-unit) / 2) var(--spacing-xxs) calc(var(--spacing-unit) / 2) 0;
+          &:last-child {
+            margin-right: 0;
+          }
+        `}
+`;export{k as ScopeTagWithTooltip};

package/lib/components/Security/Security.js

@@ -1 +1 @@
-import{jsx as r,Fragment as f,jsxs as y}from"react/jsx-runtime";import{useState as h,useRef as C}from"react";import{Portal as b}from"@redocly/theme/components/Portal/Portal";import{useModalScrollLock as w}from"@redocly/theme/core/openapi";import{SecurityButton as M}from"./SecurityButton.js";import{SecurityModal as S}from"./SecurityModal.js";import{useTelemetry as g}from"../../hooks/index.js";function _({securities:t}){const[i,c]=h(!1),l=g(),e=C(null);if(w(i),!t.length)return null;const m=()=>{const o=t.flatMap(s=>s.schemes),n=[...new Set(o.map(s=>s.type))],u=o.length,a=n.length>1,p=Date.now();e.current={securityTypes:n,schemesCount:u,isCombined:a,modalOpenTime:p},l.sendViewSecurityDetailsClickedMessage({id:"openapi-docs-security-button",object:"button",uri:window.location.href,securityTypes:n,schemesCount:u,isCombined:a}),c(!0)},d=()=>{if(e.current){const o=Date.now()-e.current.modalOpenTime;l.sendViewSecurityDetailsClosedMessage({id:"openapi-docs-security-button",object:"button",uri:window.location.href,securityTypes:e.current.securityTypes,schemesCount:e.current.schemesCount,isCombined:e.current.isCombined,timeInModalMs:o}),e.current=null}c(!1)};return y(f,{children:[r(M,{securities:t,onClick:m}),i&&r(b,{mountId:"api-content",children:r(S,{securities:t,onClose:d})})]})}export{_ as Security};
+import{jsx as r,Fragment as f,jsxs as y}from"react/jsx-runtime";import{useState as h,useRef as C}from"react";import{Portal as b}from"@redocly/theme/components/Portal/Portal";import{useModalScrollLock as w}from"@redocly/theme/core/openapi";import{SecurityButton as M}from"./SecurityButton.js";import{SecurityModal as S}from"./SecurityModal.js";import{useTelemetry as g}from"../../hooks/index.js";function _({securities:t}){const[i,c]=h(!1),l=g(),e=C(null);if(w(i),!t.length)return null;const m=()=>{const o=t.flatMap(s=>s.schemes),n=[...new Set(o.map(s=>s.type))],u=o.length,a=n.length>1,p=Date.now();e.current={securityTypes:n,schemesCount:u,isCombined:a,modalOpenTime:p},l.sendViewSecurityDetailsClickedMessage([{id:"openapi-docs-security-button",object:"button",uri:window.location.href,securityTypes:n,schemesCount:u,isCombined:a}]),c(!0)},d=()=>{if(e.current){const o=Date.now()-e.current.modalOpenTime;l.sendViewSecurityDetailsClosedMessage([{id:"openapi-docs-security-button",object:"button",uri:window.location.href,securityTypes:e.current.securityTypes,schemesCount:e.current.schemesCount,isCombined:e.current.isCombined,timeInModalMs:o}]),e.current=null}c(!1)};return y(f,{children:[r(M,{securities:t,onClick:m}),i&&r(b,{mountId:"api-content",children:r(S,{securities:t,onClose:d})})]})}export{_ as Security};

package/lib/components/Security/SecurityButton.js

@@ -1,15 +1,14 @@
-import{jsx as r,jsxs as o}from"react/jsx-runtime";import{Fragment as d}from"react";import{SecurityIcon as v}from"@redocly/theme/icons/SecurityIcon/SecurityIcon";import{Panel as u}from"@redocly/theme/components/Panel/Panel";import{Button as h}from"@redocly/theme/components/Button/Button";import{Tooltip as y}from"@redocly/theme/components/Tooltip/Tooltip";import{WarningFilledIcon as b}from"@redocly/theme/icons/WarningFilledIcon/WarningFilledIcon";import{useTranslate as x}from"../../hooks/index.js";import{styled as e}from"../../styled-components.js";import{deprecatedCss as w}from"../common/index.js";function N({securities:a,onClick:m}){const i=x();return r(j,{header:()=>o(k,{children:[r(v,{}),r(B,{children:i("openapi.security","Security")}),r(T,{onClick:m,variant:"link",children:i("openapi.viewSecurityDetails","View details")})]}),isExpandable:!1,children:r(C,{children:a.map((t,n)=>{const s=a.length>1&&t.schemes.length>1,f=t.schemes.map(({id:l,deprecated:c=!1},g)=>o(d,{children:[o(S,{deprecated:c,children:[l,c&&r(y,{tip:i("openapi.badges.deprecated","Deprecated"),children:r(b,{color:"var(--badge-deprecated-bg-color)"})})]}),g<t.schemes.length-1&&r(p,{children:" and "})]},l));return o(d,{children:[s?"(":"",f,s?")":"",n<a.length-1&&r(p,{children:" or "})]},n)})})})}const S=e.span`
-  ${({deprecated:a})=>a&&w}
-  display: flex;
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Fragment as d}from"react";import{SecurityIcon as v}from"@redocly/theme/icons/SecurityIcon/SecurityIcon";import{Panel as u}from"@redocly/theme/components/Panel/Panel";import{Button as b}from"@redocly/theme/components/Button/Button";import{Tooltip as y}from"@redocly/theme/components/Tooltip/Tooltip";import{WarningFilledIcon as x}from"@redocly/theme/icons/WarningFilledIcon/WarningFilledIcon";import{useTranslate as w}from"../../hooks/index.js";import{styled as r}from"../../styled-components.js";import{deprecatedCss as S}from"../common/index.js";import{RequiredScopes as j}from"./RequiredScopes.js";function W({securities:a,onClick:m}){const o=w();return e(T,{header:()=>i(B,{children:[e(v,{}),e(D,{children:o("openapi.security","Security")}),e(C,{onClick:m,variant:"link",children:o("openapi.viewSecurityDetails","View details")})]}),isExpandable:!1,children:e(H,{children:a.map((t,n)=>{const s=a.length>1&&t.schemes.length>1,h=t.schemes.map(({id:l,scopes:g,deprecated:c=!1},f)=>i(d,{children:[i(k,{deprecated:c,children:[l,c&&e(y,{tip:o("openapi.badges.deprecated","Deprecated"),children:e(x,{color:"var(--badge-deprecated-bg-color)"})})]}),e(j,{scopes:g}),f<t.schemes.length-1&&e(p,{children:" and "})]},l));return i(d,{children:[s?"(":"",h,s?")":"",n<a.length-1&&e(p,{children:" or "})]},n)})})})}const k=r.span`
+  ${({deprecated:a})=>a&&S}
+  display: inline-flex;
   align-items: center;
   gap: var(--spacing-xxs);
-  display: inline-flex;
-};
-`,j=e(u)`
+  font-weight: var(--font-weight-medium);
+`,T=r(u)`
   margin-top: var(--spacing-base);
   border: var(--panel-border);
   border-radius: var(--panel-border-radius);
-`,k=e.div`
+`,B=r.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -19,19 +18,20 @@ import{jsx as r,jsxs as o}from"react/jsx-runtime";import{Fragment as d}from"reac
   background-color: var(--layer-color);
   border-bottom: var(--panel-border);
   border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
-`,T=e(h)`
+`,C=r(b)`
   margin-left: auto;
   font-size: var(--font-size-sm);
-`,B=e.span`
+`,D=r.span`
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-medium);
   color: var(--text-color-primary);
-`,C=e.div`
-  flex: 1;
-  text-overflow: ellipsis;
+`,H=r.div`
+  display: block;
   overflow: hidden;
   padding: var(--spacing-xs) var(--spacing-sm);
   color: var(--text-color-primary);
-`,p=e.span`
+  line-height: var(--line-height-base);
+`,p=r.span`
   color: var(--text-color-description);
-`;export{N as SecurityButton};
+  line-height: var(--line-height-base);
+`;export{W as SecurityButton};

package/lib/components/Security/SecurityFlow.js

@@ -1,21 +1,34 @@
-import{jsx as e,Fragment as m,jsxs as t}from"react/jsx-runtime";import{Badge as S}from"@redocly/theme/components/Badge/Badge";import{SecuritySchemeItem as a}from"./SecuritySchemeItem.js";import{titleize as w}from"../../utils/index.js";import{OAuthFlow as y}from"./OAuthFlow.js";import{StyledLink as d}from"./styled.js";import{Markdown as F}from"../Markdown/index.js";import{useTranslate as T}from"../../hooks/index.js";import{OAuthScopes as k}from"./OAuthScopes.js";import{styled as n}from"../../styled-components.js";function N({type:o,bearerFormat:h,name:u,flows:i,openIdConnectUrl:l,description:f,id:p,securities:g,in:b,deprecated:v=!1,oauth2MetadataUrl:s}){const r=T();if(!o||!p)return null;const x={http:t(m,{children:[e(a,{label:r("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:o}),e(a,{label:r("openapi.bearerFormat","Bearer Format"),value:h})]}),apiKey:e(a,{label:`${w(b||"")} ${r("openapi.parameterName","parameter name")}:`,value:u}),oauth2:t(m,{children:[e(a,{label:r("openapi.flowType","Flow type"),value:o}),i&&Object.keys(i).map(c=>e(y,{flow:i[c]},c))]}),openIdConnect:e(a,{label:r("openapi.connectUrl","Connect URL"),value:l&&e(d,{target:"_blank",rel:"noopener noreferrer",href:l,children:l})})};return t(j,{children:[t(z,{children:[e(_,{children:p}),v&&e(S,{deprecated:!0,children:r("openapi.badges.deprecated","Deprecated")})]}),e(F,{source:f}),s&&e(a,{label:r("openapi.oauth2MetadataUrl","OAuth2 Metadata URL"),value:e(d,{target:"_blank",rel:"noopener noreferrer",href:s,children:s})}),t(A,{children:[x[o]||null,e(k,{id:p,securities:g,flows:i})]})]})}const z=n.div`
+import{jsx as e,jsxs as r,Fragment as p}from"react/jsx-runtime";import{Badge as z}from"@redocly/theme/components/Badge/Badge";import{SecuritySchemeItem as n}from"./SecuritySchemeItem.js";import{titleize as A}from"../../utils/index.js";import{OAuthFlow as L}from"./OAuthFlow.js";import{StyledLink as v,Tag as O}from"./styled.js";import{Markdown as _}from"../Markdown/index.js";import{useTranslate as w}from"../../hooks/index.js";import{OAuthScopes as b}from"./OAuthScopes.js";import{styled as o}from"../../styled-components.js";import{RequiredScopesList as g}from"./RequiredScopesList.js";const j=["authorizationCode","clientCredentials","implicit","password","deviceAuthorization"];function k({flowType:l,flow:m,schemeId:h,securities:a}){const c=w();return r(p,{children:[e(n,{label:r(H,{className:"tag-grey",children:[e(N,{children:c("openapi.flowType","Flow type")})," ",e(P,{children:l})]}),value:e("span",{})}),r(C,{children:[e(L,{flow:m}),e(b,{id:h,securities:a,flow:m})]})]})}function V({type:l,bearerFormat:m,name:h,flows:a,openIdConnectUrl:c,description:y,id:t,securities:s,in:x,deprecated:T=!1,oauth2MetadataUrl:f}){const i=w();if(!l||!t)return null;const F={http:r(p,{children:[e(n,{label:i("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:l}),e(n,{label:i("openapi.bearerFormat","Bearer Format"),value:m}),e(g,{schemeId:t,securities:s,flows:a})]}),apiKey:r(p,{children:[e(n,{label:`${A(x||"")} ${i("openapi.parameterName","parameter name")}:`,value:h}),e(g,{schemeId:t,securities:s,flows:a})]}),oauth2:r(p,{children:[a&&Object.entries(a).filter(d=>{const[u,S]=d;return!!S&&j.includes(u)}).map(([d,u])=>e(k,{flowType:d,flow:u,schemeId:t,securities:s},d)),e(b,{id:t,securities:s,flows:a})]}),openIdConnect:r(p,{children:[e(n,{label:i("openapi.connectUrl","Connect URL"),value:c&&e(v,{target:"_blank",rel:"noopener noreferrer",href:c,children:c})}),e(g,{schemeId:t,securities:s,flows:a})]})};return r(W,{children:[r(I,{children:[e(R,{children:t}),T&&e(z,{deprecated:!0,children:i("openapi.badges.deprecated","Deprecated")})]}),e(_,{source:y}),f&&e(n,{label:i("openapi.oauth2MetadataUrl","OAuth2 Metadata URL"),value:e(v,{target:"_blank",rel:"noopener noreferrer",href:f,children:f})}),e(B,{children:F[l]||null})]})}const I=o.div`
   display: flex;
   align-items: center;
   gap: var(--spacing-xxs);
   margin: 0 0 var(--spacing-xs);
-`,j=n.div`
+`,W=o.div`
   background: var(--layer-color);
   padding: var(--spacing-base);
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color-secondary);
   width: 100%;
   margin-top: var(--spacing-base);
-`,A=n.div`
+`,B=o.div`
   width: 100%;
   margin-top: var(--spacing-md);
-`,_=n.p`
+`,R=o.p`
   font-size: var(--font-size-base);
   margin: 0;
   text-transform: capitalize;
   font-weight: var(--font-weight-semibold);
-`;export{N as SecurityFlow};
+`,C=o.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--spacing-xs);
+  margin-bottom: var(--spacing-xxs);
+`,H=o(O)`
+  color: var(--color-warm-grey-8);
+  font-family: var(--font-family-base);
+`,N=o.span`
+  font-weight: var(--font-weight-regular);
+`,P=o.span`
+  color: var(--color-warm-grey-11);
+  font-weight: var(--font-weight-medium);
+`;export{V as SecurityFlow};

package/lib/components/ServerList/ServerList.js

@@ -1,4 +1,4 @@
-import{jsx as i,jsxs as o}from"react/jsx-runtime";import{CopyButton as x}from"@redocly/theme/components/Buttons/CopyButton";import{getServerDisplayName as b}from"../../utils/helpers.js";import{PanelItemDescription as u,Title as y}from"../PanelItem/index.js";import{ViewNested as w}from"../ViewNested/index.js";import{Tag as S}from"../common/index.js";import{Markdown as T}from"../Markdown/index.js";import{styled as e}from"../../styled-components.js";import{ServerDescriptionTooltip as j}from"./ServerDescriptionTooltip.js";const q=({servers:h,path:f="",translate:r})=>i(D,{children:h.map(t=>{const a=t.url+f,p=Object.keys(t.variables||{}).length,d=p===1?"variable":"variables",l=`${p||""} ${r(`openapi.${d}`,d)}`,v=!!t.name&&!!t.description;return o("div",{children:[o(L,{children:[i(u,{"data-testid":"server-panel-item-name",children:b(t)}),v&&i(j,{description:t.description})]}),o(O,{children:[i(y,{suppressHydrationWarning:!0,children:a}),i(x,{data:a},a)]}),t.variables&&i(w,{expandText:`${r("openapi.actions.show","Show")} ${l}`,hideText:`${r("openapi.actions.hide","Hide")} ${l}`,expandByDefault:!1,expandable:!0,hideDivider:!0,children:i($,{children:Object.entries(t.variables||{}).map(([c,n])=>o(z,{children:[i(k,{children:c}),o(s,{children:[r("openapi.default","Default")," ",i(g,{children:n.default})]}),i(W,{source:n.description}),n.enum&&o(s,{children:[r("openapi.enum","Enum")," ",i(C,{children:n.enum.map(m=>i(g,{children:m},m))})]})]},c))})})]},t.url)})}),D=e.div`
+import{jsx as i,jsxs as o}from"react/jsx-runtime";import{CopyButton as u}from"@redocly/theme/components/Buttons/CopyButton";import{CheckmarkFilledIcon as y}from"@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon";import{getServerDisplayName as w}from"../../utils/helpers.js";import{PanelItemDescription as h,Title as S}from"../PanelItem/index.js";import{ViewNested as T}from"../ViewNested/index.js";import{Tag as l}from"../common/index.js";import{Markdown as j}from"../Markdown/index.js";import{styled as t}from"../../styled-components.js";import{ServerDescriptionTooltip as D}from"./ServerDescriptionTooltip.js";const A=({servers:v,path:f="",translate:n})=>i($,{children:v.map(e=>{const s=e.url+f,d=Object.keys(e.variables||{}).length,c=d===1?"variable":"variables",m=`${d||""} ${n(`openapi.${c}`,c)}`,b=!!e.name&&!!e.description;return o("div",{children:[o(W,{children:[o(h,{"data-testid":"server-panel-item-name",children:[w(e),e["x-isLive"]&&o(l,{className:"tag-green",children:[i(y,{}),"Live"]})]}),b&&i(D,{description:e.description}),e["x-labels"]?.length&&i(h,{style:{margin:"var(--spacing-xs) 0"},children:e["x-labels"]?.map(r=>o(l,{className:`tag-${r.color}`,children:[r.label,": ",r.value]},r.value))})||null]}),o(I,{children:[i(S,{suppressHydrationWarning:!0,children:s}),i(u,{data:s},s)]}),e.variables&&i(T,{expandText:`${n("openapi.actions.show","Show")} ${m}`,hideText:`${n("openapi.actions.hide","Hide")} ${m}`,expandByDefault:!1,expandable:!0,hideDivider:!0,children:i(z,{children:Object.entries(e.variables||{}).map(([r,a])=>o(k,{children:[i(C,{children:r}),o(p,{children:[n("openapi.default","Default")," ",i(x,{children:a.default})]}),i(L,{source:a.description}),a.enum&&o(p,{children:[n("openapi.enum","Enum")," ",i(N,{children:a.enum.map(g=>i(x,{children:g},g))})]})]},r))})})]},e.url)})}),$=t.div`
   & > div {
     border-bottom: 1px solid var(--border-color-secondary);
     margin-bottom: var(--spacing-xs);
@@ -10,7 +10,7 @@ import{jsx as i,jsxs as o}from"react/jsx-runtime";import{CopyButton as x}from"@r
     margin-bottom: 0;
     padding-bottom: 0;
   }
-`,$=e.div`
+`,z=t.div`
   padding-left: var(--spacing-xxs);
   & > div {
     border-bottom: 1px solid var(--border-color-secondary);
@@ -28,37 +28,37 @@ import{jsx as i,jsxs as o}from"react/jsx-runtime";import{CopyButton as x}from"@r
     margin-bottom: 0;
     padding-bottom: 0;
   }
-`,z=e.div`
+`,k=t.div`
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-`,W=e(T)`
+`,L=t(j)`
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   color: var(--text-color-primary);
-`,s=e.span`
+`,p=t.span`
   display: flex;
   gap: var(--spacing-xxs);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   color: var(--text-color-primary);
-`,k=e(s)`
+`,C=t(p)`
   padding-bottom: var(--spacing-xxs);
   font-weight: var(--font-weight-semibold);
-`,C=e.span`
+`,N=t.span`
   display: flex;
   gap: var(--spacing-xxs);
   flex-wrap: wrap;
-`,g=e(S)`
+`,x=t(l)`
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
-`,L=e.div`
+`,W=t.div`
   display: flex;
   justify-content: start;
   align-items: center;
   gap: var(--spacing-xxs);
-`,O=e.div`
+`,I=t.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-`;export{q as ServerList};
+`;export{A as ServerList};

package/lib/components/ServerListDropdown/ServerListDropdown.js

@@ -1 +1 @@
-import{jsx as e,jsxs as f}from"react/jsx-runtime";import{useMemo as S,useCallback as c}from"react";import{useAtom as g,useAtomValue as w}from"jotai";import{DropdownMenu as y}from"@redocly/theme/components/Dropdown/DropdownMenu";import{Dropdown as A}from"@redocly/theme/components/Dropdown/Dropdown";import{getOperationColor as C}from"@redocly/theme/core/openapi";import{HttpVerb as b}from"../common/index.js";import{PathWrapper as k,Path as P,StyledCopyButton as V,StyledDropdownMenuItem as j}from"./styled.js";import{PanelItem as x}from"../PanelItem/index.js";import{joinWithSeparator as D}from"../../services/index.js";import{getServerDisplayName as M,replaceVariables as E}from"../../utils/index.js";import{environmentAtom as N}from"../../jotai/app.js";import{useActiveWithFallback as O,useTelemetry as W}from"../../hooks/index.js";import{getServerEnvName as p}from"../../utils/environments.js";import{createTargetServerSwitchEvent as I}from"../../events/index.js";import{globalStoreAtom as T}from"../../jotai/store.js";const $=({operation:r,className:h})=>{const n=W(),[[d],m]=g(N),{options:{events:i}}=w(T),s=O(r.servers.map(t=>({...t,key:t.url})),d.server),a=c(t=>{t.stopPropagation()},[]),l=c(t=>()=>{if(r.servers.length!==1&&(m({environment:p(t)}),n.sendSwitchServersClickedMessage({server:p(t)}),i?.targetServerSwitch&&t)){const o=I({operation:r,serverUrl:t.url});i.targetServerSwitch(o)}},[r,m,n,i]),v=S(()=>r.servers.map(t=>{const o=D(E(t),r.path);return e(j,{onAction:l(t),children:e(x,{header:M(t),title:o,actions:[e(V,{data:o,toasterPlacement:"left",onCopyClick:a},o)],active:t.url===s,withCheckmark:!0})},o)}),[r.servers,r.path,l,a,s]),u=C({isAdditionalOperation:r.isAdditionalOperation,httpVerb:r.httpVerb});return e(A,{className:h,trigger:f(k,{variant:"ghost",children:[e(b,{color:u,children:r.httpVerb}),e(P,{children:r.path})]}),withArrow:!0,children:e(y,{children:v})})};export{$ as ServerListDropdown};
+import{jsx as e,jsxs as S}from"react/jsx-runtime";import{useMemo as g,useCallback as a}from"react";import{useAtom as w,useAtomValue as y}from"jotai";import{DropdownMenu as A}from"@redocly/theme/components/Dropdown/DropdownMenu";import{Dropdown as C}from"@redocly/theme/components/Dropdown/Dropdown";import{getOperationColor as b}from"@redocly/theme/core/openapi";import{HttpVerb as k}from"../common/index.js";import{PathWrapper as j,Path as P,StyledCopyButton as V,StyledDropdownMenuItem as x}from"./styled.js";import{PanelItem as D}from"../PanelItem/index.js";import{joinWithSeparator as M}from"../../services/index.js";import{getServerDisplayName as E,replaceVariables as p}from"../../utils/index.js";import{environmentAtom as N}from"../../jotai/app.js";import{useActiveWithFallback as O,useTelemetry as W}from"../../hooks/index.js";import{getServerEnvName as h}from"../../utils/environments.js";import{createTargetServerSwitchEvent as _}from"../../events/index.js";import{globalStoreAtom as I}from"../../jotai/store.js";const $=({operation:r,className:d})=>{const m=W(),[[v],n]=w(N),{options:{events:i}}=y(I),s=O(r.servers.map(t=>({...t,key:t.url})),v.server),c=a(t=>{t.stopPropagation()},[]),l=a(t=>()=>{if(r.servers.length!==1&&(n({environment:h(t)}),m.sendSwitchServersClickedMessage([{object:"switch_servers",server:h(t)}]),i?.targetServerSwitch&&t)){const o=_({operation:r,serverUrl:t.url});i.targetServerSwitch(o)}},[r,n,m,i]),u=g(()=>r.servers.map(t=>{const o=r.isRpc?p(t):M(p(t),r.path);return e(x,{onAction:l(t),children:e(D,{header:E(t),title:o,actions:[e(V,{data:o,toasterPlacement:"left",onCopyClick:c},o)],active:t.url===s,withCheckmark:!0})},o)}),[r.servers,r.isRpc,r.path,l,c,s]),f=b({isAdditionalOperation:r.isAdditionalOperation,httpVerb:r.httpVerb});return e(C,{className:d,trigger:S(j,{variant:"ghost",children:[e(k,{color:f,children:r.httpVerb}),e(P,{children:r.path})]}),withArrow:!0,children:e(A,{children:u})})};export{$ as ServerListDropdown};

package/lib/components/TagItem/Breadcrumbs.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+type Breadcrumb = {
+    name: string;
+    href: string;
+};
+type BreadcrumbsProps = {
+    breadcrumbs: Breadcrumb[];
+    onClick: (href: string) => void;
+};
+export declare function Breadcrumbs({ breadcrumbs, onClick }: BreadcrumbsProps): ReactElement | null;
+export {};

package/lib/components/TagItem/Breadcrumbs.js

@@ -0,0 +1,41 @@
+import{jsx as n,Fragment as p,jsxs as h}from"react/jsx-runtime";import w,{useRef as x,useState as L,useMemo as b,useCallback as B,useLayoutEffect as k}from"react";import{Dropdown as E}from"@redocly/theme/components/Dropdown/Dropdown";import{DropdownMenu as M}from"@redocly/theme/components/Dropdown/DropdownMenu";import{DropdownMenuItem as C}from"@redocly/theme/components/Dropdown/DropdownMenuItem";import{Tooltip as T}from"@redocly/theme/components/Tooltip/Tooltip";import{trimText as y}from"@redocly/theme/core/openapi";import{styled as s}from"../../styled-components.js";import{calculateMaxLength as D}from"../../utils/calculateMaxLength.js";const R=25,_=3,u=({breadcrumb:e,onClick:t,maxLength:r})=>{const o=e.name.length>r,i=y(e.name,r);return n(T,{tip:e.name,placement:"bottom",disabled:!o,children:n(v,{onClick:()=>t(e.href),children:i})})},z=({breadcrumbs:e,onClick:t,maxLength:r})=>{const o=e[0],i=e[e.length-1],d=e.slice(1,-1);return h(p,{children:[n(u,{breadcrumb:o,onClick:t,maxLength:r}),n(g,{children:"/"}),n(E,{trigger:n(O,{children:"..."}),closeOnClick:!0,alignment:"end",children:n(M,{children:d.map(a=>n(C,{onAction:()=>t(a.href),children:a.name},a.href))})}),n(g,{children:"/"}),n(u,{breadcrumb:i,onClick:t,maxLength:r})]})},F=({breadcrumbs:e,onClick:t,maxLength:r})=>n(p,{children:e.map((o,i)=>h(w.Fragment,{children:[n(u,{breadcrumb:o,onClick:t,maxLength:r}),i!==e.length-1&&n(g,{children:"/"})]},o.href))});function q({breadcrumbs:e,onClick:t}){const r=x(null),o=x(null),[i,d]=L(R),a=e.length>_,f=b(()=>a?[e[0],e[e.length-1]]:e,[e,a]),m=B(()=>{if(!r.current?.parentElement||!o.current)return;const c=r.current.parentElement.clientWidth,l=D(f,c,a,o.current);d(l)},[f,a]);return k(()=>{m();const c=new ResizeObserver(m),l=r.current?.parentElement;return l&&c.observe(l),()=>{c.disconnect()}},[m]),e.length?h(p,{children:[n(j,{ref:o,"aria-hidden":"true"}),n(A,{ref:r,"data-component-name":"TagItem/Breadcrumbs",children:a?n(z,{breadcrumbs:e,onClick:t,maxLength:i}):n(F,{breadcrumbs:e,onClick:t,maxLength:i})})]}):null}const j=s.span`
+  position: absolute;
+  visibility: hidden;
+  white-space: nowrap;
+`,A=s.div`
+  position: absolute;
+  top: -26px;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: calc(var(--breadcrumbs-gap) / 2);
+  margin-bottom: var(--spacing-xxs);
+  max-width: 100%;
+`,v=s.button`
+  background: none;
+  border: none;
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--breadcrumbs-text-color);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  padding: 1px calc(var(--spacing-xxs) / 2);
+  line-height: var(--line-height-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+
+  &:hover {
+    background-color: var(--breadcrumbs-background-color-hover);
+  }
+`,g=s.span`
+  line-height: var(--line-height-sm);
+  padding: 0 calc(var(--spacing-xxs) / 2);
+  color: var(--breadcrumbs-text-color);
+  font-size: var(--font-size-sm);
+`,O=s(v)`
+  text-align: center;
+  overflow: visible;
+`;export{q as Breadcrumbs};

package/lib/components/TagItem/OperationNavigationItems.d.ts

@@ -1,9 +1,11 @@
 import type { TFunction } from '@redocly/theme/core/openapi';
 import type { OperationsNavigationProps } from './types.js';
 type OperationNavigationItemsProps = OperationsNavigationProps & {
-    title: string;
+    title?: string;
     onClick: (link: string) => void;
     translate: TFunction;
+    disableTooltip?: boolean;
 };
-export declare const OperationNavigationItems: import("react").NamedExoticComponent<OperationNavigationItemsProps>;
+declare function OperationNavigationItemsComponent({ title, items, onClick, routingBasePath, translate, disableTooltip, }: OperationNavigationItemsProps): import("react/jsx-runtime").JSX.Element;
+export declare const OperationNavigationItems: import("react").MemoExoticComponent<typeof OperationNavigationItemsComponent>;
 export {};

package/lib/components/TagItem/OperationNavigationItems.js

@@ -1,10 +1,10 @@
-import{jsx as e,jsxs as s,Fragment as w}from"react/jsx-runtime";import{memo as j}from"react";import{getOperationColor as z}from"@redocly/theme/core/openapi";import{Tooltip as k}from"@redocly/theme/components/Tooltip/Tooltip";import{joinWithSeparator as C}from"../../services/index.js";import{encodeBackSlashes as O}from"../../utils/index.js";import{HttpVerb as B,NavigationBadge as p}from"../common/index.js";import{styled as o}from"../../styled-components.js";import{StyledButton as I}from"./styled.js";function N({title:l,items:c,onClick:d,routingBasePath:h,translate:m}){return s(w,{children:[e(S,{children:l}),c.map(t=>{const{id:g,href:f,deprecated:r,badges:v,isAdditionalOperation:b,name:a}=t,x=t.type==="operation"?t.path:a,i=t.type==="operation"?t.httpVerb:t.type,u=z({isAdditionalOperation:b,deprecated:r,httpVerb:i});return e(k,{tip:a,placement:"left",children:e(V,{variant:"outlined",size:"large",onClick:()=>d(C(h,O(f))),children:s("span",{children:[e(B,{color:u,children:i}),e(_,{children:x}),r&&e(p,{deprecated:!0,children:m("openapi.badges.deprecated","Deprecated")}),v?.map(({name:n,color:y})=>e(p,{color:y,children:n},n))]})})},g)})]})}const G=j(N),S=o.span`
+import{jsx as r,jsxs as s,Fragment as x}from"react/jsx-runtime";import{memo as y}from"react";import{GenericIcon as w}from"@redocly/theme/icons/GenericIcon/GenericIcon";import{DirectionRightIcon as I}from"@redocly/theme/icons/DirectionRightIcon/DirectionRightIcon";import{getOperationColor as j}from"@redocly/theme/core/openapi";import{Tooltip as k}from"@redocly/theme/components/Tooltip/Tooltip";import{joinWithSeparator as z}from"../../services/index.js";import{encodeBackSlashes as O}from"../../utils/index.js";import{HttpVerb as V,NavigationBadge as d}from"../common/index.js";import{styled as o}from"../../styled-components.js";import{StyledButton as B}from"./styled.js";function C({verb:e,deprecated:t,isAdditionalOperation:n}){const i=j({httpVerb:e,deprecated:t,isAdditionalOperation:n});return r(V,{color:i,children:e})}function H(e){if(e.type==="tag")return r(F,{children:r(I,{size:"12px"})});const t=e.type==="operation"?e.httpVerb:e.type;return C({verb:t,deprecated:e.deprecated,isAdditionalOperation:e.isAdditionalOperation})}function N(e){return e.type==="operation"?e.path:e.name}function S({title:e,items:t,onClick:n,routingBasePath:i,translate:l,disableTooltip:h}){return s(x,{children:[e&&r(_,{children:e}),t.map(a=>{const{id:g,href:f,name:m,deprecated:v,badges:b}=a;return r(k,{tip:m,placement:"left",disabled:h,children:r(A,{variant:"outlined",size:"large",onClick:()=>n(z(i,O(f))),children:s("span",{children:[H(a),r(D,{children:N(a)}),v&&r(d,{deprecated:!0,children:l("openapi.badges.deprecated","Deprecated")}),b?.map(({name:p,color:u,icon:c})=>r(d,{color:u,icon:c&&r(w,{icon:c}),children:p},p))]})})},g)})]})}const Q=y(S),_=o.span`
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   font-weight: var(--font-weight-bold);
   color: var(--text-color-primary);
   margin: var(--spacing-sm) 0 var(--spacing-xxs) 0;
-`,V=o(I)`
+`,A=o(B)`
   border-radius: var(--border-radius);
   background: var(--bg-color);
   justify-content: space-between;
@@ -12,7 +12,7 @@ import{jsx as e,jsxs as s,Fragment as w}from"react/jsx-runtime";import{memo as j
 
   & > span {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     gap: var(--spacing-unit);
     overflow-x: hidden;
   }
@@ -25,7 +25,7 @@ import{jsx as e,jsxs as s,Fragment as w}from"react/jsx-runtime";import{memo as j
     content: '→';
     line-height: var(--line-height-base);
   }
-`,_=o.span`
+`,D=o.span`
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
@@ -34,4 +34,19 @@ import{jsx as e,jsxs as s,Fragment as w}from"react/jsx-runtime";import{memo as j
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow-x: hidden;
-`;export{G as OperationNavigationItems};
+`,F=o.div`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-shrink: 0;
+  background-color: var(--layer-color-hover);
+  margin-right: var(--spacing-unit);
+
+  & > svg {
+    height: 12px;
+    width: 12px;
+  }
+`;export{Q as OperationNavigationItems};