@redocly/openapi-docs 3.19.0 → 3.20.0-next.1

package/lib/components/PropertyDetails/FieldDetails.js

@@ -1,18 +1,18 @@
-import{jsx as e,jsxs as p,Fragment as E}from"react/jsx-runtime";import{memo as T,useMemo as k}from"react";import{useAtomValue as S}from"jotai";import{LinkIcon as L}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{RecursiveLabel as h,Tag as x,AccessLabel as j,RequiredLabel as q,StyledBadge as A}from"../common/index.js";import{ExternalDocumentation as C}from"../ExternalDocumentation/index.js";import{Markdown as M}from"../Markdown/index.js";import{FieldDetail as l}from"./FieldDetail.js";import{Extensions as R}from"./Extensions.js";import{EnumValues as V}from"./EnumValues.js";import{Examples as $,getSerializedValue as N}from"./Examples.js";import{globalOptionsAtom as _}from"../../jotai/store.js";import{SchemaTypeInfo as i}from"./SchemaTypeInfo.js";import{LinkToField as B}from"../common/LinkToField.js";import{Pattern as I}from"./Pattern.js";import{getAccessModeLabelText as O}from"../RenderHook/index.js";import{useTranslate as G}from"../../hooks/index.js";import{styled as n}from"../../styled-components.js";function H({field:t,renderDiscriminatorSwitch:v,deepLink:m,fieldParentsName:y=[]}){const a=G(),{hidePropertiesPrefix:g,hideSchemaTitles:b}=S(_),{schema:r,description:w,example:c,deprecated:D,examples:s,kind:d,required:F,name:f}=t,P=t.in==="header",z=k(()=>{if(c!==void 0||s!==void 0){if(s!==void 0)return e($,{field:t});{const o=!!t.in;return e(l,{label:`${a("openapi.example","Example")}:`,value:N(t,t.example),raw:o})}}else return null},[c,s,t,a]),u=O(t.schema);return p(E,{children:[p(J,{children:[f&&p(Q,{children:[m&&e(B,{to:m}),!g&&y.map(o=>o+".\u200B"),e(U,{className:"schema-name",children:f})]}),e(i,{type:r.typePrefix+r.displayType}),e(i,{type:r.displayFormat&&`(${r.displayFormat})`}),e(i,{type:r.contentEncoding}),e(i,{type:r.title&&!b?`(${r.title})`:""}),r.constraints?.map(o=>e(i,{type:o},o)),D&&e(A,{deprecated:!0,children:a("openapi.badges.deprecated","Deprecated")}),e(I,{pattern:r.pattern}),d==="additionalProperties"&&e(x,{children:a("openapi.additionalProperties","additional property")}),d==="patternProperties"&&e(x,{children:a("openapi.patternProperties","pattern property")}),u&&e(j,{children:u}),F&&e(q,{children:a("openapi.required","required")}),r.isCircular&&e(h,{children:a("openapi.recursive","Recursive")})]}),r.isComplex&&e(h,{children:a("openapi.complex","Complex")}),e(K,{source:w}),e(l,{raw:P,type:"default",label:a("openapi.default","Default"),value:r.default}),e(V,{type:r.type,values:r["x-enumDescriptions"]||r.enum}),z,e(R,{extensions:{...t.extensions,...r.extensions}}),r.externalDocs&&e(C,{externalDocs:r.externalDocs,compact:!0}),v?.(),e(l,{label:a("openapi.value","Value"),value:t.const||void 0})]})}const ue=T(H),J=n.div`
+import{jsx as e,jsxs as s,Fragment as C}from"react/jsx-runtime";import{memo as S,useMemo as L}from"react";import{useAtomValue as N}from"jotai";import{LinkIcon as j}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{RecursiveLabel as x,Tag as g,AccessLabel as q,RequiredLabel as A,StyledBadge as M,CustomBadges as R,renderBadge as y}from"../common/index.js";import{ExternalDocumentation as V}from"../ExternalDocumentation/index.js";import{Markdown as $}from"../Markdown/index.js";import{FieldDetail as m}from"./FieldDetail.js";import{Extensions as _}from"./Extensions.js";import{EnumValues as I}from"./EnumValues.js";import{Examples as O,getSerializedValue as G}from"./Examples.js";import{globalOptionsAtom as H}from"../../jotai/store.js";import{SchemaTypeInfo as n}from"./SchemaTypeInfo.js";import{LinkToField as J}from"../common/LinkToField.js";import{Pattern as K}from"./Pattern.js";import{getAccessModeLabelText as Q}from"../RenderHook/index.js";import{useTranslate as U}from"../../hooks/index.js";import{styled as i}from"../../styled-components.js";import{splitBadgesByPosition as W}from"../../utils/index.js";function X({field:a,renderDiscriminatorSwitch:v,deepLink:c,fieldParentsName:b=[]}){const t=U(),{hidePropertiesPrefix:w,hideSchemaTitles:D}=N(H),{schema:r,description:P,example:d,deprecated:B,examples:p,kind:f,required:F,name:l,badges:z}=a,E=a.in==="header",T=L(()=>{if(d!==void 0||p!==void 0){if(p!==void 0)return e(O,{field:a});{const o=!!a.in;return e(m,{label:`${t("openapi.example","Example")}:`,value:G(a,a.example),raw:o})}}else return null},[d,p,a,t]),u=Q(a.schema),{before:h,after:k}=W(z);return s(C,{children:[s(Y,{children:[l&&s(ee,{children:[c&&e(J,{to:c}),e(re,{children:e(R,{badges:h,children:s(ae,{children:[!w&&b.map(o=>o+".\u200B"),e(te,{className:"schema-name",children:l})]})})})]}),!l&&h.map(y),e(n,{type:r.typePrefix+r.displayType}),e(n,{type:r.displayFormat&&`(${r.displayFormat})`}),e(n,{type:r.contentEncoding}),e(n,{type:r.title&&!D?`(${r.title})`:""}),r.constraints?.map(o=>e(n,{type:o},o)),B&&e(M,{deprecated:!0,children:t("openapi.badges.deprecated","Deprecated")}),e(K,{pattern:r.pattern}),f==="additionalProperties"&&e(g,{children:t("openapi.additionalProperties","additional property")}),f==="patternProperties"&&e(g,{children:t("openapi.patternProperties","pattern property")}),u&&e(q,{children:u}),F&&e(A,{children:t("openapi.required","required")}),r.isCircular&&e(x,{children:t("openapi.recursive","Recursive")}),k.map(y)]}),r.isComplex&&e(x,{children:t("openapi.complex","Complex")}),e(Z,{source:P}),e(m,{raw:E,type:"default",label:t("openapi.default","Default"),value:r.default}),e(I,{type:r.type,values:r["x-enumDescriptions"]||r.enum}),T,e(_,{extensions:{...a.extensions,...r.extensions}}),r.externalDocs&&e(V,{externalDocs:r.externalDocs,compact:!0}),v?.(),e(m,{label:t("openapi.value","Value"),value:a.const||void 0})]})}const Pe=S(X),Y=i.div`
   display: flex;
   align-items: center;
   gap: calc(var(--spacing-xxs) / 4) var(--spacing-xxs);
   flex-wrap: wrap;
   margin-bottom: 2px;
   position: relative;
-`,K=n(M)`
+`,Z=i($)`
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
 
   article p:last-child {
     margin-bottom: 0;
   }
-`,Q=n.span`
+`,ee=i.span`
   position: relative;
   font-family: var(--font-family-monospaced);
   line-height: var(--line-height-base);
@@ -24,16 +24,24 @@ import{jsx as e,jsxs as p,Fragment as E}from"react/jsx-runtime";import{memo as T
   white-space: pre-wrap;
 
   :hover {
-    ${L} {
+    ${j} {
       opacity: 1;
       visibility: visible;
       background-color: var(--bg-color);
     }
   }
-`,U=n.span`
+`,re=i.span`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  flex-wrap: wrap;
+  max-width: 100%;
+`,ae=i.span`
+  display: inline;
+`,te=i.span`
   font-family: var(--font-family-monospaced);
   font-weight: var(--font-weight-semibold);
   font-size: var(--schemas-property-name-font-size);
   line-height: var(--schemas-property-name-line-height);
   color: var(--text-color-primary);
-`;export{ue as FieldDetails};
+`;export{Pe as FieldDetails};

package/lib/components/common/Badges.d.ts

@@ -1,8 +1,9 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 import type { OpenAPIXBadges } from '../../types/index.js';
 interface CustomBadgesProps {
     badges?: OpenAPIXBadges[];
 }
+export declare function renderBadge({ name, color, description, icon }: OpenAPIXBadges): ReactElement;
 export declare const CustomBadges: import("react").NamedExoticComponent<PropsWithChildren<CustomBadgesProps>>;
 export declare const StyledBadge: any;
 export declare const NavigationBadge: any;

package/lib/components/common/Badges.js

@@ -1,6 +1,6 @@
-import{jsx as a,Fragment as n,jsxs as c}from"react/jsx-runtime";import{memo as p}from"react";import{css as l}from"styled-components";import{Tag as f}from"@redocly/theme/components/Tag/Tag";import{GenericIcon as g}from"@redocly/theme/icons/GenericIcon/GenericIcon";import{Tooltip as x}from"@redocly/theme/components/Tooltip/Tooltip";import{styled as s}from"../../styled-components.js";function d({name:r,color:e,description:o,icon:t}){return a(x,{tip:o,placement:"top",disabled:!o,children:a(m,{color:e,icon:t&&a(g,{icon:t}),children:r})},r)}function h({badges:r,children:e}){if(!r)return a(n,{children:e});const o=r.filter(({position:i})=>i==="before"),t=r.filter(({position:i})=>i==="after");return c(n,{children:[o.map(d),e,t.map(d)]})}const _=p(h),m=s(f)`
+import{jsx as a,Fragment as i,jsxs as m}from"react/jsx-runtime";import{memo as p}from"react";import{css as c}from"styled-components";import{Tag as g}from"@redocly/theme/components/Tag/Tag";import{GenericIcon as l}from"@redocly/theme/icons/GenericIcon/GenericIcon";import{Tooltip as f}from"@redocly/theme/components/Tooltip/Tooltip";import{styled as s}from"../../styled-components.js";import{splitBadgesByPosition as x}from"../../utils/index.js";function n({name:r,color:e,description:o,icon:t}){return a(f,{tip:o,placement:"top",disabled:!o,children:a(d,{color:e,icon:t&&a(l,{icon:t}),children:r})},r)}function b({badges:r,children:e}){if(!r)return a(i,{children:e});const{before:o,after:t}=x(r);return m(i,{children:[o.map(n),e,t.map(n)]})}const _=p(b),d=s(g)`
   margin: 0;
-  ${({deprecated:r})=>r&&l`
+  ${({deprecated:r})=>r&&c`
       color: var(--badge-deprecated-text-color);
       background-color: var(--badge-deprecated-bg-color);
       border-radius: var(--badge-deprecated-border-radius);
@@ -9,7 +9,7 @@ import{jsx as a,Fragment as n,jsxs as c}from"react/jsx-runtime";import{memo as p
   svg {
     flex-shrink: 0;
   }
-`,k=s(m)`
+`,k=s(d)`
   margin: 0;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
@@ -17,4 +17,4 @@ import{jsx as a,Fragment as n,jsxs as c}from"react/jsx-runtime";import{memo as p
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-`;export{_ as CustomBadges,k as NavigationBadge,m as StyledBadge};
+`;export{_ as CustomBadges,k as NavigationBadge,d as StyledBadge,n as renderBadge};

package/lib/components/common/index.d.ts

@@ -4,7 +4,7 @@ export { ShareLinkToField, generateDeepLink } from './LinkToField.js';
 export { deprecatedCss } from './mixins.js';
 export { Container, HttpVerb, MimeLabel } from './styled.js';
 export { CodeBlockPanel } from './CodeBlockPanel.js';
-export { CustomBadges, StyledBadge, NavigationBadge } from './Badges.js';
+export { CustomBadges, StyledBadge, NavigationBadge, renderBadge } from './Badges.js';
 export { ExpandableExample } from './ExpandableExample/index.js';
 export * from './Fields/index.js';
 export * from './panels.js';

package/lib/components/common/index.js

@@ -1 +1 @@
-import{Select as r}from"./Select/index.js";import{ShareLinkToField as p,generateDeepLink as a}from"./LinkToField.js";import{deprecatedCss as x}from"./mixins.js";import{Container as d,HttpVerb as n,MimeLabel as i}from"./styled.js";import{CodeBlockPanel as k}from"./CodeBlockPanel.js";import{CustomBadges as s,StyledBadge as L,NavigationBadge as S}from"./Badges.js";import{ExpandableExample as C}from"./ExpandableExample/index.js";export*from"./Fields/index.js";export*from"./panels.js";import{FieldsGroupHeader as u}from"./headers.js";import{ShareLink as F,Link as H}from"./linkify.js";export*from"./schema.js";import{Skeleton as D}from"./Skeleton/index.js";export{k as CodeBlockPanel,d as Container,s as CustomBadges,C as ExpandableExample,u as FieldsGroupHeader,n as HttpVerb,H as Link,i as MimeLabel,S as NavigationBadge,r as Select,F as ShareLink,p as ShareLinkToField,D as Skeleton,L as StyledBadge,x as deprecatedCss,a as generateDeepLink};
+import{Select as o}from"./Select/index.js";import{ShareLinkToField as p,generateDeepLink as a}from"./LinkToField.js";import{deprecatedCss as x}from"./mixins.js";import{Container as f,HttpVerb as n,MimeLabel as i}from"./styled.js";import{CodeBlockPanel as g}from"./CodeBlockPanel.js";import{CustomBadges as s,StyledBadge as B,NavigationBadge as L,renderBadge as S}from"./Badges.js";import{ExpandableExample as b}from"./ExpandableExample/index.js";export*from"./Fields/index.js";export*from"./panels.js";import{FieldsGroupHeader as E}from"./headers.js";import{ShareLink as H,Link as v}from"./linkify.js";export*from"./schema.js";import{Skeleton as G}from"./Skeleton/index.js";export{g as CodeBlockPanel,f as Container,s as CustomBadges,b as ExpandableExample,E as FieldsGroupHeader,n as HttpVerb,v as Link,i as MimeLabel,L as NavigationBadge,o as Select,H as ShareLink,p as ShareLinkToField,G as Skeleton,B as StyledBadge,x as deprecatedCss,a as generateDeepLink,S as renderBadge};

package/lib/models/field.js

@@ -1 +1 @@
-import{REDOCLY_TEAMS_RBAC as m}from"@redocly/config";import{joinWithSeparator as M}from"../services/index.js";import{extractExtensions as V,getValueFromMdParsedExtension as E,mapValues as I,removePercentChart as L}from"../utils/index.js";import{getSchema as T}from"./schema.js";import{getExamples as _}from"./example.js";const F={path:{style:"simple",explode:!1},query:{style:"form",explode:!0},header:{style:"simple",explode:!1},cookie:{style:"form",explode:!0},querystring:{style:"form",explode:!0}};function N(l,i,p,a,d,x,g=p){const{resolved:e}=l.deref(i),P=i.kind||"field",f=i.name||e.name,n=e.in,v=!!e.required;let r=e.schema,u,s="",c;if(!r&&e.in&&e.content){s=Object.keys(e.content)[0];const t=e.content[s];r=t&&t?.example?{...l.deref(t.schema,x,!0).resolved,example:e.example||t.example}:t.schema}const h=M(d.parentFieldFullPath,L(f||"")),o=T({parser:l,schemaOrRef:r||{},pointer:p,options:a,baseRefsStack:x,absolutePointer:i.$ref||e.schema?.absolutePointer||g,deps:{...d,parentFieldFullPath:h,in:n}}),w=e.description===void 0?E(o,"description")||"":E(e,"description"),R=e.example||o.example,y=e.examples||e.content?.[s]?.examples,S=y?I(y,(t,C)=>_({parser:l,infoOrRef:t,mime:C,encoding:e.encoding})):void 0;s?u=s:e.style?c=e.style:n&&(c=F[n]?.style??"form");const A=e.explode===void 0&&n?F[n]?.explode??!0:!!e.explode,b=e.deprecated===void 0?o.deprecated:e.deprecated,k=a.showExtensions?V(e,a.showExtensions):void 0,q=o?.const||e?.const||"";return{deps:d||{},schema:o,name:f,required:v,description:w,example:R,examples:S,deprecated:b,in:n,kind:P,extensions:k,explode:A,style:c,const:q,serializationMime:u,fieldFullPath:h,...e.allowReserved&&{allowReserved:e.allowReserved},[m]:e[m]||o[m]}}export{N as getField};
+import{REDOCLY_TEAMS_RBAC as m}from"@redocly/config";import{joinWithSeparator as V}from"../services/index.js";import{extractExtensions as I,getValueFromMdParsedExtension as E,mapValues as L,removePercentChart as T}from"../utils/index.js";import{getSchema as _}from"./schema.js";import{getExamples as j}from"./example.js";const F={path:{style:"simple",explode:!1},query:{style:"form",explode:!0},header:{style:"simple",explode:!1},cookie:{style:"form",explode:!0},querystring:{style:"form",explode:!0}};function U(l,i,p,a,d,x,b=p){const{resolved:e}=l.deref(i),P=i.kind||"field",f=i.name||e.name,o=e.in,v=!!e.required;let r=e.schema,u,s="",c;if(!r&&e.in&&e.content){s=Object.keys(e.content)[0];const n=e.content[s];r=n&&n?.example?{...l.deref(n.schema,x,!0).resolved,example:e.example||n.example}:n.schema}const h=V(d.parentFieldFullPath,T(f||"")),t=_({parser:l,schemaOrRef:r||{},pointer:p,options:a,baseRefsStack:x,absolutePointer:i.$ref||e.schema?.absolutePointer||b,deps:{...d,parentFieldFullPath:h,in:o}}),w=e.description===void 0?E(t,"description")||"":E(e,"description"),R=e.example||t.example,y=e.examples||e.content?.[s]?.examples,S=y?L(y,(n,M)=>j({parser:l,infoOrRef:n,mime:M,encoding:e.encoding})):void 0;s?u=s:e.style?c=e.style:o&&(c=F[o]?.style??"form");const A=e.explode===void 0&&o?F[o]?.explode??!0:!!e.explode,k=e.deprecated===void 0?t.deprecated:e.deprecated,q=a.showExtensions?I(e,a.showExtensions):void 0,C=t?.const||e?.const||"",g=e["x-badges"]??t.schema?.["x-badges"];return{deps:d||{},schema:t,name:f,required:v,description:w,example:R,examples:S,deprecated:k,in:o,kind:P,extensions:q,explode:A,style:c,const:C,serializationMime:u,fieldFullPath:h,...g?.length&&{badges:g},...e.allowReserved&&{allowReserved:e.allowReserved},[m]:e[m]||t[m]}}export{U as getField};

package/lib/models/types.d.ts

@@ -124,6 +124,7 @@ export type FieldModel = {
     allowReserved?: boolean;
     deps: Deps;
     absolutePointer?: string;
+    badges?: OpenAPIXBadges[];
     serverValues?: {
         [serverUrl: string]: {
             example?: string;

package/lib/types/open-api.d.ts

@@ -141,6 +141,7 @@ export interface OpenAPIParameter extends ParsedDescription {
     };
     encoding?: Record<string, OpenAPIEncoding>;
     const?: any;
+    'x-badges'?: OpenAPIXBadges[];
 }
 export interface OpenAPIExample extends ParsedDescriptionWithSummary {
     value: any;
@@ -213,6 +214,7 @@ export interface OpenAPISchema extends ParsedDescription {
     prefixItems?: OpenAPISchema[];
     additionalItems?: OpenAPISchema | boolean;
     xml?: XMLObject;
+    'x-badges'?: OpenAPIXBadges[];
 }
 export interface OpenAPIDiscriminator {
     propertyName: string;

package/lib/utils/badges.d.ts

@@ -0,0 +1,5 @@
+import type { OpenAPIXBadges } from '../types/index.js';
+export declare function splitBadgesByPosition(badges: OpenAPIXBadges[] | undefined): {
+    before: OpenAPIXBadges[];
+    after: OpenAPIXBadges[];
+};

package/lib/utils/badges.js

@@ -0,0 +1 @@
+function f(e){return e?{before:e.filter(({position:r})=>r==="before"),after:e.filter(({position:r})=>r!=="before")}:{before:[],after:[]}}export{f as splitBadgesByPosition};

package/lib/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './badges.js';
 export * from './JsonPointer.js';
 export * from './openapi.js';
 export * from './helpers.js';

package/lib/utils/index.js

@@ -1 +1 @@
-export*from"./JsonPointer.js";export*from"./openapi.js";export*from"./helpers.js";export*from"./dom.js";export*from"./debug.js";export*from"./sort.js";export*from"./argValuesHelpers.js";export*from"./theme-helpers.js";export*from"./debounce.js";export*from"./security-details.js";export*from"./session-storage.js";export*from"./local-storage.js";export*from"./parameters.js";export*from"./string.js";export*from"./compose.js";export*from"./saveTextBeforeHeading.js";export*from"./path.js";export*from"./queryString.js";export*from"./isMobile.js";export*from"./replaceVariables.js";export*from"./areArraysEqual.js";export*from"./hasNestedFields.js";export*from"./getBreadcrumbs.js";export*from"./calculateMaxLength.js";export*from"./configure-helpers.js";export*from"./telemetry.js";
+export*from"./badges.js";export*from"./JsonPointer.js";export*from"./openapi.js";export*from"./helpers.js";export*from"./dom.js";export*from"./debug.js";export*from"./sort.js";export*from"./argValuesHelpers.js";export*from"./theme-helpers.js";export*from"./debounce.js";export*from"./security-details.js";export*from"./session-storage.js";export*from"./local-storage.js";export*from"./parameters.js";export*from"./string.js";export*from"./compose.js";export*from"./saveTextBeforeHeading.js";export*from"./path.js";export*from"./queryString.js";export*from"./isMobile.js";export*from"./replaceVariables.js";export*from"./areArraysEqual.js";export*from"./hasNestedFields.js";export*from"./getBreadcrumbs.js";export*from"./calculateMaxLength.js";export*from"./configure-helpers.js";export*from"./telemetry.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/openapi-docs",
-  "version": "3.19.0",
+  "version": "3.20.0-next.1",
   "description": "Redocly OpenAPI Docs",
   "type": "module",
   "main": "lib/index.js",
@@ -14,7 +14,7 @@
     "npm": ">=10.0.0"
   },
   "peerDependencies": {
-    "@redocly/theme": ">=0.63.0-next.0",
+    "@redocly/theme": ">=0.64.0-next.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
@@ -39,7 +39,7 @@
     "util": "~0.12.5",
     "web-vitals": "3.3.1",
     "@redocly/config": "0.44.1",
-    "@redocly/replay": "0.22.0"
+    "@redocly/replay": "0.23.0-next.1"
   },
   "devDependencies": {
     "@shikijs/transformers": "3.21.0",
@@ -71,7 +71,7 @@
     "url": "~0.11.0",
     "vite": "7.2.6",
     "vitest": "4.0.10",
-    "@redocly/theme": "0.63.0"
+    "@redocly/theme": "0.64.0-next.1"
   },
   "scripts": {
     "start": "pnpm run copy-highlight-hook && vite",