@jpmorganchase/elemental 3.2.1 → 4.2.0

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 (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",