@stoplight/elements-core 7.7.1 → 7.7.3

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

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

package/index.esm.js

@@ -1908,10 +1908,13 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             if (response) {
                 const contentType = response.headers.get('Content-Type');
                 const type = contentType ? getResponseType(contentType) : undefined;
+                const bodyText = type !== 'image' ? yield response.text() : undefined;
+                const blob = type === 'image' ? yield response.blob() : undefined;
+                setResponse(undefined);
                 setResponse({
                     status: response.status,
-                    bodyText: type !== 'image' ? yield response.text() : undefined,
-                    blob: type === 'image' ? yield response.blob() : undefined,
+                    bodyText,
+                    blob,
                     contentType,
                 });
             }
@@ -2108,9 +2111,9 @@ const CustomLinkHeading = React.memo(function LinkHeading(_a) {
 });
 
 const SectionTitle = ({ title, id, size = 2, children }) => {
-    return (React.createElement(HStack, { spacing: 6 },
-        React.createElement(Box, { as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
-        children));
+    return (React.createElement(Flex, { flexWrap: true },
+        React.createElement(Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
+        React.createElement(Box, { alignSelf: 'center', py: 1 }, children)));
 };
 const SectionSubtitle = props => {
     return React.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
@@ -2180,7 +2183,6 @@ const Parameters = ({ parameters, parameterType }) => {
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
-    var _a, _b, _c;
     if (!parameters || !parameters.length)
         return null;
     const schema = {
@@ -2190,19 +2192,22 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
     const sortedParams = sortBy(parameters, ['required', 'name']);
     for (const p of sortedParams) {
         const { name, description, required, deprecated, examples, style } = p;
+        const paramSchema = isPlainObject$1(p.schema) ? p.schema : {};
         const paramExamples = (examples === null || examples === void 0 ? void 0 : examples.map(example => {
             if (isNodeExample(example)) {
                 return example.value;
             }
             return example.externalValue;
         })) || [];
-        const schemaExamples = (_a = p.schema) === null || _a === void 0 ? void 0 : _a.examples;
+        const schemaExamples = paramSchema.examples;
         const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
-        const paramDescription = description || ((_b = p.schema) === null || _b === void 0 ? void 0 : _b.description);
-        const paramDeprecated = deprecated || p.schema.deprecated;
+        const paramDescription = description || paramSchema.description;
+        const paramDeprecated = !!(deprecated || paramSchema.deprecated);
         const paramStyle = style && defaultStyle[parameterType] !== style ? readableStyles[style] || style : undefined;
-        schema.properties[p.name] = Object.assign(Object.assign({}, (p.schema || {})), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle, 'x-stoplight': Object.assign(Object.assign({}, (((_c = p.schema) === null || _c === void 0 ? void 0 : _c['x-stoplight']) || {})), { id: p.id }) });
-        if (required) {
+        if (isPlainObject$1(schema.properties)) {
+            schema.properties[p.name] = Object.assign(Object.assign({}, paramSchema), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle, 'x-stoplight': Object.assign(Object.assign({}, (isPlainObject$1(paramSchema['x-stoplight']) ? paramSchema['x-stoplight'] : {})), { id: p.id }) });
+        }
+        if (required && Array.isArray(schema.required)) {
             schema.required.push(name);
         }
     }
@@ -2523,14 +2528,17 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const nodeId = (_a = data === null || data === void 0 ? void 0 : data['x-stoplight']) === null || _a === void 0 ? void 0 : _a.id;
     const title = (_b = data.title) !== null && _b !== void 0 ? _b : nodeTitle;
+    const isDeprecated = !!data['deprecated'];
     const isInternal = !!data['x-internal'];
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const titleChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: ['title', 'internal'] });
-    const header = (shouldDisplayHeader || isInternal) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
+    const header = (shouldDisplayHeader || isInternal || isDeprecated) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
         React.createElement(Box, { pos: "relative" },
             React.createElement(HStack, { spacing: 5 },
                 title && (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, title)),
-                React.createElement(HStack, { spacing: 2 }, isInternal && React.createElement(InternalBadge, null))),
+                React.createElement(HStack, { spacing: 2 },
+                    isDeprecated && React.createElement(DeprecatedBadge, null),
+                    isInternal && React.createElement(InternalBadge, null))),
             React.createElement(NodeAnnotation, { change: titleChanged })),
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps))));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React.createElement(ModelExamples, { data: data, isCollapsible: isCompact });

package/index.js

@@ -1962,10 +1962,13 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             if (response) {
                 const contentType = response.headers.get('Content-Type');
                 const type = contentType ? getResponseType(contentType) : undefined;
+                const bodyText = type !== 'image' ? yield response.text() : undefined;
+                const blob = type === 'image' ? yield response.blob() : undefined;
+                setResponse(undefined);
                 setResponse({
                     status: response.status,
-                    bodyText: type !== 'image' ? yield response.text() : undefined,
-                    blob: type === 'image' ? yield response.blob() : undefined,
+                    bodyText,
+                    blob,
                     contentType,
                 });
             }
@@ -2162,9 +2165,9 @@ const CustomLinkHeading = React__namespace.memo(function LinkHeading(_a) {
 });
 
 const SectionTitle = ({ title, id, size = 2, children }) => {
-    return (React__namespace.createElement(mosaic.HStack, { spacing: 6 },
-        React__namespace.createElement(mosaic.Box, { as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
-        children));
+    return (React__namespace.createElement(mosaic.Flex, { flexWrap: true },
+        React__namespace.createElement(mosaic.Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
+        React__namespace.createElement(mosaic.Box, { alignSelf: 'center', py: 1 }, children)));
 };
 const SectionSubtitle = props => {
     return React__namespace.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
@@ -2234,7 +2237,6 @@ const Parameters = ({ parameters, parameterType }) => {
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
-    var _a, _b, _c;
     if (!parameters || !parameters.length)
         return null;
     const schema = {
@@ -2244,19 +2246,22 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
     const sortedParams = sortBy__default["default"](parameters, ['required', 'name']);
     for (const p of sortedParams) {
         const { name, description, required, deprecated, examples, style } = p;
+        const paramSchema = json.isPlainObject(p.schema) ? p.schema : {};
         const paramExamples = (examples === null || examples === void 0 ? void 0 : examples.map(example => {
             if (isNodeExample(example)) {
                 return example.value;
             }
             return example.externalValue;
         })) || [];
-        const schemaExamples = (_a = p.schema) === null || _a === void 0 ? void 0 : _a.examples;
+        const schemaExamples = paramSchema.examples;
         const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
-        const paramDescription = description || ((_b = p.schema) === null || _b === void 0 ? void 0 : _b.description);
-        const paramDeprecated = deprecated || p.schema.deprecated;
+        const paramDescription = description || paramSchema.description;
+        const paramDeprecated = !!(deprecated || paramSchema.deprecated);
         const paramStyle = style && defaultStyle[parameterType] !== style ? readableStyles[style] || style : undefined;
-        schema.properties[p.name] = Object.assign(Object.assign({}, (p.schema || {})), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle, 'x-stoplight': Object.assign(Object.assign({}, (((_c = p.schema) === null || _c === void 0 ? void 0 : _c['x-stoplight']) || {})), { id: p.id }) });
-        if (required) {
+        if (json.isPlainObject(schema.properties)) {
+            schema.properties[p.name] = Object.assign(Object.assign({}, paramSchema), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle, 'x-stoplight': Object.assign(Object.assign({}, (json.isPlainObject(paramSchema['x-stoplight']) ? paramSchema['x-stoplight'] : {})), { id: p.id }) });
+        }
+        if (required && Array.isArray(schema.required)) {
             schema.required.push(name);
         }
     }
@@ -2577,14 +2582,17 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const nodeId = (_a = data === null || data === void 0 ? void 0 : data['x-stoplight']) === null || _a === void 0 ? void 0 : _a.id;
     const title = (_b = data.title) !== null && _b !== void 0 ? _b : nodeTitle;
+    const isDeprecated = !!data['deprecated'];
     const isInternal = !!data['x-internal'];
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const titleChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: ['title', 'internal'] });
-    const header = (shouldDisplayHeader || isInternal) && (React__namespace.createElement(mosaic.Flex, { justifyContent: "between", alignItems: "center" },
+    const header = (shouldDisplayHeader || isInternal || isDeprecated) && (React__namespace.createElement(mosaic.Flex, { justifyContent: "between", alignItems: "center" },
         React__namespace.createElement(mosaic.Box, { pos: "relative" },
             React__namespace.createElement(mosaic.HStack, { spacing: 5 },
                 title && (React__namespace.createElement(mosaic.Heading, { size: 1, fontWeight: "semibold" }, title)),
-                React__namespace.createElement(mosaic.HStack, { spacing: 2 }, isInternal && React__namespace.createElement(InternalBadge, null))),
+                React__namespace.createElement(mosaic.HStack, { spacing: 2 },
+                    isDeprecated && React__namespace.createElement(DeprecatedBadge, null),
+                    isInternal && React__namespace.createElement(InternalBadge, null))),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: titleChanged })),
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React__namespace.createElement(ExportButton, Object.assign({}, exportProps))));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React__namespace.createElement(ModelExamples, { data: data, isCollapsible: isCompact });

package/index.mjs

@@ -1908,10 +1908,13 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             if (response) {
                 const contentType = response.headers.get('Content-Type');
                 const type = contentType ? getResponseType(contentType) : undefined;
+                const bodyText = type !== 'image' ? yield response.text() : undefined;
+                const blob = type === 'image' ? yield response.blob() : undefined;
+                setResponse(undefined);
                 setResponse({
                     status: response.status,
-                    bodyText: type !== 'image' ? yield response.text() : undefined,
-                    blob: type === 'image' ? yield response.blob() : undefined,
+                    bodyText,
+                    blob,
                     contentType,
                 });
             }
@@ -2108,9 +2111,9 @@ const CustomLinkHeading = React.memo(function LinkHeading(_a) {
 });
 
 const SectionTitle = ({ title, id, size = 2, children }) => {
-    return (React.createElement(HStack, { spacing: 6 },
-        React.createElement(Box, { as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
-        children));
+    return (React.createElement(Flex, { flexWrap: true },
+        React.createElement(Box, { py: 1, pr: 6, as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
+        React.createElement(Box, { alignSelf: 'center', py: 1 }, children)));
 };
 const SectionSubtitle = props => {
     return React.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
@@ -2180,7 +2183,6 @@ const Parameters = ({ parameters, parameterType }) => {
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
-    var _a, _b, _c;
     if (!parameters || !parameters.length)
         return null;
     const schema = {
@@ -2190,19 +2192,22 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
     const sortedParams = sortBy(parameters, ['required', 'name']);
     for (const p of sortedParams) {
         const { name, description, required, deprecated, examples, style } = p;
+        const paramSchema = isPlainObject$1(p.schema) ? p.schema : {};
         const paramExamples = (examples === null || examples === void 0 ? void 0 : examples.map(example => {
             if (isNodeExample(example)) {
                 return example.value;
             }
             return example.externalValue;
         })) || [];
-        const schemaExamples = (_a = p.schema) === null || _a === void 0 ? void 0 : _a.examples;
+        const schemaExamples = paramSchema.examples;
         const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
-        const paramDescription = description || ((_b = p.schema) === null || _b === void 0 ? void 0 : _b.description);
-        const paramDeprecated = deprecated || p.schema.deprecated;
+        const paramDescription = description || paramSchema.description;
+        const paramDeprecated = !!(deprecated || paramSchema.deprecated);
         const paramStyle = style && defaultStyle[parameterType] !== style ? readableStyles[style] || style : undefined;
-        schema.properties[p.name] = Object.assign(Object.assign({}, (p.schema || {})), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle, 'x-stoplight': Object.assign(Object.assign({}, (((_c = p.schema) === null || _c === void 0 ? void 0 : _c['x-stoplight']) || {})), { id: p.id }) });
-        if (required) {
+        if (isPlainObject$1(schema.properties)) {
+            schema.properties[p.name] = Object.assign(Object.assign({}, paramSchema), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle, 'x-stoplight': Object.assign(Object.assign({}, (isPlainObject$1(paramSchema['x-stoplight']) ? paramSchema['x-stoplight'] : {})), { id: p.id }) });
+        }
+        if (required && Array.isArray(schema.required)) {
             schema.required.push(name);
         }
     }
@@ -2523,14 +2528,17 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const nodeId = (_a = data === null || data === void 0 ? void 0 : data['x-stoplight']) === null || _a === void 0 ? void 0 : _a.id;
     const title = (_b = data.title) !== null && _b !== void 0 ? _b : nodeTitle;
+    const isDeprecated = !!data['deprecated'];
     const isInternal = !!data['x-internal'];
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const titleChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: ['title', 'internal'] });
-    const header = (shouldDisplayHeader || isInternal) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
+    const header = (shouldDisplayHeader || isInternal || isDeprecated) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
         React.createElement(Box, { pos: "relative" },
             React.createElement(HStack, { spacing: 5 },
                 title && (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, title)),
-                React.createElement(HStack, { spacing: 2 }, isInternal && React.createElement(InternalBadge, null))),
+                React.createElement(HStack, { spacing: 2 },
+                    isDeprecated && React.createElement(DeprecatedBadge, null),
+                    isInternal && React.createElement(InternalBadge, null))),
             React.createElement(NodeAnnotation, { change: titleChanged })),
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps))));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React.createElement(ModelExamples, { data: data, isCollapsible: isCompact });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.7.1",
+  "version": "7.7.3",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",