@stoplight/elements-core 7.5.12 → 7.5.13

package/index.mjs

@@ -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"),

package/package.json

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