@stoplight/elements-core 9.0.12 → 9.0.13

package/components/TableOfContents/types.d.ts

@@ -21,6 +21,7 @@ export declare type TableOfContentsGroup = {
     title: string;
     items: TableOfContentsGroupItem[];
     itemsType?: 'article' | 'http_operation' | 'http_webhook' | 'model';
+    index: string;
 };
 export declare type TableOfContentsExternalLink = {
     title: string;
@@ -33,5 +34,11 @@ export declare type TableOfContentsNode<T = 'http_service' | 'http_operation' |
     type: T;
     meta: string;
     version?: string;
+    index: string;
 };
 export declare type TableOfContentsNodeGroup = TableOfContentsNode<'http_service'> & TableOfContentsGroup;
+export declare type ActiveItemContextType = {
+    activeId: string | undefined;
+    lastActiveIndex: string;
+    setLastActiveIndex: React.Dispatch<React.SetStateAction<string>>;
+};

package/index.esm.js

@@ -3496,7 +3496,7 @@ function findFirstNode(items) {
     return;
 }
 function isDivider(item) {
-    return Object.keys(item).length === 1 && 'title' in item;
+    return Object.keys(item).length === 2 && 'title' in item && 'index' in item;
 }
 function isGroup(item) {
     return Object.keys(item).length >= 2 && 'title' in item && 'items' in item;
@@ -3508,13 +3508,33 @@ function isNode(item) {
     return 'title' in item && 'slug' in item && 'id' in item && 'meta' in item && 'type' in item;
 }
 function isExternalLink(item) {
-    return Object.keys(item).length === 2 && 'title' in item && 'url' in item;
+    return Object.keys(item).length === 3 && 'title' in item && 'url' in item && 'index' in item;
 }
 
-const ActiveIdContext = React.createContext(undefined);
+const ActiveItemContext = React.createContext({
+    activeId: undefined,
+    lastActiveIndex: '',
+    setLastActiveIndex: () => { },
+});
 const LinkContext = React.createContext(undefined);
 LinkContext.displayName = 'LinkContext';
 const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, isInResponsiveMode = false, onLinkClick, }) => {
+    const [lastActiveIndex, setLastActiveIndex] = useState('');
+    const value = React.useMemo(() => ({
+        lastActiveIndex,
+        setLastActiveIndex,
+        activeId,
+    }), [lastActiveIndex, activeId]);
+    const updateTocTree = React.useCallback((arr, parentId) => {
+        return arr.map((item, key) => {
+            let newItem = Object.assign(Object.assign({}, item), { index: parentId + key + '-' });
+            if (isGroup(item) || isNodeGroup(item)) {
+                newItem.items = updateTocTree(item.items, parentId + key + '-');
+            }
+            return newItem;
+        });
+    }, []);
+    const updatedTree = updateTocTree(tree, '');
     const container = React.useRef(null);
     const child = React.useRef(null);
     const firstRender = useFirstRender();
@@ -3534,18 +3554,30 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
     return (React.createElement(Box, { ref: container, w: "full", bg: isInResponsiveMode ? 'canvas' : 'canvas-100', overflowY: "auto" },
         React.createElement(Box, { ref: child, my: 3 },
             React.createElement(LinkContext.Provider, { value: Link },
-                React.createElement(ActiveIdContext.Provider, { value: activeId }, tree.map((item, key) => {
-                    if (isDivider(item)) {
-                        return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
-                    }
-                    return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
-                }))))));
+                React.createElement(ActiveItemContext.Provider, { value: value },
+                    React.createElement(TOCContainer, { updatedTree: updatedTree }, updatedTree.map((item, key) => {
+                        if (isDivider(item)) {
+                            return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
+                        }
+                        return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
+                    })))))));
 });
 TableOfContents.displayName = 'TableOfContents';
 const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
     return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
 });
 Divider.displayName = 'Divider';
+const TOCContainer = React.memo(({ children, updatedTree }) => {
+    const { setLastActiveIndex } = React.useContext(ActiveItemContext);
+    React.useEffect(() => {
+        const firstNode = findFirstNode(updatedTree);
+        if (firstNode) {
+            setLastActiveIndex(firstNode.index);
+        }
+    }, []);
+    return React.createElement(Box, null, children);
+});
+TOCContainer.displayName = 'TOCContainer';
 const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
     if (isExternalLink(item)) {
         return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
@@ -3563,9 +3595,24 @@ const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsi
 });
 GroupItem.displayName = 'GroupItem';
 const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
-    const activeId = React.useContext(ActiveIdContext);
+    const { activeId, lastActiveIndex } = React.useContext(ActiveItemContext);
     const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
-    const hasActive = !!activeId && hasActiveItem(item.items, activeId);
+    const isActiveGroup = React.useCallback((items, activeId, contextIndex) => {
+        return items.some(element => {
+            const hasSlugOrId = 'slug' in element || 'id' in element;
+            const hasItems = 'items' in element && Array.isArray(element.items);
+            if (!hasSlugOrId && !hasItems)
+                return false;
+            if (activeId &&
+                'index' in element &&
+                (element.slug === activeId || element.id === activeId) &&
+                element.index === contextIndex) {
+                return true;
+            }
+            return hasItems ? isActiveGroup(element.items, activeId, contextIndex) : false;
+        });
+    }, []);
+    const hasActive = isActiveGroup(item.items, activeId, lastActiveIndex);
     React.useEffect(() => {
         const openByDefault = isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault);
         if (isOpen !== openByDefault) {
@@ -3615,8 +3662,10 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiv
 });
 Item.displayName = 'Item';
 const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
-    const activeId = React.useContext(ActiveIdContext);
-    const isActive = activeId === item.slug || activeId === item.id;
+    const { activeId, lastActiveIndex, setLastActiveIndex } = React.useContext(ActiveItemContext);
+    const { index } = item;
+    const isSlugMatched = activeId === item.slug || activeId === item.id;
+    const isActive = lastActiveIndex === index && isSlugMatched;
     const LinkComponent = React.useContext(LinkContext);
     const handleClick = (e) => {
         if (isActive) {
@@ -3624,6 +3673,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
             e.preventDefault();
         }
         else {
+            setLastActiveIndex(index);
             onLinkClick();
         }
         if (onClick) {
@@ -3631,7 +3681,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
         }
     };
     return (React.createElement(Box, { as: LinkComponent, to: resolveRelativeLink(item.slug), display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
-        React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, 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, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
+        React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, 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, isInResponsiveMode: isInResponsiveMode, onClick: e => handleClick(e) })));
 });
 Node.displayName = 'Node';
 const Version = ({ value }) => {

package/index.js

@@ -3517,7 +3517,7 @@ function findFirstNode(items) {
     return;
 }
 function isDivider(item) {
-    return Object.keys(item).length === 1 && 'title' in item;
+    return Object.keys(item).length === 2 && 'title' in item && 'index' in item;
 }
 function isGroup(item) {
     return Object.keys(item).length >= 2 && 'title' in item && 'items' in item;
@@ -3529,13 +3529,33 @@ function isNode(item) {
     return 'title' in item && 'slug' in item && 'id' in item && 'meta' in item && 'type' in item;
 }
 function isExternalLink(item) {
-    return Object.keys(item).length === 2 && 'title' in item && 'url' in item;
+    return Object.keys(item).length === 3 && 'title' in item && 'url' in item && 'index' in item;
 }
 
-const ActiveIdContext = React__namespace.createContext(undefined);
+const ActiveItemContext = React__namespace.createContext({
+    activeId: undefined,
+    lastActiveIndex: '',
+    setLastActiveIndex: () => { },
+});
 const LinkContext = React__namespace.createContext(undefined);
 LinkContext.displayName = 'LinkContext';
 const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, isInResponsiveMode = false, onLinkClick, }) => {
+    const [lastActiveIndex, setLastActiveIndex] = React.useState('');
+    const value = React__namespace.useMemo(() => ({
+        lastActiveIndex,
+        setLastActiveIndex,
+        activeId,
+    }), [lastActiveIndex, activeId]);
+    const updateTocTree = React__namespace.useCallback((arr, parentId) => {
+        return arr.map((item, key) => {
+            let newItem = Object.assign(Object.assign({}, item), { index: parentId + key + '-' });
+            if (isGroup(item) || isNodeGroup(item)) {
+                newItem.items = updateTocTree(item.items, parentId + key + '-');
+            }
+            return newItem;
+        });
+    }, []);
+    const updatedTree = updateTocTree(tree, '');
     const container = React__namespace.useRef(null);
     const child = React__namespace.useRef(null);
     const firstRender = useFirstRender();
@@ -3555,18 +3575,30 @@ const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthO
     return (React__namespace.createElement(mosaic.Box, { ref: container, w: "full", bg: isInResponsiveMode ? 'canvas' : 'canvas-100', overflowY: "auto" },
         React__namespace.createElement(mosaic.Box, { ref: child, my: 3 },
             React__namespace.createElement(LinkContext.Provider, { value: Link },
-                React__namespace.createElement(ActiveIdContext.Provider, { value: activeId }, tree.map((item, key) => {
-                    if (isDivider(item)) {
-                        return React__namespace.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
-                    }
-                    return (React__namespace.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
-                }))))));
+                React__namespace.createElement(ActiveItemContext.Provider, { value: value },
+                    React__namespace.createElement(TOCContainer, { updatedTree: updatedTree }, updatedTree.map((item, key) => {
+                        if (isDivider(item)) {
+                            return React__namespace.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
+                        }
+                        return (React__namespace.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
+                    })))))));
 });
 TableOfContents.displayName = 'TableOfContents';
 const Divider = React__namespace.memo(({ item, isInResponsiveMode = false }) => {
     return (React__namespace.createElement(mosaic.Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
 });
 Divider.displayName = 'Divider';
+const TOCContainer = React__namespace.memo(({ children, updatedTree }) => {
+    const { setLastActiveIndex } = React__namespace.useContext(ActiveItemContext);
+    React__namespace.useEffect(() => {
+        const firstNode = findFirstNode(updatedTree);
+        if (firstNode) {
+            setLastActiveIndex(firstNode.index);
+        }
+    }, []);
+    return React__namespace.createElement(mosaic.Box, null, children);
+});
+TOCContainer.displayName = 'TOCContainer';
 const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
     if (isExternalLink(item)) {
         return (React__namespace.createElement(mosaic.Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
@@ -3584,9 +3616,24 @@ const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, i
 });
 GroupItem.displayName = 'GroupItem';
 const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
-    const activeId = React__namespace.useContext(ActiveIdContext);
+    const { activeId, lastActiveIndex } = React__namespace.useContext(ActiveItemContext);
     const [isOpen, setIsOpen] = React__namespace.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
-    const hasActive = !!activeId && hasActiveItem(item.items, activeId);
+    const isActiveGroup = React__namespace.useCallback((items, activeId, contextIndex) => {
+        return items.some(element => {
+            const hasSlugOrId = 'slug' in element || 'id' in element;
+            const hasItems = 'items' in element && Array.isArray(element.items);
+            if (!hasSlugOrId && !hasItems)
+                return false;
+            if (activeId &&
+                'index' in element &&
+                (element.slug === activeId || element.id === activeId) &&
+                element.index === contextIndex) {
+                return true;
+            }
+            return hasItems ? isActiveGroup(element.items, activeId, contextIndex) : false;
+        });
+    }, []);
+    const hasActive = isActiveGroup(item.items, activeId, lastActiveIndex);
     React__namespace.useEffect(() => {
         const openByDefault = isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault);
         if (isOpen !== openByDefault) {
@@ -3636,8 +3683,10 @@ const Item = React__namespace.memo(({ depth, isActive, id, title, meta, icon, is
 });
 Item.displayName = 'Item';
 const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
-    const activeId = React__namespace.useContext(ActiveIdContext);
-    const isActive = activeId === item.slug || activeId === item.id;
+    const { activeId, lastActiveIndex, setLastActiveIndex } = React__namespace.useContext(ActiveItemContext);
+    const { index } = item;
+    const isSlugMatched = activeId === item.slug || activeId === item.id;
+    const isActive = lastActiveIndex === index && isSlugMatched;
     const LinkComponent = React__namespace.useContext(LinkContext);
     const handleClick = (e) => {
         if (isActive) {
@@ -3645,6 +3694,7 @@ const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInRespo
             e.preventDefault();
         }
         else {
+            setLastActiveIndex(index);
             onLinkClick();
         }
         if (onClick) {
@@ -3652,7 +3702,7 @@ const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInRespo
         }
     };
     return (React__namespace.createElement(mosaic.Box, { as: LinkComponent, to: resolveRelativeLink(item.slug), display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
-        React__namespace.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, 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, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
+        React__namespace.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, 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, isInResponsiveMode: isInResponsiveMode, onClick: e => handleClick(e) })));
 });
 Node.displayName = 'Node';
 const Version = ({ value }) => {

package/index.mjs

@@ -3496,7 +3496,7 @@ function findFirstNode(items) {
     return;
 }
 function isDivider(item) {
-    return Object.keys(item).length === 1 && 'title' in item;
+    return Object.keys(item).length === 2 && 'title' in item && 'index' in item;
 }
 function isGroup(item) {
     return Object.keys(item).length >= 2 && 'title' in item && 'items' in item;
@@ -3508,13 +3508,33 @@ function isNode(item) {
     return 'title' in item && 'slug' in item && 'id' in item && 'meta' in item && 'type' in item;
 }
 function isExternalLink(item) {
-    return Object.keys(item).length === 2 && 'title' in item && 'url' in item;
+    return Object.keys(item).length === 3 && 'title' in item && 'url' in item && 'index' in item;
 }
 
-const ActiveIdContext = React.createContext(undefined);
+const ActiveItemContext = React.createContext({
+    activeId: undefined,
+    lastActiveIndex: '',
+    setLastActiveIndex: () => { },
+});
 const LinkContext = React.createContext(undefined);
 LinkContext.displayName = 'LinkContext';
 const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, isInResponsiveMode = false, onLinkClick, }) => {
+    const [lastActiveIndex, setLastActiveIndex] = useState('');
+    const value = React.useMemo(() => ({
+        lastActiveIndex,
+        setLastActiveIndex,
+        activeId,
+    }), [lastActiveIndex, activeId]);
+    const updateTocTree = React.useCallback((arr, parentId) => {
+        return arr.map((item, key) => {
+            let newItem = Object.assign(Object.assign({}, item), { index: parentId + key + '-' });
+            if (isGroup(item) || isNodeGroup(item)) {
+                newItem.items = updateTocTree(item.items, parentId + key + '-');
+            }
+            return newItem;
+        });
+    }, []);
+    const updatedTree = updateTocTree(tree, '');
     const container = React.useRef(null);
     const child = React.useRef(null);
     const firstRender = useFirstRender();
@@ -3534,18 +3554,30 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
     return (React.createElement(Box, { ref: container, w: "full", bg: isInResponsiveMode ? 'canvas' : 'canvas-100', overflowY: "auto" },
         React.createElement(Box, { ref: child, my: 3 },
             React.createElement(LinkContext.Provider, { value: Link },
-                React.createElement(ActiveIdContext.Provider, { value: activeId }, tree.map((item, key) => {
-                    if (isDivider(item)) {
-                        return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
-                    }
-                    return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
-                }))))));
+                React.createElement(ActiveItemContext.Provider, { value: value },
+                    React.createElement(TOCContainer, { updatedTree: updatedTree }, updatedTree.map((item, key) => {
+                        if (isDivider(item)) {
+                            return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
+                        }
+                        return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
+                    })))))));
 });
 TableOfContents.displayName = 'TableOfContents';
 const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
     return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
 });
 Divider.displayName = 'Divider';
+const TOCContainer = React.memo(({ children, updatedTree }) => {
+    const { setLastActiveIndex } = React.useContext(ActiveItemContext);
+    React.useEffect(() => {
+        const firstNode = findFirstNode(updatedTree);
+        if (firstNode) {
+            setLastActiveIndex(firstNode.index);
+        }
+    }, []);
+    return React.createElement(Box, null, children);
+});
+TOCContainer.displayName = 'TOCContainer';
 const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
     if (isExternalLink(item)) {
         return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
@@ -3563,9 +3595,24 @@ const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsi
 });
 GroupItem.displayName = 'GroupItem';
 const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
-    const activeId = React.useContext(ActiveIdContext);
+    const { activeId, lastActiveIndex } = React.useContext(ActiveItemContext);
     const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
-    const hasActive = !!activeId && hasActiveItem(item.items, activeId);
+    const isActiveGroup = React.useCallback((items, activeId, contextIndex) => {
+        return items.some(element => {
+            const hasSlugOrId = 'slug' in element || 'id' in element;
+            const hasItems = 'items' in element && Array.isArray(element.items);
+            if (!hasSlugOrId && !hasItems)
+                return false;
+            if (activeId &&
+                'index' in element &&
+                (element.slug === activeId || element.id === activeId) &&
+                element.index === contextIndex) {
+                return true;
+            }
+            return hasItems ? isActiveGroup(element.items, activeId, contextIndex) : false;
+        });
+    }, []);
+    const hasActive = isActiveGroup(item.items, activeId, lastActiveIndex);
     React.useEffect(() => {
         const openByDefault = isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault);
         if (isOpen !== openByDefault) {
@@ -3615,8 +3662,10 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiv
 });
 Item.displayName = 'Item';
 const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
-    const activeId = React.useContext(ActiveIdContext);
-    const isActive = activeId === item.slug || activeId === item.id;
+    const { activeId, lastActiveIndex, setLastActiveIndex } = React.useContext(ActiveItemContext);
+    const { index } = item;
+    const isSlugMatched = activeId === item.slug || activeId === item.id;
+    const isActive = lastActiveIndex === index && isSlugMatched;
     const LinkComponent = React.useContext(LinkContext);
     const handleClick = (e) => {
         if (isActive) {
@@ -3624,6 +3673,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
             e.preventDefault();
         }
         else {
+            setLastActiveIndex(index);
             onLinkClick();
         }
         if (onClick) {
@@ -3631,7 +3681,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
         }
     };
     return (React.createElement(Box, { as: LinkComponent, to: resolveRelativeLink(item.slug), display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
-        React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, 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, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
+        React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, 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, isInResponsiveMode: isInResponsiveMode, onClick: e => handleClick(e) })));
 });
 Node.displayName = 'Node';
 const Version = ({ value }) => {

package/package.json

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