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

package/lib/components/PanelItem/styled.js

@@ -1,32 +1,39 @@
-import{CheckmarkIcon as o}from"@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon";import{styled as t}from"../../styled-components.js";const r=t.span`
+import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
+import { styled } from '../../styled-components.js';
+export const PanelItemWrap = styled.span `
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0;
   position: relative;
   width: 100%;
-`,a=t.span`
+`;
+export const Item = styled.span `
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   overflow: hidden;
-`,s=t.span`
+`;
+export const Header = styled.span `
   text-align: left;
   color: var(--menu-content-title-color);
   font-size: var(--h6-font-size);
   line-height: var(--line-height-xsm);
-`,l=t.p`
+`;
+export const Title = styled.p `
   margin: 0;
   color: var(--text-color-secondary);
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: ${({active:e})=>e&&"var(--font-weight-medium)"};
-`,p=t.div`
+  font-weight: ${({ active }) => active && 'var(--font-weight-medium)'};
+`;
+export const ActionsWrap = styled.div `
   display: flex;
   gap: var(--spacing-xs);
-`,c=t.div`
+`;
+export const PanelItemsList = styled.div `
   & > span {
     border-bottom: 1px solid var(--border-color-secondary);
     margin-bottom: var(--spacing-xs);
@@ -38,15 +45,18 @@ import{CheckmarkIcon as o}from"@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon"
     margin-bottom: 0;
     padding-bottom: 0;
   }
-`,d=t.span`
+`;
+export const PanelItemDescription = styled.span `
   color: var(--text-color-secondary);
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   font-weight: var(--font-weight-medium);
-`,m=t(o)`
+`;
+export const StyledCheckmarkIcon = styled(CheckmarkIcon) `
   width: 14px;
   height: 14px;
   position: absolute;
   left: -18px;
   bottom: 3px;
-`;export{p as ActionsWrap,s as Header,a as Item,d as PanelItemDescription,r as PanelItemWrap,c as PanelItemsList,m as StyledCheckmarkIcon,l as Title};
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/PayloadSamples/Example.js

@@ -1 +1,6 @@
-import{jsx as l}from"react/jsx-runtime";import{ExampleValue as m}from"./ExampleValue.js";function p({example:o,mimeType:e,onCopyClick:n,onPanelToggle:i}){return l(m,{value:o.value,mimeType:e,encoding:o.encoding,onCopyClick:n,onPanelToggle:i})}export{p as Example};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ExampleValue } from './ExampleValue.js';
+export function Example({ example, mimeType, onCopyClick, onPanelToggle, }) {
+    return (_jsx(ExampleValue, { value: example.value, mimeType: mimeType, encoding: example.encoding, onCopyClick: onCopyClick, onPanelToggle: onPanelToggle }));
+}
+//# sourceMappingURL=Example.js.map

package/lib/components/PayloadSamples/ExampleValue.js

@@ -1 +1,30 @@
-import{jsx as n}from"react/jsx-runtime";import{useAtomValue as i}from"jotai";import{JsonViewer as m}from"@redocly/theme/components/JsonViewer/JsonViewer";import{isFormUrlEncoded as a,isJsonLike as c,langFromMime as d,urlFormEncodePayload as f}from"../../utils/index.js";import{globalOptionsAtom as p}from"../../jotai/store.js";import{StyledCodeBlock as g}from"./styled.js";function y({value:o,mimeType:r,encoding:t,onCopyClick:e,onPanelToggle:l}){const{jsonSamplesExpandLevel:s}=i(p);return c(r)?n(m,{data:o,expandLevel:s,onCopyClick:e,onPanelToggle:l}):(typeof o=="object"&&(a(r)?o=f(o,t):o=JSON.stringify(o,null,2)),n(g,{lang:d(r),source:o,header:{className:"code-block-header",controls:{copy:{onClick:e}}}}))}export{y as ExampleValue};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAtomValue } from 'jotai';
+import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
+import { isFormUrlEncoded, isJsonLike, langFromMime, urlFormEncodePayload, } from '../../utils/index.js';
+import { globalOptionsAtom } from '../../jotai/store.js';
+import { StyledCodeBlock } from './styled.js';
+export function ExampleValue({ value, mimeType, encoding, onCopyClick, onPanelToggle, }) {
+    const { jsonSamplesExpandLevel } = useAtomValue(globalOptionsAtom);
+    if (isJsonLike(mimeType)) {
+        return (_jsx(JsonViewer, { data: value, expandLevel: jsonSamplesExpandLevel, onCopyClick: onCopyClick, onPanelToggle: onPanelToggle }));
+    }
+    if (typeof value === 'object') {
+        if (isFormUrlEncoded(mimeType)) {
+            value = urlFormEncodePayload(value, encoding);
+        }
+        else {
+            // just in case example was cached as json but used as non-json
+            value = JSON.stringify(value, null, 2);
+        }
+    }
+    return (_jsx(StyledCodeBlock, { lang: langFromMime(mimeType), source: value, header: {
+            className: 'code-block-header',
+            controls: {
+                copy: {
+                    onClick: onCopyClick,
+                },
+            },
+        } }));
+}
+//# sourceMappingURL=ExampleValue.js.map

package/lib/components/PayloadSamples/MediaTypeSamples.js

@@ -1,3 +1,37 @@
-import{jsx as r,Fragment as f,jsxs as y}from"react/jsx-runtime";import{memo as d}from"react";import u from"deepmerge";import{Markdown as h}from"../Markdown/index.js";import{Example as j}from"./Example.js";import{ExampleSwitch as k,useExampleKey as E}from"../Samples/index.js";import{arrayMergeStrategy as M}from"../../services/utils.js";import{StyledCodeBlock as S}from"./styled.js";import{useTranslate as v}from"../../hooks/index.js";import{styled as C}from"../../styled-components.js";function K({mediaType:o,properties:a,onChange:l,onCopyClick:c,onPanelToggle:i}){const e=o.examples||o.formExamples||{},x=o.name,s=Object.keys(e),g=v(),{exampleKey:n}=E(o.operation,e),m=s.length===1?Object.values(e)[0]:e[n];if(!s.length)return r(S,{lang:"clike",source:g("openapi.noResponseExample","No response example"),header:{controls:!1}});const t=a?{...m,value:u(m.value,a,{arrayMerge:M})}:m,p=t.description;return y(f,{children:[r(k,{examples:e,exampleKey:n,onChange:l}),p&&r(w,{source:p}),r(j,{example:t,mimeType:x,onCopyClick:c,onPanelToggle:i})]})}const w=C(h)`
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import merge from 'deepmerge';
+import { Markdown } from '../Markdown/index.js';
+import { Example } from './Example.js';
+import { ExampleSwitch, useExampleKey } from '../Samples/index.js';
+import { arrayMergeStrategy } from '../../services/utils.js';
+import { StyledCodeBlock } from './styled.js';
+import { useTranslate } from '../../hooks/index.js';
+import { styled } from '../../styled-components.js';
+function MediaTypeSamplesComponent({ mediaType, properties, onChange, onCopyClick, onPanelToggle, }) {
+    const examples = mediaType.examples || mediaType.formExamples || {};
+    const mimeType = mediaType.name;
+    const examplesKeys = Object.keys(examples);
+    const translate = useTranslate();
+    const { exampleKey } = useExampleKey(mediaType.operation, examples);
+    const example = examplesKeys.length === 1 ? Object.values(examples)[0] : examples[exampleKey];
+    if (!examplesKeys.length) {
+        return (_jsx(StyledCodeBlock, { lang: "clike", source: translate('openapi.noResponseExample', 'No response example'), header: { controls: false } }));
+    }
+    // properties will be passed in developer portal
+    const mergedExamples = properties
+        ? {
+            ...example,
+            value: merge(example.value, properties, {
+                arrayMerge: arrayMergeStrategy,
+            }),
+        }
+        : example;
+    const description = mergedExamples.description;
+    return (_jsxs(_Fragment, { children: [_jsx(ExampleSwitch, { examples: examples, exampleKey: exampleKey, onChange: onChange }), description && _jsx(StyledMarkdown, { source: description }), _jsx(Example, { example: mergedExamples, mimeType: mimeType, onCopyClick: onCopyClick, onPanelToggle: onPanelToggle })] }));
+}
+const StyledMarkdown = styled(Markdown) `
   margin: 0 var(--spacing-md) var(--spacing-sm);
-`,z=d(K);export{z as MediaTypeSamples};
+`;
+export const MediaTypeSamples = memo(MediaTypeSamplesComponent);
+//# sourceMappingURL=MediaTypeSamples.js.map

package/lib/components/PayloadSamples/PayloadSamples.js

@@ -1 +1,26 @@
-import{jsx as t}from"react/jsx-runtime";import{memo as c,useCallback as d}from"react";import{useAtomValue as u}from"jotai";import{SelectOrLabel as f}from"../SelectOrLabel/index.js";import{MediaTypesSwitch as y}from"../MediaTypeSwitch/index.js";import{MimeLabel as S,Select as h}from"../common/index.js";import{MediaTypeSamples as M}from"./MediaTypeSamples.js";import{SelectWrapper as T,StyledCodeBlock as x}from"./styled.js";import{activeMimeNameAtom as b}from"../../jotai/app.js";import{useActivateExample as v,useTranslate as A}from"../../hooks/index.js";function g({onlyDefaultMimeType:r,content:o,...l}){const m=v(o),n=u(b),a=r&&n,p=A(),s=d(e=>a?null:t(T,{children:t(f,{Label:S,Select:h,variant:"dark",fullWidth:!0,...e})}),[a]),i=e=>m(e);return o?t(y,{content:o,renderSelect:s,children:e=>t(M,{mediaType:e,...l,onChange:i},"samples")}):t(x,{lang:"text",source:p("openapi.noRequestPayload","No request payload"),header:{controls:!1}})}const B=c(g);export{B as PayloadSamples};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { useAtomValue } from 'jotai';
+import { SelectOrLabel } from '../SelectOrLabel/index.js';
+import { MediaTypesSwitch } from '../MediaTypeSwitch/index.js';
+import { MimeLabel, Select } from '../common/index.js';
+import { MediaTypeSamples } from './MediaTypeSamples.js';
+import { SelectWrapper, StyledCodeBlock } from './styled.js';
+import { activeMimeNameAtom } from '../../jotai/app.js';
+import { useActivateExample, useTranslate } from '../../hooks/index.js';
+function PayloadSamplesComponent({ onlyDefaultMimeType, content: mimeContent, ...props }) {
+    const setActivateExampleName = useActivateExample(mimeContent);
+    const defaultMimeType = useAtomValue(activeMimeNameAtom); // we pass defaultMimeType from portal
+    const showDefaultMimeType = onlyDefaultMimeType && defaultMimeType;
+    const translate = useTranslate();
+    const renderSelect = useCallback((props) => {
+        return showDefaultMimeType ? null : (_jsx(SelectWrapper, { children: _jsx(SelectOrLabel, { Label: MimeLabel, Select: Select, variant: "dark", fullWidth: true, ...props }) }));
+    }, [showDefaultMimeType]);
+    const handleMediaTypeChange = (key) => setActivateExampleName(key);
+    if (!mimeContent) {
+        return (_jsx(StyledCodeBlock, { lang: "text", source: translate('openapi.noRequestPayload', 'No request payload'), header: { controls: false } }));
+    }
+    return (_jsx(MediaTypesSwitch, { content: mimeContent, renderSelect: renderSelect, children: (mediaType) => (_jsx(MediaTypeSamples, { mediaType: mediaType, ...props, onChange: handleMediaTypeChange }, "samples")) }));
+}
+export const PayloadSamples = memo(PayloadSamplesComponent);
+//# sourceMappingURL=PayloadSamples.js.map

package/lib/components/PayloadSamples/index.js

@@ -1 +1,7 @@
-import{PayloadSamples as r}from"./PayloadSamples.js";import{Example as m}from"./Example.js";import{ExampleValue as x}from"./ExampleValue.js";import{MediaTypeSamples as l}from"./MediaTypeSamples.js";export*from"./types.js";export*from"./styled.js";export{m as Example,x as ExampleValue,l as MediaTypeSamples,r as PayloadSamples};
+export { PayloadSamples } from './PayloadSamples.js';
+export { Example } from './Example.js';
+export { ExampleValue } from './ExampleValue.js';
+export { MediaTypeSamples } from './MediaTypeSamples.js';
+export * from './types.js';
+export * from './styled.js';
+//# sourceMappingURL=index.js.map

package/lib/components/PayloadSamples/styled.js

@@ -1,4 +1,6 @@
-import{CodeBlock as e}from"@redocly/theme/components/CodeBlock/CodeBlock";import{styled as o}from"../../styled-components.js";const a=o.span`
+import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
+import { styled } from '../../styled-components.js';
+export const SelectLabel = styled.span `
   font-size: 12px;
   position: absolute;
   z-index: 1;
@@ -8,9 +10,11 @@ import{CodeBlock as e}from"@redocly/theme/components/CodeBlock/CodeBlock";import
   color: var(--panel-samples-text-color);
   opacity: 0.7;
   font-family: var(--font-family-base);
-`,i=o.div`
+`;
+export const SelectWrapper = styled.div `
   position: relative;
-`,p=o(e)`
+`;
+export const StyledCodeBlock = styled(CodeBlock) `
   border: none;
   margin: 0;
 
@@ -18,4 +22,5 @@ import{CodeBlock as e}from"@redocly/theme/components/CodeBlock/CodeBlock";import
     border-bottom: 0;
     padding-right: var(--spacing-sm);
   }
-`;export{a as SelectLabel,i as SelectWrapper,p as StyledCodeBlock};
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/PayloadSamples/types.js

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

package/lib/components/PropertyDetails/DescriptionEnums.js

@@ -1,9 +1,25 @@
-import{jsxs as n,jsx as e,Fragment as s}from"react/jsx-runtime";import{memo as a}from"react";import{Markdown as h}from"../Markdown/index.js";import{DescriptionEnumsBlock as u}from"./styled.js";import{ToggleButton as f}from"../common/index.js";import{styled as t}from"../../styled-components.js";const y=t.td`
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Markdown } from '../Markdown/index.js';
+import { DescriptionEnumsBlock } from './styled.js';
+import { ToggleButton } from '../common/index.js';
+import { styled } from '../../styled-components.js';
+const EnumValueStyled = styled.td `
   word-wrap: break-word;
   font-size: var(--md-table-font-size);
-`,g=t.td`
+`;
+const DescriptionValueStyled = styled.td `
   & p,
   p:only-of-type {
     margin: 0;
   }
-`;function x({enums:o,toggle:l,showToggleButton:p,toggleButtonText:c,type:d,translate:r}){return e(s,{children:e(u,{children:n("table",{className:"md",children:[e("thead",{children:n("tr",{children:[n("th",{style:{width:"30%"},children:[d==="array"?r("openapi.items","Items"):""," ",o.length===1?r("openapi.value","Value"):`${r("openapi.enum","Enum")} ${r("openapi.value","Value")}`]}),e("th",{children:r("openapi.description","Description")})]})}),e("tbody",{children:o.map(({description:m,value:i})=>n("tr",{children:[e(y,{children:i}),e(g,{children:e(h,{source:m})})]},i))}),p?e("tfoot",{children:e("tr",{children:e("td",{colSpan:2,children:e(f,{onClick:l,children:c})})})}):null]})})})}const V=a(x);export{V as DescriptionEnums,x as DescriptionEnumsComponent};
+`;
+export function DescriptionEnumsComponent({ enums, toggle, showToggleButton, toggleButtonText, type, translate, }) {
+    return (_jsx(_Fragment, { children: _jsx(DescriptionEnumsBlock, { children: _jsxs("table", { className: "md", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsxs("th", { style: { width: '30%' }, children: [type === 'array' ? translate('openapi.items', 'Items') : '', ' ', enums.length === 1
+                                            ? translate('openapi.value', 'Value')
+                                            : `${translate('openapi.enum', 'Enum')} ${translate('openapi.value', 'Value')}`] }), _jsx("th", { children: translate('openapi.description', 'Description') })] }) }), _jsx("tbody", { children: enums.map(({ description, value }) => {
+                            return (_jsxs("tr", { children: [_jsx(EnumValueStyled, { children: value }), _jsx(DescriptionValueStyled, { children: _jsx(Markdown, { source: description }) })] }, value));
+                        }) }), showToggleButton ? (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { colSpan: 2, children: _jsx(ToggleButton, { onClick: toggle, children: toggleButtonText }) }) }) })) : null] }) }) }));
+}
+export const DescriptionEnums = memo(DescriptionEnumsComponent);
+//# sourceMappingURL=DescriptionEnums.js.map

package/lib/components/PropertyDetails/EnumValues.js

@@ -1 +1,37 @@
-import{jsx as m,Fragment as c}from"react/jsx-runtime";import{useState as f,memo as d,useCallback as h,useMemo as x}from"react";import{useAtomValue as y}from"jotai";import{SimpleEnums as E}from"./SimpleEnums.js";import{DescriptionEnums as T}from"./DescriptionEnums.js";import{globalOptionsAtom as A}from"../../jotai/store.js";import{useTranslate as B}from"../../hooks/index.js";function C(o){return Array.isArray(o)&&o||Object.entries(o||{}).map(([r,e])=>({value:r,description:e}))}function V({values:o,type:r}){const e=B(),[s,g]=f(!0),{maxDisplayedEnumValues:t}=y(A),l=h(()=>{g(!s)},[s]),p=!Array.isArray(o),n=C(o),a=x(()=>s&&t?n.slice(0,t):n,[n,s,t]);if(!n.length)return null;const i=t?n.length>t:!1,u=t?s?`+${n.length-t} ${e("openapi.actions.more","more")}`:e("openapi.actions.hide","Hide"):"";return m(c,{children:p?m(T,{enums:a,toggle:l,showToggleButton:i,toggleButtonText:u,type:r,translate:e}):m(E,{enums:a,type:r,toggle:l,toggleButtonText:u,showToggleButton:i,translate:e})})}const S=d(V);export{S as EnumValues};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, memo, useCallback, useMemo } from 'react';
+import { useAtomValue } from 'jotai';
+import { SimpleEnums } from './SimpleEnums.js';
+import { DescriptionEnums } from './DescriptionEnums.js';
+import { globalOptionsAtom } from '../../jotai/store.js';
+import { useTranslate } from '../../hooks/index.js';
+function getEnums(values) {
+    return ((Array.isArray(values) && values) ||
+        Object.entries(values || {}).map(([value, description]) => ({
+            value,
+            description,
+        })));
+}
+function EnumValuesComponent({ values, type }) {
+    const translate = useTranslate();
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const { maxDisplayedEnumValues } = useAtomValue(globalOptionsAtom);
+    const toggle = useCallback(() => {
+        setIsCollapsed(!isCollapsed);
+    }, [isCollapsed]);
+    const isDescriptionEnum = !Array.isArray(values);
+    const enums = getEnums(values);
+    const displayedItems = useMemo(() => (isCollapsed && maxDisplayedEnumValues ? enums.slice(0, maxDisplayedEnumValues) : enums), [enums, isCollapsed, maxDisplayedEnumValues]);
+    if (!enums.length) {
+        return null;
+    }
+    const showToggleButton = maxDisplayedEnumValues ? enums.length > maxDisplayedEnumValues : false;
+    const toggleButtonText = maxDisplayedEnumValues
+        ? isCollapsed
+            ? `+${enums.length - maxDisplayedEnumValues} ${translate('openapi.actions.more', 'more')}`
+            : translate('openapi.actions.hide', 'Hide')
+        : '';
+    return (_jsx(_Fragment, { children: isDescriptionEnum ? (_jsx(DescriptionEnums, { enums: displayedItems, toggle: toggle, showToggleButton: showToggleButton, toggleButtonText: toggleButtonText, type: type, translate: translate })) : (_jsx(SimpleEnums, { enums: displayedItems, type: type, toggle: toggle, toggleButtonText: toggleButtonText, showToggleButton: showToggleButton, translate: translate })) }));
+}
+export const EnumValues = memo(EnumValuesComponent);
+//# sourceMappingURL=EnumValues.js.map

package/lib/components/PropertyDetails/Examples.js

@@ -1 +1,26 @@
-import{jsxs as t,jsx as n,Fragment as i}from"react/jsx-runtime";import{ExampleValue as l,FieldLabel as p}from"../common/index.js";import{tryDecodeURIComponent as u,normalizeText as o,serializeParameterValue as c}from"../../utils/index.js";import{ExampleWrap as x,ExamplesList as d,ExampleSummary as f}from"./styled.js";import{useTranslate as h}from"../../hooks/index.js";import{Markdown as E}from"../Markdown/index.js";function b({field:e}){const r=h();return e.examples?t(i,{children:[t(p,{children:[" ",r("openapi.examples","Examples"),": "]}),n(d,{children:Object.entries(e.examples).map(([m,a])=>{const s=o(a.description);return t(x,{children:[t(f,{children:[o(a.summary)||m," "]}),s&&n(E,{source:s}),n(l,{children:j(e,a.value)})]},m)})})]}):null}function j(e,r){return e.in?u(c(e,r)):r}export{b as Examples,j as getSerializedValue};
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { ExampleValue, FieldLabel } from '../common/index.js';
+import { tryDecodeURIComponent, normalizeText, serializeParameterValue, } from '../../utils/index.js';
+import { ExampleWrap, ExamplesList, ExampleSummary } from './styled.js';
+import { useTranslate } from '../../hooks/index.js';
+import { Markdown } from '../Markdown/index.js';
+export function Examples({ field }) {
+    const translate = useTranslate();
+    if (!field.examples) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(FieldLabel, { children: [" ", translate('openapi.examples', 'Examples'), ": "] }), _jsx(ExamplesList, { children: Object.entries(field.examples).map(([id, example]) => {
+                    const description = normalizeText(example.description);
+                    return (_jsxs(ExampleWrap, { children: [_jsxs(ExampleSummary, { children: [normalizeText(example.summary) || id, " "] }), description && _jsx(Markdown, { source: description }), _jsx(ExampleValue, { children: getSerializedValue(field, example.value) })] }, id));
+                }) })] }));
+}
+export function getSerializedValue(field, example) {
+    if (field.in) {
+        // decode for better readability in examples: see https://github.com/Redocly/redoc/issues/1138
+        return tryDecodeURIComponent(serializeParameterValue(field, example));
+    }
+    else {
+        return example;
+    }
+}
+//# sourceMappingURL=Examples.js.map

package/lib/components/PropertyDetails/Extensions.js

@@ -1,3 +1,18 @@
-import{jsxs as t,jsx as n,Fragment as s}from"react/jsx-runtime";import{memo as i}from"react";import{useAtomValue as a}from"jotai";import{Markdown as e}from"@redocly/theme/components/Markdown/Markdown";import{ExtensionValue as p,FieldLabel as l}from"../common/index.js";import{globalOptionsAtom as f}from"../../jotai/store.js";import{styled as c}from"../../styled-components.js";const d=c(e)`
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAtomValue } from 'jotai';
+import { Markdown as MarkdownWrapper } from '@redocly/theme/components/Markdown/Markdown';
+import { ExtensionValue, FieldLabel } from '../common/index.js';
+import { globalOptionsAtom } from '../../jotai/store.js';
+import { styled } from '../../styled-components.js';
+const Container = styled(MarkdownWrapper) `
   margin: 2px 0;
-`;function g({extensions:r}){const{showExtensions:m}=a(f);return m?n(s,{children:Object.keys(r).map(o=>t(d,{children:[t(l,{children:[o.substring(2),": "]})," ",n(p,{children:typeof r[o]=="string"?r[o]:JSON.stringify(r[o])})]},o))}):null}const F=i(g);export{F as Extensions};
+`;
+function ExtensionsComponent({ extensions }) {
+    const { showExtensions } = useAtomValue(globalOptionsAtom);
+    return showExtensions ? (_jsx(_Fragment, { children: Object.keys(extensions).map((key) => (_jsxs(Container, { children: [_jsxs(FieldLabel, { children: [key.substring(2), ": "] }), ' ', _jsx(ExtensionValue, { children: (typeof extensions[key] === 'string'
+                        ? extensions[key]
+                        : JSON.stringify(extensions[key])) })] }, key))) })) : null;
+}
+export const Extensions = memo(ExtensionsComponent);
+//# sourceMappingURL=Extensions.js.map

package/lib/components/PropertyDetails/FieldDetail.js

@@ -1,7 +1,20 @@
-import{jsxs as a,jsx as l}from"react/jsx-runtime";import{memo as s}from"react";import{FieldLabel as o,DefaultValue as p,FieldValueLabel as d,ExpandableExample as m}from"../common/index.js";import{styled as x}from"../../styled-components.js";function f({value:e,label:n,raw:t,type:r="other"}){if(e===void 0)return null;const i=t?String(e):JSON.stringify(e);return a(c,{children:[a(o,{children:[" ",n," "]}),r==="default"?l(p,{children:i}):r==="example"?l(m,{value:i}):l(d,{children:i})]})}const j=s(f),c=x.div`
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { FieldLabel, DefaultValue, FieldValueLabel, ExpandableExample } from '../common/index.js';
+import { styled } from '../../styled-components.js';
+function FieldDetailComponent({ value, label, raw, type = 'other', }) {
+    if (value === undefined) {
+        return null;
+    }
+    const _value = raw ? String(value) : JSON.stringify(value);
+    return (_jsxs(Wrapper, { children: [_jsxs(FieldLabel, { children: [" ", label, " "] }), type === 'default' ? (_jsx(DefaultValue, { children: _value })) : type === 'example' ? (_jsx(ExpandableExample, { value: _value })) : (_jsx(FieldValueLabel, { children: _value }))] }));
+}
+export const FieldDetail = memo(FieldDetailComponent);
+const Wrapper = styled.div `
   margin-top: var(--spacing-xxs);
   display: flex;
   align-items: baseline;
   gap: var(--spacing-xxs);
   flex-wrap: wrap;
-`;export{j as FieldDetail};
+`;
+//# sourceMappingURL=FieldDetail.js.map

package/lib/components/PropertyDetails/FieldDetails.js

@@ -1,18 +1,61 @@
-import{jsx as e,jsxs as p,Fragment as E}from"react/jsx-runtime";import{memo as T,useMemo as k}from"react";import{useAtomValue as S}from"jotai";import{LinkIcon as L}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{RecursiveLabel as h,Tag as x,AccessLabel as j,RequiredLabel as q,StyledBadge as A}from"../common/index.js";import{ExternalDocumentation as C}from"../ExternalDocumentation/index.js";import{Markdown as M}from"../Markdown/index.js";import{FieldDetail as l}from"./FieldDetail.js";import{Extensions as R}from"./Extensions.js";import{EnumValues as V}from"./EnumValues.js";import{Examples as $,getSerializedValue as N}from"./Examples.js";import{globalOptionsAtom as _}from"../../jotai/store.js";import{SchemaTypeInfo as i}from"./SchemaTypeInfo.js";import{LinkToField as B}from"../common/LinkToField.js";import{Pattern as I}from"./Pattern.js";import{getAccessModeLabelText as O}from"../RenderHook/index.js";import{useTranslate as G}from"../../hooks/index.js";import{styled as n}from"../../styled-components.js";function H({field:t,renderDiscriminatorSwitch:v,deepLink:m,fieldParentsName:y=[]}){const a=G(),{hidePropertiesPrefix:g,hideSchemaTitles:b}=S(_),{schema:r,description:w,example:c,deprecated:D,examples:s,kind:d,required:F,name:f}=t,P=t.in==="header",z=k(()=>{if(c!==void 0||s!==void 0){if(s!==void 0)return e($,{field:t});{const o=!!t.in;return e(l,{label:`${a("openapi.example","Example")}:`,value:N(t,t.example),raw:o})}}else return null},[c,s,t,a]),u=O(t.schema);return p(E,{children:[p(J,{children:[f&&p(Q,{children:[m&&e(B,{to:m}),!g&&y.map(o=>o+".\u200B"),e(U,{className:"schema-name",children:f})]}),e(i,{type:r.typePrefix+r.displayType}),e(i,{type:r.displayFormat&&`(${r.displayFormat})`}),e(i,{type:r.contentEncoding}),e(i,{type:r.title&&!b?`(${r.title})`:""}),r.constraints?.map(o=>e(i,{type:o},o)),D&&e(A,{deprecated:!0,children:a("openapi.badges.deprecated","Deprecated")}),e(I,{pattern:r.pattern}),d==="additionalProperties"&&e(x,{children:a("openapi.additionalProperties","additional property")}),d==="patternProperties"&&e(x,{children:a("openapi.patternProperties","pattern property")}),u&&e(j,{children:u}),F&&e(q,{children:a("openapi.required","required")}),r.isCircular&&e(h,{children:a("openapi.recursive","Recursive")})]}),r.isComplex&&e(h,{children:a("openapi.complex","Complex")}),e(K,{source:w}),e(l,{raw:P,type:"default",label:a("openapi.default","Default"),value:r.default}),e(V,{type:r.type,values:r["x-enumDescriptions"]||r.enum}),z,e(R,{extensions:{...t.extensions,...r.extensions}}),r.externalDocs&&e(C,{externalDocs:r.externalDocs,compact:!0}),v?.(),e(l,{label:a("openapi.value","Value"),value:t.const||void 0})]})}const ue=T(H),J=n.div`
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { useAtomValue } from 'jotai';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
+import { RecursiveLabel, Tag, AccessLabel, RequiredLabel, StyledBadge } from '../common/index.js';
+import { ExternalDocumentation } from '../ExternalDocumentation/index.js';
+import { Markdown } from '../Markdown/index.js';
+import { FieldDetail } from './FieldDetail.js';
+import { Extensions } from './Extensions.js';
+import { EnumValues } from './EnumValues.js';
+import { Examples, getSerializedValue } from './Examples.js';
+import { globalOptionsAtom } from '../../jotai/store.js';
+import { SchemaTypeInfo } from './SchemaTypeInfo.js';
+import { LinkToField } from '../common/LinkToField.js';
+import { Pattern } from './Pattern.js';
+import { getAccessModeLabelText } from '../RenderHook/index.js';
+import { useTranslate } from '../../hooks/index.js';
+import { styled } from '../../styled-components.js';
+function FieldDetailsComponent({ field, renderDiscriminatorSwitch, deepLink, fieldParentsName = [], }) {
+    const translate = useTranslate();
+    const { hidePropertiesPrefix, hideSchemaTitles } = useAtomValue(globalOptionsAtom);
+    const { schema, description, example, deprecated, examples, kind, required, name } = field;
+    const rawDefault = field.in === 'header'; // having quotes around header field default values is confusing and inappropriate
+    const renderedExamples = useMemo(() => {
+        if (example !== undefined || examples !== undefined) {
+            if (examples !== undefined) {
+                return _jsx(Examples, { field: field });
+            }
+            else {
+                const raw = !!field.in;
+                return (_jsx(FieldDetail, { label: `${translate('openapi.example', 'Example')}:`, value: getSerializedValue(field, field.example), raw: raw }));
+            }
+        }
+        else
+            return null;
+    }, [example, examples, field, translate]);
+    const accessMode = getAccessModeLabelText(field.schema);
+    return (_jsxs(_Fragment, { children: [_jsxs(Row, { children: [name && (_jsxs(Name, { children: [deepLink && _jsx(LinkToField, { to: deepLink }), !hidePropertiesPrefix &&
+                                fieldParentsName.map((name) => name + '.\u200B'), _jsx(SchemaName, { className: "schema-name", children: name })] })), _jsx(SchemaTypeInfo, { type: schema.typePrefix + schema.displayType }), _jsx(SchemaTypeInfo, { type: schema.displayFormat && `(${schema.displayFormat})` }), _jsx(SchemaTypeInfo, { type: schema.contentEncoding }), _jsx(SchemaTypeInfo, { type: schema.title && !hideSchemaTitles ? `(${schema.title})` : '' }), schema.constraints?.map((constraint) => (_jsx(SchemaTypeInfo, { type: constraint }, constraint))), deprecated && (_jsx(StyledBadge, { deprecated: true, children: translate('openapi.badges.deprecated', 'Deprecated') })), _jsx(Pattern, { pattern: schema.pattern }), kind === 'additionalProperties' && (_jsx(Tag, { children: translate('openapi.additionalProperties', 'additional property') })), kind === 'patternProperties' && (_jsx(Tag, { children: translate('openapi.patternProperties', 'pattern property') })), accessMode && _jsx(AccessLabel, { children: accessMode }), required && _jsx(RequiredLabel, { children: translate('openapi.required', 'required') }), schema.isCircular && (_jsx(RecursiveLabel, { children: translate('openapi.recursive', 'Recursive') }))] }), schema.isComplex && (_jsx(RecursiveLabel, { children: translate('openapi.complex', 'Complex') })), _jsx(StyledDescription, { source: description }), _jsx(FieldDetail, { raw: rawDefault, type: "default", label: translate('openapi.default', 'Default'), value: schema.default }), _jsx(EnumValues, { type: schema.type, values: schema['x-enumDescriptions'] || schema.enum }), renderedExamples, _jsx(Extensions, { extensions: { ...field.extensions, ...schema.extensions } }), schema.externalDocs && _jsx(ExternalDocumentation, { externalDocs: schema.externalDocs, compact: true }), renderDiscriminatorSwitch?.(), _jsx(FieldDetail, { label: translate('openapi.value', 'Value'), value: field.const || undefined })] }));
+}
+export const FieldDetails = memo(FieldDetailsComponent);
+const Row = styled.div `
   display: flex;
   align-items: center;
   gap: calc(var(--spacing-xxs) / 4) var(--spacing-xxs);
   flex-wrap: wrap;
   margin-bottom: 2px;
   position: relative;
-`,K=n(M)`
+`;
+const StyledDescription = styled(Markdown) `
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
 
   article p:last-child {
     margin-bottom: 0;
   }
-`,Q=n.span`
+`;
+const Name = styled.span `
   position: relative;
   font-family: var(--font-family-monospaced);
   line-height: var(--line-height-base);
@@ -24,16 +67,18 @@ import{jsx as e,jsxs as p,Fragment as E}from"react/jsx-runtime";import{memo as T
   white-space: pre-wrap;
 
   :hover {
-    ${L} {
+    ${LinkIcon} {
       opacity: 1;
       visibility: visible;
       background-color: var(--bg-color);
     }
   }
-`,U=n.span`
+`;
+const SchemaName = styled.span `
   font-family: var(--font-family-monospaced);
   font-weight: var(--font-weight-semibold);
   font-size: var(--schemas-property-name-font-size);
   line-height: var(--schemas-property-name-line-height);
   color: var(--text-color-primary);
-`;export{ue as FieldDetails};
+`;
+//# sourceMappingURL=FieldDetails.js.map

package/lib/components/PropertyDetails/Pattern.js

@@ -1 +1,21 @@
-import{jsx as r,Fragment as i,jsxs as l}from"react/jsx-runtime";import{useState as c}from"react";import{Tag as h,ToggleButton as m}from"../common/index.js";import{useTranslate as g}from"../../hooks/index.js";const n=45;function T({pattern:t}){const o=g(),[e,s]=c(!1);if(!t)return null;const a=()=>{s(!e)};return l(i,{children:[r(h,{children:e||t.length<n?t:`${t.slice(0,n)}...`}),t.length>n&&r(m,{onClick:a,children:e?o("openapi.hidePattern","Hide pattern"):o("openapi.showPattern","Show pattern")})]})}export{T as Pattern};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Tag, ToggleButton } from '../common/index.js';
+import { useTranslate } from '../../hooks/index.js';
+const MAX_PATTERN_LENGTH = 45;
+export function Pattern({ pattern }) {
+    const translate = useTranslate();
+    const [isPatternShown, setIsPatternShown] = useState(false);
+    if (!pattern) {
+        return null;
+    }
+    const togglePattern = () => {
+        setIsPatternShown(!isPatternShown);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Tag, { children: isPatternShown || pattern.length < MAX_PATTERN_LENGTH
+                    ? pattern
+                    : `${pattern.slice(0, MAX_PATTERN_LENGTH)}...` }), pattern.length > MAX_PATTERN_LENGTH && (_jsx(ToggleButton, { onClick: togglePattern, children: isPatternShown
+                    ? translate('openapi.hidePattern', 'Hide pattern')
+                    : translate('openapi.showPattern', 'Show pattern') }))] }));
+}
+//# sourceMappingURL=Pattern.js.map

package/lib/components/PropertyDetails/PlusCircleIcon.js

@@ -1,10 +1,16 @@
-import{jsx as c}from"react/jsx-runtime";import{styled as i}from"../../styled-components.js";function s({sign:r,className:o,color:e}){return c(l,{className:o,color:e,children:r})}const l=i.span`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '../../styled-components.js';
+export function CircleIcon({ sign, className, color }) {
+    return (_jsx(StyledCircleIcon, { className: className, color: color, children: sign }));
+}
+const StyledCircleIcon = styled.span `
   background-color: var(--bg-color);
   border-radius: 50%;
-  border: 1px solid ${({color:r})=>r||"var(--border-color-primary)"};
+  border: 1px solid ${({ color }) => color || 'var(--border-color-primary)'};
   font-size: var(--font-size-lg);
   line-height: var(--font-size-lg);
-  color: ${({color:r})=>r||"var(--text-color-secondary)"};
+  color: ${({ color }) => color || 'var(--text-color-secondary)'};
   width: 20px;
   height: 20px;
-`;export{s as CircleIcon};
+`;
+//# sourceMappingURL=PlusCircleIcon.js.map

package/lib/components/PropertyDetails/PropertyDetails.js

@@ -1,8 +1,24 @@
-import{jsx as n,jsxs as g}from"react/jsx-runtime";import{memo as f}from"react";import{useAtomValue as u}from"jotai";import{Schema as x}from"../Schema/index.js";import{FieldDetails as k}from"./FieldDetails.js";import{generateDeepLink as w}from"../common/LinkToField.js";import{activeMimeNameAtom as D}from"../../jotai/app.js";import{styled as L}from"../../styled-components.js";function $({field:e,skipWriteOnly:m,skipReadOnly:p,level:d=1,showTitle:c,renderDiscriminatorSwitch:l,isFirst:h,fieldParentsName:o,disableDeepLinks:i,oneOfLevel:b,slug:r,onOneOfChange:v}){const y=u(D),t=i?void 0:w(e,y),a=r&&t?`${r}&${t.replace("#","")}`:t,s=!e.schema.isPrimitive&&!e.schema.isCircular;return g(O,{isFist:h,expanded:s,className:"property",children:[n(k,{field:e,renderDiscriminatorSwitch:l,deepLink:a,fieldParentsName:o}),s&&n(x,{schema:e.schema,skipReadOnly:p,skipWriteOnly:m,showTitle:c,expandable:!0,level:d+1,fieldParentsName:[...o||[],e.name],deepLink:a,required:e.required,disableDeepLinks:i,oneOfLevel:b,slug:r,onOneOfChange:v})]})}const M=f($),O=L.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAtomValue } from 'jotai';
+import { Schema } from '../Schema/index.js';
+import { FieldDetails } from './FieldDetails.js';
+import { generateDeepLink } from '../common/LinkToField.js';
+import { activeMimeNameAtom } from '../../jotai/app.js';
+import { styled } from '../../styled-components.js';
+function PropertyDetailsComponent({ field, skipWriteOnly, skipReadOnly, level = 1, showTitle, renderDiscriminatorSwitch, isFirst, fieldParentsName, disableDeepLinks, oneOfLevel, slug, onOneOfChange, }) {
+    const activeMimeName = useAtomValue(activeMimeNameAtom);
+    const generatedDeepLink = disableDeepLinks ? undefined : generateDeepLink(field, activeMimeName);
+    const deepLink = slug && generatedDeepLink ? `${slug}&${generatedDeepLink.replace('#', '')}` : generatedDeepLink;
+    const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular;
+    return (_jsxs(Wrapper, { isFist: isFirst, expanded: withSubSchema, className: "property", children: [_jsx(FieldDetails, { field: field, renderDiscriminatorSwitch: renderDiscriminatorSwitch, deepLink: deepLink, fieldParentsName: fieldParentsName }), withSubSchema && (_jsx(Schema, { schema: field.schema, skipReadOnly: skipReadOnly, skipWriteOnly: skipWriteOnly, showTitle: showTitle, expandable: true, level: level + 1, fieldParentsName: [...(fieldParentsName || []), field.name], deepLink: deepLink, required: field.required, disableDeepLinks: disableDeepLinks, oneOfLevel: oneOfLevel, slug: slug, onOneOfChange: onOneOfChange }))] }));
+}
+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)"};
+  padding: ${({ isFist }) => `var(--schema-${isFist ? 'fist-' : ''}property-details-spacing)`} 0
+    ${({ expanded }) => (expanded ? 0 : 'var(--schema-property-details-spacing)')};
+  ${({ expanded }) => !expanded && 'border-bottom: 1px solid var(--border-color-primary)'};
 
   // This styles needs to override the dividers when array closing label is present
   &:has(+ span.array-closing-label) {
@@ -14,4 +30,5 @@ import{jsx as n,jsxs as g}from"react/jsx-runtime";import{memo as f}from"react";i
       padding-bottom: 0;
     }
   }
-`;export{M as PropertyDetails};
+`;
+//# sourceMappingURL=PropertyDetails.js.map

package/lib/components/PropertyDetails/SchemaTypeInfo.js

@@ -1,4 +1,11 @@
-import{jsx as a}from"react/jsx-runtime";import{styled as n}from"../../styled-components.js";function l({type:e,className:t}){return e?a(o,{className:t,"data-testid":"schema-type-info",children:e}):null}const o=n.em`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '../../styled-components.js';
+export function SchemaTypeInfo({ type, className }) {
+    if (!type)
+        return null;
+    return (_jsx(FieldLabel, { className: className, "data-testid": "schema-type-info", children: type }));
+}
+const FieldLabel = styled.em `
   vertical-align: middle;
   color: var(--schema-type-text-color);
   font-size: var(--font-size-base);
@@ -12,4 +19,5 @@ import{jsx as a}from"react/jsx-runtime";import{styled as n}from"../../styled-com
   &:last-of-type:after {
     content: '';
   }
-`;export{l as SchemaTypeInfo};
+`;
+//# sourceMappingURL=SchemaTypeInfo.js.map

package/lib/components/PropertyDetails/SimpleEnums.js

@@ -1,7 +1,18 @@
-import{jsxs as o,jsx as p}from"react/jsx-runtime";import{memo as l}from"react";import{FieldLabel as x,Tag as c,ToggleButton as d}from"../common/index.js";import{styled as g}from"../../styled-components.js";function u({enums:i,type:m,toggle:r,showToggleButton:s,toggleButtonText:t,translate:e}){return o(f,{"data-testid":"simple-enums",children:[o(x,{children:[m==="array"?e("openapi.items","Items"):""," ",i.length===1?e("openapi.value","Value"):e("openapi.enum","Enum")]}),i.map((n,a)=>p(c,{children:JSON.stringify(n)},n+a)),s?p(d,{onClick:r,children:t}):null]})}const w=l(u),f=g.div`
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { FieldLabel, Tag, ToggleButton } from '../common/index.js';
+import { styled } from '../../styled-components.js';
+export function SimpleEnumsComponent({ enums, type, toggle, showToggleButton, toggleButtonText, translate, }) {
+    return (_jsxs(Row, { "data-testid": "simple-enums", children: [_jsxs(FieldLabel, { children: [type === 'array' ? translate('openapi.items', 'Items') : '', ' ', enums.length === 1
+                        ? translate('openapi.value', 'Value')
+                        : translate('openapi.enum', 'Enum')] }), enums.map((value, idx) => (_jsx(Tag, { children: JSON.stringify(value) }, value + idx))), showToggleButton ? _jsx(ToggleButton, { onClick: toggle, children: toggleButtonText }) : null] }));
+}
+export const SimpleEnums = memo(SimpleEnumsComponent);
+const Row = styled.div `
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--spacing-xxs);
   margin-top: var(--spacing-xxs);
-`;export{w as SimpleEnums,u as SimpleEnumsComponent};
+`;
+//# sourceMappingURL=SimpleEnums.js.map