@stoplight/elements-core 7.13.9 → 7.15.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/Docs/Article/Article.stories.d.ts

@@ -1,5 +1,13 @@
-declare const meta: import("@storybook/react").Meta<import("..").DocsComponentProps<string | import("@stoplight/markdown/ast-types/mdast").Root> & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
-export declare const Basic: import("@storybook/react").Story<import("..").DocsComponentProps<string | import("@stoplight/markdown/ast-types/mdast").Root> & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
-export declare const KitchenSink: import("@storybook/react").Story<import("..").DocsComponentProps<string | import("@stoplight/markdown/ast-types/mdast").Root> & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
-export declare const MultipleTryIts: import("@storybook/react").Story<import("..").DocsComponentProps<string | import("@stoplight/markdown/ast-types/mdast").Root> & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const KitchenSink: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const MultipleTryIts: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/Docs/Docs.d.ts

@@ -33,6 +33,7 @@ export interface DocsProps extends BaseDocsProps {
     nodeData: unknown;
     useNodeForRefResolving?: boolean;
     refResolver?: ReferenceResolver;
+    maxRefDepth?: number;
 }
 export interface DocsComponentProps<T = unknown> extends BaseDocsProps {
     data: T;

package/components/Docs/Docs.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, Story } from '@storybook/react';
+import { Story } from '@storybook/react';
 import { DocsProps } from './Docs';
-declare const _default: Meta<DocsProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, DocsProps>;
 export default _default;
 export declare const DocsStory: Story<DocsProps>;

package/components/Docs/HttpOperation/HttpOperation.stories.d.ts

@@ -1,3 +1,7 @@
-declare const meta: import("@storybook/react").Meta<import("./HttpOperation").HttpOperationProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
-export declare const Story: import("@storybook/react").Story<import("./HttpOperation").HttpOperationProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

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

@@ -1,3 +1,7 @@
-declare const meta: import("@storybook/react").Meta<import("./HttpService").HttpServiceProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
-export declare const Story: import("@storybook/react").Story<import("./HttpService").HttpServiceProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/Docs/Model/Model.stories.d.ts

@@ -1,3 +1,7 @@
-declare const meta: import("@storybook/react").Meta<import("./Model").ModelProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export default meta;
-export declare const Story: import("@storybook/react").Story<import("./Model").ModelProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    data: any;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

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

@@ -1,13 +1,16 @@
 import type { ErrorBoundaryProps } from '@stoplight/react-error-boundary';
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
 declare type DocsProps = {
-    data: unknown;
+    data: any;
 } & ErrorBoundaryProps;
-interface HelperReturn<P extends Partial<DocsProps>> {
-    meta: Meta<P>;
-    createStory(name: string, input: Partial<P>): Story<P>;
-    createHoistedStory(input: Partial<P>): Story<P>;
+declare type storyOptions = DocsProps & {
+    layoutOptions?: object;
+};
+interface HelperReturn<P extends DocsProps> {
+    meta: Meta<DocsProps>;
+    createStory(name: string, input: storyOptions): StoryFn<P>;
+    createHoistedStory(input: storyOptions): StoryFn<P>;
 }
-export declare const createStoriesForDocsComponent: <P extends Partial<DocsProps> = DocsProps>(Component: React.ComponentType<P>, title?: string) => HelperReturn<P>;
+export declare const createStoriesForDocsComponent: (Component: React.ComponentType<DocsProps>, title?: string) => HelperReturn<DocsProps>;
 export {};

package/components/RequestSamples/RequestSamples.stories.d.ts

@@ -1,5 +1,4 @@
-import { Meta, Story } from '@storybook/react';
 import { RequestSamplesProps } from './RequestSamples';
-declare const _default: Meta<RequestSamplesProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, RequestSamplesProps>;
 export default _default;
-export declare const HoistedStory: Story<RequestSamplesProps>;
+export declare const HoistedStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RequestSamplesProps>;

package/components/ResponseExamples/ResponseExamples.stories.d.ts

@@ -1,5 +1,4 @@
-import { Meta, Story } from '@storybook/react';
 import { ResponseExamplesProps } from './ResponseExamples';
-declare const _default: Meta<ResponseExamplesProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ResponseExamplesProps>;
 export default _default;
-export declare const HoistedStory: Story<ResponseExamplesProps>;
+export declare const HoistedStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ResponseExamplesProps>;

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

@@ -1,13 +1,13 @@
-import { Meta, Story } from '@storybook/react';
 import { TryItProps } from './TryIt';
-declare const _default: Meta<TryItProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
 export default _default;
-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 Multipart: Story<TryItProps>;
-export declare const RequestBodySchema: Story<TryItProps>;
-export declare const RequestBodyExamples: Story<TryItProps>;
-export declare const TryItAuth: Story<TryItProps>;
-export declare const TryItAuthDuplicated: Story<TryItProps>;
+export declare const SimpleGET: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+export declare const WithParameters: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+export declare const WithVariables: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+export declare const UrlEncoded: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+export declare const UrlEncodedOneOf: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+export declare const Multipart: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+export declare const RequestBodySchema: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+export declare const RequestBodyExamples: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+export declare const TryItAuth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;
+export declare const TryItAuthDuplicated: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItProps>;

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

@@ -1,6 +1,5 @@
-import { Meta, Story } from '@storybook/react';
 import { TryItWithRequestSamplesProps } from './TryItWithRequestSamples';
-declare const _default: Meta<TryItWithRequestSamplesProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TryItWithRequestSamplesProps>;
 export default _default;
-export declare const WithParameters: Story<TryItWithRequestSamplesProps>;
-export declare const WithVariables: Story<TryItWithRequestSamplesProps>;
+export declare const WithParameters: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItWithRequestSamplesProps>;
+export declare const WithVariables: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TryItWithRequestSamplesProps>;

package/context/InlineRefResolver.d.ts

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import { ReferenceResolver } from '../utils/ref-resolving/ReferenceResolver';
+declare type InlineRefResolverContext = {
+    resolver: ReferenceResolver | undefined;
+    maxRefDepth: number | undefined;
+};
+declare const InlineRefResolverContext: React.Context<InlineRefResolverContext | undefined>;
 declare type InlineRefResolverProviderProps = {
     document?: unknown;
     resolver?: ReferenceResolver;
+    maxRefDepth?: number;
 };
 export declare const InlineRefResolverProvider: React.FC<InlineRefResolverProviderProps>;
-export declare const useInlineRefResolver: () => ReferenceResolver | undefined;
+export declare const useInlineRefResolver: () => InlineRefResolverContext | undefined;
 export declare const useDocument: () => object | undefined;
 export declare const useResolvedObject: (currentObject: object) => object;
-export declare const useSchemaInlineRefResolver: () => ReferenceResolver;
+export declare const useSchemaInlineRefResolver: () => [ReferenceResolver, number | undefined];
 export {};

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';
@@ -117,23 +119,25 @@ const InlineRefResolverContext = React.createContext(undefined);
 InlineRefResolverContext.displayName = 'InlineRefResolverContext';
 const DocumentContext = React.createContext(undefined);
 DocumentContext.displayName = 'DocumentContext';
-const InlineRefResolverProvider = ({ children, document: maybeDocument, resolver, }) => {
+const InlineRefResolverProvider = ({ children, document: maybeDocument, resolver, maxRefDepth, }) => {
     const document = isPlainObject$1(maybeDocument) ? maybeDocument : undefined;
     const computedResolver = React.useMemo(() => resolver || (document !== undefined ? defaultResolver(document) : undefined), [document, resolver]);
-    return (React.createElement(InlineRefResolverContext.Provider, { value: computedResolver },
+    return (React.createElement(InlineRefResolverContext.Provider, { value: { resolver: computedResolver, maxRefDepth } },
         React.createElement(DocumentContext.Provider, { value: document }, children)));
 };
 const useInlineRefResolver = () => useContext(InlineRefResolverContext);
 const useDocument = () => useContext(DocumentContext);
 const useResolvedObject = (currentObject) => {
+    var _a;
     const document = useDocument();
-    const resolver = useInlineRefResolver();
+    const { resolver } = (_a = useInlineRefResolver()) !== null && _a !== void 0 ? _a : {};
     return React.useMemo(() => createResolvedObject(currentObject, { contextObject: document, resolver }), [currentObject, document, resolver]);
 };
 const useSchemaInlineRefResolver = () => {
+    var _a;
     const document = useDocument();
-    const resolver = useInlineRefResolver();
-    return React.useCallback((...args) => {
+    const { resolver, maxRefDepth } = (_a = useInlineRefResolver()) !== null && _a !== void 0 ? _a : {};
+    const referenceResolver = React.useCallback((...args) => {
         const resolved = resolver === null || resolver === void 0 ? void 0 : resolver(...args);
         if (!isPlainObject$1(resolved)) {
             return resolved;
@@ -149,6 +153,7 @@ const useSchemaInlineRefResolver = () => {
         delete converted.$schema;
         return converted;
     }, [document, resolver]);
+    return [referenceResolver, maxRefDepth];
 };
 
 const DEFAULT_CONTEXT = {};
@@ -1176,7 +1181,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'));
 }
@@ -1232,6 +1239,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, }) => {
@@ -1261,31 +1297,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();
@@ -2391,7 +2449,7 @@ const isBodyEmpty = (body) => {
 };
 const Body = ({ body, onChange }) => {
     var _a;
-    const refResolver = useSchemaInlineRefResolver();
+    const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React.useState(0);
     const { nodeHasChanged } = useOptionsCtx();
     React.useEffect(() => {
@@ -2408,7 +2466,7 @@ const Body = ({ body, onChange }) => {
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
+        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2433,11 +2491,11 @@ const defaultStyle = {
 };
 const Parameters = ({ parameters, parameterType }) => {
     const { nodeHasChanged } = useOptionsCtx();
-    const refResolver = useSchemaInlineRefResolver();
+    const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const schema = React.useMemo(() => httpOperationParamsToSchema({ parameters, parameterType }), [parameters, parameterType]);
     if (!schema)
         return null;
-    return React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged });
+    return (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged }));
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
@@ -2571,7 +2629,7 @@ Responses.displayName = 'HttpOperation.Responses';
 const Response = ({ response, onMediaTypeChange }) => {
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React.useState(0);
-    const refResolver = useSchemaInlineRefResolver();
+    const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const { nodeHasChanged } = useOptionsCtx();
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
@@ -2590,7 +2648,7 @@ const Response = ({ response, onMediaTypeChange }) => {
             React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React.createElement(Flex, { flex: 1, justify: "end" },
                     React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
+            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2874,7 +2932,7 @@ const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps:
 
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a, _b;
-    const resolveRef = useSchemaInlineRefResolver();
+    const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
     const { nodeHasChanged } = useOptionsCtx();
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
@@ -2900,7 +2958,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
             React.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         isCompact && modelExamples,
-        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
+        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
     return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
 const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
@@ -2923,7 +2981,7 @@ const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
     var _b;
-    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, nodeHasChanged } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "nodeHasChanged"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
@@ -2931,7 +2989,7 @@ const Docs = React.memo((_a) => {
     }
     let elem = React.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
     if (useNodeForRefResolving) {
-        elem = (React.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver }, elem));
+        elem = (React.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver, maxRefDepth: maxRefDepth }, elem));
     }
     return React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
 });
@@ -3043,13 +3101,13 @@ function isPartialHttpRequest(maybeHttpRequest) {
         typeof maybeHttpRequest['url'] === 'string');
 }
 const SchemaAndDescription = ({ title: titleProp, schema }) => {
-    const resolveRef = useSchemaInlineRefResolver();
+    const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
     return (React__default.createElement(Box, { py: 2 },
         title && (React__default.createElement(Flex, { alignItems: "center", p: 2 },
             React__default.createElement(Icon, { icon: NodeTypeIconDefs[NodeType.Model], color: NodeTypeColors[NodeType.Model] }),
             React__default.createElement(Box, { color: "muted", px: 2 }, title))),
-        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(schema) })));
+        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema) })));
 };
 const CodeComponent = props => {
     const { title, jsonSchema, http, resolved, children } = props;
@@ -3060,7 +3118,7 @@ const CodeComponent = props => {
         if (!isJSONSchema(parsedValue)) {
             return null;
         }
-        return (React__default.createElement(InlineRefResolverProvider, { document: parsedValue, resolver: resolver },
+        return (React__default.createElement(InlineRefResolverProvider, { document: parsedValue, resolver: resolver === null || resolver === void 0 ? void 0 : resolver.resolver, maxRefDepth: resolver === null || resolver === void 0 ? void 0 : resolver.maxRefDepth },
             React__default.createElement(SchemaAndDescription, { title: title, schema: parsedValue })));
     }
     if (http) {

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);
@@ -173,23 +176,25 @@ const InlineRefResolverContext = React__namespace.createContext(undefined);
 InlineRefResolverContext.displayName = 'InlineRefResolverContext';
 const DocumentContext = React__namespace.createContext(undefined);
 DocumentContext.displayName = 'DocumentContext';
-const InlineRefResolverProvider = ({ children, document: maybeDocument, resolver, }) => {
+const InlineRefResolverProvider = ({ children, document: maybeDocument, resolver, maxRefDepth, }) => {
     const document = json.isPlainObject(maybeDocument) ? maybeDocument : undefined;
     const computedResolver = React__namespace.useMemo(() => resolver || (document !== undefined ? defaultResolver(document) : undefined), [document, resolver]);
-    return (React__namespace.createElement(InlineRefResolverContext.Provider, { value: computedResolver },
+    return (React__namespace.createElement(InlineRefResolverContext.Provider, { value: { resolver: computedResolver, maxRefDepth } },
         React__namespace.createElement(DocumentContext.Provider, { value: document }, children)));
 };
 const useInlineRefResolver = () => React.useContext(InlineRefResolverContext);
 const useDocument = () => React.useContext(DocumentContext);
 const useResolvedObject = (currentObject) => {
+    var _a;
     const document = useDocument();
-    const resolver = useInlineRefResolver();
+    const { resolver } = (_a = useInlineRefResolver()) !== null && _a !== void 0 ? _a : {};
     return React__namespace.useMemo(() => createResolvedObject(currentObject, { contextObject: document, resolver }), [currentObject, document, resolver]);
 };
 const useSchemaInlineRefResolver = () => {
+    var _a;
     const document = useDocument();
-    const resolver = useInlineRefResolver();
-    return React__namespace.useCallback((...args) => {
+    const { resolver, maxRefDepth } = (_a = useInlineRefResolver()) !== null && _a !== void 0 ? _a : {};
+    const referenceResolver = React__namespace.useCallback((...args) => {
         const resolved = resolver === null || resolver === void 0 ? void 0 : resolver(...args);
         if (!json.isPlainObject(resolved)) {
             return resolved;
@@ -205,6 +210,7 @@ const useSchemaInlineRefResolver = () => {
         delete converted.$schema;
         return converted;
     }, [document, resolver]);
+    return [referenceResolver, maxRefDepth];
 };
 
 const DEFAULT_CONTEXT = {};
@@ -1232,7 +1238,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'));
 }
@@ -1288,6 +1296,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, }) => {
@@ -1317,31 +1354,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();
@@ -2447,7 +2506,7 @@ const isBodyEmpty = (body) => {
 };
 const Body = ({ body, onChange }) => {
     var _a;
-    const refResolver = useSchemaInlineRefResolver();
+    const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
     const { nodeHasChanged } = useOptionsCtx();
     React__namespace.useEffect(() => {
@@ -2464,7 +2523,7 @@ const Body = ({ body, onChange }) => {
         description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(MarkdownViewer, { markdown: description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
+        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2489,11 +2548,11 @@ const defaultStyle = {
 };
 const Parameters = ({ parameters, parameterType }) => {
     const { nodeHasChanged } = useOptionsCtx();
-    const refResolver = useSchemaInlineRefResolver();
+    const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const schema = React__namespace.useMemo(() => httpOperationParamsToSchema({ parameters, parameterType }), [parameters, parameterType]);
     if (!schema)
         return null;
-    return React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged });
+    return (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged }));
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
@@ -2627,7 +2686,7 @@ Responses.displayName = 'HttpOperation.Responses';
 const Response = ({ response, onMediaTypeChange }) => {
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
-    const refResolver = useSchemaInlineRefResolver();
+    const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const { nodeHasChanged } = useOptionsCtx();
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
@@ -2646,7 +2705,7 @@ const Response = ({ response, onMediaTypeChange }) => {
             React__namespace.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
                     React__namespace.createElement(mosaic.Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
+            schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2930,7 +2989,7 @@ const HttpService = reactErrorBoundary.withErrorBoundary(HttpServiceComponent, {
 
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a, _b;
-    const resolveRef = useSchemaInlineRefResolver();
+    const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
     const { nodeHasChanged } = useOptionsCtx();
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
@@ -2956,7 +3015,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
             React__namespace.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
         isCompact && modelExamples,
-        React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
+        React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
     return (React__namespace.createElement(TwoColumnLayout, { ref: layoutRef, className: cn__default["default"]('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
 const ModelExamples = React__namespace.memo(({ data, isCollapsible = false }) => {
@@ -2979,7 +3038,7 @@ const Model = reactErrorBoundary.withErrorBoundary(ModelComponent, { recoverable
 
 const Docs = React__namespace.memo((_a) => {
     var _b;
-    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, nodeHasChanged } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "nodeHasChanged"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
@@ -2987,7 +3046,7 @@ const Docs = React__namespace.memo((_a) => {
     }
     let elem = React__namespace.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
     if (useNodeForRefResolving) {
-        elem = (React__namespace.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver }, elem));
+        elem = (React__namespace.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver, maxRefDepth: maxRefDepth }, elem));
     }
     return React__namespace.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
 });
@@ -3099,13 +3158,13 @@ function isPartialHttpRequest(maybeHttpRequest) {
         typeof maybeHttpRequest['url'] === 'string');
 }
 const SchemaAndDescription = ({ title: titleProp, schema }) => {
-    const resolveRef = useSchemaInlineRefResolver();
+    const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
     return (React__default["default"].createElement(mosaic.Box, { py: 2 },
         title && (React__default["default"].createElement(mosaic.Flex, { alignItems: "center", p: 2 },
             React__default["default"].createElement(mosaic.Icon, { icon: NodeTypeIconDefs[types.NodeType.Model], color: NodeTypeColors[types.NodeType.Model] }),
             React__default["default"].createElement(mosaic.Box, { color: "muted", px: 2 }, title))),
-        React__default["default"].createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(schema) })));
+        React__default["default"].createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema) })));
 };
 const CodeComponent = props => {
     const { title, jsonSchema, http, resolved, children } = props;
@@ -3116,7 +3175,7 @@ const CodeComponent = props => {
         if (!isJSONSchema(parsedValue)) {
             return null;
         }
-        return (React__default["default"].createElement(InlineRefResolverProvider, { document: parsedValue, resolver: resolver },
+        return (React__default["default"].createElement(InlineRefResolverProvider, { document: parsedValue, resolver: resolver === null || resolver === void 0 ? void 0 : resolver.resolver, maxRefDepth: resolver === null || resolver === void 0 ? void 0 : resolver.maxRefDepth },
             React__default["default"].createElement(SchemaAndDescription, { title: title, schema: parsedValue })));
     }
     if (http) {

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';
@@ -117,23 +119,25 @@ const InlineRefResolverContext = React.createContext(undefined);
 InlineRefResolverContext.displayName = 'InlineRefResolverContext';
 const DocumentContext = React.createContext(undefined);
 DocumentContext.displayName = 'DocumentContext';
-const InlineRefResolverProvider = ({ children, document: maybeDocument, resolver, }) => {
+const InlineRefResolverProvider = ({ children, document: maybeDocument, resolver, maxRefDepth, }) => {
     const document = isPlainObject$1(maybeDocument) ? maybeDocument : undefined;
     const computedResolver = React.useMemo(() => resolver || (document !== undefined ? defaultResolver(document) : undefined), [document, resolver]);
-    return (React.createElement(InlineRefResolverContext.Provider, { value: computedResolver },
+    return (React.createElement(InlineRefResolverContext.Provider, { value: { resolver: computedResolver, maxRefDepth } },
         React.createElement(DocumentContext.Provider, { value: document }, children)));
 };
 const useInlineRefResolver = () => useContext(InlineRefResolverContext);
 const useDocument = () => useContext(DocumentContext);
 const useResolvedObject = (currentObject) => {
+    var _a;
     const document = useDocument();
-    const resolver = useInlineRefResolver();
+    const { resolver } = (_a = useInlineRefResolver()) !== null && _a !== void 0 ? _a : {};
     return React.useMemo(() => createResolvedObject(currentObject, { contextObject: document, resolver }), [currentObject, document, resolver]);
 };
 const useSchemaInlineRefResolver = () => {
+    var _a;
     const document = useDocument();
-    const resolver = useInlineRefResolver();
-    return React.useCallback((...args) => {
+    const { resolver, maxRefDepth } = (_a = useInlineRefResolver()) !== null && _a !== void 0 ? _a : {};
+    const referenceResolver = React.useCallback((...args) => {
         const resolved = resolver === null || resolver === void 0 ? void 0 : resolver(...args);
         if (!isPlainObject$1(resolved)) {
             return resolved;
@@ -149,6 +153,7 @@ const useSchemaInlineRefResolver = () => {
         delete converted.$schema;
         return converted;
     }, [document, resolver]);
+    return [referenceResolver, maxRefDepth];
 };
 
 const DEFAULT_CONTEXT = {};
@@ -1176,7 +1181,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'));
 }
@@ -1232,6 +1239,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, }) => {
@@ -1261,31 +1297,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();
@@ -2391,7 +2449,7 @@ const isBodyEmpty = (body) => {
 };
 const Body = ({ body, onChange }) => {
     var _a;
-    const refResolver = useSchemaInlineRefResolver();
+    const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React.useState(0);
     const { nodeHasChanged } = useOptionsCtx();
     React.useEffect(() => {
@@ -2408,7 +2466,7 @@ const Body = ({ body, onChange }) => {
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
+        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2433,11 +2491,11 @@ const defaultStyle = {
 };
 const Parameters = ({ parameters, parameterType }) => {
     const { nodeHasChanged } = useOptionsCtx();
-    const refResolver = useSchemaInlineRefResolver();
+    const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const schema = React.useMemo(() => httpOperationParamsToSchema({ parameters, parameterType }), [parameters, parameterType]);
     if (!schema)
         return null;
-    return React.createElement(JsonSchemaViewer, { resolveRef: refResolver, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged });
+    return (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged }));
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
@@ -2571,7 +2629,7 @@ Responses.displayName = 'HttpOperation.Responses';
 const Response = ({ response, onMediaTypeChange }) => {
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React.useState(0);
-    const refResolver = useSchemaInlineRefResolver();
+    const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const { nodeHasChanged } = useOptionsCtx();
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
@@ -2590,7 +2648,7 @@ const Response = ({ response, onMediaTypeChange }) => {
             React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React.createElement(Flex, { flex: 1, justify: "end" },
                     React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
+            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2874,7 +2932,7 @@ const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps:
 
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a, _b;
-    const resolveRef = useSchemaInlineRefResolver();
+    const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
     const { nodeHasChanged } = useOptionsCtx();
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
@@ -2900,7 +2958,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
             React.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         isCompact && modelExamples,
-        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
+        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
     return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
 const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
@@ -2923,7 +2981,7 @@ const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
     var _b;
-    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, nodeHasChanged } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "nodeHasChanged"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
@@ -2931,7 +2989,7 @@ const Docs = React.memo((_a) => {
     }
     let elem = React.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
     if (useNodeForRefResolving) {
-        elem = (React.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver }, elem));
+        elem = (React.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver, maxRefDepth: maxRefDepth }, elem));
     }
     return React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
 });
@@ -3043,13 +3101,13 @@ function isPartialHttpRequest(maybeHttpRequest) {
         typeof maybeHttpRequest['url'] === 'string');
 }
 const SchemaAndDescription = ({ title: titleProp, schema }) => {
-    const resolveRef = useSchemaInlineRefResolver();
+    const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
     return (React__default.createElement(Box, { py: 2 },
         title && (React__default.createElement(Flex, { alignItems: "center", p: 2 },
             React__default.createElement(Icon, { icon: NodeTypeIconDefs[NodeType.Model], color: NodeTypeColors[NodeType.Model] }),
             React__default.createElement(Box, { color: "muted", px: 2 }, title))),
-        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(schema) })));
+        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema) })));
 };
 const CodeComponent = props => {
     const { title, jsonSchema, http, resolved, children } = props;
@@ -3060,7 +3118,7 @@ const CodeComponent = props => {
         if (!isJSONSchema(parsedValue)) {
             return null;
         }
-        return (React__default.createElement(InlineRefResolverProvider, { document: parsedValue, resolver: resolver },
+        return (React__default.createElement(InlineRefResolverProvider, { document: parsedValue, resolver: resolver === null || resolver === void 0 ? void 0 : resolver.resolver, maxRefDepth: resolver === null || resolver === void 0 ? void 0 : resolver.maxRefDepth },
             React__default.createElement(SchemaAndDescription, { title: title, schema: parsedValue })));
     }
     if (http) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.13.9",
+  "version": "7.15.0",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -28,7 +28,8 @@
     "@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.3.0",
+    "@stoplight/json-schema-viewer": "^4.14.0",
     "@stoplight/markdown-viewer": "^5.6.0",
     "@stoplight/mosaic": "^1.44.4",
     "@stoplight/mosaic-code-editor": "^1.44.4",