@stoplight/elements-core 7.5.8 → 7.5.12

package/index.mjs

@@ -5,18 +5,15 @@ import { resolveInlineRef, isPlainObject as isPlainObject$1, safeParse, safeStri
 import isArray from 'lodash/isArray.js';
 import isObject from 'lodash/isObject.js';
 import isPlainObject from 'lodash/isPlainObject.js';
-import { parse } from '@stoplight/markdown';
 import { NodeType, HttpParamStyles } from '@stoplight/types';
-import { parse as parse$1 } from '@stoplight/yaml';
-import { isArray as isArray$1, Box, Flex, Icon, Button, Popover, Panel, CopyButton, Menu, Text, Input, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { parse } from '@stoplight/yaml';
+import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
-import { faStream, faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, faServer, faExclamationTriangle, faEye, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
-import throttle from 'lodash/throttle.js';
-import { selectAll } from 'unist-util-select';
 import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
+import { faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, faServer, faExclamationTriangle, faEye, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
@@ -164,13 +161,7 @@ const parserMap = {
     [NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
-    if (typeof rawData === 'string') {
-        return {
-            type: NodeType.Article,
-            data: parse(rawData),
-        };
-    }
-    if (isSMDASTRoot(rawData)) {
+    if (typeof rawData === 'string' || isSMDASTRoot(rawData)) {
         return {
             type: NodeType.Article,
             data: rawData,
@@ -213,7 +204,7 @@ function tryParseYamlOrObject(yamlOrObject) {
         return yamlOrObject;
     if (typeof yamlOrObject === 'string') {
         try {
-            return parse$1(yamlOrObject);
+            return parse(yamlOrObject);
         }
         catch (e) { }
     }
@@ -228,94 +219,9 @@ const MarkdownViewer = (props) => {
 };
 MarkdownViewer.displayName = 'MarkdownViewer';
 
-function useComponentSize(container) {
-    const [componentSize, setComponentSize] = React.useState({ width: 0, height: 0 });
-    React.useEffect(() => {
-        if (!container) {
-            return;
-        }
-        const updateComponentSize = throttle(() => (container ? setComponentSize(container.getBoundingClientRect()) : { width: 0, height: 0 }), 1000, {
-            trailing: true,
-        });
-        updateComponentSize();
-        window.addEventListener('resize', updateComponentSize);
-        return () => {
-            updateComponentSize.cancel();
-            window.removeEventListener('resize', updateComponentSize);
-        };
-    }, [container]);
-    return componentSize;
-}
-
-function useComputeMarkdownHeadings(tree) {
-    return React.useMemo(() => computeMarkdownHeadings(tree), [tree]);
-}
-function computeMarkdownHeadings(tree) {
-    return selectAll(':root > [type=heading]', tree)
-        .map((heading) => {
-        var _a;
-        return ({
-            title: findTitle(heading),
-            id: ((_a = heading.data) === null || _a === void 0 ? void 0 : _a.id) || '',
-            depth: heading.depth - 1,
-        });
-    })
-        .filter((item) => item.depth >= 1 && item.depth <= 2);
-}
-const findTitle = (parent) => {
-    return selectAll('[type=text]', parent).map(textNode => String(textNode.value)).join(' ');
-};
-
-function useLocationHash() {
-    const isBrowser = typeof window !== 'undefined';
-    const [locationHash, setLocationHash] = React.useState(isBrowser && window.location.hash);
-    React.useEffect(() => {
-        if (!isBrowser)
-            return;
-        const hashChange = () => setLocationHash(window.location.hash);
-        window.addEventListener('hashchange', hashChange, false);
-        return () => window.removeEventListener('hashchange', hashChange);
-    }, [isBrowser]);
-    return locationHash;
-}
-
-const ArticleHeadings = ({ tree, container }) => {
-    const { width } = useComponentSize(container);
-    const showHeadings = width >= 768;
-    const headings = useComputeMarkdownHeadings(tree);
-    return React.createElement(Headings, { className: "ArticleHeadings", headings: headings, minimal: !showHeadings, maxWidth: 300 });
-};
-const Headings = ({ headings, className, title = 'On This Page', minimal, maxWidth }) => {
-    const locationHash = useLocationHash();
-    if (!headings || !headings.length)
-        return null;
-    const component = (React.createElement(Box, { overflowY: "auto", style: { maxHeight: '85vh', maxWidth } },
-        title && (React.createElement(Flex, { py: 2, alignItems: "center", fontSize: "sm", fontWeight: "medium", color: "muted", style: { paddingLeft: 18 } },
-            React.createElement(Box, { as: Icon, icon: faStream, mr: 2 }),
-            title)),
-        headings.map((heading, i) => (React.createElement(Heading, { key: i, item: heading, isSelected: locationHash === `#${heading.id}` })))));
-    const button = React.createElement(Button, { pos: "sticky", size: "sm", borderColor: "light", icon: faStream, style: { top: 10 } });
-    if (minimal) {
-        return (React.createElement(Box, { pos: "sticky", top: 0, right: 0, style: { top: 10 } },
-            React.createElement(Popover, { renderTrigger: button, placement: "bottom" },
-                React.createElement(Box, { className: className }, component))));
-    }
-    return (React.createElement(Box, { pos: "sticky", pr: 4, pl: 16, h: "full", overflowX: "auto", overflowY: "auto", className: className, style: { top: 30 } },
-        React.createElement(Box, { borderL: true, borderColor: "light" }, component)));
-};
-const Heading = ({ item, isSelected }) => {
-    return (React.createElement(Box, { as: "a", href: `#${item.id}`, textOverflow: "truncate", display: "block", py: 2, pr: 8, fontWeight: "medium", fontSize: "sm", color: isSelected ? 'primary' : 'muted', style: { paddingLeft: `${3 + item.depth * 15}px` } }, item.title));
-};
-
 const ArticleComponent = React.memo(({ data }) => {
-    const [container, setContainer] = React.useState(null);
-    const tree = React.useMemo(() => (typeof data === 'object' ? data : parse(data)), [data]);
-    if (tree === null)
-        return null;
-    return (React.createElement(Flex, { className: "sl-elements-article", justifyContent: "evenly", w: "full", pos: "relative", ref: setContainer },
-        React.createElement(Box, { className: "sl-elements-article-content", style: { width: 0 }, flex: 1 },
-            React.createElement(MarkdownViewer, { markdown: tree })),
-        React.createElement(ArticleHeadings, { tree: tree, container: container })));
+    return (React.createElement(Box, { className: "sl-elements-article" },
+        React.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true })));
 });
 const Article = withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
@@ -2177,7 +2083,7 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
     const hasBadges = isDeprecated || isInternal;
     const header = (!(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) || hasBadges) && (React.createElement(VStack, { spacing: 5 },
         React.createElement(HStack, { spacing: 5 },
-            !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && prettyName ? (React.createElement(Heading$1, { size: 1, fontWeight: "semibold" }, prettyName)) : null,
+            !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && prettyName ? (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, prettyName)) : null,
             React.createElement(HStack, { spacing: 2 },
                 isDeprecated && React.createElement(DeprecatedBadge, null),
                 isInternal && React.createElement(InternalBadge, { isHttpService: true }))),
@@ -2301,7 +2207,7 @@ const HttpServiceComponent = React.memo(({ data, location = {}, layoutOptions, e
     const query = new URLSearchParams(search);
     return (React.createElement(Box, { mb: 10 },
         data.name && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
-            React.createElement(Heading$1, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
+            React.createElement(Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
             exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps)))),
         data.version && (React.createElement(Box, { mb: 5 },
             React.createElement(VersionBadge, { value: data.version }))),
@@ -2332,7 +2238,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     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(Flex, { justifyContent: "between", alignItems: "center" },
         React.createElement(HStack, { spacing: 5 },
-            title && (React.createElement(Heading$1, { size: 1, fontWeight: "semibold" }, title)),
+            title && (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, title)),
             React.createElement(HStack, { spacing: 2 }, isInternal && React.createElement(InternalBadge, null))),
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps))));
     const description = (React.createElement(VStack, { spacing: 10 },
@@ -2389,7 +2295,7 @@ const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = M
                 paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                 minWidth: `${sidebarWidth}px`,
             } }, sidebar),
-        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, overflowY: "auto", overflowX: "hidden", w: "full" },
+        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full", overflowY: "auto" },
             React.createElement(Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
 });
 
@@ -2418,7 +2324,7 @@ function useParsedValue(value) {
         let parsedValue = value;
         if (typeof value === 'string') {
             try {
-                parsedValue = parse$1(value);
+                parsedValue = parse(value);
             }
             catch (error) {
             }
@@ -2444,8 +2350,8 @@ const SchemaAndDescription = ({ title: titleProp, schema }) => {
         React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(schema) })));
 };
 const CodeComponent = props => {
-    const { title, jsonSchema, http, children } = props;
-    const value = String(Array.isArray(children) ? children[0] : children);
+    const { title, jsonSchema, http, resolved, children } = props;
+    const value = resolved || String(Array.isArray(children) ? children[0] : children);
     const parsedValue = useParsedValue(value);
     if (jsonSchema) {
         if (!isJSONSchema(parsedValue)) {
@@ -2692,7 +2598,7 @@ const Version = ({ value }) => {
 const NonIdealState = ({ description, icon, title }) => {
     return (React.createElement(Flex, { flexDirection: "col", alignItems: "center", justifyContent: "center", textAlign: "center", w: "full", h: "full" },
         React.createElement(Box, { as: Icon, icon: icon || faExclamationTriangle, color: "light", fontSize: "6xl", mb: 4 }),
-        React.createElement(Heading$1, { size: 4, mb: 4 }, title),
+        React.createElement(Heading, { size: 4, mb: 4 }, title),
         React.createElement(Text, null, description)));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.5.8",
+  "version": "7.5.12",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -29,11 +29,10 @@
     "@stoplight/json-schema-ref-parser": "^9.0.5",
     "@stoplight/json-schema-sampler": "0.2.2",
     "@stoplight/json-schema-viewer": "^4.5.0",
-    "@stoplight/markdown": "^3.1.1",
-    "@stoplight/markdown-viewer": "^5.3.2",
-    "@stoplight/mosaic": "^1.15.2",
-    "@stoplight/mosaic-code-editor": "^1.15.2",
-    "@stoplight/mosaic-code-viewer": "^1.15.2",
+    "@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/path": "^1.3.2",
     "@stoplight/react-error-boundary": "^2.0.0",
     "@stoplight/types": "^12.0.0",
@@ -49,7 +48,6 @@
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.1.0",
     "tslib": "^2.1.0",
-    "unist-util-select": "^3.0.1",
     "urijs": "^1.19.6",
     "util": "^0.12.4",
     "xml-formatter": "^2.4.0"