@redocly/openapi-docs 3.2.1 → 3.2.2

package/lib/components/PropertyDetails/FieldDetail.js

@@ -1,4 +1,4 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FieldDetail=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),common_1=require("../common"),Markdown_1=require("../Markdown");function FieldDetailComponent({value:e,label:r,raw:t}){if(void 0===e)return null;const n=t?String(e):JSON.stringify(e);return(0,jsx_runtime_1.jsxs)(Wrapper,{children:[(0,jsx_runtime_1.jsxs)(common_1.FieldLabel,{children:[" ",r," "]}),"Default"===r?(0,jsx_runtime_1.jsx)(common_1.DefaultValue,{children:n}):"Example:"===r?(0,jsx_runtime_1.jsx)(common_1.ExampleValue,{children:(0,jsx_runtime_1.jsx)(Markdown_1.Markdown,{source:n})}):(0,jsx_runtime_1.jsx)(common_1.FieldValueLabel,{children:n})]})}exports.FieldDetail=(0,react_1.memo)(FieldDetailComponent);const Wrapper=styled_components_1.default.div`
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FieldDetail=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),common_1=require("../common");function FieldDetailComponent({value:e,label:t,raw:r}){if(void 0===e)return null;const i=r?String(e):JSON.stringify(e);return(0,jsx_runtime_1.jsxs)(Wrapper,{children:[(0,jsx_runtime_1.jsxs)(common_1.FieldLabel,{children:[" ",t," "]}),"Default"===t?(0,jsx_runtime_1.jsx)(common_1.DefaultValue,{children:i}):"Example:"===t?(0,jsx_runtime_1.jsx)(common_1.ExpandableExample,{value:i}):(0,jsx_runtime_1.jsx)(common_1.FieldValueLabel,{children:i})]})}exports.FieldDetail=(0,react_1.memo)(FieldDetailComponent);const Wrapper=styled_components_1.default.div`
   margin-top: var(--spacing-xxs);
   display: flex;
   align-items: baseline;

package/lib/components/common/ExpandableExample/ExpandableExample.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+export interface ExpandableExampleProps {
+    value: string;
+}
+export declare function ExpandableExample({ value }: ExpandableExampleProps): ReactElement | null;

package/lib/components/common/ExpandableExample/ExpandableExample.js

@@ -0,0 +1,10 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ExpandableExample=void 0;const jsx_runtime_1=require("react/jsx-runtime"),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme"),Markdown_1=require("../../Markdown"),Fields_1=require("../Fields"),hooks_1=require("../../../hooks");function ExpandableExample({value:e}){const{displayText:n,containerRef:t,toggleExpand:r,expanded:a}=(0,hooks_1.useExpandableField)({value:e});return(0,jsx_runtime_1.jsxs)(Container,{ref:t,children:[(0,jsx_runtime_1.jsx)(Markdown_1.Markdown,{source:n}),(e!==n||a)&&(0,jsx_runtime_1.jsx)(ButtonWrap,{children:(0,jsx_runtime_1.jsx)(theme_1.Button,{variant:"link",size:"small",onClick:r,children:a?"Hide example":"Show example"})})]})}exports.ExpandableExample=ExpandableExample;const Container=(0,styled_components_1.default)(Fields_1.ExampleValue)`
+  display: inline;
+
+  & * {
+    display: inline;
+  }
+`,ButtonWrap=styled_components_1.default.span`
+  margin-left: var(--spacing-xs);
+`;
+//# sourceMappingURL=ExpandableExample.js.map

package/lib/components/common/ExpandableExample/index.d.ts

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

package/lib/components/common/ExpandableExample/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ExpandableExample=void 0;var ExpandableExample_1=require("./ExpandableExample");Object.defineProperty(exports,"ExpandableExample",{enumerable:!0,get:function(){return ExpandableExample_1.ExpandableExample}});
+//# sourceMappingURL=index.js.map

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

@@ -5,6 +5,7 @@ export { deprecatedCss } from './mixins';
 export { Container, HttpVerb, MimeLabel } from './styled';
 export { CodeBlockPanel } from './CodeBlockPanel';
 export { CustomBadges, StyledBadge, NavigationBadge } from './Badges';
+export { ExpandableExample } from './ExpandableExample';
 export * from './Fields';
 export * from './panels';
 export { FieldsGroupHeader } from './headers';

package/lib/components/common/index.js

@@ -1,2 +1,2 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,n){void 0===n&&(n=t);var o=Object.getOwnPropertyDescriptor(r,t);o&&!("get"in o?!r.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,n,o)}:function(e,r,t,n){void 0===n&&(n=t),e[n]=r[t]}),__exportStar=this&&this.__exportStar||function(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||__createBinding(r,e,t)};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Skeleton=exports.Link=exports.ShareLink=exports.FieldsGroupHeader=exports.NavigationBadge=exports.StyledBadge=exports.CustomBadges=exports.CodeBlockPanel=exports.MimeLabel=exports.HttpVerb=exports.Container=exports.deprecatedCss=exports.ShareLinkToField=exports.Select=void 0;var Select_1=require("./Select");Object.defineProperty(exports,"Select",{enumerable:!0,get:function(){return Select_1.Select}});var LinkToField_1=require("./LinkToField");Object.defineProperty(exports,"ShareLinkToField",{enumerable:!0,get:function(){return LinkToField_1.ShareLinkToField}});var mixins_1=require("./mixins");Object.defineProperty(exports,"deprecatedCss",{enumerable:!0,get:function(){return mixins_1.deprecatedCss}});var styled_1=require("./styled");Object.defineProperty(exports,"Container",{enumerable:!0,get:function(){return styled_1.Container}}),Object.defineProperty(exports,"HttpVerb",{enumerable:!0,get:function(){return styled_1.HttpVerb}}),Object.defineProperty(exports,"MimeLabel",{enumerable:!0,get:function(){return styled_1.MimeLabel}});var CodeBlockPanel_1=require("./CodeBlockPanel");Object.defineProperty(exports,"CodeBlockPanel",{enumerable:!0,get:function(){return CodeBlockPanel_1.CodeBlockPanel}});var Badges_1=require("./Badges");Object.defineProperty(exports,"CustomBadges",{enumerable:!0,get:function(){return Badges_1.CustomBadges}}),Object.defineProperty(exports,"StyledBadge",{enumerable:!0,get:function(){return Badges_1.StyledBadge}}),Object.defineProperty(exports,"NavigationBadge",{enumerable:!0,get:function(){return Badges_1.NavigationBadge}}),__exportStar(require("./Fields"),exports),__exportStar(require("./panels"),exports);var headers_1=require("./headers");Object.defineProperty(exports,"FieldsGroupHeader",{enumerable:!0,get:function(){return headers_1.FieldsGroupHeader}});var linkify_1=require("./linkify");Object.defineProperty(exports,"ShareLink",{enumerable:!0,get:function(){return linkify_1.ShareLink}}),Object.defineProperty(exports,"Link",{enumerable:!0,get:function(){return linkify_1.Link}}),__exportStar(require("./schema"),exports);var Skeleton_1=require("./Skeleton");Object.defineProperty(exports,"Skeleton",{enumerable:!0,get:function(){return Skeleton_1.Skeleton}});
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,n){void 0===n&&(n=t);var o=Object.getOwnPropertyDescriptor(r,t);o&&!("get"in o?!r.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,n,o)}:function(e,r,t,n){void 0===n&&(n=t),e[n]=r[t]}),__exportStar=this&&this.__exportStar||function(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||__createBinding(r,e,t)};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Skeleton=exports.Link=exports.ShareLink=exports.FieldsGroupHeader=exports.ExpandableExample=exports.NavigationBadge=exports.StyledBadge=exports.CustomBadges=exports.CodeBlockPanel=exports.MimeLabel=exports.HttpVerb=exports.Container=exports.deprecatedCss=exports.ShareLinkToField=exports.Select=void 0;var Select_1=require("./Select");Object.defineProperty(exports,"Select",{enumerable:!0,get:function(){return Select_1.Select}});var LinkToField_1=require("./LinkToField");Object.defineProperty(exports,"ShareLinkToField",{enumerable:!0,get:function(){return LinkToField_1.ShareLinkToField}});var mixins_1=require("./mixins");Object.defineProperty(exports,"deprecatedCss",{enumerable:!0,get:function(){return mixins_1.deprecatedCss}});var styled_1=require("./styled");Object.defineProperty(exports,"Container",{enumerable:!0,get:function(){return styled_1.Container}}),Object.defineProperty(exports,"HttpVerb",{enumerable:!0,get:function(){return styled_1.HttpVerb}}),Object.defineProperty(exports,"MimeLabel",{enumerable:!0,get:function(){return styled_1.MimeLabel}});var CodeBlockPanel_1=require("./CodeBlockPanel");Object.defineProperty(exports,"CodeBlockPanel",{enumerable:!0,get:function(){return CodeBlockPanel_1.CodeBlockPanel}});var Badges_1=require("./Badges");Object.defineProperty(exports,"CustomBadges",{enumerable:!0,get:function(){return Badges_1.CustomBadges}}),Object.defineProperty(exports,"StyledBadge",{enumerable:!0,get:function(){return Badges_1.StyledBadge}}),Object.defineProperty(exports,"NavigationBadge",{enumerable:!0,get:function(){return Badges_1.NavigationBadge}});var ExpandableExample_1=require("./ExpandableExample");Object.defineProperty(exports,"ExpandableExample",{enumerable:!0,get:function(){return ExpandableExample_1.ExpandableExample}}),__exportStar(require("./Fields"),exports),__exportStar(require("./panels"),exports);var headers_1=require("./headers");Object.defineProperty(exports,"FieldsGroupHeader",{enumerable:!0,get:function(){return headers_1.FieldsGroupHeader}});var linkify_1=require("./linkify");Object.defineProperty(exports,"ShareLink",{enumerable:!0,get:function(){return linkify_1.ShareLink}}),Object.defineProperty(exports,"Link",{enumerable:!0,get:function(){return linkify_1.Link}}),__exportStar(require("./schema"),exports);var Skeleton_1=require("./Skeleton");Object.defineProperty(exports,"Skeleton",{enumerable:!0,get:function(){return Skeleton_1.Skeleton}});
 //# sourceMappingURL=index.js.map

package/lib/hooks/_tests_/useExpandableField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/hooks/_tests_/useExpandableField.test.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const react_hooks_1=require("@testing-library/react-hooks"),useExpandableField_1=require("../useExpandableField");jest.mock("../../utils",(()=>({calculateAvgCharacterWidth:jest.fn((()=>10))}))),describe("useExpandableField",(()=>{const e="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";it("should truncate text correctly when not expanded",(()=>{const{result:t}=(0,react_hooks_1.renderHook)((()=>(0,useExpandableField_1.useExpandableField)({value:e,lines:2})));t.current.containerRef.current={parentElement:{getBoundingClientRect:()=>({width:100})}},(0,react_hooks_1.act)((()=>{t.current.toggleExpand()})),(0,react_hooks_1.act)((()=>{t.current.toggleExpand()})),expect(t.current.displayText.length).toBeLessThanOrEqual(23)})),it("should show full text when expanded",(()=>{const{result:t}=(0,react_hooks_1.renderHook)((()=>(0,useExpandableField_1.useExpandableField)({value:e,lines:2})));t.current.containerRef.current={parentElement:{getBoundingClientRect:()=>({width:100})}},(0,react_hooks_1.act)((()=>{t.current.toggleExpand()})),expect(t.current.displayText).toEqual(e)})),it("should toggle expanded state correctly",(()=>{const{result:t}=(0,react_hooks_1.renderHook)((()=>(0,useExpandableField_1.useExpandableField)({value:e,lines:2})));expect(t.current.expanded).toBe(!1),(0,react_hooks_1.act)((()=>{t.current.toggleExpand()})),expect(t.current.expanded).toBe(!0),(0,react_hooks_1.act)((()=>{t.current.toggleExpand()})),expect(t.current.expanded).toBe(!1)}))}));
+//# sourceMappingURL=useExpandableField.test.js.map

package/lib/hooks/index.d.ts

@@ -5,3 +5,4 @@ export { useRouter } from './useRouter';
 export { useContentItems } from './useContentItems';
 export { useActiveWithFallback } from './useActiveWithFallback';
 export { useUppercase2LowercaseRedirect } from './useUppercase2LowercaseRedirect';
+export { useExpandableField } from './useExpandableField';

package/lib/hooks/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useUppercase2LowercaseRedirect=exports.useActiveWithFallback=exports.useContentItems=exports.useRouter=exports.useActivateExample=exports.usePrevious=exports.useDimensions=void 0;var useDimensions_1=require("./useDimensions");Object.defineProperty(exports,"useDimensions",{enumerable:!0,get:function(){return useDimensions_1.useDimensions}});var usePrevious_1=require("./usePrevious");Object.defineProperty(exports,"usePrevious",{enumerable:!0,get:function(){return usePrevious_1.usePrevious}});var useActivateExample_1=require("./useActivateExample");Object.defineProperty(exports,"useActivateExample",{enumerable:!0,get:function(){return useActivateExample_1.useActivateExample}});var useRouter_1=require("./useRouter");Object.defineProperty(exports,"useRouter",{enumerable:!0,get:function(){return useRouter_1.useRouter}});var useContentItems_1=require("./useContentItems");Object.defineProperty(exports,"useContentItems",{enumerable:!0,get:function(){return useContentItems_1.useContentItems}});var useActiveWithFallback_1=require("./useActiveWithFallback");Object.defineProperty(exports,"useActiveWithFallback",{enumerable:!0,get:function(){return useActiveWithFallback_1.useActiveWithFallback}});var useUppercase2LowercaseRedirect_1=require("./useUppercase2LowercaseRedirect");Object.defineProperty(exports,"useUppercase2LowercaseRedirect",{enumerable:!0,get:function(){return useUppercase2LowercaseRedirect_1.useUppercase2LowercaseRedirect}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useExpandableField=exports.useUppercase2LowercaseRedirect=exports.useActiveWithFallback=exports.useContentItems=exports.useRouter=exports.useActivateExample=exports.usePrevious=exports.useDimensions=void 0;var useDimensions_1=require("./useDimensions");Object.defineProperty(exports,"useDimensions",{enumerable:!0,get:function(){return useDimensions_1.useDimensions}});var usePrevious_1=require("./usePrevious");Object.defineProperty(exports,"usePrevious",{enumerable:!0,get:function(){return usePrevious_1.usePrevious}});var useActivateExample_1=require("./useActivateExample");Object.defineProperty(exports,"useActivateExample",{enumerable:!0,get:function(){return useActivateExample_1.useActivateExample}});var useRouter_1=require("./useRouter");Object.defineProperty(exports,"useRouter",{enumerable:!0,get:function(){return useRouter_1.useRouter}});var useContentItems_1=require("./useContentItems");Object.defineProperty(exports,"useContentItems",{enumerable:!0,get:function(){return useContentItems_1.useContentItems}});var useActiveWithFallback_1=require("./useActiveWithFallback");Object.defineProperty(exports,"useActiveWithFallback",{enumerable:!0,get:function(){return useActiveWithFallback_1.useActiveWithFallback}});var useUppercase2LowercaseRedirect_1=require("./useUppercase2LowercaseRedirect");Object.defineProperty(exports,"useUppercase2LowercaseRedirect",{enumerable:!0,get:function(){return useUppercase2LowercaseRedirect_1.useUppercase2LowercaseRedirect}});var useExpandableField_1=require("./useExpandableField");Object.defineProperty(exports,"useExpandableField",{enumerable:!0,get:function(){return useExpandableField_1.useExpandableField}});
 //# sourceMappingURL=index.js.map

package/lib/hooks/useExpandableField.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface UseExpandableFieldProps {
+    value: string;
+    lines?: number;
+}
+export interface UseExpandableFieldResult {
+    expanded: boolean;
+    displayText: string;
+    containerRef: React.RefObject<HTMLDivElement>;
+    toggleExpand: () => void;
+}
+export declare function useExpandableField({ value, lines, }: UseExpandableFieldProps): UseExpandableFieldResult;

package/lib/hooks/useExpandableField.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useExpandableField=void 0;const react_1=require("react"),utils_1=require("../utils");function useExpandableField({value:e,lines:t=2}){const[a,l]=(0,react_1.useState)(!1),n=(0,react_1.useRef)(null),[r,s]=(0,react_1.useState)(e);(0,react_1.useLayoutEffect)((()=>{var l;if(null===(l=n.current)||void 0===l?void 0:l.parentElement){const l=n.current.parentElement,r=l.getBoundingClientRect().width,i=(0,utils_1.calculateAvgCharacterWidth)(l),c=Math.floor(r/i);if(a)s(e);else{const a=u(e,c*t);s(a)}}}),[n,a,t,e]);const u=(e,t)=>e.length<=t?e:`${e.slice(0,t)}...`;return{expanded:a,displayText:r,containerRef:n,toggleExpand:()=>{l((e=>!e))}}}exports.useExpandableField=useExpandableField;
+//# sourceMappingURL=useExpandableField.js.map

package/lib/utils/calculateAvgCharacterWidth.d.ts

@@ -0,0 +1 @@
+export declare function calculateAvgCharacterWidth(parentElement: HTMLElement): number;

package/lib/utils/calculateAvgCharacterWidth.js

@@ -0,0 +1,2 @@
+"use strict";function calculateAvgCharacterWidth(t){const e=document.createElement("span");e.style.visibility="hidden",e.style.whiteSpace="nowrap",e.textContent="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",t.appendChild(e);const a=e.getBoundingClientRect().width/e.textContent.length;return t.removeChild(e),a}Object.defineProperty(exports,"__esModule",{value:!0}),exports.calculateAvgCharacterWidth=void 0,exports.calculateAvgCharacterWidth=calculateAvgCharacterWidth;
+//# sourceMappingURL=calculateAvgCharacterWidth.js.map

package/lib/utils/index.d.ts

@@ -21,3 +21,4 @@ export * from './queryString';
 export * from './isMobile';
 export * from './replaceVariables';
 export * from './areArraysEqual';
+export * from './calculateAvgCharacterWidth';

package/lib/utils/index.js

@@ -1,2 +1,2 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,o){void 0===o&&(o=t);var p=Object.getOwnPropertyDescriptor(r,t);p&&!("get"in p?!r.__esModule:p.writable||p.configurable)||(p={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,o,p)}:function(e,r,t,o){void 0===o&&(o=t),e[o]=r[t]}),__exportStar=this&&this.__exportStar||function(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||__createBinding(r,e,t)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./JsonPointer"),exports),__exportStar(require("./openapi"),exports),__exportStar(require("./helpers"),exports),__exportStar(require("./highlight"),exports),__exportStar(require("./dom"),exports),__exportStar(require("./debug"),exports),__exportStar(require("./sort"),exports),__exportStar(require("./argValuesHelpers"),exports),__exportStar(require("./theme-helpers"),exports),__exportStar(require("./debounce"),exports),__exportStar(require("./security-details"),exports),__exportStar(require("./session-storage"),exports),__exportStar(require("./local-storage"),exports),__exportStar(require("./parameters"),exports),__exportStar(require("./string"),exports),__exportStar(require("./test-utils"),exports),__exportStar(require("./compose"),exports),__exportStar(require("./saveTextBeforeHeading"),exports),__exportStar(require("./path"),exports),__exportStar(require("./queryString"),exports),__exportStar(require("./isMobile"),exports),__exportStar(require("./replaceVariables"),exports),__exportStar(require("./areArraysEqual"),exports);
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,o){void 0===o&&(o=t);var p=Object.getOwnPropertyDescriptor(r,t);p&&!("get"in p?!r.__esModule:p.writable||p.configurable)||(p={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,o,p)}:function(e,r,t,o){void 0===o&&(o=t),e[o]=r[t]}),__exportStar=this&&this.__exportStar||function(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||__createBinding(r,e,t)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./JsonPointer"),exports),__exportStar(require("./openapi"),exports),__exportStar(require("./helpers"),exports),__exportStar(require("./highlight"),exports),__exportStar(require("./dom"),exports),__exportStar(require("./debug"),exports),__exportStar(require("./sort"),exports),__exportStar(require("./argValuesHelpers"),exports),__exportStar(require("./theme-helpers"),exports),__exportStar(require("./debounce"),exports),__exportStar(require("./security-details"),exports),__exportStar(require("./session-storage"),exports),__exportStar(require("./local-storage"),exports),__exportStar(require("./parameters"),exports),__exportStar(require("./string"),exports),__exportStar(require("./test-utils"),exports),__exportStar(require("./compose"),exports),__exportStar(require("./saveTextBeforeHeading"),exports),__exportStar(require("./path"),exports),__exportStar(require("./queryString"),exports),__exportStar(require("./isMobile"),exports),__exportStar(require("./replaceVariables"),exports),__exportStar(require("./areArraysEqual"),exports),__exportStar(require("./calculateAvgCharacterWidth"),exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,4 +1,4 @@
-import{jsxs as _jsxs,jsx as _jsx}from"react/jsx-runtime";import{memo}from"react";import styled from"styled-components";import{ExampleValue,FieldLabel,DefaultValue,FieldValueLabel}from"../common";import{Markdown}from"../Markdown";function FieldDetailComponent({value:e,label:l,raw:a}){if(void 0===e)return null;const r=a?String(e):JSON.stringify(e);return _jsxs(Wrapper,{children:[_jsxs(FieldLabel,{children:[" ",l," "]}),"Default"===l?_jsx(DefaultValue,{children:r}):"Example:"===l?_jsx(ExampleValue,{children:_jsx(Markdown,{source:r})}):_jsx(FieldValueLabel,{children:r})]})}export const FieldDetail=memo(FieldDetailComponent);const Wrapper=styled.div`
+import{jsxs as _jsxs,jsx as _jsx}from"react/jsx-runtime";import{memo}from"react";import styled from"styled-components";import{FieldLabel,DefaultValue,FieldValueLabel,ExpandableExample}from"../common";function FieldDetailComponent({value:e,label:l,raw:a}){if(void 0===e)return null;const i=a?String(e):JSON.stringify(e);return _jsxs(Wrapper,{children:[_jsxs(FieldLabel,{children:[" ",l," "]}),"Default"===l?_jsx(DefaultValue,{children:i}):"Example:"===l?_jsx(ExpandableExample,{value:i}):_jsx(FieldValueLabel,{children:i})]})}export const FieldDetail=memo(FieldDetailComponent);const Wrapper=styled.div`
   margin-top: var(--spacing-xxs);
   display: flex;
   align-items: baseline;

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

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+export interface ExpandableExampleProps {
+    value: string;
+}
+export declare function ExpandableExample({ value }: ExpandableExampleProps): ReactElement | null;

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

@@ -0,0 +1,10 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{Button}from"@redocly/theme";import{Markdown}from"../../Markdown";import{ExampleValue}from"../Fields";import{useExpandableField}from"../../../hooks";export function ExpandableExample({value:e}){const{displayText:n,containerRef:a,toggleExpand:o,expanded:l}=useExpandableField({value:e});return _jsxs(Container,{ref:a,children:[_jsx(Markdown,{source:n}),(e!==n||l)&&_jsx(ButtonWrap,{children:_jsx(Button,{variant:"link",size:"small",onClick:o,children:l?"Hide example":"Show example"})})]})}const Container=styled(ExampleValue)`
+  display: inline;
+
+  & * {
+    display: inline;
+  }
+`,ButtonWrap=styled.span`
+  margin-left: var(--spacing-xs);
+`;
+//# sourceMappingURL=ExpandableExample.js.map

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

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

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

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

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

@@ -5,6 +5,7 @@ export { deprecatedCss } from './mixins';
 export { Container, HttpVerb, MimeLabel } from './styled';
 export { CodeBlockPanel } from './CodeBlockPanel';
 export { CustomBadges, StyledBadge, NavigationBadge } from './Badges';
+export { ExpandableExample } from './ExpandableExample';
 export * from './Fields';
 export * from './panels';
 export { FieldsGroupHeader } from './headers';

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

@@ -1,2 +1,2 @@
-export{Select}from"./Select";export{ShareLinkToField}from"./LinkToField";export{deprecatedCss}from"./mixins";export{Container,HttpVerb,MimeLabel}from"./styled";export{CodeBlockPanel}from"./CodeBlockPanel";export{CustomBadges,StyledBadge,NavigationBadge}from"./Badges";export*from"./Fields";export*from"./panels";export{FieldsGroupHeader}from"./headers";export{ShareLink,Link}from"./linkify";export*from"./schema";export{Skeleton}from"./Skeleton";
+export{Select}from"./Select";export{ShareLinkToField}from"./LinkToField";export{deprecatedCss}from"./mixins";export{Container,HttpVerb,MimeLabel}from"./styled";export{CodeBlockPanel}from"./CodeBlockPanel";export{CustomBadges,StyledBadge,NavigationBadge}from"./Badges";export{ExpandableExample}from"./ExpandableExample";export*from"./Fields";export*from"./panels";export{FieldsGroupHeader}from"./headers";export{ShareLink,Link}from"./linkify";export*from"./schema";export{Skeleton}from"./Skeleton";
 //# sourceMappingURL=index.js.map

package/lib-esm/hooks/_tests_/useExpandableField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-esm/hooks/_tests_/useExpandableField.test.js

@@ -0,0 +1,2 @@
+import{renderHook,act}from"@testing-library/react-hooks";import{useExpandableField}from"../useExpandableField";jest.mock("../../utils",(()=>({calculateAvgCharacterWidth:jest.fn((()=>10))}))),describe("useExpandableField",(()=>{const e="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";it("should truncate text correctly when not expanded",(()=>{const{result:t}=renderHook((()=>useExpandableField({value:e,lines:2})));t.current.containerRef.current={parentElement:{getBoundingClientRect:()=>({width:100})}},act((()=>{t.current.toggleExpand()})),act((()=>{t.current.toggleExpand()})),expect(t.current.displayText.length).toBeLessThanOrEqual(23)})),it("should show full text when expanded",(()=>{const{result:t}=renderHook((()=>useExpandableField({value:e,lines:2})));t.current.containerRef.current={parentElement:{getBoundingClientRect:()=>({width:100})}},act((()=>{t.current.toggleExpand()})),expect(t.current.displayText).toEqual(e)})),it("should toggle expanded state correctly",(()=>{const{result:t}=renderHook((()=>useExpandableField({value:e,lines:2})));expect(t.current.expanded).toBe(!1),act((()=>{t.current.toggleExpand()})),expect(t.current.expanded).toBe(!0),act((()=>{t.current.toggleExpand()})),expect(t.current.expanded).toBe(!1)}))}));
+//# sourceMappingURL=useExpandableField.test.js.map

package/lib-esm/hooks/index.d.ts

@@ -5,3 +5,4 @@ export { useRouter } from './useRouter';
 export { useContentItems } from './useContentItems';
 export { useActiveWithFallback } from './useActiveWithFallback';
 export { useUppercase2LowercaseRedirect } from './useUppercase2LowercaseRedirect';
+export { useExpandableField } from './useExpandableField';

package/lib-esm/hooks/index.js

@@ -1,2 +1,2 @@
-export{useDimensions}from"./useDimensions";export{usePrevious}from"./usePrevious";export{useActivateExample}from"./useActivateExample";export{useRouter}from"./useRouter";export{useContentItems}from"./useContentItems";export{useActiveWithFallback}from"./useActiveWithFallback";export{useUppercase2LowercaseRedirect}from"./useUppercase2LowercaseRedirect";
+export{useDimensions}from"./useDimensions";export{usePrevious}from"./usePrevious";export{useActivateExample}from"./useActivateExample";export{useRouter}from"./useRouter";export{useContentItems}from"./useContentItems";export{useActiveWithFallback}from"./useActiveWithFallback";export{useUppercase2LowercaseRedirect}from"./useUppercase2LowercaseRedirect";export{useExpandableField}from"./useExpandableField";
 //# sourceMappingURL=index.js.map

package/lib-esm/hooks/useExpandableField.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface UseExpandableFieldProps {
+    value: string;
+    lines?: number;
+}
+export interface UseExpandableFieldResult {
+    expanded: boolean;
+    displayText: string;
+    containerRef: React.RefObject<HTMLDivElement>;
+    toggleExpand: () => void;
+}
+export declare function useExpandableField({ value, lines, }: UseExpandableFieldProps): UseExpandableFieldResult;

package/lib-esm/hooks/useExpandableField.js

@@ -0,0 +1,2 @@
+import{useState,useRef,useLayoutEffect}from"react";import{calculateAvgCharacterWidth}from"../utils";export function useExpandableField({value:e,lines:t=2}){const[a,n]=useState(!1),l=useRef(null),[r,u]=useState(e);useLayoutEffect((()=>{var n;if(null===(n=l.current)||void 0===n?void 0:n.parentElement){const n=l.current.parentElement,r=n.getBoundingClientRect().width,o=calculateAvgCharacterWidth(n),i=Math.floor(r/o);if(a)u(e);else{const a=c(e,i*t);u(a)}}}),[l,a,t,e]);const c=(e,t)=>e.length<=t?e:`${e.slice(0,t)}...`;return{expanded:a,displayText:r,containerRef:l,toggleExpand:()=>{n((e=>!e))}}}
+//# sourceMappingURL=useExpandableField.js.map

package/lib-esm/utils/calculateAvgCharacterWidth.d.ts

@@ -0,0 +1 @@
+export declare function calculateAvgCharacterWidth(parentElement: HTMLElement): number;

package/lib-esm/utils/calculateAvgCharacterWidth.js

@@ -0,0 +1,2 @@
+export function calculateAvgCharacterWidth(t){const e=document.createElement("span");e.style.visibility="hidden",e.style.whiteSpace="nowrap",e.textContent="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",t.appendChild(e);const n=e.getBoundingClientRect().width/e.textContent.length;return t.removeChild(e),n}
+//# sourceMappingURL=calculateAvgCharacterWidth.js.map

package/lib-esm/utils/index.d.ts

@@ -21,3 +21,4 @@ export * from './queryString';
 export * from './isMobile';
 export * from './replaceVariables';
 export * from './areArraysEqual';
+export * from './calculateAvgCharacterWidth';

package/lib-esm/utils/index.js

@@ -1,2 +1,2 @@
-export*from"./JsonPointer";export*from"./openapi";export*from"./helpers";export*from"./highlight";export*from"./dom";export*from"./debug";export*from"./sort";export*from"./argValuesHelpers";export*from"./theme-helpers";export*from"./debounce";export*from"./security-details";export*from"./session-storage";export*from"./local-storage";export*from"./parameters";export*from"./string";export*from"./test-utils";export*from"./compose";export*from"./saveTextBeforeHeading";export*from"./path";export*from"./queryString";export*from"./isMobile";export*from"./replaceVariables";export*from"./areArraysEqual";
+export*from"./JsonPointer";export*from"./openapi";export*from"./helpers";export*from"./highlight";export*from"./dom";export*from"./debug";export*from"./sort";export*from"./argValuesHelpers";export*from"./theme-helpers";export*from"./debounce";export*from"./security-details";export*from"./session-storage";export*from"./local-storage";export*from"./parameters";export*from"./string";export*from"./test-utils";export*from"./compose";export*from"./saveTextBeforeHeading";export*from"./path";export*from"./queryString";export*from"./isMobile";export*from"./replaceVariables";export*from"./areArraysEqual";export*from"./calculateAvgCharacterWidth";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/openapi-docs",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Redocly OpenAPI Docs",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@markdoc/markdoc": "0.4.0",
-    "@redocly/openapi-core": "1.12.2",
+    "@redocly/openapi-core": "1.17.1",
     "deepmerge": "^4.2.2",
     "dompurify": "^2.0.12",
     "fast-deep-equal": "^3.1.3",
@@ -44,12 +44,13 @@
     "url": "~0.11.0",
     "url-template": "^2.0.8",
     "util": "~0.12.5",
-    "@redocly/replay": "0.3.5",
+    "@redocly/replay": "0.3.6",
     "@redocly/config": "0.6.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "14.5.1",
     "@types/dompurify": "2.4.0",
     "@types/jest": "29.5.11",
@@ -91,7 +92,7 @@
     "webpack": "5.91.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.2",
-    "@redocly/theme": "0.38.1"
+    "@redocly/theme": "0.38.2"
   },
   "scripts": {
     "start": "webpack serve --mode=development --hot",