@redocly/openapi-docs 3.12.0 → 3.12.2

package/lib/components/ApiInfo/ApiInfo.js

@@ -1 +1,29 @@
-import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useAtomValue as A}from"jotai";import{LayoutVariant as g}from"@redocly/config";import{AfterOpenApiTitle as h}from"@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiTitle";import{PageActions as D}from"@redocly/theme/components/PageActions/PageActions";import{SamplesMiddlePanel as k,Row as S}from"../common/index.js";import{ExternalDocumentation as M}from"../ExternalDocumentation/index.js";import{Markdown as s}from"../Markdown/index.js";import{ApiHeader as T}from"./styled.js";import{globalStoreAtom as j}from"../../jotai/store.js";import{saveTextBeforeHeading as y}from"../../utils/saveTextBeforeHeading.js";import{getValueFromMdParsedExtension as m}from"../../utils/helpers.js";import{RenderHook as H}from"../RenderHook/index.js";import{Metadata as P}from"./Metadata.js";import{useTranslate as v}from"../../hooks/index.js";function $({item:p,layout:r}){const l=v(),{options:{unstable_hooks:d,hideInfoMetadata:f,routingBasePath:c},parser:{definition:u}}=A(j),o=p.infoDefinition;if(!o)return null;const e=y(m(o,"description")||""),i=m(o,"summary")||void 0,a=u?.externalDocs||o?.externalDocs,x=r===g.STACKED;return t(S,{layout:r,children:n(k,{fullWidth:!0,className:"api-info",isStacked:x,children:[n(T,{children:[(o.title||"")+(o.version?` (${o.version})`:""),t(D,{pageSlug:c})]}),t(H,{Hook:h||d?.AfterApiTitle,props:{info:o}}),i&&t(s,{source:i,"data-role":"redoc-summary"}),e&&t(s,{source:e,"data-role":"redoc-description"}),a&&t(M,{externalDocs:a}),!f&&t(P,{metadata:o["x-metadata"],translate:l})]})})}export{$ as ApiInfo};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAtomValue } from 'jotai';
+import { LayoutVariant } from '@redocly/config';
+import { AfterOpenApiTitle } from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiTitle';
+import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
+import { SamplesMiddlePanel, Row } from '../common/index.js';
+import { ExternalDocumentation } from '../ExternalDocumentation/index.js';
+import { Markdown } from '../Markdown/index.js';
+import { ApiHeader } from './styled.js';
+import { globalStoreAtom } from '../../jotai/store.js';
+import { saveTextBeforeHeading } from '../../utils/saveTextBeforeHeading.js';
+import { getValueFromMdParsedExtension } from '../../utils/helpers.js';
+import { RenderHook } from '../RenderHook/index.js';
+import { Metadata } from './Metadata.js';
+import { useTranslate } from '../../hooks/index.js';
+export function ApiInfo({ item, layout, }) {
+    const translate = useTranslate();
+    const { options: { unstable_hooks, hideInfoMetadata, routingBasePath }, parser: { definition }, } = useAtomValue(globalStoreAtom);
+    const info = item.infoDefinition;
+    if (!info) {
+        return null;
+    }
+    const description = saveTextBeforeHeading(getValueFromMdParsedExtension(info, 'description') || '');
+    const summary = getValueFromMdParsedExtension(info, 'summary') || undefined;
+    const externalDocs = definition?.externalDocs || info?.externalDocs;
+    const isStacked = layout === LayoutVariant.STACKED;
+    return (_jsx(Row, { layout: layout, children: _jsxs(SamplesMiddlePanel, { fullWidth: true, className: "api-info", isStacked: isStacked, children: [_jsxs(ApiHeader, { children: [(info.title || '') + (info.version ? ` (${info.version})` : ''), _jsx(PageActions, { pageSlug: routingBasePath })] }), _jsx(RenderHook, { Hook: AfterOpenApiTitle || unstable_hooks?.AfterApiTitle, props: { info } }), summary && _jsx(Markdown, { source: summary, "data-role": "redoc-summary" }), description && _jsx(Markdown, { source: description, "data-role": "redoc-description" }), externalDocs && _jsx(ExternalDocumentation, { externalDocs: externalDocs }), !hideInfoMetadata && _jsx(Metadata, { metadata: info['x-metadata'], translate: translate })] }) }));
+}
+//# sourceMappingURL=ApiInfo.js.map

package/lib/components/ApiInfo/Metadata.js

@@ -1 +1,29 @@
-import{jsx as t,jsxs as i}from"react/jsx-runtime";import{useMemo as c}from"react";import{Markdown as d}from"@redocly/theme/components/Markdown/Markdown";import{H3 as a}from"@redocly/theme/components/Typography/H3";import{isNotNull as p}from"@redocly/theme/core/openapi";const s=["title","description"];function f([e,r]){return s.includes(e)?null:Array.isArray(r)?{key:e,value:r.filter(n=>typeof n!="object").join(", ")}:typeof r=="object"?null:{key:e,value:r}}function b({metadata:e,translate:r}){const n=c(()=>Object.entries(e||{}).map(f).filter(p),[e]);return e?i(d,{children:[t(a,{children:r("openapi.info.metadata.title","Metadata")}),i("table",{className:"md",children:[t("thead",{children:i("tr",{children:[t("th",{scope:"col",children:r("openapi.key","Key")}),t("th",{scope:"col",children:r("openapi.value","Value")})]})}),t("tbody",{children:n.map(({key:o,value:l})=>i("tr",{children:[t("td",{children:o}),t("td",{children:`${l}`})]},o))})]})]}):null}export{b as Metadata};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Markdown as MarkdownWrapper } from '@redocly/theme/components/Markdown/Markdown';
+import { H3 } from '@redocly/theme/components/Typography/H3';
+import { isNotNull } from '@redocly/theme/core/openapi';
+const FILTER_OUT_KEYS = ['title', 'description']; // We don't want to show these keys
+function metadataMap([key, value]) {
+    if (FILTER_OUT_KEYS.includes(key)) {
+        return null;
+    }
+    if (Array.isArray(value)) {
+        return { key, value: value.filter((val) => typeof val !== 'object').join(', ') };
+    }
+    // We don't want to show objects
+    if (typeof value === 'object') {
+        return null;
+    }
+    return { key, value };
+}
+export function Metadata({ metadata, translate }) {
+    const filteredMetadata = useMemo(() => Object.entries(metadata || {})
+        .map(metadataMap)
+        .filter(isNotNull), [metadata]);
+    if (!metadata) {
+        return null;
+    }
+    return (_jsxs(MarkdownWrapper, { children: [_jsx(H3, { children: translate('openapi.info.metadata.title', 'Metadata') }), _jsxs("table", { className: "md", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: translate('openapi.key', 'Key') }), _jsx("th", { scope: "col", children: translate('openapi.value', 'Value') })] }) }), _jsx("tbody", { children: filteredMetadata.map(({ key, value }) => (_jsxs("tr", { children: [_jsx("td", { children: key }), _jsx("td", { children: `${value}` })] }, key))) })] })] }));
+}
+//# sourceMappingURL=Metadata.js.map

package/lib/components/ApiInfo/index.js

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

package/lib/components/ApiInfo/styled.js

@@ -1,27 +1,35 @@
-import{H1 as e}from"@redocly/theme/components/Typography/H1";import{Markdown as n}from"@redocly/theme/components/Markdown/Markdown";import{styled as o}from"../../styled-components.js";const t=15,p=o(e)`
+import { H1 } from '@redocly/theme/components/Typography/H1';
+import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
+import { styled } from '../../styled-components.js';
+const delimiterWidth = 15;
+export const ApiHeader = styled(H1) `
   display: flex;
   margin-top: 0;
   margin-bottom: 0;
-  & + ${n} {
+  & + ${Markdown} {
     margin-top: var(--h1-margin-bottom);
   }
-`,l=o.span`
+`;
+export const InfoSpan = styled.span `
   &::before {
     content: '|';
     display: inline-block;
     opacity: 0.5;
-    width: ${t}px;
+    width: ${delimiterWidth}px;
     text-align: center;
   }
 
   &:last-child::after {
     display: none;
   }
-`,d=o.div`
+`;
+export const InfoSpanBoxWrap = styled.div `
   overflow: hidden;
-`,m=o.div`
+`;
+export const InfoSpanBox = styled.div `
   display: flex;
   flex-wrap: wrap;
   // hide separator on new lines: idea from https://stackoverflow.com/a/31732902/1749888
-  margin-left: -${t}px;
-`;export{p as ApiHeader,l as InfoSpan,m as InfoSpanBox,d as InfoSpanBoxWrap};
+  margin-left: -${delimiterWidth}px;
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/CallbackSamples/CallbackSamples.js

@@ -1,4 +1,22 @@
-import{jsx as r,jsxs as n}from"react/jsx-runtime";import{memo as t}from"react";import{PanelHeader as s}from"@redocly/theme/components/Panel/PanelHeader";import{PayloadSamples as l}from"../PayloadSamples/index.js";import{ServerListDropdown as d}from"../ServerListDropdown/index.js";import{CodeBlockPanel as i}from"../common/index.js";import{styled as o}from"../../styled-components.js";function p({callback:e,translate:a}){return e?.hasSamples?r(i,{className:"panel-callback-samples",header:()=>n(c,{isExpandable:!1,children:[r(f,{operation:e}),r(m,{children:a("openapi.payload","Payload")})]}),isExpandable:!1,children:e?.payload?.requestBodyContent&&r(l,{content:e.payload.requestBodyContent})}):null}const C=t(p),m=o.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { PanelHeader } from '@redocly/theme/components/Panel/PanelHeader';
+import { PayloadSamples } from '../PayloadSamples/index.js';
+import { ServerListDropdown } from '../ServerListDropdown/index.js';
+import { CodeBlockPanel } from '../common/index.js';
+import { styled } from '../../styled-components.js';
+function CallbackSamplesComponent({ callback, translate, }) {
+    const hasSamples = callback?.hasSamples;
+    if (!hasSamples) {
+        return null;
+    }
+    const renderSummary = () => {
+        return (_jsxs(StyledPanelHeader, { isExpandable: false, children: [_jsx(StyledServerListDropdown, { operation: callback }), _jsx(PayloadTitle, { children: translate('openapi.payload', 'Payload') })] }));
+    };
+    return (_jsx(CodeBlockPanel, { className: "panel-callback-samples", header: renderSummary, isExpandable: false, children: callback?.payload?.requestBodyContent && (_jsx(PayloadSamples, { content: callback.payload.requestBodyContent })) }));
+}
+export const CallbackSamples = memo(CallbackSamplesComponent);
+const PayloadTitle = styled.div `
   font-size: var(--font-size-sm);
   font-style: normal;
   font-weight: var(--font-weight-regular);
@@ -7,9 +25,12 @@ import{jsx as r,jsxs as n}from"react/jsx-runtime";import{memo as t}from"react";i
   border-radius: var(--border-radius);
   background: var(--dropdown-bg-color);
   color: var(--dropdown-text-color);
-`,c=o(s)`
+`;
+const StyledPanelHeader = styled(PanelHeader) `
   flex-wrap: nowrap;
-`,f=o(d)`
+`;
+const StyledServerListDropdown = styled(ServerListDropdown) `
   padding-right: var(--spacing-base);
   min-width: 0;
-`;export{C as CallbackSamples};
+`;
+//# sourceMappingURL=CallbackSamples.js.map

package/lib/components/CallbackSamples/index.js

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

package/lib/components/Callbacks/CallbackDetails.js

@@ -1,4 +1,17 @@
-import{jsx as l,jsxs as s,Fragment as t}from"react/jsx-runtime";import{memo as r,useCallback as m}from"react";import{LinkIcon as p}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{OperationResponseList as d}from"../Responses/index.js";import{RequestDetails as k}from"../Request/RequestDetails.js";import{LinkToField as a}from"../common/LinkToField.js";import{makeDeepLink as c}from"../../services/index.js";import{styled as b}from"../../styled-components.js";function f({operation:e,translate:i}){const n=m(o=>s(h,{children:[l(a,{to:c(e.id,`${e.callbackId}/callback-response&c=${o.key}`)}),i("openapi.callbackResponse","Callback Response")]}),[e.callbackId,e.id,i]);return s(t,{children:[l(k,{operation:e,title:s(t,{children:[l(a,{to:c(e.id,`${e.callbackId}/callback-request`)}),i("openapi.callbackRequest","Callback Request")]})}),e.responses?.length?l(d,{responses:e.responses,operationId:e.id,operationPointer:e.pointer,callbackId:e.callbackId,renderTitle:n}):null]})}const j=r(f),h=b.h4`
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
+import { OperationResponseList } from '../Responses/index.js';
+import { RequestDetails } from '../Request/RequestDetails.js';
+import { LinkToField } from '../common/LinkToField.js';
+import { makeDeepLink } from '../../services/index.js';
+import { styled } from '../../styled-components.js';
+function CallbackDetailsComponent({ operation, translate }) {
+    const renderResponseTitle = useCallback((tab) => (_jsxs(Title, { children: [_jsx(LinkToField, { to: makeDeepLink(operation.id, `${operation.callbackId}/callback-response&c=${tab.key}`) }), translate('openapi.callbackResponse', 'Callback Response')] })), [operation.callbackId, operation.id, translate]);
+    return (_jsxs(_Fragment, { children: [_jsx(RequestDetails, { operation: operation, title: _jsxs(_Fragment, { children: [_jsx(LinkToField, { to: makeDeepLink(operation.id, `${operation.callbackId}/callback-request`) }), translate('openapi.callbackRequest', 'Callback Request')] }) }), operation.responses?.length ? (_jsx(OperationResponseList, { responses: operation.responses, operationId: operation.id, operationPointer: operation.pointer, callbackId: operation.callbackId, renderTitle: renderResponseTitle })) : null] }));
+}
+export const CallbackDetails = memo(CallbackDetailsComponent);
+const Title = styled.h4 `
   position: relative;
   font-size: var(--font-size-lg);
   font-weight: var(--h4-font-weight);
@@ -11,9 +24,10 @@ import{jsx as l,jsxs as s,Fragment as t}from"react/jsx-runtime";import{memo as r
   margin: 0 var(--spacing-sm) 0 0;
 
   :hover {
-    ${p} {
+    ${LinkIcon} {
       opacity: 1;
       visibility: visible;
     }
   }
-`;export{j as CallbackDetails};
+`;
+//# sourceMappingURL=CallbackDetails.js.map

package/lib/components/Callbacks/CallbackOperation.js

@@ -1,14 +1,35 @@
-import{jsx as r,jsxs as c}from"react/jsx-runtime";import{useLocation as d}from"react-router-dom";import{useTranslate as b}from"../../hooks/index.js";import{CallbackPanel as f}from"../Panel/index.js";import{CallbackDetails as x}from"./CallbackDetails.js";import{CallbackSummary as u}from"./CallbackSummary.js";import{pathIncludesLink as k}from"../../utils/index.js";import{styled as l}from"../../styled-components.js";const B=({operation:o,operation:{callbackId:a},onExpand:s,selectedCallback:n})=>{const t=b(),i=d();return r(f,{header:({expanded:e,toggle:m})=>r(u,{callback:o,toggle:p=>{m?.(p),s?.(e?null:o)},expanded:e,translate:t}),expanded:n?.callbackId===a||k(i,a),className:"panel-response-callback",children:c(h,{children:[r(x,{operation:o,translate:t}),r(y,{})]})})},h=l.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocation } from 'react-router-dom';
+import { useTranslate } from '../../hooks/index.js';
+import { CallbackPanel } from '../Panel/index.js';
+import { CallbackDetails } from './CallbackDetails.js';
+import { CallbackSummary } from './CallbackSummary.js';
+import { pathIncludesLink } from '../../utils/index.js';
+import { styled } from '../../styled-components.js';
+export const CallbackOperation = ({ operation, operation: { callbackId }, onExpand, selectedCallback, }) => {
+    const translate = useTranslate();
+    const location = useLocation();
+    const renderSummary = ({ expanded, toggle }) => {
+        return (_jsx(CallbackSummary, { callback: operation, toggle: (params) => {
+                toggle?.(params);
+                onExpand?.(expanded ? null : operation);
+            }, expanded: expanded, translate: translate }));
+    };
+    return (_jsx(CallbackPanel, { header: renderSummary, expanded: selectedCallback?.callbackId === callbackId || pathIncludesLink(location, callbackId), className: "panel-response-callback", children: _jsxs(CallbackDetailsWrap, { children: [_jsx(CallbackDetails, { operation: operation, translate: translate }), _jsx(LeftBorder, {})] }) }));
+};
+const CallbackDetailsWrap = styled.div `
   position: relative;
   .property:last-child {
     border-bottom: none;
     padding-bottom: 0;
   }
-`,y=l.div`
+`;
+const LeftBorder = styled.div `
   position: absolute;
   height: calc(100% + 14px);
   border-left: 1px solid var(--border-color-primary);
   top: -14px;
   left: -12px;
   z-index: 0;
-`;export{B as CallbackOperation};
+`;
+//# sourceMappingURL=CallbackOperation.js.map

package/lib/components/Callbacks/CallbackSummary.js

@@ -1,9 +1,24 @@
-import{jsx as r,jsxs as o}from"react/jsx-runtime";import{PanelHeader as p}from"@redocly/theme/components/Panel/PanelHeader";import{Badge as d}from"@redocly/theme/components/Badge/Badge";import{Trigger as f}from"../Panel/index.js";import{HttpVerb as g}from"../common/index.js";import{makeDeepLink as b}from"../../services/index.js";import{shortenHTTPVerb as h}from"../../utils/index.js";import{CallbackTitle as k}from"./styled.js";import{CircleIcon as v}from"../PropertyDetails/PlusCircleIcon.js";import{LinkToField as u}from"../common/LinkToField.js";import{styled as n}from"../../styled-components.js";function F({expanded:e=!1,toggle:t,callback:{name:l,httpVerb:i,deprecated:a,callbackId:c,id:s},translate:m}){return o(x,{expanded:e,onClick:t,children:[r(u,{to:b(s,`callbacks/${c}`)}),o(f,{children:[r(y,{children:r(v,{sign:e?"-":"+"})}),r(k,{deprecated:a,children:l}),r(g,{color:i,children:h(i)}),a?r(d,{deprecated:!0,children:m("openapi.badges.deprecated","Deprecated")}):null]})]})}const x=n(p)`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelHeader } from '@redocly/theme/components/Panel/PanelHeader';
+import { Badge } from '@redocly/theme/components/Badge/Badge';
+import { Trigger } from '../Panel/index.js';
+import { HttpVerb } from '../common/index.js';
+import { makeDeepLink } from '../../services/index.js';
+import { shortenHTTPVerb } from '../../utils/index.js';
+import { CallbackTitle } from './styled.js';
+import { CircleIcon } from '../PropertyDetails/PlusCircleIcon.js';
+import { LinkToField } from '../common/LinkToField.js';
+import { styled } from '../../styled-components.js';
+export function CallbackSummary({ expanded = false, toggle, callback: { name, httpVerb, deprecated, callbackId, id }, translate, }) {
+    return (_jsxs(CallbackHeader, { expanded: expanded, onClick: toggle, children: [_jsx(LinkToField, { to: makeDeepLink(id, `callbacks/${callbackId}`) }), _jsxs(Trigger, { children: [_jsx(CircleIconWrap, { children: _jsx(CircleIcon, { sign: expanded ? '-' : '+' }) }), _jsx(CallbackTitle, { deprecated: deprecated, children: name }), _jsx(HttpVerb, { color: httpVerb, children: shortenHTTPVerb(httpVerb) }), deprecated ? (_jsx(Badge, { deprecated: true, children: translate('openapi.badges.deprecated', 'Deprecated') })) : null] })] }));
+}
+const CallbackHeader = styled(PanelHeader) `
   padding: var(--spacing-sm) 0 var(--spacing-sm) calc(var(--spacing-unit) / 2);
   margin: 0;
   line-height: var(--line-height-base);
   position: relative;
-`,y=n.button`
+`;
+const CircleIconWrap = styled.button `
   background: none;
   border: none;
   cursor: pointer;
@@ -15,4 +30,5 @@ import{jsx as r,jsxs as o}from"react/jsx-runtime";import{PanelHeader as p}from"@
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
-`;export{F as CallbackSummary};
+`;
+//# sourceMappingURL=CallbackSummary.js.map

package/lib/components/Callbacks/CallbacksList.js

@@ -1 +1,16 @@
-import{jsx as o}from"react/jsx-runtime";import{memo as m}from"react";import{CallbackOperation as i}from"./CallbackOperation.js";function p({callbacks:n,selectedCallback:r,onExpand:a}){if(!n||n.length===0)return null;const l=t=>{a(t)};return o("div",{children:n.map(t=>t.operations.map(e=>o(i,{operation:e,selectedCallback:r,onExpand:l},e.name)))})}const d=m(p);export{d as CallbacksList};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { CallbackOperation } from './CallbackOperation.js';
+function CallbacksListComponent({ callbacks, selectedCallback, onExpand, }) {
+    if (!callbacks || callbacks.length === 0) {
+        return null;
+    }
+    const handleSelectCallback = (callbackId) => {
+        onExpand(callbackId);
+    };
+    return (_jsx("div", { children: callbacks.map((callback) => callback.operations.map((operation) => {
+            return (_jsx(CallbackOperation, { operation: operation, selectedCallback: selectedCallback, onExpand: handleSelectCallback }, operation.name));
+        })) }));
+}
+export const CallbacksList = memo(CallbacksListComponent);
+//# sourceMappingURL=CallbacksList.js.map

package/lib/components/Callbacks/index.js

@@ -1 +1,4 @@
-export*from"./CallbackOperation.js";export*from"./CallbackSummary.js";export*from"./CallbacksList.js";
+export * from './CallbackOperation.js';
+export * from './CallbackSummary.js';
+export * from './CallbacksList.js';
+//# sourceMappingURL=index.js.map

package/lib/components/Callbacks/styled.js

@@ -1,7 +1,10 @@
-import{PanelHeaderTitle as t}from"@redocly/theme/components/Panel/PanelHeaderTitle";import{styled as o}from"../../styled-components.js";const a=o(t)`
-  text-decoration: ${({deprecated:e})=>e?"line-through":"none"};
+import { PanelHeaderTitle } from '@redocly/theme/components/Panel/PanelHeaderTitle';
+import { styled } from '../../styled-components.js';
+export const CallbackTitle = styled(PanelHeaderTitle) `
+  text-decoration: ${({ deprecated }) => (deprecated ? 'line-through' : 'none')};
   margin: 0 4px;
   vertical-align: middle;
   color: var(--panel-response-callback-heading-text-color);
   font-weight: var(--font-weight-medium);
-`;export{a as CallbackTitle};
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/Content/Content.js

@@ -1 +1,10 @@
-import{jsx as r}from"react/jsx-runtime";import{memo as m}from"react";import{useAutoScroll as n}from"./useAutoScroll.js";import{ContentItems as e}from"../ContentItems/index.js";function s({routingBasePath:o,items:t}){return n(o),r(e,{root:!0,items:t,routingBasePath:o})}const C=m(s);export{C as Content};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAutoScroll } from './useAutoScroll.js';
+import { ContentItems } from '../ContentItems/index.js';
+function ContentComponent({ routingBasePath, items }) {
+    useAutoScroll(routingBasePath);
+    return _jsx(ContentItems, { root: true, items: items, routingBasePath: routingBasePath });
+}
+export const Content = memo(ContentComponent);
+//# sourceMappingURL=Content.js.map

package/lib/components/Content/index.js

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

package/lib/components/Content/useAutoScroll.js

@@ -1 +1,50 @@
-import{useLocation as p}from"react-router-dom";import{useEffect as s}from"react";import{addLeadingSlash as u,removeLeadingSlash as l,useActiveSectionId as m,IS_BROWSER as f}from"@redocly/theme/core/openapi";import{compose as h,encodeBackSlashes as w,tryDecodeURIComponent as S}from"../../utils/index.js";let d=!0;function E(t){const e=p(),o=t||"/";s(()=>{if(e.pathname===o&&e.hash===""){window.scrollTo(0,0);return}const a=l(e.pathname.replace(o,"")),c=g(e.hash),i=c?r(a+c)||document.querySelector(`[id$="${l(c)}"]`):r(e.hash.replace("#",""))||r(a);i&&i.scrollIntoView()},[e,o]);const n=m(e,!1,!1);s(()=>{if(n&&d){d=!1;return}if(f&&!window.location.pathname.includes(n)&&!window.location.hash.includes(n)){const a=h(u,w)(n);window.history.replaceState({},"",a)}},[n])}function r(t){return document.getElementById(S(t))}function g(t){const e=["#tag","#operation","#paths"];for(const o of e)if(t.includes(o))return t.replace(o,"").toLowerCase();return""}export{r as getElementById,g as getLegacyHash,E as useAutoScroll};
+import { useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
+import { addLeadingSlash, removeLeadingSlash, useActiveSectionId, IS_BROWSER, } from '@redocly/theme/core/openapi';
+import { compose, encodeBackSlashes, tryDecodeURIComponent } from '../../utils/index.js';
+let initialPageLoad = true;
+export function useAutoScroll(routingBasePath) {
+    const location = useLocation();
+    const basePath = routingBasePath || '/';
+    useEffect(() => {
+        if (location.pathname === basePath && location.hash === '') {
+            window.scrollTo(0, 0);
+            return;
+        }
+        const pathname = removeLeadingSlash(location.pathname.replace(basePath, ''));
+        const legacyHash = getLegacyHash(location.hash);
+        const element = legacyHash
+            ? getElementById(pathname + legacyHash) ||
+                document.querySelector(`[id$="${removeLeadingSlash(legacyHash)}"]`) // handle scroll to operation by legacy hash route
+            : getElementById(location.hash.replace('#', '')) || getElementById(pathname);
+        if (element) {
+            element.scrollIntoView();
+        }
+    }, [location, basePath]);
+    const activeSectionId = useActiveSectionId(location, false, false);
+    useEffect(() => {
+        if (activeSectionId && initialPageLoad) {
+            initialPageLoad = false;
+            return;
+        }
+        if (IS_BROWSER &&
+            !window.location.pathname.includes(activeSectionId) &&
+            !window.location.hash.includes(activeSectionId)) {
+            const url = compose(addLeadingSlash, encodeBackSlashes)(activeSectionId);
+            window.history.replaceState({}, '', url);
+        }
+    }, [activeSectionId]);
+}
+export function getElementById(id) {
+    return document.getElementById(tryDecodeURIComponent(id));
+}
+export function getLegacyHash(hash) {
+    const patterns = ['#tag', '#operation', '#paths'];
+    for (const pattern of patterns) {
+        if (hash.includes(pattern)) {
+            return hash.replace(pattern, '').toLowerCase();
+        }
+    }
+    return '';
+}
+//# sourceMappingURL=useAutoScroll.js.map

package/lib/components/ContentItem/ContentItem.js

@@ -1 +1,31 @@
-import{jsx as e,Fragment as m,jsxs as c}from"react/jsx-runtime";import{memo as f}from"react";import{useAtomValue as u}from"jotai";import{joinWithSeparator as x}from"../../services/index.js";import{TagItem as p}from"../TagItem/index.js";import{OperationItem as y}from"../OperationItem/index.js";import{Section as I}from"../common/index.js";import{useIsExpanded as g}from"./useIsExpanded.js";import{SectionItem as C}from"../SectionItem/index.js";import h from"../ContentItems/useScrollOnRender.js";import{isRootItem as j}from"../ContentItems/helpers.js";import{ApiInfo as S}from"../ApiInfo/index.js";import{layoutAtom as A}from"../../jotai/app.js";const E={group:null,tag:p,section:C,schema:p,operation:y,root:S};function _({item:o,routingBasePath:t,children:s,layout:a}){const r=E[j(o)?"root":o.type],i=o.type==="tag"&&o.items.length>0,n=g({item:o,routingBasePath:t});let d=h(o,t);const l=u(A);return c(m,{children:[r&&e(I,{id:o.id,ref:d,sectionId:x(t,o.id),underlined:o.type==="operation"||o.type==="schema",expanded:i&&!n,children:e(r,{item:o,routingBasePath:t,isExpanded:n,layout:a||l})}),(n||o.type!=="tag")&&!!o.items?.length&&e(m,{children:s})]})}const D=f(_);export{D as ContentItem};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAtomValue } from 'jotai';
+import { joinWithSeparator } from '../../services/index.js';
+import { TagItem } from '../TagItem/index.js';
+import { OperationItem } from '../OperationItem/index.js';
+import { Section } from '../common/index.js';
+import { useIsExpanded } from './useIsExpanded.js';
+import { SectionItem } from '../SectionItem/index.js';
+import useScrollOnRender from '../ContentItems/useScrollOnRender.js';
+import { isRootItem } from '../ContentItems/helpers.js';
+import { ApiInfo } from '../ApiInfo/index.js';
+import { layoutAtom } from '../../jotai/app.js';
+const ContentComponentMap = {
+    group: null,
+    tag: TagItem,
+    section: SectionItem,
+    schema: TagItem,
+    operation: OperationItem,
+    root: ApiInfo,
+};
+function ContentItemComponent({ item, routingBasePath, children, layout: contentLayout, }) {
+    const ContentComponent = ContentComponentMap[isRootItem(item) ? 'root' : item.type];
+    const expandable = item.type === 'tag' && item.items.length > 0;
+    const isExpanded = useIsExpanded({ item, routingBasePath });
+    let ref = useScrollOnRender(item, routingBasePath);
+    const layout = useAtomValue(layoutAtom);
+    return (_jsxs(_Fragment, { children: [ContentComponent && (_jsx(Section, { id: item.id, ref: ref, sectionId: joinWithSeparator(routingBasePath, item.id), underlined: item.type === 'operation' || item.type === 'schema', expanded: expandable && !isExpanded, children: _jsx(ContentComponent, { item: item, routingBasePath: routingBasePath, isExpanded: isExpanded, layout: contentLayout || layout }) })), (isExpanded || item.type !== 'tag') && Boolean(item.items?.length) && _jsx(_Fragment, { children: children })] }));
+}
+export const ContentItem = memo(ContentItemComponent);
+//# sourceMappingURL=ContentItem.js.map

package/lib/components/ContentItem/index.js

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

package/lib/components/ContentItem/useIsExpanded.js

@@ -1 +1,33 @@
-import{useMemo as a}from"react";import{useLocation as f}from"react-router-dom";import{removeLeadingSlash as h}from"@redocly/theme/core/openapi";import{tryDecodeURIComponent as m,normalizePath as l}from"../../utils/index.js";import{getLegacyHash as d}from"../Content/useAutoScroll.js";function v({item:o,routingBasePath:s}){const n=f(),c=a(()=>m(l(n.pathname.replace(s,""))),[n.pathname,s]),p=a(()=>{const e=[],t=i=>{i.forEach(r=>{e.push(r),r.items?.length&&t(r.items)})};return t([o]),e},[o]);return o.type!=="tag"?!1:p.map(e=>e.href).some(e=>{const t=d(n.hash);return[e,m(e)].includes(c)||t&&(e.endsWith(t)||e===h(t))})}export{v as useIsExpanded};
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { removeLeadingSlash } from '@redocly/theme/core/openapi';
+import { tryDecodeURIComponent, normalizePath } from '../../utils/index.js';
+import { getLegacyHash } from '../Content/useAutoScroll.js';
+export function useIsExpanded({ item, routingBasePath, }) {
+    const location = useLocation();
+    const decodedPathname = useMemo(() => tryDecodeURIComponent(normalizePath(location.pathname.replace(routingBasePath, ''))), [location.pathname, routingBasePath]);
+    const flatItems = useMemo(() => {
+        const flat = [];
+        const traverse = (items) => {
+            items.forEach((item) => {
+                flat.push(item);
+                if (item.items?.length) {
+                    traverse(item.items);
+                }
+            });
+        };
+        traverse([item]);
+        return flat;
+    }, [item]);
+    if (item.type !== 'tag') {
+        return false;
+    }
+    const itemHrefs = flatItems.map((item) => item.href);
+    return itemHrefs.some((href) => {
+        const legacyHash = getLegacyHash(location.hash);
+        return ([href, tryDecodeURIComponent(href)].includes(decodedPathname) ||
+            // handle expand tag by legacy hash route
+            (legacyHash && (href.endsWith(legacyHash) || href === removeLeadingSlash(legacyHash))));
+    });
+}
+//# sourceMappingURL=useIsExpanded.js.map

package/lib/components/ContentItems/ContentItems.js

@@ -1 +1,19 @@
-import{jsx as e,jsxs as f,Fragment as p}from"react/jsx-runtime";import{memo as c,useMemo as u}from"react";import{Navigate as g,Route as r,Routes as a}from"react-router-dom";import{getFirstPageLink as h,getItemsByType as d}from"./helpers.js";import{SectionContent as i}from"../SectionContent/index.js";function x({items:t,root:m=!1}){const n="/",{rootItem:o}=d(t),s=!m||o?n:h(t,n),l=u(()=>f(a,{children:[o&&e(r,{path:`${o.href||n}*`,element:e(i,{items:t})}),e(r,{path:"*",element:e(g,{to:s,replace:!0})})]}),[o,n,t,s]);return m&&!t.length?e(a,{children:e(r,{path:"*",element:e(i,{items:t})})}):t.length?e(p,{children:l}):null}const F=c(x);export{F as ContentItems};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { getFirstPageLink, getItemsByType } from './helpers.js';
+import { SectionContent } from '../SectionContent/index.js';
+function ContentItemsComponent({ items, root = false }) {
+    const defaultRootLink = '/';
+    const { rootItem } = getItemsByType(items);
+    const firstPageLink = !root || rootItem ? defaultRootLink : getFirstPageLink(items, defaultRootLink);
+    const renderRoutes = useMemo(() => (_jsxs(Routes, { children: [rootItem && (_jsx(Route, { path: `${rootItem.href || defaultRootLink}*`, element: _jsx(SectionContent, { items: items }) })), _jsx(Route, { path: "*", element: _jsx(Navigate, { to: firstPageLink, replace: true }) })] })), [rootItem, defaultRootLink, items, firstPageLink]);
+    if (root && !items.length) {
+        return (_jsx(Routes, { children: _jsx(Route, { path: "*", element: _jsx(SectionContent, { items: items }) }) }));
+    }
+    if (!items.length)
+        return null;
+    return _jsx(_Fragment, { children: renderRoutes });
+}
+export const ContentItems = memo(ContentItemsComponent);
+//# sourceMappingURL=ContentItems.js.map

package/lib/components/ContentItems/Items.js

@@ -1 +1,13 @@
-import{jsx as r,Fragment as m}from"react/jsx-runtime";import{memo as i,useCallback as a}from"react";import{ContentItem as p}from"../ContentItem/index.js";import{VirtualList as s}from"./VirtualList.js";function c({items:t,routingBasePath:n}){const o=a(e=>r(p,{item:e,routingBasePath:n,children:e.items.length>0&&r(s,{items:e.items,renderItem:o,routingBasePath:n})},e.id),[n]);if(!t.length)return null;const l=t.length>15&&t.every(e=>e.type==="operation"||e.type==="schema");return r(m,{children:l?r(s,{items:t,renderItem:o,routingBasePath:n}):r(m,{children:t.map(o)})})}const I=i(c);export{I as Items};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { ContentItem } from '../ContentItem/index.js';
+import { VirtualList } from './VirtualList.js';
+function ItemsComponent({ items, routingBasePath }) {
+    const renderItem = useCallback((item) => (_jsx(ContentItem, { item: item, routingBasePath: routingBasePath, children: item.items.length > 0 && (_jsx(VirtualList, { items: item.items, renderItem: renderItem, routingBasePath: routingBasePath })) }, item.id)), [routingBasePath]);
+    if (!items.length)
+        return null;
+    const shouldUseVirtualList = items.length > 15 && items.every((item) => item.type === 'operation' || item.type === 'schema');
+    return (_jsx(_Fragment, { children: shouldUseVirtualList ? (_jsx(VirtualList, { items: items, renderItem: renderItem, routingBasePath: routingBasePath })) : (_jsx(_Fragment, { children: items.map(renderItem) })) }));
+}
+export const Items = memo(ItemsComponent);
+//# sourceMappingURL=Items.js.map

package/lib/components/ContentItems/VirtualList.js

@@ -1 +1,35 @@
-import{Fragment as f,jsx as h}from"react/jsx-runtime";import{useCallback as g,memo as M,useEffect as _,useState as x,useMemo as E}from"react";import{useLocation as S}from"react-router-dom";import{removeLeadingSlash as r}from"@redocly/theme/core/openapi";const T=3,a=1,b=1e3,F=({items:e=[],renderItem:c,routingBasePath:i})=>{const m=i||"/",u=S(),l=r(u.pathname.replace(m,"")),s=E(()=>{const n=new Map(e.map((t,o)=>[r(t.href),o]));return t=>t?n.get(t):void 0},[e]),I=g(n=>{const t=s(n),o=Math.max(0,t?t-a:0),L=Math.min(e.length,t?t+a+1:T);return{start:o,end:L}},[s,e.length]),[p,d]=x(()=>{const{start:n,end:t}=I(l);return e.slice(n,t)});return _(()=>{const n=setTimeout(()=>{d(e)},b);return()=>clearTimeout(n)},[e]),h(f,{children:p.map(c)})},B=M(F);export{B as VirtualList};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, memo, useEffect, useState, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { removeLeadingSlash } from '@redocly/theme/core/openapi';
+const INITIAL_VISIBLE_ITEMS = 3;
+const BUFFER_ITEMS = 1;
+const FULL_LIST_DELAY = 1000;
+const VirtualListComponent = ({ items = [], renderItem, routingBasePath, }) => {
+    const basePath = routingBasePath || '/';
+    const location = useLocation();
+    const pathname = removeLeadingSlash(location.pathname.replace(basePath, ''));
+    const findActiveItemIndex = useMemo(() => {
+        const itemMap = new Map(items.map((item, index) => [removeLeadingSlash(item.href), index]));
+        return (pathname) => (pathname ? itemMap.get(pathname) : undefined);
+    }, [items]);
+    const getVisibleRange = useCallback((pathname) => {
+        const currentIndex = findActiveItemIndex(pathname);
+        const start = Math.max(0, currentIndex ? currentIndex - BUFFER_ITEMS : 0);
+        const end = Math.min(items.length, currentIndex ? currentIndex + BUFFER_ITEMS + 1 : INITIAL_VISIBLE_ITEMS);
+        return { start, end };
+    }, [findActiveItemIndex, items.length]);
+    const [visibleItems, setVisibleItems] = useState(() => {
+        const { start, end } = getVisibleRange(pathname);
+        return items.slice(start, end);
+    });
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            setVisibleItems(items);
+        }, FULL_LIST_DELAY);
+        return () => clearTimeout(timeoutId);
+    }, [items]);
+    return _jsx(_Fragment, { children: visibleItems.map(renderItem) });
+};
+export const VirtualList = memo(VirtualListComponent);
+//# sourceMappingURL=VirtualList.js.map

package/lib/components/ContentItems/helpers.js

@@ -1 +1,49 @@
-import{normalizePath as s}from"../../utils/index.js";function c(t){return t.type==="section"&&t.id===""}function f(t){const r=[],e=[],n=[];let i;for(const o of t)switch(o.type){case"group":r.push(o);break;case"tag":e.push(o);break;case"operation":n.push(o);break;case"section":c(o)&&(i=o);break}return{groupItems:r,tagItems:e,operationItems:n,rootItem:i}}function p(t,r){for(const e of t){if(e.type==="group")return p(e.items,r);if(e.type==="tag"){if(!e.description)return s(p(e.items,r));if(e.href)return s(e.href)}else if(e.type==="operation"||e.type==="schema")return s(e.href)}return r}export{p as getFirstPageLink,f as getItemsByType,c as isRootItem};
+import { normalizePath } from '../../utils/index.js';
+export function isRootItem(item) {
+    return item.type === 'section' && item.id === '';
+}
+export function getItemsByType(items) {
+    const groupItems = [];
+    const tagItems = [];
+    const operationItems = [];
+    let rootItem = undefined;
+    for (const item of items) {
+        switch (item.type) {
+            case 'group':
+                groupItems.push(item);
+                break;
+            case 'tag':
+                tagItems.push(item);
+                break;
+            case 'operation':
+                operationItems.push(item);
+                break;
+            case 'section':
+                if (isRootItem(item)) {
+                    rootItem = item;
+                }
+                break;
+        }
+    }
+    return { groupItems, tagItems, operationItems, rootItem };
+}
+export function getFirstPageLink(items, defaultRootLink) {
+    for (const item of items) {
+        if (item.type === 'group') {
+            return getFirstPageLink(item.items, defaultRootLink);
+        }
+        else if (item.type === 'tag') {
+            if (!item.description) {
+                return normalizePath(getFirstPageLink(item.items, defaultRootLink));
+            }
+            if (item.href) {
+                return normalizePath(item.href);
+            }
+        }
+        else if (item.type === 'operation' || item.type === 'schema') {
+            return normalizePath(item.href);
+        }
+    }
+    return defaultRootLink;
+}
+//# sourceMappingURL=helpers.js.map

package/lib/components/ContentItems/index.js

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