@stoplight/elements-dev-portal 1.12.0 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/Search/Search.d.ts +8 -0
  2. package/components/Search/Search.stories.d.ts +1 -0
  3. package/index.d.ts +1 -1
  4. package/index.esm.js +10 -4
  5. package/index.js +10 -3
  6. package/index.mjs +10 -4
  7. package/package.json +1 -1
  8. package/version.d.ts +1 -1
  9. package/web-components.min.js +1 -1
package/components/Search/Search.d.ts CHANGED
@@ -10,4 +10,12 @@ export declare type SearchProps = {
10
10
  isOpen?: boolean;
11
11
  onClose: ModalProps['onClose'];
12
12
  };
13
+ export declare type SearchResultsListProps = {
14
+ searchResults?: NodeSearchResult[];
15
+ isEmbedded?: boolean;
16
+ showDivider?: boolean;
17
+ onClick: (result: NodeSearchResult) => void;
18
+ };
19
+ export declare const SearchResultsList: ({ searchResults, onClick, isEmbedded, showDivider, }: SearchResultsListProps) => JSX.Element;
20
+ export declare const SearchResults: React.FC<SearchResultsListProps>;
13
21
  export declare const Search: React.FC<SearchProps>;
package/components/Search/Search.stories.d.ts CHANGED
@@ -31,3 +31,4 @@ declare const _default: {
31
31
  };
32
32
  export default _default;
33
33
  export declare const Playground: Story<SearchWrapperProps>;
34
+ export declare const EmbeddedSearch: Story<SearchWrapperProps>;
package/index.d.ts CHANGED
@@ -5,7 +5,7 @@ export { DevPortalProvider } from './components/DevPortalProvider';
5
5
  export type { NodeContentProps } from './components/NodeContent';
6
6
  export { NodeContent } from './components/NodeContent';
7
7
  export type { SearchProps } from './components/Search';
8
- export { Search } from './components/Search';
8
+ export { Search, SearchResults } from './components/Search';
9
9
  export type { TableOfContentsProps } from './components/TableOfContents';
10
10
  export { TableOfContents } from './components/TableOfContents';
11
11
  export { devPortalCacheKeys } from './consts';
package/index.esm.js CHANGED
@@ -138,6 +138,11 @@ const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick
138
138
  (_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
139
139
  }
140
140
  }, []);
141
+ 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 },
142
+ React.createElement(SearchResultsList, { searchResults: searchResults, onClick: onClick })));
143
+ };
144
+ const SearchResultsList = ({ searchResults, onClick, isEmbedded, showDivider = true, }) => {
145
+ const listBoxRef = React.useRef(null);
141
146
  const onSelectionChange = React.useCallback(keys => {
142
147
  const selectedId = keys.values().next().value;
143
148
  const selectedResult = searchResults === null || searchResults === void 0 ? void 0 : searchResults.find(searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId);
@@ -145,10 +150,10 @@ const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick
145
150
  onClick(selectedResult);
146
151
  }
147
152
  }, [searchResults, onClick]);
148
- 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) => {
153
+ 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) => {
149
154
  var _a, _b;
150
155
  return (React.createElement(ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
151
- React.createElement(Box, { p: 3, borderB: true },
156
+ React.createElement(Box, { p: 3, borderB: !showDivider ? undefined : true },
152
157
  React.createElement(Flex, { align: "center" },
153
158
  React.createElement(Box, { as: Icon, w: 4, icon: NodeTypeIconDefs[searchResult.type], style: { color: NodeTypeColors[searchResult.type] } }),
154
159
  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 }),
@@ -156,6 +161,7 @@ const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick
156
161
  React.createElement(Box, { dangerouslySetInnerHTML: { __html: (_b = searchResult.highlighted.summary) !== null && _b !== void 0 ? _b : '' }, color: "muted", fontSize: "sm", mt: 1, ml: 6 }))));
157
162
  })) : (React.createElement(Flex, { w: "full", h: 80, align: "center", justify: "center", m: -5 }, "No search results"))));
158
163
  };
164
+ const SearchResults = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchResultsList);
159
165
  const Search = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchImpl);
160
166
 
161
167
  /*! *****************************************************************************
@@ -243,7 +249,7 @@ const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", hr
243
249
  React__default.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
244
250
  React__default.createElement(Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
245
251
 
246
- const appVersion = '1.12.0';
252
+ const appVersion = '1.13.0';
247
253
 
248
254
  class ResponseError extends Error {
249
255
  constructor(message, responseCode) {
@@ -679,4 +685,4 @@ function useGetWorkspace({ projectIds }) {
679
685
  return useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));
680
686
  }
681
687
 
682
- export { BranchSelector, DevPortalProvider, NodeContent, ResponseError, Search, StoplightProject, TableOfContents, devPortalCacheKeys, getBranches, getNodeContent, getNodes, getTableOfContents, getWorkspace, useGetBranches, useGetNodeContent, useGetNodes, useGetTableOfContents, useGetWorkspace };
688
+ export { BranchSelector, DevPortalProvider, NodeContent, ResponseError, Search, SearchResults, StoplightProject, TableOfContents, devPortalCacheKeys, getBranches, getNodeContent, getNodes, getTableOfContents, getWorkspace, useGetBranches, useGetNodeContent, useGetNodes, useGetTableOfContents, useGetWorkspace };
package/index.js CHANGED
@@ -165,6 +165,11 @@ const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick
165
165
  (_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
166
166
  }
167
167
  }, []);
168
+ 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 ? faSpinner : faSearch, spin: isLoading }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose },
169
+ React__namespace.createElement(SearchResultsList, { searchResults: searchResults, onClick: onClick })));
170
+ };
171
+ const SearchResultsList = ({ searchResults, onClick, isEmbedded, showDivider = true, }) => {
172
+ const listBoxRef = React__namespace.useRef(null);
168
173
  const onSelectionChange = React__namespace.useCallback(keys => {
169
174
  const selectedId = keys.values().next().value;
170
175
  const selectedResult = searchResults === null || searchResults === void 0 ? void 0 : searchResults.find(searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId);
@@ -172,10 +177,10 @@ const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick
172
177
  onClick(selectedResult);
173
178
  }
174
179
  }, [searchResults, onClick]);
175
- 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 ? faSpinner : 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) => {
180
+ return (React__namespace.createElement(React__namespace.Fragment, null, searchResults && searchResults.length > 0 ? (React__namespace.createElement(mosaic.ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: isEmbedded ? undefined : 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
176
181
  var _a, _b;
177
182
  return (React__namespace.createElement(mosaic.ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
178
- React__namespace.createElement(mosaic.Box, { p: 3, borderB: true },
183
+ React__namespace.createElement(mosaic.Box, { p: 3, borderB: !showDivider ? undefined : true },
179
184
  React__namespace.createElement(mosaic.Flex, { align: "center" },
180
185
  React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, w: 4, icon: elementsCore.NodeTypeIconDefs[searchResult.type], style: { color: elementsCore.NodeTypeColors[searchResult.type] } }),
181
186
  React__namespace.createElement(mosaic.Box, { flex: 1, fontSize: "lg", dangerouslySetInnerHTML: { __html: (_a = searchResult.highlighted.name) !== null && _a !== void 0 ? _a : '' }, fontWeight: "medium", textOverflow: "overflow-ellipsis", mx: 2 }),
@@ -183,6 +188,7 @@ const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick
183
188
  React__namespace.createElement(mosaic.Box, { dangerouslySetInnerHTML: { __html: (_b = searchResult.highlighted.summary) !== null && _b !== void 0 ? _b : '' }, color: "muted", fontSize: "sm", mt: 1, ml: 6 }))));
184
189
  })) : (React__namespace.createElement(mosaic.Flex, { w: "full", h: 80, align: "center", justify: "center", m: -5 }, "No search results"))));
185
190
  };
191
+ const SearchResults = flow__default["default"](elementsCore.withStyles, elementsCore.withPersistenceBoundary, elementsCore.withMosaicProvider, elementsCore.withQueryClientProvider)(SearchResultsList);
186
192
  const Search = flow__default["default"](elementsCore.withStyles, elementsCore.withPersistenceBoundary, elementsCore.withMosaicProvider, elementsCore.withQueryClientProvider)(SearchImpl);
187
193
 
188
194
  /*! *****************************************************************************
@@ -270,7 +276,7 @@ const UpgradeToStarter = () => (React__default["default"].createElement(mosaic.F
270
276
  React__default["default"].createElement(mosaic.Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
271
277
  React__default["default"].createElement(mosaic.Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
272
278
 
273
- const appVersion = '1.12.0';
279
+ const appVersion = '1.13.0';
274
280
 
275
281
  class ResponseError extends Error {
276
282
  constructor(message, responseCode) {
@@ -711,6 +717,7 @@ exports.DevPortalProvider = DevPortalProvider;
711
717
  exports.NodeContent = NodeContent;
712
718
  exports.ResponseError = ResponseError;
713
719
  exports.Search = Search;
720
+ exports.SearchResults = SearchResults;
714
721
  exports.StoplightProject = StoplightProject;
715
722
  exports.TableOfContents = TableOfContents;
716
723
  exports.devPortalCacheKeys = devPortalCacheKeys;
package/index.mjs CHANGED
@@ -138,6 +138,11 @@ const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick
138
138
  (_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
139
139
  }
140
140
  }, []);
141
+ 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 },
142
+ React.createElement(SearchResultsList, { searchResults: searchResults, onClick: onClick })));
143
+ };
144
+ const SearchResultsList = ({ searchResults, onClick, isEmbedded, showDivider = true, }) => {
145
+ const listBoxRef = React.useRef(null);
141
146
  const onSelectionChange = React.useCallback(keys => {
142
147
  const selectedId = keys.values().next().value;
143
148
  const selectedResult = searchResults === null || searchResults === void 0 ? void 0 : searchResults.find(searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId);
@@ -145,10 +150,10 @@ const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick
145
150
  onClick(selectedResult);
146
151
  }
147
152
  }, [searchResults, onClick]);
148
- 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) => {
153
+ 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) => {
149
154
  var _a, _b;
150
155
  return (React.createElement(ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
151
- React.createElement(Box, { p: 3, borderB: true },
156
+ React.createElement(Box, { p: 3, borderB: !showDivider ? undefined : true },
152
157
  React.createElement(Flex, { align: "center" },
153
158
  React.createElement(Box, { as: Icon, w: 4, icon: NodeTypeIconDefs[searchResult.type], style: { color: NodeTypeColors[searchResult.type] } }),
154
159
  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 }),
@@ -156,6 +161,7 @@ const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick
156
161
  React.createElement(Box, { dangerouslySetInnerHTML: { __html: (_b = searchResult.highlighted.summary) !== null && _b !== void 0 ? _b : '' }, color: "muted", fontSize: "sm", mt: 1, ml: 6 }))));
157
162
  })) : (React.createElement(Flex, { w: "full", h: 80, align: "center", justify: "center", m: -5 }, "No search results"))));
158
163
  };
164
+ const SearchResults = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchResultsList);
159
165
  const Search = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchImpl);
160
166
 
161
167
  /*! *****************************************************************************
@@ -243,7 +249,7 @@ const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", hr
243
249
  React__default.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
244
250
  React__default.createElement(Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
245
251
 
246
- const appVersion = '1.12.0';
252
+ const appVersion = '1.13.0';
247
253
 
248
254
  class ResponseError extends Error {
249
255
  constructor(message, responseCode) {
@@ -679,4 +685,4 @@ function useGetWorkspace({ projectIds }) {
679
685
  return useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));
680
686
  }
681
687
 
682
- export { BranchSelector, DevPortalProvider, NodeContent, ResponseError, Search, StoplightProject, TableOfContents, devPortalCacheKeys, getBranches, getNodeContent, getNodes, getTableOfContents, getWorkspace, useGetBranches, useGetNodeContent, useGetNodes, useGetTableOfContents, useGetWorkspace };
688
+ export { BranchSelector, DevPortalProvider, NodeContent, ResponseError, Search, SearchResults, StoplightProject, TableOfContents, devPortalCacheKeys, getBranches, getNodeContent, getNodes, getTableOfContents, getWorkspace, useGetBranches, useGetNodeContent, useGetNodes, useGetTableOfContents, useGetWorkspace };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stoplight/elements-dev-portal",
3
- "version": "1.12.0",
3
+ "version": "1.13.0",
4
4
  "description": "UI components for composing beautiful developer documentation.",
5
5
  "keywords": [],
6
6
  "main": "./index.js",
package/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const appVersion = "1.12.0";
1
+ export declare const appVersion = "1.13.0";