@stoplight/elements-core 7.3.6 → 7.3.7

package/components/Docs/Article/index.d.ts

@@ -1,5 +1,6 @@
 import { MDAST } from '@stoplight/markdown';
+import * as React from 'react';
 import { DocsComponentProps } from '..';
 declare type ArticleProps = DocsComponentProps<string | MDAST.Root>;
-export declare const Article: import("react").FunctionComponent<ArticleProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const Article: React.FunctionComponent<ArticleProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export {};

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

@@ -1,4 +1,5 @@
 import { IHttpOperation } from '@stoplight/types';
+import * as React from 'react';
 import { DocsComponentProps } from '..';
 export declare type HttpOperationProps = DocsComponentProps<IHttpOperation>;
-export declare const HttpOperation: import("react").FunctionComponent<HttpOperationProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const HttpOperation: React.FunctionComponent<HttpOperationProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

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

@@ -1,4 +1,5 @@
 import { IHttpService } from '@stoplight/types';
+import * as React from 'react';
 import { DocsComponentProps } from '..';
 export declare type HttpServiceProps = DocsComponentProps<Partial<IHttpService>>;
-export declare const HttpService: import("react").FunctionComponent<HttpServiceProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const HttpService: React.FunctionComponent<HttpServiceProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

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

@@ -1,4 +1,5 @@
 import { JSONSchema7 } from 'json-schema';
+import * as React from 'react';
 import { DocsComponentProps } from '..';
 export declare type ModelProps = DocsComponentProps<JSONSchema7>;
-export declare const Model: import("react").FunctionComponent<ModelProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare const Model: React.FunctionComponent<ModelProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;

package/components/LoadMore.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface LoadMoreProps {
+    loading: boolean;
+    onClick: () => void;
+}
+export declare const LoadMore: React.FC<LoadMoreProps>;
+export {};

package/index.esm.js

@@ -1187,6 +1187,7 @@ const generateExampleFromMediaTypeContent = (mediaTypeContent, document, chosenE
     }
     catch (e) {
         console.warn(e);
+        return `Example cannot be created for this schema\n${e}`;
     }
     return '';
 };
@@ -1216,17 +1217,26 @@ const generateExamplesFromJsonSchema = (schema) => {
     if (examples.length) {
         return examples;
     }
-    const generated = Sampler.sample(schema, {
-        maxSampleDepth: 4,
-    });
-    return generated !== null
-        ? [
-            {
-                label: 'default',
-                data: (_b = safeStringify(generated, undefined, 2)) !== null && _b !== void 0 ? _b : '',
-            },
-        ]
-        : [{ label: 'default', data: '' }];
+    try {
+        const generated = Sampler.sample(schema, {
+            maxSampleDepth: 4,
+        });
+        return generated !== null
+            ? [
+                {
+                    label: 'default',
+                    data: (_b = safeStringify(generated, undefined, 2)) !== null && _b !== void 0 ? _b : '',
+                },
+            ]
+            : [{ label: 'default', data: '' }];
+    }
+    catch (e) {
+        console.error(e);
+        return [{ label: '', data: `Example cannot be created for this schema\n${e}` }];
+    }
+};
+const exceedsSize = (example, size = 500) => {
+    return example.split(/\r\n|\r|\n/).length > size;
 };
 
 const useTextRequestBodyState = (mediaTypeContent) => {
@@ -1747,6 +1757,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         response && 'error' in response && React.createElement(ResponseError, { state: response })));
 };
 
+const LoadMore = ({ loading, onClick }) => {
+    return (React.createElement(Flex, { flexDirection: "col", justifyContent: "center", alignItems: "center", style: { height: '400px' } },
+        React.createElement(Button, { "aria-label": "load-example", onPress: onClick, appearance: "minimal", loading: loading, disabled: loading }, loading ? 'Loading...' : 'Load examples'),
+        React.createElement(Text, { fontSize: "base", textAlign: "center" }, "Large examples are not rendered by default.")));
+};
+
 const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
     var _a;
     const [chosenExampleIndex, setChosenExampleIndex] = React__default.useState(0);
@@ -1761,7 +1777,10 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
     const responseExample = useGenerateExampleFromMediaTypeContent(responseContents, chosenExampleIndex, {
         skipWriteOnly: true,
     });
-    const exceededSize = responseExample.split(/\r\n|\r|\n/).length > 500;
+    const handleLoadMore = () => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    };
     if (!userDefinedExamples && responseMediaType !== 'application/json')
         return null;
     if (!responseExample)
@@ -1769,12 +1788,7 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
     const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default.createElement(Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
     return (React__default.createElement(Panel, { rounded: true, isCollapsible: false },
         React__default.createElement(Panel.Titlebar, null, examplesSelect || React__default.createElement(Text, { color: "body" }, "Response Example")),
-        React__default.createElement(Panel.Content, { p: 0 }, (exceededSize && show) || !exceededSize ? (React__default.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default.createElement(Flex, { flexDirection: "col", justifyContent: "center", alignItems: "center", style: { height: '400px' } },
-            React__default.createElement(Button, { "aria-label": "load-example", onPress: () => {
-                    setLoading(true);
-                    setTimeout(() => setShow(true), 50);
-                }, appearance: "minimal", loading: loading, disabled: loading }, loading ? 'Loading...' : 'Load examples'),
-            React__default.createElement(Text, { fontSize: "base", textAlign: "center" }, "Large examples are not rendered by default."))))));
+        React__default.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
 };
 
 const TryItWithRequestSamples = (_a) => {
@@ -2158,10 +2172,16 @@ const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps:
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a;
     const [chosenExampleIndex, setChosenExampleIndex] = React.useState(0);
+    const [show, setShow] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
     const resolveRef = useInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
     const title = (_a = data.title) !== null && _a !== void 0 ? _a : nodeTitle;
     const isInternal = !!data['x-internal'];
+    const handleLoadMorePress = () => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    };
     const examples = React.useMemo(() => generateExamplesFromJsonSchema(data), [data]);
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const header = (shouldDisplayHeader || isInternal) && (React.createElement(React.Fragment, null,
@@ -2176,8 +2196,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const examplesSelect = examples.length > 1 && (React.createElement(Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && (React.createElement(Panel, { rounded: true, isCollapsible: false },
         React.createElement(Panel.Titlebar, null, examplesSelect || (React.createElement(Text, { color: "body", role: "heading" }, "Example"))),
-        React.createElement(Panel.Content, { p: 0 },
-            React.createElement(CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true }))));
+        React.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(examples[chosenExampleIndex].data) ? (React.createElement(CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
     return (React.createElement(TwoColumnLayout, { className: cn('Model', className), header: header, left: description, right: modelExamples }));
 };
 const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });

package/index.js

@@ -1220,6 +1220,7 @@ const generateExampleFromMediaTypeContent = (mediaTypeContent, document, chosenE
     }
     catch (e) {
         console.warn(e);
+        return `Example cannot be created for this schema\n${e}`;
     }
     return '';
 };
@@ -1249,17 +1250,26 @@ const generateExamplesFromJsonSchema = (schema) => {
     if (examples.length) {
         return examples;
     }
-    const generated = Sampler__namespace.sample(schema, {
-        maxSampleDepth: 4,
-    });
-    return generated !== null
-        ? [
-            {
-                label: 'default',
-                data: (_b = json.safeStringify(generated, undefined, 2)) !== null && _b !== void 0 ? _b : '',
-            },
-        ]
-        : [{ label: 'default', data: '' }];
+    try {
+        const generated = Sampler__namespace.sample(schema, {
+            maxSampleDepth: 4,
+        });
+        return generated !== null
+            ? [
+                {
+                    label: 'default',
+                    data: (_b = json.safeStringify(generated, undefined, 2)) !== null && _b !== void 0 ? _b : '',
+                },
+            ]
+            : [{ label: 'default', data: '' }];
+    }
+    catch (e) {
+        console.error(e);
+        return [{ label: '', data: `Example cannot be created for this schema\n${e}` }];
+    }
+};
+const exceedsSize = (example, size = 500) => {
+    return example.split(/\r\n|\r|\n/).length > size;
 };
 
 const useTextRequestBodyState = (mediaTypeContent) => {
@@ -1780,6 +1790,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         response && 'error' in response && React__namespace.createElement(ResponseError, { state: response })));
 };
 
+const LoadMore = ({ loading, onClick }) => {
+    return (React__namespace.createElement(mosaic.Flex, { flexDirection: "col", justifyContent: "center", alignItems: "center", style: { height: '400px' } },
+        React__namespace.createElement(mosaic.Button, { "aria-label": "load-example", onPress: onClick, appearance: "minimal", loading: loading, disabled: loading }, loading ? 'Loading...' : 'Load examples'),
+        React__namespace.createElement(mosaic.Text, { fontSize: "base", textAlign: "center" }, "Large examples are not rendered by default.")));
+};
+
 const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
     var _a;
     const [chosenExampleIndex, setChosenExampleIndex] = React__default["default"].useState(0);
@@ -1794,7 +1810,10 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
     const responseExample = useGenerateExampleFromMediaTypeContent(responseContents, chosenExampleIndex, {
         skipWriteOnly: true,
     });
-    const exceededSize = responseExample.split(/\r\n|\r|\n/).length > 500;
+    const handleLoadMore = () => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    };
     if (!userDefinedExamples && responseMediaType !== 'application/json')
         return null;
     if (!responseExample)
@@ -1802,12 +1821,7 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
     const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default["default"].createElement(mosaic.Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
     return (React__default["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
         React__default["default"].createElement(mosaic.Panel.Titlebar, null, examplesSelect || React__default["default"].createElement(mosaic.Text, { color: "body" }, "Response Example")),
-        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, (exceededSize && show) || !exceededSize ? (React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default["default"].createElement(mosaic.Flex, { flexDirection: "col", justifyContent: "center", alignItems: "center", style: { height: '400px' } },
-            React__default["default"].createElement(mosaic.Button, { "aria-label": "load-example", onPress: () => {
-                    setLoading(true);
-                    setTimeout(() => setShow(true), 50);
-                }, appearance: "minimal", loading: loading, disabled: loading }, loading ? 'Loading...' : 'Load examples'),
-            React__default["default"].createElement(mosaic.Text, { fontSize: "base", textAlign: "center" }, "Large examples are not rendered by default."))))));
+        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default["default"].createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
 };
 
 const TryItWithRequestSamples = (_a) => {
@@ -2191,10 +2205,16 @@ const HttpService = reactErrorBoundary.withErrorBoundary(HttpServiceComponent, {
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a;
     const [chosenExampleIndex, setChosenExampleIndex] = React__namespace.useState(0);
+    const [show, setShow] = React__namespace.useState(false);
+    const [loading, setLoading] = React__namespace.useState(false);
     const resolveRef = useInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
     const title = (_a = data.title) !== null && _a !== void 0 ? _a : nodeTitle;
     const isInternal = !!data['x-internal'];
+    const handleLoadMorePress = () => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    };
     const examples = React__namespace.useMemo(() => generateExamplesFromJsonSchema(data), [data]);
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const header = (shouldDisplayHeader || isInternal) && (React__namespace.createElement(React__namespace.Fragment, null,
@@ -2209,8 +2229,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const examplesSelect = examples.length > 1 && (React__namespace.createElement(mosaic.Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && (React__namespace.createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
         React__namespace.createElement(mosaic.Panel.Titlebar, null, examplesSelect || (React__namespace.createElement(mosaic.Text, { color: "body", role: "heading" }, "Example"))),
-        React__namespace.createElement(mosaic.Panel.Content, { p: 0 },
-            React__namespace.createElement(mosaicCodeViewer.CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true }))));
+        React__namespace.createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(examples[chosenExampleIndex].data) ? (React__namespace.createElement(mosaicCodeViewer.CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true })) : (React__namespace.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
     return (React__namespace.createElement(TwoColumnLayout, { className: cn__default["default"]('Model', className), header: header, left: description, right: modelExamples }));
 };
 const Model = reactErrorBoundary.withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });

package/index.mjs

@@ -1187,6 +1187,7 @@ const generateExampleFromMediaTypeContent = (mediaTypeContent, document, chosenE
     }
     catch (e) {
         console.warn(e);
+        return `Example cannot be created for this schema\n${e}`;
     }
     return '';
 };
@@ -1216,17 +1217,26 @@ const generateExamplesFromJsonSchema = (schema) => {
     if (examples.length) {
         return examples;
     }
-    const generated = Sampler.sample(schema, {
-        maxSampleDepth: 4,
-    });
-    return generated !== null
-        ? [
-            {
-                label: 'default',
-                data: (_b = safeStringify(generated, undefined, 2)) !== null && _b !== void 0 ? _b : '',
-            },
-        ]
-        : [{ label: 'default', data: '' }];
+    try {
+        const generated = Sampler.sample(schema, {
+            maxSampleDepth: 4,
+        });
+        return generated !== null
+            ? [
+                {
+                    label: 'default',
+                    data: (_b = safeStringify(generated, undefined, 2)) !== null && _b !== void 0 ? _b : '',
+                },
+            ]
+            : [{ label: 'default', data: '' }];
+    }
+    catch (e) {
+        console.error(e);
+        return [{ label: '', data: `Example cannot be created for this schema\n${e}` }];
+    }
+};
+const exceedsSize = (example, size = 500) => {
+    return example.split(/\r\n|\r|\n/).length > size;
 };
 
 const useTextRequestBodyState = (mediaTypeContent) => {
@@ -1747,6 +1757,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         response && 'error' in response && React.createElement(ResponseError, { state: response })));
 };
 
+const LoadMore = ({ loading, onClick }) => {
+    return (React.createElement(Flex, { flexDirection: "col", justifyContent: "center", alignItems: "center", style: { height: '400px' } },
+        React.createElement(Button, { "aria-label": "load-example", onPress: onClick, appearance: "minimal", loading: loading, disabled: loading }, loading ? 'Loading...' : 'Load examples'),
+        React.createElement(Text, { fontSize: "base", textAlign: "center" }, "Large examples are not rendered by default.")));
+};
+
 const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
     var _a;
     const [chosenExampleIndex, setChosenExampleIndex] = React__default.useState(0);
@@ -1761,7 +1777,10 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
     const responseExample = useGenerateExampleFromMediaTypeContent(responseContents, chosenExampleIndex, {
         skipWriteOnly: true,
     });
-    const exceededSize = responseExample.split(/\r\n|\r|\n/).length > 500;
+    const handleLoadMore = () => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    };
     if (!userDefinedExamples && responseMediaType !== 'application/json')
         return null;
     if (!responseExample)
@@ -1769,12 +1788,7 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
     const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default.createElement(Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
     return (React__default.createElement(Panel, { rounded: true, isCollapsible: false },
         React__default.createElement(Panel.Titlebar, null, examplesSelect || React__default.createElement(Text, { color: "body" }, "Response Example")),
-        React__default.createElement(Panel.Content, { p: 0 }, (exceededSize && show) || !exceededSize ? (React__default.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default.createElement(Flex, { flexDirection: "col", justifyContent: "center", alignItems: "center", style: { height: '400px' } },
-            React__default.createElement(Button, { "aria-label": "load-example", onPress: () => {
-                    setLoading(true);
-                    setTimeout(() => setShow(true), 50);
-                }, appearance: "minimal", loading: loading, disabled: loading }, loading ? 'Loading...' : 'Load examples'),
-            React__default.createElement(Text, { fontSize: "base", textAlign: "center" }, "Large examples are not rendered by default."))))));
+        React__default.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
 };
 
 const TryItWithRequestSamples = (_a) => {
@@ -2158,10 +2172,16 @@ const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps:
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a;
     const [chosenExampleIndex, setChosenExampleIndex] = React.useState(0);
+    const [show, setShow] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
     const resolveRef = useInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
     const title = (_a = data.title) !== null && _a !== void 0 ? _a : nodeTitle;
     const isInternal = !!data['x-internal'];
+    const handleLoadMorePress = () => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    };
     const examples = React.useMemo(() => generateExamplesFromJsonSchema(data), [data]);
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const header = (shouldDisplayHeader || isInternal) && (React.createElement(React.Fragment, null,
@@ -2176,8 +2196,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const examplesSelect = examples.length > 1 && (React.createElement(Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && (React.createElement(Panel, { rounded: true, isCollapsible: false },
         React.createElement(Panel.Titlebar, null, examplesSelect || (React.createElement(Text, { color: "body", role: "heading" }, "Example"))),
-        React.createElement(Panel.Content, { p: 0 },
-            React.createElement(CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true }))));
+        React.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(examples[chosenExampleIndex].data) ? (React.createElement(CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
     return (React.createElement(TwoColumnLayout, { className: cn('Model', className), header: header, left: description, right: modelExamples }));
 };
 const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.3.6",
+  "version": "7.3.7",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -29,13 +29,13 @@
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@stoplight/json": "^3.10.0",
     "@stoplight/json-schema-ref-parser": "^9.0.5",
-    "@stoplight/json-schema-sampler": "0.2.1",
+    "@stoplight/json-schema-sampler": "0.2.2",
     "@stoplight/json-schema-viewer": "^4.3.1",
     "@stoplight/markdown": "^3.1.1",
     "@stoplight/markdown-viewer": "^5.3.2",
-    "@stoplight/mosaic": "^1.5.0",
-    "@stoplight/mosaic-code-editor": "^1.5.0",
-    "@stoplight/mosaic-code-viewer": "^1.5.0",
+    "@stoplight/mosaic": "^1.8.2",
+    "@stoplight/mosaic-code-editor": "^1.8.2",
+    "@stoplight/mosaic-code-viewer": "^1.8.2",
     "@stoplight/path": "^1.3.2",
     "@stoplight/react-error-boundary": "^1.1.0",
     "@stoplight/types": "^12.0.0",

package/utils/{exampleGeneration.d.ts → exampleGeneration/exampleGeneration.d.ts}

@@ -9,4 +9,5 @@ export declare type GenerateExampleFromMediaTypeContentOptions = Sampler.Options
 export declare const useGenerateExampleFromMediaTypeContent: (mediaTypeContent: IMediaTypeContent | undefined, chosenExampleIndex?: number | undefined, { skipReadOnly, skipWriteOnly, skipNonRequired }?: GenerateExampleFromMediaTypeContentOptions) => string;
 export declare const generateExampleFromMediaTypeContent: (mediaTypeContent: IMediaTypeContent | undefined, document: any, chosenExampleIndex?: number, options?: Sampler.Options | undefined) => string;
 export declare const generateExamplesFromJsonSchema: (schema: JSONSchema7) => Example[];
+export declare const exceedsSize: (example: string, size?: number) => boolean;
 export {};

package/utils/exampleGeneration/exampleGeneration.spec.d.ts

@@ -0,0 +1 @@
+export {};