@stoplight/elements-core 8.3.1 → 8.3.3

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

@@ -20,6 +20,7 @@ export declare function exampleOptions(parameter: ParameterSpec): {
 }[] | null;
 export declare function parameterSupportsFileUpload(parameter?: Pick<ParameterSpec, 'schema'>): boolean | undefined;
 export declare function getPlaceholderForParameter(parameter: ParameterSpec): string;
+export declare function getPlaceholderForSelectedParameter(parameter: ParameterSpec): string | undefined;
 export declare const initialParameterValues: (params: readonly ParameterSpec[]) => Record<string, string>;
 export declare function mapSchemaPropertiesToParameters(properties: {
     [key: string]: JSONSchema7Definition;

package/index.esm.js

@@ -1346,6 +1346,13 @@ function getPlaceholderForParameter(parameter) {
         return `${isDefault ? 'defaults to' : 'example'}: ${parameterValue}`;
     return String((_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : '');
 }
+function getPlaceholderForSelectedParameter(parameter) {
+    const { value: parameterValue, isDefault } = getValueForParameter(parameter);
+    if (isDefault) {
+        return `select an option (defaults to: ${parameterValue})`;
+    }
+    return undefined;
+}
 function retrieveDefaultFromSchema(parameter) {
     var _a;
     const defaultValue = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.default;
@@ -1424,7 +1431,7 @@ const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptio
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, parameterDisplayName),
         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("div", null, parameterValueOptions ? (React.createElement(Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: value || '', onChange: onChange, placeholder: getPlaceholderForSelectedParameter(parameter) })) : (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 }))))),
         canChangeOptional && !parameter.required && (React.createElement(React.Fragment, null,
@@ -2546,42 +2553,43 @@ const oauthFlowNames = {
 function getDefaultDescription(scheme) {
     switch (scheme.type) {
         case 'apiKey':
-            return getApiKeyDescription(scheme.in, scheme.name);
+            return getApiKeyDescription(scheme);
         case 'http':
             switch (scheme.scheme) {
                 case 'basic':
-                    return getBasicAuthDescription();
+                    return getBasicAuthDescription(scheme);
                 case 'bearer':
-                    return getBearerAuthDescription();
+                    return getBearerAuthDescription(scheme);
                 case 'digest':
-                    return getDigestAuthDescription();
+                    return getDigestAuthDescription(scheme);
             }
         case 'oauth2':
             return getOAuthDescription(scheme);
     }
     return '';
 }
-function getApiKeyDescription(inProperty, name) {
+function getApiKeyDescription(scheme) {
+    const { in: inProperty, name } = scheme;
     return `An API key is a token that you provide when making API calls. Include the token in a ${inProperty} parameter called \`${name}\`.
 
-  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}`;
+  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}${getSecuritySchemeRoles(scheme)}`;
 }
-function getBasicAuthDescription() {
+function getBasicAuthDescription(schema) {
     return `Basic authentication is a simple authentication scheme built into the HTTP protocol.
   To use it, send your HTTP requests with an Authorization header that contains the word Basic
   followed by a space and a base64-encoded string \`username:password\`.
 
-  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\``;
+  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\`${getSecuritySchemeRoles(schema)}`;
 }
-function getBearerAuthDescription() {
+function getBearerAuthDescription(schema) {
     return `Provide your bearer token in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Bearer 123\``;
+  Example: \`Authorization: Bearer 123\`${getSecuritySchemeRoles(schema)}`;
 }
-function getDigestAuthDescription() {
+function getDigestAuthDescription(schema) {
     return `Provide your encrypted digest scheme data in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\``;
+  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\`${getSecuritySchemeRoles(schema)}`;
 }
 function getOAuthDescription(scheme) {
     const flows = keys(scheme.flows);
@@ -2604,6 +2612,11 @@ function getOAuthFlowDescription(title, flow) {
 ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     }
     return description;
+}
+function getSecuritySchemeRoles(scheme) {
+    var _a;
+    const scopes = (_a = scheme.extensions) === null || _a === void 0 ? void 0 : _a['x-scopes'];
+    return Array.isArray(scopes) ? `\n\nRoles: ${scopes.map(scope => `\`${scope}\``).join(', ')}` : '';
 }
 
 const PanelContent = ({ schemes }) => {

package/index.js

@@ -1407,6 +1407,13 @@ function getPlaceholderForParameter(parameter) {
         return `${isDefault ? 'defaults to' : 'example'}: ${parameterValue}`;
     return String((_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : '');
 }
+function getPlaceholderForSelectedParameter(parameter) {
+    const { value: parameterValue, isDefault } = getValueForParameter(parameter);
+    if (isDefault) {
+        return `select an option (defaults to: ${parameterValue})`;
+    }
+    return undefined;
+}
 function retrieveDefaultFromSchema(parameter) {
     var _a;
     const defaultValue = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.default;
@@ -1485,7 +1492,7 @@ const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptio
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(mosaic.Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, parameterDisplayName),
         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("div", null, parameterValueOptions ? (React__namespace.createElement(mosaic.Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: value || '', onChange: onChange, placeholder: getPlaceholderForSelectedParameter(parameter) })) : (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 }))))),
         canChangeOptional && !parameter.required && (React__namespace.createElement(React__namespace.Fragment, null,
@@ -2607,42 +2614,43 @@ const oauthFlowNames = {
 function getDefaultDescription(scheme) {
     switch (scheme.type) {
         case 'apiKey':
-            return getApiKeyDescription(scheme.in, scheme.name);
+            return getApiKeyDescription(scheme);
         case 'http':
             switch (scheme.scheme) {
                 case 'basic':
-                    return getBasicAuthDescription();
+                    return getBasicAuthDescription(scheme);
                 case 'bearer':
-                    return getBearerAuthDescription();
+                    return getBearerAuthDescription(scheme);
                 case 'digest':
-                    return getDigestAuthDescription();
+                    return getDigestAuthDescription(scheme);
             }
         case 'oauth2':
             return getOAuthDescription(scheme);
     }
     return '';
 }
-function getApiKeyDescription(inProperty, name) {
+function getApiKeyDescription(scheme) {
+    const { in: inProperty, name } = scheme;
     return `An API key is a token that you provide when making API calls. Include the token in a ${inProperty} parameter called \`${name}\`.
 
-  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}`;
+  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}${getSecuritySchemeRoles(scheme)}`;
 }
-function getBasicAuthDescription() {
+function getBasicAuthDescription(schema) {
     return `Basic authentication is a simple authentication scheme built into the HTTP protocol.
   To use it, send your HTTP requests with an Authorization header that contains the word Basic
   followed by a space and a base64-encoded string \`username:password\`.
 
-  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\``;
+  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\`${getSecuritySchemeRoles(schema)}`;
 }
-function getBearerAuthDescription() {
+function getBearerAuthDescription(schema) {
     return `Provide your bearer token in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Bearer 123\``;
+  Example: \`Authorization: Bearer 123\`${getSecuritySchemeRoles(schema)}`;
 }
-function getDigestAuthDescription() {
+function getDigestAuthDescription(schema) {
     return `Provide your encrypted digest scheme data in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\``;
+  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\`${getSecuritySchemeRoles(schema)}`;
 }
 function getOAuthDescription(scheme) {
     const flows = keys__default["default"](scheme.flows);
@@ -2665,6 +2673,11 @@ function getOAuthFlowDescription(title, flow) {
 ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     }
     return description;
+}
+function getSecuritySchemeRoles(scheme) {
+    var _a;
+    const scopes = (_a = scheme.extensions) === null || _a === void 0 ? void 0 : _a['x-scopes'];
+    return Array.isArray(scopes) ? `\n\nRoles: ${scopes.map(scope => `\`${scope}\``).join(', ')}` : '';
 }
 
 const PanelContent = ({ schemes }) => {

package/index.mjs

@@ -1346,6 +1346,13 @@ function getPlaceholderForParameter(parameter) {
         return `${isDefault ? 'defaults to' : 'example'}: ${parameterValue}`;
     return String((_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : '');
 }
+function getPlaceholderForSelectedParameter(parameter) {
+    const { value: parameterValue, isDefault } = getValueForParameter(parameter);
+    if (isDefault) {
+        return `select an option (defaults to: ${parameterValue})`;
+    }
+    return undefined;
+}
 function retrieveDefaultFromSchema(parameter) {
     var _a;
     const defaultValue = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.default;
@@ -1424,7 +1431,7 @@ const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptio
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, parameterDisplayName),
         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("div", null, parameterValueOptions ? (React.createElement(Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: value || '', onChange: onChange, placeholder: getPlaceholderForSelectedParameter(parameter) })) : (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 }))))),
         canChangeOptional && !parameter.required && (React.createElement(React.Fragment, null,
@@ -2546,42 +2553,43 @@ const oauthFlowNames = {
 function getDefaultDescription(scheme) {
     switch (scheme.type) {
         case 'apiKey':
-            return getApiKeyDescription(scheme.in, scheme.name);
+            return getApiKeyDescription(scheme);
         case 'http':
             switch (scheme.scheme) {
                 case 'basic':
-                    return getBasicAuthDescription();
+                    return getBasicAuthDescription(scheme);
                 case 'bearer':
-                    return getBearerAuthDescription();
+                    return getBearerAuthDescription(scheme);
                 case 'digest':
-                    return getDigestAuthDescription();
+                    return getDigestAuthDescription(scheme);
             }
         case 'oauth2':
             return getOAuthDescription(scheme);
     }
     return '';
 }
-function getApiKeyDescription(inProperty, name) {
+function getApiKeyDescription(scheme) {
+    const { in: inProperty, name } = scheme;
     return `An API key is a token that you provide when making API calls. Include the token in a ${inProperty} parameter called \`${name}\`.
 
-  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}`;
+  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}${getSecuritySchemeRoles(scheme)}`;
 }
-function getBasicAuthDescription() {
+function getBasicAuthDescription(schema) {
     return `Basic authentication is a simple authentication scheme built into the HTTP protocol.
   To use it, send your HTTP requests with an Authorization header that contains the word Basic
   followed by a space and a base64-encoded string \`username:password\`.
 
-  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\``;
+  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\`${getSecuritySchemeRoles(schema)}`;
 }
-function getBearerAuthDescription() {
+function getBearerAuthDescription(schema) {
     return `Provide your bearer token in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Bearer 123\``;
+  Example: \`Authorization: Bearer 123\`${getSecuritySchemeRoles(schema)}`;
 }
-function getDigestAuthDescription() {
+function getDigestAuthDescription(schema) {
     return `Provide your encrypted digest scheme data in the Authorization header when making requests to protected resources.
 
-  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\``;
+  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\`${getSecuritySchemeRoles(schema)}`;
 }
 function getOAuthDescription(scheme) {
     const flows = keys(scheme.flows);
@@ -2604,6 +2612,11 @@ function getOAuthFlowDescription(title, flow) {
 ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     }
     return description;
+}
+function getSecuritySchemeRoles(scheme) {
+    var _a;
+    const scopes = (_a = scheme.extensions) === null || _a === void 0 ? void 0 : _a['x-scopes'];
+    return Array.isArray(scopes) ? `\n\nRoles: ${scopes.map(scope => `\`${scope}\``).join(', ')}` : '';
 }
 
 const PanelContent = ({ schemes }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "8.3.1",
+  "version": "8.3.3",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -24,7 +24,7 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@stoplight/http-spec": "^7.0.3",
+    "@stoplight/http-spec": "^7.1.0",
     "@stoplight/json": "^3.21.0",
     "@stoplight/json-schema-ref-parser": "^9.2.7",
     "@stoplight/json-schema-sampler": "0.3.0",