@stoplight/elements-core 7.6.2 → 7.6.3

package/components/MosaicTableOfContents/utils.d.ts

@@ -1,6 +1,7 @@
-import { TableOfContentsDivider, TableOfContentsExternalLink, TableOfContentsGroup, TableOfContentsItem, TableOfContentsNode, TableOfContentsNodeGroup } from './types';
+import { TableOfContentsDivider, TableOfContentsExternalLink, TableOfContentsGroup, TableOfContentsGroupItem, TableOfContentsItem, TableOfContentsNode, TableOfContentsNodeGroup } from './types';
 export declare function getHtmlIdFromItemId(id: string): string;
 export declare function isGroupOpenByDefault(depth: number, item: TableOfContentsGroup | TableOfContentsNodeGroup, activeId?: string, maxDepthOpenByDefault?: number): boolean | "" | undefined;
+export declare function hasActiveItem(items: TableOfContentsGroupItem[], activeId: string): boolean;
 export declare function findFirstNode(items: TableOfContentsItem[]): TableOfContentsNode | TableOfContentsNodeGroup | void;
 export declare function isDivider(item: TableOfContentsItem): item is TableOfContentsDivider;
 export declare function isGroup(item: TableOfContentsItem): item is TableOfContentsGroup;

package/hooks/useFirstRender.d.ts

@@ -0,0 +1 @@
+export declare function useFirstRender(): boolean;

package/index.esm.js

@@ -2561,6 +2561,13 @@ const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
     return (React__default.createElement(HashLink, { to: href, title: title }, children));
 };
 
+function useFirstRender() {
+    const ref = React__default.useRef(true);
+    const firstRender = ref.current;
+    ref.current = false;
+    return firstRender;
+}
+
 const NODE_TYPE_TITLE_ICON = {
     http_service: faCloud,
 };
@@ -2638,16 +2645,20 @@ const LinkContext = React.createContext(undefined);
 const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, onLinkClick }) => {
     const container = React.useRef(null);
     const child = React.useRef(null);
+    const firstRender = useFirstRender();
     React.useEffect(() => {
-        const tocHasScrollbar = externalScrollbar ||
-            (container.current && child.current && container.current.offsetHeight < child.current.offsetHeight);
-        if (activeId && typeof window !== 'undefined' && tocHasScrollbar) {
-            const elem = window.document.getElementById(getHtmlIdFromItemId(activeId));
-            if (elem && 'scrollIntoView' in elem) {
-                elem.scrollIntoView({ block: 'center' });
+        setTimeout(() => {
+            const scrollPosition = firstRender ? 'center' : 'nearest';
+            const tocHasScrollbar = externalScrollbar ||
+                (container.current && child.current && container.current.offsetHeight < child.current.offsetHeight);
+            if (activeId && typeof window !== 'undefined' && tocHasScrollbar) {
+                const elem = window.document.getElementById(getHtmlIdFromItemId(activeId));
+                if (elem && 'scrollIntoView' in elem) {
+                    elem.scrollIntoView({ block: scrollPosition });
+                }
             }
-        }
-    }, []);
+        }, 0);
+    }, [activeId]);
     return (React.createElement(Box, { ref: container, w: "full", bg: "canvas-100", overflowY: "auto" },
         React.createElement(Box, { ref: child, my: 3 },
             React.createElement(LinkContext.Provider, { value: Link },
@@ -2679,12 +2690,18 @@ const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, onLinkClick
 const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
+    const hasActive = !!activeId && hasActiveItem(item.items, activeId);
     React.useEffect(() => {
         const openByDefault = isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault);
         if (isOpen !== openByDefault) {
             setIsOpen(openByDefault);
         }
     }, [depth, maxDepthOpenByDefault]);
+    React.useEffect(() => {
+        if (hasActive) {
+            setIsOpen(true);
+        }
+    }, [hasActive]);
     const handleClick = (e, forceOpen) => {
         setIsOpen(forceOpen ? true : !isOpen);
     };
@@ -2695,12 +2712,13 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = ()
                 e.preventDefault();
                 handleClick();
             } })));
+    const showAsActive = hasActive && !isOpen;
     let elem;
     if (isNodeGroup(item)) {
-        elem = React.createElement(Node, { depth: depth, item: item, meta: meta, onClick: handleClick, onLinkClick: onLinkClick });
+        elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick }));
     }
     else {
-        elem = React.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth });
+        elem = React.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive });
     }
     return (React.createElement(React.Fragment, null,
         elem,
@@ -2715,7 +2733,7 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, onClick }) =>
         React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate" }, title),
         React.createElement(Flex, { alignItems: "center", fontSize: "xs" }, meta)));
 });
-const Node = React.memo(({ item, depth, meta, onClick, onLinkClick = () => { } }) => {
+const Node = React.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React.useContext(LinkContext);
@@ -2732,7 +2750,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.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 })));
+        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, onClick: handleClick })));
 });
 const Version = ({ value }) => {
     return (React.createElement(Box, { mr: 2 },

package/index.js

@@ -2615,6 +2615,13 @@ const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
     return (React__default["default"].createElement(reactRouterHashLink.HashLink, { to: href, title: title }, children));
 };
 
+function useFirstRender() {
+    const ref = React__default["default"].useRef(true);
+    const firstRender = ref.current;
+    ref.current = false;
+    return firstRender;
+}
+
 const NODE_TYPE_TITLE_ICON = {
     http_service: faCloud,
 };
@@ -2692,16 +2699,20 @@ const LinkContext = React__namespace.createContext(undefined);
 const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, onLinkClick }) => {
     const container = React__namespace.useRef(null);
     const child = React__namespace.useRef(null);
+    const firstRender = useFirstRender();
     React__namespace.useEffect(() => {
-        const tocHasScrollbar = externalScrollbar ||
-            (container.current && child.current && container.current.offsetHeight < child.current.offsetHeight);
-        if (activeId && typeof window !== 'undefined' && tocHasScrollbar) {
-            const elem = window.document.getElementById(getHtmlIdFromItemId(activeId));
-            if (elem && 'scrollIntoView' in elem) {
-                elem.scrollIntoView({ block: 'center' });
+        setTimeout(() => {
+            const scrollPosition = firstRender ? 'center' : 'nearest';
+            const tocHasScrollbar = externalScrollbar ||
+                (container.current && child.current && container.current.offsetHeight < child.current.offsetHeight);
+            if (activeId && typeof window !== 'undefined' && tocHasScrollbar) {
+                const elem = window.document.getElementById(getHtmlIdFromItemId(activeId));
+                if (elem && 'scrollIntoView' in elem) {
+                    elem.scrollIntoView({ block: scrollPosition });
+                }
             }
-        }
-    }, []);
+        }, 0);
+    }, [activeId]);
     return (React__namespace.createElement(mosaic.Box, { ref: container, w: "full", bg: "canvas-100", overflowY: "auto" },
         React__namespace.createElement(mosaic.Box, { ref: child, my: 3 },
             React__namespace.createElement(LinkContext.Provider, { value: Link },
@@ -2733,12 +2744,18 @@ const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, o
 const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = () => { } }) => {
     const activeId = React__namespace.useContext(ActiveIdContext);
     const [isOpen, setIsOpen] = React__namespace.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
+    const hasActive = !!activeId && hasActiveItem(item.items, activeId);
     React__namespace.useEffect(() => {
         const openByDefault = isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault);
         if (isOpen !== openByDefault) {
             setIsOpen(openByDefault);
         }
     }, [depth, maxDepthOpenByDefault]);
+    React__namespace.useEffect(() => {
+        if (hasActive) {
+            setIsOpen(true);
+        }
+    }, [hasActive]);
     const handleClick = (e, forceOpen) => {
         setIsOpen(forceOpen ? true : !isOpen);
     };
@@ -2749,12 +2766,13 @@ const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, onLin
                 e.preventDefault();
                 handleClick();
             } })));
+    const showAsActive = hasActive && !isOpen;
     let elem;
     if (isNodeGroup(item)) {
-        elem = React__namespace.createElement(Node, { depth: depth, item: item, meta: meta, onClick: handleClick, onLinkClick: onLinkClick });
+        elem = (React__namespace.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick }));
     }
     else {
-        elem = React__namespace.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth });
+        elem = React__namespace.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive });
     }
     return (React__namespace.createElement(React__namespace.Fragment, null,
         elem,
@@ -2769,7 +2787,7 @@ const Item = React__namespace.memo(({ depth, isActive, id, title, meta, icon, on
         React__namespace.createElement(mosaic.Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate" }, title),
         React__namespace.createElement(mosaic.Flex, { alignItems: "center", fontSize: "xs" }, meta)));
 });
-const Node = React__namespace.memo(({ item, depth, meta, onClick, onLinkClick = () => { } }) => {
+const Node = React__namespace.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick = () => { } }) => {
     const activeId = React__namespace.useContext(ActiveIdContext);
     const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React__namespace.useContext(LinkContext);
@@ -2786,7 +2804,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.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 })));
+        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, onClick: handleClick })));
 });
 const Version = ({ value }) => {
     return (React__namespace.createElement(mosaic.Box, { mr: 2 },

package/index.mjs

@@ -2561,6 +2561,13 @@ const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
     return (React__default.createElement(HashLink, { to: href, title: title }, children));
 };
 
+function useFirstRender() {
+    const ref = React__default.useRef(true);
+    const firstRender = ref.current;
+    ref.current = false;
+    return firstRender;
+}
+
 const NODE_TYPE_TITLE_ICON = {
     http_service: faCloud,
 };
@@ -2638,16 +2645,20 @@ const LinkContext = React.createContext(undefined);
 const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, onLinkClick }) => {
     const container = React.useRef(null);
     const child = React.useRef(null);
+    const firstRender = useFirstRender();
     React.useEffect(() => {
-        const tocHasScrollbar = externalScrollbar ||
-            (container.current && child.current && container.current.offsetHeight < child.current.offsetHeight);
-        if (activeId && typeof window !== 'undefined' && tocHasScrollbar) {
-            const elem = window.document.getElementById(getHtmlIdFromItemId(activeId));
-            if (elem && 'scrollIntoView' in elem) {
-                elem.scrollIntoView({ block: 'center' });
+        setTimeout(() => {
+            const scrollPosition = firstRender ? 'center' : 'nearest';
+            const tocHasScrollbar = externalScrollbar ||
+                (container.current && child.current && container.current.offsetHeight < child.current.offsetHeight);
+            if (activeId && typeof window !== 'undefined' && tocHasScrollbar) {
+                const elem = window.document.getElementById(getHtmlIdFromItemId(activeId));
+                if (elem && 'scrollIntoView' in elem) {
+                    elem.scrollIntoView({ block: scrollPosition });
+                }
             }
-        }
-    }, []);
+        }, 0);
+    }, [activeId]);
     return (React.createElement(Box, { ref: container, w: "full", bg: "canvas-100", overflowY: "auto" },
         React.createElement(Box, { ref: child, my: 3 },
             React.createElement(LinkContext.Provider, { value: Link },
@@ -2679,12 +2690,18 @@ const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, onLinkClick
 const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
+    const hasActive = !!activeId && hasActiveItem(item.items, activeId);
     React.useEffect(() => {
         const openByDefault = isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault);
         if (isOpen !== openByDefault) {
             setIsOpen(openByDefault);
         }
     }, [depth, maxDepthOpenByDefault]);
+    React.useEffect(() => {
+        if (hasActive) {
+            setIsOpen(true);
+        }
+    }, [hasActive]);
     const handleClick = (e, forceOpen) => {
         setIsOpen(forceOpen ? true : !isOpen);
     };
@@ -2695,12 +2712,13 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = ()
                 e.preventDefault();
                 handleClick();
             } })));
+    const showAsActive = hasActive && !isOpen;
     let elem;
     if (isNodeGroup(item)) {
-        elem = React.createElement(Node, { depth: depth, item: item, meta: meta, onClick: handleClick, onLinkClick: onLinkClick });
+        elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick }));
     }
     else {
-        elem = React.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth });
+        elem = React.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive });
     }
     return (React.createElement(React.Fragment, null,
         elem,
@@ -2715,7 +2733,7 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, onClick }) =>
         React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate" }, title),
         React.createElement(Flex, { alignItems: "center", fontSize: "xs" }, meta)));
 });
-const Node = React.memo(({ item, depth, meta, onClick, onLinkClick = () => { } }) => {
+const Node = React.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React.useContext(LinkContext);
@@ -2732,7 +2750,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.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 })));
+        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, onClick: handleClick })));
 });
 const Version = ({ value }) => {
     return (React.createElement(Box, { mr: 2 },

package/package.json

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