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

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/components/TryIt/Parameters/parameter-utils.d.ts

@@ -4,12 +4,12 @@ import { JSONSchema7, JSONSchema7Definition } from 'json-schema';
 export declare type ParameterSpec = Pick<IHttpParam, 'name' | 'schema' | 'required'> & {
     examples?: (Omit<INodeExample, 'id'> | Omit<INodeExternalExample, 'id'>)[];
 };
-export declare function parameterOptions(parameter: ParameterSpec): ({
+export declare function encodeSafeSelectorValue(value: string | number): string | number;
+export declare function decodeSafeSelectorValue(value: string | number): string | number;
+export declare function parameterOptions(parameter: ParameterSpec): {
     value: string | number;
-} | {
     label: string;
-    value: string;
-})[] | null;
+}[] | null;
 export declare const selectExampleOption: {
     value: string;
     label: string;

package/index.esm.js

@@ -1340,8 +1340,50 @@ const booleanOptions = [
     { label: 'False', value: 'false' },
     { label: 'True', value: 'true' },
 ];
+function encodeSafeSelectorValue(value) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    const hasSpecialChars = /["'\[\]\\(){}]/.test(value);
+    if (!hasSpecialChars) {
+        return value;
+    }
+    try {
+        return 'b64:' + btoa(value);
+    }
+    catch (e) {
+        return 'enc:' + encodeURIComponent(value);
+    }
+}
+function decodeSafeSelectorValue(value) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (value.startsWith('b64:')) {
+        try {
+            return atob(value.substring(4));
+        }
+        catch (e) {
+            return value;
+        }
+    }
+    if (value.startsWith('enc:')) {
+        try {
+            return decodeURIComponent(value.substring(4));
+        }
+        catch (e) {
+            return value;
+        }
+    }
+    return value;
+}
 function enumOptions(enumValues, required) {
-    const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
+    const options = map(enumValues, v => {
+        var _a;
+        const stringValue = typeof v === 'object' && v !== null ? (_a = safeStringify(v)) !== null && _a !== void 0 ? _a : String(v) : typeof v === 'number' ? v : String(v);
+        const safeValue = encodeSafeSelectorValue(stringValue);
+        return { value: safeValue, label: String(stringValue) };
+    });
     return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 function parameterOptions(parameter) {
@@ -1371,15 +1413,16 @@ function parameterSupportsFileUpload(parameter) {
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
 function stringifyValue(value) {
-    return typeof value === 'object' ? JSON.stringify(value) : escapeQuotes(String(value));
+    var _a;
+    if (typeof value === 'object' && value !== null) {
+        return (_a = safeStringify(value)) !== null && _a !== void 0 ? _a : String(value);
+    }
+    return String(value);
 }
 function exampleValue(example) {
     const value = 'value' in example ? example.value : example.externalValue;
     return stringifyValue(value);
 }
-function escapeQuotes(value) {
-    return value.replace(/"/g, '\\"');
-}
 function getPlaceholderForParameter(parameter) {
     var _a, _b;
     const { value: parameterValue, isDefault } = getValueForParameter(parameter);
@@ -1405,14 +1448,14 @@ const getValueForParameter = (parameter) => {
     if (typeof defaultValue !== 'undefined') {
         return { value: stringifyValue(defaultValue), isDefault: true };
     }
-    const examples = (_a = parameter.examples) !== null && _a !== void 0 ? _a : [];
-    if (examples.length > 0) {
-        return { value: exampleValue(examples[0]) };
-    }
-    const enums = (_c = (_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.enum) !== null && _c !== void 0 ? _c : [];
+    const enums = (_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.enum) !== null && _b !== void 0 ? _b : [];
     if (enums.length > 0) {
         return { value: stringifyValue(enums[0]) };
     }
+    const examples = (_c = parameter.examples) !== null && _c !== void 0 ? _c : [];
+    if (examples.length > 0) {
+        return { value: exampleValue(examples[0]) };
+    }
     return { value: '' };
 };
 const getInitialValueForParameter = (parameter) => {
@@ -1468,11 +1511,19 @@ const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptio
     const examples = exampleOptions(parameter);
     const selectedExample = (_a = examples === null || examples === void 0 ? void 0 : examples.find(e => e.value === value)) !== null && _a !== void 0 ? _a : selectExampleOption;
     const parameterDisplayName = `${parameter.name}${parameter.required ? '*' : ''}`;
+    const encodedValue = React.useMemo(() => {
+        if (!value || !parameterValueOptions)
+            return value || '';
+        const matchingOption = parameterValueOptions.find(opt => {
+            return String(decodeSafeSelectorValue(opt.value)) === value;
+        });
+        return matchingOption ? String(matchingOption.value) : value;
+    }, [value, parameterValueOptions]);
     const requiredButEmpty = validate && parameter.required && !value;
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, parameterDisplayName),
         React.createElement(Text, { mx: 3 }, ":"),
-        React.createElement("div", null, parameterValueOptions ? (React.createElement(Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: value || '', onChange: onChange, placeholder: getPlaceholderForSelectedParameter(parameter) })) : (React.createElement(Flex, { flex: 1 },
+        React.createElement("div", null, parameterValueOptions ? (React.createElement(Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: encodedValue, onChange: val => onChange && onChange(String(decodeSafeSelectorValue(val))), placeholder: getPlaceholderForSelectedParameter(parameter) })) : (React.createElement(Flex, { flex: 1 },
             React.createElement(Input, { id: inputId, "aria-label": parameter.name, appearance: requiredButEmpty ? 'default' : 'minimal', flex: 1, placeholder: getPlaceholderForParameter(parameter), type: ((_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.type) === 'number' ? 'number' : 'text', required: true, intent: requiredButEmpty ? 'danger' : 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }),
             examples && (React.createElement(Select, { "aria-label": `${parameter.name}-select`, flex: 1, value: selectedExample.value, options: examples, onChange: onChange }))))),
         canChangeOptional && !parameter.required && (React.createElement(React.Fragment, null,
@@ -2327,10 +2378,17 @@ ServersDropdown.displayName = 'ServersDropdown';
 
 const VariableEditor = ({ variable, value, onChange }) => {
     const inputId = useUniqueId(`id_${variable.name}_`);
+    const encodedOptions = React.useMemo(() => (variable.enum ? variable.enum.map(s => ({ value: encodeSafeSelectorValue(s), label: String(s) })) : []), [variable.enum]);
+    const encodedValue = React.useMemo(() => {
+        if (!value || !variable.enum)
+            return value || variable.default;
+        const matchingOption = encodedOptions.find(opt => decodeSafeSelectorValue(String(opt.value)) === value);
+        return matchingOption ? String(matchingOption.value) : value;
+    }, [value, variable.enum, variable.default, encodedOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, variable.name),
         React.createElement(Text, { mx: 3 }, ":"),
-        React.createElement("div", null, variable.enum ? (React.createElement(Select, { flex: 1, "aria-label": variable.name, options: variable.enum.map(s => ({ value: s })), value: value || variable.default, onChange: onChange })) : (React.createElement(Flex, { flex: 1 },
+        React.createElement("div", null, variable.enum ? (React.createElement(Select, { flex: 1, "aria-label": variable.name, options: encodedOptions, value: encodedValue, onChange: val => onChange && onChange(decodeSafeSelectorValue(String(val))) })) : (React.createElement(Flex, { flex: 1 },
             React.createElement(Input, { id: inputId, "aria-label": variable.name, appearance: 'minimal', flex: 1, placeholder: variable.default, type: "text", required: true, intent: 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }))))));
 };
 
@@ -3496,7 +3554,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 +3566,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 +3612,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 +3653,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 +3720,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 +3731,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
             e.preventDefault();
         }
         else {
+            setLastActiveIndex(index);
             onLinkClick();
         }
         if (onClick) {
@@ -3631,7 +3739,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

@@ -1361,8 +1361,50 @@ const booleanOptions = [
     { label: 'False', value: 'false' },
     { label: 'True', value: 'true' },
 ];
+function encodeSafeSelectorValue(value) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    const hasSpecialChars = /["'\[\]\\(){}]/.test(value);
+    if (!hasSpecialChars) {
+        return value;
+    }
+    try {
+        return 'b64:' + btoa(value);
+    }
+    catch (e) {
+        return 'enc:' + encodeURIComponent(value);
+    }
+}
+function decodeSafeSelectorValue(value) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (value.startsWith('b64:')) {
+        try {
+            return atob(value.substring(4));
+        }
+        catch (e) {
+            return value;
+        }
+    }
+    if (value.startsWith('enc:')) {
+        try {
+            return decodeURIComponent(value.substring(4));
+        }
+        catch (e) {
+            return value;
+        }
+    }
+    return value;
+}
 function enumOptions(enumValues, required) {
-    const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
+    const options = map(enumValues, v => {
+        var _a;
+        const stringValue = typeof v === 'object' && v !== null ? (_a = json.safeStringify(v)) !== null && _a !== void 0 ? _a : String(v) : typeof v === 'number' ? v : String(v);
+        const safeValue = encodeSafeSelectorValue(stringValue);
+        return { value: safeValue, label: String(stringValue) };
+    });
     return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 function parameterOptions(parameter) {
@@ -1392,15 +1434,16 @@ function parameterSupportsFileUpload(parameter) {
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
 function stringifyValue(value) {
-    return typeof value === 'object' ? JSON.stringify(value) : escapeQuotes(String(value));
+    var _a;
+    if (typeof value === 'object' && value !== null) {
+        return (_a = json.safeStringify(value)) !== null && _a !== void 0 ? _a : String(value);
+    }
+    return String(value);
 }
 function exampleValue(example) {
     const value = 'value' in example ? example.value : example.externalValue;
     return stringifyValue(value);
 }
-function escapeQuotes(value) {
-    return value.replace(/"/g, '\\"');
-}
 function getPlaceholderForParameter(parameter) {
     var _a, _b;
     const { value: parameterValue, isDefault } = getValueForParameter(parameter);
@@ -1426,14 +1469,14 @@ const getValueForParameter = (parameter) => {
     if (typeof defaultValue !== 'undefined') {
         return { value: stringifyValue(defaultValue), isDefault: true };
     }
-    const examples = (_a = parameter.examples) !== null && _a !== void 0 ? _a : [];
-    if (examples.length > 0) {
-        return { value: exampleValue(examples[0]) };
-    }
-    const enums = (_c = (_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.enum) !== null && _c !== void 0 ? _c : [];
+    const enums = (_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.enum) !== null && _b !== void 0 ? _b : [];
     if (enums.length > 0) {
         return { value: stringifyValue(enums[0]) };
     }
+    const examples = (_c = parameter.examples) !== null && _c !== void 0 ? _c : [];
+    if (examples.length > 0) {
+        return { value: exampleValue(examples[0]) };
+    }
     return { value: '' };
 };
 const getInitialValueForParameter = (parameter) => {
@@ -1489,11 +1532,19 @@ const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptio
     const examples = exampleOptions(parameter);
     const selectedExample = (_a = examples === null || examples === void 0 ? void 0 : examples.find(e => e.value === value)) !== null && _a !== void 0 ? _a : selectExampleOption;
     const parameterDisplayName = `${parameter.name}${parameter.required ? '*' : ''}`;
+    const encodedValue = React__namespace.useMemo(() => {
+        if (!value || !parameterValueOptions)
+            return value || '';
+        const matchingOption = parameterValueOptions.find(opt => {
+            return String(decodeSafeSelectorValue(opt.value)) === value;
+        });
+        return matchingOption ? String(matchingOption.value) : value;
+    }, [value, parameterValueOptions]);
     const requiredButEmpty = validate && parameter.required && !value;
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(mosaic.Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, parameterDisplayName),
         React__namespace.createElement(mosaic.Text, { mx: 3 }, ":"),
-        React__namespace.createElement("div", null, parameterValueOptions ? (React__namespace.createElement(mosaic.Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: value || '', onChange: onChange, placeholder: getPlaceholderForSelectedParameter(parameter) })) : (React__namespace.createElement(mosaic.Flex, { flex: 1 },
+        React__namespace.createElement("div", null, parameterValueOptions ? (React__namespace.createElement(mosaic.Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: encodedValue, onChange: val => onChange && onChange(String(decodeSafeSelectorValue(val))), placeholder: getPlaceholderForSelectedParameter(parameter) })) : (React__namespace.createElement(mosaic.Flex, { flex: 1 },
             React__namespace.createElement(mosaic.Input, { id: inputId, "aria-label": parameter.name, appearance: requiredButEmpty ? 'default' : 'minimal', flex: 1, placeholder: getPlaceholderForParameter(parameter), type: ((_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.type) === 'number' ? 'number' : 'text', required: true, intent: requiredButEmpty ? 'danger' : 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }),
             examples && (React__namespace.createElement(mosaic.Select, { "aria-label": `${parameter.name}-select`, flex: 1, value: selectedExample.value, options: examples, onChange: onChange }))))),
         canChangeOptional && !parameter.required && (React__namespace.createElement(React__namespace.Fragment, null,
@@ -2348,10 +2399,17 @@ ServersDropdown.displayName = 'ServersDropdown';
 
 const VariableEditor = ({ variable, value, onChange }) => {
     const inputId = useUniqueId(`id_${variable.name}_`);
+    const encodedOptions = React__namespace.useMemo(() => (variable.enum ? variable.enum.map(s => ({ value: encodeSafeSelectorValue(s), label: String(s) })) : []), [variable.enum]);
+    const encodedValue = React__namespace.useMemo(() => {
+        if (!value || !variable.enum)
+            return value || variable.default;
+        const matchingOption = encodedOptions.find(opt => decodeSafeSelectorValue(String(opt.value)) === value);
+        return matchingOption ? String(matchingOption.value) : value;
+    }, [value, variable.enum, variable.default, encodedOptions]);
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(mosaic.Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, variable.name),
         React__namespace.createElement(mosaic.Text, { mx: 3 }, ":"),
-        React__namespace.createElement("div", null, variable.enum ? (React__namespace.createElement(mosaic.Select, { flex: 1, "aria-label": variable.name, options: variable.enum.map(s => ({ value: s })), value: value || variable.default, onChange: onChange })) : (React__namespace.createElement(mosaic.Flex, { flex: 1 },
+        React__namespace.createElement("div", null, variable.enum ? (React__namespace.createElement(mosaic.Select, { flex: 1, "aria-label": variable.name, options: encodedOptions, value: encodedValue, onChange: val => onChange && onChange(decodeSafeSelectorValue(String(val))) })) : (React__namespace.createElement(mosaic.Flex, { flex: 1 },
             React__namespace.createElement(mosaic.Input, { id: inputId, "aria-label": variable.name, appearance: 'minimal', flex: 1, placeholder: variable.default, type: "text", required: true, intent: 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }))))));
 };
 
@@ -3517,7 +3575,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 +3587,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 +3633,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 +3674,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 +3741,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 +3752,7 @@ const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInRespo
             e.preventDefault();
         }
         else {
+            setLastActiveIndex(index);
             onLinkClick();
         }
         if (onClick) {
@@ -3652,7 +3760,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

@@ -1340,8 +1340,50 @@ const booleanOptions = [
     { label: 'False', value: 'false' },
     { label: 'True', value: 'true' },
 ];
+function encodeSafeSelectorValue(value) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    const hasSpecialChars = /["'\[\]\\(){}]/.test(value);
+    if (!hasSpecialChars) {
+        return value;
+    }
+    try {
+        return 'b64:' + btoa(value);
+    }
+    catch (e) {
+        return 'enc:' + encodeURIComponent(value);
+    }
+}
+function decodeSafeSelectorValue(value) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (value.startsWith('b64:')) {
+        try {
+            return atob(value.substring(4));
+        }
+        catch (e) {
+            return value;
+        }
+    }
+    if (value.startsWith('enc:')) {
+        try {
+            return decodeURIComponent(value.substring(4));
+        }
+        catch (e) {
+            return value;
+        }
+    }
+    return value;
+}
 function enumOptions(enumValues, required) {
-    const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
+    const options = map(enumValues, v => {
+        var _a;
+        const stringValue = typeof v === 'object' && v !== null ? (_a = safeStringify(v)) !== null && _a !== void 0 ? _a : String(v) : typeof v === 'number' ? v : String(v);
+        const safeValue = encodeSafeSelectorValue(stringValue);
+        return { value: safeValue, label: String(stringValue) };
+    });
     return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 function parameterOptions(parameter) {
@@ -1371,15 +1413,16 @@ function parameterSupportsFileUpload(parameter) {
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
 function stringifyValue(value) {
-    return typeof value === 'object' ? JSON.stringify(value) : escapeQuotes(String(value));
+    var _a;
+    if (typeof value === 'object' && value !== null) {
+        return (_a = safeStringify(value)) !== null && _a !== void 0 ? _a : String(value);
+    }
+    return String(value);
 }
 function exampleValue(example) {
     const value = 'value' in example ? example.value : example.externalValue;
     return stringifyValue(value);
 }
-function escapeQuotes(value) {
-    return value.replace(/"/g, '\\"');
-}
 function getPlaceholderForParameter(parameter) {
     var _a, _b;
     const { value: parameterValue, isDefault } = getValueForParameter(parameter);
@@ -1405,14 +1448,14 @@ const getValueForParameter = (parameter) => {
     if (typeof defaultValue !== 'undefined') {
         return { value: stringifyValue(defaultValue), isDefault: true };
     }
-    const examples = (_a = parameter.examples) !== null && _a !== void 0 ? _a : [];
-    if (examples.length > 0) {
-        return { value: exampleValue(examples[0]) };
-    }
-    const enums = (_c = (_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.enum) !== null && _c !== void 0 ? _c : [];
+    const enums = (_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.enum) !== null && _b !== void 0 ? _b : [];
     if (enums.length > 0) {
         return { value: stringifyValue(enums[0]) };
     }
+    const examples = (_c = parameter.examples) !== null && _c !== void 0 ? _c : [];
+    if (examples.length > 0) {
+        return { value: exampleValue(examples[0]) };
+    }
     return { value: '' };
 };
 const getInitialValueForParameter = (parameter) => {
@@ -1468,11 +1511,19 @@ const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptio
     const examples = exampleOptions(parameter);
     const selectedExample = (_a = examples === null || examples === void 0 ? void 0 : examples.find(e => e.value === value)) !== null && _a !== void 0 ? _a : selectExampleOption;
     const parameterDisplayName = `${parameter.name}${parameter.required ? '*' : ''}`;
+    const encodedValue = React.useMemo(() => {
+        if (!value || !parameterValueOptions)
+            return value || '';
+        const matchingOption = parameterValueOptions.find(opt => {
+            return String(decodeSafeSelectorValue(opt.value)) === value;
+        });
+        return matchingOption ? String(matchingOption.value) : value;
+    }, [value, parameterValueOptions]);
     const requiredButEmpty = validate && parameter.required && !value;
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, parameterDisplayName),
         React.createElement(Text, { mx: 3 }, ":"),
-        React.createElement("div", null, parameterValueOptions ? (React.createElement(Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: value || '', onChange: onChange, placeholder: getPlaceholderForSelectedParameter(parameter) })) : (React.createElement(Flex, { flex: 1 },
+        React.createElement("div", null, parameterValueOptions ? (React.createElement(Select, { flex: 1, "aria-label": parameter.name, options: parameterValueOptions, value: encodedValue, onChange: val => onChange && onChange(String(decodeSafeSelectorValue(val))), placeholder: getPlaceholderForSelectedParameter(parameter) })) : (React.createElement(Flex, { flex: 1 },
             React.createElement(Input, { id: inputId, "aria-label": parameter.name, appearance: requiredButEmpty ? 'default' : 'minimal', flex: 1, placeholder: getPlaceholderForParameter(parameter), type: ((_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.type) === 'number' ? 'number' : 'text', required: true, intent: requiredButEmpty ? 'danger' : 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }),
             examples && (React.createElement(Select, { "aria-label": `${parameter.name}-select`, flex: 1, value: selectedExample.value, options: examples, onChange: onChange }))))),
         canChangeOptional && !parameter.required && (React.createElement(React.Fragment, null,
@@ -2327,10 +2378,17 @@ ServersDropdown.displayName = 'ServersDropdown';
 
 const VariableEditor = ({ variable, value, onChange }) => {
     const inputId = useUniqueId(`id_${variable.name}_`);
+    const encodedOptions = React.useMemo(() => (variable.enum ? variable.enum.map(s => ({ value: encodeSafeSelectorValue(s), label: String(s) })) : []), [variable.enum]);
+    const encodedValue = React.useMemo(() => {
+        if (!value || !variable.enum)
+            return value || variable.default;
+        const matchingOption = encodedOptions.find(opt => decodeSafeSelectorValue(String(opt.value)) === value);
+        return matchingOption ? String(matchingOption.value) : value;
+    }, [value, variable.enum, variable.default, encodedOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, variable.name),
         React.createElement(Text, { mx: 3 }, ":"),
-        React.createElement("div", null, variable.enum ? (React.createElement(Select, { flex: 1, "aria-label": variable.name, options: variable.enum.map(s => ({ value: s })), value: value || variable.default, onChange: onChange })) : (React.createElement(Flex, { flex: 1 },
+        React.createElement("div", null, variable.enum ? (React.createElement(Select, { flex: 1, "aria-label": variable.name, options: encodedOptions, value: encodedValue, onChange: val => onChange && onChange(decodeSafeSelectorValue(String(val))) })) : (React.createElement(Flex, { flex: 1 },
             React.createElement(Input, { id: inputId, "aria-label": variable.name, appearance: 'minimal', flex: 1, placeholder: variable.default, type: "text", required: true, intent: 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }))))));
 };
 
@@ -3496,7 +3554,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 +3566,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 +3612,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 +3653,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 +3720,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 +3731,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
             e.preventDefault();
         }
         else {
+            setLastActiveIndex(index);
             onLinkClick();
         }
         if (onClick) {
@@ -3631,7 +3739,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-alpha-0.1",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",