@stoplight/elements-core 7.13.6 → 7.13.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/index.esm.js +15 -32
  2. package/index.js +15 -32
  3. package/index.mjs +15 -32
  4. package/package.json +5 -5
  5. package/styles.min.css +1 -1
  6. package/hooks/useChosenServerUrl.d.ts +0 -6
package/index.esm.js CHANGED
@@ -495,21 +495,6 @@ function createNamedContext(name, defaultValue) {
495
495
  return context;
496
496
  }
497
497
 
498
- const ALPHANUMERIC = /[^A-Za-z0-9]+$/;
499
- function useChosenServerUrl(chosenServerUrl) {
500
- const match = ALPHANUMERIC.exec(chosenServerUrl);
501
- if (match === null) {
502
- return {
503
- leading: chosenServerUrl,
504
- trailing: null,
505
- };
506
- }
507
- return {
508
- leading: chosenServerUrl.substring(0, match.index),
509
- trailing: chosenServerUrl.substring(match.index),
510
- };
511
- }
512
-
513
498
  const getBreakpoints = (compact) => {
514
499
  if (!compact)
515
500
  return undefined;
@@ -1298,7 +1283,7 @@ const FormDataBody = ({ specification, values, onChangeValues, onChangeParameter
1298
1283
  ? onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: newValue }))
1299
1284
  : onChangeValues(omit(values, parameter.name)) }));
1300
1285
  }
1301
- return (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: typeof value === 'string' ? value : undefined, onChange: (value) => onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: typeof value === 'number' ? String(value) : value })), onChangeOptional: value => onChangeParameterAllow(Object.assign(Object.assign({}, isAllowedEmptyValues), { [parameter.name]: value })), canChangeOptional: true, isOptional: (_a = isAllowedEmptyValues[parameter.name]) !== null && _a !== void 0 ? _a : false }));
1286
+ return (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: typeof value === 'string' ? value : undefined, onChange: value => onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: typeof value === 'number' ? String(value) : value })), onChangeOptional: value => onChangeParameterAllow(Object.assign(Object.assign({}, isAllowedEmptyValues), { [parameter.name]: value })), canChangeOptional: true, isOptional: (_a = isAllowedEmptyValues[parameter.name]) !== null && _a !== void 0 ? _a : false }));
1302
1287
  }))));
1303
1288
  };
1304
1289
 
@@ -1851,7 +1836,7 @@ const useMockingOptions = () => useAtom(mockingOptionsAtom);
1851
1836
  const OperationParameters = ({ parameters, values, onChangeValue, validate, }) => {
1852
1837
  return (React.createElement(Panel, { defaultIsOpen: true },
1853
1838
  React.createElement(Panel.Titlebar, null, "Parameters"),
1854
- React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, parameters.map(parameter => (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: values[parameter.name], onChange: (value) => onChangeValue(parameter.name, String(value)), validate: validate, isOptional: false, canChangeOptional: false, onChangeOptional: () => { } }))))));
1839
+ React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, parameters.map(parameter => (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: values[parameter.name], onChange: value => onChangeValue(parameter.name, String(value)), validate: validate, isOptional: false, canChangeOptional: false, onChangeOptional: () => { } }))))));
1855
1840
  };
1856
1841
 
1857
1842
  const persistedParameterValuesAtom = atom({});
@@ -2046,7 +2031,7 @@ const VariableEditor = ({ variable, value, onChange }) => {
2046
2031
  const ServerVariables = ({ variables, values, onChangeValue }) => {
2047
2032
  return (React.createElement(Panel, { defaultIsOpen: true, "data-test": "server-vars-try-it" },
2048
2033
  React.createElement(Panel.Titlebar, null, "Server Variables"),
2049
- React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React.createElement(VariableEditor, { key: variable.name, "data-test": "server-vars-try-it-row", variable: variable, value: values[variable.name], onChange: (value) => {
2034
+ React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React.createElement(VariableEditor, { key: variable.name, "data-test": "server-vars-try-it-row", variable: variable, value: values[variable.name], onChange: value => {
2050
2035
  const actualValue = String(value);
2051
2036
  onChangeValue(variable.enum || actualValue !== '' ? 'set' : 'unset', variable.name, actualValue);
2052
2037
  } }))))));
@@ -2212,9 +2197,9 @@ const LoadMore = ({ loading, onClick }) => {
2212
2197
 
2213
2198
  const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
2214
2199
  var _a;
2215
- const [chosenExampleIndex, setChosenExampleIndex] = React__default.useState(0);
2216
- const [show, setShow] = React__default.useState(false);
2217
- const [loading, setLoading] = React__default.useState(false);
2200
+ const [chosenExampleIndex, setChosenExampleIndex] = React.useState(0);
2201
+ const [show, setShow] = React.useState(false);
2202
+ const [loading, setLoading] = React.useState(false);
2218
2203
  const response = httpOperation.responses.find(response => response.code === responseStatusCode);
2219
2204
  const responseContents = (_a = response === null || response === void 0 ? void 0 : response.contents) === null || _a === void 0 ? void 0 : _a.find(content => content.mediaType === responseMediaType);
2220
2205
  let userDefinedExamples;
@@ -2232,12 +2217,12 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
2232
2217
  return null;
2233
2218
  if (!responseExample)
2234
2219
  return null;
2235
- const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default.createElement(Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
2236
- return (React__default.createElement(Panel, { rounded: true, isCollapsible: false },
2237
- React__default.createElement(Panel.Titlebar, { rightComponent: React__default.createElement(CopyButton, { size: "sm", copyValue: responseExample || '' }) }, examplesSelect || React__default.createElement(Text, { color: "body" }, "Response Example")),
2238
- React__default.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "500px", language: "json", value: responseExample, showLineNumbers: true, style: {
2220
+ const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React.createElement(Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: value => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
2221
+ return (React.createElement(Panel, { rounded: true, isCollapsible: false },
2222
+ React.createElement(Panel.Titlebar, { rightComponent: React.createElement(CopyButton, { size: "sm", copyValue: responseExample || '' }) }, examplesSelect || React.createElement(Text, { color: "body" }, "Response Example")),
2223
+ React.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "500px", language: "json", value: responseExample, showLineNumbers: true, style: {
2239
2224
  '--fs-code': 12,
2240
- } })) : (React__default.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2225
+ } })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2241
2226
  };
2242
2227
 
2243
2228
  const TryItWithRequestSamples = (_a) => {
@@ -2419,7 +2404,7 @@ const Body = ({ body, onChange }) => {
2419
2404
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: body.id, attr: 'description' });
2420
2405
  return (React.createElement(VStack, { spacing: 6 },
2421
2406
  React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
2422
- React.createElement(Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
2407
+ React.createElement(Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
2423
2408
  description && (React.createElement(Box, { pos: "relative" },
2424
2409
  React.createElement(MarkdownViewer, { markdown: description }),
2425
2410
  React.createElement(NodeAnnotation, { change: descriptionChanged }))),
@@ -2604,7 +2589,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2604
2589
  contents.length > 0 && (React.createElement(React.Fragment, null,
2605
2590
  React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2606
2591
  React.createElement(Flex, { flex: 1, justify: "end" },
2607
- React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
2592
+ React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
2608
2593
  schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
2609
2594
  };
2610
2595
  Response.displayName = 'HttpOperation.Response';
@@ -2662,11 +2647,9 @@ function MethodPath({ method, path }) {
2662
2647
  function MethodPathInner({ method, path, chosenServerUrl }) {
2663
2648
  const isDark = useThemeIsDark();
2664
2649
  const fullUrl = `${chosenServerUrl}${path}`;
2665
- const { leading, trailing } = useChosenServerUrl(chosenServerUrl);
2666
2650
  const pathElem = (React.createElement(Flex, { overflowX: "hidden", fontSize: "lg", userSelect: "all" },
2667
2651
  React.createElement(Box, { dir: "rtl", color: "muted", textOverflow: "truncate", overflowX: "hidden" },
2668
- leading,
2669
- trailing !== null && (React.createElement(Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, trailing))),
2652
+ React.createElement(Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, chosenServerUrl)),
2670
2653
  React.createElement(Box, { fontWeight: "semibold", flex: 1 }, path)));
2671
2654
  return (React.createElement(HStack, { spacing: 3, pl: 2.5, pr: 4, py: 2, bg: "canvas-50", rounded: "lg", fontFamily: "mono", display: "inline-flex", maxW: "full", title: fullUrl },
2672
2655
  React.createElement(Box, { py: 1, px: 2.5, rounded: "lg", bg: !isDark ? HttpMethodColors[method] : 'canvas-100', color: !isDark ? 'on-primary' : 'body', fontSize: "lg", fontWeight: "semibold", textTransform: "uppercase" }, method),
@@ -2931,7 +2914,7 @@ const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
2931
2914
  setLoading(true);
2932
2915
  setTimeout(() => setShow(true), 50);
2933
2916
  }, []);
2934
- const examplesSelect = examples.length > 1 && (React.createElement(Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
2917
+ const examplesSelect = examples.length > 1 && (React.createElement(Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: value => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
2935
2918
  return (React.createElement(Panel, { rounded: true, isCollapsible: isCollapsible, defaultIsOpen: !isCollapsible },
2936
2919
  React.createElement(Panel.Titlebar, { rightComponent: selectedExample ? React.createElement(CopyButton, { size: "sm", copyValue: selectedExample }) : null }, examplesSelect || (React.createElement(Text, { color: "body", role: "heading" }, "Example"))),
2937
2920
  React.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(selectedExample) ? (React.createElement(CodeViewer, { "aria-label": selectedExample, noCopyButton: true, maxHeight: "500px", language: "json", value: selectedExample, showLineNumbers: true })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
package/index.js CHANGED
@@ -551,21 +551,6 @@ function createNamedContext(name, defaultValue) {
551
551
  return context;
552
552
  }
553
553
 
554
- const ALPHANUMERIC = /[^A-Za-z0-9]+$/;
555
- function useChosenServerUrl(chosenServerUrl) {
556
- const match = ALPHANUMERIC.exec(chosenServerUrl);
557
- if (match === null) {
558
- return {
559
- leading: chosenServerUrl,
560
- trailing: null,
561
- };
562
- }
563
- return {
564
- leading: chosenServerUrl.substring(0, match.index),
565
- trailing: chosenServerUrl.substring(match.index),
566
- };
567
- }
568
-
569
554
  const getBreakpoints = (compact) => {
570
555
  if (!compact)
571
556
  return undefined;
@@ -1354,7 +1339,7 @@ const FormDataBody = ({ specification, values, onChangeValues, onChangeParameter
1354
1339
  ? onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: newValue }))
1355
1340
  : onChangeValues(omit__default["default"](values, parameter.name)) }));
1356
1341
  }
1357
- return (React__namespace.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: typeof value === 'string' ? value : undefined, onChange: (value) => onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: typeof value === 'number' ? String(value) : value })), onChangeOptional: value => onChangeParameterAllow(Object.assign(Object.assign({}, isAllowedEmptyValues), { [parameter.name]: value })), canChangeOptional: true, isOptional: (_a = isAllowedEmptyValues[parameter.name]) !== null && _a !== void 0 ? _a : false }));
1342
+ return (React__namespace.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: typeof value === 'string' ? value : undefined, onChange: value => onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: typeof value === 'number' ? String(value) : value })), onChangeOptional: value => onChangeParameterAllow(Object.assign(Object.assign({}, isAllowedEmptyValues), { [parameter.name]: value })), canChangeOptional: true, isOptional: (_a = isAllowedEmptyValues[parameter.name]) !== null && _a !== void 0 ? _a : false }));
1358
1343
  }))));
1359
1344
  };
1360
1345
 
@@ -1907,7 +1892,7 @@ const useMockingOptions = () => jotai.useAtom(mockingOptionsAtom);
1907
1892
  const OperationParameters = ({ parameters, values, onChangeValue, validate, }) => {
1908
1893
  return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true },
1909
1894
  React__namespace.createElement(mosaic.Panel.Titlebar, null, "Parameters"),
1910
- React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, parameters.map(parameter => (React__namespace.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: values[parameter.name], onChange: (value) => onChangeValue(parameter.name, String(value)), validate: validate, isOptional: false, canChangeOptional: false, onChangeOptional: () => { } }))))));
1895
+ React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, parameters.map(parameter => (React__namespace.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: values[parameter.name], onChange: value => onChangeValue(parameter.name, String(value)), validate: validate, isOptional: false, canChangeOptional: false, onChangeOptional: () => { } }))))));
1911
1896
  };
1912
1897
 
1913
1898
  const persistedParameterValuesAtom = jotai.atom({});
@@ -2102,7 +2087,7 @@ const VariableEditor = ({ variable, value, onChange }) => {
2102
2087
  const ServerVariables = ({ variables, values, onChangeValue }) => {
2103
2088
  return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true, "data-test": "server-vars-try-it" },
2104
2089
  React__namespace.createElement(mosaic.Panel.Titlebar, null, "Server Variables"),
2105
- React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React__namespace.createElement(VariableEditor, { key: variable.name, "data-test": "server-vars-try-it-row", variable: variable, value: values[variable.name], onChange: (value) => {
2090
+ React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React__namespace.createElement(VariableEditor, { key: variable.name, "data-test": "server-vars-try-it-row", variable: variable, value: values[variable.name], onChange: value => {
2106
2091
  const actualValue = String(value);
2107
2092
  onChangeValue(variable.enum || actualValue !== '' ? 'set' : 'unset', variable.name, actualValue);
2108
2093
  } }))))));
@@ -2268,9 +2253,9 @@ const LoadMore = ({ loading, onClick }) => {
2268
2253
 
2269
2254
  const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
2270
2255
  var _a;
2271
- const [chosenExampleIndex, setChosenExampleIndex] = React__default["default"].useState(0);
2272
- const [show, setShow] = React__default["default"].useState(false);
2273
- const [loading, setLoading] = React__default["default"].useState(false);
2256
+ const [chosenExampleIndex, setChosenExampleIndex] = React__namespace.useState(0);
2257
+ const [show, setShow] = React__namespace.useState(false);
2258
+ const [loading, setLoading] = React__namespace.useState(false);
2274
2259
  const response = httpOperation.responses.find(response => response.code === responseStatusCode);
2275
2260
  const responseContents = (_a = response === null || response === void 0 ? void 0 : response.contents) === null || _a === void 0 ? void 0 : _a.find(content => content.mediaType === responseMediaType);
2276
2261
  let userDefinedExamples;
@@ -2288,12 +2273,12 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
2288
2273
  return null;
2289
2274
  if (!responseExample)
2290
2275
  return null;
2291
- const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default["default"].createElement(mosaic.Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
2292
- return (React__default["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
2293
- React__default["default"].createElement(mosaic.Panel.Titlebar, { rightComponent: React__default["default"].createElement(mosaic.CopyButton, { size: "sm", copyValue: responseExample || '' }) }, examplesSelect || React__default["default"].createElement(mosaic.Text, { color: "body" }, "Response Example")),
2294
- React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "500px", language: "json", value: responseExample, showLineNumbers: true, style: {
2276
+ const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__namespace.createElement(mosaic.Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: value => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
2277
+ return (React__namespace.createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
2278
+ React__namespace.createElement(mosaic.Panel.Titlebar, { rightComponent: React__namespace.createElement(mosaic.CopyButton, { size: "sm", copyValue: responseExample || '' }) }, examplesSelect || React__namespace.createElement(mosaic.Text, { color: "body" }, "Response Example")),
2279
+ React__namespace.createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__namespace.createElement(mosaicCodeViewer.CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "500px", language: "json", value: responseExample, showLineNumbers: true, style: {
2295
2280
  '--fs-code': 12,
2296
- } })) : (React__default["default"].createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2281
+ } })) : (React__namespace.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2297
2282
  };
2298
2283
 
2299
2284
  const TryItWithRequestSamples = (_a) => {
@@ -2475,7 +2460,7 @@ const Body = ({ body, onChange }) => {
2475
2460
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: body.id, attr: 'description' });
2476
2461
  return (React__namespace.createElement(mosaic.VStack, { spacing: 6 },
2477
2462
  React__namespace.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
2478
- React__namespace.createElement(mosaic.Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
2463
+ React__namespace.createElement(mosaic.Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
2479
2464
  description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
2480
2465
  React__namespace.createElement(MarkdownViewer, { markdown: description }),
2481
2466
  React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
@@ -2660,7 +2645,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2660
2645
  contents.length > 0 && (React__namespace.createElement(React__namespace.Fragment, null,
2661
2646
  React__namespace.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2662
2647
  React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
2663
- React__namespace.createElement(mosaic.Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
2648
+ React__namespace.createElement(mosaic.Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
2664
2649
  schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
2665
2650
  };
2666
2651
  Response.displayName = 'HttpOperation.Response';
@@ -2718,11 +2703,9 @@ function MethodPath({ method, path }) {
2718
2703
  function MethodPathInner({ method, path, chosenServerUrl }) {
2719
2704
  const isDark = mosaic.useThemeIsDark();
2720
2705
  const fullUrl = `${chosenServerUrl}${path}`;
2721
- const { leading, trailing } = useChosenServerUrl(chosenServerUrl);
2722
2706
  const pathElem = (React__namespace.createElement(mosaic.Flex, { overflowX: "hidden", fontSize: "lg", userSelect: "all" },
2723
2707
  React__namespace.createElement(mosaic.Box, { dir: "rtl", color: "muted", textOverflow: "truncate", overflowX: "hidden" },
2724
- leading,
2725
- trailing !== null && (React__namespace.createElement(mosaic.Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, trailing))),
2708
+ React__namespace.createElement(mosaic.Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, chosenServerUrl)),
2726
2709
  React__namespace.createElement(mosaic.Box, { fontWeight: "semibold", flex: 1 }, path)));
2727
2710
  return (React__namespace.createElement(mosaic.HStack, { spacing: 3, pl: 2.5, pr: 4, py: 2, bg: "canvas-50", rounded: "lg", fontFamily: "mono", display: "inline-flex", maxW: "full", title: fullUrl },
2728
2711
  React__namespace.createElement(mosaic.Box, { py: 1, px: 2.5, rounded: "lg", bg: !isDark ? HttpMethodColors[method] : 'canvas-100', color: !isDark ? 'on-primary' : 'body', fontSize: "lg", fontWeight: "semibold", textTransform: "uppercase" }, method),
@@ -2987,7 +2970,7 @@ const ModelExamples = React__namespace.memo(({ data, isCollapsible = false }) =>
2987
2970
  setLoading(true);
2988
2971
  setTimeout(() => setShow(true), 50);
2989
2972
  }, []);
2990
- const examplesSelect = examples.length > 1 && (React__namespace.createElement(mosaic.Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
2973
+ const examplesSelect = examples.length > 1 && (React__namespace.createElement(mosaic.Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: value => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
2991
2974
  return (React__namespace.createElement(mosaic.Panel, { rounded: true, isCollapsible: isCollapsible, defaultIsOpen: !isCollapsible },
2992
2975
  React__namespace.createElement(mosaic.Panel.Titlebar, { rightComponent: selectedExample ? React__namespace.createElement(mosaic.CopyButton, { size: "sm", copyValue: selectedExample }) : null }, examplesSelect || (React__namespace.createElement(mosaic.Text, { color: "body", role: "heading" }, "Example"))),
2993
2976
  React__namespace.createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(selectedExample) ? (React__namespace.createElement(mosaicCodeViewer.CodeViewer, { "aria-label": selectedExample, noCopyButton: true, maxHeight: "500px", language: "json", value: selectedExample, showLineNumbers: true })) : (React__namespace.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
package/index.mjs CHANGED
@@ -495,21 +495,6 @@ function createNamedContext(name, defaultValue) {
495
495
  return context;
496
496
  }
497
497
 
498
- const ALPHANUMERIC = /[^A-Za-z0-9]+$/;
499
- function useChosenServerUrl(chosenServerUrl) {
500
- const match = ALPHANUMERIC.exec(chosenServerUrl);
501
- if (match === null) {
502
- return {
503
- leading: chosenServerUrl,
504
- trailing: null,
505
- };
506
- }
507
- return {
508
- leading: chosenServerUrl.substring(0, match.index),
509
- trailing: chosenServerUrl.substring(match.index),
510
- };
511
- }
512
-
513
498
  const getBreakpoints = (compact) => {
514
499
  if (!compact)
515
500
  return undefined;
@@ -1298,7 +1283,7 @@ const FormDataBody = ({ specification, values, onChangeValues, onChangeParameter
1298
1283
  ? onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: newValue }))
1299
1284
  : onChangeValues(omit(values, parameter.name)) }));
1300
1285
  }
1301
- return (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: typeof value === 'string' ? value : undefined, onChange: (value) => onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: typeof value === 'number' ? String(value) : value })), onChangeOptional: value => onChangeParameterAllow(Object.assign(Object.assign({}, isAllowedEmptyValues), { [parameter.name]: value })), canChangeOptional: true, isOptional: (_a = isAllowedEmptyValues[parameter.name]) !== null && _a !== void 0 ? _a : false }));
1286
+ return (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: typeof value === 'string' ? value : undefined, onChange: value => onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: typeof value === 'number' ? String(value) : value })), onChangeOptional: value => onChangeParameterAllow(Object.assign(Object.assign({}, isAllowedEmptyValues), { [parameter.name]: value })), canChangeOptional: true, isOptional: (_a = isAllowedEmptyValues[parameter.name]) !== null && _a !== void 0 ? _a : false }));
1302
1287
  }))));
1303
1288
  };
1304
1289
 
@@ -1851,7 +1836,7 @@ const useMockingOptions = () => useAtom(mockingOptionsAtom);
1851
1836
  const OperationParameters = ({ parameters, values, onChangeValue, validate, }) => {
1852
1837
  return (React.createElement(Panel, { defaultIsOpen: true },
1853
1838
  React.createElement(Panel.Titlebar, null, "Parameters"),
1854
- React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, parameters.map(parameter => (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: values[parameter.name], onChange: (value) => onChangeValue(parameter.name, String(value)), validate: validate, isOptional: false, canChangeOptional: false, onChangeOptional: () => { } }))))));
1839
+ React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, parameters.map(parameter => (React.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: values[parameter.name], onChange: value => onChangeValue(parameter.name, String(value)), validate: validate, isOptional: false, canChangeOptional: false, onChangeOptional: () => { } }))))));
1855
1840
  };
1856
1841
 
1857
1842
  const persistedParameterValuesAtom = atom({});
@@ -2046,7 +2031,7 @@ const VariableEditor = ({ variable, value, onChange }) => {
2046
2031
  const ServerVariables = ({ variables, values, onChangeValue }) => {
2047
2032
  return (React.createElement(Panel, { defaultIsOpen: true, "data-test": "server-vars-try-it" },
2048
2033
  React.createElement(Panel.Titlebar, null, "Server Variables"),
2049
- React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React.createElement(VariableEditor, { key: variable.name, "data-test": "server-vars-try-it-row", variable: variable, value: values[variable.name], onChange: (value) => {
2034
+ React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React.createElement(VariableEditor, { key: variable.name, "data-test": "server-vars-try-it-row", variable: variable, value: values[variable.name], onChange: value => {
2050
2035
  const actualValue = String(value);
2051
2036
  onChangeValue(variable.enum || actualValue !== '' ? 'set' : 'unset', variable.name, actualValue);
2052
2037
  } }))))));
@@ -2212,9 +2197,9 @@ const LoadMore = ({ loading, onClick }) => {
2212
2197
 
2213
2198
  const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
2214
2199
  var _a;
2215
- const [chosenExampleIndex, setChosenExampleIndex] = React__default.useState(0);
2216
- const [show, setShow] = React__default.useState(false);
2217
- const [loading, setLoading] = React__default.useState(false);
2200
+ const [chosenExampleIndex, setChosenExampleIndex] = React.useState(0);
2201
+ const [show, setShow] = React.useState(false);
2202
+ const [loading, setLoading] = React.useState(false);
2218
2203
  const response = httpOperation.responses.find(response => response.code === responseStatusCode);
2219
2204
  const responseContents = (_a = response === null || response === void 0 ? void 0 : response.contents) === null || _a === void 0 ? void 0 : _a.find(content => content.mediaType === responseMediaType);
2220
2205
  let userDefinedExamples;
@@ -2232,12 +2217,12 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
2232
2217
  return null;
2233
2218
  if (!responseExample)
2234
2219
  return null;
2235
- const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default.createElement(Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
2236
- return (React__default.createElement(Panel, { rounded: true, isCollapsible: false },
2237
- React__default.createElement(Panel.Titlebar, { rightComponent: React__default.createElement(CopyButton, { size: "sm", copyValue: responseExample || '' }) }, examplesSelect || React__default.createElement(Text, { color: "body" }, "Response Example")),
2238
- React__default.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "500px", language: "json", value: responseExample, showLineNumbers: true, style: {
2220
+ const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React.createElement(Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: value => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
2221
+ return (React.createElement(Panel, { rounded: true, isCollapsible: false },
2222
+ React.createElement(Panel.Titlebar, { rightComponent: React.createElement(CopyButton, { size: "sm", copyValue: responseExample || '' }) }, examplesSelect || React.createElement(Text, { color: "body" }, "Response Example")),
2223
+ React.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "500px", language: "json", value: responseExample, showLineNumbers: true, style: {
2239
2224
  '--fs-code': 12,
2240
- } })) : (React__default.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2225
+ } })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2241
2226
  };
2242
2227
 
2243
2228
  const TryItWithRequestSamples = (_a) => {
@@ -2419,7 +2404,7 @@ const Body = ({ body, onChange }) => {
2419
2404
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: body.id, attr: 'description' });
2420
2405
  return (React.createElement(VStack, { spacing: 6 },
2421
2406
  React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
2422
- React.createElement(Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
2407
+ React.createElement(Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
2423
2408
  description && (React.createElement(Box, { pos: "relative" },
2424
2409
  React.createElement(MarkdownViewer, { markdown: description }),
2425
2410
  React.createElement(NodeAnnotation, { change: descriptionChanged }))),
@@ -2604,7 +2589,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2604
2589
  contents.length > 0 && (React.createElement(React.Fragment, null,
2605
2590
  React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2606
2591
  React.createElement(Flex, { flex: 1, justify: "end" },
2607
- React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
2592
+ React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
2608
2593
  schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
2609
2594
  };
2610
2595
  Response.displayName = 'HttpOperation.Response';
@@ -2662,11 +2647,9 @@ function MethodPath({ method, path }) {
2662
2647
  function MethodPathInner({ method, path, chosenServerUrl }) {
2663
2648
  const isDark = useThemeIsDark();
2664
2649
  const fullUrl = `${chosenServerUrl}${path}`;
2665
- const { leading, trailing } = useChosenServerUrl(chosenServerUrl);
2666
2650
  const pathElem = (React.createElement(Flex, { overflowX: "hidden", fontSize: "lg", userSelect: "all" },
2667
2651
  React.createElement(Box, { dir: "rtl", color: "muted", textOverflow: "truncate", overflowX: "hidden" },
2668
- leading,
2669
- trailing !== null && (React.createElement(Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, trailing))),
2652
+ React.createElement(Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, chosenServerUrl)),
2670
2653
  React.createElement(Box, { fontWeight: "semibold", flex: 1 }, path)));
2671
2654
  return (React.createElement(HStack, { spacing: 3, pl: 2.5, pr: 4, py: 2, bg: "canvas-50", rounded: "lg", fontFamily: "mono", display: "inline-flex", maxW: "full", title: fullUrl },
2672
2655
  React.createElement(Box, { py: 1, px: 2.5, rounded: "lg", bg: !isDark ? HttpMethodColors[method] : 'canvas-100', color: !isDark ? 'on-primary' : 'body', fontSize: "lg", fontWeight: "semibold", textTransform: "uppercase" }, method),
@@ -2931,7 +2914,7 @@ const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
2931
2914
  setLoading(true);
2932
2915
  setTimeout(() => setShow(true), 50);
2933
2916
  }, []);
2934
- const examplesSelect = examples.length > 1 && (React.createElement(Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
2917
+ const examplesSelect = examples.length > 1 && (React.createElement(Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: value => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
2935
2918
  return (React.createElement(Panel, { rounded: true, isCollapsible: isCollapsible, defaultIsOpen: !isCollapsible },
2936
2919
  React.createElement(Panel.Titlebar, { rightComponent: selectedExample ? React.createElement(CopyButton, { size: "sm", copyValue: selectedExample }) : null }, examplesSelect || (React.createElement(Text, { color: "body", role: "heading" }, "Example"))),
2937
2920
  React.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(selectedExample) ? (React.createElement(CodeViewer, { "aria-label": selectedExample, noCopyButton: true, maxHeight: "500px", language: "json", value: selectedExample, showLineNumbers: true })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stoplight/elements-core",
3
- "version": "7.13.6",
3
+ "version": "7.13.9",
4
4
  "main": "./index.js",
5
5
  "sideEffects": [
6
6
  "web-components.min.js",
@@ -30,15 +30,15 @@
30
30
  "@stoplight/json-schema-sampler": "0.2.3",
31
31
  "@stoplight/json-schema-viewer": "^4.12.1",
32
32
  "@stoplight/markdown-viewer": "^5.6.0",
33
- "@stoplight/mosaic": "^1.33.0",
34
- "@stoplight/mosaic-code-editor": "^1.33.0",
35
- "@stoplight/mosaic-code-viewer": "^1.33.0",
33
+ "@stoplight/mosaic": "^1.44.4",
34
+ "@stoplight/mosaic-code-editor": "^1.44.4",
35
+ "@stoplight/mosaic-code-viewer": "^1.44.4",
36
36
  "@stoplight/path": "^1.3.2",
37
37
  "@stoplight/react-error-boundary": "^2.0.0",
38
38
  "@stoplight/types": "^14.0.0",
39
39
  "@stoplight/yaml": "^4.2.3",
40
40
  "classnames": "^2.2.6",
41
- "httpsnippet-lite": "^3.0.1",
41
+ "httpsnippet-lite": "^3.0.5",
42
42
  "jotai": "1.3.9",
43
43
  "json-schema": "^0.4.0",
44
44
  "lodash": "^4.17.19",