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

package/lib/components/Replay/utils.js

@@ -1 +1,208 @@
-import{isPrimitive as x}from"@redocly/theme/core/openapi";import{getOperation as h}from"../../models/index.js";import{normalizeOptions as v,OpenAPIParser as b}from"../../services/index.js";import{JsonPointer as E}from"../../utils/index.js";function O(t,a,n,r,e,c){if(!n)return;const i=new b(n),s=i.definition.paths?.[t],d=s?.[a],m=h(i,{...d,pathName:t,httpVerb:a,pathParameters:s.parameters||[],pathServers:s.servers||[]},void 0,v({}),"",{isCallback:!1},r);if(!m)return;const f=c?.activeMimeName||"application/json";return{id:m.id,name:m.name,method:m.httpVerb,operationId:m.operationId,parameters:N(m.parameters,e?.requestValues),body:w(m.requestBody,n,e?.requestValues?.body?{activeExampleName:e?.activeExampleName,[f]:e?.requestValues?.body}:e?.activeExampleName?{activeExampleName:e?.activeExampleName}:void 0),path:m.path,href:m.href,servers:m.servers,security:y(m.security),responses:Object.fromEntries(m.responses.map(u=>[u.code,{code:u.code,description:u.description,mediaTypes:u.content?.mediaTypes.reduce((l,o)=>(l[o.name]={name:o.name,schema:p(o.schema?.rawSchema,n)},l),{})}]))}}function P(t){return function(a,n,r){const e=O(a,n,r,t);if(e)return{...e,operationId:e.operationId||E.compile(["paths",e.path,e.method])}}}function N(t,a){const n=new Set,r=t.map(e=>(n.add(e.in+":"+e.name),{name:e.name,in:e.in,required:e.required,description:e.description,example:a?.[String(e.in)]?.[e.name]||e.example,schema:e.schema}));for(const[e,c]of Object.entries(a||{}))for(const[i,s]of Object.entries(c||{}))n.has(e+":"+i)||r.push({name:i,in:e,required:!1,description:"",example:String(s),schema:void 0});return r}function V({type:t,format:a,enum:n}){return t==="string"&&(a==="binary"||a==="base64")?"file":t==="object"?"multiline":n.length>0?"select":"text"}function g(t,a){const n=t[0]?.example||t[0]?.examples;if(n)return n;if(t.schema?.example)return t.schema.example;const r=a?.default?.value||a?.default?.rawValue;return r?.[t.name]?x(r?.[t.name])?String(r?.[t.name]):JSON.stringify(r?.[t.name]):""}function w(t,a,n){if(!t||!t.content?.mediaTypes){if(!n)return;const{activeExampleName:r,...e}=n;return{activeExampleName:r,mediaTypes:Object.fromEntries(Object.entries(e).map(([c,i])=>[c,{name:c,examples:{default:{value:i}},schema:{},parameters:[]}]))}}return{required:t.required,activeExampleName:n?.activeExampleName,mediaTypes:t.content.mediaTypes.reduce((r,e)=>{const c=e.schema,i=n?.[e.name]?{default:{value:n?.[e.name],rawValue:n?.[e.name],mime:e.name}}:e.examples||e.formExamples;return r[e.name]={name:e.name,examples:i,schema:p(e.schema?.rawSchema,a),parameters:c?.fields?.map(s=>({inputType:V(s.schema),name:s.name,example:g(s,i)}))},r},{})}}function p(t,a){if(!(!t||!a))return{...t,components:a?.components||{}}}function y(t){if(t)return t.map(({schemes:a})=>a.map(n=>{const r={id:n.id,type:n.type,in:n.in,openIdConnectUrl:n.openIdConnectUrl,scopes:n.scopes,scheme:n.scheme,name:n.name,flows:n.flows,"x-defaultAccessToken":n["x-defaultAccessToken"],"x-defaultTokenType":n["x-defaultTokenType"],"x-defaultClientId":n["x-defaultClientId"],"x-defaultClientSecret":n["x-defaultClientSecret"],"x-defaultUsername":n["x-defaultUsername"],"x-defaultPassword":n["x-defaultPassword"]};return Object.keys(r).forEach(e=>r[e]===void 0&&delete r[e]),r}))}export{O as convertOperationToReplayValue,P as convertOperationToReplayValueForRedoc,y as convertRequestSecurity};
+import { isPrimitive } from '@redocly/theme/core/openapi';
+import { getOperation, } from '../../models/index.js';
+import { normalizeOptions, OpenAPIParser } from '../../services/index.js';
+import { JsonPointer } from '../../utils/index.js';
+export function convertOperationToReplayValue(path, method, openAPI, userClaims, operationState, appState) {
+    if (!openAPI) {
+        return undefined;
+    }
+    const parser = new OpenAPIParser(openAPI);
+    const pathItem = parser.definition.paths?.[path];
+    const opItem = pathItem?.[method];
+    const operation = getOperation(parser, {
+        ...opItem,
+        pathName: path,
+        httpVerb: method,
+        pathParameters: pathItem.parameters || [],
+        pathServers: pathItem.servers || [],
+    }, undefined, normalizeOptions({}), '', { isCallback: false }, userClaims);
+    if (!operation) {
+        return undefined;
+    }
+    const activeMime = appState?.activeMimeName || 'application/json';
+    const value = {
+        id: operation.id,
+        name: operation.name,
+        method: operation.httpVerb,
+        operationId: operation.operationId,
+        parameters: convertParameters(operation.parameters, operationState?.requestValues),
+        body: convertRequestBody(operation.requestBody, openAPI, operationState?.requestValues?.body
+            ? {
+                activeExampleName: operationState?.activeExampleName,
+                [activeMime]: operationState?.requestValues?.body,
+            }
+            : operationState?.activeExampleName
+                ? { activeExampleName: operationState?.activeExampleName }
+                : undefined),
+        path: operation.path,
+        href: operation.href,
+        servers: operation.servers,
+        security: convertRequestSecurity(operation.security),
+        responses: Object.fromEntries(operation.responses.map((response) => [
+            response.code,
+            {
+                code: response.code,
+                description: response.description,
+                mediaTypes: response.content?.mediaTypes.reduce((acc, mediaType) => {
+                    acc[mediaType.name] = {
+                        name: mediaType.name,
+                        schema: getBodySchema(mediaType.schema?.rawSchema, openAPI),
+                    };
+                    return acc;
+                }, {}),
+            },
+        ])),
+    };
+    return value;
+}
+export function convertOperationToReplayValueForRedoc(userClaims) {
+    return function (path, method, openAPI) {
+        const replayValues = convertOperationToReplayValue(path, method, openAPI, userClaims);
+        if (!replayValues) {
+            return undefined;
+        }
+        return {
+            ...replayValues,
+            operationId: replayValues.operationId ||
+                JsonPointer.compile(['paths', replayValues.path, replayValues.method]),
+        };
+    };
+}
+function convertParameters(params, state) {
+    const seenParams = new Set();
+    const allParams = params.map((param) => {
+        seenParams.add(param.in + ':' + param.name);
+        return {
+            name: param.name,
+            in: param.in,
+            required: param.required,
+            description: param.description,
+            example: state?.[String(param.in)]?.[param.name] || param.example,
+            schema: param.schema,
+        };
+    });
+    // allow to provide extra params (not defined in the operation spec)
+    for (const [inValue, param] of Object.entries(state || {})) {
+        for (const [name, example] of Object.entries(param || {})) {
+            if (!seenParams.has(inValue + ':' + name)) {
+                allParams.push({
+                    name,
+                    in: inValue,
+                    required: false,
+                    description: '',
+                    example: String(example),
+                    schema: undefined,
+                });
+            }
+        }
+    }
+    return allParams;
+}
+function getInputType({ type, format, enum: enumValue, }) {
+    if (type === 'string' && (format === 'binary' || format === 'base64')) {
+        return 'file';
+    }
+    if (type === 'object') {
+        return 'multiline';
+    }
+    if (enumValue.length > 0) {
+        return 'select';
+    }
+    return 'text';
+}
+function getFieldExamples(field, examples) {
+    const example = field[0]?.example || field[0]?.examples;
+    if (example) {
+        return example;
+    }
+    if (field.schema?.example) {
+        return field.schema.example;
+    }
+    const defaultExample = examples?.['default']?.value || examples?.['default']?.rawValue;
+    if (defaultExample?.[field.name]) {
+        return isPrimitive(defaultExample?.[field.name])
+            ? String(defaultExample?.[field.name])
+            : JSON.stringify(defaultExample?.[field.name]);
+    }
+    return '';
+}
+function convertRequestBody(requestBody, fullOpenApi, state) {
+    if (!requestBody || !requestBody.content?.mediaTypes) {
+        if (!state)
+            return undefined;
+        const { activeExampleName, ...rest } = state;
+        return {
+            activeExampleName,
+            mediaTypes: Object.fromEntries(Object.entries(rest).map(([key, value]) => [
+                key,
+                { name: key, examples: { default: { value } }, schema: {}, parameters: [] },
+            ])),
+        };
+    }
+    return {
+        required: requestBody.required,
+        activeExampleName: state?.activeExampleName,
+        mediaTypes: requestBody.content.mediaTypes.reduce((acc, mediaType) => {
+            const schemaModel = mediaType.schema;
+            const examples = state?.[mediaType.name]
+                ? {
+                    default: {
+                        value: state?.[mediaType.name],
+                        rawValue: state?.[mediaType.name],
+                        mime: mediaType.name,
+                    },
+                }
+                : mediaType.examples || mediaType.formExamples;
+            acc[mediaType.name] = {
+                name: mediaType.name,
+                examples: examples,
+                schema: getBodySchema(mediaType.schema?.rawSchema, fullOpenApi),
+                parameters: schemaModel?.fields?.map((field) => {
+                    // www-form-urlencoded and form-data
+                    return {
+                        inputType: getInputType(field.schema),
+                        name: field.name,
+                        example: getFieldExamples(field, examples),
+                    };
+                }),
+            };
+            return acc;
+        }, {}),
+    };
+}
+function getBodySchema(schema, rootDefinition) {
+    if (!schema || !rootDefinition)
+        return undefined;
+    return {
+        ...schema,
+        components: rootDefinition?.components || {}, // add components to schema in case there are $refs in the original schema
+    };
+}
+export function convertRequestSecurity(security) {
+    if (!security) {
+        return undefined;
+    }
+    return security.map(({ schemes }) => {
+        return schemes.map((s) => {
+            const securityScheme = {
+                id: s.id,
+                type: s.type,
+                in: s.in,
+                openIdConnectUrl: s.openIdConnectUrl,
+                scopes: s.scopes,
+                scheme: s.scheme,
+                name: s.name,
+                flows: s.flows,
+                'x-defaultAccessToken': s['x-defaultAccessToken'],
+                'x-defaultTokenType': s['x-defaultTokenType'],
+                'x-defaultClientId': s['x-defaultClientId'],
+                'x-defaultClientSecret': s['x-defaultClientSecret'],
+                'x-defaultUsername': s['x-defaultUsername'],
+                'x-defaultPassword': s['x-defaultPassword'],
+            };
+            Object.keys(securityScheme).forEach((key) => securityScheme[key] === undefined && delete securityScheme[key]);
+            return securityScheme;
+        });
+    });
+}
+//# sourceMappingURL=utils.js.map

package/lib/components/Request/RequestDetails.js

@@ -1,3 +1,34 @@
-import{jsx as e,jsxs as s,Fragment as q}from"react/jsx-runtime";import{memo as v,useMemo as P}from"react";import{useAtomValue as A}from"jotai";import{Row as N}from"../common/index.js";import{Title as j}from"../common/OperationItemTitle.js";import{LinkToField as k}from"../common/LinkToField.js";import{makeDeepLink as y}from"../../services/index.js";import{Description as D}from"../OperationItem/Description.js";import{Security as M}from"../Security/index.js";import{ExpandAllButton as T}from"../ExpandAllButton/index.js";import{RequestParameters as w}from"../RequestParameters/index.js";import{activeMimeNameAtom as C}from"../../jotai/app.js";import{getActiveMediaType as F}from"../../models/mediaContent.js";import{styled as _}from"../../styled-components.js";function b({operation:{id:r,description:m,externalDocs:n,parameters:i,requestBody:o,pointer:c,security:l,extensions:u,callbackId:d},title:f,translate:h,onPanelToggle:x}){const a=A(C),R=P(()=>{const p=i.some(({schema:t})=>!t.isPrimitive&&!t.isCircular);if(!o?.content||p)return p;const{schema:g}=F(o.content,a)||{};return g?.fields?.some(({schema:t})=>!t.isPrimitive&&!t.isCircular)},[a,i,o?.content]);return s(q,{children:[e(N,{children:s(E,{children:[s(j,{children:[r&&e(k,{to:y(r,"request")}),f||h?.("openapi.request","Request"),R&&e(T,{operationPointer:c,type:"request",onPanelToggle:x})]}),e(D,{description:m||n?m:void 0,externalDocs:n,extensions:u}),e(M,{securities:l})]})}),e(w,{parameters:i,body:o,operationId:r,callbackId:d})]})}const E=_.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 { Row } from '../common/index.js';
+import { Title } from '../common/OperationItemTitle.js';
+import { LinkToField } from '../common/LinkToField.js';
+import { makeDeepLink } from '../../services/index.js';
+import { Description } from '../OperationItem/Description.js';
+import { Security } from '../Security/index.js';
+import { ExpandAllButton } from '../ExpandAllButton/index.js';
+import { RequestParameters } from '../RequestParameters/index.js';
+import { activeMimeNameAtom } from '../../jotai/app.js';
+import { getActiveMediaType } from '../../models/mediaContent.js';
+import { styled } from '../../styled-components.js';
+import { Extensions } from '../common/Extensions.js';
+function RequestDetailsComponent({ operation: { id, description, externalDocs, parameters, requestBody, pointer, security, extensions, callbackId, }, title, translate, onPanelToggle, }) {
+    const activeMimeName = useAtomValue(activeMimeNameAtom);
+    const showExpandAllButton = useMemo(() => {
+        const hasNestedParameters = parameters.some(({ schema }) => !schema.isPrimitive && !schema.isCircular);
+        if (!requestBody?.content || hasNestedParameters) {
+            return hasNestedParameters;
+        }
+        const { schema } = getActiveMediaType(requestBody.content, activeMimeName) || {};
+        const hasNestedRequestBody = schema?.fields?.some(({ schema: fieldSchema }) => !fieldSchema.isPrimitive && !fieldSchema.isCircular);
+        return hasNestedRequestBody;
+    }, [activeMimeName, parameters, requestBody?.content]);
+    const hasCustomExtensions = Object.keys(extensions || {}).length > 0;
+    return (_jsxs(_Fragment, { children: [_jsx(Row, { children: _jsxs(HeadingWrapper, { children: [_jsxs(Title, { children: [id && _jsx(LinkToField, { to: makeDeepLink(id, 'request') }), title || translate?.('openapi.request', 'Request'), showExpandAllButton && (_jsx(ExpandAllButton, { operationPointer: pointer, type: "request", onPanelToggle: onPanelToggle }))] }), _jsx(Description, { description: description || externalDocs ? description : undefined, externalDocs: externalDocs }), hasCustomExtensions && _jsx(Extensions, { extensions: extensions }), _jsx(Security, { securities: security })] }) }), _jsx(RequestParameters, { parameters: parameters, body: requestBody, operationId: id, callbackId: callbackId })] }));
+}
+const HeadingWrapper = styled.div `
   width: 100%;
-`,Y=v(b);export{Y as RequestDetails};
+`;
+export const RequestDetails = memo(RequestDetailsComponent);
+//# sourceMappingURL=RequestDetails.js.map

package/lib/components/Request/types.js

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

package/lib/components/RequestParameters/Body.js

@@ -1 +1,8 @@
-import{jsx as t}from"react/jsx-runtime";import{memo as p}from"react";import{BodyContent as s}from"../common/BodyContent/index.js";function n({content:e,description:o,required:i,deepLink:r}){return t(s,{content:e,required:i,description:o,skipReadOnly:e.isRequestType,skipWriteOnly:!e.isRequestType,deepLink:r})}const u=p(n);export{u as Body};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { BodyContent } from '../common/BodyContent/index.js';
+function BodyComponent({ content, description, required, deepLink, }) {
+    return (_jsx(BodyContent, { content: content, required: required, description: description, skipReadOnly: content.isRequestType, skipWriteOnly: !content.isRequestType, deepLink: deepLink }));
+}
+export const Body = memo(BodyComponent);
+//# sourceMappingURL=Body.js.map

package/lib/components/RequestParameters/ParametersGroup.js

@@ -1,4 +1,17 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{memo as p}from"react";import{LinkIcon as m}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{PropertyDetails as l}from"../PropertyDetails/index.js";import{LinkToField as c}from"../common/LinkToField.js";import{styled as e}from"../../styled-components.js";function g({title:n,parameters:i,deepLink:s}){return!i||!i.length?null:t(v,{children:[t(f,{children:[o(c,{to:s}),n]}),i.map((r,a)=>o(l,{isFirst:a===0,field:r},r.name))]})}const b=p(g),f=e.span`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
+import { PropertyDetails } from '../PropertyDetails/index.js';
+import { LinkToField } from '../common/LinkToField.js';
+import { styled } from '../../styled-components.js';
+function ParametersGroupComponent({ title, parameters, deepLink, }) {
+    if (!parameters || !parameters.length) {
+        return null;
+    }
+    return (_jsxs(Wrapper, { children: [_jsxs(Title, { children: [_jsx(LinkToField, { to: deepLink }), title] }), parameters.map((field, index) => (_jsx(PropertyDetails, { isFirst: index === 0, field: field }, field.name)))] }));
+}
+export const ParametersGroup = memo(ParametersGroupComponent);
+const Title = styled.span `
   position: relative;
   display: flex;
   align-items: center;
@@ -10,11 +23,13 @@ import{jsx as o,jsxs as t}from"react/jsx-runtime";import{memo as p}from"react";i
   padding: var(--spacing-xxs) 0;
 
   :hover {
-    ${m} {
+    ${LinkIcon} {
       opacity: 1;
       visibility: visible;
     }
   }
-`,v=e.div`
+`;
+const Wrapper = styled.div `
   margin-top: var(--spacing-md);
-`;export{b as ParametersGroup};
+`;
+//# sourceMappingURL=ParametersGroup.js.map

package/lib/components/RequestParameters/RequestParameters.js

@@ -1 +1,40 @@
-import{jsx as p,Fragment as A,jsxs as k}from"react/jsx-runtime";import{ParametersGroup as x}from"./ParametersGroup.js";import{Body as y}from"./Body.js";import{makeDeepLink as _}from"../../services/index.js";import{useTranslate as g}from"../../hooks/index.js";const o=["path","query","cookie","header"];function j({body:r,parameters:e=[],operationId:t,callbackId:s}){const i=g();if(!r&&!e.length)return null;const f={[o[0]]:i("openapi.path","Path"),[o[1]]:i("openapi.query","Query"),[o[2]]:i("openapi.cookie","Cookies"),[o[3]]:i("openapi.header","Headers")},d=(n=>{const u={};return n.forEach(m=>{L(u,m.in,m)}),u})(e),h=e.length>0?o:[],{content:a,description:P,required:q}=r||{};return k(A,{children:[h.map(n=>p(x,{title:f[n],parameters:d[n],deepLink:c(t,s,n)},n)),a&&p(y,{content:a,description:P,required:q,deepLink:c(t,s)})]})}function L(r,e="",t){r[e]||(r[e]=[]),r[e].push(t)}function c(r,e,t="body"){const s=`${e?`${e}/request/${t}`:`request/${t}`}`;return _(r,s)}export{j as RequestParameters};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ParametersGroup } from './ParametersGroup.js';
+import { Body } from './Body.js';
+import { makeDeepLink } from '../../services/index.js';
+import { useTranslate } from '../../hooks/index.js';
+const PARAM_PLACES = ['path', 'query', 'cookie', 'header'];
+export function RequestParameters({ body, parameters = [], operationId, callbackId, }) {
+    const translate = useTranslate();
+    if (!body && !parameters.length) {
+        return null;
+    }
+    const PARAM_NAMES_MAP = {
+        [PARAM_PLACES[0]]: translate('openapi.path', 'Path'),
+        [PARAM_PLACES[1]]: translate('openapi.query', 'Query'),
+        [PARAM_PLACES[2]]: translate('openapi.cookie', 'Cookies'),
+        [PARAM_PLACES[3]]: translate('openapi.header', 'Headers'),
+    };
+    const orderParams = (params) => {
+        const res = {};
+        params.forEach((param) => {
+            safePush(res, param.in, param);
+        });
+        return res;
+    };
+    const paramsMap = orderParams(parameters);
+    const paramsPlaces = parameters.length > 0 ? PARAM_PLACES : [];
+    const { content: bodyContent, description: bodyDescription, required } = body || {};
+    return (_jsxs(_Fragment, { children: [paramsPlaces.map((place) => (_jsx(ParametersGroup, { title: PARAM_NAMES_MAP[place], parameters: paramsMap[place], deepLink: generateDeepLink(operationId, callbackId, place) }, place))), bodyContent && (_jsx(Body, { content: bodyContent, description: bodyDescription, required: required, deepLink: generateDeepLink(operationId, callbackId) }))] }));
+}
+function safePush(obj, prop = '', item) {
+    if (!obj[prop]) {
+        obj[prop] = [];
+    }
+    obj[prop].push(item);
+}
+function generateDeepLink(operationId, callbackId, place = 'body') {
+    const suffix = `${callbackId ? `${callbackId}/request/${place}` : `request/${place}`}`;
+    return makeDeepLink(operationId, suffix);
+}
+//# sourceMappingURL=RequestParameters.js.map

package/lib/components/RequestParameters/index.js

@@ -1 +1,4 @@
-import{RequestParameters as o}from"./RequestParameters.js";import{ParametersGroup as m}from"./ParametersGroup.js";import{Body as p}from"./Body.js";export{p as Body,m as ParametersGroup,o as RequestParameters};
+export { RequestParameters } from './RequestParameters.js';
+export { ParametersGroup } from './ParametersGroup.js';
+export { Body } from './Body.js';
+//# sourceMappingURL=index.js.map

package/lib/components/RequestSamples/CodeSample.js

@@ -1,4 +1,56 @@
-import{jsx as r}from"react/jsx-runtime";import{memo as d,useCallback as l}from"react";import{CodeBlock as i}from"@redocly/theme/components/CodeBlock/CodeBlock";import{SelectOrLabel as s}from"../SelectOrLabel/index.js";import{MediaTypesSwitch as u}from"../MediaTypeSwitch/index.js";import{SelectWrapper as S}from"../PayloadSamples/index.js";import{Example as h}from"./Example.js";import{MimeLabel as f,Select as b}from"../common/index.js";import{styled as g}from"../../styled-components.js";function p({onCopyClick:o,...e}){const t=e.operation.requestBody?.content,c=l(a=>(t?.mediaTypes?.length??0)>1?r(S,{children:r(s,{Label:f,Select:b,variant:"dark",fullWidth:!0,...a})}):null,[t]),n=l(a=>e.source?r(m,{lang:e.lang,source:e.source,header:{className:"code-block-header",controls:{copy:{onClick:o}}}}):r(m,{lang:e.lang,externalSource:{sample:e.externalSample,exampleName:a,operation:e.operation,pathParams:e.pathParams,properties:e.properties},header:{className:"code-block-header",controls:{copy:{onClick:o}}}}),[o,e.externalSample,e.lang,e.operation,e.pathParams,e.properties,e.source]);return t===void 0||e.source!=null?n():r(u,{content:t,renderSelect:c,children:a=>r(h,{mediaType:a,mediaContent:t,renderSample:n})})}const M=d(p),m=g(i)`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
+import { SelectOrLabel } from '../SelectOrLabel/index.js';
+import { MediaTypesSwitch } from '../MediaTypeSwitch/index.js';
+import { SelectWrapper } from '../PayloadSamples/index.js';
+import { Example } from './Example.js';
+import { MimeLabel, Select } from '../common/index.js';
+import { styled } from '../../styled-components.js';
+function CodeSampleComponent({ onCopyClick, ...props }) {
+    const mimeContent = props.operation.requestBody?.content;
+    const renderSelect = useCallback((props) => {
+        const hasSelect = (mimeContent?.mediaTypes?.length ?? 0) > 1;
+        return hasSelect ? (_jsx(SelectWrapper, { children: _jsx(SelectOrLabel, { Label: MimeLabel, Select: Select, variant: "dark", fullWidth: true, ...props }) })) : null;
+    }, [mimeContent]);
+    const renderSample = useCallback((exampleName) => {
+        return props.source ? (_jsx(StyledCodeBlock, { lang: props.lang, source: props.source, header: {
+                className: 'code-block-header',
+                controls: {
+                    copy: {
+                        onClick: onCopyClick,
+                    },
+                },
+            } })) : (_jsx(StyledCodeBlock, { lang: props.lang, externalSource: {
+                sample: props.externalSample,
+                exampleName,
+                operation: props.operation,
+                pathParams: props.pathParams,
+                properties: props.properties,
+            }, header: {
+                className: 'code-block-header',
+                controls: {
+                    copy: {
+                        onClick: onCopyClick,
+                    },
+                },
+            } }));
+    }, [
+        onCopyClick,
+        props.externalSample,
+        props.lang,
+        props.operation,
+        props.pathParams,
+        props.properties,
+        props.source,
+    ]);
+    if (mimeContent === undefined || props.source != undefined) {
+        return renderSample();
+    }
+    return (_jsx(MediaTypesSwitch, { content: mimeContent, renderSelect: renderSelect, children: (mediaType) => (_jsx(Example, { mediaType: mediaType, mediaContent: mimeContent, renderSample: renderSample })) }));
+}
+export const CodeSample = memo(CodeSampleComponent);
+const StyledCodeBlock = styled(CodeBlock) `
   border: none;
   margin: 0;
 
@@ -6,4 +58,5 @@ import{jsx as r}from"react/jsx-runtime";import{memo as d,useCallback as l}from"r
     border-bottom: 0;
     padding-right: var(--spacing-sm);
   }
-`;export{M as CodeSample};
+`;
+//# sourceMappingURL=CodeSample.js.map

package/lib/components/RequestSamples/Example.js

@@ -1 +1,37 @@
-import{jsx as c,Fragment as f,jsxs as h}from"react/jsx-runtime";import{memo as u}from"react";import{useAtom as E}from"jotai";import{ExampleSwitch as g,useExampleKey as _}from"../Samples/index.js";import{useActivateExample as d,useTelemetry as j}from"../../hooks/index.js";import{operationStore as y}from"../../jotai/operation.js";function O({mediaType:o,mediaContent:p,renderSample:n}){const r=j(),m=o.operation.pointer,[l,x]=E(y(m)),a=o.examples||{},e=Object.keys(a),i=d(p),{exampleKey:s}=_(o.operation,a);return!e.length||e.length===1?n():h(f,{children:[c(g,{examples:a,exampleKey:s,onChange:t=>{r.send({type:"openapi_docs.examples_switcher.clicked",payload:{example:t,number_of_examples:e.length}}),x({...l,activeExampleName:t,activeOneOf:{[m]:e.indexOf(t)},requestValues:{body:null}}),i(t)}}),n(s)]})}const N=u(O);export{N as Example};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAtom } from 'jotai';
+import { ExampleSwitch, useExampleKey } from '../Samples/index.js';
+import { useActivateExample, useTelemetry } from '../../hooks/index.js';
+import { operationStore } from '../../jotai/operation.js';
+function ExampleComponent({ mediaType, mediaContent, renderSample }) {
+    const telemetry = useTelemetry();
+    const pointer = mediaType.operation.pointer;
+    const [operation, setOperation] = useAtom(operationStore(pointer));
+    const examples = mediaType.examples || {};
+    const examplesKeys = Object.keys(examples);
+    const setActivateExampleName = useActivateExample(mediaContent);
+    const { exampleKey } = useExampleKey(mediaType.operation, examples);
+    if (!examplesKeys.length || examplesKeys.length === 1) {
+        return renderSample();
+    }
+    const handleExampleChange = (key) => {
+        telemetry.send({
+            type: 'openapi_docs.examples_switcher.clicked',
+            payload: {
+                example: key,
+                numberOfExamples: examplesKeys.length,
+            },
+        });
+        setOperation({
+            ...operation,
+            activeExampleName: key,
+            activeOneOf: { [pointer]: examplesKeys.indexOf(key) },
+            requestValues: { body: null },
+        });
+        setActivateExampleName(key);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ExampleSwitch, { examples: examples, exampleKey: exampleKey, onChange: handleExampleChange }), renderSample(exampleKey)] }));
+}
+export const Example = memo(ExampleComponent);
+//# sourceMappingURL=Example.js.map

package/lib/components/RequestSamples/RequestSamples.js

@@ -1,12 +1,96 @@
-import{jsx as o,jsxs as D}from"react/jsx-runtime";import{memo as M,useCallback as k,useMemo as A}from"react";import{useAtomValue as y,useAtom as T}from"jotai";import{PanelHeader as U}from"@redocly/theme/components/Panel/PanelHeader";import{PayloadSamples as W}from"../PayloadSamples/index.js";import{CodeSample as B}from"./CodeSample.js";import{useCodeSamples as F}from"./useCodeSamples.js";import{isPayloadSample as H}from"../../models/index.js";import{createCodeSampleCopyEvent as O,createLanguageSwitchEvent as V}from"../../events/index.js";import{globalStoreAtom as $}from"../../jotai/store.js";import{ServerListDropdown as z}from"../ServerListDropdown/index.js";import{LanguageDropdown as G}from"../Language/index.js";import{activeMimeNameAtom as J,languageAtom as K}from"../../jotai/app.js";import{Replay as L}from"../Replay/index.js";import{CodeBlockPanel as w}from"../common/index.js";import{useActiveWithFallback as Q,useTelemetry as X}from"../../hooks/index.js";import{operationStore as Y}from"../../jotai/operation.js";import{styled as v}from"../../styled-components.js";function Z({operation:a,disableFooter:P,onPanelToggle:S,...p}){const c=X(),[{activeLanguage:q,languages:m},R]=T(K),{samples:n}=F(a),{parser:d,options:{events:s,corsProxyUrl:g,hideReplay:_}}=y($),i=!P&&!a.isWebhook&&!_&&!a.hideReplay,t=!!m?.length,u=Q(n,q),E=e=>{R(e),c.send({type:"openapi_docs.select_language.clicked",payload:{language:e}});const r=m?.find(l=>l.key===e);if(s?.codeSamplesLanguageSwitch&&r){const l=V({operation:a,sample:{lang:r.lang,label:r.title}});s.codeSamplesLanguageSwitch(l)}},h=y(J),{activeExampleName:x}=y(Y(a.pointer)),f=k(({lang:e,title:r})=>()=>{const l=O({operation:a,label:r,lang:e,type:"request",activeMimeName:h,activeExampleName:x});c.send({type:"openapi_docs.copy_code_snippet.clicked",payload:{snippet_type:"request",language:e}}),s?.codeSamplesCopy?.(l)},[a,c,s,h,x]),b=k(e=>{S?.(e,"request-samples")},[S]),C=()=>D(I,{isExpandable:!1,withReplay:!t&&i,children:[o(ee,{operation:a}),t&&o(G,{activeTab:u,samples:n,onChange:E}),!t&&i&&o(L,{operation:a,corsProxyUrl:g,fullOpenApi:d.definition})]}),j=A(()=>{if(i&&t)return o(ae,{children:o(L,{operation:a,corsProxyUrl:g,fullOpenApi:d.definition})})},[i,t,a,g,d.definition]),N=A(()=>n.map(e=>e.key===u?o("div",{children:H(e)?o(W,{content:e.requestBodyContent,onCopyClick:f(e),onPanelToggle:b,...p}):o(B,{lang:e.lang,source:e.source,externalSample:e,operation:a,onCopyClick:f(e),...p})},e.key+a.id):null),[u,f,b,a,p,n]);return m&&!n.length?o(w,{className:"panel-request-samples",header:C,isExpandable:!1,expanded:!1}):n.length?o(w,{className:"panel-request-samples",header:C,footer:j,isExpandable:!1,children:N}):null}const xe=M(Z),I=v(U)`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from 'react';
+import { useAtomValue, useAtom } from 'jotai';
+import { PanelHeader } from '@redocly/theme/components/Panel/PanelHeader';
+import { PayloadSamples } from '../PayloadSamples/index.js';
+import { CodeSample } from './CodeSample.js';
+import { useCodeSamples } from './useCodeSamples.js';
+import { isPayloadSample } from '../../models/index.js';
+import { createCodeSampleCopyEvent, createLanguageSwitchEvent } from '../../events/index.js';
+import { globalStoreAtom } from '../../jotai/store.js';
+import { ServerListDropdown } from '../ServerListDropdown/index.js';
+import { LanguageDropdown } from '../Language/index.js';
+import { activeMimeNameAtom, languageAtom } from '../../jotai/app.js';
+import { Replay } from '../Replay/index.js';
+import { CodeBlockPanel } from '../common/index.js';
+import { useActiveWithFallback, useTelemetry } from '../../hooks/index.js';
+import { operationStore } from '../../jotai/operation.js';
+import { styled } from '../../styled-components.js';
+function RequestSamplesComponent({ operation, disableFooter, onPanelToggle, ...props }) {
+    const telemetry = useTelemetry();
+    const [{ activeLanguage, languages }, setLanguage] = useAtom(languageAtom);
+    const { samples } = useCodeSamples(operation);
+    const { parser, options: { events, corsProxyUrl, hideReplay }, } = useAtomValue(globalStoreAtom);
+    const isReplayAvailable = !disableFooter && !operation.isWebhook && !hideReplay && !operation.hideReplay;
+    const isLanguagesAvailable = !!languages?.length;
+    const localActiveLanguage = useActiveWithFallback(samples, activeLanguage);
+    const onSelectLanguage = (selectedItem) => {
+        setLanguage(selectedItem);
+        telemetry.send({
+            type: 'openapi_docs.select_language.clicked',
+            payload: { language: selectedItem },
+        });
+        const selectedSampleDetails = languages?.find((lang) => lang.key === selectedItem);
+        if (events?.codeSamplesLanguageSwitch && selectedSampleDetails) {
+            const eventPayload = createLanguageSwitchEvent({
+                operation: operation,
+                sample: {
+                    lang: selectedSampleDetails.lang,
+                    label: selectedSampleDetails.title,
+                },
+            });
+            events.codeSamplesLanguageSwitch(eventPayload);
+        }
+    };
+    const activeMimeName = useAtomValue(activeMimeNameAtom);
+    const { activeExampleName } = useAtomValue(operationStore(operation.pointer));
+    const handleCodeSampleCopy = useCallback(({ lang, title }) => () => {
+        const event = createCodeSampleCopyEvent({
+            operation: operation,
+            label: title,
+            lang,
+            type: 'request',
+            activeMimeName,
+            activeExampleName,
+        });
+        telemetry.send({
+            type: 'openapi_docs.copy_code_snippet.clicked',
+            payload: { snippetType: 'request', language: lang },
+        });
+        events?.codeSamplesCopy?.(event);
+    }, [operation, telemetry, events, activeMimeName, activeExampleName]);
+    const handlePanelToggle = useCallback((isExpanded) => {
+        onPanelToggle?.(isExpanded, 'request-samples');
+    }, [onPanelToggle]);
+    const renderSummary = () => {
+        return (_jsxs(StyledPanelHeader, { isExpandable: false, withReplay: !isLanguagesAvailable && isReplayAvailable, children: [_jsx(StyledServerListDropdown, { operation: operation }), isLanguagesAvailable && (_jsx(LanguageDropdown, { activeTab: localActiveLanguage, samples: samples, onChange: onSelectLanguage })), !isLanguagesAvailable && isReplayAvailable && (_jsx(Replay, { operation: operation, corsProxyUrl: corsProxyUrl, fullOpenApi: parser.definition }))] }));
+    };
+    const renderFooter = useMemo(() => {
+        if (isReplayAvailable && isLanguagesAvailable) {
+            return (_jsx(ReplayWrapper, { children: _jsx(Replay, { operation: operation, corsProxyUrl: corsProxyUrl, fullOpenApi: parser.definition }) }));
+        }
+    }, [isReplayAvailable, isLanguagesAvailable, operation, corsProxyUrl, parser.definition]);
+    const renderSamples = useMemo(() => samples.map((sample) => {
+        return sample.key === localActiveLanguage ? (_jsx("div", { children: isPayloadSample(sample) ? (_jsx(PayloadSamples, { content: sample.requestBodyContent, onCopyClick: handleCodeSampleCopy(sample), onPanelToggle: handlePanelToggle, ...props })) : (_jsx(CodeSample, { lang: sample.lang, source: sample.source, externalSample: sample, operation: operation, onCopyClick: handleCodeSampleCopy(sample), ...props })) }, sample.key + operation.id)) : null;
+    }), [localActiveLanguage, handleCodeSampleCopy, handlePanelToggle, operation, props, samples]);
+    if (languages && !samples.length) {
+        return (_jsx(CodeBlockPanel, { className: "panel-request-samples", header: renderSummary, isExpandable: false, expanded: false }));
+    }
+    return samples.length ? (_jsx(CodeBlockPanel, { className: "panel-request-samples", header: renderSummary, footer: renderFooter, isExpandable: false, children: renderSamples })) : null;
+}
+export const RequestSamples = memo(RequestSamplesComponent);
+const StyledPanelHeader = styled(PanelHeader) `
   flex-wrap: nowrap;
-  ${({withReplay:a})=>a&&"padding: var(--spacing-xs) var(--spacing-sm);"}
-`,ee=v(z)`
+  ${({ withReplay }) => withReplay && 'padding: var(--spacing-xs) var(--spacing-sm);'}
+`;
+const StyledServerListDropdown = styled(ServerListDropdown) `
   padding-right: var(--spacing-base);
   min-width: 0;
-`,ae=v.div`
+`;
+const ReplayWrapper = styled.div `
   display: flex;
   justify-content: flex-end;
   border-top: var(--panel-border);
   padding: var(--spacing-base) var(--spacing-md) var(--spacing-md);
-`;export{xe as RequestSamples};
+`;
+//# sourceMappingURL=RequestSamples.js.map

package/lib/components/RequestSamples/index.js

@@ -1 +1,3 @@
-import{CodeSample as m}from"./CodeSample.js";import{RequestSamples as r}from"./RequestSamples.js";export{m as CodeSample,r as RequestSamples};
+export { CodeSample } from './CodeSample.js';
+export { RequestSamples } from './RequestSamples.js';
+//# sourceMappingURL=index.js.map