@stoplight/elements-core 7.8.0 → 7.10.0

package/components/Docs/HttpOperation/Responses.d.ts

@@ -3,9 +3,10 @@ interface ResponsesProps {
     responses: IHttpOperationResponse[];
     onMediaTypeChange(mediaType: string): void;
     onStatusCodeChange(statusCode: string): void;
+    isCompact?: boolean;
 }
 export declare const Responses: {
-    ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }: ResponsesProps): JSX.Element | null;
+    ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }: ResponsesProps): JSX.Element | null;
     displayName: string;
 };
 export {};

package/components/TryIt/Servers/ServerVariables.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ServerVariable } from '../../../utils/http-spec/IServer';
+interface ServerVariablesProps<P extends keyof any = string> {
+    variables: readonly ServerVariable[];
+    values: Record<P, string>;
+    onChangeValue: (variableName: P, newValue: string) => void;
+}
+export declare const ServerVariables: React.FC<ServerVariablesProps>;
+export {};

package/components/TryIt/Servers/VariableEditor.d.ts

@@ -0,0 +1,11 @@
+import { SelectProps } from '@stoplight/mosaic';
+import * as React from 'react';
+import { ServerVariable } from '../../../utils/http-spec/IServer';
+interface VariableProps {
+    variable: ServerVariable;
+    value?: string;
+    onChange: SelectProps['onChange'];
+    validate?: boolean;
+}
+export declare const VariableEditor: React.FC<VariableProps>;
+export {};

package/components/TryIt/Servers/useServerVariables.d.ts

@@ -0,0 +1,4 @@
+export declare const useServerVariables: () => {
+    serverVariables: {};
+    updateServerVariableValue: (name: string, value: string) => void;
+};

package/components/TryIt/TryIt.stories.d.ts

@@ -4,6 +4,7 @@ declare const _default: Meta<TryItProps>;
 export default _default;
 export declare const SimpleGET: Story<TryItProps>;
 export declare const WithParameters: Story<TryItProps>;
+export declare const WithVariables: Story<TryItProps>;
 export declare const UrlEncoded: Story<TryItProps>;
 export declare const Multipart: Story<TryItProps>;
 export declare const RequestBodySchema: Story<TryItProps>;

package/components/TryIt/TryItWithRequestSamples.stories.d.ts

@@ -3,3 +3,4 @@ import { TryItWithRequestSamplesProps } from './TryItWithRequestSamples';
 declare const _default: Meta<TryItWithRequestSamplesProps>;
 export default _default;
 export declare const WithParameters: Story<TryItWithRequestSamplesProps>;
+export declare const WithVariables: Story<TryItWithRequestSamplesProps>;

package/components/TryIt/build-request.d.ts

@@ -7,6 +7,7 @@ interface BuildRequestInput {
     httpOperation: IHttpOperation;
     mediaTypeContent: IMediaTypeContent | undefined;
     parameterValues: Dictionary<string, string>;
+    serverVariableValues: Dictionary<string, string>;
     bodyInput?: BodyParameterValues | string;
     mockData?: MockData;
     auth?: HttpSecuritySchemeWithValues;
@@ -18,7 +19,7 @@ export declare const getQueryParams: ({ httpOperation, parameterValues, }: Pick<
     name: string;
     value: string;
 }[];
-export declare function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, mockData, auth, chosenServer, credentials, corsProxy, }: BuildRequestInput): Promise<Parameters<typeof fetch>>;
-export declare function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }: BuildRequestInput): Promise<HarRequest>;
+export declare function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, serverVariableValues, mockData, auth, chosenServer, credentials, corsProxy, }: BuildRequestInput): Promise<Parameters<typeof fetch>>;
+export declare function buildHarRequest({ httpOperation, bodyInput, parameterValues, serverVariableValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }: BuildRequestInput): Promise<HarRequest>;
 export declare function getAcceptedMimeTypes(httpOperation: IHttpOperation): string[];
 export {};

package/index.esm.js

@@ -7,7 +7,7 @@ import isArray from 'lodash/isArray.js';
 import isPlainObject from 'lodash/isPlainObject.js';
 import { NodeType, HttpParamStyles } from '@stoplight/types';
 import { parse } from '@stoplight/yaml';
-import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useBreakpoints, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { isArray as isArray$1, Box, useBreakpoints, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, useModalState, Modal, ListBox, ListBoxItem, TabList, Tab, Tabs, TabPanels, TabPanel, Heading, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
 import { useLocation, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
@@ -16,7 +16,6 @@ export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
 import { atom, useAtom, Provider } from 'jotai';
-import isEmpty from 'lodash/isEmpty.js';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
 import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
@@ -42,6 +41,7 @@ import entries from 'lodash/entries.js';
 import keys from 'lodash/keys.js';
 import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import sortBy from 'lodash/sortBy.js';
+import isEmpty from 'lodash/isEmpty.js';
 import isNil from 'lodash/isNil.js';
 import omitBy from 'lodash/omitBy.js';
 import { HashLink } from 'react-router-hash-link';
@@ -486,6 +486,22 @@ function useChosenServerUrl(chosenServerUrl) {
     };
 }
 
+const getBreakpoints = (compact) => {
+    if (!compact)
+        return undefined;
+    if (typeof compact === 'number') {
+        return [
+            ['compact', compact],
+            ['regular', Infinity],
+        ];
+    }
+    return [['compact', Infinity]];
+};
+function useIsCompact(layoutOptions) {
+    const { ref, breakpoint } = useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
+    return { ref: ref, isCompact: breakpoint === 'compact' };
+}
+
 const chosenServerAtom = atom(undefined);
 
 function isValidServer(server) {
@@ -496,10 +512,7 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
         const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
         let url = server.url;
         if (inlineDefaults) {
-            url = getServerUrlWithDefaultValues(server);
-        }
-        else if (isEmpty(server.variables)) {
-            url = resolveUrl(server.url);
+            url = getServerUrlWithVariableValues(server, {});
         }
         return Object.assign(Object.assign({}, server), { url, description: server.description || fallbackDescription });
     });
@@ -512,7 +525,18 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
     }
     return servers.filter(isValidServer);
 };
+const getServerVariables = (server) => {
+    var _a;
+    return Object.entries((_a = server === null || server === void 0 ? void 0 : server.variables) !== null && _a !== void 0 ? _a : {}).map(([key, value]) => ({
+        name: key,
+        default: value.default,
+        description: value.description,
+        enum: value.enum,
+    }));
+};
 function resolveUrl(urlString) {
+    if (urlString === null)
+        return null;
     let url;
     try {
         url = URI(urlString);
@@ -532,14 +556,15 @@ function resolveUrl(urlString) {
     }
     return null;
 }
-const getServerUrlWithDefaultValues = (server) => {
+const getServerUrlWithVariableValues = (server, values) => {
     var _a;
     let urlString = server.url;
     const variables = Object.entries((_a = server.variables) !== null && _a !== void 0 ? _a : {});
     variables.forEach(([variableName, variableInfo]) => {
-        urlString = urlString.replaceAll(`{${variableName}}`, variableInfo.default);
+        var _a;
+        urlString = urlString.replaceAll(`{${variableName}}`, (_a = values[variableName]) !== null && _a !== void 0 ? _a : variableInfo.default);
     });
-    return resolveUrl(urlString);
+    return urlString;
 };
 
 const persistAtom = (key, atomInstance) => {
@@ -1418,11 +1443,11 @@ const useTextRequestBodyState = (mediaTypeContent) => {
 };
 
 const nameAndValueObjectToPair = ({ name, value }) => [name, value];
-const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, }) => {
+const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, serverVariableValues, }) => {
     var _a;
     const server = chosenServer || ((_a = httpOperation.servers) === null || _a === void 0 ? void 0 : _a[0]);
-    const chosenServerUrl = server && getServerUrlWithDefaultValues(server);
-    const serverUrl = (mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin;
+    const chosenServerUrl = server && getServerUrlWithVariableValues(server, serverVariableValues);
+    const serverUrl = resolveUrl((mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin);
     if (corsProxy && !mockData) {
         return `${corsProxy}${serverUrl}`;
     }
@@ -1499,10 +1524,10 @@ const getQueryParams = ({ httpOperation, parameterValues, }) => {
         return acc;
     }, []);
 };
-function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
+function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, serverVariableValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
     var _a, _b, _c;
     return __awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
         const rawHeaders = filterOutAuthorizationParams((_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.headers) !== null && _b !== void 0 ? _b : [], httpOperation.security)
@@ -1575,10 +1600,10 @@ const runAuthRequestEhancements = (auth, queryParams, headers) => {
     }
     return [newQueryParams, newHeaders];
 };
-function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
+function buildHarRequest({ httpOperation, bodyInput, parameterValues, serverVariableValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
     var _a, _b, _c, _d;
     return __awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const mimeType = (_a = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _a !== void 0 ? _a : 'application/json';
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
@@ -1900,8 +1925,18 @@ class NetworkError extends Error {
 }
 const isNetworkError = (error) => error instanceof NetworkError;
 
+const persistedServerVariableValuesAtom = atom({});
+const useServerVariables = () => {
+    const [serverVariables, setPersistedServerVariableValues] = useAtom(persistedServerVariableValuesAtom);
+    const updateServerVariableValue = (name, value) => {
+        setPersistedServerVariableValues(Object.assign({}, serverVariables, { [name]: value }));
+    };
+    return { serverVariables, updateServerVariableValue };
+};
+
 const ServersDropdown = ({ servers }) => {
     const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
+    const { serverVariables } = useServerVariables();
     const serverItems = [
         {
             type: 'option_group',
@@ -1915,7 +1950,7 @@ const ServersDropdown = ({ servers }) => {
                 ...servers.map((server, i) => ({
                     id: server.url,
                     title: server.description,
-                    description: server.url,
+                    description: getServerUrlWithVariableValues(server, serverVariables),
                     value: server.url,
                 })),
             ],
@@ -1925,6 +1960,21 @@ const ServersDropdown = ({ servers }) => {
 };
 ServersDropdown.displayName = 'ServersDropdown';
 
+const VariableEditor = ({ variable, value, onChange }) => {
+    const inputId = useUniqueId(`id_${variable.name}_`);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, variable.name),
+        React.createElement(Text, { mx: 3 }, ":"),
+        React.createElement("div", null, variable.enum ? (React.createElement(Select, { flex: 1, "aria-label": variable.name, options: variable.enum.map(s => ({ value: s })), value: value || variable.default, onChange: onChange })) : (React.createElement(Flex, { flex: 1 },
+            React.createElement(Input, { id: inputId, "aria-label": variable.name, appearance: 'minimal', flex: 1, placeholder: variable.default, type: "text", required: true, intent: 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }))))));
+};
+
+const ServerVariables = ({ variables, values, onChangeValue }) => {
+    return (React.createElement(Panel, { defaultIsOpen: true },
+        React.createElement(Panel.Titlebar, null, "Server Variables"),
+        React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React.createElement(VariableEditor, { key: variable.name, variable: variable, value: values[variable.name], onChange: (value) => onChangeValue(variable.name, String(value)) }))))));
+};
+
 const defaultServers = [];
 const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embeddedInMd = false, tryItCredentialsPolicy, corsProxy, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -1941,10 +1991,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
     const servers = React.useMemo(() => {
-        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, true);
+        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, false);
     }, [httpOperation.servers, mockUrl]);
     const firstServer = servers[0] || null;
     const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
+    const serverVariables = getServerVariables(chosenServer);
+    const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
     const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
     const getValues = () => Object.keys(bodyParameterValues)
@@ -1966,7 +2018,8 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     React.useEffect(() => {
         let isMounted = true;
         if (onRequestChange || embeddedInMd) {
-            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
+            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, serverVariableValues,
+                httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
                 corsProxy })).then(request => {
                 if (isMounted) {
                     if (onRequestChange) {
@@ -1986,6 +2039,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        serverVariableValues,
         isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
@@ -2003,6 +2057,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             const mockData = isMockingEnabled ? getMockData(mockUrl, httpOperation, mockingOptions) : undefined;
             const request = yield buildFetchRequest({
                 parameterValues: parameterValuesWithDefaults,
+                serverVariableValues,
                 httpOperation,
                 mediaTypeContent,
                 bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody,
@@ -2043,6 +2098,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const isOnlySendButton = !((_d = httpOperation.security) === null || _d === void 0 ? void 0 : _d.length) && !allParameters.length && !formDataState.isFormDataBody && !mediaTypeContent;
     const tryItPanelContents = (React.createElement(React.Fragment, null,
         ((_e = httpOperation.security) === null || _e === void 0 ? void 0 : _e.length) ? (React.createElement(TryItAuth, { onChange: setOperationAuthValue, operationSecurityScheme: (_f = httpOperation.security) !== null && _f !== void 0 ? _f : [], value: operationAuthValue })) : null,
+        serverVariables.length > 0 && (React.createElement(ServerVariables, { variables: serverVariables, values: serverVariableValues, onChangeValue: updateServerVariableValue })),
         allParameters.length > 0 && (React.createElement(OperationParameters, { parameters: allParameters, values: parameterValuesWithDefaults, onChangeValue: updateParameterValue, validate: validateParameters })),
         formDataState.isFormDataBody ? (React.createElement(FormDataBody, { specification: formDataState.bodySpecification, values: bodyParameterValues, onChangeValues: setBodyParameterValues, onChangeParameterAllow: setAllowedEmptyValues, isAllowedEmptyValues: isAllowedEmptyValues })) : mediaTypeContent ? (React.createElement(RequestBody, { examples: (_g = mediaTypeContent.examples) !== null && _g !== void 0 ? _g : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
         React.createElement(Panel.Content, { className: "SendButtonHolder", mt: 4, pt: !isOnlySendButton && !embeddedInMd ? 0 : undefined },
@@ -2370,20 +2426,41 @@ const SecuritySchemes$1 = ({ schemes }) => {
         React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) }))))));
 };
 
-const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }) => {
+const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
     var _a, _b;
     const responses = sortBy(uniqBy(unsortedResponses, r => r.code), r => r.code);
     const [activeResponseId, setActiveResponseId] = React.useState((_b = (_a = responses[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '');
+    const { isOpen, open, close } = useModalState();
+    const onSelectionChange = React.useCallback(keys => {
+        const selectedId = keys.values().next().value;
+        const selectedResponse = responses === null || responses === void 0 ? void 0 : responses.find(response => response.id === selectedId);
+        if (selectedResponse) {
+            setActiveResponseId(selectedResponse.code);
+            close();
+        }
+    }, [responses, setActiveResponseId, close]);
     React.useEffect(() => {
         onStatusCodeChange(activeResponseId);
     }, [activeResponseId]);
     if (!responses.length)
         return null;
+    const response = responses.find(r => r.code === activeResponseId) || responses[0];
+    const compactResponses = (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onPress: open, iconRight: React.createElement(Icon, { icon: "chevron-down", color: "var(--color-border-button)" }), style: {
+                color: `var(--color-${codeToIntentVal(activeResponseId)})`,
+            } }, activeResponseId),
+        React.createElement(Modal, { title: "Response Code", isOpen: isOpen, onClose: close, size: "sm", footer: React.createElement(HStack, { justifyContent: "end" },
+                React.createElement(Button, { onPress: close, intent: "default", appearance: "primary" }, "Close")) },
+            React.createElement(ListBox, { "aria-label": "Response Code", overflowY: "auto", m: -5, items: responses, selectionMode: "single", onSelectionChange: onSelectionChange }, (response) => (React.createElement(ListBoxItem, { key: response.id },
+                React.createElement(Box, { p: 3, bg: { hover: 'primary-tint' } },
+                    React.createElement(Flex, { w: "2xl", align: "center", justify: "end" },
+                        response.code === activeResponseId && React.createElement(Box, { as: Icon, icon: "check" }),
+                        React.createElement(Text, { ml: 3, fontWeight: "medium" }, response.code)))))))));
+    const tabResponses = (React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React.createElement(VStack, { spacing: 8, as: Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
-        React.createElement(SectionTitle, { title: "Responses" },
-            React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code))))),
-        React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
-            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })))))));
+        React.createElement(SectionTitle, { title: "Responses" }, isCompact ? compactResponses : tabResponses),
+        isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
+            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
 };
 Responses.displayName = 'HttpOperation.Responses';
 const Response = ({ response, onMediaTypeChange }) => {
@@ -2428,6 +2505,7 @@ const codeToIntentVal = (code) => {
 const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
+    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const mocking = React.useContext(MockingContext);
     const isDeprecated = !!data.deprecated;
     const isInternal = !!data.internal;
@@ -2437,15 +2515,16 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
     const prettyName = (data.summary || data.iid || '').trim();
     const hasBadges = isDeprecated || isInternal;
     const header = (React.createElement(OperationHeader, { id: data.id, method: data.method, path: data.path, noHeading: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading, hasBadges: hasBadges, name: prettyName, isDeprecated: isDeprecated, isInternal: isInternal }));
+    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
     const description = (React.createElement(VStack, { spacing: 10 },
         data.description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
-        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode }))));
-    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
-    return (React.createElement(TwoColumnLayout, { className: cn('HttpOperation', className), header: header, left: description, right: tryItPanel }));
+        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
+        isCompact && tryItPanel));
+    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
 const HttpOperation = withErrorBoundary(HttpOperationComponent, {
@@ -2677,22 +2756,6 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
-const getBreakpoints = (compact) => {
-    if (!compact)
-        return undefined;
-    if (typeof compact === 'number') {
-        return [
-            ['compact', compact],
-            ['regular', Infinity],
-        ];
-    }
-    return [['compact', Infinity]];
-};
-function useIsCompact(layoutOptions) {
-    const { ref, breakpoint } = useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
-    return { ref: ref, isCompact: breakpoint === 'compact' };
-}
-
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a, _b;
     const resolveRef = useSchemaInlineRefResolver();

package/index.js

@@ -18,7 +18,6 @@ var markdownViewer = require('@stoplight/markdown-viewer');
 var cn = require('classnames');
 var utils = require('jotai/utils');
 var jotai = require('jotai');
-var isEmpty = require('lodash/isEmpty.js');
 var URI = require('urijs');
 var mosaicCodeViewer = require('@stoplight/mosaic-code-viewer');
 var httpsnippetLite = require('httpsnippet-lite');
@@ -44,6 +43,7 @@ var entries = require('lodash/entries.js');
 var keys = require('lodash/keys.js');
 var jsonSchemaViewer = require('@stoplight/json-schema-viewer');
 var sortBy = require('lodash/sortBy.js');
+var isEmpty = require('lodash/isEmpty.js');
 var isNil = require('lodash/isNil.js');
 var omitBy = require('lodash/omitBy.js');
 var reactRouterHashLink = require('react-router-hash-link');
@@ -79,7 +79,6 @@ var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var URI__default = /*#__PURE__*/_interopDefaultLegacy(URI);
 var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
 var capitalize__default = /*#__PURE__*/_interopDefaultLegacy(capitalize);
@@ -100,6 +99,7 @@ var formatXml__default = /*#__PURE__*/_interopDefaultLegacy(formatXml);
 var entries__default = /*#__PURE__*/_interopDefaultLegacy(entries);
 var keys__default = /*#__PURE__*/_interopDefaultLegacy(keys);
 var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
+var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var isNil__default = /*#__PURE__*/_interopDefaultLegacy(isNil);
 var omitBy__default = /*#__PURE__*/_interopDefaultLegacy(omitBy);
 var $RefParser__default = /*#__PURE__*/_interopDefaultLegacy($RefParser);
@@ -542,6 +542,22 @@ function useChosenServerUrl(chosenServerUrl) {
     };
 }
 
+const getBreakpoints = (compact) => {
+    if (!compact)
+        return undefined;
+    if (typeof compact === 'number') {
+        return [
+            ['compact', compact],
+            ['regular', Infinity],
+        ];
+    }
+    return [['compact', Infinity]];
+};
+function useIsCompact(layoutOptions) {
+    const { ref, breakpoint } = mosaic.useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
+    return { ref: ref, isCompact: breakpoint === 'compact' };
+}
+
 const chosenServerAtom = jotai.atom(undefined);
 
 function isValidServer(server) {
@@ -552,10 +568,7 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
         const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
         let url = server.url;
         if (inlineDefaults) {
-            url = getServerUrlWithDefaultValues(server);
-        }
-        else if (isEmpty__default["default"](server.variables)) {
-            url = resolveUrl(server.url);
+            url = getServerUrlWithVariableValues(server, {});
         }
         return Object.assign(Object.assign({}, server), { url, description: server.description || fallbackDescription });
     });
@@ -568,7 +581,18 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
     }
     return servers.filter(isValidServer);
 };
+const getServerVariables = (server) => {
+    var _a;
+    return Object.entries((_a = server === null || server === void 0 ? void 0 : server.variables) !== null && _a !== void 0 ? _a : {}).map(([key, value]) => ({
+        name: key,
+        default: value.default,
+        description: value.description,
+        enum: value.enum,
+    }));
+};
 function resolveUrl(urlString) {
+    if (urlString === null)
+        return null;
     let url;
     try {
         url = URI__default["default"](urlString);
@@ -588,14 +612,15 @@ function resolveUrl(urlString) {
     }
     return null;
 }
-const getServerUrlWithDefaultValues = (server) => {
+const getServerUrlWithVariableValues = (server, values) => {
     var _a;
     let urlString = server.url;
     const variables = Object.entries((_a = server.variables) !== null && _a !== void 0 ? _a : {});
     variables.forEach(([variableName, variableInfo]) => {
-        urlString = urlString.replaceAll(`{${variableName}}`, variableInfo.default);
+        var _a;
+        urlString = urlString.replaceAll(`{${variableName}}`, (_a = values[variableName]) !== null && _a !== void 0 ? _a : variableInfo.default);
     });
-    return resolveUrl(urlString);
+    return urlString;
 };
 
 const persistAtom = (key, atomInstance) => {
@@ -1474,11 +1499,11 @@ const useTextRequestBodyState = (mediaTypeContent) => {
 };
 
 const nameAndValueObjectToPair = ({ name, value }) => [name, value];
-const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, }) => {
+const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, serverVariableValues, }) => {
     var _a;
     const server = chosenServer || ((_a = httpOperation.servers) === null || _a === void 0 ? void 0 : _a[0]);
-    const chosenServerUrl = server && getServerUrlWithDefaultValues(server);
-    const serverUrl = (mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin;
+    const chosenServerUrl = server && getServerUrlWithVariableValues(server, serverVariableValues);
+    const serverUrl = resolveUrl((mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin);
     if (corsProxy && !mockData) {
         return `${corsProxy}${serverUrl}`;
     }
@@ -1555,10 +1580,10 @@ const getQueryParams = ({ httpOperation, parameterValues, }) => {
         return acc;
     }, []);
 };
-function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
+function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, serverVariableValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
     var _a, _b, _c;
     return tslib.__awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
         const rawHeaders = filterOutAuthorizationParams((_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.headers) !== null && _b !== void 0 ? _b : [], httpOperation.security)
@@ -1631,10 +1656,10 @@ const runAuthRequestEhancements = (auth, queryParams, headers) => {
     }
     return [newQueryParams, newHeaders];
 };
-function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
+function buildHarRequest({ httpOperation, bodyInput, parameterValues, serverVariableValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
     var _a, _b, _c, _d;
     return tslib.__awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const mimeType = (_a = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _a !== void 0 ? _a : 'application/json';
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
@@ -1956,8 +1981,18 @@ class NetworkError extends Error {
 }
 const isNetworkError = (error) => error instanceof NetworkError;
 
+const persistedServerVariableValuesAtom = jotai.atom({});
+const useServerVariables = () => {
+    const [serverVariables, setPersistedServerVariableValues] = jotai.useAtom(persistedServerVariableValuesAtom);
+    const updateServerVariableValue = (name, value) => {
+        setPersistedServerVariableValues(Object.assign({}, serverVariables, { [name]: value }));
+    };
+    return { serverVariables, updateServerVariableValue };
+};
+
 const ServersDropdown = ({ servers }) => {
     const [chosenServer, setChosenServer] = jotai.useAtom(chosenServerAtom);
+    const { serverVariables } = useServerVariables();
     const serverItems = [
         {
             type: 'option_group',
@@ -1971,7 +2006,7 @@ const ServersDropdown = ({ servers }) => {
                 ...servers.map((server, i) => ({
                     id: server.url,
                     title: server.description,
-                    description: server.url,
+                    description: getServerUrlWithVariableValues(server, serverVariables),
                     value: server.url,
                 })),
             ],
@@ -1981,6 +2016,21 @@ const ServersDropdown = ({ servers }) => {
 };
 ServersDropdown.displayName = 'ServersDropdown';
 
+const VariableEditor = ({ variable, value, onChange }) => {
+    const inputId = useUniqueId(`id_${variable.name}_`);
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(mosaic.Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, variable.name),
+        React__namespace.createElement(mosaic.Text, { mx: 3 }, ":"),
+        React__namespace.createElement("div", null, variable.enum ? (React__namespace.createElement(mosaic.Select, { flex: 1, "aria-label": variable.name, options: variable.enum.map(s => ({ value: s })), value: value || variable.default, onChange: onChange })) : (React__namespace.createElement(mosaic.Flex, { flex: 1 },
+            React__namespace.createElement(mosaic.Input, { id: inputId, "aria-label": variable.name, appearance: 'minimal', flex: 1, placeholder: variable.default, type: "text", required: true, intent: 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }))))));
+};
+
+const ServerVariables = ({ variables, values, onChangeValue }) => {
+    return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true },
+        React__namespace.createElement(mosaic.Panel.Titlebar, null, "Server Variables"),
+        React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React__namespace.createElement(VariableEditor, { key: variable.name, variable: variable, value: values[variable.name], onChange: (value) => onChangeValue(variable.name, String(value)) }))))));
+};
+
 const defaultServers = [];
 const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embeddedInMd = false, tryItCredentialsPolicy, corsProxy, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -1997,10 +2047,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
     const servers = React__namespace.useMemo(() => {
-        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, true);
+        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, false);
     }, [httpOperation.servers, mockUrl]);
     const firstServer = servers[0] || null;
     const [chosenServer, setChosenServer] = jotai.useAtom(chosenServerAtom);
+    const serverVariables = getServerVariables(chosenServer);
+    const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
     const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
     const getValues = () => Object.keys(bodyParameterValues)
@@ -2022,7 +2074,8 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     React__namespace.useEffect(() => {
         let isMounted = true;
         if (onRequestChange || embeddedInMd) {
-            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
+            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, serverVariableValues,
+                httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
                 corsProxy })).then(request => {
                 if (isMounted) {
                     if (onRequestChange) {
@@ -2042,6 +2095,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        serverVariableValues,
         isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
@@ -2059,6 +2113,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             const mockData = isMockingEnabled ? getMockData(mockUrl, httpOperation, mockingOptions) : undefined;
             const request = yield buildFetchRequest({
                 parameterValues: parameterValuesWithDefaults,
+                serverVariableValues,
                 httpOperation,
                 mediaTypeContent,
                 bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody,
@@ -2099,6 +2154,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const isOnlySendButton = !((_d = httpOperation.security) === null || _d === void 0 ? void 0 : _d.length) && !allParameters.length && !formDataState.isFormDataBody && !mediaTypeContent;
     const tryItPanelContents = (React__namespace.createElement(React__namespace.Fragment, null,
         ((_e = httpOperation.security) === null || _e === void 0 ? void 0 : _e.length) ? (React__namespace.createElement(TryItAuth, { onChange: setOperationAuthValue, operationSecurityScheme: (_f = httpOperation.security) !== null && _f !== void 0 ? _f : [], value: operationAuthValue })) : null,
+        serverVariables.length > 0 && (React__namespace.createElement(ServerVariables, { variables: serverVariables, values: serverVariableValues, onChangeValue: updateServerVariableValue })),
         allParameters.length > 0 && (React__namespace.createElement(OperationParameters, { parameters: allParameters, values: parameterValuesWithDefaults, onChangeValue: updateParameterValue, validate: validateParameters })),
         formDataState.isFormDataBody ? (React__namespace.createElement(FormDataBody, { specification: formDataState.bodySpecification, values: bodyParameterValues, onChangeValues: setBodyParameterValues, onChangeParameterAllow: setAllowedEmptyValues, isAllowedEmptyValues: isAllowedEmptyValues })) : mediaTypeContent ? (React__namespace.createElement(RequestBody, { examples: (_g = mediaTypeContent.examples) !== null && _g !== void 0 ? _g : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
         React__namespace.createElement(mosaic.Panel.Content, { className: "SendButtonHolder", mt: 4, pt: !isOnlySendButton && !embeddedInMd ? 0 : undefined },
@@ -2426,20 +2482,41 @@ const SecuritySchemes$1 = ({ schemes }) => {
         React__namespace.createElement(mosaic.NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) }))))));
 };
 
-const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }) => {
+const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
     var _a, _b;
     const responses = sortBy__default["default"](uniqBy__default["default"](unsortedResponses, r => r.code), r => r.code);
     const [activeResponseId, setActiveResponseId] = React__namespace.useState((_b = (_a = responses[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '');
+    const { isOpen, open, close } = mosaic.useModalState();
+    const onSelectionChange = React__namespace.useCallback(keys => {
+        const selectedId = keys.values().next().value;
+        const selectedResponse = responses === null || responses === void 0 ? void 0 : responses.find(response => response.id === selectedId);
+        if (selectedResponse) {
+            setActiveResponseId(selectedResponse.code);
+            close();
+        }
+    }, [responses, setActiveResponseId, close]);
     React__namespace.useEffect(() => {
         onStatusCodeChange(activeResponseId);
     }, [activeResponseId]);
     if (!responses.length)
         return null;
+    const response = responses.find(r => r.code === activeResponseId) || responses[0];
+    const compactResponses = (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(mosaic.Button, { onPress: open, iconRight: React__namespace.createElement(mosaic.Icon, { icon: "chevron-down", color: "var(--color-border-button)" }), style: {
+                color: `var(--color-${codeToIntentVal(activeResponseId)})`,
+            } }, activeResponseId),
+        React__namespace.createElement(mosaic.Modal, { title: "Response Code", isOpen: isOpen, onClose: close, size: "sm", footer: React__namespace.createElement(mosaic.HStack, { justifyContent: "end" },
+                React__namespace.createElement(mosaic.Button, { onPress: close, intent: "default", appearance: "primary" }, "Close")) },
+            React__namespace.createElement(mosaic.ListBox, { "aria-label": "Response Code", overflowY: "auto", m: -5, items: responses, selectionMode: "single", onSelectionChange: onSelectionChange }, (response) => (React__namespace.createElement(mosaic.ListBoxItem, { key: response.id },
+                React__namespace.createElement(mosaic.Box, { p: 3, bg: { hover: 'primary-tint' } },
+                    React__namespace.createElement(mosaic.Flex, { w: "2xl", align: "center", justify: "end" },
+                        response.code === activeResponseId && React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: "check" }),
+                        React__namespace.createElement(mosaic.Text, { ml: 3, fontWeight: "medium" }, response.code)))))))));
+    const tabResponses = (React__namespace.createElement(mosaic.TabList, { density: "compact" }, responses.map(({ code }) => (React__namespace.createElement(mosaic.Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React__namespace.createElement(mosaic.VStack, { spacing: 8, as: mosaic.Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
-        React__namespace.createElement(SectionTitle, { title: "Responses" },
-            React__namespace.createElement(mosaic.TabList, { density: "compact" }, responses.map(({ code }) => (React__namespace.createElement(mosaic.Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code))))),
-        React__namespace.createElement(mosaic.TabPanels, { p: 0 }, responses.map(response => (React__namespace.createElement(mosaic.TabPanel, { key: response.code, id: response.code },
-            React__namespace.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })))))));
+        React__namespace.createElement(SectionTitle, { title: "Responses" }, isCompact ? compactResponses : tabResponses),
+        isCompact ? (React__namespace.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React__namespace.createElement(mosaic.TabPanels, { p: 0 }, responses.map(response => (React__namespace.createElement(mosaic.TabPanel, { key: response.code, id: response.code },
+            React__namespace.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
 };
 Responses.displayName = 'HttpOperation.Responses';
 const Response = ({ response, onMediaTypeChange }) => {
@@ -2484,6 +2561,7 @@ const codeToIntentVal = (code) => {
 const HttpOperationComponent = React__namespace.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
+    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const mocking = React__namespace.useContext(MockingContext);
     const isDeprecated = !!data.deprecated;
     const isInternal = !!data.internal;
@@ -2493,15 +2571,16 @@ const HttpOperationComponent = React__namespace.memo(({ className, data: unresol
     const prettyName = (data.summary || data.iid || '').trim();
     const hasBadges = isDeprecated || isInternal;
     const header = (React__namespace.createElement(OperationHeader, { id: data.id, method: data.method, path: data.path, noHeading: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading, hasBadges: hasBadges, name: prettyName, isDeprecated: isDeprecated, isInternal: isInternal }));
+    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React__namespace.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
     const description = (React__namespace.createElement(mosaic.VStack, { spacing: 10 },
         data.description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
         React__namespace.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
-        data.responses && (React__namespace.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode }))));
-    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React__namespace.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
-    return (React__namespace.createElement(TwoColumnLayout, { className: cn__default["default"]('HttpOperation', className), header: header, left: description, right: tryItPanel }));
+        data.responses && (React__namespace.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
+        isCompact && tryItPanel));
+    return (React__namespace.createElement(TwoColumnLayout, { ref: layoutRef, className: cn__default["default"]('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
 const HttpOperation = reactErrorBoundary.withErrorBoundary(HttpOperationComponent, {
@@ -2733,22 +2812,6 @@ const HttpServiceComponent = React__namespace.memo(({ data: unresolvedData, loca
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = reactErrorBoundary.withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
-const getBreakpoints = (compact) => {
-    if (!compact)
-        return undefined;
-    if (typeof compact === 'number') {
-        return [
-            ['compact', compact],
-            ['regular', Infinity],
-        ];
-    }
-    return [['compact', Infinity]];
-};
-function useIsCompact(layoutOptions) {
-    const { ref, breakpoint } = mosaic.useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
-    return { ref: ref, isCompact: breakpoint === 'compact' };
-}
-
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a, _b;
     const resolveRef = useSchemaInlineRefResolver();

package/index.mjs

@@ -7,7 +7,7 @@ import isArray from 'lodash/isArray.js';
 import isPlainObject from 'lodash/isPlainObject.js';
 import { NodeType, HttpParamStyles } from '@stoplight/types';
 import { parse } from '@stoplight/yaml';
-import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useBreakpoints, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { isArray as isArray$1, Box, useBreakpoints, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, useModalState, Modal, ListBox, ListBoxItem, TabList, Tab, Tabs, TabPanels, TabPanel, Heading, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
 import { useLocation, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
@@ -16,7 +16,6 @@ export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
 import { atom, useAtom, Provider } from 'jotai';
-import isEmpty from 'lodash/isEmpty.js';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
 import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
@@ -42,6 +41,7 @@ import entries from 'lodash/entries.js';
 import keys from 'lodash/keys.js';
 import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import sortBy from 'lodash/sortBy.js';
+import isEmpty from 'lodash/isEmpty.js';
 import isNil from 'lodash/isNil.js';
 import omitBy from 'lodash/omitBy.js';
 import { HashLink } from 'react-router-hash-link';
@@ -486,6 +486,22 @@ function useChosenServerUrl(chosenServerUrl) {
     };
 }
 
+const getBreakpoints = (compact) => {
+    if (!compact)
+        return undefined;
+    if (typeof compact === 'number') {
+        return [
+            ['compact', compact],
+            ['regular', Infinity],
+        ];
+    }
+    return [['compact', Infinity]];
+};
+function useIsCompact(layoutOptions) {
+    const { ref, breakpoint } = useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
+    return { ref: ref, isCompact: breakpoint === 'compact' };
+}
+
 const chosenServerAtom = atom(undefined);
 
 function isValidServer(server) {
@@ -496,10 +512,7 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
         const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
         let url = server.url;
         if (inlineDefaults) {
-            url = getServerUrlWithDefaultValues(server);
-        }
-        else if (isEmpty(server.variables)) {
-            url = resolveUrl(server.url);
+            url = getServerUrlWithVariableValues(server, {});
         }
         return Object.assign(Object.assign({}, server), { url, description: server.description || fallbackDescription });
     });
@@ -512,7 +525,18 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
     }
     return servers.filter(isValidServer);
 };
+const getServerVariables = (server) => {
+    var _a;
+    return Object.entries((_a = server === null || server === void 0 ? void 0 : server.variables) !== null && _a !== void 0 ? _a : {}).map(([key, value]) => ({
+        name: key,
+        default: value.default,
+        description: value.description,
+        enum: value.enum,
+    }));
+};
 function resolveUrl(urlString) {
+    if (urlString === null)
+        return null;
     let url;
     try {
         url = URI(urlString);
@@ -532,14 +556,15 @@ function resolveUrl(urlString) {
     }
     return null;
 }
-const getServerUrlWithDefaultValues = (server) => {
+const getServerUrlWithVariableValues = (server, values) => {
     var _a;
     let urlString = server.url;
     const variables = Object.entries((_a = server.variables) !== null && _a !== void 0 ? _a : {});
     variables.forEach(([variableName, variableInfo]) => {
-        urlString = urlString.replaceAll(`{${variableName}}`, variableInfo.default);
+        var _a;
+        urlString = urlString.replaceAll(`{${variableName}}`, (_a = values[variableName]) !== null && _a !== void 0 ? _a : variableInfo.default);
     });
-    return resolveUrl(urlString);
+    return urlString;
 };
 
 const persistAtom = (key, atomInstance) => {
@@ -1418,11 +1443,11 @@ const useTextRequestBodyState = (mediaTypeContent) => {
 };
 
 const nameAndValueObjectToPair = ({ name, value }) => [name, value];
-const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, }) => {
+const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, serverVariableValues, }) => {
     var _a;
     const server = chosenServer || ((_a = httpOperation.servers) === null || _a === void 0 ? void 0 : _a[0]);
-    const chosenServerUrl = server && getServerUrlWithDefaultValues(server);
-    const serverUrl = (mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin;
+    const chosenServerUrl = server && getServerUrlWithVariableValues(server, serverVariableValues);
+    const serverUrl = resolveUrl((mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin);
     if (corsProxy && !mockData) {
         return `${corsProxy}${serverUrl}`;
     }
@@ -1499,10 +1524,10 @@ const getQueryParams = ({ httpOperation, parameterValues, }) => {
         return acc;
     }, []);
 };
-function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
+function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, serverVariableValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
     var _a, _b, _c;
     return __awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
         const rawHeaders = filterOutAuthorizationParams((_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.headers) !== null && _b !== void 0 ? _b : [], httpOperation.security)
@@ -1575,10 +1600,10 @@ const runAuthRequestEhancements = (auth, queryParams, headers) => {
     }
     return [newQueryParams, newHeaders];
 };
-function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
+function buildHarRequest({ httpOperation, bodyInput, parameterValues, serverVariableValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
     var _a, _b, _c, _d;
     return __awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const mimeType = (_a = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _a !== void 0 ? _a : 'application/json';
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
@@ -1900,8 +1925,18 @@ class NetworkError extends Error {
 }
 const isNetworkError = (error) => error instanceof NetworkError;
 
+const persistedServerVariableValuesAtom = atom({});
+const useServerVariables = () => {
+    const [serverVariables, setPersistedServerVariableValues] = useAtom(persistedServerVariableValuesAtom);
+    const updateServerVariableValue = (name, value) => {
+        setPersistedServerVariableValues(Object.assign({}, serverVariables, { [name]: value }));
+    };
+    return { serverVariables, updateServerVariableValue };
+};
+
 const ServersDropdown = ({ servers }) => {
     const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
+    const { serverVariables } = useServerVariables();
     const serverItems = [
         {
             type: 'option_group',
@@ -1915,7 +1950,7 @@ const ServersDropdown = ({ servers }) => {
                 ...servers.map((server, i) => ({
                     id: server.url,
                     title: server.description,
-                    description: server.url,
+                    description: getServerUrlWithVariableValues(server, serverVariables),
                     value: server.url,
                 })),
             ],
@@ -1925,6 +1960,21 @@ const ServersDropdown = ({ servers }) => {
 };
 ServersDropdown.displayName = 'ServersDropdown';
 
+const VariableEditor = ({ variable, value, onChange }) => {
+    const inputId = useUniqueId(`id_${variable.name}_`);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, variable.name),
+        React.createElement(Text, { mx: 3 }, ":"),
+        React.createElement("div", null, variable.enum ? (React.createElement(Select, { flex: 1, "aria-label": variable.name, options: variable.enum.map(s => ({ value: s })), value: value || variable.default, onChange: onChange })) : (React.createElement(Flex, { flex: 1 },
+            React.createElement(Input, { id: inputId, "aria-label": variable.name, appearance: 'minimal', flex: 1, placeholder: variable.default, type: "text", required: true, intent: 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }))))));
+};
+
+const ServerVariables = ({ variables, values, onChangeValue }) => {
+    return (React.createElement(Panel, { defaultIsOpen: true },
+        React.createElement(Panel.Titlebar, null, "Server Variables"),
+        React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React.createElement(VariableEditor, { key: variable.name, variable: variable, value: values[variable.name], onChange: (value) => onChangeValue(variable.name, String(value)) }))))));
+};
+
 const defaultServers = [];
 const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embeddedInMd = false, tryItCredentialsPolicy, corsProxy, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -1941,10 +1991,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
     const servers = React.useMemo(() => {
-        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, true);
+        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, false);
     }, [httpOperation.servers, mockUrl]);
     const firstServer = servers[0] || null;
     const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
+    const serverVariables = getServerVariables(chosenServer);
+    const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
     const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
     const getValues = () => Object.keys(bodyParameterValues)
@@ -1966,7 +2018,8 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     React.useEffect(() => {
         let isMounted = true;
         if (onRequestChange || embeddedInMd) {
-            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
+            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, serverVariableValues,
+                httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
                 corsProxy })).then(request => {
                 if (isMounted) {
                     if (onRequestChange) {
@@ -1986,6 +2039,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        serverVariableValues,
         isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
@@ -2003,6 +2057,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             const mockData = isMockingEnabled ? getMockData(mockUrl, httpOperation, mockingOptions) : undefined;
             const request = yield buildFetchRequest({
                 parameterValues: parameterValuesWithDefaults,
+                serverVariableValues,
                 httpOperation,
                 mediaTypeContent,
                 bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody,
@@ -2043,6 +2098,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const isOnlySendButton = !((_d = httpOperation.security) === null || _d === void 0 ? void 0 : _d.length) && !allParameters.length && !formDataState.isFormDataBody && !mediaTypeContent;
     const tryItPanelContents = (React.createElement(React.Fragment, null,
         ((_e = httpOperation.security) === null || _e === void 0 ? void 0 : _e.length) ? (React.createElement(TryItAuth, { onChange: setOperationAuthValue, operationSecurityScheme: (_f = httpOperation.security) !== null && _f !== void 0 ? _f : [], value: operationAuthValue })) : null,
+        serverVariables.length > 0 && (React.createElement(ServerVariables, { variables: serverVariables, values: serverVariableValues, onChangeValue: updateServerVariableValue })),
         allParameters.length > 0 && (React.createElement(OperationParameters, { parameters: allParameters, values: parameterValuesWithDefaults, onChangeValue: updateParameterValue, validate: validateParameters })),
         formDataState.isFormDataBody ? (React.createElement(FormDataBody, { specification: formDataState.bodySpecification, values: bodyParameterValues, onChangeValues: setBodyParameterValues, onChangeParameterAllow: setAllowedEmptyValues, isAllowedEmptyValues: isAllowedEmptyValues })) : mediaTypeContent ? (React.createElement(RequestBody, { examples: (_g = mediaTypeContent.examples) !== null && _g !== void 0 ? _g : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
         React.createElement(Panel.Content, { className: "SendButtonHolder", mt: 4, pt: !isOnlySendButton && !embeddedInMd ? 0 : undefined },
@@ -2370,20 +2426,41 @@ const SecuritySchemes$1 = ({ schemes }) => {
         React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) }))))));
 };
 
-const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }) => {
+const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
     var _a, _b;
     const responses = sortBy(uniqBy(unsortedResponses, r => r.code), r => r.code);
     const [activeResponseId, setActiveResponseId] = React.useState((_b = (_a = responses[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '');
+    const { isOpen, open, close } = useModalState();
+    const onSelectionChange = React.useCallback(keys => {
+        const selectedId = keys.values().next().value;
+        const selectedResponse = responses === null || responses === void 0 ? void 0 : responses.find(response => response.id === selectedId);
+        if (selectedResponse) {
+            setActiveResponseId(selectedResponse.code);
+            close();
+        }
+    }, [responses, setActiveResponseId, close]);
     React.useEffect(() => {
         onStatusCodeChange(activeResponseId);
     }, [activeResponseId]);
     if (!responses.length)
         return null;
+    const response = responses.find(r => r.code === activeResponseId) || responses[0];
+    const compactResponses = (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onPress: open, iconRight: React.createElement(Icon, { icon: "chevron-down", color: "var(--color-border-button)" }), style: {
+                color: `var(--color-${codeToIntentVal(activeResponseId)})`,
+            } }, activeResponseId),
+        React.createElement(Modal, { title: "Response Code", isOpen: isOpen, onClose: close, size: "sm", footer: React.createElement(HStack, { justifyContent: "end" },
+                React.createElement(Button, { onPress: close, intent: "default", appearance: "primary" }, "Close")) },
+            React.createElement(ListBox, { "aria-label": "Response Code", overflowY: "auto", m: -5, items: responses, selectionMode: "single", onSelectionChange: onSelectionChange }, (response) => (React.createElement(ListBoxItem, { key: response.id },
+                React.createElement(Box, { p: 3, bg: { hover: 'primary-tint' } },
+                    React.createElement(Flex, { w: "2xl", align: "center", justify: "end" },
+                        response.code === activeResponseId && React.createElement(Box, { as: Icon, icon: "check" }),
+                        React.createElement(Text, { ml: 3, fontWeight: "medium" }, response.code)))))))));
+    const tabResponses = (React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React.createElement(VStack, { spacing: 8, as: Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
-        React.createElement(SectionTitle, { title: "Responses" },
-            React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code))))),
-        React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
-            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })))))));
+        React.createElement(SectionTitle, { title: "Responses" }, isCompact ? compactResponses : tabResponses),
+        isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
+            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
 };
 Responses.displayName = 'HttpOperation.Responses';
 const Response = ({ response, onMediaTypeChange }) => {
@@ -2428,6 +2505,7 @@ const codeToIntentVal = (code) => {
 const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
+    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const mocking = React.useContext(MockingContext);
     const isDeprecated = !!data.deprecated;
     const isInternal = !!data.internal;
@@ -2437,15 +2515,16 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
     const prettyName = (data.summary || data.iid || '').trim();
     const hasBadges = isDeprecated || isInternal;
     const header = (React.createElement(OperationHeader, { id: data.id, method: data.method, path: data.path, noHeading: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading, hasBadges: hasBadges, name: prettyName, isDeprecated: isDeprecated, isInternal: isInternal }));
+    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
     const description = (React.createElement(VStack, { spacing: 10 },
         data.description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
-        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode }))));
-    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
-    return (React.createElement(TwoColumnLayout, { className: cn('HttpOperation', className), header: header, left: description, right: tryItPanel }));
+        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
+        isCompact && tryItPanel));
+    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
 const HttpOperation = withErrorBoundary(HttpOperationComponent, {
@@ -2677,22 +2756,6 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
-const getBreakpoints = (compact) => {
-    if (!compact)
-        return undefined;
-    if (typeof compact === 'number') {
-        return [
-            ['compact', compact],
-            ['regular', Infinity],
-        ];
-    }
-    return [['compact', Infinity]];
-};
-function useIsCompact(layoutOptions) {
-    const { ref, breakpoint } = useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
-    return { ref: ref, isCompact: breakpoint === 'compact' };
-}
-
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a, _b;
     const resolveRef = useSchemaInlineRefResolver();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.8.0",
+  "version": "7.10.0",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",

package/utils/http-spec/IServer.d.ts

@@ -1,3 +1,9 @@
-import type { IServer } from '@stoplight/types';
+import type { Dictionary, INodeVariable, IServer } from '@stoplight/types';
+export declare type ServerVariable = INodeVariable & {
+    name: string;
+};
 export declare const getServersToDisplay: (originalServers: IServer[], mockUrl: string | undefined, inlineDefaults: boolean) => IServer[];
-export declare const getServerUrlWithDefaultValues: (server: IServer) => string | null;
+export declare const getServerVariables: (server?: IServer | null) => ServerVariable[];
+export declare const getServerVariableDefaults: (server: IServer) => Record<string, string>;
+export declare function resolveUrl(urlString: string | null): string | null;
+export declare const getServerUrlWithVariableValues: (server: IServer, values: Dictionary<string, string>) => string;