@redocly/openapi-docs 3.12.0 → 3.12.2

package/lib/components/Schema/Schema.js

@@ -1,5 +1,66 @@
-import{jsx as r}from"react/jsx-runtime";import{memo as S}from"react";import{useAtomValue as g}from"jotai";import{useLocation as I}from"react-router-dom";import{ArraySchema as b}from"./ArraySchema.js";import{ObjectSchema as p}from"./ObjectSchema.js";import{OneOfSchema as C}from"./OneOfSchema.js";import{RecursiveSchema as s}from"./RecursiveSchema.js";import{operationStore as j}from"../../jotai/operation.js";import{FieldDetails as A}from"../PropertyDetails/index.js";import{pathIncludesLink as P}from"../../utils/index.js";import{styled as k}from"../../styled-components.js";function w({schema:e,onDiscriminatorChange:u,onOneOfChange:n,...o}){const{activeOneOf:d}=g(j(e?.operationPointer||"")),h=I();if(!e)return null;const{type:t,oneOf:i,discriminatorProp:f,isCircular:O}=e;if(O)return r(s,{schema:e});if(f!==void 0){if(!i||!i.length)return console.warn(`Looks like you are using discriminator wrong: you don't have any definition inherited from the ${e.title}`),null;const m=i.findIndex((N,v)=>P(h,`d=${v}`)),l=m===-1?0:m,y=d[e.pointer]!==void 0?d[e.pointer]:l,a=i[y];return a?.isCircular?r(s,{schema:a}):r(p,{...o,schema:a,discriminator:{fieldName:f,parentSchema:e,activeOneOfIdx:l,onChange:u},onOneOfChange:n})}if(i!==void 0&&i.length>1)return r(C,{...o,schema:e,onChange:n});const c=Array.isArray(t)?t:[t];if(c.includes("object")){if(e.fields?.length)return r(p,{...o,schema:e,onOneOfChange:n})}else if(c.includes("array"))return r(b,{...o,schema:e,onOneOfChange:n});const x={schema:e,name:"",description:e.description,required:!1,deprecated:!1};return r(L,{children:r(A,{field:x,fieldParentsName:o.fieldParentsName})})}const H=S(w),L=k.div`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAtomValue } from 'jotai';
+import { useLocation } from 'react-router-dom';
+import { ArraySchema } from './ArraySchema.js';
+import { ObjectSchema } from './ObjectSchema.js';
+import { OneOfSchema } from './OneOfSchema.js';
+import { RecursiveSchema } from './RecursiveSchema.js';
+import { operationStore } from '../../jotai/operation.js';
+import { FieldDetails } from '../PropertyDetails/index.js';
+import { pathIncludesLink } from '../../utils/index.js';
+import { styled } from '../../styled-components.js';
+function SchemaComponent({ schema, onDiscriminatorChange, onOneOfChange, ...rest }) {
+    const { activeOneOf } = useAtomValue(operationStore(schema?.operationPointer || ''));
+    const location = useLocation();
+    if (!schema) {
+        return null;
+    }
+    const { type, oneOf, discriminatorProp, isCircular } = schema;
+    if (isCircular) {
+        return _jsx(RecursiveSchema, { schema: schema });
+    }
+    if (discriminatorProp !== undefined) {
+        if (!oneOf || !oneOf.length) {
+            console.warn(`Looks like you are using discriminator wrong: you don't have any definition inherited from the ${schema.title}`);
+            return null;
+        }
+        const locationOneOfIdx = oneOf.findIndex((_, index) => pathIncludesLink(location, `d=${index}`));
+        const activeOneOfIdx = locationOneOfIdx === -1 ? 0 : locationOneOfIdx;
+        const activeSchemaIndex = activeOneOf[schema.pointer] !== undefined ? activeOneOf[schema.pointer] : activeOneOfIdx;
+        const activeSchema = oneOf[activeSchemaIndex];
+        return activeSchema?.isCircular ? (_jsx(RecursiveSchema, { schema: activeSchema })) : (_jsx(ObjectSchema, { ...rest, schema: activeSchema, discriminator: {
+                fieldName: discriminatorProp,
+                parentSchema: schema,
+                activeOneOfIdx: activeOneOfIdx,
+                onChange: onDiscriminatorChange,
+            }, onOneOfChange: onOneOfChange }));
+    }
+    if (oneOf !== undefined && oneOf.length > 1) {
+        return (_jsx(OneOfSchema, { ...rest, schema: schema, onChange: onOneOfChange }));
+    }
+    const types = Array.isArray(type) ? type : [type];
+    if (types.includes('object')) {
+        if (schema.fields?.length) {
+            return _jsx(ObjectSchema, { ...rest, schema: schema, onOneOfChange: onOneOfChange });
+        }
+    }
+    else if (types.includes('array')) {
+        return _jsx(ArraySchema, { ...rest, schema: schema, onOneOfChange: onOneOfChange });
+    }
+    const field = {
+        schema,
+        name: '',
+        description: schema.description,
+        required: false,
+        deprecated: false,
+    };
+    return (_jsx(Wrapper, { children: _jsx(FieldDetails, { field: field, fieldParentsName: rest.fieldParentsName }) }));
+}
+export const Schema = memo(SchemaComponent);
+const Wrapper = styled.div `
   width: 100%;
   padding: var(--spacing-xxs) 0;
   border-bottom: 1px solid var(--border-color-primary);
-`;export{H as Schema};
+`;
+//# sourceMappingURL=Schema.js.map

package/lib/components/Schema/SubSchema.js

@@ -1 +1,20 @@
-import{jsx as u}from"react/jsx-runtime";import{memo as S}from"react";import{useLocation as y}from"react-router-dom";import{useAtomValue as b}from"jotai/index";import{pathIncludesLink as h}from"../../utils/index.js";import{operationStore as A}from"../../jotai/operation.js";import{extractTypeFromDeepLink as T}from"./helpers.js";import{ViewNested as $}from"../ViewNested/index.js";import{useTranslate as w}from"../../hooks/index.js";function N({expandByDefault:t,deepLink:e,level:r,expandable:a=!1,isNestedArray:n=!1,isArray:m="",propertyLength:o="",children:p,operationPointer:s}){const i=w(),c=y(),l=h(c,e),f=T(e),x=b(A(s||"")),d=`${i("openapi.actions.show","Show")} ${Number(o)===1?"":o} ${m&&"array "}${o!==1?"properties":"property"}`;return u($,{expandByDefault:t||l,level:r,isNestedArray:n,expandable:a,expandText:d,children:p,expandedAll:x[f]?.expandedAll})}const L=S(N);export{L as SubSchema};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAtomValue } from 'jotai/index';
+import { pathIncludesLink } from '../../utils/index.js';
+import { operationStore } from '../../jotai/operation.js';
+import { extractTypeFromDeepLink } from './helpers.js';
+import { ViewNested } from '../ViewNested/index.js';
+import { useTranslate } from '../../hooks/index.js';
+function SubSchemaComponent({ expandByDefault, deepLink, level, expandable = false, isNestedArray = false, isArray = '', propertyLength = '', children, operationPointer, }) {
+    const translate = useTranslate();
+    const location = useLocation();
+    const expandByLocation = pathIncludesLink(location, deepLink);
+    const type = extractTypeFromDeepLink(deepLink);
+    const operationState = useAtomValue(operationStore(operationPointer || ''));
+    const expandText = `${translate('openapi.actions.show', 'Show')} ${Number(propertyLength) === 1 ? '' : propertyLength} ${isArray && 'array '}${propertyLength !== 1 ? 'properties' : 'property'}`;
+    return (_jsx(ViewNested, { expandByDefault: expandByDefault || expandByLocation, level: level, isNestedArray: isNestedArray, expandable: expandable, expandText: expandText, children: children, expandedAll: operationState[type]?.expandedAll }));
+}
+export const SubSchema = memo(SubSchemaComponent);
+//# sourceMappingURL=SubSchema.js.map

package/lib/components/Schema/helpers.js

@@ -1 +1,16 @@
-import{isUndefined as o}from"@redocly/theme/core/openapi";const i=e=>{if(!e)return"";const t=e.match(/t=(request|response)/);return t?t[1]:""},u=4;function f({schemasExpansionLevel:e,level:t,required:n}){const r=Number(t)-1;return o(e)?!!n&&u>=r:e>=r}export{i as extractTypeFromDeepLink,f as getExpandByDefault};
+import { isUndefined } from '@redocly/theme/core/openapi';
+export const extractTypeFromDeepLink = (str) => {
+    if (!str)
+        return '';
+    const match = str.match(/t=(request|response)/);
+    return match ? match[1] : '';
+};
+const DEFAULT_REQUIRE_EXPAND_LEVEL = 4;
+export function getExpandByDefault({ schemasExpansionLevel, level, required, }) {
+    const normalizedLevel = Number(level) - 1;
+    if (!isUndefined(schemasExpansionLevel)) {
+        return schemasExpansionLevel >= normalizedLevel;
+    }
+    return Boolean(required) && DEFAULT_REQUIRE_EXPAND_LEVEL >= normalizedLevel;
+}
+//# sourceMappingURL=helpers.js.map

package/lib/components/Schema/index.js

@@ -1 +1,5 @@
-import{Schema as m}from"./Schema.js";import{ObjectSchema as a}from"./ObjectSchema.js";import{OneOfSchema as f}from"./OneOfSchema.js";import{ArraySchema as h}from"./ArraySchema.js";export{h as ArraySchema,a as ObjectSchema,f as OneOfSchema,m as Schema};
+export { Schema } from './Schema.js';
+export { ObjectSchema } from './ObjectSchema.js';
+export { OneOfSchema } from './OneOfSchema.js';
+export { ArraySchema } from './ArraySchema.js';
+//# sourceMappingURL=index.js.map

package/lib/components/Schema/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/Schema/useOneOfLocationIdx.js

@@ -1 +1,11 @@
-import{useLocation as s}from"react-router-dom";import{useMemo as r}from"react";const i=/(?=oneof=)/g;function m(o,n){const t=s();return r(()=>o.findIndex((c,e)=>t.hash.split(i)[n]?.includes(`oneof=${e}`)),[n,t.hash,o])}export{m as useOneOfLocationIdx};
+import { useLocation } from 'react-router-dom';
+import { useMemo } from 'react';
+const OneOfLocationRegex = /(?=oneof=)/g;
+export function useOneOfLocationIdx(oneOf, level) {
+    const location = useLocation();
+    return useMemo(() => oneOf.findIndex((_, index) => {
+        const result = location.hash.split(OneOfLocationRegex);
+        return result[level]?.includes(`oneof=${index}`);
+    }), [level, location.hash, oneOf]);
+}
+//# sourceMappingURL=useOneOfLocationIdx.js.map

package/lib/components/SchemaDefinition/SchemaDefinition.js

@@ -1,3 +1,66 @@
-import{jsx as o,jsxs as S}from"react/jsx-runtime";import{memo as g,useCallback as A,useMemo as C}from"react";import{LayoutVariant as j}from"@redocly/config";import{useAtom as k,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 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 B}from"../../styled-components.js";const K=(t,i)=>{if(!t)return{};const n={schema:{$ref:t}};return i&&(n.examples={example:{$ref:i}}),n};function L({schemaRef:t,exampleRef:i,showReadOnly:n=!0,showWriteOnly:v=!1}){const s=x(_),{parser:c,options:p}=x($),l=T(),e=C(()=>w(c,"json",!1,K(t,i),p,{operation:{pointer:"SchemaDefinitionComponent"}}),[i,p,c,t]),[f,d]=k(O(e.operation?.pointer)),y=A(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}})}f.activeExampleName!==r&&d({activeExampleName:r})},[e?.examples,e.schema,f.activeExampleName,d,l]),h=s===j.STACKED;return o(b,{children:S(N,{layout:s,children:[S(D,{isStacked:h,children:[e.schema?.description&&o(q,{children:o(W,{source:e.schema?.description})}),o(V,{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 ie=g(L),q=B.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from 'react';
+import { LayoutVariant } from '@redocly/config';
+import { useAtom, useAtomValue } from 'jotai';
+import { useWriteAtom } from '../../jotai/use-write-atom.js';
+import { SamplesMiddlePanel, SamplesPanel, Row, Section, CodeBlockPanel } from '../common/index.js';
+import { getMediaType } from '../../models/index.js';
+import { MediaTypeSamples } from '../PayloadSamples/index.js';
+import { Schema } from '../Schema/index.js';
+import { Markdown } from '../Markdown/index.js';
+import { layoutAtom } from '../../jotai/app.js';
+import { globalStoreAtom } from '../../jotai/store.js';
+import { operationStore } from '../../jotai/operation.js';
+import { styled } from '../../styled-components.js';
+const getMediaTypeInfo = (schemaRef, exampleRef) => {
+    if (!schemaRef) {
+        return {};
+    }
+    const info = {
+        schema: { $ref: schemaRef },
+    };
+    if (exampleRef) {
+        info.examples = { example: { $ref: exampleRef } };
+    }
+    return info;
+};
+function SchemaDefinitionComponent({ schemaRef, exampleRef, showReadOnly = true, showWriteOnly = false, }) {
+    const layout = useAtomValue(layoutAtom);
+    const { parser, options } = useAtomValue(globalStoreAtom);
+    const writeAtom = useWriteAtom();
+    const mediaModel = useMemo(() => getMediaType(parser, 'json', false, getMediaTypeInfo(schemaRef, exampleRef), options, {
+        operation: { pointer: 'SchemaDefinitionComponent' },
+    }), [exampleRef, options, parser, schemaRef]);
+    const [operationState, setOperation] = useAtom(operationStore(mediaModel.operation?.pointer));
+    const handleMediaTypeChange = useCallback((key) => {
+        if (!mediaModel.schema)
+            return;
+        const schema = mediaModel.schema;
+        const schemaOneOf = schema.oneOf;
+        if (schemaOneOf && mediaModel?.examples && Object.keys(mediaModel?.examples).includes(key)) {
+            const activeOneOfIndex = schemaOneOf.findIndex((schema) => schema.title === key);
+            if (activeOneOfIndex !== -1 && schema) {
+                writeAtom(operationStore(schema.operationPointer), {
+                    activeExampleName: schema.oneOf?.[activeOneOfIndex]?.title,
+                    activeOneOf: { [schema.pointer]: activeOneOfIndex },
+                });
+            }
+        }
+        if (operationState.activeExampleName !== key) {
+            setOperation({ activeExampleName: key });
+        }
+    }, [
+        mediaModel?.examples,
+        mediaModel.schema,
+        operationState.activeExampleName,
+        setOperation,
+        writeAtom,
+    ]);
+    const isStacked = layout === LayoutVariant.STACKED;
+    return (_jsx(Section, { children: _jsxs(Row, { layout: layout, children: [_jsxs(SamplesMiddlePanel, { isStacked: isStacked, children: [mediaModel.schema?.description && (_jsx(Description, { children: _jsx(Markdown, { source: mediaModel.schema?.description }) })), _jsx(Schema, { skipWriteOnly: !showWriteOnly, skipReadOnly: !showReadOnly, schema: mediaModel.schema, level: 1 })] }), _jsx(SamplesPanel, { isStacked: isStacked, children: _jsx(CodeBlockPanel, { className: "panel-response-samples", children: _jsx(MediaTypeSamples, { mediaType: mediaModel, onChange: handleMediaTypeChange }) }) })] }) }));
+}
+export const SchemaDefinition = memo(SchemaDefinitionComponent);
+const Description = styled.div `
   margin-bottom: var(--spacing-vertical);
-`;export{ie as SchemaDefinition};
+`;
+//# sourceMappingURL=SchemaDefinition.js.map

package/lib/components/SchemaDefinition/index.js

@@ -1 +1,2 @@
-import{SchemaDefinition as o}from"./SchemaDefinition.js";export{o as SchemaDefinition};
+export { SchemaDefinition } from './SchemaDefinition.js';
+//# sourceMappingURL=index.js.map

package/lib/components/SectionContent/SectionContent.js

@@ -1,13 +1,56 @@
-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 _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useAtomValue } from 'jotai';
+import { LayoutVariant } from '@redocly/config';
+import { breakpoints } from '@redocly/theme/core/openapi';
+import { OpenApiHeader } from '@redocly/theme/components/OpenApiDocs/hooks/OpenApiHeader';
+import { PageFooter } from '../PageFooter/index.js';
+import { globalOptionsAtom } from '../../jotai/store.js';
+import { RenderHook } from '../RenderHook/index.js';
+import { RightPanel } from '../RightPanel/index.js';
+import { layoutAtom } from '../../jotai/app.js';
+import { Row, SamplesMiddlePanel, SamplesPanel } from '../common/index.js';
+import { Items } from '../ContentItems/Items.js';
+import { ContentItem } from '../ContentItem/index.js';
+import { styled } from '../../styled-components.js';
+export function SectionContent({ items, hideFooterAndHeader, }) {
+    const { unstable_hooks: { MiddlePanelHeader }, routingBasePath, } = useAtomValue(globalOptionsAtom);
+    const layout = useAtomValue(layoutAtom);
+    const isStacked = layout === LayoutVariant.STACKED;
+    const renderFooter = useMemo(() => {
+        if (hideFooterAndHeader) {
+            return null;
+        }
+        return (_jsx(MiddlePanelWrapper, { isStacked: isStacked, children: _jsx(PageFooter, {}) }));
+    }, [hideFooterAndHeader, isStacked]);
+    const renderHeader = useMemo(() => {
+        if (hideFooterAndHeader || (!OpenApiHeader && !MiddlePanelHeader)) {
+            return null;
+        }
+        return (_jsx(MiddlePanelWrapper, { isStacked: isStacked, children: MiddlePanelHeader ? (_jsx(RenderHook, { Hook: MiddlePanelHeader, props: undefined })) : (_jsx(OpenApiHeader, {})) }));
+    }, [MiddlePanelHeader, hideFooterAndHeader, isStacked]);
+    if (items.length === 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [renderHeader, _jsxs(Row, { layout: layout, children: [_jsx(SectionContainer, { layout: layout, children: items
+                            .filter(({ type }) => type === 'section')
+                            .map((item) => (_jsx(ContentItem, { item: item, routingBasePath: routingBasePath, children: _jsx(Items, { items: item.items, routingBasePath: routingBasePath }) }, item.id))) }), _jsx(RightPanelContainer, { isStacked: isStacked, tabIndex: 0, children: _jsx(RightPanel, { item: items[0] }) })] }), items
+                .filter(({ type }) => type !== 'section')
+                .map((item) => (_jsx(ContentItem, { item: item, routingBasePath: routingBasePath, children: _jsx(Items, { items: item.items, routingBasePath: routingBasePath }) }, item.id))), renderFooter] }));
+}
+const MiddlePanelWrapper = styled(SamplesMiddlePanel) `
   align-self: flex-start;
   padding-top: var(--panel-gap-vertical);
   padding-bottom: var(--panel-gap-vertical);
-`,R=m.div`
+`;
+export const SectionContainer = styled.div `
   width: 100%;
 
-  @media screen and (min-width: ${k.large}) {
-    width: ${({layout:e})=>e===c.STACKED?"100%":"calc(100% - var(--panel-samples-width))"};
+  @media screen and (min-width: ${breakpoints.large}) {
+    width: ${({ layout }) => layout === LayoutVariant.STACKED ? '100%' : 'calc(100% - var(--panel-samples-width))'};
   }
-`,_=m(M)`
+`;
+export const RightPanelContainer = styled(SamplesPanel) `
   margin: var(--spacing-base) 0;
-`;export{_ as RightPanelContainer,R as SectionContainer,G as SectionContent};
+`;
+//# sourceMappingURL=SectionContent.js.map

package/lib/components/SectionContent/index.js

@@ -1 +1,2 @@
-import{SectionContent as e,SectionContainer as o,RightPanelContainer as i}from"./SectionContent.js";export{i as RightPanelContainer,o as SectionContainer,e as SectionContent};
+export { SectionContent, SectionContainer, RightPanelContainer } from './SectionContent.js';
+//# sourceMappingURL=index.js.map

package/lib/components/SectionItem/SectionItem.js

@@ -1 +1,14 @@
-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 _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { LayoutVariant } from '@redocly/config';
+import { SamplesMiddlePanel, Row } from '../common/index.js';
+import { Markdown } from '../Markdown/index.js';
+import { ExternalDocumentation } from '../ExternalDocumentation/index.js';
+function SectionItemComponent({ item, layout }) {
+    const { externalDocs, ast, description } = item;
+    const isStacked = layout === LayoutVariant.STACKED;
+    const isFullWidth = !item.parent || item.parent.type !== 'tag';
+    return (_jsxs(_Fragment, { children: [_jsx(Markdown, { ast: ast, source: description, htmlWrap: (component) => (_jsx(SamplesMiddlePanel, { compact: true, fullWidth: isFullWidth, isStacked: isStacked, children: component })) }), externalDocs && (_jsx(Row, { children: _jsx(SamplesMiddlePanel, { compact: true, fullWidth: isFullWidth, isStacked: isStacked, children: _jsx(ExternalDocumentation, { externalDocs: externalDocs }) }) }))] }));
+}
+export const SectionItem = memo(SectionItemComponent);
+//# sourceMappingURL=SectionItem.js.map

package/lib/components/SectionItem/index.js

@@ -1 +1,2 @@
-import{SectionItem as t}from"./SectionItem.js";export{t as SectionItem};
+export { SectionItem } from './SectionItem.js';
+//# sourceMappingURL=index.js.map

package/lib/components/Security/Divider.js

@@ -1,4 +1,10 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{styled as s}from"../../styled-components.js";import{Tag as a}from"./styled.js";function d({label:i}){return e(n,{children:[r(a,{className:"tag-grey",children:i})," ",r("hr",{})]})}const n=s.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '../../styled-components.js';
+import { Tag } from './styled.js';
+export function Divider({ label }) {
+    return (_jsxs(Wrapper, { children: [_jsx(Tag, { className: "tag-grey", children: label }), " ", _jsx("hr", {})] }));
+}
+const Wrapper = styled.div `
   font-size: var(--font-size-sm);
   width: 100%;
   display: flex;
@@ -11,4 +17,5 @@ import{jsx as r,jsxs as e}from"react/jsx-runtime";import{styled as s}from"../../
     width: 100%;
     margin-left: var(--spacing-xs);
   }
-`;export{d as Divider};
+`;
+//# sourceMappingURL=Divider.js.map

package/lib/components/Security/OAuthFlow.js

@@ -1 +1,11 @@
-import{jsx as e,Fragment as a,jsxs as n}from"react/jsx-runtime";import{memo as i}from"react";import{SecuritySchemeItem as o}from"./SecuritySchemeItem.js";import{StyledLink as l}from"./styled.js";import{useTranslate as m}from"../../hooks/index.js";function s({flow:r}){const t=m();return n(a,{children:[e(o,{label:`${t("openapi.authorizationUrl","Authorization URL")}:`,value:r?.authorizationUrl&&e(l,{target:"_blank",rel:"noopener noreferrer",href:r?.authorizationUrl,children:r?.authorizationUrl})}),e(o,{label:`${t("openapi.tokenUrl","Token URL")}:`,value:r?.tokenUrl}),e(o,{label:`${t("openapi.refreshUrl","Refresh URL")}:`,value:r?.refreshUrl})]})}const f=i(s);export{f as OAuthFlow};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { SecuritySchemeItem } from './SecuritySchemeItem.js';
+import { StyledLink } from './styled.js';
+import { useTranslate } from '../../hooks/index.js';
+function OAuthFlowComponent({ flow }) {
+    const translate = useTranslate();
+    return (_jsxs(_Fragment, { children: [_jsx(SecuritySchemeItem, { label: `${translate('openapi.authorizationUrl', 'Authorization URL')}:`, value: flow?.['authorizationUrl'] && (_jsx(StyledLink, { target: "_blank", rel: "noopener noreferrer", href: flow?.['authorizationUrl'], children: flow?.['authorizationUrl'] })) }), _jsx(SecuritySchemeItem, { label: `${translate('openapi.tokenUrl', 'Token URL')}:`, value: flow?.['tokenUrl'] }), _jsx(SecuritySchemeItem, { label: `${translate('openapi.refreshUrl', 'Refresh URL')}:`, value: flow?.refreshUrl })] }));
+}
+export const OAuthFlow = memo(OAuthFlowComponent);
+//# sourceMappingURL=OAuthFlow.js.map

package/lib/components/Security/OAuthScopes.js

@@ -1,4 +1,48 @@
-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 _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+import { Markdown } from '../Markdown/index.js';
+import { SecuritySchemeItem } from './SecuritySchemeItem.js';
+import { Tag } from './styled.js';
+import { useTranslate } from '../../hooks/index.js';
+import { getOptionalScopes, getRequiredScopes } from './helper.js';
+import { styled } from '../../styled-components.js';
+function OAuthScopesComponent({ id, securities, flows }) {
+    const requiredScopes = getRequiredScopes(id, securities);
+    return (_jsxs(_Fragment, { children: [_jsx(OAuthRequiredScopes, { flows: flows, requiredScopes: requiredScopes }), _jsx(OAuthOptionalScopes, { flows: flows, requiredScopes: requiredScopes })] }));
+}
+function OAuthOptionalScopes({ flows, requiredScopes }) {
+    return (flows &&
+        Object.keys(flows).map((type) => (_jsx(OAuthOptionalScope, { flow: flows[type], requiredScopes: requiredScopes }, type))));
+}
+function OAuthOptionalScope({ flow, requiredScopes, }) {
+    const translate = useTranslate();
+    const [showScopes, setShowScopes] = useState(false);
+    const flowScopes = Object.keys(flow?.scopes || {});
+    const optionalScopes = getOptionalScopes(requiredScopes, flowScopes);
+    if (optionalScopes.length === 0) {
+        return null;
+    }
+    const toggleScopes = () => {
+        setShowScopes((prevShowScopes) => !prevShowScopes);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(SecuritySchemeItem, { label: _jsxs(ScopeHeader, { onClick: toggleScopes, children: [translate(showScopes ? 'openapi.hideOptionalScopes' : 'openapi.showOptionalScopes', showScopes ? 'Hide optional scopes' : 'Show optional scopes'), _jsx(AnimatedChevronWrapper, { isOpen: showScopes, children: _jsx(ChevronRightIcon, { size: "var(--font-size-base)", color: "var(--tree-content-color-default)" }) })] }), value: " " }), _jsx(ScopesListWrapper, { isOpen: showScopes, children: optionalScopes.map((scope) => (_jsx(SecuritySchemeItem, { label: _jsx(StyledTag, { className: "tag-grey", children: scope }), value: _jsx(Markdown, { source: flow?.scopes[scope] || '' }) }, scope))) })] }));
+}
+function OAuthRequiredScopes({ requiredScopes, flows }) {
+    const translate = useTranslate();
+    if (requiredScopes.length === 0) {
+        return null;
+    }
+    if (flows && Object.keys(flows).length > 0) {
+        return Object.keys(flows).map((type) => (_jsx(OAuthRequiredScope, { flow: flows[type], requiredScopes: requiredScopes }, type)));
+    }
+    return (_jsx(SecuritySchemeItem, { label: translate('openapi.requiredScopes', 'Required scopes'), value: _jsx(Row, { children: requiredScopes.map((scope) => (_jsx(Tag, { className: "tag-grey", children: scope }, scope))) }) }));
+}
+function OAuthRequiredScope({ flow, requiredScopes, }) {
+    const translate = useTranslate();
+    return (_jsxs(_Fragment, { children: [_jsx(SecuritySchemeItem, { label: translate('openapi.requiredScopes', 'Required scopes'), value: " " }), requiredScopes.map((scope) => (_jsx(SecuritySchemeItem, { label: _jsx(StyledTag, { className: "tag-grey", children: scope }), value: _jsx(Markdown, { source: flow?.scopes[scope] || '' }) }, scope)))] }));
+}
+const StyledTag = styled(Tag) `
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
@@ -6,28 +50,34 @@ import{jsx as r,Fragment as p,jsxs as c}from"react/jsx-runtime";import{memo as S
   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`
+`;
+const ScopeHeader = styled.div `
   cursor: pointer;
   display: flex;
   gap: var(--spacing-xxs);
   align-items: center;
   user-select: none;
-`,R=i.div`
+`;
+const Row = styled.div `
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-xxs);
   word-break: normal;
-`,z=i.div`
-  max-height: ${e=>e.isOpen?"1000px":"0"};
-  opacity: ${e=>e.isOpen?"1":"0"};
+`;
+const ScopesListWrapper = styled.div `
+  max-height: ${(props) => (props.isOpen ? '1000px' : '0')};
+  opacity: ${(props) => (props.isOpen ? '1' : '0')};
   overflow: hidden;
   transition:
     max-height 0.5s ease-in-out,
     opacity 0.5s ease-in-out;
-`,C=i.span`
+`;
+const AnimatedChevronWrapper = styled.span `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transform: ${e=>e.isOpen?"rotate(90deg)":"rotate(0deg)"};
+  transform: ${(props) => (props.isOpen ? 'rotate(90deg)' : 'rotate(0deg)')};
   transition: transform 0.5s ease-in-out;
-`,B=S(y);export{B as OAuthScopes};
+`;
+export const OAuthScopes = memo(OAuthScopesComponent);
+//# sourceMappingURL=OAuthScopes.js.map

package/lib/components/Security/Security.js

@@ -1 +1,15 @@
-import{jsx as r,Fragment as i,jsxs as s}from"react/jsx-runtime";import{useState as l}from"react";import{Portal as n}from"@redocly/theme/components/Portal/Portal";import{useModalScrollLock as m}from"@redocly/theme/core/openapi";import{SecurityButton as a}from"./SecurityButton.js";import{SecurityModal as u}from"./SecurityModal.js";function j({securities:o}){const[t,e]=l(!1);return m(t),o.length?s(i,{children:[r(a,{securities:o,onClick:()=>e(!0)}),t&&r(n,{mountId:"api-content",children:r(u,{securities:o,onClose:()=>e(!1)})})]}):null}export{j as Security};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Portal } from '@redocly/theme/components/Portal/Portal';
+import { useModalScrollLock } from '@redocly/theme/core/openapi';
+import { SecurityButton } from './SecurityButton.js';
+import { SecurityModal } from './SecurityModal.js';
+export function Security({ securities }) {
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    useModalScrollLock(isModalVisible);
+    if (!securities.length) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(SecurityButton, { securities: securities, onClick: () => setIsModalVisible(true) }), isModalVisible && (_jsx(Portal, { mountId: "api-content", children: _jsx(SecurityModal, { securities: securities, onClose: () => setIsModalVisible(false) }) }))] }));
+}
+//# sourceMappingURL=Security.js.map

package/lib/components/Security/SecurityButton.js

@@ -1,8 +1,27 @@
-import{jsx as r,jsxs as t}from"react/jsx-runtime";import{Fragment as c}from"react";import{SecurityIcon as v}from"@redocly/theme/icons/SecurityIcon/SecurityIcon";import{Panel as f}from"@redocly/theme/components/Panel/Panel";import{Button as h}from"@redocly/theme/components/Button/Button";import{useTranslate as g}from"../../hooks/index.js";import{styled as e}from"../../styled-components.js";function T({securities:o,onClick:p}){const n=g();return r(y,{header:()=>t(b,{children:[r(v,{}),r(w,{children:n("openapi.security","Security")}),r(x,{onClick:p,variant:"link",children:n("openapi.viewSecurityDetails","View details")})]}),isExpandable:!1,children:r(S,{children:o.map((a,i)=>{const s=o.length>1&&a.schemes.length>1,m=a.schemes.map(({id:l},u)=>t(c,{children:[l,u<a.schemes.length-1&&r(d,{children:" and "})]},l));return t(c,{children:[s?"(":"",m,s?")":"",i<o.length-1&&r(d,{children:" or "})]},i)})})})}const y=e(f)`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { SecurityIcon } from '@redocly/theme/icons/SecurityIcon/SecurityIcon';
+import { Panel } from '@redocly/theme/components/Panel/Panel';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { useTranslate } from '../../hooks/index.js';
+import { styled } from '../../styled-components.js';
+export function SecurityButton({ securities, onClick }) {
+    const translate = useTranslate();
+    const securityHeader = () => {
+        return (_jsxs(SecurityHeader, { children: [_jsx(SecurityIcon, {}), _jsx(Title, { children: translate('openapi.security', 'Security') }), _jsx(ViewDetailsButton, { onClick: onClick, variant: "link", children: translate('openapi.viewSecurityDetails', 'View details') })] }));
+    };
+    return (_jsx(SecurityPanel, { header: securityHeader, isExpandable: false, children: _jsx(SecurityList, { children: securities.map((security, secIndex) => {
+                const isMultiple = securities.length > 1 && security.schemes.length > 1;
+                const schemeNodes = security.schemes.map(({ id }, index) => (_jsxs(Fragment, { children: [id, index < security.schemes.length - 1 && _jsx(Conjunction, { children: " and " })] }, id)));
+                return (_jsxs(Fragment, { children: [isMultiple ? '(' : '', schemeNodes, isMultiple ? ')' : '', secIndex < securities.length - 1 && _jsx(Conjunction, { children: " or " })] }, secIndex));
+            }) }) }));
+}
+const SecurityPanel = styled(Panel) `
   margin-top: var(--spacing-base);
   border: var(--panel-border);
   border-radius: var(--panel-border-radius);
-`,b=e.div`
+`;
+const SecurityHeader = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -12,19 +31,24 @@ import{jsx as r,jsxs as t}from"react/jsx-runtime";import{Fragment as c}from"reac
   background-color: var(--layer-color);
   border-bottom: var(--panel-border);
   border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
-`,x=e(h)`
+`;
+const ViewDetailsButton = styled(Button) `
   margin-left: auto;
   font-size: var(--font-size-sm);
-`,w=e.span`
+`;
+const Title = styled.span `
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-medium);
   color: var(--text-color-primary);
-`,S=e.div`
+`;
+const SecurityList = styled.div `
   flex: 1;
   text-overflow: ellipsis;
   overflow: hidden;
   padding: var(--spacing-xs) var(--spacing-sm);
   color: var(--text-color-primary);
-`,d=e.span`
+`;
+const Conjunction = styled.span `
   color: var(--text-color-description);
-`;export{T as SecurityButton};
+`;
+//# sourceMappingURL=SecurityButton.js.map

package/lib/components/Security/SecurityFlow.js

@@ -1,16 +1,40 @@
-import{jsx as r,Fragment as p,jsxs as i}from"react/jsx-runtime";import{SecuritySchemeItem as a}from"./SecuritySchemeItem.js";import{titleize as v}from"../../utils/index.js";import{OAuthFlow as g}from"./OAuthFlow.js";import{StyledLink as w}from"./styled.js";import{Markdown as x}from"../Markdown/index.js";import{useTranslate as S}from"../../hooks/index.js";import{OAuthScopes as y}from"./OAuthScopes.js";import{styled as m}from"../../styled-components.js";function K({type:o,bearerFormat:c,name:d,flows:t,openIdConnectUrl:n,description:h,id:l,securities:u,in:f}){const e=S();if(!o||!l)return null;const b={http:i(p,{children:[r(a,{label:e("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:o}),r(a,{label:e("openapi.bearerFormat","Bearer Format"),value:c})]}),apiKey:r(a,{label:`${v(f||"")} ${e("openapi.parameterName","parameter name")}:`,value:d}),oauth2:i(p,{children:[r(a,{label:e("openapi.flowType","Flow type"),value:o}),t&&Object.keys(t).map(s=>r(g,{flow:t[s]},s))]}),openIdConnect:r(a,{label:e("openapi.connectUrl","Connect URL"),value:n&&r(w,{target:"_blank",rel:"noopener noreferrer",href:n,children:n})})};return i(F,{children:[r(T,{children:l}),r(x,{source:h}),i(z,{children:[b[o]||null,r(y,{id:l,securities:u,flows:t})]})]})}const F=m.div`
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SecuritySchemeItem } from './SecuritySchemeItem.js';
+import { titleize } from '../../utils/index.js';
+import { OAuthFlow } from './OAuthFlow.js';
+import { StyledLink } from './styled.js';
+import { Markdown } from '../Markdown/index.js';
+import { useTranslate } from '../../hooks/index.js';
+import { OAuthScopes } from './OAuthScopes.js';
+import { styled } from '../../styled-components.js';
+export function SecurityFlow({ type, bearerFormat, name, flows, openIdConnectUrl, description, id, securities, in: apiKeyIn, }) {
+    const translate = useTranslate();
+    if (!type || !id)
+        return null;
+    const schemaType = {
+        http: (_jsxs(_Fragment, { children: [_jsx(SecuritySchemeItem, { label: translate('openapi.httpAuthorizationScheme', 'HTTP Authorization Scheme'), value: type }), _jsx(SecuritySchemeItem, { label: translate('openapi.bearerFormat', 'Bearer Format'), value: bearerFormat })] })),
+        apiKey: (_jsx(SecuritySchemeItem, { label: `${titleize(apiKeyIn || '')} ${translate('openapi.parameterName', 'parameter name')}:`, value: name })),
+        oauth2: (_jsxs(_Fragment, { children: [_jsx(SecuritySchemeItem, { label: translate('openapi.flowType', 'Flow type'), value: type }), flows && Object.keys(flows).map((type) => _jsx(OAuthFlow, { flow: flows[type] }, type))] })),
+        openIdConnect: (_jsx(SecuritySchemeItem, { label: translate('openapi.connectUrl', 'Connect URL'), value: openIdConnectUrl && (_jsx(StyledLink, { target: "_blank", rel: "noopener noreferrer", href: openIdConnectUrl, children: openIdConnectUrl })) })),
+    };
+    return (_jsxs(Wrapper, { children: [_jsx(TitleSchema, { children: id }), _jsx(Markdown, { source: description }), _jsxs(List, { children: [schemaType[type] || null, _jsx(OAuthScopes, { id: id, securities: securities, flows: flows })] })] }));
+}
+const Wrapper = styled.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);
-`,z=m.div`
+`;
+const List = styled.div `
   width: 100%;
   margin-top: var(--spacing-md);
-`,T=m.p`
+`;
+const TitleSchema = styled.p `
   font-size: var(--font-size-base);
   margin: 0 0 var(--spacing-xs);
   text-transform: capitalize;
   font-weight: var(--font-weight-semibold);
-`;export{K as SecurityFlow};
+`;
+//# sourceMappingURL=SecurityFlow.js.map