@stoplight/elements-dev-portal 2.3.3 → 2.4.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.
package/index.mjs CHANGED
@@ -8,36 +8,36 @@ import flow from 'lodash/flow.js';
8
8
  import { Switch, Route, useParams, useHistory, Redirect, Link } from 'react-router-dom';
9
9
  import { useQuery } from 'react-query';
10
10
 
11
- const BranchSelector = ({ branchSlug, branches, onChange }) => {
12
- const currentBranch = branches.find(branch => (!branchSlug ? branch.is_default : branch.slug === branchSlug));
13
- const handleChange = React.useCallback((selectedSlug) => {
14
- const selectedBranch = branches.find(branch => branch.slug === selectedSlug);
15
- if (selectedBranch) {
16
- onChange(selectedBranch);
17
- }
18
- }, [onChange, branches]);
19
- return (React.createElement(Menu, { "aria-label": "Versions", placement: "bottom left", closeOnPress: true, matchTriggerWidth: true, renderTrigger: ({ isOpen }) => (React.createElement(FieldButton, { w: "full", icon: "layer-group", px: 4, h: "md", active: isOpen, borderR: 0, roundedR: "none" }, (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.name) || (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || 'Choose a version')), items: [
20
- {
21
- type: 'option_group',
22
- title: 'Versions',
23
- onChange: handleChange,
24
- value: (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || '',
25
- children: branches.map(branch => ({
26
- title: branch.name || branch.slug,
27
- value: branch.slug,
28
- meta: branch.is_default ? 'Default' : undefined,
29
- })),
30
- },
31
- ] }));
11
+ const BranchSelector = ({ branchSlug, branches, onChange }) => {
12
+ const currentBranch = branches.find(branch => (!branchSlug ? branch.is_default : branch.slug === branchSlug));
13
+ const handleChange = React.useCallback((selectedSlug) => {
14
+ const selectedBranch = branches.find(branch => branch.slug === selectedSlug);
15
+ if (selectedBranch) {
16
+ onChange(selectedBranch);
17
+ }
18
+ }, [onChange, branches]);
19
+ return (React.createElement(Menu, { "aria-label": "Versions", placement: "bottom left", closeOnPress: true, matchTriggerWidth: true, renderTrigger: ({ isOpen }) => (React.createElement(FieldButton, { w: "full", icon: "layer-group", px: 4, h: "md", active: isOpen, borderR: 0, roundedR: "none" }, (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.name) || (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || 'Choose a version')), items: [
20
+ {
21
+ type: 'option_group',
22
+ title: 'Versions',
23
+ onChange: handleChange,
24
+ value: (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || '',
25
+ children: branches.map(branch => ({
26
+ title: branch.name || branch.slug,
27
+ value: branch.slug,
28
+ meta: branch.is_default ? 'Default' : undefined,
29
+ })),
30
+ },
31
+ ] }));
32
32
  };
33
33
 
34
- const PlatformContext = React.createContext({ platformUrl: 'https://stoplight.io' });
35
- const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, isLoggedIn, children, }) => {
36
- return (React.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken, isLoggedIn } }, children));
37
- };
34
+ const PlatformContext = React.createContext({ platformUrl: 'https://stoplight.io' });
35
+ const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, isLoggedIn, children, }) => {
36
+ return (React.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken, isLoggedIn } }, children));
37
+ };
38
38
  const DevPortalProvider = withPersistenceBoundary(withQueryClientProvider(withMosaicProvider(PlatformProvider)));
39
39
 
40
- /*! *****************************************************************************
40
+ /******************************************************************************
41
41
  Copyright (c) Microsoft Corporation.
42
42
 
43
43
  Permission to use, copy, modify, and/or distribute this software for any
@@ -51,6 +51,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
51
51
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
52
52
  PERFORMANCE OF THIS SOFTWARE.
53
53
  ***************************************************************************** */
54
+ /* global Reflect, Promise, SuppressedError, Symbol */
55
+
54
56
 
55
57
  function __rest(s, e) {
56
58
  var t = {};
@@ -72,89 +74,97 @@ function __awaiter(thisArg, _arguments, P, generator) {
72
74
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
73
75
  step((generator = generator.apply(thisArg, _arguments || [])).next());
74
76
  });
75
- }
76
-
77
- const NodeContent = ({ node, Link, hideMocking, refResolver, maxRefDepth, tryItCorsProxy, tryItCredentialsPolicy, nodeHasChanged, nodeUnsupported, compact, hideTryIt, hideTryItPanel, hideExport, onExportRequest, }) => {
78
- var _a, _b, _c, _d;
79
- return (React.createElement(NodeLinkContext.Provider, { value: [node, Link] },
80
- React.createElement(MarkdownComponentsProvider, { value: {
81
- a: LinkComponent,
82
- h2: (_a) => {
83
- var props = __rest(_a, ["color"]);
84
- return React.createElement(LinkHeading, Object.assign({ size: 2 }, props));
85
- },
86
- h3: (_a) => {
87
- var props = __rest(_a, ["color"]);
88
- return React.createElement(LinkHeading, Object.assign({ size: 3 }, props));
89
- },
90
- h4: (_a) => {
91
- var props = __rest(_a, ["color"]);
92
- return React.createElement(LinkHeading, Object.assign({ size: 4 }, props));
93
- },
94
- } },
95
- React.createElement(MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
96
- React.createElement(Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
97
- compact,
98
- hideTryIt: hideTryIt,
99
- hideTryItPanel: hideTryItPanel,
100
- hideExport: hideExport ||
101
- ((_b = (_a = node.links.export_url) !== null && _a !== void 0 ? _a : node.links.export_original_file_url) !== null && _b !== void 0 ? _b : node.links.export_bundled_file_url) ===
102
- undefined,
103
- }, useNodeForRefResolving: true, refResolver: refResolver, maxRefDepth: maxRefDepth, tryItCorsProxy: tryItCorsProxy, exportProps: [NodeType.HttpService, NodeType.Model].includes(node.type)
104
- ? {
105
- original: onExportRequest
106
- ? { onPress: () => onExportRequest('original') }
107
- : { href: (_c = node.links.export_original_file_url) !== null && _c !== void 0 ? _c : node.links.export_url },
108
- bundled: onExportRequest
109
- ? { onPress: () => onExportRequest('bundled') }
110
- : { href: (_d = node.links.export_bundled_file_url) !== null && _d !== void 0 ? _d : getBundledUrl(node.links.export_url) },
111
- }
112
- : undefined, tryItCredentialsPolicy: tryItCredentialsPolicy, nodeHasChanged: nodeHasChanged, nodeUnsupported: nodeUnsupported })))));
113
- };
114
- const NodeLinkContext = React.createContext(undefined);
115
- const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
116
- const LinkComponent = ({ children, href, title }) => {
117
- const ctx = React.useContext(NodeLinkContext);
118
- if (href && externalRegex.test(href)) {
119
- return (React.createElement("a", { href: href, target: "_blank", rel: "noreferrer", title: title ? title : undefined }, children));
120
- }
121
- if (href && ctx) {
122
- const [node, Link] = ctx;
123
- const { fileUri } = getNodeUriParts(node.uri);
124
- const { fileUri: hrefFileUri } = getNodeUriParts(href);
125
- let resolvedUri;
126
- if (hrefFileUri) {
127
- resolvedUri = resolve(dirname(fileUri), href);
128
- }
129
- else {
130
- resolvedUri = resolve(fileUri, href);
131
- }
132
- const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
133
- const decodedUrl = decodeURIComponent(href);
134
- const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
135
- const edge = node.outbound_edges.find(edge => edge.uri === decodedUrl || edge.uri === decodedResolvedUriWithoutAnchor);
136
- if (edge) {
137
- return React.createElement(Link, { to: `${edge.slug}${hash ? `#${hash}` : ''}` }, children);
138
- }
139
- }
140
- return React.createElement("a", { href: href }, children);
141
- };
142
- function getBundledUrl(url) {
143
- if (url === undefined)
144
- return undefined;
145
- const bundledUrl = new URL(url);
146
- const searchParams = new URLSearchParams(bundledUrl.search);
147
- searchParams.append('deref', 'optimizedBundle');
148
- bundledUrl.search = searchParams.toString();
149
- return bundledUrl.toString();
150
77
  }
151
- const getNodeUriParts = (uri) => {
152
- const parts = uri.split(/(\.yaml|\.yml|\.json|\.md)/);
153
- if (parts.length === 1) {
154
- return { fileUri: '', pointer: parts[0] || '' };
155
- }
156
- const fileUri = `${parts[0] || ''}${parts[1] || ''}`;
157
- return { fileUri, pointer: parts[2] || '' };
78
+
79
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
80
+ var e = new Error(message);
81
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
82
+ };
83
+
84
+ const NodeContent = ({ node, Link, hideMocking, refResolver, maxRefDepth, tryItCorsProxy, tryItCredentialsPolicy, nodeHasChanged, nodeUnsupported, compact, hideTryIt, hideSamples, hideTryItPanel, hideSecurityInfo, hideServerInfo, hideExport, onExportRequest, }) => {
85
+ var _a, _b, _c, _d;
86
+ return (React.createElement(NodeLinkContext.Provider, { value: [node, Link] },
87
+ React.createElement(MarkdownComponentsProvider, { value: {
88
+ a: LinkComponent,
89
+ h2: (_a) => {
90
+ var props = __rest(_a, ["color"]);
91
+ return React.createElement(LinkHeading, Object.assign({ size: 2 }, props));
92
+ },
93
+ h3: (_a) => {
94
+ var props = __rest(_a, ["color"]);
95
+ return React.createElement(LinkHeading, Object.assign({ size: 3 }, props));
96
+ },
97
+ h4: (_a) => {
98
+ var props = __rest(_a, ["color"]);
99
+ return React.createElement(LinkHeading, Object.assign({ size: 4 }, props));
100
+ },
101
+ } },
102
+ React.createElement(MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
103
+ React.createElement(Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
104
+ compact,
105
+ hideTryIt: hideTryIt,
106
+ hideTryItPanel: hideTryItPanel,
107
+ hideSamples,
108
+ hideSecurityInfo: hideSecurityInfo,
109
+ hideServerInfo: hideServerInfo,
110
+ hideExport: hideExport ||
111
+ ((_b = (_a = node.links.export_url) !== null && _a !== void 0 ? _a : node.links.export_original_file_url) !== null && _b !== void 0 ? _b : node.links.export_bundled_file_url) ===
112
+ undefined,
113
+ }, useNodeForRefResolving: true, refResolver: refResolver, maxRefDepth: maxRefDepth, tryItCorsProxy: tryItCorsProxy, exportProps: [NodeType.HttpService, NodeType.Model].includes(node.type)
114
+ ? {
115
+ original: onExportRequest
116
+ ? { onPress: () => onExportRequest('original') }
117
+ : { href: (_c = node.links.export_original_file_url) !== null && _c !== void 0 ? _c : node.links.export_url },
118
+ bundled: onExportRequest
119
+ ? { onPress: () => onExportRequest('bundled') }
120
+ : { href: (_d = node.links.export_bundled_file_url) !== null && _d !== void 0 ? _d : getBundledUrl(node.links.export_url) },
121
+ }
122
+ : undefined, tryItCredentialsPolicy: tryItCredentialsPolicy, nodeHasChanged: nodeHasChanged, nodeUnsupported: nodeUnsupported })))));
123
+ };
124
+ const NodeLinkContext = React.createContext(undefined);
125
+ const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
126
+ const LinkComponent = ({ children, href, title }) => {
127
+ const ctx = React.useContext(NodeLinkContext);
128
+ if (href && externalRegex.test(href)) {
129
+ return (React.createElement("a", { href: href, target: "_blank", rel: "noreferrer", title: title ? title : undefined }, children));
130
+ }
131
+ if (href && ctx) {
132
+ const [node, Link] = ctx;
133
+ const { fileUri } = getNodeUriParts(node.uri);
134
+ const { fileUri: hrefFileUri } = getNodeUriParts(href);
135
+ let resolvedUri;
136
+ if (hrefFileUri) {
137
+ resolvedUri = resolve(dirname(fileUri), href);
138
+ }
139
+ else {
140
+ resolvedUri = resolve(fileUri, href);
141
+ }
142
+ const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
143
+ const decodedUrl = decodeURIComponent(href);
144
+ const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
145
+ const edge = node.outbound_edges.find(edge => edge.uri === decodedUrl || edge.uri === decodedResolvedUriWithoutAnchor);
146
+ if (edge) {
147
+ return React.createElement(Link, { to: `${edge.slug}${hash ? `#${hash}` : ''}` }, children);
148
+ }
149
+ }
150
+ return React.createElement("a", { href: href }, children);
151
+ };
152
+ function getBundledUrl(url) {
153
+ if (url === undefined)
154
+ return undefined;
155
+ const bundledUrl = new URL(url);
156
+ const searchParams = new URLSearchParams(bundledUrl.search);
157
+ searchParams.append('deref', 'optimizedBundle');
158
+ bundledUrl.search = searchParams.toString();
159
+ return bundledUrl.toString();
160
+ }
161
+ const getNodeUriParts = (uri) => {
162
+ const parts = uri.split(/(\.yaml|\.yml|\.json|\.md)/);
163
+ if (parts.length === 1) {
164
+ return { fileUri: '', pointer: parts[0] || '' };
165
+ }
166
+ const fileUri = `${parts[0] || ''}${parts[1] || ''}`;
167
+ return { fileUri, pointer: parts[2] || '' };
158
168
  };
159
169
 
160
170
  /*!
@@ -179,287 +189,287 @@ var faSpinner = {
179
189
  icon: [512, 512, [], "f110", "M304 48C304 74.51 282.5 96 256 96C229.5 96 208 74.51 208 48C208 21.49 229.5 0 256 0C282.5 0 304 21.49 304 48zM304 464C304 490.5 282.5 512 256 512C229.5 512 208 490.5 208 464C208 437.5 229.5 416 256 416C282.5 416 304 437.5 304 464zM0 256C0 229.5 21.49 208 48 208C74.51 208 96 229.5 96 256C96 282.5 74.51 304 48 304C21.49 304 0 282.5 0 256zM512 256C512 282.5 490.5 304 464 304C437.5 304 416 282.5 416 256C416 229.5 437.5 208 464 208C490.5 208 512 229.5 512 256zM74.98 437C56.23 418.3 56.23 387.9 74.98 369.1C93.73 350.4 124.1 350.4 142.9 369.1C161.6 387.9 161.6 418.3 142.9 437C124.1 455.8 93.73 455.8 74.98 437V437zM142.9 142.9C124.1 161.6 93.73 161.6 74.98 142.9C56.24 124.1 56.24 93.73 74.98 74.98C93.73 56.23 124.1 56.23 142.9 74.98C161.6 93.73 161.6 124.1 142.9 142.9zM369.1 369.1C387.9 350.4 418.3 350.4 437 369.1C455.8 387.9 455.8 418.3 437 437C418.3 455.8 387.9 455.8 369.1 437C350.4 418.3 350.4 387.9 369.1 369.1V369.1z"]
180
190
  };
181
191
 
182
- const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }) => {
183
- const listBoxRef = React.useRef(null);
184
- const onChange = React.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
185
- const onKeyDown = React.useCallback(e => {
186
- var _a;
187
- if (e.key === 'ArrowDown') {
188
- e.preventDefault();
189
- (_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
190
- }
191
- }, []);
192
- return (React.createElement(Modal, { renderHeader: () => (React.createElement(Input, { appearance: "minimal", borderB: true, size: "lg", icon: React.createElement(Box, { as: Icon, ml: 1, icon: isLoading ? faSpinner : faSearch, spin: isLoading }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose },
193
- React.createElement(SearchResultsList, { searchResults: searchResults, onClick: onClick })));
194
- };
195
- const SearchResultsList = ({ searchResults, onClick, isEmbedded, showDivider = true, }) => {
196
- const listBoxRef = React.useRef(null);
197
- const onSelectionChange = React.useCallback(keys => {
198
- const selectedId = keys.values().next().value;
199
- const selectedResult = searchResults === null || searchResults === void 0 ? void 0 : searchResults.find(searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId);
200
- if (selectedResult) {
201
- onClick(selectedResult);
202
- }
203
- }, [searchResults, onClick]);
204
- return (React.createElement(React.Fragment, null, searchResults && searchResults.length > 0 ? (React.createElement(ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: isEmbedded ? undefined : 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
205
- var _a, _b;
206
- return (React.createElement(ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
207
- React.createElement(Box, { p: 3, borderB: !showDivider ? undefined : true },
208
- React.createElement(Flex, { align: "center" },
209
- React.createElement(Box, { as: Icon, w: 4, icon: NodeTypeIconDefs[searchResult.type], style: { color: NodeTypeColors[searchResult.type] } }),
210
- React.createElement(Box, { flex: 1, fontSize: "lg", dangerouslySetInnerHTML: { __html: (_a = searchResult.highlighted.name) !== null && _a !== void 0 ? _a : '' }, fontWeight: "medium", textOverflow: "overflow-ellipsis", mx: 2 }),
211
- React.createElement(Box, { fontSize: "sm", color: "muted" }, searchResult.project_name)),
212
- React.createElement(Box, { dangerouslySetInnerHTML: { __html: (_b = searchResult.highlighted.summary) !== null && _b !== void 0 ? _b : '' }, color: "muted", fontSize: "sm", mt: 1, ml: 6 }))));
213
- })) : (React.createElement(Flex, { w: "full", h: 80, align: "center", justify: "center", m: -5 }, "No search results"))));
214
- };
215
- const SearchResults = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchResultsList);
192
+ const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }) => {
193
+ const listBoxRef = React.useRef(null);
194
+ const onChange = React.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
195
+ const onKeyDown = React.useCallback(e => {
196
+ var _a;
197
+ if (e.key === 'ArrowDown') {
198
+ e.preventDefault();
199
+ (_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
200
+ }
201
+ }, []);
202
+ return (React.createElement(Modal, { renderHeader: () => (React.createElement(Input, { appearance: "minimal", borderB: true, size: "lg", icon: React.createElement(Box, { as: Icon, ml: 1, icon: isLoading ? faSpinner : faSearch, spin: isLoading }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose },
203
+ React.createElement(SearchResultsList, { searchResults: searchResults, onClick: onClick })));
204
+ };
205
+ const SearchResultsList = ({ searchResults, onClick, isEmbedded, showDivider = true, }) => {
206
+ const listBoxRef = React.useRef(null);
207
+ const onSelectionChange = React.useCallback(keys => {
208
+ const selectedId = keys.values().next().value;
209
+ const selectedResult = searchResults === null || searchResults === void 0 ? void 0 : searchResults.find(searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId);
210
+ if (selectedResult) {
211
+ onClick(selectedResult);
212
+ }
213
+ }, [searchResults, onClick]);
214
+ return (React.createElement(React.Fragment, null, searchResults && searchResults.length > 0 ? (React.createElement(ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: isEmbedded ? undefined : 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
215
+ var _a, _b;
216
+ return (React.createElement(ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
217
+ React.createElement(Box, { p: 3, borderB: !showDivider ? undefined : true },
218
+ React.createElement(Flex, { align: "center" },
219
+ React.createElement(Box, { as: Icon, w: 4, icon: NodeTypeIconDefs[searchResult.type], style: { color: NodeTypeColors[searchResult.type] } }),
220
+ React.createElement(Box, { flex: 1, fontSize: "lg", dangerouslySetInnerHTML: { __html: (_a = searchResult.highlighted.name) !== null && _a !== void 0 ? _a : '' }, fontWeight: "medium", textOverflow: "overflow-ellipsis", mx: 2 }),
221
+ React.createElement(Box, { fontSize: "sm", color: "muted" }, searchResult.project_name)),
222
+ React.createElement(Box, { dangerouslySetInnerHTML: { __html: (_b = searchResult.highlighted.summary) !== null && _b !== void 0 ? _b : '' }, color: "muted", fontSize: "sm", mt: 1, ml: 6 }))));
223
+ })) : (React.createElement(Flex, { w: "full", h: 80, align: "center", justify: "center", m: -5 }, "No search results"))));
224
+ };
225
+ const SearchResults = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchResultsList);
216
226
  const Search = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchImpl);
217
227
 
218
- const TableOfContents = (_a) => {
219
- var { tableOfContents, activeId, Link, collapseTableOfContents = false, externalScrollbar, isInResponsiveMode = false, onLinkClick } = _a, boxProps = __rest(_a, ["tableOfContents", "activeId", "Link", "collapseTableOfContents", "externalScrollbar", "isInResponsiveMode", "onLinkClick"]);
220
- return (React.createElement(Flex, Object.assign({ bg: isInResponsiveMode ? 'canvas' : 'canvas-100' }, boxProps, { flexDirection: "col", maxH: "full" }),
221
- React.createElement(Flex, { flexGrow: true, flexShrink: true, overflowY: "auto" },
222
- React.createElement(TableOfContents$1, { tree: tableOfContents.items, activeId: activeId, Link: Link, maxDepthOpenByDefault: collapseTableOfContents ? 0 : 1, externalScrollbar: externalScrollbar, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode })),
223
- tableOfContents.hide_powered_by ? null : (React.createElement(PoweredByLink, { source: activeId, pathname: typeof window !== 'undefined' ? window.location.pathname : '', packageType: "elements-dev-portal" }))));
228
+ const TableOfContents = (_a) => {
229
+ var { tableOfContents, activeId, Link, collapseTableOfContents = false, externalScrollbar, isInResponsiveMode = false, onLinkClick } = _a, boxProps = __rest(_a, ["tableOfContents", "activeId", "Link", "collapseTableOfContents", "externalScrollbar", "isInResponsiveMode", "onLinkClick"]);
230
+ return (React.createElement(Flex, Object.assign({ bg: isInResponsiveMode ? 'canvas' : 'canvas-100' }, boxProps, { flexDirection: "col", maxH: "full" }),
231
+ React.createElement(Flex, { flexGrow: true, flexShrink: true, overflowY: "auto" },
232
+ React.createElement(TableOfContents$1, { tree: tableOfContents.items, activeId: activeId, Link: Link, maxDepthOpenByDefault: collapseTableOfContents ? 0 : 1, externalScrollbar: externalScrollbar, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode })),
233
+ tableOfContents.hide_powered_by ? null : (React.createElement(PoweredByLink, { source: activeId, pathname: typeof window !== 'undefined' ? window.location.pathname : '', packageType: "elements-dev-portal" }))));
224
234
  };
225
235
 
226
- const ROOT_CACHE_KEY = '@stoplight/elements-dev-portal/client-query';
227
- const devPortalCacheKeys = {
228
- all: [ROOT_CACHE_KEY],
229
- projects: () => [ROOT_CACHE_KEY, 'projects'],
230
- project: (projectId) => [...devPortalCacheKeys.projects(), projectId],
231
- projectsList: () => [...devPortalCacheKeys.projects(), 'list'],
232
- projectDetails: (projectId) => [...devPortalCacheKeys.project(projectId), 'details'],
233
- branches: (projectId) => [...devPortalCacheKeys.project(projectId), 'branches'],
234
- branch: (projectId, branch) => [...devPortalCacheKeys.branches(projectId), branch],
235
- branchesList: (projectId) => [...devPortalCacheKeys.branches(projectId), 'list'],
236
- branchDetails: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'details'],
237
- branchTOC: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'toc'],
238
- branchNodes: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'nodes'],
239
- branchNode: (projectId, branch, node) => [...devPortalCacheKeys.branchNodes(projectId, branch), node],
240
- branchNodesList: (projectId, branch) => [...devPortalCacheKeys.branchNodes(projectId, branch), 'list'],
241
- branchNodeDetails: (projectId, branch, node) => [...devPortalCacheKeys.branchNode(projectId, branch, node), 'details'],
242
- search: () => [...devPortalCacheKeys.all, 'search'],
243
- searchNodes: (filters) => [
244
- ...devPortalCacheKeys.search(),
245
- filters,
246
- ],
236
+ const ROOT_CACHE_KEY = '@stoplight/elements-dev-portal/client-query';
237
+ const devPortalCacheKeys = {
238
+ all: [ROOT_CACHE_KEY],
239
+ projects: () => [ROOT_CACHE_KEY, 'projects'],
240
+ project: (projectId) => [...devPortalCacheKeys.projects(), projectId],
241
+ projectsList: () => [...devPortalCacheKeys.projects(), 'list'],
242
+ projectDetails: (projectId) => [...devPortalCacheKeys.project(projectId), 'details'],
243
+ branches: (projectId) => [...devPortalCacheKeys.project(projectId), 'branches'],
244
+ branch: (projectId, branch) => [...devPortalCacheKeys.branches(projectId), branch],
245
+ branchesList: (projectId) => [...devPortalCacheKeys.branches(projectId), 'list'],
246
+ branchDetails: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'details'],
247
+ branchTOC: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'toc'],
248
+ branchNodes: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'nodes'],
249
+ branchNode: (projectId, branch, node) => [...devPortalCacheKeys.branchNodes(projectId, branch), node],
250
+ branchNodesList: (projectId, branch) => [...devPortalCacheKeys.branchNodes(projectId, branch), 'list'],
251
+ branchNodeDetails: (projectId, branch, node) => [...devPortalCacheKeys.branchNode(projectId, branch, node), 'details'],
252
+ search: () => [...devPortalCacheKeys.all, 'search'],
253
+ searchNodes: (filters) => [
254
+ ...devPortalCacheKeys.search(),
255
+ filters,
256
+ ],
247
257
  };
248
258
 
249
- const Forbidden = () => (React__default.createElement(Flex, { align: "center", justify: "center", flexGrow: true },
250
- React__default.createElement(VStack, { spacing: 4, align: "center" },
251
- React__default.createElement(Heading, { size: 1 }, "Forbidden"),
259
+ const Forbidden = () => (React__default.createElement(Flex, { align: "center", justify: "center", flexGrow: true },
260
+ React__default.createElement(VStack, { spacing: 4, align: "center" },
261
+ React__default.createElement(Heading, { size: 1 }, "Forbidden"),
252
262
  React__default.createElement(Box, { as: "p" }, "You don't have permission to access this resource"))));
253
263
 
254
- const Loading = () => (React__default.createElement(Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted" },
264
+ const Loading = () => (React__default.createElement(Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted" },
255
265
  React__default.createElement(Icon, { icon: faCircleNotch, size: "3x", spin: true })));
256
266
 
257
- const NotFound = () => (React__default.createElement(Flex, { align: "center", justify: "center", flexGrow: true },
258
- React__default.createElement(VStack, { spacing: 4, align: "center" },
259
- React__default.createElement(Heading, { size: 1 }, "Not Found"),
267
+ const NotFound = () => (React__default.createElement(Flex, { align: "center", justify: "center", flexGrow: true },
268
+ React__default.createElement(VStack, { spacing: 4, align: "center" },
269
+ React__default.createElement(Heading, { size: 1 }, "Not Found"),
260
270
  React__default.createElement(Box, { as: "p" }, "Could not find what you are looking for"))));
261
271
 
262
- const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", href: "https://stoplight.io/pricing/", target: "_blank", rel: "noreferrer noopener", justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted", flexDirection: "col" },
263
- React__default.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
272
+ const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", href: "https://stoplight.io/pricing/", target: "_blank", rel: "noreferrer noopener", justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted", flexDirection: "col" },
273
+ React__default.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
264
274
  React__default.createElement(Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
265
275
 
266
- const appVersion = '2.3.3';
276
+ const appVersion = '2.4.0';
267
277
 
268
- class ResponseError extends Error {
269
- constructor(message, responseCode) {
270
- super(message);
271
- this.name = 'ResponseError';
272
- this.code = responseCode;
273
- }
274
- }
275
- const getNodeContent = ({ nodeSlug, projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
276
- const encodedNodeSlug = encodeURIComponent(nodeSlug);
277
- const encodedProjectId = encodeURIComponent(projectId);
278
- const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
279
- const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
280
- const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/nodes/${encodedNodeSlug}${branchQuery}`, {
281
- headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
282
- });
283
- const data = yield response.json();
284
- if (!response.ok) {
285
- if (response.status === 402) {
286
- throw new ResponseError('Payment Required', response.status);
287
- }
288
- else if (response.status === 403) {
289
- throw new ResponseError('Forbidden', response.status);
290
- }
291
- else {
292
- throw new ResponseError('Something went wrong', response.status);
293
- }
294
- }
295
- return data;
278
+ class ResponseError extends Error {
279
+ constructor(message, responseCode) {
280
+ super(message);
281
+ this.name = 'ResponseError';
282
+ this.code = responseCode;
283
+ }
284
+ }
285
+ const getNodeContent = ({ nodeSlug, projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
286
+ const encodedNodeSlug = encodeURIComponent(nodeSlug);
287
+ const encodedProjectId = encodeURIComponent(projectId);
288
+ const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
289
+ const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
290
+ const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/nodes/${encodedNodeSlug}${branchQuery}`, {
291
+ headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
292
+ });
293
+ const data = yield response.json();
294
+ if (!response.ok) {
295
+ if (response.status === 402) {
296
+ throw new ResponseError('Payment Required', response.status);
297
+ }
298
+ else if (response.status === 403) {
299
+ throw new ResponseError('Forbidden', response.status);
300
+ }
301
+ else {
302
+ throw new ResponseError('Something went wrong', response.status);
303
+ }
304
+ }
305
+ return data;
296
306
  });
297
307
 
298
- const getBranches = ({ projectId, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
299
- const encodedProjectId = encodeURIComponent(projectId);
300
- const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/branches`, {
301
- headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
302
- });
303
- const data = yield response.json();
304
- if (!response.ok) {
305
- throw new Error(data);
306
- }
307
- return data;
308
+ const getBranches = ({ projectId, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
309
+ const encodedProjectId = encodeURIComponent(projectId);
310
+ const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/branches`, {
311
+ headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
312
+ });
313
+ const data = yield response.json();
314
+ if (!response.ok) {
315
+ throw new Error(data);
316
+ }
317
+ return data;
308
318
  });
309
319
 
310
- function useGetBranches({ projectId }) {
311
- const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
312
- return useQuery([...devPortalCacheKeys.branchesList(projectId), platformUrl, isLoggedIn], () => getBranches({ projectId, platformUrl, platformAuthToken }), {
313
- enabled: projectId ? true : false,
314
- });
320
+ function useGetBranches({ projectId }) {
321
+ const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
322
+ return useQuery([...devPortalCacheKeys.branchesList(projectId), platformUrl, isLoggedIn], () => getBranches({ projectId, platformUrl, platformAuthToken }), {
323
+ enabled: projectId ? true : false,
324
+ });
315
325
  }
316
326
 
317
- function useGetNodeContent({ nodeSlug, projectId, branchSlug, }) {
318
- const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
319
- return useQuery([...devPortalCacheKeys.branchNodeDetails(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : '', nodeSlug), platformUrl, isLoggedIn], () => getNodeContent({ nodeSlug, projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: nodeSlug && projectId ? true : false });
327
+ function useGetNodeContent({ nodeSlug, projectId, branchSlug, }) {
328
+ const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
329
+ return useQuery([...devPortalCacheKeys.branchNodeDetails(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : '', nodeSlug), platformUrl, isLoggedIn], () => getNodeContent({ nodeSlug, projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: nodeSlug && projectId ? true : false });
320
330
  }
321
331
 
322
- const getTableOfContents = ({ projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
323
- const encodedProjectId = encodeURIComponent(projectId);
324
- const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
325
- const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
326
- const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/table-of-contents${branchQuery}`, {
327
- headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
328
- });
329
- const data = yield response.json();
330
- if (!response.ok) {
331
- throw new Error(data);
332
- }
333
- return data;
332
+ const getTableOfContents = ({ projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
333
+ const encodedProjectId = encodeURIComponent(projectId);
334
+ const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
335
+ const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
336
+ const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/table-of-contents${branchQuery}`, {
337
+ headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
338
+ });
339
+ const data = yield response.json();
340
+ if (!response.ok) {
341
+ throw new Error(data);
342
+ }
343
+ return data;
334
344
  });
335
345
 
336
- function useGetTableOfContents({ projectId, branchSlug }) {
337
- const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
338
- return useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, isLoggedIn], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
346
+ function useGetTableOfContents({ projectId, branchSlug }) {
347
+ const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
348
+ return useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, isLoggedIn], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
339
349
  }
340
350
 
341
- const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
342
- const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
343
- const branchSlug = decodeURIComponent(encodedBranchSlug);
344
- const history = useHistory();
345
- const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
346
- const { data: branches } = useGetBranches({ projectId });
347
- const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
348
- nodeSlug,
349
- projectId,
350
- branchSlug,
351
- });
352
- const container = React.useRef(null);
353
- if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
354
- const firstNode = findFirstNode(tableOfContents.items);
355
- if (firstNode) {
356
- return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
357
- }
358
- }
359
- let elem;
360
- if (isLoadingNode || !isTocFetched) {
361
- elem = React.createElement(Loading, null);
362
- }
363
- else if (isError) {
364
- if (nodeError instanceof ResponseError) {
365
- if (nodeError.code === 402) {
366
- elem = React.createElement(UpgradeToStarter, null);
367
- }
368
- else if (nodeError.code === 403) {
369
- elem = React.createElement(Forbidden, null);
370
- }
371
- else {
372
- elem = React.createElement(NotFound, null);
373
- }
374
- }
375
- else {
376
- elem = React.createElement(NotFound, null);
377
- }
378
- }
379
- else if (!node) {
380
- elem = React.createElement(NotFound, null);
381
- }
382
- else if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
383
- return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}` });
384
- }
385
- else {
386
- elem = (React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
387
- }
388
- const handleTocClick = () => {
389
- if (container.current) {
390
- container.current.scrollIntoView();
391
- }
392
- };
393
- return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
394
- branches && branches.items.length > 1 ? (React.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches.items, onChange: branch => {
395
- const encodedBranchSlug = encodeURIComponent(branch.slug);
396
- history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
397
- } })) : null,
398
- tableOfContents ? (React.createElement(TableOfContents, { activeId: (node === null || node === void 0 ? void 0 : node.id) || (nodeSlug === null || nodeSlug === void 0 ? void 0 : nodeSlug.split('-')[0]) || '', tableOfContents: tableOfContents, Link: Link, collapseTableOfContents: collapseTableOfContents, onLinkClick: handleTocClick })) : null) }, elem));
399
- };
400
- const StoplightProjectRouter = (_a) => {
401
- var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
402
- const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
403
- return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
404
- React.createElement(RouterTypeContext.Provider, { value: router },
405
- React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
406
- React.createElement(Switch, null,
407
- React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug+", exact: true },
408
- React.createElement(StoplightProjectImpl, Object.assign({}, props))),
409
- React.createElement(Route, { path: "/:nodeSlug+", exact: true },
410
- React.createElement(StoplightProjectImpl, Object.assign({}, props))),
411
- React.createElement(Route, { path: "/", exact: true },
412
- React.createElement(StoplightProjectImpl, Object.assign({}, props))))))));
413
- };
351
+ const StoplightProjectImpl = ({ projectId, hideTryIt, hideSecurityInfo, hideServerInfo, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
352
+ const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
353
+ const branchSlug = decodeURIComponent(encodedBranchSlug);
354
+ const history = useHistory();
355
+ const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
356
+ const { data: branches } = useGetBranches({ projectId });
357
+ const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
358
+ nodeSlug,
359
+ projectId,
360
+ branchSlug,
361
+ });
362
+ const container = React.useRef(null);
363
+ if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
364
+ const firstNode = findFirstNode(tableOfContents.items);
365
+ if (firstNode) {
366
+ return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
367
+ }
368
+ }
369
+ let elem;
370
+ if (isLoadingNode || !isTocFetched) {
371
+ elem = React.createElement(Loading, null);
372
+ }
373
+ else if (isError) {
374
+ if (nodeError instanceof ResponseError) {
375
+ if (nodeError.code === 402) {
376
+ elem = React.createElement(UpgradeToStarter, null);
377
+ }
378
+ else if (nodeError.code === 403) {
379
+ elem = React.createElement(Forbidden, null);
380
+ }
381
+ else {
382
+ elem = React.createElement(NotFound, null);
383
+ }
384
+ }
385
+ else {
386
+ elem = React.createElement(NotFound, null);
387
+ }
388
+ }
389
+ else if (!node) {
390
+ elem = React.createElement(NotFound, null);
391
+ }
392
+ else if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
393
+ return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}` });
394
+ }
395
+ else {
396
+ elem = (React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
397
+ }
398
+ const handleTocClick = () => {
399
+ if (container.current) {
400
+ container.current.scrollIntoView();
401
+ }
402
+ };
403
+ return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
404
+ branches && branches.items.length > 1 ? (React.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches.items, onChange: branch => {
405
+ const encodedBranchSlug = encodeURIComponent(branch.slug);
406
+ history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
407
+ } })) : null,
408
+ tableOfContents ? (React.createElement(TableOfContents, { activeId: (node === null || node === void 0 ? void 0 : node.id) || (nodeSlug === null || nodeSlug === void 0 ? void 0 : nodeSlug.split('-')[0]) || '', tableOfContents: tableOfContents, Link: Link, collapseTableOfContents: collapseTableOfContents, onLinkClick: handleTocClick })) : null) }, elem));
409
+ };
410
+ const StoplightProjectRouter = (_a) => {
411
+ var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
412
+ const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
413
+ return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
414
+ React.createElement(RouterTypeContext.Provider, { value: router },
415
+ React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
416
+ React.createElement(Switch, null,
417
+ React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug+", exact: true },
418
+ React.createElement(StoplightProjectImpl, Object.assign({}, props))),
419
+ React.createElement(Route, { path: "/:nodeSlug+", exact: true },
420
+ React.createElement(StoplightProjectImpl, Object.assign({}, props))),
421
+ React.createElement(Route, { path: "/", exact: true },
422
+ React.createElement(StoplightProjectImpl, Object.assign({}, props))))))));
423
+ };
414
424
  const StoplightProject = withStyles(StoplightProjectRouter);
415
425
 
416
- const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
417
- const queryParams = [];
418
- let fetchedWorkspaceId = workspaceId || '';
419
- if (!workspaceId && (projectIds === null || projectIds === void 0 ? void 0 : projectIds.length)) {
420
- const encodedProjectId = encodeURIComponent(projectIds[0]);
421
- const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
422
- headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
423
- });
424
- const data = yield response.json();
425
- fetchedWorkspaceId = data.workspace.id;
426
- }
427
- if (projectIds && projectIds.length) {
428
- queryParams.push(...projectIds.map((projectId, index) => {
429
- const encodedProjectId = encodeURIComponent(projectId);
430
- return `project_ids[${index}]=${encodedProjectId}`;
431
- }));
432
- }
433
- if (search) {
434
- const encodedSearch = encodeURIComponent(search);
435
- queryParams.push(`search=${encodedSearch}`);
436
- }
437
- if (branchSlug) {
438
- const encodedBranchSlug = encodeURIComponent(branchSlug);
439
- queryParams.push(`branch=${encodedBranchSlug}`);
440
- }
441
- const query = queryParams.length ? `?${queryParams.join('&')}` : '';
442
- const encodedWorkspaceId = encodeURIComponent(fetchedWorkspaceId);
443
- const response = yield fetch(`${platformUrl}/api/v1/workspaces/${encodedWorkspaceId}/nodes${query}`, {
444
- headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
445
- });
446
- const data = yield response.json();
447
- if (!response.ok) {
448
- throw new Error(data);
449
- }
450
- return data;
426
+ const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
427
+ const queryParams = [];
428
+ let fetchedWorkspaceId = workspaceId || '';
429
+ if (!workspaceId && (projectIds === null || projectIds === void 0 ? void 0 : projectIds.length)) {
430
+ const encodedProjectId = encodeURIComponent(projectIds[0]);
431
+ const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
432
+ headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
433
+ });
434
+ const data = yield response.json();
435
+ fetchedWorkspaceId = data.workspace.id;
436
+ }
437
+ if (projectIds && projectIds.length) {
438
+ queryParams.push(...projectIds.map((projectId, index) => {
439
+ const encodedProjectId = encodeURIComponent(projectId);
440
+ return `project_ids[${index}]=${encodedProjectId}`;
441
+ }));
442
+ }
443
+ if (search) {
444
+ const encodedSearch = encodeURIComponent(search);
445
+ queryParams.push(`search=${encodedSearch}`);
446
+ }
447
+ if (branchSlug) {
448
+ const encodedBranchSlug = encodeURIComponent(branchSlug);
449
+ queryParams.push(`branch=${encodedBranchSlug}`);
450
+ }
451
+ const query = queryParams.length ? `?${queryParams.join('&')}` : '';
452
+ const encodedWorkspaceId = encodeURIComponent(fetchedWorkspaceId);
453
+ const response = yield fetch(`${platformUrl}/api/v1/workspaces/${encodedWorkspaceId}/nodes${query}`, {
454
+ headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
455
+ });
456
+ const data = yield response.json();
457
+ if (!response.ok) {
458
+ throw new Error(data);
459
+ }
460
+ return data;
451
461
  });
452
462
 
453
- const getWorkspace = ({ projectIds, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
454
- const encodedProjectId = encodeURIComponent(projectIds[0]);
455
- const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
456
- headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
457
- });
458
- const data = yield response.json();
459
- if (!response.ok) {
460
- throw new Error(data);
461
- }
462
- return data;
463
+ const getWorkspace = ({ projectIds, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
464
+ const encodedProjectId = encodeURIComponent(projectIds[0]);
465
+ const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
466
+ headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
467
+ });
468
+ const data = yield response.json();
469
+ if (!response.ok) {
470
+ throw new Error(data);
471
+ }
472
+ return data;
463
473
  });
464
474
 
465
475
  /**
@@ -675,7 +685,7 @@ function useStateIgnoreCallback(initialState) {
675
685
  return [state, setStateIgnoreCallback];
676
686
  }
677
687
  function useDebounce(value, delay, options) {
678
- var eq = (options && options.equalityFn) || valueEquality;
688
+ var eq = valueEquality;
679
689
  var _a = useStateIgnoreCallback(value), state = _a[0], dispatch = _a[1];
680
690
  var debounced = useDebouncedCallback(useCallback(function (value) { return dispatch(value); }, [dispatch]), delay, options);
681
691
  var previousValue = useRef(value);
@@ -689,19 +699,19 @@ function useDebounce(value, delay, options) {
689
699
  return [state, { cancel: debounced.cancel, isPending: debounced.isPending, flush: debounced.flush }];
690
700
  }
691
701
 
692
- function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
693
- const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
694
- const [debounceSearch] = useDebounce(search, 500);
695
- return useQuery([
696
- ...devPortalCacheKeys.searchNodes({ projectIds, branchSlug: branch, workspaceId, search: debounceSearch }),
697
- platformUrl,
698
- isLoggedIn,
699
- ], () => getNodes({ workspaceId, projectIds, branchSlug: branch, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
702
+ function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
703
+ const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
704
+ const [debounceSearch] = useDebounce(search, 500);
705
+ return useQuery([
706
+ ...devPortalCacheKeys.searchNodes({ projectIds, branchSlug: branch, workspaceId, search: debounceSearch }),
707
+ platformUrl,
708
+ isLoggedIn,
709
+ ], () => getNodes({ workspaceId, projectIds, branchSlug: branch, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
700
710
  }
701
711
 
702
- function useGetWorkspace({ projectIds }) {
703
- const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
704
- return useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));
712
+ function useGetWorkspace({ projectIds }) {
713
+ const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
714
+ return useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));
705
715
  }
706
716
 
707
717
  export { BranchSelector, DevPortalProvider, NodeContent, ResponseError, Search, SearchResults, StoplightProject, TableOfContents, devPortalCacheKeys, getBranches, getNodeContent, getNodes, getTableOfContents, getWorkspace, useGetBranches, useGetNodeContent, useGetNodes, useGetTableOfContents, useGetWorkspace };