@stoplight/elements-core 7.13.4 → 7.13.7

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/core.css +5 -0
  2. package/index.esm.js +20 -19
  3. package/index.js +20 -19
  4. package/index.mjs +20 -19
  5. package/package.json +5 -5
  6. package/styles.min.css +1 -1
package/core.css CHANGED
@@ -90,3 +90,8 @@
90
90
  /* Enables horizontal scrolling for response tabs */
91
91
  overflow-x: auto;
92
92
  }
93
+
94
+ .sl-elements .HttpService .ServerInfo .sl-panel__titlebar div {
95
+ height: 100%;
96
+ min-height: 36px;
97
+ }
package/index.esm.js CHANGED
@@ -1298,7 +1298,7 @@ const FormDataBody = ({ specification, values, onChangeValues, onChangeParameter
1298
1298
  ? onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: newValue }))
1299
1299
  : onChangeValues(omit(values, parameter.name)) }));
1300
1300
  }
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 }));
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 }));
1302
1302
  }))));
1303
1303
  };
1304
1304
 
@@ -1851,7 +1851,7 @@ const useMockingOptions = () => useAtom(mockingOptionsAtom);
1851
1851
  const OperationParameters = ({ parameters, values, onChangeValue, validate, }) => {
1852
1852
  return (React.createElement(Panel, { defaultIsOpen: true },
1853
1853
  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: () => { } }))))));
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: () => { } }))))));
1855
1855
  };
1856
1856
 
1857
1857
  const persistedParameterValuesAtom = atom({});
@@ -2046,7 +2046,7 @@ const VariableEditor = ({ variable, value, onChange }) => {
2046
2046
  const ServerVariables = ({ variables, values, onChangeValue }) => {
2047
2047
  return (React.createElement(Panel, { defaultIsOpen: true, "data-test": "server-vars-try-it" },
2048
2048
  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) => {
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 => {
2050
2050
  const actualValue = String(value);
2051
2051
  onChangeValue(variable.enum || actualValue !== '' ? 'set' : 'unset', variable.name, actualValue);
2052
2052
  } }))))));
@@ -2212,9 +2212,9 @@ const LoadMore = ({ loading, onClick }) => {
2212
2212
 
2213
2213
  const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
2214
2214
  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);
2215
+ const [chosenExampleIndex, setChosenExampleIndex] = React.useState(0);
2216
+ const [show, setShow] = React.useState(false);
2217
+ const [loading, setLoading] = React.useState(false);
2218
2218
  const response = httpOperation.responses.find(response => response.code === responseStatusCode);
2219
2219
  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
2220
  let userDefinedExamples;
@@ -2232,12 +2232,12 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
2232
2232
  return null;
2233
2233
  if (!responseExample)
2234
2234
  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: {
2235
+ 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: " }));
2236
+ return (React.createElement(Panel, { rounded: true, isCollapsible: false },
2237
+ React.createElement(Panel.Titlebar, { rightComponent: React.createElement(CopyButton, { size: "sm", copyValue: responseExample || '' }) }, examplesSelect || React.createElement(Text, { color: "body" }, "Response Example")),
2238
+ 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
2239
  '--fs-code': 12,
2240
- } })) : (React__default.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2240
+ } })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2241
2241
  };
2242
2242
 
2243
2243
  const TryItWithRequestSamples = (_a) => {
@@ -2419,7 +2419,7 @@ const Body = ({ body, onChange }) => {
2419
2419
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: body.id, attr: 'description' });
2420
2420
  return (React.createElement(VStack, { spacing: 6 },
2421
2421
  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" })))),
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" })))),
2423
2423
  description && (React.createElement(Box, { pos: "relative" },
2424
2424
  React.createElement(MarkdownViewer, { markdown: description }),
2425
2425
  React.createElement(NodeAnnotation, { change: descriptionChanged }))),
@@ -2604,7 +2604,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2604
2604
  contents.length > 0 && (React.createElement(React.Fragment, null,
2605
2605
  React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2606
2606
  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" }))),
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" }))),
2608
2608
  schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
2609
2609
  };
2610
2610
  Response.displayName = 'HttpOperation.Response';
@@ -2787,12 +2787,12 @@ const ServerUrl = ({ id, description, url, variables, hasAnyServerVariables, def
2787
2787
  e.stopPropagation();
2788
2788
  onCopy();
2789
2789
  }, [onCopy]);
2790
- return (React.createElement(Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full", "data-test": "server-row" },
2790
+ return (React.createElement(Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full", className: "ServerInfo", "data-test": "server-row" },
2791
2791
  React.createElement(Panel.Titlebar, { whitespace: "nowrap" },
2792
2792
  React.createElement(Text, { pl: titlePaddingLeft, pr: 2, fontWeight: "bold" },
2793
2793
  description,
2794
2794
  ":"),
2795
- React.createElement(Tooltip, { placement: "right", renderTrigger: () => (React.createElement(Text, { "aria-label": description, whitespace: "normal", style: { wordBreak: 'break-word' } }, urlFragments.map(({ kind, value }, i) => (React.createElement(Text, { key: i, fontWeight: kind === 'variable' ? 'semibold' : 'normal' }, value))))) },
2795
+ React.createElement(Tooltip, { placement: "right", renderTrigger: () => (React.createElement(Text, { "aria-label": description, whitespace: "normal", py: 2, style: { wordBreak: 'break-word' } }, urlFragments.map(({ kind, value }, i) => (React.createElement(Text, { key: i, fontWeight: kind === 'variable' ? 'semibold' : 'normal' }, value))))) },
2796
2796
  !hasCopied && (React.createElement(Box, { p: 1, onClick: handleCopyClick, cursor: "pointer" },
2797
2797
  "Copy Server URL ",
2798
2798
  React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
@@ -2861,18 +2861,19 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
2861
2861
  var _a, _b, _c, _d;
2862
2862
  const { nodeHasChanged } = useOptionsCtx();
2863
2863
  const data = useResolvedObject(unresolvedData);
2864
+ const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
2864
2865
  const { search, pathname } = location;
2865
2866
  const mocking = React.useContext(MockingContext);
2866
2867
  const query = new URLSearchParams(search);
2867
2868
  const nameChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'name' });
2868
2869
  const versionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'version' });
2869
2870
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
2870
- return (React.createElement(Box, { mb: 10 },
2871
+ return (React.createElement(Box, { ref: layoutRef, mb: 10, className: "HttpService" },
2871
2872
  data.name && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
2872
2873
  React.createElement(Box, { pos: "relative" },
2873
2874
  React.createElement(Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
2874
2875
  React.createElement(NodeAnnotation, { change: nameChanged })),
2875
- exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps)))),
2876
+ exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps)))),
2876
2877
  data.version && (React.createElement(Box, { mb: 5, pos: "relative" },
2877
2878
  React.createElement(VersionBadge, { value: data.version }),
2878
2879
  React.createElement(NodeAnnotation, { change: versionChanged }))),
@@ -2908,7 +2909,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
2908
2909
  isDeprecated && React.createElement(DeprecatedBadge, null),
2909
2910
  isInternal && React.createElement(InternalBadge, null))),
2910
2911
  React.createElement(NodeAnnotation, { change: titleChanged })),
2911
- exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps))));
2912
+ exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps))));
2912
2913
  const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React.createElement(ModelExamples, { data: data, isCollapsible: isCompact });
2913
2914
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: 'description' });
2914
2915
  const description = (React.createElement(VStack, { spacing: 10 },
@@ -2930,7 +2931,7 @@ const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
2930
2931
  setLoading(true);
2931
2932
  setTimeout(() => setShow(true), 50);
2932
2933
  }, []);
2933
- 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: " }));
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: " }));
2934
2935
  return (React.createElement(Panel, { rounded: true, isCollapsible: isCollapsible, defaultIsOpen: !isCollapsible },
2935
2936
  React.createElement(Panel.Titlebar, { rightComponent: selectedExample ? React.createElement(CopyButton, { size: "sm", copyValue: selectedExample }) : null }, examplesSelect || (React.createElement(Text, { color: "body", role: "heading" }, "Example"))),
2936
2937
  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
@@ -1354,7 +1354,7 @@ const FormDataBody = ({ specification, values, onChangeValues, onChangeParameter
1354
1354
  ? onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: newValue }))
1355
1355
  : onChangeValues(omit__default["default"](values, parameter.name)) }));
1356
1356
  }
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 }));
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 }));
1358
1358
  }))));
1359
1359
  };
1360
1360
 
@@ -1907,7 +1907,7 @@ const useMockingOptions = () => jotai.useAtom(mockingOptionsAtom);
1907
1907
  const OperationParameters = ({ parameters, values, onChangeValue, validate, }) => {
1908
1908
  return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true },
1909
1909
  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: () => { } }))))));
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: () => { } }))))));
1911
1911
  };
1912
1912
 
1913
1913
  const persistedParameterValuesAtom = jotai.atom({});
@@ -2102,7 +2102,7 @@ const VariableEditor = ({ variable, value, onChange }) => {
2102
2102
  const ServerVariables = ({ variables, values, onChangeValue }) => {
2103
2103
  return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true, "data-test": "server-vars-try-it" },
2104
2104
  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) => {
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 => {
2106
2106
  const actualValue = String(value);
2107
2107
  onChangeValue(variable.enum || actualValue !== '' ? 'set' : 'unset', variable.name, actualValue);
2108
2108
  } }))))));
@@ -2268,9 +2268,9 @@ const LoadMore = ({ loading, onClick }) => {
2268
2268
 
2269
2269
  const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
2270
2270
  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);
2271
+ const [chosenExampleIndex, setChosenExampleIndex] = React__namespace.useState(0);
2272
+ const [show, setShow] = React__namespace.useState(false);
2273
+ const [loading, setLoading] = React__namespace.useState(false);
2274
2274
  const response = httpOperation.responses.find(response => response.code === responseStatusCode);
2275
2275
  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
2276
  let userDefinedExamples;
@@ -2288,12 +2288,12 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
2288
2288
  return null;
2289
2289
  if (!responseExample)
2290
2290
  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: {
2291
+ 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: " }));
2292
+ return (React__namespace.createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
2293
+ 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")),
2294
+ 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
2295
  '--fs-code': 12,
2296
- } })) : (React__default["default"].createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2296
+ } })) : (React__namespace.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2297
2297
  };
2298
2298
 
2299
2299
  const TryItWithRequestSamples = (_a) => {
@@ -2475,7 +2475,7 @@ const Body = ({ body, onChange }) => {
2475
2475
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: body.id, attr: 'description' });
2476
2476
  return (React__namespace.createElement(mosaic.VStack, { spacing: 6 },
2477
2477
  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" })))),
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" })))),
2479
2479
  description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
2480
2480
  React__namespace.createElement(MarkdownViewer, { markdown: description }),
2481
2481
  React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
@@ -2660,7 +2660,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2660
2660
  contents.length > 0 && (React__namespace.createElement(React__namespace.Fragment, null,
2661
2661
  React__namespace.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2662
2662
  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" }))),
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" }))),
2664
2664
  schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
2665
2665
  };
2666
2666
  Response.displayName = 'HttpOperation.Response';
@@ -2843,12 +2843,12 @@ const ServerUrl = ({ id, description, url, variables, hasAnyServerVariables, def
2843
2843
  e.stopPropagation();
2844
2844
  onCopy();
2845
2845
  }, [onCopy]);
2846
- return (React__namespace.createElement(mosaic.Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full", "data-test": "server-row" },
2846
+ return (React__namespace.createElement(mosaic.Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full", className: "ServerInfo", "data-test": "server-row" },
2847
2847
  React__namespace.createElement(mosaic.Panel.Titlebar, { whitespace: "nowrap" },
2848
2848
  React__namespace.createElement(mosaic.Text, { pl: titlePaddingLeft, pr: 2, fontWeight: "bold" },
2849
2849
  description,
2850
2850
  ":"),
2851
- React__namespace.createElement(mosaic.Tooltip, { placement: "right", renderTrigger: () => (React__namespace.createElement(mosaic.Text, { "aria-label": description, whitespace: "normal", style: { wordBreak: 'break-word' } }, urlFragments.map(({ kind, value }, i) => (React__namespace.createElement(mosaic.Text, { key: i, fontWeight: kind === 'variable' ? 'semibold' : 'normal' }, value))))) },
2851
+ React__namespace.createElement(mosaic.Tooltip, { placement: "right", renderTrigger: () => (React__namespace.createElement(mosaic.Text, { "aria-label": description, whitespace: "normal", py: 2, style: { wordBreak: 'break-word' } }, urlFragments.map(({ kind, value }, i) => (React__namespace.createElement(mosaic.Text, { key: i, fontWeight: kind === 'variable' ? 'semibold' : 'normal' }, value))))) },
2852
2852
  !hasCopied && (React__namespace.createElement(mosaic.Box, { p: 1, onClick: handleCopyClick, cursor: "pointer" },
2853
2853
  "Copy Server URL ",
2854
2854
  React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
@@ -2917,18 +2917,19 @@ const HttpServiceComponent = React__namespace.memo(({ data: unresolvedData, loca
2917
2917
  var _a, _b, _c, _d;
2918
2918
  const { nodeHasChanged } = useOptionsCtx();
2919
2919
  const data = useResolvedObject(unresolvedData);
2920
+ const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
2920
2921
  const { search, pathname } = location;
2921
2922
  const mocking = React__namespace.useContext(MockingContext);
2922
2923
  const query = new URLSearchParams(search);
2923
2924
  const nameChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'name' });
2924
2925
  const versionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'version' });
2925
2926
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
2926
- return (React__namespace.createElement(mosaic.Box, { mb: 10 },
2927
+ return (React__namespace.createElement(mosaic.Box, { ref: layoutRef, mb: 10, className: "HttpService" },
2927
2928
  data.name && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (React__namespace.createElement(mosaic.Flex, { justifyContent: "between", alignItems: "center" },
2928
2929
  React__namespace.createElement(mosaic.Box, { pos: "relative" },
2929
2930
  React__namespace.createElement(mosaic.Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
2930
2931
  React__namespace.createElement(mosaic.NodeAnnotation, { change: nameChanged })),
2931
- exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React__namespace.createElement(ExportButton, Object.assign({}, exportProps)))),
2932
+ exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React__namespace.createElement(ExportButton, Object.assign({}, exportProps)))),
2932
2933
  data.version && (React__namespace.createElement(mosaic.Box, { mb: 5, pos: "relative" },
2933
2934
  React__namespace.createElement(VersionBadge, { value: data.version }),
2934
2935
  React__namespace.createElement(mosaic.NodeAnnotation, { change: versionChanged }))),
@@ -2964,7 +2965,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
2964
2965
  isDeprecated && React__namespace.createElement(DeprecatedBadge, null),
2965
2966
  isInternal && React__namespace.createElement(InternalBadge, null))),
2966
2967
  React__namespace.createElement(mosaic.NodeAnnotation, { change: titleChanged })),
2967
- exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React__namespace.createElement(ExportButton, Object.assign({}, exportProps))));
2968
+ exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React__namespace.createElement(ExportButton, Object.assign({}, exportProps))));
2968
2969
  const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React__namespace.createElement(ModelExamples, { data: data, isCollapsible: isCompact });
2969
2970
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: 'description' });
2970
2971
  const description = (React__namespace.createElement(mosaic.VStack, { spacing: 10 },
@@ -2986,7 +2987,7 @@ const ModelExamples = React__namespace.memo(({ data, isCollapsible = false }) =>
2986
2987
  setLoading(true);
2987
2988
  setTimeout(() => setShow(true), 50);
2988
2989
  }, []);
2989
- 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: " }));
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: " }));
2990
2991
  return (React__namespace.createElement(mosaic.Panel, { rounded: true, isCollapsible: isCollapsible, defaultIsOpen: !isCollapsible },
2991
2992
  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"))),
2992
2993
  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
@@ -1298,7 +1298,7 @@ const FormDataBody = ({ specification, values, onChangeValues, onChangeParameter
1298
1298
  ? onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: newValue }))
1299
1299
  : onChangeValues(omit(values, parameter.name)) }));
1300
1300
  }
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 }));
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 }));
1302
1302
  }))));
1303
1303
  };
1304
1304
 
@@ -1851,7 +1851,7 @@ const useMockingOptions = () => useAtom(mockingOptionsAtom);
1851
1851
  const OperationParameters = ({ parameters, values, onChangeValue, validate, }) => {
1852
1852
  return (React.createElement(Panel, { defaultIsOpen: true },
1853
1853
  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: () => { } }))))));
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: () => { } }))))));
1855
1855
  };
1856
1856
 
1857
1857
  const persistedParameterValuesAtom = atom({});
@@ -2046,7 +2046,7 @@ const VariableEditor = ({ variable, value, onChange }) => {
2046
2046
  const ServerVariables = ({ variables, values, onChangeValue }) => {
2047
2047
  return (React.createElement(Panel, { defaultIsOpen: true, "data-test": "server-vars-try-it" },
2048
2048
  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) => {
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 => {
2050
2050
  const actualValue = String(value);
2051
2051
  onChangeValue(variable.enum || actualValue !== '' ? 'set' : 'unset', variable.name, actualValue);
2052
2052
  } }))))));
@@ -2212,9 +2212,9 @@ const LoadMore = ({ loading, onClick }) => {
2212
2212
 
2213
2213
  const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
2214
2214
  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);
2215
+ const [chosenExampleIndex, setChosenExampleIndex] = React.useState(0);
2216
+ const [show, setShow] = React.useState(false);
2217
+ const [loading, setLoading] = React.useState(false);
2218
2218
  const response = httpOperation.responses.find(response => response.code === responseStatusCode);
2219
2219
  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
2220
  let userDefinedExamples;
@@ -2232,12 +2232,12 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
2232
2232
  return null;
2233
2233
  if (!responseExample)
2234
2234
  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: {
2235
+ 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: " }));
2236
+ return (React.createElement(Panel, { rounded: true, isCollapsible: false },
2237
+ React.createElement(Panel.Titlebar, { rightComponent: React.createElement(CopyButton, { size: "sm", copyValue: responseExample || '' }) }, examplesSelect || React.createElement(Text, { color: "body" }, "Response Example")),
2238
+ 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
2239
  '--fs-code': 12,
2240
- } })) : (React__default.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2240
+ } })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
2241
2241
  };
2242
2242
 
2243
2243
  const TryItWithRequestSamples = (_a) => {
@@ -2419,7 +2419,7 @@ const Body = ({ body, onChange }) => {
2419
2419
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: body.id, attr: 'description' });
2420
2420
  return (React.createElement(VStack, { spacing: 6 },
2421
2421
  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" })))),
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" })))),
2423
2423
  description && (React.createElement(Box, { pos: "relative" },
2424
2424
  React.createElement(MarkdownViewer, { markdown: description }),
2425
2425
  React.createElement(NodeAnnotation, { change: descriptionChanged }))),
@@ -2604,7 +2604,7 @@ const Response = ({ response, onMediaTypeChange }) => {
2604
2604
  contents.length > 0 && (React.createElement(React.Fragment, null,
2605
2605
  React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
2606
2606
  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" }))),
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" }))),
2608
2608
  schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
2609
2609
  };
2610
2610
  Response.displayName = 'HttpOperation.Response';
@@ -2787,12 +2787,12 @@ const ServerUrl = ({ id, description, url, variables, hasAnyServerVariables, def
2787
2787
  e.stopPropagation();
2788
2788
  onCopy();
2789
2789
  }, [onCopy]);
2790
- return (React.createElement(Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full", "data-test": "server-row" },
2790
+ return (React.createElement(Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full", className: "ServerInfo", "data-test": "server-row" },
2791
2791
  React.createElement(Panel.Titlebar, { whitespace: "nowrap" },
2792
2792
  React.createElement(Text, { pl: titlePaddingLeft, pr: 2, fontWeight: "bold" },
2793
2793
  description,
2794
2794
  ":"),
2795
- React.createElement(Tooltip, { placement: "right", renderTrigger: () => (React.createElement(Text, { "aria-label": description, whitespace: "normal", style: { wordBreak: 'break-word' } }, urlFragments.map(({ kind, value }, i) => (React.createElement(Text, { key: i, fontWeight: kind === 'variable' ? 'semibold' : 'normal' }, value))))) },
2795
+ React.createElement(Tooltip, { placement: "right", renderTrigger: () => (React.createElement(Text, { "aria-label": description, whitespace: "normal", py: 2, style: { wordBreak: 'break-word' } }, urlFragments.map(({ kind, value }, i) => (React.createElement(Text, { key: i, fontWeight: kind === 'variable' ? 'semibold' : 'normal' }, value))))) },
2796
2796
  !hasCopied && (React.createElement(Box, { p: 1, onClick: handleCopyClick, cursor: "pointer" },
2797
2797
  "Copy Server URL ",
2798
2798
  React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
@@ -2861,18 +2861,19 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
2861
2861
  var _a, _b, _c, _d;
2862
2862
  const { nodeHasChanged } = useOptionsCtx();
2863
2863
  const data = useResolvedObject(unresolvedData);
2864
+ const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
2864
2865
  const { search, pathname } = location;
2865
2866
  const mocking = React.useContext(MockingContext);
2866
2867
  const query = new URLSearchParams(search);
2867
2868
  const nameChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'name' });
2868
2869
  const versionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'version' });
2869
2870
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
2870
- return (React.createElement(Box, { mb: 10 },
2871
+ return (React.createElement(Box, { ref: layoutRef, mb: 10, className: "HttpService" },
2871
2872
  data.name && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
2872
2873
  React.createElement(Box, { pos: "relative" },
2873
2874
  React.createElement(Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
2874
2875
  React.createElement(NodeAnnotation, { change: nameChanged })),
2875
- exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps)))),
2876
+ exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps)))),
2876
2877
  data.version && (React.createElement(Box, { mb: 5, pos: "relative" },
2877
2878
  React.createElement(VersionBadge, { value: data.version }),
2878
2879
  React.createElement(NodeAnnotation, { change: versionChanged }))),
@@ -2908,7 +2909,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
2908
2909
  isDeprecated && React.createElement(DeprecatedBadge, null),
2909
2910
  isInternal && React.createElement(InternalBadge, null))),
2910
2911
  React.createElement(NodeAnnotation, { change: titleChanged })),
2911
- exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps))));
2912
+ exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps))));
2912
2913
  const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React.createElement(ModelExamples, { data: data, isCollapsible: isCompact });
2913
2914
  const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: 'description' });
2914
2915
  const description = (React.createElement(VStack, { spacing: 10 },
@@ -2930,7 +2931,7 @@ const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
2930
2931
  setLoading(true);
2931
2932
  setTimeout(() => setShow(true), 50);
2932
2933
  }, []);
2933
- 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: " }));
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: " }));
2934
2935
  return (React.createElement(Panel, { rounded: true, isCollapsible: isCollapsible, defaultIsOpen: !isCollapsible },
2935
2936
  React.createElement(Panel.Titlebar, { rightComponent: selectedExample ? React.createElement(CopyButton, { size: "sm", copyValue: selectedExample }) : null }, examplesSelect || (React.createElement(Text, { color: "body", role: "heading" }, "Example"))),
2936
2937
  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.4",
3
+ "version": "7.13.7",
4
4
  "main": "./index.js",
5
5
  "sideEffects": [
6
6
  "web-components.min.js",
@@ -28,11 +28,11 @@
28
28
  "@stoplight/json": "^3.18.1",
29
29
  "@stoplight/json-schema-ref-parser": "^9.0.5",
30
30
  "@stoplight/json-schema-sampler": "0.2.3",
31
- "@stoplight/json-schema-viewer": "^4.12.0",
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.3",
34
+ "@stoplight/mosaic-code-editor": "^1.44.3",
35
+ "@stoplight/mosaic-code-viewer": "^1.44.3",
36
36
  "@stoplight/path": "^1.3.2",
37
37
  "@stoplight/react-error-boundary": "^2.0.0",
38
38
  "@stoplight/types": "^14.0.0",