@redocly/openapi-docs 3.4.17 → 3.4.18

package/lib/components/Language/LanguageItem.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LanguageItem=void 0;const jsx_runtime_1=require("react/jsx-runtime"),theme_1=require("@redocly/theme"),CurlIcon_1=require("../../icons/CurlIcon"),CSharpIcon_1=require("../../icons/CSharpIcon"),NodeJSIcon_1=require("../../icons/NodeJSIcon"),JavaScriptIcon_1=require("../../icons/JavaScriptIcon"),PythonIcon_1=require("../../icons/PythonIcon"),RIcon_1=require("../../icons/RIcon"),RubyIcon_1=require("../../icons/RubyIcon"),PHPIcon_1=require("../../icons/PHPIcon"),GOIcon_1=require("../../icons/GOIcon"),JavaIcon_1=require("../../icons/JavaIcon"),PayloadIcon_1=require("../../icons/PayloadIcon"),styled_1=require("./styled"),iconMap={Payload:(0,jsx_runtime_1.jsx)(PayloadIcon_1.PayloadIcon,{}),curl:(0,jsx_runtime_1.jsx)(CurlIcon_1.CurlIcon,{}),"C#":(0,jsx_runtime_1.jsx)(CSharpIcon_1.CSharpIcon,{}),"C#+Newtonsoft":(0,jsx_runtime_1.jsx)(CSharpIcon_1.CSharpIcon,{}),"Node.js":(0,jsx_runtime_1.jsx)(NodeJSIcon_1.NodeJSIcon,{}),JavaScript:(0,jsx_runtime_1.jsx)(JavaScriptIcon_1.JavaScriptIcon,{}),Python:(0,jsx_runtime_1.jsx)(PythonIcon_1.PythonIcon,{}),R:(0,jsx_runtime_1.jsx)(RIcon_1.RIcon,{}),Ruby:(0,jsx_runtime_1.jsx)(RubyIcon_1.RubyIcon,{}),PHP:(0,jsx_runtime_1.jsx)(PHPIcon_1.PHPIcon,{}),Go:(0,jsx_runtime_1.jsx)(GOIcon_1.GOIcon,{}),Java:(0,jsx_runtime_1.jsx)(JavaIcon_1.JavaIcon,{}),"Java8+Apache":(0,jsx_runtime_1.jsx)(JavaIcon_1.JavaIcon,{})},LanguageItem=({item:n,active:e,withCheckmark:o,withIcon:c})=>(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(styled_1.LanguageTitleContainer,{children:[c&&(0,jsx_runtime_1.jsx)(styled_1.LanguageIcon,{children:iconMap[n.lang]}),(0,jsx_runtime_1.jsx)(styled_1.LanguageTitle,{active:e,children:n.title})]}),o&&e&&(0,jsx_runtime_1.jsx)(theme_1.CheckmarkIcon,{})]});exports.LanguageItem=LanguageItem;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LanguageItem=void 0;const jsx_runtime_1=require("react/jsx-runtime"),theme_1=require("@redocly/theme"),CurlIcon_1=require("../../icons/CurlIcon"),CSharpIcon_1=require("../../icons/CSharpIcon"),NodeJSIcon_1=require("../../icons/NodeJSIcon"),JavaScriptIcon_1=require("../../icons/JavaScriptIcon"),PythonIcon_1=require("../../icons/PythonIcon"),RIcon_1=require("../../icons/RIcon"),RubyIcon_1=require("../../icons/RubyIcon"),PHPIcon_1=require("../../icons/PHPIcon"),GOIcon_1=require("../../icons/GOIcon"),JavaIcon_1=require("../../icons/JavaIcon"),PayloadIcon_1=require("../../icons/PayloadIcon"),styled_1=require("./styled"),iconMap={Payload:(0,jsx_runtime_1.jsx)(PayloadIcon_1.PayloadIcon,{}),curl:(0,jsx_runtime_1.jsx)(CurlIcon_1.CurlIcon,{}),"C#":(0,jsx_runtime_1.jsx)(CSharpIcon_1.CSharpIcon,{}),"C#+Newtonsoft":(0,jsx_runtime_1.jsx)(CSharpIcon_1.CSharpIcon,{}),"Node.js":(0,jsx_runtime_1.jsx)(NodeJSIcon_1.NodeJSIcon,{}),JavaScript:(0,jsx_runtime_1.jsx)(JavaScriptIcon_1.JavaScriptIcon,{}),Python:(0,jsx_runtime_1.jsx)(PythonIcon_1.PythonIcon,{}),R:(0,jsx_runtime_1.jsx)(RIcon_1.RIcon,{}),Ruby:(0,jsx_runtime_1.jsx)(RubyIcon_1.RubyIcon,{}),PHP:(0,jsx_runtime_1.jsx)(PHPIcon_1.PHPIcon,{}),Go:(0,jsx_runtime_1.jsx)(GOIcon_1.GOIcon,{}),Java:(0,jsx_runtime_1.jsx)(JavaIcon_1.JavaIcon,{}),"Java8+Apache":(0,jsx_runtime_1.jsx)(JavaIcon_1.JavaIcon,{})},LanguageItem=({item:n,active:e,withCheckmark:o,withIcon:c})=>(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(styled_1.LanguageTitleContainer,{children:[c&&(0,jsx_runtime_1.jsx)(styled_1.LanguageIcon,{children:iconMap[n.lang]}),(0,jsx_runtime_1.jsx)(styled_1.LanguageTitle,{active:e,title:n.title,children:n.title})]}),o&&e&&(0,jsx_runtime_1.jsx)(theme_1.CheckmarkIcon,{})]});exports.LanguageItem=LanguageItem;
 //# sourceMappingURL=LanguageItem.js.map

package/lib/components/Language/LanguageList.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LanguageList=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),jotai_1=require("jotai"),theme_1=require("@redocly/theme"),LanguageDropdown_1=require("./LanguageDropdown"),app_1=require("../../jotai/app"),styled_1=require("./styled"),LanguageItem_1=require("./LanguageItem"),constants_1=require("./constants"),LanguageListSkeleton_1=require("../common/Skeleton/LanguageListSkeleton");function LanguageListComponent({languages:e,activeLanguage:t}){const[n,a]=(0,react_1.useState)([]),[s,i]=(0,react_1.useState)([]),r=(0,react_1.useRef)(null),o=(0,jotai_1.useAtomValue)(app_1.layoutAtom),u=(0,jotai_1.useSetAtom)(app_1.languageAtom),_=(0,react_1.useCallback)((()=>{var n;const s=null===(n=null==r?void 0:r.current)||void 0===n?void 0:n.offsetWidth;if(!s)return;const{newVisibleItems:o,newHiddenItems:u}=calculateVisibleAndHiddenItems(s,[...e]),_=u.findIndex((e=>e.key===t));-1!==_&&swapItems(o,u,_),a(o),i(u)}),[t,e]);return(0,react_1.useLayoutEffect)((()=>(_(),window.addEventListener("resize",_),()=>{window.removeEventListener("resize",_)})),[o,t]),(0,jsx_runtime_1.jsxs)(styled_1.Container,{ref:r,children:[(0,jsx_runtime_1.jsxs)(styled_1.LanguageListContainer,{children:[!n.length&&(0,jsx_runtime_1.jsx)(LanguageListSkeleton_1.LanguageListSkeleton,{}),n.map((e=>(0,jsx_runtime_1.jsx)(styled_1.LanguageListItem,{onClick:()=>u(e.key),active:t===e.key,children:(0,jsx_runtime_1.jsx)(LanguageItem_1.LanguageItem,{item:e,withIcon:!0})},e.key)))]}),s.length?(0,jsx_runtime_1.jsx)(LanguageDropdown_1.LanguageDropdown,{activeTab:t,samples:s,onChange:e=>{const t=s.findIndex((t=>t.key===e));if(-1!==t){const r=[...s],o=[...n];swapItems(o,r,t),a(o),i(r),u(e)}},trigger:(0,jsx_runtime_1.jsx)(theme_1.Button,{icon:(0,jsx_runtime_1.jsx)(theme_1.OverflowMenuVerticalIcon,{}),variant:"text",style:{height:"100%"}}),withArrow:!1,withCheckmark:!1,width:156}):null]})}function calculateVisibleAndHiddenItems(e,t){let n=0;const a=[],s=[];return t.forEach(((i,r)=>{const o=r===t.length-1&&0===s.length?0:constants_1.DROPDOWN_TRIGGER_WIDTH;e&&n+constants_1.ITEM_WIDTH+o<=e?(a.push(i),n+=constants_1.ITEM_WIDTH):s.push(i)})),{newVisibleItems:a,newHiddenItems:s}}function swapItems(e,t,n){const a=e[e.length-1];a&&(e[e.length-1]=t[n],t[n]=a)}exports.LanguageList=(0,react_1.memo)(LanguageListComponent);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LanguageList=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),jotai_1=require("jotai"),theme_1=require("@redocly/theme"),LanguageDropdown_1=require("./LanguageDropdown"),app_1=require("../../jotai/app"),styled_1=require("./styled"),LanguageItem_1=require("./LanguageItem"),constants_1=require("./constants"),LanguageListSkeleton_1=require("../common/Skeleton/LanguageListSkeleton");function LanguageListComponent({languages:e,activeLanguage:t}){const[n,a]=(0,react_1.useState)([]),[s,i]=(0,react_1.useState)([]),r=(0,react_1.useRef)(null),o=(0,jotai_1.useAtomValue)(app_1.layoutAtom),u=(0,jotai_1.useSetAtom)(app_1.languageAtom),g=(0,react_1.useCallback)((()=>{var n;const s=null===(n=null==r?void 0:r.current)||void 0===n?void 0:n.offsetWidth;if(!s)return;const{newVisibleItems:o,newHiddenItems:u}=calculateVisibleAndHiddenItems(s,[...e]),g=u.findIndex((e=>e.key===t));-1!==g&&swapItems(o,u,g),a(o),i(u)}),[t,e]);(0,react_1.useLayoutEffect)((()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)})),[o,t]);const _=(0,react_1.useMemo)((()=>n.length>=5||s.length?"space-between":"start"),[s.length,n.length]);return(0,jsx_runtime_1.jsxs)(styled_1.Container,{ref:r,children:[(0,jsx_runtime_1.jsxs)(styled_1.LanguageListContainer,{$justifyContent:_,children:[!n.length&&(0,jsx_runtime_1.jsx)(LanguageListSkeleton_1.LanguageListSkeleton,{}),n.map((e=>(0,jsx_runtime_1.jsx)(styled_1.LanguageListItem,{onClick:()=>u(e.key),active:t===e.key,children:(0,jsx_runtime_1.jsx)(LanguageItem_1.LanguageItem,{item:e,withIcon:!0})},e.key)))]}),s.length?(0,jsx_runtime_1.jsx)(LanguageDropdown_1.LanguageDropdown,{activeTab:t,samples:s,onChange:e=>{const t=s.findIndex((t=>t.key===e));if(-1!==t){const r=[...s],o=[...n];swapItems(o,r,t),a(o),i(r),u(e)}},trigger:(0,jsx_runtime_1.jsx)(theme_1.Button,{icon:(0,jsx_runtime_1.jsx)(theme_1.OverflowMenuVerticalIcon,{}),variant:"text",style:{height:"100%"}}),withArrow:!1,withCheckmark:!1,width:156}):null]})}function calculateVisibleAndHiddenItems(e,t){let n=0;const a=[],s=[];return t.forEach(((i,r)=>{const o=r===t.length-1&&0===s.length?0:constants_1.DROPDOWN_TRIGGER_WIDTH;e&&n+constants_1.ITEM_WIDTH+o<=e?(a.push(i),n+=constants_1.ITEM_WIDTH):s.push(i)})),{newVisibleItems:a,newHiddenItems:s}}function swapItems(e,t,n){const a=e[e.length-1];a&&(e[e.length-1]=t[n],t[n]=a)}exports.LanguageList=(0,react_1.memo)(LanguageListComponent);
 //# sourceMappingURL=LanguageList.js.map

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

@@ -5,7 +5,9 @@ export declare const LanguageTitle: import("styled-components").StyledComponent<
 }, 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 LanguageListContainer: import("styled-components").StyledComponent<"div", any, {
+    $justifyContent?: string;
+}, never>;
 export declare const LanguageListItem: import("styled-components").StyledComponent<"button", any, {
     active: boolean;
 }, never>;

package/lib/components/Language/styled.js

@@ -3,10 +3,16 @@
   justify-content: space-between;
   align-items: center;
 `,exports.LanguageTitle=styled_components_1.default.span`
+  max-width: 150px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  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)"};
 `,exports.LanguageTitleContainer=styled_components_1.default.span`
+  width: 100%;
   display: inherit;
   gap: inherit;
   flex-direction: inherit;
@@ -22,7 +28,7 @@
   overflow: hidden;
 `,exports.LanguageListContainer=styled_components_1.default.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: ${({$justifyContent:e="start"})=>e};
   align-items: center;
   width: 100%;
 `,exports.LanguageListItem=styled_components_1.default.button`

package/lib/components/PropertyDetails/PropertyDetails.js

@@ -1,4 +1,5 @@
 "use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PropertyDetails=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),Schema_1=require("../Schema"),FieldDetails_1=require("./FieldDetails"),LinkToField_1=require("../common/LinkToField");function PropertyDetailsComponent({field:e,skipWriteOnly:i,skipReadOnly:r,level:t=1,showTitle:s,renderDiscriminatorSwitch:a,isFirst:n,fieldParentsName:o,disableDeepLinks:l,oneOfLevel:d}){const p=l?void 0:(0,LinkToField_1.generateDeepLink)(e),m=!e.schema.isPrimitive&&!e.schema.isCircular;return(0,jsx_runtime_1.jsxs)(Wrapper,{isFist:n,expanded:m,className:"property",children:[(0,jsx_runtime_1.jsx)(FieldDetails_1.FieldDetails,{field:e,renderDiscriminatorSwitch:a,deepLink:p,fieldParentsName:o}),m&&(0,jsx_runtime_1.jsx)(Schema_1.Schema,{schema:e.schema,skipReadOnly:r,skipWriteOnly:i,showTitle:s,expandable:!0,level:t+1,fieldParentsName:[...o||[],e.name],deepLink:p,required:e.required,disableDeepLinks:l,oneOfLevel:d})]})}exports.PropertyDetails=(0,react_1.memo)(PropertyDetailsComponent);const Wrapper=styled_components_1.default.div`
+  width: 100%;
   padding: ${({isFist:e})=>`var(--schema-${e?"fist-":""}property-details-spacing)`} 0
     ${({expanded:e})=>e?0:"var(--schema-property-details-spacing)"};
   ${({expanded:e})=>!e&&"border-bottom: 1px solid var(--border-color-primary)"};

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

@@ -1,2 +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,{})]});
+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,title:o.title,children:o.title})]}),c&&n&&_jsx(CheckmarkIcon,{})]});
 //# sourceMappingURL=LanguageItem.js.map

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

@@ -1,2 +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{DROPDOWN_TRIGGER_WIDTH,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(((s,i)=>{const r=i===t.length-1&&0===a.length?0:DROPDOWN_TRIGGER_WIDTH;e&&n+ITEM_WIDTH+r<=e?(o.push(s),n+=ITEM_WIDTH):a.push(s)})),{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)}
+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,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{DROPDOWN_TRIGGER_WIDTH,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]);useLayoutEffect((()=>(m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m)})),[r,t]);const g=useMemo((()=>n.length>=5||a.length?"space-between":"start"),[a.length,n.length]);return _jsxs(Container,{ref:i,children:[_jsxs(LanguageListContainer,{$justifyContent:g,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(((s,i)=>{const r=i===t.length-1&&0===a.length?0:DROPDOWN_TRIGGER_WIDTH;e&&n+ITEM_WIDTH+r<=e?(o.push(s),n+=ITEM_WIDTH):a.push(s)})),{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/styled.d.ts

@@ -5,7 +5,9 @@ export declare const LanguageTitle: import("styled-components").StyledComponent<
 }, 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 LanguageListContainer: import("styled-components").StyledComponent<"div", any, {
+    $justifyContent?: string;
+}, never>;
 export declare const LanguageListItem: import("styled-components").StyledComponent<"button", any, {
     active: boolean;
 }, never>;

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

@@ -3,10 +3,16 @@ import styled,{css}from"styled-components";import{Button,DropdownMenuItem}from"@
   justify-content: space-between;
   align-items: center;
 `;export const LanguageTitle=styled.span`
+  max-width: 150px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  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)"};
+  font-weight: ${({active:t})=>t?"var(--font-weight-medium)":"var(--font-weight-regular)"};
 `;export const LanguageTitleContainer=styled.span`
+  width: 100%;
   display: inherit;
   gap: inherit;
   flex-direction: inherit;
@@ -22,7 +28,7 @@ import styled,{css}from"styled-components";import{Button,DropdownMenuItem}from"@
   overflow: hidden;
 `;export const LanguageListContainer=styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: ${({$justifyContent:t="start"})=>t};
   align-items: center;
   width: 100%;
 `;export const LanguageListItem=styled.button`
@@ -36,7 +42,7 @@ import styled,{css}from"styled-components";import{Button,DropdownMenuItem}from"@
   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:t})=>t?"var(--text-color-primary)":"var(--text-color-description)"};
   border-radius: var(--border-radius);
   text-align: center;
   position: relative;
@@ -45,7 +51,7 @@ import styled,{css}from"styled-components";import{Button,DropdownMenuItem}from"@
     color: var(--text-color-primary);
   }
 
-  ${({active:e})=>e&&css`
+  ${({active:t})=>t&&css`
       &::before {
         position: absolute;
         top: -21px;
@@ -63,7 +69,7 @@ import styled,{css}from"styled-components";import{Button,DropdownMenuItem}from"@
   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:t=204})=>t}px;
   fill: var(--menu-content-color-active);
 `;export const DropdownTriggerButton=styled(Button)`
   display: inline-flex;

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

@@ -1,4 +1,5 @@
 import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import styled from"styled-components";import{Schema}from"../Schema";import{FieldDetails}from"./FieldDetails";import{generateDeepLink}from"../common/LinkToField";function PropertyDetailsComponent({field:e,skipWriteOnly:i,skipReadOnly:r,level:s=1,showTitle:t,renderDiscriminatorSwitch:a,isFirst:o,fieldParentsName:n,disableDeepLinks:d,oneOfLevel:p}){const l=d?void 0:generateDeepLink(e),m=!e.schema.isPrimitive&&!e.schema.isCircular;return _jsxs(Wrapper,{isFist:o,expanded:m,className:"property",children:[_jsx(FieldDetails,{field:e,renderDiscriminatorSwitch:a,deepLink:l,fieldParentsName:n}),m&&_jsx(Schema,{schema:e.schema,skipReadOnly:r,skipWriteOnly:i,showTitle:t,expandable:!0,level:s+1,fieldParentsName:[...n||[],e.name],deepLink:l,required:e.required,disableDeepLinks:d,oneOfLevel:p})]})}export const PropertyDetails=memo(PropertyDetailsComponent);const Wrapper=styled.div`
+  width: 100%;
   padding: ${({isFist:e})=>`var(--schema-${e?"fist-":""}property-details-spacing)`} 0
     ${({expanded:e})=>e?0:"var(--schema-property-details-spacing)"};
   ${({expanded:e})=>!e&&"border-bottom: 1px solid var(--border-color-primary)"};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/openapi-docs",
-  "version": "3.4.17",
+  "version": "3.4.18",
   "description": "Redocly OpenAPI Docs",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -45,7 +45,7 @@
     "url-template": "^2.0.8",
     "util": "~0.12.5",
     "@redocly/config": "0.16.0",
-    "@redocly/replay": "0.7.11"
+    "@redocly/replay": "0.7.12"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.1.5",
@@ -93,7 +93,7 @@
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",
-    "@redocly/theme": "0.45.4"
+    "@redocly/theme": "0.45.5"
   },
   "scripts": {
     "start": "webpack serve --mode=development --hot",