@stoplight/elements-dev-portal 1.4.7 → 1.6.0

package/components/Search/Search.d.ts

@@ -2,6 +2,7 @@ import { ModalProps } from '@stoplight/mosaic';
 import * as React from 'react';
 import { NodeSearchResult } from '../../types';
 export declare type SearchProps = {
+    isLoading?: boolean;
     search?: string;
     searchResults?: NodeSearchResult[];
     onSearch: (search: string) => void;

package/index.esm.js

@@ -1,15 +1,13 @@
-import { Menu, FieldButton, Provider, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading } from '@stoplight/mosaic';
+import { Menu, FieldButton, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading } from '@stoplight/mosaic';
 import * as React from 'react';
-import React__default from 'react';
-import { withQueryClientProvider, PersistenceContextProvider, MarkdownComponentsProvider, MockingProvider, Docs, withStyles, withPersistenceBoundary, withMosaicProvider, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, findFirstNode, SidebarLayout } from '@stoplight/elements-core';
+import React__default, { useRef, useEffect, useMemo, useCallback, useState } from 'react';
+import { withPersistenceBoundary, withQueryClientProvider, withMosaicProvider, MarkdownComponentsProvider, MockingProvider, Docs, withStyles, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, findFirstNode, ReactRouterMarkdownLink, SidebarLayout } from '@stoplight/elements-core';
 import { resolve, dirname } from '@stoplight/path';
 import { NodeType } from '@stoplight/types';
-import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
-import { flow } from 'lodash';
+import { faSpinner, faSearch, faCircleNotch, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import flow from 'lodash/flow.js';
 import { Route, useParams, useHistory, Redirect, Link } from 'react-router-dom';
-import { faCircleNotch, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { useQuery } from 'react-query';
-import { useDebounce } from 'use-debounce';
 
 const BranchSelector = ({ branchSlug, branches, onChange }) => {
     const currentBranch = branches.find(branch => (!branchSlug ? branch.is_default : branch.slug === branchSlug));
@@ -36,30 +34,28 @@ const BranchSelector = ({ branchSlug, branches, onChange }) => {
 
 const PlatformContext = React.createContext({ platformUrl: 'https://stoplight.io' });
 const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, children, }) => {
-    return (React.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken } },
-        React.createElement(Provider, null, children)));
+    return React.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken } }, children);
 };
-const DevPortalProvider = withQueryClientProvider(PlatformProvider);
+const DevPortalProvider = withPersistenceBoundary(withQueryClientProvider(withMosaicProvider(PlatformProvider)));
 
 const NodeContent = ({ node, Link, hideTryIt, hideTryItPanel, hideMocking, hideExport, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    return (React.createElement(PersistenceContextProvider, null,
-        React.createElement(NodeLinkContext.Provider, { value: [node, Link] },
-            React.createElement(MarkdownComponentsProvider, { value: { a: LinkComponent } },
-                React.createElement(MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
-                    React.createElement(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: [NodeType.HttpService, NodeType.Model].includes(node.type)
-                            ? {
-                                original: {
-                                    href: node.links.export_url,
-                                },
-                                bundled: {
-                                    href: getBundledUrl(node.links.export_url),
-                                },
-                            }
-                            : undefined, tryItCredentialsPolicy: tryItCredentialsPolicy }))))));
+    return (React.createElement(NodeLinkContext.Provider, { value: [node, Link] },
+        React.createElement(MarkdownComponentsProvider, { value: { a: LinkComponent } },
+            React.createElement(MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
+                React.createElement(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: [NodeType.HttpService, NodeType.Model].includes(node.type)
+                        ? {
+                            original: {
+                                href: node.links.export_url,
+                            },
+                            bundled: {
+                                href: getBundledUrl(node.links.export_url),
+                            },
+                        }
+                        : undefined, tryItCredentialsPolicy: tryItCredentialsPolicy })))));
 };
 const NodeLinkContext = React.createContext(undefined);
 const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
@@ -76,7 +72,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.createElement(Link, { to: edge.slug, hash: hash }, children));
+            return React.createElement(Link, { to: `${edge.slug}${hash && `#${hash}`}` }, children);
         }
     }
     return React.createElement("a", { href: href }, children);
@@ -91,7 +87,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.useRef(null);
     const onChange = React.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
     const onKeyDown = React.useCallback(e => {
@@ -108,7 +104,7 @@ const SearchImpl = ({ search, searchResults, isOpen, onClose, onClick, onSearch
             onClick(selectedResult);
         }
     }, [searchResults, onClick]);
-    return (React.createElement(Modal, { renderHeader: () => (React.createElement(Input, { appearance: "minimal", borderB: true, size: "lg", icon: React.createElement(Box, { as: Icon, ml: 1, icon: faSearch }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose }, searchResults && searchResults.length > 0 ? (React.createElement(ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
+    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 }, searchResults && searchResults.length > 0 ? (React.createElement(ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
         var _a, _b;
         return (React.createElement(ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
             React.createElement(Box, { p: 3, borderB: true },
@@ -183,7 +179,7 @@ const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", hr
     React__default.createElement(Icon, { icon: faExclamationTriangle, size: "4x" }),
     React__default.createElement(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) {
@@ -297,7 +293,7 @@ const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, c
         elem = React.createElement(NotFound, null);
     }
     else {
-        elem = (React.createElement(NodeContent, { node: node, Link: Link, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
+        elem = (React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
     }
     const handleTocClick = () => {
         if (container.current) {
@@ -309,8 +305,8 @@ const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, c
             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));
 };
 const StoplightProjectRouter = (_a) => {
-    var { platformUrl, basePath = '/', router } = _a, props = __rest(_a, ["platformUrl", "basePath", "router"]);
-    const { Router, routerProps } = 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 } = useRouter(router, basePath, staticRouterPath);
     return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
         React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
             React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug", exact: true },
@@ -320,7 +316,7 @@ const StoplightProjectRouter = (_a) => {
             React.createElement(Route, { path: "/", exact: true },
                 React.createElement(StoplightProjectImpl, Object.assign({}, props))))));
 };
-const StoplightProject = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(StoplightProjectRouter);
+const StoplightProject = withStyles(StoplightProjectRouter);
 
 const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
     const queryParams = [];
@@ -363,10 +359,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 = useRef(null);
+    var lastInvokeTime = useRef(0);
+    var timerId = useRef(null);
+    var lastArgs = useRef([]);
+    var lastThis = useRef();
+    var result = useRef();
+    var funcRef = useRef(func);
+    var mounted = 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;
+    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 = 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 = useState(adjustFunctionValueOfSetState(initialState)), state = _a[0], setState = _a[1];
+    var setStateIgnoreCallback = 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(useCallback(function (value) { return dispatch(value); }, [dispatch]), delay, options);
+    var previousValue = useRef(value);
+    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.useContext(PlatformContext);
     const [debounceSearch] = useDebounce(search, 500);
-    return useQuery(['workspaceNodes', workspaceId, branchSlug, projectIds, debounceSearch, platformUrl, platformAuthToken], () => getNodes({ workspaceId, branchSlug, projectIds, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause });
+    return useQuery(['workspaceNodes', platformUrl, platformAuthToken, workspaceId, branchSlug, projectIds, debounceSearch], () => getNodes({ workspaceId, branchSlug, projectIds, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
 }
 
 function useGetWorkspace({ projectIds }) {