@stoplight/elements-core 9.0.13-alpha-0.5 → 9.0.13-alpha-0.6

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 encodeSafeSelectorValue(value: string | number): string | number;
-export declare function decodeSafeSelectorValue(value: string | number): string | number;
-export declare function parameterOptions(parameter: ParameterSpec): {
+export declare function parameterOptions(parameter: ParameterSpec): ({
     value: string | number;
+} | {
     label: string;
-}[] | null;
+    value: string;
+})[] | null;
 export declare const selectExampleOption: {
     value: string;
     label: string;

package/index.esm.js

@@ -1340,50 +1340,8 @@ 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 => {
-        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) };
-    });
+    const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
     return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 function parameterOptions(parameter) {
@@ -1413,16 +1371,15 @@ function parameterSupportsFileUpload(parameter) {
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
 function stringifyValue(value) {
-    var _a;
-    if (typeof value === 'object' && value !== null) {
-        return (_a = safeStringify(value)) !== null && _a !== void 0 ? _a : String(value);
-    }
-    return String(value);
+    return typeof value === 'object' ? JSON.stringify(value) : escapeQuotes(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);
@@ -1448,14 +1405,14 @@ const getValueForParameter = (parameter) => {
     if (typeof defaultValue !== 'undefined') {
         return { value: stringifyValue(defaultValue), isDefault: true };
     }
-    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 : [];
+    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 : [];
+    if (enums.length > 0) {
+        return { value: stringifyValue(enums[0]) };
+    }
     return { value: '' };
 };
 const getInitialValueForParameter = (parameter) => {
@@ -1511,20 +1468,11 @@ 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 ? '*' : ''}`;
-    console.log("Inside Parameter Editor in APLHA BRANCH");
-    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: encodedValue, onChange: val => onChange && onChange(String(decodeSafeSelectorValue(val))), 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: value || '', onChange: onChange, 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,
@@ -2379,17 +2327,10 @@ 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: encodedOptions, value: encodedValue, onChange: val => onChange && onChange(decodeSafeSelectorValue(String(val))) })) : (React.createElement(Flex, { flex: 1 },
+        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(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) }))))));
 };
 
@@ -3594,6 +3535,38 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
         });
     }, []);
     const updatedTree = updateTocTree(tree, '');
+    const findFirstMatchAndIndexMatch = React.useCallback((items, id) => {
+        let firstMatch;
+        let hasAnyLastIndexMatch = false;
+        if (!id)
+            return [firstMatch, hasAnyLastIndexMatch];
+        const walk = (arr, stack) => {
+            for (const itm of arr) {
+                const newStack = stack.concat(itm);
+                const matches = ('slug' in itm && itm.slug === id) || ('id' in itm && itm.id === id);
+                if (matches) {
+                    if (!firstMatch)
+                        firstMatch = itm;
+                    const hasLastIndexMatch = newStack.some(el => 'index' in el && el.index === lastActiveIndex);
+                    if (hasLastIndexMatch)
+                        hasAnyLastIndexMatch = true;
+                }
+                if ('items' in itm && Array.isArray(itm.items)) {
+                    if (walk(itm.items, newStack))
+                        return true;
+                }
+            }
+            return false;
+        };
+        walk(items, []);
+        return [firstMatch, hasAnyLastIndexMatch];
+    }, [lastActiveIndex]);
+    const [firstMatchItem, hasAnyLastIndexMatch] = React.useMemo(() => findFirstMatchAndIndexMatch(updatedTree, activeId), [updatedTree, activeId, findFirstMatchAndIndexMatch]);
+    React.useEffect(() => {
+        if (!hasAnyLastIndexMatch && firstMatchItem && 'index' in firstMatchItem && firstMatchItem.index) {
+            setLastActiveIndex(firstMatchItem.index);
+        }
+    }, [firstMatchItem, hasAnyLastIndexMatch]);
     const container = React.useRef(null);
     const child = React.useRef(null);
     const firstRender = useFirstRender();

package/index.js

@@ -1361,50 +1361,8 @@ 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 => {
-        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) };
-    });
+    const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
     return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 function parameterOptions(parameter) {
@@ -1434,16 +1392,15 @@ function parameterSupportsFileUpload(parameter) {
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
 function stringifyValue(value) {
-    var _a;
-    if (typeof value === 'object' && value !== null) {
-        return (_a = json.safeStringify(value)) !== null && _a !== void 0 ? _a : String(value);
-    }
-    return String(value);
+    return typeof value === 'object' ? JSON.stringify(value) : escapeQuotes(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);
@@ -1469,14 +1426,14 @@ const getValueForParameter = (parameter) => {
     if (typeof defaultValue !== 'undefined') {
         return { value: stringifyValue(defaultValue), isDefault: true };
     }
-    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 : [];
+    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 : [];
+    if (enums.length > 0) {
+        return { value: stringifyValue(enums[0]) };
+    }
     return { value: '' };
 };
 const getInitialValueForParameter = (parameter) => {
@@ -1532,20 +1489,11 @@ 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 ? '*' : ''}`;
-    console.log("Inside Parameter Editor in APLHA BRANCH");
-    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: encodedValue, onChange: val => onChange && onChange(String(decodeSafeSelectorValue(val))), 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: value || '', onChange: onChange, 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,
@@ -2400,17 +2348,10 @@ 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: encodedOptions, value: encodedValue, onChange: val => onChange && onChange(decodeSafeSelectorValue(String(val))) })) : (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: variable.enum.map(s => ({ value: s })), value: value || variable.default, onChange: onChange })) : (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) }))))));
 };
 
@@ -3615,6 +3556,38 @@ const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthO
         });
     }, []);
     const updatedTree = updateTocTree(tree, '');
+    const findFirstMatchAndIndexMatch = React__namespace.useCallback((items, id) => {
+        let firstMatch;
+        let hasAnyLastIndexMatch = false;
+        if (!id)
+            return [firstMatch, hasAnyLastIndexMatch];
+        const walk = (arr, stack) => {
+            for (const itm of arr) {
+                const newStack = stack.concat(itm);
+                const matches = ('slug' in itm && itm.slug === id) || ('id' in itm && itm.id === id);
+                if (matches) {
+                    if (!firstMatch)
+                        firstMatch = itm;
+                    const hasLastIndexMatch = newStack.some(el => 'index' in el && el.index === lastActiveIndex);
+                    if (hasLastIndexMatch)
+                        hasAnyLastIndexMatch = true;
+                }
+                if ('items' in itm && Array.isArray(itm.items)) {
+                    if (walk(itm.items, newStack))
+                        return true;
+                }
+            }
+            return false;
+        };
+        walk(items, []);
+        return [firstMatch, hasAnyLastIndexMatch];
+    }, [lastActiveIndex]);
+    const [firstMatchItem, hasAnyLastIndexMatch] = React__namespace.useMemo(() => findFirstMatchAndIndexMatch(updatedTree, activeId), [updatedTree, activeId, findFirstMatchAndIndexMatch]);
+    React__namespace.useEffect(() => {
+        if (!hasAnyLastIndexMatch && firstMatchItem && 'index' in firstMatchItem && firstMatchItem.index) {
+            setLastActiveIndex(firstMatchItem.index);
+        }
+    }, [firstMatchItem, hasAnyLastIndexMatch]);
     const container = React__namespace.useRef(null);
     const child = React__namespace.useRef(null);
     const firstRender = useFirstRender();

package/index.mjs

@@ -1340,50 +1340,8 @@ 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 => {
-        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) };
-    });
+    const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
     return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 function parameterOptions(parameter) {
@@ -1413,16 +1371,15 @@ function parameterSupportsFileUpload(parameter) {
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
 function stringifyValue(value) {
-    var _a;
-    if (typeof value === 'object' && value !== null) {
-        return (_a = safeStringify(value)) !== null && _a !== void 0 ? _a : String(value);
-    }
-    return String(value);
+    return typeof value === 'object' ? JSON.stringify(value) : escapeQuotes(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);
@@ -1448,14 +1405,14 @@ const getValueForParameter = (parameter) => {
     if (typeof defaultValue !== 'undefined') {
         return { value: stringifyValue(defaultValue), isDefault: true };
     }
-    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 : [];
+    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 : [];
+    if (enums.length > 0) {
+        return { value: stringifyValue(enums[0]) };
+    }
     return { value: '' };
 };
 const getInitialValueForParameter = (parameter) => {
@@ -1511,20 +1468,11 @@ 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 ? '*' : ''}`;
-    console.log("Inside Parameter Editor in APLHA BRANCH");
-    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: encodedValue, onChange: val => onChange && onChange(String(decodeSafeSelectorValue(val))), 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: value || '', onChange: onChange, 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,
@@ -2379,17 +2327,10 @@ 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: encodedOptions, value: encodedValue, onChange: val => onChange && onChange(decodeSafeSelectorValue(String(val))) })) : (React.createElement(Flex, { flex: 1 },
+        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(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) }))))));
 };
 
@@ -3594,6 +3535,38 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
         });
     }, []);
     const updatedTree = updateTocTree(tree, '');
+    const findFirstMatchAndIndexMatch = React.useCallback((items, id) => {
+        let firstMatch;
+        let hasAnyLastIndexMatch = false;
+        if (!id)
+            return [firstMatch, hasAnyLastIndexMatch];
+        const walk = (arr, stack) => {
+            for (const itm of arr) {
+                const newStack = stack.concat(itm);
+                const matches = ('slug' in itm && itm.slug === id) || ('id' in itm && itm.id === id);
+                if (matches) {
+                    if (!firstMatch)
+                        firstMatch = itm;
+                    const hasLastIndexMatch = newStack.some(el => 'index' in el && el.index === lastActiveIndex);
+                    if (hasLastIndexMatch)
+                        hasAnyLastIndexMatch = true;
+                }
+                if ('items' in itm && Array.isArray(itm.items)) {
+                    if (walk(itm.items, newStack))
+                        return true;
+                }
+            }
+            return false;
+        };
+        walk(items, []);
+        return [firstMatch, hasAnyLastIndexMatch];
+    }, [lastActiveIndex]);
+    const [firstMatchItem, hasAnyLastIndexMatch] = React.useMemo(() => findFirstMatchAndIndexMatch(updatedTree, activeId), [updatedTree, activeId, findFirstMatchAndIndexMatch]);
+    React.useEffect(() => {
+        if (!hasAnyLastIndexMatch && firstMatchItem && 'index' in firstMatchItem && firstMatchItem.index) {
+            setLastActiveIndex(firstMatchItem.index);
+        }
+    }, [firstMatchItem, hasAnyLastIndexMatch]);
     const container = React.useRef(null);
     const child = React.useRef(null);
     const firstRender = useFirstRender();

package/package.json

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