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

package/components/TryIt/Parameters/parameter-utils.d.ts

@@ -4,19 +4,19 @@ 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;
 };
 export declare function exampleOptions(parameter: ParameterSpec): {
-    value: string;
     label: string;
+    value: string | number;
 }[] | null;
 export declare function parameterSupportsFileUpload(parameter?: Pick<ParameterSpec, 'schema'>): boolean | undefined;
 export declare function getPlaceholderForParameter(parameter: ParameterSpec): 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) {
@@ -1358,7 +1400,10 @@ function exampleOptions(parameter) {
     return ((_a = parameter.examples) === null || _a === void 0 ? void 0 : _a.length) && parameter.examples.length > 1
         ? [
             selectExampleOption,
-            ...parameter.examples.map(example => ({ label: example.key, value: exampleValue(example) })),
+            ...parameter.examples.map(example => ({
+                label: example.key,
+                value: encodeSafeSelectorValue(exampleValue(example)),
+            })),
         ]
         : null;
 }
@@ -1371,15 +1416,19 @@ 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));
-}
-function exampleValue(example) {
-    const value = 'value' in example ? example.value : example.externalValue;
-    return stringifyValue(value);
+    var _a;
+    if (typeof value === 'object' && value !== null) {
+        return (_a = safeStringify(value)) !== null && _a !== void 0 ? _a : String(value);
+    }
+    return String(value);
 }
 function escapeQuotes(value) {
     return value.replace(/"/g, '\\"');
 }
+function exampleValue(example) {
+    const value = 'value' in example ? example.value : example.externalValue;
+    return escapeQuotes(stringifyValue(value));
+}
 function getPlaceholderForParameter(parameter) {
     var _a, _b;
     const { value: parameterValue, isDefault } = getValueForParameter(parameter);
@@ -1405,14 +1454,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) => {
@@ -1461,20 +1510,35 @@ function isRequired(n) {
 }
 
 const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptional, canChangeOptional, validate, }) => {
-    var _a, _b;
+    var _a;
     const inputId = useUniqueId(`id_${parameter.name}_`);
     const inputCheckId = useUniqueId(`id_${parameter.name}_checked`);
     const parameterValueOptions = parameterOptions(parameter);
     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 selectedExample = React.useMemo(() => {
+        if (!examples)
+            return selectExampleOption;
+        const matchingExample = examples.find(e => {
+            return String(decodeSafeSelectorValue(e.value)) === value;
+        });
+        return matchingExample !== null && matchingExample !== void 0 ? matchingExample : selectExampleOption;
+    }, [examples, value]);
     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(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 }))))),
+        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: ((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.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: val => onChange && onChange(String(decodeSafeSelectorValue(val))) }))))),
         canChangeOptional && !parameter.required && (React.createElement(React.Fragment, null,
             React.createElement("div", null),
             React.createElement("div", null),
@@ -2327,10 +2391,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) }))))));
 };
 
@@ -3255,7 +3326,7 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
     var _a, _b, _c, _d;
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
-    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
+    const { ref: layoutRef } = useIsCompact(layoutOptions);
     const { search, pathname } = location;
     const mocking = React.useContext(MockingContext);
     const query = new URLSearchParams(search);
@@ -3267,7 +3338,7 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
             React.createElement(Box, { pos: "relative" },
                 React.createElement(Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
                 React.createElement(NodeAnnotation, { change: nameChanged })),
-            exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps)))),
+            exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps)))),
         data.version && (React.createElement(Box, { mb: 5, pos: "relative" },
             React.createElement(VersionBadge, { value: data.version }),
             React.createElement(NodeAnnotation, { change: versionChanged }))),
@@ -3303,7 +3374,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
                     isDeprecated && React.createElement(DeprecatedBadge, null),
                     isInternal && React.createElement(InternalBadge, null))),
             React.createElement(NodeAnnotation, { change: titleChanged })),
-        exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps))));
+        exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && 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 description = (React.createElement(VStack, { spacing: 10 },
@@ -3535,6 +3606,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,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) {
@@ -1379,7 +1421,10 @@ function exampleOptions(parameter) {
     return ((_a = parameter.examples) === null || _a === void 0 ? void 0 : _a.length) && parameter.examples.length > 1
         ? [
             selectExampleOption,
-            ...parameter.examples.map(example => ({ label: example.key, value: exampleValue(example) })),
+            ...parameter.examples.map(example => ({
+                label: example.key,
+                value: encodeSafeSelectorValue(exampleValue(example)),
+            })),
         ]
         : null;
 }
@@ -1392,15 +1437,19 @@ 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));
-}
-function exampleValue(example) {
-    const value = 'value' in example ? example.value : example.externalValue;
-    return 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);
 }
 function escapeQuotes(value) {
     return value.replace(/"/g, '\\"');
 }
+function exampleValue(example) {
+    const value = 'value' in example ? example.value : example.externalValue;
+    return escapeQuotes(stringifyValue(value));
+}
 function getPlaceholderForParameter(parameter) {
     var _a, _b;
     const { value: parameterValue, isDefault } = getValueForParameter(parameter);
@@ -1426,14 +1475,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) => {
@@ -1482,20 +1531,35 @@ function isRequired(n) {
 }
 
 const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptional, canChangeOptional, validate, }) => {
-    var _a, _b;
+    var _a;
     const inputId = useUniqueId(`id_${parameter.name}_`);
     const inputCheckId = useUniqueId(`id_${parameter.name}_checked`);
     const parameterValueOptions = parameterOptions(parameter);
     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 selectedExample = React__namespace.useMemo(() => {
+        if (!examples)
+            return selectExampleOption;
+        const matchingExample = examples.find(e => {
+            return String(decodeSafeSelectorValue(e.value)) === value;
+        });
+        return matchingExample !== null && matchingExample !== void 0 ? matchingExample : selectExampleOption;
+    }, [examples, value]);
     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(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 }))))),
+        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: ((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.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: val => onChange && onChange(String(decodeSafeSelectorValue(val))) }))))),
         canChangeOptional && !parameter.required && (React__namespace.createElement(React__namespace.Fragment, null,
             React__namespace.createElement("div", null),
             React__namespace.createElement("div", null),
@@ -2348,10 +2412,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) }))))));
 };
 
@@ -3276,7 +3347,7 @@ const HttpServiceComponent = React__namespace.memo(({ data: unresolvedData, loca
     var _a, _b, _c, _d;
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
-    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
+    const { ref: layoutRef } = useIsCompact(layoutOptions);
     const { search, pathname } = location;
     const mocking = React__namespace.useContext(MockingContext);
     const query = new URLSearchParams(search);
@@ -3288,7 +3359,7 @@ const HttpServiceComponent = React__namespace.memo(({ data: unresolvedData, loca
             React__namespace.createElement(mosaic.Box, { pos: "relative" },
                 React__namespace.createElement(mosaic.Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
                 React__namespace.createElement(mosaic.NodeAnnotation, { change: nameChanged })),
-            exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React__namespace.createElement(ExportButton, Object.assign({}, exportProps)))),
+            exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React__namespace.createElement(ExportButton, Object.assign({}, exportProps)))),
         data.version && (React__namespace.createElement(mosaic.Box, { mb: 5, pos: "relative" },
             React__namespace.createElement(VersionBadge, { value: data.version }),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: versionChanged }))),
@@ -3324,7 +3395,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
                     isDeprecated && React__namespace.createElement(DeprecatedBadge, null),
                     isInternal && React__namespace.createElement(InternalBadge, null))),
             React__namespace.createElement(mosaic.NodeAnnotation, { change: titleChanged })),
-        exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React__namespace.createElement(ExportButton, Object.assign({}, exportProps))));
+        exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React__namespace.createElement(ExportButton, Object.assign({}, exportProps))));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React__namespace.createElement(ModelExamples, { data: data, isCollapsible: isCompact });
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: 'description' });
     const description = (React__namespace.createElement(mosaic.VStack, { spacing: 10 },
@@ -3556,6 +3627,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,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) {
@@ -1358,7 +1400,10 @@ function exampleOptions(parameter) {
     return ((_a = parameter.examples) === null || _a === void 0 ? void 0 : _a.length) && parameter.examples.length > 1
         ? [
             selectExampleOption,
-            ...parameter.examples.map(example => ({ label: example.key, value: exampleValue(example) })),
+            ...parameter.examples.map(example => ({
+                label: example.key,
+                value: encodeSafeSelectorValue(exampleValue(example)),
+            })),
         ]
         : null;
 }
@@ -1371,15 +1416,19 @@ 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));
-}
-function exampleValue(example) {
-    const value = 'value' in example ? example.value : example.externalValue;
-    return stringifyValue(value);
+    var _a;
+    if (typeof value === 'object' && value !== null) {
+        return (_a = safeStringify(value)) !== null && _a !== void 0 ? _a : String(value);
+    }
+    return String(value);
 }
 function escapeQuotes(value) {
     return value.replace(/"/g, '\\"');
 }
+function exampleValue(example) {
+    const value = 'value' in example ? example.value : example.externalValue;
+    return escapeQuotes(stringifyValue(value));
+}
 function getPlaceholderForParameter(parameter) {
     var _a, _b;
     const { value: parameterValue, isDefault } = getValueForParameter(parameter);
@@ -1405,14 +1454,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) => {
@@ -1461,20 +1510,35 @@ function isRequired(n) {
 }
 
 const ParameterEditor = ({ parameter, value, onChange, isOptional, onChangeOptional, canChangeOptional, validate, }) => {
-    var _a, _b;
+    var _a;
     const inputId = useUniqueId(`id_${parameter.name}_`);
     const inputCheckId = useUniqueId(`id_${parameter.name}_checked`);
     const parameterValueOptions = parameterOptions(parameter);
     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 selectedExample = React.useMemo(() => {
+        if (!examples)
+            return selectExampleOption;
+        const matchingExample = examples.find(e => {
+            return String(decodeSafeSelectorValue(e.value)) === value;
+        });
+        return matchingExample !== null && matchingExample !== void 0 ? matchingExample : selectExampleOption;
+    }, [examples, value]);
     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(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 }))))),
+        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: ((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.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: val => onChange && onChange(String(decodeSafeSelectorValue(val))) }))))),
         canChangeOptional && !parameter.required && (React.createElement(React.Fragment, null,
             React.createElement("div", null),
             React.createElement("div", null),
@@ -2327,10 +2391,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) }))))));
 };
 
@@ -3255,7 +3326,7 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
     var _a, _b, _c, _d;
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
-    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
+    const { ref: layoutRef } = useIsCompact(layoutOptions);
     const { search, pathname } = location;
     const mocking = React.useContext(MockingContext);
     const query = new URLSearchParams(search);
@@ -3267,7 +3338,7 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
             React.createElement(Box, { pos: "relative" },
                 React.createElement(Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
                 React.createElement(NodeAnnotation, { change: nameChanged })),
-            exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps)))),
+            exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps)))),
         data.version && (React.createElement(Box, { mb: 5, pos: "relative" },
             React.createElement(VersionBadge, { value: data.version }),
             React.createElement(NodeAnnotation, { change: versionChanged }))),
@@ -3303,7 +3374,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
                     isDeprecated && React.createElement(DeprecatedBadge, null),
                     isInternal && React.createElement(InternalBadge, null))),
             React.createElement(NodeAnnotation, { change: titleChanged })),
-        exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps))));
+        exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && 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 description = (React.createElement(VStack, { spacing: 10 },
@@ -3535,6 +3606,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",
+  "version": "9.0.15-beta-0.1",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",