@redocly/openapi-docs 3.12.0-rc.7 → 3.12.1

package/lib/components/ContentItems/useScrollOnRender.js

@@ -1 +1,26 @@
-import{useEffect as l,useRef as i}from"react";import{useLocation as s}from"react-router-dom";import{removeLeadingSlash as n}from"@redocly/theme/core/openapi";import{getElementById as a}from"../Content/useAutoScroll.js";function m(r,c){const e=i(null),o=s(),f=n(o.pathname.replace(c,""));return l(()=>{if(e.current&&r.href&&n(r.href)===f&&(typeof e?.current?.scrollIntoView=="function"&&e.current.scrollIntoView(),o.hash)){const t=a(o.hash.replace("#","").toLowerCase());t&&t.scrollIntoView()}},[]),e}var w=m;export{w as default};
+import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { removeLeadingSlash } from '@redocly/theme/core/openapi';
+import { getElementById } from '../Content/useAutoScroll.js';
+function useScrollOnRender(item, routingBasePath) {
+    const ref = useRef(null);
+    const location = useLocation();
+    const pathname = removeLeadingSlash(location.pathname.replace(routingBasePath, ''));
+    useEffect(() => {
+        if (ref.current && item.href && removeLeadingSlash(item.href) === pathname) {
+            if (typeof ref?.current?.scrollIntoView === 'function') {
+                ref.current.scrollIntoView();
+            }
+            if (location.hash) {
+                const element = getElementById(location.hash.replace('#', '').toLowerCase());
+                if (element) {
+                    element.scrollIntoView();
+                }
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return ref;
+}
+export default useScrollOnRender;
+//# sourceMappingURL=useScrollOnRender.js.map

package/lib/components/Discriminator/Discriminator.js

@@ -1,5 +1,30 @@
-import{jsx as r,jsxs as l}from"react/jsx-runtime";import{memo as p,useMemo as c}from"react";import{strikethroughText as d}from"../../utils/index.js";import{SchemaSelection as a}from"../common/SchemaSelection/SchemaSelection.js";import{SelectionTitle as f}from"../common/index.js";import{styled as u}from"../../styled-components.js";function x({activeOneOfIdx:t,parent:e,onChange:n,translate:o}){const m=c(()=>(e.oneOf||[]).map((i,s)=>({label:i.schema.deprecated?`${d(i.title)} (${o("openapi.badges.deprecated","deprecated").toLowerCase()}`:i.title,value:s})),[e.oneOf,o]);return e.oneOf===void 0?null:l(h,{children:[r(f,{children:o("openapi.discriminator","Discriminator")}),r(a,{options:m,pointer:e.operationPointer,onChange:n,schema:e,defaultOneOfIdx:t})]})}const y=p(x),h=u.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { strikethroughText } from '../../utils/index.js';
+import { SchemaSelection } from '../common/SchemaSelection/SchemaSelection.js';
+import { SelectionTitle } from '../common/index.js';
+import { styled } from '../../styled-components.js';
+function DiscriminatorDropdownComponent({ activeOneOfIdx, parent, onChange, translate, }) {
+    const options = useMemo(() => {
+        return (parent.oneOf || []).map((subSchema, idx) => {
+            const label = subSchema.schema.deprecated
+                ? `${strikethroughText(subSchema.title)} (${translate('openapi.badges.deprecated', 'deprecated').toLowerCase()}`
+                : subSchema.title;
+            return {
+                label,
+                value: idx,
+            };
+        });
+    }, [parent.oneOf, translate]);
+    if (parent.oneOf === undefined) {
+        return null;
+    }
+    return (_jsxs(Wrapper, { children: [_jsx(SelectionTitle, { children: translate('openapi.discriminator', 'Discriminator') }), _jsx(SchemaSelection, { options: options, pointer: parent.operationPointer, onChange: onChange, schema: parent, defaultOneOfIdx: activeOneOfIdx })] }));
+}
+export const Discriminator = memo(DiscriminatorDropdownComponent);
+const Wrapper = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`;export{y as Discriminator};
+`;
+//# sourceMappingURL=Discriminator.js.map

package/lib/components/Discriminator/index.js

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

package/lib/components/Download/DownloadSpecification.js

@@ -1,4 +1,43 @@
-import{jsx as o,Fragment as p,jsxs as s}from"react/jsx-runtime";import{memo as f,useCallback as w}from"react";import{useAtomValue as x}from"jotai";import{DownloadIcon as b}from"@redocly/theme/icons/DownloadIcon/DownloadIcon";import{getPathPrefix as u,combineUrls as g}from"@redocly/theme/core/openapi";import{Button as h}from"@redocly/theme/components/Button/Button";import{DocumentIcon as y}from"@redocly/theme/icons/DocumentIcon/DocumentIcon";import{JsonIcon as v}from"@redocly/theme/icons/JsonIcon/JsonIcon";import{FileIcon as j}from"@redocly/theme/icons/FileIcon/FileIcon";import{useDownloadInfo as k}from"./useDownloadInfo.js";import{globalStoreAtom as _}from"../../jotai/store.js";import{useTelemetry as I}from"../../hooks/index.js";import{styled as r}from"../../styled-components.js";function D(){const l=I(),{options:c}=x(_),t=u(),n=k({downloadUrls:c.downloadUrls}),d=w(e=>{switch(e){case"yaml":return o(y,{});case"json":return o(v,{});default:return o(j,{})}},[]);return n?o(U,{children:(n||[]).map(({title:e,url:a,iconType:m})=>{const i=t?g(t,a):a;return s(C,{onClick:()=>l.send({type:"openapi_docs.download_definition.clicked"}),children:[s(F,{children:[d(m),o("a",{href:i,target:"_blank",download:!0,rel:"noreferrer",children:e})]}),o("a",{href:i,target:"_blank",download:!0,rel:"noreferrer",children:o(h,{variant:"text",size:"small",icon:o(b,{})})})]},e)})}):o(p,{})}const G=f(D),C=r.div`
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { useAtomValue } from 'jotai';
+import { DownloadIcon } from '@redocly/theme/icons/DownloadIcon/DownloadIcon';
+import { getPathPrefix, combineUrls } from '@redocly/theme/core/openapi';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
+import { JsonIcon } from '@redocly/theme/icons/JsonIcon/JsonIcon';
+import { FileIcon } from '@redocly/theme/icons/FileIcon/FileIcon';
+import { useDownloadInfo } from './useDownloadInfo.js';
+import { globalStoreAtom } from '../../jotai/store.js';
+import { useTelemetry } from '../../hooks/index.js';
+import { styled } from '../../styled-components.js';
+function DownloadSpecificationComponent() {
+    const telemetry = useTelemetry();
+    const { options } = useAtomValue(globalStoreAtom);
+    const pathPrefix = getPathPrefix();
+    const downloadObjects = useDownloadInfo({
+        downloadUrls: options.downloadUrls,
+    });
+    const renderIcon = useCallback((iconType) => {
+        switch (iconType) {
+            case 'yaml':
+                return _jsx(DocumentIcon, {});
+            case 'json':
+                return _jsx(JsonIcon, {});
+            default:
+                return _jsx(FileIcon, {});
+        }
+    }, []);
+    if (!downloadObjects) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsx(Wrapper, { children: (downloadObjects || []).map(({ title, url, iconType }) => {
+            const downloadUrl = pathPrefix ? combineUrls(pathPrefix, url) : url;
+            return (_jsxs(Card, { onClick: () => telemetry.send({ type: 'openapi_docs.download_definition.clicked' }), children: [_jsxs(FileName, { children: [renderIcon(iconType), _jsx("a", { href: downloadUrl, target: "_blank", download: true, rel: "noreferrer", children: title })] }), _jsx("a", { href: downloadUrl, target: "_blank", download: true, rel: "noreferrer", children: _jsx(Button, { variant: "text", size: "small", icon: _jsx(DownloadIcon, {}) }) })] }, title));
+        }) }));
+}
+export const DownloadSpecification = memo(DownloadSpecificationComponent);
+const Card = styled.div `
   display: flex;
   align-items: baseline;
   justify-content: space-between;
@@ -10,7 +49,8 @@ import{jsx as o,Fragment as p,jsxs as s}from"react/jsx-runtime";import{memo as f
     padding-bottom: 0px;
     border-bottom: none;
   }
-`,F=r.span`
+`;
+const FileName = styled.span `
   display: flex;
   width: calc(100% - 25px);
   gap: var(--spacing-xs);
@@ -28,7 +68,8 @@ import{jsx as o,Fragment as p,jsxs as s}from"react/jsx-runtime";import{memo as f
     overflow: hidden;
     white-space: nowrap;
   }
-`,U=r.div`
+`;
+const Wrapper = styled.div `
   display: flex;
   align-items: center;
   align-self: flex-start;
@@ -36,4 +77,5 @@ import{jsx as o,Fragment as p,jsxs as s}from"react/jsx-runtime";import{memo as f
   flex-direction: column;
   gap: var(--spacing-sm);
   font-size: var(--font-size-base);
-`;export{G as DownloadSpecification};
+`;
+//# sourceMappingURL=DownloadSpecification.js.map

package/lib/components/Download/index.js

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

package/lib/components/Download/types.js

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

package/lib/components/Download/useDownloadInfo.js

@@ -1 +1,42 @@
-import{useMemo as r}from"react";const p=({downloadUrls:n,defaultFileName:i})=>r(()=>{if(n)return n.map(({title:e,url:t})=>({url:t,title:e||o(t,i||"openapi.yaml"),iconType:s(t)}))},[n,i]);function o(n,i){const e=n.split("?")[0].split(/[\\\/]/).pop();return!e||!e.includes("yaml")&&!e.includes("json")?i:e}function s(n,i){const e=i||n.split("?")[0].split(/[\\\/]/).pop();return e?e.includes("yaml")?"yaml":e.includes("json")?"json":"file":"file"}export{p as useDownloadInfo};
+import { useMemo } from 'react';
+export const useDownloadInfo = ({ downloadUrls, defaultFileName, }) => {
+    return useMemo(() => {
+        if (downloadUrls) {
+            return downloadUrls.map(({ title, url }) => ({
+                url,
+                title: title || getFileNameFromUrl(url, defaultFileName || 'openapi.yaml'),
+                iconType: getIconTypeFromUrl(url),
+            }));
+        }
+    }, [downloadUrls, defaultFileName]);
+};
+function getFileNameFromUrl(url, defaultValue) {
+    const filename = url
+        .split('?')[0]
+        .split(/[\\\/]/) // handle backslash for Windows system
+        .pop();
+    if (!filename || (!filename.includes('yaml') && !filename.includes('json'))) {
+        return defaultValue;
+    }
+    else {
+        return filename;
+    }
+}
+function getIconTypeFromUrl(url, title) {
+    const filename = title ||
+        url
+            .split('?')[0]
+            .split(/[\\\/]/) // handle backslash for Windows system
+            .pop();
+    if (!filename) {
+        return 'file';
+    }
+    if (filename.includes('yaml')) {
+        return 'yaml';
+    }
+    else if (filename.includes('json')) {
+        return 'json';
+    }
+    return 'file';
+}
+//# sourceMappingURL=useDownloadInfo.js.map

package/lib/components/ErrorBoundary/ErrorBoundary.js

@@ -1,4 +1,24 @@
-import{jsx as r,jsxs as e,Fragment as n}from"react/jsx-runtime";import{Children as s,Component as i}from"react";import{styled as o}from"../../styled-components.js";const d=o.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.js';
+const ErrorWrapper = styled.div `
   padding: 20px;
   color: red;
-`;class h extends i{constructor(t){super(t),this.state={error:void 0}}componentDidCatch(t){return this.setState({error:t}),!1}render(){return this.state.error?e(d,{children:[r("h1",{children:"Something went wrong..."}),e("small",{children:[" ",this.state.error.message," "]}),r("p",{children:e("details",{children:[r("summary",{children:"Stack trace"}),r("pre",{children:this.state.error.stack})]})}),typeof __REDOC_VERSION__<"u"?e(n,{children:[e("small",{children:[" References docs version: ",__REDOC_VERSION__]})," ",r("br",{})]}):null,typeof __REDOC_REVISION__<"u"?e("small",{children:[" Commit: ",__REDOC_REVISION__]}):null]}):r(n,{children:s.only(this.props.children)})}}export{h as ErrorBoundary};
+`;
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: undefined };
+    }
+    componentDidCatch(error) {
+        this.setState({ error });
+        return false;
+    }
+    render() {
+        if (this.state.error) {
+            return (_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 })] }) }), typeof __REDOC_VERSION__ !== 'undefined' ? (_jsxs(_Fragment, { children: [_jsxs("small", { children: [" References docs version: ", __REDOC_VERSION__] }), " ", _jsx("br", {})] })) : null, typeof __REDOC_REVISION__ !== 'undefined' ? (_jsxs("small", { children: [" Commit: ", __REDOC_REVISION__] })) : null] }));
+        }
+        return _jsx(_Fragment, { children: Children.only(this.props.children) });
+    }
+}
+//# sourceMappingURL=ErrorBoundary.js.map

package/lib/components/ErrorBoundary/index.js

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

package/lib/components/ExpandAllButton/ExpandAllButton.js

@@ -1,3 +1,32 @@
-import{jsx as n}from"react/jsx-runtime";import{useAtom as d}from"jotai";import{MaximizeIcon as m}from"@redocly/theme/icons/MaximizeIcon/MaximizeIcon";import{Button as c}from"@redocly/theme/components/Button/Button";import{operationStore as x}from"../../jotai/operation.js";import{useTelemetry as u,useTranslate as f}from"../../hooks/index.js";import{styled as A}from"../../styled-components.js";const k=({operationPointer:a,type:e,onPanelToggle:r})=>{const t=f(),[l,s]=d(x(a)),p=u(),i=()=>{const o=!l[e].expandedAll;p.send({type:"openapi_docs.expand_collapse_all.clicked",payload:{is_expanded:o}}),s({[e]:{expandedAll:o}}),r?.(o,e==="request"?"request":"responses")};return n(g,{icon:n(m,{}),iconPosition:"right",size:"small",variant:"ghost",onClick:i,children:l[e].expandedAll?t("openapi.collapseAll","Collapse all"):t("openapi.expandAll","Expand all")})},g=A(c)`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAtom } from 'jotai';
+import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { operationStore } from '../../jotai/operation.js';
+import { useTelemetry, useTranslate } from '../../hooks/index.js';
+import { styled } from '../../styled-components.js';
+export const ExpandAllButton = ({ operationPointer, type, onPanelToggle, }) => {
+    const translate = useTranslate();
+    const [operationState, setOperationState] = useAtom(operationStore(operationPointer));
+    const telemetry = useTelemetry();
+    const handleToggle = () => {
+        const expandedAll = !operationState[type].expandedAll;
+        telemetry.send({
+            type: 'openapi_docs.expand_collapse_all.clicked',
+            payload: { isExpanded: expandedAll },
+        });
+        setOperationState({
+            [type]: {
+                expandedAll,
+            },
+        });
+        onPanelToggle?.(expandedAll, type === 'request' ? 'request' : 'responses');
+    };
+    return (_jsx(StyledButton, { icon: _jsx(MaximizeIcon, {}), iconPosition: "right", size: "small", variant: "ghost", onClick: handleToggle, children: operationState[type].expandedAll
+            ? translate('openapi.collapseAll', 'Collapse all')
+            : translate('openapi.expandAll', 'Expand all') }));
+};
+const StyledButton = styled(Button) `
   margin-left: auto;
-`;export{k as ExpandAllButton};
+`;
+//# sourceMappingURL=ExpandAllButton.js.map

package/lib/components/ExpandAllButton/index.js

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

package/lib/components/ExternalDocumentation/ExternalDocumentation.js

@@ -1,4 +1,18 @@
-import{jsx as n}from"react/jsx-runtime";import{memo as i}from"react";import{markdownLinksCss as m}from"@redocly/theme/components/Markdown/styles/links";import{normalizeText as a}from"../../utils/index.js";import{styled as e}from"../../styled-components.js";const l=e.div`
-  ${m};
-  ${({compact:r})=>r?"":"margin: var(--spacing-sm) 0 0"}
-`;function p({externalDocs:r,compact:o}){if(!r||!r.url)return null;const t=a(r.description);return n(l,{compact:o,"data-testid":"external-documentation",children:n("a",{href:r.url,target:"_blank",rel:"noreferrer","aria-label":t||r.url,children:t||r.url})})}const k=i(p);export{k as ExternalDocumentation};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
+import { normalizeText } from '../../utils/index.js';
+import { styled } from '../../styled-components.js';
+const LinkWrap = styled.div `
+  ${markdownLinksCss};
+  ${({ compact }) => (!compact ? 'margin: var(--spacing-sm) 0 0' : '')}
+`;
+function ExternalDocumentationComponent({ externalDocs, compact, }) {
+    if (!externalDocs || !externalDocs.url) {
+        return null;
+    }
+    const description = normalizeText(externalDocs.description);
+    return (_jsx(LinkWrap, { compact: compact, "data-testid": "external-documentation", children: _jsx("a", { href: externalDocs.url, target: "_blank", rel: "noreferrer", "aria-label": description || externalDocs.url, children: description || externalDocs.url }) }));
+}
+export const ExternalDocumentation = memo(ExternalDocumentationComponent);
+//# sourceMappingURL=ExternalDocumentation.js.map

package/lib/components/ExternalDocumentation/index.js

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

package/lib/components/Language/LanguageDropdown.js

@@ -1 +1,21 @@
-import{jsx as t}from"react/jsx-runtime";import{useCallback as h,useMemo as s}from"react";import{Dropdown as k}from"@redocly/theme/components/Dropdown/Dropdown";import{DropdownMenu as y}from"@redocly/theme/components/Dropdown/DropdownMenu";import{LanguageItem as D}from"./LanguageItem.js";import{DropdownTriggerButton as x,StyledDropdownMenuItem as A}from"./styled.js";const B=({samples:o,activeTab:n,onChange:e,trigger:l,width:i,withArrow:f=!0,withCheckmark:d=!0,withIcon:c=!0})=>{const m=h(r=>()=>{const u=o.find(({key:a})=>a===r.key);u&&e(u.key)},[e,o]),g=s(()=>o.map(r=>t(A,{$width:i,onAction:m(r),children:t(D,{item:r,active:n===r.key,withCheckmark:d,withIcon:c})},r.key)),[n,m,o,i,d,c]),w=o.find(({key:r})=>r===n),p=l||t(x,{variant:"ghost",children:w?.title});return g.length>1?t(k,{trigger:p,withArrow:f,alignment:"end",children:t(y,{children:g})}):p};export{B as LanguageDropdown};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { LanguageItem } from './LanguageItem.js';
+import { DropdownTriggerButton, StyledDropdownMenuItem } from './styled.js';
+export const LanguageDropdown = ({ samples, activeTab, onChange, trigger, width, withArrow = true, withCheckmark = true, withIcon = true, }) => {
+    const handleAction = useCallback((value) => () => {
+        const selectedSample = samples.find(({ key }) => key === value.key);
+        if (selectedSample) {
+            onChange(selectedSample.key);
+        }
+    }, [onChange, samples]);
+    const items = useMemo(() => samples.map((item) => {
+        return (_jsx(StyledDropdownMenuItem, { "$width": width, onAction: handleAction(item), children: _jsx(LanguageItem, { item: item, active: activeTab === item.key, withCheckmark: withCheckmark, withIcon: withIcon }) }, item.key));
+    }), [activeTab, handleAction, samples, width, withCheckmark, withIcon]);
+    const activeSample = samples.find(({ key }) => key === activeTab);
+    const dropdownTrigger = trigger || (_jsx(DropdownTriggerButton, { variant: "ghost", children: activeSample?.title }));
+    return items.length > 1 ? (_jsx(Dropdown, { trigger: dropdownTrigger, withArrow: withArrow, alignment: "end", children: _jsx(DropdownMenu, { children: items }) })) : (dropdownTrigger);
+};
+//# sourceMappingURL=LanguageDropdown.js.map

package/lib/components/Language/LanguageItem.js

@@ -1 +1,33 @@
-import{jsx as o,jsxs as a,Fragment as e}from"react/jsx-runtime";import{CheckmarkIcon as p}from"@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon";import{CurlIcon as f}from"../../icons/CurlIcon/index.js";import{CSharpIcon as n}from"../../icons/CSharpIcon/index.js";import{NodeJSIcon as l}from"../../icons/NodeJSIcon/index.js";import{JavaScriptIcon as I}from"../../icons/JavaScriptIcon/index.js";import{PythonIcon as s}from"../../icons/PythonIcon/index.js";import{RIcon as g}from"../../icons/RIcon/index.js";import{RubyIcon as h}from"../../icons/RubyIcon/index.js";import{PHPIcon as u}from"../../icons/PHPIcon/index.js";import{GOIcon as d}from"../../icons/GOIcon/index.js";import{JavaIcon as m}from"../../icons/JavaIcon/index.js";import{PayloadIcon as P}from"../../icons/PayloadIcon/index.js";import{LanguageIcon as y,LanguageTitle as C,LanguageTitleContainer as J}from"./styled.js";const j={Payload:o(P,{}),curl:o(f,{}),"C#":o(n,{}),"C#+Newtonsoft":o(n,{}),"Node.js":o(l,{}),JavaScript:o(I,{}),Python:o(s,{}),R:o(g,{}),Ruby:o(h,{}),PHP:o(u,{}),Go:o(d,{}),Java:o(m,{}),"Java8+Apache":o(m,{})},A=({item:r,active:t,withCheckmark:c,withIcon:i})=>a(e,{children:[a(J,{children:[i&&o(y,{children:j[r.lang]}),o(C,{active:t,title:r.title,children:r.title})]}),c&&t&&o(p,{})]});export{A as LanguageItem};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
+import { CurlIcon } from '../../icons/CurlIcon/index.js';
+import { CSharpIcon } from '../../icons/CSharpIcon/index.js';
+import { NodeJSIcon } from '../../icons/NodeJSIcon/index.js';
+import { JavaScriptIcon } from '../../icons/JavaScriptIcon/index.js';
+import { PythonIcon } from '../../icons/PythonIcon/index.js';
+import { RIcon } from '../../icons/RIcon/index.js';
+import { RubyIcon } from '../../icons/RubyIcon/index.js';
+import { PHPIcon } from '../../icons/PHPIcon/index.js';
+import { GOIcon } from '../../icons/GOIcon/index.js';
+import { JavaIcon } from '../../icons/JavaIcon/index.js';
+import { PayloadIcon } from '../../icons/PayloadIcon/index.js';
+import { LanguageIcon, LanguageTitle, LanguageTitleContainer } from './styled.js';
+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, active, withCheckmark, withIcon }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(LanguageTitleContainer, { children: [withIcon && _jsx(LanguageIcon, { children: iconMap[item.lang] }), _jsx(LanguageTitle, { active: active, title: item.title, children: item.title })] }), withCheckmark && active && _jsx(CheckmarkIcon, {})] }));
+};
+//# sourceMappingURL=LanguageItem.js.map

package/lib/components/Language/LanguageList.js

@@ -1 +1,93 @@
-import{jsx as a,jsxs as I}from"react/jsx-runtime";import{useLayoutEffect as T,useRef as A,useState as y,useCallback as _,memo as j,useMemo as E}from"react";import{useAtomValue as H,useSetAtom as S}from"jotai";import{Button as V}from"@redocly/theme/components/Button/Button";import{OverflowMenuVerticalIcon as W}from"@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon";import{LanguageDropdown as v}from"./LanguageDropdown.js";import{languageAtom as D,layoutAtom as R}from"../../jotai/app.js";import{LanguageListContainer as M,LanguageListItem as O,Container as z}from"./styled.js";import{LanguageItem as G}from"./LanguageItem.js";import{DROPDOWN_TRIGGER_WIDTH as B,ITEM_WIDTH as L}from"./constants.js";import{LanguageListSkeleton as N}from"../common/Skeleton/LanguageListSkeleton.js";import{useTelemetry as P}from"../../hooks/index.js";function $({languages:o,activeLanguage:t}){const[n,i]=y([]),[s,l]=y([]),u=P(),d=A(null),f=H(R),h=S(D),p=e=>{u.send({type:"openapi_docs.select_language.clicked",payload:{language:e}})},k=e=>{h(e),p(e)},x=e=>{const m=s.findIndex(r=>r.key===e);if(m!==-1){const r=[...s],c=[...n];w(c,r,m),i(c),l(r),p(e),h(e)}},g=_(()=>{const e=d?.current?.offsetWidth;if(!e)return;const{newVisibleItems:m,newHiddenItems:r}=q(e,[...o]),c=r.findIndex(b=>b.key===t);c!==-1&&w(m,r,c),i(m),l(r)},[t,o]);T(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[f,t]);const C=E(()=>n.length>=5||s.length?"space-between":"start",[s.length,n.length]);return I(z,{ref:d,children:[I(M,{$justifyContent:C,children:[!n.length&&a(N,{}),n.map(e=>a(O,{onClick:()=>k(e.key),active:t===e.key,children:a(G,{item:e,withIcon:!0})},e.key))]}),s.length?a(v,{activeTab:t,samples:s,onChange:x,trigger:a(V,{icon:a(W,{}),variant:"text",style:{height:"100%"}}),withArrow:!1,withCheckmark:!1,width:156}):null]})}const se=j($);function q(o,t){let n=0;const i=[],s=[];return t.forEach((l,u)=>{const f=u===t.length-1&&s.length===0?0:B;o&&n+L+f<=o?(i.push(l),n+=L):s.push(l)}),{newVisibleItems:i,newHiddenItems:s}}function w(o,t,n){const i=o[o.length-1];i&&(o[o.length-1]=t[n],t[n]=i)}export{se as LanguageList};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState, useCallback, memo, useMemo } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { OverflowMenuVerticalIcon } from '@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon';
+import { LanguageDropdown } from './LanguageDropdown.js';
+import { languageAtom, layoutAtom } from '../../jotai/app.js';
+import { LanguageListContainer, LanguageListItem, Container } from './styled.js';
+import { LanguageItem } from './LanguageItem.js';
+import { DROPDOWN_TRIGGER_WIDTH, ITEM_WIDTH } from './constants.js';
+import { LanguageListSkeleton } from '../common/Skeleton/LanguageListSkeleton.js';
+import { useTelemetry } from '../../hooks/index.js';
+function LanguageListComponent({ languages, activeLanguage }) {
+    const [visibleItems, setVisibleItems] = useState([]);
+    const [hiddenItems, setHiddenItems] = useState([]);
+    const telemetry = useTelemetry();
+    const containerRef = useRef(null);
+    const layout = useAtomValue(layoutAtom);
+    const setLanguage = useSetAtom(languageAtom);
+    const setLanguageSendTelemetry = (selectedItem) => {
+        telemetry.send({
+            type: 'openapi_docs.select_language.clicked',
+            payload: { language: selectedItem },
+        });
+    };
+    const onSelectLanguage = (selectedItem) => {
+        setLanguage(selectedItem);
+        setLanguageSendTelemetry(selectedItem);
+    };
+    const handleSetActiveLanguage = (selectedItem) => {
+        const selectedItemIndex = hiddenItems.findIndex((item) => item.key === selectedItem);
+        if (selectedItemIndex !== -1) {
+            const newHiddenItems = [...hiddenItems];
+            const newVisibleItems = [...visibleItems];
+            swapItems(newVisibleItems, newHiddenItems, selectedItemIndex);
+            setVisibleItems(newVisibleItems);
+            setHiddenItems(newHiddenItems);
+            setLanguageSendTelemetry(selectedItem);
+            setLanguage(selectedItem);
+        }
+    };
+    const updateItemsVisibility = useCallback(() => {
+        const containerWidth = containerRef?.current?.offsetWidth;
+        if (!containerWidth)
+            return;
+        const { newVisibleItems, newHiddenItems } = calculateVisibleAndHiddenItems(containerWidth, [
+            ...languages,
+        ]);
+        const selectedItemIndex = newHiddenItems.findIndex((item) => item.key === activeLanguage);
+        if (selectedItemIndex !== -1) {
+            swapItems(newVisibleItems, newHiddenItems, selectedItemIndex);
+        }
+        setVisibleItems(newVisibleItems);
+        setHiddenItems(newHiddenItems);
+    }, [activeLanguage, languages]);
+    useLayoutEffect(() => {
+        updateItemsVisibility();
+        window.addEventListener('resize', updateItemsVisibility);
+        return () => {
+            window.removeEventListener('resize', updateItemsVisibility);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [layout, activeLanguage]);
+    const justifyContent = useMemo(() => (visibleItems.length >= 5 || hiddenItems.length ? 'space-between' : 'start'), [hiddenItems.length, visibleItems.length]);
+    return (_jsxs(Container, { ref: containerRef, children: [_jsxs(LanguageListContainer, { "$justifyContent": justifyContent, children: [!visibleItems.length && _jsx(LanguageListSkeleton, {}), visibleItems.map((item) => (_jsx(LanguageListItem, { onClick: () => onSelectLanguage(item.key), active: activeLanguage === item.key, children: _jsx(LanguageItem, { item: item, withIcon: true }) }, item.key)))] }), hiddenItems.length ? (_jsx(LanguageDropdown, { activeTab: activeLanguage, samples: hiddenItems, onChange: handleSetActiveLanguage, trigger: _jsx(Button, { icon: _jsx(OverflowMenuVerticalIcon, {}), variant: "text", style: { height: '100%' } }), withArrow: false, withCheckmark: false, width: 156 })) : null] }));
+}
+export const LanguageList = memo(LanguageListComponent);
+function calculateVisibleAndHiddenItems(containerWidth, items) {
+    let totalWidth = 0;
+    const newVisibleItems = [];
+    const newHiddenItems = [];
+    items.forEach((item, idx) => {
+        const isLastItem = idx === items.length - 1;
+        // We won't display dropdown if the last item will fit in the container
+        const dropdownTriggerWidth = isLastItem && newHiddenItems.length === 0 ? 0 : DROPDOWN_TRIGGER_WIDTH;
+        if (containerWidth && totalWidth + ITEM_WIDTH + dropdownTriggerWidth <= containerWidth) {
+            newVisibleItems.push(item);
+            totalWidth += ITEM_WIDTH;
+        }
+        else {
+            newHiddenItems.push(item);
+        }
+    });
+    return { newVisibleItems, newHiddenItems };
+}
+function swapItems(newVisibleItems, newHiddenItems, selectedItemIndex) {
+    const lastVisibleItems = newVisibleItems[newVisibleItems.length - 1];
+    if (lastVisibleItems) {
+        newVisibleItems[newVisibleItems.length - 1] = newHiddenItems[selectedItemIndex];
+        newHiddenItems[selectedItemIndex] = lastVisibleItems;
+    }
+}
+//# sourceMappingURL=LanguageList.js.map

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

@@ -1 +1,23 @@
-import{jsx as a}from"react/jsx-runtime";import{render as c,fireEvent as s,screen as g}from"@testing-library/react";import{LanguageDropdown as l}from"../LanguageDropdown";const e=[{key:"js",title:"JS",lang:"js"},{key:"node.js",title:"Node.JS",lang:"nodejs"}],r=e[0].key,n=jest.fn();describe("LanguageDropdown",()=>{test("LanguageDropdown renders correctly",()=>{const{getAllByText:t}=c(a(l,{samples:e,activeTab:r,onChange:n}));expect(t(e[0].title)[0]).toBeInTheDocument()}),test("LanguageDropdown handles onChange correctly",()=>{const{getAllByText:t}=c(a(l,{samples:e,activeTab:r,onChange:n}));s.click(g.getAllByText(e[0].title)[0]);const o=e[1];s.click(t(o.title)[0]),expect(n).toHaveBeenCalledWith(o.key)})});
+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' },
+];
+const mockActiveTab = mockSamples[0].key;
+const mockOnChange = jest.fn();
+describe('LanguageDropdown', () => {
+    test('LanguageDropdown renders correctly', () => {
+        const { getAllByText } = render(_jsx(LanguageDropdown, { samples: mockSamples, activeTab: mockActiveTab, onChange: mockOnChange }));
+        expect(getAllByText(mockSamples[0].title)[0]).toBeInTheDocument();
+    });
+    test('LanguageDropdown handles onChange correctly', () => {
+        const { getAllByText } = render(_jsx(LanguageDropdown, { samples: mockSamples, activeTab: mockActiveTab, onChange: mockOnChange }));
+        fireEvent.click(screen.getAllByText(mockSamples[0].title)[0]);
+        const otherLanguage = mockSamples[1];
+        fireEvent.click(getAllByText(otherLanguage.title)[0]);
+        expect(mockOnChange).toHaveBeenCalledWith(otherLanguage.key);
+    });
+});
+//# sourceMappingURL=LanguageDropdown.test.js.map

package/lib/components/Language/constants.js

@@ -1 +1,3 @@
-const o=78,t=32;export{t as DROPDOWN_TRIGGER_WIDTH,o as ITEM_WIDTH};
+export const ITEM_WIDTH = 78;
+export const DROPDOWN_TRIGGER_WIDTH = 32;
+//# sourceMappingURL=constants.js.map

package/lib/components/Language/index.js

@@ -1 +1,4 @@
-import{LanguageDropdown as r}from"./LanguageDropdown.js";import{LanguageList as g}from"./LanguageList.js";import{LanguageItem as m}from"./LanguageItem.js";export{r as LanguageDropdown,m as LanguageItem,g as LanguageList};
+export { LanguageDropdown } from './LanguageDropdown.js';
+export { LanguageList } from './LanguageList.js';
+export { LanguageItem } from './LanguageItem.js';
+//# sourceMappingURL=index.js.map

package/lib/components/Language/styled.js

@@ -1,8 +1,14 @@
-import{css as i}from"styled-components";import{Button as r}from"@redocly/theme/components/Button/Button";import{DropdownMenuItem as n}from"@redocly/theme/components/Dropdown/DropdownMenuItem";import{ITEM_WIDTH as o}from"./constants.js";import{styled as t}from"../../styled-components.js";const d=t.span`
+import { css } from 'styled-components';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { ITEM_WIDTH } from './constants.js';
+import { styled } from '../../styled-components.js';
+export const Container = styled.span `
   display: flex;
   justify-content: space-between;
   align-items: center;
-`,g=t.span`
+`;
+export const LanguageTitle = styled.span `
   max-width: 150px;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -10,15 +16,17 @@ import{css as i}from"styled-components";import{Button as r}from"@redocly/theme/c
   padding: 0 var(--spacing-xxs);
   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)"};
-`,x=t.span`
+  font-weight: ${({ active }) => active ? 'var(--font-weight-medium)' : 'var(--font-weight-regular)'};
+`;
+export const LanguageTitleContainer = styled.span `
   width: 100%;
   display: inherit;
   gap: inherit;
   flex-direction: inherit;
   justify-content: inherit;
   align-items: inherit;
-`,f=t.span`
+`;
+export const LanguageIcon = styled.span `
   width: 24px;
   height: 24px;
   display: flex;
@@ -26,15 +34,17 @@ import{css as i}from"styled-components";import{Button as r}from"@redocly/theme/c
   justify-content: center;
   flex-shrink: 0;
   overflow: hidden;
-`,h=t.div`
+`;
+export const LanguageListContainer = styled.div `
   display: flex;
-  justify-content: ${({$justifyContent:e="start"})=>e};
+  justify-content: ${({ $justifyContent = 'start' }) => $justifyContent};
   align-items: center;
   width: 100%;
-`,u=t.button`
+`;
+export const LanguageListItem = styled.button `
   background: none;
   border: none;
-  width: ${o}px;
+  width: ${ITEM_WIDTH}px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -42,7 +52,7 @@ import{css as i}from"styled-components";import{Button as r}from"@redocly/theme/c
   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)"};
+  color: ${({ active }) => active ? 'var(--text-color-primary)' : 'var(--text-color-description)'};
   border-radius: var(--border-radius);
   text-align: center;
   position: relative;
@@ -51,7 +61,8 @@ import{css as i}from"styled-components";import{Button as r}from"@redocly/theme/c
     color: var(--text-color-primary);
   }
 
-  ${({active:e})=>e&&i`
+  ${({ active }) => active &&
+    css `
       &::before {
         position: absolute;
         top: -21px;
@@ -62,20 +73,23 @@ import{css as i}from"styled-components";import{Button as r}from"@redocly/theme/c
         border-bottom-right-radius: calc(var(--border-radius) / 2);
       }
     `}
-`,m=t(n)`
+`;
+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;
+  width: ${({ $width = 204 }) => $width}px;
   fill: var(--menu-content-color-active);
-`,v=t(r)`
+`;
+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;
-`;export{d as Container,v as DropdownTriggerButton,f as LanguageIcon,h as LanguageListContainer,u as LanguageListItem,g as LanguageTitle,x as LanguageTitleContainer,m as StyledDropdownMenuItem};
+`;
+//# sourceMappingURL=styled.js.map