@stoplight/elements-core 7.13.7 → 7.14.0

package/__fixtures__/operations/urlencoded-post-oneof.d.ts

@@ -0,0 +1,3 @@
+import { IHttpOperation } from '@stoplight/types';
+export declare const httpOperation: IHttpOperation;
+export default httpOperation;

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

@@ -1,7 +1,8 @@
+import { Choice } from '@stoplight/json-schema-viewer';
 import { IMediaTypeContent } from '@stoplight/types';
 import * as React from 'react';
 import { BodyParameterValues, ParameterOptional } from './request-body-utils';
-interface FormDataBodyProps {
+export interface FormDataBodyProps {
     specification: IMediaTypeContent;
     values: BodyParameterValues;
     onChangeValues: (newValues: BodyParameterValues) => void;
@@ -9,4 +10,9 @@ interface FormDataBodyProps {
     isAllowedEmptyValues: ParameterOptional;
 }
 export declare const FormDataBody: React.FC<FormDataBodyProps>;
-export {};
+export interface OneOfMenuProps {
+    choices: Choice[];
+    choice: Choice;
+    onChange: (choice: Choice) => void;
+}
+export declare function OneOfMenu({ choices: subSchemas, choice, onChange }: OneOfMenuProps): JSX.Element | null;

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

@@ -1,5 +1,6 @@
+import { RegularNode, SchemaNode } from '@stoplight/json-schema-tree';
 import type { IHttpParam, INodeExample, INodeExternalExample } from '@stoplight/types';
-import { JSONSchema7Definition } from 'json-schema';
+import { JSONSchema7, JSONSchema7Definition } from 'json-schema';
 export declare type ParameterSpec = Pick<IHttpParam, 'name' | 'schema' | 'required'> & {
     examples?: (Omit<INodeExample, 'id'> | Omit<INodeExternalExample, 'id'>)[];
 };
@@ -17,7 +18,7 @@ export declare function exampleOptions(parameter: ParameterSpec): {
     value: string;
     label: string;
 }[] | null;
-export declare function parameterSupportsFileUpload(parameter: Pick<ParameterSpec, 'schema'>): boolean;
+export declare function parameterSupportsFileUpload(parameter?: Pick<ParameterSpec, 'schema'>): boolean | undefined;
 export declare function getPlaceholderForParameter(parameter: ParameterSpec): string;
 export declare const initialParameterValues: (params: readonly ParameterSpec[]) => Record<string, string>;
 export declare function mapSchemaPropertiesToParameters(properties: {
@@ -25,9 +26,11 @@ export declare function mapSchemaPropertiesToParameters(properties: {
 }, required: string[] | undefined): {
     required?: boolean | undefined;
     name: string;
-    schema: import("json-schema").JSONSchema7 | undefined;
+    schema: JSONSchema7 | undefined;
     examples: {
         key: string;
         value: any;
     }[] | undefined;
 }[];
+export declare function toParameterSpec(jsonTreeNode: RegularNode): ParameterSpec;
+export declare function isRequired(n: SchemaNode): boolean | undefined;

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

@@ -6,6 +6,7 @@ export declare const SimpleGET: Story<TryItProps>;
 export declare const WithParameters: Story<TryItProps>;
 export declare const WithVariables: Story<TryItProps>;
 export declare const UrlEncoded: Story<TryItProps>;
+export declare const UrlEncodedOneOf: Story<TryItProps>;
 export declare const Multipart: Story<TryItProps>;
 export declare const RequestBodySchema: Story<TryItProps>;
 export declare const RequestBodyExamples: Story<TryItProps>;

package/index.esm.js

@@ -25,8 +25,11 @@ import filter from 'lodash/filter.js';
 import flatten from 'lodash/flatten.js';
 import { nanoid } from 'nanoid';
 import curry from 'lodash/curry.js';
+import { isRegularNode, SchemaTree } from '@stoplight/json-schema-tree';
+import { useChoices, visibleChildren, JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import omit from 'lodash/omit.js';
 import keyBy from 'lodash/keyBy.js';
+import last from 'lodash/last.js';
 import map from 'lodash/map.js';
 import mapValues from 'lodash/mapValues.js';
 import isString from 'lodash/isString.js';
@@ -40,7 +43,6 @@ import uniqBy from 'lodash/uniqBy.js';
 import formatXml from 'xml-formatter';
 import entries from 'lodash/entries.js';
 import keys from 'lodash/keys.js';
-import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import sortBy from 'lodash/sortBy.js';
 import isEmpty from 'lodash/isEmpty.js';
 import isNil from 'lodash/isNil.js';
@@ -495,21 +497,6 @@ function createNamedContext(name, defaultValue) {
     return context;
 }
 
-const ALPHANUMERIC = /[^A-Za-z0-9]+$/;
-function useChosenServerUrl(chosenServerUrl) {
-    const match = ALPHANUMERIC.exec(chosenServerUrl);
-    if (match === null) {
-        return {
-            leading: chosenServerUrl,
-            trailing: null,
-        };
-    }
-    return {
-        leading: chosenServerUrl.substring(0, match.index),
-        trailing: chosenServerUrl.substring(match.index),
-    };
-}
-
 const getBreakpoints = (compact) => {
     if (!compact)
         return undefined;
@@ -1191,7 +1178,9 @@ function exampleOptions(parameter) {
 }
 function parameterSupportsFileUpload(parameter) {
     var _a, _b, _c;
-    return (((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) === 'string' &&
+    return (parameter &&
+        parameter.schema &&
+        ((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) === 'string' &&
         (((_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.contentEncoding) === 'base64' ||
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
@@ -1247,6 +1236,35 @@ 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 && schema.examples[0]
             ? [{ key: 'example', value: schema.examples[0] }]
             : undefined }, ((required === null || required === void 0 ? void 0 : required.includes(name)) && { required: true }))));
+}
+function toParameterSpec(jsonTreeNode) {
+    var _a;
+    const isBoolean = jsonTreeNode.primaryType === 'boolean';
+    const schema = !isBoolean ? jsonTreeNode.fragment : undefined;
+    const examples = !isBoolean && jsonTreeNode.fragment.examples && jsonTreeNode.fragment.examples[0]
+        ? [{ key: 'example', value: jsonTreeNode.fragment.examples[0] }]
+        : undefined;
+    const lastJsonPathSegment = (_a = last(jsonTreeNode.path)) !== null && _a !== void 0 ? _a : '<<UNKNOWN>>';
+    return {
+        name: lastJsonPathSegment,
+        schema,
+        examples,
+        required: isRequired(jsonTreeNode),
+    };
+}
+function isRequired(n) {
+    if (!isRegularNode(n)) {
+        return undefined;
+    }
+    const name = last(n.path);
+    if (name === undefined) {
+        return undefined;
+    }
+    const parent = n.parent;
+    if (parent === null || !isRegularNode(parent)) {
+        return undefined;
+    }
+    return parent.required !== null && parent.required.includes(name);
 }
 
 const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptional, canChangeOptional, validate, }) => {
@@ -1276,31 +1294,53 @@ const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptio
 };
 
 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;
-    React.useEffect(() => {
-        if (parameters === undefined) {
-            console.warn(`Invalid schema in form data spec: ${safeStringify(schema)}`);
-        }
-    }, [parameters, schema]);
-    if (parameters === undefined) {
-        return null;
-    }
+    const schema = React.useMemo(() => {
+        var _a;
+        const schema = (_a = specification.schema) !== null && _a !== void 0 ? _a : {};
+        const tree = new SchemaTree(schema, { mergeAllOf: true, refResolver: null });
+        tree.populate();
+        return tree.root.children[0];
+    }, [specification]);
+    const { selectedChoice, choices, setSelectedChoice } = useChoices(schema);
+    const formFieldRows = visibleChildren(selectedChoice.type);
+    const onSchemaChange = (choice) => {
+        onChangeValues({});
+        setSelectedChoice(choice);
+    };
     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;
+        React.createElement(Panel.Titlebar, { rightComponent: React.createElement(OneOfMenu, { choices: choices, choice: selectedChoice, onChange: onSchemaChange }) }, "Body"),
+        React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, formFieldRows
+            .filter(isRegularNode)
+            .map(toParameterSpec)
+            .map(parameter => {
+            var _a, _b;
             const supportsFileUpload = parameterSupportsFileUpload(parameter);
-            const value = values[parameter.name];
+            const value = values[(_a = parameter.name) !== null && _a !== void 0 ? _a : ''];
             if (supportsFileUpload) {
                 return (React.createElement(FileUploadParameterEditor, { key: parameter.name, parameter: parameter, value: value instanceof File ? value : undefined, onChange: newValue => newValue
                         ? 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 })), onChangeOptional: value => onChangeParameterAllow(Object.assign(Object.assign({}, isAllowedEmptyValues), { [parameter.name]: value })), canChangeOptional: true, isOptional: (_a = isAllowedEmptyValues[parameter.name]) !== null && _a !== void 0 ? _a : false }));
+            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: (_b = isAllowedEmptyValues[parameter.name]) !== null && _b !== void 0 ? _b : false }));
         }))));
-};
+};
+function OneOfMenu({ choices: subSchemas, choice, onChange }) {
+    var _a;
+    const onSubSchemaSelect = React.useCallback(onChange, [onChange]);
+    const menuItems = React.useMemo(() => subSchemas.map(subSchema => {
+        const label = subSchema.title;
+        return {
+            id: `request-subschema-${label}`,
+            title: label,
+            onPress: () => onSubSchemaSelect(subSchema),
+        };
+    }), [subSchemas, onSubSchemaSelect]);
+    if (!subSchemas || subSchemas.length < 2) {
+        return null;
+    }
+    const title = (_a = choice === null || choice === void 0 ? void 0 : choice.title) !== null && _a !== void 0 ? _a : 'Variants';
+    return (React.createElement(Menu, { "aria-label": title, items: menuItems, renderTrigger: ({ isOpen }) => (React.createElement(Button, { appearance: "minimal", size: "sm", iconRight: ['fas', 'sort'], active: isOpen, "data-testid": "oneof-menu" }, title)) }));
+}
 
 const fileToBase64 = (file) => new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -2662,11 +2702,9 @@ function MethodPath({ method, path }) {
 function MethodPathInner({ method, path, chosenServerUrl }) {
     const isDark = useThemeIsDark();
     const fullUrl = `${chosenServerUrl}${path}`;
-    const { leading, trailing } = useChosenServerUrl(chosenServerUrl);
     const pathElem = (React.createElement(Flex, { overflowX: "hidden", fontSize: "lg", userSelect: "all" },
         React.createElement(Box, { dir: "rtl", color: "muted", textOverflow: "truncate", overflowX: "hidden" },
-            leading,
-            trailing !== null && (React.createElement(Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, trailing))),
+            React.createElement(Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, chosenServerUrl)),
         React.createElement(Box, { fontWeight: "semibold", flex: 1 }, path)));
     return (React.createElement(HStack, { spacing: 3, pl: 2.5, pr: 4, py: 2, bg: "canvas-50", rounded: "lg", fontFamily: "mono", display: "inline-flex", maxW: "full", title: fullUrl },
         React.createElement(Box, { py: 1, px: 2.5, rounded: "lg", bg: !isDark ? HttpMethodColors[method] : 'canvas-100', color: !isDark ? 'on-primary' : 'body', fontSize: "lg", fontWeight: "semibold", textTransform: "uppercase" }, method),

package/index.js

@@ -27,8 +27,11 @@ var filter = require('lodash/filter.js');
 var flatten = require('lodash/flatten.js');
 var nanoid = require('nanoid');
 var curry = require('lodash/curry.js');
+var jsonSchemaTree = require('@stoplight/json-schema-tree');
+var jsonSchemaViewer = require('@stoplight/json-schema-viewer');
 var omit = require('lodash/omit.js');
 var keyBy = require('lodash/keyBy.js');
+var last = require('lodash/last.js');
 var map = require('lodash/map.js');
 var mapValues = require('lodash/mapValues.js');
 var isString = require('lodash/isString.js');
@@ -42,7 +45,6 @@ var uniqBy = require('lodash/uniqBy.js');
 var formatXml = require('xml-formatter');
 var entries = require('lodash/entries.js');
 var keys = require('lodash/keys.js');
-var jsonSchemaViewer = require('@stoplight/json-schema-viewer');
 var sortBy = require('lodash/sortBy.js');
 var isEmpty = require('lodash/isEmpty.js');
 var isNil = require('lodash/isNil.js');
@@ -87,6 +89,7 @@ var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
 var curry__default = /*#__PURE__*/_interopDefaultLegacy(curry);
 var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
 var keyBy__default = /*#__PURE__*/_interopDefaultLegacy(keyBy);
+var last__default = /*#__PURE__*/_interopDefaultLegacy(last);
 var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
 var mapValues__default = /*#__PURE__*/_interopDefaultLegacy(mapValues);
 var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
@@ -551,21 +554,6 @@ function createNamedContext(name, defaultValue) {
     return context;
 }
 
-const ALPHANUMERIC = /[^A-Za-z0-9]+$/;
-function useChosenServerUrl(chosenServerUrl) {
-    const match = ALPHANUMERIC.exec(chosenServerUrl);
-    if (match === null) {
-        return {
-            leading: chosenServerUrl,
-            trailing: null,
-        };
-    }
-    return {
-        leading: chosenServerUrl.substring(0, match.index),
-        trailing: chosenServerUrl.substring(match.index),
-    };
-}
-
 const getBreakpoints = (compact) => {
     if (!compact)
         return undefined;
@@ -1247,7 +1235,9 @@ function exampleOptions(parameter) {
 }
 function parameterSupportsFileUpload(parameter) {
     var _a, _b, _c;
-    return (((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) === 'string' &&
+    return (parameter &&
+        parameter.schema &&
+        ((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) === 'string' &&
         (((_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.contentEncoding) === 'base64' ||
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
@@ -1303,6 +1293,35 @@ 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 && schema.examples[0]
             ? [{ key: 'example', value: schema.examples[0] }]
             : undefined }, ((required === null || required === void 0 ? void 0 : required.includes(name)) && { required: true }))));
+}
+function toParameterSpec(jsonTreeNode) {
+    var _a;
+    const isBoolean = jsonTreeNode.primaryType === 'boolean';
+    const schema = !isBoolean ? jsonTreeNode.fragment : undefined;
+    const examples = !isBoolean && jsonTreeNode.fragment.examples && jsonTreeNode.fragment.examples[0]
+        ? [{ key: 'example', value: jsonTreeNode.fragment.examples[0] }]
+        : undefined;
+    const lastJsonPathSegment = (_a = last__default["default"](jsonTreeNode.path)) !== null && _a !== void 0 ? _a : '<<UNKNOWN>>';
+    return {
+        name: lastJsonPathSegment,
+        schema,
+        examples,
+        required: isRequired(jsonTreeNode),
+    };
+}
+function isRequired(n) {
+    if (!jsonSchemaTree.isRegularNode(n)) {
+        return undefined;
+    }
+    const name = last__default["default"](n.path);
+    if (name === undefined) {
+        return undefined;
+    }
+    const parent = n.parent;
+    if (parent === null || !jsonSchemaTree.isRegularNode(parent)) {
+        return undefined;
+    }
+    return parent.required !== null && parent.required.includes(name);
 }
 
 const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptional, canChangeOptional, validate, }) => {
@@ -1332,31 +1351,53 @@ const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptio
 };
 
 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;
-    React__namespace.useEffect(() => {
-        if (parameters === undefined) {
-            console.warn(`Invalid schema in form data spec: ${json.safeStringify(schema)}`);
-        }
-    }, [parameters, schema]);
-    if (parameters === undefined) {
-        return null;
-    }
+    const schema = React__namespace.useMemo(() => {
+        var _a;
+        const schema = (_a = specification.schema) !== null && _a !== void 0 ? _a : {};
+        const tree = new jsonSchemaTree.SchemaTree(schema, { mergeAllOf: true, refResolver: null });
+        tree.populate();
+        return tree.root.children[0];
+    }, [specification]);
+    const { selectedChoice, choices, setSelectedChoice } = jsonSchemaViewer.useChoices(schema);
+    const formFieldRows = jsonSchemaViewer.visibleChildren(selectedChoice.type);
+    const onSchemaChange = (choice) => {
+        onChangeValues({});
+        setSelectedChoice(choice);
+    };
     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;
+        React__namespace.createElement(mosaic.Panel.Titlebar, { rightComponent: React__namespace.createElement(OneOfMenu, { choices: choices, choice: selectedChoice, onChange: onSchemaChange }) }, "Body"),
+        React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, formFieldRows
+            .filter(jsonSchemaTree.isRegularNode)
+            .map(toParameterSpec)
+            .map(parameter => {
+            var _a, _b;
             const supportsFileUpload = parameterSupportsFileUpload(parameter);
-            const value = values[parameter.name];
+            const value = values[(_a = parameter.name) !== null && _a !== void 0 ? _a : ''];
             if (supportsFileUpload) {
                 return (React__namespace.createElement(FileUploadParameterEditor, { key: parameter.name, parameter: parameter, value: value instanceof File ? value : undefined, onChange: newValue => newValue
                         ? 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 })), onChangeOptional: value => onChangeParameterAllow(Object.assign(Object.assign({}, isAllowedEmptyValues), { [parameter.name]: value })), canChangeOptional: true, isOptional: (_a = isAllowedEmptyValues[parameter.name]) !== null && _a !== void 0 ? _a : false }));
+            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: (_b = isAllowedEmptyValues[parameter.name]) !== null && _b !== void 0 ? _b : false }));
         }))));
-};
+};
+function OneOfMenu({ choices: subSchemas, choice, onChange }) {
+    var _a;
+    const onSubSchemaSelect = React__namespace.useCallback(onChange, [onChange]);
+    const menuItems = React__namespace.useMemo(() => subSchemas.map(subSchema => {
+        const label = subSchema.title;
+        return {
+            id: `request-subschema-${label}`,
+            title: label,
+            onPress: () => onSubSchemaSelect(subSchema),
+        };
+    }), [subSchemas, onSubSchemaSelect]);
+    if (!subSchemas || subSchemas.length < 2) {
+        return null;
+    }
+    const title = (_a = choice === null || choice === void 0 ? void 0 : choice.title) !== null && _a !== void 0 ? _a : 'Variants';
+    return (React__namespace.createElement(mosaic.Menu, { "aria-label": title, items: menuItems, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.Button, { appearance: "minimal", size: "sm", iconRight: ['fas', 'sort'], active: isOpen, "data-testid": "oneof-menu" }, title)) }));
+}
 
 const fileToBase64 = (file) => new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -2718,11 +2759,9 @@ function MethodPath({ method, path }) {
 function MethodPathInner({ method, path, chosenServerUrl }) {
     const isDark = mosaic.useThemeIsDark();
     const fullUrl = `${chosenServerUrl}${path}`;
-    const { leading, trailing } = useChosenServerUrl(chosenServerUrl);
     const pathElem = (React__namespace.createElement(mosaic.Flex, { overflowX: "hidden", fontSize: "lg", userSelect: "all" },
         React__namespace.createElement(mosaic.Box, { dir: "rtl", color: "muted", textOverflow: "truncate", overflowX: "hidden" },
-            leading,
-            trailing !== null && (React__namespace.createElement(mosaic.Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, trailing))),
+            React__namespace.createElement(mosaic.Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, chosenServerUrl)),
         React__namespace.createElement(mosaic.Box, { fontWeight: "semibold", flex: 1 }, path)));
     return (React__namespace.createElement(mosaic.HStack, { spacing: 3, pl: 2.5, pr: 4, py: 2, bg: "canvas-50", rounded: "lg", fontFamily: "mono", display: "inline-flex", maxW: "full", title: fullUrl },
         React__namespace.createElement(mosaic.Box, { py: 1, px: 2.5, rounded: "lg", bg: !isDark ? HttpMethodColors[method] : 'canvas-100', color: !isDark ? 'on-primary' : 'body', fontSize: "lg", fontWeight: "semibold", textTransform: "uppercase" }, method),

package/index.mjs

@@ -25,8 +25,11 @@ import filter from 'lodash/filter.js';
 import flatten from 'lodash/flatten.js';
 import { nanoid } from 'nanoid';
 import curry from 'lodash/curry.js';
+import { isRegularNode, SchemaTree } from '@stoplight/json-schema-tree';
+import { useChoices, visibleChildren, JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import omit from 'lodash/omit.js';
 import keyBy from 'lodash/keyBy.js';
+import last from 'lodash/last.js';
 import map from 'lodash/map.js';
 import mapValues from 'lodash/mapValues.js';
 import isString from 'lodash/isString.js';
@@ -40,7 +43,6 @@ import uniqBy from 'lodash/uniqBy.js';
 import formatXml from 'xml-formatter';
 import entries from 'lodash/entries.js';
 import keys from 'lodash/keys.js';
-import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import sortBy from 'lodash/sortBy.js';
 import isEmpty from 'lodash/isEmpty.js';
 import isNil from 'lodash/isNil.js';
@@ -495,21 +497,6 @@ function createNamedContext(name, defaultValue) {
     return context;
 }
 
-const ALPHANUMERIC = /[^A-Za-z0-9]+$/;
-function useChosenServerUrl(chosenServerUrl) {
-    const match = ALPHANUMERIC.exec(chosenServerUrl);
-    if (match === null) {
-        return {
-            leading: chosenServerUrl,
-            trailing: null,
-        };
-    }
-    return {
-        leading: chosenServerUrl.substring(0, match.index),
-        trailing: chosenServerUrl.substring(match.index),
-    };
-}
-
 const getBreakpoints = (compact) => {
     if (!compact)
         return undefined;
@@ -1191,7 +1178,9 @@ function exampleOptions(parameter) {
 }
 function parameterSupportsFileUpload(parameter) {
     var _a, _b, _c;
-    return (((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) === 'string' &&
+    return (parameter &&
+        parameter.schema &&
+        ((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) === 'string' &&
         (((_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.contentEncoding) === 'base64' ||
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
@@ -1247,6 +1236,35 @@ 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 && schema.examples[0]
             ? [{ key: 'example', value: schema.examples[0] }]
             : undefined }, ((required === null || required === void 0 ? void 0 : required.includes(name)) && { required: true }))));
+}
+function toParameterSpec(jsonTreeNode) {
+    var _a;
+    const isBoolean = jsonTreeNode.primaryType === 'boolean';
+    const schema = !isBoolean ? jsonTreeNode.fragment : undefined;
+    const examples = !isBoolean && jsonTreeNode.fragment.examples && jsonTreeNode.fragment.examples[0]
+        ? [{ key: 'example', value: jsonTreeNode.fragment.examples[0] }]
+        : undefined;
+    const lastJsonPathSegment = (_a = last(jsonTreeNode.path)) !== null && _a !== void 0 ? _a : '<<UNKNOWN>>';
+    return {
+        name: lastJsonPathSegment,
+        schema,
+        examples,
+        required: isRequired(jsonTreeNode),
+    };
+}
+function isRequired(n) {
+    if (!isRegularNode(n)) {
+        return undefined;
+    }
+    const name = last(n.path);
+    if (name === undefined) {
+        return undefined;
+    }
+    const parent = n.parent;
+    if (parent === null || !isRegularNode(parent)) {
+        return undefined;
+    }
+    return parent.required !== null && parent.required.includes(name);
 }
 
 const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptional, canChangeOptional, validate, }) => {
@@ -1276,31 +1294,53 @@ const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptio
 };
 
 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;
-    React.useEffect(() => {
-        if (parameters === undefined) {
-            console.warn(`Invalid schema in form data spec: ${safeStringify(schema)}`);
-        }
-    }, [parameters, schema]);
-    if (parameters === undefined) {
-        return null;
-    }
+    const schema = React.useMemo(() => {
+        var _a;
+        const schema = (_a = specification.schema) !== null && _a !== void 0 ? _a : {};
+        const tree = new SchemaTree(schema, { mergeAllOf: true, refResolver: null });
+        tree.populate();
+        return tree.root.children[0];
+    }, [specification]);
+    const { selectedChoice, choices, setSelectedChoice } = useChoices(schema);
+    const formFieldRows = visibleChildren(selectedChoice.type);
+    const onSchemaChange = (choice) => {
+        onChangeValues({});
+        setSelectedChoice(choice);
+    };
     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;
+        React.createElement(Panel.Titlebar, { rightComponent: React.createElement(OneOfMenu, { choices: choices, choice: selectedChoice, onChange: onSchemaChange }) }, "Body"),
+        React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, formFieldRows
+            .filter(isRegularNode)
+            .map(toParameterSpec)
+            .map(parameter => {
+            var _a, _b;
             const supportsFileUpload = parameterSupportsFileUpload(parameter);
-            const value = values[parameter.name];
+            const value = values[(_a = parameter.name) !== null && _a !== void 0 ? _a : ''];
             if (supportsFileUpload) {
                 return (React.createElement(FileUploadParameterEditor, { key: parameter.name, parameter: parameter, value: value instanceof File ? value : undefined, onChange: newValue => newValue
                         ? 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 })), onChangeOptional: value => onChangeParameterAllow(Object.assign(Object.assign({}, isAllowedEmptyValues), { [parameter.name]: value })), canChangeOptional: true, isOptional: (_a = isAllowedEmptyValues[parameter.name]) !== null && _a !== void 0 ? _a : false }));
+            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: (_b = isAllowedEmptyValues[parameter.name]) !== null && _b !== void 0 ? _b : false }));
         }))));
-};
+};
+function OneOfMenu({ choices: subSchemas, choice, onChange }) {
+    var _a;
+    const onSubSchemaSelect = React.useCallback(onChange, [onChange]);
+    const menuItems = React.useMemo(() => subSchemas.map(subSchema => {
+        const label = subSchema.title;
+        return {
+            id: `request-subschema-${label}`,
+            title: label,
+            onPress: () => onSubSchemaSelect(subSchema),
+        };
+    }), [subSchemas, onSubSchemaSelect]);
+    if (!subSchemas || subSchemas.length < 2) {
+        return null;
+    }
+    const title = (_a = choice === null || choice === void 0 ? void 0 : choice.title) !== null && _a !== void 0 ? _a : 'Variants';
+    return (React.createElement(Menu, { "aria-label": title, items: menuItems, renderTrigger: ({ isOpen }) => (React.createElement(Button, { appearance: "minimal", size: "sm", iconRight: ['fas', 'sort'], active: isOpen, "data-testid": "oneof-menu" }, title)) }));
+}
 
 const fileToBase64 = (file) => new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -2662,11 +2702,9 @@ function MethodPath({ method, path }) {
 function MethodPathInner({ method, path, chosenServerUrl }) {
     const isDark = useThemeIsDark();
     const fullUrl = `${chosenServerUrl}${path}`;
-    const { leading, trailing } = useChosenServerUrl(chosenServerUrl);
     const pathElem = (React.createElement(Flex, { overflowX: "hidden", fontSize: "lg", userSelect: "all" },
         React.createElement(Box, { dir: "rtl", color: "muted", textOverflow: "truncate", overflowX: "hidden" },
-            leading,
-            trailing !== null && (React.createElement(Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, trailing))),
+            React.createElement(Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, chosenServerUrl)),
         React.createElement(Box, { fontWeight: "semibold", flex: 1 }, path)));
     return (React.createElement(HStack, { spacing: 3, pl: 2.5, pr: 4, py: 2, bg: "canvas-50", rounded: "lg", fontFamily: "mono", display: "inline-flex", maxW: "full", title: fullUrl },
         React.createElement(Box, { py: 1, px: 2.5, rounded: "lg", bg: !isDark ? HttpMethodColors[method] : 'canvas-100', color: !isDark ? 'on-primary' : 'body', fontSize: "lg", fontWeight: "semibold", textTransform: "uppercase" }, method),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.13.7",
+  "version": "7.14.0",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -28,17 +28,18 @@
     "@stoplight/json": "^3.18.1",
     "@stoplight/json-schema-ref-parser": "^9.0.5",
     "@stoplight/json-schema-sampler": "0.2.3",
-    "@stoplight/json-schema-viewer": "^4.12.1",
+    "@stoplight/json-schema-tree": "^2.2.5",
+    "@stoplight/json-schema-viewer": "^4.13.0",
     "@stoplight/markdown-viewer": "^5.6.0",
-    "@stoplight/mosaic": "^1.44.3",
-    "@stoplight/mosaic-code-editor": "^1.44.3",
-    "@stoplight/mosaic-code-viewer": "^1.44.3",
+    "@stoplight/mosaic": "^1.44.4",
+    "@stoplight/mosaic-code-editor": "^1.44.4",
+    "@stoplight/mosaic-code-viewer": "^1.44.4",
     "@stoplight/path": "^1.3.2",
     "@stoplight/react-error-boundary": "^2.0.0",
     "@stoplight/types": "^14.0.0",
     "@stoplight/yaml": "^4.2.3",
     "classnames": "^2.2.6",
-    "httpsnippet-lite": "^3.0.1",
+    "httpsnippet-lite": "^3.0.5",
     "jotai": "1.3.9",
     "json-schema": "^0.4.0",
     "lodash": "^4.17.19",

package/hooks/useChosenServerUrl.d.ts

@@ -1,6 +0,0 @@
-declare type ChosenServerUrl = {
-    leading: string;
-    trailing: string | null;
-};
-export declare function useChosenServerUrl(chosenServerUrl: string): ChosenServerUrl;
-export {};