@stoplight/elements-dev-portal 1.5.0 → 1.5.1

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

@@ -4,7 +4,7 @@ import React__default, { useRef, useEffect, useMemo, useCallback, useState } fro
 import { withQueryClientProvider, withMosaicProvider, PersistenceContextProvider, MarkdownComponentsProvider, MockingProvider, Docs, withStyles, withPersistenceBoundary, 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, faCircleNotch, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+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 { useQuery } from 'react-query';
@@ -88,7 +88,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 => {
@@ -105,7 +105,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 },
@@ -180,7 +180,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.5.0';
+const appVersion = '1.5.1';
 
 class ResponseError extends Error {
     constructor(message, responseCode) {
@@ -590,7 +590,7 @@ function useDebounce(value, delay, options) {
 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 }) {

package/index.js

@@ -115,7 +115,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 => {
@@ -132,7 +132,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: freeSolidSvgIcons.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 },
@@ -207,7 +207,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.5.0';
+const appVersion = '1.5.1';
 
 class ResponseError extends Error {
     constructor(message, responseCode) {
@@ -617,7 +617,7 @@ function useDebounce(value, delay, options) {
 function useGetNodes({ search, workspaceId, branchSlug, projectIds, pause, }) {
     const { platformUrl, platformAuthToken } = React__namespace.useContext(PlatformContext);
     const [debounceSearch] = useDebounce(search, 500);
-    return reactQuery.useQuery(['workspaceNodes', workspaceId, branchSlug, projectIds, debounceSearch, platformUrl, platformAuthToken], () => getNodes({ workspaceId, branchSlug, projectIds, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause });
+    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 }) {

package/index.mjs

@@ -4,7 +4,7 @@ import React__default, { useRef, useEffect, useMemo, useCallback, useState } fro
 import { withQueryClientProvider, withMosaicProvider, PersistenceContextProvider, MarkdownComponentsProvider, MockingProvider, Docs, withStyles, withPersistenceBoundary, 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, faCircleNotch, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+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 { useQuery } from 'react-query';
@@ -88,7 +88,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 => {
@@ -105,7 +105,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 },
@@ -180,7 +180,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.5.0';
+const appVersion = '1.5.1';
 
 class ResponseError extends Error {
     constructor(message, responseCode) {
@@ -590,7 +590,7 @@ function useDebounce(value, delay, options) {
 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 }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "main": "./index.js",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.10.2",
-    "@stoplight/elements-core": "~7.4.0",
+    "@stoplight/elements-core": "~7.4.1",
     "@stoplight/markdown-viewer": "^5.3.2",
     "@stoplight/mosaic": "^1.12.4",
     "@stoplight/path": "^1.3.2",

package/version.d.ts

@@ -1 +1 @@
-export declare const appVersion = "1.5.0";
+export declare const appVersion = "1.5.1";