@stoplight/elements-core 9.0.12-beta-0.1 → 9.0.13

package/{dist/index.mjs → index.mjs}

@@ -113,8 +113,6 @@ const isResolvedObjectProxy = (someObject) => {
     return !!someObject[originalObjectSymbol];
 };
 const getOriginalObject = (resolvedObject) => {
-    if (!resolvedObject)
-        return resolvedObject;
     const originalObject = resolvedObject[originalObjectSymbol] || resolvedObject;
     if (!originalObject) {
         return resolvedObject;
@@ -2740,416 +2738,13 @@ const PanelContent = ({ schemes }) => {
     })));
 };
 
-const TYPES = ['string', 'integer', 'boolean', 'any', 'number'];
-function resolvePointer(obj, pointer) {
-    const parts = pointer.replace(/^#\//, '').split('/');
-    return parts.reduce((acc, key) => acc && acc[key], obj);
-}
-function detectCircularPath(path) {
-    const ignored = ['properties', 'items'];
-    const parts = path.split('/').filter(part => !ignored.includes(part));
-    for (let i = 0; i < parts.length - 1; i++) {
-        const current = parts[i];
-        const rest = parts.slice(i + 1);
-        if (rest.includes(current)) {
-            return true;
-        }
-    }
-    return false;
-}
-function dereference(node, root, visited = new WeakSet(), depth = 0, maxDepth = 10) {
-    if (!node || typeof node !== 'object')
-        return node;
-    if (depth > maxDepth)
-        return node;
-    if (node.$ref || node['x-iata-$ref']) {
-        let refPath = node.$ref || node['x-iata-$ref'];
-        if (refPath.includes('#/%24defs')) {
-            refPath = refPath.replace('#/%24defs', '$defs');
-        }
-        else {
-            refPath = refPath.replace('__bundled__', 'definitions');
-        }
-        if (visited.has(node))
-            return { circular: true, $ref: refPath, title: node.title, type: 'any', description: node.description };
-        visited.add(node);
-        const target = resolvePointer(root, refPath);
-        if (!target)
-            return node;
-        const result = Object.assign({}, target);
-        if ('description' in node)
-            result.description = node.description;
-        if ('title' in node)
-            result.title = node.title;
-        return dereference(result, root, visited, depth + 1, maxDepth);
-    }
-    if (Array.isArray(node)) {
-        return node.map(item => dereference(item, root, visited, depth + 1, maxDepth));
-    }
-    const result = {};
-    for (const key in node) {
-        result[key] = dereference(node[key], root, visited, depth + 1, maxDepth);
-    }
-    return result;
-}
-const trimSlashes = (str) => {
-    return str.replace(/^\/|\/$/g, '');
-};
-function isPropertiesAllHidden(path, hideData) {
-    const current = trimSlashes(path);
-    const parts = current.split('/');
-    for (let i = parts.length; i >= 2; i--) {
-        if (parts[i - 1] === 'properties') {
-            const ancestorPropPath = parts.slice(0, i).join('/');
-            const block = hideData.find(h => trimSlashes(h.path) === ancestorPropPath && ancestorPropPath.endsWith('/properties'));
-            if (block && block.required === undefined) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
-function isRequiredOverride(path, hideData) {
-    const entry = hideData.find(h => trimSlashes(h.path) === trimSlashes(path));
-    return entry && typeof entry.required === 'boolean' ? entry.required : undefined;
-}
-function isPathHidden(path, hideData, complexData) {
-    const isComplex = checkIfIsComplex(path, complexData);
-    if (isComplex === null) {
-        return false;
-    }
-    else if (isComplex) {
-        const normalizedPath = trimSlashes(path);
-        const direct = hideData.find(h => trimSlashes(h.path) === normalizedPath);
-        if (direct && direct.required === undefined)
-            return true;
-        if (isPropertiesAllHidden(path, hideData))
-            return true;
-        for (const h of hideData) {
-            const hPath = trimSlashes(h.path);
-            if (h.required !== undefined)
-                continue;
-            if (normalizedPath.length > hPath.length &&
-                normalizedPath.startsWith(hPath) &&
-                (hPath.endsWith('/items') || (hPath.match(/\/items\/[^\/]+$/) && normalizedPath.startsWith(hPath + '/')))) {
-                return true;
-            }
-        }
-        return false;
-    }
-    else {
-        return !hideData.some(h => h.path === path || h.path.startsWith(path + '/'));
-    }
-}
-const checkIfIsComplex = (path, complexData) => {
-    let isComplex = null;
-    for (const complex of complexData) {
-        if (path.startsWith(complex.location)) {
-            isComplex = complex === null || complex === void 0 ? void 0 : complex.isComplex;
-            break;
-        }
-    }
-    return isComplex;
-};
-const LazySchemaTreePreviewer = ({ schema, root = schema, title, level = 1, path = '', hideData = [], complexData = [], parentRequired, propertyKey, _subType, }) => {
-    var _a, _b, _c, _d;
-    const [expanded, setExpanded] = useState(false);
-    const [selectedSchemaIndex, setSelectedSchemaIndex] = useState(0);
-    const [showSchemaDropdown, setShowSchemaDropdown] = useState(false);
-    const [isHoveringSelector, setIsHoveringSelector] = useState(false);
-    const isRoot = level === 1 && (title === undefined || path === '');
-    useEffect(() => {
-        setSelectedSchemaIndex(0);
-    }, [schema === null || schema === void 0 ? void 0 : schema.anyOf, schema === null || schema === void 0 ? void 0 : schema.oneOf]);
-    const thisNodeRequiredOverride = isRequiredOverride(path, hideData);
-    const shouldHideAllChildren = (isRoot && hideData.some(h => trimSlashes(h.path) === 'properties' && h.required === undefined)) ||
-        (!isRoot && isPropertiesAllHidden(path, hideData));
-    const hasExpandableChildren = useMemo(() => {
-        var _a;
-        if (shouldHideAllChildren)
-            return false;
-        if ((schema === null || schema === void 0 ? void 0 : schema.type) === 'object' && ((schema === null || schema === void 0 ? void 0 : schema.properties) || (schema === null || schema === void 0 ? void 0 : schema.allOf) || (schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf))) {
-            let props = schema === null || schema === void 0 ? void 0 : schema.properties;
-            if (schema === null || schema === void 0 ? void 0 : schema.allOf) {
-                schema === null || schema === void 0 ? void 0 : schema.allOf.forEach((item) => {
-                    props = Object.assign(Object.assign({}, props), item.properties);
-                });
-            }
-            if ((schema === null || schema === void 0 ? void 0 : schema.anyOf) && (schema === null || schema === void 0 ? void 0 : schema.anyOf.length) > 0) {
-                const selectedSchema = (schema === null || schema === void 0 ? void 0 : schema.anyOf[selectedSchemaIndex]) || (schema === null || schema === void 0 ? void 0 : schema.anyOf[0]);
-                props = Object.assign(Object.assign({}, props), selectedSchema.properties);
-            }
-            if ((schema === null || schema === void 0 ? void 0 : schema.oneOf) && (schema === null || schema === void 0 ? void 0 : schema.oneOf.length) > 0) {
-                const selectedSchema = (schema === null || schema === void 0 ? void 0 : schema.oneOf[selectedSchemaIndex]) || (schema === null || schema === void 0 ? void 0 : schema.oneOf[0]);
-                props = Object.assign(Object.assign({}, props), selectedSchema.properties);
-            }
-            if (props && Object.keys(props).length > 0) {
-                for (const [key] of Object.entries(props)) {
-                    const childPath = `${path}/properties/${key}`;
-                    const childRequiredOverride = isRequiredOverride(childPath, hideData);
-                    const shouldHideChild = isPathHidden(childPath, hideData, complexData) && childRequiredOverride === undefined;
-                    if (!shouldHideChild)
-                        return true;
-                }
-            }
-        }
-        if ((schema === null || schema === void 0 ? void 0 : schema.type) === 'array' &&
-            (schema === null || schema === void 0 ? void 0 : schema.items) &&
-            Object.keys(schema === null || schema === void 0 ? void 0 : schema.items).length > 0 &&
-            !((_a = schema === null || schema === void 0 ? void 0 : schema.items) === null || _a === void 0 ? void 0 : _a.circular)) {
-            const resolvedItems = dereference(schema === null || schema === void 0 ? void 0 : schema.items, root);
-            const itemsPath = `${path}/items`;
-            if (resolvedItems && resolvedItems.type === 'object' && resolvedItems.properties) {
-                for (const [key] of Object.entries(resolvedItems.properties)) {
-                    const childPath = `${itemsPath}/properties/${key}`;
-                    const childRequiredOverride = isRequiredOverride(childPath, hideData);
-                    const shouldHideChild = isPathHidden(childPath, hideData, complexData) && childRequiredOverride === undefined;
-                    if (!shouldHideChild)
-                        return true;
-                }
-            }
-            else if (resolvedItems &&
-                resolvedItems.type === 'array' &&
-                resolvedItems.items &&
-                resolvedItems.items.length > 0) {
-                const childPath = `${path}/items`;
-                const childRequiredOverride = isRequiredOverride(childPath, hideData);
-                const shouldHideChild = isPathHidden(childPath, hideData, complexData) && childRequiredOverride === undefined;
-                if (!shouldHideChild)
-                    return true;
-            }
-        }
-        return false;
-    }, [schema, path, hideData, complexData, shouldHideAllChildren, root, selectedSchemaIndex]);
-    const shouldHideNode = useMemo(() => {
-        if (isRoot)
-            return false;
-        if (isPathHidden(path, hideData, complexData) && thisNodeRequiredOverride === undefined)
-            return true;
-        return false;
-    }, [path, hideData, isRoot, thisNodeRequiredOverride, complexData]);
-    if (!schema || shouldHideNode) {
-        return null;
-    }
-    const displayTitle = level === 1 && (title === undefined || path === '') ? '' : (_a = title !== null && title !== void 0 ? title : schema === null || schema === void 0 ? void 0 : schema.title) !== null && _a !== void 0 ? _a : 'Node';
-    const handleToggle = () => {
-        const circular = detectCircularPath(path);
-        if (!circular) {
-            setExpanded(prev => !prev);
-        }
-    };
-    const renderChildren = () => {
-        var _a, _b, _c, _d;
-        if (shouldHideAllChildren)
-            return null;
-        if (!expanded && !isRoot)
-            return null;
-        const children = [];
-        if ((schema === null || schema === void 0 ? void 0 : schema.type) === 'object' && ((schema === null || schema === void 0 ? void 0 : schema.properties) || (schema === null || schema === void 0 ? void 0 : schema.allOf) || (schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf))) {
-            let props = schema === null || schema === void 0 ? void 0 : schema.properties;
-            if (schema === null || schema === void 0 ? void 0 : schema.allOf) {
-                schema === null || schema === void 0 ? void 0 : schema.allOf.forEach((item) => {
-                    props = Object.assign(Object.assign({}, props), item.properties);
-                });
-            }
-            if ((schema === null || schema === void 0 ? void 0 : schema.anyOf) && (schema === null || schema === void 0 ? void 0 : schema.anyOf.length) > 0) {
-                const selectedSchema = (schema === null || schema === void 0 ? void 0 : schema.anyOf[selectedSchemaIndex]) || (schema === null || schema === void 0 ? void 0 : schema.anyOf[0]);
-                props = Object.assign(Object.assign({}, props), selectedSchema.properties);
-            }
-            if ((schema === null || schema === void 0 ? void 0 : schema.oneOf) && (schema === null || schema === void 0 ? void 0 : schema.oneOf.length) > 0) {
-                const selectedSchema = (schema === null || schema === void 0 ? void 0 : schema.oneOf[selectedSchemaIndex]) || (schema === null || schema === void 0 ? void 0 : schema.oneOf[0]);
-                props = Object.assign(Object.assign({}, props), selectedSchema.properties);
-            }
-            for (const [key, child] of Object.entries(props || {})) {
-                const childPath = `${path}/properties/${key}`;
-                const childRequiredOverride = isRequiredOverride(childPath, hideData);
-                const shouldHideChild = isPathHidden(childPath, hideData, complexData) && childRequiredOverride === undefined;
-                const resolved = dereference(child, root);
-                if (!shouldHideChild) {
-                    children.push(React__default.createElement("li", { key: key },
-                        React__default.createElement(LazySchemaTreePreviewer, { schema: resolved, root: root, title: key, level: level + 1, path: childPath, hideData: hideData, complexData: complexData, parentRequired: schema === null || schema === void 0 ? void 0 : schema.required, propertyKey: key, _subType: (_a = resolved === null || resolved === void 0 ? void 0 : resolved.items) === null || _a === void 0 ? void 0 : _a.type })));
-                }
-            }
-        }
-        else if ((schema === null || schema === void 0 ? void 0 : schema.type) === 'array' &&
-            (schema === null || schema === void 0 ? void 0 : schema.items) &&
-            Object.keys(schema === null || schema === void 0 ? void 0 : schema.items).length > 0 &&
-            !((_b = schema === null || schema === void 0 ? void 0 : schema.items) === null || _b === void 0 ? void 0 : _b.circular)) {
-            const resolvedItems = dereference(schema === null || schema === void 0 ? void 0 : schema.items, root);
-            const itemsPath = `${path}/items`;
-            if (resolvedItems && resolvedItems.type === 'object' && resolvedItems.properties) {
-                for (const [key, child] of Object.entries(resolvedItems.properties)) {
-                    const childPath = `${itemsPath}/properties/${key}`;
-                    const childRequiredOverride = isRequiredOverride(childPath, hideData);
-                    const shouldHideChild = isPathHidden(childPath, hideData, complexData) && childRequiredOverride === undefined;
-                    const resolved = dereference(child, root);
-                    if (!shouldHideChild) {
-                        children.push(React__default.createElement("li", { key: key },
-                            React__default.createElement(LazySchemaTreePreviewer, { schema: resolved, root: root, title: key, level: level + 2, path: childPath, hideData: hideData, complexData: complexData, parentRequired: resolvedItems.required, propertyKey: key, _subType: (_c = resolvedItems === null || resolvedItems === void 0 ? void 0 : resolvedItems.items) === null || _c === void 0 ? void 0 : _c.type })));
-                    }
-                }
-            }
-            else if (resolvedItems && resolvedItems.type === 'array' && resolvedItems.items.length > 0) {
-                const childPath = `${path}/items`;
-                const childRequiredOverride = isRequiredOverride(childPath, hideData);
-                const shouldHideChild = isPathHidden(childPath, hideData, complexData) && childRequiredOverride === undefined;
-                if (!shouldHideChild) {
-                    children.push(React__default.createElement("li", { key: "items" },
-                        React__default.createElement(LazySchemaTreePreviewer, { schema: resolvedItems, root: root, title: "items", level: level + 1, path: childPath, hideData: hideData, complexData: complexData, parentRequired: schema === null || schema === void 0 ? void 0 : schema.required, propertyKey: "items", _subType: (_d = resolvedItems === null || resolvedItems === void 0 ? void 0 : resolvedItems.items) === null || _d === void 0 ? void 0 : _d.type })));
-                }
-            }
-        }
-        return children.length > 0 ? React__default.createElement("ul", { className: "ml-6 border-l border-gray-200 pl-2" }, children) : null;
-    };
-    const combinedSchemaSelector = () => {
-        var _a;
-        return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Box, { pos: "fixed", top: 0, left: 0, right: 0, bottom: 0, bg: "transparent", style: { zIndex: 999 }, onClick: () => setShowSchemaDropdown(false) }),
-            React__default.createElement(Box, { pos: "absolute", bg: "canvas", rounded: true, boxShadow: "md", style: {
-                    zIndex: 1000,
-                    top: '100%',
-                    left: 0,
-                    minWidth: '150px',
-                    maxWidth: '200px',
-                    marginTop: '2px',
-                    border: '1px solid rgba(0, 0, 0, 0.1)',
-                }, fontSize: "sm", onClick: (e) => e.stopPropagation() }, (_a = ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf))) === null || _a === void 0 ? void 0 : _a.map((schemaOption, index) => (React__default.createElement(Box, { key: index, px: 3, py: 2, cursor: "pointer", bg: selectedSchemaIndex === index ? 'primary-tint' : 'canvas', fontSize: "xs", display: "flex", alignItems: "center", style: {
-                    borderBottom: index < ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf)).length - 1 ? '1px solid rgba(0, 0, 0, 0.1)' : 'none',
-                    gap: '8px',
-                }, onMouseEnter: (e) => {
-                    if (selectedSchemaIndex !== index) {
-                        e.currentTarget.style.backgroundColor = 'var(--sl-color-canvas-tint)';
-                    }
-                }, onMouseLeave: (e) => {
-                    if (selectedSchemaIndex !== index) {
-                        e.currentTarget.style.backgroundColor = 'var(--sl-color-canvas)';
-                    }
-                }, onClick: () => {
-                    setSelectedSchemaIndex(index);
-                    setShowSchemaDropdown(false);
-                } },
-                React__default.createElement(Box, { flex: 1, color: "body" }, schemaOption.type || 'object'),
-                selectedSchemaIndex === index && (React__default.createElement(Box, { color: "primary", fontSize: "xs" }, "\u2713"))))))));
-    };
-    const renderMinEnums = (schema) => {
-        if (!schema || typeof schema !== 'object')
-            return null;
-        const boxStyle = {
-            background: 'rgba(245, 247, 250, 0.5)',
-            border: '1px solid #a0aec0',
-            borderRadius: '4px',
-            padding: '0px 2px',
-            display: 'inline-block',
-            overflowWrap: 'break-word',
-            textAlign: 'left',
-            maxWidth: 'fit-content',
-            maxHeight: 'fit-content',
-        };
-        if ('minItems' in schema) {
-            const schemaWithMinItems = schema;
-            if (typeof schemaWithMinItems.minItems === 'number') {
-                return (React__default.createElement(Box, { className: "sl-text-muted", fontFamily: "ui", fontWeight: "normal", mr: 2, style: boxStyle }, `>=${schemaWithMinItems.minItems} items`));
-            }
-        }
-        if ('enum' in schema && Array.isArray(schema.enum)) {
-            return (React__default.createElement("div", null,
-                "Allowed values:",
-                ' ',
-                schema.enum.map((val, idx) => (React__default.createElement(Box, { key: idx, className: "sl-text-muted", fontFamily: "ui", fontWeight: "normal", mr: 2, style: boxStyle }, val)))));
-        }
-        return null;
-    };
-    const isRequired = parentRequired && propertyKey && parentRequired.includes(propertyKey);
-    let showRequiredLabel = false;
-    const hideDataEntry = hideData.find(hideEntry => trimSlashes(hideEntry.path) === trimSlashes(path));
-    if ((hideDataEntry === null || hideDataEntry === void 0 ? void 0 : hideDataEntry.required) === true || ((hideDataEntry === null || hideDataEntry === void 0 ? void 0 : hideDataEntry.required) === undefined && isRequired)) {
-        showRequiredLabel = true;
-    }
-    if (schema === null || schema === void 0 ? void 0 : schema.$ref) {
-        schema = dereference(schema, root);
-    }
-    return (React__default.createElement("div", { className: "mb-1" },
-        React__default.createElement(Flex, { maxW: "full", pl: 3, py: 2, "data-test": "schema-row", pos: "relative" },
-            React__default.createElement(VStack, { spacing: 1, maxW: "full", className: "w-full" },
-                React__default.createElement(Flex, { onClick: !isRoot ? handleToggle : undefined, className: `w-full ${isRoot ? '' : 'cursor-pointer'}` },
-                    !isRoot ? (React__default.createElement(Box, { mr: 2, className: "sl-font-mono sl-font-semibold sl-mr-2" },
-                        hasExpandableChildren &&
-                            !TYPES.includes(schema === null || schema === void 0 ? void 0 : schema.type) &&
-                            !detectCircularPath(path) &&
-                            !((_b = schema === null || schema === void 0 ? void 0 : schema.items) === null || _b === void 0 ? void 0 : _b.circular) &&
-                            !(schema === null || schema === void 0 ? void 0 : schema.circular) ? (React__default.createElement("i", { role: "img", "aria-hidden": "true", className: `sl-icon fal ${expanded ? 'fa-chevron-down' : 'fa-chevron-right'} fa-fw fa-sm` })) : (React__default.createElement("span", { className: "sl-icon fal fa-fw fa-sm", "aria-hidden": "true" })),
-                        ' ' + displayTitle)) : null,
-                    !isRoot ? (React__default.createElement(Box, { mr: 2, pos: "relative" },
-                        React__default.createElement(Box, { display: "inline-flex", alignItems: "center", onMouseEnter: () => {
-                                if ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf)) {
-                                    setIsHoveringSelector(true);
-                                }
-                            }, onMouseLeave: () => {
-                                if (!showSchemaDropdown) {
-                                    setIsHoveringSelector(false);
-                                }
-                            }, onClick: (e) => {
-                                if ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf)) {
-                                    e.stopPropagation();
-                                    setShowSchemaDropdown(prev => !prev);
-                                }
-                            }, style: {
-                                cursor: (schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf) ? 'pointer' : 'default',
-                            } },
-                            React__default.createElement("span", { className: "sl-truncate sl-text-muted" },
-                                (() => {
-                                    let typeDisplay = (schema === null || schema === void 0 ? void 0 : schema.type) === 'object' && (schema === null || schema === void 0 ? void 0 : schema.title) ? schema === null || schema === void 0 ? void 0 : schema.title : (schema === null || schema === void 0 ? void 0 : schema.type) || (root === null || root === void 0 ? void 0 : root.title);
-                                    if ((schema === null || schema === void 0 ? void 0 : schema.anyOf) && (schema === null || schema === void 0 ? void 0 : schema.anyOf.length) > 0) {
-                                        return `any of ${typeDisplay}`;
-                                    }
-                                    else if ((schema === null || schema === void 0 ? void 0 : schema.oneOf) && (schema === null || schema === void 0 ? void 0 : schema.oneOf.length) > 0) {
-                                        return `one of ${typeDisplay}`;
-                                    }
-                                    return typeDisplay;
-                                })(),
-                                (schema === null || schema === void 0 ? void 0 : schema.items) && ((_c = schema === null || schema === void 0 ? void 0 : schema.items) === null || _c === void 0 ? void 0 : _c.title) !== undefined ? ` [${(_d = schema === null || schema === void 0 ? void 0 : schema.items) === null || _d === void 0 ? void 0 : _d.title}] ` : null),
-                            ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf)) && (React__default.createElement(Box, { display: "inline-flex", alignItems: "center", ml: 1, style: {
-                                    opacity: isHoveringSelector ? 1 : 0.6,
-                                    transition: 'opacity 0.2s',
-                                } },
-                                React__default.createElement("i", { className: "sl-icon fas fa-chevron-down", style: {
-                                        fontSize: '10px',
-                                        opacity: 0.6,
-                                    } })))),
-                        React__default.createElement("span", { className: "text-gray-500" }, (schema === null || schema === void 0 ? void 0 : schema.format) !== undefined ? `<${schema === null || schema === void 0 ? void 0 : schema.format}>` : null),
-                        ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf)) && showSchemaDropdown && combinedSchemaSelector())) : null),
-                React__default.createElement(Flex, { pl: 1, w: "full", align: "start", direction: "col", style: { overflow: 'visible', paddingLeft: '20px' } },
-                    (schema === null || schema === void 0 ? void 0 : schema.description) && (React__default.createElement(Box, { fontFamily: "ui", fontWeight: "light" },
-                        React__default.createElement("span", { className: "sl-prose sl-markdown-viewer", style: { fontSize: '12px' } }, schema === null || schema === void 0 ? void 0 : schema.description))),
-                    !isRoot && (schema === null || schema === void 0 ? void 0 : schema.examples) !== undefined && (React__default.createElement(Flex, { align: "center", mb: 1, style: { flexWrap: 'wrap' } },
-                        React__default.createElement("span", { className: "text-gray-500", style: { marginRight: 8, flexShrink: 0 } }, "Example"),
-                        React__default.createElement(Box, { className: "sl-text-muted", fontFamily: "ui", fontWeight: "normal", mr: 2, style: {
-                                background: 'rgba(245, 247, 250, 0.5)',
-                                border: '1px solid #a0aec0',
-                                borderRadius: '4px',
-                                padding: '4px 8px',
-                                display: 'inline-block',
-                                overflowWrap: 'break-word',
-                                textAlign: 'left',
-                                maxWidth: '530px',
-                            } }, JSON.stringify(schema === null || schema === void 0 ? void 0 : schema.examples))))),
-                React__default.createElement(Flex, { pl: 1, w: "full", align: "start", direction: "col", style: { overflow: 'visible', paddingLeft: '20px' } }, schema &&
-                    typeof schema === 'object' &&
-                    ('minItems' in schema || 'enum' in schema) &&
-                    renderMinEnums(schema))),
-            !isRoot && (React__default.createElement("label", { className: "inline-flex items-top ml-2" },
-                React__default.createElement(Box, { mr: 2, fontFamily: "ui", fontWeight: "normal" }, showRequiredLabel && (React__default.createElement("div", { className: "sl-ml-2 sl-text-warning" },
-                    React__default.createElement("span", { style: { marginLeft: '10px' } }, "required"))))))),
-        renderChildren()));
-};
-
 const isBodyEmpty = (body) => {
     if (!body)
         return true;
     const { contents = [], description } = body;
     return contents.length === 0 && !(description === null || description === void 0 ? void 0 : description.trim());
 };
-const Body = ({ body, onChange, isHttpWebhookOperation = false, disableProps }) => {
+const Body = ({ body, onChange, isHttpWebhookOperation = false }) => {
     var _a;
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React.useState(0);
@@ -3162,36 +2757,13 @@ const Body = ({ body, onChange, isHttpWebhookOperation = false, disableProps })
     const { contents = [], description } = body;
     const schema = (_a = contents[chosenContent]) === null || _a === void 0 ? void 0 : _a.schema;
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: body.id, attr: 'description' });
-    const getMaskProperties = () => {
-        const disablePropsConfig = disableProps || [];
-        const absolutePathsToHide = [];
-        disablePropsConfig.forEach(configEntry => {
-            const { location, paths, isComplex } = configEntry;
-            if (paths.length === 0 && !isComplex) {
-                absolutePathsToHide.push({ path: location });
-            }
-            else {
-                paths.forEach((item) => {
-                    const fullPath = location === '#' ? item === null || item === void 0 ? void 0 : item.path : `${location}/${item.path}`;
-                    let object = { path: fullPath };
-                    if (item.hasOwnProperty('required')) {
-                        object = Object.assign(Object.assign({}, object), { required: item === null || item === void 0 ? void 0 : item.required });
-                    }
-                    absolutePathsToHide.push(object);
-                });
-            }
-        });
-        return absolutePathsToHide;
-    };
-    const shouldUseLazySchema = disableProps === null || disableProps === void 0 ? void 0 : disableProps.some(entry => entry.isComplex === true);
-    console.log('!!!!! shouldUseLazySchema body!!!!', shouldUseLazySchema);
     return (React.createElement(VStack, { spacing: 6 },
         React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
             React.createElement(Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
-        schema && shouldUseLazySchema ? (React.createElement(LazySchemaTreePreviewer, { schema: schema, hideData: getMaskProperties(), complexData: disableProps })) : (isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: isHttpWebhookOperation ? 'standalone' : 'write', renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon })))));
+        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: isHttpWebhookOperation ? 'standalone' : 'write', renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -3258,7 +2830,7 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
     return schema;
 };
 
-const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, isHttpWebhookOperation = false, disableProps, }) => {
+const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, isHttpWebhookOperation = false, }) => {
     if (!request || typeof request !== 'object')
         return null;
     const bodyIsEmpty = isBodyEmpty(body);
@@ -3286,7 +2858,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
         cookieParams.length > 0 && (React.createElement(VStack, { spacing: 5 },
             React.createElement(SectionSubtitle, { title: "Cookies", id: "request-cookies" }),
             React.createElement(Parameters, { parameterType: "cookie", parameters: cookieParams }))),
-        body && (React.createElement(Body, { onChange: onChange, body: body, isHttpWebhookOperation: isHttpWebhookOperation, disableProps: disableProps }))));
+        body && React.createElement(Body, { onChange: onChange, body: body, isHttpWebhookOperation: isHttpWebhookOperation })));
 };
 Request.displayName = 'HttpOperation.Request';
 const schemeExpandedState = atomWithStorage('HttpOperation_security_expanded', {});
@@ -3317,7 +2889,7 @@ const OptionalMessage$1 = () => {
     return React.createElement(Callout, { appearance: "outline" }, OptionalSecurityMessage);
 };
 
-const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, disableProps, }) => {
+const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
     var _a, _b;
     const responses = sortBy(uniqBy(unsortedResponses, r => r.code), r => r.code);
     const [activeResponseId, setActiveResponseId] = React.useState((_b = (_a = responses[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '');
@@ -3350,12 +2922,11 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
     const tabResponses = (React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React.createElement(VStack, { spacing: 8, as: Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
         React.createElement(SectionTitle, { title: "Responses", isCompact: isCompact }, isCompact ? compactResponses : tabResponses),
-        isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange, disableProps: disableProps, statusCode: activeResponseId })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
-            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange, disableProps: disableProps, statusCode: response.code }))))))));
+        isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
+            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
 };
 Responses.displayName = 'HttpOperation.Responses';
-const Response = ({ response, onMediaTypeChange, disableProps, statusCode }) => {
-    var _a, _b;
+const Response = ({ response, onMediaTypeChange }) => {
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React.useState(0);
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
@@ -3366,29 +2937,6 @@ const Response = ({ response, onMediaTypeChange, disableProps, statusCode }) =>
         responseContent && (onMediaTypeChange === null || onMediaTypeChange === void 0 ? void 0 : onMediaTypeChange(responseContent.mediaType));
     }, [responseContent]);
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: response.id, attr: 'description' });
-    const getMaskProperties = () => {
-        if (!disableProps || !statusCode)
-            return [];
-        const configEntries = disableProps[statusCode] || [];
-        const absolutePathsToHide = [];
-        configEntries.forEach(({ location, paths, isComplex }) => {
-            if (paths.length === 0 && !isComplex) {
-                absolutePathsToHide.push({ path: location });
-            }
-            else {
-                paths.forEach((item) => {
-                    const fullPath = location === '#' ? item === null || item === void 0 ? void 0 : item.path : `${location}/${item.path}`;
-                    let object = { path: fullPath };
-                    if (item.hasOwnProperty('required')) {
-                        object = Object.assign(Object.assign({}, object), { required: item === null || item === void 0 ? void 0 : item.required });
-                    }
-                    absolutePathsToHide.push(object);
-                });
-            }
-        });
-        return absolutePathsToHide;
-    };
-    const shouldUseLazySchema = (_b = (statusCode && ((_a = disableProps === null || disableProps === void 0 ? void 0 : disableProps[statusCode]) === null || _a === void 0 ? void 0 : _a.some(entry => entry.isComplex)))) !== null && _b !== void 0 ? _b : false;
     return (React.createElement(VStack, { spacing: 8, pt: 8 },
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
@@ -3400,7 +2948,7 @@ const Response = ({ response, onMediaTypeChange, disableProps, statusCode }) =>
             React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React.createElement(Flex, { flex: 1, justify: "end" },
                     React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && shouldUseLazySchema ? (React.createElement(LazySchemaTreePreviewer, { schema: schema, path: "", hideData: getMaskProperties(), complexData: disableProps && statusCode ? disableProps[statusCode] : [] })) : (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))))));
+            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -3449,7 +2997,7 @@ const Callback = ({ data, isCompact }) => {
 };
 Callbacks.displayName = 'HttpOperation.Callback';
 
-const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy, disableProps }) => {
+const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
     var _a;
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
@@ -3480,11 +3028,11 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(NodeVendorExtensions, { data: data }),
-        React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo, isHttpWebhookOperation: isHttpWebhookOperation(data), disableProps: disableProps === null || disableProps === void 0 ? void 0 : disableProps.request }),
-        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact, disableProps: disableProps === null || disableProps === void 0 ? void 0 : disableProps.response })),
+        React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo, isHttpWebhookOperation: isHttpWebhookOperation(data) }),
+        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
         ((_a = data.callbacks) === null || _a === void 0 ? void 0 : _a.length) ? React.createElement(Callbacks, { callbacks: data.callbacks, isCompact: isCompact }) : null,
         isCompact && tryItPanel));
-    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !(disableProps === null || disableProps === void 0 ? void 0 : disableProps.hideOperationTryIt) && !isCompact && tryItPanel }));
+    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
 const HttpOperation = withErrorBoundary(HttpOperationComponent, {
@@ -3735,7 +3283,7 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
-const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, disableProps, }) => {
+const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a, _b;
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
@@ -3758,40 +3306,14 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps))));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React.createElement(ModelExamples, { data: data, isCollapsible: isCompact });
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: 'description' });
-    const getMaskProperties = () => {
-        const disablePropsConfig = disableProps === null || disableProps === void 0 ? void 0 : disableProps.models;
-        const absolutePathsToHide = [];
-        if (disableProps === null || disableProps === void 0 ? void 0 : disableProps.models) {
-            disablePropsConfig.forEach((configEntry) => {
-                const { location, paths, isComplex } = configEntry;
-                if (paths.length === 0 && !isComplex) {
-                    absolutePathsToHide.push({ path: location });
-                }
-                else {
-                    paths.forEach((item) => {
-                        const fullPath = location === '#' ? item === null || item === void 0 ? void 0 : item.path : `${location}/${item.path}`;
-                        let object = { path: fullPath };
-                        if (item.hasOwnProperty('required')) {
-                            object = Object.assign(Object.assign({}, object), { required: item === null || item === void 0 ? void 0 : item.required });
-                        }
-                        absolutePathsToHide.push(object);
-                    });
-                }
-            });
-        }
-        return absolutePathsToHide;
-    };
-    const shouldUseLazySchema = disableProps && (disableProps === null || disableProps === void 0 ? void 0 : disableProps.models)
-        ? disableProps.models.some((entry) => entry.isComplex === true)
-        : false;
     const description = (React.createElement(VStack, { spacing: 10 },
         data.description && data.type === 'object' && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(NodeVendorExtensions, { data: data }),
-        !(disableProps === null || disableProps === void 0 ? void 0 : disableProps.hideModelTryIt) && isCompact && modelExamples,
-        data && shouldUseLazySchema ? (React.createElement(LazySchemaTreePreviewer, { schema: data, hideData: getMaskProperties(), complexData: disableProps === null || disableProps === void 0 ? void 0 : disableProps.models })) : (React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon, skipTopLevelDescription: true }))));
-    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('Model', className), header: header, left: description, right: !(disableProps === null || disableProps === void 0 ? void 0 : disableProps.hideModelTryIt) && !isCompact && modelExamples }));
+        isCompact && modelExamples,
+        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon, skipTopLevelDescription: true })));
+    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
 const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
     var _a;
@@ -3813,41 +3335,30 @@ const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
     var _b;
-    var { nodeType, nodeData, disableProps, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged, renderExtensionAddon } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "disableProps", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged", "renderExtensionAddon"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged, renderExtensionAddon } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged", "renderExtensionAddon"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
         return null;
     }
-    let elem = React.createElement(ParsedDocs, Object.assign({ node: parsedNode, disableProps: disableProps }, commonProps));
+    let elem = React.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
     if (useNodeForRefResolving) {
         elem = (React.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver, maxRefDepth: maxRefDepth }, elem));
     }
     return (React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }, elem));
 });
-const getTryItVisibility = (disableProps) => {
-    var _a, _b, _c, _d;
-    if (!disableProps)
-        return { hideOperationTryIt: false, hideModelTryIt: false };
-    const requestHasComplex = (_b = (_a = disableProps.request) === null || _a === void 0 ? void 0 : _a.some(item => item.isComplex)) !== null && _b !== void 0 ? _b : false;
-    const responseHasComplex = Object.values(disableProps.response || {}).some(arr => arr.some(item => item.isComplex));
-    const hideOperationTryIt = requestHasComplex || responseHasComplex;
-    const hideModelTryIt = (_d = (_c = disableProps.models) === null || _c === void 0 ? void 0 : _c.some(item => item.isComplex)) !== null && _d !== void 0 ? _d : false;
-    return { hideOperationTryIt, hideModelTryIt };
-};
 const ParsedDocs = (_a) => {
-    var { node, nodeUnsupported, disableProps } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported", "disableProps"]);
-    const { hideOperationTryIt, hideModelTryIt } = getTryItVisibility(disableProps);
+    var { node, nodeUnsupported } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported"]);
     switch (node.type) {
         case 'article':
             return React.createElement(Article, Object.assign({ data: node.data }, commonProps));
         case 'http_operation':
         case 'http_webhook':
-            return React.createElement(HttpOperation, Object.assign({ data: node.data, disableProps: Object.assign(Object.assign({}, disableProps), { hideOperationTryIt }) }, commonProps));
+            return React.createElement(HttpOperation, Object.assign({ data: node.data }, commonProps));
         case 'http_service':
             return React.createElement(HttpService, Object.assign({ data: node.data }, commonProps));
         case 'model':
-            return React.createElement(Model, Object.assign({ data: node.data, disableProps: Object.assign(Object.assign({}, disableProps), { hideModelTryIt }) }, commonProps));
+            return React.createElement(Model, Object.assign({ data: node.data }, commonProps));
         default:
             nodeUnsupported === null || nodeUnsupported === void 0 ? void 0 : nodeUnsupported('invalidType');
             return null;
@@ -3985,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;
@@ -3997,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();
@@ -4023,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" },
@@ -4052,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) {
@@ -4104,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) {
@@ -4113,6 +3673,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
             e.preventDefault();
         }
         else {
+            setLastActiveIndex(index);
             onLinkClick();
         }
         if (onClick) {
@@ -4120,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 }) => {