@stoplight/elements-core 7.5.13 → 7.5.16

package/__fixtures__/operations/securedOperation.d.ts

@@ -1,4 +1,4 @@
 import { IHttpOperation } from '@stoplight/types';
 export declare const singleSecurityOperation: IHttpOperation;
-export declare const emptySecurityOperation: IHttpOperation;
-export declare const duplicatedSecurityScheme: IHttpOperation;
+export declare const emptySecurityOperation: any;
+export declare const duplicatedSecurityScheme: any;

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

@@ -1,5 +1,5 @@
-import { IServer } from '@stoplight/types';
 import * as React from 'react';
+import { IServer } from '../../../utils/http-spec/IServer';
 interface ServerInfoProps {
     servers: IServer[];
     mockUrl?: string;

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

@@ -1,6 +1,8 @@
-import { IHttpParam } from '@stoplight/types';
+import type { IHttpParam, INodeExample, INodeExternalExample } from '@stoplight/types';
 import { JSONSchema7Definition } from 'json-schema';
-export declare type ParameterSpec = Pick<IHttpParam, 'name' | 'examples' | 'schema' | 'required'>;
+export declare type ParameterSpec = Pick<IHttpParam, 'name' | 'schema' | 'required'> & {
+    examples?: (Omit<INodeExample, 'id'> | Omit<INodeExternalExample, 'id'>)[];
+};
 export declare function parameterOptions(parameter: ParameterSpec): ({
     value: string | number;
 } | {

package/components/TryIt/Servers/ServersDropdown.d.ts

@@ -1,4 +1,4 @@
-import { IServer } from '@stoplight/types';
+import type { IServer } from '../../../utils/http-spec/IServer';
 export declare type ServersDropdownProps = {
     servers: IServer[];
 };

package/components/TryIt/build-request.d.ts

@@ -1,5 +1,6 @@
-import { Dictionary, IHttpOperation, IMediaTypeContent, IServer } from '@stoplight/types';
+import { Dictionary, IHttpOperation, IMediaTypeContent } from '@stoplight/types';
 import { Request as HarRequest } from 'har-format';
+import { IServer } from '../../utils/http-spec/IServer';
 import { HttpSecuritySchemeWithValues } from './Auth/authentication-utils';
 import { BodyParameterValues } from './Body/request-body-utils';
 import { MockData } from './Mocking/mocking-utils';

package/components/TryIt/chosenServer.d.ts

@@ -1,4 +1,4 @@
-import { IServer } from '@stoplight/types';
+import type { IServer } from '../../utils/http-spec/IServer';
 export declare const chosenServerAtom: import("jotai").Atom<IServer | null | undefined> & {
     write: (get: {
         <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;

package/index.esm.js

@@ -158,6 +158,7 @@ const parserMap = {
     [NodeType.Generic]: parseUnknown,
     [NodeType.TableOfContents]: parseUnknown,
     [NodeType.SpectralRuleset]: parseUnknown,
+    [NodeType.Styleguide]: parseUnknown,
     [NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
@@ -235,6 +236,7 @@ const NodeTypeColors = {
     unknown: '',
     table_of_contents: '',
     spectral_ruleset: '',
+    styleguide: '',
 };
 const NodeTypePrettyName = {
     http_operation: 'Endpoint',
@@ -246,6 +248,7 @@ const NodeTypePrettyName = {
     unknown: '',
     table_of_contents: '',
     spectral_ruleset: '',
+    styleguide: '',
 };
 const NodeTypeIconDefs = {
     http_operation: faCrosshairs,
@@ -257,6 +260,7 @@ const NodeTypeIconDefs = {
     generic: faQuestionCircle,
     table_of_contents: faQuestionCircle,
     spectral_ruleset: faQuestionCircle,
+    styleguide: faQuestionCircle,
 };
 const HttpMethodColors = {
     get: 'success',
@@ -1603,7 +1607,7 @@ const ResponseError = ({ state: { error } }) => (React.createElement(Panel, { de
     React.createElement(Panel.Content, null, isNetworkError(error) ? React.createElement(NetworkErrorMessage, null) : React.createElement("p", null, error.message))));
 const NetworkErrorMessage = () => (React.createElement(React.Fragment, null,
     React.createElement("p", { className: "sl-pb-2" },
-        React.createElement("strong", null, "Network Error occured.")),
+        React.createElement("strong", null, "Network Error occurred.")),
     React.createElement("p", { className: "sl-pb-2" }, "1. Double check that your computer is connected to the internet."),
     React.createElement("p", { className: "sl-pb-2" }, "2. Make sure the API is actually running and available under the specified URL."),
     React.createElement("p", null,
@@ -2410,29 +2414,34 @@ function parseHttpRequest(data) {
         id: '?http-operation-id?',
         method: data.method,
         path: uri.is('absolute') ? uri.path() : data.url,
-        servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
+        servers: [{ id: `?http-server-${uri.href()}?`, url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
         request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
                 const defaultVal = Array.isArray(value) ? value[0] : value;
                 return {
+                    id: `?http-query-${key}-id?`,
                     name: key,
                     style: HttpParamStyles.Form,
                     schema: { default: defaultVal },
                     required: isHttpRequestParamRequired(defaultVal),
                 };
             }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+                id: `?http-header-${key}-id?`,
                 name: key,
                 style: HttpParamStyles.Simple,
                 schema: { default: value },
                 required: isHttpRequestParamRequired(value),
             })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
+                id: `?http-param-${name}-id?`,
                 name,
                 style: HttpParamStyles.Simple,
                 required: true,
             })) }, (data.body
             ? {
                 body: {
+                    id: '?http-request-body?',
                     contents: [
                         {
+                            id: '?http-request-body-media?',
                             mediaType: 'application/json',
                             schema: { default: data.body },
                         },
@@ -2483,10 +2492,16 @@ function getHtmlIdFromItemId(id) {
 }
 function isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault = 0) {
     return (depth < maxDepthOpenByDefault ||
-        (activeId && (('id' in item && activeId === item.id) || hasActiveItem(item.items, activeId))));
+        (activeId &&
+            (('slug' in item && activeId === item.slug) ||
+                ('id' in item && activeId === item.id) ||
+                hasActiveItem(item.items, activeId))));
 }
 function hasActiveItem(items, activeId) {
     return items.some(item => {
+        if ('slug' in item && activeId === item.slug) {
+            return true;
+        }
         if ('id' in item && activeId === item.id) {
             return true;
         }
@@ -2607,7 +2622,7 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, onClick }) =>
 });
 const Node = React.memo(({ item, depth, meta, onClick, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
-    const isActive = activeId === item.id;
+    const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React.useContext(LinkContext);
     const handleClick = (e) => {
         if (isActive) {
@@ -2622,7 +2637,7 @@ const Node = React.memo(({ item, depth, meta, onClick, onLinkClick = () => { } }
         }
     };
     return (React.createElement(Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
-        React.createElement(Item, { id: getHtmlIdFromItemId(item.id), isActive: isActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
+        React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
 });
 const Version = ({ value }) => {
     return (React.createElement(Box, { mr: 2 },

package/index.js

@@ -212,6 +212,7 @@ const parserMap = {
     [types.NodeType.Generic]: parseUnknown,
     [types.NodeType.TableOfContents]: parseUnknown,
     [types.NodeType.SpectralRuleset]: parseUnknown,
+    [types.NodeType.Styleguide]: parseUnknown,
     [types.NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
@@ -289,6 +290,7 @@ const NodeTypeColors = {
     unknown: '',
     table_of_contents: '',
     spectral_ruleset: '',
+    styleguide: '',
 };
 const NodeTypePrettyName = {
     http_operation: 'Endpoint',
@@ -300,6 +302,7 @@ const NodeTypePrettyName = {
     unknown: '',
     table_of_contents: '',
     spectral_ruleset: '',
+    styleguide: '',
 };
 const NodeTypeIconDefs = {
     http_operation: freeSolidSvgIcons.faCrosshairs,
@@ -311,6 +314,7 @@ const NodeTypeIconDefs = {
     generic: freeSolidSvgIcons.faQuestionCircle,
     table_of_contents: freeSolidSvgIcons.faQuestionCircle,
     spectral_ruleset: freeSolidSvgIcons.faQuestionCircle,
+    styleguide: freeSolidSvgIcons.faQuestionCircle,
 };
 const HttpMethodColors = {
     get: 'success',
@@ -1657,7 +1661,7 @@ const ResponseError = ({ state: { error } }) => (React__namespace.createElement(
     React__namespace.createElement(mosaic.Panel.Content, null, isNetworkError(error) ? React__namespace.createElement(NetworkErrorMessage, null) : React__namespace.createElement("p", null, error.message))));
 const NetworkErrorMessage = () => (React__namespace.createElement(React__namespace.Fragment, null,
     React__namespace.createElement("p", { className: "sl-pb-2" },
-        React__namespace.createElement("strong", null, "Network Error occured.")),
+        React__namespace.createElement("strong", null, "Network Error occurred.")),
     React__namespace.createElement("p", { className: "sl-pb-2" }, "1. Double check that your computer is connected to the internet."),
     React__namespace.createElement("p", { className: "sl-pb-2" }, "2. Make sure the API is actually running and available under the specified URL."),
     React__namespace.createElement("p", null,
@@ -2464,29 +2468,34 @@ function parseHttpRequest(data) {
         id: '?http-operation-id?',
         method: data.method,
         path: uri.is('absolute') ? uri.path() : data.url,
-        servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
+        servers: [{ id: `?http-server-${uri.href()}?`, url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
         request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
                 const defaultVal = Array.isArray(value) ? value[0] : value;
                 return {
+                    id: `?http-query-${key}-id?`,
                     name: key,
                     style: types.HttpParamStyles.Form,
                     schema: { default: defaultVal },
                     required: isHttpRequestParamRequired(defaultVal),
                 };
             }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+                id: `?http-header-${key}-id?`,
                 name: key,
                 style: types.HttpParamStyles.Simple,
                 schema: { default: value },
                 required: isHttpRequestParamRequired(value),
             })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
+                id: `?http-param-${name}-id?`,
                 name,
                 style: types.HttpParamStyles.Simple,
                 required: true,
             })) }, (data.body
             ? {
                 body: {
+                    id: '?http-request-body?',
                     contents: [
                         {
+                            id: '?http-request-body-media?',
                             mediaType: 'application/json',
                             schema: { default: data.body },
                         },
@@ -2537,10 +2546,16 @@ function getHtmlIdFromItemId(id) {
 }
 function isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault = 0) {
     return (depth < maxDepthOpenByDefault ||
-        (activeId && (('id' in item && activeId === item.id) || hasActiveItem(item.items, activeId))));
+        (activeId &&
+            (('slug' in item && activeId === item.slug) ||
+                ('id' in item && activeId === item.id) ||
+                hasActiveItem(item.items, activeId))));
 }
 function hasActiveItem(items, activeId) {
     return items.some(item => {
+        if ('slug' in item && activeId === item.slug) {
+            return true;
+        }
         if ('id' in item && activeId === item.id) {
             return true;
         }
@@ -2661,7 +2676,7 @@ const Item = React__namespace.memo(({ depth, isActive, id, title, meta, icon, on
 });
 const Node = React__namespace.memo(({ item, depth, meta, onClick, onLinkClick = () => { } }) => {
     const activeId = React__namespace.useContext(ActiveIdContext);
-    const isActive = activeId === item.id;
+    const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React__namespace.useContext(LinkContext);
     const handleClick = (e) => {
         if (isActive) {
@@ -2676,7 +2691,7 @@ const Node = React__namespace.memo(({ item, depth, meta, onClick, onLinkClick =
         }
     };
     return (React__namespace.createElement(mosaic.Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
-        React__namespace.createElement(Item, { id: getHtmlIdFromItemId(item.id), isActive: isActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
+        React__namespace.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
 });
 const Version = ({ value }) => {
     return (React__namespace.createElement(mosaic.Box, { mr: 2 },

package/index.mjs

@@ -158,6 +158,7 @@ const parserMap = {
     [NodeType.Generic]: parseUnknown,
     [NodeType.TableOfContents]: parseUnknown,
     [NodeType.SpectralRuleset]: parseUnknown,
+    [NodeType.Styleguide]: parseUnknown,
     [NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
@@ -235,6 +236,7 @@ const NodeTypeColors = {
     unknown: '',
     table_of_contents: '',
     spectral_ruleset: '',
+    styleguide: '',
 };
 const NodeTypePrettyName = {
     http_operation: 'Endpoint',
@@ -246,6 +248,7 @@ const NodeTypePrettyName = {
     unknown: '',
     table_of_contents: '',
     spectral_ruleset: '',
+    styleguide: '',
 };
 const NodeTypeIconDefs = {
     http_operation: faCrosshairs,
@@ -257,6 +260,7 @@ const NodeTypeIconDefs = {
     generic: faQuestionCircle,
     table_of_contents: faQuestionCircle,
     spectral_ruleset: faQuestionCircle,
+    styleguide: faQuestionCircle,
 };
 const HttpMethodColors = {
     get: 'success',
@@ -1603,7 +1607,7 @@ const ResponseError = ({ state: { error } }) => (React.createElement(Panel, { de
     React.createElement(Panel.Content, null, isNetworkError(error) ? React.createElement(NetworkErrorMessage, null) : React.createElement("p", null, error.message))));
 const NetworkErrorMessage = () => (React.createElement(React.Fragment, null,
     React.createElement("p", { className: "sl-pb-2" },
-        React.createElement("strong", null, "Network Error occured.")),
+        React.createElement("strong", null, "Network Error occurred.")),
     React.createElement("p", { className: "sl-pb-2" }, "1. Double check that your computer is connected to the internet."),
     React.createElement("p", { className: "sl-pb-2" }, "2. Make sure the API is actually running and available under the specified URL."),
     React.createElement("p", null,
@@ -2410,29 +2414,34 @@ function parseHttpRequest(data) {
         id: '?http-operation-id?',
         method: data.method,
         path: uri.is('absolute') ? uri.path() : data.url,
-        servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
+        servers: [{ id: `?http-server-${uri.href()}?`, url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
         request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
                 const defaultVal = Array.isArray(value) ? value[0] : value;
                 return {
+                    id: `?http-query-${key}-id?`,
                     name: key,
                     style: HttpParamStyles.Form,
                     schema: { default: defaultVal },
                     required: isHttpRequestParamRequired(defaultVal),
                 };
             }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+                id: `?http-header-${key}-id?`,
                 name: key,
                 style: HttpParamStyles.Simple,
                 schema: { default: value },
                 required: isHttpRequestParamRequired(value),
             })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
+                id: `?http-param-${name}-id?`,
                 name,
                 style: HttpParamStyles.Simple,
                 required: true,
             })) }, (data.body
             ? {
                 body: {
+                    id: '?http-request-body?',
                     contents: [
                         {
+                            id: '?http-request-body-media?',
                             mediaType: 'application/json',
                             schema: { default: data.body },
                         },
@@ -2483,10 +2492,16 @@ function getHtmlIdFromItemId(id) {
 }
 function isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault = 0) {
     return (depth < maxDepthOpenByDefault ||
-        (activeId && (('id' in item && activeId === item.id) || hasActiveItem(item.items, activeId))));
+        (activeId &&
+            (('slug' in item && activeId === item.slug) ||
+                ('id' in item && activeId === item.id) ||
+                hasActiveItem(item.items, activeId))));
 }
 function hasActiveItem(items, activeId) {
     return items.some(item => {
+        if ('slug' in item && activeId === item.slug) {
+            return true;
+        }
         if ('id' in item && activeId === item.id) {
             return true;
         }
@@ -2607,7 +2622,7 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, onClick }) =>
 });
 const Node = React.memo(({ item, depth, meta, onClick, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
-    const isActive = activeId === item.id;
+    const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React.useContext(LinkContext);
     const handleClick = (e) => {
         if (isActive) {
@@ -2622,7 +2637,7 @@ const Node = React.memo(({ item, depth, meta, onClick, onLinkClick = () => { } }
         }
     };
     return (React.createElement(Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
-        React.createElement(Item, { id: getHtmlIdFromItemId(item.id), isActive: isActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
+        React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
 });
 const Version = ({ value }) => {
     return (React.createElement(Box, { mr: 2 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.5.13",
+  "version": "7.5.16",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -17,7 +17,7 @@
   },
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=12"
+    "node": ">=14.13"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -25,17 +25,17 @@
   },
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@stoplight/json": "^3.10.0",
+    "@stoplight/json": "^3.18.0",
     "@stoplight/json-schema-ref-parser": "^9.0.5",
     "@stoplight/json-schema-sampler": "0.2.2",
     "@stoplight/json-schema-viewer": "^4.5.0",
     "@stoplight/markdown-viewer": "^5.4.2",
-    "@stoplight/mosaic": "^1.15.4",
-    "@stoplight/mosaic-code-editor": "^1.15.4",
-    "@stoplight/mosaic-code-viewer": "^1.15.4",
+    "@stoplight/mosaic": "^1.16.2",
+    "@stoplight/mosaic-code-editor": "^1.16.2",
+    "@stoplight/mosaic-code-viewer": "^1.16.2",
     "@stoplight/path": "^1.3.2",
     "@stoplight/react-error-boundary": "^2.0.0",
-    "@stoplight/types": "^12.0.0",
+    "@stoplight/types": "^13.0.0",
     "@stoplight/yaml": "^4.2.2",
     "classnames": "^2.2.6",
     "httpsnippet": "^1.24.0",
@@ -52,11 +52,13 @@
     "util": "^0.12.4",
     "xml-formatter": "^2.4.0"
   },
+  "type": "commonjs",
   "exports": {
-    "require": "./index.js",
-    "import": "./index.mjs"
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
   },
   "typings": "index.d.ts",
-  "type": "commonjs",
   "module": "./index.esm.js"
 }

package/utils/http-spec/IServer.d.ts

@@ -1,3 +1,4 @@
-import { IServer } from '@stoplight/types';
+import { IServer as _IServer } from '@stoplight/types';
+export declare type IServer = Omit<_IServer, 'id'>;
 export declare const getServersToDisplay: (originalServers: IServer[], mockUrl?: string | undefined) => IServer[];
 export declare const getServerUrlWithDefaultValues: (server: IServer) => string | null;