@redocly/openapi-docs 3.0.0 → 3.0.2

package/lib-esm/components/Download/DownloadSpecification.js

@@ -0,0 +1,40 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{memo,useCallback}from"react";import{useAtomValue}from"jotai";import styled from"styled-components";import{DownloadIcon,DocumentIcon,JsonIcon,Button,FileIcon}from"@redocly/theme";import{useDownloadInfo}from"./useDownloadInfo";import{globalStoreAtom}from"../../jotai/store";function DownloadSpecificationComponent(){const{options:o}=useAtomValue(globalStoreAtom),e=useDownloadInfo({downloadUrls:o.downloadUrls}),t=useCallback((o=>{switch(o){case"yaml":return _jsx(DocumentIcon,{});case"json":return _jsx(JsonIcon,{});default:return _jsx(FileIcon,{})}}),[]);return e?_jsx(Wrapper,{children:(e||[]).map((({title:o,url:e,iconType:n})=>_jsxs(Card,{children:[_jsxs(FileName,{children:[t(n),_jsx("a",{href:e,target:"_blank",download:!0,rel:"noreferrer",children:o})]}),_jsx("a",{href:e,target:"_blank",download:!0,rel:"noreferrer",children:_jsx(Button,{variant:"text",size:"small",icon:_jsx(DownloadIcon,{})})})]},o)))}):_jsx(_Fragment,{})}export const DownloadSpecification=memo(DownloadSpecificationComponent);const Card=styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  width: 100%;
+
+  border-bottom: 1px solid var(--border-color-secondary);
+  padding-bottom: var(--spacing-sm);
+  :last-of-type {
+    padding-bottom: 0px;
+    border-bottom: none;
+  }
+`,FileName=styled.span`
+  display: flex;
+  width: calc(100% - 25px);
+  gap: var(--spacing-xs);
+  align-items: center;
+
+  svg {
+    flex-shrink: 0;
+  }
+  a {
+    width: 100%;
+    color: var(--text-color-primary);
+    word-break: break-word;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+`,Wrapper=styled.div`
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  justify-content: space-between;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-base);
+`;
+//# sourceMappingURL=DownloadSpecification.js.map

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

@@ -1,3 +1 @@
-export { DownloadButtonWithLabel } from './DownloadButtonWithLabel';
-export { DownloadLink } from './DownloadLink';
-export type { FileInfo } from './types';
+export { DownloadSpecification } from './DownloadSpecification';

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

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

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

@@ -1,18 +1,14 @@
-import type { OpenAPIDefinition } from '../../types';
-export interface FileInfo {
-    fileInfo?: {
-        rawData: any;
-        fileName: string;
-    };
-}
+export type DownloadUrlsConfig = {
+    title?: string;
+    url: string;
+}[];
+export type DownloadIconType = 'yaml' | 'json' | 'file';
 export type UseDownloadInfoProps = {
-    definition?: OpenAPIDefinition;
     definitionUrl?: string;
+    downloadUrls?: DownloadUrlsConfig;
 };
 export type UseDownloadInfoReturnType = {
-    downloadFileName?: string;
-    getDownloadLink: () => string | undefined;
-};
-export interface DownloadButtonWithLabelProps {
-    wrapped?: boolean;
-}
+    title: string;
+    url: string;
+    iconType: DownloadIconType;
+}[];

package/lib-esm/components/Download/useDownloadInfo.d.ts

@@ -1,2 +1,2 @@
 import type { UseDownloadInfoProps, UseDownloadInfoReturnType } from './types';
-export declare const useDownloadInfo: ({ definition, definitionUrl, }: UseDownloadInfoProps) => UseDownloadInfoReturnType;
+export declare const useDownloadInfo: ({ downloadUrls, }: UseDownloadInfoProps) => UseDownloadInfoReturnType | undefined;

package/lib-esm/components/Download/useDownloadInfo.js

@@ -1,2 +1,2 @@
-import{useCallback}from"react";import{IS_BROWSER}from"../../utils";import{MediaTypes}from"../../constants";export const useDownloadInfo=({definition:o,definitionUrl:e})=>({downloadFileName:e?void 0:"swagger.json",getDownloadLink:useCallback((()=>{if(e)return e;if(IS_BROWSER&&window.Blob&&window.URL&&window.URL.createObjectURL){const e=new Blob([JSON.stringify(o,null,2)],{type:MediaTypes.JSON});return window.URL.createObjectURL(e)}}),[o,e])});
+import{useMemo}from"react";export const useDownloadInfo=({downloadUrls:e})=>useMemo((()=>{if(e)return e.map((({title:e,url:o})=>({url:o,title:e||getFileNameFromUrl(o,"openapi.yaml"),iconType:getIconTypeFromUrl(o)})))}),[e]);function getFileNameFromUrl(e,o){const l=e.split("?")[0].split(/[\\\/]/).pop();return l&&(l.includes("yaml")||l.includes("json"))?l:o}function getIconTypeFromUrl(e,o){const l=o||e.split("?")[0].split(/[\\\/]/).pop();return l?l.includes("yaml")?"yaml":l.includes("json")?"json":"file":"file"}
 //# sourceMappingURL=useDownloadInfo.js.map

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

@@ -1,9 +1,9 @@
 import { Component } from 'react';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 export declare class ErrorBoundary extends Component<PropsWithChildren<unknown>, {
     error?: Error;
 }> {
     constructor(props: PropsWithChildren<unknown>);
     componentDidCatch(error: Error): boolean;
-    render(): JSX.Element;
+    render(): ReactElement;
 }

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

@@ -1,5 +1,5 @@
-import React,{Children,Component}from"react";import styled from"styled-components";const ErrorWrapper=styled.div`
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{Children,Component}from"react";import styled from"styled-components";const ErrorWrapper=styled.div`
   padding: 20px;
   color: red;
-`;export class ErrorBoundary extends Component{constructor(e){super(e),this.state={error:void 0}}componentDidCatch(e){return this.setState({error:e}),!1}render(){return this.state.error?React.createElement(ErrorWrapper,null,React.createElement("h1",null,"Something went wrong..."),React.createElement("small",null," ",this.state.error.message," "),React.createElement("p",null,React.createElement("details",null,React.createElement("summary",null,"Stack trace"),React.createElement("pre",null,this.state.error.stack))),"undefined"!=typeof __REDOC_VERSION__?React.createElement(React.Fragment,null,React.createElement("small",null," References docs version: ",__REDOC_VERSION__)," ",React.createElement("br",null)):null,"undefined"!=typeof __REDOC_REVISION__?React.createElement("small",null," Commit: ",__REDOC_REVISION__):null):React.createElement(React.Fragment,null,Children.only(this.props.children))}}
+`;export class ErrorBoundary extends Component{constructor(r){super(r),this.state={error:void 0}}componentDidCatch(r){return this.setState({error:r}),!1}render(){return this.state.error?_jsxs(ErrorWrapper,{children:[_jsx("h1",{children:"Something went wrong..."}),_jsxs("small",{children:[" ",this.state.error.message," "]}),_jsx("p",{children:_jsxs("details",{children:[_jsx("summary",{children:"Stack trace"}),_jsx("pre",{children:this.state.error.stack})]})}),"undefined"!=typeof __REDOC_VERSION__?_jsxs(_Fragment,{children:[_jsxs("small",{children:[" References docs version: ",__REDOC_VERSION__]})," ",_jsx("br",{})]}):null,"undefined"!=typeof __REDOC_REVISION__?_jsxs("small",{children:[" Commit: ",__REDOC_REVISION__]}):null]}):_jsx(_Fragment,{children:Children.only(this.props.children)})}}
 //# sourceMappingURL=ErrorBoundary.js.map

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

@@ -0,0 +1,6 @@
+interface ExpandAllButtonProps {
+    operationPointer: string;
+    type: 'request' | 'response';
+}
+export declare const ExpandAllButton: ({ operationPointer, type }: ExpandAllButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,4 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo}from"react";import styled from"styled-components";import{Button,MaximizeIcon}from"@redocly/theme";import{useAtom}from"jotai/index";import{operationStore}from"../../jotai/operation";export const ExpandAllButton=({operationPointer:t,type:e})=>{const[o,n]=useAtom(operationStore(t)),s=useMemo((()=>Object.values(o[e].expandedFields).includes(!1)),[o,e]);if(!Object.keys(o[e].expandedFields).length)return null;return _jsxs(StyledButton,{icon:_jsx(MaximizeIcon,{}),iconPosition:"right",size:"small",variant:"ghost",onClick:()=>{n((t=>{const o={};for(const n in t[e].expandedFields)o[n]=s;return Object.assign(Object.assign({},t),{[e]:{expandedFields:o}})}))},children:[s?"Expand":"Collapse"," all"]})};const StyledButton=styled(Button)`
+  margin-left: auto;
+`;
+//# sourceMappingURL=ExpandAllButton.js.map

package/lib-esm/components/ExpandAllButton/getAllNestedSchema.d.ts

@@ -0,0 +1,8 @@
+import type { SchemaModel } from '../../models';
+import type { OperationStore } from '../../jotai/operation';
+export declare const getAllNestedSchema: ({ schema, activeOneOf, skipReadOnly, skipWriteOnly, }: {
+    schema?: SchemaModel | undefined;
+    activeOneOf: OperationStore['activeOneOf'];
+    skipReadOnly?: boolean | undefined;
+    skipWriteOnly?: boolean | undefined;
+}) => any;

package/lib-esm/components/ExpandAllButton/getAllNestedSchema.js

@@ -0,0 +1,2 @@
+import{generateDeepLink}from"../common/LinkToField";export const getAllNestedSchema=({schema:e,activeOneOf:i,skipReadOnly:n=!1,skipWriteOnly:s=!1})=>{var t;if(!e||e.isCircular)return{};if(e.oneOf&&e.oneOf.length){const n=e.oneOf[i[e.pointer]||0];return(null==n?void 0:n.isCircular)?{}:getAllNestedSchema({schema:n,activeOneOf:i})}return(e.fields||(null===(t=e.items)||void 0===t?void 0:t.fields)||[]).reduce(((e,t)=>t.schema.isCircular||t.schema.isPrimitive||n&&t.schema.readOnly||s&&t.schema.writeOnly?e:Object.assign(Object.assign(Object.assign({},e),{[generateDeepLink(t)]:!1}),getAllNestedSchema({schema:t.schema,activeOneOf:i,skipReadOnly:n,skipWriteOnly:s}))),{})};
+//# sourceMappingURL=getAllNestedSchema.js.map

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

@@ -0,0 +1,2 @@
+export { ExpandAllButton } from './ExpandAllButton';
+export { useUpdateExpandedFields } from './useUpdateExpandedFields';

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

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

package/lib-esm/components/ExpandAllButton/useUpdateExpandedFields.d.ts

@@ -0,0 +1,2 @@
+import type { FieldModel, MediaContentModel } from '../../models';
+export declare function useUpdateExpandedFields(type: 'response' | 'request', headers: FieldModel[], body?: MediaContentModel, pointer?: string): void;

package/lib-esm/components/ExpandAllButton/useUpdateExpandedFields.js

@@ -0,0 +1,2 @@
+import{useAtomValue,useAtom}from"jotai/index";import{useEffect}from"react";import{useMount,useUnmount}from"@redocly/theme";import{getActiveMediaType}from"../../models";import{operationStore}from"../../jotai/operation";import{getAllNestedSchema}from"./getAllNestedSchema";import{activeMimeNameAtom}from"../../jotai/app";export function useUpdateExpandedFields(e,t,s,i){var o;const a=useAtomValue(activeMimeNameAtom),n=s&&(null===(o=getActiveMediaType(s,a))||void 0===o?void 0:o.schema),[{activeOneOf:m},c]=useAtom(operationStore(i)),r=(i=!1)=>{((null==t?void 0:t.length)||s)&&c((s=>{const o=getAllNestedSchema({schema:n,activeOneOf:s.activeOneOf,skipReadOnly:"request"===e,skipWriteOnly:"response"===e})||{},a=getAllNestedSchema({schema:{type:"object",fields:t},activeOneOf:s.activeOneOf,skipReadOnly:"request"===e,skipWriteOnly:"response"===e});return Object.assign(Object.assign({},s),{[e]:{expandedFields:Object.assign(Object.assign(Object.assign({},o),a),i?s[e].expandedFields:{})}})}))};useMount((()=>{r(!0)})),useUnmount((()=>{((null==t?void 0:t.length)||s)&&c((t=>Object.assign(Object.assign({},t),{[e]:{expandedFields:{}}})))})),useEffect((()=>{Object.keys(m).length>1&&r(!0)}),[m])}
+//# sourceMappingURL=useUpdateExpandedFields.js.map

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

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import type { OpenAPIExternalDocumentation } from '../../types';
 interface ExternalDocumentationProps {
     externalDocs: OpenAPIExternalDocumentation;
     compact?: boolean;
 }
-export declare const ExternalDocumentation: React.NamedExoticComponent<ExternalDocumentationProps>;
+export declare const ExternalDocumentation: import("react").NamedExoticComponent<ExternalDocumentationProps>;
 export {};

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

@@ -1,5 +1,5 @@
-import React,{memo}from"react";import styled from"styled-components";import{linksCss}from"@redocly/theme";import{normalizeText}from"../../utils";const LinkWrap=styled.div`
-  ${linksCss};
-  ${({compact:e})=>e?"":"margin: 1em 0"}
-`;function ExternalDocumentationComponent({externalDocs:e,compact:t}){if(!e||!e.url)return null;const r=normalizeText(e.description);return React.createElement(LinkWrap,{compact:t},React.createElement("a",{href:e.url,target:"_blank",rel:"noreferrer"},r||e.url))}export const ExternalDocumentation=memo(ExternalDocumentationComponent);
+import{jsx as _jsx}from"react/jsx-runtime";import{memo}from"react";import styled from"styled-components";import{markdownLinksCss}from"@redocly/theme";import{normalizeText}from"../../utils";const LinkWrap=styled.div`
+  ${markdownLinksCss};
+  ${({compact:r})=>r?"":"margin: var(--spacing-sm) 0 0"}
+`;function ExternalDocumentationComponent({externalDocs:r,compact:t}){if(!r||!r.url)return null;const n=normalizeText(r.description);return _jsx(LinkWrap,{compact:t,children:_jsx("a",{href:r.url,target:"_blank",rel:"noreferrer","aria-label":n||r.url,children:n||r.url})})}export const ExternalDocumentation=memo(ExternalDocumentationComponent);
 //# sourceMappingURL=ExternalDocumentation.js.map

package/lib-esm/components/Language/LanguageDropdown.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement } from 'react';
+import type { TabType } from '../../models/tab';
+export interface LanguageDropdownProps {
+    samples: TabType<{
+        lang: string;
+    }>[];
+    activeTab?: string;
+    onChange: (key: string) => void;
+    trigger?: ReactElement;
+    withArrow?: boolean;
+    withCheckmark?: boolean;
+    withIcon?: boolean;
+    width?: number;
+}
+export declare const LanguageDropdown: ({ samples, activeTab, onChange, trigger, width, withArrow, withCheckmark, withIcon, }: LanguageDropdownProps) => ReactElement;

package/lib-esm/components/Language/LanguageDropdown.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useCallback,useMemo}from"react";import{Dropdown,DropdownMenu}from"@redocly/theme";import{LanguageItem}from"./LanguageItem";import{DropdownTriggerButton,StyledDropdownMenuItem}from"./styled";export const LanguageDropdown=({samples:e,activeTab:o,onChange:t,trigger:r,width:n,withArrow:i=!0,withCheckmark:a=!0,withIcon:m=!0})=>{const d=useCallback((o=>()=>{const r=e.find((({key:e})=>e===o.key));r&&t(r.key)}),[t,e]),g=useMemo((()=>e.map((e=>_jsx(StyledDropdownMenuItem,{$width:n,onAction:d(e),children:_jsx(LanguageItem,{item:e,active:o===e.key,withCheckmark:a,withIcon:m})},e.key)))),[o,d,e,n,a,m]),s=e.find((({key:e})=>e===o)),c=r||_jsx(DropdownTriggerButton,{variant:"ghost",children:null==s?void 0:s.title});return g.length>1?_jsx(Dropdown,{trigger:c,withArrow:i,alignment:"end",children:_jsx(DropdownMenu,{children:g})}):c};
+//# sourceMappingURL=LanguageDropdown.js.map

package/lib-esm/components/Language/LanguageItem.d.ts

@@ -0,0 +1,11 @@
+import type { TabType } from '../../models/tab';
+interface LanguageItemProps {
+    item: TabType & {
+        lang: string;
+    };
+    active?: boolean;
+    withCheckmark?: boolean;
+    withIcon?: boolean;
+}
+export declare const LanguageItem: ({ item, active, withCheckmark, withIcon }: LanguageItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib-esm/components/Language/LanguageItem.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{CheckmarkIcon}from"@redocly/theme";import{CurlIcon}from"../../icons/CurlIcon";import{CSharpIcon}from"../../icons/CSharpIcon";import{NodeJSIcon}from"../../icons/NodeJSIcon";import{JavaScriptIcon}from"../../icons/JavaScriptIcon";import{PythonIcon}from"../../icons/PythonIcon";import{RIcon}from"../../icons/RIcon";import{RubyIcon}from"../../icons/RubyIcon";import{PHPIcon}from"../../icons/PHPIcon";import{GOIcon}from"../../icons/GOIcon";import{JavaIcon}from"../../icons/JavaIcon";import{PayloadIcon}from"../../icons/PayloadIcon";import{LanguageIcon,LanguageTitle,LanguageTitleContainer}from"./styled";const iconMap={Payload:_jsx(PayloadIcon,{}),curl:_jsx(CurlIcon,{}),"C#":_jsx(CSharpIcon,{}),"C#+Newtonsoft":_jsx(CSharpIcon,{}),"Node.js":_jsx(NodeJSIcon,{}),JavaScript:_jsx(JavaScriptIcon,{}),Python:_jsx(PythonIcon,{}),R:_jsx(RIcon,{}),Ruby:_jsx(RubyIcon,{}),PHP:_jsx(PHPIcon,{}),Go:_jsx(GOIcon,{}),Java:_jsx(JavaIcon,{}),"Java8+Apache":_jsx(JavaIcon,{})};export const LanguageItem=({item:o,active:n,withCheckmark:c,withIcon:a})=>_jsxs(_Fragment,{children:[_jsxs(LanguageTitleContainer,{children:[a&&_jsx(LanguageIcon,{children:iconMap[o.lang]}),_jsx(LanguageTitle,{active:n,children:o.title})]}),c&&n&&_jsx(CheckmarkIcon,{})]});
+//# sourceMappingURL=LanguageItem.js.map

package/lib-esm/components/Language/LanguageList.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { TabType } from '../../models/tab';
+type LangTypeType = TabType<{
+    lang: string;
+}>;
+interface LanguageListProps {
+    languages: LangTypeType[];
+    activeLanguage: string;
+}
+export declare const LanguageList: import("react").NamedExoticComponent<LanguageListProps>;
+export {};

package/lib-esm/components/Language/LanguageList.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useLayoutEffect,useRef,useState,useCallback,memo}from"react";import{useAtomValue,useSetAtom}from"jotai";import{Button,OverflowMenuVerticalIcon}from"@redocly/theme";import{LanguageDropdown}from"./LanguageDropdown";import{languageAtom,layoutAtom}from"../../jotai/app";import{LanguageListContainer,LanguageListItem,Container}from"./styled";import{LanguageItem}from"./LanguageItem";import{ITEM_WIDTH}from"./constants";import{LanguageListSkeleton}from"../common/Skeleton/LanguageListSkeleton";function LanguageListComponent({languages:e,activeLanguage:t}){const[n,o]=useState([]),[a,s]=useState([]),i=useRef(null),r=useAtomValue(layoutAtom),u=useSetAtom(languageAtom),m=useCallback((()=>{var n;const a=null===(n=null==i?void 0:i.current)||void 0===n?void 0:n.offsetWidth;if(!a)return;const{newVisibleItems:r,newHiddenItems:u}=calculateVisibleAndHiddenItems(a,[...e]),m=u.findIndex((e=>e.key===t));-1!==m&&swapItems(r,u,m),o(r),s(u)}),[t,e]);return useLayoutEffect((()=>(m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m)})),[r,t]),_jsxs(Container,{ref:i,children:[_jsxs(LanguageListContainer,{children:[!n.length&&_jsx(LanguageListSkeleton,{}),n.map((e=>_jsx(LanguageListItem,{onClick:()=>u(e.key),active:t===e.key,children:_jsx(LanguageItem,{item:e,withIcon:!0})},e.key)))]}),a.length?_jsx(LanguageDropdown,{activeTab:t,samples:a,onChange:e=>{const t=a.findIndex((t=>t.key===e));if(-1!==t){const i=[...a],r=[...n];swapItems(r,i,t),o(r),s(i),u(e)}},trigger:_jsx(Button,{icon:_jsx(OverflowMenuVerticalIcon,{}),variant:"text",style:{height:"100%"}}),withArrow:!1,withCheckmark:!1,width:156}):null]})}export const LanguageList=memo(LanguageListComponent);function calculateVisibleAndHiddenItems(e,t){let n=0;const o=[],a=[];return t.forEach((t=>{e&&n+ITEM_WIDTH<=e?(o.push(t),n+=ITEM_WIDTH):a.push(t)})),{newVisibleItems:o,newHiddenItems:a}}function swapItems(e,t,n){const o=e[e.length-1];o&&(e[e.length-1]=t[n],t[n]=o)}
+//# sourceMappingURL=LanguageList.js.map

package/lib-esm/components/Language/_tests_/LanguageDropdown.test.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{render,fireEvent,screen}from"@testing-library/react";import{LanguageDropdown}from"../LanguageDropdown";const mockSamples=[{key:"js",title:"JS",lang:"js"},{key:"node.js",title:"Node.JS",lang:"nodejs"}],mockActiveTab=mockSamples[0].key,mockOnChange=jest.fn();describe("LanguageDropdown",(()=>{test("LanguageDropdown renders correctly",(()=>{const{getByText:e}=render(_jsx(LanguageDropdown,{samples:mockSamples,activeTab:mockActiveTab,onChange:mockOnChange}));expect(e(mockSamples[0].title)).toBeInTheDocument()})),test("LanguageDropdown handles onChange correctly",(()=>{const{getByText:e}=render(_jsx(LanguageDropdown,{samples:mockSamples,activeTab:mockActiveTab,onChange:mockOnChange}));fireEvent.click(screen.getByText(mockSamples[0].title));const n=mockSamples[1];fireEvent.click(e(n.title)),expect(mockOnChange).toHaveBeenCalledWith(n.key)}))}));
+//# sourceMappingURL=LanguageDropdown.test.js.map

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

@@ -0,0 +1 @@
+export declare const ITEM_WIDTH = 78;

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

@@ -0,0 +1,2 @@
+export const ITEM_WIDTH=78;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1,3 @@
+export { LanguageDropdown } from './LanguageDropdown';
+export { LanguageList } from './LanguageList';
+export { LanguageItem } from './LanguageItem';

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

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

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { DropdownMenuItem } from '@redocly/theme';
+export declare const Container: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const LanguageTitle: import("styled-components").StyledComponent<"span", any, {
+    active?: boolean | undefined;
+}, never>;
+export declare const LanguageTitleContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const LanguageIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const LanguageListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LanguageListItem: import("styled-components").StyledComponent<"button", any, {
+    active: boolean;
+}, never>;
+export declare const StyledDropdownMenuItem: import("styled-components").StyledComponent<typeof DropdownMenuItem, any, Partial<Pick<import("@redocly/theme").LinkProps, "target" | "to" | "external">> & {
+    prefix?: import("react").ReactNode;
+    suffix?: import("react").ReactNode;
+    content?: import("react").ReactNode;
+    separatorLine?: boolean | undefined;
+    dataAttributes?: Record<string, string> | undefined;
+    className?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    role?: string | undefined;
+    separator?: boolean | undefined;
+    disabled?: boolean | undefined;
+    dangerous?: boolean | undefined;
+    onAction?: (() => void) | undefined;
+    active?: boolean | undefined;
+} & {
+    $width?: number | undefined;
+}, never>;
+export declare const DropdownTriggerButton: import("styled-components").StyledComponent<import("react").FC<import("@redocly/theme").ButtonProps>, any, import("@redocly/theme").ButtonProps, never>;

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

@@ -0,0 +1,76 @@
+import styled,{css}from"styled-components";import{Button,DropdownMenuItem}from"@redocly/theme";import{ITEM_WIDTH}from"./constants";export const Container=styled.span`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;export const LanguageTitle=styled.span`
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  font-weight: ${({active:e})=>e?"var(--font-weight-medium)":"var(--font-weight-regular)"};
+`;export const LanguageTitleContainer=styled.span`
+  display: inherit;
+  gap: inherit;
+  flex-direction: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+`;export const LanguageIcon=styled.span`
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+`;export const LanguageListContainer=styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;export const LanguageListItem=styled.button`
+  background: none;
+  border: none;
+  width: ${ITEM_WIDTH}px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  flex-direction: column;
+  gap: calc(var(--spacing-unit) * 0.5);
+  padding: var(--spacing-xs) 0;
+  color: ${({active:e})=>e?"var(--text-color-primary)":"var(--text-color-description)"};
+  border-radius: var(--border-radius);
+  text-align: center;
+  position: relative;
+
+  :hover {
+    color: var(--text-color-primary);
+  }
+
+  ${({active:e})=>e&&css`
+      &::before {
+        position: absolute;
+        top: -21px;
+        border-top: 3px solid var(--text-color-primary);
+        width: 100%;
+        content: '';
+        border-bottom-left-radius: calc(var(--border-radius) / 2);
+        border-bottom-right-radius: calc(var(--border-radius) / 2);
+      }
+    `}
+`;export const StyledDropdownMenuItem=styled(DropdownMenuItem)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: calc(var(--spacing-unit) * 1.5) var(--spacing-xs) calc(var(--spacing-unit) * 1.5)
+    var(--spacing-sm);
+  width: ${({$width:e=204})=>e}px;
+  fill: var(--menu-content-color-active);
+`;export const DropdownTriggerButton=styled(Button)`
+  display: inline-flex;
+
+  line-height: var(--line-height-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+`;
+//# sourceMappingURL=styled.js.map

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import type { ReactElement } from 'react';
 import type { MarkdownProps } from './types';
-export declare const Markdown: ({ source, ast, htmlWrap, ...props }: MarkdownProps) => JSX.Element | null;
+export declare const Markdown: ({ source, ast, htmlWrap, ...props }: MarkdownProps) => ReactElement | null;

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

@@ -1,2 +1,2 @@
-var __rest=this&&this.__rest||function(o,e){var r={};for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&e.indexOf(t)<0&&(r[t]=o[t]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(o);n<t.length;n++)e.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(o,t[n])&&(r[t[n]]=o[t[n]])}return r};import React,{Fragment}from"react";import{parse,transform,renderers,Ast}from"@markdoc/markdoc";import{useRecoilValue}from"@redocly/recoil";import DOMPurify from"dompurify";import{MarkdownWrapper}from"@redocly/theme";import{globalOptionsSelector}from"../../recoil/store";import{isString}from"../../utils";export const Markdown=o=>{var e,r,t,n,l,i,a,s,d,{source:c,ast:m,htmlWrap:u}=o,p=__rest(o,["source","ast","htmlWrap"]);const v=useRecoilValue(globalOptionsSelector);if(!c&&!m)return null;const f=(null==v?void 0:v.allowedMdComponents)&&{tags:null===(e=v.allowedMdComponents)||void 0===e?void 0:e.tags,nodes:null===(r=v.allowedMdComponents)||void 0===r?void 0:r.nodes,partials:null===(t=v.allowedMdComponents)||void 0===t?void 0:t.partials,variables:null===(n=v.allowedMdComponents)||void 0===n?void 0:n.variables,functions:null===(l=v.allowedMdComponents)||void 0===l?void 0:l.functions},y=(null==v?void 0:v.allowedMdComponents)&&{components:null===(i=v.allowedMdComponents)||void 0===i?void 0:i.components};let O;if(c)if(isString(c)){const o=(null===(a=null==v?void 0:v.hooks)||void 0===a?void 0:a.sanitize)?null===(d=null===(s=v.hooks)||void 0===s?void 0:s.sanitize)||void 0===d?void 0:d.call(s,c):(null==v?void 0:v.untrustedDefinition)?DOMPurify.sanitize(c):c,e=parse(o);O=transform(e,f)}else{const o=Ast.fromJSON(c.result);O=(Array.isArray(o),transform(o,f))}else m&&(O=transform(m,f));const b=o=>{const e=renderers.react(o,React,y);return React.createElement(MarkdownWrapper,Object.assign({},p,{children:e,as:"div"}))};if(!u)return b(O);return O=Array.isArray(O)?O:O.children,React.createElement(React.Fragment,null," ",O.map(((o,e)=>{var r,t,n,l;return React.createElement(Fragment,{key:(null===(r=null==o?void 0:o.attributes)||void 0===r?void 0:r.id)||e},(l=null==o?void 0:o.attributes,t=!1!==(null==l?void 0:l.htmlWrap),n=o,t?u(b(n)):b(n)))})))};
+var __rest=this&&this.__rest||function(r,o){var t={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&o.indexOf(n)<0&&(t[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(n=Object.getOwnPropertySymbols(r);e<n.length;e++)o.indexOf(n[e])<0&&Object.prototype.propertyIsEnumerable.call(r,n[e])&&(t[n[e]]=r[n[e]])}return t};import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import React,{Fragment}from"react";import{parse,transform,renderers,Ast}from"@markdoc/markdoc";import{useAtomValue}from"jotai";import DOMPurify from"dompurify";import{Markdown as MarkdownWrapper,isString}from"@redocly/theme";import{globalOptionsAtom}from"../../jotai/store";const TAGS_NOT_TO_WRAP=["OpenApiResponse","OpenApiRequestBody"];export const Markdown=r=>{var o,t,n,e,i,s,a,l,d,{source:m,ast:u,htmlWrap:p}=r,c=__rest(r,["source","ast","htmlWrap"]);const v=useAtomValue(globalOptionsAtom);if(!m&&!u)return null;const f=(null==v?void 0:v.markdocOptions)&&{tags:null===(o=v.markdocOptions)||void 0===o?void 0:o.tags,nodes:null===(t=v.markdocOptions)||void 0===t?void 0:t.nodes,partials:null===(n=v.markdocOptions)||void 0===n?void 0:n.partials,variables:null===(e=v.markdocOptions)||void 0===e?void 0:e.variables,functions:null===(i=v.markdocOptions)||void 0===i?void 0:i.functions},O=(null==v?void 0:v.markdocOptions)&&{components:null===(s=v.markdocOptions)||void 0===s?void 0:s.components};let y;if(m)if(isString(m)){const r=(null===(a=null==v?void 0:v.unstable_hooks)||void 0===a?void 0:a.sanitize)?null===(d=null===(l=v.unstable_hooks)||void 0===l?void 0:l.sanitize)||void 0===d?void 0:d.call(l,m):(null==v?void 0:v.sanitize)?DOMPurify.sanitize(m):m,o=parse(r);y=transform(o,f)}else{const r=Ast.fromJSON("object"==typeof m.result?JSON.stringify(m.result):m.result);y=(Array.isArray(r),transform(r,f))}else u&&(y=transform(u,f));const _=r=>{const o=renderers.react(r,React,O);return _jsx(MarkdownWrapper,Object.assign({},c,{children:o,as:"div"}))};if(!p)return _(y);const b=r=>{var o;return!1!==(null===(o=r.attributes)||void 0===o?void 0:o.htmlWrap)&&!TAGS_NOT_TO_WRAP.includes(null==r?void 0:r.name)};return y=Array.isArray(y)?y:y.children,_jsx(_Fragment,{children:y.map(((r,o)=>{var t,n,e;return _jsx(Fragment,{children:(n=b(r),e=r,n?p(_(e)):_(e))},(null===(t=null==r?void 0:r.attributes)||void 0===t?void 0:t.id)||o)}))})};
 //# sourceMappingURL=Markdown.js.map

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

@@ -1,3 +1,2 @@
 export { Markdown } from './Markdown';
-export * from './styled';
 export * from './types';

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

@@ -1,2 +1,2 @@
-export{Markdown}from"./Markdown";export*from"./styled";export*from"./types";
+export{Markdown}from"./Markdown";export*from"./types";
 //# sourceMappingURL=index.js.map

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

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import type { ReactElement } from 'react';
 import type { Node } from '@markdoc/markdoc';
 export type MarkdownProps = {
     sanitize?: boolean;
+    base?: boolean;
     source?: string | GenericObject;
     ast?: Node[];
     className?: string;
-    htmlWrap?: (part: JSX.Element) => JSX.Element;
+    htmlWrap?: (part: ReactElement) => ReactElement;
 };

package/lib-esm/components/MediaTypeSwitch/MediaTypesSwitch.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import type { DropdownProps } from '../common';
+import type { ReactElement } from 'react';
+import type { SelectProps } from '../common';
 import type { MediaContentModel, MediaTypeModel } from '../../models';
 interface MediaTypesSwitchProps {
     content?: MediaContentModel;
     withLabel?: boolean;
-    renderDropdown: (props: DropdownProps) => JSX.Element | null;
-    children: (activeMime: MediaTypeModel) => JSX.Element;
+    renderSelect: (props: SelectProps) => ReactElement | null;
+    children: (activeMime: MediaTypeModel) => ReactElement;
 }
-export declare const MediaTypesSwitch: React.NamedExoticComponent<MediaTypesSwitchProps>;
+export declare const MediaTypesSwitch: import("react").NamedExoticComponent<MediaTypesSwitchProps>;
 export {};

package/lib-esm/components/MediaTypeSwitch/MediaTypesSwitch.js

@@ -1,2 +1,2 @@
-import React,{memo,useCallback,useRef}from"react";import{useRecoilState}from"@redocly/recoil";import{DropdownLabel,DropdownWrapper}from"../PayloadSamples";import{FormControl}from"../common";import{activeMimeNameSelector}from"../../recoil/app";import{getActiveMediaType}from"../../models";function Wrapper({children:e,withLabel:t,innerRef:r}){return t?React.createElement(DropdownWrapper,{ref:r},React.createElement(DropdownLabel,null,"Content type"),e):React.createElement(FormControl,{ref:r},e)}function MediaTypesSwitchComponent({content:e,withLabel:t,renderDropdown:r,children:n}){const[o,a]=useRecoilState(activeMimeNameSelector),i=useCallback((({value:t})=>{if(!e||!l.current)return null;const r=l.current.getBoundingClientRect().y;a(t),requestAnimationFrame((()=>{if(!l.current||null==r)return;const e=l.current.getBoundingClientRect().y;window.scrollBy(0,e-r)}))}),[e,a]),l=useRef(null);if(!e||!e.mediaTypes||!e.mediaTypes.length)return null;const c=e.mediaTypes.map(((e,t)=>({value:e.name,idx:t}))),m=getActiveMediaType(e,o);return React.createElement(React.Fragment,null,React.createElement(Wrapper,{innerRef:l,withLabel:t},r({value:m.name,options:c,onChange:i,ariaLabel:"Content type"})),n(m))}export const MediaTypesSwitch=memo(MediaTypesSwitchComponent);
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{memo,useCallback,useRef}from"react";import{useAtom}from"jotai";import{SelectLabel,SelectWrapper}from"../PayloadSamples";import{Container}from"../common";import{activeMimeNameAtom}from"../../jotai/app";import{getActiveMediaType}from"../../models";function Wrapper({children:e,withLabel:t,innerRef:n}){return e?t?_jsxs(SelectWrapper,{ref:n,children:[_jsx(SelectLabel,{children:"Content type"}),e]}):_jsx(Container,{ref:n,children:e}):null}function MediaTypesSwitchComponent({content:e,withLabel:t,renderSelect:n,children:r}){const[i,a]=useAtom(activeMimeNameAtom),o=useCallback((({value:t})=>{if(!e||!m.current)return null;const n=m.current.getBoundingClientRect().y;a(t),requestAnimationFrame((()=>{if(!m.current||null==n)return;const e=m.current.getBoundingClientRect().y;window.scrollBy(0,e-n)}))}),[e,a]),m=useRef(null);if(!e||!e.mediaTypes||!e.mediaTypes.length)return null;const l=e.mediaTypes.map(((e,t)=>({value:e.name,idx:t}))),c=getActiveMediaType(e,i);return _jsxs(_Fragment,{children:[_jsx(Wrapper,{innerRef:m,withLabel:t,children:n({value:c.name,options:l,onChange:o,ariaLabel:"Content type"})}),r(c)]})}export const MediaTypesSwitch=memo(MediaTypesSwitchComponent);
 //# sourceMappingURL=MediaTypesSwitch.js.map

package/lib-esm/components/OperationItem/Description.d.ts

@@ -0,0 +1,10 @@
+import type { OpenAPIExternalDocumentation } from '../../types';
+interface DescriptionProps {
+    description?: string | GenericObject;
+    externalDocs?: OpenAPIExternalDocumentation;
+    extensions: {
+        [p: string]: string | Record<string, unknown>;
+    };
+}
+export declare function Description({ description, externalDocs, extensions }: DescriptionProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib-esm/components/OperationItem/Description.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{Markdown}from"../Markdown";import{ExternalDocumentation}from"../ExternalDocumentation";import{Extensions}from"../common/Extensions";export function Description({description:n,externalDocs:t,extensions:e}){return n?_jsxs(_Fragment,{children:[_jsx(Markdown,{source:n}),t&&_jsx(ExternalDocumentation,{externalDocs:t}),Object.keys(e||{}).length?_jsx(Extensions,{extensions:e}):null]}):null}
+//# sourceMappingURL=Description.js.map

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

@@ -1,3 +1,3 @@
-import React from 'react';
+/// <reference types="react" />
 import type { OperationItemProps } from './types';
-export declare const OperationItem: React.NamedExoticComponent<OperationItemProps>;
+export declare const OperationItem: import("react").NamedExoticComponent<OperationItemProps>;

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

@@ -1,15 +1,25 @@
-import React,{memo,useCallback}from"react";import styled from"styled-components";import{useRecoilValue,useSetRecoilState}from"@redocly/recoil";import{H2,useMount,Feedback,LayoutVariant,BeforeOpenApiOperation,BeforeOpenApiOperationSummary,AfterOpenApiOperationSummary,AfterOpenApiOperation}from"@redocly/theme";import{Endpoint}from"../Endpoint";import{Row}from"../common/panels";import{Badge,SamplesMiddlePanel,SamplesPanel,ShareLink}from"../common";import{CallbacksList}from"../Callbacks";import{CallbackSamples}from"../CallbackSamples";import{ExternalDocumentation}from"../ExternalDocumentation";import{Extensions}from"../Fields";import{Markdown}from"../Markdown";import{Parameters}from"../Parameters";import{RequestSamples}from"../RequestSamples";import{OperationResponseList}from"../Responses";import{ResponseSamples}from"../ResponseSamples";import{SecurityRequirements}from"../SecurityRequirement";import{ContentPanel}from"../Panel";import{l}from"../../services";import{createPanelToggleEvent}from"../../events";import{showRightPanelToggleSelector,layoutSelector}from"../../recoil/app";import{globalStoreSelector}from"../../recoil/store";import{getOperation}from"../../models/operation";import{operationStore}from"../../recoil/operation";import{RenderHook}from"../RenderHook";const OperationRow=styled(Row)`
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{memo,useState,useCallback,useMemo}from"react";import styled from"styled-components";import{useAtomValue}from"jotai";import{Feedback,LayoutVariant,BeforeOpenApiOperation,AfterOpenApiOperation,Badge}from"@redocly/theme";import{SamplesMiddlePanel,SamplesPanel,ShareLink,Row}from"../common";import{CallbacksList}from"../Callbacks";import{CallbackSamples}from"../CallbackSamples";import{RequestSamples}from"../RequestSamples";import{OperationResponseList}from"../Responses";import{ResponseSamples}from"../ResponseSamples";import{makeDeepLink}from"../../services";import{layoutAtom}from"../../jotai/app";import{globalStoreAtom}from"../../jotai/store";import{getOperation}from"../../models/operation";import{RenderHook}from"../RenderHook";import{Heading,Title}from"../common/OperationItemTitle";import{LinkToField}from"../common/LinkToField";import{RequestDetails}from"../Request/RequestDetails";const OperationSamplesPanel=styled(SamplesPanel)`
+  margin-left: auto;
+  --code-block-padding: var(--spacing-xs) 0 var(--spacing-xs) 20px;
+`;function OperationItemComponent({item:{operationDefinition:e,parent:a,href:o}}){var t,s;const{parser:l,options:i}=useAtomValue(globalStoreAtom),n=useAtomValue(layoutAtom),[r,p]=useState(),{unstable_hooks:d,feedback:m}=i,c=useMemo((()=>getOperation(l,e,a,i,o)),[o,e,i,a,l]),{name:u,deprecated:k,isWebhook:x,badges:S}=c,b=n===LayoutVariant.STACKED,f=(null==m?void 0:m.type)||"sentiment",j=!0!==(null==m?void 0:m.hide),h=S.filter((({position:e})=>"before"===e)),_=S.filter((({position:e})=>"after"===e)),[g,O]=useState(null),R=useCallback((e=>{r!==e&&p(e)}),[r]);return _jsxs(OperationRow,{layout:n,children:[_jsx(OperationSubRowStyled,{layout:n,children:_jsxs(SamplesMiddlePanel,{isStacked:b,children:[_jsx(RenderHook,{Hook:BeforeOpenApiOperation||(null==d?void 0:d.BeforeOperation),props:{operation:c}}),_jsxs(Heading,{"data-testid":"operation-item-header",children:[_jsx(ShareLink,{to:o,"aria-label":`link to ${u}`}),h.map((({name:e,color:a})=>_jsx(OperationBadge,{color:a,children:e},e))),u,_.map((({name:e,color:a})=>_jsx(OperationBadge,{color:a,children:e},e))),k&&_jsx(OperationBadge,{deprecated:!0,children:"Deprecated"}),x&&_jsx(OperationBadge,{children:"Webhook"})]})]})}),_jsxs(OperationSubRowStyled,{layout:n,children:[_jsx(SamplesMiddlePanel,{isStacked:b,children:_jsx(RequestDetails,{operation:c})}),_jsx(OperationSamplesPanel,{isStacked:b,"data-testid":"samples-block",className:"panel-container-request-samples",children:_jsx(RequestSamples,{operation:c})})]}),_jsxs(OperationSubRowStyled,{layout:n,children:[_jsx(SamplesMiddlePanel,{isStacked:b,children:(null===(t=c.responses)||void 0===t?void 0:t.length)?_jsx(OperationResponseList,{responses:c.responses,operationId:c.id,operationPointer:c.pointer,callbackId:c.callbackId,activeResponseTab:r,onTabChange:R}):null}),_jsx(OperationSamplesPanel,{isStacked:b,"data-testid":"samples-block",className:"panel-container-response-samples",children:_jsx(ResponseSamples,{operation:c,activeResponseTab:r,onTabChange:R})})]}),_jsxs(OperationSubRowStyled,{layout:n,children:[_jsxs(SamplesMiddlePanel,{isStacked:b,children:[(null===(s=c.callbacks)||void 0===s?void 0:s.length)?_jsxs(_Fragment,{children:[_jsxs(Title,{children:[_jsx(LinkToField,{to:makeDeepLink(c.id,"callbacks")}),"Callbacks"]}),_jsx(CallbacksList,{callbacks:c.callbacks,onExpand:O,selectedCallback:g})]}):null,_jsx(RenderHook,{Hook:AfterOpenApiOperation||(null==d?void 0:d.AfterOperation),props:{operation:c}})]}),g?_jsx(OperationSamplesPanel,{isStacked:b,"data-testid":"samples-block",children:_jsx(CallbackSamples,{callback:g})}):null]}),_jsx(OperationSubRowStyled,{layout:n,children:_jsx(SamplesMiddlePanel,{isStacked:b,fullWidth:!0,children:j?_jsx(FeedbackWrapper,{children:_jsx(Feedback,{type:f,settings:m.settings,path:c.href})}):null})})]})}export const OperationItem=memo(OperationItemComponent);const FeedbackWrapper=styled.div`
+  & > div {
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: center;
+  }
+
+  & > div > div {
+    width: 100%;
+    max-width: var(--feedback-width);
+  }
+`,OperationRow=styled(Row)`
   flex-direction: column;
   align-items: flex-start;
-  ${H2} {
-    position: relative;
-  }
+  padding: var(--spacing-base) 0 calc(var(--spacing-xl) + var(--spacing-xs));
 `,OperationSubRowStyled=styled(Row)`
   margin: calc(var(--spacing-unit) * 2) 0;
-`,Description=styled.div`
-  margin-bottom: calc(var(--spacing-unit) * 4);
-`;function OperationItemComponent({item:{operationDefinition:e,parent:t,href:a}}){var o,n,r;const c=useRecoilValue(layoutSelector),i=useRecoilValue(showRightPanelToggleSelector),{parser:s,options:p}=useRecoilValue(globalStoreSelector),{hooks:m,events:d,feedback:u,showWebhookVerb:R,pathInMiddlePanel:S,expandDefaultRequest:E,expandDefaultResponse:f}=p,k=getOperation(s,e,t,p,a),{name:y,description:b,deprecated:g,externalDocs:O,isWebhook:v,httpVerb:h}=k,P=useSetRecoilState(operationStore(k.pointer)),x=c===LayoutVariant.STACKED||!i,w=!0!==(null==u?void 0:u.hide)&&void 0!==(null==u?void 0:u.type);useMount((()=>{P((e=>Object.assign(Object.assign({},e),{activeExampleName:k.activeExampleName,activeServer:k.activeServer})))}));const C=!(!b&&!O),A=useCallback((e=>t=>{var a;const o=createPanelToggleEvent({operation:k,isExpanded:t,panelType:e});null===(a=null==d?void 0:d.panelToggle)||void 0===a||a.call(d,o)}),[d,k]);return React.createElement(OperationRow,{layout:c},React.createElement(OperationSubRowStyled,{layout:c},React.createElement(SamplesMiddlePanel,{isStacked:x},React.createElement(RenderHook,{Hook:BeforeOpenApiOperation||(null==m?void 0:m.BeforeOperation),props:{operation:k}}),React.createElement(H2,null,React.createElement(ShareLink,{to:a}),React.createElement(RenderHook,{Hook:BeforeOpenApiOperationSummary||(null==m?void 0:m.BeforeOperationSummary),props:{operation:k}}),y,React.createElement(RenderHook,{Hook:AfterOpenApiOperationSummary||(null==m?void 0:m.AfterOperationSummary),props:{operation:k}}),g&&React.createElement(Badge,{deprecated:!0},"Deprecated"),v&&React.createElement(React.Fragment,null,React.createElement(Badge,null,"Webhook"),R&&h&&React.createElement(Badge,null,h.toUpperCase()))),S&&!v&&React.createElement(Endpoint,{operation:k}))),React.createElement(OperationSubRowStyled,{layout:c},React.createElement(SamplesMiddlePanel,{isStacked:x},C&&React.createElement(Description,null,void 0!==b&&React.createElement(Markdown,{source:b}),O&&React.createElement(ExternalDocumentation,{externalDocs:O}),Object.keys(k.extensions||{}).length?React.createElement(Extensions,{extensions:k.extensions}):null),React.createElement(SecurityRequirements,{securities:k.security}),(null===(o=k.parameters)||void 0===o?void 0:o.length)||k.requestBody?React.createElement(ContentPanel,{header:l("request"),onToggle:A("request"),expanded:E,className:"panel-request-schemas"},React.createElement(Parameters,{parameters:k.parameters,body:k.requestBody})):null),i?React.createElement(SamplesPanel,{"data-cy":"samples-block"},!S&&!v&&React.createElement(Endpoint,{operation:k}),React.createElement(RequestSamples,{operation:k})):null),React.createElement(OperationSubRowStyled,{layout:c},React.createElement(SamplesMiddlePanel,{isStacked:x},(null===(n=k.responses)||void 0===n?void 0:n.length)?React.createElement(ContentPanel,{header:l("responses"),onToggle:A("responses"),expanded:f,className:"panel-response-schemas"},React.createElement(OperationResponseList,{responses:k.responses,operationPointer:k.pointer})):null),i?React.createElement(SamplesPanel,{"data-cy":"samples-block"},React.createElement(ResponseSamples,{operation:k})):null),React.createElement(OperationSubRowStyled,{layout:c},React.createElement(SamplesMiddlePanel,{isStacked:x},(null===(r=k.callbacks)||void 0===r?void 0:r.length)?React.createElement(ContentPanel,{className:"panel-callback-schemas",header:l("callbacks")},React.createElement(CallbacksList,{callbacks:k.callbacks})):null,React.createElement(RenderHook,{Hook:AfterOpenApiOperation||(null==m?void 0:m.AfterOperation),props:{operation:k}})),i?React.createElement(SamplesPanel,{"data-cy":"samples-block"},React.createElement(CallbackSamples,{callbacks:k.callbacks})):null),React.createElement(OperationSubRowStyled,{layout:c},React.createElement(SamplesMiddlePanel,{isStacked:x},w?React.createElement(FeedbackWrapper,null,React.createElement(Feedback,{type:u.type,settings:u.settings,path:k.href})):null)))}export const OperationItem=memo(OperationItemComponent);const FeedbackWrapper=styled.div`
-  display: flex;
-  justify-content: center;
+`,OperationBadge=styled(Badge)`
+  margin: 0;
+  background-color: ${({color:e})=>e};
 `;
 //# sourceMappingURL=OperationItem.js.map

package/lib-esm/components/OperationItem/_tests_/OperationItem.test.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{render}from"@testing-library/react";import{BrowserRouter}from"react-router-dom";import{OperationItem}from"../OperationItem";import{normalizeOptions}from"../../../services";import spec from"./fixtures/petstore.json";import definition from"./fixtures/operationDefinition.json";import{environmentAtom}from"../../../jotai/app";import{globalStoreAtom}from"../../../jotai/store";jest.mock("jotai",(()=>Object.assign(Object.assign({},jest.requireActual("jotai")),{useAtomValue:jest.fn((e=>e===globalStoreAtom?{parser:{definition:spec},options:normalizeOptions({codeSamples:{languages:[{lang:"curl",label:"curl"}]}})}:e===environmentAtom?[{},""]:{})),useAtom:jest.fn((e=>e===environmentAtom?[[{server:{}}],jest.fn()]:[{activeOneOf:{"/paths/~1pet/post":0},requestValues:{},request:{expandedFields:{}},response:{expandedFields:{}},activeLanguage:"curl"},jest.fn()]))}))),describe("OperationItem",(()=>{it("should render badges with correct position",(()=>{const{getByTestId:e}=render(_jsx(OperationItem,{item:{operationDefinition:definition,parent:void 0,href:"test"}}),{wrapper:BrowserRouter}),t=e("operation-item-header").childNodes;expect(t[1].textContent).toBe("Alpha"),expect(t[3].textContent).toBe("Beta"),expect(t[4].textContent).toBe("Gamma")}))}));
+//# sourceMappingURL=OperationItem.test.js.map

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import type { ReactElement } from 'react';
 import type { LicenseInfo } from '../services/check';
 export interface LicenseCheckProps {
     licenseInfo: LicenseInfo;
 }
-export declare const Overlay: ({ licenseInfo }: LicenseCheckProps) => JSX.Element | null;
+export declare const Overlay: ({ licenseInfo }: LicenseCheckProps) => ReactElement | null;

package/lib-esm/components/Overlay.js

@@ -1,4 +1,4 @@
-import React,{useState,useEffect}from"react";import styled from"styled-components";const INVALID_KEY="Invalid license key",INVALID_KEY_MISSING=INVALID_KEY+": missing key",EXPIRED="Invalid license key: expired",TRIAL_EXPIRED=EXPIRED,INVALID_HOST="Invalid license key: host not allowed";export const Overlay=({licenseInfo:e})=>{const[t,l]=useState(null),[a,i]=useState(-1),[n,r]=useState(!1);return useEffect((()=>{var t;e.local?r(!0):(e.valid?e.allowed?e.expired&&l(e.t?EXPIRED:TRIAL_EXPIRED):l(INVALID_HOST):l(!1===e.valid?INVALID_KEY+(e.cryptoMissing?": works only with https":""):INVALID_KEY_MISSING),e.t&&i(Math.ceil(((null!==(t=null==e?void 0:e.e)&&void 0!==t?t:0)-Date.now()/1e3)/60/60/24)))}),[e]),n?React.createElement(TrialWrap,null,React.createElement("a",{href:"https://redoc.ly"},"Redocly API reference docs")," preview"):!t&&a>-1?React.createElement(TrialWrap,null," Trial version: ",a," days remaining "):t?React.createElement(Flash,null,React.createElement("span",null,t," ",React.createElement("br",null),React.createElement("small",null,"Please contact ",React.createElement("a",{href:"mailto:team@redoc.ly"},"team@redoc.ly")," to remedy the problem."," "))):null};const TrialWrap=styled.div`
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import styled from"styled-components";const INVALID_KEY="Invalid license key",INVALID_KEY_MISSING=INVALID_KEY+": missing key",EXPIRED="Invalid license key: expired",TRIAL_EXPIRED=EXPIRED,INVALID_HOST="Invalid license key: host not allowed";export const Overlay=({licenseInfo:e})=>{const[i,s]=useState(null),[t,r]=useState(-1),[l,n]=useState(!1);return useEffect((()=>{var i;e.local?n(!0):(e.valid?e.allowed?e.expired&&s(e.t?EXPIRED:TRIAL_EXPIRED):s(INVALID_HOST):s(!1===e.valid?INVALID_KEY+(e.cryptoMissing?": works only with https":""):INVALID_KEY_MISSING),e.t&&r(Math.ceil(((null!==(i=null==e?void 0:e.e)&&void 0!==i?i:0)-Date.now()/1e3)/60/60/24)))}),[e]),l?_jsxs(TrialWrap,{children:[_jsx("a",{href:"https://redoc.ly",children:"Redocly API reference docs"})," preview"]}):!i&&t>-1?_jsxs(TrialWrap,{children:[" Trial version: ",t," days remaining "]}):i?_jsx(Flash,{children:_jsxs("span",{children:[i," ",_jsx("br",{}),_jsxs("small",{children:["Please contact ",_jsx("a",{href:"mailto:team@redoc.ly",children:"team@redoc.ly"})," to remedy the problem."," "]})]})}):null};const TrialWrap=styled.div`
   padding: 10px 40px;
   position: fixed;
   text-align: right;

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

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+export declare function Overview({ info }: {
+    info: any;
+}): ReactElement;

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

@@ -0,0 +1,2 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{CopyButton,NewTabButton,EmailButton}from"@redocly/theme";import{PanelItem,PanelItemDescription,PanelItemsList}from"../PanelItem";export function Overview({info:e}){const t=e.contact&&e.contact.url&&_jsx(PanelItem,{header:_jsx(PanelItemDescription,{children:"URL"}),title:_jsx("a",{href:e.contact.url,target:"_blank",rel:"noreferrer",children:e.contact.url}),actions:[_jsx(NewTabButton,{data:e.contact.url},"NewTabButton")]})||null,n=e.contact&&e.contact.email&&_jsx(PanelItem,{header:_jsx(PanelItemDescription,{children:e.contact.name||"E-mail"}),title:_jsx("a",{href:"mailto:"+e.contact.email,children:e.contact.email}),actions:[_jsx(CopyButton,{data:e.contact.email},"CopyButton"),_jsx(EmailButton,{data:e.contact.email},"EmailButton")]})||null,a=e.license&&_jsx(PanelItem,{header:_jsx(PanelItemDescription,{children:"License"}),title:e.license.identifier?e.license.identifier:_jsx("a",{href:e.license.url,target:"_blank",rel:"noreferrer",children:e.license.name}),actions:[_jsx(NewTabButton,{data:e.license.url},"NewTabButton")]})||null,r=e.termsOfService&&_jsx(PanelItem,{title:_jsx("a",{href:e.termsOfService,target:"_blank",rel:"noreferrer",children:"Terms of Service"}),actions:[_jsx(NewTabButton,{data:e.termsOfService},e.termsOfService)]})||null;return _jsx(_Fragment,{children:_jsxs(PanelItemsList,{children:[t,n,a,r]})})}
+//# sourceMappingURL=Overview.js.map