@jpmorganchase/elemental 3.2.1 → 4.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/components/API/APIWithSidebarLayout.d.ts +1 -0
  2. package/components/API/APIWithStackedLayout.d.ts +1 -0
  3. package/containers/API.d.ts +1 -0
  4. package/containers/API.stories.d.ts +11 -12
  5. package/index.d.ts +2 -0
  6. package/index.esm.js +43 -39
  7. package/index.js +44 -38
  8. package/index.mjs +43 -39
  9. package/package.json +3 -3
  10. package/web-components.min.js +1 -1
  11. package/web-components.min.js.LICENSE.txt +0 -28
package/components/API/APIWithSidebarLayout.d.ts CHANGED
@@ -8,6 +8,7 @@ declare type SidebarLayoutProps = {
8
8
  hideSchemas?: boolean;
9
9
  hideInternal?: boolean;
10
10
  hideExport?: boolean;
11
+ hideInlineExamples?: boolean;
11
12
  exportProps?: ExportButtonProps;
12
13
  tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
13
14
  tryItCorsProxy?: string;
package/components/API/APIWithStackedLayout.d.ts CHANGED
@@ -6,6 +6,7 @@ declare type StackedLayoutProps = {
6
6
  serviceNode: ServiceNode;
7
7
  hideTryIt?: boolean;
8
8
  hideExport?: boolean;
9
+ hideInlineExamples?: boolean;
9
10
  exportProps?: ExportButtonProps;
10
11
  tryItCredentialsPolicy?: TryItCredentialsPolicy;
11
12
  tryItCorsProxy?: string;
package/containers/API.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface CommonAPIProps extends RoutingProps {
15
15
  hideSchemas?: boolean;
16
16
  hideInternal?: boolean;
17
17
  hideExport?: boolean;
18
+ hideInlineExamples?: boolean;
18
19
  tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
19
20
  tryItCorsProxy?: string;
20
21
  tryItOutDefaultServer?: string;
package/containers/API.stories.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { Story } from '@storybook/react';
2
1
  import * as React from 'react';
3
2
  import { APIProps } from './API';
4
3
  declare const _default: {
@@ -44,14 +43,14 @@ declare const _default: {
44
43
  };
45
44
  };
46
45
  export default _default;
47
- export declare const APIWithYamlProvidedDirectly: Story<APIProps>;
48
- export declare const APIWithJSONProvidedDirectly: Story<APIProps>;
49
- export declare const APIWithoutDescription: Story<APIProps>;
50
- export declare const APIWithInternalOperations: Story<APIProps>;
51
- export declare const OpenApi3Schema: Story<APIProps>;
52
- export declare const BadgesForSchema: Story<APIProps>;
53
- export declare const StackedLayout: Story<APIProps>;
54
- export declare const Box: Story<APIProps>;
55
- export declare const DigitalOcean: Story<APIProps>;
56
- export declare const Github: Story<APIProps>;
57
- export declare const Instagram: Story<APIProps>;
46
+ export declare const APIWithYamlProvidedDirectly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
47
+ export declare const APIWithJSONProvidedDirectly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
48
+ export declare const APIWithoutDescription: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
49
+ export declare const APIWithInternalOperations: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
50
+ export declare const OpenApi3Schema: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
51
+ export declare const BadgesForSchema: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
52
+ export declare const StackedLayout: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
53
+ export declare const Box: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
54
+ export declare const DigitalOcean: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
55
+ export declare const Github: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
56
+ export declare const Instagram: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, APIProps>;
package/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  export type { APIProps } from './containers/API';
2
2
  export { API } from './containers/API';
3
3
  export { useGetOasNavTree } from './hooks/oas-nav-tree/useGetOasNavTree';
4
+ export { useExportDocumentProps } from './hooks/useExportDocumentProps';
5
+ export { transformOasToServiceNode } from './utils/oas';
package/index.esm.js CHANGED
@@ -157,7 +157,7 @@ const isInternal = (node) => {
157
157
  return !!data['x-internal'];
158
158
  };
159
159
 
160
- const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, }) => {
160
+ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, hideInlineExamples = false, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, }) => {
161
161
  const container = React.useRef(null);
162
162
  const tree = React.useMemo(() => {
163
163
  if (!useCustomNav)
@@ -171,7 +171,7 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideI
171
171
  const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
172
172
  React.useEffect(() => {
173
173
  }, [pathname]);
174
- const layoutOptions = React.useMemo(() => ({ hideTryIt: hideTryIt, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node]);
174
+ const layoutOptions = React.useMemo(() => ({ hideTryIt: hideTryIt, hideInlineExamples, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node, hideInlineExamples]);
175
175
  if (!node) {
176
176
  const firstSlug = findFirstNodeSlug(tree);
177
177
  if (firstSlug) {
@@ -196,18 +196,22 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideI
196
196
  return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar, renderSideBar: !useCustomNav }, node && (React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer }))));
197
197
  };
198
198
 
199
- const itemMatchesHash = (hash, item) => {
200
- return hash.substr(1) === `${item.name}-${item.data.method}`;
201
- };
199
+ const itemUriMatchesPathname = (itemUri, pathname) => itemUri === pathname;
202
200
  const TryItContext = React.createContext({
203
201
  hideTryIt: false,
204
202
  tryItCredentialsPolicy: 'omit',
205
203
  });
206
204
  TryItContext.displayName = 'TryItContext';
207
- const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
205
+ const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, hideInlineExamples, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
208
206
  const location = useLocation();
209
207
  const { groups } = computeTagGroups(serviceNode);
210
- return (React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy, tryItOutDefaultServer } },
208
+ return (React.createElement(TryItContext.Provider, { value: {
209
+ hideTryIt,
210
+ hideInlineExamples,
211
+ tryItCredentialsPolicy,
212
+ corsProxy: tryItCorsProxy,
213
+ tryItOutDefaultServer,
214
+ } },
211
215
  React.createElement(Flex, { w: "full", flexDirection: "col", m: "auto", className: "sl-max-w-4xl" },
212
216
  React.createElement(Box, { w: "full", borderB: true },
213
217
  React.createElement(Docs, { className: "sl-mx-auto", nodeData: serviceNode.data, nodeTitle: serviceNode.name, nodeType: NodeType.HttpService, location: location, layoutOptions: { showPoweredByLink: true, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer })),
@@ -215,24 +219,18 @@ const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps,
215
219
  };
216
220
  const Group = React.memo(({ group }) => {
217
221
  const [isExpanded, setIsExpanded] = React.useState(false);
218
- const { hash } = useLocation();
219
- const scrollRef = React.useRef(null);
220
- const urlHashMatches = hash.substr(1) === group.title;
222
+ const { pathname } = useLocation();
221
223
  const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
222
224
  const shouldExpand = React.useMemo(() => {
223
- return urlHashMatches || group.items.some(item => itemMatchesHash(hash, item));
224
- }, [group, hash, urlHashMatches]);
225
+ return group.items.some(item => itemUriMatchesPathname(item.uri, pathname));
226
+ }, [group, pathname]);
225
227
  React.useEffect(() => {
226
- var _a;
227
228
  if (shouldExpand) {
228
229
  setIsExpanded(true);
229
- if (urlHashMatches && ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop)) {
230
- window.scrollTo(0, scrollRef.current.offsetTop);
231
- }
232
230
  }
233
- }, [shouldExpand, urlHashMatches, group, hash]);
231
+ }, [shouldExpand]);
234
232
  return (React.createElement(Box, null,
235
- React.createElement(Flex, { ref: scrollRef, onClick: onClick, mx: "auto", justifyContent: "between", alignItems: "center", borderB: true, px: 2, py: 4, cursor: "pointer", color: { default: 'current', hover: 'muted' } },
233
+ React.createElement(Flex, { onClick: onClick, mx: "auto", justifyContent: "between", alignItems: "center", borderB: true, px: 2, py: 4, cursor: "pointer", color: { default: 'current', hover: 'muted' } },
236
234
  React.createElement(Box, { fontSize: "lg", fontWeight: "medium" }, group.title),
237
235
  React.createElement(Icon, { className: "sl-mr-2", icon: isExpanded ? 'chevron-down' : 'chevron-right', size: "sm" })),
238
236
  React.createElement(Collapse, { isOpen: isExpanded }, group.items.map(item => {
@@ -241,36 +239,42 @@ const Group = React.memo(({ group }) => {
241
239
  });
242
240
  const Item = React.memo(({ item }) => {
243
241
  const location = useLocation();
244
- const { hash } = location;
242
+ const { pathname } = location;
245
243
  const [isExpanded, setIsExpanded] = React.useState(false);
246
244
  const scrollRef = React.useRef(null);
247
245
  const color = HttpMethodColors[item.data.method] || 'gray';
248
246
  const isDeprecated = !!item.data.deprecated;
249
- const { hideTryIt, tryItCredentialsPolicy, corsProxy, tryItOutDefaultServer } = React.useContext(TryItContext);
250
- const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
247
+ const { hideTryIt, hideInlineExamples, tryItCredentialsPolicy, corsProxy, tryItOutDefaultServer } = React.useContext(TryItContext);
248
+ const onClick = React.useCallback(() => {
249
+ setIsExpanded(!isExpanded);
250
+ if (window && window.location) {
251
+ window.history.pushState(null, '', `#${item.uri}`);
252
+ }
253
+ }, [isExpanded, item]);
251
254
  React.useEffect(() => {
252
- var _a;
253
- if (itemMatchesHash(hash, item)) {
255
+ if (itemUriMatchesPathname(item.uri, pathname)) {
254
256
  setIsExpanded(true);
255
- if ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) {
256
- window.scrollTo(0, scrollRef.current.offsetTop);
257
+ if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
258
+ scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.scrollIntoView();
257
259
  }
258
260
  }
259
- }, [hash, item]);
261
+ }, [pathname, item]);
260
262
  return (React.createElement(Box, { ref: scrollRef, w: "full", my: 2, border: true, borderColor: { default: isExpanded ? 'light' : 'transparent', hover: 'light' }, bg: { default: isExpanded ? 'code' : 'transparent', hover: 'code' } },
261
263
  React.createElement(Flex, { mx: "auto", alignItems: "center", cursor: "pointer", fontSize: "lg", p: 2, onClick: onClick, color: "current" },
262
264
  React.createElement(Box, { w: 24, textTransform: "uppercase", textAlign: "center", fontWeight: "semibold", border: true, rounded: true, px: 2, bg: "canvas", className: cn(`sl-mr-5 sl-text-base`, `sl-text-${color}`, `sl-border-${color}`) }, item.data.method || 'UNKNOWN'),
263
- React.createElement(Box, { flex: 1, fontWeight: "medium", wordBreak: "all" }, item.name),
265
+ React.createElement(Box, { flex: 1, fontWeight: "medium", wordBreak: "all" }, item.data.path),
264
266
  isDeprecated && React.createElement(DeprecatedBadge, null)),
265
- React.createElement(Collapse, { isOpen: isExpanded }, hideTryIt ? (React.createElement(Box, { as: ParsedDocs, layoutOptions: { noHeading: true, hideTryItPanel: true }, node: item, p: 4 })) : (React.createElement(Tabs, { appearance: "line" },
266
- React.createElement(TabList, null,
267
- React.createElement(Tab, null, "Docs"),
268
- React.createElement(Tab, null, "TryIt")),
269
- React.createElement(TabPanels, null,
270
- React.createElement(TabPanel, null,
271
- React.createElement(ParsedDocs, { className: "sl-px-4", node: item, location: location, layoutOptions: { noHeading: true, hideTryItPanel: true } })),
272
- React.createElement(TabPanel, null,
273
- React.createElement(TryItWithRequestSamples, { httpOperation: item.data, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer, corsProxy: corsProxy }))))))));
267
+ React.createElement(Collapse, { isOpen: isExpanded },
268
+ React.createElement(Box, { flex: 1, p: 2, fontWeight: "medium", mx: "auto", fontSize: "xl" }, item.name),
269
+ hideTryIt ? (React.createElement(Box, { as: ParsedDocs, layoutOptions: { noHeading: true, hideTryItPanel: true }, node: item, p: 4 })) : (React.createElement(Tabs, { appearance: "line" },
270
+ React.createElement(TabList, null,
271
+ React.createElement(Tab, null, "Docs"),
272
+ React.createElement(Tab, null, "TryIt")),
273
+ React.createElement(TabPanels, null,
274
+ React.createElement(TabPanel, null,
275
+ React.createElement(ParsedDocs, { className: "sl-px-4", node: item, location: location, layoutOptions: { noHeading: true, hideTryItPanel: true } })),
276
+ React.createElement(TabPanel, null,
277
+ React.createElement(TryItWithRequestSamples, { httpOperation: item.data, hideInlineExamples: hideInlineExamples, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer, corsProxy: corsProxy }))))))));
274
278
  });
275
279
  const Collapse = ({ isOpen, children }) => {
276
280
  if (!isOpen)
@@ -490,7 +494,7 @@ const propsAreWithDocument = (props) => {
490
494
  return props.hasOwnProperty('apiDescriptionDocument');
491
495
  };
492
496
  const APIImpl = props => {
493
- const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, } = props;
497
+ const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, hideInlineExamples, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, } = props;
494
498
  const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
495
499
  const { data: fetchedDocument, error } = useQuery([apiDescriptionUrl], () => fetch(apiDescriptionUrl).then(res => {
496
500
  if (res.ok) {
@@ -517,7 +521,7 @@ const APIImpl = props => {
517
521
  return (React.createElement(Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen" },
518
522
  React.createElement(NonIdealState, { title: "Failed to parse OpenAPI file", description: "Please make sure your OpenAPI file is valid and try again" })));
519
523
  }
520
- return (React.createElement(InlineRefResolverProvider, { document: parsedDocument }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav }))));
524
+ return (React.createElement(InlineRefResolverProvider, { document: parsedDocument }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, hideInlineExamples: hideInlineExamples, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, hideInlineExamples: hideInlineExamples, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav }))));
521
525
  };
522
526
  const API = flow(withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(APIImpl);
523
527
 
@@ -550,4 +554,4 @@ const useGetOasNavTree = (apiDescriptionDocument) => {
550
554
  return groupSchemas(apiTree);
551
555
  };
552
556
 
553
- export { API, useGetOasNavTree };
557
+ export { API, transformOasToServiceNode, useExportDocumentProps, useGetOasNavTree };
package/index.js CHANGED
@@ -190,7 +190,7 @@ const isInternal = (node) => {
190
190
  return !!data['x-internal'];
191
191
  };
192
192
 
193
- const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, }) => {
193
+ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, hideInlineExamples = false, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, }) => {
194
194
  const container = React__namespace.useRef(null);
195
195
  const tree = React__namespace.useMemo(() => {
196
196
  if (!useCustomNav)
@@ -204,7 +204,7 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideI
204
204
  const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
205
205
  React__namespace.useEffect(() => {
206
206
  }, [pathname]);
207
- const layoutOptions = React__namespace.useMemo(() => ({ hideTryIt: hideTryIt, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== types.NodeType.HttpService }), [hideTryIt, hideExport, node]);
207
+ const layoutOptions = React__namespace.useMemo(() => ({ hideTryIt: hideTryIt, hideInlineExamples, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== types.NodeType.HttpService }), [hideTryIt, hideExport, node, hideInlineExamples]);
208
208
  if (!node) {
209
209
  const firstSlug = findFirstNodeSlug(tree);
210
210
  if (firstSlug) {
@@ -229,18 +229,22 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideI
229
229
  return (React__namespace.createElement(elementalCore.SidebarLayout, { ref: container, sidebar: sidebar, renderSideBar: !useCustomNav }, node && (React__namespace.createElement(elementalCore.ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer }))));
230
230
  };
231
231
 
232
- const itemMatchesHash = (hash, item) => {
233
- return hash.substr(1) === `${item.name}-${item.data.method}`;
234
- };
232
+ const itemUriMatchesPathname = (itemUri, pathname) => itemUri === pathname;
235
233
  const TryItContext = React__namespace.createContext({
236
234
  hideTryIt: false,
237
235
  tryItCredentialsPolicy: 'omit',
238
236
  });
239
237
  TryItContext.displayName = 'TryItContext';
240
- const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
238
+ const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, hideInlineExamples, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
241
239
  const location = reactRouterDom.useLocation();
242
240
  const { groups } = computeTagGroups(serviceNode);
243
- return (React__namespace.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy, tryItOutDefaultServer } },
241
+ return (React__namespace.createElement(TryItContext.Provider, { value: {
242
+ hideTryIt,
243
+ hideInlineExamples,
244
+ tryItCredentialsPolicy,
245
+ corsProxy: tryItCorsProxy,
246
+ tryItOutDefaultServer,
247
+ } },
244
248
  React__namespace.createElement(mosaic.Flex, { w: "full", flexDirection: "col", m: "auto", className: "sl-max-w-4xl" },
245
249
  React__namespace.createElement(mosaic.Box, { w: "full", borderB: true },
246
250
  React__namespace.createElement(elementalCore.Docs, { className: "sl-mx-auto", nodeData: serviceNode.data, nodeTitle: serviceNode.name, nodeType: types.NodeType.HttpService, location: location, layoutOptions: { showPoweredByLink: true, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer })),
@@ -248,24 +252,18 @@ const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps,
248
252
  };
249
253
  const Group = React__namespace.memo(({ group }) => {
250
254
  const [isExpanded, setIsExpanded] = React__namespace.useState(false);
251
- const { hash } = reactRouterDom.useLocation();
252
- const scrollRef = React__namespace.useRef(null);
253
- const urlHashMatches = hash.substr(1) === group.title;
255
+ const { pathname } = reactRouterDom.useLocation();
254
256
  const onClick = React__namespace.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
255
257
  const shouldExpand = React__namespace.useMemo(() => {
256
- return urlHashMatches || group.items.some(item => itemMatchesHash(hash, item));
257
- }, [group, hash, urlHashMatches]);
258
+ return group.items.some(item => itemUriMatchesPathname(item.uri, pathname));
259
+ }, [group, pathname]);
258
260
  React__namespace.useEffect(() => {
259
- var _a;
260
261
  if (shouldExpand) {
261
262
  setIsExpanded(true);
262
- if (urlHashMatches && ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop)) {
263
- window.scrollTo(0, scrollRef.current.offsetTop);
264
- }
265
263
  }
266
- }, [shouldExpand, urlHashMatches, group, hash]);
264
+ }, [shouldExpand]);
267
265
  return (React__namespace.createElement(mosaic.Box, null,
268
- React__namespace.createElement(mosaic.Flex, { ref: scrollRef, onClick: onClick, mx: "auto", justifyContent: "between", alignItems: "center", borderB: true, px: 2, py: 4, cursor: "pointer", color: { default: 'current', hover: 'muted' } },
266
+ React__namespace.createElement(mosaic.Flex, { onClick: onClick, mx: "auto", justifyContent: "between", alignItems: "center", borderB: true, px: 2, py: 4, cursor: "pointer", color: { default: 'current', hover: 'muted' } },
269
267
  React__namespace.createElement(mosaic.Box, { fontSize: "lg", fontWeight: "medium" }, group.title),
270
268
  React__namespace.createElement(mosaic.Icon, { className: "sl-mr-2", icon: isExpanded ? 'chevron-down' : 'chevron-right', size: "sm" })),
271
269
  React__namespace.createElement(Collapse, { isOpen: isExpanded }, group.items.map(item => {
@@ -274,36 +272,42 @@ const Group = React__namespace.memo(({ group }) => {
274
272
  });
275
273
  const Item = React__namespace.memo(({ item }) => {
276
274
  const location = reactRouterDom.useLocation();
277
- const { hash } = location;
275
+ const { pathname } = location;
278
276
  const [isExpanded, setIsExpanded] = React__namespace.useState(false);
279
277
  const scrollRef = React__namespace.useRef(null);
280
278
  const color = elementalCore.HttpMethodColors[item.data.method] || 'gray';
281
279
  const isDeprecated = !!item.data.deprecated;
282
- const { hideTryIt, tryItCredentialsPolicy, corsProxy, tryItOutDefaultServer } = React__namespace.useContext(TryItContext);
283
- const onClick = React__namespace.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
280
+ const { hideTryIt, hideInlineExamples, tryItCredentialsPolicy, corsProxy, tryItOutDefaultServer } = React__namespace.useContext(TryItContext);
281
+ const onClick = React__namespace.useCallback(() => {
282
+ setIsExpanded(!isExpanded);
283
+ if (window && window.location) {
284
+ window.history.pushState(null, '', `#${item.uri}`);
285
+ }
286
+ }, [isExpanded, item]);
284
287
  React__namespace.useEffect(() => {
285
- var _a;
286
- if (itemMatchesHash(hash, item)) {
288
+ if (itemUriMatchesPathname(item.uri, pathname)) {
287
289
  setIsExpanded(true);
288
- if ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) {
289
- window.scrollTo(0, scrollRef.current.offsetTop);
290
+ if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
291
+ scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.scrollIntoView();
290
292
  }
291
293
  }
292
- }, [hash, item]);
294
+ }, [pathname, item]);
293
295
  return (React__namespace.createElement(mosaic.Box, { ref: scrollRef, w: "full", my: 2, border: true, borderColor: { default: isExpanded ? 'light' : 'transparent', hover: 'light' }, bg: { default: isExpanded ? 'code' : 'transparent', hover: 'code' } },
294
296
  React__namespace.createElement(mosaic.Flex, { mx: "auto", alignItems: "center", cursor: "pointer", fontSize: "lg", p: 2, onClick: onClick, color: "current" },
295
297
  React__namespace.createElement(mosaic.Box, { w: 24, textTransform: "uppercase", textAlign: "center", fontWeight: "semibold", border: true, rounded: true, px: 2, bg: "canvas", className: cn__default["default"](`sl-mr-5 sl-text-base`, `sl-text-${color}`, `sl-border-${color}`) }, item.data.method || 'UNKNOWN'),
296
- React__namespace.createElement(mosaic.Box, { flex: 1, fontWeight: "medium", wordBreak: "all" }, item.name),
298
+ React__namespace.createElement(mosaic.Box, { flex: 1, fontWeight: "medium", wordBreak: "all" }, item.data.path),
297
299
  isDeprecated && React__namespace.createElement(elementalCore.DeprecatedBadge, null)),
298
- React__namespace.createElement(Collapse, { isOpen: isExpanded }, hideTryIt ? (React__namespace.createElement(mosaic.Box, { as: elementalCore.ParsedDocs, layoutOptions: { noHeading: true, hideTryItPanel: true }, node: item, p: 4 })) : (React__namespace.createElement(mosaic.Tabs, { appearance: "line" },
299
- React__namespace.createElement(mosaic.TabList, null,
300
- React__namespace.createElement(mosaic.Tab, null, "Docs"),
301
- React__namespace.createElement(mosaic.Tab, null, "TryIt")),
302
- React__namespace.createElement(mosaic.TabPanels, null,
303
- React__namespace.createElement(mosaic.TabPanel, null,
304
- React__namespace.createElement(elementalCore.ParsedDocs, { className: "sl-px-4", node: item, location: location, layoutOptions: { noHeading: true, hideTryItPanel: true } })),
305
- React__namespace.createElement(mosaic.TabPanel, null,
306
- React__namespace.createElement(elementalCore.TryItWithRequestSamples, { httpOperation: item.data, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer, corsProxy: corsProxy }))))))));
300
+ React__namespace.createElement(Collapse, { isOpen: isExpanded },
301
+ React__namespace.createElement(mosaic.Box, { flex: 1, p: 2, fontWeight: "medium", mx: "auto", fontSize: "xl" }, item.name),
302
+ hideTryIt ? (React__namespace.createElement(mosaic.Box, { as: elementalCore.ParsedDocs, layoutOptions: { noHeading: true, hideTryItPanel: true }, node: item, p: 4 })) : (React__namespace.createElement(mosaic.Tabs, { appearance: "line" },
303
+ React__namespace.createElement(mosaic.TabList, null,
304
+ React__namespace.createElement(mosaic.Tab, null, "Docs"),
305
+ React__namespace.createElement(mosaic.Tab, null, "TryIt")),
306
+ React__namespace.createElement(mosaic.TabPanels, null,
307
+ React__namespace.createElement(mosaic.TabPanel, null,
308
+ React__namespace.createElement(elementalCore.ParsedDocs, { className: "sl-px-4", node: item, location: location, layoutOptions: { noHeading: true, hideTryItPanel: true } })),
309
+ React__namespace.createElement(mosaic.TabPanel, null,
310
+ React__namespace.createElement(elementalCore.TryItWithRequestSamples, { httpOperation: item.data, hideInlineExamples: hideInlineExamples, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer, corsProxy: corsProxy }))))))));
307
311
  });
308
312
  const Collapse = ({ isOpen, children }) => {
309
313
  if (!isOpen)
@@ -523,7 +527,7 @@ const propsAreWithDocument = (props) => {
523
527
  return props.hasOwnProperty('apiDescriptionDocument');
524
528
  };
525
529
  const APIImpl = props => {
526
- const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, } = props;
530
+ const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, hideInlineExamples, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, } = props;
527
531
  const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
528
532
  const { data: fetchedDocument, error } = reactQuery.useQuery([apiDescriptionUrl], () => fetch(apiDescriptionUrl).then(res => {
529
533
  if (res.ok) {
@@ -550,7 +554,7 @@ const APIImpl = props => {
550
554
  return (React__namespace.createElement(mosaic.Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen" },
551
555
  React__namespace.createElement(elementalCore.NonIdealState, { title: "Failed to parse OpenAPI file", description: "Please make sure your OpenAPI file is valid and try again" })));
552
556
  }
553
- return (React__namespace.createElement(elementalCore.InlineRefResolverProvider, { document: parsedDocument }, layout === 'stacked' ? (React__namespace.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React__namespace.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav }))));
557
+ return (React__namespace.createElement(elementalCore.InlineRefResolverProvider, { document: parsedDocument }, layout === 'stacked' ? (React__namespace.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, hideInlineExamples: hideInlineExamples, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React__namespace.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, hideInlineExamples: hideInlineExamples, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav }))));
554
558
  };
555
559
  const API = flow__default["default"](elementalCore.withRouter, elementalCore.withStyles, elementalCore.withPersistenceBoundary, elementalCore.withMosaicProvider, elementalCore.withQueryClientProvider)(APIImpl);
556
560
 
@@ -584,4 +588,6 @@ const useGetOasNavTree = (apiDescriptionDocument) => {
584
588
  };
585
589
 
586
590
  exports.API = API;
591
+ exports.transformOasToServiceNode = transformOasToServiceNode;
592
+ exports.useExportDocumentProps = useExportDocumentProps;
587
593
  exports.useGetOasNavTree = useGetOasNavTree;
package/index.mjs CHANGED
@@ -157,7 +157,7 @@ const isInternal = (node) => {
157
157
  return !!data['x-internal'];
158
158
  };
159
159
 
160
- const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, }) => {
160
+ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, hideInlineExamples = false, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, }) => {
161
161
  const container = React.useRef(null);
162
162
  const tree = React.useMemo(() => {
163
163
  if (!useCustomNav)
@@ -171,7 +171,7 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideI
171
171
  const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
172
172
  React.useEffect(() => {
173
173
  }, [pathname]);
174
- const layoutOptions = React.useMemo(() => ({ hideTryIt: hideTryIt, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node]);
174
+ const layoutOptions = React.useMemo(() => ({ hideTryIt: hideTryIt, hideInlineExamples, hideExport: hideExport || (node === null || node === void 0 ? void 0 : node.type) !== NodeType.HttpService }), [hideTryIt, hideExport, node, hideInlineExamples]);
175
175
  if (!node) {
176
176
  const firstSlug = findFirstNodeSlug(tree);
177
177
  if (firstSlug) {
@@ -196,18 +196,22 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideI
196
196
  return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar, renderSideBar: !useCustomNav }, node && (React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer }))));
197
197
  };
198
198
 
199
- const itemMatchesHash = (hash, item) => {
200
- return hash.substr(1) === `${item.name}-${item.data.method}`;
201
- };
199
+ const itemUriMatchesPathname = (itemUri, pathname) => itemUri === pathname;
202
200
  const TryItContext = React.createContext({
203
201
  hideTryIt: false,
204
202
  tryItCredentialsPolicy: 'omit',
205
203
  });
206
204
  TryItContext.displayName = 'TryItContext';
207
- const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
205
+ const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, hideInlineExamples, exportProps, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, }) => {
208
206
  const location = useLocation();
209
207
  const { groups } = computeTagGroups(serviceNode);
210
- return (React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy, tryItOutDefaultServer } },
208
+ return (React.createElement(TryItContext.Provider, { value: {
209
+ hideTryIt,
210
+ hideInlineExamples,
211
+ tryItCredentialsPolicy,
212
+ corsProxy: tryItCorsProxy,
213
+ tryItOutDefaultServer,
214
+ } },
211
215
  React.createElement(Flex, { w: "full", flexDirection: "col", m: "auto", className: "sl-max-w-4xl" },
212
216
  React.createElement(Box, { w: "full", borderB: true },
213
217
  React.createElement(Docs, { className: "sl-mx-auto", nodeData: serviceNode.data, nodeTitle: serviceNode.name, nodeType: NodeType.HttpService, location: location, layoutOptions: { showPoweredByLink: true, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer })),
@@ -215,24 +219,18 @@ const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps,
215
219
  };
216
220
  const Group = React.memo(({ group }) => {
217
221
  const [isExpanded, setIsExpanded] = React.useState(false);
218
- const { hash } = useLocation();
219
- const scrollRef = React.useRef(null);
220
- const urlHashMatches = hash.substr(1) === group.title;
222
+ const { pathname } = useLocation();
221
223
  const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
222
224
  const shouldExpand = React.useMemo(() => {
223
- return urlHashMatches || group.items.some(item => itemMatchesHash(hash, item));
224
- }, [group, hash, urlHashMatches]);
225
+ return group.items.some(item => itemUriMatchesPathname(item.uri, pathname));
226
+ }, [group, pathname]);
225
227
  React.useEffect(() => {
226
- var _a;
227
228
  if (shouldExpand) {
228
229
  setIsExpanded(true);
229
- if (urlHashMatches && ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop)) {
230
- window.scrollTo(0, scrollRef.current.offsetTop);
231
- }
232
230
  }
233
- }, [shouldExpand, urlHashMatches, group, hash]);
231
+ }, [shouldExpand]);
234
232
  return (React.createElement(Box, null,
235
- React.createElement(Flex, { ref: scrollRef, onClick: onClick, mx: "auto", justifyContent: "between", alignItems: "center", borderB: true, px: 2, py: 4, cursor: "pointer", color: { default: 'current', hover: 'muted' } },
233
+ React.createElement(Flex, { onClick: onClick, mx: "auto", justifyContent: "between", alignItems: "center", borderB: true, px: 2, py: 4, cursor: "pointer", color: { default: 'current', hover: 'muted' } },
236
234
  React.createElement(Box, { fontSize: "lg", fontWeight: "medium" }, group.title),
237
235
  React.createElement(Icon, { className: "sl-mr-2", icon: isExpanded ? 'chevron-down' : 'chevron-right', size: "sm" })),
238
236
  React.createElement(Collapse, { isOpen: isExpanded }, group.items.map(item => {
@@ -241,36 +239,42 @@ const Group = React.memo(({ group }) => {
241
239
  });
242
240
  const Item = React.memo(({ item }) => {
243
241
  const location = useLocation();
244
- const { hash } = location;
242
+ const { pathname } = location;
245
243
  const [isExpanded, setIsExpanded] = React.useState(false);
246
244
  const scrollRef = React.useRef(null);
247
245
  const color = HttpMethodColors[item.data.method] || 'gray';
248
246
  const isDeprecated = !!item.data.deprecated;
249
- const { hideTryIt, tryItCredentialsPolicy, corsProxy, tryItOutDefaultServer } = React.useContext(TryItContext);
250
- const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
247
+ const { hideTryIt, hideInlineExamples, tryItCredentialsPolicy, corsProxy, tryItOutDefaultServer } = React.useContext(TryItContext);
248
+ const onClick = React.useCallback(() => {
249
+ setIsExpanded(!isExpanded);
250
+ if (window && window.location) {
251
+ window.history.pushState(null, '', `#${item.uri}`);
252
+ }
253
+ }, [isExpanded, item]);
251
254
  React.useEffect(() => {
252
- var _a;
253
- if (itemMatchesHash(hash, item)) {
255
+ if (itemUriMatchesPathname(item.uri, pathname)) {
254
256
  setIsExpanded(true);
255
- if ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) {
256
- window.scrollTo(0, scrollRef.current.offsetTop);
257
+ if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
258
+ scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.scrollIntoView();
257
259
  }
258
260
  }
259
- }, [hash, item]);
261
+ }, [pathname, item]);
260
262
  return (React.createElement(Box, { ref: scrollRef, w: "full", my: 2, border: true, borderColor: { default: isExpanded ? 'light' : 'transparent', hover: 'light' }, bg: { default: isExpanded ? 'code' : 'transparent', hover: 'code' } },
261
263
  React.createElement(Flex, { mx: "auto", alignItems: "center", cursor: "pointer", fontSize: "lg", p: 2, onClick: onClick, color: "current" },
262
264
  React.createElement(Box, { w: 24, textTransform: "uppercase", textAlign: "center", fontWeight: "semibold", border: true, rounded: true, px: 2, bg: "canvas", className: cn(`sl-mr-5 sl-text-base`, `sl-text-${color}`, `sl-border-${color}`) }, item.data.method || 'UNKNOWN'),
263
- React.createElement(Box, { flex: 1, fontWeight: "medium", wordBreak: "all" }, item.name),
265
+ React.createElement(Box, { flex: 1, fontWeight: "medium", wordBreak: "all" }, item.data.path),
264
266
  isDeprecated && React.createElement(DeprecatedBadge, null)),
265
- React.createElement(Collapse, { isOpen: isExpanded }, hideTryIt ? (React.createElement(Box, { as: ParsedDocs, layoutOptions: { noHeading: true, hideTryItPanel: true }, node: item, p: 4 })) : (React.createElement(Tabs, { appearance: "line" },
266
- React.createElement(TabList, null,
267
- React.createElement(Tab, null, "Docs"),
268
- React.createElement(Tab, null, "TryIt")),
269
- React.createElement(TabPanels, null,
270
- React.createElement(TabPanel, null,
271
- React.createElement(ParsedDocs, { className: "sl-px-4", node: item, location: location, layoutOptions: { noHeading: true, hideTryItPanel: true } })),
272
- React.createElement(TabPanel, null,
273
- React.createElement(TryItWithRequestSamples, { httpOperation: item.data, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer, corsProxy: corsProxy }))))))));
267
+ React.createElement(Collapse, { isOpen: isExpanded },
268
+ React.createElement(Box, { flex: 1, p: 2, fontWeight: "medium", mx: "auto", fontSize: "xl" }, item.name),
269
+ hideTryIt ? (React.createElement(Box, { as: ParsedDocs, layoutOptions: { noHeading: true, hideTryItPanel: true }, node: item, p: 4 })) : (React.createElement(Tabs, { appearance: "line" },
270
+ React.createElement(TabList, null,
271
+ React.createElement(Tab, null, "Docs"),
272
+ React.createElement(Tab, null, "TryIt")),
273
+ React.createElement(TabPanels, null,
274
+ React.createElement(TabPanel, null,
275
+ React.createElement(ParsedDocs, { className: "sl-px-4", node: item, location: location, layoutOptions: { noHeading: true, hideTryItPanel: true } })),
276
+ React.createElement(TabPanel, null,
277
+ React.createElement(TryItWithRequestSamples, { httpOperation: item.data, hideInlineExamples: hideInlineExamples, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItOutDefaultServer: tryItOutDefaultServer, corsProxy: corsProxy }))))))));
274
278
  });
275
279
  const Collapse = ({ isOpen, children }) => {
276
280
  if (!isOpen)
@@ -490,7 +494,7 @@ const propsAreWithDocument = (props) => {
490
494
  return props.hasOwnProperty('apiDescriptionDocument');
491
495
  };
492
496
  const APIImpl = props => {
493
- const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, } = props;
497
+ const { layout, apiDescriptionUrl = '', logo, hideTryIt, hideSchemas, hideInternal, hideExport, hideInlineExamples, tryItCredentialsPolicy, tryItCorsProxy, tryItOutDefaultServer, useCustomNav, } = props;
494
498
  const apiDescriptionDocument = propsAreWithDocument(props) ? props.apiDescriptionDocument : undefined;
495
499
  const { data: fetchedDocument, error } = useQuery([apiDescriptionUrl], () => fetch(apiDescriptionUrl).then(res => {
496
500
  if (res.ok) {
@@ -517,7 +521,7 @@ const APIImpl = props => {
517
521
  return (React.createElement(Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen" },
518
522
  React.createElement(NonIdealState, { title: "Failed to parse OpenAPI file", description: "Please make sure your OpenAPI file is valid and try again" })));
519
523
  }
520
- return (React.createElement(InlineRefResolverProvider, { document: parsedDocument }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav }))));
524
+ return (React.createElement(InlineRefResolverProvider, { document: parsedDocument }, layout === 'stacked' ? (React.createElement(APIWithStackedLayout, { serviceNode: serviceNode, hideTryIt: hideTryIt, hideExport: hideExport, hideInlineExamples: hideInlineExamples, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer })) : (React.createElement(APIWithSidebarLayout, { logo: logo, serviceNode: serviceNode, hideTryIt: hideTryIt, hideSchemas: hideSchemas, hideInternal: hideInternal, hideExport: hideExport, hideInlineExamples: hideInlineExamples, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy, tryItOutDefaultServer: tryItOutDefaultServer, useCustomNav: useCustomNav }))));
521
525
  };
522
526
  const API = flow(withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(APIImpl);
523
527
 
@@ -550,4 +554,4 @@ const useGetOasNavTree = (apiDescriptionDocument) => {
550
554
  return groupSchemas(apiTree);
551
555
  };
552
556
 
553
- export { API, useGetOasNavTree };
557
+ export { API, transformOasToServiceNode, useExportDocumentProps, useGetOasNavTree };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jpmorganchase/elemental",
3
- "version": "3.2.1",
3
+ "version": "4.2.0",
4
4
  "description": "UI components for composing beautiful developer documentation.",
5
5
  "keywords": [],
6
6
  "main": "./index.js",
@@ -26,10 +26,10 @@
26
26
  "react-dom": ">=16.8"
27
27
  },
28
28
  "dependencies": {
29
- "@jpmorganchase/elemental-core": "^1.3.1",
29
+ "@jpmorganchase/elemental-core": "^1.6.0",
30
30
  "@stoplight/http-spec": "^6.0.0",
31
31
  "@stoplight/json": "^3.18.1",
32
- "@stoplight/mosaic": "^1.44.3",
32
+ "@stoplight/mosaic": "^1.44.4",
33
33
  "@stoplight/types": "^14.0.0",
34
34
  "@stoplight/yaml": "^4.2.3",
35
35
  "classnames": "^2.2.6",