@redocly/openapi-docs 3.0.0-alpha.14.beta.2 → 3.0.0-alpha.15

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"};

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

@@ -1,19 +1,25 @@
-import type { CSSProperties, MouseEvent } from 'react';
-import type { IMenuItem, ExternalLink } from '../../services';
-export interface MenuItemLabelType {
+import type { CSSProperties } from 'react';
+import type { IMenuItem, ExternalLink, Pagination } from '../../services';
+export interface MenuItemLinkProps {
     depth: number;
     active: boolean;
     deprecated?: boolean;
     type?: string;
     hasChildren?: boolean;
+    to: string;
+    href?: string;
 }
 export interface MenuItemsProps {
     items: IMenuItem[];
     expanded?: boolean;
-    onActivate?: (item: IMenuItem, evt: MouseEvent<HTMLElement>) => void;
     style?: CSSProperties;
     root?: boolean;
     className?: string;
     linksBefore?: ExternalLink[];
     linksAfter?: ExternalLink[];
+    pagination: Pagination;
 }
+export type StyledMenuItemLinkProps = Omit<MenuItemLinkProps, 'active' | 'hasChildren'> & {
+    $active: MenuItemLinkProps['active'];
+    $hasChildren: MenuItemLinkProps['hasChildren'];
+};

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

@@ -0,0 +1,18 @@
+import type { IMenuItem } from '../../services';
+import type { Location } from 'react-router-dom';
+import { Pagination } from '../../services';
+type UseMenuItemLinkProps = {
+    item: IMenuItem;
+    pagination: Pagination;
+    active?: boolean;
+    location: Location;
+};
+type UseMenuItemLnkReturnType = {
+    link: string;
+    isExpanded: boolean;
+    isActive: boolean;
+};
+export declare function useMenuItemLink({ item, pagination, active, location, }: UseMenuItemLinkProps): UseMenuItemLnkReturnType;
+export declare function checkIfPathIncludes(location: Location, link?: string): boolean;
+export declare function checkIfPathMatched(location: Location, link?: string): boolean;
+export {};

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

@@ -0,0 +1,2 @@
+import{Pagination}from"../../services";import{isUndefined}from"../../utils";export function useMenuItemLink({item:e,pagination:n,active:t,location:i}){const o=e.href;if("group"===e.type)return{link:"",isActive:Boolean(t),isExpanded:!0};if(!isUndefined(t))return{link:o,isExpanded:t,isActive:t};const a=checkIfPathMatched(i,o),c=a||e.items.some((e=>checkIfPathMatched(i,e.href)));if(n===Pagination.Item){return{link:o.startsWith("#")?`/${o}`:o.replace(/\\/g,"%5C"),isExpanded:c,isActive:a}}return{link:o,isExpanded:c,isActive:a}}export function checkIfPathIncludes(e,n){return!!n&&decodeURIComponent(e.pathname+e.hash).includes(n)}export function checkIfPathMatched(e,n=""){return decodeURIComponent(e.pathname)===n||decodeURIComponent(e.hash)===n||decodeURIComponent(e.pathname+e.hash)===n}
+//# sourceMappingURL=useMenuItemLink.js.map

package/lib-esm/components/StickySidebar/StickyResponsiveSidebar.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-import type { PropsWithChildren } from 'react';
-import type { RawOptions } from '../../services';
-import type { ProMenu } from '../../services/ProMenu';
+import type { Options } from '../../services';
 interface StickySidebarProps {
     className?: string;
-    scrollYOffset?: RawOptions['scrollYOffset'];
-    menu: ProMenu;
+    scrollYOffset: Options['scrollYOffset'];
+    hideFab: Options['hideFab'];
 }
-export declare const StickyResponsiveSidebar: React.FC<PropsWithChildren<StickySidebarProps>>;
+export declare const StickyResponsiveSidebar: React.NamedExoticComponent<React.PropsWithChildren<StickySidebarProps>>;
 export {};

package/lib-esm/components/StickySidebar/StickyResponsiveSidebar.js

@@ -1,8 +1,7 @@
-import{observer}from"mobx-react";import React,{useContext,useRef,useState}from"react";import styled,{css}from"styled-components";import{MobileSidebarButton,useMount,useUnmount}from"@redocly/theme";import{IS_BROWSER}from"../../utils";import{OptionsContext}from"../../context";import{normalizeScrollYOffset}from"../../services/Options/helpers";let Stickyfill;IS_BROWSER&&(Stickyfill=require("stickyfill"));const stickyfill=Stickyfill&&Stickyfill(),StyledStickySidebar=styled.div`
+import React,{memo,useRef,useState}from"react";import styled,{css}from"styled-components";import{MobileSidebarButton,useMount,useUnmount}from"@redocly/theme";import{useRecoilState}from"recoil";import{IS_BROWSER}from"../../utils";import{isSidebarOpenedSelector}from"../../recoil/app";let Stickyfill;IS_BROWSER&&(Stickyfill=require("stickyfill"));const stickyfill=Stickyfill&&Stickyfill(),StyledStickySidebar=styled.div`
   overflow: hidden;
   flex-direction: column;
   backface-visibility: hidden;
-  /* contain: strict; TODO: breaks layout since Chrome 80*/
   height: 100vh;
   top: 0;
   flex: 0 0 auto;
@@ -36,5 +35,5 @@ import{observer}from"mobx-react";import React,{useContext,useRef,useState}from"r
       display: none;
     }
   `}
-`;function StickyResponsiveSidebarComponent({menu:e,scrollYOffset:t,className:i,children:o}){const[r,s]=useState("0px"),n=useContext(OptionsContext),l=useRef(null);useMount((()=>{stickyfill&&stickyfill.add(l.current),s(a(n))})),useUnmount((()=>{stickyfill&&stickyfill.remove(l.current)}));const a=e=>{let i;return i=void 0!==t?normalizeScrollYOffset(t)():e.scrollYOffset(),i+"px"},c=e.sideBarOpened,d=r;return React.createElement(React.Fragment,null,React.createElement(StyledStickySidebar,{open:c,className:i,style:{top:d,height:`calc(100vh - ${d})`},ref:l},o),!n.hideFab&&React.createElement(FloatingButton,{opened:c,onClick:()=>{e.toggleSidebar()}}))}export const StickyResponsiveSidebar=observer(StickyResponsiveSidebarComponent);
+`;function StickyResponsiveSidebarComponent({scrollYOffset:e,hideFab:i,className:t,children:o}){const[r,l]=useState("0px"),s=useRef(null),[n,a]=useRecoilState(isSidebarOpenedSelector);useMount((()=>{stickyfill&&stickyfill.add(s.current);const i=e();l(`${i}px`)})),useUnmount((()=>{stickyfill&&stickyfill.remove(s.current)}));return React.createElement(React.Fragment,null,React.createElement(StyledStickySidebar,{open:n,className:t,style:{top:r,height:`calc(100vh - ${r})`},ref:s},o),!i&&React.createElement(FloatingButton,{opened:n,onClick:()=>{a(!n)}}))}export const StickyResponsiveSidebar=memo(StickyResponsiveSidebarComponent);
 //# sourceMappingURL=StickyResponsiveSidebar.js.map

package/lib-esm/components/Tabs/CollapsingTabs/CollapsingTabs.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import type { TabsProps } from './CollapsingTabsBase';
-export declare const CollapsingTabs: ({ children, ...props }: TabsProps) => JSX.Element;
+export declare const CollapsingTabs: React.NamedExoticComponent<TabsProps>;

package/lib-esm/components/Tabs/CollapsingTabs/CollapsingTabs.js

@@ -1,2 +1,2 @@
-var __rest=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r};import React,{useCallback,useEffect,useState}from"react";import{observer}from"mobx-react";import{CollapsingTabsBase}from"./CollapsingTabsBase";function getActiveIndexFromOperation(e,t,r){var n;if(!t)return-1;if("number"==typeof r&&r>0){return hasActiveExampleName(null===(n=e[r])||void 0===n?void 0:n.content,t)?r:getActiveIndexFromOperation(e,t)}return e.findIndex((({content:e})=>hasActiveExampleName(e,t)))}function hasActiveExampleName(e,t){return!!(null==e?void 0:e.mediaTypes.find((e=>Object.keys(e.examples||[]).includes(t||""))))}export const CollapsingTabs=observer((e=>{var{children:t}=e,r=__rest(e,["children"]);const[n,a]=useState(0),{operation:o,operation:{activeExampleName:s}}=r;useEffect((()=>{const e=getActiveIndexFromOperation(o.responses,s,n);e>-1&&a(e)}),[s]);const i=useCallback((e=>{n!==e&&a(e)}),[n]);return React.createElement(CollapsingTabsBase,Object.assign({},r,{activeIndex:n,onChange:i}),t)}));
+var __rest=this&&this.__rest||function(e,t){var o={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(o[n[r]]=e[n[r]])}return o};import React,{memo,useCallback,useEffect,useState}from"react";import{useRecoilValue}from"recoil";import{CollapsingTabsBase}from"./CollapsingTabsBase";import{operationStore}from"../../../recoil/operation";function getActiveIndexFromOperation(e,t,o){var n;if(!t)return-1;if("number"==typeof o&&o>0){return hasActiveExampleName(null===(n=e[o])||void 0===n?void 0:n.content,t)?o:getActiveIndexFromOperation(e,t)}return e.findIndex((({content:e})=>hasActiveExampleName(e,t)))}function hasActiveExampleName(e,t){return!!(null==e?void 0:e.mediaTypes.find((e=>Object.keys(e.examples||[]).includes(t||""))))}function CollapsingTabsComponent(e){var{children:t}=e,o=__rest(e,["children"]);const[n,r]=useState(0),{operation:{pointer:a,responses:i}}=o,s=useRecoilValue(operationStore(a)),l=null==s?void 0:s.activeExampleName;useEffect((()=>{const e=getActiveIndexFromOperation(i,l,n);e>-1&&r(e)}),[l]);const c=useCallback((e=>{n!==e&&r(e)}),[n]);return React.createElement(CollapsingTabsBase,Object.assign({},o,{activeIndex:n,onChange:c}),t)}export const CollapsingTabs=memo(CollapsingTabsComponent);
 //# sourceMappingURL=CollapsingTabs.js.map

package/lib-esm/components/Tabs/CollapsingTabs/CollapsingTabsBase.d.ts

@@ -11,7 +11,7 @@ export interface TabsProps {
     children: ReactNode;
     operation: OperationModel;
 }
-interface CollapsingTabsComponentProps extends TabsProps {
+interface CollapsingTabsComponentProps extends Omit<TabsProps, 'operation'> {
     activeIndex: number;
     onChange: (idx: number) => void;
 }

package/lib-esm/components/Tabs/CollapsingTabs/CollapsingTabsBase.js

@@ -1,2 +1,2 @@
-import React from"react";import{Tabs}from"react-tabs";import{OptionsContext}from"../../../context";import{CollapsingDropdown}from"../../common/Dropdown";import{CollapsingTabList}from"./CollapsingTabList";import{CollapsingTab}from"./CollapsingTab";function CollapsingTabsBaseComponent({tabs:e,children:t,hidden:a,activeIndex:o,onChange:n}){const{samplesTabsMaxCount:l}=React.useContext(OptionsContext),s=React.useMemo((()=>e.slice(l).map((({title:e},t)=>({idx:t,value:e})))),[e,l]),i=`${s.length} more`,[c,p]=React.useState(i),m=React.useCallback((()=>{const t=o>=l;c!==i&&c===e[o].title||!t?c===i||t||p(i):p(e[o].title)}),[o,l,c,i,e]);React.useEffect((()=>{setTimeout(m,0)}),[o,l,m]);return React.createElement(Tabs,{selectedIndex:o,onSelect:n},React.createElement(CollapsingTabList,{hidden:a},e.map(((e,t)=>React.createElement(CollapsingTab,{key:e.key,disabled:t>=l},e.title))),s.length?React.createElement(CollapsingDropdown,{options:s,onChange:e=>{n(l+e.idx)},placeholder:i,value:c,active:o>=l}):null),t)}export const CollapsingTabsBase=React.memo(CollapsingTabsBaseComponent);
+import React from"react";import{Tabs}from"react-tabs";import{useRecoilValue}from"recoil";import{CollapsingDropdown}from"../../common/Dropdown";import{CollapsingTabList}from"./CollapsingTabList";import{CollapsingTab}from"./CollapsingTab";import{globalOptionsSelector}from"../../../recoil/store";function CollapsingTabsBaseComponent({tabs:e,children:t,hidden:o,activeIndex:a,onChange:l}){const{samplesTabsMaxCount:n}=useRecoilValue(globalOptionsSelector),s=React.useMemo((()=>e.slice(n).map((({title:e},t)=>({idx:t,value:e})))),[e,n]),i=`${s.length} more`,[c,r]=React.useState(i),p=React.useCallback((()=>{const t=a>=n;c!==i&&c===e[a].title||!t?c===i||t||r(i):r(e[a].title)}),[a,n,c,i,e]);React.useEffect((()=>{setTimeout(p,0)}),[a,n,p]);return React.createElement(Tabs,{selectedIndex:a,onSelect:l},React.createElement(CollapsingTabList,{hidden:o},e.map(((e,t)=>React.createElement(CollapsingTab,{key:e.key,disabled:t>=n},e.title))),s.length?React.createElement(CollapsingDropdown,{options:s,onChange:e=>{l(n+e.idx)},placeholder:i,value:c,active:a>=n}):null),t)}export const CollapsingTabsBase=React.memo(CollapsingTabsBaseComponent);
 //# sourceMappingURL=CollapsingTabsBase.js.map

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

@@ -0,0 +1,2 @@
+import type { SectionItemProps } from '../SectionItem/SectionItem';
+export declare function TagItem({ item }: SectionItemProps): JSX.Element;

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

@@ -0,0 +1,2 @@
+import React from"react";import{H2}from"@redocly/theme";import{SamplesMiddlePanel,ShareLink}from"../common";import{Markdown}from"../Markdown";export function TagItem({item:e}){const{description:t,name:a,href:r}=e;return React.createElement(React.Fragment,null,React.createElement(SamplesMiddlePanel,null,React.createElement(H2,null,React.createElement(ShareLink,{to:r}),a)),React.createElement(Markdown,{source:t,htmlWrap:e=>React.createElement(SamplesMiddlePanel,null,e)}))}
+//# sourceMappingURL=TagItem.js.map

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

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

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

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

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

@@ -0,0 +1,13 @@
+import type { ContentItemModel } from '../../models';
+import type { Options } from '../../services';
+interface TagItemsProps {
+    tag: ContentItemModel;
+    nextSectionLink?: {
+        name: string;
+        href?: string;
+    };
+    pagination: Options['pagination'];
+    showNextButton?: boolean;
+}
+export declare function TagItems({ tag, nextSectionLink, pagination, showNextButton, }: TagItemsProps): JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import React from"react";import{Pagination}from"../../services";import{ContentItem}from"../ContentItem";import{NextSectionButton}from"../NextSectionButton";import{SectionContent}from"../SectionContent";export function TagItems({tag:t,nextSectionLink:e,pagination:n,showNextButton:o}){return React.createElement(React.Fragment,null,React.createElement(ContentItem,{key:t.id,item:t,pagination:n,showNextButton:o,withChildren:n!==Pagination.Item}),n===Pagination.Item&&React.createElement(SectionContent,{items:t.items,pagination:n,showNextButton:!1,showApiInfo:!1}),o&&e&&React.createElement(NextSectionButton,{href:e.href||"",label:e.name,pagination:n}))}
+//# sourceMappingURL=TagItems.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+export declare function ToggleRightPanelButton(): JSX.Element | null;

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

@@ -0,0 +1,2 @@
+import React from"react";import{Tooltip}from"@redocly/theme";import{useRecoilState,useRecoilValue}from"recoil";import{LayoutVariant}from"../../constants";import{layoutSelector,showRightPanelToggleSelector}from"../../recoil/app";import{globalOptionsSelector}from"../../recoil/store";import{StyledToggleRightPanelButton,HideRightPanelSVG,ShowRightPanelSVG}from"./styled";export function ToggleRightPanelButton(){const e=useRecoilValue(globalOptionsSelector),[t,o]=useRecoilState(showRightPanelToggleSelector),l=useRecoilValue(layoutSelector)===LayoutVariant.THREE_PANEL;return e.showRightPanelToggle&&l?React.createElement(Tooltip,{tip:""+(t?"Hide samples":"Show samples"),placement:"left"},React.createElement(StyledToggleRightPanelButton,{onClick:()=>{o(!t)}},t?React.createElement(HideRightPanelSVG,null):React.createElement(ShowRightPanelSVG,null))):null}
+//# sourceMappingURL=ToggleRightPanelButton.js.map

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

@@ -0,0 +1 @@
+export * from './ToggleRightPanelButton';

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

@@ -0,0 +1,2 @@
+export*from"./ToggleRightPanelButton";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,3 @@
+export declare const HideRightPanelSVG: import("styled-components").StyledComponent<() => JSX.Element, any, {}, never>;
+export declare const StyledToggleRightPanelButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ShowRightPanelSVG: import("styled-components").StyledComponent<() => JSX.Element, any, {}, never>;

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

@@ -0,0 +1,17 @@
+import React from"react";import styled from"styled-components";export const HideRightPanelSVG=styled((()=>React.createElement("svg",{width:"15",height:"10",viewBox:"0 0 15 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React.createElement("path",{d:"M12.5858 5L9.29289 1.70711C8.90237 1.31658 8.90237 0.683417 9.29289 0.292893C9.68342 -0.097631 10.3166 -0.0976309 10.7071 0.292893L14.7071 4.29289C15.0976 4.68342 15.0976 5.31658 14.7071 5.70711L10.7071 9.70711C10.3166 10.0976 9.68342 10.0976 9.29289 9.70711C8.90237 9.31658 8.90237 8.68342 9.29289 8.29289L12.5858 5Z",fill:"var(--color-emphasis-400)"}),React.createElement("path",{d:"M13 5C13 5.55229 12.5523 6 12 6L4 6C3.44772 6 3 5.55228 3 5C3 4.44771 3.44772 4 4 4L12 4C12.5523 4 13 4.44772 13 5Z",fill:"var(--color-emphasis-400)"}),React.createElement("rect",{width:"2",height:"10",rx:"1",fill:"var(--color-emphasis-400)"}))))`
+  position: absolute;
+`;export const StyledToggleRightPanelButton=styled.a`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 1;
+  /* Rectangle 201 */
+  height: var(--layout-controls-height);
+  width: var(--layout-controls-width);
+  background: var(--color-emphasis-100);
+  border-radius: var(--border-radius);
+`;export const ShowRightPanelSVG=styled((()=>React.createElement("svg",{width:"15",height:"10",viewBox:"0 0 15 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React.createElement("path",{d:"M2.41421 5L5.70711 8.29289C6.09763 8.68342 6.09763 9.31658 5.7071 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711L0.292892 5.70711C-0.0976321 5.31658 -0.0976319 4.68342 0.292893 4.29289L4.29289 0.292894C4.68342 -0.0976302 5.31658 -0.09763 5.70711 0.292894C6.09763 0.683418 6.09763 1.31658 5.70711 1.70711L2.41421 5Z",fill:"var(--color-emphasis-400)"}),React.createElement("path",{d:"M2 5C2 4.44772 2.44771 4 3 4L11 4C11.5523 4 12 4.44772 12 5C12 5.55229 11.5523 6 11 6L3 6C2.44771 6 2 5.55228 2 5Z",fill:"var(--color-emphasis-400)"}),React.createElement("rect",{x:"15",y:"10",width:"2",height:"10",rx:"1",transform:"rotate(-180 15 10)",fill:"var(--color-emphasis-400)"}))))`
+  position: absolute;
+`;
+//# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,8 @@
-import type { VersionedSpecStore } from '../services/VersionedSpecStore';
 import type { DropdownOption } from './common/Dropdown';
+import type { OpenAPIDefinitionVersion } from '../recoil/store';
 export interface VersionSwitcherProps {
     onChange: (o: DropdownOption) => void;
-    spec: VersionedSpecStore;
+    versions: OpenAPIDefinitionVersion[];
+    activeVersionIdx: number;
 }
-export declare const VersionSwitcher: ({ spec, onChange }: VersionSwitcherProps) => JSX.Element;
+export declare const VersionSwitcher: ({ versions, onChange, activeVersionIdx, }: VersionSwitcherProps) => JSX.Element | null;

package/lib-esm/components/VersionSwitcher.js

@@ -1,4 +1,4 @@
-import React from"react";import styled from"styled-components";import{VersionDropdown}from"./common/Dropdown";export const VersionSwitcher=({spec:e,onChange:n})=>{const o=e.versionsInfo.map(((e,n)=>({idx:n,value:e.title})));return React.createElement(VersionWrapper,null,React.createElement(VersionDropdown,{options:o,value:o[e.activeVersionIdx].value,onChange:n,ariaLabel:"Version"}))};const VersionWrapper=styled.div`
+import React from"react";import styled from"styled-components";import{VersionDropdown}from"./common/Dropdown";export const VersionSwitcher=({versions:e,onChange:n,activeVersionIdx:o})=>{const r=e.map(((e,n)=>({idx:n,value:e.title||e.id})));return React.createElement(VersionWrapper,null,React.createElement(VersionDropdown,{options:r,value:r[o].value,onChange:n,ariaLabel:"Version"}))};const VersionWrapper=styled.div`
   padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
   width: 100%;
   display: inline-block;

package/lib-esm/components/common/Dropdown/Dropdown.js

@@ -1,4 +1,4 @@
-import React,{memo}from"react";import styled from"styled-components";import{ClearButton}from"../ClearButton";const ArrowSvg=({className:e,style:t})=>React.createElement("svg",{className:e,style:t,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},React.createElement("polyline",{points:"6 9 12 15 18 9"})),ArrowIcon=styled(ArrowSvg)`
+import React,{memo,useMemo}from"react";import styled from"styled-components";import{ClearButton}from"../ClearButton";import{normalizeText}from"../../../utils";const ArrowSvg=({className:e,style:t})=>React.createElement("svg",{className:e,style:t,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},React.createElement("polyline",{points:"6 9 12 15 18 9"})),ArrowIcon=styled(ArrowSvg)`
   position: absolute;
   pointer-events: none;
   z-index: 1;
@@ -12,5 +12,5 @@ import React,{memo}from"react";import styled from"styled-components";import{Clea
   polyline {
     color: ${e=>"dark"===e.variant&&"white"};
   }
-`,DropdownComponent=({options:e,onChange:t,handleClear:o,clearable:a,placeholder:n,value:r="",className:l,variant:s="light"})=>{var c;const i=(null===(c=e.find((e=>e.value===r)))||void 0===c?void 0:c.title)||r;return React.createElement("div",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,{variant:s}),a&&(null==r?void 0:r.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:a}=o.target;t(e[n||!r?a-1:a])},value:r,className:"dropdown-select"},n&&React.createElement("option",{disabled:!0,hidden:!0,value:n},n),!r&&!n&&React.createElement("option",{disabled:!0}),e.map((({idx:e,value:t,title:o},a)=>React.createElement("option",{key:e||t+a,value:t,className:"dropdown-option"},o||t)))),React.createElement("label",null,i))};export const Dropdown=memo(DropdownComponent);
+`,DropdownComponent=({options:e,onChange:t,handleClear:o,clearable:n,placeholder:a,value:r="",className:l,variant:s="light"})=>{const c=useMemo((()=>e.map((({idx:e,value:t,title:o},n)=>{const a=normalizeText(t);return React.createElement("option",{key:e||a+n,value:a,className:"dropdown-option"},o||a)}))),[e]),i=normalizeText(r);return React.createElement("div",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,{variant:s}),n&&(null==i?void 0:i.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:n}=o.target;t(e[a||!r?n-1:n])},value:i,className:"dropdown-select"},a&&React.createElement("option",{disabled:!0,hidden:!0,value:a},a),!i&&!a&&React.createElement("option",{disabled:!0}),c),React.createElement("label",null,i))};export const Dropdown=memo(DropdownComponent);
 //# sourceMappingURL=Dropdown.js.map

package/lib-esm/components/common/Dropdown/styled.js

@@ -1,4 +1,4 @@
-import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}from"./Dropdown";const darkDropdownStyle=css`
+import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}from"./Dropdown";const samplesDropdownStyle=css`
   background-color: var(--panel-samples-dropdown-background-color);
   border: var(--panel-samples-dropdown-border);
   color: var(--panel-samples-dropdown-color);
@@ -47,7 +47,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
       box-shadow: none;
     }
 
-    ${({variant:o})=>"dark"===o?darkDropdownStyle:""};
+    ${({variant:o})=>"dark"===o?samplesDropdownStyle:""};
   }
 
   .dropdown-select {
@@ -66,7 +66,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
     font-size: 14px;
     font-family: inherit;
     padding: var(--dropdown-padding);
-    ${({variant:o})=>"dark"===o?darkDropdownStyle:""};
+    ${({variant:o})=>"dark"===o?samplesDropdownStyle:""};
   }
 `;export const SimpleDropdown=styled(Dropdown)`
   svg {
@@ -94,7 +94,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
     transform: translateY(-60%);
   }
   label {
-    ${darkDropdownStyle};
+    ${samplesDropdownStyle};
 
     height: 40px;
     border-radius: 0 var(--border-radius) 0 0;

package/lib-esm/components/common/Fields/fields-layout.d.ts

@@ -12,5 +12,4 @@ export declare const PropertyNameCell: import("styled-components").StyledCompone
 export declare const PropertyDetailsCell: import("styled-components").StyledComponent<"td", any, {}, never>;
 export declare const PropertyBullet: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const InnerPropertiesWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PropertiesTableWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PropertiesTable: import("styled-components").StyledComponent<"table", any, {}, never>;

package/lib-esm/components/common/Fields/fields-layout.js

@@ -149,11 +149,6 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   }
 `;export const InnerPropertiesWrap=styled.div`
   padding: var(--schema-nested-offset);
-`;export const PropertiesTableWrap=styled.div`
-  display: block;
-  overflow-x: auto;
-  padding: 5px; /* hack to show overflown anchor icons */
-  margin: -5px;
 `;export const PropertiesTable=styled.table`
   border-collapse: separate;
   border-radius: var(--border-radius);

package/lib-esm/components/common/LinkToField.d.ts

@@ -1,9 +1,18 @@
+import type { Location } from 'react-router-dom';
 import type { PropsWithChildren } from 'react';
 import type { FieldModel } from '../../models';
+import { Pagination } from '../../services';
+import { ShareLink } from './linkify';
 interface LinkToFieldProps {
-    field: FieldModel;
     className?: string;
+    to?: string;
+    location?: Location;
 }
+export declare function generateDeepLink(field: FieldModel, options: {
+    pagination: Pagination;
+}): string;
 export declare const LinkToField: (props: PropsWithChildren<LinkToFieldProps>) => JSX.Element;
-export declare const ShareLinkToField: import("styled-components").StyledComponent<(props: PropsWithChildren<LinkToFieldProps>) => JSX.Element, any, {}, never>;
+export declare const ShareLinkToField: import("styled-components").StyledComponent<typeof ShareLink, any, {
+    isActive: boolean;
+}, never>;
 export {};

package/lib-esm/components/common/LinkToField.js

@@ -1,27 +1,14 @@
-import styled from"styled-components";import React,{useContext,useEffect,useState}from"react";import{StoreContext}from"../../context";import{SECTION_ATTR}from"../../constants";import{constructFieldDeepFragment}from"../../services/history/helpers";import{linkifyMixin,userIsForcingNavigation}from"./linkify";import{LinkIcon}from"../icons";export const LinkToField=e=>{var i,n;const o=useContext(StoreContext),[t,r]=useState(!1),l=(null==o?void 0:o.menu.history.linkForId(null===(i=e.field.deps.operation)||void 0===i?void 0:i.id))||"",s=constructFieldDeepFragment(e.field),a=o&&s?o.menu.history.generateDeepLink(s,l):null,c=o?{[SECTION_ATTR]:(null===(n=e.field.deps.operation)||void 0===n?void 0:n.id)+o.options.deepLinkPrefix+s,id:a&&a.split("#")[1]||void 0}:null;return useEffect((()=>{if(o&&c)return r(o.menu.history.currentId===c[SECTION_ATTR]),o.menu.history.subscribe((e=>{r(e===c[SECTION_ATTR])}))}),[null==o?void 0:o.menu.history,null==c?void 0:c[SECTION_ATTR]]),s&&o&&a?React.createElement("a",Object.assign({className:e.className+(t?" active":""),href:a,onClick:e=>(((e,i,n)=>{i.defaultPrevented||userIsForcingNavigation(i)||(i.preventDefault(),e.replaceForField(n))})(null==o?void 0:o.menu.history,e,a),e.stopPropagation(),e.preventDefault(),o.options.onDeepLinkClick&&o.options.onDeepLinkClick(a),!1)},c),React.createElement(LinkIcon,null),e.children):React.createElement(React.Fragment,null,e.children||null)};export const ShareLinkToField=styled(LinkToField)`
-  ${linkifyMixin("&","13px")}
-
-  & ${LinkIcon} {
-    color: var(--schema-property-deep-link-icon-color);
-
-    background-image: var(--schema-property-deep-link-icon);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-  }
-
-  & {
-    position: absolute;
-    padding-right: 4px;
-    transform: translateX(-90%);
-
-    .field-name:hover & ${LinkIcon}, &:hover & ${LinkIcon} {
-      visibility: visible;
-    }
+import styled from"styled-components";import React from"react";import{AnchorIcon}from"@redocly/theme";import{joinWithSeparator,Pagination}from"../../services";import{constructFieldDeepFragment}from"../../services/history/helpers";import{checkIfPathMatched}from"../SideMenu/useMenuItemLink";import{ShareLink}from"./linkify";export function generateDeepLink(e,i){const t=e.deps.operation,o=constructFieldDeepFragment(e);if(!(null==t?void 0:t.id)&&!t.isCallback)return"#"+o;let n=i.pagination===Pagination.Item?"#":t.href;return joinWithSeparator(n,o,"!")}export const LinkToField=e=>{const i=e.to;return React.createElement(ShareLinkToField,{className:e.className,isActive:!(!(null==e?void 0:e.location)||!checkIfPathMatched(null==e?void 0:e.location,i)),to:i,id:null==i?void 0:i.split("#")[1]})};export const ShareLinkToField=styled(ShareLink)`
+  left: 10px;
+  display: flex;
+  ${({isActive:e})=>e&&`\n    ${AnchorIcon} {\n      visibility: visible;\n    }\n  `}
+  :hover ${AnchorIcon}, :focus ${AnchorIcon} {
+    visibility: visible;
   }
 
-  &.active ${LinkIcon} {
-    visibility: visible;
+  ${AnchorIcon} {
+    width: 13px;
+    height: 13px;
   }
 `;
 //# sourceMappingURL=LinkToField.js.map

package/lib-esm/components/common/Portal/Portal.d.ts

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+interface PortalProps {
+    mountId?: string;
+}
+export declare const Portal: ({ children, mountId }: PropsWithChildren<PortalProps>) => JSX.Element;
+export {};

package/lib-esm/components/common/Portal/Portal.js

@@ -0,0 +1,2 @@
+import React,{useEffect}from"react";import{createPortal}from"react-dom";import{IS_BROWSER}from"../../../utils";const container=IS_BROWSER?document.createElement("div"):null;export const Portal=({children:e,mountId:t="api-content"})=>{const n=IS_BROWSER?document.getElementById(t):null;return useEffect((()=>{if(n&&container)return n.appendChild(container),()=>{n.removeChild(container)}}),[n]),n&&container?createPortal(e,container):React.createElement(React.Fragment,null,e)};
+//# sourceMappingURL=Portal.js.map

package/lib-esm/components/common/Portal/index.d.ts

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

package/lib-esm/components/common/Portal/index.js

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

package/lib-esm/components/{ContentItems → common/Skeleton}/Skeleton.js

@@ -1,4 +1,4 @@
-import React from"react";import styled,{keyframes}from"styled-components";import{Section,SamplesMiddlePanel,H2}from"../common";const shimmer=keyframes`
+import React from"react";import styled,{keyframes}from"styled-components";import{H2}from"@redocly/theme";import{Section,SamplesMiddlePanel}from"../panels";const shimmer=keyframes`
   100% {
       transform: translateX(100%);
   }

package/lib-esm/components/common/Skeleton/index.d.ts

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

package/lib-esm/components/common/Skeleton/index.js

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

package/lib-esm/components/common/form.js

@@ -9,7 +9,7 @@ import styled,{css}from"styled-components";export const Table=styled.div`
   position: absolute;
 `;export const FormControl=styled.div`
   width: 100%;
-  /* font-family: var(--code-font-family); */
+  font-family: var(--code-font-family);
   display: flex;
   flex-direction: column;
   margin-bottom: 10px;

package/lib-esm/components/common/headers.d.ts

@@ -1,8 +1,2 @@
-export declare const H1: import("styled-components").StyledComponent<"h1", any, {}, never>;
-export declare const H2: import("styled-components").StyledComponent<"h2", any, {}, never>;
-export declare const H3: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const H4: import("styled-components").StyledComponent<"h4", any, {}, never>;
-export declare const H5: import("styled-components").StyledComponent<"h5", any, {}, never>;
-export declare const H6: import("styled-components").StyledComponent<"h6", any, {}, never>;
 export declare const SamplesPanelHeader: import("styled-components").StyledComponent<"h3", any, {}, never>;
 export declare const FieldsGroupHeader: import("styled-components").StyledComponent<"h5", any, {}, never>;

package/lib-esm/components/common/headers.js

@@ -1,28 +1,4 @@
-import styled from"styled-components";import{typography}from"../../utils";export const H1=styled.h1`
-  margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
-
-  ${typography("h1","h")};
-`;export const H2=styled.h2`
-  margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
-
-  ${typography("h2","h")};
-`;export const H3=styled.h3`
-  margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
-
-  ${typography("h3","h")};
-`;export const H4=styled.h4`
-  margin: var(--h4-margin-top) 0 var(--h4-margin-bottom);
-
-  ${typography("h4","h")};
-`;export const H5=styled.h5`
-  margin: var(--h5-margin-top) 0 var(--h5-margin-bottom);
-
-  ${typography("h5","h")};
-`;export const H6=styled.h6`
-  margin: var(--h6-margin-top) 0 var(--h6-margin-bottom);
-
-  ${typography("h6","h")};
-`;export const SamplesPanelHeader=styled.h3`
+import styled from"styled-components";import{typography}from"../../utils";export const SamplesPanelHeader=styled.h3`
   color: var(--panel-samples-text-color);
 
   ${typography("right-panel-header")};

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

@@ -5,8 +5,10 @@ export { deprecatedCss } from './mixins';
 export { FormControl } from './form';
 export * from './Fields';
 export * from './panels';
-export { H1, H2, H3, H4, H5, H6, FieldsGroupHeader, SamplesPanelHeader } from './headers';
-export { linkifyMixin, userIsForcingNavigation, ShareLink, Link } from './linkify';
+export { FieldsGroupHeader, SamplesPanelHeader } from './headers';
+export { ShareLink, Link } from './linkify';
 export * from './shelfs';
 export * from './schema';
 export * from './perfect-scrollbar';
+export { Portal } from './Portal';
+export { Skeleton } from './Skeleton';

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

@@ -1,2 +1,2 @@
-export{Dropdown,SchemaDiscriminatorDropdown}from"./Dropdown";export{ShareLinkToField}from"./LinkToField";export{deprecatedCss}from"./mixins";export{FormControl}from"./form";export*from"./Fields";export*from"./panels";export{H1,H2,H3,H4,H5,H6,FieldsGroupHeader,SamplesPanelHeader}from"./headers";export{linkifyMixin,userIsForcingNavigation,ShareLink,Link}from"./linkify";export*from"./shelfs";export*from"./schema";export*from"./perfect-scrollbar";
+export{Dropdown,SchemaDiscriminatorDropdown}from"./Dropdown";export{ShareLinkToField}from"./LinkToField";export{deprecatedCss}from"./mixins";export{FormControl}from"./form";export*from"./Fields";export*from"./panels";export{FieldsGroupHeader,SamplesPanelHeader}from"./headers";export{ShareLink,Link}from"./linkify";export*from"./shelfs";export*from"./schema";export*from"./perfect-scrollbar";export{Portal}from"./Portal";export{Skeleton}from"./Skeleton";
 //# sourceMappingURL=index.js.map

package/lib-esm/components/common/linkify.d.ts

@@ -1,13 +1,9 @@
-import React from 'react';
 import type { PropsWithChildren } from 'react';
-import type { FlattenSimpleInterpolation } from 'styled-components';
-export declare function userIsForcingNavigation(event: React.MouseEvent): boolean;
-export declare const linkifyMixin: (className: string, size: string) => FlattenSimpleInterpolation;
 export declare function Link(props: PropsWithChildren<{
     to: string;
     className?: string;
     security?: boolean;
+    id?: string;
 }>): JSX.Element | null;
-export declare function ShareLink(props: {
-    to: string;
-}): JSX.Element;
+export declare const StyledShareLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
+export declare function ShareLink(props: any): JSX.Element;