@stoplight/elements-dev-portal 1.4.7 → 1.6.0

package/index.js

@@ -7,12 +7,10 @@ var React = require('react');
 var elementsCore = require('@stoplight/elements-core');
 var path = require('@stoplight/path');
 var types = require('@stoplight/types');
-var faSearch = require('@fortawesome/free-solid-svg-icons/faSearch');
-var lodash = require('lodash');
-var reactRouterDom = require('react-router-dom');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var flow = require('lodash/flow.js');
+var reactRouterDom = require('react-router-dom');
 var reactQuery = require('react-query');
-var useDebounce = require('use-debounce');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -36,6 +34,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var flow__default = /*#__PURE__*/_interopDefaultLegacy(flow);
 
 const BranchSelector = ({ branchSlug, branches, onChange }) => {
     const currentBranch = branches.find(branch => (!branchSlug ? branch.is_default : branch.slug === branchSlug));
@@ -62,30 +61,28 @@ const BranchSelector = ({ branchSlug, branches, onChange }) => {
 
 const PlatformContext = React__namespace.createContext({ platformUrl: 'https://stoplight.io' });
 const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, children, }) => {
-    return (React__namespace.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken } },
-        React__namespace.createElement(mosaic.Provider, null, children)));
+    return React__namespace.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken } }, children);
 };
-const DevPortalProvider = elementsCore.withQueryClientProvider(PlatformProvider);
+const DevPortalProvider = elementsCore.withPersistenceBoundary(elementsCore.withQueryClientProvider(elementsCore.withMosaicProvider(PlatformProvider)));
 
 const NodeContent = ({ node, Link, hideTryIt, hideTryItPanel, hideMocking, hideExport, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    return (React__namespace.createElement(elementsCore.PersistenceContextProvider, null,
-        React__namespace.createElement(NodeLinkContext.Provider, { value: [node, Link] },
-            React__namespace.createElement(elementsCore.MarkdownComponentsProvider, { value: { a: LinkComponent } },
-                React__namespace.createElement(elementsCore.MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
-                    React__namespace.createElement(elementsCore.Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
-                            hideTryIt: hideTryIt,
-                            hideTryItPanel: hideTryItPanel,
-                            hideExport: hideExport || node.links.export_url === undefined,
-                        }, useNodeForRefResolving: true, tryItCorsProxy: tryItCorsProxy, exportProps: [types.NodeType.HttpService, types.NodeType.Model].includes(node.type)
-                            ? {
-                                original: {
-                                    href: node.links.export_url,
-                                },
-                                bundled: {
-                                    href: getBundledUrl(node.links.export_url),
-                                },
-                            }
-                            : undefined, tryItCredentialsPolicy: tryItCredentialsPolicy }))))));
+    return (React__namespace.createElement(NodeLinkContext.Provider, { value: [node, Link] },
+        React__namespace.createElement(elementsCore.MarkdownComponentsProvider, { value: { a: LinkComponent } },
+            React__namespace.createElement(elementsCore.MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
+                React__namespace.createElement(elementsCore.Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
+                        hideTryIt: hideTryIt,
+                        hideTryItPanel: hideTryItPanel,
+                        hideExport: hideExport || node.links.export_url === undefined,
+                    }, useNodeForRefResolving: true, tryItCorsProxy: tryItCorsProxy, exportProps: [types.NodeType.HttpService, types.NodeType.Model].includes(node.type)
+                        ? {
+                            original: {
+                                href: node.links.export_url,
+                            },
+                            bundled: {
+                                href: getBundledUrl(node.links.export_url),
+                            },
+                        }
+                        : undefined, tryItCredentialsPolicy: tryItCredentialsPolicy })))));
 };
 const NodeLinkContext = React__namespace.createContext(undefined);
 const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
@@ -102,7 +99,7 @@ const LinkComponent = ({ children, href }) => {
         const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
         const edge = node.outbound_edges.find(edge => edge.uri === decodedUrl || edge.uri === decodedResolvedUriWithoutAnchor);
         if (edge) {
-            return (React__namespace.createElement(Link, { to: edge.slug, hash: hash }, children));
+            return React__namespace.createElement(Link, { to: `${edge.slug}${hash && `#${hash}`}` }, children);
         }
     }
     return React__namespace.createElement("a", { href: href }, children);
@@ -117,7 +114,7 @@ function getBundledUrl(url) {
     return bundledUrl.toString();
 }
 
-const SearchImpl = ({ search, searchResults, isOpen, onClose, onClick, onSearch }) => {
+const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }) => {
     const listBoxRef = React__namespace.useRef(null);
     const onChange = React__namespace.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
     const onKeyDown = React__namespace.useCallback(e => {
@@ -134,7 +131,7 @@ const SearchImpl = ({ search, searchResults, isOpen, onClose, onClick, onSearch
             onClick(selectedResult);
         }
     }, [searchResults, onClick]);
-    return (React__namespace.createElement(mosaic.Modal, { renderHeader: () => (React__namespace.createElement(mosaic.Input, { appearance: "minimal", borderB: true, size: "lg", icon: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, ml: 1, icon: faSearch.faSearch }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose }, searchResults && searchResults.length > 0 ? (React__namespace.createElement(mosaic.ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
+    return (React__namespace.createElement(mosaic.Modal, { renderHeader: () => (React__namespace.createElement(mosaic.Input, { appearance: "minimal", borderB: true, size: "lg", icon: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, ml: 1, icon: isLoading ? freeSolidSvgIcons.faSpinner : freeSolidSvgIcons.faSearch, spin: isLoading }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose }, searchResults && searchResults.length > 0 ? (React__namespace.createElement(mosaic.ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
         var _a, _b;
         return (React__namespace.createElement(mosaic.ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
             React__namespace.createElement(mosaic.Box, { p: 3, borderB: true },
@@ -145,7 +142,7 @@ const SearchImpl = ({ search, searchResults, isOpen, onClose, onClick, onSearch
                 React__namespace.createElement(mosaic.Box, { dangerouslySetInnerHTML: { __html: (_b = searchResult.highlighted.summary) !== null && _b !== void 0 ? _b : '' }, color: "muted", fontSize: "sm", mt: 1, ml: 6 }))));
     })) : (React__namespace.createElement(mosaic.Flex, { w: "full", h: 80, align: "center", justify: "center", m: -5 }, "No search results"))));
 };
-const Search = lodash.flow(elementsCore.withStyles, elementsCore.withPersistenceBoundary, elementsCore.withMosaicProvider, elementsCore.withQueryClientProvider)(SearchImpl);
+const Search = flow__default["default"](elementsCore.withStyles, elementsCore.withPersistenceBoundary, elementsCore.withMosaicProvider, elementsCore.withQueryClientProvider)(SearchImpl);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -209,7 +206,7 @@ const UpgradeToStarter = () => (React__default["default"].createElement(mosaic.F
     React__default["default"].createElement(mosaic.Icon, { icon: freeSolidSvgIcons.faExclamationTriangle, size: "4x" }),
     React__default["default"].createElement(mosaic.Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
 
-const appVersion = '1.4.7';
+const appVersion = '1.6.0';
 
 class ResponseError extends Error {
     constructor(message, responseCode) {
@@ -323,7 +320,7 @@ const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, c
         elem = React__namespace.createElement(NotFound, null);
     }
     else {
-        elem = (React__namespace.createElement(NodeContent, { node: node, Link: reactRouterDom.Link, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
+        elem = (React__namespace.createElement(NodeContent, { node: node, Link: elementsCore.ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
     }
     const handleTocClick = () => {
         if (container.current) {
@@ -335,8 +332,8 @@ const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, c
             tableOfContents ? (React__namespace.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: reactRouterDom.Link, collapseTableOfContents: collapseTableOfContents, onLinkClick: handleTocClick })) : null) }, elem));
 };
 const StoplightProjectRouter = (_a) => {
-    var { platformUrl, basePath = '/', router } = _a, props = __rest(_a, ["platformUrl", "basePath", "router"]);
-    const { Router, routerProps } = elementsCore.useRouter(router !== null && router !== void 0 ? router : 'history', basePath);
+    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
+    const { Router, routerProps } = elementsCore.useRouter(router, basePath, staticRouterPath);
     return (React__namespace.createElement(DevPortalProvider, { platformUrl: platformUrl },
         React__namespace.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
             React__namespace.createElement(reactRouterDom.Route, { path: "/branches/:branchSlug/:nodeSlug", exact: true },
@@ -346,7 +343,7 @@ const StoplightProjectRouter = (_a) => {
             React__namespace.createElement(reactRouterDom.Route, { path: "/", exact: true },
                 React__namespace.createElement(StoplightProjectImpl, Object.assign({}, props))))));
 };
-const StoplightProject = lodash.flow(elementsCore.withStyles, elementsCore.withPersistenceBoundary, elementsCore.withMosaicProvider, elementsCore.withQueryClientProvider)(StoplightProjectRouter);
+const StoplightProject = elementsCore.withStyles(StoplightProjectRouter);
 
 const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
     const queryParams = [];
@@ -389,10 +386,237 @@ const getWorkspace = ({ projectIds, platformUrl = 'https://stoplight.io', platfo
     return data;
 });
 
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked, or until the next browser frame is drawn. The debounced function
+ * comes with a `cancel` method to cancel delayed `func` invocations and a
+ * `flush` method to immediately invoke them. Provide `options` to indicate
+ * whether `func` should be invoked on the leading and/or trailing edge of the
+ * `wait` timeout. The `func` is invoked with the last arguments provided to the
+ * debounced function. Subsequent calls to the debounced function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * If `wait` is omitted in an environment with `requestAnimationFrame`, `func`
+ * invocation will be deferred until the next frame is drawn (typically about
+ * 16ms).
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `debounce` and `throttle`.
+ *
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0]
+ *  The number of milliseconds to delay; if omitted, `requestAnimationFrame` is
+ *  used (if available, otherwise it will be setTimeout(...,0)).
+ * @param {Object} [options={}] The options object.
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.leading=false]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {number} [options.maxWait]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * const resizeHandler = useDebouncedCallback(calculateLayout, 150);
+ * window.addEventListener('resize', resizeHandler)
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * const clickHandler = useDebouncedCallback(sendMail, 300, {
+ *   leading: true,
+ *   trailing: false,
+ * })
+ * <button onClick={clickHandler}>click me</button>
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * const debounced = useDebouncedCallback(batchLog, 250, { 'maxWait': 1000 })
+ * const source = new EventSource('/stream')
+ * source.addEventListener('message', debounced)
+ *
+ * // Cancel the trailing debounced invocation.
+ * window.addEventListener('popstate', debounced.cancel)
+ *
+ * // Check for pending invocations.
+ * const status = debounced.pending() ? "Pending..." : "Ready"
+ */
+function useDebouncedCallback(func, wait, options) {
+    var _this = this;
+    var lastCallTime = React.useRef(null);
+    var lastInvokeTime = React.useRef(0);
+    var timerId = React.useRef(null);
+    var lastArgs = React.useRef([]);
+    var lastThis = React.useRef();
+    var result = React.useRef();
+    var funcRef = React.useRef(func);
+    var mounted = React.useRef(true);
+    funcRef.current = func;
+    // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
+    var useRAF = !wait && wait !== 0 && typeof window !== 'undefined';
+    if (typeof func !== 'function') {
+        throw new TypeError('Expected a function');
+    }
+    wait = +wait || 0;
+    options = options || {};
+    var leading = !!options.leading;
+    var trailing = 'trailing' in options ? !!options.trailing : true; // `true` by default
+    var maxing = 'maxWait' in options;
+    var maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : null;
+    React.useEffect(function () {
+        mounted.current = true;
+        return function () {
+            mounted.current = false;
+        };
+    }, []);
+    // You may have a question, why we have so many code under the useMemo definition.
+    //
+    // This was made as we want to escape from useCallback hell and
+    // not to initialize a number of functions each time useDebouncedCallback is called.
+    //
+    // It means that we have less garbage for our GC calls which improves performance.
+    // Also, it makes this library smaller.
+    //
+    // And the last reason, that the code without lots of useCallback with deps is easier to read.
+    // You have only one place for that.
+    var debounced = React.useMemo(function () {
+        var invokeFunc = function (time) {
+            var args = lastArgs.current;
+            var thisArg = lastThis.current;
+            lastArgs.current = lastThis.current = null;
+            lastInvokeTime.current = time;
+            return (result.current = funcRef.current.apply(thisArg, args));
+        };
+        var startTimer = function (pendingFunc, wait) {
+            if (useRAF)
+                cancelAnimationFrame(timerId.current);
+            timerId.current = useRAF ? requestAnimationFrame(pendingFunc) : setTimeout(pendingFunc, wait);
+        };
+        var shouldInvoke = function (time) {
+            if (!mounted.current)
+                return false;
+            var timeSinceLastCall = time - lastCallTime.current;
+            var timeSinceLastInvoke = time - lastInvokeTime.current;
+            // Either this is the first call, activity has stopped and we're at the
+            // trailing edge, the system time has gone backwards and we're treating
+            // it as the trailing edge, or we've hit the `maxWait` limit.
+            return (!lastCallTime.current ||
+                timeSinceLastCall >= wait ||
+                timeSinceLastCall < 0 ||
+                (maxing && timeSinceLastInvoke >= maxWait));
+        };
+        var trailingEdge = function (time) {
+            timerId.current = null;
+            // Only invoke if we have `lastArgs` which means `func` has been
+            // debounced at least once.
+            if (trailing && lastArgs.current) {
+                return invokeFunc(time);
+            }
+            lastArgs.current = lastThis.current = null;
+            return result.current;
+        };
+        var timerExpired = function () {
+            var time = Date.now();
+            if (shouldInvoke(time)) {
+                return trailingEdge(time);
+            }
+            // https://github.com/xnimorz/use-debounce/issues/97
+            if (!mounted.current) {
+                return;
+            }
+            // Remaining wait calculation
+            var timeSinceLastCall = time - lastCallTime.current;
+            var timeSinceLastInvoke = time - lastInvokeTime.current;
+            var timeWaiting = wait - timeSinceLastCall;
+            var remainingWait = maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+            // Restart the timer
+            startTimer(timerExpired, remainingWait);
+        };
+        var func = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var time = Date.now();
+            var isInvoking = shouldInvoke(time);
+            lastArgs.current = args;
+            lastThis.current = _this;
+            lastCallTime.current = time;
+            if (isInvoking) {
+                if (!timerId.current && mounted.current) {
+                    // Reset any `maxWait` timer.
+                    lastInvokeTime.current = lastCallTime.current;
+                    // Start the timer for the trailing edge.
+                    startTimer(timerExpired, wait);
+                    // Invoke the leading edge.
+                    return leading ? invokeFunc(lastCallTime.current) : result.current;
+                }
+                if (maxing) {
+                    // Handle invocations in a tight loop.
+                    startTimer(timerExpired, wait);
+                    return invokeFunc(lastCallTime.current);
+                }
+            }
+            if (!timerId.current) {
+                startTimer(timerExpired, wait);
+            }
+            return result.current;
+        };
+        func.cancel = function () {
+            if (timerId.current) {
+                useRAF ? cancelAnimationFrame(timerId.current) : clearTimeout(timerId.current);
+            }
+            lastInvokeTime.current = 0;
+            lastArgs.current = lastCallTime.current = lastThis.current = timerId.current = null;
+        };
+        func.isPending = function () {
+            return !!timerId.current;
+        };
+        func.flush = function () {
+            return !timerId.current ? result.current : trailingEdge(Date.now());
+        };
+        return func;
+    }, [leading, maxing, wait, maxWait, trailing, useRAF]);
+    return debounced;
+}
+
+function valueEquality(left, right) {
+    return left === right;
+}
+function adjustFunctionValueOfSetState(value) {
+    return typeof value === 'function' ? function () { return value; } : value;
+}
+function useStateIgnoreCallback(initialState) {
+    var _a = React.useState(adjustFunctionValueOfSetState(initialState)), state = _a[0], setState = _a[1];
+    var setStateIgnoreCallback = React.useCallback(function (value) { return setState(adjustFunctionValueOfSetState(value)); }, []);
+    return [state, setStateIgnoreCallback];
+}
+function useDebounce(value, delay, options) {
+    var eq = (options && options.equalityFn) || valueEquality;
+    var _a = useStateIgnoreCallback(value), state = _a[0], dispatch = _a[1];
+    var debounced = useDebouncedCallback(React.useCallback(function (value) { return dispatch(value); }, [dispatch]), delay, options);
+    var previousValue = React.useRef(value);
+    React.useEffect(function () {
+        // We need to use this condition otherwise we will run debounce timer for the first render (including maxWait option)
+        if (!eq(previousValue.current, value)) {
+            debounced(value);
+            previousValue.current = value;
+        }
+    }, [value, debounced, eq]);
+    return [state, { cancel: debounced.cancel, isPending: debounced.isPending, flush: debounced.flush }];
+}
+
 function useGetNodes({ search, workspaceId, branchSlug, projectIds, pause, }) {
     const { platformUrl, platformAuthToken } = React__namespace.useContext(PlatformContext);
-    const [debounceSearch] = useDebounce.useDebounce(search, 500);
-    return reactQuery.useQuery(['workspaceNodes', workspaceId, branchSlug, projectIds, debounceSearch, platformUrl, platformAuthToken], () => getNodes({ workspaceId, branchSlug, projectIds, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause });
+    const [debounceSearch] = useDebounce(search, 500);
+    return reactQuery.useQuery(['workspaceNodes', platformUrl, platformAuthToken, workspaceId, branchSlug, projectIds, debounceSearch], () => getNodes({ workspaceId, branchSlug, projectIds, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
 }
 
 function useGetWorkspace({ projectIds }) {