@stoplight/elements-core 9.0.16 → 9.0.17

package/index.esm.js

@@ -10,7 +10,7 @@ import { parse } from '@stoplight/yaml';
 import { isArray as isArray$1, Box, useBreakpoints, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Callout, useModalState, Modal, ListBox, ListBoxItem, TabList, Tab, Tabs, TabPanels, TabPanel, Heading, useClipboard, Drawer, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
-import { useLocation, Link as Link$1, BrowserRouter, MemoryRouter, HashRouter, useInRouterContext, Routes, Route } from 'react-router-dom';
+import { useLocation, Link as Link$1, HashRouter, MemoryRouter, BrowserRouter, useInRouterContext, Routes, Route } from 'react-router-dom';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
@@ -2702,20 +2702,7 @@ const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultI
 };
 
 const operation = {
-    id: '?http-operation-id?',
-    iid: 'GET-simple',
-    method: 'get',
-    path: '/todos',
-    summary: 'Get 200',
-    responses: [
-        {
-            id: '?http-response-200?',
-            code: '200',
-            description: 'OK',
-        },
-    ],
-    servers: [{ id: '?http-server-0?', url: 'https://todos.stoplight.io' }],
-};
+    id: '?http-operation-id?'};
 
 const oauthFlowNames = {
     implicit: 'Implicit',
@@ -3606,33 +3593,37 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
         });
     }, []);
     const updatedTree = updateTocTree(tree, '');
-    const findFirstMatchAndIndexMatch = React.useCallback((items, id) => {
-        let firstMatch;
-        let hasAnyLastIndexMatch = false;
-        if (!id)
-            return [firstMatch, hasAnyLastIndexMatch];
-        const walk = (arr, stack) => {
-            for (const itm of arr) {
-                const newStack = stack.concat(itm);
-                const matches = ('slug' in itm && itm.slug === id) || ('id' in itm && itm.id === id);
-                if (matches) {
-                    if (!firstMatch)
-                        firstMatch = itm;
-                    const hasLastIndexMatch = newStack.some(el => 'index' in el && el.index === lastActiveIndex);
-                    if (hasLastIndexMatch)
-                        hasAnyLastIndexMatch = true;
+    const findMatchingItems = (updateTree, activeId, lastActiveIndex) => {
+        let exactMatch;
+        let partialMatch;
+        const searchInChildren = (items) => {
+            for (const item of items) {
+                const hasSlug = 'slug' in item;
+                const hasId = 'id' in item;
+                const isIdMatch = (hasSlug && item.slug === activeId) || (hasId && item.id === activeId);
+                if (isIdMatch) {
+                    const hasIndex = 'index' in item;
+                    if (hasIndex && item.index === lastActiveIndex) {
+                        exactMatch = exactMatch !== null && exactMatch !== void 0 ? exactMatch : item;
+                    }
+                    else {
+                        partialMatch = partialMatch !== null && partialMatch !== void 0 ? partialMatch : item;
+                    }
                 }
-                if ('items' in itm && Array.isArray(itm.items)) {
-                    if (walk(itm.items, newStack))
-                        return true;
+                const hasItems = 'items' in item;
+                if (hasItems && Array.isArray(item.items)) {
+                    searchInChildren(item.items);
                 }
             }
-            return false;
         };
-        walk(items, []);
-        return [firstMatch, hasAnyLastIndexMatch];
-    }, [lastActiveIndex]);
-    const [firstMatchItem, hasAnyLastIndexMatch] = React.useMemo(() => findFirstMatchAndIndexMatch(updatedTree, activeId), [updatedTree, activeId, findFirstMatchAndIndexMatch]);
+        searchInChildren(updateTree);
+        const hasExactMatch = exactMatch !== undefined;
+        const bestMatch = exactMatch !== null && exactMatch !== void 0 ? exactMatch : partialMatch;
+        return [bestMatch, hasExactMatch];
+    };
+    const [firstMatchItem, hasAnyLastIndexMatch] = React.useMemo(() => {
+        return findMatchingItems(updatedTree, activeId, lastActiveIndex);
+    }, [updatedTree, activeId, lastActiveIndex]);
     React.useEffect(() => {
         if (!hasAnyLastIndexMatch && firstMatchItem && 'index' in firstMatchItem && firstMatchItem.index) {
             setLastActiveIndex(firstMatchItem.index);
@@ -4175,15 +4166,15 @@ const useRouter = (router, basePath, staticRouterPath) => {
 const components = {
     a: ReactRouterMarkdownLink,
     h2: (_a) => {
-        var props = __rest(_a, ["color"]);
+        var { color } = _a, props = __rest(_a, ["color"]);
         return React.createElement(LinkHeading, Object.assign({ size: 2 }, props));
     },
     h3: (_a) => {
-        var props = __rest(_a, ["color"]);
+        var { color } = _a, props = __rest(_a, ["color"]);
         return React.createElement(LinkHeading, Object.assign({ size: 3 }, props));
     },
     h4: (_a) => {
-        var props = __rest(_a, ["color"]);
+        var { color } = _a, props = __rest(_a, ["color"]);
         return React.createElement(LinkHeading, Object.assign({ size: 4 }, props));
     },
 };

package/index.js

@@ -2723,20 +2723,7 @@ const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultI
 };
 
 const operation = {
-    id: '?http-operation-id?',
-    iid: 'GET-simple',
-    method: 'get',
-    path: '/todos',
-    summary: 'Get 200',
-    responses: [
-        {
-            id: '?http-response-200?',
-            code: '200',
-            description: 'OK',
-        },
-    ],
-    servers: [{ id: '?http-server-0?', url: 'https://todos.stoplight.io' }],
-};
+    id: '?http-operation-id?'};
 
 const oauthFlowNames = {
     implicit: 'Implicit',
@@ -3627,33 +3614,37 @@ const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthO
         });
     }, []);
     const updatedTree = updateTocTree(tree, '');
-    const findFirstMatchAndIndexMatch = React__namespace.useCallback((items, id) => {
-        let firstMatch;
-        let hasAnyLastIndexMatch = false;
-        if (!id)
-            return [firstMatch, hasAnyLastIndexMatch];
-        const walk = (arr, stack) => {
-            for (const itm of arr) {
-                const newStack = stack.concat(itm);
-                const matches = ('slug' in itm && itm.slug === id) || ('id' in itm && itm.id === id);
-                if (matches) {
-                    if (!firstMatch)
-                        firstMatch = itm;
-                    const hasLastIndexMatch = newStack.some(el => 'index' in el && el.index === lastActiveIndex);
-                    if (hasLastIndexMatch)
-                        hasAnyLastIndexMatch = true;
+    const findMatchingItems = (updateTree, activeId, lastActiveIndex) => {
+        let exactMatch;
+        let partialMatch;
+        const searchInChildren = (items) => {
+            for (const item of items) {
+                const hasSlug = 'slug' in item;
+                const hasId = 'id' in item;
+                const isIdMatch = (hasSlug && item.slug === activeId) || (hasId && item.id === activeId);
+                if (isIdMatch) {
+                    const hasIndex = 'index' in item;
+                    if (hasIndex && item.index === lastActiveIndex) {
+                        exactMatch = exactMatch !== null && exactMatch !== void 0 ? exactMatch : item;
+                    }
+                    else {
+                        partialMatch = partialMatch !== null && partialMatch !== void 0 ? partialMatch : item;
+                    }
                 }
-                if ('items' in itm && Array.isArray(itm.items)) {
-                    if (walk(itm.items, newStack))
-                        return true;
+                const hasItems = 'items' in item;
+                if (hasItems && Array.isArray(item.items)) {
+                    searchInChildren(item.items);
                 }
             }
-            return false;
         };
-        walk(items, []);
-        return [firstMatch, hasAnyLastIndexMatch];
-    }, [lastActiveIndex]);
-    const [firstMatchItem, hasAnyLastIndexMatch] = React__namespace.useMemo(() => findFirstMatchAndIndexMatch(updatedTree, activeId), [updatedTree, activeId, findFirstMatchAndIndexMatch]);
+        searchInChildren(updateTree);
+        const hasExactMatch = exactMatch !== undefined;
+        const bestMatch = exactMatch !== null && exactMatch !== void 0 ? exactMatch : partialMatch;
+        return [bestMatch, hasExactMatch];
+    };
+    const [firstMatchItem, hasAnyLastIndexMatch] = React__namespace.useMemo(() => {
+        return findMatchingItems(updatedTree, activeId, lastActiveIndex);
+    }, [updatedTree, activeId, lastActiveIndex]);
     React__namespace.useEffect(() => {
         if (!hasAnyLastIndexMatch && firstMatchItem && 'index' in firstMatchItem && firstMatchItem.index) {
             setLastActiveIndex(firstMatchItem.index);
@@ -4196,15 +4187,15 @@ const useRouter = (router, basePath, staticRouterPath) => {
 const components = {
     a: ReactRouterMarkdownLink,
     h2: (_a) => {
-        var props = tslib.__rest(_a, ["color"]);
+        var { color } = _a, props = tslib.__rest(_a, ["color"]);
         return React__namespace.createElement(LinkHeading, Object.assign({ size: 2 }, props));
     },
     h3: (_a) => {
-        var props = tslib.__rest(_a, ["color"]);
+        var { color } = _a, props = tslib.__rest(_a, ["color"]);
         return React__namespace.createElement(LinkHeading, Object.assign({ size: 3 }, props));
     },
     h4: (_a) => {
-        var props = tslib.__rest(_a, ["color"]);
+        var { color } = _a, props = tslib.__rest(_a, ["color"]);
         return React__namespace.createElement(LinkHeading, Object.assign({ size: 4 }, props));
     },
 };

package/index.mjs

@@ -10,7 +10,7 @@ import { parse } from '@stoplight/yaml';
 import { isArray as isArray$1, Box, useBreakpoints, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Callout, useModalState, Modal, ListBox, ListBoxItem, TabList, Tab, Tabs, TabPanels, TabPanel, Heading, useClipboard, Drawer, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
-import { useLocation, Link as Link$1, BrowserRouter, MemoryRouter, HashRouter, useInRouterContext, Routes, Route } from 'react-router-dom';
+import { useLocation, Link as Link$1, HashRouter, MemoryRouter, BrowserRouter, useInRouterContext, Routes, Route } from 'react-router-dom';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
@@ -2702,20 +2702,7 @@ const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultI
 };
 
 const operation = {
-    id: '?http-operation-id?',
-    iid: 'GET-simple',
-    method: 'get',
-    path: '/todos',
-    summary: 'Get 200',
-    responses: [
-        {
-            id: '?http-response-200?',
-            code: '200',
-            description: 'OK',
-        },
-    ],
-    servers: [{ id: '?http-server-0?', url: 'https://todos.stoplight.io' }],
-};
+    id: '?http-operation-id?'};
 
 const oauthFlowNames = {
     implicit: 'Implicit',
@@ -3606,33 +3593,37 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
         });
     }, []);
     const updatedTree = updateTocTree(tree, '');
-    const findFirstMatchAndIndexMatch = React.useCallback((items, id) => {
-        let firstMatch;
-        let hasAnyLastIndexMatch = false;
-        if (!id)
-            return [firstMatch, hasAnyLastIndexMatch];
-        const walk = (arr, stack) => {
-            for (const itm of arr) {
-                const newStack = stack.concat(itm);
-                const matches = ('slug' in itm && itm.slug === id) || ('id' in itm && itm.id === id);
-                if (matches) {
-                    if (!firstMatch)
-                        firstMatch = itm;
-                    const hasLastIndexMatch = newStack.some(el => 'index' in el && el.index === lastActiveIndex);
-                    if (hasLastIndexMatch)
-                        hasAnyLastIndexMatch = true;
+    const findMatchingItems = (updateTree, activeId, lastActiveIndex) => {
+        let exactMatch;
+        let partialMatch;
+        const searchInChildren = (items) => {
+            for (const item of items) {
+                const hasSlug = 'slug' in item;
+                const hasId = 'id' in item;
+                const isIdMatch = (hasSlug && item.slug === activeId) || (hasId && item.id === activeId);
+                if (isIdMatch) {
+                    const hasIndex = 'index' in item;
+                    if (hasIndex && item.index === lastActiveIndex) {
+                        exactMatch = exactMatch !== null && exactMatch !== void 0 ? exactMatch : item;
+                    }
+                    else {
+                        partialMatch = partialMatch !== null && partialMatch !== void 0 ? partialMatch : item;
+                    }
                 }
-                if ('items' in itm && Array.isArray(itm.items)) {
-                    if (walk(itm.items, newStack))
-                        return true;
+                const hasItems = 'items' in item;
+                if (hasItems && Array.isArray(item.items)) {
+                    searchInChildren(item.items);
                 }
             }
-            return false;
         };
-        walk(items, []);
-        return [firstMatch, hasAnyLastIndexMatch];
-    }, [lastActiveIndex]);
-    const [firstMatchItem, hasAnyLastIndexMatch] = React.useMemo(() => findFirstMatchAndIndexMatch(updatedTree, activeId), [updatedTree, activeId, findFirstMatchAndIndexMatch]);
+        searchInChildren(updateTree);
+        const hasExactMatch = exactMatch !== undefined;
+        const bestMatch = exactMatch !== null && exactMatch !== void 0 ? exactMatch : partialMatch;
+        return [bestMatch, hasExactMatch];
+    };
+    const [firstMatchItem, hasAnyLastIndexMatch] = React.useMemo(() => {
+        return findMatchingItems(updatedTree, activeId, lastActiveIndex);
+    }, [updatedTree, activeId, lastActiveIndex]);
     React.useEffect(() => {
         if (!hasAnyLastIndexMatch && firstMatchItem && 'index' in firstMatchItem && firstMatchItem.index) {
             setLastActiveIndex(firstMatchItem.index);
@@ -4175,15 +4166,15 @@ const useRouter = (router, basePath, staticRouterPath) => {
 const components = {
     a: ReactRouterMarkdownLink,
     h2: (_a) => {
-        var props = __rest(_a, ["color"]);
+        var { color } = _a, props = __rest(_a, ["color"]);
         return React.createElement(LinkHeading, Object.assign({ size: 2 }, props));
     },
     h3: (_a) => {
-        var props = __rest(_a, ["color"]);
+        var { color } = _a, props = __rest(_a, ["color"]);
         return React.createElement(LinkHeading, Object.assign({ size: 3 }, props));
     },
     h4: (_a) => {
-        var props = __rest(_a, ["color"]);
+        var { color } = _a, props = __rest(_a, ["color"]);
         return React.createElement(LinkHeading, Object.assign({ size: 4 }, props));
     },
 };

package/package.json

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