@redocly/openapi-docs 3.0.0-alpha.14.beta.1 → 3.0.0-alpha.14.beta.3

package/lib-esm/components/Search/MenuItemSearch.js

@@ -0,0 +1,2 @@
+import React from"react";import{useRecoilValue}from"recoil";import{useLocation}from"react-router-dom";import{MenuItem,MenuItemPath}from"../SideMenu";import{SideNavStyle}from"../../services";import{formatPath,formatPlaces}from"./utils";import{MarkedSpan,Place,ResultMeta}from"./styled";import{globalOptionsSelector}from"../../recoil/store";function markString(e,t){const a=new RegExp("("+t.replace(/[\\^$.*+?()[\]{}|]/g,"\\$&")+")","gi"),r=e.split(a);for(let e=1,t=r.length;e<t;e+=2)r[e]=React.createElement(MarkedSpan,{key:e},r[e]);return r}export const MenuItemSearch=({result:e,term:t,active:a,onClick:r})=>{const{searchMode:l,sideNavStyle:o,pagination:c}=useRecoilValue(globalOptionsSelector),n=useLocation(),i="path-only"===l,m=o===SideNavStyle.PathFirst;return React.createElement(MenuItem,{item:Object.create(e.item,{name:{value:i?e.item.name:""},path:{value:""},search:{value:!0}}),active:a,"data-role":"search:result",location:n,pagination:c,onClick:r},(m||i)&&"operation"===e.item.type?React.createElement(React.Fragment,null,React.createElement(MenuItemPath,{title:e.item.path},markString(e.item.path,t))):markString(e.item.name,t),e.count>1?React.createElement(ResultMeta,null,e.count," matching ",formatPlaces(e.places)):1===e.count?React.createElement(ResultMeta,null,"in ",React.createElement(Place,null,e.places[0].place)," ",formatPath(t,e.places[0].paths[0])):null)};
+//# sourceMappingURL=MenuItemSearch.js.map

package/lib-esm/components/Search/Search.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SearchProps } from './types';
+export declare const Search: React.NamedExoticComponent<SearchProps>;

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

@@ -0,0 +1,2 @@
+import React,{memo,useState}from"react";import{SearchField}from"./SearchField";import{SearchBox}from"./SearchBox";import{useSearch}from"../../services/search/useSearch";import{MarkerService}from"../../services";const marker=new MarkerService;function SearchComponent({contentItems:e,flatItems:r,options:a}){const[t,c]=useState(!1),[o,s]=useState(""),{search:m}=useSearch({contentItems:e,options:a});return a.disableSearch?null:React.createElement(React.Fragment,null,React.createElement(SearchField,{showPopUp:()=>c(!0),searchValue:o,marker:marker,setSearchValue:s}),React.createElement(SearchBox,{search:m,marker:marker,flatItems:r,options:a,shown:t,hidePopUp:()=>c(!1),showPopUp:()=>c(!0),setSearchValue:s,searchValue:o}))}export const Search=memo(SearchComponent);
+//# sourceMappingURL=Search.js.map

package/lib-esm/components/Search/SearchBox.d.ts

@@ -1,8 +1,2 @@
-import type { ProSearchBoxProps, SearchResultExtended } from './types';
-export interface SearchBoxState {
-    results: SearchResultExtended[] | null;
-    term: string;
-    activeItemIdx: number;
-    loading: boolean;
-}
-export declare const ProSearchBox: ({ search, shown, searchValue, setSearchValue, marker, menu, options, hidePopUp, showPopUp, onActivate, }: ProSearchBoxProps) => JSX.Element | null;
+import type { SearchBoxProps } from './types';
+export declare const SearchBox: ({ search, shown, searchValue, setSearchValue, marker, flatItems, options, hidePopUp, showPopUp, }: SearchBoxProps) => JSX.Element | null;

package/lib-esm/components/Search/SearchBox.js

@@ -1,2 +1,2 @@
-import hotkeys from"hotkeys-js";import React,{useCallback,useEffect,useRef,useState}from"react";import{useMount,useUnmount}from"@redocly/theme";import{usePrevious}from"../../hooks";import{PerfectScrollbarWrap}from"../common";import{debounce}from"../../utils";import{MenuItemPro}from"./MenuItemProSearch";import{SearchPopUpBG,SearchPopUpWrap,SearchPopUpHeader,TextContainer,SearchResultsBox,SearchResultsItems,ButtonClose,ButtonClear,CrossIcon,SearchIcon,SearchInput}from"./styled";import{enhanceResults,expandResults}from"./utils";export const ProSearchBox=({search:e,shown:t,searchValue:r,setSearchValue:a,marker:n,menu:o,options:c,hidePopUp:l,showPopUp:u,onActivate:s})=>{const m=useRef(null),h=useRef(null),[i,p]=useState(null),[d,f]=useState(-1),[S,R]=useState(!1),[C,k]=useState(""),P=usePrevious(e),y=usePrevious(t),E=useCallback((e=>{m.current&&(clearTimeout(m.current),m.current=null),p(null),k(e),R(!1),n.unmark()}),[n]);useEffect((()=>{(P!==e||!y&&t&&!r&&C)&&E("")}),[E,P,y,e,r,t,C]);const g=()=>{p(null),k(""),f(-1),a(""),n.unmark()},v=debounce(((t,r)=>{e.search(t).then((e=>{r(e)}))}),200,!0),x=e=>{let t=!1;return v(e,(r=>{e.length<3&&E(e),t||(e=>{m.current&&(clearTimeout(m.current),m.current=null),p(enhanceResults(e,o.getItemById)),R(!1)})(r)})),()=>{t=!0}},I=e=>{if(l(),s(e.item),c.searchAutoExpand)try{expandResults(e)}catch(e){console.warn("Failed to auto expand schema:",e.message)}};return useMount((()=>{c.ctrlFHijack&&hotkeys("cmd+f,ctrl+f",(e=>(e.preventDefault(),e.stopPropagation(),c.disableSearch||u(),!1)))})),useUnmount((()=>{hotkeys.unbind("cmd+f,ctrl+f")})),t?React.createElement(SearchPopUpBG,{role:"search",onClick:e=>{"search"===e.target.getAttribute("role")&&(g(),l())}},React.createElement(SearchPopUpWrap,null,React.createElement(SearchPopUpHeader,null,React.createElement(SearchInput,{ref:h,value:C,onKeyDown:e=>{if(27===e.keyCode&&h.current&&(h.current.blur(),l()),i&&(27===e.keyCode&&g(),40===e.keyCode&&(f(Math.min(d+1,i.length-1)),e.preventDefault()),38===e.keyCode&&(f(Math.max(0,d-1)),e.preventDefault()),13===e.keyCode)){const e=i[d];e&&I(e)}},placeholder:"Search...",type:"text",onChange:e=>{const t=e.target.value;if(t.length<c.minCharacterLengthToInitSearch)return E(t),void a("");(e=>{k(e),a(e),m.current&&(clearTimeout(m.current),m.current=null),m.current=setTimeout((()=>{R(!0)}),500),n.mark(e)})(t),x(t)},autoFocus:!0}),React.createElement(SearchIcon,null),C&&React.createElement(ButtonClear,{onClick:g},"Clear"),React.createElement(ButtonClose,{onClick:()=>{g(),l()}},React.createElement(CrossIcon,null))),React.createElement(SearchResultsBox,{"data-role":"search:results"},S&&React.createElement(TextContainer,null,"Loading..."),!S&&!(null==i?void 0:i.length)&&React.createElement(TextContainer,null,"No results found"),(null==i?void 0:i.length)?React.createElement(PerfectScrollbarWrap,{options:{wheelPropagation:!1}},React.createElement(SearchResultsItems,null,i.slice(0,50).map(((e,t)=>React.createElement(MenuItemPro,{key:e.index+e.item.id,result:e,active:t===d,onActivate:I,term:C,history:o.history}))))):null))):null};
+import hotkeys from"hotkeys-js";import React,{useCallback,useEffect,useRef,useState}from"react";import{useMount,useUnmount}from"@redocly/theme";import{usePrevious}from"../../hooks";import{PerfectScrollbarWrap,Portal}from"../common";import{debounce}from"../../utils";import{MenuItemSearch}from"./MenuItemSearch";import{SearchPopUpBG,SearchPopUpWrap,SearchPopUpHeader,TextContainer,SearchResultsBox,SearchResultsItems,ButtonClose,ButtonClear,CrossIcon,SearchIcon,SearchInput}from"./styled";import{enhanceResults,expandResults}from"./utils";export const SearchBox=({search:e,shown:t,searchValue:r,setSearchValue:a,marker:n,flatItems:c,options:l,hidePopUp:o,showPopUp:u})=>{const s=useRef(null),m=useRef(null),[h,i]=useState(null),[p,f]=useState(-1),[S,d]=useState(!1),[R,k]=useState(""),E=usePrevious(t),C=useCallback((e=>{s.current&&(clearTimeout(s.current),s.current=null),i(null),k(e),d(!1),n.unmark()}),[n]);useMount((()=>{l.ctrlFHijack&&hotkeys("cmd+f,ctrl+f",(e=>(e.preventDefault(),e.stopPropagation(),l.disableSearch||u(),!1)))})),useEffect((()=>{var e;!E&&t&&(null===(e=m.current)||void 0===e||e.focus())}),[E,t]),useEffect((()=>{!E&&t&&!r&&R&&C("")}),[C,E,e,r,t,R]),useUnmount((()=>{hotkeys.unbind("cmd+f,ctrl+f")}));const P=()=>{i(null),k(""),f(-1),a(""),n.unmark()},y=debounce(((t,r)=>{e.search(t).then((e=>{r(e)}))}),200,!0),g=e=>{let t=!1;return y(e,(r=>{e.length<3&&C(e),t||(e=>{s.current&&(clearTimeout(s.current),s.current=null),i(enhanceResults(e,(e=>c.find((t=>t.id===e))))),d(!1)})(r)})),()=>{t=!0}},x=e=>{if(o(),l.searchAutoExpand)try{expandResults(e)}catch(e){console.warn("Failed to auto expand schema:",e.message)}};return t?React.createElement(Portal,null,React.createElement(SearchPopUpBG,{role:"search",onClick:e=>{"search"===e.target.getAttribute("role")&&(P(),o())}},React.createElement(SearchPopUpWrap,null,React.createElement(SearchPopUpHeader,null,React.createElement(SearchInput,{ref:m,value:R,onKeyDown:e=>{if("Escape"===e.key&&m.current&&(m.current.blur(),o()),h&&("Escape"===e.key&&P(),"ArrowDown"===e.key&&(f(Math.min(p+1,h.length-1)),e.preventDefault()),"ArrowUp"===e.key&&(f(Math.max(0,p-1)),e.preventDefault()),"Enter"===e.key)){const e=h[p];e&&x(e)}},placeholder:"Search...",type:"text",onChange:e=>{const t=e.target.value;if(t.length<l.minCharacterLengthToInitSearch)return C(t),void a("");(e=>{k(e),a(e),s.current&&(clearTimeout(s.current),s.current=null),s.current=setTimeout((()=>{d(!0)}),500),n.mark(e)})(t),g(t)},autoFocus:!0}),React.createElement(SearchIcon,null),R&&React.createElement(ButtonClear,{onClick:P},"Clear"),React.createElement(ButtonClose,{onClick:()=>{P(),o()}},React.createElement(CrossIcon,null))),React.createElement(SearchResultsBox,{"data-role":"search:results"},S&&React.createElement(TextContainer,null,"Loading..."),!S&&!(null==h?void 0:h.length)&&React.createElement(TextContainer,null,"No results found"),(null==h?void 0:h.length)?React.createElement(PerfectScrollbarWrap,{options:{wheelPropagation:!1}},React.createElement(SearchResultsItems,null,h.slice(0,50).map(((e,t)=>React.createElement(MenuItemSearch,{key:e.index+e.item.id,result:e,active:t===p,term:R,onClick:o}))))):null)))):null};
 //# sourceMappingURL=SearchBox.js.map

package/lib-esm/components/Search/index.d.ts

@@ -1,2 +1,3 @@
 export * from './SearchField';
 export * from './SearchBox';
+export * from './Search';

package/lib-esm/components/Search/index.js

@@ -1,2 +1,2 @@
-export*from"./SearchField";export*from"./SearchBox";
+export*from"./SearchField";export*from"./SearchBox";export*from"./Search";
 //# sourceMappingURL=index.js.map

package/lib-esm/components/Search/types.d.ts

@@ -1,11 +1,10 @@
-import type { SearchResultMeta, IMenuItem, HistoryService, SearchStore, MarkerService, Options } from '../../services';
-import type { ProMenu } from 'src/services/ProMenu';
-export interface MenuItemProProps {
+import type { SearchResultMeta, IMenuItem, SearchStore, MarkerService, Options, ExtendedMenuItem } from '../../services';
+import type { ContentItemModel } from '../../models';
+export interface MenuItemSearchProps {
     result: SearchResultExtended;
     active: boolean;
-    onActivate: (res: SearchResultExtended) => void;
+    onClick: () => void;
     term: string;
-    history: HistoryService;
 }
 export type SearchResultExtended = {
     index: number;
@@ -24,11 +23,10 @@ export type SearchResult<T = GenericObject | undefined> = {
     score: number;
     meta: T;
 };
-export interface ProSearchBoxProps {
+export interface SearchBoxProps {
     search: SearchStore<SearchResultMeta>;
-    menu: ProMenu;
+    flatItems: SearchProps['flatItems'];
     marker: MarkerService;
-    onActivate: (item: IMenuItem) => void;
     className?: string;
     options: Options;
     shown: boolean;
@@ -37,3 +35,8 @@ export interface ProSearchBoxProps {
     setSearchValue: (value: string) => void;
     searchValue: string;
 }
+export interface SearchProps {
+    contentItems: ContentItemModel[];
+    flatItems: (ExtendedMenuItem & IMenuItem)[];
+    options: Options;
+}

package/lib-esm/components/Search/utils.js

@@ -1,2 +1,2 @@
-export function getFields(e){return e?e.oneOf?getFields(e.oneOf[e.activeOneOf]):e.items?getFields(e.items):e.fields||[]:[]}export function expandDeep(e,t){if(e)for(const n of e){const e=t.find((e=>e.name===n));if(!e)break;e.expand(),t=getFields(e.schema)}}export function enhanceResults(e,t){const n={};e.forEach((({meta:e,score:s})=>{const o=e.menuId,c=n[o];if(s=e.boost?s*e.boost:s,c){if(c.score=Math.max(s,c.score),e.place&&c.count++,e.place){const t=c.places.find((t=>t.place===e.place));t&&e.path?t.paths.find((t=>{var n;return(t&&t.join("->"))===(null===(n=e.path)||void 0===n?void 0:n.join("->"))}))||t.paths.push(e.path):c.places.push({place:e.place,paths:[e.path]})}}else n[o]={item:t(o),places:e.place?[{place:e.place,paths:[e.path]}]:[],score:s,count:e.place?1:0}}));const s=Object.keys(n).map((e=>n[e]));return s.forEach(((e,t)=>e.index=t)),s.sort(((e,t)=>t.score-e.score)),s}export function formatPlaces(e){return e.slice().sort(),e.map((e=>e.place)).join(" and ")}export function formatPath(e,t){return t&&t.length&&t[t.length-1].toLowerCase().startsWith(e.toLowerCase())&&(t=t.slice(0,t.length-1)),t&&0!==t.length?" → "+t.join(" → "):""}export function expandResults(e){for(const t of e.places)if("request fields"===t.place){const n=e.item.requestBody,s=getFields(n&&n.content&&n.content.active&&n.content.active.schema);for(const e of t.paths){if(!e)return;expandDeep(e.slice(0,e.length-1),s)}}else if(t.place.startsWith("response ")){const n=t.place.split(" ")[1],s=e.item.responses.find((e=>e.code===n));s&&(s.expanded=!0);const o=getFields(s&&s.content&&s.content.active&&s.content.active.schema);for(const e of t.paths){if(!e)return;expandDeep(e.slice(0,e.length-1),o)}}}
+import{getRecoil}from"recoil-nexus";import{getActiveMediaType}from"../../models";import{operationStore}from"../../recoil/operation";export function getFields(e){if(!e)return[];const{activeOneOf:t}=getRecoil(operationStore(e.deps.operation.pointer));return e.oneOf?getFields(e.oneOf[t]):e.items?getFields(e.items):e.fields||[]}export function expandDeep(e,t){if(e)for(const o of e){const e=t.find((e=>e.name===o));if(!e)break;t=getFields(e.schema)}}export function enhanceResults(e,t){const o={};e.forEach((({meta:e,score:n})=>{const s=e.menuId,c=o[s];if(n=e.boost?n*e.boost:n,c){if(c.score=Math.max(n,c.score),e.place&&c.count++,e.place){const t=c.places.find((t=>t.place===e.place));t&&e.path?t.paths.find((t=>{var o;return(t&&t.join("->"))===(null===(o=e.path)||void 0===o?void 0:o.join("->"))}))||t.paths.push(e.path):c.places.push({place:e.place,paths:[e.path]})}}else o[s]={item:t(s),places:e.place?[{place:e.place,paths:[e.path]}]:[],score:n,count:e.place?1:0}}));const n=Object.keys(o).map((e=>o[e]));return n.forEach(((e,t)=>e.index=t)),n.sort(((e,t)=>t.score-e.score)),n}export function formatPlaces(e){return e.slice().sort(),e.map((e=>e.place)).join(" and ")}export function formatPath(e,t){return t&&t.length&&t[t.length-1].toLowerCase().startsWith(e.toLowerCase())&&(t=t.slice(0,t.length-1)),t&&0!==t.length?" → "+t.join(" → "):""}export function expandResults(e){var t,o;for(const n of e.places)if("request fields"===n.place){const o=e.item.requestBody,s=getFields(o&&o.content&&(null===(t=getActiveMediaType(o.content))||void 0===t?void 0:t.schema));for(const e of n.paths){if(!e)return;expandDeep(e.slice(0,e.length-1),s)}}else if(n.place.startsWith("response ")){const t=n.place.split(" ")[1],s=e.item.responses.find((e=>e.code===t));s&&(s.expanded=!0);const c=getFields(s&&s.content&&(null===(o=getActiveMediaType(s.content))||void 0===o?void 0:o.schema));for(const e of n.paths){if(!e)return;expandDeep(e.slice(0,e.length-1),c)}}}
 //# sourceMappingURL=utils.js.map

package/lib-esm/components/SectionContent/SectionContent.d.ts

@@ -0,0 +1,15 @@
+import type { ContentItemModel } from 'src/models';
+import type { Options } from '../../services';
+import { Pagination } from '../../services';
+interface SectionContentProps {
+    items: ContentItemModel[];
+    pagination: Pagination;
+    nextSectionLink?: {
+        name: string;
+        href?: string;
+    };
+    showApiInfo: boolean;
+    showNextButton: Options['showNextButton'];
+}
+export declare function SectionContent({ items, pagination, nextSectionLink, showNextButton, showApiInfo, }: SectionContentProps): JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import React,{useMemo}from"react";import{ApiInfo}from"../ApiInfo";import{ContentItem}from"../ContentItem";import{NextSectionButton}from"../NextSectionButton";import{Pagination}from"../../services";export function SectionContent({items:t,pagination:e,nextSectionLink:n,showNextButton:o,showApiInfo:i}){const a=useMemo((()=>e===Pagination.None?t:t.filter((t=>"section"===t.type))),[t,e]);return React.createElement(React.Fragment,null,i&&React.createElement(ApiInfo,null),a.map((t=>React.createElement(ContentItem,{key:t.id,item:t,pagination:e,showNextButton:o}))),o&&n&&React.createElement(NextSectionButton,{href:n.href||"",label:n.name,pagination:e}))}
+//# sourceMappingURL=SectionContent.js.map

package/lib-esm/components/SectionContent/index.d.ts

@@ -0,0 +1 @@
+export { SectionContent } from './SectionContent';

package/lib-esm/components/SectionContent/index.js

@@ -0,0 +1,2 @@
+export{SectionContent}from"./SectionContent";
+//# sourceMappingURL=index.js.map

package/lib-esm/components/SectionItem/SectionItem.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { GroupModel } from '../../models';
-interface SectionItemProps {
+export interface SectionItemProps {
     item: GroupModel;
 }
-export declare const SectionItem: React.FC<SectionItemProps>;
-export {};
+export declare const SectionItem: React.NamedExoticComponent<SectionItemProps>;

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

@@ -1,2 +1,2 @@
-import React,{useMemo}from"react";import{observer}from"mobx-react";import{H1,H2,H3,H4,H5,H6,SamplesMiddlePanel,Row,ShareLink}from"../common";import{AdvancedMarkdown}from"../Markdown";import{ExternalDocumentation}from"../ExternalDocumentation";function SectionItemComponent({item:e}){const{name:t,description:a,externalDocs:n,level:r,id:c}=e,o=useMemo((()=>{switch(r){case 1:default:return H1;case 2:return H2;case 3:return H3;case 4:return H4;case 5:return H5;case 6:return H6}}),[r]);return React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement(SamplesMiddlePanel,{compact:!1},React.createElement(o,null,React.createElement(ShareLink,{to:c}),t))),React.createElement(AdvancedMarkdown,{source:a||"",htmlWrap:e=>React.createElement(SamplesMiddlePanel,{compact:!0},e)}),n&&React.createElement(Row,null,React.createElement(SamplesMiddlePanel,null,React.createElement(ExternalDocumentation,{externalDocs:n}))))}export const SectionItem=observer(SectionItemComponent);
+import React,{memo}from"react";import{SamplesMiddlePanel,Row}from"../common";import{Markdown}from"../Markdown";import{ExternalDocumentation}from"../ExternalDocumentation";function SectionItemComponent({item:e}){const{externalDocs:t,ast:n,description:o}=e;return React.createElement(React.Fragment,null,React.createElement(Markdown,{ast:n,source:o,htmlWrap:e=>React.createElement(SamplesMiddlePanel,null,e)}),t&&React.createElement(Row,null,React.createElement(SamplesMiddlePanel,null,React.createElement(ExternalDocumentation,{externalDocs:t}))))}export const SectionItem=memo(SectionItemComponent);
 //# sourceMappingURL=SectionItem.js.map

package/lib-esm/components/SecurityRequirement/PanelDescription.d.ts

@@ -1,7 +1,2 @@
-import type { SecurityRequirementModel } from '../../models';
-interface SecurityRequirementPanelDescriptionProps {
-    securities: SecurityRequirementModel[];
-    showSecuritySchemeType?: boolean;
-}
+import type { SecurityRequirementPanelDescriptionProps } from './types';
 export declare function PanelDescription({ securities, showSecuritySchemeType, }: SecurityRequirementPanelDescriptionProps): JSX.Element;
-export {};

package/lib-esm/components/SecurityRequirement/RequirementElement.d.ts

@@ -1,7 +1,2 @@
-import type { SecurityRequirementModel } from '../../models';
-interface ElementProps {
-    security: SecurityRequirementModel;
-    showSecuritySchemeType?: boolean;
-}
-export declare function RequirementElement(props: ElementProps): JSX.Element;
-export {};
+import type { RequirementElementProps } from './types';
+export declare function RequirementElement({ showSecuritySchemeType, security, }: RequirementElementProps): JSX.Element;

package/lib-esm/components/SecurityRequirement/RequirementElement.js

@@ -1,4 +1,4 @@
-import React from"react";import styled from"styled-components";import{linksCss}from"../Markdown";import{AUTH_TYPES}from"./constants";import{Link}from"../common";export function RequirementElement(e){const{showSecuritySchemeType:t,security:r}=e;return React.createElement(SecurityRequirementOrWrap,null,r.schemes.map((e=>{const r=e.scopes.length>0;return React.createElement(SecurityRequirementAndWrap,{key:e.id},t?`${AUTH_TYPES[e.type]||e.type}: `:null,React.createElement(Link,{to:e.id,security:!0},React.createElement("b",null,e.id)),r?["(",e.scopes.map((e=>React.createElement(ScopeName,{key:e},e))).reduce(((e,t)=>[e,", ",t])),")"]:null)})))}const SecurityRequirementAndWrap=styled.span`
+import React from"react";import styled from"styled-components";import{AUTH_TYPES}from"./constants";import{Link}from"../common";import{linksCss}from"../Markdown/styled";export function RequirementElement({showSecuritySchemeType:e,security:t}){return React.createElement(SecurityRequirementOrWrap,null,t.schemes.map((t=>{const r=t.scopes.length>0;return React.createElement(SecurityRequirementAndWrap,{key:t.id},e?`${AUTH_TYPES[t.type]||t.type}: `:null,React.createElement(Link,{to:t.id,security:!0},React.createElement("b",null,t.id)),r?["(",t.scopes.map((e=>React.createElement(ScopeName,{key:e},e))).reduce(((e,t)=>[e,", ",t])),")"]:null)})))}const SecurityRequirementAndWrap=styled.span`
   &:after {
     content: ' and ';
     font-weight: normal;

package/lib-esm/components/SecurityRequirement/SecurityDefs.d.ts

@@ -1,7 +1 @@
-import React from 'react';
-import type { SecuritySchemesModel } from '../../models';
-interface SecurityDefsProps {
-    securitySchemes: SecuritySchemesModel;
-}
-export declare const SecurityDefs: React.NamedExoticComponent<SecurityDefsProps>;
-export {};
+export declare function SecurityDefs(): JSX.Element;

package/lib-esm/components/SecurityRequirement/SecurityDefs.js

@@ -1,4 +1,4 @@
-import React,{memo}from"react";import styled from"styled-components";import{Markdown,StyledMarkdownBlock}from"../Markdown";import{OAuthFlow}from"../SecuritySchemes";import{AUTH_TYPES}from"./constants";import{H2,SamplesMiddlePanel,Row,Section,ShareLink}from"../common";import{titleize}from"../../utils";function SecurityDefsComponent({securitySchemes:e}){return React.createElement(React.Fragment,null,e.schemes.map((e=>React.createElement(Section,{id:e.sectionId,sectionId:e.sectionId,key:e.id},React.createElement(Row,null,React.createElement(SamplesMiddlePanel,null,React.createElement(H2,null,React.createElement(ShareLink,{to:e.sectionId}),e.id),React.createElement(Description,{source:e.description||""}),React.createElement(StyledMarkdownBlock,null,React.createElement("div",{className:"security-details"},React.createElement("div",null,React.createElement("b",null,"Security Scheme Type: "),React.createElement("span",null,AUTH_TYPES[e.type]||e.type)),e.apiKey?React.createElement("div",null,React.createElement("b",null,titleize(e.apiKey.in||"")," parameter name: "),React.createElement("span",null,e.apiKey.name)):e.http?[React.createElement("div",{key:"scheme"},React.createElement("b",null,"HTTP Authorization Scheme "),React.createElement("span",null,e.http.scheme)),"bearer"===e.http.scheme&&e.http.bearerFormat&&React.createElement("div",{key:"bearer"},React.createElement("b",null,"Bearer format: "),React.createElement("span",null,'"',e.http.bearerFormat,'"'))]:e.openId?React.createElement("div",null,React.createElement("b",null,"Connect URL:"),React.createElement("a",{target:"_blank",rel:"noopener noreferrer",href:e.openId.connectUrl},e.openId.connectUrl)):e.flows?Object.keys(e.flows).map((t=>React.createElement(OAuthFlow,{key:t,type:t,flow:e.flows[t]}))):null))))))))}export const SecurityDefs=memo(SecurityDefsComponent);const Description=styled((e=>React.createElement(Markdown,Object.assign({},e))))`
+import React from"react";import styled from"styled-components";import{useRecoilValue}from"recoil";import{H2}from"@redocly/theme";import{Markdown,StyledMarkdownBlock}from"../Markdown";import{OAuthFlow}from"../SecuritySchemes";import{AUTH_TYPES}from"./constants";import{Section,ShareLink}from"../common";import{titleize}from"../../utils";import{globalStoreSelector}from"../../recoil/store";import{getSecuritySchemes}from"../../models";import{Pagination}from"../../services";export function SecurityDefs(){const{parser:e,options:t}=useRecoilValue(globalStoreSelector),r=getSecuritySchemes({parser:e}),a=t.pagination===Pagination.Item?"section/":"";return React.createElement(React.Fragment,null,null==r?void 0:r.map((e=>React.createElement(Section,{id:a+e.sectionId,sectionId:e.sectionId,key:e.id},React.createElement(H2,null,React.createElement(ShareLink,{to:`#${a}${e.sectionId}`}),e.id),React.createElement(Description,{source:e.description||""}),React.createElement(StyledMarkdownBlock,null,React.createElement("div",{className:"security-details"},React.createElement("div",null,React.createElement("b",null,"Security Scheme Type: "),React.createElement("span",null,AUTH_TYPES[e.type]||e.type)),e.apiKey?React.createElement("div",null,React.createElement("b",null,titleize(e.apiKey.in||"")," parameter name: "),React.createElement("span",null,e.apiKey.name)):e.http?[React.createElement("div",{key:"scheme"},React.createElement("b",null,"HTTP Authorization Scheme "),React.createElement("span",null,e.http.scheme)),"bearer"===e.http.scheme&&e.http.bearerFormat&&React.createElement("div",{key:"bearer"},React.createElement("b",null,"Bearer format: "),React.createElement("span",null,'"',e.http.bearerFormat,'"'))]:e.openId?React.createElement("div",null,React.createElement("b",null,"Connect URL:"),React.createElement("a",{target:"_blank",rel:"noopener noreferrer",href:e.openId.connectUrl},e.openId.connectUrl)):e.flows?Object.keys(e.flows).map((t=>React.createElement(OAuthFlow,{key:t,type:t,flow:e.flows[t]}))):null))))))}const Description=styled((e=>React.createElement(Markdown,Object.assign({},e))))`
   margin-bottom: 1em;
 `;
 //# sourceMappingURL=SecurityDefs.js.map

package/lib-esm/components/SecurityRequirement/SecurityRequirement.d.ts

@@ -1,6 +1,3 @@
-import type { SecurityRequirementModel } from '../../models';
-interface SecurityRequirementsProps {
-    securities: SecurityRequirementModel[];
-}
-export declare function SecurityRequirements({ securities, }: SecurityRequirementsProps): JSX.Element | null;
-export {};
+import React from 'react';
+import type { SecurityRequirementsProps } from './types';
+export declare const SecurityRequirements: React.NamedExoticComponent<SecurityRequirementsProps>;

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

@@ -1,4 +1,4 @@
-import React,{Fragment,useState}from"react";import styled from"styled-components";import{Markdown,StyledMarkdownBlock}from"../Markdown";import{OAuthFlow}from"../SecuritySchemes";import{PanelDescription}from"./PanelDescription";import{RequirementElement}from"./RequirementElement";import{RequiredScopesRow}from"./RequiredScopesRow";import{LockIcon}from"../icons";import{Row}from"./styled";import{AUTH_TYPES}from"./constants";import{l}from"../../services";import{titleize}from"../../utils";import{useStore}from"../../context";import{ContentPanel}from"../Panel";function getRequiredScopes(e,t){const r=[];let n=t.length;for(;n--;){const o=t[n];let c=o.schemes.length;for(;c--;){const t=o.schemes[c];t.id===e&&r.push(...t.scopes)}}return Array.from(new Set(r))}export function SecurityRequirements({securities:e}){const t=useStore(),r=null==t?void 0:t.options.showSecuritySchemeType,[n,o]=useState(!1);if(!e.length||(null==t?void 0:t.options.hideSecuritySection))return null;const c=null==t?void 0:t.definition.securitySchemes.schemes,a=null==c?void 0:c.filter((({id:t})=>e.find((e=>e.schemes.find((e=>e.id===t))))));return React.createElement(ContentPanel,{className:"panel-security-schemas",header:l("authorizations"),onToggle:e=>o(e),description:!n&&React.createElement(PanelDescription,{securities:e,showSecuritySchemeType:r}),expanded:n},n&&a&&a.length>1?React.createElement(SecurityRequirementBlock,null,e.map(((t,n)=>{let o,c,l="";return e.length>1&&t.schemes.length>1&&(c=0===n?"(":"",l=")"),n!==e.length-1&&(l+=" or",o=React.createElement("br",null)),React.createElement(Fragment,{key:t.schemes.map((({id:e})=>e)).join("")},c,React.createElement(RequirementElement,{security:t,showSecuritySchemeType:r}),l,o)}))):null,n&&a?a.map((t=>{const r=getRequiredScopes(t.id,e),n=React.createElement(RequiredScopesRow,{scopes:r});return React.createElement(SecurityDetails,{key:t.id},React.createElement("h5",null,React.createElement(LockIcon,{size:"11px",style:{verticalAlign:"baseline"},color:"--panel-body-text-color"})," ",AUTH_TYPES[t.type]||t.type,": ",t.id),React.createElement(Markdown,{source:t.description||""}),React.createElement(StyledMarkdownBlock,{key:t.id},t.apiKey?React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement("b",null,titleize(t.apiKey.in||"")," parameter name: "),React.createElement("code",null,t.apiKey.name)),n):t.http?React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement("b",null,"HTTP Authorization Scheme: "),React.createElement("code",null,t.http.scheme)),React.createElement(Row,null,"bearer"===t.http.scheme&&t.http.bearerFormat&&React.createElement(React.Fragment,null,React.createElement("b",null,"Bearer format: "),React.createElement("code",null,t.http.bearerFormat))),n):t.openId?React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement("b",null,"Connect URL: "),React.createElement("code",null,React.createElement("a",{target:"_blank",rel:"noopener noreferrer",href:t.openId.connectUrl},t.openId.connectUrl))),n):t.flows?Object.keys(t.flows).map((e=>React.createElement(OAuthFlow,{key:e,type:e,RequiredScopes:n,flow:t.flows[e]}))):null))})):null)}const SecurityDetails=styled.div`
+import React,{Fragment,memo,useState}from"react";import styled from"styled-components";import{useRecoilValue}from"recoil";import{Markdown,StyledMarkdownBlock}from"../Markdown";import{OAuthFlow}from"../SecuritySchemes";import{PanelDescription}from"./PanelDescription";import{RequirementElement}from"./RequirementElement";import{RequiredScopesRow}from"./RequiredScopesRow";import{LockIcon}from"../icons";import{Row}from"./styled";import{AUTH_TYPES}from"./constants";import{l}from"../../services";import{titleize}from"../../utils";import{ContentPanel}from"../Panel";import{globalStoreSelector}from"../../recoil/store";import{useSecurityRequirements}from"./useSecurityRequirements";function getRequiredScopes(e,t){const r=[];let o=t.length;for(;o--;){const n=t[o];let c=n.schemes.length;for(;c--;){const t=n.schemes[c];t.id===e&&r.push(...t.scopes)}}return Array.from(new Set(r))}function SecurityRequirementsComponent({securities:e}){const[t,r]=useState(!1),{options:{showSecuritySchemeType:o,hideSecuritySection:n},parser:c}=useRecoilValue(globalStoreSelector),a=useSecurityRequirements({parser:c,securities:e});return!e.length||n?null:React.createElement(ContentPanel,{className:"panel-security-schemas",header:l("authorizations"),onToggle:e=>r(e),description:!t&&React.createElement(PanelDescription,{securities:e,showSecuritySchemeType:o}),expanded:t},t&&a&&a.length>1?React.createElement(SecurityRequirementBlock,null,e.map(((t,r)=>{let n,c,a="";return e.length>1&&t.schemes.length>1&&(c=0===r?"(":"",a=")"),r!==e.length-1&&(a+=" or",n=React.createElement("br",null)),React.createElement(Fragment,{key:t.schemes.map((({id:e})=>e)).join("")},c,React.createElement(RequirementElement,{security:t,showSecuritySchemeType:o}),a,n)}))):null,t?a.map((t=>{const r=getRequiredScopes(t.id,e);return React.createElement(SecurityDetails,{key:t.id},React.createElement("h5",null,React.createElement(LockIcon,{size:"11px",style:{verticalAlign:"baseline"},color:"--panel-body-text-color"})," ",AUTH_TYPES[t.type]||t.type,": ",t.id),React.createElement(Markdown,{source:t.description||""}),React.createElement(StyledMarkdownBlock,{key:t.id},t.apiKey?React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement("b",null,titleize(t.apiKey.in||"")," parameter name: "),React.createElement("code",null,t.apiKey.name)),React.createElement(RequiredScopesRow,{scopes:r})):t.http?React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement("b",null,"HTTP Authorization Scheme: "),React.createElement("code",null,t.http.scheme)),React.createElement(Row,null,"bearer"===t.http.scheme&&t.http.bearerFormat&&React.createElement(React.Fragment,null,React.createElement("b",null,"Bearer format: "),React.createElement("code",null,t.http.bearerFormat))),React.createElement(RequiredScopesRow,{scopes:r})):t.openId?React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement("b",null,"Connect URL: "),React.createElement("code",null,React.createElement("a",{target:"_blank",rel:"noopener noreferrer",href:t.openId.connectUrl},t.openId.connectUrl))),React.createElement(RequiredScopesRow,{scopes:r})):t.flows?Object.keys(t.flows).map((e=>React.createElement(OAuthFlow,{key:e,type:e,flow:t.flows[e]},React.createElement(RequiredScopesRow,{scopes:r})))):null))})):null)}export const SecurityRequirements=memo(SecurityRequirementsComponent);const SecurityDetails=styled.div`
   border-bottom: 1px solid var(--border-color);
   margin-bottom: 1.5em;
   padding-bottom: 0.7em;

package/lib-esm/components/SecurityRequirement/constants.d.ts

@@ -1,6 +1,6 @@
-export declare const AUTH_TYPES: {
-    oauth2: string;
-    apiKey: string;
-    http: string;
-    openIdConnect: string;
-};
+export declare enum AUTH_TYPES {
+    oauth2 = "OAuth2",
+    apiKey = "API Key",
+    http = "HTTP",
+    openIdConnect = "OpenID Connect"
+}

package/lib-esm/components/SecurityRequirement/constants.js

@@ -1,2 +1,2 @@
-export const AUTH_TYPES={oauth2:"OAuth2",apiKey:"API Key",http:"HTTP",openIdConnect:"OpenID Connect"};
+export var AUTH_TYPES;!function(n){n.oauth2="OAuth2",n.apiKey="API Key",n.http="HTTP",n.openIdConnect="OpenID Connect"}(AUTH_TYPES||(AUTH_TYPES={}));
 //# sourceMappingURL=constants.js.map

package/lib-esm/components/SecurityRequirement/types.d.ts

@@ -0,0 +1,19 @@
+import type { OpenAPIParser } from '../../services';
+import type { SecurityRequirement, SecurityScheme } from '../../models';
+export interface SecurityRequirementsProps {
+    securities: SecurityRequirement[];
+}
+export interface SecurityDefsProps {
+    securitySchemes: SecurityScheme[];
+}
+export interface RequirementElementProps {
+    security: SecurityRequirement;
+    showSecuritySchemeType?: boolean;
+}
+export interface SecurityRequirementPanelDescriptionProps extends SecurityRequirementsProps {
+    showSecuritySchemeType?: boolean;
+}
+export type UseSecurityRequirementsInput = {
+    parser: Partial<OpenAPIParser>;
+    securities: SecurityRequirement[];
+};

package/lib-esm/components/SecurityRequirement/types.js

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

package/lib-esm/components/SecurityRequirement/useSecurityRequirements.d.ts

@@ -0,0 +1,3 @@
+import type { SecurityScheme } from '../../models';
+import type { UseSecurityRequirementsInput } from './types';
+export declare const useSecurityRequirements: ({ parser, securities, }: UseSecurityRequirementsInput) => Array<SecurityScheme>;

package/lib-esm/components/SecurityRequirement/useSecurityRequirements.js

@@ -0,0 +1,2 @@
+import{getSecuritySchemes}from"../../models";export const useSecurityRequirements=({parser:e,securities:r})=>{if(!e)return[];const i=getSecuritySchemes({parser:e});return null==i?void 0:i.filter((({id:e})=>r.find((r=>r.schemes.find((r=>r.id===e))))))};
+//# sourceMappingURL=useSecurityRequirements.js.map

package/lib-esm/components/SecuritySchemes/OAuthFlow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { OAuthFlowProps } from './types';
+export declare const OAuthFlow: React.NamedExoticComponent<React.PropsWithChildren<OAuthFlowProps>>;

package/lib-esm/components/SecuritySchemes/OAuthFlow.js

@@ -0,0 +1,2 @@
+import React,{memo}from"react";import{Markdown}from"../Markdown";import{SeeMore}from"../SeeMore";import{Row}from"../SecurityRequirement";import{hasAuthorizationUrl,hasTokenUrl}from"./helpers";function OAuthFlowComponent({type:e,flow:t,children:l}){const n=Object.keys((null==t?void 0:t.scopes)||{});return React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement("b",null,"Flow type: "),React.createElement("code",null,e)," "),hasAuthorizationUrl(e,t)?React.createElement(Row,null,React.createElement("b",null,"Authorization URL: "),React.createElement("code",null,React.createElement("a",{target:"_blank",rel:"noopener noreferrer",href:null==t?void 0:t.authorizationUrl},null==t?void 0:t.authorizationUrl))):null,hasTokenUrl(e,t)?React.createElement(Row,null,React.createElement("b",null,"Token URL: "),React.createElement("code",null,null==t?void 0:t.tokenUrl)):null,(null==t?void 0:t.refreshUrl)&&React.createElement(Row,null,React.createElement("b",null,"Refresh URL: "),React.createElement("code",null,null==t?void 0:t.refreshUrl)),n.length?React.createElement(React.Fragment,null,l,React.createElement(Row,null,React.createElement("b",null,"Scopes:")),React.createElement(SeeMore,{height:"4em"},React.createElement("ul",null,n.map((e=>React.createElement("li",{key:e},React.createElement("code",null,e)," - ",React.createElement(Markdown,{source:(null==t?void 0:t.scopes[e])||""}))))))):null)}export const OAuthFlow=memo(OAuthFlowComponent);
+//# sourceMappingURL=OAuthFlow.js.map

package/lib-esm/components/SecuritySchemes/helpers.d.ts

@@ -18,12 +18,12 @@ export declare const hasTokenUrl: (type: string, flow: OAuthFlowProps['flow']) =
     scopes: Record<string, string>;
     tokenUrl: string;
     'x-defaultClientId'?: string | undefined;
-    'x-tokenEndpointAuthMethod'?: string | undefined;
 } | {
     refreshUrl?: string | undefined;
     scopes: Record<string, string>;
     tokenUrl: string;
     'x-defaultClientId'?: string | undefined;
+    'x-tokenEndpointAuthMethod'?: string | undefined;
 } | {
     refreshUrl?: string | undefined;
     scopes: Record<string, string>;

package/lib-esm/components/SecuritySchemes/index.d.ts

@@ -1,2 +1,2 @@
 export type { OAuthFlowProps } from './types';
-export { OAuthFlow } from './SecuritySchemes';
+export { OAuthFlow } from './OAuthFlow';

package/lib-esm/components/SecuritySchemes/index.js

@@ -1,2 +1,2 @@
-export{OAuthFlow}from"./SecuritySchemes";
+export{OAuthFlow}from"./OAuthFlow";
 //# sourceMappingURL=index.js.map

package/lib-esm/components/SecuritySchemes/types.d.ts

@@ -2,5 +2,4 @@ import type { OpenAPISecurityScheme } from '../../types';
 export interface OAuthFlowProps {
     type: string;
     flow: OpenAPISecurityScheme['flows'][keyof OpenAPISecurityScheme['flows']];
-    RequiredScopes?: JSX.Element;
 }

package/lib-esm/components/SideMenu/MenuItem.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import type { PropsWithChildren, MouseEvent } from 'react';
-import type { IMenuItem } from '../../services';
+import type { Location } from 'react-router-dom';
+import type { IMenuItem, Pagination } from '../../services';
 interface MenuItemProps {
     item: IMenuItem;
-    onActivate?: (item: IMenuItem, event: MouseEvent<HTMLElement>) => void;
-    withoutChildren?: boolean;
+    location: Location;
+    active?: boolean;
+    pagination: Pagination;
+    onClick?: () => void;
 }
-export declare const MenuItem: React.FC<PropsWithChildren<MenuItemProps>>;
+export declare const MenuItem: React.NamedExoticComponent<React.PropsWithChildren<MenuItemProps>>;
 export {};

package/lib-esm/components/SideMenu/MenuItem.js

@@ -1,2 +1,2 @@
-import{observer}from"mobx-react";import React,{useRef,useState,useEffect,useCallback}from"react";import{Badge}from"@redocly/theme";import{MenuItemLi,MenuItemTitle}from"./styled";import{MenuItems}from"./MenuItems";import{MenuItemLinkOrLabel}from"./MenuItemLinkOrLabel";import{MenuOperationItemContent}from"./MenuOperationItemContent";import{ShelfIcon}from"../icons";import{userIsForcingNavigation}from"../common";function MenuItemComponent(e){const{item:t,withoutChildren:n,onActivate:m}=e,i=useRef(null),[r,o]=useState(!1),[a,c]=useState("group"===t.type&&t.expanded);useEffect((()=>{o(t.active)}),[t.active]),useEffect((()=>{c(t.expanded)}),[t.expanded]);const s=useCallback((e=>{userIsForcingNavigation(e)||(null==m||m(t,e),e.stopPropagation())}),[m,t]);return useEffect((()=>{e.item.active&&i.current&&i.current.scrollIntoViewIfNeeded()}),[e.item,e.item.active,i]),React.createElement(MenuItemLi,{onClick:s,depth:t.depth,"data-item-id":t.id},"operation"===t.type?React.createElement(MenuOperationItemContent,Object.assign({},e,{item:t,ref:i})):React.createElement(MenuItemLinkOrLabel,{depth:t.depth,active:r,type:t.type,ref:i,href:t.href,hasChildren:t.items&&t.items.length>0},t.depth>0&&t.items.length>0&&React.createElement(ShelfIcon,{direction:a?"down":"right"})||null,t.isSchema?React.createElement(Badge,{type:"schema"},"schema"):null,React.createElement(MenuItemTitle,{title:t.name},t.name,e.children)),!n&&t.items&&t.items.length>0&&React.createElement(MenuItems,{expanded:a,items:t.items,onActivate:m}))}export const MenuItem=observer(MenuItemComponent);
+import React,{memo}from"react";import{Badge}from"@redocly/theme";import{MenuItemLi,MenuItemTitle}from"./styled";import{MenuItems}from"./MenuItems";import{MenuItemLink}from"./MenuItemLink";import{MenuOperationItemContent}from"./MenuOperationItemContent";import{ShelfIcon}from"../icons";import{useMenuItemLink}from"./useMenuItemLink";function MenuItemComponent({item:e,location:t,children:n,pagination:m,active:i,onClick:o}){var a;const c=(null===(a=e.items)||void 0===a?void 0:a.length)>0,{link:r,isActive:p,isExpanded:l}=useMenuItemLink({item:e,pagination:m,active:i,location:t});return React.createElement(MenuItemLi,{depth:e.depth,"data-item-id":e.id,onClick:o},"operation"===e.type?React.createElement(MenuOperationItemContent,{item:e,to:r,active:p},n):React.createElement(MenuItemLink,{to:r,depth:e.depth,type:e.type,hasChildren:c,active:p},e.depth>0&&c&&React.createElement(ShelfIcon,{direction:l?"down":"right"})||null,e.isSchema?React.createElement(Badge,{type:"schema"},"schema"):null,React.createElement(MenuItemTitle,{title:e.name},e.name,n)),c&&React.createElement(MenuItems,{expanded:l,items:e.items,pagination:m}))}export const MenuItem=memo(MenuItemComponent);
 //# sourceMappingURL=MenuItem.js.map

package/lib-esm/components/SideMenu/MenuItemEternalLink.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { PropsWithChildren } from 'react';
 import type { ExternalLink } from '../../services';
-export declare const MenuExternalLink: React.FC<PropsWithChildren<{
+export declare const MenuExternalLink: React.NamedExoticComponent<React.PropsWithChildren<{
     link: ExternalLink;
 }>>;

package/lib-esm/components/SideMenu/MenuItemEternalLink.js

@@ -1,2 +1,2 @@
-import React from"react";import{observer}from"mobx-react";import{MenuItemLabel,MenuItemLi,MenuItemLink,MenuItemTitle,SeparatorLine}from"./styled";function isSeparator(e){return null!=e.separator||!!e.separatorLine&&!e.link}function MenuExternalLinkComponent({link:e}){return React.createElement(React.Fragment,null,isSeparator(e)?e.separator?React.createElement(MenuItemLabel,{depth:0,active:!1},e.separator):null:React.createElement(MenuItemLi,{depth:1},React.createElement(MenuItemLink,{href:e.link,target:e.target,active:!1,depth:1},React.createElement(MenuItemTitle,{title:e.label},e.label))),e.separatorLine?React.createElement(SeparatorLine,null):null)}export const MenuExternalLink=observer(MenuExternalLinkComponent);
+import React,{memo}from"react";import{StyledMenuItemLink,MenuItemLi,MenuItemLabel,MenuItemTitle,SeparatorLine}from"./styled";function isSeparator(e){return null!=e.separator||!!e.separatorLine&&!e.link}const MenuItemExternalLink=StyledMenuItemLink.withComponent("a");function MenuExternalLinkComponent({link:e}){return React.createElement(React.Fragment,null,isSeparator(e)?e.separator?React.createElement(MenuItemLabel,{depth:0,active:!1},e.separator):null:React.createElement(MenuItemLi,{depth:1},React.createElement(MenuItemExternalLink,{href:e.link,target:e.target,depth:1},React.createElement(MenuItemTitle,{title:e.label},e.label))),e.separatorLine?React.createElement(SeparatorLine,null):null)}export const MenuExternalLink=memo(MenuExternalLinkComponent);
 //# sourceMappingURL=MenuItemEternalLink.js.map

package/lib-esm/components/SideMenu/MenuItemLink.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { MenuItemLinkProps } from './types';
+export declare const MenuItemLink: React.NamedExoticComponent<React.PropsWithChildren<MenuItemLinkProps>>;

package/lib-esm/components/SideMenu/MenuItemLink.js

@@ -0,0 +1,2 @@
+import React,{memo}from"react";import{StyledMenuItemLink,MenuItemLabel}from"./styled";function MenuItemLinkComponent({href:e,children:t,to:n,hasChildren:m,deprecated:r,depth:a,active:c,type:d}){return n?React.createElement(StyledMenuItemLink,{$active:c,$hasChildren:m,type:d,deprecated:r,depth:a,to:n},t):React.createElement(MenuItemLabel,{type:d,active:c,deprecated:r,depth:a,href:e},t)}export const MenuItemLink=memo(MenuItemLinkComponent);
+//# sourceMappingURL=MenuItemLink.js.map

package/lib-esm/components/SideMenu/MenuItems.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import type { MenuItemsProps } from './types';
-export declare const MenuItems: ({ items, root, className, linksBefore, linksAfter, expanded: rawExpanded, style, onActivate, }: MenuItemsProps) => JSX.Element;
+export declare const MenuItems: React.NamedExoticComponent<MenuItemsProps>;

package/lib-esm/components/SideMenu/MenuItems.js

@@ -1,2 +1,2 @@
-import{observer}from"mobx-react";import React from"react";import{MenuItem}from"./MenuItem";import{MenuItemUl}from"./styled";import{MenuExternalLink}from"./MenuItemEternalLink";const MenuItemsComponents=({items:e,root:t,className:n,linksBefore:m=[],linksAfter:r=[],expanded:a,style:o,onActivate:i})=>{const s=null==a||a;return React.createElement(MenuItemUl,Object.assign({className:n,style:o,expanded:s},t?{role:"navigation"}:{}),m.map((e=>React.createElement(MenuExternalLink,{key:JSON.stringify(e),link:e}))),e.map((e=>React.createElement(MenuItem,{key:e.id,item:e,onActivate:i}))),r.map((e=>React.createElement(MenuExternalLink,{key:JSON.stringify(e),link:e}))))};export const MenuItems=observer(MenuItemsComponents);
+import React,{memo}from"react";import{useLocation}from"react-router-dom";import{MenuItem}from"./MenuItem";import{MenuItemUl}from"./styled";import{MenuExternalLink}from"./MenuItemEternalLink";function MenuItemsComponents({items:e,root:t,className:n,linksBefore:m=[],linksAfter:o=[],pagination:a,expanded:i=!0,style:r}){const s=useLocation();return React.createElement(MenuItemUl,Object.assign({className:n,style:r,expanded:i},t?{role:"navigation"}:{}),m.map((e=>React.createElement(MenuExternalLink,{key:JSON.stringify(e),link:e}))),e.map((e=>React.createElement(MenuItem,{key:e.id,item:e,location:s,pagination:a}))),o.map((e=>React.createElement(MenuExternalLink,{key:JSON.stringify(e),link:e}))))}export const MenuItems=memo(MenuItemsComponents);
 //# sourceMappingURL=MenuItems.js.map

package/lib-esm/components/SideMenu/MenuOperationItemContent.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
-import type { OperationModel } from '../../models';
+import type { OperationMenuItem } from '../../models';
 interface MenuOperationItemContentProps {
-    item: OperationModel;
+    item: OperationMenuItem;
+    to: string;
+    active: boolean;
 }
-export declare const MenuOperationItemContent: React.ForwardRefExoticComponent<MenuOperationItemContentProps & React.RefAttributes<HTMLElement>>;
+export declare const MenuOperationItemContent: React.NamedExoticComponent<React.PropsWithChildren<MenuOperationItemContentProps>>;
 export {};

package/lib-esm/components/SideMenu/MenuOperationItemContent.js

@@ -1,8 +1,8 @@
-import{observer}from"mobx-react";import React,{forwardRef,useContext}from"react";import{Badge}from"@redocly/theme";import styled from"styled-components";import{MenuItemPath,MenuItemTitle}from"./styled";import{MenuItemLinkOrLabel}from"./MenuItemLinkOrLabel";import{SideNavStyle,l}from"../../services";import{shortenHTTPVerb}from"../../utils";import{OptionsContext}from"../../context";const MenuItemOperationLinkOrLabel=styled(MenuItemLinkOrLabel)`
+import React,{memo}from"react";import{Badge}from"@redocly/theme";import styled from"styled-components";import{useRecoilValue}from"recoil";import{MenuItemPath,MenuItemTitle}from"./styled";import{MenuItemLink}from"./MenuItemLink";import{SideNavStyle,l}from"../../services";import{shortenHTTPVerb}from"../../utils";import{globalOptionsSelector}from"../../recoil/store";const MenuItemOperationLink=styled(MenuItemLink)`
   flex-wrap: wrap;
 `,MenuItemDescription=styled.small`
   display: block;
   font-size: 0.87em;
   line-height: 1.2;
-`,MenuOperationItemContentComponent=forwardRef((({item:e,children:t},r)=>{let o,n;const{sideNavStyle:a,showWebhookVerb:m}=useContext(OptionsContext);return a!==SideNavStyle.PathFirst&&!e.search||"operation"!==e.type?(o=a===SideNavStyle.IdOnly?e.operationId||e.path:e.name,n=null):(o=React.createElement(MenuItemPath,{title:e.path}," ",e.path," "),n=React.createElement(MenuItemDescription,null," ",e.name," ")),React.createElement(MenuItemOperationLinkOrLabel,{depth:e.depth,active:e.active,deprecated:e.deprecated,ref:r,href:e.href},e.isWebhook?React.createElement(Badge,{type:"hook"},m?e.httpVerb:l("webhook")):React.createElement(Badge,{type:e.httpVerb},shortenHTTPVerb(e.httpVerb)),React.createElement(MenuItemTitle,{width:"calc(100% - 42px)"},o,t),n)}));export const MenuOperationItemContent=observer(MenuOperationItemContentComponent);
+`;function MenuOperationItemContentComponent({item:e,to:t,children:o,active:n}){let r,i;const{sideNavStyle:m,showWebhookVerb:a}=useRecoilValue(globalOptionsSelector);return m!==SideNavStyle.PathFirst&&!e.search||"operation"!==e.type?(r=m===SideNavStyle.IdOnly?e.operationId||e.path:e.name,i=null):(r=React.createElement(MenuItemPath,{title:e.path}," ",e.path," "),i=React.createElement(MenuItemDescription,null," ",e.name," ")),React.createElement(MenuItemOperationLink,{depth:e.depth,deprecated:e.deprecated,to:t,active:n},e.isWebhook?React.createElement(Badge,{type:"hook"},a?e.httpVerb:l("webhook")):React.createElement(Badge,{type:e.httpVerb},shortenHTTPVerb(e.httpVerb)),React.createElement(MenuItemTitle,{width:"calc(100% - 42px)"},r,o),i)}export const MenuOperationItemContent=memo(MenuOperationItemContentComponent);
 //# sourceMappingURL=MenuOperationItemContent.js.map

package/lib-esm/components/SideMenu/SideMenu.d.ts

@@ -1,5 +1,8 @@
-import type { ProMenu } from '../../services';
-export declare const SideMenu: ({ menu, className, }: {
-    menu: ProMenu;
-    className?: string | undefined;
-}) => JSX.Element;
+import React from 'react';
+import type { ExtendedMenuItem, IMenuItem } from '../../services';
+interface SideMenuProps {
+    items: (ExtendedMenuItem & IMenuItem)[];
+    className?: string;
+}
+export declare const SideMenu: React.NamedExoticComponent<SideMenuProps>;
+export {};

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

@@ -1,2 +1,2 @@
-import{observer}from"mobx-react";import React,{useContext}from"react";import{RedocAttribution}from"./styled";import{MenuItems}from"./MenuItems";import{OptionsContext}from"../../context";import{PerfectScrollbarWrap}from"../common";const SideMenuComponent=({menu:e,className:t})=>{const{sidebarLinks:o,whiteLabel:r,menuToggle:n}=useContext(OptionsContext);let a;const c=e;return React.createElement(PerfectScrollbarWrap,{updateFn:e=>{a=e},className:t,options:{wheelPropagation:!1}},React.createElement(MenuItems,{items:c.items,onActivate:t=>{t&&t.active&&n&&(t.expanded?t.collapse():t.expand()),e.activateAndScroll(t,!0),setTimeout((()=>{a&&a()}))},root:!0,linksBefore:null==o?void 0:o.beforeInfo,linksAfter:null==o?void 0:o.end}),r?React.createElement(RedocAttribution,null,React.createElement("a",{href:"https://redoc.ly",target:"_blank",rel:"noreferrer"},"Powered by Redocly")):React.createElement(React.Fragment,null))};export const SideMenu=observer(SideMenuComponent);
+import React,{memo,useRef}from"react";import{useRecoilValue}from"recoil";import{RedocAttribution}from"./styled";import{MenuItems}from"./MenuItems";import{PerfectScrollbarWrap}from"../common";import{globalOptionsSelector}from"../../recoil/store";const SideMenuComponent=({items:e,className:t})=>{const{sidebarLinks:o,whiteLabel:r,pagination:n}=useRecoilValue(globalOptionsSelector),l=useRef();return React.createElement(PerfectScrollbarWrap,{updateFn:e=>{l.current=e},className:t,options:{wheelPropagation:!1}},React.createElement(MenuItems,{items:e,root:!0,linksBefore:null==o?void 0:o.beforeInfo,linksAfter:null==o?void 0:o.end,pagination:n}),r&&React.createElement(RedocAttribution,null,React.createElement("a",{href:"https://redoc.ly",target:"_blank",rel:"noreferrer"},"Powered by Redocly")))};export const SideMenu=memo(SideMenuComponent);
 //# sourceMappingURL=SideMenu.js.map

package/lib-esm/components/SideMenu/styled.d.ts

@@ -1,18 +1,23 @@
-import type { MenuItemLabelType } from './types';
 export declare const MenuItemUl: import("styled-components").StyledComponent<"ul", any, {
     expanded: boolean;
 }, never>;
 export declare const MenuItemLi: import("styled-components").StyledComponent<"li", any, {
     depth: number;
 }, never>;
-export declare const MenuItemLabel: import("styled-components").StyledComponent<"label", any, {
+export declare const StyledMenuItemLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement>>, any, {
     role: "menuitem";
     className: `-depth${number} ` | `-depth${number} active`;
-} & MenuItemLabelType, "className" | "role">;
-export declare const MenuItemLink: import("styled-components").StyledComponent<"a", any, {
+} & Omit<import("./types").MenuItemLinkProps, "active" | "hasChildren"> & {
+    $active: boolean;
+    $hasChildren: boolean | undefined;
+}, "className" | "role">;
+export declare const MenuItemLabel: import("styled-components").StyledComponent<any, any, {
     role: "menuitem";
     className: `-depth${number} ` | `-depth${number} active`;
-} & MenuItemLabelType, "className" | "role">;
+} & Omit<import("./types").MenuItemLinkProps, "active" | "hasChildren"> & {
+    $active: boolean;
+    $hasChildren: boolean | undefined;
+} & object, string | number | symbol>;
 export declare const MenuItemTitle: import("styled-components").StyledComponent<"span", any, {
     width?: string | undefined;
 }, never>;

package/lib-esm/components/SideMenu/styled.js

@@ -1,4 +1,4 @@
-import styled,{css}from"styled-components";import{ShelfIcon}from"../icons";import{deprecatedCss}from"../common";export const MenuItemUl=styled.ul`
+import styled from"styled-components";import{Link}from"react-router-dom";import{ShelfIcon}from"../icons";import{deprecatedCss}from"../common";export const MenuItemUl=styled.ul`
   margin: 0;
   padding: 0;
 
@@ -13,7 +13,7 @@ import styled,{css}from"styled-components";import{ShelfIcon}from"../icons";impor
   text-overflow: ellipsis;
   padding: 0;
   ${({depth:e})=>0===e?"margin-top: 10px":""};
-`;export const MenuItemLabel=styled.label.attrs((e=>({role:"menuitem",className:`-depth${e.depth} ${e.active?"active":""}`})))`
+`;export const StyledMenuItemLink=styled(Link).attrs((({depth:e,$active:r})=>({role:"menuitem",className:`-depth${e} ${r?"active":""}`})))`
   cursor: pointer;
   position: relative;
   margin: ${({depth:e})=>`1px 0 1px calc( var(--sidebar-offset-left) + var(--sidebar-item-nested-offset) * ${e>0?e-1:e})`};
@@ -21,15 +21,15 @@ import styled,{css}from"styled-components";import{ShelfIcon}from"../icons";impor
   text-decoration: none;
   line-height: 15px;
 
-  ${({active:e})=>e?css`
-          background-color: var(--sidebar-item-active-background-color);
-          color: var(--sidebar-item-active-color);
-        `:css`
-          background-color: var(--sidebar-background-color);
-          color: var(--sidebar-item-text-color);
-        `};
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-item-text-color);
 
-  align-items: ${({hasChildren:e})=>e?"center":""};
+  &.active {
+    background-color: var(--sidebar-item-active-background-color);
+    color: var(--sidebar-item-active-color);
+  }
+
+  align-items: ${({$hasChildren:e})=>e?"center":""};
 
   font-family: var(--sidebar-item-font-family);
   font-size: var(--sidebar-item-font-size);
@@ -43,7 +43,7 @@ import styled,{css}from"styled-components";import{ShelfIcon}from"../icons";impor
 
   padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal)
     var(--sidebar-item-padding-vertical)
-    ${({hasChildren:e,depth:i})=>e&&0!==i?"var(--sidebar-item-padding-horizontal)":"calc(var(--sidebar-item-padding-horizontal) + var(--sidebar-chevron-size) + var(--sidebar-spacing-unit) * 0.5)"};
+    ${({$hasChildren:e,depth:r})=>e&&0!==r?"var(--sidebar-item-padding-horizontal)":"calc(var(--sidebar-item-padding-horizontal) + var(--sidebar-chevron-size) + var(--sidebar-spacing-unit) * 0.5)"};
 
   ${({deprecated:e})=>e&&deprecatedCss||""};
 
@@ -59,7 +59,7 @@ import styled,{css}from"styled-components";import{ShelfIcon}from"../icons";impor
     fill: var(--sidebar-group-item-chevron-color);
     margin-right: calc(var(--sidebar-spacing-unit) / 2);
   }
-`;export const MenuItemLink=MenuItemLabel.withComponent("a");export const MenuItemTitle=styled.span`
+`;export const MenuItemLabel=StyledMenuItemLink.withComponent("label");export const MenuItemTitle=styled.span`
   display: inline-block;
   vertical-align: middle;
   width: ${e=>e.width?e.width:"auto"};