@stoplight/elements-core 7.14.0 → 7.15.0

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/TryIt.stories.d.ts

@@ -1,14 +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 UrlEncodedOneOf: 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

@@ -119,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;
@@ -151,6 +153,7 @@ const useSchemaInlineRefResolver = () => {
         delete converted.$schema;
         return converted;
     }, [document, resolver]);
+    return [referenceResolver, maxRefDepth];
 };
 
 const DEFAULT_CONTEXT = {};
@@ -2446,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(() => {
@@ -2463,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';
 
@@ -2488,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 }) => {
@@ -2626,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;
@@ -2645,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) => {
@@ -2929,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);
@@ -2955,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 }) => {
@@ -2978,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');
@@ -2986,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);
 });
@@ -3098,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;
@@ -3115,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

@@ -176,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;
@@ -208,6 +210,7 @@ const useSchemaInlineRefResolver = () => {
         delete converted.$schema;
         return converted;
     }, [document, resolver]);
+    return [referenceResolver, maxRefDepth];
 };
 
 const DEFAULT_CONTEXT = {};
@@ -2503,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(() => {
@@ -2520,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';
 
@@ -2545,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 }) => {
@@ -2683,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;
@@ -2702,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) => {
@@ -2986,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);
@@ -3012,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 }) => {
@@ -3035,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');
@@ -3043,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);
 });
@@ -3155,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;
@@ -3172,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

@@ -119,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;
@@ -151,6 +153,7 @@ const useSchemaInlineRefResolver = () => {
         delete converted.$schema;
         return converted;
     }, [document, resolver]);
+    return [referenceResolver, maxRefDepth];
 };
 
 const DEFAULT_CONTEXT = {};
@@ -2446,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(() => {
@@ -2463,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';
 
@@ -2488,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 }) => {
@@ -2626,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;
@@ -2645,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) => {
@@ -2929,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);
@@ -2955,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 }) => {
@@ -2978,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');
@@ -2986,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);
 });
@@ -3098,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;
@@ -3115,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.14.0",
+  "version": "7.15.0",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -28,8 +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-tree": "^2.2.5",
-    "@stoplight/json-schema-viewer": "^4.13.0",
+    "@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",