@stoplight/elements-core 7.5.12 → 7.5.15

package/__fixtures__/operations/securedOperation.d.ts

@@ -1,4 +1,4 @@
 import { IHttpOperation } from '@stoplight/types';
 export declare const singleSecurityOperation: IHttpOperation;
-export declare const emptySecurityOperation: IHttpOperation;
-export declare const duplicatedSecurityScheme: IHttpOperation;
+export declare const emptySecurityOperation: any;
+export declare const duplicatedSecurityScheme: any;

package/components/Docs/HttpService/ServerInfo.d.ts

@@ -1,5 +1,5 @@
-import { IServer } from '@stoplight/types';
 import * as React from 'react';
+import { IServer } from '../../../utils/http-spec/IServer';
 interface ServerInfoProps {
     servers: IServer[];
     mockUrl?: string;

package/components/TryIt/Body/FormDataBody.d.ts

@@ -1,10 +1,12 @@
 import { IMediaTypeContent } from '@stoplight/types';
 import * as React from 'react';
-import { BodyParameterValues } from './request-body-utils';
+import { BodyParameterValues, ParameterOptional } from './request-body-utils';
 interface FormDataBodyProps {
     specification: IMediaTypeContent;
     values: BodyParameterValues;
     onChangeValues: (newValues: BodyParameterValues) => void;
+    onChangeParameterAllow: (newValue: ParameterOptional) => void;
+    isAllowedEmptyValues: ParameterOptional;
 }
 export declare const FormDataBody: React.FC<FormDataBodyProps>;
 export {};

package/components/TryIt/Body/request-body-utils.d.ts

@@ -1,12 +1,13 @@
 import { IMediaTypeContent } from '@stoplight/types';
 import * as React from 'react';
 export declare type BodyParameterValues = Record<string, string | File>;
+export declare type ParameterOptional = Record<string, boolean>;
 export declare const isFormDataContent: (content: IMediaTypeContent) => boolean;
 export declare function createRequestBody(mediaTypeContent: IMediaTypeContent | undefined, bodyParameterValues: BodyParameterValues | undefined): Promise<string | Blob | ArrayBuffer | ArrayBufferView | FormData | ReadableStream<Uint8Array> | undefined>;
-export declare const useBodyParameterState: (mediaTypeContent: IMediaTypeContent | undefined) => readonly [BodyParameterValues, React.Dispatch<React.SetStateAction<BodyParameterValues>>, {
+export declare const useBodyParameterState: (mediaTypeContent: IMediaTypeContent | undefined) => readonly [BodyParameterValues, React.Dispatch<React.SetStateAction<BodyParameterValues>>, ParameterOptional, React.Dispatch<React.SetStateAction<ParameterOptional>>, {
     readonly isFormDataBody: true;
     readonly bodySpecification: IMediaTypeContent;
-}] | readonly [BodyParameterValues, React.Dispatch<React.SetStateAction<BodyParameterValues>>, {
+}] | readonly [BodyParameterValues, React.Dispatch<React.SetStateAction<BodyParameterValues>>, ParameterOptional, React.Dispatch<React.SetStateAction<ParameterOptional>>, {
     readonly isFormDataBody: false;
     readonly bodySpecification: undefined;
 }];

package/components/TryIt/Parameters/ParameterEditor.d.ts

@@ -5,6 +5,9 @@ interface ParameterProps {
     parameter: ParameterSpec;
     value?: string;
     onChange: SelectProps['onChange'];
+    isOptional: boolean;
+    onChangeOptional: (optional: boolean) => void;
+    canChangeOptional: boolean;
     validate?: boolean;
 }
 export declare const ParameterEditor: React.FC<ParameterProps>;

package/components/TryIt/Parameters/parameter-utils.d.ts

@@ -1,6 +1,8 @@
-import { IHttpParam } from '@stoplight/types';
+import type { IHttpParam, INodeExample, INodeExternalExample } from '@stoplight/types';
 import { JSONSchema7Definition } from 'json-schema';
-export declare type ParameterSpec = Pick<IHttpParam, 'name' | 'examples' | 'schema' | 'required'>;
+export declare type ParameterSpec = Pick<IHttpParam, 'name' | 'schema' | 'required'> & {
+    examples?: (Omit<INodeExample, 'id'> | Omit<INodeExternalExample, 'id'>)[];
+};
 export declare function parameterOptions(parameter: ParameterSpec): ({
     value: string | number;
 } | {

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

@@ -1,4 +1,4 @@
-import { IServer } from '@stoplight/types';
+import type { IServer } from '../../../utils/http-spec/IServer';
 export declare type ServersDropdownProps = {
     servers: IServer[];
 };

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

@@ -1,5 +1,6 @@
-import { Dictionary, IHttpOperation, IMediaTypeContent, IServer } from '@stoplight/types';
+import { Dictionary, IHttpOperation, IMediaTypeContent } from '@stoplight/types';
 import { Request as HarRequest } from 'har-format';
+import { IServer } from '../../utils/http-spec/IServer';
 import { HttpSecuritySchemeWithValues } from './Auth/authentication-utils';
 import { BodyParameterValues } from './Body/request-body-utils';
 import { MockData } from './Mocking/mocking-utils';

package/components/TryIt/chosenServer.d.ts

@@ -1,4 +1,4 @@
-import { IServer } from '@stoplight/types';
+import type { IServer } from '../../utils/http-spec/IServer';
 export declare const chosenServerAtom: import("jotai").Atom<IServer | null | undefined> & {
     write: (get: {
         <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;

package/core.css

@@ -52,6 +52,16 @@
   max-height: 162px; /* 4.5 lines plus padding */
 }
 
+.sl-elements .Checkbox {
+  max-width: 15px;
+  padding-right: 3px;
+}
+
+.sl-elements .TextForCheckBox {
+  padding-top: 6px;
+  padding-left: 9px;
+}
+
 .sl-elements .TextRequestBody {
   max-height: 200px;
   overflow-y: auto;

package/index.esm.js

@@ -141,9 +141,9 @@ function isHttpService(maybeHttpService) {
 function isHttpOperation(maybeHttpOperation) {
     return isStoplightNode(maybeHttpOperation) && 'method' in maybeHttpOperation && 'path' in maybeHttpOperation;
 }
+const properUrl = new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/);
 function isProperUrl(url) {
-    const properUrl = new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/);
-    return url.match(properUrl);
+    return properUrl.test(url);
 }
 
 function useParsedData(nodeType, data) {
@@ -158,6 +158,7 @@ const parserMap = {
     [NodeType.Generic]: parseUnknown,
     [NodeType.TableOfContents]: parseUnknown,
     [NodeType.SpectralRuleset]: parseUnknown,
+    [NodeType.Styleguide]: parseUnknown,
     [NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
@@ -235,6 +236,7 @@ const NodeTypeColors = {
     unknown: '',
     table_of_contents: '',
     spectral_ruleset: '',
+    styleguide: '',
 };
 const NodeTypePrettyName = {
     http_operation: 'Endpoint',
@@ -246,6 +248,7 @@ const NodeTypePrettyName = {
     unknown: '',
     table_of_contents: '',
     spectral_ruleset: '',
+    styleguide: '',
 };
 const NodeTypeIconDefs = {
     http_operation: faCrosshairs,
@@ -257,6 +260,7 @@ const NodeTypeIconDefs = {
     generic: faQuestionCircle,
     table_of_contents: faQuestionCircle,
     spectral_ruleset: faQuestionCircle,
+    styleguide: faQuestionCircle,
 };
 const HttpMethodColors = {
     get: 'success',
@@ -357,13 +361,16 @@ function createNamedContext(name, defaultValue) {
 
 const chosenServerAtom = atom(undefined);
 
+function isValidServer(server) {
+    return server.url !== null && isProperUrl(server.url);
+}
 const getServersToDisplay = (originalServers, mockUrl) => {
     const servers = originalServers
         .map((server, i) => {
         const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
         return Object.assign(Object.assign({}, server), { url: getServerUrlWithDefaultValues(server), description: server.description || fallbackDescription });
     })
-        .filter(server => isProperUrl(server.url));
+        .filter(isValidServer);
     if (mockUrl) {
         servers.push({
             description: 'Mock Server',
@@ -379,7 +386,13 @@ const getServerUrlWithDefaultValues = (server) => {
     variables.forEach(([variableName, variableInfo]) => {
         urlString = urlString.replace(`{${variableName}}`, variableInfo.default);
     });
-    let url = URI(urlString);
+    let url;
+    try {
+        url = URI(urlString);
+    }
+    catch (_b) {
+        return null;
+    }
     if (url.is('relative') && typeof window !== 'undefined') {
         url = url.absoluteTo(window.location.origin);
     }
@@ -969,9 +982,10 @@ function mapSchemaPropertiesToParameters(properties, required) {
     return Object.entries(properties).map(([name, schema]) => (Object.assign({ name, schema: typeof schema !== 'boolean' ? schema : undefined, examples: typeof schema !== 'boolean' && schema.examples ? [{ key: 'example', value: schema.examples }] : undefined }, ((required === null || required === void 0 ? void 0 : required.includes(name)) && { required: true }))));
 }
 
-const ParameterEditor = ({ parameter, value, onChange, validate }) => {
+const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptional, canChangeOptional, validate, }) => {
     var _a, _b;
     const inputId = useUniqueId(`id_${parameter.name}_`);
+    const inputCheckId = useUniqueId(`id_${parameter.name}_checked`);
     const parameterValueOptions = parameterOptions(parameter);
     const examples = exampleOptions(parameter);
     const selectedExample = (_a = examples === null || examples === void 0 ? void 0 : examples.find(e => e.value === value)) !== null && _a !== void 0 ? _a : selectExampleOption;
@@ -982,10 +996,19 @@ const ParameterEditor = ({ parameter, value, onChange, validate }) => {
         React.createElement(Text, { mx: 3 }, ":"),
         React.createElement("div", null, parameterValueOptions ? (React.createElement(Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: value || '', onChange: onChange })) : (React.createElement(Flex, { flex: 1 },
             React.createElement(Input, { id: inputId, "aria-label": parameter.name, appearance: requiredButEmpty ? 'default' : 'minimal', flex: 1, placeholder: getPlaceholderForParameter(parameter), type: ((_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.type) === 'number' ? 'number' : 'text', required: true, intent: requiredButEmpty ? 'danger' : 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }),
-            examples && (React.createElement(Select, { "aria-label": `${parameter.name}-select`, flex: 1, value: selectedExample.value, options: examples, onChange: onChange })))))));
+            examples && (React.createElement(Select, { "aria-label": `${parameter.name}-select`, flex: 1, value: selectedExample.value, options: examples, onChange: onChange }))))),
+        canChangeOptional && !parameter.required && (React.createElement(React.Fragment, null,
+            React.createElement("div", null),
+            React.createElement("div", null),
+            React.createElement("div", null,
+                React.createElement(Flex, { flex: 1 },
+                    React.createElement(Input, { className: "Checkbox", "aria-label": `${parameter.name}-checkbox`, id: inputCheckId, flex: 1, type: "checkbox", intent: "success", size: "sm", checked: isOptional, onChange: e => onChangeOptional(!e.target.checked) }),
+                    React.createElement(Text, { className: "TextForCheckBox", flex: 1, as: "label", "aria-hidden": "true", "data-testid": "param-check", htmlFor: inputCheckId, fontSize: "base" },
+                        "Omit ",
+                        parameterDisplayName)))))));
 };
 
-const FormDataBody = ({ specification, values, onChangeValues }) => {
+const FormDataBody = ({ specification, values, onChangeValues, onChangeParameterAllow, isAllowedEmptyValues, }) => {
     const schema = specification.schema;
     const parameters = schema === null || schema === void 0 ? void 0 : schema.properties;
     const required = schema === null || schema === void 0 ? void 0 : schema.required;
@@ -1000,6 +1023,7 @@ const FormDataBody = ({ specification, values, onChangeValues }) => {
     return (React.createElement(Panel, { defaultIsOpen: true },
         React.createElement(Panel.Titlebar, null, "Body"),
         React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, mapSchemaPropertiesToParameters(parameters, required).map(parameter => {
+            var _a;
             const supportsFileUpload = parameterSupportsFileUpload(parameter);
             const value = values[parameter.name];
             if (supportsFileUpload) {
@@ -1007,7 +1031,7 @@ const FormDataBody = ({ specification, values, onChangeValues }) => {
                         ? onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: newValue }))
                         : onChangeValues(omit(values, parameter.name)) }));
             }
-            return (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: typeof value === 'string' ? value : undefined, onChange: (value) => onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: typeof value === 'number' ? String(value) : value })) }));
+            return (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: typeof value === 'string' ? value : undefined, onChange: (value) => onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: typeof value === 'number' ? String(value) : value })), onChangeOptional: value => onChangeParameterAllow(Object.assign(Object.assign({}, isAllowedEmptyValues), { [parameter.name]: value })), canChangeOptional: true, isOptional: (_a = isAllowedEmptyValues[parameter.name]) !== null && _a !== void 0 ? _a : false }));
         }))));
 };
 
@@ -1081,6 +1105,7 @@ const useBodyParameterState = (mediaTypeContent) => {
         return initialParameterValues(parameters);
     }, [isFormDataBody, mediaTypeContent]);
     const [bodyParameterValues, setBodyParameterValues] = React.useState(initialState);
+    const [isAllowedEmptyValue, setAllowedEmptyValue] = React.useState({});
     React.useEffect(() => {
         setBodyParameterValues(initialState);
     }, [initialState]);
@@ -1088,6 +1113,8 @@ const useBodyParameterState = (mediaTypeContent) => {
         return [
             bodyParameterValues,
             setBodyParameterValues,
+            isAllowedEmptyValue,
+            setAllowedEmptyValue,
             { isFormDataBody: true, bodySpecification: mediaTypeContent },
         ];
     }
@@ -1095,6 +1122,8 @@ const useBodyParameterState = (mediaTypeContent) => {
         return [
             bodyParameterValues,
             setBodyParameterValues,
+            isAllowedEmptyValue,
+            setAllowedEmptyValue,
             { isFormDataBody: false, bodySpecification: undefined },
         ];
     }
@@ -1231,14 +1260,14 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
             .filter(({ value }) => value.length > 0);
         const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
         const expandedPath = uriExpand(httpOperation.path, parameterValues);
-        const url = new URL(URI(serverUrl).segment(expandedPath).toString());
-        url.search = new URLSearchParams(queryParamsWithAuth.map(nameAndValueObjectToPair)).toString();
+        const urlObject = new URL(serverUrl + expandedPath);
+        urlObject.search = new URLSearchParams(queryParamsWithAuth.map(nameAndValueObjectToPair)).toString();
         const body = typeof bodyInput === 'object' ? yield createRequestBody(mediaTypeContent, bodyInput) : bodyInput;
         const headers = Object.assign(Object.assign(Object.assign({}, ((mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== 'multipart/form-data' && {
             'Content-Type': (_f = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _f !== void 0 ? _f : 'application/json',
         })), Object.fromEntries(headersWithAuth.map(nameAndValueObjectToPair))), mockData === null || mockData === void 0 ? void 0 : mockData.header);
         return [
-            url.toString(),
+            urlObject.href,
             {
                 credentials,
                 method: httpOperation.method.toUpperCase(),
@@ -1306,7 +1335,8 @@ function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeC
             headerParams.push({ name: 'Prefer', value: mockData.header.Prefer });
         }
         const [queryParamsWithAuth, headerParamsWithAuth] = runAuthRequestEhancements(auth, queryParams, headerParams);
-        const extendedPath = uriExpand(httpOperation.path, parameterValues);
+        const expandedPath = uriExpand(httpOperation.path, parameterValues);
+        const urlObject = new URL(serverUrl + expandedPath);
         let postData = undefined;
         if (shouldIncludeBody && typeof bodyInput === 'string') {
             postData = { mimeType, text: bodyInput };
@@ -1331,7 +1361,7 @@ function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeC
         }
         return {
             method: httpOperation.method.toUpperCase(),
-            url: URI(serverUrl).segment(extendedPath).toString(),
+            url: urlObject.href,
             httpVersion: 'HTTP/1.1',
             cookies: [],
             headers: [{ name: 'Content-Type', value: mimeType }, ...headerParamsWithAuth],
@@ -1465,7 +1495,7 @@ const useMockingOptions = () => useAtom(mockingOptionsAtom);
 const OperationParameters = ({ parameters, values, onChangeValue, validate, }) => {
     return (React.createElement(Panel, { defaultIsOpen: true },
         React.createElement(Panel.Titlebar, null, "Parameters"),
-        React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, parameters.map(parameter => (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: values[parameter.name], onChange: (value) => onChangeValue(parameter.name, String(value)), validate: validate }))))));
+        React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, parameters.map(parameter => (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: values[parameter.name], onChange: (value) => onChangeValue(parameter.name, String(value)), validate: validate, isOptional: false, canChangeOptional: false, onChangeOptional: () => { } }))))));
 };
 
 const persistedParameterValuesAtom = atom({});
@@ -1577,7 +1607,7 @@ const ResponseError = ({ state: { error } }) => (React.createElement(Panel, { de
     React.createElement(Panel.Content, null, isNetworkError(error) ? React.createElement(NetworkErrorMessage, null) : React.createElement("p", null, error.message))));
 const NetworkErrorMessage = () => (React.createElement(React.Fragment, null,
     React.createElement("p", { className: "sl-pb-2" },
-        React.createElement("strong", null, "Network Error occured.")),
+        React.createElement("strong", null, "Network Error occurred.")),
     React.createElement("p", { className: "sl-pb-2" }, "1. Double check that your computer is connected to the internet."),
     React.createElement("p", { className: "sl-pb-2" }, "2. Make sure the API is actually running and available under the specified URL."),
     React.createElement("p", null,
@@ -1617,6 +1647,7 @@ ServersDropdown.displayName = 'ServersDropdown';
 const defaultServers = [];
 const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embeddedInMd = false, tryItCredentialsPolicy, corsProxy, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
+    TryIt.displayName = 'TryIt';
     const isDark = useThemeIsDark();
     const [response, setResponse] = React.useState();
     const [requestData, setRequestData] = React.useState();
@@ -1625,7 +1656,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const mediaTypeContent = (_c = (_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.body) === null || _b === void 0 ? void 0 : _b.contents) === null || _c === void 0 ? void 0 : _c[requestBodyIndex !== null && requestBodyIndex !== void 0 ? requestBodyIndex : 0];
     const { allParameters, updateParameterValue, parameterValuesWithDefaults } = useRequestParameters(httpOperation);
     const [mockingOptions, setMockingOptions] = useMockingOptions();
-    const [bodyParameterValues, setBodyParameterValues, formDataState] = useBodyParameterState(mediaTypeContent);
+    const [bodyParameterValues, setBodyParameterValues, isAllowedEmptyValues, setAllowedEmptyValues, formDataState] = useBodyParameterState(mediaTypeContent);
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
     const servers = React.useMemo(() => {
@@ -1636,6 +1667,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
     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)
+        .filter(param => { var _a; return (_a = !isAllowedEmptyValues[param]) !== null && _a !== void 0 ? _a : true; })
+        .reduce((previousValue, currentValue) => {
+        previousValue[currentValue] = bodyParameterValues[currentValue];
+        return previousValue;
+    }, {});
     React.useEffect(() => {
         const currentUrl = chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url;
         const exists = currentUrl && servers.find(s => s.url === currentUrl);
@@ -1649,7 +1686,7 @@ 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 ? bodyParameterValues : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
+            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
                 corsProxy })).then(request => {
                 if (isMounted) {
                     if (onRequestChange) {
@@ -1669,6 +1706,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
         mockingOptions,
@@ -1687,7 +1725,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
                 parameterValues: parameterValuesWithDefaults,
                 httpOperation,
                 mediaTypeContent,
-                bodyInput: formDataState.isFormDataBody ? bodyParameterValues : textRequestBody,
+                bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody,
                 mockData,
                 auth: operationAuthValue,
                 chosenServer,
@@ -1723,7 +1761,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     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,
         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 })) : mediaTypeContent ? (React.createElement(RequestBody, { examples: (_g = mediaTypeContent.examples) !== null && _g !== void 0 ? _g : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
+        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 },
             React.createElement(HStack, { alignItems: "center", spacing: 2 },
                 React.createElement(Button, { appearance: "primary", loading: loading, disabled: loading, onPress: handleSendRequest, size: "sm" }, "Send API Request"),
@@ -2376,29 +2414,34 @@ function parseHttpRequest(data) {
         id: '?http-operation-id?',
         method: data.method,
         path: uri.is('absolute') ? uri.path() : data.url,
-        servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
+        servers: [{ id: `?http-server-${uri.href()}?`, url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
         request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
                 const defaultVal = Array.isArray(value) ? value[0] : value;
                 return {
+                    id: `?http-query-${key}-id?`,
                     name: key,
                     style: HttpParamStyles.Form,
                     schema: { default: defaultVal },
                     required: isHttpRequestParamRequired(defaultVal),
                 };
             }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+                id: `?http-header-${key}-id?`,
                 name: key,
                 style: HttpParamStyles.Simple,
                 schema: { default: value },
                 required: isHttpRequestParamRequired(value),
             })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
+                id: `?http-param-${name}-id?`,
                 name,
                 style: HttpParamStyles.Simple,
                 required: true,
             })) }, (data.body
             ? {
                 body: {
+                    id: '?http-request-body?',
                     contents: [
                         {
+                            id: '?http-request-body-media?',
                             mediaType: 'application/json',
                             schema: { default: data.body },
                         },