@stoplight/elements-core 9.0.14 → 9.0.15-beta-0.2

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),
@@ -1739,15 +1803,20 @@ const generateExamplesFromJsonSchema = (schema) => {
             }
         }
     }
-    if (examples.length) {
+    if (examples.length && 'x-stoplight' in schema) {
         return examples;
     }
     try {
+        let originalExamples = [];
+        if (Array.isArray(schema === null || schema === void 0 ? void 0 : schema.examples)) {
+            originalExamples = JSON.parse(JSON.stringify(schema.examples));
+            delete schema.examples;
+        }
         const generated = Sampler.sample(schema, {
             maxSampleDepth: 4,
             ticks: 6000,
         });
-        return generated !== null
+        let updatedExamples = generated !== null
             ? [
                 {
                     label: 'default',
@@ -1755,6 +1824,16 @@ const generateExamplesFromJsonSchema = (schema) => {
                 },
             ]
             : [{ label: 'default', data: '' }];
+        if (originalExamples.length) {
+            schema.examples = originalExamples;
+            examples.forEach(item => {
+                item.data = updatedExamples[0].data;
+            });
+            return examples;
+        }
+        else {
+            return updatedExamples;
+        }
     }
     catch (e) {
         return [{ label: '', data: `Example cannot be created for this schema\n${e}` }];
@@ -2327,10 +2406,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) }))))));
 };
 

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),
@@ -1760,15 +1824,20 @@ const generateExamplesFromJsonSchema = (schema) => {
             }
         }
     }
-    if (examples.length) {
+    if (examples.length && 'x-stoplight' in schema) {
         return examples;
     }
     try {
+        let originalExamples = [];
+        if (Array.isArray(schema === null || schema === void 0 ? void 0 : schema.examples)) {
+            originalExamples = JSON.parse(JSON.stringify(schema.examples));
+            delete schema.examples;
+        }
         const generated = Sampler__namespace.sample(schema, {
             maxSampleDepth: 4,
             ticks: 6000,
         });
-        return generated !== null
+        let updatedExamples = generated !== null
             ? [
                 {
                     label: 'default',
@@ -1776,6 +1845,16 @@ const generateExamplesFromJsonSchema = (schema) => {
                 },
             ]
             : [{ label: 'default', data: '' }];
+        if (originalExamples.length) {
+            schema.examples = originalExamples;
+            examples.forEach(item => {
+                item.data = updatedExamples[0].data;
+            });
+            return examples;
+        }
+        else {
+            return updatedExamples;
+        }
     }
     catch (e) {
         return [{ label: '', data: `Example cannot be created for this schema\n${e}` }];
@@ -2348,10 +2427,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) }))))));
 };
 

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),
@@ -1739,15 +1803,20 @@ const generateExamplesFromJsonSchema = (schema) => {
             }
         }
     }
-    if (examples.length) {
+    if (examples.length && 'x-stoplight' in schema) {
         return examples;
     }
     try {
+        let originalExamples = [];
+        if (Array.isArray(schema === null || schema === void 0 ? void 0 : schema.examples)) {
+            originalExamples = JSON.parse(JSON.stringify(schema.examples));
+            delete schema.examples;
+        }
         const generated = Sampler.sample(schema, {
             maxSampleDepth: 4,
             ticks: 6000,
         });
-        return generated !== null
+        let updatedExamples = generated !== null
             ? [
                 {
                     label: 'default',
@@ -1755,6 +1824,16 @@ const generateExamplesFromJsonSchema = (schema) => {
                 },
             ]
             : [{ label: 'default', data: '' }];
+        if (originalExamples.length) {
+            schema.examples = originalExamples;
+            examples.forEach(item => {
+                item.data = updatedExamples[0].data;
+            });
+            return examples;
+        }
+        else {
+            return updatedExamples;
+        }
     }
     catch (e) {
         return [{ label: '', data: `Example cannot be created for this schema\n${e}` }];
@@ -2327,10 +2406,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) }))))));
 };
 

package/package.json

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