@stoplight/elements-core 7.5.9 → 7.5.13

package/components/Docs/story-helper.d.ts

@@ -5,5 +5,5 @@ interface HelperReturn<P> {
     createStory(name: string, input: Partial<P>): Story<P>;
     createHoistedStory(input: Partial<P>): Story<P>;
 }
-export declare const createStoriesForDocsComponent: <P>(Component: React.ComponentType<P>) => HelperReturn<P>;
+export declare const createStoriesForDocsComponent: <P>(Component: React.ComponentType<P>, title?: string | undefined) => HelperReturn<P>;
 export {};

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/core.css

@@ -0,0 +1,87 @@
+.sl-elements {
+  font-size: 13px;
+}
+
+.sl-elements .svg-inline--fa {
+  display: inline-block;
+}
+
+/* Docs */
+
+.sl-elements .DocsSkeleton {
+  animation: 500ms linear infinite alternate skeleton-glow;
+  background: rgba(206, 217, 224, 0.2);
+  background-clip: padding-box !important;
+  border-color: rgba(206, 217, 224, 0.2) !important;
+  border-radius: 2px;
+  box-shadow: none !important;
+  color: transparent !important;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+}
+
+.sl-elements .Model {
+  --fs-code: 12px;
+}
+
+/* Table of Contents */
+
+.sl-elements .ElementsTableOfContentsItem:hover {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* TryIt */
+
+.sl-elements .ParameterGrid {
+  display: grid;
+  grid-template-columns: fit-content(120px) 20px auto;
+  row-gap: 3px;
+  align-items: center;
+  padding-bottom: 0;
+  margin-bottom: 16px;
+}
+
+.sl-elements .TryItPanel > :nth-child(2) {
+  /* This, along with the padding:0 margin: 16s above causes margin collapse to guarantee correct spacing around the panels & send button */
+  overflow: auto;
+}
+
+.sl-elements .OperationParametersContent {
+  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;
+  padding-bottom: 0;
+  margin-bottom: 16px;
+}
+
+/* HttpOperation */
+
+.sl-elements .HttpOperation .JsonSchemaViewer .sl-markdown-viewer p {
+  font-size: 12px;
+  line-height: 1.5em;
+}
+
+.sl-elements .HttpOperation__Parameters .sl-markdown-viewer p {
+  font-size: 12px;
+  line-height: 1.5em;
+}
+
+.sl-elements .Model .JsonSchemaViewer .sl-markdown-viewer p {
+  font-size: 12px;
+  line-height: 1.5em;
+}

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) {
@@ -357,13 +357,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 +382,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 +978,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 +992,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 +1019,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 +1027,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 +1101,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 +1109,8 @@ const useBodyParameterState = (mediaTypeContent) => {
         return [
             bodyParameterValues,
             setBodyParameterValues,
+            isAllowedEmptyValue,
+            setAllowedEmptyValue,
             { isFormDataBody: true, bodySpecification: mediaTypeContent },
         ];
     }
@@ -1095,6 +1118,8 @@ const useBodyParameterState = (mediaTypeContent) => {
         return [
             bodyParameterValues,
             setBodyParameterValues,
+            isAllowedEmptyValue,
+            setAllowedEmptyValue,
             { isFormDataBody: false, bodySpecification: undefined },
         ];
     }
@@ -1231,14 +1256,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 +1331,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 +1357,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 +1491,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({});
@@ -1617,6 +1643,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 +1652,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 +1663,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 +1682,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 +1702,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
         mockingOptions,
@@ -1687,7 +1721,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 +1757,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"),
@@ -2295,7 +2329,7 @@ const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = M
                 paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                 minWidth: `${sidebarWidth}px`,
             } }, sidebar),
-        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full" },
+        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full", overflowY: "auto" },
             React.createElement(Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
 });
 
@@ -2350,8 +2384,8 @@ const SchemaAndDescription = ({ title: titleProp, schema }) => {
         React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(schema) })));
 };
 const CodeComponent = props => {
-    const { title, jsonSchema, http, children } = props;
-    const value = String(Array.isArray(children) ? children[0] : children);
+    const { title, jsonSchema, http, resolved, children } = props;
+    const value = resolved || String(Array.isArray(children) ? children[0] : children);
     const parsedValue = useParsedValue(value);
     if (jsonSchema) {
         if (!isJSONSchema(parsedValue)) {

package/index.js

@@ -195,9 +195,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) {
@@ -411,13 +411,16 @@ function createNamedContext(name, defaultValue) {
 
 const chosenServerAtom = jotai.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',
@@ -433,7 +436,13 @@ const getServerUrlWithDefaultValues = (server) => {
     variables.forEach(([variableName, variableInfo]) => {
         urlString = urlString.replace(`{${variableName}}`, variableInfo.default);
     });
-    let url = URI__default["default"](urlString);
+    let url;
+    try {
+        url = URI__default["default"](urlString);
+    }
+    catch (_b) {
+        return null;
+    }
     if (url.is('relative') && typeof window !== 'undefined') {
         url = url.absoluteTo(window.location.origin);
     }
@@ -1023,9 +1032,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;
@@ -1036,10 +1046,19 @@ const ParameterEditor = ({ parameter, value, onChange, validate }) => {
         React__namespace.createElement(mosaic.Text, { mx: 3 }, ":"),
         React__namespace.createElement("div", null, parameterValueOptions ? (React__namespace.createElement(mosaic.Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: value || '', onChange: onChange })) : (React__namespace.createElement(mosaic.Flex, { flex: 1 },
             React__namespace.createElement(mosaic.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__namespace.createElement(mosaic.Select, { "aria-label": `${parameter.name}-select`, flex: 1, value: selectedExample.value, options: examples, onChange: onChange })))))));
+            examples && (React__namespace.createElement(mosaic.Select, { "aria-label": `${parameter.name}-select`, flex: 1, value: selectedExample.value, options: examples, onChange: onChange }))))),
+        canChangeOptional && !parameter.required && (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement("div", null),
+            React__namespace.createElement("div", null),
+            React__namespace.createElement("div", null,
+                React__namespace.createElement(mosaic.Flex, { flex: 1 },
+                    React__namespace.createElement(mosaic.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__namespace.createElement(mosaic.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;
@@ -1054,6 +1073,7 @@ const FormDataBody = ({ specification, values, onChangeValues }) => {
     return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true },
         React__namespace.createElement(mosaic.Panel.Titlebar, null, "Body"),
         React__namespace.createElement(mosaic.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) {
@@ -1061,7 +1081,7 @@ const FormDataBody = ({ specification, values, onChangeValues }) => {
                         ? onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: newValue }))
                         : onChangeValues(omit__default["default"](values, parameter.name)) }));
             }
-            return (React__namespace.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__namespace.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 }));
         }))));
 };
 
@@ -1135,6 +1155,7 @@ const useBodyParameterState = (mediaTypeContent) => {
         return initialParameterValues(parameters);
     }, [isFormDataBody, mediaTypeContent]);
     const [bodyParameterValues, setBodyParameterValues] = React__namespace.useState(initialState);
+    const [isAllowedEmptyValue, setAllowedEmptyValue] = React__namespace.useState({});
     React__namespace.useEffect(() => {
         setBodyParameterValues(initialState);
     }, [initialState]);
@@ -1142,6 +1163,8 @@ const useBodyParameterState = (mediaTypeContent) => {
         return [
             bodyParameterValues,
             setBodyParameterValues,
+            isAllowedEmptyValue,
+            setAllowedEmptyValue,
             { isFormDataBody: true, bodySpecification: mediaTypeContent },
         ];
     }
@@ -1149,6 +1172,8 @@ const useBodyParameterState = (mediaTypeContent) => {
         return [
             bodyParameterValues,
             setBodyParameterValues,
+            isAllowedEmptyValue,
+            setAllowedEmptyValue,
             { isFormDataBody: false, bodySpecification: undefined },
         ];
     }
@@ -1285,14 +1310,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__default["default"](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(),
@@ -1360,7 +1385,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 };
@@ -1385,7 +1411,7 @@ function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeC
         }
         return {
             method: httpOperation.method.toUpperCase(),
-            url: URI__default["default"](serverUrl).segment(extendedPath).toString(),
+            url: urlObject.href,
             httpVersion: 'HTTP/1.1',
             cookies: [],
             headers: [{ name: 'Content-Type', value: mimeType }, ...headerParamsWithAuth],
@@ -1519,7 +1545,7 @@ const useMockingOptions = () => jotai.useAtom(mockingOptionsAtom);
 const OperationParameters = ({ parameters, values, onChangeValue, validate, }) => {
     return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true },
         React__namespace.createElement(mosaic.Panel.Titlebar, null, "Parameters"),
-        React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, parameters.map(parameter => (React__namespace.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: values[parameter.name], onChange: (value) => onChangeValue(parameter.name, String(value)), validate: validate }))))));
+        React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, parameters.map(parameter => (React__namespace.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 = jotai.atom({});
@@ -1671,6 +1697,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 = mosaic.useThemeIsDark();
     const [response, setResponse] = React__namespace.useState();
     const [requestData, setRequestData] = React__namespace.useState();
@@ -1679,7 +1706,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__namespace.useMemo(() => {
@@ -1690,6 +1717,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [chosenServer, setChosenServer] = jotai.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__namespace.useEffect(() => {
         const currentUrl = chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url;
         const exists = currentUrl && servers.find(s => s.url === currentUrl);
@@ -1703,7 +1736,7 @@ 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 ? 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) {
@@ -1723,6 +1756,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
         mockingOptions,
@@ -1741,7 +1775,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,
@@ -1777,7 +1811,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     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,
         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 })) : mediaTypeContent ? (React__namespace.createElement(RequestBody, { examples: (_g = mediaTypeContent.examples) !== null && _g !== void 0 ? _g : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
+        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 },
             React__namespace.createElement(mosaic.HStack, { alignItems: "center", spacing: 2 },
                 React__namespace.createElement(mosaic.Button, { appearance: "primary", loading: loading, disabled: loading, onPress: handleSendRequest, size: "sm" }, "Send API Request"),
@@ -2349,7 +2383,7 @@ const SidebarLayout = React__namespace.forwardRef(({ sidebar, children, maxConte
                 paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                 minWidth: `${sidebarWidth}px`,
             } }, sidebar),
-        React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full" },
+        React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full", overflowY: "auto" },
             React__namespace.createElement(mosaic.Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
 });
 
@@ -2404,8 +2438,8 @@ const SchemaAndDescription = ({ title: titleProp, schema }) => {
         React__default["default"].createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(schema) })));
 };
 const CodeComponent = props => {
-    const { title, jsonSchema, http, children } = props;
-    const value = String(Array.isArray(children) ? children[0] : children);
+    const { title, jsonSchema, http, resolved, children } = props;
+    const value = resolved || String(Array.isArray(children) ? children[0] : children);
     const parsedValue = useParsedValue(value);
     if (jsonSchema) {
         if (!isJSONSchema(parsedValue)) {